生物安防

src/utils/api.js

@@ -204,3 +204,49 @@ export function getEnvList(data) {
     params: data
   })
 }
+
+/** 报警列表 **/
+export function getAlarmList(data) {
+  return axios({
+    url: 'env/alarm/getTodayAlarm',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 车辆烘干  **/
+export function getHoure(data) {
+  return axios({
+    url: 'http://192.168.1.171:8089/telecom/listeventByHoure',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 报警分级 **/
+export function getWeekInfo(data) {
+  return axios({
+    url: 'env/alarm/getOneWeekAlarm',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 今日报警 **/
+export function getAlarmRate(data) {
+  return axios({
+    url: 'env/alarm/getTodayAlarmRate',
+    method: 'get',
+    params: data
+  })
+}
+
+/**  事件分布 **/
+export function getCountByDay(data) {
+  return axios({
+    url: 'http://192.168.1.171:10253/produce/screen/alarmCount/CountByDay',
+    method: 'get',
+    params: data
+  })
+}
+

src/views/Alarm/Alarm.vue

@@ -9,7 +9,7 @@
             <div class="alarm-title-right"></div>
           </div>
           <div class="alarm-content" style="background: #0F152B">
-            <chart-pie></chart-pie>
+            <chart-pie :data="alarmPie"></chart-pie>
           </div>
         </div>
         <div class="alarm-divide">
@@ -19,7 +19,7 @@
             <div class="alarm-title-right"></div>
           </div>
           <div class="alarm-content">
-            <alarm-bar></alarm-bar>
+            <alarm-bar :barData="list"></alarm-bar>
           </div>
         </div>
       </div>
@@ -95,7 +95,7 @@
       <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">
@@ -110,22 +110,19 @@
         </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%">
+            <div class="box" v-for="(item, i) in alarmList" :key="i">
+              <el-row :gutter="20" style="width: 600px; height: 100%">
                 <el-col :span="2"  style="height: 100%">
-                  <div :class="['box-logo', item === 1 ? 'logo1' : '', item === 2 ? 'logo2' : '', item === 3 ? 'logo3' : '' ]">{{item}}</div>
+                  <div :class="['box-logo', i+1 === 1 ? 'logo1' : '', i+1 === 2 ? 'logo2' : '', i+1 === 3 ? 'logo3' : '' ]">{{i+1}}</div>
                 </el-col>
-                <el-col :span="10"  style="height: 100%">
-                  <div>育肥1栋3单元温度过高！</div>
+                <el-col :span="14"  style="height: 100%">
+                  <div style="text-align: left">{{item.msg}}</div>
                 </el-col>
                 <el-col :span="4"  style="height: 100%">
-                  <div>17:45:21</div>
+                  <div>{{item.levelName}}</div>
                 </el-col>
                 <el-col :span="4"  style="height: 100%">
-                  <div>二级</div>
-                </el-col>
-                <el-col :span="4"  style="height: 100%">
-                  <div>处理</div>
+                  <div>{{item.warningTime}}</div>
                 </el-col>
               </el-row>
             </div>
@@ -148,13 +145,30 @@
         </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 v-for="(item, i) in personList" :key="i">
+              <div class="case" @click="open(item)">
+                <div class="case-left">
+                  <img :src="item.recordImage" width="100%" alt="">
+                </div>
+                <div class="case-right" style="text-align: left">
+                  <div style="text-align: left">{{item.swingTime}}</div>
+                  <div style="color: white; line-height: 30px">陌生人</div>
+                  <div style="color: white; line-height: 30px">
+                    进入区域：
+                    <span style="padding-left: 10px">{{item.deviceName}}</span>
+                  </div>
+                </div>
+              </div>
             </swiper-slide>
           </swiper>
         </div>
       </div>
     </div>
+    <div class="bio-dialog" v-show="dialog" @click="dialog = false">
+      <div class="dialog-content1">
+        <img :src="selectImg" width="100%" alt="">
+      </div>
+    </div>
   </div>
 </template>
 
@@ -165,7 +179,10 @@ 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'
+import {getAlarmList, getWeekInfo, getPersonList, getFaceToken, getAlarmRate, getCountByDay} from "@/utils/api";
 import img from '@/assets/Alarm/111.png';
+import {timeDate} from "@/utils";
+
 export default {
   name: "Alarm",
   components: {
@@ -180,26 +197,10 @@ export default {
     return {
       barData: {
         id: 1,
-        salvProName: ['死猪运输', '车辆洗消', '人员违规', '猪只出售'],
-        salvProValue: [489, 301, 315, 341]
+        salvProName: [],
+        salvProValue: []
       },
       pieData: [
-        {
-          name: '死猪运输',
-          value: 42
-        },
-        {
-          name: '车辆洗消',
-          value: 26
-        },
-        {
-          name: '人员违规',
-          value: 20
-        },
-        {
-          name: '猪只出售',
-          value: 12
-        },
       ],
       timeData: {
         id: 1,
@@ -229,6 +230,16 @@ export default {
       button2: 0,
       button3: 0,
       button4: 0,
+      alarmList: [],
+      list: {
+        id: 2,
+        salvProName: ['一级', '二级', '三级'],
+        salvProValue: [0, 0, 0]
+      },
+      personList: [],
+      selectImg: '',
+      dialog: false,
+      alarmPie: [],
     }
   },
   methods: {
@@ -358,9 +369,60 @@ export default {
       }
       imgs.src = img;
     },
+    init() {
+      getAlarmList({quantity: 9}).then(res => {
+        if(res.code === 10000) {
+          this.alarmList = res.data;
+        }
+      })
+      getWeekInfo({}).then(res => {
+        if(res.code === 10000) {
+          this.list.salvProValue = [res.data.one, res.data.two, res.data.three];
+        }
+      })
+      let params = {
+        pageNum: 1,
+        pageSize: 20,
+        startSwingTime: timeDate(new Date().getTime()) + '00:00:00',
+        endSwingTime: timeDate(new Date().getTime()) + '23:59:59',
+        containDomain: 1,
+        openResult: 0
+      }
+      getPersonList(params).then(async res => {
+        let result = JSON.parse(res.result);
+        this.personList = result.data.pageData;
+        const { token } = await getFaceToken();
+        this.personList.forEach((item) => {
+          item.channelName = item.channelName.split("人脸门禁")[0];
+          item.recordImage = `https://36.26.62.70:447/evo-pic/${item.recordImage}?token=${token}&oss_addr=172.16.3.223:8925`;
+        });
+      })
+      getAlarmRate({}).then(res => {
+        if(res.code === 10000) {
+          this.alarmPie = res.data;
+        }
+      })
+      getCountByDay({}).then(res => {
+        if(res.code === 10000) {
+          this.barData.salvProName = [];
+          this.barData.salvProValue = [];
+          res.data.forEach(item => {
+            this.barData.salvProName.push(item.name);
+            this.barData.salvProValue.push(item.value);
+          })
+          this.pieData = res.data;
+        }
+      })
+    },
+    // 打开img
+    open(item) {
+      this.dialog = true;
+      this.selectImg = item.recordImage;
+    }
   },
   mounted() {
     this.initCanvas()
+    this.init();
   }
 }
 </script>
@@ -451,7 +513,7 @@ export default {
     justify-content: space-between;
   }
   .flex-left {
-    width: 500px;
+    width: 600px;
     height: 100%;
     box-sizing: border-box;
     padding-top: 20px;
@@ -513,6 +575,17 @@ export default {
     height: 100%;
     background: url("../../assets/BioSafety/some.png") no-repeat;
     background-size: 100% 100%;
+    display: flex;
+    cursor: pointer;
+  }
+  .case-left {
+    width: 82px;
+    height: 100%;
+    overflow: hidden;
+  }
+  .case-right {
+    margin-left: 10px;
+    flex: 1
   }
   #canvas {
     position: absolute;
@@ -568,4 +641,21 @@ export default {
     top: 100px;
     left: 340px;
   }
+  .bio-dialog {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(0,0,0 ,.6);
+    z-index: 999;
+  }
+  .dialog-content1 {
+    width: 15%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    /*background-color: #fff;*/
+  }
 </style>

src/views/Alarm/chart/AlarmBar.vue

@@ -18,6 +18,17 @@ export default {
       }
     }
   },
+  watch: {
+    barData: {
+      handler(newVal) {
+        if(newVal) {
+          this.myChart.clear()
+          this.init()
+        }
+      },
+      deep: true
+    }
+  },
   data() {
     return {
       myChart: null
@@ -130,4 +141,4 @@ export default {
 
 <style scoped>
 
-</style>
+</style>

src/views/Alarm/chart/ChartPie.vue

@@ -10,44 +10,65 @@ export default {
       myChart: null
     }
   },
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        if(newVal) {
+          this.myChart.clear();
+          this.init();
+        }
+      },
+      deep: true
+    }
+  },
   methods: {
     init() {
+      let arr = [];
+      let num = 0;
+      this.data.forEach(item => {
+        num+=item.value
+      })
+      this.data.forEach(item => {
+        arr.push({ name: item.name, percent: (parseFloat(item.value) / num * 100).toFixed(2) + '%', number: item.value})
+      })
       let options = {
-        // title: {
-        //   text: '报警总量',
-        //   x: 20,
-        //   y: 20
-        // },
         grid: {
           x: 100
         },
         tooltip: {
           trigger: 'item',
           formatter: function ({name, value, percent}) {
-            return name + '：' + value + '头    ' + percent + '%'
+            return name + '：' + value + '条    ' + percent + '%'
           }
         },
         legend: {
-          top: '25%',
+          top: '30%',
           left: '55%',
           orient: 'vertical',
           icon: "circle",
           selectedMode: false, // 取消右侧项选中
-          itemGap: 20, // 各项间隔
+          itemGap: 30, // 各项间隔
           textStyle: {
-            fontSize: 15,
+            fontSize: 13,
             color: '#666'
           },
           formatter: function (name) {
             var legendIndex = 0;
-            var clientLabels = [
-              { name: '环境报警', percent: parseFloat(0.16)*100 + '%', number: 2 },
-              { name: '断电报警', percent:  parseFloat(0.16)*100 + '%', number: 2 },
-              { name: '人员违规', percent:  parseFloat(0.16)*100 + '%', number: 2 },
-              { name: '环境监测', percent:  parseFloat(0.16)*100 + '%', number: 2 },
-              { name: '污水排放', percent:  parseFloat(0.16)*100 + '%', number: 2 },
-              { name: '设备异常', percent:  parseFloat(0.16)*100 + '%', number: 2 },
-            ]
+            // var clientLabels = [
+            //   { name: '环境报警', percent: parseFloat(0.16)*100 + '%', number: 2 },
+            //   { name: '断电报警', percent:  parseFloat(0.16)*100 + '%', number: 2 },
+            //   { name: '人员违规', percent:  parseFloat(0.16)*100 + '%', number: 2 },
+            //   { name: '环境监测', percent:  parseFloat(0.16)*100 + '%', number: 2 },
+            //   { name: '污水排放', percent:  parseFloat(0.16)*100 + '%', number: 2 },
+            //   { name: '设备异常', percent:  parseFloat(0.16)*100 + '%', number: 2 },
+            // ]
+            var clientLabels = arr
             clientLabels.forEach(function (value, i) {
               if (value.name == name) {
                 legendIndex = i;
@@ -59,7 +80,7 @@ export default {
         graphic: [
           {
             type: 'text',
-            left: '27%',
+            left: '22%',
             top: '43%',
             style: {
               text: '报警总量',
@@ -69,12 +90,13 @@ export default {
           },
           {
             type: 'text',
-            left: '25%',
+            left: '22%',
             top: '53%',
             style: {
-              text: 100 + '条',
+              text: num + '条',
               fontSize: 22,
-              fontWeight: 700
+              fontWeight: 700,
+              fill: 'rgb(192, 188, 189)'
             }
           }
         ],
@@ -109,14 +131,7 @@ export default {
                 borderColor: '#fff'
               }
             },
-            data: [
-              { value: 16, name: '环境报警' },
-              { value: 16, name: '断电报警' },
-              { value: 16, name: '人员违规' },
-              { value: 16, name: '环境监测' },
-              { value: 16, name: '污水排放' },
-              { value: 16, name: '设备异常' },
-            ]
+            data: this.data
           }
         ]
       };
@@ -137,4 +152,4 @@ export default {
 
 <style scoped>
 
-</style>
+</style>

src/views/Alarm/chart/CostPie.vue

@@ -20,23 +20,11 @@ export default {
         grid: {
           x: 100
         },
-        // legend: {
-        //   top: '25%',
-        //   left: '75%',
-        //   orient: 'vertical',
-        //   icon: "circle",
-        //   selectedMode: false, // 取消右侧项选中
-        //   itemGap: 20, // 各项间隔
-        //   textStyle: {
-        //     fontSize: 15,
-        //     color: '#666'
-        //   },
-        // },
         series: [
           {
             // name: 'Access From',
             type: 'pie',
-            radius: '70%', // 半径
+            radius: '60%', // 半径
             center: ['50%', '55%'],
             avoidLabelOverlap: false,
             labelLine: {
@@ -49,7 +37,7 @@ export default {
                   return colorList[colors.dataIndex]
                 },
                 label: {
-                  formatter: '{b}: {c}%'
+                  formatter: '{b}:{c}'
                 }
               },
               label: {
@@ -58,9 +46,9 @@ export default {
               emphasis: {
                 label: {
                   show: true,
-                  formatter: '{b}: {c}%',
+                  formatter: '{b}:{c}',
                   textStyle: {
-                    fontSize: '15',
+                    fontSize: '12',
                   }
                 },
                 itemStyle: {
@@ -83,9 +71,14 @@ export default {
     this.init()
   },
   watch: {
-    data(value) {
-      console.log('成本分析环形图数据', value)
-      this.init()
+    data: {
+      handler(newVal) {
+        if(newVal) {
+          this.myChart.clear()
+          this.init()
+        }
+      },
+      deep: true
     }
   }
 }

src/views/BioSafety/BioSafety.vue

@@ -56,11 +56,11 @@
             <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
               <swiper-slide v-for="(item, i) in carListContent" :key="i">
                 <div class="case" @click="open(item, 1)">
-                  <div class="case-time">{{ item.capTimeStr }}</div>
-                  <div class="case-box">
-                    <div class="case-img">
-                      <img :src="item.originalPicPath" width="100%" alt="">
-                    </div>
+                  <div class="case-left1">
+                    <img style="align-items: center;" :src="item.originalPicPath" width="100%" alt="">
+                  </div>
+                  <div class="case-right">
+                    <div class="case-time">{{ item.capTimeStr }}</div>
                     <div class="case-content">
                       <div class="content-grid">
                         <span>区域：</span>
@@ -118,21 +118,31 @@
             <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
               <swiper-slide v-for="(item, i) in personList" :key="i">
                 <div class="case" @click="open(item, 2)">
-                  <div class="case-time">{{item.swingTime}}</div>
-                  <div class="case-box">
-                    <div class="case-img" :style="{ backgroundSize: '100% 100%', background: `url(${item.recordImage})`}">
-<!--                      <img :src="item.recordImage" width="100%" alt="">-->
-                    </div>
-                    <div class="case-content">
-                      <div class="content-grid">
+                  <div class="case-left1">
+                    <img :src="item.recordImage" width="100%" alt="">
+                  </div>
+                  <div class="case-right">
+                    <div class="case-time">{{item.swingTime}}</div>
+                    <div style="text-align: left; margin-left: 10px">
+                      <div style="color: white; line-height: 30px">
                         <span>姓名：</span>
                         <span>{{item.personName}}</span>
                       </div>
-                      <div class="content-grid">
-                        <span>进入区域：</span>
-                        <span>{{item.channelName}}</span>
+                      <div style="color: white; line-height: 30px">
+                        进入区域：
+                        <span style="padding-left: 10px">{{item.deviceName}}</span>
                       </div>
                     </div>
+<!--                    <div class="case-content">-->
+<!--                      <div class="content-grid">-->
+<!--                        <span>姓名：</span>-->
+<!--                        <span>{{item.personName}}</span>-->
+<!--                      </div>-->
+<!--                      <div class="content-grid">-->
+<!--                        <span>进入区域：</span>-->
+<!--                        <span>{{item.channelName}}</span>-->
+<!--                      </div>-->
+<!--                    </div>-->
                   </div>
                 </div>
               </swiper-slide>
@@ -184,7 +194,7 @@
       <div class="bio-flex-1-center">
         <div class="bio-title">
           <div class="bio-title-left"></div>
-          <div class="bio-title-center">物资熏蒸</div>
+          <div class="bio-title-center">车辆烘干</div>
           <div class="bio-title-right"></div>
         </div>
         <div class="bio-vertical">
@@ -226,14 +236,14 @@
             <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
               <swiper-slide v-for="(item, i) in sizhuList" :key="i">
                 <div class="case case1" @click="open(item, 3)">
-                  <div class="case-time">{{ item.alarmDate }}</div>
-                  <div class="case-box">
-                    <div class="case-img1">
-                      <img :src="item.alarmPicture" width="100%" alt="">
-                    </div>
+                  <div class="case-left">
+                    <img :src="item.alarmPicture" width="100%" alt="">
+                  </div>
+                  <div class="case-right">
+                    <div class="case-time">{{ item.alarmDate }}</div>
                     <div class="case-content1">
-                        <span>位置：</span>
-                        <span>{{item.alarmPosition}}</span>
+                      <span>位置：</span>
+                      <span>{{item.alarmPosition}}</span>
                     </div>
                   </div>
                 </div>
@@ -258,7 +268,7 @@
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/css/swiper.css'
 import ChartBar from "@/views/BioSafety/chart/ChartBar";
-import {getCar, getRecord, getSizhu, getCarList, getPersonList, getFaceToken, getSizhuList} from "@/utils/api";
+import {getCar, getRecord, getSizhu, getCarList, getPersonList, getFaceToken, getSizhuList, getHoure} from "@/utils/api";
 import axios from "axios";
 import {timeDate} from "@/utils";
 
@@ -309,8 +319,8 @@ export default {
       },
       data3: {
         id: 3,
-        time: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
-        data: [21, 13, 10, 14, 20, 23, 21],
+        time: [],
+        data: [],
         name: '',
         unit: '次'
       },
@@ -469,6 +479,17 @@ export default {
           });
         })
 
+        getHoure({}).then(res => {
+          if(res.code === 10000) {
+            this.data3.time = [];
+            this.data3.data = [];
+            res.data.forEach(item => {
+              this.data3.time.push(item.time);
+              this.data3.data.push(item.value);
+            })
+          }
+        })
+
       })
       // 死猪列表
     },
@@ -690,6 +711,7 @@ export default {
     background: url("../../assets/BioSafety/some.png") no-repeat;
     background-size: 100% 100%;
     position: relative;
+    display: flex;
   }
   .bio-flex-1 {
     width: 100%;
@@ -782,6 +804,19 @@ export default {
   .case1 {
     height: 60px;
   }
+  .case-left1 {
+    width: 60px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+  .case-left {
+    width: 100px;
+    height: 100%;
+  }
+  .case-right {
+    flex: 1;
+  }
   .case-time {
     width: 100%;
     height: 12px;
@@ -789,7 +824,6 @@ export default {
     line-height: 12px;
     text-align: left;
     /*text-align: center;*/
-    padding-left: 70px;
     font-size: 12px;
     color: #333
   }
@@ -801,17 +835,17 @@ export default {
   }
   .case-img {
     width: 60px;
-    height: 45px;
+    height: 100%;
     /*background-size: 100% 100%;*/
   }
   .case-img1 {
-    width: 70px;
-    height: 45px;
+    width: 120px;
+    height: 100%;
     /*background-size: 100% 100%;*/
   }
   .case-content {
-    width: calc(100% - 60px);
-    height: 100%;
+    width: 100%;
+    height: calc(100% - 14px);
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, 1fr);
@@ -819,8 +853,8 @@ export default {
     grid-row-gap: 0px;
   }
   .case-content1 {
-    width: calc(100% - 80px);
-    height: 100%;
+    width: 100%;
+    height: calc(100% - 14px);
     text-align: center;
     color: white;
     line-height: 30px;

src/views/Environment/Environment.vue

@@ -50,7 +50,7 @@
 
     <div class="env-side">
       <div class="env-side-item item-bgc">
-        <pro-board :title="'流量'">
+        <pro-board :title="'污水'">
           <div class="env-side-item-content">
             <chart-dashboard :id="5" :data="liuData"></chart-dashboard>
           </div>
@@ -107,8 +107,8 @@ export default {
       liuData: {
         data: 0,
         splitNumber: 12,
-        max: 240,
-        unit: 'T'
+        max: 0.6,
+        unit: 'L/s'
       },
       nhData: {
         data: 0,