|
- <template>
- <view>
- <view class="boxtittabs">
- <div class="items" @tap="screenShow = true">{{ showTimeText }}
- <u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
- </div>
- <div class="items" @tap="showTemplate = true">{{ showBeText }}
- <u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
- </div>
- </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" :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" :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="lineOpts" />
- </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>
-
- <!-- 更多筛选 -->
- <u-popup v-model="screenShow" mode="bottom" height="368">
- <view class="screen">
- <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天')">近15天</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6, '近30天')">近30天</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3, '自定义')">自定义</view>
- </view>
- </view>
- </view>
- </u-popup>
-
-
- <!-- 销讲业务 -->
- <u-select :mask-close-able="false" label-name="templateName" value-name="id" v-model="showTemplate"
- mode="single-column" :list="templateList" @cancel="templateCancel" @confirm="templateConfirm"></u-select>
-
-
-
- <!-- 销讲业务2 -->
- <u-select :mask-close-able="false" label-name="templateName" value-name="id" v-model="showTemplates"
- mode="single-column" :list="templateLists" @cancel="showTemplates = false" @confirm="templateConfirms">
- </u-select>
- <!-- 加载组件 -->
- <u-loadings v-model="LOADING"></u-loadings>
-
- </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: {
- yAxis: {
- data: [{
- max: 100,
- min: 0,
- }]
- }
- },
- isShow: true, // 默认都展示
-
- screenShow: false, // 时间筛选弹窗
- showTimeText: '近七天', // 展示文字
- showBeText: '全部业务', //
- templateList: [], // 销讲业务
- showTemplate: false, // 展示选择销讲业务弹窗
- marketingBusiness: '', // 选择的业务id
-
-
-
- showTemplates: false, // 展示选择销讲业务弹窗
- templateLists: [], // 销讲业务
- marketingBusinessId: '', // 选择的业务id
- showBeTexts: '', //
- };
- },
-
- onLoad(options) {
- this.LOADING = true
- // 获取项目id
- this.houseId = uni.getStorageSync('buildingID').id;
- // this.buildingname = uni.getStorageSync('buildingID').name;
- // 请求接口获取所有置业顾问员工的列表
- this.getStaffList()
- this.getMarketingBusiness()
- },
- onPullDownRefresh() {
- this.getStaffList()
- setTimeout(function() {
- uni.stopPullDownRefresh();
- }, 1000);
- },
- methods: {
- // 销讲业务方法
- templateCancel() {
- this.showTemplate = false;
- },
-
- // 确认选择销讲业务
- templateConfirm(e) {
- this.showTemplate = false;
- this.marketingBusiness = e[0].value
- this.showBeText = e[0].label
- this.getdata()
- },
-
-
- // 确认选择销讲业务
- templateConfirms(e) {
- this.showTemplates = false;
- this.marketingBusinessId = e[0].value
- this.showBeTexts = e[0].label
- this.getdata()
- },
-
- // 获取销讲业务
- getMarketingBusiness() {
- this.$u.get('/customer/marketingBusiness', {
- houseId: uni.getStorageSync('buildingID').id,
- }).then(res => {
- this.templateLists = res.map(item => {
- return item
- })
- this.marketingBusinessId = res[0].id
- this.showBeTexts = res[0].templateName
- this.templateList = res
- this.templateList.unshift({
- templateName: '全部业务',
- id: ''
- })
- })
- },
-
-
- //是否对比
- 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,
- marketingBusiness: this.marketingBusiness,
- })
- .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,
- marketingBusiness: this.marketingBusiness,
- })
- .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,
- marketingBusiness: this.marketingBusiness,
- })
- } 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,
- marketingBusiness: this.marketingBusiness,
- })
- }
- // 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,
- marketingBusiness: this.marketingBusinessId,
- })
- .then(res => {
- this.LOADING = false
- // 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)
- })
- }
-
- }).catch(e => {
- this.LOADING = false
- })
- },
- tabtimetap(index, text) {
- if (index == 3) {
- this.totalTimeShow = true;
- this.screenShow = false
- } else {
- this.screenShow = false
- this.showTimeText = text
- this.activeTotal = index;
- this.lastEndDate = ''
- this.lastStartDate = ''
- // 获取数据
- this.getdata()
- }
- },
- tabtimetap1(index) {
- this.activeTotal2 = index;
- // 调用方法
- this.getRecordList()
- },
- //自定义时间
- totalTimeChange(e) {
- console.log(e.startDate, e.endDate)
- this.screenShow = false
- this.showTimeText = `${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>
- .boxtittabs {
- width: 100%;
- height: 92rpx;
- background: #FFFFFF;
- display: flex;
- align-items: center;
-
- .items {
- padding: 0 24rpx;
- width: 50%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- .screen {
- width: 100%;
-
- .boxtittab {
- width: 100%;
- flex-direction: column;
- border: none;
- .tabbox {
- width: 100%;
- }
- }
- }
- .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>
|