forked from wangjiadong/comp
Merge branch 'main' of http://182.92.169.222:3000/zhc077/hnjd_comp
commit
eded1761a5
13 changed files with 398 additions and 29 deletions
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 191 KiB |
|
After Width: | Height: | Size: 234 KiB |
|
After Width: | Height: | Size: 56 KiB |
@ -0,0 +1,340 @@ |
|||||||
|
<template> |
||||||
|
<div class="department"> |
||||||
|
<div class="header"> |
||||||
|
<div class="card"> |
||||||
|
<div class="top"> |
||||||
|
<div class="text"> |
||||||
|
本年度已开展比赛数 |
||||||
|
</div> |
||||||
|
<Icon icon="mainHome-time|svg" :size="20" /> |
||||||
|
</div> |
||||||
|
<div class="center"> |
||||||
|
<div class="text"> |
||||||
|
67 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottom"> |
||||||
|
<div class="bot_card">国赛：12</div> |
||||||
|
<div class="bot_card">省赛：12</div> |
||||||
|
<div class="bot_card">校赛：24</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="card"> |
||||||
|
<div class="top"> |
||||||
|
<div class="text"> |
||||||
|
本年度参加比赛队伍数 |
||||||
|
</div> |
||||||
|
<Icon icon="mainHome-mp|svg" :size="20" /> |
||||||
|
</div> |
||||||
|
<div class="center"> |
||||||
|
<div class="text"> |
||||||
|
1262 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottom"> |
||||||
|
<div class="bot_card">国赛：120</div> |
||||||
|
<div class="bot_card">省赛：1230</div> |
||||||
|
<div class="bot_card">校赛：24</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="card"> |
||||||
|
<div class="top"> |
||||||
|
<div class="text"> |
||||||
|
正在进行的比赛数 |
||||||
|
</div> |
||||||
|
<Icon icon="mainHome-down|svg" :size="20" /> |
||||||
|
</div> |
||||||
|
<div class="center"> |
||||||
|
<div class="text" style="color: #74D472;"> |
||||||
|
45 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottom"> |
||||||
|
<div class="bot_card">国赛：9</div> |
||||||
|
<div class="bot_card">省赛：13</div> |
||||||
|
<div class="bot_card">校赛：26</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<div class="card2"> |
||||||
|
<div class="top"> |
||||||
|
<div class="text"> |
||||||
|
已经完成的比赛 |
||||||
|
</div> |
||||||
|
<Icon icon="mainHome-time|svg" :size="20" /> |
||||||
|
</div> |
||||||
|
<div class="center"> |
||||||
|
<div class="percent"> |
||||||
|
78% |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<a-progress stroke-linecap="square" :percent="78" :show-info="false" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottom"> |
||||||
|
<div class="text"> |
||||||
|
已完成的比赛11 |
||||||
|
</div> |
||||||
|
<div class="text"> |
||||||
|
未完成的比赛11 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="content"> |
||||||
|
<div class="con_left"> |
||||||
|
<div class="title-box"> |
||||||
|
<div class="title">部门比赛情况分布</div> |
||||||
|
</div> |
||||||
|
<div class="ec-box"> |
||||||
|
<div id="ec" ref="ec"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="con_right"> |
||||||
|
<div class="title-box"> |
||||||
|
<div class="tit">部门近两年维度积分</div> |
||||||
|
<div class="bas"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="footer"> |
||||||
|
<div class="foo_card"></div> |
||||||
|
<div class="foo_card"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup> |
||||||
|
import { Progress as AProgress } from 'ant-design-vue'; |
||||||
|
import { onMounted, ref } from 'vue'; |
||||||
|
import * as echarts from 'echarts'; |
||||||
|
import { optionRing } from './options' |
||||||
|
|
||||||
|
const ec = ref() |
||||||
|
onMounted(() => { |
||||||
|
const myChart = echarts.init(ec.value); |
||||||
|
myChart.setOption(optionRing); |
||||||
|
}) |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.department { |
||||||
|
padding: 16px 16px 0; |
||||||
|
|
||||||
|
&>* { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
.header { |
||||||
|
|
||||||
|
.card, |
||||||
|
.card2 { |
||||||
|
width: 405px; |
||||||
|
height: 182px; |
||||||
|
background: #FFFFFF; |
||||||
|
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03); |
||||||
|
border-radius: 4px 4px 4px 4px; |
||||||
|
padding: 20px 24px 0; |
||||||
|
|
||||||
|
.top { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.text { |
||||||
|
height: 22px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.45); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.card { |
||||||
|
.center { |
||||||
|
margin-top: 4px; |
||||||
|
width: 357px; |
||||||
|
height: 78px; |
||||||
|
border-radius: 0px 0px 0px 0px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.text { |
||||||
|
height: 38px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 48px; |
||||||
|
color: rgba(51, 51, 51, 0.88); |
||||||
|
line-height: 38px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bottom { |
||||||
|
margin-top: 18px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.bot_card { |
||||||
|
width: 91px; |
||||||
|
height: 22px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(51, 51, 51, 0.88); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.card2 { |
||||||
|
.center { |
||||||
|
height: 85px; |
||||||
|
border-bottom: 1px solid #E8E8E8; |
||||||
|
|
||||||
|
.percent { |
||||||
|
height: 38px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 30px; |
||||||
|
color: rgba(51, 51, 51, 0.88); |
||||||
|
line-height: 38px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bottom { |
||||||
|
height: 33px; |
||||||
|
padding-top: 10px; |
||||||
|
display: flex; |
||||||
|
column-gap: 27px; |
||||||
|
|
||||||
|
.text { |
||||||
|
height: 22px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(51, 51, 51, 0.88); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
margin-top: 16px; |
||||||
|
|
||||||
|
.con_left { |
||||||
|
width: 489px; |
||||||
|
height: 459px; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 2px 2px 2px 2px; |
||||||
|
border: 1px solid #F0F0F0; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.title-box { |
||||||
|
height: 58px; |
||||||
|
border-radius: 2px 2px 0px 0px; |
||||||
|
border-bottom: 1px solid #F0F0F0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.title { |
||||||
|
width: 439px; |
||||||
|
margin: auto; |
||||||
|
font-size: 16px; |
||||||
|
color: rgba(0, 0, 0, 0.85); |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.ec-box { |
||||||
|
flex-grow: 1; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
#ec { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
margin: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.con_right { |
||||||
|
width: 1160px; |
||||||
|
height: 458px; |
||||||
|
background: #FFFFFF; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 4px 4px 4px 4px; |
||||||
|
padding-left: 16px; |
||||||
|
|
||||||
|
.title-box { |
||||||
|
height: 57px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.tit { |
||||||
|
height: 26px; |
||||||
|
font-size: 16px; |
||||||
|
color: #1890FF; |
||||||
|
text-shadow: 0px 0px 0px #1890FF; |
||||||
|
} |
||||||
|
|
||||||
|
.bas { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 1px; |
||||||
|
border: 1px solid rgba(5, 5, 5, 0.06); |
||||||
|
|
||||||
|
&::before { |
||||||
|
content: ''; |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
width: 48px; |
||||||
|
height: 2px; |
||||||
|
background: #1890FF; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.footer { |
||||||
|
margin-top: 21px; |
||||||
|
|
||||||
|
.foo_card { |
||||||
|
width: 820px; |
||||||
|
height: 502px; |
||||||
|
background: #FFFFFF; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
// 部门比赛情况分布 圆环
|
||||||
|
export const optionRing = { |
||||||
|
color: [ |
||||||
|
'#0052D9', |
||||||
|
'#699EF5', |
||||||
|
'#B5C7FF', |
||||||
|
], |
||||||
|
legend: { |
||||||
|
x: 'center', |
||||||
|
orient: 'horizontal', |
||||||
|
bottom: '48px', |
||||||
|
data: ['已完成', '比赛中', '未开始'] |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: 'pie', |
||||||
|
center:['50%', '41%'], |
||||||
|
radius: ['35%', '45%'], |
||||||
|
avoidLabelOverlap: false, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
position: 'center' |
||||||
|
}, |
||||||
|
labelLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
emphasis: { |
||||||
|
label: { |
||||||
|
show: true, |
||||||
|
fontSize: '25', |
||||||
|
fontWeight: 'bold' |
||||||
|
} |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{ value: 335, name: '已完成' }, |
||||||
|
{ value: 50, name: '比赛中' }, |
||||||
|
{ value: 23, name: '未开始' }, |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
@ -0,0 +1 @@ |
|||||||
|
export {default as ChDepartment } from './chDepartment/index.vue' |
||||||
Loading…
Reference in new issue