dshclm
8 months ago
parent
756c1b0590
commit
aa84c31ae4
@ -1,10 +1,278 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<th:block th:include="include :: header('考试统计')" />
|
||||||
<title>Title</title>
|
<th:block th:include="include :: element-css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<style>
|
||||||
1
|
.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;
|
||||||
|
}
|
||||||
|
.echart{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: white;
|
||||||
|
margin-top: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.children_echarts{
|
||||||
|
width: 49%;
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
</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.yfc}}
|
||||||
|
</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.wfc}}
|
||||||
|
</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">
|
||||||
|
<div class="echart">
|
||||||
|
<div class="children_echarts left_echarts">
|
||||||
|
<div id="leftMain" style="width: 600px;height:400px"></div>
|
||||||
|
</div>
|
||||||
|
<div class="children_echarts right_echarts">
|
||||||
|
<div id="rightMain" style="width: 600px;height:400px"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<th:block th:include="include :: element-js" />
|
||||||
|
<th:block th:include="include :: echarts-js" />
|
||||||
|
<script th:inline="javascript">
|
||||||
|
var prefix = ctx + "system/checknum";
|
||||||
|
var app = new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data: {
|
||||||
|
countList:[],
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
init(){
|
||||||
|
axios.post(prefix + '/countNotifyList').then(response => {
|
||||||
|
this.countList = response.data.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
var myChart = echarts.init(document.getElementById('leftMain'));
|
||||||
|
axios.post(prefix + '/countResult').then(response => {
|
||||||
|
if (response.data.code == web_status.SUCCESS){
|
||||||
|
myChart.setOption({
|
||||||
|
title:{
|
||||||
|
text:'检查结果统计'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
x: 'left',
|
||||||
|
y:'bottom'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 10,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: response.data.data.map((item,index) => ({
|
||||||
|
...item,
|
||||||
|
itemStyle: {
|
||||||
|
color: ['#99ff99','#66b3ff', '#ffcc99',][index]
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
var rightMain = echarts.init(document.getElementById('rightMain'));
|
||||||
|
axios.post(prefix + '/countType').then(response => {
|
||||||
|
if (response.data.code == web_status.SUCCESS){
|
||||||
|
rightMain.setOption({
|
||||||
|
title:{
|
||||||
|
text:'检查类型统计'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
x: 'left',
|
||||||
|
y:'bottom'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 10,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: response.data.data.map((item,index) => ({
|
||||||
|
...item,
|
||||||
|
itemStyle: {
|
||||||
|
color: ['#ff9999', '#66b3ff'][index]
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in new issue