<template>
|
<div :class="classObj" class="main-warp">
|
<div v-if="sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
<audio
|
:src="speakSrc"
|
v-show="false"
|
controls
|
autoplay
|
@error="endSpeak"
|
@ended="endSpeak"
|
v-if="isShowSpeak"
|
>
|
<source :src="speakSrc" type="audio/ogg" />
|
<source :src="speakSrc" type="audio/mpeg" />
|
<source :src="speakSrc" type="audio/wav" />
|
</audio>
|
<sidebar />
|
<div :class="{ hasTagsView: needTagsView , 'no-footer-alarm': !showFtAlarm}" class="main-container">
|
<flex-layout class="page-home" no-bg>
|
<div :class="{ 'fixed-header': fixedHeader }" slot="header">
|
<navbar />
|
<tags-view />
|
</div>
|
<app-main />
|
<div slot="footer" v-if="showFtAlarm">
|
<marqueeLeft :sendVal="newItems" v-if="showMarqueeLeft"></marqueeLeft>
|
<div class="no-warning-msg" v-else>最近24小时内无告警</div>
|
</div>
|
</flex-layout>
|
</div>
|
<alarm-popup
|
v-if="showAlarmPopup"
|
:speakInfo="speakInfo"
|
:list="newOneLevelItems"
|
:updateFlag="updateFlag"
|
></alarm-popup>
|
<approve-dialog></approve-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import { Navbar, Sidebar, AppMain, TagsView } from "./components";
|
import ResizeMixin from "./mixin/ResizeHandler";
|
import marqueeLeft from "./components/marqueeLeft";
|
import {
|
checkUserLogin,
|
delVoice,
|
getAlarmVoiceSetting,
|
getAllRealAlarm,
|
getVoiceList,
|
} from "@/layout/js/api";
|
import { const_alarm_level } from "@/assets/js/const";
|
import { getLabelByValue } from "@/assets/js/tools";
|
import config from "@/assets/js/config";
|
let timer;
|
import createWs from "@/assets/js/websocket/plus";
|
import {loginOutAPI, pingpong} from "@/views/login/js/api";
|
import Utils from "@/components/diagram/js/common.js";
|
const { throttle } = Utils;
|
import AlarmPopup from "@/layout/components/AlarmPopup";
|
import getNowStamp from "@/assets/js/tools/getNowStamp";
|
import getWebUrl from "@/assets/js/tools/getWebUrl";
|
import getFileName from "@/assets/js/tools/getFileName";
|
import ApproveDialog from "@/components/ApproveDialog.vue";
|
const WSMixin = createWs(
|
"battAlarmFoot",
|
"loginCheck",
|
"sendAlarmData",
|
"voice/wavRead"
|
);
|
// import getWsUrl from '@/assets/js/websocket/getWsUrl';
|
const times = 10 * 1000;
|
const updateSessionTime = throttle(pingpong, 1000 * 5);
|
// const wsUri2 = getWsUrl("loginCheck");
|
export default {
|
name: "Layout",
|
components: {
|
ApproveDialog,
|
AlarmPopup,
|
Navbar,
|
Sidebar,
|
AppMain,
|
TagsView,
|
marqueeLeft,
|
},
|
data() {
|
let baseUrl = getWebUrl();
|
return {
|
showAlarmPopup: config.alarmPopup.value,
|
list: [],
|
newItems: [],
|
// SOCKET2: null,
|
times,
|
timer2: null,
|
updateFlag: Math.random(),
|
baseUrl: baseUrl,
|
isClose: false,
|
speakSrc: "",
|
fileFullName: "",
|
speakSrcList: [],
|
isShowSpeak: false,
|
speakInfo: {
|
devId: "608700010",
|
almId: "119020",
|
},
|
timeoutId: 0,
|
};
|
},
|
mixins: [ResizeMixin, WSMixin],
|
watch: {
|
"$store.state.ukey.isIn"(isIn) {
|
if (this.$CFG.uKey.value && !isIn) {
|
sessionStorage.removeItem("username");
|
sessionStorage.removeItem("userId");
|
sessionStorage.removeItem("userPower");
|
this.$store
|
.dispatch("tagsView/delAllViews")
|
.then(({ visitedViews }) => {
|
this.$router.push("/login");
|
});
|
}
|
},
|
"$store.state.user.noSpeak"(val) {
|
console.log(val + "**********");
|
this.endSpeak();
|
},
|
},
|
computed: {
|
...mapGetters("user", ["noSpeak"]),
|
sidebar() {
|
return this.$store.state.app.sidebar;
|
},
|
device() {
|
return this.$store.state.app.device;
|
},
|
fixedHeader() {
|
return this.$store.state.settings.fixedHeader;
|
},
|
needTagsView() {
|
return this.$store.state.settings.tagsView;
|
},
|
classObj() {
|
return {
|
hideSidebar: !this.sidebar.opened,
|
openSidebar: this.sidebar.opened,
|
withoutAnimation: this.sidebar.withoutAnimation,
|
mobile: this.device === "mobile",
|
};
|
},
|
showMarqueeLeft() {
|
return typeof this.newItems == "undefined" || this.newItems.length == 0
|
? false
|
: true;
|
},
|
newOneLevelItems() {
|
return this.list.filter((item) => {
|
//return item;
|
return item.almLevel === 1;
|
});
|
},
|
showFtAlarm() {
|
return this.$CFG.clientName.name != 'szdt';
|
},
|
// isWSOpen2 () {
|
// return !!(this.SOCKET2 && 1 == this.SOCKET2.readyState);
|
// }
|
},
|
methods: {
|
onWSOpen1() {
|
this.sendMessage1();
|
},
|
sendMessage1() {
|
let userId = sessionStorage.getItem("userId");
|
this.SOCKET1.send(Number(userId));
|
},
|
onWSMessage1(res) {
|
let resData = JSON.parse(res.data);
|
this.list = resData.data.map((item) => {
|
item.stationObj = {
|
stationName: item.stationName,
|
stationName1: item.stationName1,
|
stationName2: item.stationName2,
|
stationName3: item.stationName3,
|
stationName4: item.stationName4,
|
stationName5: item.stationName5,
|
};
|
item.alarmLevel = getLabelByValue(
|
item.almLevel,
|
const_alarm_level.levelNumber,
|
"----"
|
);
|
let alarmType = Number(item.alarmType);
|
let alarmPoint = "";
|
switch (alarmType) {
|
case 1:
|
alarmPoint = "设备告警";
|
break;
|
case 2:
|
alarmPoint = "电源告警";
|
break;
|
default:
|
alarmPoint = "电池告警";
|
break;
|
}
|
|
item.alarmPoint = alarmPoint;
|
item.alarmGroupName = item.battgroupname?item.battgroupname:"";
|
item.alarmMon = item.monNum?'#'+item.monNum:"";
|
return item;
|
});
|
|
this.newItems = this.list.filter((item) => {
|
let nowStamp = getNowStamp();
|
let inputDate = Date.parse(item.almStartTime); //输入时间戳
|
return nowStamp - inputDate < 60 * 60 * 24 * 1000;
|
});
|
this.updateFlag = Math.random();
|
},
|
// checkUserLogin() {
|
// // 未被初始化初始化
|
// if (!this.isWSOpen2) {
|
// console.log('=====WSinit, url:', wsUri2);
|
// this.SOCKET2 = new WebSocket(wsUri2);
|
// this.SOCKET2.onmessage = this.onWSMessage2;
|
// this.SOCKET2.onopen = this.onWSOpen2;
|
// this.SOCKET2.onerror = this.onWSError2;
|
// this.SOCKET2.onclose = this.WSClose2;
|
// }
|
// // checkUserLogin()
|
// // .then((res) => {
|
// // let rs = res.data;
|
// // if (rs.code === 1) {
|
// // alert(rs.msg);
|
// // sessionStorage.removeItem("username");
|
// // sessionStorage.removeItem("userId");
|
// // sessionStorage.removeItem("userPower");
|
// // this.$router.push("/login");
|
// // } else {
|
// // clearTimeout(timer);
|
// // timer = setTimeout(() => {
|
// // this.checkUserLogin();
|
// // }, 3000);
|
// // }
|
// // })
|
// // .catch((error) => {
|
// // clearTimeout(timer);
|
// // timer = setTimeout(() => {
|
// // this.checkUserLogin();
|
// // }, 3000);
|
// // });
|
// },
|
// 互斥通讯
|
onWSMessage2: function (res) {
|
//console.log(res)
|
let resData = JSON.parse(res.data);
|
if (!resData.data.checkLogin.data) {
|
this.$layer.msg(resData.data.checkLogin.msg);
|
sessionStorage.removeItem("username");
|
sessionStorage.removeItem("userId");
|
sessionStorage.removeItem("userPower");
|
//this.WSClose2();
|
setTimeout(() => {
|
this.$router.push("/login");
|
location.reload();
|
}, 2000);
|
}
|
},
|
onWSOpen2: function () {
|
console.log("通讯成功");
|
},
|
onWSOpen3() {
|
this.sendMessage3();
|
},
|
sendMessage3() {
|
let userId = sessionStorage.getItem("userId");
|
this.SOCKET3.send(Number(userId));
|
},
|
onWSMessage3: function (res) {
|
let resData = JSON.parse(res.data);
|
},
|
// onWSError2:function(Event){
|
// console.log('链接失败', wsUri2);
|
// this.WSClose2(Event);
|
// },
|
// WSClose2:function(Event){
|
// if (this.isWSOpen2) {
|
// console.log('链接关闭', wsUri2, Event);
|
// this.SOCKET2.close();
|
// this.SOCKET2 = null;
|
// // 没有event对象 则为手动关闭
|
// if (Event) {
|
// this.reConnect();
|
// }
|
// }
|
// },
|
onWSMessage4: function (res) {
|
let resData = JSON.parse(res.data);
|
// console.log("onWSMessage4", resData, "=============");
|
let { code, data, data2 } = resData.data;
|
let list = [];
|
if (code == 1 && data) {
|
list = data2.map((item) => {
|
return {
|
url: this.baseUrl + item,
|
fileFullName: getFileName(item),
|
};
|
});
|
}
|
if (this.speakSrcList.length == 0) {
|
this.speakSrcList = list;
|
}
|
if (!this.isClose) {
|
this.endSpeak();
|
}
|
},
|
handleClickOutside() {
|
this.$store.dispatch("app/closeSideBar", {
|
withoutAnimation: false,
|
});
|
},
|
getVoiceList() {
|
getVoiceList()
|
.then((res) => {
|
let baseUrl = this.baseUrl;
|
let rs = res.data;
|
let list = [];
|
if (rs.code == 1 && rs.data) {
|
list = rs.data2.map((item) => {
|
return {
|
url: baseUrl + item,
|
fileFullName: getFileName(item),
|
};
|
});
|
}
|
this.speakSrcList = list;
|
if (!this.isClose) {
|
this.endSpeak();
|
}
|
})
|
.catch((error) => {
|
if (!this.isClose) {
|
this.endSpeak();
|
}
|
console.log(error);
|
});
|
},
|
delVoice(fileFullName) {
|
if (!this.fileFullName) {
|
this.handleNextSpeak();
|
return;
|
}
|
delVoice(fileFullName)
|
.then((res) => {
|
let rs = res.data;
|
if (rs.code == 1) {
|
console.log("删除：" + fileFullName + "成功");
|
}
|
this.handleNextSpeak();
|
})
|
.catch((error) => {
|
console.log(error);
|
this.handleNextSpeak();
|
});
|
},
|
endSpeak() {
|
this.speakInfo = {
|
devId: 0,
|
almId: 0,
|
};
|
this.delVoice(this.fileFullName);
|
},
|
handleNextSpeak() {
|
if (this.speakSrcList.length == 0) {
|
// console.log("全部播放完成");
|
// setTimeout(() => {
|
// this.getVoiceList();
|
// }, 2000);
|
} else {
|
this.isShowSpeak = false;
|
let voiceInfo = this.speakSrcList.pop();
|
this.speakSrc = voiceInfo.url;
|
this.fileFullName = voiceInfo.fileFullName;
|
let fileInfos = voiceInfo.fileFullName.split("_");
|
this.speakInfo = {
|
devId: fileInfos[3],
|
almId: fileInfos[4],
|
};
|
this.$nextTick(() => {
|
this.isShowSpeak = this.noSpeak ? false : true;
|
});
|
}
|
},
|
getAlarmVoiceSetting() {
|
getAlarmVoiceSetting()
|
.then((res) => {
|
let rs = res.data;
|
if (rs.code == 1) {
|
let data = rs.data;
|
this.$store.dispatch(
|
"user/changeNoSpeak",
|
data.beeperSoundOff ? true : false
|
);
|
}
|
//this.endSpeak();
|
})
|
.catch((error) => {
|
//this.endSpeak();
|
});
|
},
|
resetTimeout() {
|
clearTimeout(this.timeoutId); // 清除之前的定时器
|
this.timeoutId = window.setTimeout(() => {
|
// 超时后的操作
|
this.$alert("超过30分钟未操作，系统自动退出！", "系统提示", {
|
type: "warning",
|
confirmButtonText: "确定",
|
});
|
|
// 退出登录
|
this.outSystem();
|
}, 30 * 60 * 1000); // 重置为30分钟
|
},
|
outSystem() {
|
sessionStorage.removeItem("username");
|
sessionStorage.removeItem("userId");
|
sessionStorage.removeItem("userPower");
|
this.$store.dispatch("tagsView/delAllViews").then(({ visitedViews }) => {
|
this.$router.push("/login");
|
});
|
},
|
},
|
mounted() {
|
// 启动用户互斥登录模块
|
// this.checkUserLogin();
|
// this.$options.voice = new Voice();
|
//
|
// setTimeout(()=>{
|
// this.$options.voice.play("您好", this.handleClickOutside);
|
// }, 4000);
|
this.getAlarmVoiceSetting();
|
|
document.addEventListener("click", updateSessionTime);
|
document.addEventListener("mousemove", updateSessionTime);
|
document.addEventListener("keydown", updateSessionTime);
|
|
// 开启超时30分钟未操作，退出登录
|
if (config.autoExit.value) {
|
this.resetTimeout();
|
// 绑定用户交互事件以重置定时器
|
document.addEventListener("click", this.resetTimeout);
|
document.addEventListener("mousemove", this.resetTimeout);
|
document.addEventListener("keydown", this.resetTimeout);
|
}
|
},
|
destroyed() {
|
this.isClose = true;
|
// 销毁后移除监听
|
document.removeEventListener("click", this.resetTimeout);
|
document.removeEventListener("mousemove", this.resetTimeout);
|
document.removeEventListener("keydown", this.resetTimeout);
|
|
document.removeEventListener("click", updateSessionTime);
|
document.removeEventListener("mousemove", updateSessionTime);
|
document.removeEventListener("keydown", updateSessionTime);
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "~@/styles/mixin.scss";
|
@import "~@/styles/variables.scss";
|
|
.main-warp {
|
height: 100%;
|
}
|
|
.app-wrapper {
|
@include clearfix;
|
position: relative;
|
height: 100%;
|
width: 100%;
|
|
&.mobile.openSidebar {
|
position: fixed;
|
top: 0;
|
}
|
}
|
|
.drawer-bg {
|
background: #000;
|
opacity: 0.3;
|
width: 100%;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
height: 100%;
|
position: absolute;
|
z-index: 999;
|
}
|
|
.no-warning-msg {
|
overflow: hidden;
|
color: #ffffff;
|
font-size: 0.6rem;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
}
|
.no-footer-alarm {
|
.page-home {
|
box-sizing: border-box;
|
padding-bottom: 8px;
|
}
|
}
|
</style>
|
