<template>
|
<flex-layout direction="row" class="page-index">
|
<home-list slot="header" @leaf-click="leafClick"></home-list>
|
<div class="map-container" :class="{ 'card-station': mapStyle == '卡片站点' }">
|
<!-- <div class="scroll-warn-wrapper" v-show="mapStyle == '地图轮廓图'">-->
|
<!-- <flex-box title="实时告警" size="mini">-->
|
<!-- <data-scroll :list="newItems"></data-scroll>-->
|
<!-- </flex-box>-->
|
<!-- </div>-->
|
<city-chart ref="cityChart" id="cityChart" :name="mapName" v-if="mapStyle == '地图轮廓图'"></city-chart>
|
<div class="map-content" id="allmap" v-else-if="mapStyle == '百度地图'"></div>
|
<the-fault-sites v-else-if="mapStyle == '卡片站点'"></the-fault-sites>
|
<div class="map-tools-wrapper">
|
<el-radio-group v-model="mapStyle" size="mini" @change="mapStyleChange">
|
<el-radio-button label="地图轮廓图" :disabled="isDisabled"></el-radio-button>
|
<el-radio-button label="百度地图"></el-radio-button>
|
<!-- <el-radio-button label="卡片站点"></el-radio-button>-->
|
</el-radio-group>
|
</div>
|
<div class="map-icon-details-wrapper">
|
<div class="map-icon-details-title">地图图标说明</div>
|
<div class="map-icon-details-content">
|
<div class="map-icon-list">
|
<div class="map-icon-item">
|
<div class="item-wrapper icon-wrapper">
|
<img src="../assets/images/home-discharge.png" />
|
</div>
|
<div class="item-wrapper text-wrapper">电池组落后机房</div>
|
</div>
|
<div class="map-icon-item">
|
<div class="item-wrapper icon-wrapper">
|
<img src="../assets/images/home-warn.png" />
|
</div>
|
<div class="item-wrapper text-wrapper">电池组告警机房</div>
|
</div>
|
<!-- <div class="map-icon-item">-->
|
<!-- <div class="item-wrapper icon-wrapper">-->
|
<!-- <img src="../assets/images/home-charge.png" />-->
|
<!-- </div>-->
|
<!-- <div class="item-wrapper text-wrapper">电池组放电延时机房</div>-->
|
<!-- </div>-->
|
<div class="map-icon-item">
|
<div class="item-wrapper icon-wrapper">
|
<img src="../assets/images/home-normal.png" />
|
</div>
|
<div class="item-wrapper text-wrapper">正常机房</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="infoPanel" v-show="isShowInfoPanel" :style="{ left: mapInfoX + 'px', top: mapInfoY + 'px' }">
|
<h4 class="infoPanel-Title">
|
{{ mapInfoTitle }}
|
<div class="closeBtn" @click.self="closeInfoPanel"></div>
|
</h4>
|
<div class="infoPanel-center">
|
<info-panel ref="infoPanel"></info-panel>
|
</div>
|
</div>
|
</div>
|
<content-box title="站点列表" slot="footer" style="width:380px" no-header v-if="false">
|
<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>
|
<hdw-dialog :visible.sync="hdwDialog">
|
<pages-three-home v-if="hdwDialog" :areas="areas"></pages-three-home>
|
</hdw-dialog>
|
</flex-layout>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import BMap from "BMap";
|
import inMap from "inmap";
|
import ContentBox from "../components/ContentBox";
|
import PieChart from "../components/chart/PieChart";
|
import InfoWindowTest from "../components/InfoWindowTest";
|
import InfoPanel from "../components/indexPanel/InfoPanel";
|
import AddPanel from "@/components/indexPanel/AddPanel";
|
import HomeList from "./HomeList";
|
import HdwDialog from "@/components/HdwDialog";
|
import PagesThreeHome from "@/pages/dataTest/threeHome";
|
import TheFaultSites from "@/pages/dataMager/theFaultSites";
|
import {
|
searchCoordinateMove,
|
searchMap,
|
searchRoomLocation,
|
searchHomeNum,
|
addMapHomeList,
|
setMapCenterPoint,
|
delMapHome,
|
searchMapHomeState,
|
getAllMapOutlineAction,
|
searchAddressById, getAllRealAlarm,
|
} from "../assets/js/api";
|
import { isHasPermit, 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();
|
let addPanelExtend = Vue.extend(AddPanel);
|
let addPanel = new addPanelExtend().$mount();
|
|
let inmap;
|
import HomeNormal from "@/assets/images/home.png";
|
let mapHomeImage = new Image();
|
mapHomeImage.src = HomeNormal;
|
// 正常的图标
|
import HomeNormalImage from "@/assets/images/home-normal.png";
|
let homeNormalImage = new Image();
|
homeNormalImage.src = HomeNormalImage;
|
// 充电的图标
|
import HomeChargeImage from "@/assets/images/home-charge.png";
|
let homeChargeImage = new Image();
|
homeChargeImage.src = HomeChargeImage;
|
// 告警图标
|
import HomeWarnImage from "@/assets/images/home-warn.png";
|
let homeWarnImage = new Image();
|
homeWarnImage.src = HomeWarnImage;
|
// 放电图标
|
import HomeDischargeImage from "@/assets/images/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: "",
|
};
|
import mapSkinJson from "@/assets/map/skin/custom_map_config.json";
|
// 引入 ECharts 主模块
|
import ECharts from "echarts";
|
//引入城市chart图组件
|
import cityChart from "@/components/chart/cityChart";
|
import FlexBox from "@/components/FlexBox";
|
import MarqueeLeft from "@/components/marqueeLeft";
|
import DataScroll from "@/components/dataScroll";
|
let chartData = []; //chart数据
|
let abnormalArr = []; //异常数组
|
let tempData = []; //站点数组
|
let chart, chartLng, chartLat;
|
export default {
|
components: {
|
DataScroll,
|
MarqueeLeft,
|
FlexBox,
|
ContentBox,
|
PieChart,
|
HomeList,
|
cityChart,
|
InfoPanel,
|
HdwDialog,
|
PagesThreeHome,
|
TheFaultSites,
|
},
|
data() {
|
let permits = this.$store.state.user.permits;
|
let isCanEdit = isHasPermit("batt_map_edit_permit", permits);
|
let isCanDel = isHasPermit("batt_map_delete_permit", permits);
|
let mapStyle = "地图轮廓图";
|
if (this.$store.state.user.autoLogin) {
|
mapStyle = "百度地图";
|
}
|
return {
|
isCanEdit: isCanEdit,
|
isCanDel: isCanDel,
|
hdwDialog: false,
|
timer: new Timeout("index"),
|
mapName: "",
|
mapNameCopy: "",
|
mapInfoX: null,
|
mapInfoY: null,
|
mapInfoTitle: "",
|
isShowInfoPanel: false,
|
areas: [],
|
mapStyle: mapStyle,
|
newItems: [],
|
};
|
},
|
watch: {
|
mapStyle(n) {
|
if (n != "地图轮廓图") {
|
this.isShowInfoPanel = false;
|
}
|
},
|
},
|
methods: {
|
initPage() {
|
// 初始化地图
|
if (this.mapStyle == "地图轮廓图") {
|
//this.getAllMapOutlineAction();
|
chart = ECharts.init(document.getElementById("cityChart"));
|
this.initCityChart();
|
let timers = null;
|
chart.on("georoam", (params) => {
|
this.timer.stop();
|
if (!this.isShowInfoPanel) {
|
return;
|
}
|
this.isShowInfoPanel = false;
|
clearTimeout(timers);
|
timers = setTimeout(() => {
|
this.isShowInfoPanel = true;
|
let poit = this.convertMain(chartLng, chartLat);
|
this.mapInfoX = poit[0] - 120;
|
this.mapInfoY = poit[1] - 190;
|
|
var option = chart.getOption(); //获得option对象
|
if (params.zoom != null && params.zoom != undefined) {
|
//捕捉到缩放时
|
option.series[0].zoom = option.geo[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
|
option.series[0].center = option.geo[0].center; //下层的geo的中心位置随着上层geo一起改变
|
} else {
|
//捕捉到拖曳时
|
option.series[0].center = option.geo[0].center; //下层的geo的中心位置着上层geo一起改变
|
}
|
chart.setOption(option); //设置option
|
|
this.startSearchMapHomeState();
|
}, 300);
|
});
|
chart.off("click"); //防止chart点击触发多次
|
chart.on("click", (params) => {
|
//点击跳转实时数据
|
if (params.seriesType == "scatter") {
|
chartLng = params.data.longitude;
|
chartLat = params.data.latitude;
|
this.showChartPanel(
|
params.data.StationId,
|
params.data.FBSDeviceId,
|
params.data
|
);
|
}
|
});
|
} else if (this.mapStyle == "百度地图") {
|
this.initMap();
|
}
|
},
|
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.startSearchMapHomeState();
|
|
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,
|
},
|
],
|
};
|
}
|
|
this.$refs.cityChart.setOption(option);
|
},
|
initMap() {
|
inmap = new inMap.Map({
|
id: "allmap",
|
center: ["119.2376", "40.0436"], // 秦皇岛市
|
zoom: {
|
value: 9,
|
show: true,
|
max: 22,
|
},
|
});
|
map = inmap.getMap();
|
|
// 地图拖动事件监听
|
map.addEventListener("moving", () => {
|
this.initOverlay();
|
});
|
|
map.addEventListener("moveend", () => {
|
this.searchMapHomeState();
|
});
|
|
// 查询设置的中心点
|
this.searchCoordinateMove();
|
// 查询地图上的机房
|
this.searchMap();
|
// 设置右键菜单
|
let menu = new BMap.ContextMenu();
|
let txtMenuItem = [
|
{
|
text: "设置中心点",
|
callback: (e) => {
|
let point = new BMap.Point(e.lng, e.lat);
|
this.$layer.confirm(
|
"确认修改地图默认中心坐标",
|
{
|
icon: 3,
|
title: "系统提示",
|
},
|
(index) => {
|
// 关闭确认框
|
this.$layer.close(index);
|
// 设置地图中心点
|
this.setMapCenterPoint(point);
|
}
|
);
|
},
|
},
|
];
|
// 可以编辑
|
if (this.isCanEdit) {
|
txtMenuItem.push({
|
text: "设置机房",
|
callback: (e) => {
|
let point = new BMap.Point(e.lng, e.lat);
|
// 添加机房
|
this.addHomeDot(map, point);
|
},
|
});
|
}
|
|
for (var i = 0; i < txtMenuItem.length; i++) {
|
menu.addItem(
|
new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100)
|
);
|
}
|
// 地图菜单
|
map.addContextMenu(menu);
|
},
|
initOverlay() {
|
console.log(normalOverlay);
|
normalOverlay.img.setData([]);
|
normalOverlay.animate.setData([]);
|
|
behindOverlay.img.setData([]);
|
behindOverlay.animate.setData([]);
|
|
warnOverlay.img.setData([]);
|
warnOverlay.animate.setData([]);
|
|
timeoutOverlay.img.setData([]);
|
timeoutOverlay.animate.setData([]);
|
},
|
// 查询设置的地图的中心点，并初始化地图位置
|
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, 9); // 用城市名设置地图中心点
|
}
|
})
|
.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,
|
name: data.StationName,
|
geometry: {
|
type: "Point",
|
coordinates: [data.longitude, data.latitude],
|
},
|
};
|
});
|
// 设置正常机房
|
this.createMapHome("", mapDotList);
|
// 设置落后机房
|
this.createMapHome("timeout", []);
|
// 设置告警机房
|
this.createMapHome("warn", []);
|
// 设置延时机房
|
this.createMapHome("behind", []);
|
addHomeData = mapDotList;
|
} else {
|
// 设置正常机房
|
this.createMapHome("", []);
|
// 设置落后机房
|
this.createMapHome("timeout", []);
|
// 设置告警机房
|
this.createMapHome("warn", []);
|
// 设置延时机房
|
this.createMapHome("behind", []);
|
}
|
this.startSearchMapHomeState();
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
},
|
startSearchMapHomeState() {
|
this.timer.start(() => {
|
if (this.mapName) {
|
this.$axios
|
.all([
|
this.searchChartHomeState(),
|
// this.getAllRealAlarm(),
|
])
|
.then(() => {
|
this.timer.open();
|
})
|
.catch(() => {
|
this.timer.open();
|
});
|
} else {
|
this.$axios
|
.all([this.searchMapHomeState()])
|
.then(() => {
|
this.timer.open();
|
})
|
.catch(() => {
|
this.timer.open();
|
});
|
}
|
}, 4000);
|
},
|
searchMapHomeState() {
|
searchMapHomeState()
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
let behind = [];
|
let warn = [];
|
let timeout = [];
|
let normal = [];
|
if (rs.code === 1) {
|
let data = rs.data;
|
data.forEach((item) => {
|
let infos = this.getHomeInfoByName(item.StationName);
|
if (infos.length !== 0) {
|
let info = infos[0];
|
switch (item.num) {
|
case 1: // 落后
|
behind.push(info);
|
break;
|
case 2: // 告警
|
warn.push(info);
|
break;
|
case 3:
|
timeout.push(info);
|
break;
|
default:
|
normal.push(info);
|
break;
|
}
|
}
|
});
|
}
|
// 更新正常地图图标
|
behindOverlay.animate.setData(behind);
|
behindOverlay.img.setData(behind);
|
// 更新正常地图图标
|
warnOverlay.animate.setData(warn);
|
warnOverlay.img.setData(warn);
|
// 更新正常地图图标
|
timeoutOverlay.animate.setData(timeout);
|
timeoutOverlay.img.setData(timeout);
|
// 更新正常地图图标
|
normalOverlay.animate.setData(normal);
|
normalOverlay.img.setData(normal);
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
},
|
getHomeInfoByName(name) {
|
return addHomeData.filter((item) => {
|
return item.name === name;
|
});
|
},
|
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;
|
},
|
createMapHome(type, data) {
|
let overlay = normalOverlay;
|
let color = "";
|
let img = homeNormalImage;
|
switch (type) {
|
case "behind":
|
overlay = behindOverlay;
|
color = "#FD696A";
|
img = homeDischargeImage;
|
break;
|
case "warn":
|
overlay = warnOverlay;
|
color = "#C5A26E";
|
img = homeWarnImage;
|
break;
|
case "timeout":
|
overlay = timeoutOverlay;
|
color = "#3274CA";
|
img = homeChargeImage;
|
break;
|
}
|
// 设置动画
|
let animationOverlay = new inMap.PointAnimationOverlay({
|
style: {
|
fps: 25, //动画帧数
|
color: color,
|
size: color ? 20 : 0,
|
speed: 0.5,
|
},
|
data: data,
|
});
|
// 设置动画层
|
overlay.animate = animationOverlay;
|
inmap.add(animationOverlay);
|
|
let imgOverlay = new inMap.ImgOverlay({
|
tooltip: {
|
show: true,
|
formatter: "{name}",
|
},
|
style: {
|
normal: {
|
icon: img,
|
width: 26,
|
height: 26,
|
offsets: {
|
top: "-50%",
|
left: "-50%",
|
},
|
},
|
},
|
data: data,
|
});
|
// 添加事件
|
imgOverlay.on("mouseClick", (info) => {
|
let homeInfo = this.getHomeByPoint(info[0]);
|
if (homeInfo) {
|
this.searchHomeNum(
|
homeInfo.data.StationId,
|
homeInfo.data.FBSDeviceId,
|
homeInfo.data
|
);
|
}
|
});
|
// 添加图片层
|
overlay.img = imgOverlay;
|
inmap.add(imgOverlay);
|
},
|
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",
|
});
|
});
|
|
mk.addEventListener("mouseout", function (e) {
|
this.getLabel().setStyle({
|
display: "none",
|
});
|
});
|
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);
|
// 设置覆盖物的右键菜单
|
let menu = new BMap.ContextMenu();
|
menu.addItem(
|
new BMap.MenuItem("删除", (e) => {
|
let point = new BMap.Point(e.lng, e.lat);
|
this.delMapHome(mk);
|
})
|
);
|
mk.addContextMenu(menu);
|
// 向地图添加覆盖物
|
map.addOverlay(mk);
|
});
|
},
|
leafClick(data) {
|
console.log(data);
|
// 构造查询条件
|
let searchParams = {
|
StationName1: data.data.StationName1,
|
StationName2: data.data.StationName2,
|
StationName5: data.data.StationName5,
|
StationName3: data.data.StationName3,
|
StationId: data.data.StationId,
|
};
|
|
// 查询机房的定位信息
|
this.searchRoomLocation(searchParams);
|
},
|
// 根据查询条件查询机房的定位信息
|
searchRoomLocation(searchParams) {
|
let loading = this.$layer.loading();
|
searchAddressById(searchParams)
|
.then((res) => {
|
this.$layer.close(loading);
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
let data = rs.data[0];
|
// 构造点
|
let point = {
|
lng: data.longitude,
|
lat: data.latitude,
|
};
|
let homeInfo = this.getHomeByPoint(point);
|
if (homeInfo) {
|
chartLng = data.longitude;
|
chartLat = data.latitude;
|
this.searchHomeNum(
|
homeInfo.data.StationId,
|
homeInfo.data.FBSDeviceId,
|
homeInfo.data
|
);
|
}
|
} else {
|
this.isShowInfoPanel = false;
|
this.$layer.msg("当前机房未定位");
|
}
|
})
|
.catch((error) => {
|
this.$layer.close(loading);
|
console.log(error);
|
});
|
},
|
// 查询告警落后的信息
|
searchHomeNum(sId, dev_id, homeData) {
|
// 检测是否存在3D机房
|
this.$apis.pageSetting.threeHomeSetting
|
.searchByDevId({
|
deviceId: dev_id,
|
})
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.data.length != 0) {
|
this.areas = rs.data;
|
//this.hdwDialog = true;
|
this.showThreeHomeDialog(this.areas);
|
} else {
|
searchHomeNum({
|
StationId: sId,
|
FBSDeviceId: dev_id,
|
})
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
homeData.nums = rs;
|
if (this.mapName) {
|
this.changeChartPanelStatus(homeData);
|
} else {
|
this.showMapPanel(homeData);
|
}
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
}
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
},
|
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: [],
|
};
|
infoPanel.info = homeData;
|
infoPanel.isCanDel = this.isCanDel;
|
this.$nextTick(() => {
|
infoWindow = new BMapLib.SearchInfoWindow(map, infoPanel.$el, opts);
|
infoWindow.open(point);
|
});
|
},
|
addHomeDot(map, point) {
|
// 向地图中添加覆盖物
|
let removeMarker = function (e, ee, marker) {
|
map.removeOverlay(marker);
|
};
|
let mk = new BMap.Marker(point);
|
mk.enableDragging(); // 设置覆盖物可以移动
|
// 设置覆盖物的右键菜单
|
let menu = new BMap.ContextMenu();
|
menu.addItem(new BMap.MenuItem("删除", removeMarker.bind(mk)));
|
mk.addContextMenu(menu);
|
// 向覆盖物添加点击事件，显示添加机房的面板
|
mk.addEventListener("click", (e) => {
|
let target = e.target;
|
let point = new BMap.Point(
|
target.getPosition().lng,
|
target.getPosition().lat
|
);
|
this.addMapHomeList(point);
|
});
|
// 将覆盖物添加到地图上
|
map.addOverlay(mk);
|
},
|
// 查询还未添加到地图上的机房
|
addMapHomeList(point) {
|
// 查询后台
|
addMapHomeList()
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
let data = [];
|
if (rs.code == 1) {
|
data = rs.data.map((item) => {
|
let home =
|
item.StationName1 +
|
"-" +
|
item.StationName2 +
|
"-" +
|
item.StationName5 +
|
"-" +
|
item.StationName3;
|
item.label = home;
|
item.value = home;
|
return item;
|
});
|
}
|
// 设置组件的值
|
addPanel.homeList = data;
|
addPanel.point = point;
|
// 显示添加机房的面板
|
this.showMapAddPanel(point);
|
})
|
.catch((error) => { });
|
},
|
showMapAddPanel(info) {
|
let BMapLib = window.BMapLib;
|
let infoWindow = null;
|
let point = new BMap.Point(info.lng, info.lat);
|
/* 设置站点窗口 */
|
var opts = {
|
title: "设置站点位置信息", // 信息窗口标题
|
width: "auto", //宽度
|
height: "atuo", //高度
|
panel: "panel", //检索结果面板
|
enableAutoPan: true, //自动平移
|
enableSendToPhone: false,
|
searchTypes: [],
|
};
|
infoWindow = new BMapLib.SearchInfoWindow(map, addPanel.$el, opts);
|
infoWindow.open(point);
|
},
|
delMapHome(mk) {
|
// 删除地图图标
|
let homeInfo = this.getHomeByPoint(mk.point);
|
if (homeInfo) {
|
// 添加确认框
|
this.$layer.confirm(
|
"确认从地图上删除" + homeInfo.title,
|
{
|
icon: 3,
|
title: "系统提示",
|
},
|
(index) => {
|
// 关闭确认框
|
this.$layer.close(index);
|
// 执行删除操作
|
delMapHome(homeInfo.data)
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
this.$layer.msg("删除成功");
|
map.removeOverlay(mk);
|
} else {
|
this.$layer.msg("删除失败");
|
}
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
}
|
);
|
} else {
|
this.$layer.msg("获取机房信息失败！");
|
}
|
},
|
setMapCenterPoint(point) {
|
// 设置地图的中心点坐标
|
let searchParams = {
|
map_longitude: point.lng,
|
map_latitude: point.lat,
|
map_level: 9,
|
};
|
let loading = this.$layer.loading();
|
setMapCenterPoint(searchParams)
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
this.$layer.msg("设置中心点成功");
|
} else {
|
this.$layer.msg("设置中心点失败");
|
}
|
// 关闭弹出框
|
this.$layer.close(loading);
|
})
|
.catch((error) => {
|
console.log(error);
|
// 关闭弹出框
|
this.$layer.close(loading);
|
});
|
},
|
convertMain(Lng, lat) {
|
//根据经纬度计算定位
|
let getModel = chart.getModel().getSeries()[1];
|
let seriesModel = chart.getModel().getSeriesByIndex(0);
|
let coordSys = seriesModel.coordinateSystem;
|
let point = coordSys.dataToPoint([Lng, lat]);
|
return point;
|
},
|
closeInfoPanel() {
|
//关闭信息层
|
this.isShowInfoPanel = false;
|
},
|
showChartPanel(sId, dev_id, homeData) {
|
// 检测是否存在3D机房
|
this.$apis.pageSetting.threeHomeSetting
|
.searchByDevId({
|
deviceId: dev_id,
|
})
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.data.length != 0) {
|
this.areas = rs.data;
|
//this.hdwDialog = true;
|
this.showThreeHomeDialog(this.areas);
|
} else {
|
searchHomeNum({
|
// 查询告警落后的信息
|
StationId: sId,
|
FBSDeviceId: dev_id,
|
})
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
homeData.nums = rs;
|
this.changeChartPanelStatus(homeData);
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
}
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
},
|
changeChartPanelStatus(homeData) {
|
//panel面板状态改变
|
this.isShowInfoPanel = true;
|
let poit = this.convertMain(homeData.longitude, homeData.latitude);
|
this.mapInfoX = poit[0] - 120;
|
this.mapInfoY = poit[1] - 190;
|
this.mapInfoTitle = homeData.StationName;
|
this.$nextTick(() => {
|
this.$refs.infoPanel.setInfo(homeData); //传值子组件
|
});
|
},
|
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;
|
}
|
});
|
}
|
if (!this.mapName) {
|
this.mapStyle = "百度地图";
|
}
|
this.mapNameCopy = this.mapName;
|
this.$nextTick(() => {
|
this.initPage();
|
});
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
showThreeHomeDialog(areas) {
|
window.parent.postMessage(
|
{
|
cmd: "showDialog",
|
params: {
|
dialog: "hdwDialog",
|
pageInfo: areas,
|
},
|
},
|
"*"
|
);
|
},
|
mapStyleChange(label) {
|
if (label == "百度地图" || label == "卡片站点") {
|
this.mapName = "";
|
} else {
|
this.mapName = this.mapNameCopy;
|
}
|
this.$nextTick(() => {
|
this.initPage();
|
});
|
},
|
getAllRealAlarm() {
|
getAllRealAlarm()
|
.then((res) => {
|
let resData = JSON.parse(res.data.result);
|
this.newItems = resData.data;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
},
|
computed: {
|
isDisabled() {
|
return !this.mapName && !this.mapNameCopy ? true : false;
|
},
|
},
|
mounted() {
|
// 初始化页面
|
this.getAllMapOutlineAction();
|
// 监听chartMap的面板
|
window.addEventListener("resize", () => {
|
let timers = null;
|
if (!this.isShowInfoPanel || !this.mapName) {
|
return;
|
}
|
this.isShowInfoPanel = false;
|
timers = setTimeout(() => {
|
this.isShowInfoPanel = true;
|
let poit = this.convertMain(chartLng, chartLat);
|
this.mapInfoX = poit[0] - 120;
|
this.mapInfoY = poit[1] - 190;
|
}, 300);
|
});
|
|
// 监听添加机房的事件
|
addPanel.$on("handleEvent", (res) => {
|
// 清空覆盖物
|
map.clearOverlays();
|
// 查询地图上的机房
|
this.searchMap();
|
});
|
infoPanel.$on("delHome", (res) => {
|
// 清空覆盖物
|
map.clearOverlays();
|
// 查询地图上的机房
|
this.searchMap();
|
});
|
},
|
destroyed() {
|
this.timer.stop();
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.page-index {
|
color: #ffffff;
|
}
|
|
.map-container {
|
margin-right: 4px;
|
margin-left: 4px;
|
box-sizing: border-box;
|
height: 100%;
|
border-radius: 8px;
|
padding: 10px;
|
position: relative;
|
}
|
.scroll-warn-wrapper {
|
position: absolute;
|
min-width: 360px;
|
height: 450px;
|
z-index: 22;
|
}
|
.map-content {
|
height: 100%;
|
}
|
|
.pie-list {
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.pie-item {
|
flex: 1;
|
}
|
|
.map-icon-details-wrapper {
|
position: absolute;
|
bottom: 16px;
|
right: 20px;
|
z-index: 99;
|
}
|
|
.map-icon-details-title {
|
padding: 6px 12px;
|
font-size: 14px;
|
font-weight: bold;
|
}
|
|
.map-icon-details-content {
|
padding: 10px 12px;
|
}
|
|
.map-icon-item {
|
padding: 4px 8px;
|
}
|
|
.map-icon-item .item-wrapper {
|
display: inline-block;
|
}
|
|
.item-wrapper.icon-wrapper img {
|
width: 30px;
|
height: auto;
|
vertical-align: middle;
|
margin-right: 8px;
|
}
|
|
.item-wrapper.text-wrapper {
|
font-size: 12px;
|
}
|
|
.infoPanel {
|
position: absolute;
|
background-color: #ffffff;
|
color: rgb(0, 0, 0);
|
border: 1px solid #999;
|
}
|
|
.infoPanel .infoPanel-Title {
|
border-bottom: 1px solid #ccc;
|
height: 31px;
|
line-height: 30px;
|
background-color: #f9f9f9;
|
overflow: hidden;
|
height: 30px;
|
padding: 0 5px;
|
font-size: 12px;
|
position: relative;
|
}
|
|
.infoPanel .infoPanel-Title .closeBtn {
|
background: url("../assets/images/iw_close1d3.gif") 0 0 no-repeat;
|
background-size: 100% 100%;
|
position: absolute;
|
top: 9px;
|
right: 12px;
|
width: 10px;
|
height: 10px;
|
user-select: none;
|
overflow: hidden;
|
cursor: pointer;
|
line-height: 9999px;
|
z-index: 10000;
|
}
|
|
.infoPanel .infoPanel-center {
|
padding: 3px 5px;
|
overflow-x: auto;
|
overflow-y: hidden;
|
}
|
|
.infoPanel::after {
|
content: "";
|
display: block;
|
z-index: 5;
|
position: absolute;
|
bottom: -31px;
|
width: 58px;
|
height: 31px;
|
left: 125px;
|
background: url("../assets/images/iw_tail.png") 0 0 no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.map-tools-wrapper {
|
position: absolute;
|
top: 16px;
|
right: 16px;
|
}
|
|
.card-station {
|
height: 100%;
|
padding-top: 52px;
|
box-sizing: border-box;
|
}
|
</style>
|
