|
- <template>
- <view>
- <view class="boxtittab">
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 4 }" @click="tabtimetap(4)">近七天</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 5 }" @click="tabtimetap(5)">近15天</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6)">近30天</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">自定义</view>
- </view>
- </view>
-
- <view class="timepick">
- <view class="timepicktime" @click="chiocStaff(0)">
- <view>{{staff1.label}}
- <image class="Underimg" src="../../../static/images/down.png" mode=""></image>
- </view>
- </view>
- <view class="timepickpick" @click="checkboxChange">
- <image v-if="timepickpickisshow" style="width: 30rpx;height: 30rpx;"
- src="../../../static/images/xuanzhong.png" mode=""></image>
- <view v-else style="width: 30rpx;height:30rpx;border: 1rpx solid #E0E0E0;"></view>
- <view style="font-size:26rpx;text-indent: 12rpx;">对比</view>
- </view>
- <view class="timepicktime" v-if="timepickpickisshow" @click="chiocStaff(1)">
- <view>{{staff2.label}}
- <image class="Underimg" src="../../../static/images/down.png" mode=""></image>
- </view>
- </view>
- </view>
- <view style="width: 100%;height: 20rpx;background: #f8f8f8;"></view>
- <view class="single">
- <view class="title">
- <view class="title1" style="flex: 1;">接待量</view>
- </view>
- <view class="hejisan">
- <view class="sanbox1" >
- <view class="text1-2">{{newTeam1||0}}</view>
- <view class="text1-1">{{staff1.label}}</view>
- </view>
- <view class="sanbox1" v-if="timepickpickisshow">
- <view class="text1-2">{{newAvg1||0}}</view>
- <view class="text1-1">{{staff2.label}}</view>
- </view>
- </view>
- <view class="danwei">来访(人)</view>
- <view class="uchaserbox">
- <qiun-data-charts v-if="isShow" type="line" :opts="lineOpts1" :chartData="lineOptsect" background="none" :ontouch="true"
- canvasId="wangxiaohuaerlingeryilingwuyibbb" :canvas2d="true" />
- </view>
- </view>
-
- <view style="width: 100%;height: 20rpx;background: #f8f8f8;"></view>
- <view class="single">
- <view class="title">
- <view class="title1" style="flex: 1;">录音时长</view>
- <view class="title3" style="flex: 1;">
- <!-- <view class="title3-box" style="width: 40%;" @click="tabtimetap1(0)">
- <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">有效录音</view>
- </view>
- <view class="title3-box" style="width: 40%;"@click="tabtimetap1(1)">
- <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">录音时长</view>
- </view> -->
- </view>
- </view>
- <view class="hejisan">
- <view class="sanbox1" >
- <view class="text1-2">{{newTeam2||0}}</view>
- <view class="text1-1">{{staff1.label}}</view>
- </view>
- <view class="sanbox1" v-if="timepickpickisshow">
- <view class="text1-2">{{newAvg2||0}}</view>
- <view class="text1-1">{{staff2.label}}</view>
- </view>
- </view>
- <view class="danwei">录音时长</view>
- <view class="uchaserbox">
- <qiun-data-charts v-if="isShow" type="line" :opts="lineOpts1" :chartData="lineOptsect1" background="none" :ontouch="true"
- canvasId="wangxiaouaerlingeryilingwuyibhh" :canvas2d="true" />
- </view>
- </view>
-
- <view style="width: 100%;height: 20rpx;background: #f8f8f8;"></view>
- <view class="single">
- <view class="title">
- <view class="title1" style="flex: 1;">销讲执行率</view>
- <view class="title3" style="flex: 1;">
- <!-- <view class="title3-box" style="width: 40%;" @click="tabtimetap1(0)">
- <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">有效录音</view>
- </view>
- <view class="title3-box" style="width: 40%;"@click="tabtimetap1(1)">
- <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">录音时长</view>
- </view> -->
- </view>
- </view>
- <view class="hejisan">
- <view class="sanbox1" >
- <view class="text1-2">{{newTeam3||0}}</view>
- <view class="text1-1">{{staff1.label}}</view>
- </view>
- <view class="sanbox1" v-if="timepickpickisshow">
- <view class="text1-2">{{newAvg3||0}}</view>
- <view class="text1-1">{{staff2.label}}</view>
- </view>
- </view>
- <view class="uchaserbox">
- <qiun-data-charts v-if="isShow" type="line" :chartData="lineOptsect2" background="none" :ontouch="true"
- canvasId="wangxiaohuaerlingryilingwuyibhh" :canvas2d="true" :opts="lineOpts1" />
- </view>
- </view>
-
- <view style="width: 100%;height: 20rpx;background: #f8f8f8;"></view>
- <view class="single">
- <view class="title" style="padding-right: 30rpx;">
- <view class="title1" style="flex: 1;">销讲能力</view>
- </view>
- <view class="uchaserbox">
- <qiun-data-charts v-if="isShow" type="radar" :opts="opts" :chartData="chartData" :canvas2d="true"
- canvasId="wangxiaohuaerlingeryilinwuycsdx" background="none" :loadingType="0" />
- </view>
- </view>
- <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
- <!-- 选择客户的选择框 -->
- <u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback" :default-value='selindex'>
- </u-select>
- <u-select v-model="staffShow1" :list="staffList1" @confirm="staffSelectCallback" :default-value='selindex'>
- </u-select>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- timepickpickisshow: true,
- totalTimeShow: false,
- activeTotal: 4,
- activeTotal2: 1,
- // 项目id
- houseId: '',
- staffList: [],
- staffList1: [],
- staffShow: false,
- staffShow1: false,
- newTeam1: '',
- newAvg1: '',
- newTeam2: '',
- newAvg2: '',
- newTeam3: '',
- newAvg3: '',
- staff1: {
- value: '',
- label: ''
- },
- staff2: {
- value: '',
- label: '平均'
- },
- lastStartDate: '',
- lastEndDate: '',
- selindex: [0],
- choseStaffFlag: false,
- lineOptsect: {
- "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
- "series": [{
- "name": "成交量1",
- "data": [35, 8, 25, 37, 4, 20]
- },
- {
- "name": "成交量2",
- "data": [40, 18, 45, 44, 10, 60]
- }
- ]
- },
- lineOptsect1: {
- "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
- "series": [{
- "name": "成交量1",
- "data": [35, 8, 25, 37, 4, 20]
- },
- {
- "name": "成交量2",
- "data": [40, 18, 45, 44, 10, 60]
- }
- ]
- },
- lineOptsect2: {
- "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
- "series": [{
- "name": "成交量1",
- "data": [35, 8, 25, 37, 4, 20]
- },
- {
- "name": "成交量2",
- "data": [40, 18, 45, 44, 10, 60]
- }
- ]
- },
- chartData: {
- "categories": ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
- "series": [{
- "name": "成交量",
- "data": [90, 110, 165, 195, 187, 172]
- }]
- },
- opts: {
- fontSize: 10,
- extra: {
- radar: {
- max: 100
- }
- }
- },
-
- lineOpts: {
- // enableScroll: true,
- // xAxis: {
- // disableGrid: true,
- // scrollShow: true,
- // itemCount: 8
- // },
- yAxis: {
- data: [
- {
- max: 100,
- min: 0,
- }
- ]
- }
- },
- lineOpts1: {
- // enableScroll: true,
- // xAxis: {
- // disableGrid: true,
- // scrollShow: true,
- // itemCount: 8
- // }
- },
- isShow: true, // 默认都展示
- };
- },
-
- onLoad: function(options) {
- // 获取项目id
- this.houseId = uni.getStorageSync('buildingID').id;
- // this.buildingname = uni.getStorageSync('buildingID').name;
- // 请求接口获取所有置业顾问员工的列表
- this.getStaffList()
- },
- onPullDownRefresh() {
- this.getStaffList()
- setTimeout(function() {
- uni.stopPullDownRefresh();
- }, 1000);
- },
- methods: {
- //是否对比
- checkboxChange() {
- this.isShow = false
- this.timepickpickisshow = !this.timepickpickisshow;
- this.staff2.value = ''
- this.staff2.label = '平均'
- // this.getreception()
- // this.getRecordList()
- // this.getAwardList()
- // this.getAward()
- setTimeout(() => {
- this.isShow = true
- }, 10)
- this.getdata()
- },
- // 点击员工对比
- chiocStaff(idx) {
- if (idx == 0) {
- // 当选择了第一个的时候
- this.choseStaffFlag = false
- this.staffShow = true
- } else {
- this.choseStaffFlag = true
- this.staffShow1 = true
- }
-
- },
- // 获取员工列表
- getStaffList() {
- this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId', {
- houseId: this.houseId
- })
- .then(res => {
- // console.log(res,'123')
- this.staffList = []
- this.staffList1 = []
- res.map(item => {
- let obj = {}
- obj.value = item.accountId
- obj.label = item.name
- this.staffList.push(obj)
- })
- this.staffList1 = [...this.staffList]
- this.staffList1.unshift({
- value: '',
- label: '平均'
- })
- this.staff1 = this.staffList[0]
- // this.getreception()
- // this.getRecordList()
- // this.getAwardList()
- // this.getAward()
- this.getdata()
- })
- },
- getdata() {
- this.getreception()
- this.getRecordList()
- this.getAward()
- this.getAwardList()
-
- },
- // 获取接待量数据
- getreception() {
- this.$u.post('/cusLvStatistics/employeeAnalysisReception', {
- userA: this.staff1.value,
- userB: this.staff2.value,
- houseId: this.houseId,
- timeType: this.lastEndDate ? null : this.activeTotal + '',
- lastEndDate: this.lastEndDate,
- lastStartDate: this.lastStartDate
- })
- .then(res => {
- this.newTeam1 = res.avg[0]
- this.newAvg1 = res.avg[1]
- // console.log(res)
- let first = res.first
- let second = res.second
- this.lineOptsect.categories = []
- if (!this.timepickpickisshow) {
- this.lineOptsect.series = [{
- name: first[0].accountName,
- data: []
- }]
- first.map(item => {
- this.lineOptsect.categories.push(item.statDate.slice(5, 10))
- this.lineOptsect.series[0].data.push(item.receptionCount || 0)
- })
- } else {
- this.lineOptsect.series = [{
- name: first[0].accountName,
- data: []
- },
- {
- "name": second[0].accountName,
- "data": []
- }
- ]
- first.map(item => {
- this.lineOptsect.categories.push(item.statDate.slice(5, 10))
- this.lineOptsect.series[0].data.push(item.receptionCount)
- })
- second.map(item => {
- this.lineOptsect.series[1].data.push(item.receptionCount)
- })
- }
- // console.log(this.lineOptsect,'1')
- })
- },
- // 销奖趋势
- getAward() {
- this.$u.post('/cusLvStatistics/employeeAnalysisExacutiveRate', {
- userA: this.staff1.value,
- userB: this.staff2.value,
- houseId: this.houseId,
- timeType: this.lastEndDate ? null : this.activeTotal + '',
- lastEndDate: this.lastEndDate,
- lastStartDate: this.lastStartDate
- })
- .then(res => {
- this.newTeam3 = res.avg[0]
- this.newAvg3 = res.avg[1]
- // console.log(res)
- let first = res.first
- let second = res.second
- this.lineOptsect2.categories = []
- if (!this.timepickpickisshow) {
- this.lineOptsect2.series = [{
- name: first[0].accountName,
- data: []
- }]
- first.map(item => {
- // console.log(item)
- this.lineOptsect2.categories.push(item.statDate.slice(5, 10))
- this.lineOptsect2.series[0].data.push(item.sumFraction)
- })
- } else {
- this.lineOptsect2.series = [{
- name: first[0].accountName,
- data: []
- },
- {
- "name": second[0].accountName,
- "data": []
- }
- ]
- first.map(item => {
- this.lineOptsect2.categories.push(item.statDate.slice(5, 10))
- this.lineOptsect2.series[0].data.push(item.sumFraction)
- })
- second.map(item => {
- this.lineOptsect2.series[1].data.push(item.sumFraction)
- })
- }
- // console.log(this.lineOptsect2,'3')
- })
- },
- // 获取有效录音
- async getRecordList() {
- // 当选择有效录音时
- let res = null
- if (this.activeTotal2 == 0) {
- res = await this.$u.post('/cusLvStatistics/employeeAnalysisEffectiveRecording', {
- userA: this.staff1.value,
- userB: this.staff2.value,
- houseId: this.houseId,
- timeType: this.lastEndDate ? null : this.activeTotal + '',
- lastEndDate: this.lastEndDate,
- lastStartDate: this.lastStartDate
- })
- } else {
- res = await this.$u.post('/cusLvStatistics/employeeAnalysisRecordingTime', {
- userA: this.staff1.value,
- userB: this.staff2.value,
- houseId: this.houseId,
- timeType: this.lastEndDate ? null : this.activeTotal + '',
- lastEndDate: this.lastEndDate,
- lastStartDate: this.lastStartDate
- })
- }
- // console.log(res)
- this.newTeam2 = res.avg[0]
- this.newAvg2 = res.avg[1]
- let first = res.first
- let second = res.second
- this.lineOptsect1.categories = []
- if (!this.timepickpickisshow) {
- this.lineOptsect1.series = [{
- name: first[0].accountName,
- data: []
- }]
- first.map(item => {
- this.lineOptsect1.categories.push(item.statDate.slice(5, 10))
- this.lineOptsect1.series[0].data.push(item.sumDuration)
- })
- } else {
- this.lineOptsect1.series = [{
- name: first[0].accountName,
- data: []
- },
- {
- "name": second[0].accountName,
- "data": []
- }
- ]
- first.map(item => {
- this.lineOptsect1.categories.push(item.statDate.slice(5, 10))
- this.lineOptsect1.series[0].data.push(item.sumDuration)
- })
- second.map(item => {
- this.lineOptsect1.series[1].data.push(item.sumDuration)
- })
- }
- // console.log(this.lineOptsect1,'2')
- },
- // 获取销奖能力
- getAwardList() {
- this.chartData = {
- categories: [],
- series: []
- }
- this.$u.post('/cusLvStatistics/employeeAnalysisLevel1Fraction', {
- userA: this.staff1.value,
- userB: this.staff2.value,
- houseId: this.houseId,
- timeType: this.lastEndDate ? null : this.activeTotal + '',
- lastEndDate: this.lastEndDate,
- lastStartDate: this.lastStartDate
- })
- .then(res => {
- // console.log(res)
- let first = res.first
- let second = res.second
- this.chartData.categories = []
- if (!this.timepickpickisshow) {
- this.chartData.series = [{
- name: first[0].accountName,
- data: []
- }]
- first.map(item => {
- this.chartData.categories.push(item.name)
- this.chartData.series[0].data.push(item.avgExecutionRate)
- })
- } else {
- this.chartData.series = [{
- name: first[0].accountName,
- data: []
- },
- {
- "name": second[0].accountName,
- "data": []
- }
- ]
- first.map(item => {
- this.chartData.categories.push(item.name)
- this.chartData.series[0].data.push(item.avgExecutionRate)
- })
- second.map(item => {
- this.chartData.series[1].data.push(item.avgExecutionRate)
- })
- }
-
- })
- },
- tabtimetap(index) {
- this.activeTotal = index;
- if (index == 3) {
- this.totalTimeShow = true;
- } else {
- this.lastEndDate = ''
- this.lastStartDate = ''
- // 获取数据
- // this.getreception()
- // this.getRecordList()
- // this.getAwardList()
- this.getdata()
- }
- },
- tabtimetap1(index) {
- this.activeTotal2 = index;
- // 调用方法
- this.getRecordList()
- },
- //自定义时间
- totalTimeChange(e) {
- console.log(e.startDate, e.endDate)
- this.activeTotal = 3;
- this.lastEndDate = e.endDate
- this.lastStartDate = e.startDate
- // 获取数据
- // this.getreception()
- // this.getRecordList()
- // this.getAwardList()
- this.getdata()
- },
- staffSelectCallback(e) {
- if (this.choseStaffFlag) {
- // 第二个客户
- this.staff2 = e[0]
- } else {
- // 第一个客户
- this.staff1 = e[0]
- }
- if (this.staff1.label == this.staff2.label) {
- uni.showToast({
- title: '请勿选择重复',
- icon: 'none'
- })
- this.staff2.label = '请选择'
- return
- } else {
- // 获取数据
- // this.getreception()
- // this.getRecordList()
- // this.getAwardList()
- this.getdata()
- }
-
-
- },
- },
- }
- </script>
- <style lang="scss" scoped>
- .boxtittab {
- position: sticky;
- top: var(--window-top);
- z-index: 999;
- }
- .hejisan{
- width: 92%;
- margin: 0 auto;
- display: flex;
- padding-bottom:20rpx;
- .sanbox1{
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- position: relative;
- &::after{
- position: absolute;
- content: '';
- width: 1rpx;
- height: 86rpx;
- background: #E0E0E0;
- right: 0;
- top: 0;
- }
- &:last-child::after {
- position: absolute;
- content: '';
- width: 1rpx;
- height: 86rpx;
- right: 0;
- top: 0;
- background: #fff;
- }
- }
- .text1-1{
- font-size: 24rpx;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #333333;
- line-height: 32rpx;
- }
- .text1-2{
- color: #333333;
- font-size: 40rpx;
- line-height: 46rpx;
- font-family: PingFangSC-Regular, PingFang SC;
- margin-bottom: 10rpx;
- }
- }
-
- // 对比时间切换
- .timepick {
- width: 100%;
- height: 90rpx;
- display: flex;
- align-items: center;
- }
-
- .timepicktime {
- width: 260rpx;
- height: 50rpx;
- margin-left: 30rpx;
- display: flex;
- align-items: center;
- background: #FFFFFF;
- }
-
- .timepickpick {
- width: 110rpx;
- height: 50rpx;
- line-height: 50rpx;
- margin-left: 30rpx;
- display: flex;
- align-items: center;
- }
-
- .Underimg {
- width: 28rpx;
- height: 14rpx;
- margin-left: 15rpx;
- }
- </style>
|