refactor: cache

src/utils/cache.js → src/utils/cache/event.js

@@ -6,23 +6,19 @@ import { ScheduleType } from '@/constant'
 const cacheMap = {}
 
 function getProgramInst (id) {
-  return programApi(id, { custom: true, background: true })
+  return programApi(id, { custom: true, background: true }).then(({ data }) => data)
 }
 
 function getScheduleInst (id) {
   return scheduleApi(id, { custom: true, background: true })
 }
 
-function getProgramName ({ data }) {
-  return data.name
-}
-
-function getScheduleName ({ name }) {
+function getInstName ({ name }) {
   return name
 }
 
-function getProgramImage ({ data }) {
-  return getAssetUrl(data.img)
+function getProgramImage ({ img }) {
+  return getAssetUrl(img)
 }
 
 function getScheduleImage ({ events }) {
@@ -49,7 +45,7 @@ function getPromise (type, id) {
 }
 
 export function getName (type, id) {
-  return getPromise(type, id).then(type === ScheduleType.CALENDAR ? getProgramName : getScheduleName)
+  return getPromise(type, id).then(getInstName)
 }
 
 export function getImage (type, id) {

src/utils/cache/index.js

@@ -0,0 +1,2 @@
+export * as EventCache from './event'
+export * as ScreenshotCache from './screenshot'

src/utils/screenshot.js → src/utils/cache/screenshot.js

@@ -1,3 +1,4 @@
+import { Message } from 'element-ui'
 import {
   subscribe,
   publish
@@ -6,7 +7,7 @@ import {
 const cache = new Map()
 let listening = false
 
-export function getAndCheck ({ productId, id }, cb, expired) {
+export function watch ({ productId, id }, cb, expired) {
   if (!listening) {
     subscribe('+/+/screenshot/reply', onMessage)
     listening = true
@@ -37,7 +38,7 @@ function retry (inst, expired = 30000) {
   return true
 }
 
-export function stop (deviceId) {
+export function unwatch (deviceId) {
   const inst = cache.get(deviceId)
   if (inst) {
     inst.cb = null
@@ -49,17 +50,20 @@ export function screenshot (deviceId, silence) {
   if (inst) {
     inst.waiting = true
     inst.base64 = null
-    publish(`${inst.productId}/${inst.deviceId}/screenshot/ask`, JSON.stringify({ timestamp: inst.timestamp })).then(() => {
-      startTimer(inst)
-    }, () => {
-      inst.waiting = false
-      if (!silence) {
-        this.$message({
-          type: 'warning',
-          message: '正在连接，请稍后再试'
-        })
+    publish(`${inst.productId}/${inst.deviceId}/screenshot/ask`, JSON.stringify({ timestamp: inst.timestamp })).then(
+      () => {
+        startTimer(inst)
+      },
+      () => {
+        inst.waiting = false
+        if (!silence) {
+          Message({
+            type: 'warning',
+            message: '正在连接，请稍后再试'
+          })
+        }
       }
-    }).finally(() => {
+    ).finally(() => {
       emit(inst)
     })
   }
@@ -103,7 +107,7 @@ function onMessage (topic, message) {
   }
 }
 
-export function reset (deviceId) {
+export function remove (deviceId) {
   const inst = cache.get(deviceId)
   if (inst) {
     clearTimeout(inst.timer)

src/utils/event.js

@@ -258,7 +258,7 @@ export function correctEndTime (endTime) {
   return endTime === '00:00:00' ? '24:00:00' : endTime
 }
 
-import { getName } from '@/utils/cache'
+import { EventCache } from '@/utils/cache'
 
 export function toEvent (item) {
   return item.type ? transformDeviceProgramToEvent(item) : transformProgramToEvent(item)
@@ -292,7 +292,7 @@ function transformDeviceProgramToEvent ({ type, programCalendarId, startTimestam
       name: '未知'
     },
     invoke () {
-      getName(this.target.type, this.target.id).then(name => {
+      EventCache.getName(this.target.type, this.target.id).then(name => {
         this.target.name = name
       })
       this.invoke = null

src/views/dashboard/components/Device.vue

@@ -91,12 +91,7 @@ import {
   listen,
   unlisten
 } from '@/utils/mqtt'
-import {
-  getAndCheck,
-  screenshot,
-  reset,
-  stop
-} from '@/utils/screenshot'
+import { ScreenshotCache } from '@/utils/cache'
 import {
   isHit,
   getNearestHitDate,
@@ -167,9 +162,9 @@ export default {
       listen(this.onMessage)
       this.getTimeline()
       if (this.isOnline) {
-        getAndCheck(this.device, this.onScreenshotUpdate)
+        ScreenshotCache.watch(this.device, this.onScreenshotUpdate)
       } else {
-        reset(this.device.id)
+        ScreenshotCache.remove(this.device.id)
       }
     }
     this.$timer = null
@@ -178,7 +173,7 @@ export default {
     if (this.isActivated) {
       unlisten(this.onMessage)
       if (this.isOnline) {
-        stop(this.device.id)
+        ScreenshotCache.unwatch(this.device.id)
       }
     }
     clearTimeout(this.$timer)
@@ -186,7 +181,7 @@ export default {
   },
   methods: {
     screenshot () {
-      screenshot(this.device.id)
+      ScreenshotCache.screenshot(this.device.id)
     },
     onScreenshotUpdate ({ waiting, base64 }) {
       this.isShotting = waiting

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

@@ -21,11 +21,7 @@
 </template>
 
 <script>
-import {
-  getAndCheck,
-  screenshot,
-  stop
-} from '@/utils/screenshot'
+import { ScreenshotCache } from '@/utils/cache'
 
 export default {
   name: 'DeviceScreenShot',
@@ -42,13 +38,13 @@ export default {
     }
   },
   activated () {
-    getAndCheck(this.device, this.onScreenshotUpdate, 10000)
+    ScreenshotCache.watch(this.device, this.onScreenshotUpdate, 10000)
   },
   created () {
-    getAndCheck(this.device, this.onScreenshotUpdate, 10000)
+    ScreenshotCache.watch(this.device, this.onScreenshotUpdate, 10000)
   },
   beforeDestroy () {
-    stop()
+    ScreenshotCache.unwatch(this.device.id)
   },
   methods: {
     onScreenshotUpdate ({ waiting, base64 }) {
@@ -58,7 +54,7 @@ export default {
       } : null
     },
     invoke () {
-      screenshot(this.device.id, true)
+      ScreenshotCache.screenshot(this.device.id)
     }
   }
 }

src/views/device/detail/index.vue

@@ -63,7 +63,7 @@
 
 <script>
 import { getDevice } from '@/api/device'
-import { reset } from '@/utils/screenshot'
+import { ScreenshotCache } from '@/utils/cache'
 import {
   start,
   stop,
@@ -166,7 +166,7 @@ export default {
           this.isActivated = data.activate === 2
           this.isOnline = this.isActivated && data.onlineStatus === 1
           if (!this.isOnline) {
-            reset(this.deviceId)
+            ScreenshotCache.remove(id)
           }
           start(this.device)
           addListener('online', this.onUpdate)
@@ -181,7 +181,7 @@ export default {
       this.isActivated = true
       this.isOnline = online
       if (!this.isOnline) {
-        reset(this.deviceId)
+        ScreenshotCache.remove(this.deviceId)
       }
     }
   }

src/views/schedule/timeline/index.vue

@@ -209,7 +209,7 @@ import {
   getFinishDate,
   pickMin
 } from '@/utils/event'
-import { getImage } from '@/utils/cache'
+import { EventCache } from '@/utils/cache'
 import {
   EventFreq,
   ScheduleType
@@ -367,7 +367,7 @@ export default {
         style: null,
         selected: false,
         img () {
-          getImage(this.target.type, this.target.id).then(img => {
+          EventCache.getImage(this.target.type, this.target.id).then(img => {
             if (img) {
               this.style = { backgroundImage: `url("${img}")` }
             }