bonus
/
hb_zhgd_screen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

组塔检测二级页面增加

This commit is contained in:
BianLzhaoMin 2025-10-17 15:35:18 +08:00
parent c3aa3d859f
commit 7ace046698
5 changed files with 797 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
js/pages/index/dialog.js
View File

@ -149,10 +149,41 @@ function ConstructionQualityList() {
{ field: "bdName", align: "center", title: "边带名称" },
{ field: "deviceName", align: "center", title: "设备名称" },
{ field: "modelName", align: "center", title: "检测属性" },
{ field: "val", align: "center", title: "检测值" }, // 拼接
{
field: "val",
align: "center",
title: "检测值",
templet: function (d) {
// 自定义检测值显示
if (d.val !== null && d.val !== undefined) {
// 根据检测值添加单位或特殊格式
return (
'<span style=" font-weight: bold;">' +
d.val +
" " +
d.unit +
"</span>"
);
}
return '<span style="color: #999;">--</span>';
},
},
{ field: "createTime", align: "center", title: "检测时间" },
{ field: "changeVal", align: "center", title: "变化值" },
{ field: "isWarn", align: "center", title: "是否告警" }, // 拼接
{
field: "isWarn",
align: "center",
title: "是否告警",
templet: function (d) {
// 自定义是否告警显示
if (d.isWarn == 1) {
return '<span style="color: #ff0000; font-weight: bold;">是</span>';
} else if (d.isWarn === 0) {
return '<span style="color: #00ff00;">否</span>';
}
return '<span style="color: #999;">--</span>';
},
},
],
],
initComplete: function () {

210
js/pages/towerAssInspect/dialog.js Normal file
View File

@ -0,0 +1,210 @@
let element, layer, laydate;
const bidCode = parent.parent.$("#bidPro").val();
var table;
var alarmTableIns;
var qualityInspectionTableIns;
layui.use(["layer", "element", "table"], function () {
element = layui.element;
layer = layui.layer;
laydate = layui.laydate;
table = layui.table;
//下拉选
getConstruction();
getRegion();
//施工质量列表
ConstructionQualityList();
// laydate.render({
// elem: "#ID-laydate-type-datetime",
// });
laydate.render({
elem: "#ID-laydate-rangeLinked",
range: ["#ID-laydate-start-date-1", "#ID-laydate-end-date-1"],
rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
});
});
//下拉选
function getConstruction() {
const url = commonUrl + "system/sys/select/getBuildLists"; // 建管单位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.orgId +
'">' +
item.name +
"</option>";
});
}
$("#construction").empty().append(html);
layui.form.render();
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}
},
function (xhr) {
error(xhr);
}
);
}
function getRegion() {
const url = commonUrl + "system/sys/select/getAreaLists"; // 建管单位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.orgId +
'">' +
item.name +
"</option>";
});
}
$("#region").empty().append(html);
layui.form.render();
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}
},
function (xhr) {
error(xhr);
}
);
}
function ConstructionQualityList() {
const url = commonUrl + "screen/sj/twoPage/getEnvironmentList";
console.log("bidCode", bidCode);
let times = "";
let startTime = "";
let endTime = "";
if ($("#ID-laydate-start-date-1").val() != "") {
times =
$("#ID-laydate-start-date-1").val() +
" - " +
$("#ID-laydate-end-date-1").val();
startTime = $("#ID-laydate-start-date-1").val();
endTime = $("#ID-laydate-end-date-1").val();
} else {
times = "";
startTime = "";
endTime = "";
}
console.log("times", times);
qualityInspectionTableIns = table.render({
elem: "#demo",
url: url,
skin: "line",
headers: {
decrypt: "decrypt",
Authorization: token,
},
where: {
roleCode: roleCode,
orgId: orgId,
userId: userId,
bidCode: bidCode,
deviceType: "1901",
startTime,
endTime,
deviceName: $("#deviceName").val(),
modelName: $("#modelName").val(),
// month: $('#ID-laydate-type-datetime').val(),
},
cols: [
[
{
field: "number",
width: 80,
title: "序号",
align: "center",
type: "numbers",
fixed: "left",
},
{ field: "bdName", align: "center", title: "边带名称" },
{ field: "deviceName", align: "center", title: "设备名称" },
{ field: "modelName", align: "center", title: "检测属性" },
{
field: "val",
align: "center",
title: "检测值",
templet: function (d) {
// 自定义检测值显示
if (d.val !== null && d.val !== undefined) {
// 根据检测值添加单位或特殊格式
return (
'<span style=" font-weight: bold;">' +
d.val +
" " +
d.unit +
"</span>"
);
}
return '<span style="color: #999;">--</span>';
},
},
{ field: "createTime", align: "center", title: "检测时间" },
{ field: "changeVal", align: "center", title: "变化值" },
{
field: "isWarn",
align: "center",
title: "是否告警",
templet: function (d) {
// 自定义是否告警显示
if (d.isWarn == 1) {
return '<span style="color: #ff0000; font-weight: bold;">是</span>';
} else if (d.isWarn === 0) {
return '<span style="color: #00ff00;">否</span>';
}
return '<span style="color: #999;">--</span>';
},
},
],
],
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);
},
page: true, //开启分页
loading: true, //数据加载中。。。
limits: [5, 10, 20, 100],
limit: 20,
});
}

