实时监测增加二级弹框

js/pages/index/indexAjax.js

@@ -1,77 +1,156 @@
+var table;
+const bidCode = parent.$("#bidPro").val();
+layui.use(["layer", "element", "table"], function () {
+    element = layui.element;
+    layer = layui.layer;
+    laydate = layui.laydate;
+    table = layui.table;
+});
 
 /* 工程简介 */
 function loadProBrief(montageParam) {
-    const url = commonUrl + 'screen/largeScreen/xcIndex/getProDetails?params=' + montageParam;
+    const url =
-    ajaxRequestGet(url, "GET", true, function () {
+        commonUrl +
-    }, function (result) {
+        "screen/largeScreen/xcIndex/getProDetails?params=" +
-        if (result.code === 200) {
+        montageParam;
-            setData(result.data.data);
+    ajaxRequestGet(
-        } else if (result.code === 500) {
+        url,
-            console.error('工程简介：' + result.msg);
+        "GET",
+        true,
+        function () {},
+        function (result) {
+            if (result.code === 200) {
+                setData(result.data.data);
+            } else if (result.code === 500) {
+                console.error("工程简介：" + result.msg);
+                setData(null);
+            } else if (result.code === 401) {
+                loginout(1);
+            }
+        },
+        function (xhr, status, error) {
+            errorFn(xhr, status, error);
             setData(null);
-        } else if (result.code === 401) {
+        },
-            loginout(1);
+        aqEnnable
-        }
+    );
-    }, function (xhr, status, error) {
-        errorFn(xhr, status, error)
-        setData(null);
-    }, aqEnnable);
 
     // 项目简介赋值
     function setData(data) {
-        let proBrief = '暂无简介', html = '';
+        let proBrief = "暂无简介",
+            html = "";
         let proImgList = [];
         if (data) {
-            proBrief = data.proBrief ? data.proBrief : '暂无简介'
+            proBrief = data.proBrief ? data.proBrief : "暂无简介";
             proImgList = data.fileData;
         }
         if (proImgList && proImgList.length > 0) {
             $.each(proImgList, function (index, item) {
-                html += '<div><img src="' + item.base64Url + '"></div>'
+                html += '<div><img src="' + item.base64Url + '"></div>';
-            })
+            });
         } else {
-            html += '<div><img src="../../img/back/back.png"></div>'
+            html += '<div><img src="../../img/back/back.png"></div>';
         }
