修改

src/components/statistics/cutomerStatistics.vue

+<template>
+  <div class="salesStatistics" v-loading="loading">
+    <div class="el-card__header">
+      <span>数据概况</span>
+      <div style="display: flex;flex-direction: row;align-items: center;display:none;">
+        <el-button type="primary" class="el-button--small" @click="Export">导出全部</el-button>
+      </div>
+    </div>
+    <div class="content">
+      <div style="display: flex;flex-direction: row;align-items: center">
+        <el-select class="w100" @change="getList" style="margin-right: 10px;" v-model="msg.Source" size="small" placeholder="请选择">
+          <el-option
+            v-for="item in options"
+            :key="item.Id"
+            :label="item.Name"
+            :value="item.Id">
+          </el-option>
+        </el-select>
+        <div class="block">
+          <el-date-picker
+            style="padding: 3px 10px;width: 380px;height: 32px"
+            v-model="value"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            @change="getList"
+            align="right">
+          </el-date-picker>
+        </div>
+        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 20px">
+          <el-tab-pane label="7日" name="first"></el-tab-pane>
+          <el-tab-pane label="30日" name="second"></el-tab-pane>
+        </el-tabs>
+        <span style="color: #92959B;margin-left: 35px;cursor: pointer;font-size: 15px;" @click="empty">清空筛选</span>
+      </div>
+    </div>
+    <div class="table-area">
+      <div class="el-card is-never-shadow">
+        <div class="el-card__header">
+          <div>
+            <span>总用户</span>
+          </div>
+        </div>
+        <div class="el-card__body">
+          <div class="num-info">
+            <div class="num-info-item" v-for="(item,index) in UserData.totalList" :key="index">
+              <div>{{item.UserCount}}</div>
+              <div class="info-item-name">{{item.GradeName}}</div>
+            </div>
+            <div class="num-info-item">
+              <div>{{UserData.totalUserCount}}</div>
+              <div class="info-item-name">总计</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="el-card is-never-shadow">
+        <div class="el-card__header">
+          <div>
+            <span>今日用户</span>
+          </div>
+        </div>
+        <div class="el-card__body">
+          <div class="num-info">
+            <div class="num-info-item" v-for="(item,index) in UserData.todayList" :key="index">
+              <div>{{item.UserCount}}</div>
+              <div class="info-item-name">{{item.GradeName}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div style="padding: 20px;background: #fff;margin-top: 10px">
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        header-cell-class-name="headClass"
+        style="width: 100%;"
+      >
+        <el-table-column
+          prop="TimeStr"
+          label="日期"
+          width="342">
+        </el-table-column>
+        <el-table-column
+          prop="Pink"
+          label="普象"
+          width="339">
+        </el-table-column>
+        <el-table-column
+          prop="OrderNum"
+          label="VIP"
+          width="339">
+        </el-table-column>
+        <el-table-column
+          prop="Silver"
+          label="银象"
+          width="339">
+        </el-table-column>
+
+        <el-table-column
+          prop="Gold"
+          label="金象"
+        >
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data(){
+      return{
+        msg:{
+          Source:0,
+          StartDate:'',
+          EndDate:'',
+        },
+        loading:false,
+        options:[],
+        tableData:[],
+        count:0,
+        value:'',
+        activeName:'',
+        //总客户和今日用户
+        UserData:[],
+      }
+    },
+    created(){
+      this.getplat();
+      this.getMallDistri();
+      this.getList();
+    },
+    methods:{
+      //获取顶部客户统计
+      getMallDistri(){
+        this.apipost("/api/Tenant/MallDistributorStatistics", {}, res => {
+          if(res.data.resultCode==1){
+              this.UserData = res.data.data;
+          }else{
+              this.Error(res.data.message);
+          }
+        })
+      },
+      //获取平台
+      getplat(){
+        this.apipost("/api/User/GetMemberUserSourceEnumList", {}, res => {
+          if(res.data.resultCode==1){
+            this.options = res.data.data;
+            this.options.unshift({Name: "全部平台", Id: 0})
+          }
+
+        })
+      },
+      //获取列表
+      getList(){
+        if(this.value!='' &&  this.value != null){
+          this.msg.StartDate = this.value[0];
+          this.msg.EndDate = this.value[1];
+        }else{
+          this.msg.StartDate = '';
+          this.msg.EndDate = '';
+        }
+        this.loading=true;
+        this.apipost("/api/Tenant/MallDistributorDayStatistics", this.msg, res => {
+          this.loading=false
+          console.log(res,'列表数据');
+          if(res.data.resultCode==1){
+            this.tableData = res.data.data;
+          }else {
+            this.Error(res.data.message);
+          }
+        })
+      },
+      Export(){
+        let msg = {
+          PlatformType:this.msg.PlatformType,
+          StartDate :this.msg.StartDate ,
+          EndDate :this.msg.EndDate,
+          OrderType :this.msg.OrderType,
+
+        }
+        msg = JSON.parse(JSON.stringify(msg));
+        this.GetLocalFile(
+          "/api/Statistics/GetSellExcel",
+          msg,
+          "销售统计.xls"
+        );
+      },
+      empty(){
+        this.msg.Source=0;
+        this.value='';
+        this.getList();
+      },
+      handleClick(tab, event) {
+        if(tab.name=='first'){
+          this.fun_date(7)
+        }else if(tab.name=='second'){
+          this.fun_date(30)
+        }
+      },
+      fun_date(num){
+        let that= this
+        let date1 = new Date();
+        //今天时间
+        let time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate()
+        let date2 = new Date(date1);
+        date2.setDate(date1.getDate() - num);
+        //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
+        let time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
+        let data = []
+        data.push(time2)
+        data.push(time1)
+        that.value = data;
+
+        this.getList();
+      },
+    },
+    mounted(){
+
+    }
+  }
+</script>
+
+<style >
+
+  .salesStatistics .el-card__header{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background: #fff;
+  }
+  .salesStatistics .el-button--small{
+    padding: 9px 15px;
+  }
+  .salesStatistics .content .searchInput{
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+  }
+  .salesStatistics .content .searchInput .el-input__inner{
+    border:none;outline:none;
+    height: 30px;
+    line-height: 30px;
+  }
+  .salesStatistics .content .searchInput{
+    line-height: normal;
+    display: inline-table;
+    border-collapse: separate;
+    border-spacing: 0;
+    width:250px;
+    margin-right: 20px;
+  }
+  .salesStatistics .content{
+    background: #fff;
+    margin-top:10px;
+    padding: 15px;
+    box-sizing: border-box;
+  }
+  .salesStatistics .el-icon-date{
+    line-height: 24px;
+  }
+  .salesStatistics .el-range-separator{
+    line-height: 24px;
+  }
+  .salesStatistics .zong{
+    width: 100%;
+    height: 57px;
+    padding: 18px 20px;
+    border-bottom: 1px solid #EBEEF5;
+    background: white;
+  }
+.salesStatistics .table-area {
+  margin: 10px 0;
+  display: flex;
+  justify-content: space-between;
+}
+  .salesStatistics .table-area .el-card {
+    width: 49.5%;
+    color: #303133;
+  }
+  .salesStatistics .el-card {
+    border: 1px solid #EBEEF5;
+    background-color: #FFF;
+    color: #303133;
+    -webkit-transition: .3s;
+    transition: .3s;
+  }
+  .salesStatistics .el-card__header {
+    padding: 18px 20px;
+    border-bottom: 1px solid #EBEEF5;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .salesStatistics .el-card__body {
+    padding: 20px;
+  }
+  .salesStatistics .num-info {
+    display: flex;
+    width: 100%;
+    height: 60px;
+    font-size: 24px;
+    color: #303133;
+    margin: 20px 0;
+  }
+  .salesStatistics .num-info .num-info-item {
+    text-align: center;
+    flex-grow: 1;
+    border-left: 1px dashed #EFF1F7;
+  }
+  .salesStatistics .info-item-name {
+    font-size: 14px;
+    color: #92959B;
+  }
+</style>

src/router/index.js

@@ -733,6 +733,12 @@ export default new Router({
           name: 'salesStatistics',
           component: resolve => require(['@/components/statistics/salesStatistics'], resolve),
         },
+        //数据统计 用户统计
+        {
+          path: '/cutomerStatistics',
+          name: 'cutomerStatistics',
+          component: resolve => require(['@/components/statistics/cutomerStatistics'], resolve),
+        },
         //营销中心 充值管理
         {
           path: '/rechargeManage',