684 lines
22 KiB
Vue
684 lines
22 KiB
Vue
<template>
|
||
<div ref="jcwmap" id="jcwditu" style="width: 100%;"></div>
|
||
</template>
|
||
<script>
|
||
import jquery from "jquery";
|
||
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
|
||
import { dicData } from "@/assets/commjs/dictypeData";
|
||
import { getAreaLineDetailData, mapjson } from "@/api/distribution";
|
||
export default {
|
||
props: {
|
||
item: {
|
||
type: Object,
|
||
default: null,
|
||
},
|
||
item2: {
|
||
type: Object,
|
||
default: null,
|
||
},
|
||
height:{
|
||
type:Number,
|
||
default: null,
|
||
},
|
||
height2:{
|
||
type:Number,
|
||
default: null,
|
||
}
|
||
},
|
||
watch: {
|
||
height2(a, b) {
|
||
if (a == 24) {
|
||
this.$refs.jcwmap.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||
} else {
|
||
return;
|
||
}
|
||
},
|
||
height(a, b) {
|
||
if (a == 6 || a==8 || a==9 || a==16) {
|
||
setTimeout(()=>{
|
||
let str = document.getElementById('areamontormap').style.height
|
||
let strsec = str.split('p')
|
||
let height = parseInt(strsec) - 50 +'px'
|
||
this.$refs.jcwmap.style.height = height
|
||
},200)
|
||
} else {
|
||
return;
|
||
}
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
tableData: [],
|
||
statisticalType: null,
|
||
classificationData: [],
|
||
time: this.timefamt(),
|
||
xdata: [],
|
||
ydata: [],
|
||
formData1:{
|
||
statisticalType:null,
|
||
id:'',
|
||
monitorFlag: 2,
|
||
powerFlag: 2,
|
||
reportFlag: 3,
|
||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||
},
|
||
isfanhui: false,
|
||
myChart: null,
|
||
mapData: [
|
||
// {
|
||
// srbName: "南京",
|
||
// coordY: 118.801847,
|
||
// coordX: 32.094268,
|
||
// color: "green",
|
||
// vlaue: 100,
|
||
// // srbNO:'4343',
|
||
// // deptName:'南京',
|
||
// // srbType:'电力',
|
||
// // trade:'储能',
|
||
// // riskLevel:'陈先生',
|
||
// // inchargeTel:'陈先生',
|
||
// // inCharge_Safety:'kkjs',
|
||
// // a_Company:'jdksfj'
|
||
// },
|
||
// {
|
||
// srbName: "江宁",
|
||
// coordY: 118.903859,
|
||
// coordX: 32.195278,
|
||
// color: "red",
|
||
// },
|
||
// {
|
||
// srbName: "合肥",
|
||
// coordY: 117.322553,
|
||
// coordX: 31.891106,
|
||
// color: "green",
|
||
// },
|
||
// {
|
||
// srbName: "北京",
|
||
// coordY: 116.401314,
|
||
// coordX: 39.916458,
|
||
// color: "red",
|
||
// },
|
||
// {
|
||
// srbName: "重庆",
|
||
// coordY: 106.551861,
|
||
// coordX: 29.579873,
|
||
// color: "red",
|
||
// },
|
||
// {
|
||
// srbName: "武汉",
|
||
// coordY: 114.273057,
|
||
// coordX: 30.626191,
|
||
// color: "green",
|
||
// },
|
||
// {
|
||
// srbName: "广州",
|
||
// coordY: 113.219812,
|
||
// coordX: 23.163485,
|
||
// color: "green",
|
||
// },
|
||
// {
|
||
// srbName: "昆明",
|
||
// coordY: 102.788544,
|
||
// coordX: 24.937427,
|
||
// color: "green",
|
||
// },
|
||
],
|
||
};
|
||
},
|
||
created() {
|
||
this.getVoltage();
|
||
this.getManufacturer();
|
||
this.getclassificationData();
|
||
this.getLoadType();
|
||
this.queryData();
|
||
},
|
||
mounted() {
|
||
setTimeout(()=>{
|
||
let str = document.getElementById('areamontormap').style.height
|
||
let strsec = str.split('p')
|
||
let height = parseInt(strsec) - 50 +'px'
|
||
this.$refs.jcwmap.style.height = height
|
||
},200)
|
||
},
|
||
methods: {
|
||
//字典获取数据电压等级
|
||
getVoltage() {
|
||
var code = "Dev_Voltage_Stand";
|
||
this.voltageleveloption = dicData(code, []);
|
||
this.formData1.scale = this.voltageleveloption;
|
||
},
|
||
//字典获取数据终端厂家
|
||
getManufacturer() {
|
||
var code = "Dev_Manufacturers";
|
||
this.terminaloption = dicData(code, []);
|
||
this.formData1.manufacturer = this.terminaloption;
|
||
},
|
||
//字典获取数据干扰源类型
|
||
getLoadType() {
|
||
var code = "Interference_Source";
|
||
this.interfereoption = dicData(code, []);
|
||
this.formData1.loadType = this.interfereoption;
|
||
},
|
||
//获取统计类型
|
||
getclassificationData() {
|
||
var code = "Statistical_Type";
|
||
this.classificationData = dicData(code, ["Report_Type"]);
|
||
this.formData1.statisticalType = this.classificationData[0];
|
||
},
|
||
//返回
|
||
fanhui() {
|
||
this.isfanhui = false;
|
||
this.queryData();
|
||
},
|
||
queryData() {
|
||
this.formData1.searchBeginTime=this.time[0]
|
||
this.formData1.searchEndTime=this.time[1]
|
||
getAreaLineDetailData(this.formData1).then((res) => {
|
||
this.mapData = res.data.substationDetailVOList;
|
||
|
||
let _this = this;
|
||
// _this.mapData
|
||
let mapList = [[], [], []];
|
||
_this.mapData.forEach((item) => {
|
||
if (item.color == "green") {
|
||
mapList[0].push(item);
|
||
} else if (item.color == "red") {
|
||
mapList[1].push(item);
|
||
}
|
||
// else if (item.color == "blue") {
|
||
// mapList[2].push(item);
|
||
// }
|
||
});
|
||
//各份的地图json文件
|
||
|
||
|
||
// for (var i = 0; i < allData.length; i++) {
|
||
// allData[i].value = Math.round(Math.random() * 100);
|
||
// }
|
||
// areaName
|
||
loadMap(
|
||
"./static/mapjson/" +
|
||
JSON.parse(window.sessionStorage.getItem("Info")).areaName +
|
||
".json",
|
||
""
|
||
);
|
||
|
||
function loadMap(mapCode, name) {
|
||
jquery.get(mapCode, function (data) {
|
||
if (!(data instanceof Object)) {
|
||
loadMap("./static/mapjson/全国.json", "");
|
||
return;
|
||
}
|
||
_this.isLoading = true;
|
||
if (data) {
|
||
if (_this.myChart != null) {
|
||
_this.myChart.dispose();
|
||
}
|
||
let echarts = require("echarts");
|
||
let domID1 = document.getElementById("jcwditu");
|
||
|
||
_this.myChart = echarts.init(domID1);
|
||
_this.isLoading = false;
|
||
echarts.registerMap(name, data);
|
||
var white = "#fff";
|
||
var option = {
|
||
title: {
|
||
text: "监测网分布区域图",
|
||
left: "center",
|
||
top: "5%",
|
||
textStyle:{
|
||
color:'#fff'
|
||
}
|
||
},
|
||
tooltip: {
|
||
// triggerOn: "click",
|
||
// formatter: function(e, t, n) {
|
||
// return "<br />" + e.name + "<br/>区域暂降评估等级 :" + e.value
|
||
// }
|
||
trigger: "item",
|
||
|
||
axisPointer: {
|
||
type: "shadow",
|
||
label: {
|
||
color: "#fff",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontStyle: "normal",
|
||
opacity: 0.35,
|
||
fontSize: 14,
|
||
},
|
||
backgroundColor: "rgba(0,0,0,0.35)",
|
||
formatter: function (params) {
|
||
//console.log(params)
|
||
var tips = "";
|
||
if (params.value == 0) {
|
||
tips =
|
||
"<font style='color:" + white + "'>暂无数据</font><br/>";
|
||
} else {
|
||
tips +=
|
||
"<font style='color:" +
|
||
white +
|
||
"'>" +
|
||
params.name +
|
||
"</font><br/>区域暂降评估" +
|
||
"<font style='color:" +
|
||
white +
|
||
"'>:" +
|
||
params.value +
|
||
"</font><br/>";
|
||
}
|
||
return tips;
|
||
},
|
||
},
|
||
color: ["green", "red", "blue"],
|
||
legend: {
|
||
orient: "vertical",
|
||
left: 26,
|
||
bottom: 40,
|
||
itemWidth: 16,
|
||
itemHeight: 16,
|
||
textStyle:{
|
||
color:'#fff'
|
||
},
|
||
|
||
data: [
|
||
{
|
||
name: "正常",
|
||
},
|
||
{
|
||
name: "中断",
|
||
},
|
||
{
|
||
name: "变电站",
|
||
},
|
||
],
|
||
},
|
||
// visualMap: {
|
||
// min: 0,
|
||
// max: 1000,
|
||
// left: 26,
|
||
// bottom: 40,
|
||
// showLabel: !0,
|
||
// //text: ["高", "低"],
|
||
// color: ["green", "red", "blue"],
|
||
// pieces: [
|
||
// {
|
||
// gte: 60,
|
||
// lte: 100,
|
||
// label: "正常",
|
||
// },
|
||
// {
|
||
// gt: 0,
|
||
// lt: 20,
|
||
// label: "中断",
|
||
// },
|
||
// {
|
||
// gt: 0,
|
||
// lt: 20,
|
||
// label: "变电站",
|
||
// },
|
||
// ],
|
||
// show: !0,
|
||
// },
|
||
geo: {
|
||
map: name,
|
||
roam: true,
|
||
// scaleLimit: {
|
||
// min: 1,
|
||
// max: 2
|
||
// },
|
||
zoom: 1.5,
|
||
top: 160,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
fontSize: "14",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(51, 69, 129, .8)", //地图背景色
|
||
borderColor: "#999999",
|
||
borderWidth: 1,
|
||
areaColor: {
|
||
type: "radial",
|
||
x: 0.5,
|
||
y: 0.5,
|
||
r: 0.8,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(147, 135, 148, .2)", // 100% 处的颜色
|
||
},
|
||
],
|
||
globalCoord: false, // 缺省为 false
|
||
},
|
||
shadowColor: "rgba(128, 217, 248, 1)",
|
||
// shadowColor: 'rgba(255, 255, 255, 1)',
|
||
shadowOffsetX: -2,
|
||
shadowOffsetY: 2,
|
||
shadowBlur: 10,
|
||
},
|
||
emphasis: {
|
||
areaColor: "#ccc",
|
||
shadowOffsetX: 0,
|
||
shadowOffsetY: 0,
|
||
borderWidth: 0,
|
||
},
|
||
},
|
||
},
|
||
series: [],
|
||
};
|
||
mapList.forEach((item, ind) => {
|
||
option.series.push({
|
||
type: "scatter",
|
||
mapName: name,
|
||
name: ind == 0 ? "正常" : ind == 1 ? "中断" : "变电站",
|
||
coordinateSystem: "geo",
|
||
geoIndex: 0,
|
||
animation: false, //坐标点是否显示动画
|
||
roam: true,
|
||
selectedMode: "false", //是否允许选中多个区域
|
||
symbol: "pin",
|
||
rippleEffect: {
|
||
brushType: "fill", // stroke|fill
|
||
},
|
||
symbolSize: function (val, params) {
|
||
//坐标点大小
|
||
return 30;
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: item.map(function (itemOpt) {
|
||
// console.log(itemOpt);
|
||
return {
|
||
name: itemOpt.srbName,
|
||
value: [
|
||
parseFloat(itemOpt.coordY), //经度
|
||
parseFloat(itemOpt.coordX), //维度
|
||
],
|
||
|
||
itemStyle: {
|
||
//地图区域的多边形
|
||
normal: {
|
||
color: itemOpt.color, //坐标点颜色
|
||
shadowBlur: 0, // 图形阴影的模糊大小
|
||
shadowOffsetX: 0, // 阴影水平方向上的偏移距离。
|
||
},
|
||
},
|
||
tooltip: {
|
||
//仅在 options中最外层的 tooltip.trigger 为 'item'时有效
|
||
position: "bottom", //提示框位置,仅在 options中最外层的 tooltip.trigger 为 'item'时有效
|
||
formatter: function (params, ticket, callback) {
|
||
var strHtml = "<div>";
|
||
strHtml += '<table class="table">';
|
||
strHtml +=
|
||
'<tr><td colspan="4" style="text-align:center">' +
|
||
itemOpt.srbName +
|
||
"</td></tr>";
|
||
// strHtml += '<tr><td>项目编号：</td><td>' + itemOpt.srbNO + '</td><td>项目名称：</td><td>' + itemOpt.srbName + '</td></tr>';
|
||
// strHtml += '<tr><td>所属部门：</td><td>' + itemOpt.deptName + '</td></tr>';
|
||
// strHtml += '<tr><td>项目类型：</td><td>' + itemOpt.srbType + '</td><td>合同金额(万元)：</td><td>' + itemOpt.contractMoney + '</td></tr>';
|
||
// strHtml += '<tr><td>业务行业：</td><td>' + itemOpt.trade + '</td><td>业务类型：</td><td>' + itemOpt.category + '</td></tr>';
|
||
// strHtml += '<tr><td>业务等级：</td><td>' + itemOpt.riskLevel + '</td><td>单位负责人：</td><td>' + itemOpt.incharge + '</td></tr>';
|
||
// strHtml += '<tr><td>单位负责人电话：</td><td>' + itemOpt.inchargeTel + '</td><td>项目负责人：</td><td>' + itemOpt.p_Incharge + '</td></tr>';
|
||
// strHtml += '<tr><td>安全负责人：</td><td>' + itemOpt.inCharge_Safety + '</td><td>安全负责人电话：</td><td>' + itemOpt.inChargeTel_Safety + '</td></tr>';
|
||
// strHtml += '<tr><td>甲方单位：</td><td>' + itemOpt.a_Company + '</td><td>施工地点：</td><td>'+itemOpt.srbAddress+'</td></tr>';
|
||
// strHtml += '</table>';
|
||
strHtml += "</div>";
|
||
return strHtml;
|
||
},
|
||
},
|
||
};
|
||
}),
|
||
// data: allData,
|
||
});
|
||
});
|
||
|
||
_this.myChart.setOption(option)
|
||
window.echartsArr.push(_this.myChart);
|
||
setTimeout(() => {
|
||
_this.myChart.resize();
|
||
}, 200);
|
||
var timeFn = null;
|
||
//单击切换到级地图，当mapCode有值,说明可以切换到下级地图
|
||
_this.myChart.on("click", function (params) {
|
||
clearTimeout(timeFn);
|
||
//由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
|
||
timeFn = setTimeout(function () {
|
||
var name = params.name; //地区name
|
||
var mapCode = './static/mapjson/'+name+'.json'; //地区的json数据
|
||
if (!mapCode) {
|
||
// alert("无此区域地图显示");
|
||
return;
|
||
}
|
||
if (name != "全国") {
|
||
_this.isfanhui = true;
|
||
}
|
||
loadMap(mapCode, name);
|
||
}, 250);
|
||
});
|
||
// 绑定双击事件，返回全国地图
|
||
_this.myChart.on("dblclick", function (params) {
|
||
//当双击事件发生时，清除单击事件，仅响应双击事件
|
||
clearTimeout(timeFn);
|
||
_this.isfanhui = false;
|
||
|
||
//返回全国地图
|
||
loadMap("./static/mapjson/全国.json", "");
|
||
});
|
||
} else {
|
||
// alert("无法加载该地图");
|
||
}
|
||
});
|
||
}
|
||
|
||
});
|
||
},
|
||
timefamt() {
|
||
var date = new Date();
|
||
var year = date.getFullYear();
|
||
var month = date.getMonth() + 1;
|
||
var day = date.getDate();
|
||
month = month > 9 ? month : "0" + month;
|
||
day = day < 10 ? "0" + day : day;
|
||
var arr = [];
|
||
var time1 = year + "-" + month + "-01";
|
||
arr.push(time1);
|
||
var time2 = year + "-" + month + "-" + day ;
|
||
arr.push(time2);
|
||
return arr;
|
||
},
|
||
// jcwditu() {
|
||
// const echarts = require("echarts");
|
||
// var myChartes = echarts.init(document.getElementById("jcwditu"));
|
||
// let mapname = require("@/assets/js/zhonguo.json");
|
||
// myChartes.clear();
|
||
// echarts.registerMap("中国", mapname);
|
||
// var option = {
|
||
// title: {
|
||
// text: "监测网分布区域图",
|
||
// left: "center",
|
||
// top: "5%",
|
||
// textStyle: {
|
||
// color: "#fff",
|
||
// },
|
||
// },
|
||
// visualMap: {
|
||
// min: 0,
|
||
// max: 1000,
|
||
// left: 26,
|
||
// bottom: 40,
|
||
// showLabel: !0,
|
||
// textStyle: {
|
||
// color: "#fff",
|
||
// },
|
||
// //text: ["高", "低"],
|
||
// pieces: [
|
||
// {
|
||
// gte: 60,
|
||
// lte: 100,
|
||
// label: "正常",
|
||
// color: "green",
|
||
// },
|
||
// {
|
||
// gt: 0,
|
||
// lt: 20,
|
||
// label: "中断",
|
||
// color: "red",
|
||
// },
|
||
// {
|
||
// gt: 0,
|
||
// lt: 20,
|
||
// label: "变电站",
|
||
// color: "blue",
|
||
// },
|
||
// ],
|
||
// show: !0,
|
||
// },
|
||
// geo: {
|
||
// type: "map",
|
||
// map: "中国",
|
||
// roam: true,
|
||
// top: "25%",
|
||
// zoom: 1.8,
|
||
// label: {
|
||
// normal: {
|
||
// show: true,
|
||
// fontSize: "14",
|
||
// color: "#fff",
|
||
// },
|
||
// },
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: "rgba(51, 69, 129, .8)", //地图背景色
|
||
// borderColor: "#999999",
|
||
// borderWidth: 1,
|
||
// areaColor: {
|
||
// type: "radial",
|
||
// x: 0.5,
|
||
// y: 0.5,
|
||
// r: 0.8,
|
||
// colorStops: [
|
||
// {
|
||
// offset: 0,
|
||
// color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: "rgba(147, 135, 148, .2)", // 100% 处的颜色
|
||
// },
|
||
// ],
|
||
// globalCoord: false, // 缺省为 false
|
||
// },
|
||
// shadowColor: "rgba(128, 217, 248, 1)",
|
||
// // shadowColor: 'rgba(255, 255, 255, 1)',
|
||
// shadowOffsetX: -2,
|
||
// shadowOffsetY: 2,
|
||
// shadowBlur: 10,
|
||
// },
|
||
// emphasis: {
|
||
// areaColor: "#ccc",
|
||
// shadowOffsetX: 0,
|
||
// shadowOffsetY: 0,
|
||
// borderWidth: 0,
|
||
// },
|
||
// },
|
||
// },
|
||
// series: [
|
||
// {
|
||
// type: "scatter",
|
||
// mapName: name,
|
||
// coordinateSystem: "geo",
|
||
// geoIndex: 0,
|
||
// animation: false, //坐标点是否显示动画
|
||
// roam: true,
|
||
// selectedMode: "false", //是否允许选中多个区域
|
||
// symbol: "pin",
|
||
// rippleEffect: {
|
||
// brushType: "fill", // stroke|fill
|
||
// },
|
||
// symbolSize: function (val, params) {
|
||
// return 30;
|
||
// },
|
||
// label: {
|
||
// normal: {
|
||
// show: false,
|
||
// },
|
||
// emphasis: {
|
||
// show: false,
|
||
// },
|
||
// },
|
||
// data: this.mapData.map(function (itemOpt) {
|
||
// return {
|
||
// name: itemOpt.srbName,
|
||
// value: [
|
||
// parseFloat(itemOpt.coordY), //经度
|
||
// parseFloat(itemOpt.coordX) //维度
|
||
// ],
|
||
|
||
// itemStyle: {
|
||
// //地图区域的多边形
|
||
// normal: {
|
||
// color: itemOpt.color, //坐标点颜色
|
||
// shadowBlur: 0, // 图形阴影的模糊大小
|
||
// shadowOffsetX: 0, // 阴影水平方向上的偏移距离。
|
||
// },
|
||
// },
|
||
// tooltip: {
|
||
// position: "bottom", //提示框位置,仅在 options中最外层的 tooltip.trigger 为 'item'时有效
|
||
// formatter: function (params, ticket, callback) {
|
||
// var strHtml = "<div>";
|
||
// strHtml += '<table class="table">';
|
||
// strHtml +=
|
||
// '<tr><td colspan="4" style="text-align:center">' +
|
||
// itemOpt.srbName +
|
||
// "</td></tr>";
|
||
// strHtml += "</div>";
|
||
// return strHtml;
|
||
// },
|
||
// },
|
||
// };
|
||
// }),
|
||
// },
|
||
// // {
|
||
// // name: "综合评估为",
|
||
// // type: "map",
|
||
// // geoIndex: 0,
|
||
// // data: this.dataList,
|
||
// // },
|
||
// ],
|
||
// };
|
||
|
||
// setTimeout(() => {
|
||
// myChartes.resize();
|
||
// }, 100);
|
||
// this.loadingd = false;
|
||
// let _this = this;
|
||
// _this.$erd.listenTo(_this.$refs.jcwmap, (element) => {
|
||
// _this.$nextTick(() => {
|
||
// myChartes.resize();
|
||
// });
|
||
// });
|
||
// window.onresize = function () {
|
||
// myChartes.resize();
|
||
// };
|
||
// },
|
||
},
|
||
};
|
||
</script>
|