hb_zhgd_screen/js/pages/towerAssInspect/towerAssInspect.js

443 lines
15 KiB
JavaScript
Raw Normal View History

2025-10-13 09:33:54 +08:00
let layer,table,form;
let myChart = echarts.init(document.getElementById('tendency'));
const bidCode = parent.$('#bidPro').val();
$('#modelIframe').attr('src', '../../pages/3Dglb/index.html');
layui.use(['layer','table','form'], function () {
layer = layui.layer;
table = layui.table;
form = layui.form;
// 标段工程下拉选监听
form.on('select(gt)', function (data) {
getDeviceList(data.value);
});
// 响应成功后的拦截器
$.ajaxSetup({
beforeSend: function(xhr, options) {
var originalSuccess = options.success
options.success = function(data, textStatus, jqXhr) {
data = modifyResponseData(data);
// success(data,textStatus, jqXhr);
originalSuccess.apply(this, arguments)
}
}
})
//杆塔下拉选
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 && result.data[0] !== null) {
$.each(result.data, function (index, item) {
html += '<option value="' + item.gtId + '">' + item.name + '</option>'
})
// 设备列表
getDeviceList(result.data[0].gtId);
}else{
html += '<option value="">无数据</option>'
getDeviceList("");
}
$('#gt').empty().append(html);
layui.form.render();
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}
}, function (xhr) {
layer.msg(xhr, { icon: 2 });
});
}
function getDeviceList(gtId){
const paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId + '&gtId=' + gtId;
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
const url = commonUrl + "screen/largeScreen/towerAssInspect/getDeviceList?params="+montageParam; // url
ajaxRequestGet(url, "get", true, function () {
}, function (result) {
let html = '';
if (result.code === 200) {
if (result.data && result.data.length > 0 && result.data[0] !== null) {
$.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:#71757B;">无数据</div>'
getInfo("")
}
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}
$('#deviceList').empty().append(html);
}, function (xhr , status, error) {
error(xhr, status, error)
}, aqEnnable);
}
//根据点击的设备去查询其他信息
function getInfo(deviceId){
//实时检测
getRealTimeDetection(deviceId);
//实时告警
getRealTimeAlarmList(deviceId)
//历史记录
getHistoryList(deviceId)
}
function getRealTimeDetection(deviceId){
let paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId + '&deviceId=' + deviceId;
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
const url = commonUrl + "screen/largeScreen/towerAssInspect/getRealTimeDetection?params="+montageParam; // url
ajaxRequestGet(url, "get", true, function () {
}, function (result) {
let html = '';
if (result.code === 200) {
if (result.data && result.data.length > 0 && result.data[0] !== null) {
$.each(result.data, function (index, item) {
let modeName = nullToEmpty(item.modeName);
let val = nullToEmpty(item.val);
html +='<div style="cursor: pointer;" class="detection-style detection-incline" onclick="getTrend(\'' +deviceId+ '\', \'' +item.id+ '\')">' ;
html +='<div class="detection-style-font">';
html +='<div class="detection-style-font-top">'+ modeName +'</div>';
html +='<div class="detection-style-font-bot">'+ val +'</div>';
html +='</div>';
html +='</div>';
})
//当日检测变化趋势
getTrend(deviceId,result.data[0].id)
}else{
html += '<div style="color:#71757B;">无数据</div>'
}
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}
$('#detection').empty().append(html);
}, function (xhr, status, error) {
error(xhr, status, error)
setData(null);
}, aqEnnable);
}
function nullToEmpty(name){
if (name === null || name === undefined) {
name = "";
}
return name
}
function getTrend(deviceId,id){
let paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId + '&deviceId=' + deviceId + '&id=' + id;
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
const url = commonUrl + "screen/largeScreen/towerAssInspect/getTrend?params="+montageParam; // url
ajaxRequestGet(url, "GET", true, function () {
}, function (result) {
let html = '';
if (result.code === 200) {
if (result.data && result.data.length > 0 && result.data[0] !== null) {
let xLabel =[];
let dataValue = [];
$.each(result.data, function (index, item) {
xLabel.push(item.time);
dataValue.push(item.changeVal);
});
initEchartsOne(xLabel,dataValue);
}else{
initEchartsOne([],[]);
}
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}
}, function (xhr, status, error) {
error(xhr, status, error)
setData(null);
}, aqEnnable);
}
function getRealTimeAlarmList(deviceId){
const url = commonUrl + "screen/largeScreen/towerAssInspect/getRealTimeAlarmList"; // 建管单位url
table.render({
elem: '#demo1',
height:'full-530',
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',
height:'full-560',
url: url,
skin: 'line',
page: true,
headers:{
decrypt:"decrypt",
"Authorization":token
},
where: {
deviceId:deviceId,
},
cols: [[
{type: 'numbers', title: '序号'}, // 添加序号列
//{field: 'areaName', align: 'center', title: '区域名称'},
{field: 'deviceName', align: 'center', title: '设备名称'},
{field: 'modeName', align: 'center', title: '施工工艺'},
{field: 'changeVal', align: 'center', title: '变化值'},
{field: 'val', align: 'center', title: '检测值'},
{field: 'createTime', align: 'center', title: '检测时间'},
{field: 'isWarn', align: 'center', 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: [
{
2025-10-17 13:55:50 +08:00
name: '采集值',
2025-10-13 09:33:54 +08:00
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();
});
}