AI销管
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.
 
 
 
 

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