energy_storage/web/src/views/statisticalAnalysis.vue

<template>
  <div class="statisicalAn">
      <div style="display: flex; justify-content: space-between">
        <div class="header">
          <div
            v-for="item in tabList"
            :key="item.key"
            class="tab-item"
            :class="[activeKey == item.key ? 'actived' : 'uactived']"
            @click="activeKey = item.key"
          >
            <span>{{ item.name }}</span>
          </div>
        </div>
        <searchBox
          class="searchBox"
          ref="searchBox"
          :btn-option-list="btnOptionList"
          :search-options="searchOptions"
          :title-option="{ title: '', info: '' }"
          @onSearch="onSearch"
          @operateForm="operateForm"
        >
          <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>
            <!-- <a-range-picker v-model:value="formData[item.key]"    value-format="YYYY-MM-DD" @change="$emit('onSearch', formData)" /> -->
          </template>
        </searchBox>
      </div>
      <div class="main_content">
        <a-spin :spinning="loading.chart || loading.table">
          <energyEchart
            :key="`${activeKey}_${renderKey}`"
            :chart-options="echartsInfo[activeKey].chartOptions"
            :chart-data="echartsInfo[activeKey].chartData"
            :chart-datav="echartsInfo[activeKey].chartDatav"
            :columns="tableList[activeKey].columns"
            :page-option="tableList[activeKey].pageOption"
            :table-info="tableList[activeKey].tableInfo"
            :table-data="tableList[activeKey].tableData"
            @pagesizeChange="pagesizeChange"
          >
        </energyEchart>
        </a-spin>
      </div>
 
  </div>
</template>

