From 381cbce7f94e181cac26dd0ec86631aab49fd52a Mon Sep 17 00:00:00 2001 From: wangxiaohua <1214073490@qq.com> Date: Tue, 2 Nov 2021 20:48:08 +0800 Subject: [PATCH] init --- src/api/modules/http.js | 74 +- src/page/wel.vue | 10 +- src/views/Statistics/ReceptionOverview.vue | 802 +++++++++++++-------- 3 files changed, 595 insertions(+), 291 deletions(-) diff --git a/src/api/modules/http.js b/src/api/modules/http.js index cff51cf..a9b6a17 100644 --- a/src/api/modules/http.js +++ b/src/api/modules/http.js @@ -81,9 +81,6 @@ export function getemployeeExecutionRatelist(query) { - - - // 代理商管理列表 export function getAgentList(query) { return request({ @@ -465,3 +462,74 @@ export function agentListupdate(query) { } +// 总览 + + +//获取楼盘下部门 +export function overviewfindList(query) { + return request({ + url: 'admin/dept/findList', + method:'get', + params:query + }) +} + +//获取楼盘下顾问 +export function overviewfindUserListByHouseId(query) { + return request({ + url: 'autoSR/cushouseuserrelationmid/findUserListByHouseId', + method:'get', + params:query + }) +} + +//接待总览顶部卡片数据 +export function overviewreceptionOverview(query) { + return request({ + url: 'autoSR/cusStageStatistics/receptionOverview', + method:'get', + params:query + }) +} + +//接待总览折线图数据 +export function overviewreceptionData(query) { + return request({ + url: 'autoSR/cusStageStatistics/receptionData', + method:'get', + params:query + }) +} + + +//团队或者员工销讲趋势 +export function overviewteamOrAccountSellingTrends(query) { + return request({ + url: 'autoSR/cusStageStatistics/teamOrAccountSellingTrends', + method:'get', + params:query + }) +} + + +//接待量或者接待时长排名 +export function overviewreceptionRanking(query) { + return request({ + url: 'autoSR/cusStageStatistics/receptionRanking', + method:'get', + params:query + }) +} + + +//销讲词执行率 +export function overviewreceptionOverviewZxl(query) { + return request({ + url: 'autoSR/cusStageStatistics/receptionOverviewZxl', + method:'get', + params:query + }) +} + + + diff --git a/src/page/wel.vue b/src/page/wel.vue index 4a3e751..f9658eb 100644 --- a/src/page/wel.vue +++ b/src/page/wel.vue @@ -56,7 +56,7 @@
-
新增客户 (个)
+
有效接待(个)
{{cardlist.datalist.activeCustomer || 0}}
@@ -421,7 +421,7 @@ export default { getgicd(){ let obj = { houseId:this.houseId, - dateType: this.TimetoAhoose, + dateType: this.TimetoAhoose==5?null:this.TimetoAhoose, statDateStart: this.statDateStart, statDateEnd:this.statDateEnd }; @@ -475,7 +475,7 @@ export default { this.prohibitedlist=[]; this.$api.http.findProhibitedRecord({ houseId:this.houseId, - dateType: this.TimetoAhoose, + dateType:this.TimetoAhoose==5?null:this.TimetoAhoose, statDateStart: this.statDateStart, statDateEnd:this.statDateEnd }).then((res) => { @@ -486,7 +486,7 @@ export default { this.indexZxllist=[] this.$api.http.getindexZxllist({ houseId:this.houseId, - dateType: this.TimetoAhoose, + dateType:this.TimetoAhoose==5?null:this.TimetoAhoose, statDateStart: this.statDateStart, statDateEnd:this.statDateEnd }).then((res) => { @@ -501,7 +501,7 @@ export default { } this.$api.http.getemployeeExecutionRatelist({ houseId:this.houseId, - dateType: this.TimetoAhoose, + dateType: this.TimetoAhoose==5?null:this.TimetoAhoose, statDateStart: this.statDateStart, statDateEnd:this.statDateEnd }).then((res) => { diff --git a/src/views/Statistics/ReceptionOverview.vue b/src/views/Statistics/ReceptionOverview.vue index 13ce1b8..aad394f 100644 --- a/src/views/Statistics/ReceptionOverview.vue +++ b/src/views/Statistics/ReceptionOverview.vue @@ -2,7 +2,7 @@
-
+ +
接待时间
-
近7天
-
近15天
-
近30天
+
近7天
+
近15天
+
近30天
@@ -38,133 +41,167 @@
- - -
-
接待量
-
1045
-
- - -
-
接待量
-
1045
+
+
+
接待量
+
{{cardobj.receptionCount || 0}}
- - -
-
接待量
-
1045
+
+
有效接待
+
{{cardobj.activeCustomer || 0}}
- - -
-
接待量
-
1045
+
+
平均接待时长（分钟）
+
{{Math.floor(cardobj.avgDuration/60) || 0}}
- - -
-
接待量
-
1045
+
+
平均执行率(%)
+
{{cardobj.fraction || 0}}
- - -
-
接待量
-
1045
+
+
违禁接待次数
+
{{cardobj.prohibitedCustomer || 0}}
- - +
+
+
-
-
-
-
客户来源
-
-
-
-
-
-
客户性别
-
-
-
-
- -
团队销讲趋势
-
- - - - -
- + + v-for="item in departmentlist" + :key="item.deptId" + :label="item.name" + :value="item.deptId">
+
+
+
合计接待
+
{{Pinspeak.sum}}个
+
+
+
均值
+
{{Pinspeak.avg}}%
+
+
员工销讲趋势
- + + v-for="item in consultantlist" + :key="item.accountId" + :label="item.name" + :value="item.accountId">
-
- - - - -
+
+
+
合计接待
+
{{Pinspeak2.sum}}个
+
+
+
均值
+
{{Pinspeak2.avg}}%
+
+
+ +
+
+
+
员工接待量排名（TOP10）
+
+
+
+
合计
+
{{ceratelist.sum || ''}}个
+
+
+
顾问
+
{{ceratelist.num || ''}}个
+
+
+
人均接待
+
{{ceratelist.avg || ''}}%
+
+
+
+
+
{{item.name}}
+
+
+
+
{{item.zxl}}个
+
+
+
+
+
+
员工接待时长排名（TOP10）
+
+
+
+
+
合计
+
{{Math.floor(ceratelist1.sum /60) || ''}}分钟
+
+
+
顾问
+
{{ceratelist1.num || ''}}个
+
+
+
均值
+
{{Math.floor(ceratelist1.avg /60) || ''}}分钟
+
+
+
+
+
{{item.name}}
+
+
+
+
{{item.zxl}}分钟
+
+
+ +
+
+
销讲维度执行排名
-
-
+
+
{{item.name}}
-
+
-
{{item.avgZxl}}%
+
{{item.zxl}}%
@@ -173,22 +210,23 @@
销讲指标执行率排名
- + + v-for="item in Zxllist" + :key="item.marketingId" + :label="item.name" + :value="item.marketingId">
-
-
+
+
+
{{item.name}}
-
+
-
{{item.avgZxl}}%
+
{{item.zxl}}%
@@ -203,43 +241,329 @@ import * as echarts from "echarts"; export default { data() { return { - customtime: "", - TimetoAhoose: 2, + pickerOptions: { + disabledDate(time) { + //根据当前日期 --- 禁止选中之后的日期 + return time.getTime() > Date.now(); + }, + }, + role:'', + customtime: [], + TimetoAhoose: 4, fromobj: { - starttime: "", - endoftime: "", + statDateStart: "", + statDateEnd: "", }, houseId: "", - options: [{ - value: '选项1', - label: '黄金糕' - }, { - value: '选项2', - label: '双皮奶' - }], - value: '', - ceratelist:[ - {name:'还是得',avgZxl:80}, - {name:'大大奥德赛',avgZxl:90}, - {name:'沙发和',avgZxl:20}, - {name:'还是得',avgZxl:10}, - {name:'还客户家客户是得',avgZxl:80}, - ] + ceratelist:{ + avg:'', + sum:'', + num:'', + list:[] + }, + ceratelist1:{ + avg:'', + sum:'', + num:'', + list:[] + }, + cardobj:{}, + cardindex:1, + departmentlist:[], + departmentsri:'', + consultantlist:[], + consultantsri:'', + Brokenline:[], + Pinspeak:{ + avg:'', + sum:'', + list:[] + }, + Pinspeak2:{ + avg:'', + sum:'', + list:[] + }, + Zxllist:[], + Zxllistchildren:[], + marketingId:'' + }; }, mounted() { - this.SwitchCARDS() - //客户来源 - this.Brokenlinefun() - //客户性别 - this.Broken2inefun() - //团队销讲 - this.Pinspeakfun1() - //员工销讲 - this.Pinspeakfun2() + this.role=localStorage.getItem("orgType"); + if(this.role==3){ + this.houseId = localStorage.getItem("houseId"); + this.overviewfindList() + this.overviewfindUserListByHouseId() + this.overviewreceptionOverview() + this.overviewreceptionData() + + this.overviewreceptionRanking() + this.overviewreceptionRanking1() + this.overviewreceptionOverviewZxl() + } }, methods: { - SwitchCARDS(){ + //切换二级 + zxltapchang(){ + this.Zxllistchildren=[]; + this.Zxllist.forEach(item=>{ + if(this.marketingId==item.marketingId){ + this.Zxllistchildren=item.children + } + }) + }, + //获取执行率 + overviewreceptionOverviewZxl(){ + this.Zxllistchildren=[]; + this.Zxllist=[]; + let parmo={ + houseId:this.houseId, + dateType:this.TimetoAhoose, + statDateStart:this.fromobj.statDateStart, + statDateEnd:this.fromobj.statDateEnd, + } + if(this.TimetoAhoose==8){ + parmo.dateType=null; + } + this.$api.http.overviewreceptionOverviewZxl(parmo).then((res) => { + this.Zxllist=res.data.list || []; + if(this.Zxllist.length!==0){ + this.marketingId=res.data.list[0].marketingId; + this.Zxllistchildren=res.data.list[0].children; + } + }) + }, + //接待量排名 + overviewreceptionRanking(){ + this.ceratelist={ + avg:'', + sum:'', + num:'', + list:[] + } + let parmo={ + houseId:this.houseId, + dateType:this.TimetoAhoose, + statDateStart:this.fromobj.statDateStart, + statDateEnd:this.fromobj.statDateEnd, + type:0 + } + if(this.TimetoAhoose==8){ + parmo.dateType=null; + } + this.$api.http.overviewreceptionRanking(parmo).then((res) => { + let arr=[] + res.data.list.map(item=>{ + let obj={} + obj.name=item.accountName + obj.zxl=item.activeCustomer + arr.push(obj) + }) + arr=this.dealData(arr) + this.ceratelist={ + avg: res.data.avg, + sum: res.data.sum, + num: res.data.num, + list:arr + } + }) + }, + //接待时长排名 + overviewreceptionRanking1(){ + this.ceratelist1={ + avg:'', + sum:'', + num:'', + list:[] + } + let parmo={ + houseId:this.houseId, + dateType:this.TimetoAhoose, + statDateStart:this.fromobj.statDateStart, + statDateEnd:this.fromobj.statDateEnd, + type:1 + } + if(this.TimetoAhoose==8){ + parmo.dateType=null; + } + this.$api.http.overviewreceptionRanking(parmo).then((res) => { + let arr=[] + res.data.list.map(item=>{ + let obj={} + obj.name=item.accountName + obj.zxl=Math.floor(item.sumDuration /60) || 0; + arr.push(obj) + }) + arr=this.dealData(arr) + this.ceratelist1={ + avg: res.data.avg, + sum: res.data.sum, + num: res.data.num, + list:arr + } + }) + }, + + //团队员工下拉切换 + Pinspeaktap(i){ + if(i==1){ + this.overviewteamOrAccountSellingTrends() + }else{ + this.overviewteamOrAccountSellingTrends1() + } + }, + //团队销讲趋势 + overviewteamOrAccountSellingTrends(){ + this.Pinspeak={ + avg:'', + sum:'', + list:[] + } + let parmo={ + houseId:this.houseId, + dateType:this.TimetoAhoose, + statDateStart:this.fromobj.statDateStart, + statDateEnd:this.fromobj.statDateEnd, + deptId:this.departmentsri + } + if(this.TimetoAhoose==8){ + parmo.dateType=null; + } + this.$api.http.overviewteamOrAccountSellingTrends(parmo).then((res) => { + this.Pinspeak=res.data; + var newline=[]; + var newline2=[]; + this.Pinspeak.list.map(item=>{ + newline.push(item.fraction) + newline2.push(item.statDate.slice(5,10)) + }) + this.Pinspeakfun1(newline,newline2) + }) + }, + //员工销讲趋势 + overviewteamOrAccountSellingTrends1(){ + this.Pinspeak2={ + avg:'', + sum:'', + list:[] + } + let parmo={ + houseId:this.houseId, + dateType:this.TimetoAhoose, + statDateStart:this.fromobj.statDateStart, + statDateEnd:this.fromobj.statDateEnd, + accountId:this.consultantsri + } + if(this.TimetoAhoose==8){ + parmo.dateType=null; + } + this.$api.http.overviewteamOrAccountSellingTrends(parmo).then((res) => { + this.Pinspeak2=res.data; + var newline=[]; + var newline2=[]; + this.Pinspeak2.list.map(item=>{ + newline.push(item.fraction) + newline2.push(item.statDate.slice(5,10)) + }) + this.Pinspeakfun2(newline,newline2) + }) + }, + //卡片切换 + Overviewxlick(i){ + this.cardindex=i; + var newline=[]; + var newline2=[]; + var Strname='' + if(this.cardindex==1){ + Strname='接待客户/个' + this.Brokenline.map(item=>{ + newline.push(item.receptionCount) + newline2.push(item.statDate.slice(5,10)) + }) + }else if(this.cardindex==2){ + Strname='接待客户/个' + this.Brokenline.map(item=>{ + newline.push(item.activeCustomer) + newline2.push(item.statDate.slice(5,10)) + }) + }else if(this.cardindex==3){ + Strname='接待时长/分钟' + this.Brokenline.map(item=>{ + newline.push(Math.floor(item.avgDuration/60)) + newline2.push(item.statDate.slice(5,10)) + }) + }else if(this.cardindex==4){ + Strname='执行率/%' + this.Brokenline.map(item=>{ + newline.push(item.fraction) + newline2.push(item.statDate.slice(5,10)) + }) + }else{ + Strname='违禁/次' + this.Brokenline.map(item=>{ + newline.push(item.prohibitedCustomer) + newline2.push(item.statDate.slice(5,10)) + }) + } + this.SwitchCARDS(newline,newline2,Strname) + }, + //获取卡片数据 + overviewreceptionOverview(){ + let parmo={ + houseId:this.houseId, + dateType:this.TimetoAhoose, + statDateStart:this.fromobj.statDateStart, + statDateEnd:this.fromobj.statDateEnd + } + if(this.TimetoAhoose==8){ + parmo.dateType=null; + } + this.$api.http.overviewreceptionOverview(parmo).then((res) => { + this.cardobj=res.data + }) + }, + //获取卡片下折线图 + overviewreceptionData(){ + let parmo={ + houseId:this.houseId, + dateType:this.TimetoAhoose, + statDateStart:this.fromobj.statDateStart, + statDateEnd:this.fromobj.statDateEnd + } + if(this.TimetoAhoose==8){ + parmo.dateType=null; + } + this.$api.http.overviewreceptionData(parmo).then((res) => { + this.Brokenline=res.data; + this.Overviewxlick(1) + }) + }, + //获取部门下拉菜单 + overviewfindList(){ + this.$api.http.overviewfindList({ + houseId:this.houseId, + }).then((res) => { + this.departmentlist=[{name:'全部',deptId:''}] + this.departmentlist=this.departmentlist.concat(res.data); + this.departmentsri=''; + }) + this.overviewteamOrAccountSellingTrends() + }, + //获取顾问 + overviewfindUserListByHouseId(){ + this.$api.http.overviewfindUserListByHouseId({ + orgType:localStorage.getItem("orgType"), + projectId:this.houseId, + }).then((res) => { + this.consultantlist=res.data; + this.consultantsri=res.data[0].accountId; + this.overviewteamOrAccountSellingTrends1() + }) + }, + //卡片下折线图 + SwitchCARDS(newline,newline2,Strname){ var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; @@ -249,7 +573,7 @@ export default { trigger: 'axis' }, legend: { - data: ['来访人数/个'], + data: [Strname], bottom: '10', }, grid: { @@ -260,7 +584,7 @@ export default { }, xAxis: { type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + data: newline2, axisLabel: { //重点在这一块，其余可以忽略 textStyle: { color: '#212121', //更改坐标轴文字颜色 @@ -300,142 +624,19 @@ export default { }, }, series: [{ - name:'来访人数/个', - data: [820, 932, 901, 934, 1290, 1330, 1320,], + name:Strname, + data: newline, type: 'line', smooth: true, }] }; - - option && myChart.setOption(option); - window.addEventListener("resize", () => { myChart.resize();}); - }, - //客户来源 - Brokenlinefun(){ - let chartDom = document.getElementById('Brokenline1'); - let myChart = echarts.init(chartDom); - let option = { - tooltip: { - trigger: "item", - }, - graphic: [ - { - type: "text", - left: "center", - top: "42%", - style: { - text: '80', - textAlign: "center", - fill: "#000", - width: 30, - height: 30, - fontSize: 24, - color: "#32363D", - fontFamily: "Microsoft YaHei", - }, - }, - { - type: "text", - left: "center", - top: "55%", - style: { - text: "接待总数", - textAlign: "center", - fill: "#000", - width: 30, - height: 30, - fontSize: 16, - color: "#666666", - }, - }, - ], - series: [ - { - name: "", - type: "pie", - radius: ["48%", "70%"], - avoidLabelOverlap: false, - itemStyle: { - borderRadius: 10, - borderColor: '#fff', - borderWidth: 2 - }, - data: [ - {value: 1048, name: '搜索引擎'}, - {value: 735, name: '直接访问'}, - {value: 580, name: '邮件营销'}, - {value: 484, name: '联盟广告'}, - {value: 300, name: '视频广告'} - ] - }, - ], - }; - option && myChart.setOption(option); - window.addEventListener("resize", () => { myChart.resize();}); - }, - //客户性别 - Broken2inefun(){ - let chartDom = document.getElementById('Brokenline2'); - let myChart = echarts.init(chartDom); - let option = { - tooltip: { - trigger: "item", - }, - graphic: [ - { - type: "text", - left: "center", - top: "42%", - style: { - text: '80', - textAlign: "center", - fill: "#000", - width: 30, - height: 30, - fontSize: 24, - color: "#32363D", - fontFamily: "Microsoft YaHei", - }, - }, - { - type: "text", - left: "center", - top: "55%", - style: { - text: "接待总数", - textAlign: "center", - fill: "#000", - width: 30, - height: 30, - fontSize: 16, - color: "#666666", - }, - }, - ], - series: [ - { - name: "", - type: "pie", - radius: ["48%", "70%"], - avoidLabelOverlap: false, - itemStyle: { - borderRadius: 10, - borderColor: '#fff', - borderWidth: 2 - }, - data: [ - {value: 1048, name: '搜索引擎'}, - {value: 735, name: '直接访问'}, - ] - }, - ], - }; option && myChart.setOption(option); window.addEventListener("resize", () => { myChart.resize();}); }, + //团队销讲 - Pinspeakfun1(){ + Pinspeakfun1(newline,newline2){ let chartDom = document.getElementById('Pinspeak1'); let myChart = echarts.init(chartDom); let option= { @@ -443,7 +644,7 @@ export default { trigger: 'axis' }, legend: { - data: ['来访人数/个'], + data: ['执行率/%'], bottom: '10', }, grid: { @@ -454,7 +655,7 @@ export default { }, xAxis: { type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + data: newline2, axisLabel: { //重点在这一块，其余可以忽略 textStyle: { color: '#212121', //更改坐标轴文字颜色 @@ -494,8 +695,8 @@ export default { }, }, series: [{ - name:'来访人数/个', - data: [820, 932, 901, 934, 1290, 1330, 1320,], + name:'执行率/%', + data: newline, type: 'line', smooth: true, @@ -506,7 +707,7 @@ export default { window.addEventListener("resize", () => { myChart.resize();}); }, //员工销讲 - Pinspeakfun2(){ + Pinspeakfun2(newline,newline2){ let chartDom = document.getElementById('Pinspeak2'); let myChart = echarts.init(chartDom); let option= { @@ -514,7 +715,7 @@ export default { trigger: 'axis' }, legend: { - data: ['来访人数/个'], + data: ['执行率/%'], bottom: '10', }, grid: { @@ -525,7 +726,7 @@ export default { }, xAxis: { type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + data: newline2, axisLabel: { //重点在这一块，其余可以忽略 textStyle: { color: '#212121', //更改坐标轴文字颜色 @@ -565,8 +766,8 @@ export default { }, }, series: [{ - name:'来访人数/个', - data: [820, 932, 901, 934, 1290, 1330, 1320,], + name:'执行率/%', + data:newline, type: 'line', smooth: true, @@ -580,23 +781,37 @@ export default { //时间选择 tabtimetap(index) { this.TimetoAhoose = index; - this.fromobj.starttime = ""; - this.fromobj.endoftime = ""; - this.customtime = ""; - this.getorgCode(); + this.fromobj.statDateStart = ""; + this.fromobj.statDateEnd = ""; + this.customtime = []; + this.overviewreceptionOverview() + this.overviewreceptionData() + this.overviewteamOrAccountSellingTrends() + this.overviewteamOrAccountSellingTrends1() + this.overviewreceptionRanking() + this.overviewreceptionRanking1() + this.overviewreceptionOverviewZxl() }, //自定义时间 confirmtime() { - if (this.customtime == "") { - - } else { - this.TimetoAhoose = 6; - const d = new Date(this.customtime[0]); - this.fromobj.starttime = d.getFullYear() + "-" + this.Zeropadding(d.getMonth() + 1) + "-" + this.Zeropadding(d.getDate()); - const c = new Date(this.customtime[1]); - this.fromobj.endoftime = c.getFullYear() + "-" + this.Zeropadding(c.getMonth() + 1) + "-" + this.Zeropadding(c.getDate()); - } + this.fromobj.statDateStart= this.customtime[0] + this.fromobj.statDateEnd= this.customtime[1] + this.TimetoAhoose = 8; + this.overviewreceptionOverview() + this.overviewreceptionData() + this.overviewteamOrAccountSellingTrends() + this.overviewteamOrAccountSellingTrends1() + this.overviewreceptionRanking() + this.overviewreceptionRanking1() + this.overviewreceptionOverviewZxl() }, + dealData(arr){ + let num=Math.max.apply(Math, arr.map(function (o) { return o.zxl })) //结果：3 + arr.map(item=>{ + item.zxl1=Math.floor(item.zxl/num*100) + }) + return arr + }, }, }; @@ -610,6 +825,13 @@ export default { padding-bottom: 100px; } +.container { + display: grid; + grid-template-columns: repeat(5, 19%) ; + grid-column-gap: 18px; +} + + // 进度条 .jinbox { width: 100%; @@ -644,7 +866,7 @@ export default { } .jinboxbott { width: 16%; - text-indent: 50px; + text-indent: 20px; } } @@ -673,7 +895,7 @@ export default { } .app-box-san{ width: 100%; - height: 400px; + // height: 400px; display: flex; margin-top: 15px; .zuo{ @@ -753,7 +975,6 @@ export default { height: 16px; font-size: 16px; font-weight: 400; - color: #333333; line-height: 16px; text-indent: 20px; margin-top: 20px; @@ -762,7 +983,6 @@ export default { height: 32px; font-size: 32px; font-weight: normal; - color: #32363D; line-height: 32px; text-indent: 20px; margin-top: 10px; @@ -776,6 +996,9 @@ export default { color: #ffffff; background: #2671e2; } +.tophovese{ + color: #2671e2; +} .app-top{ width: 100%; background: #ffffff; @@ -814,4 +1037,17 @@ export default { font-size: 14px; } } + .hejisan{ + width: 92%; + margin: 0 auto; + display: flex; + margin-top: 15px; + .text1-1{ + color: #666666; + } + .text1-2{ + color: #333333; + margin-top: 10px; + } + }