smsb-web-develop/src/views/external/camera/snap/index.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <schema-table
      ref="table"
      :schema="schema"
    />
    <confirm-dialog
      ref="editDialog"
      title="抓图参数配置"
      @confirm="onConfirm"
    >
      <div class="c-grid-form auto u-align-self--center">
        <span class="c-grid-form__label">启用</span>
        <div class="l-flex--row c-grid-form__option">
          <el-switch
            v-model="config.enabled"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </div>
        <span class="c-grid-form__label">抓图时间范围</span>
        <el-time-picker
          v-model="range"
          class="u-width"
          is-range
          format="HH:mm:ss"
          value-format="HH:mm:ss"
          :clearable="false"
        />
        <span class="c-grid-form__label">抓图间隔(s)</span>
        <el-input-number
          v-model="config.offset"
          class="has-info"
          data-info="范围：5~50"
          controls-position="right"
          :min="5"
          :max="50"
          step-strictly
        />
        <span class="c-grid-form__label">开机保护时间(s)</span>
        <el-input-number
          v-model="config.preserveSecond"
          class="has-info"
          data-info="范围：0~3600"
          controls-position="right"
          :min="0"
          :max="3600"
          step-strictly
        />
        <span class="c-grid-form__label">确认黑屏持续时间(min)</span>
        <el-input-number
          v-model="config.confirmDuration"
          class="has-info"
          data-info="范围：1~30"
          controls-position="right"
          :min="1"
          :max="30"
          step-strictly
        />
      </div>
    </confirm-dialog>
    <table-dialog
      ref="resultDialog"
      title="检测结果"
      size="lg"
      :schema="snapSchema"
    />
    <preview-dialog ref="previewDialog" />
    <camera-dialog ref="cameraDialog" />
    <mesh-dialog ref="meshDialog" />
  </wrapper>
</template>

<script>
import { Camera } from '@/constant'
import {
  getCameras,
  updateCamera
} from '@/api/external'
import {
  AduitStatus,
  AduitStatusInfo,
  getSnapPicConfig,
  updateSnapPicConfig,
  getSnapPicResults
} from './api'
import MeshDialog from '../../components/MeshDialog.vue'

export default {
  name: 'CameraSnapPic',
  components: {
    MeshDialog
  },
  data () {
    return {
      schema: {
        list: getCameras,
        condition: { cameraType: Camera.LED },
        filters: [
          { key: 'boundFlag', type: 'select', placeholder: '使用情况', options: [
            { value: 0, label: '未使用' },
            { value: 1, label: '已使用' }
          ] },
          { key: 'identifier', type: 'search', placeholder: '唯一标识' },
          { key: 'remark', type: 'search', placeholder: '备注' }
        ],
        cols: [
          { type: 'refresh' },
          { prop: 'manufacturerName', label: '厂商' },
          { prop: 'model', label: '型号' },
          { prop: 'identifier', label: '唯一标识' },
          { prop: 'remark', label: '备注', render: (data, h) => h('edit-input', {
            props: {
              value: `${data.remark}`
            },
            on: { edit: val => this.onEditRemark(data, val) }
          }), 'class-name': 'c-edit-column', 'min-width': 120 },
          { 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: '查看', allow: ({ onlineStatus }) => onlineStatus, on: this.onView },
            { label: '所属网点', allow: ({ bound }) => bound, on: this.onViewMesh },
            { label: '配置', on: this.onConfig },
            { label: '检测结果', on: this.onResult }
          ], width: 260 }
        ]
      },
      cameraId: null,
      config: {}
    }
  },
  computed: {
    range: {
      get () {
        return [this.config.startTime || '', this.config.endTime || '']
      },
      set (val) {
        this.$set(this.config, 'startTime', val[0])
        this.$set(this.config, 'endTime', val[1])
      }
    },
    snapSchema () {
      return {
        list: getSnapPicResults,
        condition: { cameraId: this.cameraId },
        cols: [
          { prop: 'file', type: 'asset', on: this.onViewAsset, refresh: true },
          { prop: 'snapTime', label: '抓图时间', width: 160 },
          { prop: 'auditState', label: '审核状态', type: 'tag', render: ({ auditState }) => {
            const info = AduitStatusInfo[auditState]
            return info
              ? {
                type: auditState === AduitStatus.RESOLVED
                  ? 'success'
                  : auditState === AduitStatus.REJECTED
                    ? 'danger'
                    : auditState === AduitStatus.FAILED
                      ? 'warning'
                      : 'primary',
                label: info
              }
              : null
          }, width: 120, align: 'center' },
          { prop: 'auditMsg', label: '审核信息' },
          { prop: 'auditTime', label: '审核时间', width: 160 }
        ]
      }
    }
  },
  methods: {
    onEditRemark (camera, { newVal, oldVal }) {
      if (newVal === oldVal) {
        return
      }
      camera.remark = newVal
      updateCamera({
        id: camera.id,
        username: camera.username,
        remark: newVal
      }).catch(() => {
        camera.remark = oldVal
      })
    },
    onConfig (camera) {
      getSnapPicConfig(camera.identifier).then(({ data }) => {
        const { startTime, endTime, offset, preserveSecond, confirmDuration, enabled } = {
          startTime: '07:00:00',
          endTime: '22:00:00',
          offset: 10,
          preserveSecond: 0,
          confirmDuration: 1,
          enabled: false,
          ...data
        }
        this.config = {
          startTime,
          endTime,
          offset,
          preserveSecond,
          confirmDuration,
          enabled
        }
        this.$identifier = camera.identifier
        this.$refs.editDialog.show()
      })
    },
    onConfirm (done) {
      if (!this.config.startTime || !this.config.endTime) {
        this.$message({
          type: 'warning',
          message: '请选择抓图时间范围'
        })
        return
      }
      updateSnapPicConfig(this.$identifier, this.config).then(done)
    },
    onView (camera) {
      this.$refs.cameraDialog.show(camera)
    },
    onViewMesh ({ id }) {
      this.$refs.meshDialog.show(id)
    },
    onResult (camera) {
      this.cameraId = camera.id
      this.$refs.resultDialog.show()
    },
    onViewAsset ({ file }) {
      this.$refs.previewDialog.show(file)
    }
  }
}
</script>