From 8bc0a8187207014c0145afbb1e813a4753bb6207 Mon Sep 17 00:00:00 2001
From: wyj2080 <1603068044@qq.com>
Date: Mon, 20 Apr 2020 10:37:52 +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 | 435 ++++++++++++++++++++-----------------
 1 file changed, 240 insertions(+), 195 deletions(-)

diff --git a/src/pages/CustomerView.vue b/src/pages/CustomerView.vue
index e72ff0b..8c2fcee 100644
--- a/src/pages/CustomerView.vue
+++ b/src/pages/CustomerView.vue
@@ -4,107 +4,114 @@
       <i-col span="32">
         <row>
           <!--筛选-->
-          <row style="height: 90px;background: #f7f8fa;border: 1px solid #E8ECF2;line-height: 90px">
-            <span style="margin-left: 48px">选择日期</span>
-            <DatePicker v-model="dateRange" class="left-15" type="daterange" placement="bottom-start" split-panels placeholder="请选择日期区间" style="width: 200px" size="small"></DatePicker>
-            <span class="left-15">零售公司选择</span>
-            <Select filterable placeholder="请选择零售公司" v-model="organizationId" class="left-15" style="width:190px" size="small" @on-change="downRegionChange">
-              <Option v-for="item in organizationList" :value="item.id" :key="item.id">{{ item.name }}</Option>
-            </Select>
-            <span class="left-15">店铺选择</span>
-            <Select filterable placeholder="请选择店铺" v-model="shopId" class="left-15" style="width:190px" size="small">
-              <Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.name }}</Option>
-            </Select>
-            <Button type="primary" style="width: 70px;margin-left: 20px" @click="searchCustomerDataBtnClick" size="small">查询</Button>
+          <row style="margin-top: -2px">
+            <i-col span="4">
+              <row style="width: 248px;border: 1px solid #E8ECF2;border-radius: 8px;padding: 3px">
+                <span class="date-btn" :style="dateBtnValue === '今日' ? 'background: #2D8CF0;color: #fff' : ''" @click="dateBtnClick('今日')">今日</span>
+                <span class="date-btn" :style="dateBtnValue === '本周' ? 'background: #2D8CF0;color: #fff' : ''"  @click="dateBtnClick('本周')">本周</span>
+                <span class="date-btn" :style="dateBtnValue === '本月' ? 'background: #2D8CF0;color: #fff' : ''"  @click="dateBtnClick('本月')">本月</span>
+              </row>
+            </i-col>
+            <i-col span="4" style="height: 38px;line-height: 38px;">
+              <span class="view-text">{{dateBtnValue}}概览</span><span class="view-date">{{viewDate}}</span>
+            </i-col>
           </row>
           <!--5块客户数-->
-          <row class="top-10">
+          <row class="top-20">
             <Row type="flex" justify="space-between" class="code-row-bg">
-              <i-col span="4" class="big-blank" style="border: 1px solid #2EA4E4;border-left: 6px solid #2EA4E4;">
-                <row class="top-20"><span class="left-10">全部客户（累计）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.allCustomer}}</span></row>
-              </i-col>
-              <i-col span="4" class="big-blank" style="border: 1px solid #63C16D;border-left: 6px solid #63C16D;">
-                <row class="top-20"><span class="left-10">有效客户（累计）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.validCustomer}}</span></row>
-              </i-col>
               <i-col span="4" class="big-blank" style="border: 1px solid #FFCC00;border-left: 6px solid #FFCC00;">
-                <row class="top-20"><span class="left-10">新增客户</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.newCustomer}}</span></row>
+                <row class="top-20"><span class="left-10">新增好友</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.newCustomer}}</span></row>
               </i-col>
               <i-col span="4" class="big-blank" style="border: 1px solid #EC6A2F;border-left: 6px solid #EC6A2F;">
-                <row class="top-20"><span class="left-10">新增有效客户</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.newValidCustomer}}</span></row>
+                <row class="top-20"><span class="left-10">新增好友（去重）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.newValidCustomer}}</span></row>
+              </i-col>
+              <i-col span="4" class="big-blank" style="border: 1px solid #2EA4E4;border-left: 6px solid #2EA4E4;">
+                <row class="top-20"><span class="left-10">好友总数</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.allCustomer}}</span></row>
+              </i-col>
+              <i-col span="4" class="big-blank" style="border: 1px solid #63C16D;border-left: 6px solid #63C16D;">
+                <row class="top-20"><span class="left-10">好友总数（去重）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.allValidCustomer}}</span></row>
               </i-col>
               <i-col span="4" class="big-blank" style="border: 1px solid #2DC6EA;border-left: 6px solid #2DC6EA;">
