左侧菜单栏样式修改

src/api/controlCenter/controlPanel/types.ts

@@ -10,7 +10,7 @@ export interface deviceQuery {
   communicationMode: string;
   pageSize: Number;
   deviceType: string;
-  content:string
+  content: string
 
 }
 export interface deviceVO {
@@ -42,7 +42,7 @@ export interface DeviceDetail {
     name: string;           // 姓名
     code: string;         // ID（身份证/工号）
   };
-
+  chargeState: string
 }
 // 定义灯光模式的类型接口
 export interface LightMode {

src/assets/styles/sidebar.scss

@@ -81,11 +81,15 @@
       width: 100% !important;
     }
 
-    .el-menu-item,
+    .el-sub-menu,
     .menu-title {
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
+      color: rgba(255, 255, 255, 0.87);
+      font-family: Microsoft YaHei;
+      font-size: 13px;
+      font-weight: 600;
     }
 
     .el-menu-item .el-menu-tooltip__trigger {
@@ -100,6 +104,7 @@
         transition: all 0.3s ease;
       }
     }
+
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
@@ -108,7 +113,7 @@
       }
     }
 
-    & .theme-dark .is-active > .el-sub-menu__title {
+    & .theme-dark .is-active>.el-sub-menu__title {
       color: #ffffff !important;
       background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
       border-radius: 4px;
@@ -116,16 +121,17 @@
       box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
     }
 
-    & .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
       min-width: $base-sidebar-width !important;
+
       &:hover {
         background-color: rgba(0, 0, 0, 0.1) !important;
         transition: all 0.3s ease;
       }
     }
 
-    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
       background-color: $base-sub-menu-background !important;
 
@@ -135,7 +141,7 @@
       }
     }
 
-    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .theme-dark .el-menu-item {
       &:hover {
         // you can use $sub-menuHover
@@ -143,7 +149,8 @@
         transition: all 0.3s ease;
       }
     }
-    & .nest-menu .el-sub-menu > .el-sub-menu__title,
+
+    & .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .el-menu-item {
       &:hover {
         // you can use $sub-menuHover
@@ -178,7 +185,7 @@
     .el-sub-menu {
       overflow: hidden;
 
-      & > .el-sub-menu__title {
+      &>.el-sub-menu__title {
         padding: 0 !important;
 
         .svg-icon {
@@ -189,15 +196,16 @@
 
     .el-menu--collapse {
       .el-sub-menu {
-        & > .el-sub-menu__title {
+        &>.el-sub-menu__title {
-          & > span {
+          &>span {
             height: 0;
             width: 0;
             overflow: hidden;
             visibility: hidden;
             display: inline-block;
           }
-          & > i {
+
+          &>i {
             height: 0;
             width: 0;
             overflow: hidden;
@@ -234,6 +242,7 @@
   }
 
   .withoutAnimation {
+
     .main-container,
     .sidebar-container {
       transition: none;
@@ -243,7 +252,7 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  & > .el-menu {
+  &>.el-menu {
     .svg-icon {
       margin-right: 16px;
     }
@@ -286,7 +295,7 @@
 }
 
 // 子菜单激活状态
-.el-sub-menu.is-active > .el-sub-menu__title {
+.el-sub-menu.is-active>.el-sub-menu__title {
   background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
   color: #ffffff !important;
   border-radius: 4px;
@@ -312,7 +321,7 @@
   }
 
   .el-sub-menu {
-    &.is-active > .el-sub-menu__title {
+    &.is-active>.el-sub-menu__title {
       background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
       color: #ffffff !important;
       border-radius: 4px;
@@ -326,7 +335,7 @@
   .el-sub-menu .el-menu-item {
     &.is-active {
       background: transparent !important;
-      color: #409eff !important;
+      color: rgba(1, 159, 228, 1) !important;
       border-radius: 0;
       margin: 0;
       box-shadow: none;
@@ -362,7 +371,7 @@
 
   // 激活的主菜单项（正确的渐变背景）
   .el-menu-item.is-active,
-  .el-sub-menu.is-active > .el-sub-menu__title {
+  .el-sub-menu.is-active>.el-sub-menu__title {
     background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
     color: #ffffff !important;
     border-radius: 4px;
@@ -381,7 +390,7 @@
 
   // 子菜单背景色
   .el-sub-menu .el-menu {
-    background: #1f2d3d !important;
+    background: linear-gradient(0.00deg, rgba(0, 87, 159, 0.15), rgba(0, 87, 159, 0) 100%) !important;
   }
 
   // 子菜单项悬停效果
@@ -399,7 +408,8 @@
 // 全局菜单样式匹配设计UI
 #app .sidebar-container {
   // 确保背景色一致
-  background: #2c3e50 !important;
+  background: rgba(11, 24, 40, 1) !important;
+  //background: #2c3e50 !important;
 
   // 菜单项基础样式
   .el-menu-item,
@@ -413,7 +423,7 @@
 
   // 激活的主菜单项
   .el-menu-item.is-active,
-  .el-sub-menu.is-active > .el-sub-menu__title {
+  .el-sub-menu.is-active>.el-sub-menu__title {
     background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
     color: #ffffff !important;
     border-radius: 4px;

src/assets/styles/variables.module.scss

@@ -1,6 +1,6 @@
 // 全局SCSS变量
 :root {
-  --menuBg: #2c3e50; // 精确匹配图片中的深色背景
+  --menuBg: linear-gradient(0.00deg, rgba(0, 87, 159, 0.15),rgba(0, 87, 159, 0) 100%);; // 精确匹配图片中的深色背景
   --menuColor: #bfcbd9; // 非激活菜单项的文字颜色
   --menuActiveText: #ffffff; // 激活菜单项的文字颜色
   --menuHover: #34495e; // 悬停时的背景色
@@ -11,7 +11,7 @@
   --subMenuTitleHover: #293444; // 子菜单标题悬停背景色
 
   // 激活菜单项的渐变颜色 - 根据设计UI调整
-  --menuActiveGradient: linear-gradient(90deg, #0080EA 0%, #000F27 100%);
+  --menuActiveGradient:linear-gradient(90.00deg, rgba(0, 128, 234, 1),rgba(0, 15, 39, 0) 100%);
 
   --fixedHeaderBg: #ffffff;
   --tableHeaderBg: #f8f8f9;
@@ -130,7 +130,7 @@ $--color-warning: #e6a23c;
 $--color-danger: #f56c6c;
 $--color-info: #909399;
 
-$base-sidebar-width: 280px;
+$base-sidebar-width: 250px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/views/controlCenter/6170/index.vue

@@ -124,6 +124,16 @@
                 </el-col>
             </el-row>
         </div>
+        <!-- ===========充电提示框====== -->
+        <el-dialog title="充电提示" v-model="centerDialogVisible" width="15%">
+            <div style="display: flex; align-items: center;">
+                <h3 style="color: rgba(224, 52, 52, 1)">设备电量低于20%</h3>
+            </div>
+            <div>请及时充电</div>
+            <span slot="footer" class="dialog-footer" style="text-align: right;display: block;">
+                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 <script setup name="DeviceControl" lang="ts">
@@ -151,6 +161,7 @@ const fullscreenLoading = ref(false)
 const forceAlarmLoading = ref(false)  //强制报警
 const sendTextLoading = ref(false)
 const lightModesLoading = ref(false)
+const centerDialogVisible = ref(false)
 const {
     connected,
     connect,
@@ -575,9 +586,8 @@ const handleDeviceMessage = (msg: any) => {
                 deviceDetail.value.batteryPercentage = deviceState[3]; //电量
                 deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
                 // getList(); // 重新获取设备详情
-                if (deviceDetail.value.batteryPercentage < 20) {
+                if (deviceDetail.value.batteryPercentage < 20 && deviceDetail.value.chargeState == 0) {
-                    ElMessage.closeAll();
+                    centerDialogVisible.value=true
-                    proxy?.$modal.msgWarning('电量低于20%，请及时充电');
                 }
                 break;
             default:
@@ -663,7 +673,7 @@ onUnmounted(() => {
             background: white;
             padding: 0px 20px 50px;
             border: 1px solid #ebeef5;
-            height: 250px;
+            height: 289px;
             position: relative;
         }
 
@@ -736,6 +746,7 @@ onUnmounted(() => {
 
 
         }
+
         .brightness-alarm {
             display: flex;
             justify-content: space-between;
@@ -927,4 +938,9 @@ onUnmounted(() => {
         }
     }
 }
+
+.path-img {
+    width: 52px;
+    height: 28px;
+}
 </style>

src/views/controlCenter/delivery/index.vue

@@ -15,8 +15,7 @@
             <el-card>
               <!-- =========搜索按钮操作======= -->
               <div class="btn_search">
-                <el-button type="primary"  plain icon="Download"
+                <el-button type="primary" plain icon="Download" @click="handleExport">导出</el-button>
-                  @click="handleExport">导出</el-button>
                 <div style="position: absolute; right:30px; top:20px">
                   <el-input v-model="queryParams.content" placeholder="MAC/IMEI" clearable
                     style="width: 200px; margin-right: 20px;" @keyup.enter="handleQuery" @input="handleInput" />
@@ -109,7 +108,7 @@ const initData: PageData<'', deviceQuery> = {
     deviceType: '',
     startTime: '',
     endTime: '',
-    content:""
+    content: ""
   },
   rules: undefined,
   form: ''