实时监测弹框增加

js/pages/index/dialog.js

@@ -0,0 +1,180 @@
+let element, layer, laydate;
+const bidCode = parent.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;
+
+    //下拉选
+    getConstruction();
+    getRegion();
+    //施工质量列表
+    ConstructionQualityList();
+    // laydate.render({
+    //     elem: "#ID-laydate-type-datetime",
+    // });
+
+    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 ConstructionQualityList() {
+    const url = commonUrl + "screen/sj/twoPage/getEnvironmentList";
+
+    console.log("bidCode", bidCode);
+
+    let times = "";
+    let startTime = "";
+    let endTime = "";
+    if ($("#ID-laydate-start-date-1").val() != "") {
+        times =
+            $("#ID-laydate-start-date-1").val() +
+            " - " +
+            $("#ID-laydate-end-date-1").val();
+        startTime = $("#ID-laydate-start-date-1").val();
+        endTime = $("#ID-laydate-end-date-1").val();
+    } else {
+        times = "";
+        startTime = "";
+        endTime = "";
+    }
+
+    console.log("times", times);
+
+    qualityInspectionTableIns = table.render({
+        elem: "#demo",
+        url: url,
+        skin: "line",
+        headers: {
+            decrypt: "decrypt",
+            Authorization: token,
+        },
+        where: {
+            roleCode: roleCode,
+            orgId: orgId,
+            userId: userId,
+            bidCode: bidCode,
+            deviceType: "1902",
+            startTime,
+            endTime,
+            deviceName: $("#deviceName").val(),
+            modelName: $("#modelName").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: "bdName", align: "center", title: "边带名称" },
+                { field: "deviceName", align: "center", title: "设备名称" },
+                { field: "modelName", align: "center", title: "检测属性" },
+                { field: "val", align: "center", title: "检测值" }, // 拼接
+                { field: "createTime", align: "center", title: "检测时间" },
+                { field: "changeVal", 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: 20,
+    });
+}

js/pages/index/indexAjax.js

@@ -118,38 +118,57 @@ function loadRealMonitor(montageParam) {
                         console.log("点击的monitor-data的data-id:", dataId);
 
                         // 您可以在这里添加其他需要执行的逻辑
+                        openIframeByParamObj(
+                            "handleData",
+                            "实时监测信息",
+                            "./dialog.html",
+                            "72%",
+                            "95%",
+                            null,
+                            1
+                        );
+                        // openIframe2(
+                        //     "HISTORY_layui",
+                        //     "历史记录",
+                        //     "../dialog.html",
+                        //     "90%",
+                        //     "90%",
+                        //     {
+                        //         dataId: dataId,
+                        //     }
+                        // );
 
-                        layer.open({
+                        // layer.open({
-                            type: 1,
+                        //     type: 1,
-                            title: "历史记录", //显示标题栏
+                        //     title: "历史记录", //显示标题栏
-                            closeBtn: 1,
+                        //     closeBtn: 1,
-                            area: ["90%", "90%"],
+                        //     area: ["90%", "90%"],
-                            id: "HISTORY_layui", //设定一个id，防止重复弹出
+                        //     id: "HISTORY_layui", //设定一个id，防止重复弹出
-                            resize: false,
+                        //     resize: false,
-                            // btn: ['确定'],
+                        //     // btn: ['确定'],
-                            btnAlign: "c",
+                        //     btnAlign: "c",
-                            moveType: 0, //拖拽模式，0或者1
+                        //     moveType: 0, //拖拽模式，0或者1
-                            skin: "layui-layer-molv",
+                        //     skin: "layui-layer-molv",
-                            content: $("#divDialog"),
+                        //     content: $("#divDialog"),
-                            success: function (layero) {
+                        //     success: function (layero) {
-                                // initHistory();
+                        //         // initHistory();
 
-                                initDialogTable();
+                        //         initDialogTable();
-                                $("th").css("color", "#000");
+                        //         $("th").css("color", "#000");
-                                $(".layui-table").css("color", "#000");
+                        //         $(".layui-table").css("color", "#000");
-                            },
+                        //     },
-                            yes: function (layero, index) {
+                        //     yes: function (layero, index) {
-                                layer.close("HISTORY_layui");
+                        //         layer.close("HISTORY_layui");
-                            },
+                        //     },
-                            cancel: function () {
+                        //     cancel: function () {
-                                // 右上角关闭事件的逻辑
+                        //         // 右上角关闭事件的逻辑
-                                layer.close("HISTORY_layui");
+                        //         layer.close("HISTORY_layui");
-                            },
+                        //     },
-                            end: function () {
+                        //     end: function () {
-                                $("th").css("color", "#fff");
+                        //         $("th").css("color", "#fff");
-                                $(".layui-table").css("color", "#fff");
+                        //         $(".layui-table").css("color", "#fff");
-                            },
+                        //     },
-                        });
+                        // });
                     });
                 // if (item.modelName === '温度') {
                 //     $('#wd').html(item.val ? item.val : 0);

js/publics/openIframe.js

@@ -3,7 +3,12 @@ function openIframe(id, title, content, width, height) {
     let layerIndex = layer.open({
         id: id,
         type: 2,
-        title: ['<div style="border-left: 3px solid #00377A;color:#00377A;font-size:18px;letter-spacing:1px;display: flex;align-items: center;height: 20px;padding: 0 10px;font-weight: bold;">' + title + '</div>', 'font-size:16px;background-color:#f0f0f0;display: flex;align-items: center;'],
+        title: [
+            '<div style="border-left: 3px solid #00377A;color:#00377A;font-size:18px;letter-spacing:1px;display: flex;align-items: center;height: 20px;padding: 0 10px;font-weight: bold;">' +
+                title +
+                "</div>",
+            "font-size:16px;background-color:#f0f0f0;display: flex;align-items: center;",
+        ],
         content: content,
         shade: 0.3,
         shadeClose: false,
@@ -11,7 +16,7 @@ function openIframe(id, title, content, width, height) {
         move: false,
         success: function () {
             let iframeWin = window["layui-layer-iframe" + layerIndex];
-        }
+        },
     });
 }
 
