| | |
| | | <!DOCTYPE html> |
| | | <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> |
| | | <html lang="zh" 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"> |
| | | <th:block th:include="include :: header('AI事件管理')" /> |
| | | <link rel="stylesheet" type="text/css" th:href="@{/ajax/libs/layui-ruoyi/css/layui.css}"/> |
| | | <th:block th:include="include :: header('AI事件管理')"/> |
| | | <link rel="stylesheet" type="text/css" th:href="@{/ajax/libs/layui/css/layui.css}"/> |
| | | <link rel="stylesheet" th:href="@{/security/eventInfo/eventInfo-style.css}"> |
| | | <th:block th:include="include :: select2-css" /> |
| | | </head> |
| | | <body class="gray-bg"> |
| | | <div class="container-div"> |
| | | <div class="row"> |
| | | <div class="col-sm-12 search-collapse"> |
| | | <div class="col-sm-12 search-collapse" |
| | | style="display: flex; justify-content: space-between; align-items: center;"> |
| | | <form id="eventInfo-form"> |
| | | <div class="select-list"> |
| | | <ul> |
| | | <li> |
| | | 所属库区:<input type="text" name="deptId"/> |
| | | 收储公司:<select class="form-control" name="key"> |
| | | <option value="">所有</option> |
| | | <option th:each="company : ${companyList}" th:value="${company.id}" th:text="${company.dwmc}"> |
| | | </option> |
| | | </select> |
| | | </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> |
| | | 所选库区:<select class="form-control" name="deptId"> |
| | | <option value="">所有</option> |
| | | <option th:each="dept : ${deptList}" th:value="${dept.id}" th:text="${dept.kqmc}"> |
| | | </option> |
| | | </select> |
| | | </li> |
| | | <li class="select-time"> |
| | | <label>事件时间: </label> |
| | | <input type="text" class="time-input" style="width: 120px;" id="start" placeholder="开始时间" name="start"/> |
| | | <span>-</span> |
| | | <input type="text" class="time-input" style="width: 120px;" id="end" placeholder="结束时间" name="end"/> |
| | | </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"> |
| | | <i class="fa fa-plus"></i> 事件配置 |
| | | </a> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="col-sm-12 " style="padding-top: 10px;"> |
| | | <div class="col-sm-12 " style="padding-top: 10px;background: #FFFFFF;margin-top: 10px;"> |
| | | <!-- 事件网格 --> |
| | | <div class="gallery-grid" id="gallery-container"> |
| | | <!-- 事件为空时显示 --> |
| | |
| | | <div class="gallery-info"> |
| | | <div class="gallery-header"> |
| | | <h3 class="gallery-title" th:text="${eventInfo.name}"></h3> |
| | | <div class="gallery-tags"> |
| | | <span th:each="tag : ${#strings.arraySplit(eventInfo.tags, ',')}" class="tag-person"> |
| | | <i class="layui-icon layui-icon-note"></i> |
| | | <span th:text="${tag}"></span> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="gallery-meta"> |
| | | <div class="meta-item"> |
| | | <i class="layui-icon layui-icon-home"></i> |
| | | <span th:text="${eventInfo.deptId}"></span> |
| | | <div style="display: flex; align-items: center; gap: 15px;width: 100%"> |
| | | <div class="meta-item" style="width: 50%"> |
| | | <i class="layui-icon layui-icon-video"></i> |
| | | <th:block th:with="matchedCameras=${cameraList.?[id == #root.eventInfo.serId]}"> |
| | | <!-- 如果有匹配项,显示第一个匹配的摄像头名称 --> |
| | | <th:block th:if="${!#lists.isEmpty(matchedCameras)}"> |
| | | <span th:text="${matchedCameras[0].name}"></span> |
| | | </th:block> |
| | | <!-- 如果没有匹配项,显示原始ID --> |
| | | <th:block th:if="${#lists.isEmpty(matchedCameras)}"> |
| | | <span th:text="${eventInfo.serId}"></span> |
| | | </th:block> |
| | | </th:block> |
| | | </div> |
| | | <div class="meta-item" style="width: 50%"> |
| | | <i class="layui-icon layui-icon-date"></i> |
| | | <span th:text="${eventInfo.time != null ? #dates.format(eventInfo.time, 'yyyy-MM-dd HH:mm') : '无时间'}"></span> |
| | | </div> |
| | | </div> |
| | | <div class="meta-item"> |
| | | <i class="layui-icon layui-icon-video"></i> |
| | | <span th:text="${eventInfo.serId}"></span> |
| | | </div> |
| | | <div class="meta-item"> |
| | | <i class="layui-icon layui-icon-date"></i> |
| | | <span th:text="${#dates.format(eventInfo.time, 'yyyy-MM-dd HH:mm:ss')}"></span> |
| | | <i class="layui-icon layui-icon-component"></i> |
| | | <th:block th:with="matchedTypes=${bizTypeList.?[code == #root.eventInfo.bizType]}"> |
| | | <!-- 如果有匹配项,显示第一个匹配的摄像头名称 --> |
| | | <th:block th:if="${!#lists.isEmpty(matchedTypes)}"> |
| | | <span th:text="${matchedTypes[0].msg}"></span> |
| | | </th:block> |
| | | <!-- 如果没有匹配项,显示原始ID --> |
| | | <th:block th:if="${#lists.isEmpty(matchedTypes)}"> |
| | | <span th:text="${eventInfo.bizType}"></span> |
| | | </th:block> |
| | | </th:block> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 标签列表 --> |
| | | <div class="gallery-tags"> |
| | | <span class="tag-person"> |
| | | <i class="layui-icon layui-icon-face-smile"></i> |
| | | <span th:text="${eventInfo.level}"></span> |
| | | </span> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <th:block th:include="include :: footer" /> |
| | | <script th:src="@{/ajax/libs/layui-ruoyi/layui.js}"></script> |
| | | <th:block th:include="include :: footer"/> |
| | | <script th:src="@{/ajax/libs/layui/layui.js}"></script> |
| | | <th:block th:include="include :: select2-js" /> |
| | | <script th:src="@{/security/eventInfo/eventInfo.js}"></script> |
| | | <script th:inline="javascript"> |
| | | var cameraList = [[${cameraList}]]; |
| | | var deptList = [[${deptList}]]; |
| | | var bizTypeList = [[${bizTypeList}]]; |
| | | var companyList = [[${companyList}]]; |
| | | |
| | | var currentPage = [[${currentPage}]]; |
| | | var totalItems = [[${totalItems}]]; |
| | | var pageSize = [[${pageSize}]]; |