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>
|