From 736188d35aa5a1782e1fc4e0a7ceb318e1448a54 Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期五, 30 七月 2021 11:42:50 +0800
Subject: [PATCH] 地图功能提交
---
src/pages/index.vue | 268 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 263 insertions(+), 5 deletions(-)
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 848c816..d95ef0c 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -4,7 +4,7 @@
<van-tabs v-model="active" color="#41c5f6" :swipeable="true" background="#ffffff">
<van-tab title="杞粨鍥�">
<div class="chartCon">
- <china-map ref="chinaMap" id="chinaMap" name="zhongguo"></china-map>
+ <china-map ref="cityChart" id="cityChart" name="zhongguo"></china-map>
</div>
</van-tab>
<van-tab title="绔欑偣鍒楄〃">
@@ -15,8 +15,54 @@
</template>
<script>
+ import * as ECharts from 'echarts';
import ChinaMap from '@/components/chart/chinaMap.vue'
import siteList from '@/components/site/siteList.vue'
+ import {
+ searchMap,
+ searchMapHomeState,
+ getAllMapOutlineAction,
+ } from '@/assets/js/api'
+ import HomeNormal from '@/assets/img/home.png'
+ let mapHomeImage = new Image();
+ mapHomeImage.src = HomeNormal;
+ // 姝ｅ父鐨勫浘鏍�
+ import HomeNormalImage from '@/assets/img/home-normal.png';
+ let homeNormalImage = new Image();
+ homeNormalImage.src = HomeNormalImage;
+ // 鍏呯數鐨勫浘鏍�
+ import HomeChargeImage from '@/assets/img/home-charge.png';
+ let homeChargeImage = new Image();
+ homeChargeImage.src = HomeChargeImage;
+ // 鍛婅鍥炬爣
+ import HomeWarnImage from '@/assets/img/home-warn.png';
+ let homeWarnImage = new Image();
+ homeWarnImage.src = HomeWarnImage;
+ // 鏀剧數鍥炬爣
+ import HomeDischargeImage from '@/assets/img/home-discharge.png';
+ let homeDischargeImage = new Image();
+ homeDischargeImage.src = HomeDischargeImage;
+ const behindOverlay = {
+ animate: "",
+ img: ""
+ };
+ const warnOverlay = {
+ animate: "",
+ img: ""
+ };
+ const timeoutOverlay = {
+ animate: "",
+ img: ""
+ };
+ const normalOverlay = {
+ animate: "",
+ img: ""
+ };
+ let addHomeData = [];
+ let chartData = []; //chart鏁版嵁
+ let abnormalArr = []; //寮傚父鏁扮粍
+ let tempData = []; //绔欑偣鏁扮粍
+ let chart, chartLng, chartLat;
export default {
components: {
ChinaMap,
@@ -28,11 +74,223 @@
}
},
mounted() {
- this.$nextTick(() => {
- this.$refs.chinaMap.setData({})
- this.$refs.chinaMap.searchChartHomeState();
- })
+ // 鍒濆鍖栭〉闈�
+ this.getAllMapOutlineAction();
},
+ methods: {
+ getAllMapOutlineAction() { //鏌ヨ婵�娲昏疆寤撳浘
+ getAllMapOutlineAction().then((res) => {
+ let rs = JSON.parse(res.data.result);
+ if (rs.code == 1) {
+ let data = rs.data;
+ data.map((item, index) => {
+ if (item.status == 1) {
+ this.mapName = item.name;
+ }
+ })
+ }
+ this.$nextTick(() => {
+ this.initCityChart();
+ });
+ }).catch((err) => {
+ console.log(err);
+ });
+ },
+ initCityChart() {
+ searchMap().then((res) => {
+ let rs = JSON.parse(res.data.result);
+ let list = this.mergeMapInfos(rs);
+ if (list != undefined && list.length > 0) {
+ list.map((item, index) => {
+ item.name = item.StationName;
+ item.value = [];
+ item.value.push(item.longitude);
+ item.value.push(item.latitude);
+ tempData.push(item)
+ })
+ this.searchChartHomeState();
+
+ let mapDotList = list.map(data => {
+ return {
+ lng: data.longitude,
+ lat: data.latitude,
+ title: data.StationName,
+ data: data,
+ name: data.StationName,
+ geometry: {
+ type: 'Point',
+ coordinates: [data.longitude, data.latitude]
+ }
+ }
+ });
+ addHomeData = mapDotList;
+ } else {
+ this.initChart([], []);
+ }
+ }).catch((err) => {
+ console.log(err)
+ })
+ },
+ searchChartHomeState() {
+ searchMapHomeState().then((res) => {
+ let rsState = JSON.parse(res.data.result);
+ let arr = [];
+ abnormalArr = [];
+ if (rsState.code === 1) {
+ let data = rsState.data;
+ data.map((item, i) => {
+ let infos = tempData.filter((jtem) => {
+ return jtem.StationId == item.StationId
+ })
+
+ if (infos.length > 0) {
+ let info = JSON.parse(JSON.stringify(infos[0]));
+ switch (item.num) {
+ case 1: // 钀藉悗
+ info.img = HomeDischargeImage;
+ info.color = '#ff6a6a';
+ abnormalArr.push(info);
+ break;
+ case 2: // 鍛婅
+ info.img = HomeWarnImage;
+ info.color = '#d4ac6e';
+ abnormalArr.push(info);
+ break;
+ case 3:
+ info.img = HomeChargeImage;
+ info.color = '#4ba1fa';
+ abnormalArr.push(info);
+ break;
+ default:
+ info.img = HomeNormalImage;
+ break;
+ }
+ arr.push(info)
+ }
+ })
+ let arrId = [];
+ for (let item of arr) {
+ if (arrId.indexOf(item['StationId']) == -1) {
+ arrId.push(item['StationId']);
+ chartData.push(item);
+ }
+ }
+ this.initChart(chartData, abnormalArr);
+
+ }
+ }).catch((err) => {
+ console.log(err)
+ })
+ },
+ initChart(chartData, abnormalArr) { //鍒濆鍖朿hart鍥�
+ let option = {};
+ if (abnormalArr.length > 0) {
+ option = {
+ series: [{ //鍥剧墖
+ name: '鍥剧墖',
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ symbol: function (value, params) {
+ return 'image://' + params.data.img
+ },
+ symbolSize: [26, 26],
+ label: {
+ normal: {
+ show: false,
+ }
+ },
+ data: chartData,
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ hoverAnimation: true,
+ zlevel: 2
+ }, { //娉㈢汗鐐�
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ showEffectOn: 'render',
+ zlevel: 1,
+ rippleEffect: {
+ period: 4,
+ scale: 4,
+ brushType: 'fill'
+ },
+ hoverAnimation: false,
+ label: {
+ normal: {
+ show: false
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: function (value, params) {
+ return value.data.color
+ },
+ shadowBlur: 8,
+ shadowColor: function (value, params) {
+ return value.data.color
+ },
+ }
+ },
+ symbolSize: [15, 15],
+ data: abnormalArr
+ }]
+ };
+ } else {
+ option = {
+ series: [{ //鍥剧墖
+ name: '鍥剧墖',
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ symbol: function (value, params) {
+ return 'image://' + params.data.img
+ },
+ symbolSize: [26, 26],
+ label: {
+ normal: {
+ show: false,
+ }
+ },
+ data: chartData,
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ hoverAnimation: true,
+ zlevel: 2
+ }]
+ };
+ }
+ console.log(option)
+ this.$refs.cityChart.setData(option);
+ },
+ mergeMapInfos(list) {
+ var mergeData = [];
+ // 閬嶅巻list
+ for (var i = 0; i < list.length; i++) {
+ var _list = list[i];
+ var isIn = this.checkMapInfoIsIn(_list, mergeData);
+ if (isIn == -1) {
+ mergeData.push(_list);
+ }
+ }
+ // 杩斿洖鍚堝苟鍊�
+ return mergeData;
+ },
+ checkMapInfoIsIn(mapInfo, mergeData) {
+ var rs = -1;
+ // 閬嶅巻mergeData
+ for (var i = 0; i < mergeData.length; i++) {
+ var _mergeData = mergeData[i];
+ // 缁忕含搴︾浉鍚�
+ if (mapInfo.latitude == _mergeData.latitude && mapInfo.longitude == _mergeData.longitude) {
+ rs = i;
+ }
+ }
+ return rs;
+ },
+ }
}
</script>
--
Gitblit v1.9.1