<template> <d2-container class="business"> <dv-loading v-show="loading">Loading...</dv-loading> <div v-show="!loading"> <headerLayout></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.total['商机总数']}}</div> </div> <div class="box"> <div class="boxTitle">整体预算<span>(百万)</span></div> <div class="boxValue">{{totalObj.total['商机整体总预算'] | numFilter}}</div> </div> </div> <div class="horizontal"></div> <div class="flex-1"> <div class="box"> <div class="boxTitle">本月新增<span>(个)</span></div> <div class="boxValue">{{(totalObj.total['本月新增']|| 0) | numFilter }}</div> </div> <div class="box"> <div class="boxTitle">预计毛利<span>(百万)</span></div> <div class="boxValue">{{totalObj.total['公司预计毛利'] | numFilter }}</div> </div> </div> <div class="horizontal"></div> <div class="flex-1"> <div class="box"> <div class="boxTitle">售前参与<span>(个)</span></div> <div class="boxValue">{{totalObj.total['售前参与']}}</div> </div> <div class="box"> <div class="boxTitle">预计成本<span>(百万)</span></div> <div class="boxValue">{{totalObj.total['公司预计成本'] | numFilter }}</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 @downData="downDistributeData" :message="typeDistribute" idstr="typeDistribute" class="heightCut44"></pieChart> </div> <div class="boxHeight-3 mt-2"> <div class="title">商机分布</div> <barChart :message="bussionDistribute" idstr="bussionDistribute" class="heightCut44 mt-2"></barChart> </div> </div> <div class="centerBlock"> <div class="centerBoxHeight-32 d-flex flex-column"> <div class="select-box mt-2"> <div class="tab-chart"> <span class="tab-button" @click="chartActive=1" :class="{'is-active':chartActive=== 1 }">数量</span> <span class="tab-button" @click="chartActive=2" :class="{'is-active':chartActive=== 2 }">金额</span> </div> </div> <div class="flex-1 d-flex"> <div class="flex-1"> <div class="title">商机阶段分析</div> <funnel :message="bussionStep" :idstr="'bussionStep'" class="heightCut44"></funnel> </div> <div class="flex-1"> <div class="title">商机类型</div> <pieChart :message="bussionType" idstr="bussionType" class="heightCut44"></pieChart> </div> </div> <div class="flex-1"> <doubleYBarChart @downData="downData" :message="bussionAnalysis" idstr="bussionAnalysis" class="heightCut44 mt-1"></doubleYBarChart> </div> </div> <div class="centerBoxHeight-3 mt-2"> <div class="title">合同税率分布</div> <doubleYBarChart :message="taxRateDistribute" idstr="taxRateDistribute" class="heightCut44 mt-1"></doubleYBarChart> </div> </div> <div class="rightBlock"> <div class="boxHeight-3"> <div class="title">商机成功率</div> <doubleYBarChart :message="successRatio" idstr="successRatio" class="heightCut44 mt-1"></doubleYBarChart> </div> <div class="boxHeight-3 mt-2"> <div class="title">新商机分析</div> <doubleYBarChart :message="newBussAnalysis" idstr="newBussAnalysis" class="heightCut44 mt-1"></doubleYBarChart> </div> <div class="boxHeight-3 mt-2"> <div class="title">产品类型分析</div> <pieChart @downData="downTypeData" :message="typeAnalysis" idstr="typeAnalysis" class="heightCut44"></pieChart> </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 doubleYBarChart from '@/components/echarts/doubleYBarChart' // 新商机分析-柱加折线图 import funnel from '@/components/echarts/funnel' // 梯形图 import * as API_BUSSINESS from '@/api/con.business.js' export default { components: { headerLayout, pieChart, barChart, doubleYBarChart, funnel }, data () { return { loading: true, chartActive: 1, // 行业分布 typeDistribute: { legend: ['政府', '制造业', '能源', '金融', '军工'], data: [ { value: 335, name: '政府', isLeaf: false, parent: '' }, { value: 310, name: '制造业', isLeaf: false, parent: '' }, { value: 234, name: '能源', isLeaf: false, parent: '' }, { value: 135, name: '金融', isLeaf: false, parent: '' }, { value: 1548, name: '军工', isLeaf: false, parent: '' } ] }, // 产品类型分析 typeAnalysis: { legend: ['DELL', '联想', '自有服务', '第三方', 'H3C'], data: [ { value: 335, name: 'DELL', isLeaf: false, parent: '' }, { value: 310, name: '联想', isLeaf: false, parent: '' }, { value: 234, name: '自有服务', isLeaf: false, parent: '' }, { value: 135, name: '第三方', isLeaf: false, parent: '' }, { value: 1548, name: 'H3C', isLeaf: false, parent: '' } ] }, // 商机分布 bussionDistribute: { xAxis: ['上海', '北京', '广州', '河南', '天津', '深圳', '贵州', '河北', '江苏'], data: [223.2, 195.6, 176.7, 135.6, 122.2, 122, 114, 95, 76] }, // 新商机分析 newBussAnalysis: { legend: ['新商机', '传统商机', '占比'], xAxis: ['2017', '2018', '2019', '2020', '2021'], yAxis: ['单位:个', '占比:%'], data: [ { name: '新商机', type: 'bar', data: [23.2, 25.6, 76.7, 135.6, 162.2] }, { name: '传统商机', type: 'bar', data: [13.2, 45.6, 76.7, 55.6, 62.2] }, { name: '占比', type: 'line', yAxisIndex: 1, data: [4.5, 6.3, 10.2, 20.3, 23.4] } ] }, // 商机预算及硬蛋率 successRatio: { legend: ['商机预算', '赢单率'], xAxis: ['10以下', '10-30', '30-50', '50-100', '100以上'], yAxis: ['单位:万元', '百分:%'], data: [ { name: '商机预算', type: 'bar', barWidth: '25%', data: [23.2, 25.6, 76.7, 135.6, 162.2] }, { name: '赢单率', type: 'line', yAxisIndex: 1, data: [4.5, 6.3, 10.2, 20.3, 23.4] } ] }, // 合同税率分布 taxRateDistribute: { legend: ['合同数', '合同税率占比'], xAxis: ['0%', '3%', '6%', '9%', '13%'], yAxis: ['单位:个', '百分比:%'], data: [ { name: '合同数', type: 'bar', barWidth: '25%', data: [23.2, 25.6, 76.7, 135.6, 162.2] }, { name: '合同税率占比', type: 'line', yAxisIndex: 1, data: [4.5, 6.3, 10.2, 20.3, 23.4] } ] }, // 商机分析-中间图 bussionAnalysis: { legend: ['初步接洽', '需求确定', '方案/报价', '谈判审核', '赢单'], xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心', 'XXXX中心'], yAxis: ['单位:个', '赢单率:%'], data: [ { name: '初步接洽', type: 'bar', data: [ { value: 123.2, isLeaf: false, parent: '' }, { value: 125.6, isLeaf: false, parent: '' }, { value: 176.7, isLeaf: false, parent: '' }, { value: 135.6, isLeaf: false, parent: '' }, { value: 162.2, isLeaf: false, parent: '' }, { value: 200, isLeaf: false, parent: '' } ] }, { name: '需求确定', type: 'bar', data: [ { value: 83.2, isLeaf: false, parent: '' }, { value: 75.6, isLeaf: false, parent: '' }, { value: 86.7, isLeaf: false, parent: '' }, { value: 85.6, isLeaf: false, parent: '' }, { value: 62.2, isLeaf: false, parent: '' }, { value: 90, isLeaf: false, parent: '' } ] }, { name: '方案/报价', type: 'bar', yAxisIndex: 1, data: [ { value: 74.5, isLeaf: false, parent: '' }, { value: 66.3, isLeaf: false, parent: '' }, { value: 70.2, isLeaf: false, parent: '' }, { value: 80.3, isLeaf: false, parent: '' }, { value: 53.4, isLeaf: false, parent: '' }, { value: 87, isLeaf: false, parent: '' } ] }, { name: '谈判审核', type: 'bar', yAxisIndex: 1, data: [ { value: 64.5, isLeaf: false, parent: '' }, { value: 56.3, isLeaf: false, parent: '' }, { value: 60.2, isLeaf: false, parent: '' }, { value: 70.3, isLeaf: false, parent: '' }, { value: 43.4, isLeaf: false, parent: '' }, { value: 77, isLeaf: false, parent: '' } ] }, { name: '赢单', type: 'bar', yAxisIndex: 1, data: [ { value: 54.5, isLeaf: false, parent: '' }, { value: 46.3, isLeaf: false, parent: '' }, { value: 50.2, isLeaf: false, parent: '' }, { value: 60.3, isLeaf: false, parent: '' }, { value: 33.4, isLeaf: false, parent: '' }, { value: 65, isLeaf: false, parent: '' } ] }, { name: '赢单率', type: 'line', yAxisIndex: 1, data: [ { value: 4.5, isLeaf: false, parent: '' }, { value: 6.3, isLeaf: false, parent: '' }, { value: 10.2, isLeaf: false, parent: '' }, { value: 20.3, isLeaf: false, parent: '' }, { value: 23.4, isLeaf: false, parent: '' }, { value: 30.2, isLeaf: false, parent: '' } ] } ] }, // 商机类型 bussionType: { legend: ['服务续签', '其他', '特殊事项'], data: [ { value: 335, name: '服务续签' }, { value: 310, name: '其他' }, { value: 234, name: '特殊事项' } ] }, // 商机阶段分析 bussionStep: { legend: ['初步接洽', '需求确定', '方案/报价', '谈判审核', '赢单', '输单', '终止', '暂停'], data: [ { value: 335, name: '初步接洽' }, { value: 280, name: '需求确定' }, { value: 234, name: '方案/报价' }, { value: 190, name: '谈判审核' }, { value: 185, name: '赢单' }, { value: 120, name: '输单' }, { value: 89, name: '终止' }, { value: 23, name: '暂停' } ] }, businessType: [], // 商机业务类型 quoteProportion: {}, // 商机报价及占比 taxRate: {}, // 商机税率 projectAnalysis: [], // 项目分析 funnelChart: [], // 商机成功率 source: [], // 商机来源 process: {}, // 商机流程 totalData: {}, // 商机整体数据 totalObj: {}, // 商机数据 analysisData: {}, // 项目分析数据 projectObj: [] } }, mounted () { this.GetBusinessList() }, filters: { numFilter (value) { value = value / 1000000 // 截取当前数据到小数点后两位(以百万元为单位) const realVal = parseFloat(value).toFixed(2) return realVal } }, methods: { GetBusinessList () { API_BUSSINESS.GetBusinessList().then(res => { this.loading = false this.totalData = res this.totalObj = this.totalData.data // 商机税率 const argRate = this.totalData.data.taxrate const taxrate = [] const arr5 = [] const arr6 = [] let maxra = 0 argRate.forEach(e => { taxrate.push(e.taxrate) arr5.push(e.num) arr6.push(e.percentage) const mid = parseInt(e.num) if (mid > maxra) { maxra = mid } }) const darate = [] const sj = { name: '商机', type: 'bar', data: arr5 } const rate = { name: '税率', type: 'line', data: arr6 } darate.push(sj) darate.push(rate) this.taxRate = { data: darate, max: maxra, title: ['商机', '税率'], column: taxrate } // 商机报价及占比 const argquo = this.totalData.data.offer const column = [] const arr2 = [] const arr3 = [] let max = 0 argquo.forEach(e => { column.push(e.level) arr2.push(e.num) arr3.push(e.percentage) const mid = parseInt(e.num) if (mid > max) { max = mid } }) const daq = [] const bj = { name: '报价', type: 'bar', data: arr2 } const ratio = { name: '占比', type: 'line', data: arr3 } daq.push(bj) daq.push(ratio) this.quoteProportion = { data: daq, max: max, title: ['报价', '占比'], column: column } // 项目分析 this.projectObj = this.totalData.data.analysis this.projectAnalysis = this.projectObj // 商机成功率 const argsuc = this.totalData.data.success const titlesuc = [] const dasuc = [] argsuc.forEach(e => { titlesuc.push(e.success) var suc = { name: e.success, value: e.num } dasuc.push(suc) }) this.funnelChart.push({ success: titlesuc, num: dasuc }) // 对商机业务类型遍历 const arg = this.totalData.data.type const title = [] const da = [] arg.forEach(element => { title.push(element.type) var jso = { name: element.type, value: element.num } da.push(jso) }) this.businessType.push({ title: title, data: da }) // 对商机来源遍历 const argsou = this.totalData.data.source const titlesou = [] const dasou = [] argsou.forEach(element => { titlesou.push(element.source) var sou = { name: element.source, value: element.num } dasou.push(sou) }) this.source.push({ title: titlesou, data: dasou }) }).catch(err => { console.log(err) }) }, // 行业分布下钻数据 downDistributeData (item) { console.log('pie传来的值:', item) setTimeout(() => { if (item) { this.typeDistribute = { parent: item, legend: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心'], data: [ { name: '运营管理中心', value: 123.2, parent: item, isLeaf: true }, { name: '解决方案中心', value: 76.7, parent: item, isLeaf: true }, { name: '智能制造中心', value: 135.6, parent: item, isLeaf: true }, { name: '生态合作中心', value: 162.2, parent: item, isLeaf: true }, { name: '客户运营中心', value: 32.6, parent: item, isLeaf: true } ] } } else { this.typeDistribute = { legend: ['政府', '制造业', '能源', '金融', '军工'], data: [ { value: 335, name: '政府', isLeaf: false, parent: '' }, { value: 310, name: '制造业', isLeaf: false, parent: '' }, { value: 234, name: '能源', isLeaf: false, parent: '' }, { value: 135, name: '金融', isLeaf: false, parent: '' }, { value: 1548, name: '军工', isLeaf: false, parent: '' } ] } } }, 0) }, // 产品类型分析下钻数据 downTypeData (item) { console.log('pie传来的值:', item) setTimeout(() => { if (item) { this.typeAnalysis = { parent: item, legend: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心'], data: [ { name: '运营管理中心', value: 123.2, parent: item, isLeaf: true }, { name: '解决方案中心', value: 76.7, parent: item, isLeaf: true }, { name: '智能制造中心', value: 135.6, parent: item, isLeaf: true }, { name: '生态合作中心', value: 162.2, parent: item, isLeaf: true }, { name: '客户运营中心', value: 32.6, parent: item, isLeaf: true } ] } } else { this.typeAnalysis = { legend: ['DELL', '联想', '自有服务', '第三方', 'H3C'], data: [ { value: 335, name: 'DELL', isLeaf: false, parent: '' }, { value: 310, name: '联想', isLeaf: false, parent: '' }, { value: 234, name: '自有服务', isLeaf: false, parent: '' }, { value: 135, name: '第三方', isLeaf: false, parent: '' }, { value: 1548, name: 'H3C', isLeaf: false, parent: '' } ] } } }, 0) }, downData (item) { console.log('传来的值:', item) setTimeout(() => { if (!item) { this.bussionAnalysis = { legend: ['初步接洽', '需求确定', '方案/报价', '谈判审核', '赢单'], xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心', 'XXXX中心'], yAxis: ['单位:个', '赢单率:%'], data: [ { name: '初步接洽', type: 'bar', data: [ { value: 123.2, isLeaf: false, parent: '' }, { value: 125.6, isLeaf: false, parent: '' }, { value: 176.7, isLeaf: false, parent: '' }, { value: 135.6, isLeaf: false, parent: '' }, { value: 162.2, isLeaf: false, parent: '' }, { value: 200, isLeaf: false, parent: '' } ] }, { name: '需求确定', type: 'bar', data: [ { value: 83.2, isLeaf: false, parent: '' }, { value: 75.6, isLeaf: false, parent: '' }, { value: 86.7, isLeaf: false, parent: '' }, { value: 85.6, isLeaf: false, parent: '' }, { value: 62.2, isLeaf: false, parent: '' }, { value: 90, isLeaf: false, parent: '' } ] }, { name: '方案/报价', type: 'bar', yAxisIndex: 1, data: [ { value: 74.5, isLeaf: false, parent: '' }, { value: 66.3, isLeaf: false, parent: '' }, { value: 70.2, isLeaf: false, parent: '' }, { value: 80.3, isLeaf: false, parent: '' }, { value: 53.4, isLeaf: false, parent: '' }, { value: 87, isLeaf: false, parent: '' } ] }, { name: '谈判审核', type: 'bar', yAxisIndex: 1, data: [ { value: 64.5, isLeaf: false, parent: '' }, { value: 56.3, isLeaf: false, parent: '' }, { value: 60.2, isLeaf: false, parent: '' }, { value: 70.3, isLeaf: false, parent: '' }, { value: 43.4, isLeaf: false, parent: '' }, { value: 77, isLeaf: false, parent: '' } ] }, { name: '赢单', type: 'bar', yAxisIndex: 1, data: [ { value: 54.5, isLeaf: false, parent: '' }, { value: 46.3, isLeaf: false, parent: '' }, { value: 50.2, isLeaf: false, parent: '' }, { value: 60.3, isLeaf: false, parent: '' }, { value: 33.4, isLeaf: false, parent: '' }, { value: 65, isLeaf: false, parent: '' } ] }, { name: '赢单率', type: 'line', yAxisIndex: 1, data: [ { value: 4.5, isLeaf: false, parent: '' }, { value: 6.3, isLeaf: false, parent: '' }, { value: 10.2, isLeaf: false, parent: '' }, { value: 20.3, isLeaf: false, parent: '' }, { value: 23.4, isLeaf: false, parent: '' }, { value: 30.2, isLeaf: false, parent: '' } ] } ] } } if (item.indexOf('中心') !== -1) { this.bussionAnalysis = { parent: item, legend: ['初步接洽', '需求确定', '方案/报价', '谈判审核', '赢单'], xAxis: ['运营管理部门', '解决方案部门', '智能制造部门', '生态合作部门', '客户运营部门', 'XXXX部门'], yAxis: ['单位:个', '赢单率:%'], data: [ { name: '初步接洽', type: 'bar', data: [ { value: 123.2, isLeaf: false, parent: item }, { value: 125.6, isLeaf: false, parent: item }, { value: 176.7, isLeaf: false, parent: item }, { value: 135.6, isLeaf: false, parent: item }, { value: 162.2, isLeaf: false, parent: item }, { value: 200, isLeaf: false, parent: item } ] }, { name: '需求确定', type: 'bar', data: [ { value: 83.2, isLeaf: false, parent: item }, { value: 75.6, isLeaf: false, parent: item }, { value: 86.7, isLeaf: false, parent: item }, { value: 85.6, isLeaf: false, parent: item }, { value: 62.2, isLeaf: false, parent: item }, { value: 90, isLeaf: false, parent: item } ] }, { name: '方案/报价', type: 'bar', yAxisIndex: 1, data: [ { value: 74.5, isLeaf: false, parent: item }, { value: 66.3, isLeaf: false, parent: item }, { value: 70.2, isLeaf: false, parent: item }, { value: 80.3, isLeaf: false, parent: item }, { value: 53.4, isLeaf: false, parent: item }, { value: 87, isLeaf: false, parent: item } ] }, { name: '谈判审核', type: 'bar', yAxisIndex: 1, data: [ { value: 64.5, isLeaf: false, parent: item }, { value: 56.3, isLeaf: false, parent: item }, { value: 60.2, isLeaf: false, parent: item }, { value: 70.3, isLeaf: false, parent: item }, { value: 43.4, isLeaf: false, parent: item }, { value: 77, isLeaf: false, parent: item } ] }, { name: '赢单', type: 'bar', yAxisIndex: 1, data: [ { value: 54.5, isLeaf: false, parent: item }, { value: 46.3, isLeaf: false, parent: item }, { value: 50.2, isLeaf: false, parent: item }, { value: 60.3, isLeaf: false, parent: item }, { value: 33.4, isLeaf: false, parent: item }, { value: 65, isLeaf: false, parent: item } ] }, { name: '赢单率', type: 'line', yAxisIndex: 1, data: [ { value: 4.5, isLeaf: false, parent: item }, { value: 6.3, isLeaf: false, parent: item }, { value: 10.2, isLeaf: false, parent: item }, { value: 20.3, isLeaf: false, parent: item }, { value: 23.4, isLeaf: false, parent: item }, { value: 30.2, isLeaf: false, parent: item } ] } ] } } if (item.indexOf('部门') !== -1) { this.bussionAnalysis = { parent: item, legend: ['初步接洽', '需求确定', '方案/报价', '谈判审核', '赢单'], xAxis: ['小小黄', '小小安', '小小圆', '小小静', '小小宝', 'XXXXXXX'], yAxis: ['单位:个', '赢单率:%'], data: [ { name: '初步接洽', type: 'bar', data: [ { value: 123.2, isLeaf: true, parent: item }, { value: 125.6, isLeaf: true, parent: item }, { value: 176.7, isLeaf: true, parent: item }, { value: 135.6, isLeaf: true, parent: item }, { value: 162.2, isLeaf: true, parent: item }, { value: 200, isLeaf: true, parent: item } ] }, { name: '需求确定', type: 'bar', data: [ { value: 83.2, isLeaf: true, parent: item }, { value: 75.6, isLeaf: true, parent: item }, { value: 86.7, isLeaf: true, parent: item }, { value: 85.6, isLeaf: true, parent: item }, { value: 62.2, isLeaf: true, parent: item }, { value: 90, isLeaf: true, parent: item } ] }, { name: '方案/报价', type: 'bar', yAxisIndex: 1, data: [ { value: 74.5, isLeaf: true, parent: item }, { value: 66.3, isLeaf: true, parent: item }, { value: 70.2, isLeaf: true, parent: item }, { value: 80.3, isLeaf: true, parent: item }, { value: 53.4, isLeaf: true, parent: item }, { value: 87, isLeaf: true, parent: item } ] }, { name: '谈判审核', type: 'bar', yAxisIndex: 1, data: [ { value: 64.5, isLeaf: true, parent: item }, { value: 56.3, isLeaf: true, parent: item }, { value: 60.2, isLeaf: true, parent: item }, { value: 70.3, isLeaf: true, parent: item }, { value: 43.4, isLeaf: true, parent: item }, { value: 77, isLeaf: true, parent: item } ] }, { name: '赢单', type: 'bar', yAxisIndex: 1, data: [ { value: 54.5, isLeaf: true, parent: item }, { value: 46.3, isLeaf: true, parent: item }, { value: 50.2, isLeaf: true, parent: item }, { value: 60.3, isLeaf: true, parent: item }, { value: 33.4, isLeaf: true, parent: item }, { value: 65, isLeaf: true, parent: item } ] }, { name: '赢单率', type: 'line', yAxisIndex: 1, data: [ { value: 4.5, isLeaf: true, parent: item }, { value: 6.3, isLeaf: true, parent: item }, { value: 10.2, isLeaf: true, parent: item }, { value: 20.3, isLeaf: true, parent: item }, { value: 23.4, isLeaf: true, parent: item }, { value: 30.2, isLeaf: true, parent: item } ] } ] } } }, 0) } } } </script> <style lang="scss" scoped> @import '~@/assets/style/business.scss'; </style>