feat: device attribute configuration

remove collectDevice and replace it with deviceAttributes.recoveryCardIP in oss message

src/views/realm/ai-timing/components/DeviceServiceConfigDialog.vue

@@ -13,13 +13,6 @@
           inactive-color="#ff4949"
         />
       </div>
-      <span class="c-grid-form__label u-bold">回采设备：</span>
-      <div class="l-flex--row c-grid-form__option">
-        <schema-select
-          v-model="deviceServiceConfig.collectDevice"
-          :schema="collectDeviceSelectSchema"
-        />
-      </div>
       <span class="c-grid-form__label">抽帧间隔：</span>
       <div class="c-grid-form__option">
         <el-input-number
@@ -53,20 +46,11 @@ import {
   updateDeviceServiceConfig
 } from '../api'
 
-const CollectDevice = {
-  BOX: 1,
-  CARD: 2
-}
-
 export default {
   name: 'DeviceServiceConfigDialog',
   data () {
     return {
       title: '',
-      collectDeviceSelectSchema: { options: [
-        { value: CollectDevice.BOX, label: '播放器' },
-        { value: CollectDevice.CARD, label: '采集卡' }
-      ] },
       deviceServiceConfig: {}
     }
   },
@@ -77,7 +61,6 @@ export default {
         this.deviceServiceConfig = data || {
           deviceId,
           enabled: false,
-          collectDevice: CollectDevice.BOX,
           offset: 10,
           startTime: '08:00:00',
           endTime: '23:59:59'

src/views/realm/device/settings/api.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+import { update } from '@/api/base'
+
+export function getAttributes (deviceId) {
+  return request({
+    url: `/device/${deviceId}/attribute`,
+    method: 'GET'
+  })
+}
+
+export function updateAttributes (deviceId, attributes) {
+  return update({
+    url: `/device/${deviceId}/attribute`,
+    method: 'POST',
+    data: attributes
+  })
+}

src/views/realm/device/settings/components/AttributeConfigDialog.vue

@@ -0,0 +1,88 @@
+<template>
+  <confirm-dialog
+    ref="configDialog"
+    title="属性配置"
+    @confirm="onSave"
+  >
+    <div class="c-grid-form mini u-align-self--center">
+      <span class="c-grid-form__label">回采卡IP：</span>
+      <div class="l-flex--row c-grid-form__option">
+        <el-input
+          v-model.trim="attributes.recoveryCardIP"
+          placeholder="192.168.0.11"
+          maxlength="15"
+        />
+      </div>
+    </div>
+  </confirm-dialog>
+</template>
+
+<script>
+import { validIPv4 } from '@/utils/validate'
+import {
+  getAttributes,
+  updateAttributes
+} from '../api'
+
+const attributeSet = [
+  { key: 'recoveryCardIP', valid (val) {
+    if (val && !validIPv4(val)) {
+      return '回采卡IP格式错误'
+    }
+    return null
+  } }
+]
+
+export default {
+  name: 'AttibuteConfigDialog',
+  data () {
+    return {
+      attributes: {}
+    }
+  },
+  methods: {
+    show ({ id }) {
+      const loading = this.$showLoading()
+      this.$deviceId = id
+      getAttributes(id).then(({ data }) => {
+        const attributes = {}
+        attributeSet.forEach(({ key }) => {
+          attributes[key] = data[key] || ''
+          attributes[`_${key}`] = attributes[key]
+        })
+        this.attributes = attributes
+        this.$refs.configDialog.show()
+      }).finally(() => {
+        this.$closeLoading(loading)
+      })
+    },
+    onSave (done) {
+      const attributes = this.attributes
+      const attributeMap = {}
+      let needUpdate = false
+      for (let i = 0; i < attributeSet.length; i++) {
+        const { key, valid } = attributeSet[i]
+        const value = attributes[key]
+        if (value === attributes[`_${key}`]) {
+          continue
+        }
+        const message = valid(value)
+        if (message) {
+          this.$message({
+            type: 'warning',
+            message
+          })
+          return
+        }
+        attributeMap[key] = value
+        needUpdate = true
+      }
+      if (!needUpdate) {
+        done()
+        return
+      }
+      updateAttributes(this.$deviceId, attributeMap).then(done)
+    }
+  }
+}
+</script>

src/views/realm/device/settings/components/DeviceNormalConfig.vue

@@ -1,21 +1,30 @@
 <template>
   <div class="l-settings">
+    <button
+      class="o-button"
+      @click="onAttributeConfig"
+    >
+      属性
+    </button>
     <button
       class="o-button"
       @click="onContentProtectionConfig"
     >
       内容保护配置
     </button>
+    <attribute-config-dialog ref="attributeConfigDialog" />
     <content-protection-config-dialog ref="contentProtectionConfigDialog" />
   </div>
 </template>
 
 <script>
+import AttributeConfigDialog from './AttributeConfigDialog'
 import ContentProtectionConfigDialog from './ContentProtectionConfigDialog'
 
 export default {
   name: 'DeviceNormalConfig',
   components: {
+    AttributeConfigDialog,
     ContentProtectionConfigDialog
   },
   props: {
@@ -25,6 +34,9 @@ export default {
     }
   },
   methods: {
+    onAttributeConfig () {
+      this.$refs.attributeConfigDialog.show(this.device)
+    },
     onContentProtectionConfig () {
       this.$refs.contentProtectionConfigDialog.show(this.device)
     }

src/views/realm/device/settings/components/DeviceShadow.vue

@@ -52,7 +52,6 @@ export default {
       getShadow(this.device.id).then(
         ({ data }) => {
           this.code = JSON.stringify(data, null, 2)
-          console.log(this.code)
         },
         () => {
           this.error = true