-                <row class="top-20"><span class="left-10">删除拉黑数（累计）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.deleteCustomer}}</span></row>
+                <row class="top-20"><span class="left-10">删除拉黑数（累计去重）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.validDeleteCustomer}}</span></row>
               </i-col>
             </Row>
           </row>
           <!--柱状图-->
-          <row class="top-10 outline">
-            <span class="blue-logo"></span>
-            <span style="display: inline-block;margin-left: 5px">{{sevenDayStartDate}}至{{sevenDayEndDate}}（近七天）趋势图</span>
-            <ve-histogram :data="chartData" :extend="chartExtend" :colors="chartColor"></ve-histogram>
+          <row class="top-10">
+            <i-col span="16" class="outline">
+              <span class="blue-logo"></span>
+              <span style="display: inline-block;margin-left: 5px">{{this.$moment(startTime).format("YYYY-MM-DD")}}至{{this.$moment(endTime).format("YYYY-MM-DD")}}（{{recentName}}）趋势图</span>
+              <ve-histogram :data="chartData" :extend="chartExtend" :colors="chartColor"></ve-histogram>
+            </i-col>
+            <i-col span="8" class="padding-left-10">
+              <row class="outline">
+              <span class="blue-logo"></span>
+              <span style="display: inline-block;margin-left: 5px">好友&会员情况</span>
+                <row style="height: 399px;padding: 99px 15px;">
+                  <i-col span="6" style="border-right: 1px solid #D3D3D3;">
+                    <row style="height: 50px"></row>
+                    <row class="percent-text"><span>好友总数(去重)</span></row>
+                    <row style="height: 25px"></row>
+                    <row class="percent-text"><span>会员总数</span></row>
+                    <row style="height: 50px"></row>
+                  </i-col>
+                  <i-col span="18">
+                    <row style="height: 50px"></row>
+                    <row><span class="percent-span" style="background: #EC6A2F;" :style="percent1"></span><span>{{customerViewVO.allValidCustomer}}</span></row>
+                    <row style="height: 25px"></row>
+                    <row><span class="percent-span" style="background: #FFCC00;" :style="percent2"></span><span>{{customerViewVO.allVipCount}}</span></row>
+                    <row style="height: 50px"></row>
+                  </i-col>
+                </row>
+              </row>
+            </i-col>
+
           </row>
-          <!--条形图-->
-          <row class="top-10 outline">
-            <row>
-              <i-col span="4">
+          <!--前十名-->
+          <row class="top-10">
+            <i-col span="8">
+              <row class="outline" style="min-height: 300px">
                 <span class="blue-logo"></span>
-                <span style="display: inline-block;margin-left: 5px">客户&会员关联情况</span>
-              </i-col>
-              <i-col span="16" style="height: 200px;">
-                <row style="margin-top: 32px;margin-bottom: 23px;text-align: right">
-                  <span :style="allVipPercent"  class="inline-center-nowrap">全部会员：{{customerViewVO.common + customerViewVO.vip}}人</span>
-                </row>
-                <!--上大括号-->
-                <row>
-                  <div class="ivu-poptip-popper" :style="allVipPercent" style="position: absolute; will-change: top, left; top: -23px; right: 0px;z-index: 1;min-width: 0px" x-placement="bottom">
-                    <div class="ivu-poptip-content">
-                      <div class="ivu-poptip-arrow" style="border-bottom-color:rgba(0,0,0,.5)"></div>
-                      <div class="ivu-poptip-inner" style="box-shadow: 0px -1px 0px rgba(0,0,0,.4)">
-                        <div class="ivu-poptip-body">
-                          <div class="ivu-poptip-body-content">
-                            <div class="ivu-poptip-body-content-inner"></div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+                <span style="display: inline-block;margin-left: 5px;">零售公司新增好友top10</span>
+                <row v-if="customerViewVO.orgNewCustomerList.length === 0" style="text-align: center">暂无数据</row>
+                <row v-if="customerViewVO.orgNewCustomerList.length > 0" class="pading-12">
+                  <row><i-col span="2">排行</i-col><i-col span="18">零售公司</i-col><i-col span="4">新增好友</i-col></row>
+                  <row v-for="(item,index) in customerViewVO.orgNewCustomerList" :key="item.orgId">
+                    <i-col span="2">{{index + 1}}</i-col><i-col span="18">{{item.orgName}}</i-col><i-col span="4">{{item.newCustomerCount}}</i-col>
+                  </row>
                 </row>
