<template>
  <div class="app-container" style="padding-bottom: 16px;">
    <div class="chart-top clearfix">
      <div class="left">
        <el-card class="box-card noborder">
          <div  class="flex">
            <div class="top-icons" @click="linkTo()">
              <img class="top-img" src="@/assets/images/project/icon_6.png">
              <div class="number">{{statistics.totalCount}}<span>个</span></div>
              <div class="name">项目总数</div>
              <!-- <div class="compare">较上月<span class="ss">+3 <img src="@/assets/images/project/ss.png"></span></div> -->
            </div>
            <div class="top-icons" @click="linkTo(0)">
              <img class="top-img" src="@/assets/images/project/icon_7.png">
              <div class="number">{{statistics.reserveCount}}<span>个</span></div>
              <div class="name">储备项目数</div>
              <!-- <div class="compare">较上月<span class="xj">-1 <img src="@/assets/images/project/xj.png"></span></div> -->
            </div>
            <div class="top-icons" @click="linkTo(1)">
              <img class="top-img" src="@/assets/images/project/icon_8.png">
              <div class="number">{{statistics.followUpCount}}<span>个</span></div>
              <div class="name">跟进中项目</div>
              <!-- <div class="compare">较上月<span class="ss">+3 <img src="@/assets/images/project/ss.png"></span></div> -->
            </div>
            <div class="top-icons" @click="linkTo(2)">
              <img class="top-img" src="@/assets/images/project/icon_9.png">
              <div class="number">{{statistics.bidCount}}<span>个</span></div>
              <div class="name">已中标项目</div>
              <!-- <div class="compare">较上月<span class="ss">+1 <img src="@/assets/images/project/ss.png"></span></div> -->
            </div>
          </div>
        </el-card>
        <!-- <el-card class="box-card noborder" id="charts">
          <div class="cardtitles i">项目经营分析
        </div>
        <div id="xmjyfx" class="chart2"></div>
        </el-card> -->
      </div>
      <el-card class="box-card noborder right">
        <!-- <div class="cardtitles i">最近关注</div>
        <div class="gzlist">
          <div>
            <img src="@/assets/images/project/fjxm.png">
            <div>房建项目</div>
          </div>
          <div>
            <img src="@/assets/images/project/szxm.png">
            <div>市政项目</div>
          </div>
          <div>
            <img src="@/assets/images/project/slxm.png">
            <div>水利项目</div>
          </div>
        </div> -->
        <!-- <div class="cardtitles i">储备项目类别</div>
        <div class="gzlist">
          <div>
            <img src="@/assets/images/project/EPC.png">
            <div>EPC项目</div>
          </div>
          <div>
            <img src="@/assets/images/project/tzxm.png">
            <div>投资项目</div>
          </div>
          <div>
            <img src="@/assets/images/project/fjxm.png">
            <div>房建项目</div>
          </div>
          <div>
            <img src="@/assets/images/project/dlxm.png">
            <div>电力项目</div>
          </div>
          <div>
            <img src="@/assets/images/project/szxm.png">
            <div>市政项目</div>
          </div>
          <div>
            <img src="@/assets/images/project/slxm.png">
            <div>水利项目</div>
          </div>
        </div> -->
        <el-input class="ename_input" prefix-icon="el-icon-search" clearable placeholder="快速搜索项目名称" v-model="projectName">
					<div slot="append" class="btn-search" @click="search()">搜索</div>
				</el-input>
        <div class="addnew" @click="addNew(true)"><div class="img"></div>新建项目</div>
      </el-card>
    </div>

    <div class="chart-bot">
      <!-- <el-card class="box-card noborder left">
        <div class="p1">目标完成率</div>
        <div class="p2">78.09<span>%</span></div>
        <div class="p3">较上月 +12.15 % <span></span> 较上月 +1542 亿 <span></span></div>
        <div class="p4">年度目标总额 1500.00 亿元</div>
      </el-card>
      <el-card class="box-card noborder right">
        <div class="cardtitles i">跟进记录</div>
        <div class="records">
          <div class="recordlist">
            <div class="rec_detail" v-for="(item,index) in recordlist.rows">

              <div class="rec_time">
                <i class="el-icon-time"></i>
                <div>{{item.createTime && item.createTime.slice(0, 16)}}</div>
              </div>
              <div class="rec_con">
                <div><strong>{{item.nickName}}</strong> <span v-if="item.visitMode">({{item.visitMode}})</span></div>
                <div><span>{{item.content}}</span></div>
                <div class="rec_text">
                  <span>拜访对象：{{item.name||'--'}}</span>
                  <span>职位：{{item.position||'--'}}</span>
                  <span>拜访时间：{{item.createTime && item.createTime.slice(0, 10)}}</span>
                  <span>下次拜访时间：{{item.nextVisitTime == null?'--': item.createTime.slice(0, 10)}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card> -->
      <el-card class="box-card noborder pd16">
        <h3>储备项目统计</h3>
        <skeleton v-if="isSkeleton1" style="padding: 16px"></skeleton>
        <div class="flex-box clue-box" v-if="viewData1.length>0&&!isSkeleton1">
          <div class="clue-echarts"><div id="echarts1" style="width: 100%;height:300px; margin: 0 auto;"></div></div>
          <div class="table-item">
            <el-table
              :data="viewData1"
              border
              max-height="231"
              style="width: 100%"
            >
            <el-table-column
              prop="projectCategory"
              label="项目类别"></el-table-column>
            <el-table-column
              prop="businessCount"
              label="储备数量">
            </el-table-column>
            <el-table-column
              prop="totalAmount"
              label="投资金额(万元)">
            </el-table-column>
            </el-table>
          </div>
        </div>
        <no-data  v-if="viewData1.length==0"/>
      </el-card>
      <el-card class="box-card noborder pd16">
        <h3>储备项目资金来源</h3>
        <skeleton v-if="isSkeleton2" style="padding: 16px"></skeleton>
        <div class="flex-box clue-box" v-if="viewData2.length>0&&!isSkeleton2">
          <div class="clue-echarts"><div id="echarts2" style="width: 100%;height:300px; margin: 0 auto;"></div></div>
          <div class="table-item">
            <el-table
              :data="viewData2"
              border
              max-height="231"
              style="width: 100%"
            >
            <el-table-column
              prop="amountSource"
              label="资金来源"></el-table-column>
            <el-table-column
              prop="businessCount"
              label="项目数量">
            </el-table-column>
            <el-table-column
              prop="totalAmount"
              label="投资金额(万元)">
            </el-table-column>
            </el-table>
          </div>
        </div>
        <no-data  v-if="viewData2.length==0"/>
      </el-card>
      <el-card class="box-card noborder pd16">
        <h3>已合作项目统计</h3>
        <skeleton v-if="isSkeleton3" style="padding: 16px"></skeleton>
        <div class="flex-box clue-box" v-if="viewData3.length>0&&!isSkeleton3">
          <div class="clue-echarts"><div id="echarts3" style="width: 100%;height:300px; margin: 0 auto;"></div></div>
          <div class="table-item">
            <el-table
              :data="viewData3"
              border
              max-height="231"
              style="width: 100%"
            >
            <el-table-column
              prop="projectCategory"
              label="项目类别"></el-table-column>
            <el-table-column
              prop="businessCount"
              label="中标数量">
            </el-table-column>
            <el-table-column
              prop="totalAmount"
              label="中标金额(万元)">
            </el-table-column>
            </el-table>
          </div>
        </div>
        <no-data  v-if="viewData3.length==0"/>
      </el-card>
      <el-card class="box-card noborder pd16">
        <h3>公招项目地区统计</h3>
        <el-date-picker
          v-if="radio4=='自定义'"
          v-model="date4"
          @change="dateChange4"
          type="daterange"
          value-format="yyyy-MM-dd"
          unlink-panels
          size="small"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-radio-group v-model="radio4" size="small" @input="radioClick4">
          <el-radio-button label="近三天"></el-radio-button>
          <el-radio-button label="近七天" ></el-radio-button>
          <el-radio-button label="自定义"></el-radio-button>
        </el-radio-group>
        <skeleton v-if="isSkeleton4" style="padding: 16px"></skeleton>
        <div class="flex-box clue-box" v-if="viewData4.length>0&&!isSkeleton4">
          <div class="drawChinese">
            <div id="drawChinese" style="width: 411px; height: 360px;"></div>
            <!-- <img src="@/static/img/index/map-nhzd.png" class="nhzd" alt="南海诸岛" title="南海诸岛"> -->
          </div>
          <div class="table-item">
            <el-table
              :data="viewData4"
              border
              max-height="231"
              style="width: 100%"
            >
            <el-table-column
              prop="type"
              label="地区"></el-table-column>
            <el-table-column
              prop="count"
              sortable
              label="招标数量">
            </el-table-column>
            <el-table-column
              prop="money"
              sortable
              label="总投资(万元)">
            </el-table-column>
            </el-table>
          </div>
        </div>
        <no-data  v-if="viewData4.length==0"/>
      </el-card>
      <el-card class="box-card noborder pd16">
        <h3>公招项目投资金额统计</h3>
        <el-date-picker
          v-if="radio5=='自定义'"
          v-model="date5"
          @change="dateChange5"
          type="daterange"
          value-format="yyyy-MM-dd"
          unlink-panels
          size="small"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-radio-group v-model="radio5" size="small" @input="radioClick5">
          <el-radio-button label="近三天"></el-radio-button>
          <el-radio-button label="近七天" ></el-radio-button>
          <el-radio-button label="自定义"></el-radio-button>
        </el-radio-group>
        <skeleton v-if="isSkeleton5" style="padding: 16px"></skeleton>
        <div class="flex-box clue-box" v-if="viewData5.length>0&&!isSkeleton5">
          <div class="clue-echarts"><div id="echarts5" style="width: 100%;height:300px; margin: 0 auto;"></div></div>
          <div class="table-item">
            <el-table
              :data="viewData5"
              border
              max-height="231"
              style="width: 100%"
            >
            <el-table-column
              prop="rangeName"
              label="金额区间">
            </el-table-column>
            <el-table-column
              prop="count"
              label="招标数量（个）">
            </el-table-column>
            </el-table>
          </div>
        </div>
        <no-data v-if="viewData5.length==0"/>
      </el-card>
      <el-card class="box-card noborder" style="margin-bottom:0;">
        <div >
          <div class="item_title">
            <h3>跟进动态</h3>
            <el-date-picker
              v-if="radio6=='自定义'"
              v-model="date6"
              @change="dateChange6"
              type="daterange"
              value-format="yyyy-MM-dd"
              unlink-panels
              size="small"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-radio-group v-model="radio6" size="small" @input="radioClick6">
              <el-radio-button label="今日"></el-radio-button>
              <el-radio-button label="近三天"></el-radio-button>
              <el-radio-button label="近七天" ></el-radio-button>
              <el-radio-button label="自定义"></el-radio-button>
            </el-radio-group>
          </div>
          <skeleton v-if="isSkeleton6" style="padding: 16px"></skeleton>
          <template v-if="viewData6.length>0&&!isSkeleton6" >
            <div class="scroll_box" ref="scrollRef" @scroll="scrollbottom()">
              <div class="item_wrap" v-for="(item,index) in viewData6" :key="index">
                <h2>{{ item.recordInfo }}</h2>
                <div >
                  <span class="label" v-if="item.businessId||item.projectName">关联项目：</span>
                  <router-link v-if="item.businessId" :to="'/project/projectList/detail?id='+item.businessId+'&tag=xmsl'" tag="a" class="a-link">{{ item.projectName }}</router-link>
                  <span v-else>{{ item.projectName }}</span>
                  <template v-if="item.nickName">
                    <span class="label">跟进人：</span>
                    <span>{{ item.nickName }}</span>
                  </template>
                  <template v-if="item.visitPerson">
                    <span class="label">拜访对象：</span>
                    <span>{{ item.visitPerson }}</span>
                  </template>
                  <template v-if="item.visitTime">
                    <span class="label">本次拜访时间：</span>
                    <span>{{ item.visitTime }}</span>
                  </template>
                  <template v-if="item.nextVisitTime">
                    <span class="label">下次拜访时间：</span>
                    <span>{{ item.nextVisitTime }}</span>
                  </template>
                </div>
              </div>
            </div>
          </template>
          <no-data style="margin:20px 0" v-if="viewData6.length==0"/>
        </div>
      </el-card>
    </div>
    <addproject v-if="isshow" @addproject="add" @cancel="addNew"></addproject>
  </div>
</template>

<script>
  import "@/assets/styles/project.scss"
  import {getStatistics,getCount,getAmount,countGroupByProvince,rangByMoney,getAllRecord} from "@/api/project/project.js"
  import * as echarts from 'echarts'
  import addproject from '../projectList/component/addProject'
  import NoData from '../../component/noData'
  import '@/assets/lib/china.js'
  import skeleton from '@/views/project/projectList/component/skeleton'

export default {
  name: 'Overview',
  components:{addproject,NoData,skeleton},
  data() {
    return {
      isSkeleton1:true,
      isSkeleton2:true,
      isSkeleton3:true,
      isSkeleton4:true,
      isSkeleton5:true,
      isSkeleton6:true,
      projectName:'',
      datatype:'1',//切换类型
      viewData1:[],
      viewData2:[],
      viewData3:[],
      viewData4:[],
      viewData5:[],
      viewData6:[],
      isshow:false,
      statistics:{},
      myChart1:'',
      myChart2:'',
      myChart3:'',
      myChart4:'',
      myChart5:'',
      recordParams:{
        pageNum:1,
        pageSize:10,
      },
      recordTotal:0,
      radio4:'近三天',
      date4:'',
      startDate4:'',
      endDate4:'',
      radio5:'近三天',
      date5:'',
      startDate5:'',
      endDate5:'',
      radio6:'',
      date6:'',
      startDate6:'',
      endDate6:'',
    }
  },
  created() {
    // this.$route.push({ path: "/projectList" })
  },
  mounted(){
    this.getCount1();
    this.getCount2();
    this.getAmount();
    this.getcountGroupByProvince();
    this.getRangByMoney();
    this.getAllRecord();
    getStatistics().then(res=>{
      if(res.code==200){
        this.statistics = res.data;
      }
    })
    window.addEventListener("resize", this.resizeEcharts);
  },
  beforeDestroy(){
    window.removeEventListener("resize", this. resizeEcharts);
  },
  activated() {
    this.resizeEcharts()
  },
  methods: {
    getAllRecord(page){
      this.recordParams.userId = this.$store.state.user.userId
      if(page){
        this.recordParams.pageNum = 1;
        this.viewData6 = []
      }
      getAllRecord(this.recordParams).then(res=>{
        if(res.code==200){
          this.isSkeleton6 = false;
          this.recordTotal = res.total
          this.viewData6 = this.viewData6.concat(res.rows)
        }
      })
    },
    getCount1(){
      getCount(0).then(res=>{
        if(res.code==200){
          this.isSkeleton1 = false;
          this.viewData1 = res.data;
          if(this.viewData1.length>0){
            for(var i=0;i< this.viewData1.length;i++){
              if(!this.viewData1[i].projectCategory){
                this.viewData1.splice(i,1)
                i--
              }
            }
            this.$nextTick(()=>{
              let chartDom1 = document.getElementById("echarts1")
              this.myChart1 = echarts.init(chartDom1)
              this.initChart1()
            })
          }
        }
      })
    },
    getCount2(){
      getCount(2).then(res=>{
        if(res.code==200){
          this.isSkeleton3 = false;
          this.viewData3 = res.data;
          if(res.data.length>0){
            this.$nextTick(()=>{
              let chartDom3 = document.getElementById("echarts3")
              this.myChart3 = echarts.init(chartDom3)
              this.initChart3()
            })
          }
        }
      })
    },
    getAmount(){
      getAmount().then(res=>{
        if(res.code==200){
          this.isSkeleton2 = false;
          this.viewData2 = res.data;
          if(res.data.length>0){
            for(var i=0;i< this.viewData2.length;i++){
              if(!this.viewData2[i].amountSource){
                this.viewData2.splice(i,1)
                i--
              }
            }
            this.$nextTick(()=>{
              let chartDom2 = document.getElementById("echarts2")
              this.myChart2 = echarts.init(chartDom2)
              this.initChart2()
            })
          }
        }
      })
    },
    getcountGroupByProvince(){
      let data = {}
      if(this.startDate4){
        data = {
          "startDate": this.startDate4,
          "endDate": this.endDate4,
        }
      }
      countGroupByProvince(data).then(res=>{
        if(res.code==200){
          this.isSkeleton4 = false;
          this.viewData4 = res.data;
          if(this.viewData4.length>0){
            this.viewData4.map(item=>{
              if(item.money>0){
                item.money = Number(item.money)
              }
              item.name = item.type
              item.value = {count:item.count}
              item.select = {
                itemStyle:{
                  areaColor: '#0081FF',
                },
                label: {
                    color: '#FFFFFF',
                    fontSize: '10'
                  }
                }
            })
            this.$nextTick(()=>{
              let chartDom1 = document.getElementById("drawChinese")
              this.myChart4 = echarts.init(chartDom1)
              this.initChart4()
            })
          }
        }
      })
    },
    getRangByMoney(){
      let data = {}
      if(this.startDate5){
        data = {
          "startDate": this.startDate5,
          "endDate": this.endDate5,
        }
      }
      rangByMoney(data).then(res=>{
        if(res.code==200){
          this.isSkeleton5 = false;
          this.viewData5 = res.data.reverse();
          this.$nextTick(()=>{
            let chartDom5 = document.getElementById("echarts5")
            this.myChart5 = echarts.init(chartDom5)
            this.initChart5()
          })
        }
      })
    },
    initChart1(){
      //储备项目统计
      let barData1 = [],xAxisData1 = [],lineData1=[];
      this.viewData1.length>0&&this.viewData1.map(item=>{
        barData1.push(item.businessCount)
        xAxisData1.push(item.projectCategory)
        lineData1.push(item.totalAmount)
      })
      let option1 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData1,
            axisTick: {
              alignWithLabel: true,
              show: false
            }
          }
        ],
        yAxis: [
          {
            name: '单位：个',
            type: 'value',
            splitLine : { //网格线
              lineStyle: {
                type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
              },
            }
          },
          {
            nameTextStyle: {
              padding: [0, 10, 0, 50],    // 四个数字分别为上右下左与原位置距离
              color: '#666666',
            },
            name: '单位：万元',
            type: 'value',
            splitLine : { //网格线
              show:false
            },
          }
        ],
        series: [
          {
            name: '储备数量',
            type: 'bar',
            barWidth: '18px',
            data: barData1,
            itemStyle:{
              normal: {
                barBorderRadius: [9, 9, 0, 0],
                color: '#165DFF'
              }
            }
          },
          {
							name: '投资金额(万元)',
							symbolSize: 8, //标记的大小（折线图圆点大小）
							label: {
								color: "#67B3FD",
							},
							lineStyle: {
								color: "#67B3FD",
								width: 4
							},
							itemStyle: {
								color: "#67B3FD"
							},
							type: 'line',
              yAxisIndex: 1,
							data: lineData1
						},
        ],
      }
      option1 && this.myChart1.setOption(option1)

    },
    initChart2(){
      //储备项目资金来源统计
      let data =[]
      this.viewData2.length>0&&this.viewData2.map(item=>{
        data.push({value:item.totalAmount,name:item.amountSource})
      })
      let option1 = {
        tooltip: {
          trigger: 'item',
          extraCssText: 'border:0',
        },
        legend: {
          bottom: '0%',
          left: 'center',
          itemWidth:12,
          itemHeight:8,
        },
        
        color:['#0081FF','#FFB51B','#8DCF96','#FFDC6B','#FE9C77'],//修改配色
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%','70%'],
            data:data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0)'
              },
              label: {
                show: true,
                fontSize: 14,
              }
            }
          }
        ]
      }
      option1 && this.myChart2.setOption(option1)

    },
    initChart3(){
      //合作项目统计
      let barData1 = [],xAxisData1 = [],lineData1=[];
      this.viewData3.length>0&&this.viewData3.map(item=>{
        barData1.push(item.businessCount)
        xAxisData1.push(item.projectCategory)
        lineData1.push(item.totalAmount)
      })
      let option3 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData1,
            axisTick: {
              alignWithLabel: true,
              show: false
            }
          }
        ],
        yAxis: [
          {
            name: '单位：个',
            type: 'value',
            splitLine : { //网格线
              lineStyle: {
                type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
              },
            }
          },
          {
            name: '单位：万元',
            type: 'value',
            nameTextStyle: {
              padding: [0, 10, 0, 50],    // 四个数字分别为上右下左与原位置距离
              color: '#666666',
            },
            splitLine : { //网格线
              show:false
            },
          }
        ],
        series: [
          {
            name: '中标数量',
            type: 'bar',
            barWidth: '18px',
            data: barData1,
            itemStyle:{
              normal: {
                barBorderRadius: [9, 9, 0, 0],
                color: '#165DFF'
              }
            }
          },
          {
							name: '中标金额(万元)',
							symbolSize: 8, //标记的大小（折线图圆点大小）
							label: {
								color: "#67B3FD",
							},
							lineStyle: {
								color: "#67B3FD",
								width: 4
							},
							itemStyle: {
								color: "#67B3FD"
							},
							type: 'line',
              yAxisIndex: 1,
							data: lineData1
						},
        ],
      }
      option3 && this.myChart3.setOption(option3)

    },
    //中国地图
    initChart4(){
      // 指定图表的配置项和数据
      // 绘制图表
      let data =[]
      this.viewData4.length>0&&this.viewData4.map(item=>{
        data.push({value:item.count,name:item.name,money:item.money})
      })
      let options = {
        tooltip: {
          trigger: 'item',
          show: true,
          formatter: function(params) {
            return `<span style="color:rgba(35, 35, 35, 1);font-size:14px;">${params.name}</span><br>
            <span style="color:#3D3D3D;font-size:12px;">招标数量</span><span style="color:#3D3D3D;font-size:12px;font-weight:700;">  ${params.value}</span><br>
            <span style="color:#3D3D3D;font-size:12px;">总投资(万元)</span><span style="color:#3D3D3D;font-size:12px;font-weight:700;">  ${params.data.money}</span><br>
            `
          }
        },
        // 左侧小导航图标
        visualMap: {
          show: false,
          x: 'left',
          y: 'center',
          min: 0,
          max: 830000,
          color: ['#D1E6FF']
        },
        selectedMode: 'single',
        series: [{
          name: '地图',
          type: 'map',
          mapType: 'china',
          roam: false,
          zoom: 1.2,
          label: {
            normal: {
              show: false, // 省份名称
            },
            
          },
          itemStyle: {
            normal: { // 未选中状态
              // areaColor: 'red', // 南沙诸岛背景颜色
              borderColor: '#FFFFFF',
              label: {
                show: true// 显示名称
              }
            },
            emphasis: { // 也是选中样式
              areaColor: '#FDD85E',
            }
          },
          data: data
        }]
      }
      this.myChart4.setOption(options)
    },
    initChart5(){
      //公招项目投资金额统计
      let data =[]
      this.viewData5.length>0&&this.viewData5.map(item=>{
        data.push({value:item.count,name:item.rangeName})
      })
      let option1 = {
        tooltip: {
          trigger: 'item',
          extraCssText: 'border:0',
        },
        legend: {
          bottom: '0%',
          left: 'center',
          itemWidth:12,
          itemHeight:8,
        },
        
        color:['#0081FF','#FFB51B','#8DCF96','#FFDC6B','#FE9C77'],//修改配色
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%','70%'],
            data:data,
            label: {
                show: true,
                formatter(param) {
                  return param.value+'个';
                }
              },
          }
        ]
      }
      option1 && this.myChart5.setOption(option1)
    },
    linkTo(status){
      this.$router.push({
        path:'/project/projectList',
        query:{status:status,type:1}
      })
    },
    resizeEcharts (){
      const self = this
      setTimeout(function(){
        self.myChart.resize()
      }, 10)
    },
    gettime(time){
      if(time == null || time == "")
        return null
      let times = new Date(time)
      let year = times.getFullYear()
      let month = times.getMonth()+1
      month = month<10?"0"+month:month
      let day = times.getDate()
      day = day<10?"0"+day:day
      let hour = times.getHours()
      let minute = times.getMinutes()
      let second = times.getSeconds()
      return year+'-'+month+'-'+day+' '+hour+":"+minute+":"+second
    },
    addNew(isshow){
      this.isshow = isshow
    },
    search(){
      this.$router.push({ path: '/project/projectList',query:{projectName:this.projectName,type:1}})
    },
    add(){
      this.isshow = false
      this.$router.push({ path: '/project/projectList' })
    },
    scrollbottom(){
      let scrllEl = this.$refs.scrollRef
      let scrollHeight = scrllEl.scrollHeight
      let clientHeight = scrllEl.clientHeight
      let scrollTop = scrllEl.scrollTop
      if(scrollHeight - (scrollTop+clientHeight) <= 1 ){
          if(this.recordParams.pageNum*this.recordParams.pageSize>=this.recordTotal){
            return
          }
          this.recordParams.pageNum+=1;
          this.getAllRecord()
      }
    },
    radioClick4(){
      const datetime = new Date();
      var Year, Month, Day;
      Year = datetime.getFullYear();
      Month = datetime.getMonth() + 1;
      Day = datetime.getDate();
      if(this.radio4=='近三天'){
        var newTime = datetime.getTime() - 3 * 24 * 60 * 60 * 1000;
        this.startDate4 = new Date(newTime).getFullYear() +"-" +((new Date(newTime).getMonth() + 1)<10?'0'+(new Date(newTime).getMonth() + 1):(new Date(newTime).getMonth() + 1)) +"-" +new Date(newTime).getDate();
        this.endDate4 = Year + "-" + (Month<10?'0'+Month:Month) + "-" + Day;
        this.getcountGroupByProvince()
      }
      if(this.radio4=='近七天'){
        var newTime = datetime.getTime() - 7 * 24 * 60 * 60 * 1000;
        this.startDate4 = new Date(newTime).getFullYear() +"-" +((new Date(newTime).getMonth() + 1)<10?'0'+(new Date(newTime).getMonth() + 1):(new Date(newTime).getMonth() + 1)) +"-" +new Date(newTime).getDate();
        this.endDate4 = Year + "-" + (Month<10?'0'+Month:Month) + "-" + Day;
        this.getcountGroupByProvince()
      }
    },
    radioClick5(){
      const datetime = new Date();
      var Year, Month, Day;
      Year = datetime.getFullYear();
      Month = datetime.getMonth() + 1;
      Day = datetime.getDate();
      if(this.radio5=='近三天'){
        var newTime = datetime.getTime() - 3 * 24 * 60 * 60 * 1000;
        this.startDate5 = new Date(newTime).getFullYear() +"-" +((new Date(newTime).getMonth() + 1)<10?'0'+(new Date(newTime).getMonth() + 1):(new Date(newTime).getMonth() + 1)) +"-" +new Date(newTime).getDate();
        this.endDate5 = Year + "-" + (Month<10?'0'+Month:Month) + "-" + Day;
        this.getRangByMoney()
      }
      if(this.radio5=='近七天'){
        var newTime = datetime.getTime() - 7 * 24 * 60 * 60 * 1000;
        this.startDate5 = new Date(newTime).getFullYear() +"-" +((new Date(newTime).getMonth() + 1)<10?'0'+(new Date(newTime).getMonth() + 1):(new Date(newTime).getMonth() + 1)) +"-" +new Date(newTime).getDate();
        this.endDate5 = Year + "-" + (Month<10?'0'+Month:Month) + "-" + Day;
        this.getRangByMoney()
      }
    },
    radioClick6(){
      const datetime = new Date();
      var Year, Month, Day;
      Year = datetime.getFullYear();
      Month = datetime.getMonth() + 1;
      Day = datetime.getDate();
      if(this.radio6=='今日'){
        var newTime = datetime.getTime() - 3 * 24 * 60 * 60 * 1000;
        this.startDate6 = Year + "-" + (Month<10?'0'+Month:Month) + "-" + Day;
        this.endDate6 = Year + "-" + (Month<10?'0'+Month:Month) + "-" + Day;
        this.recordParams.startTime = this.startDate6;
        this.recordParams.endTime = this.endDate6;
        this.getAllRecord(1)
      }
      if(this.radio6=='近三天'){
        var newTime = datetime.getTime() - 3 * 24 * 60 * 60 * 1000;
        this.startDate6 = new Date(newTime).getFullYear() +"-" +((new Date(newTime).getMonth() + 1)<10?'0'+(new Date(newTime).getMonth() + 1):(new Date(newTime).getMonth() + 1)) +"-" +new Date(newTime).getDate();
        this.endDate6 = Year + "-" + (Month<10?'0'+Month:Month) + "-" + Day;
        this.recordParams.startTime = this.startDate6;
        this.recordParams.endTime = this.endDate6;
        this.getAllRecord(1)
      }
      if(this.radio6=='近七天'){
        var newTime = datetime.getTime() - 7 * 24 * 60 * 60 * 1000;
        this.startDate6 = new Date(newTime).getFullYear() +"-" +((new Date(newTime).getMonth() + 1)<10?'0'+(new Date(newTime).getMonth() + 1):(new Date(newTime).getMonth() + 1)) +"-" +new Date(newTime).getDate();
        this.endDate6 = Year + "-" + (Month<10?'0'+Month:Month) + "-" + Day;
        this.recordParams.startTime = this.startDate6;
        this.recordParams.endTime = this.endDate6;
        this.getAllRecord(1)
      }
    },
    dateChange4(){
      if(this.date4&&this.date4[0]){
        this.startDate4 = this.date4[0]
        this.endDate4 = this.date4[1]
      }else{
        this.startDate4 = ''
        this.endDate4 = ''
      }
      this.getcountGroupByProvince()
    },
    dateChange5(){
      if(this.date5&&this.date5[0]){
        this.startDate5 = this.date5[0]
        this.endDate5 = this.date5[1]
      }else{
        this.startDate5 = ''
        this.endDate5 = ''
      }
      this.getRangByMoney()
    },
    dateChange6(){
      if(this.date6&&this.date6[0]){
        this.startDate6 = this.date6[0]
        this.endDate6 = this.date6[1]
      }else{
        this.startDate6 = ''
        this.endDate6 = ''
      }
      this.recordParams.startTime = this.startDate6;
      this.recordParams.endTime = this.endDate6;
      this.getAllRecord(1)
    },
  }
}
</script>

