|
@@ -0,0 +1,431 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-card>
|
|
|
+ <el-form :model="skillParams" ref="skillParams" class="clearfix topForm" style="float: left">
|
|
|
+ <div class="leftForm-skill">
|
|
|
+ <el-form-item
|
|
|
+ class="pruductForm-skill"
|
|
|
+ prop="skillId"
|
|
|
+ label="技能选择"
|
|
|
+ :rules="[{ required: true, message: '请选择技能', trigger: 'blur' }]"
|
|
|
+ >
|
|
|
+ <el-select v-model="skillParams.skillId" placeholder="请选择技能" @change="skillChange" style="width:160px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in skillList"
|
|
|
+ :key="item.skillId || item.skillId === 0 ? item.skillId : item.id"
|
|
|
+ :label="item.skillName ? item.skillName : item.title"
|
|
|
+ :value="item.skillId || item.skillId === 0 ? item.skillId : item.id"
|
|
|
+ ></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="skillParams.startDate"
|
|
|
+ type="date"
|
|
|
+ placeholder="起"
|
|
|
+ ></el-date-picker>
|
|
|
+ <el-date-picker
|
|
|
+ style="width:140px"
|
|
|
+ v-model="skillParams.endDate"
|
|
|
+ type="date"
|
|
|
+ placeholder="止"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="submitForm('skillParams')">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-button type="primary" @click="onExportExcel" style="float: right">导出</el-button>
|
|
|
+ <el-table id="table" ref="table1" :data="skillData" border style="width: 100%" :height="tableHeight" >
|
|
|
+ <el-table-column
|
|
|
+ label="日期"
|
|
|
+ fixed
|
|
|
+ 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="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="VIP权限用户 | =V0"
|
|
|
+ align="right"
|
|
|
+ header-align="center"
|
|
|
+ :render-header="renderheader"
|
|
|
+ prop="vipCount"
|
|
|
+ min-width="140px"
|
|
|
+ v-if="skillParams.channel === 'XYYF' || skillParams.channel === 'XYYFMOBILE'"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="VIP用户活跃率 | =UV1/V0"
|
|
|
+ align="right"
|
|
|
+ header-align="center"
|
|
|
+ :render-header="renderheader"
|
|
|
+ min-width="140px"
|
|
|
+ prop="aliveVipProportion"
|
|
|
+ v-if="skillParams.channel === 'XYYF' || skillParams.channel === 'XYYFMOBILE'"
|
|
|
+ >
|
|
|
+ </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="vv"
|
|
|
+ min-width="140px"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="忠实用户"
|
|
|
+ align="right"
|
|
|
+ header-align="center"
|
|
|
+ :render-header="renderheader"
|
|
|
+ prop="fealtyCount"
|
|
|
+ min-width="140px"
|
|
|
+ v-if="skillParams.channel === 'XYYF' || skillParams.channel === 'XYYFMOBILE'"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="忠实用户占比"
|
|
|
+ align="right"
|
|
|
+ header-align="center"
|
|
|
+ :render-header="renderheader"
|
|
|
+ prop="fealtyProportion"
|
|
|
+ min-width="140px"
|
|
|
+ v-if="skillParams.channel === 'XYYF' || skillParams.channel === 'XYYFMOBILE'"
|
|
|
+ ></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"
|
|
|
+ ></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 { getBaiduCourseList } from '../../api/skill'
|
|
|
+import downTable from '@/utils/downTable'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableHeight: 500,
|
|
|
+ dateValue: "",
|
|
|
+ skillParams: {
|
|
|
+ skillId: "",
|
|
|
+ startDate: "",
|
|
|
+ endDate: "",
|
|
|
+ channel: "",
|
|
|
+ classId: ""
|
|
|
+ },
|
|
|
+ channelList: "",
|
|
|
+ baiduCourseList: [],
|
|
|
+ skillList:[
|
|
|
+ { skillName : "小学语文",skillId : 0},
|
|
|
+ { skillName : "小学数学",skillId : 3},
|
|
|
+ { skillName : "小学一年级",skillId : 7},
|
|
|
+ { skillName : "小学二年级",skillId : 8},
|
|
|
+ { skillName : "小学三年级",skillId : 9},
|
|
|
+ { skillName : "小学四年级",skillId : 10},
|
|
|
+ { skillName : "易学拼音",skillId : 18},
|
|
|
+ { skillName : "动画识字",skillId : 16},
|
|
|
+ { skillName : "思维数学",skillId : 17},
|
|
|
+
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({
|
|
|
+ skillList: "skillList",
|
|
|
+ orderList: "orderList",
|
|
|
+ productList: "productList",
|
|
|
+ skillData: "skillData"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$store.dispatch("clearList");
|
|
|
+
|
|
|
+ // this.$store.dispatch("getOrderList", this.skillParams);
|
|
|
+ this.skillParams.startDate = this.getYesterDay();
|
|
|
+ this.skillParams.endDate = this.getYesterDay();
|
|
|
+
|
|
|
+ this.tableHeight = document.documentElement.clientHeight * 0.75;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 搜索
|
|
|
+ submitForm(formName) {
|
|
|
+ this.skillParams.startDate = this.skillParams.startDate
|
|
|
+ ? formatDate(this.skillParams.startDate, 2)
|
|
|
+ : "";
|
|
|
+ this.skillParams.endDate = this.skillParams.endDate
|
|
|
+ ? formatDate(this.skillParams.endDate, 2)
|
|
|
+ : "";
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.skillParams.channel = "BAIDU";
|
|
|
+ this.$store.dispatch("getSkillData", this.skillParams);
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.$refs.table1.doLayout();
|
|
|
+ },
|
|
|
+ // 渠道下课程分页
|
|
|
+ changePage(e) {
|
|
|
+ this.skillParams.pageNo = e;
|
|
|
+ this.$store.dispatch("getSkillData", this.skillParams);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 表头折行
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ skillChange(val) {
|
|
|
+ this.skillParams.classId = ''
|
|
|
+ console.log(val)
|
|
|
+ // if (val === 0) {
|
|
|
+ // getBaiduCourseList('CHINESE').then(res => {
|
|
|
+ // this.baiduCourseList = [{
|
|
|
+ // fullName: '全部',
|
|
|
+ // id: 100
|
|
|
+ // }, ...res.data]
|
|
|
+ // })
|
|
|
+ // } else if (val === 3) {
|
|
|
+ // getBaiduCourseList('MATH').then(res => {
|
|
|
+ // this.baiduCourseList = [{
|
|
|
+ // fullName: '全部',
|
|
|
+ // id: 101
|
|
|
+ // }, ...res.data]
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ columnZero() {
|
|
|
+ return "0";
|
|
|
+ },
|
|
|
+ columnZeroPercent(row, column, index) {
|
|
|
+ if (row.totalPayment && column.property === "yearlyConversion") {
|
|
|
+ return "100.00%";
|
|
|
+ } else {
|
|
|
+ return "0.00%";
|
|
|
+ }
|
|
|
+ // if(row.)
|
|
|
+ },
|
|
|
+ changeDate(date) {
|
|
|
+ return formatDate(date, 4)
|
|
|
+ },
|
|
|
+ // 导出表格
|
|
|
+ onExportExcel() {
|
|
|
+ const name = "小度在家";
|
|
|
+ const list = this.skillList.filter((item) => item.skillId === this.skillParams.skillId)[0] || ''
|
|
|
+ const productName = list && list.skillName ? '-' + list.skillName : ''
|
|
|
+ const date = this.skillParams.startDate + '至' + this.skillParams.endDate
|
|
|
+ downTable('table', [
|
|
|
+ {wch: 15}, // "characters"
|
|
|
+ {wch: 6},
|
|
|
+ {wch: 15},
|
|
|
+ {wch: 20},
|
|
|
+ {wch: 20},
|
|
|
+ {wch: 6},
|
|
|
+ {wch: 15},
|
|
|
+ {wch: 15},
|
|
|
+ {wch: 18},
|
|
|
+ {wch: 18},
|
|
|
+ {wch: 10},
|
|
|
+ {wch: 15},
|
|
|
+ {wch: 25},
|
|
|
+ {wch: 10},
|
|
|
+ {wch: 10},
|
|
|
+ {wch: 10},
|
|
|
+ {wch: 20},
|
|
|
+ {wch: 25}
|
|
|
+ ], name + productName + date)
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</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>
|
|
|
+
|