screenFront/src/views/Mechanics/index.vue

<template>
  <div :class="$style['container']">
    <div class="header">
      <div class="title">
        <header2
          ref="headerref"
          :width="'100%'"
          :height="'150px'"
          :title="t('messages.Mechanics')"
          :titleTip="titleTip"
          :typeFun="['AbnormalData','time']"
          :alarmType="['machinefactory']"
        >
          <template v-slot>
              <span class="tipspan" style="margin-left: 30px"
                ><span class="tipstring"
                  >{{t('messages.DevNum')}}：{{ store.allNum }}</span
                ></span
              >
          </template>
        </header2>
      </div>
    </div>

    <div class="content" ref="Acontent">
      <el-row>
        <el-col :span="24">
          <top :width="size.oWidth" :height="size.oHeight"></top>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <bottom :width="size.oWidth" :height="size.oHeight * 2"></bottom>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
import top from "./content/top.vue";
import bottom from "./content/bottom.vue";
import header2 from "@/components/headerBox/header2.vue";
import { calcWH } from "@/components/ts/selfAdaption";
import {connectWebsocket,closeWebsocket} from "@/utils/websocket"
import { ElRow, ElCol } from "element-plus";
import { gatcountsOfMachineryFactoryInStatusTime } from "@/http/Mechanics";
import { useMechanicsStore } from "@/store/module/Mechanics";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useMechanicsStore();

let Acontent = ref();
let headerref=ref()
let time = ref(null);
let titleTip=[{
  color:'rgb(32, 174, 197)',
  name:t('messages.onLine')
},{
  color:'rgb(228, 57, 97)',
  name:t('messages.offline')
}]

let size = reactive({
  oWidth: 0,
  oHeight: 0,
});
function WH(div: HTMLElement) {
  let a = calcWH(div.offsetHeight, div.offsetWidth, 3, 1, 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=='CountsOfMachineryFactoryInStatusTime'){     
        store.changedevstatus(data.msg)
        // store.changenoise(data.msg)
      }
      if(data.type=='gatewayMF'){    
        
        store.changegateway(data.msg)
        store.changegatewaynum(data.msg)
        // store.changePM(data.msg)
      }
      // if(data.type=='status'){    
      //   store.changedevstatus(data.msg)
      // }

    }catch(err){
      console.log(err);
    }

  }
  function errWebsocket(val){
    headerref.value?headerref.value.HeadererrWebsocket(val):''
    // console.log(val);
}
async function gatcountsOfMachineryFactoryInStatusTimefun() {
  let result: any = await gatcountsOfMachineryFactoryInStatusTime();

  if (result.code == 200) {
    
    store.changedevstatus(result.data)
  }
}
onMounted(() => {
  let contentBox = Acontent.value;
  
  // let Timedombox=Timedom.value
  window.document.title = t('messages.Mechanics');
  WH(contentBox);
  window.addEventListener("resize", () => {
    if (time.value) {
      clearTimeout(time.value);
      time.value = null;
    }
    time.value = setTimeout(() => {
      WH(contentBox);
    }, 1000);
  });
  gatcountsOfMachineryFactoryInStatusTimefun();
  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;
}
/* .tip {
  position: absolute;
  bottom: 10px;
  left: 10px;
} */
.red {
  background-color: rgb(228, 57, 97);
}
.blue {
  background-color: rgb(32, 174, 197);
}
.red,
.blue {
  width: 16px;
  height: 16px;
  border-radius: 8px;
}
.tipstring {
  font-size: 20px;
  color: #fff;
}
.tipspan {
  display: flex;
  margin-left: 10px;
  align-items: center;
}
.content {
  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>