监控管理 视频监控

src/api/storeManage/listenManage/index.js

@@ -19,7 +19,8 @@ export function getDevice() {
 export function cameraDownload(params) {
   return request({
     url: 'api/camera/download' + '?' + qs.stringify(params, { indices: false }),
-    method: 'get'
+    method: 'get',
+    responseType: 'blob'
   })
 }
 

src/views/storeManage/listenManage/videoListen/index.vue

@@ -34,20 +34,12 @@
       </el-table-column>
       <el-table-column prop="downloadLink" label="操作" align="center" min-width="100">
         <template slot-scope="scope">
-          <el-button v-if="scope.row.downloadLink" size="mini" style="background:#3A99FD;border:none" @click="handleListen(scope.row.downloadLink)">查看监控</el-button>
-          <el-button v-if="!scope.row.downloadLink" size="mini" style="background:#FD8042;border:none" @click="handleListen(scope.row.downloadLink)">重新下载</el-button>
+          <el-button v-if="scope.row.downloadLink" size="mini" style="background:#3A99FD;border:none" @click="handleListen(scope.row)">查看监控</el-button>
+          <el-button v-if="!scope.row.downloadLink" size="mini" style="background:#FD8042;border:none" @click="handleListen(scope.row)">重新下载</el-button>
         </template>
       </el-table-column>
     </el-table>
     <pagination />
-    <!-- 查看监控 -->
-    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="lookVisible" title="查看监控">
-      <span class="dialog-right-top" />
-      <span class="dialog-left-bottom" />
-      <div class="setting-dialog">
-        <!--  -->
-      </div>
-    </el-dialog>
   </div>
 </template>
 
@@ -58,6 +50,8 @@ import DateRangePicker from '@/components/DateRangePicker'
 import pagination from '@crud/Pagination'
 import data1 from '../module/data1'
 import { cameraDownload } from '@/api/storeManage/listenManage'
+import { parseTime, downloadFile } from '@/utils/index'
+
 // import qs from 'qs'
 export default {
   name: 'VideoListen',
@@ -72,7 +66,6 @@ export default {
   data() {
     return {
       tableData: [],
-      lookVisible: false,
       optionVal: '全部',
       options: [
         { value: '全部', label: '全部' },
@@ -94,8 +87,8 @@ export default {
     //     return 'text-red'
     //   }
     // },
+    parseTime, downloadFile,
     [CRUD.HOOK.beforeRefresh]() {
-      // this.crud.downloadLoading = true
       this.crud.query.event = null
       this.crud.query.createTime = null
       if (this.optionVal === '全部') {
@@ -103,7 +96,6 @@ export default {
       } else {
         this.crud.query.event = this.optionVal
       }
-      // this.crud.query.blurry = this.keyWord
       if (this.queryTime) {
         this.crud.query.createTime = this.queryTime
       } else {
@@ -112,13 +104,15 @@ export default {
     },
     // 查看监控
     handleListen(row) {
-      // this.lookVisible = true
       console.log(row)
       const params = {
-        'fileName': '1662714646.ts'
+        'fileName': row.downloadLink
       }
-      cameraDownload(params).then(res => {
-        console.log(res)
+      const name = row.deviceCamerBindId.storeroomName + row.deviceCamerBindId.deviceName + '监控'
+      cameraDownload(params).then(result => {
+        this.downloadFile(result, name, 'ts')
+      }).catch(() => {
+        this.$message.error('下载失败，请检查好网络后重新下载')
       })
     }
   }