
<template>
  <div class="analysis" :loading="loading">
    <!-- <commonSearch ref="commonSearch" type="daterange" @search="handleSearch"></commonSearch> -->
      <div class="item-echarts" ref="dcChart" :style="{ height: echartsHeight + 'px' }" style="background-color: white;"></div>
      <div class="item-echarts" ref="evChart" :style="{ height: echartsHeight + 'px' }" style="background-color: white;margin-top: 10px;"></div>
      <div class="item-echarts" ref="acChart" :style="{ height: echartsHeight + 'px' }" style="background-color: white;margin-top: 10px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
// import commonSearch from '../components/commonSearch'
import { httpAction, getAction } from '@/api/manage'
import { pvdata } from '../pvdata'
export default {
  name: 'inverterAnalysis',
  components: {
    // commonSearch,
  },
  data() {
    return {
      description: '逆变器曲线分析',
      loading: true,
      echartsHeight: (window.innerHeight - 84 - 60 - 30) / 3,
      times: [],
      udatas: [],
      idatas: [],
      irrdatas: [],
      tempdatas: [],
      powerdatas: [],
      url: {
        list: '/ems/statistics/energyoverview',
      },
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.getTest()
      }, 2000)
      // this.getEnergyoverview()
    })
  },
  methods: {
    // 后端好了需要删掉
    getTest() {
      var listData = pvdata.inverteranalysisData
      var _this = this

      listData.data1.forEach((item) => {
        _this.times.push(item.fTime.substring(11, 16))
        _this.udatas.push(item.fU)
        _this.idatas.push(item.fI)
        _this.irrdatas.push(item.fIrradiance)
        _this.tempdatas.push(item.fTemp)
      })

      listData.data2.forEach((item) => {
        _this.powerdatas.push(item.fP)
      })
      this.initChart()
    },
    async getEnergyoverview() {
      // {spaceId: 277797283102721}
      this.loading = true
      var data = this.$refs.commonSearch.queryParams
      getAction(this.url.list, data).then((res) => {
        console.log(res)
        var listData = res.data
        // 用电需量
        this.demandStatistics.jishi = listData.demandStatistics.find((item) => item.type === '即时需量').howManyValue
        this.demandStatistics.fengzhi = listData.demandStatistics.find((item) => item.type === '需量峰值').howManyValue
        this.demandStatistics.mubiao = listData.demandStatistics.find((item) => item.type === '目标需量').howManyValue

        // co2+气象
        this.demandStatistics.co2 = listData.environmentStatistics.find((item) => item.type === 'CO2排放').howManyValue
        this.demandStatistics.shidu = listData.environmentStatistics.find((item) => item.type === '室外湿度')
          ? listData.environmentStatistics.find((item) => item.type === '室外湿度').howManyValue
          : ''
        this.demandStatistics.wendu = listData.environmentStatistics.find((item) => item.type === '室外温度')
          ? listData.environmentStatistics.find((item) => item.type === '室外温度').howManyValue
          : ''

        // top5
        this.sortTop5Name = []
        this.nowMonthData = []
        this.lastMonthData = []
        listData.top5Statistics.forEach((res) => {
          this.sortTop5Name.push(res.equipmentname)
          this.nowMonthData.push(res.howManyValue)
          this.lastMonthData.push(res.howManyValue2)
        })

        // 总标煤
        this.zongbiao = listData.kgceStatistics.map((res) => {
          var item = {
            name: res.type,
            value: res.howManyValue,
          }
          return item
        })

        this.totalEleTrend.daysplit = listData.daysplit
        this.totalEleTrend.kongtiao = listData.kongtiao
        this.totalEleTrend.dongli = listData.dongli
        this.totalEleTrend.zhaoming = listData.zhaoming
        this.totalEleTrend.qita = listData.qita
        this.energySpace = listData.energySpace
        this.loading = false
      })
      this.$nextTick(() => {})
    },
    handleSearch(param) {
      this.getTest()
      // this.getEnergyoverview()
    },
    initChart() {
      var _this = this
      var chartDom1 = _this.$refs.dcChart
      var myChart1 = echarts.init(chartDom1)
      
      var chartDom2 = _this.$refs.evChart
      var myChart2 = echarts.init(chartDom2)
      
      var chartDom3 = _this.$refs.acChart
      var myChart3 = echarts.init(chartDom3)

      var option1 = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '20%']
          },
        },
        legend: {
          data: ['电压', '电流'],
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: _this.times,
        },
        yAxis: [
          {
            type: 'value',
            name: '电压',
            boundaryGap: [0, '30%'],
          },
          {
            type: 'value',
            name: '电流',
            boundaryGap: [0, '30%'],
          },
        ],
        series: [
          {
            name: '电压',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: '#91CC75',
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' },
              ],
            },
            data: _this.udatas,
          },
          {
            name: '电流',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            yAxisIndex: 1, // 依据哪儿个y周坐标显示数据
            itemStyle: {
              color: '#EE6666',
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' },
              ],
            },
            data: _this.idatas,
          },
        ],
      }

      var option2 = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '20%']
          },
        },
        legend: {
          data: ['辐照度', '温度'],
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: _this.times,
        },
        yAxis: [
          {
            type: 'value',
            name: '辐照度',
            boundaryGap: [0, '30%'],
          },
          {
            type: 'value',
            name: '温度',
            boundaryGap: [0, '30%'],
          },
        ],
        series: [
          {
            name: '辐照度',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: '#91CC75',
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' },
              ],
            },
            data: _this.irrdatas,
          },
          {
            name: '温度',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            yAxisIndex: 1, // 依据哪儿个y周坐标显示数据
            itemStyle: {
              color: '#EE6666',
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' },
              ],
            },
            data: _this.tempdatas,
          },
        ],
      }

      var option3 = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '20%']
          },
        },
        legend: {
          data: ['总有功功率'],
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: _this.times,
        },
        yAxis: [
          {
            type: 'value',
            name: '总有功功率',
            boundaryGap: [0, '30%'],
          },
        ],
        series: [
          {
            name: '总有功功率',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: '#91CC75',
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' },
              ],
            },
            data: _this.powerdatas,
          },
        ],
      }

      option1 && myChart1.setOption(option1)
      option2 && myChart2.setOption(option2)
      option3 && myChart3.setOption(option3)

      echarts.connect([myChart1,myChart2, myChart3]);

      window.addEventListener('resize', function () {
        myChart1.resize()
        myChart2.resize()
        myChart3.resize()
      })
    },
  },
}
</script>
<style lang="less" scoped>
.demand-analysis {
  min-height: calc(100vh - 84px);
  padding: 10px;
  .search-container {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding-top: 12px;
    margin-bottom: 10px;
    .el-form-item--small.el-form-item {
      margin-bottom: 14px;
    }
  }
  .item-echarts {
    // min-height: calc(100vh - 174px);
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: white;
  }
}
</style>
