perf: lazy load

.env.development

@@ -21,11 +21,11 @@ VUE_APP_OFFLINE_MAP_PROXY = '/tiles'
 # VUE_APP_GATEWAY = '10.58.110.5'
 # VUE_APP_KEYCLOAK_OPTIONS_REALM = 'smsb-test'
 # 浪潮云
-# VUE_APP_GATEWAY = 'msr.inspur.com:8084'
-# VUE_APP_KEYCLOAK_OPTIONS_URL = 'https://msr.inspur.com:8084/auth'
+VUE_APP_GATEWAY = 'msr.inspur.com:8084'
+VUE_APP_KEYCLOAK_OPTIONS_URL = 'https://msr.inspur.com:8084/auth'
 # 深圳办公环境 测试
 # VUE_APP_GATEWAY = '10.180.88.84:8093'
 # VUE_APP_KEYCLOAK_OPTIONS_URL = 'http://10.180.88.84:8093/auth'
 # 屏管家
-VUE_APP_GATEWAY = '172.31.4.238'
-VUE_APP_KEYCLOAK_OPTIONS_URL = 'http://172.31.4.238/auth'
+# VUE_APP_GATEWAY = '172.31.4.238'
+# VUE_APP_KEYCLOAK_OPTIONS_URL = 'http://172.31.4.238/auth'

src/views/dashboard/components/DeviceCard.vue

@@ -241,11 +241,36 @@ export default {
   beforeCreate () {
     this.$timer = -1
     this.$refreshTimer = -1
+    this.$observer = null
+  },
+  mounted () {
+    if (!this.always) {
+      this.observe(this.$el)
+    }
   },
   beforeDestroy () {
     this.onReset(true)
+    this.$observer?.disconnect()
+    this.$observer = null
   },
   methods: {
+    observe () {
+      if (!this.$observer) {
+        this.$observer = new IntersectionObserver(entries => {
+          entries.forEach(entry => {
+            console.log('observe', this.device.name, entry.isIntersecting ? 'into view' : 'out view')
+            if (entry.isIntersecting) {
+              this.isInView = true
+            } else {
+              this.isInView = false
+            }
+          })
+        }, {
+          threshold: [0.25]
+        })
+      }
+      this.$observer.observe(this.$el)
+    },
     checkStatus () {
       if (!this.$firstView) {
         ScreenshotCache.watch(this.device, this.onScreenshotUpdate)

src/views/dashboard/components/DeviceGroupTile.vue

@@ -1,9 +1,12 @@
 <template>
-  <div :class="gridClass">
+  <div
+    :class="gridClass"
+    @scroll="handleScroll"
+  >
     <template v-if="hasData">
       <component
         :is="cardComponent"
-        v-for="item in filterList"
+        v-for="item in cacheItems"
         :key="item.id"
         :device="item"
         :flag="item.flag"
@@ -39,20 +42,48 @@ export default {
       default: -1
     }
   },
+  data () {
+    return {
+      maxLength: 0,
+      locked: false
+    }
+  },
   computed: {
     groupItems () {
       return [...this.groupOptions.list]
+    },
+    cacheItems () {
+      const length = this.filterList.length
+      return this.maxLength < length
+        ? this.filterList.slice(0, this.maxLength)
+        : this.filterList
     }
   },
   watch: {
     path () {
-      this.refreshGroups(true)
+      this.onResetGroupOptions()
     },
     total () {
-      this.refreshGroups(true)
+      this.onResetGroupOptions()
+    },
+    status () {
+      this.maxLength = 100
     }
   },
   methods: {
+    handleScroll (event) {
+      if (this.locked) {
+        return
+      }
+      const { scrollTop, scrollHeight, clientHeight } = event.target
+      if (this.maxLength < this.filterList.length && Math.ceil(scrollTop + clientHeight + 1) >= scrollHeight) {
+        this.locked = true
+        this.maxLength += 100
+        setTimeout(() => {
+          this.locked = false
+        }, 500)
+      }
+    },
     refreshGroups (force) {
       if (!this.path || !force && this.groupOptions.loading) {
         return
@@ -64,6 +95,7 @@ export default {
           ? { loaded: true }
           : { loading: true }
       )
+      this.maxLength = 100
       this.groupOptions = groupOptions
       this.onChanged()
       if (this.total <= 0) {
@@ -73,6 +105,7 @@ export default {
       getDevicesByQuery({
         pageNum: 1,
         pageSize: this.total,
+        orderFlag: 1,
         activate: 1,
         org: this.path
       }, { custom: true }).then(
@@ -82,12 +115,12 @@ export default {
           }
           const map = {}
           const topics = []
-          groupOptions.list = data.map(device => {
+          groupOptions.list = Object.freeze(data.map(device => {
             const item = this.transformDevice(device)
             map[device.id] = item
             topics.push(...this.createTopics(item))
             return item
-          })
+          }))
           groupOptions.map = map
           groupOptions.loaded = true
           this.onChanged()

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

@@ -16,7 +16,6 @@ export default {
   },
   data () {
     return {
-      isInView: false,
       powerStatus: Status.LOADING,
       powerSwitchStatus: Power.LOADING,
       hasPower: true,
@@ -64,53 +63,29 @@ export default {
         return parseVolume(this.volume)
       }
       return ''
-    },
-    needWatch () {
-      return this.isOnline && this.isInView
     }
   },
   watch: {
-    needWatch (val) {
-      if (val) {
-        addListener(this.device.id, this.onMessage)
-      } else {
-        removeListener(this.device.id, this.onMessage)
-      }
-    }
-  },
-  beforeCreate () {
-    this.$observer = null
-  },
-  mounted () {
-    if (!this.always) {
-      this.observe(this.$el)
+    isOnline: {
+      handler (val, old) {
+        if (val) {
+          addListener(this.device.id, this.onMessage)
+        } else {
+          if (old == null) {
+            return
+          }
+          removeListener(this.device.id, this.onMessage)
+        }
+      },
+      immediate: true
     }
   },
   beforeDestroy () {
-    if (this.needWatch) {
+    if (this.isOnline) {
       removeListener(this.device.id, this.onMessage)
     }
-    this.$observer?.disconnect()
-    this.$observer = null
   },
   methods: {
-    observe () {
-      if (!this.$observer) {
-        this.$observer = new IntersectionObserver(entries => {
-          entries.forEach(entry => {
-            console.log('observe', this.device.name, entry.isIntersecting ? 'into view' : 'out view')
-            if (entry.isIntersecting) {
-              this.isInView = true
-            } else {
-              this.isInView = false
-            }
-          })
-        }, {
-          threshold: [0.25]
-        })
-      }
-      this.$observer.observe(this.$el)
-    },
     onMessage (value) {
       if (value.screen) {
         this.volume = value.screen.volume