refactor: device card component

src/views/dashboard/components/Device.vue

@@ -1,18 +1,14 @@
 <template>
   <div
-    class="o-device has-padding u-pointer"
+    class="o-device u-pointer"
     @click="onClick"
   >
-    <div class="l-flex__none l-flex--row o-device__block o-device__header">
-      <i
-        class="l-flex__none o-device__status"
-        :class="statusClass"
-      />
+    <div class="l-flex__none l-flex--row o-device__header">
       <auto-text
         class="l-flex__fill"
         :text="name"
       />
-      <template v-if="isActivated && isOnline">
+      <template v-if="isOnline">
         <i
           v-if="isShotting"
           class="l-flex__none el-icon-loading"
@@ -32,20 +28,17 @@
       </div>
     </div>
     <div
-      v-if="shot"
-      class="l-flex__fill o-device__block o-device__preview u-size--contain"
+      class="l-flex__fill o-device__preview u-size--contain"
+      :class="{ offline: !isOnline, empty: !shot }"
       :style="styles"
     />
-    <div
-      v-if="isActivated"
-      class="l-flex__auto l-flex--col center o-device__block o-device__info"
-    >
-      <i
-        v-if="loadingTimeline"
-        class="l-flex__none el-icon-loading"
-      />
-      <template v-else>
-        <template v-if="current">
+    <div class="l-flex__auto l-flex--col center o-device__info">
+      <template v-if="isOnline">
+        <i
+          v-if="loadingTimeline"
+          class="l-flex__none el-icon-loading"
+        />
+        <template v-else-if="current">
           <auto-text
             class="l-flex__none o-device__current"
             :text="current.target.name"
@@ -66,21 +59,30 @@
         </template>
         <span
           v-else
-          class="o-device__current"
+          class="l-flex__auto l-flex--row center o-device__current"
         >
           当前暂无节目
         </span>
-        <auto-text
-          v-if="next"
-          class="l-flex__none o-device__next"
-          :text="nextInfo"
-        />
+      </template>
+      <template v-else>
+        <span class="l-flex__auto l-flex--row center o-device__current">
+          当前设备离线了
+        </span>
       </template>
     </div>
-    <auto-text
-      class="l-flex__none o-device__block o-device__footer"
-      :text="address"
-    />
+    <div class="l-flex__none o-device__next">
+      <auto-text
+        v-if="next"
+        :text="nextInfo"
+      />
+    </div>
+    <div class="l-flex__none l-flex--row o-device__footer">
+      <i class="l-flex__none o-device__icon el-icon-location-outline" />
+      <auto-text
+        class="l-flex__auto"
+        :text="address"
+      />
+    </div>
   </div>
 </template>
 
