增加统计

src/components/viitto/saleGuestTable.vue

+<style>
+.salesGuest{
+  height: 100%;
+  width: 100%;
+  background-color: #1D243D;
+}
+.salesGuest .nav{
+  padding: 25px 45px;
+  background-color: #252D48;
+}
+.salesGuest .nav .name {
+  font-size: 30px;
+  font-weight: 700;
+  color: #fff;
+  text-align: right;
+  font-family: 'pingfangR';
+}
+.salesGuest .content{
+  height: 88%;
+  /* height: calc(100vh - 122px); */
+  padding: 30px 40px;
+  box-sizing: border-box;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.salesGuest .content .el-row,.salesGuest .content .el-row .el-col{
+  height: 100%;
+}
+.salesSkMap {
+    width: 180px;
+    height: 34px;
+    background: -webkit-gradient(linear,left top, right top,from(rgba(147, 69, 248, 1)),to(rgba(63, 210, 243, 1)));
+    background: linear-gradient(90deg,rgba(147, 69, 248, 1),rgba(63, 210, 243, 1));
+    border-radius: 6px;
+    color: white;
+    text-align: center;
+    line-height: 34px;
+    display: inline-block;
+    margin-right: -17px;
+    position: relative;
+}
+.SalesNoCked {
+    width: 180px;
+    height: 34px;
+    background-color: #1B2239;
+    color:#4D546A;
+    border-radius: 6px;
+    text-align: center;
+    line-height: 34px;
+    display: inline-block;
+    font-family: PINGFANG REGULAR;
+    cursor: pointer;
+    margin-top:5px;
+}
+.salesTable{
+    width:100%;
+    height:100%;
+    border-radius:4px;
+    padding:0 10px;
+    background-color: #212744;
+}
+.salesTable td,.salesTable th{
+    text-align: left;
+}
+.salesTable tr{
+    height:40px;
+}
+.salesTable th,.salesTable td{
+    height:40px;
+    font-size:12px;
+}
+.salescomSpan{
+    display:inline-block;
+    padding:5px 20px;
+    border-radius: 18px;
+    color:#fff;
+    font-size:15px;
+    background-color: #2B314E;
+}
+.salesTable tr:nth-child(even){
+    background-color: #252B48;
+}
+.salesTable tr:hover{
+    background-color: #2B314E;
+}
+.saleSecondTh th{
+    color:#8089B4;
+    width:70px;
+}
+.totalMoney{
+    color:#EF4957;
+    font-size:12px;
+}
+.guestNum{
+    font-size:12px;
+    color:#4BD7AA;
+}
+</style>
+<template>
+  <div class="salesGuest">
+    <div class="nav">
+      <el-row :gutter="70">
+        <el-col :span="18">
+          <el-row :gutter="70">
+            <el-col :span="8">
+                <div class="salesSkMap">销售收客表格</div>
+                <div class="SalesNoCked" @click="goSalesMap()">销售收客视图</div>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="6" class="name">
+          印象之旅线路看板
+        </el-col>
+      </el-row>
+    </div>
+    <div class="content" >
+        <table class="salesTable" style="border-collapse:collapse; border-spacing:0;">
+            <tr class="saleFirstth">
+                <th width="80"><span class="salescomSpan" style="padding:5px 15px;">日期</span></th>
+                <th colspan="2" v-for="item in companyList"><span class="salescomSpan">{{item.OutBranchName}}</span></th>
+            </tr>
+            <tr class="saleSecondTh">
+                    <th></th>
+                    <th>销售额</th>
+                    <th>收客人数</th>
+                    <th>销售额</th>
+                    <th>收客人数</th>
+                    <th>销售额</th>
+                    <th>收客人数</th>
+                    <th>销售额</th>
+                    <th>收客人数</th>
+                    <th>销售额</th>
+                    <th>收客人数</th>
+                    <th>销售额</th>
+                    <th>收客人数</th>
+                    <th>销售额</th>
+                    <th>收客人数</th>
+                    <th>销售额</th>
+                    <th>收客人数</th>
+                    <th>销售额</th>
+                    <th>收客人数</th>
+                    <th>销售额</th>
+                    <th>收客人数</th>
+                    <th>销售额</th>
+                    <th>收客人数</th>
+                    <th>销售额</th>
+                    <th>收客人数</th>
+                    <th>销售额</th>
+                    <th>收客人数</th>
+                </th>
+            </tr> 
+            <tr v-for="item in dataList">
+                <td><span style="color:#fff;padding-left:15px;">{{item.month}}月</span></td>
+                <template v-for="subItem in item.List">
+                    <td><span class="totalMoney">{{subItem.PreferPrice}}</span></td>
+                    <td><span class="guestNum">{{subItem.GuestNum}}</span></td>
+                </template>
+            </tr>
+        </table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data(){
+    return {
+        loading:false,
+        dataList:[],
+        msg:{
+            yearstr:0,
+            monthstr:0,
+            outbranchid:-1
+        },
+        companyList:[],
+    }
+  },
+  watch: {
+
+  },created(){
+      
+  },mounted() {
+    this.msg.yearstr=this.$route.query.year;
+    this.msg.monthstr=this.$route.query.month;
+    this.getList();
+  },methods:{
+    getList(){
+        let url='http://47.96.23.199:5001/api/order/get_sale_numandpreferprice_statistics'
+        this.apiRequest(url,{msg:this.msg},r=>{
+            if(r.data.resultCode==1){
+                let data = r.data.data;
+                this.getCompany(data);
+                let tempArr = [];
+                for (let i = 0; i < data.length; i++) {
+                    if (tempArr.indexOf(data[i].MonthStr) === -1) {
+                        this.dataList.push({
+                            month: data[i].MonthStr,
+                            List: [data[i]]
+                        });
+                        tempArr.push(data[i].MonthStr);
+                    } else {
+                        for (let j = 0; j < this.dataList.length; j++) {
+                            if (this.dataList[j].month == data[i].MonthStr) {
+                                this.dataList[j].List.push(data[i]);
+                                break;
+                            }
+                        }
+                    }
+                }
+                //数量不够push空
+                this.dataList.forEach(x=>{
+                    if(x.List.length<this.companyList.length){
+                        for(var i=0;i<this.companyList.length-x.List.length;i++){
+                            x.List.push({
+                                GuestNum:'',
+                                MonthStr:'',
+                                OutBranchName:'',
+                                PreferPrice:'',
+                                RB_Branch_Id:'',
+                                YearStr:''
+                            })
+                        }
+                    }
+                })
+            }
+        })
+    },
+    //去重获取公司
+    getCompany(dataList){
+        this.companyList = [];
+        var obj = {};
+        for(var i =0; i<dataList.length; i++){
+            if(!obj[dataList[i].OutBranchName]){
+                this.companyList.push(dataList[i]);
+                obj[dataList[i].OutBranchName] = true;
+            }
+        }
+    },
+    //点击跳转
+    goSalesMap(){
+        window.location="http://192.168.0.116:8080/#/salesGuestList"
+    }
+  }
+}
+</script>
\ No newline at end of file

src/router.js

@@ -8,6 +8,8 @@ import dataLook from './components/viitto/dataLook'
 import saleDataLook from './components/viitto/saleDataLook'
 import PerCompetition from './components/viitto/PerCompetition'
 import ActivityBoard from './components/viitto/ActivityBoard'
+import salesGuestList from './components/viitto/salesGuestList'
+import saleGuestTable from './components/viitto/saleGuestTable'
 
 Vue.use(Router)
 
@@ -62,5 +64,15 @@ export default new Router({
       name: 'ActivityBoard',
       component: ActivityBoard,
     },
+    {
+      path: '/salesGuestList',
+      name: 'salesGuestList',
+      component: salesGuestList,
+    },
+    {
+      path: '/saleGuestTable',
+      name: 'saleGuestTable',
+      component: saleGuestTable
+    }
   ]
 })