hb_zhgd_screen/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: "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
    );
}