From 74ff4a40edda854c40eddf616cee7ba4af5f4f1f Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 26 十一月 2021 17:44:51 +0800
Subject: [PATCH] 摄像机

---
 vue.config.js                                       |    2 
 src/pages/cameraAccess/components/CameraInfo.vue    |  350 +++++++++++++--------
 src/pages/cameraAccess/components/DataStackInfo.vue |  570 ++++++++++++++++++++++------------
 3 files changed, 579 insertions(+), 343 deletions(-)

diff --git a/src/pages/cameraAccess/components/CameraInfo.vue b/src/pages/cameraAccess/components/CameraInfo.vue
index 8f0c382..a7a559a 100644
--- a/src/pages/cameraAccess/components/CameraInfo.vue
+++ b/src/pages/cameraAccess/components/CameraInfo.vue
@@ -4,11 +4,16 @@
       <el-row>
         <el-col :span="9">
           <el-form-item label="RTSP鍦板潃" :span="11" prop="rtsp">
-            <el-input v-model="form.rtsp" placeholder="rtsp://" :disabled="isDisabled" size="small"></el-input>
+            <el-input
+              v-model="form.rtsp"
+              placeholder="rtsp://"
+              :disabled="isDisabled"
+              size="small"
+            ></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="9" :offset="1">
-          <el-form-item label="鍧愭爣" style="width:100%;">
+          <el-form-item label="鍧愭爣" style="width: 100%">
             <label slot="label">鍧愭爣</label>
             <el-col :span="11">
               <el-input
@@ -31,23 +36,33 @@
       </el-row>
       <el-row>
         <el-col :span="9">
-          <el-form-item label="璁惧鍚嶇О" style="width:100%" prop="name">
-            <el-input v-model="form.name" placeholder="璇疯緭鍏ヨ澶囧悕绉�" :disabled="isDisabled" size="small"></el-input>
+          <el-form-item label="璁惧鍚嶇О" style="width: 100%" prop="name">
+            <el-input
+              v-model="form.name"
+              placeholder="璇疯緭鍏ヨ澶囧悕绉�"
+              :disabled="isDisabled"
+              size="small"
+            ></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="9" :offset="1">
-          <el-form-item label="璁惧鍦板潃" style="width:100%" prop="addr">
-            <el-input v-model="form.addr" placeholder="璇疯緭鍏ュ湴鍧�鎻忚堪" :disabled="isDisabled" size="small"></el-input>
+          <el-form-item label="璁惧鍦板潃" style="width: 100%" prop="addr">
+            <el-input
+              v-model="form.addr"
+              placeholder="璇疯緭鍏ュ湴鍧�鎻忚堪"
+              :disabled="isDisabled"
+              size="small"
+            ></el-input>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="9">
-          <el-form-item label="澶勭悊鍒嗚鲸鐜�" style="width:100%">
+          <el-form-item label="澶勭悊鍒嗚鲸鐜�" style="width: 100%">
             <el-select
               v-model="form.resolution"
               placeholder="鏈満鍒嗚鲸鐜�"
-              style="position: absolute;left: 0;"
+              style="position: absolute; left: 0"
               size="small"
             >
               <el-option
@@ -61,7 +76,7 @@
         </el-col>
         <el-col :span="9" :offset="1">
           <el-form-item label="浜嬩欢澹伴煶">
-            <div class="flex-wrap" style="margin-top: 10px;">
+            <div class="flex-wrap" style="margin-top: 10px">
               <el-switch v-model="form.voiceEnable" :width="50"></el-switch>
               <!-- 灞忚斀澹伴煶閫夋嫨,璋冩暣鍒板満鏅� -->
               <!-- <el-select
@@ -96,45 +111,61 @@
       </el-row>
       <el-row v-show="isGb28182">
         <el-col :span="9">
-          <el-form-item label="璁惧鍒悕" style="width:100%" prop="alias">
-            <el-input v-model="form.alias" placeholder="璇疯緭鍏ヨ澶囧埆鍚�" size="small"></el-input>
+          <el-form-item label="璁惧鍒悕" style="width: 100%" prop="alias">
+            <el-input
+              v-model="form.alias"
+              placeholder="璇疯緭鍏ヨ澶囧埆鍚�"
+              size="small"
+            ></el-input>
           </el-form-item>
         </el-col>
       </el-row>
 
       <el-row>
         <!-- 娣诲姞浼犳劅鍣� -->
-        <CameraInfoEditor ref="cameraEditor" :Carmeras="form" :sensors="sensors"></CameraInfoEditor>
+        <CameraInfoEditor
+          ref="cameraEditor"
+          :Carmeras="form"
+          :sensors="sensors"
+        ></CameraInfoEditor>
       </el-row>
 
       <el-row style="padding-top: 15px">
-        <el-col :span="19" style="text-align: right;">
+        <el-col :span="19" style="text-align: right">
           <el-button
             size="small"
             type="primary"
             @click="onSubmit('addForm')"
             :disabled="conDisabled"
-          >淇濆瓨</el-button>
+            >淇濆瓨</el-button
+          >
           <el-button
             type="danger"
             size="small"
             @click="deleteCamera"
             v-if="!isAdd"
             :disabled="isDisabled"
-          >鍒犻櫎鎽勫儚鏈�</el-button>
+            >鍒犻櫎鎽勫儚鏈�</el-button
+          >
         </el-col>
       </el-row>
       <el-divider></el-divider>
       <input v-model="form.id" type="hidden" />
       <input v-model="form.areaid" type="hidden" />
       <el-row>
-        <el-col :span="12" style="text-align: right;">
-          <el-button size="small" type="primary" @click="cameraConnet" :disabled="conDisabled">杩炴帴娴嬭瘯</el-button>
+        <el-col :span="12" style="text-align: right">
+          <el-button
+            size="small"
+            type="primary"
+            @click="cameraConnet"
+            :disabled="conDisabled"
+            >杩炴帴娴嬭瘯</el-button
+          >
         </el-col>
       </el-row>
       <el-row style="padding: 15px 0">
         <el-col :span="12">
-          <camera-player
+          <!-- <camera-player
             :cameraName="videoItem.name"
             :cameraID="videoItem.id"
             :isGb="videoItem.cameraType === 1"
@@ -142,7 +173,26 @@
             :isRunning="false"
             v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && visibilityState"
           ></camera-player>
-          <video v-else poster="/images/cameraAccess/video-poster.png" preload="none"></video>
+          <video v-else poster="/images/cameraAccess/video-poster.png" preload="none"></video> -->
+          <wasm-player
+            :cameraName="videoItem.name"
+            :cameraID="videoItem.id"
+            :isGb="videoItem.cameraType === 1"
+            :rtspUrl="videoItem.rtsp"
+            :isRunning="false"
+            :showArea="false"
+            v-if="
+              videoItem !== '' &&
+              videoItem !== undefined &&
+              videoItem !== null &&
+              visibilityState
+            "
+          ></wasm-player>
+          <video
+            v-else
+            poster="/images/cameraAccess/video-poster.png"
+            preload="none"
+          ></video>
         </el-col>
 
         <!-- 绯荤粺杩愯淇℃伅 -->
