预警更新

src/views/vent/monitorManager/alarmMonitor/DetailModalFire.vue

@@ -83,7 +83,7 @@ function getMonitor(deviceID) {
       }
       getMonitor(deviceID);
     },
-    1000
+    500
   );
 }
 
@@ -100,6 +100,7 @@ function getClearList() {
 
 async function onSubmit() {
   activeIndex1.value = 0;
+  activeIndex.value=0
   getClearList()
   clearTimeout(timer)
   emit('close');
@@ -160,8 +161,8 @@ function cardClick(ind, item) {
   strType.value = item.strtype
   clearTimeout(timer)
   getClearList()
-  if(props.moduleObj.moduleName=='fire'){
-    current.value=''
+  if (props.moduleObj.moduleName == 'fire') {
+    current.value = ''
   }
   getMonitor(item.deviceID)
 }
@@ -362,26 +363,61 @@ onMounted(async () => { });
           background-size: 100% 100%;
           cursor: pointer;
 
-          .text {
-            width: 80%;
-            position: absolute;
-            left: 50%;
-            top: 22px;
-            font-size: 16px;
-            color: #01fefc;
-            text-align: center;
-            transform: translate(-50%, 0);
+          @media screen and (max-width:1920px) {
+            .text {
+              width: 80%;
+              position: absolute;
+              left: 50%;
+              top: 22px;
+              font-size: 16px;
+              color: #01fefc;
+              text-align: center;
+              transform: translate(-50%, 0);
+            }
+          }
+
+
+          @media screen and (min-width:1921px) and (max-width:2560px) {
+            .text {
+              width: 100%;
+              position: absolute;
+              left: 50%;
+              top: 38px;
+              font-size: 16px;
+              color: #01fefc;
+              text-align: center;
+              transform: translate(-50%, 0);
+            }
+
           }
 
-          .warn {
-            width: 100%;
-            position: absolute;
-            left: 50%;
-            top: 68px;
-            font-size: 16px;
-            color: #fff;
-            text-align: center;
-            transform: translate(-50%, 0);
+
+          @media screen and (max-width:1920px) {
+            .warn {
+              width: 100%;
+              position: absolute;
+              left: 50%;
+              top: 64px;
+              font-size: 16px;
+              color: #fff;
+              text-align: center;
+              transform: translate(-50%, 0);
+
+            }
+          }
+
+          @media screen and (min-width: 1921px) and (max-width:2560px) {
+            .warn {
+              width: 100%;
+              position: absolute;
+              left: 50%;
+              top: 103px;
+              font-size: 16px;
+              color: #fff;
+              text-align: center;
+              transform: translate(-50%, 0);
+            }
+
           }
         }
 
@@ -395,26 +431,61 @@ onMounted(async () => { });
           background-size: 100% 100%;
           cursor: pointer;
 
-          .text {
-            width: 80%;
-            position: absolute;
-            left: 50%;
-            top: 22px;
-            font-size: 16px;
-            color: #01fefc;
-            text-align: center;
-            transform: translate(-62%, 0);
+
+
+          @media screen and (max-width:1920px) {
+            .text {
+              width: 80%;
+              position: absolute;
+              left: 50%;
+              top: 22px;
+              font-size: 16px;
+              color: #01fefc;
+              text-align: center;
+              transform: translate(-62%, 0);
+            }
+          }
+
+          @media screen and (min-width: 1921px) and (max-width:2560px) {
+            .text {
+              width: 100%;
+              position: absolute;
+              left: 50%;
+              top: 38px;
+              font-size: 16px;
+              color: #01fefc;
+              text-align: center;
+              transform: translate(-60%, 0);
+            }
+
           }
 
-          .warn {
-            width: 100%;
-            position: absolute;
-            left: 50%;
-            top: 68px;
-            font-size: 16px;
-            color: #fff;
-            text-align: center;
-            transform: translate(-60%, 0);
+
+          @media screen and (max-width:1920px) {
+            .warn {
+              width: 100%;
+              position: absolute;
+              left: 50%;
+              top: 64px;
+              font-size: 16px;
+              color: #fff;
+              text-align: center;
+              transform: translate(-60%, 0);
+            }
+          }
+
+          @media screen and (min-width: 1921px) and (max-width:2560px) {
+            .warn {
+              width: 100%;
+              position: absolute;
+              left: 50%;
+              top: 103px;
+              font-size: 16px;
+              color: #fff;
+              text-align: center;
+              transform: translate(-60%, 0);
+            }
+
           }
         }
       }
@@ -523,5 +594,4 @@ onMounted(async () => { });
       background-color: #97efff11 !important;
     }
   }
-}
-</style>
+}</style>

src/views/vent/monitorManager/alarmMonitor/fire/gasPage.vue

