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.

Theteamcompared.vue 28 KiB

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