@@ -150,9 +200,9 @@
           <div class="sysinfo-box">
             <div style="width: 70%">
               <ul>
-                <li style="width:100%">
+                <li style="width: 100%">
                   <info-card
-                    style="width:100%;min-width: 440px"
+                    style="width: 100%; min-width: 440px"
                     :realtime="PollData.RealTimeValidCount"
                     :polling="PollData.PollValidCount"
                     :dataStack="PollData.stackChannelCount"
@@ -164,7 +214,10 @@
               :style="`width:80%;height:174px;position: relative;left: -12px;`"
               v-if="PollData.barCharts && PollData.barCharts.length !== 0"
             >
-              <eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar>
+              <eChartsBar
+                ref="cpuMeneryCharts"
+                :xAxisData="PollData.barCharts"
+              ></eChartsBar>
             </div>
           </div>
         </el-col>
@@ -177,31 +230,33 @@
   createCamera,
   updateCameraInfo,
   getCameraInfo,
-  delCamera
+  delCamera,
 } from "@/api/camera";
 import { getSoundList } from "@/api/event";
 
+import WasmPlayer from "@/components/wasmPlayer";
 import CameraPlayer from "@/components/player";
-import eChartsBar from '@/components/subComponents/eChartsBar'
+import eChartsBar from "@/components/subComponents/eChartsBar";
 
-import InfoCard from "./infoCard"
-import CameraInfoEditor from './CameraInfoEditor'
+import InfoCard from "./infoCard";
+import CameraInfoEditor from "./CameraInfoEditor";
 
 export default {
   name: "CameraInfo",
   components: {
-    CameraPlayer,
+    // CameraPlayer,
+    WasmPlayer,
     InfoCard,
     eChartsBar,
-    CameraInfoEditor
+    CameraInfoEditor,
   },
   props: {
     cameraList: {
       default: () => {
         return [];
       },
-      type: Array
-    }
+      type: Array,
+    },
   },
   data() {
     return {
@@ -210,32 +265,31 @@
       soundList: [],
       togglePlay: true,
       eventAudio: new Audio(),
-      soundPath: '',
-      form: {
-      },
+      soundPath: "",
+      form: {},
       // 璁板綍娣诲姞鐘舵��
       isAdd: false,
       addParentId: "",
       rules: {
         name: [
-          { required: true, message: "璁惧鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }
+          { required: true, message: "璁惧鍚嶇О涓嶈兘涓虹┖", trigger: "blur" },
         ],
         rtsp: [
-          { required: true, message: "RTSP鍦板潃涓嶈兘涓虹┖", trigger: "blur" }
+          { required: true, message: "RTSP鍦板潃涓嶈兘涓虹┖", trigger: "blur" },
         ],
         addr: [
-          { required: true, message: "璁惧鍦板潃涓嶈兘涓虹┖", trigger: "blur" }
-        ]
+          { required: true, message: "璁惧鍦板潃涓嶈兘涓虹┖", trigger: "blur" },
+        ],
       },
       resolutionList: [],
       //浼犳劅鍣ㄥ垪琛�
       sensors: [],
-      voice: null
+      voice: null,
     };
   },
   computed: {
     isSelected() {
-      return this.TreeDataPool.selectedNode.type !== "4"
+      return this.TreeDataPool.selectedNode.type !== "4";
     },
     isGb28182() {
       return this.TreeDataPool.selectedNode.cameraType === 1;
@@ -249,7 +303,7 @@
     },
     conDisabled() {
       return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4";
-    }
+    },
   },
   mounted() {
     this.initFormData();
@@ -259,41 +313,41 @@
     this.getSounds();
 
     this.eventAudio.addEventListener("ended", () => {
-      this.togglePlay = true
-    })
+      this.togglePlay = true;
+    });
   },
   methods: {
     getSounds() {
-      getSoundList().then(res => {
-        if (res.success) {
-          this.soundList = res.data;
-        }
-      }).catch(
-        e => console.log(e)
-      )
+      getSoundList()
+        .then((res) => {
+          if (res.success) {
+            this.soundList = res.data;
+          }
+        })
+        .catch((e) => console.log(e));
     },
     selSound(sound) {
       this.soundPath = sound.path;
       this.form.voiceId = sound.id;
       this.togglePlay = true;
-      this.eventAudio.pause()
+      this.eventAudio.pause();
       // this.eventAudio.
     },
     togglePlayer() {
       if (!this.soundPath) {
         this.$notify({
-          type: 'info',
-          message: '璇峰厛閫夋嫨涓�涓0闊�!'
-        })
+          type: "info",
+          message: "璇峰厛閫夋嫨涓�涓0闊�!",
+        });
         return false;
       }
       this.eventAudio.src = this.soundPath;
       if (this.togglePlay) {
         this.eventAudio.play();
-        this.togglePlay = false
+        this.togglePlay = false;
       } else {
-        this.eventAudio.pause()
-        this.togglePlay = true
+        this.eventAudio.pause();
+        this.togglePlay = true;
       }
       // this.togglePlay = !this.togglePlay
     },
@@ -316,118 +370,134 @@
       // this.initFormData();
       // this.$refs.addForm.clearValidate();
       if (node.type === "4") {
-        getCameraInfo(node.id).then(res => {
+        getCameraInfo(node.id).then((res) => {
           if (res.success) {
             // console.log(res, '鑾峰彇鎽勫儚鏈轰俊鎭�')
             if (res.data.resolutions) {
-              let list = res.data.resolutions.map(i => {
-                let obj = {}
+              let list = res.data.resolutions.map((i) => {
+                let obj = {};
                 if (i.width == 0 && i.height == 0) {
-                  obj.label = "鏈満鍒嗚鲸鐜�"
-                  obj.value = "0*0"
+                  obj.label = "鏈満鍒嗚鲸鐜�";
+                  obj.value = "0*0";
                 } else {
-                  obj.label = i.width + "*" + i.height
-                  obj.value = i.width + "*" + i.height
+                  obj.label = i.width + "*" + i.height;
+                  obj.value = i.width + "*" + i.height;
                 }
-                return obj
-              })
-              this.resolutionList = list
-              this.sensors = res.data.sensors
+                return obj;
+              });
+              this.resolutionList = list;
+              this.sensors = res.data.sensors;
             }
 
             this.$nextTick(() => {
               this.initFormData();
-              Object.assign(this.form, res.data)
+              Object.assign(this.form, res.data);
 
-              this.soundList.forEach(element => {
+              this.soundList.forEach((element) => {
                 if (this.form.voiceId == element.id) {
-                  this.voice = element
+                  this.voice = element;
                 }
-              })
+              });
 
               if (this.form.run_type !== -1) {
-                this.form.isAI = true
+                this.form.isAI = true;
               } else {
-                this.form.isAI = false
+                this.form.isAI = false;
               }
-              this.form.resolution = this.form.resolution_width + "*" + this.form.resolution_height
-            })
+              this.form.resolution =
+                this.form.resolution_width + "*" + this.form.resolution_height;
+            });
           }
         });
       }
     },
     // 淇濆瓨
     onSubmit(formName) {
-      let list = this.$refs.cameraEditor.getResult()
-      this.$refs[formName].validate(async valid => {
+      let list = this.$refs.cameraEditor.getResult();
+      this.$refs[formName].validate(async (valid) => {
         if (valid) {
           const isRequire = this.verifyRequrie();
           if (!isRequire) return false;
 
-          this.form.latitude = Number.isNaN(parseFloat(this.form.latitude)) ? 0 : parseFloat(this.form.latitude);
-          this.form.longitude = Number.isNaN(parseFloat(this.form.longitude)) ? 0 : parseFloat(this.form.longitude);
-          this.form.sensors = list
-          this.form.resolution_width = Number(this.form.resolution.split("*")[0])
-          this.form.resolution_height = Number(this.form.resolution.split("*")[1])
+          this.form.latitude = Number.isNaN(parseFloat(this.form.latitude))
+            ? 0
+            : parseFloat(this.form.latitude);
+          this.form.longitude = Number.isNaN(parseFloat(this.form.longitude))
+            ? 0
+            : parseFloat(this.form.longitude);
+          this.form.sensors = list;
+          this.form.resolution_width = Number(
+            this.form.resolution.split("*")[0]
+          );
+          this.form.resolution_height = Number(
+            this.form.resolution.split("*")[1]
+          );
           let _this = this;
           // 鏇存柊
           if (this.form.id !== "") {
-            this.form.areaid = this.TreeDataPool.getParent(this.form.id, this.isGb28182);
-            console.log(this.TreeDataPool.selectedNode)
-            updateCameraInfo(this.form).then(rsp => {
-              if (rsp.success) {
-                this.$notify({
-                  type: "success",
-                  message: "鎽勫儚鏈轰俊鎭慨鏀规垚鍔燂紒"
-                });
-                this.TreeDataPool.fetchTreeData();
-                console.log(this.TreeDataPool.selectedNode)
-                //_this.$root.$children[0].$refs['leftTree'].$refs.tree.ztreeObj.checkNode(_this.TreeDataPool.selectedNode, true, false, false);
-                //閫変腑淇敼鍚庣殑鑺傜偣
-                let {evt,treeId} = _this.$root.$children[0].$refs['leftTree'].$refs.tree;
-                console.log(evt,treeId)
-                // this.$nextTick(()=>{
-                   //_this.$root.$children[0].$refs['leftTree'].$refs.tree.handleCreated()
-                // })
-
-              } else {
-                this.selectCamera(this.TreeDataPool.selectedNode);
+            this.form.areaid = this.TreeDataPool.getParent(
+              this.form.id,
+              this.isGb28182
+            );
+            console.log(this.TreeDataPool.selectedNode);
+            updateCameraInfo(this.form)
+              .then((rsp) => {
+                if (rsp.success) {
+                  this.$notify({
+                    type: "success",
+                    message: "鎽勫儚鏈轰俊鎭慨鏀规垚鍔燂紒",
+                  });
+                  this.TreeDataPool.fetchTreeData();
+                  console.log(this.TreeDataPool.selectedNode);
+                  //_this.$root.$children[0].$refs['leftTree'].$refs.tree.ztreeObj.checkNode(_this.TreeDataPool.selectedNode, true, false, false);
+                  //閫変腑淇敼鍚庣殑鑺傜偣
+                  let { evt, treeId } =
+                    _this.$root.$children[0].$refs["leftTree"].$refs.tree;
+                  console.log(evt, treeId);
+                  // this.$nextTick(()=>{
+                  //_this.$root.$children[0].$refs['leftTree'].$refs.tree.handleCreated()
+                  // })
+                } else {
+                  this.selectCamera(this.TreeDataPool.selectedNode);
+                  this.$notify({
+                    type: "error",
+                    message: "鎽勫儚鏈轰俊鎭慨鏀瑰け璐ワ紒",
+                  });
+                }
+              })
+              .catch((err) => {
                 this.$notify({
                   type: "error",
-                  message: "鎽勫儚鏈轰俊鎭慨鏀瑰け璐ワ紒"
+                  message: err.msg,
                 });
-              }
-            }).catch(err => {
-              this.$notify({
-                type: "error",
-                message: err.msg
               });
-            });
           } else {
             this.form.areaid = this.addParentId;
-            createCamera(this.form).then(rsp => {
-              if (rsp.success) {
-                this.$notify({
-                  type: "success",
-                  message: "鎽勫儚鏈烘坊鍔犳垚鍔燂紒"
-                });
-                this.TreeDataPool.selectedNode = rsp.data;
-                this.TreeDataPool.fetchTreeData();
-                // 鍚庣杩斿洖缁撴灉涓�0锛屾煡璇㈠悗涓�4
-                this.TreeDataPool.selectedNode.type = "4";
-                this.selectCamera(this.TreeDataPool.selectedNode);
-              } else {
+            createCamera(this.form)
+              .then((rsp) => {
+                if (rsp.success) {
+                  this.$notify({
+                    type: "success",
+                    message: "鎽勫儚鏈烘坊鍔犳垚鍔燂紒",
+                  });
+                  this.TreeDataPool.selectedNode = rsp.data;
+                  this.TreeDataPool.fetchTreeData();
+                  // 鍚庣杩斿洖缁撴灉涓�0锛屾煡璇㈠悗涓�4
+                  this.TreeDataPool.selectedNode.type = "4";
+                  this.selectCamera(this.TreeDataPool.selectedNode);
+                } else {
+                  this.$notify({
+                    type: "error",
+                    message: "鎽勫儚鏈烘坊鍔犲け璐ワ紒",
+                  });
+                }
+              })
+              .catch((err) => {
                 this.$notify({
                   type: "error",
-                  message: "鎽勫儚鏈烘坊鍔犲け璐ワ紒"
+                  message: err.msg,
                 });
-              }
-            }).catch((err) => {
-              this.$notify({
-                type: "error",
-                message: err.msg
               });
-            });
           }
         }
       });
@@ -441,9 +511,9 @@
           rtsp: this.form.rtsp,
           id: this.form.id,
           isRunning: this.form.run_enable,
-          cameraType: this.form.type
+          cameraType: this.form.type,
         };
-      })
+      });
     },
     // * 楠岃瘉蹇呴�夐」
     verifyRequrie() {
@@ -456,7 +526,7 @@
       if (this.form.rtsp === "") {
         this.$notify({
           type: "warning",
-          message: "璇疯緭鍏ユ纭殑rtsp鍦板潃"
+          message: "璇疯緭鍏ユ纭殑rtsp鍦板潃",
         });
         return false;
       }
@@ -467,21 +537,21 @@
       this.$confirm("鏄惁鍒犻櫎姝ゆ憚鍍忔満锛�", {
         center: true,
         cancelButtonClass: "comfirm-class-cancle",
-        confirmButtonClass: "comfirm-class-sure"
+        confirmButtonClass: "comfirm-class-sure",
       }).then(() => {
-        delCamera(this.form.id).then(res => {
+        delCamera(this.form.id).then((res) => {
           if (res.success) {
             this.initFormData();
             this.$notify({
               type: "success",
-              message: "鍒犻櫎鎴愬姛锛�"
+              message: "鍒犻櫎鎴愬姛锛�",
             });
             this.TreeDataPool.fetchTreeData();
             this.TreeDataPool.selectedNode = {};
           } else {
             this.$notify({
               type: "error",
-              message: "鍒犻櫎澶辫触锛�"
+              message: "鍒犻櫎澶辫触锛�",
             });
           }
         });
@@ -507,7 +577,7 @@
         password: "",
         resolution: "",
         voiceId: "",
-        voiceEnable: false
+        voiceEnable: false,
       };
     },
     // 娣诲姞璁惧
@@ -515,8 +585,8 @@
       this.isAdd = true;
       this.addParentId = node;
       this.initFormData();
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -564,5 +634,9 @@
       }
     }
   }
+
+  .video-player {
+    height: 450px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/cameraAccess/components/DataStackInfo.vue b/src/pages/cameraAccess/components/DataStackInfo.vue
index 57281fa..ed5c980 100644
--- a/src/pages/cameraAccess/components/DataStackInfo.vue
+++ b/src/pages/cameraAccess/components/DataStackInfo.vue
@@ -3,28 +3,44 @@
     <el-row>
       <el-col :span="12">
         <el-form ref="addForm" :model="form" :rules="rules" label-width="88px">
-          <el-form-item label="鍚嶇О" prop="name" style="width:440px">
-            <el-input v-model="form.name" size="small" :disabled="isDisabled"></el-input>
+          <el-form-item label="鍚嶇О" prop="name" style="width: 440px">
+            <el-input
+              v-model="form.name"
+              size="small"
+              :disabled="isDisabled"
+            ></el-input>
           </el-form-item>
 
-          <el-form-item label="绫诲瀷" prop="type" style="width:440px">
-            <el-radio v-model="form.type" :label="1" :disabled="!isAdd">瑙嗛</el-radio>
-            <el-radio v-model="form.type" :label="2" :disabled="!isAdd">鍥剧墖</el-radio>
-            <el-radio v-model="form.type" :label="3" :disabled="!isAdd">闊抽</el-radio>
-            <el-radio v-model="form.type" :label="4" :disabled="!isAdd">鍏朵粬鏁版嵁</el-radio>
+          <el-form-item label="绫诲瀷" prop="type" style="width: 440px">
+            <el-radio v-model="form.type" :label="1" :disabled="!isAdd"
+              >瑙嗛</el-radio
+            >
+            <el-radio v-model="form.type" :label="2" :disabled="!isAdd"
+              >鍥剧墖</el-radio
+            >
+            <el-radio v-model="form.type" :label="3" :disabled="!isAdd"
+              >闊抽</el-radio
+            >
+            <el-radio v-model="form.type" :label="4" :disabled="!isAdd"
+              >鍏朵粬鏁版嵁</el-radio
+            >
           </el-form-item>
-          <el-form-item label="澶勭悊鍒嗚鲸鐜�" style="width:440px">
+          <el-form-item label="澶勭悊鍒嗚鲸鐜�" style="width: 440px">
             <el-select
               v-model="form.resolution"
               placeholder="鏈満鍒嗚鲸鐜�"
-              style="position: absolute;left: 0;"
+              style="position: absolute; left: 0"
               size="small"
               @change="checkResolution"
             >
               <el-option
                 v-for="item in form.resolutions"
                 :key="`${item.width}*${item.height}`"
-                :label="`${item.width}*${item.height}`=='0*0'?'鏈満鍒嗚鲸鐜�':`${item.width}*${item.height}`"
+                :label="
+                  `${item.width}*${item.height}` == '0*0'
+                    ? '鏈満鍒嗚鲸鐜�'
+                    : `${item.width}*${item.height}`
+                "
                 :value="`${item.width}*${item.height}`"
               ></el-option>
             </el-select>
@@ -33,10 +49,20 @@
             label="澶勭悊瀹屾垚鍚庤嚜鍔ㄥ垹闄ゆ枃浠�"
             prop="isAutoDelFile"
             label-width="200px"
-            style="width:440px"
+            style="width: 440px"
           >
-            <el-radio v-model="form.isAutoDelFile" :label="true" :disabled="isDisabled">鏄�</el-radio>
-            <el-radio v-model="form.isAutoDelFile" :label="false" :disabled="isDisabled">鍚�</el-radio>
+            <el-radio
+              v-model="form.isAutoDelFile"
+              :label="true"
+              :disabled="isDisabled"
+              >鏄�</el-radio
+            >
+            <el-radio
+              v-model="form.isAutoDelFile"
+              :label="false"
+              :disabled="isDisabled"
+              >鍚�</el-radio
+            >
           </el-form-item>
 
           <el-form-item label-width="0px" style="text-align: left">
@@ -45,14 +71,16 @@
               type="primary"
               @click="onSubmit('addForm')"
               :disabled="isDisabled"
-            >淇濆瓨</el-button>
+              >淇濆瓨</el-button
+            >
             <el-button
               type="danger"
               size="small"
               @click="deleteDir"
               v-if="!isAdd"
               :disabled="isDisabled"
-            >鍒犻櫎鏁版嵁鏍�</el-button>
+              >鍒犻櫎鏁版嵁鏍�</el-button
+            >
           </el-form-item>
         </el-form>
       </el-col>
@@ -64,7 +92,7 @@
             <ul>
               <li>
                 <info-card
-                  style="width: 100%;min-width: 440px"
+                  style="width: 100%; min-width: 440px"
                   :realtime="PollData.RealTimeValidCount"
                   :polling="PollData.PollValidCount"
                   :dataStack="PollData.stackChannelCount"
@@ -76,7 +104,10 @@
             :style="`width:80%;height:174px;position: relative;left: -12px;`"
             v-if="PollData.barCharts && PollData.barCharts.length !== 0"
           >
-            <eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar>
+            <eChartsBar
+              ref="cpuMeneryCharts"
+              :xAxisData="PollData.barCharts"
+            ></eChartsBar>
           </div>
         </div>
       </el-col>
@@ -88,26 +119,36 @@
       <span
         @click="activeName = 'uploaded'"
         :class="activeName === 'uploaded' ? 'active tab' : 'tab'"
-      >宸蹭笂浼�</span>
+        >宸蹭笂浼�</span
+      >
       <span
         @click="activeName = 'uploading'"
         :class="activeName === 'uploading' ? 'active tab' : 'tab'"
-      >姝e湪涓婁紶</span>
+        >姝e湪涓婁紶</span
+      >
 
       <div class="btn-right">
         <el-input
           v-model="searchInput"
           placeholder="鎼滅储"
           clearable
-          style="width: 203px;"
+          style="width: 203px"
           size="small"
           @change="handelSearchInputChange"
         >
-          <i class="el-icon-search el-input__icon" style="color:#DCDFE6;padding:0px" slot="prefix"></i>
+          <i
+            class="el-icon-search el-input__icon"
+            style="color: #dcdfe6; padding: 0px"
+            slot="prefix"
+          ></i>
         </el-input>
 
         <!-- 鎵归噺鏆傚仠 -->
-        <el-tooltip content="鎵归噺鏆傚仠" placement="bottom" popper-class="atooltip">
+        <el-tooltip
+          content="鎵归噺鏆傚仠"
+          placement="bottom"
+          popper-class="atooltip"
+        >
           <el-button
             type="text"
             class="iconfont iconzanting btn"
@@ -115,8 +156,16 @@
           ></el-button>
         </el-tooltip>
         <!-- 鎵归噺鍒犻櫎 -->
-        <el-tooltip content="鎵归噺鍒犻櫎" placement="bottom" popper-class="atooltip">
-          <el-button type="text" class="el-icon-delete btn" @click="handleFileDelete({}, true)"></el-button>
+        <el-tooltip
+          content="鎵归噺鍒犻櫎"
+          placement="bottom"
+          popper-class="atooltip"
+        >
+          <el-button
+            type="text"
+            class="el-icon-delete btn"
+            @click="handleFileDelete({}, true)"
+          ></el-button>
         </el-tooltip>
 
         <!-- 鏂囦欢涓婁紶 -->
@@ -140,20 +189,28 @@
     <!-- 宸蹭笂浼犳枃浠跺垪琛� -->
     <el-table
       ref="multipleTable"
-      v-show="activeName === 'uploaded' "
+      v-show="activeName === 'uploaded'"
       :data="fileList"
       tooltip-effect="dark"
       border
-      :header-cell-style="{background:'#f8f8f8', color:'#222222', textAlign:'center'}"
+      :header-cell-style="{
+        background: '#f8f8f8',
+        color: '#222222',
+        textAlign: 'center',
+      }"
       @select="handleSelect"
       @select-all="handleSelect"
     >
-      <el-table-column type="selection" align="center" :selectable="isSelectable"></el-table-column>
+      <el-table-column
+        type="selection"
+        align="center"
+        :selectable="isSelectable"
+      ></el-table-column>
       <el-table-column prop="name" label="鏂囦欢鍚�">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <div :class="snapshotClass">
             <el-image
-              v-if="row.type==1"
+              v-if="row.type == 1"
               style="width: 30x; height: 30px"
               :src="'/httpImage/' + row.snapshot_url"
               fit="fill"
@@ -162,11 +219,13 @@
               <div slot="error" :class="snapshotClass"></div>
             </el-image>
             <el-image
-              v-if="row.type==2"
-              style="width: 30x; height: 30px;background:#fff;"
-              :src="`/files/${row.path.substr(row.path.lastIndexOf('/')+1)}`"
+              v-if="row.type == 2"
+              style="width: 30x; height: 30px; background: #fff"
+              :src="`/files/${row.path.substr(row.path.lastIndexOf('/') + 1)}`"
               fit="fill"
-              :preview-src-list="[`/files/${row.path.substr(row.path.lastIndexOf('/')+1)}`]"
+              :preview-src-list="[
+                `/files/${row.path.substr(row.path.lastIndexOf('/') + 1)}`,
+              ]"
             >
               <div slot="error" :class="snapshotClass"></div>
             </el-image>
