feat(device): attribute synchronization

topic {productId}/{deviceId}/setting/update

src/views/external/box/settings/components/DeviceShadow.vue

@@ -15,14 +15,38 @@
         ><code>{{ code }}</code></pre>
         <div class="l-flex__none c-sibling-item--v far">
           <button
-            class="o-button"
-            @click="onSync"
+            class="c-sibling-item o-button"
+            @click="onSyncAttributesByMqtt"
           >
-            立刻同步
+            在线同步
+          </button>
+          <button
+            class="c-sibling-item o-button"
+            @click="onSyncAttributesByReboot"
+          >
+            重启同步
           </button>
         </div>
       </template>
     </template>
+    <confirm-dialog
+      ref="attributeDialog"
+      title="属性选择"
+      @confirm="onSync"
+    >
+      <el-checkbox-group
+        v-model="attributes"
+        class="l-grid--info mini"
+      >
+        <el-checkbox
+          v-for="attribute in attributeOptions"
+          :key="attribute.value"
+          :label="attribute.value"
+        >
+          {{ attribute.label }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </confirm-dialog>
   </div>
 </template>
 
@@ -30,6 +54,11 @@
 import { getShadow } from '@/api/device'
 import { publish } from '@/utils/mqtt'
 
+const AttributeMap = {
+  contentProtect: '内容保护',
+  externals: '全链路'
+}
+
 export default {
   name: 'DeviceShadow',
   props: {
@@ -42,7 +71,9 @@ export default {
     return {
       loading: true,
       error: false,
-      code: ''
+      code: '',
+      attributes: [],
+      attributeOptions: []
     }
   },
   created () {
@@ -54,6 +85,11 @@ export default {
       this.error = false
       getShadow(this.device.id).then(
         ({ data }) => {
+          this.$attrubuteMap = {}
+          this.attributeOptions = Object.keys(data).map(key => {
+            this.$attrubuteMap[key] = data[key]
+            return { value: key, label: AttributeMap[key] || key }
+          })
           this.code = JSON.stringify(data, null, 2)
         },
         () => {
@@ -63,15 +99,59 @@ export default {
         this.loading = false
       })
     },
-    onSync () {
+    onSyncAttributesByMqtt () {
+      this.$refs.attributeDialog.show()
+    },
+    onSync (done) {
+      if (!this.attributes.length) {
+        this.$message({
+          type: 'warning',
+          message: '请选择需要同步的数据'
+        })
+        return
+      }
+      const attributeMap = {}
+      this.attributes.forEach(key => {
+        attributeMap[key] = this.$attrubuteMap[key]
+      })
+      const timestamp = `${Date.now()}`
+      publish(
+        `${this.device.productId}/${this.device.id}/setting/update`,
+        JSON.stringify({
+          messageId: `settings_${timestamp}`,
+          timestamp,
+          ...attributeMap
+        }),
+        true
+      ).then(
+        () => {
+          this.$message({
+            type: 'success',
+            message: '执行成功'
+          })
+          done()
+        },
+        () => {
+          this.$message({
+            type: 'warning',
+            message: '正在连接，请稍后再试'
+          })
+        }
+      )
+    },
+    onSyncAttributesByReboot () {
       this.$confirm(
-        '同步数据将重启设备，是否同步？',
+        '立刻重启设备进行数据同步？',
         '操作确认',
         { type: 'warning' }
       ).then(() => {
+        const timestamp = `${Date.now()}`
         publish(
           `${this.device.productId}/${this.device.id}/restart/ask`,
-          JSON.stringify({ timestamp: `${Date.now()}` }),
+          JSON.stringify({
+            messageId: `restart_${timestamp}`,
+            timestamp
+          }),
           true
         ).then(
           () => {