-        $('#img-carousel').empty().append(html);
+        $("#img-carousel").empty().append(html);
-        $('#pro-desc p').html(proBrief);
+        $("#pro-desc p").html(proBrief);
         // 渲染 - 图片轮播
         carousel.render({
-            elem: '#ID-carousel-demo-image',
+            elem: "#ID-carousel-demo-image",
-            width: '900px',
+            width: "900px",
-            height: '360px',
+            height: "360px",
-            interval: 3000
+            interval: 3000,
         });
     }
 }
 
 /* 实时监测 */
 function loadRealMonitor(montageParam) {
-    const url = commonUrl + 'screen/largeScreen/xcIndex/getProJcData?params=' + montageParam;
+    const url =
-    ajaxRequestGet(url, "GET", true, function () {
+        commonUrl +
-    }, function (result) {
+        "screen/largeScreen/xcIndex/getProJcData?params=" +
-        if (result.code === 200) {
+        montageParam;
-            setData(result.data);
+    ajaxRequestGet(
-        } else if (result.code === 500) {
+        url,
-            console.error('实时监测' + result.msg);
+        "GET",
+        true,
+        function () {},
+        function (result) {
+            if (result.code === 200) {
+                setData(result.data);
+            } else if (result.code === 500) {
+                console.error("实时监测" + result.msg);
+                setData(null);
+            } else if (result.code === 401) {
+                loginout(1);
+            }
+        },
+        function (xhr, status, error) {
+            errorFn(xhr, status, error);
             setData(null);
-        } else if (result.code === 401) {
+        },
-            loginout(1);
+        aqEnnable
-        }
+    );
-    }, function (xhr, status, error) {
-        errorFn(xhr, status, error)
-        setData(null);
-    }, aqEnnable);
 
     /* 实时检测赋值 */
     function setData(data) {
-        console.log(data)
+        console.log(data);
         if (data && data.length > 0) {
             $("#real-time-monitor").empty();
             $.each(data, function (index, item) {
-                let div=" <div class=\"layout monitor-data\">  <p><span id=\"wd\">"
+                let div =
-                    +item.val+"</span><span>"+item.unit+"</span></p><p>"+item.modelName+"</p>"+
+                    ' <div class="layout monitor-data" data-id="' +
+                    item.modelName +
+                    '">  <p><span id="wd">' +
+                    item.val +
+                    "</span><span>" +
+                    item.unit +
+                    "</span></p><p>" +
+                    item.modelName +
+                    "</p>" +
                     " <div id='logo' class=\"monitor-icon\"></div>";
                 $("#real-time-monitor").append(div);
+
+                // 为每个monitor-data盒子添加点击事件
+                $("#real-time-monitor .monitor-data")
+                    .off("click")
+                    .on("click", function () {
+                        var dataId = $(this).attr("data-id");
+                        console.log("点击的monitor-data的data-id:", dataId);
+
+                        // 您可以在这里添加其他需要执行的逻辑
+
+                        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();
+
+                                initDialogTable();
+                                $("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");
+                            },
+                        });
+                    });
                 // if (item.modelName === '温度') {
                 //     $('#wd').html(item.val ? item.val : 0);
                 // } else if (item.modelName === '湿度') {
@@ -85,26 +164,110 @@ function loadRealMonitor(montageParam) {
                 // } else if (item.modelName === 'pm10') {
                 //     $('#pm10').html(item.val ? item.val : 0);
                 // }
-            })
+            });
         }
     }
 }
 
