liumin
/
zkPCproject
0
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

init

newStyle
wangxiaohua 3 years ago
parent
9acca8211e
commit
455f55ef60
5 changed files with 1543 additions and 86 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +72
    -0
      src/api/modules/http.js
  2. +114
    -53
      src/views/Statistics/BuildingContrast.vue
  3. +16
    -0
      src/views/Statistics/ReceptionStatistical.vue
  4. +857
    -0
      src/views/Statistics/TheTeamCompared.vue
  5. +484
    -33
      src/views/Statistics/TrendAnalysis.vue

+ 72
- 0
src/api/modules/http.js View File

@@ -550,6 +550,78 @@ export function trendtrendAnalysisProject(query) {
})
}

//获取顾问
export function trendAnalysisAllAccount(query) {
return request({
url: 'autoSR/cusStageStatistics/trendAnalysisAllAccount',
method:'get',
params:query
})
}

//顾问维度
export function trendAnalysisAccount(query) {
return request({
url: 'autoSR/cusStageStatistics/trendAnalysisAccount',
method:'get',
params:query
})
}

//获取一级二级
export function trendAnalysisAllLevel(query) {
return request({
url: 'autoSR/cusStageStatistics/trendAnalysisAllLevel',
method:'get',
params:query
})
}


//销讲二级
export function trendAnalysisLevel2(query) {
return request({
url: 'autoSR/cusStageStatistics/trendAnalysisLevel2',
method:'get',
params:query
})
}


//团队对比表格
export function teamteamTable(query) {
return request({
url: 'autoSR/cusStageStatistics/teamTable',
method:'get',
params:query
})
}

//团队对比图表
export function teamData(query) {
return request({
url: 'autoSR/cusStageStatistics/teamData',
method:'get',
params:query
})
}

//团队对比一级
export function teamAllLevel(query) {
return request({
url: 'autoSR/cusStageStatistics/teamAllLevel',
method:'get',
params:query
})
}


//楼盘对比
export function houseTable(query) {
return request({
url: 'autoSR/cusStageStatistics/houseTable',
method:'get',
params:query
})
}


+ 114
- 53
src/views/Statistics/BuildingContrast.vue View File

@@ -2,26 +2,15 @@
<div class="box-center">
<!-- 头 -->
<div class="app-titel">
<div class="titel-text">
楼盘选择：
<el-select v-model="houseId" placeholder="请选择">
<el-option
v-for="item in buildingoptions"
:key="item.value"
:label="item.propertyName"
:value="item.id">
</el-option>
</el-select>
</div>
<div class="toptimeqhuan">
<div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">
今日
<div :class="{ tophove: TimetoAhoose == 4 }" @click="tabtimetap(4)">
近7天
</div>
<div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)">
昨日
<div :class="{ tophove: TimetoAhoose == 5 }" @click="tabtimetap(5)">
近15天
</div>
<div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">
近一周
<div :class="{ tophove: TimetoAhoose == 6 }" @click="tabtimetap(6)">
近30天
</div>
</div>
<div style="margin-left: 26px">
@@ -47,13 +36,13 @@
style="width: 100%">
<el-table-column
prop="batchId"
label="批次号"
label="序号"
align="center"
>
</el-table-column>
<el-table-column
prop="name"
label="设备号"
label="楼盘"
align="center"
>
<template slot-scope="scope">
@@ -62,38 +51,45 @@
</el-table-column>
<el-table-column
prop="realityEquipmentCount"
label="应收设备数量"
label="顾问"
align="center">
</el-table-column>

<el-table-column
prop="receivableEquipmentCount"
label="实收设备数量"
label="接待量"
align="center"
>
</el-table-column>
<el-table-column
prop="acceptanceNum"
label="已验收设备数量"
label="违禁次数"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
label="违禁率"
align="center">
</el-table-column>

<el-table-column
prop="remark"
label="备注"
label="接待时长"
align="center"
>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<div style="color: #2671E2;" @click="clickbianji(scope.row)">修改</div>
</template>
<el-table-column
prop="remark"
label="销讲执行率"
align="center"
>
</el-table-column>
<el-table-column
prop="remark"
label="违禁执行率"
align="center"
>
</el-table-column>
</el-table>
<div style="display: flex;justify-content:flex-end;margin-top: 10px;">
@@ -113,28 +109,18 @@
<div class="zuo">
<div class="title">
<div class="text1">接待量（TOP10）</div>
<div class="text2">
<el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 35%;">
<div class="text1-1">合计</div>
<div class="text1-1">接待合计</div>
<div class="text1-2">1</div>
</div>
<div class="sanbox1" style="width: 40%;">
<div class="text1-1">顾问</div>
<div class="text1-1">楼盘总数</div>
<div class="text1-2">1</div>
</div>
<div class="sanbox1" style="width: 25%;">
<div class="text1-1">人均接待量</div>
<div class="text1-1">平均接待</div>
<div class="text1-2">1</div>
</div>
</div>
@@ -151,18 +137,35 @@
<div class="you">
<div class="title">
<div class="text1">销讲执行率（TOP10）</div>
<div class="text2">
<el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%;">
<div class="text1-1">合计</div>
<div class="text1-2">1</div>
</div>
<div class="sanbox1" style="width: 50%;">
<div class="text1-1">顾问</div>
<div class="text1-2">1</div>
</div>
</div>
<div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
<div class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
<div class="jinboxtit">{{item.name}}</div>
<div class="jinbox-box">
<div class="boxbaifenbi" :style="'width:'+(item.avgZxl)+'%;'"></div>
</div>
<div class="jinboxbott">{{item.avgZxl}}%</div>
</div>
</div>
</div>
</div>

