591 lines
19 KiB
JavaScript
591 lines
19 KiB
JavaScript
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 +
|
||
">Id=" +
|
||
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;" ondblclick="onDeviceDoubleClick(\'' +
|
||
item.deviceId +
|
||
"')\" 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 onDeviceDoubleClick(deviceId) {
|
||
openIframeByParamObj(
|
||
"handleData2",
|
||
"组塔监测信息",
|
||
"./dialog.html",
|
||
"72%",
|
||
"95%",
|
||
null,
|
||
1
|
||
);
|
||
}
|
||
|
||
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: [
|
||
{
|
||
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();
|
||
});
|
||
}
|