+function initDialogTable() {
+    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 loadProRisk(montageParam) {
-    const url = commonUrl + 'screen/largeScreen/xcIndex/getProRisk?params=' + montageParam;
+    const url =
-    ajaxRequestGet(url, "GET", true, function () {
+        commonUrl +
-    }, function (result) {
+        "screen/largeScreen/xcIndex/getProRisk?params=" +
-        if (result.code === 200) {
+        montageParam;
-            setData(result.data);
+    ajaxRequestGet(
-        } else if (result.code === 500) {
+        url,
-            console.error('项目风险' + result.msg);
+        "GET",
-        } else if (result.code === 401) {
+        true,
-            loginout(1);
+        function () {},
-        }
+        function (result) {
-    }, function (xhr, status, error) {
+            if (result.code === 200) {
-        errorFn(xhr, status, error)
+                setData(result.data);
-    }, aqEnnable);
+            } else if (result.code === 500) {
+                console.error("项目风险" + result.msg);
+            } else if (result.code === 401) {
+                loginout(1);
+            }
+        },
+        function (xhr, status, error) {
+            errorFn(xhr, status, error);
+        },
+        aqEnnable
+    );
 
     /* 项目风险赋值 */
     function setData(data) {
@@ -114,25 +277,35 @@ function loadProRisk(montageParam) {
 
 /* 项目进度 */
 function loadProProgress(montageParam) {
-    const url = commonUrl + 'screen/largeScreen/xcIndex/getProcess?params=' + montageParam;
+    const url =
-    ajaxRequestGet(url, "GET", true, function () {
+        commonUrl +
-    }, function (result) {
+        "screen/largeScreen/xcIndex/getProcess?params=" +
-        if (result.code === 200) {
+        montageParam;
-            setData(result.data);
+    ajaxRequestGet(
-        } else if (result.code === 500) {
+        url,
-            console.error('项目进度:' + result.msg);
+        "GET",
-        } else if (result.code === 401) {
+        true,
-            loginout(1);
+        function () {},
-        }
+        function (result) {
-    }, function (xhr, status, error) {
+            if (result.code === 200) {
-        errorFn(xhr, status, error)
+                setData(result.data);
-    }, aqEnnable);
+            } else if (result.code === 500) {
+                console.error("项目进度:" + result.msg);
+            } else if (result.code === 401) {
+                loginout(1);
+            }
+        },
+        function (xhr, status, error) {
+            errorFn(xhr, status, error);
+        },
+        aqEnnable
+    );
 
     /* 项目进度赋值 */
     function setData(data) {
         if (data) {
-            $('#planStartTime').html(data.planStartTime);
+            $("#planStartTime").html(data.planStartTime);
-            $('#planEndTime').html(data.planEndTime);
+            $("#planEndTime").html(data.planEndTime);
             initEchartsTwo(data.value2, data.value);
         }
     }
@@ -140,27 +313,41 @@ function loadProProgress(montageParam) {
 
 /* 项目成本 */
 function loadProCost(montageParam) {
-    const url = commonUrl + 'screen/largeScreen/xcIndex/getProMoney?params=' + montageParam;
+    const url =
-    ajaxRequestGet(url, "GET", true, function () {
+        commonUrl +
-    }, function (result) {
+        "screen/largeScreen/xcIndex/getProMoney?params=" +
-        if (result.code === 200) {
+        montageParam;
-            setData(result.data);
+    ajaxRequestGet(
-        } else if (result.code === 500) {
+        url,
-            console.error('项目成本:' + result.msg);
+        "GET",
-            setData(null);
+        true,
-        } else if (result.code === 401) {
+        function () {},
-            loginout(1);
+        function (result) {
-        }
+            if (result.code === 200) {
-    }, function (xhr, status, error) {
+                setData(result.data);
-        errorFn(xhr, status, error)
+            } else if (result.code === 500) {
-    }, aqEnnable);
+                console.error("项目成本:" + result.msg);
+                setData(null);
+            } else if (result.code === 401) {
+                loginout(1);
+            }
+        },
+        function (xhr, status, error) {
+            errorFn(xhr, status, error);
+        },
+        aqEnnable
+    );
     function setData(data) {
         if (data) {
             let nameList = data.time && data.time.length > 0 ? data.time : [];
             let valueList = data.cost && data.cost.length > 0 ? data.cost : [];
-            initEchartsThree(nameList, valueList,parseFloat(data.proCost.replace('万','')));
+            initEchartsThree(
-        }else{
+                nameList,
-            initEchartsThree([], [],0);
+                valueList,
+                parseFloat(data.proCost.replace("万", ""))
+            );
+        } else {
+            initEchartsThree([], [], 0);
         }
     }
 }

pages/index/index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="../../css/font.css">
     <link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
     <link rel="stylesheet" href="../../css/index/index.css">
+    <link rel="stylesheet" href="../../css/consQuality/consQuality.css">
     <script src="../../js/publics/sm4.js" type="text/javascript"></script>
     <!-- <link rel="stylesheet" href="../../css/shuiYin/shuiYin.css"> -->
     <script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
@@ -22,98 +23,152 @@
     <title>首页</title>
 </head>
 <script type="text/javascript">
-    let text = nickName +"\r\n"+ roleName +"\r\n" + '建设部';
+    let text = nickName + "\r\n" + roleName + "\r\n" + '建设部';
- //   watermark.load({ watermark_txt: text });
+    //   watermark.load({ watermark_txt: text });
 </script>
+
 <body>
-<div id="main-box" class="layout">
+    <div id="main-box" class="layout">
-    <div id="left-box">
+        <div id="left-box">
-        <!-- 项目简介 -->
+            <!-- 项目简介 -->
-        <div id="pro-introduct" class="layout">
+            <div id="pro-introduct" class="layout">
-            <div class="layui-carousel" id="ID-carousel-demo-image">
+                <div class="layui-carousel" id="ID-carousel-demo-image">
-                <div id="img-carousel" carousel-item>
+                    <div id="img-carousel" carousel-item>
+                    </div>
+                </div>
+                <div id="pro-desc">
+                    <p></p>
                 </div>
             </div>
-            <div id="pro-desc">
+        </div>
-                <p></p>
+        <div id="right-box" class="layout">
+            <div id="real-time-monitor" class="layout">
+                <div class="layout monitor-data">
+                    <p><span id="wd">0</span><span>℃</span></p>
+                    <p>温度</p>
+                    <div class="monitor-icon"></div>
+                </div>
+                <div class="layout monitor-data">
+                    <p><span id="sd">0</span><span>%</span></p>
+                    <p>湿度</p>
+                    <div class="monitor-icon"></div>
+                </div>
+                <div class="layout monitor-data">
+                    <p><span id="zs">0</span><span>分贝</span></p>
+                    <p>噪声</p>
+                    <div class="monitor-icon"></div>
+                </div>
+                <div class="layout monitor-data">
+                    <p><span id="gz">0</span><span>kwh</span></p>
+                    <p>光照</p>
+                    <div class="monitor-icon"></div>
+                </div>
+                <div class="layout monitor-data">
+                    <p><span id="pm2">0</span><span>μg/m³</span></p>
+                    <p>PM2.5</p>
+                    <div class="monitor-icon"></div>
+                </div>
+                <div class="layout monitor-data">
+                    <p><span id="pm10">0</span><span>μg/m³</span></p>
+                    <p>PM10</p>
+                    <div class="monitor-icon"></div>
+                </div>
+            </div>
+            <div id="pro-risk">
+                <table>
+                    <!--                    <tr>-->
+                    <!--                        <td colspan="6" id="weekDate">周风险</td>-->
+                    <!--                    </tr>-->
+                    <tr>
+                        <td>名称/风险等级</td>
+                        <td>二级</td>
+                        <td>三级</td>
+                        <td>四级</td>
+                        <td>五级</td>
+                        <td>总数</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <p>本周风险 </p>
+                            <p id="weekDates"> </p>
+                        </td>
+                        <td id="twoRiskNum">0</td>
+                        <td id="threeRiskNum">0</td>
+                        <td id="fourRiskNum">0</td>
+                        <td id="fiveRiskNum">0</td>
+                        <td id="totalRiskNum">0</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <p>当日站班会 </p>
+                            <p id="today"> (2024-06-18) </p>
+                        </td>
+                        <td id="twoClassNum">0</td>
+                        <td id="threeClassNum">0</td>
+                        <td id="fourClassNum">0</td>
+                        <td id="fiveClassNum">0</td>
+                        <td id="totalClassNum">0</td>
+                    </tr>
+                </table>
+            </div>
+            <div id="pro-progress" class="layout">
+                <div id="pro-progress-echarts"></div>
+            </div>
+            <div id="pro-cost"></div>
+        </div>
+    </div>
+
+    <div style="display: none" id="divDialog" class="divDialog">
+        <div style="width: 100%;height: 100%;">
+            <form class="layui-form " onsubmit="return false">
+                <div class="layui-form-item">
+                    <div class="layui-inline">
+                        <label class="layui-form-label">日期范围</label>
+                        <div class="layui-inline" id="ID-laydate-rangeLinked">
+                            <div class="layui-input-inline">
+                                <input type="text" autocomplete="off" id="ID-laydate-start-date-1" readonly
+                                    class="layui-input" placeholder="开始日期">
+                            </div>
+                            <div class="layui-form-mid">-</div>
+                            <div class="layui-input-inline">
+                                <input type="text" autocomplete="off" id="ID-laydate-end-date-1" readonly
+                                    class="layui-input" placeholder="结束日期">
+                            </div>
+                        </div>
+                    </div>
+                    <!-- <div class="layui-inline">
+                    <label class="layui-form-label">时间：</label>
+                    <div class="layui-input-inline">
+                        <input type="text" class="layui-input" id="ID-laydate-type-datetime" placeholder="HH:mm:ss">
+                    </div>
+                </div> -->
+                    <div class="layui-inline">
+                        <label class="layui-form-label">设备名称：</label>
+                        <div class="layui-input-inline">
+                            <input type="text" class="layui-input" id="deviceName" placeholder="设备名称" maxlength="20">
+                        </div>
+                    </div>
+                    <!-- <div class="layui-inline">
+                    <label class="layui-form-label">区域：</label>
+                    <div class="layui-input-inline">
+                        <select lay-search  id="region">
+                        </select>
+                    </div>
+                </div> -->
+
+                    <div class="layui-inline">
+                        <div class="layui-col-xs12">
+                            <button class="layui-btn" onclick="initHistory()" lay-submit
+                                lay-filter="demo-table-search">查询</button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+            <div style="width: 100%;height: 85%;overflow: auto;">
+                <table id="tableDialog" lay-filter="tableDialog"></table>
             </div>
         </div>
     </div>
-    <div id="right-box" class="layout">
-        <div id="real-time-monitor"  class="layout">
-            <div class="layout monitor-data">
-                <p><span id="wd">0</span><span>℃</span></p>
-                <p>温度</p>
-                <div class="monitor-icon"></div>
-            </div>
-            <div class="layout monitor-data">
-                <p><span id="sd">0</span><span>%</span></p>
-                <p>湿度</p>
-                <div class="monitor-icon"></div>
-            </div>
-            <div class="layout monitor-data">
-                <p><span id="zs">0</span><span>分贝</span></p>
-                <p>噪声</p>
-                <div class="monitor-icon"></div>
-            </div>
-            <div class="layout monitor-data">
-                <p><span id="gz">0</span><span>kwh</span></p>
-                <p>光照</p>
-                <div class="monitor-icon"></div>
-            </div>
-            <div class="layout monitor-data">
-                <p><span id="pm2">0</span><span>μg/m³</span></p>
-                <p>PM2.5</p>
-                <div class="monitor-icon"></div>
-            </div>
-            <div class="layout monitor-data">
-                <p><span id="pm10">0</span><span>μg/m³</span></p>
-                <p>PM10</p>
-                <div class="monitor-icon"></div>
-            </div>
-        </div>
-        <div id="pro-risk">
-            <table>
-                <!--                    <tr>-->
-                <!--                        <td colspan="6" id="weekDate">周风险</td>-->
-                <!--                    </tr>-->
-                <tr>
-                    <td>名称/风险等级</td>
-                    <td>二级</td>
-                    <td>三级</td>
-                    <td>四级</td>
-                    <td>五级</td>
-                    <td>总数</td>
-                </tr>
-                <tr>
-                    <td> <p>本周风险 </p>
-                        <p id="weekDates"> </p>
-                    </td>
-                    <td id="twoRiskNum">0</td>
-                    <td id="threeRiskNum">0</td>
-                    <td id="fourRiskNum">0</td>
-                    <td id="fiveRiskNum">0</td>
-                    <td id="totalRiskNum">0</td>
-                </tr>
-                <tr>
-                    <td>
-                        <p>当日站班会 </p>
-                        <p id="today"> (2024-06-18) </p>
-                    </td>
-                    <td id="twoClassNum">0</td>
-                    <td id="threeClassNum">0</td>
-                    <td id="fourClassNum">0</td>
-                    <td id="fiveClassNum">0</td>
-                    <td id="totalClassNum">0</td>
-                </tr>
-            </table>
-        </div>
-        <div id="pro-progress" class="layout">
-            <div id="pro-progress-echarts"></div>
-        </div>
-         <div id="pro-cost"></div>
-    </div>
-</div>
 </body>
 <script src="../../js/pages/index/indexAjax.js" type="text/javascript"></script>
 <script src="../../js/pages/index/indexEcharts.js" type="text/javascript"></script>