生物安防

src/utils/api.js

@@ -279,3 +279,22 @@ export function getAlarmAndPig(params) {
   })
 }
 
+
+/** 首页报警信息 **/
+export function alarmHome(data) {
+  return axios({
+    url: '/produce/warning/getMainPageWarning',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 拿到所有牧场 **/
+export function getXFarm(data) {
+  return axios({
+    url: '/admin/my/xfarmList',
+    method: 'get',
+    params: data
+  })
+}
+

src/views/Alarm/Alarm.vue

@@ -108,11 +108,19 @@
       <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-center">设备统计</div>
           <div class="alarm-title-right"></div>
         </div>
         <div class="alarm-content">
-          <chart-bar :data="timeData"></chart-bar>
+          <div class="alarm-box">
+            <div class="box-item" v-for="(item, i) in devList" :key="i">
+              <div class="box-bg">
+                <div class="box-absolute">{{item.value}}</div>
+              </div>
+              <div class="box-title">{{item.name}}</div>
+            </div>
+          </div>
+<!--          <chart-bar :data="timeData"></chart-bar>-->
         </div>
       </div>
       <div class="alarm-top-center" v-loading="alarmLoading"
@@ -196,7 +204,7 @@
 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 ChartBar from "@/views/BioSafety/chart/ChartBar";
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/css/swiper.css'
 import {getAlarmList, getWeekInfo, getPersonList, getFaceToken, getAlarmRate, getCountByDay} from "@/utils/api";
@@ -209,7 +217,6 @@ export default {
     ChartPie,
     AlarmBar,
     // CostPie,
-    ChartBar,
     swiper,
     swiperSlide
   },
@@ -264,6 +271,20 @@ export default {
       pieLoading: true,
       alarmLoading: true,
       personLoading: true,
+      devList: [
+        {
+          name: '设备总数',
+          value: '100'
+        },
+        {
+          name: '异常设备',
+          value: '20'
+        },
+        {
+          name: '设备异常率',
+          value: '20%'
+        },
+      ]
     }
   },
   methods: {
@@ -698,4 +719,36 @@ export default {
     transform: translate(-50%, -50%);
     /*background-color: #fff;*/
   }
+  .alarm-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+  }
+  .box-item {
+    flex: 1;
+    box-sizing: border-box;
+    padding-top: 60px;
+  }
+  .box-bg {
+    margin: 0 auto;
+    width: 85%;
+    height: 75%;
+    background: url("../../assets/Alarm/banner.png") no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+  }
+  .box-title {
+    text-align: center;
+    color: #fff;
+    /*height: 25%;*/
+    line-height: 400%;
+  }
+  .box-absolute {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -195%);
+    font-size: 18px;
+    color: #fff;
+  }
 </style>

src/views/Home/Home.vue

@@ -221,31 +221,31 @@
           <div class="case-title">今日报警</div>
           <div class="case-content">
             <div class="case-two">
-              <span><strong class="sign">9</strong>次</span>
+              <span><strong class="sign">{{alarm.todayAlarm ? alarm.todayAlarm : '暂无报警数据'}}</strong></span>
             </div>
           </div>
         </div>
         <div class="case-center">
-          <div class="case-title">平均相应时间</div>
+          <div class="case-title">故障率</div>
           <div class="case-content">
             <div class="case-two">
-              <span><strong class="sign">34</strong>分钟</span>
+              <span><strong class="sign">{{alarm.failureRate ? alarm.failureRate : '暂无数据'}}</strong></span>
             </div>
           </div>
         </div>
         <div class="case-center">
-          <div class="case-title">今日时间提醒</div>
+          <div class="case-title">三级报警数量</div>
           <div class="case-content">
             <div class="case-two">
-              <span><strong class="sign">27</strong>次</span>
+              <span><strong class="sign">{{alarm.warningQuantity ? alarm.warningQuantity : '暂无数据'}}</strong></span>
             </div>
           </div>
         </div>
         <div class="case-box case-right">
-          <div class="case-title">未处理事件</div>
+          <div class="case-title">事件提醒</div>
           <div class="case-content">
             <div class="case-two">
-              <span><strong class="sign">7</strong>件</span>
+              <span><strong class="sign">{{alarm.todayEventTotal ? alarm.todayEventTotal : '暂无数据'}}</strong></span>
             </div>
           </div>
         </div>
@@ -255,13 +255,13 @@
       <div class="home-footer-blue"></div>
       <div class="home-footer-map"></div>
       <div class="home-footer-scatter"></div>
-      <div :class="['home-footer-flash', isFlash ? 'flash1': '']"></div>
+      <div :class="['home-footer-flash']"></div>
     </div>
   </div>
 </template>
 
 <script>
-import {getScreen, getListLargeScreen, getEnvList, getAlarmAndPig} from "@/utils/api";
+import {getScreen, getListLargeScreen, getEnvList, getAlarmAndPig, alarmHome} from "@/utils/api";
 
 export default {
   name: "Home",
@@ -326,7 +326,8 @@ export default {
         personPassSuccess: "",
         tadaySiZhu: "",
         tadayXiXiao: "",
-      }
+      },
+      alarm: {}
     }
   },
   methods: {
@@ -356,6 +357,11 @@ export default {
           this.pig = res.data;
         }
       })
