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.
 
 
 

736 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>{{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. getdata(){
  266. // 需求挖掘分析-简报
  267. this.wordMiningAnalyze()
  268. //需求挖掘排行
  269. this.getwordMiningRank()
  270. // 挖掘趋势图
  271. this.getwordMiningAnalyzePercentage()
  272. // 需求挖掘f分布图
  273. this.getRingData()
  274. },
  275. // 需求挖掘排行
  276. getwordMiningRank(){
  277. let dateType = 0;
  278. if (this.activeTotal == 4) {// 选择全部和自定义
  279. dateType = null;
  280. }else {
  281. dateType = this.activeTotal;
  282. this.startDate = ''
  283. this.endDate = ''
  284. }
  285. this.$u.post('/cusLvStatistics/wordMiningRank', {
  286. "houseId": this.houseId,
  287. "deptId": this.deptVal,
  288. "createUser": this.guwenVal,
  289. "dateType":dateType,
  290. "firstStartDate":this.startDate,
  291. "firstEndDate":this.endDate
  292. })
  293. .then(res => {
  294. // console.log(res)
  295. if(res.length){
  296. this.rankList = res.map(item=>{
  297. return {
  298. name: item.name,
  299. id: item.id,
  300. fraction: item.fraction,
  301. selected: item.selected,
  302. keywordsId: item.keywordsId
  303. }
  304. })
  305. }else{
  306. this.rankList = []
  307. }
  308. })
  309. },
  310. // 需求挖掘分布图
  311. getRingData(){
  312. let dateType = 0;
  313. if (this.activeTotal == 4) {// 选择自定义
  314. dateType = null;
  315. }else {
  316. dateType = this.activeTotal;
  317. this.startDate = ''
  318. this.endDate = ''
  319. }
  320. this.$u.post('/cusLvStatistics/wordMiningAnalyzeFenbu', {
  321. "houseId": this.houseId,
  322. "deptId": this.deptVal,
  323. "createUser": this.guwenVal,
  324. "dateType":dateType,
  325. "firstStartDate":this.startDate,
  326. "firstEndDate":this.endDate
  327. })
  328. .then(res => {
  329. // console.log(res)
  330. this.ringChartData = { series: [
  331. {
  332. data: [
  333. {"name":"30%及以下","value":res.a},
  334. {"name":"31%~50%","value":res.b},
  335. {"name":"51%~70%","value":res.c},
  336. {"name":"71%及以上","value":res.d},
  337. ]
  338. }
  339. ]}
  340. })
  341. },
  342. //跳转到接待记录
  343. Toview(item,i){
  344. uni.navigateTo({
  345. url: '/pages/center/records/index?refresh=refresh&activeTotal='+this.activeTotal+'&staTime='+ this.startDate + '&endTime='+this.endDate+'&validInvalid=0'+'&keywordsId='+item.keywordsId+'&source=wajue'
  346. });
  347. },
  348. // 需求挖掘分析-简报
  349. wordMiningAnalyze() {
  350. let dateType = 0;
  351. if (this.activeTotal == 4) {// 选择全部和自定义
  352. dateType = null;
  353. }else {
  354. dateType = this.activeTotal;
  355. this.startDate = ''
  356. this.endDate = ''
  357. }
  358. let params = {
  359. "houseId": this.houseId,
  360. "deptId": this.deptVal,
  361. "createUser": this.guwenVal,
  362. "dateType":dateType,
  363. "firstStartDate":this.startDate,
  364. "firstEndDate":this.endDate
  365. }
  366. this.$u.post("/cusLvStatistics/wordMiningAnalyze",params).then(res => {
  367. // console.log(res.contrast)
  368. res.contrast.wordFraction = (res.contrast.wordFraction || 0) + '%'
  369. res.first.wordFraction = (res.first.wordFraction || 0) + '%'
  370. res.end.wordFraction = (res.end.wordFraction || 0) + '%'
  371. this.numlist.forEach(item => {
  372. item.duibinum = res.contrast[item.setName]
  373. item.endnum = res.end[item.setName]
  374. item.firstnum = res.first[item.setName]
  375. })
  376. })
  377. },
  378. // 获取员工列表
  379. getStaffList() {
  380. this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId', {
  381. houseId: this.houseId
  382. })
  383. .then(res => {
  384. // console.log(res)
  385. if(res.length){
  386. this.staffList = res.map(item => {
  387. return {
  388. label: item.name,
  389. value: item.accountId
  390. }
  391. })
  392. this.staffList.unshift({
  393. label: '全部',
  394. value: ''
  395. })
  396. }
  397. })
  398. },
  399. // 需求挖掘率趋势图
  400. getwordMiningAnalyzePercentage() {
  401. let categories1 = []
  402. let categories2 = []
  403. let categories3 = []
  404. let dateType = 0;
  405. if (this.activeTotal == 4) {// 选择全部和自定义
  406. dateType = null;
  407. }else {
  408. dateType = this.activeTotal;
  409. this.startDate = ''
  410. this.endDate = ''
  411. }
  412. this.$u.post('/cusLvStatistics/wordMiningAnalyzePercentage', {
  413. "houseId": this.houseId,
  414. "deptId": this.deptVal,
  415. "createUser": this.guwenVal,
  416. "dateType":dateType,
  417. "firstStartDate":this.startDate,
  418. "firstEndDate":this.endDate
  419. })
  420. .then(res => {
  421. if(res.first&&res.first.length){
  422. categories1 = res.first.map(item=> item.statDate.substring(5,10))
  423. this.lineOptsect.series[0].data=res.first.map(item=> item.wordFraction)
  424. }else{
  425. categories1= []
  426. this.lineOptsect.series[0].data = []
  427. }
  428. if(res.end&&res.end.length){
  429. this.lineOptsect.series[1].data=res.end.map(item=> item.wordFraction)
  430. categories2 = res.end.map(item => item.statDate.substring(5,10))
  431. }else{
  432. categories2 = []
  433. this.lineOptsect.series[1].data = []
  434. }
  435. for(let i=0;i<categories1.length;i++){
  436. categories3.push(categories1[i]+'/'+categories2[i])
  437. }
  438. // console.log(categories3)
  439. this.lineOptsect.categories = categories3
  440. })
  441. },
  442. // 获取团队列表
  443. getSectionList() {
  444. this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId', {
  445. houseId: this.houseId
  446. })
  447. .then(res => {
  448. this.teamList = []
  449. if(res.length){
  450. this.teamList = res.map(item=> {
  451. return {
  452. label: item.deptName,
  453. value: item.deptId
  454. }
  455. })
  456. this.teamList.unshift({
  457. label: '全部',
  458. value: ''
  459. })
  460. }
  461. })
  462. },
  463. //时间切换
  464. tabtimetap(index, text) {
  465. this.activeTotal = index;
  466. if (index == 4) {
  467. this.calendarShow = true;
  468. } else {
  469. this.endDate = ''
  470. this.startDate = ''
  471. this.time = text
  472. this.getdata()
  473. }
  474. this.timeshow = false
  475. },
  476. // 顾问选择
  477. guwenCallback(e){
  478. // console.log(e)
  479. this.guwenVal = e[0].value
  480. this.guwen = e[0].label
  481. this.getdata()
  482. },
  483. // 部门选择
  484. deptCallback(e){
  485. // console.log(e)
  486. this.deptVal = e[0].value
  487. this.dept = e[0].label
  488. this.getdata()
  489. },
  490. //自定义时间
  491. calendarTimeChange(e) {
  492. this.endDate = e.endDate
  493. this.startDate = e.startDate
  494. this.time = '自定义'
  495. this.getdata()
  496. }
  497. }
  498. };
  499. </script>
  500. <style lang="scss" scoped>
  501. .box {
  502. width: 100%;
  503. height: 100%;
  504. background: #FAFAFA;
  505. }
  506. //时间切换的样式
  507. .boxtittab {
  508. position: sticky;
  509. top: var(--window-top);
  510. z-index: 999;
  511. width: 100;
  512. height: 92rpx;
  513. background: #FFFFFF;
  514. border: 1px solid #E0E0E0;
  515. display: flex;
  516. align-items: center;
  517. .tabbox {
  518. flex: 1;
  519. height: 100%;
  520. text-align: center;
  521. line-height: 92rpx;
  522. color: #666666;
  523. font-size: 28rpx;
  524. overflow: hidden;
  525. text-overflow: ellipsis;
  526. display: -webkit-box;
  527. /* 将对象作为弹性伸缩盒子模型显示 */
  528. -webkit-line-clamp: 1;
  529. /* 控制最多显示几行 */
  530. -webkit-box-orient: vertical;
  531. /* 设置或检索伸缩盒对象的子元素的排列方式 */
  532. }
  533. }
  534. .timeview {
  535. height: 80rpx;
  536. line-height: 80rpx;
  537. width: 100%;
  538. text-align: center;
  539. border-bottom: 1px solid #F8F8F8;
  540. }
  541. .black-bg{
  542. position: fixed;
  543. background: rgba(0,0,0,0.6);
  544. left: 0;
  545. right: 0;
  546. top: 0;
  547. bottom: 0;
  548. display: flex;
  549. flex-direction: column;
  550. justify-content: center;
  551. align-items: center;
  552. z-index: 9999;
  553. .tongjiDesc{
  554. width: 80%;
  555. background: #FFFFFF;
  556. border-radius: 12rpx;
  557. padding: 30rpx;
  558. }
  559. .close{
  560. background: #fff;
  561. border-radius: 50%;
  562. width: 80rpx;
  563. height: 80rpx;
  564. margin-top: 30rpx;
  565. display: flex;
  566. justify-content: center;
  567. align-items: center;
  568. }
  569. .tongji-title{
  570. text-align: center;
  571. font-size: 30rpx;
  572. margin-bottom: 20rpx;
  573. }
  574. .text view{
  575. margin-bottom: 24rpx;
  576. }
  577. .bold{
  578. font-weight: bold;
  579. }
  580. }
  581. .grid:nth-child(1) {
  582. border-right: none;
  583. border-bottom: none;
  584. }
  585. .grid:nth-child(2) {
  586. border-bottom: none;
  587. }
  588. .grid:nth-child(3) {
  589. border-right: none;
  590. }
  591. .grid .bottom{
  592. display: flex;
  593. align-items: center;
  594. padding-left: 20rpx;
  595. margin: 10rpx 0 20rpx;
  596. .leftnum{
  597. height: 36rpx;
  598. font-size: 26rpx;
  599. font-family: PingFangSC-Regular, PingFang SC;
  600. font-weight: 400;
  601. color: #666666;
  602. line-height: 36rpx;
  603. margin-right: 20rpx;
  604. }
  605. .rightnum{
  606. height: 36rpx;
  607. font-size: 26rpx;
  608. font-family: PingFangSC-Semibold, PingFang SC;
  609. font-weight: 600;
  610. color: #666;
  611. line-height: 36rpx;
  612. display: flex;
  613. align-items: center;
  614. &.red{
  615. color: #E6273A;
  616. }
  617. &.green{
  618. color: #43CD80;
  619. }
  620. image{
  621. width: 18rpx;
  622. height: 14rpx;
  623. margin-left: 6rpx;
  624. }
  625. }
  626. }
  627. .zonglantitle{
  628. display: flex;
  629. justify-content: space-between;
  630. align-items: center;
  631. text{
  632. color: #666666;
  633. }
  634. }
  635. .uchaserbox{
  636. width: 100%;
  637. height: 500rpx;
  638. }
  639. .tabdada {
  640. width: 100%;
  641. height: auto;
  642. padding-bottom: 40rpx;
  643. .tabth {
  644. width: 100%;
  645. height: 28rpx;
  646. display: flex;
  647. font-size: 28rpx;
  648. line-height: 28rpx;
  649. color: #666666;
  650. margin-top: 28rpx;
  651. }
  652. .tabth>view:nth-of-type(1) {
  653. width: 10%;
  654. text-align: center;
  655. }
  656. .tabth>view:nth-of-type(2) {
  657. width: 46%;
  658. text-align: center;
  659. }
  660. .tabth>view:nth-of-type(3) {
  661. width: 22%;
  662. text-align: center;
  663. }
  664. .tabth>view:nth-of-type(4) {
  665. width: 22%;
  666. text-align: center;
  667. }
  668. .tabtd {
  669. width: 100%;
  670. height: 30rpx;
  671. display: flex;
  672. font-size: 26rpx;
  673. line-height: 30rpx;
  674. margin-top: 32rpx;
  675. }
  676. .tabtd>view:nth-of-type(1) {
  677. width: 10%;
  678. text-align: center;
  679. line-height: 30rpx;
  680. }
  681. .tabtd>view:nth-of-type(2) {
  682. width: 46%;
  683. max-width: 400rpx;
  684. text-align: center;
  685. color: #333333;
  686. }
  687. .tabtd>view:nth-of-type(3) {
  688. width: 22%;
  689. text-align: center;
  690. color: #333333;
  691. }
  692. .tabtd>view:nth-of-type(4) {
  693. width: 22%;
  694. text-align: center;
  695. color: #2671E2;
  696. }
  697. .ranking {
  698. width: 34rpx;
  699. height: 34rpx;
  700. }
  701. .ranking1 {
  702. width: 30rpx;
  703. height: 30rpx;
  704. background: #ECF1FF;
  705. color: #424D64;
  706. font-size: 18rpx;
  707. text-align: center;
  708. line-height: 30rpx;
  709. border-radius: 50%;
  710. margin: 0 auto;
  711. }
  712. .tabech {
  713. width: 100%;
  714. height: 600rpx;
  715. }
  716. }
  717. </style>