<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">违禁次数（TOP10）</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 35%;">
<div class="text1-1">合计</div>
<div class="text1-2">1</div>
@@ -175,6 +178,30 @@
<div class="text1-1">人均接待量</div>
<div class="text1-2">1</div>
</div>
</div>
<div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
<div class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
<div class="jinboxtit">{{item.name}}</div>
<div class="jinbox-box">
<div class="boxbaifenbi" :style="'width:'+(item.avgZxl)+'%;'"></div>
</div>
<div class="jinboxbott">{{item.avgZxl}}%</div>
</div>
</div>
</div>
<div class="you">
<div class="title">
<div class="text1">销接待时长（分钟）（TOP10）</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%;">
<div class="text1-1">合计</div>
<div class="text1-2">1</div>
</div>
<div class="sanbox1" style="width: 50%;">
<div class="text1-1">顾问</div>
<div class="text1-2">1</div>
</div>
</div>
<div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
<div class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
@@ -195,9 +222,13 @@
export default {
data() {
return {
role:'',
houseId: "",
orgCode:'',
page:1,
pagesize:3,
buildingoptions:[],
TimetoAhoose: 2,
TimetoAhoose: 4,
customtime: [],
currentPage4:1,
total:20,
@@ -216,13 +247,43 @@ export default {
{name:'还是得',avgZxl:10},
{name:'还客户家客户是得',avgZxl:80},
],
tableData:[],

};
},
mounted() {

this.role=localStorage.getItem("orgType");
this.houseId = localStorage.getItem("houseId");
this.orgCode= localStorage.getItem("orgCode");
this.houseTable()
},
methods: {
houseTable(){
let pamaet={
orgType:this.role,
dateType:0,
statDateStart:this.statDateStart,
statDateEnd:this.statDateEnd,
current:this.page,
size:this.pagesize
}
if(this.role==3){
pamaet.houseId=this.houseId
}else{
pamaet.orgCode=this.orgCode
}


if(this.TimetoAhoose==7){
pamaet.dateType=null
}else{
pamaet.dateType=this.TimetoAhoose
}
this.$api.http.houseTable(pamaet).then((res) => {
console.log(res.data)
})
},

handleCurrentChange(){

},


+ 16
- 0
src/views/Statistics/ReceptionStatistical.vue View File

@@ -0,0 +1,16 @@
<template>
<div>
111
</div>
</template>

<script>
export default {

}
</script>

<style lang="" scoped >


</style>

+ 857
- 0
src/views/Statistics/TheTeamCompared.vue View File

@@ -0,0 +1,857 @@
<template>
<div class="box-center">
<!-- 头 -->
<div class="app-titel">
<div style="margin-left: 26px">接待时间：</div>
<div class="toptimeqhuan">
<div :class="{ tophove: TimetoAhoose == 4 }" @click="tabtimetap(4)">
近7天
</div>
<div :class="{ tophove: TimetoAhoose == 5 }" @click="tabtimetap(5)">
近15天
</div>
<div :class="{ tophove: TimetoAhoose == 6 }" @click="tabtimetap(6)">
近30天
</div>
</div>
<div style="margin-left: 26px">
<el-date-picker
v-model="customtime"
@change="confirmtime()"
type="daterange"
:clearable='false'
range-separator="-"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</div>
</div>

<!-- 表格 -->
<div class="cen-tab">
<div style="overflow: auto;">
<table>
<tbody>
<tr>
<td v-for="(item,index) in tablsitdata1" :key="index" class="theadtd">{{item.name}}</td>
</tr>
<tr v-for="(item,iddex) in tablsitdata2" :key="iddex">
<td v-if="iddex+1==tablsitdata2.length" class="theadtd">合计/平均</td>
<td v-else class="theadtd">{{iddex+1}}</td>

<td class="theadtd">{{item.deptName}}</td>
<td class="theadtd">{{item.receptionCount}}</td>
<td class="theadtd">{{item.accountNum}}</td>
<td class="theadtd">{{item.activeCustomer||0}}</td>
<td class="theadtd">{{item.prohibitedCustomer||0}}</td>
<td class="theadtd">{{Math.floor(item.sumDuration/60) ||0}}</td>
<td class="theadtd">{{item.fraction ||0}}</td>
<td class="theadtd">{{item.prohibitedZb||0}}</td>
<td class="theadtd" v-for="(che,ind) in item.resultsList" :key='ind'>{{che.zxl}}%</td>
</tr>

</tbody>
</table>
</div>

</div>

<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">接待量排名</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%;">
<div class="text1-1">团队总数</div>
<div class="text1-2">{{teamobj1.num}}</div>
</div>
<div class="sanbox1" style="width: 50%;">
<div class="text1-1">均值</div>
<div class="text1-2">{{teamobj1.avg}}个</div>
</div>
</div>
<div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
<div class="jinbox" v-for="(item,i) in teamobj1.list" :key='i'>
<div class="jinboxtit">{{item.name}}</div>
<div class="jinbox-box">
<div class="boxbaifenbi" :style="'width:'+(item.zxl1)+'%;'"></div>
</div>
<div class="jinboxbott">{{item.zxl}}个</div>
</div>
</div>
</div>
<div class="you">
<div class="title">
<div class="text1">录音时长排名</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%;">
<div class="text1-1">团队总数</div>
<div class="text1-2">{{teamobj2.num}}</div>
</div>
<div class="sanbox1" style="width: 50%;">
<div class="text1-1">均值</div>
<div class="text1-2">{{Math.floor(teamobj2.avg/60)}}分钟</div>
</div>
</div>
<div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
<div class="jinbox" v-for="(item,i) in teamobj2.list" :key='i'>
<div class="jinboxtit">{{item.name}}</div>
<div class="jinbox-box">
<div class="boxbaifenbi" :style="'width:'+(item.zxl1)+'%;'"></div>
</div>
<div class="jinboxbott">{{item.zxl}}分钟</div>
</div>
</div>
</div>
</div>

<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">销讲执行率</div>
<div class="text2">
<el-select @change="teamAllLevelidtap()" style="width: 90%; margin: 0 auto;" v-model="teamAllLevelid" placeholder="请选择">
<el-option
v-for="item in teamAllLevel"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%;">
<div class="text1-1">团队总数</div>
<div class="text1-2">{{teamobj3.num}}</div>
</div>
<div class="sanbox1" style="width: 50%;">
<div class="text1-1">均值</div>
<div class="text1-2">{{teamobj3.avg || 0}}%</div>
</div>
</div>
<div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
<div class="jinbox" v-for="(item,i) in teamobj3.list" :key='i'>
<div class="jinboxtit">{{item.name}}</div>
<div class="jinbox-box">
<div class="boxbaifenbi" :style="'width:'+(item.zxl)+'%;'"></div>
</div>
<div class="jinboxbott">{{item.zxl}}%</div>
</div>
</div>
</div>
<div class="you">
<div class="title">
<div class="text1">销讲能力雷达图</div>
</div>
<div id="main" style="height: 350px;width: 94%;margin: 0 auto;"></div>
</div>
</div>

<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">违禁接待次数</div>
<div class="text2">
<el-select @change="teamAllLeve2tap()" style="width: 90%; margin: 0 auto;" v-model="teamAllLeve2id" placeholder="请选择">
<el-option
v-for="item in teamAllLeve2"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%;">
<div class="text1-1">团队总数</div>
<div class="text1-2">{{teamobj5.num||0}}</div>
</div>
<div class="sanbox1" style="width: 50%;">
<div class="text1-1">均值</div>
<div class="text1-2">{{teamobj5.avg}}次</div>
</div>
</div>
<div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
<div class="jinbox" v-for="(item,i) in teamobj5.list" :key='i'>
<div class="jinboxtit">{{item.name}}</div>
<div class="jinbox-box">
<div class="boxbaifenbi" :style="'width:'+(item.zxl1)+'%;'"></div>
</div>
<div class="jinboxbott">{{item.zxl}}次</div>
</div>
</div>
</div>
<div class="you">
<div class="title">
<div class="text1">违禁话术雷达图</div>
</div>
<div id="main2" style="height: 350px;width: 94%;margin: 0 auto;"></div>
</div>
</div>

</div>
</template>

<script>
import * as echarts from "echarts";
export default {
data() {
return {
houseId: "",
TimetoAhoose: 4,
customtime: [],
statDateStart:'',
statDateEnd:'',
tablsitdata1:[],
tablsitdata2:[],
teamobj1:{
avg:'',
list:[],
num:''
},
teamobj2:{
avg:'',
list:[],
num:''
},
teamobj3:{
avg:'',
list:[],
num:''
},
teamobj5:{
avg:'',
list:[],
num:''
},
teamAllLevel:[],
teamAllLevelid:'',
teamAllLeve2:[],
teamAllLeve2id:'',
ceratelist:[]
};
},
mounted() {
this.houseId = localStorage.getItem("houseId");
this.allhttp()
},
methods: {
allhttp(){
this.teamteamTable()
this.teamData1()
this.teamData2()
this.teamData3()
this.teamData4()
this.teamData5()
this.teamData6()
this.teamAllLeve()
},
// 获取一级
teamAllLeve(){
this.teamAllLevel=[
{name:'平均执行',value:''},
]
this.teamAllLeve2=[
{name:'总次数',value:''},
]
let pamaet={
houseId:this.houseId,
dateType:0,
statDateStart:this.statDateStart,
statDateEnd:this.statDateEnd,
}
if(this.TimetoAhoose==7){
pamaet.dateType=null
}else{
pamaet.dateType=this.TimetoAhoose
}
this.$api.http.teamAllLevel(pamaet).then((res) => {
let arr1=res.data.resultsList ||[];
let arr2=res.data.sensitiveWordsList ||[];
arr1.map(item=>{
this.teamAllLevel.push({
name:item.name,
value:item.marketingId
})
})
arr2.map(item=>{
this.teamAllLeve2.push({
name:item.words,
value:item.words
})
})
this.teamAllLevelid='';
this.teamAllLeve2id='';
})
},
//表格
teamteamTable(){
this.tablsitdata1=[
{name:'序号'},{name:'团队'},{name:'接待量'},{name:'接待顾问'},{name:'有效接待'},{name:'违禁接待次数'},
{name:'录音时长（分）'},{name:'平均执行率'},{name:'违禁接待占比'},
]
let pamaet={
houseId:this.houseId,
dateType:0,
statDateStart:this.statDateStart,
statDateEnd:this.statDateEnd,
}

if(this.TimetoAhoose==7){
pamaet.dateType=null
}else{
pamaet.dateType=this.TimetoAhoose
}
this.$api.http.teamteamTable(pamaet).then((res) => {
let newlist=res.data || [];
this.tablsitdata2=res.data;
newlist[0].resultsList.map(item=>{
this.tablsitdata1.push( {name:item.name})
})
})
},
//接待量排名
teamData1(){
this.teamobj1={
avg:'',
list:[],
num:''
}
let pamaet={
houseId:this.houseId,
dateType:0,
statDateStart:this.statDateStart,
statDateEnd:this.statDateEnd,
type:1
}
if(this.TimetoAhoose==7){
pamaet.dateType=null
}else{
pamaet.dateType=this.TimetoAhoose
}
this.$api.http.teamData(pamaet).then((res) => {
let arr=[]
res.data.list.map(item=>{
let obj={}
obj.name=item.deptName
obj.zxl=item.activeCustomer
arr.push(obj)
})
arr=this.dealData(arr)
this.teamobj1={
avg: res.data.avg || 0,
num: res.data.num || 0,
list:arr || []
}
})
},
//录音时长排名
teamData2(){
this.teamobj2={
avg:'',
list:[],
num:''
}
let pamaet={
houseId:this.houseId,
dateType:0,
statDateStart:this.statDateStart,
statDateEnd:this.statDateEnd,
type:2
}
if(this.TimetoAhoose==7){
pamaet.dateType=null
}else{
pamaet.dateType=this.TimetoAhoose
}
this.$api.http.teamData(pamaet).then((res) => {
let arr=[]
res.data.list.map(item=>{
let obj={}
obj.name=item.deptName
obj.zxl=Math.floor(item.sumDuration/60)
arr.push(obj)
})
arr=this.dealData(arr)
this.teamobj2={
avg: res.data.avg || 0,
num: res.data.num || 0,
list:arr || []
}
})
},
//销讲执行率切换一级
teamAllLevelidtap(){
this.teamData3()
},
//销讲执行率
teamData3(){
this.teamobj3={
avg:'',
list:[],
num:''
}
let pamaet={
houseId:this.houseId,
dateType:0,
statDateStart:this.statDateStart,
statDateEnd:this.statDateEnd,
type:3,
marketingId:this.teamAllLevelid
}
if(this.TimetoAhoose==7){
pamaet.dateType=null
}else{
pamaet.dateType=this.TimetoAhoose
}
this.$api.http.teamData(pamaet).then((res) => {
let arr=[]
res.data.list.map(item=>{
let obj={}
obj.name=item.deptName
obj.zxl=item.fraction
arr.push(obj)
})
// arr=this.dealData(arr)
this.teamobj3={
avg: res.data.avg || 0,
num: res.data.num || 0,
list:arr || []
}
})
},
//销讲雷达图
teamData4(){
let pamaet={
houseId:this.houseId,
dateType:0,
statDateStart:this.statDateStart,
statDateEnd:this.statDateEnd,
type:4,
}
if(this.TimetoAhoose==7){
pamaet.dateType=null
}else{
pamaet.dateType=this.TimetoAhoose
}
this.$api.http.teamData(pamaet).then((res) => {
let namelist=[];
let datalist=[];
let newlinename=[];
let arr=res.data.list||[];
arr.map(item=>{
namelist.push(item.deptName)
datalist.push({
name:item.deptName,
value:[]
})
})
arr[0].resultsList.map(item=>{
newlinename.push({
name:item.name,max:100
})
})
arr.map((item,index)=>{
datalist.map(che=>{
if(item.deptName==che.name){
item.resultsList.map(as=>{
che.value.push(as.zxl)
})
}
})
})
this.initecah(namelist,datalist,newlinename)
})
},
//违禁话术雷达图
teamData6(){
let pamaet={
houseId:this.houseId,
dateType:0,
statDateStart:this.statDateStart,
statDateEnd:this.statDateEnd,
type:6,
}
if(this.TimetoAhoose==7){
pamaet.dateType=null
}else{
pamaet.dateType=this.TimetoAhoose
}
this.$api.http.teamData(pamaet).then((res) => {
let namelist=[];
let datalist=[];
let newlinename=[];
let arr=res.data.list||[];
arr.map(item=>{
namelist.push(item.deptName)
datalist.push({
name:item.deptName,
value:[]
})
})
arr[0].sensitiveWordsList.map(item=>{
newlinename.push({
name:item.words,max:100
})
})
arr.map((item,index)=>{
datalist.map(che=>{
if(item.deptName==che.name){
item.sensitiveWordsList.map(as=>{
che.value.push(as.num)
})
}
})
})
console.log(arr,namelist,datalist,newlinename)
this.initecah2(namelist,datalist,newlinename)
})
},

initecah(namelist,datalist,newlinename){
echarts.init(document.getElementById("main")).dispose();
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: namelist,
bottom: "10",
},
color:[
'#2671E2',
'#F3787B',
],
radar: {
// shape: 'circle',
indicator: newlinename
},
series: [
{
type: 'radar',
tooltip: {
trigger: 'item'
},
data: datalist
}
]
};
option && myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},
initecah2(namelist,datalist,newlinename){
echarts.init(document.getElementById("main2")).dispose();
var chartDom = document.getElementById("main2");
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: namelist,
bottom: "10",
},
color:[
'#2671E2',
'#F3787B',
],
radar: {
// shape: 'circle',
indicator: newlinename
},
series: [
{
type: 'radar',
tooltip: {
trigger: 'item'
},
data: datalist
}
]
};
option && myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},

