wangjiadong
/
comp
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前端页面

Browse Source
main
王家东 10 months ago
parent 374b6369cd
commit d856f5ab46
1 changed files with 501 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 501
      jeecgboot-vue3-master/src/views/dashboard/Analysis/index1.vue

501
jeecgboot-vue3-master/src/views/dashboard/Analysis/index1.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save