车闸对接前端，后端未实装
This commit is contained in:
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