You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
244 lines
8.5 KiB
244 lines
8.5 KiB
11 months ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
<title></title>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<link href="index.css" rel="stylesheet" />
|
||
|
|
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
|
||
|
|
<!--<script src="https://webapi.amap.com/maps?v=1.4.15&key=9a8223989b188cb6ef0fb1fde4fd748a"></script>
|
||
|
|
<script src="https://webapi.amap.com/maps?v=1.4.15&key=9a8223989b188cb6ef0fb1fde4fd748a&plugin=AMap.MouseTool,AMap.MarkerClusterer,AMap.ToolBar"></script>-->
|
||
|
|
<script src="https://webapi.amap.com/maps?v=1.4.15&key=55d9d8a1e64f4f968213df505979cc4b"></script>
|
||
|
|
<script src="https://webapi.amap.com/maps?v=1.4.15&key=55d9d8a1e64f4f968213df505979cc4b&plugin=AMap.MouseTool,AMap.MarkerClusterer,AMap.ToolBar"></script>
|
||
|
|
<style type="text/css">
|
||
|
|
#carListDiv, #carTraListDiv {
|
||
|
|
background-color: rgba(12, 70, 100, 0.8);
|
||
|
|
}
|
||
|
|
|
||
|
|
#alarmList, #toolList {
|
||
|
|
background-color: rgba(12, 70, 100, 0.8);
|
||
|
|
}
|
||
|
|
|
||
|
|
.bar input {
|
||
|
|
border: 1px solid #42779d;
|
||
|
|
background-color: #2c597a;
|
||
|
|
border-radius: 2px;
|
||
|
|
color: #e5f4ff;
|
||
|
|
padding-left: 15px;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolModule {
|
||
|
|
border-top: 0.5px solid rgba(66, 119, 146, 0.73);
|
||
|
|
border-left: 0.5px solid rgba(66, 119, 146, 0.73);
|
||
|
|
border-bottom: 0.5px solid rgba(66, 119, 146, 0.73);
|
||
|
|
padding: 10px;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.alarmListTop span {
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
#alarmItem {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
top: 5%;
|
||
|
|
right: 26%;
|
||
|
|
background-color: rgba(12, 70, 100, 0.8);
|
||
|
|
width: 23%;
|
||
|
|
height: 60%;
|
||
|
|
box-shadow: darkgrey 0px 0px 5px 2px;
|
||
|
|
padding: 0.5%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.alarmItemSpanTitle {
|
||
|
|
color: #78a2e2;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-layer {
|
||
|
|
background-color: rgba(12, 70, 100, 0.8) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-layer-content {
|
||
|
|
padding: 5px !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="map"></div>
|
||
|
|
<div id="amapSearchDiv" style="display:none">
|
||
|
|
<div id="amapSearchFrame" class="search bar">
|
||
|
|
<div style="position:relative;width:300px;">
|
||
|
|
<input id="amapSearchVal" class="searchVal" placeholder="请输入搜索内容" name="cname" type="text">
|
||
|
|
<button id="amapSearchBtn" class="searchBtn" type="button"><i class="layui-icon" style="font-size:20px;"></i> 查询</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="amapSearchContent"></div>
|
||
|
|
</div>
|
||
|
|
<div id="cartratoolList" style="display:none">
|
||
|
|
<button id="startAnimation" type="button" class="layui-btn layui-btn-sm">开始</button>
|
||
|
|
<button id="pauseAnimation" type="button" class="layui-btn layui-btn-sm">暂停</button>
|
||
|
|
<button id="resumeAnimation" type="button" class="layui-btn layui-btn-sm">继续</button>
|
||
|
|
<button id="stopAnimation" type="button" class="layui-btn layui-btn-sm">停止</button>
|
||
|
|
<!--<button id="speedAnimation" type="button" class="layui-btn layui-btn-sm">气泡</button>-->
|
||
|
|
</div>
|
||
|
|
<div id="carTraListDiv" style="display:none">
|
||
|
|
<div class="minimize">
|
||
|
|
<img src="img/最小化.png" title="最小化" />
|
||
|
|
</div>
|
||
|
|
<form class="layui-form">
|
||
|
|
<div class="layui-input-inline">
|
||
|
|
<select id="carnum" lay-filter="carnum" lay-search="">
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="layui-inline" style="margin-left:20px">
|
||
|
|
<div class="layui-input-inline">
|
||
|
|
<input id="travelTime" type="text" class="layui-input" placeholder="开始日期 - 结束日期" style="width: 200px !important;" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<table id="carTraList" class="layui-table" lay-skin="line">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>启动时间</th>
|
||
|
|
<th>熄火时间</th>
|
||
|
|
<th>平均速度</th>
|
||
|
|
<th>操作</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="carTraTbody"></tbody>
|
||
|
|
</table>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div id="carListDiv">
|
||
|
|
<div class="minimize">
|
||
|
|
<img src="img/最小化.png" title="最小化" />
|
||
|
|
</div>
|
||
|
|
<div class="search bar">
|
||
|
|
<div style="position:relative;width:300px;">
|
||
|
|
<input id="carListsearchVal" class="searchVal" placeholder="请输入搜索内容" name="cname" type="text">
|
||
|
|
<button id="carListsearchBtn" class="searchBtn" type="button"><i class="layui-icon" style="font-size:20px;"></i> 查询</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<table id="carList" lay-filter="carList"></table>
|
||
|
|
</div>
|
||
|
|
<div id="alarmList">
|
||
|
|
<div class="minimize">
|
||
|
|
<img src="img/最小化.png" title="隐藏" />
|
||
|
|
</div>
|
||
|
|
<div class="alarmListTop">
|
||
|
|
<img src="img/alarmIcon.png" />
|
||
|
|
<span>当天车辆报警信息</span>
|
||
|
|
</div>
|
||
|
|
<table id="alarmTable" class="layui-table" lay-skin="line">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>车牌号码</th>
|
||
|
|
<th>报警时间</th>
|
||
|
|
<th>定位</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="alarmTbody"></tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<!--add20210824 swr-->
|
||
|
|
<div id="alarmItem">
|
||
|
|
<div style="width: 100%;float: left;vertical-align: middle;">
|
||
|
|
<img id="alarmItem_img" style="width: 100%;height:200px" src="../../images/geren.png" />
|
||
|
|
</div>
|
||
|
|
<div style="margin-left: 10px; width: 100%; float: right; height: 85%; color: #fff ">
|
||
|
|
<p style="margin-top: 15px">
|
||
|
|
<span class="alarmItemSpanTitle">车牌号：</span>
|
||
|
|
<span class="text" id="alarmItem_vid"></span>
|
||
|
|
</p>
|
||
|
|
<p style="margin-top: 15px">
|
||
|
|
<span class="alarmItemSpanTitle">报警类型：</span>
|
||
|
|
<span class="text" id="alarmItem_atp"></span>
|
||
|
|
</p>
|
||
|
|
<p style="margin-top: 15px">
|
||
|
|
<span class="alarmItemSpanTitle">报警描述：</span>
|
||
|
|
<span class="text" id="alarmItem_desc"></span>
|
||
|
|
</p>
|
||
|
|
<p style="margin-top: 15px">
|
||
|
|
<span class="alarmItemSpanTitle">报警时间：</span>
|
||
|
|
<span class="text" id="alarmItem_stm"></span>
|
||
|
|
</p>
|
||
|
|
<p style="margin-top: 15px">
|
||
|
|
<span class="alarmItemSpanTitle">处理状态：</span>
|
||
|
|
<span class="text" id="alarmItem_hd"></span>
|
||
|
|
</p>
|
||
|
|
<p style="margin-top: 15px">
|
||
|
|
<span class="alarmItemSpanTitle">处理内容：</span>
|
||
|
|
<span class="text" id="alarmItem_hdc"></span>
|
||
|
|
</p>
|
||
|
|
<p style="margin-top: 15px">
|
||
|
|
<span class="alarmItemSpanTitle">处理时间：</span>
|
||
|
|
<span class="text" id="alarmItem_hdt"></span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="toolList">
|
||
|
|
<div class="toolModule">
|
||
|
|
<img id="measureArea" src="img/is面积.png" title="测面" data-value="0" />
|
||
|
|
</div>
|
||
|
|
<div class="toolModule">
|
||
|
|
<img id="ranging" src="img/is测量.png" title="测距" data-value="0" />
|
||
|
|
</div>
|
||
|
|
<div class="toolModule">
|
||
|
|
<img id="printing" src="img/打印.png" title="打印" />
|
||
|
|
</div>
|
||
|
|
<!--<div class="toolModule">
|
||
|
|
<img id="roam" src="img/漫游.png" title="漫游" />
|
||
|
|
</div>-->
|
||
|
|
<div class="toolModule">
|
||
|
|
<img id="fullScreen" src="img/放大.png" title="全屏" data-value="1" />
|
||
|
|
</div>
|
||
|
|
<div class="toolModule">
|
||
|
|
<img id="tool_search" src="img/is搜索.png" title="POI搜索" data-value="0" />
|
||
|
|
</div>
|
||
|
|
<div class="toolModule">
|
||
|
|
<img id="tool_vehicleList" src="img/车辆列表.png" title="车辆列表" data-value="1" />
|
||
|
|
</div>
|
||
|
|
<div class="toolModule">
|
||
|
|
<img id="tool_alarmList" src="img/报警列表.png" title="报警列表" data-value="1" />
|
||
|
|
</div>
|
||
|
|
<div class="toolModule">
|
||
|
|
<img id="tool_traffic" src="img/is实时路况.png" title="实时路况" data-value="0" />
|
||
|
|
</div>
|
||
|
|
<div class="toolModule" style="border-right: 0.5px solid rgba(202, 201, 201, 0.73);">
|
||
|
|
<img id="tool_pathPlanning" src="img/is路径规划.png" title="路径规划" data-value="0" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript" src="../../layui/layui.js"></script>
|
||
|
|
<script src="../../js/jquery-2.1.3.min.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/jquery.jsonp.js"></script>
|
||
|
|
<script src="ParaDeal.js"></script>
|
||
|
|
<script src="coordinateTransformation.js"></script>
|
||
|
|
<script src="index.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!--定位-->
|
||
|
|
<script type="text/html" id="carLocationBar">
|
||
|
|
<a lay-event="carLocation"><img src="img/carLocation.png" style="width:19px; height:26px; cursor:pointer;" title="定位" /></a>
|
||
|
|
</script>
|
||
|
|
<!--轨迹-->
|
||
|
|
<script type="text/html" id="trajectoryBar">
|
||
|
|
<a lay-event="trajectory"><img src="img/trajectory.png" style="width:26px; height:26px; cursor:pointer;" title="轨迹" /></a>
|
||
|
|
</script>
|
||
|
|
<!--车载视频-->
|
||
|
|
<script type="text/html" id="electronicFenceBar">
|
||
|
|
<!--<a lay-event="electronicFence"><img src="img/electronicFence.png" style="width:26px; height:20px; cursor:pointer;" title="车载视频" /></a>-->
|
||
|
|
<a lay-event="electronicFence"><img src="img/carvideo.png" style="width:26px; height:20px; cursor:pointer;" title="车载视频" /></a>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--报警定位-->
|
||
|
|
<script type="text/html" id="alarmLocationBar">
|
||
|
|
<a lay-event="alarmLocation"><img src="img/carLocation.png" style="width:19px; height:26px; cursor:pointer;" title="定位" /></a>
|
||
|
|
</script>
|
||
|
|
<link rel="stylesheet" href="../../css/right-list.css" media="all" />
|
||
|
|
</body>
|
||
|
|
</html>
|