選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

Groupcontrast.vue 14 KiB

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