fix(dashboard): router back

after entering the device detail page, you can return to the homepage

src/router/index.js

@@ -53,10 +53,23 @@ export const asyncRoutes = [
     meta: { title: '首页', icon: 'home' },
     children: [
       {
-        name: 'home',
         path: 'home',
-        component: () => import('@/views/dashboard/index'),
-        meta: { title: '全局概览' }
+        component: Solo,
+        meta: { title: '全局概览' },
+        children: [
+          {
+            name: 'home',
+            path: '',
+            component: () => import('@/views/dashboard/index')
+          },
+          {
+            hidden: true,
+            name: 'home-device',
+            path: ':id',
+            component: () => import('@/views/device/detail/index'),
+            meta: { title: '详情' }
+          }
+        ]
       },
       {
         path: 'map',

src/views/dashboard/components/DeviceCard.vue

@@ -101,7 +101,7 @@
       <div
         v-else
         class="l-flex__auto l-flex--row u-font-size u-bold u-text--center"
-        v-html="warningTip"
+        v-html="statusInfo"
       />
     </div>
     <div class="l-flex__none l-flex--row c-sibling-item--v o-device__next u-color--black light u-font-size--xs u-text--center">
@@ -124,16 +124,13 @@
 <script>
 import {
   ONE_DAY,
-  ThirdPartyDevice,
   EventPriority,
   EventPriorityInfo
 } from '@/constant'
 import { parseTime } from '@/utils'
 import {
   Status,
-  Power,
-  addListener,
-  removeListener
+  Power
 } from '@/utils/adapter'
 import { ScreenshotCache } from '@/utils/cache'
 import {
@@ -143,16 +140,13 @@ import {
   getStartDate,
   toDate
 } from '@/utils/event'
-import { parseVolume } from '@/utils/control/volume'
 import { getTimelineByRange } from '@/api/device'
+import deviceMixin from './mixins/device.js'
 
 export default {
   name: 'DeviceCard',
+  mixins: [deviceMixin],
   props: {
-    device: {
-      type: Object,
-      required: true
-    },
     flag: {
       type: Number,
       default: null
@@ -169,42 +163,12 @@ export default {
       shot: null,
       timelineOptions: { loading: false },
       current: null,
-      next: null,
-      timestamp: '',
-      powerStatus: Status.LOADING,
-      switchStatus: Power.LOADING,
-      hasPower: true,
-      hasPowerRealStatus: false,
-      volume: -1
+      next: null
     }
   },
   computed: {
-    name () {
-      return this.device.name
-    },
-    address () {
-      return this.device.address
-    },
-    warningTip () {
-      return this.isOnline
-        ? this.powerStatus === Status.WARNING
-          ? `电源状态异常，${this.switchStatus === Power.LOADING ? '检测' : '最后上报'}时间<br/><br/>${this.timestamp}`
-          : '屏幕未开启'
-        : this.device.lastOnline
-          ? `${this.device.lastOnline} 离线`
-          : '当前播控器离线了'
-    },
-    isOnline () {
-      return this.device.onlineStatus === 1
-    },
-    hasStatus () {
-      return !this.isOnline || !this.hasPower || this.hasPowerRealStatus
-    },
-    isPowerOpened () {
-      return !this.hasPower || this.hasPowerRealStatus && (this.powerStatus === Status.OK && this.switchStatus !== Power.OFF)
-    },
     isRealOnline () {
-      return this.hasStatus && this.isOnline && this.isPowerOpened
+      return this.isOnline && (!this.hasPower || this.isPowerOpened)
     },
     isRealOffline () {
       return this.hasStatus && !this.isRealOnline
@@ -212,9 +176,9 @@ export default {
     switchStatusClass () {
       return this.powerStatus === Status.WARNING
         ? 'el-icon-warning u-color--warning u-font-size--2xl'
-        : this.switchStatus === Power.ON
+        : this.powerSwitchStatus === Power.ON
           ? 'on'
-          : this.switchStatus === Power.OFF
+          : this.powerSwitchStatus === Power.OFF
             ? 'off'
             : 'other'
     },
@@ -232,12 +196,6 @@ export default {
     },
     needCheck () {
       return this.isInView && this.isRealOnline
-    },
-    volumeTip () {
-      if (this.volume > -1) {
-        return parseVolume(this.volume)
-      }
-      return ''
     }
   },
   watch: {
@@ -248,19 +206,6 @@ export default {
       }
       this.getTimeline(true)
     },
-    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
-    },
     isInView (val) {
       if (!val) {
         this.onReset()
@@ -280,7 +225,7 @@ export default {
       immediate: true
     }
   },
-  // 因为inOnline的watch使用了immediate，会先于created
+  // inOnline的watch使用了immediate，会先于created
   beforeCreate () {
     this.$timer = -1
     this.$refreshTimer = -1
@@ -292,9 +237,6 @@ export default {
     }
   },
   beforeDestroy () {
-    if (this.isOnline) {
-      removeListener(this.device.id, this.onMessage)
-    }
     this.onReset(true)
     this.$observer?.disconnect()
     this.$observer = null
@@ -317,18 +259,6 @@ export default {
       }
       this.$observer.observe(this.$el)
     },
-    onMessage (value) {
-      if (value.screen) {
-        this.volume = value.screen.volume
-      }
-      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.hasPowerRealStatus = powerStatus !== Status.LOADING
-      this.switchStatus = multiCard.switchStatus
-    },
     checkStatus () {
       if (!this.$firstView) {
         ScreenshotCache.watch(this.device, this.onScreenshotUpdate)
@@ -362,12 +292,6 @@ export default {
       this.isShotting = waiting
       this.shot = waiting ? null : base64
     },
-    onClick () {
-      this.$router.push({
-        name: 'device-detail',
-        params: { id: this.device.id }
-      })
-    },
     getTimeline (force) {
       if (!force && this.timelineOptions.loading) {
         return

src/views/dashboard/components/DeviceCardRect.vue

@@ -64,55 +64,22 @@
 </template>
 
 <script>
-import { ThirdPartyDevice } from '@/constant'
-import { parseTime } from '@/utils'
 import {
   Status,
-  Power,
-  addListener,
-  removeListener
+  Power
 } from '@/utils/adapter'
-import { parseVolume } from '@/utils/control/volume'
+import deviceMixin from './mixins/device.js'
 
 export default {
   name: 'DeviceCardRect',
-  props: {
-    device: {
-      type: Object,
-      required: true
-    }
-  },
-  data () {
-    return {
-      powerStatus: Status.LOADING,
-      switchStatus: Power.LOADING,
-      hasPower: true,
-      hasPowerRealStatus: false,
-      volume: -1
-    }
-  },
+  mixins: [deviceMixin],
   computed: {
-    name () {
-      return this.device.name
-    },
-    address () {
-      return this.device.address
-    },
-    isOnline () {
-      return this.device.onlineStatus === 1
-    },
-    hasStatus () {
-      return !this.isOnline || !this.hasPower || this.hasPowerRealStatus
-    },
-    isPowerOpened () {
-      return !this.hasPower || this.hasPowerRealStatus && (this.powerStatus === Status.OK && this.switchStatus !== Power.OFF)
-    },
     switchStatusClass () {
       return this.powerStatus === Status.WARNING
         ? ''
-        : this.switchStatus === Power.ON
+        : this.powerSwitchStatus === Power.ON
           ? 'on'
-          : this.switchStatus === Power.OFF
+          : this.powerSwitchStatus === Power.OFF
             ? 'off'
             : 'other'
     },
@@ -125,23 +92,6 @@ export default {
           : 'u-color--error dark'
         : 'u-color--info light'
     },
-    statusInfo () {
-      return this.hasStatus
-        ? this.hasPower && this.hasPowerRealStatus
-          ? this.powerStatus === Status.WARNING
-            ? `电源状态${this.switchStatus === Power.LOADING ? '检测' : ''}异常 ${this.timestamp}`
-            : this.isPowerOpened
-              ? '屏幕已开启'
-              : '屏幕未开启'
-          : this.device.lastOnline
-            ? this.isOnline
-              ? `${this.device.lastOnline} 上线`
-              : `${this.device.lastOnline} 离线`
-            : this.isOnline
-              ? '播控器正常运行中'
-              : '当前播控器已离线'
-        : '检测中...'
-    },
     statusInfoColorClass () {
       return this.hasStatus
         ? this.hasPower && this.hasPowerRealStatus
@@ -154,53 +104,9 @@ export default {
             ? 'u-color--info'
             : 'u-color--error dark'
         : 'u-color--info'
-    },
-    volumeTip () {
-      if (this.volume > -1) {
-        return parseVolume(this.volume)
-      }
-      return ''
-    }
-  },
-  watch: {
-    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.isOnline) {
-      removeListener(this.device.id, this.onMessage)
     }
   },
   methods: {
-    onMessage (value) {
-      if (value.screen) {
-        this.volume = value.screen.volume
-      }
-      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.hasPowerRealStatus = powerStatus !== Status.LOADING
-      this.switchStatus = multiCard.switchStatus
-    },
-    onClick () {
-      this.$router.push({
-        name: 'device-detail',
-        params: { id: this.device.id }
-      })
-    },
     onVolume () {
       const { id, productId, name } = this.device
       this.$emit('volume', {

src/views/dashboard/components/DeviceCardSimple.vue

@@ -66,65 +66,31 @@
 </template>
 
 <script>
-import { ThirdPartyDevice } from '@/constant'
-import { parseTime } from '@/utils'
 import {
   Status,
-  Power,
-  addListener,
-  removeListener
+  Power
 } from '@/utils/adapter'
-import { parseVolume } from '@/utils/control/volume'
+import deviceMixin from './mixins/device.js'
 
 export default {
   name: 'DeviceCardSimple',
-  props: {
-    device: {
-      type: Object,
-      required: true
-    }
-  },
-  data () {
-    return {
-      timestamp: '',
-      powerStatus: Status.LOADING,
-      switchStatus: Power.LOADING,
-      hasPower: true,
-      hasPowerRealStatus: false,
-      volume: -1
-    }
-  },
+  mixins: [deviceMixin],
   computed: {
-    name () {
-      return this.device.name
-    },
-    address () {
-      return this.device.address
-    },
     powerStatusTip () {
       return this.hasPower && this.hasPowerRealStatus
         ? this.powerStatus === Status.WARNING
-          ? `电源状态异常，${this.switchStatus === Power.LOADING ? '检测' : '最后上报'}时间 ${this.timestamp}`
+          ? `电源状态异常，${this.powerSwitchStatus === Power.LOADING ? '检测' : '最后上报'}时间 ${this.timestamp}`
           : this.isPowerOpened
             ? '屏幕已开启'
             : '屏幕未开启'
         : ''
     },
-    isOnline () {
-      return this.device.onlineStatus === 1
-    },
-    hasStatus () {
-      return !this.isOnline || !this.hasPower || this.hasPowerRealStatus
-    },
-    isPowerOpened () {
-      return !this.hasPower || this.hasPowerRealStatus && (this.powerStatus === Status.OK && this.switchStatus !== Power.OFF)
-    },
     switchStatusClass () {
       return this.powerStatus === Status.WARNING
         ? 'el-icon-warning u-color--warning u-font-size--xl'
-        : this.switchStatus === Power.ON
+        : this.powerSwitchStatus === Power.ON
           ? 'on'
-          : this.switchStatus === Power.OFF
+          : this.powerSwitchStatus === Power.OFF
             ? 'off'
             : 'other'
     },
@@ -137,76 +103,15 @@ export default {
           : 'u-color--error dark'
         : 'u-color--info'
     },
-    statusInfo () {
-      return this.hasStatus
-        ? this.hasPower && this.hasPowerRealStatus
-          ? this.powerStatus === Status.WARNING
-            ? '电源状态异常'
-            : this.isPowerOpened
-              ? '屏幕已开启'
-              : '屏幕未开启'
-          : this.device.lastOnline
-            ? this.isOnline
-              ? `${this.device.lastOnline} 上线`
-              : `${this.device.lastOnline} 离线`
-            : this.isOnline
-              ? '播控器正常运行中'
-              : '当前播控器已离线'
-        : '检测中...'
-    },
     statusInfoColorClass () {
       return this.hasPower && this.hasPowerRealStatus && !this.isPowerOpened
         ? 'u-color--warning'
         : this.isOnline && !this.hasPower
           ? 'u-color--info'
           : ''
-    },
-    volumeTip () {
-      if (this.volume > -1) {
-        return parseVolume(this.volume)
-      }
-      return ''
-    }
-  },
-  watch: {
-    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.isOnline) {
-      removeListener(this.device.id, this.onMessage)
     }
   },
   methods: {
-    onMessage (value) {
-      if (value.screen) {
-        this.volume = value.screen.volume
-      }
-      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.hasPowerRealStatus = powerStatus !== Status.LOADING
-      this.switchStatus = multiCard.switchStatus
-    },
-    onClick () {
-      this.$router.push({
-        name: 'device-detail',
-        params: { id: this.device.id }
-      })
-    },
     onVolume () {
       const { id, productId, name } = this.device
       this.$emit('volume', {

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

@@ -0,0 +1,109 @@
+import { ThirdPartyDevice } from '@/constant'
+import { parseTime } from '@/utils'
+import {
+  Status,
+  Power,
+  addListener,
+  removeListener
+} from '@/utils/adapter'
+import { parseVolume } from '@/utils/control/volume'
+
+export default {
+  props: {
+    device: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      timestamp: '',
+      powerStatus: Status.LOADING,
+      powerSwitchStatus: Power.LOADING,
+      hasPower: true,
+      volume: -1
+    }
+  },
+  computed: {
+    name () {
+      return this.device.name
+    },
+    address () {
+      return this.device.address
+    },
+    isOnline () {
+      return this.device.onlineStatus === 1
+    },
+    hasPowerRealStatus () {
+      return this.powerStatus !== Status.LOADING
+    },
+    hasStatus () {
+      return !this.isOnline || !this.hasPower || this.hasPowerRealStatus
+    },
+    isPowerOpened () {
+      return this.hasPowerRealStatus && this.powerStatus === Status.OK && this.powerSwitchStatus !== Power.OFF
+    },
+    statusInfo () {
+      return this.hasStatus
+        ? this.hasPower && this.hasPowerRealStatus
+          ? this.powerStatus === Status.WARNING
+            ? `电源状态${this.powerSwitchStatus === Power.LOADING ? '检测' : ''}异常 ${this.timestamp}`
+            : this.isPowerOpened
+              ? '屏幕已开启'
+              : '屏幕未开启'
+          : this.device.lastOnline
+            ? this.isOnline
+              ? `${this.device.lastOnline} 上线`
+              : `${this.device.lastOnline} 离线`
+            : this.isOnline
+              ? '播控器正常运行中'
+              : '当前播控器已离线'
+        : '检测中...'
+    },
+    volumeTip () {
+      if (this.volume > -1) {
+        return parseVolume(this.volume)
+      }
+      return ''
+    }
+  },
+  watch: {
+    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.isOnline) {
+      removeListener(this.device.id, this.onMessage)
+    }
+  },
+  methods: {
+    onMessage (value) {
+      if (value.screen) {
+        this.volume = value.screen.volume
+      }
+      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
+    },
+    onClick () {
+      this.$router.push({
+        name: 'home-device',
+        params: { id: this.device.id }
+      })
+    }
+  }
+}

src/views/dashboard/index.vue

@@ -4,6 +4,7 @@ import Dashboard from './Dashboard.vue'
 // import AdminDashboard from './AdminDashboard.vue'
 
 export default {
+  name: 'HomeDashboard',
   components: {
     Dashboard/* ,
     TenantDashboard,

src/views/device/detail/index.vue

@@ -183,11 +183,14 @@ export default {
             name: 'device-management'
           })
           break
-        default:
+        case 'device-detail':
           this.$router.replace({
             name: 'device-list'
           })
           break
+        default:
+          this.$router.back()
+          break
       }
     },
     getDevice () {