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

<template>
  <full-link
    :device="device"
    :online="online"
    @click="onClick"
  >
    <el-dialog
      :visible.sync="showDetail"
      custom-class="c-dialog--detail"
      :title="title"
      :close-on-click-modal="false"
    >
      <component
        :is="activeComponent"
        v-if="showDetail"
        class="l-flex__auto"
        :device="device"
      />
    </el-dialog>
  </full-link>
</template>

<script>
import { ThirdPartyDevice } from '@/constant'
import SendingCard from './external/SendingCard'
import ReceivingCard from './external/ReceivingCard'
import TrafficCamera from './external/Camera/traffic.vue'
import LedCamera from './external/Camera/led.vue'
import Gateway from './external/Gateway'

export default {
  name: 'DeviceExternal',
  components: {
    SendingCard,
    ReceivingCard,
    TrafficCamera,
    LedCamera,
    Gateway
  },
  props: {
    device: {
      type: Object,
      required: true
    },
    online: {
      type: [Boolean, String],
      default: false
    }
  },
  data () {
    return {
      showDetail: false,
      activeComponent: null,
      title: ''
    }
  },
  methods: {
    onClick ({ key, label }) {
      let activeComponent = null
      switch (key) {
        case ThirdPartyDevice.SENDING_CARD:
          activeComponent = 'SendingCard'
          break
        case ThirdPartyDevice.RECEIVING_CARD:
          activeComponent = 'ReceivingCard'
          break
        case ThirdPartyDevice.TRAFFIC_CAMERA:
          activeComponent = 'TrafficCamera'
          break
        case ThirdPartyDevice.LED_CAMERA:
          activeComponent = 'LedCamera'
          break
        case ThirdPartyDevice.GATEWAY:
          activeComponent = 'Gateway'
          break
        default:
          return
      }
      this.title = label
      this.activeComponent = activeComponent
      this.showDetail = true
    }
  }
}
</script>