forked from wangjiadong/comp
JayChou
4 months ago
parent
c33f1db0cd
commit
afa43be7cf
18 changed files with 1600 additions and 1 deletions
|
After Width: | Height: | Size: 768 B |
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,76 @@ |
||||
<template> |
||||
<div id="cakeChart"> </div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import echarts from '/@/utils/lib/echarts'; |
||||
|
||||
import { onMounted } from 'vue'; |
||||
const throttle = (fn: any) => { |
||||
let timer: any; |
||||
return function () { |
||||
if (timer) { |
||||
return; |
||||
} |
||||
timer = setTimeout(() => { |
||||
fn(); |
||||
clearTimeout(timer); |
||||
timer = null; |
||||
}, 1000); |
||||
}; |
||||
}; |
||||
onMounted(() => { |
||||
// @ts-ignore |
||||
const myChart = echarts.init(document.getElementById('cakeChart')); |
||||
const option = { |
||||
title: { |
||||
text: '国家ABC类比赛占比', |
||||
left: '20px', |
||||
top: '20px', |
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
}, |
||||
|
||||
series: [ |
||||
{ |
||||
name: 'Access From', |
||||
type: 'pie', |
||||
radius: '60%', |
||||
center:['50%','55%'], |
||||
data: [ |
||||
{ value: 1048, name: '比赛一',itemStyle: {color: '#0052d9'} }, |
||||
{ value: 735, name: '比赛二',itemStyle: {color: '#699ef5'} }, |
||||
{ value: 580, name: '比赛三',itemStyle: {color: '#d9e1ff'} }, |
||||
// { value: 484, name: '比赛四' ,itemStyle: {color: '#0052d9'}}, |
||||
], |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
label: { |
||||
show: false, |
||||
}, |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 0, |
||||
shadowColor: 'rgba(0, 0, 0, 0.5)', |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
myChart.setOption(option); |
||||
let resize = throttle(() => { |
||||
myChart.resize(); |
||||
}); |
||||
window.addEventListener('resize', resize); |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
#cakeChart { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,148 @@ |
||||
<template> |
||||
<div class="foo_card"> |
||||
<div class="title"> 比赛学生综合能力评价分析<SvgIcon class="icon" @click="unfold" name="zhedie" /></div> |
||||
|
||||
<div class="table"> |
||||
<div class="t_item t_head"> |
||||
<div class="name">能力名称</div> |
||||
<div class="total">能力分数</div> |
||||
<div class="operate">达标情况</div> |
||||
</div> |
||||
<div class="t_item t_con" v-for="(i) in 20" :key="i"> |
||||
<div class="name">能力一</div> |
||||
<div class="total">100</div> |
||||
<div class="operate">达标</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { SvgIcon } from '/@/components/Icon'; |
||||
|
||||
const props = defineProps({ |
||||
data: { |
||||
type: Array, |
||||
|
||||
}, |
||||
}); |
||||
let falg = false; |
||||
const unfold = () => { |
||||
const dom: any = document.querySelector('.foo_card') as Element; |
||||
falg = !falg; |
||||
if (falg) { |
||||
dom.style.height = 'auto'; |
||||
} else { |
||||
dom.style.height = '500px'; |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.foo_card { |
||||
width: 100%; |
||||
height: 500px; |
||||
overflow: auto; |
||||
background: #ffffff; |
||||
// box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||
// border-radius: 6px 6px 6px 6px; |
||||
|
||||
.title { |
||||
width: 100%; |
||||
text-align: center; |
||||
padding-left: 23px; |
||||
height: 57px; |
||||
line-height: 57px; |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
position: relative; |
||||
.icon { |
||||
position: absolute; |
||||
right: 20px; |
||||
top: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 1px; |
||||
background-color: rgba(5, 5, 5, 0.06); |
||||
} |
||||
} |
||||
|
||||
.table { |
||||
width: 100%; |
||||
padding-left: 32px; |
||||
|
||||
.t_item { |
||||
height: 54px; |
||||
border-bottom: 1px solid #e7e7e7; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.ranking { |
||||
width: 80px; |
||||
} |
||||
|
||||
.name { |
||||
flex: 1; |
||||
} |
||||
|
||||
.total { |
||||
width: 74px; |
||||
flex: 1; |
||||
} |
||||
|
||||
.operate { |
||||
width: 80px; |
||||
} |
||||
} |
||||
|
||||
.t_head { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.4); |
||||
} |
||||
|
||||
.t_con { |
||||
.ranking { |
||||
.ol { |
||||
width: 24px; |
||||
height: 24px; |
||||
background: #e7e7e7; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
font-size: 14px; |
||||
line-height: 24px; |
||||
text-align: center; |
||||
border-radius: 50%; |
||||
|
||||
&.ac { |
||||
background: #0052d9; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.total { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.operate { |
||||
font-size: 14px; |
||||
color: #0052d9; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,148 @@ |
||||
<template> |
||||
<div class="foo_card2"> |
||||
<div class="title"> 比赛学生参赛情况分析<SvgIcon class="icon" @click="unfold" name="zhedie" /></div> |
||||
|
||||
<div class="table"> |
||||
<div class="t_item t_head"> |
||||
<div class="name">比赛名称</div> |
||||
<div class="total">比赛状态</div> |
||||
<div class="operate">操作</div> |
||||
</div> |
||||
<div class="t_item t_con" v-for="(i) in 20" :key="i"> |
||||
<div class="name">全国高级计算机大赛</div> |
||||
<div class="total">比赛中</div> |
||||
<div class="operate">详情</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { SvgIcon } from '/@/components/Icon'; |
||||
|
||||
const props = defineProps({ |
||||
data: { |
||||
type: Array, |
||||
|
||||
}, |
||||
}); |
||||
let falg = false; |
||||
const unfold = () => { |
||||
const dom: any = document.querySelector('.foo_card2') as Element; |
||||
falg = !falg; |
||||
if (falg) { |
||||
dom.style.height = 'auto'; |
||||
} else { |
||||
dom.style.height = '500px'; |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.foo_card2 { |
||||
width: 100%; |
||||
height: 500px; |
||||
overflow: auto; |
||||
background: #ffffff; |
||||
// box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||
// border-radius: 6px 6px 6px 6px; |
||||
|
||||
.title { |
||||
width: 100%; |
||||
text-align: center; |
||||
padding-left: 23px; |
||||
height: 57px; |
||||
line-height: 57px; |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
position: relative; |
||||
.icon { |
||||
position: absolute; |
||||
right: 20px; |
||||
top: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 1px; |
||||
background-color: rgba(5, 5, 5, 0.06); |
||||
} |
||||
} |
||||
|
||||
.table { |
||||
width: 100%; |
||||
padding-left: 32px; |
||||
|
||||
.t_item { |
||||
height: 54px; |
||||
border-bottom: 1px solid #e7e7e7; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.ranking { |
||||
width: 80px; |
||||
} |
||||
|
||||
.name { |
||||
flex: 1; |
||||
} |
||||
|
||||
.total { |
||||
width: 74px; |
||||
flex: 1; |
||||
} |
||||
|
||||
.operate { |
||||
width: 80px; |
||||
} |
||||
} |
||||
|
||||
.t_head { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.4); |
||||
} |
||||
|
||||
.t_con { |
||||
.ranking { |
||||
.ol { |
||||
width: 24px; |
||||
height: 24px; |
||||
background: #e7e7e7; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
font-size: 14px; |
||||
line-height: 24px; |
||||
text-align: center; |
||||
border-radius: 50%; |
||||
|
||||
&.ac { |
||||
background: #0052d9; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.total { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.operate { |
||||
font-size: 14px; |
||||
color: #0052d9; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,148 @@ |
||||
<template> |
||||
<div class="foo_card3"> |
||||
<div class="title"> 比赛学生参赛情况分析<SvgIcon class="icon" @click="unfold" name="zhedie" /></div> |
||||
|
||||
<div class="table"> |
||||
<div class="t_item t_head"> |
||||
<div class="name">比赛名称</div> |
||||
<div class="total">比赛状态</div> |
||||
<div class="operate">操作</div> |
||||
</div> |
||||
<div class="t_item t_con" v-for="(i) in 20" :key="i"> |
||||
<div class="name">全国高级计算机大赛</div> |
||||
<div class="total">比赛中</div> |
||||
<div class="operate">详情</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { SvgIcon } from '/@/components/Icon'; |
||||
|
||||
const props = defineProps({ |
||||
data: { |
||||
type: Array, |
||||
|
||||
}, |
||||
}); |
||||
let falg = false; |
||||
const unfold = () => { |
||||
const dom: any = document.querySelector('.foo_card3') as Element; |
||||
falg = !falg; |
||||
if (falg) { |
||||
dom.style.height = 'auto'; |
||||
} else { |
||||
dom.style.height = '500px'; |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.foo_card3 { |
||||
width: 100%; |
||||
height: 500px; |
||||
overflow: auto; |
||||
background: #ffffff; |
||||
// box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||
// border-radius: 6px 6px 6px 6px; |
||||
|
||||
.title { |
||||
width: 100%; |
||||
text-align: center; |
||||
padding-left: 23px; |
||||
height: 57px; |
||||
line-height: 57px; |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
position: relative; |
||||
.icon { |
||||
position: absolute; |
||||
right: 20px; |
||||
top: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 1px; |
||||
background-color: rgba(5, 5, 5, 0.06); |
||||
} |
||||
} |
||||
|
||||
.table { |
||||
width: 100%; |
||||
padding-left: 32px; |
||||
|
||||
.t_item { |
||||
height: 54px; |
||||
border-bottom: 1px solid #e7e7e7; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.ranking { |
||||
width: 80px; |
||||
} |
||||
|
||||
.name { |
||||
flex: 1; |
||||
} |
||||
|
||||
.total { |
||||
width: 74px; |
||||
flex: 1; |
||||
} |
||||
|
||||
.operate { |
||||
width: 80px; |
||||
} |
||||
} |
||||
|
||||
.t_head { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.4); |
||||
} |
||||
|
||||
.t_con { |
||||
.ranking { |
||||
.ol { |
||||
width: 24px; |
||||
height: 24px; |
||||
background: #e7e7e7; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
font-size: 14px; |
||||
line-height: 24px; |
||||
text-align: center; |
||||
border-radius: 50%; |
||||
|
||||
&.ac { |
||||
background: #0052d9; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.total { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.operate { |
||||
font-size: 14px; |
||||
color: #0052d9; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,150 @@ |
||||
<template> |
||||
<div class="foo_card4"> |
||||
<div class="title"> 部门参赛情况<SvgIcon class="icon" @click="unfold" name="zhedie" /></div> |
||||
|
||||
<div class="table"> |
||||
<div class="t_item t_head"> |
||||
<div class="name">部门名称</div> |
||||
<div class="total">参加比赛数</div> |
||||
<div class="operate">参加人数</div> |
||||
<div class="operate">队伍数</div> |
||||
</div> |
||||
<div class="t_item t_con" v-for="(i) in 20" :key="i"> |
||||
<div class="name">机电学院</div> |
||||
<div class="total">1212</div> |
||||
<div class="total">1212</div> |
||||
<div class="operate">1212</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { SvgIcon } from '/@/components/Icon'; |
||||
|
||||
const props = defineProps({ |
||||
data: { |
||||
type: Array, |
||||
|
||||
}, |
||||
}); |
||||
let falg = false; |
||||
const unfold = () => { |
||||
const dom: any = document.querySelector('.foo_card4') as Element; |
||||
falg = !falg; |
||||
if (falg) { |
||||
dom.style.height = 'auto'; |
||||
} else { |
||||
dom.style.height = '500px'; |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.foo_card4 { |
||||
width: 100%; |
||||
height:398px; |
||||
overflow: auto; |
||||
background: #ffffff; |
||||
// box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||
// border-radius: 6px 6px 6px 6px; |
||||
|
||||
.title { |
||||
width: 100%; |
||||
text-align: center; |
||||
padding-left: 23px; |
||||
height: 57px; |
||||
line-height: 57px; |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
position: relative; |
||||
.icon { |
||||
position: absolute; |
||||
right: 20px; |
||||
top: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 1px; |
||||
background-color: rgba(5, 5, 5, 0.06); |
||||
} |
||||
} |
||||
|
||||
.table { |
||||
width: 100%; |
||||
padding-left: 32px; |
||||
|
||||
.t_item { |
||||
height: 54px; |
||||
border-bottom: 1px solid #e7e7e7; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.ranking { |
||||
width: 80px; |
||||
} |
||||
|
||||
.name { |
||||
flex: 1; |
||||
} |
||||
|
||||
.total { |
||||
width: 74px; |
||||
flex: 1; |
||||
} |
||||
|
||||
.operate { |
||||
width: 80px; |
||||
} |
||||
} |
||||
|
||||
.t_head { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.4); |
||||
} |
||||
|
||||
.t_con { |
||||
.ranking { |
||||
.ol { |
||||
width: 24px; |
||||
height: 24px; |
||||
background: #e7e7e7; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
font-size: 14px; |
||||
line-height: 24px; |
||||
text-align: center; |
||||
border-radius: 50%; |
||||
|
||||
&.ac { |
||||
background: #0052d9; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.total { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.operate { |
||||
font-size: 14px; |
||||
color: #0052d9; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,152 @@ |
||||
<template> |
||||
<div class="foo_card5"> |
||||
<div class="title"> 比赛学生参赛情况分析<SvgIcon class="icon" @click="unfold" name="zhedie" /></div> |
||||
|
||||
<div class="table"> |
||||
<div class="t_item t_head"> |
||||
<div class="ranking">排名</div> |
||||
<div class="name">比赛名称</div> |
||||
<!-- <div class="total">比赛状态</div> --> |
||||
<div class="operate">积分</div> |
||||
</div> |
||||
<div class="t_item t_con" v-for="(i,index) in 20" :key="i"> |
||||
<div class="ranking"> |
||||
<div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div> |
||||
</div> |
||||
<div class="name">机电学院</div> |
||||
<!-- <div class="total">比赛中</div> --> |
||||
<div class="operate">112</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { SvgIcon } from '/@/components/Icon'; |
||||
|
||||
const props = defineProps({ |
||||
data: { |
||||
type: Array, |
||||
|
||||
}, |
||||
}); |
||||
let falg = false; |
||||
const unfold = () => { |
||||
const dom: any = document.querySelector('.foo_card5') as Element; |
||||
falg = !falg; |
||||
if (falg) { |
||||
dom.style.height = 'auto'; |
||||
} else { |
||||
dom.style.height = '500px'; |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.foo_card5 { |
||||
width: 100%; |
||||
height: 398px; |
||||
overflow: auto; |
||||
background: #ffffff; |
||||
// box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||
// border-radius: 6px 6px 6px 6px; |
||||
|
||||
.title { |
||||
width: 100%; |
||||
text-align: center; |
||||
padding-left: 23px; |
||||
height: 57px; |
||||
line-height: 57px; |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
position: relative; |
||||
.icon { |
||||
position: absolute; |
||||
right: 20px; |
||||
top: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 1px; |
||||
background-color: rgba(5, 5, 5, 0.06); |
||||
} |
||||
} |
||||
|
||||
.table { |
||||
width: 100%; |
||||
padding-left: 32px; |
||||
|
||||
.t_item { |
||||
height: 54px; |
||||
border-bottom: 1px solid #e7e7e7; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.ranking { |
||||
width: 80px; |
||||
} |
||||
|
||||
.name { |
||||
flex: 1; |
||||
} |
||||
|
||||
.total { |
||||
width: 74px; |
||||
flex: 1; |
||||
} |
||||
|
||||
.operate { |
||||
width: 80px; |
||||
} |
||||
} |
||||
|
||||
.t_head { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.4); |
||||
} |
||||
|
||||
.t_con { |
||||
.ranking { |
||||
.ol { |
||||
width: 24px; |
||||
height: 24px; |
||||
background: #e7e7e7; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
font-size: 14px; |
||||
line-height: 24px; |
||||
text-align: center; |
||||
border-radius: 50%; |
||||
|
||||
&.ac { |
||||
background: #0052d9; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.total { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.operate { |
||||
font-size: 14px; |
||||
color: #0052d9; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,157 @@ |
||||
<template> |
||||
<div class="foo_card6"> |
||||
<div class="title"> 比赛学生参赛情况分析<SvgIcon class="icon" @click="unfold" name="zhedie" /></div> |
||||
|
||||
<div class="table"> |
||||
<div class="t_item t_head"> |
||||
<!-- <div class="ranking">排名</div> --> |
||||
<div class="name">部门名称</div> |
||||
<div class="total">获奖人数</div> |
||||
<div class="total">一等奖</div> |
||||
<div class="total">二等奖</div> |
||||
<div class="operate">三等奖</div> |
||||
<!-- <div class="operate">积分</div> --> |
||||
</div> |
||||
<div class="t_item t_con" v-for="(i,index) in 20" :key="i"> |
||||
<!-- <div class="ranking"> |
||||
<div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div> |
||||
</div> --> |
||||
<div class="name">机电学院</div> |
||||
<div class="total">1212</div> |
||||
<div class="total">4322</div> |
||||
<div class="total">1212</div> |
||||
<div class="operate">112</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { SvgIcon } from '/@/components/Icon'; |
||||
|
||||
const props = defineProps({ |
||||
data: { |
||||
type: Array, |
||||
|
||||
}, |
||||
}); |
||||
let falg = false; |
||||
const unfold = () => { |
||||
const dom: any = document.querySelector('.foo_card6') as Element; |
||||
falg = !falg; |
||||
if (falg) { |
||||
dom.style.height = 'auto'; |
||||
} else { |
||||
dom.style.height = '500px'; |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.foo_card6 { |
||||
width: 100%; |
||||
height: 398px; |
||||
overflow: auto; |
||||
background: #ffffff; |
||||
// box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||
// border-radius: 6px 6px 6px 6px; |
||||
|
||||
.title { |
||||
width: 100%; |
||||
text-align: center; |
||||
padding-left: 23px; |
||||
height: 57px; |
||||
line-height: 57px; |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
position: relative; |
||||
.icon { |
||||
position: absolute; |
||||
right: 20px; |
||||
top: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 1px; |
||||
background-color: rgba(5, 5, 5, 0.06); |
||||
} |
||||
} |
||||
|
||||
.table { |
||||
width: 100%; |
||||
padding-left: 32px; |
||||
|
||||
.t_item { |
||||
height: 54px; |
||||
border-bottom: 1px solid #e7e7e7; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.ranking { |
||||
width: 80px; |
||||
} |
||||
|
||||
.name { |
||||
flex: 1; |
||||
} |
||||
|
||||
.total { |
||||
width: 74px; |
||||
flex: 1; |
||||
} |
||||
|
||||
.operate { |
||||
width: 80px; |
||||
} |
||||
} |
||||
|
||||
.t_head { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.4); |
||||
} |
||||
|
||||
.t_con { |
||||
.ranking { |
||||
.ol { |
||||
width: 24px; |
||||
height: 24px; |
||||
background: #e7e7e7; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
font-size: 14px; |
||||
line-height: 24px; |
||||
text-align: center; |
||||
border-radius: 50%; |
||||
|
||||
&.ac { |
||||
background: #0052d9; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.total { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.operate { |
||||
font-size: 14px; |
||||
color: #0052d9; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="card"> |
||||
<div> |
||||
{{ props.title }} |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
const props = defineProps({ |
||||
title:{ |
||||
type:String, |
||||
required:true, |
||||
default:'标题' |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
<style lang='less' scoped> |
||||
.card{ |
||||
width:calc( 890px /1.5); |
||||
height: calc(289px /1.5); |
||||
background: url('../../../assets/images/card.png') no-repeat; |
||||
background-size: contain; |
||||
display: flex; |
||||
align-items: center; |
||||
color: #fff; |
||||
padding-left: 40px; |
||||
font-size: 26px; |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,199 @@ |
||||
<template> |
||||
<div id="rander-chart"> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import echarts from '/@/utils/lib/echarts'; |
||||
|
||||
import { onMounted } from 'vue' |
||||
const throttle = (fn: any) => { |
||||
let timer: any; |
||||
return function () { |
||||
if (timer) { |
||||
return; |
||||
} |
||||
timer = setTimeout(() => { |
||||
fn(); |
||||
clearTimeout(timer); |
||||
timer = null; |
||||
}, 1000); |
||||
}; |
||||
}; |
||||
onMounted(() => { |
||||
|
||||
// @ts-ignore |
||||
const myChart = echarts.init(document.getElementById("rander-chart")); |
||||
console.log(myChart); |
||||
|
||||
// var legendData = ['车辆数']; //图例 |
||||
var indicator = [ |
||||
{ |
||||
text: "前言探索", |
||||
max: 6000, |
||||
}, |
||||
{ |
||||
text: "奠定基础", |
||||
max: 5000, |
||||
}, |
||||
{ |
||||
text: "知识分析", |
||||
max: 5000, |
||||
}, |
||||
{ |
||||
text: "社会责任", |
||||
max: 5000, |
||||
}, |
||||
{ |
||||
text: "独立思考", |
||||
max: 5500, |
||||
}, |
||||
{ |
||||
text: "拓宽视野", |
||||
max: 5000, |
||||
}, |
||||
{ |
||||
text: "激发兴趣", |
||||
max: 5000, |
||||
}, |
||||
{ |
||||
text: "沟通协调", |
||||
max: 5000, |
||||
}, |
||||
{ |
||||
text: "设计开发", |
||||
max: 5000, |
||||
}, |
||||
{ |
||||
text: "研判分析", |
||||
max: 5000, |
||||
}, |
||||
{ |
||||
text: "创新能力", |
||||
max: 5000, |
||||
}, |
||||
{ |
||||
text: "团队协作", |
||||
max: 5000, |
||||
}, |
||||
]; |
||||
var dataArr = [ |
||||
{ |
||||
value: [ |
||||
4000, 700, 3600, 3900, 1800, 4200, 700, 3600, 4200, 700, 3600, 4200, |
||||
700, 3600, |
||||
], |
||||
name: '年度维度分析', |
||||
itemStyle: { |
||||
normal: { |
||||
lineStyle: { |
||||
color: "#55d7f2", |
||||
}, |
||||
shadowColor: '#4A99FF', |
||||
shadowBlur: 10, |
||||
}, |
||||
}, |
||||
areaStyle: { |
||||
normal: { |
||||
// 单项区域填充样式 |
||||
color: { |
||||
type: "linear", |
||||
x: 1, //右 |
||||
y: 0, //下 |
||||
x2: 1, //左 |
||||
y2: 1, //上 |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "#1890ff", |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "#1890ff", |
||||
}, |
||||
], |
||||
globalCoord: false, |
||||
}, |
||||
opacity: 1, // 区域透明度 |
||||
}, |
||||
}, |
||||
}, |
||||
]; |
||||
var colorArr = ["#fff", "#fff"]; //颜色 |
||||
const option :any= { |
||||
backgroundColor: "transparent", |
||||
color: colorArr, |
||||
// legend: { |
||||
// orient: "vertical", |
||||
// // icon: 'circle', //图例形状 |
||||
// // data: legendData, |
||||
// top: 0, |
||||
// left: 20, |
||||
// itemWidth: 8, // 图例标记的图形宽度。[ default: 25 ] |
||||
// itemHeight: 8, // 图例标记的图形高度。[ default: 14 ] |
||||
// itemGap: 22, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。 |
||||
// textStyle: { |
||||
// fontSize: 12, |
||||
// fontWeight: "bold", |
||||
// color: "#00E4FF", |
||||
// }, |
||||
// }, |
||||
tooltip: { |
||||
trigger: 'item' |
||||
}, |
||||
radar: { |
||||
radius: "60%", |
||||
// shape: 'circle', |
||||
name: { |
||||
textStyle: { |
||||
color: "#9ca4a6", |
||||
fontSize: 12, |
||||
}, |
||||
}, |
||||
indicator: indicator, |
||||
splitArea: { |
||||
// 坐标轴在 grid 区域中的分隔区域，默认不显示。 |
||||
show: true, |
||||
areaStyle: { |
||||
// 分隔区域的样式设置。 |
||||
color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 |
||||
}, |
||||
}, |
||||
axisLine: { |
||||
//指向外圈文本的分隔线样式 |
||||
lineStyle: { |
||||
color: "#2a5f61", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#2a5f61", // 分隔线颜色 |
||||
width: 1, // 分隔线线宽 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "radar", |
||||
symbolSize: 6, |
||||
symbol: "circle", |
||||
data: dataArr, |
||||
|
||||
}, |
||||
], |
||||
}; |
||||
myChart.setOption(option); |
||||
let resize = throttle(() => { |
||||
myChart.resize(); |
||||
}); |
||||
window.addEventListener("resize", resize); |
||||
}); |
||||
</script> |
||||
|
||||
<style lang='less' scoped> |
||||
#rander-chart{ |
||||
width: 100%; |
||||
height:450px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,104 @@ |
||||
<template> |
||||
<div class="chart-box"> |
||||
<div class="chart-title"><SvgIcon size="24" name="bili" style="margin-right: 20px;" />获奖人数报名占比</div> |
||||
<div id="ringChart"> </div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import echarts from '/@/utils/lib/echarts'; |
||||
import { SvgIcon } from '/@/components/Icon'; |
||||
|
||||
import { onMounted } from 'vue'; |
||||
const throttle = (fn: any) => { |
||||
let timer: any; |
||||
return function () { |
||||
if (timer) { |
||||
return; |
||||
} |
||||
timer = setTimeout(() => { |
||||
fn(); |
||||
clearTimeout(timer); |
||||
timer = null; |
||||
}, 1000); |
||||
}; |
||||
}; |
||||
onMounted(() => { |
||||
// @ts-ignore |
||||
const myChart = echarts.init(document.getElementById('ringChart')); |
||||
const option = { |
||||
title: { |
||||
subtext: '线上渠道占比', |
||||
text: '78%', |
||||
left: 'center', |
||||
top: '47%', |
||||
padding: [24, 0], |
||||
textStyle: { |
||||
color: '#000', |
||||
fontSize: 24, |
||||
align: 'center', |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
}, |
||||
legend: { |
||||
orient: 'horizontal', |
||||
bottom: '40px', |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: 'Access From', |
||||
type: 'pie', |
||||
center: ['50%', '55%'], |
||||
radius: ['30%', '45%'], |
||||
data: [ |
||||
{ value: 1048, name: '比赛一', itemStyle: { color: '#0052d9' } }, |
||||
{ value: 735, name: '比赛二', itemStyle: { color: '#699ef5' } }, |
||||
{ value: 580, name: '比赛三', itemStyle: { color: '#d9e1ff' } }, |
||||
// { value: 484, name: '比赛四' ,itemStyle: {color: '#0052d9'}}, |
||||
], |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
label: { |
||||
show: false, |
||||
}, |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 0, |
||||
shadowColor: 'rgba(0, 0, 0, 0.5)', |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
myChart.setOption(option); |
||||
let resize = throttle(() => { |
||||
myChart.resize(); |
||||
}); |
||||
window.addEventListener('resize', resize); |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.chart-box { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
.chart-title{ |
||||
position: absolute; |
||||
top: 30px; |
||||
left: 30px; |
||||
font-size: 18px; |
||||
font-weight: 600; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
#ringChart { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,186 @@ |
||||
<template> |
||||
<div class="container"> |
||||
<div class="title">河南机电学院比赛综合报告</div> |
||||
<p class="description" |
||||
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||
> |
||||
<div class="card-content"> |
||||
<div class="item" v-for="item in 4" :key="item"> |
||||
<div class="top-title">本年度已开展比赛数</div> |
||||
<div class="sum">88</div> |
||||
<div class="content"> |
||||
<div>国赛：12</div> |
||||
<div>国赛：12</div> |
||||
<div>国赛：12</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<cardTitle title="比赛学生综合能力评价分析" /> |
||||
<p class="description" |
||||
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||
> |
||||
<div class="year-content"> |
||||
<div class="left border-000"> |
||||
<div class="border-title">年度维度分析</div> |
||||
<randerChart /> |
||||
</div> |
||||
<div class="right border-000"> |
||||
<cardList /> |
||||
</div> |
||||
</div> |
||||
<cardTitle title="比赛学生参赛情况分析" /> |
||||
<p class="description" |
||||
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||
> |
||||
<div class="participation-status-content"> |
||||
<div class="right border-000"> |
||||
<cardList2 /> |
||||
</div> |
||||
<div class="left border-000"> |
||||
<!-- <div class="border-title">年度维度分析</div> --> |
||||
<cakeChart /> |
||||
</div> |
||||
</div> |
||||
<cardTitle title="比赛学生获奖情况分析" /> |
||||
<p class="description" |
||||
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||
> |
||||
<div class="participation-status-content"> |
||||
<div class="right border-000"> |
||||
<cardList3 /> |
||||
</div> |
||||
<div class="left border-000"> |
||||
<!-- <div class="border-title">年度维度分析</div> --> |
||||
<ringChart /> |
||||
</div> |
||||
</div> |
||||
<cardTitle title="部门参赛情况分析" /> |
||||
<p class="description" |
||||
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||
> |
||||
<div class="participation-status-content"> |
||||
<div class="right border-000"> |
||||
<cardList4 /> |
||||
</div> |
||||
<div class="left border-000" style="height: auto;;"> |
||||
<!-- <div class="border-title">年度维度分析</div> --> |
||||
<cardList5 /> |
||||
</div> |
||||
</div> |
||||
<div class="footer border-000"> |
||||
<cardList6 /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import cardTitle from './components/cardTitle.vue'; |
||||
import cardList from './components/cardList.vue'; |
||||
import cardList2 from './components/cardList2.vue'; |
||||
import cardList3 from './components/cardList3.vue'; |
||||
import cardList4 from './components/cardList4.vue'; |
||||
import cardList5 from './components/cardList5.vue'; |
||||
import cardList6 from './components/cardList6.vue'; |
||||
|
||||
import randerChart from './components/randerChart.vue'; |
||||
import cakeChart from './components/cakeChart.vue'; |
||||
import ringChart from './components/ringChart.vue'; |
||||
|
||||
// import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.container { |
||||
width: 1200px; |
||||
margin: 0 auto; |
||||
// height: 100vh; |
||||
padding-bottom: 30px; |
||||
.title { |
||||
width: 100%; |
||||
font-size: 36px; |
||||
text-align: center; |
||||
font-weight: 700; |
||||
} |
||||
.description { |
||||
text-indent: 2em; |
||||
margin: 30px 0; |
||||
} |
||||
.card-content { |
||||
display: flex; |
||||
.item { |
||||
width: 25%; |
||||
height: 150px; |
||||
border: 1px solid #000; |
||||
margin-right: 10px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
padding: 10px 15px; |
||||
.top-title { |
||||
font-size: 12px; |
||||
color: #aaa; |
||||
} |
||||
.sum { |
||||
font-size: 36px; |
||||
font-weight: 700; |
||||
} |
||||
.content { |
||||
display: flex; |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
font-size: 12px; |
||||
color: #999; |
||||
} |
||||
} |
||||
.item:nth-child(4) { |
||||
margin: 0; |
||||
} |
||||
} |
||||
.year-content { |
||||
width: 100%; |
||||
height: auto; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.left { |
||||
width: 500px; |
||||
height: 500px; |
||||
} |
||||
.right { |
||||
flex: 1; |
||||
height: auto; |
||||
margin-left: 50px; |
||||
} |
||||
} |
||||
.participation-status-content { |
||||
width: 100%; |
||||
height: auto; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.left { |
||||
width: 500px; |
||||
height: 500px; |
||||
margin-left: 50px; |
||||
} |
||||
.right { |
||||
flex: 1; |
||||
height: auto; |
||||
} |
||||
} |
||||
.footer{ |
||||
width: 100%; |
||||
margin: 30px 0; |
||||
} |
||||
} |
||||
.border-000 { |
||||
border: 1px solid #000; |
||||
} |
||||
.border-title { |
||||
width: 100%; |
||||
border-bottom: 1px solid #000; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
font-size: 14px; |
||||
padding: 0 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,14 @@ |
||||
<template> |
||||
<div> |
||||
部门 |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
|
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,9 @@ |
||||
<template> |
||||
<div> |
||||
<router-view></router-view> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup></script> |
||||
|
||||
<style lang="less" scoped></style> |
||||
@ -0,0 +1,14 @@ |
||||
<template> |
||||
<div> |
||||
个人 |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
|
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,14 @@ |
||||
<template> |
||||
<div> |
||||
组委会 |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
|
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue