<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 v-if="activeKey !== 4" 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 v-if="activeKey == 4" style="height:800px">

      <ComTable   
        :columns="columns"
        :table-data="tableData"
        :table-option="{ page: false, select: false }">
        <template #action="record">
          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
        </template>
      </ComTable>
          
      </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' }
              ],
              yAxisOption: [
                {
                  name: '电量(kWh)',
                  type: 'value',
                  nameTextStyle: { color: '#fff' },
                  splitLine: { lineStyle: { type: 'dashed', color: '#435463' } },
                  axisLabel: { interval: 4, color: '#fff', fontSize: 12 },
                }
              ]
            },
            {
              title: '运行状态分析',
              type: 'bar',
              dataKey: 'users',
              yAxisOption:[
                {
                  name: '日故障次数',
                  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',
              yAxisOption:[
                {
                  name: '功率(kW)',
                  type: 'value',
                  nameTextStyle: {
                    color: '#fff' 
                  },
                  splitLine: {
                    lineStyle: { type: 'dashed', color: '#435463' }
                  },
                  axisLabel: {
                    interval: 4,
                    color: '#fff',
                    fontSize:12

                  },
                },
              ],
              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: 'charge_elect', label: '日充电电量', lineColor: '#2A82E4' }],
              yAxisOption:[ 
                {
                  name: '电量(kWh)',
                  type: 'value',
                  nameTextStyle: { color: '#fff' },
                  splitLine: { lineStyle: { type: 'dashed', color: '#435463' } },
                  axisLabel: { interval: 4, color: '#fff', fontSize:12 },
                }
              ]
            },
            {
              title: '运行状态分析',
              type: 'bar',
              dataKey: 'users',
              infoKeys: [
                { key: 'charge_num', label: '日充电次数', lineColor: '#0CDAF5' },
                { key: 'charge_num_err', label: '日故障次数', lineColor: '#5AABF2' },
                // { key: 'key3', label: '日充电时长', lineColor: '#5AABF2' }
              ],
              yAxisOption:[ 
                {
                  name: '次数',
                  type: 'value',
                  nameTextStyle: { color: '#fff' },
                  splitLine: { lineStyle: { type: 'dashed', color: '#435463' } },
                  axisLabel: { interval: 4, color: '#fff', fontSize:12 },
                }
              ]
            },
            {
              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)' }
              ],
              yAxisOption:[ 
                {
                  name: '功率(kW)',
                  type: 'value',
                  nameTextStyle: { color: '#fff' },
                  splitLine: { lineStyle: { type: 'dashed', color: '#435463' } },
                  axisLabel: { interval: 4, color: '#fff', fontSize:12 },
                }
              ]
            }
          ],
          chartData: {}
        },
        3: {
          chartOptions: [
            {
              title: '发电电量分析',
              type: 'bar',
              dataKey: 'sales',
              infoKeys: [{ key: 'solar_elect_gen', label: '日发电电量', lineColor: '#2A82E4' }],
              yAxisOption:[ 
                {
                  name: '电量(kWh)',
                  type: 'value',
                  nameTextStyle: { color: '#fff' },
                  splitLine: { lineStyle: { type: 'dashed', color: '#435463' } },
                  axisLabel: { interval: 4, color: '#fff', fontSize:12 },
                }
              ]
            },
            {
              title: '运行状态分析',
              type: 'bar',
              dataKey: 'users',
              infoKeys: [
                { key: 'solar_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)'
                }
              ],
              yAxisOption:[ 
                {
                  name: '功率(kW)',
                  type: 'value',
                  nameTextStyle: { color: '#fff' },
                  splitLine: { lineStyle: { type: 'dashed', color: '#435463' } },
                  axisLabel: { interval: 4, color: '#fff', fontSize:12 },
                }
              ]
            }
          ],
          chartData: {}
        }
      },
      activeKey: 1,
      interval: null,
      tabList: [
        {
          key: 1,
          name: '储能设备'
        },

        {
          key: 2,
          name: '充电设备'
        },
        {
          key: 3,
          name: '光伏设备'
        },
        {
          key: 4,
          name: '策略运行效益'
        }
      ],
      tableList: {
        1: {
          columns: [
            {
              title: '日期',
              dataIndex: 'dt',
              key: 'dt',
              width: 120,
              ellipsis: true
            },
            {
              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
            }
          ],
          geturl: '',
          tableData: [],
          pageOption: {
            page: 1,
            pageSize: 10,
            count: 1
          }
        },
        2: {
          columns: [
            {
              title: '日期',
              dataIndex: 'dt',
              key: 'dt',
              width: 120,
              ellipsis: true
            },
            {
              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
            }
          ],
          geturl: '',
          tableData: [],
          pageOption: {
            page: 1,
            pageSize: 10,
            count: 1
          }
        },
        3: {
          columns: [
            {
              title: '日期',
              dataIndex: 'dt',
              key: 'dt',
              width: 120,
              ellipsis: true
            },
            {
              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
            }
          ],

          geturl: '',
          tableData: [],
          pageOption: {
            page: 1,
            pageSize: 10,
            count: 1
          }
        }
      },
      columns: [
        { 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' } }
      ],

      tableData: [
        // {period: "谷", E_in: 30, E_out: 25, gridPrice: "0.32", chargePrice: "0.32", income: 0.00},
        // {period: "平", gridPrice: "0.8", chargePrice: "0.6", income: "0.2", elect: "35", incomeTotal: "100"},
        // {period: "峰", gridPrice: "0.8", chargePrice: "0.6", income: "0.2", elect: "35", incomeTotal: "100"},
        // {period: "尖", gridPrice: "0.8", chargePrice: "0.6", income: "0.2", elect: "35", incomeTotal: "100"},
        // {period: "总计", gridPrice: "0.8", chargePrice: "0.6", income: "0.2", elect: "35", incomeTotal: "100"}
       
      ]
    }
  },
  watch: {
    activeKey: {
      handler(newVal) {
        if (!newVal) return
        // 清除之前的数据
        this.resetDataForInactiveKey()

        if (newVal !== 4) {
          // 并行加载新数据
          Promise.all([
            this.getStationList(),
            this.getEchartsListForActiveKey(),
            this.getTableListForActiveKey()
          ]).then(() => {
            this.$nextTick(() => {
              this.getStatCharts()
            })
          })
        }
        else {
          this.$nextTick(() => {
            this.getEGridPeriod()
          })
        }
      },
      // immediate: true // 添加立即执行
    }
  },
  mounted() {
    //this.operateList = this.$getBtns(['修改'])
    console.log('mounted')
    // 优先加载第一个页面(activeKey=1)所需的数据
    // this.btnOptionList = this.$getBtns(['导出'])
    Promise.all([
      this.getStationList()
      
    ]).then(()=>{
      this.getEchartsListForActiveKey(),
      this.getTableListForActiveKey()
      this.getStatCharts()
      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() {
      if (this.activeKey == 4) return

      // 重置非当前激活页面的数据
      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)
        let chartInfo = this.echartsInfo[this.activeKey]
        if (chartInfo) {
          if (res.errcode === 0) {
            chartInfo.chartData = res.data
            this.loading.chart = false
          } else {
            throw res
          }
        }
      } catch (error) {
        this.loading.chart = false
        this.echartsInfo[this.activeKey].chartData = {}
      }
    },
    // 专门获取当前激活页面的表格数据
    async getTableListForActiveKey() {
      console.log( this.stationId,'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)
        let tableInfo = this.tableList[this.activeKey]
        if (tableInfo) {
          if (res.errcode === 0) {
            tableInfo.tableData = res.data.list || res.data
            tableInfo.pageOption.count = res.count || 0
            tableInfo.pageOption.page = res.page || 0
            tableInfo.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() {
      console.log('getsStationList')
      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] : ''

      if (this.activeKey !== 4) {
        this.tableList[this.activeKey].pageOption.page = 1
        this.getStationList(), this.getStatCharts(),this.getEchartsListForActiveKey(), this.getTableListForActiveKey()
      } else {
        this.getEGridPeriod()
      }
    },
    changeStation() {
      if (this.activeKey != 4) {
        this.getStatCharts()
        this.getEchartsListForActiveKey()
        this.getTableListForActiveKey()
      } else {
        this.getEGridPeriod()
      }
      
    },

    async getStatCharts() {
      if (this.activeKey == 4) return

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

    async getEGridPeriod() {
      const query = {
        dt: this.paramsDate.end_date,
        station_id: this.stationId,
      }

      if (!query.dt) {
        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 = `${year}-${month}-${day}`;    // 拼接成指定格式
      }

      try {
        const res = await getReq('/queryEGridPeriod', query)
        if (res.errcode === 0) {
          this.tableData = res.data
        } else {
          throw res
        }
      } catch (error) {
        this.tableData = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@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;
}

.content-table {
    height: 700px;
    margin-top: 40px;

    :deep(.ant-table-header tr th) {
      background: $table-border !important;
      color: #fff;
    }
    :deep(.ant-table-body tr td, .ant-table-cell) {
      background: $table-bg !important;
      color: #fff;
    }
  }

:deep(.ant-modal-body) {
  :deep(.ant-table-wrapper .ant-table-row-expand-icon) {
    color: $green !important;
  }
  //表格行悬浮样式
  .no-hover-row:hover > td {
    // background-color: transparent !important;
    background-color: #f0f8ff !important;
  }
}
:deep(.ant-table-cell) {
  &::before {
    width: 0 !important;
  }
}
:deep(.ant-table-thead > tr > td) {
  border-bottom: none !important;
  border-top: none !important;
}
:deep(.ant-table-wrapper .ant-table-tbody > tr > td) {
  border-top: none !important;
}
:deep(.ant-table-wrapper .ant-table-thead > tr > th) {
  border-bottom: none !important;
}

</style>
