123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326 |
- <template>
- <div>
- <el-card>
- <el-form :model="efunParams" ref="efunParams" 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="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-button type="primary" @click="onExportExcel" style="float: right">导出</el-button>
- <el-table id="table" :data="channelData" 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="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";
- import downTable from '@/utils/downTable'
- 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("clearList");
- 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.)
- },
- changeDate(date) {
- return formatDate(date, 4)
- },
- // 导出表格
- onExportExcel() {
- const nameList = this.efunChannelList.filter((item) => item.code === this.efunParams.channel)[0]
- const name = (nameList && nameList.name) || ''
- const date = this.efunParams.startDate + '至' + this.efunParams.endDate
- downTable('table', [
- {wch: 15}, // "characters"
- {wch: 6},
- {wch: 15},
- {wch: 20},
- {wch: 20},
- {wch: 6},
- {wch: 15},
- {wch: 15},
- {wch: 10},
- {wch: 10},
- {wch: 25},
- {wch: 10},
- {wch: 10},
- {wch: 10},
- {wch: 25}
- ], name + 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>
|