refactor(device): running

src/views/device/detail/components/DeviceExternal/external/ReceivingCard/ReceivingCardTopology.vue

@@ -59,7 +59,7 @@ export default {
   //   this.check()
   // },
   // deactivated () {
-  //   removeListener('topology', this.onUpdate)
+  //   removeListener('screen', this.onUpdate)
   // },
   methods: {
     setDefaults (screenList) {
@@ -125,7 +125,7 @@ export default {
     },
     check () {
       if (!this._inactive && this.cards?.length) {
-        // addListener('topology', this.onUpdate)
+        // addListener('screen', this.onUpdate)
       }
     },
     onUpdate (data) {

src/views/device/detail/components/DeviceRuntime/Download.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="l-flex--col c-device-grid-item has-border radius">
-    <div class="l-flex--row l-flex__none has-bottom-padding">
+    <div class="l-flex__none l-flex--row c-sibling-item--v">
       <i class="l-flex__none c-sibling-item o-icon" />
       <span class="l-flex__fill c-sibling-item near u-color--info u-ellipsis">文件下载</span>
       <i
@@ -9,9 +9,9 @@
         @click="showDownload"
       />
     </div>
-    <div class="l-flex__fill u-text--center">
-      <div class="has-bottom-padding">当前已下载文件</div>
-      <div class="u-color--black">
+    <div class="l-flex__fill c-sibling-item--v far u-text--center">
+      <div class="c-sibling-item--v">当前已下载文件</div>
+      <div class="c-sibling-item--v far u-color--black">
         <span class="u-font-size--3xl">{{ downloadCount }}</span> 个
       </div>
     </div>

src/views/device/detail/components/DeviceRuntime/Running.vue

@@ -1,51 +1,134 @@
 <template>
   <div class="l-flex--col c-device-grid-item has-border radius">
-    <div class="l-flex__none l-flex--row">
+    <div class="l-flex__none l-flex--row c-sibling-item--v">
       <i class="l-flex__none c-sibling-item o-icon" />
       <span class="l-flex__fill c-sibling-item near u-color--info u-ellipsis">状态</span>
-      <i
-        v-if="asking"
-        class="l-flex__none el-icon-loading u-color--black"
-      />
-      <i
-        v-else
-        class="l-flex__none o-icon sm u-pointer"
-        @click="invoke"
-      />
+      <div
+        v-if="screen"
+        class="u-color--info u-font-size--xs"
+      >
+        {{ screen.timestamp }}
+      </div>
     </div>
     <div
-      v-if="!asking"
+      v-if="screen"
+      class="l-flex__fill l-flex--col c-sibling-item--v far u-color--black u-font-size--xs"
+    >
+      <div class="c-sibling-item--v">版本 {{ screen.versionName }} {{ screen.versionCode }}</div>
+      <div class="c-sibling-item--v far">
+        <div class="l-flex--row c-sibling-item--v">
+          <div class="l-flex__fill">外部存储空间</div>
+          <div :class="externalUsageStatus.color">{{ screen.externalUsage }}%</div>
+        </div>
+        <el-progress
+          class="c-sibling-item--v nearer"
+          :percentage="screen.externalUsage"
+          :status="externalUsageStatus.status"
+          :show-text="false"
+        />
+      </div>
+      <div class="c-sibling-item--v far">
+        <div class="l-flex--row c-sibling-item--v">
+          <div class="l-flex__fill">内存</div>
+          <div :class="ramUsageStatus.color">{{ screen.ramUsage }}%</div>
+        </div>
+        <el-progress
+          class="c-sibling-item--v nearer"
+          :percentage="screen.ramUsage"
+          :status="ramUsageStatus.status"
+          :show-text="false"
+        />
+      </div>
+    </div>
+    <div
+      v-else
       class="l-flex__fill l-flex--row center u-font-size--md has-bottom-padding u-color--black u-bold"
     >
-      {{ status }}
+      未知
     </div>
   </div>
 </template>
 
 <script>
+import { parseTime } from '@/utils'
 import {
   addListener,
-  removeListener,
-  send
+  removeListener
 } from '../../monitor'
 
 export default {
   name: 'DeviceRunning',
   data () {
     return {
-      asking: false,
-      status: ''
+      screen: null
+    }
+  },
+  computed: {
+    externalUsageStatus () {
+      if (this.screen) {
+        const externalUsage = this.screen.externalUsage
+        if (externalUsage >= 90) {
+          return {
+            color: 'u-color--error dark',
+            status: 'exception'
+          }
+        }
+        if (externalUsage >= 75) {
+          return {
+            color: 'u-color--warning',
+            status: 'warning'
+          }
+        }
+      }
+      return {
+        color: 'u-color--success',
+        status: 'success'
+      }
+    },
+    ramUsageStatus () {
+      if (this.screen) {
+        const ramUsage = this.screen.ramUsage
+        if (ramUsage >= 90) {
+          return {
+            color: 'u-color--error dark',
+            status: 'exception'
+          }
+        }
+        if (ramUsage >= 75) {
+          return {
+            color: 'u-color--warning',
+            status: 'warning'
+          }
+        }
+      }
+      return {
+        color: 'u-color--success',
+        status: 'success'
+      }
     }
   },
   created () {
-    addListener('status', this.onUpdate)
-    this.ask()
+    addListener('screen', this.onUpdate)
   },
   beforeDestroy () {
-    removeListener('status', this.onUpdate)
+    removeListener('screen', this.onUpdate)
   },
   methods: {
-    onUpdate (status, { loading }) {
+    onUpdate (screen) {
+      if (screen) {
+        const { timestamp, versionName, versionCode, externalUsage, ramUsage } = screen
+        this.screen = {
+          timestamp: parseTime(Number(timestamp), '{y}-{m}-{d} {h}:{i}:{s}'),
+          versionName,
+          versionCode,
+          externalUsage,
+          ramUsage
+        }
+      } else {
+        this.screen = null
+      }
+    },
+    onUpdateStatus (status, { loading }) {
       this.asking = loading
       switch (status) {
         case 1:
@@ -64,17 +147,6 @@ export default {
           this.status = '未知'
           break
       }
-    },
-    ask () {
-      return send('/status/ask')
-    },
-    invoke () {
-      this.ask().catch(() => {
-        this.$message({
-          type: 'warning',
-          message: '正在连接，请稍后再试'
-        })
-      })
     }
   }
 }
@@ -83,9 +155,5 @@ export default {
 <style lang="scss" scoped>
 .o-icon {
   background-image: url("~@/assets/icon_condition.png");
-
-  &.sm {
-    background-image: url("~@/assets/icon_screenshot.png");
-  }
 }
 </style>

src/views/device/detail/components/DeviceRuntime/ScreenShot.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="l-flex--col c-device-grid-item has-border radius">
-    <div class="l-flex__none l-flex--row has-bottom-padding">
+    <div class="l-flex__none l-flex--row c-sibling-item--v">
       <i class="l-flex__none c-sibling-item o-icon" />
       <span class="l-flex__fill c-sibling-item near u-color--info u-ellipsis">截屏</span>
       <i
@@ -14,7 +14,7 @@
       />
     </div>
     <div
-      class="l-flex__fill u-size--contain"
+      class="l-flex__fill c-sibling-item--v u-size--contain"
       :style="styles"
     />
   </div>

src/views/device/detail/components/DeviceRuntime/index.vue

@@ -32,7 +32,7 @@ export default {
         staticClass: 'l-grid--info'
       },
       [
-        h('Running', { props: this.$attrs }),
+        h('Running'),
         h('ScreenShot', { props: this.$attrs }),
         h('Download')
       ]

src/views/device/detail/monitor.js

@@ -36,9 +36,9 @@ export function start (device) {
     `${productId}/${deviceId}/screen`
   ], onMessage)
   createType('online', { parser: onlineParser })
-  createType('status', { type: Type.LOAD, parser: statusParser, value: '未知', reset: true })
+  createType('status', { type: Type.LOAD, parser: statusParser, reset: true })
   createType('download', { type: Type.CACHE, parser: downloadParser, value: [], reset: true, mark: {} })
-  createType('topology', { type: Type.CACHE, parser: topologyParser, reset: true })
+  createType('screen', { type: Type.CACHE, parser: screenParser, reset: true })
 }
 
 export function stop () {
@@ -117,7 +117,7 @@ function getType (topic) {
     case 'resource/progress':
       return 'download'
     case 'screen':
-      return 'topology'
+      return 'screen'
     default:
       return null
   }
@@ -147,7 +147,6 @@ function onUpdate (inst, message, topic) {
 }
 
 function updateType (inst, value) {
-  console.log()
   switch (inst.type) {
     case Type.LOAD:
       inst.loading = false
@@ -212,6 +211,7 @@ function onlineParser (inst, message, topic) {
   }
   reset('status')
   reset('download')
+  reset('screen')
   return false
 }
 
@@ -319,7 +319,7 @@ function sensorParser (inst, data) {
   })
 }
 
-function topologyParser (inst, message) {
+function screenParser (inst, message) {
   if (message === RESET_MESSAGE) {
     return null
   }