<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 {
|
searchBattState,
|
searchPowerOff,
|
searchBattGood,
|
searchProvince,
|
searchCity,
|
searchCounty,
|
searchStation,
|
searchMapStation,
|
searchBattInfo,
|
searchAlarm,
|
addMapStation,
|
// searchMap,
|
addMapSetdian
|
} from "@/assets/js/api";
|
|
let chart1, chart2, chart3, chart4;
|
export default {
|
components: {
|
ContentBox,
|
/* MyElTree, */
|
PieChart
|
},
|
data() {
|
return {
|
lat: 0, //维度
|
lng: 0, //经度
|
marker: null,
|
infoWindow: null,
|
map: null,
|
panTo: null,
|
point: null,
|
obj: null,
|
|
defaultProps: {
|
label: "label",
|
isLeaf: (data, node) => {
|
if (node.level === 4) {
|
// 第三层没有子节点
|
return true;
|
}
|
}
|
}
|
};
|
},
|
|
methods: {
|
initMap() {
|
// 按住鼠标右键，修改倾斜角和角度
|
this.map = new BMapGL.Map("allmap"); // 创建Map实例
|
this.point = new BMapGL.Point(this.lng, this.lat); // 创建点坐标
|
this.map.centerAndZoom(this.point, 15); // 初始化地图,设置中心点坐标和地图级别
|
this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
this.map.setHeading(64.5);
|
this.map.setTilt(73);
|
this.marker = new BMapGL.Marker(this.point); // 创建点
|
this.map.addOverlay(this.marker); // 将标注添加到地图中
|
var opts = {
|
width: 350, // 信息窗口宽度
|
height: 150, // 信息窗口高度
|
title:
|
'<p style="font-size: 16px;color: black;margin:2px;margin-bottom: 20px;">贵阳省-贵阳市-南明区-紫晶办事处-设备1 </p>', // 信息窗口标题
|
message: "这里是故宫"
|
};
|
this.infoWindow = new BMapGL.InfoWindow(
|
'<p style="font-size: 16px;color: black;margin:2px;margin-top: 10px; ">蓄电池组告警数目：50 详情>> <br> 蓄电池组落后数目：0 详情>> <br> 蓄电池组延时数目：0 详情>> <br> <span style="color:blue">实时数据 历史数据</span> <br>地址：贵阳省-贵阳市-南明区-紫晶办事处</p>',
|
opts
|
);
|
// 创建信息窗口对象
|
this.map.openInfoWindow(this.infoWindow, this.map.getCenter()); // 打开信息窗口
|
this.onCLickMap(); //点击事件获取坐标
|
/* 可托拽的标注 */
|
this.marker.enableDragging();
|
this.marker.addEventListener("dragend", function(e) {
|
console.log("当前位置：" + e.point.lng + ", " + e.point.lat);
|
});
|
|
/* this.marker.addEventListener("click", function(){
|
this.map.openInfoWindow(this.infoWindow,114.31899932245216 ,30.58005640282491 )//当点击当前的标注的时候打开创建的信息窗口
|
}); */
|
|
/* 右键菜单 */
|
var menu = new BMapGL.ContextMenu();
|
var txtMenuItem = [
|
{
|
text: "放大",
|
callback: function() {
|
this.map.zoomIn();
|
}
|
},
|
{
|
text: "缩小",
|
callback: function() {
|
this.map.zoomOut();
|
}
|
},
|
{
|
text: "设置中心点",
|
callback: function() {
|
this.map.zoomCentral();
|
}
|
},
|
{
|
text: "放置到最大级",
|
callback: function() {
|
this.map.setZoom(18);
|
}
|
},
|
{
|
text: "查看全国",
|
callback: function() {
|
this.map.setZoom(4);
|
}
|
},
|
{
|
text: "设置机房",
|
async callback(node) {
|
// this.marker = new BMapGL.Marker(point);
|
// this.map.pointToPixel(point);
|
// this.map.addOverlay(this.marker);
|
console.log("node...", node);
|
//查询已添加到地图的机房
|
/* const data = await searchMap({
|
adata: { alm_cleared_type: 0, alm_id: 1 },
|
bplan: { discharge_reason: 3 }
|
});
|
console.log("data.....", data); */
|
const addSetdian = await addMapSetdian(); //设置站点名
|
/* console.log("addSetdian.....", addSetdian); */
|
const addSetmap =JSON.parse(addSetdian.data.result).data
|
console.log('addSetmap',addSetmap);
|
|
const res = await addMapStation({
|
//添加地图上的机房
|
StationName1: node.StationName1,
|
StationName2: node.StationName2,
|
StationName5: node.StationName5,
|
StationName3: node.StationName3,
|
Address: this.address,
|
longitude: node.lng,
|
latitude: node.lat,
|
information: ""
|
});
|
|
/* this.marker = new BMapGL.Marker(); // 创建点
|
this.map.addOverlay(this.marker); // */
|
|
console.log("res", res);
|
}
|
}
|
];
|
for (var i = 0; i < txtMenuItem.length; i++) {
|
menu.addItem(
|
new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100)
|
);
|
}
|
this.map.addContextMenu(menu);
|
},
|
|
/* 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
|
})
|
]);
|
|
if (areaRoom.data.result && JSON.parse(areaRoom.data.result).code == 0) {
|
return this.$message.error(JSON.parse(areaRoom.data.result).msg);
|
}
|
console.log("areaRoom", areaRoom);
|
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;
|
this.obj = list.find(item => item.StationName3 == node.data.label);
|
console.log("obj", this.obj); //机房坐标
|
if (this.obj.longitude == 0 && this.obj.latitude == 0) {
|
this.$message.warning("机房未定位");
|
} else {
|
this.batteryList = JSON.parse(batteryList.data.result).data; //电池组数目
|
/* 图标移动位置 */
|
this.marker.setPosition(
|
new BMapGL.Point(this.obj.longitude, this.obj.latitude)
|
);
|
/* 地图移动位置 */
|
this.map.panTo(new BMapGL.Point(this.obj.longitude, this.obj.latitude));
|
}
|
},
|
//树形控件点击事件
|
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: this.battState.data[2].num, name: "放电" },
|
{ value: this.battState.data[3].num, name: "充电" },
|
{ value: this.battState.data[1].num, name: "浮充" },
|
{ value: this.battState.data[4].num, name: "均充" }
|
]
|
}
|
]
|
};
|
|
// 饼状图4
|
chart4 = {
|
// 红, 深蓝色, 蓝，浅红，绿, 黄
|
color: [
|
"#FF0000",
|
"#00008B",
|
"#1E90FF",
|
"#F08080",
|
"#7CFC00",
|
"#FFD700"
|
],
|
title: {
|
text: "电池告警率"
|
},
|
series: [
|
{
|
name: "电池信息",
|
data: [
|
{ value: this.Alarm.data, name: "在线电压" },
|
{ value: this.Alarm.data.MonNum, name: "组端电压" },
|
{ value: this.Alarm.data.usr_Id, name: "充电电流" },
|
{ value: this.Alarm.data.alm_id, name: "放电电流" },
|
{ value: this.Alarm.data.alm_level, name: "单体电压" },
|
{
|
value: this.Alarm.data.alm_value + this.Alarm.data.BattGroupId,
|
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, battState, Alarm] = await Promise.all([
|
searchBattGood(),
|
searchPowerOff(),
|
searchBattState(),
|
searchAlarm()
|
]);
|
/* console.log('battGood',battGood); */
|
/* console.log('battState',battState); */
|
/* console.log("Alarm", Alarm); */
|
if (battGood.status !== 200) {
|
return this.$message.error(battGood.statusText);
|
}
|
if (powerOff.status !== 200) {
|
return this.$message.error(powerOff.statusText);
|
}
|
if (
|
battState.data.result &&
|
JSON.parse(battState.data.result).code == 0
|
) {
|
return this.$message.error(JSON.parse(battState.data.result).msg);
|
}
|
this.battGood = JSON.parse(battGood.data.result);
|
this.powerOff = JSON.parse(powerOff.data.result);
|
this.battState = JSON.parse(battState.data.result);
|
this.Alarm = JSON.parse(Alarm.data.result);
|
/* console.log('this.Alarm ',this.Alarm ) */
|
/* console.log('this.battState',this.battState); */
|
|
this.initChart();
|
},
|
// 通过IP获取当前经纬度
|
async getLocationByIp() {
|
// 获取到经纬度坐标后
|
const ipRes = await this.$jsonp("http://api.map.baidu.com/location/ip", {
|
ak: "AWqwD701uOy6kaLIxBY2NDjATvE6x5IG",
|
coor: "bd09ll",
|
output: "jsonp"
|
});
|
this.address = ipRes.address; //地址
|
this.lng = ipRes.content.point.x; //经度
|
this.lat = ipRes.content.point.y; //纬度
|
console.log("ipRes", ipRes);
|
// 创建地图
|
this.$nextTick(() => {
|
this.initMap();
|
});
|
},
|
onCLickMap() {
|
this.map.addEventListener("click", function(e) {
|
console.log(
|
"lng",
|
e.latlng.lng,
|
"lat",
|
e.latlng.lat,
|
"cityName",
|
e.currentTarget.cityName
|
);
|
});
|
}
|
},
|
mounted() {
|
this.getLocationByIp(); // 通过IP获取当前经纬度
|
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>
|
