25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

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