No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 

467 líneas
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(chend.isInterval==0){
  173. chend.name=chend.name+chend.unit+'-'+chend.endName+chend.unit
  174. }else{
  175. chend.name=chend.name
  176. }
  177. })
  178. })
  179. this.objlist=data.list;
  180. this.Afolding=true;
  181. this.numlist.forEach((citem,index)=>{
  182. if(index<6){
  183. citem.isshow=true
  184. }else{
  185. citem.isshow=false
  186. }
  187. })
  188. })
  189. },
  190. //查看
  191. Toview(item,i){
  192. uni.navigateTo({
  193. url: '/pages/center/Piabodata/Customerportrait/Receivingrecords?datatype='+this.activeTotal+"&keywordsId="+item.matchKeywords[i].keywordsId+"&starttime="+this.timeobj.statDateStart+"&endoftime="+this.timeobj.statDateEnd
  194. })
  195. },
  196. //时间切换
  197. tabtimetap(index) {
  198. if (index == 3) {
  199. this.totalTimeShow = true;
  200. } else {
  201. this.activeTotal = index;
  202. this.gitinit()
  203. }
  204. },
  205. //自定义时间
  206. totalTimeChange(e) {
  207. this.timeobj.statDateStart = e.startDate;
  208. this.timeobj.statDateEnd = e.endDate;
  209. this.activeTotal=3;
  210. this.gitinit()
  211. },
  212. charttoswitch(index,num) {
  213. this.objlist[index].activeTab=num
  214. }
  215. }
  216. };
  217. </script>
  218. <style lang="scss" scoped>
  219. .anclack{
  220. width: 100%;
  221. height: 78rpx;
  222. text-align: center;
  223. line-height: 78rpx;
  224. font-size: 30rpx;
  225. border: 1rpx solid #E0E0E0;
  226. font-weight: 400;
  227. color: #666666;
  228. }
  229. .box {
  230. width: 100%;
  231. height: 100%;
  232. background: #FAFAFA;
  233. padding-bottom: 60rpx;
  234. }
  235. .boxtittab {
  236. width: 100;
  237. height: 92rpx;
  238. background: #FFFFFF;
  239. border: 1px solid #E0E0E0;
  240. display: flex;
  241. align-items: center;
  242. .tabbox {
  243. flex: 1;
  244. height: 100%;
  245. text-align: center;
  246. line-height: 92rpx;
  247. color: #666666;
  248. font-size: 28rpx;
  249. display: flex;
  250. justify-content: center;
  251. .activecllasscet {
  252. width: 96rpx;
  253. border-bottom: 2px solid #2671E2;
  254. }
  255. }
  256. }
  257. .tabtime {
  258. width: 100%;
  259. height: 50rpx;
  260. text-align: center;
  261. line-height: 50rpx;
  262. font-size: 24rpx;
  263. color: #666666;
  264. }
  265. .boxzonglan {
  266. width: 100%;
  267. min-height: 496rpx;
  268. background: #FFFFFF;
  269. padding: 30rpx 30rpx 30rpx 30rpx;
  270. .zonglantit {
  271. font-size: 30rpx;
  272. color: #333333;
  273. font-family: PingFangSC-Semibold, PingFang SC;
  274. font-weight: 600;
  275. }
  276. .zonglanbox {
  277. width: 100%;
  278. display: flex;
  279. flex-wrap: wrap;
  280. margin-top: 24rpx;
  281. .grid {
  282. width: 50%;
  283. height: 128rpx;
  284. border: 1px solid #E0E0E0;
  285. .audonum {
  286. color: #666666;
  287. text-indent: 40rpx;
  288. font-size: 26rpx;
  289. margin-top: 20rpx;
  290. }
  291. .num {
  292. color: #333333;
  293. text-indent: 40rpx;
  294. font-size: 32rpx;
  295. font-weight: 600;
  296. margin-top: 10rpx;
  297. }
  298. }
  299. }
  300. }
  301. .centerfor {
  302. width: 100%;
  303. height: 686rpx;
  304. background: #FFFFFF;
  305. padding-left: 30rpx;
  306. padding-right: 30rpx;
  307. margin-top: 20rpx;
  308. .fortit {
  309. width: 100%;
  310. height: 86rpx;
  311. display: flex;
  312. border-bottom: 1px solid #E0E0E0;
  313. .left {
  314. width: 70%;
  315. height: 100%;
  316. display: flex;
  317. align-items: center;
  318. .lefti {
  319. width: 6rpx;
  320. height: 30rpx;
  321. background: #2671E2;
  322. }
  323. .lefttext {
  324. font-size: 30rpx;
  325. font-family: PingFangSC-Semibold, PingFang SC;
  326. font-weight: 600;
  327. color: #333333;
  328. margin-left: 10rpx;
  329. }
  330. }
  331. .right {
  332. width: 30%;
  333. height: 70rpx;
  334. display: flex;
  335. font-size: 28rpx;
  336. align-items: center;
  337. margin-top: 16rpx;
  338. }
  339. .right view {
  340. width: 92rpx;
  341. height: 50rpx;
  342. text-align: center;
  343. }
  344. }
  345. }
  346. .activeclass {
  347. color: #2671E2;
  348. border-bottom: 2px solid #2671E2;
  349. }
  350. .tabdada {
  351. width: 100%;
  352. height: 580rpx;
  353. overflow-y: auto;
  354. padding-bottom: 20rpx;
  355. }
  356. .tabth {
  357. width: 100%;
  358. height: 28rpx;
  359. display: flex;
  360. font-size: 28rpx;
  361. line-height: 28rpx;
  362. color: #666666;
  363. margin-top: 28rpx;
  364. }
  365. .tabth>view:nth-of-type(1) {
  366. width: 10%;
  367. text-align: center;
  368. }
  369. .tabth>view:nth-of-type(2) {
  370. width: 46%;
  371. text-align: center;
  372. }
  373. .tabth>view:nth-of-type(3) {
  374. width: 22%;
  375. text-align: center;
  376. }
  377. .tabth>view:nth-of-type(4) {
  378. width: 22%;
  379. text-align: center;
  380. }
  381. .tabtd {
  382. width: 100%;
  383. height: 30rpx;
  384. display: flex;
  385. font-size: 26rpx;
  386. line-height: 30rpx;
  387. margin-top: 32rpx;
  388. }
  389. .tabtd>view:nth-of-type(1) {
  390. width: 10%;
  391. text-align: center;
  392. line-height: 30rpx;
  393. }
  394. .tabtd>view:nth-of-type(2) {
  395. width: 46%;
  396. text-align: center;
  397. color: #333333;
  398. }
  399. .tabtd>view:nth-of-type(3) {
  400. width: 22%;
  401. text-align: center;
  402. color: #333333;
  403. }
  404. .tabtd>view:nth-of-type(4) {
  405. width: 22%;
  406. text-align: center;
  407. color: #2671E2;
  408. }
  409. .ranking {
  410. width: 34rpx;
  411. height: 34rpx;
  412. }
  413. .ranking1 {
  414. width: 30rpx;
  415. height: 30rpx;
  416. background: #ECF1FF;
  417. color: #424D64;
  418. font-size: 18rpx;
  419. text-align: center;
  420. line-height: 30rpx;
  421. border-radius: 50%;
  422. margin: 0 auto;
  423. }
  424. .tabech {
  425. width: 100%;
  426. height: 600rpx;
  427. }
  428. </style>