<style lang="scss" scoped>
.chart-top{
  .left{
    float: left;
    height: 122px;
    width: calc(100% - 318px);
    .box-card:first-child{
      margin-bottom: 12px;
      height: 124px;
      padding: 16px;
    }
    
  }
  .right{
    float: right;
    height: 122px;
    width: 304px;
    padding: 18px;
    box-sizing: border-box;
    ::v-deep .ename_input{
      width: 268px;
      .el-input__inner{
        width: 208px;
        height: 36px;
      }
      .el-input-group__append{
				   padding:0px;
				   line-height: 34px;
				   height: 34px;
				   font-weight: 400;
				   color: #0081FF;
				   width: 60px;
				   background: #F5F5F5;
				   border-radius: 0px 0px 0px 0px;
				   text-align: center;
				   cursor: pointer;
			   }
         .el-icon-search{
          color: #0081FF;
         }
    }  
  }
  .top-icons{
    width: 33%;
    height: 92px;
    padding: 16px;
    cursor: pointer;
    &::before{
      content: ' ';
      width: 1px;
      height: 56px;
      background: #EFEFEF;
      float: left;
      margin-left: -16px;
    }
    &:first-child:before{
      width: 0;
    }
    .top-img{
      float: left;
      width: 48px;
      margin: 0 8px 12px 0;
    }
    .name{
      font-size: 12px;
      line-height: 14px;
    }
    .number{
      font-size: 18px;
      font-weight: 700;
      padding: 8px 0;
      span{
        font-size: 12px;
        color: rgba(35, 35, 35, 0.40);
        font-weight: 400;
        margin-left: 2px;
      }
      &:hover{
        color: #0081FF;
        span{
          color:#0081FF;
        }
      }
    }
    .compare{
      font-size: 12px;
      color: rgba(35, 35, 35, 0.40);
      line-height: 12px;
      .ss{
        color: #0CBC6D;
        padding-left: 3px;
        position: relative;
        >img{
          width: 8px;
          margin-top: 0px;
          position: absolute;
          margin-left: 8px;
        }
      }
      .xj{
        color: #FF3C3C;
        padding-left: 3px;
        position: relative;
        >img{
          width: 8px;
          margin-top: 1px;
          position: absolute;
          margin-left: 8px;
        }
      }
    }
  }
}
.chart-bot{
  height: auto;
  .left{
    float: left;
    width: 353px;
    height: 354px;
    background: url("../../../assets/images/project/glbj.png")no-repeat top center;
    background-size: 100% 100%;
    color: #FFFFFF;
    padding-left: 32px;
    .p1{
      font-size: 18px;
      font-weight: bold;
      line-height: 18px;
      padding-top: 56px;
    }
    .p2{
      font-weight: bold;
      font-size: 50px;
      line-height: 40px;
      margin-top: 24px;
      height: 40px;
      box-sizing: border-box;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      >span{
        font-size: 16px;
        font-weight: 400;
        padding-left: 13px;
      }
    }
    .p3{
      margin-top: 24px;
      font-size: 12px;
      >span{
        display: inline-block;
        margin-right: 34px;
        width: 8px;
        height: 10px;
        background: url("../../../assets/images/project/ss_1.png") no-repeat center center;
        background-size: 100% 100%;
      }
      .xj{
        transform: rotateX(180deg);
      }
    }
    .p4{
      font-size: 16px;
      color: #2A72F3;
      font-weight: bold;
      padding-left: 28px;
      margin-top: 30px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    }
  }
  .right{
    float: right;
    height: auto;
    width: calc(100% - 369px);
    .records{
      margin-top: 2px;
      height: 627px;
      overflow-y: auto;
      width: 100%;
      padding-right: 47px;
      box-sizing: border-box;
      .recordlist{
        padding-top: 0;
      }
    }
  }
  h3{
      font-weight: 900;
      color: #232323;
      font-size: 16px;
      line-height: 1;
      margin: 0;
    }
  .pd16{
    padding: 16px;
    position: relative;
    .clue-box{
      width: 100%;
      justify-content: space-between;
      margin-top: 20px;
      .clue-echarts{
        width: calc(50% - 8px);
      }
      .table-item{
        width: calc(50% - 8px);
        ::v-deep .el-table--border .el-table__cell{
          border-bottom: 0;
        }
      }
      .drawChinese{
        width: 411px;
        height: 360px;
        margin-top: -30px;
        position: relative;
        margin: 0 auto;
        .nhzd{
          width: 50px;
          height: auto;
          position: absolute;
          right: 20px;
          bottom: -8px;
        }
      }
    }
    
  }
  .item_title{
      height: 56px;
      padding: 16px;
      box-sizing: border-box;
      border-bottom: 1px solid #EFEFEF;
      position: relative;
    }
  .scroll_box{
    overflow-y:scroll ;
    max-height: 509px;
    
    .item_wrap{
        height: 102px;
        border-bottom: 1px solid #EFEFEF;
        padding: 20px;
        box-sizing: border-box;
        color: rgba(35, 35, 35, 0.80);
        h2{
          font-size: 16px;
          color: rgba(35, 35, 35, 0.80);
          font-weight: 700;
          height: 24px;
          line-height: 24px;
          margin-top:0 ;
          margin-bottom: 16px;
        }
        span{
          margin-right: 40px;
          font-size: 14px;
        }
        .label{
          color: rgba(35, 35, 35, 0.40);
          margin-right: 0;
        }
        .a-link{
          font-size: 14px;
          margin-right: 40px;
        }
      }
  }
  ::v-deep .el-radio-group{
      position: absolute;
      right: 20px;
      top: 20px;
      .el-radio-button__inner{
        padding: 9px 12px;
      }
    }
    ::v-deep .el-date-editor{
      width: 320px;
      position: absolute;
      right: 220px;
      top: 20px;
    }
    .item_title{
      ::v-deep .el-radio-group,::v-deep .el-date-editor{
        top: 12px;
      }
      ::v-deep .el-date-editor{
        right: 270px;
      }
    }
}