@@ -121,61 +123,41 @@ export default {
     name () {
       return this.device.name
     },
-    isActivated () {
-      return this.device.activate === 2
+    address () {
+      return `${this.device.remark}`
     },
     isOnline () {
       return this.device.onlineStatus === 1
     },
     statusClass () {
-      return this.isActivated
-        ? this.isOnline
-          ? 'u-color--success dark'
-          : 'u-color--error light'
-        : this.device.activate
-          ? 'u-color--primary'
-          : 'u-color--warning'
+      return this.isOnline ? 'u-color--success dark' : 'u-color--error dark'
     },
     statusTip () {
-      return this.isActivated
-        ? this.isOnline
-          ? '在线'
-          : '离线'
-        : this.device.activate
-          ? '已激活'
-          : '未激活'
-    },
-    address () {
-      return `地址：${this.device.remark}`
+      return this.isOnline ? '在线' : '离线'
     },
     styles () {
-      return this.isActivated && this.isOnline && this.shot ? { backgroundImage: `url("${this.shot}")` } : null
+      return this.isOnline && this.shot ? { backgroundImage: `url("${this.shot}")` } : null
     },
     nextInfo () {
       return this.next ? `下一场：${this.next.startDate} ${this.next.startTime} ${this.next.target.name}` : ''
     }
   },
   created () {
-    if (this.isActivated) {
-      listen(this.onMessage)
+    if (this.isOnline) {
       this.getTimeline()
-      if (this.isOnline) {
-        ScreenshotCache.watch(this.device, this.onScreenshotUpdate)
-      } else {
-        ScreenshotCache.remove(this.device.id)
-      }
+      listen(this.onMessage)
+      ScreenshotCache.watch(this.device, this.onScreenshotUpdate)
+    } else {
+      ScreenshotCache.remove(this.device.id)
     }
-    this.$timer = null
   },
   beforeDestroy () {
-    if (this.isActivated) {
+    if (this.isOnline) {
       unlisten(this.onMessage)
-      if (this.isOnline) {
-        ScreenshotCache.unwatch(this.device.id)
-      }
+      ScreenshotCache.unwatch(this.device.id)
+      clearTimeout(this.$timer)
+      this.$timer = -1
     }
-    clearTimeout(this.$timer)
-    this.$timer = -1
   },
   methods: {
     screenshot () {
@@ -279,6 +261,7 @@ export default {
       }
       this.current = current && this.getEventInfo(current, getStartDate(current, now), currentEndDate)
       this.next = next && this.getEventInfo(next, nextStartDate)
+
       clearTimeout(this.$timer)
       if (currentEndDate) {
         const delay = currentEndDate - now
@@ -308,15 +291,12 @@ export default {
 .o-device {
   display: inline-flex;
   flex-direction: column;
+  padding: 12px $spacing;
   color: $black;
   line-height: 1;
   border-radius: $radius;
   background-color: #fff;
 
-  &__block + &__block {
-    margin-top: $spacing;
-  }
-
   &__header {
     justify-self: flex-start;
     height: 24px;
@@ -324,15 +304,6 @@ export default {
     font-weight: bold;
   }
 
-  &__status {
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    margin-right: 6px;
-    border-radius: 50%;
-    background-color: currentColor;
-  }
-
   &__shot {
     display: inline-block;
     width: 24px;
@@ -344,20 +315,32 @@ export default {
     display: inline-block;
     position: relative;
     left: 16px;
-    padding: 2px 8px 2px 10px;
-    margin-left: -10px;
+    padding: 4px 8px 4px 10px;
+    margin-left: -4px;
     font-size: 12px;
     line-height: 1;
-    border-radius: 9px 0 0 9px;
+    border-radius: 4px 0 0 4px;
     background-color: currentColor;
   }
 
   &__preview {
-    padding-top: 50%;
+    margin-top: 12px;
+    padding-top: 56.25%;
+    border-radius: 4px;
+
+    &.empty {
+      background: url("~@/assets/image_no_program.svg") 0 0 / 100% 100%
+        no-repeat;
+    }
+
+    &.offline {
+      background: url("~@/assets/image_offline.svg") 0 0 / 100% 100% no-repeat;
+    }
   }
 
   &__info {
-    height: 100px;
+    margin-top: 12px;
+    height: 88px;
   }
 
   &__current {
@@ -368,7 +351,7 @@ export default {
   }
 
   &__time {
-    margin: $spacing 0 24px;
+    margin: $spacing 0 32px;
     font-size: 20px;
   }
 
@@ -388,7 +371,7 @@ export default {
     position: absolute;
     top: 100%;
     left: 50%;
-    color: $gray;
+    color: $info;
     font-size: 12px;
     font-weight: normal;
     transform: translate(-50%, 4px);
@@ -396,25 +379,23 @@ export default {
 
   &__next {
     align-self: stretch;
-    color: $gray;
+    height: 16px;
+    color: $info;
     font-size: 12px;
+    line-height: 16px;
     text-align: center;
   }
 
-  &__current + &__next {
-    margin-top: 24px;
-  }
-
   &__footer {
+    margin-top: 10px;
+    color: $blue;
     font-size: 12px;
     font-weight: bold;
-  }
-}
 
-.o-shot {
-  display: inline-block;
-  width: 480px;
-  height: 270px;
-  object-fit: contain;
+    .o-device__icon {
+      margin-right: 6px;
+      font-size: 16px;
+    }
+  }
 }
 </style>