123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310 |
- <template>
- <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"
- :label="item.skillName"
- :value="item.skillId"
- ></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-table :data="skillData" 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"
- :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="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"
- 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: "",
- skillParams: {
- skillId: "",
- startDate: "",
- endDate: "",
- channel: ""
- },
- channelList: "",
- skillChanneList: [{ title: "百度-小度在家", code: "BAIDU" }],
- rules: {
- channel: [{ required: true, trigger: "blur" }],
- skillId: [{ required: true, trigger: "blur" }]
- }
- };
- },
- computed: {
- ...mapGetters({
- skillList: "skillList",
- orderList: "orderList",
- productList: "productList",
- skillData: "skillData"
- })
- },
- created() {
- console.log(1111, this.skillList);
- // 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.$store.dispatch("getSkillData", this.skillParams);
- } else {
- console.log("error submit!!");
- return false;
- }
- });
- },
- // 渠道下课程分页
- 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.$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" 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>
|