|
|
@@ -0,0 +1,294 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-card>
|
|
|
+ <el-form :model="efunParams" ref="efunParams" class="clearfix topForm">
|
|
|
+ <div class="leftForm-skill">
|
|
|
+ <el-form-item
|
|
|
+ style="display:flex;"
|
|
|
+ prop="channel"
|
|
|
+ name="channel"
|
|
|
+ :rules="[{ required: true, message: '请选择渠道', trigger: 'blur' }]"
|
|
|
+ label="渠道选择"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="efunParams.channel"
|
|
|
+ style="width:160px"
|
|
|
+ placeholder="请选择渠道"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in efunChannelList"
|
|
|
+ :key="item.code"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.code"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item class="dateForm-skill" name="data" label="查询日期" style="display:flex">
|
|
|
+ <el-date-picker
|
|
|
+ style="width:140px"
|
|
|
+ v-model="efunParams.startDate"
|
|
|
+ type="date"
|
|
|
+ placeholder="起"
|
|
|
+ ></el-date-picker>
|
|
|
+ <el-date-picker
|
|
|
+ style="width:140px"
|
|
|
+ v-model="efunParams.endDate"
|
|
|
+ type="date"
|
|
|
+ placeholder="止"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="submitForm('efunParams')">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table :data="channelData" border style="width: 100%" :height="tableHeight">
|
|
|
+ <el-table-column
|
|
|
+ label="日期"
|
|
|
+ prop="day"
|
|
|
+ fixed
|
|
|
+ align="left"
|
|
|
+ header-align="center"
|
|
|
+ min-width="120px"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column label="流量与观看" header-align="center">
|
|
|
+ <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="vv"
|
|
|
+ align="right"
|
|
|
+ header-align="center"
|
|
|
+ min-width="100px"
|
|
|
+ ></el-table-column>-->
|
|
|
+ <el-table-column
|
|
|
+ label="VV"
|
|
|
+ align="right"
|
|
|
+ header-align="center"
|
|
|
+ :render-header="renderheader"
|
|
|
+ prop="totalPlay"
|
|
|
+ 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>
|
|
|
+
|
|
|
+ <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"
|
|
|
+ ></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>
|
|
|
+ </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";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableHeight: 500,
|
|
|
+ dateValue: "",
|
|
|
+ efunParams: {
|
|
|
+ startDate: "",
|
|
|
+ endDate: "",
|
|
|
+ channel: ""
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ channel: [{ required: true, trigger: "blur" }],
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({
|
|
|
+ efunChannelList: "efunChannelList",
|
|
|
+ channelData: "channelData",
|
|
|
+ })
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$store.dispatch("getEfunChannelList",'PHONE');
|
|
|
+ this.efunParams.startDate = this.getYesterDay();
|
|
|
+ this.efunParams.endDate = this.getYesterDay();
|
|
|
+
|
|
|
+ this.tableHeight = document.documentElement.clientHeight * 0.75;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 搜索
|
|
|
+ submitForm(formName) {
|
|
|
+ this.efunParams.startDate = this.efunParams.startDate
|
|
|
+ ? formatDate(this.efunParams.startDate, 2)
|
|
|
+ : "";
|
|
|
+ this.efunParams.endDate = this.efunParams.endDate
|
|
|
+ ? formatDate(this.efunParams.endDate, 2)
|
|
|
+ : "";
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
+ console.log(valid,123123123)
|
|
|
+ if (valid) {
|
|
|
+ this.$store.dispatch("getChannelData", this.efunParams);
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 渠道下课程分页
|
|
|
+ changePage(e) {
|
|
|
+ this.efunParams.pageNo = e;
|
|
|
+ this.$store.dispatch("getChannelData", this.efunParams);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 表头折行
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ columnZero() {
|
|
|
+ return "0";
|
|
|
+ },
|
|
|
+ columnZeroPercent(row, column, index) {
|
|
|
+ if (row.totalPayment && column.property === "yearlyConversion") {
|
|
|
+ return "100.00%";
|
|
|
+ } else {
|
|
|
+ return "0.00%";
|
|
|
+ }
|
|
|
+ // if(row.)
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.pruductForm-skill {
|
|
|
+ margin-left: 10px;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.topForm {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-shrink: 0;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.leftForm-skill {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.dateForm-skill {
|
|
|
+ margin-left: 18px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
