feat:完成上课数据接口联调

src/common/js/service.ts

@@ -2,7 +2,7 @@
  * @Author: 吴文洁
  * @Date: 2020-08-31 09:34:51
  * @LastEditors: wufan
- * @LastEditTime: 2020-12-01 15:30:03
+ * @LastEditTime: 2020-12-16 14:59:13
  * @Description: 
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  */
@@ -31,6 +31,10 @@ class Service {
     return Axios.post('POST', url, params, option);
   }
 
+  static get(url: string, params: any, option?: any) {
+    return Axios.post('GET', url, params, option);
+  }
+
   static MFS(url: string, params: any, option: any) {
     return Axios.post('POST', `mfs/${url}`, params, option);
   }

src/data-source/course/request-api.ts

@@ -2,7 +2,7 @@
  * @Author: wufan
  * @Date: 2020-12-12 11:57:10
  * @LastEditors: wufan
- * @LastEditTime: 2020-12-15 15:00:55
+ * @LastEditTime: 2020-12-16 15:01:26
  * @Description: Description
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */

src/modules/course-manage/DataList/CourseData.jsx

 import React from "react";
 import { withRouter } from "react-router-dom";
-import {
-  Table,
-  Popover,
-  message,
-  Button,
-  Spin,
-} from "antd";
+import { Table, Popover, message, Button, Spin } from "antd";
 import dealTimeDuration from "../utils/dealTimeDuration";
 import { PageControl } from "@/components";
 import CourseService from "@/domains/course-domain/CourseService";
