Skill.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491
  1. <template>
  2. <div>
  3. <el-card>
  4. <el-form :model="skillParams" ref="skillParams" class="clearfix topForm" style="float: left">
  5. <div class="leftForm-skill">
  6. <el-form-item
  7. style="display:flex;"
  8. prop="channel"
  9. name="channel"
  10. :rules="[{ required: true, message: '请选择渠道', trigger: 'blur' }]"
  11. label="渠道选择"
  12. >
  13. <el-select
  14. v-model="skillParams.channel"
  15. @change="channelChange"
  16. style="width:160px"
  17. placeholder="请选择渠道"
  18. >
  19. <el-option
  20. v-for="item in skillChanneList"
  21. :key="item.code"
  22. :label="item.title"
  23. :value="item.code"
  24. ></el-option>
  25. </el-select>
  26. </el-form-item>
  27. <el-form-item
  28. class="pruductForm-skill"
  29. prop="skillId"
  30. label="技能选择"
  31. v-if="hide(skillParams.channel)"
  32. :rules="[{ required: true, message: '请选择技能', trigger: 'blur' }]"
  33. >
  34. <el-select v-model="skillParams.skillId" placeholder="请选择技能" @change="skillChange" style="width:160px">
  35. <el-option
  36. v-for="item in skillList"
  37. :key="item.skillId || item.skillId === 0 ? item.skillId : item.id"
  38. :label="item.skillName ? item.skillName : item.title"
  39. :value="item.skillId || item.skillId === 0 ? item.skillId : item.id"
  40. ></el-option>
  41. </el-select>
  42. </el-form-item>
  43. <el-form-item
  44. class="pruductForm-skill"
  45. prop="skillId"
  46. label="产品包选择"
  47. v-if="skillParams.channel === 'XYYFMOBILE' "
  48. :rules="[{ required: true, message: '请选择产品包', trigger: 'blur' }]"
  49. >
  50. <el-select v-model="skillParams.skillId" placeholder="请选择产品包" @change="skillChange" style="width:160px">
  51. <el-option
  52. v-for="item in skillList"
  53. :key="item.id"
  54. :label="item.name"
  55. :value="item.code"
  56. ></el-option>
  57. </el-select>
  58. </el-form-item>
  59. <el-form-item class="dateForm-skill" name="data" label="查询日期" style="display:flex">
  60. <el-date-picker
  61. style="width:140px"
  62. v-model="skillParams.startDate"
  63. type="date"
  64. placeholder="起"
  65. ></el-date-picker>
  66. <el-date-picker
  67. style="width:140px"
  68. v-model="skillParams.endDate"
  69. type="date"
  70. placeholder="止"
  71. ></el-date-picker>
  72. </el-form-item>
  73. </div>
  74. <el-form-item>
  75. <el-button type="primary" @click="submitForm('skillParams')">搜索</el-button>
  76. </el-form-item>
  77. </el-form>
  78. <el-button type="primary" @click="onExportExcel" style="float: right">导出</el-button>
  79. <el-table id="table" ref="table1" :data="skillData" border style="width: 100%" :height="tableHeight" >
  80. <el-table-column
  81. label="日期"
  82. fixed
  83. align="left"
  84. header-align="center"
  85. min-width="140px"
  86. >
  87. <template slot-scope="scope">
  88. <span>{{changeDate(scope.row.day)}}</span>
  89. </template>
  90. </el-table-column>
  91. <el-table-column label="流量与观看" header-align="center">
  92. <el-table-column
  93. label="UV"
  94. prop="uv"
  95. align="right"
  96. header-align="center"
  97. min-width="100px"
  98. ></el-table-column>
  99. <el-table-column
  100. label="VIP用户 | -UV1"
  101. align="right"
  102. header-align="center"
  103. :render-header="renderheader"
  104. prop="vipUv"
  105. min-width="120px"
  106. ></el-table-column>
  107. <el-table-column
  108. label="非VIP用户 | UV2=UV-UV1"
  109. align="right"
  110. header-align="center"
  111. :render-header="renderheader"
  112. prop="waitVipUv"
  113. min-width="140px"
  114. ></el-table-column>
  115. <el-table-column
  116. label="VIP用户占比 | =UV1/UV"
  117. align="right"
  118. header-align="center"
  119. :render-header="renderheader"
  120. prop="vipProportion"
  121. min-width="140px"
  122. ></el-table-column>
  123. <el-table-column
  124. label="VIP权限用户 | =V0"
  125. align="right"
  126. header-align="center"
  127. :render-header="renderheader"
  128. prop="vipCount"
  129. min-width="140px"
  130. v-if="skillParams.channel === 'XYYF' || skillParams.channel === 'XYYFMOBILE'"
  131. ></el-table-column>
  132. <el-table-column
  133. label="VIP用户活跃率 | =UV1/V0"
  134. align="right"
  135. header-align="center"
  136. :render-header="renderheader"
  137. min-width="140px"
  138. prop="aliveVipProportion"
  139. v-if="skillParams.channel === 'XYYF' || skillParams.channel === 'XYYFMOBILE'"
  140. >
  141. </el-table-column>
  142. <!-- <el-table-column
  143. label="VV"
  144. prop="vv"
  145. align="right"
  146. header-align="center"
  147. min-width="100px"
  148. ></el-table-column>-->
  149. <el-table-column
  150. label="VV"
  151. align="right"
  152. header-align="center"
  153. :render-header="renderheader"
  154. prop="vv"
  155. min-width="140px"
  156. ></el-table-column>
  157. <el-table-column
  158. label="忠实用户"
  159. align="right"
  160. header-align="center"
  161. :render-header="renderheader"
  162. prop="fealtyCount"
  163. min-width="140px"
  164. v-if="skillParams.channel === 'XYYF' || skillParams.channel === 'XYYFMOBILE'"
  165. ></el-table-column>
  166. <el-table-column
  167. label="忠实用户占比"
  168. align="right"
  169. header-align="center"
  170. :render-header="renderheader"
  171. prop="fealtyProportion"
  172. min-width="140px"
  173. v-if="skillParams.channel === 'XYYF' || skillParams.channel === 'XYYFMOBILE'"
  174. ></el-table-column>
  175. <el-table-column
  176. label="人均播放 | =VV/UV"
  177. align="right"
  178. header-align="center"
  179. :render-header="renderheader"
  180. prop="perCapitaPlay"
  181. min-width="140px"
  182. ></el-table-column>
  183. </el-table-column>
  184. <el-table-column label="拉新,付费与转换率" header-align="center">
  185. <el-table-column
  186. label="连续包月 | -Qm1"
  187. align="right"
  188. header-align="center"
  189. :render-header="renderheader"
  190. prop="consecutiveMonthly"
  191. min-width="100px"
  192. ></el-table-column>
  193. <el-table-column
  194. label="新增连续包月 | -Qm1-1"
  195. align="right"
  196. header-align="center"
  197. :render-header="renderheader"
  198. min-width="140px"
  199. >
  200. <template slot-scope="scope">
  201. <span>{{scope.row.appendConsecutiveMonthly || 0}}</span>
  202. </template>
  203. </el-table-column>
  204. <el-table-column
  205. label="续包月续费 | -Qm1-2"
  206. align="right"
  207. header-align="center"
  208. :render-header="renderheader"
  209. min-width="140px"
  210. >
  211. <template slot-scope="scope">
  212. <span>{{scope.row.continueConsecutiveMonthly || 0}}</span>
  213. </template>
  214. </el-table-column>
  215. <el-table-column
  216. label="月包 | -Qm2"
  217. align="right"
  218. header-align="center"
  219. :render-header="renderheader"
  220. prop="monthlyPayment"
  221. min-width="90px"
  222. ></el-table-column>
  223. <el-table-column
  224. label="年包 | -Qy"
  225. align="right"
  226. header-align="center"
  227. :render-header="renderheader"
  228. prop="yearlyPayment"
  229. ></el-table-column>
  230. <el-table-column
  231. label="付费订单数量| Q=Qm1+Qm2+Qy"
  232. align="right"
  233. header-align="center"
  234. :render-header="renderheader"
  235. prop="totalPayment"
  236. min-width="160px"
  237. ></el-table-column>
  238. <el-table-column
  239. label="r1 | =Qm1/Q"
  240. align="right"
  241. header-align="center"
  242. :render-header="renderheader"
  243. prop="consecutiveConversion"
  244. min-width="130px"
  245. ></el-table-column>// 月包占比
  246. <el-table-column
  247. label="r2 | =Qm2/Q"
  248. align="right"
  249. header-align="center"
  250. :render-header="renderheader"
  251. prop="monthlyConversion"
  252. min-width="130px"
  253. ></el-table-column>// 年包占比
  254. <el-table-column
  255. label="r3 | =Qy/Q"
  256. align="right"
  257. header-align="center"
  258. :render-header="renderheader"
  259. prop="yearlyConversion"
  260. min-width="130px"
  261. ></el-table-column>
  262. <el-table-column
  263. label="R | =(Qm1+Qm2+Qy)/UV2"
  264. align="right"
  265. header-align="center"
  266. :render-header="renderheader"
  267. prop="totalConversion"
  268. min-width="190px"
  269. ></el-table-column>
  270. <el-table-column
  271. label="R1 | =(Qm1-1+Qm2+Qy)/UV2"
  272. align="right"
  273. header-align="center"
  274. :render-header="renderheader"
  275. min-width="190px"
  276. >
  277. <template slot-scope="scope">
  278. <span>{{scope.row.appendTotalConversion || 0}}</span>
  279. </template>
  280. </el-table-column>
  281. </el-table-column>
  282. </el-table>
  283. <!-- <el-pagination
  284. v-if="orderList.totalElements"
  285. background
  286. layout="prev, pager, next"
  287. :total="orderList.totalElements"
  288. @current-change="changePage">
  289. </el-pagination>-->
  290. </el-card>
  291. </div>
  292. </template>
  293. <script>
  294. import { mapGetters } from "vuex";
  295. import formatDate from "../../utils/formatTime";
  296. import { getBaiduCourseList } from '../../api/skill'
  297. import downTable from '@/utils/downTable'
  298. export default {
  299. data() {
  300. return {
  301. tableHeight: 500,
  302. dateValue: "",
  303. skillParams: {
  304. skillId: "",
  305. startDate: "",
  306. endDate: "",
  307. channel: "",
  308. classId: ""
  309. },
  310. channelList: "",
  311. skillChanneList: [
  312. { title: "百度-小度在家", code: "BAIDU" },
  313. { title: "阿里-天猫精灵", code: "ALI" },
  314. { title: "百度-义方小学堂", code: "XYYF" },
  315. { title: "OPPO-小学同步辅导", code: "6001" },
  316. { title: "学有义方", code: "XYYFMOBILE" }
  317. ],
  318. baiduCourseList: []
  319. };
  320. },
  321. computed: {
  322. ...mapGetters({
  323. skillList: "skillList",
  324. orderList: "orderList",
  325. productList: "productList",
  326. skillData: "skillData"
  327. })
  328. },
  329. created() {
  330. // this.$store.dispatch("getOrderList", this.skillParams);
  331. this.skillParams.startDate = this.getYesterDay();
  332. this.skillParams.endDate = this.getYesterDay();
  333. this.tableHeight = document.documentElement.clientHeight * 0.75;
  334. },
  335. methods: {
  336. // 搜索
  337. submitForm(formName) {
  338. this.skillParams.startDate = this.skillParams.startDate
  339. ? formatDate(this.skillParams.startDate, 2)
  340. : "";
  341. this.skillParams.endDate = this.skillParams.endDate
  342. ? formatDate(this.skillParams.endDate, 2)
  343. : "";
  344. this.$refs[formName].validate(valid => {
  345. if (valid) {
  346. if(this.skillParams.channel === '6001'){
  347. this.$store.dispatch("getOppoData", this.skillParams);
  348. } else if(this.skillParams.skillId === 0 || this.skillParams.skillId === 3){
  349. // this.$store.dispatch("getBaiduData", this.skillParams);
  350. this.$store.dispatch("getSkillData", this.skillParams);
  351. } else if(this.skillParams.channel === 'ALI') {
  352. this.$store.dispatch("getAliData", this.skillParams);
  353. } else if(this.skillParams.channel === 'XYYFMOBILE') {
  354. // console.log('学有义方')
  355. this.$store.dispatch("getXyyfData", this.skillParams);
  356. } else{
  357. this.$store.dispatch("getSkillData", this.skillParams);
  358. }
  359. } else {
  360. console.log("error submit!!");
  361. return false;
  362. }
  363. });
  364. this.$refs.table1.doLayout();
  365. },
  366. // 渠道下课程分页
  367. changePage(e) {
  368. this.skillParams.pageNo = e;
  369. this.$store.dispatch("getSkillData", this.skillParams);
  370. },
  371. // 表头折行
  372. renderheader(h, { column, $index }) {
  373. return h("span", {}, [
  374. h("span", {}, column.label.split("|")[0]),
  375. h("br"),
  376. h("span", {}, column.label.split("|")[1])
  377. ]);
  378. },
  379. getYesterDay() {
  380. let yesterday = new Date().getTime() - 86400000;
  381. return formatDate(yesterday, 2);
  382. },
  383. channelChange(val) {
  384. this.skillParams.skillId = "";
  385. if(val === 'XYYFMOBILE') {
  386. this.$store.dispatch("getXyyfMobileList");
  387. }else if (val === 'BAIDU' || val ==='ALI') {
  388. this.$store.dispatch("getSkillList", val);
  389. }
  390. // 清空数据
  391. this.$store.dispatch("clearList");
  392. },
  393. skillChange(val) {
  394. this.skillParams.classId = ''
  395. console.log(val)
  396. // if (val === 0) {
  397. // getBaiduCourseList('CHINESE').then(res => {
  398. // this.baiduCourseList = [{
  399. // fullName: '全部',
  400. // id: 100
  401. // }, ...res.data]
  402. // })
  403. // } else if (val === 3) {
  404. // getBaiduCourseList('MATH').then(res => {
  405. // this.baiduCourseList = [{
  406. // fullName: '全部',
  407. // id: 101
  408. // }, ...res.data]
  409. // })
  410. // }
  411. },
  412. columnZero() {
  413. return "0";
  414. },
  415. columnZeroPercent(row, column, index) {
  416. if (row.totalPayment && column.property === "yearlyConversion") {
  417. return "100.00%";
  418. } else {
  419. return "0.00%";
  420. }
  421. // if(row.)
  422. },
  423. hide (channel) {
  424. if (channel === '6001' || channel === 'XYYF' || channel === 'XYYFMOBILE') {
  425. return false
  426. }
  427. return true
  428. },
  429. changeDate(date) {
  430. return formatDate(date, 4)
  431. },
  432. // 导出表格
  433. onExportExcel() {
  434. const nameList = this.skillChanneList.filter((item) => item.code === this.skillParams.channel)[0]
  435. const name = (nameList && nameList.title) || ''
  436. const list = this.skillList.filter((item) => item.skillId === this.skillParams.skillId)[0] || ''
  437. const productName = list && list.skillName ? '-' + list.skillName : ''
  438. const date = this.skillParams.startDate + '至' + this.skillParams.endDate
  439. downTable('table', [
  440. {wch: 15}, // "characters"
  441. {wch: 6},
  442. {wch: 15},
  443. {wch: 20},
  444. {wch: 20},
  445. {wch: 6},
  446. {wch: 15},
  447. {wch: 15},
  448. {wch: 18},
  449. {wch: 18},
  450. {wch: 10},
  451. {wch: 15},
  452. {wch: 25},
  453. {wch: 10},
  454. {wch: 10},
  455. {wch: 10},
  456. {wch: 20},
  457. {wch: 25}
  458. ], name + productName + date)
  459. }
  460. }
  461. };
  462. </script>
  463. <style lang="less" scoped>
  464. .pruductForm-skill {
  465. margin-left: 10px;
  466. display: flex;
  467. }
  468. .topForm {
  469. display: flex;
  470. align-items: center;
  471. flex-direction: row;
  472. flex-shrink: 0;
  473. justify-content: space-between;
  474. }
  475. .leftForm-skill {
  476. display: flex;
  477. align-items: center;
  478. flex-direction: row;
  479. justify-content: space-between;
  480. }
  481. .dateForm-skill {
  482. margin-left: 18px;
  483. }
  484. </style>