yos_web/src/HDrpManagement/customerData/index.vue

<template>
  <normalLayout style="background: #f8f8f8;">
    <template #refresh>
      <div style="margin-right:15px">
        <el-button style="font-size:14px !important;color: #3874f6" type="text" size="small" @click="$refs.scroll.wrap.scrollTop=0">{{$t(`返回顶部`)}}</el-button>
      </div>
      <!-- <i class="el-icon-refresh-right" @click="refresh" v-loading.fullscreen.lock="fullscreenLoading"></i> -->
    </template>
    <template #content>
      <div style="padding: 16px;">
        <el-scrollbar ref="scroll">
          <div style="height:calc(100vh - 230px);padding:5rem">
            <div style="display: flex;justify-content: space-between">
              <div>
                <div class=" inline-16">
                  <label  class="search__label" >{{$t('部门')}}:</label>
                  <el-cascader
                      ref="selectdep"
                      size="small"
                      placement="bottom"
                      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="inline-16">
                  <label  class="search__label" >{{$t('业务员')}}:</label>
                  <el-select v-model="person" filterable :placeholder="$t('请选择')" size="small" clearable @change="selectPerson">
                    <el-option
                        v-for="item in personnelList"
                        :key="item.index"
                        :label="$t(item.name)"
                        :value="item.userid">
                    </el-option>
                  </el-select>
                </div>
                <div class="inline-16">
                  <p class="search__label">{{$t('状态')}}:</p>
                  <el-select v-model="isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="leaveChange" >
                    <el-option :label="$t('在职')" value="1"></el-option>
                    <el-option :label="$t('离职')" value="2"></el-option>
                  </el-select>
                </div>
              </div>
              <div>
                <btnSelect :btn-title="['全部','本年','本季','本月','上月','去年']" :date-type="dateType" @btnClick="btnClick"></btnSelect>
              </div>
            </div>
            <div class="data-all">
              <div style="margin-bottom:20px">{{$t(`客户数据概况`)}}</div>
              <div class="data-all-wrapper">
                <div class="data-left">
                  <div class="data-item div-hover-click"  @click="onClick('客户总数')">
                    <p>{{ tool.formatAmount(dataAll.total)|| 0 }}</p>
                    <p>
                      {{$t(`客户总数`)}}
                      <el-tooltip class="item" effect="dark" :content="$t(`客户总数：包含我的客户、公海客户数量`)" placement="top">
                        <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
                      </el-tooltip>
                    </p>
                  </div>
                  <div class="data-item div-hover-click" @click="onClick('公海客户数')">
                    <p>{{ tool.formatAmount(dataAll.customerpoolqty)}}</p>
                    <p>
                      {{$t(`公海客户数`)}}
                    </p>
                  </div>
                  <div class="data-item div-hover-click" @click="onClick('成交客户数')">
                    <p>{{ tool.formatAmount(dataAll.tradedCustomers)}}</p>
                    <p>
                      {{$t(`成交客户数`)}}
                      <el-tooltip class="item div-click" effect="dark" :content="$t(`成交客户：已成交、多次成交状态的客户数量`)" placement="top">
                        <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
                      </el-tooltip>
                    </p>
                  </div>
                  <div class="data-item div-hover-click" @click="onClick('参与项目客户数')">
                    <p>{{ tool.formatAmount(dataAll.participateProject) }}</p>
                    <p>
                      {{$t(`参与项目客户数`)}}
                      <el-tooltip class="item" effect="dark" :content="$t(`参与项目客户数：参与有下订单的项目的关联客户数`)" 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 div-hover-click" v-for="item in dataAll.data" :key="item.rowindex" @click="onClick(item.value)">
                    <p>{{ tool.formatAmount(item.qty) }}</p>
                    <p>
                      {{ $t(item.value)}}
                      <el-tooltip class="item" effect="dark" :content="$t(`统计没有客户分类信息的客户数量`)" 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="$t(`客户分类为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="$t(`客户分类为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="$t(`客户分类为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="$t(`客户分类为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>
            <!--12月客户新增-->
            <div class="data-panel" id="customerAdd">
              <div class="panel-content-wrapper" >
                <div class="panel-header">
                  <div class="title">{{$t(`近12月客户新增分析`)}}</div>
                  <div class="panel-select">
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('部门')}}:</label>
                      <el-cascader
                        :append-to-body="false"
                        placement="bottom"
                        ref="selectdep"
                        size="small"
                        v-model="chartParam1.content.dataid"
                        :options="deplist"
                        :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"
                        @change="$event => {if($event.length) {chartParam1.content.type=1;chartParam1.content.username='';chart1Fun()} else {chartParam1.content.dataid='';chartParam1.content.type='';chartParam1.content.username='';chart1Fun()}}"></el-cascader>
                    </div>
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('业务员')}}:</label>
                      <el-select v-model="chartParam1.content.username" filterable :placeholder="$t('请选择')" size="small"
                        :popper-append-to-body="false"
                        @change="$event => {if($event) {chartParam1.content.type=0;chartParam1.content.dataid=$event;chartParam1.content.depname='';chart1Fun()} else {chartParam1.content.dataid='';chartParam1.content.type='';chartParam1.content.depname='';chart1Fun()}}"
                        >
                        <el-option
                            v-for="item in chartParam1Salesman"
                            :key="item.index"
                            :label="$t(item.name)"
                            :value="item.userid">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <p class="search__label">{{$t('状态')}}:</p>
                      <el-select v-model="chartParam1.content.where.isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="chart1Fun(null,'状态')" >
                        <el-option :label="$t('在职')" value="1"></el-option>
                        <el-option :label="$t('离职')" value="2"></el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-15">
                      <label  class="search__label" >{{$t('分析日期')}}:</label>
                      <el-date-picker
                          :append-to-body="false"
                          v-model="chartParam1.content.enddate"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          type="date"
                          size="small"
                          :placeholder="$t(`选择日期`)"
                          @change="chart1Fun()">
                      </el-date-picker>
                    </div>
                    <div style="display: inline-block;vertical-align: middle" >
                      <FullScroll domId="customerAdd"></FullScroll>
                    </div>
                  </div>
                </div>
                <div ref="chart1" :style="windowWidth<1574?'height:calc(100% - 100px)':windowWidth<1593?'height:calc(100% - 90px)':'height:calc(100% - 55px)'"></div>
              </div>
            </div>
            <!--客户类型-->
            <div class="data-panel" id="customerType">
              <div class="panel-content-wrapper" >
                <div class="panel-header">
                  <div class="title">{{$t(`客户类型情况统计`)}}</div>
                  <div class="panel-select">
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('部门')}}:</label>
                      <el-cascader
                        :append-to-body="false"
                        placement="bottom"
                        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='';typeTableParam.content.pageNumber=1;$refs.customerTypeTable.listData();customerTypeInit()} else {typeMapParam.content.type='';typeMapParam.content.dataid='';typeTableParam.content.dataid='';typeTableParam.content.type='';typeTableParam.content.username='';typeTableParam.content.pageNumber=1;$refs.customerTypeTable.listData();customerTypeInit()}}"></el-cascader>
                    </div>
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('业务员')}}:</label>
                      <el-select v-model="typeTableParam.content.username" filterable :placeholder="$t('请选择')" size="small"
                      :popper-append-to-body="false"
                      @change="$event => {if($event) {typeMapParam.content.type=0;typeMapParam.content.dataid=$event;typeTableParam.content.type=0;typeTableParam.content.dataid=$event;typeTableParam.content.depname='';typeTableParam.content.pageNumber=1;$refs.customerTypeTable.listData();customerTypeInit()} else {typeMapParam.content.type='';typeMapParam.content.dataid='';typeTableParam.content.dataid='';typeTableParam.content.type='';typeTableParam.content.depname='';typeTableParam.content.pageNumber=1;$refs.customerTypeTable.listData();customerTypeInit()}}"
                      >
                        <el-option
                            v-for="item in typeMapParamSalesman"
                            :key="item.index"
                            :label="$t(item.name)"
                            :value="item.userid">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <p class="search__label">{{$t('状态')}}:</p>
                      <el-select v-model="typeTableParam.content.where.isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="typeMapParam.content.where.isleave = typeTableParam.content.where.isleave;typeTableParam.content.username = '';typeTableParam.content.pageNumber=1;$refs.customerTypeTable.listData(null,'状态');customerTypeInit(null,'状态')" >
                        <el-option :label="$t('在职')" value="1"></el-option>
                        <el-option :label="$t('离职')" value="2"></el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <el-button-group>
                        <el-button :type="typeTableParam.content.dateType === '全部'?'primary':''" size="small" @click="typeMapParam.content.dateType = '全部';typeTableParam.content.dateType = '全部';
                          typeMapParam.content.where.begdate = '';typeMapParam.content.where.enddate = '';typeTableParam.content.where.begdate = '';typeTableParam.content.where.enddate = '';typeDate = []
                          typeTableParam.content.pageNumber = 1;$refs.customerTypeTable.listData();customerTypeInit()">{{$t(`全部`)}}</el-button>
                        <el-button :type="typeTableParam.content.dateType === '本年'?'primary':''" size="small" @click="typeMapParam.content.dateType = '本年';typeTableParam.content.dateType = '本年';
                          typeDate = [new Date().getFullYear() + '-01',new Date().getFullYear() + '-12'];typeMapParam.content.where.begdate = new Date().getFullYear() + '-01';typeMapParam.content.where.enddate = new Date().getFullYear() + '-12';
                          typeTableParam.content.where.begdate = new Date().getFullYear() + '-01';typeTableParam.content.where.enddate = new Date().getFullYear() + '-12';
                          typeTableParam.content.pageNumber = 1;$refs.customerTypeTable.listData();customerTypeInit()">{{$t(`本年`)}}</el-button>
                      </el-button-group>
                    </div>
                    <div class="mt-10 inline-16">
                      <el-date-picker
                          v-show="isFull"
                          :append-to-body="false"
                          v-model="typeDate"
                          :clearable="false"
                          @change="typeMapParam.content.dateType = '';typeMapParam.content.where.begdate = typeDate[0];typeMapParam.content.where.enddate = typeDate[1];typeTableParam.content.dateType = '';typeTableParam.content.where.begdate = typeDate[0];typeTableParam.content.where.enddate = typeDate[1];
                          typeTableParam.content.pageNumber = 1;$refs.customerTypeTable.listData();customerTypeInit()"
                          size="small"
                          format="yyyy-MM"
                          value-format="yyyy-MM"
                          type="monthrange"
                          :range-separator="$t('至')"
                          :start-placeholder="$t('开始月份')"
                          :end-placeholder="$t('结束月份')">
                      </el-date-picker>
                      <el-date-picker
                          v-show="!isFull"
                          v-model="typeDate"
                          :clearable="false"
                          @change="typeMapParam.content.dateType = '';typeMapParam.content.where.begdate = typeDate[0];typeMapParam.content.where.enddate = typeDate[1];typeTableParam.content.dateType = '';typeTableParam.content.where.begdate = typeDate[0];typeTableParam.content.where.enddate = typeDate[1];
                          typeTableParam.content.pageNumber = 1;$refs.customerTypeTable.listData();customerTypeInit()"
                          size="small"
                          format="yyyy-MM"
                          value-format="yyyy-MM"
                          type="monthrange"
                          :range-separator="$t('至')"
                          :start-placeholder="$t('开始月份')"
                          :end-placeholder="$t('结束月份')">
                      </el-date-picker>
                    </div>
                    <div class="mt-10 inline-15">
                      <exportFile :param="typeTableParam" :columns="tool.tabelCol($route.name).typeTable.tablecols" fileName="客户类型情况统计" :dataid="typeMapParam.content.dataid"></exportFile>
                    </div>
                    <div style="display: inline-block;vertical-align: middle">
                      <FullScroll domId="customerType" @onFull="onFull" @backFull="backFull"></FullScroll>
                    </div>
                  </div>
                </div>
                <div class="panel-content" :style="windowWidth<1335?'height:calc(100% - 140px)':windowWidth<2006?'height:calc(100% - 93px)':windowWidth<2037?'height:calc(100% - 83px)':'height:calc(100% - 53px)'">
                  <div ref="customerTypeEl" :style="windowWidth<1505?'width:54%;height:calc(100%)':windowWidth<1805?'width:54%;height:calc(100%)':windowWidth<2500?'width:45%':'width:30%'"></div>
                  <div class="panel-table" :style="windowWidth<1505?'width:46%;height:calc(100%)':windowWidth<1805?'width:46%;height:calc(100%)':windowWidth<2500?'width:55%':'width:70%'">
                    <pageTable
                      ref="customerTypeTable"
                      :tablecols="tool.tabelCol($route.name).typeTable.tablecols"
                      :param="typeTableParam"
                      setName="typeTable"
                      :custom="true"
                      @detailSet="detailSet"
                    >
                      <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" style="margin-right: 5px">{{ $t(item) }}</el-tag>
                        </div>
                        <div v-else-if="scope.data.columnname == 'operation'">
<!--                          <el-button type="text" size="small" @click="goDetail(scope.data.data,'customerTypeTable',typeTableParam,'sa_customersid')" :disabled="isFull">{{$t('详情')}}</el-button>-->
                          <drawerTemp class="inline-16" v-if="detailPath" :data="scope.data.data" :detailPath="detailPath" :idName="idName"  :disabled="isFull"
                                      :listqueryid="detailDataSet.typeTable.listqueryid" :total="detailDataSet.typeTable.total" :overview="true"></drawerTemp>
                        </div>
                        <div v-else-if="scope.data.columnname === 'industry'">
                          <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index" style="margin-right: 5px">{{ $t(item) }}</el-tag>
                        </div>
                        <div v-else-if="scope.data.columnname === 'tradingstatus'">
                          <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                        </div>
                        <div v-else-if="scope.data.columnname === 'status'">
                          <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '潜在'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '合作中'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已终止'">{{$t(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>
                          {{ $t(scope.data.data[scope.data.columnname]) }}
                        </div>
                      </template>
                    </pageTable>
                  </div>
                </div>
              </div>
            </div>
            <!--客户等级-->
<!--            <div class="data-panel" id="customerGrad">-->
<!--              <div class="panel-content-wrapper" >-->
<!--                <div class="panel-header">-->
<!--                  <div class="title">{{$t(`客户等级情况统计`)}}</div>-->
<!--                  <div class="panel-select">-->
<!--                    <div class="mt-10 inline-16">-->
<!--                      <label  class="search__label" >{{$t('部门')}}:</label>-->
<!--                      <el-cascader-->
<!--                        :append-to-body="false"-->
<!--                        placement="bottom"-->
<!--                        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='';gradTableParam.content.pageNumber = 1;$refs.customerGradTable.listData();customerGradInit()} else {gradMapParam.content.type='';gradMapParam.content.dataid='';gradTableParam.content.dataid='';gradTableParam.content.type='';gradTableParam.content.username='';gradTableParam.content.pageNumber = 1;$refs.customerGradTable.listData();customerGradInit()}}"></el-cascader>-->
<!--                    </div>-->
<!--                    <div class="mt-10 inline-16">-->
<!--                      <label  class="search__label" >{{$t('业务员')}}:</label>-->
<!--                      <el-select v-model="gradTableParam.content.username" filterable :placeholder="$t('请选择')" size="small"-->
<!--                      :popper-append-to-body="false"-->
<!--                      @change="$event => {if($event) {gradMapParam.content.type=0;gradMapParam.content.dataid=$event;gradTableParam.content.type=0;gradTableParam.content.dataid=$event;gradTableParam.content.depname='';gradTableParam.content.pageNumber = 1;$refs.customerGradTable.listData();customerGradInit()} else {gradMapParam.content.type='';gradMapParam.content.dataid='';gradTableParam.content.dataid='';gradTableParam.content.type='';gradTableParam.content.depname='';gradTableParam.content.pageNumber = 1;$refs.customerGradTable.listData();customerGradInit()}}"-->
<!--                      >-->
<!--                        <el-option-->
<!--                            v-for="item in gradMapParamSalesman"-->
<!--                            :key="item.index"-->
<!--                            :label="$t(item.name)"-->
<!--                            :value="item.userid">-->
<!--                        </el-option>-->
<!--                      </el-select>-->
<!--                    </div>-->
<!--                    <div class="mt-10 inline-16">-->
<!--                      <p class="search__label">{{$t('状态')}}:</p>-->
<!--                      <el-select v-model="gradTableParam.content.where.isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="gradMapParam.content.where.isleave = gradTableParam.content.where.isleave;gradTableParam.content.username = '';gradTableParam.content.pageNumber = 1;$refs.customerGradTable.listData(null,'状态');customerGradInit(null,'状态')" >-->
<!--                        <el-option :label="$t('在职')" value="1"></el-option>-->
<!--                        <el-option :label="$t('离职')" value="2"></el-option>-->
<!--                      </el-select>-->
<!--                    </div>-->
<!--                    <div class="mt-10 inline-16">-->
<!--                      <el-button-group>-->
<!--                        <el-button :type="gradTableParam.content.dateType === '全部'?'primary':''" size="small" @click="gradMapParam.content.dateType = '全部';gradTableParam.content.dateType = '全部';-->
<!--                          gradMapParam.content.where.begdate = '';gradMapParam.content.where.enddate = '';gradTableParam.content.where.begdate = '';gradTableParam.content.where.enddate = '';gradDate = []-->
<!--                          gradTableParam.content.pageNumber = 1;$refs.customerGradTable.listData();customerGradInit()">{{$t(`全部`)}}</el-button>-->
<!--                        <el-button :type="gradTableParam.content.dateType === '本年'?'primary':''" size="small" @click="gradMapParam.content.dateType = '本年';gradTableParam.content.dateType = '本年';-->
<!--                          gradDate = [new Date().getFullYear() + '-01',new Date().getFullYear() + '-12'];gradMapParam.content.where.begdate = new Date().getFullYear() + '-01';gradMapParam.content.where.enddate = new Date().getFullYear() + '-12';-->
<!--                          gradTableParam.content.where.begdate = new Date().getFullYear() + '-01';gradTableParam.content.where.enddate = new Date().getFullYear() + '-12';-->
<!--                          gradTableParam.content.pageNumber = 1;$refs.customerGradTable.listData();customerGradInit()">{{$t(`本年`)}}</el-button>-->
<!--                      </el-button-group>-->
<!--                    </div>-->
<!--                    <div class="mt-10 inline-16">-->
<!--                      <el-date-picker-->
<!--                          v-show="isFull"-->
<!--                          :append-to-body="false"-->
<!--                          v-model="gradDate"-->
<!--                          :clearable="false"-->
<!--                          @change="gradMapParam.content.dateType = '';gradMapParam.content.where.begdate = gradDate[0];gradMapParam.content.where.enddate = gradDate[1];gradTableParam.content.dateType = '';gradTableParam.content.where.begdate = gradDate[0];gradTableParam.content.where.enddate = gradDate[1];-->
<!--                          gradTableParam.content.pageNumber = 1;$refs.customerGradTable.listData();customerGradInit()"-->
<!--                          size="small"-->
<!--                          format="yyyy-MM"-->
<!--                          value-format="yyyy-MM"-->
<!--                          type="monthrange"-->
<!--                          :range-separator="$t('至')"-->
<!--                          :start-placeholder="$t('开始月份')"-->
<!--                          :end-placeholder="$t('结束月份')">-->
<!--                      </el-date-picker>-->
<!--                      <el-date-picker-->
<!--                          v-show="!isFull"-->
<!--                          v-model="gradDate"-->
<!--                          :clearable="false"-->
<!--                          @change="gradMapParam.content.dateType = '';gradMapParam.content.where.begdate = gradDate[0];gradMapParam.content.where.enddate = gradDate[1];gradTableParam.content.dateType = '';gradTableParam.content.where.begdate = gradDate[0];gradTableParam.content.where.enddate = gradDate[1];-->
<!--                          gradTableParam.content.pageNumber = 1;$refs.customerGradTable.listData();customerGradInit()"-->
<!--                          size="small"-->
<!--                          format="yyyy-MM"-->
<!--                          value-format="yyyy-MM"-->
<!--                          type="monthrange"-->
<!--                          :range-separator="$t('至')"-->
<!--                          :start-placeholder="$t('开始月份')"-->
<!--                          :end-placeholder="$t('结束月份')">-->
<!--                      </el-date-picker>-->
<!--                    </div>-->
<!--                    <div class="mt-10 inline-15">-->
<!--                      <exportFile  :param="gradTableParam" :columns="tool.tabelCol($route.name).typeTable.tablecols" fileName="客户等级情况统计" :dataid="gradMapParam.content.dataid"></exportFile>-->
<!--                    </div>-->
<!--                    <div style="display: inline-block;vertical-align: middle">-->
<!--                      <FullScroll domId="customerGrad" @onFull="onFull" @backFull="backFull"></FullScroll>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="panel-content" :style="windowWidth<1335?'height:calc(100% - 140px)':windowWidth<2006?'height:calc(100% - 93px)':windowWidth<2037?'height:calc(100% - 83px)':'height:calc(100% - 53px)'">-->
<!--                  <div ref="customerGradEl" :style="windowWidth<1505?'width:54%;height:calc(100%)':windowWidth<1805?'width:54%;height:calc(100%)':windowWidth<2500?'width:45%':'width:30%'"></div>-->
<!--                  <div class="panel-table" :style="windowWidth<1505?'width:46%;height:calc(100%)':windowWidth<1805?'width:46%;height:calc(100%)':windowWidth<2500?'width:55%':'width:70%'">-->
<!--                    <pageTable-->
<!--                      ref="customerGradTable"-->
<!--                      :tablecols="tool.tabelCol($route.name).typeTable.tablecols"-->
<!--                      :param="gradTableParam"-->
<!--                      setName="gradTable"-->
<!--                      :custom="true"-->
<!--                      @detailSet="detailSet"-->
<!--                    >-->
<!--                      <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" style="margin-right: 5px">{{ $t(item) }}</el-tag>-->
<!--                        </div>-->
<!--                        <div v-else-if="scope.data.columnname == 'operation'">-->
<!--&lt;!&ndash;                          <el-button type="text" size="small" @click="goDetail(scope.data.data,'customerGradTable',gradTableParam,'sa_customersid')" :disabled="isFull">{{$t('详情')}}</el-button>&ndash;&gt;-->
<!--                          <drawerTemp class="inline-16" v-if="detailPath" :data="scope.data.data" :detailPath="detailPath" :idName="idName"  :disabled="isFull"-->
<!--                                      :listqueryid="detailDataSet.gradTable.listqueryid" :total="detailDataSet.gradTable.total" :overview="true"></drawerTemp>-->
<!--                        </div>-->
<!--                        <div v-else-if="scope.data.columnname === 'industry'">-->
<!--                          <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index" style="margin-right: 5px">{{ $t(item) }}</el-tag>-->
<!--                        </div>-->
<!--                        <div v-else-if="scope.data.columnname === 'tradingstatus'">-->
<!--                          <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>-->
<!--                          <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>-->
<!--                          <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>-->
<!--                        </div>-->
<!--                        <div v-else-if="scope.data.columnname === 'status'">-->
<!--                          <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '潜在'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>-->
<!--                          <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '合作中'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>-->
<!--                          <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已终止'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>-->
<!--                        </div>-->
<!--                        <div v-else>-->
<!--                          {{ $t(scope.data.data[scope.data.columnname]) }}-->
<!--                        </div>-->
<!--                      </template>-->
<!--                    </pageTable>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
            <!--客户联系人-->
            <div class="data-panel" id="customerContact">
              <div class="panel-content-wrapper" >
                <div class="panel-header">
                  <div class="title">{{$t(`客户联系人情况统计`)}}</div>
                  <div class="panel-select">
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('部门')}}:</label>
                      <el-cascader
                        :append-to-body="false"
                        placement="bottom"
                        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='';contactTableParam.content.pageNumber = 1;$refs.customerContactTable.listData();customerContactInit()} else {contactMapParam.content.type='';contactMapParam.content.dataid='';contactTableParam.content.dataid='';contactTableParam.content.type='';contactTableParam.content.username='';contactTableParam.content.pageNumber = 1;$refs.customerContactTable.listData();customerContactInit()}}"></el-cascader>
                    </div>
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('业务员')}}:</label>
                      <el-select v-model="contactTableParam.content.username" filterable :placeholder="$t('请选择')" size="small"
                      :popper-append-to-body="false"
                      @change="$event => {if($event) {contactMapParam.content.type=0;contactMapParam.content.dataid=$event;contactTableParam.content.type=0;contactTableParam.content.dataid=$event;contactTableParam.content.depname='';contactTableParam.content.pageNumber = 1;$refs.customerContactTable.listData();customerContactInit()} else {contactMapParam.content.type='';contactMapParam.content.dataid='';contactTableParam.content.dataid='';contactTableParam.content.type='';contactTableParam.content.depname='';contactTableParam.content.pageNumber = 1;$refs.customerContactTable.listData();customerContactInit()}}"
                      >
                        <el-option
                            v-for="item in contactMapParamSalesman"
                            :key="item.index"
                            :label="$t(item.name)"
                            :value="item.userid">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <p class="search__label">{{$t('状态')}}:</p>
                      <el-select v-model="contactTableParam.content.where.isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="contactMapParam.content.where.isleave = contactTableParam.content.where.isleave;contactTableParam.content.username = '';contactTableParam.content.pageNumber = 1;$refs.customerContactTable.listData(null,'状态');customerContactInit(null,'状态')" >
                        <el-option :label="$t('在职')" value="1"></el-option>
                        <el-option :label="$t('离职')" value="2"></el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <el-button-group>
                        <el-button :type="contactTableParam.content.dateType === '全部'?'primary':''" size="small" @click="contactMapParam.content.dateType = '全部';contactTableParam.content.dateType = '全部';
                          contactMapParam.content.where.begdate = '';contactMapParam.content.where.enddate = '';contactTableParam.content.where.begdate = '';contactTableParam.content.where.enddate = '';contactDate = []
                          contactTableParam.content.pageNumber = 1;$refs.customerContactTable.listData();customerContactInit()">{{$t(`全部`)}}</el-button>
                        <el-button :type="contactTableParam.content.dateType === '本年'?'primary':''" size="small" @click="contactMapParam.content.dateType = '本年';contactTableParam.content.dateType = '本年';
                          contactDate = [new Date().getFullYear() + '-01',new Date().getFullYear() + '-12'];contactMapParam.content.where.begdate = new Date().getFullYear() + '-01';contactMapParam.content.where.enddate = new Date().getFullYear() + '-12';
                          contactTableParam.content.where.begdate = new Date().getFullYear() + '-01';contactTableParam.content.where.enddate = new Date().getFullYear() + '-12';
                          contactTableParam.content.pageNumber = 1;$refs.customerContactTable.listData();customerContactInit()">{{$t(`本年`)}}</el-button>
                      </el-button-group>
                    </div>
                    <div class="mt-10 inline-16">
                      <el-date-picker
                          v-show="isFull"
                          :append-to-body="false"
                          v-model="contactDate"
                          :clearable="false"
                          @change="contactMapParam.content.dateType = '';contactMapParam.content.where.begdate = contactDate[0];contactMapParam.content.where.enddate = contactDate[1];contactTableParam.content.dateType = '';contactTableParam.content.where.begdate = contactDate[0];contactTableParam.content.where.enddate = contactDate[1];
                          contactTableParam.content.pageNumber = 1;$refs.customerContactTable.listData();customerContactInit()"
                          size="small"
                          format="yyyy-MM"
                          value-format="yyyy-MM"
                          type="monthrange"
                          :range-separator="$t('至')"
                          :start-placeholder="$t('开始月份')"
                          :end-placeholder="$t('结束月份')">
                      </el-date-picker>
                      <el-date-picker
                          v-show="!isFull"
                          v-model="contactDate"
                          :clearable="false"
                          @change="contactMapParam.content.dateType = '';contactMapParam.content.where.begdate = contactDate[0];contactMapParam.content.where.enddate = contactDate[1];contactTableParam.content.dateType = '';contactTableParam.content.where.begdate = contactDate[0];contactTableParam.content.where.enddate = contactDate[1];
                          contactTableParam.content.pageNumber = 1;$refs.customerContactTable.listData();customerContactInit()"
                          size="small"
                          format="yyyy-MM"
                          value-format="yyyy-MM"
                          type="monthrange"
                          :range-separator="$t('至')"
                          :start-placeholder="$t('开始月份')"
                          :end-placeholder="$t('结束月份')">
                      </el-date-picker>
                    </div>
                    <div class="mt-10 inline-15">
                      <exportFile  :param="contactTableParam" :columns="tool.tabelCol($route.name).typeTable.tablecols" fileName="客户联系人情况统计" :dataid="contactMapParam.content.dataid"></exportFile>
                    </div>
                    <div style="display: inline-block;vertical-align: middle">
                      <FullScroll domId="customerContact" @onFull="onFull" @backFull="backFull"></FullScroll>
                    </div>
                  </div>
                </div>
                <div class="panel-content" :style="windowWidth<1335?'height:calc(100% - 140px)':windowWidth<2006?'height:calc(100% - 93px)':windowWidth<2037?'height:calc(100% - 83px)':'height:calc(100% - 53px)'">
                  <div ref="customerContactEl" :style="windowWidth<1505?'width:54%;height:calc(100%)':windowWidth<1805?'width:54%;height:calc(100%)':windowWidth<2500?'width:45%':'width:30%'"></div>
                  <div class="panel-table" :style="windowWidth<1505?'width:46%;height:calc(100%)':windowWidth<1805?'width:46%;height:calc(100%)':windowWidth<2500?'width:55%':'width:70%'">
                    <pageTable
                      ref="customerContactTable"
                      :tablecols="tool.tabelCol($route.name).typeTable.tablecols"
                      :param="contactTableParam"
                      setName="contactTable"
                      :custom="true"
                      @detailSet="detailSet"
                    >
                      <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" style="margin-right: 5px">{{ $t(item) }}</el-tag>
                        </div>
                        <div v-else-if="scope.data.columnname == 'operation'">
