fix(dashboard): refresh lag when optimizing a large number of devices

src/scss/bem/_component.scss

@@ -521,7 +521,6 @@
 
   &__column {
     box-sizing: content-box;
-    // min-width: 200px;
     color: $black;
 
     & + & {

src/views/dashboard/components/DeviceCard.vue

@@ -118,24 +118,6 @@
         :text="address"
       />
     </div>
-    <confirm-dialog
-      ref="volumeDialog"
-      title="音量设置"
-      size="mini"
-      append-to-body
-      @confirm="onConfirmVolume"
-    >
-      <div class="l-flex--row center">
-        <el-input-number
-          v-model="editVolume"
-          class="c-sibling-item"
-          :min="0"
-          :max="100"
-          step-strictly
-        />
-        <span class="c-sibling-item nearer u-font-size--sm">%</span>
-      </div>
-    </confirm-dialog>
   </div>
 </template>
 
@@ -147,7 +129,6 @@ import {
   EventPriorityInfo
 } from '@/constant'
 import { parseTime } from '@/utils'
-import { publish } from '@/utils/mqtt'
 import {
   Status,
   Power,
@@ -162,7 +143,6 @@ import {
   getStartDate,
   toDate
 } from '@/utils/event'
-import { saveBoxLogger } from '@/api/platform'
 import { getTimelineByRange } from '@/api/device'
 
 export default {
@@ -260,10 +240,13 @@ export default {
       this.getTimeline(true)
     },
     isOnline: {
-      handler (val) {
+      handler (val, old) {
         if (val) {
           addListener(this.device.id, this.onMessage)
         } else {
+          if (old == null) {
+            return
+          }
           removeListener(this.device.id, this.onMessage)
         }
       },
@@ -517,38 +500,11 @@ export default {
       }
     },
     onVolume () {
-      this.editVolume = this.volume
-      this.$refs.volumeDialog.show()
-    },
-    onConfirmVolume (done) {
-      const volume = this.editVolume
-      if (volume === this.volume) {
-        done()
-      } else {
-        const { id, productId, name } = this.device
-        const timestamp = `${Date.now()}`
-        const messageId = `volume_${timestamp}`
-        publish(`${productId}/${id}/function/invoke`, JSON.stringify({
-          messageId,
-          timestamp,
-          'function': 'volumeControl',
-          inputs: [{
-            name: 'volume',
-            value: `${volume}`
-          }]
-        }), true).then(() => {
-          saveBoxLogger({
-            description: `将【${name}】音量设置为${volume}%`,
-            method: '音量设置',
-            params: `${id} ${name} ${volume}%`
-          })
-          this.$message({
-            type: 'success',
-            message: '配置下发中...'
-          })
-          done()
-        })
-      }
+      const { id, productId, name } = this.device
+      this.$emit('volume', {
+        value: this.volume,
+        device: { id, productId, name }
+      })
     }
   }
 }

src/views/dashboard/components/DeviceGroupAttention.vue

@@ -9,7 +9,9 @@
         :key="item.id"
         :device="item"
         :flag="item.flag"
+        @volume="onVolume"
       />
+      <volume-dialog ref="volumeDialog" />
     </template>
     <div
       v-else-if="groupOptions.loading"

src/views/dashboard/components/DeviceGroupLevel.vue

@@ -7,7 +7,9 @@
         class="c-sibling-item--v far"
         v-bind="$attrs"
         :group="item"
+        @volume="onVolume"
       />
+      <volume-dialog ref="volumeDialog" />
     </template>
     <div
       v-else-if="groupOptions.loading"
@@ -23,11 +25,13 @@
 import { getDepartmentDeviceTreeByGroup } from '@/api/device'
 import groupMixin from './mixins/group.js'
 import DeviceGroupLevelItem from './DeviceGroupLevelItem.vue'
+import VolumeDialog from './VolumeDialog.vue'
 
 export default {
   name: 'DeviceGroupLevel',
   components: {
-    DeviceGroupLevelItem
+    DeviceGroupLevelItem,
+    VolumeDialog
   },
   mixins: [groupMixin],
   inject: ['dashboard'],
@@ -101,6 +105,9 @@ export default {
     },
     onChanged () {
       this.$emit('change', [...this.groupOptions.list])
+    },
+    onVolume ({ value, device }) {
+      this.$refs.volumeDialog.show(value, device)
     }
   }
 }

src/views/dashboard/components/DeviceGroupLevelItem.vue

@@ -7,8 +7,10 @@
         :key="device.id"
         :device="device"
         :flag="device.flag"
+        @volume="onVolume"
       />
     </div>
+    <volume-dialog ref="volumeDialog" />
   </div>
 </template>
 
@@ -28,6 +30,11 @@ export default {
     groupItems () {
       return [...this.group.children]
     }
+  },
+  methods: {
+    onVolume (value) {
+      this.$emit('volume', value)
+    }
   }
 }
 </script>

src/views/dashboard/components/DeviceGroupTile.vue

@@ -9,7 +9,9 @@
         :key="item.id"
         :device="item"
         :flag="item.flag"
+        @volume="onVolume"
       />
+      <volume-dialog ref="volumeDialog" />
     </template>
     <div
       v-else-if="groupOptions.loading"

src/views/dashboard/components/VolumeDialog.vue

@@ -0,0 +1,75 @@
+<template>
+  <confirm-dialog
+    ref="volumeDialog"
+    title="音量设置"
+    size="mini"
+    append-to-body
+    @confirm="onConfirmVolume"
+  >
+    <template #default>
+      <div class="l-flex--row center">
+        <el-input-number
+          v-model="editVolume"
+          class="c-sibling-item"
+          :min="0"
+          :max="100"
+          step-strictly
+        />
+        <span class="c-sibling-item nearer u-font-size--sm">%</span>
+      </div>
+    </template>
+  </confirm-dialog>
+</template>
+
+<script>
+import { publish } from '@/utils/mqtt'
+import { saveBoxLogger } from '@/api/platform'
+
+export default {
+  name: 'VolumeDialog',
+  data () {
+    return {
+      editVolume: 0
+    }
+  },
+  methods: {
+    show (volume, { id, productId, name }) {
+      this.$device = { id, productId, name }
+      this.$editVolume = volume
+      this.editVolume = volume
+      this.$refs.volumeDialog.show()
+    },
+    onConfirmVolume (done) {
+      const volume = this.editVolume
+      if (volume === this.$editVolume) {
+        done()
+      } else {
+        console.log(volume, this.$device)
+        const { id, productId, name } = this.$device
+        const timestamp = `${Date.now()}`
+        const messageId = `volume_${timestamp}`
+        publish(`${productId}/${id}/function/invoke`, JSON.stringify({
+          messageId,
+          timestamp,
+          'function': 'volumeControl',
+          inputs: [{
+            name: 'volume',
+            value: `${volume}`
+          }]
+        }), true).then(() => {
+          saveBoxLogger({
+            description: `将【${name}】音量设置为${volume}%`,
+            method: '音量设置',
+            params: `${id} ${name} ${volume}%`
+          })
+          this.$message({
+            type: 'success',
+            message: '配置下发中...'
+          })
+          done()
+        })
+      }
+    }
+  }
+}
+</script>

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

@@ -1,4 +1,5 @@
 import DeviceCard from '../DeviceCard.vue'
+import VolumeDialog from '../VolumeDialog.vue'
 
 export default {
   props: {
@@ -8,7 +9,8 @@ export default {
     }
   },
   components: {
-    DeviceCard
+    DeviceCard,
+    VolumeDialog
   },
   computed: {
     groupItems () {
@@ -42,6 +44,9 @@ export default {
         return a.lastOnline < b.lastOnline ? 1 : -1
       }
       return a.onlineStatus === 1 ? -1 : 1
+    },
+    onVolume ({ value, device }) {
+      this.$refs.volumeDialog.show(value, device)
     }
   }
 }

src/views/dashboard/map/index.vue

@@ -70,6 +70,7 @@
           :device="device"
           :status="device.status"
           always
+          @volume="onVolume"
         />
       </div>
     </div>
@@ -79,6 +80,7 @@
       @change="onGroupChanged"
       @loaded="onGroupLoaded"
     />
+    <volume-dialog ref="volumeDialog" />
   </wrapper>
 </template>
 
@@ -94,6 +96,7 @@ import {
   getDeviceStatisticsByPath
 } from '@/api/device'
 import DeviceCard from '../components/DeviceCard.vue'
+import VolumeDialog from '../components/VolumeDialog.vue'
 
 const onlineIcon = require('./assets/icon_position1.svg')
 const offlineIcon = require('./assets/icon_position2.svg')
@@ -101,7 +104,8 @@ const offlineIcon = require('./assets/icon_position2.svg')
 export default {
   name: 'DeviceMap',
   components: {
-    DeviceCard
+    DeviceCard,
+    VolumeDialog
   },
   data () {
     return {
@@ -112,7 +116,8 @@ export default {
       },
       loading: false,
       group: {},
-      device: null
+      device: null,
+      editVolume: 0
     }
   },
   computed: {
@@ -304,6 +309,9 @@ export default {
     activeDevice (id, marker) {
       this.map.setFitView(marker)
       this.device = this.mapDevices.find(device => device.id === id)
+    },
+    onVolume ({ value, device }) {
+      this.$refs.volumeDialog.show(value, device)
     }
   }
 }

src/views/screen/review/workflow/components/PublishDetailDialog.vue

@@ -11,14 +11,14 @@
           :schema="schema"
         />
       </div>
-      <div class="l-flex__fill l-flex c-sibling-item--v">
-        <div class="l-flex--col c-sibling-item c-sidebar u-width--xl">
+      <div class="l-flex__fill l-flex c-sibling-item--v c-step">
+        <div class="l-flex__none l-flex--col c-step__column u-width--xl">
           <schema-table
             ref="deviceTable"
             :schema="deviceSchema"
           />
         </div>
-        <div class="l-flex__fill l-flex--col c-sibling-item far">
+        <div class="l-flex__fill l-flex--col c-step__column">
           <schema-table :schema="timeSchema" />
         </div>
       </div>

src/views/screen/review/workflow/components/WorkflowDialog.vue

@@ -9,13 +9,13 @@
         <schema-table :schema="schema" />
       </div>
       <div class="l-flex__fill l-flex c-sibling-item--v">
-        <div class="l-flex--col c-sibling-item c-sidebar u-width">
+        <div class="l-flex__none l-flex--col c-step__column u-width">
           <schema-table :schema="deviceSchema" />
         </div>
-        <div class="l-flex--col c-sidebar c-sibling-item far u-width--lg">
+        <div class="l-flex__none l-flex--col c-step__column u-width--lg">
           <schema-table :schema="timeSchema" />
         </div>
-        <div class="l-flex__fill l-flex--col c-sibling-item far">
+        <div class="l-flex__fill l-flex--col c-step__column">
           <schema-table :schema="historySchema" />
         </div>
       </div>