733
js/pages/towerAssInspect/towerAssInspect.js
View File

@ -1,297 +1,445 @@
let layer,table,form;
let myChart = echarts.init(document.getElementById('tendency'));
const bidCode = parent.$('#bidPro').val();
let layer, table, form;
let myChart = echarts.init(document.getElementById("tendency"));
const bidCode = parent.$("#bidPro").val();
$('#modelIframe').attr('src', '../../pages/3Dglb/index.html');
$("#modelIframe").attr("src", "../../pages/3Dglb/index.html");
layui.use(['layer','table','form'], function () {
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();
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 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 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;" 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 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 onDeviceDoubleClick(deviceId) {
openIframeByParamObj(
"handleData2",
"组塔监测信息",
"./dialog.html",
"72%",
"95%",
null,
1
);
}
function nullToEmpty(name){
if (name === null || name === undefined) {
name = "";
}
return name
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 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 nullToEmpty(name) {
if (name === null || name === undefined) {
name = "";
}
return name;
}
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 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 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: '是否告警'},
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);
},
});
}
// {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 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];
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',
trigger: "axis",
axisPointer: {
type: 'shadow'
type: "shadow",
},
backgroundColor: 'rgba(75, 79, 82, 0.80)', //设置背景颜色
backgroundColor: "rgba(75, 79, 82, 0.80)", //设置背景颜色
textStyle: {
color: fontColor,
fontFamily: fontFamily
fontFamily: fontFamily,
},
borderColor: "rgba(255,255,255, .5)",
};
let option = {
backgroundColor: 'transparent',
backgroundColor: "transparent",
tooltip,
legend: {
show: false,
},
grid: {
top: '25%',
left: '5%',
right: '5%',
bottom: '15%',
top: "25%",
left: "5%",
right: "5%",
bottom: "15%",
},
xAxis: [
{
type: 'category',
type: "category",
boundaryGap: true,
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: '#5A6E71',
color: "#5A6E71",
},
},
axisLabel: {
@ -299,13 +447,13 @@ function initEchartsOne(xLabel,dataValue) {
textStyle: {
color: fontColor,
fontSize: fontSize,
fontFamily: fontFamily
fontFamily: fontFamily,
},
},
splitLine: {
show: false,
lineStyle: {
color: '#233653',
color: "#233653",
},
},
axisTick: {
@ -321,21 +469,21 @@ function initEchartsOne(xLabel,dataValue) {
color: fontColor,
fontSize: fontSize,
padding: [0, 60, 0, 0],
fontFamily: fontFamily
fontFamily: fontFamily,
},
// minInterval: 1,
type: 'value',
type: "value",
splitLine: {
show: true,
lineStyle: {
color: '#25393B',
type: 'dashed'
color: "#25393B",
type: "dashed",
},
},
axisLine: {
show: false,
lineStyle: {
color: '#008de7',
color: "#008de7",
},
},
axisLabel: {
@ -343,8 +491,8 @@ function initEchartsOne(xLabel,dataValue) {
textStyle: {
color: fontColor,
fontSize: fontSize,
fontFamily: fontFamily
}
fontFamily: fontFamily,
},
},
axisTick: {
show: false,
@ -353,59 +501,58 @@ function initEchartsOne(xLabel,dataValue) {
],
series: [
{
name: '采集值',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
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
),
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',//拐点颜色
color: "#1ED6FF", //拐点颜色
// borderColor: '#fff600',//拐点边框颜色
// borderWidth: 13//拐点边框大小
label: {
show: true, //开启显示
color: fontColor,
fontFamily: fontFamily,
position: 'top', //在上方显示
position: "top", //在上方显示
formatter: function (res) {
if (res.value) {
return res.value
return res.value;
} else {
return 0
return 0;
}
},
},
},
},
symbolSize: 8, //设定实心点的大小
symbolSize: 8, //设定实心点的大小
areaStyle: {
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
@ -417,15 +564,15 @@ function initEchartsOne(xLabel,dataValue) {
[
{
offset: 0,
color: '#01DDE9',
color: "#01DDE9",
},
{
offset: 0.6,
color: '#086A79',
color: "#086A79",
},
{
offset: 1,
color: '#0D3134',
color: "#0D3134",
},
],
false
@ -433,11 +580,11 @@ function initEchartsOne(xLabel,dataValue) {
},
},
data: dataValue,
}
]
}
},
],
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
}
}

94
pages/towerAssInspect/dialog.html Normal file
View File

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../css/font.css">
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
<link rel="stylesheet" href="../../css/consQuality/consQuality.css">
<script src="../../js/publics/sm4.js" type="text/javascript"></script>
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="../../js/publics/public.js"></script>
<script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
<script src="../../js/publics/echarts.js"></script>
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
<script src="../../api/commonRequest.js" type="text/javascript"></script>
<script src="../../js/publics/aescbc.js"></script>
<script src="../../js/pages/towerAssInspect/dialog.js"></script>
<script src="../../plugin/watermark.js"></script>
<title>施工质量</title>
</head>
<body>
<div class="large-frame layout">
<div style="width: 99%;height: 99%;flex-direction: column;justify-content: space-between; ">
<div class="background-img layout-vertical" style="padding: 4% 1% 2% 1%;">
<div style="width: 100%;height: 100%;">
<form class="layui-form " onsubmit="return false">
<div class="layui-form-item">
<div class="layui-inline">
<!-- <label class="layui-form-label">时间：</label>
<div class="layui-input-inline" id="ID-laydate-rangeLinked">
<input type="text" class="layui-input" id="ID-laydate-type-datetime"
placeholder="请选择日期">
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="ID-laydate-start-date-1" readonly
class="layui-input" placeholder="开始日期">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="ID-laydate-end-date-1" readonly
class="layui-input" placeholder="结束日期">
</div>
</div> -->
<label class="layui-form-label">日期范围</label>
<div class="layui-inline" id="ID-laydate-rangeLinked">
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="ID-laydate-start-date-1" readonly
class="layui-input" placeholder="开始日期">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="ID-laydate-end-date-1" readonly
class="layui-input" placeholder="结束日期">
</div>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">设备名称：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="deviceName" placeholder="设备名称"
maxlength="20">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">检测属性：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="modelName" placeholder="设备名称"
maxlength="20">
</div>
</div>
<div class="layui-inline">
<div class="layui-col-xs12">
<button class="layui-btn" onclick="ConstructionQualityList()" lay-submit
lay-filter="demo-table-search">查询</button>
</div>
</div>
</div>
</form>
<div style="width: 100%;;overflow: auto; min-height: 75%; max-height: 75%;">
<table class="layui-hide" id="demo" lay-filter="test"></table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

36
pages/towerAssInspect/towerAssInspect.html
View File

@ -1,11 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../css/font.css">
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
<link rel="stylesheet" href="../../css/coreTable.css"/>
<link rel="stylesheet" href="../../css/coreTable.css" />
<script src="../../js/publics/sm4.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../css/towerAssInspect/towerAssInspect.css">
<link rel="stylesheet" href="../../plugin/toolTip/mTips.css">
@ -18,22 +19,24 @@
<script src="../../js/publics/echarts.js"></script>
<script src="../../js/publics/shuiYin.js"></script>
<script src="../../plugin/watermark.js"></script>
<title>组塔检测</title>
<script src="../../js/publics/openIframe.js" type="text/javascript"></script>
<title>组塔检测</title>
</head>
<script type="text/javascript">
let text = nickName +"\r\n"+ roleName +"\r\n" + '建设部';
watermark.load({ watermark_txt: text });
let text = nickName + "\r\n" + roleName + "\r\n" + '建设部';
watermark.load({ watermark_txt: text });
</script>
<body>
<div class="layout main-box">
<div class="layout main-box">
<div class="top-box">
<!-- 基塔模型 -->
<div class="top-box-left">
<div class="img-style tower-model">
<div style="height: 10%;width: 100%;">
<form class="layui-form layout">
<select class="layui-form" lay-search id="gt" lay-filter="gt">
</select>
<select class="layui-form" lay-search id="gt" lay-filter="gt">
</select>
</form>
</div>
<div class="img-style model">
@ -41,12 +44,12 @@
</div>
</div>
</div>
<!-- 中间的 -->
<div class="top-box-center">
<!-- 设备列表 -->
<div class="top-box-center-top">
<div class="img-style device-list" >
<div class="img-style device-list">
<div class="device-list-top">
<div class="alarm-title"></div> 告警
<div class="normal-title"></div> 正常
@ -80,22 +83,22 @@
</div> -->
</div>
</div>
</div>
<!-- 变化趋势 -->
<div class="top-box-right">
<div class="img-style tendency" >
<div class="img-style tendency">
<div id="tendency" style="height: 100%;width: 100%;"></div>
</div>
</div>
</div>
<div class="bot-box">
<!-- 实施告警 -->
<div class="bot-box-left">
<div class="img-style real">
<div class="right-down-right">
<table id="demo1" lay-filter="test"></table>
<table id="demo1" lay-filter="test"></table>
</div>
</div>
</div>
@ -103,12 +106,13 @@
<div class="bot-box-right">
<div class="img-style history">
<div class="right-down-right">
<table id="demo2" lay-filter="test"></table>
<table id="demo2" lay-filter="test"></table>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../js/pages/towerAssInspect/towerAssInspect.js" type="text/javascript"></script>
<script src="../../js/pages/towerAssInspect/towerAssInspect.js" type="text/javascript"></script>
</html>