<template>
<d2-container class="business client">
<headerLayout active="3"></headerLayout>
<div class="section">
<div class="leftBlock">
<div class="boxHeight-3">
<div class="title">客户统计</div>
<div class="businessStatistics d-flex">
<div class="circle">客户统计</div>
<div class="circle circleOut"></div>
<div class="flex-1">
<div class="box">
<div class="boxTitle">客户总数<span>（个）</span></div>
<div class="boxValue">{{totalObj.allCustomer }}</div>
</div>
<div class="box">
<div class="boxTitle">商机客户<span>（个）</span></div>
<div class="boxValue">{{totalObj.opportunitiesCustomer }}</div>
</div>
</div>
<div class="horizontal"></div>
<div class="flex-1">
<div class="box">
<div class="boxTitle">集成商<span>（个）</span></div>
<div class="boxValue">{{totalObj.projectCustomer }}</div>
</div>
<div class="box">
<div class="boxTitle">本年新增<span>（个）</span></div>
<div class="boxValue">{{totalObj.newCustomer }}</div>
</div>
</div>
<div class="horizontal"></div>
<div class="flex-1">
<div class="box">
<div class="boxTitle">优秀案例<span>（个）</span></div>
<div class="boxValue">{{totalObj.excellentCustomer }}</div>
</div>
<div class="box">
<div class="boxTitle">本年活跃<span>（个）</span></div>
<div class="boxValue">{{totalObj.activeCustomer }}</div>
</div>
</div>
<div class="horizontal horizontal1 "></div>
<div class="horizontal horizontal1 horizontal2"></div>
<div class="vertical"></div>
</div>
</div>
<div class="boxHeight-3 mt-2">
<div class="title">行业分布</div>
<pieChart :message="typeDistribute" :noDrill="true" idstr="customTypeDistribute" class="heightCut44"></pieChart>
</div>
<div class="boxHeight-3 mt-2">
<div class="title">地区分布</div>
<barChart :message="customDistribute" idstr="customDistribute" class="heightCut44 mt-2"></barChart>
</div>
</div>
<div class="centerBlock">
<div class="centerBoxHeight-32 content">
<div class="d-flex search-box jc-center">
<div class="search">
<el-autocomplete
class="inline-input"
v-model="state"
size="mini"
clearable
:fetch-suggestions="querySearch"
placeholder="请输入公司名称"
:trigger-on-focus="false"
@select="handleSelect"
></el-autocomplete>
<el-button class="searchBtn" type="text">搜索</el-button>
</div>
</div>
<div class="searchMsg d-flex flex-column">
<div class="row-item d-flex jc-between">
<div class="flex-1">
<span class="babel">客户名称</span>
<span class="babelMsg pr-24">{{ companyInfo.customerName|| '无' }}</span>
</div>
<div class="flex-1">
<span class="babel">客户规模</span>
<span class="babelMsg">{{companyInfo.customerSize}}</span>
</div>
</div>
<div class="row-item d-flex jc-between">
<div class="flex-1"><span class="babel">客户属性</span><span class="babelMsg pr-24">{{companyInfo.customerAttribute}}</span></div>
<div class="flex-1"><span class="babel">所在省份</span><span class="babelMsg">{{companyInfo.province}}</span></div>
</div>
<div class="row-item d-flex jc-between">
<div class="flex-1"><span class="babel">联系人</span><span class="babelMsg pr-24">{{ companyInfo.applicantName ||'无' }}</span></div>
<div class="flex-1"><span class="babel">协同销售</span><span class="babelMsg">{{companyInfo.salesName}}</span></div>
</div>
<div class="row-item d-flex jc-between">
<div class="flex-1"><span class="babel">主责任人</span><span class="babelMsg pr-24">{{ companyInfo.chargePersonName ||'无' }}</span></div>
<div class="flex-1"><span class="babel">项目数</span><span class="babelMsg">{{companyInfo.projectNum}}</span></div>
</div>
<div class="row-item d-flex jc-between">
<div class="flex-1"><span class="babel">商机数</span><span class="babelMsg">{{companyInfo.nicheNum}}</span></div>
</div>
<div class="row-item d-flex jc-between">
<div class="flex-1">
<span class="babel">联系方式</span>
<span class="babelMsg">{{companyInfo.postalAddress || '无'}}</span>
</div>
</div>
<div class="row-item d-flex jc-between">
<div class="flex-1">
<span class="babel">备注说明</span>
<span class="babelMsg">{{companyInfo.remark || '无'}}</span>
</div>
</div>
<div class="row-product mt-2">
<div class="c-list">
<div class="c-title d-flex">
<span class="flex-1">序号</span>
<span class="flex-4">项目名称</span>
</div>
<div class="list-body d-flex" v-for="(item,index) in companyInfo.projects" :key="index">
<span class="flex-1">{{index+1}}</span>
<span class="flex-4">{{item}}</span>
</div>
</div>
</div>
<div class="row-business mt-2">
<div class="c-list">
<div class="c-title d-flex">
<span class="flex-1">序号</span>
<span class="flex-4">商机名称</span>
</div>
<div class="list-body d-flex" v-for="(item,index) in companyInfo.niches" :key="index">
<span class="flex-1">{{index+1}}</span>
<span class="flex-4">{{item}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="centerBoxHeight-3 mt-2">
<div class="title">客户合同分析</div>
<mulBarChart :message="clientAnalysis" idstr="clientAnalysis" class="heightCut44 mt-1"></mulBarChart>
</div>
</div>
<div class="rightBlock">
<div class="boxHeight-3">
<div class="title">服务分析</div>
<serviceAnalysis class="heightCut44" />
</div>
<div class="boxHeight-3 mt-2">
<div class="title">重要客户</div>
<div class="d-flex search-box jc-end">
<el-select v-model="selectYear" size="mini" @change="getImportantCus">
<el-option
v-for="item in yearList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</div>
<div class="customer-list">
<div class="customer-name" v-for="(item,index) in customerList" :key="index">{{item}}</div>
</div>
</div>
<div class="boxHeight-3 mt-2">
<div class="title">合作伙伴</div>
<div class="iconBlock">
<i class="icon20 icon-datangjituan"></i>
<i class="icon20 icon-zhongguoshiyou"></i>
<i class="icon20 icon-changjiangdianli"></i>
<i class="icon5 icon-guojiadianwang"></i>
</div>
</div>
</div>
</div>
</d2-container>
</template>
<script>
import headerLayout from '@/components/headerLayout/index' // 公共头部
import pieChart from '@/components/echarts/pieChart' // 行业分布-饼图
import barChart from '@/components/echarts/barChart' // 柱图
import mulBarChart from '@/components/echarts/mulBarChart'
import serviceAnalysis from './components/serviceAnalysis'
import * as API_CLIENT from '@/api/con.client.js'
export default {
components: { headerLayout, pieChart, barChart, mulBarChart, serviceAnalysis },
data () {
return {
totalObj: {}, // 客户数据
typeDistribute: {}, // 业务分布
customDistribute: {}, // 地区分布
clientAnalysis: {}, // 客户分析
state: '',
companyInfo: {},
selectYear: '1', // 选中重要客户项
yearList: [
{ id: '1', name: '综合' },
{ id: '2', name: '按资金' },
{ id: '3', name: '按项目' }
], // 重要客户下拉框
customerList: [] // 重要客户
}
},
mounted () {
this.getCustomerByProvince()
this.getDistribution()
this.getCustomerByAmount()
this.getImportantCus()
this.getStatisticsCustomer()
},
methods: {
// 客户统计
async getStatisticsCustomer () {
const _data = await API_CLIENT.getStatisticsCustomer()
this.totalObj = _data.data
},
// 行业分布
async getDistribution () {
const _data = await API_CLIENT.getCustomerByCustomerAttribute()
const _distribute = {
legend: _data.data.legend,
data: _data.data.data.map(item => {
return {
name: item.name,
value: Number(item.number)
}
})
}
this.typeDistribute = _distribute
},
// 客户地区分布
async getCustomerByProvince () {
const _data = await API_CLIENT.getCustomerByProvince()
this.customDistribute = _data.data
this.customDistribute.yAxis = '单位 ：个'
},
// 合同分布
async getCustomerByAmount () {
const _data = await API_CLIENT.getCustomerByAmount()
this.clientAnalysis = _data.data
},
// 中要客户
async getImportantCus () {
const _data = await API_CLIENT.getImportantCus({ type: this.selectYear })
this.customerList = _data.data.map(item => item.customerName)
this.handleSelect(_data.data[0])
},
// 输入公司名称触发
querySearch (queryString, cb) {
API_CLIENT.GetCustomerName({ customerName: queryString }).then(res => {
const customerData = res.data
for (var i = 0; i < customerData.length; i++) {
customerData[i].value = customerData[i].customerName
}
cb(customerData)
})
},
// 点击下拉列表出发
handleSelect (item) {
API_CLIENT.GetCustomerId(item.id).then(res => {
this.companyInfo = res.data
})
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/business.scss';
@import '~@/assets/style/client.scss';
</style>
<style lang="scss">
</style>