Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 

745 righe
18 KiB

  1. <template>
  2. <view class="box">
  3. <!-- 选择器 -->
  4. <view class="boxtittab">
  5. <view class="tabbox" @click="timeshow=true" style="color:#409eff">
  6. {{ time }}
  7. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  8. </view>
  9. <view class="tabbox" @click="deptshow=true" :style="dept=='部门'?'color:#666':'color:#409eff'">
  10. {{ dept}}
  11. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  12. </view>
  13. <view class="tabbox" @click="guwenshow=true" :style="guwen=='顾问'?'color:#666':'color:#409eff'">
  14. {{ guwen}}
  15. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  16. </view>
  17. </view>
  18. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  19. <view class="boxzonglan" style="min-height: 400rpx;">
  20. <view class="zonglantitle">简报 <text @click="showDesc=true">统计说明</text></view>
  21. <view class="zonglanbox">
  22. <view class="grid" style="height: auto;" v-for="(item,index) in numlist" :key="index">
  23. <view class="audonum">{{item.name}}</view>
  24. <view class="num">{{item.firstnum||0}}</view>
  25. <view class="bottom">
  26. <view class="leftnum">对比:{{item.endnum||0}}</view>
  27. <view class="rightnum" :class="item.duibinum>0?'red':'green'">{{item.duibinum||0}}
  28. <image v-if="item.duibinum>0" src="https://static.quhouse.com/c4145f84cc3c49769ee2ec11465c085b.png" mode="" />
  29. <image v-else src="https://static.quhouse.com/c5dbf780e09a4da0b0bab2d7fa58accd.png" mode="" />
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. <!-- 统计说明 -->
  36. <view class="black-bg" v-if="showDesc" >
  37. <view class="tongjiDesc">
  38. <view class="tongji-title">统计说明</view>
  39. <view class="text">
  40. <view><text class="bold">平均需求挖掘率:</text>筛选时间内,有效接待中已标记顾问的需求挖掘执行率的平均值;</view>
  41. <view><text class="bold">未标记:</text>筛选时间内,有效接待中未标记顾问的接待数;</view>
  42. <view><text class="bold">有效接待:</text>筛选时间内,标记为有效的接待数,不包含待接单;</view>
  43. <view><text class="bold">未挖掘需求数:</text>筛选时间内,需求挖掘平均执行率为0的接待数;</view>
  44. </view>
  45. </view>
  46. <view class="close" @click="showDesc=false">X</view>
  47. </view>
  48. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  49. <view class="single">
  50. <view class="title">
  51. <view class="title1">平均需求挖掘率趋势</view>
  52. </view>
  53. <view class="uchaserbox">
  54. <qiun-data-charts type="line" :chartData="lineOptsect" :opts="lineOpts" background="none"
  55. :ontouch="true" canvasId="wangxiaohuaerlingilingwuyiba2" :canvas2d="true" />
  56. </view>
  57. </view>
  58. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  59. <view class="single">
  60. <view class="title">
  61. <view class="title1">需求挖掘分布</view>
  62. </view>
  63. <view class="uchaserbox">
  64. <qiun-data-charts
  65. type="ring"
  66. :chartData="ringChartData"
  67. :canvas2d="true"
  68. canvasId="ChartBoxIdwangxiaohuaerlingilingwuyiba1"
  69. :opts='opts'
  70. background="none" />
  71. </view>
  72. </view>
  73. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  74. <view class="single">
  75. <view class="title">
  76. <view class="title1">需求挖掘排名</view>
  77. </view>
  78. <view class="tabdada">
  79. <view class="tabth">
  80. <view>排名</view>
  81. <view>需求类型/挖掘执行接待数</view>
  82. <view>执行率</view>
  83. <view>操作</view>
  84. </view>
  85. <view v-if="total==0" style="color: #999999;width: 100%;height: 500rpx;line-height: 500rpx;text-align: center;" >暂无数据</view>
  86. <view class="tabtd" v-for="(item,i) in rankList" :key="i">
  87. <view>
  88. <image v-if="i==0" class="ranking" src="../../../static/images/ranking1.png" mode=""></image>
  89. <image v-else-if="i==1" class="ranking" src="../../../static/images/ranking2.png" mode=""></image>
  90. <image v-else-if="i==2" class="ranking" src="../../../static/images/ranking3.png" mode=""></image>
  91. <view class="ranking1" v-else>{{i+1}}</view>
  92. </view>
  93. <view class="u-line-1">{{item.name}}({{item.selected}})</view>
  94. <view>{{max100(item.fraction)}}%</view>
  95. <view @click="Toview(item,i)">查看</view>
  96. </view>
  97. </view>
  98. </view>
  99. <u-popup v-model="timeshow" mode="bottom">
  100. <view class="timeview" :style="{ color: activeTotal == 2 ? '#2B6EFF' : '#333333' }"
  101. @click="tabtimetap(2, '近7天')">
  102. 近7天</view>
  103. <view class="timeview" :style="{ color: activeTotal == 5 ? '#2B6EFF' : '#333333' }"
  104. @click="tabtimetap(5, '近15天')">
  105. 近15天</view>
  106. <view class="timeview" :style="{ color: activeTotal == 6 ? '#2B6EFF' : '#333333' }"
  107. @click="tabtimetap(6, '近30天')">
  108. 近30天</view>
  109. <view class="timeview" :style="{ color: activeTotal == 4 ? '#2B6EFF' : '#333333' }"
  110. @click="tabtimetap(4,'自定义')">
  111. 自定义</view>
  112. </u-popup>
  113. <u-calendar v-model="calendarShow" mode="range" @change="calendarTimeChange"></u-calendar>
  114. <u-select v-model="guwenshow" :list="staffList" @confirm="guwenCallback"
  115. :default-value='selindex'></u-select>
  116. <u-select v-model="deptshow" :list="teamList" @confirm="deptCallback"
  117. :default-value='selindex'></u-select>
  118. <!-- 加载组件 -->
  119. <loading v-model="LOADING"></loading>
  120. </view>
  121. </template>
  122. <script>
  123. var app = getApp();
  124. var config = require("../../../config");
  125. import loading from "@/components/loading/index.vue"
  126. export default {
  127. components: {
  128. loading
  129. },
  130. data() {
  131. return {
  132. selindex: '',
  133. guwenshow: false,
  134. timeshow: false,
  135. selectshow: false,
  136. deptshow: false,
  137. deptVal: '',
  138. huashuVal: '',
  139. guwenVal: '',
  140. // 筛选文字展示
  141. time: '近7天',
  142. dept: '部门',
  143. guwen: '顾问',
  144. showDesc: false,
  145. rankList: [],//排名列表
  146. ringChartData: {
  147. },
  148. // ring图 分布图
  149. opts: {
  150. rotate: false,
  151. rotateLock: false,
  152. color: ['#F8A12B','#07B79D','#E7483C','#2671E1'],
  153. padding: [5,5,5,5],
  154. dataLabel: true,
  155. legend: {
  156. show: true,
  157. position: "right",
  158. lineHeight: 25
  159. },
  160. title: {
  161. name: "",
  162. fontSize: 15,
  163. color: "#666666"
  164. },
  165. subtitle: {
  166. name: "",
  167. fontSize: 25,
  168. color: "#7cb5ec"
  169. },
  170. extra: {
  171. ring: {
  172. ringWidth: 60,
  173. activeOpacity: 0.5,
  174. activeRadius: 10,
  175. offsetAngle: 0,
  176. labelWidth: 15,
  177. border: false,
  178. borderWidth: 3,
  179. borderColor: "#FFFFFF"
  180. }
  181. }
  182. },
  183. activeTotal: 2,
  184. houseId: '',
  185. // hushuList: [],// 业务话术
  186. staffList: [],// 员工列表
  187. teamList: [],// 团队列表
  188. team: {
  189. value: '',
  190. label: ''
  191. },
  192. startDate: '',
  193. endDate: '',
  194. calendarShow: false,
  195. numlist: [{
  196. name: '平均需求挖掘率',
  197. firstnum: '',
  198. endnum: '',
  199. duibinum: '',
  200. setName: 'wordFraction'
  201. }, {
  202. name: '未挖掘需求',
  203. firstnum: '',
  204. endnum: '',
  205. duibinum: '',
  206. setName: 'noFinishWord'
  207. },
  208. {
  209. name: '有效接待',
  210. firstnum: '',
  211. endnum: '',
  212. duibinum: '',
  213. setName: 'activeCustomer'
  214. },
  215. {
  216. name: '未标记',
  217. firstnum: '',
  218. endnum: '',
  219. duibinum: '',
  220. setName: 'markAdvisor'
  221. },
  222. ],
  223. lineOptsect: {
  224. "categories": [],
  225. "series": [{
  226. "name": "起始时间",
  227. "data": []
  228. },{
  229. "name": "对比时间",
  230. "data": []
  231. }]
  232. },
  233. lineOpts: {
  234. // xAxis: {
  235. // rotateLabel: true
  236. // },
  237. yAxis: {
  238. data: [{
  239. max: 100,
  240. min: 0,
  241. }]
  242. }
  243. },
  244. };
  245. },
  246. onShow() {
  247. // 获取项目id
  248. this.houseId = uni.getStorageSync('buildingID').id;
  249. // 获取员工
  250. this.getStaffList()
  251. // 获取团队
  252. this.getSectionList()
  253. this.getdata()
  254. },
  255. onReady: function(){
  256. // 获取项目id
  257. this.houseId = uni.getStorageSync('buildingID').id;
  258. // 获取员工
  259. this.getStaffList()
  260. // 获取团队
  261. this.getSectionList()
  262. this.getdata()
  263. },
  264. methods: {
  265. max100(num) {
  266. if(num>100){
  267. return 100
  268. } else if(!num){
  269. return 0;
  270. }else{
  271. return num;
  272. }
  273. },
  274. getdata(){
  275. // 需求挖掘分析-简报
  276. this.wordMiningAnalyze()
  277. //需求挖掘排行
  278. this.getwordMiningRank()
  279. // 挖掘趋势图
  280. this.getwordMiningAnalyzePercentage()
  281. // 需求挖掘f分布图
  282. this.getRingData()
  283. },
  284. // 需求挖掘排行
  285. getwordMiningRank(){
  286. let dateType = 0;
  287. if (this.activeTotal == 4) {// 选择全部和自定义
  288. dateType = null;
  289. }else {
  290. dateType = this.activeTotal;
  291. this.startDate = ''
  292. this.endDate = ''
  293. }
  294. this.$u.post('/cusLvStatistics/wordMiningRank', {
  295. "houseId": this.houseId,
  296. "deptId": this.deptVal,
  297. "createUser": this.guwenVal,
  298. "dateType":dateType,
  299. "firstStartDate":this.startDate,
  300. "firstEndDate":this.endDate
  301. })
  302. .then(res => {
  303. // console.log(res)
  304. if(res.length){
  305. this.rankList = res.map(item=>{
  306. return {
  307. name: item.name,
  308. id: item.id,
  309. fraction: item.fraction,
  310. selected: item.selected,
  311. keywordsId: item.keywordsId
  312. }
  313. })
  314. }else{
  315. this.rankList = []
  316. }
  317. })
  318. },
  319. // 需求挖掘分布图
  320. getRingData(){
  321. let dateType = 0;
  322. if (this.activeTotal == 4) {// 选择自定义
  323. dateType = null;
  324. }else {
  325. dateType = this.activeTotal;
  326. this.startDate = ''
  327. this.endDate = ''
  328. }
  329. this.$u.post('/cusLvStatistics/wordMiningAnalyzeFenbu', {
  330. "houseId": this.houseId,
  331. "deptId": this.deptVal,
  332. "createUser": this.guwenVal,
  333. "dateType":dateType,
  334. "firstStartDate":this.startDate,
  335. "firstEndDate":this.endDate
  336. })
  337. .then(res => {
  338. // console.log(res)
  339. this.ringChartData = { series: [
  340. {
  341. data: [
  342. {"name":"30%及以下","value":res.a},
  343. {"name":"31%~50%","value":res.b},
  344. {"name":"51%~70%","value":res.c},
  345. {"name":"71%及以上","value":res.d},
  346. ]
  347. }
  348. ]}
  349. })
  350. },
  351. //跳转到接待记录
  352. Toview(item,i){
  353. uni.navigateTo({
  354. url: '/pages/center/records/index?refresh=refresh&activeTotal='+this.activeTotal+'&staTime='+ this.startDate + '&endTime='+this.endDate+'&validInvalid=0'+'&keywordsId='+item.keywordsId+'&source=wajue'
  355. });
  356. },
  357. // 需求挖掘分析-简报
  358. wordMiningAnalyze() {
  359. let dateType = 0;
  360. if (this.activeTotal == 4) {// 选择全部和自定义
  361. dateType = null;
  362. }else {
  363. dateType = this.activeTotal;
  364. this.startDate = ''
  365. this.endDate = ''
  366. }
  367. let params = {
  368. "houseId": this.houseId,
  369. "deptId": this.deptVal,
  370. "createUser": this.guwenVal,
  371. "dateType":dateType,
  372. "firstStartDate":this.startDate,
  373. "firstEndDate":this.endDate
  374. }
  375. this.$u.post("/cusLvStatistics/wordMiningAnalyze",params).then(res => {
  376. // console.log(res.contrast)
  377. res.contrast.wordFraction = (res.contrast.wordFraction||0) + '%'
  378. res.first.wordFraction = this.max100(res.first.wordFraction) + '%'
  379. res.end.wordFraction = this.max100(res.end.wordFraction) + '%'
  380. this.numlist.forEach(item => {
  381. item.duibinum = res.contrast[item.setName]
  382. item.endnum = res.end[item.setName]
  383. item.firstnum = res.first[item.setName]
  384. })
  385. })
  386. },
  387. // 获取员工列表
  388. getStaffList() {
  389. this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId', {
  390. houseId: this.houseId
  391. })
  392. .then(res => {
  393. // console.log(res)
  394. if(res.length){
  395. this.staffList = res.map(item => {
  396. return {
  397. label: item.name,
  398. value: item.accountId
  399. }
  400. })
  401. this.staffList.unshift({
  402. label: '全部',
  403. value: ''
  404. })
  405. }
  406. })
  407. },
  408. // 需求挖掘率趋势图
  409. getwordMiningAnalyzePercentage() {
  410. let categories1 = []
  411. let categories2 = []
  412. let categories3 = []
  413. let dateType = 0;
  414. if (this.activeTotal == 4) {// 选择全部和自定义
  415. dateType = null;
  416. }else {
  417. dateType = this.activeTotal;
  418. this.startDate = ''
  419. this.endDate = ''
  420. }
  421. this.$u.post('/cusLvStatistics/wordMiningAnalyzePercentage', {
  422. "houseId": this.houseId,
  423. "deptId": this.deptVal,
  424. "createUser": this.guwenVal,
  425. "dateType":dateType,
  426. "firstStartDate":this.startDate,
  427. "firstEndDate":this.endDate
  428. })
  429. .then(res => {
  430. if(res.first&&res.first.length){
  431. categories1 = res.first.map(item=> item.statDate.substring(5,10))
  432. this.lineOptsect.series[0].data=res.first.map(item=> item.wordFraction)
  433. }else{
  434. categories1= []
  435. this.lineOptsect.series[0].data = []
  436. }
  437. if(res.end&&res.end.length){
  438. this.lineOptsect.series[1].data=res.end.map(item=> item.wordFraction)
  439. categories2 = res.end.map(item => item.statDate.substring(5,10))
  440. }else{
  441. categories2 = []
  442. this.lineOptsect.series[1].data = []
  443. }
  444. for(let i=0;i<categories1.length;i++){
  445. categories3.push(categories1[i]+'/'+categories2[i])
  446. }
  447. // console.log(categories3)
  448. this.lineOptsect.categories = categories3
  449. })
  450. },
  451. // 获取团队列表
  452. getSectionList() {
  453. this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId', {
  454. houseId: this.houseId
  455. })
  456. .then(res => {
  457. this.teamList = []
  458. if(res.length){
  459. this.teamList = res.map(item=> {
  460. return {
  461. label: item.deptName,
  462. value: item.deptId
  463. }
  464. })
  465. this.teamList.unshift({
  466. label: '全部',
  467. value: ''
  468. })
  469. }
  470. })
  471. },
  472. //时间切换
  473. tabtimetap(index, text) {
  474. this.activeTotal = index;
  475. if (index == 4) {
  476. this.calendarShow = true;
  477. } else {
  478. this.endDate = ''
  479. this.startDate = ''
  480. this.time = text
  481. this.getdata()
  482. }
  483. this.timeshow = false
  484. },
  485. // 顾问选择
  486. guwenCallback(e){
  487. // console.log(e)
  488. this.guwenVal = e[0].value
  489. this.guwen = e[0].label
  490. this.getdata()
  491. },
  492. // 部门选择
  493. deptCallback(e){
  494. // console.log(e)
  495. this.deptVal = e[0].value
  496. this.dept = e[0].label
  497. this.getdata()
  498. },
  499. //自定义时间
  500. calendarTimeChange(e) {
  501. this.endDate = e.endDate
  502. this.startDate = e.startDate
  503. this.time = '自定义'
  504. this.getdata()
  505. }
  506. }
  507. };
  508. </script>
  509. <style lang="scss" scoped>
  510. .box {
  511. width: 100%;
  512. height: 100%;
  513. background: #FAFAFA;
  514. }
  515. //时间切换的样式
  516. .boxtittab {
  517. position: sticky;
  518. top: var(--window-top);
  519. z-index: 999;
  520. width: 100;
  521. height: 92rpx;
  522. background: #FFFFFF;
  523. border: 1px solid #E0E0E0;
  524. display: flex;
  525. align-items: center;
  526. .tabbox {
  527. flex: 1;
  528. height: 100%;
  529. text-align: center;
  530. line-height: 92rpx;
  531. color: #666666;
  532. font-size: 28rpx;
  533. overflow: hidden;
  534. text-overflow: ellipsis;
  535. display: -webkit-box;
  536. /* 将对象作为弹性伸缩盒子模型显示 */
  537. -webkit-line-clamp: 1;
  538. /* 控制最多显示几行 */
  539. -webkit-box-orient: vertical;
  540. /* 设置或检索伸缩盒对象的子元素的排列方式 */
  541. }
  542. }
  543. .timeview {
  544. height: 80rpx;
  545. line-height: 80rpx;
  546. width: 100%;
  547. text-align: center;
  548. border-bottom: 1px solid #F8F8F8;
  549. }
  550. .black-bg{
  551. position: fixed;
  552. background: rgba(0,0,0,0.6);
  553. left: 0;
  554. right: 0;
  555. top: 0;
  556. bottom: 0;
  557. display: flex;
  558. flex-direction: column;
  559. justify-content: center;
  560. align-items: center;
  561. z-index: 9999;
  562. .tongjiDesc{
  563. width: 80%;
  564. background: #FFFFFF;
  565. border-radius: 12rpx;
  566. padding: 30rpx;
  567. }
  568. .close{
  569. background: #fff;
  570. border-radius: 50%;
  571. width: 80rpx;
  572. height: 80rpx;
  573. margin-top: 30rpx;
  574. display: flex;
  575. justify-content: center;
  576. align-items: center;
  577. }
  578. .tongji-title{
  579. text-align: center;
  580. font-size: 30rpx;
  581. margin-bottom: 20rpx;
  582. }
  583. .text view{
  584. margin-bottom: 24rpx;
  585. }
  586. .bold{
  587. font-weight: bold;
  588. }
  589. }
  590. .grid:nth-child(1) {
  591. border-right: none;
  592. border-bottom: none;
  593. }
  594. .grid:nth-child(2) {
  595. border-bottom: none;
  596. }
  597. .grid:nth-child(3) {
  598. border-right: none;
  599. }
  600. .grid .bottom{
  601. display: flex;
  602. align-items: center;
  603. padding-left: 20rpx;
  604. margin: 10rpx 0 20rpx;
  605. .leftnum{
  606. height: 36rpx;
  607. font-size: 26rpx;
  608. font-family: PingFangSC-Regular, PingFang SC;
  609. font-weight: 400;
  610. color: #666666;
  611. line-height: 36rpx;
  612. margin-right: 20rpx;
  613. }
  614. .rightnum{
  615. height: 36rpx;
  616. font-size: 26rpx;
  617. font-family: PingFangSC-Semibold, PingFang SC;
  618. font-weight: 600;
  619. color: #666;
  620. line-height: 36rpx;
  621. display: flex;
  622. align-items: center;
  623. &.red{
  624. color: #E6273A;
  625. }
  626. &.green{
  627. color: #43CD80;
  628. }
  629. image{
  630. width: 18rpx;
  631. height: 14rpx;
  632. margin-left: 6rpx;
  633. }
  634. }
  635. }
  636. .zonglantitle{
  637. display: flex;
  638. justify-content: space-between;
  639. align-items: center;
  640. text{
  641. color: #666666;
  642. }
  643. }
  644. .uchaserbox{
  645. width: 100%;
  646. height: 500rpx;
  647. }
  648. .tabdada {
  649. width: 100%;
  650. height: auto;
  651. padding-bottom: 40rpx;
  652. .tabth {
  653. width: 100%;
  654. height: 28rpx;
  655. display: flex;
  656. font-size: 28rpx;
  657. line-height: 28rpx;
  658. color: #666666;
  659. margin-top: 28rpx;
  660. }
  661. .tabth>view:nth-of-type(1) {
  662. width: 10%;
  663. text-align: center;
  664. }
  665. .tabth>view:nth-of-type(2) {
  666. width: 46%;
  667. text-align: center;
  668. }
  669. .tabth>view:nth-of-type(3) {
  670. width: 22%;
  671. text-align: center;
  672. }
  673. .tabth>view:nth-of-type(4) {
  674. width: 22%;
  675. text-align: center;
  676. }
  677. .tabtd {
  678. width: 100%;
  679. height: 30rpx;
  680. display: flex;
  681. font-size: 26rpx;
  682. line-height: 30rpx;
  683. margin-top: 32rpx;
  684. }
  685. .tabtd>view:nth-of-type(1) {
  686. width: 10%;
  687. text-align: center;
  688. line-height: 30rpx;
  689. }
  690. .tabtd>view:nth-of-type(2) {
  691. width: 46%;
  692. max-width: 400rpx;
  693. text-align: center;
  694. color: #333333;
  695. }
  696. .tabtd>view:nth-of-type(3) {
  697. width: 22%;
  698. text-align: center;
  699. color: #333333;
  700. }
  701. .tabtd>view:nth-of-type(4) {
  702. width: 22%;
  703. text-align: center;
  704. color: #2671E2;
  705. }
  706. .ranking {
  707. width: 34rpx;
  708. height: 34rpx;
  709. }
  710. .ranking1 {
  711. width: 30rpx;
  712. height: 30rpx;
  713. background: #ECF1FF;
  714. color: #424D64;
  715. font-size: 18rpx;
  716. text-align: center;
  717. line-height: 30rpx;
  718. border-radius: 50%;
  719. margin: 0 auto;
  720. }
  721. .tabech {
  722. width: 100%;
  723. height: 600rpx;
  724. }
  725. }
  726. </style>