yos_web/src/HDrpManagement/projectData/index.vue

<template>
  <normalLayout>
    <template #refresh>
      <div style="margin-right:15px">
        <el-button style="font-size:14px !important;color: #999999" type="text" size="small" @click="$refs.scroll.wrap.scrollTop=0">返回顶部</el-button>
      </div>
      <!-- <i class="el-icon-refresh-right" @click="refresh" v-loading.fullscreen.lock="fullscreenLoading"></i> -->
    </template>
    <template #content>

      <div style="padding: 20rem;">
        <el-scrollbar ref="scroll">
          <div style="height:calc(100vh);padding:5rem">

            <div class="mt-10 inline-16">
              <label  class="search__label" >部门:</label>
              <el-cascader
                ref="selectdep"
                size="small"
                v-model="depment"
                :options="deplist"
                :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"
                @change="selectDep"
                clearable
              ></el-cascader>
            </div>
            <div class="data-all">
              <div style="margin-bottom:20px">项目</div>
              <div class="data-all-wrapper">
                <div class="data-left">
                  <div class="data-item">
                    <p>{{ tool.formatAmount(dataAll.totalqty) }}</p>
                    <p>项目总数</p>
                  </div>
                  <div class="data-item">
                    <p>{{ tool.formatAmount(dataAll.reportProject)}}</p>
                    <p >
                      报备项目数
                      <el-tooltip class="item" effect="dark" content="报备项目数:统计已报备的项目数量" placement="top">
                        <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
                      </el-tooltip>
                    </p>
                  </div>
                  <div class="data-item">
                    <p>{{ tool.formatAmount(dataAll.startproject) }}</p>
                    <p>
                      进行中项目数
                      <el-tooltip class="item" effect="dark" content="参与项目客户数:参与有下订单的项目的关联客户数" placement="top">
                        <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
                      </el-tooltip>
                    </p>
                  </div>
                  <div class="data-item">
                    <p>{{ tool.formatAmount(dataAll.dealProject) }}</p>
                    <p>
                      项目成交数
                      <el-tooltip class="item" effect="dark" content="项目成交数:统计有关联审核过的订单的项目数量" placement="top">
                        <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
                      </el-tooltip>
                    </p>
                  </div>
                  <div class="data-item">
                    <p>{{ dataAll.cjl }}%</p>
                    <p>
                      项目成交率
                      <el-tooltip class="item" effect="dark" content="项目成交率=有关联审核订单的项目数÷项目总数×100%" placement="top">
                        <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
                      </el-tooltip>
                    </p>
                  </div>
                </div>
                <div class="data-right">
                  <div class="data-item" v-for="item in dataAll.projecttype" :key="item.rowindex">
                    <p>{{ tool.formatAmount(item.qty) }}</p>
                    <p>
                      {{ item.value }}
                      <el-tooltip class="item" effect="dark" content="无分类客户数:统计没有客户分类信息的客户数量" placement="top" v-if="item.value == '无分类客户'">
                        <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="A核心客户:客户分类为A核心客户的数量" placement="top" v-else-if="item.value == 'A核心客户'">
                        <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="B重要客户:客户分类为B重要客户的数量" placement="top" v-else-if="item.value == 'B重要客户'">
                        <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="C普通客户:客户分类为C普通客户的数量" placement="top" v-else-if="item.value == 'C普通客户'">
                        <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="D一般客户：客户分类为D一般客户的数量" placement="top" v-else-if="item.value == 'D一般客户'">
                        <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
                      </el-tooltip>
                    </p>
                  </div>
                </div>
              </div>

            </div>
            <!--项目类型-->
            <div class="data-panel">
              <div class="panel-header">
                <div class="title">项目类型分析</div>
                <div class="panel-select">
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >部门:</label>
                    <el-cascader
                      ref="selectdep"
                      size="small"
                      v-model="typeTableParam.content.dataid"
                      :options="deplist"
                      :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
                      @change="$event => {if($event.length) {typeMapParam.content.type=1;typeMapParam.content.dataid=$event[$event.length - 1];typeTableParam.content.type=1;typeTableParam.content.username='';$refs.typeTable.listData();typeInit()} else {typeMapParam.content.type='';typeMapParam.content.dataid='';typeTableParam.content.dataid='';typeTableParam.content.type='';typeTableParam.content.username='';$refs.typeTable.listData();typeInit()}}"></el-cascader>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >业务员:</label>
                    <el-select v-model="typeTableParam.content.username" filterable placeholder="请选择" size="small"
                    @change="$event => {if($event) {typeMapParam.content.type=0;typeMapParam.content.dataid=$event;typeTableParam.content.type=0;typeTableParam.content.dataid=$event;typeTableParam.content.depname='';$refs.typeTable.listData();typeInit()} else {typeMapParam.content.type='';typeMapParam.content.dataid='';typeTableParam.content.dataid='';typeTableParam.content.type='';typeTableParam.content.depname='';$refs.typeTable.listData();typeInit()}}"
                  >
                      <el-option
                          v-for="item in personnelList"
                          :key="item.index"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                  </div>
                  <!-- <div class="mt-10 inline-16" style="margin-left:10px">
                    <FullScroll domId="projectType"></FullScroll>
                  </div> -->
                </div>
              </div>
              <div class="panel-content" id="projectType">
                <div ref="typeEl" style="width:30%"></div>
                <div class="panel-table" style="width:70%">
                  <pageTable
                    ref="typeTable"
                    :tablecols="tool.tabelCol($route.name).projectTable.tablecols"
                    :param="typeTableParam"
                    :custom="true"
                    fixedName="operation"
                  >
                    <template v-slot:custom="scope">
                      <div v-if="scope.data.columnname == 'sys_tag'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname == 'operation'">
                        <el-button type="text" size="small" @click="goDetail(scope.data.data)">详情</el-button>
                      </div>
                      <div v-else-if="scope.data.columnname == 'signamount_due'">
                        {{ tool.formatAmount(scope.data.data.signamount_due,2,'￥') }}
                      </div>
                      <div v-else-if="scope.data.columnname === 'industry'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname === 'tradingstatus'">
                        <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname === 'status'">
                        <span style="color:rgb(250, 140, 22)" v-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '跟进中'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已失败' || scope.data.data[[scope.data.columnname]] == '已结案'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname == 'scale'">
                        {{scope.data.data.scale ? scope.data.data.scale + scope.data.data.unitname : '' }}
                      </div>
                      <div v-else>
                        {{ scope.data.data[scope.data.columnname] }}
                      </div>
                    </template>
                  </pageTable>
                </div>
              </div>
            </div>
            <!--项目等级分析-->
            <div class="data-panel">
              <div class="panel-header">
                <div class="title">项目等级分析</div>
                <div class="panel-select">
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >部门:</label>
                    <el-cascader
                      ref="selectdep"
                      size="small"
                      v-model="gradTableParam.content.dataid"
                      :options="deplist"
                      :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
                      @change="$event => {if($event.length) {gradMapParam.content.type=1;gradMapParam.content.dataid=$event[$event.length - 1];gradTableParam.content.type=1;gradTableParam.content.username='';$refs.gradTable.listData();gradInit()} else {gradMapParam.content.type='';gradMapParam.content.dataid='';gradTableParam.content.dataid='';gradTableParam.content.type='';gradTableParam.content.username='';$refs.gradTable.listData();gradInit()}}"></el-cascader>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >业务员:</label>
                    <el-select v-model="gradTableParam.content.username" filterable placeholder="请选择" size="small"
                    @change="$event => {if($event) {gradMapParam.content.type=0;gradMapParam.content.dataid=$event;gradTableParam.content.type=0;gradTableParam.content.dataid=$event;gradTableParam.content.depname='';$refs.gradTable.listData();gradInit()} else {gradMapParam.content.type='';gradMapParam.content.dataid='';gradTableParam.content.dataid='';gradTableParam.content.type='';gradTableParam.content.depname='';$refs.gradTable.listData();gradInit()}}"
                    >
                      <el-option
                          v-for="item in personnelList"
                          :key="item.index"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div class="panel-content">
                <div ref="gradEl" style="width:30%"></div>
                <div class="panel-table" style="width:70%">
                  <pageTable
                    ref="gradTable"
                    :tablecols="tool.tabelCol($route.name).projectTable.tablecols"
                    :param="gradTableParam"
                    :custom="true"
                    fixedName="operation"
                  >
                    <template v-slot:custom="scope">
                      <div v-if="scope.data.columnname == 'sys_tag'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname == 'operation'">
                        <el-button type="text" size="small" @click="goDetail(scope.data.data)">详情</el-button>
                      </div>
                      <div v-else-if="scope.data.columnname == 'signamount_due'">
                        {{ tool.formatAmount(scope.data.data.signamount_due,2,'￥') }}
                      </div>
                      <div v-else-if="scope.data.columnname === 'industry'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname === 'tradingstatus'">
                        <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname === 'status'">
                        <span style="color:rgb(250, 140, 22)" v-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '跟进中'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已失败' || scope.data.data[[scope.data.columnname]] == '已结案'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname == 'scale'">
                        {{scope.data.data.scale ? scope.data.data.scale + scope.data.data.unitname : '' }}
                      </div>
                      <div v-else>
                        {{ scope.data.data[scope.data.columnname] }}
                      </div>
                    </template>
                  </pageTable>
                </div>
              </div>
            </div>
            <!--项目评估分析-->
            <div class="data-panel">
              <div class="panel-header">
                <div class="title">项目评估分析</div>
                <div class="panel-select">
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >部门:</label>
                    <el-cascader
                      ref="selectdep"
                      size="small"
                      v-model="scoreTableParam1.content.dataid"
                      :options="deplist"
                      :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
                      @change="$event => {if($event.length) {scoreMapParam1.content.type=1;scoreMapParam1.content.dataid=$event[$event.length - 1];scoreTableParam1.content.type=1;scoreTableParam1.content.username='';$refs.scoreTable.listData();scoreInit()} else {scoreMapParam1.content.type='';scoreMapParam1.content.dataid='';scoreTableParam1.content.dataid='';scoreTableParam1.content.type='';scoreTableParam1.content.username='';$refs.scoreTable.listData();scoreInit()}}"></el-cascader>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >业务员:</label>
                    <el-select v-model="scoreTableParam1.content.username" filterable placeholder="请选择" size="small"
                    @change="$event => {if($event) {scoreMapParam1.content.type=0;scoreMapParam1.content.dataid=$event;scoreTableParam1.content.type=0;scoreTableParam1.content.dataid=$event;scoreTableParam1.content.depname='';$refs.scoreTable.listData();scoreInit()} else {scoreMapParam1.content.type='';gradMapParam.content.dataid='';scoreTableParam1.content.dataid='';scoreTableParam1.content.type='';scoreTableParam1.content.depname='';$refs.scoreTable.listData();scoreInit()}}"
                    >
                      <el-option
                          v-for="item in personnelList"
                          :key="item.index"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div>
                <div ref="scoreEl" style="max-height:400px;min-height:100px"></div>
                <div class="panel-table">
                  <div class="mt-10 inline-16" style="margin-top:10px;display:flex !important;justify-content:space-between">
                    <span style="font-size:16px;color:#333333">{{ scoreStatus ? scoreStatus : '全部' }}</span>
                    <div style="display:flex;align-items:center">
                      <div>
                        <label  class="search__label" >评估分档位:</label>
                        <el-select v-model="scoreTableParam1.content.where.taskType" filterable placeholder="请选择" size="small"
                        @change="$refs.scoreTable.listData()"
                        >
                          <el-option label="全部" value="" />
                          <el-option label="高分档" value="高分档" />
                          <el-option label="中分档" value="中分档" />
                          <el-option label="低分档" value="低分档" />
                        </el-select>
                      </div>
                      <el-tooltip class="item" effect="dark" placement="top">
                        <template #content>
                            <div>高分档: 200分以上</div>
                            <div>中分档:100-200分</div>
                            <div>低分档:100分以下</div>
                        </template>
                        <img style="vertical-align: middle;margin-left:10px" src="@/assets/icons/prompt_icon.svg" alt="">
                      </el-tooltip>
                    </div>
                  </div>
                  <pageTable
                    ref="scoreTable"
                    :tablecols="tool.tabelCol($route.name).projectTable2.tablecols.splice(0,tool.tabelCol($route.name).projectTable2.tablecols.length - 1)"
                    :param="scoreTableParam1"
                    :custom="true"
                    fixedName="operation"
                  >
                    <template v-slot:custom="scope">
                      <div v-if="scope.data.columnname == 'sys_tag'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname == 'operation'">
                        <el-button type="text" size="small" @click="goDetail(scope.data.data)">详情</el-button>
                      </div>
                      <div v-else-if="scope.data.columnname == 'signamount_due'">
                        {{ tool.formatAmount(scope.data.data.signamount_due,2,'￥') }}
                      </div>
                      <div v-else-if="scope.data.columnname == 'dealamount'">
                        {{ tool.formatAmount(scope.data.data.dealamount,2,'￥') }}
                      </div>
                      <div v-else-if="scope.data.columnname === 'industry'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname === 'tradingstatus'">
                        <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname === 'status'">
                        <span style="color:rgb(250, 140, 22)" v-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '跟进中'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已失败' || scope.data.data[[scope.data.columnname]] == '已结案'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname == 'scale'">
                        {{scope.data.data.scale ? scope.data.data.scale + scope.data.data.unitname : '' }}
                      </div>
                      <div v-else>
                        {{ scope.data.data[scope.data.columnname] }}
                      </div>
                    </template>
                  </pageTable>
                </div>
              </div>
            </div>
            <!--12月项目新增-->
            <div class="data-panel">
              <div class="panel-header">
                <div class="title">近12月项目新增分析</div>
                <div class="panel-select">
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >部门:</label>
                    <el-cascader
                      ref="selectdep"
                      size="small"
                      v-model="addParam.content.dataid"
                      :options="deplist"
                      :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
                      @change="$event => {if($event.length) {addParam.content.type=1;addParam.content.username='';addFun()} else {addParam.content.dataid='';addParam.content.type='';addParam.content.username='';addFun()}}"></el-cascader>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >业务员:</label>
                    <el-select v-model="addParam.content.username" filterable placeholder="请选择" size="small"
                      @change="$event => {if($event) {addParam.content.type=0;addParam.content.dataid=$event;addParam.content.depname='';addFun()} else {addParam.content.dataid='';addParam.content.type='';addParam.content.depname='';addFun()}}"
                      >
                      <el-option
                          v-for="item in personnelList"
                          :key="item.index"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >分析日期:</label>
                    <el-date-picker
                        v-model="addParam.content.enddate"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="date"
                        size="small"
                        placeholder="选择日期"
                        @change="addFun()">
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div ref="addEl" style="height:400px"></div>
            </div>
            <!--12月项目报备-->
            <div class="data-panel">
              <div class="panel-header">
                <div class="title">近12月项目报备分析</div>
                <div class="panel-select">
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >部门:</label>
                    <el-cascader
                      ref="selectdep"
                      size="small"
                      v-model="baobeiParam.content.dataid"
                      :options="deplist"
                      :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
                      @change="$event => {if($event.length) {baobeiParam.content.type=1;baobeiParam.content.username='';baobeiFun()} else {baobeiParam.content.dataid='';baobeiParam.content.type='';baobeiParam.content.username='';baobeiFun()}}"></el-cascader>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >业务员:</label>
                    <el-select v-model="baobeiParam.content.username" filterable placeholder="请选择" size="small"
                      @change="$event => {if($event) {baobeiParam.content.type=0;baobeiParam.content.dataid=$event;baobeiParam.content.depname='';baobeiFun()} else {baobeiParam.content.dataid='';baobeiParam.content.type='';baobeiParam.content.depname='';baobeiFun()}}"
                      >
                      <el-option
                          v-for="item in personnelList"
                          :key="item.index"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >分析日期:</label>
                    <el-date-picker
                        v-model="baobeiParam.content.enddate"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="date"
                        size="small"
                        placeholder="选择日期"
                        @change="baobeiFun()">
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div ref="baobeiEl" style="height:400px"></div>
            </div>
            <!--12月项目报价-->
            <div class="data-panel">
              <div class="panel-header">
                <div class="title">近12月项目报价分析</div>
                <div class="panel-select">
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >部门:</label>
                    <el-cascader
                      ref="selectdep"
                      size="small"
                      v-model="baojiaParam.content.dataid"
                      :options="deplist"
                      :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
                      @change="$event => {if($event.length) {baojiaParam.content.type=1;baojiaParam.content.username='';baojiaFun()} else {baojiaParam.content.dataid='';baojiaParam.content.type='';baojiaParam.content.username='';baojiaFun()}}"></el-cascader>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >业务员:</label>
                    <el-select v-model="baojiaParam.content.username" filterable placeholder="请选择" size="small"
                      @change="$event => {if($event) {baojiaParam.content.type=0;baojiaParam.content.dataid=$event;baojiaParam.content.depname='';baojiaFun()} else {baojiaParam.content.dataid='';baojiaParam.content.type='';baojiaParam.content.depname='';baojiaFun()}}"
                      >
                      <el-option
                          v-for="item in personnelList"
                          :key="item.index"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >分析日期:</label>
                    <el-date-picker
                        v-model="baojiaParam.content.enddate"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="date"
                        size="small"
                        placeholder="选择日期"
                        @change="baojiaFun()">
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div ref="baojiaEl" style="height:400px"></div>
            </div>
            <!--12月项目跟进-->
            <div class="data-panel">
              <div class="panel-header">
                <div class="title">近12月项目跟进分析</div>
                <div class="panel-select">
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >部门:</label>
                    <el-cascader
                      ref="selectdep"
                      size="small"
                      v-model="fllowParam.content.dataid"
                      :options="deplist"
                      :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
                      @change="$event => {if($event.length) {fllowParam.content.type=1;fllowParam.content.username='';fllowFun()} else {fllowParam.content.dataid='';fllowParam.content.type='';fllowParam.content.username='';fllowFun()}}"></el-cascader>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >业务员:</label>
                    <el-select v-model="fllowParam.content.username" filterable placeholder="请选择" size="small"
                      @change="$event => {if($event) {fllowParam.content.type=0;fllowParam.content.dataid=$event;fllowParam.content.depname='';fllowFun()} else {fllowParam.content.dataid='';fllowParam.content.type='';fllowParam.content.depname='';fllowFun()}}"
                      >
                      <el-option
                          v-for="item in personnelList"
                          :key="item.index"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >分析日期:</label>
                    <el-date-picker
                        v-model="fllowParam.content.enddate"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="date"
                        size="small"
                        placeholder="选择日期"
                        @change="fllowFun()">
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div ref="fllowEl" style="height:400px"></div>
            </div>
            <!--项目跟进情况-->
            <div class="data-panel">
              <div class="panel-header">
                <div class="title">项目跟进情况统计</div>
                <div class="panel-select">
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >部门:</label>
                    <el-cascader
                      ref="selectdep"
                      size="small"
                      v-model="fllowTableParam.content.dataid"
                      :options="deplist"
                      :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
                      @change="$event => {if($event.length) {fllowMapParam.content.type=1;fllowMapParam.content.dataid=$event[$event.length - 1];fllowTableParam.content.type=1;fllowTableParam.content.username='';$refs.projectFllowTable.listData();fllowInit()} else {fllowMapParam.content.type='';fllowMapParam.content.dataid='';fllowTableParam.content.dataid='';fllowTableParam.content.type='';fllowTableParam.content.username='';$refs.projectFllowTable.listData();fllowInit()}}"></el-cascader>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >业务员:</label>
                    <el-select v-model="fllowTableParam.content.username" filterable placeholder="请选择" size="small"
                    @change="$event => {if($event) {fllowMapParam.content.type=0;fllowMapParam.content.dataid=$event;fllowTableParam.content.type=0;fllowTableParam.content.dataid=$event;fllowTableParam.content.depname='';$refs.projectFllowTable.listData();fllowInit()} else {fllowMapParam.content.type='';fllowMapParam.content.dataid='';fllowTableParam.content.dataid='';fllowTableParam.content.type='';fllowTableParam.content.depname='';$refs.projectFllowTable.listData();fllowInit()}}"
                    >
                      <el-option
                          v-for="item in personnelList"
                          :key="item.index"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div class="panel-content">
                <div ref="projectFllowEl" style="width:30%"></div>
                <div class="panel-table" style="width:70%">
                  <pageTable
                    ref="projectFllowTable"
                    :tablecols="tool.tabelCol($route.name).projectTable.tablecols"
                    :param="fllowTableParam"
                    :custom="true"
                    fixedName="operation"
                  >
                    <template v-slot:custom="scope">
                      <div v-if="scope.data.columnname == 'sys_tag'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname == 'operation'">
                        <el-button type="text" size="small" @click="goDetail(scope.data.data)">详情</el-button>
                      </div>
                      <div v-else-if="scope.data.columnname == 'signamount_due'">
                        {{ tool.formatAmount(scope.data.data.signamount_due,2,'￥') }}
                      </div>
                      <div v-else-if="scope.data.columnname === 'industry'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname === 'tradingstatus'">
                        <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname === 'status'">
                        <span style="color:rgb(250, 140, 22)" v-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '跟进中'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已失败' || scope.data.data[[scope.data.columnname]] == '已结案'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname == 'scale'">
                        {{scope.data.data.scale ? scope.data.data.scale + scope.data.data.unitname : '' }}
                      </div>
                      <div v-else>
                        {{ scope.data.data[scope.data.columnname] }}
                      </div>
                    </template>
                  </pageTable>
                </div>
              </div>
            </div>
            <!--项目联系人情况-->
            <div class="data-panel">
              <div class="panel-header">
                <div class="title">项目联系人情况统计</div>
                <div class="panel-select">
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >部门:</label>
                    <el-cascader
                      ref="selectdep"
                      size="small"
                      v-model="contactTableParam.content.dataid"
                      :options="deplist"
                      :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
                      @change="$event => {if($event.length) {contactMapParam.content.type=1;contactMapParam.content.dataid=$event[$event.length - 1];contactTableParam.content.type=1;contactTableParam.content.username='';$refs.projectContactTable.listData();contactInit()} else {contactMapParam.content.type='';contactMapParam.content.dataid='';contactTableParam.content.dataid='';contactTableParam.content.type='';contactTableParam.content.username='';$refs.projectContactTable.listData();contactInit()}}"></el-cascader>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >业务员:</label>
                    <el-select v-model="contactTableParam.content.username" filterable placeholder="请选择" size="small"
                    @change="$event => {if($event) {contactMapParam.content.type=0;contactMapParam.content.dataid=$event;contactTableParam.content.type=0;contactTableParam.content.dataid=$event;contactTableParam.content.depname='';$refs.projectContactTable.listData();contactInit()} else {contactMapParam.content.type='';contactMapParam.content.dataid='';contactTableParam.content.dataid='';contactTableParam.content.type='';contactTableParam.content.depname='';$refs.projectContactTable.listData();contactInit()}}"
                    >
                      <el-option
                          v-for="item in personnelList"
                          :key="item.index"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div class="panel-content">
                <div ref="projectContactEl" style="width:30%"></div>
                <div class="panel-table" style="width:70%">
                  <pageTable
                    ref="projectContactTable"
                    :tablecols="tool.tabelCol($route.name).projectTable.tablecols"
                    :param="contactTableParam"
                    :custom="true"
                    fixedName="operation"
                  >
                    <template v-slot:custom="scope">
                      <div v-if="scope.data.columnname == 'sys_tag'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname == 'operation'">
                        <el-button type="text" size="small" @click="goDetail(scope.data.data)">详情</el-button>
                      </div>
                      <div v-else-if="scope.data.columnname == 'signamount_due'">
                        {{ tool.formatAmount(scope.data.data.signamount_due,2,'￥') }}
                      </div>
                      <div v-else-if="scope.data.columnname === 'industry'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname === 'tradingstatus'">
                        <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname === 'status'">
                        <span style="color:rgb(250, 140, 22)" v-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '跟进中'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已失败' || scope.data.data[[scope.data.columnname]] == '已结案'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname == 'scale'">
                        {{scope.data.data.scale ? scope.data.data.scale + scope.data.data.unitname : '' }}
                      </div>
                      <div v-else>
                        {{ scope.data.data[scope.data.columnname] }}
                      </div>
                    </template>
                  </pageTable>
                </div>
              </div>
            </div>
            <!--项目关联客户情况-->
            <div class="data-panel">
              <div class="panel-header">
                <div class="title">项目关联客户情况统计</div>
                <div class="panel-select">
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >部门:</label>
                    <el-cascader
                      ref="selectdep"
                      size="small"
                      v-model="customerTableParam.content.dataid"
                      :options="deplist"
                      :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
                      @change="$event => {if($event.length) {customerMapParam.content.type=1;customerMapParam.content.dataid=$event[$event.length - 1];customerTableParam.content.type=1;customerTableParam.content.username='';$refs.projectCustomerTable.listData();customerInit()} else {customerMapParam.content.type='';customerMapParam.content.dataid='';customerTableParam.content.dataid='';customerTableParam.content.type='';customerTableParam.content.username='';$refs.projectCustomerTable.listData();customerInit()}}"></el-cascader>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >业务员:</label>
                    <el-select v-model="customerTableParam.content.username" filterable placeholder="请选择" size="small"
                    @change="$event => {if($event) {customerMapParam.content.type=0;customerMapParam.content.dataid=$event;customerTableParam.content.type=0;customerTableParam.content.dataid=$event;customerTableParam.content.depname='';$refs.projectCustomerTable.listData();customerInit()} else {customerMapParam.content.type='';customerMapParam.content.dataid='';customerTableParam.content.dataid='';customerTableParam.content.type='';customerTableParam.content.depname='';$refs.projectCustomerTable.listData();customerInit()}}"
                    >
                      <el-option
                          v-for="item in personnelList"
                          :key="item.index"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div class="panel-content">
                <div ref="projectCustomerEl" style="width:30%"></div>
                <div class="panel-table" style="width:70%">
                  <pageTable
                    ref="projectCustomerTable"
                    :tablecols="tool.tabelCol($route.name).projectTable.tablecols"
                    :param="customerTableParam"
                    :custom="true"
                    fixedName="operation"
                  >
                    <template v-slot:custom="scope">
                      <div v-if="scope.data.columnname == 'sys_tag'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname == 'operation'">
                        <el-button type="text" size="small" @click="goDetail(scope.data.data)">详情</el-button>
                      </div>
                      <div v-else-if="scope.data.columnname == 'signamount_due'">
                        {{ tool.formatAmount(scope.data.data.signamount_due,2,'￥') }}
                      </div>
                      <div v-else-if="scope.data.columnname === 'industry'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname === 'tradingstatus'">
                        <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname === 'status'">
                        <span style="color:rgb(250, 140, 22)" v-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '跟进中'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已失败' || scope.data.data[[scope.data.columnname]] == '已结案'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname == 'scale'">
                        {{scope.data.data.scale ? scope.data.data.scale + scope.data.data.unitname : '' }}
                      </div>
                      <div v-else>
                        {{ scope.data.data[scope.data.columnname] }}
                      </div>
                    </template>
                  </pageTable>
                </div>
              </div>
            </div>
            <!--项目评估情况-->
            <div class="data-panel">
              <div class="panel-header">
                <div class="title">项目评估情况统计</div>
                <div class="panel-select">
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >部门:</label>
                    <el-cascader
                      ref="selectdep"
                      size="small"
                      v-model="scoreTableParam.content.dataid"
                      :options="deplist"
                      :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
                      @change="$event => {if($event.length) {scoreMapParam.content.type=1;scoreMapParam.content.dataid=$event[$event.length - 1];scoreTableParam.content.type=1;scoreTableParam.content.username='';$refs.projectScoreTable.listData();projectScoreInit()} else {scoreMapParam.content.type='';scoreMapParam.content.dataid='';scoreTableParam.content.dataid='';scoreTableParam.content.type='';scoreTableParam.content.username='';$refs.projectScoreTable.listData();projectScoreInit()}}"></el-cascader>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >业务员:</label>
                    <el-select v-model="scoreTableParam.content.username" filterable placeholder="请选择" size="small"
                    @change="$event => {if($event) {scoreMapParam.content.type=0;scoreMapParam.content.dataid=$event;scoreTableParam.content.type=0;scoreTableParam.content.dataid=$event;scoreTableParam.content.depname='';$refs.projectScoreTable.listData();projectScoreInit()} else {scoreMapParam.content.type='';scoreMapParam.content.dataid='';scoreTableParam.content.dataid='';scoreTableParam.content.type='';scoreTableParam.content.depname='';$refs.projectScoreTable.listData();projectScoreInit()}}"
                    >
                      <el-option
                          v-for="item in personnelList"
                          :key="item.index"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div class="panel-content">
                <div ref="projectScoreEl" style="width:30%"></div>
                <div class="panel-table" style="width:70%">
                  <pageTable
                    ref="projectScoreTable"
                    :tablecols="tool.tabelCol($route.name).projectTable.tablecols"
                    :param="scoreTableParam"
                    :custom="true"
                    fixedName="operation"
                  >
                    <template v-slot:custom="scope">
                      <div v-if="scope.data.columnname == 'sys_tag'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname == 'operation'">
                        <el-button type="text" size="small" @click="goDetail(scope.data.data)">详情</el-button>
                      </div>
                      <div v-else-if="scope.data.columnname == 'signamount_due'">
                        {{ tool.formatAmount(scope.data.data.signamount_due,2,'￥') }}
                      </div>
                      <div v-else-if="scope.data.columnname === 'industry'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname === 'tradingstatus'">
                        <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname === 'status'">
                        <span style="color:rgb(250, 140, 22)" v-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '跟进中'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已失败' || scope.data.data[[scope.data.columnname]] == '已结案'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname == 'scale'">
                        {{scope.data.data.scale ? scope.data.data.scale + scope.data.data.unitname : '' }}
                      </div>
                      <div v-else>
                        {{ scope.data.data[scope.data.columnname] }}
                      </div>
                    </template>
                  </pageTable>
                </div>
              </div>
            </div>
            <!--有效项目未跟进情况-->
            <div class="data-panel">
              <div class="panel-header">
                <div class="title">有效项目未跟进天数分析</div>
                <div class="panel-select">
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >部门:</label>
                    <el-cascader
                      ref="selectdep"
                      size="small"
                      v-model="unfllowTableParam.content.dataid"
                      :options="deplist"
                      :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
                      @change="$event => {if($event.length) {unfllowMapParam.content.type=1;unfllowMapParam.content.dataid=$event[$event.length - 1];unfllowTableParam.content.type=1;unfllowTableParam.content.username='';$refs.customerUnfllowTable.listData();customerUnfllowInit()} else {unfllowMapParam.content.type='';unfllowMapParam.content.dataid='';unfllowTableParam.content.dataid='';unfllowTableParam.content.type='';unfllowTableParam.content.username='';$refs.customerUnfllowTable.listData();customerUnfllowInit()}}"></el-cascader>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >业务员:</label>
                    <el-select v-model="unfllowTableParam.content.username" filterable placeholder="请选择" size="small"
                    @change="$event => {if($event) {unfllowMapParam.content.type=0;unfllowMapParam.content.dataid=$event;unfllowTableParam.content.type=0;unfllowTableParam.content.dataid=$event;unfllowTableParam.content.depname='';$refs.customerUnfllowTable.listData();customerUnfllowInit()} else {unfllowMapParam.content.type='';unfllowMapParam.content.dataid='';unfllowTableParam.content.dataid='';unfllowTableParam.content.type='';unfllowTableParam.content.depname='';$refs.customerUnfllowTable.listData();customerUnfllowInit()}}"
                    >
                      <el-option
                          v-for="item in personnelList"
                          :key="item.index"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label">项目类型:</label>
                    <el-select 
                      v-model="unfllowMapParam.content.where.projecttype" 
                      placeholder="请选择项目类型" 
                      @change="$event => {if($event.length) {unfllowTableParam.content.where.projecttype=$event;$refs.customerUnfllowTable.listData();customerUnfllowInit()} else {unfllowTableParam.content.where.projecttype='';$refs.customerUnfllowTable.listData();customerUnfllowInit()}}" 
                      size="small" clearable>
                      <el-option
                          v-for="item in projectType"
                          :key="item.value"
                          :label="item.value"
                          :value="item.value">
                        <span style="float: left">{{ item.value }}</span>
                        <span style="float: right; color: #8492a6; font-size: 12px">{{ item.remarks?item.remarks:'暂无描述' }}</span>
                      </el-option>
                    </el-select>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >分析日期:</label>
                    <el-date-picker
                        v-model="unfllowMapParam.content.enddate"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="date"
                        size="small"
                        placeholder="选择日期"
                        @change="unfllowTableParam.content.where.enddate=unfllowMapParam.content.enddate;customerUnfllowInit();$refs.customerUnfllowTable.listData()">
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div>
                <div ref="customerUnfllowEl" style="height:400px"></div>
                <div style="font-size:16px;color:#333333;margin:10px 0">{{ unfllowStatus ? unfllowStatus : '全部' }}</div>
                <div>
                  <pageTable
                    v-if="projectType[0].value != ''"
                    ref="customerUnfllowTable"
                    :tablecols="tool.tabelCol($route.name).projectTable1.tablecols.splice(0,tool.tabelCol($route.name).projectTable1.tablecols.length - 1)"
                    :param="unfllowTableParam"
                    :custom="true"
                    @handleParam="handleUnfllowParam"
                  >
                    <template v-slot:custom="scope">
                      <div v-if="scope.data.columnname == 'sys_tag'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname == 'operation'">
                        <el-button type="text" size="small" @click="goDetail(scope.data.data)">详情</el-button>
                      </div>
                      <div v-else-if="scope.data.columnname == 'signamount_due'">
                        {{ tool.formatAmount(scope.data.data.signamount_due,2,'￥') }}
                      </div>
                      <div v-else-if="scope.data.columnname === 'industry'">
                        <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
                      </div>
                      <div v-else-if="scope.data.columnname === 'tradingstatus'">
                        <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else-if="scope.data.columnname === 'status'">
                        <span style="color:rgb(250, 140, 22)" v-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '跟进中'">{{scope.data.data[[scope.data.columnname]]}}</span>
                        <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已失败' || scope.data.data[[scope.data.columnname]] == '已结案'">{{scope.data.data[[scope.data.columnname]]}}</span>
                      </div>
                      <div v-else>
                        {{ scope.data.data[scope.data.columnname] }}
                      </div>
                    </template>
                  </pageTable>
                </div>
              </div>
            </div>
            <!--项目生命周期分析-->
            <div class="data-panel">
              <div class="panel-header">
                <div class="title">
                  项目生命周期分析
                  <el-tooltip class="item" effect="dark" content="统计项目生命周期中的会个关键节点之间平均周期" placement="top">
                    <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
                  </el-tooltip>
                </div>
              </div>
              <div class="progress" v-if="dateList.length">
                  <div class="progress-item" :style="[{'--bg':colorArr[index]},{'--width':item.avg}]" v-for="(item,index) in dateList" :key="index">
                    <div class="day">平均周期:{{ item.dateavg.toFixed(2) }}天</div>
                    <div class="start" v-if="index == 0">
                      <span>{{ item.start }}</span>
                      <span v-if="item.end == '立项'">项目立项</span>
                      <span v-else-if="item.end == '报备'">项目报备审核</span>
                      <span v-else-if="item.end == '报价'">项目报价审核</span>
                      <span v-else-if="item.end == '合同'">项目合同审核</span>
                      <span v-else-if="item.end == '订单'">项目订单审核</span>
                      <span v-else-if="item.end == '结案'">项目结案</span>
                    </div>
                    <div class="end">
                      <span>{{ item.end }}</span>
                      <span v-if="item.end == '立项'">项目立项</span>
                      <span v-else-if="item.end == '报备'">项目报备审核</span>
                      <span v-else-if="item.end == '报价'">项目报价审核</span>
                      <span v-else-if="item.end == '合同'">项目合同审核</span>
                      <span v-else-if="item.end == '订单'">项目订单审核</span>
                      <span v-else-if="item.end == '结案'">项目结案</span>
                    </div>
                  </div>
              </div>
              <el-empty description="描述文字" :image-size="80" v-else></el-empty>
              <div class="panel-select" style="margin-top:90px">
                  <div class="mt-10 inline-16">
                    <label  class="search__label" >部门:</label>
                    <el-cascader
                      clearable
                      ref="selectdep"
                      size="small"
                      v-model="dateParam.content.dataid"
                      :options="deplist"
                      :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" 
                      @change="$event => {if($event.length) {[$event.length - 1];dateParam.content.type=1;dateParam.content.username='';getDate()} else {dateParam.content.dataid='';dateParam.content.type='';dateParam.content.username='';getDate()}}"></el-cascader>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label">项目类型:</label>
                    <el-select v-model="dateParam.content.where.projecttype" placeholder="请选择项目类型" @change="getDate" size="small" clearable>
                      <el-option
                          v-for="item in projectType"
                          :key="item.value"
                          :label="item.value"
                          :value="item.value">
                        <span style="float: left">{{ item.value }}</span>
                        <span style="float: right; color: #8492a6; font-size: 12px">{{ item.remarks?item.remarks:'暂无描述' }}</span>
                      </el-option>
                    </el-select>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label">项目等级:</label>
                    <el-select v-model="dateParam.content.where.grade" placeholder="请选择项目等级" @change="getDate" size="small" clearable>
                      <el-option
                          v-for="item in projectLead"
                          :key="item.value"
                          :label="item.value"
                          :value="item.value">
                        <span style="float: left">{{ item.value }}</span>
                        <span style="float: right; color: #8492a6; font-size: 12px">{{ item.remarks?item.remarks:'暂无描述' }}</span>
                      </el-option>
                    </el-select>
                  </div>
                  <div class="mt-10 inline-16">
                    <label  class="search__label">领域:</label>
                    <el-select v-model="dateParam.content.where.tradefield" placeholder="请选择领域" @change="getDate" size="small" clearable>
                      <el-option
                          v-for="item in tradefieldSelect"
                          :key="item.value"
                          :label="item.value"
                          :value="item.value">
                        <span style="float: left">{{ item.value }}</span>
                        <span style="float: right; color: #8492a6; font-size: 12px">{{ item.remarks?item.remarks:'暂无描述' }}</span>
                      </el-option>
                    </el-select>
                  </div>
              </div>
              <div class="mt-10 inline-16" style="margin-top:10px">
                <label  class="search__label" >项目名称:</label>
                <selectProject :projectType="projectType" :projectLead="projectLead" :tradefieldSelect="tradefieldSelect"  @selectRow="selectRow" ref="selectProject">
                  <div slot="input" style="display:flex;align-items:center">
                    <el-input v-model="projectname" style="width:300px" size="small" placeholder="请选择项目" @focus="$refs.selectProject.visible=true"></el-input>
                    <el-button style="margin-left:10px" @click="clearSelect" size="mini" type="text" v-if="dateParam.content.where.sa_projectid">清空</el-button>
                  </div>
                </selectProject>
              </div>
              <div style="margin-top:10px">
                <div class="mt-10 inline-16">
                  <label  class="search__label">开始节点:</label>
                  <el-select v-model="dateParam.content.begnode" placeholder="开始节点" @change="getDate" size="small" clearable>
                    <el-option label="立项" value="立项"></el-option>
                    <el-option label="报备" value="报备"></el-option>
                    <el-option label="报价" value="报价"></el-option>
                    <el-option label="合同" value="合同"></el-option>
                    <el-option label="订单" value="订单"></el-option>
                    <el-option label="结案" value="结案"></el-option>
                  </el-select>
                </div>
                <span style="margin:0 35px 0 25px">至</span>
                <div class="mt-10 inline-16">
                  <label  class="search__label">结束节点:</label>
                  <el-select v-model="dateParam.content.endnode" placeholder="结束节点" @change="getDate" size="small" clearable>
                    <el-option label="立项" value="立项"></el-option>
                    <el-option label="报备" value="报备"></el-option>
                    <el-option label="报价" value="报价"></el-option>
                    <el-option label="合同" value="合同"></el-option>
                    <el-option label="订单" value="订单"></el-option>
                    <el-option label="结案" value="结案"></el-option>
                  </el-select>
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>

    </template>
  </normalLayout>
