283 lines
12 KiB
HTML
283 lines
12 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[计算卸载时间]
|
|
H --> |装载| J[计算装载时间]
|
|
|
|
I --> K[按时间间隔更新装备及设施物资数量]
|
|
J --> L[按时间间隔更新装备及设施物资数量]
|
|
|
|
K --> M{是否完成卸载行动}
|
|
L --> N{是否完成装载行动}
|
|
|
|
M --> |否| K
|
|
N --> |否| L
|
|
|
|
M -->|是| O[更新行动状态]
|
|
N --> |是| O
|
|
|
|
O --> P@{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 ::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-3 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-3 ">
|
|
<label class="col-6 col-form-label required">行动类型</label>
|
|
<div class="col">
|
|
<select class="form-select" id="actionType" name="actionType" onchange="setLoadMethod(this.value)">
|
|
<option value="1">抵滩装载</option>
|
|
<option value="2">锚泊装载</option>
|
|
<option value="3">码头装载</option>
|
|
</select>
|
|
<div class="invalid-feedback" id="actionType_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">
|
|
<select name="loadType" class="form-select" id="loadType">
|
|
<option value="1">滚装</option>
|
|
<option value="2">吊装</option>
|
|
</select>
|
|
<div class="invalid-feedback" id="worker_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-5 row-cards">
|
|
|
|
<div th:replace="fragments/dialog ::timelineDialog"></div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</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>
|
|
<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);
|
|
|
|
function goAction() {
|
|
let transportIdInfo = getTransportationEquip();
|
|
let objectList = getLoadUnloadObject();
|
|
const form = document.getElementById('_actionForm'); // 替换成你的表单 ID
|
|
let dataObj = formToObject(form);
|
|
dataObj.objectList = objectList;
|
|
dataObj.transportIdInfo = transportIdInfo;
|
|
let baseUrl = document.getElementById('baseUrl').value;
|
|
mockPost(baseUrl + "mock/load", dataObj, 'load', '_actionForm');
|
|
}
|
|
function setLoadMethod(value) {
|
|
|
|
if(value==='2'||value==='3'){
|
|
document.getElementById('loadType').value = '2';
|
|
}else{
|
|
document.getElementById('loadType').value = '1';
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|