feat: support sensor list viewing

src/components/Pagination/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="c-pagination l-flex__none"
-    :class="{ hidden }"
-  >
+  <div class="c-pagination l-flex__none">
     <el-pagination
       :current-page.sync="currentPage"
       :page-size.sync="pageSize"
@@ -11,6 +8,7 @@
       :total="Number(total)"
       :layout="layout"
       :background="background"
+      hide-on-single-page
       v-bind="$attrs"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
@@ -66,9 +64,6 @@ export default {
       set (val) {
         this.$emit('update:limit', val)
       }
-    },
-    hidden () {
-      return this.total <= this.pageSizes[0]
     }
   },
   methods: {
@@ -87,10 +82,6 @@ export default {
   padding-top: $spacing;
   text-align: center;
 
-  &.hidden {
-    display: none;
-  }
-
   ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
     background-color: $blue;
   }

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

@@ -6,6 +6,11 @@
         :class="type"
       />
       <span class="l-flex__fill o-status__title u-ellipsis">{{ title }}</span>
+      <i
+        v-if="enough"
+        class="l-flex__none o-status__list el-icon-s-operation u-pointer"
+        @click="showList"
+      />
     </div>
     <div class="l-flex--row center l-flex__fill large u-color--black u-bold">
       <div
@@ -27,9 +32,36 @@
       class="l-flex__none l-flex--row o-senser__more"
     >
       <div class="l-flex__none">{{ item.time }}</div>
-      <div class="l-flex__none o-senser__name">传感器{{ item.key }}</div>
+      <div class="l-flex__none o-senser__name">{{ item.name }}</div>
       <div class="l-flex__fill o-senser__value">{{ item.value }}</div>
     </div>
+    <el-dialog
+      :title="listTitle"
+      :visible.sync="show"
+      custom-class="c-dialog"
+    >
+      <c-table
+        :curr="options"
+        @pagination="getSensors"
+      >
+        <el-table-column
+          prop="time"
+          label="采集时间"
+          align="center"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="name"
+          label="名称"
+          align="center"
+        />
+        <el-table-column
+          prop="value"
+          :label="title"
+          align="center"
+        />
+      </c-table>
+    </el-dialog>
   </div>
 </template>
 
@@ -56,25 +88,36 @@ export default {
   },
   data () {
     return {
-      list: []
+      list: [],
+      show: false,
+      options: null
     }
   },
   computed: {
+    listTitle () {
+      return `${this.title}传感器详情`
+    },
+    sorted () {
+      return this.list.slice().sort((a, b) => b.sensorValue - a.sensorValue)
+    },
     tipColor () {
       return this.list.length ? this.color : ''
     },
     tip () {
-      return this.list.length ? this.list[0].value : '未知'
+      return this.list.length ? this.sorted[0].value : '未知'
     },
     sensor () {
       return this.list.length
         ? this.list.length === 1
-          ? this.list[0].time
-          : `${this.list[0].time} 传感器${this.list[0].key}`
+          ? this.sorted[0].time
+          : `${this.sorted[0].time} 传感器${this.sorted[0].key}`
         : null
     },
     more () {
-      return this.list.length > 1 ? this.list.slice(1, 3) : []
+      return this.list.length > 1 ? this.sorted.slice(1, 3) : []
+    },
+    enough () {
+      return this.list.length > 3
     }
   },
   created () {
@@ -86,6 +129,25 @@ export default {
   methods: {
     onUpdate (list) {
       this.list = list
+      if (this.show) {
+        this.options.totalCount = list.length
+        this.getSensors()
+      }
+    },
+    showList () {
+      this.options = {
+        list: this.list.slice(0, 10),
+        totalCount: this.list.length,
+        params: {
+          pageNum: 1,
+          pageSize: 10
+        }
+      }
+      this.show = true
+    },
+    getSensors () {
+      const { pageNum, pageSize } = this.options.params
+      this.options.list = this.list.slice((pageNum - 1) * pageSize, pageNum * pageSize)
     }
   }
 }

src/views/device/detail/monitor.js

@@ -182,9 +182,11 @@ function transformValue (type, value, unit) {
 }
 
 function transform (type, arr) {
-  return arr.sort((a, b) => b.sensorValue - a.sensorValue).map(({ sensorAddr, sensorValue, sensorValueUnit, logDate }) => {
+  return arr.map(({ sensorAddr, sensorValue, sensorValueUnit, logDate }) => {
     return {
       key: sensorAddr,
+      name: `传感器${sensorAddr}`,
+      sensorValue,
       value: transformValue(type, sensorValue, sensorValueUnit),
       time: parseTime(logDate * 1000, '{y}.{m}.{d} {h}:{i}:{s}')
     }