564 lines
22 KiB
JavaScript
564 lines
22 KiB
JavaScript
//在div中初始化地图
|
|
// /let myChart = echarts.init(document.getElementById('map-content'));
|
|
let uploadedDataURL = "../../js/compreDisplay/anhui/anhui.json";
|
|
let myChart = echarts.init(document.getElementById('echarts-map'));
|
|
// 选中的地市名称和编码
|
|
let clickCityName = null, clickCityCode = null;
|
|
|
|
/**
|
|
* 加载地图
|
|
* @param dataMap
|
|
*/
|
|
function map(dataMap) {
|
|
$.getJSON(uploadedDataURL, function (geoJson) {
|
|
echarts.registerMap('anhui', geoJson);
|
|
myChart.hideLoading();
|
|
let max = 480,
|
|
min = 1.1; // todo
|
|
let maxSize4Pin = 100,
|
|
minSize4Pin = 100;
|
|
|
|
let convertData = function (data) {
|
|
let res = [];
|
|
for (let i = 0; i < data.length; i++) {
|
|
let geoCoord = data[i].coordinate;
|
|
if (geoCoord) {
|
|
res.push({
|
|
proName: data[i].proName,
|
|
num:data[i].num,
|
|
riskLevel: data[i].riskType,
|
|
workContent: dealEmptyString(data[i].workContent),
|
|
isOnline: isOnline(data[i].ballStatus),
|
|
workManager: dealEmptyString(data[i].workManage) + '' + dealEmptyString(data[i].workManagePhone),
|
|
value: geoCoord.concat(data[i].value,data[i].proName,data[i].num),
|
|
coordinate: data[i].coordinate,
|
|
});
|
|
}
|
|
}
|
|
return res;
|
|
};
|
|
|
|
let option = {
|
|
silent: false,
|
|
backgroundColor: 'transparent',
|
|
textStyle: {
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
color: 'red'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
enterable: true,
|
|
position: function (pos, params, dom, rect, size) {
|
|
if ($(dom).children($('p')).length === 0) $(dom).css('display', 'none')
|
|
pos = [pos[0], pos[1] + 10];
|
|
return pos;
|
|
},
|
|
backgroundColor: 'rgba(14, 17, 28,0.63)', //设置背景颜色
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
borderColor: "#174FDD",
|
|
formatter: function (params) {
|
|
if (params.data){
|
|
return (
|
|
'<p class="map-p">' + params.data.proName + '</p>' +
|
|
'<p class="map-p">风险等级：' + setRiskLevelColor(params.data.riskLevel) + '</p>' +
|
|
'<p class="map-p" title="' + params.data.workContent + '">作业内容：' + sliceStr(params.data.workContent) + '</p>' +
|
|
'<p class="map-p">班组长：' + params.data.workManager + '</p>' +
|
|
'<p class="map-p">预警数量：' + params.data.num + '</p>' +
|
|
'<p class="map-p">球机：' + params.data.isOnline + '</p>'
|
|
)
|
|
}
|
|
|
|
},
|
|
// extraCssText: "background:url('../../img/tc.png') 100% 100% repeat;",
|
|
extraCssText: "max-width:300px;height:auto;word-break:break-all;white-space:pre-wrap;",
|
|
|
|
},
|
|
geo: {
|
|
show: true,
|
|
map: 'anhui',
|
|
aspectScale:0.8,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|
},
|
|
rotate: -20,
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
}
|
|
},
|
|
roam: false,
|
|
scaleLimit: {
|
|
max: max,
|
|
min: min
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#52ADF3',
|
|
borderColor: '#fff',
|
|
borderWidth: 2,
|
|
shadowColor: 'rgba(80, 172, 243, 0.5)',
|
|
shadowBlur: 30
|
|
},
|
|
emphasis: {
|
|
areaColor: '#2B91B7',
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
}
|
|
},
|
|
series: [{
|
|
name: '在线',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
animation: false,
|
|
symbolSize: function (val) {
|
|
let a = (maxSize4Pin - minSize4Pin) / (max - min);
|
|
let b = minSize4Pin - a * min;
|
|
b = maxSize4Pin - a * max;
|
|
return 20;
|
|
},
|
|
symbol: function (val) {
|
|
var num=Number(val[4])+1;
|
|
return getEchartsImage(val[2],num,val[3]);
|
|
// switch (val[2]) {
|
|
// case 2:
|
|
// return 'image://../../img/compreDisplay/two-risk.png';
|
|
// break;
|
|
// case 3:
|
|
// return 'image://../../img/compreDisplay/three-risk.png';
|
|
// break;
|
|
// case 4:
|
|
// return 'image://../../img/compreDisplay/four-risk.png';
|
|
// break;
|
|
// case 5:
|
|
// return 'image://../../img/compreDisplay/five-risk.png';
|
|
// break;
|
|
// default:
|
|
// break;
|
|
// }
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 15,
|
|
opacity: 1
|
|
}
|
|
}
|
|
},
|
|
zlevel: 6,
|
|
z: 6,
|
|
data: convertData(dataMap)
|
|
},
|
|
{
|
|
name: 'weather',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
clickable: false,
|
|
legendHoverLink: false,
|
|
silent: true, //禁用地图的hover事件
|
|
symbolSize: [0.5, 0.5],
|
|
label: {
|
|
show: true,
|
|
offset: [0, 0], //偏移设置
|
|
fontSize: 14,
|
|
lineHeight: 15,
|
|
borderWidth: 0.5,
|
|
backgroundColor: 'rgba(14, 17, 28,0.63)', //设置背景颜色
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|
},
|
|
borderColor: "#174FDD",
|
|
padding: 6,
|
|
formatter(value) {
|
|
return `{name|${value.data.currentTemp}}` + setBlank() + `{` + setWeatherSituation(value.data.weatherStatus) + `|}{tempName|${value.data.weatherStatus}}\n{weatherDes|${value.data.weatherDes}}`;
|
|
},
|
|
rich: {
|
|
img1: {
|
|
// 晴
|
|
backgroundColor: {image: '../../img/compreDisplay/weather/fine.png', height: 32},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
position: 'right',
|
|
},
|
|
img2: {
|
|
// 多云
|
|
backgroundColor: {
|
|
image: '../../img/compreDisplay/weather/partlyCloudy.png',
|
|
height: 32
|
|
},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
position: 'right',
|
|
},
|
|
// 阴
|
|
img3: {
|
|
backgroundColor: {image: '../../img/compreDisplay/weather/shade.png', height: 32},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
},
|
|
// 小雨
|
|
img4: {
|
|
backgroundColor: {image: '../../img/compreDisplay/weather/lightRain.png', height: 32},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
},
|
|
// 中雨
|
|
img5: {
|
|
backgroundColor: {
|
|
image: '../../img/compreDisplay/weather/moderateRain.png',
|
|
height: 32
|
|
},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
},
|
|
// 大雨
|
|
img6: {
|
|
backgroundColor: {image: '../../img/compreDisplay/weather/heavyRain.png', height: 32},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
},
|
|
// 雷阵雨
|
|
img7: {
|
|
backgroundColor: {
|
|
image: '../../img/compreDisplay/weather/thunderstorm.png',
|
|
height: 32
|
|
},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
},
|
|
// 小雪
|
|
img8: {
|
|
backgroundColor: {image: '../../img/compreDisplay/weather/snow.png', height: 32},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
},
|
|
// 中雪
|
|
img9: {
|
|
backgroundColor: {
|
|
image: '../../img/compreDisplay/weather/moderateRain.png',
|
|
height: 32
|
|
},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
},
|
|
// 大雪
|
|
img10: {
|
|
backgroundColor: {image: '../../img/compreDisplay/weather/heavySnow.png', height: 32},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
},
|
|
// 大风
|
|
img11: {
|
|
backgroundColor: {image: '../../img/compreDisplay/weather/gale.png', height: 32},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
},
|
|
// 雨夹雪
|
|
img12: {
|
|
backgroundColor: {image: '../../img/compreDisplay/weather/sleet.png', height: 32},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
},
|
|
// 雾
|
|
img13: {
|
|
backgroundColor: {image: '../../img/compreDisplay/weather/fog.png', height: 32},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
},
|
|
// 雾霾
|
|
img14: {
|
|
backgroundColor: {image: '../../img/compreDisplay/weather/smog.png', height: 32},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
},
|
|
// 浮尘
|
|
img15: {
|
|
backgroundColor: {image: '../../img/compreDisplay/weather/sinkFloat.png', height: 32},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
},
|
|
// 沙尘暴
|
|
img16: {
|
|
backgroundColor: {image: '../../img/compreDisplay/weather/sandstorm.png', height: 32},
|
|
height: 32,
|
|
lineHeight: 32,
|
|
},
|
|
name: {
|
|
fontSize: 18,
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|
},
|
|
weatherDes: {
|
|
fontSize: 14,
|
|
color: '#fff',
|
|
fontWeight: 'normal',
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|
},
|
|
tempName: {
|
|
fontSize: 14,
|
|
color: '#fff',
|
|
fontWeight: 'normal',
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|
},
|
|
},
|
|
color: '#fff',
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'transparent', //标志颜色
|
|
shadowBlur: 1,
|
|
shadowColor: 'D8BC37',
|
|
},
|
|
},
|
|
data: showWeatherList,
|
|
zlevel: 10,
|
|
},
|
|
]
|
|
}
|
|
|
|
myChart.clear();
|
|
myChart.setOption(option, true);
|
|
// if (myChart._$handlers.click) {
|
|
// myChart._$handlers.click.length = 0;
|
|
// }
|
|
/*myChart.off('click').on('click', function (params) {
|
|
// openVideo(params.data)
|
|
});*/
|
|
myChart.off('dblclick').on("dblclick", function (params) {
|
|
if(params.componentType === 'geo'){
|
|
$('.switch-type').css('display', 'none');
|
|
$('.switch-btn').css('display', 'none');
|
|
$('.switch-type2').removeAttr('style');
|
|
$('.back').removeAttr('style');
|
|
console.log(params);
|
|
setUploadedDataURL2(params.name);
|
|
}
|
|
})
|
|
});
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
// 超长设置隐藏
|
|
function sliceStr(value) {
|
|
if (value) {
|
|
return value.length > 12 ? value.slice(0, 12) + '...' : value;
|
|
} else {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
// 省市下钻
|
|
function setUploadedDataURL2(name) {
|
|
var orgs=getOrgSelect();
|
|
for (let i = 0; i < orgs.length; i++) {
|
|
var orgName=orgs[i].name +"市";
|
|
var orgId=orgs[i].code;
|
|
if(name==orgName){
|
|
clickCityCode=orgId;
|
|
}
|
|
}
|
|
console.log(name)
|
|
if (name === "合肥市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/hefei.json';
|
|
clickCityName = '安徽省电力公司合肥供电公司';
|
|
} else if (name === "芜湖市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/wuhu.json';
|
|
clickCityName = '安徽省电力公司芜湖供电公司';
|
|
} else if (name === "蚌埠市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/bengbu.json';
|
|
clickCityName = '安徽省电力公司蚌埠供电公司';
|
|
} else if (name === "淮南市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/huainan.json';
|
|
clickCityName = '安徽省电力公司淮南供电公司';
|
|
} else if (name === "马鞍山市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/maansan.json';
|
|
clickCityName = '安徽省电力公司马鞍山供电公司';
|
|
} else if (name === "淮北市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/huaibei.json';
|
|
clickCityName = '安徽省电力公司淮北供电公司';
|
|
} else if (name === "铜陵市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/tongling.json';
|
|
clickCityName = '安徽省电力公司铜陵供电公司';
|
|
} else if (name === "安庆市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/anqing.json';
|
|
clickCityName = '安徽省电力公司安庆供电公司';
|
|
} else if (name === "黄山市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/huangshan.json';
|
|
clickCityName = '安徽省电力公司黄山供电公司';
|
|
} else if (name === "阜阳市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/fuyang.json';
|
|
clickCityName = '安徽省电力公司阜阳供电公司';
|
|
} else if (name === "宿州市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/suzhou.json';
|
|
clickCityName = '安徽省电力公司宿州供电公司';
|
|
} else if (name === "滁州市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/chuzhou.json';
|
|
clickCityName = '安徽省电力公司滁州供电公司';
|
|
} else if (name === "六安市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/liuan.json';
|
|
clickCityName = '安徽省电力公司六安供电公司';
|
|
} else if (name === "宣城市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/xuancheng.json';
|
|
clickCityName = '安徽省电力公司宣城供电公司';
|
|
} else if (name === "池州市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/chizhou.json';
|
|
clickCityName = '安徽省电力公司池州供电公司';
|
|
} else if (name === "亳州市") {
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/bozhou.json';
|
|
clickCityName = '安徽省电力公司亳州供电公司';
|
|
}
|
|
map([]);
|
|
myChart2 = echarts.init(document.getElementById('echarts-map2'));
|
|
// map2([]);
|
|
let dataList = mapPointList.filter(item => {
|
|
if (item.buildCode === clickCityCode) {
|
|
return item
|
|
}
|
|
})
|
|
isCity = true;
|
|
console.log(dataList);
|
|
console.log(clickCityCode);
|
|
map2(dataList);
|
|
setCityData(clickCityCode);
|
|
}
|
|
|
|
//组织机构下拉选
|
|
function getOrgSelect() {
|
|
let dataList = [];
|
|
$.ajax({
|
|
headers: {
|
|
"encrypt": sm3(JSON.stringify({
|
|
params: '3',
|
|
}))
|
|
},
|
|
url: dataUrl + 'system/sys/selected/getOrgSelected?token=' + token,
|
|
type: 'post',
|
|
data: {
|
|
params: '3',
|
|
},
|
|
async: false,
|
|
success: function (data) {
|
|
if (data && data.length > 0) {
|
|
$.each(data, function (index, item) {
|
|
dataList.push(item)
|
|
})
|
|
}
|
|
}
|
|
});
|
|
return dataList;
|
|
}
|
|
|
|
|
|
// 地市下钻赋值
|
|
function setCityData() {
|
|
$('#cityName').html(clickCityName);
|
|
getRiskByDateAjax(clickCityCode, '0');
|
|
getRiskByDateAjax(clickCityCode, '1');
|
|
getProNumByType('',clickCityCode,2);
|
|
getDayAttendanceNumAjax(2,clickCityCode);
|
|
}
|
|
|
|
// 设置空格
|
|
function setBlank() {
|
|
return '\t\t';
|
|
}
|
|
|
|
// 设置天气情况
|
|
function setWeatherSituation(value) {
|
|
let str = '';
|
|
if (value.indexOf("晴") !== -1) {
|
|
str = 'img1';
|
|
} else if (value.indexOf("多云") !== -1) {
|
|
str = 'img2';
|
|
} else if (value.indexOf("阴") !== -1) {
|
|
str = 'img3';
|
|
} else if (value.indexOf("小雨") !== -1) {
|
|
str = 'img4';
|
|
} else if (value.indexOf("中雨") !== -1) {
|
|
str = 'img5';
|
|
} else if (value.indexOf("大雨") !== -1) {
|
|
str = 'img6';
|
|
} else if (value.indexOf("雷阵雨") !== -1) {
|
|
str = 'img7';
|
|
} else if (value.indexOf("小雪") !== -1) {
|
|
str = 'img8';
|
|
} else if (value.indexOf("中雪") !== -1) {
|
|
str = 'img9';
|
|
} else if (value.indexOf("大雪") !== -1) {
|
|
str = 'img10';
|
|
} else if (value.indexOf("大风") !== -1) {
|
|
str = 'img11';
|
|
} else if (value.indexOf("雨夹雪") !== -1) {
|
|
str = 'img12';
|
|
} else if (value.indexOf("雾") !== -1) {
|
|
str = 'img13';
|
|
} else if (value.indexOf("雾霾") !== -1) {
|
|
str = 'img14';
|
|
} else if (value.indexOf("浮尘") !== -1) {
|
|
str = 'img15';
|
|
} else if (value.indexOf("沙尘暴") !== -1) {
|
|
str = 'img16';
|
|
}
|
|
return str;
|
|
}
|
|
|
|
/*判空*/
|
|
function dealEmptyString(str) {
|
|
if (str) {
|
|
return str;
|
|
}
|
|
return '';
|
|
}
|
|
|
|
/*判断球机是否在线*/
|
|
function isOnline(value) {
|
|
if (value) {
|
|
if (value === '0' || value === 0) {
|
|
return '离线';
|
|
} else {
|
|
return '在线';
|
|
}
|
|
} else {
|
|
return '离线';
|
|
}
|
|
}
|
|
|
|
|
|
function getEchartsImage(type,num,proName){
|
|
if(proName.indexOf('变电站')!=-1 && proName.indexOf('线路')==-1){
|
|
if(type==2){
|
|
return 'image://../../img/map/bdz2.png';
|
|
}else if(type==3){
|
|
return 'image://../../img/map/bdz3.png';
|
|
}else if(type==4){
|
|
return 'image://../../img/map/bdz4.png';
|
|
}else if(type==5){
|
|
return 'image://../../img/map/bdz5.png';
|
|
}
|
|
}else{
|
|
if(type==2){
|
|
return 'image://../../img/map/two-risk'+num+'.png';
|
|
}else if(type==3){
|
|
return 'image://../../img/map/three-risk'+num+'.png';
|
|
}else if(type==4){
|
|
return 'image://../../img/map/four-risk'+num+'.png';
|
|
}else if(type==5){
|
|
return 'image://../../img/map/five-risk'+num+'.png';
|
|
}
|
|
}
|
|
|
|
} |