feat(device): spacer for video buffering

fix some bugs and adjust some styles

src/components/dialog/SpacerConfigDialog/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <table-dialog
+    ref="dialog"
+    title="垫片"
+    :schema="schema"
+  >
+    <single-asset-dialog
+      ref="assetDialog"
+      :choosen="onChoosenAsset"
+      @directory-changed="onAssetDirectoryChanged"
+      @view="onViewAsset"
+    />
+    <preview-dialog ref="previewDialog" />
+  </table-dialog>
+</template>
+
+<script>
+import { AssetType } from '@/constant'
+import {
+  getSpacers,
+  addSpacers,
+  deleteSpacer
+} from '@/api/platform'
+
+export default {
+  name: 'SpacerConfigDialog',
+  data () {
+    return {
+      schema: {
+        nonPagination: true,
+        list: this.getSpacers,
+        buttons: [
+          { type: 'add', label: '新增图片', on: this.onAddImage },
+          { type: 'add', label: '新增视频', on: this.onAddVideo }
+        ],
+        cols: [
+          { prop: 'tagInfo', label: '类型', width: 80 },
+          { prop: 'typeInfo', label: '资源', align: 'center', width: 72 },
+          { prop: 'file', label: '', type: 'asset', on: this.onViewAsset },
+          { prop: 'sizeInfo', label: '资源大小', 'align': 'right' },
+          { prop: 'diff', label: '其他', 'align': 'right' },
+          { type: 'invoke', render: [
+            { label: '查看', on: this.onViewAsset },
+            { label: '删除', on: this.onDel }
+          ] }
+        ]
+      }
+    }
+  },
+  methods: {
+    show (config) {
+      this.$config = config
+      this.$refs.dialog.show()
+    },
+    getSpacers () {
+      return getSpacers(this.$config)
+    },
+    onAddImage () {
+      this.$refs.assetDialog.show(
+        AssetType.IMAGE,
+        this.directoryOption
+      )
+    },
+    onAddVideo () {
+      this.$refs.assetDialog.show(
+        AssetType.VIDEO,
+        this.directoryOption
+      )
+    },
+    onAssetDirectoryChanged (directory) {
+      this.directoryOption = directory
+    },
+    onViewAsset ({ file }) {
+      this.$refs.previewDialog.show(file)
+    },
+    onChoosenAsset ({ tag, type, keyName, size, duration, md5 }) {
+      return addSpacers({
+        ...this.$config,
+        spacers: [
+          { tag, type, keyName, size, duration, md5 }
+        ]
+      }).then(() => {
+        this.$refs.dialog.getTable().pageTo(1)
+      })
+    },
+    onDel (spacer) {
+      deleteSpacer(spacer).then(() => {
+        this.$refs.dialog.getTable().decrease(1)
+      })
+    }
+  }
+}
+</script>

src/components/service/external/DevicePlayer/index.vue

@@ -86,30 +86,12 @@ import {
   updateRecordConfig,
   getDevice
 } from '@/api/device'
-import { GATEWAY } from '@/constant'
+import {
+  GATEWAY,
+  Quality
+} from '@/constant'
 import playerMixin from '../player'
 
