fzzy-igdss.git - Gitblit

			@@ -1,132 +1,64 @@
			<!DOCTYPE html>
			<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
			<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			<meta name="renderer" content="webkit">
			<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 class="gray-bg">
			<body>
			<div class="container-div">
			<div class="row">
			<div class="col-sm-12 search-collapse"
			style="display: flex; justify-content: space-between; align-items: center;">
			<form id="patrolRecord-form">
			<div class="select-list">
			<ul>
			<li>
			巡更点：<input type="text" name="name"/>
			</li>
			<li>
			<a class="btn btn-primary btn-rounded btn-sm" onclick="searchRecord()"><i
			class="fa fa-search"></i> 搜索</a>
			<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
			class="fa fa-refresh"></i> 重置</a>
			</li>
			</ul>
			</div>
			</form>
			<div class="btn-group-sm" role="group">
			<!-- 如果需要添加按钮可以放在这里 -->
			<a class="btn btn-success" onclick="openTrajectoryMap()" >
			<i class="fa fa-search"></i> 轨迹图查看
			</a>
			<!-- 百度地图容器 -->
			<div id="map"></div>
			<!-- 右侧轨迹卡片悬浮层 -->
			<div class="track-card-panel">
			<div class="panel-title">
			巡检轨迹点
			<span class="count" th:text="'共 ' + ${#lists.size(patrolRecordList)} + ' 个点位'"></span>
			</div>
			</div>


			<div class="col-sm-12 " style="padding-top: 10px;">
			<!-- 巡检记录网格 -->
			<div class="gallery-grid" id="gallery-container">
			<!-- 记录为空时显示 -->
			<div th:if="${#lists.isEmpty(patrolRecordList)}" class="empty-state">
			<i class="fa-solid fa-clipboard-list"></i>
			<h3>暂无巡检记录</h3>
			<p>当前没有可展示的巡检记录数据</p>
			<!-- 轨迹卡片列表（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 th:each="patrolRecord : ${patrolRecordList}" class="gallery-item">
			<img th:src="${patrolRecord.imgName ?: '/logo-sm.png'}" th:alt="${patrolRecord.id}"
			th:data-url="${patrolRecord.imgName ?: '/logo-sm.png'}" th:data-id="${patrolRecord.id}"
			class="gallery-img" onclick="showPatrolRecordPreview(this.getAttribute('data-url'))">
			<div class="gallery-info">
			<div class="gallery-header">
			<h3 class="gallery-title" th:text="${patrolRecord.pointName ?: patrolRecord.id}"></h3>
			<!-- 标签列表 -->
			<!-- <div class="gallery-tags">-->
			<!-- <span class="tag-person">-->
			<!-- <i class="layui-icon layui-icon-user"></i>-->
			<!-- <span th:text="'未知'"></span>-->
			<!-- </span>-->
			<!-- </div>-->
			</div>

			<div class="gallery-meta">
			<div style="display: flex; align-items: center; gap: 15px;width: 100%">
			<div class="meta-item" style="width: 50%">
			<i class="layui-icon layui-icon-location"></i>
			<span th:text="${patrolRecord.longitude ?: ''}"></span>
			</div>
			<div class="meta-item" style="width: 50%">
			<i class="layui-icon layui-icon-location"></i>
			<span th:text="${patrolRecord.latitude ?: ''}"></span>
			</div>
			</div>
			<div class="meta-item" >
			<i class="layui-icon layui-icon-date"></i>
			<span th:text="${#dates.format(patrolRecord.createTime, 'yyyy-MM-dd HH:mm')}"></span>
			</div>
			</div>
			</div>
			<div class="card-row">
			<span class="label">点位名称：</span>
			<span class="value" th:text="${record.pointName}"></span>
			</div>
			</div>

			<!-- 分页控件 -->
			<div class="pagination-container" th:if="${not #lists.isEmpty(patrolRecordList)}">
			<div id="pagination"></div>
			</div>

			</div>
			</div>
			<!-- 图片预览层 -->
			<div class="img-preview" id="imgPreview">
			<div class="preview-content">
			<img src="" alt="预览图片" class="preview-img" id="previewImg">
			<div class="close-preview" id="closePreview">
			<i class="layui-icon layui-icon-clear"></i>
			<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 prefix = ctx + "security/patrol/patrolRecord";

			var currentPage = [[${currentPage}]];
			var totalItems = [[${totalItems}]];
			var pageSize = [[${pageSize}]];
			var patrolId = [[${patrolId}]];

			function openTrajectoryMap() {
			var url = prefix + '/trajectoryMap/'+patrolId ;
			var options = {
			title: "轨迹图",
			width: 500,
			height: 500,
			url: url,
			btn: 0,
			yes: function (index, layero) {
			$.modal.close(index);
			}
			};
			$.modal.openOptions(options);
			}
			<script th:inline="javascript">
			var patrolRecordList = [[${patrolRecordList}]];
			</script>

			</body>
			</html>
			</html>