@ -11,20 +11,23 @@
}
.count_top{
width: 100%;
height: 30%;
height: 50%;
display: flex;
justify-content: space-between;
}
.count_top ul{
width: 100 %;
width: 36 %;
height: 100%;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
flex-wrap: wrap;
}
.count_top ul li{
width: 289 px;
height: 16 8px;
width: 231 px;
height: 181 px;
background-color: white;
border-radius: 10px;
box-shadow: -4px 4px 4px #d5d5d5;
@ -56,7 +59,7 @@
font-size: 33px;
position: absolute;
top: 72%;
left: 82 %;
left: 74 %;
transform: translate(-50%,-50%);
}
.count_top ul li .textList{
@ -65,6 +68,7 @@
height: 117px;
top: 18%;
left: 13px;
z-index: 99;
}
.textList p{
color: rgba(85, 90, 105, 0.79);
@ -78,112 +82,121 @@
}
.count_bottom{
width: 100%;
height: 70 %;
height: 55 %;
border-radius: 10px;
}
.children_echarts{
width: 33%;
height: 100%;
}
< / style >
< body class = "gray-bg" >
< div class = "container-div" id = "app" >
< div class = "row" >
< 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.shtg}}
< / 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.shwtg}}
< / p >
< p >
审核未通过
< / p >
< / div >
< span class = "yuan" > < / span >
< i class = "fa fa-pie-chart" style = "color: #12b975" > < / i >
< / li >
< li >
< div class = "textList" >
< p >
{{countList.dsh}}
< / p >
< p >
待审核
< / p >
< / div >
< span class = "yuan" > < / span >
< i class = "fa fa-hourglass-2" style = "color: #12b975" > < / i >
< / li >
< / ul >
< 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.shtg}}
< / 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.shwtg}}
< / p >
< p >
审核未通过
< / p >
< / div >
< span class = "yuan" > < / span >
< i class = "fa fa-pie-chart" style = "color: #12b975" > < / i >
< / li >
< li >
< div class = "textList" >
< p >
{{countList.dsh}}
< / p >
< p >
待审核
< / p >
< / div >
< span class = "yuan" > < / span >
< i class = "fa fa-hourglass-2" style = "color: #12b975" > < / i >
< / li >
< / ul >
< div class = "children_echarts left_echarts" style = "margin-left: 17px;" >
< div id = "leftMain" style = "width: 430px;height:380px" > < / div >
< / div >
< div class = "children_echarts center_echarts" >
< div id = "centerMain" style = "width: 430px;height:380px" > < / div >
< / div >
< div class = "count_bottom" >
< div class = "col-sm-12 search-collapse" style = "margin-top: 0" >
< form id = "formId" >
< div class = "select-list" >
< ul >
< li >
< label > 人员名称:< / label >
< input type = "text" name = "trainName" / >
< / li >
< li >
< label > 所属地市:< / label >
< input type = "text" name = "AREAID" / >
< / li >
< li >
< label > 培训日期:< / label >
< input type = "text" class = "time-input" placeholder = "请选择培训日期" name = "trainDate" / >
< / li >
< / div >
< div class = "count_bottom" >
< div class = "col-sm-12 search-collapse" style = "margin-top: 0" >
< form id = "formId" >
< div class = "select-list" >
< ul >
< li >
< label > 人员名称:< / label >
< input type = "text" name = "trainName" / >
< / li >
< li >
< label > 所属地市:< / label >
< input type = "text" name = "AREAID" / >
< / li >
< li >
< label > 培训日期:< / label >
< input type = "text" class = "time-input" placeholder = "请选择培训日期" name = "trainDate" / >
< / li >
< li >
< label > 培训状态:< / label >
< select name = "trainState" th:with = "type=${@dict.getType('sys_examine_state')}" >
< option value = "" > 所有< / option >
< option th:each = "dict : ${type}" th:text = "${dict.dictLabel}" th:value = "${dict.dictValue}" > < / option >
< / select >
< / li >
< li >
< a class = "btn btn-primary btn-rounded btn-sm" onclick = "$.table.search()" > < i class = "fa fa-search" > < / i > 搜索< / a >
< a class = "btn btn-warning btn-rounded btn-sm" onclick = "$.form.reset()" > < i class = "fa fa-refresh" > < / i > 重置< / a >
< / li >
< / ul >
< / div >
< / form >
< / div >
< div class = "btn-group-sm" id = "toolbar" role = "group" >
< a class = "btn btn-warning" onclick = "$.table.exportExcel()" shiro:hasPermission = "system:trainnum:export" >
< i class = "fa fa-download" > < / i > 导出
< / a >
< / div >
< div class = "col-sm-12 select-table table-striped" style = "min-height: 80%;" >
< table id = "bootstrap-table" > < / table >
< / div >
< li >
< label > 培训状态:< / label >
< select name = "trainState" th:with = "type=${@dict.getType('sys_examine_state')}" >
< option value = "" > 所有< / option >
< option th:each = "dict : ${type}" th:text = "${dict.dictLabel}" th:value = "${dict.dictValue}" > < / option >
< / select >
< / li >
< li >
< a class = "btn btn-primary btn-rounded btn-sm" onclick = "$.table.search()" > < i class = "fa fa-search" > < / i > 搜索< / a >
< a class = "btn btn-warning btn-rounded btn-sm" onclick = "$.form.reset()" > < i class = "fa fa-refresh" > < / i > 重置< / a >
< / li >
< / ul >
< / div >
< / form >
< / div >
< div class = "btn-group-sm" id = "toolbar" role = "group" >
< a class = "btn btn-warning" onclick = "$.table.exportExcel()" shiro:hasPermission = "system:trainnum:export" >
< i class = "fa fa-download" > < / i > 导出
< / a >
< / div >
< div class = "col-sm-12 select-table table-striped" style = "min-height: 80%;" >
< table id = "bootstrap-table" > < / table >
< / div >
< / div >
< / div >
< / div >
< th:block th:include = "include :: footer" / >
< th:block th:include = "include :: echarts-js" / >
< script th:inline = "javascript" >
var detailFlag = [[${@permission.hasPermi('system:trainnum:detail')}]];
var listFlag = [[${@permission.hasPermi('system:trainnum:list')}]];
@ -314,6 +327,72 @@
}
}
})
var myChart = echarts.init(document.getElementById('leftMain'));
axios.post(prefix + '/countTrainMonth').then(response => {
if (response.data.code == web_status.SUCCESS){
myChart.setOption({
title: {
text: '通过人数'
},
tooltip: {},
legend: {
data:['数量']
},
xAxis: {
data: response.data.data.xAxisData,
axisLabel: {
rotate: 45, // 旋转标签的角度
margin: 10, // 标签与坐标轴的间距
},
},
yAxis: {
},
series: [
{
name: '数量',
type: 'bar',
data: response.data.data.yAxisData,
itemStyle: {
color: '#f3bc67'
}
}
]
});
}
})
var centerMain = echarts.init(document.getElementById('centerMain'));
axios.post(prefix + '/countTrainNoMonth').then(response => {
if (response.data.code == web_status.SUCCESS){
centerMain.setOption({
title: {
text: '待审核'
},
tooltip: {},
legend: {
data:['数量']
},
xAxis: {
data: response.data.data.xAxisData,
axisLabel: {
rotate: 45, // 旋转标签的角度
margin: 10, // 标签与坐标轴的间距
},
},
yAxis: {
},
series: [
{
name: '数量',
type: 'bar',
data: response.data.data.yAxisData,
itemStyle: {
color: '#b546ff'
}
}
]
});
}
})
< / script >
< / body >
< / html >