修改大屏，每个模块的图片，去掉标题文字

src/views/controlCenter/controlPanel/index.vue

@@ -49,6 +49,7 @@
                       <el-select v-model="queryParams.onlineStatus" placeholder="设备状态" clearable>
                         <el-option label="在线" value="1"></el-option>
                         <el-option label="离线" value="0"></el-option>
+                        <el-option label="故障" value="2"></el-option>
                       </el-select>
                     </el-form-item>
                     <el-form-item label="设备MAC" prop="deviceMac">
@@ -109,6 +110,7 @@
                 <template #default="scope">
                   <div class="normal green" v-if="scope.row.onlineStatus == 1">在线</div>
                   <div class="normal red" v-if="scope.row.onlineStatus == 0">离线</div>
+                   <div class="normal red" v-if="scope.row.onlineStatus == 2">故障</div>
                 </template>
               </el-table-column>
               <el-table-column label="电量" align="center" prop="battery">
@@ -118,7 +120,7 @@
                     'battery-yellow': Number(scope.row.battery) >= 20 && Number(scope.row.battery) < 80,
                     'battery-green': Number(scope.row.battery) >= 80 && Number(scope.row.battery) <= 100
                   }">
-                    {{ scope.row.battery || '0'}}%
+                    {{ scope.row.battery || '0' }}%
                   </div>
                 </template>
               </el-table-column>
