'表格调整'

src/pages/order/Order.vue

@@ -5,14 +5,17 @@
         <div class="leftForm">
           <div class="channelForm">
             渠道选择：
-            <el-select v-model="orderParams.channelCode" @change="channelChange" placeholder="请选择渠道">
+            <el-select
+              v-model="orderParams.channelCode"
+              @change="channelChange"
+              placeholder="请选择渠道"
+            >
               <el-option
                 v-for="item in channeList.list"
                 :key="item.code"
                 :label="item.title"
                 :value="item.code"
               ></el-option>
-
             </el-select>
           </div>
           <div class="pruductForm" v-if="orderParams.channelCode">
@@ -24,7 +27,6 @@
                 :label="item.title"
                 :value="item.id"
               ></el-option>
-
             </el-select>
           </div>
           <div class="dateForm">
@@ -33,108 +35,120 @@
             <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 :data="orderList" border style="width: 100%">
         <el-table-column label="日期" prop="day" align="left" header-align="center" min-width="120px"></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" min-width="100px"></el-table-column>
-        <el-table-column label="VV" prop="pv" align="right" header-align="center" min-width="100px"></el-table-column>
-        <el-table-column
-          label="VIP用户UV1"
-          align="right"
-          header-align="center"
-          :render-header="renderheader"
-          prop="vipUv"
-          min-width="120px"
-        ></el-table-column>
-        <el-table-column
-          label="非VIP用户UV2 | =UV-UV1"
-          align="right"
-          header-align="center"
-          :render-header="renderheader"
-          prop="waitVipUv"
-          min-width="140px"
-        ></el-table-column>
-        <el-table-column
-          label="人均播放 | =VV/UV"
-          align="right"
-          header-align="center"
-          :render-header="renderheader"
-          prop="perCapitaPlay"
-          min-width="140px"
-        ></el-table-column>
-        <el-table-column
-          label="VIP用户占比 | =UV1/UV"
-          align="right"
-          header-align="center"
-          :render-header="renderheader"
-          prop="vipProportion"
-          min-width="140px"
-        ></el-table-column>
+          <!-- <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"
+            min-width="100px"
+          ></el-table-column>
+
+          <el-table-column
+            label="VIP用户 | UV1"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="vipUv"
+            min-width="120px"
+          ></el-table-column>
+          <el-table-column
+            label="非VIP用户 | UV2=UV-UV1"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="waitVipUv"
+            min-width="140px"
+          ></el-table-column>
+          <el-table-column
+            label="VIP用户占比 | =UV1/UV"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="vipProportion"
+            min-width="140px"
+          ></el-table-column>
+          <el-table-column
+            label="VV"
+            prop="pv"
+            align="right"
+            header-align="center"
+            min-width="100px"
+          ></el-table-column>
+          <el-table-column
+            label="人均播放 | =VV/UV"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="perCapitaPlay"
+            min-width="140px"
+          ></el-table-column>
         </el-table-column>
-        
-  <el-table-column label="拉新，付费与转换率" header-align="center">
-     <el-table-column
-          label="连续包月 | -Qm1"
-          align="right"
-          header-align="center"
-          :render-header="renderheader"
-          prop="consecutiveMonthly"
-          min-width="100px"
-        ></el-table-column>
-        <el-table-column
-          label="月包 | -Qm2"
-          align="right"
-          header-align="center"
-          :render-header="renderheader"
-          prop="monthlyPayment"
-          min-width="90px"
-        ></el-table-column>
-        <el-table-column
-          label="年包 | -Qy"
-          align="right"
-          header-align="center"
-          :render-header="renderheader"
-          prop="yearlyPayment"
-          min-width="90px"
-        ></el-table-column>
-        <el-table-column
-          label="r1 | =Qm1/UV2"
-          align="right"
-          header-align="center"
-          :render-header="renderheader"
-          prop="consecutiveConversion"
-          min-width="130px"
-        ></el-table-column>
-        <el-table-column
-          label="r2 | =Qm2/UV2"
-          align="right"
-          header-align="center"
-          :render-header="renderheader"
-          prop="monthlyConversion"
-          min-width="130px"
-        ></el-table-column>
-        <el-table-column
-          label="r3 | =Qy/UV2"
-          align="right"
-          header-align="center"
-          :render-header="renderheader"
-          prop="yearlyConversion"
-          min-width="130px"
-        ></el-table-column>
-        <el-table-column
-          label="R | =(Qm1+Qm2+Qy)/UV2"
-          align="right"
-          header-align="center"
-          :render-header="renderheader"
-          prop="totalConversion"
-          min-width="190px"
-        ></el-table-column>
-  </el-table-column>
 
+        <el-table-column label="拉新，付费与转换率" header-align="center">
+          <el-table-column
+            label="连续包月 | -Qm1"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="consecutiveMonthly"
+            min-width="100px"
+          ></el-table-column>
+          <el-table-column
+            label="月包 | -Qm2"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="monthlyPayment"
+            min-width="90px"
+          ></el-table-column>
+          <el-table-column
+            label="年包 | -Qy"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="yearlyPayment"
+            min-width="90px"
+          ></el-table-column>
+          <el-table-column
+            label="r1 | =Qm1/UV2"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="consecutiveConversion"
+            min-width="130px"
+          ></el-table-column>
+          <el-table-column
+            label="r2 | =Qm2/UV2"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="monthlyConversion"
+            min-width="130px"
+          ></el-table-column>
+          <el-table-column
+            label="r3 | =Qy/UV2"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="yearlyConversion"
+            min-width="130px"
+          ></el-table-column>
+          <el-table-column
+            label="R | =(Qm1+Qm2+Qy)/UV2"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="totalConversion"
+            min-width="190px"
+          ></el-table-column>
+        </el-table-column>
       </el-table>
       <!-- <el-pagination
       v-if="orderList.totalElements"
@@ -220,7 +234,7 @@ export default {
     ...mapGetters({
       channeList: "channeList",
       orderList: "orderList",
-      productList: 'productList'
+      productList: "productList"
     })
   },
   created() {
@@ -247,11 +261,11 @@ export default {
       this.orderParams.pageNo = e;
       this.$store.dispatch("getRelationList", this.orderParams);
     },
-    channelChange(val){
+    channelChange(val) {
       // this.$store.dispatch("clearProductList");
       this.orderParams.packageId = "";
-      this.$store.dispatch("getProductList", { channelCode : val });
-      console.log(456464,this.productList)
+      this.$store.dispatch("getProductList", { channelCode: val });
+      console.log(456464, this.productList);
     },
     // 表头折行
     renderheader(h, { column, $index }) {
@@ -261,9 +275,9 @@ export default {
         h("span", {}, column.label.split("|")[1])
       ]);
     },
-    getYesterDay(){
+    getYesterDay() {
       let yesterday = new Date().getTime() - 86400000;
-      return formatDate(yesterday,2)
+      return formatDate(yesterday, 2);
     }
   }
 };
@@ -279,7 +293,7 @@ export default {
 .el-input {
   width: 217px;
 }
-.pruductForm{
+.pruductForm {
   margin-left: 10px;
 }
 .topForm {