各模块样式等布局优化，运行分析接口联调

2026-05-27 18:59:26 +08:00 · 2025-09-12 16:27:06 +08:00
parent 1a66c87a5a
commit 52f016d3ea
28 changed files with 442 additions and 526 deletions
--- a/web/public/config/columnList.js
+++ b/web/public/config/columnList.js
@@ -215,8 +215,8 @@ export const columnList = [
      },
      {
        title: '投运时间',
-        dataIndex: 'touyuntime',
-        key: 'touyuntime'
+        dataIndex: 'operation_date',
+        key: 'operation_date'
      },
      {
        title: '场站运行模式',
--- a/web/src/components/ComTable.vue
+++ b/web/src/components/ComTable.vue
@@ -17,7 +17,7 @@
                selectedRowKeys: data.selectedRowKeys,
                onChange: onSelectChange
              }
-            : {}
+            : null
        "
        :expanded-row-keys="data.newTableOpt.expand ? data.expandedKeys : null"
        size="middle"
--- a/web/src/components/EditCom.vue
+++ b/web/src/components/EditCom.vue
@@ -228,6 +228,7 @@ export default {
        case 'station':
          this.detailInfos = stationOptions
          this.formRules = stationFormRules
+          this.workModeIdSelect=this.detailInfos[0].ruleForm['work_mode']

          break
        case 'device':
--- a/web/src/components/Home/Alarm.vue
+++ b/web/src/components/Home/Alarm.vue
@@ -141,7 +141,7 @@ export default {
          }
        },
        legend: {
-          top: 20,
+          top: 10,
          textStyle: {
            color: '#fff'
          }
@@ -150,7 +150,8 @@ export default {
          left: '3%',
          right: '4%',
          bottom: '5%',
-          containLabel: true
+          top: '32%',
+          // containLabel: true
        },
        xAxis: {
          type: 'category',
@@ -192,44 +193,4 @@ export default {
  }
 }

-.text_Cur {
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
-  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
-  padding: 0px 15px;
-  font-size: 14px;
-  margin: 3px 0px;
-  height: 45px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .mark {
-    font-size: 16px;
-    margin-right: 2px;
-  }
-  & > div:nth-child(2),
-  & > div:nth-child(3) {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-   & > div:last-child{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: end;
-   }
-  background: linear-gradient(
-    90deg,
-    rgba(0, 186, 173, 0.15) 0%,
-    rgba(61, 254, 250, 0.15) 49.2%,
-    rgba(61, 254, 250, 0) 100%
-  );
-  .d {
-    margin-left: 1px;
-    font-size: 12px;
-  }
-}
 </style>
--- a/web/src/components/Home/Charge.vue
+++ b/web/src/components/Home/Charge.vue
@@ -154,6 +154,8 @@ export default {
    },

    drawLineChart(activeKey) {
+      console.log(this.$refs.charge)
+      // const labelCount = Math.floor(500 / 30);
      this.getChargeData(activeKey)
      if(this.chargeChart){
        this.chargeChart.dispose()
@@ -170,7 +172,7 @@ export default {
          }
        },
        legend: {
-          top: 20,
+          top: 10,
          textStyle: {
            color: '#fff'
          }
@@ -178,8 +180,9 @@ export default {
        grid: {
          left: '3%',
          right: '4%',
-          bottom: '5%',
-          containLabel: true
+          bottom: '1%',
+          top: '32%',
+          // containLabel: true
        },
        xAxis: {
          type: 'category',
@@ -197,10 +200,11 @@ export default {
            lineStyle: { type: 'dashed', color: '#435463' }
          },
          axisLabel: {
-            interval: 4,
+            // margin: 10,
+            // interval: 60,
            color: '#fff',
-            fontSize:12
-
+            fontSize:12,
+            // padding: [5, 0, 0, 0]
          }
        },
        series: this.chargeChartData.ydata
@@ -226,37 +230,5 @@ export default {
  }
 }

-.text_Cur {
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
-  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
-  padding: 0px 15px;
-  font-size: 14px;
-  margin: 3px 0px;
-  height: 45px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  & > div:last-child {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: end;
-  }
-  .mark {
-    font-size: 16px;
-    margin-right: 2px;
-  }

-  background: linear-gradient(
-    90deg,
-    rgba(0, 186, 173, 0.15) 0%,
-    rgba(61, 254, 250, 0.15) 49.2%,
-    rgba(61, 254, 250, 0) 100%
-  );
-  .d {
-    margin-left: 1px;
-    font-size: 12px;
-  }
-}
 </style>
--- a/web/src/components/Home/Energy.vue
+++ b/web/src/components/Home/Energy.vue
@@ -147,7 +147,8 @@ export default {
          left: '3%',
          right: '4%',
          bottom: '3%',
-          containLabel: true
+          top: '32%',
+          // containLabel: true
        },
        xAxis: {
          type: 'category',
@@ -165,7 +166,7 @@ export default {
            lineStyle: { type: 'dashed', color: '#435463' }
          },
          axisLabel: {
-            interval: 4,
+            // interval: 4,
            color: '#fff',
            fontSize:12

@@ -193,37 +194,4 @@ export default {
  }
 }

-.text_Cur {
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
-  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
-  padding: 0px 15px;
-  font-size: 14px;
-  margin: 3px 0px;
-  height: 45px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  & > div:last-child {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: end;
-  }
-  .mark {
-    font-size: 16px;
-    margin-right: 2px;
-  }
-
-  background: linear-gradient(
-    90deg,
-    rgba(0, 186, 173, 0.15) 0%,
-    rgba(61, 254, 250, 0.15) 49.2%,
-    rgba(61, 254, 250, 0) 100%
-  );
-  .d {
-    margin-left: 1px;
-    font-size: 12px;
-  }
-}
 </style>
--- a/web/src/components/Home/Map.vue
+++ b/web/src/components/Home/Map.vue
@@ -57,8 +57,8 @@ export default {

  data() {
    return {
-      center: [113.5, 33.875], // 默认中心点（河南）
-      zoom: 10,
+      center: [112.870000,34.180000], // 默认中心点（河南）
+      zoom: 12,
      map: null,
      currentMarker: {},
      showCtrModal: false,
@@ -72,12 +72,19 @@ export default {
    }
  },
  mounted() {
+    this.$nextTick(()=>{
      this.initMap()
+    })
+  },
+  beforeUnmount() {
+    if(this.map){
+      // this.map.destory()
+      this.map=null
+    }
  },
  methods: {
    init(map) {
      this.map = map
-      this.center= [110.404, 40.915]
      this.getMarkList()
    },
    async getMarkList() {
@@ -114,33 +121,27 @@ export default {

   

-    // 备用定位方案
-    // setFallbackLocation() {
-    //   const fallbackCoords = [116.404, 39.915] // 北京坐标
-    //   this.center = fallbackCoords
-    //   if (this.map) {
-    //     this.map.setCenter(new T.LngLat(...fallbackCoords))
-    //   }
-    // },
+  

    async getSysConfig() {
-      let sysConfig
-      try {
-        const query = {}
-        const res = await getReq('/', query)
-        if (res.errcode === 0) {
-          sysConfig = res.data.value
-        } else {
-          throw res
-        }
-      } catch (error) {
-        sysConfig = this.targetKey
-      }
+      let sysConfig=this.targetKey
+      // try {
+      //   const query = {}
+      //   const res = await getReq('/', query)
+      //   if (res.errcode === 0) {
+      //     sysConfig = res.data.value
+      //   } else {
+      //     throw res
+      //   }
+      // } catch (error) {
+      //   sysConfig = this.targetKey
+      // }
      return sysConfig
    },

    async clickArrayMarker(currentVal) {
      this.changeStationId = currentVal.station_id
+      this.testVal.name=currentVal.name
      this.showCtrModal = true
    }
  }
--- a/web/src/components/Home/Map_tianditu.vue
+++ b/web/src/components/Home/Map_tianditu.vue
@@ -58,7 +58,7 @@ export default {
      propsInfo: {
        cabId: '',
        stationId: '',
-        stationName: '场站111'
+        station_name: '场站111'
      },
      showCtrModal: false,
      mapStyle: {
--- a/web/src/components/Home/Modal/DisCharge.vue
+++ b/web/src/components/Home/Modal/DisCharge.vue
@@ -165,37 +165,4 @@ export default {
  }
 }

-.text_Cur {
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
-  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
-  padding: 0px 15px;
-  font-size: 14px;
-  margin: 3px 0px;
-  height: 45px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  & > div:last-child {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: end;
-  }
-  .mark {
-    font-size: 16px;
-    margin-right: 2px;
-  }
-
-  background: linear-gradient(
-    90deg,
-    rgba(0, 186, 173, 0.15) 0%,
-    rgba(61, 254, 250, 0.15) 49.2%,
-    rgba(61, 254, 250, 0) 100%
-  );
-  .d {
-    margin-left: 1px;
-    font-size: 12px;
-  }
-}
 </style>
--- a/web/src/components/Home/Modal/EnvInfo.vue
+++ b/web/src/components/Home/Modal/EnvInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="onLine">
+  <div class="env">
    <div class="content">
      <div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
        <i
@@ -118,7 +118,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-.onLine {
+.env {
  height: calc(100% - 45px);
  display: flex;
  justify-content: center;
--- a/web/src/components/Home/Modal/OperationalInfo.vue
+++ b/web/src/components/Home/Modal/OperationalInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="onLine">
+  <div class="operationlInfo">
    <div class="content">
      <div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
        <a-image :preview="false" :src="item.iconPath" :width="50" class="left"> </a-image>
@@ -101,7 +101,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-.onLine {
+.operationlInfo {
  height: calc(100% - 45px);
  display: flex;
  justify-content: center;
@@ -112,7 +112,7 @@ export default {

 .content {
  flex-wrap: wrap;
-  width: 100%;
+  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-around;
--- a/web/src/components/Home/Modal/PrefabCabin.vue
+++ b/web/src/components/Home/Modal/PrefabCabin.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="onLine">
+  <div class="prefabCabin">
    <div class="content-left">
      <div v-for="item in leftList" :key="item.key" :class="`item ${item.class}`">
        <div>
@@ -10,7 +10,7 @@
      </div>
    </div>
    <div style="text-align: center; font-weight: 500">
-      <div class="online-icon"></div>
+      <div class="prefabCabin-icon"></div>
      <span>{{ curStatus }}</span>
    </div>

@@ -146,7 +146,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-.onLine {
+.prefabCabin {
  height: calc(100% - 45px);
  display: flex;
  justify-content: center;
@@ -198,7 +198,7 @@ export default {
  width: 120px;
 }

-.online-icon {
+.prefabCabin-icon {
  width: 110px;
  height: 130px;
  background-image: url('@/assets/home/perIcon.png');
--- a/web/src/components/Home/Modal/Revenue.vue
+++ b/web/src/components/Home/Modal/Revenue.vue
@@ -179,37 +179,4 @@ export default {
  }
 }

-.text_Cur {
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
-  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
-  padding: 0px 15px;
-  font-size: 14px;
-  margin: 3px 0px;
-  height: 45px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-& > div:last-child{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: end;
-   }
-  .mark {
-    font-size: 16px;
-    margin-right: 2px;
-  }
-
-  background: linear-gradient(
-    90deg,
-    rgba(0, 186, 173, 0.15) 0%,
-    rgba(61, 254, 250, 0.15) 49.2%,
-    rgba(61, 254, 250, 0) 100%
-  );
-  .d{
-    margin-left: 1px;
-    font-size: 12px;
-  }
-}
 </style>
--- a/web/src/components/Home/Modal/Utilization.vue
+++ b/web/src/components/Home/Modal/Utilization.vue
@@ -158,37 +158,4 @@ export default {
  }
 }

-.text_Cur {
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
-  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
-  padding: 0px 15px;
-  font-size: 14px;
-  margin: 3px 0px;
-  height: 45px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  & > div:last-child {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: end;
-  }
-  .mark {
-    font-size: 16px;
-    margin-right: 2px;
-  }
-
-  background: linear-gradient(
-    90deg,
-    rgba(0, 186, 173, 0.15) 0%,
-    rgba(61, 254, 250, 0.15) 49.2%,
-    rgba(61, 254, 250, 0) 100%
-  );
-  .d {
-    margin-left: 1px;
-    font-size: 12px;
-  }
-}
 </style>
--- a/web/src/components/Home/Operational.vue
+++ b/web/src/components/Home/Operational.vue
@@ -1,19 +1,11 @@
 <template>
-  <div class="Operational">
-    <div class="oper-bg">{{ currentHoverNumber }}%</div>
-    <div class="oper-right">
-      <div v-for="item in curList" :key="item.key" class="oper-item" @mouseover="changeNumber(item)">
-        <div style="display: flex">
-          <div :style="`background:${item.lineColor}`" class="item-icon"></div>
-          <span class="item-name">{{ item.name }}</span>
-        </div>
-        <span class="item-value">{{ item.value?item.value:0 }}</span>
-      </div>
-    </div>
+  <div class="operational">
+    <div id="operational-chart"></div>
  </div>
 </template>

 <script>
+
 export default {
  name: '',
  props: {
@@ -28,89 +20,203 @@ export default {
  },
  data() {
    return {
-      currentHoverNumber: 58,
      curList: [
        {
          name: '收益',
-          key: 'incomeTotal',
+          key: 'income',
          percentKey: 'connector_online_percent',
-          lineColor: 'linear-gradient(90deg, rgba(13, 87, 144, 1) 0%, rgba(21, 153, 253, 1) 100%);',
+          lineColor: '#00BAAD',
          value: 0
        },
        {
          name: '利用率',
          key: 'usage_rate',
          percentKey: 'connector_off_percent',
-          lineColor:
-            'linear-gradient(90deg, rgba(53, 120, 124, 1) 0%, rgba(102, 225, 223, 1) 100%);',
+          lineColor:'#0E68E4',
          value: 0
        }
-      ]
+      ],
+      operationalChart: null,
+      operationalChartData: {
+        ydata: [],
+        xdata: []
+      },
+     
    }
  },
  watch: {
-    total:{
+    
+    deviceInfo: {
      handler(newVal, oldVal) {
-        if (newVal!==oldVal) {
-          let that=this
-          that.curList.forEach((item)=>{
-            item.value=that.total[item.key]
+        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+          this.$nextTick(() => {
+            this.drawLineChart()
          })
        }
-       
-      }
-    
-
+      },
+      deep: true // 确保深度比较
    }
  },
  mounted() {},
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+    if (this.operationalChart) {
+      this.operationalChart.dispose()
+      this.operationalChart = null
+    }
+  },

  methods: {
-    changeNumber(item) {
-      this.currentHoverNumber = item.percentValue? item.percentValue:0
+    processData(data, keys) {
+      data.sort((a, b) => {
+        return new Date(a.station_name) - new Date(b.station_name)
+      })
+      const dates = data.map((item) => item.station_name)
+      const values = []
+      keys.forEach((item, index) => {
+        values[index] = data.map((dataValue) => dataValue[keys[index]])
+      })
+
+      return {
+        dates,
+        values
+      }
+    },
+    handleResize() {
+      if (this.operationalChart) {
+        this.operationalChart.resize()
+      }
+    },
+   
+    getChargeData() {
+      const arr = this.curList
+      const keyList = this.curList.map((item) => item.key)
+      const result = this.processData(this.deviceInfo, keyList)
+
+      this.operationalChartData.xdata = result.dates
+      arr.forEach((item, index) => {
+        this.operationalChartData.ydata[index] = {
+          name: item.name,
+          smooth: true,
+          type: 'bar',
+          barWidth: 5,
+          itemStyle: {
+            borderRadius: [5, 5, 0, 0],
+            color: item.lineColor
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          yAxisIndex: index,
+          global: false,
+          showSymbol: false,
+          data: result.values[index]
+        }
+      })
+    },
+
+    drawLineChart(activeKey) {
+      this.getChargeData(activeKey)
+      if (this.operationalChart) {
+        this.operationalChart.dispose()
+      }
+      const chartDom = document.getElementById('operational-chart')
+      if (!chartDom) return
+      let operationalChart = this.$echarts.init(chartDom)
+      this.operationalChart = operationalChart
+      const option = {
+        tooltip: {
+          trigger: 'axis', // 触发类型：坐标轴触发
+          // position: function (pos, params, dom, rect, size) {
+          //   // pos: 鼠标位置 [x, y]
+          //   // size: 提示框大小 {viewSize: [width, height], contentSize: [width, height]}
+          //   const x = pos[0] + 10; // 鼠标右侧10px
+          //   const y = pos[1];     // 保持与鼠标同高
+          //   return [x, y];
+          // }
+        },
+        legend: {
+          top: 10,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: this.operationalChartData.xdata,
+          axisLine: {
+            lineStyle: { type: 'dashed', color: '#435463' }
+          },
+          axisLabel: {
+            color:"#fff",
+            // interval:'auto', // 显示所有标签
+            fontSize: 12,
+            formatter: function(value) {
+              return value.length > 8 ? value.substring(0, 8) + '...' : value;
+            }
+          }
+        },
+        yAxis: [
+          {
+            name: '收益(元)',
+            type: 'value',
+            splitLine: {
+              lineStyle: { type: 'dashed', color: '#435463' }
+            },
+            nameTextStyle: {
+              color: '#fff' // 绿色名称
+            },
+            axisLabel: {
+              interval: 4,
+              color: '#fff',
+              fontSize:12
+
+            },
+          },
+          {
+            name: '利用率(%)',
+            type: 'value',
+            nameTextStyle: {
+              color: '#fff' // 绿色名称
+            },
+            splitLine: {
+              lineStyle: { type: 'dashed', color: '#435463' }
+            },
+            axisLabel: {
+              interval: 4,
+              color: '#fff',
+              fontSize:12
+
+            },
+          },
+        ],
+        series: this.operationalChartData.ydata
+      }
+      option && operationalChart.setOption(option)
+      this.setupResizeListener()
+    },
+    setupResizeListener() {
+      window.removeEventListener('resize', this.handleResize)
+      window.addEventListener('resize', this.handleResize)
    }
  }
 }
 </script>

 <style lang="scss" scoped>
-.Operational {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
+.operational {
  height: calc(100% - 45px);
-  .oper-bg {
-    font-size: 1vw;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: url('../../assets/home/operBg.png');
-    background-size: 100% 100%;
-    width: 9vw;
-    height: 9vw;
-    aspect-ratio: 1/1;
-  }
-  .oper-right {
-    font-size: 13px;
-    .oper-item {
-      height: 12%;
-      align-items: center;
-      color: #fff;
-      margin-bottom: 10px;
-      display: flex;
-      justify-content: space-between;
-      padding: 5px 15px;
-      background: url('../../assets/home/leg-bg.png');
-      background-size: 100% 100%;
-      .item-icon {
-        width: 10px;
-        height: 10px;
-      }
-      .item-name {
-        margin-left: 5px;
-        margin-right: 60px;
-      }
-    }
+
+  #operational-chart {
+    height: 100%;
+
  }
 }
+
 </style>
--- a/web/src/components/Home/Pv.vue
+++ b/web/src/components/Home/Pv.vue
@@ -138,7 +138,7 @@ export default {
          }
        },
        legend: {
-          top: 20,
+          top: 10,
          textStyle: {
            color: '#fff'
          }
@@ -147,7 +147,8 @@ export default {
          left: '3%',
          right: '4%',
          bottom: '5%',
-          containLabel: true
+          top: '32%',
+          // containLabel: true
        },
        xAxis: {
          type: 'category',
@@ -165,7 +166,7 @@ export default {
            lineStyle: { type: 'dashed', color: '#435463' }
          },
          axisLabel: {
-            interval: 4,
+            // interval: 4,
            color: '#fff',
            fontSize:12

@@ -193,37 +194,4 @@ export default {
  }
 }

-.text_Cur {
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
-  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
-  padding: 0px 15px;
-  font-size: 14px;
-  margin: 3px 0px;
-  height: 45px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  & > div:last-child {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: end;
-  }
-  .mark {
-    font-size: 16px;
-    margin-right: 2px;
-  }
-
-  background: linear-gradient(
-    90deg,
-    rgba(0, 186, 173, 0.15) 0%,
-    rgba(61, 254, 250, 0.15) 49.2%,
-    rgba(61, 254, 250, 0) 100%
-  );
-  .d {
-    margin-left: 1px;
-    font-size: 12px;
-  }
-}
 </style>
--- a/web/src/components/Home/onLine.vue
+++ b/web/src/components/Home/onLine.vue
@@ -101,16 +101,15 @@ export default {
      handler(newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          this.curList.forEach((item) => {
-            item.value = newVal[item.key] || 0;
-          });
+            item.value = newVal[item.key] || 0
+          })
        }
      },
      immediate: true,
      deep: true
    }
  },
-  mounted() {
-  },
+  mounted() {},
  methods: {}
 }
 </script>
@@ -147,8 +146,7 @@ export default {

 .content-left,
 .content-right {
-  width: calc((100% - 110px) / 2);
-  // width: 40%;
+  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -171,7 +169,7 @@ export default {
 }

 .online-icon {
-  width: 110px;
+  width: 20%;
  height: 130px;
  background-image: url('@/assets/home/onLineIcon.png');
  background-size: contain;
--- a/web/src/components/SearchBox.vue
+++ b/web/src/components/SearchBox.vue
@@ -333,7 +333,7 @@ input:-internal-autofill-selected {
    justify-content: space-between;
    align-items: center;
    .button {
-      margin-left: 10px;
+      // margin-left: 10px;
    }
  }
 }
--- a/web/src/components/TreeTable.vue
+++ b/web/src/components/TreeTable.vue
@@ -10,7 +10,8 @@
      :row-class-name="(record, index) => rowClassName(record, index)"
      row-key="key"
      size="middle"
-      :row-selection="rowSelection"
+      :row-selection="newTableOpt.select
+            ?rowSelection:null"
      :indent-size="30"
      :check-strictly="false"
      @resizeColumn="handleResizeColumn"
@@ -100,6 +101,7 @@ export default {
  },
  computed: {
    rowSelection() {
+       
      const { selectedRowKeys } = this
      return {
        checkStrictly: this.tableOption.checkStrictly,
--- a/web/src/components/statisticalAnalysis/energyEchart.vue
+++ b/web/src/components/statisticalAnalysis/energyEchart.vue
@@ -173,6 +173,7 @@ export default {
    },
    // 初始化柱状图
    initBarCharts() {
+      
      this.chartOptions.forEach((option, index) => {
        if (option.type === 'bar') {
          const dom = this.$refs[`chartContainer${index}`]?.[0];
--- a/web/src/style/antd.scss
+++ b/web/src/style/antd.scss
@@ -168,3 +168,38 @@ $page-border: #cad2dd;
    color: #fff !important;
  }
 }
+
+// 添加统一布局的样式
+.text_Cur {
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
+  padding: 0px 15px;
+  font-size: 12px;
+  margin: 3px 0px;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  & > div:last-child {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: end;
+  }
+  .mark {
+    font-size: 16px;
+    margin-right: 2px;
+  }
+
+  background: linear-gradient(
+    90deg,
+    rgba(0, 186, 173, 0.15) 0%,
+    rgba(61, 254, 250, 0.15) 49.2%,
+    rgba(61, 254, 250, 0) 100%
+  );
+  .d {
+    margin-left: 1px;
+    font-size: 12px;
+  }
+}
--- a/web/src/views/statisticalAnalysis.vue
+++ b/web/src/views/statisticalAnalysis.vue
@@ -20,7 +20,7 @@
      >
        <template #stationSelect="item">
          <a-select
-            style="width: 120px"
+            style="width: 200px"
            :dropdown-match-select-width="false"
            v-model:value="stationId"
            allow-clear
@@ -512,7 +512,7 @@ export default {
        this.resetDataForInactiveKey()

        // 并行加载新数据
-        Promise.all([this.getEchartsListForActiveKey(), this.getTableListForActiveKey()]).then(
+        Promise.all([this.getStationList(),this.getEchartsListForActiveKey(), this.getTableListForActiveKey()]).then(
          () => {
            this.$nextTick(() => {
              this.getStatCharts()
--- a/web/src/views/sub/Home.vue
+++ b/web/src/views/sub/Home.vue
@@ -48,14 +48,13 @@ import Alarm from '@/components/Home/Alarm.vue'
 import Map from '@/components/Home/Map.vue'
 import { getReq, postReq } from '@/request/api'
 import { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'
-import { markRaw } from 'vue';
+import { markRaw } from 'vue'
 export default {
  name: 'Home',
  components: { Map },
  data() {
    return {
      showFlag: false,
-
      stationId: null,
      deviceInfo: {},
      list: [
@@ -69,7 +68,7 @@ export default {
          title: '运行分析',
          class: 'stats-cards',
          componentId: markRaw(Operational),
-          infoKey: ''
+          infoKey: 'operationTotal'
        },
        {
          title: '储能设备',
@@ -114,6 +113,7 @@ export default {
    await Promise.all([
      this.getOnLineList(),
      this.getStatTotalList(),
+      this.getOperTotalList(),
      this.getStatDayList(1),
      this.getStatDayList(2),
      this.getStatDayList(3)
@@ -130,15 +130,11 @@ export default {
        )
        this.deviceInfo.alarm = newArr
      }
-      console.log(r,'11111')
-
    })
-    // this.showFlag=true
  },

  methods: {
    getCurrentStation(e) {
-      console.log(e, 'getCurrentStation')
      this.stationId = e
    },
    // 查询系统统计信息
@@ -149,7 +145,6 @@ export default {
        if (res.errcode === 0) {
          this.deviceInfo.onLine = JSON.parse(JSON.stringify(res.data))
          this.deviceInfo.onLine.runDays = getRunDays(res.data.launch_date)
-          console.log(JSON.parse(JSON.stringify(res.data)), this.deviceInfo.onLine, '111111111111')
        } else {
          throw res
        }
@@ -166,7 +161,7 @@ export default {
        // station_id:场站ID，为0或不传查询所有场站总计
        // category:类别，1:储能设备,2:充电设备,3:光伏设备,为0或不传查询所有类别总计
        const query = {
-          date: new Date(),
+          date: getDateDaysAgo(0),
          stationId: this.stationId,
          category: 0
        }
@@ -176,35 +171,31 @@ export default {
          const { income_charge: incomeCharge, income_elect: incomeElect } =
            this.deviceInfo.allTotal
          this.deviceInfo.allTotal.incomeTotal = +incomeCharge + +incomeElect
-          console.log(
-            this.deviceInfo.allTotal.incomeTotal,
-            incomeCharge,
-            incomeElect,
-            ' this.deviceInfo.allTotal.incomeTotal'
-          )
        } else {
          throw res
        }
      } catch (error) {
-        this.deviceInfo.allTotal = {
-          storageElectIn: 2,
-          storageElectOut: 5,
-          chargeElect: 4,
-          chargeNum: 5,
-          incomeCharge: 7,
-          incomeElect: 7,
-          solarElectGen: 7,
-          solarElectGrid: 7
+        this.deviceInfo.allTotal = {}
+        this.deviceInfo.allTotal.incomeTotal = 0
      }
-        this.deviceInfo.allTotal.incomeTotal =
-          this.deviceInfo.allTotal.incomeCharge + this.deviceInfo.allTotal.incomeElect
+    },
+    // 运行分析  联调
+    async getOperTotalList() {
+      try {
+        const res = await getReq('/queryStatStation', {})
+        if (res.errcode === 0) {
+          this.deviceInfo.operationTotal = res.data
+        } else {
+          throw res
+        }
+      } catch (error) {
+        this.deviceInfo.operationTotal = [ ]
      }
    },

    // 示例：获取7天前的日期
    // 查询场站日统计信息
    async getStatDayList(category) {
-      console.log(category,"category")
      try {
        // station_id: 场站ID
        // category: 类别： 1：储能设备,2:充电设备,3:光伏设备
@@ -221,7 +212,6 @@ export default {
        if (res.errcode === 0) {
          this.list.forEach((item) => {
            this.deviceInfo[arr[category]] = res.data
-           
          })
        } else {
          throw res
--- a/web/src/views/system/permission.vue
+++ b/web/src/views/system/permission.vue
@@ -1,10 +1,6 @@
 <template>
  <div class="permission">
-    <searchBox
-      :btn-option-list="btnOptionList"
-      @onSearch="onSearch"
-      @operateForm="operateForm"
-    ></searchBox>
+    <!-- <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox> -->

    <div class="content-table">
      <TreeTable
@@ -31,7 +27,13 @@
        </template>
      </TreeTable>
    </div>
-    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+    <a-modal
+      v-model:open="formModal"
+      width="750px"
+      style="top: 20px"
+      :footer="null"
+      :destroy-on-close="true"
+    >
      <!-- action:edit add -->
      <EditCom
        :record="record"
@@ -64,7 +66,10 @@ export default {
        page: 1
      },
      btnOptionList: [],
-      paramsDate: {}
+      paramsDate: {},
+      tableOption: {
+        select: false
+      }
    }
  },
  computed: {},
@@ -125,10 +130,7 @@ export default {
    operateForm(type, record = {}) {
      this.formStatus = type
      switch (type) {
-      
-
      case 'del':
-
        break

      case 'back':
@@ -196,10 +198,9 @@ export default {
 <style lang="scss" scoped>
 .permission {
  height: 100%;
-
+ padding: 20px 20px 0 20px; 
  .content-table {
-    height: calc(100% - 70px);
-    padding: 10px;
+    height: calc(100% - 92px);
  }
 }
 </style>
--- a/web/src/views/system/role.vue
+++ b/web/src/views/system/role.vue
@@ -1,10 +1,6 @@
 <template>
  <div class="role">
-    <searchBox
-      :btn-option-list="btnOptionList"
-      @onSearch="onSearch"
-      @operateForm="operateForm"
-    ></searchBox>
+    <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>

    <div class="content-table">
      <ComTable
@@ -31,7 +27,13 @@
        </template>
      </ComTable>
    </div>
-    <a-modal v-model:open="formModal" width="950px" style="top: 20px" :footer="null" :destroy-on-close="true">
+    <a-modal
+      v-model:open="formModal"
+      width="950px"
+      style="top: 20px"
+      :footer="null"
+      :destroy-on-close="true"
+    >
      <!-- action:edit add -->
      <EditCom
        :show-flag="formModal"
@@ -76,7 +78,7 @@ export default {
      paramsDate: {},
      tableOption: {
        select: false
-      },
+      }
    }
  },
  computed: {},
@@ -295,13 +297,11 @@ export default {
            callback()
          }
        },
-        onCancel() {
-        },
+        onCancel() {},
        class: 'test'
      })
    },
    async getRuleFormInfo(record) {
-      
      function getInfo(data, url) {
        return new Promise((reslove, reject) => {
          getReq(data, url).then((res) => {
@@ -340,25 +340,25 @@ export default {
    },
    // 定义提取所有ID的函数
    extractAllIds(treeData) {
-      const idSet = new Set();
+      const idSet = new Set()

      // 递归遍历函数
      const traverse = (node) => {
        // 添加当前节点ID
        if (node.permission_id) {
-          idSet.add(node.permission_id);
+          idSet.add(node.permission_id)
        }

        // 递归处理子节点
        if (node.children && node.children.length > 0) {
-          node.children.forEach((child) => traverse(child));
+          node.children.forEach((child) => traverse(child))
+        }
      }
-      };

      // 处理所有根节点
-      treeData.forEach((node) => traverse(node));
+      treeData.forEach((node) => traverse(node))

-      return Array.from(idSet);
+      return Array.from(idSet)
    },
    handlePagesizeChange(pageOption) {
      this.pageOption.pageSize = pageOption.pageSize
@@ -373,9 +373,9 @@ export default {
 .role {
  height: 100%;

+  padding: 0 20px;
  .content-table {
-    height: calc(100% - 70px);
-    padding: 10px;
+    height: calc(100% - 92px);
  }
 }
 </style>
--- a/web/src/views/system/service.vue
+++ b/web/src/views/system/service.vue
@@ -1,10 +1,6 @@
 <template>
  <div class="service">
-    <searchBox
-      :btn-option-list="btnOptionList"
-      @onSearch="onSearch"
-      @operateForm="operateForm"
-    ></searchBox>
+    <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>

    <div class="content-table">
      <ComTable
@@ -22,13 +18,18 @@
          }}</a-tag>
        </template>

-
        <template #action="record">
          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
        </template>
      </ComTable>
    </div>
-    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+    <a-modal
+      v-model:open="formModal"
+      width="750px"
+      style="top: 20px"
+      :footer="null"
+      :destroy-on-close="true"
+    >
      <!-- action:edit add -->
      <EditCom
        :record="record"
@@ -52,7 +53,7 @@ export default {
  name: '',
  components: {
    searchBox,
-    EditCom,
+    EditCom
  },
  props: {},
  data() {
@@ -81,7 +82,7 @@ export default {
        {
          label: '自定义',
          value: 3
-        },
+        }
      ],
      policyList: [
        {
@@ -95,7 +96,7 @@ export default {
        {
          label: '自发自用',
          value: 3
-        },
+        }
      ]
    }
  },
@@ -148,7 +149,6 @@ export default {
      } catch (error) {
        //统一处理报错提示
        this.$refs.comTable.loading = false
-
      }
    },
    operateForm(type, record = {}) {
@@ -202,8 +202,7 @@ export default {
            callback()
          }
        },
-        onCancel() {
-        },
+        onCancel() {},
        class: 'test'
      })
    },
@@ -225,7 +224,6 @@ export default {
      }
      serviceApiOptions.forEach((e, index) => {
        e.list.forEach((i) => {
-          
          e.ruleForm[i.key] = row ? row[i.key] : ''
          e.ruleForm.id = row.id
        })
--- a/web/src/views/system/station.vue
+++ b/web/src/views/system/station.vue
@@ -1,10 +1,6 @@
 <template>
  <div class="station">
-    <searchBox
-      :btn-option-list="btnOptionList"
-      @onSearch="onSearch"
-      @operateForm="operateForm"
-    ></searchBox>
+    <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>

    <div class="content-table">
      <ComTable
@@ -22,19 +18,20 @@
          <span>{{}}</span>
        </template>
        <template #work_mode="record">
-          <span>{{ workModeList.find((item) => record.value == item.value)?.label || '' }}</span>
+          <span>{{ workModeList.find((item) => record.work_mode == item.value)?.label || '' }}</span>
        </template>
        <template #policy_id="record">
-          <span>{{ policyList.find((item) => record.value == item.value)?.label || '' }}</span>
+          <span>{{ policyList.find((item) => record.policy_id == item.value)?.label || '' }}</span>
        </template>
        <template #action="record">
          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
        </template>
      </ComTable>
    </div>
-    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null"  :destroy-on-close="true">
      <!-- action:edit add -->
      <EditCom
+        ref="EditCom"
        :record="record"
        @operateForm="operateForm"
        type="station"
@@ -217,8 +214,7 @@ export default {
            callback()
          }
        },
-        onCancel() {
-        },
+        onCancel() {},
        class: 'test'
      })
    },
@@ -240,8 +236,27 @@ export default {
      }
      stationOptions.forEach((e, index) => {
        e.list.forEach((i) => {
+          if (i.key == 'work_mode') {
+            console.log(row[i.key], 'rrrrrrrrr')
+            switch (row[i.key]) {
+            case '1':
+            case '5':
+              e.ruleForm[i.key] =row[i.key] 
+              // this.$refs.EditCom.workModeIdSelect = row[i.key]
+              e.ruleForm['policy_id'] = row ? row['policy_id'] : ''
+              stationOptions[0].list[stationOptions[0].list.length - 1].type = 'select'
+              break
+            default:
+              e.ruleForm[i.key] =row[i.key] 
+
+              console.log('1245')
+              stationOptions[0].list[stationOptions[0].list.length - 1].type = 'unshow'
+
+              break
+            }
+          } else {
            e.ruleForm[i.key] = row ? row[i.key] : ''
-          e.ruleForm.id = row.id
+          }
        })
      })
    },
@@ -258,9 +273,9 @@ export default {
 .station {
  height: 100%;

+   padding: 0 20px;
  .content-table {
-    height: calc(100% - 70px);
-    padding: 10px;
+    height: calc(100% - 92px);
  }
 }
 </style>
--- a/web/src/views/system/user.vue
+++ b/web/src/views/system/user.vue
@@ -1,11 +1,6 @@
 <template>
  <div class="user">
-    <searchBox
-      :btn-option-list="btnOptionList"
-      @onSearch="onSearch"
-      :search-options="searchOptions"
-      @operateForm="operateForm"
-    ></searchBox>
+    <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>

    <div class="content-table">
      <ComTable
@@ -26,7 +21,13 @@
        </template>
      </ComTable>
    </div>
-    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+    <a-modal
+      v-model:open="formModal"
+      width="750px"
+      style="top: 20px"
+      :footer="null"
+      :destroy-on-close="true"
+    >
      <!-- action:edit add -->
      <EditCom
        :record="record"
@@ -48,7 +49,7 @@ import { createVNode } from 'vue'
 export default {
  name: '',
  components: {
-    EditCom,
+    EditCom
  },
  props: {},
  data() {
@@ -170,8 +171,7 @@ export default {
            callback()
          }
        },
-        onCancel() {
-        },
+        onCancel() {},
        class: 'test'
      })
    },
@@ -193,7 +193,6 @@ export default {
      }
      userOptions.forEach((e, index) => {
        e.list.forEach((i) => {
-          
          e.ruleForm[i.key] = row ? row[i.key] : ''
          e.ruleForm.id = row.id
        })
@@ -211,10 +210,9 @@ export default {
 <style lang="scss" scoped>
 .user {
  height: 100%;
-
+  padding: 0 20px;
  .content-table {
-    height: calc(100% - 70px);
-    padding: 10px;
+    height: calc(100% - 92px);
  }
 }
 </style>