301 lines
14 KiB
HTML
301 lines
14 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 -->
|
|
<div th:replace="fragments/include :: head_links"></div>
|
|
<style>
|
|
.mermaid { visibility: hidden; }
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page">
|
|
<input type="hidden" id="baseUrl" th:value="@{/}"/>
|
|
<!-- 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">
|
|
<h3 class="card-title">海上运输模型</h3>
|
|
<div class="card-actions">
|
|
<a href="#" class="btn btn-primary" onclick="openDialog('dialog_fuel_action')">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/plus -->
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24" fill="currentColor"
|
|
class="icon icon-tabler icons-tabler-filled icon-tabler-location">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
|
<path d="M20.891 2.006l.106 -.006l.13 .008l.09 .016l.123 .035l.107 .046l.1 .057l.09 .067l.082 .075l.052 .059l.082 .116l.052 .096c.047 .1 .077 .206 .09 .316l.005 .106c0 .075 -.008 .149 -.024 .22l-.035 .123l-6.532 18.077a1.55 1.55 0 0 1 -1.409 .903a1.547 1.547 0 0 1 -1.329 -.747l-.065 -.127l-3.352 -6.702l-6.67 -3.336a1.55 1.55 0 0 1 -.898 -1.259l-.006 -.149c0 -.56 .301 -1.072 .841 -1.37l.14 -.07l18.017 -6.506l.106 -.03l.108 -.018z"/>
|
|
</svg>
|
|
执行
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div class="mermaid">
|
|
flowchart TD
|
|
A@{ shape: circle, label: "开始" } --> B[获取跨海运输投送行动参数]
|
|
B --> C[参数初始化与校验]
|
|
C --> D[生成时间序列]
|
|
D --> E[计算行动路径]
|
|
E --> F[更新位置坐标]
|
|
F --> G{是否到达目的地}
|
|
G --> |否| E
|
|
G --> |是| H[更新保障装备 设施物资数量]
|
|
H --> I[更新跨海运输投送行动状态]
|
|
I --> Z@{shape: dbl-circ, label: "结束"}
|
|
|
|
</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>
|
|
<div class="modal modal-blur fade" id="dialog_fuel_action" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-full-width modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">海上输送行动模型</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeDialog('dialog_fuel_action')"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row g-4">
|
|
<div class="col-4 row-cards">
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">出发港口</div>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div th:replace="fragments/dialog ::from_port_dialog"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">目标港口</div>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div th:replace="fragments/dialog ::to_port_dialog"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">运输投送装备</div>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div th:replace="fragments/dialog ::transportation_dialog"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">装载数量</div>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div th:replace="fragments/dialog ::load_unload_object_dialog"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-4 row-cards">
|
|
<form id="_actionForm">
|
|
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">输入参数信息</div>
|
|
<div class="card-actions">
|
|
<a href="#" class="btn btn-primary" onclick="goAction()">
|
|
提交参数
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div class="mb-3 ">
|
|
<label class="col-6 col-form-label required">行动名称</label>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder=""
|
|
value="海上输送行动"
|
|
name="actionName"
|
|
id="actionName">
|
|
<div class="invalid-feedback" id="actionName_error_tip"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div th:replace="fragments/dialog ::fuel_startTime_dialog"></div>
|
|
<div class="mb-3 ">
|
|
<label class="col-6 col-form-label ">出发地位置</label>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="" value=""
|
|
name="fromLocation"
|
|
id="fromLocation">
|
|
<div class="invalid-feedback" id="fromLocation_error_tip"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3 ">
|
|
<label class="col-6 col-form-label ">目的地位置</label>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="" value=""
|
|
name="toLocation"
|
|
id="toLocation">
|
|
<div class="invalid-feedback" id="toLocation_error_tip"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3 ">
|
|
<label class="col-6 col-form-label ">海况</label>
|
|
<div class="col">
|
|
<select class="form-select" name="condition" id="condition">
|
|
<option value="0">请选择</option>
|
|
<option value="1">0-2(无影响)</option>
|
|
<option value="2">3-4(航行速度降低10%-15%)</option>
|
|
<option value="3">5-6(航行速度降低下降30-50%)</option>
|
|
<option value="4">7-9(紧急避险,滞航)</option>
|
|
</select>
|
|
<div class="invalid-feedback" id="condition_error_tip"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3 ">
|
|
<label class="col-6 col-form-label ">行进速度</label>
|
|
<div class="col">
|
|
<input type="number" class="form-control" placeholder="" value=""
|
|
name="speed"
|
|
id="speed">
|
|
<div class="invalid-feedback" id="speed_error_tip"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3 ">
|
|
<label class="col-6 col-form-label required">计算间隔时间(小时)</label>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="" value="1"
|
|
name="intervalTime" id="intervalTime">
|
|
<div class="invalid-feedback" id="intervalTime_error_tip"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="col-4 row-cards">
|
|
|
|
<div th:replace="fragments/dialog ::timelineDialog"></div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" id="he_post_url" th:value="@{/fuel/mock}">
|
|
<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>
|
|
<script th:src="@{/js/mock.js}"></script>
|
|
</body>
|
|
</html>
|
|
<script>
|
|
|
|
mermaid.initialize({ startOnLoad: false });
|
|
|
|
function renderAndShow() {
|
|
const el = document.querySelector('.mermaid');
|
|
el.style.visibility = 'hidden'; // 先隐藏
|
|
mermaid.run().then(() => {
|
|
el.style.visibility = 'visible'; // 渲染完再显示
|
|
});
|
|
}
|
|
window.addEventListener('DOMContentLoaded', renderAndShow);
|
|
window.addEventListener('DOMContentLoaded', renderAndShow);
|
|
function goAction() {
|
|
const form = document.getElementById('_actionForm'); // 替换成你的表单 ID
|
|
let dataObj = formToObject(form);
|
|
let baseUrl = document.getElementById('baseUrl').value;
|
|
let fromPortInfo = getFromPort();
|
|
let toPortInfo = getToPort();
|
|
let objectList = getLoadUnloadObject();
|
|
let transport = getTransportationEquip();
|
|
dataObj.fromPortInfo = fromPortInfo;
|
|
dataObj.toPortInfo = toPortInfo;
|
|
dataObj.objectList = objectList;
|
|
dataObj.transportInfo = transport;
|
|
mockPost(baseUrl + "mock/transportSea", dataObj, 'transportSea', '_actionForm');
|
|
}
|
|
|
|
|
|
</script>
|
|
|