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.

Groupcontrast.vue 15 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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536
  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 style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  18. <view class="single">
  19. <view class="title">
  20. <view class="title1">接待量(TOP10)</view>
  21. </view>
  22. <view class="hejibox">
  23. <view class="heji">项目:{{newTeam1||0}}</view>
  24. <view class="heji">均值:{{newAvg1||0}}</view>
  25. </view>
  26. <view class="jindu">
  27. <view class="jindu-box" v-for="(item,index) in newlisttabinfo1" :key="index">
  28. <view class="jindu-boxche">
  29. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  30. <view style="width: 440rpx;margin-left: 10rpx;">
  31. <u-line-progress height="24" :show-percent="false" active-color="#FBA448"
  32. :percent="item.zxl1"></u-line-progress>
  33. </view>
  34. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
  35. </view>
  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">接待时长(TOP10)</view>
  43. </view>
  44. <view class="hejibox">
  45. <view class="heji">项目:{{newTeam2||0}}</view>
  46. <view class="heji">均值:{{newAvg2||0}}</view>
  47. </view>
  48. <view class="jindu">
  49. <view class="jindu-box" v-for="(item,index) in newlisttabinfo2" :key="index">
  50. <view class="jindu-boxche">
  51. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  52. <view style="width: 440rpx;margin-left: 10rpx;">
  53. <u-line-progress height="24" :show-percent="false" active-color="#4FC78F"
  54. :percent="item.zxl1"></u-line-progress>
  55. </view>
  56. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  62. <view class="single">
  63. <view class="title">
  64. <view class="title1" style="flex: 1;">销讲执行排名(TOP10)</view>
  65. <!-- <view class="title3" style="flex: 1;">
  66. <view class="title3-box">
  67. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">执行率</view>
  68. </view>
  69. <view class="title3-box">
  70. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">得分</view>
  71. </view>
  72. </view> -->
  73. </view>
  74. <view class="hejibox">
  75. <view class="heji">项目:{{newTeam3||0}}</view>
  76. <view class="heji">均值:{{newAvg3||0}}%</view>
  77. </view>
  78. <view class="jindu">
  79. <view class="jindu-box" v-for="(item,index) in newlisttabinfo3" :key="index">
  80. <view class="jindu-boxche">
  81. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  82. <view style="width: 440rpx;margin-left: 10rpx;">
  83. <u-line-progress height="24" :show-percent="false" active-color="#9B6BDF"
  84. :percent="item.zxl1"></u-line-progress>
  85. </view>
  86. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  87. </view>
  88. </view>
  89. </view>
  90. </view>
  91. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  92. <view class="single">
  93. <view class="title">
  94. <view class="title1" style="flex: 1;">顾问执行排名(TOP10)</view>
  95. <!-- <view class="title3" style="flex: 1;">
  96. <view class="title3-box">
  97. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">执行率</view>
  98. </view>
  99. <view class="title3-box">
  100. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">得分</view>
  101. </view>
  102. </view> -->
  103. </view>
  104. <!-- <view class="hejibox">
  105. <view class="heji">项目:{{newTeam4||0}}</view>
  106. <view class="heji">均值:{{newAvg4||0}}</view>
  107. </view> -->
  108. <view class="jindu" style="padding: 30rpx 0;">
  109. <view class="jindu-box" v-for="(item,index) in newlisttabinfo4" :key="index">
  110. <view class="jindu-boxche">
  111. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  112. <view style="width: 440rpx;margin-left: 10rpx;">
  113. <u-line-progress height="24" :show-percent="false" active-color="#9B6BDF"
  114. :percent="item.zxl1"></u-line-progress>
  115. </view>
  116. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  117. </view>
  118. </view>
  119. </view>
  120. </view>
  121. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  122. <view class="single">
  123. <view class="title" style="padding-right: 30rpx;">
  124. <view class="title1" style="flex: 1;">销讲能力</view>
  125. <!-- <view class="title2" style="flex: 1;justify-content: flex-end;" @click="Groupcontrast">
  126. <view class="title2-che">项目
  127. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  128. </view>
  129. </view> -->
  130. <view class="title2" style="flex: 1;justify-content: flex-end;" @click="staffShow=true">
  131. <view class="title2-che" style="width: auto;"><text
  132. style="margin-right: 40rpx;">{{staff.label}}</text>
  133. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  134. </view>
  135. </view>
  136. </view>
  137. <!-- <view class="hejibox">
  138. <view class="heji">项目:50</view>
  139. <view class="heji">均值:25</view>
  140. </view> -->
  141. <view class="uchaserbox">
  142. <qiun-data-charts type="radar" :opts="opts" :chartData="chartData" :canvas2d="true"
  143. canvasId="wangxiaohuaerlingeryilingwuyib88" background="none" />
  144. </view>
  145. </view>
  146. <!-- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  147. <view class="single">
  148. <view class="title">
  149. <view class="title1">禁忌执行率(TOP10)</view>
  150. </view>
  151. <view class="hejibox">
  152. <view class="heji">合计:50</view>
  153. <view class="heji">均值:25</view>
  154. </view>
  155. <view class="jindu">
  156. <view class="jindu-box" v-for="(item,index) in newlisttabinfo" :key="index">
  157. <view class="jindu-boxche">
  158. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  159. <view style="width: 440rpx;margin-left: 10rpx;">
  160. <u-line-progress height="24" :show-percent="false" active-color="#E6625B" :percent="item.zxl"></u-line-progress>
  161. </view>
  162. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  163. </view>
  164. </view>
  165. </view>
  166. </view> -->
  167. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  168. <!-- <view class="single">
  169. <view class="title" style="padding-right: 30rpx;">
  170. <view class="title1" style="flex: 1;">违禁能力(TOP10)</view>
  171. <view class="title2" style="flex: 1;justify-content: flex-end;">
  172. <view class="title2-che">项目
  173. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  174. </view>
  175. </view>
  176. </view>
  177. <view class="hejibox">
  178. <view class="heji">合计:50</view>
  179. <view class="heji">均值:25</view>
  180. </view>
  181. <view class="uchaserbox">
  182. <qiun-data-charts
  183. type="radar"
  184. :chartData="chartData"
  185. :canvas2d="true"
  186. canvasId="wangxiaohuaerlingeryilingwuyib89"
  187. background="none"
  188. />
  189. </view>
  190. </view> -->
  191. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  192. <!-- 选择项目 -->
  193. <u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback" :default-value='selindex'>
  194. </u-select>
  195. <!-- 加载组件 -->
  196. <loading v-model="LOADING"></loading>
  197. </view>
  198. </template>
  199. <script>
  200. var app = getApp();
  201. var util = require("../../../utils/util.js");
  202. var config = require("../../../config");
  203. import loading from "@/components/loading/index.vue"
  204. export default {
  205. components: {
  206. loading
  207. },
  208. data() {
  209. return {
  210. activeTotal: 4,
  211. activeTotal2: 0,
  212. bocindex: 0,
  213. totalTimeShow: false,
  214. // 项目id
  215. houseId: '',
  216. staffShow: false,
  217. staffList: [],
  218. lastStartDate: '',
  219. lastEndDate: '',
  220. newTeam1: '',
  221. newAvg1: '',
  222. newTeam2: '',
  223. newAvg2: '',
  224. newTeam3: '',
  225. newAvg3: '',
  226. newTeam4: '',
  227. newAvg4: '',
  228. staff: {
  229. value: '',
  230. label: ''
  231. },
  232. newlisttabinfo1: [{
  233. name: '接待量',
  234. zxl: '10'
  235. },
  236. {
  237. name: '平均执行率',
  238. zxl: '50'
  239. },
  240. {
  241. name: '接待客户',
  242. zxl: '80'
  243. },
  244. ],
  245. newlisttabinfo2: [{
  246. name: '接待量',
  247. zxl: '10'
  248. },
  249. {
  250. name: '平均执行率',
  251. zxl: '50'
  252. },
  253. {
  254. name: '接待客户',
  255. zxl: '80'
  256. },
  257. ],
  258. newlisttabinfo3: [{
  259. name: '接待量',
  260. zxl: '10'
  261. },
  262. {
  263. name: '平均执行率',
  264. zxl: '50'
  265. },
  266. {
  267. name: '接待客户',
  268. zxl: '80'
  269. },
  270. ],
  271. newlisttabinfo4: [{
  272. name: '接待量',
  273. zxl: '10'
  274. },
  275. {
  276. name: '平均执行率',
  277. zxl: '50'
  278. },
  279. {
  280. name: '接待客户',
  281. zxl: '80'
  282. },
  283. ],
  284. chartData: {
  285. "categories": ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
  286. "series": [{
  287. "name": "成交量",
  288. "data": [90, 110, 165, 195, 187, 172]
  289. }]
  290. },
  291. opts: {
  292. fontSize: 10,
  293. extra: {
  294. radar: {
  295. max: ''
  296. }
  297. }
  298. }
  299. };
  300. },
  301. onLoad() {
  302. this.LOADING = true
  303. let that = this
  304. uni.$on('updateGroup', function(data) {
  305. console.log(data)
  306. that.houseId = data.arr.join(',')
  307. // 获取销奖能力
  308. that.getPowerList()
  309. })
  310. this.getSectionList()
  311. },
  312. onPullDownRefresh() {
  313. let that = this
  314. uni.$on('updateGroup', function(data) {
  315. console.log(data)
  316. that.houseId = data.arr.join(',')
  317. // 获取销奖能力
  318. that.getPowerList()
  319. })
  320. this.getSectionList()
  321. setTimeout(function() {
  322. uni.stopPullDownRefresh();
  323. }, 1000);
  324. },
  325. methods: {
  326. // 获取部门列表
  327. getSectionList() {
  328. this.$u.post('/user/getHouseByToken', )
  329. .then(res => {
  330. // console.log(res)
  331. this.staffList = []
  332. res.map((item, index) => {
  333. let obj = {}
  334. obj.value = item.id
  335. obj.label = item.propertyName
  336. this.staffList.push(obj)
  337. })
  338. this.houseId = this.staffList[0].value
  339. this.staff = this.staffList[0]
  340. this.getdata()
  341. // console.log(this.staffList,this.staffList,this.houseId)
  342. })
  343. },
  344. //指标执行率分析tab
  345. tapspagek2(index) {
  346. this.bocindex = index;
  347. },
  348. staffSelectCallback(e) {
  349. this.staff = e[0]
  350. this.houseId = e[0].value
  351. this.getPowerList()
  352. },
  353. getdata() {
  354. // 请求接口获取接待量
  355. this.receptionCountList('1', '/cusLvStatistics/groupComparisonReception')
  356. // 接待时长
  357. this.receptionCountList('2', '/cusLvStatistics/groupComparisonReceptionTime')
  358. // 销讲排名
  359. this.receptionCountList('3', '/cusLvStatistics/groupComparisonTalkRank')
  360. // 顾问牌名
  361. this.receptionCountList('4', '/cusLvStatistics/groupComparisonTalkRankByConsultant')
  362. // 销奖能力
  363. this.getPowerList()
  364. },
  365. //时间切换
  366. tabtimetap(index) {
  367. if (index == 3) {
  368. this.totalTimeShow = true;
  369. } else {
  370. this.activeTotal = index;
  371. this.lastEndDate = ''
  372. this.lastStartDate = ''
  373. this.getdata()
  374. // // 获取数据
  375. // // 团队对比接待量
  376. // this.receptionCountList(0,1,'/cusLvStatistics/teamAnalysisReception')
  377. // // 团队对比接待时长
  378. // this.receptionCountList(0,2,'/cusLvStatistics/teamAnalysisReceptionTime')
  379. // /* 销奖执行率 */
  380. // this.receptionCountList(0,3,'/cusLvStatistics/teamAnalysisExecutionRate')
  381. // // 获取销奖能力
  382. // this.getPowerList()
  383. }
  384. },
  385. // 接待时长
  386. receptionCountList(index, url) {
  387. this.$u.post(url, {
  388. timeType: this.lastEndDate ? null : this.activeTotal + '',
  389. lastEndDate: this.lastEndDate,
  390. lastStartDate: this.lastStartDate
  391. })
  392. .then(res => {
  393. // console.log(res)
  394. let result = res.result
  395. this['newTeam' + index] = res.avg[0]
  396. this['newAvg' + index] = res.avg[1]
  397. // return
  398. // 处理数据
  399. // 先处理牌名数据,需要进行判断全部还是单个
  400. // 当为全部时
  401. this['newlisttabinfo' + index] = []
  402. // 当选择全部时
  403. let arr = []
  404. // 当两个都选择的时候
  405. result.map(item => {
  406. let obj = {}
  407. obj.name = item.houseName
  408. obj.zxl = item.data
  409. arr.push(obj)
  410. })
  411. arr = this.dealData(arr)
  412. this['newlisttabinfo' + index] = arr
  413. })
  414. },
  415. // 获取销奖能力
  416. getPowerList() {
  417. this.$u.post('/cusLvStatistics/groupComparisonMarketingAbility', {
  418. houseIds: this.houseId,
  419. timeType: this.lastEndDate ? null : this.activeTotal + '',
  420. lastEndDate: this.lastEndDate,
  421. lastStartDate: this.lastStartDate
  422. })
  423. .then(res => {
  424. this.LOADING = false
  425. // console.log(res,123)
  426. // 处理数据
  427. // return
  428. this.chartData = {
  429. categories: [],
  430. series: []
  431. }
  432. let allobj = {
  433. categories: [],
  434. series: []
  435. }
  436. let max = 0;
  437. res.result.map((item, index) => {
  438. let obj = {
  439. name: item[0].houseName,
  440. data: []
  441. }
  442. item.map(item1 => {
  443. if (index == 0) {
  444. allobj.categories.push(item1.name)
  445. }
  446. obj.data.push(item1.avgExecutionRate)
  447. if (max < item1.avgExecutionRate) max = item1.avgExecutionRate;
  448. })
  449. allobj.series.push(obj)
  450. })
  451. // console.log(allobj)
  452. this.opts.extra.radar.max = max + 25
  453. this.chartData = allobj
  454. this.$forceUpdate()
  455. }).catch(e => {
  456. this.LOADING = false
  457. })
  458. },
  459. //自定义时间
  460. totalTimeChange(e) {
  461. console.log(e.startDate, e.endDate)
  462. this.activeTotal = 3;
  463. this.lastEndDate = e.endDate
  464. this.lastStartDate = e.startDate
  465. this.getdata()
  466. },
  467. //集团对比
  468. Groupcontrast() {
  469. uni.navigateTo({
  470. url: `/pages/center/Piabodata/selectGroup?ids=${this.houseId}`
  471. });
  472. },
  473. // 定义一个公共方法对数据进行处理
  474. dealData(arr) {
  475. // 获取最大值
  476. let num = Math.max.apply(Math, arr.map(function(o) {
  477. return o.zxl
  478. })) //结果:3
  479. // console.log(num)
  480. if (num > 100) {
  481. // 获取最大值的下标
  482. // let idx=arr.findIndex(item=>item.zxl==num)
  483. // console.log(idx,123)
  484. arr.map(item => {
  485. item.zxl1 = Math.floor(item.zxl / num * 100)
  486. })
  487. // console.log(arr)
  488. return arr
  489. } else {
  490. arr.map(item => {
  491. item.zxl1 = item.zxl
  492. })
  493. return arr
  494. }
  495. },
  496. }
  497. };
  498. </script>
  499. <style lang="scss" scoped>
  500. .box {
  501. width: 100%;
  502. height: 100%;
  503. background: #FAFAFA;
  504. padding-bottom: 60rpx;
  505. }
  506. .jindu {
  507. padding: 0 0 30rpx;
  508. height: auto;
  509. min-height: 300rpx;
  510. }
  511. </style>