feat: device shadow

src/api/device.js

@@ -410,3 +410,11 @@ export function deactivateTask ({ taskId }) {
     data: [taskId]
   })
 }
+
+export function getShadow (deviceId) {
+  return request({
+    url: `/device/shadow/${deviceId}`,
+    method: 'GET'
+  })
+}
+

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

@@ -0,0 +1,92 @@
+<template>
+  <div
+    v-loading="loading"
+    class="l-flex--col"
+  >
+    <template v-if="!loading">
+      <warning
+        v-if="error"
+        @click="getShadow"
+      />
+      <template v-else>
+        <pre class="l-flex__self c-sibling-item--v u-overflow-y--auto"><code>{{ code }}</code></pre>
+        <div class="l-flex__none c-sibling-item--v far">
+          <button
+            class="o-button"
+            @click="onSync"
+          >
+            立刻同步
+          </button>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+import { getShadow } from '@/api/device'
+import { publish } from '@/utils/mqtt'
+
+export default {
+  name: 'DeviceShadow',
+  props: {
+    device: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      loading: true,
+      error: false,
+      code: ''
+    }
+  },
+  created () {
+    this.getShadow()
+  },
+  methods: {
+    getShadow () {
+      this.loading = true
+      this.error = false
+      getShadow(this.device.id).then(
+        ({ data }) => {
+          this.code = JSON.stringify(data, null, 2)
+          console.log(this.code)
+        },
+        () => {
+          this.error = true
+        }
+      ).finally(() => {
+        this.loading = false
+      })
+    },
+    onSync () {
+      publish(
+        `${this.device.productId}/${this.device.id}/function/invoke`,
+        JSON.stringify({
+          timestamp: Date.now(),
+          'function': 'updateConfig',
+          inputs: [
+            { name: 'reboot', value: 1 }
+          ]
+        }),
+        true
+      ).then(
+        () => {
+          this.$message({
+            type: 'success',
+            message: '执行成功'
+          })
+        },
+        () => {
+          this.$message({
+            type: 'warning',
+            message: '正在连接，请稍后再试'
+          })
+        }
+      )
+    }
+  }
+}
+</script>

src/views/realm/device/settings/index.vue

@@ -55,6 +55,7 @@ import ReceivingCard from '@/views/device/detail/components/external/ReceivingCa
 import Camera from '@/views/device/detail/components/external/Camera'
 import Gateway from '@/views/device/detail/components/external/Gateway'
 import DeviceNormalConfig from './components/DeviceNormalConfig'
+import DeviceShadow from './components/DeviceShadow'
 
 export default {
   name: 'DeviceSettings',
@@ -63,7 +64,8 @@ export default {
     Transmitter,
     ReceivingCard,
     Camera,
-    Gateway
+    Gateway,
+    DeviceShadow
   },
   data () {
     return {
@@ -75,7 +77,8 @@ export default {
         { key: 'Transmitter', label: '发送控制设备' },
         { key: 'ReceivingCard', label: '接收卡' },
         { key: 'Camera', label: '摄像头' },
-        { key: 'Gateway', label: '网关' }
+        { key: 'Gateway', label: '网关' },
+        { key: 'DeviceShadow', label: '影子配置' }
       ]
     }
   },