|
@@ -10,27 +10,9 @@
|
|
<div class="main-container">
|
|
<div class="main-container">
|
|
<app-main />
|
|
<app-main />
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <el-dialog width="30%" v-for="(item, index) in warningSocketList" :visible.sync="item.show"
|
|
|
|
|
|
+ <!-- <el-dialog width="30%" v-for="(item, index) in warningSocketList" :visible.sync="item.show"
|
|
:top="100 + index * 40 + 'px'" class="0" title="报警信息提示" :show-close="false" :close-on-click-modal="false">
|
|
:top="100 + index * 40 + 'px'" class="0" title="报警信息提示" :show-close="false" :close-on-click-modal="false">
|
|
- <!-- <div style="display: flex;align-items: center;">
|
|
|
|
- <img style="width: 70px;height: 70px;margin-right: 15px;" :src="warningSocket.data.imageUrls">
|
|
|
|
- <div>
|
|
|
|
- <div> {{ warningSocket.data.railwayName }}</div>
|
|
|
|
- <div style="padding: 2px 10px;margin-top: 5px;border-radius: 5px;display: flex;">
|
|
|
|
- <div style="margin-right: 10px;">{{ warningSocket.data.alarmTime }}</div>
|
|
|
|
- <div style="margin-right: 10px;">{{ warningSocket.data.releasedTime }}</div>
|
|
|
|
- <div style="margin-right: 10px;">{{ warningSocket.data.alarmType == 1 ? '泥石流' : '' }}</div>
|
|
|
|
- <div style="margin-right: 15px;">{{ warningSocket.data.lineDirStr }}</div>
|
|
|
|
- <div style="margin-right: 15px;">里程位置{{ warningSocket.data.alarmMile }}</div>
|
|
|
|
- <div style="margin-right: 15px;">里程范围 {{ warningSocket.data.beginMile }}</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div> -->
|
|
|
|
-
|
|
|
|
<div class="warning-view">
|
|
<div class="warning-view">
|
|
- <!-- <el-image style="color:cornflowerblue" class="warning-image" cursor:pointer :src="item.imageUrls[0]"
|
|
|
|
- :preview-src-list="item.imageUrls" fit="contain"></el-image> -->
|
|
|
|
<img style="width: 200px; margin-right: 15px" :src="item.data.imageUrls && item.data.imageUrls[0]" />
|
|
<img style="width: 200px; margin-right: 15px" :src="item.data.imageUrls && item.data.imageUrls[0]" />
|
|
<div class="warning-content">
|
|
<div class="warning-content">
|
|
<div class="text-base text-1">
|
|
<div class="text-base text-1">
|
|
@@ -47,11 +29,6 @@
|
|
<span>{{ item.data.lineDirStr }},</span>
|
|
<span>{{ item.data.lineDirStr }},</span>
|
|
<span>里程位置{{ item.data.alarmMile }}</span>
|
|
<span>里程位置{{ item.data.alarmMile }}</span>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <!-- <div class="text-base"></div> -->
|
|
|
|
- <!-- <div class="text-base">行别:</div> -->
|
|
|
|
-
|
|
|
|
- <!-- <div class="text-base">经度纬度:54,345,65.235</div> -->
|
|
|
|
<div class="text-base">{{ item.data.alarmTime }}</div>
|
|
<div class="text-base">{{ item.data.alarmTime }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -64,7 +41,36 @@
|
|
我知道了
|
|
我知道了
|
|
</div>
|
|
</div>
|
|
</span>
|
|
</span>
|
|
- </el-dialog>
|
|
|
|
|
|
+ </el-dialog> -->
|
|
|
|
+
|
|
|
|
+ <div
|
|
|
|
+ id="close"
|
|
|
|
+ class="warnDialog"
|
|
|
|
+ >
|
|
|
|
+ <div>
|
|
|
|
+ <div class="closeBtn" @click="toClose">
|
|
|
|
+ <i class="el-icon-close"></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="warnTitle">
|
|
|
|
+ <img
|
|
|
|
+ width="16"
|
|
|
|
+ height="16"
|
|
|
|
+ src="@/assets/warnTitleIcon.png/"
|
|
|
|
+ alt=""
|
|
|
|
+ >
|
|
|
|
+ 未解除报警个数:<span class="warnNum" id="warnNum">{{ this.warnNum }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="margin-top:10px;color:#fff">
|
|
|
|
+ 最新报警时间:<span id="warnTime">{{ this.getNewerTime }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <el-button
|
|
|
|
+ type="primary"
|
|
|
|
+ size="small"
|
|
|
|
+ style="margin-top: 10px; float: right; pointer-events: all"
|
|
|
|
+ @click="showWarn"
|
|
|
|
+ >查看详细信息</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -73,9 +79,10 @@ import { Navbar, Sidebar, AppMain } from "./components";
|
|
import Breadcrumb from "@/components/Breadcrumb";
|
|
import Breadcrumb from "@/components/Breadcrumb";
|
|
import ResizeMixin from "./mixin/ResizeHandler";
|
|
import ResizeMixin from "./mixin/ResizeHandler";
|
|
import Socket from "@/socket/socket";
|
|
import Socket from "@/socket/socket";
|
|
-import { msgAlarmRead } from "@/api/alarmList";
|
|
|
|
|
|
+import { msgAlarmRead,msgAlarmWebAlarm,msgAlarmList } from "@/api/alarmList";
|
|
import { sdkGetMessage } from "@/api/sdk";
|
|
import { sdkGetMessage } from "@/api/sdk";
|
|
import store from "@/store";
|
|
import store from "@/store";
|
|
|
|
+import router from '@/router'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
name: "Layout",
|
|
name: "Layout",
|
|
@@ -93,6 +100,14 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
+ data(){
|
|
|
|
+ return{
|
|
|
|
+ warnVisible: false,
|
|
|
|
+ warnNum: 0,
|
|
|
|
+ getNewerTime:'',
|
|
|
|
+ warningSocketList: null,
|
|
|
|
+ }
|
|
|
|
+ },
|
|
computed: {
|
|
computed: {
|
|
isHome() {
|
|
isHome() {
|
|
return this.$route.path == "/dashboard";
|
|
return this.$route.path == "/dashboard";
|
|
@@ -121,10 +136,82 @@ export default {
|
|
warningSocketList: [],
|
|
warningSocketList: [],
|
|
};
|
|
};
|
|
},
|
|
},
|
|
|
|
+ created(){
|
|
|
|
+ this.$eventBus.$on('customEvent', () => {
|
|
|
|
+ // 执行需要触发的方法
|
|
|
|
+ this.getWtsAlarm()
|
|
|
|
+ });
|
|
|
|
+ },
|
|
mounted() {
|
|
mounted() {
|
|
|
|
+ this.getWtsAlarm()
|
|
this.startWebSocket();
|
|
this.startWebSocket();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ getWtsAlarm(){
|
|
|
|
+ const params = {
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 100000000,
|
|
|
|
+ isRelease: '2'
|
|
|
|
+ }
|
|
|
|
+ msgAlarmList(params).then((res) => {
|
|
|
|
+ const timeArray = res.data.records.map(item =>
|
|
|
|
+ item.alarmTime
|
|
|
|
+ )
|
|
|
|
+ // 获取当前时间
|
|
|
|
+ const currentTime = new Date()
|
|
|
|
+
|
|
|
|
+ // 初始化最近时间为数组中的第一个时间
|
|
|
|
+ let closestTime = new Date(timeArray[0])
|
|
|
|
+ let timeDiff = Math.abs(currentTime - closestTime)
|
|
|
|
+
|
|
|
|
+ // 遍历数组中的时间,找到离当前时间最近的时间
|
|
|
|
+ timeArray.forEach(timeStr => {
|
|
|
|
+ const time = new Date(timeStr.replace(/-/g, '/').replace(' ', 'T'))
|
|
|
|
+ const diff = Math.abs(currentTime - time)
|
|
|
|
+ if (diff < timeDiff) {
|
|
|
|
+ closestTime = time
|
|
|
|
+ timeDiff = diff
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ if (res.data.records.length > 0) {
|
|
|
|
+ // this.warnVisible = true
|
|
|
|
+
|
|
|
|
+ this.warnNum = res.data.records.length
|
|
|
|
+ this.getNewerTime= this.getTime(closestTime)
|
|
|
|
+ const closeBox = document.getElementById('close');
|
|
|
|
+ closeBox.style.display='block'
|
|
|
|
+ document.getElementById('warnNum').textContent=this.warnNum
|
|
|
|
+ document.getElementById('warnTime').textContent=this.getNewerTime
|
|
|
|
+ if (document.querySelector('#audio')) {
|
|
|
|
+ const audio = document.querySelector('#audio')
|
|
|
|
+ audio.muted = false
|
|
|
|
+ audio.play()
|
|
|
|
+ } else {
|
|
|
|
+ var audio = document.createElement('audio')
|
|
|
|
+ audio.setAttribute('id', 'audio')
|
|
|
|
+ audio.src = './video.mp3'
|
|
|
|
+ document.body.append(audio)
|
|
|
|
+ audio.play()
|
|
|
|
+
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ document.body.removeChild(audio)
|
|
|
|
+ }, 3000)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getTime(data){
|
|
|
|
+ const date = new Date(data);
|
|
|
|
+
|
|
|
|
+// 获取年、月、日、时、分、秒
|
|
|
|
+const year = date.getFullYear();
|
|
|
|
+const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始,需要加1并补零
|
|
|
|
+const day = String(date.getDate()).padStart(2, '0');
|
|
|
|
+const hours = String(date.getHours()).padStart(2, '0');
|
|
|
|
+const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
|
|
+const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
|
|
+return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|
|
|
+ },
|
|
handleClickOutside() {
|
|
handleClickOutside() {
|
|
this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
|
|
this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
|
|
},
|
|
},
|
|
@@ -141,30 +228,28 @@ export default {
|
|
|
|
|
|
resolve();
|
|
resolve();
|
|
},
|
|
},
|
|
- "socket-message": (res) => {
|
|
|
|
|
|
+ "socket-message": async(res) => {
|
|
console.log("Socket接受信息", res);
|
|
console.log("Socket接受信息", res);
|
|
if (res.code == 110) {
|
|
if (res.code == 110) {
|
|
// this.warningSocket.show = true
|
|
// this.warningSocket.show = true
|
|
// this.warningSocket.data = res.data
|
|
// this.warningSocket.data = res.data
|
|
// console.log(this.warningSocket.data)
|
|
// console.log(this.warningSocket.data)
|
|
-
|
|
|
|
|
|
+ await msgAlarmWebAlarm().then((res) => {
|
|
|
|
+ this.warnNum =res.data.webAlarmNum
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ this.getWtsAlarm()
|
|
|
|
+ // this.warnVisible = true
|
|
|
|
+ const closeBox = document.getElementById('close');
|
|
|
|
+ closeBox.style.display='block'
|
|
|
|
+ document.getElementById('warnNum').textContent=this.warnNum
|
|
|
|
+ document.getElementById('warnTime').textContent=this.getNewerTime
|
|
this.warningSocketList.push({
|
|
this.warningSocketList.push({
|
|
show: true,
|
|
show: true,
|
|
data: res.data,
|
|
data: res.data,
|
|
});
|
|
});
|
|
|
|
|
|
- if (document.querySelector('audio')) {
|
|
|
|
- document.querySelector("audio").play()
|
|
|
|
- } else {
|
|
|
|
- var audio = document.createElement("audio")
|
|
|
|
- audio.src = './video.mp3'
|
|
|
|
- document.body.append(audio)
|
|
|
|
- audio.play()
|
|
|
|
-
|
|
|
|
- setTimeout(() => {
|
|
|
|
- document.body.removeChild(audio)
|
|
|
|
- }, 3000)
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
this.$store.state.app.warningSocket.list.push(res.data);
|
|
this.$store.state.app.warningSocket.list.push(res.data);
|
|
this.$store.state.app.warningSocket.list = JSON.parse(
|
|
this.$store.state.app.warningSocket.list = JSON.parse(
|
|
JSON.stringify(this.$store.state.app.warningSocket.list)
|
|
JSON.stringify(this.$store.state.app.warningSocket.list)
|
|
@@ -216,6 +301,18 @@ export default {
|
|
this.warningSocketList[index].show = false;
|
|
this.warningSocketList[index].show = false;
|
|
this.warningSocketList.splice(index, 1);
|
|
this.warningSocketList.splice(index, 1);
|
|
},
|
|
},
|
|
|
|
+ showWarn() {
|
|
|
|
+ if (this.$route.path === '/list') {
|
|
|
|
+ window.refreshList()
|
|
|
|
+ } else router.push({ path: '/list', query: { zhangtai: '2' }})
|
|
|
|
+ },
|
|
|
|
+ toClose(){
|
|
|
|
+ const close = document.getElementById('close');
|
|
|
|
+ console.log(close,'vvvvv');
|
|
|
|
+ close.style.display='none'
|
|
|
|
+ // this.warnVisible=false
|
|
|
|
+ // alert(this.warnVisible)
|
|
|
|
+ }
|
|
},
|
|
},
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
@@ -225,7 +322,6 @@ export default {
|
|
@import "~@/styles/variables.scss";
|
|
@import "~@/styles/variables.scss";
|
|
|
|
|
|
.nav-header {
|
|
.nav-header {
|
|
- background: red;
|
|
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
@@ -360,4 +456,45 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+.warnDialog {
|
|
|
|
+ display: block;
|
|
|
|
+ height: 130px;
|
|
|
|
+ width: 350px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 20px;
|
|
|
|
+ right: 20px;
|
|
|
|
+ padding: 20px;
|
|
|
|
+ z-index: 999;
|
|
|
|
+ box-shadow: 0px 2px 12px 1px #0b285b;
|
|
|
|
+ border-radius: 12px;
|
|
|
|
+ background: linear-gradient(
|
|
|
|
+ 183deg,
|
|
|
|
+ #2766dd 0%,
|
|
|
|
+ #0d2855 53%,
|
|
|
|
+ #041a3a 100%
|
|
|
|
+ );
|
|
|
|
+ .warnTitle {
|
|
|
|
+ width: 212px;
|
|
|
|
+ height: 32px;
|
|
|
|
+ line-height: 32px;
|
|
|
|
+ padding-left: 8px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ background: url(../assets/warnTitle.png) center / 100%;
|
|
|
|
+ }
|
|
|
|
+ .warnNum {
|
|
|
|
+ padding: 0 6px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ color: #f00404;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.closeBtn{
|
|
|
|
+ position:absolute;
|
|
|
|
+ top:12px;
|
|
|
|
+ right:12px;
|
|
|
|
+ color:#fff;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ z-index: 999;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|