After Width: | Height: | Size: 82 KiB |
After Width: | Height: | Size: 84 KiB |
After Width: | Height: | Size: 83 KiB |
Before Width: | Height: | Size: 407 KiB After Width: | Height: | Size: 410 KiB |
@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
import MiniPagination from './components/mini-pagination'
|
||||
|
||||
export default () => {
|
||||
function onPageChange(page) {
|
||||
console.log(page, '-----------')
|
||||
}
|
||||
return <MiniPagination onChange={onPageChange} current={1} total={100} pageSize={16} />
|
||||
}
|
@ -0,0 +1,32 @@
|
||||
import React, { useState } from 'react'
|
||||
import './index.scss'
|
||||
function noop() { }
|
||||
|
||||
export default ({ current, defaultCurrent, total, pageSize, onChange = noop }) => {
|
||||
const maxPage = Math.ceil(total / pageSize)
|
||||
const [page, setPage] = useState(current || defaultCurrent)
|
||||
|
||||
function next() {
|
||||
if (page < maxPage) {
|
||||
let value = page + 1
|
||||
setPage(value)
|
||||
onChange(value)
|
||||
}
|
||||
}
|
||||
|
||||
function prev() {
|
||||
if (page > 1) {
|
||||
let value = page - 1
|
||||
setPage(value)
|
||||
onChange(value)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mini-pagination">
|
||||
<a class={page === 1 ? 'disabled' : 'normal'} onClick={prev}>上一页</a>
|
||||
<a class={page === maxPage ? 'disabled' : 'normal'} onClick={next} >下一页</a>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
@ -0,0 +1,65 @@
|
||||
.mini-pagination {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0 10px 0 22px;
|
||||
border-width: 1px;
|
||||
border-radius: 3px;
|
||||
margin-right: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
border-style: solid;
|
||||
outline: none;
|
||||
border-color: #c4c6cf;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: #f2f3f7;
|
||||
border-color: #a0a2ad;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 8px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
height: 8px;
|
||||
transform: rotate(-45deg);
|
||||
border-top: 1px solid #333;
|
||||
border-left: 1px solid #333;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding: 0 22px 0 10px;
|
||||
margin: 0 0 0 4px;
|
||||
|
||||
&:before {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: #f7f8fa;
|
||||
border-color: #e6e7eb;
|
||||
color: #e0e0e0;
|
||||
|
||||
&:before {
|
||||
border-top: 1px solid #e0e0e0;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,117 @@
|
||||
import * as monaco from 'monaco-editor'
|
||||
import { union } from 'lodash'
|
||||
const ifelse = {
|
||||
label: 'ifelse',
|
||||
kind: monaco.languages.CompletionItemKind.Snippet,
|
||||
insertText: [
|
||||
'if (${1:condition}) {',
|
||||
'\t$0',
|
||||
'} else {',
|
||||
'\t',
|
||||
'}'
|
||||
].join('\n'),
|
||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
|
||||
documentation: 'If-Else Statement'
|
||||
}
|
||||
|
||||
|
||||
function getWordsInString(string) {
|
||||
return string.match(/[A-z]+/g)
|
||||
}
|
||||
|
||||
const cArray = ['auto', 'break', 'case', 'char', 'const', 'continue', 'default', 'do', 'double', 'else', 'enum', 'extern',
|
||||
'float', 'for', 'goto', 'if', 'int', 'long', 'register', 'return', 'short', 'signed', 'sizeof', 'static', 'struct',
|
||||
'switch', 'typedef', 'union', 'unsigned', 'void', 'volatile', 'while', 'inline', 'restrict', '_Bool', '_Complex',
|
||||
'_Imaginary', '_Alignas', '_Alignof', '_Atomic', '_Static_assert', '_Noreturn', '_Thread_local', '_Generic']
|
||||
|
||||
monaco.languages.registerCompletionItemProvider('cpp', {
|
||||
provideCompletionItems: (model) => {
|
||||
const currentFileWords = getWordsInString(model.getValue());
|
||||
const all = union(cArray, currentFileWords)
|
||||
var suggestions = all.map((item) => {
|
||||
return {
|
||||
label: item,
|
||||
kind: monaco.languages.CompletionItemKind.Keyword,
|
||||
insertText: item,
|
||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
|
||||
}
|
||||
});
|
||||
suggestions.push(ifelse)
|
||||
|
||||
return { suggestions: suggestions };
|
||||
}
|
||||
});
|
||||
|
||||
// https://www.programiz.com/python-programming/keyword-list
|
||||
const pythonArray = ['False', 'None', 'True', 'and', 'as', 'assert', 'break', 'class', 'continue', 'def', 'del', 'elif',
|
||||
'else', 'except', 'finally', 'for', 'from', 'global', 'if', 'import', 'in', 'is', 'lambda', 'nonlocal', 'not', 'or',
|
||||
'pass', 'raise', 'return', 'try', 'while', 'with', 'yield']
|
||||
|
||||
monaco.languages.registerCompletionItemProvider('python', {
|
||||
provideCompletionItems: (model) => {
|
||||
const currentFileWords = getWordsInString(model.getValue());
|
||||
const all = union(pythonArray, currentFileWords)
|
||||
var suggestions = all.map((item) => {
|
||||
return {
|
||||
label: item,
|
||||
kind: monaco.languages.CompletionItemKind.Keyword,
|
||||
insertText: item,
|
||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
|
||||
}
|
||||
});
|
||||
suggestions.push({
|
||||
label: 'print',
|
||||
kind: monaco.languages.CompletionItemKind.Snippet,
|
||||
insertText: [
|
||||
'print($0)',
|
||||
].join('\n'),
|
||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
|
||||
documentation: 'print'
|
||||
})
|
||||
return { suggestions: suggestions };
|
||||
}
|
||||
});
|
||||
|
||||
const javaArray = ['abstract', 'assert', 'boolean', 'break', 'byte', 'case', 'catch', 'char', 'class', 'const',
|
||||
'continue', 'default', 'do', 'double', 'else', 'enum', 'extends', 'final', 'finally', 'float', 'for', 'goto', 'if',
|
||||
'implements', 'import', 'instance of', 'int', 'interface', 'long', 'native',
|
||||
'new', 'package', 'private', 'protected', 'public', 'return', 'strictfp', 'short', 'static', 'super', 'switch',
|
||||
'synchronized', 'this', 'throw', 'throws', 'transient', 'try', 'void', 'volatile', 'while']
|
||||
|
||||
monaco.languages.registerCompletionItemProvider('java', {
|
||||
provideCompletionItems: (model) => {
|
||||
const currentFileWords = getWordsInString(model.getValue());
|
||||
const all = _.union(javaArray, currentFileWords)
|
||||
|
||||
var suggestions = all.map((item) => {
|
||||
return {
|
||||
label: item,
|
||||
kind: monaco.languages.CompletionItemKind.Keyword,
|
||||
insertText: item,
|
||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
|
||||
}
|
||||
});
|
||||
suggestions.push(ifelse)
|
||||
suggestions.push({
|
||||
label: 'main',
|
||||
kind: monaco.languages.CompletionItemKind.Snippet,
|
||||
insertText: [
|
||||
'public static void main(String[] args) {',
|
||||
'\t$0',
|
||||
'}',
|
||||
].join('\n'),
|
||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
|
||||
documentation: 'main function'
|
||||
})
|
||||
suggestions.push({
|
||||
label: 'System.out.print',
|
||||
kind: monaco.languages.CompletionItemKind.Snippet,
|
||||
insertText: [
|
||||
'System.out.print($0)',
|
||||
].join('\n'),
|
||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
|
||||
documentation: 'system print'
|
||||
})
|
||||
return { suggestions: suggestions };
|
||||
}
|
||||
});
|
@ -0,0 +1,54 @@
|
||||
import React,{ Component } from "react";
|
||||
import axios from 'axios';
|
||||
import '../signin/css/signincdi.css';
|
||||
import Videostatisticscom from './component/Videostatisticscom';
|
||||
|
||||
|
||||
//在线学习
|
||||
class Videostatistics extends Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
}
|
||||
mygetdatas=()=>{
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
render(){
|
||||
return(
|
||||
<React.Fragment>
|
||||
<div className="ws100s">
|
||||
<div className="ws100s" style={{
|
||||
position: "relative",
|
||||
}}>
|
||||
<div className="ws100s xaxisreverseorder" style={{
|
||||
position: "absolute",
|
||||
top: "-29px",
|
||||
}}>
|
||||
<p className="sortinxdirection xiaoshou" onClick={()=>this.props.statisticsy(false)}>
|
||||
<i className="iconfont icon-zuojiantou posiivsiconmyss mr5"></i>
|
||||
<p className="fh mr20"> 返回</p>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<Videostatisticscom {...this.state} {...this.props}></Videostatisticscom>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Videostatistics;
|
@ -0,0 +1,76 @@
|
||||
import React, {Component} from "react";
|
||||
import '../../signin/css/signincdi.css';
|
||||
import {Progress, message} from 'antd';
|
||||
import {getImageUrl} from 'educoder';
|
||||
import axios from 'axios';
|
||||
|
||||
|
||||
|
||||
//条目
|
||||
class Videostatisticscom extends Component {
|
||||
//条目组件
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
componentDidUpdate = (prevProps) => {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="ws100s edu-back-white sortinxdirection" style={{
|
||||
position: "relative"
|
||||
}}>
|
||||
<div className="ws100s teacherentrydivs ">
|
||||
<div className="ws100s sortinxdirection">
|
||||
<div className="ws50s sptits">视频统计总览</div>
|
||||
<div className="ws50s sptitss xaxisreverseorder">播放数据从2020-03-13 24:00开始统计</div>
|
||||
</div>
|
||||
<style>
|
||||
{
|
||||
`
|
||||
.yslsprenshu{
|
||||
background-image: url(${getImageUrl(`images/qiandao/sprenshu.png`)});
|
||||
}
|
||||
.yslspcishu{
|
||||
background-image: url(${getImageUrl(`images/qiandao/spcishu.png`)});
|
||||
}
|
||||
.yslshipingshi{
|
||||
background-image: url(${getImageUrl(`images/qiandao/shipingshi.png`)});
|
||||
}
|
||||
|
||||
`
|
||||
}
|
||||
</style>
|
||||
<div className="ws100s">
|
||||
<div className="yslsprenshu"></div>
|
||||
|
||||
<div className="yslspcishu"></div>
|
||||
|
||||
<div className="yslshipingshi"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Videostatisticscom;
|
Before Width: | Height: | Size: 407 KiB After Width: | Height: | Size: 410 KiB |