729 lines
23 KiB
JavaScript
729 lines
23 KiB
JavaScript
let element, layer, laydate;
|
||
const bidCode = parent.$("#bidPro").val();
|
||
var table;
|
||
var alarmTableIns;
|
||
var qualityInspectionTableIns;
|
||
var historyTableIns;
|
||
let thePileFoundationIsMadeIntoHoles = 1906002; //桩基成孔
|
||
let groundAcceptance = 1906003; //地面验收
|
||
let concretePouring = 1906004; //混凝土浇筑
|
||
layui.use(["layer", "element", "table"], function () {
|
||
element = layui.element;
|
||
layer = layui.layer;
|
||
laydate = layui.laydate;
|
||
table = layui.table;
|
||
|
||
document.getElementById("myButton").addEventListener("click", function () {
|
||
// window.location.href = "../consQuality/consQualityList.html";
|
||
layer.open({
|
||
type: 1,
|
||
title: "历史记录", //显示标题栏
|
||
closeBtn: 1,
|
||
area: ["90%", "90%"],
|
||
id: "HISTORY_layui", //设定一个id，防止重复弹出
|
||
resize: false,
|
||
// btn: ['确定'],
|
||
btnAlign: "c",
|
||
moveType: 0, //拖拽模式，0或者1
|
||
skin: "my-skin child-skin ",
|
||
content: $("#divDialog"),
|
||
success: function (layero) {
|
||
initHistory();
|
||
$("th").css("color", "#000");
|
||
$(".layui-table").css("color", "#000");
|
||
},
|
||
yes: function (layero, index) {
|
||
layer.close("HISTORY_layui");
|
||
},
|
||
cancel: function () {
|
||
// 右上角关闭事件的逻辑
|
||
layer.close("HISTORY_layui");
|
||
},
|
||
end: function () {
|
||
$("th").css("color", "#fff");
|
||
$(".layui-table").css("color", "#fff");
|
||
},
|
||
});
|
||
});
|
||
|
||
// $('#ID-laydate-type-datetime').val(getNowDay());
|
||
// 响应成功后的拦截器
|
||
$.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);
|
||
};
|
||
},
|
||
});
|
||
//下拉选
|
||
getConstruction();
|
||
getRegion();
|
||
|
||
//告警列表
|
||
AlarmList();
|
||
|
||
//施工质量列表
|
||
ConstructionQualityList();
|
||
|
||
//检测记录对比
|
||
detectionRecord("", "");
|
||
|
||
//质量检测
|
||
qualityInspectionApi();
|
||
list = {};
|
||
var month = [];
|
||
var list1 = [];
|
||
var list2 = [];
|
||
|
||
for (let i = 0; i < list.length; i++) {}
|
||
|
||
// laydate.render({
|
||
// elem: '#ID-laydate-type-datetime',
|
||
// value: getNowDay() // 设置默认值为当天
|
||
// });
|
||
|
||
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 qualityInspectionApi() {
|
||
const url =
|
||
commonUrl + "screen/largeScreen/constructionQuality/qualityInspection";
|
||
const params = {
|
||
roleCode: roleCode,
|
||
orgId: orgId,
|
||
userId: userId,
|
||
bidCode: bidCode,
|
||
};
|
||
let encryptStr = encryptCBC(JSON.stringify(params));
|
||
ajaxRequest(
|
||
url,
|
||
"POST",
|
||
encryptStr,
|
||
true,
|
||
function () {},
|
||
function (result) {
|
||
console.log(result);
|
||
if (result.code === 200) {
|
||
qualityInspection(result.data);
|
||
} else if (result.code === 500) {
|
||
layer.msg(result.msg, { icon: 2 });
|
||
} else if (result.code === 401) {
|
||
loginout(1);
|
||
}
|
||
},
|
||
function (xhr, status, error) {
|
||
error(xhr, status, error);
|
||
},
|
||
"application/json",
|
||
aqEnnable
|
||
);
|
||
}
|
||
|
||
function qualityInspection(environmentData) {
|
||
// 获取存放设备的父元素
|
||
var environmentContainer = document.querySelector(".environment");
|
||
// 遍历数据，生成设备元素并添加到页面中
|
||
for (var i = 0; i < environmentData.length; i += 3) {
|
||
// 创建一个新的 div 作为一组设备信息的容器
|
||
var groupElement = document.createElement("div");
|
||
groupElement.style.width = "100%";
|
||
groupElement.style.height = "50%";
|
||
groupElement.className = "layout";
|
||
|
||
// 将每组四个设备信息添加到容器中
|
||
for (var j = i; j < i + 3 && j < environmentData.length; j++) {
|
||
var deviceElement = document.createElement("div");
|
||
deviceElement.className = "monitor-data layout";
|
||
deviceElement.id = environmentData[j].deviceId;
|
||
var monitorIconElement = document.createElement("div");
|
||
monitorIconElement.className = "monitor-icon";
|
||
var pElement = document.createElement("p");
|
||
pElement.textContent = environmentData[j].deviceName;
|
||
|
||
if (environmentData[j].status === "0") {
|
||
monitorIconElement.style.backgroundImage = `url('../../img/consQuality/QualityInspection-0.png')`;
|
||
} else if (environmentData[j].status === "1") {
|
||
monitorIconElement.style.backgroundImage = `url('../../img/consQuality/QualityInspection-2.png')`;
|
||
} else if (environmentData[j].status === "2") {
|
||
monitorIconElement.style.backgroundImage = `url('../../img/consQuality/QualityInspection-1.png')`;
|
||
}
|
||
|
||
deviceElement.appendChild(monitorIconElement);
|
||
deviceElement.appendChild(pElement);
|
||
groupElement.appendChild(deviceElement);
|
||
// 添加点击事件监听器
|
||
deviceElement.addEventListener("click", function (event) {
|
||
var clickedDeviceId = event.currentTarget.id;
|
||
AlarmList(clickedDeviceId);
|
||
ConstructionQualityList(clickedDeviceId);
|
||
console.log(clickedDeviceId);
|
||
});
|
||
}
|
||
|
||
// 将每组设备信息容器添加到父元素中
|
||
environmentContainer.appendChild(groupElement);
|
||
}
|
||
}
|
||
|
||
//告警列表
|
||
function AlarmList(deviceId) {
|
||
const dId = deviceId || "";
|
||
const url =
|
||
commonUrl +
|
||
"screen/largeScreen/constructionQuality/getConstructionAlarm";
|
||
alarmTableIns = table.render({
|
||
elem: "#alarm",
|
||
url: url,
|
||
skin: "line",
|
||
page: false,
|
||
headers: {
|
||
decrypt: "decrypt",
|
||
Authorization: token,
|
||
},
|
||
where: {
|
||
deviceId: dId,
|
||
roleCode: roleCode,
|
||
orgId: orgId,
|
||
userId: userId,
|
||
bidCode: bidCode,
|
||
},
|
||
cols: [
|
||
[
|
||
// {field: 'number', width:80,title: '序号', align: 'center', type: 'numbers'},
|
||
{ field: "warningContent", align: "center", title: "告警内容" },
|
||
{ field: "warnTime", align: "center", title: "告警时间" },
|
||
],
|
||
],
|
||
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 ConstructionQualityList(deviceId) {
|
||
const dId = deviceId || "";
|
||
const url =
|
||
commonUrl +
|
||
"screen/largeScreen/constructionQuality/getConstructionQualityList";
|
||
|
||
qualityInspectionTableIns = table.render({
|
||
elem: "#demo",
|
||
url: url,
|
||
skin: "line",
|
||
headers: {
|
||
decrypt: "decrypt",
|
||
Authorization: token,
|
||
},
|
||
where: {
|
||
deviceId: dId,
|
||
roleCode: roleCode,
|
||
orgId: orgId,
|
||
userId: userId,
|
||
bidCode: bidCode,
|
||
moduleName: $("#moduleName").val(),
|
||
// month: $('#ID-laydate-type-datetime').val(),
|
||
},
|
||
cols: [
|
||
[
|
||
{
|
||
field: "number",
|
||
width: 80,
|
||
title: "序号",
|
||
align: "center",
|
||
type: "numbers",
|
||
fixed: "left",
|
||
},
|
||
// {field: 'areaName', align: 'center', title: '区域名称'},
|
||
{ field: "deviceName", align: "center", title: "设备名称" },
|
||
{ field: "moduleName", align: "center", title: "施工工艺" },
|
||
{ field: "changeVal", align: "center", title: "变化值" },
|
||
{ field: "val", align: "center", title: "检测值" },
|
||
{ field: "createTime", align: "center", title: "检测时间" },
|
||
{ field: "isWarn", align: "center", title: "是否告警" },
|
||
],
|
||
],
|
||
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);
|
||
$("[data-field='isWarn']")
|
||
.children()
|
||
.each(function () {
|
||
if ($(this).text() == "0") {
|
||
$(this).text("未告警");
|
||
} else if ($(this).text() == "1") {
|
||
$(this).text("告警");
|
||
}
|
||
});
|
||
},
|
||
page: true, //开启分页
|
||
loading: true, //数据加载中。。。
|
||
limits: [5, 10, 20, 100],
|
||
limit: 7,
|
||
});
|
||
}
|
||
//渲染历史记录table
|
||
function initHistory() {
|
||
const url =
|
||
commonUrl + "screen/largeScreen/constructionQuality/getHistoryList";
|
||
let times = "";
|
||
if ($("#ID-laydate-start-date-1").val() != "") {
|
||
times =
|
||
$("#ID-laydate-start-date-1").val() +
|
||
" - " +
|
||
$("#ID-laydate-end-date-1").val();
|
||
} else {
|
||
times = "";
|
||
}
|
||
historyTableIns = table.render({
|
||
elem: "#tableDialog",
|
||
url: url,
|
||
// skin: 'line',
|
||
page: true,
|
||
height: "full-550",
|
||
headers: {
|
||
decrypt: "decrypt",
|
||
Authorization: token,
|
||
},
|
||
where: {
|
||
roleCode: roleCode,
|
||
orgId: orgId,
|
||
userId: userId,
|
||
bidCode: bidCode,
|
||
deviceName: $("#deviceName").val(),
|
||
times: times,
|
||
},
|
||
cols: [
|
||
[
|
||
{ type: "numbers", title: "序号" }, // 添加序号列
|
||
// {field: 'areaName', align: 'center', title: '区域名称'},
|
||
{ field: "deviceName", align: "center", title: "设备名称" },
|
||
{ field: "moduleName", align: "center", title: "施工工艺" },
|
||
{ field: "changeVal", align: "center", title: "变化值" },
|
||
{ field: "val", align: "center", title: "检测值" },
|
||
{ field: "createTime", align: "center", title: "检测时间" },
|
||
// {field: 'isWarn', align: 'center', title: '是否告警'},
|
||
],
|
||
],
|
||
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);
|
||
$("[data-field='isWarn']")
|
||
.children()
|
||
.each(function () {
|
||
if ($(this).text() == "0") {
|
||
$(this).text("未告警");
|
||
} else if ($(this).text() == "1") {
|
||
$(this).text("告警");
|
||
}
|
||
});
|
||
},
|
||
page: true, //开启分页
|
||
loading: true, //数据加载中。。。
|
||
limits: [5, 10, 20, 100],
|
||
limit: 20,
|
||
});
|
||
}
|
||
|
||
//检测记录对比
|
||
function detectionRecord(button, construction) {
|
||
if (button !== "") {
|
||
let buttons = document.getElementsByClassName("button-style");
|
||
let isSelected = button.style.color === "rgb(81, 170, 209)";
|
||
for (let i = 0; i < buttons.length; i++) {
|
||
buttons[i].style.border = "";
|
||
buttons[i].style.color = "";
|
||
}
|
||
if (!isSelected) {
|
||
button.style.border = "1px solid #51AAD1";
|
||
button.style.color = "#51AAD1";
|
||
} else {
|
||
button.style.border = "";
|
||
button.style.color = "";
|
||
detectionRecord("", "");
|
||
}
|
||
}
|
||
const params = {
|
||
roleCode: roleCode,
|
||
orgId: orgId,
|
||
userId: userId,
|
||
bidCode: bidCode,
|
||
construction: construction,
|
||
};
|
||
console.log(construction);
|
||
console.log(construction == "table");
|
||
if (construction == "table") {
|
||
$(".echarts-div").css("display", "none");
|
||
$("#data-table-div").css("display", "block");
|
||
getDataTable();
|
||
} else {
|
||
$(".echarts-div").css("display", "block");
|
||
$("#data-table-div").css("display", "none");
|
||
getDetectionRecord(params);
|
||
}
|
||
}
|
||
|
||
//施工质量列表
|
||
function getDataTable() {
|
||
const url =
|
||
commonUrl + "screen/largeScreen/constructionQuality/getDevDataList";
|
||
table.render({
|
||
elem: "#data-table",
|
||
url: url,
|
||
skin: "line",
|
||
headers: {
|
||
decrypt: "decrypt",
|
||
Authorization: token,
|
||
},
|
||
where: {
|
||
roleCode: roleCode,
|
||
orgId: orgId,
|
||
userId: userId,
|
||
bidCode: bidCode,
|
||
},
|
||
cols: [
|
||
[
|
||
{
|
||
field: "number",
|
||
width: 80,
|
||
title: "序号",
|
||
align: "center",
|
||
type: "numbers",
|
||
fixed: "left",
|
||
},
|
||
{ field: "name", align: "center", title: "区域名称" },
|
||
{ field: "bidName", align: "center", title: "工程名称" },
|
||
{ field: "val", align: "center", title: "本次沉降" },
|
||
{ field: "hisVal", align: "center", title: "累计沉降" },
|
||
{ field: "createTime", align: "center", title: "检测时间" },
|
||
{ field: "jcUser", align: "center", title: "检测人" },
|
||
{ field: "jhUser", align: "center", title: "校核人" },
|
||
{
|
||
field: "devCode",
|
||
align: "center",
|
||
title: "仪器型号计量编号",
|
||
},
|
||
],
|
||
],
|
||
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);
|
||
});
|
||
},
|
||
page: true, //开启分页
|
||
loading: true, //数据加载中。。。
|
||
limits: [5, 10, 20, 100],
|
||
limit: 7,
|
||
});
|
||
}
|
||
|
||
//查询echars
|
||
function getDetectionRecord(params) {
|
||
const url =
|
||
commonUrl + "screen/largeScreen/constructionQuality/detectionRecord";
|
||
let encryptStr = encryptCBC(JSON.stringify(params));
|
||
ajaxRequest(
|
||
url,
|
||
"POST",
|
||
encryptStr,
|
||
true,
|
||
function () {},
|
||
function (result) {
|
||
if (result.code === 200) {
|
||
let resultData = result.data;
|
||
let extractedData = {
|
||
months: [],
|
||
qualificationNumber: [],
|
||
detectionNumbers: [],
|
||
};
|
||
resultData.forEach((data) => {
|
||
extractedData.months.push(data.month);
|
||
extractedData.detectionNumbers.push(
|
||
parseInt(data.detectionNumber)
|
||
);
|
||
extractedData.qualificationNumber.push(
|
||
parseInt(data.qualificationNumber)
|
||
);
|
||
});
|
||
|
||
console.log(extractedData);
|
||
detectionRecordEcharts(extractedData);
|
||
} else if (result.code === 500) {
|
||
layer.msg(result.msg, { icon: 2 });
|
||
} else if (result.code === 401) {
|
||
loginout(1);
|
||
}
|
||
},
|
||
function (xhr) {
|
||
// error(xhr)
|
||
},
|
||
"application/json",
|
||
aqEnnable
|
||
);
|
||
}
|
||
|
||
//检测记录对比echarts图表
|
||
function detectionRecordEcharts(extractedData) {
|
||
var myChart = echarts.init(document.getElementById("dome"));
|
||
option = {
|
||
backgroundColor: "transparent",
|
||
legend: {
|
||
data: ["检测次数", "合格次数"],
|
||
icon: "circle",
|
||
right: "3%",
|
||
textStyle: {
|
||
color: "white",
|
||
fontSize: 12,
|
||
},
|
||
itemWidth: 12, // 设置宽度
|
||
itemHeight: 16, // 设置高度
|
||
itemGap: 12, // 设置间距
|
||
},
|
||
grid: {
|
||
left: "30",
|
||
right: "0",
|
||
top: "40",
|
||
bottom: "20",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "item",
|
||
crossStyle: {
|
||
color: "#999",
|
||
},
|
||
},
|
||
confine: true,
|
||
formatter: function (params) {
|
||
// console.log(params)
|
||
var html = params[0].name + "月";
|
||
for (var i = 0; i < params.length; i++) {
|
||
html +=
|
||
"<br />" +
|
||
params[i].marker +
|
||
params[i].seriesName +
|
||
"：" +
|
||
params[i].value;
|
||
}
|
||
|
||
return html;
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
name: "月",
|
||
data: extractedData.months,
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#333",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: "{value}月",
|
||
show: true,
|
||
color: "#eee",
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
splitNumber: 5,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#333",
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "检测次数",
|
||
type: "bar",
|
||
symbol: "bar",
|
||
barWidth: 20,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#51AAD1",
|
||
},
|
||
},
|
||
data: extractedData.detectionNumbers,
|
||
},
|
||
{
|
||
name: "合格次数",
|
||
type: "bar",
|
||
symbol: "circle",
|
||
barWidth: 20,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#70D6B5",
|
||
},
|
||
},
|
||
data: extractedData.qualificationNumber,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
function getNowDay() {
|
||
var time = new Date();
|
||
var year = time.getFullYear();
|
||
var month =
|
||
time.getMonth() + 1 >= 10
|
||
? time.getMonth() + 1
|
||
: "0" + (time.getMonth() + 1);
|
||
var day = time.getDate() >= 10 ? time.getDate() : "0" + time.getDate();
|
||
return year + "-" + month + "-" + day;
|
||
}
|
||
|
||
function onDBLClick(deviceType) {
|
||
openIframeByParamObj(
|
||
"handleData4",
|
||
"边坡位移监测信息",
|
||
"../../pages/operEnvironment/dialog.html",
|
||
"72%",
|
||
"95%",
|
||
{ deviceType },
|
||
1
|
||
);
|
||
}
|