<!--                          <el-button type="text" size="small" @click="goDetail(scope.data.data,'customerContactTable',contactTableParam,'sa_customersid')" :disabled="isFull">{{$t('详情')}}</el-button>-->
                          <drawerTemp class="inline-16" v-if="detailPath" :data="scope.data.data" :detailPath="detailPath" :idName="idName"  :disabled="isFull"
                                      :listqueryid="detailDataSet.contactTable.listqueryid" :total="detailDataSet.contactTable.total" :overview="true"></drawerTemp>
                        </div>
                        <div v-else-if="scope.data.columnname === 'industry'">
                          <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index" style="margin-right: 5px">{{ $t(item) }}</el-tag>
                        </div>
                        <div v-else-if="scope.data.columnname === 'tradingstatus'">
                          <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                        </div>
                        <div v-else-if="scope.data.columnname === 'status'">
                          <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '潜在'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '合作中'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已终止'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                        </div>
                        <div v-else>
                          {{ $t(scope.data.data[scope.data.columnname]) }}
                        </div>
                      </template>
                    </pageTable>
                  </div>
                </div>
              </div>
            </div>
            <!--客户关联项目-->
            <div class="data-panel" id="customerProject">
              <div class="panel-content-wrapper" >
                <div class="panel-header">
                  <div class="title">{{$t(`客户关联项目情况统计`)}}</div>
                  <div class="panel-select">
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('部门')}}:</label>
                      <el-cascader
                        :append-to-body="false"
                        placement="bottom"
                        ref="selectdep"
                        size="small"
                        v-model="projectTableParam.content.dataid"
                        :options="deplist"
                        :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"
                        @change="$event => {if($event.length) {projectMapParam.content.type=1;projectMapParam.content.dataid=$event[$event.length - 1];projectTableParam.content.type=1;projectTableParam.content.username='';projectTableParam.content.pageNumber = 1;$refs.customerProjectTable.listData();customerProjectInit()} else {projectMapParam.content.type='';projectMapParam.content.dataid='';projectTableParam.content.dataid='';projectTableParam.content.type='';projectTableParam.content.username='';projectTableParam.content.pageNumber = 1;$refs.customerProjectTable.listData();customerProjectInit()}}"></el-cascader>
                    </div>
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('业务员')}}:</label>
                      <el-select v-model="projectTableParam.content.username" filterable :placeholder="$t('请选择')" size="small"
                      :popper-append-to-body="false"
                      @change="$event => {if($event) {projectMapParam.content.type=0;projectMapParam.content.dataid=$event;projectTableParam.content.type=0;projectTableParam.content.dataid=$event;projectTableParam.content.depname='';projectTableParam.content.pageNumber = 1;$refs.customerProjectTable.listData();customerProjectInit()} else {projectMapParam.content.type='';projectMapParam.content.dataid='';projectTableParam.content.dataid='';projectTableParam.content.type='';projectTableParam.content.depname='';projectTableParam.content.pageNumber = 1;$refs.customerProjectTable.listData();customerProjectInit()}}"
                      >
                        <el-option
                            v-for="item in projectMapParamSalesman"
                            :key="item.index"
                            :label="$t(item.name)"
                            :value="item.userid">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <p class="search__label">{{$t('状态')}}:</p>
                      <el-select v-model="projectTableParam.content.where.isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="projectMapParam.content.where.isleave = projectTableParam.content.where.isleave;projectTableParam.content.username = '';projectTableParam.content.pageNumber = 1;$refs.customerProjectTable.listData(null,'状态');customerProjectInit(null,'状态')" >
                        <el-option :label="$t('在职')" value="1"></el-option>
                        <el-option :label="$t('离职')" value="2"></el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <el-button-group>
                        <el-button :type="projectTableParam.content.dateType === '全部'?'primary':''" size="small" @click="projectMapParam.content.dateType = '全部';projectTableParam.content.dateType = '全部';
                          projectMapParam.content.where.begdate = '';projectMapParam.content.where.enddate = '';projectTableParam.content.where.begdate = '';projectTableParam.content.where.enddate = '';projectDate = []
                          projectTableParam.content.pageNumber = 1;$refs.customerProjectTable.listData();customerProjectInit()">{{$t(`全部`)}}</el-button>
                        <el-button :type="projectTableParam.content.dateType === '本年'?'primary':''" size="small" @click="projectMapParam.content.dateType = '本年';projectTableParam.content.dateType = '本年';
                          projectDate = [new Date().getFullYear() + '-01',new Date().getFullYear() + '-12'];projectMapParam.content.where.begdate = new Date().getFullYear() + '-01';projectMapParam.content.where.enddate = new Date().getFullYear() + '-12';
                          projectTableParam.content.where.begdate = new Date().getFullYear() + '-01';projectTableParam.content.where.enddate = new Date().getFullYear() + '-12';
                          projectTableParam.content.pageNumber = 1;$refs.customerProjectTable.listData();customerProjectInit()">{{$t(`本年`)}}</el-button>
                      </el-button-group>
                    </div>
                    <div class="mt-10 inline-16">
                      <el-date-picker
                          v-show="isFull"
                          :append-to-body="false"
                          v-model="projectDate"
                          :clearable="false"
                          @change="projectMapParam.content.dateType = '';projectMapParam.content.where.begdate = projectDate[0];projectMapParam.content.where.enddate = projectDate[1];projectTableParam.content.dateType = '';projectTableParam.content.where.begdate = projectDate[0];projectTableParam.content.where.enddate = projectDate[1];
                          projectTableParam.content.pageNumber = 1;$refs.customerProjectTable.listData();customerProjectInit()"
                          size="small"
                          format="yyyy-MM"
                          value-format="yyyy-MM"
                          type="monthrange"
                          :range-separator="$t('至')"
                          :start-placeholder="$t('开始月份')"
                          :end-placeholder="$t('结束月份')">
                      </el-date-picker>
                      <el-date-picker
                          v-show="!isFull"
                          v-model="projectDate"
                          :clearable="false"
                          @change="projectMapParam.content.dateType = '';projectMapParam.content.where.begdate = projectDate[0];projectMapParam.content.where.enddate = projectDate[1];projectTableParam.content.dateType = '';projectTableParam.content.where.begdate = projectDate[0];projectTableParam.content.where.enddate = projectDate[1];
                          projectTableParam.content.pageNumber = 1;$refs.customerProjectTable.listData();customerProjectInit()"
                          size="small"
                          format="yyyy-MM"
                          value-format="yyyy-MM"
                          type="monthrange"
                          :range-separator="$t('至')"
                          :start-placeholder="$t('开始月份')"
                          :end-placeholder="$t('结束月份')">
                      </el-date-picker>
                    </div>
                    <div class="mt-10 inline-15">
                      <exportFile  :param="projectTableParam" :columns="tool.tabelCol($route.name).typeTable.tablecols" fileName="客户关联项目情况统计" :dataid="projectMapParam.content.dataid"></exportFile>
                    </div>
                    <div style="display: inline-block;vertical-align: middle">
                      <FullScroll domId="customerProject" @onFull="onFull" @backFull="backFull"></FullScroll>
                    </div>
                  </div>
                </div>
                <div class="panel-content" :style="windowWidth<1335?'height:calc(100% - 140px)':windowWidth<2006?'height:calc(100% - 93px)':windowWidth<2037?'height:calc(100% - 83px)':'height:calc(100% - 53px)'">
                  <div ref="customerProjectEl" :style="windowWidth<1505?'width:54%;height:calc(100%)':windowWidth<1805?'width:54%;height:calc(100%)':windowWidth<2500?'width:45%':'width:30%'"></div>
                  <div class="panel-table" :style="windowWidth<1505?'width:46%;height:calc(100%)':windowWidth<1805?'width:46%;height:calc(100%)':windowWidth<2500?'width:55%':'width:70%'">
                    <pageTable
                      ref="customerProjectTable"
                      :tablecols="tool.tabelCol($route.name).typeTable.tablecols"
                      :param="projectTableParam"
                      setName="projectTable"
                      :custom="true"
                      @detailSet="detailSet"
                    >
                      <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" style="margin-right: 5px">{{ $t(item) }}</el-tag>
                        </div>
                        <div v-else-if="scope.data.columnname == 'operation'">
