告警弹窗

src/App.vue

@@ -2,7 +2,7 @@
   <div class="home">
     <header>
       <img @click="kc0" src="./assets/image/logo.png" alt="" />
-      <p @click="mockPost">上海滨江中心IOC大屏控制台</p>
+      <p>上海滨江中心IOC大屏控制台</p>
     </header>
     <main>
       <div class="left-nav">
@@ -43,16 +43,20 @@
       <div class="inner-list">
         <div
           class="item"
-          :class="{ 'new-alarm': item.isNew }"
+          :class="{
+            'new-alarm': item.isNew,
+            active: alarmActiveIndex == index,
+          }"
           v-for="(item, index) in alarmList"
           :key="index"
+          @click="alarmClickHandle(index)"
         >
-          <div class="key">{{ item.deviceName }}</div>
-          <div class="key">{{ item.devicePosition }}</div>
+          <div class="key">{{ item.devName }}</div>
+          <div class="key">{{ item.devLocation }}</div>
           <div class="key">
             {{ item.alarmTime.substring(item.alarmTime.length - 9) }}
           </div>
-          <div class="key">{{ item.alarmType }}</div>
+          <div class="key">{{ item.devType }}</div>
         </div>
       </div>
     </div>
@@ -147,11 +151,13 @@ export default {
       showProjectList: false,
       isShowClose: false,
       alarmList: [],
+      alarmActiveIndex: -1,
     };
   },
   created() {
     // this.getBuildListData();
     this.initSocket();
+    this.getAlarmList();
   },
   methods: {
     getBuildListData() {
@@ -336,6 +342,30 @@ export default {
         websocket.close();
       };
     },
+    // 获取报警信息列表接口
+    getAlarmList() {
+      this.$axios.get("/alarmMsg/msgList").then((e) => {
+        this.alarmList = e.data;
+      });
+    },
+    // 点击报警事件
+    alarmClickHandle(index) {
+      console.log(index);
+      console.log(this.alarmList[index]);
+      if (this.alarmActiveIndex == index) {
+        this.alarmActiveIndex = -1;
+        this.$axios.post("/osc/sendInt", {
+          arg: "",
+          name: "/GJTC_MSG_CLOSE",
+        });
+      } else {
+        this.alarmActiveIndex = index;
+        this.$axios.post("/osc/sendString", {
+          arg: JSON.stringify({ data: this.alarmList[index] }),
+          name: "/BJTC_OSC",
+        });
+      }
+    },
   },
 };
 </script>
@@ -563,6 +593,11 @@ body {
         line-height: 45px;
         margin-bottom: 10px;
         overflow: hidden;
+        background: #fff;
+        &.active {
+          background: #ffdada;
+        }
+
         &.new-alarm {
           background-image: linear-gradient(125deg, #f44336, #e91e63, #fff);
           background-size: 400%;

src/views/tingche.vue

@@ -13,7 +13,7 @@
           placeholder="请输入文案"
         />
         <div class="btn1 active" @click="search">查询</div>
-        <div class="btn1" @click="closeT">取消</div>
+        <div class="btn1" @click="value = ''">取消</div>
       </div>
     </div>
     <section>
@@ -33,16 +33,9 @@
         </div>
       </div>
     </section>
-    <!-- <section>
-      <div class="title-box">
-        <div class="title">车位列表</div>
-        <div class="style-line"></div>
+    <div class="pop" v-if="showPop">
+      <div class="btn1" @click="closeT">关闭</div>
     </div>
-      <div class="submit-box">
-        <div class="btn3 active2">MJ2332</div>
-        <div class="btn3">MJ2334</div>
-      </div>
-    </section> -->
   </div>
 </template>
 
@@ -54,6 +47,7 @@ export default {
       value: "",
       activeIndex: 0,
       btnList: ["LG", "B2"],
+      showPop: false,
     };
   },
   methods: {
@@ -68,7 +62,7 @@ export default {
         })
         .then((res) => {
           if (res.code == 0) {
-            // alert("操作成功");
+            this.showPop = true;
             this.$axios
               .post("/osc/sendString", {
                 arg: JSON.stringify(res),
@@ -90,13 +84,14 @@ export default {
         .then(() => {});
     },
     closeT() {
+      this.showPop = false;
       this.$axios
         .post("/osc/sendInt", {
-          arg: '',
+          arg: "",
           name: "/GJTC_MSG_CLOSE",
         })
         .then(() => {});
-    }
+    },
   },
 };
 </script>
@@ -176,5 +171,23 @@ export default {
       margin-bottom: 18px;
     }
   }
+  .pop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+    background: rgba(255, 255, 255, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .btn1 {
+      background: rgba(255, 255, 255, 0.2);
+      transform: scale(1.5);
+      border: 1px solid #737780;
+      border-radius: 5px;
+    }
+  }
 }
 </style>
\ No newline at end of file