1

src/components/FinancialModule/ReportForm/dianshangannualRatio.vue

+<template>
+    <div class="dianshangyeardata">
+      <div class="el-card__header">
+        <span>电商年度比数据</span>
+        <div style="display: flex;flex-direction: row;align-items: center">
+          <!---->
+          <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">
+            <div class="block">
+           
+              
+                <el-date-picker
+                  v-model="msg.StartYear"
+                  type="year"
+                  format='yyyy'
+                  value-format="yyyy"
+                  @change='getmonth'
+                  placeholder="选择开始年">
+                </el-date-picker>
+                <span style="margin: 0 10px;">-</span>
+                
+                  <el-date-picker
+                    v-model="msg.EndYear"
+                    type="year"
+                    format='yyyy'
+                    value-format="yyyy"
+                    @change='getmonth'
+                    placeholder="选择结束年">
+                  </el-date-picker>
+              </div>
+
+        </div>
+     
+      </div>
+      <div style="padding: 15px ;background: #FFF;">
+   
+      
+     
+      <div style="width: 100%;display: flex;" v-if='YearSList && YearSList.length>0 '>
+        <div style="width: 150px;">
+            <table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
+              <tr > <td  style="width: 150px;">年份</td> </tr>
+              <tr v-for='(x,y) in leftData' :key = 'y'> <td class="qthuanbicheng">{{x.Name}}</td></tr>
+          </table>
+        </div>
+        <div style="width:1px;  overflow:scroll;flex:1" >
+          <table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: YearSListwidth+'px'}">
+              <tr > <td  style="font-size: 12px;" v-for='(x,y) in YearSList' :key = 'y'>{{x.Date}}</td></tr>
+              <tr v-for='(item,index) in leftData' :key = 'index'> 
+                  <td class="qthuanbicheng" style="font-size: 12px;" v-for='(x,y) in YearSList' :key = 'y'>
+                    <span :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}</span>
+                  </td>
+              </tr>            
+          </table>
+        </div>
+      </div>
+
+      <div style="width: 100%;display: flex;" v-if='YearAvgSList && YearAvgSList.length>0 '>
+        <div style="width: 150px;">
+            <table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
+              <tr > <td class="qthuanbicheng" style="width: 150px;">年份</td> </tr>
+              <tr v-for='(x,y) in leftData_t' :key = 'y'> <td class="qthuanbicheng">{{x.Name}}</td></tr>
+          </table>
+        </div>
+        <div style="width:1px;  overflow:scroll;flex:1" >
+          <table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: YearSListwidth+'px'}">
+              <tr > <td class="qthuanbicheng" style="font-size: 12px;" v-for='(x,y) in YearAvgSList' :key = 'y'>{{x.Date}}</td></tr>
+              <tr v-for='(item,index) in leftData_t' :key = 'index'> 
+                  <td class="qthuanbicheng" style="font-size: 12px;" v-for='(x,y) in YearAvgSList' :key = 'y'>
+                    <span :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}%</span>
+                  </td>
+              </tr>            
+          </table>
+        </div>
+      </div>
+
+      <div style="width: 100%;display: flex;" v-if='YearRateSList && YearRateSList.length>0 '>
+        <div style="width: 150px;">
+            <table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
+              <tr > <td class="qthuanbicheng" style="width: 150px;">年份</td> </tr>
+              <tr v-for='(x,y) in leftData_tr' :key = 'y'> <td class="qthuanbicheng">{{x.Name}}</td></tr>
+          </table>
+        </div>
+        <div style="width:1px;  overflow:scroll;flex:1" >
+          <table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: YearSListwidth+'px'}">
+              <tr > <td class="qthuanbicheng" style="font-size: 12px;" v-for='(x,y) in YearRateSList' :key = 'y'>{{x.Date}}</td></tr>
+              <tr v-for='(item,index) in leftData_tr' :key = 'index'> 
+                  <td class="qthuanbicheng" style="font-size: 12px;" v-for='(x,y) in YearRateSList' :key = 'y'>
+                    <span :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}%</span>
+                  </td>
+              </tr>            
+          </table>
+        </div>
+      </div>
+    </div>
+
+     
+      
+    
+    
+    </div>
+  
+  </template>
+  
+  <script>
+    export default {
+      name: "dianshangyeardata",
+      data() {
+        return {
+          value: '',
+          tableHeight: window.innerHeight  - 50 - 41 - 69 -74 - 30, //窗口的高度减去你需要减去的高度
+          msg: {
+            StartYear:'',//开始年
+            EndYear:'',
+          },
+          loading: false,
+          YearSList:[],
+          YearSListwidth:0,
+          leftData:[
+            {Name:'付款人数',DataObj:'PeopleNum'},
+            {Name:'付款单数',DataObj:'OrderNum'},
+            {Name:'付款金额',DataObj:'PayMoney'},
+            {Name:'购买件数',DataObj:'BuyNum'},
+            {Name:'会员数',DataObj:'TotalPayPeople'},
+            {Name:'付款人数',DataObj:'MAvgPeopleNum'},
+            {Name:'毛利',DataObj:'Profit'},
+            {Name:'普象',DataObj:'PXNum'},
+            {Name:'VIP',DataObj:'VipNum'},
+            {Name:'银象',DataObj:'YXNum'},
+            {Name:'金象',DataObj:'JXNum'},
+            {Name:'会员总数',DataObj:'TotalMNum'},
+          ],
+          YearAvgSList:[],
+          YearAvgSListwidth:0,
+          leftData_t:[
+            {Name:'平均付款人数(天)',DataObj:'MAvgPeopleNum'},
+            {Name:'平均付款单数',DataObj:'MAvgOrderNum'},
+            {Name:'平均付款金额',DataObj:'MAvgPayMoney'},
+            {Name:'平均付款件数',DataObj:'MAvgBuyNum'},
+            {Name:'平均每人购买单数',DataObj:'PAvgOrderNum'},
+            {Name:'平均每人购买件数',DataObj:'PAvgBuyNum'},
+            {Name:'平均每单单价',DataObj:'PAvgBuyPrice'},
+            {Name:'平均每人购买单价',DataObj:'PAvgUnitPrice'},
+            {Name:'平均会员数',DataObj:'PAvgMemberNum'},
+            {Name:'平均累计人数(月)',DataObj:'PAvgPaymentNum'},
+            {Name:'平均会员下订单转换率',DataObj:'PAvgMOrderRate'},
+            {Name:'平均复购人数',DataObj:'PAvgReBuyNum'},
+            {Name:'平均复购率',DataObj:'PAvgReBuyRate'},
+            {Name:'平均新人下单',DataObj:'PAvgNewPeopleNum'},
+            {Name:'毛利率',DataObj:'PAvgProfitRate'},
+          ],
+          YearRateSList:[],
+          YearRateSListwidth:0,
+          leftData_tr:[
+            {Name:'平均付款人数成长率',DataObj:'MAvgPeopleNum'},
+            {Name:'平均付款单数成长率',DataObj:'MAvgOrderNum'},
+            {Name:'平均付款金额成长率(天)',DataObj:'MAvgPayMoney'},
+            {Name:'平均付款件数成长率',DataObj:'MAvgBuyNum'},
+            {Name:'平均每人购买单数成长率',DataObj:'PAvgOrderNum'},
+            {Name:'平均每人购买件数成长率',DataObj:'PAvgBuyNum'},
+            {Name:'平均每单单价成长率',DataObj:'PAvgUnitPrice'},
+            {Name:'平均每人购买单价成长率',DataObj:'PAvgBuyPrice'},
+            {Name:'毛利成长率',DataObj:'PAvgProfit'},
+            {Name:'会员下订单成长率',DataObj:'PAvgMOrderRate'},
+            {Name:'普象会员成长率',DataObj:'PAvgPXNum'},
+            {Name:'VIP会员成长率',DataObj:'PAvgVipNum'},
+            {Name:'银象会员成长率',DataObj:'PAvgYXNum'},
+            {Name:'金象会员成长率',DataObj:'PAvgJXNum'},
+            {Name:'会员成长率',DataObj:'PAvgTotalMNum'},
+          ],
+        }
+      },
+      created() {
+          let nowtime = new Date()
+          this.msg.StartYear = (nowtime.getFullYear()-1).toString()
+          this.msg.EndYear = nowtime.getFullYear().toString() 
+          this.getDateList()
+      },
+      methods: {
+        getmonth(e){
+          this.getDateList()
+        },
+        getDateList() {
+          if(this.msg.StartYear =='' || this.msg.EndYear ==''){
+            this.Info('请选择开始或者结束年份')
+              return
+          }
+          if((new Date(this.msg.StartYear).getTime())>=(new Date(this.msg.EndYear)).getTime()){
+            this.msg.EndYear='';
+            this.Info('结束年份不能大于开始年份')
+            return
+          }
+          if((new Date(this.msg.EndYear).getTime())>=(new Date()).getTime()){
+            this.msg.EndYear='';
+            this.Info('结束年份不能大于今年')
+            return
+          }
+          this.loading = true;
+          this.RateList=[];
+          this.mallapipost("/api/LiveHouse/GetDSYearStartistics", this.msg, res => {
+            this.loading = false;
+            if (res.data.resultCode == 1) {
+                if(res.data.data){
+                    this.YearSList = res.data.data.YearSList;
+                    this.YearSList.forEach(x=>{
+                        if(x.Date.indexOf('成長率')!=-1){
+                            x.PeopleNum = x.PeopleNum+'%';
+                            x.OrderNum = x.OrderNum+'%';
+                            x.PayMoney = x.PayMoney+'%';
+                            x.BuyNum = x.BuyNum+'%';
+                            x.TotalPayPeople = x.TotalPayPeople+'%';
+                            x.MAvgPeopleNum = x.MAvgPeopleNum+'%';
+                            x.Profit = x.Profit+'%';
+                            x.PXNum = x.PXNum+'%';
+                            x.VipNum = x.VipNum+'%';
+                            x.YXNum = x.YXNum+'%';
+                            x.JXNum = x.JXNum+'%';
+                            x.TotalMNum = x.TotalMNum+'%';
+                        }
+                    })
+                    this.YearSListwidth  =  (this.YearSList.length * 120);
+                    //第二张表
+                    this.YearAvgSList = res.data.data.YearAvgSList;
+                    this.YearAvgSList.forEach(x=>{
+                        x.PAvgMOrderRate = x.PAvgMOrderRate+'%';
+                        if(x.Date.indexOf('成長率')!=-1){
+                            x.MAvgPeopleNum = x.MAvgPeopleNum+'%';
+                            x.MAvgOrderNum = x.MAvgOrderNum+'%';
+                            x.MAvgPayMoney = x.MAvgPayMoney+'%';
+                            x.MAvgBuyNum = x.MAvgBuyNum+'%';
+                            x.PAvgOrderNum = x.PAvgOrderNum+'%';
+                            x.PAvgBuyNum = x.PAvgBuyNum+'%';
+                            x.PAvgBuyPrice = x.PAvgBuyPrice+'%';
+                            x.PAvgUnitPrice = x.PAvgUnitPrice+'%';
+                            x.PAvgMemberNum = x.PAvgMemberNum+'%';
+                            x.PAvgPaymentNum = x.PAvgPaymentNum+'%';
+                            x.PAvgMOrderRate = x.PAvgMOrderRate+'%';
+                            x.PAvgReBuyNum = x.PAvgReBuyNum+'%';
+                            x.PAvgReBuyRate = x.PAvgReBuyRate+'%';
+                            x.PAvgNewPeopleNum = x.PAvgNewPeopleNum+'%';
+                            x.PAvgProfitRate = x.PAvgProfitRate+'%';
+                        }
+                    })
+                    this.YearAvgSListwidth  =  (this.YearAvgSList.length * 120)
+                    //第三张表
+                    this.YearRateSList = res.data.data.YearRateSList;
+                    this.YearRateSListwidth  =  (this.YearRateSList.length * 120)
+               
+                }
+              
+             
+            } else {
+              this.Info(res.data.message);
+            }
+  
+          })
+        },
+     
+     
+      
+        Export() {
+          let msg = this.msg
+          msg = JSON.parse(JSON.stringify(msg));
+          this.GetMallLocalFile(
+            "/api/LiveHouse/GetDSYearStartisticsToExcel",
+            msg,
+            "电商年度比统计.xls"
+          );
+        },
+  
+  
+  
+   
+      
+        getisred(dataInfo){
+          if((dataInfo.toString()).indexOf('-')!=-1){
+            return true
+          }else{
+            return false
+          }
+          
+        },
+        onInput() {
+          this.$forceUpdate()
+
+        },
+        tableRowClassName({row, rowIndex}){
+          if(row.hasOwnProperty('Date') && row.Date=='平均/总计' ){
+            return 'huanbichengz'
+          }else{
+            return 'monthstyel'
+          }
+        },
+        tableRowClassName2({row, rowIndex}){
+          if(row.hasOwnProperty('Date') && row.Date=='平均/总计' ){
+            return 'monthstyel2'
+          }else{
+            return 'monthstyel3'
+          }
+        },
+     
+      }
+    }
+  
+  </script>
+  
+  <style>
+    .dianshangyeardata .el-card__header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      background: #fff;
+      padding: 18px 20px;
+    }
+  
+    .dianshangyeardata .el-button--small {
+      padding: 9px 15px;
+    }
+  
+    .dianshangyeardata .content .searchInput {
+      border: 1px solid #DCDFE6;
+      border-radius: 4px;
+      margin-left: 20px;
+    }
+  
+    .dianshangyeardata .content .searchInput .el-input__inner {
+      border: none;
+      outline: none;
+      height: 30px;
+      line-height: 30px;
+    }
+  
+    .dianshangyeardata .content .searchInput {
+      line-height: normal;
+      display: inline-table;
+      border-collapse: separate;
+      border-spacing: 0;
+      width: 250px;
+      margin-right: 20px;
+  
+    }
+  
+    .dianshangyeardata .content {
+      background: #fff;
+      margin-top: 10px;
+      padding: 15px;
+      box-sizing: border-box;
+    }
+  
+    .dianshangyeardata .el-icon-date {
+      line-height: 24px;
+    }
+  
+    .dianshangyeardata .el-range-separator {
+      line-height: 24px;
+    }
+  
+    .dianshangyeardata .just {
+      color: rgb(104, 207, 61)
+    }
+  
+    .dianshangyeardata .negative {
+      color: red
+    }
+  
+    .dianshangyeardata .el-input__icon {
+      line-height: 24px;
+    }
+  
+    .dianshangyeardata .el-table td,
+    .el-table th {
+      padding: 3px 0;
+    }
+  
+    .dianshangyeardata .el-table {
+      font-size: 13px;
+    }
+  
+    .dianshangyeardata .el-select__tags-text {
+      display: inline-block;
+      width: 40px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  
+    .dianshangyeardata .el-select__tags {
+      max-width: 400px;
+    }
+  
+    .dianshangyeardata .Subtotal {
+      width: 100%;
+      margin: 10px 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      background: #f2f2f2;
+      font-size: 12px;
+    }
+  
+    .dianshangyeardata .Subtotal_item {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      margin-left: 50px;
+      background: #fff;
+      padding: 20px;
+    }
+  
+    .dianshangyeardata .Subtotal_item .Subtotal_t {
+      margin: 3px 0;
+      font-size: 12px;
+      width: 90px;
+      display: inline-block;
+    }
+  
+    .dianshangyeardata .ProfitLoss {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      background: #fff;
+    }
+  
+    .dianshangyeardata .ProfitLoss_xbox {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      background: #fff;
+    }
+    .dianshangyeardata .diaBox{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .dianshangyeardata  .angclass{
+      background: #FDC022;
+    }
+    .dianshangyeardata .el-table .huanbichengz{
+      background: #EB60BB;
+    }
+    .dianshangyeardata  .qthuanbicheng{
+      background: #FEFF30;
+      width: 90px;
+    }
+    .dianshangyeardata .el-table .monthstyel{
+      background: #F6C8AB;
+    }
+    .dianshangyeardata .el-table .monthstyel2{
+      background: #F6CAAD;
+    }
+    .dianshangyeardata .el-table .monthstyel3{
+      background: #FE9A6B;
+    }
+    
+    .dianshangyeardata .el-table .whitestyle{
+      background: #FFF;
+    }
+
+    .dianshangyeardata .el-date-editor.el-input, .el-date-editor.el-input__inner {
+        width: 360px;
+    }
+    .dianshangyeardata .singeRowTable{
+        background: rgb(255, 255, 255);
+        margin-top: 20px;
+    }   
+    .dianshangyeardata .growthrate{
+        background: #FFF2CD;
+    }
+  
+  </style>
+  
\ No newline at end of file

src/components/FinancialModule/ReportForm/dianshangyeardata.vue

@@ -38,9 +38,12 @@
       </div>
       <div style="padding: 15px ;background: #FFF;">
    
-        <el-table :data="DataList" v-loading="loading"  header-cell-class-name="headClass" style="width: 100%;" border :row-class-name="tableRowClassName" :cell-style="columnStyle">
+        <el-table :data="DataList" v-loading="loading"  header-cell-class-name="headClass" header-row-class-name='angclass' style="width: 100%;" border :row-class-name="tableRowClassName" :cell-style="columnStyle">
           <el-table-column label="月份" prop="Date" width='80' fixed>
-           
+            <template slot-scope="scope">
+              <span v-if="scope.row.Date == '平均/总计'" >平均</span>
+              <span v-else>{{scope.row.Date}}</span>
+            </template>
           </el-table-column>
           <el-table-column label="平均付款人数(天)" prop='MAvgPeopleNum' width='125'>
             <template slot-scope="scope">
@@ -132,7 +135,14 @@
               <span v-else>{{scope.row.PAvgProfitRate}}</span>
             </template>
           </el-table-column>       
-
+      </el-table>
+      <el-table :data="DataList" v-loading="loading"  header-cell-class-name="headClass" header-row-class-name='angclass' style="width: 100%;margin-top: 20px;" border :row-class-name="tableRowClassName2" :cell-style="columnStyle">
+        <el-table-column label="月份" prop="Date" width='80' fixed>
+          <template slot-scope="scope">
+            <span v-if="scope.row.Date == '平均/总计'" >总计</span>
+            <span v-else>{{scope.row.Date}}</span>
+          </template>
+        </el-table-column>
         <el-table-column label="付款人数累计" prop="PeopleNum" width='120'>
           <template slot-scope="scope">
             <span v-if="getisred(scope.row.PeopleNum) == true" style="color: #FD0F05;">{{scope.row.PeopleNum}}</span>
@@ -358,6 +368,7 @@
             return
           }
           this.loading = true;
+          this.RateList=[];
           this.mallapipost("/api/LiveHouse/GetDSMoreMonthStatistics", this.msg, res => {
             this.loading = false;
             if (res.data.resultCode == 1) {
@@ -411,12 +422,19 @@
 
         },
         tableRowClassName({row, rowIndex}){
-          if(row.hasOwnProperty('Date') && row.Date=='平均' ){
+          if(row.hasOwnProperty('Date') && row.Date=='平均/总计' ){
             return 'huanbichengz'
           }else{
             return 'monthstyel'
           }
         },
+        tableRowClassName2({row, rowIndex}){
+          if(row.hasOwnProperty('Date') && row.Date=='平均/总计' ){
+            return 'monthstyel2'
+          }else{
+            return 'monthstyel3'
+          }
+        },
         columnStyle({row, column, rowIndex, columnIndex}){
           if(row.hasOwnProperty('DateStr') && (columnIndex==1|| columnIndex==2||columnIndex==3||columnIndex==4)){
               return 'background:#FFF;'
@@ -558,7 +576,7 @@
       flex-direction: column;
       align-items: center;
     }
-    .dianshangyeardata .el-table .angclass{
+    .dianshangyeardata  .angclass{
       background: #FDC022;
     }
     .dianshangyeardata .el-table .huanbichengz{
@@ -571,6 +589,13 @@
     .dianshangyeardata .el-table .monthstyel{
       background: #F6C8AB;
     }
+    .dianshangyeardata .el-table .monthstyel2{
+      background: #F6CAAD;
+    }
+    .dianshangyeardata .el-table .monthstyel3{
+      background: #FE9A6B;
+    }
+    
     .dianshangyeardata .el-table .whitestyle{
       background: #FFF;
     }

src/router/config.js

@@ -3956,9 +3956,18 @@ export default {
               name: 'dianshangyeardata',
               component: resolve => require(['@/components/FinancialModule/ReportForm/dianshangyeardata'], resolve),
               meta: {
-                title: '电商数据'
+                title: '年度电商数据'
+              },
             },
+            { //财务 电商年度比数据
+              path: '/dianshangannualRatio',
+              name: 'dianshangannualRatio',
+              component: resolve => require(['@/components/FinancialModule/ReportForm/dianshangannualRatio'], resolve),
+              meta: {
+                title: '电商年度比数据'
               },
+            },
+            
             { //财务 线路收客
               path: '/LineReceiver',
               name: 'LineReceiver',