merge upstream

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/components/MapComponent.vue

@@ -520,6 +520,10 @@ onMounted(() => {
   width: 100vw;
   height: 100vh;
 }
+.el-icon{
+  color: #007EFF;
+  font-size: 1vw;
+}
 
 .map {
   width: 100%;
@@ -545,19 +549,20 @@ onMounted(() => {
 
 .topTool .form-item {
   width: calc(calc(100% - 160px) / 3);
-  height: 45px;
+  height: 5vh;
   border: none;
 }
 :deep .el-select__wrapper,
 :deep .el-input__wrapper {
   border: none;
-  height: 45px;
+   height: 7vh;
 }
 
 :deep .el-select__wrapper,
 :deep .el-input__wrapper,
 .topTool .form-item {
-  background: linear-gradient(to bottom, #007eff59 0%, /* 顶部红色 */ #00efed59 50%, /* 中间蓝色 */ #1d5df459 100% /* 底部红色 */);
+  background: url(@/assets/homeIndex/select.png) no-repeat;
+
 }
 .topTool .form {
   width: 43%;
@@ -605,7 +610,7 @@ onMounted(() => {
   border: none;
   box-sizing: border-box;
   padding: 0px 10px;
-  line-height: 45px;
+  line-height: 4vh;
   outline: none;
   font-family: MicrosoftYaHei;
   font-size: 15px;
@@ -616,13 +621,14 @@ onMounted(() => {
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: center;
-  align-items: center;
+
   justify-content: space-between;
 }
 .topTool .form-item input::placeholder {
   font-family: MicrosoftYaHei;
   font-size: 15px;
   color: #deefff;
+    line-height: 4vh;
 }
 .topTool .form-item input:focus {
   outline: none;
@@ -632,7 +638,7 @@ onMounted(() => {
 .topTool .form-item .vertiLine {
   width: 6px;
   height: 100%;
-  background: radial-gradient(0% 0% at 0% 0%, #00d6ef 0%, #007eff 100%);
+  // background: radial-gradient(0% 0% at 0% 0%, #00d6ef 0%, #007eff 100%);
 }
 
 .topTool .form-item .ul {

src/views/homeIndex/components/RealTimeAlarm.vue

@@ -29,7 +29,7 @@
 </template>
 <script setup>
 import { getRealtimeAlarm } from '@/api/homeIndex/index';
-
+let alarmTimer = null;
 // 模拟报警数据
 const alarmData = ref([
 ]);
@@ -38,17 +38,32 @@ const getRealtimeAlarmData = () => {
         alarmData.value = res.data;
     });
 }
-
+const startAlarmTimer = () => {
+    if (alarmTimer) {
+        clearInterval(alarmTimer);
+    }
+    getRealtimeAlarmData();
+    alarmTimer = setInterval(getRealtimeAlarmData, 40 * 1000);
+};
+const clearAlarmTimer = () => {
+    if (alarmTimer) {
+        clearInterval(alarmTimer);
+        alarmTimer = null;
+    }
+};
 const tableBody = ref(null);
 
 onMounted(() => {
-    getRealtimeAlarmData()
+    startAlarmTimer();
     // 启动滚动动画
     if (tableBody.value) {
         tableBody.value.style.animationName = 'scroll';
         tableBody.value.style.animationIterationCount = 'infinite';
     }
 });
+onUnmounted(() => {
+    clearAlarmTimer(); // 组件销毁时清除定时器
+})
 </script>
 <style scoped lang="scss">
 .alarm-table-container {
@@ -56,7 +71,7 @@ onMounted(() => {
     border-radius: 4px;
     overflow: hidden;
     margin-top: 4vh;
-    padding: 1.5vw;
+    padding: 1vw 0vw;
 }
 
 .alarm-table-header {
@@ -64,6 +79,7 @@ onMounted(() => {
     color: #00C0FF;
     border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
     font-size: 0.8vw;
+    background-color: #0C2644;
 }
 
 .header-item {

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>
@@ -132,12 +132,12 @@ onMounted(() => {
   width: 100vw;
   height: 100vh;
   position: relative;
-  overflow: hidden;
+  overflow: hidden;   
 }
 
 .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;
 }
 
 /* 模块内容 */