| | |
|---|
| | | <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> |
|---|
| | | <home-list |
|---|
| | | slot="header" |
|---|
| | | @leaf-click="leafClick"></home-list> |
|---|
| | | <content-box title="站点列表" slot="header" toggle style="width:320px"></content-box> |
|---|
| | | <div class="map-container"> |
|---|
| | | <div class="map-content" id="allmap"></div> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | <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 BMap from "BMap"; |
|---|
| | | import ContentBox from "../components/ContentBox"; |
|---|
| | | /* import MyElTree from "../components/MyElTree"; */ |
|---|
| | | import PieChart from "../components/chart/PieChart"; |
|---|
| | | import InfoWindowTest from "../components/InfoWindowTest"; |
|---|
| | | |
|---|
| | | import InfoPanel from "../components/indexPanel/InfoPanel" |
|---|
| | | import HomeList from "./HomeList" |
|---|
| | | import { |
|---|
| | | searchBattState, |
|---|
| | | searchPowerOff, |
|---|
| | | searchBattGood, |
|---|
| | | searchProvince, |
|---|
| | | searchCity, |
|---|
| | | searchCounty, |
|---|
| | | searchStation, |
|---|
| | | searchMapStation, |
|---|
| | | searchBattInfo, |
|---|
| | | searchBattState, |
|---|
| | | 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"; |
|---|
| | | |
|---|
| | | searchMap, |
|---|
| | | searchRoomLocation, |
|---|
| | | searchHomeNum, |
|---|
| | | } from '../assets/js/api' |
|---|
| | | import { |
|---|
| | | Timeout |
|---|
| | | } from '../assets/js/tools' |
|---|
| | | let map; |
|---|
| | | let addHomeData = []; |
|---|
| | | let mkList = []; |
|---|
| | | let chart1, chart2, chart3, chart4; |
|---|
| | | let infoWindowTest = Vue.extend(InfoWindowTest); |
|---|
| | | let showInfoWindowTest = new infoWindowTest().$mount(); |
|---|
| | | // 首页panel组件 |
|---|
| | | let infoPanelExtend = Vue.extend(InfoPanel); |
|---|
| | | let infoPanel = new infoPanelExtend().$mount(); |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | ContentBox, |
|---|
| | | /* MyElTree, */ |
|---|
| | | PieChart |
|---|
| | | PieChart, |
|---|
| | | HomeList |
|---|
| | | }, |
|---|
| | | 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; |
|---|
| | | timer: new Timeout('index'), |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | 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(); |
|---|
| | | }, |
|---|
| | | map = new BMap.Map("allmap"); // 创建Map实例 |
|---|
| | | this.point = new BMap.Point(this.lng, this.lat); // 创建点坐标this.lng, this.lat 113.971,30.605 |
|---|
| | | map.centerAndZoom(this.point, 1); // 初始化地图,设置中心点坐标和地图级别 |
|---|
| | | map.enableScrollWheelZoom(); |
|---|
| | | 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; |
|---|
| | | }); |
|---|
| | | // 查询设置的中心点 |
|---|
| | | this.searchCoordinateMove(); |
|---|
| | | // 查询地图上的机房 |
|---|
| | | this.searchMap(); |
|---|
| | | }, |
|---|
| | | initChart() { |
|---|
| | | // 饼状图1 |
|---|
| | |
|---|
| | | { |
|---|
| | | name: "电池信息", |
|---|
| | | data: [ |
|---|
| | | { value: this.powerOff.sum, name: "机房停电" }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | value: this.powerOff.newsum - this.powerOff.sum, |
|---|
| | | name: "机房未停电" |
|---|
| | | } |
|---|
| | | {value: 0, name: '机房停电'}, |
|---|
| | | {value: 0, name: '机房未停电'}, |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | |
|---|
| | | { |
|---|
| | | 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: "单体容量告警" } |
|---|
| | | {value: 0, name: '单体容量健康'}, |
|---|
| | | {value: 0, name: '单体容量告警'}, |
|---|
| | | {value: 0, name: '单体容量更换'}, |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | |
|---|
| | | { |
|---|
| | | 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: "均充" } |
|---|
| | | {value: 0, name: '放电'}, |
|---|
| | | {value: 0, name: '充电'}, |
|---|
| | | {value: 0, name: '浮充'}, |
|---|
| | | {value: 0, name: '均充'} |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | |
|---|
| | | { |
|---|
| | | 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: "容量告警" |
|---|
| | | } |
|---|
| | | { value: 0, name: "容量告警告警" }, |
|---|
| | | { value: 0, name: "组端电压" }, |
|---|
| | | { value: 0, name: "充电电流" }, |
|---|
| | | { value: 0, name: "放电电流" }, |
|---|
| | | { value: 0, name: "单体电压" }, |
|---|
| | | {value: 0, name: "容量更换告警"} |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | |
|---|
| | | 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); |
|---|
| | | checkNetwork() { |
|---|
| | | this.$apis.login.checkNetwork().then(res=>{ |
|---|
| | | let head = document.getElementsByTagName('head')[0]; |
|---|
| | | if(res.data.result == 1) { |
|---|
| | | let infoWindow = this.createScript('https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js'); |
|---|
| | | head.appendChild(infoWindow); |
|---|
| | | } |
|---|
| | | 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(); |
|---|
| | | // 初始化地图 |
|---|
| | | this.initMap(); |
|---|
| | | }).catch(error=>{ |
|---|
| | | console.log(error); |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /* 添加机房接口 */ |
|---|
| | | 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" |
|---|
| | | createScript(src) { |
|---|
| | | let script = document.createElement('script'); |
|---|
| | | script.setAttribute('type', 'text/javascript'); |
|---|
| | | script.setAttribute('src', src); |
|---|
| | | return script; |
|---|
| | | }, |
|---|
| | | searchPieData() { |
|---|
| | | this.timer.start(()=>{ |
|---|
| | | this.$axios.all([ |
|---|
| | | this.searchPowerOff(), |
|---|
| | | this.searchBattGood(), |
|---|
| | | this.searchBattState(), |
|---|
| | | this.searchAlarm() |
|---|
| | | ]).then(res=>{ |
|---|
| | | this.timer.open(); |
|---|
| | | }).catch(error=>{ |
|---|
| | | this.timer.open(); |
|---|
| | | }) |
|---|
| | | .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: "" |
|---|
| | | }, 4000); |
|---|
| | | }, |
|---|
| | | // 机房停电查询 |
|---|
| | | searchPowerOff() { |
|---|
| | | searchPowerOff().then(res=>{ |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | if((rs.sum>=0) && (rs.newsum>=0) && (rs.newsum>=rs.sum)) { |
|---|
| | | chart1.series[0].data[0].value = rs.sum; // 机房停电 |
|---|
| | | chart1.series[0].data[1].value = rs.newsum - rs.sum; // 机房未停电 |
|---|
| | | }else { |
|---|
| | | chart1.series[0].data[0].value = 0; // 机房停电 |
|---|
| | | chart1.series[0].data[1].value = rs.sum; // 机房未停电 |
|---|
| | | } |
|---|
| | | this.$refs.chart1.setOption(chart1); |
|---|
| | | }).catch(error=>{ |
|---|
| | | console.log(error); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // 电池健康率查询 |
|---|
| | | searchBattGood() { |
|---|
| | | searchBattGood().then(res=>{ |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | if(rs.code == 1) { |
|---|
| | | chart2.series[0].data[0].value = rs.sum - rs.data[0] - rs.data[1]; // 单体容量健康 |
|---|
| | | chart2.series[0].data[1].value = rs.data[0]; // 单体容量告警 |
|---|
| | | chart2.series[0].data[2].value = rs.data[1]; // 单体容量更换 |
|---|
| | | }else { |
|---|
| | | chart2.series[0].data[0].value = 0; // 单体容量健康 |
|---|
| | | chart2.series[0].data[1].value = 0; // 单体容量告警 |
|---|
| | | chart2.series[0].data[2].value = 0; // 单体容量更换 |
|---|
| | | } |
|---|
| | | this.$refs.chart2.setOption(chart2); |
|---|
| | | }).catch(error=>{ |
|---|
| | | console.log(error); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // 电池状态查询 |
|---|
| | | searchBattState() { |
|---|
| | | searchBattState().then(res=>{ |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | if(rs.code == 1) { |
|---|
| | | let data = rs.data; |
|---|
| | | chart3.series[0].data[0].value = data[3].num; // 放电 |
|---|
| | | chart3.series[0].data[1].value = data[2].num; // 充电 |
|---|
| | | chart3.series[0].data[2].value = data[1].num; // 浮充 |
|---|
| | | chart3.series[0].data[3].value = data[4].num; // 均充 |
|---|
| | | }else { |
|---|
| | | chart3.series[0].data[0].value = 0; // 放电 |
|---|
| | | chart3.series[0].data[1].value = 0; // 充电 |
|---|
| | | chart3.series[0].data[2].value = 0; // 浮充 |
|---|
| | | chart3.series[0].data[3].value = 0; // 均充 |
|---|
| | | } |
|---|
| | | this.$refs.chart3.setOption(chart3); |
|---|
| | | }).catch(error=>{ |
|---|
| | | console.log(error); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | searchAlarm() { |
|---|
| | | searchAlarm().then(res=>{ |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | if(rs.code == 1) { |
|---|
| | | let data = rs.data; |
|---|
| | | chart4.series[0].data[0].value = data.BattGroupId; // 容量告警告警 |
|---|
| | | chart4.series[0].data[1].value = data.MonNum; // 组端电压 |
|---|
| | | chart4.series[0].data[2].value = data.alm_id; // 充电电流 |
|---|
| | | chart4.series[0].data[3].value = data.alm_signal_id; // 放电电流 |
|---|
| | | chart4.series[0].data[4].value = data.alm_level; // 单体电压 |
|---|
| | | chart4.series[0].data[5].value = data.alm_value + data.BattGroupId; // 容量更换告警 |
|---|
| | | } |
|---|
| | | this.$refs.chart4.setOption(chart4); |
|---|
| | | }).catch(error=>{ |
|---|
| | | console.log(error); |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // 查询设置的地图的中心点，并初始化地图位置 |
|---|
| | | searchCoordinateMove() { |
|---|
| | | searchCoordinateMove().then(res=>{ |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | if(rs.code == 1) { |
|---|
| | | let data = rs.data[0]; |
|---|
| | | var _point = new BMap.Point(data.map_longitude,data.map_latitude); |
|---|
| | | map.centerAndZoom(_point, data.map_level); // 用城市名设置地图中心点 |
|---|
| | | } |
|---|
| | | }).catch(error=>{ |
|---|
| | | console.log(error); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | searchMap(){ |
|---|
| | | searchMap().then(res=>{ |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | let list = this.mergeMapInfos(rs); |
|---|
| | | if(list!=undefined && list.length>0){ |
|---|
| | | let mapDotList = list.map(data=>{ |
|---|
| | | return { |
|---|
| | | lng: data.longitude, |
|---|
| | | lat: data.latitude, |
|---|
| | | title: data.StationName, |
|---|
| | | data: data |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | this.createMapDot(mapDotList); |
|---|
| | | addHomeData = mapDotList; |
|---|
| | | } |
|---|
| | | }).catch(error=>{ |
|---|
| | | console.log(error); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | 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; |
|---|
| | | }, |
|---|
| | | createMapDot(list) { |
|---|
| | | let self = this; |
|---|
| | | mkList = []; |
|---|
| | | list.forEach(item=>{ |
|---|
| | | let pt = new BMap.Point(item.lng, item.lat); |
|---|
| | | let mk = new BMap.Marker(pt); // 定义marker点 |
|---|
| | | // 向mk点添加label |
|---|
| | | var home_name = new BMap.Label(item.title, {offset:new BMap.Size(20,-10)}); |
|---|
| | | home_name.setStyle({display: 'none', padding: '4px 2px'}); |
|---|
| | | mk.setLabel(home_name); |
|---|
| | | mk.addEventListener('mouseover', function(e) { |
|---|
| | | this.getLabel().setStyle({display: 'block'}); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.$message({ |
|---|
| | | type: "success", |
|---|
| | | message: "设置站点位置成功!" |
|---|
| | | mk.addEventListener('mouseout', function(e) { |
|---|
| | | this.getLabel().setStyle({display: 'none'}); |
|---|
| | | }); |
|---|
| | | that.initMap(); |
|---|
| | | mk.addEventListener('click', function(e) { |
|---|
| | | var target = e.target; |
|---|
| | | let homeInfo = self.getHomeByPoint(target.point); |
|---|
| | | if(homeInfo) { |
|---|
| | | self.searchHomeNum(homeInfo.data.StationId, homeInfo.data.FBSDeviceId, homeInfo.data); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | mkList.push(mk); |
|---|
| | | // 向地图添加覆盖物 |
|---|
| | | map.addOverlay(mk); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | leafClick(data) { |
|---|
| | | // 构造查询条件 |
|---|
| | | let searchParams = { |
|---|
| | | StationName1: data.data.StationName1, |
|---|
| | | StationName2: data.data.StationName2, |
|---|
| | | StationName5: data.data.StationName5, |
|---|
| | | StationName3: data.data.StationName3 |
|---|
| | | }; |
|---|
| | | // 查询机房的定位信息 |
|---|
| | | this.searchRoomLocation(searchParams); |
|---|
| | | }, |
|---|
| | | // 根据查询条件查询机房的定位信息 |
|---|
| | | searchRoomLocation(data) { |
|---|
| | | searchRoomLocation(data).then(res=>{ |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | if(rs.code == 1) { |
|---|
| | | console.log(rs.data[0]); |
|---|
| | | let data = rs.data[0]; |
|---|
| | | // 构造点 |
|---|
| | | let point = { |
|---|
| | | lng: data.longitude, |
|---|
| | | lat: data.latitude |
|---|
| | | }; |
|---|
| | | let homeInfo = this.getHomeByPoint(point); |
|---|
| | | if(homeInfo) { |
|---|
| | | this.searchHomeNum(homeInfo.data.StationId, homeInfo.data.FBSDeviceId, homeInfo.data); |
|---|
| | | } |
|---|
| | | }else { |
|---|
| | | this.$layer.msg('当期机房未定位') |
|---|
| | | } |
|---|
| | | }).catch(error=>{ |
|---|
| | | console.log(error); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // 查询告警落后的信息 |
|---|
| | | searchHomeNum(sId, dev_id, homeData) { |
|---|
| | | searchHomeNum({StationId: sId,FBSDeviceId: dev_id}).then(res=>{ |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | homeData.nums = rs; |
|---|
| | | this.showMapPanel(homeData); |
|---|
| | | }).catch(error=>{ |
|---|
| | | console.log(error); |
|---|
| | | }) |
|---|
| | | .catch(() => { |
|---|
| | | this.$message({ |
|---|
| | | type: "info", |
|---|
| | | message: "已取消设置站点位置!" |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | getMkByPoint(point) { |
|---|
| | | let result = 0; |
|---|
| | | for(let i=0; i<mkList.length; i++) { |
|---|
| | | let mk = mkList[i]; |
|---|
| | | if(mk.point.lng == point.lng && mk.point.lat == point.lat) { |
|---|
| | | result = mk; |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return result; |
|---|
| | | }, |
|---|
| | | getHomeByPoint(point) { |
|---|
| | | let result = 0; |
|---|
| | | for(let i=0; i<addHomeData.length; i++) { |
|---|
| | | let homeData = addHomeData[i]; |
|---|
| | | if(homeData.lng == point.lng && homeData.lat == point.lat) { |
|---|
| | | result = homeData; |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return result; |
|---|
| | | }, |
|---|
| | | showMapPanel(homeData) { |
|---|
| | | let BMapLib = window.BMapLib; |
|---|
| | | let infoWindow = null; |
|---|
| | | let point = new BMap.Point(homeData.longitude, homeData.latitude); |
|---|
| | | /* 设置站点窗口 */ |
|---|
| | | var opts = { |
|---|
| | | title: homeData.StationName, // 信息窗口标题 |
|---|
| | | width: 'auto', //宽度 |
|---|
| | | height: 'atuo', //高度 |
|---|
| | | panel:"panel", //检索结果面板 |
|---|
| | | enableAutoPan : true, //自动平移 |
|---|
| | | enableSendToPhone:false, |
|---|
| | | searchTypes:[] |
|---|
| | | }; |
|---|
| | | console.log(window.BMapLib); |
|---|
| | | infoPanel.info = homeData; |
|---|
| | | infoWindow = new BMapLib.SearchInfoWindow(map, infoPanel.$el, opts); |
|---|
| | | infoWindow.open(point); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.getLocationByIp(); // 通过IP获取当前经纬度 查询已添加到地图的机房 |
|---|
| | | this.getBatteryData(); // 初始化饼状图 |
|---|
| | | this.meData(); //添加机房接口 |
|---|
| | | this.getCityrom(); //根据机房的id查询机房的经纬度 |
|---|
| | | this.checkNetwork(); // 检测网络 |
|---|
| | | this.initChart(); |
|---|
| | | this.searchPieData(); |
|---|
| | | }, |
|---|
| | | destroyed() { |
|---|
| | | this.timer.stop(); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </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; |
|---|
| | | } |
|---|
| | |
|---|
| | | flex-direction: column; |
|---|
| | | box-sizing: border-box; |
|---|
| | | height: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | .pie-item { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | /*搜索框 */ |
|---|
| | | .el-select .el-input { |
|---|
| | | width: 130px; |
|---|
| | | } |
|---|
| | | .input-with-select .el-input-group__prepend { |
|---|
| | | background-color: #fff; |
|---|
| | | } |
|---|
| | | </style> |
|---|
