forked from wangjiadong/comp
JayChou
4 months ago
parent
8ae2a64447
commit
f9819f5b8a
7 changed files with 1000 additions and 39 deletions
@ -0,0 +1,150 @@ |
||||
<template> |
||||
<div class="foo_card7"> |
||||
<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="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="total">一路向北</div> |
||||
<div class="operate">121</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_card7') as Element; |
||||
falg = !falg; |
||||
if (falg) { |
||||
dom.style.height = 'auto'; |
||||
} else { |
||||
dom.style.height = '500px'; |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.foo_card7 { |
||||
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_card8"> |
||||
<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">2121</div> |
||||
<div class="operate">121</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_card8') as Element; |
||||
falg = !falg; |
||||
if (falg) { |
||||
dom.style.height = 'auto'; |
||||
} else { |
||||
dom.style.height = '500px'; |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.foo_card8 { |
||||
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,82 @@ |
||||
<template> |
||||
<div id="ec_bar" ref="ec_bar"></div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import echarts from '/@/utils/lib/echarts'; |
||||
|
||||
import { onMounted} from 'vue'; |
||||
onMounted(() => { |
||||
const myChart = echarts.init(document.getElementById('ec_bar')) |
||||
const option = { |
||||
tooltip: { |
||||
trigger: 'axis', // 触发类型为坐标轴触发 |
||||
axisPointer: { |
||||
type: 'line', |
||||
label: { |
||||
backgroundColor: '#6a7985' // 自定义交叉线标签的背景色 |
||||
} |
||||
}, |
||||
formatter: function (params) { |
||||
let result = '<div class="bar_card">'; |
||||
result += `<div class="title">维度名称</div>` |
||||
params.forEach(param => { |
||||
result += `<div class="item" style="color: ${param.color};"> |
||||
${param.seriesName}年 ${param.value} |
||||
</div>`; |
||||
}); |
||||
result += '</div>'; |
||||
return result; |
||||
} |
||||
}, |
||||
grid: { |
||||
left: '0%', |
||||
right: '0%', |
||||
top: '5%', |
||||
bottom: '50px', |
||||
// 如果需要，还可以设置containLabel来控制坐标轴标签是否完全包含在grid区域内 |
||||
containLabel: true |
||||
}, |
||||
legend: { |
||||
data: ['2023', '2024'], |
||||
bottom: '20px', |
||||
}, |
||||
xAxis: { |
||||
data: ['维度一', '维度一', '维度一', '维度一', '维度一', '维度一', '维度一'] |
||||
}, |
||||
yAxis: { |
||||
type: 'value', |
||||
min: 0, |
||||
max: 100, |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: '2023', |
||||
type: 'bar', |
||||
data: [33, 44, 58, 85, 47, 38, 45], |
||||
barWidth: '20px', |
||||
itemStyle: { |
||||
color: '#0052D9', |
||||
} |
||||
}, |
||||
{ |
||||
name: '2024', |
||||
type: 'bar', |
||||
data: [36, 34, 48, 62, 43, 30, 37], |
||||
barWidth: '20px', |
||||
itemStyle: { |
||||
color: '#699EF5', |
||||
} |
||||
}, |
||||
] |
||||
} |
||||
myChart.setOption(option) |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
#ec_bar{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
@ -1,14 +1,315 @@ |
||||
<template> |
||||
<div> |
||||
部门 |
||||
<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="year-content-top"> |
||||
<div class="left border-000"> |
||||
<div class="border-title">年度维度分析</div> |
||||
<randerChart /> |
||||
</div> |
||||
<div class="right border-000"> |
||||
<cardList /> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="zhuzhuangtu border-000"> |
||||
<a-tabs v-model:activeKey="activeKey"> |
||||
<a-tab-pane key="1" tab="全校近两年维度积分"> |
||||
<div class="zhuzhuangtu-box"> |
||||
<div class="left"> |
||||
<pillarChart /> |
||||
</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-tab-pane> |
||||
</a-tabs> |
||||
</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"> |
||||
<cardList7 /> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="footer border-000"> |
||||
<cardList6 /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
<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 cardList7 from './components/cardList8.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 pillarChart from './components/pillarChart.vue'; |
||||
import { ref } from 'vue'; |
||||
const activeKey = ref('1'); |
||||
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, |
||||
}, |
||||
]; |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
<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; |
||||
|
||||
.year-content-top { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.left { |
||||
width: 500px; |
||||
height: 500px; |
||||
} |
||||
.right { |
||||
flex: 1; |
||||
height: auto; |
||||
margin-left: 50px; |
||||
} |
||||
} |
||||
} |
||||
.zhuzhuangtu { |
||||
.zhuzhuangtu-box { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
width: 100%; |
||||
margin: 30px 0; |
||||
min-height: 400px; |
||||
padding: 0 20px; |
||||
|
||||
.left { |
||||
width: 70%; |
||||
height: 400px; |
||||
} |
||||
.right { |
||||
width: 30%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
.content-left, |
||||
.content-right { |
||||
padding-left: 40px; |
||||
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; |
||||
} |
||||
} |
||||
.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> |
||||
|
||||
@ -1,14 +1,159 @@ |
||||
<template> |
||||
<div> |
||||
组委会 |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
|
||||
</script> |
||||
<div class="container"> |
||||
<div class="title">河南机电学院比赛综组委会报告</div> |
||||
<p class="description" |
||||
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||
> |
||||
<div class="card-content"> |
||||
<div class="item" v-for="(item,index) in 4" :key="item"> |
||||
<div class="top-title">{{ formatTitle(index) }}</div> |
||||
<div class="sum">{{ index === 0 ? '第八届': '88' }}</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"> |
||||
<cardList7 /> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
</div> |
||||
|
||||
</div> |
||||
<cardTitle title="部门参赛情况分析" /> |
||||
<p class="description" |
||||
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||
> |
||||
<div class="participation-status-content"> |
||||
<div class="right border-000"> |
||||
<cardList8 /> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import cardTitle from './components/cardTitle.vue'; |
||||
import cardList from './components/cardList.vue'; |
||||
import cardList7 from './components/cardList7.vue'; |
||||
import cardList8 from './components/cardList8.vue'; |
||||
import randerChart from './components/randerChart.vue'; |
||||
|
||||
// import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
const formatTitle = (index:number) => { |
||||
const arr:any = ['当前届数','参赛人数','参赛队伍数','比赛项目数'] |
||||
return arr[index] |
||||
} |
||||
</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: 100px; |
||||
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> |
||||
|
||||
Loading…
Reference in new issue