feat(camera): record

src/api/external.js

@@ -411,6 +411,14 @@ export function getCameras (query) {
   })
 }
 
+// 摄像头单个查询
+export function getCameraById (id) {
+  return request({
+    url: `/camera/${id}`,
+    method: 'GET'
+  })
+}
+
 export function addCamera (data) {
   return add({
     url: '/camera',
@@ -433,3 +441,71 @@ export function deleteCamera (id) {
     method: 'DELETE'
   }, '该摄像头')
 }
+
+// 录像
+// 查询SD卡的录像
+export function getSDRecords ({ identifier, ...params }) {
+  return request({
+    url: `/camera/${identifier}/queryRecord`,
+    method: 'GET',
+    params: {
+      ...params
+    }
+  })
+}
+
+// 新建下载录像
+export function downloadRecord ({ identifier, ...params }) {
+  return add({
+    url: `/camera/${identifier}/downloadRecord`,
+    method: 'POST',
+    data: params
+  })
+}
+
+// 停止下载录像
+export function stopDownloadRecord (identifier) {
+  return update({
+    url: `/camera/${identifier}/stopDownloadingRecord`,
+    method: 'POST'
+  }, '停止')
+}
+
+// 恢复下载录像
+export function resumeDownloadRecord (id) {
+  return update({
+    url: `/camera/resumeDownload/${id}`,
+    method: 'POST'
+  }, '恢复')
+}
+
+// 录像任务
+export function getRecords (query) {
+  const { pageNum: pageIndex, pageSize, ...params } = query
+  return request({
+    url: '/camera/downloadRecord/page',
+    method: 'GET',
+    params: {
+      pageIndex, pageSize,
+      ...params
+    }
+  })
+}
+
+// 下载中的录像
+export function getDownloadingRecords (identifier) {
+  return request({
+    url: `/camera/${identifier}/downloadingRecord`,
+    method: 'GET'
+  }).then(({ data }) => {
+    return { data: data ? [data] : null }
+  })
+}
+
+// 删除录像
+export function deleteRecord (id) {
+  return del({
+    url: `/camera/record/${id}`,
+    method: 'DELETE'
+  })
+}

src/components/table/Table/index.vue

@@ -74,6 +74,15 @@
               @search="onChange"
             />
           </template>
+          <template v-if="filter.type === 'datetime'">
+            <el-date-picker
+              v-model="options.params[filter.key]"
+              type="datetime"
+              :placeholder="filter.placeholder"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              @change="onChange"
+            />
+          </template>
           <template v-if="filter.type === 'refresh'">
             <button
               class="c-sibling-item near o-button"

src/utils/request.js

@@ -233,10 +233,11 @@ function responseErrorInterceptor (error) {
     } else {
       message = '请求异常'
     }
-    Message({
-      type: 'error',
-      message
-    })
+    console.log(message)
+    // Message({
+    //   type: 'error',
+    //   message
+    // })
   }
   return Promise.reject({ errCode: -1, errMessage: message })
 }

src/views/device/camera/index.vue

