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 React,{ Component } from "react";
import {Pagination} from 'antd'; import {Pagination} from 'antd';
import axios from 'axios'; import axios from 'axios';
const $ = window.$; const $ = window.$;
const echarts = require('echarts'); const echarts = require('echarts');
function InitChapterUsageSituation(_data){ function InitChapterUsageSituation(_data){
var Color = ['#49A9EE', '#FFD86E', '#98D87D', '#8996E6','#F3857B', '#B97BF3','#4DE8B4','#f76d0c','#510cf7','#def70c','#3bf70c','#0cf7e1']; var myChart = echarts.init(document.getElementById('chapterUsageSituation'));
myChart.showLoading({
var option = { text: "数据获取中",
title: { effect: 'whirling'
show:false })
}, var Color = ['#49A9EE', '#FFD86E', '#98D87D', '#8996E6','#F3857B', '#B97BF3','#4DE8B4','#f76d0c','#510cf7','#def70c','#3bf70c','#0cf7e1'];
tooltip : {
trigger: 'item', var option = {
formatter: "{d}%" title: {
}, show:false
legend: { },
//orient: 'vertical', tooltip : {
// top: 'middle', trigger: 'item',
bottom: 30, formatter: "{d}%"
//left: 20, },
data:["第1章", "第2章", "第3章", "第4章", "第5章"], legend: {
selectedMode:false //orient: 'vertical',
}, // top: 'middle',
series : [{ bottom: 30,
name: '使用情况', //left: 20,
type: 'pie', data:["第1章", "第2章", "第3章", "第4章", "第5章"],
radius : '50%', selectedMode:false
center: ['50%', '40%'], },
selectedMode: 'single', series : [{
label: { name: '使用情况',
normal: { type: 'pie',
// {abg|} radius : '50%',
// {a|{a}}\n center: ['50%', '40%'],
formatter: ' {b|{b}} ', selectedMode: 'single',
backgroundColor: '#eee', label: {
borderColor: '#aaa', normal: {
borderWidth: 1, // {abg|}
borderRadius: 4, // {a|{a}}\n
rich: { formatter: ' {b|{b}} ',
a: { backgroundColor: '#eee',
color: '#999', borderColor: '#aaa',
lineHeight: 22, borderWidth: 1,
align: 'center' borderRadius: 4,
}, rich: {
hr: { a: {
borderColor: '#aaa', color: '#999',
width: '100%', lineHeight: 22,
borderWidth: 0.5, align: 'center'
height: 0 },
}, hr: {
b: { borderColor: '#aaa',
fontSize: 16, width: '100%',
lineHeight: 33 borderWidth: 0.5,
}, height: 0
per: { },
color: '#eee', b: {
backgroundColor: '#334455', fontSize: 16,
padding: [2, 4], lineHeight: 33
borderRadius: 2 },
} 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, data: _data,
shadowColor: 'rgba(0, 0, 0, 0.5)' // [{"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: {
normal:{ emphasis: {
show: true, shadowBlur: 10,
color: function(params) { shadowOffsetX: 0,
return Color[params.dataIndex] 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, setTimeout(() => {
total:undefined myChart.setOption(option);
} myChart.hideLoading();
} }, 1000)
}
onChange=(pageNumber)=>{ class FirstTab extends Component{
this.setState({ constructor(props){
page:pageNumber super(props);
}) this.state = {
this.getData(pageNumber); page:1,
} total:undefined
}
getData=(page)=>{ }
var pathId = this.props.match.params.pathId;
onChange=(pageNumber)=>{
const url = `/paths/${pathId}/statistics.json?page=`+page; this.setState({
axios.get(url, { page:pageNumber
}) })
.then((response) => { this.getData(pageNumber);
// TODO 没用，404返回的error }
if (response.data.status == 404) {
this.props.showSnackbar('未找到对应数据，请查看地址是否正确。') getData=(page)=>{
return var pathId = this.props.match.params.pathId;
}
this.setState({ ...response.data }) const url = `/paths/${pathId}/statistics.json?page=`+page;
const _data = response.data.stage_info.map( (item, index) => { axios.get(url, {
return { })
value: item.value, .then((response) => {
name: item.stage_no // TODO 没用，404返回的error
} if (response.data.status == 404) {
}) this.props.showSnackbar('未找到对应数据，请查看地址是否正确。')
InitChapterUsageSituation(_data); return
}
const { course_count, learn_count, school_total_count, subject_name, subject_id } = response.data this.setState({ ...response.data })
this.props.initBannerData({ const _data = response.data.stage_info.map( (item, index) => {
course_count, return {
learn_count, value: item.value,
school_total_count, name: item.stage_no
subject_name, }
subject_id })
}) InitChapterUsageSituation(_data);
this.setState({
total:response.data.school_total_count const { course_count, learn_count, school_total_count, subject_name, subject_id } = response.data
}) this.props.initBannerData({
}) course_count,
.catch(function (error) { learn_count,
console.log(error); school_total_count,
}); subject_name,
} subject_id
})
componentDidMount(){ this.setState({
let {page}=this.state; total:response.data.school_total_count
this.getData(page); })
} })
.catch(function (error) {
render(){ console.log(error);
const { schools, stage_info,page,total } = this.state; });
return( }
<div className="clearfix panelForm-1">
<div className="with60 pr40 fl"> componentDidMount(){
<div className="static_shadow edu-back-white"> let {page}=this.state;
<p className="padding30-20 clearfix"><span className="font-24 fl">课堂使用概况</span><span className="fr color-grey-9">共{total}条记录</span></p> this.getData(page);
<div className="minH-440"> }
<table className="edu-pop-table head-color edu-txt-center bor-top-greyE" cellSpacing="0" cellPadding="0">
<thead> render(){
<tr><th>序号</th> const { schools, stage_info,page,total } = this.state;
<th className="edu-txt-left" width="35%">所属院校</th> return(
<th>课堂</th> <div className="clearfix panelForm-1">
<th>学生</th> <div className="with60 pr40 fl">
<th>选用实训</th> <div className="static_shadow edu-back-white">
</tr></thead> <p className="padding30-20 clearfix"><span className="font-24 fl">课堂使用概况</span><span className="fr color-grey-9">共{total}条记录</span></p>
{/* <div className="minH-440">
course_count: 30 <table className="edu-pop-table head-color edu-txt-center bor-top-greyE" cellSpacing="0" cellPadding="0">
homework_count: 117 <thead>
name: "国防科技大学" <tr><th>序号</th>
student_count: 2700 <th className="edu-txt-left" width="35%">所属院校</th>
*/} <th>课堂</th>
<tbody> <th>学生</th>
{ <th>选用实训</th>
schools && schools.map( (school, index) => { </tr></thead>
return ( {/*
<tr> course_count: 30
<td>{ index + 1 }</td> homework_count: 117
<td className="edu-txt-left task-hide" style={{"maxWidth":"238px"}}>{school.name}</td> name: "国防科技大学"
<td>{school.course_count}</td> student_count: 2700
<td>{school.student_count}</td> */}
<td><span className="color-blue mr3">{school.homework_count}</span>次</td> <tbody>
</tr>) {
}) schools && schools.map( (school, index) => {
} return (
</tbody> <tr>
</table> <td>{ index + 1 }</td>
</div> <td className="edu-txt-left task-hide" style={{"maxWidth":"238px"}}>{school.name}</td>
<div className="pt35 edu-txt-center" style={{"height":"102px"}}> <td>{school.course_count}</td>
{ <td>{school.student_count}</td>
total > 10 && <td><span className="color-blue mr3">{school.homework_count}</span>次</td>
<Pagination showQuickJumper defaultCurrent={page} pageSize={10} total={total} onChange={this.onChange} /> </tr>)
} })
</div> }
</div> </tbody>
</div> </table>
<div className="with40 fl static_shadow edu-back-white"> </div>
<p className="font-24 padding30-20">章节使用情况</p> <div className="pt35 edu-txt-center" style={{"height":"102px"}}>
<div id="chapterUsageSituation" style={{"width":"480px","height":"542px"}}></div> {
</div> total > 10 &&
</div> <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; 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 React,{ Component } from "react";
import axios from 'axios'; import axios from 'axios';
const $ = window.$; const $ = window.$;
const echarts = require('echarts'); const echarts = require('echarts');
function InitShixunStudyStatistics(yAxisMonth_a, barData_a, mapByNumber, myChart){ function InitShixunStudyStatistics(yAxisMonth_a, barData_a, mapByNumber, myChart){
let yAxisMonth = yAxisMonth_a 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", // "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"]; // "1-1", "1-2", "1-3", "1-4", "2-1", "2-2", "2-3", "3-1", "3-2"];
let barData = barData_a 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, // 1164, 739, 784, 720, 726, 556, 381, 432,
// 1164, 739, 784, 720, 726, 556, 381, 432, 239]; // 1164, 739, 784, 720, 726, 556, 381, 432, 239];
// let yAxisMonth = yAxisMonth_a; // let yAxisMonth = yAxisMonth_a;
// let barData = barData_a; // let barData = barData_a;
let barDataTwo = []; let barDataTwo = [];
let coordData2 = []; let coordData2 = [];
let coordData = []; let coordData = [];
for (let i = 0; i < barData.length; i++) { for (let i = 0; i < barData.length; i++) {
barDataTwo.push(Math.max.apply(Math, barData) + 5000); barDataTwo.push(Math.max.apply(Math, barData) + 5000);
coordData.push({ coordData.push({
"coord": [Number(barData[i]) - 1, i] "coord": [Number(barData[i]) - 1, i]
}); });
coordData2.push({ coordData2.push({
"coord": [Math.max.apply(Math, barData) + 5000, i] "coord": [Math.max.apply(Math, barData) + 5000, i]
}) })
} }
var option = { var option = {
backgroundColor: "#fff", backgroundColor: "#fff",
title: { title: {
text: '' text: ''
}, },
legend: null, legend: null,
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'none' type: 'none'
}, },
formatter: function(params) { formatter: function(params) {
return params[0].name + ":" + (mapByNumber[params[0].name] && mapByNumber[params[0].name].shixun_name) + "<br/>" + '学习人数: ' + params[0].value; return params[0].name + ":" + (mapByNumber[params[0].name] && mapByNumber[params[0].name].shixun_name) + "<br/>" + '学习人数: ' + params[0].value;
} }
}, },
grid: { grid: {
containLabel: true, containLabel: true,
left: "30px", left: "30px",
top: "0", top: "0",
bottom:"10px" bottom:"10px"
}, },
yAxis: [{ yAxis: [{
data: yAxisMonth, data: yAxisMonth,
inverse: true, inverse: true,
axisLine: { axisLine: {
show: false show: false
}, },
axisTick: { axisTick: {
show: false show: false
}, },
axisLabel: { axisLabel: {
margin: 10, margin: 10,
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: '#747A7F' color: '#747A7F'
}, },
formatter: function(value) { formatter: function(value) {
return '{Sunny|' + value + '}'; return '{Sunny|' + value + '}';
}, },
rich: { rich: {
value: { value: {
lineHeight: 20 lineHeight: 20
}, },
Sunny: { Sunny: {
height: 25, height: 25,
padding: [0, 8, 0, 8], padding: [0, 8, 0, 8],
align: 'center', align: 'center',
backgroundColor: '#fff' backgroundColor: '#fff'
} }
} }
} }
},{ },{
data: yAxisMonth, data: yAxisMonth,
inverse: true, inverse: true,
axisLine: { axisLine: {
show: false show: false
}, },
axisTick: { axisTick: {
show: false show: false
}, },
axisLabel: { axisLabel: {
show: false show: false
} }
} }
], ],
xAxis: [{ xAxis: [{
type: "value", type: "value",
splitLine: { splitLine: {
show: false show: false
}, },
axisLabel: { axisLabel: {
show: false show: false
}, },
axisTick: { axisTick: {
show: false show: false
}, },
axisLine: { axisLine: {
show: false show: false
} }
}, { }, {
type: "value", type: "value",
splitLine: { splitLine: {
show: false show: false
}, },
axisLabel: { axisLabel: {
show: false show: false
}, },
axisTick: { axisTick: {
show: false show: false
}, },
axisLine: { axisLine: {
show: false show: false
} }
}], }],
series: [{ series: [{
z: 10, z: 10,
xAxisIndex: 0, xAxisIndex: 0,
yAxisIndex: 0, yAxisIndex: 0,
name: '', name: '',
type: 'pictorialBar', type: 'pictorialBar',
data: barData, data: barData,
barCategoryGap: '90%', barCategoryGap: '90%',
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'inside', position: 'inside',
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: '#666' color: '#666'
} }
} }
}, },
symbolRepeat: false, symbolRepeat: false,
symbolSize: ['100%', 25], symbolSize: ['100%', 25],
symbolOffset: [-16.5, 0], symbolOffset: [-16.5, 0],
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
color: '#FFD86E' color: '#FFD86E'
}], false), }], false),
borderRadius:'10' borderRadius:'10'
} }
}, },
symbolClip: true, symbolClip: true,
symbolPosition: 'end', symbolPosition: 'end',
symbol: 'rect' symbol: 'rect'
}] }]
}; };
myChart.setOption(option); myChart.setOption(option);
} }
class SecondTab extends Component{ class SecondTab extends Component{
constructor(props){ constructor(props){
super(props); super(props);
this.state = { this.state = {
}
} }
}
componentDidMount(){
componentDidMount(){ var pathId = this.props.match.params.pathId;
var pathId = this.props.match.params.pathId;
var myCharts = echarts.init(document.getElementById('showloding'));
var myChart = echarts.init(document.getElementById('shixunStudyStatistics')); myCharts.showLoading({
myChart.showLoading({ text: "数据获取中",
text: "数据获取中", effect: 'whirling'
effect: 'whirling' })
}) const url = `/paths/${pathId}/shixun_report.json`
const url = `/paths/${pathId}/shixun_report.json` axios.get(url, {
axios.get(url, { })
}) .then((response) => {
.then((response) => { // TODO 没用，404返回的error
// TODO 没用，404返回的error if (response.data.status == 404) {
if (response.data.status == 404) { this.props.showSnackbar('未找到对应数据，请查看地址是否正确。')
this.props.showSnackbar('未找到对应数据，请查看地址是否正确。') return
return }
}
/**
/** let yAxisMonth = ["1-1", "1-2", "1-3", "1-4", "2-1", "2-2", "2-3", "3-1", "3-2"];
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];
let barData = [1164, 739, 784, 720, 726, 556, 381, 432, 239];
{
{ "number": "6-1",
"number": "6-1", "shixun_name": "网页抓取及信息提取",
"shixun_name": "网页抓取及信息提取", "member_count": 0,
"member_count": 0, "school_count": 0
"school_count": 0 }
} */
*/ let yAxisMonth = []
let yAxisMonth = [] let barData = []
let barData = [] let shixunList = []
let shixunList = [] let mapByNumber = {}
let mapByNumber = {} const _data = response.data.shixun_lists.forEach( (ar, index) => {
const _data = response.data.shixun_lists.forEach( (ar, index) => { ar.forEach( (item, itemIndex) => {
ar.forEach( (item, itemIndex) => { shixunList.push(item)
shixunList.push(item) yAxisMonth.push(item.number)
yAxisMonth.push(item.number) barData.push(item.member_count)
barData.push(item.member_count) mapByNumber[item.number] = item
mapByNumber[item.number] = item })
}) })
})
this.setState({ shixunList }, () => { this.setState({
InitShixunStudyStatistics(yAxisMonth, barData, mapByNumber, myChart); shixunList
myChart.hideLoading() })
}) var myChart = echarts.init(document.getElementById('shixunStudyStatistics'));
myChart.showLoading({
text: "数据获取中",
}) effect: 'whirling'
.catch(function (error) { })
console.log(error); setTimeout(() => {
}); InitShixunStudyStatistics(yAxisMonth, barData, mapByNumber, myChart);
} myCharts.hideLoading();
myChart.hideLoading();
render(){ }, 1000)
const { shixunList } = this.state;
return( })
<div className="clearfix panelForm-2"> .catch(function (error) {
<div className="with60 pr40 fl"> console.log(error);
<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"> render(){
<thead> const { shixunList } = this.state;
<tr> return(
<th>章节</th> <div className="clearfix panelForm-2">
<th className="edu-txt-left" width="40%">实训名称</th> <div className="with60 pr40 fl">
<th>学习人数</th> <div className="static_shadow edu-back-white">
<th>受用院校</th> <p className="font-24 padding30-20">实训使用详情</p>
</tr> <div className="minH-440" id="tableHeight">
</thead> <table className="edu-pop-table head-color edu-txt-center bor-top-greyE" cellSpacing="0" cellPadding="0">
<tbody> <thead>
<tr>
{ <th>章节</th>
shixunList && shixunList.map( (shixun, index) => { <th className="edu-txt-left" width="40%">实训名称</th>
return ( <th>学习人数</th>
<tr> <th>受用院校</th>
<td>{shixun.number}</td> </tr>
<td className="edu-txt-left task-hide" style={{"maxWidth":"272px"}}>{shixun.shixun_name}</td> </thead>
<td>{shixun.member_count}</td> <tbody>
<td className="color-blue">{shixun.school_count}</td>
</tr>) {
}) shixunList && shixunList.map( (shixun, index) => {
} return (
<tr>
</tbody> <td>{shixun.number}</td>
</table> <td className="edu-txt-left task-hide" style={{"maxWidth":"272px"}}>{shixun.shixun_name}</td>
</div> <td>{shixun.member_count}</td>
</div> <td className="color-blue">{shixun.school_count}</td>
</div> </tr>)
<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> </tbody>
</div> </table>
</div> </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; 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 { // ::-webkit-scrollbar-thumb {
background-color: #cde5fe; // background-color: #cde5fe;
//
box-shadow: 0px 0px black; // box-shadow: 0px 0px black;
} // }
//
//
::-webkit-scrollbar-track { // ::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0); // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
background-color: #fff; // background-color: #fff;
} // }
.shaiContent li.shaiItem { .shaiContent li.shaiItem {
padding: 0px 9px; padding: 0px 9px;

Write Preview
Loading…
Cancel
Save