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

web/public/config/columnList.js

@@ -215,8 +215,8 @@ export const columnList = [
       },
       {
         title: '投运时间',
-        dataIndex: 'touyuntime',
+        dataIndex: 'operation_date',
-        key: 'touyuntime'
+        key: 'operation_date'
       },
       {
         title: '场站运行模式',

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"

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':

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>

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%',
+          bottom: '1%',
-          containLabel: true
+          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>

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>

web/src/components/Home/Map.vue

@@ -57,8 +57,8 @@ export default {
 
   data() {
     return {
-      center: [113.5, 33.875], // 默认中心点（河南）
+      center: [112.870000,34.180000], // 默认中心点（河南）
-      zoom: 10,
+      zoom: 12,
       map: null,
       currentMarker: {},
       showCtrModal: false,
@@ -72,12 +72,19 @@ export default {
     }
   },
   mounted() {
-    this.initMap()
+    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
+      let sysConfig=this.targetKey
-      try {
+      // try {
-        const query = {}
+      //   const query = {}
-        const res = await getReq('/', query)
+      //   const res = await getReq('/', query)
-        if (res.errcode === 0) {
+      //   if (res.errcode === 0) {
-          sysConfig = res.data.value
+      //     sysConfig = res.data.value
-        } else {
+      //   } else {
-          throw res
+      //     throw res
-        }
+      //   }
-      } catch (error) {
+      // } catch (error) {
-        sysConfig = this.targetKey
+      //   sysConfig = this.targetKey
-      }
+      // }
       return sysConfig
     },
 
     async clickArrayMarker(currentVal) {
       this.changeStationId = currentVal.station_id
+      this.testVal.name=currentVal.name
       this.showCtrModal = true
     }
   }

web/src/components/Home/Map_tianditu.vue

@@ -58,7 +58,7 @@ export default {
       propsInfo: {
         cabId: '',
         stationId: '',
-        stationName: '场站111'
+        station_name: '场站111'
       },
       showCtrModal: false,
       mapStyle: {

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>

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;

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;

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');

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>

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>

web/src/components/Home/Operational.vue

@@ -1,25 +1,17 @@
 <template>
-  <div class="Operational">
+  <div class="operational">
-    <div class="oper-bg">{{ currentHoverNumber }}%</div>
+    <div id="operational-chart"></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>
 </template>
 
 <script>
+
 export default {
   name: '',
   props: {
-    total:{
+    total: {
-      type:Object,
+      type: Object,
-      default:()=>{}
+      default: () => {}
     },
     deviceInfo: {
       type: Array,
@@ -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:
+          lineColor:'#0E68E4',
-            'linear-gradient(90deg, rgba(53, 120, 124, 1) 0%, rgba(102, 225, 223, 1) 100%);',
           value: 0
         }
-      ]
+      ],
+      operationalChart: null,
+      operationalChartData: {
+        ydata: [],
+        xdata: []
+      },
+     
     }
   },
   watch: {
-    total:{
+    
-      handler(newVal,oldVal) {
+    deviceInfo: {
-        if (newVal!==oldVal) {
+      handler(newVal, oldVal) {
-          let that=this
+        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
-          that.curList.forEach((item)=>{
+          this.$nextTick(() => {
-            item.value=that.total[item.key]
+            this.drawLineChart()
           })
         }
-       
+      },
-      }
+      deep: true // 确保深度比较
-    
-
     }
   },
   mounted() {},
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+    if (this.operationalChart) {
+      this.operationalChart.dispose()
+      this.operationalChart = null
+    }
+  },
 
   methods: {
-    changeNumber(item) {
+    processData(data, keys) {
-      this.currentHoverNumber = item.percentValue? item.percentValue:0
+      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 {
+.operational {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
   height: calc(100% - 45px);
-  .oper-bg {
+
-    font-size: 1vw;
+  #operational-chart {
-    display: flex;
+    height: 100%;
-    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;
-      }
-    }
   }
 }
+
 </style>

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>

web/src/components/Home/onLine.vue

@@ -28,7 +28,7 @@ export default {
   props: {
     infoKey: {
       type: String,
-      default:''
+      default: ''
     },
     total: {
       type: Object,
@@ -98,19 +98,18 @@ export default {
 
   watch: {
     total: {
-      handler(newVal,oldVal) {
+      handler(newVal, oldVal) {
-        if (newVal&&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,14 +146,13 @@ export default {
 
 .content-left,
 .content-right {
-  width: calc((100% - 110px) / 2);
+  width: 40%;
-  // width: 40%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
   height: 100%;
-  .item{
+  .item {
     align-items: flex-start;
     justify-content: 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;

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;
     }
   }
 }

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,

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];

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;
+  }
+}

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()

web/src/views/sub/Home.vue

@@ -48,46 +48,45 @@ 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: [
         {
           title: '运行状况',
           class: 'online-status',
-          componentId:markRaw(onLine),
+          componentId: markRaw(onLine),
           infoKey: 'onLineTotal'
         },
         {
           title: '运行分析',
           class: 'stats-cards',
-          componentId:markRaw( Operational),
+          componentId: markRaw(Operational),
-          infoKey: ''
+          infoKey: 'operationTotal'
         },
         {
           title: '储能设备',
           class: 'energy-status',
-          componentId:markRaw( Energy),
+          componentId: markRaw(Energy),
           infoKey: 'energy'
         },
         {
           title: '充电设备',
           class: 'charge-analysis',
-          componentId:markRaw( Charge),
+          componentId: markRaw(Charge),
           infoKey: 'charge'
         },
 
         {
           title: '光伏设备',
           class: 'work-order',
-          componentId:markRaw( Pv),
+          componentId: markRaw(Pv),
           infoKey: 'pv'
         },
         {
@@ -114,14 +113,15 @@ export default {
     await Promise.all([
       this.getOnLineList(),
       this.getStatTotalList(),
+      this.getOperTotalList(),
       this.getStatDayList(1),
       this.getStatDayList(2),
       this.getStatDayList(3)
-    ]).then((r)=>{
+    ]).then((r) => {
       if (
         this.deviceInfo.energy.length &&
-              this.deviceInfo.charge.length &&
+        this.deviceInfo.charge.length &&
-              this.deviceInfo.pv.length
+        this.deviceInfo.pv.length
       ) {
         const newArr = this.mergedArray(
           this.deviceInfo.energy,
@@ -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 = {
+        this.deviceInfo.allTotal = {}
-          storageElectIn: 2,
+        this.deviceInfo.allTotal.incomeTotal = 0
-          storageElectOut: 5,
+      }
-          chargeElect: 4,
+    },
-          chargeNum: 5,
+    // 运行分析  联调
-          incomeCharge: 7,
+    async getOperTotalList() {
-          incomeElect: 7,
+      try {
-          solarElectGen: 7,
+        const res = await getReq('/queryStatStation', {})
-          solarElectGrid: 7
+        if (res.errcode === 0) {
+          this.deviceInfo.operationTotal = res.data
+        } else {
+          throw res
         }
-        this.deviceInfo.allTotal.incomeTotal =
+      } catch (error) {
-          this.deviceInfo.allTotal.incomeCharge + this.deviceInfo.allTotal.incomeElect
+        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

web/src/views/system/permission.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="permission">
-    <searchBox
+    <!-- <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox> -->
-      :btn-option-list="btnOptionList"
-      @onSearch="onSearch"
-      @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);
+    height: calc(100% - 92px);
-    padding: 10px;
   }
 }
 </style>

web/src/views/system/role.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="role">
-    <searchBox
+    <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
-      :btn-option-list="btnOptionList"
-      @onSearch="onSearch"
-      @operateForm="operateForm"
-    ></searchBox>
 
     <div class="content-table">
       <ComTable
@@ -16,7 +12,7 @@
         :page-option="pageOption"
       >
         <template #is_open="record">
-           <!-- 0:禁用; 1:启用 -->
+          <!-- 0:禁用; 1:启用 -->
           <a-tag :color="record.is_open == 0 ? 'red' : 'green'">{{
             record.is_open == 0 ? '禁用' : '启用'
           }}</a-tag>
@@ -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"
@@ -75,8 +77,8 @@ export default {
       btnOptionList: [],
       paramsDate: {},
       tableOption: {
-        select:false
+        select: false
-      },
+      }
     }
   },
   computed: {},
@@ -143,9 +145,9 @@ export default {
             ...item,
             key: item.permission_id,
             is_add: Boolean(+item.is_add) || false,
-            is_del: Boolean(+item.is_del )|| false,
+            is_del: Boolean(+item.is_del) || false,
-            is_edit: Boolean(+item.is_edit )|| false,
+            is_edit: Boolean(+item.is_edit) || false,
-            is_view: Boolean(+item.is_view )|| false,
+            is_view: Boolean(+item.is_view) || false,
             // 确保子权限容器存在
             children: item.children ? [...item.children] : []
           }
@@ -194,10 +196,10 @@ export default {
     },
     calculateParentPermissions(node) {
       if (node.children?.length) {
-        node.is_view = node.children.some((child) => child.is_view === '1') ? true:false
+        node.is_view = node.children.some((child) => child.is_view === '1') ? true : false
-        node.is_add = node.children.some((child) => child.is_add === '1') ? true:false
+        node.is_add = node.children.some((child) => child.is_add === '1') ? true : false
-        node.is_edit = node.children.some((child) => child.is_edit === '1') ? true:false
+        node.is_edit = node.children.some((child) => child.is_edit === '1') ? true : false
-        node.is_del = node.children.some((child) => child.is_del === '1') ? true:false
+        node.is_del = node.children.some((child) => child.is_del === '1') ? true : false
       }
     },
     async getPermissionList() {
@@ -243,7 +245,7 @@ export default {
         is_add: data ? Boolean(+data.is_add) : false,
         is_del: data ? Boolean(+data.is_del) : false,
         is_edit: data ? Boolean(+data.is_edit) : false,
-        is_view: data ? Boolean(+data.is_view ): false
+        is_view: data ? Boolean(+data.is_view) : false
       }
     },
     operateForm(type, record = {}) {
@@ -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) => {
@@ -320,16 +320,16 @@ export default {
         perList,
         record && record.permission.length ? record.permission : []
       )
-      const newData=JSON.parse(JSON.stringify( this.processedData))
+      const newData = JSON.parse(JSON.stringify(this.processedData))
-      
+
       roleOptions.forEach((e, index) => {
         e.list.forEach((i) => {
           if (i.key == 'permission') {
             i.tableData = newData
-            if(record&&record.role_id){
+            if (record && record.role_id) {
-              i.selectTableData=this.extractAllIds( record.permission)
+              i.selectTableData = this.extractAllIds(record.permission)
-            }else {
+            } else {
-              i.selectTableData=[]
+              i.selectTableData = []
             }
           } else {
             e.ruleForm[i.key] = row ? row[i.key] : ''
@@ -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);
+    height: calc(100% - 92px);
-    padding: 10px;
   }
 }
 </style>

web/src/views/system/service.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="service">
-    <searchBox
+    <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
-      :btn-option-list="btnOptionList"
-      @onSearch="onSearch"
-      @operateForm="operateForm"
-    ></searchBox>
 
     <div class="content-table">
       <ComTable
@@ -16,19 +12,24 @@
         :page-option="pageOption"
       >
         <template #is_open="record">
-           <!-- 0:禁用; 1:启用 -->
+          <!-- 0:禁用; 1:启用 -->
           <a-tag :color="record.is_open == 0 ? 'red' : 'green'">{{
             record.is_open == 0 ? '禁用' : '启用'
           }}</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,13 +53,13 @@ export default {
   name: '',
   components: {
     searchBox,
-    EditCom,
+    EditCom
   },
   props: {},
   data() {
     return {
       tableOption: {
-        select:false
+        select: false
       },
       formModal: false,
       formState: {},
@@ -69,33 +70,33 @@ export default {
       },
       btnOptionList: [],
       paramsDate: {},
-      workModeList:[
+      workModeList: [
         {
-          label:'最优经济化',
+          label: '最优经济化',
-          value:1
+          value: 1
         },
         {
-          label:'支撑电网稳定',
+          label: '支撑电网稳定',
-          value:2
+          value: 2
         },
         {
-          label:'自定义',
+          label: '自定义',
-          value:3
+          value: 3
-        },
+        }
       ],
-      policyList:[
+      policyList: [
         {
-          label:'削峰套利',
+          label: '削峰套利',
-          value:1
+          value: 1
         },
         {
-          label:'需求响应',
+          label: '需求响应',
-          value:2
+          value: 2
         },
         {
-          label:'自发自用',
+          label: '自发自用',
-          value:3
+          value: 3
-        },
+        }
       ]
     }
   },
@@ -148,7 +149,6 @@ export default {
       } catch (error) {
         //统一处理报错提示
         this.$refs.comTable.loading = false
-
       }
     },
     operateForm(type, record = {}) {
@@ -166,9 +166,9 @@ export default {
         this.formState = record
         this.getRuleFormInfo(record)
         break
-    
+
       case 'del':
-        this.handleDelete([record.api_id],this.getList)
+        this.handleDelete([record.api_id], this.getList)
 
         break
 
@@ -182,7 +182,7 @@ export default {
       }
     },
     //  删除操作
-    async handleDelete(id,callback) {
+    async handleDelete(id, callback) {
       const that = this
       Modal.confirm({
         title: '你确认删除数据吗?',
@@ -190,10 +190,10 @@ export default {
 
         async onOk() {
           try {
-            const res = await getReq('/deleteServiceApi',{api_id:id})
+            const res = await getReq('/deleteServiceApi', { api_id: id })
             if (res.errcode === 0) {
               this.$message.success(res.errmsg)
-              this.pageOption.page=1
+              this.pageOption.page = 1
               callback()
             } else {
               throw res
@@ -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
         })

web/src/views/system/station.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="station">
-    <searchBox
+    <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
-      :btn-option-list="btnOptionList"
-      @onSearch="onSearch"
-      @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) => {
-          e.ruleForm[i.key] = row ? row[i.key] : ''
+          if (i.key == 'work_mode') {
-          e.ruleForm.id = row.id
+            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] : ''
+          }
         })
       })
     },
@@ -258,9 +273,9 @@ export default {
 .station {
   height: 100%;
 
+   padding: 0 20px;
   .content-table {
-    height: calc(100% - 70px);
+    height: calc(100% - 92px);
-    padding: 10px;
   }
 }
 </style>

web/src/views/system/user.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="user">
-    <searchBox
+    <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
-      :btn-option-list="btnOptionList"
-      @onSearch="onSearch"
-      :search-options="searchOptions"
-      @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,13 +49,13 @@ import { createVNode } from 'vue'
 export default {
   name: '',
   components: {
-    EditCom,
+    EditCom
   },
   props: {},
   data() {
     return {
       tableOption: {
-        select:false
+        select: false
       },
       formModal: false,
       formState: {},
@@ -134,9 +135,9 @@ export default {
         this.formState = record
         this.getRuleFormInfo(record)
         break
-    
+
       case 'del':
-        this.handleDelete([record.user_id],this.getList)
+        this.handleDelete([record.user_id], this.getList)
 
         break
 
@@ -150,7 +151,7 @@ export default {
       }
     },
     //  删除操作
-    async handleDelete(id,callback) {
+    async handleDelete(id, callback) {
       const that = this
       this.$Modal.confirm({
         title: '你确认删除数据吗?',
@@ -158,10 +159,10 @@ export default {
 
         async onOk() {
           try {
-            const res = await getReq('/deleteUser',{user_id:id})
+            const res = await getReq('/deleteUser', { user_id: id })
             if (res.errcode === 0) {
               this.$message.success(res.errmsg)
-              this.pageOption.page=1
+              this.pageOption.page = 1
               callback()
             } else {
               throw res
@@ -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);
+    height: calc(100% - 92px);
-    padding: 10px;
   }
 }
 </style>