m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

实践课程统计结果调整

Browse Source
dev_cs
杨树明 5 years ago
parent 522339b4f5
commit 9cc8fd3539
3 changed files with 502 additions and 483 deletions
Show Stats Download Patch File Download Diff File

413
public/react/src/modules/paths/SchoolStatistics/FirstTab.js
Unescape View File

@ -1,203 +1,212 @@
import React,{ Component } from "react";
import {Pagination} from 'antd';
import axios from 'axios';
const $ = window.$;
const echarts = require('echarts');
function InitChapterUsageSituation(_data){
var Color = ['#49A9EE', '#FFD86E', '#98D87D', '#8996E6','#F3857B', '#B97BF3','#4DE8B4','#f76d0c','#510cf7','#def70c','#3bf70c','#0cf7e1'];
var option = {
title: {
show:false
},
tooltip : {
trigger: 'item',
formatter: "{d}%"
},
legend: {
//orient: 'vertical',
// top: 'middle',
bottom: 30,
//left: 20,
data:["第1章", "第2章", "第3章", "第4章", "第5章"],
selectedMode:false
},
series : [{
name: '使用情况',
type: 'pie',
radius : '50%',
center: ['50%', '40%'],
selectedMode: 'single',
label: {
normal: {
// {abg|}
// {a|{a}}\n
formatter: ' {b|{b}} ',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
},
},
data: _data,
// [{"value":19,"name":"\u7b2c1\u7ae0"},{"value":45,"name":"\u7b2c2\u7ae0"},{"value":16,"name":"\u7b2c3\u7ae0"},{"value":10,"name":"\u7b2c4\u7ae0"},{"value":10,"name":"\u7b2c5\u7ae0"}],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal:{
show: true,
color: function(params) {
return Color[params.dataIndex]
}
}
}
}]
};
var myChart = echarts.init(document.getElementById('chapterUsageSituation'));
myChart.setOption(option);
}
class FirstTab extends Component{
constructor(props){
super(props);
this.state = {
page:1,
total:undefined
}
}
onChange=(pageNumber)=>{
this.setState({
page:pageNumber
})
this.getData(pageNumber);
}
getData=(page)=>{
var pathId = this.props.match.params.pathId;
const url = `/paths/${pathId}/statistics.json?page=`+page;
axios.get(url, {
})
.then((response) => {
// TODO 没用，404返回的error
if (response.data.status == 404) {
this.props.showSnackbar('未找到对应数据，请查看地址是否正确。')
return
}
this.setState({ ...response.data })
const _data = response.data.stage_info.map( (item, index) => {
return {
value: item.value,
name: item.stage_no
}
})
InitChapterUsageSituation(_data);
const { course_count, learn_count, school_total_count, subject_name, subject_id } = response.data
this.props.initBannerData({
course_count,
learn_count,
school_total_count,
subject_name,
subject_id
})
this.setState({
total:response.data.school_total_count
})
})
.catch(function (error) {
console.log(error);
});
}
componentDidMount(){
let {page}=this.state;
this.getData(page);
}
render(){
const { schools, stage_info,page,total } = this.state;
return(
<div className="clearfix panelForm-1">
<div className="with60 pr40 fl">
<div className="static_shadow edu-back-white">
<p className="padding30-20 clearfix"><span className="font-24 fl">课堂使用概况</span><span className="fr color-grey-9">共{total}条记录</span></p>
<div className="minH-440">
<table className="edu-pop-table head-color edu-txt-center bor-top-greyE" cellSpacing="0" cellPadding="0">
<thead>
<tr><th>序号</th>
<th className="edu-txt-left" width="35%">所属院校</th>
<th>课堂</th>
<th>学生</th>
<th>选用实训</th>
</tr></thead>
{/*
course_count: 30
homework_count: 117
name: "国防科技大学"
student_count: 2700
*/}
<tbody>
{
schools && schools.map( (school, index) => {
return (
<tr>
<td>{ index + 1 }</td>
<td className="edu-txt-left task-hide" style={{"maxWidth":"238px"}}>{school.name}</td>
<td>{school.course_count}</td>
<td>{school.student_count}</td>
<td><span className="color-blue mr3">{school.homework_count}</span>次</td>
</tr>)
})
}
</tbody>
</table>
</div>
<div className="pt35 edu-txt-center" style={{"height":"102px"}}>
{
total > 10 &&
<Pagination showQuickJumper defaultCurrent={page} pageSize={10} total={total} onChange={this.onChange} />
}
</div>
</div>
</div>
<div className="with40 fl static_shadow edu-back-white">
<p className="font-24 padding30-20">章节使用情况</p>
<div id="chapterUsageSituation" style={{"width":"480px","height":"542px"}}></div>
</div>
</div>
)
}
}
import React,{ Component } from "react";
import {Pagination} from 'antd';
import axios from 'axios';
const $ = window.$;
const echarts = require('echarts');
function InitChapterUsageSituation(_data){
var myChart = echarts.init(document.getElementById('chapterUsageSituation'));
myChart.showLoading({
text: "数据获取中",
effect: 'whirling'
})
var Color = ['#49A9EE', '#FFD86E', '#98D87D', '#8996E6','#F3857B', '#B97BF3','#4DE8B4','#f76d0c','#510cf7','#def70c','#3bf70c','#0cf7e1'];
var option = {
title: {
show:false
},
tooltip : {
trigger: 'item',
formatter: "{d}%"
},
legend: {
//orient: 'vertical',
// top: 'middle',
bottom: 30,
//left: 20,
data:["第1章", "第2章", "第3章", "第4章", "第5章"],
selectedMode:false
},
series : [{
name: '使用情况',
type: 'pie',
radius : '50%',
center: ['50%', '40%'],
selectedMode: 'single',
label: {
normal: {
// {abg|}
// {a|{a}}\n
formatter: ' {b|{b}} ',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
},
},
data: _data,
// [{"value":19,"name":"\u7b2c1\u7ae0"},{"value":45,"name":"\u7b2c2\u7ae0"},{"value":16,"name":"\u7b2c3\u7ae0"},{"value":10,"name":"\u7b2c4\u7ae0"},{"value":10,"name":"\u7b2c5\u7ae0"}],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal:{
show: true,
color: function(params) {
return Color[params.dataIndex]
}
}
}
}]
};
setTimeout(() => {
myChart.setOption(option);
myChart.hideLoading();
}, 1000)
}
class FirstTab extends Component{
constructor(props){
super(props);
this.state = {
page:1,
total:undefined
}
}
onChange=(pageNumber)=>{
this.setState({
page:pageNumber
})
this.getData(pageNumber);
}
getData=(page)=>{
var pathId = this.props.match.params.pathId;
const url = `/paths/${pathId}/statistics.json?page=`+page;
axios.get(url, {
})
.then((response) => {
// TODO 没用，404返回的error
if (response.data.status == 404) {
this.props.showSnackbar('未找到对应数据，请查看地址是否正确。')
return
}
this.setState({ ...response.data })
const _data = response.data.stage_info.map( (item, index) => {
return {
value: item.value,
name: item.stage_no
}
})
InitChapterUsageSituation(_data);
const { course_count, learn_count, school_total_count, subject_name, subject_id } = response.data
this.props.initBannerData({
course_count,
learn_count,
school_total_count,
subject_name,
subject_id
})
this.setState({
total:response.data.school_total_count
})
})
.catch(function (error) {
console.log(error);
});
}
componentDidMount(){
let {page}=this.state;
this.getData(page);
}
render(){
const { schools, stage_info,page,total } = this.state;
return(
<div className="clearfix panelForm-1">
<div className="with60 pr40 fl">
<div className="static_shadow edu-back-white">
<p className="padding30-20 clearfix"><span className="font-24 fl">课堂使用概况</span><span className="fr color-grey-9">共{total}条记录</span></p>
<div className="minH-440">
<table className="edu-pop-table head-color edu-txt-center bor-top-greyE" cellSpacing="0" cellPadding="0">
<thead>
<tr><th>序号</th>
<th className="edu-txt-left" width="35%">所属院校</th>
<th>课堂</th>
<th>学生</th>
<th>选用实训</th>
</tr></thead>
{/*
course_count: 30
homework_count: 117
name: "国防科技大学"
student_count: 2700
*/}
<tbody>
{
schools && schools.map( (school, index) => {
return (
<tr>
<td>{ index + 1 }</td>
<td className="edu-txt-left task-hide" style={{"maxWidth":"238px"}}>{school.name}</td>
<td>{school.course_count}</td>
<td>{school.student_count}</td>
<td><span className="color-blue mr3">{school.homework_count}</span>次</td>
</tr>)
})
}
</tbody>
</table>
</div>
<div className="pt35 edu-txt-center" style={{"height":"102px"}}>
{
total > 10 &&
<Pagination showQuickJumper defaultCurrent={page} pageSize={10} total={total} onChange={this.onChange} />
}
</div>
</div>
</div>
<div className="with40 fl static_shadow edu-back-white">
<p className="font-24 padding30-20">章节使用情况</p>
<div id="chapterUsageSituation" style={{"width":"480px","height":"542px"}}></div>
</div>
</div>
)
}
}
export default FirstTab;