<!--                          <el-button type="text" size="small" @click="goDetail(scope.data.data,'customerProjectTable',projectTableParam,'sa_customersid')" :disabled="isFull">{{$t('详情')}}</el-button>-->
                          <drawerTemp class="inline-16" v-if="detailPath" :data="scope.data.data" :detailPath="detailPath" :idName="idName"  :disabled="isFull"
                                      :listqueryid="detailDataSet.projectTable.listqueryid" :total="detailDataSet.projectTable.total" :overview="true"></drawerTemp>
                        </div>
                        <div v-else-if="scope.data.columnname === 'industry'">
                          <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index" style="margin-right: 5px">{{ $t(item) }}</el-tag>
                        </div>
                        <div v-else-if="scope.data.columnname === 'tradingstatus'">
                          <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                        </div>
                        <div v-else-if="scope.data.columnname === 'status'">
                          <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '潜在'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '合作中'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已终止'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                        </div>
                        <div v-else>
                          {{ $t(scope.data.data[scope.data.columnname]) }}
                        </div>
                      </template>
                    </pageTable>
                  </div>
                </div>
              </div>
            </div>
            <!--客户跟进情况-->
            <div class="data-panel" id="customerFllow">
              <div class="panel-content-wrapper" >
                <div class="panel-header">
                  <div class="title">{{$t(`客户跟进情况统计`)}}</div>
                  <div class="panel-select">
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('部门')}}:</label>
                      <el-cascader
                        :append-to-body="false"
                        placement="bottom"
                        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='';fllowTableParam.content.pageNumber = 1;$refs.customerFllowTable.listData();customerFllowInit()} else {fllowMapParam.content.type='';fllowMapParam.content.dataid='';fllowTableParam.content.dataid='';fllowTableParam.content.type='';fllowTableParam.content.username='';fllowTableParam.content.pageNumber = 1;$refs.customerFllowTable.listData();customerFllowInit()}}"></el-cascader>
                    </div>
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('业务员')}}:</label>
                      <el-select v-model="fllowTableParam.content.username" filterable :placeholder="$t('请选择')" size="small"
                      :popper-append-to-body="false"
                      @change="$event => {if($event) {fllowMapParam.content.type=0;fllowMapParam.content.dataid=$event;fllowTableParam.content.type=0;fllowTableParam.content.dataid=$event;fllowTableParam.content.depname='';fllowTableParam.content.pageNumber = 1;$refs.customerFllowTable.listData();customerFllowInit()} else {fllowMapParam.content.type='';fllowMapParam.content.dataid='';fllowTableParam.content.dataid='';fllowTableParam.content.type='';fllowTableParam.content.depname='';fllowTableParam.content.pageNumber = 1;$refs.customerFllowTable.listData();customerFllowInit()}}"
                      >
                        <el-option
                            v-for="item in fllowMapParamSalesman"
                            :key="item.index"
                            :label="$t(item.name)"
                            :value="item.userid">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <p class="search__label">{{$t('状态')}}:</p>
                      <el-select v-model="fllowTableParam.content.where.isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="fllowMapParam.content.where.isleave = fllowTableParam.content.where.isleave;fllowTableParam.content.username = '';fllowTableParam.content.pageNumber = 1;$refs.customerFllowTable.listData(null,'状态');customerFllowInit(null,'状态')" >
                        <el-option :label="$t('在职')" value="1"></el-option>
                        <el-option :label="$t('离职')" value="2"></el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <el-button-group>
                        <el-button :type="fllowTableParam.content.dateType === '全部'?'primary':''" size="small" @click="fllowMapParam.content.dateType = '全部';fllowTableParam.content.dateType = '全部';
                          fllowMapParam.content.where.begdate = '';fllowMapParam.content.where.enddate = '';fllowTableParam.content.where.begdate = '';fllowTableParam.content.where.enddate = '';fllowDate = []
                          fllowTableParam.content.pageNumber = 1;$refs.customerFllowTable.listData();customerFllowInit()">{{$t(`全部`)}}</el-button>
                        <el-button :type="fllowTableParam.content.dateType === '本年'?'primary':''" size="small" @click="fllowMapParam.content.dateType = '本年';fllowTableParam.content.dateType = '本年';
                          fllowDate = [new Date().getFullYear() + '-01',new Date().getFullYear() + '-12'];fllowMapParam.content.where.begdate = new Date().getFullYear() + '-01';fllowMapParam.content.where.enddate = new Date().getFullYear() + '-12';
                          fllowTableParam.content.where.begdate = new Date().getFullYear() + '-01';fllowTableParam.content.where.enddate = new Date().getFullYear() + '-12';
                          fllowTableParam.content.pageNumber = 1;$refs.customerFllowTable.listData();customerFllowInit()">{{$t(`本年`)}}</el-button>
                      </el-button-group>
                    </div>
                    <div class="mt-10 inline-16">
                      <el-date-picker
                          v-show="isFull"
                          :append-to-body="false"
                          v-model="fllowDate"
                          :clearable="false"
                          @change="fllowMapParam.content.dateType = '';fllowMapParam.content.where.begdate = fllowDate[0];fllowMapParam.content.where.enddate = fllowDate[1];fllowTableParam.content.dateType = '';fllowTableParam.content.where.begdate = fllowDate[0];fllowTableParam.content.where.enddate = fllowDate[1];
                          fllowTableParam.content.pageNumber = 1;$refs.customerFllowTable.listData();customerFllowInit()"
                          size="small"
                          format="yyyy-MM"
                          value-format="yyyy-MM"
                          type="monthrange"
                          :range-separator="$t('至')"
                          :start-placeholder="$t('开始月份')"
                          :end-placeholder="$t('结束月份')">
                      </el-date-picker>
                      <el-date-picker
                          v-show="!isFull"
                          v-model="fllowDate"
                          :clearable="false"
                          @change="fllowMapParam.content.dateType = '';fllowMapParam.content.where.begdate = fllowDate[0];fllowMapParam.content.where.enddate = fllowDate[1];fllowTableParam.content.dateType = '';fllowTableParam.content.where.begdate = fllowDate[0];fllowTableParam.content.where.enddate = fllowDate[1];
                          fllowTableParam.content.pageNumber = 1;$refs.customerFllowTable.listData();customerFllowInit()"
                          size="small"
                          format="yyyy-MM"
                          value-format="yyyy-MM"
                          type="monthrange"
                          :range-separator="$t('至')"
                          :start-placeholder="$t('开始月份')"
                          :end-placeholder="$t('结束月份')">
                      </el-date-picker>
                    </div>
                    <div class="mt-10 inline-15">
                      <exportFile  :param="fllowTableParam" :columns="tool.tabelCol($route.name).typeTable.tablecols" fileName="客户跟进情况统计" :dataid="fllowMapParam.content.dataid"></exportFile>
                    </div>
                    <div style="display: inline-block;vertical-align: middle">
                      <FullScroll domId="customerFllow" @onFull="onFull" @backFull="backFull"></FullScroll>
                    </div>
                  </div>
                </div>
                <div class="panel-content" :style="windowWidth<1335?'height:calc(100% - 140px)':windowWidth<2006?'height:calc(100% - 93px)':windowWidth<2037?'height:calc(100% - 83px)':'height:calc(100% - 53px)'">
                  <div ref="customerFllowEl" :style="windowWidth<1505?'width:54%;height:calc(100%)':windowWidth<1805?'width:54%;height:calc(100%)':windowWidth<2500?'width:45%':'width:30%'"></div>
                  <div class="panel-table" :style="windowWidth<1505?'width:46%;height:calc(100%)':windowWidth<1805?'width:46%;height:calc(100%)':windowWidth<2500?'width:55%':'width:70%'">
                    <pageTable
                      ref="customerFllowTable"
                      :tablecols="tool.tabelCol($route.name).typeTable.tablecols"
                      :param="fllowTableParam"
                      :custom="true"
                      setName="fllowTable"
                      @detailSet="detailSet"
                    >
                      <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" style="margin-right: 5px">{{ $t(item) }}</el-tag>
                        </div>
                        <div v-else-if="scope.data.columnname == 'operation'">
