441 lines
14 KiB
JavaScript
441 lines
14 KiB
JavaScript
let layer,table,form;
|
||
let myChart = echarts.init(document.getElementById('tendency'));
|
||
const bidCode = parent.$('#bidPro').val();
|
||
|
||
layui.use(['layer','table','form'], function () {
|
||
layer = layui.layer;
|
||
table = layui.table;
|
||
form = layui.form;
|
||
// 标段工程下拉选监听
|
||
form.on('select(gt)', function (data) {
|
||
getDeviceList(data.value);
|
||
});
|
||
//杆塔下拉选
|
||
getGtLists();
|
||
});
|
||
|
||
function getGtLists(){
|
||
const url = commonUrl + "system/sys/select/getGtLists?bidCode="+ bidCode; // 杆塔url
|
||
ajaxRequest(url, "get", null , true, function () {
|
||
}, function (result) {
|
||
if (result.code === 200) {
|
||
let html = '';
|
||
if (result.data && result.data.length > 0) {
|
||
$.each(result.data, function (index, item) {
|
||
html += '<option value="' + item.gtId + '">' + item.name + '</option>'
|
||
})
|
||
}
|
||
$('#gt').empty().append(html);
|
||
layui.form.render();
|
||
// 设备列表
|
||
getDeviceList(result.data[0].gtId);
|
||
// updateSelection();
|
||
} else if (result.code === 500) {
|
||
layer.msg(result.msg, { icon: 2 });
|
||
}
|
||
}, function (xhr) {
|
||
layer.msg(xhr, { icon: 2 });
|
||
});
|
||
}
|
||
|
||
function getDeviceList(gtId){
|
||
const params = {
|
||
"roleCode": roleCode,
|
||
"orgId": orgId,
|
||
"userId": userId,
|
||
"bidCode":bidCode,
|
||
"gtId":gtId
|
||
}
|
||
const url = commonUrl + "screen/largeScreen/towerAssInspect/getDeviceList?roleCode="+roleCode+"&orgId="+orgId+"&userId="+userId+"&bidCode="+bidCode+">Id="+gtId; // 设备列表url
|
||
let encryptStr = encryptCBC(JSON.stringify(params));
|
||
ajaxRequest(url, "get", null, true, function () {
|
||
}, function (result) {
|
||
let html = '';
|
||
if (result.code === 200) {
|
||
if (result.data && result.data.length > 1) {
|
||
$.each(result.data, function (index, item) {
|
||
html += '<div class="device-list-device" style="cursor: pointer;" onclick="getInfo(\'' +item.deviceId+ '\')" >';
|
||
html +='<input value = "'+item.deviceId +'" style="display:none;" />';
|
||
if(item.type=="1"){
|
||
html += '<div class="img-style normal"></div>';
|
||
}else if(item.type=="2"){
|
||
html += '<div class="img-style alarm"></div>';
|
||
}else if(item.type=="0"){
|
||
html += '<div class="img-style connection"></div>';
|
||
}
|
||
html += '<div class="device-list-font">'+ item.deviceName +'</div>';
|
||
html +='</div>';
|
||
})
|
||
getInfo(result.data[0].deviceId)
|
||
}else{
|
||
html += '<div style="color:red;">未找到关联设备</div>'
|
||
}
|
||
} else if (result.code === 500) {
|
||
layer.msg(result.msg, { icon: 2 });
|
||
}
|
||
$('#deviceList').empty().append(html);
|
||
}, function (xhr) {
|
||
layer.msg(xhr, { icon: 2 });
|
||
});
|
||
}
|
||
|
||
//根据点击的设备去查询其他信息
|
||
function getInfo(deviceId){
|
||
//实时检测
|
||
getRealTimeDetection(deviceId);
|
||
|
||
//当日检测变化趋势
|
||
// getTrend(deviceId)
|
||
|
||
//实时告警
|
||
getRealTimeAlarmList(deviceId)
|
||
|
||
//历史记录
|
||
getHistoryList(deviceId)
|
||
}
|
||
|
||
function getRealTimeDetection(deviceId){
|
||
const params = {
|
||
"roleCode": roleCode,
|
||
"orgId": orgId,
|
||
"userId": userId,
|
||
"bidCode":bidCode,
|
||
"deviceId":deviceId
|
||
}
|
||
const url = commonUrl + "screen/largeScreen/towerAssInspect/getRealTimeDetection?roleCode="+roleCode+"&orgId="+orgId+"&userId="+userId+"&bidCode="+bidCode+"&deviceId="+deviceId; // 设备列表url
|
||
let encryptStr = encryptCBC(JSON.stringify(params));
|
||
ajaxRequest(url, "get", null, true, function () {
|
||
}, function (result) {
|
||
let html = '';
|
||
if (result.code === 200) {
|
||
if (result.data && result.data.length > 1) {
|
||
$.each(result.data, function (index, item) {
|
||
if(item.dataType=="1"){
|
||
html +='<div class="detection-style detection-incline">';
|
||
html +='<div class="detection-style-font">';
|
||
html +='<div class="detection-style-font-top">倾斜检测</div>';
|
||
html +='<div class="detection-style-font-bot">倾角'+item.val +'</div>';
|
||
html +='</div>';
|
||
html +='</div>';
|
||
}else if(item.dataType=="2"){
|
||
html +='<div class="detection-style detection-tension">';
|
||
html +='<div class="detection-style-font">';
|
||
html +='<div class="detection-style-font-top">张力检测</div>';
|
||
html +='<div class="detection-style-font-bot">张力'+item.val +'</div>';
|
||
html +='</div>';
|
||
html +='</div>';
|
||
}else if(item.dataType=="3"){
|
||
html +='<div class="detection-style detection-crash">';
|
||
html +='<div class="detection-style-font">';
|
||
html +='<div class="detection-style-font-top">碰撞检测</div>';
|
||
html +='<div class="detection-style-font-bot">碰撞'+item.val +'</div>';
|
||
html +='</div>';
|
||
html +='</div>';
|
||
}
|
||
})
|
||
}else{
|
||
html += '<div style="color:red;">未找到关联设备</div>'
|
||
}
|
||
} else if (result.code === 500) {
|
||
layer.msg(result.msg, { icon: 2 });
|
||
}
|
||
$('#detection').empty().append(html);
|
||
}, function (xhr) {
|
||
layer.msg(xhr, { icon: 2 });
|
||
});
|
||
}
|
||
|
||
function getTrend(deviceId){
|
||
const params = {
|
||
"roleCode": roleCode,
|
||
"orgId": orgId,
|
||
"userId": userId,
|
||
"bidCode":bidCode,
|
||
"deviceId":deviceId
|
||
}
|
||
const url = commonUrl + "screen/largeScreen/towerAssInspect/getTrend?roleCode="+roleCode+"&orgId="+orgId+"&userId="+userId+"&bidCode="+bidCode+"&deviceId="+deviceId; // 设备列表url
|
||
let encryptStr = encryptCBC(JSON.stringify(params));
|
||
ajaxRequest(url, "get", null, true, function () {
|
||
}, function (result) {
|
||
let html = '';
|
||
if (result.code === 200) {
|
||
if (result.data && result.data.length > 1) {
|
||
let xLabel =[];
|
||
let dataValue = [];
|
||
$.each(result.data, function (index, item) {
|
||
xLabel.push(item.time);
|
||
dataValue.push(item.changeVal);
|
||
});
|
||
initEchartsOne(xLabel,dataValue);
|
||
}else{
|
||
html += '<div style="color:red;">未找到关联设备</div>'
|
||
}
|
||
} else if (result.code === 500) {
|
||
layer.msg(result.msg, { icon: 2 });
|
||
}
|
||
$('#deviceList').empty().append(html);
|
||
}, function (xhr) {
|
||
layer.msg(xhr, { icon: 2 });
|
||
});
|
||
}
|
||
|
||
|
||
function getRealTimeAlarmList(deviceId){
|
||
const url = commonUrl + "screen/largeScreen/towerAssInspect/getRealTimeAlarmList"; // 建管单位url
|
||
table.render({
|
||
elem: '#demo1',
|
||
url: url,
|
||
skin: 'line',
|
||
page: true,
|
||
headers:{
|
||
decrypt:"decrypt",
|
||
"Authorization":token
|
||
},
|
||
where: {
|
||
deviceId:deviceId
|
||
},
|
||
cols: [[
|
||
{type: 'numbers', title: '序号'}, // 添加序号列
|
||
{field: 'warnContent', title: '告警内容',align:'center'},
|
||
{field: 'warnTime', title: '预警时间',align:'center'}
|
||
]],
|
||
initComplete: function () {
|
||
// 在表格渲染完成后，重新渲染序号列
|
||
var that = this.elem.next();
|
||
var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
|
||
tool.find("tr").each(function (index, item) {
|
||
$(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
|
||
});
|
||
},
|
||
done:function(res, curr, count, origin){
|
||
console.log(res);
|
||
}
|
||
})
|
||
}
|
||
|
||
function getHistoryList(deviceId){
|
||
const url = commonUrl + "screen/largeScreen/towerAssInspect/getHistoryList"; // 建管单位url
|
||
table.render({
|
||
elem: '#demo2',
|
||
url: url,
|
||
skin: 'line',
|
||
page: true,
|
||
headers:{
|
||
decrypt:"decrypt",
|
||
"Authorization":token
|
||
},
|
||
where: {
|
||
deviceId:deviceId,
|
||
},
|
||
cols: [[
|
||
{type: 'numbers', title: '序号'}, // 添加序号列
|
||
{field: 'areaName', title: '区域名称',align:'center'},
|
||
{field: 'modeName', title: '检测点名称',align:'center'},
|
||
{field: 'val', title: '检测值',align:'center'},
|
||
{field: 'thisChangeVal', title: '本次变化值',align:'center'},
|
||
{field: 'changeVal', title: '累计变化值',align:'center'},
|
||
{field: 'updateTime', title: '检测时间',align:'center'},
|
||
{field: 'isWarn', title: '状态',align:'center'}
|
||
]],
|
||
initComplete: function () {
|
||
// 在表格渲染完成后，重新渲染序号列
|
||
var that = this.elem.next();
|
||
var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
|
||
tool.find("tr").each(function (index, item) {
|
||
$(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
|
||
});
|
||
},
|
||
done:function(res, curr, count, origin){
|
||
console.log(res);
|
||
}
|
||
})
|
||
}
|
||
|
||
/* 变化趋势 */
|
||
function initEchartsOne(xLabel,dataValue) {
|
||
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||
// let xLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
||
// let dataValue = [20, 30, 40, 35, 34, 15, 56, 15, 12, 25, 34, 42];
|
||
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)",
|
||
};
|
||
let option = {
|
||
backgroundColor: 'transparent',
|
||
tooltip,
|
||
legend: {
|
||
show: false,
|
||
},
|
||
grid: {
|
||
top: '25%',
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '15%',
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。数学上的x轴
|
||
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', // 默认是空心圆（中间是白色的），改成实心圆
|
||
smooth: true,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 3,
|
||
// color: '#1ED6FF', // 线条颜色
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: '#0DF0FD',
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: '#00F1D4',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#0EEEFC',
|
||
},
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#1ED6FF',//拐点颜色
|
||
// 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: '#01DDE9',
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: '#086A79',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#0D3134',
|
||
},
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
data: dataValue,
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option, true);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
} |