550
public/react/src/modules/paths/SchoolStatistics/SecondTab.js
Unescape View File

@ -1,271 +1,281 @@
import React,{ Component } from "react";
import axios from 'axios';
const $ = window.$;
const echarts = require('echarts');
function InitShixunStudyStatistics(yAxisMonth_a, barData_a, mapByNumber, myChart){
let yAxisMonth = yAxisMonth_a
// [
// "1-1", "1-2", "1-3", "1-4", "2-1", "2-2", "2-3", "3-1",
// "1-1", "1-2", "1-3", "1-4", "2-1", "2-2", "2-3", "3-1",
// "1-1", "1-2", "1-3", "1-4", "2-1", "2-2", "2-3", "3-1", "3-2"];
let barData = barData_a
// [
// 1164, 739, 784, 720, 726, 556, 381, 432,
// 1164, 739, 784, 720, 726, 556, 381, 432,
// 1164, 739, 784, 720, 726, 556, 381, 432, 239];
// let yAxisMonth = yAxisMonth_a;
// let barData = barData_a;
let barDataTwo = [];
let coordData2 = [];
let coordData = [];
for (let i = 0; i < barData.length; i++) {
barDataTwo.push(Math.max.apply(Math, barData) + 5000);
coordData.push({
"coord": [Number(barData[i]) - 1, i]
});
coordData2.push({
"coord": [Math.max.apply(Math, barData) + 5000, i]
})
}
var option = {
backgroundColor: "#fff",
title: {
text: ''
},
legend: null,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function(params) {
return params[0].name + ":" + (mapByNumber[params[0].name] && mapByNumber[params[0].name].shixun_name) + "<br/>" + '学习人数: ' + params[0].value;
}
},
grid: {
containLabel: true,
left: "30px",
top: "0",
bottom:"10px"
},
yAxis: [{
data: yAxisMonth,
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 12,
color: '#747A7F'
},
formatter: function(value) {
return '{Sunny|' + value + '}';
},
rich: {
value: {
lineHeight: 20
},
Sunny: {
height: 25,
padding: [0, 8, 0, 8],
align: 'center',
backgroundColor: '#fff'
}
}
}
},{
data: yAxisMonth,
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
}
],
xAxis: [{
type: "value",
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
}, {
type: "value",
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
}],
series: [{
z: 10,
xAxisIndex: 0,
yAxisIndex: 0,
name: '',
type: 'pictorialBar',
data: barData,
barCategoryGap: '90%',
label: {
normal: {
show: true,
position: 'inside',
textStyle: {
fontSize: 12,
color: '#666'
}
}
},
symbolRepeat: false,
symbolSize: ['100%', 25],
symbolOffset: [-16.5, 0],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFD86E'
}], false),
borderRadius:'10'
}
},
symbolClip: true,
symbolPosition: 'end',
symbol: 'rect'
}]
};
myChart.setOption(option);
}
class SecondTab extends Component{
constructor(props){
super(props);
this.state = {
}
}
componentDidMount(){
var pathId = this.props.match.params.pathId;
var myChart = echarts.init(document.getElementById('shixunStudyStatistics'));
myChart.showLoading({
text: "数据获取中",
effect: 'whirling'
})
const url = `/paths/${pathId}/shixun_report.json`
axios.get(url, {
})
.then((response) => {
// TODO 没用，404返回的error
if (response.data.status == 404) {
this.props.showSnackbar('未找到对应数据，请查看地址是否正确。')
return
}
/**
let yAxisMonth = ["1-1", "1-2", "1-3", "1-4", "2-1", "2-2", "2-3", "3-1", "3-2"];
let barData = [1164, 739, 784, 720, 726, 556, 381, 432, 239];
{
"number": "6-1",
"shixun_name": "网页抓取及信息提取",
"member_count": 0,
"school_count": 0
}
*/
let yAxisMonth = []
let barData = []
let shixunList = []
let mapByNumber = {}
const _data = response.data.shixun_lists.forEach( (ar, index) => {
ar.forEach( (item, itemIndex) => {
shixunList.push(item)
yAxisMonth.push(item.number)
barData.push(item.member_count)
mapByNumber[item.number] = item
})
})
this.setState({ shixunList }, () => {
InitShixunStudyStatistics(yAxisMonth, barData, mapByNumber, myChart);
myChart.hideLoading()
})
})
.catch(function (error) {
console.log(error);
});
}
render(){
const { shixunList } = this.state;
return(
<div className="clearfix panelForm-2">
<div className="with60 pr40 fl">
<div className="static_shadow edu-back-white">
<p className="font-24 padding30-20">实训使用详情</p>
<div className="minH-440" id="tableHeight">
<table className="edu-pop-table head-color edu-txt-center bor-top-greyE" cellSpacing="0" cellPadding="0">
<thead>
<tr>
<th>章节</th>
<th className="edu-txt-left" width="40%">实训名称</th>
<th>学习人数</th>
<th>受用院校</th>
</tr>
</thead>
<tbody>
{
shixunList && shixunList.map( (shixun, index) => {
return (
<tr>
<td>{shixun.number}</td>
<td className="edu-txt-left task-hide" style={{"maxWidth":"272px"}}>{shixun.shixun_name}</td>
<td>{shixun.member_count}</td>
<td className="color-blue">{shixun.school_count}</td>
</tr>)
})
}
</tbody>
</table>
</div>
</div>
</div>
<div className="with40 fl static_shadow edu-back-white">
<p className="font-24 padding30-20">实训学习统计</p>
<div id="shixunStudyStatistics"
style={{"width":"480px","height": shixunList ? `${shixunList.length * 35 + 100}px` : "440px"}}></div>
</div>
</div>
)
}
}
import React,{ Component } from "react";
import axios from 'axios';
const $ = window.$;
const echarts = require('echarts');
function InitShixunStudyStatistics(yAxisMonth_a, barData_a, mapByNumber, myChart){
let yAxisMonth = yAxisMonth_a
// [
// "1-1", "1-2", "1-3", "1-4", "2-1", "2-2", "2-3", "3-1",
// "1-1", "1-2", "1-3", "1-4", "2-1", "2-2", "2-3", "3-1",
// "1-1", "1-2", "1-3", "1-4", "2-1", "2-2", "2-3", "3-1", "3-2"];
let barData = barData_a
// [
// 1164, 739, 784, 720, 726, 556, 381, 432,
// 1164, 739, 784, 720, 726, 556, 381, 432,
// 1164, 739, 784, 720, 726, 556, 381, 432, 239];
// let yAxisMonth = yAxisMonth_a;
// let barData = barData_a;
let barDataTwo = [];
let coordData2 = [];
let coordData = [];
for (let i = 0; i < barData.length; i++) {
barDataTwo.push(Math.max.apply(Math, barData) + 5000);
coordData.push({
"coord": [Number(barData[i]) - 1, i]
});
coordData2.push({
"coord": [Math.max.apply(Math, barData) + 5000, i]
})
}
var option = {
backgroundColor: "#fff",
title: {
text: ''
},
legend: null,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function(params) {
return params[0].name + ":" + (mapByNumber[params[0].name] && mapByNumber[params[0].name].shixun_name) + "<br/>" + '学习人数: ' + params[0].value;
}
},
grid: {
containLabel: true,
left: "30px",
top: "0",
bottom:"10px"
},
yAxis: [{
data: yAxisMonth,
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 12,
color: '#747A7F'
},
formatter: function(value) {
return '{Sunny|' + value + '}';
},
rich: {
value: {
lineHeight: 20
},
Sunny: {
height: 25,
padding: [0, 8, 0, 8],
align: 'center',
backgroundColor: '#fff'
}
}
}
},{
data: yAxisMonth,
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
}
],
xAxis: [{
type: "value",
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
}, {
type: "value",
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
}],
series: [{
z: 10,
xAxisIndex: 0,
yAxisIndex: 0,
name: '',
type: 'pictorialBar',
data: barData,
barCategoryGap: '90%',
label: {
normal: {
show: true,
position: 'inside',
textStyle: {
fontSize: 12,
color: '#666'
}
}
},
symbolRepeat: false,
symbolSize: ['100%', 25],
symbolOffset: [-16.5, 0],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFD86E'
}], false),
borderRadius:'10'
}
},
symbolClip: true,
symbolPosition: 'end',
symbol: 'rect'
}]
};
myChart.setOption(option);
}
class SecondTab extends Component{
constructor(props){
super(props);
this.state = {
}
}
componentDidMount(){
var pathId = this.props.match.params.pathId;
var myCharts = echarts.init(document.getElementById('showloding'));
myCharts.showLoading({
text: "数据获取中",
effect: 'whirling'
})
const url = `/paths/${pathId}/shixun_report.json`
axios.get(url, {
})
.then((response) => {
// TODO 没用，404返回的error
if (response.data.status == 404) {
this.props.showSnackbar('未找到对应数据，请查看地址是否正确。')
return
}
/**
let yAxisMonth = ["1-1", "1-2", "1-3", "1-4", "2-1", "2-2", "2-3", "3-1", "3-2"];
let barData = [1164, 739, 784, 720, 726, 556, 381, 432, 239];
{
"number": "6-1",
"shixun_name": "网页抓取及信息提取",
"member_count": 0,
"school_count": 0
}
*/
let yAxisMonth = []
let barData = []
let shixunList = []
let mapByNumber = {}
const _data = response.data.shixun_lists.forEach( (ar, index) => {
ar.forEach( (item, itemIndex) => {
shixunList.push(item)
yAxisMonth.push(item.number)
barData.push(item.member_count)
mapByNumber[item.number] = item
})
})
this.setState({
shixunList
})
var myChart = echarts.init(document.getElementById('shixunStudyStatistics'));
myChart.showLoading({
text: "数据获取中",
effect: 'whirling'
})
setTimeout(() => {
InitShixunStudyStatistics(yAxisMonth, barData, mapByNumber, myChart);
myCharts.hideLoading();
myChart.hideLoading();
}, 1000)
})
.catch(function (error) {
console.log(error);
});
}
render(){
const { shixunList } = this.state;
return(
<div className="clearfix panelForm-2">
<div className="with60 pr40 fl">
<div className="static_shadow edu-back-white">
<p className="font-24 padding30-20">实训使用详情</p>
<div className="minH-440" id="tableHeight">
<table className="edu-pop-table head-color edu-txt-center bor-top-greyE" cellSpacing="0" cellPadding="0">
<thead>
<tr>
<th>章节</th>
<th className="edu-txt-left" width="40%">实训名称</th>
<th>学习人数</th>
<th>受用院校</th>
</tr>
</thead>
<tbody>
{
shixunList && shixunList.map( (shixun, index) => {
return (
<tr>
<td>{shixun.number}</td>
<td className="edu-txt-left task-hide" style={{"maxWidth":"272px"}}>{shixun.shixun_name}</td>
<td>{shixun.member_count}</td>
<td className="color-blue">{shixun.school_count}</td>
</tr>)
})
}
</tbody>
</table>
</div>
</div>
</div>
<div className="with40 fl static_shadow edu-back-white">
<p className="font-24 padding30-20">实训学习统计</p>
{shixunList===undefined?<div id="showloding"
style={{"width":"480px","height":"440px"}}></div>:""}
{shixunList===undefined?"":<div id="shixunStudyStatistics"
style={{"width":"480px","minHeight":`${shixunList&&shixunList.length *50}px`}}></div>}
</div>
</div>
)
}
}
export default SecondTab;

22
public/react/src/modules/user/usersInfo/InfosTopics.js
Unescape View File

@ -370,17 +370,17 @@ class InfosTopics extends Component{
{
`
::-webkit-scrollbar-thumb {
background-color: #cde5fe;
box-shadow: 0px 0px black;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
background-color: #fff;
}
// ::-webkit-scrollbar-thumb {
// background-color: #cde5fe;
//
// box-shadow: 0px 0px black;
// }
//
//
// ::-webkit-scrollbar-track {
// -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
// background-color: #fff;
// }
.shaiContent li.shaiItem {
padding: 0px 9px;

Write Preview
Loading…
Cancel
Save