Browse Source

init

newStyle
wangxiaohua 2 years ago
parent
commit
372c339fc8
3 changed files with 322 additions and 191 deletions
  1. +11
    -0
      src/api/modules/http.js
  2. +310
    -190
      src/page/wel.vue
  3. +1
    -1
      vue.config.js

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

@@ -31,6 +31,17 @@ export function putObj(obj) {
})
}

// 首页卡片
export function houseIndex(query) {
return request({
url: 'autoSR/cusStageStatistics/houseIndex',
method:'get',
params:query
})
}



// 代理商管理列表
export function getAgentList(query) {
return request({


+ 310
- 190
src/page/wel.vue View File

@@ -1,218 +1,243 @@
<template>
<div class="box-center">
<div class="app-titel">
<div class="titel-text">时间</div>
<div class="toptimeqhuan">
<div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">近7天</div>
<div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)"> 近15天 </div>
<div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)"> 近30天 </div>
</div>
<div style="margin-left: 26px">
<el-date-picker
@change="confirmtime()"
v-model="customtime"
type="daterange"
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="page-container">
<div class="pagechen">
<div class="pageboxtitle1">接待客户 (个)</div>
<div class="pageboxtitle2">
<div class="span1">5020</div>
<div class="span2">
<span class="span2-1"> 环比:288</span>
<span class="span2-2">25%</span>
</div>
<div v-if="role==3">
<div class="app-titel">
<div class="titel-text">楼盘选择</div>
<div style="margin-left: 26px">
<el-select v-model="houseId" @change="houseChange" placeholder="请选择">
<el-option
v-for="item in houseList"
:key="item.id"
:label="item.propertyName"
:value="item.id"
>
</el-option>
</el-select>
</div>
</div>
<div class="pagechen">
<div class="pageboxtitle1">正在接待客户 (个)</div>
<div class="pageboxtitle2">
<div class="span1">20</div>
<div class="app-titel" style="margin-top:14px;">
<div class="titel-text">时间</div>
<div class="toptimeqhuan">
<div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">今天</div>
<div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)"> 近7天 </div>
<div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)"> 近30天 </div>
</div>
<div style="margin-left: 26px">
<el-date-picker
@change="confirmtime()"
v-model="customtime"
type="daterange"
range-separator="-"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</div>
<div class="pagechen">
<div class="pageboxtitle1">等待接待客户 (个)</div>
<div class="pageboxtitle2">
<div class="span1">50</div>
</div>
<!-- 卡片部分 -->
<div class="page-container">
<div class="pagechen">
<div class="pageboxtitle1">接待量 (个)</div>
<div class="pageboxtitle2">
<div class="span1">{{cardlist.datalist.receptionCount || 0}}</div>
<div class="span2">
<span class="span2-1"> 环比:{{cardlist.sequential.receptionCount || 0}}</span>
<span class="span2-2">{{cardlist.liftlist.receptionCount || 0}}%</span>
</div>
</div>
</div>
</div>
<div class="pagechen">
<div class="pageboxtitle1">值班顾问 (个)</div>
<div class="pageboxtitle2">
<div class="span1">520</div>
<div class="pagechen">
<div class="pageboxtitle1">新增客户 (个)</div>
<div class="pageboxtitle2">
<div class="span1">{{cardlist.datalist.activeCustomer || 0}}</div>
<div class="span2">
<span class="span2-1"> 环比:{{cardlist.sequential.activeCustomer || 0}}</span>
<span class="span2-2">{{cardlist.liftlist.activeCustomer || 0}}%</span>
</div>
</div>
</div>
</div>
<div class="pagechen">
<div class="pageboxtitle1">空闲顾问 (个)</div>
<div class="pageboxtitle2">
<div class="span1">5</div>
<div class="pagechen">
<div class="pageboxtitle1">正在接待 (个)</div>
<div class="pageboxtitle2">
<div class="span1">{{cardlist.datalist.receivingCustomer || 0}}</div>
</div>
</div>
</div>
</div>
<div style=" margin-top: 20px;" class="page-container">
<div class="pagechen">
<div class="pageboxtitle1">平均录音时长 (分钟)</div>
<div class="pageboxtitle2">
<div class="span1">5020</div>
<div class="span2">
<span class="span2-1"> 环比:288</span>
<span class="span2-2">25%</span>
</div>
<div class="pagechen">
<div class="pageboxtitle1">平均接待时长</div>
<div class="pageboxtitle2">
<div class="span1">{{cardlist.datalist.avgDuration || 0}}</div>
<div class="span2">
<span class="span2-1"> 环比:{{cardlist.sequential.avgDuration || 0}}</span>
<span class="span2-2">{{cardlist.liftlist.avgDuration || 0}}%</span>
</div>
</div>
</div>
</div>
<div class="pagechen">
<div class="pageboxtitle1">平均执行率 (%)</div>
<div class="pageboxtitle2">
<div class="span1">20</div>
<div class="span2">
<span class="span2-1"> 环比:288</span>
<span class="span2-2">25%</span>
</div>
<div class="pagechen">
<div class="pageboxtitle1">销讲执行率</div>
<div class="pageboxtitle2">
<div class="span1">{{cardlist.datalist.fraction || 0}}</div>
<div class="span2">
<span class="span2-1"> 环比:{{cardlist.sequential.fraction || 0}}</span>
<span class="span2-2">{{cardlist.liftlist.fraction || 0}}%</span>
</div>
</div>
</div>
</div>
<div class="pagechen">
<div class="pageboxtitle1">平均禁忌执行率 (%)</div>
<div class="pageboxtitle2">
<div class="span1">50</div>
<div class="span2">
<span class="span2-1"> 环比:288</span>
<span class="span2-2">25%</span>
</div>
</div>
<div style=" margin-top: 20px;" class="page-container">
<div class="pagechen">
<div class="pageboxtitle1">违禁预警</div>
<div class="pageboxtitle2">
<div class="span1">{{cardlist.datalist.prohibitedCustomer || 0}}</div>
<div class="span2">
<span class="span2-1"> 环比:{{cardlist.sequential.prohibitedCustomer || 0}}</span>
<span class="span2-2">{{cardlist.liftlist.prohibitedCustomer || 0}}%</span>
</div>
</div>
</div>
</div>
<div class="pagechen">
<div class="pageboxtitle1">接到平均得分 (分)</div>
<div class="pageboxtitle2">
<div class="span1">80</div>
<div class="span2">
<span class="span2-1"> 环比:288</span>
<span class="span2-2">25%</span>
</div>
<div class="pagechen">
<div class="pageboxtitle1">违禁占比</div>
<div class="pageboxtitle2">
<div class="span1">{{cardlist.datalist.prohibitedZb || 0}}</div>
<div class="span2">
<span class="span2-1"> 环比:{{cardlist.sequential.prohibitedZb || 0}}</span>
<span class="span2-2">{{cardlist.liftlist.prohibitedZb || 0}}%</span>
</div>
</div>
</div>
</div>
<div class="pagechen">
<div class="pageboxtitle1">急需充电的工牌 (个)</div>
<div class="pageboxtitle2">
<div class="span1">2</div>
<div class="pagechen">
<div class="pageboxtitle1">顾问</div>
<div class="pageboxtitle2">
<div class="span1">{{cardlist.datalist.accountNum || 0}}</div>
<div class="span2">
<span class="span2-1"> 环比:{{cardlist.sequential.accountNum || 0}}</span>
<span class="span2-2">{{cardlist.liftlist.accountNum || 0}}%</span>
</div>
</div>
</div>
<div class="pagechen1"></div>
<div class="pagechen1" ></div>
</div>
<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">违禁提醒</div>
</div>
</div>
</div>


