10/10

1. 设备管理界面完成
2. 用户管理界面完成
3. 会话列表完成

src/views/index/compontents/tvoc.vue

@@ -1,44 +1,90 @@
 <script lang="ts" name="Tvoc" setup>
 import Echarts from '@/components/Echarts/index.vue';
-
-const options = {
-  xAxis: {
-    type: 'category',
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-  },
-  yAxis: {
-    type: 'value'
-  },
-  series: [
-    {
-      data: [150, 230, 224, 218, 135, 147, 260],
-      type: 'line'
-    }
-  ]
-};
-
+import {dashboardTvoc} from "@/api/system/dashboard";
+import {ref, computed} from 'vue';
 
 const list = [
-  {
-    label: '24小时',
-    value: 24,
-  },
-  {
-    label: '7天',
-    value: 7,
-  },
-  {
-    label: '30天',
-    value: 30,
-  },
-  // +30 300, 99/1000 69, 59/20g/500
-]
+  {label: '24小时', value: 24},
+  {label: '7天', value: 7},
+  {label: '30天', value: 30},
+];
 const activeDay = ref(24);
+const loading = ref(false);
+
+const dayEnum = {
+  "24": '24h',
+  '7': '7d',
+  '30': '30d'
+}
+const points = ref<any[]>([])
+
+const options = computed(() => {
+  const xData = points.value.map(item => item.time)
+  const yData = points.value.map(item => item.value)
+  return {
+    tooltip: {
+      trigger: 'axis',
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      top: '12%',
+      bottom: '18%',
+    },
+    xAxis: {
+      type: 'category',
+      data: xData
+    },
+    yAxis: {
+      type: 'value',
+      name: 'TVOC'
+    },
+    series: [
+      {
+        data: yData,
+        type: 'line',
+        smooth: true,
+      }
+    ]
+  }
+})
 
 function changeActive(val: number) {
   activeDay.value = val;
+  init()
 }
 
+function init() {
+  loading.value = true
+  dashboardTvoc(dayEnum[activeDay.value])
+    .then(res => {
+      points.value = res.data.points.map(item => {
+        if (activeDay.value === 24) {
+          const yearMonthDay = item.time.split(' ')[0]
+          const [_, month, day] = yearMonthDay.split('-')
+          return {
+            ...item,
+            value: item.value || 0,
+            time: `${month}-${day} ${item.label}`
+          }
+        } else {
+          return {
+            ...item,
+            value: item.value || 0,
+            time: item.label
+          }
+        }
+      })
+    })
+    .catch(err => {
+      console.error('TVOC接口请求失败：', err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+init()
 </script>
 
 <template>
@@ -46,14 +92,19 @@ function changeActive(val: number) {
     <div class="TvocNavBox">
       <span>平均TVOC原始值</span>
       <div class="actions">
-        <div v-for="(item,index) in list" :key="index" :class="{
-            active: activeDay === item.value,
-          }" class="actionItem" @click="changeActive(item.value)">{{ item.label }}
+        <div
+          v-for="(item,index) in list"
+          :key="index"
+          :class="{ active: activeDay === item.value }"
+          class="actionItem"
+          @click="changeActive(item.value)"
+        >
+          {{ item.label }}
         </div>
       </div>
     </div>
     <div class="TvocChartBox">
-      <Echarts :options="options"></Echarts>
+      <Echarts :options="options"/>
     </div>
   </div>
 </template>
@@ -62,7 +113,7 @@ function changeActive(val: number) {
 .TvocBox {
   padding: 25px;
   height: 372px;
-  border-radius: 16px 16px 16px 16px;
+  border-radius: 16px;
   border: 1px solid rgba(238, 240, 243, 1);
 
   .TvocNavBox {
@@ -74,8 +125,6 @@ function changeActive(val: number) {
     span {
       height: 22px;
       line-height: 22px;
-      border-radius: 0;
-      background-color: rgba(0, 0, 0, 0);
       color: rgba(17, 24, 39, 1);
       font-size: 16px;
     }
@@ -83,7 +132,7 @@ function changeActive(val: number) {
     .actions {
       width: 175px;
       height: 36px;
-      border-radius: 8px 8px 8px 8px;
+      border-radius: 8px;
       background-color: rgba(243, 245, 248, 1);
       display: flex;
       align-items: center;
@@ -96,10 +145,11 @@ function changeActive(val: number) {
         padding: 7px 12px;
         color: rgba(107, 114, 128, 1);
         font-size: 12px;
+        cursor: pointer;
 
         &.active {
           color: rgba(37, 99, 235, 1);
-          border-radius: 6px 6px 6px 6px;
+          border-radius: 6px;
           background-color: rgba(255, 255, 255, 1);
         }
       }