根据甲方意见修改：删除光伏等无数据的展示模块、储能充放电/收益按月+季度+周+年展示、修改首页展示内容

2026-05-27 18:59:26 +08:00 · 2026-05-27 16:35:12 +08:00
parent 9c51037aa1
commit 0f484a4a68
22 changed files with 788 additions and 193 deletions
--- a/web/src/components/Home/Charge.vue
+++ b/web/src/components/Home/Charge.vue
@@ -143,7 +143,7 @@ export default {
          // areaStyle: {
          //   global: false,
          //   color: {
-          //     type: 'linear', x: 0, y: 0,　x2: 0,　y2: 1,
+          //     type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
          //     colorStops: [
          //       { offset: 0, color: JSON.parse(JSON.stringify(item)).colorStart }, // 顶部颜色
          //       { offset: 1, color: JSON.parse(JSON.stringify(item)).colorEnd } // 底部颜色
--- a/web/src/components/Home/Modal.vue
+++ b/web/src/components/Home/Modal.vue
@@ -69,7 +69,7 @@ export default {
        { title: '场站信息', class: '', componentId: markRaw( PrefabCabin), infoKey: 'prefab' },
        { title: '储能运行信息', class: 'operation-status', componentId: markRaw(OperationalInfo), infoKey: 'storage' },
        { title: '充电运行信息', class: 'operation-status', componentId: markRaw(OperationalInfo), infoKey: 'charge' },
-        { title: '光伏运行信息', class: 'operation-status', componentId: markRaw(OperationalInfo), infoKey: 'pv' },
+        // { title: '光伏运行信息', class: 'operation-status', componentId: markRaw(OperationalInfo), infoKey: 'pv' },
        { title: '电网侧运行信息', class: 'operation-status', componentId: markRaw(OperationalInfo), infoKey: 'grid' },
        { title: '环境信息', class: 'envInfo', componentId:markRaw( EnvInfo), infoKey: 'envTotal' }
      ],
--- a/web/src/components/Home/Modal/PrefabCabin.vue
+++ b/web/src/components/Home/Modal/PrefabCabin.vue
@@ -64,14 +64,15 @@ export default {
      ],
      myItemsStats: [
        { key: 'storage_device_num', value: '', label: '储能设备数量', d: '个' },
-        { key: 'solar_device_num', value: '', label: '光伏设备数量', d: '个' },
-        { key: 'charge_device_num', value: '', label: '充电设备数量', d: '个' },
-        { key: 'solar_elect_grid', value: '', label: '上网总电量', d: 'kWh' },
+        // { key: 'solar_device_num', value: '', label: '光伏设备数量', d: '个' },
+        
        { key: 'storage_elect_in', value: '', label: '储能充电总电量', d: 'kWh' },
-        { key: 'solar_elect_gen', value: '', label: '光伏发电总电量', d: 'kWh' },
-        { key: 'charge_elect', value: '', label: '充电桩充电总电量', d: 'kWh' },
-        { key: 'income_elect', value: '', label: '收益总金额', d: '元' },
        { key: 'storage_elect_out', value: '', label: '储能放电总电量', d: 'kWh' },
+        // { key: 'solar_elect_gen', value: '', label: '光伏发电总电量', d: 'kWh' },
+        { key: 'charge_device_num', value: '', label: '充电设备数量', d: '个' },
+        { key: 'charge_elect', value: '', label: '充电桩充电总电量', d: 'kWh' },
+        // { key: 'solar_elect_grid', value: '', label: '上网总电量', d: 'kWh' },
+        { key: 'income_elect', value: '', label: '收益总金额', d: '元' },
      ],
      list: [
        {
--- a/web/src/components/Home/Modal/StationPower.vue
+++ b/web/src/components/Home/Modal/StationPower.vue
@@ -136,8 +136,8 @@ export default {
          smooth: true,
          type: 'line',
          barWidth: 10,
-          itemStyle: { borderRadius: 10, color: item.lineColor　},
-          emphasis: {　focus: 'series'　},
+          itemStyle: {borderRadius: 10, color: item.lineColor},
+          emphasis: {focus: 'series'},
          global: false,
          showSymbol: false,
          data: []
--- a/web/src/components/Home/Modal/StationVoltage.vue
+++ b/web/src/components/Home/Modal/StationVoltage.vue
@@ -123,8 +123,8 @@ export default {
          smooth: true,
          type: 'line',
          barWidth: 10,
-          itemStyle: { borderRadius: 10, color: item.lineColor　},
-          emphasis: {　focus: 'series'　},
+          itemStyle: {borderRadius: 10, color: item.lineColor},
+          emphasis: {focus: 'series'},
          global: false,
          showSymbol: false,
          data: []
--- a/web/src/components/Home/MyChartBar.vue
+++ b/web/src/components/Home/MyChartBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mychart">
+  <div class="mychartbox">
    <!-- <div class="text_Cur">
      <div v-for="item in curList" :key="item.key">
        <div>{{ item.name }}</div>
@@ -19,7 +19,7 @@ export default {
  props: {
    propKey: { type: String, default: '' },
    propData: { type: Array, default: () => [] },
-    propOption: { type: Object, default: { series: [] } }
+    propOption: { type: Object, default: ()=> ({ series: [] }) }
  },
  data() {
    return {
@@ -162,11 +162,13 @@ export default {
 </script>

 <style lang="scss" scoped>
-.mychart {
+.mychartbox {
  height: calc(100% - 35px);
-  background-color: #80808010;
+  // background-color: #80808010;
+  background-color: rgba(33, 105, 195, 0.12);

  .mychart {
+    margin-left: 5px;
    height: calc(100% - 5px);
  }
 }
--- a/web/src/components/Home/MyChartLine.vue
+++ b/web/src/components/Home/MyChartLine.vue
@@ -0,0 +1,178 @@
+<template>
+  <div class="mychartbox">
+    <!-- <div class="text_Cur">
+      <div v-for="item in curList" :key="item.key">
+        <div>{{ item.name }}</div>
+        <span class="mark">{{ item.value ? item.value : 0 }}</span>
+        <span class="d">{{ item.d }}</span>
+      </div>
+    </div> -->
+    <div :id="myChartId" class="mychart"></div>
+  </div>
+</template>
+
+<script>
+import { processData } from '@/utils/dealWithData'
+
+export default {
+  name: '',
+  props: {
+    propKey: { type: String, default: '' },
+    propData: { type: Array, default: () => [] },
+    propOption: { type: Object, default: ()=> ({ series: [] }) }
+  },
+  data() {
+    return {
+      myChartId: 'mychart' + Math.floor(Math.random() * 9999),
+      myEchart: null,
+      xData: [],  // EChart的 x 轴 option
+      yData: [],  // EChart的 y 轴 option
+    }
+  },
+  watch: {
+    propData: {
+      handler(newVal, oldVal) {
+        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+          this.$nextTick(() => {
+            this.drawLineChart()
+          })
+        }
+      },
+      immediate: true, // 初始化时更新
+      deep: true // 确保深度比较
+    },
+    propOption: {
+      handler(newVal, oldVal) {
+      },
+      immediate: true,
+    }
+  },
+  mounted() { },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+    if (this.myEchart) {
+      this.myEchart.dispose()
+      this.myEchart = null
+    }
+  },
+
+  methods: {
+    handleResize() {
+      if (this.myEchart) {
+        this.myEchart.resize()
+      }
+    },
+
+    getChartData() {
+      const keyList = this.propOption.series.map((item) => item.key)
+      const result = processData(this.propData, keyList)
+      this.xData = result.dates
+      this.yData = result.values
+
+      if (this.xData.length == 0) {
+        const today = new Date();
+        for (let i = 6; i >= 0; i--) {
+          const date = new Date(today); // 每次创建新日期实例（避免修改原日期）
+          date.setDate(today.getDate() - i); // 往前推 i 天
+          const year = date.getFullYear();
+          const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份 0-11，需 +1
+          const day = String(date.getDate()).padStart(2, '0');
+          this.xData.push(`${month}-${day}`);
+
+          for (let j = 0; j < keyList.length; j++) {
+            if (j == 0) this.yData.push([])
+            else this.yData[j].push(0)
+          }
+        }
+      }
+    },
+
+    drawLineChart(activeKey) {
+
+      this.getChartData(activeKey)
+      if (this.myEchart) {
+        this.myEchart.dispose()
+      }
+      const chartDom = document.getElementById(this.myChartId)
+      if (!chartDom) return;
+      let myEchart = this.$echarts.init(chartDom)
+      this.myEchart = myEchart
+      let option = {
+        animation: false,
+        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+        legend: { top: 10, textStyle: { color: '#fff' } },
+        grid: { left: '3%', right: '4%', bottom: '1%', top: '32%' },
+        xAxis: {
+          type: 'category',
+          data: this.xData,
+          axisLine: { lineStyle: { type: 'dashed', color: '#435463' } },
+          axisLabel: { color: '#fff' }
+        },
+        yAxis: [],
+        series: []
+      }
+
+      const yAxisItem = {
+        name: '',
+        type: 'value',
+        // min: 0,
+        // max: 2,
+        //interval: 1,  // 强制步长
+        splitNumber: 2, // 分段数
+        nameTextStyle: { color: '#fff' },
+        splitLine: { lineStyle: { type: 'dashed', color: '#435463' } },
+        axisLabel: { color: '#fff', fontSize: 12 },
+      }
+
+      if (this.propOption.yAxis) {
+        this.propOption.yAxis.forEach((item, index) => {
+          const maxVal = Math.max(...this.yData[index]);
+          if (maxVal && maxVal > 0) {
+            // yAxisItem.min = undefined
+            // yAxisItem.max = maxVal
+          }
+          yAxisItem.name = item
+          option.yAxis.push(yAxisItem)
+        })
+      }
+
+      if (this.propOption.series) {
+        this.propOption.series.forEach((item, index) => {
+          option.series.push({
+            name: item.name,
+            type: item.type ? item.type : 'bar',
+            color: item.color,
+            data: this.yData[index],
+            barWidth: '20%',
+            // 关键：强制显示超出坐标轴范围的点
+            symbolKeep: true
+          })
+        })
+      }
+
+      if (option.yAxis.length == 0) { option.yAxis.push(yAxisItem) }
+      option && myEchart.setOption(option)
+      this.setupResizeListener()
+
+    },
+    setupResizeListener() {
+      window.removeEventListener('resize', this.handleResize);
+      window.addEventListener('resize', this.handleResize)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mychartbox {
+  height: calc(100% - 35px);
+  // background-color: #80808010;
+  // background-color: rgba(33, 105, 195, 0.12);
+  background-color: rgba(33, 105, 195, 0.12);
+
+  .mychart {
+    margin-left: 5px;
+    height: calc(100% - 5px);
+  }
+}
+</style>
--- a/web/src/components/Home/TotalStation.vue
+++ b/web/src/components/Home/TotalStation.vue
@@ -2,8 +2,8 @@
  <div class="total-station">
    <div class="content-my">
      <div v-for="item in myItems" :key="item.key" :class="`item ${item.class}`" >
-        <span style="color:#d0d0d0; margin: 0 0 0 0">{{ item.label }}</span>
-        <div style="margin-left: 20%;">
+        <span style="height: 50%; color:#d0d0d0; margin: 0 0 0 0; font-size:14px; font-weight: 600; display: flex; align-items: center;">{{ item.label }}</span>
+        <div style="height: 50%; margin-left: 20%;">
          <span :style="{ 'color': item.color, 'font-size':'16px', 'font-weight':600}">{{ item.value ? item.value : (item.d ? 0 : '--') }}</span>
          <span style="font-size:16px; margin-left: 8px;">{{ item.d }}</span>
        </div>
@@ -53,18 +53,10 @@ export default {
    return {
      myItems: [ 
        { color:'#a0f0a0', key: 'runDays', value: 0, label:'场站运行天数', d:'天'},
-        // { color:'#a0f0a0', key: 'storage_device_num', value: 0, label:'储能设备数量', d:'个'},
-        // { color:'#a0f0a0', key: 'charge_device_num', value: 0, label:'充电设备数量', d:'个'},
-        // { color:'#a0f0a0', key: 'solar_device_num', value: 0, label:'光伏设备数量', d:'个'},
-        // { color:'#a0f0a0', key: 'solar_elect_grid', value: 0, label:'上网总电量', d:'kWh'},
        { color:'#a0f0a0', key: 'storage_elect_in', value: 0, label:'累计储能总电量', d:'kWh'},
-        // { color:'#a0f0a0', key: 'charge_elect_out', value: 0, label:'充电桩充电总电量', d:'kWh'},
-        // { color:'#a0f0a0', key: 'solar_elect_gen', value: 0, label:'光伏发电总电量', d:'kWh'},
        { color:'#a0f0a0', key: 'income_elect', value: 0, label:'累计收益总金额', d:'元'},
-        // { color:'#a0f0a0', key: 'storage_elect_out', value: 0, label:'储能放电总电量', d:'kWh'},
        { color:'#a0f0a0', key: 'storage_status', value: '空闲', label:'储能状态'},
        { color:'#a0f0a0', key: 'charge_status', value: '空闲', label:'充电状态'},
-        { color:'#a0f0a0', key: 'pv_status', value: '离线', label:'光伏状态'},
      ],
    }
  },
--- a/web/src/components/Home/onLine.vue
+++ b/web/src/components/Home/onLine.vue
@@ -2,7 +2,7 @@
  <div class="onLine">
    <div class="content-my">
      <div v-for="item in myItems" :key="item.key" :class="`item ${item.class}`" >
-        <span style="height: 50%; color:#d0d0d0; margin:0 0 0 0">{{ item.label }}</span>
+        <span style="height: 50%; color:#d0d0d0; margin:0 0 0 0; font-size:14px; font-weight: 600; display: flex; align-items: center;">{{ item.label }}</span>
        <div style="height: 50%; margin-left: 20%;">
          <span style="color:#a0f0a0; font-size:16px; font-weight:600;">{{ item.value ? item.value : 0 }}</span>
          <span style="font-size:16px; margin-left: 8px;">{{ item.d }}</span>
@@ -55,11 +55,11 @@ export default {
        { key: 'runDays', value: 0, label:'系统运行天数', d:'天'},
        { key: 'storage_device_num', value: 0, label:'储能设备数量', d:'个'},
        { key: 'charge_device_num', value: 0, label:'充电设备数量', d:'个'},
-        { key: 'solar_device_num', value: 0, label:'光伏设备数量', d:'个'},
+        // { key: 'solar_device_num', value: 0, label:'光伏设备数量', d:'个'},
        { key: 'solar_elect_grid', value: 0, label:'上网总电量', d:'kWh'},
        { key: 'storage_elect_in', value: 0, label:'储能充电总电量', d:'kWh'},
        { key: 'charge_elect_out', value: 0, label:'充电桩充电总电量', d:'kWh'},
-        { key: 'solar_elect_gen', value: 0, label:'光伏发电总电量', d:'kWh'},
+        // { key: 'solar_elect_gen', value: 0, label:'光伏发电总电量', d:'kWh'},
        { key: 'income_elect', value: 0, label:'累计收益总金额', d:'元'},
        { key: 'storage_elect_out', value: 0, label:'储能放电总电量', d:'kWh'},
      ],
@@ -182,7 +182,7 @@ export default {
  justify-content: flex-start;
  height: 100%;
  .item {
-    width: calc(25% - 6px);
+    width: calc(33% - 6px);
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 8px;
--- a/web/src/components/SearchBox.vue
+++ b/web/src/components/SearchBox.vue
@@ -35,8 +35,12 @@
            </div>
            <!-- 日期选择框 date-->
            <div class="date-picker" v-if="item.type == 'datePick1'">
-              
-                <a-range-picker v-model:value="formData[item.key]"    value-format="YYYY-MM-DD" @change="$emit('onSearch', formData)" />
+              <a-range-picker :locale="locale"
+                v-model:value="formData[item.key]"
+                value-format="YYYY-MM-DD"
+                :picker="datePicker"
+                @openChange="handleOpenChange"
+                @change="handleChange(item.key)" />
            </div>
            <!-- 输入框 -->
            <div class="input" v-if="item.type == 'input'">
@@ -91,10 +95,21 @@
 </template>

 <script>
+import {ref} from 'vue'
+import zhCN from 'ant-design-vue/es/locale/zh_CN'
+import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
+import 'dayjs/locale/zh-cn'
+
+
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn' 
+dayjs.locale('zh-cn')
+
 export default {
  name: 'SearchBox',
  components: {},
  props: {
+    datePicker: { type: String, default: ()=> { return "date" }},
    titleOption: {
      type: Object,
      default: () => {
@@ -143,6 +158,24 @@ export default {
      },
      immediate: true,
      deep: true
+    },
+    datePicker: {
+      handler(newVal) {
+        // 临时：处理 statisticalAnalysis.vue 中设置日期选择模式时，时间区间的默认值修正
+        // key = 'time' 只在 statisticalAnalysis.vue 中设置生效
+        const key = 'time';
+        if (!this.formData[key]) {
+          // 今天的日期
+          const date = new Date();
+          const dtNow = date.toISOString().split('T')[0];
+          //  7天前
+          date.setDate(date.getDate() - 7);
+          const dtStart = date.toISOString().split('T')[0];
+          this.formData[key] = [dtStart, dtNow]
+        }
+        this.handleChange(key)
+      },
+      immediate: true,
    }
  },
  mounted() {
@@ -169,14 +202,62 @@ export default {
    },
    handelClick(type) {
      this.$emit('operateForm', type)
-    }
+    },

-    // handleChange() {
-    //   this.$emit("onSearch", this.formData);
-    // },
+    handleChange(key) {
+      if (this.formData[key] && this.formData[key][0]) {
+        if (this.datePicker == "week") {
+          this.formData[key][0] = dayjs(this.formData[key][0]).startOf('week').format('YYYY-MM-DD')
+        } else if (this.datePicker == "month") {
+          this.formData[key][0] = dayjs(this.formData[key][0]).startOf('month').format('YYYY-MM-DD')
+        } else if (this.datePicker == "quarter") {
+          this.formData[key][0] = dayjs(this.formData[key][0]).startOf('quarter').format('YYYY-MM-DD')
+        } else if (this.datePicker == "year") {
+          this.formData[key][0] = dayjs(this.formData[key][0]).startOf('year').format('YYYY-MM-DD')
+        }
+      }
+      if (this.formData[key] && this.formData[key][1]) {
+        if (this.datePicker == "week") {
+          this.formData[key][1] = dayjs(this.formData[key][1]).endOf('week').format('YYYY-MM-DD')
+        } else if (this.datePicker == "month") {
+          this.formData[key][1] = dayjs(this.formData[key][1]).endOf('month').format('YYYY-MM-DD')
+        } else if (this.datePicker == "quarter") {
+          this.formData[key][1] = dayjs(this.formData[key][1]).endOf('quarter').format('YYYY-MM-DD')
+        } else if (this.datePicker == "year") {
+          this.formData[key][1] = dayjs(this.formData[key][1]).endOf('year').format('YYYY-MM-DD')
+        }
+      }
+      this.$emit("onSearch", this.formData);
+    },
    // pressEnter() {
    //   this.$emit("onSearch", this.formData);
    // },
+
+    handleOpenChange() {
+      if (open) {
+        // 延迟执行以确保 DOM 已渲染
+        setTimeout(() => {
+          const cells = document.querySelectorAll('.ant-picker-cell');
+ 
+          cells.forEach((cell) => {
+            const title = cell.getAttribute('title');
+            const innerDiv = cell.querySelector('.ant-picker-cell-inner');
+        
+            if (title && innerDiv) {
+              // if (title.includes('Q1')) {
+              //   innerDiv.textContent = '第一季度';
+              // } else if (title.includes('Q2')) {
+              //   innerDiv.textContent = '第二季度';
+              // } else if (title.includes('Q3')) {
+              //   innerDiv.textContent = '第三季度';
+              // } else if (title.includes('Q4')) {
+              //   innerDiv.textContent = '第四季度';
+              // }
+            }
+          });
+        }, 100);
+      }
+    }
  }
 }
 </script>
@@ -191,6 +272,7 @@ input:-internal-autofill-selected {
 :deep(.anticon) {
  color: var(--theme-text-default) !important;
 }
+
 .search {
  // height:70px;
  color: #fff;
@@ -259,7 +341,11 @@ input:-internal-autofill-selected {
    }

    .label {
-      width: 80px;
+      // width: 65px;
+      flex: 1;  /* 占满剩余空间 */
+      text-align: right;  /* 文字右对齐 */
+      white-space: nowrap;  /* 防止换行 */
+      margin-right: 10px;  /* 右侧间隔10px */
      color: var(--theme-text-default);
    }
    .top-right,
@@ -338,4 +424,44 @@ input:-internal-autofill-selected {
    }
  }
 }
+
+
+
+// :deep(.ant-picker-cell-inner) {
+//    width: 75px !important;
+//  }
+
+//  /* 深度穿透修改季度/月份/日期面板里面的宽度 */
+// :deep(.ant-picker-dropdown .ant-picker-cell-inner) {
+//   width: 100px !important; /* 你想要的宽度 */
+// }
+/* 方法1：匹配任意hash类名 */
+// :deep(.ant-picker-dropdown .ant-picker-quarter-panel .ant-picker-cell-inner) {
+//   width: 100px !important;
+//   min-width: 100px !important;
+// }
+
+// /* 方法2：如果上面不生效,提高特异性 */
+// :deep(.ant-picker-dropdown div.ant-picker-quarter-panel .ant-picker-cell-inner) {
+//   width: 100px !important;
+//   min-width: 100px !important;
+// }
+
+// /* 方法3：双重类名提高权重 */
+// :deep(.ant-picker-dropdown .ant-picker-quarter-panel .ant-picker-cell.ant-picker-cell-inner) {
+//   width: 100px !important;
+//   min-width: 100px !important;
+// }
+// /* 放到全局样式文件(如 global.css 或 App.vue 中不加 scoped) */
+// .ant-picker-dropdown .ant-picker-quarter-panel .ant-picker-cell-inner {
+//   width: 100px !important;
+//   min-width: 100px !important;
+// }
+
+/* 或者使用 :global 逃逸 scoped */
+:global(.ant-picker-dropdown .ant-picker-quarter-panel .ant-picker-cell-inner) {
+  width: 50px !important;
+  min-width: 50px !important;
+}
+
 </style>
--- a/web/src/components/monitor/videos.vue
+++ b/web/src/components/monitor/videos.vue
@@ -152,10 +152,10 @@ export default {
          key: 'fire40',
          name: '消防信息'
        },
-        {
-          key: 'airc',
-          name: '空调信息'
-        },
+        // {
+        //   key: 'airc',
+        //   name: '空调信息'
+        // },
      ],
      tableDatas: {},

@@ -270,7 +270,7 @@ export default {
    height: 100%;
    display: flex;
    .env-item {
-      width: 24%;
+      width: 30%;

      .tab {
        &>span {
--- a/web/src/components/system/policyForm.vue
+++ b/web/src/components/system/policyForm.vue
@@ -460,14 +460,14 @@ export default {
        }
        newForm.value = JSON.stringify(data)
        delete newForm.period5
-     } else if (type == 7) { // 功率平衡
+      } else if (type == 7) { // 功率平衡
        const data = {
          charge: charge.toFixed(2),
          discharge: discharge.toFixed(2)
        }
        newForm.value = JSON.stringify(data)
        delete newForm.period5
-     } else if (type == 8) { // 光伏优先消纳
+      } else if (type == 8) { // 光伏优先消纳
        const data = {
          charge: charge.toFixed(0),
          discharge: discharge.toFixed(0),
@@ -476,12 +476,12 @@ export default {
        newForm.value = JSON.stringify(data)
        delete newForm.period5
      } else if (type == 9) { // 离网运行
-          const data = {
-            charge: charge.toFixed(0),
-            discharge: discharge.toFixed(0)
-          }
-          newForm.value = JSON.stringify(data)
-          delete newForm.period5
+        const data = {
+          charge: charge.toFixed(0),
+          discharge: discharge.toFixed(0)
+        }
+        newForm.value = JSON.stringify(data)
+        delete newForm.period5
      }
      delete newForm.price
      this.validateform(newForm)
--- a/web/src/utils/config.js
+++ b/web/src/utils/config.js
@@ -6,7 +6,7 @@ export const policyTypes = [

  {
    value: '5',
-    label: '自定时段'
+    label: '运营支撑'
  }
  // {
  //   value: '2',
--- a/web/src/views/monitor.vue
+++ b/web/src/views/monitor.vue
@@ -154,16 +154,16 @@ export default {
            // { v: '数量', key: 'num' }
          ]
        },
-        {
-          name: '光伏设备',
-          power: 60,
-          num: 62,
-          systemType: 3,
-          titles: [
-            //{ v: '总功率', key: 'power', sufix: 'kW' },
-            // { v: '数量', key: 'num' }
-          ]
-        },
+        // {
+        //   name: '光伏设备',
+        //   power: 60,
+        //   num: 62,
+        //   systemType: 3,
+        //   titles: [
+        //     //{ v: '总功率', key: 'power', sufix: 'kW' },
+        //     // { v: '数量', key: 'num' }
+        //   ]
+        // },
        {
          name: '辅助设备',
          power: 60,
--- a/web/src/views/statisticalAnalysis.vue
+++ b/web/src/views/statisticalAnalysis.vue
@@ -12,9 +12,21 @@
            <span>{{ item.name }}</span>
          </div>
        </div>
+
+        <div v-if="activeKey == 4">
+          <a-radio-group v-model:value="datePickerMode" class="my-radio-group" @change="onStatTypeChanged">
+            <a-radio-button style="width: 60px;" value="date">天</a-radio-button>
+            <a-radio-button style="width: 60px;" value="week">周</a-radio-button>
+            <a-radio-button style="width: 60px;" value="month">月</a-radio-button>
+            <a-radio-button style="width: 60px;" value="quarter">季度</a-radio-button>
+            <a-radio-button style="width: 60px;" value="year">年</a-radio-button>
+          </a-radio-group>
+        </div>
+
        <searchBox
          class="searchBox"
          ref="searchBox"
+          :date-picker="datePickerMode"
          :btn-option-list="btnOptionList"
          :search-options="searchOptions"
          :title-option="{ title: '', info: '' }"
@@ -59,9 +71,22 @@
      </div>

      <div v-if="activeKey == 4" class="content-table-4" >
+        <div style="display: flex; height: 30%; margin-bottom: 10px; ">
+          <MyChartLine style="width: calc(33% - 5px); height: 100%; margin-bottom: 10px;"
+            propKey="chart1"  :prop-option="chartPropOption1" :prop-data="chartData">
+          </MyChartLine>
+          <MyChartLine style="width:calc(33% - 5px); height: 100%; margin-left: 10px;"
+            propKey="chart2" :prop-option="chartPropOption2" :prop-data="chartData">
+          </MyChartLine>
+          <MyChartLine style="width:calc(33% - 5px); height: 100%; margin-left: 10px;"
+            propKey="chart3" :prop-option="chartPropOption3" :prop-data="chartData">
+          </MyChartLine>
+
+        </div>
+
        <ComTable
          :tableH="tableH"
-          :columns="columns"
+          :columns="tableColumns"
          :table-data="tableData"
          :table-option="{ page: false, select: false}">
          <template #action="record">
@@ -77,12 +102,47 @@ import energyEchart from '@/components/statisticalAnalysis/energyEchart.vue'
 import searchBox from '@/components/SearchBox.vue'
 import { postReq, getReq } from '@/request/api'
 import {downloadByUrl} from '@/utils/download'
+import MyChartLine from '@/components/Home/MyChartLine.vue'
+
+import { ref, computed } from 'vue'
+import dayjs from 'dayjs'
+
 export default {
  name: 'StatisicalAnView',
  components: { energyEchart, searchBox },

  data() {
    return {
+      chartInfo: { title: '系统运行统计', infoKey: 'total' },
+      chartPropOption1: {
+        yAxis: ['电量(kWh)'],
+        series: [
+          { name: '充电电量', key: 'E_in', color: '#2a82e4' },
+          { name: '放电电量', key: 'E_out', color: '#5aabf2' },
+        ]
+      },
+      chartData: [
+      ],
+      chartPropOption2: {
+        yAxis: ['充放使用率(%)'],
+        series: [
+          { name: '使用率', key: 'E_rate', color: '#2a82e4', type: "line" },
+        ]
+      },
+      chartPropOption3: {
+        yAxis: ['费用(元)'],
+        series: [
+          { name: '充电费', key: 'fee_in', color: '#2a82e4', type: "bar" },
+          { name: '放电费', key: 'fee_out', color: '#5aabf2', type: "bar" },
+          { name: '收益', key: 'income', color: '#0cdaf5', type: "bar" },
+        ]
+      },
+      datePickerMode: "date",
+      formDatetime: {
+        start: '',
+        end: ''
+      },
+
      btnOptionList: [],
      loading: {
        chart: false,
@@ -99,7 +159,7 @@ export default {
          key: 'time'
        },
        {
-          label: '场站切换',
+          label: '场站选择',
          type: 'slot',
          value: [],
          key: 'station',
@@ -455,23 +515,10 @@ export default {
      activeKey: 1,
      interval: null,
      tabList: [
-        {
-          key: 1,
-          name: '储能设备'
-        },
-
-        {
-          key: 2,
-          name: '充电设备'
-        },
-        {
-          key: 3,
-          name: '光伏设备'
-        },
-        {
-          key: 4,
-          name: '策略运行效益'
-        }
+        { key: 1, name: '储能设备' },
+        { key: 2, name: '充电设备' },
+        // { key: 3, name: '光伏设备' },
+        { key: 4, name: '运行效益' }
      ],
      tableList: {
        1: {
@@ -657,15 +704,22 @@ export default {
          }
        }
      },
-      columns: [
+      //每个站显示使用率=放电量/充电量、收益=放电费-充电费，按周、月、季度、年；
+      tableColumns: [
        { title: '日期', dataIndex: 'dt', key: 'dt' },
-        { title: '时段', dataIndex: 'period', key: 'period', ellipsis: true},  // fixed: 'left', // filterable: true
-        { title: '储能充电电量(kWh)', dataIndex: 'E_in', key: 'E_in' },
-        { title: '储能放电电量(kWh)', dataIndex: 'E_out', key: 'E_out' },
-        { title: '电网价格(元/kWh)', dataIndex: 'grid_price', key: 'gridPrice' },
-        { title: '充电价格(元/kWh)', dataIndex: 'charge_price', key: 'chargePrice' },
-        { title: '收益(元)', dataIndex: 'income', key: 'income' },
-        { title: '操作', dataIndex: 'operate', key: 'operate', scopedSlots: { customRender: 'action' } }
+        { title: '储能充电电量(kWh)', dataIndex: 'E_in', key: 'E_in'},
+        { title: '储能放电电量(kWh)', dataIndex: 'E_out', key: 'E_out'},
+        { title: '充放使用率(%)', dataIndex: 'E_rate', key: 'E_rate'},
+        { title: '储能充电费(元)', dataIndex: 'fee_in', key: 'fee_in'},
+        { title: '储能放电费(元)', dataIndex: 'fee_out', key: 'fee_out'},
+        { title: '收益(元)', dataIndex: 'income', key: 'income'},
+        // { title: '时段', dataIndex: 'period', key: 'period', ellipsis: true},  // fixed: 'left', // filterable: true
+        // { title: '储能充电电量(kWh)', dataIndex: 'E_in', key: 'E_in' },
+        // { title: '储能放电电量(kWh)', dataIndex: 'E_out', key: 'E_out' },
+        // { title: '电网价格(元/kWh)', dataIndex: 'grid_price', key: 'gridPrice' },
+        // { title: '充电价格(元/kWh)', dataIndex: 'charge_price', key: 'chargePrice' },
+        // { title: '收益(元)', dataIndex: 'income', key: 'income' },
+        // { title: '操作', dataIndex: 'operate', key: 'operate', scopedSlots: { customRender: 'action' } }
      ],

      tableData: [
@@ -676,17 +730,21 @@ export default {
        // {period: "总计", gridPrice: "0.8", chargePrice: "0.6", income: "0.2", elect: "35", incomeTotal: "100"}
       
      ],
-      tableH: 500
+      tableH: 500,
    }
  },
  watch: {
    activeKey: {
      handler(newVal) {
        if (!newVal) return
+
+        console.log("activeKey=", this.activeKey)
        // 清除之前的数据
        this.resetDataForInactiveKey()

        if (newVal !== 4) {
+          this.datePickerMode = "date"
+ 
          // 并行加载新数据
          Promise.all([
            this.getStationList(),
@@ -699,6 +757,9 @@ export default {
          })
        }
        else {
+          console.log("4")
+          this.datePickerMode = "date"
+
          this.$nextTick(() => {
            const elementTable = document.getElementsByClassName('content-table-4')[0]
            if ( elementTable) {
@@ -709,6 +770,16 @@ export default {
        }
      },
      // immediate: true // 添加立即执行
+    },
+    datePickerMode: {
+      handler(newVal) {
+        if (!newVal) return
+        if (this.activeKey == 4) {
+          this.$nextTick(() => {
+            this.getEGridPeriod()
+          })
+        }
+      }
    }
  },
  mounted() {
@@ -717,13 +788,14 @@ export default {
    console.log('mounted')
    // 优先加载第一个页面(activeKey=1)所需的数据
    // this.btnOptionList = this.$getBtns(['导出'])
+
+    // searchBox 的 onSearch 在初始化的时候也会触发查询
    Promise.all([
      this.getStationList()
-      
    ]).then(()=>{
-      this.getEchartsListForActiveKey(),
-      this.getTableListForActiveKey()
-      this.getStatCharts()
+      // this.getEchartsListForActiveKey(),
+      // this.getTableListForActiveKey()
+      // this.getStatCharts()
      this.startRealtimeRefresh()
    })

@@ -740,6 +812,11 @@ export default {
      }
    },

+    onStatTypeChanged(e){
+      const newValue = e.target.value;
+      this.datePickerMode = newValue
+    },
+
    operateForm(type, record = {}) {
      if (type == 'output') {
        this.loading.chart=true
@@ -867,7 +944,6 @@ export default {
    },

    async getStationList() {
-      console.log('getsStationList')
      const params = {
        page_size: 1000,
        page: 1
@@ -901,17 +977,20 @@ export default {
      this.getTableListForActiveKey()
    },
    onSearch(data) {
+      // search组件日期变化
      this.paramsDate.start_date = data.time ? data.time[0] : ''
      this.paramsDate.end_date = data.time ? data.time[1] : ''

      if (this.activeKey !== 4) {
        this.tableList[this.activeKey].pageOption.page = 1
-        this.getStationList(), this.getStatCharts(),this.getEchartsListForActiveKey(), this.getTableListForActiveKey()
+        //this.getStationList(), 
+        this.getStatCharts(),this.getEchartsListForActiveKey(), this.getTableListForActiveKey()
      } else {
        this.getEGridPeriod()
      }
    },
    changeStation() {
+      // search组件场站变化
      if (this.activeKey != 4) {
        this.getStatCharts()
        this.getEchartsListForActiveKey()
@@ -946,32 +1025,47 @@ export default {
    },

    async getEGridPeriod() {
+      console.log("getEGridPeriod")
      const query = {
-        dt_start:this.paramsDate.start_date,
-        dt_end: this.paramsDate.end_date,
+        start_date:this.paramsDate.start_date,
+        end_date: this.paramsDate.end_date,
        station_id: this.stationId,
+        mode: this.datePickerMode
      }

-      if (!query.dt_end) {
+      if (!query.end_date) {
        const today = new Date();
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, '0');  // 处理月份：先+1（因为getMonth返回0-11），再补零到2位
        const day = String(today.getDate()).padStart(2, '0');  // 处理日期：直接补零到2位
-        query.dt_end = `${year}-${month}-${day}`;    // 拼接成指定格式
+        query.end_date = `${year}-${month}-${day}`;    // 拼接成指定格式
      }
-      if (!query.dt_start) {
-        query.dt_start = query.dt_end;
+      if (!query.start_date) {
+        query.start_date = query.end_date;
      }

+      // try {
+      //   const res = await getReq('/queryEGridPeriod', query)
+      //   if (res.errcode === 0) {
+      //     this.tableData = res.data
+      //   } else {
+      //     throw res
+      //   }
+      // } catch (error) {
+      //   this.tableData = []
+      // }
+
      try {
-        const res = await getReq('/queryEGridPeriod', query)
+        const res = await getReq('/queryStatStationMode', query)
        if (res.errcode === 0) {
          this.tableData = res.data
+          this.chartData = res.data
        } else {
          throw res
        }
-      } catch (error) {
+      }catch (error) {
        this.tableData = []
+        this.chartData = []
      }
    }
  }
@@ -1015,7 +1109,7 @@ export default {
  .content-table-4 {
    // overflow: scroll;
    width: 100%;
-    height: calc(100% - 52px);
+    height: calc(70% - 52px);
    min-height: 0;         
    //overflow: hidden; 

@@ -1024,6 +1118,43 @@ export default {
    // }
  }
 }
+
+/* 选中后的背景色 + 文字色 */
+.my-radio-group {
+  /* 修改默认状态的字体和背景色 */
+  :deep(.ant-radio-button-wrapper) {
+    /* 字体设置 */
+    // font-size: 14px;           /* 字体大小 */
+    // font-weight: 500;          /* 字体粗细 */
+    // font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; /* 字体类型 */
+    color: white;               /* 字体颜色 */
+    
+    /* 背景色 */
+    background-color: #08365c; /* 背景色 - 浅灰/白色调 */
+    border-color: #12fbff;     /* 边框颜色 */
+
+    /* 去掉右侧分割线颜色 */
+    &::before {
+      background-color: transparent !important;
+    }
+  }
+
+   /* 选中状态的背景色 */
+  :deep(.ant-radio-button-wrapper-checked) {
+    background-color: #1890ff; /* 自定义颜色 */
+    border-color: #12fbff;
+  }
+
+  // /* 鼠标 hover 效果（可选） */
+  // :deep(.ant-radio-button-wrapper:not(.ant-radio-button-checked):hover) {
+  //   border-color: #1890ff;
+  //   color:red;
+  //   // color: #1890ff;
+  // }
+}
+
+
+
 .main_content {
  overflow: scroll;
  height: calc(100% - 40px);
--- a/web/src/views/sub/Home.vue
+++ b/web/src/views/sub/Home.vue
@@ -32,7 +32,8 @@
            <span class="linear-text">{{ item.title }}</span>
          </div>
        </div>
-        <component :is="item.componentId" :prop-key="item.infoKey" :prop-option="compInfo[item.infoKey]"
+        <component 
+          :is="item.componentId" :prop-key="item.infoKey" :prop-option="compInfo[item.infoKey]"
          :prop-data="compDataStation[item.infoKey]">
        </component>
      </div>
@@ -50,6 +51,7 @@ import Pv from '@/components/Home/Pv.vue'
 import Alarm from '@/components/Home/Alarm.vue'
 import Map from '@/components/Home/Map.vue'
 import MyChartBar from '@/components/Home/MyChartBar.vue'
+import MyChartLine from '@/components/Home/MyChartLine.vue'
 import { getReq, postReq } from '@/request/api'
 import { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'
 import { markRaw } from 'vue'
@@ -80,82 +82,46 @@ export default {
        energy: {
          yAxis: ['电量(kWh)'],
          series: [
-            { name: '日充电电量', key: 'storage_elect_in', color: '#22E4FF' },
-            { name: '日放电电量', key: 'storage_elect_out', color: '#0E68E4' },
+            { name: '日充电电量', key: 'E_in', color: '#0E68E4' },
+            { name: '日放电电量', key: 'E_out', color: '#69b0e7' },
          ]
        },
-        pv: {
-          yAxis: ['电量(kWh)'],
+        rate: {
+          yAxis: ['百分比(%)'],
          series: [
-            { name: '日发电电量', key: 'solar_elect_gen', color: '#22E4FF' },
+            { name: '充放电使用率', key: 'E_rate', color: '#0E68E4', type: "line"},
          ]
        },
-        charge: {
-          yAxis: ['电量(kWh)'],
+        income: {
+          yAxis: ['金额(元)'],
          series: [
-            { name: '日充电电量', key: 'charge_elect', color: '#22E4FF' },
-          ]
-        },
-        stateGrid: {
-          yAxis: ['电量(kWh)'],
-          series: [
-            { name: '日上网电量', key: 'solar_elect_grid', color: '#22E4FF' },
+            { name: '充电费', key: 'fee_in', color: '#0E68E4' },
+            { name: '放电费', key: 'fee_out', color: '#69b0e7' },
+            { name: '收益', key: 'income', color: '#22E4FF' },
          ]
        }
      },
      listLeft: [
        { title: '系统运行统计', class: 'online-status', componentId: markRaw(onLine), infoKey: 'total' },
-        { title: '储能设备', class: 'energy-status', componentId: markRaw(MyChartBar), infoKey: 'energy' },
-        { title: '充电设备', class: 'charge-analysis', componentId: markRaw(MyChartBar), infoKey: 'charge' },
-        { title: '光伏设备', class: 'work-order', componentId: markRaw(MyChartBar), infoKey: 'pv' },
-        { title: '电网侧', class: 'work-order', componentId: markRaw(MyChartBar), infoKey: 'stateGrid' },
+        { title: '储能充放电量', class: 'energy-status', componentId: markRaw(MyChartBar), infoKey: 'energy' },
+        { title: '储能充放使用率', class: 'charge-analysis', componentId: markRaw(MyChartLine), infoKey: 'rate' },
+        { title: '储能收益', class: 'work-order', componentId: markRaw(MyChartBar), infoKey: 'income' }
      ],
      listRight: [
        { title: '场站运行统计', class: 'online-status', componentId: markRaw(TotalStation), infoKey: 'totalStation' },
-        { title: '储能设备', class: 'energy-status', componentId: markRaw(MyChartBar), infoKey: 'energy' },
-        { title: '充电设备', class: 'charge-analysis', componentId: markRaw(MyChartBar), infoKey: 'charge' },
-        { title: '光伏设备', class: 'work-order', componentId: markRaw(MyChartBar), infoKey: 'pv' },
-        { title: '电网侧', class: 'work-order', componentId: markRaw(MyChartBar), infoKey: 'stateGrid' },
+        { title: '储能充放电量', class: 'energy-status', componentId: markRaw(MyChartBar), infoKey: 'energy' },
+        { title: '储能充放使用率', class: 'charge-analysis', componentId: markRaw(MyChartLine), infoKey: 'rate' },
+        { title: '储能收益', class: 'work-order', componentId: markRaw(MyChartBar), infoKey: 'income' }
      ],
      stationList: [],
      selectStationId: '',
      list: [
-        {
-          title: '系统运行统计',
-          class: 'online-status',
-          componentId: markRaw(onLine),
-          infoKey: 'onLineTotal'
-        },
-        {
-          title: '运行分析',
-          class: 'stats-cards',
-          componentId: markRaw(Operational),
-          infoKey: 'operationTotal'
-        },
-        {
-          title: '储能设备',
-          class: 'energy-status',
-          componentId: markRaw(Energy),
-          infoKey: 'energy'
-        },
-        {
-          title: '充电设备',
-          class: 'charge-analysis',
-          componentId: markRaw(Charge),
-          infoKey: 'charge'
-        },
-        {
-          title: '光伏设备',
-          class: 'work-order',
-          componentId: markRaw(Pv),
-          infoKey: 'pv'
-        },
-        {
-          title: '告警信息',
-          class: 'alarm-stats',
-          componentId: markRaw(Alarm),
-          infoKey: 'alarm'
-        }
+        { title: '系统运行统计', class: 'online-status', componentId: markRaw(onLine), infoKey: 'onLineTotal' },
+        { title: '运行分析', class: 'stats-cards', componentId: markRaw(Operational), infoKey: 'operationTotal' },
+        { title: '储能设备', class: 'energy-status', componentId: markRaw(Energy), infoKey: 'energy' },
+        { title: '充电设备', class: 'charge-analysis', componentId: markRaw(Charge), infoKey: 'charge' },
+        { title: '光伏设备', class: 'work-order', componentId: markRaw(Pv), infoKey: 'pv' },
+        { title: '告警信息', class: 'alarm-stats', componentId: markRaw(Alarm), infoKey: 'alarm' }
      ],

      sysName: '',
@@ -291,19 +257,17 @@ export default {
          query.station_id = curStationId
        }
        //const arr = { 1: 'energy', 2: 'charge', 3: 'pv' }
-        const res = await getReq('/queryStatDayList', query)
+        const res = await getReq('/queryStatStationMode', query) // queryStatDayList
        if (res.errcode === 0) {
          if (curStationId) {
            this.compDataStation.energy
-              = this.compDataStation.charge
-              = this.compDataStation.pv
-              = this.compDataStation.stateGrid
+              = this.compDataStation.rate
+              = this.compDataStation.income
              = res.data
          } else {
            this.compData.energy
-              = this.compData.pv
-              = this.compData.stateGrid
-              = this.compData.charge
+              = this.compData.rate
+              = this.compData.income
              = res.data
          }
          // this.list.forEach((item) => {
@@ -391,7 +355,7 @@ export default {
      -webkit-background-clip: text;
      background-clip: text;
      font-size: 16px;
-      font-weight: 400;
+      font-weight: 800;
      margin-left: 6px;
    }

--- a/web/src/views/system/alarmLog.vue
+++ b/web/src/views/system/alarmLog.vue
@@ -1,6 +1,15 @@
 <template>
  <div class="alarmLog">
    <!-- <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox> -->
+    <searchBox class="searchBox" ref="searchBox" :search-options="searchOptions" :title-option="{ title: '', info: '' }">
+      <template #stationSelect="">
+        <a-select style="width: 200px" :dropdown-match-select-width="false" v-model:value="stationId" allow-clear @change="changeStation">
+          <a-select-option :value="option.value" v-for="option in stationList" :key="option.value">
+            {{ option.label }}
+          </a-select-option>
+        </a-select>
+      </template>
+    </searchBox>

    <div class="content-table">
      <ComTable
@@ -44,12 +53,11 @@ import { getReq, postReq } from '@/request/api.js'
 import EditCom from '@/components/EditCom.vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
 import { createVNode } from 'vue'
+import searchBox from '@/components/SearchBox.vue'

 export default {
  name: '',
-  components: {
-    EditCom
-  },
+  components: { EditCom, searchBox },
  props: {},
  data() {
    return {
@@ -61,6 +69,11 @@ export default {
        page: 1
      },
      btnOptionList: [],
+      searchOptions: [
+        {label: '场站选择', type: 'slot', value: [], key: 'station', slotName: 'stationSelect'}
+      ],
+      stationId: undefined,
+      stationList: [],
      paramsDate: {},
      tableData: []
    }
@@ -80,16 +93,42 @@ export default {
  mounted() {
    this.operateList = this.$getBtns(['查看'])
    // this.btnOptionList = this.$getBtns(['新增'])
-    this.getList()
+    Promise.all([
+      this.getStationList()
+    ]).then(()=>{
+      this.getList()
+    })
  },

  methods: {
+    // 下拉场站选择
+    changeStation() {
+      this.getList()
+    },
+    // 查询获取场站列表，查询日志列表时，stationId可以默认为空，查询全部
+    async getStationList() {
+      const params = { page_size: 1000, page: 1 }
+      try {
+        const res = await getReq('/queryStationList', params)
+        if (res.errcode === 0) {
+          this.stationList = res.data.map((item) => {
+            return { value: item.station_id, label: item.name }
+          })
+        } else {
+          const err = { tip: res.errmsg }
+          throw err
+        }
+      } catch (error) {
+        //统一处理报错提示
+      }
+    },
+
    async getList() {
      this.$refs.comTable.loading = true

      const { page, pageSize } = this.pageOption
-
      const params = {
+        station_id: this.stationId,
        ...this.paramsDate,
        page_size: pageSize,
        page
@@ -196,7 +235,7 @@ export default {
  padding: 20px;

  .content-table {
-    height: 100%;
+    height: calc(100% - 75px);
  }
 }
 </style>
--- a/web/src/views/system/log.vue
+++ b/web/src/views/system/log.vue
@@ -1,7 +1,15 @@
 <template>
  <div class="syslog">
    <!-- <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox> -->
-
+    <searchBox class="searchBox" ref="searchBox" :search-options="searchOptions" :title-option="{ title: '', info: '' }">
+      <template #stationSelect="">
+        <a-select style="width: 200px" :dropdown-match-select-width="false" v-model:value="stationId" allow-clear @change="changeStation">
+          <a-select-option :value="option.value" v-for="option in stationList" :key="option.value">
+            {{ option.label }}
+          </a-select-option>
+        </a-select>
+      </template>
+    </searchBox>
    <div class="content-table">
      <ComTable
        :columns="columns"
@@ -59,6 +67,11 @@ export default {
        page: 1
      },
      btnOptionList: [],
+      searchOptions: [
+        {label: '场站选择', type: 'slot', value: [], key: 'station', slotName: 'stationSelect'}
+      ],
+      stationId: undefined,
+      stationList: [],
      paramsDate: {},
      tableData: []
    }
@@ -78,16 +91,43 @@ export default {
  mounted() {
    this.operateList = this.$getBtns(['查看'])
    // this.btnOptionList = this.$getBtns(['新增'])
-    this.getList()
+    // 先获查询取场站列表，然后查询日志列表
+    Promise.all([
+      this.getStationList()
+    ]).then(()=>{
+      this.getList()
+    })
  },

  methods: {
+    // 下拉场站选择
+    changeStation() {
+      this.getList()
+    },
+    // 查询获取场站列表，查询日志列表时，stationId可以默认为空，查询全部
+    async getStationList() {
+      const params = { page_size: 1000, page: 1 }
+      try {
+        const res = await getReq('/queryStationList', params)
+        if (res.errcode === 0) {
+          this.stationList = res.data.map((item) => {
+            return { value: item.station_id, label: item.name }
+          })
+        } else {
+          const err = { tip: res.errmsg }
+          throw err
+        }
+      } catch (error) {
+        //统一处理报错提示
+      }
+    },
+
+
    async getList() {
      this.$refs.comTable.loading = true
-
      const { page, pageSize } = this.pageOption
-
      const params = {
+        station_id: this.stationId ? this.stationId : "",
        ...this.paramsDate,
        page_size: pageSize,
        page
@@ -179,7 +219,7 @@ export default {
  padding: 20px;

  .content-table {
-    height: 100%;
+    height: calc(100% - 75px);
  }
 }
 </style>