|
- <template>
- <div class="box-center">
- <!-- 头 -->
- <div class="app-titel">
- <div style="text-indent: 30px;">接待时间:</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>
- <el-select
- v-model="houseTypes"
- @change="sysChange"
- style="width: 100px; margin-left: 10px"
- placeholder="请选择"
- >
- <el-option
- v-for="item in options2"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- <div style="margin-left: auto;margin-right:10px;" v-if="sta_bui_downLoad">
- <el-button @click="downLoad">导出</el-button>
- </div>
- </div>
-
- <!-- 表格 -->
- <div class="cen-tab">
- <el-table
- :data="tableData"
- stripe
- style="width: 100%">
- <el-table-column
- prop="batchId"
- label="序号"
- align="center"
- >
- <template slot-scope="scope">
- <span v-if="scope.$index+1==tableData.length"> 合计/平均</span>
- <span v-else> {{scope.$index+1}}</span>
- </template>
- </el-table-column>
- <el-table-column
- prop="houseName"
- label="楼盘"
- align="center"
- >
- </el-table-column>
- <el-table-column
- prop="accountNum"
- label="顾问数"
- align="center">
- </el-table-column>
- <el-table-column
- prop="receptionCount"
- label="接待量"
- align="center">
- </el-table-column>
- <el-table-column
- prop="activeCustomer"
- label="有效接待"
- align="center"
- >
- </el-table-column>
- <el-table-column
- prop="prohibitedCustomer"
- label="违禁接待次数"
- align="center"
- >
- </el-table-column>
- <el-table-column
- prop="sumDuration"
- label="接待时长(分钟)"
- align="center"
- >
- <template slot-scope="scope">
- {{Math.floor(scope.row.sumDuration/60) || 0}}
- </template>
- </el-table-column>
- <el-table-column
- prop="fraction"
- label="平均执行率"
- align="center"
- >
- <template slot-scope="{row}">
- {{row.fraction}}%
- </template>
- </el-table-column>
- <el-table-column
- prop="prohibitedZb"
- label="违禁接待占比"
- align="center"
- >
- <template slot-scope="{row}">
- {{row.prohibitedZb}}%
- </template>
- </el-table-column>
- </el-table>
- <div style="display: flex;justify-content:flex-end;margin-top: 10px;">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="page"
- :page-sizes="[10, 30, 50]"
- :page-size="pagesize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total">
- </el-pagination>
- </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">{{objList1.sum}}次</div>
- </div>
- <div class="sanbox1" style="width: 40%;">
- <div class="text1-1">楼盘总数</div>
- <div class="text1-2">{{objList1.num}}个</div>
- </div>
- <div class="sanbox1" style="width: 25%;">
- <div class="text1-1">平均接待</div>
- <div class="text1-2">{{objList1.avg}}次</div>
- </div>
- </div>
- <div style="overflow-y:auto;height: 250px;width: 94%;margin: 0 auto;">
- <div class="jinbox" v-for="(item,i) in objList1.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">平均执行率(TOP10)</div>
- </div>
- <div class="hejisan">
- <div class="sanbox1" style="width: 50%;">
- <div class="text1-1">楼盘总数</div>
- <div class="text1-2">{{objList2.num}}个</div>
- </div>
- <div class="sanbox1" style="width: 50%;">
- <div class="text1-1">平均执行率</div>
- <div class="text1-2">{{objList2.avg}}%</div>
- </div>
- </div>
- <div style="overflow-y:auto;height: 250px;width: 94%;margin: 0 auto;">
- <div class="jinbox" v-for="(item,i) in objList2.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>
-
- <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">{{objList3.sum}}次</div>
- </div>
- <div class="sanbox1" style="width: 40%;">
- <div class="text1-1">顾问</div>
- <div class="text1-2">{{objList3.num}}个</div>
- </div>
- <div class="sanbox1" style="width: 25%;">
- <div class="text1-1">人均接待量</div>
- <div class="text1-2">{{objList3.avg}}次</div>
- </div>
- </div>
- <div style="overflow-y:auto;height: 250px;width: 94%;margin: 0 auto;">
- <div class="jinbox" v-for="(item,i) in objList3.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">接待时长(分钟)(TOP10)</div>
- </div>
- <div class="hejisan">
- <div class="sanbox1" style="width: 35%;">
- <div class="text1-1">时长合计</div>
- <div class="text1-2">{{objList4.sum}}分钟</div>
- </div>
- <div class="sanbox1" style="width: 40%;">
- <div class="text1-1">楼盘总数</div>
- <div class="text1-2">{{objList4.num}}个</div>
- </div>
- <div class="sanbox1" style="width: 25%;">
- <div class="text1-1">平均时长</div>
- <div class="text1-2">{{objList4.avg}}分钟</div>
- </div>
- </div>
- <div style="overflow-y:auto;height: 250px;width: 94%;margin: 0 auto;">
- <div class="jinbox" v-for="(item,i) in objList4.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>
- </template>
-
- <script>
- import { mapGetters } from "vuex";
- import { exportMethodPost} from "@/util/util";
- export default {
- data() {
- return {
- role:'',
- houseId: "",
- orgCode:'',
- page:1,
- pagesize:10,
- buildingoptions:[],
- TimetoAhoose: 4,
- customtime: [],
- currentPage4:1,
- total:0,
- ceratelist:[
- {name:'还是得',avgZxl:80},
- {name:'大大奥德赛',avgZxl:90},
- {name:'沙发和',avgZxl:20},
- {name:'还是得',avgZxl:10},
- {name:'还客户家客户是得',avgZxl:80},
- ],
- tableData:[],
- objList1:{
- avg:'',
- list:[],
- num:'',
- sum:''
- },
- objList2:{
- avg:'',
- list:[],
- num:'',
- },
- objList3:{
- avg:'',
- list:[],
- num:'',
- sum:''
- },
- objList4:{
- avg:'',
- list:[],
- num:'',
- sum:''
- },
- houseTypes: "0,1",
- options2: [
- {
- label: "正式数据",
- value: "0,1",
- },
- {
- label: "测试数据",
- value: "2,3",
- },
- ],
-
- };
- },
- computed: {
- ...mapGetters(["permissions"]),
- },
- created() {
- this.sta_bui_downLoad = this.permissions["sta_bui_downLoad"];
- },
- mounted() {
- this.role=localStorage.getItem("orgType");
- this.houseId = localStorage.getItem("houseId");
- this.orgCode= localStorage.getItem("orgCode");
- this.gethouseData()
- },
- methods: {
- downLoad(){
- let pamaet={
- orgType:this.role,
- dateType:0,
- statDateStart:this.statDateStart,
- statDateEnd:this.statDateEnd,
- houseTypes: this.houseTypes,
- }
- 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
- }
- exportMethodPost('autoSR/cusStageStatistics/houseTableExport','楼盘对比',pamaet)
- },
- sysChange() {
- this.gethouseData()
- },
- gethouseData(){
- this.houseTable()
- this.houseData1()
- this.houseData2()
- this.houseData3()
- this.houseData4()
- },
- houseData1(){
- let pamaet={
- orgType:this.role,
- dateType:0,
- statDateStart:this.statDateStart,
- statDateEnd:this.statDateEnd,
- type:1,
- houseTypes: this.houseTypes,
- }
- 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.houseData(pamaet).then((res) => {
- let arr=[]
- res.data.list.map(item=>{
- let obj={}
- obj.name=item.houseName
- obj.zxl=item.activeCustomer
- arr.push(obj)
- })
- arr=this.dealData(arr)
- this.objList1={
- avg: res.data.avg || 0,
- num: res.data.num || 0,
- sum:res.data.sum || 0,
- list:arr || []
- }
- })
- },
- houseData2(){
- let pamaet={
- orgType:this.role,
- dateType:0,
- statDateStart:this.statDateStart,
- statDateEnd:this.statDateEnd,
- type:2,
- houseTypes: this.houseTypes,
- }
- 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.houseData(pamaet).then((res) => {
- let arr=[]
- res.data.list.map(item=>{
- let obj={}
- obj.name=item.houseName;
- obj.zxl=item.fraction;
- arr.push(obj)
- })
- this.objList2={
- avg: res.data.avg || 0,
- num: res.data.num || 0,
- list:arr || []
- }
- })
- },
- houseData3(){
- let pamaet={
- orgType:this.role,
- dateType:0,
- statDateStart:this.statDateStart,
- statDateEnd:this.statDateEnd,
- type:3,
- houseTypes: this.houseTypes,
- }
- 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.houseData(pamaet).then((res) => {
- console.log(res)
- let arr=[]
- res.data.list.map(item=>{
- let obj={}
- obj.name=item.houseName
- obj.zxl=item.prohibitedCustomer
- arr.push(obj)
- })
- console.log(arr)
- arr=this.dealData(arr)
- this.objList3={
- avg: res.data.avg || 0,
- num: res.data.num || 0,
- sum:res.data.sum || 0,
- list:arr || []
- }
- console.log(this.objList3)
- })
- },
- houseData4(){
- let pamaet={
- orgType:this.role,
- dateType:0,
- statDateStart:this.statDateStart,
- statDateEnd:this.statDateEnd,
- type:4,
- houseTypes: this.houseTypes,
- }
- 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.houseData(pamaet).then((res) => {
- let arr=[]
- res.data.list.map(item=>{
- let obj={}
- obj.name=item.houseName;
- obj.zxl=Math.floor(item.sumDuration/60) || 0;
- arr.push(obj)
- })
- arr=this.dealData(arr)
- this.objList4={
- avg: Math.floor(res.data.avg/60) || 0,
- num: res.data.num || 0,
- sum:Math.floor(res.data.sum/60) || 0,
- list:arr || []
- }
- })
- },
-
-
- houseTable(){
- let pamaet={
- orgType:this.role,
- dateType:0,
- statDateStart:this.statDateStart,
- statDateEnd:this.statDateEnd,
- current:this.page,
- size:this.pagesize,
- houseTypes: this.houseTypes,
- }
- 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) => {
- this.tableData=res.data.records || [];
- this.total=res.data.total || 0;
- })
- },
-
- handleSizeChange(val) {
- this.pagesize=val;
- this.houseTable()
- },
- handleCurrentChange(val) {
- this.page=val;
- this.houseTable()
- },
- confirmtime(){
- this.TimetoAhoose=7
- this.statDateStart=this.customtime[0];
- this.statDateEnd=this.customtime[1];
- this.page=1;
- this.gethouseData()
- },
- //切换时间
- tabtimetap(index) {
- this.TimetoAhoose = index;
- this.statDateStart='';
- this.statDateEnd='';
- this.page=1;
- this.gethouseData()
- },
- 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) || 0;
- })
- return arr
- },
-
- },
- };
- </script>
-
- <style scoped="scoped" lang="scss" >
- .box-center {
- width: 100%;
- padding: 15px;
- min-width: 1000px;
- 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;
- margin-left: 20px;
- 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;
- }
- }
- </style>
|