screenFront/src/views/PaintShopView/stuffView/index.vue

<!--
 * @FilePath: \gitscreenFront\src\views\PaintShopView\stuffView\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.DaJian_generalEnvironment')" :titleTip="titleTip" :typeFun="['time']" :alarmType="[]"></header2>
           </div>
         </div>
         <div class="content" ref="Acontent">
           <el-row>
               <el-col :span="24">
                   <top :width="size.oWidth*24" :height="size.oHeight" ref="topref"></top>
               </el-col>
               <el-col :span="24">
                   <bottom :width="size.oWidth*24" :height="size.oHeight*2" ref="bottomref"></bottom>
               </el-col>
             </el-row>
             <!-- <el-row>
               <el-col :span="24">
                   <right :width="size.oWidth*8" :height="size.oHeight*3" ref="rightref"></right>
               </el-col>
             </el-row> -->
         </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 { Offsite } from "@/store/module/offsite";
   import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
   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: "#20AEC5",
    name: t('messages.normal_Tip'),
  },
  {
    color: "#E43961",
    name: t('messages.abnormal'),
  },
  {
    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: 10 });

    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 == "stuffView") {
      // 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.DaJian_generalEnvironment')
       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>