From 773e59cdc3571ad0815f286bb8895a3f27a28961 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 01 三月 2024 16:01:23 +0800
Subject: [PATCH] Merge branch 'master' of http://42.193.1.25:9521/r/~xiaohui/daoAnOffice
---
src/views/daoAnOffice/center-map copy.vue | 175 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 175 insertions(+), 0 deletions(-)
diff --git a/src/views/daoAnOffice/center-map copy.vue b/src/views/daoAnOffice/center-map copy.vue
new file mode 100644
index 0000000..5606e8d
--- /dev/null
+++ b/src/views/daoAnOffice/center-map copy.vue
@@ -0,0 +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>
+ <div class="mapwrap" style="display:none;">
+<!-- <chartgd @changeDt="handlechan" v-if="dtFig ==0"></chartgd>-->
+ <chart2 ></chart2>
+ </div>
+ </div>
+</template>
+
+<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;
+ }
+ }
+
+ .mapwrap {
+ //height: 580px;
+ height: 900px;
+ width: 100%;
+ // padding: 0 0 10px 0;
+ box-sizing: border-box;
+ position: relative;
+
+ .quanguo {
+ position: absolute;
+ right: 20px;
+ top: -46px;
+ width: 80px;
+ height: 28px;
+ border: 1px solid #00eded;
+ border-radius: 10px;
+ color: #00f7f6;
+ text-align: center;
+ line-height: 26px;
+ letter-spacing: 6px;
+ cursor: pointer;
+ box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
+ 0 0 6px rgba(0, 237, 237, 0.4);
+ z-index: 10;
+ }
+ }
+}
+</style>
--
Gitblit v1.8.0