dshclm
8 months ago
parent
756c1b0590
commit
aa84c31ae4
@ -1,10 +1,278 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<th:block th:include="include :: header('考试统计')" />
|
||||
<th:block th:include="include :: element-css" />
|
||||
</head>
|
||||
<body>
|
||||
1
|
||||
<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;
|
||||
}
|
||||
.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>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in new issue