|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>监控</title>
|
|
|
|
|
<link rel="stylesheet" href="./css/monitor.css">
|
|
|
|
|
<script src="./js/jquery-3.7.1.min.js"></script>
|
|
|
|
|
<script src="./js/Sortable.min.js"></script>
|
|
|
|
|
<script src="./js/monitor.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="monitor">
|
|
|
|
|
<section class="top">
|
|
|
|
|
<div id="top1">
|
|
|
|
|
<div data-id="car1" class="carInfo">
|
|
|
|
|
<img src="./images/car1.png" alt="">
|
|
|
|
|
<span>XG031</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div data-id="car2" class="carInfo">
|
|
|
|
|
<img src="./images/car2.png" alt="">
|
|
|
|
|
<span>XG032</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div data-id="car3" class="carInfo">
|
|
|
|
|
<img src="./images/car3.png" alt="">
|
|
|
|
|
<span>XG033</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div data-id="car4" class="carInfo">
|
|
|
|
|
<img src="./images/car4.png" alt="">
|
|
|
|
|
<span>XG034</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div data-id="car5" class="carInfo">
|
|
|
|
|
<img src="./images/car5.png" alt="">
|
|
|
|
|
<span>XG035</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div data-id="car6" class="carInfo">
|
|
|
|
|
<img src="./images/car6.png" alt="">
|
|
|
|
|
<span>XG036</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div data-id="car7" class="carInfo">
|
|
|
|
|
<img src="./images/car6.png" alt="">
|
|
|
|
|
<span>XG037</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div data-id="empty1" class="empty"></div>
|
|
|
|
|
<div data-id="empty2" class="empty"></div>
|
|
|
|
|
<div data-id="empty3" class="empty"></div>
|
|
|
|
|
<div data-id="empty4" class="empty"></div>
|
|
|
|
|
<div data-id="empty5" class="empty"></div>
|
|
|
|
|
<div data-id="empty6" class="empty"></div>
|
|
|
|
|
<div data-id="empty7" class="empty"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="order">
|
|
|
|
|
<div class="orderItem">
|
|
|
|
|
<span>2.5</span>
|
|
|
|
|
<img src="./images/jiantou.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="orderItem">
|
|
|
|
|
<span>3.1</span>
|
|
|
|
|
<img src="./images/jiantou.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="orderItem">
|
|
|
|
|
<span>2.6</span>
|
|
|
|
|
<img src="./images/jiantou.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="orderItem">
|
|
|
|
|
<span>2.3</span>
|
|
|
|
|
<img src="./images/jiantou.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="orderItem">
|
|
|
|
|
<span>3.2</span>
|
|
|
|
|
<img src="./images/jiantou.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="orderItem">
|
|
|
|
|
<span>2.2</span>
|
|
|
|
|
<img src="./images/jiantou.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="bottom">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<span>车辆信息</span>
|
|
|
|
|
<div class="flag"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="itemTitle">车辆ID：</div>
|
|
|
|
|
<div class="itemDesc">586205</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="itemTitle">车辆名称：</div>
|
|
|
|
|
<div class="itemDesc">XG6788976</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="itemTitle">车辆机型：</div>
|
|
|
|
|
<div class="itemDesc">XG6788976</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="carInfo">
|
|
|
|
|
<p>精度：某某某某</p>
|
|
|
|
|
<p>维度：某某某某</p>
|
|
|
|
|
<p>车辆状态：无人驾驶</p>
|
|
|
|
|
<p>卫星解状态：某某</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="center">
|
|
|
|
|
<div class="progressContainer">
|
|
|
|
|
<span>施工进度</span>
|
|
|
|
|
<div id="progress-bar-container">
|
|
|
|
|
<div id="progress-bar"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num">
|
|
|
|
|
<span>1800</span>
|
|
|
|
|
<span>/3000米</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="carItem">
|
|
|
|
|
<div class="numContent">
|
|
|
|
|
<!-- <p>0.8L/min</p>
|
|
|
|
|
<p>0.16L/㎡</p> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pic">
|
|
|
|
|
<img src="./images/car1.png" alt="">
|
|
|
|
|
<span>XG031</span>
|
|
|
|
|
</div>
|
|
|
|
|
<img src="./images/t1.png" alt="" class="temp">
|
|
|
|
|
<div class="tempNum">90℃</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="carItem">
|
|
|
|
|
<div class="numContent">
|
|
|
|
|
<!-- <p>0.8L/min</p>
|
|
|
|
|
<p>0.16L/㎡</p> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pic">
|
|
|
|
|
<img src="./images/car2.png" alt="">
|
|
|
|
|
<span>XG032</span>
|
|
|
|
|
</div>
|
|
|
|
|
<img src="./images/t2.png" alt="" class="temp">
|
|
|
|
|
<div class="tempNum">130℃</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="carItem">
|
|
|
|
|
<div class="numContent">
|
|
|
|
|
<p>0.8L/min</p>
|
|
|
|
|
<p>0.16L/㎡</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pic">
|
|
|
|
|
<img src="./images/car3.png" alt="">
|
|
|
|
|
<span>XG033</span>
|
|
|
|
|
</div>
|
|
|
|
|
<img src="./images/t3.png" alt="" class="temp">
|
|
|
|
|
<div class="tempNum">180℃</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="carItem">
|
|
|
|
|
<div class="numContent">
|
|
|
|
|
<p>0.8L/min</p>
|
|
|
|
|
<p>0.16L/㎡</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pic">
|
|
|
|
|
<img src="./images/car4.png" alt="">
|
|
|
|
|
<span>XG034</span>
|
|
|
|
|
</div>
|
|
|
|
|
<img src="./images/t4.png" alt="" class="temp">
|
|
|
|
|
<div class="tempNum">210℃</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="carItem">
|
|
|
|
|
<div class="numContent">
|
|
|
|
|
<p>0.8L/min</p>
|
|
|
|
|
<p>0.16L/㎡</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pic">
|
|
|
|
|
<img src="./images/car5.png" alt="">
|
|
|
|
|
<span>XG035</span>
|
|
|
|
|
</div>
|
|
|
|
|
<img src="./images/t5.png" alt="" class="temp">
|
|
|
|
|
<div class="tempNum">220℃</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="carItem">
|
|
|
|
|
<div class="numContent">
|
|
|
|
|
<p>0.8L/min</p>
|
|
|
|
|
<p>0.16L/㎡</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pic">
|
|
|
|
|
<img src="./images/car6.png" alt="">
|
|
|
|
|
<span>XG036</span>
|
|
|
|
|
</div>
|
|
|
|
|
<img src="./images/t6.png" alt="" class="temp">
|
|
|
|
|
<div class="tempNum">260℃</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="carItem">
|
|
|
|
|
<div class="numContent">
|
|
|
|
|
<p>0.8L/min</p>
|
|
|
|
|
<p>0.16L/㎡</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pic">
|
|
|
|
|
<img src="./images/car6.png" alt="">
|
|
|
|
|
<span>XG037</span>
|
|
|
|
|
</div>
|
|
|
|
|
<img src="./images/t7.png" alt="" class="temp">
|
|
|
|
|
<div class="tempNum">500℃</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<div class="itemBtn blue">施工总览</div>
|
|
|
|
|
<div class="itemBtn red">一键解绑</div>
|
|
|
|
|
<div class="itemBtn blue" id="setTask">下发任务</div>
|
|
|
|
|
<div class="itemBtn green">启动</div>
|
|
|
|
|
<div class="itemBtn red">停止</div>
|
|
|
|
|
<div class="itemBtn blue">退出无人模式</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<!-- 下发-->
|
|
|
|
|
<div class="editMask" id="editDialog">
|
|
|
|
|
<div class="editDialog">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<span>下发任务</span>
|
|
|
|
|
<img src="./images/cha.png" alt="" id="closeEdit">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="editBtn">
|
|
|
|
|
<div class="getAddr">任务拼接</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
