321 lines
15 KiB
HTML
321 lines
15 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">
|
|
<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
|
|
start[开始] --> getParams[获取油料补充行动参数]
|
|
|
|
getParams --> paramsInit[参数初始化与校验]
|
|
|
|
paramsInit --> generationTimeSeq[生成时间序列]
|
|
|
|
generationTimeSeq --> calculatePath[计算行动路径]
|
|
|
|
calculatePath --> updateLocation[更新位置坐标]
|
|
|
|
updateLocation --> isArriveAt{是否达到目的地 ?}
|
|
|
|
isArriveAt --> |YES| judgeActionType{判断行动类型}
|
|
|
|
isArriveAt --> |NO| calculatePath
|
|
|
|
judgeActionType --> |输送,去往需求地| update_fuel_num_send[更新输送设备，油量数量]
|
|
judgeActionType --> |取油,去往供应地| update_fuel_num_back[更新输送设备，油量数量]
|
|
|
|
update_fuel_num_send & update_fuel_num_back --> lastUpdateStatus[更新油料输送行动状态]
|
|
lastUpdateStatus --> calculateAddTime[计算加注时间]
|
|
|
|
calculateAddTime --> byTimeInterval[按照时间间隔更新补给装备和储备设施油料数量]
|
|
|
|
byTimeInterval --> isFinished{判断是否完成油料加注}
|
|
|
|
isFinished --> |是| updateActStatusFinally[更新行动状态] -->结束
|
|
isFinished --> |否| byTimeInterval
|
|
</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 ::fuel_equip_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_fuel_equip_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 ::fuel_type_List_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 class="mb-4 ">
|
|
<label class="col-6 col-form-label required">补给方式</label>
|
|
<div class="col">
|
|
<select class="form-select" name="supplyType" id="supplyType">
|
|
<option value="">选择</option>
|
|
<option value="station" selected>靠泊码头补给</option>
|
|
<option value="space">海上伴随补给</option>
|
|
|
|
</select>
|
|
<div class="invalid-feedback" id="supplyType_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 required">出发地位置</label>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="" value="127.7700,26.3400"
|
|
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 required">目的地位置</label>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="" value="127.0500,37.0600"
|
|
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 required">补给装备行进速度</label>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder=""
|
|
value="40"
|
|
name="supplySpeed" id="supplySpeed">
|
|
<div class="invalid-feedback" id="supplySpeed_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="20"
|
|
name="supplyPump" id="supplyPump">
|
|
<div class="invalid-feedback" id="supplyPump_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'; // 渲染完再显示
|
|
});
|
|
}
|
|
function goAction() {
|
|
let fromEquipIdInfo = getEquipInfo();
|
|
let toEquipIdInfo = getToEquipInfo();
|
|
let requestCountList = getSelectFuelItem();
|
|
const form = document.getElementById('_actionForm'); // 替换成你的表单 ID
|
|
let dataObj = formToObject(form);
|
|
dataObj.fromEquipIdInfo = fromEquipIdInfo;
|
|
dataObj.toEquipIdInfo = toEquipIdInfo;
|
|
dataObj.requestCountList = requestCountList;
|
|
let baseUrl = document.getElementById('baseUrl').value;
|
|
mockPost(baseUrl + "mock/boat", dataObj, 'boat', '_actionForm');
|
|
}
|
|
|
|
|
|
window.addEventListener('DOMContentLoaded', renderAndShow);
|
|
</script>
|
|
|