//违禁接待次数一级切换
teamAllLeve2tap(){
this.teamData5()
},
//违禁接待次数
teamData5(){
this.teamobj5={
avg:'',
list:[],
num:''
}
let pamaet={
houseId:this.houseId,
dateType:0,
statDateStart:this.statDateStart,
statDateEnd:this.statDateEnd,
type:5,
words:this.teamAllLeve2id
}
if(this.TimetoAhoose==7){
pamaet.dateType=null
}else{
pamaet.dateType=this.TimetoAhoose
}
this.$api.http.teamData(pamaet).then((res) => {
let arr=[]
res.data.list.map(item=>{
let obj={}
obj.name=item.deptName
obj.zxl=item.prohibitedCustomer
arr.push(obj)
})
arr=this.dealData(arr)
this.teamobj5={
avg: res.data.avg || 0,
num: res.data.num || 0,
list:arr || []
}
})
},



// 自定义时间
confirmtime(){
this.TimetoAhoose=7;
this.statDateStart=this.customtime[0],
this.statDateEnd=this.customtime[1];
this.allhttp()
},
//切换时间
tabtimetap(index) {
this.TimetoAhoose = index;
this.statDateStart='';
this.statDateEnd='';
this.customtime=[];
this.allhttp()
},
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
},
},
};
</script>

