<script setup>
|
import { ref, watchEffect, watch } from "vue";
|
import { useRouter, useRoute } from "vue-router";
|
import { storeToRefs } from "pinia";
|
import { useUserStore } from "@/stores/user.js";
|
import config from "@/assets/js/config.js";
|
|
import logoUrl from "@/assets/images/fuguang_logo.jpg";
|
import useWebSocket from "@/hooks/useWebSocket";
|
import useElement from "@/hooks/useElement.js";
|
const { message } = useWebSocket("loginCheck");
|
const { message: almMessage } = useWebSocket("almPop");
|
|
const { $alert, $loading, $message, $confirm } = useElement();
|
|
const userStore = useUserStore();
|
const { uid, uname } = storeToRefs(userStore);
|
|
const date = ref(getDate());
|
|
const headers = [
|
{
|
prop: "almStarttime",
|
label: "告警开始时间",
|
width: "",
|
},
|
{
|
prop: "devIdcode",
|
label: "设备编号",
|
width: "",
|
},
|
// {
|
// prop: "devTypeStr",
|
// label: "设备类型",
|
// width: "",
|
// },
|
{
|
prop: "almName",
|
label: "告警名称",
|
width: "",
|
},
|
];
|
|
function getDate() {
|
let days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
|
let time = new Date();
|
let week = days[time.getDay()];
|
|
let day = time.getDate();
|
let month = time.getMonth() + 1;
|
let year = time.getFullYear();
|
|
let hh = time.getHours();
|
let mm = time.getMinutes();
|
|
hh = hh < 10 ? `0${hh}` : hh;
|
mm = mm < 10 ? `0${mm}` : mm;
|
|
return `${year}-${month}-${day} ${week} ${hh}:${mm}`;
|
}
|
setInterval(() => {
|
date.value = getDate();
|
}, 3000);
|
|
const alarmList = ref([]);
|
|
watchEffect((a, b, c) => {
|
if (message.value) {
|
const {
|
code,
|
data: { checkLogin },
|
} = JSON.parse(message.value);
|
if (!checkLogin.data) {
|
$message(checkLogin.msg);
|
localStorage.removeItem("uname");
|
localStorage.removeItem("uid");
|
setTimeout(() => {
|
$router.push("/login");
|
location.reload();
|
}, 2000);
|
}
|
}
|
|
if (almMessage.value) {
|
const { code, data2 } = JSON.parse(almMessage.value);
|
}
|
});
|
|
const alarmUpdated = ref(false);
|
|
watch(almMessage, (n, o) => {
|
let nList = [],
|
oList = [];
|
if (n) {
|
const { code, data2 } = JSON.parse(n);
|
nList = data2.map((v) => ({
|
...v,
|
devIdcode: v.devInf.devIdcode,
|
devTypeStr: ["", "充放电一体机", "均衡测试仪"][v.devInf.devType],
|
}));
|
}
|
if (o) {
|
const { code, data2 } = JSON.parse(o);
|
oList = data2;
|
}
|
alarmList.value = nList;
|
// 弹窗没关闭 不计算
|
if (alarmUpdated.value) {
|
return false;
|
}
|
if (!nList.length) {
|
return (alarmUpdated.value = false);
|
}
|
// if (nList.length == oList.length) {
|
for (let i = 0, nLen = nList.length; i < nLen; i++) {
|
let item1 = nList[i];
|
if (!oList.some((v) => v == item1)) {
|
alarmUpdated.value = true;
|
break;
|
}
|
}
|
// } else {
|
// alarmUpdated.value = true;
|
// }
|
});
|
|
const $router = useRouter();
|
function commandClick(name) {
|
switch (name) {
|
case "outSystem":
|
outSystem();
|
break;
|
case "passwordChange":
|
passwordChange();
|
break;
|
}
|
}
|
function outSystem() {
|
localStorage.removeItem("uname");
|
localStorage.removeItem("uid");
|
$router.push("/login");
|
}
|
function passwordChange(params) {
|
pwdVisible.value = true;
|
}
|
function goRtAlarm(params) {
|
alarmUpdated.value = false;
|
$router.push({
|
path: "/alarm-rt",
|
query: {
|
almId: params.almId,
|
devId: params.devId,
|
},
|
});
|
}
|
</script>
|
|
<template>
|
<div class="page-header">
|
<div class="page-header-container">
|
<div class="page-header-left">
|
<img class="header-first-logo" :src="logoUrl" />
|
<!-- <span class="header-carve-up" v-if="logoConfig.value"></span> -->
|
<span>{{ config.title }}</span>
|
<!-- <span class="sys-version">{{ version }}</span> -->
|
</div>
|
<div class="page-header-content"></div>
|
<div class="page-header-right">
|
<!-- 日期 -->
|
<div class="date">{{ date }}</div>
|
<el-dropdown trigger="click" @command="commandClick">
|
<div class="user-wraper">
|
<el-icon class="icon" :size="24" color="#0ff">
|
<Avatar />
|
</el-icon>
|
<div class="user-name">{{ uname }}</div>
|
</div>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item command="passwordChange"
|
>密码修改</el-dropdown-item
|
>
|
<el-dropdown-item command="outSystem">安全退出</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
</div>
|
|
<!-- 告警 -->
|
<el-dialog
|
title="告警"
|
width="760px"
|
v-model="alarmUpdated"
|
:close-on-click-modal="false"
|
class="dialog-center"
|
>
|
<div class="table-wrap">
|
<el-table
|
class="yc-table"
|
stripe
|
height="100%"
|
size="small"
|
:data="alarmList"
|
style="width: 100%"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
width="80"
|
></el-table-column>
|
<el-table-column
|
v-for="header in headers"
|
:key="header.prop"
|
:prop="header.prop"
|
:label="header.label"
|
:min-width="header.width"
|
align="center"
|
></el-table-column>
|
<el-table-column label="操作" width="90" align="center">
|
<template #default="scope">
|
<el-button
|
type="primary"
|
size="small"
|
@click="goRtAlarm(scope.row)"
|
>实时告警</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.page-header-container {
|
height: 70px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
color: #0ff;
|
}
|
.user-wraper {
|
display: flex;
|
align-items: center;
|
padding-right: 6px;
|
color: #0ff;
|
.user-name {
|
margin-left: 0.4em;
|
}
|
}
|
|
.page-header-content {
|
position: relative;
|
height: 100%;
|
overflow: hidden;
|
padding-top: 5px;
|
box-sizing: border-box;
|
}
|
|
.page-header-left {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
padding-right: 130px;
|
min-width: 12em;
|
}
|
|
.page-header-left img {
|
height: 40px;
|
vertical-align: middle;
|
}
|
|
.page-header-left span {
|
font-size: 33px;
|
font-weight: bold;
|
letter-spacing: 4px;
|
}
|
|
.page-header-left span.sys-version {
|
font-size: 24px;
|
margin-left: 4px;
|
font-weight: normal;
|
padding-top: 8px;
|
}
|
|
.page-header-right {
|
display: flex;
|
justify-content: space-around;
|
width: 460px;
|
}
|
|
.data-totals {
|
padding-left: 18px;
|
}
|
|
.data-totals-item {
|
margin-right: 18px;
|
}
|
|
.header-info-list {
|
padding-left: 18px;
|
display: flex;
|
align-items: center;
|
}
|
|
.header-info-item {
|
display: inline-block;
|
min-width: 85px;
|
padding-top: 4px;
|
padding-bottom: 2px;
|
}
|
|
.info-banner {
|
display: inline-block;
|
color: #ffffff;
|
background-color: blue;
|
}
|
|
.info-banner-text {
|
display: inline-block;
|
padding-top: 8px;
|
padding-bottom: 8px;
|
}
|
|
.hdw-avatar {
|
display: inline-block;
|
margin-top: 10px;
|
margin-right: 16px;
|
cursor: pointer;
|
color: #e4e3e3;
|
}
|
|
.hdw-avatar:hover {
|
color: #ffffff;
|
}
|
|
.hdw-avatar:hover .el-icon-arrow-down {
|
transform: rotate(180deg);
|
}
|
|
.hdw-avatar-icon {
|
display: inline-flex;
|
width: 38px;
|
height: 38px;
|
border-radius: 50%;
|
justify-content: center;
|
background-color: #4ba1fa;
|
align-items: center;
|
color: #032c8f;
|
}
|
|
.hdw-avatar-icon .iconfont {
|
font-size: 16px;
|
}
|
|
.hdw-avatar-text {
|
color: #4ba1fa;
|
margin-left: 8px;
|
}
|
|
.hdw-avatar-text .el-icon-arrow-down {
|
margin-left: 4px;
|
}
|
|
.fuguang-logo {
|
height: 45px;
|
margin-left: 8px;
|
vertical-align: middle;
|
}
|
|
.header-first-logo {
|
margin-left: 20px;
|
margin-right: 6px;
|
}
|
|
.header-carve-up {
|
display: inline-block;
|
height: 28px;
|
width: 1px;
|
background-color: #00feff;
|
margin-left: 12px;
|
margin-right: 12px;
|
}
|
|
.system-tools {
|
position: absolute;
|
top: 8px;
|
right: 8px;
|
}
|
|
.tools-item {
|
display: inline-block;
|
padding: 8px;
|
border-radius: 50%;
|
background-color: #4ba1fa;
|
}
|
|
.system-tools .iconfont {
|
font-size: 20px;
|
color: #041f6c;
|
}
|
|
.term-date {
|
display: inline-block;
|
margin-left: 16px;
|
font-size: 12px;
|
padding: 2px 8px;
|
}
|
|
.term-date-value {
|
display: inline-block;
|
text-align: center;
|
padding: 0 8px;
|
font-size: 14px;
|
border-radius: 6px;
|
margin-right: 8px;
|
}
|
|
.drag-box-content {
|
width: 85px;
|
height: 41px;
|
background-image: url("./images/drag_img.png");
|
background-size: 100% 100%;
|
font-size: 14px;
|
padding-left: 40px;
|
box-sizing: border-box;
|
white-space: nowrap;
|
text-overflow-ellipsis: ellipsis;
|
cursor: pointer;
|
}
|
|
.dragging-box {
|
position: absolute;
|
top: 180px;
|
right: -55px;
|
z-index: 998;
|
}
|
|
.dragging-box:hover {
|
right: 0;
|
}
|
|
.dialog-mac :deep(.el-dialog__body) {
|
background: #02195c;
|
}
|
.table-wrap {
|
max-height: 300px;
|
}
|
</style>
|
