
<template>
  <div class="MaterialStatistics_Contain">
    <el-radio-group v-model="currentMenu" style="margin-bottom: 20px;" @input="toModule">
      <el-radio-button label="0">用料统计</el-radio-button>
      <el-radio-button label="1">进度统计</el-radio-button>
      <el-radio-button label="2">可视化统计</el-radio-button>
      <el-radio-button label="3">可视化进度</el-radio-button>
    </el-radio-group>
    <!--        <div class="topContain">-->
    <div style="width: 100%;height: 100%;display: flex;">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
    <el-form-item label="工程周期" prop="enginCycle">
      <el-select v-model="queryParams.enginCycle" filterable clearable placeholder="请选择工程周期"
                 @change="getsumStatus(queryParams.enginCycle)"
      >
        <el-option
          v-for="dict in dict.type.engin_cycle"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        />
      </el-select>
    </el-form-item>
      </el-form>
  </div>
    <div style="height: 800px;width: 1700px">
<div id="main" style="height: 100%;width: 100%"></div>
      </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {getsumStatus} from "@/api/zdsz/overhead";
export default {
  name:'EchartsStatistics',
  dicts:['engin_cycle'],
  data(){
    return {
      currentMenu:2,   // 0:用料管理 1:进度统计 2:可视化进度
      showSearch:true,
      queryParams:{enginCycle:'0'},

    }
  },
  mounted(){
  this.getsumStatus(0)
  },
  methods: {
    getsumStatus(val)
    {
      getsumStatus(val).then(res=>{
        let data=[{
          value: parseInt(res.data.notstart),name:'未施工'
        },{
          value: parseInt(res.data.willDone),name:'施工中'
        },{
          value: parseInt(res.data.done),name:'竣工'
        }]
        let color = ['#FFC881', '#5DB3FF', '#80D9AE'];
        let  option={
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          color: color,
          series: [
            {
              name: '',
              type: 'pie',
              radius: '50%',
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.initmian(option)
      })
    },
    initmian(option)
    {
      console.log(option)
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      myChart.clear()
      myChart.setOption(option,true)
    },
    toModule(){
      console.log(this.$router)
      const currentPage = this.currentMenu == 0 ? 'material_statistics' : this.currentMenu == 1 ? 'progres_statistics' :this.currentMenu == 2 ? 'echarts_statistics': 'progres_visual'
      this.$router.push({
        path:`/${currentPage}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tags-view-container{
  display: none;
}
.MaterialStatistics_Contain{
  width: 100%;
  height: 100%;
  padding: 1%;
  .topContain{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 40px;

    ::v-deep .projectSelect{
      width: 16%;
      .el-input__inner{
        // font-size: 15px;
        // height: 40px ;
        // background-color: #1890FF;
        background: linear-gradient(to right, #2197F2, #0BB0DE);
        color: #fff;
      }
    }

    ::v-deep .districtSelect{
      width: 200px;
    }
    ::v-deep .communitySelect{
      margin-left: 2%;
      width: 200px;
    }
    ::v-deep .projectSelect:not(:nth-child(1)){
      margin-left: 1%;
    }
    ::v-deep .projectSelect:nth-child(3){
      width: 10%;
    }
    ::v-deep .projectSelect:nth-child(4){
      width: 10%;
    }
    .projectDropDown{
      background-color: #1890FF;
      .el-select-dropdown__item{
        background-color: #1890FF;
        color: #fff;
      }
      ::v-deep .el-select-dropdown__list {
        padding-top: 0 !important;
        padding-bottom: 0;
      }
    }
    .projectDropDown >ul{
      padding-top: 0 ;
      padding-bottom: 0;
    }
  }
  .materialStatisticsTable{
    margin-top: 1%;
    border: 2px solid #000066 !important;

  }
  .materialStatisticsTable::before{
    background-color:#000066 ;
  }
  .materialStatisticsTable::after{
    background-color:#000066 ;
  }
}
</style>

<style lang="scss" scoped>
.customTable{
  .el-table__header-wrapper th{
    background-color: #199ED8;
  }
  .el-table--border th.el-table__cell{
    border: 2px solid #000066 !important;
  }
  .el-table__empty-block{
    background-color: #199ED8;
  }
  .el-table__empty-text{
    color: #000066;
  }
  .el-table__cell{
    background-color: #199ED8 ;
    border: 2px solid #000066 !important;
  }
  .el-table__cell >div{
    text-align: center;
  }
  .el-button{
    background-color: #169BD5;
    color: #fff;
  }
}

</style>
