报警信息100%

src/main.js

@@ -13,11 +13,13 @@ import store from './store'
 import 'lib-flexible/flexible'
 import './assets/ttf/font.css';
 import echart from 'echarts';
-import { DatePicker } from 'element-ui';
+import { DatePicker, Row, Col } from 'element-ui';
 
 Vue.config.productionTip = false
 Vue.prototype.$echarts = echart
 Vue.use(DatePicker)
+Vue.use(Row)
+Vue.use(Col)
 
 new Vue({
   router,

src/views/Alarm/Alarm.vue

@@ -56,6 +56,70 @@
         </div>
       </div>
     </div>
+    <div class="alarm-bottom">
+      <div class="alarm-top-left">
+        <div class="alarm-title">
+          <div class="alarm-title-left"></div>
+          <div class="alarm-title-center">相应时间</div>
+          <div class="alarm-title-right"></div>
+        </div>
+        <div class="alarm-content">
+          <chart-bar :data="timeData"></chart-bar>
+        </div>
+      </div>
+      <div class="alarm-top-center">
+        <div class="alarm-title">
+          <div class="alarm-title-left"></div>
+          <div class="alarm-title-center">报警列表</div>
+          <div class="alarm-title-right"></div>
+        </div>
+        <div class="alarm-content alarm-flex">
+          <div class="flex-left">
+            <div class="box" v-for="item in 9" :key="item">
+              <el-row :gutter="20" style="width: 500px; height: 100%">
+                <el-col :span="2"  style="height: 100%">
+                  <div :class="['box-logo', item === 1 ? 'logo1' : '', item === 2 ? 'logo2' : '', item === 3 ? 'logo3' : '' ]">{{item}}</div>
+                </el-col>
+                <el-col :span="10"  style="height: 100%">
+                  <div>育肥1栋3单元温度过高！</div>
+                </el-col>
+                <el-col :span="4"  style="height: 100%">
+                  <div>17:45:21</div>
+                </el-col>
+                <el-col :span="4"  style="height: 100%">
+                  <div>二级</div>
+                </el-col>
+                <el-col :span="4"  style="height: 100%">
+                  <div>处理</div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+          <div class="flex-right">
+            <div class="parent">
+              <div class="parent-grid">核心区</div>
+              <div class="parent-grid">生活区</div>
+              <div class="parent-grid">环保区</div>
+              <div class="parent-grid">其他</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="alarm-top-left">
+        <div class="alarm-title">
+          <div class="alarm-title-left"></div>
+          <div class="alarm-title-center">异常人脸</div>
+          <div class="alarm-title-right"></div>
+        </div>
+        <div class="alarm-content">
+          <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
+            <swiper-slide v-for="item in 10" :key="item">
+              <div class="case"></div>
+            </swiper-slide>
+          </swiper>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -63,12 +127,18 @@
 import ChartPie from "@/views/Alarm/chart/ChartPie";
 import AlarmBar from "@/views/Alarm/chart/AlarmBar";
 import CostPie from "@/views/Alarm/chart/CostPie";
+import ChartBar from "@/views/BioSafety/chart/ChartBar";
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
 export default {
   name: "Alarm",
   components: {
     ChartPie,
     AlarmBar,
-    CostPie
+    CostPie,
+    ChartBar,
+    swiper,
+    swiperSlide
   },
   data() {
     return {
@@ -94,7 +164,29 @@ export default {
           name: '猪只出售',
           value: 12
         },
-      ]
+      ],
+      timeData: {
+        id: 1,
+        time: ['断电', '故障', '环境报警', '污水处理'],
+        data: [15, 20, 18, 4],
+        name: '默认',
+        unit: '分钟'
+      },
+      swiperOption: {
+        direction: 'vertical',
+        slidesPerView: 2,
+        slidesPerColumn: 1,
+        slidesPerGroup: 2,
+        // spaceBetween: 30,
+        autoplay: {
+          delay: 3000,
+          disableOnInteraction: false
+        },
+        // pagination: {
+        //   el: '.swiper-pagination',
+        //   clickable: true
+        // }
+      },
     }
   }
 }
@@ -181,12 +273,78 @@ export default {
     transform-origin: 0 0;
     transform: scale(1.5);
   }
-  /*@keyframes scale {*/
-  /*  0% {*/
-  /*    transform: translate(40px);*/
-  /*  }*/
-  /*  100% {*/
-  /*    transform: scale(1.5);*/
-  /*  }*/
-  /*}*/
+  .alarm-bottom {
+    width: 100%;
+    height: calc(100% - 570px);
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .alarm-flex {
+    display: flex;
+    justify-content: space-between;
+  }
+  .flex-left {
+    width: 500px;
+    height: 100%;
+    box-sizing: border-box;
+    padding-top: 20px;
+    overflow-y: auto;
+    color: #fff;
+  }
+  .flex-left::-webkit-scrollbar {
+    width: 0;
+  }
+  .flex-right {
+    flex: 1;
+    margin-left: 20px;
+    box-sizing: border-box;
+    padding: 20px 0;
+  }
+  .box {
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    margin-bottom: 15px;
+  }
+  .box-logo {
+    width: 20px;
+    height: 20px;
+    background-color: #666666;
+    color: #fff;
+  }
+  .logo1 {
+    background-color: #5F0CED;
+  }
+  .logo2 {
+    background-color: #FE2277;
+  }
+  .logo3 {
+    background-color: #F9A403;
+  }
+  .parent {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+    align-content: center;
+  }
+  .parent-grid {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #66FFFF;
+    color: #66FFFF;
+    background-color: #072A5B;
+    display: grid;
+    align-content: center;
+  }
+  .case {
+    width: 100%;
+    height: 100%;
+    background: url("../../assets/BioSafety/some.png") no-repeat;
+    background-size: 100% 100%;
+  }
 </style>