tongChong
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 1
Code Issues Pull Requests 1 Releases Wiki Activity

合并代码

This commit is contained in:
谢思 2022-03-29 14:35:52 +08:00
parent 73e19d8937 03787e1f7e
commit e901dad75f
12 changed files with 538 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/military/qz2022.js
View File

@ -42,7 +42,11 @@ const Refer = Loadable({
const Chat = Loadable({
loader: () => import('./qz2022/chat'),
loading: Loading,
})
});
const Contact = Loadable({
loader: () => import('./qz2022/contact'),
loading: Loading,
});
const Statistics = Loadable({
loader: () => import('./qz2022/statistics'),
loading: Loading,
@ -175,6 +179,12 @@ const Qz2022 = (props) => {
() => (<Chat {...props} />)
}
></Route>
{/* 联系我们 */}
<Route path="/competition/qz2022/contact"
render={
() => (<Contact {...props} />)
}
></Route>
{/* 数据统计 */}
<Route path="/competition/qz2022/statistics"
render={

11
src/military/qz2022/api.js
View File

@ -15,6 +15,15 @@ export async function enrollCompetition(data){
return axios.post(`/competition_infos/qz2022/enroll.json`,data);
}
// 统计启智2022 竞赛
export async function stattistics(data){
// return fetch({
// url: `${current_main_site_url}/api/competition_infos/qz2022/statistics.json`,
// method: 'get',
// });
return axios.get( `/competition_infos/qz2022/statistics.json`);
}
// 竞赛提交作品
export async function uploadCompetition(data){
return axios.post(`/competition_infos/qz2022/upload.json`,data);
@ -28,4 +37,4 @@ export function getQzEnrollList(params) {
// 管理-竞赛提交作品列表&debug=admin
export function getQzProList(params) {
return axios.get(`/competition_infos/qz2022/enroll_list.json?upload=true`,params={params});
}
}

30
src/military/qz2022/contact/index.jsx Normal file
View File

@ -0,0 +1,30 @@
import React from "react";
import contactPng from "../image/contact.png";
import btn from "../image/btn-right.png";
import './index.scss';
import '../../index.scss';
function Contact({ form, showNotification, match, history }) {
return (
<div className="contact qz_main clearfix">
<div className="contact-top">
<img className="contact-png" src={contactPng} ></img>
<div className="contact-tit">联系我们</div>
</div>
<div className="contact-words">
<div className="contact-content">
<p>主办方：JWJWJW联合参谋部、科学技术委员会</p>
<p>协办方：军事科学院、航天科技集团</p>
</div>
<div className="contact-content">
<p>地址：北京市海淀区西三环北路72号</p>
<p>Email：osredm@163.com</p>
<p>电话：+86-010-66357650</p>
</div>
</div>
</div>
)
}
export default Contact;

31
src/military/qz2022/contact/index.scss Normal file
View File

@ -0,0 +1,31 @@
.contact {
margin: 3rem auto;
padding: 1rem 1.5rem;
background: #fff;
.contact-top{
position: relative;
}
.contact-png{
width: 100%;
}
.contact-tit{
position: absolute;
top:40%;
width: 100%;
text-align: center;
color: #fff;
font-size: 1.25rem;
font-weight: 700;
}
.contact-words {
padding: 1.5rem;
}
.contact-content {
text-align: center;
font-size: 1rem;
line-height: 2rem;
margin-bottom: 1rem;
}
}

BIN
src/military/qz2022/image/contact.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 688 KiB

BIN
src/military/qz2022/image/introduce.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 504 KiB

After

Width:  |  Height:  |  Size: 572 KiB

BIN
src/military/qz2022/image/statistics-sum.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
src/military/qz2022/image/statistics-work.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

312
src/military/qz2022/statistics/EchartBar/index.jsx
View File

@ -14,20 +14,251 @@ 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)'];
export default ({ id,className, title, xData, yData }) => {
export default ({ id, className, title, legendArr, xData, yData }) => {
useEffect(() => {
let newEchartBar = document.getElementById(id) && echarts.init(document.getElementById(id));
let textColor = "#7988a5";
let normalColor = "#e8e8ed";
// var colors = [
// {
// type: 'linear',
// x: 0, x2: 1, y: 0, y2: 0,
// colorStops: [{
// offset: 0,
// color: '#218bd1'
// }, {
// offset: 0.5,
// color: '#7EC3F0'
// }, {
// offset: 0.5,
// color: '#1985cd'
// }, {
// offset: 1,
// color: '#1985cd'
// }]
// },
// {
// type: 'linear',
// x: 0, x2: 1, y: 0, y2: 0,
// colorStops: [{
// offset: 0,
// color: '#6DD4E5'
// }, {
// offset: 0.5,
// color: '#6DD4E5'
// }, {
// offset: 0.5,
// color: '#0EADC9'
// }, {
// offset: 1,
// color: '#218bd1'
// }]
// },
// {
// type: 'linear',
// x: 0, x2: 1, y: 0, y2: 0,
// colorStops: [{
// offset: 0,
// color: '#acace6'
// }, {
// offset: 0.5,
// color: '#acace6'
// }, {
// offset: 0.5,
// color: '#6161bd'
// }, {
// offset: 1,
// color: '#6161bd'
// }]
// }
// ];
// 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',
// 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],
// },
// ]
// };
let option = {
grid: {
left: "3%",
top: "15%",
top: "12%",
right: "8%",
bottom: 0,
bottom: '5%',
containLabel: true
},
title: {
@ -41,29 +272,44 @@ export default ({ id,className, title, xData, yData }) => {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
textStyle: {
color: "#fff"
}
// type: "shadow",
// textStyle: {
// color: "#fff"
// }
type: 'line',
lineStyle: {
type: 'dotted'
},
},
backgroundColor: 'rgba(255,255,255,0.8)',
textStyle: {
color: "#333"
}
},
legend: {
data: legendArr,
top: '2%',
right: "8%",
fontSize: fontSizeText,
},
xAxis: [{
type: "category",
name: '分赛区',
data: xData,
axisPointer: {
type: "shadow"
},
// axisPointer: {
// type: "shadow"
// },
axisLabel: {
textStyle: {
color: textColor,
fontSize: .75 * fontSizeText
},
interval: 0,
rotate: 40
// rotate: 40
},
axisLine: {
lineStyle: {
color: normalColor
color: textColor
}
},
axisTick: {
@ -75,6 +321,7 @@ export default ({ id,className, title, xData, yData }) => {
}],
yAxis: [{
type: "value",
name: '报名数',
minInterval: 1,
nameTextStyle: {
color: textColor,
@ -97,14 +344,24 @@ export default ({ id,className, title, xData, yData }) => {
},
splitLine: {
lineStyle: {
color: normalColor
color: normalColor,
type: 'dotted',
}
},
}],
series: [{
series: []
};
yData.forEach((data, i) => {
option.series.push({
name: legendArr[i],
type: "bar",
data: yData,
barWidth: "60%",
data: data,
barWidth: "20%",
// itemStyle: {
// normal: {
// color: colors[i]
// }
// },
itemStyle: {
normal: {
color: {
@ -115,11 +372,11 @@ export default ({ id,className, title, xData, yData }) => {
y2: 1,
colorStops: [{
offset: 0,
color: "#deeefe"
color: colorArr0[i],
},
{
offset: 1,
color: "#2c8bff"
color: colorArr1[i]
}
],
globalCoord: false
@ -128,25 +385,20 @@ export default ({ id,className, title, xData, yData }) => {
},
label: {
show: true,
// position: ['-20%', -1.2 * fontSizeText],
position: "top",
// color: "#2c8bff",
color: '#555',
color: '#fff',
fontSize: fontSizeText,
formatter: function (params) {
// var percent = 0;
// percent = ((params.value / allStaff.num) * 100).toFixed(0);
return params.value || ''
// + '\n' + percent + '%';
return params.value || ''
},
}
}]
};
}
});
});
newEchartBar && newEchartBar.setOption(option);
}, [id, title, xData, yData])
return (
<div id={id} key={id} className={className} style={{minHeight:"20vh"}}>
<div id={id} key={id} className={className} style={{ minHeight: "20vh" }}>
</div>
)
}

67
src/military/qz2022/statistics/EchartPie/index.jsx
View File

@ -12,77 +12,42 @@ if (clientWidth < 1000) {
} else if (clientWidth > 3000) {
fontSizeText = 18 + (clientWidth - 3000) / 2000;
}
let fontSizeTitle = 1.25 * fontSizeText;
export default ({ id,className, title, xData, yData }) => {
export default ({ id, className, title, dataList }) => {
useEffect(() => {
let newEchartBar = document.getElementById(id) && echarts.init(document.getElementById(id));
let textColor = "#7988a5";
let normalColor = "#e8e8ed";
let option = {
color: ["#FC4567", "#2F8DF4", "#C25EC4"],
color: ["#fccb42", "#3b7afe", "#9b80f5"],
title: {
text: "",
// left: "center",
// top: "50%",
// textStyle: {
// fontSize: 22,
// color: textColor,
// fontWeight: "normal",
// },
},
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
right: 20,
top: 20,
icon: 'circle',
data: dataList.map((item) => item.name),
bottom: 1.5 * fontSizeText,
fontSize: fontSizeText,
itemGap: 20,
itemWidth: 8,
},
series: [
{
type: "pie",
roseType: "radius",
radius: ["30%", "60%"],
data: [
{
value: 220,
name: "战略方向",
},
{
value: 120,
name: "前沿技术",
},
{
value: 189,
name: "作战领域",
},
],
data: dataList,
label: {
normal: {
formatter: "{font|{c}}\n{hr|}\n{font|{d}%}",
rich: {
font: {
fontSize: 20,
padding: [5, 0],
color: "#fff",
},
hr: {
height: 0,
borderWidth: 1,
width: "100%",
borderColor: "#fff",
},
},
formatter: function (params) {
return params.name + '\n\n' + `${params.value} ${params.percent}%`;
},
color:'#000'
},
labelLine: {
lineStyle: {
color: "#fff",
},
length: 10,
length2: 60,
},
emphasis: {
itemStyle: {
@ -95,10 +60,10 @@ export default ({ id,className, title, xData, yData }) => {
],
};
newEchartBar && newEchartBar.setOption(option);
}, [id, title, xData, yData])
}, [id, title, dataList])
return (
<div id={id} key={id} className={className} style={{minHeight:"20vh"}}>
<div id={id} key={id} className={className} style={{ minHeight: "20vh" }}>
</div>
)
}

109
src/military/qz2022/statistics/index.jsx
View File

@ -1,33 +1,118 @@
import React from "react";
import React, { useEffect, useState } from "react";
import { stattistics } from '../api';
import './index.scss';
import '../../index.scss';
// import EchartBar from './EchartBar';
import statisticsSum from '../image/statistics-sum.png';
import statisticsWork from '../image/statistics-work.png';
import EchartPie from './EchartPie';
import EchartBar from './EchartBar';
const initPieArr = [
{
value: 220,
name: "战略方向",
},
{
value: 120,
name: "前沿技术",
},
{
value: 189,
name: "作战领域",
},
];
const initLegendArr = ["战略方向", "前沿技术", "作战领域"];
function Statistics({ form, showNotification, match, history }) {
function Statistics({ showNotification, match, history }) {
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]]);
useEffect(() => {
stattistics().then(res => {
if (res && Array.isArray(res.data)) {
let pieArrList = [];
let xData = [];
let yData1 = [], yData2 = [], yData3 = [];
let barYDataArr = [];
res.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);
setBarXData(xData);
barYDataArr[0] = yData1;
barYDataArr[1] = yData2;
barYDataArr[2] = yData3;
// setBarYData(barYData);
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) => {
pieArrList.push({
name: item,
value: yData[index],
})
});
setPieArr(pieArrList);
}
});
}, []);
return (
<div className="statistics qz_main ">
<div className="statistics-words">
<div className="num-item sum">
<div className="num-data">竞赛总报名数</div>
<div className="num-tit">竞赛总报名数</div>
<img src={statisticsSum} ></img>
<div className="item-content">
<div className="num-data">12121+</div>
<div className="num-tit">竞赛总报名数</div>
</div>
</div>
<div className="num-item work">
<img src={statisticsWork} ></img>
<div className="item-content">
<div className="num-data">1221+</div>
<div className="num-tit">竞赛总作品提交数</div>
</div>
</div>
</div>
{/* <div className="echart"> */}
{/* 外网 */}
{/* <div className="right-echart outside">
<h3 className="type-name">综合赛区报名数</h3>
<EchartPie
id="network"
className="echart-box"
dataList={pieArr}
/>
{/* <EchartBar
</div> */}
{/* 内网 */}
<div className="right-echart">
<EchartBar
id="newAddedProjects"
className="echart-box"
title="新项目统计"
xData={monthArr}
yData={newAddedProjects}
/> */}
{/* </div> */}
title=""
legendArr={legendArr}
xData={barXData}
yData={barYData}
/>
</div>
</div>
)
}

64
src/military/qz2022/statistics/index.scss
View File

@ -1,11 +1,69 @@
.statistics {
display: flex;
margin: 3rem auto;
.statistics-words {
width: 16.25%;
width: 30%;
margin-right: 1rem;
}
.echart-box {
width: 50vw;
.num-item {
display: flex;
justify-content: center;
align-items: center;
height: 12.25rem;
background-color: #ffffff;
&.sum {
border: 2px solid #2e5bfe;
box-shadow: 0px 3px 12px #ecf0ff;
margin-bottom: 1rem;
.num-data {
color: #2e5bfe;
}
}
img {
width: 5.125rem;
margin-right: 1.75rem;
}
.num-data {
font-weight: 700;
font-size: 3rem;
line-height: 1.4em;
border-bottom: 1px solid #d7dbe1;
}
.num-tit {
color: #090909;
}
}
.right-echart {
flex: auto;
background: #fff;
.echart-box {
width: 100%;
height: 100%;
}
&.outside {
padding: 0 1.75rem 0 1.25rem;
.echart-box {
height: calc(100% - 3.5rem);
}
}
}
.type-name {
color: #333333;
font-size: 1rem;
line-height: 3.5rem;
border-bottom: 1px solid rgba(153, 153, 153, 0.2);
box-sizing: border-box;
}
}