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.

StaffAnalysis.vue 17 KiB

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