提交作品文件大小限制+合并代码

This commit is contained in:
谢思 2022-03-29 16:42:12 +08:00
commit 2f019d688d
5 changed files with 156 additions and 196 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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;
}

View File

@ -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: {

View File

@ -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>
)
}