@@ -178,24 +237,50 @@
             v-model="row.name"
             size="small"
             @blur="cellRenameFile(row)"
-            style="display: inline-block;width: calc(100% - 50px);margin-left: 10px;"
+            style="
+              display: inline-block;
+              width: calc(100% - 50px);
+              margin-left: 10px;
+            "
           />
           <a
             v-else
-            style="line-height: 30px;margin-left: 10px; cursor:pointer"
+            style="line-height: 30px; margin-left: 10px; cursor: pointer"
             @click="preview(row)"
-          >{{row.name}}</a>
+            >{{ row.name }}</a
+          >
         </template>
       </el-table-column>
       <el-table-column prop="fileSize" label="澶у皬">
-        <template slot-scope="scope">{{scope.row.size | readFileSizeUnit}}</template>
+        <template slot-scope="scope">{{
+          scope.row.size | readFileSizeUnit
+        }}</template>
       </el-table-column>
-      <el-table-column prop="duration" label="鏃堕暱" show-overflow-tooltip align="center"></el-table-column>
-      <el-table-column prop="uploadTime" label="涓婁紶鏃堕棿" show-overflow-tooltip align="center">
-        <template slot-scope="scope">{{scope.row.createTime | moment}}</template>
+      <el-table-column
+        prop="duration"
+        label="鏃堕暱"
+        show-overflow-tooltip
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="uploadTime"
+        label="涓婁紶鏃堕棿"
+        show-overflow-tooltip
+        align="center"
+      >
+        <template slot-scope="scope">{{
+          scope.row.createTime | moment
+        }}</template>
       </el-table-column>