-import User from '@/common/js/user';
+import User from "@/common/js/user";
 import "./DataList.less";
 class DataList extends React.Component {
   constructor(props) {
@@ -26,7 +20,7 @@ class DataList extends React.Component {
       total: 0,
       loading: true,
       liveCourseId: courseId,
-      storeId: User.getStoreId()
+      storeId: User.getStoreId(),
     };
   }
 
@@ -176,10 +170,16 @@ class DataList extends React.Component {
     CourseService.exportStudentCourseData({
       liveCourseId: liveCourseId,
       exportLiveType: "VISITOR",
-      storeId
+      storeId,
     }).then((res) => {
-      if(res.success){
-        message.success("导出成功！")
+      const link = res.result;
+      this.setState({
+        link
+      });
+      document.getElementById("loadExcel").click();
+
+      if (res.success) {
+        message.success("导出成功！");
       }
     });
   };
@@ -203,7 +203,7 @@ class DataList extends React.Component {
         );
         return (
           <Popover content={table} trigger="click">
-            <span className="handel-btn">{text}</span>
+            <span className="times-num">{teacherData.entryNum}</span>
           </Popover>
         );
       } else {
@@ -214,6 +214,19 @@ class DataList extends React.Component {
     }
   };
 
+  showTable = () => {
+    return (
+      <Table
+        columns={this.getVisiterColumns()}
+        dataSource={this.state.teacherData.visitorInfoVOList}
+        scroll={{ y: 75 }}
+        size={"small"}
+        style={{ width: 450 }}
+        pagination={false}
+      />
+    );
+  };
+
   render() {
     const {
       teacherData,
@@ -222,9 +235,19 @@ class DataList extends React.Component {
       size,
       total,
       loading,
+      link
     } = this.state;
     return (
       <Spin spinning={loading}>
+                <a
+          href={link}
+          target="_blank"
+          download
+          id="loadExcel"
+          style={{ position: "absolute", left: "-10000px" }}
+        >
+          111
+        </a>
         {/* 讲师上课数据 */}
         <div className="courseData-teacher">
           <p className="title">讲师上课数据</p>
@@ -251,18 +274,19 @@ class DataList extends React.Component {
                 className={`times-num ${
                   Number(teacherData.entryNum) > 0 ? "can-click" : ""
                 }`}
-                onClick={() => {
-                  this.handleCheckEnterTimes();
-                }}
               >
-                {teacherData.entryNum}
+                <Popover content={this.showTable()} trigger="click">
+                  <span className="times-num">{teacherData.entryNum}</span>
+                </Popover>
               </div>
               <div className="text">进入直播间次数</div>
             </div>
 
             <div className="online-duration item-block">
               <div className="duration">
-                {teacherData.totalDuration ? dealTimeDuration(teacherData.totalDuration) : '00:00:00'}
+                {teacherData.totalDuration
+                  ? dealTimeDuration(teacherData.totalDuration)
+                  : "00:00:00"}
               </div>
               <div className="text">累计在线时长</div>
             </div>

src/modules/course-manage/DataList/DataList.jsx

@@ -31,7 +31,7 @@ class DataList extends React.Component {
           }}
         />
         <div className="box">
-          <Tabs defaultActiveKey="courseData" >
+          <Tabs defaultActiveKey="courseData">
             <Tabs.TabPane tab="上课记录" key="courseData">
               <CourseData></CourseData>
             </Tabs.TabPane>

src/modules/course-manage/DataList/DataList.less

@@ -27,7 +27,7 @@
   }
 
   .handel-btn {
-    color: #ff7519;
+    color: #5289fa;
     cursor: pointer;
   }
   .split {

src/modules/course-manage/DataList/PlaybackData.jsx

 import React from 'react';
 import { withRouter } from "react-router-dom";
-import { Table,  Button, Modal } from 'antd';
+import { Table,  Button, Modal, message } from 'antd';
 import dealTimeDuration from '../utils/dealTimeDuration';
 import { PageControl } from "@/components";
 import './DataList.less';
@@ -8,20 +8,23 @@ import CourseService from "@/domains/course-domain/CourseService";
 import User from '@/common/js/user';
 
 const liveTypeMap = {
-  USER: "普通用户",
-  ANCHOR: "主播",
-  ADMIN: "管理员（助教）",
-  GUEST: "游客",
-  WATCH: "直播监课"
+  USER: "用户",
+  CLOUD_LECTURER: "讲师",
+  STORE_MANAGER: "店铺管理员",
+  CLOUD_MANAGER: "管理员",
+  GUEST: "游客"
 };
 class PlaybackData extends React.Component {
   constructor(props) {
     super(props);
+    const courseId = getParameterByName("id"); // 课程ID
+
     this.state = {
       playbackData: [],
       current: 1,
       size: 10,
       total: 0,
+      liveCourseId: courseId,
       storeId: User.getStoreId()
     }
   }
@@ -31,11 +34,11 @@ class PlaybackData extends React.Component {
   }
 
   fetchPlaybackList = (page = 1) => {
-    const { size } = this.state
+    const { size, liveCourseId } = this.state
     const params = {
-      liveCourseId: getParameterByName("id"),
+      liveCourseId,
       current: page,
-      size: size
+      size
     }
 
     CourseService.fetchPlaybackList(params).then((res) => {
@@ -63,7 +66,7 @@ class PlaybackData extends React.Component {
       },
       {
         title: "观看者类型",
-        dataIndex: "liveRole",
+        dataIndex: "userRole",
         render: (text) => <span>{liveTypeMap[text]}</span>,
       },
       {
@@ -86,12 +89,19 @@ class PlaybackData extends React.Component {
   }
   // 导出
   handleplaybackExport() {
-    const { storeId } = this.state;
+    const { storeId, liveCourseId } = this.state;
+
     CourseService.exportPlayBackCourseData({
-      liveCourseId: getParameterByName("id"),
+      liveCourseId,
       exportLiveType: "PLAY_BACK",
       storeId
     }).then((res) => {
+      const link = res.result;
+      this.setState({
+        link
+      });
+      document.getElementById("load-play-back-excel").click();
+
       if(res.success){
         message.success("导出成功！")
       }
@@ -99,9 +109,18 @@ class PlaybackData extends React.Component {
   }
 
   render() {
-    const { playbackData, total, current,  size} = this.state
+    const { playbackData, total, current, size, link} = this.state
     return (
       <div>
+        <a
+          href={link}
+          target="_blank"
+          download
+          id="load-play-back-excel"
+          style={{ position: "absolute", left: "-10000px" }}
+        >
+          111
+        </a>
         <Button onClick={() => {this.handleplaybackExport()}}>导出</Button>
         <Table
           size="small"