车闸对接前端，后端未实装
This commit is contained in:
@ -0,0 +1,114 @@
|
|||||||
|
package com.sipai.controller.jsyw;
|
||||||
|
|
||||||
|
import net.sf.json.JSONArray;
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.ui.Model;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RequestParam;
|
||||||
|
import org.springframework.web.servlet.ModelAndView;
|
||||||
|
|
||||||
|
import javax.servlet.http.HttpServletRequest;
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.HashMap;
|
||||||
|
import java.util.List;
|
||||||
|
import java.util.Locale;
|
||||||
|
import java.util.Map;
|
||||||
|
|
||||||
|
@Controller
|
||||||
|
@RequestMapping("/jsyw/vehicleGate")
|
||||||
|
public class VehicleGateController {
|
||||||
|
|
||||||
|
@RequestMapping("/showList.do")
|
||||||
|
public String showList(HttpServletRequest request, Model model) {
|
||||||
|
return "/jsyw/vehicleGateList";
|
||||||
|
}
|
||||||
|
|
||||||
|
@RequestMapping("/getList.do")
|
||||||
|
public ModelAndView getList(HttpServletRequest request, Model model,
|
||||||
|
@RequestParam(value = "page", required = false, defaultValue = "1") Integer page,
|
||||||
|
@RequestParam(value = "rows", required = false, defaultValue = "10") Integer rows) {
|
||||||
|
String plateNo = safeStr(request.getParameter("plateNo")).toUpperCase(Locale.ROOT);
|
||||||
|
String passDate = safeStr(request.getParameter("passDate"));
|
||||||
|
String direction = safeStr(request.getParameter("direction"));
|
||||||
|
String status = safeStr(request.getParameter("status"));
|
||||||
|
|
||||||
|
List<Map<String, Object>> mockRows = buildMockRows();
|
||||||
|
List<Map<String, Object>> filteredRows = new ArrayList<Map<String, Object>>();
|
||||||
|
int inCount = 0;
|
||||||
|
int outCount = 0;
|
||||||
|
int abnormalCount = 0;
|
||||||
|
|
||||||
|
for (Map<String, Object> item : mockRows) {
|
||||||
|
String itemPlateNo = safeStr(item.get("plateNo")).toUpperCase(Locale.ROOT);
|
||||||
|
String itemPassTime = safeStr(item.get("passTime"));
|
||||||
|
String itemDirection = safeStr(item.get("direction"));
|
||||||
|
String itemStatus = safeStr(item.get("status"));
|
||||||
|
|
||||||
|
boolean matchPlate = plateNo.isEmpty() || itemPlateNo.contains(plateNo);
|
||||||
|
boolean matchDate = passDate.isEmpty() || itemPassTime.startsWith(passDate);
|
||||||
|
boolean matchDirection = direction.isEmpty() || direction.equals(itemDirection);
|
||||||
|
boolean matchStatus = status.isEmpty() || status.equals(itemStatus);
|
||||||
|
if (matchPlate && matchDate && matchDirection && matchStatus) {
|
||||||
|
filteredRows.add(item);
|
||||||
|
if ("IN".equals(itemDirection)) {
|
||||||
|
inCount++;
|
||||||
|
} else if ("OUT".equals(itemDirection)) {
|
||||||
|
outCount++;
|
||||||
|
}
|
||||||
|
if ("ABNORMAL".equals(itemStatus)) {
|
||||||
|
abnormalCount++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
int total = filteredRows.size();
|
||||||
|
int pageStart = Math.max((page - 1) * rows, 0);
|
||||||
|
int pageEnd = Math.min(pageStart + rows, total);
|
||||||
|
List<Map<String, Object>> pageRows = new ArrayList<Map<String, Object>>();
|
||||||
|
if (pageStart < pageEnd) {
|
||||||
|
pageRows = filteredRows.subList(pageStart, pageEnd);
|
||||||
|
}
|
||||||
|
|
||||||
|
JSONArray rowsJson = JSONArray.fromObject(pageRows);
|
||||||
|
String result = "{"
|
||||||
|
+ "\"total\":" + total + ","
|
||||||
|
+ "\"rows\":" + rowsJson + ","
|
||||||
|
+ "\"summaryInCount\":" + inCount + ","
|
||||||
|
+ "\"summaryOutCount\":" + outCount + ","
|
||||||
|
+ "\"summaryInsideCount\":" + (inCount - outCount) + ","
|
||||||
|
+ "\"summaryAbnormalCount\":" + abnormalCount
|
||||||
|
+ "}";
|
||||||
|
model.addAttribute("result", result);
|
||||||
|
return new ModelAndView("result");
|
||||||
|
}
|
||||||
|
|
||||||
|
private String safeStr(Object value) {
|
||||||
|
return value == null ? "" : String.valueOf(value).trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
private List<Map<String, Object>> buildMockRows() {
|
||||||
|
List<Map<String, Object>> rows = new ArrayList<Map<String, Object>>();
|
||||||
|
rows.add(buildRow("鲁A12345", "IN", "2026-03-03 08:12:21", "东门1号闸", "张三", "NORMAL", "自动识别放行"));
|
||||||
|
rows.add(buildRow("鲁B66K88", "OUT", "2026-03-03 08:18:46", "东门1号闸", "李四", "NORMAL", "自动识别放行"));
|
||||||
|
rows.add(buildRow("鲁C99871", "IN", "2026-03-03 08:27:19", "南门2号闸", "王五", "ABNORMAL", "车牌识别异常，人工放行"));
|
||||||
|
rows.add(buildRow("鲁A77889", "IN", "2026-03-03 09:04:52", "北门1号闸", "赵六", "NORMAL", "自动识别放行"));
|
||||||
|
rows.add(buildRow("鲁D22319", "OUT", "2026-03-03 09:19:11", "南门2号闸", "钱七", "NORMAL", "自动识别放行"));
|
||||||
|
rows.add(buildRow("鲁E55120", "IN", "2026-03-03 10:03:35", "西门1号闸", "孙八", "NORMAL", "访客车辆"));
|
||||||
|
rows.add(buildRow("鲁F90111", "OUT", "2026-03-03 10:16:05", "北门1号闸", "周九", "ABNORMAL", "未登记离场，值班确认"));
|
||||||
|
rows.add(buildRow("鲁A0P365", "IN", "2026-03-03 10:42:30", "东门1号闸", "吴十", "NORMAL", "自动识别放行"));
|
||||||
|
return rows;
|
||||||
|
}
|
||||||
|
|
||||||
|
private Map<String, Object> buildRow(String plateNo, String direction, String passTime, String gateName,
|
||||||
|
String driverName, String status, String note) {
|
||||||
|
Map<String, Object> row = new HashMap<String, Object>();
|
||||||
|
row.put("plateNo", plateNo);
|
||||||
|
row.put("direction", direction);
|
||||||
|
row.put("passTime", passTime);
|
||||||
|
row.put("gateName", gateName);
|
||||||
|
row.put("driverName", driverName);
|
||||||
|
row.put("status", status);
|
||||||
|
row.put("note", note);
|
||||||
|
return row;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -2,8 +2,8 @@ es.nodes=127.0.0.1
|
|||||||
#es.nodes=122.51.194.184
|
#es.nodes=122.51.194.184
|
||||||
es.host=9300
|
es.host=9300
|
||||||
#es.name=elastic
|
#es.name=elastic
|
||||||
es.name=my-application
|
#es.name=elasticsearch
|
||||||
#es.name=elasticsearch-sipaiis
|
#es.name=elasticsearch-sipaiis
|
||||||
|
es.name=my-application
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
39
src/main/webapp/CSS/module/jsyw-vehicle-gate.css
Normal file
39
src/main/webapp/CSS/module/jsyw-vehicle-gate.css
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
.gate-summary-row .small-box {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gate-summary-row .small-box .icon {
|
||||||
|
top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gate-search-line {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gate-input {
|
||||||
|
width: 170px;
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gate-detail-line {
|
||||||
|
line-height: 28px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gate-detail-line span:first-child {
|
||||||
|
color: #666;
|
||||||
|
display: inline-block;
|
||||||
|
width: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gate-photo-placeholder {
|
||||||
|
margin-top: 12px;
|
||||||
|
border: 1px dashed #d2d6de;
|
||||||
|
background: #fafafa;
|
||||||
|
color: #999;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 120px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
161
src/main/webapp/JS/jsyw/vehicleGateList.js
Normal file
161
src/main/webapp/JS/jsyw/vehicleGateList.js
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
function getDirectionText(direction) {
|
||||||
|
return direction === "IN" ? "进闸" : "出闸";
|
||||||
|
}
|
||||||
|
|
||||||
|
function getStatusText(status) {
|
||||||
|
return status === "ABNORMAL" ? "异常" : "正常";
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDirectionLabel(direction) {
|
||||||
|
if (direction === "IN") {
|
||||||
|
return "<span class='label label-success'>进闸</span>";
|
||||||
|
}
|
||||||
|
return "<span class='label label-info'>出闸</span>";
|
||||||
|
}
|
||||||
|
|
||||||
|
function getStatusLabel(status) {
|
||||||
|
if (status === "ABNORMAL") {
|
||||||
|
return "<span class='label label-danger'>异常</span>";
|
||||||
|
}
|
||||||
|
return "<span class='label label-primary'>正常</span>";
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderSummaryByResponse(res) {
|
||||||
|
$("#summaryInCount").text(res.summaryInCount || 0);
|
||||||
|
$("#summaryOutCount").text(res.summaryOutCount || 0);
|
||||||
|
$("#summaryInsideCount").text(res.summaryInsideCount || 0);
|
||||||
|
$("#summaryAbnormalCount").text(res.summaryAbnormalCount || 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initGateTable() {
|
||||||
|
$("#gateTable").bootstrapTable({
|
||||||
|
url: ext.contextPath + "/jsyw/vehicleGate/getList.do",
|
||||||
|
method: "post",
|
||||||
|
cache: false,
|
||||||
|
striped: true,
|
||||||
|
pagination: true,
|
||||||
|
pageList: [10, 20, 50],
|
||||||
|
pageSize: 10,
|
||||||
|
pageNumber: 1,
|
||||||
|
sidePagination: "server",
|
||||||
|
queryParams: function (params) {
|
||||||
|
return {
|
||||||
|
rows: params.limit,
|
||||||
|
page: params.offset / params.limit + 1,
|
||||||
|
sort: params.sort,
|
||||||
|
order: params.order,
|
||||||
|
plateNo: $.trim($("#search_plateNo").val()),
|
||||||
|
passDate: $.trim($("#search_passDate").val()),
|
||||||
|
direction: $("#search_direction").val(),
|
||||||
|
status: $("#search_status").val()
|
||||||
|
};
|
||||||
|
},
|
||||||
|
responseHandler: function (res) {
|
||||||
|
renderSummaryByResponse(res || {});
|
||||||
|
return {
|
||||||
|
total: (res && res.total) ? res.total : 0,
|
||||||
|
rows: (res && res.rows) ? res.rows : []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
field: "plateNo",
|
||||||
|
title: "车牌号",
|
||||||
|
align: "center",
|
||||||
|
valign: "middle"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "direction",
|
||||||
|
title: "通行方向",
|
||||||
|
align: "center",
|
||||||
|
valign: "middle",
|
||||||
|
formatter: function (value) {
|
||||||
|
return getDirectionLabel(value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "passTime",
|
||||||
|
title: "通行时间",
|
||||||
|
align: "center",
|
||||||
|
valign: "middle"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "gateName",
|
||||||
|
title: "闸机",
|
||||||
|
align: "center",
|
||||||
|
valign: "middle"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "driverName",
|
||||||
|
title: "司机",
|
||||||
|
align: "center",
|
||||||
|
valign: "middle"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "status",
|
||||||
|
title: "状态",
|
||||||
|
align: "center",
|
||||||
|
valign: "middle",
|
||||||
|
formatter: function (value) {
|
||||||
|
return getStatusLabel(value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "note",
|
||||||
|
title: "备注",
|
||||||
|
align: "center",
|
||||||
|
valign: "middle"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
align: "center",
|
||||||
|
valign: "middle",
|
||||||
|
width: 100,
|
||||||
|
formatter: function (value, row, index) {
|
||||||
|
return "<button class='btn btn-default btn-sm' onclick='showGateDetail(" + index + ")'><i class='fa fa-eye'></i> 查看</button>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
onLoadSuccess: function () {
|
||||||
|
adjustBootstrapTableView("gateTable");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function searchGateRecords() {
|
||||||
|
$("#gateTable").bootstrapTable("refresh", {pageNumber: 1});
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetGateSearch() {
|
||||||
|
$("#search_plateNo").val("");
|
||||||
|
$("#search_passDate").val("");
|
||||||
|
$("#search_direction").val("");
|
||||||
|
$("#search_status").val("");
|
||||||
|
$("#gateTable").bootstrapTable("refresh", {pageNumber: 1});
|
||||||
|
}
|
||||||
|
|
||||||
|
function showGateDetail(index) {
|
||||||
|
var pageRows = $("#gateTable").bootstrapTable("getData") || [];
|
||||||
|
var row = pageRows[index];
|
||||||
|
if (!row) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$("#detail_plateNo").text(row.plateNo || "");
|
||||||
|
$("#detail_direction").text(getDirectionText(row.direction || ""));
|
||||||
|
$("#detail_passTime").text(row.passTime || "");
|
||||||
|
$("#detail_gateName").text(row.gateName || "");
|
||||||
|
$("#detail_driverName").text(row.driverName || "");
|
||||||
|
$("#detail_status").text(getStatusText(row.status || ""));
|
||||||
|
$("#detail_note").text(row.note || "");
|
||||||
|
$("#gateDetailModal").modal("show");
|
||||||
|
}
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
$("#search_passDate").datepicker({
|
||||||
|
autoclose: true,
|
||||||
|
language: "zh-CN",
|
||||||
|
format: "yyyy-mm-dd"
|
||||||
|
});
|
||||||
|
initGateTable();
|
||||||
|
});
|
||||||
|
|
||||||
122
src/main/webapp/jsp/jsyw/vehicleGateList.jsp
Normal file
122
src/main/webapp/jsp/jsyw/vehicleGateList.jsp
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
<%@ page language="java" pageEncoding="UTF-8" %>
|
||||||
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
||||||
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
||||||
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
||||||
|
<%@ page import="com.sipai.entity.base.ServerObject" %>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<head>
|
||||||
|
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||||
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||||
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/CSS/module/jsyw-vehicle-gate.css">
|
||||||
|
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/jsyw/vehicleGateList.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="content-wrapper">
|
||||||
|
<section class="content-header">
|
||||||
|
<h1 id="head_title"></h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li><a id="head_firstlevel" href="#"><i class="fa fa-dashboard"></i></a></li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
<section class="content container-fluid">
|
||||||
|
<div id="mainAlertdiv"></div>
|
||||||
|
|
||||||
|
<div class="row gate-summary-row">
|
||||||
|
<div class="col-sm-3 col-xs-6">
|
||||||
|
<div class="small-box bg-aqua">
|
||||||
|
<div class="inner">
|
||||||
|
<h3 id="summaryInCount">0</h3>
|
||||||
|
<p>今日进闸</p>
|
||||||
|
</div>
|
||||||
|
<div class="icon"><i class="fa fa-sign-in"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-3 col-xs-6">
|
||||||
|
<div class="small-box bg-green">
|
||||||
|
<div class="inner">
|
||||||
|
<h3 id="summaryOutCount">0</h3>
|
||||||
|
<p>今日出闸</p>
|
||||||
|
</div>
|
||||||
|
<div class="icon"><i class="fa fa-sign-out"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-3 col-xs-6">
|
||||||
|
<div class="small-box bg-yellow">
|
||||||
|
<div class="inner">
|
||||||
|
<h3 id="summaryInsideCount">0</h3>
|
||||||
|
<p>当前场内车辆</p>
|
||||||
|
</div>
|
||||||
|
<div class="icon"><i class="fa fa-car"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-3 col-xs-6">
|
||||||
|
<div class="small-box bg-red">
|
||||||
|
<div class="inner">
|
||||||
|
<h3 id="summaryAbnormalCount">0</h3>
|
||||||
|
<p>异常记录</p>
|
||||||
|
</div>
|
||||||
|
<div class="icon"><i class="fa fa-warning"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box box-primary">
|
||||||
|
<div class="box-header with-border">
|
||||||
|
<h3 class="box-title">车辆通行记录（静态展示）</h3>
|
||||||
|
</div>
|
||||||
|
<div class="box-body">
|
||||||
|
<form id="searchForm" onsubmit="return false;">
|
||||||
|
<div class="form-group form-inline gate-search-line">
|
||||||
|
<input type="text" class="form-control input-sm gate-input" id="search_plateNo" placeholder="车牌号">
|
||||||
|
<input type="text" class="form-control input-sm gate-input" id="search_passDate" placeholder="通行日期(yyyy-mm-dd)">
|
||||||
|
<select class="form-control input-sm gate-input" id="search_direction">
|
||||||
|
<option value="">通行方向(全部)</option>
|
||||||
|
<option value="IN">进闸</option>
|
||||||
|
<option value="OUT">出闸</option>
|
||||||
|
</select>
|
||||||
|
<select class="form-control input-sm gate-input" id="search_status">
|
||||||
|
<option value="">状态(全部)</option>
|
||||||
|
<option value="NORMAL">正常</option>
|
||||||
|
<option value="ABNORMAL">异常</option>
|
||||||
|
</select>
|
||||||
|
<button type="button" class="btn btn-primary btn-sm" onclick="searchGateRecords()"><i class="fa fa-search"></i> 查询</button>
|
||||||
|
<button type="button" class="btn btn-default btn-sm" onclick="resetGateSearch()"><i class="fa fa-refresh"></i> 重置</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<table id="gateTable"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal fade" id="gateDetailModal">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
<h4 class="modal-title">车辆通行详情</h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="gate-detail-line"><span>车牌号：</span><strong id="detail_plateNo"></strong></div>
|
||||||
|
<div class="gate-detail-line"><span>通行方向：</span><span id="detail_direction"></span></div>
|
||||||
|
<div class="gate-detail-line"><span>通行时间：</span><span id="detail_passTime"></span></div>
|
||||||
|
<div class="gate-detail-line"><span>闸机：</span><span id="detail_gateName"></span></div>
|
||||||
|
<div class="gate-detail-line"><span>司机：</span><span id="detail_driverName"></span></div>
|
||||||
|
<div class="gate-detail-line"><span>状态：</span><span id="detail_status"></span></div>
|
||||||
|
<div class="gate-detail-line"><span>备注：</span><span id="detail_note"></span></div>
|
||||||
|
<div class="gate-photo-placeholder">抓拍图占位（静态版）</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
Reference in New Issue
Block a user