energy_storage/web/src/views/statisticalAnalysis.vue

<template>
  <div class="statisicalAn">
    <div style="display: flex; justify-content: space-between; height: 50px">
      <div class="tab-header">
        <div v-for="item in tabList" :key="item.key" class="tab">
          <span
            :class="[activeKey == item.key ? 'actived' : 'uactived']"
            @click="activeKey = item.key"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <searchBox
        class="searchBox"
        ref="searchBox"
        :btn-option-list="[]"
        :search-options="searchOptions"
        :title-option="{ title: '', info: '' }"
        @onSearch="onSearch"
      >
      </searchBox>
    </div>
    <div class="main_content">
      <energyEchart
         :key="activeKey"
        :chart-options="echartsInfo[activeKey].chartOptions"
        :chart-data="echartsInfo[activeKey].chartData"
        :columns="tableList[activeKey].columns"
        :table-info="tableList[activeKey].tableInfo"
        :table-data="tableList[activeKey].tableData"
        @pagesizeChange="pagesizeChange()"
      ></energyEchart>
     
    </div>
  </div>
</template>

<script>
import energyEchart from '@/components/statisticalAnalysis/energyEchart.vue'
import searchBox from '@/components/SearchBox.vue'
import { postReq, getReq } from '@/request/api'
import { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'

export default {
  name: 'StatisicalAnView',
  components: { energyEchart, searchBox },

  data() {
    return {
      categoryArr: [
        {
          type: 1,
          label: '储能设备',
          infoKey: 'energy'
        },
        {
          type: 2,
          label: '充电设备',
          infoKey: 'charge'
        },
        {
          type: 3,
          label: '光伏设备',
          infoKey: 'pv'
        }
      ],
      paramsDate: {},
      searchOptions: [
        {
          label: '日期',
          type: 'datePick1',
          value: [],
          key: 'time'
        }
      ],
      echartsInfo: {
        0: {
          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',
              infoKeys: [
                { key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' },
                { key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' },
                { key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' }
              ]
            },
            {
              title: '电压与电流分析',
              type: 'line',
              dataKey: 'stock',
              infoKeys: [
                {
                  key: 'key1',
                  label: '电压',
                  lineColor: '#3F80F2',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                },
                {
                  key: 'key2',
                  label: '电流',
                  lineColor: '#A9A6FF',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                }
              ]
            },
            {
              title: '功率分析',
              type: 'line',
              dataKey: 'yearly',
              infoKeys: [
                {
                  key: 'key1',
                  label: '功率',
                  lineColor: '#00FFFB',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                }
              ]
            }
          ],
          chartData: {}
        },
        1: {
          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',
              infoKeys: [
                {
                  key: 'key1',
                  label: '电压',
                  lineColor: '#3F80F2',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                },
                {
                  key: 'key2',
                  label: '电流',
                  lineColor: '#A9A6FF',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                }
              ]
            },
            {
              title: '功率分析',
              type: 'line',
              dataKey: 'yearly',
              infoKeys: [
                {
                  key: 'key1',
                  label: '功率',
                  lineColor: '#00FFFB',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                }
              ]
            }
          ],
          chartData: {}
        },
        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',
              infoKeys: [
                {
                  key: 'key1',
                  label: '电压',
                  lineColor: '#3F80F2',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                },
                {
                  key: 'key2',
                  label: '电流',
                  lineColor: '#A9A6FF',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                }
              ]
            },
            {
              title: '功率分析',
              type: 'line',
              dataKey: 'yearly',
              infoKeys: [
                {
                  key: 'key1',
                  label: '功率',
                  lineColor: '#00FFFB',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                }
              ]
            }
          ],
          chartData: {}
        }
      },
      activeKey: 0,
      tabList: [
        {
          key: 0,
          name: '储能设备'
        },
        {
          key: 1,
          name: '光伏设备'
        },
        {
          key: 2,
          name: '充电设备'
        }
      ],
      tableList: {
        0: {
          columns: [
            {
              title: '设备ID',
              dataIndex: 'ID',
              key: 'ID',
              width: 120,
              ellipsis: true
            },
            {
              title: '设备名称',
              dataIndex: 'key2',
              key: 'key2',
              width: 120,
              ellipsis: true
            },
            {
              title: '设备类型',
              dataIndex: 'key3',
              key: 'key3',
              width: 120,
              ellipsis: true
            },
            {
              title: '充电电量',
              dataIndex: 'storage_elect_in',
              key: 'storage_elect_in',
              width: 120,
              ellipsis: true
            },
            {
              title: '充电时长',
              dataIndex: 'key5',
              key: 'key5',
              width: 120,
              ellipsis: true
            },
            {
              title: '放电时长',
              dataIndex: 'key6',
              key: 'key6',
              width: 120,
              ellipsis: true
            },
            {
              title: '放电电量',
              dataIndex: 'storage_elect_out',
              key: 'storage_elect_out',
              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
          }
        },
        1: {
          columns: [
            {
              title: '设备ID',
              dataIndex: 'ID',
              key: 'ID',
              width: 120,
              ellipsis: true
            },
            {
              title: '设备名称',
              dataIndex: 'key2',
              key: 'key2',
              width: 120,
              ellipsis: true
            },
            {
              title: '设备类型',
              dataIndex: 'key3',
              key: 'key3',
              width: 120,
              ellipsis: true
            },
            {
              title: '发电电量',
              dataIndex: 'storage_elect_in',
              key: 'storage_elect_in',
              width: 120,
              ellipsis: true
            },
            {
              title: '发电时长',
              dataIndex: 'key5',
              key: 'key5',
              width: 120,
              ellipsis: true
            },
            {
              title: '故障次数',
              dataIndex: 'key6',
              key: 'key6',
              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: '设备ID',
              dataIndex: 'ID',
              key: 'ID',
              width: 120,
              ellipsis: true
            },
            {
              title: '设备名称',
              dataIndex: 'key2',
              key: 'key2',
              width: 120,
              ellipsis: true
            },
            {
              title: '设备类型',
              dataIndex: 'key3',
              key: 'key3',
              width: 120,
              ellipsis: true
            },
            {
              title: '充电电量',
              dataIndex: 'storage_elect_in',
              key: 'storage_elect_in',
              width: 120,
              ellipsis: true
            },
            {
              title: '充电时长',
              dataIndex: 'key5',
              key: 'key5',
              width: 120,
              ellipsis: true
            },
            {
              title: '充电次数',
              dataIndex: 'key6',
              key: 'key6',
              width: 120,
              ellipsis: true
            },
            {
              title: '故障次数',
              dataIndex: 'key6',
              key: 'key6',
              width: 120,
              ellipsis: true
            },
            {
              title: '日期',
              dataIndex: 'dt',
              key: 'dt',
              width: 120,
              ellipsis: true
            }
          ],
          geturl: '',
          tableData: [],
          pageOption: {
            page: 1,
            pageSize: 10,
            count: 1
          }
        }
      }
    }
  },
  watch:{
    activeKey(newVal, oldVal) {
      console.log(newVal, oldVal,"activeKey")
      // 清空旧数据（可选）
      if( this.echartsInfo[oldVal]){
        this.echartsInfo[oldVal].chartData = {};
        this.tableList[oldVal].tableData = [];
        // // 重新加载数据
        this.getTableList()
        this.getEchartsList()
      }
     
 
    
    }
  },
  async mounted() {
    await Promise.all([this.getTableList(), this.getEchartsList()])
  },
  beforeUnmount() {},
  methods: {
    pagesizeChange(e) {
      this.tableList[this.activeKey].pageOption.pageSize = e.pageSize
      this.tableList[this.activeKey].pageOption.page = e.page
      this.getTableList()
    },
    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.getTableList()
      this.getEchartsList()
    },
    async getEchartsList() {
      const currentInfo = this.echartsInfo[this.activeKey]

      const query = {
        ...this.paramsDate,
        category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
        // start_date: getDateDaysAgo(7 - 1),
        // end_date: getDateDaysAgo(0)
      }
      try {
        const res = await getReq('/queryStatDayList', query)
        if (res.errcode === 0) {
          this.echartsInfo[this.activeKey].chartData = res.data
          console.log(
            this.echartsInfo[this.activeKey].chartData,
            ' this.echartsInfo[this.activeKey].chartData'
          )
        } else {
          throw res
        }
      } catch (error) {
        this.echartsInfo[this.activeKey].chartData = {}
      }
    },

    async getTableList() {
      const currentInfo = this.tableList[this.activeKey]
      const query = {
        ...this.paramsDate,
        category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
        page_size: currentInfo.pageOption.pageSize,
        pageNumber: currentInfo.pageOption.page
      }
      try {
        const res = await getReq('/queryStatDayList', query)
        if (res.errcode === 0) {
          currentInfo.tableData = res.data
          currentInfo.pageOption = {
            page: res.data.page,
            pageSize: res.data.page_size,
            count: res.data.count
          }
        } else {
          throw res
        }
      } catch (error) {
        currentInfo.tableData = [
          {
            key1: '1515151515',
            key2: '设备1111',
            key3: '类型',
            key4: '电量',
            key5: '时长',
            key6: '时长',
            key7: 'dianl',
            key8: '时长',
            key9: '时长11'
          },
          {
            key1: '1515151515',
            key2: '设备1111',
            key3: '类型',
            key4: '电量',
            key5: '时长',
            key6: '时长',
            key7: 'dianl',
            key8: '时长',
            key9: '时长11'
          },
          {
            key1: '1515151515',
            key2: '设备1111',
            key3: '类型',
            key4: '电量',
            key5: '时长',
            key6: '时长',
            key7: 'dianl',
            key8: '时长',
            key9: '时长11'
          },
          {
            key1: '1515151515',
            key2: '设备1111',
            key3: '类型',
            key4: '电量',
            key5: '时长',
            key6: '时长',
            key7: 'dianl',
            key8: '时长',
            key9: '时长11'
          }
        ]
      }
    }
  }
}
</script>

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

    .tab {
      & > span {
        font-size: 14px;
        margin-right: 15px;
        display: inline-block;
        padding: 10px 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% - 15px);
  // margin-top: 10px;
}
</style>