@@ -485,15 +487,17 @@ const forceAlarm = async () => {
 
 </script>
 <style lang="scss" scoped>
-.p-2{
+.p-2 {
   background: rgba(247, 248, 252, 1);
   min-height: 100vh;
   box-sizing: border-box;
   padding: 15px;
 }
-:deep .el-collapse{
+
-  border-top:none
+:deep .el-collapse {
+  border-top: none
 }
+
 :deep .el-collapse-item__header {
   display: none;
 }

src/views/homeIndex/components/AlarmEvent.vue

@@ -130,11 +130,11 @@ onMounted(() => {
 </script>
 <style scoped lang="scss">
 .vchartPage {
-    margin-top: 7.2vh;
+    margin-top:4.8vh;
 }
 
 .chartRef {
     width: 100%;
-    height: 23vh;
+    height: 24.5vh;
 }
 </style>

src/views/homeIndex/components/DeviceCategory.vue

@@ -71,7 +71,7 @@ onMounted(() => {
                                 0, 0, 0, 1,
                                 [
                                     { offset: 0, color: 'rgba(0,166,255,1)' },
-                                    { offset: 1, color: 'rgba(0,125,221, 0.6)' }
+                                    { offset: 1, color: 'rgba(0,125,221, 0.3)' }
                                 ]
                             ),
                             borderRadius: 4
@@ -87,7 +87,7 @@ onMounted(() => {
                                 0, 0, 0, 1,
                                 [
                                     { offset: 0, color: 'rgba(232,69,37,1)' },
-                                    { offset: 1, color: 'rgba(240,12,12, 0.6)' }
+                                    { offset: 1, color: 'rgba(240,12,12, 0.3)' }
                                 ]
                             ),
                             borderRadius: 4
@@ -110,11 +110,11 @@ onMounted(() => {
 </script>
 <style scoped lang="scss">
 .vchartPage {
-    margin-top: 7.8vh;
+    margin-top: 5.8vh;
 }
 
 .chartRef {
     width: 100%;
-    height: 22vh;
+    height: 23.5vh;
 }
 </style>

src/views/homeIndex/components/DeviceUsage.vue

@@ -121,7 +121,7 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .vchartPage {
-    margin-top: 7.8vh;
+    margin-top: 4.8vh;
     position: relative; // 新增：确保按钮定位正确
 }
 
@@ -153,6 +153,6 @@ onMounted(() => {
 
 .chartRef {
     width: 100%;
-    height: 22vh;
+    height: 25vh;
 }
 </style>

src/views/homeIndex/index.vue

@@ -21,21 +21,21 @@
       <div class="left">
         <div class="left-modules">
           <div class="module-card overview-card">
-            <div class="module-header">设备总览</div>
+            <!-- <div class="module-header">设备总览</div> -->
             <div class="module-content">
               <DeviceOverview />
             </div>
           </div>
 
           <div class="module-card">
-            <div class="module-header">设备类别</div>
+            <!-- <div class="module-header">设备类别</div> -->
             <div class="module-content">
               <DeviceCategory />
             </div>
           </div>
 
           <div class="module-card">
-            <div class="module-header">设备使用频次</div>
+            <!-- <div class="module-header">设备使用频次</div> -->
             <div class="module-content">
               <DeviceUsage />
             </div>
@@ -48,21 +48,21 @@
 
         <div class="right-modules">
           <div class="module-card alarm-card">
-            <div class="module-header">报警数据</div>
+            <!-- <div class="module-header">报警数据</div> -->
             <div class="module-content">
               <AlarmOverview :alarmOverview="alarmOverview" />
             </div>
           </div>
 
           <div class="module-card">
-            <div class="module-header">报警事件</div>
+            <!-- <div class="module-header">报警事件</div> -->
             <div class="module-content">
               <AlarmEvent :alarmOverview="alarmOverview" />
             </div>
           </div>
 
           <div class="module-card">
-            <div class="module-header">报警次数</div>
+            <!-- <div class="module-header">报警次数</div> -->
             <div class="module-content">
               <AlarmCount />
             </div>
@@ -74,7 +74,7 @@
       <div class="bottom">
         <div class="bottom-middle-module">
           <div class="module-card realtime-card">
-            <div class="module-header realtime-header">实时报警信息</div>
+            <!-- <div class="module-header realtime-header">实时报警信息</div> -->
             <div class="module-content">
               <RealTimeAlarm />
             </div>
@@ -137,7 +137,7 @@ onMounted(() => {
 
 .top-fixed {
   width: 100%;
-  height: 13vh;
+  height:7vh;
   background: url(@/assets/homeIndex/top.png) no-repeat;
   background-size: 100% 100%;
   z-index: 11;
@@ -215,7 +215,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   width: 27.2vw;
-  height: calc(100vh - 9vh);
+  height: calc(100vh - 8vh);
   pointer-events: auto;
 
 }
@@ -228,7 +228,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   width: 27.2vw;
-  height: calc(100vh - 9vh);
+  height: calc(100vh - 8vh);
   pointer-events: auto;
 }
 
@@ -247,7 +247,7 @@ onMounted(() => {
 
 /* 模块卡片样式 */
 .module-card {
-  background: url(@/assets/homeIndex/card.png) no-repeat;
+  /* background: url(@/assets/homeIndex/card.png) no-repeat; */
   position: relative;
   background-size: 100% 100%;
   width: 100%;
@@ -257,24 +257,59 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   border-radius: 10px;
+  margin-bottom: 1vh;
+}
+.left-modules .module-card:nth-of-type(1) {
+    background: url(@/assets/homeIndex/card1.png) no-repeat;
+    background-size: 100% 100%;
+}
+.left-modules .module-card:nth-of-type(2) {
+    background: url(@/assets/homeIndex/card2.png) no-repeat;
+    background-size: 100% 100%;
+}
+.left-modules .module-card:nth-of-type(3) {
+    background: url(@/assets/homeIndex/card3.png) no-repeat;
+    background-size: 100% 100%;
+}
+.right-modules .module-card:nth-of-type(1) {
+    background: url(@/assets/homeIndex/card4.png) no-repeat;
+    background-size: 100% 100%;
+}
+.right-modules .module-card:nth-of-type(2) {
+    background: url(@/assets/homeIndex/card5.png) no-repeat;
+    background-size: 100% 100%;
+}
+.right-modules .module-card:nth-of-type(3) {
+    background: url(@/assets/homeIndex/card6.png) no-repeat;
+    background-size: 100% 100%;
+}
+.bottom-middle-module .module-card:nth-of-type(1) {
+    background: url(@/assets/homeIndex/card7.png) no-repeat;
+    background-size: 100% 100%;
 }
 
 /* 模块标题 */
 .module-header {
   position: absolute;
   font-size: 1.6vh;
-  color: #fff;
+
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  left: 5vh;
+  left:4.8vh;
-  top: 3.2vh;
+  top:1.5vh;
+  font-family: SourceHanSansCN, SourceHanSansCN;
+font-weight: 500;
+/* font-size: 18px; */
+color: #F2F8FF;
+
+text-shadow: 3px 0px 6px rgba(3,33,42,0.5);
 
 }
 
 .realtime-header {
-  left: 8vh;
+  left: 7.5vh;
-  top: 3.4vh;
+  top:1.5vh;
 }
 
 /* 模块内容 */