feat: add bindDevice(camera)

src/api/external.js

@@ -7,7 +7,7 @@ import {
 } from './base'
 import { ThirdPartDevice } from '@/constant'
 
-function bind (deviceId, deviceType, thirdPartyDeviceId) {
+export function bind (deviceId, deviceType, thirdPartyDeviceId) {
   return messageSend({
     url: '/device/bind',
     method: 'POST',

src/components/dialog/BindDeviceDialog/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <table-dialog
+    ref="tableDialog"
+    title="绑定设备"
+    size="medium"
+    :schema="schema"
+    append-to-body
+    v-bind="$attrs"
+    @choosen="onChoosen"
+  />
+</template>
+
+<script>
+import { getCameras } from '@/api/camera'
+import { ThirdPartDevice } from '@/constant'
+const cameraType2thirdPartDevice = {
+  1: ThirdPartDevice.LED_CAMERA,
+  2: ThirdPartDevice.TRAFFIC_CAMERA
+}
+export default {
+  name: 'BindDeviceDialog',
+  props: {
+    ratio: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      device: {},
+      schema: {
+        list: this.getCameras,
+        condition: {},
+        filters: [
+          { key: 'name', type: 'search', placeholder: '设备名称' }
+        ],
+        cols: [
+          { prop: 'name', label: '设备名称' },
+          {
+            label: '产品',
+            render ({ empty, cameraType }) {
+              return empty
+                ? null
+                : {
+                  0: '通用摄像头',
+                  1: 'LED屏画面监测摄像头',
+                  2: '人流量监测摄像头'
+                }[cameraType] || ''
+            }
+          },
+          {
+            label: '状态',
+            type: 'tag',
+            width: 100,
+            render ({ empty, onlineStatus }) {
+              return empty
+                ? null
+                : {
+                  type: onlineStatus === 1 ? 'success' : 'danger',
+                  label: onlineStatus === 1 ? '在线' : '离线'
+                }
+            }
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    show (device) {
+      device && (this.device = device)
+      this.$refs.tableDialog.show()
+    },
+    onChoosen ({ value, done }) {
+      this.$emit('choosen', {
+        value: this.getValue(
+          this.$refs.tableDialog.getTable().getCondition().type,
+          value
+        ),
+        done
+      })
+    },
+    getCameras,
+    getValue (type, item) {
+      switch (type) {
+        default:
+          return { ...item, deviceType: cameraType2thirdPartDevice[item.cameraType] }
+      }
+    }
+  }
+}
+</script>

src/constant.js

@@ -50,7 +50,9 @@ export const EventTarget = {
 
 export const ThirdPartDevice = {
   RECEIVING_CARD: 1,
-  SENDING_CARD: 2
+  SENDING_CARD: 2,
+  LED_CAMERA: 4,
+  TRAFFIC_CAMERA: 5
 }
 
 export const Transmitter = {

src/views/device/index.vue

@@ -16,6 +16,10 @@
       :ratio="ratio"
       @choosen="onChoosen"
     />
+    <bind-device-dialog
+      ref="bindDeviceDialog"
+      @choosen="onBindDeviceChoosen"
+    />
   </wrapper>
 </template>
 
@@ -28,6 +32,7 @@ import {
   getProducts
 } from '@/api/device'
 import { publish } from '@/api/platform'
+import { bind as bindDevice } from '@/api/external'
 import {
   Access,
   EventPriority,
@@ -97,7 +102,8 @@ export default {
                   : '未激活'
               }
           }, on: this.onTagClick },
-          { type: 'invoke', width: canEdit ? 160 : 120, render: [
+          { type: 'invoke', width: canEdit ? 160 + 40 : 120 + 40, render: [
+            { label: '绑定设备', render ({ empty }) { return !empty }, on: this.onBindDevice },
             { label: '查看', render ({ empty }) { return !empty }, on: this.onViewDevice },
             canEdit ? { label: '默认播放', render ({ isMaster, activate }) { return isMaster && activate }, on: this.onSetDefaultProgram } : null
           ].filter(val => val) }
@@ -195,6 +201,23 @@ export default {
       }
       this.$refs.eventTargetDialog.show()
     },
+    onBindDevice (device) {
+      this.$device = {
+        id: device.id,
+        name: device.name
+      }
+      this.$refs.bindDeviceDialog.show()
+    },
+    onBindDeviceChoosen ({ value, done }) {
+      console.log(bindDevice)
+      this.$confirm(
+        `确定绑定设备 ？`,
+        { type: 'warning' }
+      ).then(() => {
+        console.log(bindDevice)
+        bindDevice(this.$device.id, value.deviceType, value.id).then(done)
+      })
+    },
     onChoosen ({ value, done }) {
       this.$confirm(
         `将设备 ${this.$device.name} 的默认播放设置为 ${value.name} ？`,