您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 

408 行
12 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. <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.zxl"></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.zxl"></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.zxl"></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.zxl"></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;">销奖能力(TOP10)</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>
  135. <!-- <view class="hejibox">
  136. <view class="heji">楼盘:50</view>
  137. <view class="heji">均值:25</view>
  138. </view> -->
  139. <view class="uchaserbox">
  140. <qiun-data-charts
  141. type="radar"
  142. :chartData="chartData"
  143. :canvas2d="true"
  144. canvasId="wangxiaohuaerlingeryilingwuyib88"
  145. background="none"
  146. />
  147. </view>
  148. </view>
  149. <!-- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  150. <view class="single">
  151. <view class="title">
  152. <view class="title1">禁忌执行率(TOP10)</view>
  153. </view>
  154. <view class="hejibox">
  155. <view class="heji">合计:50</view>
  156. <view class="heji">均值:25</view>
  157. </view>
  158. <view class="jindu">
  159. <view class="jindu-box" v-for="(item,index) in newlisttabinfo" :key="index">
  160. <view class="jindu-boxche">
  161. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  162. <view style="width: 440rpx;margin-left: 10rpx;">
  163. <u-line-progress height="24" :show-percent="false" active-color="#E6625B" :percent="item.zxl"></u-line-progress>
  164. </view>
  165. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  166. </view>
  167. </view>
  168. </view>
  169. </view> -->
  170. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  171. <!-- <view class="single">
  172. <view class="title" style="padding-right: 30rpx;">
  173. <view class="title1" style="flex: 1;">违禁能力(TOP10)</view>
  174. <view class="title2" style="flex: 1;justify-content: flex-end;">
  175. <view class="title2-che">楼盘
  176. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  177. </view>
  178. </view>
  179. </view>
  180. <view class="hejibox">
  181. <view class="heji">合计:50</view>
  182. <view class="heji">均值:25</view>
  183. </view>
  184. <view class="uchaserbox">
  185. <qiun-data-charts
  186. type="radar"
  187. :chartData="chartData"
  188. :canvas2d="true"
  189. canvasId="wangxiaohuaerlingeryilingwuyib89"
  190. background="none"
  191. />
  192. </view>
  193. </view> -->
  194. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  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: 2,
  205. activeTotal2: 0,
  206. bocindex:0,
  207. totalTimeShow: false,
  208. // 楼盘id
  209. houseId:'',
  210. lastStartDate:'',
  211. lastEndDate :'',
  212. newTeam1:'',
  213. newAvg1:'',
  214. newTeam2:'',
  215. newAvg2:'',
  216. newTeam3:'',
  217. newAvg3:'',
  218. newTeam4:'',
  219. newAvg4:'',
  220. newlisttabinfo1:[
  221. {name:'接待量',zxl:'10'},
  222. {name:'平均执行率',zxl:'50'},
  223. {name:'接待客户',zxl:'80'},
  224. ],
  225. newlisttabinfo2:[
  226. {name:'接待量',zxl:'10'},
  227. {name:'平均执行率',zxl:'50'},
  228. {name:'接待客户',zxl:'80'},
  229. ],
  230. newlisttabinfo3:[
  231. {name:'接待量',zxl:'10'},
  232. {name:'平均执行率',zxl:'50'},
  233. {name:'接待客户',zxl:'80'},
  234. ],
  235. newlisttabinfo4:[
  236. {name:'接待量',zxl:'10'},
  237. {name:'平均执行率',zxl:'50'},
  238. {name:'接待客户',zxl:'80'},
  239. ],
  240. chartData:{
  241. "categories": ["维度1","维度2","维度3","维度4","维度5","维度6"],
  242. "series": [
  243. {
  244. "name": "成交量",
  245. "data": [90,110,165,195,187,172]
  246. }
  247. ]
  248. }
  249. };
  250. },
  251. onLoad() {
  252. let that=this
  253. uni.$on('updateGroup',function(data){
  254. console.log(data)
  255. that.houseId=data.arr.join(',')
  256. // 获取销奖能力
  257. that.getPowerList()
  258. })
  259. this.getdata()
  260. },
  261. methods: {
  262. //指标执行率分析tab
  263. tapspagek2(index) {
  264. this.bocindex = index;
  265. },
  266. getdata(){
  267. // 请求接口获取接待量
  268. this.receptionCountList('1','/cusLvStatistics/groupComparisonReception')
  269. // 接待时长
  270. this.receptionCountList('2','/cusLvStatistics/groupComparisonReceptionTime')
  271. // 小将排名
  272. this.receptionCountList('3','/cusLvStatistics/groupComparisonTalkRank')
  273. // 顾问牌名
  274. this.receptionCountList('4','/cusLvStatistics/groupComparisonTalkRankByConsultant')
  275. // 销奖能力
  276. this.getPowerList()
  277. },
  278. //时间切换
  279. tabtimetap(index) {
  280. if (index == 3) {
  281. this.totalTimeShow = true;
  282. } else {
  283. this.activeTotal = index;
  284. this.lastEndDate=''
  285. this.lastStartDate=''
  286. this.getdata()
  287. // // 获取数据
  288. // // 团队对比接待量
  289. // this.receptionCountList(0,1,'/cusLvStatistics/teamAnalysisReception')
  290. // // 团队对比接待时长
  291. // this.receptionCountList(0,2,'/cusLvStatistics/teamAnalysisReceptionTime')
  292. // /* 销奖执行率 */
  293. // this.receptionCountList(0,3,'/cusLvStatistics/teamAnalysisExecutionRate')
  294. // // 获取销奖能力
  295. // this.getPowerList()
  296. }
  297. },
  298. // 接待时长
  299. receptionCountList(index,url){
  300. this.$u.post(url,{
  301. timeType:this.lastEndDate?null:this.activeTotal+'',
  302. lastEndDate:this.lastEndDate,
  303. lastStartDate:this.lastStartDate
  304. })
  305. .then(res=>{
  306. // console.log(res)
  307. let result=res.result
  308. this['newTeam'+index]=res.avg[0]
  309. this['newAvg'+index]=res.avg[1]
  310. // return
  311. // 处理数据
  312. // 先处理牌名数据,需要进行判断全部还是单个
  313. // 当为全部时
  314. this['newlisttabinfo'+index]=[]
  315. // 当选择全部时
  316. // 当两个都选择的时候
  317. result.map(item=>{
  318. let obj={}
  319. obj.name=item.houseName
  320. obj.zxl=item.data
  321. this['newlisttabinfo'+index].push(obj)
  322. })
  323. })
  324. },
  325. // 获取销奖能力
  326. getPowerList(){
  327. this.$u.post('/cusLvStatistics/groupComparisonMarketingAbility',{
  328. houseIds:this.houseId,
  329. timeType:this.lastEndDate?null:this.activeTotal+'',
  330. lastEndDate:this.lastEndDate,
  331. lastStartDate:this.lastStartDate
  332. })
  333. .then(res=>{
  334. // console.log(res,123)
  335. // 处理数据
  336. // return
  337. this.chartData={
  338. categories:[],
  339. series:[]
  340. }
  341. let allobj={
  342. categories:[],
  343. series:[]
  344. }
  345. res.result.map((item,index)=>{
  346. let obj={
  347. name:item[0].houseName,
  348. data:[]
  349. }
  350. item.map(item1=>{
  351. if(index==0){
  352. allobj.categories.push(item1.name)
  353. }
  354. obj.data.push(item1.avgExecutionRate)
  355. })
  356. allobj.series.push(obj)
  357. })
  358. // console.log(allobj)
  359. this.chartData=allobj
  360. this.$forceUpdate()
  361. })
  362. },
  363. //自定义时间
  364. totalTimeChange(e) {
  365. console.log(e.startDate, e.endDate)
  366. this.activeTotal=3;
  367. this.lastEndDate=e.endDate
  368. this.lastStartDate=e.startDate
  369. this.getdata()
  370. },
  371. //集团对比
  372. Groupcontrast(){
  373. uni.navigateTo({
  374. url: `/pages/center/Piabodata/selectGroup?ids=${this.houseId}`
  375. });
  376. }
  377. }
  378. };
  379. </script>
  380. <style lang="scss" scoped>
  381. .box {
  382. width: 100%;
  383. height: 100%;
  384. background: #FAFAFA;
  385. padding-bottom: 60rpx;
  386. }
  387. </style>