screenFront/src/views/AerialView/index.vue

<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\AerialView\index.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-03-15 11:46:09
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div :class="$style['container']">
    <div class="content-AerialView" ref="Acontent">
      <mapDom ref="mapdomref"></mapDom>
      <devBar :width="size.oWidth" :height="size.oHeight"></devBar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { calcWH } from "@/components/ts/selfAdaption";
// import mapDom from "./content/map.vue"
import mapDom from "./content/ThreeMap.vue"
import devBar from "./content/statusBar.vue"
import { getSensorInfodata , deviceDistributeInMachineryFactorydata} from "@/http/AerialView";
import { onMounted, onUnmounted, reactive, ref } from "vue";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { useAerialViewStore } from "@/store/module/AerialView";
const store = useAerialViewStore();
let Acontent = ref();
let time = ref(null);
let mapdomref=ref()
let size = reactive({
  oWidth: 0,
  oHeight: 0,
});

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") {

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

  // }
}
function errWebsocket(val) {
  // console.log(val);
}
onMounted(() => {
  let contentBox = Acontent.value;
  // let Timedombox=Timedom.value
  window.document.title = "传感器分布图";
  WH(contentBox);
  window.addEventListener("resize", () => {
    if (time.value) {
      clearTimeout(time.value);
      time.value = null;
    }
    time.value = setTimeout(() => {
      WH(contentBox);
    }, 1000);
  });
  getSensorInfodatafun()
  deviceDistributeInMachineryFactorydatafun()
  connectWebsocket(null, null, getWebsocket, errWebsocket);
});

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

<style module>
.container {
  height: 100vh;
  width: 100vw;
  color: #20aec5;
  background-color: #100c2a;
}
</style>
<style scoped>

.content-AerialView {
  width: 100%;
  color: #20aec5;
  background-color: #100c2a;
  --header-AerialView: 0px;
  height: calc(100vh - var(--header-AerialView));
  display: flex;
}

</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>