消防物联网视频

app/src/api/camera.js

@@ -9,3 +9,7 @@ import axios from "axios";
 export function getCameraUrl(id) {
   return axios.post("/camera-api/api/admin/deviceManage/videoUrl",  [id] );
 }
+
+export function getCameraUrls(ids) {
+  return axios.post("/camera-api/api/admin/deviceManage/videoUrl",  ids );
+}

app/src/components/Camera.vue

@@ -109,30 +109,37 @@ export default {
       this.$refs.tree.filter(val);
     },
   },
-  props: {
-    id: {
-      type: String,
-      default: "",
-    },
-    byList: {
-      type: Array,
-      default: [],
-    },
-    zjid: {
-      type: String,
-      default: null,
-    },
-    qx: {
-      type: String,
-      default: null,
-    },
-    dataList: {
-      type: Array,
-      default: [],
-    },
-  },
+  // props: {
+  //   id: {
+  //     type: String,
+  //     default: "",
+  //   },
+  //   byList: {
+  //     type: Array,
+  //     default: [],
+  //   },
+  //   zjid: {
+  //     type: String,
+  //     default: null,
+  //   },
+  //   qx: {
+  //     type: String,
+  //     default: null,
+  //   },
+  //   dataList: {
+  //     type: Array,
+  //     default: [],
+  //   },
+  // },
+  props: ["id", "byList", "qx", "dataList", "data"],
   mounted() {
-    this.getData();
+    if (!this.data) {
+      this.getData();
+    } else {
+      this.url = this.data.mp4;
+      this.name = this.data.sbmc;
+    }
+
     this.getAreaList();
   },
   methods: {
@@ -224,34 +231,51 @@ export default {
         });
       }
     },
-    getData() {
+    async getVideoData(id) {
+      const res = await getCameraUrl(id);
+      if (res.data.data && res.data.data.length > 0) {
+        return res.data.data[0];
+      }
+      return null;
+    },
+    async getData() {
       this.loading = true;
-      // TO-DO
-      getCameraUrl(this.id).then((res) => {
+      const data = await this.getVideoData(this.id);
+      // console.log(data);
+      this.loading = false;
+      if (data != null) {
         this.loading = false;
-        this.url = res.data.data[0].mp4;
-        this.name = res.data.data[0].deviceName;
-        // if (!this.url && this.byList && this.byList.length > 0) {
-        //   this.loading = true;
-        //   getCameraUrl(this.byList[this.byList.length - 1].sbbm).then(
-        //     (res2) => {
-        //       this.loading = false;
-        //       this.url = res2.data.data[0].mp4;
-        //       this.name = res2.data.data[0].deviceName;
-        //       if (!this.url) {
-        //         this.loading = true;
-        //         getCameraUrl(this.byList[this.byList.length - 2].sbbm).then(
-        //           (res3) => {
-        //             this.loading = false;
-        //             this.url = res3.mp4;
-        //             this.name = res3.data.data[0].deviceName;
-        //           }
-        //         );
-        //       }
-        //     }
-        //   );
-        // }
-      });
+        this.url = data.mp4;
+        this.name = data.deviceName;
+      }
+
+      // // TO-DO
+      // getCameraUrl(this.id).then((res) => {
+      //   console.log(res);
+      //   this.loading = false;
+      //   this.url = res.data.data[0].mp4;
+      //   this.name = res.data.data[0].deviceName;
+      //   // if (!this.url && this.byList && this.byList.length > 0) {
+      //   //   this.loading = true;
+      //   //   getCameraUrl(this.byList[this.byList.length - 1].sbbm).then(
+      //   //     (res2) => {
+      //   //       this.loading = false;
+      //   //       this.url = res2.data.data[0].mp4;
+      //   //       this.name = res2.data.data[0].deviceName;
+      //   //       if (!this.url) {
+      //   //         this.loading = true;
+      //   //         getCameraUrl(this.byList[this.byList.length - 2].sbbm).then(
+      //   //           (res3) => {
+      //   //             this.loading = false;
+      //   //             this.url = res3.mp4;
+      //   //             this.name = res3.data.data[0].deviceName;
+      //   //           }
+      //   //         );
+      //   //       }
+      //   //     }
+      //   //   );
+      //   // }
+      // });
       // console.log(this.id);
       // this.url =
       //   "https://ycjk.cq119.gov.cn/rtp/77746e2c33126146cb83c81be23d0492.live.mp4?deviceId=50015200002000000001&key=";

app/src/views/Iot/components/IotVideo.vue

@@ -3,7 +3,7 @@
     <el-carousel trigger="click" height="450px" :interval="20000">
       <el-carousel-item v-for="i in count" :key="i">
         <div class="v-one" v-if="getVideo((i - 1) * 2)">
-          <Camera :id="getVideo((i - 1) * 2).sbbm" :byList="byList" />
+          <Camera :id="getVideo((i - 1) * 2).sbbm" :byList="byList" :data="getVideo((i - 1) * 2)" />
           <!-- <div class="txt">{{ getVideo(i).sbmc }}</div> -->
         </div>
         <div class="v-one" v-if="getVideo((i - 1) * 2 + 1)">

app/src/views/Iot/index.vue

@@ -83,6 +83,7 @@ import {
 		formatCityData,
     createMapChartWindowInfo
 	} from '../../utils'
+import { getCameraUrls } from '@/api/camera';
 
 export default {
   name: "IotPage",
@@ -190,6 +191,23 @@ export default {
       const res2 = await getDeviceList(deviceParam2);
       caremaData = caremaData.concat(res2.data.rows);
       console.log(caremaData);
+
+      // 批量请求，获取播放地址
+      const resVideos = await getCameraUrls(caremaData.map(p => p.ssbm));
+      // console.log(videos)
+      if (resVideos && resVideos.data && resVideos.data.data) {
+        // 反向更新地址
+        caremaData.forEach(p => {
+          const v = resVideos.data.data.find(k => k.deviceName === p.sbmc);
+          if (v) {
+            p.mp4 = v.mp4;
+          }
+        })
+      }
+
+      // 只显示有视频地址的摄像头
+      caremaData = caremaData.filter(p => p.mp4);
+
       if (caremaData && caremaData.length > 0) {
         let randoms = [];
         //随机产生mix-max之间的一个数（避免首末概率不均，采用max+1，向下取整）
@@ -215,7 +233,6 @@ export default {
           // 如果有10位随机数了，就跳出
           if (randoms.length === 10) break;
         }
-        console.log(randoms);
 
         // 随机取10个
         const showCaremarData = caremaData.filter(