</template>

<script>
import { DualAxes,Pie,measureTextWidth,Column,Line,Bar  } from '@antv/g2plot'
import pageTable from './components/pageTable.vue'
import selectProject from './components/selectProject.vue'
import borderTemp from '@/HDrpManagement/dataanalysis/components/border.vue'
import FullScroll from '@/components/fullScroll/index.vue'
export default {
  name:'projectData',
  components:{borderTemp,pageTable,selectProject,FullScroll},
  data () {
    return {
      colorArr:['#3874f6','#00b32b','#ffae02','#f53f3f','#f2f2f2'],
      deplist:[],
      personnelList:[],
      depmentParam:{
        "id": 20230620102004,
        "content": {
        }
      },
      projectType:[{value:''}],
      projectLead:[],
      tradefieldSelect:[],
      projectname:'',
      depment:'',
      dataAll:{
        data:{}
      },
      scoreStatus:'',
      unfllowStatus:'',
      person:'',
      //项目类型分析
      typeMap:'',
      typeMapParam: {
        "id": 20231018140404,
        "content": {
          "type": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "dataid": '',
          "where":{
              "projecttype":""
          }
        }
      },
      typeTableParam:{
        "id": 20231019090104,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "where": {
              // "isfollowup": "", // 有跟进 无跟进 ------项目跟进情况统计列表使用该字段
              // "grade": "", //  项目等级统计列表使用该字段
              // "iscontacts": "", //无联系人 有联系人  ------项目联系人情况统计列表使用该字段
              // "iscustomers": "", //无关联客户 有关联客户  ------项目关联客户情况统计列表使用该字段
              // "istask":"",// 有评估记录 无评估记录  ------ 项目评估情况统计列表使用该字段
              "projecttype":""//   项目类型分析统计列表使用该最低端
          }
        }
      },
      typeData:{
        map:[],
      },
      //项目等级分析
      gradMap:'',
      gradMapParam: {
        "id": 20231018141804,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "where":{
              "grade":""
          }
        }
      },
      gradTableParam:{
        "id": 20231019090104,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "where": {
              "grade": "", //  项目等级统计列表使用该字段
          }
        }
      },
      gradData:{
        map:[],
      },
      //项目评估分析
      scoreMap:'',
      scoreMapParam1: {
        "id": 20231024103104,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
        }
      },
      scoreTableParam1:{
        "id": 20231024112004,
        "content": {
          "type": "",
          "dataid": "",
          "occupancyratio":"",
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "where":{
              "taskType":""
          },
          "pageSize":20,
          "pageNumber":1
        }
      },
      scoreData:{
        map:[],
      },
      //项目12月新增分析
      addMap:'',
      addParam: {
        "id": 20231018155804,
        "content": {
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "type": '',
          "dataid": '',
          "enddate":`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`
        }
      },
      addData: {
        arr1:[],
        arr2:[]
      },
      //项目12月报备分析
      baobeiMap:'',
      baobeiParam: {
        "id": 20231018160504,
        "content": {
          "type": '',
          "enddate":`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "dataid": '',
        }
      },
      baobeiData: {
        arr1:[],
        arr2:[]
      },
      //项目12月跟进分析
      fllowMap:'',
      fllowParam: {
        "id": 20231018163004,
        "content": {
          "type": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "enddate":`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
          "dataid": '',
        }
      },
      fllowData: {
      },
      //项目12月报价分析
      baojiaMap:'',
      baojiaParam: {
        "id": 20231018161604,
        "content": {
          "type": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "enddate":`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
          "dataid": '',
        }
      },
      baojiaData: {
      },
      //项目跟进分析
      projectFllowMap:'',
      fllowMapParam: {
        "id": 20231019085304,
        "content": {
          "type": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "dataid": '',
          "enddate":`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
          "where":{
              "grade":""
          }
        }
      },
      fllowTableParam:{
        "id": 20231019090104,
        "content": {
          "type": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "dataid": '',
          "where": {
              "isfollowup": "", // 有跟进 无跟进 ------项目跟进情况统计列表使用该字段
          }
        }
      },
      projectFllowData:{
        map:[],
      },
      //项目联系人分析
      projectFllowMap:'',
      contactMapParam: {
        "id": 20231019085404,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "where":{
              "grade":""
          }
        }
      },
      contactTableParam:{
        "id": 20231019090104,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "where": {
              "iscontacts": "", //无联系人 有联系人  ------项目联系人情况统计列表使用该字段
          }
        }
      },
      projectContactData:{
        map:[],
      },
      //项目关联客户分析
      projectCustomerMap:'',
      customerMapParam: {
        "id": 20231019085504,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "where":{
              "iscustomers":""
          }
        }
      },
      customerTableParam:{
        "id": 20231019090104,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "where": {
              "iscustomers": "", //无关联客户 有关联客户  ------项目关联客户情况统计列表使用该字段
          }
        }
      },
      projectCustomerData:{
        map:[],
      },
      //项目评估分析
      projectScoreMap:'',
      scoreMapParam: {
        "id": 20231019085604,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "where":{
              "istask":""
          }
        }
      },
      scoreTableParam:{
        "id": 20231019090104,
        "content": {
          "type": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "dataid": '',
          "where": {
              "istask":"",// 有评估记录 无评估记录  ------ 项目评估情况统计列表使用该字段
          }
        }
      },
      projectScoreData:{
        map:[],
      },
      //未跟进情况
      customerUnfllowMap:'',
      unfllowMapParam: {
        "id": 20231019095804,
        "content": {
            "type": '',
            "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
            "dataid": '',
            "where": {
                "projecttype":""
            }
        }
      },
      unfllowTableParam:{
        "id": 20231019095904,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "where": {
              "projecttype":"",
              "dateType":""
          }
        }
      },
      customerUnfllowData:{
        map:[],
      },
      //项目周期分析
      dateParam: {
        "id": 20231023092304,
        "content": {
          "type": 1,
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "begnode":"",//开始节点
          "endnode":"",//结束节点
          "where": {
            "projecttype": "",//项目类型
            "grade":"",//项目等级
            "tradefield":"",//领域
            "sa_projectid":""//项目id
          }
        }
      },
      dateList:{}
    }
  },
  methods:{
    goDetail (data) {
      this.$router.push({
        path:'/projectChangeDetail',
        query:{
          id:data.sa_projectid,
        }
      })
      this.$store.dispatch('changeDetailDrawer',true)
    },
    //获取数据总览
    async getdataAll () {
      let res = await this.$api.requested({
        id:20231018110404,
        content:{}
      })
      this.dataAll = res.data
      console.log(this.dataAll,'数据总览');
    },
    async departmentrtment() {
      const res = await this.$api.requested(this.depmentParam)
      this.deplist = this.createMenu(res.data.dep)
      this.personnelList = res.data.hr
    },
    //12月跟进初始化
    async chart2Fun (init) {
      let res = await this.$api.requested(this.chartParam2)
      console.log(res.data,'近12月跟进');
      this.chartMapData = res.data
      if (init) {
        this.chartMap = new DualAxes(this.$refs.chart2, {
          data: [this.chartMapData.followup, this.chartMapData.tbzzl],
          xField: 'date',
          yField: ['value', 'value'],
          geometryOptions: [
            {
              geometry: 'line',
              seriesField:'key',
              color: '#5B8FF9',
            },
            {
              geometry: 'line',
              seriesField:'key',
              color: '#5AD8A6',
            },
          ],
        });

        this.chartMap.render();
      } else {
        this.chartMap.changeData([this.chartMapData.followup, this.chartMapData.tbzzl])
      }
    },
    //项目类型图初始化
    async typeInit (init) {
      let res = await this.$api.requested(this.typeMapParam)
      this.typeData.map = res.data
      console.log(this.typeData.map,'项目类型数据');
      if (init) {
        this.typeMap = new Pie(this.$refs.typeEl, {
          appendPadding: 10,
          data:this.typeData.map,
          angleField: 'qty',
          colorField: 'key',
          radius: 1,
          innerRadius: 0.64,
          meta: {
            value: {
              formatter: (v) => `${v} ¥`,
            },
          },
          label:{
            formatter: (datum) => `${datum.ratio}%`
          },
          statistic: {
            title: {
              offsetY: -4,
              customHtml: (container, view, datum) => {
                const { width, height } = container.getBoundingClientRect();
                const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
                const text = datum ? `${datum.key}` : '项目总数'
                return this.renderStatistic(d, text, { fontSize: 28 });
              },
            },
            content: {
              offsetY: 4,
              style: {
                fontSize: '24px',
              },
              customHtml: (container, view, datum, data) => {
                const { width } = container.getBoundingClientRect();
                const text = datum ? `${datum.ratio}%` : data[0] ? data[0].qty : 0;
                return this.renderStatistic(width, text, { fontSize: 32 });
              },
            },
          },
          legend: {
            position:'left'
          },
          // 添加 中心统计文本 交互
          interactions: [{ type: 'element-single-selected' },{ type: 'element-active' },{ type: 'pie-statistic-active' }],
        });
        this.typeMap.on('element:click',(v) => {
          if (v.data.data.value != this.typeTableParam.content.where.projecttype) {
            this.typeTableParam.content.where.projecttype = v.data.data.value
            this.$refs.typeTable.listData()
          } else {
            this.typeTableParam.content.where.projecttype = ''
            this.$refs.typeTable.listData()
          }
        })
        this.typeMap.render();
      } else {
        this.typeMap.changeData(this.typeData.map)
      }

    },
    //项目等级图初始化
    async gradInit (init) {
      let res = await this.$api.requested(this.gradMapParam)
      this.gradData.map = res.data
      console.log(this.gradData.map,'项目等级数据');
      if (init) {
        this.gradMap = new Pie(this.$refs.gradEl, {
          appendPadding: 10,
          data:this.gradData.map,
          angleField: 'qty',
          colorField: 'key',
          radius: 1,
          innerRadius: 0.64,
          label:{
            formatter: (datum) => `${datum.ratio}%`
          },
          statistic: {
            title: {
              offsetY: -4,
              customHtml: (container, view, datum) => {
                const { width, height } = container.getBoundingClientRect();
                const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
                const text = datum ? `${datum.key}` : '项目总数'
                return this.renderStatistic(d, text, { fontSize: 28 });
              },
            },
            content: {
              offsetY: 4,
              style: {
                fontSize: '24px',
              },
              customHtml: (container, view, datum, data) => {
                const { width } = container.getBoundingClientRect();
                const text = datum ? `${datum.ratio}%` : data[0] ? data[0].qty : 0;
                return this.renderStatistic(width, text, { fontSize: 32 });
              },
            },
          },
          legend: {
            position:'left'
          },
          // 添加 中心统计文本 交互
          interactions: [{ type: 'element-selected' },{ type: 'element-active' },{ type: 'pie-statistic-active' }],
        });
        this.gradMap.on('element:click',(v) => {
          if (v.data.data.key != this.gradTableParam.content.where.grade) {
            this.gradTableParam.content.where.grade = v.data.data.key
            this.$refs.gradTable.listData()
          } else {
            this.gradTableParam.content.where.grade = ''
            this.$refs.gradTable.listData()
          }
        })
        this.gradMap.render();
      } else {
        this.gradMap.changeData(this.gradData.map)
      }

    },
    //项目评估图初始化
    async scoreInit (init) {
      let res = await this.$api.requested(this.scoreMapParam1)
      this.scoreData.map = res.data
      console.log(this.scoreData.map,'项目评估数据');
      if (init) {
        this.scoreMap = new Bar(this.$refs.scoreEl, {
          data:this.scoreData.map,
          xField: 'value',
          yField: 'key',
          seriesField: 'key',
          minBarWidth: 20,
          maxBarWidth: 40,
          legend: {
            position: 'top-left',
          },
          interactions: [{ type: 'element-single-selected' }],
        });
        this.scoreMap.on('element:click',(v) => {
          if (v.data.data.key != this.scoreTableParam1.content.occupancyratio) {
            this.scoreStatus = v.data.data.key
            this.scoreTableParam1.content.occupancyratio = v.data.data.key
            this.$refs.scoreTable.listData()
          } else {
            this.scoreStatus = ''
            this.scoreTableParam1.content.occupancyratio = ''
            this.$refs.scoreTable.listData()
          }
        })
        this.scoreMap.render();
      } else {
        this.scoreMap.changeData(this.scoreData.map)
      }

    },
    //12月新增初始化
    async addFun (init) {
      let param = JSON.parse(JSON.stringify(this.addParam))
      if (param.content.dataid instanceof Array) {
        param.content.dataid = param.content.dataid[param.content.dataid.length - 1]
      }
      let res = await this.$api.requested(param)
      this.addData.arr1 = res.data.histogram
      res.data.lineChart.forEach(item => item[`同比增长率(%)`] = item.value)
      this.addData.arr2 = res.data.lineChart
      if (init) {
        this.addMap = new DualAxes(this.$refs.addEl, {
          data: [this.addData.arr1,this.addData.arr2],
          xField: 'date',
          yField: ['value', '同比增长率(%)'],
          geometryOptions: [
            {
              geometry: 'column',
              isGroup: true,
              seriesField: 'key',
            },
            {
              geometry: 'line',
              lineStyle: {
                lineWidth: 2,
              },
            },
          ],
        });
        this.addMap.render()
      } else {
        this.addMap.changeData([this.addData.arr1,this.addData.arr2])
      }
    },
    //12月报备初始化
    async baobeiFun (init) {
      let param = JSON.parse(JSON.stringify(this.baobeiParam))
      if (param.content.dataid instanceof Array) {
        param.content.dataid = param.content.dataid[param.content.dataid.length - 1]
      }
      let res = await this.$api.requested(param)
      this.baobeiData.arr1 = res.data.histogram
      res.data.lineChart.forEach(item => item[`同比增长率(%)`] = item.value)
      this.baobeiData.arr2 = res.data.lineChart
      if (init) {
        this.baobeiMap = new DualAxes(this.$refs.baobeiEl, {
          data: [this.baobeiData.arr1,this.baobeiData.arr2],
          xField: 'date',
          yField: ['value', '同比增长率(%)'],
          geometryOptions: [
            {
              geometry: 'column',
              isGroup: true,
              seriesField: 'key',
            },
            {
              geometry: 'line',
              lineStyle: {
                lineWidth: 2,
              },
            },
          ],
        });
        this.baobeiMap.render()
      } else {
        this.baobeiMap.changeData([this.baobeiData.arr1,this.baobeiData.arr2])
      }
    },
    //12月跟进初始化
    async fllowFun (init) {
      let param = JSON.parse(JSON.stringify(this.fllowParam))
      if (param.content.dataid instanceof Array) {
        param.content.dataid = param.content.dataid[param.content.dataid.length - 1]
      }
      let res = await this.$api.requested(param)
      this.fllowData = res.data
      this.fllowData.tbzzl.forEach(item => item.key = '同比增长率(%)')
      console.log(res.data,'跟进数据');
      if (init) {
        this.fllowMap = new DualAxes(this.$refs.fllowEl, {
          data: [this.fllowData.followup, this.fllowData.tbzzl],
          xField: 'date',
          yField: ['value', 'value'],
          geometryOptions: [
            {
              geometry: 'line',
              seriesField:'key',
              color: '#5B8FF9',
            },
            {
              geometry: 'line',
              seriesField:'key',
              color: '#5AD8A6',
            },
          ],
        })
        this.fllowMap.render()
      } else {
        this.fllowMap.changeData([this.fllowData.followup, this.fllowData.tbzzl])
      }
    },
    //12月报价初始化
    async baojiaFun (init) {
      let param = JSON.parse(JSON.stringify(this.baojiaParam))
      if (param.content.dataid instanceof Array) {
        param.content.dataid = param.content.dataid[param.content.dataid.length - 1]
      }
      let res = await this.$api.requested(param)
      this.baojiaData = res.data
      console.log(res.data,'报价数据');
      if (init) {
        this.baojiaMap = new Line(this.$refs.baojiaEl, {
          data:this.baojiaData,
          xField: 'date',
          yField: 'value',
          seriesField: 'key',
          xAxis: {
            type: 'time',
          },
          yAxis: {
            // label: {
            //   // 数值格式化为千分位
            //   formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
            // },
          },
        })
        this.baojiaMap.render()
      } else {
        this.baojiaMap.changeData(this.baojiaData)
      }
    },
    //项目跟进图初始化
    async fllowInit (init) {
      let res = await this.$api.requested(this.fllowMapParam)
      this.projectFllowData.map = res.data
      console.log(this.projectFllowData.map,'项目跟进数据');
      if (init) {
        this.projectFllowMap = new Pie(this.$refs.projectFllowEl, {
          appendPadding: 10,
          data:this.projectFllowData.map,
          angleField: 'value',
          colorField: 'key',
          radius: 1,
          innerRadius: 0.64,
          label:{
            formatter: (datum) => `${datum.ratio}%`
          },
          statistic: {
            title: {
              offsetY: -4,
              customHtml: (container, view, datum) => {
                const { width, height } = container.getBoundingClientRect();
                const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
                const text = datum ? `${datum.key}` : '项目总数'
                return this.renderStatistic(d, text, { fontSize: 28 });
              },
            },
            content: {
              offsetY: 4,
              style: {
                fontSize: '24px',
              },
              customHtml: (container, view, datum, data) => {
                const { width } = container.getBoundingClientRect();
                const text = datum ? `${datum.ratio}%` : data[0] ? data[0].totalqty : 0;
                return this.renderStatistic(width, text, { fontSize: 32 });
              },
            },
          },
          legend: {
            position:'left'
          },
          // 添加 中心统计文本 交互
          interactions: [{ type: 'element-selected' },{ type: 'element-active' },{ type: 'pie-statistic-active' }],
        });
        this.projectFllowMap.on('element:click',(v) => {
          if (v.data.data.value != this.fllowTableParam.content.where.isfollowup) {
            this.fllowTableParam.content.where.isfollowup = v.data.data.value
            this.$refs.projectFllowTable.listData()
          } else {
            this.fllowTableParam.content.where.isfollowup = ''
            this.$refs.projectFllowTable.listData()
          }
        })
        this.projectFllowMap.render();
      } else {
        this.projectFllowMap.changeData(this.projectFllowData.map)
      }

    },
    //项目联系人图初始化
    async contactInit (init) {
      let res = await this.$api.requested(this.contactMapParam)
      this.projectContactData.map = res.data
      console.log(this.projectContactData.map,'项目联系人数据');
      if (init) {
        this.projectContactMap = new Pie(this.$refs.projectContactEl, {
          appendPadding: 10,
          data:this.projectContactData.map,
          angleField: 'value',
          colorField: 'key',
          radius: 1,
          innerRadius: 0.64,
          label:{
            formatter: (datum) => `${datum.ratio}%`
          },
          statistic: {
            title: {
              offsetY: -4,
              customHtml: (container, view, datum) => {
                const { width, height } = container.getBoundingClientRect();
                const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
                const text = datum ? `${datum.key}` : '项目总数'
                return this.renderStatistic(d, text, { fontSize: 28 });
              },
            },
            content: {
              offsetY: 4,
              style: {
                fontSize: '24px',
              },
              customHtml: (container, view, datum, data) => {
                const { width } = container.getBoundingClientRect();
                const text = datum ? `${datum.ratio}%` : data[0] ? data[0].totalqty : 0;
                return this.renderStatistic(width, text, { fontSize: 32 });
              },
            },
          },
          legend: {
            position:'left'
          },
          // 添加 中心统计文本 交互
          interactions: [{ type: 'element-selected' },{ type: 'element-active' },{ type: 'pie-statistic-active' }],
        });
        this.projectContactMap.on('element:click',(v) => {
          if (v.data.data.key != this.contactTableParam.content.where.iscontacts) {
            this.contactTableParam.content.where.iscontacts = v.data.data.key
            this.$refs.projectContactTable.listData()
          } else {
            this.contactTableParam.content.where.iscontacts = ''
            this.$refs.projectContactTable.listData()
          }
        })
        this.projectContactMap.render();
      } else {
        this.projectContactMap.changeData(this.projectContactData.map)
      }

    },
    //项目关联客户图初始化
    async customerInit (init) {
      let res = await this.$api.requested(this.customerMapParam)
      this.projectCustomerData.map = res.data
      console.log(this.projectCustomerData.map,'项目关联客户数据');
      if (init) {
        this.projectCustomerMap = new Pie(this.$refs.projectCustomerEl, {
          appendPadding: 10,
          data:this.projectCustomerData.map,
          angleField: 'value',
          colorField: 'key',
          radius: 1,
          innerRadius: 0.64,
          label:{
            formatter: (datum) => `${datum.ratio}%`
          },
          statistic: {
            title: {
              offsetY: -4,
              customHtml: (container, view, datum) => {
                const { width, height } = container.getBoundingClientRect();
                const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
                const text = datum ? `${datum.key}` : '项目总数'
                return this.renderStatistic(d, text, { fontSize: 28 });
              },
            },
            content: {
              offsetY: 4,
              style: {
                fontSize: '24px',
              },
              customHtml: (container, view, datum, data) => {
                const { width } = container.getBoundingClientRect();
                const text = datum ? `${datum.ratio}%` : data[0] ? data[0].totalqty : 0;
                return this.renderStatistic(width, text, { fontSize: 32 });
              },
            },
          },
          legend: {
            position:'left'
          },
          // 添加 中心统计文本 交互
          interactions: [{ type: 'element-selected' },{ type: 'element-active' },{ type: 'pie-statistic-active' }],
        });
        this.projectCustomerMap.on('element:click',(v) => {
          if (v.data.data.key != this.customerTableParam.content.where.iscustomers) {
            this.customerTableParam.content.where.iscustomers = v.data.data.key
            this.$refs.projectCustomerTable.listData()
          } else {
            this.customerTableParam.content.where.iscustomers = ''
            this.$refs.projectCustomerTable.listData()
          }
        })
        this.projectCustomerMap.render();
      } else {
        this.projectCustomerMap.changeData(this.projectCustomerData.map)
      }

    },
    //项目评估图初始化
    async projectScoreInit (init) {
      let res = await this.$api.requested(this.scoreMapParam)
      this.projectScoreData.map = res.data
      console.log(this.projectScoreData.map,'项目评估数据');
      if (init) {
        this.projectScoreMap = new Pie(this.$refs.projectScoreEl, {
          appendPadding: 10,
          data:this.projectScoreData.map,
          angleField: 'value',
          colorField: 'key',
          radius: 1,
          innerRadius: 0.64,
          label:{
            formatter: (datum) => `${datum.ratio}%`
          },
          statistic: {
            title: {
              offsetY: -4,
              customHtml: (container, view, datum) => {
                const { width, height } = container.getBoundingClientRect();
                const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
                const text = datum ? `${datum.key}` : '项目总数'
                return this.renderStatistic(d, text, { fontSize: 28 });
              },
            },
            content: {
              offsetY: 4,
              style: {
                fontSize: '24px',
              },
              customHtml: (container, view, datum, data) => {
                const { width } = container.getBoundingClientRect();
                const text = datum ? `${datum.ratio}%` : data[0] ? data[0].totalqty : 0;
                return this.renderStatistic(width, text, { fontSize: 32 });
              },
            },
          },
          legend: {
            position:'left'
          },
          // 添加 中心统计文本 交互
          interactions: [{ type: 'element-highlight-by-x ' },{ type: 'element-active' },{ type: 'pie-statistic-active' }],
        });
        this.projectScoreMap.on('element:click',(v) => {
          if (v.data.data.key != this.scoreTableParam.content.where.istask) {
            this.scoreTableParam.content.where.istask = v.data.data.key
            this.$refs.projectScoreTable.listData()
          } else {
            this.scoreTableParam.content.where.istask = ''
            this.$refs.projectScoreTable.listData()
          }
        })
        this.projectScoreMap.render();
      } else {
        this.projectScoreMap.changeData(this.projectScoreData.map)
      }

    },
    async getDate (init) {
      if(init === true) this.dateParam.content.where.projecttype = this.projectType.length ? this.projectType[0].value : ''
      let param = JSON.parse(JSON.stringify(this.dateParam))
      if (param.content.dataid instanceof Array) {
        param.content.dataid = param.content.dataid[param.content.dataid.length - 1]
      }
      let res = await this.$api.requested(param)
      this.dateList = res.data
      console.log(this.dateList,'周期数据');
    },
    //项目未跟进情况图初始化
    async customerUnfllowInit (init) {
      let res = await this.$api.requested(this.unfllowMapParam)
      this.customerUnfllowData.map = res.data
      console.log(this.customerUnfllowData,'未跟进数据');
      if (init) {
        this.customerUnfllowMap = new Column(this.$refs.customerUnfllowEl, {
          data:this.customerUnfllowData.map,
          isGroup: true,
          xField: 'datetype',
          yField: 'value',
          seriesField: 'key',
          /** 设置颜色 */
          //color: ['#1ca9e6', '#f88c24'],
          /** 设置间距 */
          // marginRatio: 0.1,
          label: {
            // 可手动配置 label 数据标签位置
            position: 'middle', // 'top', 'middle', 'bottom'
            // 可配置附加的布局方法
            layout: [
              // 柱形图数据标签位置自动调整
              { type: 'interval-adjust-position' },
              // 数据标签防遮挡
              { type: 'interval-hide-overlap' },
              // 数据标签文颜色自动调整
              { type: 'adjust-color' },
            ],
          },
          interactions: [{ type: 'element-highlight-by-x' }],
        });
        this.customerUnfllowMap.on('element:click',(v) => {
          console.log(v);
          if (v.data.data.datetype == this.unfllowTableParam.content.where.dateType) {
            this.unfllowStatus = ''
            this.unfllowTableParam.content.where.dateType = ''
          } else {
            this.unfllowStatus = v.data.data.datetype
            this.unfllowTableParam.content.where.dateType = v.data.data.datetype
          }
          this.$refs.customerUnfllowTable.listData()
        })
        this.customerUnfllowMap.render()
      } else {
        this.customerUnfllowMap.changeData(this.customerUnfllowData.map)
      }

    },
    renderStatistic(containerWidth, text, style) {
      const textWidth = measureTextWidth(text, style);
      const textHeight = style.lineHeight || style.fontSize
      const R = containerWidth / 2;
      // r^2 = (w / 2)^2 + (h - offsetY)^2
      let scale = 1;
      if (containerWidth < textWidth) {
        scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1);
      }
      const textStyleStr = `width:${containerWidth}px;`;
      return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`;
    },
    createMenu (array) {
      var that = this
      let arr = []
      function convertToElementTree(node) {
        // 新节点
        if (node.subdep.length === 0){
          var elNode = {
            label: node["depname"],
            parentid:node['parentid'],
            parentname:node['parentname'],
            departmentid:node["departmentid"],
            value:node["departmentid"],
            remarks:node["remarks"],
            isused:node["isused"],
            changedate:node['changedate'],
            changeby:node['changeby'],
            createdate:node['createdate'],
            createby:node['createby'],
            depno:node['depno'],
            disabled:that.pageOnlyRead,
          }
        }else {
          var elNode = {
            label: node["depname"],
            parentid:node['parentid'],
            parentname:node['parentname'],
            departmentid:node["departmentid"],
            value:node["departmentid"],
            remarks:node["remarks"],
            isused:node["isused"],
            changedate:node['changedate'],
            changeby:node['changeby'],
            createdate:node['createdate'],
            createby:node['createby'],
            depno:node['depno'],
            disabled:that.pageOnlyRead,
            children: []
          }
        }
        if (node.subdep && node.subdep.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.subdep.length; index++) {
            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
            elNode.children.push(convertToElementTree(node.subdep[index]));
          }
        }
        return elNode;
      }
      array.forEach((element) => {
        arr.push(convertToElementTree(element))
      });
      return arr
    },
    selectDep (val) {
      let id = val[val.length - 1]
      if (val.length) {
        this.typeMapParam.content.dataid = id
        this.typeMapParam.content.type = 1
        this.typeInit()
        this.typeTableParam.content.dataid = id
        this.typeTableParam.content.type = 1
        this.typeTableParam.content.username = ''
        this.$refs.typeTable.listData()

        this.gradMapParam.content.dataid = id
        this.gradMapParam.content.type = 1
        this.gradInit()
        this.gradTableParam.content.dataid = id
        this.gradTableParam.content.type = 1
        this.gradTableParam.content.username = ''
        this.$refs.gradTable.listData()

        this.scoreMapParam1.content.dataid = id
        this.scoreMapParam1.content.type = 1
        this.scoreInit()
        this.scoreTableParam1.content.dataid = id
        this.scoreTableParam1.content.type = 1
        this.scoreTableParam1.content.username = ''
        this.$refs.scoreTable.listData()

        this.addParam.content.dataid = id
        this.addParam.content.type = 1
        this.addParam.content.username = ''
        this.addFun()

        this.baobeiParam.content.dataid = id
        this.baobeiParam.content.type = 1
        this.baobeiParam.content.username = ''
        this.baojiaFun()

        this.fllowParam.content.dataid = id
        this.fllowParam.content.type = 1
        this.fllowParam.content.username = ''
        this.fllowFun()

        this.baojiaParam.content.dataid = id
        this.baojiaParam.content.type = 1
        this.baojiaParam.content.username = ''
        this.baojiaFun()

        this.fllowMapParam.content.dataid = id
        this.fllowMapParam.content.type = 1
        this.fllowInit()
        this.fllowTableParam.content.dataid = id
        this.fllowTableParam.content.type = 1
        this.fllowTableParam.content.username = ''
        this.$refs.projectFllowTable.listData()

        this.contactMapParam.content.dataid = id
        this.contactMapParam.content.type = 1
        this.contactInit()
        this.contactTableParam.content.dataid = id
        this.contactTableParam.content.type = 1
        this.contactTableParam.content.username = ''
        this.$refs.projectContactTable.listData()

        this.customerMapParam.content.dataid = id
        this.customerMapParam.content.type = 1
        this.customerInit()
        this.customerTableParam.content.dataid = id
        this.customerTableParam.content.type = 1
        this.customerTableParam.content.username = ''
        this.$refs.projectCustomerTable.listData()

        this.scoreMapParam.content.dataid = id
        this.scoreMapParam.content.type = 1
        this.scoreInit()
        this.scoreTableParam.content.dataid = id
        this.scoreTableParam.content.type = 1
        this.scoreTableParam.content.username = ''
        this.$refs.projectScoreTable.listData()

        this.unfllowMapParam.content.dataid = id
        this.unfllowMapParam.content.type = 1
        this.customerUnfllowInit()
        this.unfllowTableParam.content.dataid = id
        this.unfllowTableParam.content.type = 1
        this.unfllowTableParam.content.username = ''
        this.$refs.customerUnfllowTable.listData()

        this.dateParam.content.dataid = id
        this.getDate()

      } else {
        let name = JSON.parse(sessionStorage.getItem('accountinfo')).name
        this.typeMapParam.content.dataid = ''
        this.typeMapParam.content.type = ''
        this.typeInit()
        this.typeTableParam.content.dataid = ''
        this.typeTableParam.content.type = ''
        this.typeTableParam.content.username = name
        this.$refs.typeTable.listData()

        this.gradMapParam.content.dataid = ''
        this.gradMapParam.content.type = ''
        this.gradInit()
        this.gradTableParam.content.dataid = ''
        this.gradTableParam.content.type = ''
        this.gradTableParam.content.username = name
        this.$refs.gradTable.listData()

        this.scoreMapParam1.content.dataid = ''
        this.scoreMapParam1.content.type = ''
        this.scoreInit()
        this.scoreTableParam1.content.dataid = ''
        this.scoreTableParam1.content.type = ''
        this.scoreTableParam1.content.username = name
        this.$refs.scoreTable.listData()

        this.addParam.content.dataid = ''
        this.addParam.content.type = ''
        this.addParam.content.username = name
        this.addFun()

        this.baobeiParam.content.dataid = ''
        this.baobeiParam.content.type = ''
        this.baobeiParam.content.username = name
        this.baojiaFun()

        this.fllowParam.content.dataid = ''
        this.fllowParam.content.type = ''
        this.fllowParam.content.username = name
        this.fllowFun()

        this.baojiaParam.content.dataid = ''
        this.baojiaParam.content.type = ''
        this.baojiaParam.content.username = name
        this.baojiaFun()

        this.fllowMapParam.content.dataid = ''
        this.fllowMapParam.content.type = ''
        this.fllowInit()
        this.fllowTableParam.content.dataid = ''
        this.fllowTableParam.content.type = ''
        this.fllowTableParam.content.username = name
        this.$refs.projectFllowTable.listData()

        this.contactMapParam.content.dataid = ''
        this.contactMapParam.content.type = ''
        this.contactInit()
        this.contactTableParam.content.dataid = ''
        this.contactTableParam.content.type = ''
        this.contactTableParam.content.username = name
        this.$refs.projectContactTable.listData()

        this.customerMapParam.content.dataid = ''
        this.customerMapParam.content.type = ''
        this.customerInit()
        this.customerTableParam.content.dataid = ''
        this.customerTableParam.content.type = ''
        this.customerTableParam.content.username = name
        this.$refs.projectCustomerTable.listData()

        this.scoreMapParam.content.dataid = ''
        this.scoreMapParam.content.type = ''
        this.scoreInit()
        this.scoreTableParam.content.dataid = ''
        this.scoreTableParam.content.type = ''
        this.scoreTableParam.content.username = name
        this.$refs.projectScoreTable.listData()

        this.unfllowMapParam.content.dataid = ''
        this.unfllowMapParam.content.type = ''
        this.customerUnfllowInit()
        this.unfllowTableParam.content.dataid = ''
        this.unfllowTableParam.content.type = ''
        this.unfllowTableParam.content.username = name
        this.$refs.customerUnfllowTable.listData()

        this.dateParam.content.dataid = ''
        this.getDate()
      }
    },
    selectRow (data) {
      this.projectname = data.projectname
      this.dateParam.content.where.sa_projectid = data.sa_projectid
      this.dateParam.content.type = ''
      this.dateParam.content.dataid = ''
      this.dateParam.content.where.projecttype = ''
      this.dateParam.content.where.grade = ''
      this.dateParam.content.where.tradefield = ''
      this.getDate()
    },
    clearSelect () {
      this.projectname=''
      this.dateParam.content.where.sa_projectid=''
      this.dateParam.content.where.projecttype = this.projectType.length ? this.projectType[0].value : ''
      this.getDate()
    },
    handleUnfllowParam (param) {
      console.log('触发',param,this.projectType);
      param.content.where.projecttype = this.projectType.length ? this.projectType[0].value : ''
      this.unfllowMapParam.content.where.projecttype = this.projectType.length ? this.projectType[0].value : ''
    }
  },
  async mounted () {
    this.departmentrtment()
    this.getdataAll()
    this.typeInit(true)
    this.gradInit(true)
    this.scoreInit(true)
    this.addFun(true)
    this.baobeiFun(true)
    this.fllowFun(true)
    this.baojiaFun(true)
    this.fllowInit(true)
    this.contactInit(true)
    this.projectScoreInit(true)
    this.customerInit(true)
    this.customerUnfllowInit(true)
    let baseWidth = 1920
    document.querySelector('html').style.fontSize = `${100 / baseWidth}vw`


    /* 获取项目类型 */
    let res = await this.$store.dispatch('optiontypeselect','projecttype')
    this.projectType = res.data
    this.getDate(true)
    /* 获取项目等级 */
    let res2 = await this.$store.dispatch('optiontypeselect','projectgrade')
    this.projectLead = res2.data
    let res3 = await this.$store.dispatch('optiontypeselect','tradefield')
    this.tradefieldSelect = res3.data
  }
}

</script>
<style>
.basic__layout__panel {
  height: 100% !important;
}
</style>
<style scoped>

*{
  box-sizing: border-box;
}
.data-all {
  padding: 24rem 20rem;
  width: 100%;
  border-radius: 5rem;
  border: 1rem;
  box-shadow: 0rem 2rem 5rem 0rem rgba(0, 0, 0, 0.15);
  margin-top: 10rem;
}
.data-all .data-left {
  border-right: 1rem solid rgb(136,136,146);
  display: flex;
  flex-wrap: wrap;
}
.data-all .data-right {
  padding-left: 100rem;
  display: flex;
  flex-wrap: wrap;
}
.data-all .data-left,.data-right {
  display: flex;
}
.data-all .data-item {
  width: 186rem;
  margin-bottom: 20px;
}
.data-all .data-item p:nth-child(1) {
  font-size: 26px;
  font-weight: 5px;
  font-family: 'ArialMT', 'Arial', sans-serif;
  color: rgba(0, 0, 0, 0.85);
}
.data-all .data-item p:nth-child(2) {
  font-size: 14px;
  font-weight: 5px;
  font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
  color: rgba(0, 0, 0, 0.65)
}
.data-all .data-all-wrapper {
  display: flex;
}
.data-panel {
  margin-top: 40px;
}
.data-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.title {
  min-width: 220px;
}
.title::before {
  content:'';
  border-left: 4px #3874f6 solid;
  padding-right: 10px;
}
.panel-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:#ffffff;
}
.panel-content div:first-child {
  padding: 0 5px;
}
.progress {
  display: flex;
  width: 100%;
  padding: 40rem 100rem;
  height: 50rem;
  margin-bottom: 60rem;
}
.progress::after {
  content:'';
  display: block;
  clear:both;
}
.progress .progress-item {
  flex:var(--width);
  min-width: 150rem;
  height: 50rem;
  position: relative;
  background:var(--bg);
}
.progress .progress-item .day {
  position: absolute;
  top: -40rem;
  left: 50%;
  font-size: 14rem;
  transform: translateX(-50%);
  white-space: nowrap;
}
.progress .progress-item .start {
  position: absolute;
  left: 0;
  bottom:-50rem;
  transform: translateX(-50%);
}
.progress .progress-item .end {
  position: absolute;
  right:0;
  bottom:-50rem;
  transform: translateX(50%);
}
.progress .progress-item .start,.end {
  display: flex;
  flex-direction: column;
}
.progress .progress-item .start,.end span {
  text-align: center;
}
.progress .progress-item .start span:first-child,.end span:first-child {
  font-size: 14rem;
}
.progress .progress-item .start span:last-child,.end span:last-child {
  margin-top: 10rem;
  color: #aaaaaa;
  font-size: 12rem;
}
.search__label {
  margin-right: 5px !important;
}
.mt-10 {
  margin-right: 16px !important;
}
.el-empty {
  padding: 0 !important;
}
</style>