Você não pode selecionar mais de 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.
 
 
 

667 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 = item.matchKeywords[i].keywordsId || 0
  309. uni.navigateTo({
  310. url: '/pages/center/Piabodata/Customerportrait/Receivingrecords?datatype=' + this.activeTotal +
  311. "&keywordsId=" + keywordsid + "&starttime=" + this.timeobj.statDateStart + "&endoftime=" +
  312. this.timeobj.statDateEnd
  313. })
  314. },
  315. //时间切换
  316. tabtimetap(index, text) {
  317. if (index == 3) {
  318. this.totalTimeShow = true;
  319. this.screenShow = false
  320. } else {
  321. this.screenShow = false
  322. this.showTimeText = text
  323. this.activeTotal = index;
  324. this.gitinit()
  325. }
  326. },
  327. //自定义时间
  328. totalTimeChange(e) {
  329. this.screenShow = false
  330. this.showTimeText = `${e.startDate}-${e.endDate}`
  331. this.timeobj.statDateStart = e.startDate;
  332. this.timeobj.statDateEnd = e.endDate;
  333. this.activeTotal = 3;
  334. this.gitinit()
  335. },
  336. charttoswitch(index, num) {
  337. this.objlist[index].activeTab = num
  338. }
  339. }
  340. };
  341. </script>
  342. <style lang="scss" scoped>
  343. .boxtittabs {
  344. width: 100%;
  345. height: 92rpx;
  346. background: #FFFFFF;
  347. display: flex;
  348. align-items: center;
  349. .items {
  350. padding: 0 24rpx;
  351. width: 50%;
  352. height: 100%;
  353. display: flex;
  354. align-items: center;
  355. justify-content: center;
  356. overflow: hidden;
  357. white-space: nowrap;
  358. text-overflow: ellipsis;
  359. }
  360. }
  361. .screen {
  362. width: 100%;
  363. .boxtittab {
  364. width: 100%;
  365. flex-direction: column;
  366. border: none;
  367. .tabbox {
  368. width: 100%;
  369. }
  370. }
  371. }
  372. .info {
  373. display: flex;
  374. justify-content: space-between;
  375. background: #fff;
  376. padding: 10px 20px;
  377. .item {
  378. display: flex;
  379. flex-direction: column;
  380. justify-content: center;
  381. align-items: center;
  382. text {
  383. font-size: 32rpx;
  384. }
  385. .num {
  386. font-weight: bold;
  387. }
  388. .tit {
  389. margin-top: 20rpx;
  390. }
  391. }
  392. }
  393. .anclack {
  394. width: 100%;
  395. height: 78rpx;
  396. text-align: center;
  397. line-height: 78rpx;
  398. font-size: 30rpx;
  399. border: 1rpx solid #E0E0E0;
  400. font-weight: 400;
  401. color: #666666;
  402. }
  403. .box {
  404. width: 100%;
  405. height: 100%;
  406. background: #FAFAFA;
  407. padding-bottom: 60rpx;
  408. }
  409. .boxtittab {
  410. width: 100;
  411. height: 92rpx;
  412. background: #FFFFFF;
  413. border: 1px solid #E0E0E0;
  414. display: flex;
  415. align-items: center;
  416. .tabbox {
  417. flex: 1;
  418. height: 100%;
  419. text-align: center;
  420. line-height: 92rpx;
  421. color: #666666;
  422. font-size: 28rpx;
  423. display: flex;
  424. justify-content: center;
  425. .activecllasscet {
  426. width: 96rpx;
  427. border-bottom: 2px solid #2671E2;
  428. }
  429. }
  430. }
  431. .tabtime {
  432. width: 100%;
  433. height: 50rpx;
  434. text-align: center;
  435. line-height: 50rpx;
  436. font-size: 24rpx;
  437. color: #666666;
  438. }
  439. .boxzonglan {
  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. height: 128rpx;
  458. border: 1px solid #E0E0E0;
  459. .audonum {
  460. color: #666666;
  461. text-indent: 40rpx;
  462. font-size: 26rpx;
  463. margin-top: 20rpx;
  464. }
  465. .num {
  466. color: #333333;
  467. text-indent: 40rpx;
  468. font-size: 32rpx;
  469. font-weight: 600;
  470. margin-top: 10rpx;
  471. }
  472. }
  473. }
  474. }
  475. .centerfor {
  476. width: 100%;
  477. height: 686rpx;
  478. background: #FFFFFF;
  479. padding-left: 30rpx;
  480. padding-right: 30rpx;
  481. margin-top: 20rpx;
  482. .fortit {
  483. width: 100%;
  484. height: 86rpx;
  485. display: flex;
  486. border-bottom: 1px solid #E0E0E0;
  487. .left {
  488. width: 70%;
  489. height: 100%;
  490. display: flex;
  491. align-items: center;
  492. .lefti {
  493. width: 6rpx;
  494. height: 30rpx;
  495. background: #2671E2;
  496. }
  497. .lefttext {
  498. font-size: 30rpx;
  499. font-family: PingFangSC-Semibold, PingFang SC;
  500. font-weight: 600;
  501. color: #333333;
  502. margin-left: 10rpx;
  503. }
  504. }
  505. .right {
  506. width: 30%;
  507. height: 70rpx;
  508. display: flex;
  509. font-size: 28rpx;
  510. align-items: center;
  511. margin-top: 16rpx;
  512. }
  513. .right view {
  514. width: 92rpx;
  515. height: 50rpx;
  516. text-align: center;
  517. }
  518. }
  519. }
  520. .activeclass {
  521. color: #2671E2;
  522. border-bottom: 2px solid #2671E2;
  523. }
  524. .tabdada {
  525. width: 100%;
  526. height: 580rpx;
  527. overflow-y: auto;
  528. padding-bottom: 20rpx;
  529. }
  530. .tabth {
  531. width: 100%;
  532. height: 28rpx;
  533. display: flex;
  534. font-size: 28rpx;
  535. line-height: 28rpx;
  536. color: #666666;
  537. margin-top: 28rpx;
  538. }
  539. .tabth>view:nth-of-type(1) {
  540. width: 10%;
  541. text-align: center;
  542. }
  543. .tabth>view:nth-of-type(2) {
  544. width: 46%;
  545. text-align: center;
  546. }
  547. .tabth>view:nth-of-type(3) {
  548. width: 22%;
  549. text-align: center;
  550. }
  551. .tabth>view:nth-of-type(4) {
  552. width: 22%;
  553. text-align: center;
  554. }
  555. .tabtd {
  556. width: 100%;
  557. height: 30rpx;
  558. display: flex;
  559. font-size: 26rpx;
  560. line-height: 30rpx;
  561. margin-top: 32rpx;
  562. }
  563. .tabtd>view:nth-of-type(1) {
  564. width: 10%;
  565. text-align: center;
  566. line-height: 30rpx;
  567. }
  568. .tabtd>view:nth-of-type(2) {
  569. width: 46%;
  570. text-align: center;
  571. color: #333333;
  572. }
  573. .tabtd>view:nth-of-type(3) {
  574. width: 22%;
  575. text-align: center;
  576. color: #333333;
  577. }
  578. .tabtd>view:nth-of-type(4) {
  579. width: 22%;
  580. text-align: center;
  581. color: #2671E2;
  582. }
  583. .ranking {
  584. width: 34rpx;
  585. height: 34rpx;
  586. }
  587. .ranking1 {
  588. width: 30rpx;
  589. height: 30rpx;
  590. background: #ECF1FF;
  591. color: #424D64;
  592. font-size: 18rpx;
  593. text-align: center;
  594. line-height: 30rpx;
  595. border-radius: 50%;
  596. margin: 0 auto;
  597. }
  598. .tabech {
  599. width: 100%;
  600. height: 600rpx;
  601. }
  602. </style>