AI销管
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

619 行
17 KiB

  1. <template>
  2. <view>
  3. <view class="boxtittab">
  4. <view class="tabbox">
  5. <view :class="{ activecllasscet: activeTotal == 4 }" @click="tabtimetap(4)">近七天</view>
  6. </view>
  7. <view class="tabbox">
  8. <view :class="{ activecllasscet: activeTotal == 5 }" @click="tabtimetap(5)">近15天</view>
  9. </view>
  10. <view class="tabbox">
  11. <view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6)">近30天</view>
  12. </view>
  13. <view class="tabbox">
  14. <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">自定义</view>
  15. </view>
  16. </view>
  17. <view class="timepick">
  18. <view class="timepicktime" @click="chiocStaff(0)">
  19. <view>{{staff1.label}}</view>
  20. <view>
  21. <image class="Underimg" src="../../../static/images/Underimg.png" mode=""></image>
  22. </view>
  23. </view>
  24. <view class="timepickpick">
  25. <view @click="checkboxChange()" style="width: 40rpx;height:40rpx;border: 1rpx solid #E0E0E0;">
  26. <image v-if="timepickpickisshow" style="width: 40rpx;height: 40rpx;"
  27. src="../../../static/images/xuanzhong.png" mode=""></image>
  28. </view>
  29. <view style="font-size:26rpx;text-indent: 12rpx;">对比</view>
  30. </view>
  31. <view class="timepicktime" v-if="timepickpickisshow" @click="chiocStaff(1)">
  32. <view>{{staff2.label}}</view>
  33. <view>
  34. <image class="Underimg" src="../../../static/images/Underimg.png" mode=""></image>
  35. </view>
  36. </view>
  37. </view>
  38. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  39. <view class="single">
  40. <view class="title">
  41. <view class="title1" style="flex: 1;">接待量</view>
  42. </view>
  43. <view class="hejibox">
  44. <view class="heji">{{staff1.label}}:{{newTeam1||0}}</view>
  45. <view class="heji" v-if="timepickpickisshow">{{staff2.label}}:{{newAvg1||0}}</view>
  46. </view>
  47. <view class="danwei">来访(人)</view>
  48. <view class="uchaserbox">
  49. <qiun-data-charts v-if="isShow" type="line" :chartData="lineOptsect" background="none" :ontouch="true"
  50. canvasId="wangxiaohuaerlingeryilingwuyibbb" :canvas2d="true" />
  51. </view>
  52. </view>
  53. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  54. <view class="single">
  55. <view class="title">
  56. <view class="title1" style="flex: 1;">录音时长</view>
  57. <view class="title3" style="flex: 1;">
  58. <!-- <view class="title3-box" style="width: 40%;" @click="tabtimetap1(0)">
  59. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">有效录音</view>
  60. </view>
  61. <view class="title3-box" style="width: 40%;"@click="tabtimetap1(1)">
  62. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">录音时长</view>
  63. </view> -->
  64. </view>
  65. </view>
  66. <view class="hejibox">
  67. <view class="heji">{{staff1.label}}:{{newTeam2||0}}</view>
  68. <view class="heji" v-if="timepickpickisshow">{{staff2.label}}:{{newAvg2||0}}</view>
  69. </view>
  70. <view class="danwei">录音时长</view>
  71. <view class="uchaserbox">
  72. <qiun-data-charts v-if="isShow" type="line" :chartData="lineOptsect1" background="none" :ontouch="true"
  73. canvasId="wangxiaouaerlingeryilingwuyibhh" :canvas2d="true" />
  74. </view>
  75. </view>
  76. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  77. <view class="single">
  78. <view class="title">
  79. <view class="title1" style="flex: 1;">销讲执行率</view>
  80. <view class="title3" style="flex: 1;">
  81. <!-- <view class="title3-box" style="width: 40%;" @click="tabtimetap1(0)">
  82. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">有效录音</view>
  83. </view>
  84. <view class="title3-box" style="width: 40%;"@click="tabtimetap1(1)">
  85. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">录音时长</view>
  86. </view> -->
  87. </view>
  88. </view>
  89. <view class="hejibox">
  90. <view class="heji">{{staff1.label}}:{{newTeam3||0}}</view>
  91. <view class="heji" v-if="timepickpickisshow">{{staff2.label}}:{{newAvg3||0}}</view>
  92. </view>
  93. <!-- <view class="danwei">录音时长</view> -->
  94. <view class="uchaserbox">
  95. <qiun-data-charts v-if="isShow" type="line" :chartData="lineOptsect2" background="none" :ontouch="true"
  96. canvasId="wangxiaohuaerlingryilingwuyibhh" :canvas2d="true" :opts="lineOpts" />
  97. </view>
  98. </view>
  99. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  100. <view class="single">
  101. <view class="title" style="padding-right: 30rpx;">
  102. <view class="title1" style="flex: 1;">销讲能力</view>
  103. </view>
  104. <view class="uchaserbox">
  105. <qiun-data-charts v-if="isShow" type="radar" :opts="opts" :chartData="chartData" :canvas2d="true"
  106. canvasId="wangxiaohuaerlingeryilinwuycsdx" background="none" :loadingType="0" />
  107. </view>
  108. </view>
  109. <!-- <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar> -->
  110. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  111. <!-- 选择客户的选择框 -->
  112. <u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback" :default-value='selindex'>
  113. </u-select>
  114. <u-select v-model="staffShow1" :list="staffList1" @confirm="staffSelectCallback" :default-value='selindex'>
  115. </u-select>
  116. </view>
  117. </template>
  118. <script>
  119. export default {
  120. data() {
  121. return {
  122. timepickpickisshow: true,
  123. totalTimeShow: false,
  124. activeTotal: 4,
  125. activeTotal2: 1,
  126. // 项目id
  127. houseId: '',
  128. staffList: [],
  129. staffList1: [],
  130. staffShow: false,
  131. staffShow1: false,
  132. newTeam1: '',
  133. newAvg1: '',
  134. newTeam2: '',
  135. newAvg2: '',
  136. newTeam3: '',
  137. newAvg3: '',
  138. staff1: {
  139. value: '',
  140. label: ''
  141. },
  142. staff2: {
  143. value: '',
  144. label: '平均'
  145. },
  146. lastStartDate: '',
  147. lastEndDate: '',
  148. selindex: [0],
  149. choseStaffFlag: false,
  150. lineOptsect: {
  151. "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
  152. "series": [{
  153. "name": "成交量1",
  154. "data": [35, 8, 25, 37, 4, 20]
  155. },
  156. {
  157. "name": "成交量2",
  158. "data": [40, 18, 45, 44, 10, 60]
  159. }
  160. ]
  161. },
  162. lineOptsect1: {
  163. "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
  164. "series": [{
  165. "name": "成交量1",
  166. "data": [35, 8, 25, 37, 4, 20]
  167. },
  168. {
  169. "name": "成交量2",
  170. "data": [40, 18, 45, 44, 10, 60]
  171. }
  172. ]
  173. },
  174. lineOptsect2: {
  175. "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
  176. "series": [{
  177. "name": "成交量1",
  178. "data": [35, 8, 25, 37, 4, 20]
  179. },
  180. {
  181. "name": "成交量2",
  182. "data": [40, 18, 45, 44, 10, 60]
  183. }
  184. ]
  185. },
  186. chartData: {
  187. "categories": ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
  188. "series": [{
  189. "name": "成交量",
  190. "data": [90, 110, 165, 195, 187, 172]
  191. }]
  192. },
  193. opts: {
  194. fontSize: 10,
  195. extra: {
  196. radar: {
  197. max: 100
  198. }
  199. }
  200. },
  201. lineOpts: {
  202. yAxis: {
  203. data: [
  204. {
  205. max: 100,
  206. min: 0,
  207. }
  208. ]
  209. }
  210. },
  211. isShow: true, // 默认都展示
  212. };
  213. },
  214. onLoad: function(options) {
  215. // 获取项目id
  216. this.houseId = uni.getStorageSync('buildingID').id;
  217. // this.buildingname = uni.getStorageSync('buildingID').name;
  218. // 请求接口获取所有置业顾问员工的列表
  219. this.getStaffList()
  220. },
  221. onPullDownRefresh() {
  222. this.getStaffList()
  223. setTimeout(function() {
  224. uni.stopPullDownRefresh();
  225. }, 1000);
  226. },
  227. methods: {
  228. //是否对比
  229. checkboxChange() {
  230. this.isShow = false
  231. this.timepickpickisshow = !this.timepickpickisshow;
  232. this.staff2.value = ''
  233. this.staff2.label = '平均'
  234. // this.getreception()
  235. // this.getRecordList()
  236. // this.getAwardList()
  237. // this.getAward()
  238. setTimeout(() => {
  239. this.isShow = true
  240. }, 10)
  241. this.getdata()
  242. },
  243. // 点击员工对比
  244. chiocStaff(idx) {
  245. if (idx == 0) {
  246. // 当选择了第一个的时候
  247. this.choseStaffFlag = false
  248. this.staffShow = true
  249. } else {
  250. this.choseStaffFlag = true
  251. this.staffShow1 = true
  252. }
  253. },
  254. // 获取员工列表
  255. getStaffList() {
  256. this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId', {
  257. houseId: this.houseId
  258. })
  259. .then(res => {
  260. // console.log(res,'123')
  261. this.staffList = []
  262. this.staffList1 = []
  263. res.map(item => {
  264. let obj = {}
  265. obj.value = item.accountId
  266. obj.label = item.name
  267. this.staffList.push(obj)
  268. })
  269. this.staffList1 = [...this.staffList]
  270. this.staffList1.unshift({
  271. value: '',
  272. label: '平均'
  273. })
  274. this.staff1 = this.staffList[0]
  275. // this.getreception()
  276. // this.getRecordList()
  277. // this.getAwardList()
  278. // this.getAward()
  279. this.getdata()
  280. })
  281. },
  282. getdata() {
  283. this.getreception()
  284. this.getRecordList()
  285. this.getAward()
  286. this.getAwardList()
  287. },
  288. // 获取接待量数据
  289. getreception() {
  290. this.$u.post('/cusLvStatistics/employeeAnalysisReception', {
  291. userA: this.staff1.value,
  292. userB: this.staff2.value,
  293. houseId: this.houseId,
  294. timeType: this.lastEndDate ? null : this.activeTotal + '',
  295. lastEndDate: this.lastEndDate,
  296. lastStartDate: this.lastStartDate
  297. })
  298. .then(res => {
  299. this.newTeam1 = res.avg[0]
  300. this.newAvg1 = res.avg[1]
  301. // console.log(res)
  302. let first = res.first
  303. let second = res.second
  304. this.lineOptsect.categories = []
  305. if (!this.timepickpickisshow) {
  306. this.lineOptsect.series = [{
  307. name: first[0].accountName,
  308. data: []
  309. }]
  310. first.map(item => {
  311. this.lineOptsect.categories.push(item.statDate.slice(5, 10))
  312. this.lineOptsect.series[0].data.push(item.receptionCount || 0)
  313. })
  314. } else {
  315. this.lineOptsect.series = [{
  316. name: first[0].accountName,
  317. data: []
  318. },
  319. {
  320. "name": second[0].accountName,
  321. "data": []
  322. }
  323. ]
  324. first.map(item => {
  325. this.lineOptsect.categories.push(item.statDate.slice(5, 10))
  326. this.lineOptsect.series[0].data.push(item.receptionCount)
  327. })
  328. second.map(item => {
  329. this.lineOptsect.series[1].data.push(item.receptionCount)
  330. })
  331. }
  332. // console.log(this.lineOptsect,'1')
  333. })
  334. },
  335. // 销奖趋势
  336. getAward() {
  337. this.$u.post('/cusLvStatistics/employeeAnalysisExacutiveRate', {
  338. userA: this.staff1.value,
  339. userB: this.staff2.value,
  340. houseId: this.houseId,
  341. timeType: this.lastEndDate ? null : this.activeTotal + '',
  342. lastEndDate: this.lastEndDate,
  343. lastStartDate: this.lastStartDate
  344. })
  345. .then(res => {
  346. this.newTeam3 = res.avg[0]
  347. this.newAvg3 = res.avg[1]
  348. // console.log(res)
  349. let first = res.first
  350. let second = res.second
  351. this.lineOptsect2.categories = []
  352. if (!this.timepickpickisshow) {
  353. this.lineOptsect2.series = [{
  354. name: first[0].accountName,
  355. data: []
  356. }]
  357. first.map(item => {
  358. // console.log(item)
  359. this.lineOptsect2.categories.push(item.statDate.slice(5, 10))
  360. this.lineOptsect2.series[0].data.push(item.sumFraction)
  361. })
  362. } else {
  363. this.lineOptsect2.series = [{
  364. name: first[0].accountName,
  365. data: []
  366. },
  367. {
  368. "name": second[0].accountName,
  369. "data": []
  370. }
  371. ]
  372. first.map(item => {
  373. this.lineOptsect2.categories.push(item.statDate.slice(5, 10))
  374. this.lineOptsect2.series[0].data.push(item.sumFraction)
  375. })
  376. second.map(item => {
  377. this.lineOptsect2.series[1].data.push(item.sumFraction)
  378. })
  379. }
  380. // console.log(this.lineOptsect2,'3')
  381. })
  382. },
  383. // 获取有效录音
  384. async getRecordList() {
  385. // 当选择有效录音时
  386. let res = null
  387. if (this.activeTotal2 == 0) {
  388. res = await this.$u.post('/cusLvStatistics/employeeAnalysisEffectiveRecording', {
  389. userA: this.staff1.value,
  390. userB: this.staff2.value,
  391. houseId: this.houseId,
  392. timeType: this.lastEndDate ? null : this.activeTotal + '',
  393. lastEndDate: this.lastEndDate,
  394. lastStartDate: this.lastStartDate
  395. })
  396. } else {
  397. res = await this.$u.post('/cusLvStatistics/employeeAnalysisRecordingTime', {
  398. userA: this.staff1.value,
  399. userB: this.staff2.value,
  400. houseId: this.houseId,
  401. timeType: this.lastEndDate ? null : this.activeTotal + '',
  402. lastEndDate: this.lastEndDate,
  403. lastStartDate: this.lastStartDate
  404. })
  405. }
  406. // console.log(res)
  407. this.newTeam2 = res.avg[0]
  408. this.newAvg2 = res.avg[1]
  409. let first = res.first
  410. let second = res.second
  411. this.lineOptsect1.categories = []
  412. if (!this.timepickpickisshow) {
  413. this.lineOptsect1.series = [{
  414. name: first[0].accountName,
  415. data: []
  416. }]
  417. first.map(item => {
  418. this.lineOptsect1.categories.push(item.statDate.slice(5, 10))
  419. this.lineOptsect1.series[0].data.push(item.sumDuration)
  420. })
  421. } else {
  422. this.lineOptsect1.series = [{
  423. name: first[0].accountName,
  424. data: []
  425. },
  426. {
  427. "name": second[0].accountName,
  428. "data": []
  429. }
  430. ]
  431. first.map(item => {
  432. this.lineOptsect1.categories.push(item.statDate.slice(5, 10))
  433. this.lineOptsect1.series[0].data.push(item.sumDuration)
  434. })
  435. second.map(item => {
  436. this.lineOptsect1.series[1].data.push(item.sumDuration)
  437. })
  438. }
  439. // console.log(this.lineOptsect1,'2')
  440. },
  441. // 获取销奖能力
  442. getAwardList() {
  443. this.chartData = {
  444. categories: [],
  445. series: []
  446. }
  447. this.$u.post('/cusLvStatistics/employeeAnalysisLevel1Fraction', {
  448. userA: this.staff1.value,
  449. userB: this.staff2.value,
  450. houseId: this.houseId,
  451. timeType: this.lastEndDate ? null : this.activeTotal + '',
  452. lastEndDate: this.lastEndDate,
  453. lastStartDate: this.lastStartDate
  454. })
  455. .then(res => {
  456. // console.log(res)
  457. let first = res.first
  458. let second = res.second
  459. this.chartData.categories = []
  460. if (!this.timepickpickisshow) {
  461. this.chartData.series = [{
  462. name: first[0].accountName,
  463. data: []
  464. }]
  465. first.map(item => {
  466. this.chartData.categories.push(item.name)
  467. this.chartData.series[0].data.push(item.avgExecutionRate)
  468. })
  469. } else {
  470. this.chartData.series = [{
  471. name: first[0].accountName,
  472. data: []
  473. },
  474. {
  475. "name": second[0].accountName,
  476. "data": []
  477. }
  478. ]
  479. first.map(item => {
  480. this.chartData.categories.push(item.name)
  481. this.chartData.series[0].data.push(item.avgExecutionRate)
  482. })
  483. second.map(item => {
  484. this.chartData.series[1].data.push(item.avgExecutionRate)
  485. })
  486. }
  487. })
  488. },
  489. tabtimetap(index) {
  490. if (index == 3) {
  491. this.totalTimeShow = true;
  492. } else {
  493. this.activeTotal = index;
  494. this.lastEndDate = ''
  495. this.lastStartDate = ''
  496. // 获取数据
  497. // this.getreception()
  498. // this.getRecordList()
  499. // this.getAwardList()
  500. this.getdata()
  501. }
  502. },
  503. tabtimetap1(index) {
  504. this.activeTotal2 = index;
  505. // 调用方法
  506. this.getRecordList()
  507. },
  508. //自定义时间
  509. totalTimeChange(e) {
  510. console.log(e.startDate, e.endDate)
  511. this.activeTotal = 3;
  512. this.lastEndDate = e.endDate
  513. this.lastStartDate = e.startDate
  514. // 获取数据
  515. // this.getreception()
  516. // this.getRecordList()
  517. // this.getAwardList()
  518. this.getdata()
  519. },
  520. staffSelectCallback(e) {
  521. if (this.choseStaffFlag) {
  522. // 第二个客户
  523. // console.log(e,'第二个')
  524. this.staff2 = e[0]
  525. } else {
  526. // 第一个客户
  527. // console.log(e,'第一个')
  528. this.staff1 = e[0]
  529. }
  530. if (this.staff1.label == this.staff2.label) {
  531. uni.showToast({
  532. title: '请勿选择重复',
  533. icon: 'none'
  534. })
  535. this.staff2.label = '请选择'
  536. // this.staff2.label='平均'
  537. // this.staff2.value=''
  538. return
  539. } else {
  540. // 获取数据
  541. // this.getreception()
  542. // this.getRecordList()
  543. // this.getAwardList()
  544. this.getdata()
  545. }
  546. },
  547. },
  548. }
  549. </script>
  550. <style lang="scss" scoped>
  551. .boxtittab {
  552. position: sticky;
  553. top: var(--window-top);
  554. z-index: 999;
  555. }
  556. // 对比时间切换
  557. .timepick {
  558. width: 100%;
  559. height: 90rpx;
  560. display: flex;
  561. align-items: center;
  562. background: #FAFAFA;
  563. }
  564. .timepicktime {
  565. width: 260rpx;
  566. height: 50rpx;
  567. border: 1rpx solid #E0E0E0;
  568. margin-left: 30rpx;
  569. display: flex;
  570. background: #FFFFFF;
  571. }
  572. .timepicktime>view:nth-of-type(1) {
  573. width: 210rpx;
  574. height: 100%;
  575. line-height: 50rpx;
  576. font-size: 26rpx;
  577. font-weight: 400;
  578. text-align: center;
  579. }
  580. .timepicktime>view:nth-of-type(2) {
  581. width: 49rpx;
  582. height: 100%;
  583. // border-left: 1px solid #E0E0E0;
  584. }
  585. .timepickpick {
  586. width: 110rpx;
  587. height: 50rpx;
  588. margin-left: 30rpx;
  589. display: flex;
  590. align-items: center;
  591. }
  592. .Underimg {
  593. width: 50rpx;
  594. height: 50rpx;
  595. margin-top: -2rpx;
  596. }
  597. </style>