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.
 
 
 

468 righe
10 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="boxzonglan">
  18. <view class="zonglantit">客群特征总览</view>
  19. <view class="zonglanbox">
  20. <view class="grid" v-for="(item,index) in numlist" :key="index" v-if="item.isshow">
  21. <view class="audonum">{{item.name}}<text v-if="index!=0">触达次数</text></view>
  22. <view class="num">{{item.num}}</view>
  23. </view>
  24. </view>
  25. <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>
  26. <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>
  27. </view>
  28. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  29. <view class="centerfor" v-for="(item,index) in objlist" :key="index">
  30. <view class="fortit">
  31. <view class="left">
  32. <view class="lefti"></view>
  33. <view class="lefttext">{{item.name}}触达排名</view>
  34. </view>
  35. <view class="right">
  36. <view :class="{ activeclass: item.activeTab == 0 }" @click="charttoswitch(index,0)">表格</view>
  37. <view style="margin-left: 16rpx;" :class="{ activeclass: item.activeTab == 1 }"
  38. @click="charttoswitch(index,1)">饼状图</view>
  39. </view>
  40. </view>
  41. <view v-if="item.activeTab==0" class="tabdada">
  42. <view class="tabth">
  43. <view>排名</view>
  44. <view>画像语意词/触达客户</view>
  45. <view>触达占比</view>
  46. <view>沟通记录</view>
  47. </view>
  48. <view v-if="item.total==0" style="color: #999999;width: 100%;height: 500rpx;line-height: 500rpx;text-align: center;" >暂无数据</view>
  49. <view class="tabtd" v-if="item.total!=0" v-for="(chend,i) in item.matchKeywords" :key="i">
  50. <view>
  51. <image v-if="i==0" class="ranking" src="../../../static/images/ranking1.png" mode=""></image>
  52. <image v-else-if="i==1" class="ranking" src="../../../static/images/ranking2.png" mode=""></image>
  53. <image v-else-if="i==2" class="ranking" src="../../../static/images/ranking3.png" mode=""></image>
  54. <view class="ranking1" v-else>{{i+1}}</view>
  55. </view>
  56. <view>{{chend.name}}({{chend.total}})</view>
  57. <view>{{chend.proportion}}%</view>
  58. <view @click="Toview(item,i)">查看</view>
  59. </view>
  60. </view>
  61. <view v-if="item.activeTab==1" class="tabech">
  62. <qiun-data-charts
  63. :key="item.id"
  64. type="ring"
  65. :chartData="item.chartData"
  66. :canvas2d="true"
  67. :canvasId="'wangxiaohuahahahahaha'+item.id"
  68. :opts='item.opts'
  69. background="none" />
  70. </view>
  71. </view>
  72. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  73. <u-back-top :scroll-top="scrollTop"></u-back-top>
  74. </view>
  75. </template>
  76. <script>
  77. var app = getApp();
  78. var util = require("../../../utils/util.js");
  79. var config = require("../../../config");
  80. export default {
  81. data() {
  82. return {
  83. scrollTop: 0,
  84. activeTotal: 2,
  85. timeobj:{
  86. statDateStart:'',
  87. statDateEnd:''
  88. },
  89. buildingID:'',
  90. totalTimeShow: false,
  91. activeTab: 0,
  92. numlist:[],
  93. objlist:[],
  94. Afolding:true
  95. };
  96. },
  97. onPageScroll(e) {
  98. this.scrollTop = e.scrollTop;
  99. },
  100. onLoad() {
  101. this.buildingID=uni.getStorageSync('buildingID').id;
  102. this.gitinit()
  103. },
  104. methods: {
  105. anclick(i){
  106. console.log(i)
  107. this.Afolding=!this.Afolding;
  108. this.numlist.forEach((citem,index)=>{
  109. if(index<6){
  110. citem.isshow=true;
  111. }else{
  112. citem.isshow=!citem.isshow;
  113. }
  114. })
  115. this.$forceUpdate()
  116. },
  117. //获取数据
  118. gitinit(){
  119. this.objlist=[];
  120. this.numlist=[];
  121. var dateType='';
  122. if(this.activeTotal==3){
  123. dateType=null;
  124. }else{
  125. dateType=this.activeTotal;
  126. }
  127. let parames={
  128. dateType:dateType,
  129. statDateStart:this.timeobj.statDateStart,
  130. statDateEnd:this.timeobj.statDateEnd,
  131. houseId:this.buildingID
  132. }
  133. this.$u.post("/matchKeywords/findmatchdata", parames).then(data => {
  134. this.numlist.push({
  135. name:"客户数量",
  136. num:data.total
  137. })
  138. data.list.forEach((item,index)=>{
  139. this.numlist.push({
  140. name:item.name,
  141. num:item.total
  142. })
  143. item.activeTab=0;
  144. item.opts={
  145. "title": {
  146. "name": item.total,
  147. "color": '#666666',
  148. "fontSize": 20
  149. },
  150. "subtitle": {
  151. "name": '总触达次数',
  152. "color": '#32363D',
  153. "fontSize": 12,
  154. "offsetY": 4
  155. }
  156. }
  157. item.chartData={
  158. "categories": [],
  159. "series": [{
  160. "data": []
  161. }],
  162. };
  163. item.matchKeywords.forEach(chend=>{
  164. item.chartData.series[0].data.push({
  165. "name":chend.name,
  166. "value": chend.proportion
  167. })
  168. })
  169. })
  170. data.list.forEach(item=>{
  171. item.matchKeywords.forEach(chend=>{
  172. if(item.name=="意向面积"){
  173. chend.name=chend.name+'m²-'+chend.endName+'m²'
  174. }
  175. if(item.name=="购房预算"){
  176. chend.name=chend.name+'万-'+chend.endName+'万'
  177. }
  178. })
  179. })
  180. this.objlist=data.list;
  181. this.Afolding=true;
  182. this.numlist.forEach((citem,index)=>{
  183. if(index<6){
  184. citem.isshow=true
  185. }else{
  186. citem.isshow=false
  187. }
  188. })
  189. })
  190. },
  191. //查看
  192. Toview(item,i){
  193. uni.navigateTo({
  194. url: '/pages/center/Piabodata/Customerportrait/Receivingrecords?datatype='+this.activeTotal+"&keywordsId="+item.matchKeywords[i].keywordsId+"&starttime="+this.timeobj.statDateStart+"&endoftime="+this.timeobj.statDateEnd
  195. })
  196. },
  197. //时间切换
  198. tabtimetap(index) {
  199. if (index == 3) {
  200. this.totalTimeShow = true;
  201. } else {
  202. this.activeTotal = index;
  203. this.gitinit()
  204. }
  205. },
  206. //自定义时间
  207. totalTimeChange(e) {
  208. this.timeobj.statDateStart = e.startDate;
  209. this.timeobj.statDateEnd = e.endDate;
  210. this.activeTotal=3;
  211. this.gitinit()
  212. },
  213. charttoswitch(index,num) {
  214. this.objlist[index].activeTab=num
  215. }
  216. }
  217. };
  218. </script>
  219. <style lang="scss" scoped>
  220. .anclack{
  221. width: 100%;
  222. height: 78rpx;
  223. text-align: center;
  224. line-height: 78rpx;
  225. font-size: 30rpx;
  226. border: 1rpx solid #E0E0E0;
  227. font-weight: 400;
  228. color: #666666;
  229. }
  230. .box {
  231. width: 100%;
  232. height: 100%;
  233. background: #FAFAFA;
  234. padding-bottom: 60rpx;
  235. }
  236. .boxtittab {
  237. width: 100;
  238. height: 92rpx;
  239. background: #FFFFFF;
  240. border: 1px solid #E0E0E0;
  241. display: flex;
  242. align-items: center;
  243. .tabbox {
  244. flex: 1;
  245. height: 100%;
  246. text-align: center;
  247. line-height: 92rpx;
  248. color: #666666;
  249. font-size: 28rpx;
  250. display: flex;
  251. justify-content: center;
  252. .activecllasscet {
  253. width: 96rpx;
  254. border-bottom: 2px solid #2671E2;
  255. }
  256. }
  257. }
  258. .tabtime {
  259. width: 100%;
  260. height: 50rpx;
  261. text-align: center;
  262. line-height: 50rpx;
  263. font-size: 24rpx;
  264. color: #666666;
  265. }
  266. .boxzonglan {
  267. width: 100%;
  268. min-height: 496rpx;
  269. background: #FFFFFF;
  270. padding: 30rpx 30rpx 30rpx 30rpx;
  271. .zonglantit {
  272. font-size: 30rpx;
  273. color: #333333;
  274. font-family: PingFangSC-Semibold, PingFang SC;
  275. font-weight: 600;
  276. }
  277. .zonglanbox {
  278. width: 100%;
  279. display: flex;
  280. flex-wrap: wrap;
  281. margin-top: 24rpx;
  282. .grid {
  283. width: 50%;
  284. height: 128rpx;
  285. border: 1px solid #E0E0E0;
  286. .audonum {
  287. color: #666666;
  288. text-indent: 40rpx;
  289. font-size: 26rpx;
  290. margin-top: 20rpx;
  291. }
  292. .num {
  293. color: #333333;
  294. text-indent: 40rpx;
  295. font-size: 32rpx;
  296. font-weight: 600;
  297. margin-top: 10rpx;
  298. }
  299. }
  300. }
  301. }
  302. .centerfor {
  303. width: 100%;
  304. height: 686rpx;
  305. background: #FFFFFF;
  306. padding-left: 30rpx;
  307. padding-right: 30rpx;
  308. margin-top: 20rpx;
  309. .fortit {
  310. width: 100%;
  311. height: 86rpx;
  312. display: flex;
  313. border-bottom: 1px solid #E0E0E0;
  314. .left {
  315. width: 70%;
  316. height: 100%;
  317. display: flex;
  318. align-items: center;
  319. .lefti {
  320. width: 6rpx;
  321. height: 30rpx;
  322. background: #2671E2;
  323. }
  324. .lefttext {
  325. font-size: 30rpx;
  326. font-family: PingFangSC-Semibold, PingFang SC;
  327. font-weight: 600;
  328. color: #333333;
  329. margin-left: 10rpx;
  330. }
  331. }
  332. .right {
  333. width: 30%;
  334. height: 70rpx;
  335. display: flex;
  336. font-size: 28rpx;
  337. align-items: center;
  338. margin-top: 16rpx;
  339. }
  340. .right view {
  341. width: 92rpx;
  342. height: 50rpx;
  343. text-align: center;
  344. }
  345. }
  346. }
  347. .activeclass {
  348. color: #2671E2;
  349. border-bottom: 2px solid #2671E2;
  350. }
  351. .tabdada {
  352. width: 100%;
  353. height: 580rpx;
  354. overflow-y: auto;
  355. padding-bottom: 20rpx;
  356. }
  357. .tabth {
  358. width: 100%;
  359. height: 28rpx;
  360. display: flex;
  361. font-size: 28rpx;
  362. line-height: 28rpx;
  363. color: #666666;
  364. margin-top: 28rpx;
  365. }
  366. .tabth>view:nth-of-type(1) {
  367. width: 10%;
  368. text-align: center;
  369. }
  370. .tabth>view:nth-of-type(2) {
  371. width: 46%;
  372. text-align: center;
  373. }
  374. .tabth>view:nth-of-type(3) {
  375. width: 22%;
  376. text-align: center;
  377. }
  378. .tabth>view:nth-of-type(4) {
  379. width: 22%;
  380. text-align: center;
  381. }
  382. .tabtd {
  383. width: 100%;
  384. height: 30rpx;
  385. display: flex;
  386. font-size: 26rpx;
  387. line-height: 30rpx;
  388. margin-top: 32rpx;
  389. }
  390. .tabtd>view:nth-of-type(1) {
  391. width: 10%;
  392. text-align: center;
  393. line-height: 30rpx;
  394. }
  395. .tabtd>view:nth-of-type(2) {
  396. width: 46%;
  397. text-align: center;
  398. color: #333333;
  399. }
  400. .tabtd>view:nth-of-type(3) {
  401. width: 22%;
  402. text-align: center;
  403. color: #333333;
  404. }
  405. .tabtd>view:nth-of-type(4) {
  406. width: 22%;
  407. text-align: center;
  408. color: #2671E2;
  409. }
  410. .ranking {
  411. width: 34rpx;
  412. height: 34rpx;
  413. }
  414. .ranking1 {
  415. width: 30rpx;
  416. height: 30rpx;
  417. background: #ECF1FF;
  418. color: #424D64;
  419. font-size: 18rpx;
  420. text-align: center;
  421. line-height: 30rpx;
  422. border-radius: 50%;
  423. margin: 0 auto;
  424. }
  425. .tabech {
  426. width: 100%;
  427. height: 600rpx;
  428. }
  429. </style>