<template>
|
<flex-layout direction="row" class="page-index">
|
<content-box title="站点列表" slot="header" toggle style="width:320px">
|
<!-- <my-el-tree @node-click="nodeClick" :data="data"></my-el-tree> -->
|
<el-tree
|
@node-click="nodeClick"
|
:load="loadNode"
|
lazy
|
class="filter-tree"
|
:props="defaultProps"
|
></el-tree>
|
</content-box>
|
<div class="map-container">
|
<div class="map-content" id="allmap"></div>
|
</div>
|
<content-box title="站点列表" slot="footer" style="width:380px" no-header>
|
<div class="pie-list">
|
<div class="pie-item">
|
<pie-chart ref="chart1" id="chart1"></pie-chart>
|
</div>
|
<div class="pie-item">
|
<pie-chart ref="chart2" id="chart2"></pie-chart>
|
</div>
|
<div class="pie-item">
|
<pie-chart ref="chart3" id="chart3"></pie-chart>
|
</div>
|
<div class="pie-item">
|
<pie-chart ref="chart4" id="chart4"></pie-chart>
|
</div>
|
</div>
|
</content-box>
|
</flex-layout>
|
</template>
|
|
<script>
|
import BMapGL from "BMapGL";
|
import ContentBox from "../components/ContentBox";
|
/* import MyElTree from "../components/MyElTree"; */
|
import PieChart from "../components/chart/PieChart";
|
|
import {
|
searchPowerOff,
|
searchBattGood,
|
searchProvince,
|
searchCity,
|
searchCounty,
|
searchStation,
|
searchMapStation,
|
searchBattInfo
|
} from "@/assets/js/api";
|
|
let chart1, chart2, chart3, chart4;
|
export default {
|
components: {
|
ContentBox,
|
/* MyElTree, */
|
PieChart
|
},
|
data() {
|
return {
|
/* data: [
|
{
|
id: "湖北省",
|
label: "湖北省",
|
children: [
|
{
|
id: "湖北省-武汉市",
|
label: "武汉市",
|
children: [
|
{
|
id: "湖北省-武汉市-东西湖区",
|
label: "东西湖区",
|
children: [
|
{
|
id: "湖北省-武汉市-东西湖区-测试机房",
|
label: "测试机房"
|
}
|
]
|
}
|
]
|
}
|
]
|
},
|
{
|
id: "河南省",
|
label: "河南省",
|
children: [
|
{
|
id: "河南省-驻马店市",
|
label: "驻马店市",
|
children: [
|
{
|
id: "河南省-驻马店市-驿城区",
|
label: "驿城区",
|
children: [
|
{
|
id: "河南省-驻马店市-驿城区-测试机房",
|
label: "测试机房",
|
children: []
|
}
|
]
|
}
|
]
|
}
|
]
|
}
|
] */
|
|
defaultProps: {
|
label: "label",
|
isLeaf: (data, node) => {
|
if (node.level === 4) {
|
// 第三层没有子节点
|
return true;
|
}
|
}
|
}
|
};
|
},
|
|
methods: {
|
initMap() {
|
|
// 按住鼠标右键，修改倾斜角和角度
|
var map = new BMapGL.Map("allmap"); // 创建Map实例
|
var point = new BMapGL.Point(116.404, 39.925);
|
map.centerAndZoom(point, 15) // 初始化地图,设置中心点坐标和地图级别
|
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
map.setHeading(64.5);
|
map.setTilt(73);
|
|
var marker = new BMapGL.Marker(point); // 创建点
|
map.addOverlay(marker); // 将标注添加到地图中
|
|
var opts = {
|
width: 300, // 信息窗口宽度
|
height: 200, // 信息窗口高度
|
title: '<p style="font-size: 16px;color: #2ca90e;margin:2px;margin-bottom: 20px;">湖北省-鄂州市-东方世纪城-设备1 </p>', // 信息窗口标题
|
message: "这里是故宫"
|
};
|
var infoWindow = new BMapGL.InfoWindow(
|
'<p style="font-size: 16px;color: #2ca90e;margin:2px;margin-bottom: 20px;">蓄电池组告警数目：50 详情>> <br> 蓄电池组落后数目：0 详情>> <br> 蓄电池组延时数目：0 详情>> <br> 实时数据 历史数据 <br>地址：上海市-上海市-浦东新区-卢东路</p>',
|
|
opts); // 创建信息窗口对象
|
marker.addEventListener("click", function() {
|
map.openInfoWindow(infoWindow, point); //开启信息窗口
|
});
|
},
|
|
/* loadNode 加载子树数据的方法*/
|
async loadNode(node, resolve) {
|
console.log("node", node);
|
if (node.level === 0) {
|
/* * 查询省 */
|
const { data: province } = await searchProvince();
|
// console.log("province", province);
|
if (province.result && JSON.parse(province.result).code == 0) {
|
return this.$message.error(JSON.parse(province.result).msg);
|
}
|
const list = JSON.parse(province.result).data;
|
//console.log("list", list)
|
const cityData = list.map(item => {
|
return { label: item }; /* return出一个对象 最后得到一个数组对象 */
|
});
|
// console.log("cityData", cityData)
|
return resolve(cityData);
|
} else if (node.level === 1) {
|
/* 查询市 */
|
const city = await searchCity({ StationName1: node.data.label });
|
//console.log('city.data.result',city.data.result);
|
|
if (city.data.result && JSON.parse(city.data.result).code == 0) {
|
return this.$message.error(JSON.parse(city.data.result).msg);
|
}
|
|
const citys = JSON.parse(city.data.result).data;
|
const cityList = citys.map(item => {
|
return { label: item };
|
});
|
return resolve(cityList);
|
/* console.log("cityList", cityList); */
|
} else if (node.level === 2) {
|
/* 查询区县 */
|
|
const county = await searchCounty({
|
StationName1: node.parent.data.label,
|
StationName2: node.data.label
|
});
|
//console.log(' county', county);
|
|
if (county.data.result && JSON.parse(county.data.result).code == 0) {
|
return this.$message.error(JSON.parse(county.data.result).msg);
|
}
|
|
const countys = JSON.parse(county.data.result).data;
|
const countyList = countys.map(item => {
|
return { label: item };
|
});
|
|
return resolve(countyList);
|
} else if (node.level === 3) {
|
/* room 机房信息 */
|
const room = await searchStation({
|
StationName1: node.parent.parent.data.label,
|
StationName2: node.parent.data.label,
|
StationName5: node.data.label
|
});
|
//console.log(' room', room);
|
if (room.data.result && JSON.parse(room.data.result).code == 0) {
|
return this.$message.error(JSON.parse(room.data.result).msg);
|
}
|
const rooms = JSON.parse(room.data.result).data;
|
/* StationName3机房位置信息 */
|
const roomList = rooms.map(item => {
|
return { label: item.StationName3 };
|
});
|
return resolve(roomList);
|
} else {
|
/* 查询电池组信息 */
|
return resolve([]);
|
}
|
},
|
|
async handleInterface(node) {
|
const [areaRoom, batteryList] = await Promise.all([
|
/* 查询地图机房信息 （结果中有机房的位置信息） */
|
searchMapStation({
|
StationName1: node.parent.parent.parent.data.label,
|
StationName2: node.parent.parent.data.label,
|
StationName5: node.parent.data.label
|
}),
|
/* 查询电池组信息 */
|
searchBattInfo({
|
StationName1: node.parent.parent.parent.data.label,
|
StationName2: node.parent.parent.data.label,
|
StationName5: node.parent.data.label,
|
StationName3: node.data.label
|
})
|
]);
|
//console.log('areaRoom',areaRoom);
|
|
if (areaRoom.data.result && JSON.parse(areaRoom.data.result).code == 0) {
|
return this.$message.error(JSON.parse(areaRoom.data.result).msg);
|
}
|
//console.log('batteryList',batteryList);
|
if (batteryList.data.result && JSON.parse(batteryList.data.result).code == 0) {
|
return this.$message.error(JSON.parse(batteryList.data.result).msg);
|
}
|
const list = JSON.parse(areaRoom.data.result).data;
|
let obj = list.find(item => item.StationName3 == node.data.label);
|
if (obj.longitude == 0 && obj.latitude == 0) {
|
this.$message.warning("机房未定位");
|
}
|
},
|
//树形控件点击事件
|
async nodeClick(current, value) {
|
console.log(value.level, value);
|
if (value.level > 3) {
|
this.handleInterface(value);
|
}
|
},
|
|
initChart() {
|
// 饼状图1
|
chart1 = {
|
//红，蓝，绿
|
color: ["#FF0000", "#00FF00"],
|
title: {
|
text: "机房停电"
|
},
|
series: [
|
{
|
name: "电池信息",
|
data: [
|
{ value: this.powerOff.sum, name: "机房停电" },
|
|
{
|
value: this.powerOff.newsum - this.powerOff.sum,
|
name: "机房未停电"
|
}
|
]
|
}
|
]
|
};
|
|
// 饼状图2
|
chart2 = {
|
// 红,黄，绿，蓝
|
color: ["#00FF00", "#FFD700", "#FF0000"],
|
title: {
|
text: "单体容量健康率"
|
},
|
series: [
|
{
|
name: "电池信息",
|
data: [
|
{
|
value:
|
this.battGood.sum -
|
this.battGood.data[1] -
|
this.battGood.data[0],
|
name: "单体容量健康"
|
},
|
{ value: this.battGood.data[1], name: "单体容量更换" },
|
{ value: this.battGood.data[0], name: "单体容量告警" }
|
]
|
}
|
]
|
};
|
|
// 饼状图3
|
chart3 = {
|
// 红, 黄，绿，紫色
|
color: ["#FF0000", "#FFD700", "#00FF00", "#BA55D3"],
|
title: {
|
text: "电池状态"
|
},
|
series: [
|
{
|
name: "电池信息",
|
data: [
|
{ value: 0, name: "放电" },
|
{ value: 0, name: "充电" },
|
{ value: 0, name: "浮充" },
|
{ value: 0, name: "均充" }
|
]
|
}
|
]
|
};
|
|
// 饼状图4
|
chart4 = {
|
// 红, 深蓝色, 蓝，浅红，绿, 黄
|
color: [
|
"#FF0000",
|
"#00008B",
|
"#1E90FF",
|
"#F08080",
|
"#7CFC00",
|
"#FFD700"
|
],
|
title: {
|
text: "电池告警率"
|
},
|
series: [
|
{
|
name: "电池信息",
|
data: [
|
{ value: 0, name: "在线电压" },
|
{ value: 0, name: "组端电压" },
|
{ value: 0, name: "充电电流" },
|
{ value: 0, name: "放电电流" },
|
{ value: 0, name: "单体电压" },
|
{ value: 0, name: "容量告警" }
|
]
|
}
|
]
|
};
|
|
// 设置图表
|
this.setChart();
|
},
|
setChart() {
|
this.$refs.chart1.setOption(chart1);
|
this.$refs.chart2.setOption(chart2);
|
this.$refs.chart3.setOption(chart3);
|
this.$refs.chart4.setOption(chart4);
|
},
|
//获取echarts图表电池数据 /* 电池组健康率 机房停电信息 */
|
async getBatteryData() {
|
const [battGood, powerOff] = await Promise.all([
|
searchBattGood(),
|
searchPowerOff()
|
]);
|
console.log('battGood',battGood);
|
console.log('powerOff',powerOff);
|
|
if (battGood.status !== 200) {
|
return this.$message.error(battGood.statusText);
|
}
|
if (powerOff.status !== 200) {
|
return this.$message.error(powerOff.statusText);
|
}
|
this.battGood = JSON.parse(battGood.data.result);
|
this.powerOff = JSON.parse(powerOff.data.result);
|
|
this.initChart();
|
}
|
},
|
mounted() {
|
this.initMap();
|
// 初始化饼状图
|
this.getBatteryData();
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.filter-tree {
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
}
|
.page-index {
|
color: #ffffff;
|
}
|
.map-container {
|
margin-right: 4px;
|
margin-left: 4px;
|
box-sizing: border-box;
|
height: 100%;
|
}
|
.map-content {
|
height: 100%;
|
}
|
.pie-list {
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
height: 100%;
|
}
|
.pie-item {
|
flex: 1;
|
}
|
</style>
|
