efunbox_resources-web/src/pages/skill/Skill.vue

<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="技能选择"
            v-if="skillParams.channel !== '6001'"
            :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="classId"
            label="产品包选择"
            v-if="skillParams.skillId === 0 || skillParams.skillId === 3"
            :rules="[{ required: true, message: '请选择产品包', trigger: 'blur' }]"
          >
          <!-- 兼容小度在家和学有义方不同的返回内容 -->
            <el-select v-model="skillParams.classId" placeholder="请选择产品包" style="width:160px">
              <el-option
                v-for="item in baiduCourseList"
                :key="item.id"
                :label="item.fullName"
                :value="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-table :data="skillData" border style="width: 100%" :height="tableHeight" v-if="skillParams.channel === 'XYYF'" >
        <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="VIP权限用户 | =V0"
            align="right"
            header-align="center"
            :render-header="renderheader"
            prop="vipCount"
            min-width="140px"
          ></el-table-column>
          <el-table-column
            label="VIP用户活跃率 | =UV1/V0"
            align="right"
            header-align="center"
            :render-header="renderheader"
            min-width="140px"
            prop="aliveVipProportion"
          >
          </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-table :data="skillData" border style="width: 100%" :height="tableHeight" v-else>
        <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"
          ></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 {  getBaiduCourseList } from '../../api/skill'
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" }

      ],
      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);
          } else if(this.skillParams.channel === 'ALI') {
          this.$store.dispatch("getAliData", this.skillParams);
          } else{
          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.skillParams.skillId = "";
      this.$store.dispatch("getSkillList", val);
    },
    skillChange(val) {
      this.skillParams.classId = ''
      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.)
    }
  }
};
</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>