-      <el-table-column prop="status" label="澶勭悊鐘舵��" show-overflow-tooltip align="center">
-        <template slot-scope="scope">{{scope.row.status | statusFormat}}</template>
+      <el-table-column
+        prop="status"
+        label="澶勭悊鐘舵��"
+        show-overflow-tooltip
+        align="center"
+      >
+        <template slot-scope="scope">{{
+          scope.row.status | statusFormat
+        }}</template>
       </el-table-column>
       <el-table-column label="鎿嶄綔" show-overflow-tooltip align="center">
         <template slot-scope="scope">
@@ -206,10 +291,18 @@
               :disabled="scope.row.status == 2"
               class="el-icon-top btn"
               @click="handleSortFile(1, scope.row.id)"
-              :style="scope.row.id === fileList[0].id ? 'visibility:hidden' : 'visibility:initial'"
+              :style="
+                scope.row.id === fileList[0].id
+                  ? 'visibility:hidden'
+                  : 'visibility:initial'
+              "
             ></el-button>
             <!-- 鏆傚仠 -->
-            <el-tooltip content="鏆傚仠澶勭悊" placement="bottom" popper-class="atooltip">
+            <el-tooltip
+              content="鏆傚仠澶勭悊"
+              placement="bottom"
+              popper-class="atooltip"
+            >
               <el-button
                 type="text"
                 :disabled="scope.row.status == 2"
@@ -220,7 +313,11 @@
             </el-tooltip>
 
             <!-- 寮�濮� -->
-            <el-tooltip content="閲嶆柊寮�濮�" placement="bottom" popper-class="atooltip">
+            <el-tooltip
+              content="閲嶆柊寮�濮�"
+              placement="bottom"
+              popper-class="atooltip"
+            >
               <el-button
                 type="text"
                 :disabled="scope.row.status == 2"
@@ -231,7 +328,11 @@
             </el-tooltip>
 
             <!-- 閲嶆柊澶勭悊 -->
-            <el-tooltip content="閲嶆柊澶勭悊" placement="bottom" popper-class="atooltip">
+            <el-tooltip
+              content="閲嶆柊澶勭悊"
+              placement="bottom"
+              popper-class="atooltip"
+            >
               <el-button
                 type="text"
                 :disabled="scope.row.status == 2"
@@ -252,16 +353,19 @@
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item
                   icon="el-icon-edit"
-                  :command="{cb: handleFileRename, data: scope.row}"
-                >閲嶅懡鍚�</el-dropdown-item>
+                  :command="{ cb: handleFileRename, data: scope.row }"
+                  >閲嶅懡鍚�</el-dropdown-item
+                >
                 <el-dropdown-item
                   icon="el-icon-copy-document"
