<template>
|
<div class="indexWarp">
|
<van-nav-bar title="首页" left-arrow></van-nav-bar>
|
<van-tabs v-model="active" color="#41c5f6" :swipeable="true" background="#ffffff">
|
<van-tab title="轮廓图">
|
<div class="chartCon">
|
<china-map ref="cityChart" id="cityChart" name="zhongguo"></china-map>
|
</div>
|
</van-tab>
|
<van-tab title="站点列表">
|
<site-list ref="siteList" id="siteList"></site-list>
|
</van-tab>
|
</van-tabs>
|
</div>
|
</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,
|
siteList
|
},
|
data() {
|
return {
|
active: 0
|
}
|
},
|
mounted() {
|
// 初始化页面
|
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) { //初始化chart图
|
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>
|
|
<style scoped>
|
.indexWarp {
|
width: 100%;
|
min-height: 100%;
|
background: #f8f8f8;
|
}
|
|
.chartCon {
|
height: calc(100vh - 90Px);
|
background-color: #0b388b;
|
}
|
</style>
|
