screenFront/src/views/generalEnvironment/index.vue

<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\generalEnvironment\index.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-10 11:45:17
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div :class="$style['container']">
    <div class="header">
      <div class="title">
        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.generalEnvironment')" :titleTip="[]"
          :typeFun="['AbnormalData', 'time']" :alarmType="['noiseAlarm', 'temphuim', 'dustAlarm']"></header2>
      </div>
    </div>

    <div class="content" ref="Acontent">
      <el-row>
        <el-col :span="12">
          <contentLeft :width="size.oWidth" :height="size.oHeight"></contentLeft>
        </el-col>
        <el-col :span="12">
          <contentRight :width="size.oWidth" :height="size.oHeight"></contentRight>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from "vue";
import contentLeft from "./content/left.vue";
import contentRight from "./content/right.vue";
import header2 from "@/components/headerBox/header2.vue";
import useNowTime from "@/hook/nowTime";
import { calcWH } from "@/components/ts/selfAdaption";
import { ElRow, ElCol } from "element-plus";
import { getnoiseData } from "@/http/generalEnvironment";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { useSocketStore } from "@/store/moduleSocket";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useSocketStore();
const router = useRouter();
let Acontent = ref();
let headerref = ref()
let time = ref(null);
let Timedom = ref();
let { timeHtml } = useNowTime();
let comeBackFun = () => {
  router.go(-1);
};
let size = reactive({
  oWidth: 0,
  oHeight: 0,
});
function WH(div: HTMLElement) {
  console.log(div);

  let a = calcWH(div.offsetHeight, div.offsetWidth, 1, 2, 0);
  size.oWidth = a.oWidth;
  size.oHeight = a.oHeight;
}
//
function getWebsocket(val) {
  headerref.value.HeadergetWebsocket(val)
  try {
    let data = JSON.parse(val);
    if (data.type == "noise") {
      store.changenoise(data.msg);
    }
    if (data.type == "dust") {
      store.changePM(data.msg);
    }
    if (data.type == "humiture") {
      store.changeHumiture(data.msg);
    }
  } catch (err) { }
}
function errWebsocket(val) {
  headerref.value.HeadererrWebsocket(val)
  // console.log(val);
}

async function getnoiseDatafun() {
  let result: any = await getnoiseData({});

  if (result.code == 200) {
    store.changenoise(result.data);
    // refnoise.value.setData(result.data.top,result.data.listData,1)
    // setData(room,year,result.title)
  }
}
onMounted(() => {
  let contentBox = Acontent.value;
  let Timedombox = Timedom.value;
  window.document.title = t('messages.generalEnvironment');
  WH(contentBox);
  // window.addEventListener('resize',()=>{
  //   time?clearTimeout(time) : time = setTimeout(() => {WH(contentBox)}, 1000);
  //   })

  window.addEventListener("resize", () => {
    if (time.value) {
      clearTimeout(time.value);
      time.value = null;
    }
    time.value = setTimeout(() => {
      WH(contentBox);
    }, 1000);
  });
  getnoiseDatafun();
  connectWebsocket(null, null, getWebsocket, errWebsocket);
});

onUnmounted(() => {
  closeWebsocket();
  clearTimeout(time);
});
</script>

<style module>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
}
</style>

<style scoped>
.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 {
  width: 100%;
  --header: 100px;
  height: calc(1080px - var(--header));
}

.comeBack {
  position: absolute;
  bottom: 5%;
  left: 3rem;
  font-size: 2rem;
  color: #fff;
}

.comeBack>i {
  font-size: 3rem;
}
</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>