'表格调整'

src/api/channel.js

@@ -23,3 +23,11 @@ export function addChannelList (data) {
     data,
   })
 }
+// 获取渠道下的产品包
+export function getProductList (params) {
+  return request({
+    url: '/package',
+    method: 'get',
+    params
+  })
+}

src/pages/order/Order.vue

@@ -5,7 +5,7 @@
         <div class="leftForm">
           <div class="channelForm">
             渠道选择：
-            <el-select v-model="orderParams.channelCode" placeholder="请选择渠道">
+            <el-select v-model="orderParams.channelCode" @change="channelChange" placeholder="请选择渠道">
               <el-option
                 v-for="item in channeList.list"
                 :key="item.code"
@@ -15,19 +15,53 @@
 
             </el-select>
           </div>
+          <div class="channelForm" v-if="orderParams.channelCode">
+            产品包选择：
+            <el-select v-model="orderParams.packageId" placeholder="请选择产品包">
+              <el-option
+                v-for="item in productList"
+                :key="item.id"
+                :label="item.title"
+                :value="item.id"
+              ></el-option>
+
+            </el-select>
+          </div>
           <div class="dateForm">
             查询日期：
             <el-date-picker v-model="orderParams.startDate" type="date" placeholder="起"></el-date-picker>
             <el-date-picker v-model="orderParams.endDate" type="date" placeholder="止"></el-date-picker>
           </div>
         </div>
+        
         <el-button type="primary" style="float: right;" @click="search">搜索</el-button>
       </div>
       <el-table :data="orderList" border style="width: 100%" >
         <el-table-column label="日期" prop="day" align="left" header-align="center"></el-table-column>
+        <el-table-column label="流量与观看" header-align="center">
         <el-table-column label="产品包名称" prop="packageTitle" align="left" header-align="center"></el-table-column>
         <el-table-column label="UV" prop="uv" align="right" header-align="center"></el-table-column>
         <el-table-column label="VV" prop="pv" align="right" header-align="center"></el-table-column>
+
+
+
+        <el-table-column
+          label="VIP用户UV1"
+          align="right"
+          header-align="center"
+          :render-header="renderheader"
+          prop="vipUv"
+        ></el-table-column>
+        <el-table-column
+          label="非VIP用户UV2 | =UV-UV1"
+          align="right"
+          header-align="center"
+          :render-header="renderheader"
+          prop="waitVipUv"
+        ></el-table-column>
+
+
+
         <el-table-column
           label="人均播放 | =VV/UV"
           align="right"
@@ -35,6 +69,16 @@
           :render-header="renderheader"
           prop="perCapitaPlay"
         ></el-table-column>
+
+        <el-table-column
+          label="VIP用户占比 | =UV1/UV"
+          align="right"
+          header-align="center"
+          :render-header="renderheader"
+          prop="vipProportion"
+        ></el-table-column>
+
+
         <el-table-column
           label="连续包月 | -Qm1"
           align="right"
@@ -84,6 +128,9 @@
           :render-header="renderheader"
           prop="totalConversion"
         ></el-table-column>
+
+        </el-table-column>
+        
       </el-table>
       <!-- <el-pagination
       v-if="orderList.totalElements"
@@ -136,7 +183,8 @@ export default {
       orderParams: {
         channelCode: "",
         startDate: "",
-        endDate: ""
+        endDate: "",
+        packageId: ""
       },
       formatTime: (row, column) => {
         let date = new Date(row.gmtCreated);
@@ -167,12 +215,14 @@ export default {
   computed: {
     ...mapGetters({
       channeList: "channeList",
-      orderList: "orderList"
+      orderList: "orderList",
+      productList: 'productList'
     })
   },
   created() {
     this.$store.dispatch("getChannelList", { pageNo: "", pageSize: "" });
     this.$store.dispatch("getOrderList", this.orderParams);
+    console.log(123321,this.channeList)
     this.orderParams.startDate = this.getYesterDay();
     this.orderParams.endDate = this.getYesterDay();
   },
@@ -194,6 +244,12 @@ export default {
       this.orderParams.pageNo = e;
       this.$store.dispatch("getRelationList", this.orderParams);
     },
+    channelChange(val){
+      // this.$store.dispatch("clearProductList");
+      this.orderParams.packageId = "";
+      this.$store.dispatch("getProductList", { channelCode : val });
+      console.log(456464,this.productList)
+    },
     // 表头折行
     renderheader(h, { column, $index }) {
       return h("span", {}, [
@@ -230,6 +286,7 @@ export default {
   display: flex;
   align-items: center;
   flex-direction: row;
+  justify-content: space-between;
 }
 .dateForm {
   margin-left: 18px;

src/store/getter.js

@@ -1,6 +1,7 @@
 const getters = {
   flag: state => state.login.flag,
   channeList: state => state.channel.channeList,
+  productList: state => state.channel.productList,
   courseList: state => state.course.courseList,
   relationList: state => state.relation.relationList,
   orderList: state => state.order.orderList,

src/store/modules/channel.js

@@ -1,15 +1,19 @@
-import { getChannelList, setChannelList, addChannelList } from '../../api/channel';
+import { getChannelList, setChannelList, addChannelList,getProductList } from '../../api/channel';
 
 const channel = {
   state: {
-    channeList: {}
+    channeList: {},
+    productList:[]
   },
   mutations: {
     GET_CHANNEL_LIST: (state, data) => {
       data.list.unshift({title:'全部',code:''})
-      console.log(1111111111,data)
       state.channeList = data
-    }
+    },
+    GET_PRODUCT_LIST: (state,data) =>{
+      state.productList = data
+    },
+
   },
   actions: {
     getChannelList({dispatch, commit }, data) {
@@ -51,6 +55,22 @@ const channel = {
         })
       })
     },
+    getProductList({dispatch, commit }, data) {
+      return new Promise((resolve, reject) => {
+        getProductList(data).then(res => {
+          if(res.code == 200) {
+            console.log(111,res.data)
+            resolve(res.data);
+            commit('GET_PRODUCT_LIST', res.data)
+          }
+        }).catch(error => {
+          reject(error);
+        })
+      })
+    },
+    clearProductList({dispatch, commit }) {
+      return commit('GET_PRODUCT_LIST', [])
+    }
   }
 }