<!DOCTYPE html>
|
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<meta charset="UTF-8">
|
<title>巡检轨迹展示</title>
|
<!-- Layui CSS（用于基础样式） -->
|
<th:block th:include="include :: header('巡更记录')"/>
|
<link rel="stylesheet" type="text/css" th:href="@{/ajax/libs/layui-ruoyi/css/layui.css}"/>
|
<link rel="stylesheet" th:href="@{/security/patrol/patrolRecord-style.css}">
|
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=R3FfyIEbBAWNckTqRSopHQktdkgp924F"></script>
|
</head>
|
<body>
|
<div class="container-div">
|
<div class="row">
|
<!-- 百度地图容器 -->
|
<div id="map"></div>
|
<!-- 右侧轨迹卡片悬浮层 -->
|
<div class="track-card-panel">
|
<div class="panel-title">
|
巡检轨迹点
|
<span class="count" th:text="'共 ' + ${#lists.size(patrolRecordList)} + ' 个点位'"></span>
|
</div>
|
<!-- 轨迹卡片列表（Thymeleaf循环渲染） -->
|
<div th:each="record,stat : ${patrolRecordList}" class="track-card" data-index="${stat.index}">
|
<div class="card-row">
|
<span class="label">序号：</span>
|
<span class="value" th:text="${stat.index + 1}"></span>
|
</div>
|
<div class="card-row">
|
<span class="label">点位名称：</span>
|
<span class="value" th:text="${record.pointName}"></span>
|
</div>
|
<div class="card-row">
|
<span class="label">巡检人：</span>
|
<span class="value" th:text="${record.createBy}"></span>
|
</div>
|
<div class="card-row">
|
<span class="label">巡检时间：</span>
|
<span class="value" th:text="${#dates.format(record.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
|
</div>
|
<div class="card-row">
|
<span class="label">经纬度：</span>
|
<span class="value" th:text="${record.latitude} + ', ' + ${record.longitude}"></span>
|
</div>
|
<div class="card-row">
|
<span class="label">轨迹点ID：</span>
|
<span class="value" th:text="${record.id}"></span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
|
|
<!-- 引入Layui JS -->
|
<th:block th:include="include :: footer"/>
|
<script th:src="@{/ajax/libs/layui-ruoyi/layui.js}"></script>
|
<script th:src="@{/security/patrol/patrolRecord.js}"></script>
|
<script th:inline="javascript">
|
var patrolRecordList = [[${patrolRecordList}]];
|
</script>
|
</body>
|
</html>
|
