|
|
@@ -1,11 +1,31 @@
|
|
|
<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.skillId" placeholder="请选择技能">
|
|
|
+ <div >
|
|
|
+ <el-card >
|
|
|
+ <el-form :model="skillParams" ref="skillParams" 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="skillParams.channel"
|
|
|
+ @change="channelChange"
|
|
|
+ style="width:160px"
|
|
|
+ placeholder="请选择渠道"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in skillChanneList"
|
|
|
+ :key="item.code"
|
|
|
+ :label="item.title"
|
|
|
+ :value="item.code"
|
|
|
+
|
|
|
+
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="pruductForm-skill" prop="skillId" label="技能选择" :rules="[{ required: true, message: '请选择技能', trigger: 'blur' }]">
|
|
|
+ <el-select
|
|
|
+ v-model="skillParams.skillId"
|
|
|
+ placeholder="请选择技能"
|
|
|
+ style="width:160px"
|
|
|
+ >
|
|
|
<el-option
|
|
|
v-for="item in skillList"
|
|
|
:key="item.skillId"
|
|
|
@@ -13,17 +33,17 @@
|
|
|
:value="item.skillId"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
- </div>
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <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>
|
|
|
+ <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-button type="primary" style="float: right;" @click="search">搜索</el-button>
|
|
|
- </div>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="submitForm('skillParams')">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
<el-table :data="skillData" border style="width: 100%" :height="tableHeight">
|
|
|
<el-table-column
|
|
|
label="日期"
|
|
|
@@ -67,15 +87,15 @@
|
|
|
prop="vipProportion"
|
|
|
min-width="140px"
|
|
|
></el-table-column>
|
|
|
- <el-table-column
|
|
|
+ <!-- <el-table-column
|
|
|
label="VV"
|
|
|
prop="vv"
|
|
|
align="right"
|
|
|
header-align="center"
|
|
|
min-width="100px"
|
|
|
- ></el-table-column>
|
|
|
+ ></el-table-column>-->
|
|
|
<el-table-column
|
|
|
- label="总播放量 | -TP"
|
|
|
+ label="VV"
|
|
|
align="right"
|
|
|
header-align="center"
|
|
|
:render-header="renderheader"
|
|
|
@@ -83,7 +103,7 @@
|
|
|
min-width="140px"
|
|
|
></el-table-column>
|
|
|
<el-table-column
|
|
|
- label="人均播放 | =TP/UV"
|
|
|
+ label="人均播放 | =VV/UV"
|
|
|
align="right"
|
|
|
header-align="center"
|
|
|
:render-header="renderheader"
|
|
|
@@ -94,15 +114,68 @@
|
|
|
|
|
|
<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"
|
|
|
+ :formatter="columnZero"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="月包 | -Qm2"
|
|
|
+ align="right"
|
|
|
+ header-align="center"
|
|
|
+ :render-header="renderheader"
|
|
|
+ prop="monthlyPayment"
|
|
|
+ min-width="90px"
|
|
|
+ :formatter="columnZero"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
label="年包 | -Qy"
|
|
|
align="right"
|
|
|
header-align="center"
|
|
|
:render-header="renderheader"
|
|
|
prop="totalPayment"
|
|
|
+ min-width="130px"
|
|
|
+ ></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="R | =Qy/UV2"
|
|
|
+ label="r1 | =Qm1/Q"
|
|
|
+ align="right"
|
|
|
+ header-align="center"
|
|
|
+ :render-header="renderheader"
|
|
|
+ prop="consecutiveConversion"
|
|
|
+ min-width="130px"
|
|
|
+ :formatter="columnZeroPercent"
|
|
|
+ ></el-table-column>// 月包占比
|
|
|
+ <el-table-column
|
|
|
+ label="r2 | =Qm2/Q"
|
|
|
+ align="right"
|
|
|
+ header-align="center"
|
|
|
+ :render-header="renderheader"
|
|
|
+ prop="monthlyConversion"
|
|
|
+ min-width="130px"
|
|
|
+ :formatter="columnZeroPercent"
|
|
|
+ ></el-table-column>// 年包占比
|
|
|
+ <el-table-column
|
|
|
+ label="r3 | =Qy/Q"
|
|
|
+ align="right"
|
|
|
+ header-align="center"
|
|
|
+ :render-header="renderheader"
|
|
|
+ prop="yearlyConversion"
|
|
|
+ min-width="130px"
|
|
|
+ :formatter="columnZeroPercent"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="R | =(Qm1+Qm2+Qy)/UV2"
|
|
|
align="right"
|
|
|
header-align="center"
|
|
|
:render-header="renderheader"
|
|
|
@@ -129,12 +202,18 @@ export default {
|
|
|
return {
|
|
|
tableHeight: 500,
|
|
|
dateValue: "",
|
|
|
- orderParams: {
|
|
|
+ skillParams: {
|
|
|
skillId: "",
|
|
|
startDate: "",
|
|
|
- endDate: ""
|
|
|
+ endDate: "",
|
|
|
+ channel: ""
|
|
|
+ },
|
|
|
+ channelList: "",
|
|
|
+ skillChanneList: [{ title: "百度-小度在家", code: "BAIDU" }],
|
|
|
+ rules: {
|
|
|
+ channel: [{ required: true, trigger: "blur" }],
|
|
|
+ skillId: [{ required: true, trigger: "blur" }]
|
|
|
}
|
|
|
- // orderList:[]
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -142,34 +221,39 @@ export default {
|
|
|
skillList: "skillList",
|
|
|
orderList: "orderList",
|
|
|
productList: "productList",
|
|
|
- channeList: "channeList",
|
|
|
skillData: "skillData"
|
|
|
})
|
|
|
},
|
|
|
created() {
|
|
|
- this.$store.dispatch("getSkillList");
|
|
|
console.log(1111, this.skillList);
|
|
|
- // this.$store.dispatch("getOrderList", this.orderParams);
|
|
|
- this.orderParams.startDate = this.getYesterDay();
|
|
|
- this.orderParams.endDate = this.getYesterDay();
|
|
|
+ // this.$store.dispatch("getOrderList", this.skillParams);
|
|
|
+ this.skillParams.startDate = this.getYesterDay();
|
|
|
+ this.skillParams.endDate = this.getYesterDay();
|
|
|
|
|
|
this.tableHeight = document.documentElement.clientHeight * 0.75;
|
|
|
},
|
|
|
methods: {
|
|
|
// 搜索
|
|
|
- search() {
|
|
|
- this.orderParams.startDate = this.orderParams.startDate
|
|
|
- ? formatDate(this.orderParams.startDate, 2)
|
|
|
+ submitForm(formName) {
|
|
|
+ this.skillParams.startDate = this.skillParams.startDate
|
|
|
+ ? formatDate(this.skillParams.startDate, 2)
|
|
|
: "";
|
|
|
- this.orderParams.endDate = this.orderParams.endDate
|
|
|
- ? formatDate(this.orderParams.endDate, 2)
|
|
|
+ this.skillParams.endDate = this.skillParams.endDate
|
|
|
+ ? formatDate(this.skillParams.endDate, 2)
|
|
|
: "";
|
|
|
- this.$store.dispatch("getSkillData", this.orderParams);
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.$store.dispatch("getSkillData", this.skillParams);
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
// 渠道下课程分页
|
|
|
changePage(e) {
|
|
|
- this.orderParams.pageNo = e;
|
|
|
- this.$store.dispatch("getSkillData", this.orderParams);
|
|
|
+ this.skillParams.pageNo = e;
|
|
|
+ this.$store.dispatch("getSkillData", this.skillParams);
|
|
|
},
|
|
|
|
|
|
// 表头折行
|
|
|
@@ -183,27 +267,43 @@ export default {
|
|
|
getYesterDay() {
|
|
|
let yesterday = new Date().getTime() - 86400000;
|
|
|
return formatDate(yesterday, 2);
|
|
|
+ },
|
|
|
+ channelChange(val) {
|
|
|
+ this.$store.dispatch("getSkillList", val);
|
|
|
+ },
|
|
|
+ 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">
|
|
|
-.pruductForm {
|
|
|
+<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 {
|
|
|
+.leftForm-skill {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-direction: row;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
-.dateForm {
|
|
|
+.dateForm-skill {
|
|
|
margin-left: 18px;
|
|
|
}
|
|
|
</style>
|
