feat(upgrade): apk download progress

adjust some styles

src/views/dashboard/components/mixins/device.js

@@ -1,5 +1,4 @@
 import { ThirdPartyDevice } from '@/constant'
-import { parseTime } from '@/utils'
 import {
   Status,
   Power,
@@ -17,7 +16,6 @@ export default {
   },
   data () {
     return {
-      timestamp: '',
       powerStatus: Status.LOADING,
       powerSwitchStatus: Power.LOADING,
       hasPower: true,
@@ -47,7 +45,7 @@ export default {
       return this.hasStatus
         ? this.hasPower && this.hasPowerRealStatus
           ? this.powerStatus === Status.WARNING
-            ? `电源状态${this.powerSwitchStatus === Power.LOADING ? '检测' : ''}异常 ${this.timestamp}`
+            ? `电源状态${this.powerSwitchStatus === Power.LOADING ? '检测' : ''}异常`
             : this.isPowerOpened
               ? '屏幕已开启'
               : '屏幕未开启'
@@ -95,7 +93,6 @@ export default {
       const multiCard = value[ThirdPartyDevice.MULTI_FUNCTION_CARD]
       const powerStatus = multiCard.status
       this.powerStatus = powerStatus
-      this.timestamp = multiCard.timestamp ? parseTime(multiCard.timestamp, '{y}-{m}-{d} {h}:{i}:{s}') : ''
       this.hasPower = powerStatus > Status.NONE
       this.powerSwitchStatus = multiCard.switchStatus
     },

src/views/dashboard/components/mixins/group-list.js

@@ -74,16 +74,21 @@ export default {
   },
   methods: {
     sort (a, b) {
-      if (a.onlineStatus === b.onlineStatus) {
-        if (!b.lastOnline) {
+      if (a.onlineStatus !== b.onlineStatus) {
+        if (a.onlineStatus === 1) {
           return -1
         }
-        if (!a.lastOnline) {
+        if (b.onlineStatus === 1) {
           return 1
         }
-        return a.lastOnline < b.lastOnline ? 1 : -1
       }
-      return a.onlineStatus === 1 ? -1 : 1
+      if (!b.lastOnline) {
+        return -1
+      }
+      if (!a.lastOnline) {
+        return 1
+      }
+      return a.lastOnline < b.lastOnline ? 1 : -1
     },
     onVolume ({ value, device }) {
       this.$refs.volumeDialog.show(value, device)

src/views/platform/upgrade/deploy/components/UpgradeProgress.vue

@@ -0,0 +1,76 @@
+<template>
+  <el-progress
+    :show-text="showText"
+    :stroke-width="16"
+    text-color="#fff"
+    :status="statusStyle"
+    :percentage="percentage"
+    text-inside
+  />
+</template>
+
+<script>
+import {
+  subscribe,
+  unsubscribe
+} from '@/utils/mqtt'
+
+export default {
+  name: 'UpgradeProgress',
+  props: {
+    deviceId: {
+      type: String,
+      required: true
+    },
+    status: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      percentage: 0,
+      hasInfo: false
+    }
+  },
+  computed: {
+    showText () {
+      return this.status === 1 && this.percentage > 0
+    },
+    statusStyle () {
+      return this.percentage >= 100
+        ? 'success'
+        : this.percentage > 0 && !this.hasInfo
+          ? 'warning'
+          : void 0
+    }
+  },
+  created () {
+    this.$timer = -1
+  },
+  mounted () {
+    subscribe([`+/${this.deviceId}/apk/upgrade/progress`], this.onMessage)
+  },
+  beforeDestroy () {
+    clearTimeout(this.$timer)
+    unsubscribe([`+/${this.deviceId}/apk/upgrade/progress`], this.onMessage)
+  },
+  methods: {
+    onMessage (topic, message) {
+      const result = /^\d+\/(\d+)\/apk\/upgrade\/progress$/.exec(topic)
+      if (!result) {
+        return
+      }
+      const deviceId = result[1]
+      if (deviceId === this.deviceId) {
+        clearTimeout(this.$timer)
+        this.hasInfo = true
+        this.percentage = JSON.parse(message).progress
+        this.$timer = setTimeout(() => {
+          this.hasInfo = false
+        }, 5000)
+      }
+    }
+  }
+}
+</script>

src/views/platform/upgrade/deploy/index.vue

@@ -38,10 +38,6 @@
           readonly
           @click="chooseDevices"
         >
-        <span class="c-grid-form__label">升级方式</span>
-        <div class="l-flex--row c-grid-form__option">
-          <el-radio>强制升级</el-radio>
-        </div>
         <span class="c-grid-form__label">描述</span>
         <el-input
           v-model.trim="version.remark"
@@ -97,6 +93,7 @@ import {
   delVersion
 } from '../api'
 import DeviceTypeTree from './components/DeviceTypeTree.vue'
+import UpgradeProgress from './components/UpgradeProgress.vue'
 
 export default {
   name: 'UpgradeDeploy',
@@ -136,22 +133,29 @@ export default {
               { value: 3, label: '已废弃' }
             ]
           },
-          { key: 'name', type: 'search', placeholder: '升级名称' }
+          { key: 'name', type: 'search', placeholder: '升级名称' },
+          { type: 'refresh' }
         ],
         cols: [
           { prop: 'name', label: '升级名称' },
           { prop: 'fileName', label: '升级文件' },
-          { prop: 'versionName', label: '目标版本' },
+          { prop: 'versionName', label: '目标版本', render: ({ versionName, versionCode }) => `${versionName} ${versionCode}` },
           { prop: 'deviceName', label: '目标设备' },
-          { label: '升级方式', render: () => '强制升级' },
-          { prop: 'createTime', label: '创建时间' },
+          { prop: 'createTime', label: '创建时间', width: 140 },
           { prop: 'remark', label: '备注' },
-          { type: 'tag', render ({ status }) {
+          { type: 'tag', render: ({ status }) => {
             return {
               type: [null, 'warning', 'success', 'info'][status],
               label: [null, '待升级', '已升级', '已废弃'][status]
             }
           }, size: 'sm' },
+          { label: '下载进度', render: ({ deviceId, status }, h) => h(UpgradeProgress, {
+            key: status === 1 ? deviceId : void 0,
+            props: {
+              deviceId,
+              status
+            }
+          }), width: 120, align: 'center' },
           { type: 'invoke', render: [
             { label: '删除', on: this.onDel }
           ] }