zimoyin
165 lines
4.2 KiB
HTML
165 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>医院科室统计</title>
|
|
|
|
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
|
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
|
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.container {
|
|
height: 100%;
|
|
}
|
|
|
|
.left-tree {
|
|
height: calc(100vh - 20px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.right-content {
|
|
height: calc(100vh - 20px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.table-box {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="layui-row container" style="padding:10px;">
|
|
|
|
<!-- 左侧树 -->
|
|
<div class="layui-col-md3 left-tree">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">医院科室</div>
|
|
<div class="layui-card-body">
|
|
<div id="hospitalDeptTree"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧 -->
|
|
<div class="layui-col-md9 right-content">
|
|
|
|
<!-- 卡片 -->
|
|
<div class="layui-row" id="summaryCards"></div>
|
|
|
|
<!-- 表格 -->
|
|
<div class="table-box">
|
|
<table id="dataTable"></table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="/app/admin/component/layui/layui.js"></script>
|
|
<script src="/app/admin/component/pear/pear.js"></script>
|
|
|
|
<script>
|
|
layui.use(['tree', 'table', 'jquery'], function(){
|
|
var tree = layui.tree;
|
|
var table = layui.table;
|
|
var $ = layui.jquery;
|
|
|
|
let currentType = 'hospital';
|
|
let currentId = null;
|
|
let currentHospitalId = null;
|
|
|
|
function initTree(){
|
|
$.get("/app/admin/test/tree", function(res){
|
|
|
|
tree.render({
|
|
elem: '#hospitalDeptTree',
|
|
data: res.data,
|
|
onlyIconControl: true,
|
|
|
|
click: function(obj){
|
|
currentType = obj.data.type;
|
|
currentId = obj.data.id;
|
|
currentHospitalId = obj.data.hospital_id;
|
|
|
|
reloadAll();
|
|
}
|
|
});
|
|
|
|
if(res.data.length){
|
|
currentType = 'hospital';
|
|
currentId = res.data[0].id;
|
|
currentHospitalId = res.data[0].id;
|
|
reloadAll();
|
|
}
|
|
});
|
|
}
|
|
|
|
function initTable(){
|
|
table.render({
|
|
elem: '#dataTable',
|
|
id: 'dataTable',
|
|
url: '/app/admin/test/data',
|
|
page: true,
|
|
height: 'full-150',
|
|
cols: [[
|
|
{field:'organ_name', title:'医院'},
|
|
{field:'dept_name', title:'科室'},
|
|
{field:'waste_type', title:'垃圾类型'},
|
|
{field:'weight', title:'重量'},
|
|
{field:'recl_time', title:'时间'}
|
|
]]
|
|
});
|
|
}
|
|
|
|
function getParams(){
|
|
return {
|
|
type: currentType,
|
|
id: currentId,
|
|
hospital_id: currentHospitalId
|
|
};
|
|
}
|
|
|
|
function reloadAll(){
|
|
table.reload('dataTable', {
|
|
where: getParams(),
|
|
page: {curr:1}
|
|
});
|
|
|
|
loadSummary();
|
|
}
|
|
|
|
function loadSummary(){
|
|
$.get('/app/admin/test/summary', getParams(), function(res){
|
|
|
|
let html = '';
|
|
|
|
res.data.forEach(item=>{
|
|
html += `
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">${item.type || '未知'}</div>
|
|
<div class="layui-card-body">${item.total || 0} kg</div>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
|
|
$('#summaryCards').html(html);
|
|
});
|
|
}
|
|
|
|
initTree();
|
|
initTable();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |