目录结构修改

src/api/skill.js

@@ -83,6 +83,15 @@ export function getXyyfData(params) {
     params
   })
 }
+
+export function getMiFengData(params) {
+  return service({
+    url: 'http://resources.ai160.com/cms/statistics',
+    method: 'get',
+    params
+  })
+}
+
 export function getSkillData (params) {
   if (params.channel === 'BAIDU') {
     return service({
@@ -115,7 +124,7 @@ export function getSkillData (params) {
 
 
 export function getOppoData (params) {
- 
+
     console.log(123123123,params)
     return service({
       url: `${process.env.OPPO_API}/statistics`,
@@ -126,12 +135,12 @@ export function getOppoData (params) {
         endDate: params.endDate,
       }
     })
-  
+
 
 }
 
 export function getBaiduCourseList (subjectEnum) {
- 
+
   return service({
     url: `${process.env.BAIDU_API}/statistics/getSimpleCourseList`,
     method: 'get',
@@ -144,7 +153,7 @@ export function getBaiduCourseList (subjectEnum) {
 }
 
 export function getBaiduData (params) {
- 
+
   console.log(123123123,params)
   return service({
     url: `${process.env.BAIDU_API}/statistics/simpleCourse`,
@@ -160,7 +169,7 @@ export function getBaiduData (params) {
 }
 
 export function getAliData (params) {
- 
+
   console.log(123123123,params)
   return service({
     url: `${process.env.ali_API}/statistics`,

src/pages/layout/leftnav/LeftNav.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="left-nav">
+  <div class="left-nav" >
     <el-menu
       class="el-menu-vertical-demo"
       background-color="#324157"
@@ -16,17 +16,29 @@
       <el-menu-item index="/relation/index" route="/relation/index">
           <span slot="title">渠道课程管理</span>
       </el-menu-item> -->
+      <el-menu-item index="/soundBox/index" route="/soundBox/index">
+        <span slot="title">学有义方-音箱</span>
+      </el-menu-item>
+      <el-menu-item index="/adaline/index" route="/adaline/index">
+        <span slot="title">学有义方-学习机</span>
+      </el-menu-item>
+      <el-menu-item index="/appStore/index" route="/appStore/index">
+        <span slot="title">学有义方-APPStore</span>
+      </el-menu-item>
       <el-menu-item index="/order/index" route="/order/index">
-          <span slot="title">联运项目</span>
+          <span slot="title">TV-联运</span>
       </el-menu-item>
       <el-menu-item index="/skill/index" route="/skill/index">
         <span slot="title">智能语音</span>
       </el-menu-item>
       <el-menu-item index="/tv/index" route="/tv/index">
-        <span slot="title">TV 8.0</span>
+        <span slot="title">TV-快乐学堂8.0</span>
       </el-menu-item>
       <el-menu-item index="/mobile/index" route="/mobile/index">
-        <span slot="title">Mobile 8.0</span>
+        <span slot="title">M-快乐学堂8.0</span>
+      </el-menu-item>
+      <el-menu-item index="/skill/yey" route="/skill/yey">
+        <span slot="title">爱上幼儿园</span>
       </el-menu-item>
       <!-- <el-menu-item index="/operation/index" route="/operation/index">
           <span slot="title">操作日志</span>
@@ -36,7 +48,7 @@
 </template>
 <style lang="less">
   .left-nav {
-    width: 120px;
+    width: 140px;
     height: 100%;
     position: fixed;
     background-color: #324157;

src/pages/order/Order.vue

@@ -3,30 +3,13 @@
     <el-card class="box-card">
       <div slot="header" class="clearfix topForm">
         <div class="leftForm">
-          <div class="channelForm">
+          <div class="pruductForm">
             渠道选择：
-            <el-select
-              v-model="orderParams.channelCode"
-              @change="channelChange"
-              style="width:160px"
-              placeholder="请选择渠道"
-            >
+            <el-select style="width:160px" v-model="orderParams.packageId" placeholder="请选择渠道">
               <el-option
-                v-for="item in channeList.list"
-                :key="item.code"
-                :label="item.title"
-                :value="item.code"
-              ></el-option>
-            </el-select>
-          </div>
-          <div class="pruductForm" v-if="orderParams.channelCode">
-            产品包选择：
-            <el-select style="width:160px" v-model="orderParams.packageId" placeholder="请选择产品包">
-              <el-option
-                v-for="item in productList"
-                :key="item.id"
-                :label="item.title"
-                :value="item.id"
+                key="100301"
+                label="极米/全栏目-会员制"
+                value="100301"
               ></el-option>
             </el-select>
           </div>
@@ -152,8 +135,8 @@
             min-width="160px"
           ></el-table-column>
           // 连续包月占比
-          <el-table-column 
-            label="r1 | =Qm1/Q" 
+          <el-table-column
+            label="r1 | =Qm1/Q"
             align="right"
             header-align="center"
             :render-header="renderheader"
@@ -289,7 +272,7 @@ export default {
     })
   },
   created() {
-    this.$store.dispatch("getChannelList", { pageNo: "", pageSize: "" });
+    // this.$store.dispatch("getChannelList", { pageNo: "", pageSize: "" });
     // this.$store.dispatch("getOrderList", this.orderParams);
     this.orderParams.startDate = this.getYesterDay();
     this.orderParams.endDate = this.getYesterDay();
@@ -318,8 +301,10 @@ export default {
     channelChange(val) {
       // this.$store.dispatch("clearProductList");
       this.orderParams.packageId = "";
-      this.$store.dispatch("getProductList", { channelCode: val });
-      console.log(456464, this.productList);
+      // this.$store.dispatch("getProductList", { channelCode: val });
+      // console.log(456464, this.productList);
+      this.$store.dispatch("clearList");
+
     },
     // 表头折行
     renderheader(h, { column, $index }) {

src/pages/order/Order_bak.vue

@@ -0,0 +1,400 @@
+<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.channelCode"
+              @change="channelChange"
+              style="width:160px"
+              placeholder="请选择渠道"
+            >
+              <el-option
+                v-for="item in channeList.list"
+                :key="item.code"
+                :label="item.title"
+                :value="item.code"
+              ></el-option>
+            </el-select>
+          </div>
+          <div class="pruductForm" v-if="orderParams.channelCode">
+            产品包选择：
+            <el-select style="width:160px" v-model="orderParams.packageId" placeholder="请选择产品包">
+              <el-option
+                v-for="item in productList"
+                :key="item.id"
+                :label="item.title"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </div>
+          <div class="dateForm">
+            查询日期：
+            <el-date-picker style="width:140px" v-model="orderParams.startDate" type="date" placeholder="起"></el-date-picker>
+            <el-date-picker style="width:140px" v-model="orderParams.endDate" type="date" placeholder="止"></el-date-picker>
+          </div>
+          <el-button type="primary" @click="search">搜索</el-button>
+        </div>
+        <el-button type="primary" @click="onExportExcel" style="float: right">导出</el-button>
+      </div>
+      <el-table id="table" :data="orderList" border style="width: 100%" :height="tableHeight">
+        <el-table-column label="日期" fixed prop="day" 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="产品包名称" prop="packageTitle" align="left" header-align="center"></el-table-column> -->
+          <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="pv"
+            align="right"
+            header-align="center"
+            min-width="100px"
+          ></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"
+            min-width="90px"
+          ></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 downTable from '@/utils/downTable'
+export default {
+  data() {
+    return {
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      },
+      tableHeight: 500,
+      dateValue: "",
+      orderParams: {
+        channelCode: "",
+        startDate: "",
+        endDate: "",
+        packageId: ""
+      },
+      formatTime: (row, column) => {
+        let date = new Date(row.gmtCreated);
+        let Y = date.getFullYear() + "-";
+        let M =
+          date.getMonth() + 1 < 10
+            ? "0" + (date.getMonth() + 1) + "-"
+            : date.getMonth() + 1 + "-";
+        let D =
+          date.getDate() < 10
+            ? "0" + date.getDate() + " "
+            : date.getDate() + " ";
+        let h =
+          date.getHours() < 10
+            ? "0" + date.getHours() + ":"
+            : date.getHours() + ":";
+        let m =
+          date.getMinutes() < 10
+            ? "0" + date.getMinutes() + ":"
+            : date.getMinutes() + ":";
+        let s =
+          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+        return Y + M + D + h + m + s;
+      }
+      // orderList:[]
+    };
+  },
+  computed: {
+    ...mapGetters({
+      channeList: "channeList",
+      orderList: "orderList",
+      productList: "productList"
+    })
+  },
+  created() {
+    this.$store.dispatch("getChannelList", { pageNo: "", pageSize: "" });
+    // this.$store.dispatch("getOrderList", this.orderParams);
+    this.orderParams.startDate = this.getYesterDay();
+    this.orderParams.endDate = this.getYesterDay();
+    console.log(
+      "document.documentElement.clientHeight",
+      document.documentElement.clientHeight
+    );
+    this.tableHeight = document.documentElement.clientHeight * 0.75;
+  },
+  methods: {
+    // 搜索
+    search() {
+      this.orderParams.startDate = this.orderParams.startDate
+        ? formatDate(this.orderParams.startDate, 2)
+        : "";
+      this.orderParams.endDate = this.orderParams.endDate
+        ? formatDate(this.orderParams.endDate, 2)
+        : "";
+      this.$store.dispatch("getOrderList", this.orderParams);
+    },
+    // 渠道下课程分页
+    changePage(e) {
+      this.orderParams.pageNo = e;
+      this.$store.dispatch("getRelationList", this.orderParams);
+    },
+    channelChange(val) {
+      // this.$store.dispatch("clearProductList");
+      this.orderParams.packageId = "";
+      this.$store.dispatch("getProductList", { channelCode: val });
+      console.log(456464, this.productList);
+    },
+    // 表头折行
+    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);
+    },
+    changeDate(date) {
+      return formatDate(date, 4)
+    },
+    // 导出表格
+    onExportExcel() {
+        const nameList = this.channeList.list.filter((item) => item.code === this.orderParams.channelCode)[0]
+        const name = (nameList && nameList.title) || ''
+        const list = this.productList.filter((item) => item.id === this.orderParams.packageId)[0]
+        const productName = list && list.title ? '-' + list.title : ''
+        const date = this.orderParams.startDate + '至' + this.orderParams.endDate
+        downTable('table', [
+          {wch: 15}, // "characters"
+          {wch: 6},
+          {wch: 15},
+          {wch: 20},
+          {wch: 20},
+          {wch: 6},
+          {wch: 15},
+          {wch: 15},
+          {wch: 20},
+          {wch: 20},
+          {wch: 10},
+          {wch: 10},
+          {wch: 25},
+          {wch: 10},
+          {wch: 10},
+          {wch: 10},
+          {wch: 20},
+          {wch: 25}
+        ], name + productName + date)
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+.el-pagination {
+  text-align: center;
+  margin-top: 20px;
+}
+.el-form-item__content {
+  width: 50%;
+}
+.el-input {
+  width: 217px;
+}
+.pruductForm {
+  margin-left: 10px;
+}
+.topForm {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.leftForm {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.dateForm {
+  margin-left: 18px;
+}
+</style>
+

src/pages/skill/yey.vue

@@ -0,0 +1,431 @@
+<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="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: "",
+        channelCode: "",
+        packageId: ""
+      },
+      channelList: "",
+      skillChanneList: [
+        { title: "百度-小度在家", code: "BAIDU" },
+        { title: "阿里-天猫精灵", code: "ALI" },
+        // { title: "百度-义方小学堂", code: "XYYF" }, //注释掉百度义方小学堂
+        { title: "蜜蜂视频", code: "MIFENG" },
+      ],
+      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) {
+          console.log(this.skillParams.channel)
+          if(this.skillParams.channel === 'BAIDU'){
+            this.$store.dispatch("getSkillData", this.skillParams);
+          } else if(this.skillParams.channel === 'ALI') {
+            this.$store.dispatch("getAliData", this.skillParams);
+          }  else {
+            console.log(this.skillParams)
+            this.skillParams.channelCode = "100501";
+            this.skillParams.packageId = "10050101";
+            this.$store.dispatch("getMiFengData", 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) {
+      if (val === 'BAIDU' ) {
+        this.skillParams.skillId = "6";
+      } else if( val ==='ALI') {
+        this.skillParams.skillId = "13";
+      }
+      // 清空数据
+      this.$store.dispatch("clearList");
+    },
+    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.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>
+

src/pages/xyyf/Adaline.vue

@@ -0,0 +1,404 @@
+<template>
+  <div>
+    <el-card>
+      <el-form :model="skillParams" ref="skillParams" class="clearfix topForm" style="float: left">
+        <div class="leftForm-skill">
+          <el-form-item
+            class="pruductForm-skill"
+            prop="skillId"
+            label="渠道选择"
+            :rules="[{ required: true, message: '请选择渠道', trigger: 'blur' }]"
+          >
+            <el-select v-model="skillParams.skillId" placeholder="请选择渠道" @change="skillChange" style="width:160px">
+              <el-option key="1008" label="步步高" value="2010" ></el-option>
+              <el-option key="1013" label="联想（PC）" value="2014" ></el-option>
+              <el-option key="1007" label="萌状元" value="2009" ></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"
+          ></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="vv"
+            min-width="140px"
+          ></el-table-column>
+          <el-table-column
+            label="忠实用户"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="fealtyCount"
+            min-width="140px"
+          ></el-table-column>
+          <el-table-column
+            label="忠实用户占比"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="fealtyProportion"
+            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="新增连续包月 | -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-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: {
+        startDate: "",
+        endDate: "",
+        channel: "",
+        classId: ""
+      },
+    };
+  },
+  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) {
+          this.$store.dispatch("getXyyfData", 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.$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.)
+    },
+    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>
+

src/pages/xyyf/AppStore.vue

@@ -0,0 +1,406 @@
+<template>
+  <div>
+    <el-card>
+      <el-form :model="skillParams" ref="skillParams" class="clearfix topForm" style="float: left">
+        <div class="leftForm-skill">
+          <el-form-item
+            class="pruductForm-skill"
+            prop="skillId"
+            label="渠道选择"
+            :rules="[{ required: true, message: '请选择渠道', trigger: 'blur' }]"
+          >
+            <el-select v-model="skillParams.skillId" placeholder="请选择渠道" @change="skillChange" style="width:160px">
+              <el-option key="10011" label="应用宝" value="2001" ></el-option>
+              <el-option key="1002" label="OPPO" value="2004" ></el-option>
+              <el-option key="1004" label="义方" value="2006" ></el-option>
+              <el-option key="1005" label="VIVO" value="2007" ></el-option>
+              <el-option key="1010" label="华为联运" value="2011" ></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"
+          ></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="vv"
+            min-width="140px"
+          ></el-table-column>
+          <el-table-column
+            label="忠实用户"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="fealtyCount"
+            min-width="140px"
+          ></el-table-column>
+          <el-table-column
+            label="忠实用户占比"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="fealtyProportion"
+            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="新增连续包月 | -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-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: {
+        startDate: "",
+        endDate: "",
+        channel: "",
+        classId: ""
+      },
+    };
+  },
+  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) {
+          this.$store.dispatch("getXyyfData", 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.$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.)
+    },
+    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>
+

src/pages/xyyf/SoundBox.vue

@@ -0,0 +1,404 @@
+<template>
+  <div>
+    <el-card>
+      <el-form :model="skillParams" ref="skillParams" class="clearfix topForm" style="float: left">
+        <div class="leftForm-skill">
+          <el-form-item
+            class="pruductForm-skill"
+            prop="skillId"
+            label="渠道选择"
+            :rules="[{ required: true, message: '请选择渠道', trigger: 'blur' }]"
+          >
+            <el-select v-model="skillParams.skillId" placeholder="请选择渠道" @change="skillChange" style="width:160px">
+              <el-option key="1001" label="小度音箱" value="3003" ></el-option>
+              <el-option key="1011" label="天猫精灵" value="2012" ></el-option>
+              <el-option key="1011" label="小爱同学" value="2013" ></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"
+          ></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="vv"
+            min-width="140px"
+          ></el-table-column>
+          <el-table-column
+            label="忠实用户"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="fealtyCount"
+            min-width="140px"
+          ></el-table-column>
+          <el-table-column
+            label="忠实用户占比"
+            align="right"
+            header-align="center"
+            :render-header="renderheader"
+            prop="fealtyProportion"
+            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="新增连续包月 | -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-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: {
+        startDate: "",
+        endDate: "",
+        channel: "",
+        classId: ""
+      },
+    };
+  },
+  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) {
+          this.$store.dispatch("getXyyfData", 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.$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.)
+    },
+    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>
+

src/router/router.js

@@ -22,12 +22,49 @@ const router = new Router({
       hidden: true
     },
     {
+      path: '/soundBox',
+      component: Layout,
+      children: [{
+        path: 'index',
+        name:'xyyf-soundBox',
+        meta: { title: '学有义方-音箱', url: '/soundBox/index' },
+        component: () => import('@/pages/xyyf/SoundBox'),
+      }]
+    },
+    {
+      path: '/adaline',
+      component: Layout,
+      children: [{
+        path: 'index',
+        name:'xyyf-adaline',
+        meta: { title: '学有义方-学习机', url: '/adaline/index' },
+        component: () => import('@/pages/xyyf/Adaline'),
+      }]
+    },
+    {
+      path: '/appStore',
+      component: Layout,
+      children: [{
+        path: 'index',
+        name:'xyyf-appStore',
+        meta: { title: '学有义方-APPStore', url: '/appStore/index' },
+        component: () => import('@/pages/xyyf/AppStore'),
+      }]
+    },
+
+
+
+
+
+
+
+    {
       path: '/order',
       component: Layout,
       children: [{
         path: 'index',
         name:'Order',
-        meta: { title: '渠道课程管理', url: '/order/index' },
+        meta: { title: 'TV-联运', url: '/order/index' },
         component: () => import('@/pages/order/Order'),
       }]
     },
@@ -39,7 +76,15 @@ const router = new Router({
         name:'Skill',
         meta: { title: '技能相关', url: '/skill/index' },
         component: () => import('@/pages/skill/Skill'),
-      }]
+      },
+      {
+        path: 'yey',
+        name:'Skill-ali',
+        meta: { title: '技能相关', url: '/skill/yey' },
+        component: () => import('@/pages/skill/yey'),
+      },
+
+      ]
     },
     {
       path: '/tv',
@@ -81,7 +126,7 @@ const router = new Router({
     //     component: () => import('@/pages/relation/Relation'),
     //   }]
     // },
-    
+
     // {
     //   path: '/operation',
     //   component: Layout,

src/store/modules/skill.js

@@ -5,7 +5,8 @@ import {
   getOppoData,
   getBaiduData,
   getAliData,
-  getXyyfData
+  getXyyfData,
+  getMiFengData,
 } from '../../api/skill'
 
 const skill = {
@@ -135,6 +136,24 @@ const skill = {
         })
       })
     },
+    getMiFengData({commit}, data) {
+      return new Promise((resolve, reject) => {
+        getMiFengData({
+          channelCode: data.channelCode,
+          packageId: data.packageId,
+          endDate: data.endDate,
+          startDate: data.startDate
+        }).then(res => {
+          console.log(res.data)
+          if (res.code == 200) {
+            resolve(res.data);
+            commit('GET_SKILL_DATA', res.data)
+          }
+        }).catch(error => {
+          reject(error);
+        })
+      })
+    },
     getBaiduData({
       commit
     },data) {