feat: sensor dashboard

src/views/device/detail/components/SensorDashboardDialog/api.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getSensorChart (params) {
+  return request({
+    url: '/device/sensorChart',
+    method: 'GET',
+    params
+  })
+}

src/views/device/detail/components/SensorDashboardDialog/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <c-dialog
+    ref="dialog"
+    title="传感器"
+    size="xl fixed"
+  >
+    <template #default>
+      <div
+        v-loading="loading"
+        class="l-flex__fill l-flex--col"
+      >
+        <div class="l-flex--row c-sibling-item--v">
+          <el-date-picker
+            v-model="times"
+            class="c-sibling-item"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :picker-options="pickerOptions"
+            clearable
+            @change="onChange"
+          />
+          <span class="c-sibling-item u-color--info">未选择时间时为24小时内的数据</span>
+        </div>
+        <warning
+          v-if="error"
+          class="l-flex__fill c-sibling-item--v"
+          @click="onChange"
+        />
+        <iframe
+          v-else-if="!loading"
+          ref="chart"
+          class="l-flex__fill c-sibling-item--v"
+          :src="url"
+          frameborder="0"
+        />
+      </div>
+    </template>
+  </c-dialog>
+</template>
+
+<script>
+import { getSensorChart } from './api'
+
+export default {
+  name: 'SensorDashboard',
+  data () {
+    return {
+      loading: false,
+      error: false,
+      pickerOptions: {
+        disabledDate: this.isDisableDate
+      },
+      times: ['', ''],
+      url: ''
+    }
+  },
+  methods: {
+    isDisableDate (date) {
+      return date > Date.now()
+    },
+    show (deviceId) {
+      this.deviceId = deviceId
+      this.onChange()
+      this.$refs.dialog.show()
+    },
+    onChange () {
+      this.loading = true
+      this.error = false
+      getSensorChart({
+        deviceId: this.deviceId,
+        ...(this.times?.[0] && this.times?.[1]
+          ? {
+            startTime: new Date(this.times[0]).getTime(),
+            endTime: new Date(this.times[1]).getTime()
+          }
+          : {
+            enabled: 1,
+            refreshInterval: 30
+          })
+      }).then(
+        ({ data: { url } }) => {
+          this.url = url
+        },
+        () => {
+          this.error = true
+        }
+      ).finally(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>

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

@@ -139,8 +139,8 @@ export default {
       getSensorRecords({
         deviceId: this.deviceId,
         sensorType: this.type,
-        startTime: parseTime(now - 30000, '{y}-{m}-{d} {h}:{i}:{s}'),
-        endTime: parseTime(now, '{y}-{m}-{d} {h}:{i}:{s}')
+        startTime: now - 30000,
+        endTime: now
       }, { custom: true }).then(({ data }) => {
         this.list = this.transfromData(data)
         this.$refs.tableDialog?.getTable()?.pageTo()
@@ -167,7 +167,7 @@ export default {
       return {
         port,
         value,
-        time,
+        time: parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}'),
         info: this.transformValue(type, value)
       }
     },

src/views/device/detail/index.vue

@@ -36,9 +36,19 @@
         <el-tab-pane
           v-for="tab in tabs"
           :key="tab.key"
-          :label="tab.label"
           :name="tab.key"
-        />
+        >
+          <template #label>
+            <span class="c-sibling-item">{{ tab.label }}</span>
+            <template v-if="tab.icon">
+              <i
+                :class="tab.icon"
+                class="c-sibling-item near has-active"
+                @click="tab.on"
+              />
+            </template>
+          </template>
+        </el-tab-pane>
       </el-tabs>
       <warning
         v-else-if="!loading"
@@ -57,6 +67,7 @@
         :online="isOnline"
       />
     </div>
+    <sensor-dashboard-dialog ref="sensorDashboardDialog" />
   </wrapper>
 </template>
 
@@ -75,6 +86,7 @@ import DeviceInvoke from './components/DeviceInvoke'
 import DeviceExternal from './components/DeviceExternal'
 import Sensors from './components/external/Sensors'
 import DeviceTakeOver from './components/DeviceTakeOver'
+import SensorDashboardDialog from './components/SensorDashboardDialog'
 
 export default {
   name: 'DeviceDetail',
@@ -85,7 +97,8 @@ export default {
     DeviceInvoke,
     DeviceExternal,
     Sensors,
-    DeviceTakeOver
+    DeviceTakeOver,
+    SensorDashboardDialog
   },
   data () {
     return {
@@ -100,7 +113,7 @@ export default {
         { key: 'DeviceInfo', label: '设备信息' },
         { key: 'DeviceRuntime', label: '运行状态' },
         this.$store.getters.isGroupAdmin || this.$store.getters.isOperator ? { key: 'DeviceInvoke', label: '远程操控' } : null,
-        { key: 'Sensors', label: '传感器' },
+        { key: 'Sensors', label: '传感器', icon: 'el-icon-date', on: this.onShowSensorTables },
         { key: 'DeviceExternal', label: '全链路监测' },
         { key: 'DeviceAlarm', label: '设备告警' },
         __TAKEOVER__ && this.$store.getters.isGroupAdmin ? { key: 'DeviceTakeOver', label: '接管' } : null
@@ -148,6 +161,9 @@ export default {
     stop()
   },
   methods: {
+    onShowSensorTables () {
+      this.$refs.sensorDashboardDialog.show(this.deviceId)
+    },
     onBack () {
       switch (this.$route.name) {
         case 'device-management-detail':