From dfa2e66389df106ef38a4fd621f2e3e0cf91ace8 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 08 三月 2024 15:28:48 +0800
Subject: [PATCH] feat:地图信息框点击
---
src/views/daoAnOffice/center-map.vue | 386 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 250 insertions(+), 136 deletions(-)
diff --git a/src/views/daoAnOffice/center-map.vue b/src/views/daoAnOffice/center-map.vue
index ec2e799..d32e142 100644
--- a/src/views/daoAnOffice/center-map.vue
+++ b/src/views/daoAnOffice/center-map.vue
@@ -1,149 +1,175 @@
-<script setup lang="ts">
-import { ref, reactive, nextTick } from "vue";
-import { currentGET, GETNOBASE } from "@/api";
-import { registerMap, getMap } from "echarts/core";
-import { optionHandle, regionCodes } from "./center.map";
-import BorderBox13 from "@/components/datav/border-box-13";
-import type { MapdataType } from "./center.map";
-import chart2 from "./chart2.vue"
-import chartgd from "./chartgd.vue"
-const option = ref({});
-const code = ref("china"); //china 浠ｈ〃涓浗 鍏朵粬鍦板競鏄鏀跨紪鐮�
-
-withDefaults(
- defineProps<{
- // 缁撴潫鏁板��
- title: number | string;
- }>(),
- {
- title: "鍦板浘",
- }
-);
-
-const dataSetHandle = async (regionCode: string, list: object[]) => {
- const geojson: any = await getGeojson(regionCode);
- let cityCenter: any = {};
- let mapData: MapdataType[] = [];
- //鑾峰彇褰撳墠鍦板浘姣忓潡琛屾斂鍖轰腑蹇冪偣
- geojson.features.forEach((element: any) => {
- cityCenter[element.properties.name] =
- element.properties.centroid || element.properties.center;
- });
- //褰撳墠涓績鐐瑰鏋滄湁姝ゆ潯鏁版嵁涓績鐐瑰垯璧嬪�紉锛寉褰撶劧杩欎釜x,y涔熷彲浠ュ悗绔繑鍥炶繘琛屽ぇ鐐癸紝鍓嶇鐪佸幓澶氳浠ｇ爜
- list.forEach((item: any) => {
- if (cityCenter[item.name]) {
- mapData.push({
- name: item.name,
- value: cityCenter[item.name].concat(item.value),
- });
- }
- });
- await nextTick();
- console.log(mapData)
- option.value = optionHandle(regionCode, list, mapData);
-};
-
-const getData = async (regionCode: string) => {
- currentGET("centerMap", { regionCode: regionCode }).then((res) => {
- console.log("璁惧鍒嗗竷", res);
- if (res.success) {
- dataSetHandle(res.data.regionCode, res.data.dataList);
- }
- });
-};
-const getGeojson = (regionCode: string) => {
- return new Promise<boolean>(async (resolve) => {
- let mapjson = getMap(regionCode);
- if (mapjson) {
- mapjson = mapjson.geoJSON;
- resolve(mapjson);
- } else {
- mapjson = await GETNOBASE(`./map-geojson/${regionCode}.json`).then(
- (data) => data
- );
- code.value = regionCode;
- registerMap(regionCode, {
- geoJSON: mapjson as any,
- specialAreas: {},
- });
- resolve(mapjson);
- }
- });
-};
-getData(code.value);
-
-const mapClick = (params: any) => {
- console.log(params);
- let xzqData = regionCodes[params.name];
- if (xzqData) {
- getData(xzqData.adcode);
- } else {
- window["$message"].warning("鏆傛棤涓嬬骇鍦板競");
- }
-};
-const dtFig =ref(0)
-const handlechan =()=>{
- console.log(dtFig.value)
- dtFig.value = 1
-}
-</script>
-
<template>
<div class="centermap">
- <div class="maptitle" style="display:none;">
- <div class="zuo"></div>
- <span class="titletext">{{ title }}</span>
- <div class="you"></div>
+ <div class="maptitle">
+ <img src="@/assets/img/icon/map_title.png" alt="">
</div>
<div class="mapwrap">
- <chartgd @changeDt="handlechan" v-if="dtFig ==0"></chartgd>
- <chart2 v-else></chart2>
+ <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">
+ <div class="info-title-container">
+ <div class="img-bg">
+ <img src="@/assets/img/icon/map_info_title.png" alt="">
+ </div>
+ <div class="info-title">
+ <div class="icon">
+ <img src="@/assets/img/icon/arrow_right.png" alt="">
+ </div>
+ <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">{{ activeData.data.type1 ? activeData.data.type1 : 0 }}</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">閲嶇偣鏃呮父閫氶亾锛�</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">{{ activeData.data.type3 ? activeData.data.type3 : 0 }}</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">璀﹀姏閰嶅锛�</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">{{ activeData.data.type5 ? activeData.data.type5 : 0 }}</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">浜ら�氫簨鏁呮槗鍙戠偣锛�</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">{{ activeData.data.type7 ? activeData.data.type7 : 0 }}</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">鍏氦绾胯矾锛�</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">{{ activeData.data.type9 ? activeData.data.type9 : 0 }}</div>
+ </div>
+ </div>
</div>
</div>
</template>
+
+<script setup>
+import CityMap from './center/city-map.vue';
+
+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: {},
+});
+
+const mapItemClick = (id) => {
+ activeData.value = mapData.value.find((item) => item.id === id);
+}
+
+const cancleClick = () => {
+ activeData.value = {
+ name: '閮芥睙鍫板競',
+ data: totalNum(),
+ };
+}
+
+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(() => {
+ cancleClick();
+});
+
+</script>
+
<style scoped lang="scss">
.centermap {
margin-bottom: 30px;
-
- .maptitle {
- height: 60px;
- display: flex;
- justify-content: center;
- padding-top: 10px;
- box-sizing: border-box;
-
- .titletext {
- font-size: 28px;
- font-weight: 900;
- letter-spacing: 6px;
- background: linear-gradient(
- 92deg,
- #0072ff 0%,
- #00eaff 48.8525390625%,
- #01aaff 100%
- );
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- margin: 0 10px;
- }
-
- .zuo,
- .you {
- background-size: 100% 100%;
- width: 29px;
- height: 20px;
- margin-top: 8px;
- }
-
- .zuo {
- background: url("@/assets/img/xiezuo.png") no-repeat;
- }
-
- .you {
- background: url("@/assets/img/xieyou.png") no-repeat;
- }
- }
+ position: relative;
.mapwrap {
//height: 580px;
@@ -156,7 +182,7 @@
.quanguo {
position: absolute;
right: 20px;
- top: -46px;
+ top: -46px;
width: 80px;
height: 28px;
border: 1px solid #00eded;
@@ -172,4 +198,92 @@
}
}
}
+
+.map-style {
+ width: 100%;
+ height: 100%;
+}
+
+.maptitle {
+ width: 308px;
+ position: absolute;
+ left: 0;
+ top: 30px;
+}
+
+.map-info-container {
+ width: 225px;
+ position: absolute;
+ right: 0;
+ bottom: 120px;
+ background: rgba(17, 34, 58, 0.6);
+ border: 1px solid #29466A;
+ z-index: 5;
+
+ .info-title-container {
+ width: 100%;
+ position: relative;
+
+ .img-bg {
+ width: 100%;
+ }
+
+ .info-title {
+
+ width: 100%;
+ position: absolute;
+ top: 5px;
+ left: 0;
+ display: flex;
+ align-items: center;
+
+ .icon {
+ width: 15px;
+ margin: 0 5px 0 12px;
+ }
+
+ .title {
+ font-weight: 400;
+ font-size: 20px;
+ color: #FFFFFF;
+ text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
+ font-style: italic;
+ background: linear-gradient(180deg, #FFFFFF 0%, #70B2F4 100%);
+ -webkit-background-clip: text;
+ // -webkit-text-fill-color: transparent;
+ }
+ }
+ }
+
+ .info-content-container {
+ position: relative;
+ padding: 10px 20px;
+ margin-top: -40px;
+ font-size: 14px;
+ z-index: 2;
+
+ .info-item {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: #4481DD;
+ line-height: 28px;
+
+ .info-text {
+ color: #fff;
+ }
+ }
+ }
+
+}
+
+.info-lable {
+ font-family: 'PingFang SC' !important;
+}
+
+.test {
+ position: absolute;
+ top: 0;
+}
</style>
--
Gitblit v1.8.0