-                  :command="{cb: handleFileMove, data: scope.row}"
-                >绉诲姩/澶嶅埗</el-dropdown-item>
+                  :command="{ cb: handleFileMove, data: scope.row }"
+                  >绉诲姩/澶嶅埗</el-dropdown-item
+                >
                 <el-dropdown-item
                   icon="el-icon-delete"
-                  :command="{cb: handleFileDelete, data: scope.row}"
-                >鍒犻櫎</el-dropdown-item>
+                  :command="{ cb: handleFileDelete, data: scope.row }"
+                  >鍒犻櫎</el-dropdown-item
+                >
               </el-dropdown-menu>
             </el-dropdown>
           </div>
@@ -272,13 +376,13 @@
     <!-- 鍒嗛〉 -->
     <div class="pagination">
       <el-pagination
-        v-show="activeName=='uploaded'"
+        v-show="activeName == 'uploaded'"
         @size-change="handleSizeChange"
         @current-change="handleRefrashFileList"
         :current-page="page"
         :page-sizes="[10, 20, 50, 100]"
         :page-size="size"
-        style="position:absolute;right:10px;bottom:5px"
+        style="position: absolute; right: 10px; bottom: 5px"
         :total="total"
         layout="total, sizes, prev, pager, next"
       ></el-pagination>
@@ -289,30 +393,55 @@
       <file-uploader
         :ref="`uploader_${stack.id}`"
         :key="stack.id"
-        v-show="activeName === 'uploading' && stack.id == DataStackPool.selectedDir.id"
+        v-show="
+          activeName === 'uploading' && stack.id == DataStackPool.selectedDir.id
+        "
         :sourceType="stack.type"
       />
     </template>
     <!-- 鏂囦欢棰勮 -->
     <el-dialog title="鏌ョ湅鏂囦欢" :visible.sync="previewDialog" width="500px">
-      <video v-if="videoUrl" :src="videoUrl" controls style="margin-top: 12px;">鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 video 鏍囩銆�</video>
+      <!-- <video v-if="videoUrl" :src="videoUrl" controls style="margin-top: 12px">
+        鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 video 鏍囩銆�
+      </video> -->
+
+      <wasm-player
+        :rtspUrl="videoUrl"
+        :showArea="false"
+        v-if="videoUrl"
+      ></wasm-player>
+
       <el-image v-if="imgUrl" :src="imgUrl"></el-image>
     </el-dialog>
 
     <el-dialog title="绉诲姩/澶嶅埗" :visible.sync="fileDialog" width="500px">
-      <p style="margin:0px 0px 20px 0px">璇烽�夋嫨鎮ㄦ兂澶嶅埗/绮樿创鍒扮殑 鏁版嵁鏍堬細</p>
-      <span class="iconfont iconwenjian" style="color:#3d68e1; margin-right:5px"></span>
+      <p style="margin: 0px 0px 20px 0px">璇烽�夋嫨鎮ㄦ兂澶嶅埗/绮樿创鍒扮殑 鏁版嵁鏍堬細</p>
+      <span
+        class="iconfont iconwenjian"
+        style="color: #3d68e1; margin-right: 5px"
+      ></span>
       <el-select v-model="targetDir" placeholder="璇烽�夋嫨鐩爣鏂囦欢澶�" size="mini">
-        <el-option v-for="item in dirOptions" :key="item.id" :label="item.name" :value="item.id">
+        <el-option
+          v-for="item in dirOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        >
           <span class="iconfont iconwenjian"></span>
           <span style="margin-left: 10px">{{ item.name }}</span>
         </el-option>
       </el-select>
 
-      <div style="margin-top:20px">
-        <el-button type="primary" size="mini" @click="cellFileCopy">澶嶅埗</el-button>
-        <el-button type="primary" size="mini" @click="cellFileMove">绉诲姩</el-button>
-        <el-button type="info" size="mini" @click="fileDialog = false">鍙栨秷</el-button>
+      <div style="margin-top: 20px">
+        <el-button type="primary" size="mini" @click="cellFileCopy"
+          >澶嶅埗</el-button
+        >
+        <el-button type="primary" size="mini" @click="cellFileMove"
+          >绉诲姩</el-button
+        >
+        <el-button type="info" size="mini" @click="fileDialog = false"
+          >鍙栨秷</el-button
+        >
       </div>
     </el-dialog>
   </div>
@@ -329,43 +458,55 @@
   findAllFileByStackId,
   renameFile,
   moveFile,
-  copyFile
+  copyFile,
 } from "@/api/localVedio";
 
+import InfoCard from "./infoCard";
+import eChartsBar from "@/components/subComponents/eChartsBar";
+import FileUploader from "@/components/subComponents/FileUpload";
 
-import InfoCard from "./infoCard"
-import eChartsBar from '@/components/subComponents/eChartsBar'
-import FileUploader from '@/components/subComponents/FileUpload'
+import WasmPlayer from "@/components/wasmPlayer";
 
 export default {
   name: "DataStackInfo",
   components: {
     InfoCard,
     eChartsBar,
-    FileUploader
+    FileUploader,
+    WasmPlayer,
   },
   props: {
     cameraList: {
       default: () => {
         return [];
       },
-      type: Array
-    }
+      type: Array,
+    },
   },
   filters: {
     statusFormat(value) {
       let statusCode = {
         "-2": "澶勭悊寮傚父",
         "-1": "宸插垹闄�",
-        "0": "鏆傚仠澶勭悊",
-        "1": "绛夊緟澶勭悊",
-        "2": "澶勭悊涓�",
-        "9": "澶勭悊瀹屾垚"
-      }
+        0: "鏆傚仠澶勭悊",
+        1: "绛夊緟澶勭悊",
+        2: "澶勭悊涓�",
+        9: "澶勭悊瀹屾垚",
+      };
       return statusCode[value];
     },
     readFileSizeUnit(value) {
-      let UNITS = [' B', ' KB', ' MB', ' GB', ' TB', ' PB', ' EB', ' ZB', ' YB'];
+      let UNITS = [
+        " B",
+        " KB",
+        " MB",
+        " GB",
+        " TB",
+        " PB",
+        " EB",
+        " ZB",
+        " YB",
+      ];
       let format = function (value, power) {
         return (value / Math.pow(1024, power)).toFixed(2) + UNITS[power];
       };
@@ -380,28 +521,28 @@
         }
       }
       return format(value, i - 1);
