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

<template>
  <div class="l-flex--col">
    <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
          controls
          @fullscreen="onFullScreen(item)"
        />
      </grid-table-item>
    </grid-table>
    <camera-dialog
      ref="cameraDialog"
      @open="onOpen"
      @closed="onClosed"
    />
  </div>
</template>

<script>
import { getCameras } from '@/api/external'
import { Camera } from '@/constant'

export default {
  name: 'DeviceTrafficCamera',
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      schema: {
        pageSize: 999,
        list: this.getCameras
      },
      isActivated: true
    }
  },
  methods: {
    getCameras () {
      return getCameras({
        deviceId: this.device.id,
        cameraType: Camera.TRAFFIC
      }).then(({ data }) => {
        data = data.map(({ id, thirdPartyDevice }) => {
          return {
            ...thirdPartyDevice,
            id
          }
        })
        return { data }
      })
    },
    onFullScreen (camera) {
      this.$refs.cameraDialog.show(camera)
    },
    onOpen () {
      this.isActivated = false
    },
    onClosed () {
      this.isActivated = true
    }
  }
}
</script>