Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 

672 linhas
15 KiB

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