.cardtitles{
  position: relative;
}

.chart2{
  width: 100%;
  padding: 0 0 0 16px;
  height: 285px;
  margin-top: -20px;
}
.cardtitles.i{
  line-height: 44px;
  height: 44px;
  &::after{
    margin-top: 14px;
  }
}
.gzlist{
  padding: 0px 16px 10px;
  margin-top: -06px;
  >div{
    display: inline-block;
    height: 94px;
    width: 33.3%;
    text-align: center;
    font-size: 12px;
    padding-top: 16px;
    >img{
      height: 48px;
    }
    >div{
      line-height: 14px;
    }
  }
}
.addnew{
  width: 268px;
  height: 36px;
  // background: #F4F6F9;
  border-radius: 4px;
  // color: #0081FF;
  background: #0081FF;
  color: #FFFFFF;
  line-height: 36px;
  margin: auto;
  margin-top: 12px;
  font-size: 14px;
  cursor: pointer;
  .img{
    float: left;
    width: 16px;
    height: 16px;
    background: url("../../../assets/images/project/add.png") no-repeat center center;
    display: inline-block;
    margin: 10px 8px 0 114px;
    
  }
  // &:hover{
  //   background: #0081FF;
  //   color: #FFFFFF;
  //   .img{
  //     background: url("../../../assets/images/project/add_2.png") no-repeat center center;
  //     background-size: 100%;
  //   }
  // }
}
</style>