<style scoped="scoped" lang="scss" >
/* 添加table滚动条 */
table {
border-collapse: collapse;
width: 100%;
}
tbody {
display: block;
// width: 100%;
// overflow-x: auto;
// overflow-y: auto;
height: 220px;
}
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
// word-break: break-all;
}



.box-center {
width: 100%;
padding: 15px;
min-width: 1200px;
padding-bottom: 100px;
}
.cen-tab{
width: 100%;
padding: 15px;
background: #FFFFFF;
margin-top: 15px;
}
.tophove {
color: #ffffff;
background: #2671e2;
}
.app-titel {
width: 100%;
height: 70px;
background: #ffffff;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
border-radius: 4px;
display: flex;
align-items: center;
.titel-text {
height: 100%;
font-size: 18px;
font-weight: 600;
color: #32363d;
line-height: 70px;
margin-left: 30px;
}
.toptimeqhuan {
width: 190px;
height: 32px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #e0e0e0;
display: flex;
align-items: center;
overflow: hidden;
cursor: pointer;
}
.toptimeqhuan div {
flex: 1;
text-align: center;
line-height: 32px;
font-size: 16px;
}
}

.app-box-san{
width: 100%;
height: 400px;
display: flex;
margin-top: 15px;
.zuo{
flex: 1;
height: 100%;
margin-right: 15px;
background: #FFFFFF;
border-radius: 4px;
.title{
width: 100%;
height: 55px;
border-bottom: 1px solid #E0E0E0;
display: flex;
align-content: center;
.text1{
flex: 2;
line-height: 55px;
text-indent: 20px;
font-weight: 500;
font-size: 16px;
color: #333333;
}
.text2{
flex: 1;
height: 55px;
display: flex;
align-items: center;
}
}
}
.you{
height: 100%;
flex: 1;
background: #FFFFFF;
border-radius: 4px;
.title{
width: 100%;
height: 55px;
border-bottom: 1px solid #E0E0E0;
display: flex;
align-content: center;
.text1{
flex: 2;
line-height: 55px;
text-indent: 20px;
font-weight: 500;
font-size: 16px;
color: #333333;
}
.text2{
flex: 1;
height: 55px;
display: flex;
align-items: center;
}
}
}
}