@@ -20,7 +25,12 @@ function openIframe2(id, title, content, width, height, params) {
     let layerIndex = layer.open({
         id: id,
         type: 2,
-        title: ['<div style="border-left: 3px solid #00377A;color:#00377A;font-size:18px;display: flex;letter-spacing:1px;align-items: center;height: 20px;padding: 0 10px;font-weight: bold;">' + title + '</div>', 'font-size:16px;background-color:#f0f0f0;display: flex;align-items: center;'],
+        title: [
+            '<div style="border-left: 3px solid #00377A;color:#00377A;font-size:18px;display: flex;letter-spacing:1px;align-items: center;height: 20px;padding: 0 10px;font-weight: bold;">' +
+                title +
+                "</div>",
+            "font-size:16px;background-color:#f0f0f0;display: flex;align-items: center;",
+        ],
         content: content,
         shade: 0.3,
         shadeClose: false,
@@ -28,7 +38,7 @@ function openIframe2(id, title, content, width, height, params) {
         move: false,
         success: function () {
             let iframeWin = window["layui-layer-iframe" + layerIndex];
-            console.log(params)
+            console.log(params);
             iframeWin.setParams(JSON.stringify(params));
         },
         cancel: function () {
@@ -37,15 +47,23 @@ function openIframe2(id, title, content, width, height, params) {
                 let iframeWin = window["layui-layer-iframe" + layerIndex];
                 iframeWin.clickLogout();
             }
-        }
+        },
     });
 }
 
-function openIframeByParamObj(id, title, content, width, height, paramsObj, type) {
+function openIframeByParamObj(
+    id,
+    title,
+    content,
+    width,
+    height,
+    paramsObj,
+    type
+) {
     let layerIndex = layer.open({
         id: id,
         type: 2,
-        title:false,
+        title: false,
         content: content,
         shade: 0.3,
         anim: 2,
@@ -63,6 +81,6 @@ function openIframeByParamObj(id, title, content, width, height, paramsObj, type
             if (type) {
                 showPlugin();
             }
-        }
+        },
     });
 }

pages/index/dialog.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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/consQuality/consQuality.css">
+    <script src="../../js/publics/sm4.js" type="text/javascript"></script>
+    <script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
+    <script src="../../js/publics/public.js"></script>
+    <script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
+    <script src="../../js/publics/echarts.js"></script>
+    <script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
+    <script src="../../api/commonRequest.js" type="text/javascript"></script>
+    <script src="../../js/publics/aescbc.js"></script>
+    <script src="../../js/pages/index/dialog.js"></script>
+    <script src="../../plugin/watermark.js"></script>
+    <title>施工质量</title>
+</head>
+
+
+<body>
+    <div class="large-frame layout">
+
+        <div style="width: 99%;height: 99%;flex-direction: column;justify-content: space-between; ">
+            <div class="background-img layout-vertical" style="padding: 4% 1% 2% 1%;">
+                <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-input-inline" id="ID-laydate-rangeLinked">
+                                    <input type="text" class="layui-input" id="ID-laydate-type-datetime"
+                                        placeholder="请选择日期">
+
+                                    <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> -->
+
+                                <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="deviceName" placeholder="设备名称"
+                                        maxlength="20">
+                                </div>
+                            </div>
+                            <div class="layui-inline">
+                                <label class="layui-form-label">检测属性：</label>
+                                <div class="layui-input-inline">
+                                    <input type="text" class="layui-input" id="modelName" placeholder="设备名称"
+                                        maxlength="20">
+                                </div>
+                            </div>
+
+                            <div class="layui-inline">
+                                <div class="layui-col-xs12">
+                                    <button class="layui-btn" onclick="ConstructionQualityList()" lay-submit
+                                        lay-filter="demo-table-search">查询</button>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                    <div style="width: 100%;;overflow: auto; min-height: 75%; max-height: 75%;">
+                        <table class="layui-hide" id="demo" lay-filter="test"></table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

pages/index/index.html

@@ -19,6 +19,7 @@
     <script src="../../js/publics/sm3.js"></script>
     <script src="../../api/commonRequest.js"></script>
     <!-- <script src="../../js/publics/shuiYin.js"></script> -->
+    <script src="../../js/publics/openIframe.js" type="text/javascript"></script>
     <script src="../../plugin/watermark.js"></script>
     <title>首页</title>
 </head>
@@ -117,11 +118,10 @@
             <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-form-item" style="margin-top: 5px">
                     <div class="layui-inline">
                         <label class="layui-form-label">日期范围</label>
                         <div class="layui-inline" id="ID-laydate-rangeLinked">
@@ -158,7 +158,7 @@
 
                     <div class="layui-inline">
                         <div class="layui-col-xs12">
-                            <button class="layui-btn" onclick="initHistory()" lay-submit
+                            <button class="layui-btn" onclick="initDialogTable()" lay-submit
                                 lay-filter="demo-table-search">查询</button>
                         </div>
                     </div>
@@ -168,7 +168,6 @@
                 <table id="tableDialog" lay-filter="tableDialog"></table>
             </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>