<script>
import energyEchart from '@/components/statisticalAnalysis/energyEchart.vue'
import searchBox from '@/components/SearchBox.vue'
import { postReq, getReq } from '@/request/api'
import {downloadByUrl} from '@/utils/download'
export default {
  name: 'StatisicalAnView',
  components: { energyEchart, searchBox },

  data() {
    return {
      btnOptionList: [],
      loading: {
        chart: false,
        table: false
      },
      stationId: undefined,
      renderKey: 0,
      paramsDate: {},
      searchOptions: [
        {
          label: '日期',
          type: 'datePick1',
          value: [],
          key: 'time'
        },
        {
          label: '场站切换',
          type: 'slot',
          value: [],
          key: 'station',
          slotName: 'stationSelect'
        }
      ],
      stationList: [],
      echartsInfo: {
        1: {
          chartOptions: [
            {
              title: '充放电分析',
              type: 'bar',
              dataKey: 'sales',
              infoKeys: [
                { key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' },
                { key: 'storage_elect_out', label: '日放电电量', lineColor: '#5AABF2' }
              ]
            },
            {
              title: '运行状态分析',
              type: 'bar',
              dataKey: 'users',
              yAxisOption:[
                {
                  name: '日故障次数(V)',
                  type: 'value',
                  nameTextStyle: {
                    color: '#fff' 
                  },
                  splitLine: {
                    lineStyle: { type: 'dashed', color: '#435463' }
                  },
                  axisLabel: {
                    interval: 4,
                    color: '#fff',
                    fontSize:12

                  },
                },
                // {
                //   name: '工作时长(h)',
                //   type: 'value',
                //   splitLine: {
                //     lineStyle: { type: 'dashed', color: '#435463' }
                //   },
                //   nameTextStyle: {
                //     color: '#fff' 
                //   },
                //   axisLabel: {
                //     interval: 4,
                //     color: '#fff',
                //     fontSize:12
                //   },
                // },
              ],
              infoKeys: [
                { key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' },
                // { key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' }, 暂无数据
                // { key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' }
              ]
            },
            {
              title: '今日电压与电流分析',
              type: 'line',
              dataKey: 'stock',
              yAxisOption:[
                {
                  name: '电压(V)',
                  type: 'value',
                  nameTextStyle: {
                    color: '#fff' 
                  },
                  splitLine: {
                    lineStyle: { type: 'dashed', color: '#435463' }
                  },
                  axisLabel: {
                    interval: 4,
                    color: '#fff',
                    fontSize:12

                  },
                },
                {
                  name: '电流(A)',
                  type: 'value',
                  splitLine: {
                    lineStyle: { type: 'dashed', color: '#435463' }
                  },
                  nameTextStyle: {
                    color: '#fff' 
                  },
                  axisLabel: {
                    interval: 4,
                    color: '#fff',
                    fontSize:12
                  },
                },
              ],
              infoKeys: [
                {
                  key: 'V',
                  label: '电压',
                  lineColor: '#3F80F2',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                },
                {
                  key: 'I',
                  label: '电流',
                  lineColor: '#A9A6FF',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                }
              ]
            },
            {
              title: '今日功率分析',
              type: 'line',
              dataKey: 'yearly',
              infoKeys: [
                {
                  key: 'P',
                  label: '功率',
                  lineColor: '#00FFFB',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                }
              ]
            }
          ],
          chartData: {},
          chartDatav: {}
        },
        2: {
          chartOptions: [
            {
              title: '充电分析',
              type: 'bar',
              dataKey: 'sales',
              infoKeys: [{ key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' }]
            },
            {
              title: '运行状态分析',
              type: 'bar',
              dataKey: 'users',
              infoKeys: [
                { key: 'storage_num_err', label: '日充电次数', lineColor: '#0CDAF5' },
                { key: 'key3', label: '日故障次数', lineColor: '#5AABF2' },
                // { key: 'key3', label: '日充电时长', lineColor: '#5AABF2' }
              ]
            },
            {
              title: '今日电压与电流分析',
              type: 'line',
              dataKey: 'stock',
              yAxisOption:[
                {
                  name: '电压(V)',
                  type: 'value',
                  nameTextStyle: {
                    color: '#fff' 
                  },
                  splitLine: {
                    lineStyle: { type: 'dashed', color: '#435463' }
                  },
                  axisLabel: {
                    interval: 4,
                    color: '#fff',
                    fontSize:12

                  },
                },
                {
                  name: '电流(A)',
                  type: 'value',
                  splitLine: {
                    lineStyle: { type: 'dashed', color: '#435463' }
                  },
                  nameTextStyle: {
                    color: '#fff' 
                  },
                  axisLabel: {
                    interval: 4,
                    color: '#fff',
                    fontSize:12
                  },
                },
              ],
              infoKeys: [
                {
                  key: 'V',
                  label: '电压',
                  lineColor: '#3F80F2',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                },
                {
                  key: 'I',
                  label: '电流',
                  lineColor: '#A9A6FF',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                }
              ]
            },
            {
              title: '今日功率分析',
              type: 'line',
              dataKey: 'yearly',
              infoKeys: [
                {
                  key: 'P',
                  label: '功率',
                  lineColor: '#00FFFB',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                }
              ]
            }
          ],
          chartData: {}
        },
        3: {
          chartOptions: [
            {
              title: '发电电量分析',
              type: 'bar',
              dataKey: 'sales',
              infoKeys: [{ key: 'storage_elect_in', label: '日发电电量', lineColor: '#2A82E4' }]
            },
            {
              title: '运行状态分析',
              type: 'bar',
              dataKey: 'users',
              infoKeys: [
                { key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' },
                // { key: 'key3', label: '日发电时长', lineColor: '#5AABF2' }
              ]
            },
            {
              title: '今日电压与电流分析',
              type: 'line',
              dataKey: 'stock',
              yAxisOption:[
                {
                  name: '电压(V)',
                  type: 'value',
                  nameTextStyle: {
                    color: '#fff' 
                  },
                  splitLine: {
                    lineStyle: { type: 'dashed', color: '#435463' }
                  },
                  axisLabel: {
                    interval: 4,
                    color: '#fff',
                    fontSize:12

                  },
                },
                {
                  name: '电流(A)',
                  type: 'value',
                  splitLine: {
                    lineStyle: { type: 'dashed', color: '#435463' }
                  },
                  nameTextStyle: {
                    color: '#fff' 
                  },
                  axisLabel: {
                    interval: 4,
                    color: '#fff',
                    fontSize:12
                  },
                },
              ],
              infoKeys: [
                {
                  key: 'V',
                  label: '电压',
                  lineColor: '#3F80F2',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                },
                {
                  key: 'I',
                  label: '电流',
                  lineColor: '#A9A6FF',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                }
              ]
            },
            {
              title: '今日功率分析',
              type: 'line',
              dataKey: 'yearly',
              infoKeys: [
                {
                  key: 'P',
                  label: '功率',
                  lineColor: '#00FFFB',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                }
              ]
            }
          ],
          chartData: {}
        }
      },
      activeKey: 1,
      interval: null,
      tabList: [
        {
          key: 1,
          name: '储能设备'
        },

        {
          key: 2,
          name: '充电设备'
        },
        {
          key: 3,
          name: '光伏设备'
        }
      ],
      tableList: {
        1: {
          columns: [
            {
              title: '充电电量',
              dataIndex: 'storage_elect_in',
              key: 'storage_elect_in',
              width: 120,
              ellipsis: true
            },
            {
              title: '放电电量',
              dataIndex: 'storage_elect_out',
              key: 'storage_elect_out',
              width: 120,
              ellipsis: true
            },
            {
              title: '充电次数',
              dataIndex: 'storage_num_in',
              key: 'storage_num_in',
              width: 120,
              ellipsis: true
            },
            {
              title: '放电次数',
              dataIndex: 'storage_num_out',
              key: 'storage_num_out',
              width: 120,
              ellipsis: true
            },
            {
              title: '充电时长',
              dataIndex: 'storage_t_in',
              key: 'storage_t_in',
              width: 120,
              ellipsis: true
            },
            {
              title: '放电时长',
              dataIndex: 'storage_t_out',
              key: 'storage_t_out',
              width: 120,
              ellipsis: true
            },

            {
              title: '利用率',
              dataIndex: 'storage_usage',
              key: 'storage_usage',
              width: 120,
              ellipsis: true
            },
            {
              title: '故障次数',
              dataIndex: 'storage_num_err',
              key: 'storage_num_err',
              width: 120,
              ellipsis: true
            },
            {
              title: '日期',
              dataIndex: 'dt',
              key: 'dt',
              width: 120,
              ellipsis: true
            }
          ],
          geturl: '',
          tableData: [],
          pageOption: {
            page: 1,
            pageSize: 10,
            count: 1
          }
        },
        2: {
          columns: [
            {
              title: '充电电量',
              dataIndex: 'charge_elect',
              key: 'charge_elect',
              width: 120,
              ellipsis: true
            },
            {
              title: '充电次数',
              dataIndex: 'charge_num',
              key: 'charge_num',
              width: 120,
              ellipsis: true
            },
            {
              title: '充电时长',
              dataIndex: 'charge_t',
              key: 'charge_t',
              width: 120,
              ellipsis: true
            },
            {
              title: '利用率',
              dataIndex: 'charge_usage',
              key: 'charge_usage',
              width: 120,
              ellipsis: true
            },
            {
              title: '故障次数',
              dataIndex: 'charge_num_err',
              key: 'charge_num_err',
              width: 120,
              ellipsis: true
            },

            {
              title: '日期',
              dataIndex: 'dt',
              key: 'dt',
              width: 120,
              ellipsis: true
            }
          ],
          geturl: '',
          tableData: [],
          pageOption: {
            page: 1,
            pageSize: 10,
            count: 1
          }
        },
        3: {
          columns: [
            {
              title: '发电电量',
              dataIndex: 'solar_elect_gen',
              key: 'solar_elect_gen',
              width: 120,
              ellipsis: true
            },
            {
              title: '入网电量',
              dataIndex: 'solar_elect_grid',
              key: 'solar_elect_grid',
              width: 120,
              ellipsis: true
            },
            {
              title: '发电时长',
              dataIndex: 'solar_t',
              key: 'solar_t',
              width: 120,
              ellipsis: true
            },
            {
              title: '利用率',
              dataIndex: 'solar_usage',
              key: 'solar_usage',
              width: 120,
              ellipsis: true
            },
            {
              title: '故障次数',
              dataIndex: 'solar_num_err',
              key: 'solar_num_err',
              width: 120,
              ellipsis: true
            },

            {
              title: '日期',
              dataIndex: 'dt',
              key: 'dt',
              width: 120,
              ellipsis: true
            }
          ],

          geturl: '',
          tableData: [],
          pageOption: {
            page: 1,
            pageSize: 10,
            count: 1
          }
        }
      }
    }
  },
  watch: {
    activeKey: {
      handler(newVal) {
        if (!newVal) return

        // 清除之前的数据
        this.resetDataForInactiveKey()

        // 并行加载新数据
        Promise.all([
          this.getStationList(),
          this.getEchartsListForActiveKey(),
          this.getTableListForActiveKey()
        ]).then(() => {
          this.$nextTick(() => {
            this.getStatCharts()
          })
        })
      },
      immediate: true // 添加立即执行
    }
  },
  async mounted() {
    // 优先加载第一个页面(activeKey=1)所需的数据
    this.btnOptionList = this.$getBtns(['导出'])
    await Promise.all([
      this.getStationList(),
      this.getEchartsListForActiveKey(),
      this.getTableListForActiveKey()
    ])

    // 初始化实时刷新
    this.startRealtimeRefresh()
  },
  beforeUnmount() {
    clearInterval(this.interval) // 组件销毁时清除定时器
  },
  methods: {
    operateForm(type, record = {}) {
      if (type == 'output') {
        this.loading.chart=true
        this.handleOutput()
      }
    },
    async handleOutput() {
     

      const { formData:{time=[]} } = this.$refs.searchBox
      
      const params = {
        station_id: this.stationId,
        category: this.activeKey,
        start_date: time[0] || '',
        end_date: time[1] || ''
      }
      try {
        const res = await getReq('/exportStatReport', params)
        if(res.errcode==0){
          window.open('/download/'+res.data,'_parent');
          this.loading.chart=false
        }
        
      } catch (error) {
        console.log(error)
      }
    },
    forceRerender() {
      this.renderKey += 1
    },
    resetDataForInactiveKey() {
      // 重置非当前激活页面的数据
      Object.keys(this.echartsInfo).forEach((key) => {
        if (key != this.activeKey) {
          this.echartsInfo[key].chartData = {}
          this.echartsInfo[key].chartDatav = {}
        }
      })

      Object.keys(this.tableList).forEach((key) => {
        if (key != this.activeKey) {
          this.tableList[key].tableData = []
          this.tableList[key].pageOption = {
            page: 1,
            pageSize: 10,
            count: 1
          }
        }
      })
    },
    async getEchartsListForActiveKey() {
      if (!this.activeKey) return
      this.loading.chart = true

      const currentInfo = this.echartsInfo[this.activeKey]
      const query = {
        ...this.paramsDate,
        station_id: this.stationId,
        category: this.activeKey
      }

      try {
        const res = await getReq('/queryStatDayList', query)
        if (res.errcode === 0) {
          this.echartsInfo[this.activeKey].chartData = res.data
          this.loading.chart = false
        } else {
          throw res
        }
      } catch (error) {
        this.loading.chart = false
        this.echartsInfo[this.activeKey].chartData = {}
      }
    },
    // 专门获取当前激活页面的表格数据
    async getTableListForActiveKey() {
      this.loading.table = true
      if (!this.activeKey) return

      const currentInfo = this.tableList[this.activeKey]
      const query = {
        ...this.paramsDate,
        station_id: this.stationId,
        category: this.activeKey,
        page_size: currentInfo.pageOption.pageSize,
        page: currentInfo.pageOption.page
      }

      try {
        const res = await getReq('/queryStatDetailList', query)
        if (res.errcode === 0) {
          this.tableList[this.activeKey].tableData = res.data.list || res.data
          this.tableList[this.activeKey].pageOption.count = res.count || 0
          this.tableList[this.activeKey].pageOption.page = res.page || 0
          this.tableList[this.activeKey].pageOption.pageSize = res.page_size || 0
          this.loading.table = false
        } else {
          throw res
        }
      } catch (error) {
        this.tableList[this.activeKey].tableData = []
        this.tableList[this.activeKey].pageOption.count = 0
        this.tableList[this.activeKey].pageOption.page = 0
        this.tableList[this.activeKey].pageOption.pageSize = 0
        this.loading.table = false
      }
    },
    startRealtimeRefresh() {
      this.interval = setInterval(() => {
        if (this.activeKey) {
          this.getStatCharts() // 定时获取最新实时数据
        }
      }, 10000)
    },

    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
            }
          })
          if (this.stationList.length) {
            if (!this.stationId) {
              this.stationId = this.stationList[0].value
            }
          }
        } else {
          const err = { tip: res.errmsg }
          throw err
        }
      } catch (error) {
        //统一处理报错提示
      }
    },
    pagesizeChange(e) {
      this.tableList[this.activeKey].pageOption.pageSize = e.pageSize
      this.tableList[this.activeKey].pageOption.page = e.page
      this.getTableListForActiveKey()
    },
    onSearch(data) {
      this.paramsDate.start_date = data.time ? data.time[0] : ''
      this.paramsDate.end_date = data.time ? data.time[1] : ''
      this.tableList[this.activeKey].pageOption.page = 1
      this.getStationList(), this.getEchartsListForActiveKey(), this.getTableListForActiveKey()
    },
    changeStation() {
      this.getStatCharts()
      this.getEchartsListForActiveKey()
      this.getTableListForActiveKey()
    },

    async getStatCharts() {
      const query = {
        dt: this.paramsDate.end_date,
        station_id: this.stationId,
        category: this.activeKey
      }
      try {
        const res = await getReq('/queryStatCharts', query)
        if (res.errcode === 0) {
          this.echartsInfo[this.activeKey].chartDatav = res.data
        } else {
          throw res
        }
      } catch (error) {
        this.echartsInfo[this.activeKey].chartDatav = {}
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import url(@/style/color.scss);
.statisicalAn {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: $bg1-color;
  border-radius: 15px;
  .header {
    display: flex;

    .tab-item {
      height: 38px;
      line-height: 38px;
      font-size: 14px;
      margin-right: 15px;
      display: inline-block;
      padding: 0 50px;
      cursor: pointer;
      border: 1px solid $tab-border;
      border-radius: 4px;
    }
  }

  .actived {
    color: #ffffff;

    background-color: $green;
  }
  .uactived {
    color: #a6b8dd;
    background-color: $bg2-color;
  }
}
.main_content {
  overflow: scroll;
  height: calc(100% - 40px);
  // margin-top: 10px;
}
</style>