forked from wangjiadong/comp
significative
5 months ago
parent
b91cded52d
commit
737418f49e
11 changed files with 1749 additions and 3 deletions
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
@ -0,0 +1,164 @@ |
|||||||
|
<template> |
||||||
|
<div class="foo_card"> |
||||||
|
<!-- <div class="title"> 部门学生积分排名 </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 props.data" :key="i"> |
||||||
|
<div class="ranking"> |
||||||
|
<div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div> |
||||||
|
</div> |
||||||
|
<div class="name">{{ i.name }}</div> |
||||||
|
<div class="total">{{ i.sum }}</div> |
||||||
|
<div class="operate">详情</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
const props = defineProps({ |
||||||
|
data: { |
||||||
|
type: Array, |
||||||
|
default: [ |
||||||
|
{ |
||||||
|
name: '机电学院', |
||||||
|
sum: 100, |
||||||
|
id:1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '机电学院', |
||||||
|
sum: 100, |
||||||
|
id:2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '机电学院', |
||||||
|
sum: 100, |
||||||
|
id:3, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '机电学院', |
||||||
|
sum: 100, |
||||||
|
id:1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '机电学院', |
||||||
|
sum: 100, |
||||||
|
id:2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '机电学院', |
||||||
|
sum: 100, |
||||||
|
id:3, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.foo_card { |
||||||
|
width: 100%; |
||||||
|
height: calc(502px - 58px); |
||||||
|
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%; |
||||||
|
padding-left: 23px; |
||||||
|
height: 57px; |
||||||
|
line-height: 57px; |
||||||
|
font-size: 16px; |
||||||
|
color: rgba(0, 0, 0, 0.85); |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&::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,165 @@ |
|||||||
|
<template> |
||||||
|
<div class="foo_card"> |
||||||
|
<!-- <div class="title"> 部门学生积分排名 </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 props.data" :key="i"> |
||||||
|
<!-- <div class="ranking"> |
||||||
|
<div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div> |
||||||
|
</div> --> |
||||||
|
<div class="name">{{ i.name }}</div> |
||||||
|
<div class="total">{{ i.sum }}</div> |
||||||
|
<div class="operate">{{ i.id }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
const props = defineProps({ |
||||||
|
data: { |
||||||
|
type: Array, |
||||||
|
default: [ |
||||||
|
{ |
||||||
|
name: '一等奖', |
||||||
|
sum: '全国计算机高级大赛', |
||||||
|
id:1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '一等奖', |
||||||
|
sum: '全国计算机高级大赛', |
||||||
|
id:2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '一等奖', |
||||||
|
sum: '全国计算机高级大赛', |
||||||
|
id:3, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '一等奖', |
||||||
|
sum: '全国计算机高级大赛', |
||||||
|
id:4, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '一等奖', |
||||||
|
sum: '全国计算机高级大赛', |
||||||
|
id:5, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '一等奖', |
||||||
|
sum: '全国计算机高级大赛', |
||||||
|
id:6, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.foo_card { |
||||||
|
width: 100%; |
||||||
|
height: calc(502px - 58px); |
||||||
|
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%; |
||||||
|
padding-left: 23px; |
||||||
|
height: 57px; |
||||||
|
line-height: 57px; |
||||||
|
font-size: 16px; |
||||||
|
color: rgba(0, 0, 0, 0.85); |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&::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,165 @@ |
|||||||
|
<template> |
||||||
|
<div class="foo_card"> |
||||||
|
<!-- <div class="title"> 部门学生积分排名 </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 props.data" :key="i"> |
||||||
|
<!-- <div class="ranking"> |
||||||
|
<div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div> |
||||||
|
</div> --> |
||||||
|
<div class="name">{{ i.name }}</div> |
||||||
|
<div class="total">{{ i.sum }}</div> |
||||||
|
<div class="operate">详情</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
const props = defineProps({ |
||||||
|
data: { |
||||||
|
type: Array, |
||||||
|
default: [ |
||||||
|
{ |
||||||
|
name: '全国计算机高级大赛', |
||||||
|
sum: '比赛中', |
||||||
|
id:1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '全国计算机高级大赛', |
||||||
|
sum: '比赛中', |
||||||
|
id:2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '全国计算机高级大赛', |
||||||
|
sum: '比赛中', |
||||||
|
id:3, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '全国计算机高级大赛', |
||||||
|
sum: '比赛中', |
||||||
|
id:4, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '全国计算机高级大赛', |
||||||
|
sum: '比赛中', |
||||||
|
id:5, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '全国计算机高级大赛', |
||||||
|
sum: '比赛中', |
||||||
|
id:6, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.foo_card { |
||||||
|
width: 100%; |
||||||
|
height: calc(502px - 58px); |
||||||
|
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%; |
||||||
|
padding-left: 23px; |
||||||
|
height: 57px; |
||||||
|
line-height: 57px; |
||||||
|
font-size: 16px; |
||||||
|
color: rgba(0, 0, 0, 0.85); |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&::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,166 @@ |
|||||||
|
<template> |
||||||
|
<div class="foo_card"> |
||||||
|
<!-- <div class="title"> 部门学生积分排名 </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="operate">所在院系</div> |
||||||
|
</div> |
||||||
|
<div class="t_item t_con" v-for="(i,index) in props.data" :key="i"> |
||||||
|
<!-- <div class="ranking"> |
||||||
|
<div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div> |
||||||
|
</div> --> |
||||||
|
<div class="name">{{ i.name }}</div> |
||||||
|
<div class="total">{{ i.sum }}</div> |
||||||
|
<div class="total">{{ i.sum }}</div> |
||||||
|
<div class="operate">胡辣汤学院</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
const props = defineProps({ |
||||||
|
data: { |
||||||
|
type: Array, |
||||||
|
default: [ |
||||||
|
{ |
||||||
|
name: '项目名称', |
||||||
|
sum: 100, |
||||||
|
id:1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '项目名称', |
||||||
|
sum: 100, |
||||||
|
id:2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '项目名称', |
||||||
|
sum: 100, |
||||||
|
id:3, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '项目名称', |
||||||
|
sum: 100, |
||||||
|
id:4, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '项目名称', |
||||||
|
sum: 100, |
||||||
|
id:5, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '项目名称', |
||||||
|
sum: 100, |
||||||
|
id:6, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.foo_card { |
||||||
|
width: 100%; |
||||||
|
height: calc(432px - 58px); |
||||||
|
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%; |
||||||
|
padding-left: 23px; |
||||||
|
height: 57px; |
||||||
|
line-height: 57px; |
||||||
|
font-size: 16px; |
||||||
|
color: rgba(0, 0, 0, 0.85); |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&::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,164 @@ |
|||||||
|
<template> |
||||||
|
<div class="foo_card"> |
||||||
|
<!-- <div class="title"> 部门学生积分排名 </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 props.data" :key="i"> |
||||||
|
<!-- <div class="ranking"> |
||||||
|
<div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div> |
||||||
|
</div> --> |
||||||
|
<div class="name">{{ i.name }}</div> |
||||||
|
<div class="total">{{ i.sum }}</div> |
||||||
|
<div class="operate">胡辣汤学院</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
const props = defineProps({ |
||||||
|
data: { |
||||||
|
type: Array, |
||||||
|
default: [ |
||||||
|
{ |
||||||
|
name: '无糖', |
||||||
|
sum: 100, |
||||||
|
id:1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '无糖', |
||||||
|
sum: 100, |
||||||
|
id:2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '无糖', |
||||||
|
sum: 100, |
||||||
|
id:3, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '无糖', |
||||||
|
sum: 100, |
||||||
|
id:4, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '无糖', |
||||||
|
sum: 100, |
||||||
|
id:5, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '无糖', |
||||||
|
sum: 100, |
||||||
|
id:6, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.foo_card { |
||||||
|
width: 100%; |
||||||
|
height: calc(502px - 58px); |
||||||
|
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%; |
||||||
|
padding-left: 23px; |
||||||
|
height: 57px; |
||||||
|
line-height: 57px; |
||||||
|
font-size: 16px; |
||||||
|
color: rgba(0, 0, 0, 0.85); |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&::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> |
||||||
@ -1,3 +1,5 @@ |
|||||||
export {default as ChDepartment } from './chDepartment/index.vue' |
export {default as ChDepartment } from './chDepartment/index.vue' |
||||||
export {default as ChExpert } from './chExpert/index.vue' |
export {default as ChExpert } from './chExpert/index.vue' |
||||||
export {default as ChSchool } from './chSchool/index.vue' |
export {default as ChSchool } from './chSchool/index.vue' |
||||||
|
export {default as OrganizingCommittee } from './organizingCommittee/organizingCommittee.vue' |
||||||
|
export {default as Student } from './student/student.vue' |
||||||
@ -0,0 +1,488 @@ |
|||||||
|
<template> |
||||||
|
<a-row :gutter="[24, 32]"> |
||||||
|
<a-col :lg="12" :xxl="6"> |
||||||
|
<div class="item"> |
||||||
|
<div class="card1"> |
||||||
|
<div class="title"> |
||||||
|
<div class="left">比赛届数</div> |
||||||
|
<div class="right"><SvgIcon size="20" name="shizhong" /></div> |
||||||
|
</div> |
||||||
|
<div class="name">第三十届电子科技大赛</div> |
||||||
|
<div class="total">共12届，当前第12届</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="12" :xxl="6" |
||||||
|
><div class="item"> |
||||||
|
<div class="card2"> |
||||||
|
<div class="title"> |
||||||
|
<div class="left">参加比赛队伍数</div> |
||||||
|
<div class="right"><SvgIcon size="20" name="content" /></div> |
||||||
|
</div> |
||||||
|
<div id="chart-content"></div> |
||||||
|
<div class="total">本月比赛：0</div> |
||||||
|
</div> </div |
||||||
|
></a-col> |
||||||
|
<a-col :lg="12" :xxl="6"><div class="item"> |
||||||
|
<div class="card3"> |
||||||
|
<div class="title"> |
||||||
|
<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> |
||||||
|
</div> |
||||||
|
</div></a-col> |
||||||
|
<a-col :lg="12" :xxl="6"><div class="item"> |
||||||
|
<div class="card4"> |
||||||
|
<div class="title"> |
||||||
|
<div class="left">比赛项目数</div> |
||||||
|
<div class="right"><SvgIcon size="20" name="content" /></div> |
||||||
|
</div> |
||||||
|
<div class="name">12</div> |
||||||
|
<div class="total">报名最多的项目是：项目三 地三十届电子科技大赛</div> |
||||||
|
</div> |
||||||
|
</div></a-col> |
||||||
|
</a-row> |
||||||
|
|
||||||
|
<a-row :gutter="[24, 32]"> |
||||||
|
<a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24" |
||||||
|
><div class="Participation"> |
||||||
|
<a-card title="参赛院系人数排名" style="width: 100%; height: 100%"> |
||||||
|
<cardList /> |
||||||
|
</a-card> </div |
||||||
|
></a-col> |
||||||
|
<a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24" |
||||||
|
><div class="Participation"> |
||||||
|
<a-card title="报名学生列表" style="width: 100%; height: 100%"> |
||||||
|
<cardListTow /> |
||||||
|
</a-card> </div |
||||||
|
></a-col> |
||||||
|
</a-row> |
||||||
|
<a-row :gutter="[24, 32]"> |
||||||
|
<a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24" |
||||||
|
><div class="content-card"> |
||||||
|
<a-card title="各项积分情况" style="width: 100%; height: 100%"> |
||||||
|
<div class="content-chart"> |
||||||
|
<div id="chart"></div> |
||||||
|
<div class="content-list"> |
||||||
|
<div class="item" v-for="(item, index) in 6" :key="index"> |
||||||
|
<div class="sort" :class="index < 3 ? 'bgc' : ''">{{ index + 1 }}</div> |
||||||
|
<div class="name">项目名{{ item }}</div> |
||||||
|
<div class="code">1234分</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a-card> |
||||||
|
</div></a-col |
||||||
|
> |
||||||
|
<a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24" |
||||||
|
><div class="content-card"> |
||||||
|
<a-card title="各项详细数据" style="width: 100%; height: 100%"> |
||||||
|
<cardListThree /> |
||||||
|
</a-card> </div |
||||||
|
></a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { SvgIcon } from '/@/components/Icon'; |
||||||
|
import { onMounted } from 'vue'; |
||||||
|
import cardList from '../components/cardList.vue'; |
||||||
|
import cardListTow from '../components/cardListtow.vue'; |
||||||
|
import cardListThree from '../components/cardListThree.vue'; |
||||||
|
import echarts from '/@/utils/lib/echarts'; |
||||||
|
const throttle = (fn: any) => { |
||||||
|
let timer: any; |
||||||
|
return function () { |
||||||
|
if (timer) { |
||||||
|
return; |
||||||
|
} |
||||||
|
timer = setTimeout(() => { |
||||||
|
fn(); |
||||||
|
clearTimeout(timer); |
||||||
|
timer = null; |
||||||
|
}, 1000); |
||||||
|
}; |
||||||
|
}; |
||||||
|
const initContent = () => { |
||||||
|
const myChart = echarts.init(document.getElementById('chart-content')); |
||||||
|
const option = { |
||||||
|
backgroundColor: 'transparent', |
||||||
|
title: [ |
||||||
|
{ |
||||||
|
text: '111', |
||||||
|
}, |
||||||
|
], |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', |
||||||
|
axisPointer: { |
||||||
|
lineStyle: { |
||||||
|
color: '#57617B', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: '20px', |
||||||
|
right: '0', |
||||||
|
bottom: '0', |
||||||
|
top: '20px', |
||||||
|
containLabel: false, |
||||||
|
}, |
||||||
|
xAxis: [ |
||||||
|
{ |
||||||
|
type: 'category', |
||||||
|
show: false, |
||||||
|
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', |
||||||
|
// 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% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
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: { |
||||||
|
// color: '#3A5493', |
||||||
|
// borderColor: '', |
||||||
|
// borderWidth: 12, |
||||||
|
// }, |
||||||
|
// }, |
||||||
|
data: [23,12,45,9,30], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
myChart.setOption(option); |
||||||
|
let resize = throttle(() => { |
||||||
|
myChart.resize(); |
||||||
|
}); |
||||||
|
window.addEventListener('resize', resize); |
||||||
|
}; |
||||||
|
onMounted(() => { |
||||||
|
initContent(); |
||||||
|
const myChart = echarts.init(document.getElementById('chart')); |
||||||
|
const option = { |
||||||
|
tooltip: {}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六'], |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
data: [120, 200, 150, 80, 70, 110], |
||||||
|
type: 'bar', |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
myChart.setOption(option); |
||||||
|
let resize = throttle(() => { |
||||||
|
myChart.resize(); |
||||||
|
}); |
||||||
|
window.addEventListener('resize', resize); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
:deep .ant-row { |
||||||
|
background-color: pink; |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
.item { |
||||||
|
width: 100%; |
||||||
|
height: 182px; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 15px; |
||||||
|
overflow: hidden; |
||||||
|
.card1 { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: #018ffb; |
||||||
|
padding: 20px; |
||||||
|
.title { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
justify-content: space-between; |
||||||
|
.left { |
||||||
|
font-size: 14px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
.name { |
||||||
|
font-size: 32px; |
||||||
|
color: #fff; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.total { |
||||||
|
font-size: 12px; |
||||||
|
color: #fff; |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
#chart { |
||||||
|
width: 100%; |
||||||
|
height: 80px; |
||||||
|
} |
||||||
|
} |
||||||
|
.card2 { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: #fff; |
||||||
|
padding: 20px; |
||||||
|
.title { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
justify-content: space-between; |
||||||
|
.left { |
||||||
|
font-size: 14px; |
||||||
|
color: #fff; |
||||||
|
color: rgba(0, 0, 0, 0.45); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
#chart-content { |
||||||
|
width: 100%; |
||||||
|
height: 80px; |
||||||
|
} |
||||||
|
.total{ |
||||||
|
margin-top: 10px; |
||||||
|
font-size: 12px; |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
} |
||||||
|
.card3 { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: #fff; |
||||||
|
padding: 20px; |
||||||
|
.title { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
justify-content: space-between; |
||||||
|
.left { |
||||||
|
font-size: 14px; |
||||||
|
color: #fff; |
||||||
|
color: rgba(0, 0, 0, 0.45); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.name { |
||||||
|
font-size: 42px; |
||||||
|
font-weight: 500; |
||||||
|
color: #000; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.total{ |
||||||
|
margin-top: 20px; |
||||||
|
font-size: 12px; |
||||||
|
color: #000; |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
} |
||||||
|
.card4 { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: #fff; |
||||||
|
padding: 20px; |
||||||
|
.title { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
justify-content: space-between; |
||||||
|
.left { |
||||||
|
font-size: 14px; |
||||||
|
color: #fff; |
||||||
|
color: rgba(0, 0, 0, 0.45); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.name { |
||||||
|
font-size: 42px; |
||||||
|
font-weight: 500; |
||||||
|
color: #000; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.total{ |
||||||
|
margin-top: 20px; |
||||||
|
font-size: 12px; |
||||||
|
color: #000; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.Participation { |
||||||
|
width: 100%; |
||||||
|
height: 502px; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
.content-card { |
||||||
|
width: 100%; |
||||||
|
height: 432px; |
||||||
|
background-color: #fff; |
||||||
|
.content-chart { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
#chart { |
||||||
|
flex: 1; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.content-list { |
||||||
|
width: 230px; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
padding: 0 20px; |
||||||
|
.item { |
||||||
|
height: 45px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
.sort { |
||||||
|
width: 30px; |
||||||
|
height: 30px; |
||||||
|
background-color: #f5f5f5; |
||||||
|
border-radius: 50%; |
||||||
|
text-align: center; |
||||||
|
line-height: 30px; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
.bgc { |
||||||
|
background-color: #314659; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
:deep .ant-card-body { |
||||||
|
padding: 0; |
||||||
|
width: 100%; |
||||||
|
height: calc(100% - 58px); |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,430 @@ |
|||||||
|
<template> |
||||||
|
<div class="container-box"> |
||||||
|
<a-row :gutter="[24, 24]"> |
||||||
|
<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="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> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
<a-col :span="12"> |
||||||
|
<div class="card1"> |
||||||
|
<div class="title"> |
||||||
|
<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> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row :gutter="[0, 0]" style="margin-top: 24px"> |
||||||
|
<a-col :span="24"> |
||||||
|
<div class="render"> |
||||||
|
<a-card title="各维度积分" style="width: 100%; height: 100%"> |
||||||
|
<div class="render-box"> |
||||||
|
<div class="left"> |
||||||
|
<div id="render-chart"></div> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<div class="content-left"> |
||||||
|
<div class="item" v-for="(item, index) in indicator.slice(0, 6)" :key="index"> |
||||||
|
<div class="sort" :class="index < 3 ? 'active' : ''">{{ index + 1 }}</div> |
||||||
|
<div class="text">{{ item.text }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content-right"> |
||||||
|
<div class="item" v-for="(item, index) in indicator.slice(-6)" :key="index"> |
||||||
|
<div class="sort">{{ index + 1 }}</div> |
||||||
|
<div class="text">{{ item.text }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a-card> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-col> |
||||||
|
<a-col :xxl="12" :xl="12" :lg="24"> |
||||||
|
<div class="right-list"> |
||||||
|
<a-card title="报名比赛" style="width: 100%; height: 100%"> |
||||||
|
<cardListFour /> |
||||||
|
</a-card> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row :gutter="[24, 24]"> |
||||||
|
<a-col :xxl="12" :xl="12" :lg="24" |
||||||
|
><div class="huojiangqingkuang"> |
||||||
|
<a-card title="获奖情况" style="width: 100%; height: 100%"> |
||||||
|
<div id="chart-huojiang"></div> |
||||||
|
</a-card> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
<a-col :xxl="12" :xl="12" :lg="24"> |
||||||
|
<div class="all-jiangxiang"> |
||||||
|
<a-card title="所有奖项" style="width: 100%"> |
||||||
|
<cardListFive /> |
||||||
|
</a-card> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { SvgIcon } from '/@/components/Icon'; |
||||||
|
import cardListFour from '../components/cardListFour.vue'; |
||||||
|
import cardListFive from '../components/cardListFive.vue'; |
||||||
|
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); |
||||||
|
}; |
||||||
|
} |
||||||
|
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, |
||||||
|
}, |
||||||
|
]; |
||||||
|
const initChart = () => { |
||||||
|
const myChart = echarts.init(document.getElementById('render-chart')); |
||||||
|
|
||||||
|
var dataArr = [ |
||||||
|
{ |
||||||
|
value: [4000, 700, 3600, 3900, 1800, 4200, 700, 3600, 4200, 700, 3600, 4200, 700, 3600], |
||||||
|
name: '1', |
||||||
|
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: '#f0a223', |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: '#093138', |
||||||
|
}, |
||||||
|
], |
||||||
|
globalCoord: false, |
||||||
|
}, |
||||||
|
opacity: 1, // 区域透明度 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
]; |
||||||
|
var colorArr = ['#fff', '#fff']; //颜色 |
||||||
|
const option = { |
||||||
|
backgroundColor: 'transparent', |
||||||
|
color: colorArr, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
}, |
||||||
|
radar: { |
||||||
|
// 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); |
||||||
|
}; |
||||||
|
const initHuojiangChart = () => { |
||||||
|
const myChart = echarts.init(document.getElementById('chart-huojiang')); |
||||||
|
const option = { |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
}, |
||||||
|
// grid: { |
||||||
|
// left: '20px', |
||||||
|
// containLabel: false, |
||||||
|
// }, |
||||||
|
legend: { |
||||||
|
type:"scroll", |
||||||
|
orient: 'vertical', |
||||||
|
left:'70%', |
||||||
|
align:'left', |
||||||
|
top:'middle', |
||||||
|
textStyle: { |
||||||
|
color:'#8C8C8C' |
||||||
|
}, |
||||||
|
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 |
||||||
|
|
||||||
|
}, |
||||||
|
data: [{ value: 1048, name: '一等奖' }, { value: 735, name: '二等奖' }, { value: 580, name: '三等奖' }], |
||||||
|
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); |
||||||
|
}; |
||||||
|
onMounted(() => { |
||||||
|
initChart(); |
||||||
|
initHuojiangChart(); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.container-box { |
||||||
|
// padding: 20px; |
||||||
|
.card1 { |
||||||
|
width: 100%; |
||||||
|
height: 182px; |
||||||
|
background-color: #fff; |
||||||
|
padding: 20px; |
||||||
|
.title { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
justify-content: space-between; |
||||||
|
.left { |
||||||
|
font-size: 14px; |
||||||
|
color: #fff; |
||||||
|
color: rgba(0, 0, 0, 0.45); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.name { |
||||||
|
font-size: 42px; |
||||||
|
font-weight: 500; |
||||||
|
color: #000; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.total { |
||||||
|
margin-top: 20px; |
||||||
|
font-size: 12px; |
||||||
|
color: #000; |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
} |
||||||
|
.render { |
||||||
|
width: 100%; |
||||||
|
height: 451px; |
||||||
|
background-color: #fff; |
||||||
|
.render-box { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.left { |
||||||
|
flex: 1; |
||||||
|
#render-chart { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.right { |
||||||
|
width: 300px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
.content-left, |
||||||
|
.content-right { |
||||||
|
width: 100%; |
||||||
|
.item { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
height: 30px; |
||||||
|
margin: 10px 0; |
||||||
|
.sort { |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: #f6f6f6; |
||||||
|
text-align: center; |
||||||
|
line-height: 20px; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.active { |
||||||
|
color: #fff; |
||||||
|
background-color: #32485a; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.right > div { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.right-list { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
.huojiangqingkuang { |
||||||
|
width: 100%; |
||||||
|
height: 500px; |
||||||
|
background-color: #fff; |
||||||
|
#chart-huojiang { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.all-jiangxiang { |
||||||
|
width: 100%; |
||||||
|
height: 500px; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
:deep .ant-col { |
||||||
|
// background-color: pink; |
||||||
|
// margin-top: 30px; |
||||||
|
} |
||||||
|
:deep .ant-card-body { |
||||||
|
padding: 0; |
||||||
|
width: 100%; |
||||||
|
height: calc(100% - 58px); |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue