修改布局和菜单bug

api/request.js

@@ -1,9 +1,9 @@
-// 动态获取url
-const BASEURL = getRequestPrefix();
+// // 动态获取url
+// const BASEURL = getRequestPrefix();
 
-// 动态获取用户名密码
-const LOGIN_NAME = sessionStorage.getItem('V_LOGINNAME');
-const LOGIN_PASSWORD = sessionStorage.getItem('V_PASSWORD');
+// // 动态获取用户名密码
+// const LOGIN_NAME = sessionStorage.getItem('V_LOGINNAME');
+// const LOGIN_PASSWORD = sessionStorage.getItem('V_PASSWORD');
 
 
 
@@ -14,12 +14,12 @@ const LOGIN_PASSWORD = sessionStorage.getItem('V_PASSWORD');
 // //最新测试url
 // // const BASEURL = "http://121.40.217.77:8080/Device_Manager/";
 
-// //本地调试url
-// const BASEURL = "http://127.0.0.1:8080/Device_Manager/";
+//本地调试url
+const BASEURL = "http://127.0.0.1:8080/Device_Manager/";
 
-// // 用户名、 密码
-// const LOGIN_NAME = "admin";
-// const LOGIN_PASSWORD = "e10adc3949ba59abbe56e057f20f883e";
+// 用户名、 密码
+const LOGIN_NAME = "admin";
+const LOGIN_PASSWORD = "e10adc3949ba59abbe56e057f20f883e";
 
 
 

css/common.css

@@ -154,7 +154,7 @@ a.button {
         font-size: 42px !important
     }
     body {
-        background-size: 100% 100%;
+        /* background-size: contain; */
     }
 }
 
