生物安防

src/utils/api.js

@@ -114,3 +114,93 @@ export function getCar(data) {
     params: data
   })
 }
+
+/** 门禁管理图表 **/
+export function getRecord(data) {
+  return axios({
+    url: 'http://192.168.1.171:10253/produce/screen/person/count_person_record',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 保存video **/
+export function saveVideo(data) {
+  return axios({
+    url: 'admin/accountMultilevel/updateVideoId',
+    method: 'get',
+    params: data
+  })
+}
+
+/**  拿到上一次的video **/
+export function lastVideo(data) {
+  return axios({
+    url: 'video/camera/initCamera',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 循环拿到video **/
+export function romVideo(data) {
+  return axios({
+    url: 'video/camera/listScreenCamera',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 死猪 **/
+export function getSizhu(data) {
+  return axios({
+    url: 'http://192.168.1.171:10253/produce/screen/sizhu/count_sizhu_record',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 车辆通行列表 **/
+export function getCarList(data) {
+  return axios({
+    url: 'http://192.168.1.171:10253/produce/car/get_car_record',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 人脸闸机 **/
+export function getPersonList(data) {
+  return axios({
+    url: 'http://192.168.1.171:10253/produce/person/get_person_record',
+    method: 'post',
+    data: data
+  })
+}
+
+/** 人员管理 - 人脸门禁 - Token */
+export function getFaceToken(data) {
+  return axios({
+    url: 'http://192.168.1.171:10253/produce/token/getToken',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 死猪 **/
+export function getSizhuList(data) {
+  return axios({
+    url: 'http://192.168.1.171:10253/produce/accident/accident_record_xixiao',
+    method: 'post',
+    data: data
+  })
+}
+
+/** 环保  **/
+export function getEnvList(data) {
+  return axios({
+    url: 'env/environ/getLastEnviron',
+    method: 'get',
+    params: data
+  })
+}

src/views/BioSafety/BioSafety.vue

@@ -54,14 +54,39 @@
           </div>
           <div class="bio-content-right">
             <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 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-content">
+                      <div class="content-grid">
+                        <span>区域：</span>
+                        <span>{{item.devChnName}}</span>
+                      </div>
+                      <div class="content-grid">
+                        <span>车牌号：</span>
+                        <span>{{item.carNum ? item.carNum : '未识别'}}</span>
+                      </div>
+                      <div class="content-grid">
+                        <span>方向：</span>
+                        <span>{{item.carDirectStr}}</span>
+                      </div>
+                      <div class="content-grid">
+                        <span>车辆颜色：</span>
+                        <span>{{item.parkingCarColor}}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </swiper-slide>
             </swiper>
           </div>
         </div>
         <div class="bio-content">
-          <chart-bar :data="data0"></chart-bar>
+          <chart-bar :data="carList"></chart-bar>
         </div>
       </div>
       <div class="bio-flex-center">
@@ -91,8 +116,25 @@
           </div>
           <div class="bio-content-right">
             <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, 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">
+                        <span>姓名：</span>
+                        <span>{{item.personName}}</span>
+                      </div>
+                      <div class="content-grid">
+                        <span>进入区域：</span>
+                        <span>{{item.channelName}}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </swiper-slide>
             </swiper>
           </div>
@@ -161,7 +203,7 @@
               <div class="title-left"></div>
               <div class="title-center">
                 <span>视频抓取数</span>
-                <strong>&nbsp;126</strong>
+                <strong>&nbsp;{{value1}}</strong>
               </div>
               <div class="title-right"></div>
             </div>
@@ -169,27 +211,46 @@
               <div class="content-img content-img-2"></div>
               <div style="color: white; font-size: 14px">
                 <p>七日抓取次数</p>
-                <span><strong style="font-size: 22px; font-weight: 600">99</strong></span>
+                <span><strong style="font-size: 22px; font-weight: 600">{{value2}}</strong></span>
               </div>
             </div>
             <div class="bio-vertical-content">
               <div class="content-img content-img-3"></div>
               <div style="color: white; font-size: 14px">
                 <p>最近抓取时间</p>
-                <span><strong style="font-size: 22px; font-weight: 600">07-01</strong></span>
+                <span><strong style="font-size: 22px; font-weight: 600">{{value3}}</strong></span>
               </div>
             </div>
           </div>
           <div class="bio-vertical-right">
             <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 case1"></div>
+              <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-content1">
+                        <span>位置：</span>
+                        <span>{{item.alarmPosition}}</span>
+                    </div>
+                  </div>
+                </div>
               </swiper-slide>
             </swiper>
           </div>
         </div>
       </div>
     </div>
+    <div class="bio-dialog" v-show="dialog" @click="dialog = false">
+      <div class="dialog-content" v-if="type === 1 || type === 3">
+        <img :src="selectImg" width="100%" alt="">
+      </div>
+      <div class="dialog-content1" v-else-if="type === 2">
+        <img :src="selectImg" width="100%" alt="">
+      </div>
+    </div>
   </div>
 </template>
 
@@ -197,7 +258,9 @@
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/css/swiper.css'
 import ChartBar from "@/views/BioSafety/chart/ChartBar";
-import {getCar} from "@/utils/api";
+import {getCar, getRecord, getSizhu, getCarList, getPersonList, getFaceToken, getSizhuList} from "@/utils/api";
+import axios from "axios";
+import {timeDate} from "@/utils";
 
 export default {
   name: "BioSafety",
@@ -223,17 +286,17 @@ export default {
         //   clickable: true
         // }
       },
-      data0: {
+      carList: {
         id: 11,
         time: [],
         data: [],
         name: '',
-        unit: '分钟'
+        unit: '次'
       },
       data1: {
         id: 1,
-        time: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
-        data: [12, 13, 10, 13, 90, 23, 21],
+        time: [],
+        data: [],
         name: '',
         unit: '人次'
       },
@@ -250,21 +313,176 @@ export default {
         data: [21, 13, 10, 14, 20, 23, 21],
         name: '',
         unit: '次'
-      }
+      },
+      value1: '',
+      value2: '',
+      value3: '',
+      carListContent: [],
+      dialog: false,
+      selectImg: '',
+      type: 1,
+      personList: [],
+      sizhuList: [],
+      token: ''
     }
   },
   methods: {
     init() {
-      this.data0.time = [];
-      this.data0.data = [];
-      getCar({}).then(res => {
-        if(res.code === 10000) {
-          res.data.forEach(item => {
-            this.data0.time.push(item.time);
-            this.data0.data.push(item.value);
+      var that = this;
+      axios.all([
+        getCar({}),
+          getRecord({})
+      ]).then(axios.spread(function (res1, res2){
+        if(res1.code === 10000) {
+          that.carList.time = [];
+          that.carList.data = [];
+          that.data1.time = [];
+          that.data1.data = [];
+          res1.data.forEach(item => {
+            that.carList.time.push(item.time);
+            that.carList.data.push(item.value);
+          })
+        }
+        if(res2.code === 10000) {
+          res2.data.forEach(item => {
+            that.data1.time.push(item.time);
+            that.data1.data.push(item.value);
           })
         }
+      }))
+      getSizhu({}).then(res => {
+        if(res.code=== 10000) {
+          this.value1 = res.data.value2;
+          this.value2 = res.data.value1;
+          this.value3 = res.data.value3;
+        }
+      })
+      // 车辆管理列表
+      getCarList({pageNum:1,pageSize: 21}).then(res => {
+        if(res.code == 200) {
+          const result = JSON.parse(res.result);
+          this.carListContent = result.data.pageData;
+          this.carListContent.forEach((item) => {
+            item.originalPicPath = `https://36.26.62.70:447/evo-apigw/${item.originalPicPath}`;
+            item.devChnName = item.devChnName.split("_")[0];
+          });
+          // this.carListContent = res.data;
+        }
+      })
+      // 门禁管理列表
+      let params1 = {
+        openType: 61,
+        pageNum:1,
+        pageSize: 21,
+        startSwingTime: timeDate(new Date().getTime()) + '00:00:00',
+        endSwingTime: timeDate(new Date().getTime()) + '23:59:59',
+      }
+      getPersonList(params1).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`;
+          });
+
+        let queryParams = {
+          pageNum: 1,
+          pageSize: 21,
+          alarmStartDateString: timeDate(new Date().getTime()) + " 00:00:00",
+          alarmEndDateString: timeDate(new Date().getTime()) + " 23:59:59",
+          nodeCodeList: [
+            "1002874$1$0$0",
+            "1002875$1$0$0",
+            "1002876$1$0$0",
+            "1002877$1$0$0",
+            "1002878$1$0$0",
+            "1002879$1$0$0",
+            "1002880$1$0$0",
+            "1002881$1$0$0",
+            "1002882$1$0$0",
+            "1002883$1$0$0",
+            "1002884$1$0$0",
+            "1002885$1$0$0",
+            "1002886$1$0$0",
+            "1002887$1$0$0",
+            "1002888$1$0$0",
+            "1002889$1$0$0",
+            "1002890$1$0$0",
+            "1002891$1$0$0",
+            "1002892$1$0$0",
+            "1002893$1$0$0",
+            "1002894$1$0$0",
+            "1002895$1$0$0",
+            "1002896$1$0$0",
+            "1002897$1$0$0",
+            "1002898$1$0$0",
+            "1002899$1$0$0",
+            "1002900$1$0$0",
+            "1002901$1$0$0",
+            "1002902$1$0$0",
+            "1002903$1$0$0",
+            "1002904$1$0$0",
+            "1002905$1$0$0",
+            "1002906$1$0$0",
+            "1002907$1$0$0",
+            "1002908$1$0$0",
+            "1002909$1$0$0",
+            "1002910$1$0$0",
+            "1002911$1$0$0",
+            "1002912$1$0$0",
+            "1002913$1$0$0",
+            "1002939$1$0$0",
+            "1002939$1$0$1",
+            "1002939$1$0$2",
+            "1002939$1$0$3",
+            "1002939$1$0$4",
+            "1002939$1$0$5",
+            "1002939$1$0$6",
+            "1002939$1$0$7",
+            "1002939$1$0$8",
+            "1002939$1$0$9",
+            "1002940$1$0$0",
+            "1002940$1$0$1",
+            "1002940$1$0$2",
+            "1002940$1$0$3",
+            "1002940$1$0$4",
+            "1002940$1$0$5",
+            "1002940$1$0$6",
+            "1002940$1$0$7",
+            "1002939$1$0$10",
+            "1002939$1$0$11",
+            "1002939$1$0$12",
+            "1002939$1$0$13",
+            "1002939$1$0$14",
+            "1002939$1$0$15",
+          ],
+          deviceCategory: 1,
+          alarmType: 303,
+          dbType: 0,
+        };
+        await getSizhuList(queryParams).then( res => {
+          const result = JSON.parse(res.result);
+          this.sizhuList = result.data.pageData;
+          this.sizhuList.forEach((item) => {
+            item.alarmPicture = `https://36.26.62.70:447/evo-pic/${item.alarmPicture}?token=${token}&oss_addr=172.16.3.223:8925`;
+          });
+        })
+
       })
+      // 死猪列表
+    },
+    // 打开img
+    open(item, num) {
+      this.dialog = true;
+      this.type = num;
+      if(num === 1) {
+        this.selectImg = item.originalPicPath;
+      } else if(num === 2) {
+        this.selectImg = item.recordImage;
+      } else {
+        this.selectImg = item.alarmPicture;
+      }
     }
   },
   mounted() {
@@ -471,6 +689,7 @@ export default {
     height: 100%;
     background: url("../../assets/BioSafety/some.png") no-repeat;
     background-size: 100% 100%;
+    position: relative;
   }
   .bio-flex-1 {
     width: 100%;
@@ -496,7 +715,7 @@ export default {
     justify-content: space-between;
   }
   .bio-vertical-left {
-    width: 165px;
+    width: 200px;
     height: 100%;
   }
   .bio-vertical-right {
@@ -563,4 +782,81 @@ export default {
   .case1 {
     height: 60px;
   }
+  .case-time {
+    width: 100%;
+    height: 12px;
+    box-sizing: border-box;
+    line-height: 12px;
+    text-align: left;
+    /*text-align: center;*/
+    padding-left: 70px;
+    font-size: 12px;
+    color: #333
+  }
+  .case-box {
+    width: 100%;
+    height: calc(100% - 15px);
+    display: flex;
+    align-items: center;
+  }
+  .case-img {
+    width: 60px;
+    height: 45px;
+    /*background-size: 100% 100%;*/
+  }
+  .case-img1 {
+    width: 70px;
+    height: 45px;
+    /*background-size: 100% 100%;*/
+  }
+  .case-content {
+    width: calc(100% - 60px);
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+  }
+  .case-content1 {
+    width: calc(100% - 80px);
+    height: 100%;
+    text-align: center;
+    color: white;
+    line-height: 30px;
+  }
+  .content-grid {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    text-align: left;
+    padding-left: 10px;
+    line-height: 30px;
+    color: white;
+  }
+  .bio-dialog {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(0,0,0 ,.6);
+    z-index: 999;
+  }
+  .dialog-content {
+    width: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    /*background-color: #fff;*/
+  }
+  .dialog-content1 {
+    width: 15%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    /*background-color: #fff;*/
+  }
 </style>

src/views/BioSafety/chart/ChartBar.vue

@@ -19,6 +19,17 @@ export default {
       }
     }
   },
+  watch: {
+    data: {
+      handler(newVal) {
+        if(newVal) {
+          this.myChart.clear();
+          this.init()
+        }
+      },
+      deep: true
+    }
+  },
   data() {
     return {
       myChart: null
@@ -98,14 +109,9 @@ export default {
               barBorderRadius: 3,
             },
             label: {
-              show: true, //开启显示
-              position: "top", //在上方显示
-              textStyle: {
-                //数值样式
-                color: "#fff",
-                fontSize: 14,
-              },
-              formatter: "{c}",
+              show: true,
+              position: 'top',
+              color: '#fff'
             },
             symbolRepeat: true,
             symbolSize: [20, 3],

src/views/Environment/Environment.vue

@@ -24,7 +24,7 @@
         </pro-board>
       </div>
     </div>
-    
+
     <div class="env-certain">
       <div class="env-certain-top">
         <div class="kuang"></div>
@@ -70,6 +70,7 @@
 <script>
 import ProBoard from '../Production/board/ProBoard.vue'
 import ChartDashboard from './charts/ChartDashboard.vue'
+import { getEnvList } from "@/utils/api";
 
 export default {
   name: "Environment",
@@ -80,43 +81,58 @@ export default {
   data() {
     return {
       phData: {
-        data: 5.67,
-        splitNumber: 13,
-        max: 13,
+        data: 0,
+        splitNumber: 14,
+        max: 14,
         unit: ''
       },
       codData: {
-        data: 61.091,
+        data: 0,
         splitNumber: 12,
-        max: 120,
+        max: 540,
         unit: 'mg/L'
       },
       totalPData: {
-        data: 0.323,
+        data: 0,
         splitNumber: 12,
         max: 1.2,
         unit: 'mg/L'
       },
       totalNData: {
-        data: 31.091,
+        data: 0,
         splitNumber: 12,
         max: 60,
         unit: 'mg/L'
       },
       liuData: {
-        data: 143.26,
+        data: 0,
         splitNumber: 12,
         max: 240,
         unit: 'T'
       },
       nhData: {
-        data: 0.6191,
+        data: 0,
         splitNumber: 12,
         max: 1.2,
         unit: 'mg/L'
       }
     }
   },
+  methods: {
+    init() {
+      getEnvList({}).then(res => {
+        if(res.code=== 10000) {
+          this.phData.data = res.data.phPj;
+          this.codData.data = res.data.hxxylPj;
+          this.liuData.data = res.data.wsPj;
+          this.nhData.data = res.data.adPj;
+        }
+      })
+    }
+  },
+  mounted() {
+    this.init()
+  }
 }
 </script>
 
@@ -187,4 +203,4 @@ export default {
   height: 100%;
   margin: auto;
 }
-</style>
+</style>

src/views/Environment/charts/ChartDashboard.vue

@@ -21,6 +21,17 @@ export default {
       required: true
     }
   },
+  watch: {
+    data: {
+      handler(newVal){
+        if (newVal) {
+          this.myChart.clear();
+          this.init();
+        }
+      },
+      deep: true
+    }
+  },
   data() {
     return {
       myChart: null
@@ -119,12 +130,6 @@ export default {
     this.myChart = this.$echarts.init(document.getElementById('dashboard' + this.id));
     this.init()
   },
-  watch: {
-    data(newValue) {
-      console.log('仪表盘的数据', newValue)
-      this.init()
-    }
-  }
 }
 </script>
 <style scoped>

src/views/Home/Home.vue

@@ -187,23 +187,23 @@
           <div class="case-title">COD</div>
           <div class="case-content">
             <div class="case-two">
-              <span><strong class="sign">7.54</strong>mg/L</span>
+              <span><strong class="sign">{{envList.cod ? envList.cod : '设备暂无数据'}}</strong>{{envList.cod ? 'mg/L' : ''}}</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">123.57</strong>T</span>
+              <span><strong class="sign">{{envList.liu ?  envList.liu : '设备暂无数据'}}</strong>{{envList.liu ?  'T' : ''}}</span>
             </div>
           </div>
         </div>
         <div class="case-center">
-          <div class="case-title">总磷</div>
+          <div class="case-title">ph</div>
           <div class="case-content">
             <div class="case-two">
-              <span><strong class="sign">0.323</strong>mg/L</span>
+              <span><strong class="sign">{{envList.ph ? envList.ph : '设备暂无数据'}}</strong>{{envList.ph ? 'mg/L' : ''}}</span>
             </div>
           </div>
         </div>
@@ -211,7 +211,7 @@
           <div class="case-title">氨氮</div>
           <div class="case-content">
             <div class="case-two">
-              <span><strong class="sign">0.619</strong>mg/L</span>
+              <span><strong class="sign">{{envList.ad ? envList.ad : '设备暂无数据'}}</strong>{{envList.ad ? 'mg/L' : ''}}</span>
             </div>
           </div>
         </div>
@@ -261,7 +261,7 @@
 </template>
 
 <script>
-import {getScreen, getListLargeScreen} from "@/utils/api";
+import {getScreen, getListLargeScreen, getEnvList} from "@/utils/api";
 
 export default {
   name: "Home",
@@ -316,6 +316,7 @@ export default {
       currentTime: new Date(),
       env: {},
       pro: {},
+      envList: {}
     }
   },
   methods: {
@@ -330,6 +331,16 @@ export default {
           this.pro = res.data;
         }
       })
+      getEnvList({}).then(res => {
+        if(res.code === 10000) {
+          this.envList = {
+            ph: res.data.phPj,
+            cod: res.data.hxxylPj,
+            liu: res.data.wsPj,
+            ad: res.data.adPj
+          }
+        }
+      })
     },
     prev() {
       if(this.num > 0) {

src/views/MainLayout.vue

@@ -85,7 +85,7 @@ export default {
       showWeather: false,
       weather: {},
       // 天气报警
-      weatherInfo: {}
+      weatherInfo: {},
     }
   },
   watch: {

src/views/Monit/Monit.vue

@@ -7,7 +7,7 @@
           :options="options"
           size="mini"
           @change="handleChange"
-          :props="{value: 'id', label: 'cameraName', children: 'cameraList', expandTrigger: 'hover'}"
+          :props="{value: 'id', label: 'cameraName', children: 'cameraList', expandTrigger: 'hover', disabled: 'runStatus'}"
           :show-all-levels="false"></el-cascader>
 <!--        <div>-->
 <!--          <span>配怀舍过道东&emsp;</span>-->
@@ -52,8 +52,10 @@
     </div>
     <div class="monit-right">
       <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 videoList" :key="i">
+          <div class="case">
+            <iframe  :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
+          </div>
         </swiper-slide>
       </swiper>
     </div>
@@ -63,7 +65,8 @@
 <script>
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/css/swiper.css'
-import {getVideoAll, getVideo} from "@/utils/api";
+import {getVideoAll, getVideo, saveVideo, lastVideo, romVideo} from "@/utils/api";
+import axios from "axios";
 
 export default {
   name: "Monit",
@@ -90,15 +93,41 @@ export default {
       options: [],
       cameraOne: '',
       cameraTwo: '',
+      videoList: [],
+      timer: null
     }
   },
   methods: {
     init() {
-      getVideoAll({}).then(res => {
-        if(res.code === 10000) {
-          this.options = res.data;
+      var that = this;
+      axios.all([
+        getVideoAll({}),
+          lastVideo({})
+      ]).then(axios.spread(function(res1, res2) {
+        if(res1.code === 10000) {
+          res1.data.forEach(item => {
+            item.cameraList.forEach(items => {
+              items.runStatus = !items.runStatus
+            })
+          })
+          that.options = res1.data;
         }
-      })
+        if(res2.code === 10000) {
+          that.isVideo = true;
+          that.cameraOne = res2.data.wsUrl;
+          that.cameraTwo = res2.data.rtspUrl;
+        }
+      }))
+      // getVideoAll({}).then(res => {
+      //   if(res.code === 10000) {
+      //     res.data.forEach(item => {
+      //       item.cameraList.forEach(items => {
+      //         items.runStatus = !items.runStatus
+      //       })
+      //     })
+      //     this.options = res.data;
+      //   }
+      // })
     },
     handleChange(value) {
       let val = value[value.length - 1];
@@ -109,11 +138,30 @@ export default {
         this.isVideo = true;
         this.cameraOne = res.data[0].wsUrl;
         this.cameraTwo = res.data[0].rtspUrl;
+        saveVideo({cameraId: val}).then(res => {
+          console.log(res)
+        })
       })
     },
+    initCrmea() {
+      romVideo({}).then(res => {
+       if(res.code === 10000) {
+         this.videoList = res.data;
+       }
+      })
+    }
   },
   mounted() {
     this.init()
+    this.initCrmea();
+    var that = this;
+    this.timer = setInterval(() => {
+     that.initCrmea();
+    }, 60000)
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+    this.timer = null;
   }
 }
 </script>
@@ -145,6 +193,8 @@ export default {
     height: 100%;
     background: url("../../assets/BioSafety/kuang.png") no-repeat;
     background-size: 100% 100%;
+    box-sizing: border-box;
+    padding: 20px;
   }
   .monit-title {
     width: 300px;