139 lines
2.9 KiB
Vue
139 lines
2.9 KiB
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();
|
|
|
|
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>
|