Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 

526 рядки
15 KiB

  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. </view>
  196. </template>
  197. <script>
  198. var app = getApp();
  199. var util = require("../../../utils/util.js");
  200. var config = require("../../../config");
  201. export default {
  202. data() {
  203. return {
  204. activeTotal: 4,
  205. activeTotal2: 0,
  206. bocindex: 0,
  207. totalTimeShow: false,
  208. // 项目id
  209. houseId: '',
  210. staffShow: false,
  211. staffList: [],
  212. lastStartDate: '',
  213. lastEndDate: '',
  214. newTeam1: '',
  215. newAvg1: '',
  216. newTeam2: '',
  217. newAvg2: '',
  218. newTeam3: '',
  219. newAvg3: '',
  220. newTeam4: '',
  221. newAvg4: '',
  222. staff: {
  223. value: '',
  224. label: ''
  225. },
  226. newlisttabinfo1: [{
  227. name: '接待量',
  228. zxl: '10'
  229. },
  230. {
  231. name: '平均执行率',
  232. zxl: '50'
  233. },
  234. {
  235. name: '接待客户',
  236. zxl: '80'
  237. },
  238. ],
  239. newlisttabinfo2: [{
  240. name: '接待量',
  241. zxl: '10'
  242. },
  243. {
  244. name: '平均执行率',
  245. zxl: '50'
  246. },
  247. {
  248. name: '接待客户',
  249. zxl: '80'
  250. },
  251. ],
  252. newlisttabinfo3: [{
  253. name: '接待量',
  254. zxl: '10'
  255. },
  256. {
  257. name: '平均执行率',
  258. zxl: '50'
  259. },
  260. {
  261. name: '接待客户',
  262. zxl: '80'
  263. },
  264. ],
  265. newlisttabinfo4: [{
  266. name: '接待量',
  267. zxl: '10'
  268. },
  269. {
  270. name: '平均执行率',
  271. zxl: '50'
  272. },
  273. {
  274. name: '接待客户',
  275. zxl: '80'
  276. },
  277. ],
  278. chartData: {
  279. "categories": ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
  280. "series": [{
  281. "name": "成交量",
  282. "data": [90, 110, 165, 195, 187, 172]
  283. }]
  284. },
  285. opts: {
  286. fontSize: 10,
  287. extra: {
  288. radar: {
  289. max: ''
  290. }
  291. }
  292. }
  293. };
  294. },
  295. onLoad() {
  296. let that = this
  297. uni.$on('updateGroup', function(data) {
  298. console.log(data)
  299. that.houseId = data.arr.join(',')
  300. // 获取销奖能力
  301. that.getPowerList()
  302. })
  303. this.getSectionList()
  304. },
  305. onPullDownRefresh() {
  306. let that = this
  307. uni.$on('updateGroup', function(data) {
  308. console.log(data)
  309. that.houseId = data.arr.join(',')
  310. // 获取销奖能力
  311. that.getPowerList()
  312. })
  313. this.getSectionList()
  314. setTimeout(function() {
  315. uni.stopPullDownRefresh();
  316. }, 1000);
  317. },
  318. methods: {
  319. // 获取部门列表
  320. getSectionList() {
  321. this.$u.post('/user/getHouseByToken', )
  322. .then(res => {
  323. // console.log(res)
  324. this.staffList = []
  325. res.map((item, index) => {
  326. let obj = {}
  327. obj.value = item.id
  328. obj.label = item.propertyName
  329. this.staffList.push(obj)
  330. })
  331. this.houseId = this.staffList[0].value
  332. this.staff = this.staffList[0]
  333. this.getdata()
  334. // console.log(this.staffList,this.staffList,this.houseId)
  335. })
  336. },
  337. //指标执行率分析tab
  338. tapspagek2(index) {
  339. this.bocindex = index;
  340. },
  341. staffSelectCallback(e) {
  342. this.staff = e[0]
  343. this.houseId = e[0].value
  344. this.getPowerList()
  345. },
  346. getdata() {
  347. // 请求接口获取接待量
  348. this.receptionCountList('1', '/cusLvStatistics/groupComparisonReception')
  349. // 接待时长
  350. this.receptionCountList('2', '/cusLvStatistics/groupComparisonReceptionTime')
  351. // 小将排名
  352. this.receptionCountList('3', '/cusLvStatistics/groupComparisonTalkRank')
  353. // 顾问牌名
  354. this.receptionCountList('4', '/cusLvStatistics/groupComparisonTalkRankByConsultant')
  355. // 销奖能力
  356. this.getPowerList()
  357. },
  358. //时间切换
  359. tabtimetap(index) {
  360. if (index == 3) {
  361. this.totalTimeShow = true;
  362. } else {
  363. this.activeTotal = index;
  364. this.lastEndDate = ''
  365. this.lastStartDate = ''
  366. this.getdata()
  367. // // 获取数据
  368. // // 团队对比接待量
  369. // this.receptionCountList(0,1,'/cusLvStatistics/teamAnalysisReception')
  370. // // 团队对比接待时长
  371. // this.receptionCountList(0,2,'/cusLvStatistics/teamAnalysisReceptionTime')
  372. // /* 销奖执行率 */
  373. // this.receptionCountList(0,3,'/cusLvStatistics/teamAnalysisExecutionRate')
  374. // // 获取销奖能力
  375. // this.getPowerList()
  376. }
  377. },
  378. // 接待时长
  379. receptionCountList(index, url) {
  380. this.$u.post(url, {
  381. timeType: this.lastEndDate ? null : this.activeTotal + '',
  382. lastEndDate: this.lastEndDate,
  383. lastStartDate: this.lastStartDate
  384. })
  385. .then(res => {
  386. // console.log(res)
  387. let result = res.result
  388. this['newTeam' + index] = res.avg[0]
  389. this['newAvg' + index] = res.avg[1]
  390. // return
  391. // 处理数据
  392. // 先处理牌名数据,需要进行判断全部还是单个
  393. // 当为全部时
  394. this['newlisttabinfo' + index] = []
  395. // 当选择全部时
  396. let arr = []
  397. // 当两个都选择的时候
  398. result.map(item => {
  399. let obj = {}
  400. obj.name = item.houseName
  401. obj.zxl = item.data
  402. arr.push(obj)
  403. })
  404. arr = this.dealData(arr)
  405. this['newlisttabinfo' + index] = arr
  406. })
  407. },
  408. // 获取销奖能力
  409. getPowerList() {
  410. this.$u.post('/cusLvStatistics/groupComparisonMarketingAbility', {
  411. houseIds: this.houseId,
  412. timeType: this.lastEndDate ? null : this.activeTotal + '',
  413. lastEndDate: this.lastEndDate,
  414. lastStartDate: this.lastStartDate
  415. })
  416. .then(res => {
  417. // console.log(res,123)
  418. // 处理数据
  419. // return
  420. this.chartData = {
  421. categories: [],
  422. series: []
  423. }
  424. let allobj = {
  425. categories: [],
  426. series: []
  427. }
  428. let max = 0;
  429. res.result.map((item, index) => {
  430. let obj = {
  431. name: item[0].houseName,
  432. data: []
  433. }
  434. item.map(item1 => {
  435. if (index == 0) {
  436. allobj.categories.push(item1.name)
  437. }
  438. obj.data.push(item1.avgExecutionRate)
  439. if (max < item1.avgExecutionRate) max = item1.avgExecutionRate;
  440. })
  441. allobj.series.push(obj)
  442. })
  443. // console.log(allobj)
  444. this.opts.extra.radar.max = max + 25
  445. this.chartData = allobj
  446. this.$forceUpdate()
  447. })
  448. },
  449. //自定义时间
  450. totalTimeChange(e) {
  451. console.log(e.startDate, e.endDate)
  452. this.activeTotal = 3;
  453. this.lastEndDate = e.endDate
  454. this.lastStartDate = e.startDate
  455. this.getdata()
  456. },
  457. //集团对比
  458. Groupcontrast() {
  459. uni.navigateTo({
  460. url: `/pages/center/Piabodata/selectGroup?ids=${this.houseId}`
  461. });
  462. },
  463. // 定义一个公共方法对数据进行处理
  464. dealData(arr) {
  465. // 获取最大值
  466. let num = Math.max.apply(Math, arr.map(function(o) {
  467. return o.zxl
  468. })) //结果:3
  469. // console.log(num)
  470. if (num > 100) {
  471. // 获取最大值的下标
  472. // let idx=arr.findIndex(item=>item.zxl==num)
  473. // console.log(idx,123)
  474. arr.map(item => {
  475. item.zxl1 = Math.floor(item.zxl / num * 100)
  476. })
  477. // console.log(arr)
  478. return arr
  479. } else {
  480. arr.map(item => {
  481. item.zxl1 = item.zxl
  482. })
  483. return arr
  484. }
  485. },
  486. }
  487. };
  488. </script>
  489. <style lang="scss" scoped>
  490. .box {
  491. width: 100%;
  492. height: 100%;
  493. background: #FAFAFA;
  494. padding-bottom: 60rpx;
  495. }
  496. .jindu {
  497. padding: 0 0 30rpx;
  498. height: auto;
  499. min-height: 300rpx;
  500. }
  501. </style>