页面修改

src/components/statistics/cutomerStatistics.vue

@@ -8,25 +8,15 @@
     </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-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 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">
@@ -74,37 +64,17 @@
     </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 v-loading="loading" :data="tableData" header-cell-class-name="headClass" style="width: 100%;">
+        <el-table-column prop="TimeStr" label="日期" min-width="2">
         </el-table-column>
-        <el-table-column
-          prop="Pink"
-          label="普象会员"
-          width="339">
+        <el-table-column prop="Pink" label="普象会员" min-width="2">
         </el-table-column>
-        <el-table-column
-          prop="VIP"
-          label="VIP会员"
-          width="339">
+        <el-table-column prop="VIP" label="VIP会员" min-width="2">
         </el-table-column>
-        <el-table-column
-          prop="Silver"
-          label="银象"
-          width="339">
+        <el-table-column prop="Silver" label="银象" min-width="2">
         </el-table-column>
 
-        <el-table-column
-          prop="Gold"
-          label="金象"
-        >
+        <el-table-column prop="Gold" label="金象" min-width="2">
         </el-table-column>
       </el-table>
     </div>
@@ -113,74 +83,77 @@
 
 <script>
   export default {
-    data(){
-      return{
-        msg:{
-          Source:0,
-          StartDate:'',
-          EndDate:'',
+    data() {
+      return {
+        msg: {
+          Source: 0,
+          StartDate: '',
+          EndDate: '',
         },
-        loading:false,
-        options:[],
-        tableData:[],
-        count:0,
-        value:'',
-        activeName:'',
+        loading: false,
+        options: [],
+        tableData: [],
+        count: 0,
+        value: '',
+        activeName: '',
         //总客户和今日用户
-        UserData:[],
+        UserData: [],
       }
     },
-    created(){
+    created() {
       this.getplat();
       this.getMallDistri();
       this.getList();
     },
-    methods:{
+    methods: {
       //获取顶部客户统计
-      getMallDistri(){
+      getMallDistri() {
         this.apipost("/api/Tenant/MallDistributorStatistics", {}, res => {
-          if(res.data.resultCode==1){
+          if (res.data.resultCode == 1) {
             this.UserData = res.data.data;
-          }else{
+          } else {
             this.Error(res.data.message);
           }
         })
       },
       //获取平台
-      getplat(){
+      getplat() {
         this.apipost("/api/User/GetMemberUserSourceEnumList", {}, res => {
-          if(res.data.resultCode==1){
+          if (res.data.resultCode == 1) {
             this.options = res.data.data;
-            this.options.unshift({Name: "全部平台", Id: 0})
+            this.options.unshift({
+              Name: "全部平台",
+              Id: 0
+            })
           }
 
         })
       },
       //获取列表
-      getList(){
-        if(this.value!='' &&  this.value != null){
+      getList() {
+        if (this.value != '' && this.value != null) {
           this.msg.StartDate = this.value[0];
           this.msg.EndDate = this.value[1];
-        }else{
+        } else {
           this.msg.StartDate = '';
           this.msg.EndDate = '';
         }
-        this.loading=true;
+        this.loading = true;
         this.apipost("/api/Tenant/MallDistributorDayStatistics", this.msg, res => {
-          this.loading=false
-          if(res.data.resultCode==1){
+          this.loading = false
+          if (res.data.resultCode == 1) {
             this.tableData = res.data.data;
-          }else {
+          } else {
             this.Error(res.data.message);
           }
         })
       },
-      Export(){
+      Export() {
         let msg = {
-          PlatformType:this.msg.PlatformType,
-          StartDate :this.msg.StartDate ,
-          EndDate :this.msg.EndDate,
-          OrderType :this.msg.OrderType,
+          PlatformType: this.msg.PlatformType,
+          StartDate: this.msg.StartDate,
+          EndDate: this.msg.EndDate,
+          OrderType: this.msg.OrderType,
 
         }
         msg = JSON.parse(JSON.stringify(msg));
@@ -190,20 +163,20 @@
           "销售统计.xls"
         );
       },
-      empty(){
-        this.msg.Source=0;
-        this.value='';
+      empty() {
+        this.msg.Source = 0;
+        this.value = '';
         this.getList();
       },
       handleClick(tab, event) {
-        if(tab.name=='first'){
+        if (tab.name == 'first') {
           this.fun_date(7)
-        }else if(tab.name=='second'){
+        } else if (tab.name == 'second') {
           this.fun_date(30)
         }
       },
-      fun_date(num){
-        let that= this
+      fun_date(num) {
+        let that = this
         let date1 = new Date();
         //今天时间
         let time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate()
@@ -219,69 +192,81 @@
         this.getList();
       },
     },
-    mounted(){
+    mounted() {
 
     }
   }
-</script>
 
-<style >
+</script>
 
-  .salesStatistics .el-card__header{
+<style>
+  .salesStatistics .el-card__header {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     background: #fff;
   }
-  .salesStatistics .el-button--small{
+
+  .salesStatistics .el-button--small {
     padding: 9px 15px;
   }
-  .salesStatistics .content .searchInput{
+
+  .salesStatistics .content .searchInput {
     border: 1px solid #DCDFE6;
     border-radius: 4px;
   }
-  .salesStatistics .content .searchInput .el-input__inner{
-    border:none;outline:none;
+
+  .salesStatistics .content .searchInput .el-input__inner {
+    border: none;
+    outline: none;
     height: 30px;
     line-height: 30px;
   }
-  .salesStatistics .content .searchInput{
+
+  .salesStatistics .content .searchInput {
     line-height: normal;
     display: inline-table;
     border-collapse: separate;
     border-spacing: 0;
-    width:250px;
+    width: 250px;
     margin-right: 20px;
   }
-  .salesStatistics .content{
+
+  .salesStatistics .content {
     background: #fff;
-    margin-top:10px;
+    margin-top: 10px;
     padding: 15px;
     box-sizing: border-box;
   }
-  .salesStatistics .el-icon-date{
+
+  .salesStatistics .el-icon-date {
     line-height: 24px;
   }
-  .salesStatistics .el-range-separator{
+
+  .salesStatistics .el-range-separator {
     line-height: 24px;
   }
-  .salesStatistics .zong{
+
+  .salesStatistics .zong {
     width: 100%;
     height: 57px;
     padding: 18px 20px;
     border-bottom: 1px solid #EBEEF5;
     background: white;
   }
-.salesStatistics .table-area {
+
+  .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;
@@ -289,15 +274,18 @@
     -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%;
@@ -306,13 +294,16 @@
     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>