<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">违禁提醒</div>
</div>
<div class="tabbox">
<el-table
:header-cell-style="{background:'#F2F4F5'}"
:data="tableData"
height="320"
style="width: 100%">
<el-table-column
prop="name"
label="顾问"
align="center">
</el-table-column>

<div class="tabbox">
<el-table
:header-cell-style="{background:'#F2F4F5'}"
:data="tableData"
height="320"
style="width: 100%">
<el-table-column
prop="name"
label="顾问"
align="center">
</el-table-column>
<el-table-column
prop="num"
label="禁忌执行率"
align="center">
</el-table-column>

<el-table-column
prop="num"
label="禁忌执行率"
align="center">
</el-table-column>
<el-table-column
prop="address"
label="接待时间"
align="center">
</el-table-column>

<el-table-column
prop="address"
label="接待时间"
align="center">
</el-table-column>
<el-table-column
prop="date"
label="操作"
align="center">
<template slot-scope="">
<div style="color: #2671E2;">查看</div>
</template>
</el-table-column>
</el-table>
</div>

<el-table-column
prop="date"
label="操作"
align="center">
<template slot-scope="">
<div style="color: #2671E2;">查看</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="you">
<div class="title">
<div class="text1" @click="tabclick('1')" :class="{ colostyle: classatec == 1 }">低电工牌</div>
<div class="text1" @click="tabclick('2')" :class="{ colostyle: classatec == 2 }">离线工牌</div>
</div>
<div class="tabbox" v-if="classatec==1">
<el-table
:header-cell-style="{background:'#F2F4F5'}"
:data="tableData"
height="320"
style="width: 100%">
<el-table-column
prop="name"
label="顾问"
align="center">
</el-table-column>

