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: '鏍囨敞姝ｇ‘鐜�', 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: '涓�鏈轰竴妗ｅ悎鏍肩巼', 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