638 lines
23 KiB
Plaintext
638 lines
23 KiB
Plaintext
//在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;
|
|
|
|
// 工程统计地图
|
|
function getMapProNum() {
|
|
mapType = '1';
|
|
$('.multiselect').css('display', 'none')
|
|
let selProType = '';
|
|
$('.main-right-box1-title button').each(function () {
|
|
if ($(this).hasClass('main-right-box4-btn')) {
|
|
selProType = $(this).attr('btnValue')
|
|
}
|
|
})
|
|
Ajax().post({
|
|
headers: {
|
|
"encrypt": sm3(JSON.stringify({proType: selProType}))
|
|
},
|
|
url: dataUrl + 'proteam/pot/tysj/getMapProNum',
|
|
data: {proType: selProType},
|
|
async: true,
|
|
success: function (data) {
|
|
console.error(data)
|
|
if (data.code === 200) {
|
|
map(data.data, "1")
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
// 班组人员
|
|
function getTeamNumMap() {
|
|
mapType = '2';
|
|
$('.multiselect').css('display', 'none')
|
|
Ajax().post({
|
|
headers: {
|
|
"encrypt": sm3(JSON.stringify({}))
|
|
},
|
|
url: dataUrl + 'proteam/pot/teamNew/getTeamNum',
|
|
data: {},
|
|
async: true,
|
|
success: function (data) {
|
|
if (data.code === 200) {
|
|
map(data.data, "2")
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 日风险
|
|
function getDayRiskByMap(type) {
|
|
if(type === 2){
|
|
mapType = '3';
|
|
$('.check-risk').each(function () {
|
|
if ($(this).attr("isCheck") === '0') {
|
|
$(this).attr("isCheck", '1')
|
|
let checkedValue = $(this).find('p').eq(0).attr("checkedName");
|
|
$(this).find('img').eq(0).attr("src", setRiskIcon(checkedValue, 2))
|
|
}
|
|
})
|
|
if ($(".switch-type2").is(":hidden")){
|
|
console.log("123123");
|
|
$('.multiselect').removeAttr('style')
|
|
}
|
|
|
|
}
|
|
Ajax().post({
|
|
headers: {
|
|
"encrypt": sm3(JSON.stringify({}))
|
|
},
|
|
url: dataUrl + 'proteam/pot/dailyRisk/getDayRiskByMap',
|
|
data: {},
|
|
async: true,
|
|
success: function (data) {
|
|
mapPointList.splice(0, mapPointList.length)
|
|
mainMapPointList.splice(0, mainMapPointList.length)
|
|
if (data.code === 200) {
|
|
$.each(data.data, function (index, item) {
|
|
mapPointList.push(item)
|
|
mainMapPointList.push(JSON.parse(JSON.stringify(item)))
|
|
})
|
|
if (type === 1 || type === 2) { // 定时刷新时使用
|
|
mapSearch();
|
|
} else {
|
|
map(mapPointList, "3")
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
//绿色建造-获蒋情况
|
|
function getAwardsListOnMap() {
|
|
mapType = '4';
|
|
$('.multiselect').css('display', 'none')
|
|
Ajax().post({
|
|
headers: {
|
|
"encrypt": sm3(JSON.stringify({}))
|
|
},
|
|
url: dataUrl + 'proteam/pot/greenBuild/getAwardsListOnMap',
|
|
data: {},
|
|
async: true,
|
|
success: function (data) {
|
|
console.log(data)
|
|
if (data.code === 200) {
|
|
map(data.data, "4")
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 加载地图
|
|
* @param dataMap
|
|
*/
|
|
function map(dataMap, type) {
|
|
$.getJSON(uploadedDataURL, function (geoJson) {
|
|
echarts.registerMap('anhui', geoJson);
|
|
myChart.hideLoading();
|
|
let max = 480,
|
|
min = 1.15;
|
|
let maxSize4Pin = 100,
|
|
minSize4Pin = 100;
|
|
let proNumData = function (data) {
|
|
let res = [];
|
|
if (type == "1") {
|
|
for (let i = 0; i < data.length; i++) {
|
|
let geoCoord = [parseFloat(data[i].lon), parseFloat(data[i].lat)];
|
|
if (geoCoord) {
|
|
res.push({
|
|
num: data[i].num,
|
|
zjNum: data[i].zjNum,
|
|
tcNum: data[i].tcNum,
|
|
type: type,
|
|
value: geoCoord
|
|
});
|
|
}
|
|
}
|
|
}
|
|
return res;
|
|
};
|
|
|
|
let convertData = function (data) {
|
|
let res = [];
|
|
if (type == "2") {
|
|
for (let i = 0; i < data.length; i++) {
|
|
let geoCoord = [parseFloat(data[i].lon), parseFloat(data[i].lat)];
|
|
if (geoCoord) {
|
|
res.push({
|
|
perNum: data[i].perNum,
|
|
teamNum: data[i].teamNum,
|
|
type: type,
|
|
value: geoCoord
|
|
});
|
|
}
|
|
}
|
|
}
|
|
return res;
|
|
};
|
|
|
|
let dayRiskData = function (data) {
|
|
let res = [];
|
|
if (type == "3") {
|
|
for (let i = 0; i < data.length; i++) {
|
|
let geoCoord = [parseFloat(data[i].lon), parseFloat(data[i].lat), parseFloat(data[i].riskLevel)];
|
|
if (geoCoord) {
|
|
res.push({
|
|
proName: data[i].proName,
|
|
riskLeve: data[i].riskLevel,
|
|
workContent: data[i].workContent,
|
|
workManage: data[i].workManage,
|
|
type: type,
|
|
value: geoCoord
|
|
});
|
|
}
|
|
}
|
|
}
|
|
return res;
|
|
};
|
|
|
|
|
|
let getAwardsListData = function (data) {
|
|
let res = [];
|
|
if (type == "4") {
|
|
for (let i = 0; i < data.length; i++) {
|
|
let geoCoord = [parseFloat(data[i].lon), parseFloat(data[i].lat)];
|
|
if (geoCoord) {
|
|
res.push({
|
|
type: type,
|
|
jxName: data[i].jxName,
|
|
proName: data[i].proName,
|
|
value: geoCoord
|
|
});
|
|
}
|
|
}
|
|
}
|
|
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) {
|
|
switch (params.data.type) {
|
|
case "1":
|
|
return;
|
|
break;
|
|
case "2":
|
|
return;
|
|
break;
|
|
case "3":
|
|
return (
|
|
'<p class="map-p">' + params.data.proName + '</p>' +
|
|
'<p class="map-p">风险等级：' + setRiskLevelColor(params.data.riskLeve) + '</p>' +
|
|
'<p class="map-p" title="' + params.data.workContent + '">作业内容：' + sliceStr(params.data.workContent) + '</p>' +
|
|
'<p class="map-p">班组长：' + params.data.workManage + '</p>'
|
|
)
|
|
break;
|
|
case "4":
|
|
console.log(params)
|
|
let proNameList = params.data.proName.split(";");
|
|
let jxNameList = params.data.jxName.split(";");
|
|
let html = "<div>";
|
|
$(proNameList).each(function (index, item) {
|
|
html += '<div class="jx-box">' +
|
|
'<p class="map-p2">' + item + '\n</p>' +
|
|
'<div>' +
|
|
setJx(jxNameList[index]) +
|
|
'</div>' +
|
|
'</div>'
|
|
})
|
|
html += '</div>'
|
|
return html
|
|
break
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
},
|
|
extraCssText: "max-width:300px;height:auto;word-break:break-all;white-space:pre-wrap;",
|
|
|
|
},
|
|
geo: [
|
|
{
|
|
map: 'anhui',
|
|
zlevel: 5,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|
},
|
|
rotate: -20,
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
}
|
|
},
|
|
aspectScale: 0.8, //长宽比
|
|
roam: true,
|
|
scaleLimit: {
|
|
max: max,
|
|
min: min
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#356dbb',
|
|
borderColor: '#7ad4ff',
|
|
borderWidth: 1,
|
|
shadowColor: 'rgba(53,109,187,0.5)',
|
|
shadowBlur: 30,
|
|
},
|
|
emphasis: {
|
|
areaColor: '#2B91B7',
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
}
|
|
},
|
|
/*{
|
|
map: 'anhui',
|
|
top: '12%',
|
|
zlevel: 4,
|
|
aspectScale: 0.8, //长宽比
|
|
silent: true, // 禁止这一层级选中
|
|
roam: false,
|
|
itemStyle: {
|
|
color: '#58c9ff', // 背景
|
|
borderWidth: '1', // 边框宽度
|
|
borderColor: '#58c9ff', // 边框颜色
|
|
},
|
|
scaleLimit: {
|
|
max: max,
|
|
min: min
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
}
|
|
|
|
},*/
|
|
],
|
|
series: [
|
|
{
|
|
name: '工程统计',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
animation: false,
|
|
clickable: false,
|
|
legendHoverLink: false,
|
|
silent: true, //禁用地图的hover事件
|
|
label: {
|
|
show: true,
|
|
align: 'center',
|
|
lineHeight: 38,
|
|
offset: [0, 0], //偏移设置
|
|
symbolSize: 0,
|
|
height: 63,
|
|
width: 116,
|
|
backgroundColor: {image: '../../img/main/pro_back.png'},
|
|
padding: 0,
|
|
formatter: function (params) {
|
|
return `{fontColor|${params.data.num}}\t\t{fontColor2|${params.data.zjNum}}\t\t{fontColor3|${params.data.tcNum}}`;
|
|
},
|
|
rich: {
|
|
fontColor: {
|
|
fontSize: 15,
|
|
color: '#38D6F6',
|
|
fontFamily: 'Alibaba PuHuiTi R',
|
|
},
|
|
fontColor2: {
|
|
fontSize: 15,
|
|
color: '#A6FDC0',
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|
},
|
|
fontColor3: {
|
|
fontSize: 15,
|
|
color: '#4BF3E6',
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|
},
|
|
}
|
|
},
|
|
zlevel: 6,
|
|
data: proNumData(dataMap)
|
|
},
|
|
|
|
{
|
|
name: 'teamNumMap',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
animation: false,
|
|
symbolSize: 0,
|
|
clickable: false,
|
|
legendHoverLink: false,
|
|
silent: true, //禁用地图的hover事件
|
|
label: {
|
|
show: true,
|
|
align: 'center',
|
|
lineHeight: 30,
|
|
offset: [0, 0], //偏移设置
|
|
symbolSize: 0,
|
|
height: 62,
|
|
width: 127,
|
|
backgroundColor: {image: '../../img/main/team_back.png'},
|
|
padding: 0,
|
|
formatter: function (params) {
|
|
return `{fontColor|班组数：${params.data.teamNum}}\n{fontColor2|人员数：${params.data.perNum}}`;
|
|
},
|
|
rich: {
|
|
fontColor: {
|
|
fontSize: 15,
|
|
color: '#6DC1EF',
|
|
fontFamily: 'Alibaba PuHuiTi R',
|
|
},
|
|
fontColor2: {
|
|
fontSize: 15,
|
|
color: '#68E3E6',
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|
}
|
|
}
|
|
},
|
|
zlevel: 6,
|
|
data: convertData(dataMap)
|
|
},
|
|
|
|
{
|
|
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 25;
|
|
},
|
|
symbol: function (val) {
|
|
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: dayRiskData(dataMap)
|
|
},
|
|
|
|
|
|
{
|
|
name: '绿色建造',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
animation: false,
|
|
symbolSize: 25,
|
|
symbol: function (val) {
|
|
return 'image://../../img/main/cup.png';
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 15,
|
|
opacity: 1,
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|
}
|
|
}
|
|
},
|
|
zlevel: 6,
|
|
z: 6,
|
|
data: getAwardsListData(dataMap)
|
|
}
|
|
|
|
]
|
|
}
|
|
|
|
myChart.clear();
|
|
myChart.setOption(option, true);
|
|
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');
|
|
$('.multiselect').css('display', 'none')
|
|
$('.back').removeAttr('style');
|
|
setUploadedDataURL2(params.name);
|
|
}
|
|
})
|
|
});
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
// 省市下钻
|
|
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;
|
|
}
|
|
}
|
|
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([]);
|
|
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 setJx(jxName) {
|
|
let html = '';
|
|
let jxNameList = jxName.split(",");
|
|
$(jxNameList).each(function (index, item) {
|
|
html += '<p class="map-p2" style="text-indent: 25px;">' + item + '</p>'
|
|
})
|
|
return html;
|
|
}
|
|
|
|
// 超长设置隐藏
|
|
function sliceStr(value) {
|
|
if (value) {
|
|
return value.length > 12 ? value.slice(0, 12) + '...' : value;
|
|
} else {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
/*判空*/
|
|
function dealEmptyString(str) {
|
|
if (str) {
|
|
return str;
|
|
}
|
|
return '';
|
|
}
|
|
|
|
// 地市下钻赋值
|
|
function setCityData() {
|
|
$('#cityName').html(clickCityName);
|
|
getRiskByDateAjax(clickCityCode, '0');
|
|
getRiskByDateAjax(clickCityCode, '1');
|
|
getProNumByType('',clickCityCode,2);
|
|
getDayAttendanceNumAjax(2,clickCityCode);
|
|
}
|
|
|
|
/*返回echarts主地图*/
|
|
function back() {
|
|
$('.switch-type').removeAttr('style');
|
|
$('.switch-btn').removeAttr('style');
|
|
$('.switch-type2').css('display', 'none');
|
|
$('.back').css('display', 'none');
|
|
$('.multiselect').removeAttr('style');
|
|
echarts.init(document.getElementById('echarts-map2')).dispose();
|
|
clickCityName = null, clickCityCode = null;
|
|
map(mapPointList,"3");
|
|
} |