smsb-web-develop/src/views/device/detail/components/external/Camera/index.vue

<template>
  <div class="l-flex--col">
    <el-tabs
      :value="active"
      class="c-tabs has-bottom-padding"
      @tab-click="onTabClick"
    >
      <template v-if="editable">
        <el-tab-pane name="TRAFFIC_CAMERA">
          <template #label>
            <div class="o-tab">
              <i
                class="o-tab__icon el-icon-circle-plus-outline"
                @click.stop="onAdd('TRAFFIC_CAMERA')"
              />
              人流量监测
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane name="LED_CAMERA">
          <template #label>
            <div class="o-tab">
              <i
                class="o-tab__icon el-icon-circle-plus-outline"
                @click.stop="onAdd('LED_CAMERA')"
              />
              LED屏监测
            </div>
          </template>
        </el-tab-pane>
      </template>
      <template v-else>
        <el-tab-pane
          label="人流量监测"
          name="TRAFFIC_CAMERA"
        />
        <el-tab-pane
          label="LED屏监测"
          name="LED_CAMERA"
        />
      </template>
    </el-tabs>
    <grid-table
      ref="table"
      :schema="schema"
      size="large"
    >
      <grid-table-item v-slot="item">
        <camera-player
          v-if="isActivated"
          :key="item.identifier"
          :camera="item"
          :autoplay="!editable"
          controls
          @fullscreen="onFullScreen(item)"
        >
          <template v-if="editable">
            <i
              class="c-sibling-item el-icon-delete has-active u-pointer"
              @click.stop="onDel(item)"
            />
          </template>
        </camera-player>
      </grid-table-item>
    </grid-table>
    <el-dialog
      class="c-dialog--full"
      :visible="detailing"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      fullscreen
    >
      <camera-detail
        v-if="detailing"
        :camera="targetCamera"
        autoplay
        controls
        @close="onClose"
      />
    </el-dialog>
    <table-dialog
      ref="cameraDialog"
      :title="title"
      :schema="cameraSchema"
      @choosen="onCameraChoosen"
    />
  </div>
</template>

<script>
import {
  getCameras,
  getThirdPartyDevices,
  bind,
  unbind
} from '@/api/external'
import {
  Camera,
  ThirdPartyDevice
} from '@/constant'

export default {
  name: 'DeviceCamera',
  props: {
    device: {
      type: Object,
      required: true
    },
    editable: {
      type: [Boolean, String],
      default: false
    }
  },
  data () {
    return {
      active: 'TRAFFIC_CAMERA',
      deviceType: ThirdPartyDevice.TRAFFIC_CAMERA,
      schema: {
        pageSize: 999,
        list: this.getCameras
      },
      detailing: false,
      targetCamera: null
    }
  },
  computed: {
    isTraffic () {
      return this.active === 'TRAFFIC_CAMERA'
    },
    cameraType () {
      return this.isTraffic ? Camera.TRAFFIC : Camera.LED
    },
    isActivated () {
      return !this.detailing
    },
    title () {
      return this.deviceType === ThirdPartyDevice.TRAFFIC_CAMERA ? '绑定人流量监测摄像头' : '绑定LED屏监测摄像头'
    },
    cameraSchema () {
      return {
        condition: { deviceType: this.deviceType },
        list: getThirdPartyDevices,
        cols: [
          { prop: 'name', label: '名称' },
          { prop: 'remark', label: '备注' }
        ]
      }
    }
  },
  methods: {
    onTabClick ({ name: active }) {
      if (this.active !== active) {
        this.active = active
        this.$refs.table.pageTo(1)
      }
    },
    getCameras () {
      return getCameras({
        deviceId: this.device.id,
        cameraType: this.cameraType
      }).then(({ data }) => {
        data = data.map(({ id, thirdPartyDevice }) => {
          return {
            ...thirdPartyDevice,
            id
          }
        })
        return { data }
      })
    },
    onFullScreen (camera) {
      if (camera.onlineStatus) {
        this.targetCamera = camera
        this.detailing = true
      }
    },
    onClose () {
      this.detailing = false
    },
    onAdd (deviceType) {
      this.deviceType = ThirdPartyDevice[deviceType]
      this.$refs.cameraDialog.show()
    },
    onCameraChoosen ({ value, done }) {
      this.$confirm(
        `${this.title} ${value.name} ？`,
        { type: 'warning' }
      ).then(() => {
        bind(this.device.id, this.deviceType, value.id).then(() => {
          done()
          if (this.deviceType === ThirdPartyDevice[this.active]) {
            this.$refs.table.pageTo(1)
          } else {
            this.onTabClick({ name: this.isTraffic ? 'LED_CAMERA' : 'TRAFFIC_CAMERA' })
          }
        })
      })
    },
    onDel (item) {
      this.$confirm(
        `解绑摄像头 ${item.name} ？`,
        { type: 'warning' }
      ).then(() => {
        unbind(item.id).then(() => {
          this.$refs.table.decrease(1)
        })
      })
    }
  }
}
</script>