feat: support device running status viewing

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

@@ -1,17 +1,20 @@
 <template>
   <div class="c-info-grid">
+    <running class="c-info-grid__item" />
     <screen-shot class="c-info-grid__item" />
     <download class="c-info-grid__item" />
   </div>
 </template>
 
 <script>
+import Running from './Running'
 import ScreenShot from './ScreenShot'
 import Download from './Download'
 
 export default {
   name: 'DeviceRuntime',
   components: {
+    Running,
     ScreenShot,
     Download
   }

src/views/device/detail/components/DeviceStatus.vue

@@ -96,6 +96,10 @@ export default {
     background-size: 100% 100%;
     background-repeat: no-repeat;
 
+    &.running {
+      background-image: url("~@/assets/icon_condition.png");
+    }
+
     &.screenshot {
       background-image: url("~@/assets/icon_image.png");
     }

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

@@ -0,0 +1,72 @@
+<template>
+  <div class="l-flex--col c-runtime">
+    <div class="l-flex__none l-flex--row">
+      <i class="l-flex__none c-runtime__icon running" />
+      <span class="l-flex__fill c-runtime__title u-ellipsis">状态</span>
+      <i
+        v-if="asking"
+        class="l-flex__none el-icon-loading"
+      />
+      <i
+        v-else
+        class="l-flex__none o-invoke u-pointer"
+        @click="invoke"
+      />
+    </div>
+    <div
+      v-if="!asking"
+      class="l-flex__fill l-flex--row center has-bottom-padding u-color--black u-bold"
+    >
+      {{ status }}
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  addListener,
+  removeListener,
+  send
+} from '../monitor'
+
+export default {
+  name: 'DeviceRunning',
+  data () {
+    return {
+      asking: false,
+      status: ''
+    }
+  },
+  created () {
+    addListener('running', this.onUpdate)
+  },
+  beforeDestroy () {
+    removeListener('running', this.onUpdate)
+  },
+  methods: {
+    onUpdate (status) {
+      this.asking = false
+      this.status = status
+    },
+    invoke () {
+      send('/status/ask').then(() => {
+        this.asking = true
+      }, () => {
+        this.$message({
+          type: 'warning',
+          message: '正在连接，请稍后再试'
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.o-invoke {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background: url("~@/assets/icon_screenshot.png") 0 0 / 100% 100% no-repeat;
+}
+</style>

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

@@ -1,20 +1,19 @@
 <template>
   <div class="l-flex--col c-runtime">
-    <div class="l-flex--row l-flex__none has-bottom-padding">
+    <div class="l-flex__none l-flex--row has-bottom-padding">
       <i class="l-flex__none c-runtime__icon screenshot" />
       <span class="l-flex__fill c-runtime__title u-ellipsis">截屏</span>
       <i
-        v-if="isShotting"
+        v-if="asking"
         class="l-flex__none el-icon-loading"
       />
       <i
         v-else
-        class="l-flex__none o-screenshot u-pointer"
-        @click="screenshot"
+        class="l-flex__none o-invoke u-pointer"
+        @click="invoke"
       />
     </div>
     <div
-      v-if="screenshot"
       class="l-flex__fill o-preview"
       :style="styles"
     />
@@ -25,14 +24,14 @@
 import {
   addListener,
   removeListener,
-  screenshot
+  send
 } from '../monitor'
 
 export default {
   name: 'DeviceScreenShot',
   data () {
     return {
-      isShotting: false,
+      asking: false,
       styles: null
     }
   },
@@ -44,14 +43,14 @@ export default {
   },
   methods: {
     onUpdate (screenshot) {
-      this.isShotting = false
+      this.asking = false
       this.styles = screenshot ? {
         backgroundImage: `url("${screenshot}"`
       } : null
     },
-    screenshot () {
-      screenshot().then(() => {
-        this.isShotting = true
+    invoke () {
+      send('/screenshot/ask').then(() => {
+        this.asking = true
       }, () => {
         this.$message({
           type: 'warning',
@@ -64,7 +63,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.o-screenshot {
+.o-invoke {
   display: inline-block;
   width: 24px;
   height: 24px;

src/views/device/detail/monitor.js

@@ -13,8 +13,9 @@ let productId = null
 let deviceId = null
 let cbs = null
 
-let download = null
+let running = '未知'
 let screenshotPic = null
+let download = null
 let sensor = null
 
 export function start (device) {
@@ -28,8 +29,9 @@ export function start (device) {
   subscribe([
     `${productId}/${deviceId}/online`,
     `${productId}/${deviceId}/offline`,
-    `${productId}/${deviceId}/resource/progress`,
-    `${productId}/${deviceId}/screenshot/reply`
+    `${productId}/${deviceId}/status/reply`,
+    `${productId}/${deviceId}/screenshot/reply`,
+    `${productId}/${deviceId}/resource/progress`
   ], onMessage)
   if (__SENSOR__) {
     updateSensors(sensor = { running: true })
@@ -41,13 +43,15 @@ export function stop () {
     unsubscribe([
       `${productId}/${deviceId}/online`,
       `${productId}/${deviceId}/offline`,
-      `${productId}/${deviceId}/resource/progress`,
-      `${productId}/${deviceId}/screenshot/reply`
+      `${productId}/${deviceId}/status/reply`,
+      `${productId}/${deviceId}/screenshot/reply`,
+      `${productId}/${deviceId}/resource/progress`
     ], onMessage)
     productId = null
     deviceId = null
-    download = null
+    running = '未知'
     screenshotPic = null
+    download = null
     if (__SENSOR__) {
       sensor.running = false
       sensor = null
@@ -72,22 +76,21 @@ export function removeListener (type, cb) {
   }
 }
 
-export function screenshot () {
-  return publish(`${productId}/${deviceId}/screenshot/ask`, JSON.stringify({ timestamp: Date.now() }))
-}
-
 export function send (topic, message) {
   return publish(`${productId}/${deviceId}${topic}`, JSON.stringify(message || { timestamp: Date.now() }))
 }
 
 function invoke (type, cb) {
   switch (type) {
-    case 'download':
-      cb(download.files)
+    case 'running':
+      cb(running)
       break
     case 'screenshot':
       cb(screenshotPic)
       break
+    case 'download':
+      cb(download.files)
+      break
     case 'temperature':
     case 'smoke':
     case 'flooding':
@@ -126,17 +129,48 @@ function onUpdate (invoke, message) {
     case 'offline':
       emit('online', false)
       break
-    case 'resource/progress':
-      onUpdateFile(message)
+    case 'status/reply':
+      onUpdateStatus(message)
       break
     case 'screenshot/reply':
       onUpdateScreenShot(message)
       break
+    case 'resource/progress':
+      onUpdateFile(message)
+      break
     default:
       break
   }
 }
 
+function onUpdateStatus (message) {
+  try {
+    message = JSON.parse(message)
+    switch (message.status) {
+      case 1:
+        running = '未播放节目，处于默认状态'
+        break
+      case 2:
+        running = '正在播放节目'
+        break
+      case 3:
+        running = '解析节目异常，请重新发布'
+        break
+      default:
+        running = '未知'
+        break
+    }
+  } catch {
+    running = '未知'
+  }
+  emit('running')
+}
+
+function onUpdateScreenShot (message) {
+  screenshotPic = `data:image/jpeg;base64,${message.replace(/\s/g, '')}`
+  emit('screenshot')
+}
+
 function onUpdateFile (message) {
   try {
     const { ossUrl, complete, errorReason, progress, rate, success } = JSON.parse(message)
@@ -169,11 +203,6 @@ function onUpdateFile (message) {
   }
 }
 
-function onUpdateScreenShot (message) {
-  screenshotPic = `data:image/jpeg;base64,${message.replace(/\s/g, '')}`
-  emit('screenshot')
-}
-
 function transformValue (type, value, unit) {
   switch (type) {
     case 'temperature':