zhc077
/
hnjd_comp
forked from wangjiadong/comp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'对接组委会首页'

Browse Source
main
JayChou 4 months ago
parent 562d9b1cae
commit 6ae784d2e9
4 changed files with 271 additions and 201 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      jeecgboot-vue3-master/src/views/depart/workbench/components/components/cardList.vue
  2. 5
      jeecgboot-vue3-master/src/views/depart/workbench/components/components/cardListThree.vue
  3. 6
      jeecgboot-vue3-master/src/views/depart/workbench/components/components/cardListtow.vue
  4. 423
      jeecgboot-vue3-master/src/views/depart/workbench/components/organizingCommittee/organizingCommittee.vue

18
jeecgboot-vue3-master/src/views/depart/workbench/components/components/cardList.vue
Unescape View File

@ -9,19 +9,21 @@
<div class="total">报名人数</div> <div class="total">报名人数</div>
<div class="operate">操作</div> <div class="operate">操作</div>
</div> </div>
<div class="t_item t_con" v-for="(i,index) in props.data" :key="i"> <div class="t_item t_con" v-for="(i,index) in props.data" :key="index">
<div class="ranking"> <div class="ranking">
<div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div> <div class="ol" :class="{ ac: index <= 3 }">{{ i.pm}}</div>
</div> </div>
<div class="name">{{ i.name }}</div> <div class="name">{{ i.csyxname }}</div>
<div class="total">{{ i.sum }}</div> <div class="total">{{ i.bms }}</div>
<div class="operate">详情</div> <div class="operate" @click="goToInfo(i.csyxid)">详情</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {useRouter} from 'vue-router'
const router = useRouter()
const props = defineProps({ const props = defineProps({
data: { data: {
type: Array, type: Array,
@ -59,6 +61,12 @@
], ],
}, },
}); });
const goToInfo = (id:any) => {
router.push({
path:'/annualcompetitionprojectregistration/administration/audited/AnnualCompetitionProjectRegistrationList',
query:{id}
})
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

5
jeecgboot-vue3-master/src/views/depart/workbench/components/components/cardListThree.vue
Unescape View File

@ -17,7 +17,8 @@
<div class="name">{{ i.name }}</div> <div class="name">{{ i.name }}</div>
<div class="total">{{ i.sum }}</div> <div class="total">{{ i.sum }}</div>
<div class="total">{{ i.sum }}</div> <div class="total">{{ i.sum }}</div>
<div class="operate">胡辣汤学院</div> <div class="operate">
河南机电职业学院</div>
</div> </div>
</div> </div>
</div> </div>
@ -117,7 +118,7 @@
} }
.operate { .operate {
width: 80px; width: 140px;
} }
} }

6
jeecgboot-vue3-master/src/views/depart/workbench/components/components/cardListtow.vue
Unescape View File

@ -14,8 +14,8 @@
<div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div> <div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div>
</div> --> </div> -->
<div class="name">{{ i.name }}</div> <div class="name">{{ i.name }}</div>
<div class="total">{{ i.sum }}</div> <div class="total">{{ i.xh }}</div>
<div class="operate">胡辣汤学院</div> <div class="operate">{{ i.szyx }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -115,7 +115,7 @@
} }
.operate { .operate {
width: 80px; width: 140px;
} }
} }

423
jeecgboot-vue3-master/src/views/depart/workbench/components/organizingCommittee/organizingCommittee.vue
Unescape View File

