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

调整

Browse Source
dev_cs
杨树明 6 years ago
parent 0a41deee10
commit 20c9a515d7
2 changed files with 258 additions and 248 deletions
Show Stats Download Patch File Download Diff File

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

@ -237,7 +237,7 @@ class SecondTab extends Component{
<div className="clearfix panelForm-2"> <div className="clearfix panelForm-2">
<div className="with60 pr40 fl"> <div className="with60 pr40 fl">
<div className="static_shadow edu-back-white"> <div className="static_shadow edu-back-white">
<p className="font-24 padding30-20">实训使用详情</p> <div className="font-24 padding30-20">实训使用详情</div>
<div className="minH-440" id="tableHeight"> <div className="minH-440" id="tableHeight">
<table className="edu-pop-table head-color edu-txt-center bor-top-greyE" cellSpacing="0" cellPadding="0"> <table className="edu-pop-table head-color edu-txt-center bor-top-greyE" cellSpacing="0" cellPadding="0">
<thead> <thead>
@ -268,7 +268,17 @@ class SecondTab extends Component{
</div> </div>
</div> </div>
<div className="with40 fl static_shadow edu-back-white"> <div className="with40 fl static_shadow edu-back-white">
<p className="font-24 padding30-20">实训学习统计</p> <style>
{
`
.padding23-20{
padding: 23px 20px;
box-sizing: border-box;
}
`
}
</style>
<div className="font-24 padding23-20">实训学习统计</div>
{shixunList===undefined?<div id="showloding" {shixunList===undefined?<div id="showloding"
style={{"width":"480px","height":"440px"}}></div>:""} style={{"width":"480px","height":"440px"}}></div>:""}
{shixunList===undefined?"":<div id="shixunStudyStatistics" {shixunList===undefined?"":<div id="shixunStudyStatistics"

492
public/react/src/modules/paths/SchoolStatistics/ThirdTab.js
Unescape View File

@ -1,247 +1,247 @@
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 InitCollegeStatistic(_data, myChart){ function InitCollegeStatistic(_data, myChart){
var data = _data var data = _data
var _yData = data.map( item => { var _yData = data.map( item => {
return item.name return item.name
}) })
// [{name: "湖南科技大学潇湘学院", 已通关: 0, 未通关: 4, sum: 4},{name: "长沙理工大学", 已通关: 0, 未通关: 7, sum: 7},{name: "安徽大学", 已通关: 1, 未通关: 8, sum: 9},{name: "湘潭大学兴湘学院", 已通关: 12, 未通关: 0, sum: 12}, // [{name: "湖南科技大学潇湘学院", 已通关: 0, 未通关: 4, sum: 4},{name: "长沙理工大学", 已通关: 0, 未通关: 7, sum: 7},{name: "安徽大学", 已通关: 1, 未通关: 8, sum: 9},{name: "湘潭大学兴湘学院", 已通关: 12, 未通关: 0, sum: 12},
// {name: "湖南师范大学", 已通关: 10, 未通关: 2, sum: 12},{name: "湖南软件职业学院", 已通关: 11, 未通关: 1, sum: 12},{name: "湖南科技大学", 已通关: 91, 未通关: 34, sum: 125},{name: "湘潭大学", 已通关: 110, 未通关: 45, sum: 155}, // {name: "湖南师范大学", 已通关: 10, 未通关: 2, sum: 12},{name: "湖南软件职业学院", 已通关: 11, 未通关: 1, sum: 12},{name: "湖南科技大学", 已通关: 91, 未通关: 34, sum: 125},{name: "湘潭大学", 已通关: 110, 未通关: 45, sum: 155},
// {name: "湖南工业大学", 已通关: 133, 未通关: 41, sum: 174},{name: "国防科技大学", 已通关: 853, 未通关: 23, sum: 876}]; // {name: "湖南工业大学", 已通关: 133, 未通关: 41, sum: 174},{name: "国防科技大学", 已通关: 853, 未通关: 23, sum: 876}];
// <% @schools.each do |s| %> // <% @schools.each do |s| %>
// data.push({name: "<%= s['name'] %>", '已通关': <%= s['pass_count'] %>, '未通关': <%= s['unpass_count'] %>}); // data.push({name: "<%= s['name'] %>", '已通关': <%= s['pass_count'] %>, '未通关': <%= s['unpass_count'] %>});
// <% end %> // <% end %>
// =================右边要放的字段名及颜色=========== // =================右边要放的字段名及颜色===========
var items = [{ var items = [{
key: '学习人数', color: "#29BD8B" key: '学习人数', color: "#29BD8B"
}, { }, {
key: '已通关', color: "#FF954C" key: '已通关', color: "#FF954C"
}, { }, {
key: '未通关', color: "#CBCBCB" key: '未通关', color: "#CBCBCB"
}] }]
data.forEach((d) => { data.forEach((d) => {
var sum = 0 var sum = 0
items.forEach((i) => { items.forEach((i) => {
sum += (d[i.key] || 0) sum += (d[i.key] || 0)
}) })
d.sum = sum; d.sum = sum;
}) })
// =========================排序================ // =========================排序================
data.sort((a, b) => a.sum - b.sum) data.sort((a, b) => a.sum - b.sum)
var yData = _yData.reverse(); var yData = _yData.reverse();
// ["湖南科技大学潇湘学院", "长沙理工大学", "安徽大学", "湖南软件职业学院", "湖南师范大学", "湘潭大学兴湘学院", "湖南科技大学", "湘潭大学", "湖南工业大学", "国防科技大学"] // ["湖南科技大学潇湘学院", "长沙理工大学", "安徽大学", "湖南软件职业学院", "湖南师范大学", "湘潭大学兴湘学院", "湖南科技大学", "湘潭大学", "湖南工业大学", "国防科技大学"]
var itemSeries = items.map((d, i) => { var itemSeries = items.map((d, i) => {
var values = data.map((p) => p[d.key]) var values = data.map((p) => p[d.key])
return { return {
type: 'bar', type: 'bar',
name: d.key, name: d.key,
data: values, data: values,
stack: 'all', stack: 'all',
xAxisIndex: 1, xAxisIndex: 1,
yAxisIndex: 1, yAxisIndex: 1,
label: { label: {
normal: { normal: {
color:'#FFF', color:'#FFF',
// show: ( i == 1 ? true :false), // show: ( i == 1 ? true :false),
show: true, show: true,
position: 'inside' position: 'inside'
} }
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: d.color color: d.color
} }
} }
} }
}) })
var option = { var option = {
backgroundColor: '#fff', // 背景 backgroundColor: '#fff', // 背景
tooltip : { tooltip : {
trigger: 'axis', trigger: 'axis',
axisPointer : { axisPointer : {
type : '' type : ''
} }
}, },
legend: { legend: {
data: ['学习人数','已通关','未通关'], data: ['学习人数','已通关','未通关'],
textStyle: { textStyle: {
color: '#05101A' color: '#05101A'
}, },
right:"20px", right:"20px",
selectedMode:false selectedMode:false
}, },
grid: [{ grid: [{
right: '56%', right: '56%',
top: '20', top: '20',
containLabel: true containLabel: true
}, { }, {
left: '45%', left: '45%',
width:'100%', width:'100%',
top: '20', top: '20',
containLabel: true containLabel: true
}], }],
xAxis: [{ xAxis: [{
type: 'value', type: 'value',
inverse: true, inverse: true,
splitLine: { splitLine: {
show: false show: false
}, },
axisLine: { axisLine: {
show: false show: false
}, },
axisLabel: { axisLabel: {
show: false show: false
}, },
axisTick: { axisTick: {
show: false show: false
} }
}, { }, {
type: 'value', type: 'value',
gridIndex: 1, gridIndex: 1,
splitLine: { splitLine: {
show: false show: false
}, },
axisLine: { axisLine: {
show: false show: false
}, },
axisLabel: { axisLabel: {
show: false show: false
}, },
axisTick: { axisTick: {
show: false show: false
} }
}], }],
yAxis: [{ yAxis: [{
type: 'category', type: 'category',
data: yData, data: yData,
max:10, max:10,
axisLine: { axisLine: {
show: false show: false
}, },
axisLabel: { axisLabel: {
show: false show: false
}, },
axisTick: { axisTick: {
show: false show: false
} }
}, { }, {
type: 'category', type: 'category',
data: yData, data: yData,
max:10, max:10,
gridIndex: 1, gridIndex: 1,
axisLine: { axisLine: {
show: false show: false
}, },
axisTick: { axisTick: {
show: false show: false
} }
}], }],
series: [...itemSeries, series: [...itemSeries,
{ {
name: '总计', name: '总计',
type: 'bar', type: 'bar',
data: data.map((d) => d.sum), data: data.map((d) => d.sum),
xAxisIndex: 1, xAxisIndex: 1,
yAxisIndex: 1, yAxisIndex: 1,
barCategoryGap:'40%', barCategoryGap:'40%',
stack: 'all', stack: 'all',
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'inside', position: 'inside',
color: '#666' color: '#666'
} }
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: '#fff' color: '#fff'
} }
} }
}, },
// ===================左边=================== // ===================左边===================
{ {
type: 'bar', type: 'bar',
data: data.map((d) => d.sum), data: data.map((d) => d.sum),
barCategoryGap:'40%', barCategoryGap:'40%',
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'left', position: 'left',
color: '#29BD8B' color: '#29BD8B'
} }
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: '#29BD8B' color: '#29BD8B'
} }
} }
}] }]
} }
myChart.setOption(option); myChart.setOption(option);
} }
class ThirdTab extends Component{ class ThirdTab extends Component{
constructor(props){ constructor(props){
super(props); super(props);
} }
componentDidMount(){ componentDidMount(){
var pathId = this.props.match.params.pathId; var pathId = this.props.match.params.pathId;
var myChart = echarts.init(document.getElementById('collegeStatistic')); var myChart = echarts.init(document.getElementById('collegeStatistic'));
myChart.showLoading({ myChart.showLoading({
text: "数据获取中", text: "数据获取中",
effect: 'whirling' effect: 'whirling'
}) })
const url = `/paths/${pathId}/school_report.json` const url = `/paths/${pathId}/school_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
} }
this.setState({ ...response.data }) this.setState({ ...response.data })
// name: "湖南科技大学潇湘学院", 已通关: 0, 未通关: 4, sum: 4 // name: "湖南科技大学潇湘学院", 已通关: 0, 未通关: 4, sum: 4
/** /**
"name": "国防科技大学", "name": "国防科技大学",
"student_count": 9269, "student_count": 9269,
"pass_count": 6061, "pass_count": 6061,
"unpass_count": 3208 "unpass_count": 3208
*/ */
const _data = response.data.schools.map( (item, index) => { const _data = response.data.schools.map( (item, index) => {
return { return {
name: item.name, name: item.name,
sum: item.student_count, sum: item.student_count,
已通关: item.pass_count, 已通关: item.pass_count,
未通关: item.unpass_count, 未通关: item.unpass_count,
} }
}) })
InitCollegeStatistic(_data, myChart); InitCollegeStatistic(_data, myChart);
myChart.hideLoading() myChart.hideLoading()
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
}); });
} }
render(){ render(){
return( return(
<div className="clearfix mb30 static_shadow edu-back-white panelForm panelForm-3"> <div className="clearfix mb30 static_shadow edu-back-white panelForm panelForm-3">
<p className="font-24 padding30-20">院校学习情况</p> <div className="font-24 padding30-20">院校学习情况</div>
<div id="collegeStatistic" style={{"width":"1200px","height":"540px"}}></div> <div id="collegeStatistic" style={{"width":"1200px","height":"540px"}}></div>
</div> </div>
) )
} }
} }
export default ThirdTab; export default ThirdTab;
Write Preview
Loading…
Cancel
Save