|
|
@@ -1,191 +1,191 @@
|
|
|
-<template>
|
|
|
- <div class="panel alarming">
|
|
|
- <div class="panel-tit">告警信息</div>
|
|
|
-
|
|
|
- <table class="alarm-table">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th>序号</th>
|
|
|
- <th>报警时间</th>
|
|
|
- <th>报警事件</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- </table>
|
|
|
- <div class="scroll gj">
|
|
|
- <table class="alarm-table">
|
|
|
- <tbody id="scroll-box">
|
|
|
- <tr v-for="item in arrayList" :key="item.id" @click="alarm">
|
|
|
-
|
|
|
- <td>{{ item.id }}</td>
|
|
|
- <td class="online">{{ item.creatTime }}</td>
|
|
|
- <td>
|
|
|
- {{item.eventtriger == '1' ? "恢复事件" : item.eventtriger == '2' ? "触发事件" :""}}
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- <div class="panel-footer"></div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import api from "@/api/alarming"
|
|
|
-export default {
|
|
|
- name: "alarming",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- username: "",
|
|
|
- path: "",
|
|
|
- socket: "",
|
|
|
- arrayList: [],
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // 初始化
|
|
|
- this.init();
|
|
|
- this.scroll();
|
|
|
- setInterval(()=>{
|
|
|
- this.scroll();
|
|
|
- },1000 * 10)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- alarm(){
|
|
|
- this.$router.push({
|
|
|
- path: '/alarm/alarm-log/index',
|
|
|
- })
|
|
|
- },
|
|
|
- scroll() {
|
|
|
- api.queryPerimeterAlarm().then((response)=>{
|
|
|
- if(response.status == "SUCCESS"){
|
|
|
- if(response.data.pageList.length>0){
|
|
|
- this.arrayList = response.data.pageList
|
|
|
- //滚动
|
|
|
- // if (this.arrayList.length > 5) {
|
|
|
- // const dom = document.getElementById("scroll-box");
|
|
|
- // const that = this;
|
|
|
- // let timer = null;
|
|
|
- // const animationEndHandler = (evt) => {
|
|
|
- // const dom = document.getElementById("scroll-box");
|
|
|
- // dom.style.cssText = "transform:translate(0,0)";
|
|
|
- // dom.appendChild(dom.children[0]); //把第一个DOM添加到最后一个去
|
|
|
- // };
|
|
|
- // const mouseEnterHander = (evt) => {
|
|
|
- // clearInterval(timer);
|
|
|
- // };
|
|
|
- // const initInterval = () => {
|
|
|
- // timer = setInterval(() => {
|
|
|
- // if (dom.children[0]) {
|
|
|
- // let scrollHeight = dom.children[0].offsetHeight;
|
|
|
- // scrollHeight = parseInt(scrollHeight);
|
|
|
- // dom.style.cssText = `transform:translate(0px,-${
|
|
|
- // scrollHeight
|
|
|
- // }px);transition:all 1s ease;`;
|
|
|
- // }
|
|
|
- // }, 3000);
|
|
|
- // };
|
|
|
- // const mouseLeaveHandler = () => {
|
|
|
- // initInterval();
|
|
|
- // };
|
|
|
- // dom.addEventListener("mouseenter", mouseEnterHander);
|
|
|
- // dom.addEventListener("mouseleave", mouseLeaveHandler);
|
|
|
- // dom.removeEventListener("transitionend", animationEndHandler);
|
|
|
- // dom.addEventListener("transitionend", animationEndHandler); //只要监听到translate就会执行,这样就能一直动了
|
|
|
- // initInterval();
|
|
|
- // }
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
- init: function () {
|
|
|
- let wsUrl = window.PLATFROM_WEBSOCKET.wsUrl
|
|
|
- this.path = wsUrl;
|
|
|
- if (typeof WebSocket === "undefined") {
|
|
|
- alert("您的浏览器不支持socket");
|
|
|
- } else {
|
|
|
- // 实例化socket
|
|
|
- this.socket = new WebSocket(this.path);
|
|
|
- // 监听socket连接
|
|
|
- this.socket.onopen = this.open;
|
|
|
- // 监听socket错误信息
|
|
|
- this.socket.onerror = this.error;
|
|
|
- // 监听socket消息
|
|
|
- this.socket.onmessage = this.getMessage;
|
|
|
- }
|
|
|
- },
|
|
|
- open: function () {
|
|
|
- console.log("socket连接成功");
|
|
|
- },
|
|
|
- error: function () {
|
|
|
- console.log("连接错误");
|
|
|
- },
|
|
|
- getMessage: function (msg) {
|
|
|
- this.arrayList = JSON.parse(msg.data)
|
|
|
- },
|
|
|
- send: function () {
|
|
|
- this.socket.send("admin");
|
|
|
- },
|
|
|
- close: function () {
|
|
|
- console.log("socket已经关闭");
|
|
|
- },
|
|
|
- },
|
|
|
- destroyed() {
|
|
|
- // 销毁监听
|
|
|
- this.socket.onclose = this.close;
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-#scroll-box {
|
|
|
- height: 16rem;
|
|
|
-}
|
|
|
-.panel.alarming {
|
|
|
- margin-top: 2rem;
|
|
|
- z-index: 3;
|
|
|
- box-sizing: border-box;
|
|
|
- table {
|
|
|
- padding: 0 1rem;
|
|
|
-
|
|
|
- border-spacing: 0;
|
|
|
- }
|
|
|
-
|
|
|
- tr td,
|
|
|
- tr th {
|
|
|
- font-size: 1.4rem;
|
|
|
- height:0.5rem;
|
|
|
- line-height: 3rem;
|
|
|
- text-align: left;
|
|
|
- // padding: 0 1rem;
|
|
|
- // padding: 0;
|
|
|
- // margin: 0;
|
|
|
- // background:pink;
|
|
|
- border-bottom: 1px solid #1c5899;
|
|
|
- border-left: 0px solid red;
|
|
|
- border-right: 0px solid red;
|
|
|
- border-top: 0px solid red;
|
|
|
- }
|
|
|
- .alarm-table tr td:first-child,
|
|
|
- .alarm-table tr th:first-child {
|
|
|
- width: 16%;
|
|
|
- }
|
|
|
-
|
|
|
- .alarm-table tr td:nth-child(2),
|
|
|
- .alarm-table tr th:nth-child(2) {
|
|
|
- width: 60%;
|
|
|
- }
|
|
|
-
|
|
|
- .alarm-table tr td:nth-child(3),
|
|
|
- .alarm-table tr th:nth-child(3) {
|
|
|
- width: 100px;
|
|
|
- }
|
|
|
-}
|
|
|
-.gj{
|
|
|
- height: calc(100vh - 80rem);
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-.alarm-table tr td{
|
|
|
- height:30px !important;
|
|
|
-}
|
|
|
-</style>
|
|
|
-<style lang="scss">
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <div class="panel alarming">
|
|
|
+ <div class="panel-tit">告警信息</div>
|
|
|
+
|
|
|
+ <table class="alarm-table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>序号</th>
|
|
|
+ <th>报警时间</th>
|
|
|
+ <th>报警事件</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ </table>
|
|
|
+ <div class="scroll gj">
|
|
|
+ <table class="alarm-table">
|
|
|
+ <tbody id="scroll-box">
|
|
|
+ <tr v-for="item in arrayList" :key="item.id" @click="alarm">
|
|
|
+
|
|
|
+ <td>{{ item.id }}</td>
|
|
|
+ <td class="online">{{ item.creatTime }}</td>
|
|
|
+ <td>
|
|
|
+ {{item.eventtriger == '1' ? "恢复事件" : item.eventtriger == '2' ? "触发事件" :""}}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="panel-footer"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import api from "@/api/alarming"
|
|
|
+export default {
|
|
|
+ name: "alarming",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ username: "",
|
|
|
+ path: "",
|
|
|
+ socket: "",
|
|
|
+ arrayList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 初始化
|
|
|
+ this.init();
|
|
|
+ this.scroll();
|
|
|
+ setInterval(()=>{
|
|
|
+ this.scroll();
|
|
|
+ },1000 * 10)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ alarm(){
|
|
|
+ this.$router.push({
|
|
|
+ path: '/alarm/alarm-log/index',
|
|
|
+ })
|
|
|
+ },
|
|
|
+ scroll() {
|
|
|
+ api.queryPerimeterAlarm().then((response)=>{
|
|
|
+ if(response.status == "SUCCESS"){
|
|
|
+ if(response.data.pageList.length>0){
|
|
|
+ this.arrayList = response.data.pageList
|
|
|
+ //滚动
|
|
|
+ // if (this.arrayList.length > 5) {
|
|
|
+ // const dom = document.getElementById("scroll-box");
|
|
|
+ // const that = this;
|
|
|
+ // let timer = null;
|
|
|
+ // const animationEndHandler = (evt) => {
|
|
|
+ // const dom = document.getElementById("scroll-box");
|
|
|
+ // dom.style.cssText = "transform:translate(0,0)";
|
|
|
+ // dom.appendChild(dom.children[0]); //把第一个DOM添加到最后一个去
|
|
|
+ // };
|
|
|
+ // const mouseEnterHander = (evt) => {
|
|
|
+ // clearInterval(timer);
|
|
|
+ // };
|
|
|
+ // const initInterval = () => {
|
|
|
+ // timer = setInterval(() => {
|
|
|
+ // if (dom.children[0]) {
|
|
|
+ // let scrollHeight = dom.children[0].offsetHeight;
|
|
|
+ // scrollHeight = parseInt(scrollHeight);
|
|
|
+ // dom.style.cssText = `transform:translate(0px,-${
|
|
|
+ // scrollHeight
|
|
|
+ // }px);transition:all 1s ease;`;
|
|
|
+ // }
|
|
|
+ // }, 3000);
|
|
|
+ // };
|
|
|
+ // const mouseLeaveHandler = () => {
|
|
|
+ // initInterval();
|
|
|
+ // };
|
|
|
+ // dom.addEventListener("mouseenter", mouseEnterHander);
|
|
|
+ // dom.addEventListener("mouseleave", mouseLeaveHandler);
|
|
|
+ // dom.removeEventListener("transitionend", animationEndHandler);
|
|
|
+ // dom.addEventListener("transitionend", animationEndHandler); //只要监听到translate就会执行,这样就能一直动了
|
|
|
+ // initInterval();
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ init: function () {
|
|
|
+ let wsUrl = process.env.VUE_APP_WEBSOCKET_API + localStorage.getItem("vue_admin_template_token1708")
|
|
|
+ this.path = wsUrl;
|
|
|
+ if (typeof WebSocket === "undefined") {
|
|
|
+ alert("您的浏览器不支持socket");
|
|
|
+ } else {
|
|
|
+ // 实例化socket
|
|
|
+ this.socket = new WebSocket(this.path);
|
|
|
+ // 监听socket连接
|
|
|
+ this.socket.onopen = this.open;
|
|
|
+ // 监听socket错误信息
|
|
|
+ this.socket.onerror = this.error;
|
|
|
+ // 监听socket消息
|
|
|
+ this.socket.onmessage = this.getMessage;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ open: function () {
|
|
|
+ console.log("socket连接成功");
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ console.log("连接错误");
|
|
|
+ },
|
|
|
+ getMessage: function (msg) {
|
|
|
+ this.arrayList = JSON.parse(msg.data)
|
|
|
+ },
|
|
|
+ send: function () {
|
|
|
+ this.socket.send("admin");
|
|
|
+ },
|
|
|
+ close: function () {
|
|
|
+ console.log("socket已经关闭");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ // 销毁监听
|
|
|
+ this.socket.onclose = this.close;
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+#scroll-box {
|
|
|
+ height: 16rem;
|
|
|
+}
|
|
|
+.panel.alarming {
|
|
|
+ margin-top: 2rem;
|
|
|
+ z-index: 3;
|
|
|
+ box-sizing: border-box;
|
|
|
+ table {
|
|
|
+ padding: 0 1rem;
|
|
|
+
|
|
|
+ border-spacing: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ tr td,
|
|
|
+ tr th {
|
|
|
+ font-size: 1.4rem;
|
|
|
+ height:0.5rem;
|
|
|
+ line-height: 3rem;
|
|
|
+ text-align: left;
|
|
|
+ // padding: 0 1rem;
|
|
|
+ // padding: 0;
|
|
|
+ // margin: 0;
|
|
|
+ // background:pink;
|
|
|
+ border-bottom: 1px solid #1c5899;
|
|
|
+ border-left: 0px solid red;
|
|
|
+ border-right: 0px solid red;
|
|
|
+ border-top: 0px solid red;
|
|
|
+ }
|
|
|
+ .alarm-table tr td:first-child,
|
|
|
+ .alarm-table tr th:first-child {
|
|
|
+ width: 16%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .alarm-table tr td:nth-child(2),
|
|
|
+ .alarm-table tr th:nth-child(2) {
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .alarm-table tr td:nth-child(3),
|
|
|
+ .alarm-table tr th:nth-child(3) {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.gj{
|
|
|
+ height: calc(100vh - 80rem);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.alarm-table tr td{
|
|
|
+ height:30px !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+</style>
|
wangtao