</div>
<div class="you">
<div class="title">
<div class="text1" @click="tabclick('1')" :class="{ colostyle: classatec == 1 }">低电工牌</div>
<div class="text1" @click="tabclick('2')" :class="{ colostyle: classatec == 2 }">离线工牌</div>
</div>
<div class="tabbox" v-if="classatec==1">
<el-table
:header-cell-style="{background:'#F2F4F5'}"
:data="tableData"
height="320"
style="width: 100%">
<el-table-column
prop="name"
label="顾问"
align="center">
</el-table-column>
<el-table-column
prop="num"
label="电话"
align="center">
</el-table-column>

<el-table-column
prop="num"
label="电话"
align="center">
</el-table-column>
<el-table-column
prop="address"
label="状态"
align="center">
</el-table-column>

<el-table-column
prop="address"
label="状态"
align="center">
</el-table-column>
<el-table-column
prop="date"
label="电量"
align="center">
</el-table-column>
</el-table>
</div>
<div class="tabbox" v-if="classatec==2">
<el-table
:header-cell-style="{background:'#F2F4F5'}"
:data="tableData"
height="320"
style="width: 100%">
<el-table-column
prop="name"
label="顾问"
align="center">
</el-table-column>

<el-table-column
prop="date"
label="电量"
align="center">
</el-table-column>
</el-table>
</div>
<div class="tabbox" v-if="classatec==2">
<el-table
:header-cell-style="{background:'#F2F4F5'}"
:data="tableData"
height="320"
style="width: 100%">
<el-table-column
prop="name"
label="顾问"
align="center">
</el-table-column>
<el-table-column
prop="num"
label="电话"
align="center">
</el-table-column>

<el-table-column
prop="num"
label="电话"
align="center">
</el-table-column>
<el-table-column
prop="address"
label="离线时间"
align="center">
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>

<el-table-column
prop="address"
label="离线时间"
align="center">
</el-table-column>
</el-table>
</div>
</div>


<div v-if="role==1" style=" width: 100%; text-align: center;line-height: 400px;font-size: 30px;">
代理商后台
</div>
<div v-if="role==2" style=" width: 100%; text-align: center;line-height: 400px;font-size: 30px;">
公司后台
</div>
<div v-if="role==0" style=" width: 100%; text-align: center;line-height: 400px;font-size: 30px;">
系统后台
</div>

</div>
</template>

