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

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