-    }
+    },
   },
   computed: {
     snapshotClass() {
       let classs = ["snapshot"];
       if (this.form.type === 1) {
-        classs.push("snapshot-video")
+        classs.push("snapshot-video");
       } else if (this.form.type === 2) {
-        classs.push("snapshot-image")
+        classs.push("snapshot-image");
       } else if (this.form.type === 3) {
-        classs.push("snapshot-audio")
+        classs.push("snapshot-audio");
       } else {
-        classs.push("snapshot-files")
+        classs.push("snapshot-files");
       }
 
       return classs;
     },
     dirOptions() {
-      return this.DataStackPool.dirs.filter(dir => {
-        return dir.id !== this.DataStackPool.selectedDir.id
-      })
-    }
+      return this.DataStackPool.dirs.filter((dir) => {
+        return dir.id !== this.DataStackPool.selectedDir.id;
+      });
+    },
   },
   data() {
     return {
@@ -416,7 +557,7 @@
       searchInput: "",
       form: {
         id: "",
-        resolution: ""
+        resolution: "",
       },
       fileList: [],
       // 璁板綍娣诲姞鐘舵��
@@ -424,8 +565,8 @@
       addParentId: "",
       rules: {
         dirName: [
-          { required: true, message: "璁惧鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }
-        ]
+          { required: true, message: "璁惧鍚嶇О涓嶈兘涓虹┖", trigger: "blur" },
+        ],
       },
       activeName: "uploaded",
       page: 1,
@@ -446,21 +587,21 @@
   },
   methods: {
     checkResolution(val) {
-      this.form.resolution_width = Number(val.split('*')[0]);
-      this.form.resolution_height = Number(val.split('*')[1]);
+      this.form.resolution_width = Number(val.split("*")[0]);
+      this.form.resolution_height = Number(val.split("*")[1]);
     },
     preview(row) {
       this.previewDialog = true;
       if (row.type === 1) {
-
-        this.videoUrl = "/files/" + row.identifier + ".mp4"
+        this.videoUrl = "/files/" + row.identifier + ".mp4";
 
         // 涓烘湐榛勪娇鐢ㄦ暟鎹爤瀹氬埗, 娌℃湁MD5
         if (row.identifier == "") {
           this.videoUrl = row.path.replace("/opt/vasystem", "");
         }
       } else if (row.type === 2) {
-        this.imgUrl = "/files/" + row.path.substr(row.path.lastIndexOf('/') + 1)
+        this.imgUrl =
+          "/files/" + row.path.substr(row.path.lastIndexOf("/") + 1);
       }
     },
     // 娓呯┖杈撳叆妗�
@@ -472,7 +613,7 @@
         name: "",
         sort: 0,
         status: 0,
-        type: 1
+        type: 1,
       };
     },
     // 娣诲姞璁惧