+              </row>
+            </i-col>
 
-                <row style="height: 28px;margin-top: 3px;background: #ccc;border-radius:14px;overflow: hidden">
-                  <span v-if="customerViewVO.customer > 0 || (customerViewVO.customer === 0 && customerViewVO.common === 0 && customerViewVO.vip === 0)" :style="percent1" style="background: #FFCC00;" class="percent-span">
-                    <Tooltip  :content="'未关联的客户：' + customerViewVO.customer" placement="top" transfer><span>未关联的客户</span><span class="left-10">{{customerViewVO.customer}}</span></Tooltip>
-                  </span>
-                  <span v-if="customerViewVO.common > 0 || (customerViewVO.customer === 0 && customerViewVO.common === 0 && customerViewVO.vip === 0)" :style="percent2" style="background: #33CC00;" class="percent-span">
-                    <Tooltip  :content="'已关联：' + customerViewVO.common" placement="top" transfer><span>已关联</span><span class="left-10">{{customerViewVO.common}}</span></Tooltip>
-                  </span>
-                  <span v-if="customerViewVO.vip > 0 || (customerViewVO.customer === 0 && customerViewVO.common === 0 && customerViewVO.vip === 0)" :style="percent3" style="background: #EC6A2F;" class="percent-span">
-                    <Tooltip  :content="'未关联的会员：' + customerViewVO.vip" placement="top" transfer><span>未关联的会员</span><span class="left-10">{{customerViewVO.vip}}</span></Tooltip>
-                  </span>
-                </row>
-                <!--下大括号-->
-                <row>
-                  <div class="ivu-poptip-popper" :style="allCustomerPercent" style="position: absolute; will-change: top, left; top: -7px; left: 0px;display: inline-block;z-index: 1;min-width: 0px" x-placement="top">
-                    <div class="ivu-poptip-content">
-                      <div class="ivu-poptip-arrow" style="border-top-color:rgba(0,0,0,.5)"></div> <!---->
-                      <div class="ivu-poptip-inner" style="box-shadow: 0px 1px 0px rgba(0,0,0,.4)"><!---->
-                        <div class="ivu-poptip-body">
-                          <div class="ivu-poptip-body-content ivu-poptip-body-content-word-wrap">
-                            <div class="ivu-poptip-body-content-inner"></div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+            <i-col span="8" class="padding-left-10">
+              <row class="outline" style="min-height: 300px">
+              <span class="blue-logo"></span>
+              <span style="display: inline-block;margin-left: 5px">店铺新增好友top10</span>
+                <row v-if="customerViewVO.shopNewCustomerList.length === 0" style="text-align: center">暂无数据</row>
+                <row v-if="customerViewVO.shopNewCustomerList.length > 0" class="pading-12">
+                  <row><i-col span="2">排行</i-col><i-col span="18">店铺</i-col><i-col span="4">新增好友</i-col></row>
+                  <row v-for="(item,index) in customerViewVO.shopNewCustomerList" :key="item.shopId">
+                    <i-col span="2">{{index + 1}}</i-col><i-col span="18">{{item.shopName}}</i-col><i-col span="4">{{item.newCustomerCount}}</i-col>
+                  </row>
                 </row>
-                <row style="margin-top: 23px;text-align: left">
-                  <span :style="allCustomerPercent" class="inline-center-nowrap">全部客户：{{customerViewVO.customer + customerViewVO.common}}人</span>
+              </row>
+            </i-col>
+
+            <i-col span="8" class="padding-left-10">
+              <row class="outline" style="min-height: 300px">
+              <span class="blue-logo"></span>
+              <span style="display: inline-block;margin-left: 5px">推广为0的店铺数</span>
+                <row v-if="customerViewVO.zeroExtendList.length === 0" style="text-align: center">暂无数据</row>
+                <row v-if="customerViewVO.zeroExtendList.length > 0" class="pading-12">
+                  <row><i-col span="13">零售公司</i-col><i-col span="6">店铺总数</i-col><i-col span="5">推广为0店铺数</i-col></row>
+                  <row v-for="item in customerViewVO.zeroExtendList" :key="item.orgId">
+                    <i-col span="13">{{item.orgName}}</i-col><i-col span="6">{{item.allShopCount}}</i-col><i-col span="5">{{item.zeroShopCount}}</i-col>
+                  </row>
                 </row>
