1

ipad/css/monitor.css

@@ -12,27 +12,31 @@ body,html{
     position: relative;
 }
 .monitor .top{
-    height:20%;
+    /* height:20%; */
+    height: calc(20vh);
     width: calc(100% - 2px);
-    border:1px solid red;
+    /* border:1px solid red; */
     background-color: #fff;
     position: relative;
     /* padding:20px; */
 }
 .order{
     position: absolute;
-    border:2px solid #000;
-    bottom: 0;
+    bottom: calc(10% + 10px);
     display: flex;
-    width: 100%;
+    /* width: 100%; */
     justify-content: space-between;
+    left:calc(10% + 20px);
+    right:calc(10% + 20px);
+    z-index:0;
 }
 .order .orderItem{
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 5%;
-    border: 1px solid red;
+    /* margin-left:10%; */
+    
 }
 .order .orderItem span{
     margin-bottom: 7px;
@@ -48,18 +52,28 @@ body,html{
     height: calc(100% - 40px);
     justify-content: space-between;
     align-items: center;
-    padding: 20px 0px;
+    padding: 20px;
+    position: relative;
+    z-index:2
 }
+#top1>:first-child{
+  
+    margin-left:0 !important;
+}
+
+
 #top1 .carInfo{
-    width:10%;
+    
     height:calc(50% - 20px);
-    /* height: 50px; */
     background: #ECF3F7;
     border-radius: 10px;
     border: 1px dashed #6271FE;
-    /* margin-top:20px; */
-    margin-left:1.25%;
-    margin-right:1.25%;
+    width:calc(10% - 2px);
+    margin-left:5%;
+    
+    /* margin-left:1.25%;
+    margin-right:1.25%; */
+    /* width: calc((100% - 2px) / 7); */
     position: relative;
     display: flex;
     align-items: center;
@@ -81,14 +95,21 @@ body,html{
 #top1 .empty{
     
     /* margin-top:20px; */
-    margin-left:1.25%;
-    margin-right:1.25%;
-    width:10%;
+    /* margin-left:1.25%;
+    margin-right:1.25%; */
+    /* width:10%; */
+    width:calc(10% - 2px);
+    margin-left:5%;
+    /* flex: 0 0 14.28%; */
     height:calc(50% - 20px);
     /* height: 50px; */
     background: #ECF3F7;
     border-radius: 10px;
     border: 1px dashed #6271FE;
+    
+}
+#top1 > :nth-child(8){
+    margin-left:0 !important;
 }
 .bottom{
     flex:1;
@@ -196,6 +217,7 @@ body,html{
     display: flex;
     align-items: center;
     margin:15% 60px 15% 24px; 
+    flex-wrap: wrap;
 }
 .center .progressContainer>span{
     display: inline-block;
@@ -223,6 +245,7 @@ body,html{
     height: 20px;
     overflow: hidden;
     border-radius: 3px;
+    min-width: 40%;
 }
 #progress-bar {
     width: 0;
@@ -235,6 +258,7 @@ body,html{
     display: flex;
     justify-content: space-between;
     margin:0 8px; 
+    flex-wrap: wrap;
 }
 .center .content .carItem{
    
@@ -245,6 +269,7 @@ body,html{
     align-items: center;
     justify-content: center;
     width: 13%;
+    min-width: calc(8vw);
 }
 .center .content .carItem .numContent{
     height: 70px;

ipad/css/taskManagement.css

@@ -118,7 +118,7 @@ body,html{
     text-align: center;
 }
 .center .map{
-    border:1px solid red;
+   
     flex:1;
     margin: 0 20px;
 }

ipad/js/taskManagement.js

@@ -34,4 +34,25 @@ $(function(){
     $("#closeEdit").click(()=>{
         $("#editDialog").fadeOut();
     })
+    // 添加地图
+    var map = new AMap.Map('mapContainer', {
+        zoom: 11, // 缩放级别
+        center: [116.397428, 39.90923] // 中心点坐标
+    });
+    var icon = new AMap.Icon({
+        size: new AMap.Size(39, 35), // 图标尺寸
+        image: './images/qi.png', // 图标的URL
+        imageSize: new AMap.Size(39, 35) // 图标所用图片的大小
+    });
+
+    // 创建自定义标记
+    var marker = new AMap.Marker({
+        position: new AMap.LngLat(116.397428, 39.90923), // 位置坐标
+        map: map, // 指定地图
+        icon: icon, // 使用自定义图标
+        offset: new AMap.Pixel(-25, -25) // 图标偏移量，可以更精确地指向指定位置
+    });
+
+    // 将标记添加到地图
+    marker.setMap(map);
 })

ipad/monitor.html

@@ -50,7 +50,7 @@
             <div data-id="empty7" class="empty"></div>
         </div>
         <div class="order">
-            <div class="orderItem" style="margin-left:12.5%">
+            <div class="orderItem">
                 <span>2.5</span>
                 <img src="./images/jiantou.png" alt="">
             </div>

ipad/taskManagement.html

@@ -6,7 +6,9 @@
     <title>任务管理</title>
     <link rel="stylesheet" href="./css/taskManagement.css">
     <script src="./js/jquery-3.7.1.min.js"></script>
+    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=3bee3993dafa879236b2a913b407f55e"></script>
     <script src="./js/taskManagement.js"></script>
+    
 </head>
 <body>
 <div class="task">
@@ -18,7 +20,7 @@
     </section>
     <section class="center">
         <div class="title">任务采集中...</div>
-        <div class="map"></div>
+        <div class="map" id="mapContainer"></div>
         <div class="btnGroup">
             <div class="btnItem add">
                 <img src="./images/tianjia.png" alt="">