Skip to content

huarun-binjiang-ipad / ipad

Go to a project
Commit 9cbc607f by liuwange1
Options

告警弹窗

parent 8e8f99fc
Showing with 68 additions and 19 deletions
src/App.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="home"> <div class="home">
<header> <header>
<img @click="kc0" src="./assets/image/logo.png" alt="" /> <img @click="kc0" src="./assets/image/logo.png" alt="" />
<p @click="mockPost">上海滨江中心IOC大屏控制台</p> <p>上海滨江中心IOC大屏控制台</p>
</header> </header>
<main> <main>
<div class="left-nav"> <div class="left-nav">
...@@ -43,16 +43,20 @@ ...@@ -43,16 +43,20 @@
<div class="inner-list"> <div class="inner-list">
<div <div
class="item" class="item"
:class="{ 'new-alarm': item.isNew }" :class="{
'new-alarm': item.isNew,
active: alarmActiveIndex == index,
}"
v-for="(item, index) in alarmList" v-for="(item, index) in alarmList"
:key="index" :key="index"
@click="alarmClickHandle(index)"
> >
<div class="key">{{ item.deviceName }}</div> <div class="key">{{ item.devName }}</div>
<div class="key">{{ item.devicePosition }}</div> <div class="key">{{ item.devLocation }}</div>
<div class="key"> <div class="key">
{{ item.alarmTime.substring(item.alarmTime.length - 9) }} {{ item.alarmTime.substring(item.alarmTime.length - 9) }}
</div> </div>
<div class="key">{{ item.alarmType }}</div> <div class="key">{{ item.devType }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -147,11 +151,13 @@ export default { ...@@ -147,11 +151,13 @@ export default {
showProjectList: false, showProjectList: false,
isShowClose: false, isShowClose: false,
alarmList: [], alarmList: [],
alarmActiveIndex: -1,
}; };
}, },
created() { created() {
// this.getBuildListData(); // this.getBuildListData();
this.initSocket(); this.initSocket();
this.getAlarmList();
}, },
methods: { methods: {
getBuildListData() { getBuildListData() {
...@@ -336,6 +342,30 @@ export default { ...@@ -336,6 +342,30 @@ export default {
websocket.close(); 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> </script>
...@@ -563,6 +593,11 @@ body { ...@@ -563,6 +593,11 @@ body {
line-height: 45px; line-height: 45px;
margin-bottom: 10px; margin-bottom: 10px;
overflow: hidden; overflow: hidden;
background: #fff;
&.active {
background: #ffdada;
}
&.new-alarm { &.new-alarm {
background-image: linear-gradient(125deg, #f44336, #e91e63, #fff); background-image: linear-gradient(125deg, #f44336, #e91e63, #fff);
background-size: 400%; background-size: 400%;
......
src/views/tingche.vue
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
placeholder="请输入文案" placeholder="请输入文案"
/> />
<div class="btn1 active" @click="search">查询</div> <div class="btn1 active" @click="search">查询</div>
<div class="btn1" @click="closeT">取消</div> <div class="btn1" @click="value = ''">取消</div>
</div> </div>
</div> </div>
<section> <section>
...@@ -33,16 +33,9 @@ ...@@ -33,16 +33,9 @@
</div> </div>
</div> </div>
</section> </section>
<!-- <section> <div class="pop" v-if="showPop">
<div class="title-box"> <div class="btn1" @click="closeT">关闭</div>
<div class="title">车位列表</div> </div>
<div class="style-line"></div>
</div>
<div class="submit-box">
<div class="btn3 active2">MJ2332</div>
<div class="btn3">MJ2334</div>
</div>
</section> -->
</div> </div>
</template> </template>
...@@ -54,6 +47,7 @@ export default { ...@@ -54,6 +47,7 @@ export default {
value: "", value: "",
activeIndex: 0, activeIndex: 0,
btnList: ["LG", "B2"], btnList: ["LG", "B2"],
showPop: false,
}; };
}, },
methods: { methods: {
...@@ -68,7 +62,7 @@ export default { ...@@ -68,7 +62,7 @@ export default {
}) })
.then((res) => { .then((res) => {
if (res.code == 0) { if (res.code == 0) {
// alert("操作成功"); this.showPop = true;
this.$axios this.$axios
.post("/osc/sendString", { .post("/osc/sendString", {
arg: JSON.stringify(res), arg: JSON.stringify(res),
...@@ -90,13 +84,14 @@ export default { ...@@ -90,13 +84,14 @@ export default {
.then(() => {}); .then(() => {});
}, },
closeT() { closeT() {
this.showPop = false;
this.$axios this.$axios
.post("/osc/sendInt", { .post("/osc/sendInt", {
arg: '', arg: "",
name: "/GJTC_MSG_CLOSE", name: "/GJTC_MSG_CLOSE",
}) })
.then(() => {}); .then(() => {});
} },
}, },
}; };
</script> </script>
...@@ -176,5 +171,23 @@ export default { ...@@ -176,5 +171,23 @@ export default {
margin-bottom: 18px; 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> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment