feat(web): 新增预测管理和策略表单功能

- 添加预测管理页面和相关组件
- 实现策略表单组件，支持创建和编辑策略
- 优化表格组件，增加分页和数据加载功能
- 调整视频监控组件布局
- 修复部分组件样式问题

web/src/components/predict/predictEcharts.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="echarts">
+    <div class="chart-container">
+      <div class="content-header">
+        <div class="verline"></div>
+        <span>{{ chartOptions.title }}</span>
+      </div>
+      <div ref="chartContainer" class="echarts-content"></div>
+    </div>
+  </div>
+</template>
+<script>
+import { postReq } from '@/request/api'
+export default {
+  name: 'PredictEcharts',
+  props: {
+    chartOptions: {
+      type: Object,
+      default: () => {}, // 默认空对象
+      required: false // 非必须
+    },
+    chartData: {
+      type: Array,
+      default: () => ([]), // 默认空对象
+      required: false // 非必须
+    }
+  },
+  data() {
+    return {
+      chartInstances: [] // 存储 ECharts 实例
+    }
+  },
+  mounted() {
+    
+    
+    this.$nextTick(() => {
+      // 确保 DOM 完全渲染
+      this.initCharts()
+      window.addEventListener('resize', this.handleResize)
+    })
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+    this.chartInstances.forEach((chart) => chart && chart.dispose())
+  },
+  methods: {
+    initCharts() {
+    //   this.chartOptions.forEach((option, index) => {
+      const {title,infoKeys,dataKey,type,smooth}=this.chartOptions
+      
+      const dom = this.$refs.chartContainer
+      if (!dom) return
+
+      const chart = this.$echarts.init(dom)
+      this.chartInstances.push(chart) // 存储实例
+
+      // 设置图表配置
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: 20,
+          textStyle: {
+            color: '#fff'
+          },
+          data: infoKeys.map((info) => info.label)
+        },
+
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartData.map((item) => item.date),
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#fff' // x轴线颜色
+            }
+          },
+          
+          axisLabel: {
+            color: '#fff'
+          },
+    
+          axisTick: {
+            lineStyle: {
+              color: '#fff' // x 轴刻度线颜色
+            }
+          },
+          
+
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#fff' // y轴线颜色
+            }
+          },
+          axisLabel: {
+            color: '#fff'
+          },
+          
+          splitLine: {
+            lineStyle: {
+              color: '#A6B8DD', // 网格线颜色,
+              type: 'dashed'
+            }
+          }
+        },
+        series: infoKeys.map((info, i) => {
+          return {
+            name: info.label,
+            smooth: smooth || false,
+            type: type,
+            data: this.chartData.map((item) => item[info.key]),
+            ...info.seriesOptions,
+          }
+        })
+      })
+    //   })
+    },
+    
+    handleResize() {
+      this.chartInstances.forEach((chart) => chart && chart.resize())
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  height: 100%;
+  width: 100%;
+}
+.echarts {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  color: #fff;
+.chart-container {
+      width: 100%;
+      height: 100%;
+    }
+  & > div {
+   
+    width: 100%;
+    height: 100%;
+
+    
+
+    .content-header {
+      height: 20px;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      margin-left: 3%;
+      .verline {
+        margin-right: 10px;
+        background: linear-gradient(
+            180deg,
+            rgba(0, 230, 172, 1) 0%,
+            rgba(0, 210, 255, 1) 98.78%,
+            rgba(0, 210, 255, 1) 100%
+          ),
+          rgba(1, 223, 239, 1);
+        width: 4px;
+        height: 20px;
+        border-radius: 6px;
+      }
+    }
+    .echarts-content{
+      height: calc(100% - 20px);
+      width: 100%;
+    }
+  }
+}
+</style>