feat: add device card

src/views/dashboard/components/Device.vue

@@ -1,37 +1,47 @@
 <template>
   <div class="o-device has-padding">
     <div class="l-flex__none l-flex--row o-device__header">
-      <i class="l-flex__none o-device__status u-color--success dark" />
-      <auto-text
-        class="l-flex__fill"
-        text="深圳市宝安区海天路15号卓越宝中时代广场"
-      />
-      <span class="l-flex__none o-device__tip">在线</span>
-    </div>
-    <div class="l-flex__fill l-flex--col u-text-center">
-      <auto-text
-        class="l-flex__none o-device__current"
-        text="深圳市宝安区海天路15号卓越宝中时代广场"
+      <i
+        class="l-flex__none o-device__status dark"
+        :class="statusClass"
       />
-      <div class="l-flex__fill o-device__time">
-        <span class="o-device__hms">
-          10:00
-          <span class="o-device__ymd">2021.10.27</span>
-        </span>
-        <span class="o-device__line" />
-        <span class="o-device__hms">
-          10:00
-          <span class="o-device__ymd">2021.10.27</span>
-        </span>
-      </div>
       <auto-text
-        class="l-flex__none o-device__next"
-        text="下一场:深圳市宝安区海天路15号卓越宝中时代广场"
+        class="l-flex__fill"
+        :text="name"
       />
+      <span
+        class="l-flex__none o-device__tip"
+        :class="statusType"
+      >
+        {{ statusTip }}
+      </span>
     </div>
+    <!-- <div class="l-flex__fill l-flex--col u-text-center">
+      <template v-if="online">
+        <auto-text
+          class="l-flex__none o-device__current"
+          text="深圳市宝安区海天路15号卓越宝中时代广场"
+        />
+        <div class="l-flex__fill o-device__time">
+          <span class="o-device__hms">
+            10:00
+            <span class="o-device__ymd">2021.10.27</span>
+          </span>
+          <span class="o-device__line" />
+          <span class="o-device__hms">
+            10:00
+            <span class="o-device__ymd">2021.10.27</span>
+          </span>
+        </div>
+        <auto-text
+          class="l-flex__none o-device__next"
+          text="下一场:深圳市宝安区海天路15号卓越宝中时代广场"
+        />
+      </template>
+    </div> -->
     <auto-text
       class="l-flex__none o-device__footer"
-      text="位置：深圳市宝安区海天路15号卓越宝中时代广场"
+      :text="address"
     />
   </div>
 </template>
@@ -45,8 +55,29 @@ export default {
     AutoText
   },
   props: {
-    type: {
-      type: String
+    device: {
+      type: Object
+    }
+  },
+  computed: {
+    name () {
+      return this.device.name
+    },
+    online () {
+      return this.device.activate && this.device.onlineStatus === 1
+    },
+    statusClass () {
+      return this.online ? 'u-color--success' : this.device.activate ? 'u-color--error' : 'u-color--warning'
+    },
+    statusType () {
+      return this.online ? '' : this.device.activate ? 'error' : 'warning'
+    },
+    statusTip () {
+      return this.online ? '在线' : this.device.activate ? '离线' : '未激活'
+    },
+    address () {
+      // return `位置：${this.device.address}`
+      return `备注：${this.device.remark}`
     }
   }
 }
@@ -56,14 +87,14 @@ export default {
 .o-device {
   display: inline-flex;
   flex-direction: column;
-  height: 220px;
+  // height: 220px;
   color: $black;
   line-height: 1;
   border-radius: 8px;
   background-color: #fff;
 
   &__header {
-    margin-bottom: 24px;
+    // margin-bottom: 24px;
     font-size: 16px;
     font-weight: bold;
   }
@@ -88,6 +119,14 @@ export default {
     line-height: 1;
     border-radius: 9px 0 0 9px;
     background-color: $success--dark;
+
+    &.error {
+      background-color: $error;
+    }
+
+    &.warning {
+      background: $warning;
+    }
   }
 
   &__current {

src/views/dashboard/index.vue

@@ -52,7 +52,7 @@
       </div>
       <i
         class="c-count__refresh el-icon-refresh u-pointer"
-        @click="refreshDevices"
+        @click="refresh"
       />
     </div>
     <div class="c-dashboard__block c-cards">
@@ -90,13 +90,24 @@
       />
     </div>
     <div class="c-dashboard__block c-devices">
-      <device />
+      <device
+        v-for="item in deviceOptions.list"
+        :key="item.id"
+        :device="item"
+      />
+    </div>
+    <div
+      v-if="!deviceOptions.loaded"
+      class="c-dashboard__block u-text-center"
+    >
+      <i class="el-icon-loading" />
     </div>
   </div>
 </template>
 
 <script>
 import {
+  getDevices,
   getProducts,
   getDeviceStatistics
 } from '@/api/device'
@@ -120,11 +131,16 @@ export default {
         firstLoadSize: 999
       },
       product: '',
-      device: { loading: false }
+      device: { loading: false },
+      deviceOptions: {
+        list: [],
+        loaded: false
+      }
     }
   },
   created () {
     this.refreshDevices()
+    this.getDevices()
   },
   methods: {
     _getProducts () {
@@ -152,6 +168,11 @@ export default {
     },
     onProductChange () {
       this.refreshDevices(true)
+      this.getDevices(true)
+    },
+    refresh () {
+      this.refreshDevices()
+      this.getDevices(true)
     },
     refreshDevices (force) {
       if (!force && this.device.loading) {
@@ -174,6 +195,42 @@ export default {
       }).finally(() => {
         deviceOption.loading = false
       })
+    },
+    sort (a, b) {
+      if (a.activate && a.onlineStatus === 1) {
+        return -1
+      }
+      if (b.activate && b.onlineStatus === 1) {
+        return 1
+      }
+      return b.activate - a.activate
+    },
+    getDevices (force) {
+      if (force) {
+        this.deviceOptions = {
+          list: [],
+          loaded: false
+        }
+      }
+      const options = this.deviceOptions
+      getDevices({
+        pageSize: 99,
+        pageNum: 1,
+        productId: this.product
+      }).then(({ data, totalCount }) => {
+        if (totalCount !== data.length) {
+          return getDevices({
+            pageSize: totalCount,
+            pageNum: 1,
+            productId: this.product
+          }).then(({ data }) => data)
+        }
+        return data
+      }).then(list => {
+        options.list = list.sort(this.sort)
+      }).finally(() => {
+        options.loaded = true
+      })
     }
   }
 }