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

Theteamcompared.vue 29 KiB

2 년 전
2 년 전
2 년 전
2 년 전
2 년 전
2 년 전
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064
  1. <template>
  2. <view class="box">
  3. <view class="boxtittabs">
  4. <div class="items" @tap="screenShow = true">{{ showTimeText }}
  5. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
  6. </div>
  7. <div class="items" @tap="showTemplate = true">{{ showBeText }}
  8. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
  9. </div>
  10. </view>
  11. <view class="timepick">
  12. <view style="display: flex;" class="timepicktime" @click="chiocStaff(0)">
  13. <view style="flex-grow: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
  14. {{staff1.label}}
  15. </view>
  16. <view style="flex-shrink: 0;">
  17. <image class="Underimg" src="../../../static/images/Underimg.png" mode=""></image>
  18. </view>
  19. </view>
  20. <view class="timepickpick" v-if="staff1.value">
  21. <view @click="checkboxChange()" style="width: 40rpx;height:40rpx;border: 1rpx solid #E0E0E0;">
  22. <image v-if="timepickpickisshow" style="width: 40rpx;height: 40rpx;"
  23. src="../../../static/images/xuanzhong.png" mode=""></image>
  24. </view>
  25. <view style="font-size:26rpx;text-indent: 12rpx;">对比</view>
  26. </view>
  27. <view class="timepicktime" v-if="timepickpickisshow" @click="chiocStaff(1)">
  28. <view>{{staff2.label}}</view>
  29. <view>
  30. <image class="Underimg" src="../../../static/images/Underimg.png" mode=""></image>
  31. </view>
  32. </view>
  33. </view>
  34. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  35. <view class="single">
  36. <view class="title">
  37. <view class="title1" style="flex: 1;">接待量</view>
  38. <view class="title3" style="flex: 1;">
  39. <view class="title3-box" @click="tabtimetap1(0)">
  40. <view style="height: 42rpx;" :class="{ activecltab: eharTab.active1 == 0 }">排名</view>
  41. </view>
  42. <view class="title3-box" @click="tabtimetap1(1)">
  43. <view style="height: 42rpx;" :class="{ activecltab: eharTab.active1 == 1 }">趋势</view>
  44. </view>
  45. </view>
  46. </view>
  47. <view class="hejibox">
  48. <view class="heji">{{!staff1.value?'团队总数':staff1.label}}:{{newTeam1||0}}</view>
  49. <view class="heji">{{!staff2.value?'团队平均':staff2.label}}:{{newAvg1||0}}</view>
  50. </view>
  51. <view class="" v-if=" eharTab.active1 == 1 ">
  52. <view class="danwei">接待量</view>
  53. <view class="uchaserbox">
  54. <template v-if="showLineOptsect1">
  55. <qiun-data-charts type="line" :chartData="lineOptsect1" background="none" :ontouch="true"
  56. canvasId="wangxiaohuaerlingeryilingwuyibbb" :canvas2d="true" />
  57. </template>
  58. </view>
  59. </view>
  60. <view class="jindu" v-if=" eharTab.active1 == 0 ">
  61. <view class="jindu-box" v-for="(item,index) in newlisttabinfo1" :key="index">
  62. <view class="jindu-boxche">
  63. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  64. <view style="width: 440rpx;margin-left: 10rpx;">
  65. <u-line-progress height="24" :show-percent="false" active-color="#FBA448"
  66. :percent="item.zxl1 || 0"></u-line-progress>
  67. </view>
  68. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
  69. </view>
  70. </view>
  71. </view>
  72. </view>
  73. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  74. <view class="single">
  75. <view class="title">
  76. <view class="title1" style="flex: 1;">接待时长</view>
  77. <view class="title3" style="flex: 1;">
  78. <view class="title3-box" @click="tabtimetap2(0)">
  79. <view style="height: 42rpx;" :class="{ activecltab: eharTab.active2 == 0 }">排名</view>
  80. </view>
  81. <view class="title3-box" @click="tabtimetap2(1)">
  82. <view style="height: 42rpx;" :class="{ activecltab: eharTab.active2 == 1 }">趋势</view>
  83. </view>
  84. </view>
  85. </view>
  86. <view class="hejibox">
  87. <view class="heji">{{!staff1.value?'团队总数':staff1.label}}:{{newTeam2||0}}</view>
  88. <view class="heji">{{!staff2.value?'团队平均':staff2.label}}:{{newAvg2||0}}</view>
  89. </view>
  90. <view class="" v-if=" eharTab.active2 == 1 ">
  91. <view class="danwei">录音时长</view>
  92. <view class="uchaserbox">
  93. <template v-if="showLineOptsect2">
  94. <qiun-data-charts type="line" :chartData="lineOptsect2" background="none" :ontouch="true"
  95. canvasId="wangxiaohuaerlingeryilingwuyibb" :canvas2d="true" />
  96. </template>
  97. </view>
  98. </view>
  99. <view class="jindu" v-if=" eharTab.active2 == 0 ">
  100. <view class="jindu-box" v-for="(item,index) in newlisttabinfo2" :key="index">
  101. <view class="jindu-boxche">
  102. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  103. <view style="width: 440rpx;margin-left: 10rpx;">
  104. <u-line-progress height="24" :show-percent="false" active-color="#FBA448"
  105. :percent="item.zxl1"></u-line-progress>
  106. </view>
  107. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
  108. </view>
  109. </view>
  110. </view>
  111. </view>
  112. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  113. <view class="single">
  114. <view class="title">
  115. <view class="title1" style="flex: 1;">销讲执行率</view>
  116. <view class="title3" style="flex: 1;">
  117. <view class="title3-box" @click="tabtimetap3(0)">
  118. <view style="height: 42rpx;" :class="{ activecltab: eharTab.active3 == 0 }">排名</view>
  119. </view>
  120. <view class="title3-box" @click="tabtimetap3(1)">
  121. <view style="height: 42rpx;" :class="{ activecltab: eharTab.active3 == 1 }">趋势</view>
  122. </view>
  123. </view>
  124. </view>
  125. <view class="" v-if=" eharTab.active3 == 1 ">
  126. <view class="danwei">执行率</view>
  127. <view class="uchaserbox">
  128. <template v-if="showLineOptsect3">
  129. <qiun-data-charts type="line" :chartData="lineOptsect3" background="none" :ontouch="true"
  130. canvasId="wangxiaohuaerlingeryilingwuyib" :canvas2d="true" :opts="lineOpts" />
  131. </template>
  132. </view>
  133. </view>
  134. <view class="jindu" v-if=" eharTab.active3 == 0 ">
  135. <view class="jindu-box" v-for="(item,index) in newlisttabinfo3" :key="index">
  136. <view class="jindu-boxche">
  137. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  138. <view style="width: 440rpx;margin-left: 10rpx;">
  139. <u-line-progress height="24" :show-percent="false" active-color="#FBA448"
  140. :percent="item.zxl1"></u-line-progress>
  141. </view>
  142. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  143. </view>
  144. </view>
  145. </view>
  146. </view>
  147. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  148. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  149. <view class="single">
  150. <view class="title" style="padding-right: 30rpx;">
  151. <view class="title1" style="flex-grow: 1;">销讲能力</view>
  152. <view class="title2" style="flex-grow: 1;justify-content: flex-end;">
  153. <view class="title2-che" @click="showTemplates=true" style="width: 220rpx;">
  154. {{ showBeTexts }}
  155. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  156. </view>
  157. <view class="title2-che" @click="goTeam">团队
  158. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  159. </view>
  160. </view>
  161. </view>
  162. <view class="uchaserbox uchaserboxs">
  163. <template v-if="showChartData1">
  164. <qiun-data-charts type="radar" :opts="opts" :chartData="chartData1" :canvas2d="true"
  165. canvasId="wangxiaohuaerlingeryilingwuyib88" background="none" />
  166. </template>
  167. </view>
  168. </view>
  169. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  170. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  171. <!-- 选择部门的选择框 -->
  172. <u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback" :default-value='selindex'>
  173. </u-select>
  174. <u-select v-model="staffShow1" :list="staffList1" @confirm="staffSelectCallback" :default-value='selindex'>
  175. </u-select>
  176. <!-- 更多筛选 -->
  177. <u-popup v-model="screenShow" mode="bottom" height="368">
  178. <view class="screen">
  179. <view class="boxtittab">
  180. <view class="tabbox">
  181. <view :class="{ activecllasscet: activeTotal == 4 }" @click="tabtimetap(4, '近七天')">近七天</view>
  182. </view>
  183. <view class="tabbox">
  184. <view :class="{ activecllasscet: activeTotal == 5 }" @click="tabtimetap(5, '近15天')">近15天</view>
  185. </view>
  186. <view class="tabbox">
  187. <view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6, '近30天')">近30天</view>
  188. </view>
  189. <view class="tabbox">
  190. <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3, '自定义')">自定义</view>
  191. </view>
  192. </view>
  193. </view>
  194. </u-popup>
  195. <!-- 销讲业务 -->
  196. <u-select :mask-close-able="false" label-name="templateName" value-name="id" v-model="showTemplate"
  197. mode="single-column" :list="templateList" @cancel="templateCancel" @confirm="templateConfirm"></u-select>
  198. <!-- 销讲业务2 -->
  199. <u-select :mask-close-able="false" label-name="templateName" value-name="id" v-model="showTemplates"
  200. mode="single-column" :list="templateLists" @cancel="showTemplates = false" @confirm="templateConfirms">
  201. </u-select>
  202. <!-- 加载组件 -->
  203. <loading v-model="LOADING"></loading>
  204. </view>
  205. </template>
  206. <script>
  207. var app = getApp();
  208. var util = require("../../../utils/util.js");
  209. var config = require("../../../config");
  210. import loading from "@/components/loading/index.vue"
  211. export default {
  212. components: {
  213. loading
  214. },
  215. data() {
  216. return {
  217. activeTotal: 4,
  218. eharTab: {
  219. active1: 0,
  220. active2: 0,
  221. active3: 0,
  222. active4: 0,
  223. },
  224. deptids: '',
  225. bocindex: 0,
  226. timepickpickisshow: false,
  227. totalTimeShow: false,
  228. // 项目id
  229. houseId: '',
  230. staffList: [],
  231. staffList1: [],
  232. staffShow: false,
  233. staffShow1: false,
  234. staff1: {
  235. value: '',
  236. label: ''
  237. },
  238. staff2: {
  239. value: '',
  240. label: '平均'
  241. },
  242. lastStartDate: '',
  243. lastEndDate: '',
  244. selindex: [0],
  245. choseStaffFlag: false,
  246. lineOptsect1: {
  247. "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
  248. "series": [{
  249. "name": "成交量1",
  250. "data": [35, 8, 25, 37, 4, 20]
  251. },
  252. {
  253. "name": "成交量2",
  254. "data": [40, 18, 45, 44, 10, 60]
  255. }
  256. ]
  257. },
  258. lineOptsect2: {
  259. "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
  260. "series": [{
  261. "name": "成交量1",
  262. "data": [35, 8, 25, 37, 4, 20]
  263. },
  264. {
  265. "name": "成交量2",
  266. "data": [40, 18, 45, 44, 10, 60]
  267. }
  268. ]
  269. },
  270. lineOptsect3: {
  271. "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
  272. "series": [{
  273. "name": "成交量1",
  274. "data": [35, 8, 25, 37, 4, 20]
  275. },
  276. {
  277. "name": "成交量2",
  278. "data": [40, 18, 45, 44, 10, 60]
  279. }
  280. ]
  281. },
  282. lineOptsect4: {
  283. "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
  284. "series": [{
  285. "name": "成交量1",
  286. "data": [35, 8, 25, 37, 4, 20]
  287. },
  288. {
  289. "name": "成交量2",
  290. "data": [40, 18, 45, 44, 10, 60]
  291. }
  292. ]
  293. },
  294. newlisttabinfo1: [{
  295. name: '接待量',
  296. zxl: '10'
  297. },
  298. {
  299. name: '平均执行率',
  300. zxl: '50'
  301. },
  302. {
  303. name: '接待客户',
  304. zxl: '80'
  305. },
  306. ],
  307. newlisttabinfo2: [{
  308. name: '接待量',
  309. zxl: '10'
  310. },
  311. {
  312. name: '平均执行率',
  313. zxl: '50'
  314. },
  315. {
  316. name: '接待客户',
  317. zxl: '80'
  318. },
  319. ],
  320. newlisttabinfo3: [{
  321. name: '接待量',
  322. zxl: '10'
  323. },
  324. {
  325. name: '平均执行率',
  326. zxl: '50'
  327. },
  328. {
  329. name: '接待客户',
  330. zxl: '80'
  331. },
  332. ],
  333. newlisttabinfo4: [{
  334. name: '接待量',
  335. zxl: '10'
  336. },
  337. {
  338. name: '平均执行率',
  339. zxl: '50'
  340. },
  341. {
  342. name: '接待客户',
  343. zxl: '80'
  344. },
  345. ],
  346. newTeam1: '',
  347. newAvg1: '',
  348. newTeam2: '',
  349. newAvg2: '',
  350. newTeam3: '',
  351. newAvg3: '',
  352. newTeam4: '',
  353. newAvg4: '',
  354. chartData1: {
  355. "categories": ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
  356. "series": [{
  357. "name": "成交量",
  358. "data": [90, 110, 165, 195, 187, 172]
  359. }]
  360. },
  361. chartData2: {
  362. "categories": ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
  363. "series": [{
  364. "name": "成交量",
  365. "data": [90, 110, 165, 195, 187, 172]
  366. }]
  367. },
  368. opts: {
  369. fontSize: 10,
  370. extra: {
  371. radar: {
  372. max: ''
  373. }
  374. }
  375. },
  376. lineOpts: {
  377. yAxis: {
  378. data: [{
  379. max: 100,
  380. min: 0,
  381. }]
  382. }
  383. },
  384. screenShow: false, // 时间筛选弹窗
  385. showTimeText: '近七天', // 展示文字
  386. showBeText: '全部业务', //
  387. templateList: [], // 销讲业务
  388. showTemplate: false, // 展示选择销讲业务弹窗
  389. marketingBusiness: '', // 选择的业务id
  390. showTemplates: false, // 展示选择销讲业务弹窗
  391. templateLists: [], // 销讲业务
  392. marketingBusinessId: '', // 选择的业务id
  393. showBeTexts: '', //
  394. };
  395. },
  396. computed: {
  397. showLineOptsect1() {
  398. return this.lineOptsect1.series.length > 0
  399. },
  400. showLineOptsect2() {
  401. return this.lineOptsect2.series.length > 0
  402. },
  403. showLineOptsect3() {
  404. return this.lineOptsect3.series.length > 0
  405. },
  406. showChartData1() {
  407. return this.chartData1.series.length > 0
  408. },
  409. },
  410. onLoad() {
  411. this.LOADING = true
  412. this.getMarketingBusiness()
  413. let that = this
  414. uni.$on('update', function(data) {
  415. // console.log(data)
  416. that.deptids = data.arr.join(',')
  417. // 获取销奖能力
  418. that.getPowerList()
  419. })
  420. // 获取项目id
  421. this.houseId = uni.getStorageSync('buildingID').id;
  422. // this.buildingname = uni.getStorageSync('buildingID').name;
  423. // 请求接口获取所有置业顾问员工的列表
  424. this.getSectionList()
  425. },
  426. onPullDownRefresh() {
  427. let that = this
  428. this.getMarketingBusiness()
  429. uni.$on('update', function(data) {
  430. // console.log(data)
  431. that.deptids = data.arr.join(',')
  432. // 获取销奖能力
  433. that.getPowerList()
  434. })
  435. // 获取项目id
  436. this.houseId = uni.getStorageSync('buildingID').id;
  437. // this.buildingname = uni.getStorageSync('buildingID').name;
  438. // 请求接口获取所有置业顾问员工的列表
  439. this.getSectionList()
  440. setTimeout(function() {
  441. uni.stopPullDownRefresh();
  442. }, 1000);
  443. },
  444. methods: {
  445. // 销讲业务方法
  446. templateCancel() {
  447. this.showTemplate = false;
  448. },
  449. // 确认选择销讲业务
  450. templateConfirm(e) {
  451. this.showTemplate = false;
  452. this.marketingBusiness = e[0].value
  453. this.showBeText = e[0].label
  454. this.getSectionList()
  455. },
  456. // 确认选择销讲业务
  457. templateConfirms(e) {
  458. this.showTemplates = false;
  459. this.marketingBusinessId = e[0].value
  460. this.showBeTexts = e[0].label
  461. // 获取销奖能力
  462. this.getPowerList()
  463. },
  464. // 获取销讲业务
  465. getMarketingBusiness() {
  466. this.$u.get('/customer/marketingBusiness', {
  467. houseId: uni.getStorageSync('buildingID').id,
  468. }).then(res => {
  469. this.templateLists = res.map(item => {
  470. return item
  471. })
  472. this.marketingBusinessId = res[0].id
  473. this.showBeTexts = res[0].templateName
  474. this.templateList = res
  475. this.templateList.unshift({
  476. templateName: '全部业务',
  477. id: ''
  478. })
  479. })
  480. },
  481. //是否对比
  482. checkboxChange() {
  483. this.timepickpickisshow = !this.timepickpickisshow;
  484. this.staff2.label = '平均'
  485. this.staff2.value = ''
  486. // 团队对比接待量
  487. this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
  488. // 团队对比接待时长
  489. this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
  490. /* 销奖执行率 */
  491. this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
  492. // 获取销奖能力
  493. this.getPowerList()
  494. },
  495. // 获取部门列表
  496. getSectionList() {
  497. this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId', {
  498. houseId: this.houseId,
  499. })
  500. .then(res => {
  501. this.staffList = []
  502. this.staffList1 = []
  503. res.map(item => {
  504. let obj = {}
  505. obj.value = item.deptId
  506. obj.label = item.deptName
  507. this.staffList.push(obj)
  508. })
  509. this.staffList1 = [...this.staffList]
  510. this.staffList.unshift({
  511. value: '',
  512. label: '全部'
  513. })
  514. this.staffList1.unshift({
  515. value: '',
  516. label: '平均'
  517. })
  518. this.staff1 = this.staffList[0]
  519. // 团队对比接待量
  520. this.receptionCountList(0, 1, '/cusLvStatistics/teamAnalysisReception')
  521. // 团队对比接待时长
  522. this.receptionCountList(0, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
  523. /* 销奖执行率 */
  524. this.receptionCountList(0, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
  525. // 获取销奖能力
  526. this.getPowerList()
  527. })
  528. },
  529. // 点击部门对比
  530. chiocStaff(idx) {
  531. if (idx == 0) {
  532. // 当选择了第一个的时候
  533. this.choseStaffFlag = false
  534. this.staffShow = true
  535. } else {
  536. this.choseStaffFlag = true
  537. this.staffShow1 = true
  538. }
  539. },
  540. //时间切换
  541. tabtimetap(index, text) {
  542. if (index == 3) {
  543. this.totalTimeShow = true;
  544. this.screenShow = false
  545. } else {
  546. this.screenShow = false
  547. this.showTimeText = text
  548. this.activeTotal = index;
  549. this.lastEndDate = ''
  550. this.lastStartDate = ''
  551. // 获取数据
  552. // 团队对比接待量
  553. this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
  554. // 团队对比接待时长
  555. this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
  556. /* 销奖执行率 */
  557. this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
  558. // 获取销奖能力
  559. this.getPowerList()
  560. }
  561. },
  562. // 接待量
  563. tabtimetap1(idx) {
  564. this.eharTab.active1 = idx
  565. // 调用方法
  566. this.receptionCountList(idx, 1, '/cusLvStatistics/teamAnalysisReception')
  567. },
  568. // 接待时长
  569. tabtimetap2(idx) {
  570. this.eharTab.active2 = idx
  571. // 调用方法
  572. this.receptionCountList(idx, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
  573. },
  574. tabtimetap3(idx) {
  575. this.eharTab.active3 = idx
  576. // 调用方法
  577. this.receptionCountList(idx, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
  578. },
  579. tabtimetap4(idx) {
  580. this.eharTab.active4 = idx
  581. // 调用方法
  582. // this.getRecordList()
  583. },
  584. //自定义时间
  585. totalTimeChange(e) {
  586. this.screenShow = false
  587. this.showTimeText = `${e.startDate}-${e.endDate}`
  588. this.activeTotal = 3;
  589. this.lastEndDate = e.endDate
  590. this.lastStartDate = e.startDate
  591. // 获取数据
  592. // 团队对比接待量
  593. this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
  594. // 团队对比接待时长
  595. this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
  596. /* 销奖执行率 */
  597. this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
  598. // 获取销奖能力
  599. this.getPowerList()
  600. },
  601. //指标执行率分析tab
  602. tapspagek2(index) {
  603. this.bocindex = index;
  604. },
  605. //集团对比
  606. Groupcontrast() {
  607. uni.navigateTo({
  608. url: '/pages/center/Piabodata/Groupcontrast'
  609. });
  610. },
  611. // 去选择团队
  612. goTeam() {
  613. uni.navigateTo({
  614. url: `/pages/center/Piabodata/selectTeam?ids=${this.deptids}`
  615. })
  616. },
  617. staffSelectCallback(e) {
  618. if (this.choseStaffFlag) {
  619. // 第二个客户
  620. // console.log(e,'第二个')
  621. this.staff2 = e[0]
  622. } else {
  623. // 第一个客户
  624. // console.log(e,'第一个')
  625. // 当选择全部时
  626. if (!e.value) {
  627. this.timepickpickisshow = false
  628. this.staff2.label = '平均'
  629. this.staff2.value = ''
  630. }
  631. this.staff1 = e[0]
  632. }
  633. if (this.staff1.label == this.staff2.label) {
  634. uni.showToast({
  635. title: '请勿选择重复',
  636. icon: 'none'
  637. })
  638. this.staff2.label = '请选择'
  639. // this.staff2.label='平均'
  640. // this.staff2.value=''
  641. return
  642. } else {
  643. // 获取数据
  644. // 团队对比接待量
  645. this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
  646. // 团队对比接待时长
  647. this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
  648. /* 销奖执行率 */
  649. this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
  650. // 获取销奖能力
  651. this.getPowerList()
  652. }
  653. },
  654. // 接待时长
  655. receptionCountList(idx, index, url) {
  656. this.$u.post(url, {
  657. // userA:this.staff1.value,
  658. // userB:this.staff2.value,
  659. deptIds: [this.staff1.value, this.staff2.value].filter(item => item).join(','),
  660. showRank: idx,
  661. houseId: this.houseId,
  662. timeType: this.lastEndDate ? null : this.activeTotal + '',
  663. lastEndDate: this.lastEndDate,
  664. lastStartDate: this.lastStartDate,
  665. marketingBusiness: this.marketingBusiness,
  666. })
  667. .then(res => {
  668. // console.log(res)
  669. let result = res.result
  670. this['newTeam' + index] = res.avg[0]
  671. this['newAvg' + index] = res.avg[1]
  672. if (idx == 0) {
  673. // 当选择的是牌名时
  674. // 处理数据
  675. // 先处理牌名数据,需要进行判断全部还是单个
  676. // 当为全部时
  677. this['newlisttabinfo' + index] = []
  678. let arr = []
  679. // 当选择全部时
  680. if (!this.staff1.value && !this.staff2.value) {
  681. // console.log(1)
  682. result[0].map(item => {
  683. let obj = {}
  684. obj.name = item.deptName
  685. obj.zxl = item.data
  686. arr.push(obj)
  687. })
  688. arr = this.dealData(arr)
  689. this['newlisttabinfo' + index] = arr
  690. }
  691. // 当选择只有一个时
  692. else if (this.staff1.value && !this.staff2.value) {
  693. // console.log(2)
  694. result[0].map(item => {
  695. let obj = {}
  696. obj.name = item.deptName
  697. obj.zxl = item.data
  698. arr.push(obj)
  699. })
  700. // 判断是否显示平均
  701. // 如果显示对比
  702. if (this.timepickpickisshow) {
  703. result[1].map(item => {
  704. let obj = {}
  705. obj.name = '平均'
  706. obj.zxl = item.data
  707. arr.push(obj)
  708. })
  709. }
  710. arr = this.dealData(arr)
  711. this['newlisttabinfo' + index] = arr
  712. } else {
  713. // console.log(3)
  714. // 当两个都选择的时候
  715. result[0].map(item => {
  716. let obj = {}
  717. obj.name = item.deptName
  718. obj.zxl = item.data
  719. arr.push(obj)
  720. })
  721. result[1].map(item => {
  722. let obj = {}
  723. obj.name = item.deptName
  724. obj.zxl = item.data
  725. arr.push(obj)
  726. })
  727. arr = this.dealData(arr)
  728. this['newlisttabinfo' + index] = arr
  729. }
  730. } else {
  731. // 当选择趋势时
  732. this['lineOptsect' + index] = {}
  733. let allobj = {
  734. categories: [],
  735. series: []
  736. }
  737. // 先处理时间
  738. // 当选择全部时
  739. if (!this.staff1.value && !this.staff2.value) {
  740. result.map((item, idx) => {
  741. let obj = {}
  742. obj.name = item[0].deptName
  743. obj.data = []
  744. item.map(item1 => {
  745. // 时间的处理
  746. if (idx == 0) {
  747. allobj.categories.push(item1.statDate.slice(5, 10))
  748. }
  749. obj.data.push(item1.data)
  750. })
  751. allobj.series.push(obj)
  752. })
  753. }
  754. // 当选择只有一个时
  755. else if (this.staff1.value && !this.staff2.value) {
  756. // console.log(2)
  757. let obj = {}
  758. obj.data = []
  759. obj.name = result[0][0].deptName
  760. result[0].map(item => {
  761. allobj.categories.push(item.statDate.slice(5, 10))
  762. obj.data.push(item.data)
  763. })
  764. allobj.series.push(obj)
  765. // 判断是否显示平均
  766. // 如果显示对比
  767. if (this.timepickpickisshow) {
  768. let obj = {}
  769. obj.data = []
  770. obj.name = '平均'
  771. result[1].map(item => {
  772. obj.data.push(item.data)
  773. })
  774. allobj.series.push(obj)
  775. }
  776. } else {
  777. // console.log(3)
  778. // 当两个都选择的时候
  779. let obj = {}
  780. let obj1 = {}
  781. obj.data = []
  782. obj1.data = []
  783. obj.name = result[0][0].deptName
  784. obj1.name = result[1][0].deptName
  785. result[0].map(item => {
  786. allobj.categories.push(item.statDate.slice(5, 10))
  787. obj.data.push(item.data)
  788. })
  789. result[1].map(item => {
  790. obj1.data.push(item.data)
  791. })
  792. allobj.series.push(obj)
  793. allobj.series.push(obj1)
  794. }
  795. // console.log(allobj)
  796. // return
  797. // this.lineOptsect1=allobj
  798. this['lineOptsect' + index] = allobj
  799. // this['lineOptsect'+index].series=allobj.series
  800. // this['lineOptsect'+index].categories=allobj.categories
  801. }
  802. })
  803. },
  804. // 获取销奖能力
  805. getPowerList() {
  806. this.$u.post('/cusLvStatistics/teamAnalysisMarketingAbility', {
  807. deptIds: this.deptids || [this.staff1.value, this.staff2.value].filter(item => item).join(','),
  808. houseId: this.houseId,
  809. timeType: this.lastEndDate ? null : this.activeTotal + '',
  810. lastEndDate: this.lastEndDate,
  811. lastStartDate: this.lastStartDate,
  812. marketingBusiness: this.marketingBusinessId,
  813. })
  814. .then(res => {
  815. this.LOADING = false
  816. // console.log(res)
  817. // 处理数据
  818. this.chartData1 = {
  819. categories: [],
  820. series: []
  821. }
  822. let allobj = {
  823. categories: [],
  824. series: []
  825. }
  826. let max = 0;
  827. // 当选择全部时
  828. if (!this.staff1.value && !this.staff2.value) {
  829. // let first=res.first
  830. res.first.map((item, index) => {
  831. let obj = {
  832. name: item[0].deptName,
  833. data: []
  834. }
  835. item.map((item1) => {
  836. if (index == 0) {
  837. allobj.categories.push(item1.name)
  838. }
  839. obj.data.push(item1.avgExecutionRate)
  840. if (max < item1.avgExecutionRate) max = item1.avgExecutionRate;
  841. })
  842. allobj.series.push(obj)
  843. })
  844. }
  845. // 当选择只有一个时
  846. else if (this.staff1.value && !this.staff2.value) {
  847. res.first.map((item, index) => {
  848. let obj = {
  849. name: item[0].deptName,
  850. data: []
  851. }
  852. item.map((item1) => {
  853. if (index == 0) {
  854. allobj.categories.push(item1.name)
  855. }
  856. obj.data.push(item1.avgExecutionRate)
  857. if (max < item1.avgExecutionRate) max = item1.avgExecutionRate;
  858. })
  859. allobj.series.push(obj)
  860. })
  861. // 判断是否显示平均
  862. // 如果显示对比
  863. if (this.timepickpickisshow) {
  864. res.second.map((item, index) => {
  865. let obj = {
  866. name: '平均',
  867. data: []
  868. }
  869. item.map((item1) => {
  870. obj.data.push(item1.avgExecutionRate)
  871. })
  872. allobj.series.push(obj)
  873. })
  874. }
  875. } else {
  876. // console.log(3)
  877. // 当两个都选择的时候
  878. res.first.map((item, index) => {
  879. let obj = {
  880. name: item[0].deptName,
  881. data: []
  882. }
  883. item.map((item1) => {
  884. if (index == 0) {
  885. allobj.categories.push(item1.name)
  886. }
  887. obj.data.push(item1.avgExecutionRate)
  888. if (max < item1.avgExecutionRate) max = item1.avgExecutionRate;
  889. })
  890. allobj.series.push(obj)
  891. })
  892. }
  893. this.opts.extra.radar.max = max + 25
  894. // console.log(allobj)
  895. this.chartData1 = allobj
  896. this.$forceUpdate()
  897. }).catch(e => {
  898. this.LOADING = false
  899. })
  900. },
  901. // 定义一个公共方法对数据进行处理
  902. dealData(arr) {
  903. // 获取最大值
  904. let num = Math.max.apply(Math, arr.map(function(o) {
  905. return o.zxl
  906. })) //结果:3
  907. // console.log(num)
  908. if (num > 100) {
  909. // 获取最大值的下标
  910. // let idx=arr.findIndex(item=>item.zxl==num)
  911. // console.log(idx,123)
  912. arr.map(item => {
  913. item.zxl1 = Math.floor(item.zxl / num * 100)
  914. })
  915. // console.log(arr)
  916. return arr
  917. } else {
  918. arr.map(item => {
  919. item.zxl1 = item.zxl
  920. })
  921. return arr
  922. }
  923. },
  924. }
  925. };
  926. </script>
  927. <style lang="scss" scoped>
  928. .boxtittabs {
  929. width: 100%;
  930. height: 92rpx;
  931. background: #FFFFFF;
  932. display: flex;
  933. align-items: center;
  934. .items {
  935. padding: 0 24rpx;
  936. width: 50%;
  937. height: 100%;
  938. display: flex;
  939. align-items: center;
  940. justify-content: center;
  941. overflow: hidden;
  942. white-space: nowrap;
  943. text-overflow: ellipsis;
  944. }
  945. }
  946. .screen {
  947. width: 100%;
  948. .boxtittab {
  949. width: 100%;
  950. flex-direction: column;
  951. border: none;
  952. .tabbox {
  953. width: 100%;
  954. }
  955. }
  956. }
  957. .uchaserboxs {
  958. width: 100%;
  959. height: 70vh;
  960. }
  961. .box {
  962. width: 100%;
  963. height: 100%;
  964. background: #FAFAFA;
  965. padding-bottom: 60rpx;
  966. }
  967. // 对比时间切换
  968. .timepick {
  969. width: 100%;
  970. height: 90rpx;
  971. display: flex;
  972. align-items: center;
  973. background: #FAFAFA;
  974. }
  975. .timepicktime {
  976. width: 260rpx;
  977. height: 50rpx;
  978. border: 1rpx solid #E0E0E0;
  979. margin-left: 30rpx;
  980. display: flex;
  981. background: #FFFFFF;
  982. }
  983. .timepicktime>view:nth-of-type(1) {
  984. width: 210rpx;
  985. height: 100%;
  986. line-height: 50rpx;
  987. font-size: 26rpx;
  988. font-weight: 400;
  989. text-align: center;
  990. }
  991. .timepicktime>view:nth-of-type(2) {
  992. width: 49rpx;
  993. height: 100%;
  994. // border-left: 1px solid #E0E0E0;
  995. }
  996. .timepickpick {
  997. width: 110rpx;
  998. height: 50rpx;
  999. margin-left: 30rpx;
  1000. display: flex;
  1001. align-items: center;
  1002. }
  1003. .Underimg {
  1004. width: 50rpx;
  1005. height: 50rpx;
  1006. margin-top: -2rpx;
  1007. }
  1008. .heji {
  1009. overflow: hidden;
  1010. text-overflow: ellipsis;
  1011. white-space: nowrap;
  1012. }
  1013. </style>