<!--                          <el-button type="text" size="small" @click="goDetail(scope.data.data,'customerFllowTable',fllowTableParam,'sa_customersid')" :disabled="isFull">{{$t('详情')}}</el-button>-->
                          <drawerTemp class="inline-16" v-if="detailPath" :data="scope.data.data" :detailPath="detailPath" :idName="idName"  :disabled="isFull"
                                      :listqueryid="detailDataSet.fllowTable.listqueryid" :total="detailDataSet.fllowTable.total" :overview="true"></drawerTemp>
                        </div>
                        <div v-else-if="scope.data.columnname === 'industry'">
                          <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index" style="margin-right: 5px">{{ $t(item) }}</el-tag>
                        </div>
                        <div v-else-if="scope.data.columnname === 'tradingstatus'">
                          <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                        </div>
                        <div v-else-if="scope.data.columnname === 'status'">
                          <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '潜在'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '合作中'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已终止'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                        </div>
                        <div v-else>
                          {{ $t(scope.data.data[scope.data.columnname]) }}
                        </div>
                      </template>
                    </pageTable>
                  </div>
                </div>
              </div>
            </div>
            <!--12月客户跟进分析-->
            <div class="data-panel" id="customerFllow1">
              <div class="panel-content-wrapper" >
                <div class="panel-header">
                  <div class="title">{{$t(`近12月客户跟进分析`)}}</div>
                  <div class="panel-select">
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('部门')}}:</label>
                      <el-cascader
                        :append-to-body="false"
                        placement="bottom"
                        ref="selectdep"
                        size="small"
                        v-model="chartParam2.content.dataid"
                        :options="deplist"
                        :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"
                        @change="$event => {if($event.length) {chartParam2.content.type=1;chartParam2.content.username='';chart2Fun()} else {chartParam2.content.dataid='';chartParam2.content.type='';chartParam2.content.username='';chart2Fun()}}"></el-cascader>
                    </div>
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('业务员')}}:</label>
                      <el-select v-model="chartParam2.content.username" filterable :placeholder="$t('请选择')" size="small"
                        :popper-append-to-body="false"
                        @change="$event => {if($event) {chartParam2.content.type=0;chartParam2.content.dataid=$event;chartParam2.content.depname='';chart2Fun()} else {chartParam2.content.dataid='';chartParam2.content.type='';chartParam2.content.depname='';chart2Fun()}}"
                        >
                        <el-option
                            v-for="item in chartParam2Salesman"
                            :key="item.index"
                            :label="$t(item.name)"
                            :value="item.userid">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <p class="search__label">{{$t('状态')}}:</p>
                      <el-select v-model="chartParam2.content.where.isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="chart2Fun(null,'状态')" >
                        <el-option :label="$t('在职')" value="1"></el-option>
                        <el-option :label="$t('离职')" value="2"></el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-15">
                      <label  class="search__label" >{{$t('分析日期')}}:</label>
                      <el-date-picker
                          :append-to-body="false"
                          v-model="chartParam2.content.enddate"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          type="date"
                          size="small"
                          placeholder="选择日期"
                          @change="chart2Fun()">
                      </el-date-picker>
                    </div>
                    <div style="display: inline-block;vertical-align: middle">
                      <FullScroll domId="customerFllow1"></FullScroll>
                    </div>
                  </div>
                </div>
                <div ref="chart2" :style="windowWidth<1574?'height:calc(100% - 100px)':windowWidth<1593?'height:calc(100% - 90px)':'height:calc(100% - 55px)'"></div>
              </div>
            </div>
            <!--有效客户未跟进情况-->
            <div class="data-panel" style="height:800px" id="projectUnfllow">
              <div class="panel-content-wrapper" >
                <div class="panel-header">
                  <div class="title">{{$t(`有效客户未跟进天数分析`)}}</div>
                  <div class="panel-select">
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('部门')}}:</label>
                      <el-cascader
                        :append-to-body="false"
                        placement="bottom"
                        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='';unfllowTableParam.content.pageNumber = 1;$refs.customerUnfllowTable.listData();customerUnfllowInit()} else {unfllowMapParam.content.type='';unfllowMapParam.content.dataid='';unfllowTableParam.content.dataid='';unfllowTableParam.content.type='';unfllowTableParam.content.username='';unfllowTableParam.content.pageNumber = 1;$refs.customerUnfllowTable.listData();customerUnfllowInit()}}"></el-cascader>
                    </div>
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('业务员')}}:</label>
                      <el-select v-model="unfllowTableParam.content.username" filterable :placeholder="$t('请选择')" size="small"
                      :popper-append-to-body="false"
                      @change="$event => {if($event) {unfllowMapParam.content.type=0;unfllowMapParam.content.dataid=$event;unfllowTableParam.content.type=0;unfllowTableParam.content.dataid=$event;unfllowTableParam.content.depname='';unfllowTableParam.content.pageNumber = 1;$refs.customerUnfllowTable.listData();customerUnfllowInit()} else {unfllowMapParam.content.type='';unfllowMapParam.content.dataid='';unfllowTableParam.content.dataid='';unfllowTableParam.content.type='';unfllowTableParam.content.depname='';unfllowTableParam.content.pageNumber = 1;$refs.customerUnfllowTable.listData();customerUnfllowInit()}}"
                      >
                        <el-option
                            v-for="item in unfllowMapParamSalesman"
                            :key="item.index"
                            :label="$t(item.name)"
                            :value="item.userid">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <p class="search__label">{{$t('状态')}}:</p>
                      <el-select v-model="unfllowTableParam.content.where.isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="unfllowMapParam.content.where.isleave = unfllowTableParam.content.where.isleave;unfllowTableParam.content.username = '';unfllowTableParam.content.pageNumber = 1;$refs.customerUnfllowTable.listData(null,'状态');customerUnfllowInit(null,'状态')" >
                        <el-option :label="$t('在职')" value="1"></el-option>
                        <el-option :label="$t('离职')" value="2"></el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('客户类型')}}:</label>
                      <el-select v-model="unfllowTableParam.content.where.type" :placeholder="$t('请选择')" size="small"
                      :popper-append-to-body="false"
                      @change="$event => {if($event) {unfllowMapParam.content.where.type=$event;unfllowTableParam.content.pageNumber = 1;$refs.customerUnfllowTable.listData();customerUnfllowInit()} else {unfllowMapParam.content.where.type='';unfllowTableParam.content.pageNumber = 1;$refs.customerUnfllowTable.listData();customerUnfllowInit()}}"
                      clearable>
                        <el-option
                            v-for="item in customerTypeList"
                            :key="item.rowindex"
                            :label="$t(item.value)"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('客户等级')}}:</label>
                      <el-select v-model="unfllowTableParam.content.where.grade" :placeholder="$t('请选择')" size="small"
                      :popper-append-to-body="false"
                      @change="$event => {if($event) {unfllowMapParam.content.where.grade=$event;unfllowTableParam.content.pageNumber = 1;$refs.customerUnfllowTable.listData();customerUnfllowInit()} else {unfllowMapParam.content.where.grade='';unfllowTableParam.content.pageNumber = 1;$refs.customerUnfllowTable.listData();customerUnfllowInit()}}"
                      clearable>
                        <el-option
                            v-for="item in customerGrade"
                            :key="item.rowindex"
                            :label="$t(item.value)"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('成交状态')}}:</label>
                      <el-select v-model="unfllowTableParam.content.where.tradingstatus" :placeholder="$t('请选择')" size="small"
                      :popper-append-to-body="false"
                      @change="$event => {if($event) {unfllowMapParam.content.where.tradingstatus=$event;unfllowTableParam.content.pageNumber = 1;$refs.customerUnfllowTable.listData();customerUnfllowInit()} else {unfllowMapParam.content.where.tradingstatus='';unfllowTableParam.content.pageNumber = 1;$refs.customerUnfllowTable.listData();customerUnfllowInit()}}"
                      clearable>
                        <el-option
                            v-for="item in tradingstatus"
                            :key="item.rowindex"
                            :label="$t(item.value)"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('分析日期')}}:</label>
                      <el-date-picker
                          :append-to-body="false"
                          v-model="unfllowMapParam.content.enddate"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          type="date"
                          size="small"
                          placeholder="选择日期"
                          @change="$event => {unfllowTableParam.content.enddate=unfllowMapParam.content.enddate;unfllowTableParam.content.pageNumber = 1;customerUnfllowInit();$refs.customerUnfllowTable.listData()}">
                      </el-date-picker>
                    </div>
                    <div class="mt-10 inline-15">
                      <exportFile  :param="unfllowTableParam" :columns="tool.tabelCol($route.name).typeTable1.tablecols.splice(0,tool.tabelCol($route.name).typeTable1.tablecols.length - 1)" fileName="有效客户未跟进天数分析" :dataid="unfllowMapParam.content.dataid"></exportFile>
                    </div>
                    <div style="display: inline-block;vertical-align: middle">
                      <FullScroll domId="projectUnfllow"></FullScroll>
                    </div>
                  </div>
                </div>
                <div style="height:calc(100% - 55px)">
                  <div ref="customerUnfllowEl" style="height:30%"></div>
                <div style="font-size:16px;color:#333333;margin:10px 0">{{ $t(unfllowStatus ? unfllowStatus : '全部') }}</div>
                  <div :style="{height:windowWidth>1521 || isFull?'calc(72% - 100px)':'calc(61% - 100px)'}">
                    <pageTable
                      ref="customerUnfllowTable"
                      :tablecols="tool.tabelCol($route.name).typeTable1.tablecols"
                      :param="unfllowTableParam"
                      :custom="true"
                      setName="customerUnfllow"
                      @detailSet="detailSet"
                    >
                      <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" style="margin-right: 5px">{{ $t(item) }}</el-tag>
                        </div>
                        <div v-else-if="scope.data.columnname === 'industry'">
                          <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index" style="margin-right: 5px">{{ $t(item) }}</el-tag>
                        </div>
                        <div v-else-if="scope.data.columnname === 'tradingstatus'">
                          <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                        </div>
                        <div v-else-if="scope.data.columnname === 'status'">
                          <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '潜在'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '合作中'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                          <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已终止'">{{$t(scope.data.data[[scope.data.columnname]])}}</span>
                        </div>
                        <div v-else-if="scope.data.columnname == 'operation'">
                          <drawerTemp class="inline-16" v-if="detailPath" :data="scope.data.data" :detailPath="detailPath" :idName="idName"  :disabled="isFull"
                                      :listqueryid="detailDataSet.gradTable.listqueryid" :total="detailDataSet.gradTable.total" :overview="false"></drawerTemp>
                        </div>
                        <div v-else>
                          {{ $t(scope.data.data[scope.data.columnname]) }}
                        </div>
                      </template>

                    </pageTable>
                  </div>
                </div>
              </div>
            </div>
            <!--12月客户报价分析-->
            <div class="data-panel" id="customerBaojia">
              <div class="panel-content-wrapper" >
                <div class="panel-header">
                  <div class="title">{{$t(`近12月客户报价分析`)}}</div>
                  <div class="panel-select">
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('部门')}}:</label>
                      <el-cascader
                        :append-to-body="false"
                        placement="bottom"
                        ref="selectdep"
                        size="small"
                        v-model="projectParam.content.dataid"
                        :options="deplist"
                        :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"
                        @change="$event => {if($event.length) {projectParam.content.type=1;projectParam.content.username='';chart3Fun()} else {projectParam.content.dataid='';projectParam.content.type='';projectParam.content.username='';chart3Fun()}}"></el-cascader>
                    </div>
                    <div class="mt-10 inline-16">
                      <label  class="search__label" >{{$t('业务员')}}:</label>
                      <el-select v-model="projectParam.content.username" filterable :placeholder="$t('请选择')" size="small"
                      :popper-append-to-body="false"
                        @change="$event => {if($event) {projectParam.content.type=0;projectParam.content.dataid=$event;projectParam.content.depname='';chart3Fun()} else {projectParam.content.dataid='';projectParam.content.type='';projectParam.content.depname='';chart3Fun()}}"
                        >
                        <el-option
                            v-for="item in projectParamSalesman"
                            :key="item.index"
                            :label="$t(item.name)"
                            :value="item.userid">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-16">
                      <p class="search__label">{{$t('状态')}}:</p>
                      <el-select v-model="projectParam.content.where.isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="chart3Fun(null,'状态')" >
                        <el-option :label="$t('在职')" value="1"></el-option>
                        <el-option :label="$t('离职')" value="2"></el-option>
                      </el-select>
                    </div>
                    <div class="mt-10 inline-15">
                      <label  class="search__label" >{{$t('分析日期')}}:</label>
                      <el-date-picker
                          :append-to-body="false"
                          v-model="projectParam.content.enddate"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          type="date"
                          size="small"
                          placeholder="选择日期"
                          @change="chart3Fun()">
                      </el-date-picker>
                    </div>
                    <div style="display: inline-block;vertical-align: middle">
                      <FullScroll domId="customerBaojia"></FullScroll>
                    </div>
                  </div>
                </div>
                <div ref="chart3" :style="windowWidth<1574?'height:calc(100% - 100px)':windowWidth<1593?'height:calc(100% - 90px)':'height:calc(100% - 55px)'"></div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <dataDetail ref="detailRef" :title="title" :param="paramDetail" :person="person" :departmentid="depment" :isleave="isleave" :layout="tablecols" height="calc(100vh - 250px)">
          <template #custom>
            <div  class="mt-10 inline-16">
              <label class="search__label">{{$t('客户类型')}}:</label>
              <el-select class="inline-16" v-model="paramDetail.content.where.type" size="small" :placeholder="$t('请选择')" @change="selectChange" clearable>
                <el-option
                    v-for="item in option.typeData"
                    :key="item.value"
                    :label="$t(item.value)"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div  class="mt-10 inline-16">
              <label class="search__label">{{$t(`合作状态`)}}:</label>
              <el-select  class="inline-16" v-model="paramDetail.content.where.status" size="small" :placeholder="$t('请选择')" @change="selectChange" clearable>
                <el-option
                    v-for="item in option.status"
                    :key="item.value"
                    :label="$t(item.value)"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div  class="mt-10 inline-16">
              <label class="search__label">{{$t('成交状态')}}:</label>
              <el-select  class="inline-16" v-model="paramDetail.content.where.tradingstatus" size="small" :placeholder="$t('请选择')" @change="selectChange" clearable>
                <el-option
                    v-for="item in option.tradingstatus"
                    :key="item.value"
                    :label="$t(item.value)"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div  class="mt-10 inline-16">
              <label class="search__label">{{$t('标签')}}:</label>
              <el-select  class="inline-16" v-model="paramDetail.content.where.tag" size="small" :placeholder="$t('请选择')" @change="selectChange" clearable multiple>
                <el-option
                    v-for="item in option.tagData"
                    :key="item.tag"
                    :label="$t(item.tag)"
                    :value="item.tag">
                </el-option>
              </el-select>
            </div>
          </template>
        </dataDetail>
      </div>
    </template>
  </normalLayout>
</template>

