screenFront/src/views/FactoryView/index.vue

<template>
  <div :class="$style['container']"  ref="Acontent">
    <threeMap  ref="mapdomref"/>
    <statusBar :width="size.oWidth" :height="size.oHeight" :iconList="store.iconList" :devList="store.devList"></statusBar>
  </div>
  
</template>

<script setup lang='ts'>
import {ref,reactive,onMounted,onUnmounted} from 'vue'
import { calcWH } from "@/components/ts/selfAdaption";
import threeMap from './threeMap.vue';
import { getSensorInfodata , deviceDistributeInMachineryFactorydata} from "@/http/AerialView";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { useFactoryStore } from '@/store/module/Factory';

import statusBar from './statusBar.vue';

const store = useFactoryStore();
let Acontent = ref();
let mapdomref=ref()
let size = reactive({
  oWidth: 0,
  oHeight: 0,
});
let timer = null

function WH(div: HTMLElement) {
  let a = calcWH(div.offsetHeight, div.offsetWidth, 1, 5, 0);
  size.oWidth = a.oWidth;
  size.oHeight = a.oHeight;
  
  if(mapdomref.value){
    mapdomref.value.reset({oWidth:size.oWidth*5,oHeight:size.oHeight})
  }
 
}


//获取传感器列表
async function getSensorInfodatafun() {
  let result: any = await getSensorInfodata();

  if (result.code == 200) {
    store.setDataList(result.data);
   
  }
}
//获取设备列表
async function deviceDistributeInMachineryFactorydatafun() {
  let result: any = await deviceDistributeInMachineryFactorydata({ids:'6,7,9,10,11'});

  if (result.code == 200) {
    
    store.setdevList(result.data);
  }
}

function getWebsocket(val) {
  // try{
    let data = null
    try{
      data = JSON.parse(val);
    }catch(e){
      console.log(e);
      
      return
    }
 
  if (data.type == "SensorInfo") {
    // console.log(data.msg,"传感器数据");
    
    store.updateSensorList(data.msg);
    // store.changedevList(data.msg)


    // store.changepaintingGas(data.msg);
  }
  // }catch(err){
  //   console.log(err,"报错了大哥");

  // }
}


getSensorInfodatafun()
deviceDistributeInMachineryFactorydatafun()
function errWebsocket(val) {
  // console.log(val);
}
onMounted(()=>{
  // // todo 屏幕适应
  // windowDraw()
  // calcRate()
  let contentBox = Acontent.value;
  // let Timedombox=Timedom.value
  window.document.title = "传感器分布图";
  WH(contentBox);
  window.addEventListener("resize", () => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(() => {
      WH(contentBox);
    }, 1000);
  });

  connectWebsocket(null, null, getWebsocket, errWebsocket);
})
onUnmounted(()=>{// todo 屏幕适应
  // unWindowDraw()
  clearTimeout(timer)
  closeWebsocket();
})

</script>
<style module>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
}
</style>
<style  scoped></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>