This commit is contained in:
GGJ
2025-01-09 19:02:44 +08:00
commit 92e7a7a5eb
2943 changed files with 1152283 additions and 0 deletions

View File

@@ -0,0 +1,683 @@
<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>