<script>
import { DualAxes,Pie,measureTextWidth,Column,Line  } from '@antv/g2plot'
import pageTable from './components/pageTable.vue'
import borderTemp from '@/HDrpManagement/dataanalysis/components/border.vue'
import FullScroll from '@/components/fullScroll/index.vue'
import exportFile from '@/components/export_file/index'
import btnSelect from "@/components/btn_select/btnSelect";
import dataDetail from '@/template/dataDetail/index'
export default {
  name:'customerData',
  components:{
    borderTemp,pageTable,FullScroll,exportFile,btnSelect,dataDetail,
    drawerTemp:() =>  import('@/components/normal-basic-layout/drawerDetail/index'),
  },
  data () {
    return {
      detailPath:{
        path:'/customerCustomerDetail'
      },
      idName:'sa_customersid',
      detailDataSet:{
        fllowTable:{
          listqueryid:'',
          total:'',
        },
        projectTable:{
          listqueryid:'',
          total:'',
        },
        contactTable:{
          listqueryid:'',
          total:'',
        },
        gradTable:{
          listqueryid:'',
          total:'',
        },
        typeTable:{
          listqueryid:'',
          total:'',
        },
        unfllowTable:{
          listqueryid:'',
          total:'',
        }
      },
      dateType:'本年',
      isFull:false,
      deplist:[],
      personnelList:[],
      windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
      depmentParam:{
        "id": 20230620102004,
        "content": {
          "isleave":'1'
        }
      },
      customerLead:[],
      depment:'',
      dataAll:{
        data:{}
      },
      unfllowStatus:'',
      person:'',
      isleave:'1',
      dualAxes:'',
      customerTypeMap:'',
      uvBillData:[],
      transformData:[],
      tradingstatus:[
        {
          value:'未成交'
        },
        {
          value:'已成交'
        },
        {
          value:'多次成交'
        }
      ],
      customerTypeList:[],
      customerGrade:[],

      //近12月客户新增
      chartParam1: {
        "id": 20231015202504,
        "content": {
            "depname":'',
            "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
            "type": '',
            "dataid": '',
            "enddate": `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
            "where":{
              "isleave":"1"
            }
        }
      },
      //近12月跟进分析
      chartMap:'',
      chartMapData:[],
      chartParam2: {
        "id": 20231017152704,
        "content": {
            "depname":'',
            "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
            "type": '',
            "dataid": '',
            "enddate": `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
            "where":{
              "isleave":'1'
            }

        }
      },
      //近12月客户报价
      projectMap:'',
      projectMapData:[],
      projectParam: {
        "id": 20231018131604,
        "content": {
            "depname":'',
            "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
            "type": '',
            "dataid": '',
            "enddate": `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
            "where":{
              "isleave":"1"
            }
        }
      },
      //客户类型
      typeDate:[new Date().getFullYear() + '-1',new Date().getFullYear() + '-12'],
      typeMapParam: {
        "id": 20231015203704,
        "content": {
          "depname":'',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "type": '',
          "dataid": '',
          "dateType":"本年",
          "where":{
            "begdate":"",
            "enddate":"",
            "isleave":"1"
          }
        }
      },
      typeTableParam:{
        "id": 20231018164504,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "pageSize":20,
          "pageNumber":1,
          "dateType":"本年",
          "where": {
              "customerstype":"",// 客户各种类型 以及 无类型  ------ 客户类型情况统计列表使用该字段
              "begdate":"",
              "enddate":"",
              "isleave":"1"
          }
        }
      },
      customerTypeData:{
        map:[],
        table:[]
      },
      //客户等级
      customerGradMap:'',
      gradDate:[new Date().getFullYear() + '-1',new Date().getFullYear() + '-12'],
      gradMapParam: {
        "id": 20231017140904,
        "content": {
          "depname":'',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "type": '',
          "dataid": '',
          "dateType":"本年",
          "where":{
            "begdate":"",
            "enddate":"",
            "isleave":"1"
          }
        }
      },
      gradTableParam:{
        "id": 20231018164504,
        "content": {
          "type": '',
          "dataid": '',
          "pageSize":20,
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "pageNumber":1,
          "dateType":"本年",
          "where": {
              "grade": "", // 1 2 3 4 5 无等级  ------客户等级统计列表使用该字段
              "begdate":"",
              "enddate":"",
              "isleave":"1"
          }
        }
      },
      customerGradData:{
        map:[],
        table:[]
      },
      //客户联系人
      customerContactMap:'',
      contactDate:[new Date().getFullYear() + '-1',new Date().getFullYear() + '-12'],
      contactMapParam: {
        "id": 20231017141904,
        "content": {
          "depname":'',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "type": '',
          "dataid": '',
          "dateType":"本年",
          "where":{
            "begdate":"",
            "enddate":"",
            "isleave":"1"
          }
        }
      },
      contactTableParam:{
        "id": 20231018164504,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "pageSize":20,
          "pageNumber":1,
          "dateType":"本年",
          "where": {
              "iscontacts": "", //无联系人 有联系人  ------客户联系人情况统计列表使用该字段
              "begdate":"",
              "enddate":"",
              "isleave":"1"
          }
        }
      },
      customerContactData:{
        map:[],
        table:[]
      },
      //客户关联项目
      customerProjectMap:'',
      projectDate:[new Date().getFullYear() + '-1',new Date().getFullYear() + '-12'],
      projectMapParam: {
        "id": 20231017143504,
        "content": {
          "depname":'',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "type": '',
          "dataid": '',
          "dateType":"本年",
          "where":{
            "begdate":"",
            "enddate":"",
            "isleave":"1"
          }
        }
      },
      projectTableParam:{
        "id": 20231018164504,
        "content": {
          "type": '',
          "dataid": '',
          "pageSize":20,
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "pageNumber":1,
          "dateType":"本年",
          "where": {
              "isproject": "", //无关联项目 有关联项目  ------客户关联项目情况统计列表使用该字段
              "begdate":"",
              "enddate":"",
              "isleave":"1"
          }
        }
      },
      customerProjectData:{
        map:[],
        table:[]
      },
      //客户跟进情况
      customerFllowMap:'',
      fllowDate:[new Date().getFullYear() + '-1',new Date().getFullYear() + '-12'],
      fllowMapParam: {
        "id": 20231017151304,
        "content": {
          "depname":'',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "type": '',
          "dataid": '',
          "dateType":"本年",
          "where":{
            "begdate":"",
            "enddate":"",
            "isleave":"1"
          }
        }
      },
      fllowTableParam:{
        "id": 20231018164504,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "pageSize":20,
          "pageNumber":1,
          "dateType":"本年",
          "where": {
              "isfollowup": "", // 有跟进 无跟进------客户跟进情况统计列表使用该字段
              "begdate":"",
              "enddate":"",
              "isleave":"1"
          }
        }
      },
      customerFllowData:{
        map:[],
        table:[]
      },
      //未跟进情况
      customerUnfllowMap:'',
      unfllowMapParam: {
        "id": 20231017162504,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "enddate":new Date().getFullYear() + '-' + (new Date().getMonth() + 1)  + '-' + new Date().getDate(),
          "dataType":"",// 默认为 客户类型
          "where": {
              "tradingstatus": "",//成交状态
              "type": "",//客户类型
              "grade": "",//客户等级
              "isleave":"1"
          }
        }
      },
      unfllowTableParam:{
        "id": 20231018093704,
        "content": {
          "type": '',
          "dataid": '',
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "enddate":new Date().getFullYear() + '-' + (new Date().getMonth() + 1)  + '-' + new Date().getDate(),
          "pageSize":20,
          "pageNumber":1,
          "where": {
            "tradingstatus": "",//成交状态
            "type": "",//客户类型
            "grade": "",//客户等级
            "dateType": "",// 时间阶段
            "isleave":"1"
          }
        }
      },
      customerUnfllowData:{
        map:[],
        table:[]
      },
      dataAllParam:{
        "id": 20231015170504,
        "content" :{
          "dataid": '',
          "type":"",
          "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
          "dateType":'本年',
          "where":{
            "isleave":"1"
          }
        }
      },
      newFollowup:[],
      /*业务员列表*/
      chartParam1Salesman:[],
      chartParam2Salesman:[],
      projectParamSalesman:[],
      typeMapParamSalesman:[],
      gradMapParamSalesman:[],
      contactMapParamSalesman:[],
      projectMapParamSalesman:[],
      fllowMapParamSalesman:[],
      unfllowMapParamSalesman:[],
      paramDetail:{
        "id": 20241008144104,
        "content": {
          "dataid": '',
          "type": '',
          "username": "",
          "typemx": "",
          "dateType":"",
          "where": {
            "isleave": "",
            "condition": "",
            "status": "",
            "tradingstatus": "",
            "type": "",
            "tag": []
          }
        },
      },
      title:'',
      userName:JSON.parse(window.sessionStorage.getItem('active_account')).name,
      tablecols:'',
      option:{
        typeData:[],
        customerGrade:[],
        tagData:[],
        status:[
          {
            value:'潜在'
          },
          {
            value:'合作中'
          },
          {
            value:'已终止'
          }
        ],
        tradingstatus:[
          {
            value:'未成交'
          },
          {
            value:'已成交'
          },
          {
            value:'多次成交'
          }
        ]
      },
    }
  },
  methods:{
    btnClick(data){
      this.dateType = data
      this.dataAllParam.content.dateType = data
      this.getdataAll()
    },
    detailSet(listqueryid,total,setName){
      this.detailDataSet[setName].listqueryid = listqueryid
      this.detailDataSet[setName].total = total
    },
    goDetail (data,refData,paramData,fieldname) {
      sessionStorage.setItem('listqueryid',this.$refs[refData].listqueryid)
      sessionStorage.setItem('isGo','1')
      this.$router.push({
        path:'/customerDetail',
        query:{
          id:data.sa_customersid,
          rowindex:data.rowindex,
          listqueryid:this.$refs[refData].listqueryid,
          fieldname:fieldname
        }
      })
      this.$store.dispatch('saveListData',{listData:this.$refs[refData].list2,param:paramData,pageTotal:this.$refs[refData].pageTotal})
      this.$store.dispatch('changeDetailDrawer',true)
    },
    //获取数据总览
    async getdataAll () {
      let res = await this.$api.requested(this.dataAllParam)
      this.dataAll = res.data

    },
    async departmentrtment() {
      const res = await this.$api.requested(this.depmentParam)
      this.deplist = this.createMenu(res.data.dep)
      this.personnelList = res.data.hr
      this.chartParam1Salesman = res.data.hr
      this.chartParam2Salesman = res.data.hr
      this.projectParamSalesman = res.data.hr
      this.typeMapParamSalesman = res.data.hr
      this.gradMapParamSalesman = res.data.hr
      this.contactMapParamSalesman = res.data.hr
      this.projectMapParamSalesman = res.data.hr
      this.fllowMapParamSalesman = res.data.hr
      this.unfllowMapParamSalesman = res.data.hr
      this.person = JSON.parse(sessionStorage.getItem('accountinfo')).name
    },
    //12月新增初始化
    async chart1Fun (init,state) {
      let param = JSON.parse(JSON.stringify(this.chartParam1))
      if (state == '状态'){
        this.personData('chartParam1Salesman',this.chartParam1.content.where.isleave)
        this.chartParam1.content.username = ''
        param.content.dataid = param.content.type == 0 || param.content.type == ''  ? -1:param.content.dataid
      }
      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.uvBillData = res.data.histogram*/
      let lastYear = []
      let nowYear = []
      let k=0
      for (var i=0;i<res.data.histogram.length;i++){
        if (res.data.histogram[i].key === '去年同期新增'){
          lastYear[k]=res.data.histogram[i]
          k++
        }
      }
      let x=0
      for (var i=0;i<res.data.histogram.length;i++){
        if (res.data.histogram[i].key === '本期新增'){
          nowYear[x]=res.data.histogram[i]
          x++
        }
      }
      this.uvBillData = lastYear.concat(nowYear)
      this.uvBillData = this.uvBillData.map(item=>{
        return {
          date: item.date,
          key:this.$t(item.key),
          value: item.value
        }
      })
      /*res.data.lineChart.forEach(item => item[`同比增长率`] = item.value)*/
      this.transformData = res.data.lineChart
      this.transformData = this.transformData.map(item=>{
        return {
          date: item.date,
          key:this.$t(item.key),
          value: item.value
        }
      })
      if (init) {
        this.dualAxes = new DualAxes(this.$refs.chart1, {
          data: [this.uvBillData,this.transformData],
          xField: 'date',
          yField: ['value', 'value'],
          geometryOptions: [
            {
              geometry: 'column',
              isGroup: true,
              seriesField: 'key',
              color:['#62daab','#6395fa'],
              label:{
                position:top
              }
            },
            {
              geometry: 'line',
              lineStyle: {
                lineWidth: 2,
              },
              seriesField: 'key',
              color: '#F6903D',
              smooth: true,
              label:{
                formatter: (datum) =>{
                  return  datum.value + '%'
                }
              }
            },
          ],
          tooltip: {
            formatter: (datum) => {
              return { name: datum.key, value: datum.key == this.$t('同比增长率')? datum.value + '%' : datum.value };
            },
          },
        });
        this.dualAxes.render()
      } else {
        this.dualAxes.changeData([this.uvBillData,this.transformData])
      }
    },
    //12月跟进初始化
    async chart2Fun (init,state) {
      let param = JSON.parse(JSON.stringify(this.chartParam2))
      if (state == '状态'){
        this.personData('chartParam2Salesman',this.chartParam2.content.where.isleave)
        this.chartParam2.content.username = ''
        param.content.dataid = param.content.type == 0 || param.content.type == ''  ? -1:param.content.dataid
      }
      if (param.content.dataid instanceof Array) {
        param.content.dataid = param.content.dataid[param.content.dataid.length - 1]
      }
      let res = await this.$api.requested(param)
      console.log(res.data,'近12月跟进');
      this.chartMapData = res.data
      let lastYear = []
      let nowYear = []
      let k=0
      for (var i=0;i< this.chartMapData .followup.length;i++){
        if ( this.chartMapData .followup[i].key === '去年同期跟进'){
          lastYear[k]= this.chartMapData .followup[i]
          k++
        }
      }
      let x=0
      for (var i=0;i< this.chartMapData .followup.length;i++){
        if ( this.chartMapData .followup[i].key === '本期跟进'){
          nowYear[x] =  this.chartMapData .followup[i]
          x++
        }
      }

      this.newFollowup = lastYear.concat(nowYear)
      this.newFollowup = this.newFollowup.map(item=>{
        return {
          key:this.$t(item.key),
          value: item.value,
          date: item.date
        }
      })
      this.chartMapData.tbzzl = res.data.tbzzl.map(item=>{
        return {
          date: item.date,
          key:this.$t("同比增长率"),
          value: item.value
        }
      })
     /* this.chartMapData.tbzzl.forEach(item => item.key = '同比增长率(%)')*/
      if (init) {
        this.chartMap = new DualAxes(this.$refs.chart2, {
          data: [this.newFollowup, this.chartMapData.tbzzl],
          xField: 'date',
          yField: ['value', 'value'],
          geometryOptions: [
            {
              geometry: 'column',
              seriesField:'key',
              isGroup: true,
              color:['#62daab','#6395fa'],
              label:{
                position:top
              }
            },
            {
              geometry: 'line',
              seriesField:'key',
              color: '#F6903D',
              smooth: true,
              label:{
                position:top,
                formatter: (datum) =>{
                  return  datum.value + '%'
                }
              }
            },
          ],
          tooltip: {
            formatter: (datum) => {
              return { name: datum.key, value: datum.key == this.$t('同比增长率')? datum.value + '%' : datum.value };
            },
          },
        });

        this.chartMap.render();
      } else {
        this.chartMap.changeData([this.newFollowup, this.chartMapData.tbzzl])
      }
    },
    //客户类型图初始化
    async customerTypeInit (init,state) {
      if (state == '状态'){
        this.personData('typeMapParamSalesman',this.typeMapParam.content.where.isleave)
        this.typeMapParam.content.username = ''
        this.typeMapParam.content.dataid = this.typeMapParam.content.type == 0 || this.typeMapParam.content.type == ''  ? -1:this.typeMapParam.content.dataid
      }
      let res = await this.$api.requested(this.typeMapParam)
      this.customerTypeData.map = res.data
      this.customerTypeData.map = this.customerTypeData.map.map(item=>{
        return {
          ratio: item.ratio,
          key:this.$t(item.key),
          value: item.value,
          totalqty: item.totalqty
        }
      })
      if (init) {
        this.customerTypeMap = new Pie(this.$refs.customerTypeEl, {
          appendPadding: 10,
          data:this.customerTypeData.map,
          angleField: 'ratio',
          colorField: 'key',
          radius: 1,
          innerRadius: 0.64,
          label:{
            formatter: (datum) => `${datum.ratio}%`
          },
          tooltip:{
            formatter: (datum) => {
              return { name: datum.key, value: datum.ratio + '%' };
            },
          },
          statistic: {
            title: {
              offsetY: -4,
              style: {
                fontSize:'16px'
              },
              content:this.$t('客户总数')
            },
            content: {
              offsetY: 4,
              style: {
                whiteSpace: 'pre-wrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                fontSize:'16px'
              },
              customHtml: (container, view, datum, data) => {
                const text = data[0].totalqty
                return text
              },
            },
          },
          legend: {
            position:'bottom'
          },
          // 添加 中心统计文本 交互
          interactions: [{ type: 'element-single-selected' },{ type: 'element-active' }],
        });
        this.customerTypeMap.on('element:click',(v) => {
          if (v.data.data.key != this.typeTableParam.content.where.customerstype) {
            this.typeTableParam.content.pageNumber = 1
            this.typeTableParam.content.where.customerstype = v.data.data.key
            this.$refs.customerTypeTable.listData()
          } else {
            this.typeTableParam.content.pageNumber = 1
            this.typeTableParam.content.where.customerstype = ''
            this.$refs.customerTypeTable.listData()
          }
        })
        this.customerTypeMap.render();
      } else {
        this.customerTypeMap.changeData(this.customerTypeData.map)
      }

    },
    //客户等级图初始化
    async customerGradInit (init,state) {
      if (state == '状态'){
        this.personData('gradMapParamSalesman',this.gradMapParam.content.where.isleave)
        this.gradMapParam.content.username = ''
        this.gradMapParam.content.dataid = this.gradMapParam.content.type == 0 || this.gradMapParam.content.type == ''  ? -1:this.gradMapParam.content.dataid
      }
      let res = await this.$api.requested(this.gradMapParam)
      this.customerGradData.map = res.data
      console.log(this.customerGradData,'客户数据');
      if (init) {
        this.customerGradMap = new Pie(this.$refs.customerGradEl, {
          appendPadding: 10,
          data:this.customerGradData.map,
          angleField: 'ratio',
          colorField: 'key',
          radius: 1,
          innerRadius: 0.64,
          meta: {
            value: {
              formatter: (v) => `${v} ¥`,
            },
          },
          label:{
            formatter: (datum) => `${datum.ratio}%`
          },
          tooltip:{
            formatter: (datum) => {
              return { name: datum.key, value: datum.ratio + '%' };
            },
          },
          statistic: {
            title: {
              offsetY: -4,
              style: {
                fontSize:'16px'
              },
              content:'客户总数'
            },
            content: {
              offsetY: 4,
              style: {
                whiteSpace: 'pre-wrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                fontSize:'16px'
              },
              customHtml: (container, view, datum, data) => {
                const text = data[0].totalqty
                return text
              },
            },
          },
          legend: {
            position:'bottom'
          },
          // 添加 中心统计文本 交互
          interactions: [{ type: 'element-single-selected' }, { type: 'element-active' }],
        });
        this.customerGradMap.on('element:click',(v) => {
          if (v.data.data.key != this.gradTableParam.content.where.grade) {
            this.gradTableParam.content.where.grade = v.data.data.key
            this.gradTableParam.content.pageNumber = 1
            this.$refs.customerGradTable.listData()
          } else {
            this.gradTableParam.content.where.grade = ''
            this.gradTableParam.content.pageNumber = 1
            this.$refs.customerGradTable.listData()
          }
        })
        this.customerGradMap.render();
      } else {
        this.customerGradMap.changeData(this.customerGradData.map)
      }

    },
    //客户联系人图初始化
    async customerContactInit (init,state) {
      if (state == '状态'){
        this.personData('contactMapParamSalesman',this.contactMapParam.content.where.isleave)
        this.contactMapParam.content.username = ''
        this.contactMapParam.content.dataid = this.contactMapParam.content.type == 0 || this.contactMapParam.content.type == ''  ? -1:this.contactMapParam.content.dataid
      }
      let res = await this.$api.requested(this.contactMapParam)
      this.customerContactData.map = res.data
      this.customerContactData.map = this.customerContactData.map.map(item=>{
        return {
          ratio: item.ratio,
          key:this.$t(item.key),
          value: item.value,
          totalqty: item.totalqty
        }
      })
      console.log(this.customerContactData,'客户数据');
      if (init) {
        this.customerContactMap = new Pie(this.$refs.customerContactEl, {
          appendPadding: 10,
          data:this.customerContactData.map,
          angleField: 'ratio',
          colorField: 'key',
          radius: 1,
          innerRadius: 0.64,
          label:{
            formatter: (datum) => `${datum.ratio}%`
          },
          tooltip:{
            formatter: (datum) => {
              return { name: datum.key, value: datum.ratio + '%' };
            },
          },
          statistic: {
            title: {
              offsetY: -4,
              style: {
                fontSize:'16px'
              },
              content:this.$t('客户总数')
            },
            content: {
              offsetY: 4,
              style: {
                whiteSpace: 'pre-wrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                fontSize:'16px'
              },
              customHtml: (container, view, datum, data) => {
                const text = data[0].totalqty
                return text
              },
            },
          },
          legend: {
            position:'bottom'
          },
          // 添加 中心统计文本 交互
          interactions: [{ type: 'element-single-selected' }, { type: 'element-active' }],
        });
        this.customerContactMap.on('element:click',(v) => {
          if (v.data.data.key != this.contactTableParam.content.where.iscontacts) {
            this.contactTableParam.content.where.iscontacts = v.data.data.key
            this.contactTableParam.content.pageNumber = 1
            this.$refs.customerContactTable.listData()
          } else {
            this.contactTableParam.content.where.iscontacts = ''
            this.contactTableParam.content.pageNumber = 1
            this.$refs.customerContactTable.listData()
          }
        })
        this.customerContactMap.render();
      } else {
        this.customerContactMap.changeData(this.customerContactData.map)
      }

    },
    //客户关联项目图初始化
    async customerProjectInit (init,state) {
      if (state == '状态'){
        this.personData('projectMapParamSalesman',this.projectMapParam.content.where.isleave)
        this.projectMapParam.content.username = ''
        this.projectMapParam.content.dataid = this.projectMapParam.content.type == 0 || this.projectMapParam.content.type == ''  ? -1:this.projectMapParam.content.dataid
      }
      let res = await this.$api.requested(this.projectMapParam)
      this.customerProjectData.map = res.data
      this.customerProjectData.map = this.customerProjectData.map.map(item=>{
        return {
          ratio: item.ratio,
          key:this.$t(item.key),
          value: item.value,
          totalqty: item.totalqty
        }
      })
      console.log(this.customerProjectData,'关联项目数据');
      if (init) {
        this.customerProjectMap = new Pie(this.$refs.customerProjectEl, {
          appendPadding: 10,
          data:this.customerProjectData.map,
          angleField: 'ratio',
          colorField: 'key',
          radius: 1,
          innerRadius: 0.64,
          label:{
            formatter: (datum) => `${datum.ratio}%`
          },
          tooltip:{
            formatter: (datum) => {
              return { name: datum.key, value: datum.ratio + '%' };
            },
          },
          statistic: {
            title: {
              offsetY: -4,
              style: {
                fontSize:'16px'
              },
              content:this.$t('客户总数')
            },
            content: {
              offsetY: 4,
              style: {
                whiteSpace: 'pre-wrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                fontSize:'16px'
              },
              customHtml: (container, view, datum, data) => {
                const text = data[0].totalqty
                return text
              },
            },
          },
          legend: {
            position:'bottom'
          },
          // 添加 中心统计文本 交互
          interactions: [{ type: 'element-single-selected' }, { type: 'element-active' }],
        });
        this.customerProjectMap.on('element:click',(v) => {
          if (v.data.data.key != this.projectTableParam.content.where.isproject) {
            this.projectTableParam.content.where.isproject = v.data.data.key
            this.projectTableParam.content.pageNumber = 1
            this.$refs.customerProjectTable.listData()
          } else {
            this.projectTableParam.content.where.isproject = ''
            this.projectTableParam.content.pageNumber = 1
            this.$refs.customerProjectTable.listData()
          }
        })
        this.customerProjectMap.render();
      } else {
        this.customerProjectMap.changeData(this.customerProjectData.map)
      }

    },
    //客户跟进情况图初始化
    async customerFllowInit (init,state) {
      let param = JSON.parse(JSON.stringify(this.fllowMapParam))
      if (state == '状态'){
        this.personData('fllowMapParamSalesman',this.fllowMapParam.content.where.isleave)
        this.fllowMapParam.content.username = ''
        param.content.dataid = param.content.type == 0 || param.content.type == ''  ? -1:param.content.dataid
      }
      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.customerFllowData.map = res.data
      this.customerFllowData.map = this.customerFllowData.map.map(item=>{
        return {
          ratio: item.ratio,
          key:this.$t(item.key),
          value: item.value,
          totalqty: item.totalqty
        }
      })
      if (init) {
        this.customerFllowMap = new Pie(this.$refs.customerFllowEl, {
          appendPadding: 10,
          data:this.customerFllowData.map,
          angleField: 'ratio',
          colorField: 'key',
          radius: 1,
          innerRadius: 0.64,
          label:{
            formatter: (datum) => `${datum.ratio}%`
          },
          tooltip:{
            formatter: (datum) => {
              return { name: datum.key, value: datum.ratio + '%' };
            },
          },
          statistic: {
            title: {
              offsetY: -4,
              style: {
                fontSize:'16px'
              },
              content:this.$t('客户总数')
            },
            content: {
              offsetY: 4,
              style: {
                whiteSpace: 'pre-wrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                fontSize:'16px'
              },
              customHtml: (container, view, datum, data) => {
                const text = data[0].totalqty
                return text
              },
            },
          },
          legend: {
            position:'bottom'
          },
          // 添加 中心统计文本 交互
          interactions: [{ type: 'element-single-selected' }, { type: 'element-active' }],
        });
        this.customerFllowMap.on('element:click',(v) => {
          if (v.data.data.key != this.fllowTableParam.content.where.isfollowup) {
            this.fllowTableParam.content.where.isfollowup = v.data.data.key
            this.fllowTableParam.content.pageNumber = 1
            this.$refs.customerFllowTable.listData()
          } else {
            this.fllowTableParam.content.where.isfollowup = ''
            this.fllowTableParam.content.pageNumber = 1
            this.$refs.customerFllowTable.listData()
          }
        })
        this.customerFllowMap.render();
      } else {
        this.customerFllowMap.changeData(this.customerFllowData.map)
      }

    },
    //客户未跟进情况图初始化
    async customerUnfllowInit (init,state) {
      if (state == '状态'){
        this.personData('unfllowMapParamSalesman',this.unfllowMapParam.content.where.isleave)
        this.unfllowMapParam.content.username = ''
        this.unfllowMapParam.content.dataid = this.unfllowMapParam.content.type == 0 || this.unfllowMapParam.content.type == ''  ? -1:this.unfllowMapParam.content.dataid
      }
      this.unfllowMapParam.content.date = new Date().getTime()
      let res = await this.$api.requested(this.unfllowMapParam)
      this.customerUnfllowData.map = res.data
      this.customerUnfllowData.map = this.customerUnfllowData.map.map(item=>{
        return {
          datetype: this.$t(item.datetype),
          key:this.$t(item.key),
          value: item.value,
          sequence: item.sequence
        }
      })
      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 = ''
            this.unfllowTableParam.content.pageNumber = 1
          } else {
            this.unfllowStatus = v.data.data.datetype
            this.unfllowTableParam.content.where.dateType = v.data.data.datetype
            this.unfllowTableParam.content.pageNumber = 1
          }
          this.$refs.customerUnfllowTable.listData()
        })
        this.customerUnfllowMap.render()
      } else {
        this.customerUnfllowMap.changeData(this.customerUnfllowData.map)
      }

    },
    //客户报价情况图初始化
    async chart3Fun (init,state) {
      let param = JSON.parse(JSON.stringify(this.projectParam))
      if (state == '状态'){
        this.personData('projectParamSalesman',this.projectParam.content.where.isleave)
        this.projectParam.content.username = ''
        param.content.dataid =param.content.type == 0 || param.content.type == ''  ? -1:param.content.dataid
      }
      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.projectMapData = res.data
      this.projectMapData = res.data.map(item=>{
        return {
          date: item.date,
          key:this.$t(item.key),
          value: Math.round((item.value * 100)*100)/100
        }
      })
      if (init) {
        this.projectMap = new Line(this.$refs.chart3, {
          data:this.projectMapData,
          xField: 'date',
          yField: 'value',
          seriesField: 'key',
          xAxis: {
            /*type: 'time',*/
          },
          yAxis: {
            // label: {
            //   // 数值格式化为千分位
            //   formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
            // },
          },
          label:{
            layout: [],
          },
          smooth: true,
        });

        this.projectMap.render()
      } else {
        this.projectMap.changeData(this.projectMapData)
      }
    },
    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) {
      this.person = ''
      let id = val[val.length - 1]
      if (val.length) {
        /*数据总览*/
        this.dataAllParam.content.dataid = id
        this.dataAllParam.content.type = 1
        this.dataAllParam.content.username = ''
        this.dataAllParam.content.dateType = this.dateType
        this.getdataAll()

        this.chartParam1.content.dataid = id
        this.chartParam1.content.type = 1
        this.chartParam1.content.username = ''
        this.chartParam1.content.depname = ''
        this.chart1Fun()

        this.chartParam2.content.dataid = id
        this.chartParam2.content.type = 1
        this.chartParam2.content.username = ''
        this.chart2Fun()

        this.projectParam.content.dataid = id
        this.projectParam.content.type = 1
        this.projectParam.content.username = ''
        this.chart3Fun()

        this.typeMapParam.content.dataid = id
        this.typeMapParam.content.type = 1
        this.customerTypeInit()
        this.typeTableParam.content.dataid = id
        this.typeTableParam.content.type = 1
        this.typeTableParam.content.username = ''
        this.$refs.customerTypeTable.listData()

        this.gradMapParam.content.dataid = id
        this.gradMapParam.content.type = 1
        this.customerGradInit()
        this.gradTableParam.content.dataid = id
        this.gradTableParam.content.type = 1
        this.gradTableParam.content.username = ''


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

        this.projectMapParam.content.dataid = id
        this.projectMapParam.content.type = 1
        this.customerProjectInit()
        this.projectTableParam.content.dataid = id
        this.projectTableParam.content.type = 1
        this.projectTableParam.content.username = ''
        this.$refs.customerProjectTable.listData()

        this.fllowMapParam.content.dataid = id
        this.fllowMapParam.content.type = 1
        this.customerFllowInit()
        this.fllowTableParam.content.dataid = id
        this.fllowTableParam.content.type = 1
        this.fllowTableParam.content.username = ''
        this.$refs.customerFllowTable.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()
      } else {

        let name = JSON.parse(sessionStorage.getItem('accountinfo')).name
        /*数据总览*/
        this.dataAllParam.content.dataid = ''
        this.dataAllParam.content.type = ''
        this.dataAllParam.content.username =name
        this.dataAllParam.content.dateType = this.dateType
        this.getdataAll()

        this.chartParam1.content.dataid = ''
        this.chartParam1.content.type =''
        this.chartParam1.content.username =name
        this.chartParam1.content.depname = ''
        this.chart1Fun()

        this.chartParam2.content.dataid = ''
        this.chartParam2.content.type =''
        this.chartParam2.content.username =name
        this.chart2Fun()

        this.projectParam.content.dataid = ''
        this.projectParam.content.type =''
        this.projectParam.content.username =name
        this.chart3Fun()

        this.typeMapParam.content.dataid = ''
        this.typeMapParam.content.type =''
        this.customerTypeInit()
        this.typeTableParam.content.dataid = ''
        this.typeTableParam.content.type =''
        this.typeTableParam.content.username = name
        this.$refs.customerTypeTable.listData()

        this.gradMapParam.content.dataid = ''
        this.gradMapParam.content.type =''
        this.customerGradInit()
        this.gradTableParam.content.dataid = ''
        this.gradTableParam.content.type =''
        this.gradTableParam.content.username = name
        console.log(this.gradTableParam.content.username,'除非');


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

        this.projectMapParam.content.dataid = ''
        this.projectMapParam.content.type =''
        this.customerProjectInit()
        this.projectTableParam.content.dataid = ''
        this.projectTableParam.content.type =''
        this.projectTableParam.content.username = name
        this.$refs.customerProjectTable.listData()

        this.fllowMapParam.content.dataid = ''
        this.fllowMapParam.content.type =''
        this.customerFllowInit()
        this.fllowTableParam.content.dataid = ''
        this.fllowTableParam.content.type =''
        this.fllowTableParam.content.username = name
        this.$refs.customerFllowTable.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()
      }
    },
    selectPerson(id){
      this.depment = ''
      this.dataAllParam.content.dataid = id
      this.dataAllParam.content.type = 0
      this.dataAllParam.content.username = this.person
      this.dataAllParam.content.dateType = this.dateType
      this.getdataAll()

      this.chartParam1.content.dataid = id
      this.chartParam1.content.type = 0
      this.chartParam1.content.username = this.person
      this.chartParam1.content.depname = ''
      this.chart1Fun()

      this.chartParam2.content.dataid = id
      this.chartParam2.content.type = 0
      this.chartParam2.content.username = this.person
      this.chart2Fun()

      this.projectParam.content.dataid = id
      this.projectParam.content.type = 0
      this.projectParam.content.username = this.person
      this.chart3Fun()

      this.typeMapParam.content.dataid = id
      this.typeMapParam.content.type = 0
      this.customerTypeInit()
      this.typeTableParam.content.dataid = id
      this.typeTableParam.content.type = 0
      this.typeTableParam.content.username = this.person
      this.$refs.customerTypeTable.listData()

      this.gradMapParam.content.dataid = id
      this.gradMapParam.content.type = 0
      this.customerGradInit()
      this.gradTableParam.content.dataid = id
      this.gradTableParam.content.type = 0
      this.gradTableParam.content.username = this.person


      this.contactMapParam.content.dataid = id
      this.contactMapParam.content.type = 0
      this.customerContactInit()
      this.contactTableParam.content.dataid = id
      this.contactTableParam.content.type = 0
      this.contactTableParam.content.username = this.person
      this.$refs.customerContactTable.listData()

      this.projectMapParam.content.dataid = id
      this.projectMapParam.content.type = 0
      this.customerProjectInit()
      this.projectTableParam.content.dataid = id
      this.projectTableParam.content.type = 0
      this.projectTableParam.content.username = this.person
      this.$refs.customerProjectTable.listData()

      this.fllowMapParam.content.dataid = id
      this.fllowMapParam.content.type = 0
      this.customerFllowInit()
      this.fllowTableParam.content.dataid = id
      this.fllowTableParam.content.type = 0
      this.fllowTableParam.content.username = this.person
      this.$refs.customerFllowTable.listData()

      this.unfllowMapParam.content.dataid = id
      this.unfllowMapParam.content.type = 0
      this.customerUnfllowInit()
      this.unfllowTableParam.content.dataid = id
      this.unfllowTableParam.content.type = 0
      this.unfllowTableParam.content.username = this.person
      this.$refs.customerUnfllowTable.listData()
    },
    leaveChange(){

      this.dataAllParam.content.where.isleave = this.isleave
      this.dataAllParam.content.dateType = this.dateType
      this.person = ''
      this.dataAllParam.content.dataid = this.dataAllParam.content.type == 0?-1:this.dataAllParam.content.dataid
      this.getdataAll()

      this.chartParam1.content.where.isleave = this.isleave
      this.chartParam1.content.username = ''
      this.chartParam1.content.dataid = this.chartParam1.content.type == 0?-1:this.chartParam1.content.dataid
      this.chart1Fun()

      this.chartParam2.content.where.isleave = this.isleave
      this.chartParam2.content.username = ''
      this.chartParam2.content.dataid = this.chartParam2.content.type == 0?-1:this.chartParam2.content.dataid
      this.chart2Fun()

      this.projectParam.content.where.isleave = this.isleave
      this.projectParam.content.username = ''
      this.projectParam.content.dataid = this.projectParam.content.type == 0?-1:this.projectParam.content.dataid
      this.chart3Fun()

      this.typeTableParam.content.where.isleave = this.isleave
      this.typeTableParam.content.username = ''
      this.typeTableParam.content.dataid = this.typeTableParam.content.type == 0?-1:this.typeTableParam.content.dataid
      this.$refs.customerTypeTable.listData()


      this.typeMapParam.content.where.isleave = this.isleave
      this.typeMapParam.content.username = ''
      this.typeMapParam.content.dataid = this.typeMapParam.content.type == 0?-1:this.typeMapParam.content.dataid
      this.customerTypeInit()

      this.gradMapParam.content.where.isleave = this.isleave
      this.gradMapParam.content.username = ''
      this.gradMapParam.content.dataid = this.gradMapParam.content.type == 0?-1:this.gradMapParam.content.dataid
      this.customerGradInit()

      this.gradTableParam.content.where.isleave = this.isleave
      this.gradTableParam.content.username = ''
      this.gradTableParam.content.dataid = this.gradTableParam.content.type == 0?-1:this.gradTableParam.content.dataid
      this.$refs.customerGradTable.listData()

      this.contactMapParam.content.where.isleave = this.isleave
      this.contactMapParam.content.username = ''
      this.contactMapParam.content.dataid = this.contactMapParam.content.type == 0?-1:this.contactMapParam.content.dataid
      this.customerContactInit()

      this.contactTableParam.content.where.isleave = this.isleave
      this.contactTableParam.content.username = ''
      this.contactTableParam.content.dataid = this.contactTableParam.content.type == 0?-1:this.contactTableParam.content.dataid
      this.$refs.customerContactTable.listData()

      this.projectMapParam.content.where.isleave = this.isleave
      this.projectMapParam.content.username = ''
      this.projectMapParam.content.dataid = this.projectMapParam.content.type == 0?-1:this.projectMapParam.content.dataid
      this.customerProjectInit()

      this.projectTableParam.content.where.isleave = this.isleave
      this.projectTableParam.content.username = ''
      this.projectTableParam.content.dataid = this.projectTableParam.content.type == 0?-1:this.projectTableParam.content.dataid
      this.$refs.customerProjectTable.listData()

      this.fllowMapParam.content.where.isleave = this.isleave
      this.fllowMapParam.content.username = ''
      this.fllowMapParam.content.dataid = this.fllowMapParam.content.type == 0?-1:this.fllowMapParam.content.dataid
      this.customerFllowInit()

      this.fllowTableParam.content.where.isleave = this.isleave
      this.fllowTableParam.content.username = ''
      this.fllowTableParam.content.dataid = this.fllowTableParam.content.type == 0?-1:this.fllowTableParam.content.dataid
      this.$refs.customerFllowTable.listData()

      this.unfllowMapParam.content.where.isleave = this.isleave
      this.unfllowMapParam.content.username = ''
      this.unfllowMapParam.content.dataid = this.unfllowMapParam.content.type == 0?-1:this.unfllowMapParam.content.dataid
      this.customerUnfllowInit()

      this.unfllowTableParam.content.where.isleave = this.isleave
      this.unfllowTableParam.content.username = ''
      this.unfllowTableParam.content.dataid = this.unfllowTableParam.content.type == 0?-1:this.unfllowTableParam.content.dataid
      this.$refs.customerUnfllowTable.listData()

      this.personDataAll()
    },
    async getCustomerType () {
      const siteid = JSON.parse(sessionStorage.getItem('active_account')).siteid
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.optiontype.optiontype",
        "method": "optiontypeselect",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "typename": "customertypemx",
          "parameter": {
            "siteid": siteid
          }
        }
      })
      this.customerTypeList = res.data
      console.log(this.customerTypeList,'客户类型');

      this.$store.dispatch('optiontypeselect','agentgrade').then(res=>{
        this.customerGrade = res.data
      })
    },
    /*获取新的业务员列表*/
    async personDataAll(){
      let param = {
        id: 20230620102004,
        content: {
          isleave:this.isleave
        },
      }
      const res = await this.$api.requested(param)
      this.personnelList = res.data.hr
      this.chartParam1Salesman = res.data.hr
      this.chartParam2Salesman = res.data.hr
      this.projectParamSalesman = res.data.hr
      this.typeMapParamSalesman = res.data.hr
      this.gradMapParamSalesman = res.data.hr
      this.contactMapParamSalesman = res.data.hr
      this.projectMapParamSalesman = res.data.hr
      this.fllowMapParamSalesman = res.data.hr
      this.unfllowMapParamSalesman = res.data.hr

    },
    /*获取新的业务员列表*/
    async personData(keyName,isleave){
      let param = {
        id: 20230620102004,
        content: {
          isleave:isleave
        },
      }
      const res = await this.$api.requested(param)
      this[keyName] = res.data.hr
    },
    /*全屏*/
    onFull(){
      this.isFull = true
    },
    /*退出全屏*/
    backFull(){
      this.isFull = false
    },
    onClick(title){
      this.title = this.dateType + '_' + title
      this.paramDetail.content.dataid = this.person?this.person == this.userName?JSON.parse(sessionStorage.getItem('active_account')).userid:this.person:this.depment[0]
      this.paramDetail.content.type = this.person?'0':'1'
      this.paramDetail.content.typemx = title
      this.paramDetail.content.where.isleave = this.isleave
      this.paramDetail.content.dateType = this.dateType
      this.$refs.detailRef.onShow()
    },
    /*标签列表*/
    async tagList(){
      const res = await this.$api.requested({
        "id":20221013104401,
        "content":{
          "isExport":1,
          "pageNumber":1,
          "pageSize":100,
          "sys_systemtagid":2,
          "where":{
            "condition":""
          }
        }
      })
      this.option.tagData = this.unique(res.data)
    },
    /*去重*/
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.tag) && res.set(arr.tag, 1));
    },
    selectChange(){
      this.paramDetail.content.pageNumber = 1
      this.$refs.detailRef.listData()
    },
  },
  async mounted () {
    this.departmentrtment()
    this.getdataAll()
    this.chart1Fun(true)
    this.chart2Fun(true)
    this.customerTypeInit(true)
    this.customerGradInit(true)
    this.customerContactInit(true)
    this.customerProjectInit(true)
    this.customerFllowInit(true)
    this.customerUnfllowInit(true)
    this.chart3Fun(true)
    this.getCustomerType()
    this.tagList()
    let baseWidth = 1920
    document.querySelector('html').style.fontSize = `${100 / baseWidth}vw`

    /* 获取客户等级 */
    let res2 = await this.$store.dispatch('optiontypeselect','customergrade')
    this.customerLead = res2.data
    console.log(this.customerLead,'客户等级');

    /*客户类型*/
    let res3 = await this.$store.dispatch('optiontypeselect','customertypemx')
    this.option.typeData = res3.data



    console.log(`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`);

    var that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        window.fullWidth = document.documentElement.clientWidth;
        that.windowWidth = window.fullWidth; // 宽
        console.log(that.windowWidth,'屏幕宽度')
      })()
    };
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).customerDetail.tablecols
  }
}

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

*{
  box-sizing: border-box;
}
.data-all {
  padding: 16px;
  width: 100%;
  border-radius: 5rem;
  border: 1rem;
  box-shadow: 0rem 2rem 5rem 0rem rgba(0, 0, 0, 0.15);
  background: #FFFFFF;
  margin-top: 16px;
}
.data-all .data-left {
  border-right: 1rem solid rgb(136,136,146);
  display: flex;
  flex-wrap: wrap;
}
.data-all .data-right {
  padding-left: 50rem;
  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 {
  padding: 16px;
  margin-top: 16px;
  height: 500px;
  border-radius: 5rem;
  border: 1rem;
  box-shadow: 0rem 2rem 5rem 0rem rgba(0, 0, 0, 0.15);
  background: #FFFFFF;
}
.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-wrapper {
  background:#ffffff;
  height: 100%;
}
.panel-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(100% - 53px);
}
.panel-content div:first-child {
  padding: 0 5px;
}
.search__label {
  margin-right: 5px !important;
}
.mt-10 {
  margin-right: 15px !important;
}
.panel-table {
  height: 100%;
}
.div-hover-click:hover {
  color: #3874f6;
}
</style>