Merge branch 'main' of http://182.92.169.222:3000/dlsx/ContestPortal
JayChou
8 months ago
commit
8d3d2252a1
13 changed files with 4067 additions and 3563 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,21 @@ |
||||
import request from '@/utils/requset' |
||||
|
||||
request.interceptors.response.use(response => { |
||||
// @ts-ignore
|
||||
if (response.code >= 200 && response.code < 300) return response; |
||||
else return Promise.reject(response); |
||||
}) |
||||
|
||||
enum api { |
||||
liststu = '/abilityEvaluation/personalAbilityEvaluationCollect/liststu', // 个人能力评价列表
|
||||
integral = '/annualScore/personalCompTotalScore/liststu', // 个人积分列表
|
||||
PAGE_XSFXBG = '/annualcompetitionprojectregistration/annualCompetitionProjectRegistration/xsfxbg', |
||||
} |
||||
export const getlEvaluateApi = (params: Record<'pageNo' | 'pageSize', number>) => request.get(api.liststu, { params }); |
||||
export const getlIntegralApi = (params: Record<'pageNo' | 'pageSize', number>) => request.get(api.integral, { params }); |
||||
|
||||
export const getXsfxbgApi = (params = {}) => { |
||||
const par = { recreateFlag: false, annualid: '' }; |
||||
Object.assign(par, params); |
||||
return request.get(api.PAGE_XSFXBG, { params: par }); |
||||
}; |
||||
|
After Width: | Height: | Size: 66 KiB |
@ -0,0 +1,51 @@ |
||||
import * as echarts from 'echarts/core'; |
||||
|
||||
import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart } from 'echarts/charts'; |
||||
|
||||
import { |
||||
TitleComponent, |
||||
TooltipComponent, |
||||
GridComponent, |
||||
PolarComponent, |
||||
AriaComponent, |
||||
ParallelComponent, |
||||
LegendComponent, |
||||
RadarComponent, |
||||
ToolboxComponent, |
||||
DataZoomComponent, |
||||
VisualMapComponent, |
||||
TimelineComponent, |
||||
CalendarComponent, |
||||
GraphicComponent, |
||||
} from 'echarts/components'; |
||||
|
||||
// TODO 如果想换成SVG渲染，就导出SVGRenderer，
|
||||
// 并且放到 echarts.use 里，注释掉 CanvasRenderer
|
||||
import { /*SVGRenderer*/ CanvasRenderer } from 'echarts/renderers'; |
||||
|
||||
echarts.use([ |
||||
LegendComponent, |
||||
TitleComponent, |
||||
TooltipComponent, |
||||
GridComponent, |
||||
PolarComponent, |
||||
AriaComponent, |
||||
ParallelComponent, |
||||
BarChart, |
||||
LineChart, |
||||
PieChart, |
||||
MapChart, |
||||
RadarChart, |
||||
// TODO 因为要兼容Online图表自适应打印，所以改成 CanvasRenderer，可能会模糊
|
||||
CanvasRenderer, |
||||
PictorialBarChart, |
||||
RadarComponent, |
||||
ToolboxComponent, |
||||
DataZoomComponent, |
||||
VisualMapComponent, |
||||
TimelineComponent, |
||||
CalendarComponent, |
||||
GraphicComponent, |
||||
]); |
||||
|
||||
export default echarts; |
||||
@ -1,37 +1,12 @@ |
||||
<template> |
||||
<div class="container"> |
||||
<el-card style="max-width: 70%;margin: auto"> |
||||
<template #header> |
||||
<div class="card-header"> |
||||
<span>新闻推荐</span> |
||||
</div> |
||||
</template> |
||||
<div class="content"> |
||||
<router-view></router-view> |
||||
</div> |
||||
</el-card> |
||||
<router-view/> |
||||
</div> |
||||
</template> |
||||
<script setup lang="ts"> |
||||
|
||||
</script> |
||||
<style scoped> |
||||
.container{ |
||||
margin-top:100px; |
||||
} |
||||
.card-header{ |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
margin-left: 100px; |
||||
} |
||||
.content { |
||||
height: 89vh; |
||||
overflow-y: scroll; |
||||
padding: 0; |
||||
margin: 0; |
||||
display: block; |
||||
} |
||||
.content::-webkit-scrollbar { |
||||
width: 0; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,188 @@ |
||||
<template> |
||||
<div class="fill"></div> |
||||
<div class="banner"> |
||||
<div class="box"> |
||||
<div class="title-box"> |
||||
<div class="title">报名信息确认</div> |
||||
<div class="text"> |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="img-box"> |
||||
<img src="../../assets/images/applyImg.png" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="personalAbilityEvaluationCollectList"> |
||||
<el-card body-class="table-list"> |
||||
<div class="table-box"> |
||||
<el-table v-loading="isLoading" ref="multipleTableRef" border :data="tableData" class="table" |
||||
:class="{ height: tableData.length > 8 }"> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column prop="depet_dictText" label="院系" /> |
||||
<el-table-column prop="name" label="姓名" /> |
||||
<el-table-column prop="workOn" label="学号" /> |
||||
<el-table-column prop="score" label="总积分" /> |
||||
<el-table-column label="操作" width="120"> |
||||
<template #default="scope"></template> |
||||
</el-table-column> |
||||
<template #empty> |
||||
<el-empty description="暂无数据" /> |
||||
</template> |
||||
</el-table> |
||||
<div class="pagin-box"> |
||||
<el-pagination class="pagination" style="width: 100%;" v-model:current-page="pagInfo.currentPage" |
||||
v-model:page-size="pagInfo.pageSize" :page-sizes="[10, 50, 80, 100]" |
||||
layout="slo, total,slot, sizes, prev, pager, next, jumper" :total="pagInfo.total" |
||||
@change="getTableList" /> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { reactive, ref } from 'vue'; |
||||
import { getlIntegralApi } from '@/api/person'; |
||||
import { ElMessage } from 'element-plus' |
||||
|
||||
// loading |
||||
const isLoading = ref(true) |
||||
|
||||
// 分页 |
||||
const pagInfo = reactive({ |
||||
currentPage: 1, |
||||
pageSize: 10, |
||||
total: 0 |
||||
}) |
||||
|
||||
// 获取表格信息 |
||||
const tableData = reactive<any[]>([]); |
||||
const setTableData = (arr: any[]) => { |
||||
tableData.length = 0; |
||||
tableData.push(...arr); |
||||
} |
||||
async function getTableList() { |
||||
try { |
||||
isLoading.value = true; |
||||
const res: any = await getlIntegralApi({ pageNo: pagInfo.currentPage, pageSize: pagInfo.pageSize }) |
||||
pagInfo.total = res.result.total; |
||||
setTableData(res.result.records); |
||||
} catch (error) { |
||||
ElMessage.error('请求失败'); |
||||
} finally { |
||||
isLoading.value = false; |
||||
} |
||||
} |
||||
|
||||
|
||||
getTableList(); |
||||
</script> |
||||
|
||||
|
||||
|
||||
<style lang="scss" scoped> |
||||
.fill { |
||||
padding-top: 80px; |
||||
} |
||||
|
||||
.banner { |
||||
width: 100%; |
||||
height: 289; |
||||
background: linear-gradient(90deg, #FFFFFF 0%, #F0F8FF 100%); |
||||
padding: 21px 0 37px 225px; |
||||
|
||||
.box { |
||||
width: 1515px; |
||||
height: 231px; |
||||
display: flex; |
||||
gap: 104px; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.title-box { |
||||
width: 1151px; |
||||
|
||||
.title { |
||||
height: 59px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: bold; |
||||
font-size: 42px; |
||||
color: #333333; |
||||
line-height: 59px; |
||||
} |
||||
|
||||
.text { |
||||
margin-top: 20px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
color: #666666; |
||||
line-height: 23px; |
||||
} |
||||
} |
||||
|
||||
.img-box { |
||||
img { |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
} |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
|
||||
.personalAbilityEvaluationCollectList { |
||||
|
||||
.table-list { |
||||
.table-box { |
||||
.table { |
||||
--el-table-header-bg-color: #fafafa; |
||||
width: 100%; |
||||
|
||||
&.height { |
||||
height: 375px; |
||||
} |
||||
} |
||||
|
||||
.pagin-box { |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.pagination { |
||||
padding: 0 24px; |
||||
|
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
|
||||
li.number.is-active { |
||||
background-color: #42D9AC; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
} |
||||
|
||||
span.el-pagination__jump { |
||||
background-color: #F3F3F3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,192 @@ |
||||
<template> |
||||
<div class="fill"></div> |
||||
<div class="banner"> |
||||
<div class="box"> |
||||
<div class="title-box"> |
||||
<div class="title">报名信息确认</div> |
||||
<div class="text"> |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="img-box"> |
||||
<img src="../../assets/images/applyImg.png" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="personalAbilityEvaluationCollectList"> |
||||
<el-card body-class="table-list"> |
||||
|
||||
<div class="table-box"> |
||||
<el-table v-loading="isLoading" ref="multipleTableRef" border :data="tableData" class="table" |
||||
:class="{ height: tableData.length > 8 }"> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column prop="depetId_dictText" label="所属部门" /> |
||||
<el-table-column prop="workOn" label="学号" /> |
||||
<el-table-column prop="name" label="姓名" /> |
||||
<el-table-column prop="capacityName" label="能力名称" /> |
||||
<el-table-column prop="value" label="能力值" /> |
||||
<el-table-column label="操作" width="120"> |
||||
<template #default="scope"></template> |
||||
</el-table-column> |
||||
<template #empty> |
||||
<el-empty description="暂无数据" /> |
||||
</template> |
||||
</el-table> |
||||
<div class="pagin-box"> |
||||
<el-pagination class="pagination" style="width: 100%;" v-model:current-page="pagInfo.currentPage" |
||||
v-model:page-size="pagInfo.pageSize" :page-sizes="[10, 50, 80, 100]" |
||||
layout="slo, total,slot, sizes, prev, pager, next, jumper" :total="pagInfo.total" |
||||
@change="getTableList" /> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { reactive, ref } from 'vue'; |
||||
import { getlEvaluateApi } from '@/api/person'; |
||||
import { ElMessage } from 'element-plus' |
||||
|
||||
// loading |
||||
const isLoading = ref(true) |
||||
|
||||
// 分页 |
||||
const pagInfo = reactive({ |
||||
currentPage: 1, |
||||
pageSize: 10, |
||||
total: 0 |
||||
}) |
||||
|
||||
|
||||
// 获取表格信息 |
||||
const tableData = reactive<any[]>([]); |
||||
const setTableData = (arr: any[]) => { |
||||
tableData.length = 0; |
||||
tableData.push(...arr); |
||||
} |
||||
async function getTableList() { |
||||
try { |
||||
isLoading.value = true; |
||||
const res: any = await getlEvaluateApi({ pageNo: pagInfo.currentPage, pageSize: pagInfo.pageSize }) |
||||
pagInfo.total = res.result.total; |
||||
setTableData(res.result.records); |
||||
} catch (error) { |
||||
ElMessage.error('请求失败'); |
||||
} finally { |
||||
isLoading.value = false; |
||||
} |
||||
} |
||||
|
||||
|
||||
getTableList(); |
||||
</script> |
||||
|
||||
|
||||
|
||||
<style lang="scss" scoped> |
||||
.fill { |
||||
padding-top: 80px; |
||||
} |
||||
|
||||
.banner { |
||||
width: 100%; |
||||
height: 289; |
||||
background: linear-gradient(90deg, #FFFFFF 0%, #F0F8FF 100%); |
||||
padding: 21px 0 37px 225px; |
||||
|
||||
.box { |
||||
width: 1515px; |
||||
height: 231px; |
||||
display: flex; |
||||
gap: 104px; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.title-box { |
||||
width: 1151px; |
||||
|
||||
.title { |
||||
height: 59px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: bold; |
||||
font-size: 42px; |
||||
color: #333333; |
||||
line-height: 59px; |
||||
} |
||||
|
||||
.text { |
||||
margin-top: 20px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
color: #666666; |
||||
line-height: 23px; |
||||
} |
||||
} |
||||
|
||||
.img-box { |
||||
img { |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
} |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
|
||||
.personalAbilityEvaluationCollectList { |
||||
|
||||
.table-list { |
||||
.table-box { |
||||
position: relative; |
||||
.table { |
||||
--el-table-header-bg-color: #fafafa; |
||||
width: 100%; |
||||
|
||||
&.height { |
||||
height: 375px; |
||||
} |
||||
} |
||||
|
||||
.pagin-box { |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.pagination { |
||||
padding: 0 24px; |
||||
|
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
|
||||
li.number.is-active { |
||||
background-color: #42D9AC; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
} |
||||
|
||||
span.el-pagination__jump { |
||||
background-color: #F3F3F3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,211 @@ |
||||
<template> |
||||
<div id="rander-chart"> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import echarts from '@/utils/echarts'; |
||||
|
||||
import { onMounted,nextTick } from 'vue' |
||||
const props = defineProps({ |
||||
data: { |
||||
type: Array, |
||||
default: [ |
||||
{ |
||||
text: '前言探索', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '奠定基础', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '知识分析', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '社会责任', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '独立思考', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '拓宽视野', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '激发兴趣', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '沟通协调', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '设计开发', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '研判分析', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '创新能力', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '团队协作', |
||||
value: 0, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
|
||||
const throttle = (fn: any) => { |
||||
let timer: any; |
||||
return function () { |
||||
if (timer) { |
||||
return; |
||||
} |
||||
timer = setTimeout(() => { |
||||
fn(); |
||||
clearTimeout(timer); |
||||
timer = null; |
||||
}, 1000); |
||||
}; |
||||
}; |
||||
let Data = props.data |
||||
console.log(Data, props.data); |
||||
|
||||
nextTick(() => { |
||||
// @ts-ignore |
||||
const myChart = echarts.init(document.getElementById("rander-chart")); |
||||
console.log(Data,1111); |
||||
|
||||
// var legendData = ['车辆数']; //图例 |
||||
var indicator =Data.map(item => { |
||||
return {name:item.capacityName,max:100} |
||||
}); |
||||
var dataArr = [ |
||||
{ |
||||
value:Data.map(item => item.value), |
||||
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); |
||||
}) |
||||
onMounted(() => { |
||||
|
||||
|
||||
}); |
||||
</script> |
||||
|
||||
<style lang='less' scoped> |
||||
#rander-chart{ |
||||
width: 100%; |
||||
height:450px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,382 @@ |
||||
<template> |
||||
<div class="fill"></div> |
||||
<div style="padding: 30px 18.6vw 0; width: 100%;margin: auto;"> |
||||
<!-- 年度：<j-dict-select-tag placeholder="请选择年度" v-model:value="annualid" dictCode="annual,annual_name,id" /> --> |
||||
</div> |
||||
<div class="personage"> |
||||
<h1 class="title">机电学院比赛个人报告</h1> |
||||
<div class="rebuild"> |
||||
<div @click="Rebuild">重新生成报告</div> |
||||
</div> |
||||
<p class="paragraph"> |
||||
我是比赛综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
<el-row class="card-box" :gutter="16" type="flex" justify="space-between"> |
||||
<el-col :span="12"> |
||||
<el-card class="card1"> |
||||
<div class="title"> |
||||
<div class="left">参加比赛项目数量</div> |
||||
<div class="right"> |
||||
<SvgIcon size="20" name="content" /> |
||||
</div> |
||||
</div> |
||||
<div class="name">{{ data.cjbsxmsl }}</div> |
||||
<div class="total" style="margin-top: 10px"> |
||||
<div class="two">国家级：{{ data.gjj }}</div> |
||||
<div class="three">省级：{{ data.shengj }}</div> |
||||
<div class="three">市级：{{ data.shij }}</div> |
||||
<div class="three">校级：{{ data.xj }}</div> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
|
||||
<el-col :span="12"> |
||||
<el-card class="card1"> |
||||
<div class="title"> |
||||
<div class="left">获奖数</div> |
||||
<div class="right"> |
||||
<SvgIcon size="20" name="content" /> |
||||
</div> |
||||
</div> |
||||
<div class="name">{{ data.hjNumber }}</div> |
||||
<div class="total" style="grid-template-columns: repeat(5, 1fr)"> |
||||
<div class="one">一等：{{ data.ydjNumber }}</div> |
||||
<div class="two">二等：{{ data.edjNumber }}</div> |
||||
<div class="three">三等：{{ data.sdjNumber }}</div> |
||||
<div class="two">四等：{{ data.sidjNumber }}</div> |
||||
<div class="three">五等：{{ data.wdjNumber }}</div> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
|
||||
</el-row> |
||||
<p class="paragraph"> |
||||
个人综合素质综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
<img src="../../assets/images/card.png" alt=""> |
||||
|
||||
<el-row class="card-box" :gutter="[50, 50]" type="flex"> |
||||
<el-col :xs="24" :xl="12"> |
||||
<p class="paragraph"> |
||||
个人综合素质综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
</el-col> |
||||
<el-col :xs="24" :xl="12"> |
||||
<div class="ec-box"> |
||||
<div class="title-box"> |
||||
<div class="tit">年度维度分析</div> |
||||
</div> |
||||
<randerChart></randerChart> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<img src="../../assets/images/card.png" alt=""> |
||||
<p class="paragraph"> |
||||
我是比赛参赛情况综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
<div class="table-box" style="min-height: 500px;"> |
||||
<h1 class="title-pons">个人比赛获奖情况</h1> |
||||
<el-table :data="data.allApList" class="table" :class="{ height: data.allApList.length > 8 }"> |
||||
<el-table-column prop="jxname" label="奖项名称" /> |
||||
<el-table-column prop="ndbs" label="年度比赛" /> |
||||
<el-table-column prop="ndbsxm" label="年度比赛项目" /> |
||||
<el-table-column prop="dwname" label="所在队伍名称" /> |
||||
<el-table-column prop="jf" label="积分" /> |
||||
<template #empty> |
||||
<el-empty description="暂无数据" /> |
||||
</template> |
||||
</el-table> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
// import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'; |
||||
import randerChart from './components/randerChart.vue'; |
||||
import { ElLoading } from 'element-plus' |
||||
import { getXsfxbgApi } from '@/api/person'; |
||||
import { ref, watch } from 'vue'; |
||||
|
||||
type allApList = { |
||||
jxname: string |
||||
ndbs: string |
||||
ndbsxm: string |
||||
dwname: string |
||||
jf: string |
||||
}[] | [] |
||||
|
||||
const data = ref<any>({ |
||||
cjbsxmsl: 0, |
||||
gjj: 0, |
||||
shengj: 0, |
||||
shij: 0, |
||||
xj: 0, |
||||
hjNumber: 0, |
||||
ydjNumber: 0, |
||||
edjNumber: 0, |
||||
sdjNumber: 0, |
||||
sidjNumber: 0, |
||||
wdjNumber: 0, |
||||
allApList: [] as allApList |
||||
}) |
||||
|
||||
let loading: any; |
||||
const setLoading = () => { |
||||
const col = ElLoading.service({ |
||||
lock: true, |
||||
text: 'Loading', |
||||
background: 'rgba(0, 0, 0, 0.7)', |
||||
}) |
||||
loading = col; |
||||
setTimeout(() => { col.close() }, 3000); // 最大终止时间3秒，若超过3秒还没有被终止，则终止 |
||||
} // 设置loading |
||||
const cloLoading = () => { if (loading) loading.close(); } //终止loading |
||||
getXsfxbgApi().then((res: any) => { |
||||
data.value = res.result |
||||
setLoading(); |
||||
}).finally(cloLoading); |
||||
const Rebuild = async () => { |
||||
setLoading(); |
||||
const res: any = await getXsfxbgApi({ recreateFlag: true, annualid: annualid.value }) |
||||
data.value = res.result |
||||
cloLoading(); |
||||
} |
||||
|
||||
const annualid = ref('') |
||||
watch(() => annualid.value, () => { |
||||
Rebuild() |
||||
}) |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); |
||||
|
||||
* { |
||||
font-family: "Roboto", sans-serif; |
||||
font-weight: 300; |
||||
font-style: normal; |
||||
line-height: 3; |
||||
} |
||||
|
||||
.title-pons { |
||||
font-size: 30px; |
||||
text-align: center; |
||||
padding-bottom: 30px; |
||||
line-height: initial; |
||||
} |
||||
|
||||
.table{ |
||||
font-size: 16px; |
||||
} |
||||
.fill { |
||||
padding-top: 80px; |
||||
} |
||||
|
||||
.loading { |
||||
width: 100%; |
||||
height: 100vh; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.rebuild { |
||||
display: flex; |
||||
justify-content: center; |
||||
|
||||
div { |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.personage { |
||||
padding: 0 18.6vw 60px; |
||||
width: 100%; |
||||
margin: auto; |
||||
|
||||
&>* { |
||||
margin: 50px 0; |
||||
} |
||||
|
||||
&>img { |
||||
margin: -50px 0; |
||||
} |
||||
|
||||
&>.title { |
||||
text-align: center; |
||||
font-size: 35px; |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
.paragraph { |
||||
font-size: 16px; |
||||
text-indent: 2em; |
||||
} |
||||
|
||||
.card { |
||||
width: 100%; |
||||
|
||||
.inner { |
||||
height: 0; |
||||
padding-top: 40%; |
||||
position: relative; |
||||
|
||||
.container { |
||||
position: absolute; |
||||
inset: 0; |
||||
border-radius: 5px; |
||||
border: 1px solid; |
||||
line-height: 1; |
||||
display: flex; |
||||
|
||||
.fl-box { |
||||
height: 80%; |
||||
margin: auto; |
||||
margin-left: 25px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
|
||||
.tit { |
||||
color: #a0a0a0; |
||||
} |
||||
|
||||
.center { |
||||
font-size: 30px; |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
.info { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.ec-box { |
||||
width: 100%; |
||||
border-radius: 2px 2px 2px 2px; |
||||
border: 1px solid #000; |
||||
|
||||
.title-box { |
||||
height: 58px; |
||||
border-radius: 2px 2px 0px 0px; |
||||
box-shadow: 0px 1px 2px 0px #707070; |
||||
display: flex; |
||||
|
||||
.tit { |
||||
margin-left: 4%; |
||||
height: 58px; |
||||
line-height: 58px; |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.table-box { |
||||
border: 1px solid; |
||||
padding: 40px 20px; |
||||
|
||||
table { |
||||
width: 100%; |
||||
|
||||
caption { |
||||
caption-side: top; |
||||
padding-bottom: 20px; |
||||
text-align: center; |
||||
color: #000; |
||||
font-size: 26px; |
||||
} |
||||
|
||||
thead { |
||||
text-align: left; |
||||
color: rgb(160 160 160); |
||||
} |
||||
|
||||
tr { |
||||
text-align: left; |
||||
border-bottom: 1px solid rgb(219, 216, 216); |
||||
|
||||
th, |
||||
td { |
||||
padding: 10px 0; |
||||
} |
||||
|
||||
th:first-child { |
||||
text-align: center; |
||||
} |
||||
|
||||
td:last-child { |
||||
color: rgb(64, 51, 253); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
/** */ |
||||
.card1 { |
||||
--el-card-padding: 0; |
||||
|
||||
&, |
||||
* { |
||||
line-height: initial; |
||||
} |
||||
|
||||
:deep() { |
||||
.el-card__body { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
} |
||||
} |
||||
|
||||
width: 100%; |
||||
height: 182px; |
||||
// background-color: #ffffff00; |
||||
border: 1px solid #ccc; |
||||
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: 10px 0; |
||||
} |
||||
|
||||
.total { |
||||
font-size: 16px; |
||||
color: #000; |
||||
// display: flex; |
||||
width: 100%; |
||||
display: grid; |
||||
grid-template-columns: repeat(4, 1fr); |
||||
/* 创建两列，每列宽度相等 */ |
||||
grid-template-rows: repeat(2, 10px); |
||||
/* 创建四行，每行高度固定为100px */ |
||||
gap: 10px; |
||||
|
||||
div { |
||||
// width: 25%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue