ah_jjzhgd_webscreen/js/consQuality/consQuality.js

let element, layer, laydate;
const bidCode = 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;

    //告警列表
    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',
        type: 'datetime'
    });
});

//质量检测
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) {
        // error(xhr)
    }, "application/json");
}

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';

            var monitorIconElement = document.createElement('div');
            monitorIconElement.className = 'monitor-icon';

            var pElement = document.createElement('p');
            pElement.textContent = environmentData[j].deviceName;

            if (environmentData[j].status === '802') {
                monitorIconElement.style.backgroundImage = `url('../../img/consQuality/QualityInspection-0.png')`;
            }else if (environmentData[j].status === '803') {
                monitorIconElement.style.backgroundImage = `url('../../img/consQuality/QualityInspection-2.png')`;
            }

            deviceElement.appendChild(monitorIconElement);
            deviceElement.appendChild(pElement);
            groupElement.appendChild(deviceElement);
        }

        // 将每组设备信息容器添加到父元素中
        environmentContainer.appendChild(groupElement);
    }


}

//告警列表
function AlarmList(){
    const url = commonUrl + "screen/largeScreen/constructionQuality/getConstructionAlarm";

    alarmTableIns = table.render({
        elem: '#alarm',
        url: url,
        skin: 'line',
        page: false,
        headers:{
            decrypt:"decrypt",
            "Authorization":token
        },
        where: {
            roleCode: roleCode,
            orgId: orgId,
            userId: userId,
            bidCode: bidCode
        },
        cols: [[
            {field: 'number', width:80,title: '序号', align: 'center', type: 'numbers'},
            {field: 'warningContent', 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(){
    const url = commonUrl + "screen/largeScreen/constructionQuality/getConstructionQualityList";

    qualityInspectionTableIns = table.render({
        elem: '#demo',
        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: 'areaName', align: 'center', title: '区域'},
            {field: 'deviceName', align: 'center', title: '设备名称'},
            {field: 'devicType', align: 'center', title: '施工工艺'},
            {field: 'maxVal', 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);
        },
        page: true, //开启分页
        loading: true, //数据加载中。。。
        limits: [5, 10, 20, 100],
        limit: 7
    })
}

//检测记录对比
function detectionRecord(){
    const url = commonUrl + "screen/largeScreen/constructionQuality/detectionRecord";

    const params = {
        "roleCode": roleCode,
        "orgId": orgId,
        "userId": userId,
        "bidCode": bidCode
    }
    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");
}

//检测记录对比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);
}