refactor: some optimizations

src/views/dashboard/index.vue

@@ -6,7 +6,7 @@
     <div class="l-flex--row c-dashboard__block c-count">
       <div class="l-flex__none l-flex--row">
         设备分类：
-        <el-select
+        <!-- <el-select
           v-model="product"
           placeholder="请选择产品"
           :loading="productOptions.fetching"
@@ -19,7 +19,12 @@
             :label="item.label"
             :value="item.value"
           />
-        </el-select>
+        </el-select> -->
+        <schema-select
+          v-model="product"
+          :schema="productSelectSchema"
+          @change="onProductChange"
+        />
       </div>
       <div class="l-flex__none c-count__item u-color--black u-text-center">
         <div>设备总数</div>
@@ -55,7 +60,7 @@
       </div>
       <i
         class="c-count__refresh el-icon-refresh u-pointer"
-        @click="refresh"
+        @click="onRefresh"
       />
     </div>
     <div
@@ -95,7 +100,7 @@
         count="100"
       />
     </div>
-    <div class="c-dashboard__block c-devices">
+    <div class="c-dashboard__block c-info-grid">
       <device
         v-for="item in deviceOptions.list"
         :key="item.id"
@@ -138,15 +143,14 @@ export default {
   },
   data () {
     return {
-      productOptions: {
-        list: [
-          { value: '', label: '全部设备' }
-        ],
-        loaded: false,
-        fetching: false,
-        firstLoadSize: 999
+      productSelectSchema: {
+        remote: getProducts,
+        pagination: true,
+        placeholder: '全部产品',
+        value: 'id',
+        label: 'name'
       },
-      product: '',
+      product: void 0,
       monitor: { loading: true },
       deviceOptions: {
         list: [],
@@ -156,6 +160,7 @@ export default {
     }
   },
   created () {
+    this.$timer = -1
     this.refreshDevices(true)
     subscribe([
       '+/+/online',
@@ -164,6 +169,7 @@ export default {
     ], this.onMessage)
   },
   beforeDestroy () {
+    clearTimeout(this.$timer)
     this.monitor = { loading: true }
     unsubscribe([
       '+/+/online',
@@ -177,40 +183,20 @@ export default {
       if (result && (!this.product || this.product === result[1]) && this.deviceOptions.loaded) {
         const deviceId = result[2]
         const device = this.deviceOptions.list.find(({ id }) => id === deviceId)
-        if (device && device.activate === 2) {
+        if (device) {
           const status = result[3]
-          if (status === 'online' && device.onlineStatus === 1 || status === 'offline' && device.onlineStatus !== 1) {
+          const onlineStatus = device.onlineStatus === 1 ? 'online' : 'offline'
+          if (status === onlineStatus) {
             return
           }
         }
-        this.refresh()
-      }
-    },
-    _getProducts () {
-      const options = this.productOptions
-      options.fetching = true
-      getProducts({ pageNum: 1, pageSize: options.firstLoadSize }).then(({ data, totalCount }) => {
-        if (totalCount > options.firstLoadSize) {
-          options.firstLoadSize = totalCount
-          this._getProducts()
-        } else {
-          options.list = options.list.concat(data.map(({ id, name }) => ({ value: id, label: name })))
-          options.fetching = false
-          options.loaded = true
-        }
-      }, () => {
-        options.fetching = false
-      })
-    },
-    getProducts (visible) {
-      if (visible && !this.productOptions.fetching && !this.productOptions.loaded) {
-        this._getProducts()
+        this.onRefresh()
       }
     },
     onProductChange () {
       this.refreshDevices(true)
     },
-    refresh () {
+    onRefresh () {
       this.refreshDevices()
     },
     refreshDevices (force) {
@@ -225,6 +211,7 @@ export default {
         inactive: '-'
       }
       this.monitor = monitor
+      clearTimeout(this.$timer)
       this.deviceOptions = { loaded: false }
       getDeviceStatistics(this.product).then(({ data }) => {
         const { notEnabledTotal, offLineTotal, onLineTotal, total } = data
@@ -235,7 +222,7 @@ export default {
       }).finally(() => {
         monitor.loading = false
         if (!this.monitor.loading) {
-          this._getDevices(this.monitor.total)
+          this.getDevices(this.monitor.total)
         }
       })
     },
@@ -243,12 +230,9 @@ export default {
       if (a.onlineStatus === 1) {
         return -1
       }
-      if (b.onlineStatus === 1) {
-        return 1
-      }
-      return 1
+      return b.onlineStatus === 1 ? 1 : -1
     },
-    _getDevices (total) {
+    getDevices (total) {
       if (!total || total === '-') {
         this.deviceOptions = { list: [], loaded: true }
         return
@@ -267,7 +251,9 @@ export default {
         },
         ({ isCancel }) => {
           if (!isCancel && !this.monitor.loading) {
-            this._getDevices(total)
+            this.$timer = setTimeout(total => {
+              this.getDevices(total)
+            }, 2000, total)
           }
         }
       )
@@ -309,12 +295,4 @@ export default {
     min-width: 0;
   }
 }
-
-.c-devices {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-  grid-row-gap: $spacing;
-  grid-column-gap: $spacing;
-  align-items: start;
-}
 </style>

src/views/device/index.vue

@@ -42,13 +42,13 @@ export default {
     const productSelectSchema = {
       remote: getProducts,
       pagination: true,
+      placeholder: '全部产品',
       value: 'id',
       label: 'name'
     }
 
     return {
       ratio: null,
-      productSelectSchema,
       schema: {
         keepalive: true,
         condition: { productId: void 0, name: '' },
@@ -56,7 +56,7 @@ export default {
         transform: this.transform,
         transformData: this.transformTableData,
         filters: [
-          { key: 'productId', type: 'select', placeholder: '全部产品', ...productSelectSchema },
+          { key: 'productId', type: 'select', ...productSelectSchema },
           { key: 'name', type: 'search', placeholder: '设备名称' }
         ],
         cols: [

src/views/realm/device/Group.vue

@@ -29,19 +29,19 @@ export default {
     const productSelectSchema = {
       remote: getProducts,
       pagination: true,
+      placeholder: '全部产品',
       value: 'id',
       label: 'name'
     }
 
     return {
-      productSelectSchema,
       schema: {
         condition: { productId: void 0, name: '', tenant: this.$store.getters.tenant },
         list: getDevicesByAdmin,
         transform: this.transform,
         transformData: this.transformTableData,
         filters: [
-          { key: 'productId', type: 'select', placeholder: '全部产品', ...productSelectSchema },
+          { key: 'productId', type: 'select', ...productSelectSchema },
           { key: 'name', type: 'search', placeholder: '设备名称' }
         ],
         cols: [