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.
 
 
 
 

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