parent
374b6369cd
commit
d856f5ab46
1 changed files with 501 additions and 0 deletions
@ -0,0 +1,501 @@ |
|||||||
|
<template> |
||||||
|
<div style="padding: 12px" class="index-container-ty"> |
||||||
|
<a-spin :spinning="loading"> |
||||||
|
<a-row :gutter="[32,16]" type="flex" justify="space-between" class="firstDiv"> |
||||||
|
<a-col :xs="12" :xl="4"> |
||||||
|
<div class="commonDiv"> |
||||||
|
<p class="title">本年度已展开比赛数</p> |
||||||
|
<p class="subtitle">annual competitions</p> |
||||||
|
<p class="num"> |
||||||
|
<span>{{num01}}</span> |
||||||
|
<span class="iconDiv"> |
||||||
|
<img src="./images/icon1.png"/> |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
<a-col :xs="12" :xl="4"> |
||||||
|
<div class="commonDiv"> |
||||||
|
<p class="title">本年度参加比赛学校数</p> |
||||||
|
<p class="subtitle">Participating schools</p> |
||||||
|
<p class="num"> |
||||||
|
<span>{{num02}}</span> |
||||||
|
<span class="iconDiv"> |
||||||
|
<img src="./images/icon2.png"/> |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
<a-col :xs="12" :xl="4"> |
||||||
|
<div class="commonDiv"> |
||||||
|
<p class="title">管理比赛数</p> |
||||||
|
<p class="subtitle">Competition management</p> |
||||||
|
<p class="num"> |
||||||
|
<span>{{num03}}</span> |
||||||
|
<span class="iconDiv"> |
||||||
|
<img src="./images/icon3.png"/> |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
<a-col :xs="12" :xl="4"> |
||||||
|
<div class="commonDiv"> |
||||||
|
<p class="title">管理学校数</p> |
||||||
|
<p class="subtitle">School management</p> |
||||||
|
<p class="num"> |
||||||
|
<span>{{num04}}</span> |
||||||
|
<span class="iconDiv"> |
||||||
|
<img src="./images/icon4.png"/> |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
<a-col :xs="12" :xl="4"> |
||||||
|
<div class="commonDiv"> |
||||||
|
<p class="title">正在进行数</p> |
||||||
|
<p class="subtitle">Ongoing competition</p> |
||||||
|
<p class="num"> |
||||||
|
<span>{{num05}}</span> |
||||||
|
<span class="iconDiv"> |
||||||
|
<img src="./images/icon5.png"/> |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
<a-col :xs="12" :xl="4"> |
||||||
|
<div class="commonDiv"> |
||||||
|
<p class="title">已完成数</p> |
||||||
|
<p class="subtitle">Completed competitions</p> |
||||||
|
<p class="num"> |
||||||
|
<span>{{num06}}</span> |
||||||
|
<span class="iconDiv"> |
||||||
|
<img src="./images/icon6.png"/> |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row :gutter="[32,16]" type="flex" justify="space-between" class="titleDiv titleDiv1"> |
||||||
|
<a-col :xs="24" :xl="8" > |
||||||
|
<a-row type="flex" justify="space-between" class="titleDiv"> |
||||||
|
<a-col :span="12" > |
||||||
|
<span class="name">综合评分排名{{list}}</span> |
||||||
|
</a-col> |
||||||
|
<a-col :span="12" class="more"> |
||||||
|
<span>More<a-icon type="right" /></span> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row :gutter="[32,16]" type="flex" justify="space-between" class="commonDiv" style="margin: 0"> |
||||||
|
<a-col :span="20"> |
||||||
|
<div id="histogram" style="width: 100%;height: 100%"> |
||||||
|
<!-- <div class="item" v-for="(item,index) in multipleScore" :key="index">--> |
||||||
|
<!-- <div class="topDiv">--> |
||||||
|
<!-- <div class="red color" :style="{height:item.target1*2+'px'}"></div>--> |
||||||
|
<!-- <div class="yellow color" :style="{height:item.target2*2+'px'}"></div>--> |
||||||
|
<!-- <div class="green color" :style="{height:item.target3*2+'px'}"></div>--> |
||||||
|
<!-- </div>--> |
||||||
|
<!-- <div class="bottomDiv">--> |
||||||
|
<!-- {{item.name}}--> |
||||||
|
<!-- </div>--> |
||||||
|
<!-- </div>--> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
<a-col :span="4"> |
||||||
|
<div class="colorDiv"> |
||||||
|
<div class="color"> |
||||||
|
<div class="green"></div> |
||||||
|
<p>指标一</p> |
||||||
|
</div> |
||||||
|
<div class="color"> |
||||||
|
<div class="red"></div> |
||||||
|
<p>指标二</p> |
||||||
|
</div> |
||||||
|
<div class="color"> |
||||||
|
<div class="yellow"></div> |
||||||
|
<p>指标三</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-col> |
||||||
|
<a-col :xs="24" :xl="16"> |
||||||
|
<a-row type="flex" justify="space-between" class="titleDiv"> |
||||||
|
<a-col :span="12" > |
||||||
|
<span class="name">比赛列表</span> |
||||||
|
</a-col> |
||||||
|
<a-col :span="12" class="more"> |
||||||
|
<span @click="goPage">More<a-icon type="right" /></span> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div class="commonDiv"> |
||||||
|
<a-row :gutter="[32,16]" type="flex" justify="space-between" class="tableTitle"> |
||||||
|
<a-col :span="2">序号</a-col> |
||||||
|
<a-col :span="12">名称</a-col> |
||||||
|
<a-col :span="6">开始时间</a-col> |
||||||
|
<a-col :span="4">审核状态</a-col> |
||||||
|
</a-row> |
||||||
|
<div class="none" v-if="false">暂无数据</div> |
||||||
|
<a-row :gutter="[32,16]" type="flex" justify="space-between" v-for="(item,index) in data02" |
||||||
|
:key="index" class="tableCoin" v-if="index<3"> |
||||||
|
<a-col :span="2">{{index+1}}</a-col> |
||||||
|
<a-col :span="12">{{item.compname}}</a-col> |
||||||
|
<a-col :span="6">{{item.startTime}}</a-col> |
||||||
|
<a-col :span="4">{{item.status_dictText}}</a-col> |
||||||
|
</a-row> |
||||||
|
</div> |
||||||
|
|
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row :gutter="[32,16]" type="flex" justify="space-between" class="titleDiv"> |
||||||
|
<a-col :xs="24" :xl="12" > |
||||||
|
<a-row type="flex" justify="space-between" class="titleDiv"> |
||||||
|
<a-col :span="12" > |
||||||
|
<span class="name">年度比赛列表</span> |
||||||
|
</a-col> |
||||||
|
<a-col :span="12" class="more"> |
||||||
|
<span>More<a-icon type="right" /></span> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div class="commonDiv"> |
||||||
|
<a-row :gutter="[32,16]" type="flex" justify="space-between" class="tableTitle"> |
||||||
|
<a-col :span="2">序号</a-col> |
||||||
|
<a-col :span="12">名称</a-col> |
||||||
|
<a-col :span="6">开始时间</a-col> |
||||||
|
<a-col :span="4">审核状态</a-col> |
||||||
|
</a-row> |
||||||
|
<div class="none" v-if="false">暂无数据</div> |
||||||
|
<a-row :gutter="[32,16]" type="flex" justify="space-between" v-for="(item,index) in data03" |
||||||
|
:key="index" class="tableCoin" v-if="index<3"> |
||||||
|
<a-col :span="2">{{index+1}}</a-col> |
||||||
|
<a-col :span="12">{{item.compname}}</a-col> |
||||||
|
<a-col :span="6">{{item.startTime}}</a-col> |
||||||
|
<a-col :span="4">{{item.status_dictText}}</a-col> |
||||||
|
</a-row> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
<a-col :xs="24" :xl="12"> |
||||||
|
<a-row type="flex" justify="space-between" class="titleDiv"> |
||||||
|
<a-col :span="12" > |
||||||
|
<span class="name">高校列表</span> |
||||||
|
</a-col> |
||||||
|
<a-col :span="12" class="more"> |
||||||
|
<span>More<a-icon type="right" /></span> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div class="commonDiv"> |
||||||
|
<a-row :gutter="[32,16]" type="flex" justify="space-between" class="tableTitle"> |
||||||
|
<a-col :span="2">序号</a-col> |
||||||
|
<a-col :span="12">名称</a-col> |
||||||
|
<a-col :span="6">开始时间</a-col> |
||||||
|
<a-col :span="4">审核状态</a-col> |
||||||
|
</a-row> |
||||||
|
<div class="none" v-if="false">暂无数据</div> |
||||||
|
<a-row :gutter="[32,16]" type="flex" justify="space-between" v-for="(item,index) in data04" |
||||||
|
:key="index" class="tableCoin" v-if="index<3"> |
||||||
|
<a-col :span="2">{{index+1}}</a-col> |
||||||
|
<a-col :span="12">{{item.compname}}</a-col> |
||||||
|
<a-col :span="6">{{item.startTime}}</a-col> |
||||||
|
<a-col :span="4">{{item.status_dictText}}</a-col> |
||||||
|
</a-row> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-spin></div> |
||||||
|
</template> |
||||||
|
<script > |
||||||
|
|
||||||
|
import * as echarts from 'echarts'; |
||||||
|
import * as url from "url"; |
||||||
|
export default { |
||||||
|
name: "index1", |
||||||
|
data() { |
||||||
|
return {loading:false, |
||||||
|
num01:'',//本年度已展开比赛数 |
||||||
|
num02:'20',//本年度参加比赛学校数 |
||||||
|
num03:'20',//管理比赛数 |
||||||
|
num04:'20',//管理学校数 |
||||||
|
num05:'5',//正在进行数 |
||||||
|
num06:'5',//已完成数 |
||||||
|
//比赛列表数据 |
||||||
|
data02:[], |
||||||
|
//综合评分排名 |
||||||
|
data01:[ |
||||||
|
{ |
||||||
|
id:'1', |
||||||
|
compname:'名称1',//名称 |
||||||
|
startTime:"2023-08",//开始时间 |
||||||
|
status_dictText:"已审核",//审核状态 |
||||||
|
}, |
||||||
|
{ |
||||||
|
id:'2', |
||||||
|
compname:'名称2',//名称 |
||||||
|
startTime:"2023-09",//开始时间 |
||||||
|
status_dictText:"未审核",//审核状态 |
||||||
|
} |
||||||
|
], |
||||||
|
//年度比赛列表 |
||||||
|
data03:[ |
||||||
|
{ |
||||||
|
id:'1', |
||||||
|
compname:'名称1',//名称 |
||||||
|
startTime:"2023-08",//开始时间 |
||||||
|
status_dictText:"已审核",//审核状态 |
||||||
|
}, |
||||||
|
{ |
||||||
|
id:'2', |
||||||
|
compname:'名称2',//名称 |
||||||
|
startTime:"2023-09",//开始时间 |
||||||
|
status_dictText:"未审核",//审核状态 |
||||||
|
} |
||||||
|
], |
||||||
|
//高校列表 |
||||||
|
data04:[ |
||||||
|
{ |
||||||
|
id:'1', |
||||||
|
compname:'名称1',//名称 |
||||||
|
startTime:"2023-08",//开始时间 |
||||||
|
status_dictText:"已审核",//审核状态 |
||||||
|
}, |
||||||
|
{ |
||||||
|
id:'2', |
||||||
|
compname:'名称2',//名称 |
||||||
|
startTime:"2023-09",//开始时间 |
||||||
|
status_dictText:"未审核",//审核状态 |
||||||
|
} |
||||||
|
], |
||||||
|
}, |
||||||
|
url: { |
||||||
|
//获取本年度已展开比赛数 |
||||||
|
getnumanncom : "/annualcomp/annualComp/getnumanncom"; |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
// 基于准备好的dom，初始化echarts实例 |
||||||
|
var myChart = echarts.init(document.getElementById('histogram')); |
||||||
|
// 绘制图表 |
||||||
|
myChart.setOption({ |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: 'pie', |
||||||
|
data: [35,234,1548], |
||||||
|
labelLine:false |
||||||
|
} |
||||||
|
] |
||||||
|
}); |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
getnumanncom(){ |
||||||
|
getAction(this.url.getnumanncom).then((res) => { |
||||||
|
if(res.success) { |
||||||
|
this.num01 = res.result; |
||||||
|
console.log("===========") |
||||||
|
console.log(res.message) |
||||||
|
} else { |
||||||
|
console.log("-----------") |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style> |
||||||
|
|
||||||
|
.my-index-table{height:270px} |
||||||
|
.my-index-table table{font-size: 14px !important;} |
||||||
|
.index-container-ty .ant-card-head-title{padding-top: 6px;padding-bottom: 6px;} |
||||||
|
.index-container-ty .ant-card-extra{padding:0} |
||||||
|
.index-container-ty .ant-card-extra a{color:#fff} |
||||||
|
.index-container-ty .ant-card-extra a:hover{color:#152ede} |
||||||
|
.index-container-ty .ant-card-head-wrapper,.index-container-ty .ant-card-head{ |
||||||
|
line-height:24px; |
||||||
|
min-height:24px; |
||||||
|
background: #7196fb; |
||||||
|
} |
||||||
|
.index-container-ty .ant-card-body{padding: 10px 12px 0px 12px} |
||||||
|
.index-container-ty .ant-table-footer{text-align: right;padding:6px 12px 6px 6px;background: #fff;border-top: 2px solid #f7f1f1;} |
||||||
|
.index-md-title{ |
||||||
|
postion:relative; |
||||||
|
padding-left:24px; |
||||||
|
width: 100%; |
||||||
|
color: #fff; |
||||||
|
font-size: 21px; |
||||||
|
font-family: cursive; |
||||||
|
} |
||||||
|
.index-md-title img{ |
||||||
|
position: absolute; |
||||||
|
height:32px; |
||||||
|
top: 2px; |
||||||
|
left:14px; |
||||||
|
} |
||||||
|
.index-container-ty .ant-table-thead > tr > th, |
||||||
|
.index-container-ty .ant-table-tbody > tr > td{ |
||||||
|
border-bottom: 1px solid #90aeff; |
||||||
|
} |
||||||
|
.index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th, |
||||||
|
.index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th{ |
||||||
|
border-bottom: 1px solid #90aeff; |
||||||
|
} |
||||||
|
.index-container-ty .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th{ |
||||||
|
border-bottom: 1px solid #90aeff; |
||||||
|
} |
||||||
|
.index-container-ty .ant-table-small{ |
||||||
|
border: 1px solid #90aeff; |
||||||
|
} |
||||||
|
.index-container-ty .ant-table-placeholder { |
||||||
|
padding: 0 |
||||||
|
} |
||||||
|
</style> |
||||||
|
<style lang="less" scoped> |
||||||
|
.none{ |
||||||
|
text-align: center; |
||||||
|
padding-top: 50px; |
||||||
|
color: #A3A3A3; |
||||||
|
} |
||||||
|
.commonDiv{ |
||||||
|
width: 100%; |
||||||
|
padding: 15px 25px; |
||||||
|
margin: 0; |
||||||
|
background: #FDFDFD; |
||||||
|
box-shadow: 18px 25px 48px 0px rgba(83,153,247,0.12); |
||||||
|
border-radius: 20px 20px 20px 20px; |
||||||
|
opacity: 1; |
||||||
|
.title{ |
||||||
|
font-size: 14px; |
||||||
|
color: #464255; |
||||||
|
font-weight: bold; |
||||||
|
margin-bottom: 4px; |
||||||
|
} |
||||||
|
.subtitle{ |
||||||
|
font-size: 12px; |
||||||
|
color: #BBBBBB; |
||||||
|
} |
||||||
|
.num{ |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
span{ |
||||||
|
font-size: 32px; |
||||||
|
font-weight: 600; |
||||||
|
color: #464255; |
||||||
|
} |
||||||
|
.iconDiv{ |
||||||
|
width: 50px; |
||||||
|
height: 50px; |
||||||
|
font-size: 26px; |
||||||
|
line-height: 50px; |
||||||
|
border-radius: 40px 40px 40px 40px; |
||||||
|
text-align: center; |
||||||
|
img{ |
||||||
|
width: 50px; |
||||||
|
height: 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.tableTitle{ |
||||||
|
border-bottom: 1px solid #ECEAF3; |
||||||
|
height: 68px; |
||||||
|
line-height: 68px; |
||||||
|
color: #A3A3A3; |
||||||
|
font-size: 16px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.tableCoin{ |
||||||
|
border-bottom: 1px solid #ECEAF3; |
||||||
|
height: 68px; |
||||||
|
line-height: 68px; |
||||||
|
font-weight: 500; |
||||||
|
color: #464255; |
||||||
|
font-size: 16px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
.titleDiv{ |
||||||
|
margin-top: 20px; |
||||||
|
margin-bottom: 20px; |
||||||
|
.name{ |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 500; |
||||||
|
color: #464255; |
||||||
|
} |
||||||
|
.more{ |
||||||
|
text-align: right; |
||||||
|
cursor: pointer; |
||||||
|
i{ |
||||||
|
margin-left: 6px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
.titleDiv1 .commonDiv{ |
||||||
|
height: 300px; |
||||||
|
} |
||||||
|
.histogram{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
height: 260px; |
||||||
|
.item{ |
||||||
|
width: 50px; |
||||||
|
height: 260px; |
||||||
|
margin-right: 12px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
.topDiv{ |
||||||
|
height: 200px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: flex-end; |
||||||
|
align-items: center; |
||||||
|
.color{ |
||||||
|
width: 14px; |
||||||
|
} |
||||||
|
.red{ |
||||||
|
height: 30px; |
||||||
|
background-color: #91CC75; |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
margin-bottom: -7px; |
||||||
|
} |
||||||
|
.yellow{ |
||||||
|
height: 30px; |
||||||
|
background-color:#FAC858; |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
margin-bottom: -7px; |
||||||
|
} |
||||||
|
.green{ |
||||||
|
height: 30px; |
||||||
|
background-color: #5470C6; |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
} |
||||||
|
} |
||||||
|
.bottomDiv{ |
||||||
|
height: 51px; |
||||||
|
line-height: 17px; |
||||||
|
overflow: hidden;display: -webkit-box;text-overflow: ellipsis; |
||||||
|
-webkit-line-clamp:2;-webkit-box-orient: vertical;white-space:normal; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.colorDiv{ |
||||||
|
.color{ |
||||||
|
margin-bottom: 30px; |
||||||
|
.green{ |
||||||
|
width: 12px; |
||||||
|
height: 12px; |
||||||
|
background-color: #5470C6; |
||||||
|
} |
||||||
|
.red{ |
||||||
|
width: 12px; |
||||||
|
height: 12px; |
||||||
|
background-color: #91CC75; |
||||||
|
} |
||||||
|
.yellow{ |
||||||
|
width: 12px; |
||||||
|
height: 12px; |
||||||
|
background-color: #FAC858; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue