Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 

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