123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491 |
- <template>
- <div>
- <el-card>
- <el-form :model="skillParams" ref="skillParams" class="clearfix topForm" style="float: left">
- <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="技能选择"
- v-if="hide(skillParams.channel)"
- :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="pruductForm-skill"
- prop="skillId"
- label="产品包选择"
- v-if="skillParams.channel === 'XYYFMOBILE' "
- :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.id"
- :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="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: "",
- skillChanneList: [
- { title: "百度-小度在家", code: "BAIDU" },
- { title: "阿里-天猫精灵", code: "ALI" },
- { title: "百度-义方小学堂", code: "XYYF" },
- { title: "OPPO-小学同步辅导", code: "6001" },
- { title: "学有义方", code: "XYYFMOBILE" }
- ],
- baiduCourseList: []
- };
- },
- computed: {
- ...mapGetters({
- skillList: "skillList",
- orderList: "orderList",
- productList: "productList",
- skillData: "skillData"
- })
- },
- created() {
- // 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) {
- if(this.skillParams.channel === '6001'){
- this.$store.dispatch("getOppoData", this.skillParams);
- } else if(this.skillParams.skillId === 0 || this.skillParams.skillId === 3){
- // this.$store.dispatch("getBaiduData", this.skillParams);
- this.$store.dispatch("getSkillData", this.skillParams);
- } else if(this.skillParams.channel === 'ALI') {
- this.$store.dispatch("getAliData", this.skillParams);
- } else if(this.skillParams.channel === 'XYYFMOBILE') {
- // console.log('学有义方')
- this.$store.dispatch("getXyyfData", this.skillParams);
- } else{
- 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);
- },
- channelChange(val) {
- this.skillParams.skillId = "";
- if(val === 'XYYFMOBILE') {
- this.$store.dispatch("getXyyfMobileList");
- }else if (val === 'BAIDU' || val ==='ALI') {
- this.$store.dispatch("getSkillList", val);
- }
- // 清空数据
- this.$store.dispatch("clearList");
- },
- 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.)
- },
- hide (channel) {
- if (channel === '6001' || channel === 'XYYF' || channel === 'XYYFMOBILE') {
- return false
- }
- return true
- },
- changeDate(date) {
- return formatDate(date, 4)
- },
- // 导出表格
- onExportExcel() {
- const nameList = this.skillChanneList.filter((item) => item.code === this.skillParams.channel)[0]
- const name = (nameList && nameList.title) || ''
- 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>
|