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