@@ -0,0 +1,195 @@
+<template>
+  <wrapper
+    fill
+    margin
+    padding
+    background
+  >
+    <schema-table
+      ref="table"
+      :schema="schema"
+      highlight-current-row
+    />
+    <table-dialog
+      ref="recordTableDialog"
+      title="录像"
+      :schema="recordSchema"
+    />
+    <table-dialog
+      ref="sdRecordTableDialog"
+      title="SD卡数据"
+      :schema="sdRecordSchema"
+    >
+      <template #header>
+        <div class="u-color--error">
+          展示的为结束时间往前一小时内的录像，默认为当前时间
+        </div>
+      </template>
+    </table-dialog>
+    <preview-dialog ref="previewDialog" />
+    <camera-dialog ref="cameraDialog" />
+  </wrapper>
+</template>
+
+<script>
+import {
+  Camera,
+  AssetType
+} from '@/constant'
+import { parseTime } from '@/utils'
+import {
+  getCameras,
+  getRecords,
+  getSDRecords,
+  downloadRecord,
+  stopDownloadRecord,
+  deleteRecord,
+  resumeDownloadRecord
+} from '@/api/external'
+
+export default {
+  data () {
+    return {
+      schema: {
+        list: this.getCameras,
+        filters: [
+          { key: 'boundFlag', type: 'select', placeholder: '使用情况', options: [
+            { value: 1, label: '已使用' },
+            { value: 0, label: '未使用' }
+          ] },
+          { key: 'identifier', type: 'search', placeholder: '唯一标识' },
+          { key: 'remark', type: 'search', placeholder: '备注' }
+        ],
+        cols: [
+          { type: 'refresh' },
+          { prop: 'identifier', label: '唯一标识' },
+          { prop: 'remark', label: '备注' },
+          { type: 'tag', render: ({ onlineStatus }) => onlineStatus === 1
+            ? { type: 'success', label: '在线' }
+            : { type: 'danger', label: '离线' } },
+          { label: '使用情况', type: 'tag', render: ({ bound }) => bound
+            ? { type: 'success', label: '已使用' }
+            : { type: 'primary', label: '未使用' } },
+          { type: 'invoke', render: [
+            { label: '录像信息', on: this.onViewRecords },
+            { label: '摄像头实时查看', allow: ({ onlineStatus }) => onlineStatus, on: this.onView }
+          ], width: 240 }
+        ]
+      },
+      // 录像
+      recordSchema: {
+        list: this.getRecords,
+        buttons: [
+          { type: 'add', label: '新增录像', on: this.onViewSD }
+        ],
+        cols: [
+          { type: 'refresh' },
+          { label: '时间', render: ({ startTime, endTime }) => `${startTime} - ${endTime}` },
+          { type: 'tag', prop: 'status', render: ({ status }) => status === 0
+            ? { type: 'primary', label: '下载中' }
+            : status === 1
+              ? { type: 'success', label: '完成' }
+              : status === 2
+                ? { type: 'danger', label: '失败' }
+                : { type: 'warning', label: '停止' } },
+          { type: 'invoke', render: [
+            { label: '停止', render: ({ status }) => status === 0, on: this.onStopDownloadRecord },
+            { label: '恢复', render: ({ status }) => status === 2 || status === 3, on: this.onResumeDownloadRecord },
+            { label: '播放', allow: ({ url }) => url, on: this.onPlayRecord },
+            { label: '删除', allow: ({ status }) => status !== 0, on: this.onDeleteRecord }
+          ], width: 200 }
+        ]
+      },
+      // SD卡数据
+      sdRecordSchema: {
+        nonPagination: true,
+        list: this.getSDRecords,
+        filters: [
+          { key: 'time', type: 'datetime', placeholder: '结束时间' }
+        ],
+        cols: [
+          { type: 'refresh' },
+          { prop: 'recordTypeName', label: '名称' },
+          { prop: 'startTime', label: '开始时间' },
+          { prop: 'endTime', label: '结束时间' },
+          { type: 'invoke', render: [
+            { label: '下载', on: this.onStartDownload }
+          ] }
+        ]
+      }
+    }
+  },
+  computed: {
+    pickerOptions () {
+      return {
+        disabledDate: this.isDisableDate
+      }
+    }
+  },
+  methods: {
+    isDisableDate (date) {
+      return date > Date.now()
+    },
+    getCameras (params) {
+      return getCameras({
+        cameraType: Camera.LED,
+        ...params
+      })
+    },
+    onView (camera) {
+      this.$refs.cameraDialog.show(camera)
+    },
+    onViewRecords ({ identifier }) {
+      this.identifier = identifier
+      this.$refs.recordTableDialog.show()
+    },
+    getRecords (params) {
+      return getRecords({
+        identifier: this.identifier,
+        ...params
+      })
+    },
+    onDeleteRecord ({ id }) {
+      deleteRecord(id).then(() => {
+        this.$refs.recordTableDialog.getTable().pageTo(1)
+      })
+    },
+    onResumeDownloadRecord ({ id }) {
+      resumeDownloadRecord(id).then(() => {
+        this.$refs.recordTableDialog.getTable().pageTo(1)
+      })
+    },
+    onStopDownloadRecord () {
+      stopDownloadRecord(this.identifier).then(() => {
+        this.$refs.recordTableDialog.getTable().pageTo(1)
+      })
+    },
+    onPlayRecord ({ url }) {
+      this.$refs.previewDialog.show({ type: AssetType.VIDEO, url })
+    },
+    onViewSD () {
+      this.$refs.sdRecordTableDialog.show()
+    },
+    getSDRecords ({ time }) {
+      time = time ? new Date(time) : new Date()
+      const startTime = new Date(time.getTime())
+      startTime.setHours(startTime.getHours() - 1)
+      return getSDRecords({
+        identifier: this.identifier,
+        startTime: parseTime(startTime, '{y}-{m}-{d} {h}:{i}:{s}'),
+        endTime: parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
+      })
+    },
+    onStartDownload ({ startTime, endTime }) {
+      downloadRecord({
+        identifier: this.identifier,
+        startTime,
+        endTime
+      }).then(() => {
+        this.$refs.sdRecordTableDialog.hide()
+        this.$refs.recordTableDialog.getTable().pageTo(1)
+      })
+    }
+  }
+}
+</script>