Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 

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