feat: thumbnail cache

src/utils/cache.js

@@ -1,27 +1,52 @@
+import { getAssetUrl } from '@/api/asset'
 import { getProgram } from '@/api/program'
 import { getSchedule } from '@/api/calendar'
 import { ScheduleType } from '@/constant'
 
-const nameCache = {
+const cache = {
   [ScheduleType.CALENDAR]: {},
   [ScheduleType.RECUR]: {}
 }
 
-function getProgramName (id) {
-  return getProgram(id, { custom: true }).then(({ data }) => data.name)
+function getProgramInst (id) {
+  return getProgram(id, { custom: true })
 }
 
-function getScheduleName (id) {
-  return getSchedule(id, { custom: true }).then(({ name }) => name)
+function getScheduleInst (id) {
+  return getSchedule(id, { custom: true })
 }
 
-export function getName (type, id) {
-  if (!nameCache[type][id]) {
-    const promise = (type === ScheduleType.CALENDAR ? getProgramName : getScheduleName)(id)
-    nameCache[type][id] = promise
+function getProgramName ({ data }) {
+  return data.name
+}
+
+function getScheduleName ({ name }) {
+  return name
+}
+
+function getProgramImage ({ data }) {
+  return getAssetUrl(data.img)
+}
+
+function getScheduleImage ({ programs }) {
+  return getImage(ScheduleType.CALENDAR, programs[0].programId)
+}
+
+function getPromise (type, id) {
+  if (!cache[type][id]) {
+    const promise = (type === ScheduleType.CALENDAR ? getProgramInst : getScheduleInst)(id)
     promise.catch(() => {
-      nameCache[type][id] = null
+      cache[type][id] = null
     })
+    cache[type][id] = promise
   }
-  return nameCache[type][id]
+  return cache[type][id]
+}
+
+export function getName (type, id) {
+  return getPromise(type, id).then(type === ScheduleType.CALENDAR ? getProgramName : getScheduleName)
+}
+
+export function getImage (type, id) {
+  return getPromise(type, id).then(type === ScheduleType.CALENDAR ? getProgramImage : getScheduleImage)
 }

src/views/schedule/timeline/index.vue

@@ -6,11 +6,14 @@
     background
   >
     <div class="l-flex__none l-flex c-device-detail has-bottom-padding">
-      <div class="l-flex__none c-device-detail__screen o-program" />
+      <div
+        class="l-flex__none c-device-detail__screen o-program"
+        :style="programStyle"
+      />
       <div class="l-flex__auto l-flex--col">
         <div class="l-flex__none c-device-detail__name u-ellipsis">{{ deivceName }}</div>
-        <div class="l-flex__none c-device-detail__program u-ellipsis">{{ programName }}</div>
-        <div class="l-flex__none c-device-detail__time u-ellipsis">{{ programTime }}</div>
+        <div class="l-flex__none c-device-detail__program">{{ programName }}</div>
+        <div class="l-flex__none c-device-detail__time">{{ programTime }}</div>
       </div>
     </div>
     <div
@@ -113,12 +116,15 @@
                 v-for="(target, index) in item.options.list"
                 :key="index"
                 class="l-flex__none l-flex--row"
-                :class="{ 'selected': target.id && target.id === programId, 'u-pointer': target.id, 'c-program': target.id }"
+                :class="{ 'selected': target.origin && target.origin.selected, 'u-pointer': target.origin, 'c-program': target.origin }"
                 :style="target.style"
                 @click.stop="chooseProgram(item, target)"
               >
-                <template v-if="target.id">
-                  <i class="l-flex__none c-program__img o-program" />
+                <template v-if="target.origin">
+                  <i
+                    class="l-flex__none c-program__img o-program"
+                    :style="target.origin.style"
+                  />
                   <div class="l-flex__auto">
                     <auto-text
                       class="c-program__time"
@@ -130,8 +136,6 @@
                       :text="target.origin.name"
                       :tag="target.style.width"
                     />
-                    <!-- <div class="c-program__time u-ellipsis">{{ target.time }}</div>
-                    <div class="c-program__name u-ellipsis">{{ target.name }}</div> -->
                   </div>
                 </template>
               </div>
@@ -161,7 +165,7 @@
       />
       <pagination
         :total="deviceOptions.totalCount"
-        :page-sizes="[4]"
+        :page-sizes="[5]"
         :page.sync="deviceOptions.params.pageNum"
         :limit.sync="deviceOptions.params.pageSize"
         @pagination="getDevices"
@@ -180,7 +184,10 @@ import {
   createListOptions,
   parseTime
 } from '@/utils'
-import { getName } from '@/utils/cache'
+import {
+  getName,
+  getImage
+} from '@/utils/cache'
 
 export default {
   name: 'ScheduleTimeline',
@@ -195,7 +202,7 @@ export default {
       deviceOptions: createListOptions({
         productId: '',
         name: '',
-        pageSize: 4
+        pageSize: 5
       }),
       controlOptions: {
         style: null,
@@ -216,14 +223,14 @@ export default {
     deivceName () {
       return this.device?.name
     },
-    programId () {
-      return this.program?.id
-    },
     programName () {
-      return this.program?.name
+      return this.program?.origin.name
     },
     programTime () {
-      return this.program?.time
+      return this.program?.origin.time
+    },
+    programStyle () {
+      return this.program?.origin.style
     },
     isAbnormal () {
       const deviceOptions = this.deviceOptions
@@ -289,7 +296,10 @@ export default {
       this.deviceOptions.list.forEach(device => {
         this._calcPrograms(device.options)
       })
-      if (this.programId && (this.program.startDateTime >= this.$endDateTime || this.program.endDateTime && this.program.endDateTime <= this.$startDateTime)) {
+      if (this.program && (this.program.origin.startDateTime >= this.$endDateTime || this.program.origin.endDateTime && this.program.origin.endDateTime <= this.$startDateTime)) {
+        if (this.program.origin) {
+          this.program.origin.selected = false
+        }
         this.program = null
       }
     },
@@ -341,6 +351,9 @@ export default {
     },
     getDevices () {
       this.device = null
+      if (this.program?.origin) {
+        this.program.origin.selected = false
+      }
       this.program = null
       const options = this.deviceOptions
       options.error = false
@@ -379,13 +392,24 @@ export default {
       const endDateTime = endTimestamp ? new Date(Number(endTimestamp)) : null
       const program = {
         type, startDateTime, endDateTime,
-        id: programCalendarId || Math.random(),
+        id: programCalendarId,
         name: '',
-        time: `${parseTime(startDateTime, '{y}.{m}.{d} {h}:{i}:{s}')} - ${endDateTime ? parseTime(endDateTime - 1000, '{y}.{m}.{d} {h}:{i}:{s}') : '∞'}`
+        time: `${parseTime(startDateTime, '{y}.{m}.{d} {h}:{i}:{s}')} - ${endDateTime ? parseTime(endDateTime - 1000, '{y}.{m}.{d} {h}:{i}:{s}') : '∞'}`,
+        style: null,
+        selected: false
+      }
+      if (programCalendarId) {
+        getName(type, programCalendarId).then(name => {
+          program.name = name
+        })
+        getImage(type, programCalendarId).then(img => {
+          if (img) {
+            program.style = {
+              backgroundImage: `url("${img}")`
+            }
+          }
+        })
       }
-      programCalendarId && getName(type, programCalendarId).then(name => {
-        program.name = name
-      })
       return program
     },
     _calcPrograms (options) {
@@ -414,7 +438,6 @@ export default {
         }
         if (!endDateTime) {
           arr.push({
-            id: program.id,
             origin: program,
             style: { width: `${remaining / total}%` }
           })
@@ -422,7 +445,6 @@ export default {
         }
         const duration = Math.min(remaining, endDateTime - comparison)
         arr.push({
-          id: program.id,
           origin: program,
           style: { width: `${duration / total}%` }
         })
@@ -433,7 +455,13 @@ export default {
     },
     chooseProgram (device, program) {
       this.device = device
-      this.program = program ? program.origin : null
+      if (this.program?.origin) {
+        this.program.origin.selected = false
+      }
+      this.program = program
+      if (this.program?.origin) {
+        this.program.origin.selected = true
+      }
     },
     onTimeChange (val) {
       this.initTimes(val)
@@ -454,7 +482,7 @@ export default {
   }
 
   &__name {
-    color: $gray--dark;
+    color: $black;
     font-size: 20px;
     font-weight: bold;
     line-height: 1;
@@ -462,14 +490,14 @@ export default {
 
   &__program {
     margin-top: 20px;
-    color: $black;
+    color: $blue;
     font-size: 20px;
     font-weight: bold;
   }
 
   &__time {
     margin-top: $spacing;
-    color: $gray;
+    color: $info--dark;
     font-size: 20px;
   }
 }
@@ -487,7 +515,7 @@ export default {
 
   &__row.header &__col {
     color: $black;
-    background-color: #fafafa;
+    background-color: #f4f7fb;
     user-select: none;
   }
 
@@ -514,10 +542,10 @@ export default {
 
   &__col {
     position: relative;
-    color: $gray;
+    color: $info--dark;
     font-size: 14px;
     line-height: 1;
-    background-color: $gray--light;
+    background-color: #edf0f6;
     overflow: hidden;
   }
 
@@ -527,7 +555,6 @@ export default {
     width: 210px;
     padding: 0 10px 0 20px;
     margin-right: 1px;
-    color: $gray--dark;
     font-size: 16px;
   }