Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 

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