.hejisan{
width: 92%;
margin: 0 auto;
display: flex;
padding-top: 10px;
padding-bottom:10px;
.text1-1{
color: #666666;
}
.text1-2{
color: #333333;
margin-top: 10px;
}
}

// 进度条
.jinbox {
width: 100%;
height: 18px;
line-height: 18px;
display: flex;
font-size: 16px;
color: #2C3542;
margin-top: 10px;
.jinboxtit {
width: 14%;
height: 18px;
padding-right: 6px;
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
.jinbox-box {
width: 75%;
height: 100%;
border-radius: 8px;
background: #F2F2F2;
}
.boxbaifenbi {
height: 100%;
background:#60D7A0;
border-radius: 8px;
}
.boxbaifenbi2 {
height: 100%;
background: #5B8FF9;
}
.jinboxbott {
width: 16%;
text-indent: 16px;
}
}
.theadtd{
width: 140px;
height: 48px;
border: 1px solid #E0E0E0;
text-align: center;
line-height: 48px;
font-size: 16px;
color: #32363D;

}
</style>

+ 484
- 33
src/views/Statistics/TrendAnalysis.vue View File

@@ -45,6 +45,7 @@
@change="timeChange"
ref="time"
type="date"
:clearable='false'
placeholder="选择日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
@@ -114,42 +115,66 @@
<div :class="{ claindex: aliasclass == 4 }" @click="tapChange(4)">销讲一级</div>
<div :class="{ claindex: aliasclass == 5 }" @click="tapChange(5)">销讲二级</div>
</div>
<!-- <div
style="
display: flex;
justify-content: center;
align-items: center;
margin-top: 26px;
"
>
<el-select v-model="value" placeholder="请选择">
<!-- 团队选部门 -->
<div v-if="aliasclass==2" style="display: flex;align-items: center;margin-top: 26px;">
部门：
<el-select @change="departmenttap()" v-model="departmentid" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
v-for="item in departmentlist"
:key="item.deptId"
:label="item.name"
:value="item.deptId"
>
</el-option>
</el-select>
<el-select
v-model="value"
placeholder="请选择"
style="margin-left: 15px"
>
</div>

<!-- 选择顾问 -->
<div v-if="aliasclass==3" style="display: flex;align-items: center;margin-top: 26px;">
顾问：
<el-select @change="consultanttap()" v-model="consultantid" placeholder="请选择">
<el-option
v-for="item in consultantlist"
:key="item.accountId"
:label="item.accountName"
:value="item.accountId"
>
</el-option>
</el-select>
</div>

<!-- 一二级 -->
<div v-if="aliasclass==5" style="display: flex;align-items: center;margin-top: 26px;">
一级：
<el-select @change="Level1tap()" v-model="Level1id" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
v-for="item in Level1"
:key="item.marketingId"
:label="item.name"
:value="item.marketingId"
>
</el-option>
</el-select>
</div> -->
<div id="main"></div>
&nbsp; &nbsp; 二级：
<el-select @change="Level2tap()" v-model="Level2id" placeholder="请选择">
<el-option
v-for="item in Level2"
:key="item.marketingId"
:label="item.name"
:value="item.marketingId"
>
</el-option>
</el-select>
</div>

<div v-if="echartsisshow" id="main"></div>
<div v-else style="display:flex;justify-content: center; align-items: center;height: 350px;">
<div>暂无数据</div>
</div>
</div>

<!-- 表格 -->
<div class="app-box-san" v-if="Confirmthecontrast">
<div class="app-box-san" v-if="Confirmthecontrast && aliasclass!=3 && aliasclass!=4">
<div class="santitle">对比报表</div>
<div class="santab">
<el-table :data="tableData" height="400" border style="width: 100%">
@@ -168,6 +193,7 @@
<el-table-column prop="heji" label="变化" align="center">
<template slot-scope="scope">
<span v-if="scope.row.heji>0"> <i class="el-icon-top" style="color: red;"></i>{{scope.row.heji}}%</span>
<span v-if="scope.row.heji==0">{{scope.row.heji}}%</span>
<span v-if="scope.row.heji<0"> <i class="el-icon-bottom" style="color: 25CEBA;"></i>{{scope.row.heji}}%</span>
</template>
</el-table-column>
@@ -175,6 +201,32 @@

</div>
</div>

<div v-if="aliasclass==3 || aliasclass==4" class="app-box-san" style="padding:12px;" >
<div style="overflow: auto;">
<table class="table">
<tbody class="tbody">
<tr v-if="tablelist1.length!=0">
<td class="theadtd" v-for="(item,index) in tablelist1" :key='index'>{{item.name}}</td>
</tr>
<tr v-if="tablelist2.length!=0">
<td class="theadtd" v-for="(item,index) in tablelist2" :key='index'>{{item.name}}</td>
</tr>
<tr v-if="tablelist3.length!=0">
<td class="theadtd" v-for="(item,index) in tablelist3" :key='index'>{{item.name}}</td>
</tr>
<tr v-if="tablelist4.length!=0">
<td class="theadtd" v-for="(item,index) in tablelist4" :key='index'>
<span v-if="item.name=='变化'">{{item.name}}</span>
<span v-else-if="item.name==0">{{item.name}}%</span>
<span v-else-if="item.name>0" style="color: red;">{{item.name}}%</span>
<span v-else-if="item.name<0" style="color: 25CEBA;">{{item.name}}%</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>

@@ -204,21 +256,266 @@ export default {
checked: false,//是否对比
Confirmthecontrast:false,
tableData: [],//表格数据
cardobj:{}
cardobj:{},
departmentlist:[],
departmentid:'',
echartsisshow:true,
consultantlist:[],
consultantid:'',
tablelist1:[],
tablelist2:[],
tablelist3:[],
tablelist4:[],
Level1:[],
Level2:[],
Level1id:'',
Level2id:''
};
},
mounted() {
this.houseId = localStorage.getItem("houseId");
this.tabtimetap(4);
this.overviewfindList()
},
methods: {
//获取部门下拉菜单
overviewfindList(){
this.$api.http.overviewfindList({
houseId:this.houseId,
}).then((res) => {
console.log(res)
})
//销讲二级
trendAnalysisLevel2(){
let pamaet={
showStatus:'',
houseId:this.houseId,
timeType:0,
firstStartDate:this.page.openTime,
firstEndDate:this.page.closeTime,
lastStartDate:this.selectTime,
lastEndDate:this.selectTime1,
marketingId:this.Level2id
}

if(this.timeType==-1){
pamaet.timeType=null
}else{
pamaet.timeType=this.timeType
}
if(this.checked==true){
pamaet.showStatus=1;
pamaet.timeType=null
}else{
pamaet.showStatus=0
}
this.$api.http.trendAnalysisLevel2(pamaet).then((res) => {
if(this.Confirmthecontrast==false){
let newlist=res.data.startList || [];
var newline=[];
var newline2=[];
newlist.map(item=>{
newline.push(item.zxl)
newline2.push(item.statDate.slice(5,10))
})
this.SwitchCARDS(newline,newline2)
}else{
let newlist=res.data.startList || [];
let newlist2=res.data.endList || [];
let hejilist=res.data.comparedList || [];
var newline=[];//起始数据
var newline2=[];//对比数据
var newline1=[];//时间

let arr=[];
newlist.map(item=>{
newline.push(item.zxl)
})
newlist2.map(item=>{
newline1.push(item.zxl)
})
newlist.forEach((item, sdf) => {
newlist2.forEach((child, zxc) => {
if (sdf == zxc) {
newline2.push(item.statDate.substring(5,10) + 'vs' + child.statDate.substring(5, 10))
arr.push({
name:item.statDate.substring(5,10) + 'vs' + child.statDate.substring(5, 10),
shiduan1:item.zxl,
shiduan2:child.zxl,
});
}
})
})
hejilist.forEach((acd,xdx)=>{
arr.forEach((che,ind)=>{
if(xdx==ind){
che.heji=acd.zxl;
}
})
})
arr.unshift({
name:'项目合计',
shiduan1:res.data.startSum,
shiduan2:res.data.endSum,
heji:res.data.comparedSum,
})

this.SwitchCARDS2(newline,newline1,newline2)
this.tableData=arr;
console.log( this.tableData)
}
})

},
//切换一级
Level1tap(){
this.Level1.forEach((item,index)=>{
if(this.Level1id==item.marketingId){
this.Level2=item.children || [];
this.Level2id=item.children[0].marketingId || '';
}
})
this.trendAnalysisLevel2()
},
//切换er级
Level2tap(){
this.trendAnalysisLevel2()
},
//一二级
trendAnalysisAllLevel(){
let pamaet={
showStatus:'',
houseId:this.houseId,
timeType:0,
firstStartDate:this.page.openTime,
firstEndDate:this.page.closeTime,
lastStartDate:this.selectTime,
lastEndDate:this.selectTime1,
}

if(this.timeType==-1){
pamaet.timeType=null
}else{
pamaet.timeType=this.timeType
}
if(this.checked==true){
pamaet.showStatus=1;
pamaet.timeType=null
}else{
pamaet.showStatus=0
}
this.$api.http.trendAnalysisAllLevel(pamaet).then((res) => {
this.Level1=res.data || [];
this.Level1id=res.data[0].marketingId || '';
this.Level2=res.data[0].children || [];
this.Level2id=res.data[0].children[0].marketingId || '';
this.trendAnalysisLevel2()
})
},

//切换顾问
consultanttap(){
this.trendAnalysisAccount()
},
// 获取顾问
trendAnalysisAllAccount(pamaet){
this.$api.http.trendAnalysisAllAccount(pamaet).then((res) => {
this.consultantlist=res.data || [];
if( this.consultantlist.length!=0){
this.consultantid=res.data[0].accountId;
this.trendAnalysisAccount()
}else{
echarts.init(document.getElementById("main")).dispose();
this.echartsisshow=false;
this.tableData=[];
}
})
},
trendAnalysisAccount(){
var that=this;
let pamaet={
showStatus:'',
houseId:this.houseId,
timeType:0,
firstStartDate:this.page.openTime,
firstEndDate:this.page.closeTime,
lastStartDate:this.selectTime,
lastEndDate:this.selectTime1,

}
if(this.aliasclass==3){
pamaet.accountId=this.consultantid
}
if(this.timeType==-1){
pamaet.timeType=null
}else{
pamaet.timeType=this.timeType
}
if(this.checked==true){
pamaet.showStatus=1;
pamaet.timeType=null
}else{
pamaet.showStatus=0
}
this.$api.http.trendAnalysisAccount(pamaet).then((res) => {
if(this.Confirmthecontrast==false){
let newlist=res.data.firstList || [];
var newline=[];//起始数据
var newlinename=[];
let tablist=[
{name:'时间',}
]
let tablist2=[
{name:that.customtime[0].substring(5,10)+'/'+that.customtime[1].substring(5,10),}
]
newlist.map(item=>{
newline.push(item.zxl)
newlinename.push({name:item.name,max:100})
tablist.push({name:item.name})
tablist2.push({name:item.zxl+'%',})
})
this.tablelist1=tablist;
this.tablelist2=tablist2;
this.tablelist3=[];
this.tablelist4=[];
this.piechart(newline,newlinename)
}else{

let newlist=res.data.firstList || [];
let newlist2=res.data.secondList|| [];
let newlist4=res.data.thirdList|| [];

var newline=[];//起始数据
let newline2=[];//对比数据
var newlinename=[];

let tablist1=[
{name:'时间',}
]
let tablist2=[
{name:that.customtime[0].substring(5,10)+'/'+that.customtime[1].substring(5,10),}
]
let tablist3=[
{name:that.selectTime.substring(5,10)+'/'+that.selectTime1.substring(5,10),}
]
let tablist4=[
{name:'变化',}
]

newlist.map(item=>{
newline.push(item.zxl)
newlinename.push({name:item.name,max:100})
tablist1.push({name:item.name})
tablist2.push({name:item.zxl+'%',})
})
newlist2.map(item=>{
newline2.push(item.zxl)
tablist3.push({name:item.zxl+'%',})
})
newlist4.map(item=>{
tablist4.push({name:item.zxl,})
})

this.tablelist1=tablist1;
this.tablelist2=tablist2;
this.tablelist3=tablist3;
this.tablelist4=tablist4;
this.piechart2(newline,newlinename,newline2)
}
})
},
//获取卡片
trendtrendAnalysis(){
@@ -231,6 +528,7 @@ export default {
lastStartDate:this.selectTime,
lastEndDate:this.selectTime1
}

if(this.timeType==-1){
pamaet.timeType=null
}else{
@@ -245,7 +543,27 @@ export default {
this.$api.http.trendtrendAnalysis(pamaet).then((res) => {
this.cardobj=res.data;
if(this.aliasclass==1){
this.echartsisshow=true;
this.trendtrendAnalysisProject(pamaet)
}else if(this.aliasclass==2){
if(this.departmentid!=''){
pamaet.deptId=this.departmentid
this.trendtrendAnalysisProject(pamaet)
}else{
echarts.init(document.getElementById("main")).dispose();
this.echartsisshow=false;
this.tableData=[];
}
}else if(this.aliasclass==3){
if(this.consultantid.length==0){
this.trendAnalysisAllAccount(pamaet)
}else{
this.trendAnalysisAccount()
}
}else if(this.aliasclass==4){
this.trendAnalysisAccount()
}else{
this.trendAnalysisAllLevel()
}

})
@@ -309,6 +627,24 @@ export default {
}
})
},
//获取部门下拉菜单
overviewfindList(){
this.$api.http.overviewfindList({
houseId:this.houseId,
}).then((res) => {
this.departmentlist=res.data || [];
if(this.departmentlist.length!=0){
this.departmentid=res.data[0].deptId
}else{
this.departmentid=''
}
})
},
//切换部门
departmenttap(){
this.trendtrendAnalysis()
},


//选项卡切换
tapChange(idx){
@@ -569,6 +905,93 @@ export default {
myChart.resize();
});
},
piechart2(newline,newlinename,newline2){
echarts.init(document.getElementById("main")).dispose();
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['起始时间','对比时间'],
bottom: "10",
},
color:[
'#2671E2',
'#F3787B',
],
radar: {
// shape: 'circle',
indicator: newlinename
},
series: [
{
type: 'radar',
tooltip: {
trigger: 'item'
},
data: [
{
value:newline,
name: '起始时间'
},
{
value:newline2,
name: '对比时间'
},
]
}
]
};
option && myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},
piechart(newline,newlinename){
echarts.init(document.getElementById("main")).dispose();
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['起始时间'],
bottom: "10",
},
color:[
'#2671E2',
'#F3787B',
],
radar: {
// shape: 'circle',
indicator: newlinename
},
series: [
{
type: 'radar',
tooltip: {
trigger: 'item'
},
data: [
{
value:newline,
name: '起始时间'
},
]
}
]
};
option && myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
}

},
};
</script>
@@ -581,6 +1004,24 @@ export default {
padding-bottom: 100px;
}

.table {
border-collapse: collapse;
width: 100%;
}
.tbody {
display: block;
// width: 100%;
// overflow-x: auto;
// overflow-y: auto;
height: 220px;
}
.tbody tr {
display: table;
width: 100%;
table-layout: fixed;
// word-break: break-all;
}

#main {
width: 100%;
height: 380px;
@@ -746,4 +1187,14 @@ export default {
cursor: pointer;
color: #606266;
}
.theadtd{
width: 140px;
height: 48px;
border: 1px solid #E0E0E0;
text-align: center;
line-height: 48px;
font-size: 16px;
color: #32363D;

}
</style>

Write Preview
Loading…
Cancel
Save