From 751c33d47a185b80596e9dc37938a43e56bc3ca8 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 08 三月 2024 16:53:39 +0800
Subject: [PATCH] fix:修改下拉框样式
---
src/views/daoAnOffice/center-map.vue | 197 ++++++++++++++++++++++++++++++------------------
1 files changed, 122 insertions(+), 75 deletions(-)
diff --git a/src/views/daoAnOffice/center-map.vue b/src/views/daoAnOffice/center-map.vue
index d06b1cc..d32e142 100644
--- a/src/views/daoAnOffice/center-map.vue
+++ b/src/views/daoAnOffice/center-map.vue
@@ -1,12 +1,20 @@
-
-
<template>
<div class="centermap">
<div class="maptitle">
<img src="@/assets/img/icon/map_title.png" alt="">
</div>
<div class="mapwrap">
- <div ref="map" class="map-style"></div>
+ <CityMap @mapItemClick="mapItemClick" @cancleClick="cancleClick"></CityMap>
+
+ <!-- <DialogType1></DialogType1>
+ <DialogType2></DialogType2>
+ <DialogType3></DialogType3>
+ <DialogType4></DialogType4>
+ <DialogType5></DialogType5>
+ <DialogType6></DialogType6>
+ <DialogType7></DialogType7>
+ <DialogType8></DialogType8>
+ <DialogType9></DialogType9> -->
</div>
<div class="map-info-container">
@@ -18,45 +26,45 @@
<div class="icon">
<img src="@/assets/img/icon/arrow_right.png" alt="">
</div>
- <span class="title">閮芥睙鍫板競</span>
+ <span class="title">{{ activeData.name ? activeData.name : '閮芥睙鍫板競' }}</span>
</div>
</div>
<div class="info-content-container">
<div class="info-item">
<div class="info-lable">浜嬫晠鏄撳彂澶氬彂璺锛�</div>
- <div class="info-text">78</div>
+ <div class="info-text">{{ activeData.data.type1 ? activeData.data.type1 : 0 }}</div>
</div>
<div class="info-item">
<div class="info-lable">閲嶇偣鏃呮父閫氶亾锛�</div>
- <div class="info-text">12</div>
+ <div class="info-text">{{ activeData.data.type2 ? activeData.data.type2 : 0 }}</div>
</div>
<div class="info-item">
<div class="info-lable">閮芥睙鍫版櫙鍖猴細</div>
- <div class="info-text">5</div>
+ <div class="info-text">{{ activeData.data.type3 ? activeData.data.type3 : 0 }}</div>
</div>
<div class="info-item">
<div class="info-lable">璀﹀姏閰嶅锛�</div>
- <div class="info-text">265</div>
+ <div class="info-text">{{ activeData.data.type4 ? activeData.data.type4 : 0 }}</div>
</div>
<div class="info-item">
<div class="info-lable">鎵撳洿鏂藉伐锛�</div>
- <div class="info-text">12</div>
+ <div class="info-text">{{ activeData.data.type5 ? activeData.data.type5 : 0 }}</div>
</div>
<div class="info-item">
<div class="info-lable">浜ら�氫簨鏁呮槗鍙戠偣锛�</div>
- <div class="info-text">31</div>
+ <div class="info-text">{{ activeData.data.type6 ? activeData.data.type6 : 0 }}</div>
</div>
<div class="info-item">
<div class="info-lable">閲嶇偣杩愯緭浼佷笟锛�</div>
- <div class="info-text">19</div>
+ <div class="info-text">{{ activeData.data.type7 ? activeData.data.type7 : 0 }}</div>
</div>
<div class="info-item">
<div class="info-lable">鍏氦绾胯矾锛�</div>
- <div class="info-text">89</div>
+ <div class="info-text">{{ activeData.data.type8 ? activeData.data.type8 : 0 }}</div>
</div>
<div class="info-item">
<div class="info-lable">瀹夊叏闅愭偅锛�</div>
- <div class="info-text">3</div>
+ <div class="info-text">{{ activeData.data.type9 ? activeData.data.type9 : 0 }}</div>
</div>
</div>
</div>
@@ -65,71 +73,97 @@
<script setup>
-import * as echarts from 'echarts';
-import 'echarts-gl';
-import { ref, onMounted, nextTick } from "vue";
+import CityMap from './center/city-map.vue';
-import mapData from '@/assets/map/dujiangyan.json';
+import { ref,onMounted } from "vue";
+const mapData = ref([
+ {
+ id: 1,
+ name: '榫欐睜闀�',
+ data: { type1: 1, type2: 2, type3: 4, type4: 5, type5: 12, type6: 31, type7: 19, type8: 10, type9: 20 },
+ },
+ {
+ id: 2,
+ name: '鐜夊爞琛楅亾',
+ data: { type1: 5, type2: 12, type3: 5, type4: 13, type5: 12, type6: 31, type7: 19, type8: 26, type9: 3 },
+ },
+ {
+ id: 3,
+ name: '闈掑煄灞遍晣',
+ data: { type1: 12, type2: 12, type3: 52, type4: 3, type5: 12, type6: 31, type7: 19, type8: 13, type9: 3 },
+ },
+ {
+ id: 4,
+ name: '鐭崇緤闀�',
+ data: { type1: 21, type2: 12, type3: 24, type4: 12, type5: 12, type6: 31, type7: 19, type8: 13, type9: 31 },
+ },
+ {
+ id: 5,
+ name: '骞哥琛楅亾',
+ data: { type1: 10, type2: 12, type3: 5, type4: 52, type5: 12, type6: 31, type7: 19, type8: 13, type9: 3 },
+ },
+ {
+ id: 6,
+ name: '閾舵潖琛楅亾',
+ data: { type1: 31, type2: 13, type3: 5, type4: 265, type5: 12, type6: 31, type7: 19, type8: 21, type9: 3 },
+ },
+ {
+ id: 7,
+ name: '鐏屽彛琛楅亾',
+ data: { type1: 52, type2: 12, type3: 5, type4: 265, type5: 12, type6: 31, type7: 19, type8: 13, type9: 3 },
+ },
+ {
+ id: 8,
+ name: '濂庡厜濉旇閬�',
+ data: { type1: 53, type2: 35, type3: 5, type4: 15, type5: 12, type6: 31, type7: 19, type8: 13, type9: 3 },
+ },
+ {
+ id: 9,
+ name: '澶╅┈闀�',
+ data: { type1: 13, type2: 2, type3: 5, type4: 51, type5: 12, type6: 31, type7: 19, type8: 12, type9: 15 },
+ },
+ {
+ id: 10,
+ name: '鑱氭簮闀�',
+ data: { type1: 13, type2: 35, type3: 65, type4: 24, type5: 12, type6: 35, type7: 3, type8: 42, type9: 24 },
+ },
+ {
+ id: 11,
+ name: '钂查槼琛楅亾',
+ data: { type1: 6, type2: 6, type3: 63, type4: 42, type5: 12, type6: 31, type7: 19, type8: 89, type9: 3 },
+ },
+]);
+const activeData = ref({
+ name: '閮芥睙鍫板競',
+ data: {},
+});
-echarts.registerMap('dujiangyan', mapData);
+const mapItemClick = (id) => {
+ activeData.value = mapData.value.find((item) => item.id === id);
+}
-const map = ref(null);
-let mapChart = null;
+const cancleClick = () => {
+ activeData.value = {
+ name: '閮芥睙鍫板競',
+ data: totalNum(),
+ };
+}
-const mapConfig = {
- geo3D: {
- map: "dujiangyan", //娉ㄥ唽鍦板浘鐨勫悕瀛�
- roam: true, //寮�鍚紶鏍囩缉鏀惧拰骞崇Щ婕父銆傞粯璁や笉寮�鍚�
- bottom: 80,
- left: 10,
- itemStyle: {
- color: "#4189f2", // 鑳屾櫙
- opacity: 0.7, //閫忔槑搴�
- borderWidth: 1.5, // 杈规瀹藉害
- borderColor: "#fff", // 杈规棰滆壊
- fontSize: 16, //
- },
- // 鏍囩
- label: {
- show: true,
- color: "#fff", //鍦板浘鍒濆鍖栧尯鍩熷瓧浣撻鑹�
- fontSize: 18,
- formatter: function (params) {
- return params.name
- },
- },
- // 鎺у埗鍣�
- viewControl: {
- beta: 80,
- alpha: 55,
- distance: 210,
- maxBeta: 180
- },
- // 鐏厜
- light: {
- main: {
- shadow: true,
- intensity: 1
- }
- },
- // 榧犳爣绉诲叆鏃舵牱寮�
- emphasis: {
- itemStyle: {
- color: "#F63545"
- }
- }
- }
-};
+const totalNum = () => {
+ let data = {};
+ mapData.value.forEach((item) => {
+ Object.keys(item.data).forEach((key) => {
+ data[key] = data[key] ? data[key] + item.data[key] : item.data[key];
+ });
+ });
+ return data;
+}
onMounted(() => {
- nextTick(() => {
- setTimeout(() => {
- mapChart = echarts.init(map.value);
- mapChart.setOption(mapConfig, true);
- }, 1000);
- })
-})
+ cancleClick();
+});
+
</script>
<style scoped lang="scss">
@@ -174,16 +208,17 @@
width: 308px;
position: absolute;
left: 0;
- top: 0;
+ top: 30px;
}
.map-info-container {
width: 225px;
position: absolute;
right: 0;
- bottom: 200px;
+ bottom: 120px;
background: rgba(17, 34, 58, 0.6);
border: 1px solid #29466A;
+ z-index: 5;
.info-title-container {
width: 100%;
@@ -215,15 +250,17 @@
font-style: italic;
background: linear-gradient(180deg, #FFFFFF 0%, #70B2F4 100%);
-webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
+ // -webkit-text-fill-color: transparent;
}
}
}
.info-content-container {
- padding: 18px 20px;
+ position: relative;
+ padding: 10px 20px;
margin-top: -40px;
font-size: 14px;
+ z-index: 2;
.info-item {
width: 100%;
@@ -232,6 +269,7 @@
justify-content: space-between;
color: #4481DD;
line-height: 28px;
+
.info-text {
color: #fff;
}
@@ -239,4 +277,13 @@
}
}
+
+.info-lable {
+ font-family: 'PingFang SC' !important;
+}
+
+.test {
+ position: absolute;
+ top: 0;
+}
</style>
--
Gitblit v1.8.0