AI销管
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 
 

681 рядки
15 KiB

  1. <template>
  2. <view class="box">
  3. <view class="boxtittabs">
  4. <div class="items" @tap="screenShow = true">{{ showTimeText }}
  5. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
  6. </div>
  7. <div class="items" @tap="showTemplate = true">{{ showBeText }}
  8. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
  9. </div>
  10. </view>
  11. <view class="info">
  12. <view class="item" @click="goTo(1)">
  13. <text class="num">{{efficient||0}}</text>
  14. <text class="tit">有效接待</text>
  15. </view>
  16. <view class="item" @click="goTo(2)">
  17. <text class="num">{{markCount||0}}</text>
  18. <text class="tit">已标顾问</text>
  19. </view>
  20. <view class="item" @click="goTo(3)">
  21. <text class="num">{{noMarkCount||0}}</text>
  22. <text class="tit">未标顾问</text>
  23. </view>
  24. </view>
  25. <view class="boxzonglan">
  26. <view class="zonglantit">客群特征总览</view>
  27. <view class="zonglanbox">
  28. <view class="grid" v-for="(item,index) in numlist" :key="index" v-if="item.isshow">
  29. <view class="audonum">
  30. <view class="circle"></view>
  31. {{item.name}}&nbsp;&nbsp;{{index!=0?'触达次数':''}}
  32. </view>
  33. <view class="num">{{item.num}}</view>
  34. </view>
  35. </view>
  36. <view v-if="Afolding==true" class="anclack" @click="anclick(1)">展开 <u-icon style="margin-left: 8rpx;"
  37. label-color='#666666' name="arrow-down"></u-icon>
  38. </view>
  39. <view v-if="Afolding==false" class="anclack" @click="anclick(2)">收起 <u-icon style="margin-left: 8rpx;"
  40. label-color='#666666' name="arrow-up"></u-icon>
  41. </view>
  42. </view>
  43. <view class="centerfor" v-for="(item,index) in objlist" :key="index">
  44. <view class="fortit">
  45. <view class="left">
  46. <view class="lefti"></view>
  47. <view class="lefttext">{{item.name}}触达排名</view>
  48. </view>
  49. <view class="right">
  50. <view :class="{ activeclass: item.activeTab == 0 }" @click="charttoswitch(index,0)">表格</view>
  51. <view style="margin-left: 16rpx;" :class="{ activeclass: item.activeTab == 1 }"
  52. @click="charttoswitch(index,1)">饼状图</view>
  53. </view>
  54. </view>
  55. <view v-if="item.activeTab==0" class="tabdada">
  56. <view class="tabth">
  57. <view>排名</view>
  58. <view>画像语意词/触达客户</view>
  59. <view>触达占比</view>
  60. <view>沟通记录</view>
  61. </view>
  62. <view v-if="item.total==0"
  63. style="color: #666;font-size:28rpx;width: 100%;height: 500rpx;line-height: 500rpx;text-align: center;">
  64. 暂无数据</view>
  65. <view class="tabtd" v-if="item.total" v-for="(chend,i) in item.matchKeywords" :key="i">
  66. <view>
  67. <image v-if="i==0" class="ranking" src="../../../static/images/top1.png" mode=""></image>
  68. <image v-else-if="i==1" class="ranking" src="../../../static/images/top2.png" mode=""></image>
  69. <image v-else-if="i==2" class="ranking" src="../../../static/images/top3.png" mode=""></image>
  70. <view class="ranking1" v-else>{{i+1}}</view>
  71. </view>
  72. <view>{{chend.name}}({{chend.total}})</view>
  73. <view>{{chend.proportion}}%</view>
  74. <view @click="Toview(item,i)">查看</view>
  75. </view>
  76. </view>
  77. <view v-if="item.activeTab==1" class="tabech">
  78. <template v-if="item.chartDataShow">
  79. <qiun-data-charts :key="item.id" type="ring" :chartData="item.chartData" :canvas2d="true"
  80. :canvasId="'wangxiaohuahahahahaha'+item.id" :opts='item.opts' background="none" />
  81. </template>
  82. <template v-else>
  83. <view>
  84. <view
  85. style="color: #666;font-size:28rpx;width: 100%;height: 500rpx;line-height: 500rpx;text-align: center;">
  86. 暂无数据</view>
  87. </view>
  88. </template>
  89. </view>
  90. </view>
  91. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  92. <u-back-top :scroll-top="scrollTop"></u-back-top>
  93. <!-- 更多筛选 -->
  94. <u-popup v-model="screenShow" mode="bottom" height="368">
  95. <view class="screen">
  96. <view class="boxtittab">
  97. <view class="tabbox">
  98. <view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0, '今日')">今日</view>
  99. </view>
  100. <view class="tabbox">
  101. <view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1, '昨日')">昨日</view>
  102. </view>
  103. <view class="tabbox">
  104. <view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2, '近一周')">近一周
  105. </view>
  106. </view>
  107. <view class="tabbox">
  108. <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3, '自定义')">自定义
  109. </view>
  110. </view>
  111. </view>
  112. </view>
  113. </u-popup>
  114. <!-- 销讲业务 -->
  115. <u-select :mask-close-able="false" label-name="templateName" value-name="id" v-model="showTemplate"
  116. mode="single-column" :list="templateList" @cancel="templateCancel" @confirm="templateConfirm"></u-select>
  117. </view>
  118. </template>
  119. <script>
  120. var app = getApp();
  121. var util = require("../../../utils/util.js");
  122. var config = require("../../../config");
  123. export default {
  124. data() {
  125. return {
  126. scrollTop: 0,
  127. activeTotal: 2,
  128. timeobj: {
  129. statDateStart: '',
  130. statDateEnd: ''
  131. },
  132. buildingID: '',
  133. totalTimeShow: false,
  134. activeTab: 0,
  135. numlist: [],
  136. objlist: [],
  137. Afolding: true,
  138. efficient: "",
  139. markCount: "",
  140. noMarkCount: "",
  141. screenShow: false, // 时间筛选弹窗
  142. showTimeText: '近一周', // 展示文字
  143. showBeText: '全部业务', //
  144. templateList: [], // 销讲业务
  145. showTemplate: false, // 展示选择销讲业务弹窗
  146. marketingBusiness: '', // 选择的业务id
  147. };
  148. },
  149. onPageScroll(e) {
  150. this.scrollTop = e.scrollTop;
  151. },
  152. onLoad() {
  153. this.buildingID = uni.getStorageSync('buildingID').id;
  154. this.gitinit()
  155. this.getMarketingBusiness()
  156. },
  157. onPullDownRefresh() {
  158. this.gitinit()
  159. setTimeout(function() {
  160. uni.stopPullDownRefresh();
  161. }, 1000);
  162. },
  163. methods: { // 销讲业务方法
  164. templateCancel() {
  165. this.showTemplate = false;
  166. },
  167. // 确认选择销讲业务
  168. templateConfirm(e) {
  169. this.showTemplate = false;
  170. this.marketingBusiness = e[0].value
  171. this.showBeText = e[0].label
  172. this.gitinit()
  173. },
  174. // 获取销讲业务
  175. getMarketingBusiness() {
  176. this.$u.get('/customer/marketingBusiness', {
  177. houseId: uni.getStorageSync('buildingID').id,
  178. }).then(res => {
  179. this.templateList = res
  180. this.templateList.unshift({
  181. templateName: '全部业务',
  182. id: ''
  183. })
  184. })
  185. },
  186. goTo(i) {
  187. if (i == 1) {
  188. uni.navigateTo({
  189. url: '/pages/center/records/index?refresh=' + 'refresh' + '&activeTotal=' + this
  190. .activeTotal + '&validInvalid=0' + '&staTime=' + this.timeobj.statDateStart +
  191. '&endtime=' + this.timeobj.statDateEnd
  192. });
  193. } else if (i == 2) {
  194. uni.navigateTo({
  195. url: '/pages/center/records/index?refresh=' + 'refresh' + '&activeTotal=' + this
  196. .activeTotal + '&markAdvisor=1&validInvalid=0' + '&staTime=' + this.timeobj
  197. .statDateStart + '&endtime=' + this.timeobj.statDateEnd
  198. });
  199. } else {
  200. uni.navigateTo({
  201. url: '/pages/center/records/index?refresh=' + 'refresh' + '&activeTotal=' + this
  202. .activeTotal + '&markAdvisor=0&validInvalid=0' + '&staTime=' + this.timeobj
  203. .statDateStart + '&endtime=' + this.timeobj.statDateEnd
  204. });
  205. }
  206. },
  207. anclick(i) {
  208. console.log(i)
  209. this.Afolding = !this.Afolding;
  210. this.numlist.forEach((citem, index) => {
  211. if (index < 6) {
  212. citem.isshow = true;
  213. } else {
  214. citem.isshow = !citem.isshow;
  215. }
  216. })
  217. this.$forceUpdate()
  218. },
  219. //获取数据
  220. gitinit() {
  221. this.objlist = [];
  222. this.numlist = [];
  223. var dateType = '';
  224. if (this.activeTotal == 3) {
  225. dateType = null;
  226. } else {
  227. dateType = this.activeTotal;
  228. }
  229. let parames = {
  230. dateType: dateType,
  231. statDateStart: this.timeobj.statDateStart,
  232. statDateEnd: this.timeobj.statDateEnd,
  233. houseId: this.buildingID,
  234. marketingBusiness: this.marketingBusiness,
  235. }
  236. this.$u.post("/matchKeywords/findmatchdata", parames).then(data => {
  237. // this.numlist.push({
  238. // name:"有效接待",
  239. // num:data.total
  240. // })
  241. data.list.forEach((item, index) => {
  242. this.numlist.push({
  243. name: item.name,
  244. num: item.total
  245. })
  246. this.efficient = data.total
  247. this.markCount = data.markCount
  248. this.noMarkCount = data.noMarkCount
  249. item.activeTab = 0;
  250. item.opts = {
  251. "title": {
  252. "name": item.total,
  253. "color": '#666666',
  254. "fontSize": 20
  255. },
  256. "subtitle": {
  257. "name": '总触达次数',
  258. "color": '#32363D',
  259. "fontSize": 12,
  260. "offsetY": 4
  261. }
  262. }
  263. item.chartData = {
  264. "categories": [],
  265. "series": [{
  266. "data": []
  267. }],
  268. };
  269. item.matchKeywords.forEach(chend => {
  270. item.chartData.series[0].data.push({
  271. "name": chend.name,
  272. "value": chend.proportion
  273. })
  274. })
  275. if (item.chartData.series[0].data.length > 0) {
  276. item.chartDataShow = true
  277. } else {
  278. item.chartDataShow = false
  279. }
  280. })
  281. data.list.forEach(item => {
  282. item.matchKeywords.forEach(chend => {
  283. if (chend.isInterval == 0) {
  284. chend.name = chend.name + chend.unit + '-' + chend.endName + chend
  285. .unit
  286. } else {
  287. chend.name = chend.name
  288. }
  289. })
  290. })
  291. this.objlist = data.list;
  292. this.Afolding = true;
  293. this.numlist.forEach((citem, index) => {
  294. if (index < 6) {
  295. citem.isshow = true
  296. } else {
  297. citem.isshow = false
  298. }
  299. })
  300. })
  301. },
  302. //查看
  303. Toview(item, i) {
  304. uni.navigateTo({
  305. url: '/pages/center/Piabodata/Customerportrait/Receivingrecords?datatype=' + this.activeTotal +
  306. "&keywordsId=" + item.matchKeywords[i].keywordsId + "&starttime=" + this.timeobj
  307. .statDateStart + "&endoftime=" + this.timeobj.statDateEnd+'&marketingBusiness='+this.marketingBusiness
  308. })
  309. },
  310. //时间切换
  311. tabtimetap(index, text) {
  312. if (index == 3) {
  313. this.totalTimeShow = true;
  314. this.screenShow = false
  315. } else {
  316. this.screenShow = false
  317. this.showTimeText = text
  318. this.activeTotal = index;
  319. this.gitinit()
  320. }
  321. },
  322. //自定义时间
  323. totalTimeChange(e) {
  324. this.screenShow = false
  325. this.showTimeText = `${e.startDate}-${e.endDate}`
  326. this.timeobj.statDateStart = e.startDate;
  327. this.timeobj.statDateEnd = e.endDate;
  328. this.activeTotal = 3;
  329. this.gitinit()
  330. },
  331. charttoswitch(index, num) {
  332. this.objlist[index].activeTab = num
  333. }
  334. }
  335. };
  336. </script>
  337. <style lang="scss" scoped>
  338. .boxtittabs {
  339. width: 100%;
  340. height: 92rpx;
  341. background: #FFFFFF;
  342. display: flex;
  343. align-items: center;
  344. .items {
  345. padding: 0 24rpx;
  346. width: 50%;
  347. height: 100%;
  348. display: flex;
  349. align-items: center;
  350. justify-content: center;
  351. overflow: hidden;
  352. white-space: nowrap;
  353. text-overflow: ellipsis;
  354. }
  355. }
  356. .screen {
  357. width: 100%;
  358. .boxtittab {
  359. width: 100%;
  360. flex-direction: column;
  361. border: none;
  362. .tabbox {
  363. width: 100%;
  364. }
  365. }
  366. }
  367. .info {
  368. display: flex;
  369. justify-content: space-between;
  370. background: #fff;
  371. padding: 20rpx 40rpx;
  372. .item {
  373. display: flex;
  374. flex-direction: column;
  375. justify-content: center;
  376. align-items: center;
  377. text {
  378. font-size: 32rpx;
  379. }
  380. .num {
  381. font-weight: bold;
  382. }
  383. .tit {
  384. margin-top: 20rpx;
  385. }
  386. }
  387. }
  388. .anclack {
  389. width: 100%;
  390. height: 78rpx;
  391. text-align: center;
  392. line-height: 78rpx;
  393. font-size: 30rpx;
  394. // border: 1rpx solid #E0E0E0;
  395. font-weight: 400;
  396. color: #666666;
  397. }
  398. .box {
  399. width: 100%;
  400. height: 100%;
  401. background: #FAFAFA;
  402. }
  403. .boxtittab {
  404. position: sticky;
  405. top: var(--window-top);
  406. z-index: 999;
  407. width: 100;
  408. height: 92rpx;
  409. background: #FFFFFF;
  410. border: 1px solid #E0E0E0;
  411. display: flex;
  412. align-items: center;
  413. .tabbox {
  414. flex: 1;
  415. height: 100%;
  416. text-align: center;
  417. line-height: 92rpx;
  418. color: #666666;
  419. font-size: 28rpx;
  420. display: flex;
  421. justify-content: center;
  422. .activecllasscet {
  423. width: 96rpx;
  424. color: #2671E2;
  425. border-bottom: 4rpx solid #2671E2;
  426. }
  427. }
  428. }
  429. .tabtime {
  430. width: 100%;
  431. height: 50rpx;
  432. text-align: center;
  433. line-height: 50rpx;
  434. font-size: 24rpx;
  435. color: #666666;
  436. }
  437. .boxzonglan {
  438. margin-top: 20rpx;
  439. border-radius: 12rpx;
  440. width: 100%;
  441. min-height: 496rpx;
  442. background: #FFFFFF;
  443. padding: 30rpx 30rpx 30rpx 30rpx;
  444. .zonglantit {
  445. font-size: 30rpx;
  446. color: #333333;
  447. font-family: PingFangSC-Semibold, PingFang SC;
  448. font-weight: 600;
  449. }
  450. .zonglanbox {
  451. width: 100%;
  452. display: flex;
  453. flex-wrap: wrap;
  454. margin-top: 24rpx;
  455. .grid {
  456. width: 50%;
  457. padding-left: 10rpx;
  458. &:nth-child(odd) {
  459. border-bottom: 1rpx solid #E0E0E0;
  460. border-right: 1rpx solid #E0E0E0;
  461. }
  462. &:nth-child(even) {
  463. border-bottom: 1rpx solid #E0E0E0;
  464. // border-right: 1rpx solid #E0E0E0;
  465. }
  466. .audonum {
  467. color: #666666;
  468. text-indent: 40rpx;
  469. font-size: 28rpx;
  470. margin: 20rpx 0 18rpx;
  471. line-height: 40rpx;
  472. display: flex;
  473. align-items: center;
  474. .circle {
  475. margin-right: 12rpx;
  476. width: 20rpx;
  477. height: 20rpx;
  478. background: #FFFFFF;
  479. border-radius: 50%;
  480. border: 6rpx solid #2671E2;
  481. }
  482. }
  483. .num {
  484. color: #333333;
  485. font-size: 44rpx;
  486. font-weight: bold;
  487. margin: 18rpx 0 0;
  488. }
  489. }
  490. }
  491. }
  492. .centerfor {
  493. width: 100%;
  494. height: 686rpx;
  495. background: #FFFFFF;
  496. padding-left: 30rpx;
  497. padding-right: 30rpx;
  498. margin-top: 20rpx;
  499. .fortit {
  500. width: 100%;
  501. height: 86rpx;
  502. display: flex;
  503. .left {
  504. width: 70%;
  505. height: 100%;
  506. display: flex;
  507. align-items: center;
  508. .lefti {
  509. width: 6rpx;
  510. height: 30rpx;
  511. background: #2671E2;
  512. }
  513. .lefttext {
  514. font-size: 30rpx;
  515. font-family: PingFangSC-Semibold, PingFang SC;
  516. font-weight: 600;
  517. color: #333333;
  518. margin-left: 10rpx;
  519. }
  520. }
  521. .right {
  522. width: 30%;
  523. height: 70rpx;
  524. display: flex;
  525. font-size: 28rpx;
  526. align-items: center;
  527. margin-top: 16rpx;
  528. }
  529. .right view {
  530. width: 92rpx;
  531. height: 50rpx;
  532. text-align: center;
  533. }
  534. }
  535. }
  536. .activeclass {
  537. color: #2671E2;
  538. border-bottom: 4rpx solid #2671E2;
  539. }
  540. .tabdada {
  541. width: 100%;
  542. height: 580rpx;
  543. overflow-y: auto;
  544. padding-bottom: 20rpx;
  545. }
  546. .tabth {
  547. width: 100%;
  548. height: 40rpx;
  549. display: flex;
  550. font-size: 28rpx;
  551. line-height: 40rpx;
  552. color: #666666;
  553. margin-top: 20rpx;
  554. }
  555. .tabth>view:nth-of-type(1) {
  556. width: 10%;
  557. text-align: center;
  558. }
  559. .tabth>view:nth-of-type(2) {
  560. width: 46%;
  561. text-align: center;
  562. }
  563. .tabth>view:nth-of-type(3) {
  564. width: 22%;
  565. text-align: center;
  566. }
  567. .tabth>view:nth-of-type(4) {
  568. width: 22%;
  569. text-align: center;
  570. }
  571. .tabtd {
  572. width: 100%;
  573. height: 30rpx;
  574. display: flex;
  575. font-size: 26rpx;
  576. line-height: 30rpx;
  577. margin-top: 32rpx;
  578. }
  579. .tabtd>view:nth-of-type(1) {
  580. width: 10%;
  581. text-align: center;
  582. line-height: 30rpx;
  583. }
  584. .tabtd>view:nth-of-type(2) {
  585. width: 46%;
  586. text-align: center;
  587. color: #333333;
  588. }
  589. .tabtd>view:nth-of-type(3) {
  590. width: 22%;
  591. text-align: center;
  592. color: #333333;
  593. }
  594. .tabtd>view:nth-of-type(4) {
  595. width: 22%;
  596. text-align: center;
  597. color: #2671E2;
  598. }
  599. .ranking {
  600. width: 44rpx;
  601. height: 44rpx;
  602. }
  603. .ranking1 {
  604. width: 40rpx;
  605. height: 40rpx;
  606. background: #E5F0FF;
  607. color: #333;
  608. font-size: 24rpx;
  609. text-align: center;
  610. line-height: 40rpx;
  611. border-radius: 50%;
  612. margin: 0 auto;
  613. }
  614. .tabech {
  615. width: 100%;
  616. height: 600rpx;
  617. }
  618. </style>