@@ -486,7 +627,7 @@
     // 鏁版嵁鏍堟枃浠跺す閫変腑鏃讹紝鐢辩埗缁勪欢瑙﹀彂
     selectDir(node) {
       if (node.id === "") {
-        return
+        return;
       }
 
       this.isDisabled = false;
@@ -508,8 +649,8 @@
       this.total = 0;
       this.multipleSelection = []; // 娓呯┖閫変腑鐘舵��
       this.initFetchListTask();
-      this.videoUrl = '';
-      this.imgUrl = '';
+      this.videoUrl = "";
+      this.imgUrl = "";
     },
     initFetchListTask() {
       const uid = Math.round(Math.random() * 1000);
@@ -527,53 +668,60 @@
       }, 2 * 1000);
     },
     fetchFileList() {
-      findAllFileByStackId({ name: this.searchInput, stackId: this.form.id, page: this.page, size: this.size, type: 0 }).then(
-        rsp => {
+      findAllFileByStackId({
+        name: this.searchInput,
+        stackId: this.form.id,
+        page: this.page,
+        size: this.size,
+        type: 0,
+      })
+        .then((rsp) => {
           if (rsp && rsp.success && rsp.data.total >= 0) {
             this.fileList = rsp.data.dataList;
             this.total = rsp.data.total;
             // 瀹氭椂鍒锋柊浼氭竻绌洪�変腑鐘舵�侊紝鍦ㄨ繖閲屾仮澶�
-            this.fileList.forEach(row => {
+            this.fileList.forEach((row) => {
               //this.polygonDatas.push({snapshot_url:row.snapshot_url})
               if (this.multipleSelection.indexOf(row.id) !== -1) {
                 this.$nextTick(() => {
                   this.$refs.multipleTable.toggleRowSelection(row);
-                })
+                });
               }
             });
           }
-        }).catch(err => {
-          console.log(err)
         })
+        .catch((err) => {
+          console.log(err);
+        });
     },
 
     // 淇濆瓨
     onSubmit(formName) {
-      if (formName == 'addForm') {
-        if (this.form.name.indexOf('/') >= 0) {
+      if (formName == "addForm") {
+        if (this.form.name.indexOf("/") >= 0) {
           this.$notify({
             type: "error",
-            message: "淇濆瓨澶辫触,鏁版嵁鏍堝悕绉颁笉鑳藉寘鍚�'/'锛�"
+            message: "淇濆瓨澶辫触,鏁版嵁鏍堝悕绉颁笉鑳藉寘鍚�'/'锛�",
           });
           return;
         }
       }
-      this.$refs[formName].validate(async valid => {
+      this.$refs[formName].validate(async (valid) => {
         if (valid) {
-          saveDir(this.form).then(rsp => {
+          saveDir(this.form).then((rsp) => {
             if (rsp.success) {
               this.$notify({
                 type: "success",
-                message: "鏁版嵁鏍堜俊鎭繚瀛樻垚鍔燂紒"
+                message: "鏁版嵁鏍堜俊鎭繚瀛樻垚鍔燂紒",
               });
               this.DataStackPool.fetchFiles();
             } else {
               this.$notify({
                 type: "error",
-                message: "鏁版嵁鏍堜俊鎭繚瀛樺け璐ワ紒"
+                message: "鏁版嵁鏍堜俊鎭繚瀛樺け璐ワ紒",
               });
             }
-          })
+          });
         }
       });
     },
@@ -582,36 +730,38 @@
       this.$confirm("鏄惁鍒犻櫎姝ゆ枃浠跺す锛�", {
         center: true,
         cancelButtonClass: "comfirm-class-cancle",
-        confirmButtonClass: "comfirm-class-sure"
+        confirmButtonClass: "comfirm-class-sure",
       }).then(() => {
-        delDir(this.form.id).then(res => {
-          if (res.success) {
-            this.initFormData();
-            this.$notify({
-              type: "success",
-              message: "鍒犻櫎鎴愬姛锛�"
-            });
-            this.DataStackPool.fetchFiles();
-            this.DataStackPool.selectedDir = {};
-          } else {
+        delDir(this.form.id)
+          .then((res) => {
+            if (res.success) {
+              this.initFormData();
+              this.$notify({
+                type: "success",
+                message: "鍒犻櫎鎴愬姛锛�",
+              });
+              this.DataStackPool.fetchFiles();
+              this.DataStackPool.selectedDir = {};
+            } else {
+              this.$notify({
+                type: "error",
+                message: "鍒犻櫎澶辫触锛�",
+              });
+            }
+          })
+          .catch((err) => {
             this.$notify({
               type: "error",
-              message: "鍒犻櫎澶辫触锛�"
+              message: "鍒犻櫎澶辫触锛�",
             });
-          }
-        }).catch(err => {
-          this.$notify({
-            type: "error",
-            message: "鍒犻櫎澶辫触锛�"
           });
-        });
       });
     },
     handleTabClick(tab, event) {
       console.log(tab, event);
     },
     handleSelect(val) {
-      this.multipleSelection = val.map(row => {
+      this.multipleSelection = val.map((row) => {
         return row.id;
       });
     },
@@ -619,8 +769,12 @@
       this.multipleSelection = [];
     },
     handleUpload() {
-      console.log(this.DataStackPool.selectedDir.id)
-      console.log(this.$refs[`uploader_${this.DataStackPool.selectedDir.id}`][0].$refs.button.$refs.btn.click())
+      console.log(this.DataStackPool.selectedDir.id);
+      console.log(
+        this.$refs[
+          `uploader_${this.DataStackPool.selectedDir.id}`
+        ][0].$refs.button.$refs.btn.click()
+      );
     },
     handleRefrashFileList(val) {
       this.page = val;
@@ -635,17 +789,17 @@
     async handleSortFile(direct, id) {
       let res = await sortFile({
         id: id,
-        direct: direct
-      })
+        direct: direct,
+      });
       if (res && res.success) {
         this.fetchFileList();
         //鏇存柊鐙珛鍦烘櫙鏁版嵁鏍堟枃浠�
-        console.log(this.$root.$children[0].$children[1].$refs['sepRule'])
-        this.$root.$children[0].$children[1].$refs['sepRule'].getStackFiles();
+        console.log(this.$root.$children[0].$children[1].$refs["sepRule"]);
+        this.$root.$children[0].$children[1].$refs["sepRule"].getStackFiles();
         this.$notify({
           type: "success",
-          message: "鏂囦欢鎺掑簭鎴愬姛锛�"
-        })
+          message: "鏂囦欢鎺掑簭鎴愬姛锛�",
+        });
       }
     },
     async handleFileStatus(row, status, multi = false) {
@@ -656,24 +810,24 @@
       if (!ids.length) {
         this.$notify({
           type: "error",
-          message: "鏈�変腑鏂囦欢"
-        })
-        return
+          message: "鏈�変腑鏂囦欢",
+        });
+        return;
       }
       try {
         let res = await updateStatus({
           ids: ids,
-          status: status
-        })
+          status: status,
+        });
         if (res && res.success) {
           this.fetchFileList();
           this.$notify({
             type: "success",
-            message: "鍒囨崲鏂囦欢澶勭悊鐘舵�佹垚鍔�"
-          })
+            message: "鍒囨崲鏂囦欢澶勭悊鐘舵�佹垚鍔�",
+          });
         }
       } catch {
-        console.log("err")
+        console.log("err");
       }
     },
     dropdownClick(cmd) {
@@ -688,23 +842,24 @@
       if (!ids.length) {
         this.$notify({
           type: "error",
-          message: "鏈�変腑鏂囦欢"
-        })
-        return
-      }
-      this.$confirm('鎻愮ず锛氱‘瀹氬垹闄よ鏂囦欢鍚楋紵', {
-        center: true,
-        cancelButtonClass: 'comfirm-class-cancle',
-        confirmButtonClass: 'comfirm-class-sure'
-      }).then(() => {
-        deleteLocalFile({ ids: ids }).then(rsp => {
-          this.$notify({
-            type: "error",
-            message: "鏂囦欢宸插垹闄�"
-          })
+          message: "鏈�変腑鏂囦欢",
         });
-
-      }).catch(() => { })
+        return;
+      }
+      this.$confirm("鎻愮ず锛氱‘瀹氬垹闄よ鏂囦欢鍚楋紵", {
+        center: true,
+        cancelButtonClass: "comfirm-class-cancle",
+        confirmButtonClass: "comfirm-class-sure",
+      })
+        .then(() => {
+          deleteLocalFile({ ids: ids }).then((rsp) => {
+            this.$notify({
+              type: "error",
+              message: "鏂囦欢宸插垹闄�",
+            });
+          });
+        })
+        .catch(() => {});
     },
     handleFileMove(row) {
       this.targetDir = "";
@@ -718,63 +873,67 @@
     },
     cellRenameFile(row) {
       this.editRowId = "";
-      renameFile({ id: row.id, name: row.name }).then(rsp => {
-        if (rsp && rsp.success) {
-          this.$notify({
-            type: "success",
-            message: "鏂囦欢閲嶅懡鍚嶆垚鍔�"
-          })
-        } else {
-          this.$notify({
-            type: "error",
-            message: "鏂囦欢閲嶅懡鍚嶅け璐�"
-          })
-        }
-        if (!this.timer) {
-          this.initFetchListTask();
-        }
-      }).catch(() => {
-        if (!this.timer) {
-          this.initFetchListTask();
-        }
-      })
+      renameFile({ id: row.id, name: row.name })
+        .then((rsp) => {
+          if (rsp && rsp.success) {
+            this.$notify({
+              type: "success",
+              message: "鏂囦欢閲嶅懡鍚嶆垚鍔�",
+            });
+          } else {
+            this.$notify({
+              type: "error",
+              message: "鏂囦欢閲嶅懡鍚嶅け璐�",
+            });
+          }
+          if (!this.timer) {
+            this.initFetchListTask();
+          }
+        })
+        .catch(() => {
+          if (!this.timer) {
+            this.initFetchListTask();
+          }
+        });
     },
     isSelectable(row, rowIndex) {
-      return row.status !== 2
+      return row.status !== 2;
     },
     cellFileCopy() {
-      copyFile({ id: this.targetFile, stackIds: [this.targetDir] }).then(rsp => {
-        if (rsp && rsp.success) {
-          this.$notify({
-            type: "success",
-            message: "澶嶅埗鎴愬姛"
-          })
-          this.fileDialog = false;
-        } else {
-          this.$notify({
-            type: "error",
-            message: "澶嶅埗澶辫触"
-          })
+      copyFile({ id: this.targetFile, stackIds: [this.targetDir] }).then(
+        (rsp) => {
+          if (rsp && rsp.success) {
+            this.$notify({
+              type: "success",
+              message: "澶嶅埗鎴愬姛",
+            });
+            this.fileDialog = false;
+          } else {
+            this.$notify({
+              type: "error",
+              message: "澶嶅埗澶辫触",
+            });
+          }
         }
-      })
+      );
     },
     cellFileMove() {
-      moveFile({ id: this.targetFile, stackId: this.targetDir }).then(rsp => {
+      moveFile({ id: this.targetFile, stackId: this.targetDir }).then((rsp) => {
         if (rsp && rsp.success) {
           this.$notify({
             type: "success",
-            message: "绉诲姩鎴愬姛"
-          })
+            message: "绉诲姩鎴愬姛",
+          });
           this.fileDialog = false;
         } else {
           this.$notify({
             type: "error",
-            message: "绉诲姩澶辫触"
-          })
+            message: "绉诲姩澶辫触",
+          });
         }
-      })
-    }
-  }
+      });
+    },
+  },
 };
 </script>
 
@@ -893,5 +1052,8 @@
     background: url("/images/cameraAccess/files.png");
     background-repeat: round;
   }
+  .video-player {
+    height: 230px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index ff033e6..f4b88d8 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -93,7 +93,7 @@
       },
       "/data/api-v/app/findAllApp": {
         // target: '/',
-        target: "http://localhost:8081/",
+        target: "http://localhost:8080/",
         changeOrigin: true,
         pathRewrite: {
           "^/data/api-v/app/findAllApp": "apps.json",

--
Gitblit v1.8.0