555 lines
13 KiB
Vue
555 lines
13 KiB
Vue
<!--
|
||
* @FilePath: \code\gitscreenFront\src\components\headerBox\header2.vue
|
||
* @Author: 王路平
|
||
* @文件版本: V1.0.0
|
||
* @Date: 2023-02-16 11:04:06
|
||
* @Description:
|
||
*
|
||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||
-->
|
||
|
||
<template>
|
||
<div class="header2" :style="{ width: props.width, height: props.height }">
|
||
<h1 :class="langJudge() == '简体中文' ? 'zh-title' : 'en-title'">
|
||
{{ props.title }}
|
||
</h1>
|
||
<div class="slot">
|
||
<div class="tip" style="display: flex">
|
||
<span class="tipspan" v-for="item in props.titleTip">
|
||
<div class="colortip" :style="{ backgroundColor: item.color }"></div>
|
||
<span class="tipstring">{{ item.name }}</span></span
|
||
>
|
||
<slot></slot>
|
||
</div>
|
||
<div v-show="typeObj.comback" class="comeBack" @click="comeBackFun">
|
||
<i class="iconfont icon-back"></i>
|
||
</div>
|
||
<div
|
||
v-show="typeObj.AbnormalData"
|
||
ref="AbnormalDataRef"
|
||
class="AbnormalData"
|
||
@click="AbnormalDataFun"
|
||
>
|
||
<dv-scroll-board
|
||
class="dv-scroll-boardclass"
|
||
ref="tipList"
|
||
:config="listdata"
|
||
style="width: 30rem; height: 50px"
|
||
/>
|
||
<el-badge
|
||
:value="AbnormalNum"
|
||
class="i-badge"
|
||
:hidden="AbnormalNum == 0"
|
||
>
|
||
<i
|
||
:class="
|
||
AbnormalNum > 0
|
||
? 'iconfont icon-baojingxinxi Abnormal-icon-yellow'
|
||
: 'iconfont icon-baojingxinxi'
|
||
"
|
||
></i>
|
||
</el-badge>
|
||
</div>
|
||
<div v-show="typeObj.time" class="time">
|
||
<p ref="Timedom">{{ timeHtml }}</p>
|
||
</div>
|
||
</div>
|
||
<el-popover
|
||
ref="popoverRef"
|
||
:virtual-ref="AbnormalDataRef"
|
||
:visible="Abnormalpopovervisible"
|
||
trigger="click"
|
||
width="600px"
|
||
placement="bottom-start"
|
||
virtual-triggering
|
||
>
|
||
<ul
|
||
class="popoverBOX"
|
||
ref="popoverliDom"
|
||
v-click-outside="noClickAbnormalDataFun"
|
||
>
|
||
<li class="popoverHeader">
|
||
<!-- <span><i class="iconfont icon-lishijilu lishijilu"></i>历史记录</span> -->
|
||
</li>
|
||
<li v-for="item in powerlist" :key="item.deviceId">
|
||
{{ item.context }}
|
||
</li>
|
||
<li class="lookdown" v-show="onloadlist">
|
||
<span @click="clickNextPageAlarmList">{{
|
||
t("messages.加载更多")
|
||
}}</span>
|
||
</li>
|
||
</ul>
|
||
</el-popover>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import useNowTime from "@/hook/nowTime";
|
||
import { ClickOutside as vClickOutside } from "element-plus";
|
||
import { useRoute, useRouter } from "vue-router";
|
||
import { devListType } from "@/type/InPlantProducts";
|
||
import { getAlarmListData,getAlarmListHistoryData } from "@/http/index";
|
||
import {
|
||
onMounted,
|
||
onUnmounted,
|
||
reactive,
|
||
ref,
|
||
unref,
|
||
watch,
|
||
computed,
|
||
} from "vue";
|
||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||
import { useHeaderStore } from "@/store/components/header";
|
||
import { getStoredLanguage } from "@/utils/languageStorage";
|
||
import { useI18n } from "vue-i18n";
|
||
import { Clock } from "@element-plus/icons-vue";
|
||
let { t } = useI18n();
|
||
const storeheader = useHeaderStore();
|
||
let { timeHtml } = useNowTime();
|
||
const router = useRouter();
|
||
//刷新数据
|
||
let numkey = ref(0);
|
||
let popoverkey = ref(0);
|
||
//历史数据dom
|
||
let AbnormalDataRef = ref();
|
||
let popoverRef = ref();
|
||
let tipList = ref();
|
||
let popoverliDom = ref();
|
||
//历史报警数据弹窗显示
|
||
let Abnormalpopovervisible = ref(false);
|
||
let AbnormalpopovervisibleCtrl = ref(false); //解决点击历史报警数据弹窗外部关闭再打开问题
|
||
//dialog
|
||
let dialogdata = ref([]);
|
||
let onloadlist = computed(() => {
|
||
return storeheader.num > powerlist.length;
|
||
});
|
||
const listdata = reactive<devListType>({
|
||
data: [],
|
||
rowNum: 2,
|
||
oddRowBGC: "#100C2A",
|
||
evenRowBGC: "#100C2A",
|
||
hoverPause: true,
|
||
carousel: "page",
|
||
waitTime: 3000,
|
||
align: ["left"],
|
||
});
|
||
let AbnormalNum = ref(0);
|
||
//弹窗历史数据
|
||
let powerlist = reactive([]);
|
||
let props = defineProps<{
|
||
width: string;
|
||
height: string;
|
||
title: string;
|
||
titleTip: any;
|
||
typeFun: any[];
|
||
alarmType: any[];
|
||
}>();
|
||
const typeObj = reactive({
|
||
comback: false,
|
||
AbnormalData: false,
|
||
time: false,
|
||
});
|
||
const AbnormalType = reactive({
|
||
pageSize: 5,
|
||
pageNum: 1,
|
||
type: "",
|
||
});
|
||
let comeBackFun = () => {
|
||
router.go(-1);
|
||
};
|
||
const changeAbnormalData = (val: any) => {
|
||
tipList.value.updateRows(val.data, { ...val });
|
||
};
|
||
let AbnormalDataFun = () => {
|
||
//该函数执行优先级低于noClickAbnormalDataFun
|
||
//Abnormalpopovervisibled代表弹窗是否已经显示
|
||
// 判断弹窗是否打开如果打开就关闭 关闭就打开
|
||
if (Abnormalpopovervisible.value) {
|
||
Abnormalpopovervisible.value = false;
|
||
} else {
|
||
//关闭情况下判断是否点击了非弹窗位置如果是则仍然关闭 否则打开
|
||
if (AbnormalpopovervisibleCtrl.value) {
|
||
Abnormalpopovervisible.value = false;
|
||
} else {
|
||
Abnormalpopovervisible.value = true;
|
||
}
|
||
}
|
||
};
|
||
let noClickAbnormalDataFun = () => {
|
||
//该函数执行优先级高于AbnormalDataFun
|
||
// 判断弹窗是否打开如果打开并且我点击了非弹窗位置则ctrl为true否则为false
|
||
if (Abnormalpopovervisible.value) {
|
||
AbnormalpopovervisibleCtrl.value = true;
|
||
} else {
|
||
AbnormalpopovervisibleCtrl.value = false;
|
||
}
|
||
|
||
Abnormalpopovervisible.value ? (Abnormalpopovervisible.value = false) : "";
|
||
};
|
||
function typeStatus() {
|
||
if (props.typeFun.length == 0) {
|
||
return;
|
||
}
|
||
props.typeFun.forEach((res) => {
|
||
for (let key in typeObj) {
|
||
if (res == key) {
|
||
typeObj[key] = true;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
function langJudge() {
|
||
let lang = getStoredLanguage();
|
||
if (lang) {
|
||
return lang;
|
||
} else {
|
||
return "简体中文";
|
||
}
|
||
}
|
||
|
||
|
||
//判断是否显示对应组件后所做操作
|
||
watch(
|
||
() => typeObj,
|
||
(newVal, oldVal) => {
|
||
if (newVal.AbnormalData) {
|
||
AbnormalType.type = props.alarmType.join(",");
|
||
getAlarmListDatafun();
|
||
// connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||
setAlarmscrollBoardList();
|
||
}
|
||
},
|
||
{ deep: true, flush: "post" }
|
||
);
|
||
//获取异常信息接口数据
|
||
async function getAlarmListDatafun() {
|
||
let result: any = await getAlarmListData(AbnormalType);
|
||
|
||
if (result.code == 200) {
|
||
storeheader.setDataList(result);
|
||
}
|
||
}
|
||
//单机显示更多历史报警数据
|
||
function clickNextPageAlarmList() {
|
||
// if(storeheader.num<=powerlist.length){
|
||
// onloadlist.value=false
|
||
// return
|
||
// }
|
||
AbnormalType.pageNum++;
|
||
getAlarmListDatafun();
|
||
}
|
||
//接受历史报警数据
|
||
watch(
|
||
() => storeheader.AlarmpopoverList,
|
||
(newVal, oldVal) => {
|
||
newVal.forEach((res) => {
|
||
powerlist.push(res);
|
||
});
|
||
},
|
||
{ deep: true, flush: "post" }
|
||
);
|
||
//接受历史报警数据滚动效果栏
|
||
watch(
|
||
() => storeheader.AlarmscrollBoardList,
|
||
(newVal, oldVal) => {
|
||
// newVal.forEach(res=>{
|
||
// let e=res.context.split('，')
|
||
// listdata.data.push([e[0]])
|
||
// listdata.data.push([e[1]])
|
||
// })
|
||
// changeAbnormalData(listdata)
|
||
// numkey.value++
|
||
},
|
||
{ deep: true, flush: "post" }
|
||
);
|
||
let AlarmscrollTime = null;
|
||
//每隔15秒钟替换一次组件数据进行轮播
|
||
function setAlarmscrollBoardList() {
|
||
let start = 0;
|
||
let end = 4;
|
||
|
||
let i = 0;
|
||
setTimeout(() => {
|
||
storeheader.AlarmscrollBoardList.slice(0, 5).forEach((element) => {
|
||
let e = element.context.split("，");
|
||
listdata.data.push(...[[e[0]], [e[1]]]);
|
||
i++;
|
||
});
|
||
|
||
end = end + 5;
|
||
start = i >= 5 ? 5 : storeheader.AlarmscrollBoardList.length - 1;
|
||
start <= 0 ? (start = 0) : "";
|
||
}, 1000);
|
||
|
||
AlarmscrollTime = setInterval(() => {
|
||
if (i == 0) {
|
||
listdata.data = [];
|
||
}
|
||
i = 0;
|
||
if (storeheader.AlarmscrollBoardList.length == 0) {
|
||
return;
|
||
}
|
||
|
||
if (storeheader.AlarmscrollBoardList.length - 1 < end) {
|
||
end = storeheader.AlarmscrollBoardList.length - 1;
|
||
}
|
||
for (start; start <= end; start++) {
|
||
// console.log(storeheader.AlarmscrollBoardList[start],start,end);
|
||
// console.log(storeheader.AlarmscrollBoardList.length-1);
|
||
let listcontent =
|
||
storeheader.AlarmscrollBoardList[start]?.context.split("，");
|
||
|
||
listdata.data.push(...[[listcontent[0]], [listcontent[1]]]);
|
||
}
|
||
changeAbnormalData(listdata);
|
||
numkey.value++;
|
||
end = end + 5;
|
||
//如果下次数据剩一个则只拿一条数据
|
||
if (start == storeheader.AlarmscrollBoardList.length - 1) {
|
||
// console.log('进入了2');
|
||
start = storeheader.AlarmscrollBoardList.length - 1;
|
||
end = storeheader.AlarmscrollBoardList.length - 1;
|
||
}
|
||
//如果剩余数据不足5个则拿出剩余数据
|
||
if (
|
||
end > storeheader.AlarmscrollBoardList.length - 1 &&
|
||
start <= storeheader.AlarmscrollBoardList.length - 1
|
||
) {
|
||
// console.log('进入了3');
|
||
end = storeheader.AlarmscrollBoardList.length - 1;
|
||
}
|
||
// 如果全部超出则从头拿
|
||
if (
|
||
start > storeheader.AlarmscrollBoardList.length - 1 &&
|
||
end > storeheader.AlarmscrollBoardList.length - 1
|
||
) {
|
||
// console.log('进入了4',start,end,storeheader.AlarmscrollBoardList.length-1,storeheader.AlarmscrollBoardList);
|
||
start = 0;
|
||
end = 4;
|
||
}
|
||
}, 15000);
|
||
}
|
||
//接受历史报警数据量
|
||
watch(
|
||
() => storeheader.num,
|
||
(newVal, oldVal) => {
|
||
AbnormalNum.value = newVal;
|
||
numkey.value++;
|
||
},
|
||
{ deep: true, flush: "post" }
|
||
);
|
||
function HeadergetWebsocket(val) {
|
||
let data = null;
|
||
try {
|
||
data = JSON.parse(val);
|
||
} catch (e) {
|
||
console.log(e);
|
||
return;
|
||
}
|
||
|
||
if (
|
||
props.alarmType.some((e) => {
|
||
return e == data.type;
|
||
})
|
||
) {
|
||
// console.log(props.alarmType);
|
||
// console.log(props.alarmType.some(e=>{return e==data.type}));
|
||
storeheader.changeDataList(data);
|
||
}
|
||
}
|
||
function HeadererrWebsocket(val) {
|
||
// console.log(val);
|
||
}
|
||
onMounted(() => {
|
||
//判断需要显示出来的数据
|
||
typeStatus();
|
||
});
|
||
onUnmounted(() => {
|
||
// closeWebsocket();
|
||
storeheader.resetData();
|
||
AlarmscrollTime ? clearInterval(AlarmscrollTime) : "";
|
||
});
|
||
defineExpose({
|
||
changeAbnormalData,
|
||
HeadergetWebsocket,
|
||
HeadererrWebsocket,
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import "@/assets/css/iconfont.css";
|
||
.header2 {
|
||
width: 100%;
|
||
background-image: url(@/assets/header/header1.png);
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.header2-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
/* height: 100%; */
|
||
width: 100%;
|
||
}
|
||
h1 {
|
||
position: absolute;
|
||
top: 10px;
|
||
z-index: 2;
|
||
}
|
||
.zh-title {
|
||
margin-top: 6px;
|
||
font-size: 3rem;
|
||
}
|
||
.en-title {
|
||
font-size: 2rem;
|
||
max-width: 600px;
|
||
height: 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
/* line-height: 80px; */
|
||
}
|
||
/* .header2 p {
|
||
position: absolute;
|
||
right: 50px;
|
||
bottom: 20px;
|
||
font-size: 20px;
|
||
} */
|
||
.slot {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 50px 10px 10px 10px;
|
||
}
|
||
|
||
/* .red {
|
||
background-color: rgb(228, 57, 97);
|
||
}
|
||
.blue {
|
||
background-color: rgb(32, 174, 197);
|
||
} */
|
||
.colortip {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 8px;
|
||
}
|
||
.tipstring {
|
||
font-size: 20px;
|
||
color: #fff;
|
||
}
|
||
.tip {
|
||
margin-top: 15px;
|
||
}
|
||
.tipspan {
|
||
display: flex;
|
||
margin-left: 10px;
|
||
align-items: center;
|
||
}
|
||
.comeBack {
|
||
position: absolute;
|
||
/* width: 2rem;
|
||
height: 2rem; */
|
||
bottom: 10%;
|
||
left: 1.5rem;
|
||
font-size: 3rem;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
}
|
||
.comeBack > i {
|
||
font-size: 3rem;
|
||
}
|
||
.AbnormalData {
|
||
position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
/* width: 2rem;
|
||
height: 2rem; */
|
||
bottom: 20%;
|
||
right: 1%;
|
||
font-size: 3rem;
|
||
color: #fff;
|
||
}
|
||
.AbnormalData:hover {
|
||
cursor: pointer;
|
||
}
|
||
.AbnormalData > span {
|
||
font-size: 1rem;
|
||
}
|
||
.popoverBOX {
|
||
max-height: 15rem;
|
||
font-size: 18px;
|
||
overflow-y: auto;
|
||
}
|
||
.popoverBOX li {
|
||
padding: 10px 0 10px 0;
|
||
}
|
||
.lookdown {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #1c78c2;
|
||
}
|
||
.lookdown:hover {
|
||
cursor: pointer;
|
||
}
|
||
.time {
|
||
position: absolute;
|
||
width: 20rem;
|
||
height: 2rem;
|
||
bottom: 30%;
|
||
left: 4.2rem;
|
||
font-size: 25px;
|
||
}
|
||
.i-badge {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
}
|
||
.i-badge > i {
|
||
font-size: 3rem;
|
||
position: relative;
|
||
top: -5px;
|
||
}
|
||
/* .dv-scroll-board /deep/ .ceil {
|
||
font-size: 1.2rem;
|
||
} */
|
||
.dv-scroll-boardclass :deep(.ceil) {
|
||
font-size: 20px;
|
||
}
|
||
.el-popper.is-dark:deep() {
|
||
background: #14274b !important;
|
||
}
|
||
.el-popover.el-popper:deep() {
|
||
background: #14274b !important;
|
||
}
|
||
.Abnormal-icon-yellow {
|
||
color: #ddb14f;
|
||
}
|
||
.lishijilu {
|
||
font-size: 2rem;
|
||
color: #fff;
|
||
}
|
||
.popoverHeader {
|
||
padding: 0 !important;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
line-height: 1.5rem;
|
||
}
|
||
.popoverHeader span {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 5px;
|
||
/* border-radius: 50px;
|
||
background: linear-gradient(315deg, #404040, #4c4c4c); */
|
||
/* box-shadow: -20px -20px 60px #3c3c3c, 20px 20px 60px #525252; */
|
||
}
|
||
</style>
|