|
|
|
@ -1,33 +1,36 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="container-box"> |
|
|
|
|
<a-row :gutter="[24, 24]"> |
|
|
|
|
<a-row :gutter="[24, 24]" style="margin-top: 30px"> |
|
|
|
|
<a-col :xxl="12" :xl="12" :lg="24"> |
|
|
|
|
<a-row :gutter="[24, 24]" style="margin-top: 0"> |
|
|
|
|
<a-col :span="12"> |
|
|
|
|
<div class="card1"> |
|
|
|
|
<div class="title"> |
|
|
|
|
<div class="left">参赛人数</div> |
|
|
|
|
<div class="left">参加比赛项目数量</div> |
|
|
|
|
<div class="right"><SvgIcon size="20" name="content" /></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="name">1314</div> |
|
|
|
|
<div class="total"> |
|
|
|
|
<div class="one">一等:11</div> |
|
|
|
|
<div class="two">二等:1</div> |
|
|
|
|
<div class="three">三等:1</div> |
|
|
|
|
<div class="name">{{ data.cjbsxmsl }}</div> |
|
|
|
|
<div class="total" style="margin-top: 10px"> |
|
|
|
|
<div class="two">国家级::{{ data.gjj }}</div> |
|
|
|
|
<div class="three">省级::{{ data.shengj }}</div> |
|
|
|
|
<div class="three">市级::{{ data.shij }}</div> |
|
|
|
|
<div class="three">校级::{{ data.xj }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</a-col> |
|
|
|
|
<a-col :span="12"> |
|
|
|
|
<div class="card1"> |
|
|
|
|
<div class="title"> |
|
|
|
|
<div class="left">参赛人数</div> |
|
|
|
|
<div class="left">获奖数</div> |
|
|
|
|
<div class="right"><SvgIcon size="20" name="content" /></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="name">1314</div> |
|
|
|
|
<div class="total"> |
|
|
|
|
<div class="one">一等:11</div> |
|
|
|
|
<div class="two">二等:1</div> |
|
|
|
|
<div class="three">三等:1</div> |
|
|
|
|
<div class="total" style="grid-template-columns: repeat(5, 1fr)"> |
|
|
|
|
<div class="one">一等:{{data.ydjNumber}}</div> |
|
|
|
|
<div class="two">二等:{{data.edjNumber}}</div> |
|
|
|
|
<div class="three">三等:{{data.sdjNumber}}</div> |
|
|
|
|
<div class="two">四等:{{data.sidjNumber}}</div> |
|
|
|
|
<div class="three">五等:{{data.wdjNumber}}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</a-col> |
|
|
|
@ -63,12 +66,13 @@ |
|
|
|
|
<a-col :xxl="12" :xl="12" :lg="24"> |
|
|
|
|
<div class="right-list"> |
|
|
|
|
<a-card title="报名比赛" style="width: 100%; height: 100%"> |
|
|
|
|
<cardListFour /> |
|
|
|
|
<cardListFour :data="data.bmbsxm"/> |
|
|
|
|
</a-card> |
|
|
|
|
<div class="gengduo" @click="router.push('/annualcompetitionprojectregistration/student/AnnualCompetitionProjectRegistrationList')">更多</div> |
|
|
|
|
</div> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
<a-row :gutter="[24, 24]"> |
|
|
|
|
<a-row :gutter="[24, 24]" style="margin-top: 30px"> |
|
|
|
|
<a-col :xxl="12" :xl="12" :lg="24" |
|
|
|
|
><div class="huojiangqingkuang"> |
|
|
|
|
<a-card title="获奖情况" style="width: 100%; height: 100%"> |
|
|
|
@ -79,7 +83,7 @@ |
|
|
|
|
<a-col :xxl="12" :xl="12" :lg="24"> |
|
|
|
|
<div class="all-jiangxiang"> |
|
|
|
|
<a-card title="所有奖项" style="width: 100%"> |
|
|
|
|
<cardListFive /> |
|
|
|
|
<cardListFive :data="data.allApList"/> |
|
|
|
|
</a-card> |
|
|
|
|
</div> |
|
|
|
|
</a-col> |
|
|
|
@ -92,8 +96,34 @@ |
|
|
|
|
import cardListFour from '../components/cardListFour.vue'; |
|
|
|
|
import cardListFive from '../components/cardListFive.vue'; |
|
|
|
|
import echarts from '/@/utils/lib/echarts'; |
|
|
|
|
import { getStudent } from '/@/api/common/api'; |
|
|
|
|
|
|
|
|
|
import { onMounted, ref } from 'vue'; |
|
|
|
|
import {useRouter} from 'vue-router' |
|
|
|
|
const router = useRouter() |
|
|
|
|
const data = ref({ |
|
|
|
|
cjbsxmsl:0, |
|
|
|
|
gjj:0, |
|
|
|
|
shengj:0, |
|
|
|
|
shij:0, |
|
|
|
|
xj:0, |
|
|
|
|
ydjNumber:0, |
|
|
|
|
edjNumber:0, |
|
|
|
|
sdjNumber:0, |
|
|
|
|
sidjNumber:0, |
|
|
|
|
wdjNumber:0, |
|
|
|
|
allApList:[], |
|
|
|
|
ndbsxm:[], |
|
|
|
|
bmbsxm:[] |
|
|
|
|
}); |
|
|
|
|
const getStudentEvent = async () => { |
|
|
|
|
const res = await getStudent(); |
|
|
|
|
data.value = res; |
|
|
|
|
console.log(res); |
|
|
|
|
initHuojiangChart(); |
|
|
|
|
|
|
|
|
|
import { onMounted } from 'vue'; |
|
|
|
|
}; |
|
|
|
|
getStudentEvent(); |
|
|
|
|
const throttle = (fn: any) => { |
|
|
|
|
let timer: any; |
|
|
|
|
return function () { |
|
|
|
@ -106,7 +136,7 @@ |
|
|
|
|
timer = null; |
|
|
|
|
}, 1000); |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
var indicator = [ |
|
|
|
|
{ |
|
|
|
|
text: '前言探索', |
|
|
|
@ -252,46 +282,53 @@ |
|
|
|
|
window.addEventListener('resize', resize); |
|
|
|
|
}; |
|
|
|
|
const initHuojiangChart = () => { |
|
|
|
|
console.log(data.value,'ata.value'); |
|
|
|
|
|
|
|
|
|
const myChart = echarts.init(document.getElementById('chart-huojiang')); |
|
|
|
|
const option = { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
}, |
|
|
|
|
// grid: { |
|
|
|
|
// left: '20px', |
|
|
|
|
// containLabel: false, |
|
|
|
|
// }, |
|
|
|
|
// grid: { |
|
|
|
|
// left: '20px', |
|
|
|
|
// containLabel: false, |
|
|
|
|
// }, |
|
|
|
|
legend: { |
|
|
|
|
type:"scroll", |
|
|
|
|
type: 'scroll', |
|
|
|
|
orient: 'vertical', |
|
|
|
|
left:'70%', |
|
|
|
|
align:'left', |
|
|
|
|
top:'middle', |
|
|
|
|
left: '70%', |
|
|
|
|
align: 'left', |
|
|
|
|
top: 'middle', |
|
|
|
|
textStyle: { |
|
|
|
|
color:'#8C8C8C' |
|
|
|
|
color: '#8C8C8C', |
|
|
|
|
}, |
|
|
|
|
height:250 |
|
|
|
|
height: 250, |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '获奖情况', |
|
|
|
|
type: 'pie', |
|
|
|
|
center: ['35%', '50%'], |
|
|
|
|
radius: '80%', |
|
|
|
|
label: { |
|
|
|
|
normal: { |
|
|
|
|
show: false, |
|
|
|
|
position: 'outter', |
|
|
|
|
formatter:function (parms){ |
|
|
|
|
return parms.data.value |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
labelLine: { |
|
|
|
|
show:false |
|
|
|
|
|
|
|
|
|
radius: '80%', |
|
|
|
|
label: { |
|
|
|
|
normal: { |
|
|
|
|
show: false, |
|
|
|
|
position: 'outter', |
|
|
|
|
formatter: function (parms) { |
|
|
|
|
return parms.data.value; |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
data: [{ value: 1048, name: '一等奖' }, { value: 735, name: '二等奖' }, { value: 580, name: '三等奖' }], |
|
|
|
|
}, |
|
|
|
|
labelLine: { |
|
|
|
|
show: false, |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
{ value: data.value.ydjNumber, name: '一等奖' }, |
|
|
|
|
{ value: data.value.edjNumber, name: '二等奖' }, |
|
|
|
|
{ value: data.value.sdjNumber, name: '三等奖' }, |
|
|
|
|
{ value: data.value.sidjNumber, name: '四等奖' }, |
|
|
|
|
{ value: data.value.wdjNumber, name: '五等奖' }, |
|
|
|
|
], |
|
|
|
|
emphasis: { |
|
|
|
|
itemStyle: { |
|
|
|
|
shadowBlur: 10, |
|
|
|
@ -310,7 +347,6 @@ |
|
|
|
|
}; |
|
|
|
|
onMounted(() => { |
|
|
|
|
initChart(); |
|
|
|
|
initHuojiangChart(); |
|
|
|
|
}); |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
@ -344,9 +380,15 @@ |
|
|
|
|
margin-top: 20px; |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #000; |
|
|
|
|
display: flex; |
|
|
|
|
// display: flex; |
|
|
|
|
width: 100%; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
display: grid; |
|
|
|
|
grid-template-columns: repeat(4, 1fr); /* 创建两列,每列宽度相等 */ |
|
|
|
|
grid-template-rows: repeat(2, 10px); /* 创建四行,每行高度固定为100px */ |
|
|
|
|
gap: 10px; |
|
|
|
|
div { |
|
|
|
|
// width: 25%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.render { |
|
|
|
@ -399,9 +441,17 @@ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right-list { |
|
|
|
|
position: relative; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
background-color: #fff; |
|
|
|
|
.gengduo{ |
|
|
|
|
position: absolute; |
|
|
|
|
right: 50px; |
|
|
|
|
top: 20px; |
|
|
|
|
color: #1890ff; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.huojiangqingkuang { |
|
|
|
|
width: 100%; |
|
|
|
|