You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

677 lines
19 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: 100
  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 => {
  298. return item.value == option.id
  299. })
  300. console.log(obj, 'obj')
  301. this.staff1.label = obj.label
  302. this.staff1.value = option.id
  303. }
  304. this.getdata()
  305. })
  306. },
  307. getdata() {
  308. this.getreception()
  309. this.getRecordList()
  310. this.getAward()
  311. this.getAwardList()
  312. },
  313. // 获取接待量数据
  314. getreception() {
  315. this.$u.post('/cusLvStatistics/employeeAnalysisReception', {
  316. userA: this.staff1.value,
  317. userB: this.staff2.value,
  318. houseId: this.houseId,
  319. timeType: this.lastEndDate ? null : this.activeTotal + '',
  320. lastEndDate: this.lastEndDate,
  321. lastStartDate: this.lastStartDate
  322. })
  323. .then(res => {
  324. this.newTeam1 = res.avg[0]
  325. this.newAvg1 = res.avg[1]
  326. // console.log(res)
  327. let first = res.first
  328. let second = res.second
  329. this.lineOptsect.categories = []
  330. if (!this.timepickpickisshow) {
  331. this.lineOptsect.series = [{
  332. name: first[0].accountName,
  333. data: []
  334. }]
  335. first.map(item => {
  336. this.lineOptsect.categories.push(item.statDate.slice(5, 10))
  337. this.lineOptsect.series[0].data.push(item.receptionCount || 0)
  338. })
  339. } else {
  340. this.lineOptsect.series = [{
  341. name: first[0].accountName,
  342. data: []
  343. },
  344. {
  345. "name": second[0].accountName,
  346. "data": []
  347. }
  348. ]
  349. first.map(item => {
  350. this.lineOptsect.categories.push(item.statDate.slice(5, 10))
  351. this.lineOptsect.series[0].data.push(item.receptionCount)
  352. })
  353. second.map(item => {
  354. this.lineOptsect.series[1].data.push(item.receptionCount)
  355. })
  356. }
  357. // console.log(this.lineOptsect,'1')
  358. })
  359. },
  360. // 销奖趋势
  361. getAward() {
  362. this.$u.post('/cusLvStatistics/employeeAnalysisExacutiveRate', {
  363. userA: this.staff1.value,
  364. userB: this.staff2.value,
  365. houseId: this.houseId,
  366. timeType: this.lastEndDate ? null : this.activeTotal + '',
  367. lastEndDate: this.lastEndDate,
  368. lastStartDate: this.lastStartDate
  369. })
  370. .then(res => {
  371. this.newTeam3 = res.avg[0]
  372. this.newAvg3 = res.avg[1]
  373. // console.log(res)
  374. let first = res.first
  375. let second = res.second
  376. this.lineOptsect2.categories = []
  377. if (!this.timepickpickisshow) {
  378. this.lineOptsect2.series = [{
  379. name: first[0].accountName,
  380. data: []
  381. }]
  382. first.map(item => {
  383. // console.log(item)
  384. this.lineOptsect2.categories.push(item.statDate.slice(5, 10))
  385. this.lineOptsect2.series[0].data.push(item.sumFraction)
  386. })
  387. } else {
  388. this.lineOptsect2.series = [{
  389. name: first[0].accountName,
  390. data: []
  391. },
  392. {
  393. "name": second[0].accountName,
  394. "data": []
  395. }
  396. ]
  397. first.map(item => {
  398. this.lineOptsect2.categories.push(item.statDate.slice(5, 10))
  399. this.lineOptsect2.series[0].data.push(item.sumFraction)
  400. })
  401. second.map(item => {
  402. this.lineOptsect2.series[1].data.push(item.sumFraction)
  403. })
  404. }
  405. // console.log(this.lineOptsect2,'3')
  406. })
  407. },
  408. // 获取有效录音
  409. async getRecordList() {
  410. // 当选择有效录音时
  411. let res = null
  412. if (this.activeTotal2 == 0) {
  413. res = await this.$u.post('/cusLvStatistics/employeeAnalysisEffectiveRecording', {
  414. userA: this.staff1.value,
  415. userB: this.staff2.value,
  416. houseId: this.houseId,
  417. timeType: this.lastEndDate ? null : this.activeTotal + '',
  418. lastEndDate: this.lastEndDate,
  419. lastStartDate: this.lastStartDate
  420. })
  421. } else {
  422. res = await this.$u.post('/cusLvStatistics/employeeAnalysisRecordingTime', {
  423. userA: this.staff1.value,
  424. userB: this.staff2.value,
  425. houseId: this.houseId,
  426. timeType: this.lastEndDate ? null : this.activeTotal + '',
  427. lastEndDate: this.lastEndDate,
  428. lastStartDate: this.lastStartDate
  429. })
  430. }
  431. // console.log(res)
  432. this.newTeam2 = res.avg[0]
  433. this.newAvg2 = res.avg[1]
  434. let first = res.first
  435. let second = res.second
  436. this.lineOptsect1.categories = []
  437. if (!this.timepickpickisshow) {
  438. this.lineOptsect1.series = [{
  439. name: first[0].accountName,
  440. data: []
  441. }]
  442. first.map(item => {
  443. this.lineOptsect1.categories.push(item.statDate.slice(5, 10))
  444. this.lineOptsect1.series[0].data.push(item.sumDuration)
  445. })
  446. } else {
  447. this.lineOptsect1.series = [{
  448. name: first[0].accountName,
  449. data: []
  450. },
  451. {
  452. "name": second[0].accountName,
  453. "data": []
  454. }
  455. ]
  456. first.map(item => {
  457. this.lineOptsect1.categories.push(item.statDate.slice(5, 10))
  458. this.lineOptsect1.series[0].data.push(item.sumDuration)
  459. })
  460. second.map(item => {
  461. this.lineOptsect1.series[1].data.push(item.sumDuration)
  462. })
  463. }
  464. // console.log(this.lineOptsect1,'2')
  465. },
  466. // 获取销奖能力
  467. getAwardList() {
  468. this.$u.post('/cusLvStatistics/employeeAnalysisLevel1Fraction', {
  469. userA: this.staff1.value,
  470. userB: this.staff2.value,
  471. houseId: this.houseId,
  472. timeType: this.lastEndDate ? null : this.activeTotal + '',
  473. lastEndDate: this.lastEndDate,
  474. lastStartDate: this.lastStartDate
  475. })
  476. .then(res => {
  477. this.LOADING = false
  478. // console.log(res)
  479. let first = res.first
  480. let second = res.second
  481. let xAxis = [] // 制作雷达图的x轴
  482. first.forEach(item => {
  483. if (xAxis.findIndex(res => res.marketingId == item.marketingId) == -1) {
  484. xAxis.push(item)
  485. }
  486. })
  487. second.forEach(item => {
  488. if (xAxis.findIndex(res => res.marketingId == item.marketingId) == -1) {
  489. xAxis.push(item)
  490. }
  491. })
  492. this.chartData.categories = []
  493. if (!this.timepickpickisshow) {
  494. this.chartData.series = [{
  495. name: first[0].accountName,
  496. data: []
  497. }]
  498. first.map(item => {
  499. this.chartData.categories.push(item.name)
  500. if (item.avgExecutionRate < 0) {
  501. this.chartData.series[0].data.push(0)
  502. } else if (item.avgExecutionRate > 100) {
  503. this.chartData.series[0].data.push(100)
  504. } else {
  505. this.chartData.series[0].data.push(item.avgExecutionRate)
  506. }
  507. })
  508. } else {
  509. this.chartData.series = [{
  510. name: first[0].accountName,
  511. data: []
  512. },
  513. {
  514. name: second[0].accountName,
  515. data: []
  516. }
  517. ]
  518. console.log(xAxis, 'sdaklijdklsajdklasjkdlsjal')
  519. xAxis.map(item => {
  520. this.chartData.categories.push(item.name)
  521. let obj1 = first.find(res => res.marketingId == item.marketingId)
  522. let obj2 = second.find(res => res.marketingId == item.marketingId)
  523. if (obj1 && Object.keys(obj1).length > 0) {
  524. this.chartData.series[0].data.push(this.checkRange(obj1.avgExecutionRate))
  525. } else {
  526. this.chartData.series[0].data.push(0)
  527. }
  528. if (obj2 && Object.keys(obj2).length > 0) {
  529. this.chartData.series[1].data.push(this.checkRange(obj2.avgExecutionRate))
  530. } else {
  531. this.chartData.series[1].data.push(0)
  532. }
  533. })
  534. this.$forceUpdate()
  535. }
  536. }).catch(e => {
  537. this.LOADING = false
  538. })
  539. },
  540. // 检测范围
  541. checkRange(num) {
  542. if (num < 0) {
  543. return 0
  544. } else if (num > 100) {
  545. return 100
  546. } else {
  547. return num
  548. }
  549. },
  550. tabtimetap(index) {
  551. if (index == 3) {
  552. this.totalTimeShow = true;
  553. } else {
  554. this.activeTotal = index;
  555. this.lastEndDate = ''
  556. this.lastStartDate = ''
  557. // 获取数据
  558. // this.getreception()
  559. // this.getRecordList()
  560. // this.getAwardList()
  561. this.getdata()
  562. }
  563. },
  564. tabtimetap1(index) {
  565. this.activeTotal2 = index;
  566. // 调用方法
  567. this.getRecordList()
  568. },
  569. //自定义时间
  570. totalTimeChange(e) {
  571. console.log(e.startDate, e.endDate)
  572. this.activeTotal = 3;
  573. this.lastEndDate = e.endDate
  574. this.lastStartDate = e.startDate
  575. // 获取数据
  576. // this.getreception()
  577. // this.getRecordList()
  578. // this.getAwardList()
  579. this.getdata()
  580. },
  581. staffSelectCallback(e) {
  582. if (this.choseStaffFlag) {
  583. // 第二个客户
  584. // console.log(e,'第二个')
  585. this.staff2 = e[0]
  586. } else {
  587. // 第一个客户
  588. // console.log(e,'第一个')
  589. this.staff1 = e[0]
  590. }
  591. if (this.staff1.label == this.staff2.label) {
  592. uni.showToast({
  593. title: '请勿选择重复',
  594. icon: 'none'
  595. })
  596. this.staff2.label = '请选择'
  597. // this.staff2.label='平均'
  598. // this.staff2.value=''
  599. return
  600. } else {
  601. // 获取数据
  602. // this.getreception()
  603. // this.getRecordList()
  604. // this.getAwardList()
  605. this.getdata()
  606. }
  607. },
  608. },
  609. }
  610. </script>
  611. <style lang="scss" scoped>
  612. // 对比时间切换
  613. .timepick {
  614. width: 100%;
  615. height: 90rpx;
  616. display: flex;
  617. align-items: center;
  618. background: #FAFAFA;
  619. }
  620. .timepicktime {
  621. width: 260rpx;
  622. height: 50rpx;
  623. border: 1rpx solid #E0E0E0;
  624. margin-left: 30rpx;
  625. display: flex;
  626. background: #FFFFFF;
  627. }
  628. .timepicktime>view:nth-of-type(1) {
  629. width: 210rpx;
  630. height: 100%;
  631. line-height: 50rpx;
  632. font-size: 26rpx;
  633. font-weight: 400;
  634. text-align: center;
  635. }
  636. .timepicktime>view:nth-of-type(2) {
  637. width: 49rpx;
  638. height: 100%;
  639. // border-left: 1px solid #E0E0E0;
  640. }
  641. .timepickpick {
  642. width: 110rpx;
  643. height: 50rpx;
  644. margin-left: 30rpx;
  645. display: flex;
  646. align-items: center;
  647. }
  648. .Underimg {
  649. width: 50rpx;
  650. height: 50rpx;
  651. margin-top: -2rpx;
  652. }
  653. </style>