1181 lines
40 KiB
JavaScript
1181 lines
40 KiB
JavaScript
const baseUrl = 'http://10.40.92.33:18080/zhgd'
|
||
|
||
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: baseUrl + url,
|
||
type: 'get',
|
||
headers: {
|
||
"authorization": sessionStorage.getItem("zhgd_token")
|
||
},
|
||
data: reqData.params ? reqData : '',
|
||
success: scb,
|
||
});
|
||
}
|
||
}
|
||
|
||
let element, layer, table;
|
||
layui.use(['layer', 'element', 'table'], function () {
|
||
element = layui.element;
|
||
layer = layui.layer;
|
||
table = layui.table;
|
||
|
||
// 工程统计
|
||
initEngineeringStatistic()
|
||
|
||
// 施工质量排名
|
||
initQualityRanking()
|
||
|
||
// 环境监控
|
||
initEnvironmentAnalysis()
|
||
|
||
// 设备状态
|
||
initDeviceStatus()
|
||
|
||
// 安徽省地图
|
||
initMainMap()
|
||
initRiskData()
|
||
|
||
// 工程安全隐患分析
|
||
initSafetyAnalysis()
|
||
|
||
// 工人效率分析
|
||
initEfficiencyAnalysis()
|
||
|
||
// 资源利用及能源使用
|
||
initResourceRate()
|
||
|
||
// 告警提醒
|
||
initAlarmReminder()
|
||
});
|
||
|
||
$('#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) {
|
||
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)
|
||
})
|
||
}
|
||
|
||
// 施工质量排名
|
||
function initQualityRanking() {
|
||
const url = '/screen/largeScreen/scIndex/constrQuality'
|
||
loader.get(url, null, function (res) {
|
||
res.data.forEach((item, index) => {
|
||
const {bidName, teamName, teamLeader, score} = item
|
||
var newRow = `<li>
|
||
<div>${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.length) {
|
||
$('.quality-ranking__empty').hide()
|
||
}
|
||
})
|
||
}
|
||
|
||
// 环境分析
|
||
function initEnvironmentAnalysis() {
|
||
const url = '/screen/largeScreen/scIndex/environmentDetection'
|
||
loader.get(url, null, function (res) {
|
||
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)
|
||
})
|
||
}
|
||
|
||
// 设备状态
|
||
function initDeviceStatus() {
|
||
|
||
let xLabel = []
|
||
let data1 = []
|
||
let data2 = []
|
||
let data3 = []
|
||
|
||
const url = '/screen/largeScreen/scIndex/deviceStatus'
|
||
loader.get(url, null, function (res) {
|
||
|
||
const {allTotalNum, onlineTotalNum, offTotalNum, valueList} = res.data;
|
||
$('#device-status__total').text(allTotalNum)
|
||
$('#device-status__online').text(onlineTotalNum)
|
||
$('#device-status__offline').text(offTotalNum)
|
||
|
||
valueList.forEach(item => {
|
||
const {proName, totalNum, onlineNum, offLineNum} = item
|
||
xLabel.push(proName)
|
||
data1.push(totalNum)
|
||
data2.push(onlineNum)
|
||
data3.push(offLineNum)
|
||
})
|
||
|
||
let option = {
|
||
tooltip,
|
||
dataZoom: [{
|
||
type: "slider",
|
||
realtime: true,
|
||
startValue: 0,
|
||
endValue: 100,
|
||
height: 3,
|
||
fillerColor: "#08A0A3", // 滚动条颜色
|
||
borderColor: "#08A0A3",
|
||
handleSize: 0, // 两边手柄尺寸
|
||
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
||
top: "90%",
|
||
left: '2%',
|
||
right: '3%',
|
||
moveHandleStyle: {
|
||
color: "#08A0A3",
|
||
},
|
||
},
|
||
{
|
||
type: "inside", // 支持内部鼠标滚动平移
|
||
startValue: 0,
|
||
endValue: 100,
|
||
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
|
||
},
|
||
},
|
||
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: '#D299FF',
|
||
},
|
||
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,
|
||
workContent: data[i].workContent,
|
||
workManage: data[i].workManage,
|
||
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.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',
|
||
fontFamily: 'Alibaba PuHuiTi R'
|
||
},
|
||
rotate: -20,
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
}
|
||
},
|
||
aspectScale: 0.8, //长宽比
|
||
roam: false,
|
||
scaleLimit: {
|
||
max: max,
|
||
min: min
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: 'rgba(121,255,255,0.5)',
|
||
borderColor: '#7ad4ff',
|
||
borderWidth: 1,
|
||
shadowColor: 'rgba(53,109,187,0.6)',
|
||
shadowBlur: 100,
|
||
shadowOffsetX: '-20px',
|
||
shadowOffsetY: '100px',
|
||
|
||
},
|
||
emphasis: {
|
||
areaColor: 'rgba(121,255,255,0.5)',
|
||
}
|
||
},
|
||
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/二级.png';
|
||
break;
|
||
case 3:
|
||
return 'image://../image/三级.png';
|
||
break;
|
||
case 4:
|
||
return 'image://../image/四级.png';
|
||
break;
|
||
case 5:
|
||
return 'image://../image/五级.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);
|
||
});
|
||
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/未选择.png' : '../image/选择.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 initSafetyAnalysis() {
|
||
|
||
const url = '/screen/largeScreen/scIndex/potentialSafetyHazard'
|
||
loader.get(url, null, function (res) {
|
||
let xLabel = []
|
||
let dataValue = []
|
||
let dataValue1 = []
|
||
res.data.forEach(item => {
|
||
const {orgName, planNum, dangerNum} = item
|
||
xLabel.push(orgName)
|
||
dataValue.push(planNum)
|
||
dataValue1.push(dangerNum)
|
||
})
|
||
|
||
|
||
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
|
||
},
|
||
},
|
||
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) {
|
||
res.data.forEach(item => {
|
||
const {proName, value} = item
|
||
xLabel.push(proName)
|
||
data.push(value)
|
||
})
|
||
|
||
let option = {
|
||
tooltip,
|
||
dataZoom: [{
|
||
type: "slider",
|
||
realtime: true,
|
||
startValue: 0,
|
||
endValue: 100,
|
||
height: 3,
|
||
fillerColor: "#08A0A3", // 滚动条颜色
|
||
borderColor: "#08A0A3",
|
||
handleSize: 0, // 两边手柄尺寸
|
||
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
||
top: "90%",
|
||
left: '2%',
|
||
right: '3%',
|
||
moveHandleStyle: {
|
||
color: "#08A0A3",
|
||
},
|
||
},
|
||
{
|
||
type: "inside", // 支持内部鼠标滚动平移
|
||
startValue: 0,
|
||
endValue: 100,
|
||
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
|
||
},
|
||
},
|
||
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)'
|
||
},
|
||
{
|
||
dataTitle: '设备使用率',
|
||
dataNum: 25,
|
||
dataNumColor: 'rgba(1,194,255,0.8)',
|
||
dashboardBgc: 'rgba(45,153,139,0.2)',
|
||
dashboardColor: 'rgba(1,194,255,0.8)'
|
||
},
|
||
{
|
||
dataTitle: '能源使用率',
|
||
dataNum: 15,
|
||
dataNumColor: 'rgba(1,255,193,0.8)',
|
||
dashboardBgc: 'rgba(45,153,139,0.2)',
|
||
dashboardColor: 'rgba(1,255,193,0.8)'
|
||
},
|
||
]
|
||
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) {
|
||
return '{value|' + value + '}{unit|%}';
|
||
},
|
||
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) {
|
||
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.length) {
|
||
$('.alarm-reminder__empty').hide()
|
||
}
|
||
})
|
||
} |