@@ -443,7 +443,8 @@ li.parent_li ul li ul li {
 
 .txtBox select,
 .txtBox input,
-.txtBox option {
+.txtBox option,
+.userCheckBox {
     width: 194px;
     background-color: #34383f;
     /* color:#fff; */
@@ -852,6 +853,11 @@ border: 1px solid #ffffff;
     pointer-events: none
 }
 
+.pure-table-inner tr th:first-child,
+.pure-table-inner tr td:first-child {
+    width: 24px
+}
+
 .pure-table-inner tr th:nth-child(2),
 .pure-table-inner tr td:nth-child(2) {
     width: 25%
@@ -859,7 +865,7 @@ border: 1px solid #ffffff;
 
 .pure-table-inner tr th:nth-child(3),
 .pure-table-inner tr td:nth-child(3) {
-    width: 17%
+    width: 25%
 }
 
 .pure-table-inner tr th:nth-child(4),

css/index.css

@@ -25,11 +25,14 @@
             min-width: 1024px;
             max-width: 1920px;
             padding: .287rem .287rem 0;
-            display: flex
+            display: flex;
+            height: 100%;
+            min-height: 700px;
         }
         
         .mainbox .column {
-            flex: 3
+            flex: 3;
+            height: 100%;
         }
         
         .mainbox .column:nth-child(2) {
@@ -73,7 +76,8 @@
         }
         
         .no {
-            height: 4.05rem;
+            height: calc(40% - 0.574rem);
+            /* height: 4.05rem; */
             overflow: hidden;
             background-image: url(../images/no-bg.png)
         }
@@ -116,7 +120,8 @@
         
         .map {
             position: relative;
-            height: 7.55rem;
+            /* height: 7.55rem; */
+            height: 60%;
             margin-bottom: .287rem;
             background-size: 90% 90%;
             background-position: bottom center;
@@ -182,27 +187,36 @@
         }
         
         .panel.pie-bar {
-            height: 7.55rem;
+            /* height: 7.55rem; */
+            height: 60%;
             background-image: url(../images/pie-bar-bg.png)
         }
         
         .panel.line {
-            height: 4.05rem;
+            /* height: 4.05rem; */
+            height: calc(40% - 0.574rem);
             background-image: url(../images/line-bg.png)
         }
         
         .panel.right-top {
-            height: 5.425rem;
+            height: 43%;
+            /* height: 5.425rem; */
             background-image: url(../images/right-top-bg.png)
         }
         
         .panel.right-top .chart {
-            height: 3.4rem
+            /* height: 3.4rem; */
+            height: calc(100% - 1.85rem)
+        }
+        
+        .pie-bar-container {
+            height: calc(100% - 0.7rem)
         }
         
         .pie-bar-bottom,
         .pie-bar-top {
-            height: 3.438rem;
+            /* height: 3.438rem; */
+            height: 50%;
             width: 100%;
             position: relative
         }
@@ -216,7 +230,8 @@
         }
         
         .line .chart {
-            height: 90%
+            /* height: 90% */
+            height: calc(100% - 0.7rem)
         }
         
         .title-btn {
@@ -228,7 +243,7 @@
             border-radius: 10px;
             text-align: center;
             font-size: .25rem;
-            margin: .125rem auto
+            margin: .1rem auto 0.2rem
         }
         
         .total-squares {
@@ -253,7 +268,8 @@
         }
         
         .huan {
-            height: 6.175rem;
+            /* height: 6.175rem; */
+            height: calc(57% - 0.574rem);
             background-image: url(../images/right-bottom-bg.png);
             /* min-width:380px; */
         }
@@ -275,13 +291,17 @@
             text-align: center;
             border: 1px solid rgba(0, 212, 233, .4);
             display: inline-block;
-            padding: 0.125rem 0;
         }
         
         .huan li {
+            display: flex;
+            float: left;
+            justify-content: center;
+            align-items: center;
             margin-right: .35rem;
             margin-bottom: 0.125rem;
-            margin-top: 0.1rem
+            margin-top: 0.1rem;
+            height: calc(50% - 0.225rem);
         }
         
         .num-huan {
@@ -295,7 +315,8 @@
             display: inline-block;
             white-space: nowrap;
             overflow: hidden;
-            text-overflow: ellipsis
+            text-overflow: ellipsis;
+            text-align: left;
         }
         
         .no table {
@@ -305,29 +326,107 @@
         .no table th,
         .no table td {
             border-bottom: 1px solid rgba(0, 212, 233, .1);
+            display: inline-block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        
+        .no table th:hover,
+        .no table td:hover {
+            overflow: auto;
+            text-overflow: clip;
         }
         
         .no tr td:first-child,
         .no tr th:first-child {
-            width: 1rem
+            width: 8%
         }
         
         .no tr td:nth-child(2),
         .no tr th:nth-child(2) {
-            width: 2.3rem
+            width: 25%
         }
         
         .no tr td:nth-child(3),
         .no tr th:nth-child(3) {
-            width: 1rem
+            width: 15%;
         }
         
         .no tr td:nth-child(4),
         .no tr th:nth-child(4) {
-            width: 5rem
+            width: 32%;
         }
         
         .no tr td:nth-child(5),
         .no tr th:nth-child(5) {
-            width: 1.5rem
+            width: 20%
+        }
+        
+        .huan tr td:first-child,
+        .huan tr th:first-child {
+            width: 10%
+        }
+        
+        .huan tr td:nth-child(2),
+        .huan tr th:nth-child(2) {
+            width: 30%
+        }
+        
+        .huan tr td:nth-child(3),
+        .huan tr th:nth-child(3) {
+            width: 20%
+        }
+        
+        .huan tr td:nth-child(4),
+        .huan tr th:nth-child(4) {
+            width: 40%
+        }
+        /* 溢出滚动样式 */
+        
+        .scroll::-webkit-scrollbar {
+            height: 7px !important;
+            width: 7px !important;
+        }
+        /*定义了滚动条滑块的样式*/
+        
+        .scroll::-webkit-scrollbar-thumb {
+            border-radius: 5px;
+            border-style: dashed;
+            background-color: rgba(40, 190, 252, .6);
+            border-color: #e2242400;
+            border-width: 1.5px;
+            background-clip: padding-box;
+        }
+        /*定义了轨道的样式*/
+        
+        td::-webkit-scrollbar-track {
+            /*滚动条里面轨道*/
+            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
+            border-radius: 5px;
+            background: rgba(0, 0, 0, 0.2);
+        }
+        /* 溢出滚动样式 */
+        
+        td::-webkit-scrollbar {
+            height: 5px !important;
+            width: 5px !important;
+        }
+        /*定义了滚动条滑块的样式*/
+        
+        td::-webkit-scrollbar-thumb {
+            border-radius: 5px;
+            border-style: dashed;
+            background-color: rgba(40, 190, 252, .6);
+            border-color: #e2242400;
+            border-width: 1.5px;
+            background-clip: padding-box;
+        }
+        /*定义了轨道的样式*/
+        
+        td::-webkit-scrollbar-track {
+            /*滚动条里面轨道*/
+            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
+            border-radius: 5px;
+            background: rgba(0, 0, 0, 0.2);
         }

css/per-manage.css

@@ -497,4 +497,24 @@ ul.depart-opera {
     background-position: center;
     background-color: rgba(0, 0, 0, .2);
     background-size: 50%;
+}
+
+
+/* 账户管理修改多选 */
+
+.userCheckBox {
+    display: inline-block;
+    padding: .125rem
+}
+
+.userCheckBox .checkselfblock .layui-form-checkbox[lay-skin="primary"] {
+    width: auto;
+}
+
+.userCheckBox .layui-form-checkbox[lay-skin="primary"] span {
+    color: #aaa
+}
+
+.userCheckBox .layui-form-checkbox[lay-skin="primary"] i {
+    /* background-color: #aaa */
 }

index.html

@@ -8,10 +8,9 @@
     <link rel="shortcut icon" href="favicon.ico">
     <link rel="stylesheet" href="css/common.css" />
     <link rel="stylesheet" href="css/index.css" />
-
 </head>
 
-<body>
+<body style=" background-size: cover;">
     <!--<header>-->
     <!--    <h1>设施管理系统</h1>-->
     <!--</header>-->
@@ -25,46 +24,25 @@
                     <div class="pie-bar-top">
                         <div id="loading"></div>
                         <div class="chart">
-
                         </div>
-
                     </div>
                     <div class="pie-bar-bottom">
                         <div class="title-btn">异常设备数</div>
                         <div class="chart pie"></div>
-
                     </div>
                 </div>
-                <!-- <div class="chart"></div> -->
-                <!-- <div class="panel-footer"></div> -->
             </div>
             <div class="panel line">
                 <h2>报警处理</h2>
                 <div class="chart"></div>
-                <!-- <div class="panel-footer"></div> -->
             </div>
-
         </div>
         <div class="column">
-
             <div class="map">
                 <iframe style="width:100%;height:100%" src='http://www.thingjs.com/s/ef7ee6a73896c01bda77e679?params=105b0f77fd24654d4eebc434e9'></iframe>
             </div>
             <div class="no panel">
                 <h2>实时告警信息</h2>
-                <!-- <div class="no-hd">
-              <ul>
-                <li>125811</li>
-                <li>104563</li>
-              </ul>
-            </div>
-            <div class="no-bd">
-              <ul>
-                <li>前端需求人数</li>
-                <li>市场供应人数</li>
-              </ul>
-            </div> -->
-
                 <table class="pure-table">
                     <thead>
                         <tr>
@@ -76,9 +54,8 @@
                         </tr>
                     </thead>
                 </table>
-                <div class="scroll" style="height: 2.5rem;overflow-y: auto;">
+                <div class="scroll" style="height: calc(100% - 1.2rem);overflow-y: auto;">
                     <table class="pure-table">
-
                         <tbody class="warning-info">
                         </tbody>
                     </table>
@@ -87,75 +64,56 @@
         </div>
         <div class="column">
             <div class="panel right-top">
-
                 <h2>园区实时报警统计</h2>
-
                 <div class="total-squares">
-
                 </div>
                 <div class="yq-total">当前时间</div>
-
                 <div class="chart"></div>
-                <!-- <div class="panel-footer"></div> -->
             </div>
             <div class="panel huan right-bottom">
                 <h2>设备隐患处理</h2>
-                <ul id="pop">
-
-
-                </ul>
-                <div class="title-btn">异常设备数</div>
-                <table class="pure-table">
-                    <thead>
-                        <tr>
-                            <th>序号</th>
-                            <th>任务名称</th>
-                            <th>当前状态</th>
-                            <th>应完成时间</th>
-
-                        </tr>
-                    </thead>
-
-                </table>
-                <div class="scroll" style="height: 1.3rem;overflow-y: auto;">
-                    <table class="pure-table">
-
-                        <tbody class="abnormal">
-
-                            <tr>
-                                <td>1</td>
-                                <td>任务111</td>
-                                <td class="unprocess">待处理</td>
-                                <td>2020-12-15 15:22</td>
-                            </tr>
-                            <tr>
-                                <td>2</td>
-                                <td>任务111</td>
-                                <td class="unprocess">待处理</td>
-                                <td>2020-12-15 15:22</td>
-                            </tr>
-
-
-
-
-
-                        </tbody>
-                    </table>
-
+                <div style="height:calc(100% - 0.7rem)">
+                    <ul id="pop" style="height:45%">
+                    </ul>
+                    <div style="height:55%">
+                        <div class="title-btn">异常设备数</div>
+                        <table class="pure-table">
+                            <thead>
+                                <tr>
+                                    <th>序号</th>
+                                    <th>任务名称</th>
+                                    <th>当前状态</th>
+                                    <th>应完成时间</th>
+                                </tr>
+                            </thead>
+                        </table>
+                        <div class="scroll" style="height:calc(100% - 1.3rem);overflow-y: auto;">
+                            <table class="pure-table">
+                                <tbody class="abnormal">
+                                    <tr>
+                                        <td>1</td>
+                                        <td>任务111</td>
+                                        <td class="unprocess">待处理</td>
+                                        <td>2020-12-15 15:22</td>
+                                    </tr>
+                                    <tr>
+                                        <td>2</td>
+                                        <td>任务111</td>
+                                        <td class="unprocess">待处理</td>
+                                        <td>2020-12-15 15:22</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
                 </div>
-
-                <!-- <div class="chart"></div> -->
-                <!-- <div class="panel-footer"></div> -->
             </div>
-
         </div>
     </section>
     <script src="js/flexible.js"></script>
     <script src="js/jquery.js"></script>
     <script src="api/request.js"></script>
 
-    <!-- <script src="js/china.js"></script> -->
-    <!-- <script src="js/myMap.js"></script> -->
     <script src="js/echarts.min.js"></script>
     <script src="js/index.js"></script>
 

js/index.js

@@ -102,8 +102,10 @@ function getIndexDate(queryParam = {}) {
             var optionBar = {
                 grid: {
                     left: '4%',
-                    bottom: '25%',
-                    height: "60%",
+                    bottom: '16%',
+                    top: '15',
+                    // height: "70%",
+                    // right: '4%',
                     containLabel: true
                 },
                 tooltip: {
@@ -214,10 +216,10 @@ function getIndexDate(queryParam = {}) {
                 },
                 color: ['#6F99FA', '#FF5801', '#EAF665'],
                 grid: {
-                    bottom: '30',
+                    bottom: '0',
                     right: '10',
                     left: '10',
-                    right: '20',
+                    top: '35',
                     containLabel: true,
                 },
                 tooltip: {
@@ -352,7 +354,7 @@ function getIndexDate(queryParam = {}) {
                     // width: '100%',
                     top: '15%',
                     right: '0%',
-                    bottom: '10%',
+                    bottom: '0%',
                     left: '10%'
                 },
 
@@ -399,30 +401,30 @@ function getIndexDate(queryParam = {}) {
                         type: 'bar',
                         // data: [1357, , ],
                         data: [totalNum, , ],
-                        barWidth: 15,
+                        barWidth: 10,
                         itemStyle: {},
                         z: 2
                     }, {
                         type: 'bar',
                         // data: [, 1260, ],
                         data: [, pie.is_handled, ],
-                        barWidth: 15,
+                        barWidth: 10,
                         itemStyle: {},
                         z: 2
                     }, {
                         type: 'bar',
                         // data: [, , 36],
                         data: [, , pie.wait_handle],
-                        barWidth: 15,
+                        barWidth: 10,
                         itemStyle: {},
                         z: 2
                     },
                     {
                         type: 'bar',
                         barGap: '-100%',
-                        // data: [1554, 1554, 1554],
+                        // data: [1054, 1054, 1054],
                         data: [totalNum, totalNum, totalNum],
-                        barWidth: 15,
+                        barWidth: 10,
                         itemStyle: {
                             normal: {
                                 color: 'rgba(255, 255, 255, 0.15)',
@@ -446,7 +448,7 @@ function getIndexDate(queryParam = {}) {
             var handle = result.handle
             var items = '';
             handle.forEach(function(item, key) {
-                items += ' <li><p class="num-huan ' + colorGroup[key] + '">' + item.value + '</p><p class="des-huan">' + item.name + '</p></li>';
+                items += ' <li><div><p class="num-huan ' + colorGroup[key] + '">' + item.value + '</p><p class="des-huan">' + item.name + '</p><div></li>';
             })
             $('#pop').html(items)
 

js/userAccount.js

@@ -105,9 +105,9 @@ $('.pg-refresh').click(resetForm);
 //角色列表
 getUserRole()
 
-
+//获取公司树结构 ajax请求  
 getCompanyTree()
-    //获取公司树结构 ajax请求   
+
 function getCompanyTree() {
     ajaxRequest(COMPANY_LIST, "POST", {}, function(result) {
         let data = result.data;
@@ -144,6 +144,33 @@ function getCompanyTree() {
         alert("请求数据失败!");
     })
 }
+
+
+//获取检测对象设备列表 ajax请求
+
+getTypeListDataAjax()
+
+function getTypeListDataAjax(queryParam = {}) {
+
+    ajaxRequest(COMPANY_LIST, "POST", queryParam, function(result) {
+
+        // let data = result.pageList;
+        let data = result.data;
+        let items = '';
+        data.forEach(function(item, key) {
+            items += ` <input type="checkbox" name="device_code" value="${item.ownerId}" lay-skin="primary" title="${item.ownerName}" >`
+        })
+
+        $('#checkselfblock').html(items);
+        layui.use(['form'], function() {
+            var form = layui.form;
+            form.render('checkbox');
+        });
+
+    }, function(errorMsg) {
+        alert("请求数据失败!");
+    })
+}
 //分页操作
 $('#firstPageButton').on('click', function() {
     pageNo = 1;
@@ -222,6 +249,10 @@ layui.use('layer', function() {
         //修改弹框信息
     $('.edit').click(function() {
 
+
+
+
+
             if (!$('.pure-table tr').has('.checked').length) {
                 layer.msg('请选择一条需要修改的信息!', { icon: 5 });
             } else {
@@ -238,7 +269,19 @@ layui.use('layer', function() {
 
                 // 单位赋值
                 $('.editUserOut select[name=bian').val(userInfo.bian)
-                    // 部门下拉展示及赋值
+
+
+                // 复选框赋值
+                // var checkValue = userInfo.bian;
+                // if (checkValue) {
+                //     alert(checkValue)
+                //     $(".editUserOut input:checkbox[value=" + checkValue + "]").attr('checked', 'true');
+                //     layui.form.render();
+                // }
+
+
+
+                // 部门下拉展示及赋值
                 if ($('#companyId2').val()) {
                     listDepname()
 
@@ -271,6 +314,10 @@ layui.use('layer', function() {
                     content: $(".editUserOut"),
                     success: function() {
                         $('.clsBtn,.cancel').click(function() {
+                            // 清除checkbox选中
+                            // $('.editUserOut input[name=device_code]').prop('checked', false);
+                            // layui.form.render();
+
                             layer.close(layerUpdateIndex);
                         })
                     }

pages/account-manage/userAccount-manage.html

@@ -200,6 +200,13 @@
                             <option value="">单位1</option>
                             <option value="">单位2</option>
                         </select>
+
+                        <!-- <div class="layui-row  layui-form userCheckBox">
+                            <div class="layui-col-md12">
+                                <div class="" id="checkselfblock">
+                                </div>
+                            </div>
+                        </div> -->
                     </div>
                     <div>
                         <span>部门名称：</span>

system-manage.html

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="css/per-manage.css" />
 </head>
 
-<body style="background-image:url(images/big-bg.png)" class="outerBody">
+<body style="background-image:url(images/bg.9.png);" class="outerBody">
     <section class="mainbox ">
         <div class="tit-box flex">
             <h2 class="title flex2">系统管理