很久没有写原生项目了,因为是个两个需求的小项目,就写了原生,也顺便回顾一下。
代码全都贴在下面了,有需要的可以参考一下,或者欢迎给我提建议吖~
效果图:
表格页是动态获取数据进行填充的,原生没有vue的v-for之类的,所以渲染表格会稍微麻烦一点
点击查看详情,筛选时间查看行车轨迹,轨迹是由经纬度坐标点组成的
目录
代码如下
home.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/base.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>终端坐标点查询</title>
<style>
body {
background: url(./images//bg-1.jpg) no-repeat;
background-position: center top;
background-size: 100% 100%;
overflow: hidden;
width: 100%;
height: 800px;
}
td {
vertical-align: middle;
}
th {
vertical-align: middle !important;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#box {
width: 100%;
height: 100%;
margin-top: 100px;
/* background-color: red; */
}
</style>
<script>
function click() {
var deviceId = document.getElementById("deviceId").value;
localStorage.setItem("deviceId", deviceId);
}
</script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="box">
<!-- <table>
<th>车牌颜色</th>
<th>车牌号码</th>
<th>终端号</th>
<th>操作</th>
<tr for="item in dataArr" :key="item.deviceId">
<td>{
{
item.vehicleColor}}</td>
<td>{
{
item.vehicleId}}</td>
<td>{
{
item.deviceId}}</td>
<td><a href="#">查看详情</a></td>
</tr>
</table> -->
</div>
</div>
<script>
const dataArr = []
$.ajax({
url: 'http://103.12.234.206:8083/api/geoa/listVehicle',
type: 'post',
contentType: "application/json; charset=utf-8",
dataType: 'json',
// data: JSON.stringify(data),
success: function (data) {
console.log(this, 'this')
this.dataArr = data.data
var headDatas = ['车牌颜色', '车牌号码', '终端号', '操作'];
var<