@ -8,8 +8,8 @@
<div class="left">比赛届数</div> <div class="left">比赛届数</div>
<div class="right"><SvgIcon size="20" name="shizhong" /></div> <div class="right"><SvgIcon size="20" name="shizhong" /></div>
</div> </div>
<div class="name">第三十届电子科技大赛</div> <div class="name">{{ data.annualCompName }}</div>
<div class="total">共12届，当前第12届</div> <div class="total">共{{data.sum}}届，当前第{{data.sum}}届</div>
</div> </div>
</div> </div>
</a-col> </a-col>
@ -17,25 +17,29 @@
><div class="item"> ><div class="item">
<div class="card2"> <div class="card2">
<div class="title"> <div class="title">
<div class="left">参加比赛队伍数</div> <div class="left">比赛报名数</div>
<div class="right"><SvgIcon size="20" name="content" /></div> <div class="right"><SvgIcon size="20" name="content" /></div>
</div> </div>
<div id="chart-content"></div> <div class="content">{{ data.bmNumber }}</div>
<div class="total">本月比赛：0</div> <!-- <div id="chart-content"></div> -->
<div class="total">
<ul>
<li>一等:{{ data.ydjNumber }}</li>
<li>二等:{{ data.edjNumber }}</li>
<li>三等:{{ data.sdjNumber }}</li>
<li>四等:{{ data.sidjNumber }}</li>
<li>五等:{{ data.wdjNumber }}</li>
</ul>
</div>
</div> </div </div> </div
></a-col> ></a-col>
<a-col :lg="12" :xxl="6"><div class="item"> <a-col :lg="12" :xxl="6"><div class="item">
<div class="card3"> <div class="card3">
<div class="title"> <div class="title">
<div class="left">参赛人数</div> <div class="left"><span>参赛人数</span><span>个人赛人数</span><span>团队赛人数</span></div>
<div class="right"><SvgIcon size="20" name="content" /></div> <div class="right"><SvgIcon size="20" name="content" /></div>
</div> </div>
<div class="name">1314</div> <div class="name"><span>20</span><span>10</span><span>10</span></div>
<div class="total">
<div class="one">一等：11</div>
<div class="two">二等：1</div>
<div class="three">三等：1</div>
</div>
</div> </div>
</div></a-col> </div></a-col>
<a-col :lg="12" :xxl="6"><div class="item"> <a-col :lg="12" :xxl="6"><div class="item">
@ -44,8 +48,15 @@
<div class="left">比赛项目数</div> <div class="left">比赛项目数</div>
<div class="right"><SvgIcon size="20" name="content" /></div> <div class="right"><SvgIcon size="20" name="content" /></div>
</div> </div>
<div class="name">12</div> <div class="name">{{data.bsxmSum}}</div>
<div class="total">报名最多的项目是：项目三 地三十届电子科技大赛</div> <div class="card-list">
<ul>
<li v-for="(item,index) in data.qwtxmList" :key="index">
{{ item.xmname }} 报名数: {{ item.xmbmrs }}
</li>
</ul>
</div>
</div> </div>
</div></a-col> </div></a-col>
</a-row> </a-row>
@ -54,13 +65,16 @@
<a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24" <a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24"
><div class="Participation"> ><div class="Participation">
<a-card title="参赛院系人数排名" style="width: 100%; height: 100%"> <a-card title="参赛院系人数排名" style="width: 100%; height: 100%">
<cardList /> <cardList :data="data.csyxbmpm"/>
</a-card> </div </a-card>
<div class="setting-btn" @click="getAll">更多</div>
</div
></a-col> ></a-col>
<a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24" <a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24"
><div class="Participation"> ><div class="Participation">
<a-card title="报名学生列表" style="width: 100%; height: 100%"> <a-card title="报名学生列表" style="width: 100%; height: 100%">
<cardListTow /> <cardListTow :data="data.bmxsxxList"/>
<div class="setting-btn" @click="getAll">更多</div>
</a-card> </div </a-card> </div
></a-col> ></a-col>
</a-row> </a-row>
@ -94,12 +108,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import { SvgIcon } from '/@/components/Icon'; import { SvgIcon } from '/@/components/Icon';
import { onMounted } from 'vue'; import { onMounted ,ref} from 'vue';
import cardList from '../components/cardList.vue'; import cardList from '../components/cardList.vue';
import cardListTow from '../components/cardListtow.vue'; import cardListTow from '../components/cardListtow.vue';
import cardListThree from '../components/cardListThree.vue'; import cardListThree from '../components/cardListThree.vue';
import echarts from '/@/utils/lib/echarts'; import echarts from '/@/utils/lib/echarts';
import { getOrganizingCommittee }from '/@/api/common/api' import { getOrganizingCommittee }from '/@/api/common/api'
import {useRouter} from 'vue-router'
const router = useRouter()
const throttle = (fn: any) => { const throttle = (fn: any) => {
let timer: any; let timer: any;
return function () { return function () {
@ -113,183 +129,188 @@
}, 1000); }, 1000);
}; };
}; };
const data = ref<any>({})
const getOrganizingCommitteeEvent = async () => { const getOrganizingCommitteeEvent = async () => {
const res = await getOrganizingCommittee() const res = await getOrganizingCommittee()
data.value = res
console.log(res); console.log(res);
} }
getOrganizingCommitteeEvent() getOrganizingCommitteeEvent()
const initContent = () => { const getAll = () => {
const myChart = echarts.init(document.getElementById('chart-content')); router.push('/annualcompetitionprojectregistration/administration/audited/AnnualCompetitionProjectRegistrationList')
const option = { }
backgroundColor: 'transparent', // const initContent = () => {
title: [ // const myChart = echarts.init(document.getElementById('chart-content'));
{ // const option = {
text: '111', // backgroundColor: 'transparent',
}, // title: [
], // {
tooltip: { // text: '111',
trigger: 'axis', // },
axisPointer: { // ],
lineStyle: { // tooltip: {
color: '#57617B', // trigger: 'axis',
}, // axisPointer: {
}, // lineStyle: {
}, // color: '#57617B',
grid: { // },
left: '20px', // },
right: '0', // },
bottom: '0', // grid: {
top: '20px', // left: '20px',
containLabel: false, // right: '0',
}, // bottom: '0',
xAxis: [ // top: '20px',
{ // containLabel: false,
type: 'category', // },
show: false, // xAxis: [
axisLine: {
lineStyle: {
color: '#44607C',
},
},
axisLabel: {
show: false,
margin: 10,
textStyle: {
fontSize: 14,
color: '#D5CBE8',
fontWeight: 700,
},
},
axisTick: {
show: false,
},
data: ['一月','二月','三月','四月','五月'],
},
],
yAxis: [
{
type: 'value',
name: '单位（%）',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: 'none',
},
},
axisLabel: {
margin: 10,
show: false,
textStyle: {
fontSize: 14,
color: '#3681B5',
fontWeight: 700,
},
},
splitLine: {
show: false,
lineStyle: {
color: '#57617B',
},
},
},
],
series: [
{
name: '比赛队伍',
type: 'line',
smooth: true,
stack: '总量',
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
animationDelay: 2000,
animationDuration: 1000,
// markPoint: {
// symbol:
// 'path://M783.136 180.064C771.872 168.832 757.152 160 742.4 160L281.6 160C266.848 160 252.128 168.832 240.864 180.064 229.632 191.328 224 209.248 224 224l0 460.8c0 14.752 5.632 26.272 16.864 37.536C252.128 733.568 266.848 736 281.6 736l115.2 0 115.2 115.2 115.2-115.2 115.2 0c14.752 0 29.472-2.432 40.736-13.664C794.368 711.072 800 699.552 800 684.8L800 224C800 209.248 794.368 191.328 783.136 180.064z',
// symbolOffset: [0, '-100%'],
// symbolSize: 35, //这里可以改变大小
// data: [
// { // {
// type: 'max', // type: 'category',
// name: '最大值', // show: false,
// axisLine: {
// lineStyle: {
// color: '#44607C',
// },
// },
// axisLabel: {
// show: false,
// margin: 10,
// textStyle: {
// fontSize: 14,
// color: '#D5CBE8',
// fontWeight: 700,
// },
// },
// axisTick: {
// show: false,
// },
// data: ['一月','二月','三月','四月','五月'],
// }, // },
// ], // ],
// label: { // yAxis: [
// offset: [0, -3], // {
// type: 'value',
// name: '单位（%）',
// axisTick: {
// show: false,
// },
// axisLine: {
// lineStyle: {
// color: 'none',
// },
// }, // },
// animationDelay: 3000, // axisLabel: {
// margin: 10,
// show: false,
// textStyle: {
// fontSize: 14,
// color: '#3681B5',
// fontWeight: 700,
// },
// },
// splitLine: {
// show: false,
// lineStyle: {
// color: '#57617B',
// },
// },
// },
// ],
// series: [
// {
// name: '比赛队伍',
// type: 'line',
// smooth: true,
// stack: '总量',
// symbol: 'circle',
// symbolSize: 5,
// showSymbol: false,
// animationDelay: 2000,
// animationDuration: 1000, // animationDuration: 1000,
// // markPoint: {
// // symbol:
// // 'path://M783.136 180.064C771.872 168.832 757.152 160 742.4 160L281.6 160C266.848 160 252.128 168.832 240.864 180.064 229.632 191.328 224 209.248 224 224l0 460.8c0 14.752 5.632 26.272 16.864 37.536C252.128 733.568 266.848 736 281.6 736l115.2 0 115.2 115.2 115.2-115.2 115.2 0c14.752 0 29.472-2.432 40.736-13.664C794.368 711.072 800 699.552 800 684.8L800 224C800 209.248 794.368 191.328 783.136 180.064z',
// // symbolOffset: [0, '-100%'],
// // symbolSize: 35, //这里可以改变大小
// // data: [
// // {
// // type: 'max',
// // name: '最大值',
// // },
// // ],
// // label: {
// // offset: [0, -3],
// // },
// // animationDelay: 3000,
// // animationDuration: 1000,
// // },
// lineStyle: {
// normal: {
// width: 3,
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 1,
// y2: 0,
// colorStops: [
// {
// offset: 0,
// color: '#5eb2ff', // 0% 处的颜色
// }, // },
lineStyle: { // {
normal: { // offset: 1,
width: 3, // color: '#5eb2ff', // 100% 处的颜色
color: { // },
type: 'linear', // ],
x: 0, // globalCoord: false, // 缺省为 false
y: 0, // },
x2: 1, // opacity: 0.9,
y2: 0, // },
colorStops: [ // },
{ // areaStyle: {
offset: 0,
color: '#5eb2ff', // 0% 处的颜色
},
{
offset: 1,
color: '#5eb2ff', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
opacity: 0.9,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#5eb2ff',
},
{
offset: 0.8,
color: '#5eb2ff',
},
],
false
),
shadowColor: '#5eb2ff',
shadowBlur: 10,
},
},
// itemStyle: {
// normal: { // normal: {
// color: '#3A5493', // color: new echarts.graphic.LinearGradient(
// borderColor: '', // 0,
// borderWidth: 12, // 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: '#5eb2ff',
// }, // },
// {
// offset: 0.8,
// color: '#5eb2ff',
// }, // },
data: [23,12,45,9,30], // ],
}, // false
], // ),
}; // shadowColor: '#5eb2ff',
myChart.setOption(option); // shadowBlur: 10,
let resize = throttle(() => { // },
myChart.resize(); // },
}); // // itemStyle: {
window.addEventListener('resize', resize); // // normal: {
}; // // color: '#3A5493',
// // borderColor: '',
// // borderWidth: 12,
// // },
// // },
// data: [23,12,45,9,30],
// },
// ],
// };
// myChart.setOption(option);
// let resize = throttle(() => {
// myChart.resize();
// });
// window.addEventListener('resize', resize);
// };
onMounted(() => { onMounted(() => {
initContent(); // initContent();
const myChart = echarts.init(document.getElementById('chart')); const myChart = echarts.init(document.getElementById('chart'));
const option = { const option = {
tooltip: {}, tooltip: {},
@ -376,10 +397,19 @@
width: 100%; width: 100%;
height: 80px; height: 80px;
} }
.content{
font-size: 42px;
font-weight: 600;
}
.total{ .total{
margin-top: 10px; margin-top: 30px;
font-size: 12px; font-size: 12px;
color: #000; color: #000;
ul{
width: 100%;
display: flex;
justify-content: space-between;
}
} }
} }
.card3 { .card3 {
@ -392,9 +422,12 @@
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
.left { .left {
flex: 1;
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
display: flex;
justify-content: space-between;
} }
} }
@ -402,7 +435,10 @@
font-size: 42px; font-size: 42px;
font-weight: 500; font-weight: 500;
color: #000; color: #000;
margin-top: 10px; margin-top: 30px;
display: flex;
justify-content: space-between;
padding-right: 20px;
} }
.total{ .total{
margin-top: 20px; margin-top: 20px;
@ -414,6 +450,7 @@
} }
} }
.card4 { .card4 {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
@ -441,12 +478,36 @@
color: #000; color: #000;
} }
.card-list{
position: absolute;
width: 200px;
right: 55px;
top: 20px;
height: calc(100% - 40px);
ul{
height: 100%;
// display: flex;
// flex-direction: column;
// justify-content: space-between;
li{
margin: 5px 0;
}
}
}
} }
} }
.Participation { .Participation {
position: relative;
width: 100%; width: 100%;
height: 502px; height: 502px;
background-color: #fff; background-color: #fff;
.setting-btn{
position: absolute;
right: 20px;
top: 20px;
color: #018ffb;
cursor: pointer;
}
} }
.content-card { .content-card {
width: 100%; width: 100%;

Write Preview
Loading…
Cancel
Save