-              </i-col>
-              <i-col span="4">
-              </i-col>
-            </row>
+              </row>
+            </i-col>
           </row><!--条形图结束-->
-          <Spin style="top: 100px" size="large" fix v-if="spinShow"></Spin>
+          <Spin style="top: 50px" size="large" fix v-if="spinShow"></Spin>
         </row>
       </i-col>
     </Row>
@@ -113,61 +120,60 @@
 <script>
 
   import customerView from "../services/datacenter/customerView";
-  import customerDetail from "../services/datacenter/DataCenter";
     export default {
         data() {
             return {
               userId: 13,
               //加载遮罩
               spinShow: false,
-              dateRange: [],
-              organizationId: 0,
-              organizationList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
-              shopId: 0,
-              shopList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
+              dateBtnValue: "今日",
+              viewDate: this.$moment(new Date()).format("YYYY-MM-DD"),
               //近七天日期
-              sevenDayStartDate: this.$moment(new Date()).add(-6,"days").format("YYYY-MM-DD"),
-              sevenDayEndDate: this.$moment(new Date()).format("YYYY-MM-DD"),
+              recentName : "近七天",
+              //选中时间
+              selectStartTime: "",
+              selectEndTime: "",
+              //柱状图时间
+              startTime: "",
+              endTime: "",
               //人数占比
-              allVipPercent: "width:66.66%",
-              percent1: "width:33.33%",
-              percent2: "width:33.33%",
-              percent3: "width:33.33%",
-              allCustomerPercent: "width:66.66%",
+              percent1: "width:0%",
+              percent2: "width:0%",
               customerViewVO: {
-                allCustomer: 0,
-                validCustomer: 0,
                 newCustomer: 0,
                 newValidCustomer: 0,
-                deleteCustomer: 0,
-                customer:0,
-                common:0,
-                vip:0,
-                sevenDayCustomerList: [],
-                sevenDayVipList: [],
+                allCustomer: 0,
+                allValidCustomer: 0,
+                validDeleteCustomer: 0,
+                allVipCount: 0,
+                //柱状图
+                customerList: [],
+                validCustomerList: [],
+                //下面3大块
+                orgNewCustomerList: [],
+                shopNewCustomerList: [],
+                zeroExtendList: [],
               },
               chartExtend: {
                 barWidth: 28
               },
               chartColor:["#ffcc00","#ec6a2f"],
               chartData: {
-                columns: ['date', '新增客户', '新增会员' ],
+                columns: ['date', '新增好友', '新增好友(去重)' ],
                 rows: [
-                  { 'date': '1/1', '新增客户': 0, '新增会员': 0 },
-                  { 'date': '1/2', '新增客户': 0, '新增会员': 0 },
-                  { 'date': '1/3', '新增客户': 0, '新增会员': 0 },
-                  { 'date': '1/4', '新增客户': 0, '新增会员': 0 },
-                  { 'date': '1/5', '新增客户': 0, '新增会员': 0 },
-                  { 'date': '1/6', '新增客户': 0, '新增会员': 0 },
-                  { 'date': '1/7', '新增客户': 0, '新增会员': 0 }
+                  { 'date': '1/1', '新增好友': 14, '新增好友(去重)': 14 },
+                  { 'date': '1/1', '新增好友': 20, '新增好友(去重)': 10 },
+                  { 'date': '1/1', '新增好友': 30, '新增好友(去重)': 25 },
+                  { 'date': '1/1', '新增好友': 11, '新增好友(去重)': 11 },
+                  { 'date': '1/1', '新增好友': 14, '新增好友(去重)': 14 },
+                  { 'date': '1/1', '新增好友': 20, '新增好友(去重)': 10 },
+                  { 'date': '1/1', '新增好友': 30, '新增好友(去重)': 25 },
                 ]
               },
             }
         },
         mounted: function () {
-          this.downShopData();
-          this.downRegionData();
-          this.getMainList();
+          this.dateBtnClick('今日');
         },
         methods: {
           //页面重绘
@@ -178,26 +184,28 @@
           },
           //占比重绘
           percentResize: function(){
-            let customer = this.customerViewVO.customer;
-            let common = this.customerViewVO.common;
-            let vip = this.customerViewVO.vip;
-            let sum = customer + common + vip;
+            let allValidCustomer = this.customerViewVO.allValidCustomer;
+            let allVipCount = this.customerViewVO.allVipCount;
+            let sum = allValidCustomer + allVipCount;
             if(sum === 0){
-              this.allVipPercent = "width:66.66%";
-              this.percent1 = "width:33.33%";
-              this.percent2 = "width:33.33%";
-              this.percent3 = "width:33.33%";
-              this.allCustomerPercent = "width:66.66%";
+              this.percent1 = "width:0%";
+              this.percent2 = "width:0%";
               return;
             }
-            let p1 = Math.floor(customer/sum * 100 *100)/100;
-            let p2 = Math.floor(common/sum * 100 *100)/100;
-            let p3 = Math.floor(vip/sum * 100 *100)/100;
-            this.allVipPercent = "width:" + (p2 + p3) + "%";
-            this.percent1 = "width:" + p1 + "%";
-            this.percent2 = "width:" + p2 + "%";
-            this.percent3 = "width:" + p3 + "%";
-            this.allCustomerPercent = "width:" + (p1 + p2) + "%";
+            if(allValidCustomer > allVipCount){
+              let p2 = Math.floor(allVipCount/allValidCustomer * 100 *100)/100 * 0.8;
+              this.percent1 = "width:80%";
+              this.percent2 = "width:" + p2 + "%";
+            }
+            if(allValidCustomer < allVipCount){
+              let p1 = Math.floor(allValidCustomer/allVipCount * 100 *100)/100 * 0.8;
+              this.percent1 = "width:" + p1 + "%";
+              this.percent2 = "width:80%";
+            }
+            if(allValidCustomer === allVipCount){
+              this.percent1 = "width:80%";
+              this.percent2 = "width:80%";
+            }
           },
 
           //0转null
@@ -205,58 +213,51 @@
             if(value === 0){return null;}
             return value;
           },
-          //店铺list
-          downShopData: function () {
-            let that = this;
-            that.shopList = [{"id":0,"name":"全部"}];
-            let request =
-                    {userId: this.userId,regionId: null};
-            customerDetail.downShopData(request, function (data) {
-              data = data.data.results;
-              if(data){
-                for(let i=0;i<data.length;i++){
-                  let entity = data[i];
-                  if(entity){
-                    that.shopList.push(entity);
-                  }
-                }
-              }
-            })
-          },
-          //区域list
-          downRegionData: function () {
-            let that = this;
-            that.organizationList = [{"id":0,"name":"全部"}];
-            let request =
-                    {userId: this.userId};
-            customerDetail.downRegionData(request, function (data) {
-              data = data.data.results;
-              if(data){
-                for(let i=0;i<data.length;i++){
-                  let entity = data[i];
-                  if(entity){
-                    that.organizationList.push(entity);
-                  }
-                }
-              }
-            })
-          },
-          //区域选择
-          downRegionChange: function () {
-            this.downShopData();
-          },
-          //搜索
-          searchCustomerDataBtnClick: function () {
+          //日期按钮
+          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;
+            }
             this.getMainList();
           },
+          //日期改变
+          dateSelectChange: function(value){
+            //概览日期text
+            let nowDate = this.$moment(new Date());
+            switch (value) {
+              case '今日':
+                this.viewDate = nowDate.format("YYYY-MM-DD");
+                this.selectStartTime = this.$moment(new Date()).format("YYYY-MM-DD 00:00:00");
+                this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
+                this.startTime = this.$moment(new Date()).add(-6, "days").format("YYYY-MM-DD 00:00:00");
+                this.endTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
+                break;
+              case '本周':
+                this.viewDate = nowDate.startOf('week').format("YYYY-MM-DD") + ' 至 ' + this.$moment(new Date()).format("YYYY-MM-DD");
+                this.selectStartTime = this.$moment(new Date()).startOf("week").format("YYYY-MM-DD 00:00:00");
+                this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
+                this.startTime = this.selectStartTime;
+                this.endTime = this.$moment(new Date()).endOf("week").format("YYYY-MM-DD HH:mm:ss");
+                break;
+              case '本月':
+                this.viewDate = nowDate.startOf('month').format("YYYY-MM-DD") + ' 至 ' + this.$moment(new Date()).format("YYYY-MM-DD");
+                this.selectStartTime = this.$moment(new Date()).startOf("month").format("YYYY-MM-DD 00:00:00");
+                this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
+                this.startTime = this.selectStartTime;
+                this.endTime = this.$moment(new Date()).endOf("month").format("YYYY-MM-DD HH:mm:ss");
+                break;
+            }
+          },
           /**mainList*/
           getMainList: function(){
             let request = {
               userId: this.userId,
-              sevenDayStartTime: this.$moment(new Date()).add(-6,"days").format("YYYY-MM-DD 00:00:00"),
-              sevenDayEndTime: this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
-              organizationId: this.checkZero(this.organizationId),
-              shopId: this.checkZero(this.shopId),
+              selectStartTime: this.selectStartTime == null ? null : this.$moment(this.selectStartTime).format("YYYY-MM-DD 00:00:00"),
+              selectEndTime: this.selectEndTime == null ? null : this.$moment(this.selectEndTime).format("YYYY-MM-DD HH:mm:ss"),
+              startTime: this.startTime,
+              endTime: this.endTime
             };
             let that = this;
             //加载遮罩
@@ -269,14 +270,18 @@
               data = data.data.results;
               that.customerViewVO = data;
               that.chartData.rows = [];
-              for(let i=-6;i<=0;i++){
-                let date = that.$moment(new Date()).add(i, "days").format("M-DD");
-                let obj = {
-                  date:date,
-                  "新增客户": that.customerViewVO.sevenDayCustomerList.filter(customer => date === that.$moment(customer.registerTime).format("M-DD")).length,
-                  "新增会员": that.customerViewVO.sevenDayVipList.filter(vip => date === that.$moment(vip.registerTime).format("M-DD")).length,
-                };
-                that.chartData.rows.push(obj);
+              if(that.startTime && that.endTime){
+                let tmpStartTime = that.startTime;
+                while(that.$moment(tmpStartTime).format("YYYY-MM-DD") <= that.$moment(that.endTime).format("YYYY-MM-DD")){
+                  let date = that.$moment(tmpStartTime).format("M-DD");
+                  let obj = {
+                    date:date,
+                    "新增好友": that.customerViewVO.customerList.filter(customer => date === that.$moment(customer.registerTime).format("M-DD")).length,
+                    "新增好友(去重)": that.customerViewVO.validCustomerList.filter(vip => date === that.$moment(vip.registerTime).format("M-DD")).length,
+                  };
+                  that.chartData.rows.push(obj);
+                  tmpStartTime = that.$moment(tmpStartTime).add(1,"days").format("YYYY-MM-DD HH:mm:ss");
+                }
               }
               //占比重绘
               that.percentResize();
@@ -289,6 +294,28 @@
     }
 </script>
 <style scoped>
+  /*日期按钮*/
+  .date-btn{
+    display: inline-block;
+    width: 80px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  /*概览字体*/
+  .view-text{
+    font-size: 18px;
+    font-weight: 600;
+    font-family: "Microsoft YaHei";
+  }
+  /*概览日期*/
+  .view-date{
+    font-size: 16px;
+    color: #97A4B3;
+    margin-left: 10px;
+  }
   /*5大块客户数*/
   .big-blank{
     height: 100px;
@@ -308,20 +335,11 @@
     display: inline-block;
     vertical-align: middle;
   }
-  /*占比样式*/
-  .percent-span{
-    display: inline-block;
-    vertical-align: middle;
-    height: 28px;
-    line-height: 28px;
-    background: #FFCC00;
-    color: #fff;
-    text-align: center;
-  }
   /*外面的边框*/
   .outline{
     border: #e8ecf2 2px solid;
     padding: 10px;
+    border-radius: 4px;
   }
   .left-10{
     margin-left: 10px;
@@ -335,9 +353,36 @@
   .top-10{
     margin-top: 10px;
   }
+  .top-15{
+    margin-top: 15px;
+  }
   .top-20{
     margin-top: 20px;
   }
+  .top-30{
+    margin-top: 30px;
+  }
+  .pading-12{
+    padding: 12px;
+  }
+  .padding-left-10{
+    padding-left: 10px;
+  }
+
+  /*占比样式*/
+  .percent-text{
+    height: 38px;
+    line-height: 38px;
+    text-align: right;
+    padding-right: 8px;
+  }
+  .percent-span{
+    display: inline-block;
+    vertical-align: middle;
+    height: 38px;
+    line-height: 38px;
+    margin-right: 5px;
+  }
 
   /*全部客户样式*/
   .inline-center-nowrap{