Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

Userinsightinto.vue 10 KiB

3 år sedan
2 år sedan
3 år sedan
3 år sedan
3 år sedan
3 år sedan
3 år sedan
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  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. onPullDownRefresh() {
  105. this.gitinit()
  106. setTimeout(function () {
  107. uni.stopPullDownRefresh();
  108. }, 1000);
  109. },
  110. methods: {
  111. anclick(i){
  112. console.log(i)
  113. this.Afolding=!this.Afolding;
  114. this.numlist.forEach((citem,index)=>{
  115. if(index<6){
  116. citem.isshow=true;
  117. }else{
  118. citem.isshow=!citem.isshow;
  119. }
  120. })
  121. this.$forceUpdate()
  122. },
  123. //获取数据
  124. gitinit(){
  125. this.objlist=[];
  126. this.numlist=[];
  127. var dateType='';
  128. if(this.activeTotal==3){
  129. dateType=null;
  130. }else{
  131. dateType=this.activeTotal;
  132. }
  133. let parames={
  134. dateType:dateType,
  135. statDateStart:this.timeobj.statDateStart,
  136. statDateEnd:this.timeobj.statDateEnd,
  137. houseId:this.buildingID
  138. }
  139. this.$u.post("/matchKeywords/findmatchdata", parames).then(data => {
  140. this.numlist.push({
  141. name:"客户数量",
  142. num:data.total
  143. })
  144. data.list.forEach((item,index)=>{
  145. this.numlist.push({
  146. name:item.name,
  147. num:item.total
  148. })
  149. item.activeTab=0;
  150. item.opts={
  151. "title": {
  152. "name": item.total,
  153. "color": '#666666',
  154. "fontSize": 20
  155. },
  156. "subtitle": {
  157. "name": '总触达次数',
  158. "color": '#32363D',
  159. "fontSize": 12,
  160. "offsetY": 4
  161. }
  162. }
  163. item.chartData={
  164. "categories": [],
  165. "series": [{
  166. "data": []
  167. }],
  168. };
  169. item.matchKeywords.forEach(chend=>{
  170. item.chartData.series[0].data.push({
  171. "name":chend.name,
  172. "value": chend.proportion
  173. })
  174. })
  175. })
  176. data.list.forEach(item=>{
  177. item.matchKeywords.forEach(chend=>{
  178. if(chend.isInterval==0){
  179. chend.name=chend.name+chend.unit+'-'+chend.endName+chend.unit
  180. }else{
  181. chend.name=chend.name
  182. }
  183. })
  184. })
  185. this.objlist=data.list;
  186. this.Afolding=true;
  187. this.numlist.forEach((citem,index)=>{
  188. if(index<6){
  189. citem.isshow=true
  190. }else{
  191. citem.isshow=false
  192. }
  193. })
  194. })
  195. },
  196. //查看
  197. Toview(item,i){
  198. uni.navigateTo({
  199. url: '/pages/center/Piabodata/Customerportrait/Receivingrecords?datatype='+this.activeTotal+"&keywordsId="+item.matchKeywords[i].keywordsId+"&starttime="+this.timeobj.statDateStart+"&endoftime="+this.timeobj.statDateEnd
  200. })
  201. },
  202. //时间切换
  203. tabtimetap(index) {
  204. if (index == 3) {
  205. this.totalTimeShow = true;
  206. } else {
  207. this.activeTotal = index;
  208. this.gitinit()
  209. }
  210. },
  211. //自定义时间
  212. totalTimeChange(e) {
  213. this.timeobj.statDateStart = e.startDate;
  214. this.timeobj.statDateEnd = e.endDate;
  215. this.activeTotal=3;
  216. this.gitinit()
  217. },
  218. charttoswitch(index,num) {
  219. this.objlist[index].activeTab=num
  220. }
  221. }
  222. };
  223. </script>
  224. <style lang="scss" scoped>
  225. .anclack{
  226. width: 100%;
  227. height: 78rpx;
  228. text-align: center;
  229. line-height: 78rpx;
  230. font-size: 30rpx;
  231. border: 1rpx solid #E0E0E0;
  232. font-weight: 400;
  233. color: #666666;
  234. }
  235. .box {
  236. width: 100%;
  237. height: 100%;
  238. background: #FAFAFA;
  239. padding-bottom: 60rpx;
  240. }
  241. .boxtittab {
  242. width: 100;
  243. height: 92rpx;
  244. background: #FFFFFF;
  245. border: 1px solid #E0E0E0;
  246. display: flex;
  247. align-items: center;
  248. .tabbox {
  249. flex: 1;
  250. height: 100%;
  251. text-align: center;
  252. line-height: 92rpx;
  253. color: #666666;
  254. font-size: 28rpx;
  255. display: flex;
  256. justify-content: center;
  257. .activecllasscet {
  258. width: 96rpx;
  259. border-bottom: 2px solid #2671E2;
  260. }
  261. }
  262. }
  263. .tabtime {
  264. width: 100%;
  265. height: 50rpx;
  266. text-align: center;
  267. line-height: 50rpx;
  268. font-size: 24rpx;
  269. color: #666666;
  270. }
  271. .boxzonglan {
  272. width: 100%;
  273. min-height: 496rpx;
  274. background: #FFFFFF;
  275. padding: 30rpx 30rpx 30rpx 30rpx;
  276. .zonglantit {
  277. font-size: 30rpx;
  278. color: #333333;
  279. font-family: PingFangSC-Semibold, PingFang SC;
  280. font-weight: 600;
  281. }
  282. .zonglanbox {
  283. width: 100%;
  284. display: flex;
  285. flex-wrap: wrap;
  286. margin-top: 24rpx;
  287. .grid {
  288. width: 50%;
  289. height: 128rpx;
  290. border: 1px solid #E0E0E0;
  291. .audonum {
  292. color: #666666;
  293. text-indent: 40rpx;
  294. font-size: 26rpx;
  295. margin-top: 20rpx;
  296. }
  297. .num {
  298. color: #333333;
  299. text-indent: 40rpx;
  300. font-size: 32rpx;
  301. font-weight: 600;
  302. margin-top: 10rpx;
  303. }
  304. }
  305. }
  306. }
  307. .centerfor {
  308. width: 100%;
  309. height: 686rpx;
  310. background: #FFFFFF;
  311. padding-left: 30rpx;
  312. padding-right: 30rpx;
  313. margin-top: 20rpx;
  314. .fortit {
  315. width: 100%;
  316. height: 86rpx;
  317. display: flex;
  318. border-bottom: 1px solid #E0E0E0;
  319. .left {
  320. width: 70%;
  321. height: 100%;
  322. display: flex;
  323. align-items: center;
  324. .lefti {
  325. width: 6rpx;
  326. height: 30rpx;
  327. background: #2671E2;
  328. }
  329. .lefttext {
  330. font-size: 30rpx;
  331. font-family: PingFangSC-Semibold, PingFang SC;
  332. font-weight: 600;
  333. color: #333333;
  334. margin-left: 10rpx;
  335. }
  336. }
  337. .right {
  338. width: 30%;
  339. height: 70rpx;
  340. display: flex;
  341. font-size: 28rpx;
  342. align-items: center;
  343. margin-top: 16rpx;
  344. }
  345. .right view {
  346. width: 92rpx;
  347. height: 50rpx;
  348. text-align: center;
  349. }
  350. }
  351. }
  352. .activeclass {
  353. color: #2671E2;
  354. border-bottom: 2px solid #2671E2;
  355. }
  356. .tabdada {
  357. width: 100%;
  358. height: 580rpx;
  359. overflow-y: auto;
  360. padding-bottom: 20rpx;
  361. }
  362. .tabth {
  363. width: 100%;
  364. height: 28rpx;
  365. display: flex;
  366. font-size: 28rpx;
  367. line-height: 28rpx;
  368. color: #666666;
  369. margin-top: 28rpx;
  370. }
  371. .tabth>view:nth-of-type(1) {
  372. width: 10%;
  373. text-align: center;
  374. }
  375. .tabth>view:nth-of-type(2) {
  376. width: 46%;
  377. text-align: center;
  378. }
  379. .tabth>view:nth-of-type(3) {
  380. width: 22%;
  381. text-align: center;
  382. }
  383. .tabth>view:nth-of-type(4) {
  384. width: 22%;
  385. text-align: center;
  386. }
  387. .tabtd {
  388. width: 100%;
  389. height: 30rpx;
  390. display: flex;
  391. font-size: 26rpx;
  392. line-height: 30rpx;
  393. margin-top: 32rpx;
  394. }
  395. .tabtd>view:nth-of-type(1) {
  396. width: 10%;
  397. text-align: center;
  398. line-height: 30rpx;
  399. }
  400. .tabtd>view:nth-of-type(2) {
  401. width: 46%;
  402. text-align: center;
  403. color: #333333;
  404. }
  405. .tabtd>view:nth-of-type(3) {
  406. width: 22%;
  407. text-align: center;
  408. color: #333333;
  409. }
  410. .tabtd>view:nth-of-type(4) {
  411. width: 22%;
  412. text-align: center;
  413. color: #2671E2;
  414. }
  415. .ranking {
  416. width: 34rpx;
  417. height: 34rpx;
  418. }
  419. .ranking1 {
  420. width: 30rpx;
  421. height: 30rpx;
  422. background: #ECF1FF;
  423. color: #424D64;
  424. font-size: 18rpx;
  425. text-align: center;
  426. line-height: 30rpx;
  427. border-radius: 50%;
  428. margin: 0 auto;
  429. }
  430. .tabech {
  431. width: 100%;
  432. height: 600rpx;
  433. }
  434. </style>