efunbox_resources-web/src/pages/order/Order.vue

<template>
  <div class="course">
    <el-card class="box-card">
      <div slot="header" class="clearfix topForm">
        <div class="leftForm">
          <div class="channelForm">
            渠道选择：
            <el-select
              v-model="orderParams.channelCode"
              @change="channelChange"
              style="width:160px"
              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">
            产品包选择：
            <el-select style="width:160px" 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 style="width:140px" v-model="orderParams.startDate" type="date" placeholder="起"></el-date-picker>
            <el-date-picker style="width:140px" v-model="orderParams.endDate" type="date" placeholder="止"></el-date-picker>
          </div>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
        <el-button type="primary" @click="onExportExcel" style="float: right">导出</el-button>
      </div>
      <el-table id="table" :data="orderList" border style="width: 100%" :height="tableHeight">
        <el-table-column label="日期" fixed prop="day" align="left" header-align="center" min-width="140px">
            <template slot-scope="scope">
                <span>{{changeDate(scope.row.day)}}</span>
            </template>
        </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="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="新增连续包月 | -Qm1-1"
            align="right"
            header-align="center"
            :render-header="renderheader"
            min-width="140px"
          >
              <template slot-scope="scope">
                  <span>{{scope.row.appendConsecutiveMonthly || 0}}</span>
              </template>
          </el-table-column>
          <el-table-column
            label="续包月续费 | -Qm1-2"
            align="right"
            header-align="center"
            :render-header="renderheader"
            min-width="140px"
          >
              <template slot-scope="scope">
                  <span>{{scope.row.continueConsecutiveMonthly || 0}}</span>
              </template>
          </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="付费订单数量| Q=Qm1+Qm2+Qy"
            align="right"
            header-align="center"
            :render-header="renderheader"
            prop="totalPayment"
            min-width="160px"
          ></el-table-column>
          // 连续包月占比
          <el-table-column 
            label="r1 | =Qm1/Q" 
            align="right"
            header-align="center"
            :render-header="renderheader"
            prop="consecutiveConversion"
            min-width="130px"
          ></el-table-column>
          // 月包占比
          <el-table-column
            label="r2 | =Qm2/Q"
            align="right"
            header-align="center"
            :render-header="renderheader"
            prop="monthlyConversion"
            min-width="130px"
          ></el-table-column>
          // 年包占比
          <el-table-column
            label="r3 | =Qy/Q"
            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
            label="R1 | =(Qm1-1+Qm2+Qy)/UV2"
            align="right"
            header-align="center"
            :render-header="renderheader"
            min-width="190px"
          >
              <template slot-scope="scope">
                  <span>{{scope.row.appendTotalConversion || 0}}</span>
              </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
      v-if="orderList.totalElements"
      background
      layout="prev, pager, next"
      :total="orderList.totalElements"
      @current-change="changePage">
      </el-pagination>-->
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import formatDate from "../../utils/formatTime";
import downTable from '@/utils/downTable'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      tableHeight: 500,
      dateValue: "",
      orderParams: {
        channelCode: "",
        startDate: "",
        endDate: "",
        packageId: ""
      },
      formatTime: (row, column) => {
        let date = new Date(row.gmtCreated);
        let Y = date.getFullYear() + "-";
        let M =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1) + "-"
            : date.getMonth() + 1 + "-";
        let D =
          date.getDate() < 10
            ? "0" + date.getDate() + " "
            : date.getDate() + " ";
        let h =
          date.getHours() < 10
            ? "0" + date.getHours() + ":"
            : date.getHours() + ":";
        let m =
          date.getMinutes() < 10
            ? "0" + date.getMinutes() + ":"
            : date.getMinutes() + ":";
        let s =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        return Y + M + D + h + m + s;
      }
      // orderList:[]
    };
  },
  computed: {
    ...mapGetters({
      channeList: "channeList",
      orderList: "orderList",
      productList: "productList"
    })
  },
  created() {
    this.$store.dispatch("getChannelList", { pageNo: "", pageSize: "" });
    // this.$store.dispatch("getOrderList", this.orderParams);
    this.orderParams.startDate = this.getYesterDay();
    this.orderParams.endDate = this.getYesterDay();
    console.log(
      "document.documentElement.clientHeight",
      document.documentElement.clientHeight
    );
    this.tableHeight = document.documentElement.clientHeight * 0.75;
  },
  methods: {
    // 搜索
    search() {
      this.orderParams.startDate = this.orderParams.startDate
        ? formatDate(this.orderParams.startDate, 2)
        : "";
      this.orderParams.endDate = this.orderParams.endDate
        ? formatDate(this.orderParams.endDate, 2)
        : "";
      this.$store.dispatch("getOrderList", this.orderParams);
    },
    // 渠道下课程分页
    changePage(e) {
      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", {}, [
        h("span", {}, column.label.split("|")[0]),
        h("br"),
        h("span", {}, column.label.split("|")[1])
      ]);
    },
    getYesterDay() {
      let yesterday = new Date().getTime() - 86400000;
      return formatDate(yesterday, 2);
    },
    changeDate(date) {
      return formatDate(date, 4)
    },
    // 导出表格
    onExportExcel() {
        const nameList = this.channeList.list.filter((item) => item.code === this.orderParams.channelCode)[0]
        const name = (nameList && nameList.title) || ''
        const list = this.productList.filter((item) => item.id === this.orderParams.packageId)[0]
        const productName = list && list.title ? '-' + list.title : ''
        const date = new Date().toLocaleDateString()
        downTable('table', [
          {wch: 15}, // "characters"
          {wch: 6},
          {wch: 15},
          {wch: 20},
          {wch: 20},
          {wch: 6},
          {wch: 15},
          {wch: 15},
          {wch: 20},
          {wch: 20},
          {wch: 10},
          {wch: 10},
          {wch: 25},
          {wch: 10},
          {wch: 10},
          {wch: 10},
          {wch: 20},
          {wch: 25}
        ], name + productName + date)
    },
  }
};
</script>
<style lang="less" scoped>
.el-pagination {
  text-align: center;
  margin-top: 20px;
}
.el-form-item__content {
  width: 50%;
}
.el-input {
  width: 217px;
}
.pruductForm {
  margin-left: 10px;
}
.topForm {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.leftForm {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.dateForm {
  margin-left: 18px;
}
</style>