//在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 ( '

' + params.data.proName + '

' + '

风险等级:' + setRiskLevelColor(params.data.riskLeve) + '

' + '

作业内容:' + sliceStr(params.data.workContent) + '

' + '

班组长:' + params.data.workManage + '

' ) break; case "4": console.log(params) let proNameList = params.data.proName.split(";"); let jxNameList = params.data.jxName.split(";"); let html = "
"; $(proNameList).each(function (index, item) { html += '
' + '

' + item + '\n

' + '
' + setJx(jxNameList[index]) + '
' + '
' }) html += '
' 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 += '

' + item + '

' }) 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"); }