+      alarmHome({}).then(res => {
+        if(res.code === 10000) {
+          this.alarm = res.data;
+        }
+      })
     },
     prev() {
       if(this.num > 0) {
@@ -406,14 +412,6 @@ export default {
         })
       }, 3000)
     },
-    initFalsh() {
-      let that = this;
-      this.timer3 = setInterval(() => {
-        setTimeout(() => {
-          that.isFlash = !that.isFlash
-        })
-      }, 500)
-    },
     jump(url) {
       this.$router.push(url);
     },
@@ -428,7 +426,6 @@ export default {
   beforeDestroy() {
     clearInterval(this.timer);
     clearInterval(this.timer2);
-    clearInterval(this.timer3);
   }
 }
 </script>
@@ -722,10 +719,15 @@ export default {
     top: -80%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background: linear-gradient(to bottom, rgba(4, 5, 26, .1), rgba(4, 5, 26, .3));
-  }
-  .flash1 {
     background: linear-gradient(to bottom, rgba(102, 255, 255, .1), rgba(102, 255, 255, .3));
-    /*background-color: rgba(102, 255, 255, .2);*/
+    animation: breathLamp 1.5s alternate infinite;
+  }
+  @keyframes breathLamp {
+    0% {
+      opacity: .1;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 </style>

src/views/MainLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="MainLayout">
-    <div class="main-title">{{title}}</div>
+    <div class="main-title" @click="isShow = true ">{{title}}</div>
     <div class="main-left">
       <!--  天气    -->
       <div v-show="isHome" class="main-home" @click="showWeather = true">
@@ -70,11 +70,17 @@
         <iframe style="width: 800px; height: 800px; z-index: 9999" src="static/weather/index.html" frameborder="0"></iframe>
       </div>
     </transition>
+    <div class="bio-dialog" v-show="isShow" @click="isShow = false">
+      <div class="dialog-content">
+        <h2>牧场列表</h2>
+        <div class="div-text" v-for="item in xList" :key="item.id" @click="jumps(item.url)">{{item.name}}</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import {getFarmId, getWeather} from "@/utils/api";
+import {getFarmId, getWeather, getXFarm} from "@/utils/api";
 import { mapActions } from 'vuex'
 
 export default {
@@ -89,6 +95,8 @@ export default {
       weather: {},
       // 天气报警
       weatherInfo: {},
+      xList: [],
+      isShow: false
     }
   },
   watch: {
@@ -146,6 +154,11 @@ export default {
           this.refresh()
         }
       })
+      getXFarm({id: 0}).then(res => {
+        if(res.code === 10000) {
+          this.xList = res.data
+        }
+      })
     },
     // 刷新拿到数据
     refresh() {
@@ -156,7 +169,10 @@ export default {
           console.log(this.weatherInfo)
         }
       })
-    }
+    },
+    jumps(url) {
+      location.href = url;
+    },
   },
   mounted() {
     this.init()
@@ -204,6 +220,7 @@ export default {
     color: #66FFFF;
     font-size: 22px;
     font-weight: 600;
+    cursor: pointer;
   }
   .main-left {
     width: 180px;
@@ -400,4 +417,43 @@ export default {
     font-size: 16px;
     color: #289882
   }
+  .bio-dialog {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(0,0,0, .9);
+    z-index: 999;
+  }
+  .dialog-content {
+    width: 30%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -70%);
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+    padding: 20px;
+    color: #fff;
+    text-align: center;
+  }
+  .div-text {
+    width: 400px;
+    height: 60px;
+    background: url("../assets/101.png") no-repeat;
+    background-size: 100% 100%;
+    line-height: 60px;
+    margin: 20px auto;
+    font-size: 20px;
+    color: white;
+    text-align: center;
+    border-bottom: 1px solid #53bafd;
+    cursor: pointer;
+  }
+  .div-text:hover {
+    background-color: white;
+    color: #53bafd;
+    cursor: pointer;
+  }
 </style>