From 80f8e591eec342463e980efc08522125f493057f Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 19 三月 2024 17:03:18 +0800
Subject: [PATCH] feat:大屏地图

---
 src/views/screen/components/screen-examine/components/examine-chart.vue |   19 +---
 src/views/screen/components/screen-wrapper/index.vue                    |   18 +++
 src/views/screen/components/screen-map/index.vue                        |  154 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 176 insertions(+), 15 deletions(-)

diff --git a/src/views/screen/components/screen-examine/components/examine-chart.vue b/src/views/screen/components/screen-examine/components/examine-chart.vue
index 3146d3d..32dfd86 100644
--- a/src/views/screen/components/screen-examine/components/examine-chart.vue
+++ b/src/views/screen/components/screen-examine/components/examine-chart.vue
@@ -10,7 +10,6 @@
 </template>
 
 <script>
-import * as echarts from 'echarts';
 import ExamineHola from './examine-hola.vue';
 let barChart = null;
 export default {
@@ -27,15 +26,9 @@
         {id: 4,name: '鐐逛綅鍦ㄧ嚎鐜�', value: 40},
         {id: 5,name: '褰曞儚鍙敤鐜�', value: 80},
         {id: 6,name: '閲嶇偣鐐逛綅褰曞儚鍙敤鐜�', value: 20},
-        {id: 7,name: '鏍囨敞姝g‘鐜�', value: 24},
-        {id: 8,name: '瑙嗗浘搴撳鎺ョǔ瀹氭��', value: 25},
-        {id: 9,name: '淇℃伅閲囬泦鍑嗙‘鐜�', value: 75},
-        {id: 10,name: '杞﹁締鍗″彛璁惧鏃堕挓鍑嗙‘鎬�', value: 12},
-        {id: 11,name: '璁惧鎶撴媿鍥剧墖鏃堕挓鍑嗙‘鎬�', value: 82},
-        {id: 12,name: '浜鸿劯鍗″彛淇℃伅閲囬泦鍑嗙‘鐜�', value: 13},
-        {id: 13,name: '璁惧鎶撴媿鍥剧墖鍚堟牸鎬�', value: 91},
-        {id: 14,name: '璁惧鎶撴媿鍥剧墖鏃堕挓鍑嗙‘鎬�', value: 12},
-        {id: 15,name: '骞冲彴鍦ㄧ嚎鐜�', value: 42},
+        {id: 7,name: '涓�鏈轰竴妗e悎鏍肩巼', value: 60},
+        {id: 8,name: '鍗¢棬杩囪溅鏁版嵁涓�鑷存��', value: 40},
+        
       ]
     }
   },
@@ -61,11 +54,13 @@
     justify-content: space-between;
     flex-wrap: wrap;
     align-content: space-between;
+    padding: 20px 0;
+    box-sizing: border-box;
 
     .hola-item {
       flex-shrink: 0;
-      width: 180px;
-      height: 150px;
+      width: 240px;
+      height: 200px;
       color: #008000
     }
   }
