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

---
 src/pages/cameraAccess/components/DataStackInfo.vue |  570 ++++++++++++++++++++++++++++++++++++--------------------
 1 files changed, 366 insertions(+), 204 deletions(-)

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

--
Gitblit v1.8.0