Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 

548 řádky
12 KiB

  1. <template>
  2. <view class="box">
  3. <view class="boxtittab">
  4. <view class="tabbox">
  5. <view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0)">今日</view>
  6. </view>
  7. <view class="tabbox">
  8. <view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">昨日</view>
  9. </view>
  10. <view class="tabbox">
  11. <view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">近一周</view>
  12. </view>
  13. <view class="tabbox">
  14. <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">自定义</view>
  15. </view>
  16. </view>
  17. <view class="info">
  18. <view class="item" @click="goTo(1)">
  19. <text class="num">{{efficient}}</text>
  20. <text class="tit">有效接待</text>
  21. </view>
  22. <view class="item" @click="goTo(2)">
  23. <text class="num">{{markCount}}</text>
  24. <text class="tit">已标顾问</text>
  25. </view>
  26. <view class="item" @click="goTo(3)">
  27. <text class="num">{{noMarkCount}}</text>
  28. <text class="tit">未标顾问</text>
  29. </view>
  30. </view>
  31. <view class="boxzonglan">
  32. <view class="zonglantit">客群特征总览</view>
  33. <view class="zonglanbox">
  34. <view class="grid" v-for="(item,index) in numlist" :key="index" v-if="item.isshow">
  35. <view class="audonum">{{item.name}}<text v-if="index!=0">触达次数</text></view>
  36. <view class="num">{{item.num}}</view>
  37. </view>
  38. </view>
  39. <view v-if="Afolding==true" class="anclack" @click="anclick(1)">展开 <u-icon style="margin-left: 8rpx;" label-color='#666666' name="arrow-down"></u-icon></view>
  40. <view v-if="Afolding==false" class="anclack" @click="anclick(2)">收起 <u-icon style="margin-left: 8rpx;" label-color='#666666' name="arrow-up"></u-icon></view>
  41. </view>
  42. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></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" style="color: #999999;width: 100%;height: 500rpx;line-height: 500rpx;text-align: center;" >暂无数据</view>
  63. <view class="tabtd" v-if="item.total!=0" v-for="(chend,i) in item.matchKeywords" :key="i">
  64. <view>
  65. <image v-if="i==0" class="ranking" src="../../../static/images/ranking1.png" mode=""></image>
  66. <image v-else-if="i==1" class="ranking" src="../../../static/images/ranking2.png" mode=""></image>
  67. <image v-else-if="i==2" class="ranking" src="../../../static/images/ranking3.png" mode=""></image>
  68. <view class="ranking1" v-else>{{i+1}}</view>
  69. </view>
  70. <view>{{chend.name}}({{chend.total}})</view>
  71. <view>{{chend.proportion}}%</view>
  72. <view @click="Toview(item,i)">查看</view>
  73. </view>
  74. </view>
  75. <view v-if="item.activeTab==1" class="tabech">
  76. <qiun-data-charts
  77. :key="item.id"
  78. type="ring"
  79. :chartData="item.chartData"
  80. :canvas2d="true"
  81. :canvasId="'wangxiaohuahahahahaha'+item.id"
  82. :opts='item.opts'
  83. background="none" />
  84. </view>
  85. </view>
  86. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  87. <u-back-top :scroll-top="scrollTop"></u-back-top>
  88. </view>
  89. </template>
  90. <script>
  91. var app = getApp();
  92. var util = require("../../../utils/util.js");
  93. var config = require("../../../config");
  94. export default {
  95. data() {
  96. return {
  97. scrollTop: 0,
  98. activeTotal: 2,
  99. timeobj:{
  100. statDateStart:'',
  101. statDateEnd:''
  102. },
  103. buildingID:'',
  104. totalTimeShow: false,
  105. activeTab: 0,
  106. numlist:[],
  107. objlist:[],
  108. Afolding:true,
  109. efficient:"",
  110. markCount:"",
  111. noMarkCount:""
  112. };
  113. },
  114. onPageScroll(e) {
  115. this.scrollTop = e.scrollTop;
  116. },
  117. onLoad(e) {
  118. this.buildingID=uni.getStorageSync('buildingID').id;
  119. if (e.activeTotal) {
  120. this.activeTotal = e.activeTotal
  121. }
  122. if (e.staTime) {
  123. this.timeobj = {
  124. statDateStart: e.staTime,
  125. statDateEnd: e.endtime
  126. }
  127. }
  128. this.gitinit()
  129. },
  130. onPullDownRefresh() {
  131. this.gitinit()
  132. setTimeout(function () {
  133. uni.stopPullDownRefresh();
  134. }, 1000);
  135. },
  136. methods: {
  137. goTo(i){
  138. if(i==1){
  139. uni.navigateTo({
  140. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+this.activeTotal+'&validInvalid=0'+'&staTime='+this.timeobj.statDateStart+'&endtime='+this.timeobj.statDateEnd
  141. });
  142. }else if(i==2){
  143. uni.navigateTo({
  144. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+this.activeTotal+'&markAdvisor=1&validInvalid=0'+'&staTime='+this.timeobj.statDateStart+'&endtime='+this.timeobj.statDateEnd
  145. });
  146. }else{
  147. uni.navigateTo({
  148. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+this.activeTotal+'&markAdvisor=0&validInvalid=0'+'&staTime='+this.timeobj.statDateStart+'&endtime='+this.timeobj.statDateEnd
  149. });
  150. }
  151. },
  152. anclick(i){
  153. console.log(i)
  154. this.Afolding=!this.Afolding;
  155. this.numlist.forEach((citem,index)=>{
  156. if(index<6){
  157. citem.isshow=true;
  158. }else{
  159. citem.isshow=!citem.isshow;
  160. }
  161. })
  162. this.$forceUpdate()
  163. },
  164. //获取数据
  165. gitinit(){
  166. this.objlist=[];
  167. this.numlist=[];
  168. var dateType='';
  169. if(this.activeTotal==3){
  170. dateType=null;
  171. }else{
  172. dateType=this.activeTotal;
  173. }
  174. let parames={
  175. dateType:dateType,
  176. statDateStart:this.timeobj.statDateStart,
  177. statDateEnd:this.timeobj.statDateEnd,
  178. houseId:this.buildingID
  179. }
  180. this.$u.post("/matchKeywords/findmatchdata", parames).then(data => {
  181. this.numlist.push({
  182. name:"有效接待",
  183. num:data.total
  184. })
  185. this.efficient = data.total
  186. this.markCount = data.markCount
  187. this.noMarkCount = data.noMarkCount
  188. data.list.forEach((item,index)=>{
  189. this.numlist.push({
  190. name:item.name,
  191. num:item.total
  192. })
  193. item.activeTab=0;
  194. item.opts={
  195. "title": {
  196. "name": item.total,
  197. "color": '#666666',
  198. "fontSize": 20
  199. },
  200. "subtitle": {
  201. "name": '总触达次数',
  202. "color": '#32363D',
  203. "fontSize": 12,
  204. "offsetY": 4
  205. }
  206. }
  207. item.chartData={
  208. "categories": [],
  209. "series": [{
  210. "data": []
  211. }],
  212. };
  213. item.matchKeywords.forEach(chend=>{
  214. item.chartData.series[0].data.push({
  215. "name":chend.name,
  216. "value": chend.proportion
  217. })
  218. })
  219. })
  220. data.list.forEach(item=>{
  221. item.matchKeywords.forEach(chend=>{
  222. if(chend.isInterval==0){
  223. chend.name=chend.name+chend.unit+'-'+chend.endName+chend.unit
  224. }else{
  225. chend.name=chend.name
  226. }
  227. })
  228. })
  229. this.objlist=data.list;
  230. this.Afolding=true;
  231. this.numlist.forEach((citem,index)=>{
  232. if(index<6){
  233. citem.isshow=true
  234. }else{
  235. citem.isshow=false
  236. }
  237. })
  238. })
  239. },
  240. //查看
  241. Toview(item,i){
  242. console.log(item)
  243. let keywordsid = 0
  244. if (item.matchKeywords[i].children && item.matchKeywords[i].children.length > 0) {
  245. keywordsid = item.matchKeywords[i].children[0].keywordsId
  246. } else {
  247. keywordsid = item.matchKeywords[i].keywordsId
  248. }
  249. uni.navigateTo({
  250. url: '/pages/center/Piabodata/Customerportrait/Receivingrecords?datatype='+this.activeTotal+"&keywordsId="+keywordsid+"&starttime="+this.timeobj.statDateStart+"&endoftime="+this.timeobj.statDateEnd
  251. })
  252. },
  253. //时间切换
  254. tabtimetap(index) {
  255. if (index == 3) {
  256. this.totalTimeShow = true;
  257. } else {
  258. this.activeTotal = index;
  259. this.gitinit()
  260. }
  261. },
  262. //自定义时间
  263. totalTimeChange(e) {
  264. this.timeobj.statDateStart = e.startDate;
  265. this.timeobj.statDateEnd = e.endDate;
  266. this.activeTotal=3;
  267. this.gitinit()
  268. },
  269. charttoswitch(index,num) {
  270. this.objlist[index].activeTab=num
  271. }
  272. }
  273. };
  274. </script>
  275. <style lang="scss" scoped>
  276. .info{
  277. display: flex;
  278. justify-content: space-between;
  279. background: #fff;
  280. padding: 10px 20px;
  281. .item{
  282. display: flex;
  283. flex-direction: column;
  284. justify-content: center;
  285. align-items: center;
  286. text{
  287. font-size: 32rpx;
  288. }
  289. .num{
  290. font-weight: bold;
  291. }
  292. .tit{
  293. margin-top: 20rpx;
  294. }
  295. }
  296. }
  297. .anclack{
  298. width: 100%;
  299. height: 78rpx;
  300. text-align: center;
  301. line-height: 78rpx;
  302. font-size: 30rpx;
  303. border: 1rpx solid #E0E0E0;
  304. font-weight: 400;
  305. color: #666666;
  306. }
  307. .box {
  308. width: 100%;
  309. height: 100%;
  310. background: #FAFAFA;
  311. padding-bottom: 60rpx;
  312. }
  313. .boxtittab {
  314. width: 100;
  315. height: 92rpx;
  316. background: #FFFFFF;
  317. border: 1px solid #E0E0E0;
  318. display: flex;
  319. align-items: center;
  320. .tabbox {
  321. flex: 1;
  322. height: 100%;
  323. text-align: center;
  324. line-height: 92rpx;
  325. color: #666666;
  326. font-size: 28rpx;
  327. display: flex;
  328. justify-content: center;
  329. .activecllasscet {
  330. width: 96rpx;
  331. border-bottom: 2px solid #2671E2;
  332. }
  333. }
  334. }
  335. .tabtime {
  336. width: 100%;
  337. height: 50rpx;
  338. text-align: center;
  339. line-height: 50rpx;
  340. font-size: 24rpx;
  341. color: #666666;
  342. }
  343. .boxzonglan {
  344. width: 100%;
  345. min-height: 496rpx;
  346. background: #FFFFFF;
  347. padding: 30rpx 30rpx 30rpx 30rpx;
  348. .zonglantit {
  349. font-size: 30rpx;
  350. color: #333333;
  351. font-family: PingFangSC-Semibold, PingFang SC;
  352. font-weight: 600;
  353. }
  354. .zonglanbox {
  355. width: 100%;
  356. display: flex;
  357. flex-wrap: wrap;
  358. margin-top: 24rpx;
  359. .grid {
  360. width: 50%;
  361. height: 128rpx;
  362. border: 1px solid #E0E0E0;
  363. .audonum {
  364. color: #666666;
  365. text-indent: 40rpx;
  366. font-size: 26rpx;
  367. margin-top: 20rpx;
  368. }
  369. .num {
  370. color: #333333;
  371. text-indent: 40rpx;
  372. font-size: 32rpx;
  373. font-weight: 600;
  374. margin-top: 10rpx;
  375. }
  376. }
  377. }
  378. }
  379. .centerfor {
  380. width: 100%;
  381. height: 686rpx;
  382. background: #FFFFFF;
  383. padding-left: 30rpx;
  384. padding-right: 30rpx;
  385. margin-top: 20rpx;
  386. .fortit {
  387. width: 100%;
  388. height: 86rpx;
  389. display: flex;
  390. border-bottom: 1px solid #E0E0E0;
  391. .left {
  392. width: 70%;
  393. height: 100%;
  394. display: flex;
  395. align-items: center;
  396. .lefti {
  397. width: 6rpx;
  398. height: 30rpx;
  399. background: #2671E2;
  400. }
  401. .lefttext {
  402. font-size: 30rpx;
  403. font-family: PingFangSC-Semibold, PingFang SC;
  404. font-weight: 600;
  405. color: #333333;
  406. margin-left: 10rpx;
  407. }
  408. }
  409. .right {
  410. width: 30%;
  411. height: 70rpx;
  412. display: flex;
  413. font-size: 28rpx;
  414. align-items: center;
  415. margin-top: 16rpx;
  416. }
  417. .right view {
  418. width: 92rpx;
  419. height: 50rpx;
  420. text-align: center;
  421. }
  422. }
  423. }
  424. .activeclass {
  425. color: #2671E2;
  426. border-bottom: 2px solid #2671E2;
  427. }
  428. .tabdada {
  429. width: 100%;
  430. height: 580rpx;
  431. overflow-y: auto;
  432. padding-bottom: 20rpx;
  433. }
  434. .tabth {
  435. width: 100%;
  436. height: 28rpx;
  437. display: flex;
  438. font-size: 28rpx;
  439. line-height: 28rpx;
  440. color: #666666;
  441. margin-top: 28rpx;
  442. }
  443. .tabth>view:nth-of-type(1) {
  444. width: 10%;
  445. text-align: center;
  446. }
  447. .tabth>view:nth-of-type(2) {
  448. width: 46%;
  449. text-align: center;
  450. }
  451. .tabth>view:nth-of-type(3) {
  452. width: 22%;
  453. text-align: center;
  454. }
  455. .tabth>view:nth-of-type(4) {
  456. width: 22%;
  457. text-align: center;
  458. }
  459. .tabtd {
  460. width: 100%;
  461. height: 30rpx;
  462. display: flex;
  463. font-size: 26rpx;
  464. line-height: 30rpx;
  465. margin-top: 32rpx;
  466. }
  467. .tabtd>view:nth-of-type(1) {
  468. width: 10%;
  469. text-align: center;
  470. line-height: 30rpx;
  471. }
  472. .tabtd>view:nth-of-type(2) {
  473. width: 46%;
  474. text-align: center;
  475. color: #333333;
  476. }
  477. .tabtd>view:nth-of-type(3) {
  478. width: 22%;
  479. text-align: center;
  480. color: #333333;
  481. }
  482. .tabtd>view:nth-of-type(4) {
  483. width: 22%;
  484. text-align: center;
  485. color: #2671E2;
  486. }
  487. .ranking {
  488. width: 34rpx;
  489. height: 34rpx;
  490. }
  491. .ranking1 {
  492. width: 30rpx;
  493. height: 30rpx;
  494. background: #ECF1FF;
  495. color: #424D64;
  496. font-size: 18rpx;
  497. text-align: center;
  498. line-height: 30rpx;
  499. border-radius: 50%;
  500. margin: 0 auto;
  501. }
  502. .tabech {
  503. width: 100%;
  504. height: 600rpx;
  505. }
  506. </style>