diff --git a/src/views/screen/components/screen-map/index.vue b/src/views/screen/components/screen-map/index.vue
new file mode 100644
index 0000000..8a263a0
--- /dev/null
+++ b/src/views/screen/components/screen-map/index.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="map-container">
+    <wrapper-title :title="'鍖哄煙鍦板浘'"></wrapper-title>
+    <div class="map-content">
+      <div ref="map" class="map-style"></div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import 'echarts-gl';
+import mapData from '@/assets/map/zigong.json';
+import WrapperTitle from '../wrapper-title/index';
+
+echarts.registerMap('zigong', mapData);
+console.log(mapData);
+let mapChart = null;
+let tempName = '';
+let observer = null;
+const mapConfig = {
+  series: [{
+    map: "zigong", //娉ㄥ唽鍦板浘鐨勫悕瀛�
+    type: "map3D",
+    bottom: 0,
+    left: 0,
+    top: 0,
+    right: 0,
+    itemStyle: {
+      color: "#4189f2", // 鑳屾櫙
+      opacity: 1, //閫忔槑搴�
+      borderWidth: 1, // 杈规瀹藉害
+      borderColor: "#fff", // 杈规棰滆壊
+      fontSize: 18, //
+    },
+
+    // 鏍囩
+    label: {
+      show: true,
+      color: "#fff", //鍦板浘鍒濆鍖栧尯鍩熷瓧浣撻鑹�
+      fontSize: 18,
+    },
+    // 鎺у埗鍣�
+    viewControl: {
+      beta: -30,
+      alpha: 90,
+      distance: 100,
+      maxBeta: 180,
+      panSensitivity: 0
+    },
+    // 榧犳爣绉诲叆鏃舵牱寮�
+    emphasis: {
+      itemStyle: {
+        color: "#F63545"
+      }
+    },
+
+    // 鏁版嵁
+    data: mapData.features.map((item) => {
+      return {
+        name: item.properties.name,
+        itemStyle: {
+          color: "#4189f2"
+        }
+      }
+    }),
+  }
+  ]
+
+};
+export default {
+  name: 'DataMap',
+  data() {
+    return {
+
+    }
+  },
+  components: {
+    WrapperTitle
+  },
+  methods: {
+    filterData(name) {
+      this.initConfig();
+      let temp = mapConfig.series[0].data.find(item => item.name === name);
+      temp.itemStyle.color = '#F63545';
+      mapChart.setOption(mapConfig, true);
+      this.$emit('filterData', name);
+    },
+    initConfig() {
+      mapConfig.series[0].data.forEach(item => {
+        item.itemStyle.color = '#4189f2';
+      });
+    },
+    // 鐩戝惉鍙樺寲
+    observe() {
+      if (!observer) {
+        observer = new ResizeObserver(entries => {
+          this.handleResize();
+        })
+      }
+      observer.observe(this.$refs.map);
+    },
+    // 绐楀彛鍙樻崲
+    handleResize() {
+      if (mapChart) {
+        mapChart.resize();
+      }
+    }
+  },
+  mounted() {
+    mapChart = echarts.init(this.$refs.map);
+    mapChart.setOption(mapConfig, true);
+    mapChart.on('click', (params) => {
+      if (tempName === params.name) {
+        tempName = '';
+        this.initConfig();
+        mapChart.setOption(mapConfig, true);
+        this.$emit('filterData', '');
+      } else {
+        tempName = params.name;
+        this.filterData(params.name);
+      }
+    });
+    this.observe();
+  },
+  beforeDestroy() {
+    if (observer) {
+      mapChart.dispose();
+      observer.unobserve(this.$refs.map);
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.map-container {
+  width: 100%;
+  flex: 1;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+
+  .map-content {
+    flex: 1;
+    background: rgba(67, 102, 155, 0.3);
+  border: 1px solid rgba(47, 91, 157, 0.8);
+  }
+  .map-style {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue
index 532a79a..b314a67 100644
--- a/src/views/screen/components/screen-wrapper/index.vue
+++ b/src/views/screen/components/screen-wrapper/index.vue
@@ -7,7 +7,8 @@
         <screen-car></screen-car>
         <screen-video></screen-video>
       </div>
-      <div class="center-container wrapper">
+      <div class="center-container center-wrapper">
+        <screen-map></screen-map>
         <screen-detection></screen-detection>
 
       </div>
@@ -24,6 +25,7 @@
 import ScreenExamine from '../screen-examine/index';
 import ScreenVideo from '../screen-video/index';
 import ScreenCar from '../screen-car/index';
+import ScreenMap from '../screen-map/index';
 export default {
   name: 'ScreenWrapper',
   components: {
@@ -31,7 +33,8 @@
     ScreenDetection,
     ScreenExamine,
     ScreenVideo,
-    ScreenCar
+    ScreenCar,
+    ScreenMap
   },
 }
 </script>
@@ -59,7 +62,7 @@
 }
 
 .wrapper {
-  width: 33.3%;
+  width: 27%;
   height: 100%;
   box-sizing: border-box;
   padding: 0 10px;
@@ -75,4 +78,13 @@
     padding-right: 0;
   }
 }
+.center-wrapper {
+  width: 46%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
 </style>
\ No newline at end of file

--
Gitblit v1.8.0