forked from Gitlink/forgeplus-react
提交作品文件大小限制+合并代码
This commit is contained in:
commit
2f019d688d
|
@ -110,8 +110,8 @@ const Qz2022 = (props) => {
|
|||
{/* banner图+选项 */}
|
||||
<img src={banner} className="qz_banner"/>
|
||||
<div className="qz2022">
|
||||
{paths.indexOf(active) !== -1 && <ul className="qz2022Menu mt20 qz_main">
|
||||
<li className={active === "introduce" ? "active" : ""}>
|
||||
<ul className="qz2022Menu mt20 qz_main">
|
||||
<li className={ active==='qz2022' ||active === "introduce"? "active" : ""}>
|
||||
<Link to={{ pathname: `/competition/qz2022/introduce` }}>大赛介绍</Link>
|
||||
</li>
|
||||
<li className={active === "fingerpost" ? "active" : ""}>
|
||||
|
@ -141,8 +141,8 @@ const Qz2022 = (props) => {
|
|||
<a>后台管理</a>
|
||||
</Popover>
|
||||
</li>}
|
||||
</ul>}
|
||||
{paths.indexOf(active) !== -1 && <div className="menu_border mt20 qz_main"></div>}
|
||||
</ul>
|
||||
<div className="menu_border mt20 qz_main"></div>
|
||||
<Spin spinning={false} wrapperClassName="spinstyle qzCont" tip="正在同步镜像" size="large">
|
||||
<Switch {...props}>
|
||||
{/* 大赛介绍 */}
|
||||
|
@ -196,7 +196,7 @@ const Qz2022 = (props) => {
|
|||
{/* 数据统计 */}
|
||||
<Route path="/competition/qz2022/statistics"
|
||||
render={
|
||||
() => (<Statistics {...props} />)
|
||||
() => (<Statistics {...props} qzDetail={qzDetail}/>)
|
||||
}
|
||||
></Route>
|
||||
{/* 后台管理-报名列表 */}
|
||||
|
@ -211,6 +211,12 @@ const Qz2022 = (props) => {
|
|||
() => (<Management {...props} qzDetail={qzDetail}/>)
|
||||
}
|
||||
></Route>
|
||||
{/* 大赛介绍 */}
|
||||
<Route path="/competition/qz2022"
|
||||
render={
|
||||
() => (<Introduce {...props} />)
|
||||
}
|
||||
></Route>
|
||||
</Switch>
|
||||
</Spin>
|
||||
</div>
|
||||
|
|
|
@ -15,7 +15,7 @@ function Introduce({ form, showNotification, match, history }) {
|
|||
return (
|
||||
<div className="introduce">
|
||||
<div className="introduce-content clearfix">
|
||||
<div className="introduce-video"><video src="http://111.8.36.180:8000/preview/93579e3f4bc0ba33075a905c08c79322_1648197024501.mp4" autoPlay controls></video></div>
|
||||
<div className="introduce-video"><video src="http://111.8.36.180:8000/preview/93579e3f4bc0ba33075a905c08c79322_1648197024501.mp4" autoPlay controls muted></video></div>
|
||||
|
||||
<div className="introduce-info">
|
||||
<h3 className="info-tit">“启智”2022作战概念·事需求创新大赛</h3>
|
||||
|
|
|
@ -49,9 +49,9 @@ function Introduce({ form, showNotification, match, history, enrollStatus }) {
|
|||
|
||||
// 进行文件大小检查
|
||||
function beforeUpload(file){
|
||||
const isLt100M = file.size / 1024 / 1024 < 256;
|
||||
const isLt100M = file.size / 1024 / 1024 < 1024;
|
||||
if (!isLt100M) {
|
||||
showNotification(`文件大小必须小于${256}MB!`);
|
||||
showNotification(`文件大小必须小于${1024}MB!`);
|
||||
}
|
||||
return isLt100M;
|
||||
}
|
||||
|
|
|
@ -15,9 +15,10 @@ if (clientWidth < 1000) {
|
|||
let fontSizeTitle = 1.25 * fontSizeText;
|
||||
|
||||
const colorArr0 = ['rgba(226, 217, 255, 1)', 'rgba(251, 201, 0, 0.36)', 'rgba(145, 193, 255, 0.61)'];
|
||||
const colorArr1= ['rgba(155, 128, 245, 1)', 'rgba(254, 140, 0, 1)', 'rgba(37, 109, 255, 1)'];
|
||||
const colorArr1 = ['rgba(155, 128, 245, 1)', 'rgba(254, 140, 0, 1)', 'rgba(37, 109, 255, 1)'];
|
||||
|
||||
export default ({ id, className, title, legendArr, xData, yData }) => {
|
||||
|
||||
useEffect(() => {
|
||||
let newEchartBar = document.getElementById(id) && echarts.init(document.getElementById(id));
|
||||
let textColor = "#7988a5";
|
||||
|
@ -78,180 +79,126 @@ export default ({ id, className, title, legendArr, xData, yData }) => {
|
|||
|
||||
// ];
|
||||
|
||||
// var barWidth = 35;
|
||||
// var barWidth = 35;
|
||||
|
||||
// let option = {
|
||||
// title: {
|
||||
// text: 'Awesome Chart'
|
||||
// },
|
||||
// xAxis: {
|
||||
// data: ['Sun', 'Mon', 'Tue']
|
||||
// },
|
||||
// legend: {
|
||||
// data: ['高一', '高二','高三'],
|
||||
// textStyle: {
|
||||
// color: 'white', //坐标的字体颜色
|
||||
// },
|
||||
// },
|
||||
// tooltip:{
|
||||
// trigger:'axis',
|
||||
// formatter:function(params){
|
||||
// // console.log(params);
|
||||
// return params
|
||||
// }
|
||||
// },
|
||||
// yAxis: {},
|
||||
// series: [
|
||||
// {
|
||||
// z:1,
|
||||
// name:'高一',
|
||||
// type: 'bar',
|
||||
// barWidth:barWidth,
|
||||
// data:[320, 200, 260],
|
||||
// itemStyle:{
|
||||
// normal:{
|
||||
// color:colors[0]
|
||||
// }
|
||||
// },
|
||||
// }
|
||||
// ,
|
||||
// {
|
||||
// z:3,
|
||||
// name:'左上部1',
|
||||
// type:'pictorialBar',
|
||||
// symbolPosition:'end',
|
||||
// data:[320, 200, 260],
|
||||
// symbol :'diamond',
|
||||
// symbolOffset:['-165%','-50%'],
|
||||
// symbolSize:[barWidth - 4,10 * (barWidth - 4) / barWidth],
|
||||
// itemStyle:{
|
||||
// normal:{
|
||||
// borderColor: '#218bd1',
|
||||
// borderWidth: 2,
|
||||
// color:'#218bd1'
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name:'左上部2',
|
||||
// type: 'bar',
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// title: {
|
||||
// text: 'Awesome Chart'
|
||||
// },
|
||||
// xAxis: {
|
||||
// data: ['Sun', 'Mon', 'Tue']
|
||||
// },
|
||||
// legend: {
|
||||
// data: ['高一', '高二', '高三'],
|
||||
// textStyle: {
|
||||
// color: 'white', //坐标的字体颜色
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// formatter: function (params) {
|
||||
// // let paramsData=params.filter(i=>{return i.seriesType==='bar'})
|
||||
// // console.log(paramsData);
|
||||
// // // return (
|
||||
|
||||
// fontSize: 16,
|
||||
// color: '#218bd1',
|
||||
// offset: [-30, -5]
|
||||
// }
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: 'transparent'
|
||||
// },
|
||||
// tooltip: {
|
||||
// },
|
||||
// data: [320, 200, 260],
|
||||
// },
|
||||
// {
|
||||
// z:1,
|
||||
// name:'高二',
|
||||
// type: 'bar',
|
||||
// barWidth:barWidth,
|
||||
// data:[170, 182, 191],
|
||||
// itemStyle:{
|
||||
// normal:{
|
||||
// color:colors[1]
|
||||
// }
|
||||
// },
|
||||
// }
|
||||
// ,
|
||||
// {
|
||||
// z:3,
|
||||
// name:'中上部1',
|
||||
// type:'pictorialBar',
|
||||
// symbolPosition:'end',
|
||||
// data:[170, 182, 191],
|
||||
// symbol :'diamond',
|
||||
// symbolOffset:['-15%','-50%'],
|
||||
// symbolSize:[barWidth - 4,10 * (barWidth - 4) / barWidth],
|
||||
// itemStyle:{
|
||||
// normal:{
|
||||
// borderColor: '#2edaf8',
|
||||
// borderWidth: 2,
|
||||
// color:'#2edaf8'
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name:'中上部2',
|
||||
// type: 'bar',
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// fontSize: 16,
|
||||
// color: '#2edaf8',
|
||||
// offset: [-30, -5]
|
||||
// }
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: 'transparent'
|
||||
// },
|
||||
// tooltip: {
|
||||
// },
|
||||
// data:[170, 182, 191],
|
||||
// },
|
||||
// {
|
||||
// z:1,
|
||||
// type: 'bar',
|
||||
// name:'高三',
|
||||
// barWidth:barWidth,
|
||||
// data:[220, 182, 191],
|
||||
// itemStyle:{
|
||||
// normal:{
|
||||
// color:colors[2]
|
||||
// }
|
||||
// },
|
||||
// }
|
||||
// ,
|
||||
// {
|
||||
// z:3,
|
||||
// name:'右上部1',
|
||||
// type:'pictorialBar',
|
||||
// symbolPosition:'end',
|
||||
// data:[220, 182, 191],
|
||||
// symbol :'diamond',
|
||||
// symbolOffset:['130%','-50%'],
|
||||
// symbolSize:[barWidth - 4,10 * (barWidth - 4) / barWidth],
|
||||
// itemStyle:{
|
||||
// normal:{
|
||||
// borderColor: '#7b7be1',
|
||||
// borderWidth: 2,
|
||||
// color:'#7b7be1'
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name:'中上部2',
|
||||
// type: 'bar',
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// fontSize: 16,
|
||||
// color: '#7b7be1',
|
||||
// offset: [-30, -5]
|
||||
// }
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: 'transparent'
|
||||
// },
|
||||
// tooltip: {
|
||||
// },
|
||||
// data:[220, 182, 191],
|
||||
// },
|
||||
// ]
|
||||
// };
|
||||
// // // )
|
||||
// return params.filter(i => { return i.seriesType === 'bar' });
|
||||
// }
|
||||
// },
|
||||
// yAxis: {},
|
||||
// series: [
|
||||
// {
|
||||
// z: 1,
|
||||
// name: '高一',
|
||||
// type: 'bar',
|
||||
// barWidth: barWidth,
|
||||
// data: [320, 200, 260],
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: colors[0]
|
||||
// }
|
||||
// },
|
||||
// }
|
||||
// ,
|
||||
// {
|
||||
// z: 3,
|
||||
// name: '左上部1',
|
||||
// type: 'pictorialBar',
|
||||
// symbolPosition: 'end',
|
||||
// data: [320, 200, 260],
|
||||
// symbol: 'diamond',
|
||||
// symbolOffset: ['-150%', '-50%'],
|
||||
// symbolSize: [barWidth - 4, 10 * (barWidth - 4) / barWidth],
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// borderColor: '#218bd1',
|
||||
// borderWidth: 2,
|
||||
// color: '#218bd1'
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// z: 1,
|
||||
// name: '高二',
|
||||
// type: 'bar',
|
||||
// barWidth: barWidth,
|
||||
// data: [170, 182, 191],
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: colors[1]
|
||||
// }
|
||||
// },
|
||||
// }
|
||||
// ,
|
||||
// {
|
||||
// z: 3,
|
||||
// name: '中上部1',
|
||||
// type: 'pictorialBar',
|
||||
// symbolPosition: 'end',
|
||||
// data: [170, 182, 191],
|
||||
// symbol: 'diamond',
|
||||
// symbolOffset: ['0%', '-50%'],
|
||||
// symbolSize: [barWidth - 4, 10 * (barWidth - 4) / barWidth],
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// borderColor: '#2edaf8',
|
||||
// borderWidth: 2,
|
||||
// color: '#2edaf8'
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// z: 1,
|
||||
// type: 'bar',
|
||||
// name: '高三',
|
||||
// barWidth: barWidth,
|
||||
// data: [220, 182, 191],
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: colors[2]
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// z: 3,
|
||||
// name: '右上部1',
|
||||
// type: 'pictorialBar',
|
||||
// symbolPosition: 'end',
|
||||
// data: [220, 182, 191],
|
||||
// symbol: 'diamond',
|
||||
// symbolOffset: ['145%', '-50%'],
|
||||
// symbolSize: [barWidth - 4, 10 * (barWidth - 4) / barWidth],
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// borderColor: '#7b7be1',
|
||||
// borderWidth: 2,
|
||||
// color: '#7b7be1'
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
|
||||
// ]
|
||||
// };
|
||||
|
||||
let option = {
|
||||
grid: {
|
||||
|
|
|
@ -23,50 +23,57 @@ const initPieArr = [
|
|||
];
|
||||
|
||||
const initLegendArr = ["战略方向", "前沿技术", "作战领域"];
|
||||
const initBarYData = [[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0]];
|
||||
|
||||
|
||||
function Statistics({ showNotification, match, history }) {
|
||||
|
||||
function Statistics({ showNotification, qzDetail }) {
|
||||
const is_local= qzDetail &&qzDetail.is_local;
|
||||
const [pieArr, setPieArr] = useState(initPieArr);
|
||||
|
||||
const [barXData, setBarXData] = useState(['LJLJLJ', 'HJHJHJ', 'KJKJKJ', 'HJJHJJHJJ', 'ZLZYBD', '联勤保障', 'WJWJWJ']);
|
||||
const [legendArr, setLegendArr] = useState(initLegendArr);
|
||||
const [barYData, setBarYData] = useState([[3, 2, 3, 4, 2, 4, 7, 5], [3, 2, 3, 4, 7, 2, 4, 5], [3, 2, 2, 3, 4, 2, 4, 5]]);
|
||||
const [barYData, setBarYData] = useState(initBarYData);
|
||||
const [uploadCount, setUploadCount] = useState(0);
|
||||
const [enrollCount, setEnrollCount] = useState(0);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
stattistics().then(res => {
|
||||
if (res && Array.isArray(res.data)) {
|
||||
|
||||
if (res && res.data && Array.isArray(res.data.data)) {
|
||||
let pieArrList = [];
|
||||
let xData = [];
|
||||
let yData1 = [], yData2 = [], yData3 = [];
|
||||
let barYDataArr = [];
|
||||
res.data.forEach(i => {
|
||||
i[0]&&xData.push(i[0].split('分赛区')[0]);
|
||||
res.data.data.forEach(i => {
|
||||
i[0] && xData.push(i[0].split('分赛区')[0]);
|
||||
yData1.push(i[1]);
|
||||
yData2.push(i[2]);
|
||||
yData3.push(i[3]);
|
||||
});
|
||||
|
||||
setLegendArr(res.competition_subs);
|
||||
setLegendArr(res.data.competition_subs);
|
||||
setUploadCount(res.data.upload_count);
|
||||
setEnrollCount(res.data.enroll_count);
|
||||
setBarXData(xData);
|
||||
|
||||
barYDataArr[0] = yData1;
|
||||
barYDataArr[1] = yData2;
|
||||
barYDataArr[2] = yData3;
|
||||
// setBarYData(barYData);
|
||||
setBarYData(barYDataArr);
|
||||
|
||||
let yData = [];
|
||||
yData.push(yData1.reduce((pre, current) => { return pre + current }, 0));
|
||||
yData.push(yData2.reduce((pre, current) => { return pre + current }, 0));
|
||||
yData.push(yData3.reduce((pre, current) => { return pre + current }, 0));
|
||||
res.competition_subs.forEach((item, index) => {
|
||||
res.data.competition_subs.forEach((item, index) => {
|
||||
pieArrList.push({
|
||||
name: item,
|
||||
value: yData[index],
|
||||
})
|
||||
});
|
||||
setPieArr(pieArrList);
|
||||
}else{
|
||||
showNotification((res&&res.message) || '请求数据失败!');
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
@ -78,7 +85,7 @@ function Statistics({ showNotification, match, history }) {
|
|||
<div className="num-item sum">
|
||||
<img src={statisticsSum} ></img>
|
||||
<div className="item-content">
|
||||
<div className="num-data">12121+</div>
|
||||
<div className="num-data">{enrollCount}+</div>
|
||||
<div className="num-tit">竞赛总报名数</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -86,24 +93,24 @@ function Statistics({ showNotification, match, history }) {
|
|||
<div className="num-item work">
|
||||
<img src={statisticsWork} ></img>
|
||||
<div className="item-content">
|
||||
<div className="num-data">1221+</div>
|
||||
<div className="num-data">{uploadCount}+</div>
|
||||
<div className="num-tit">竞赛总作品提交数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 外网 */}
|
||||
{/* <div className="right-echart outside">
|
||||
{!is_local && <div className="right-echart outside">
|
||||
<h3 className="type-name">综合赛区报名数</h3>
|
||||
<EchartPie
|
||||
id="network"
|
||||
className="echart-box"
|
||||
dataList={pieArr}
|
||||
/>
|
||||
</div> */}
|
||||
</div>}
|
||||
|
||||
{/* 内网 */}
|
||||
<div className="right-echart">
|
||||
{is_local && <div className="right-echart">
|
||||
<EchartBar
|
||||
id="newAddedProjects"
|
||||
className="echart-box"
|
||||
|
@ -112,7 +119,7 @@ function Statistics({ showNotification, match, history }) {
|
|||
xData={barXData}
|
||||
yData={barYData}
|
||||
/>
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue