告警管理页面排版 溢出滚动 时间插件调整

src/layout/components/AppMain.vue

@@ -20,11 +20,11 @@ export default {
 <style scoped>
 .app-main {
   /*50 = navbar  */
-  min-height: calc(100vh - 1.34rem);
+  /* min-height: calc(100vh - 1.34rem); */
   width: 100%;
+
   color:#fff;
-  position: relative;
-  overflow: hidden;
+  
   
 }
 .fixed-header+.app-main {

src/layout/components/HeaderTop.vue

@@ -91,7 +91,8 @@ header {
     text-align: center;
     color: #00F6FF;
     position: relative;
-    /* z-index:99 */
+    z-index:99999999;
+    position:fixed;
 }
 
 .header-logo {

src/styles/index.scss

@@ -14,6 +14,7 @@ body {
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+    background: #06263B;
 }
 
 label {
@@ -63,6 +64,22 @@ div:focus {
     }
 }
 
+// 单选框复选框颜色更改
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: #04E3ED;
+    border-color: #04E3ED;
+}
+
+.el-radio__input.is-checked+.el-radio__label {
+    color: #04E3ED;
+}
+
+.el-radio__input.is-checked .el-radio__inner {
+    border-color: #04E3ED;
+    background: #04E3ED;
+}
+
 // main-container global css
 .app-container {
     padding: 20px;
@@ -71,7 +88,8 @@ div:focus {
 .border-container {
     border: 1px solid rgba(0, 246, 255, .7);
     background-image: url(../assets/main-bg.png);
-    border-radius: 4px
+    border-radius: 4px;
+    min-height: calc(100vh - 1.34rem);
 }
 
 .colorRed {
@@ -215,4 +233,27 @@ div:focus {
     .text {
         font-size: 16px;
     }
+}
+
+// 视频告警
+.el-radio {
+    margin: 0 5px 0 10px;
+    color: #fff;
+    height: 30px;
+    line-height: 30px;
+}
+
+// @media screen and (max-width:1024px) {
+//     html {
+//         font-size: 42px !important
+//     }
+// }
+// @media screen and (min-width:1920) {
+//     html {
+//         font-size: 80px !important
+//     }
+// }
+.body {
+    min-width: 1000px;
+    overflow: auto
 }

src/styles/sidebar.scss

@@ -1,9 +1,12 @@
 #app {
     .main-container {
-        min-height: calc(100% - 1.3125rem);
         transition: margin-left .28s;
         margin-left: $sideBarWidth+20;
-        position: relative;
+        position: fixed;
+        top: 1.3125rem;
+        width: calc(100% - 240px); // width: 70%;
+        height: calc(100vh - 1.34rem);
+        overflow-y: auto;
     }
     .el-menu-item,
     .el-submenu__title {
@@ -138,7 +141,7 @@
     // mobile responsive
     .mobile {
         .main-container {
-            margin-left: 0px;
+            // margin-left: 0px;
         }
         .sidebar-container {
             transition: transform .28s;

src/views/alarmingManage/index.vue

@@ -1,70 +1,73 @@
 <template>
   <div class="page-container">
-    <el-row :gutter="20" class="alarming-tab">
-      <el-col :span="3">
-        <div class="grid-content">
-          <div>
-            <div class="num colorRed">2000</div>
-            <div class="text">告警总数</div>
+    <div style="width: 90%; overflow: hidden">
+      <el-row :gutter="20" class="alarming-tab">
+        <el-col :span="3">
+          <div class="grid-content">
+            <div>
+              <div class="num colorRed">2000</div>
+              <div class="text">告警总数</div>
+            </div>
           </div>
-        </div>
-      </el-col>
+        </el-col>
 
-      <el-col :span="3">
-        <div class="grid-content">
-          <div>
-            <div class="num colorBlue">1000</div>
-            <div class="text">失电告警</div>
+        <el-col :span="3">
+          <div class="grid-content">
+            <div>
+              <div class="num colorBlue">1000</div>
+              <div class="text">失电告警</div>
+            </div>
           </div>
-        </div>
-      </el-col>
-      <el-col :span="3">
-        <div class="grid-content">
-          <div>
-            <div class="num colorGreen">200</div>
-            <div class="text">电压越线告警</div>
+        </el-col>
+        <el-col :span="3">
+          <div class="grid-content">
+            <div>
+              <div class="num colorGreen">200</div>
+              <div class="text">电压越线告警</div>
+            </div>
           </div>
-        </div>
-      </el-col>
+        </el-col>
 
-      <el-col :span="3">
-        <div class="grid-content">
-          <div>
-            <div class="num colorOrange">300</div>
-            <div class="text">消防告警</div>
+        <el-col :span="3">
+          <div class="grid-content">
+            <div>
+              <div class="num colorOrange">300</div>
+              <div class="text">消防告警</div>
+            </div>
           </div>
-        </div>
-      </el-col>
-      <el-col :span="3">
-        <div class="grid-content">
-          <div>
-            <div class="num colorYellow">500</div>
-            <div class="text">入侵告警</div>
+        </el-col>
+        <el-col :span="3">
+          <div class="grid-content">
+            <div>
+              <div class="num colorYellow">500</div>
+              <div class="text">入侵告警</div>
+            </div>
           </div>
-        </div>
-      </el-col>
-      <el-col :span="3">
-        <div class="grid-content">
-          <div>
-            <div class="num colorRed">35</div>
-            <div class="text">未处理</div>
+        </el-col>
+        <el-col :span="3">
+          <div class="grid-content">
+            <div>
+              <div class="num colorRed">35</div>
+              <div class="text">未处理</div>
+            </div>
           </div>
-        </div>
-      </el-col>
-      <el-col :span="3">
-        <div class="grid-content">
-          <div>
-            <div class="num colorLightBlue">90%</div>
-            <div class="text">处理率</div>
+        </el-col>
+        <el-col :span="3">
+          <div class="grid-content">
+            <div>
+              <div class="num colorLightBlue">90%</div>
+              <div class="text">处理率</div>
+            </div>
           </div>
-        </div>
-      </el-col>
-    </el-row>
+        </el-col>
+      </el-row>
+    </div>
+
     <div class="border-container">
       <div class="latestData">告警查询</div>
       <div class="page-inner">
-        <!-- 刷新时间 start -->
-        <div class="operation">
+        <!-- 搜索 start -->
+        <div class="filterBox">
           <div class="filter-item">
             站点：
             <el-select
@@ -100,160 +103,85 @@
 
           <div class="filter-item">
             时间:
-          <el-date-picker
-            style="width:43%"
-            v-model="formDaliog.startTime"
-            type="datetime"
-            placeholder="选择日期时间"
-            align="right"
-            format="yyyy-MM-dd HH:mm:ss"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            :picker-options="pickerOptions1"
-          >
-          </el-date-picker>
-          ~
-          <el-date-picker
-            style="width:43%"
-            v-model="formDaliog.endTime"
-            type="datetime"
-            placeholder="选择日期时间"
-            align="right"
-            format="yyyy-MM-dd HH:mm:ss"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            :picker-options="pickerOptions2"
-          >
-          </el-date-picker>
+            <el-date-picker
+              style="width: 150px"
+              v-model="formDaliog.startTime"
+              type="date"
+              placeholder="选择时间"
+              align="right"
+              format="yyyy-MM-dd "
+              value-format="yyyy-MM-dd "
+              :picker-options="pickerOptions1"
+            >
+            </el-date-picker>
+            ~
+            <el-date-picker
+              style="width: 150px"
+              v-model="formDaliog.end"
+              type="date"
+              placeholder="选择时间"
+              align="right"
+              format="yyyy-MM-dd "
+              value-format="yyyy-MM-dd"
+              :picker-options="pickerOptions2"
+            >
+            </el-date-picker>
           </div>
           <div class="filter-item">
             类型：
             <el-select
-              v-model="value2"
+              v-model="value3"
               placeholder="请选择"
               style="width: 120px"
             >
               <el-option
-                v-for="item in options2"
-                :key="item.value2"
+                v-for="item in options3"
+                :key="item.value3"
                 :label="item.label"
-                :value="item.value2"
+                :value="item.value3"
               >
               </el-option>
             </el-select>
           </div>
+          <div class="filter-item">
+            <el-radio v-model="radio" label="1">未确认</el-radio>
+            <el-radio v-model="radio" label="2">已确认</el-radio>
+           
+          </div>
+           <span class="export"><img src="@/assets/export.png" alt="" /> 导出</span>
 
-          <span class="export"
-            ><img src="@/assets/export.png" alt="" /> 导出</span
-          >
-        </div>
-        <!-- 刷新时间 end -->
-
-        <!-- 全选start -->
-        <div class="checkSection">
-          <input
-            type="checkbox"
-            id="checkbox"
-            v-model="checked"
-            @change="changeAllChecked()"
-          />
-          <label for="checkbox"> 全选 </label>
-
-          <input type="checkbox" id="dl" value="dl" v-model="checkedNames" />
-          <label for="dl"> 电流 </label>
-          <input type="checkbox" id="gl" value="gl" v-model="checkedNames" />
-          <label for="gl"> 功率 </label>
-          <input type="checkbox" id="dd" value="dd" v-model="checkedNames" />
-          <label for="dd"> 电度 </label>
-          <input type="checkbox" id="dy" value="dy" v-model="checkedNames" />
-          <label for="dy"> 电压 </label>
-          <input type="checkbox" id="wd" value="wd" v-model="checkedNames" />
-          <label for="wd"> 温度 </label>
-          <input type="checkbox" id="pl" value="pl" v-model="checkedNames" />
-          <label for="pl"> 频率 </label>
-          <input
-            type="checkbox"
-            id="glys"
-            value="glys"
-            v-model="checkedNames"
-          />
-          <label for="glys"> 功率因数 </label>
-          <input
-            type="checkbox"
-            id="xbdl"
-            value="xbdl"
-            v-model="checkedNames"
-          />
-          <label for="xbdl"> 谐波电流有效值 </label>
-          <input
-            type="checkbox"
-            id="txcs"
-            value="txcs"
-            v-model="checkedNames"
-          />
-          <label for="txcs"> 通讯参数 </label>
-          <input
-            type="checkbox"
-            id="dytb"
-            value="dytb"
-            v-model="checkedNames"
-          />
-          <label for="dytb"> 电压突变 </label>
+          
         </div>
-        <!-- 全选end -->
+        <!-- 搜索 end -->
 
         <!-- table start -->
         <el-table
+          border
           :data="tableData"
           :cell-style="cellStyle"
           :header-cell-style="{ color: '#fff', borderColor: '#01727A' }"
           style="width: 100%"
         >
-          <el-table-column prop="name" label="设备名称" width="150">
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column prop="time" label="发生时间" width="200">
           </el-table-column>
-
-          <el-table-column label="设备状态">
-            <el-table-column prop="status" label="运行状态" width="120">
-              <template slot-scope="{ row }">
-                <el-button size="mini" type="success">{{
-                  row.status
-                }}</el-button>
-              </template>
-            </el-table-column>
+          <el-table-column prop="alarming" label="告警" width="220">
           </el-table-column>
-
-          <!-- <el-table-column label="设备状态">
-          <el-table-column prop="status" label="运行状态" width="120">
+          <el-table-column prop="site" label="站点" width="150">
           </el-table-column>
-        </el-table-column> -->
-          <el-table-column label="电流A">
-            <el-table-column prop="" label="A相电流" width="120">
-            </el-table-column>
-            <el-table-column prop="" label="B相电流" width="120">
-            </el-table-column>
-            <el-table-column prop="" label="C相电流" width="120">
-            </el-table-column>
+          <el-table-column prop="device" label="设备" width="130">
           </el-table-column>
-          <el-table-column label="功率">
-            <el-table-column prop="" label="A相有功kW" width="120">
-            </el-table-column>
-            <el-table-column prop="" label="A相无功kW" width="120">
-            </el-table-column>
-            <el-table-column prop="" label="B相有功kW" width="120">
-            </el-table-column>
-            <el-table-column prop="" label="B相无功kW" width="120">
-            </el-table-column>
-            <el-table-column prop="" label="C相有功kW" width="120">
-            </el-table-column>
-            <el-table-column prop="" label="C相无功kW" width="120">
-            </el-table-column>
-            <el-table-column prop="" label="有功功率kW" width="120">
-            </el-table-column>
-            <el-table-column prop="" label="无功功率kW" width="120">
-            </el-table-column>
-            <el-table-column prop="" label="当前需量kW" width="120">
-            </el-table-column>
+          <el-table-column prop="alarmingType" label="告警类型">
           </el-table-column>
+          <el-table-column prop="alarmingLevel" label="告警级别">
+          </el-table-column>
+          <el-table-column prop="detail" label="详情"> </el-table-column>
+          <el-table-column prop="operate" label="操作"> </el-table-column>
         </el-table>
         <!-- table end -->
+        <br />
+        <br />
+        <div>分页</div>
       </div>
     </div>
   </div>
@@ -269,29 +197,36 @@ export default {
   },
   data() {
     return {
-      checked: false,
-      checkedNames: [],
-      checkedArr: [
-        "dl",
-        "gl",
-        "dd",
-        "dy",
-        "wd",
-        "pl",
-        "glys",
-        "xbdl",
-        "txcs",
-        "dytb",
-      ],
-
       tableData: [
         {
-          status: "OFF",
-          name: "HZ183",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路 1518 弄",
-          zip: 200333,
+          time: "2020-01-20 15:34:26",
+          alarming: "【伍继智能设备01】设备离线",
+          site: "伍继智能测试183",
+          device: "伍继智能设备01 ",
+          alarmingType: "设备离线",
+          alarmingLevel: "二级告警",
+          detail: "查看",
+          operate: "确认",
+        },
+        {
+          time: "2020-01-20 15:34:26",
+          alarming: "【伍继智能设备01】设备离线",
+          site: "伍继智能测试183",
+          device: "伍继智能设备01 ",
+          alarmingType: "设备离线",
+          alarmingLevel: "二级告警",
+          detail: "查看",
+          operate: "确认",
+        },
+        {
+          time: "2020-01-20 15:34:26",
+          alarming: "【伍继智能设备01】设备离线",
+          site: "伍继智能测试183",
+          device: "伍继智能设备01 ",
+          alarmingType: "设备离线",
+          alarmingLevel: "二级告警",
+          detail: "查看",
+          operate: "确认",
         },
       ],
 
@@ -315,9 +250,21 @@ export default {
           label: "设备二",
         },
       ],
+      options3: [
+        {
+          value3: "11",
+          label: "类型一",
+        },
+        {
+          value3: "22",
+          label: "类型二",
+        },
+      ],
 
       value: "",
       value2: "",
+      value3: "",
+      radio: "1",
 
       //日期时间选择器
       formDaliog: {