add terminal/alarm router

xiuosiot-frontend/src/router/index.js

@@ -131,7 +131,7 @@ export const constantRoutes = [
         path: 'alarm',
         name: 'Alarm',
         component: () => import('@/views/terminal/alarm/index'),
-        meta: { title: '设备告警', disabled: true }
+        meta: { title: '设备告警' }
       },
       {
         path: 'plc',

xiuosiot-frontend/src/views/terminal/PLC/index.vue

@@ -856,14 +856,25 @@ export default {
   animation: 0.5s out;
 }
 .dialog_wrapper {
-  z-index: 99;
+  z-index: 2;
   position: fixed;
   left: 230px;
   right: 0;
   top: 0;
   bottom: 0;
   margin: 0;
+  &::before{
+      content: '';
+    position: absolute;
+    left: -230px;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,.4);
+    z-index:2
+  }
   .dialog-container {
+    z-index: 10;
     width: 1100px;
     transform: none;
     margin: 15vh auto;

xiuosiot-frontend/src/views/terminal/alarm/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="app-container">
-    <el-card>
+    <el-card class="header_card">
       <div class="header">
         <div class="header_left">
-          <div class="chart" />
+          <div class="line" />
+          <div id="chart" class="chart" />
+          <div class="data-box">
             <div class="data">
               <p class="desc">告警数(7日)</p>
               <h1 class="num">17</h1>
@@ -13,27 +15,28 @@
               <h1 class="num">8</h1>
             </div>
           </div>
+        </div>
         <div class="header_right">
           <div class="data">
-            <p class="level">紧急</p>
+            <p class="desc">紧急</p>
             <h1 class="num emergency">6</h1>
           </div>
           <div class="data">
-            <p class="level">重要</p>
+            <p class="desc">重要</p>
             <h1 class="num important">1</h1>
           </div>
           <div class="data">
-            <p class="level">次要</p>
+            <p class="desc">次要</p>
             <h1 class="num minor">8</h1>
           </div>
           <div class="data">
-            <p class="level">提示</p>
+            <p class="desc">提示</p>
             <h1 class="num info">1</h1>
           </div>
         </div>
       </div>
     </el-card>
-    <el-col v-for="(alarm,index) in alarmList" :key="index" :span="12">
+    <el-col :span="12">
       <div class="alarm-container">
         <div class="img-box">
           <img src="">
@@ -55,10 +58,142 @@
 
 <script>
 export default {
-
+  data() {
+    return {
+      myChart: null,
+      option: {
+        color: ['#FF0000', '#F7BA1E', '#00B5C0', '#AEAEAE'],
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: [
+          {
+            orient: 'horizontal',
+            icon: 'rect',
+            x: '60%',
+            y: '35%',
+            itemWidth: 12,
+            itemHeight: 12,
+            align: 'left',
+            data: ['紧要', '重要']
+          },
+          {
+            orient: 'horizontal',
+            icon: 'rect',
+            x: '60%',
+            y: '55%',
+            itemWidth: 12,
+            itemHeight: 12,
+            align: 'left',
+            data: ['次要', '提示']
+          }
+        ],
+        series: [
+          {
+            type: 'pie',
+            radius: ['55%', '70%'],
+            center: ['30%', '50%'],
+            data: [
+              {
+                name: '紧要',
+                value: '3720'
+              },
+              {
+                name: '重要',
+                value: '2920'
+              },
+              {
+                name: '次要',
+                value: '2200'
+              },
+              {
+                name: '提示',
+                value: '1420'
+              }
+            ],
+            hoverAnimation: false,
+            label: {
+              show: false
+            }
+          }
+        ]
+      },
+      alarmList: []
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart'))
+    this.myChart.setOption(this.option)
+    window.addEventListener('resize', this.myChart.resize)
+  }
 }
 </script>
-
+<style lang="scss">
-<style lang="scss" scoped>
+.header_card {
-
+  .el-card__body {
+    padding: 0 20px !important;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  .header_left {
+    position: relative;
+    width: 50%;
+    display: flex;
+    align-items: center;
+    .line{
+      position: absolute;
+      right: -20px;
+      top: 30%;
+      height: 40%;
+      width: 1px;
+      background-color:#DCDCDC ;
+    }
+    .chart {
+      min-width: 200px;
+      width: 50%;
+      height: 150px;
+    }
+    .data-box {
+      display: flex;
+      justify-content: space-evenly;
+      flex: 1;
+      text-align: center;
+    }
+  }
+  .header_right {
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+  }
+  .data {
+    margin-top: 20px;
+    .desc {
+      font-size: 14px;
+      font-family: Source Han Sans CN-Normal, Source Han Sans CN;
+      color: #999999;
+    }
+    .num {
+      font-size: 40px;
+      font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
+      font-weight: 500;
+      color: #000000;
+    }
+  }
+}
+.emergency {
+  color: #ff0000 !important;
+}
+.important {
+  color: #f7ba1e !important;
+}
+.minor {
+  color: #00b5c0 !important;
+}
+.info {
+  color: #aeaeae !important;
+}
 </style>