feat(web): 新增设备管理功能

- 新增设备管理页面和相关功能

web/src/components/predict/predictEcharts.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="echarts">
-    <div class="chart-container">
-      <div class="content-header">
+    <div class="chart-container" >
+      <div class="content-header" v-if="chartOptions.title">
         <div class="verline"></div>
         <span>{{ chartOptions.title }}</span>
       </div>
+      <!-- {{ chartData.ydata }} -->
+
       <div ref="chartContainer" class="echarts-content"></div>
     </div>
   </div>
 </template>
 <script>
-import { postReq } from '@/request/api'
 export default {
   name: 'PredictEcharts',
   props: {
@@ -20,8 +21,8 @@ export default {
       required: false // 非必须
     },
     chartData: {
-      type: Array,
-      default: () => ([]), // 默认空对象
+      type: Object,
+      default: () => ({}), // 默认空对象
       required: false // 非必须
     }
   },
@@ -32,12 +33,11 @@ export default {
   },
   mounted() {
     
-    
-    this.$nextTick(() => {
-      // 确保 DOM 完全渲染
-      this.initCharts()
-      window.addEventListener('resize', this.handleResize)
-    })
+    // this.$nextTick(() => {
+    //   // 确保 DOM 完全渲染
+    //   this.initCharts()
+    //   window.addEventListener('resize', this.handleResize)
+    // })
   },
   beforeUnmount() {
     window.removeEventListener('resize', this.handleResize)
@@ -45,8 +45,7 @@ export default {
   },
   methods: {
     initCharts() {
-    //   this.chartOptions.forEach((option, index) => {
-      const {title,infoKeys,dataKey,type,smooth}=this.chartOptions
+      const {infoKeys,dataKey,type,smooth}=this.chartOptions
       
       const dom = this.$refs.chartContainer
       if (!dom) return
@@ -73,12 +72,29 @@ export default {
         grid: {
           left: '3%',
           right: '3%',
-          bottom: '1%',
+          bottom: '15%',
           containLabel: true
         },
+        dataZoom: [
+          {
+            type: 'slider', // 滑动条型
+            show: true,
+            xAxisIndex: 0, // 控制第一个X轴
+            start: 0,      // 初始显示范围起点（百分比）
+            end: 20,       // 初始显示范围终点（百分比）
+            height: 20,    // 滑动条高度
+            bottom: 10     // 距离底部距离
+          },
+          {
+            type: 'inside', // 内置型（鼠标滚轮/拖拽交互）
+            xAxisIndex: 0,
+            start: 0,
+            end: 20
+          }
+        ],
         xAxis: {
           type: 'category',
-          data: this.chartData.map((item) => item.date),
+          data: this.chartData.xdata,
           axisLine: {
             show: true,
             lineStyle: {
@@ -122,7 +138,7 @@ export default {
             name: info.label,
             smooth: smooth || false,
             type: type,
-            data: this.chartData.map((item) => item[info.key]),
+            data: this.chartData.ydata[info.key],
             ...info.seriesOptions,
           }
         })