193 lines
8.1 KiB
HTML
193 lines
8.1 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">
|
|
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
|
|
A[油料输送行动模型] --> |任务状态 输送油料品类及数量| B(油料保障力量模型)
|
|
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">(3)输送中</h3>
|
|
<div class="mermaid">
|
|
flowchart LR
|
|
A[油料保障力量模型] --> |实体属性信息| B(油料输送行动模型)
|
|
</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>
|
|
</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 --> 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>
|
|
</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>
|
|
|