@@ -233,9 +233,11 @@ watch(() => props.listData, (val) => {
 
             .card-b {
                 position: relative;
-                width: 25%;
+                width: 23%;
                 height: 128px;
+                margin: 0px 15px 15px 15px;
                 background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
+                background-size: 100% 100%;
 
                 .item-l {
                     position: absolute;
@@ -264,46 +266,90 @@ watch(() => props.listData, (val) => {
                     }
                 }
 
-                .item-r {
-                    position: absolute;
-                    right: 32px;
-                    top: 50%;
-                    transform: translate(0, -50%);
-                    width: 220px;
-                    height: 128px;
-                    padding: 5px 0px;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-                    box-sizing: border-box;
-
-                    .content-r {
+                @media screen and (max-width:1920px) {
+                    .item-r {
+                        position: absolute;
+                        left:132px;
+                        top: 50%;
+                        transform: translate(0, -50%);
+                        height: 128px;
+                        padding: 5px 0px;
                         display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+                        box-sizing: border-box;
+
+                        .content-r {
+                            display: flex;
 
-                        span {
-                            font-size: 14px;
+                            span {
+                                font-size: 14px;
 
-                            &:first-child {
-                                display: inline-block;
-                                width: 68px;
+                                &:first-child {
+                                    display: inline-block;
+                                    width: 68px;
+                                }
+
+                                &:last-child {
+                                    display: inline-block;
+                                    width: calc(100% - 68px);
+                                }
                             }
 
-                            &:last-child {
-                                display: inline-block;
-                                width: calc(100% - 68px);
+                            .status-f {
+                                color: #ff0000;
                             }
-                        }
 
-                        .status-f {
-                            color: #ff0000;
+                            .status-l {
+                                color: #3df6ff;
+                            }
                         }
 
-                        .status-l {
-                            color: #3df6ff;
-                        }
+
                     }
+                }
 
 
+                @media screen and (min-width: 1921px) and (max-width:2560px) {
+                    .item-r {
+                        position: absolute;
+                        left: 138px;
+                        top: 50%;
+                        transform: translate(0, -50%);
+                        width: calc(100% - 138px);
+                        height: 128px;
+                        padding: 5px 0px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+                        box-sizing: border-box;
+
+                        .content-r {
+                            display: flex;
+
+                            span {
+                                font-size: 14px;
+
+                                &:first-child {
+                                    display: inline-block;
+                                    width: 68px;
+                                }
+
+                                &:last-child {
+                                    display: inline-block;
+                                    width: calc(100% - 68px);
+                                }
+                            }
+
+                            .status-f {
+                                color: #ff0000;
+                            }
+
+                            .status-l {
+                                color: #3df6ff;
+                            }
+                        }
+                    }
                 }
 
             }
@@ -346,9 +392,11 @@ watch(() => props.listData, (val) => {
 
             .card-b {
                 position: relative;
-                width: 25%;
+                width: 23%;
                 height: 128px;
+                margin: 0px 15px 15px 15px;
                 background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
+                background-size: 100% 100%;
 
                 .item-l {
                     position: absolute;
@@ -377,45 +425,89 @@ watch(() => props.listData, (val) => {
                     }
                 }
 
-                .item-r {
-                    position: absolute;
-                    right: 32px;
-                    top: 50%;
-                    transform: translate(0, -50%);
-                    width: 220px;
-                    height: 128px;
-                    padding: 5px 0px;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-                    box-sizing: border-box;
-
-                    .content-r {
+                @media screen and (max-width:1920px) {
+                    .item-r {
+                        position: absolute;
+                        left:132px;
+                        top: 50%;
+                        transform: translate(0, -50%);
+                        height: 128px;
+                        padding: 5px 0px;
                         display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+                        box-sizing: border-box;
+
+                        .content-r {
+                            display: flex;
 
-                        span {
-                            font-size: 14px;
+                            span {
+                                font-size: 14px;
 
-                            &:first-child {
-                                display: inline-block;
-                                width: 68px;
+                                &:first-child {
+                                    display: inline-block;
+                                    width: 68px;
+                                }
+
+                                &:last-child {
+                                    display: inline-block;
+                                    width: calc(100% - 68px);
+                                }
                             }
 
-                            &:last-child {
-                                display: inline-block;
-                                width: calc(100% - 68px);
+                            .status-f {
+                                color: #ff0000;
                             }
-                        }
 
-                        .status-f {
-                            color: #ff0000;
+                            .status-l {
+                                color: #3df6ff;
+                            }
                         }
 
-                        .status-l {
-                            color: #3df6ff;
-                        }
+
                     }
+                }
 
+                @media screen and (min-width: 1921px) and (max-width:2560px) {
+                    .item-r {
+                        position: absolute;
+                        left: 138px;
+                        top: 50%;
+                        transform: translate(0, -50%);
+                        width: calc(100% - 138px);
+                        height: 128px;
+                        padding: 5px 0px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+                        box-sizing: border-box;
+
+                        .content-r {
+                            display: flex;
+
+                            span {
+                                font-size: 14px;
+
+                                &:first-child {
+                                    display: inline-block;
+                                    width: 68px;
+                                }
+
+                                &:last-child {
+                                    display: inline-block;
+                                    width: calc(100% - 68px);
+                                }
+                            }
+
+                            .status-f {
+                                color: #ff0000;
+                            }
+
+                            .status-l {
+                                color: #3df6ff;
+                            }
+                        }
+                    }
 
                 }