<template>
  <div class="container">
    <div class="timeSearch" >
      <div style="display: flex; width: 100%; padding: 20px 0px; justify-content: space-between;align-items: center;">
        <div style="margin-left: 20px;">数据汇总时间范围</div>
        <div style="margin-right: 20px;">
          <el-date-picker
            v-model="timeRange"
            @change="handleTimeChange"
            type="datetimerange"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
    </div>
    <div class="top-content">
      <div v-for="(item,index) of topOptions" :key="index" class="top-content-label" :style="{marginRight:index==3?'0px':'10px'}">
        <div :style="{backgroundColor:item.bgColor}" class="imgSty">
          <el-image :src="item.imgUrl"></el-image>
        </div>
        <div class="contentTitleSty">
          <div class="titleSty">{{item.title}}</div>
          <div class="numSty">{{item.num}}</div>
        </div>
      </div>
    </div>
    <div class="top-summary">
      <div>在推项目概况汇总</div>
      <div class="top-summary-one">
        <summary-module class="oneContentSty" v-for="(oneItem,index) of summaryOneOptions" :itemData="oneItem" style="width: 100%" :key="index"></summary-module>
      </div>
      <div class="summary-two-title">
        <div class="cycleSty1">
          <div ></div>
        </div>
        <div>项目总规模</div>
      </div>
      <div class="top-summary-one">
        <summary-module class="twoContentSty" v-for="(oneItem,index) of summaryTwoOptions" :itemData="oneItem" style="width: 100%" :key="index"></summary-module>
      </div>
    </div>
    <div class="pieSty">
      <div class="echartsRound"
           v-show="gcdisp1"
           id="two1"></div>
      <div class="echartsRound"
           v-show="gcdisp2"
           id="two2"></div>
      <div style="position: relative; margin-right: 0px!important;" class="echartsRound">
        <div style="position: absolute; top: 50%; width: 10px; z-index:9999;">数量</div>
        <div style="height: 100%; width: 100%;"
             v-show="gcdisp3"
             id="two3">
        </div>
      </div>
    </div>
    <div class="barSty">
      <div style="position: relative;" class="echartsBar">
        <div style="position: absolute; top: 50%; width: 10px; z-index:9999;">数量</div>
        <div style="width: 100%;height: 100%"
             v-show="bardisp1"
             id="barOne"></div>
      </div>
      <div style="position: relative; margin-right: 0px!important;" class="echartsBar">
        <div style="position: absolute; top: 50%; width: 10px; z-index:9999;">数量</div>
        <div style="width: 100%;height: 100%"
             v-show="bardisp2"
             id="barTwo"></div>
      </div>
    </div>
  </div>
</template>

<script>
import SummaryModule from "./components/summaryModule";
import fileImg from '@/assets/projectSummary/file.png'
import eyeImg from '@/assets/projectSummary/eye.png'
import moneyImg from '@/assets/projectSummary/money.png'
import paperImg from '@/assets/projectSummary/paper.png'
import echarts from "echarts"
import { querySummaryData } from '@/api/projectSummary'
import moment from "moment";
export default {
  name: "index",
  components: {SummaryModule},
  data(){
    return{
      timeRange:['', ''], // 初始化为两个空字符串
      gcdisp1:true,
      gcdisp2:true,
      gcdisp3:true,
      bardisp1:true,
      bardisp2:true,
      topOptions:[
        {
          bgColor:'#e8f4ff',
          imgUrl:fileImg,
          title:'已通过投评项目(个)',
          num:9
        },
        {
          bgColor:'#ebf9ef',
          imgUrl:eyeImg,
          title:'已签约项目(个)',
          num:9
        },
        {
          bgColor:'#fffae8',
          title:'预计总年收入(亿元)',
          num:100,
          imgUrl:paperImg
        },
        {
          bgColor:'#e8f9f9',
          title:'预计总年利润(亿元)',
          num:200,
          imgUrl:moneyImg
        },
      ],
      summaryTwoOptions:[
        {
          color:'#ffa500',
          num:100,
          title:'智慧供热(万㎡)'
        },
        {
          color:'#ffa500',
          num:100,
          title:'综合能效(亿kwh)'
        },
        {
          color:'#ffa500',
          num:100,
          title:'光伏(MW)'
        },
        {
          color:'#ffa500',
          num:100,
          title:'储能(MWh)'
        },
      ],
      summaryOneOptions:[
        {
          color:'#1890ff',
          num:100,
          title:'项目总数(个)'
        },
        {
          color:'#2fc25b',
          num:100,
          title:'暂缓项目数(个)'
        },
        {
          color:'#8543e0',
          num:100,
          title:'出库项目数(个)'
        },
        {
          color:'#15c2c3',
          num:100,
          title:'重点推进项目(个)'
        },
        {
          color:'#f04864',
          num:100,
          title:'预计总投资(亿元)'
        }
      ],
      color: [
        '#FAC858',
        '#5470C6',
        '#74C0DE',
        '#91CC75',
        '#94beff',
        '#ECE052',
        '#EE6666',
        '#61CCBD',
        '#3436c7',
        '#546570',
        '#7dff56'
      ],
      xmzlNum:10,
      tzgmNum:10,
      xxzl:{
        data: [
          { value: 10, name: 'A' },
          { value: 7, name: 'B' },
          { value: 5, name: 'C' },
          { value: 4, name: 'D' },
          { value: 3, name: 'E' }
        ]
      },
      tzgm:{
        data: [
          { value: 1048, name: '3232' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]
      },
      xmztxmb:{
        label:['湖北','湖南','河南','江西'],
        data:[22, 18, 13, 16]
      },
      ywcjzb:{
        label:['智慧供热','综合能效','产品销售','能源管理','工业动力','数智服务','蓄能储能','电力运营','能碳交易'],
        data:[22,16,14, 18,14,16,18, 16, 13]
      },
      swmszb:{
        label:['EPC','EPCO','BOT','BOO','EMC','产品销售','托管运营','电力运营','能碳交易'],
        data:[21,16,14, 18,14,16,18, 16, 13]
      }
    }
  },
  async created() {
    // 获取今年第一天的日期
    const firstDayOfYear = moment().startOf('year').format('YYYY-MM-DD');
    console.log('打印firstDayofYear',firstDayOfYear);
    let currentDate = moment(new Date()).format('YYYY-MM-DD');
    console.log('打印endData',currentDate);
    this.timeRange[0]=firstDayOfYear?firstDayOfYear:'';
    this.timeRange[1] = currentDate?currentDate:'';
    await this.getSummaryData();
  },
  methods:{
    handleTimeChange(dateVal){
      this.timeRange[0] =  dateVal[0];
      this.timeRange[1] =  dateVal[1];
      console.log('打印deteVal',dateVal);
      this.getSummaryData();
    },
    async getSummaryData(){
      let params ={
        startDate:this.timeRange[0]?this.timeRange[0]:'',
        endDate:this.timeRange[1]?this.timeRange[1]:''
      }
      await querySummaryData(params).then((res)=>{
        const { value } = res;
        const { YTGTPXMS,YQYXMS,YJZNSR,YJZNLR,XMZS,ZHXMS,CKXMS,BYZDTJXMS,YJZTZ,ZHGR,ZHNX,GF,CN,XMZL,TZGM,XMZTXMZB,YWCJZB,SWMSZB,} = value;
        this.topOptions[0].num = YTGTPXMS?YTGTPXMS:0;
        this.topOptions[1].num = YQYXMS?YQYXMS:0;
        this.topOptions[2].num = YJZNSR?YJZNSR:0;
        this.topOptions[3].num = YJZNLR?YJZNLR:0;
        this.summaryOneOptions[0].num = XMZS?XMZS:0;
        this.summaryOneOptions[1].num = ZHXMS?ZHXMS:0;
        this.summaryOneOptions[2].num = CKXMS?CKXMS:0;
        this.summaryOneOptions[3].num = BYZDTJXMS?BYZDTJXMS:0;
        this.summaryOneOptions[4].num = YJZTZ?YJZTZ:0;
        this.summaryTwoOptions[0].num = ZHGR?ZHGR:0;
        this.summaryTwoOptions[1].num = ZHNX?ZHNX:0;
        this.summaryTwoOptions[2].num = GF?GF:0;
        this.summaryTwoOptions[3].num = CN?CN:0;
        if(XMZL && XMZL.length>0){
          this.xxzl.data = XMZL.map((item)=>{
            return {
              name:item.xmzl,
              value:item.sl
            }
          });
          var xmzlAllNum = XMZL.reduce((a,curr) => a + curr.sl, 0);
          this.xmzlNum = xmzlAllNum;
          console.log('打印xmzlAllNum',xmzlAllNum);
        }
        if(TZGM && TZGM.length>0){
          this.tzgm.data = TZGM;
          var tzgmAllNum = TZGM.reduce((a,curr) => a + curr.value, 0);
          this.tzgmNum = tzgmAllNum;
          console.log('打印this.tzgm',this.tzgm)
        }
        if(XMZTXMZB && XMZTXMZB.length>0){
          this.xmztxmb.data = XMZTXMZB.map((item)=>item.sl);
          this.xmztxmb.label = XMZTXMZB.map((item)=>item.xmzt);
          console.log('打印this.xmztxmb',this.xmztxmb);
        }
        if(YWCJZB && YWCJZB.length>0){
          this.ywcjzb.data = YWCJZB.map((item)=>item.sl);
          this.ywcjzb.label = YWCJZB.map((item)=>item.ywcj);
          console.log('打印this.xmztxmb',this.xmztxmb);
        }
        if(SWMSZB && SWMSZB.length>0){
          this.swmszb.data = SWMSZB.map((item)=>item.sl);
          this.swmszb.label = SWMSZB.map((item)=>item.swms);
          console.log('打印this.xmztxmb',this.xmztxmb);
        }
        setTimeout(()=>{
          this.queryTwo(this.xxzl,this.tzgm,this.xmztxmb);
          this.queryBar(this.ywcjzb,this.swmszb)
        },1000)
        console.log('打印查询项目汇总表的数据----=====》res',res);
      })

    },
    queryTwo (xmzl, tzgm, gpss, ykrss) {
      var echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("two1"));
      let myChart2 = echarts.init(document.getElementById("two2"));
      let myChart3 = echarts.init(document.getElementById("two3"));
      // let myChart4 = echarts.init(document.getElementById("two4"));
      myChart.setOption({
        color: this.color,
        title: {
          text: '项目质量',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          icon:'circle',
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['40%', '60%'],
            // center: ['50%', '40%'], //移动饼状图的位置
            avoidLabelOverlap: false,
            padAngle: 3,
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 30,
                lineStyle: {
                  // 修改标注线的样式
                  color: '#444'
                }
              }
            },
            label: {
              show: true,
              position: "center", //outside 外部显示  inside 内部显示
              color:'#4c4a4a',
              formatter: '{total|' + this.xmzlNum +'}'+ '\n\r' + '{active|项目质量总数}',
              fontSize: 12, //字体大小
              rich: {
                total:{
                  fontSize: 28,
                  fontFamily : "苹方 粗体",
                  color:'#45496a'
                },
                active: {
                  fontFamily : "微软雅黑",
                  fontSize: 14,
                  color:'#6c7a89',
                  lineHeight:30,
                },
              }
            },
            data: xmzl.data,
            emphasis: { //中间文字显示
              show:true,
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
      myChart2.setOption({
        color: this.color,
        title: {
          text: '投资规模',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          icon:'circle',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            padAngle: 3,
            label: {
              show: true,
              position: "center", //outside 外部显示  inside 内部显示
              color:'#4c4a4a',
              formatter: '{total|' + this.tzgmNum +'}'+ '\n\r' + '{active|投资规模总数量}',
              fontSize: 12, //字体大小
              rich: {
                total:{
                  fontSize: 28,
                  fontFamily : "苹方 粗体",
                  color:'#45496a'
                },
                active: {
                  fontFamily : "微软雅黑",
                  fontSize: 14,
                  color:'#6c7a89',
                  lineHeight:30,
                },
              }
            },
            data: tzgm.data,
            emphasis: {
              show:true,
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
      myChart3.setOption({
        title: {
          text: "项目主体项目占比",
        },
        subtitle: {
          text: '副标题',
          left: 100, // 通过数字可以指定像素
          textAlign: 'left' // 左对齐
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果。
        },
        xAxis: [{
          type: 'category',
          data:  gpss.label,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          splitLine:{
            show:true,
            lineStyle:{
              type:'dashed'
            }
          }
          // inverse: true,//倒叙
          // data: gpss.label
        }],
        series: [
          {
            data: gpss.data,
            type: 'bar',
            barWidth: '20%',
            color: "#15c2c3"
          }
        ]
      });
    },
    queryBar(ywcjzb, swmszb){
      var echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("barOne"));
      let myChart1 = echarts.init(document.getElementById("barTwo"));
      myChart.setOption({
        title: {
          text: "业务场景占比",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果。
        },
        xAxis: [{
          type: 'category',
          data:  ywcjzb.label,
          axisLabel:{
            fontSize:10
          },
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          splitLine:{
            show:true,
            lineStyle:{
              type:'dashed'
            }
          }
          // inverse: true,//倒叙
          // data: gpss.label
        }],
        series: [
          {
            data: ywcjzb.data,
            type: 'bar',
            barWidth: '20%',
            color: "#15c2c3"
          }
        ]
      });
      myChart1.setOption({
        title: {
          text: "商务模式占比",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果。
        },
        xAxis: [{
          type: 'category',
          data:  swmszb.label,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          splitLine:{
            show:true,
            lineStyle:{
              type:'dashed'
            }
          }
          // inverse: true,//倒叙
          // data: gpss.label
        }],
        series: [
          {
            data: swmszb.data,
            type: 'bar',
            barWidth: '20%',
            color: "#ffa500"
          }
        ]
      });

    },
  }
}
</script>

<style lang="scss" scoped>
.container{
  height: 100%;
  width: 100%;
  .timeSearch{
    width: 100%;
    border-radius: 5px;
    background-color: #ffffff;
    margin-bottom: 15px;
  }
  .top-content{
    width: 100%;
    display: flex;
    .top-content-label{
      display: flex;
      align-items: center;
      width: calc(100% / 4);
      padding: 20px;
      margin-right:10px;
      background-color: #ffffff;
      border-radius: 5px;
      .contentTitleSty{
        //width: 100%;
        flex: 1;
        margin-left: 10px;
        .titleSty{
          font-family: "苹方 中等", 苹方, sans-serif;
          font-weight: 400;
          font-style: normal;
          color: rgb(127, 130, 149);
        }
        .numSty{
          font-family: "苹方 粗体", "苹方 中等", 苹方, sans-serif;
          font-weight: 700;
          font-style: normal;
          font-size: 20px;
          color: rgb(69, 73, 106);
          margin-top: 2px;
        }
      }
      .imgSty{
        width: 38px;
        height: 38px;
        border-radius: 5px;
      }
    }
  }
  .top-summary{
    margin-top: 15px;
    border-radius: 5px;
    background-color: #ffffff;
    padding: 20px;
    .top-summary-one{
      width: 100%;
      margin: 20px 0px;
      display: flex;
      .oneContentSty{
        width :calc(100% / 5);
        margin-right: 10px;
      }
      .twoContentSty{
        width: calc(100% / 4);
        margin-right: 10px;
      }
    }
  }
  .pieSty{
    width: 100%;
    overflow-x: auto;
    display: flex;
    margin-top: 10px;
    .echartsRound{
      border-radius: 4px;
      width: calc(100% / 3);
      height: 270px;
      //min-width: 552px;
      padding: 15px;
      background-color: #ffffff;
      margin-right: 10px;
    }
  }
  .barSty{
    width: 100%;
    overflow-x: auto;
    display: flex;
    margin-top: 10px;
    .echartsBar{
      border-radius: 4px;
      width: calc(100% / 2);
      height: 270px;
      min-width: 552px;
      padding: 15px;
      background-color: #ffffff;
      margin-right: 10px;
    }
  }
}

</style>
