|
|
<style>
|
|
|
.welcome .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
|
|
|
<!-- 设置卡片的边框和圆角 -->
|
|
|
.welcome .icon {margin-right:10px;color:#1aa094;}
|
|
|
<!-- 设置图标的右边距和颜色 -->
|
|
|
.welcome .icon-cray {color:#ffb800 !important;}
|
|
|
<!-- 设置特定图标的颜色为黄色 -->
|
|
|
.welcome .icon-blue {color:#1e9fff !important;}
|
|
|
<!-- 设置特定图标的颜色为蓝色 -->
|
|
|
.welcome .icon-tip {color:#ff5722 !important;}
|
|
|
<!-- 设置特定图标的颜色为橙色 -->
|
|
|
.welcome .layuimini-qiuck-module {text-align:center;margin-top:10px}
|
|
|
<!-- 设置快速模块的文本居中和上边距 -->
|
|
|
.welcome .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
|
|
|
<!-- 设置快速模块中的链接图标样式，包括尺寸、对齐方式、背景色等 -->
|
|
|
.welcome .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
|
|
|
<!-- 设置快速模块中的引用文本样式，包括位置、颜色、溢出处理等 -->
|
|
|
.welcome .welcome-module {width:100%;height:210px;}
|
|
|
<!-- 设置欢迎模块的宽度和高度 -->
|
|
|
.welcome .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
|
|
|
<!-- 设置面板的背景色、边框和阴影效果 -->
|
|
|
.welcome .panel-body {padding:10px}
|
|
|
<!-- 设置面板主体的内边距 -->
|
|
|
.welcome .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
|
|
|
<!-- 设置面板标题的外边距和字体大小 -->
|
|
|
.welcome .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top:.3em;}
|
|
|
<!-- 设置标签的显示方式、内边距、字体大小、行高、颜色、对齐方式等 -->
|
|
|
.welcome .layui-red {color:red}
|
|
|
<!-- 设置红色文字的颜色 -->
|
|
|
.welcome .main_btn > p {height:40px;}
|
|
|
<!-- 设置主按钮中段落的高度 -->
|
|
|
.welcome .layui-bg-number {background-color:#F8F8F8;}
|
|
|
<!-- 设置数字背景的颜色 -->
|
|
|
.welcome .layuimini-notice:hover {background:#f6f6f6;}
|
|
|
<!-- 设置通知悬停时的背景颜色 -->
|
|
|
.welcome .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
|
|
|
<!-- 设置通知的内边距、清除浮动、字体大小、光标类型、位置和过渡效果 -->
|
|
|
.welcome .layuimini-notice-title,.layuimini-notice-label {padding-right:70px !important;text-overflow:ellipsis !important;overflow:hidden !important;white-space:nowrap !important;}
|
|
|
<!-- 设置通知标题和标签的右内边距、文本溢出处理、隐藏溢出内容和不换行 -->
|
|
|
.welcome .layuimini-notice-title {line-height:28px;font-size:14px;}
|
|
|
<!-- 设置通知标题的行高和字体大小 -->
|
|
|
.welcome .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
|
|
|
<!-- 设置通知额外信息的绝对定位、顶部偏移、右边距、显示方式、高度和颜色 -->
|
|
|
</style>
|
|
|
<!-- 主容器，包含页面动画效果 -->
|
|
|
<div class="layuimini-container layuimini-page-anim">
|
|
|
<!-- 主要内容区域，class为welcome -->
|
|
|
<div class="layuimini-main welcome">
|
|
|
<!-- 行布局，列间距为15px -->
|
|
|
<div class="layui-row layui-col-space15">
|
|
|
<!-- 占据8个栅格的列 -->
|
|
|
<div class="layui-col-md8">
|
|
|
<!-- 嵌套行布局 -->
|
|
|
<div class="layui-row">
|
|
|
<!-- 卡片组件，高度400px -->
|
|
|
<div class="layui-card" style="height: 400px;">
|
|
|
<!-- 卡片头部，包含警告图标和标题 -->
|
|
|
<div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
|
|
|
<!-- 卡片主体部分 -->
|
|
|
<div class="layui-card-body">
|
|
|
<!-- 欢迎模块，高度350px，内容溢出时自动滚动 -->
|
|
|
<div class="welcome-module" style="height: 350px;overflow: auto;">
|
|
|
<!-- 表格组件，使用line风格 -->
|
|
|
<table class="layui-table" lay-skin="line">
|
|
|
<tr>
|
|
|
<!-- 表头：楼宇 -->
|
|
|
<th>楼宇</th>
|
|
|
<!-- 表头：宿舍数量 -->
|
|
|
<th>宿舍数量</th>
|
|
|
<!-- 表头：入住人数 -->
|
|
|
<th>入住人数</th>
|
|
|
<!-- 表头：闲置数量 -->
|
|
|
<th>闲置数量</th>
|
|
|
<!-- 表头：使用率 -->
|
|
|
<th>使用率</th>
|
|
|
</tr>
|
|
|
<!-- 表格主体部分，id为building-data -->
|
|
|
<tbody id="building-data"></tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-card">
|
|
|
<!-- 报表统计卡片头部，包含图标和标题 -->
|
|
|
<div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
|
|
|
<div class="layui-card-body">
|
|
|
<!-- 报表统计的ECharts容器，最小高度为365px -->
|
|
|
<div id="echarts-records" style="min-height:365px"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-col-md4">
|
|
|
<div class="layui-card" style="height: 400px;">
|
|
|
<!-- 系统公告卡片头部，包含图标和标题 -->
|
|
|
<div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
|
|
|
<!-- 系统公告内容展示区域，id为notice-data -->
|
|
|
<div class="layui-card-body layui-text" id="notice-data"></div>
|
|
|
</div>
|
|
|
<div class="layui-card">
|
|
|
<!-- 版本信息卡片头部，包含图标和标题 -->
|
|
|
<div class="layui-card-header"><i class="fa fa-fire icon"></i>版本信息</div>
|
|
|
<div class="layui-card-body layui-text">
|
|
|
<!-- 版本信息的表格结构 -->
|
|
|
<table class="layui-table">
|
|
|
<colgroup>
|
|
|
<col width="100">
|
|
|
<col>
|
|
|
</colgroup>
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td>项目名称</td>
|
|
|
<td>
|
|
|
高校宿舍管理系统
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>当前版本</td>
|
|
|
<td>v1.0.0</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>后端技术</td>
|
|
|
<td>SpringBoot</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>前端技术</td>
|
|
|
<td>Layui框架</td>
|
|
|
</tr>
|
|
|
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
layui.use(['layer','echarts'], function () {
|
|
|
// 引入layui的jquery、layer和echarts模块
|
|
|
var $ = layui.jquery,
|
|
|
layer = layui.layer,
|
|
|
echarts = layui.echarts;
|
|
|
|
|
|
// 判断登录类型是否为1，如果是则清空欢迎信息并显示特定文本
|
|
|
if(store.getLoginType() == 1){
|
|
|
$('.welcome').empty(); // 清空欢迎信息
|
|
|
$('.welcome').append("欢迎高校学生宿舍管理系统"); // 添加特定文本到欢迎信息中
|
|
|
return; // 结束函数执行
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 加载建筑信息的函数
|
|
|
* 通过axios发送GET请求获取建筑数据，并将数据渲染到页面上
|
|
|
*/
|
|
|
function loadBuilding(){
|
|
|
// 发送GET请求获取建筑数据，限制返回的数据条数为1000
|
|
|
axios.get('main/building',{limit:1000}).then(function (response) {
|
|
|
// 遍历响应数据中的每一项
|
|
|
response.data.forEach(item=>{
|
|
|
// 创建包含建筑信息的HTML字符串
|
|
|
let html = `<tr>
|
|
|
<td>${item.name}</td> <!-- 建筑名称 -->
|
|
|
<td>${item.all}</td> <!-- 总床位数 -->
|
|
|
<td>${item.used}</td> <!-- 已使用床位数 -->
|
|
|
<td>${item.unused}</td> <!-- 未使用床位数 -->
|
|
|
<td>${item.percent}%</td> <!-- 使用率百分比 -->
|
|
|
</tr>`
|
|
|
|
|
|
$('#building-data').append(html);
|
|
|
})
|
|
|
});
|
|
|
}
|
|
|
loadBuilding();
|
|
|
function loadNotice() {
|
|
|
axios.get('main/notice').then(function (response) {
|
|
|
response.data.forEach(item=>{
|
|
|
let html = `<div class="layuimini-notice">
|
|
|
<div class="layuimini-notice-title">${item.title}</div>
|
|
|
<div class="layuimini-notice-extra">${item.createTime}</div>
|
|
|
<div class="layuimini-notice-content layui-hide">${item.content}</div>
|
|
|
</div>`
|
|
|
$('#notice-data').append(html);
|
|
|
})
|
|
|
});
|
|
|
}
|
|
|
loadNotice();
|
|
|
|
|
|
|
|
|
|
|
|
$('body').on('click', '.layuimini-notice', function () {
|
|
|
// 获取公告标题文本
|
|
|
let title = $(this).children('.layuimini-notice-title').text(),
|
|
|
// 获取公告时间文本
|
|
|
noticeTime = $(this).children('.layuimini-notice-extra').text(),
|
|
|
// 获取公告内容HTML
|
|
|
content = $(this).children('.layuimini-notice-content').html();
|
|
|
|
|
|
// 构建公告弹窗的HTML内容
|
|
|
let html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #eeeeee;color: #222222;">\n' +
|
|
|
'<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
|
|
|
'<div style="font-size: 14px">' + content + '</div>\n' +
|
|
|
'</div>\n';
|
|
|
|
|
|
// 使用layer插件打开公告弹窗
|
|
|
parent.layer.open({
|
|
|
// 弹窗类型为页面层
|
|
|
type: 1,
|
|
|
// 设置弹窗标题，包含系统公告和公告时间
|
|
|
title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
|
|
|
// 设置弹窗宽度
|
|
|
area: '400px;',
|
|
|
// 设置遮罩透明度
|
|
|
shade: 0.8,
|
|
|
// 设置弹窗ID
|
|
|
id: 'layuimini-notice',
|
|
|
// 设置弹窗按钮
|
|
|
btn: ['取消'],
|
|
|
// 设置按钮对齐方式为居中
|
|
|
btnAlign: 'c',
|
|
|
// 设置拖拽类型
|
|
|
moveType: 1,
|
|
|
// 设置弹窗内容为构建的HTML
|
|
|
content: html
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
function loadReport(){
|
|
|
// 使用axios发送GET请求，获取建筑数据，限制返回1000条记录
|
|
|
axios.get('main/building',{limit:1000}).then(function (response) {
|
|
|
// 从响应数据中提取每个建筑的used属性值
|
|
|
let used = response.data.map(item=>item.used);
|
|
|
// 从响应数据中提取每个建筑的name属性值
|
|
|
let name = response.data.map(item=>item.name);
|
|
|
// 调用loadEchars函数，将提取到的名称和数值传递给它
|
|
|
loadEchars(name,used);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 调用loadReport函数，加载报告数据
|
|
|
loadReport();
|
|
|
|
|
|
function loadEchars(name,values){
|
|
|
// 初始化echarts实例，绑定到页面中的'echarts-records'元素，并使用'walden'主题
|
|
|
let echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
|
|
|
// 配置echarts图表的选项
|
|
|
let option = {
|
|
|
xAxis: {
|
|
|
// x轴类型为类目轴
|
|
|
type: 'category',
|
|
|
// x轴的数据为建筑名称
|
|
|
data: name
|
|
|
},
|
|
|
tooltip: {}, // 提示框组件，默认配置
|
|
|
yAxis: {
|
|
|
// y轴类型为数值轴
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: [{
|
|
|
// 系列数据为传入的数值数组
|
|
|
data: values,
|
|
|
// 系列类型为柱状图
|
|
|
type: 'bar',
|
|
|
// 显示背景
|
|
|
showBackground: true,
|
|
|
backgroundStyle: {
|
|
|
// 设置背景颜色为半透明灰色
|
|
|
color: 'rgba(220, 220, 220, 0.8)'
|
|
|
}
|
|
|
}]
|
|
|
};
|
|
|
// 设置 ECharts 图表的配置项和数据
|
|
|
echartsRecords.setOption(option);
|
|
|
|
|
|
// 定义窗口大小变化时的事件处理函数，使 ECharts 图表自适应窗口大小
|
|
|
window.onresize = function () {
|
|
|
// 调用 ECharts 实例的 resize 方法，调整图表大小以适应新的窗口尺寸
|
|
|
echartsRecords.resize();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
});
|
|
|
</script>
|
