<feat>(screen):外层内容完成，优化内部弹窗展示

packages/robot-system/src/assets/css/variables.scss

@@ -1,8 +1,8 @@
 /*
  * @Author: wei_jt@ecidi.com
  * @Date: 2019-11-05 14:33:45
- * @LastEditors: zhong_m
+ * @LastEditors: XiaoJun
- * @LastEditTime: 2022-10-09 09:07:33
+ * @LastEditTime: 2025-08-26 15:13:43
  * @Description: 侧边栏变量
  */
 // 主题
@@ -17,7 +17,9 @@ $subMenuHover:rgba($theme, .6);
 
 $menuItemHeight: 40px;
 
-$sideBarWidth: 200px;  // 打开侧边栏菜单宽度
+// #delete demo版改动，后续还原
+$sideBarWidth: 0px;  // 打开侧边栏菜单宽度
+// $sideBarWidth: 200px;  // 打开侧边栏菜单宽度
 $collapseBarWith: 54px; //折叠侧边栏菜单宽度
 $isSidebarWidth:0px;  //隐藏侧边栏菜单宽度（修改）
 

packages/robot-system/src/layout/mainComponent/independent.vue

@@ -1,15 +1,16 @@
 <!--
  * @Author: wei_jt@ecidi.com
  * @Date: 2019-11-05 14:10:54
- * @LastEditors: chen_yt
+ * @LastEditors: XiaoJun
- * @LastEditTime: 2022-09-06 14:57:14
+ * @LastEditTime: 2025-08-26 15:12:39
  * @Description: app内容区域
  -->
 <template>
   <div :class="classObj" class="app-wrapper">
     <template v-if="layout">
       <navbar :collapse="menus.length && topMenu == 0" />
-      <sidebar v-if="menus.length && isSidebar" :menus="menus" class="sidebar-container" />
+      <!-- #delete demo版改动，后续还原 -->
+      <!-- <sidebar v-if="menus.length && isSidebar" :menus="menus" class="sidebar-container" /> -->
     </template>
     <!-- 类名返回函数判断逻辑 -->
     <!-- :class="$store.state.isSidebar?'main-container hideSidebar':$store.state.sidebar.opened?'main-container opened':'main-container'"  -->

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

@@ -4,7 +4,12 @@
       <MapComponent :rectangles="rectangles" />
       <div class="legend">
         <div class="legend-item" v-for="(item, i) in legends" :key="i">
-          <span class="dot" :style="{ background: item.color }"></span>
+          <template v-if="item.imgList">
+            <img v-for="img in item.imgList" :src="img" alt="" />
+          </template>
+          <template v-else>
+            <span class="rect" :style="{ '--rect-color': item.color }"></span>
+          </template>
           <span class="text">{{ item.label }}</span>
         </div>
       </div>
@@ -113,6 +118,12 @@
 import Mix from '@/mixins/module';
 import MapComponent from './MapComponent.vue';
 import BlockTitle from './components/BlockTitle.vue';
+import error1 from './images/error-1.png';
+import error2 from './images/error-2.png';
+import running1 from './images/running-1.png';
+import running2 from './images/running-2.png';
+import warning1 from './images/warning-1.png';
+import warning2 from './images/warning-2.png';
 
 export default {
   name: 'TaskScreenView',
@@ -176,18 +187,23 @@ export default {
         // { id: '6', name: '余杭区', status: '停机', geomWkt: 'POLYGON((119.8000 30.1800,120.1000 30.1800,120.1000 30.5000,119.8000 30.5000,119.8000 30.1800))' }
       ],
       legends: [
-        { label: '施工中', color: '#3fa7ff' },
+        { label: '施工中', color: '#137EE9' },
-        { label: '已施工', color: '#52c41a' },
+        { label: '已施工', color: '#1AD59A' },
-        { label: '未施工', color: '#faad14' },
+        { label: '未施工', color: '#FFBC48' },
-        { label: '故障', color: '#ff4d4f' },
+        { label: '故障', color: '#ff4d4f', imgList: [error1, error2] },
-        { label: '运行中', color: '#13c2c2' },
+        { label: '运行中', color: '#13c2c2', imgList: [running1, running2] },
-        { label: '停机', color: '#bfbfbf' }
+        { label: '停机', color: '#bfbfbf', imgList: [warning1, warning2] }
       ]
     };
   }
 };
 </script>
-
+<style lang="scss">
+.amap-copyright,
+.amap-logo {
+  display: none !important;
+}
+</style>
 <style scoped lang="scss">
 // 重置区域开始
 * {
@@ -226,22 +242,40 @@ export default {
   bottom: 12px;
   display: flex;
   align-items: center;
-  padding: 8px 12px;
+  gap: 0 60px;
-  background: rgba(0, 12, 32, 0.7);
-  border: 1px solid rgba(91, 166, 255, 0.35);
-  border-radius: 6px;
   .legend-item {
     display: flex;
     align-items: center;
-    margin: 0 10px;
+    img {
-    .dot {
+      width: 20px;
-      width: 12px;
+      & + img {
-      height: 12px;
+        margin-left: 6px;
-      border-radius: 50%;
+      }
+    }
+    .rect {
+      width: 16px;
+      height: 16px;
       margin-right: 6px;
+      border: 1px solid var(--rect-color);
+      position: relative;
+      &::before {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        opacity: 0.4;
+        background: var(--rect-color);
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
     }
     .text {
-      font-size: 12px;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 600;
+      font-size: 16px;
+      color: #ebfaff;
+      margin-left: 10px;
     }
   }
 }