<feat>:内容微调

packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/MapComponent.vue

@@ -1,8 +1,5 @@
 <template>
-  <div style="position: relative; height: 100%; width: 100%; overflow: hidden">
-    <div id="map" style="height: 100%; width: 100%; overflow: hidden"></div>
-    <div v-if="darkMask" class="dark-mask"></div>
-  </div>
+  <div id="map" style="height: 100%; width: 100%; overflow: hidden"></div>
 </template>
 
 <script>
@@ -78,14 +75,13 @@ export default {
       })
         .then((AMap) => {
           this.AMapIns = AMap;
-          // 使用卫星图层（不叠加道路线）
-          const satellite = new AMap.TileLayer.Satellite();
-          this.map = new AMap.Map('map', {
-            viewMode: '2D',
-            zoom: 12,
-            center: defaultCenterPoint,
-            layers: [satellite]
-          });
+                                this.map = new AMap.Map('map', {
+             viewMode: '2D',
+             zoom: 12,
+             center: defaultCenterPoint,
+             mapStyle: 'amap://styles/dark', // 使用暗色样式，提供纯黑背景
+             layers: []
+           });
           if (this.rectangles?.length) {
             this.formatData(this.rectangles);
           }
@@ -132,27 +128,28 @@ export default {
     createPolygon(item) {
       const { path, status, name } = item;
       const style = STATUS_STYLE[status] || STATUS_STYLE['未施工'];
-      const polygon = new this.AMapIns.Polygon({
-        path,
-        strokeColor: style.stroke,
-        strokeWeight: 2,
-        strokeOpacity: 1,
-        strokeStyle: 'solid',
-        fillColor: style.fill,
-        fillOpacity: 0.45,
-        cursor: 'pointer',
-        zIndex: 50
-      });
+             const polygon = new this.AMapIns.Polygon({
+         path,
+         strokeColor: style.stroke,
+         strokeWeight: 2,
+         strokeOpacity: 1,
+         strokeStyle: 'solid',
+         fillColor: style.fill,
+         fillOpacity: 0.45,
+         cursor: 'pointer',
+         zIndex: 100 // 确保多边形在黑色蒙层之上
+       });
       console.log(polygon, 'polygon');
       this.map.add(polygon);
       this.polygons.push(polygon);
 
-      // 居中名称标签
-      const text = new this.AMapIns.Text({
-        text: name || '',
-        anchor: 'center',
-        style: { 'background-color': 'transparent', border: 'none', color: '#ffffff', 'font-size': '12px' }
-      });
+             // 居中名称标签
+       const text = new this.AMapIns.Text({
+         text: name || '',
+         anchor: 'center',
+         style: { 'background-color': 'transparent', border: 'none', color: '#ffffff', 'font-size': '12px' },
+         zIndex: 101 // 文字在多边形之上
+       });
       // 计算简单中心点
       const mid = path[Math.floor(path.length / 2)] || path[0];
       if (mid) text.setPosition(mid);
@@ -176,13 +173,5 @@ export default {
   width: 100%;
   height: 100%;
 }
-.dark-mask {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 10, 26, 0.25);
-  pointer-events: none;
-}
+
 </style>

packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="task-screen">
-    <!-- <div class="map-wrap">
+    <div class="map-wrap">
       <MapComponent :rectangles="rectangles" />
       <div class="legend">
         <div class="legend-item" v-for="(item, i) in legends" :key="i">
@@ -8,7 +8,7 @@
           <span class="text">{{ item.label }}</span>
         </div>
       </div>
-    </div> -->
+    </div>
 
     <div class="side left">
       <div class="panel">
@@ -61,44 +61,47 @@
             <span>更多</span>
           </template>
         </BlockTitle>
-        <div class="kpibox">
-          <div class="kpi">
-            <div class="kpi-label">当前设备在线数量</div>
-            <div class="kpi-value">{{ deviceStats.online }}</div>
-          </div>
-          <div class="kpi">
-            <div class="kpi-label">组件设备</div>
-            <div class="kpi-value">{{ deviceStats.component }}</div>
-          </div>
-          <div class="kpi">
-            <div class="kpi-label">当前设备安装数量</div>
-            <div class="kpi-value">{{ deviceStats.installing }}</div>
+        <div class="kpi-box">
+          <div class="kpi-item-title">当前设备在线数量</div>
+          <div class="kpi-item-group">
+            <div class="kpi-item">
+              <div class="kpi-label">檩条设备</div>
+              <div class="kpi-value">{{ deviceStats.online }}</div>
+            </div>
+            <div class="kpi-item">
+              <div class="kpi-label">组件设备</div>
+              <div class="kpi-value">{{ deviceStats.component }}</div>
+            </div>
           </div>
-          <div class="kpi">
-            <div class="kpi-label">组件安装数</div>
-            <div class="kpi-value">{{ deviceStats.moduleInstalled }}</div>
+
+          <div class="kpi-item-title">今日设备安装数量</div>
+          <div class="kpi-item-group">
+            <div class="kpi-item">
+              <div class="kpi-label">檩条安装数</div>
+              <div class="kpi-value">{{ deviceStats.installing }}</div>
+            </div>
+            <div class="kpi-item">
+              <div class="kpi-label">组件安装数</div>
+              <div class="kpi-value">{{ deviceStats.moduleInstalled }}</div>
+            </div>
           </div>
         </div>
-
-        <fks-table :data="deviceTable" border height="280">
-          <fks-table-column prop="id" label="设备ID" width="80" />
-          <fks-table-column prop="area" label="所属工区" width="90" />
-          <fks-table-column prop="team" label="工作小组" width="100" />
-          <fks-table-column prop="dayWork" label="当日工作量" width="110" />
-          <fks-table-column prop="runtime" label="运行时长(h)" width="110" />
+        <div class="kpi-item-title">今日设备信息</div>
+        <fks-table :data="deviceTable" border height="208">
+          <fks-table-column prop="id" label="设备ID" />
+          <fks-table-column prop="area" label="所属工区" />
+          <fks-table-column prop="team" label="工作小组" />
+          <fks-table-column prop="dayWork" label="当日工作量" width="80" />
+          <fks-table-column prop="runtime" label="运行时长(h)" width="85" />
         </fks-table>
       </div>
 
       <div class="panel">
-        <div class="panel-title">
-          <img class="titleIcon" :src="titleIcon" />
-          <span>报警信息</span>
-          <span class="more">更多</span>
-        </div>
-        <fks-table :data="alarmTable" border height="300">
-          <fks-table-column prop="code" label="报警编号" width="100" />
-          <fks-table-column prop="device" label="设备编号" width="100" />
-          <fks-table-column prop="desc" label="报警内容" min-width="140" />
+        <BlockTitle title="安全预警"> </BlockTitle>
+        <fks-table :data="alarmTable" border height="208">
+          <fks-table-column prop="code" label="预警类别" />
+          <fks-table-column prop="device" label="设备编码" />
+          <fks-table-column prop="desc" label="报警内容" />
           <fks-table-column prop="time" label="报警时间" width="160" />
         </fks-table>
       </div>
@@ -198,6 +201,9 @@ export default {
       padding: 4px 0 !important;
       color: #999 !important;
       background: #f9f9f9 !important;
+      .cell {
+        padding: 0 !important;
+      }
     }
   }
 }
@@ -246,6 +252,7 @@ export default {
   box-sizing: border-box;
   box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
+  background: #fff;
   .panel + .panel {
     margin-top: 20px;
   }
@@ -336,16 +343,33 @@ export default {
   }
 }
 
-.kpibox {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 8px;
+.kpi-box {
   margin-bottom: 12px;
-  .kpi {
-    background: rgba(8, 26, 58, 0.7);
-    border: 1px solid rgba(91, 166, 255, 0.25);
-    border-radius: 6px;
-    padding: 10px 8px;
+  display: flex;
+  flex-direction: column;
+  .kpi-item-title {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #000000;
+    margin-bottom: 8px;
+  }
+  .kpi-item-group {
+    display: flex;
+    gap: 0 16px;
+  }
+  .kpi-item {
+    flex: 1;
+    height: 50px;
+    margin-bottom: 18px;
+    background: linear-gradient(180deg, #f2f9ff 0%, rgba(242, 249, 255, 0.5) 100%);
+    border-radius: 8px 8px 8px 8px;
+    border: 1px solid #dcedff;
+    padding: 0 12px;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
     .kpi-label {
       font-size: 12px;
       margin-bottom: 4px;