dshclm
8 months ago
parent
87b98e8959
commit
4c3093aa92
@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('考试统计')" />
|
||||
<th:block th:include="include :: element-css" />
|
||||
</head>
|
||||
<style>
|
||||
.count_box{
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.count_top{
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
}
|
||||
.count_top ul{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
.count_top ul li{
|
||||
width: 333px;
|
||||
height: 168px;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: -4px 4px 4px #d5d5d5;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.yuan{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: -163px;
|
||||
right: -146px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.count_top ul li:nth-child(1) .yuan{
|
||||
background-color: #e2f0ff;
|
||||
}
|
||||
.count_top ul li:nth-child(2) .yuan{
|
||||
background-color: #ffe7e9;
|
||||
}
|
||||
.count_top ul li:nth-child(3) .yuan{
|
||||
background-color: #e3f7ef;
|
||||
}
|
||||
.count_top ul li i{
|
||||
font-size: 33px;
|
||||
position: absolute;
|
||||
top: 72%;
|
||||
left: 82%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.count_top ul li .textList{
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
height: 117px;
|
||||
top: 18%;
|
||||
left: 13px;
|
||||
}
|
||||
.textList p{
|
||||
color: rgba(85, 90, 105, 0.79);
|
||||
}
|
||||
.textList p:nth-of-type(1) {
|
||||
font-size: 33px;
|
||||
}
|
||||
|
||||
.textList p:nth-of-type(2) {
|
||||
font-size: 24px;
|
||||
}
|
||||
.count_bottom{
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div" id="app">
|
||||
<div class="count_box">
|
||||
<div class="count_top">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="textList">
|
||||
<p>
|
||||
{{countList.total}}
|
||||
</p>
|
||||
<p>
|
||||
考试总数
|
||||
</p>
|
||||
</div>
|
||||
<span class="yuan"></span>
|
||||
<i class="fa fa-clipboard" style="color: #0078ff"></i>
|
||||
</li>
|
||||
<li>
|
||||
<div class="textList">
|
||||
<p>
|
||||
{{countList.tg}}
|
||||
</p>
|
||||
<p>
|
||||
通过人数
|
||||
</p>
|
||||
</div>
|
||||
<span class="yuan"></span>
|
||||
<i class="fa fa-newspaper-o" style="color: #ff313c"></i>
|
||||
</li>
|
||||
<li>
|
||||
<div class="textList">
|
||||
<p>
|
||||
{{countList.wtg}}
|
||||
</p>
|
||||
<p>
|
||||
未通过人数
|
||||
</p>
|
||||
</div>
|
||||
<span class="yuan"></span>
|
||||
<i class="fa fa-pie-chart" style="color: #12b975"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="count_bottom">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%;border-radius: 10px;"
|
||||
max-height="520"
|
||||
>
|
||||
<el-table-column
|
||||
prop="title"
|
||||
label="考试名称"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="total"
|
||||
label="考试总数"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="tg"
|
||||
label="通过人数"
|
||||
align="center">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="wtg"
|
||||
label="未通过人数"
|
||||
align="center">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: element-js" />
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "system/examnum";
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
countList:[],
|
||||
tableData: [],
|
||||
},
|
||||
mounted(){
|
||||
this.init()
|
||||
},
|
||||
methods:{
|
||||
init(){
|
||||
axios.post(prefix + '/countList').then(response => {
|
||||
this.countList = response.data.data
|
||||
})
|
||||
axios.post(prefix + '/countExamList').then(response => {
|
||||
this.tableData = response.data.data
|
||||
})
|
||||
},
|
||||
handleEdit(index,row){
|
||||
var url = prefix + '/examnum/' + row.examId
|
||||
$.modal.openTab("考试明细", url);
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue