<template>
|
<flex-layout direction="row" class="page-index">
|
<content-box title="站点列表" slot="header" toggle style="width:320px">
|
<div slot="box-tools"></div>
|
<div class="box-tools" slot="box-tools">
|
<el-tooltip class="item" effect="dark" content="站点信息" placement="bottom">
|
<i class="iconfont el-icon-xinxi"></i>
|
</el-tooltip>
|
<el-tooltip class="item2" effect="dark" content="站点搜索" placement="bottom">
|
<i class="iconfont el-icon-chazhao" @click="dialogVisible = true"></i>
|
</el-tooltip>
|
</div>
|
|
<!-- <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>
|
<el-dialog title="机房查询" :visible.sync="dialogVisible" width="30%">
|
<div class="rooms">机房名称:/机房id</div>
|
<el-input class="inputSeach" clearable v-model="inputSeach"></el-input>
|
<span class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
</span>
|
</el-dialog>
|
<!-- 右键菜单搜索框 -->
|
<!-- <div style="margin-top: 15px;">
|
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
|
<el-button slot="append" icon="el-icon-search"></el-button>
|
</el-input>
|
</div>-->
|
</content-box>
|
</flex-layout>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import BMapGL from "BMap";
|
import ContentBox from "../components/ContentBox";
|
/* import MyElTree from "../components/MyElTree"; */
|
import PieChart from "../components/chart/PieChart";
|
import InfoWindowTest from "../components/InfoWindowTest";
|
|
import {
|
searchBattState,
|
searchPowerOff,
|
searchBattGood,
|
searchProvince,
|
searchCity,
|
searchCounty,
|
searchStation,
|
searchMapStation,
|
searchBattInfo,
|
searchAlarm,
|
addMapStation,
|
searchDeletRoom,
|
searchMap,
|
addMapSetdian,
|
searchRooms,
|
searchCoordinate,
|
searchCoordinateMove,
|
searchRoomLocation
|
} from "@/assets/js/api";
|
import { log } from "util";
|
import { async, Promise } from "q";
|
import { json } from "body-parser";
|
|
let chart1, chart2, chart3, chart4;
|
let infoWindowTest = Vue.extend(InfoWindowTest);
|
let showInfoWindowTest = new infoWindowTest().$mount();
|
export default {
|
components: {
|
ContentBox,
|
/* MyElTree, */
|
PieChart
|
},
|
data() {
|
return {
|
medatas: {},
|
inputSeach: "",
|
dialogVisible: false,
|
input1: "",
|
input2: "",
|
input3: "",
|
lat: 0, //维度
|
lng: 0, //经度
|
cityName: "", //城市
|
marker: null,
|
infoWindow: null,
|
map: null,
|
panTo: null,
|
point: null,
|
obj: null,
|
opts: null,
|
addSeachroom: [], //地图上所有机房
|
defaultProps: {
|
label: "label",
|
isLeaf: (data, node) => {
|
if (node.level === 4) {
|
// 第三层没有子节点
|
return true;
|
}
|
}
|
}
|
};
|
},
|
|
methods: {
|
// 向父级发送同步页面的指令
|
syncPage() {
|
let batt = this.batt;
|
let search =
|
"?province=" +
|
batt.StationName1 +
|
"&city=" +
|
batt.StationName2 +
|
"&county=" +
|
batt.StationName5 +
|
"&home=" +
|
batt.StationName3 +
|
"&batt=" +
|
batt.BattGroupId;
|
window.parent.postMessage(
|
{
|
cmd: "syncPage",
|
params: {
|
pageInfo: {
|
label: "实时监测",
|
name: "realTime",
|
src: "#/real-time" + search,
|
closable: true
|
}
|
}
|
},
|
"*"
|
);
|
},
|
/* 根据机房的id查询机房的经纬度 */
|
async getCityrom() {
|
/* const searchAddress = await searchRoomLocation({
|
StationName1: "湖北省",
|
StationName2: "武汉市",
|
StationName5: "东西区",
|
StationName3: "GDXG演示"
|
});
|
console.log("searchAddress", searchAddress); */
|
},
|
handleClose(done) {
|
done();
|
},
|
initMap() {
|
// 按住鼠标右键，修改倾斜角和角度
|
this.map = new BMapGL.Map("allmap"); // 创建Map实例
|
this.point = new BMapGL.Point(this.lng, this.lat); // 创建点坐标this.lng, this.lat 113.971,30.605
|
this.map.centerAndZoom(this.point, 1); // 初始化地图,设置中心点坐标和地图级别
|
this.map.enableScrollWheelZoom();
|
this.map.disableDoubleClickZoom();
|
},
|
|
/* 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 that = this;
|
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.error("机房未定位");
|
} else {
|
this.batteryList = JSON.parse(batteryList.data.result).data; //电池组数目
|
/* console.log(" this.batteryList", this.batteryList); */
|
/* 图标移动位置 */
|
this.marker.setPosition(
|
new BMapGL.Point(this.obj.longitude, this.obj.latitude)
|
);
|
/* 地图移动位置 */
|
this.map.panTo(new BMapGL.Point(this.obj.longitude, this.obj.latitude));
|
/* 信息框移动位置 */
|
this.map.openInfoWindow(
|
this.infoWindow,
|
new BMapGL.Point(this.obj.longitude, this.obj.latitude)
|
);
|
}
|
|
/* 信息框中的告警数延时数 接口 */
|
/* const roomWarning = await searchRooms({
|
StationId: this.batteryList[0].StationId
|
});
|
console.log("roomWarning", roomWarning);
|
const newRoomWarning = JSON.parse(roomWarning.data.result).data;
|
console.log("newRoomWarning", newRoomWarning); */
|
|
this.marker.addEventListener("click", e => {
|
this.map.openInfoWindow(
|
this.infoWindow,
|
new BMapGL.Point(this.obj.longitude, this.obj.latitude)
|
); //开启信息窗口
|
});
|
|
//右击删除marker 菜单
|
this.marker.addEventListener("rightclick", e => {
|
/* console.log('e...............',e) */
|
const select = that.addseRoomlist.find(
|
item => this.batteryList[0].StationId === item.data.StationId
|
);
|
this.$confirm(
|
'确认从地图上删除"武汉市-东西湖-设备1的位置信息"',
|
"提示",
|
{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}
|
)
|
.then(async () => {
|
if (select) {
|
/* 右击删除当前标注 */
|
const deleteMarker = await searchDeletRoom({
|
num: select.data.num,
|
StationId: select.data.StationId,
|
StationName: select.data.StationName,
|
StationName3: select.data.StationName3,
|
Address: select.data.Address,
|
longitude: select.data.longitude,
|
latitude: select.data.latitude,
|
information: select.data.information,
|
FBSDeviceId: select.data.FBSDeviceId
|
});
|
//右击删除标注
|
/* console.log("deleteMarker", deleteMarker); */
|
|
this.map.removeOverlay(select);
|
|
this.initMap();
|
}
|
this.$message({
|
type: "success",
|
message: "删除成功!"
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消删除"
|
});
|
});
|
});
|
},
|
//树形控件点击事件
|
async nodeClick(current, value) {
|
/* console.log(value.level, value); */
|
if (value.level > 3) {
|
this.handleInterface(value);
|
}
|
},
|
// 通过IP获取当前经纬度
|
async getLocationByIp() {
|
// 获取到经纬度坐标后
|
// const ipRes = await this.$jsonp("http://api.map.baidu.com/location/ip", {
|
// ak: "AWqwD701uOy6kaLIxBY2NDjATvE6x5IG",
|
// coor: "bd09ll",
|
// output: "jsonp"
|
// });
|
const [ipRes, addSeachroom] = await Promise.all([
|
this.$jsonp("http://api.map.baidu.com/location/ip", {
|
ak: "AWqwD701uOy6kaLIxBY2NDjATvE6x5IG",
|
coor: "bd09ll",
|
output: "jsonp"
|
}),
|
searchMap({
|
adata: { alm_cleared_type: 0, alm_id: 1 },
|
bplan: { discharge_reason: 3 }
|
})
|
]);
|
this.address = ipRes.address; //地址
|
this.lng = ipRes.content.point.x; //经度
|
this.lat = ipRes.content.point.y; //纬度
|
this.addseRoomlist = JSON.parse(addSeachroom.data.result);
|
/* console.log('addseRoomlist',this.addseRoomlist) */
|
// 创建地图
|
this.$nextTick(() => {
|
this.initMap();
|
});
|
},
|
/*点击获取当前坐标 */
|
onCLickMap() {
|
const that = this;
|
this.map.addEventListener("rightclick", function(e) {
|
/* console.log("e", e); */
|
that.lng = e.latlng.lng;
|
that.lat = e.latlng.lat;
|
that.cityName = e.currentTarget.cityName;
|
});
|
},
|
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();
|
},
|
|
/* 添加机房接口 */
|
meData() {
|
const that = this;
|
// 添加面板点击事件
|
showInfoWindowTest.$on("set-home-info", function(data) {
|
console.log("data", data);
|
that.medatas = data;
|
console.log("that.medatas", that.medatas);
|
|
this.$confirm("确认将武汉-东西湖区设置到该位置吗?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(async () => {
|
//添加地图上的机房接口
|
const res = await addMapStation({
|
StationName1: data.info.StationName1,
|
StationName2: data.info.StationName2,
|
StationName5: data.info.StationName5,
|
StationName3: data.info.StationName3,
|
Address: data.address,
|
longitude: data.point.lng,
|
latitude: data.point.lat,
|
information: ""
|
});
|
|
this.$message({
|
type: "success",
|
message: "设置站点位置成功!"
|
});
|
that.initMap();
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消设置站点位置!"
|
});
|
});
|
});
|
}
|
},
|
mounted() {
|
this.getLocationByIp(); // 通过IP获取当前经纬度 查询已添加到地图的机房
|
this.getBatteryData(); // 初始化饼状图
|
this.meData(); //添加机房接口
|
this.getCityrom(); //根据机房的id查询机房的经纬度
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.box-tools {
|
position: relative;
|
line-height: 32px;
|
.item {
|
margin-right: 30px;
|
}
|
.item2 {
|
margin-right: -20px;
|
position: absolute;
|
top: 4px;
|
right: 20px;
|
}
|
}
|
|
.rooms {
|
margin-bottom: 10px !important;
|
}
|
|
.inputSeach {
|
margin-bottom: 15px !important;
|
}
|
|
/deep/ .el-science-blue .el-input.is-disabled .el-input__inner,
|
.el-science-blue .el-input__inner {
|
background-color: #fff !important;
|
border-color: #3ebdc9;
|
z-index: 999;
|
}
|
|
.dialog-footer {
|
margin-left: 375px;
|
}
|
|
.box-tools .iconfont {
|
font-size: 20px;
|
}
|
.box-tools .iconfont:hover {
|
cursor: pointer;
|
color: #cfcfcf;
|
}
|
.box-tools .iconfont:active {
|
color: #ff0000;
|
}
|
.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;
|
}
|
/*搜索框 */
|
.el-select .el-input {
|
width: 130px;
|
}
|
.input-with-select .el-input-group__prepend {
|
background-color: #fff;
|
}
|
</style>
|
