ah_jjzhgd_webscreen/js/consQuality/consQuality.js

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());

    //下拉选
    getConstruction();
    getRegion();

    //告警列表
    AlarmList();

    //施工质量列表
    ConstructionQualityList();

    //检测记录对比
    detectionRecord('','A');

    //质量检测
    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=='A' || construction=='B' || construction=='C'){
        $(".echarts-div").css("display","none");
        $("#data-table-div").css("display","block");
        getDataTable(construction);
    }else{
        $(".echarts-div").css("display","block");
        $("#data-table-div").css("display","none");
        getDetectionRecord(params);
    }

}

//施工质量列表
function getDataTable(type){
    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,
            type:type
        },
        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
    })
}


//施工质量列表
function getDataTable(type){
    const url = commonUrl + "screen/largeScreen/constructionQuality/getDevDataList";
    let cols;
    if(type=='A'){
        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: '仪器型号计量编号'}
        ]];
    }   else  if(type=='B' ){
        cols= [[
            {field: 'number', width:80,title: '序号', align: 'center', type: 'numbers', fixed: 'left'},
            {field: 'bidName', align: 'center', title: '工程名称'},
            {field: 'local', align: 'center', title: '检测位置'},
            {field: 'name', align: 'center', title: '检测点名称'},
            {field: 'jcUser', align: 'center', title: '检测人'},
            {field: 'val', align: 'center', title: '是否合格'},
            {field: 'createTime', align: 'center', title: '检测时间'},
        ]];
    } else  if(type=='C' ){
        cols= [[
            {field: 'number', width:80,title: '序号', align: 'center', type: 'numbers', fixed: 'left'},
            {field: 'bidName', align: 'center', title: '工程名称'},
            {field: 'local', align: 'center', title: '检测面'},
            {field: 'name', align: 'center', title: '测点名称'},
            {field: 'jcUser', align: 'center', title: '检测人'},
            {field: 'val', align: 'center', title: '是否合格'},
            {field: 'createTime', align: 'center', title: '检测时间'},
        ]];
    }

    table.render({
        elem: '#data-table',
        url: url,
        skin: 'line',
        headers:{
            decrypt:"decrypt",
            "Authorization":token
        },
        where: {
            roleCode: roleCode,
            orgId: orgId,
            userId: userId,
            bidCode: bidCode,
            type:type
        },
        cols: cols,
        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;
}