-const Quality = {
-  fff: {
-    videoWidth: 640,
-    videoHeight: 360,
-    videoBitRate: 36 * 1024,
-    frameRate: 1
-  },
-  ff: {
-    videoWidth: 1280,
-    videoHeight: 720,
-    videoBitRate: 100 * 1024,
-    frameRate: 10
-  },
-  f: {
-    videoWidth: 1920,
-    videoHeight: 1080,
-    videoBitRate: 1024 * 1024,
-    frameRate: 20
-  }
-}
-
 export default {
   name: 'DevicePlayer',
   mixins: [playerMixin],
@@ -132,9 +114,9 @@ export default {
       online: false,
       floating: true,
       qualities: [
-        { value: 'fff', label: '标清' },
+        { value: 'f', label: '标清' },
         { value: 'ff', label: '高清' },
-        { value: 'f', label: '超清' }
+        { value: 'fff', label: '超清' }
       ],
       loadingQuality: true,
       showQualityMenu: false,

src/components/table/mixins/table.js

@@ -97,6 +97,9 @@ export default {
     },
     autoRefresh () {
       return this.schema.autoRefresh || this.autoRefreshEachPage
+    },
+    refreshInterval () {
+      return this.schema.refreshInterval || 5000
     }
   },
   watch: {
@@ -202,7 +205,7 @@ export default {
       const { pageNum } = options.params
       return this.schema.list(options.params).then(data => {
         if (this.autoRefresh && !options.death && (this.autoRefreshEachPage || pageNum === 1)) {
-          this.$refreshTimer = setTimeout(this.refreshCurrentPageOnBackground, 5000)
+          this.$refreshTimer = setTimeout(this.refreshCurrentPageOnBackground, this.refreshInterval)
         }
         return data
       })

src/constant.js

@@ -369,3 +369,24 @@ export const AppletOrderAssetKeyMap = {
   [AppletOrderType.SOON]: 'directAssets',
   [AppletOrderType.DAILY]: 'injectAssets'
 }
+
+export const Quality = {
+  f: {
+    videoWidth: 640,
+    videoHeight: 360,
+    videoBitRate: 36 * 1024,
+    frameRate: 1
+  },
+  ff: {
+    videoWidth: 1280,
+    videoHeight: 720,
+    videoBitRate: 100 * 1024,
+    frameRate: 10
+  },
+  fff: {
+    videoWidth: 1920,
+    videoHeight: 1080,
+    videoBitRate: 1024 * 1024,
+    frameRate: 20
+  }
+}

src/views/dashboard/Dashboard.vue

@@ -133,7 +133,10 @@ export default {
   },
   data () {
     return {
-      monitor: { loading: true },
+      monitor: {
+        loading: true,
+        loaded: false
+      },
       deviceOptions: {
         list: [],
         loaded: false
@@ -154,7 +157,7 @@ export default {
   beforeDestroy () {
     ScreenshotCache.clear()
     this.onResetOptions()
-    this.monitor = { loading: true }
+    this.monitor = { loading: true, loaded: false }
     unsubscribe([
       '+/+/online',
       '+/+/offline',
@@ -204,7 +207,7 @@ export default {
       this.$observer.observe(el)
     },
     onMessage (topic) {
-      if (this.monitor.loading || !this.deviceOptions.loaded) {
+      if (!this.monitor.loaded || !this.deviceOptions.loaded) {
         return
       }
       if (!this.deviceOptions.list.length) {
@@ -254,6 +257,7 @@ export default {
       }
       const monitor = {
         loading: true,
+        loaded: false,
         total: '-',
         online: '-',
         offline: '-',
@@ -262,15 +266,23 @@ export default {
       this.monitor = monitor
       this.onResetOptions()
       this.deviceOptions = { list: [], loaded: false }
-      getDeviceStatisticsByPath(this.group.path).then(({ data }) => {
-        const { deactivatedTotal, notConnectedTotal, offLineTotal, onLineTotal, total } = data
-        monitor.total = total
-        monitor.online = onLineTotal
-        monitor.offline = offLineTotal
-        monitor.inactive = deactivatedTotal + notConnectedTotal
-      }).finally(() => {
+      getDeviceStatisticsByPath(this.group.path, { custom: true }).then(
+        ({ data }) => {
+          const { deactivatedTotal, notConnectedTotal, offLineTotal, onLineTotal, total } = data
+          monitor.total = total
+          monitor.online = onLineTotal
+          monitor.offline = offLineTotal
+          monitor.inactive = deactivatedTotal + notConnectedTotal
+          monitor.loaded = true
+          this.getDeviesByMonitor()
+        },
+        ({ isCancel }) => {
+          if (!isCancel && !this.monitor.loading && !this.monitor.loaded) {
+            this.$timer = setTimeout(this.refreshDevices, 2000)
+          }
+        }
+      ).finally(() => {
         monitor.loading = false
-        this.getDeviesByMonitor()
       })
     },
     sort (a, b) {
@@ -281,7 +293,7 @@ export default {
     },
     getDeviesByMonitor () {
       this.onResetOptions()
-      if (this.monitor.loading) {
+      if (!this.monitor.loaded) {
         return
       }
       const query = {
@@ -319,7 +331,7 @@ export default {
           }
         },
         ({ isCancel }) => {
-          if (!isCancel && !options.ignore && !this.monitor.loading) {
+          if (!isCancel && !options.ignore && this.monitor.loaded) {
             this.$timer = setTimeout(this.getDeviesByMonitor, 2000)
           }
         }

src/views/dashboard/TenantDashboard.vue

@@ -159,7 +159,10 @@ export default {
   },
   data () {
     return {
-      monitor: { loading: true },
+      monitor: {
+        loading: true,
+        loaded: false
+      },
       deviceOptions: {
         list: [],
         loaded: false
@@ -187,7 +190,7 @@ export default {
   beforeDestroy () {
     ScreenshotCache.clear()
     this.onResetOptions()
-    this.monitor = { loading: true }
+    this.monitor = { loading: true, loaded: false }
     unsubscribe([
       '+/+/online',
       '+/+/offline',
@@ -204,11 +207,11 @@ export default {
       if (this.command !== command) {
         this.command = command
         if (this.isAllDevice) {
-          if (this.monitor.loading) {
+          if (this.monitor.loaded) {
+            this.getDeviesByMonitor()
+          } else {
             this.onResetOptions()
             this.deviceOptions = { list: [], loaded: false }
-          } else {
-            this.getDeviesByMonitor()
           }
         } else {
           this.getDevicesByAttention()
@@ -258,7 +261,7 @@ export default {
     },
     onMessage (topic) {
       if (this.isAllDevice) {
-        if (this.monitor.loading || !this.deviceOptions.loaded) {
+        if (!this.monitor.loaded || !this.deviceOptions.loaded) {
           return
         }
         if (!this.deviceOptions.list.length) {
@@ -319,6 +322,7 @@ export default {
       }
       const monitor = {
         loading: true,
+        loaded: false,
         total: '-',
         online: '-',
         offline: '-',
@@ -329,17 +333,25 @@ export default {
         this.onResetOptions()
         this.deviceOptions = { list: [], loaded: false }
       }
-      getDeviceStatisticsByPath(this.group.path).then(({ data }) => {
-        const { deactivatedTotal, notConnectedTotal, offLineTotal, onLineTotal, total } = data
-        monitor.total = total
-        monitor.online = onLineTotal
-        monitor.offline = offLineTotal
-        monitor.inactive = deactivatedTotal + notConnectedTotal
-      }).finally(() => {
-        monitor.loading = false
-        if (this.isAllDevice) {
-          this.getDeviesByMonitor()
+      getDeviceStatisticsByPath(this.group.path, { custom: true }).then(
+        ({ data }) => {
+          const { deactivatedTotal, notConnectedTotal, offLineTotal, onLineTotal, total } = data
+          monitor.total = total
+          monitor.online = onLineTotal
+          monitor.offline = offLineTotal
+          monitor.inactive = deactivatedTotal + notConnectedTotal
+          monitor.loaded = true
+          if (this.isAllDevice) {
+            this.getDeviesByMonitor()
+          }
+        },
+        ({ isCancel }) => {
+          if (!isCancel && !this.monitor.loading && !this.monitor.loaded) {
+            this.$timer = setTimeout(this.refreshDevices, 2000)
+          }
         }
+      ).finally(() => {
+        monitor.loading = false
       })
     },
     sort (a, b) {
@@ -350,7 +362,7 @@ export default {
     },
     getDeviesByMonitor () {
       this.onResetOptions()
-      if (this.monitor.loading) {
+      if (!this.monitor.loaded) {
         return
       }
       const query = {
@@ -388,7 +400,7 @@ export default {
           }
         },
         ({ isCancel }) => {
-          if (!isCancel && !options.ignore && this.isAllDevice && !this.monitor.loading) {
+          if (!isCancel && !options.ignore && this.isAllDevice && this.monitor.loaded) {
             this.$timer = setTimeout(this.getDeviesByMonitor, 2000)
           }
         }

src/views/dashboard/v1/Record.vue

@@ -105,6 +105,7 @@ export default {
     },
     onChange ({ value, done }) {
       this.devices = value.map(this.transformDevice)
+      window.localStorage.setItem('MSR_DASHBOARD_DEVICES', JSON.stringify(this.devices))
       done()
     },
     onClick ({ id }) {

src/views/external/box/settings/components/AdConfigDialog.vue → src/views/external/box/settings/components/DeviceConfig/components/AdConfigDialog.vue

@@ -130,7 +130,7 @@ import {
   getAdAttributes,
   updateAdAttributes,
   bindFileToAttributes
-} from '../api'
+} from '../../../api'
 
 export default {
   name: 'AdConfigDialog',

src/views/external/box/settings/components/AttributeConfigDialog.vue → src/views/external/box/settings/components/DeviceConfig/components/AttributeConfigDialog.vue

@@ -98,7 +98,7 @@ import { validIPv4Address } from '@/utils/validate'
 import {
   getAttributes,
   updateAttributes
-} from '../api'
+} from '../../../api'
 
 const attributeSet = [
   { key: 'recoveryCardIP', valid (val) {
@@ -135,7 +135,7 @@ const defaultValue = {
 }
 
 export default {
-  name: 'AttibuteConfigDialog',
+  name: 'AttributeConfigDialog',
   data () {
     return {
       maxSize: 64,

src/views/external/box/settings/components/DeviceConfig/components/RecordConfigDialog.vue

@@ -0,0 +1,90 @@
+<template>
+  <confirm-dialog
+    ref="configDialog"
+    title="视频回采清晰度配置"
+    @confirm="onSave"
+  >
+    <div class="c-grid-form auto u-align-self--center">
+      <span class="c-grid-form__label u-required">清晰度</span>
+      <div class="l-flex--row">
+        <el-select
+          v-model="type"
+          class="u-width--sm"
+        >
+          <el-option
+            v-for="item in recordOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
+        </el-select>
+      </div>
+    </div>
+  </confirm-dialog>
+</template>
+
+<script>
+import { Quality } from '@/constant'
+import {
+  getRecordConfig,
+  addRecordConfig,
+  updateRecordConfig
+} from '@/api/device'
+
+export default {
+  name: 'RecordConfigDialog',
+  data () {
+    return {
+      recordOptions: [
+        { value: 'f', label: '标清' },
+        { value: 'ff', label: '高清' },
+        { value: 'fff', label: '超清' }
+      ],
+      type: ''
+    }
+  },
+  methods: {
+    show ({ id }) {
+      const loading = this.$showLoading()
+      this.$deviceId = id
+      getRecordConfig(id).then(({ data }) => {
+        if (data) {
+          this.$has = true
+          const { frameRate } = data
+          this.type = Object.keys(Quality).find(key => Quality[key].frameRate === frameRate)
+        } else {
+          this.$has = false
+          this.type = ''
+        }
+        this.$temp = this.type
+        this.$refs.configDialog.show()
+      }).finally(() => {
+        this.$closeLoading(loading)
+      })
+    },
+    onSave (done) {
+      if (this.$temp === this.type) {
+        done()
+        return
+      }
+      if (!this.type) {
+        this.$message({
+          type: 'warning',
+          message: '请选择清晰度'
+        })
+        return
+      }
+      (this.$has ? updateRecordConfig : addRecordConfig)({
+        deviceId: this.$deviceId,
+        ...Quality[this.type]
+      }).then(() => {
+        done()
+        this.$message({
+          type: 'success',
+          message: '设置成功'
+        })
+      })
+    }
+  }
+}
+</script>

src/views/external/box/settings/components/DeviceConfig/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="l-grid--info mini">
+    <template v-if="isSuperAdmin">
+      <button
+        class="o-button"
+        @click="onContentProtectionConfig"
+      >
+        内容保护
+      </button>
+      <button
+        class="o-button"
+        @click="onAttributeConfig"
+      >
+        下发属性
+      </button>
+      <button
+        class="o-button"
+        @click="onAdConfig"
+      >
+        广告属性
+      </button>
+      <attribute-config-dialog ref="attributeConfigDialog" />
+      <content-protection-config-dialog ref="contentProtectionConfigDialog" />
+      <ad-config-dialog ref="adConfigDialog" />
+    </template>
+    <button
+      class="o-button"
+      @click="onRecordConfig"
+    >
+      视频回采清晰度
+    </button>
+    <button
+      class="o-button"
+      @click="onSpacerConfig"
+    >
+      视频缓存垫片
+    </button>
+    <button
+      class="o-button"
+      @click="onDatasetConfig"
+    >
+      填充素材包
+    </button>
+    <record-config-dialog ref="recordConfigDialog" />
+    <spacer-config-dialog ref="spacerConfigDialog" />
+    <dataset-config-dialog ref="datasetConfigDialog" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import AttributeConfigDialog from './components/AttributeConfigDialog.vue'
+import ContentProtectionConfigDialog from './components/ContentProtectionConfigDialog.vue'
+import AdConfigDialog from './components/AdConfigDialog.vue'
+import RecordConfigDialog from './components/RecordConfigDialog.vue'
+
+export default {
+  name: 'DeviceNormalConfig',
+  components: {
+    AttributeConfigDialog,
+    ContentProtectionConfigDialog,
+    AdConfigDialog,
+    RecordConfigDialog
+  },
+  props: {
+    device: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters(['isSuperAdmin'])
+  },
+  methods: {
+    onAttributeConfig () {
+      this.$refs.attributeConfigDialog.show(this.device)
+    },
+    onContentProtectionConfig () {
+      this.$refs.contentProtectionConfigDialog.show(this.device)
+    },
+    onAdConfig () {
+      this.$refs.adConfigDialog.show(this.device)
+    },
+    onRecordConfig () {
+      this.$refs.recordConfigDialog.show(this.device)
+    },
+    onSpacerConfig () {
+      this.$refs.spacerConfigDialog.show({
+        targetType: 3,
+        targetKey: this.device.id
+      })
+    },
+    onDatasetConfig () {
+      this.$refs.datasetConfigDialog.show(this.device)
+    }
+  }
+}
+</script>

src/views/external/box/settings/components/DeviceNormalConfig.vue

@@ -1,72 +0,0 @@
-<template>
-  <div class="l-grid--info mini">
-    <button
-      class="o-button"
-      @click="onAttributeConfig"
-    >
-      下发属性配置
-    </button>
-    <button
-      v-if="isSuperAdmin"
-      class="o-button"
-      @click="onContentProtectionConfig"
-    >
-      内容保护配置
-    </button>
-    <button
-      class="o-button"
-      @click="onAdConfig"
-    >
-      广告属性配置
-    </button>
-    <button
-      class="o-button"
-      @click="onDatasetConfig"
-    >
-      填充素材包配置
-    </button>
-    <attribute-config-dialog ref="attributeConfigDialog" />
-    <content-protection-config-dialog ref="contentProtectionConfigDialog" />
-    <ad-config-dialog ref="adConfigDialog" />
-    <dataset-config-dialog ref="datasetConfigDialog" />
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import AttributeConfigDialog from './AttributeConfigDialog'
-import ContentProtectionConfigDialog from './ContentProtectionConfigDialog'
-import AdConfigDialog from './AdConfigDialog'
-
-export default {
-  name: 'DeviceNormalConfig',
-  components: {
-    AttributeConfigDialog,
-    ContentProtectionConfigDialog,
-    AdConfigDialog
-  },
-  props: {
-    device: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    ...mapGetters(['isSuperAdmin'])
-  },
-  methods: {
-    onAttributeConfig () {
-      this.$refs.attributeConfigDialog.show(this.device)
-    },
-    onContentProtectionConfig () {
-      this.$refs.contentProtectionConfigDialog.show(this.device)
-    },
-    onAdConfig () {
-      this.$refs.adConfigDialog.show(this.device)
-    },
-    onDatasetConfig () {
-      this.$refs.datasetConfigDialog.show(this.device)
-    }
-  }
-}
-</script>

src/views/external/box/settings/components/RecordConfigDialog.vue

@@ -1,118 +0,0 @@
-<template>
-  <confirm-dialog
-    ref="configDialog"
-    :title="title"
-    @confirm="onSave"
-  >
-    <div class="c-grid-form auto u-align-self--center">
-      <span class="c-grid-form__label">宽度</span>
-      <el-input-number
-        v-model="recordConfig.videoWidth"
-        class="has-info"
-        data-info="范围：240~7680"
-        controls-position="right"
-        :min="240"
-        :max="7680"
-        step-strictly
-      />
-      <span class="c-grid-form__label">高度</span>
-      <el-input-number
-        v-model="recordConfig.videoHeight"
-        class="has-info"
-        data-info="范围：240~7680"
-        controls-position="right"
-        :min="240"
-        :max="7680"
-        step-strictly
-      />
-      <span class="c-grid-form__label">码率</span>
-      <div class="l-flex--row c-grid-form__option">
-        <el-input-number
-          v-model="recordConfig.videoBitRate"
-          controls-position="right"
-          :min="36"
-          step-strictly
-        />
-        &nbsp;Kbps（最低36Kbps)
-      </div>
-      <span class="c-grid-form__label">帧率</span>
-      <div class="l-flex--row c-grid-form__option">
-        <el-input-number
-          v-model="recordConfig.frameRate"
-          class="has-info"
-          data-info="范围：1~24"
-          controls-position="right"
-          :min="1"
-          :max="24"
-          step-strictly
-        />
-        &nbsp;1~24
-      </div>
-    </div>
-  </confirm-dialog>
-</template>
-
-<script>
-import {
-  getRecordConfig,
-  addRecordConfig,
-  updateRecordConfig
-} from '@/api/device'
-
-export default {
-  name: 'RecordConfigDialog',
-  data () {
-    return {
-      title: '',
-      recordConfig: {}
-    }
-  },
-  methods: {
-    show ({ id, name }) {
-      this.title = `${name}推流配置`
-      const loading = this.$showLoading()
-      getRecordConfig(id).then(({ data }) => {
-        if (data) {
-          this.$has = true
-          const { videoWidth, videoHeight, videoBitRate, frameRate } = data
-          this.recordConfig = {
-            deviceId: id,
-            videoWidth,
-            videoHeight,
-            videoBitRate: videoBitRate / 1024 | 0,
-            frameRate
-          }
-        } else {
-          this.$has = false
-          this.recordConfig = {
-            deviceId: id,
-            videoWidth: 640,
-            videoHeight: 360,
-            videoBitRate: 36,
-            frameRate: 1
-          }
-        }
-        this.$refs.configDialog.show()
-      }).finally(() => {
-        this.$closeLoading(loading)
-      })
-    },
-    onSave (done) {
-      const { deviceId, videoWidth, videoHeight, videoBitRate, frameRate } = this.recordConfig
-      ;(this.$has ? updateRecordConfig : addRecordConfig)({
-        deviceId,
-        videoWidth,
-        videoHeight,
-        videoBitRate: videoBitRate * 1024,
-        frameRate
-      }).then(() => {
-        done()
-        this.$message({
-          type: 'success',
-          message: '设置成功'
-        })
-      })
-    }
-  }
-}
-</script>

src/views/external/box/settings/index.vue

@@ -51,19 +51,15 @@
 <script>
 import { mapGetters } from 'vuex'
 import { getDevice } from '@/api/device'
-import DeviceNormalConfig from './components/DeviceNormalConfig'
+import DeviceConfig from './components/DeviceConfig'
 import DeviceThirdParty from './components/external'
-// import ReceivingCard from './components/ReceivingCard'
-import DeviceCamera from './components/Camera.vue'
 import DeviceShadow from './components/DeviceShadow'
 
 export default {
   name: 'BoxSettings',
   components: {
-    DeviceNormalConfig,
+    DeviceConfig,
     DeviceThirdParty,
-    // ReceivingCard,
-    DeviceCamera,
     DeviceShadow
   },
   props: {
@@ -76,17 +72,15 @@ export default {
     return {
       loading: true,
       device: null,
-      active: 'DeviceNormalConfig'
+      active: 'DeviceConfig'
     }
   },
   computed: {
     ...mapGetters(['isSuperAdmin']),
     tabs () {
       return [
-        { key: 'DeviceNormalConfig', label: '基础配置' },
+        { key: 'DeviceConfig', label: '基础配置' },
         { key: 'DeviceThirdParty', label: '第三方设备' },
-        // this.isSuperAdmin && { key: 'ReceivingCard', label: '接收卡' },
-        { key: 'DeviceCamera', label: '摄像头' },
         this.isSuperAdmin && { key: 'DeviceShadow', label: '影子配置' }
       ].filter(Boolean)
     },

src/views/platform/remote-log/index.vue

@@ -84,7 +84,6 @@
       size="lg fixed"
       title="心跳记录"
       :schema="heartbeatSchema"
-      @hook:beforeDestroy="closeTimer"
     />
   </wrapper>
 </template>
@@ -115,18 +114,18 @@ export default {
     return {
       logSetting: {},
       schema: {
+        autoRefreshEachPage: true,
         list: this.getDevicesByTenant,
         buttons: [
           { label: '心跳记录', on: this.onHeartbeats }
         ],
         filters: [
-          { key: 'name', type: 'search', placeholder: '设备名称' }
+          { key: 'name', type: 'search', placeholder: '名称' }
         ],
         cols: [
-          { type: 'refresh' },
-          { prop: 'name', label: '设备名称' },
-          { prop: 'serialNumber', label: '序列号' },
-          { prop: 'mac', label: 'MAC' },
+          { prop: 'remark', label: '型号', width: 100 },
+          { prop: 'name', label: '名称', 'min-width': 120 },
+          { prop: 'address', label: '地址', 'min-width': 120 },
           { type: 'tag', render: ({ activate, onlineStatus }) => activate
             ? onlineStatus === 0
               ? { type: 'primary', label: '待接入' }
@@ -144,13 +143,13 @@ export default {
       },
       heartbeatSchema: {
         nonPagination: true,
+        autoRefresh: true,
         list: this.getheartbeatData,
         filters: [
-          { key: 'name', type: 'search', placeholder: '设备名称' }
+          { key: 'name', type: 'search', placeholder: '名称' }
         ],
         cols: [
-          { type: 'refresh' },
-          { prop: 'name', label: '设备名称', sortable: true },
+          { prop: 'name', label: '名称', sortable: true },
           { prop: 'sn', label: '序列号', sortable: true },
           { prop: 'mac', label: 'MAC', width: 140 },
           { prop: 'ip', label: 'ip', width: 140 },
@@ -165,9 +164,9 @@ export default {
     resultSchema () {
       return {
         list: getRemoteLogs,
+        autoRefresh: true,
         condition: { deviceId: this.curDeviceId },
         cols: [
-          { type: 'refresh' },
           { prop: 'settingId', label: '事件' },
           { label: '执行状态', type: 'tag', render: ({ status }) => {
             return {
@@ -186,14 +185,7 @@ export default {
       }
     }
   },
-  beforeDestroy () {
-    this.closeTimer()
-  },
   methods: {
-    closeTimer () {
-      clearTimeout(this.$timer)
-      this.$timer = null
-    },
     onTenantChanged (tenant) {
       this.$tenant = tenant
       this.$refs.table?.pageTo(1)
@@ -253,11 +245,7 @@ export default {
       this.$refs.resultDialog.show()
     },
     getheartbeatData () {
-      this.closeTimer()
       return getHeartbeats(this.$mac).then(({ data }) => {
-        this.$timer = setTimeout(() => {
-          this.$refs?.heartbeatDialog.getTable()?.onPagination()
-        }, 5 * 1000)
         if (!data) {
           return { data: [] }
         }

src/views/realm/settings/index.vue

@@ -96,6 +96,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import AlarmStratConfigDialog from './components/AlarmStratConfigDialog.vue'
 import AutoRestartConfigDialog from './components/AutoRestartConfigDialog.vue'
 import OnlineRefreshConfigDialog from './components/OnlineRefreshConfigDialog.vue'
@@ -103,7 +104,6 @@ import PowerConfigDialog from './components/PowerConfigDialog.vue'
 import UnattendConfigDialog from './components/UnattendConfigDialog.vue'
 import TemperatureThresholdConfigDialog from './components/TemperatureThresholdConfigDialog.vue'
 import DeviationThresholdConfigDialog from './components/DeviationThresholdConfigDialog.vue'
-import SpacerConfigDialog from './components/SpacerConfigDialog.vue'
 import ErrorOfflineAlarmConfigDialog from './components/ErrorOfflineAlarmConfigDialog.vue'
 
 export default {
@@ -116,9 +116,11 @@ export default {
     UnattendConfigDialog,
     TemperatureThresholdConfigDialog,
     DeviationThresholdConfigDialog,
-    SpacerConfigDialog,
     ErrorOfflineAlarmConfigDialog
   },
+  computed: {
+    ...mapGetters(['tenant'])
+  },
   methods: {
     onAlarmStratConfig () {
       this.$refs.alarmStratConfigDialog.show()
@@ -142,7 +144,10 @@ export default {
       this.$refs.deviationThresholdConfigDialog.show()
     },
     onSpacerConfig () {
-      this.$refs.spacerConfigDialog.show()
+      this.$refs.spacerConfigDialog.show({
+        targetType: 2,
+        targetKey: this.tenant
+      })
     },
     onErrorOfflineAlarmConfig (type, title) {
       this.$refs.errorOfflineAlarmConfigDialog.show(type, title)