From 39913b145347f509a1137a398f9803fca7e4f4b8 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 29 二月 2024 14:00:13 +0800
Subject: [PATCH] fix:修改线段图表
---
src/views/daoAnOffice/chartgd.vue | 114 +++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 95 insertions(+), 19 deletions(-)
diff --git a/src/views/daoAnOffice/chartgd.vue b/src/views/daoAnOffice/chartgd.vue
index 4806ef8..4dc2e16 100644
--- a/src/views/daoAnOffice/chartgd.vue
+++ b/src/views/daoAnOffice/chartgd.vue
@@ -1,41 +1,81 @@
<template>
<div class="home">
<div id="map-box"></div>
-<!-- <div class="btn">-->
-<!-- <el-button type="primary" @click="btnsubmit">纭畾</el-button>-->
-<!-- </div>-->
- <div style="position: absolute;bottom: 0;left: 0">
- <el-button @click="btnlk" type="primary">瀹炴椂璺喌</el-button>
- <el-button @click="toggleTrafic">鍦板浘鍒囨崲</el-button>
+ <div style="position: absolute;bottom: 20%;right: 35%;z-index: 999">
+ <div @click="btnlk" class="item-tb">
+ <img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
+ <p class="item-tb-p">瀹炴椂璺喌</p>
+ </div>
+ <div @click="toggleTrafic" class="item-tb">
+ <p class="item-tb-p">鍦板浘鍒囨崲</p>
+ <img src="@/assets/img/dtqh.png" alt="" class="item-tb-img">
+ </div>
+
</div>
<div class="info-box">
<!-- right鑿滃崟-->
<div class="info-div" @click="accidentProneRoadSections">
- 浜嬫晠鏄撳彂澶氬彂璺
+ <img src="@/assets/img/sgyfd.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>浜嬫晠鏄撳彂澶氬彂璺</p>
+ <p>78</p>
+ </div>
</div>
<div class="info-div" @click="keyTouristChannels">
- 閲嶇偣鏃呮父閫氶亾
+ <img src="@/assets/img/zdlytd.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>閲嶇偣鏃呮父閫氶亾</p>
+ <p>178</p>
+ </div>
</div>
<div class="info-div">
- 閮芥睙鍫版櫙鍖�
+ <img src="@/assets/img/djyjq.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>閮芥睙鍫版櫙鍖�</p>
+ <p>278</p>
+ </div>
</div>
<div class="info-div" @click="policeForceDeployment">
- 璀﹀姏閰嶅
+ <img src="@/assets/img/jlpb.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>璀﹀姏閰嶅</p>
+ <p>348</p>
+ </div>
</div>
<div class="info-div" @click="fencingConstruction">
- 鎵撳洿鏂藉伐
+ <img src="@/assets/img/dwsg.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>鎵撳洿鏂藉伐</p>
+ <p>578</p>
+ </div>
</div>
<div class="info-div">
- 浜ら�氫簨鏁呮槗鍙戠偣
+ <img src="@/assets/img/jtysqy.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>浜ら�氫簨鏁呮槗鍙戠偣</p>
+ <p>788</p>
+ </div>
</div>
<div class="info-div" @click="keyTransportationEnterprises">
- 閲嶇偣杩愯緭浼佷笟
+ <img src="@/assets/img/zdlytd.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>閲嶇偣杩愯緭浼佷笟</p>
+ <p>758</p>
+ </div>
</div>
<div class="info-div">
- 鍏氦绾胯矾
+ <img src="@/assets/img/gjxl.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>鍏氦绾胯矾</p>
+ <p>785</p>
+ </div>
</div>
<div class="info-div">
- 瀹夊叏闅愭偅
+ <img src="@/assets/img/aqyh.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>瀹夊叏闅愭偅</p>
+ <p>718</p>
+ </div>
</div>
<!-- 鎼滅储-->
@@ -61,6 +101,7 @@
<script lang="ts" setup>
import {shallowRef, defineEmits, defineComponent, ref, onBeforeUnmount, onMounted} from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
+import {Pointer} from "@element-plus/icons-vue";
const map = shallowRef(null);
const keyword = ref('');
@@ -642,24 +683,59 @@
margin: 0px;
position: relative;
.info-div{
+ align-items: center;
+ display: flex;
+ cursor: pointer;
margin-top: 0.5rem;
- background-color: #4E2749;
+ //background-color: #4E2749;
height: 2.5rem;
line-height: 2.5rem;
padding-left: 0.5rem;
+ font-family: PingFang SC;
+ font-weight: 800;
+ color: #74A6F2;
+ .item-tb-img{
+ width: 20px;
+ height: 20px;
+ }
+ .info-div-p{
+ flex: 1;
+ margin-left: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
}
.info-box {
position: absolute;
- top: 8px;
- right: 8px;
+ top: 80px;
+ right: 34%;
width: 300px;
//height: 100%;
//background-color: #1f1f1f;
- background-color: #131F3F;
+ opacity: 0.6;
+ background: #11223A;
+ border: 1px solid #29466A;
+ //background-color: #131F3F;
padding: 1rem;
display: flex;
flex-direction: column;
}
+ .item-tb{
+ cursor: pointer;
+ margin-top: 20px;
+ .item-tb-img{
+ width: 65px;
+ }
+ .item-tb-p{
+ line-height:35px;
+ //background: #00adb5;
+ color:#fff;
+ text-align: center;
+ text-shadow:
+ 0 0 0.1em #4e6ef2, 0 0 0.3em #36f, 3px 3px #4e6ef2, 4px 4px #315efb
+ }
+ }
}
.ul{
margin-top: 10px;
--
Gitblit v1.8.0