207 lines
8.7 KiB
HTML
207 lines
8.7 KiB
HTML
<!doctype html>
|
|
<!--
|
|
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
|
* @version 1.0.0-beta19
|
|
* @link https://tabler.io
|
|
* Copyright 2018-2023 The Tabler Authors
|
|
* Copyright 2018-2023 codecalm.net Paweł Kuna
|
|
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
|
<title></title>
|
|
<!-- CSS files -->
|
|
<link th:href="@{/css/tabler.min.css}" rel="stylesheet"/>
|
|
<link th:href="@{/css/tabler-flags.min.css}" rel="stylesheet"/>
|
|
<link th:href="@{/css/tabler-payments.min.css}" rel="stylesheet"/>
|
|
<link th:href="@{/css/tabler-vendors.min.css}" rel="stylesheet"/>
|
|
|
|
<style>
|
|
.mermaid { visibility: hidden; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page">
|
|
<!-- Sidebar -->
|
|
<aside class="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
|
|
<div class="container-fluid">
|
|
<div class="collapse navbar-collapse" id="sidebar-menu">
|
|
|
|
<div th:replace="fragments/menu :: menuList(${user.menuList})"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
<!-- Navbar -->
|
|
<header class="navbar navbar-expand-md d-none d-lg-flex d-print-none">
|
|
<div class="container-xl" th:insert="fragments/header">
|
|
|
|
|
|
</div>
|
|
</header>
|
|
<div class="page-wrapper">
|
|
<div class="page-header d-print-none">
|
|
<div class="container-xl">
|
|
<div class="container-xl">
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col">
|
|
<h2 class="page-title" th:text="${user.pageTitle}">
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Page body -->
|
|
<div class="page-body">
|
|
<div class="container-xl">
|
|
<div class="row row-cards">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-header">伤病员后送行动</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">(1)开始前接</h3>
|
|
<div class="mermaid" style="width: 100%;">
|
|
graph LR
|
|
A[伤病员后送行动模型]
|
|
A -->|任务状态 前接伤病员人数| X(( ))
|
|
subgraph 分支 [ ]
|
|
direction LR
|
|
X --> B[医疗队模型]
|
|
X --> C[卫生装备模型]
|
|
end
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">(2)前接中</h3>
|
|
<div class="mermaid">
|
|
flowchart LR
|
|
卫生装备模型 --> |实体属性信息:实体位置, 状态,伤病员人数| 伤病员后送行动模型
|
|
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">(3)前街完成</h3>
|
|
<div class="mermaid">
|
|
flowchart LR
|
|
伤病员后送行动模型 --> |实体属性信息:实体位置, 状态,伤病员人数| 医院模型
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">(4)开始后转</h3>
|
|
<div class="mermaid">
|
|
graph LR
|
|
A[伤病员后送行动模型]
|
|
A -->|任务状态 后转伤病员人数| X(( ))
|
|
subgraph 分支 [ ]
|
|
direction LR
|
|
X --> B[医院模型]
|
|
X --> C[卫生装备模型]
|
|
end
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">(5)后转中</h3>
|
|
<div class="mermaid">
|
|
flowchart LR
|
|
卫生装备模型 --> |实体属性信息:实体位置, 状态,伤病员人数| 伤病员后送行动模型
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">(6)后转完成</h3>
|
|
<div class="mermaid">
|
|
flowchart LR
|
|
伤病员后送行动模型 --> |实体属性信息:实体位置, 状态,伤病员人数| 医院模型
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-header">医疗物资补给行动</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">(1)创建行动</h3>
|
|
<div class="mermaid">
|
|
graph LR
|
|
A[医疗物资补给行动模型]
|
|
A -->|任务状态 医疗物资及数量| X(( ))
|
|
subgraph 分支 [ ]
|
|
direction LR
|
|
X --> B[医院模型]
|
|
X --> D[医疗队模型]
|
|
X --> C[卫生装备模型]
|
|
end
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<h3 class="card-title">(2)输送中</h3>
|
|
<div class="mermaid">
|
|
flowchart LR
|
|
A[医疗物资补给行动模型]
|
|
医疗队模型 --> |位置，实体状态| A
|
|
卫生装备模型 --> |位置，实体状态| A
|
|
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">(3)补给完成</h3>
|
|
<div class="mermaid">
|
|
graph LR
|
|
A[医疗物资补给行动模型]
|
|
A -->|任务状态 医疗物资及数量| X(( ))
|
|
subgraph 分支 [ ]
|
|
direction LR
|
|
|
|
X --> D[医疗队模型]
|
|
X --> C[卫生装备模型]
|
|
end
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="footer footer-transparent d-print-none">
|
|
<div class="container-xl" th:insert="fragments/footer">
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script th:src="@{/js/tabler.min.js}" defer></script>
|
|
<script th:src="@{/js/common/common.js}"></script>
|
|
<script th:src="@{/js/mermaid.min.js}"></script>
|
|
|
|
</body>
|
|
</html>
|
|
<script>
|
|
|
|
mermaid.initialize({ startOnLoad: false });
|
|
|
|
function renderAndShowAll() {
|
|
// 选中所有 mermaid 容器
|
|
const elements = document.querySelectorAll('.mermaid');
|
|
elements.forEach(el => {
|
|
el.style.visibility = 'hidden'; // 先隐藏
|
|
});
|
|
|
|
// 批量渲染所有元素
|
|
mermaid.run().then(() => {
|
|
elements.forEach(el => {
|
|
el.style.visibility = 'visible'; // 渲染完再显示
|
|
});
|
|
});
|
|
}
|
|
window.addEventListener('DOMContentLoaded', renderAndShowAll);
|
|
</script>
|
|
|