<!--固定资产投资情况专题分析-->
<template>
  <div class="full-box ztfx">
    <div class="" style="width: 100%;height:100%;" >
      <div class="top-tip-box t-title">当前位置：专题分析  >  固定资产投资情况专题分析</div>
      <div class="ztfx-info-box">
        <div class="left-search-box">
          <div class="lsb-top">数据截止时间：{{$Util.isEmpty(countData.latestDate)?lastTime:countData.latestDate}}</div>
          <div class="lsb-search">
            <div class="lsb-search-box">
              <div class="sl-row">
                <div class="sl-row-label">时间</div>
                <el-date-picker
                  type="month"
                  :picker-options="beginDate(filter.endDate)"
                  v-model="filter.startDate"
                  placeholder="开始日期"
                  value-format="yyyy-MM"
                  style="width:calc(100% - 40px);float: left;">
                </el-date-picker>
              </div>
              <div class="sl-row">
                <div class="sl-row-label">至</div>
                <el-date-picker
                  type="month"
                  :picker-options="processDate(filter.startDate)"
                  v-model="filter.endDate"
                  placeholder="结束日期"
                  value-format="yyyy-MM"
                  style="width:calc(100% - 40px);float: left;">
                </el-date-picker>
              </div>
            </div>
            <div class="lsb-search-border">
              <div class="lsbb-top"></div>
              <div class="lsbb-role"></div>
              <div class="lsbb-bottom"></div>
            </div>
          </div>
          <div class="lsb-info">
            <div class="lsb-title"><span class="dot"></span>年度信息汇总</div>
            <div class="item-chart">
                <div class="chart-group">
                  <div class="chart-pie">
                    <div class="pie-box">
                      <div class="circle"><div class="circle2"><div class="circle3">{{countData.total}}</div></div></div>
                    </div>
                    <div class="pie-title">累计固定资产投资</div>
                  </div>
                </div>
                <div class="chart-group">
                  <div class="chart-pie">
                    <div class="pie-box">
                      <div class="circle4"><div class="circle5"><div class="circle6">{{countData.years}}</div></div></div>
                    </div>
                    <div class="pie-title">本年度完成投资</div>
                  </div>
                </div>
              </div>
          </div>
        </div>
        <div class="right-info-box">
          <div class="right-left-border">
            <div class="rlb-top"></div>
            <div class="rlb-role"></div>
            <div class="rlb-bottom"></div>
          </div>
          <div class="ri-box">
            <div class="ztfx-charts-box" style="width: 100%;height: 100%;">
              <div class="ztfx-chart-item" style="height: calc(100% - 2px);margin-top: 0">
                <div class="roles-one"></div><div class="roles-two"></div>
                <div class="roles-three"></div><div class="roles-four"></div>
                <div class="ztfx-chart-title"><span class="dot"></span>固定资产投资时间趋势</div>
                <div class="ztfx-chart-info" id="chartOne"></div>
              </div>
              <div class="ztfx-chart-item" style="height: calc(100% - 2px);margin-top: 0">
                <div class="roles-one"></div><div class="roles-two"></div>
                <div class="roles-three"></div><div class="roles-four"></div>
                <div class="ztfx-chart-title"><span class="dot"></span>年度投资规模分布</div>
                <div class="ztfx-chart-info" id="chartTwo"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  const currentDate = new Date('2020/12/31') // 当前日期
  const month = currentDate.getMonth()+1; // 月份
  const year = month<10?currentDate.getFullYear()+"-0"+month :currentDate.getFullYear()+"-"+month;
  const startDate = currentDate.format("yyyy-")+"01"
  const endDate = currentDate.format("yyyy-MM")
  export default {
    name: 'ztfxGdzctz',
    data () {
      return {
        year:currentDate.format("yyyy"),
        showCondition:false,
        timeFilter:[startDate,endDate],
        locations: [],
        lastTime:endDate,
        filter:{
          location:"",
          hydm:"",
          type:'zcz',
          startDate: startDate,
          endDate:endDate
        },
        chartTable:[
          {cid: 2, name: "江西科伦 ", value: 125391.1, valueTb: 12.45},
          {cid: 12, name: "抚州永冠科技 ", value: 125391.1, valueTb: 12.45},
          {cid: 22, name: "书源科技 ", value: 125391.1, valueTb: 12.45},
          {cid: 22, name: "书源科技 ", value: 125391.1, valueTb: 12.45},
          {cid: 22, name: "书源科技 ", value: 125391.1, valueTb: 12.45},
        ],
        defaultOp:{
          title: { show: false },
          legend:{show:false,height:"0"},
          grid:{top:30,bottom:30},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#777'
              },
              crossStyle: {
                color: 'rgba(255,255,255,.8)',
              }
            }
          },
          xAxis: {
            axisLabel:{color:'rgba(255,255,255,.9)'/*,interval:0*/},
            axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
            splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}}
          }
        },
        chartsTitle:{ left:'',right:''},
        countData:{total:0,years:'',latestDate:''},
      }
    },
    mounted (){
      this.getCount();
      this.loadTabCharts();
    },
    watch:{
      "filter.startDate":function(){
        let vm = this
        vm.loadTabCharts()
      },
      "filter.endDate":function(){
        let vm = this
        vm.loadTabCharts()
      },
    },
    methods:{
      initChartsByType (type){
        let vm = this
        vm.filter.type = type
      },
      searchResult(){
        let _this = this
        _this.showCondition = false;
        _this.loadTabCharts();
      },
      loadTabCharts(){
        let vm = this;
        let timeStart = !vm.$Util.isEmpty(vm.filter.startDate) ? vm.filter.startDate.split("-")[0] : null,
          timeEnd = !vm.$Util.isEmpty(vm.filter.endDate) ? vm.filter.endDate.split("-")[0] : null;
        if(timeStart == null || timeEnd== null || timeStart > timeEnd || timeStart <timeEnd){
          let dataText = timeStart == null ? '请选择开始时间':timeEnd ==null ? '请选择结算时间':'支持查询同一年数据，请选择起止时间为同一年后查询！';
          vm.$message({
            showClose: true,
            message:dataText,
            type: 'warning'
          })
          return;
        }
        this.getOneData();
        this.getTwoData();/*
        this.drawLine('chartOne',['投产运营','工业企业','规上工业','上市公司','高新技术'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]);
        let t = [{name: "规上工业总产值", value: 122},{name: "智能机器人制造", value: 233},{name: "生物医药", value: 453}];
        let legend=[];
        t.forEach(function (item) {
          legend.push(item.name)
        })
        this.drawPie("chartTwo",t,legend)*/
      },
      getCount(){
        let vm = this;
        vm.$http.get('/dx-economy-api/subject/largeProject/total',{params:{year:vm.year}}).then(function (resp) {
          let t = resp.data.data
          vm.countData = t;
        })
      },
      getOneData(){
        let vm = this;
        let _start = "",_end = "";
        if(!vm.$Util.isEmpty(vm.timeFilter)){
          if(vm.timeFilter.length === 1){
            _start = vm.timeFilter[0];
          }else if(vm.timeFilter.length === 2){
            _start = vm.timeFilter[0];
            _end = vm.timeFilter[1];
          }
        }
        vm.$http.get('/dx-economy-api/subject/largeProject/times',{params:$.extend({startDate:_start,endDate:_end},vm.filter)}).then(function (resp) {
          let t = resp.data.data
          vm.chartsTitle.left='投资额(万元)';
          vm.drawLine('chartOne',t.xAxis,t.value,null);
        })
      },
      getTwoData(){
        let vm = this;
        let _start = "",_end = "";
        if(!vm.$Util.isEmpty(vm.timeFilter)){
          if(vm.timeFilter.length === 1){
            _start = vm.timeFilter[0];
          }else if(vm.timeFilter.length === 2){
            _start = vm.timeFilter[0];
            _end = vm.timeFilter[1];
          }
        }
        vm.$http.get('/dx-economy-api/subject/largeProject/scale',{params:$.extend({startDate:_start,endDate:_end},vm.filter)}).then(function (resp) {
          let t = resp.data.data;
          let legend=[];
          t.forEach(function (item) {
            legend.push(item.name);
            item.value = item.value == 0 ? null: item.value;
          })
          vm.drawPie("chartTwo",t,legend)
        })
      },
      drawLine(container,cate,d1,d2,d3){
        let vm = this
        let myChart = vm.$echarts.init(document.getElementById(container))
        let op = {
          xAxis: {
            type:"category",
            data: cate,
            axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}}
          },
          yAxis:[
            {
              type: 'value',
              name:vm.chartsTitle.left,
              nameTextStyle:{color:'rgba(255,255,255,.8)'},
              axisLabel:{
                color:'rgba(255,255,255,.8)',
                formatter: function (value) {
                  let texts = [];
                  if(value<1000){
                    texts.push(value)
                  }else if(Math.ceil(value/1000)>=1&&Math.ceil(value/1000)<10){
                    texts.push(Math.ceil(value/1000) + "千")
                  }else if(Math.ceil(value/10000)>=1&&Math.ceil(value/10000)<100){
                    texts.push(Math.ceil(value/10000) + "万")
                  }else if(Math.ceil(value/1000000)>=1){
                    texts.push(Math.ceil(value/1000000) + "百万")
                  }
                  return texts
                }},
              axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
              splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}}
            }
          ],
          series: [
            {
              name: vm.chartsTitle.left,
              type: 'bar',
              color:"#6ee988",
              barMaxWidth:'20',
              data: d1,//[100,200,33,56,188,123,143,23,99],//res.zcz
              itemStyle: {
                color: {
                  type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                  colorStops: [{
                    offset: 0, color: '#6ee988' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#6ee988' // 100% 处的颜色
                  }]
                }
              }
            }
          ]
        }
        myChart.setOption($.extend(true,op,vm.defaultOp));
        if(container == "gytz") {
          myChart.on('click', function (param) {
            let _start = "",_end = "";
            if(!vm.$Util.isEmpty(vm.timeFilter)){
              if(vm.timeFilter.length === 1){
                _start = vm.timeFilter[0];
              }else if(vm.timeFilter.length === 2){
                _start = vm.timeFilter[0];
                _end = vm.timeFilter[1];
              }
            }
            vm.$router.push({name: "gytz", params: {sDate: _start, eDate: _end}})
          })
        }
      },
      drawPie(container,data,legend){
        let vm = this
        let myChart = vm.$echarts.init(document.getElementById(container))
        let op = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          color:['#efca5a','#7dbbea','#ef995a','#ef5a6f','#a8de74','#de74a1','#cb74de','#7483de','#74d8de','#74dec1','#6cef5a','#d85aef'],
          legend: {
            orient: 'horizontal',
            bottom: '20',
            data:legend,
            textStyle:{color:"rgba(255,255,255,.8)"}
          },
          series: [
            {
              name:'固定资产投资占比',
              type:'pie',
              radius:['40%', '70%'],
              minAngle: 30,
              center:['50%', '40%'],
              avoidLabelOverlap: false,
              label:{show:false},
              data:data
            }
          ]
        }
        myChart.setOption(op)
        /*myChart.on('click', function (param) {
          let _start = "",_end = "";
          if(!vm.$Util.isEmpty(vm.timeFilter)){
            if(vm.timeFilter.length === 1){
              _start = vm.timeFilter[0];
            }else if(vm.timeFilter.length === 2){
              _start = vm.timeFilter[0];
              _end = vm.timeFilter[1];
            }
          }
          vm.$router.push({name:"jjyx",params:{sDate:_start,eDate:_end,bk:'',industry:param.name}})
        })*/
      },
    }
  }
</script>
<style>
  .search-row-condition .el-date-editor .el-range-input{width:35%!important;}
</style>
<style scoped>


</style>