![]({getImageUrl("images/educoder/competition/1.png")}/)
+ :record.id===2?
+ ![]({getImageUrl("images/educoder/competition/2.png")}/)
+ :record.id===3?
+ ![]({getImageUrl("images/educoder/competition/3.png")}/)
+ :record.id
+ }
+
+ )
+ },
+ {
+ title: '姓名',
+ dataIndex: 'name',
+ key: 'name',
+ align: 'center',
+ className: "edu-txt-center font-14 maxnamewidth105",
+ width:'100px',
+ render: (text, record) => (
+ {
+ record.name
+ }
+
+ )
+ },
+ {
+ title: '学号',
+ dataIndex: 'studentid',
+ key: 'studentid',
+ align: 'center',
+ className: "edu-txt-center font-14 maxnamewidth175",
+ render: (text, record) => (
+
+ {
+ record.student_id
+ }
+
+ ),
+ },
+ {
+ title: '完成实训',
+ key: 'training',
+ dataIndex: 'training',
+ align: 'center',
+ className: "edu-txt-center font-14 maxnamewidth255",
+ render: (text, record) => (
+
+ {
+ record.shixun_count
+ }
+
+ )
+ },
+ {
+ title: '在学实训',
+ dataIndex: 'learning',
+ key: 'learning',
+ align: 'center',
+ className: "edu-txt-center font-14",
+ render: (text, record) => (
+
+ {
+ record.study_shixun_count
+ }
+
+ )
+
+ },
+ {
+ title: '金币',
+ dataIndex: 'goldcoin',
+ key: 'goldcoin',
+ align: 'center',
+ className: "edu-txt-center font-14",
+ render: (text, record) => (
+
+ {
+ record.grade
+ }
+
+ ),
+ },
+ {
+ title: '经验值',
+ dataIndex: 'empirical',
+ key: 'empirical',
+ align: 'center',
+ className: "edu-txt-center font-14",
+ render: (text, record) => (
+
+ {
+ record.experience
+ }
+
+ )
+ },
+ ],
+ school:"",
+ teachers_count:null,
+ students_count:null,
+ courses_count:null,
+ shixuns_count:null,
+ shixun_report_count:null,
+ shixun_time:null,
+ courses:null,
+ course_count:0,
+ pages:1,
+ limits:10,
+ teachers:null,
+ teacher_count:0,
+ students:null,
+ student_count:0,
+ shixun_chart_data:null,
+ shixun_chart_datanames:null,
+ studentionsnames:null,
+ studentionsvalues:null
+ }
+
+ }
+
+
+ componentDidMount(){
+ console.log("College");
+ console.log(this.props.match.params.id);
+ this.gettop();
+ this.Numberofinternshipreports();
+ this.Actualcombattimeoftrainees();
+ this.Classnumber(1,10);
+ this.Teacherranking(1,10);
+ this.Studentranking(1,10);
+ this.Onlinetraining();
+ this.Hottest();
+ }
+ //头部
+ gettop=()=>{
+ const id =this.props.match.params.id;
+ const url=`/colleges/${id}/statistics.json`;
+ axios.get(url).then((response) => {
+ if(response===null||response===undefined){
+ this.setState({
+ teachers_count:0,
+ students_count:0,
+ courses_count:0,
+ shixuns_count:0,
+ school:"",
+ })
+ return
+ }
+ if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {
+ this.setState({
+ teachers_count:0,
+ students_count:0,
+ courses_count:0,
+ shixuns_count:0,
+ school:"",
+ })
+ }else{
+ this.setState({
+ teachers_count:response.data.teachers_count,
+ students_count:response.data.students_count,
+ courses_count:response.data.courses_count,
+ shixuns_count:response.data.shixuns_count,
+ school:response.data.school,
+ })
+ }
+ }).catch((error) => {
+ console.log(error)
+ this.setState({
+ teachers_count:0,
+ students_count:0,
+ courses_count:0,
+ shixuns_count:0,
+ school:"",
+ })
+ });
+ }
+
+ //获取实训报告数
+ Numberofinternshipreports=()=>{
+ const id =this.props.match.params.id;
+ const url=`/colleges/${id}/shixun_report_count.json`;
+ axios.get(url).then((response) => {
+ if(response===null||response===undefined){
+ this.setState({
+ shixun_report_count:0,
+ })
+ return
+ }
+ if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {
+ this.setState({
+ shixun_report_count:0,
+ })
+ }else{
+ if (response.data.status === -1){
+ this.setState({
+ shixun_report_count:0,
+ })
+ return
+ }
+ this.setState({
+ shixun_report_count:response.data.shixun_report_count,
+ })
+ }
+ }).catch((error) => {
+ console.log(error)
+ this.setState({
+ shixun_report_count:0,
+ })
+ });
+ }
+
+ //学员实战时间
+ Actualcombattimeoftrainees=()=>{
+ const id =this.props.match.params.id;
+ const url=`/colleges/${id}/shixun_time.json`;
+ axios.get(url).then((response) => {
+ if(response===null||response===undefined){
+ this.setState({
+ shixun_time:0,
+ })
+ return
+ }
+ if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {
+ this.setState({
+ shixun_time:0,
+ })
+ }else{
+ if (response.data.status === -1){
+ this.setState({
+ shixun_time:0,
+ })
+ return
+ }
+ this.setState({
+ shixun_time:response.data.shixun_time,
+ })
+ }
+ }).catch((error) => {
+ console.log(error)
+ this.setState({
+ shixun_time:0,
+ })
+ });
+ }
+
+ //课堂信息
+ Classnumber=(page,per_page)=>{
+ const id =this.props.match.params.id;
+ const url=`/colleges/${id}/course_statistics.json`;
+ this.setState({
+ coursesloading:true
+ })
+ axios.get(url,{params:{
+ page:page,
+ per_page:per_page,
+ }
+ }).then((response) => {
+ if(response===null||response===undefined){
+ this.setState({
+ courses:[],
+ course_count:0
+ })
+ return
+ }
+ if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {
+ this.setState({
+ courses:[],
+ course_count:0
+ })
+ }else{
+ if (response.data.status === -1){
+ this.setState({
+ courses:[],
+ course_count:0
+ })
+ return
+ }
+ this.setState({
+ courses:response.data.courses,
+ course_count:response.data.course_count,
+ page:page,
+ limit:per_page
+ })
+ }
+ this.setState({
+ coursesloading:false
+ })
+ }).catch((error) => {
+ this.setState({
+ courses:[],
+ course_count:0,
+ coursesloading:false
+ })
+ });
+ }
+
+ //教师排名
+ Teacherranking=(page,per_page)=>{
+ const id =this.props.match.params.id;
+ const url=`/colleges/${id}/teachers.json`;
+ this.setState({
+ teachersloading:true
+ })
+ axios.get(url,{params:{
+ page:page,
+ per_page:per_page,
+ }
+ }).then((response) => {
+ if(response===null||response===undefined){
+ this.setState({
+ teachers:[],
+ teacher_count:0
+ })
+ return
+ }
+ if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {
+ this.setState({
+ teachers:[],
+ teacher_count:0
+ })
+ }else{
+ if (response.data.status === -1){
+ this.setState({
+ teachers:[],
+ teacher_count:0
+ })
+ return
+ }
+ let teachers=[];
+ if(response.data.teachers){
+ for(let i=0;i
+
+ )
+ }
+}
+export default SnackbarHOC() (TPMIndexHOC ( College ));
+
+
diff --git a/public/react/src/college/colleagechart/Colleagechart.js b/public/react/src/college/colleagechart/Colleagechart.js
new file mode 100644
index 000000000..fca01280a
--- /dev/null
+++ b/public/react/src/college/colleagechart/Colleagechart.js
@@ -0,0 +1,84 @@
+import React, {Component} from "react";
+import {WordsBtn} from 'educoder';
+import {Table} from "antd";
+import {Link,Switch,Route,Redirect} from 'react-router-dom';
+const echarts = require('echarts');
+
+
+
+function startechart(data,datanane){
+ var effChart = echarts.init(document.getElementById('shixun_skill_chart'));
+
+ var option = {
+
+ tooltip : {
+ trigger: 'item',
+ formatter: "{d}%
+
+
+
+ {school}
+
+
+
+ {/*//教师1*/}
+
+
+
+ 教师
+
+
+ {teachers_count?teachers_count:0}
+
+
+
+
+
+ 学生
+
+
+ {students_count?students_count:0}
+
+
+
+
+
+ 课堂
+
+
+ {courses_count?courses_count:0}
+
+
+
+ {/*//教师2*/}
+
+
+
+
+
+ 共建实训
+
+
+ {shixuns_count?shixuns_count:0}
+
+
+
+
+
+ + 基本使用情况 +
+ {/*基本使用情况1*/} +
+
+
+
+ {/*基本使用情况2*/}
+ + 教师 +
++ 学生 +
++ 课堂 +
++ 共建实训 +
++ 实习报告 +
++ 学员实战时间 +
+
+
+ {/*基本使用情况3结束*/}
+
+ {
+ teachers_count?
+
+ {teachers_count}人
+ :
+
+ {
+ students_count?
+
+ {students_count}人
+ :
+
+ {
+ courses_count?
+
+ {courses_count}个
+ :
+
+ {
+ shixuns_count?
+
+ {shixuns_count}个
+ :
+
+ {
+ shixun_report_count?
+
+ {shixun_report_count}个
+ :
+
+ {
+ shixun_time?
+
+ {shixun_time}天
+ :
+
+
+
+
+ :
+
+
+
+ + 课堂 +
+ { + courses===null? +
+
+
+ :
+ JSON.stringify(courses) === "[]" ?
+
+
+ }
+
+
+
+
+
+ {
+ course_count>=11?
+
+ {courses === undefined ? "" :
}
+
+
+
+ :""
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+ :
+
+
+ + 教师排名 +
+ { + teachers===null? +
+
+
+ :
+ JSON.stringify(teachers) === "[]" ?
+
+
+
+ }
+
+
+
+ {/*
+ {teachers === undefined ? "" :
}
+
+ */}
+ {/*
*/}
+ */}
+ {/*
*/}
+
+ {/*
+
+
+
+ :
+
+
+
+ }
+
+
+ + 在线实训情况 +
+ { + shixun_chart_data===null? +
+
+
+ :
+ JSON.stringify(shixun_chart_data) === "[]" ?
+
+
+
+
+
+
+ :
+
+
+ + 学生排名 +
+ { + students === null ? +
+
+
+ :
+ JSON.stringify(students) === "[]" ?
+
+
+
+ }
+ {/*
+ {students === undefined ? "" :
}
+
+ */}
+ {/*
*/}
+
+
+ */}
+ {/*
*/}
+
+ {/*
+
+
+
+
+
+
+ :
+
+
+
+ }
+
+
+
+ + 最热评测 +
+ { + studentionsnames===null? +
+
+
+ :
+ JSON.stringify(studentionsnames) === "[]" ?
+ " + }, + legend: { + // orient: 'vertical', + // top: 'middle', + bottom: 50, + left: 'center', + data: datanane + }, + series : [ + { + type: 'pie', + radius : '65%', + center: ['50%', '35%'], + selectedMode: 'single', + data:data, + itemStyle: { + emphasis: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }; + effChart.setOption(option); +} +class Colleagechart extends Component { + + constructor(props) { + super(props); + this.state = { + } + } + + componentDidMount() { + startechart(this.props.data,this.props.datanane) + } + + + componentDidUpdate = (prevProps) => { + if (prevProps.data!= this.props.data) { + startechart(this.props.data,this.props.datanane) + } + } + + + render() { + let {data}=this.props; + + return ( +
+
+
+
+ )
+ }
+}
+
+export default Colleagechart;
diff --git a/public/react/src/college/colleagechart/Colleagechartzu.js b/public/react/src/college/colleagechart/Colleagechartzu.js
new file mode 100644
index 000000000..5c0269700
--- /dev/null
+++ b/public/react/src/college/colleagechart/Colleagechartzu.js
@@ -0,0 +1,149 @@
+import React, {Component} from "react";
+import {WordsBtn} from 'educoder';
+import {Table} from "antd";
+import {Link,Switch,Route,Redirect} from 'react-router-dom';
+const echarts = require('echarts');
+
+
+
+function startechart(names, values){
+ var effChart = echarts.init(document.getElementById('shixun_skill_charts'));
+
+ var Color = ['#962e66', '#623363', '#CCCCCC', '#9A9A9A', '#FF8080', '#FF80C2', '#B980FF', '#80B9FF', '#6FE9FF', '#4DE8B4', '#F8EF63', '#FFB967'];
+
+ var option = {
+ backgroundColor: '#fff',
+ grid: {
+ left: '3%',
+ right: '8%',
+ bottom: '15%',
+ containLabel: true
+ },
+
+ tooltip: {
+ show: "true",
+ trigger: 'item',
+ formatter: '{c0}',
+ backgroundColor: 'rgba(0,0,0,0.7)', // 背景
+ padding: [8, 10], //内边距
+ extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
+ axisPointer: { // 坐标轴指示器，坐标轴触发有效
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+ }
+ },
+ xAxis: {
+ type: 'value',
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#CCCCCC'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#CCCCCC'
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#656565',
+ fontWeight: 'normal',
+ fontSize: '12'
+ },
+ formatter: '{value}'
+ }
+ },
+ yAxis: {
+ type: 'category',
+ axisLine: {
+ lineStyle: {
+ color: '#cccccc'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ splitArea: {
+ show: false
+ },
+ axisLabel: {
+ inside: false,
+ textStyle: {
+ color: '#656565',
+ fontWeight: 'normal',
+ fontSize: '12'
+ }
+ },
+ data: names
+ },
+ series: [{
+ name: '',
+ type: 'bar',
+ itemStyle: {
+ normal: {
+ show: true,
+ color: function(params) {
+ return Color[params.dataIndex]
+ },
+ barBorderRadius: 50,
+ borderWidth: 0,
+ borderColor: '#333'
+ }
+ },
+ barGap: '0%',
+ barCategoryGap: '50%',
+ data: values
+ }
+
+ ]
+ };
+ effChart.setOption(option);
+}
+class Colleagechartzu extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ }
+ }
+
+ componentDidMount() {
+ startechart(this.props.data,this.props.datavule)
+ }
+
+
+ componentDidUpdate = (prevProps) => {
+ if (prevProps.data!= this.props.data) {
+ startechart(this.props.data,this.props.datavule)
+ }
+ }
+
+
+ render() {
+ let {data}=this.props;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
+
+export default Colleagechartzu;
diff --git a/public/react/src/college/colleagecss/colleage.css b/public/react/src/college/colleagecss/colleage.css
new file mode 100644
index 000000000..801b86603
--- /dev/null
+++ b/public/react/src/college/colleagecss/colleage.css
@@ -0,0 +1,213 @@
+.yslstatistic-header {
+ width: 100%;
+ height: 240px;
+ background-image: url('/images/educoder/statistics.jpg');
+ background-size: 100% 100%;
+}
+.yslborder{
+ border: 1px solid;
+}
+.yslstatistic-header-title{
+ flex: 1;
+ display: flex;
+ align-items: center;
+ color: #4CACFF;
+ font-size: 32px;
+}
+.yslstatistic-header-content{
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+}
+.yslstatistic-header-item{
+ margin-bottom: 22px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: #fff;
+}
+.yslstatistic-header-item-label{
+ color: #989898;
+}
+
+.yslstatistic-base-item-label{
+ width: 217px;
+ text-align: center;
+ font-size: 16px;
+ height: 48px;
+ line-height: 48px;
+ color: #686868;
+ background: #F5F5F5;
+ border-top: 1px solid #EBEBEB;
+}
+.yslstatistic-base-item-labels{
+ width: 217px;
+ text-align: center;
+ height: 100px;
+ line-height: 100px;
+ background: #ffffff;
+ border-top: 1px solid #EBEBEB;
+ border-bottom: 1px solid #EBEBEB;
+}
+.yslstatistic-base-item-labelsp{
+ color: #000000;
+ font-size: 24px;
+}
+.yslstatistic-base-item-labelsspan{
+ color: #000000;
+ margin-left: 5px;
+ font-size: 16px;
+}
+.jibenshiyong100{
+ width: 100%;
+}
+
+.yslstatistic-header-item-content{
+ font-size: 24px;
+}
+/* 中间居中 */
+.intermediatecenter{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+/* 简单居中 */
+.intermediatecenterysls{
+ display: flex;
+ align-items: center;
+}
+.spacearound{
+ display: flex;
+ justify-content: space-around;
+
+}
+.spacebetween{
+ display: flex;
+ justify-content: space-between;
+}
+/* 头顶部居中 */
+.topcenter{
+ display: -webkit-flex;
+ flex-direction: column;
+ align-items: center;
+
+}
+
+
+/* x轴正方向排序 */
+/* 一 二 三 四 五 六 七 八 */
+.sortinxdirection{
+ display: flex;
+ flex-direction:row;
+}
+/* x轴反方向排序 */
+/* 八 七 六 五 四 三 二 一 */
+.xaxisreverseorder{
+ display: flex;
+ flex-direction:row-reverse;
+}
+/* 垂直布局 正方向*/
+/* 一
+ 二
+ 三
+ 四
+ 五
+ 六
+ 七
+ 八 */
+.verticallayout{
+ display: flex;
+ flex-direction:column;
+}
+/* 垂直布局 反方向*/
+.reversedirection{
+ display: flex;
+ flex-direction:column-reverse;
+}
+
+.h4{
+ font-size: 1.5rem;
+ font-weight: 500 !important;
+}
+.ysllinjibenshiyong{
+ font-weight: 500;
+ line-height: 1.2;
+ padding: 2rem 1.25rem;
+ border-bottom: unset;
+ background:#fff;
+}
+.linjibenshiyong{
+ font-weight: 500;
+ line-height: 1.2;
+ padding: 2rem 1.25rem;
+ border-bottom: unset;
+ background:#fff;
+ box-shadow:0px 6px 12px 0px rgba(0,0,0,0.1);
+ border-radius:2px;
+}
+.yslslinjibenshiyong{
+ font-weight: 500;
+ line-height: 1.2;
+ border-bottom: unset;
+ box-shadow:0px 6px 12px 0px rgba(0,0,0,0.1);
+ border-radius:2px;
+}
+.yinyin{
+ background: #fff;
+ box-shadow:0px 6px 12px 0px rgba(0,0,0,0.1);
+ border-radius:2px;
+}
+.edu-back-eeee{
+ background:#EEEEEE !important;
+}
+.mt-4{
+ margin-top: 1.5rem !important;
+}
+
+.statistic-label{
+ padding: 2rem 1.25rem;
+ font-size: 1.5rem;
+ font-weight: 400 !important;
+}
+.mb50{
+ padding-bottom: 50px !important;
+}
+.mt40{
+ margin-top: 40px;
+}
+.mb80{
+ margin-bottom: 80px;
+}
+.task-hide{overflow:hidden; white-space: nowrap; text-overflow:ellipsis;}
+a:hover{
+ color:#0056b3;
+}
+.color-blue{
+ color: #4CACFF;
+}
+
+.color-huang{
+ color:#ffc107 !important
+}
+.maxnamewidth105{
+ max-width: 105px;
+ overflow:hidden;
+ text-overflow:ellipsis;
+ white-space:nowrap;
+ cursor: default;
+}
+.maxnamewidth247{
+ max-width: 247px;
+ overflow:hidden;
+ text-overflow:ellipsis;
+ white-space:nowrap;
+ cursor: default;
+}
+.maxnamewidth340{
+ max-width: 340px;
+ overflow:hidden;
+ text-overflow:ellipsis;
+ white-space:nowrap;
+ cursor: default;
+}
diff --git a/public/react/src/common/components/comment/CommentForm.js b/public/react/src/common/components/comment/CommentForm.js
new file mode 100644
index 000000000..73e36cff9
--- /dev/null
+++ b/public/react/src/common/components/comment/CommentForm.js
@@ -0,0 +1,116 @@
+/*
+ * @Description: 评论表单
+ * @Author: tangjiang
+ * @Github:
+ * @Date: 2019-12-17 17:32:55
+ * @LastEditors: tangjiang
+ * @LastEditTime: 2019-12-18 17:51:44
+ */
+import React, { useState } from 'react';
+import { Form, Button, Input } from 'antd';
+import QuillForEditor from '../../quillForEditor';
+import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html'
+const FormItem = Form.Item;
+
+function CommentForm (props) {
+
+ const {
+ commentCtxChagne,
+ onCancel,
+ onSubmit,
+ form
+ } = props;
+
+ const { getFieldDecorator } = form;
+ const [ctx, setCtx] = useState('');
+
+ const options = [
+ ['bold', 'italic', 'underline'],
+ [{header: [1,2,3,false]}],
+ ['blockquote', 'code-block'],
+ ['link', 'image'],
+ ['formula']
+ ];
+ // const { form: { getFieldDecorator } } = props;
+ const [showQuill, setShowQuill] = useState(false);
+ // 点击输入框
+ const handleInputClick = () => {
+ setShowQuill(true);
+ }
+ // 取消
+ const handleCancle = () => {
+ setShowQuill(false);
+ onCancel && onCancel();
+ }
+
+ // 编辑器内容变化时
+ const handleContentChange = (content) => {
+ setCtx(content);
+ try {
+ const _html = new QuillDeltaToHtmlConverter(content.ops, {}).convert();
+ // props.form.setFieldsValue({'comment': _html.replace(/<\/?[^>]*>/g, '')});
+ props.form.setFieldsValue({'comment': _html});
+ } catch (error) {
+ console.log(error);
+ }
+ }
+ // 发送
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ props.form.validateFields((err, values) => {
+ if (!err) {
+ setShowQuill(false);
+ const content = ctx;
+ props.form.setFieldsValue({'comment': ''});
+ setCtx('');
+ console.log(content);
+ onSubmit && onSubmit(content);
+ }
+ });
+ }
+ return (
+
+ );
+}
+
+export default Form.create()(CommentForm);
diff --git a/public/react/src/common/components/comment/CommentIcon.js b/public/react/src/common/components/comment/CommentIcon.js
new file mode 100644
index 000000000..5440e2579
--- /dev/null
+++ b/public/react/src/common/components/comment/CommentIcon.js
@@ -0,0 +1,32 @@
+/*
+ * @Description:
+ * @Author: tangjiang
+ * @Github:
+ * @Date: 2019-12-18 10:49:46
+ * @LastEditors: tangjiang
+ * @LastEditTime: 2019-12-18 11:39:23
+ */
+import './index.scss';
+import React from 'react';
+import { Icon } from 'antd';
+function CommentIcon ({
+ type, // 图标类型
+ count, // 评论数
+ iconClick,
+ ...props
+}) {
+
+ // 点击图标
+ const handleSpanClick = () => {
+ iconClick && iconClick();
+ }
+
+ return (
+
+
+
+
+
+
+
+ 确定要删除该条回复吗?
), + onOk () { + console.log('点击了删除'); + } + }); + // ModalConfirm('提示', (确定要删除该条回复吗?
), () => { + // console.log('点击了删除'); + // }); + } + + // 评论头像 + const commentAvatar = (url) => ( +
+ );
+
+ // 评论信息
+ const commentInfo = () => (
+
+ 用户名
+ {moment(new Date(), 'YYYYMMDD HHmmss').fromNow()}
+
+ 这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容 +
+ ); + + // 加载更多 + const handleOnLoadMore = () => { + if (!arrow) { + // 展开所有 + } else { + // 收起 + } + setArrow(!arrow); + }; + + // 评论追加内容 + const commentAppend = () => { + + return ( +-
+
-
+ {commentAvatar()}
+ + {commentInfo()} + {commentCtx()} ++
+
-
+ {commentAvatar()}
+ + {commentInfo()} + {commentCtx()} ++
+
-
+ {commentAvatar()}
+ + {commentInfo()} + {commentCtx()} ++
+
+
-
+
展开其余23条评论
++
++
+
+ {commentInfo()}
+ {commentCtx()}
+
+ {commentAppend()}
+
+
+
+
+ {/* 回复 */}
+
+
+
+
+ -
+
+
+
+ );
+}
+
+export default QuillForEditor;
diff --git a/public/react/src/common/reactQuill/ImageBlot.js b/public/react/src/common/reactQuill/ImageBlot.js
new file mode 100644
index 000000000..091bd2c1f
--- /dev/null
+++ b/public/react/src/common/reactQuill/ImageBlot.js
@@ -0,0 +1,54 @@
+/*
+ * @Description: 重写图片
+ * @Author: tangjiang
+ * @Github:
+ * @Date: 2019-12-16 15:50:45
+ * @LastEditors: tangjiang
+ * @LastEditTime: 2019-12-17 16:44:48
+ */
+import Quill from "quill";
+
+const BlockEmbed = Quill.import('blots/block/embed');
+
+export default class ImageBlot extends BlockEmbed {
+
+ static create(value) {
+
+ const node = super.create();
+
+ node.setAttribute('alt', value.alt);
+ node.setAttribute('src', value.url);
+
+ if (value.width) {
+ node.setAttribute('width', value.width);
+ }
+ if (value.height) {
+ node.setAttribute('height', value.height);
+ }
+ // 宽度和高度都不存在时，
+ if (!value.width && !value.height) {
+ node.setAttribute('display', 'block');
+ node.setAttribute('width', '100%');
+ }
+ // 给图片添加点击事件
+ node.onclick = () => {
+ value.onClick && value.onClick(value.url);
+ }
+ return node;
+ }
+
+ static value (node) {
+
+ return {
+ alt: node.getAttribute('alt'),
+ url: node.getAttribute('src'),
+ onclick: node.onclick,
+ // width: node.width,
+ // height: node.height,
+ display: node.getAttribute('display')
+ };
+ }
+}
+
+ImageBlot.blotName = 'image';
+ImageBlot.tagName = 'img';
\ No newline at end of file
diff --git a/public/react/src/common/reactQuill/ReactQuill.js b/public/react/src/common/reactQuill/ReactQuill.js
new file mode 100644
index 000000000..1b4209409
--- /dev/null
+++ b/public/react/src/common/reactQuill/ReactQuill.js
@@ -0,0 +1,45 @@
+/*
+ * @Description:
+ * @Author: tangjiang
+ * @Github:
+ * @Date: 2019-12-09 09:09:42
+ * @LastEditors: tangjiang
+ * @LastEditTime: 2019-12-18 08:46:20
+ */
+import 'quill/dist/quill.core.css'; // 核心样式
+import 'quill/dist/quill.snow.css'; // 有工具栏
+import 'quill/dist/quill.bubble.css'; // 无工具栏
+import 'katex/dist/katex.min.css'; // katex 表达式样式
+import React, { useState, useReducer, useEffect } from 'react';
+import useQuill from './useQuill';
+
+function ReactQuill ({
+ disallowColors, // 不可见时颜色
+ placeholder, // 提示信息
+ uploadImage, // 图片上传
+ onChange, // 内容变化时
+ options, // 配置信息
+ value, // 显示的内容
+ style,
+ showUploadImage // 显示上传图片
+}) {
+
+ const [element, setElement] = useState(); // quill 渲染节点
+
+ useQuill({
+ disallowColors,
+ placeholder,
+ uploadImage,
+ onChange,
+ options,
+ value,
+ showUploadImage,
+ element
+ });
+
+ return (
+
+ );
+}
+
+export default ReactQuill;
diff --git a/public/react/src/common/reactQuill/deepEqual.js b/public/react/src/common/reactQuill/deepEqual.js
new file mode 100644
index 000000000..6f2b276bf
--- /dev/null
+++ b/public/react/src/common/reactQuill/deepEqual.js
@@ -0,0 +1,47 @@
+function deepEqual (prev, current) {
+ if (prev === current) { // 基本类型比较，值，类型都相同 或者同为 null or undefined
+ return true;
+ }
+
+ if ((!prev && current)
+ || (prev && !current)
+ || (!prev && !current)
+ ) {
+ return false;
+ }
+
+ if (Array.isArray(prev)) {
+ if (!Array.isArray(current)) return false;
+ if (prev.length !== current.length) return false;
+
+ for (let i = 0; i < prev.length; i++) {
+ if (!deepEqual(current[i], prev[i])) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ if (typeof current === 'object') {
+ if (typeof prev !== 'object') return false;
+ const prevKeys = Object.keys(prev);
+ const curKeys = Object.keys(current);
+
+ if (prevKeys.length !== curKeys.length) return false;
+
+ prevKeys.sort();
+ curKeys.sort();
+
+ for (let i = 0; i < prevKeys.length; i++) {
+ if (prevKeys[i] !== curKeys[i]) return false;
+ const key = prevKeys[i];
+ if (!deepEqual(prev[key], current[key])) return false;
+ }
+
+ return true;
+ }
+
+ return false;
+}
+
+export default deepEqual;
diff --git a/public/react/src/common/reactQuill/flatten.js b/public/react/src/common/reactQuill/flatten.js
new file mode 100644
index 000000000..237cb543f
--- /dev/null
+++ b/public/react/src/common/reactQuill/flatten.js
@@ -0,0 +1,26 @@
+/*
+ * @Description: 将多维数组转变成一维数组
+ * @Author: tangjiang
+ * @Github:
+ * @Date: 2019-12-09 09:35:01
+ * @LastEditors: tangjiang
+ * @LastEditTime: 2019-12-16 11:36:22
+ */
+function flatten (array) {
+ return flatten.rec(array, []);
+}
+
+flatten.rec = function flatten (array, result) {
+
+ for (let item of array) {
+ if (Array.isArray(item)) {
+ flatten(item, result);
+ } else {
+ result.push(item);
+ }
+ }
+
+ return result;
+}
+
+export default flatten;
diff --git a/public/react/src/common/reactQuill/index.js b/public/react/src/common/reactQuill/index.js
new file mode 100644
index 000000000..56a1a8d1f
--- /dev/null
+++ b/public/react/src/common/reactQuill/index.js
@@ -0,0 +1,108 @@
+/*
+ * @Description: 入口文件
+ * @Author: tangjiang
+ * @Github:
+ * @Date: 2019-12-17 10:41:48
+ * @LastEditors: tangjiang
+ * @LastEditTime: 2019-12-17 20:34:40
+ */
+import React, { useState, useCallback, useEffect } from 'react';
+import ReactQuill from './lib';
+
+function Wrapper (props) {
+ // 默认工具栏配置项
+ const toolbarConfig = [
+ ['bold', 'italic', 'underline'],
+ [{align: []}, {list: 'ordered'}, {list: 'bullet'}], // 列表
+ [{script: 'sub'}, {script: 'super'}],
+ [{header: [1,2,3,4,5,false]}],
+ ['blockquote', 'code-block'],
+ ['link', 'image', 'video'],
+ ['formula'],
+ ['clean']
+ ];
+
+ const [placeholder] = useState(props.placeholder || 'placeholder');
+ const [disableBold] = useState(false);
+ const [value, setValue] = useState(props.value || '');
+ const [toolbar, setToolbar] = useState(toolbarConfig);
+ const [theme, setTheme] = useState(props.theme || 'snow');
+ const [readOnly] = useState(props.readOnly || false);
+
+ const {
+ onContentChagne, // 当编辑器内容变化时调用该函数
+ showUploadImage, // 显示上传图片, 返回url，主要用于点击图片放大
+ } = props;
+
+ // 配置信息
+ const options = {
+ modules: {
+ toolbar: toolbar,
+ clipboard: {
+ matchVisual: false
+ }
+ },
+ readOnly: readOnly,
+ theme: theme
+ }
+ // 配置信息
+ useEffect (() => {
+ if (props.options) {
+ setToolbar(props.options);
+ }
+ setTheme(props.theme || 'snow');
+ setValue(props.value);
+ }, [props]);
+
+ // 当内容变化时
+ const handleOnChange = useCallback(
+ contents => {
+ if (disableBold) {
+ setValue({
+ ops: contents.ops.map(x => {
+ x = {...x};
+ if (x && x.attributes && x.attributes.bold) {
+ x.attributes = { ...x.attributes };
+ delete x.attributes.bold;
+ if (!Object.keys(x.attributes).length) {
+ delete x.attributes;
+ }
+ }
+ return x;
+ })
+ });
+ } else {
+ setValue(contents);
+ }
+ onContentChagne && onContentChagne(contents);
+ }, [disableBold]
+ );
+
+ // 图片上传
+ const handleUploadImage = (files) => {
+ console.log('选择的图片信息', files);
+ }
+
+ // 显示图片
+ const handleShowUploadImage = (url) => {
+ // console.log('上传的图片url:', url);
+ showUploadImage && showUploadImage(url);
+ }
+
+ return (
+
+ handleShowUploadImage(url)}
+ />
+
+ );
+}
+
+export default Wrapper;
+// ReactDOM.render(
@@ -131,19 +136,20 @@ const ControlSetting = (props) => {
const mapStateToProps = (state) => {
const {commonReducer, ojForUserReducer} = state;
- const {loading, excuteState, submitLoading } = commonReducer;
+ const {loading, excuteState, submitLoading, showOrHideControl } = commonReducer;
const { commitRecordDetail } = ojForUserReducer;
return {
loading,
submitLoading,
excuteState,
+ showOrHideControl,
// identifier: user_program_identifier,
commitRecordDetail // 提交详情
};
};
// changeSubmitLoadingStatus
const mapDispatchToProps = (dispatch) => ({
- showOrHideControl: (flag) => dispatch(actions.showOrHideControl(flag)),
+ changeShowOrHideControl: (flag) => dispatch(actions.changeShowOrHideControl(flag)),
changeLoadingState: (flag) => dispatch(actions.changeLoadingState(flag)),
changeSubmitLoadingStatus: (flag) => dispatch(actions.changeSubmitLoadingStatus(flag)),
debuggerCode: (identifier, values) => dispatch(actions.debuggerCode(identifier, values)),
diff --git a/public/react/src/modules/developer/components/controlSetting/index.scss b/public/react/src/modules/developer/components/controlSetting/index.scss
index 97838ce5c..31beda8a5 100644
--- a/public/react/src/modules/developer/components/controlSetting/index.scss
+++ b/public/react/src/modules/developer/components/controlSetting/index.scss
@@ -2,7 +2,8 @@
position: absolute;
bottom: 0;
width: 100%;
- background:rgba(30,30,30,1);
+ // background: red;
+ // background:rgba(30,30,30,1);
// height: 56px;
.control_tab{
position: absolute;
@@ -52,8 +53,8 @@
height: 56px;
padding-right: 30px;
padding-left: 10px;
- // background: #000;
- background:rgba(48,48,48,1);
+ background: rgba(18,28,36,1);
+ // background:rgba(48,48,48,1);
}
.setting_drawer{
diff --git a/public/react/src/modules/developer/components/execResult/index.js b/public/react/src/modules/developer/components/execResult/index.js
index 32bbbee91..6f9341b9a 100644
--- a/public/react/src/modules/developer/components/execResult/index.js
+++ b/public/react/src/modules/developer/components/execResult/index.js
@@ -4,7 +4,7 @@
* @Github:
* @Date: 2019-11-28 08:44:54
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-10 09:24:02
+ * @LastEditTime: 2019-12-19 10:44:16
*/
import './index.scss';
import React, { useState, useEffect } from 'react';
@@ -38,6 +38,15 @@ function ExecResult (props) {
);
+
+ const renderError = () => (
+
+ Loading Katex...
+
+ `
+ }
+ // 清空内容
+ element.innerHTML = '';
+ console.log(element);
+ // 创建 quill 节点
+ const quillNode = document.createElement('div');
+ element.appendChild(quillNode); // 将quill节点追回到 element 元素中
+
+ const quill = new Quill(element, options);
+ setQuill(quill);
+ // 加载上传图片功能
+ if (typeof uploadImage === 'function') {
+ quill.getModule('toolbar').addHandler('image', (e) => {
+ // 创建type类型输入框加载本地图片
+ const input = document.createElement('input');
+ input.setAttribute('type', 'file');
+ input.setAttribute('accept', 'image/*');
+ input.click();
+
+ input.onchange = async (e) => {
+ const file = input.files[0]; // 获取文件信息
+ const formData = new FormData();
+ formData.append('file', file);
+
+ // const reader = new FileReader();
+ // reader.readAsDataURL(file);
+ // console.log('文件信息===>>', reader);
+ // reader.onload = function (e) {
+ // debugger;
+ // console.log('文件信息===>>', e.target.result);
+ // const image = new Image();
+ // image.src = e.target.result;
+
+ // image.onload = function () {
+ // // file.width =
+ // console.log(image.width, image.height);
+ // }
+ // }
+
+ const range = quill.getSelection(true);
+ let fileUrl = ''; // 保存上传成功后图片的url
+ // 上传文件
+ const result = await fetchUploadImage(formData);
+ // 获取上传图片的url
+ if (result.data && result.data.id) {
+ fileUrl = getImageUrl(`api/attachments/${result.data.id}`);
+ }
+ // 根据id获取文件路径
+ const { width, height } = imgAttrs;
+ // console.log('上传图片的url:', fileUrl);
+ if (fileUrl) {
+ quill.insertEmbed(range.index, 'image', {
+ url: fileUrl,
+ alt: '',
+ onClick: showUploadImage,
+ width,
+ height
+ });
+ }
+ }
+ });
+ }
+
+ return () => {
+ element.innerHTML = '';
+ }
+ }, [
+ element,
+ options,
+ requireKatex,
+ katexLoaded,
+ ]);
+
+ return quill;
+}
+
+export default useMountQuill;
diff --git a/public/react/src/common/reactQuill/useQuill.js b/public/react/src/common/reactQuill/useQuill.js
new file mode 100644
index 000000000..b959dbc52
--- /dev/null
+++ b/public/react/src/common/reactQuill/useQuill.js
@@ -0,0 +1,60 @@
+/*
+ * @Description:
+ * @Author: tangjiang
+ * @Github:
+ * @Date: 2019-12-09 09:09:50
+ * @LastEditors: tangjiang
+ * @LastEditTime: 2019-12-17 15:46:50
+ */
+import useQuillPlaceholder from './useQuillPlaceholder';
+import useQuillValueSync from './useQuillValueSync';
+import useQuillOnChange from './useQuillOnChange';
+import useMountQuill from './useMountQuill';
+import { useEffect } from 'react';
+
+function useQuill ({
+ disallowColors,
+ placeholder,
+ uploadImage,
+ onChange,
+ options,
+ value,
+ element,
+ showUploadImage
+}) {
+
+ // 获取 quill 实例
+ const quill = useMountQuill({
+ element,
+ options,
+ uploadImage,
+ showUploadImage
+ });
+
+ useEffect(() => {
+ if (disallowColors && quill) {
+ quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
+ delta.ops = delta.ops.map(op => {
+ if (op.attributes && op.attributes.color) {
+ const { color, ...attributes } = op.attributes;
+ return {
+ ...op,
+ attributes
+ }
+ }
+ return op;
+ });
+ return delta;
+ });
+ }
+ }, [
+ disallowColors,
+ quill
+ ]);
+
+ useQuillPlaceholder(quill, placeholder);
+ useQuillValueSync(quill, value);
+ useQuillOnChange(quill, onChange);
+}
+
+export default useQuill;
diff --git a/public/react/src/common/reactQuill/useQuillOnChange.js b/public/react/src/common/reactQuill/useQuillOnChange.js
new file mode 100644
index 000000000..45333a4e1
--- /dev/null
+++ b/public/react/src/common/reactQuill/useQuillOnChange.js
@@ -0,0 +1,33 @@
+/*
+ * @Description:
+ * @Author: tangjiang
+ * @Github:
+ * @Date: 2019-12-12 19:49:11
+ * @LastEditors: tangjiang
+ * @LastEditTime: 2019-12-16 11:39:27
+ */
+import { useEffect } from 'react';
+
+function useQuillOnChange (quill, onChange) {
+
+ useEffect(() => {
+
+ if (!quill) return;
+ if (typeof onChange !== 'function') return;
+
+ let handler;
+
+ quill.on(
+ 'text-change',
+ (handler = () => {
+ onChange(quill.getContents()); // getContents: 检索编辑器内容
+ })
+ );
+
+ return () => {
+ quill.off('text-change', handler);
+ }
+ }, [quill, onChange]);
+}
+
+export default useQuillOnChange;
diff --git a/public/react/src/common/reactQuill/useQuillPlaceholder.js b/public/react/src/common/reactQuill/useQuillPlaceholder.js
new file mode 100644
index 000000000..ccc341568
--- /dev/null
+++ b/public/react/src/common/reactQuill/useQuillPlaceholder.js
@@ -0,0 +1,22 @@
+/*
+ * @Description:
+ * @Author: tangjiang
+ * @Github:
+ * @Date: 2019-12-09 09:28:34
+ * @LastEditors: tangjiang
+ * @LastEditTime: 2019-12-16 11:39:48
+ */
+import { useEffect } from 'react'
+
+function useQuillPlaceholder (
+ quill,
+ placeholder
+) {
+
+ useEffect(() => {
+ if (!quill || !quill.root) return;
+ quill.root.dataset.placeholder = placeholder;
+ }, [quill, placeholder]);
+}
+
+export default useQuillPlaceholder;
diff --git a/public/react/src/common/reactQuill/useQuillValueSync.js b/public/react/src/common/reactQuill/useQuillValueSync.js
new file mode 100644
index 000000000..696d88949
--- /dev/null
+++ b/public/react/src/common/reactQuill/useQuillValueSync.js
@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+import deepEqual from './deepEqual.js'
+
+function useQuillValueSync(quill, value) {
+ const [selection, setSelection] = useState(null)
+
+ useEffect(() => {
+ if (!quill) return
+
+ const previous = quill.getContents()
+ const current = value
+
+ if (!deepEqual(previous, current)) {
+ setSelection(quill.getSelection())
+ if (typeof value === 'string') {
+ quill.clipboard.dangerouslyPasteHTML(value, 'api')
+ } else {
+ quill.setContents(value)
+ }
+ }
+ }, [quill, value, setSelection])
+
+ useEffect(() => {
+ if (quill && selection) {
+ quill.setSelection(selection)
+ setSelection(null)
+ }
+ }, [quill, selection, setSelection])
+}
+
+export default useQuillValueSync
diff --git a/public/react/src/modules/developer/DeveloperHome.js b/public/react/src/modules/developer/DeveloperHome.js
index 5f787659e..73a5c37a1 100644
--- a/public/react/src/modules/developer/DeveloperHome.js
+++ b/public/react/src/modules/developer/DeveloperHome.js
@@ -16,7 +16,7 @@ import MultipTags from './components/multiptags';
// import { Link } from 'react-router-dom';
import CONST from '../../constants';
import { withRouter } from 'react-router';
-import { toStore } from 'educoder';
+import { toStore, CNotificationHOC } from 'educoder';
// import MyIcon from '../../common/components/MyIcon';
const {tagBackground, diffText} = CONST;
@@ -249,17 +249,26 @@ class DeveloperHome extends React.PureComponent {
// 删除
handleClickDelete = (record) => {
const { deleteItem } = this.props;
- Modal.confirm({
- title: '删除',
+ this.props.confirm({
+ title: '提示',
content: `确定要删除${record.name}吗?`,
- okText: '确定',
- cancelText: '取消',
onOk () {
// 调用删除接口
console.log(record.identifier);
deleteItem(record.identifier);
}
});
+ // Modal.confirm({
+ // title: '删除',
+ // content: `确定要删除${record.name}吗?`,
+ // okText: '确定',
+ // cancelText: '取消',
+ // onOk () {
+ // // 调用删除接口
+ // console.log(record.identifier);
+ // deleteItem(record.identifier);
+ // }
+ // });
}
// table条件变化时
handleTableChange = (pagination, filters, sorter) => {
@@ -562,5 +571,5 @@ const mapDispatchToProps = (dispatch) => ({
export default withRouter(connect(
mapStateToProps,
mapDispatchToProps
-)(DeveloperHome));
+)(CNotificationHOC() (DeveloperHome)));
// export default DeveloperHome;
diff --git a/public/react/src/modules/developer/components/controlSetting/index.js b/public/react/src/modules/developer/components/controlSetting/index.js
index 587e1bee9..1d4d7834c 100644
--- a/public/react/src/modules/developer/components/controlSetting/index.js
+++ b/public/react/src/modules/developer/components/controlSetting/index.js
@@ -4,10 +4,10 @@
* @Github:
* @Date: 2019-11-27 16:02:36
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-13 17:32:33
+ * @LastEditTime: 2019-12-19 19:47:32
*/
import './index.scss';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
import { Tabs, Button, Icon } from 'antd';
import { connect } from 'react-redux';
import InitTabCtx from '../initTabCtx';
@@ -23,14 +23,15 @@ const ControlSetting = (props) => {
submitLoading,
identifier,
excuteState,
+ showOrHideControl,
commitRecordDetail,
changeLoadingState,
changeSubmitLoadingStatus,
- showOrHideControl,
+ changeShowOrHideControl,
// debuggerCode,
// startDebuggerCode, // 外部存入
onDebuggerCode,
- updateCode,
+ // updateCode,
onSubmitForm
} = props;
const [defaultActiveKey, setDefaultActiveKey] = useState('1'); // 当前选中的tab
@@ -44,10 +45,14 @@ const ControlSetting = (props) => {
setDefaultActiveKey(key);
}
+ useEffect(() => {
+ setShowTextResult(props.showOrHideControl);
+ }, [props]);
+
// 显示/隐藏tab
const handleShowControl = () => {
setShowTextResult(!showTextResult);
- showOrHideControl(!showTextResult);
+ changeShowOrHideControl(!showTextResult);
}
// 调试代码
@@ -55,7 +60,7 @@ const ControlSetting = (props) => {
// console.log(formRef.current.handleTestCodeFormSubmit);
// 调出控制台界面
setShowTextResult(true);
- showOrHideControl(true);
+ changeShowOrHideControl(true);
formRef.current.handleTestCodeFormSubmit(() => {
setDefaultActiveKey('2');
});
@@ -84,7 +89,7 @@ const ControlSetting = (props) => {
+
+ 未知异常
+
+
+ )
+
const renderFinish = () => {
const {
error_line,
@@ -60,6 +69,7 @@ function ExecResult (props) {
)
}
+ // console.log('执行结果====》》》》', status);
const excuteCtx = (state) => {
if (state === 0) {
return (
@@ -118,6 +128,8 @@ function ExecResult (props) {
setRenderCtx(() => (readerLoaded));
} else if ('finish' === excuteState) {
setRenderCtx(() => (renderFinish));
+ } else if ('error' === excuteState) {
+ setRenderCtx(() => (renderError))
}
}, [excuteState]);
diff --git a/public/react/src/modules/developer/components/initTabCtx/index.js b/public/react/src/modules/developer/components/initTabCtx/index.js
index 3834a3e11..3e707daa1 100644
--- a/public/react/src/modules/developer/components/initTabCtx/index.js
+++ b/public/react/src/modules/developer/components/initTabCtx/index.js
@@ -4,7 +4,7 @@
* @Github:
* @Date: 2019-11-27 19:46:14
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-13 17:38:42
+ * @LastEditTime: 2019-12-19 10:47:05
*/
import './index.scss';
import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
@@ -26,6 +26,7 @@ function InitTabCtx (props, ref) {
const { inputValue, onDebuggerCode } = props;
+ console.log('default value', inputValue);
useImperativeHandle(ref, () => ({
handleTestCodeFormSubmit: (cb) => {
// console.log('父组件调用我啦~~~~~~~~~');
@@ -33,6 +34,10 @@ function InitTabCtx (props, ref) {
}
}));
+ useEffect(() => {
+ console.log('初始值: ========', props);
+ }, [props]);
+
// 渲染文本提示信息
const renderText = () => (请在这里添加测试用例，点击“调试代码”时将从这里读取输入来测试你的代码...);
// 渲染表单信息
diff --git a/public/react/src/modules/developer/components/initTabCtx/index.scss b/public/react/src/modules/developer/components/initTabCtx/index.scss
index 449db1d2a..5427aa374 100644
--- a/public/react/src/modules/developer/components/initTabCtx/index.scss
+++ b/public/react/src/modules/developer/components/initTabCtx/index.scss
@@ -49,7 +49,8 @@
}
.input_textarea_style{
- background:rgba(30,30,30,1) !important;
+ // background:rgba(30,30,30,1) !important;
+ background:rgba(7,15,25,1) !important;
color: #fff;
border-color: transparent;
outline: none;
diff --git a/public/react/src/modules/developer/components/monacoSetting/index.js b/public/react/src/modules/developer/components/monacoSetting/index.js
index a101819e0..669439577 100644
--- a/public/react/src/modules/developer/components/monacoSetting/index.js
+++ b/public/react/src/modules/developer/components/monacoSetting/index.js
@@ -4,10 +4,11 @@
* @Github:
* @Date: 2019-11-25 17:50:33
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-06 16:51:48
+ * @LastEditTime: 2019-12-19 19:32:08
*/
import React, { useState } from 'react';
import { fromStore, toStore } from 'educoder';
+// import { Icon } from 'antd';
// import { Select } from 'antd';
// const { Option } = Select;
const SettingDrawer = (props) => {
diff --git a/public/react/src/modules/developer/components/myMonacoEditor/index.js b/public/react/src/modules/developer/components/myMonacoEditor/index.js
index 60f54ee0a..948d5a4f5 100644
--- a/public/react/src/modules/developer/components/myMonacoEditor/index.js
+++ b/public/react/src/modules/developer/components/myMonacoEditor/index.js
@@ -4,12 +4,12 @@
* @Github:
* @Date: 2019-11-27 15:02:52
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-13 16:16:56
+ * @LastEditTime: 2019-12-19 19:36:24
*/
import './index.scss';
import React, { useState, useRef, useEffect } from 'react';
-import { Drawer, Modal } from 'antd';
-import { fromStore } from 'educoder';
+import { Drawer, Modal, Icon, Badge } from 'antd';
+import { fromStore, CNotificationHOC } from 'educoder';
import { connect } from 'react-redux';
import MonacoEditor from '@monaco-editor/react';
import SettingDrawer from '../../components/monacoSetting';
@@ -19,16 +19,25 @@ import MyIcon from '../../../../common/components/MyIcon';
// import actions from '../../../../redux/actions';
const { fontSetting, opacitySetting } = CONST;
+const maps = {
+ 'c': 'main.c',
+ 'c++': 'main.cc',
+ 'java': 'main.java',
+ 'pythone': 'main.py'
+};
function MyMonacoEditor (props, ref) {
const {
+ notice,
language,
identifier,
+ hadCodeUpdate,
showOrHideControl,
// saveUserInputCode,
onCodeChange,
- onRestoreInitialCode
+ onRestoreInitialCode,
+ onUpdateNotice
} = props;
const [showDrawer, setShowDrawer] = useState(false); // 控制配置滑框
@@ -50,7 +59,7 @@ function MyMonacoEditor (props, ref) {
}, [props]);
useEffect(() => {
- setHeight(showOrHideControl ? 'calc(100% - 382px)' : 'calc(100% - 56px)');
+ setHeight(showOrHideControl ? 'calc(100% - 378px)' : 'calc(100% - 56px)');
}, [showOrHideControl]);
// 控制侧边栏设置的显示
@@ -93,28 +102,51 @@ function MyMonacoEditor (props, ref) {
// 恢复初始代码
const handleRestoreCode = () => {
- Modal.confirm({
+ props.confirm({
+ title: '提示',
content: '确定要恢复代码吗?',
- okText: '确定',
- cancelText: '取消',
onOk () {
onRestoreInitialCode && onRestoreInitialCode();
}
})
+ // Modal.confirm({
+ // content: '确定要恢复代码吗?',
+ // okText: '确定',
+ // cancelText: '取消',
+ // onOk () {
+ // onRestoreInitialCode && onRestoreInitialCode();
+ // }
+ // })
+ }
+
+ const handleUpdateNotice = () => {
+ if (props.notice) {
+ onUpdateNotice && onUpdateNotice();
+ }
}
const renderRestore = identifier ? (
{/* 未保存时 ? '学员初始代码文件' : main.x */}
- {identifier ? '' : '学员初始代码文件'}
- {identifier ? '已保存' : ''}
- {renderRestore}
- {/* */}
+ {identifier ? language ? maps[language.toLowerCase()] : '' : '学员初始代码文件'}
+ {identifier ? '已保存' : ''}
+
+
+ {renderRestore}
发布后即可应用到自己管理的课堂
是否确认发布?
发布后即可应用到自己管理的课堂
是否确认发布?
发布后即可应用到自己管理的课堂
是否确认发布?
是否确认撤销发布?
), () => { - changePublishLoadingStatus(true); - handleCancelPublish(props, identifier); + // ModalConfirm('提示', (是否确认撤销发布?
), () => { + // changePublishLoadingStatus(true); + // handleCancelPublish(props, identifier); + // }); + props.confirm({ + title: '提示', + content: ((是否确认撤销发布?
)), + onOk () { + changePublishLoadingStatus(true); + handleCancelPublish(props, identifier); + } }); - } // 取消保存/取消按钮 @@ -125,6 +139,7 @@ const NewOrEditTask = (props) => { const renderPubOrFight = () => { const pubButton = isPublish ? (
-
-
-
-
*/}
出题者: - {username} + {username}
-
- {/*
+ {this.props&&this.props.status>1?
{AccountProfiletype===true?简介
{this.props.identity < 5 && ChallengesDataList&&ChallengesDataList.shixun_status < 3 ?
-
+
{/*![]({getImageUrl("images/educoder/icon/edit.svg")})
*/}
编辑
- :""}
+ :""}
{this.props.user && this.props.user.main_site === true ?
this.props.identity < 5?实训制作指南 : "":""}
@@ -407,7 +419,7 @@ class Challenges extends Component {
{
`
#shixunchallengesid{
- max-height: 260px;
+ max-height: 300px;
overflow: hidden;
}
`
@@ -427,14 +439,22 @@ class Challenges extends Component {
- {this.state.opentitletype===true?this.opentitle()} className={"pointer Breadcrumbfont color-grey-9 "}>
+
+ {this.state.isopentitletype==="Less"?"":this.state.opentitletype===true?this.opentitle()} className={"pointer Breadcrumbfont color-grey-9 "}>
阅读全文
:this.opentitle()} className={"pointer Breadcrumbfont color-grey-9 "}>
收起全文
diff --git a/public/react/src/modules/tpm/shixunchild/Challenges/Challengesjupyter.js b/public/react/src/modules/tpm/shixunchild/Challenges/Challengesjupyter.js
index fcdbed408..e04ad17c9 100644
--- a/public/react/src/modules/tpm/shixunchild/Challenges/Challengesjupyter.js
+++ b/public/react/src/modules/tpm/shixunchild/Challenges/Challengesjupyter.js
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { Link } from "react-router-dom";
-import { markdownToHTML, configShareForCustom} from 'educoder'
+import { markdownToHTML, configShareForCustom,getImageUrl} from 'educoder'
import { Divider, Tooltip } from 'antd';
import LoadingSpin from '../../../../common/LoadingSpin';
import 'antd/lib/pagination/style/index.css';
@@ -23,7 +23,8 @@ class Challengesjupyter extends Component {
booljupyterurls:false,
loading:false,
boxoffsetHeigh:0,
- opentitletype:true
+ opentitletype:true,
+ isopentitletype:"Less",
}
}
@@ -41,6 +42,11 @@ class Challengesjupyter extends Component {
ChallengesDataList: response.data,
sumidtype: false,
});
+ if(response.data.description=== ""||response.data.description===null||response.data.description===undefined){
+ this.setState({
+ isopentitletype:"Less",
+ })
+ }
}
}
}).catch((error) => {
@@ -55,13 +61,15 @@ class Challengesjupyter extends Component {
let box=document.getElementById("shixunchallengesid");
if(box){
boxoffsetHeigh=box.offsetHeight
- if(boxoffsetHeigh<260){
+ if(boxoffsetHeigh<300){
this.setState({
- opentitletype:false,
+ isopentitletype:"Less",
boxoffsetHeigh:boxoffsetHeigh
})
}else{
this.setState({
+ isopentitletype:"greater",
+ opentitletype:true,
boxoffsetHeigh:boxoffsetHeigh
})
}
@@ -219,17 +227,17 @@ class Challengesjupyter extends Component {
学习统计
- 已完成 {TPMRightSectionData&&TPMRightSectionData.complete_count} 个 / 共 {TPMRightSectionData&&TPMRightSectionData.challenge_count} 关
+ 已完成 {TPMRightSectionData&&TPMRightSectionData.complete_count===null?0:TPMRightSectionData&&TPMRightSectionData.complete_count} 个 / 共 {TPMRightSectionData&&TPMRightSectionData.challenge_count} 关
diff --git a/public/react/src/modules/tpm/component/TPMright.css b/public/react/src/modules/tpm/component/TPMright.css
index a75160bf5..0d6b306fd 100644
--- a/public/react/src/modules/tpm/component/TPMright.css
+++ b/public/react/src/modules/tpm/component/TPMright.css
@@ -119,9 +119,14 @@
.padd252020px{
padding: 25px 20px 15px;
}
+
.rightjinengs{
height: 35px;
margin-top: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
}
.borderbottomf4{
diff --git a/public/react/src/modules/tpm/shixunchild/Challenges/Challenges.js b/public/react/src/modules/tpm/shixunchild/Challenges/Challenges.js
index 307823ee8..548e7224a 100644
--- a/public/react/src/modules/tpm/shixunchild/Challenges/Challenges.js
+++ b/public/react/src/modules/tpm/shixunchild/Challenges/Challenges.js
@@ -34,7 +34,8 @@ class Challenges extends Component {
operationstrue:false,
isSpin:false,
boxoffsetHeigh:0,
- opentitletype:true
+ opentitletype:true,
+ isopentitletype:"Less",
}
}
@@ -52,6 +53,13 @@ class Challenges extends Component {
ChallengesDataList: response.data,
sumidtype: false,
});
+
+ if(response.data.description=== ""||response.data.description===null||response.data.description===undefined){
+ this.setState({
+ isopentitletype:"Less",
+ })
+ }
+
}
}
}).catch((error) => {
@@ -71,17 +79,19 @@ class Challenges extends Component {
let box=document.getElementById("shixunchallengesid");
if(box){
boxoffsetHeigh=box.offsetHeight
- if(boxoffsetHeigh<260){
+ if(boxoffsetHeigh<300){
this.setState({
- opentitletype:false,
+ isopentitletype:"Less",
boxoffsetHeigh:boxoffsetHeigh
})
}else{
this.setState({
+ opentitletype:true,
+ isopentitletype:"greater",
boxoffsetHeigh:boxoffsetHeigh
})
}
-
+ console.log(boxoffsetHeigh)
}
}
@@ -322,7 +332,8 @@ class Challenges extends Component {
opentitle=()=>{
this.setState({
- opentitletype:!this.state.opentitletype
+ opentitletype:!this.state.opentitletype,
+
})
}
@@ -334,6 +345,7 @@ class Challenges extends Component {
}
let id = this.props.match.params.shixunId;
const antIcon = */}
编辑
- :""}
+ :""}
{this.props.user && this.props.user.main_site === true ?
this.props.identity < 5?实训制作指南 : "":""}
@@ -407,7 +419,7 @@ class Challenges extends Component {
{
`
#shixunchallengesid{
- max-height: 260px;
+ max-height: 300px;
overflow: hidden;
}
`
@@ -427,14 +439,22 @@ class Challenges extends Component {
-
+ {ChallengesDataList === undefined || ChallengesDataList&&ChallengesDataList.description=== ""||ChallengesDataList&&ChallengesDataList.description===null||ChallengesDataList&&ChallengesDataList.description===undefined? +
+ {this.props.identity < 5?![]({getImageUrl("images/educoder/shixunnodata.png")})
:![]({getImageUrl("images/educoder/nodata.png")})
}
+
+ ::}
+ 暂时还没有相关数据哦！
+{ChallengesDataList === undefined ? "" :ChallengesDataList&&ChallengesDataList.description===null?"":
} - + }
简介
-
+
编辑
-
+
{this.state.opentitletype===true?