|
|
@@ -0,0 +1,1913 @@
|
|
|
+
|
|
|
+<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">返回顶部</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 class=" inline-16">
|
|
|
+ <label class="search__label" >部门:</label>
|
|
|
+ <el-cascader
|
|
|
+ ref="selectdep"
|
|
|
+ size="small"
|
|
|
+ v-model="depment"
|
|
|
+ :options="deplist"
|
|
|
+ :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"
|
|
|
+ @change="selectDep"
|
|
|
+ clearable
|
|
|
+ ></el-cascader>
|
|
|
+ </div>
|
|
|
+ <div class="data-all">
|
|
|
+ <div style="margin-bottom:20px">客户</div>
|
|
|
+ <div class="data-all-wrapper">
|
|
|
+ <div class="data-left">
|
|
|
+ <div class="data-item">
|
|
|
+ <p>{{ tool.formatAmount(dataAll.total)|| 0 }}</p>
|
|
|
+ <p>客户总数</p>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <p>{{ tool.formatAmount(dataAll.tradedCustomers)}}</p>
|
|
|
+ <p>
|
|
|
+ 成交客户数
|
|
|
+ <el-tooltip class="item" effect="dark" content="成交客户：已成交状态的客户数量" placement="top">
|
|
|
+ <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
|
|
|
+ </el-tooltip>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <p>{{ tool.formatAmount(dataAll.participateProject) }}</p>
|
|
|
+ <p>
|
|
|
+ 参与项目客户数
|
|
|
+ <el-tooltip class="item" effect="dark" content="参与项目客户数：参与有下订单的项目的关联客户数" placement="top">
|
|
|
+ <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
|
|
|
+ </el-tooltip>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="data-right">
|
|
|
+ <div class="data-item" v-for="item in dataAll.data" :key="item.rowindex">
|
|
|
+ <p>{{ tool.formatAmount(item.qty) }}</p>
|
|
|
+ <p>
|
|
|
+ {{ item.value}}
|
|
|
+ <el-tooltip class="item" effect="dark" content="无分类客户数：统计没有客户分类信息的客户数量" placement="top" v-if="item.value == '无分类客户'">
|
|
|
+ <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip class="item" effect="dark" content="A核心客户：客户分类为A核心客户的数量" placement="top" v-else-if="item.value == 'A核心客户'">
|
|
|
+ <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip class="item" effect="dark" content="B重要客户：客户分类为B重要客户的数量" placement="top" v-else-if="item.value == 'B重要客户'">
|
|
|
+ <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip class="item" effect="dark" content="C普通客户：客户分类为C普通客户的数量" placement="top" v-else-if="item.value == 'C普通客户'">
|
|
|
+ <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip class="item" effect="dark" content="D一般客户：客户分类为D一般客户的数量" placement="top" v-else-if="item.value == 'D一般客户'">
|
|
|
+ <img style="vertical-align: middle" src="@/assets/icons/prompt_icon.svg" alt="">
|
|
|
+ </el-tooltip>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!--12月客户新增-->
|
|
|
+ <div class="data-panel" id="customerAdd">
|
|
|
+ <div class="panel-content-wrapper" >
|
|
|
+ <div class="panel-header">
|
|
|
+ <div class="title">近12月客户新增分析</div>
|
|
|
+ <div class="panel-select">
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <label class="search__label" >部门:</label>
|
|
|
+ <el-cascader
|
|
|
+ :append-to-body="false"
|
|
|
+ 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" >业务员:</label>
|
|
|
+ <el-select v-model="chartParam1.content.username" filterable placeholder="请选择" 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 personnelList"
|
|
|
+ :key="item.index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.userid">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="mt-10 inline-15">
|
|
|
+ <label class="search__label" >分析日期:</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="选择日期"
|
|
|
+ @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="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">客户类型情况统计</div>
|
|
|
+ <div class="panel-select">
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <label class="search__label" >部门:</label>
|
|
|
+ <el-cascader
|
|
|
+ :append-to-body="false"
|
|
|
+ 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" >业务员:</label>
|
|
|
+ <el-select v-model="typeTableParam.content.username" filterable placeholder="请选择" 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 personnelList"
|
|
|
+ :key="item.index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.userid">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </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">
|
|
|
+ <div ref="customerTypeEl" style="width:30%"></div>
|
|
|
+ <div class="panel-table" style="width:70%">
|
|
|
+ <pageTable
|
|
|
+ ref="customerTypeTable"
|
|
|
+ :tablecols="tool.tabelCol($route.name).typeTable.tablecols"
|
|
|
+ :param="typeTableParam"
|
|
|
+ :custom="true"
|
|
|
+ >
|
|
|
+ <template v-slot:custom="scope">
|
|
|
+ <div v-if="scope.data.columnname == 'sys_tag'">
|
|
|
+ <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname == 'operation'">
|
|
|
+ <el-button type="text" size="small" @click="goDetail(scope.data.data)" :disabled="isFull">详情</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'industry'">
|
|
|
+ <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'tradingstatus'">
|
|
|
+ <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'status'">
|
|
|
+ <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '潜在'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '合作中'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已终止'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname == 'scale'">
|
|
|
+ {{scope.data.data.scale ? scope.data.data.scale + scope.data.data.unitname : '' }}
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ scope.data.data[scope.data.columnname] }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </pageTable>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--客户等级-->
|
|
|
+ <div class="data-panel" id="customerGrad">
|
|
|
+ <div class="panel-content-wrapper" >
|
|
|
+ <div class="panel-header">
|
|
|
+ <div class="title">客户等级情况统计</div>
|
|
|
+ <div class="panel-select">
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <label class="search__label" >部门:</label>
|
|
|
+ <el-cascader
|
|
|
+ :append-to-body="false"
|
|
|
+ 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" >业务员:</label>
|
|
|
+ <el-select v-model="gradTableParam.content.username" filterable placeholder="请选择" 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 personnelList"
|
|
|
+ :key="item.index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.userid">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </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">
|
|
|
+ <div ref="customerGradEl" style="width:30%"></div>
|
|
|
+ <div class="panel-table" style="width:70%">
|
|
|
+ <pageTable
|
|
|
+ ref="customerGradTable"
|
|
|
+ :tablecols="tool.tabelCol($route.name).typeTable.tablecols"
|
|
|
+ :param="gradTableParam"
|
|
|
+ :custom="true"
|
|
|
+ >
|
|
|
+ <template v-slot:custom="scope">
|
|
|
+ <div v-if="scope.data.columnname == 'sys_tag'">
|
|
|
+ <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname == 'operation'">
|
|
|
+ <el-button type="text" size="small" @click="goDetail(scope.data.data)" :disabled="isFull">详情</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'industry'">
|
|
|
+ <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'tradingstatus'">
|
|
|
+ <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'status'">
|
|
|
+ <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '潜在'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '合作中'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已终止'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ 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">客户联系人情况统计</div>
|
|
|
+ <div class="panel-select">
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <label class="search__label" >部门:</label>
|
|
|
+ <el-cascader
|
|
|
+ :append-to-body="false"
|
|
|
+ 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" >业务员:</label>
|
|
|
+ <el-select v-model="contactTableParam.content.username" filterable placeholder="请选择" 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 personnelList"
|
|
|
+ :key="item.index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.userid">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </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">
|
|
|
+ <div ref="customerContactEl" style="width:30%"></div>
|
|
|
+ <div class="panel-table" style="width:70%">
|
|
|
+ <pageTable
|
|
|
+ ref="customerContactTable"
|
|
|
+ :tablecols="tool.tabelCol($route.name).typeTable.tablecols"
|
|
|
+ :param="contactTableParam"
|
|
|
+ :custom="true"
|
|
|
+ >
|
|
|
+ <template v-slot:custom="scope">
|
|
|
+ <div v-if="scope.data.columnname == 'sys_tag'">
|
|
|
+ <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname == 'operation'">
|
|
|
+ <el-button type="text" size="small" @click="goDetail(scope.data.data)" :disabled="isFull">详情</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'industry'">
|
|
|
+ <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'tradingstatus'">
|
|
|
+ <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'status'">
|
|
|
+ <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '潜在'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '合作中'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已终止'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ 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">客户关联项目情况统计</div>
|
|
|
+ <div class="panel-select">
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <label class="search__label" >部门:</label>
|
|
|
+ <el-cascader
|
|
|
+ :append-to-body="false"
|
|
|
+ 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();customerFllowInit()} else {projectMapParam.content.type='';projectMapParam.content.dataid='';projectTableParam.content.dataid='';projectTableParam.content.type='';projectTableParam.content.username='';projectTableParam.content.pageNumber = 1;$refs.customerProjectTable.listData();customerFllowInit()}}"></el-cascader>
|
|
|
+ </div>
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <label class="search__label" >业务员:</label>
|
|
|
+ <el-select v-model="projectTableParam.content.username" filterable placeholder="请选择" 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();customerFllowInit()} else {projectMapParam.content.type='';projectMapParam.content.dataid='';projectTableParam.content.dataid='';projectTableParam.content.type='';projectTableParam.content.depname='';projectTableParam.content.pageNumber = 1;$refs.customerProjectTable.listData();customerFllowInit()}}"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in personnelList"
|
|
|
+ :key="item.index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.userid">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="mt-10 inline-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">
|
|
|
+ <div ref="customerProjectEl" style="width:30%"></div>
|
|
|
+ <div class="panel-table" style="width:70%">
|
|
|
+ <pageTable
|
|
|
+ ref="customerProjectTable"
|
|
|
+ :tablecols="tool.tabelCol($route.name).typeTable.tablecols"
|
|
|
+ :param="projectTableParam"
|
|
|
+ :custom="true"
|
|
|
+ >
|
|
|
+ <template v-slot:custom="scope">
|
|
|
+ <div v-if="scope.data.columnname == 'sys_tag'">
|
|
|
+ <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname == 'operation'">
|
|
|
+ <el-button type="text" size="small" @click="goDetail(scope.data.data)" :disabled="isFull">详情</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'industry'">
|
|
|
+ <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'tradingstatus'">
|
|
|
+ <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'status'">
|
|
|
+ <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '潜在'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '合作中'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已终止'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ 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">客户跟进情况统计</div>
|
|
|
+ <div class="panel-select">
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <label class="search__label" >部门:</label>
|
|
|
+ <el-cascader
|
|
|
+ :append-to-body="false"
|
|
|
+ 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" >业务员:</label>
|
|
|
+ <el-select v-model="fllowTableParam.content.username" filterable placeholder="请选择" 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 personnelList"
|
|
|
+ :key="item.index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.userid">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </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">
|
|
|
+ <div ref="customerFllowEl" style="width:30%"></div>
|
|
|
+ <div class="panel-table" style="width:70%">
|
|
|
+ <pageTable
|
|
|
+ ref="customerFllowTable"
|
|
|
+ :tablecols="tool.tabelCol($route.name).typeTable.tablecols"
|
|
|
+ :param="fllowTableParam"
|
|
|
+ :custom="true"
|
|
|
+ >
|
|
|
+ <template v-slot:custom="scope">
|
|
|
+ <div v-if="scope.data.columnname == 'sys_tag'">
|
|
|
+ <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname == 'operation'">
|
|
|
+ <el-button type="text" size="small" @click="goDetail(scope.data.data)" :disabled="isFull">详情</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'industry'">
|
|
|
+ <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'tradingstatus'">
|
|
|
+ <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'status'">
|
|
|
+ <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '潜在'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '合作中'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已终止'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ 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">近12月客户跟进分析</div>
|
|
|
+ <div class="panel-select">
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <label class="search__label" >部门:</label>
|
|
|
+ <el-cascader
|
|
|
+ :append-to-body="false"
|
|
|
+ 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" >业务员:</label>
|
|
|
+ <el-select v-model="chartParam2.content.username" filterable placeholder="请选择" 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 personnelList"
|
|
|
+ :key="item.index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.userid">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="mt-10 inline-15">
|
|
|
+ <label class="search__label" >分析日期:</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="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">有效客户未跟进天数分析</div>
|
|
|
+ <div class="panel-select">
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <label class="search__label" >部门:</label>
|
|
|
+ <el-cascader
|
|
|
+ :append-to-body="false"
|
|
|
+ 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" >业务员:</label>
|
|
|
+ <el-select v-model="unfllowTableParam.content.username" filterable placeholder="请选择" 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 personnelList"
|
|
|
+ :key="item.index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.userid">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <label class="search__label" >客户类型:</label>
|
|
|
+ <el-select v-model="unfllowTableParam.content.where.type" placeholder="请选择" 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="item.value"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <label class="search__label" >客户等级:</label>
|
|
|
+ <el-select v-model="unfllowTableParam.content.where.grade" placeholder="请选择" 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="item.value"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <label class="search__label" >成交状态:</label>
|
|
|
+ <el-select v-model="unfllowTableParam.content.where.tradingstatus" placeholder="请选择" 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="item.value"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <label class="search__label" >分析日期:</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">{{ unfllowStatus ? unfllowStatus : '全部' }}</div>
|
|
|
+ <div :style="{height:windowWidth>1521 || isFull?'calc(70% - 100px)':'calc(66% - 100px)'}">
|
|
|
+ <pageTable
|
|
|
+ ref="customerUnfllowTable"
|
|
|
+ :tablecols="tool.tabelCol($route.name).typeTable1.tablecols.splice(0,tool.tabelCol($route.name).typeTable1.tablecols.length - 1)"
|
|
|
+ :param="unfllowTableParam"
|
|
|
+ :custom="true"
|
|
|
+ >
|
|
|
+ <template v-slot:custom="scope">
|
|
|
+ <div v-if="scope.data.columnname == 'sys_tag'">
|
|
|
+ <el-tag size="small" v-for="(item,index) in scope.data.data.sys_tag" :key="index">{{ item }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname == 'operation'">
|
|
|
+ <el-button type="text" size="small" @click="goDetail(scope.data.data)">详情</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'industry'">
|
|
|
+ <el-tag size="small" v-for="(item,index) in scope.data.data.industry" :key="index">{{ item }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'tradingstatus'">
|
|
|
+ <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '未成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#fa8c16" v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#333333" v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.data.columnname === 'status'">
|
|
|
+ <span style="color:#3874f6" v-if="scope.data.data[[scope.data.columnname]] == '潜在'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#52c41a" v-else-if="scope.data.data[[scope.data.columnname]] == '合作中'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ <span style="color:#999999" v-else-if="scope.data.data[[scope.data.columnname]] == '已终止'">{{scope.data.data[[scope.data.columnname]]}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ 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">近12月客户报价分析</div>
|
|
|
+ <div class="panel-select">
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <label class="search__label" >部门:</label>
|
|
|
+ <el-cascader
|
|
|
+ :append-to-body="false"
|
|
|
+ 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" >业务员:</label>
|
|
|
+ <el-select v-model="projectParam.content.username" filterable placeholder="请选择" 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 personnelList"
|
|
|
+ :key="item.index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.userid">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="mt-10 inline-15">
|
|
|
+ <label class="search__label" >分析日期:</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="height:calc(100% - 55px)"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </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'
|
|
|
+export default {
|
|
|
+ name:'customerData',
|
|
|
+ components:{borderTemp,pageTable,FullScroll,exportFile},
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ isFull:false,
|
|
|
+ deplist:[],
|
|
|
+ personnelList:[],
|
|
|
+ windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
|
|
|
+ depmentParam:{
|
|
|
+ "id": 20230620102004,
|
|
|
+ "content": {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ customerLead:[],
|
|
|
+ depment:'',
|
|
|
+ dataAll:{
|
|
|
+ data:{}
|
|
|
+ },
|
|
|
+ unfllowStatus:'',
|
|
|
+ person:'',
|
|
|
+ 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()}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //近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()}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //近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()}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //客户类型
|
|
|
+ typeMapParam: {
|
|
|
+ "id": 20231015203704,
|
|
|
+ "content": {
|
|
|
+ "depname":'',
|
|
|
+ "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
|
|
|
+ "type": '',
|
|
|
+ "dataid": ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ typeTableParam:{
|
|
|
+ "id": 20231018164504,
|
|
|
+ "content": {
|
|
|
+ "type": '',
|
|
|
+ "dataid": '',
|
|
|
+ "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
|
|
|
+ "pageSize":20,
|
|
|
+ "pageNumber":1,
|
|
|
+ "where": {
|
|
|
+ "customerstype":""// 客户各种类型 以及 无类型 ------ 客户类型情况统计列表使用该字段
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ customerTypeData:{
|
|
|
+ map:[],
|
|
|
+ table:[]
|
|
|
+ },
|
|
|
+ //客户等级
|
|
|
+ customerGradMap:'',
|
|
|
+ gradMapParam: {
|
|
|
+ "id": 20231017140904,
|
|
|
+ "content": {
|
|
|
+ "depname":'',
|
|
|
+ "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
|
|
|
+ "type": '',
|
|
|
+ "dataid": ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ gradTableParam:{
|
|
|
+ "id": 20231018164504,
|
|
|
+ "content": {
|
|
|
+ "type": '',
|
|
|
+ "dataid": '',
|
|
|
+ "pageSize":20,
|
|
|
+ "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
|
|
|
+ "pageNumber":1,
|
|
|
+ "where": {
|
|
|
+ "grade": "", // 1 2 3 4 5 无等级 ------客户等级统计列表使用该字段
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ customerGradData:{
|
|
|
+ map:[],
|
|
|
+ table:[]
|
|
|
+ },
|
|
|
+ //客户联系人
|
|
|
+ customerContactMap:'',
|
|
|
+ contactMapParam: {
|
|
|
+ "id": 20231017141904,
|
|
|
+ "content": {
|
|
|
+ "depname":'',
|
|
|
+ "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
|
|
|
+ "type": '',
|
|
|
+ "dataid": ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ contactTableParam:{
|
|
|
+ "id": 20231018164504,
|
|
|
+ "content": {
|
|
|
+ "type": '',
|
|
|
+ "dataid": '',
|
|
|
+ "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
|
|
|
+ "pageSize":20,
|
|
|
+ "pageNumber":1,
|
|
|
+ "where": {
|
|
|
+ "iscontacts": "", //无联系人 有联系人 ------客户联系人情况统计列表使用该字段
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ customerContactData:{
|
|
|
+ map:[],
|
|
|
+ table:[]
|
|
|
+ },
|
|
|
+ //客户关联项目
|
|
|
+ customerProjectMap:'',
|
|
|
+ projectMapParam: {
|
|
|
+ "id": 20231017143504,
|
|
|
+ "content": {
|
|
|
+ "depname":'',
|
|
|
+ "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
|
|
|
+ "type": '',
|
|
|
+ "dataid": ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ projectTableParam:{
|
|
|
+ "id": 20231018164504,
|
|
|
+ "content": {
|
|
|
+ "type": '',
|
|
|
+ "dataid": '',
|
|
|
+ "pageSize":20,
|
|
|
+ "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
|
|
|
+ "pageNumber":1,
|
|
|
+ "where": {
|
|
|
+ "isproject": "", //无关联项目 有关联项目 ------客户关联项目情况统计列表使用该字段
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ customerProjectData:{
|
|
|
+ map:[],
|
|
|
+ table:[]
|
|
|
+ },
|
|
|
+ //客户跟进情况
|
|
|
+ customerFllowMap:'',
|
|
|
+ fllowMapParam: {
|
|
|
+ "id": 20231017151304,
|
|
|
+ "content": {
|
|
|
+ "depname":'',
|
|
|
+ "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
|
|
|
+ "type": '',
|
|
|
+ "dataid": ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fllowTableParam:{
|
|
|
+ "id": 20231018164504,
|
|
|
+ "content": {
|
|
|
+ "type": '',
|
|
|
+ "dataid": '',
|
|
|
+ "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
|
|
|
+ "pageSize":20,
|
|
|
+ "pageNumber":1,
|
|
|
+ "where": {
|
|
|
+ "isfollowup": "", // 有跟进 无跟进------客户跟进情况统计列表使用该字段
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ customerFllowData:{
|
|
|
+ map:[],
|
|
|
+ table:[]
|
|
|
+ },
|
|
|
+ //未跟进情况
|
|
|
+ customerUnfllowMap:'',
|
|
|
+ unfllowMapParam: {
|
|
|
+ "id": 20231017162504,
|
|
|
+ "content": {
|
|
|
+ "type": '',
|
|
|
+ "dataid": '',
|
|
|
+ "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
|
|
|
+ "dataType":"",// 默认为 客户类型
|
|
|
+ "where": {
|
|
|
+ "tradingstatus": "",//成交状态
|
|
|
+ "type": "",//客户类型
|
|
|
+ "grade": ""//客户等级
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ unfllowTableParam:{
|
|
|
+ "id": 20231018093704,
|
|
|
+ "content": {
|
|
|
+ "type": '',
|
|
|
+ "dataid": '',
|
|
|
+ "username":JSON.parse(sessionStorage.getItem('accountinfo')).name,
|
|
|
+ "pageSize":20,
|
|
|
+ "pageNumber":1,
|
|
|
+ "where": {
|
|
|
+ "tradingstatus": "",//成交状态
|
|
|
+ "type": "",//客户类型
|
|
|
+ "grade": "",//客户等级
|
|
|
+ "dateType": ""// 时间阶段
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ customerUnfllowData:{
|
|
|
+ map:[],
|
|
|
+ table:[]
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ goDetail (data) {
|
|
|
+ this.$router.push({
|
|
|
+ path:'/customerDetail',
|
|
|
+ query:{
|
|
|
+ id:data.sa_customersid,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$store.dispatch('changeDetailDrawer',true)
|
|
|
+ },
|
|
|
+ //获取数据总览
|
|
|
+ async getdataAll () {
|
|
|
+ let res = await this.$api.requested({
|
|
|
+ id:20231015170504,
|
|
|
+ content:{}
|
|
|
+ })
|
|
|
+ this.dataAll = res.data
|
|
|
+ console.log(this.dataAll,'数据总览');
|
|
|
+ },
|
|
|
+ async departmentrtment() {
|
|
|
+ const res = await this.$api.requested(this.depmentParam)
|
|
|
+ this.deplist = this.createMenu(res.data.dep)
|
|
|
+ this.personnelList = res.data.hr
|
|
|
+ },
|
|
|
+ //12月新增初始化
|
|
|
+ async chart1Fun (init) {
|
|
|
+ let param = JSON.parse(JSON.stringify(this.chartParam1))
|
|
|
+ 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
|
|
|
+ /*res.data.lineChart.forEach(item => item[`同比增长率`] = item.value)*/
|
|
|
+ this.transformData = res.data.lineChart
|
|
|
+ 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',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ geometry: 'line',
|
|
|
+ lineStyle: {
|
|
|
+ lineWidth: 2,
|
|
|
+ },
|
|
|
+ seriesField: 'key',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ formatter: (datum) => {
|
|
|
+ return { name: datum.key, value: datum.key == '同比增长率'? datum.value + '%' : datum.value };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.dualAxes.render()
|
|
|
+ } else {
|
|
|
+ this.dualAxes.changeData([this.uvBillData,this.transformData])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //12月跟进初始化
|
|
|
+ async chart2Fun (init) {
|
|
|
+ let param = JSON.parse(JSON.stringify(this.chartParam2))
|
|
|
+ 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
|
|
|
+ /* this.chartMapData.tbzzl.forEach(item => item.key = '同比增长率(%)')*/
|
|
|
+ if (init) {
|
|
|
+ this.chartMap = new DualAxes(this.$refs.chart2, {
|
|
|
+ data: [this.chartMapData.followup, this.chartMapData.tbzzl],
|
|
|
+ xField: 'date',
|
|
|
+ yField: ['value', 'value'],
|
|
|
+ geometryOptions: [
|
|
|
+ {
|
|
|
+ geometry: 'column',
|
|
|
+ seriesField:'key',
|
|
|
+ isGroup: 'true',
|
|
|
+ color: '#5B8FF9',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ geometry: 'line',
|
|
|
+ seriesField:'key',
|
|
|
+ color: '#5AD8A6',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ formatter: (datum) => {
|
|
|
+ return { name: datum.key, value: datum.key == '同比增长率'? datum.value + '%' : datum.value };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ this.chartMap.render();
|
|
|
+ } else {
|
|
|
+ this.chartMap.changeData([this.chartMapData.followup, this.chartMapData.tbzzl])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //客户类型图初始化
|
|
|
+ async customerTypeInit (init) {
|
|
|
+ let res = await this.$api.requested(this.typeMapParam)
|
|
|
+ this.customerTypeData.map = res.data
|
|
|
+ if (init) {
|
|
|
+ this.customerTypeMap = new Pie(this.$refs.customerTypeEl, {
|
|
|
+ appendPadding: 10,
|
|
|
+ data:this.customerTypeData.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,
|
|
|
+ /*customHtml: (container, view, datum) => {
|
|
|
+ const { width, height } = container.getBoundingClientRect();
|
|
|
+ const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
|
|
|
+ const text = datum ? `${datum.key}` : '客户总数';
|
|
|
+ return this.renderStatistic(d, text, { fontSize: 28 });
|
|
|
+ },*/
|
|
|
+ content:'客户总数'
|
|
|
+ },
|
|
|
+ content: {
|
|
|
+ offsetY: 4,
|
|
|
+ style: {
|
|
|
+ fontSize: '32px',
|
|
|
+ },
|
|
|
+ customHtml: (container, view, datum, data) => {
|
|
|
+ /*const { width } = container.getBoundingClientRect();
|
|
|
+ const text = datum ? `${datum.ratio}%` : data[0].totalqty;
|
|
|
+ return this.renderStatistic(width, text, { fontSize: 32 });*/
|
|
|
+ const text = data[0].totalqty
|
|
|
+ return text
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ position:'left'
|
|
|
+ },
|
|
|
+ // 添加 中心统计文本 交互
|
|
|
+ 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) {
|
|
|
+ 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: 'value',
|
|
|
+ colorField: 'key',
|
|
|
+ radius: 1,
|
|
|
+ innerRadius: 0.64,
|
|
|
+ meta: {
|
|
|
+ value: {
|
|
|
+ formatter: (v) => `${v} ¥`,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label:{
|
|
|
+ formatter: (datum) => `${datum.ratio}%`
|
|
|
+ },
|
|
|
+ statistic: {
|
|
|
+ title: {
|
|
|
+ offsetY: -4,
|
|
|
+ /* customHtml: (container, view, datum) => {
|
|
|
+ const { width, height } = container.getBoundingClientRect();
|
|
|
+ const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
|
|
|
+ const text = datum ? `${datum.key}` : '客户总数';
|
|
|
+ return this.renderStatistic(d, text, { fontSize: 28 });
|
|
|
+ },*/
|
|
|
+ content:'客户总数'
|
|
|
+ },
|
|
|
+ content: {
|
|
|
+ offsetY: 4,
|
|
|
+ style: {
|
|
|
+ fontSize: '32px',
|
|
|
+ },
|
|
|
+ customHtml: (container, view, datum, data) => {
|
|
|
+ /*const { width } = container.getBoundingClientRect();
|
|
|
+ const text = datum ? `${datum.ratio}%` : data[0].totalqty;
|
|
|
+ return this.renderStatistic(width, text, { fontSize: 32 });*/
|
|
|
+ const text = data[0].totalqty
|
|
|
+ return text
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ position:'left'
|
|
|
+ },
|
|
|
+ // 添加 中心统计文本 交互
|
|
|
+ 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) {
|
|
|
+ let res = await this.$api.requested(this.contactMapParam)
|
|
|
+ this.customerContactData.map = res.data
|
|
|
+ console.log(this.customerContactData,'客户数据');
|
|
|
+ if (init) {
|
|
|
+ this.customerContactMap = new Pie(this.$refs.customerContactEl, {
|
|
|
+ appendPadding: 10,
|
|
|
+ data:this.customerContactData.map,
|
|
|
+ angleField: 'value',
|
|
|
+ colorField: 'key',
|
|
|
+ radius: 1,
|
|
|
+ innerRadius: 0.64,
|
|
|
+ meta: {
|
|
|
+ value: {
|
|
|
+ formatter: (v) => `${v} ¥`,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label:{
|
|
|
+ formatter: (datum) => `${datum.ratio}%`
|
|
|
+ },
|
|
|
+ statistic: {
|
|
|
+ title: {
|
|
|
+ offsetY: -4,
|
|
|
+ customHtml: (container, view, datum) => {
|
|
|
+ const { width, height } = container.getBoundingClientRect();
|
|
|
+ const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
|
|
|
+ const text = datum ? `${datum.key}` : '客户总数';
|
|
|
+ return this.renderStatistic(d, text, { fontSize: 28 });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ content: {
|
|
|
+ offsetY: 4,
|
|
|
+ style: {
|
|
|
+ fontSize: '32px',
|
|
|
+ },
|
|
|
+ customHtml: (container, view, datum, data) => {
|
|
|
+ const { width } = container.getBoundingClientRect();
|
|
|
+ const text = datum ? `${datum.ratio}%` : data[0].totalqty;
|
|
|
+ return this.renderStatistic(width, text, { fontSize: 32 });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ position:'left'
|
|
|
+ },
|
|
|
+ // 添加 中心统计文本 交互
|
|
|
+ interactions: [{ type: 'element-single-selected' }, { type: 'element-active' }, { type: 'pie-statistic-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) {
|
|
|
+ let res = await this.$api.requested(this.projectMapParam)
|
|
|
+ this.customerProjectData.map = res.data
|
|
|
+ console.log(this.customerProjectData,'关联项目数据');
|
|
|
+ if (init) {
|
|
|
+ this.customerProjectMap = new Pie(this.$refs.customerProjectEl, {
|
|
|
+ appendPadding: 10,
|
|
|
+ data:this.customerProjectData.map,
|
|
|
+ angleField: 'value',
|
|
|
+ colorField: 'key',
|
|
|
+ radius: 1,
|
|
|
+ innerRadius: 0.64,
|
|
|
+ meta: {
|
|
|
+ value: {
|
|
|
+ formatter: (v) => `${v} ¥`,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label:{
|
|
|
+ formatter: (datum) => `${datum.ratio}%`
|
|
|
+ },
|
|
|
+ statistic: {
|
|
|
+ title: {
|
|
|
+ offsetY: -4,
|
|
|
+ customHtml: (container, view, datum) => {
|
|
|
+ const { width, height } = container.getBoundingClientRect();
|
|
|
+ const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
|
|
|
+ const text = datum ? `${datum.key}` : '客户总数';
|
|
|
+ return this.renderStatistic(d, text, { fontSize: 28 });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ content: {
|
|
|
+ offsetY: 4,
|
|
|
+ style: {
|
|
|
+ fontSize: '32px',
|
|
|
+ },
|
|
|
+ customHtml: (container, view, datum, data) => {
|
|
|
+ const { width } = container.getBoundingClientRect();
|
|
|
+ const text = datum ? `${datum.ratio}%` : data[0].totalqty;
|
|
|
+ return this.renderStatistic(width, text, { fontSize: 32 });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ position:'left'
|
|
|
+ },
|
|
|
+ // 添加 中心统计文本 交互
|
|
|
+ interactions: [{ type: 'element-single-selected' }, { type: 'element-active' }, { type: 'pie-statistic-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) {
|
|
|
+ let param = JSON.parse(JSON.stringify(this.fllowMapParam))
|
|
|
+ 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
|
|
|
+ console.log(this.customerFllowData,'关联项目数据');
|
|
|
+ if (init) {
|
|
|
+ this.customerFllowMap = new Pie(this.$refs.customerFllowEl, {
|
|
|
+ appendPadding: 10,
|
|
|
+ data:this.customerFllowData.map,
|
|
|
+ angleField: 'value',
|
|
|
+ colorField: 'key',
|
|
|
+ radius: 1,
|
|
|
+ innerRadius: 0.64,
|
|
|
+ meta: {
|
|
|
+ value: {
|
|
|
+ formatter: (v) => `${v} ¥`,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label:{
|
|
|
+ formatter: (datum) => `${datum.ratio}%`
|
|
|
+ },
|
|
|
+ statistic: {
|
|
|
+ title: {
|
|
|
+ offsetY: -4,
|
|
|
+ customHtml: (container, view, datum) => {
|
|
|
+ const { width, height } = container.getBoundingClientRect();
|
|
|
+ const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
|
|
|
+ const text = datum ? `${datum.key}` : '客户总数';
|
|
|
+ return this.renderStatistic(d, text, { fontSize: 28 });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ content: {
|
|
|
+ offsetY: 4,
|
|
|
+ style: {
|
|
|
+ fontSize: '32px',
|
|
|
+ },
|
|
|
+ customHtml: (container, view, datum, data) => {
|
|
|
+ const { width } = container.getBoundingClientRect();
|
|
|
+ console.log(data,'总数',datum,'当前');
|
|
|
+ const text = datum ? `${datum.ratio}%` : data[0].totalqty;
|
|
|
+ return this.renderStatistic(width, text, { fontSize: 32 });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ position:'left'
|
|
|
+ },
|
|
|
+ // 添加 中心统计文本 交互
|
|
|
+ interactions: [{ type: 'element-single-selected' }, { type: 'element-active' }, { type: 'pie-statistic-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) {
|
|
|
+ this.unfllowMapParam.content.date = new Date().getTime()
|
|
|
+ let res = await this.$api.requested(this.unfllowMapParam)
|
|
|
+ this.customerUnfllowData.map = res.data
|
|
|
+ console.log(this.customerUnfllowData,'未跟进数据');
|
|
|
+ if (init) {
|
|
|
+ this.customerUnfllowMap = new Column(this.$refs.customerUnfllowEl, {
|
|
|
+ data:this.customerUnfllowData.map,
|
|
|
+ isGroup: true,
|
|
|
+ xField: 'datetype',
|
|
|
+ yField: 'value',
|
|
|
+ seriesField: 'key',
|
|
|
+ /** 设置颜色 */
|
|
|
+ //color: ['#1ca9e6', '#f88c24'],
|
|
|
+ /** 设置间距 */
|
|
|
+ // marginRatio: 0.1,
|
|
|
+ label: {
|
|
|
+ // 可手动配置 label 数据标签位置
|
|
|
+ position: 'middle', // 'top', 'middle', 'bottom'
|
|
|
+ // 可配置附加的布局方法
|
|
|
+ layout: [
|
|
|
+ // 柱形图数据标签位置自动调整
|
|
|
+ { type: 'interval-adjust-position' },
|
|
|
+ // 数据标签防遮挡
|
|
|
+ { type: 'interval-hide-overlap' },
|
|
|
+ // 数据标签文颜色自动调整
|
|
|
+ { type: 'adjust-color' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ interactions: [{ type: 'element-highlight-by-x' }],
|
|
|
+ });
|
|
|
+ this.customerUnfllowMap.on('element:click',(v) => {
|
|
|
+ console.log(v);
|
|
|
+ if (v.data.data.datetype == this.unfllowTableParam.content.where.dateType) {
|
|
|
+ this.unfllowStatus = ''
|
|
|
+ this.unfllowTableParam.content.where.dateType = ''
|
|
|
+ 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) {
|
|
|
+ let param = JSON.parse(JSON.stringify(this.projectParam))
|
|
|
+ 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.projectMapData = res.data
|
|
|
+ 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},`),
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ 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) {
|
|
|
+ let id = val[val.length - 1]
|
|
|
+ if (val.length) {
|
|
|
+ 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.$refs.customerGradTable.listData()
|
|
|
+
|
|
|
+
|
|
|
+ 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.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.$refs.customerGradTable.listData()
|
|
|
+
|
|
|
+
|
|
|
+ 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()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /*全屏*/
|
|
|
+ onFull(){
|
|
|
+ this.isFull = true
|
|
|
+ },
|
|
|
+ /*退出全屏*/
|
|
|
+ backFull(){
|
|
|
+ this.isFull = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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()
|
|
|
+ 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,'客户等级');
|
|
|
+
|
|
|
+ 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,'屏幕宽度')
|
|
|
+ })()
|
|
|
+ };
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</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);
|
|
|
+}
|
|
|
+.data-all .data-right {
|
|
|
+ padding-left: 50rem;
|
|
|
+}
|
|
|
+.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%;
|
|
|
+}
|
|
|
+</style>
|
qymljy