499 lines
11 KiB
Vue
499 lines
11 KiB
Vue
<!--
|
||
* @FilePath: \screenFront\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"
|
||
effect="dark"
|
||
trigger="click"
|
||
width="600px"
|
||
placement="bottom-start"
|
||
virtual-triggering
|
||
|
||
>
|
||
<ul class="popoverBOX" ref="popoverliDom" v-click-outside="noClickAbnormalDataFun">
|
||
<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} 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'
|
||
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)//解决点击历史报警数据弹窗外部关闭再打开问题
|
||
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;
|
||
|
||
}
|
||
.zh-title{
|
||
margin-top: 6px;
|
||
font-size: 2.5rem;
|
||
}
|
||
.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;
|
||
}
|
||
.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;
|
||
}
|
||
|
||
</style>
|