screenFront/src/views/electronicControlAmbient/index.vue

<!--
 * @FilePath: \gitscreenFront\src\views\electronicControlAmbient\index.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-04-11 13:50:05
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="container">
    <div class="header">
      <div class="title">
        <header2
          ref="headerref"
          :width="'100%'"
          :height="'150px'"
          :title="t('messages.DianKongDetection')"
          :titleTip="titleTip"
          :typeFun="['time']"
          :alarmType="[]"
        ></header2>
      </div>
    </div>
    <div class="content" ref="Acontent">
      <div>
        <el-row>
          <el-col :span="24">
            <top
              :width="size.oWidth * 16"
              :height="size.oHeight"
              ref="topref"
            ></top>
          </el-col>
          <el-col :span="24">
            <bottom
              :width="size.oWidth * 16"
              :height="size.oHeight * 2"
              ref="bottomref"
            ></bottom>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row>
          <el-col :span="24">
            <right
              :width="size.oWidth * 8"
              :height="size.oHeight * 3"
              ref="rightref"
            ></right>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from "vue";
import devSwiper from "@/components/EquipmentStatusDiagram/EquipmentStatusDiagram.vue";
import header2 from "@/components/headerBox/header2.vue";
import { calcWH } from "@/components/ts/selfAdaption";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { Offsite } from "@/store/module/offsite";
import { getSensorByDept } from "@/http/PaintShopView/index";
import bottom from "./bottom.vue";
import right from "./right.vue";
import top from "./top.vue";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = Offsite();
let Acontent = ref();
let time = ref(null);
let topref = ref();
let bottomref = ref();
let rightref = ref();
let size = reactive({
  oWidth: 0,
  oHeight: 0,
});
let titleTip = [
  {
    color: "#E43961",
    name: t('messages.abnormal'),
  },
  {
    color: "#20AEC5",
    name: t('messages.NoAbnormal'),
  },
  {
    color: "#A7A6BD",
    name: t('messages.disconnection'),
  },
];
function WH(div: HTMLElement) {
  let a = calcWH(div.offsetHeight, div.offsetWidth, 3, 24, 0);
  size.oWidth = a.oWidth;
  size.oHeight = a.oHeight;
}
async function getSensorByDeptfun() {
  let result: any = await getSensorByDept({ depts: 8 });

  if (result.code == 200) {
    topref.value.setcontentData(result.data);
    bottomref.value.setcontentData(result.data);
    rightref.value.setcontentData(result.data);
  }
}
function getWebsocket(val) {
  // headerref.value.HeadergetWebsocket(val)
  try {
    let data = JSON.parse(val);
    if (data.type == "electronicView") {
      // store.changenoise(data.msg);

      topref.value.setcontentData(data.msg);
      bottomref.value.setcontentData(data.msg);
      rightref.value.setcontentData(data.msg);
    }
  } catch (err) {}
}
function errWebsocket(val) {
  // headerref.value.HeadererrWebsocket(val)
  // console.log(val);
}
onMounted(() => {
  let contentBox = Acontent.value;
  // let Timedombox=Timedom.value
  window.document.title = t('messages.DianKongDetection');
  WH(contentBox);
  window.addEventListener("resize", () => {
    if (time.value) {
      clearTimeout(time.value);
      time.value = null;
    }
    time.value = setTimeout(() => {
      WH(contentBox);
    }, 1000);
  });
  getSensorByDeptfun();
  connectWebsocket(null, null, getWebsocket, errWebsocket);
});
onUnmounted(() => {
  closeWebsocket();
  clearTimeout(time);
  // store.resetAllData()
});
</script>

<style scoped>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
}
.title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.title > h1 {
  font-size: 30px;
  position: absolute;
  top: 10px;
}
.header {
  position: relative;
}
.header p {
  position: absolute;
  right: 50px;
  bottom: 20px;
  font-size: 20px;
}
.content {
  display: flex;
  width: 100%;
  --header: 150px;
  height: calc(1080px - var(--header));
}
</style>
<style>
body {
  /* --content:calc(100vh - var(--header)) */
  overflow: hidden !important;
  -ms-overflow-style: none; /* IE + Edge */
  scrollbar-width: none; /* Firefox */
}
::-webkit-scrollbar {
  display: none;
}
</style>