607 lines
20 KiB
JavaScript
607 lines
20 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:"layui-layer-molv",
|
||
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,
|
||
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: 7
|
||
})
|
||
}
|
||
//检测记录对比
|
||
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;
|
||
}
|
||
|
||
|
||
|