From 89c18da5e53bd4d7ed2dfdab0296f95a92150d19 Mon Sep 17 00:00:00 2001 From: wyj2080 <1603068044@qq.com> Date: Mon, 20 Apr 2020 20:37:44 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B7=E6=A6=82=E8=A7=88=EF=BC=8CUI?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/CustomerView.vue | 131 ++++++++++++++++++++++++++++++------- static/img/right-angle.png | Bin 0 -> 572 bytes 2 files changed, 107 insertions(+), 24 deletions(-) create mode 100644 static/img/right-angle.png diff --git a/src/pages/CustomerView.vue b/src/pages/CustomerView.vue index 8c2fcee..163ce3c 100644 --- a/src/pages/CustomerView.vue +++ b/src/pages/CustomerView.vue @@ -5,15 +5,26 @@ - - + + 今日 本周 本月 + 自定义 - - {{dateBtnValue}}概览{{viewDate}} + + {{dateBtnValue}}概览 + {{viewDate}} + + + 至 + + + + + + @@ -70,42 +81,53 @@ - + 零售公司新增好友top10 暂无数据 - 排行零售公司新增好友 - - {{index + 1}}{{item.orgName}}{{item.newCustomerCount}} + + {{item.orgName}} + visible + {{item.newCustomerCount}} - + 店铺新增好友top10 暂无数据 - 排行店铺新增好友 - - {{index + 1}}{{item.shopName}}{{item.newCustomerCount}} + + {{item.shopName}} + visible + {{item.newCustomerCount}} - + 推广为0的店铺数 + 更多 暂无数据 - 零售公司店铺总数推广为0店铺数 + + visible + 零售公司 + 店铺总数 + 推广为0店铺数 + - {{item.orgName}}{{item.allShopCount}}{{item.zeroShopCount}} + visible + {{item.orgName}} + {{item.allShopCount}} + {{item.zeroShopCount}} @@ -155,7 +177,8 @@ zeroExtendList: [], }, chartExtend: { - barWidth: 28 + barWidth: 28, + label: { show: true, position: "top" } }, chartColor:["#ffcc00","#ec6a2f"], chartData: { @@ -172,6 +195,33 @@ }, } }, + computed:{ + options1() { + let that = this; + return{ + disabledDate (date) { + if(that.selectEndTime == null || that.selectEndTime == ""){ + return false; + }else{ + return date && date.valueOf() > that.selectEndTime || date && date.valueOf() < that.$moment(that.selectEndTime).add(-31,"days"); + } + } + } + + }, + options2() { + let that = this; + return{ + disabledDate (date) { + if(that.selectStartTime == null || that.selectStartTime == ""){ + return false; + }else{ + return date && date.valueOf() < that.selectStartTime || date && date.valueOf() > that.$moment(that.selectStartTime).add(31,"days"); + } + } + } + }, + }, mounted: function () { this.dateBtnClick('今日'); }, @@ -216,11 +266,25 @@ //日期按钮 dateBtnClick: function(value){ switch (value) { - case '今日': this.dateBtnValue = "今日";this.recentName = "近七天";this.dateSelectChange('今日');this.chartExtend.barWidth = 28;break; - case '本周': this.dateBtnValue = "本周";this.recentName = "本周";this.dateSelectChange('本周');this.chartExtend.barWidth = 28;break; - case '本月': this.dateBtnValue = "本月";this.recentName = "本月";this.dateSelectChange('本月');this.chartExtend.barWidth = 8;break; + case '今日': this.dateBtnValue = "今日";this.recentName = "近七天";this.dateSelectChange('今日');this.chartExtend.barWidth = 28;this.chartExtend.label.show = true;break; + case '本周': this.dateBtnValue = "本周";this.recentName = "本周";this.dateSelectChange('本周');this.chartExtend.barWidth = 28;this.chartExtend.label.show = true;break; + case '本月': this.dateBtnValue = "本月";this.recentName = "本月";this.dateSelectChange('本月');this.chartExtend.barWidth = 8;this.chartExtend.label.show = false;break; + case '自定义': this.dateBtnValue = "自定义";this.recentName = "自定义";break; } - this.getMainList(); + }, + //自定义日期 + diyDateChange: function(){ + if(this.selectStartTime && this.selectEndTime){ + //超过15天，柱状图不显示数字 + if(this.$moment(this.selectEndTime).valueOf() - this.$moment(this.selectStartTime).valueOf() > 15*24*60*60*1000){ + this.chartExtend.barWidth = 8; + this.chartExtend.label.show = false; + }else{ + this.chartExtend.barWidth = 28; + this.chartExtend.label.show = true; + } + this.dateSelectChange('自定义'); + } }, //日期改变 dateSelectChange: function(value){ @@ -248,7 +312,14 @@ this.startTime = this.selectStartTime; this.endTime = this.$moment(new Date()).endOf("month").format("YYYY-MM-DD HH:mm:ss"); break; + case '自定义': + this.selectStartTime = this.$moment(this.selectStartTime).format("YYYY-MM-DD 00:00:00"); + this.selectEndTime = this.$moment(this.selectEndTime).format("YYYY-MM-DD 23:59:59"); + this.startTime = this.selectStartTime; + this.endTime = this.selectEndTime; + break; } + this.getMainList(); }, /**mainList*/ getMainList: function(){ @@ -289,6 +360,10 @@ that.resizeWindow(); }); }, + //零推广更多 + zeroExtendMore: function () { + alert("123"); + } } } @@ -384,11 +459,19 @@ margin-right: 5px; } - /*全部客户样式*/ - .inline-center-nowrap{ + /*文字过长...*/ + .text-ellipsis{ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + /*top10,占比样式*/ + .top10-percent-span{ display: inline-block; - text-align: center; - white-space: nowrap + vertical-align: middle; + height: 18px; + line-height: 18px; + margin-right: 5px; } diff --git a/static/img/right-angle.png b/static/img/right-angle.png new file mode 100644 index 0000000000000000000000000000000000000000..01ef903d22169970d8d0987bad2ca767472b5a88 GIT binary patch literal 572 zcmV-C0>k}@P)Px#1ZP1_K>z@;j|==^1poj6=1D|BR5(wCQ%y?(Q52o$j7k(y(8is#5QHoUKd6x? zp_Q&$M4NCSND}>&cCChR(V`aqfi^9Kk`xh?P>3L+59xzS$DEpRoX%sWLD9(rk2iPb zo^#K;_YGkTB$G*dr_?XJsa!5wIxz((a=Dxw4u_v1(z4lX3xtq09Oo4x z_f{f(0u=dt{+s9dx~i&gaN)-*-fp*l27|%pXf!IrsitS@7!aT+6biD}>#aK+j$4S# z!^u*&+tox-td~k9+9wl31t=<&iV};(9wkY-26+yzmLVpELZQ22vG}8B{Ubm@8w=Yn z?RNVHbUL9HSMg)haM4UTr+~^F$g3c4BW$9wFp5mk`!~`=`uEi!A~c)L%TZ*8VVGY$*zI6&o56no0000< KMNUMnLSTYmEdRm) literal 0 HcmV?d00001