From 20c9a515d718294a3316b8a9f2298cf7e8411dd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=98=8E?= <775174143@qq.com> Date: Thu, 19 Sep 2019 17:37:08 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../paths/SchoolStatistics/SecondTab.js | 14 +- .../paths/SchoolStatistics/ThirdTab.js | 492 +++++++++--------- 2 files changed, 258 insertions(+), 248 deletions(-) diff --git a/public/react/src/modules/paths/SchoolStatistics/SecondTab.js b/public/react/src/modules/paths/SchoolStatistics/SecondTab.js index 5fefef219..8716a14d5 100644 --- a/public/react/src/modules/paths/SchoolStatistics/SecondTab.js +++ b/public/react/src/modules/paths/SchoolStatistics/SecondTab.js @@ -237,7 +237,7 @@ class SecondTab extends Component{
-

实训使用详情

+
实训使用详情
@@ -268,7 +268,17 @@ class SecondTab extends Component{
-

实训学习统计

+ +
实训学习统计
{shixunList===undefined?
:""} {shixunList===undefined?"":
{ - return item.name - }) -// [{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: "湖南工业大学", 已通关: 133, 未通关: 41, sum: 174},{name: "国防科技大学", 已通关: 853, 未通关: 23, sum: 876}]; - // <% @schools.each do |s| %> - // data.push({name: "<%= s['name'] %>", '已通关': <%= s['pass_count'] %>, '未通关': <%= s['unpass_count'] %>}); - // <% end %> - - // =================右边要放的字段名及颜色=========== - var items = [{ - key: '学习人数', color: "#29BD8B" - }, { - key: '已通关', color: "#FF954C" - }, { - key: '未通关', color: "#CBCBCB" - }] - - data.forEach((d) => { - var sum = 0 - items.forEach((i) => { - sum += (d[i.key] || 0) - }) - d.sum = sum; - }) - - // =========================排序================ - data.sort((a, b) => a.sum - b.sum) - - var yData = _yData.reverse(); - // ["湖南科技大学潇湘学院", "长沙理工大学", "安徽大学", "湖南软件职业学院", "湖南师范大学", "湘潭大学兴湘学院", "湖南科技大学", "湘潭大学", "湖南工业大学", "国防科技大学"] - - var itemSeries = items.map((d, i) => { - var values = data.map((p) => p[d.key]) - return { - type: 'bar', - name: d.key, - data: values, - stack: 'all', - xAxisIndex: 1, - yAxisIndex: 1, - label: { - normal: { - color:'#FFF', - // show: ( i == 1 ? true :false), - show: true, - position: 'inside' - } - }, - itemStyle: { - normal: { - color: d.color - } - } - } - }) - - var option = { - backgroundColor: '#fff', // 背景 - tooltip : { - trigger: 'axis', - axisPointer : { - type : '' - } - }, - legend: { - data: ['学习人数','已通关','未通关'], - textStyle: { - color: '#05101A' - }, - right:"20px", - selectedMode:false - }, - grid: [{ - right: '56%', - top: '20', - containLabel: true - }, { - left: '45%', - width:'100%', - top: '20', - containLabel: true - }], - xAxis: [{ - type: 'value', - inverse: true, - splitLine: { - show: false - }, - axisLine: { - show: false - }, - axisLabel: { - show: false - }, - axisTick: { - show: false - } - }, { - type: 'value', - gridIndex: 1, - splitLine: { - show: false - }, - axisLine: { - show: false - }, - axisLabel: { - show: false - }, - axisTick: { - show: false - } - }], - yAxis: [{ - type: 'category', - data: yData, - max:10, - axisLine: { - show: false - }, - axisLabel: { - show: false - }, - axisTick: { - show: false - } - }, { - type: 'category', - data: yData, - max:10, - gridIndex: 1, - axisLine: { - show: false - }, - axisTick: { - show: false - } - }], - series: [...itemSeries, - { - name: '总计', - type: 'bar', - data: data.map((d) => d.sum), - xAxisIndex: 1, - yAxisIndex: 1, - barCategoryGap:'40%', - stack: 'all', - label: { - normal: { - show: true, - position: 'inside', - color: '#666' - } - }, - itemStyle: { - normal: { - color: '#fff' - } - } - }, - // ===================左边=================== - { - type: 'bar', - data: data.map((d) => d.sum), - barCategoryGap:'40%', - label: { - normal: { - show: true, - position: 'left', - color: '#29BD8B' - } - }, - itemStyle: { - normal: { - color: '#29BD8B' - } - } - }] - } - myChart.setOption(option); -} -class ThirdTab extends Component{ - constructor(props){ - super(props); - } - - componentDidMount(){ - var pathId = this.props.match.params.pathId; - - var myChart = echarts.init(document.getElementById('collegeStatistic')); - myChart.showLoading({ - text: "数据获取中", - effect: 'whirling' - }) - - const url = `/paths/${pathId}/school_report.json` - axios.get(url, { - }) - .then((response) => { - // TODO 没用，404返回的error - if (response.data.status == 404) { - this.props.showSnackbar('未找到对应数据，请查看地址是否正确。') - return - } - this.setState({ ...response.data }) - // name: "湖南科技大学潇湘学院", 已通关: 0, 未通关: 4, sum: 4 - /** - "name": "国防科技大学", - "student_count": 9269, - "pass_count": 6061, - "unpass_count": 3208 - */ - const _data = response.data.schools.map( (item, index) => { - return { - name: item.name, - sum: item.student_count, - 已通关: item.pass_count, - 未通关: item.unpass_count, - } - }) - InitCollegeStatistic(_data, myChart); - myChart.hideLoading() - }) - .catch(function (error) { - console.log(error); - }); - } - - render(){ - return( -
-

院校学习情况

-
-
- ) - } -} +import React,{ Component } from "react"; +import axios from 'axios'; + +const $ = window.$ +const echarts = require('echarts'); +function InitCollegeStatistic(_data, myChart){ + var data = _data + var _yData = data.map( item => { + return item.name + }) +// [{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: "湖南工业大学", 已通关: 133, 未通关: 41, sum: 174},{name: "国防科技大学", 已通关: 853, 未通关: 23, sum: 876}]; + // <% @schools.each do |s| %> + // data.push({name: "<%= s['name'] %>", '已通关': <%= s['pass_count'] %>, '未通关': <%= s['unpass_count'] %>}); + // <% end %> + + // =================右边要放的字段名及颜色=========== + var items = [{ + key: '学习人数', color: "#29BD8B" + }, { + key: '已通关', color: "#FF954C" + }, { + key: '未通关', color: "#CBCBCB" + }] + + data.forEach((d) => { + var sum = 0 + items.forEach((i) => { + sum += (d[i.key] || 0) + }) + d.sum = sum; + }) + + // =========================排序================ + data.sort((a, b) => a.sum - b.sum) + + var yData = _yData.reverse(); + // ["湖南科技大学潇湘学院", "长沙理工大学", "安徽大学", "湖南软件职业学院", "湖南师范大学", "湘潭大学兴湘学院", "湖南科技大学", "湘潭大学", "湖南工业大学", "国防科技大学"] + + var itemSeries = items.map((d, i) => { + var values = data.map((p) => p[d.key]) + return { + type: 'bar', + name: d.key, + data: values, + stack: 'all', + xAxisIndex: 1, + yAxisIndex: 1, + label: { + normal: { + color:'#FFF', + // show: ( i == 1 ? true :false), + show: true, + position: 'inside' + } + }, + itemStyle: { + normal: { + color: d.color + } + } + } + }) + + var option = { + backgroundColor: '#fff', // 背景 + tooltip : { + trigger: 'axis', + axisPointer : { + type : '' + } + }, + legend: { + data: ['学习人数','已通关','未通关'], + textStyle: { + color: '#05101A' + }, + right:"20px", + selectedMode:false + }, + grid: [{ + right: '56%', + top: '20', + containLabel: true + }, { + left: '45%', + width:'100%', + top: '20', + containLabel: true + }], + xAxis: [{ + type: 'value', + inverse: true, + splitLine: { + show: false + }, + axisLine: { + show: false + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + } + }, { + type: 'value', + gridIndex: 1, + splitLine: { + show: false + }, + axisLine: { + show: false + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + } + }], + yAxis: [{ + type: 'category', + data: yData, + max:10, + axisLine: { + show: false + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + } + }, { + type: 'category', + data: yData, + max:10, + gridIndex: 1, + axisLine: { + show: false + }, + axisTick: { + show: false + } + }], + series: [...itemSeries, + { + name: '总计', + type: 'bar', + data: data.map((d) => d.sum), + xAxisIndex: 1, + yAxisIndex: 1, + barCategoryGap:'40%', + stack: 'all', + label: { + normal: { + show: true, + position: 'inside', + color: '#666' + } + }, + itemStyle: { + normal: { + color: '#fff' + } + } + }, + // ===================左边=================== + { + type: 'bar', + data: data.map((d) => d.sum), + barCategoryGap:'40%', + label: { + normal: { + show: true, + position: 'left', + color: '#29BD8B' + } + }, + itemStyle: { + normal: { + color: '#29BD8B' + } + } + }] + } + myChart.setOption(option); +} +class ThirdTab extends Component{ + constructor(props){ + super(props); + } + + componentDidMount(){ + var pathId = this.props.match.params.pathId; + + var myChart = echarts.init(document.getElementById('collegeStatistic')); + myChart.showLoading({ + text: "数据获取中", + effect: 'whirling' + }) + + const url = `/paths/${pathId}/school_report.json` + axios.get(url, { + }) + .then((response) => { + // TODO 没用，404返回的error + if (response.data.status == 404) { + this.props.showSnackbar('未找到对应数据，请查看地址是否正确。') + return + } + this.setState({ ...response.data }) + // name: "湖南科技大学潇湘学院", 已通关: 0, 未通关: 4, sum: 4 + /** + "name": "国防科技大学", + "student_count": 9269, + "pass_count": 6061, + "unpass_count": 3208 + */ + const _data = response.data.schools.map( (item, index) => { + return { + name: item.name, + sum: item.student_count, + 已通关: item.pass_count, + 未通关: item.unpass_count, + } + }) + InitCollegeStatistic(_data, myChart); + myChart.hideLoading() + }) + .catch(function (error) { + console.log(error); + }); + } + + render(){ + return( +
+
院校学习情况
+
+
+ ) + } +} export default ThirdTab; \ No newline at end of file