screenFront/src/components/headerBox/header2.vue

<!--
 * @FilePath: \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"
    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">加载更多</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 } from "vue";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { useHeaderStore } from "@/store/components/header";
import { getStoredLanguage } from "@/utils/languageStorage"
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=ref(true)
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>