hb_zhgd_screen/pages/web/js/main.js

1576 lines
54 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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