diff --git a/public/react/src/modules/paths/SchoolStatistics/FirstTab.js b/public/react/src/modules/paths/SchoolStatistics/FirstTab.js index 2dc7afda8..8783c522c 100644 --- a/public/react/src/modules/paths/SchoolStatistics/FirstTab.js +++ b/public/react/src/modules/paths/SchoolStatistics/FirstTab.js @@ -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( -
-
-
-

课堂使用概况共{total}条记录

-
- - - - - - - - - {/* - course_count: 30 - homework_count: 117 - name: "国防科技大学" - student_count: 2700 - */} - - { - schools && schools.map( (school, index) => { - return ( - - - - - - - ) - }) - } - -
序号所属院校课堂学生选用实训
{ index + 1 }{school.name}{school.course_count}{school.student_count}{school.homework_count}次
-
-
- { - total > 10 && - - } -
-
-
-
-

章节使用情况

-
-
-
- ) - } -} +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( +
+
+
+

课堂使用概况共{total}条记录

+
+ + + + + + + + + {/* + course_count: 30 + homework_count: 117 + name: "国防科技大学" + student_count: 2700 + */} + + { + schools && schools.map( (school, index) => { + return ( + + + + + + + ) + }) + } + +
序号所属院校课堂学生选用实训
{ index + 1 }{school.name}{school.course_count}{school.student_count}{school.homework_count}次
+
+
+ { + total > 10 && + + } +
+
+
+
+

章节使用情况

+
+
+
+ ) + } +} export default FirstTab; \ No newline at end of file diff --git a/public/react/src/modules/paths/SchoolStatistics/SecondTab.js b/public/react/src/modules/paths/SchoolStatistics/SecondTab.js index c58ac6f9b..5fefef219 100644 --- a/public/react/src/modules/paths/SchoolStatistics/SecondTab.js +++ b/public/react/src/modules/paths/SchoolStatistics/SecondTab.js @@ -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) + "
" + '学习人数: ' + 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( -
-
-
-

实训使用详情

-
- - - - - - - - - - - - { - shixunList && shixunList.map( (shixun, index) => { - return ( - - - - - - ) - }) - } - - -
章节实训名称学习人数受用院校
{shixun.number}{shixun.shixun_name}{shixun.member_count}{shixun.school_count}
-
-
-
-
-

实训学习统计

-
-
-
- ) - } -} +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) + "
" + '学习人数: ' + 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( +
+
+
+

实训使用详情

+
+ + + + + + + + + + + + { + shixunList && shixunList.map( (shixun, index) => { + return ( + + + + + + ) + }) + } + + +
章节实训名称学习人数受用院校
{shixun.number}{shixun.shixun_name}{shixun.member_count}{shixun.school_count}
+
+
+
+
+

实训学习统计

+ {shixunList===undefined?
:""} + {shixunList===undefined?"":
} +
+
+ ) + } +} export default SecondTab; \ No newline at end of file diff --git a/public/react/src/modules/user/usersInfo/InfosTopics.js b/public/react/src/modules/user/usersInfo/InfosTopics.js index 8da80aad3..f9525487e 100644 --- a/public/react/src/modules/user/usersInfo/InfosTopics.js +++ b/public/react/src/modules/user/usersInfo/InfosTopics.js @@ -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;