init

2026-04-03 15:34:04 +08:00
parent 1a84e92384
commit 673c83109f
5 changed files with 894 additions and 247 deletions
@@ -1,60 +1,165 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-cn">
 <head>
    <meta charset="UTF-8">
-    <title>医院科室树形结构</title>
-    <!-- 引入你提供的资源 -->
+    <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-card">
-    <div class="layui-card-body">
-        <div id="hospitalDeptTree" style="padding: 10px;"></div>
+
+<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?v=2.8.12"></script>
+<script src="/app/admin/component/layui/layui.js"></script>
 <script src="/app/admin/component/pear/pear.js"></script>
-<script src="/app/admin/admin/js/permission.js"></script>
-<script src="/app/admin/admin/js/common.js"></script>

 <script>
-    layui.use(['tree', 'layer', 'jquery'], function(){
+    layui.use(['tree', 'table', 'jquery'], function(){
        var tree = layui.tree;
-        var layer = layui.layer;
+        var table = layui.table;
        var $ = layui.jquery;

-        // 渲染医院科室树形结构
-        function renderHospitalTree() {
-            // 请求后端接口获取树数据
+        let currentType = 'hospital';
+        let currentId = null;
+        let currentHospitalId = null;
+
+        function initTree(){
            $.get("/app/admin/test/tree", function(res){
-                if(res.code === 0){
-                    tree.render({
-                        elem: '#hospitalDeptTree',  // 容器ID
-                        data: res.data,             // 树数据
-                        showCheckbox: false,        // 不显示复选框
-                        onlyIconControl: true,      // 仅允许图标展开/折叠
-                        click: function(obj){
-                            // 点击节点事件
-                            layer.msg("你选择了：" + obj.data.title);
-                            console.log("节点数据：", obj.data);
-                        }
-                    });
-                } else {
-                    layer.msg(res.msg || "加载树形结构失败");
+
+                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();
                }
-            }).fail(function(){
-                layer.msg("接口请求失败，请检查后端服务");
            });
        }

-        // 页面加载完成渲染树
-        $(function(){
-            renderHospitalTree();
-        });
+        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>