@@ -221,9 +246,19 @@ export default {
name: 'Wel',
data() {
return {
role:'',
houseId:"",
houseList:[],
classatec:1,
customtime:[],
statDateStart:'',
statDateEnd:'',
TimetoAhoose:0,
cardlist:{
datalist:{},
liftlist:{},
sequential:{},
},
tableData: [
{
date: '80%',
@@ -305,16 +340,94 @@ export default {
},
]
}
},
mounted() {
this.role=localStorage.getItem("orgType");
if(this.role==3){
this.zkhousePage()
}

// comparedStat升降
//todayStat今天
//yesterdayStat环比

},
methods: {
//获取看片数据
getgicd(){
let obj = {
houseId:this.houseId,
dateType: this.TimetoAhoose,
statDateStart: this.statDateStart,
statDateEnd:this.statDateEnd
};
this.$api.http.houseIndex(obj).then((res) => {

this.cardlist.datalist={
receptionCount:res.data.todayStat.receptionCount,
activeCustomer:res.data.todayStat.activeCustomer,
receivingCustomer:res.data.todayStat.receivingCustomer,
avgDuration:res.data.todayStat.avgDuration,
fraction:res.data.todayStat.fraction,
prohibitedCustomer:res.data.todayStat.prohibitedCustomer,
prohibitedZb:res.data.todayStat.prohibitedZb,
accountNum:res.data.todayStat.accountNum,

}
this.cardlist.liftlist={
receptionCount:res.data.comparedStat.receptionCount,
activeCustomer:res.data.comparedStat.activeCustomer,
receivingCustomer:res.data.comparedStat.receivingCustomer,
avgDuration:res.data.comparedStat.avgDuration,
fraction:res.data.comparedStat.fraction,
prohibitedCustomer:res.data.comparedStat.prohibitedCustomer,
prohibitedZb:res.data.comparedStat.prohibitedZb,
accountNum:res.data.comparedStat.accountNum,
}
this.cardlist.sequential={
receptionCount:res.data.yesterdayStat.receptionCount,
activeCustomer:res.data.yesterdayStat.activeCustomer,
receivingCustomer:res.data.yesterdayStat.receivingCustomer,
avgDuration:res.data.yesterdayStat.avgDuration,
fraction:res.data.yesterdayStat.fraction,
prohibitedCustomer:res.data.yesterdayStat.prohibitedCustomer,
prohibitedZb:res.data.yesterdayStat.prohibitedZb,
accountNum:res.data.yesterdayStat.accountNum,
}
});
},
//切换楼盘
houseChange() {

},
//获取楼盘
zkhousePage() {
this.$api.api
.findHouseByUser({
orgType: localStorage.getItem("orgType"),
})
.then((res) => {
this.houseList = res.data;
this.houseId = res.data[0].id;
this.getgicd()
});
},
tabclick(i){
this.classatec=i;
},
tabtimetap(i){
this.TimetoAhoose=i
this.statDateStart='';
this.statDateEnd='';
this.customtime=[];
this.TimetoAhoose=i;
this.getgicd()
},
//切换世间
confirmtime() {
console.log(this.customtime)
this.statDateStart=this.customtime[0];
this.statDateEnd=this.customtime[1];
this.TimetoAhoose=5;
this.getgicd()
},
}
}
@@ -331,6 +444,13 @@ export default {
width: 100%;
display: flex;
margin-top: 16px;
.pagechen1{
flex: 1;
min-width: 223px;
border-radius: 4px;
margin-right: 20px;
padding: 20px;
}
.pagechen{
flex: 1;
min-width: 223px;


+ 1
- 1
vue.config.js View File

@@ -4,7 +4,7 @@
*/
// const url = 'http://pigx-gateway'
// const url = 'http://39.97.167.65:9999' //测试
// const url = 'http://192.168.31.160:9999' //长龙
// const url = 'http://192.168.31.168:9999' //长龙
const url = 'http://192.168.31.133:9999' //嘉豪
// const url = 'http://192.168.31.100:9999' //王笑



Loading…
Cancel
Save