Skip to content

X
xiaomai-cloud-class-web
Commit 23a0227a by wufan
Options

feat:增加上课数据

parent 4ef073c8
Showing with 1155 additions and 100 deletions
src/components/Breadcrumbs.tsx
......@@ -21,6 +21,7 @@ const Breadcrumbs = (props: BreadcrumbsProps) => {
const { goBack, navList, text } = props;
function _onClick(): any {
console.log("返回来")
goBack ? goBack() : window.RCHistory.goBack();
}
const isString = _.isString(navList);
......
src/components/CropperModal.tsx
......@@ -12,8 +12,8 @@ import $ from 'jquery';
import '@/libs/cropper/cropper.min.css';
import 'cropper';
import Upload from '../core/upload';
import baseImg from '@/common/images/xiaomai-IMG.png';
import './CropperModal.less';
const baseImg ='https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png'
interface CropperModalProps {
title?: string;
......
src/modules/common/ClassSearchSelect.tsx
......@@ -32,6 +32,12 @@ interface ClassSearchSelectProps {
hasNoClass?: any;
onSelect?: (val1: any, val2?: any) => void;
teacherId?: any;
mode?: "multiple" | "tags" | undefined
}
interface ItemTypes {
name: string,
classId: string,
}
const ClassSearchSelect = (props: ClassSearchSelectProps) => {
......@@ -55,11 +61,11 @@ const ClassSearchSelect = (props: ClassSearchSelectProps) => {
const [isAll, setIsAll] = useState(false);
useEffect(() => {
Bus.bind('reset', handleQueryReset);
// Bus.bind('reset', handleQueryReset);
// fetchServerData();
return () => {
Bus.unbind('reset');
// Bus.unbind('reset');
clearTimeout(timer);
clearTimeout(scroll);
};
......@@ -72,7 +78,7 @@ const ClassSearchSelect = (props: ClassSearchSelectProps) => {
}, 300)
}, [props.courseId]);
const defprops = _.pick(props, 'open', 'getPopupContainer');
let defprops = _.pick(props, 'open', 'getPopupContainer');
if (multiple) {
defprops.mode = 'multiple';
}
......@@ -116,44 +122,44 @@ const ClassSearchSelect = (props: ClassSearchSelectProps) => {
const param = _.extend(queryTemp, props.query);
if (url == "public/homework/getTeacherClassPage") {
window.axios.Zeus(urlTemp, param).then((res: any) => {
const data = res.result.records;
_.map(data, (item: any) => {
item.name = item.className;
item.formatName = item.className;
});
let dataSetTemp = [];
if (current === 1) {
dataSetTemp = filter ? filter(data) : data;
if (hasNoneClass) {
dataSetTemp.unshift({ classId: "1", name: '未选班' });
}
} else {
dataSetTemp = dataSet.concat(filter ? filter(data) : data);
}
setDataSet(dataSetTemp);
setIsAll(!res.result.hasNext);
});
} else {
window.axios.Business(urlTemp, param).then((res: any) => {
const data = res.result.records;
_.map(data, (item: any) => {
item.formatName = item.name;
});
let dataSetTemp = [];
if (current === 1) {
dataSetTemp = filter ? filter(data) : data;
if (hasNoneClass) {
dataSetTemp.unshift({ classId: "1", name: '未选班' });
}
} else {
dataSetTemp = dataSet.concat(filter ? filter(data) : data);
}
setDataSet(dataSetTemp);
setIsAll(!res.result.hasNext);
});
}
// if (url == "public/homework/getTeacherClassPage") {
// window.axios.post(urlTemp, param).then((res: any) => {
// const data = res.result.records;
// _.map(data, (item: any) => {
// item.name = item.className;
// item.formatName = item.className;
// });
// let dataSetTemp = [];
// if (current === 1) {
// dataSetTemp = filter ? filter(data) : data;
// if (hasNoneClass) {
// dataSetTemp.unshift({ classId: "1", name: '未选班' });
// }
// } else {
// dataSetTemp = dataSet.concat(filter ? filter(data) : data);
// }
// setDataSet(dataSetTemp);
// setIsAll(!res.result.hasNext);
// });
// } else {
// window.axios.Business(urlTemp, param).then((res: any) => {
// const data = res.result.records;
// _.map(data, (item: any) => {
// item.formatName = item.name;
// });
// let dataSetTemp = [];
// if (current === 1) {
// dataSetTemp = filter ? filter(data) : data;
// if (hasNoneClass) {
// dataSetTemp.unshift({ classId: "1", name: '未选班' });
// }
// } else {
// dataSetTemp = dataSet.concat(filter ? filter(data) : data);
// }
// setDataSet(dataSetTemp);
// setIsAll(!res.result.hasNext);
// });
// }
}
function searchName() {
......@@ -194,16 +200,17 @@ const ClassSearchSelect = (props: ClassSearchSelectProps) => {
if (!multiple) {
if (needName) {
const items = _.filter(dataSet, (item: any) => {
const items:Array<ItemTypes> = _.filter(dataSet, (item: ItemTypes) => {
return item.classId === classId;
});
onSelect({ classId, formatName: !!items[0] && items[0].name });
const formatName = items[0] ? items[0].name ? items[0].name :"": "";
onSelect && onSelect({ classId, formatName });
return;
}
onSelect({ classId });
onSelect && onSelect({ classId });
return;
}
onSelect(classId);
onSelect && onSelect(classId);
}
return (
......
src/modules/common/CourseSearchSelect.jsx
......@@ -5,11 +5,8 @@
* @Last Modified time: 2020-11-06 14:09:38
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Menu, Dropdown, Icon, Checkbox, Button, Input, Spin, Select, Row, Col } from 'antd';
import { Spin, Select } from 'antd';
import Bus from '@/core/bus';
const Option = Select.Option;
const Search = Input.Search;
class CourseSelect extends React.Component {
......@@ -80,9 +77,6 @@ class CourseSelect extends React.Component {
// 排除一对一
param.status = 'ON';
}
// if (this.props.status) {
// param.status = this.props.status
// }
if (self.props.queryOneToOne) {
param.courseType = 'ONEVONE'
delete param.status;
......@@ -98,7 +92,6 @@ class CourseSelect extends React.Component {
})
window.axios.Business(url, param).then((res) => {
let data = res.result.records;
// this.parseServerData(data);
data.map(function (item, index) {
item.title = item.name;
item.desc = item.name;
......@@ -106,7 +99,6 @@ class CourseSelect extends React.Component {
if (current >1) {
data = this.state.dataSet.concat(data)
}
// res.totalCount = 200
this.setState({
dataSet: data,
totalCount: res.result.total,
......@@ -167,16 +159,14 @@ class CourseSelect extends React.Component {
return (
<div className={classNames("common-select staticSelect", { 'common-select-active': this.state.visible })} style={this.props.style}>
{
!!this.props.label && <div className='label'> {this.props.label}:</div>
!!this.props.label && <div className='label'>{ `${this.props.label}:`}</div>
}
<Select
id={this.props.id}
ref='course'
{...defprops}
showSearch
// style={{ width: '100%' }}
allowClear
// notFoundContent={this.state.fetching ? <Spin size="small" /> : null}
onSearch={(value) => {
const query = this.state.query;
query.courseNameLike = value
......@@ -184,8 +174,8 @@ class CourseSelect extends React.Component {
}}
onBlur={() => {
const query = this.state.query;
query.courseNameLike = null;
this.setState({ query }, this.searchName)
query.courseNameLike = null
this.setState({ query }, this.searchName)
}}
// open
onPopupScroll={(dom) => {
......
src/modules/common/DateRangePicker.jsx
import React from 'react';
import PropTypes from 'prop-types';
import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
......
src/modules/common/StaticSelect.jsx
......@@ -3,12 +3,11 @@
* @Date: 2017-09-01 16:29:44
* @Last Modified by: 吴文洁
* @Last Modified time: 2019-12-09 15:03:40
*/
import React from 'react';
import { Menu, Icon, Checkbox, Button, Input, Spin, Select, Row } from 'antd';
import "./StaticSelect.less";
class StaticSelect extends React.Component{
class StaticSelect extends React.Component {
constructor(props) {
super(props);
this.state = {
......
src/modules/common/TeacherSearchSelect.jsx
......@@ -5,13 +5,12 @@
* @Last Modified time: 2020-03-20 10:43:55
*/
import React from 'react';
import { Tooltip, Dropdown, Icon, Checkbox, Button, Input, Spin, Select, Avatar, Row, Col } from 'antd';
import { Tooltip, Input, Spin, Select, Avatar, Row, Col } from 'antd';
import _ from 'underscore';
import "./CommonSelect.less";
import "./TeacherSearchSelect.less";
import _ from "underscore";
const Search = Input.Search;
const baseImg = require('@/common/images/xiaomai-IMG.png')
import classNames from 'classNames'
const baseImg ='https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png'
class TeacherSearchSelect extends React.Component {
......@@ -28,7 +27,7 @@ class TeacherSearchSelect extends React.Component {
status: 'ON',
CustomOrderType: 2,
courseId: props.courseId,
// instId: window.currentUserInstInfo.instId,
instId: window.currentUserInstInfo.instId,
},
dataSet: [],
visible: false,
......@@ -200,7 +199,7 @@ class TeacherSearchSelect extends React.Component {
let data = _.filter(this.state.dataSet, item => item.name);
data = _.uniq(data, item => item.teacherId);
return (
<div className={("common-select staticSelect teacher-search-select", { 'common-select-active': this.state.visible })} style={this.props.style}>
<div className={classNames("common-select staticSelect teacher-search-select", { 'common-select-active': this.state.visible })} style={this.props.style}>
{
!!this.props.label && <div className='label'> {this.props.label}:</div>
}
......
src/modules/common/UpLoad.jsx
......@@ -10,7 +10,7 @@ import { Button, Icon, Upload, Avatar } from 'antd';
import './Upload.less';
import {CropperModal} from '@/components/';
const baseImg = require('@/common/images/xiaomai-IMG.png');
const baseImg ='https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png'
class UpLoad extends React.Component {
constructor(props) {
super(props);
......
src/modules/course-manage/DataList/CourseData.jsx 0 → 100644
import React from "react";
import { withRouter } from "react-router-dom";
import {
Input,
InputNumber,
Table,
Tooltip,
Popover,
Select,
message,
Modal,
Button,
Popconfirm,
Spin,
Checkbox,
} from "antd";
import dealTimeDuration from "../utils/dealTimeDuration";
import { PageControl } from "@/components";
import SelectStudent from "../modal/select-student";
// import { StudentStatus } from '@/modules/types';
import Bus from "@/core/bus";
import StudentClassReportModal from "../components/StudentClassReportModal";
import TeacherClassReportModal from "../components/TeacherClassReportModal";
import "./DataList.less";
const { TextArea } = Input;
const { Search } = Input;
const ConsumeHourTypeEnum = {
SUPER_NOT_CONSUME: "超上未扣",
MANUAL_CONSUME: "手动扣除",
ARRIVE_CONSUME: "到课扣除",
};
const StudentStatus = {};
class DataList extends React.Component {
constructor(props) {
super(props);
const courseId = getParameterByName("id"); // 课程ID
const type = getParameterByName("type"); // 来源: 大班直播 large 互动班课 interactive
const instId = window.currentUserInstInfo.instId || LS.get("instId"); // 机构ID
console.log("course-data");
this.state = {
courseId,
type,
instId,
teacherData: [], // 老师上课数据
studentData: [], // 学员上课数据
courseInfo: {}, // 课程信息
liveSignState: "",
nameOrPhone: "", // 搜索学员姓名/手机号
currentEditData: {}, // 当前编辑对象
current: 1,
size: 1000, // 添加扣课时学员弹窗回填所需 当前接口返回全部列表
total: 0,
loading: false,
teacherClassReportModal: null, // 展示老师课堂报告
studentClassReportModal: null, // 展示学生课堂报告
hasOpenIntegral: false, // 是否开启小麦粒积分
excludeStudentIds: [],
excludeConsumeStudentIds: [],
};
}
componentDidMount() {
// this.fetchCourseInfo();
// this.fetchTeacherData();
// this.fetchStudentData();
// this.getXMPointConfig();
}
// 获取小麦粒配置
getXMPointConfig() {
// axios.Business("public/integral/getConfig").then(res => {
// this.setState({
// hasOpenIntegral: res.result
// })
// })
}
// 获取课程信息
fetchCourseInfo() {
// axios
// .Apollo('public/businessLive/getCourseDetail', {
// liveCourseId: this.state.courseId,
// })
// .then((res) => {
// const { result = {} } = res;
// const courseInfo = result;
// this.setState({
// courseInfo,
// });
// });
}
// 获取学员上课数据
fetchStudentData = (current = 1) => {
this.setState({ loading: true });
const { courseId, size, nameOrPhone, liveSignState } = this.state;
const params = {
liveCourseId: courseId,
current,
size,
nameOrPhone,
liveSignState,
};
if (!params.liveSignState) {
delete params.liveSignState;
}
// window.axios
// .Apollo("public/businessLive/queryStudentVisitData", params)
// .then((res) => {
// if (res.result) {
// const { records = [], current, size, total } = res.result;
// records.forEach(item => {
// item.edit = false;
// item.courseBag = [];
// });
// this.setState({
// studentData: records,
// current,
// size,
// total,
// loading: false,
// }
// );
// }
// });
};
// 获取老师上课数据
fetchTeacherData = () => {
// window.axios
// .Apollo('public/businessLive/queryTeacherVisitData', { liveCourseId: this.state.courseId })
// .then((res) => {
// if (res.result) {
// const teacherData = [res.result];
// this.setState(
// {
// teacherData,
// }
// );
// }
// });
};
// 添加上课学员弹窗
handleShowSelectStuModal = (studentType) => {
const { studentData } = this.state;
const { courseId, courseInfo, savedSelectedRows } = this.state;
const [
studentList,
consumeStudentList,
excludeStudentIds,
excludeConsumeStudentIds,
] = [[], [], [], []];
studentData.forEach((item) => {
if (item.statusEnum === "NORMAL") {
if (item.needConsumeHour === "YES") {
consumeStudentList.push({
studentId: item.userId,
classHourId: item.consumeHourClassId,
});
excludeConsumeStudentIds.push(item.userId);
} else if (item.needConsumeHour === "NO") {
studentList.push({ studentId: item.userId });
excludeStudentIds.push(item.userId);
}
this.setState({
excludeStudentIds,
excludeConsumeStudentIds,
});
}
});
const studentModal = (
<SelectStudent
savedSelectedRows={savedSelectedRows}
liveCourseId={courseId}
studentType={studentType}
studentList={studentList}
consumeStudentList={consumeStudentList}
excludeStudentIds={excludeStudentIds}
excludeConsumeStudentIds={excludeConsumeStudentIds}
onSelect={(
excludeStudentIds,
consumeStudentList,
savedSelectedRows
) => {
this.setState({ savedSelectedRows });
this.handleSelectStudent(
courseInfo,
excludeStudentIds,
consumeStudentList,
studentType
);
}}
after={true}
close={() => {
this.setState({
studentModal: null,
});
}}
/>
);
this.setState({ studentModal });
};
// 添加学员
handleSelectStudent = (item, studentIds, consumeStudentList, studentType) => {
const { liveType, liveCourseId, podium, quota } = item;
const {
excludeStudentIds = [],
excludeConsumeStudentIds = [],
} = this.state;
// 当前选择的学员
const currentSelectStuIds =
studentType === "DEDUCTION"
? _.pluck(consumeStudentList, "studentId")
: studentIds;
// 如果当前选择的是扣课时学员，那么总的已选学员人数 = 扣课时 + 之前选择不扣课时的
// 如果当前选择的是不扣课时学员，那么总的已选学员人数 = 不扣课时 + 之前选择的扣课时的
const prevSelectStutIds =
studentType === "DEDUCTION"
? excludeStudentIds
: excludeConsumeStudentIds;
const stuLen = [...currentSelectStuIds, ...prevSelectStutIds].length;
if (liveType !== "SMALL_CLASS_INTERACTION" && stuLen > 1000) {
message.info(`最多选择1000人`);
return;
} else if (liveType == "SMALL_CLASS_INTERACTION" && stuLen > podium) {
message.info(`最多选择${podium}人`);
return;
} else {
const param = {
liveCourseId: liveCourseId,
};
if (studentType === "DEDUCTION") {
param.consumeStudentIds = consumeStudentList;
} else {
param.studentIds = studentIds;
}
// axios.Apollo('public/businessLive/addCourseStu', param).then((res) => {
// if (res.success) {
// this.setState({
// studentModal: null,
// });
// message.success('学员变更成功');
// this.fetchStudentData();
// }
// });
}
};
// 移出学员
handelDeleteStu(item) {
const { courseId } = this.state;
const { userId, innerLiveUserId } = item;
const params = {
innerLiveUserId: innerLiveUserId,
liveCourseId: courseId,
studentId: userId,
};
// axios.Apollo('/public/businessLive/moveCourseStu', params).then((res) => {
// if (res.success === true) {
// message.success('移出成功');
// this.fetchStudentData();
// }
// });
}
// 获取课程包
fetchCourseBag(item, index) {
const params = {
studentId: item.userId,
};
const { studentData } = this.state;
// axios.Business('public/classHour/getUseAbleAccountByStudentId', params).then((res) => {
// const { success, result } = res;
// if (success) {
// studentData[index] = {
// ...studentData[index],
// courseBag: result || [],
// };
// let currentEditData = JSON.parse(JSON.stringify(studentData[index]));
// this.setState({
// studentData,
// currentEditData,
// });
// }
// });
}
// 编辑
handelEditColumn(item, index) {
this.fetchCourseBag(item, index);
const { studentData } = this.state;
studentData.forEach((i, y) => {
if (y === index) {
i.edit = true;
} else {
i.edit = false;
}
});
let currentEditData = JSON.parse(JSON.stringify(studentData[index]));
this.setState({
studentData,
currentEditData,
});
}
// 保存
handelSaveColumn(index) {
const { instId, currentEditData } = this.state;
const consumeUserId = window.currentUserInstInfo.adminId;
const {
consumeHourClassId,
consumeHourNum,
remark,
liveStudentId,
} = currentEditData;
const params = {
consumeHourClassId: consumeHourClassId,
consumeHourNum,
remark,
consumeUserId: consumeUserId,
instId: instId,
liveStudentId: liveStudentId,
};
// axios.Apollo('public/businessLive/updateStudentVisitCheckedData', params).then((res) => {
// if (res.success === true) {
// message.success('修改成功');
// this.fetchStudentData();
// }
// });
}
// 取消
handelCancelColumn(index) {
const { studentData } = this.state;
studentData[index].edit = false;
this.setState({
studentData,
});
}
// 修改
changeFiledValue(filed, val, index) {
const { currentEditData } = this.state;
currentEditData[filed] = val;
this.setState({
currentEditData,
});
}
// 修改课程包
handleChangeCourse(val, index) {
let { currentEditData } = this.state;
const courseObj = currentEditData.courseBag.find((item) => {
if (item.courseId === val) {
return item;
}
});
const { courseName, leftLessons } = courseObj;
currentEditData = {
...currentEditData,
consumeHourClassId: val,
consumeHourClassName: courseName,
leftLessons,
};
this.setState({
currentEditData,
});
}
// 进入直播次数列表
getVisiterColumns() {
const columns = [
{
title: "序号",
dataIndex: "index",
width: 50,
render: (text, record, index) => {
return <span>{index + 1}</span>;
},
},
{
title: "进入时间",
dataIndex: "entryTime",
width: 150,
render: (text) => (
<span>{formatDate("YYYY-MM-DD H:i", parseInt(text))}</span>
),
},
{
title: "离开时间",
dataIndex: "leaveTime",
width: 150,
render: (text) => (
<span>{formatDate("YYYY-MM-DD H:i", parseInt(text))}</span>
),
},
{
title: "在线时长",
dataIndex: "lookingDuration",
render: (text, record) => {
return <span>{text ? dealTimeDuration(text) : "-"}</span>;
},
},
];
return columns;
}
// 查看老师课堂报告
handleCheckTeacherClassReport = () => {
const teacherClassReportModal = (
<TeacherClassReportModal
courseId={this.state.courseInfo.liveCourseId}
onCancel={() => {
this.setState({ teacherClassReportModal: null });
}}
/>
);
this.setState({
teacherClassReportModal,
});
};
// 查看学生课堂报告
handleCheckStudentClassReport = (studentId) => {
const studentClassReportModal = (
<StudentClassReportModal
courseId={this.state.courseInfo.liveCourseId}
studentId={studentId}
onCancel={() => {
this.setState({ studentClassReportModal: null });
}}
/>
);
this.setState({
studentClassReportModal,
});
};
// 学员上课数据列表
getStudentColumns() {
const {
courseState,
consumeClassTime,
consumeHourNum,
} = this.state.courseInfo;
const { type, currentEditData, hasOpenIntegral } = this.state;
const columns = [
{
title: "用户姓名",
dataIndex: "userName",
width: 100,
},
{
title: "手机号",
dataIndex: "phone",
render: (text, record) => {
const { phone, bindingWeChat } = record;
return (
<div>
{phone}
{
<Tooltip
title={`${bindingWeChat ? "已绑定微信" : "未绑定微信"}`}
>
<span
className="icon iconfont"
style={
bindingWeChat
? {
color: "#00D20D",
fontSize: "16px",
marginLeft: 6,
}
: {
fontSize: "16px",
color: "#BFBFBF",
marginLeft: 6,
}
}
>
&#xe68d;
</span>
</Tooltip>
}
</div>
);
},
},
{
title: "观看次数",
dataIndex: "entryNum",
align: "right",
render: (text, record) => {
if (text > 0) {
if (
record.visitorInfoVOList &&
record.visitorInfoVOList.length > 0
) {
const table = (
<Table
columns={this.getVisiterColumns()}
dataSource={record.visitorInfoVOList}
scroll={{ y: 75 }}
size={"small"}
style={{ width: 450 }}
pagination={false}
></Table>
);
return (
<Popover content={table} trigger="click">
<span className="handel-btn">{text}</span>
</Popover>
);
} else {
return <div className="live-table--empty">暂无上课数据</div>;
}
} else {
return <span>{text}</span>;
}
},
},
{
title: "累计在线时长",
dataIndex: "watchDuration",
width: 150,
sorter: (a, b) => a.watchDuration - b.watchDuration,
sortDirections: ["descend", "ascend"],
render: (text, record) => {
//如无离开时间，就置空
return <span>{text ? dealTimeDuration(text) : "00:00:00"}</span>;
},
},
];
return columns;
}
// 学员导出5.0
handleExportV5 = () => {
const { type, courseId } = this.state;
const url =
type === "large"
? "public/businessLive/exportLargeClassLiveAsync"
: "public/businessLive/exportClassInteractionLiveSync";
// window.axios
// .Apollo(url, {
// liveCourseId: courseId,
// exportLiveType: 'VISITOR',
// })
// .then((res) => {
// Bus.trigger('get_download_count');
// Modal.success({
// title: '导出任务提交成功',
// content: '请前往右上角的“任务中心”进行下载',
// okText: '我知道了',
// });
// });
};
handleCheckEnterTimes =()=>{
return (<Popover
placement="top"
visible={visible}
overlayClassName='popover-confirm'
content={(
<Table
size="small"
scroll={{ y: 600 }}
columns={this.getStudentColumns()}
dataSource={studentData}
pagination={false}
style={{ margin: "16px 0" }}
/>
)}
>
<span
style={{cursor: 'pointer'}}
className="iconfont icon edit gray-icon"
onClick={() => {
setVisible(true)
}}
>&#xe6e7;</span>
</Popover>)
}
render() {
const {
teacherData,
studentData,
current,
size,
total,
loading,
} = this.state;
const {
courseState,
consumeClassTime,
consumeHourNum,
} = this.state.courseInfo;
return (
<Spin spinning={loading}>
{/* 讲师上课数据 */}
<div className="courseData-teacher">
<p className="title">讲师上课数据</p>
<div className="teacher-course-data">
<div className="avatar-name-phone item-block">
<img
src={
teacherData.avatar ||
"https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png"
}
alt=""
className="avatar"
/>
<div className="right">
<div className="name">{teacherData.name || "王凯凯"}</div>
<div className="phone">{teacherData.phone || "13888884388" }</div>
</div>
</div>
<div className="times item-block">
<div className={`times-num ${Number(teacherData.times) > 0 ? "can-click":""}`} onClick={()=>{this.handleCheckEnterTimes()}}>{teacherData.times || '47'}</div>
<div className="text">进入直播间次数</div>
</div>
<div className="online-duration item-block">
<div className="duration">{teacherData.duration || '20:30:45'}</div>
<div className="text">累计在线时长</div>
</div>
</div>
</div>
{/* 用户上课数据 */}
<div className="courseData-student">
<p className="title">用户上课数据</p>
<div className="filter-wrap">
<div className="filter">
<Button
style={{ height: 32, marginLeft: 16 }}
onClick={_.debounce(
() => {
if (!studentData.length) {
message.warning("暂无数据可导出");
return;
}
this.handleExportV5();
},
500,
true
)}
>
导出
</Button>
</div>
</div>
<Table
size="small"
scroll={{ y: 600 }}
columns={this.getStudentColumns()}
dataSource={studentData}
pagination={false}
style={{ margin: "16px 0" }}
/>
<PageControl
size="small"
current={current - 1}
pageSize={size}
total={total}
toPage={(page) => {
this.fetchStudentData(page + 1);
}}
/>
</div>
</Spin>
);
}
}
export default withRouter(DataList);
src/modules/course-manage/DataList/DataList.jsx 0 → 100644
import React from 'react';
import { withRouter } from "react-router-dom";
import { Tabs } from 'antd';
import Breadcrumbs from "@/components/Breadcrumbs";
import CourseData from './CourseData';
import PlaybackData from './PlaybackData';
import './DataList.less';
class DataList extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<div className="page data-list">
<Breadcrumbs
navList="上课数据"
goBack={() => {
console.log("准备返回");
RCHistory.goBack();
}}
/>
<div className="box">
<Tabs defaultActiveKey="courseData" >
<Tabs.TabPane tab="上课记录" key="courseData">
<CourseData></CourseData>
</Tabs.TabPane>
<Tabs.TabPane tab="回放记录" key="playbackData">
<PlaybackData></PlaybackData>
</Tabs.TabPane>
</Tabs>
</div>
</div>
)
}
}
export default withRouter(DataList);
\ No newline at end of file
src/modules/course-manage/DataList/DataList.less 0 → 100644
.data-list {
.pop-table {
width: 300px;
}
.filter-wrap {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 16px;
.select-student {
span {
display: inline-block;
margin-right: 8px;
padding: 6px 10px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
background: #fc9c6b;
border-radius: 4px;
cursor: pointer;
}
}
.filter {
display: flex;
}
}
.handel-btn {
color: #ff7519;
cursor: pointer;
}
.split {
margin: 0 8px;
color: #ff7519;
}
.title {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
margin-bottom: 16px;
}
.select-course {
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.iconfont {
color: #bfbfbf;
cursor: pointer;
}
}
.bulge {
color: #ff7519;
}
.ant-table-small > .ant-table-content .ant-table-header {
background-color: #fafafa !important;
}
.teacher-course-data {
width: 100%;
height: 90px;
background: #ffffff;
border: 1px solid #e8e8e8;
display: flex;
align-items: center;
margin-bottom: 32px;
.item-block {
width: 33%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
img {
width: 50px;
height: 50px;
margin-right: 16px;
}
.text {
height: 20px;
font-size: 14px;
color: #999999;
line-height: 20px;
}
&.avatar-name-phone {
justify-content: flex-start;
padding-left: 26px;
.name {
height: 22px;
font-size: 16px;
font-weight: 500;
color: #333;
line-height: 22px;
}
.phone {
height: 20px;
font-size: 14px;
color: #666;
line-height: 20px;
margin-top: 4px;
}
}
&.times {
flex-direction: column;
.times-num {
height: 37px;
font-size: 26px;
font-weight: 500;
color: #5289fa;
line-height: 37px;
cursor: pointer;
&.can-click {
cursor: pointer;
}
}
}
&.online-duration {
flex-direction: column;
.duration {
height: 37px;
font-size: 26px;
font-weight: 500;
color: #333333;
line-height: 37px;
}
}
}
}
src/modules/course-manage/DataList/PlaybackData.jsx 0 → 100644
import React from 'react';
import { withRouter } from "react-router-dom";
import { Table, Button, Modal } from 'antd';
import dealTimeDuration from '../utils/dealTimeDuration';
import { PageControl } from "@/components";
import Bus from '@/core/bus';
import './DataList.less';
const liveTypeMap = {
USER: "学生",
ANCHOR: "老师",
ADMIN: "助教",
};
class PlaybackData extends React.Component {
constructor(props) {
super(props);
this.state = {
playbackData: [],
current: 1,
size: 10,
total: 0
}
}
componentDidMount() {
this.fetchPlaybackList();
}
fetchPlaybackList = (page = 1) => {
const { size } = this.state
const params = {
liveCourseId: getParameterByName("id"),
current: page,
size: size
}
// window.axios
// .Apollo("public/businessLive/queryUserReplayRecordPage", params)
// .then((res) => {
// if (res.result) {
// const { records = [], current, size, total } = res.result;
// this.setState({
// playbackData: records,
// current,
// size,
// total
// });
// }
// });
};
getPlaybackColumns() {
const columns = [
{
title: "观看用户",
dataIndex: "userName",
},
{
title: "手机号",
dataIndex: "phone"
},
{
title: "观看者类型",
dataIndex: "liveRole",
render: (text) => <span>{liveTypeMap[text]}</span>,
},
{
title: "开始观看时间",
dataIndex: "entryTime",
render: (text) => (
<span>{text ? formatDate("YYYY-MM-DD H:i", parseInt(text)) : '-'}</span>
),
},
{
title: "观看时长",
dataIndex: "lookingDuration",
render: (text) => {
return <span>{text ? dealTimeDuration(text) : '-'}</span>;
},
},
];
return columns;
}
// 导出
handleplaybackExport() {
const type = getParameterByName("type");
const url = type === 'large' ? 'public/businessLive/exportLargeClassLiveAsync' : 'public/businessLive/exportClassInteractionLiveSync';
// window.axios.Apollo(url, {
// liveCourseId: getParameterByName("id"),
// exportLiveType: 0
// }).then((res) => {
// Bus.trigger('get_download_count');
// Modal.success({
// title: '导出任务提交成功',
// content: '请前往右上角的“' + window.NewVersion?'任务中心' : '导出中心' + '”进行下载',
// okText: <span id="I_know">我知道了</span>,
// });
// })
}
render() {
const { playbackData, total, current, size} = this.state
return (
<div>
<Button onClick={() => {this.handleplaybackExport()}}>导出</Button>
<Table
size="small"
columns={this.getPlaybackColumns()}
dataSource={playbackData}
pagination={false}
style={{ margin: '16px 0' }}>
</Table>
<PageControl
size="small"
current={current - 1}
pageSize={size}
total={total}
toPage={(page) => {
this.fetchPlaybackList(page + 1);
}}
/>
</div>
)
}
}
export default withRouter(PlaybackData);
\ No newline at end of file
src/modules/course-manage/components/LiveCourseList.jsx
......@@ -75,6 +75,12 @@ class LiveCourseList extends React.Component {
getDownloadVersion() {
}
// 前往上课数据页面
handleLinkToClassData = (item) => {
// TODOLIST 确定后端是否是根据liveCourseId 返回数据
window.RCHistory.push(`/live-course-data?type=large&id=${item.liveCourseId}`)
}
parseColumns = () => {
const menu = (item) => (
......@@ -152,6 +158,24 @@ class LiveCourseList extends React.Component {
},
},
{
title: '上课数据',
width: "9%",
key: "quota",
dataIndex: "quota",
render: (val, item) => {
return (
<span
className="operate-text"
onClick={() => {
this.handleLinkToClassData(item)
}}
>
{`${val}人`}
</span>
);
}
},
{
title: "上课状态",
width: "10%",
key: "courseState",
......
src/modules/course-manage/modal/select-student/FilterContent.jsx
/*
* @Author: 吴文洁
* @Date: 2020-08-07 16:28:41
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-11 14:23:09
* @LastEditors: wufan
* @LastEditTime: 2020-12-11 15:29:27
* @Description: 选择学员-筛选组件
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -11,6 +11,7 @@ import React from 'react';
import { Row, Col } from 'antd';
import Bus from '@/core/bus';
import _ from 'underscore';
import { SearchBar } from '@/components';
import ClassSearchSelect from '@/modules/common/ClassSearchSelect';
......
src/modules/course-manage/modal/select-student/StudentList.jsx
/*
* @Author: 吴文洁
* @Date: 2020-08-07 16:28:49
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-11 14:23:20
* @LastEditors: wufan
* @LastEditTime: 2020-12-11 17:47:33
* @Description: 选择学员-学员列表组件
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Table, Tooltip, Menu, Dropdown } from 'antd';
import _ from 'underscore';
import Bus from '@/core/bus';
import { PageControl } from '@/components';
import _ from 'underscore';
......
src/modules/course-manage/types.tsx 0 → 100644
export enum StudentStatus {
'NORMAL' = '在读',
'POTENTIAL' = '潜在',
'HISTORY' = '历史',
'ABANDON' = '废弃'
}
export enum TaskStatus {
'STARTING' = '未开始',
'DONE' = '已完成',
'OVERDUE' = '已逾期',
'CANCELED' = '已取消'
}
export enum StudentStatusForLinkToDetail {
'clue' = 'clue',
'clue_cycle' = 'clue_cycle',
'reading' = 'reading',
'history' = 'history'
}
export enum FollowStatus {
UN_DESIGN = '未分配',
WAIT_CLAIM = '待认领',
WAIT_FOLLOW = '待跟进',
FOLLOWING = '跟进中',
TRADED = '已成交',
INVALID = '已删除'
}
\ No newline at end of file
src/modules/root/Header.tsx
/*
* @Author: 吴文洁
* @Date: 2019-09-10 18:26:03
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-09 11:13:05
* @LastEditors: wufan
* @LastEditTime: 2020-12-11 14:01:06
* @Description:
*/
import React , { useContext, useState}from 'react';
......@@ -18,8 +18,8 @@ import { withRouter } from 'react-router-dom';
import User from '@/common/js/user';
import BaseService from "@/domains/basic-domain/baseService";
import { XMContext } from '@/store/context';
import baseImg from '@/common/images/xiaomai-IMG.png';
import logoImg from '@/common/images/logo.png';
const baseImg ='https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png'
const { confirm } = Modal;
function Header(){
......
src/modules/root/Main.jsx
......@@ -5,7 +5,7 @@ function Main(){
const [menuType,setMenuType] = useState(1);
return (
<div
className={menuType ? `right-container has-nav}` : `right-container has-nav right-container-vertical}`}
className={menuType ? `right-container has-nav` : `right-container has-nav right-container-vertical`}
id="rightContainer"
>
<MainRoutes/>
......
src/routes/config/mainRoutes.tsx
/*
* @Author: 吴文洁
* @Date: 2020-04-29 10:26:32
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-11 14:26:24
* @LastEditors: wufan
* @LastEditTime: 2020-12-11 17:48:07
* @Description: 内容线路由配置
*/
import EmployeesManagePage from '@/modules/store-manege/EmployeesManagePage';
......@@ -12,6 +12,8 @@ import StoreDecorationPage from '@/modules/store-manege/StoreDecorationPage';
import CourseCatalogPage from '@/modules/store-manege/CourseCatalogPage';
import LiveCoursePage from '@/modules/course-manage/LiveCoursePage';
import AddLivePage from '@/modules/course-manage/AddLive'
import DataList from '@/modules/course-manage/DataList/DataList';
import ClassBook from '@/modules/resource-disk';
const mainRoutes = [
......@@ -51,6 +53,11 @@ const mainRoutes = [
name: '创建直播课'
},
{
path: '/live-course-data',
component: DataList,
name: '上课数据'
},
{
path: '/resource-disk',
component:ClassBook,
name: '资料云盘'
......
src/routes/config/menuList.tsx
export const menuList: any = [
// {
// groupName: "课程管理",
// groupCode: "CloudCourse",
// icon: '&#xe831;',
// children: [
// {
// groupName: "直播课",
// groupCode: "CourseLiveClass",
// link: '/CourseLiveClass'
// },
// {
// groupName: "视频课",
// groupCode: "CourseVideoClass",
// link: '/CourseVideoClass'
// }
// ]
// },
{
groupName: "课程管理",
groupCode: "CloudCourse",
icon: '&#xe831;',
children: [
{
groupName: "直播课",
groupCode: "CourseLiveClass",
link: '/live-course'
},
// {
// groupName: "视频课",
// groupCode: "CourseVideoClass",
// link: '/CourseVideoClass'
// }
{
groupName: "直播课-上课数据",
groupCode: "CourseData",
link: '/live-course-data'
},
]
},
{
groupName: "资料云盘",
groupCode: "CloudDisk",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment