25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

698 lines
17 KiB

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