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

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

web/src/views/LoginView.vue

@@ -10,9 +10,9 @@
       <div class="main-title">能源站监控与运行管理系统</div>
       <div class="login-content">
         <div class="title" style="">账号登录</div>
-        <a-form ref="ruleForm" :model="form" :rules="rules">
-          <a-form-item label="" name="user">
-            <a-input v-model:value="form.user" placeholder="请输入账号" autocomplete>
+        <a-form ref="ruleForm" :model="form" :rules="rules" >
+          <a-form-item label="" name="account">
+            <a-input v-model:value="form.account" placeholder="请输入账号" autocomplete>
               <template #prefix>
                 <user-outlined />
               </template>
@@ -39,7 +39,7 @@
 </template>
 <script>
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
-
+import { postReq,getReq } from '@/request/api.js'
 export default {
   name: 'LoginView',
   components: {
@@ -49,11 +49,11 @@ export default {
   data() {
     return {
       form: {
-        user: 'admin',
+        account: 'admin',
         passwd: '123456'
       },
       rules: {
-        user: [
+        account: [
           {
             required: true,
             message: '请输入账号'
@@ -71,27 +71,30 @@ export default {
   },
   methods: {
     async login() {
-      this.$refs.ruleForm.validate(async (valid) => {
-        if (valid) {
-          this.loading = true
-          try {
-            const res = await this.$http.post('/login', this.form)
-            this.loading = false
-            if (res.code === 200) {
-              this.$message.success('登录成功')
-              localStorage.setItem('token', res.token)
-              this.$router.push('/main')
-            } else {
-              this.$message.error(res.message || '登录失败')
-            }
-          } catch (error) {
-            this.loading = false
-            this.$message.error('请求失败，请稍后重试')
-          }
-        } else {
-          // console.log("表单验证失败");
-        }
-      })
+      try {
+        const values = await this.$refs.ruleForm.validateFields()
+        const res = await getReq('/login',this.form )
+        this.loading = false
+        console.log(res);
+        
+        // if (res.code === 200) {
+        this.$message.success('登录成功')
+        localStorage.setItem('token', res.token)
+        this.$router.push('/')
+        // } else {
+        //   this.$message.error(res.message || '登录失败')
+        // }
+      } catch (error) {
+        console.log(error);
+        
+        this.loading = false
+        this.$message.error('请求失败，请稍后重试')
+        
+        
+      }
+      
+      
+    
     }
   }
 }

web/src/views/MainView.vue

@@ -47,15 +47,20 @@ export default {
       menuList: [
         {
           name: '系统总览',
-          icon: 'icon-xitongguanli'
+          path:'/home'
         },
         {
           name: '运行监控',
-          path: '/main/monitor'
+          path: '/monitor'
+        },
+        {
+          
+          name: '预测管理',
+          path: '/predict'
         },
         {
           name: '统计分析',
-          path: '/main/statisticalAnalysis'
+          path: '/statisticalAnalysis'
         },
         {
           name: '系统管理',

web/src/views/monitor.vue

@@ -4,36 +4,43 @@
       <div class="left">
         <div class="search-item">
           <span>场站切换</span>
-          <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
+          <a-select v-model:value="selectStation" style="width: 220px">
+            <a-select-option v-for="station in stations" :value="station['station_id']"
+              >{{ station.name }}
+            </a-select-option>
+          </a-select>
         </div>
       </div>
       <div class="right">
         <div class="search-item">
           <span>运行模式</span>
-          <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
+          <a-select v-model:value="value" style="width: 220px">
+            <a-select-option value="lucy">Lucy</a-select-option>
+          </a-select>
         </div>
         <div class="search-item">
-          <span>策略名称</span>
-          <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
-        </div>
-        <div class="search-item">
-          <a-button type="primary">调控</a-button>
+          <a-button type="primary">下发</a-button>
         </div>
       </div>
     </div>
     <div class="content">
       <div class="stations">
-        <div class="station-item" v-for="station in stations" :key="station.name" @click="()=>currentKey=station.name" :class="currentKey==station.name?'active':''">
-          <span class="name">{{ station.name }}</span>
-          <span class="des">总功率：{{ station.power }} W</span>
-          <span class="des">数量：{{ station.num }}</span>
+        <div
+          class="station-item"
+          v-for="system in systems"
+          :key="system.name"
+          @click="chooseStation(system)"
+          :class="systemType == system.systemType ? 'active' : ''"
+        >
+          <span class="name">{{ system.name }}</span>
+          <span class="des">边缘网关：{{ system.power }} W</span>
+          <span class="des">总有功功率(台区)：{{ system.num }}</span>
         </div>
       </div>
       <div class="container">
-        <device v-if="stationType" />
-        <videos v-else />
+        <videos v-if="systemType == 4" />
+        <device v-else :station-id="selectStation" :system-type="systemType"/>
       </div>
-      
     </div>
   </div>
 </template>
@@ -41,6 +48,7 @@
 <script>
 import device from '@/components/monitor/device.vue'
 import videos from '@/components/monitor/videos.vue'
+import { postReq, getReq } from '@/request/api'
 
 export default {
   name: 'MonitorView',
@@ -50,63 +58,64 @@ export default {
   },
   data() {
     return {
-      currentKey:'储能系统1',
-      stationType: 1,
+      // currentKey: '储能系统',
+      systemType: 1,
       value: [],
-      options: [
+      stations: [],
+      selectStation:'',
+      systems: [
         {
-          value: 'zhejiang',
-          label: 'Zhejiang',
-          children: [
-            {
-              value: 'hangzhou',
-              label: 'Hangzhou',
-              children: [
-                {
-                  value: 'xihu',
-                  label: 'West Lake'
-                }
-              ]
-            }
-          ]
+          name: '储能系统',
+          power: 60,
+          num: 62,
+          systemType: 1
         },
         {
-          value: 'jiangsu',
-          label: 'Jiangsu',
-          children: [
-            {
-              value: 'nanjing',
-              label: 'Nanjing',
-              children: [
-                {
-                  value: 'zhonghuamen'
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      stations: [
-        {
-          name: '储能系统1',
+          name: '充电系统',
           power: 60,
-          num: 62
+          num: 62,
+          systemType: 2
         },
         {
-          name: '储能系统2',
+          name: '光伏系统',
           power: 60,
-          num: 62
+          num: 62,
+          systemType: 3
+        },
+        {
+          name: '安防系统',
+          power: 60,
+          num: 62,
+          systemType: 4
         }
         // {
-        //   name: "储能系统3",
-        //   power: 60,
-        //   num: 62
-        // },
-        // {
         //   name: "储能系统4",
         // }
       ]
     }
+  },
+  mounted() {
+    this.getStations()
+  },
+  methods: {
+    //查询场站列表
+    async getStations() {
+      try {
+        const res = await getReq('/queryStationList', { page: 0, 'page_size': 10000 })
+
+        console.log(res)
+        this.stations = res.data
+        this.selectStation=this.stations[0]['station_id']
+      } catch (error) {
+        this.stations = []
+        this.selectStation=''
+        this.$message.error(error.message)
+      }
+    },
+    
+    chooseStation(system) {
+      this.systemType = system.systemType
+    }
   }
 }
 </script>
@@ -157,12 +166,12 @@ export default {
         width: calc(100% - 30px);
         margin: 0 15px 15px 15px;
         border-radius: 12px;
-        
+
         display: flex;
         flex-direction: column;
         color: #fff;
         padding: 10px 15px;
-          cursor: pointer;
+        cursor: pointer;
 
         .name {
           font-size: 20px;
@@ -175,13 +184,13 @@ export default {
           line-height: 40px;
         }
       }
-      .active{
+      .active {
         background: $bg3-color;
       }
     }
     .container {
-        width: 87%;
-        display: flex;
+      width: 87%;
+      display: flex;
     }
   }
 }

web/src/views/predict.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="predict">
+    <div class="top">
+        <predictEcharts :chart-options="chartOptions[0]" :chart-data="chartData"/>
+    </div>
+    <div class="bottom">
+        <div class="item">
+            <predictEcharts :chart-options="chartOptions[1]" :chart-data="chartData"/>
+        </div>
+        <div class="item">
+            <predictEcharts :chart-options="chartOptions[2]" :chart-data="chartData"/>
+        </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import predictEcharts from '@/components/predict/predictEcharts.vue';
+export default {
+  name: '',
+  components: {predictEcharts},
+  props: {},
+  data() {
+    return {
+      chartOptions:[ {
+        title: '储能充放电预测',
+        type: 'line',
+        smooth:false,
+        dataKey: 'chargeDischarge',
+        infoKeys: [
+     
+          {
+            key: 'key1',
+            label: '电压',
+            seriesOptions:{
+              symbol: 'circle',
+              symbolSize: 8,
+              itemStyle: {
+                color: '#00FDF9' // 充电电量线条颜色
+              },
+              lineStyle: {
+                color: '#00FDF9' // 充电电量线条颜色
+              }
+            }
+            
+          },
+          {
+            key: 'key2',
+            label: '电流',
+           
+            seriesOptions:{
+              symbol: 'circle',
+              symbolSize: 8,
+              itemStyle: {
+                color: '#3E7EEF' // 充电电量线条颜色
+              },
+              lineStyle: {
+                color: '#3E7EEF' // 充电电量线条颜色
+              }
+            }
+          }
+        ]
+      },
+      {
+        
+        title: '充电负荷预测',
+        type: 'line',
+        smooth:false,
+        dataKey: 'chargeDischarge',
+        infoKeys: [
+     
+          {
+            key: 'key1',
+            label: '电压',
+            seriesOptions:{
+              symbol: 'circle',
+              symbolSize: 8,
+              itemStyle: {
+                color: '#00FDF9' // 充电电量线条颜色
+              },
+              lineStyle: {
+                color: '#00FDF9' // 充电电量线条颜色
+              }
+            }
+            
+          },
+          {
+            key: 'key2',
+            label: '电流',
+           
+            seriesOptions:{
+              symbol: 'circle',
+              symbolSize: 8,
+              itemStyle: {
+                color: '#3E7EEF' // 充电电量线条颜色
+              },
+              lineStyle: {
+                color: '#3E7EEF' // 充电电量线条颜色
+              }
+            }
+          }
+        ]
+      },
+      {
+        
+        title: '光伏发电预测',
+        type: 'line',
+        smooth:false,
+        dataKey: 'chargeDischarge',
+        infoKeys: [
+     
+          {
+            key: 'key1',
+            label: '电压',
+            seriesOptions:{
+              symbol: 'circle',
+              symbolSize: 8,
+              itemStyle: {
+                color: '#00FDF9' // 充电电量线条颜色
+              },
+              lineStyle: {
+                color: '#00FDF9' // 充电电量线条颜色
+              }
+            }
+            
+          },
+          {
+            key: 'key2',
+            label: '电流',
+           
+            seriesOptions:{
+              symbol: 'circle',
+              symbolSize: 8,
+              itemStyle: {
+                color: '#3E7EEF' // 充电电量线条颜色
+              },
+              lineStyle: {
+                color: '#3E7EEF' // 充电电量线条颜色
+              }
+            }
+          }
+        ]
+      },
+      ],
+     
+      chartData: [
+        {
+          date: '2025-08-30',
+          key1: 10,
+          key2: 10,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-29',
+          key1: 8,
+          key2: 5,
+          key3: 5,
+          key4: 7
+        },
+        {
+          date: '2025-08-28',
+          key1: 10,
+          key2: 10,
+          key3: 20,
+          key4: 4
+        },
+        {
+          date: '2025-08-27',
+          key1: 10,
+          key2: 10,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-26',
+          key1: 10,
+          key2: 5,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-25',
+          key1: 10,
+          key2: 5,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-24',
+          key1: 10,
+          key2: 6,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-23',
+          key1: 10,
+          key2: 7,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-22',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-21',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-20',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-19',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-18',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        },
+        {
+          date: '2025-08-17',
+          key1: 10,
+          key2: 0,
+          key3: 15,
+          key4: 5
+        }
+      ],
+        
+      
+    }
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.predict {
+  width: 100%;
+  height: 100%;
+  background: $bg1-color;
+  border-radius: 15px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  .top,
+  .bottom {
+    flex: 1;
+    width: 100%;
+    height: calc(50% - 10px);
+
+  }
+  .bottom {
+    display: flex;
+  }
+  .top{
+    background-color: rgba(33, 105, 195, 0.12);
+    padding: 20px 5px;
+     border-radius: 15px;
+  }
+  .item{
+    background-color: rgba(33, 105, 195, 0.12);
+    padding: 20px 5px;
+    flex: 1;
+     border-radius: 15px;
+
+    &:nth-child(2){
+        margin-left: 20px;
+    }
+  }
+}
+</style>

web/src/views/system/policy.vue

@@ -1,46 +1,209 @@
 <template>
   <div class="policy">
-<searchBox :btn-option-list="btnOptionList" @onSearch="onSearch" @operateForm="operateForm"/>
+    <searchBox :btn-option-list="btnOptionList" @onSearch="onSearch" @operateForm="operateForm" />
+    <div class="content-table">
+       
+      <ComTable
+        :columns="columns"
+        :table-data="tableData"
+        @handlePagesizeChange="handlePagesizeChange"
+        ref="comTable"
+        :table-option="tableOption"
+        :page-option="pageOption"
+        :table-h="tableH"
+      >
+      <template #type="record"> 
+        <div>{{record.type}}</div>
+       
+      </template>
+      <template #action >
+        <a-button  type="primary" size="small" @click="operateForm('edit')" style="margin-left: 10px">查看</a-button>
+        <a-button type="primary" size="small" @click="operateForm('edit')" class="btn-edit" style="margin-left: 10px">修改</a-button>
+        <a-button  type="primary" size="small" @click="operateForm('edit')" class="btn-del" style="margin-left: 10px">删除</a-button>
+
+        
+    </template>
+    </ComTable>
+    </div>
+  </div>
+  <div>
+    <a-modal v-model:open="formModal"  @ok="handleOk" width="70%">
+      <policyForm/>
+    </a-modal>
   </div>
 </template>
 
 <script>
-import searchBox from '@/components/SearchBox.vue'
+import policyForm from '@/components/system/policyForm.vue'
+import {getReq} from '@/request/api'
 export default {
   name: '',
-  components:{searchBox
-  },
-  props: {
-
-  },
-  data() { 
+  components: { policyForm },
+  props: {},
+  data() {
     return {
-      btnOptionList:[
-        {label:'新增',icon:'icon-tianjia',type:'add'},
-        {label:'删除',icon:'icon-tianjia',type:'del'}
-
-      ]
+      formModal:true,
+      btnOptionList: [
+        { label: '新增', icon: 'icon-tianjia', type: 'add' },
+        { label: '删除', icon: 'icon-tianjia', type: 'del' }
+      ],
+      columns: [
+        {
+          title: '策略ID',
+          dataIndex: 'policyId',
+          key: 'policyId',
+          width: 120,
+          ellipsis: true
+        },
+        {
+          title: '策略名称',
+          dataIndex: 'name',
+          key: 'name',
+          width: 120,
+          ellipsis: true
+        },
+        {
+          title: '策略类型',
+          dataIndex: 'type',//策略类型：1：削峰套利；2：需求响应；3：自发自用
+          key: 'type',
+          width: 120,
+          ellipsis: true,
+          scopedSlots: { customRender: 'type' }
+        },
+        {
+          title: '策略描述',
+          dataIndex: 'describe',
+          key: 'describe',
+          width: 120,
+          ellipsis: true
+        },
+        {
+          title: '策略参数',
+          dataIndex: 'value',
+          key: 'value',
+          width: 120,
+          ellipsis: true
+        },
+        {
+          title: '是否启用',
+          dataIndex: 'isOpen',
+          key: 'isOpen',
+          width: 120,
+          ellipsis: true,
+          scopedSlots: { customRender: 'isOpen' }
+        },
+    
+        {
+          title: '操作',
+          dataIndex: 'action',
+          key: 'action',
+          width: 150,
+          ellipsis: true,
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      tableData:[{
+        policyId: 'P001',
+        name: '峰谷套利策略',
+        type: 1, // 削峰套利
+        describe: '利用峰谷电价差进行储能充放电优化',
+        value: '峰时段: 08:00-22:00, 谷时段: 22:00-08:00',
+        isOpen: true,
+        action: 'edit|delete'
+      },
+      {
+        policyId: 'P002',
+        name: '需求响应策略',
+        type: 2, // 需求响应
+        describe: '参与电网调峰的需求侧响应方案',
+        value: '响应阈值: 80%, 持续时间: 2小时',
+        isOpen: false,
+        action: 'edit|delete'
+      },
+      {
+        policyId: 'P003',
+        name: '光伏自发自用',
+        type: 3, // 自发自用
+        describe: '优先使用光伏发电，余电上网',
+        value: '自用比例: 90%, 上网比例: 10%',
+        isOpen: true,
+        action: 'edit|delete'
+      },
+      {
+        policyId: 'P004',
+        name: '工业削峰策略',
+        type: 1, // 削峰套利
+        describe: '通过储能系统平抑工业用电高峰',
+        value: '削峰容量: 500kWh, 持续时间: 4小时',
+        isOpen: true,
+        action: 'edit|delete'
+      },
+      {
+        policyId: 'P005',
+        name: '商业综合体响应',
+        type: 2, // 需求响应
+        describe: '商业建筑参与电网需求响应',
+        value: '可中断负荷: 200kW, 响应次数: 3次/月',
+        isOpen: false,
+        action: 'edit|delete'
+      }],
+      tableOption:{},
+      pageOption:{
+        page:1,
+        pageSize:10,
+      },
+      tableH:''
     }
   },
   mounted() {
-
+    this.getTableList()
   },
-  methods:{
-    onSearch(data){
+  methods: {
+    async getTableList(){
+      try {
+        const res = await getReq('/queryPolicyList', {
+          page: this.pageOption.page,
+          'page_size': this.pageOption.pageSize
+        })
+      } catch (error) {
+        console.log(error);
+        
+        
+      }
+    },
+    handleOk(){
+      this.formModal=false
+    },
+    onSearch(data) {
       console.log(data)
     },
-    operateForm(type){
-      console.log(type  )
-
+    operateForm(type) {
+      console.log(type)
+      switch (type){
+      case 'add':
+        this.formModal= true
+        break;
+      
+      default:
+        break;
+      }
+      
     },
+    handlePagesizeChange(data) {
+      console.log(data)
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.policy{
-    width: 100%;
-    height: 100%;
-    padding: 0 15px;
+.policy {
+  width: 100%;
+  height: 100%;
+  padding: 0 15px;
+  .content-table {
+  width: 100%;
+  height: calc(100% - 92px );
 }
-</style>
+}
+</style>