1576 lines
54 KiB
JavaScript
1576 lines
54 KiB
JavaScript
|
var loader = {
|
|||
|
|
get: function (url, data = null, scb) {
|
|||
|
|
let reqData = {
|
|||
|
|
params: null
|
|||
|
|
}
|
|||
|
|
if (data) {
|
|||
|
|
let convertData = []
|
|||
|
|
Object.keys(data).forEach(item => {
|
|||
|
|
convertData.push(`${item}=${data[item]}`)
|
|||
|
|
})
|
|||
|
|
reqData.params = encryptCBC(convertData.join('&'))
|
|||
|
|
}
|
|||
|
|
$.ajax({
|
|||
|
|
url: commonUrl + url,
|
|||
|
|
type: 'get',
|
|||
|
|
headers: {
|
|||
|
|
"authorization": sessionStorage.getItem("zhgd_token")
|
|||
|
|
},
|
|||
|
|
data: reqData.params ? reqData : '',
|
|||
|
|
success: scb,
|
|||
|
|
success: function (event, xhr, settings, data){
|
|||
|
|
event=modifyResponseData(event);
|
|||
|
|
scb(event, xhr, settings, data);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
let gtList = [];
|
|||
|
|
var terrainMap;
|
|||
|
|
let element, layer, table;
|
|||
|
|
// 选中标段工程
|
|||
|
|
let checkBidCode = null;
|
|||
|
|
layui.use(['form', 'layer', 'element', 'table'], function () {
|
|||
|
|
element = layui.element;
|
|||
|
|
layer = layui.layer;
|
|||
|
|
table = layui.table;
|
|||
|
|
form = layui.form;
|
|||
|
|
//地形切换
|
|||
|
|
form.on('switch(terrain)', function (data) {
|
|||
|
|
if (this.checked) {
|
|||
|
|
$('#echarts-map').css('display', 'none');
|
|||
|
|
$('#map').css('display', 'block');
|
|||
|
|
$('#multiselect').css('display', 'none');
|
|||
|
|
$('.bid-pro-select').removeAttr('style')
|
|||
|
|
initMap()
|
|||
|
|
loadBidPro();
|
|||
|
|
} else {
|
|||
|
|
$('#echarts-map').css('display', 'block');
|
|||
|
|
$('#map').css('display', 'none');
|
|||
|
|
$('#multiselect').removeAttr('style')
|
|||
|
|
$('.bid-pro-select').css('display', 'none');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 工程统计
|
|||
|
|
initEngineeringStatistic()
|
|||
|
|
|
|||
|
|
// 施工质量排名
|
|||
|
|
initQualityRanking()
|
|||
|
|
|
|||
|
|
// 环境监控
|
|||
|
|
initEnvironmentAnalysis()
|
|||
|
|
|
|||
|
|
// 设备状态
|
|||
|
|
initDeviceStatus()
|
|||
|
|
|
|||
|
|
// 安徽省地图
|
|||
|
|
initMainMap()
|
|||
|
|
|
|||
|
|
initRiskData()
|
|||
|
|
|
|||
|
|
// 工程安全隐患分析
|
|||
|
|
initSafetyAnalysis()
|
|||
|
|
|
|||
|
|
// 工人效率分析
|
|||
|
|
initEfficiencyAnalysis()
|
|||
|
|
|
|||
|
|
// 资源利用及能源使用
|
|||
|
|
initResourceRate()
|
|||
|
|
|
|||
|
|
// 告警提醒
|
|||
|
|
initAlarmReminder()
|
|||
|
|
// 标段工程下拉选监听
|
|||
|
|
form.on('select(bidPro)', function (data) {
|
|||
|
|
let value = data.value;
|
|||
|
|
let valueArr = value.split('@');
|
|||
|
|
loadBidProTower(valueArr[0], valueArr[1]);
|
|||
|
|
});
|
|||
|
|
$("#quality-ranking-table").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
|
|||
|
|
$("#alarm-reminder-table").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#indexIframe').attr('src', './views/main.html');
|
|||
|
|
|
|||
|
|
let mainMapPointList = [], mapPointList = [], weatherList = [], showWeatherList = [];
|
|||
|
|
|
|||
|
|
// $.getJSON('../config/risk.json', function (data) {
|
|||
|
|
// // console.log(data)
|
|||
|
|
// mainMapPointList = data
|
|||
|
|
// })
|
|||
|
|
|
|||
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
|||
|
|
const tooltip = {
|
|||
|
|
show: true,
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(75, 79, 82, 0.80)', //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
borderColor: "rgba(255,255,255, .5)",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 左侧
|
|||
|
|
*/
|
|||
|
|
// 工程统计
|
|||
|
|
function initEngineeringStatistic() {
|
|||
|
|
const url = 'screen/largeScreen/scIndex/proStatusStatistics'
|
|||
|
|
loader.get(url, null, function (res) {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
const { djNum, zjNum, allNum, tcNum, tgNum } = res.data
|
|||
|
|
$('#engineering-statistic-item-1').text(djNum)
|
|||
|
|
$('#engineering-statistic-item-2').text(zjNum)
|
|||
|
|
$('#engineering-statistic-item-3').text(allNum)
|
|||
|
|
$('#engineering-statistic-item-4').text(tcNum)
|
|||
|
|
$('#engineering-statistic-item-5').text(tgNum)
|
|||
|
|
} else if (res.code === 401) {
|
|||
|
|
loginout(1);
|
|||
|
|
} else {
|
|||
|
|
console.error('工程统计:' + res.msg);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 施工质量排名
|
|||
|
|
function initQualityRanking() {
|
|||
|
|
const url = 'screen/largeScreen/scIndex/constrQuality'
|
|||
|
|
loader.get(url, null, function (res) {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
res.data.forEach((item, index) => {
|
|||
|
|
const { bidName, teamName, teamLeader, score } = item
|
|||
|
|
var newRow = `<li>
|
|||
|
|
<div class="quality-ranking quality-ranking-${index + 1}">${index + 1}</div>
|
|||
|
|
<div title="${bidName}">${bidName}</div>
|
|||
|
|
<div title="${teamName}">${teamName}</div>
|
|||
|
|
<div title="${teamLeader}">${teamLeader}</div>
|
|||
|
|
<div title="${score}">${score}</div>
|
|||
|
|
</li>`;
|
|||
|
|
$("#quality-ranking-table").append(newRow);
|
|||
|
|
})
|
|||
|
|
if (res.data && res.data.length === 0) {
|
|||
|
|
$("#quality-ranking-table").append('<li class="layout"><p>无数据</p></li>');
|
|||
|
|
}
|
|||
|
|
} else if (res.code === 401) {
|
|||
|
|
loginout(1);
|
|||
|
|
} else {
|
|||
|
|
console.error('施工质量排名:' + res.msg);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 环境分析
|
|||
|
|
function initEnvironmentAnalysis() {
|
|||
|
|
const url = 'screen/largeScreen/scIndex/environmentDetection'
|
|||
|
|
loader.get(url, null, function (res) {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
const data = res.data[0]
|
|||
|
|
if (!data) { return }
|
|||
|
|
const { aqiNormalNum, aqiErrorNum, dbNormalNum, dbErrorNum, hcNormalNum, hcErrorNum } = data
|
|||
|
|
$('#environment-analysis-1').find('div:first').find('p:first span').text(aqiNormalNum)
|
|||
|
|
$('#environment-analysis-1').find('div:first').find('p:last span').text(aqiErrorNum)
|
|||
|
|
$('#environment-analysis-2').find('div:first').find('p:first span').text(dbNormalNum)
|
|||
|
|
$('#environment-analysis-2').find('div:first').find('p:last span').text(dbErrorNum)
|
|||
|
|
$('#environment-analysis-3').find('div:first').find('p:first span').text(hcNormalNum)
|
|||
|
|
$('#environment-analysis-3').find('div:first').find('p:last span').text(hcErrorNum)
|
|||
|
|
} else if (res.code === 401) {
|
|||
|
|
loginout(1);
|
|||
|
|
} else {
|
|||
|
|
console.error('环境分析:' + res.msg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设备状态
|
|||
|
|
function initDeviceStatus() {
|
|||
|
|
|
|||
|
|
let xLabel = []
|
|||
|
|
let data1 = []
|
|||
|
|
let data2 = []
|
|||
|
|
let data3 = []
|
|||
|
|
|
|||
|
|
const url = 'screen/largeScreen/scIndex/deviceStatus'
|
|||
|
|
loader.get(url, null, function (res) {
|
|||
|
|
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
const { allTotalNum, onlineTotalNum, offTotalNum, valueList } = res.data;
|
|||
|
|
$('#device-status__total').text(allTotalNum)
|
|||
|
|
$('#device-status__online').text(onlineTotalNum)
|
|||
|
|
$('#device-status__offline').text(offTotalNum)
|
|||
|
|
// console.log(valueList)
|
|||
|
|
valueList.forEach(item => {
|
|||
|
|
const { proName, totalNum, onlineNum, offLineNum } = item
|
|||
|
|
xLabel.push(proName)
|
|||
|
|
data1.push(totalNum)
|
|||
|
|
data2.push(onlineNum)
|
|||
|
|
data3.push(offLineNum)
|
|||
|
|
})
|
|||
|
|
} else if (res.code === 401) {
|
|||
|
|
loginout(1);
|
|||
|
|
} else {
|
|||
|
|
console.error('设备状态:' + res.msg);
|
|||
|
|
}
|
|||
|
|
// console.log(xLabel)
|
|||
|
|
let option = {
|
|||
|
|
tooltip,
|
|||
|
|
dataZoom: [{
|
|||
|
|
type: "slider",
|
|||
|
|
realtime: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 4,
|
|||
|
|
height: 3,
|
|||
|
|
fillerColor: "#08A0A3", // 滚动条颜色
|
|||
|
|
borderColor: "#08A0A3",
|
|||
|
|
handleSize: 0, // 两边手柄尺寸
|
|||
|
|
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
|||
|
|
top: "90%",
|
|||
|
|
left: '2%',
|
|||
|
|
right: '3%',
|
|||
|
|
moveHandleStyle: {
|
|||
|
|
color: "#08A0A3",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "inside", // 支持内部鼠标滚动平移
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 4,
|
|||
|
|
zoomOnMouseWheel: false, // 关闭滚轮缩放
|
|||
|
|
moveOnMouseWheel: true, // 开启滚轮平移
|
|||
|
|
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
|||
|
|
}],
|
|||
|
|
grid: {
|
|||
|
|
top: '20%',
|
|||
|
|
left: '8%',
|
|||
|
|
right: '3%',
|
|||
|
|
bottom: '25%',
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['总数', '在线', '不在线'],
|
|||
|
|
show: true,
|
|||
|
|
top: '0%',
|
|||
|
|
right: '2%',
|
|||
|
|
icon: 'circle',
|
|||
|
|
itemWidth: 10,
|
|||
|
|
itemHeight: 10,
|
|||
|
|
itemGap: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 14,
|
|||
|
|
padding: [0, 8, 0, 8]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: true,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#5A6E71',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
//坐标轴刻度标签的相关设置
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
interval: 0,
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var val = "";
|
|||
|
|
// 超过四个字隐藏
|
|||
|
|
if (params.length > 8) {
|
|||
|
|
val = params.substr(0, 6) + '...';
|
|||
|
|
return val;
|
|||
|
|
} else {
|
|||
|
|
return params;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#233653',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: xLabel,
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
name: "",
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
padding: [0, 60, 0, 0],
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
type: 'value',
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#25393B',
|
|||
|
|
type: 'dashed'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#008de7',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '总数',
|
|||
|
|
type: 'line',
|
|||
|
|
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|||
|
|
showSymbol: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 2,
|
|||
|
|
color: '#59E1FF', // 线条颜色
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
valueFormatter: function (value) {
|
|||
|
|
return value;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#59E1FF',//拐点颜色
|
|||
|
|
label: {
|
|||
|
|
show: true, //开启显示
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
position: 'top', //在上方显示
|
|||
|
|
formatter: function (res) {
|
|||
|
|
if (res.value) {
|
|||
|
|
return res.value
|
|||
|
|
} else {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
symbolSize: 8, //设定实心点的大小
|
|||
|
|
areaStyle: {
|
|||
|
|
normal: {
|
|||
|
|
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#1ED6FF30',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.6,
|
|||
|
|
color: '#1ED6FF20',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#1ED6FF10',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
false
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: data1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '在线',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#59FFB9',
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
valueFormatter: function (value) {
|
|||
|
|
return value;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: data2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '不在线',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#CA98F9',
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
valueFormatter: function (value) {
|
|||
|
|
return value;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: data3
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
let deviceAnalysis = echarts.init(document.getElementById('device-status-chart'));
|
|||
|
|
deviceAnalysis.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
deviceAnalysis.resize();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
option && deviceAnalysis.setOption(option);
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 中间
|
|||
|
|
*/
|
|||
|
|
// 安徽省地图
|
|||
|
|
function initMainMap(dataMap = []) {
|
|||
|
|
let uploadedDataURL = "../config/anhui.json";
|
|||
|
|
let myChart = echarts.init(document.getElementById('echarts-map'));
|
|||
|
|
|
|||
|
|
let convertData = function (data) {
|
|||
|
|
let res = [];
|
|||
|
|
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,
|
|||
|
|
bidName: data[i].bidName,
|
|||
|
|
bidCode: data[i].bidCode,
|
|||
|
|
teamName: data[i].teamName,
|
|||
|
|
workManager: data[i].workManager,
|
|||
|
|
riskLevel: data[i].riskLevel,
|
|||
|
|
workContent: data[i].workContent,
|
|||
|
|
value: geoCoord
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return res
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
$.getJSON(uploadedDataURL, function (geoJson) {
|
|||
|
|
echarts.registerMap('anhui', geoJson);
|
|||
|
|
myChart.hideLoading();
|
|||
|
|
let max = 480,
|
|||
|
|
min = 1.15;
|
|||
|
|
|
|||
|
|
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(28,18,14,0.63)', //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
},
|
|||
|
|
formatter(res) {
|
|||
|
|
const dom = '<div>' + `标段工程名称：${res.data.bidName}` + '</div>' +
|
|||
|
|
'<div>' + `标段编码：${res.data.bidCode}` + '</div>' +
|
|||
|
|
'<div>' + `班组名称：${res.data.teamName}` + '</div>' +
|
|||
|
|
'<div>' + `班组长：${res.data.workManager}` + '</div>' +
|
|||
|
|
'<div>' + `风险等级：${res.data.riskLevel}` + '</div>' +
|
|||
|
|
'<div>' + `工作内容：${res.data.workContent}` + '</div>'
|
|||
|
|
return dom
|
|||
|
|
},
|
|||
|
|
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',
|
|||
|
|
fontSize: 20,
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|||
|
|
},
|
|||
|
|
rotate: 0,
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
aspectScale: 0.8, //长宽比
|
|||
|
|
roam: false,
|
|||
|
|
scaleLimit: {
|
|||
|
|
max: max,
|
|||
|
|
min: min
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
areaColor: 'rgba(121,255,255,0.6)',
|
|||
|
|
borderColor: '#7ad4ff',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
shadowColor: 'rgba(53,109,187,0.6)',
|
|||
|
|
shadowBlur: 100,
|
|||
|
|
shadowOffsetX: '-20px',
|
|||
|
|
shadowOffsetY: '100px',
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
areaColor: 'rgba(121,255,255,0.8)',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
show: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// map: 'anhui',
|
|||
|
|
// top: '12%',
|
|||
|
|
// zlevel: 4,
|
|||
|
|
// aspectScale: 0.8, //长宽比
|
|||
|
|
// silent: true, // 禁止这一层级选中
|
|||
|
|
// roam: false,
|
|||
|
|
// itemStyle: {
|
|||
|
|
// areaColor: 'rgba(121,255,255,0.3)',
|
|||
|
|
// color: 'rgba(121,255,255,0.3)', // 背景
|
|||
|
|
// borderWidth: '1', // 边框宽度
|
|||
|
|
// borderColor: 'rgba(121,255,255,0.3)', // 边框颜色
|
|||
|
|
// },
|
|||
|
|
// scaleLimit: {
|
|||
|
|
// max: max,
|
|||
|
|
// min: min
|
|||
|
|
// },
|
|||
|
|
// tooltip: {
|
|||
|
|
// show: false
|
|||
|
|
// }
|
|||
|
|
//
|
|||
|
|
// },
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '作业内容',
|
|||
|
|
type: 'scatter',
|
|||
|
|
coordinateSystem: 'geo',
|
|||
|
|
animation: false,
|
|||
|
|
symbolSize: 20,
|
|||
|
|
symbol: function (val) {
|
|||
|
|
switch (val[2]) {
|
|||
|
|
case 2:
|
|||
|
|
return 'image://../image/level2.png';
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
return 'image://../image/level3.png';
|
|||
|
|
break;
|
|||
|
|
case 4:
|
|||
|
|
return 'image://../image/level4.png';
|
|||
|
|
break;
|
|||
|
|
case 5:
|
|||
|
|
return 'image://../image/level5.png';
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: false,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 15,
|
|||
|
|
opacity: 1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
zlevel: 6,
|
|||
|
|
z: 6,
|
|||
|
|
data: convertData(dataMap)
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
myChart.clear();
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
myChart.off('dblclick').on("dblclick", function (params) {
|
|||
|
|
if(params.componentType === 'series'){
|
|||
|
|
const paramsData = {
|
|||
|
|
'bidCode': params.data.bidCode,
|
|||
|
|
'token': token
|
|||
|
|
};
|
|||
|
|
// 将参数转换为查询字符串
|
|||
|
|
const queryString = Object.keys(paramsData)
|
|||
|
|
.map(key => encodeURIComponent(key) + '=' + encodeURIComponent(encryptCBC(paramsData[key])))
|
|||
|
|
.join('&');
|
|||
|
|
const hrefUrl = login_sg_index + "?" + queryString;
|
|||
|
|
const newWindow = window.open(hrefUrl, 'newWindow');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 地图等级选中
|
|||
|
|
$(".check-risk").click(function (e) {
|
|||
|
|
let checkedName = $(this).find('p').eq(0).attr("checkedName");
|
|||
|
|
let isCheck = $(this).attr("isCheck");
|
|||
|
|
|
|||
|
|
if (checkedName === '' && isCheck === '1') {
|
|||
|
|
$('.check-risk').each(function () {
|
|||
|
|
if ($(this).attr("isCheck") === '1') {
|
|||
|
|
$(this).attr("isCheck", '0')
|
|||
|
|
let checkedValue = $(this).find('p').eq(0).attr("checkedName");
|
|||
|
|
$(this).find('img').eq(0).attr("src", setRiskIcon(isCheck))
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else if (checkedName === '' && isCheck === '0') {
|
|||
|
|
$('.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(isCheck))
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else if (checkedName !== '' && isCheck === '1') {
|
|||
|
|
$(this).attr("isCheck", '0')
|
|||
|
|
$(this).find('img').eq(0).attr("src", setRiskIcon(isCheck))
|
|||
|
|
} else if (checkedName !== '' && isCheck === '0') {
|
|||
|
|
$(this).attr("isCheck", '1')
|
|||
|
|
$(this).find('img').eq(0).attr("src", setRiskIcon(isCheck))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
mapSearch();
|
|||
|
|
initMainMap(mapPointList)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 设置风险等级选中样式
|
|||
|
|
function setRiskIcon(value) {
|
|||
|
|
return value === '1' ? '../image/wxz.png' : '../image/xz.png';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function mapSearch() {
|
|||
|
|
let selRiskList = [];
|
|||
|
|
mapPointList.splice(0, mapPointList.length);
|
|||
|
|
$('.check-risk').each(function () {
|
|||
|
|
if ($(this).attr("isCheck") === '1') {
|
|||
|
|
if ($(this).find('p').eq(0).attr("checkedName")) {
|
|||
|
|
selRiskList.push($(this).find('p').eq(0).attr("checkedName"))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
if (selRiskList.length) {
|
|||
|
|
$.each(selRiskList, function (index, item) {
|
|||
|
|
let dataList = mainMapPointList.filter(item2 => {
|
|||
|
|
return item2.riskLevel === item
|
|||
|
|
})
|
|||
|
|
$.each(dataList, function (index3, item3) {
|
|||
|
|
mapPointList.push(item3)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initRiskData() {
|
|||
|
|
const url = 'screen/largeScreen/scIndex/riskStatistics'
|
|||
|
|
loader.get(url, null, function (res) {
|
|||
|
|
const data = res.data
|
|||
|
|
mainMapPointList = data
|
|||
|
|
mapSearch();
|
|||
|
|
initMainMap(mapPointList)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initMap() {
|
|||
|
|
createMap()
|
|||
|
|
// madeBoundary(); //加载区域图
|
|||
|
|
// addMapControl(); // 添加自定义控件
|
|||
|
|
// setMapEvent(); //地图控件设置
|
|||
|
|
// $('#allMap').css({'zIndex': 999, 'backgroundColor': 'transparent'});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置杆塔连线
|
|||
|
|
function setTowerLine(gtList) {
|
|||
|
|
let allOverlayList = terrainMap.getOverlays();
|
|||
|
|
//循坏所有点并清除指定的点
|
|||
|
|
if (allOverlayList.length > 0) {
|
|||
|
|
for (let i = 0; i < allOverlayList.length; i++) {
|
|||
|
|
console.log(allOverlayList[i].toString());
|
|||
|
|
if (allOverlayList[i].toString() == "[object Label]" || allOverlayList[i].toString() == "[object Marker]" || allOverlayList[i].toString() == "[object Polyline]") {
|
|||
|
|
terrainMap.removeOverlay(allOverlayList[i]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var points = [];
|
|||
|
|
for (var i = 0; i < gtList.length; i++) {
|
|||
|
|
var point = new Object();
|
|||
|
|
point.lng = gtList[i].lon;
|
|||
|
|
point.lat = gtList[i].lat;
|
|||
|
|
point.proName = gtList[i].proName;
|
|||
|
|
point.img = '../../../img/map/bdz.png';
|
|||
|
|
point.place = gtList[i].gtName;
|
|||
|
|
points.push(point);
|
|||
|
|
}
|
|||
|
|
console.log(points)
|
|||
|
|
for (var i = 0, len = points.length; i < len; i++) {
|
|||
|
|
//自定义图标
|
|||
|
|
var pointIcon = new BMap.Icon(points[i].img, new BMap.Size(27, 27));
|
|||
|
|
//将标注点转化为地图上的点
|
|||
|
|
var point = new BMap.Point(points[i].lat, points[i].lng);
|
|||
|
|
var infoWindow = new BMap.InfoWindow(points[i].place);
|
|||
|
|
//将点转化为标注点
|
|||
|
|
var marker = new BMap.Marker(point, { icon: pointIcon });
|
|||
|
|
//添加点图层
|
|||
|
|
terrainMap.addOverlay(marker);
|
|||
|
|
(function () {
|
|||
|
|
let title = '<p class="map-p">工程名称：' + points[i].proName + '</p>' +
|
|||
|
|
'<p class="map-p">杆塔名称：' + points[i].place + '</p>' +
|
|||
|
|
'<p class="map-p">经度：' + points[i].lat + '</p>' +
|
|||
|
|
'<p class="map-p">维度：' + points[i].lng + '</p>';
|
|||
|
|
|
|||
|
|
//创建label图层 points[i].place
|
|||
|
|
var label = new BMap.Label(title, { position: point });
|
|||
|
|
marker.addEventListener("mouseover", function () {
|
|||
|
|
terrainMap.addOverlay(label);
|
|||
|
|
});
|
|||
|
|
marker.addEventListener("mouseout", function () {
|
|||
|
|
terrainMap.removeOverlay(label);
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
}
|
|||
|
|
//将所有点连线，连线图层polyline
|
|||
|
|
var line = [];
|
|||
|
|
for (var i = 0; i < points.length; i++) {
|
|||
|
|
console.log(points[i].lng, points[i].lat)
|
|||
|
|
line.push(new BMap.Point(points[i].lat, points[i].lng));
|
|||
|
|
}
|
|||
|
|
line.push(new BMap.Point(points[0].lat, points[0].lng));
|
|||
|
|
console.log(line, 'line')
|
|||
|
|
console.log(line)
|
|||
|
|
var polyline = new BMap.Polyline(line, { strokeColor: '#00aa00', strokeWeight: 2, strokeOpacity: 1 });
|
|||
|
|
terrainMap.addOverlay(polyline);
|
|||
|
|
terrainMap.centerAndZoom(line[0], 10); //设置中心点和缩放层级
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function createMap() {
|
|||
|
|
terrainMap = new BMap.Map("map", {});
|
|||
|
|
terrainMap.centerAndZoom('合肥', 8);
|
|||
|
|
madeBoundary(); //加载区域图
|
|||
|
|
addMapControl(); // 添加自定义控件
|
|||
|
|
setMapEvent(); //地图控件设置
|
|||
|
|
$('#allMap').css({ 'zIndex': 999, 'backgroundColor': 'transparent' });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//设置区域图 start
|
|||
|
|
function madeBoundary() {
|
|||
|
|
let datas = new Array("安徽省-");
|
|||
|
|
var bdary = new BMap.Boundary();
|
|||
|
|
for (var i = 0; i < datas.length; i++) {
|
|||
|
|
getBoundary(datas[i], bdary);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getBoundary(data, bdary) {
|
|||
|
|
data = data.split("-");
|
|||
|
|
bdary.get(data[0], function (rs) { //获取行政区域
|
|||
|
|
var count = rs.boundaries.length; //行政区域的点有多少个
|
|||
|
|
var pointArray = [];
|
|||
|
|
for (var i = 0; i < count; i++) {
|
|||
|
|
var ply = new BMap.Polygon(rs.boundaries[i], {
|
|||
|
|
strokeWeight: 3,
|
|||
|
|
strokeColor: "#1066FC",
|
|||
|
|
fillOpacity: 1,
|
|||
|
|
fillColor: data[1]
|
|||
|
|
}); //建立多边形覆盖物
|
|||
|
|
terrainMap.addOverlay(ply); //添加覆盖物
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//向地图添加控件start
|
|||
|
|
function addMapControl() {
|
|||
|
|
var mystyleJson = [{
|
|||
|
|
"featureType": "road",
|
|||
|
|
"elementType": "all",
|
|||
|
|
"stylers": {
|
|||
|
|
"lightness": 20
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"featureType": "railway",
|
|||
|
|
"elementType": "all",
|
|||
|
|
"stylers": {
|
|||
|
|
"visibility": "off"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"featureType": "local",
|
|||
|
|
"elementType": "labels",
|
|||
|
|
"stylers": {
|
|||
|
|
"visibility": "off"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"featureType": "water",
|
|||
|
|
"elementType": "all",
|
|||
|
|
"stylers": {
|
|||
|
|
"color": "#d1e5ff"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"featureType": "highway",
|
|||
|
|
"elementType": "labels",
|
|||
|
|
"stylers": {}
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
terrainMap.setMapStyle({
|
|||
|
|
styleJson: mystyleJson
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
//地图设置start
|
|||
|
|
function setMapEvent() {
|
|||
|
|
terrainMap.enableScrollWheelZoom();
|
|||
|
|
terrainMap.enableKeyboard();
|
|||
|
|
terrainMap.enableDragging();
|
|||
|
|
terrainMap.enableDoubleClickZoom();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 右侧
|
|||
|
|
*/
|
|||
|
|
// 工程安全隐患分析
|
|||
|
|
function initSafetyAnalysis() {
|
|||
|
|
|
|||
|
|
const url = 'screen/largeScreen/scIndex/potentialSafetyHazard'
|
|||
|
|
loader.get(url, null, function (res) {
|
|||
|
|
let xLabel = []
|
|||
|
|
let dataValue = []
|
|||
|
|
let dataValue1 = []
|
|||
|
|
if(res.code === 200){
|
|||
|
|
res.data.forEach(item => {
|
|||
|
|
const { orgName, planNum, dangerNum } = item
|
|||
|
|
xLabel.push(orgName)
|
|||
|
|
dataValue.push(planNum)
|
|||
|
|
dataValue1.push(dangerNum)
|
|||
|
|
})
|
|||
|
|
}else if(res.code === 401){
|
|||
|
|
loginout(1);
|
|||
|
|
}else {
|
|||
|
|
console.error("工程安全隐患分析:"+res.msg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
let option = {
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
tooltip,
|
|||
|
|
dataZoom: [{
|
|||
|
|
type: "slider",
|
|||
|
|
realtime: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 4,
|
|||
|
|
height: 3,
|
|||
|
|
fillerColor: "#08A0A3", // 滚动条颜色
|
|||
|
|
borderColor: "#08A0A3",
|
|||
|
|
handleSize: 0, // 两边手柄尺寸
|
|||
|
|
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
|||
|
|
top: "90%",
|
|||
|
|
left: '2%',
|
|||
|
|
right: '3%',
|
|||
|
|
moveHandleStyle: {
|
|||
|
|
color: "#08A0A3",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "inside", // 支持内部鼠标滚动平移
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 4,
|
|||
|
|
zoomOnMouseWheel: false, // 关闭滚轮缩放
|
|||
|
|
moveOnMouseWheel: true, // 开启滚轮平移
|
|||
|
|
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
|||
|
|
}],
|
|||
|
|
legend: {
|
|||
|
|
show: true,
|
|||
|
|
top: '15%',
|
|||
|
|
right: '2%',
|
|||
|
|
itemWidth: 20, // 图例标记的图形宽度。
|
|||
|
|
// itemGap: 20, // 图例每项之间的间隔。
|
|||
|
|
itemHeight: 10, // 图例标记的图形高度。
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 14,
|
|||
|
|
padding: [0, 8, 0, 8]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top: '25%',
|
|||
|
|
left: '8%',
|
|||
|
|
right: '3%',
|
|||
|
|
bottom: '20%',
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: true,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#5A6E71',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
//坐标轴刻度标签的相关设置
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
interval: 0,
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var val = "";
|
|||
|
|
// 超过四个字隐藏
|
|||
|
|
if (params.length > 8) {
|
|||
|
|
val = params.substr(0, 6) + '...';
|
|||
|
|
return val;
|
|||
|
|
} else {
|
|||
|
|
return params;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#233653',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: xLabel,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
name: "",
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
padding: [0, 60, 0, 0],
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
// minInterval: 1,
|
|||
|
|
type: 'value',
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#25393B',
|
|||
|
|
type: 'dashed'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#008de7',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '周计划数',
|
|||
|
|
type: 'line',
|
|||
|
|
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|||
|
|
showSymbol: false,
|
|||
|
|
smooth: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 3,
|
|||
|
|
color: '#1ED6FF', // 线条颜色
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#1ED6FF',//拐点颜色
|
|||
|
|
label: {
|
|||
|
|
show: true, //开启显示
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
position: 'top', //在上方显示
|
|||
|
|
formatter: function (res) {
|
|||
|
|
if (res.value) {
|
|||
|
|
return res.value
|
|||
|
|
} else {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
symbolSize: 8, //设定实心点的大小
|
|||
|
|
areaStyle: {
|
|||
|
|
normal: {
|
|||
|
|
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|||
|
|
color: new echarts.graphic.LinearGradient(
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
1,
|
|||
|
|
[
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#1ED6FF30',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.6,
|
|||
|
|
color: '#1ED6FF20',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#1ED6FF10',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
false
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: dataValue,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '隐患数',
|
|||
|
|
type: 'line',
|
|||
|
|
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|||
|
|
showSymbol: false,
|
|||
|
|
smooth: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 3,
|
|||
|
|
color: '#FE533C', // 线条颜色
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#FE533C',//拐点颜色
|
|||
|
|
// borderColor: '#fff600',//拐点边框颜色
|
|||
|
|
// borderWidth: 13//拐点边框大小
|
|||
|
|
label: {
|
|||
|
|
show: true, //开启显示
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
position: 'top', //在上方显示
|
|||
|
|
formatter: function (res) {
|
|||
|
|
if (res.value) {
|
|||
|
|
return res.value
|
|||
|
|
} else {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
symbolSize: 8, //设定实心点的大小
|
|||
|
|
areaStyle: {
|
|||
|
|
normal: {
|
|||
|
|
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#FE533C30',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.6,
|
|||
|
|
color: '#FE533C20',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#ffba0010',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
false
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: dataValue1,
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
let safetyAnalysis = echarts.init(document.getElementById('safety-analysis'));
|
|||
|
|
safetyAnalysis.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
safetyAnalysis.resize();
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 工人效率分析
|
|||
|
|
function initEfficiencyAnalysis() {
|
|||
|
|
let xLabel = []
|
|||
|
|
let data = []
|
|||
|
|
|
|||
|
|
const url = 'screen/largeScreen/scIndex/efficiencyAnalysis'
|
|||
|
|
loader.get(url, null, function (res) {
|
|||
|
|
if(res.code === 200){
|
|||
|
|
res.data.forEach(item => {
|
|||
|
|
const { proName, value } = item
|
|||
|
|
xLabel.push(proName)
|
|||
|
|
data.push(value)
|
|||
|
|
})
|
|||
|
|
}else if(res.code === 401){
|
|||
|
|
loginout(1);
|
|||
|
|
}else{
|
|||
|
|
console.error("工人效率分析:" + res.msg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let option = {
|
|||
|
|
tooltip,
|
|||
|
|
dataZoom: [{
|
|||
|
|
type: "slider",
|
|||
|
|
realtime: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 3,
|
|||
|
|
height: 3,
|
|||
|
|
fillerColor: "#08A0A3", // 滚动条颜色
|
|||
|
|
borderColor: "#08A0A3",
|
|||
|
|
handleSize: 0, // 两边手柄尺寸
|
|||
|
|
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
|||
|
|
top: "90%",
|
|||
|
|
left: '2%',
|
|||
|
|
right: '3%',
|
|||
|
|
moveHandleStyle: {
|
|||
|
|
color: "#08A0A3",
|
|||
|
|
},
|
|||
|
|
}, {
|
|||
|
|
type: "inside", // 支持内部鼠标滚动平移
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 3,
|
|||
|
|
zoomOnMouseWheel: false, // 关闭滚轮缩放
|
|||
|
|
moveOnMouseWheel: true, // 开启滚轮平移
|
|||
|
|
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
|||
|
|
}],
|
|||
|
|
grid: {
|
|||
|
|
top: '25%',
|
|||
|
|
left: '8%',
|
|||
|
|
right: '3%',
|
|||
|
|
bottom: '25%',
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['进度'],
|
|||
|
|
show: true,
|
|||
|
|
top: '15%',
|
|||
|
|
right: '2%',
|
|||
|
|
icon: 'circle',
|
|||
|
|
itemWidth: 10,
|
|||
|
|
itemHeight: 10,
|
|||
|
|
itemGap: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 14,
|
|||
|
|
padding: [0, 8, 0, 8]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: true,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#5A6E71',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
//坐标轴刻度标签的相关设置
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
interval: 0,
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var val = "";
|
|||
|
|
// 超过四个字隐藏
|
|||
|
|
if (params.length > 8) {
|
|||
|
|
val = params.substr(0, 6) + '...';
|
|||
|
|
return val;
|
|||
|
|
} else {
|
|||
|
|
return params;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#233653',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: xLabel,
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
name: "",
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
padding: [0, 60, 0, 0],
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
type: 'value',
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#25393B',
|
|||
|
|
type: 'dashed'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#008de7',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '进度',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#59E1FF',
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
valueFormatter: function (value) {
|
|||
|
|
return value;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: data
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
let deviceAnalysis = echarts.init(document.getElementById('efficiency-analysis'));
|
|||
|
|
deviceAnalysis.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
deviceAnalysis.resize();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
option && deviceAnalysis.setOption(option);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 资源利用
|
|||
|
|
function initResourceRate() {
|
|||
|
|
const url = 'screen/largeScreen/scIndex/resourceUse'
|
|||
|
|
let element = document.getElementsByClassName('resource-rate-item')
|
|||
|
|
const config = [
|
|||
|
|
{
|
|||
|
|
dataTitle: '人员利用率',
|
|||
|
|
dataNum: 50,
|
|||
|
|
dataNumColor: 'rgba(251,221,45,0.8)',
|
|||
|
|
dashboardBgc: 'rgba(254,249,209,0.2)',
|
|||
|
|
dashboardColor: 'rgba(251,221,45,0.8)',
|
|||
|
|
isRate:true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dataTitle: '设备使用率',
|
|||
|
|
dataNum: 25,
|
|||
|
|
dataNumColor: 'rgba(1,194,255,0.8)',
|
|||
|
|
dashboardBgc: 'rgba(45,153,139,0.2)',
|
|||
|
|
dashboardColor: 'rgba(1,194,255,0.8)',
|
|||
|
|
isRate:true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dataTitle: '能源使用率',
|
|||
|
|
dataNum: 15,
|
|||
|
|
dataNumColor: 'rgba(1,255,193,0.8)',
|
|||
|
|
dashboardBgc: 'rgba(45,153,139,0.2)',
|
|||
|
|
dashboardColor: 'rgba(1,255,193,0.8)',
|
|||
|
|
isRate:false
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
loader.get(url, null, function (res) {
|
|||
|
|
const { personnelRate, deviceRate, energyValue } = res.data
|
|||
|
|
config[0].dataNum = personnelRate
|
|||
|
|
config[1].dataNum = deviceRate
|
|||
|
|
config[2].dataNum = energyValue
|
|||
|
|
|
|||
|
|
for (let i = 0; i < element.length; i++) {
|
|||
|
|
let option = getResourceChartOption(config[i])
|
|||
|
|
let resourceRate = echarts.init(element[i]);
|
|||
|
|
resourceRate.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
resourceRate.resize();
|
|||
|
|
});
|
|||
|
|
option && resourceRate.setOption(option);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
function getResourceChartOption(config) {
|
|||
|
|
const { dataTitle, dataNum, dataNumColor, dashboardBgc, dashboardColor } = config
|
|||
|
|
let option = {
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'gauge',
|
|||
|
|
startAngle: 180,
|
|||
|
|
endAngle: 0,
|
|||
|
|
min: 0,
|
|||
|
|
max: 100,
|
|||
|
|
splitNumber: 10,
|
|||
|
|
radius: '80%', // 仪表盘大小
|
|||
|
|
center: ['50%', '75%'],
|
|||
|
|
colorBy: 'value',
|
|||
|
|
itemStyle: {
|
|||
|
|
color: dashboardColor,
|
|||
|
|
shadowColor: dashboardBgc,
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowOffsetX: 2,
|
|||
|
|
shadowOffsetY: 2,
|
|||
|
|
},
|
|||
|
|
progress: {
|
|||
|
|
show: true,
|
|||
|
|
roundCap: false,
|
|||
|
|
width: 10
|
|||
|
|
},
|
|||
|
|
pointer: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 10,
|
|||
|
|
color: [[1, dashboardBgc]]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
show: true,
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 14
|
|||
|
|
},
|
|||
|
|
detail: {
|
|||
|
|
borderColor: '#999',
|
|||
|
|
borderWidth: 0,
|
|||
|
|
width: '60%',
|
|||
|
|
lineHeight: 40,
|
|||
|
|
height: 40,
|
|||
|
|
borderRadius: 0,
|
|||
|
|
offsetCenter: [0, '-25%'],
|
|||
|
|
valueAnimation: true,
|
|||
|
|
formatter: function (value) {
|
|||
|
|
if(config.isRate){
|
|||
|
|
return '{value|' + value + '}{unit|%}';
|
|||
|
|
}else{
|
|||
|
|
return '{value|' + value + '}';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
rich: {
|
|||
|
|
value: {
|
|||
|
|
fontSize: 20,
|
|||
|
|
color: dataNumColor
|
|||
|
|
},
|
|||
|
|
unit: {
|
|||
|
|
fontSize: 15,
|
|||
|
|
color: dataNumColor,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
value: dataNum,
|
|||
|
|
name: dataTitle,
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
return option
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 告警提醒
|
|||
|
|
function initAlarmReminder() {
|
|||
|
|
const url = 'screen/largeScreen/scIndex/alarmReminder'
|
|||
|
|
loader.get(url, null, function (res) {
|
|||
|
|
if(res.code === 200){
|
|||
|
|
res.data.forEach((item, index) => {
|
|||
|
|
const { proName, warningContent } = item
|
|||
|
|
var newRow = `<li>
|
|||
|
|
<div title="${proName}">${proName}</div>
|
|||
|
|
<div title="${warningContent}">${warningContent}</div>
|
|||
|
|
</li>`;
|
|||
|
|
$("#alarm-reminder-table").append(newRow);
|
|||
|
|
})
|
|||
|
|
if (res.data && res.data.length === 0) {
|
|||
|
|
$("#alarm-reminder-table").append('<li class="layout" style="justify-content: center;"><p>无数据</p></li>');
|
|||
|
|
}
|
|||
|
|
}else if(res.code === 401){
|
|||
|
|
loginout(1);
|
|||
|
|
}else {
|
|||
|
|
console.error("告警提醒:"+res.msg);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 标段工程数据 */
|
|||
|
|
function loadBidPro() {
|
|||
|
|
const paramData = '';
|
|||
|
|
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
|
|||
|
|
const url = commonUrl + 'screen/largeScreen/scIndex/getProList?params=' + montageParam;
|
|||
|
|
ajaxRequestGet(url, "GET", true, function () {
|
|||
|
|
}, function (result) {
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
setData(result.data);
|
|||
|
|
} else if (result.code === 500) {
|
|||
|
|
console.error('标段工程数据 :' + result.msg);
|
|||
|
|
setData(null);
|
|||
|
|
} else if (result.code === 401) {
|
|||
|
|
loginout(1);
|
|||
|
|
}
|
|||
|
|
}, function (xhr, status, error) {
|
|||
|
|
errorFn(xhr, status, error)
|
|||
|
|
setData(null);
|
|||
|
|
}, aqEnnable);
|
|||
|
|
|
|||
|
|
function setData(bidCodeList) {
|
|||
|
|
let html = '';
|
|||
|
|
if (bidCodeList && bidCodeList.length > 0) {
|
|||
|
|
$.each(bidCodeList, function (index, item) {
|
|||
|
|
if (index === 0) {
|
|||
|
|
checkBidCode = item.bidCode;
|
|||
|
|
html += '<option value="' + (item.bidCode + "@" + item.proName) + '" checked>' + item.proName + '</option>'
|
|||
|
|
loadBidProTower(item.bidCode, item.proName);
|
|||
|
|
} else {
|
|||
|
|
html += '<option value="' + (item.bidCode + "@" + item.proName) + '">' + item.proName + '</option>'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
$('#bidPro').empty().append(html);
|
|||
|
|
layui.form.render();
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 标段工程杆塔数据 */
|
|||
|
|
function loadBidProTower(bidCode, proName) {
|
|||
|
|
const paramData = 'bidCode=' + bidCode;
|
|||
|
|
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
|
|||
|
|
const url = commonUrl + 'screen/largeScreen/scIndex/getGtList?params=' + montageParam;
|
|||
|
|
ajaxRequestGet(url, "GET", true, function () {
|
|||
|
|
}, function (result) {
|
|||
|
|
setData(result.data);
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
} else if (result.code === 500) {
|
|||
|
|
console.error('标段工程杆塔数据 :' + result.msg);
|
|||
|
|
} else if (result.code === 401) {
|
|||
|
|
loginout(1);
|
|||
|
|
}
|
|||
|
|
}, function (xhr, status, error) {
|
|||
|
|
errorFn(xhr, status, error)
|
|||
|
|
}, aqEnnable);
|
|||
|
|
|
|||
|
|
function setData(data) {
|
|||
|
|
if (data && data.length == 0) {
|
|||
|
|
data = [
|
|||
|
|
{
|
|||
|
|
lat: 118.07138310,
|
|||
|
|
lon: 31.05344367,
|
|||
|
|
proName: proName,
|
|||
|
|
gtName: 'A1',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
lat: 118.07050390,
|
|||
|
|
lon: 31.05571928,
|
|||
|
|
proName: proName,
|
|||
|
|
gtName: 'A2',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
lat: 118.06960770,
|
|||
|
|
lon: 31.05803784,
|
|||
|
|
proName: proName,
|
|||
|
|
gtName: 'A3',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
lat: 118.0684919,
|
|||
|
|
lon: 31.06092441,
|
|||
|
|
proName: proName,
|
|||
|
|
gtName: 'A4',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
lat: 118.07093833,
|
|||
|
|
lon: 31.06312931,
|
|||
|
|
proName: proName,
|
|||
|
|
gtName: 'A5',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
setTimeout(() => {
|
|||
|
|
setTowerLine(data);
|
|||
|
|
}, 2000);
|
|||
|
|
}
|
|||
|
|
}
|