screenFront/src/views/Exhibition/Germany/components/header2.vue

<!--
 * @FilePath: 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;
    }
  }
};
document.title = props.title;
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>