hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改网络拓扑图

Browse Source
This commit is contained in:
hzz 2023-06-13 07:54:29 +08:00
parent bfe2400d46
commit 3fc6935718
3 changed files with 172 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/FactoryViewTopo/index.vue
View File

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

11
src/views/FactoryViewTopo/statusBar.vue
View File

@ -15,16 +15,16 @@
</div> --> </div> -->
<div class="iconTip"> <div class="iconTip">
<ul> <ul>
<li v-for="item in prop.iconList" :key="item.id" > <!-- <li v-for="item in prop.iconList" :key="item.id" >
<i :class="'iconfont ' + item.name + ' icon-logo'"></i <i :class="'iconfont ' + item.name + ' icon-logo'"></i
>{{ "&nbsp&nbsp&nbsp" + item.value }} >{{ "&nbsp&nbsp&nbsp" + item.value }}
<div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div> <div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div> -->
</li> <!-- </li> -->
<li v-for="item in prop.devList" :key="item.id" > <!-- <li v-for="item in prop.devList" :key="item.id" >
<i :class="'iconfont ' + item.name + ' icon-logo SSCBar'"></i <i :class="'iconfont ' + item.name + ' icon-logo SSCBar'"></i
>{{ "&nbsp&nbsp&nbsp" + item.value }} >{{ "&nbsp&nbsp&nbsp" + item.value }}
<div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div> <div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div>
</li> </li> -->
<li> <li>
<i class="iconfont icon-WIFI icon-logo"></i> &nbsp;&nbsp;&nbsp; <i class="iconfont icon-WIFI icon-logo"></i> &nbsp;&nbsp;&nbsp;
WIFI WIFI
@ -95,6 +95,7 @@ watch(
(newVal, oldVal) => { (newVal, oldVal) => {
//监听父组件宽高变化，随时重置本组件尺寸 //监听父组件宽高变化，随时重置本组件尺寸
reset(newVal); reset(newVal);
console.log(newVal);
}, },
{ immediate: true, deep: true, flush: "post" } { immediate: true, deep: true, flush: "post" }

277
src/views/FactoryViewTopo/threeMap.vue
View File

@ -3,11 +3,10 @@
</template> </template>
<script setup lang='ts'> <script setup lang='ts'>
import { ref, onMounted, defineExpose } from 'vue'; import { ref, onMounted } from 'vue';
import * as THREE from 'three'; import * as THREE from 'three';
import * as TWEEN from '@tweenjs/tween.js'; import * as TWEEN from '@tweenjs/tween.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import * as SceneUtils from 'three/examples/jsm/utils/SceneUtils.js';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js'; import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import { DragControls } from "@/utils/DragControls"; import { DragControls } from "@/utils/DragControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
@ -19,14 +18,7 @@ import { useRouter } from 'vue-router';
import { updateCoordinateByPoint } from "@/http/AerialView/index" import { updateCoordinateByPoint } from "@/http/AerialView/index"
import { ElNotification } from 'element-plus' import { ElNotification } from 'element-plus'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router';
let { t } = useI18n(); let { t } = useI18n();
let route = useRoute();
let edit = false;
let type = route.params?.type;
if (type == 'edit') {
edit = true;
}
const store = useFactoryStore(); const store = useFactoryStore();
const router = useRouter(); const router = useRouter();
@ -66,9 +58,11 @@ const requires = {
'tile': require("@/assets/img/Factory/tile.jpg"), 'tile': require("@/assets/img/Factory/tile.jpg"),
'door': require("@/assets/img/Factory/door.jpg"), 'door': require("@/assets/img/Factory/door.jpg"),
'sky': require("@/assets/img/Factory/sky.jpg"), 'sky': require("@/assets/img/Factory/sky.jpg"),
//数字化工厂物联3D图
'titleFloor': require("@/assets/img/Factory/screen_title.png"), 'titleFloor': require("@/assets/img/Factory/screen_title.png"),
'guangmao': require("@/assets/img/Factory/guangmao.jpg"), 'guangmao': require("@/assets/img/Factory/guangmao.jpg"),
'ac': require("@/assets/img/Factory/ac.jpg"), 'ac': require("@/assets/img/Factory/ac.jpg"),
'wifi': require("@/assets/img/Factory/wifi.jpg"),
} }
const workerShopRoute = { const workerShopRoute = {
@ -159,7 +153,7 @@ const init = () => {
scene.add(hjLight); scene.add(hjLight);
// 定位相机，并且指向场景中心 // 定位相机，并且指向场景中心
camera.position.x = 0; camera.position.x = 0;
camera.position.y = 880; //650 camera.position.y = 910; //650
camera.position.z = 0; //600 camera.position.z = 0; //600
@ -185,9 +179,9 @@ const init = () => {
}) })
/**-------------------------------结束后注释------------------------------------------------- */ /**-------------------------------结束后注释------------------------------------------------- */
controls.mouseButtons = { controls.mouseButtons = {
LEFT: THREE.MOUSE.PAN, // LEFT: ,
MIDDLE: THREE.MOUSE.DOLLY, MIDDLE: THREE.MOUSE.DOLLY,
// RIGHT: RIGHT:THREE.MOUSE.PAN
}; };
@ -374,61 +368,61 @@ const init = () => {
createTitleFloor('', 464, 45, { x: 0, y: 0, z: 15 }) createTitleFloor('', 464, 45, { x: 0, y: 0, z: 15 })
//放置服务器 //放置服务器
createGlb() createGlb('服务器')
/*放置光猫************/ /*放置光猫************/
//汽车军团 //汽车军团
createSwitch({ x: -287.44, y: 0, z: 19.24 }) createSwitch('光猫', { x: -287.44, y: 0, z: 19.24 })
//精加车间 //精加车间
createSwitch({ x: -158.01, y: 0, z: 107.47 }) createSwitch('光猫', { x: -158.01, y: 0, z: 107.47 })
createSwitch({ x: -208.35, y: 0, z: 107.47 }) createSwitch('光猫', { x: -208.35, y: 0, z: 107.47 })
//机加车间 //机加车间
createSwitch({ x: -40.22, y: 0, z: 19.90 }) createSwitch('光猫', { x: -40.22, y: 0, z: 19.90 })
//电控分厂 //电控分厂
createSwitch({ x: -232.96, y: 0, z: -64.48 }) createSwitch('光猫', { x: -232.96, y: 0, z: -64.48 })
//大配套中心 //大配套中心
createSwitch({ x: 29.01, y: 0, z: -60.75 }) createSwitch('光猫', { x: 29.01, y: 0, z: -60.75 })
//大件车间 //大件车间
createSwitch({ x: 5.29, y: 0, z: 19.00 }) createSwitch('光猫', { x: 5.29, y: 0, z: 19.00 })
//家纺 医防 //家纺 医防
createSwitch({ x: 88.55, y: 0, z: -214.89 }) createSwitch('光猫', { x: 88.55, y: 0, z: -214.89 })
//二道岗 //二道岗
createSwitch({ x: 306.5, y: 0, z: 5.43 }) createSwitch('光猫', { x: 306.5, y: 0, z: 5.43 })
/*光猫结束********************************* */ /*光猫结束********************************* */
/**创建ac */ /**创建ac */
createAc({ x: 52.56, y: 0, z: 52.24 }) createAc('AC', { x: 52.56, y: 0, z: 52.24 })
//服装军团 //服装军团
createAc({ x: -88.39, y: 0, z: -249.36 }) createAc('AC', { x: -88.39, y: 0, z: -249.36 })
createAc({ x: 82.99, y: 0, z: -170.17 }) createAc('AC', { x: 82.99, y: 0, z: -170.17 })
/**创建AC结束 */ /**创建AC结束 */
/*创建wifi */ /*创建wifi */
//机加 //机加
createWifi({ x: -46.96, y: 3, z: 156.57 }) createWifi('WIFI', { x: -46.96, y: 3, z: 156.57 })
//大件 //大件
createWifi({ x: 52.60, y: 3, z: 96.44 }) createWifi('WIFI', { x: 52.60, y: 3, z: 96.44 })
createWifi({ x: 52.60, y: 3, z: 157.07 }) createWifi('WIFI', { x: 52.60, y: 3, z: 157.07 })
//精饰 //精饰
createWifi({ x: 133.14, y: 3, z: 107.43 }) createWifi('WIFI', { x: 133.14, y: 3, z: 107.43 })
createWifi({ x: 133.14, y: 3, z: 156.25 }) createWifi('WIFI', { x: 133.14, y: 3, z: 156.25 })
//焊接 //焊接
createWifi({ x: 305.73, y: 3, z: 110.45 }) createWifi('WIFI', { x: 305.73, y: 3, z: 110.45 })
createWifi({ x: 305.73, y: 3, z: 238.67 }) createWifi('WIFI', { x: 305.73, y: 3, z: 238.67 })
//服装 //服装
createWifi({ x: -89.13, y: 4, z: -245.33 }) createWifi('WIFI', { x: -88, y: 3, z: -232 })
createWifi({ x: -132.07, y: 3, z: -245.33 }) createWifi('WIFI', { x: -132.07, y: 3, z: -245.33 })
createWifi({ x: -222.31, y: 3, z: -245.33 }) createWifi('WIFI', { x: -222.31, y: 3, z: -245.33 })
createWifi({ x: -119.3, y: 3, z: -114.15 }) createWifi('WIFI', { x: -119.3, y: 3, z: -114.15 })
createWifi({ x: -176.45, y: 3, z: -114.40 }) createWifi('WIFI', { x: -176.45, y: 3, z: -114.40 })
//家纺 医防 //家纺 医防
createWifi({ x: 140.83, y: 2, z: -197.34 }) createWifi('WIFI', { x: 140.83, y: 2, z: -197.34 })
createWifi({ x: 259.37, y: 2, z: -197.34 }) createWifi('WIFI', { x: 259.37, y: 2, z: -197.34 })
createWifi({ x: 140.83, y: 2, z: -111.84 }) createWifi('WIFI', { x: 140.83, y: 2, z: -111.84 })
createWifi({ x: 259.50, y: 2, z: -111.81 }) createWifi('WIFI', { x: 259.50, y: 2, z: -111.81 })
@ -447,10 +441,10 @@ const init = () => {
{ x: -47.67, y: 2, z: -25.70 }, { x: -47.67, y: 2, z: -25.70 },
{ x: -47.67, y: 2, z: -248.85 }, { x: -47.67, y: 2, z: -248.85 },
{ x: -221.76, y: 2, z: -248.85 } { x: -221.76, y: 2, z: -248.85 }
]) ], 4, true)
createLine(garyLine, [{ x: -88.73, y: 2, z: -249.01 }, { x: -88.73, y: 2, z: -117.33 }, { x: -174.65, y: 2, z: -117.33 }]) createLine(garyLine, [{ x: -88.73, y: 2, z: -249.01 }, { x: -88.73, y: 2, z: -117.33 }, { x: -174.65, y: 2, z: -117.33 }], 4, true)
//汽车军团 //汽车军团
createLine(whiteColor, [{ x: -293.44, y: 2, z: 52.52 }, { x: -293.44, y: 2, z: 36.40 }, { x: -235.84, y: 2, z: -30.87 }], 2) createLine(whiteColor, [{ x: -293.44, y: 2, z: 52.52 }, { x: -293.44, y: 2, z: 36.40 }, { x: -235.84, y: 2, z: -30.87 }], 2)
//机加 //机加
@ -463,7 +457,7 @@ const init = () => {
createLine(garyLine, [ createLine(garyLine, [
{ x: -46.13, y: 2, z: 52.90 }, { x: -46.13, y: 2, z: 52.90 },
{ x: -46.13, y: 2, z: 153.05 } { x: -46.13, y: 2, z: 153.05 }
]) ], 4, true)
//家纺医防 //家纺医防
createLine(garyLine, [ createLine(garyLine, [
{ x: 27.47, y: 2, z: -26.11 }, { x: 27.47, y: 2, z: -26.11 },
@ -476,7 +470,7 @@ const init = () => {
{ x: 260.42, y: 2, z: -115.33 }, { x: 260.42, y: 2, z: -115.33 },
{ x: 141.66, y: 2, z: -115.33 }, { x: 141.66, y: 2, z: -115.33 },
{ x: 141.66, y: 2, z: -200.86 }, { x: 141.66, y: 2, z: -200.86 },
]) ], 4, true)
//创建第二条线 //创建第二条线
@ -492,7 +486,7 @@ const init = () => {
createLine(garyLine, [ createLine(garyLine, [
{ x: 306.56, y: 2, z: 40.43 }, { x: 306.56, y: 2, z: 40.43 },
{ x: 306.56, y: 2, z: 235.28 } { x: 306.56, y: 2, z: 235.28 }
]) ], 4, true)
//精加 //精加
createLine(whiteColor, [ createLine(whiteColor, [
{ x: -164.26, y: 2, z: 30.98 }, { x: -164.26, y: 2, z: 30.98 },
@ -503,7 +497,7 @@ const init = () => {
{ x: -164.26, y: 2, z: 140.05 }, { x: -164.26, y: 2, z: 140.05 },
{ x: -214.35, y: 2, z: 140.05 } { x: -214.35, y: 2, z: 140.05 }
]) ], 4, true)
//大件 总---精饰 //大件 总---精饰
createLine(garyLine, [ createLine(garyLine, [
{ x: 26.61, y: 2, z: -27.08 }, { x: 26.61, y: 2, z: -27.08 },
@ -512,12 +506,12 @@ const init = () => {
{ x: -0.90, y: 2, z: 52.24 }, { x: -0.90, y: 2, z: 52.24 },
{ x: 133.97, y: 2, z: 53.16 }, { x: 133.97, y: 2, z: 53.16 },
{ x: 133.97, y: 2, z: 154.31 } { x: 133.97, y: 2, z: 154.31 }
]) ], 4, true)
//大件 分 //大件 分
createLine(garyLine, [ createLine(garyLine, [
{ x: 53.43, y: 2, z: 53.16 }, { x: 53.43, y: 2, z: 53.16 },
{ x: 53.43, y: 2, z: 154.31 } { x: 53.43, y: 2, z: 154.31 }
]) ], 4, true)
/** /**
* *
{ x: 26.61, y: 2, z: -27.08 }, { x: 26.61, y: 2, z: -27.08 },
@ -543,12 +537,40 @@ const init = () => {
{ x: 71.44, y: 2, z: -251.40 }, { x: 71.44, y: 2, z: -251.40 },
{ x: 71.44, y: 2, z: -183.05 }, { x: 71.44, y: 2, z: -183.05 },
{ x: 83.96, y: 2, z: -183.05 } { x: 83.96, y: 2, z: -183.05 }
]) ], 4, true)
createLine(whiteColor, [ createLine(whiteColor, [
{ x: 18.30, y: 2, z: 30.98 }, { x: 18.30, y: 2, z: 30.98 },
{ x: 18.30, y: 2, z: -28.94 } { x: 18.30, y: 2, z: -28.94 }
], 2) ], 2)
/**创建线 */
createLine(whiteColor, [
{ x: -536, y: 2, z: 368 },
{ x: -536, y: 2, z: -348 }
], 8)
var dir = new THREE.Vector3(0, 0, -20);
//normalize the direction vector (convert to vector of length 1)
dir.normalize();
var origin = new THREE.Vector3(-536, 2, -348);
var length = 20;
var hex = 0xffffff;
var arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex, length, 10);
scene.add(arrowHelper);
createLine(whiteColor, [
{ x: -536, y: 2, z: 368 },
{ x: 516, y: 2, z: 368 }
], 8)
var dir = new THREE.Vector3(20, 0, 0);
//normalize the direction vector (convert to vector of length 1)
dir.normalize();
var origin = new THREE.Vector3(516, 2, 368);
var length = 20;
var hex = 0xffffff;
var arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex, length, 10);
scene.add(arrowHelper);
setTipDom() setTipDom()
sethoveMesh() sethoveMesh()
@ -626,26 +648,21 @@ const init = () => {
let T1 = +new Date() let T1 = +new Date()
// let t = T1 - T0 //获取时间间隔 // let t = T1 - T0 //获取时间间隔
renderer.render(scene, camera) renderer.render(scene, camera)
//旋转立方体,每次绕y轴旋转0.01弧度，每一秒渲染0.001弧度 // boxObjects.value.forEach((element: any) => {
//box.rotateY(0.001 * t) // let color1 = 0x88e76a
// if (t >= 2000) { // let color2 = 0xff0000
// return // //判断是否是更新的传感器数据
// } // if (store.updateSensorData.hasOwnProperty(element.sensor_id)) {
boxObjects.value.forEach((element: any) => { // // console.log(store.updateSensorData,'store.updateSensorData');
let color1 = 0x88e76a // // console.log(element,'element');
let color2 = 0xff0000
//判断是否是更新的传感器数据
if (store.updateSensorData.hasOwnProperty(element.sensor_id)) {
// console.log(store.updateSensorData,'store.updateSensorData');
// console.log(element,'element');
let color = store.updateSensorData[element.sensor_id].status ? color1 : color2 // let color = store.updateSensorData[element.sensor_id].status ? color1 : color2
element.devStatus = store.updateSensorData[element.sensor_id].status // element.devStatus = store.updateSensorData[element.sensor_id].status
element.material.color = new THREE.Color(color) // element.material.color = new THREE.Color(color)
} // }
// reader(element) // // reader(element)
}); // });
TWEEN.update() TWEEN.update()
controls.update() controls.update()
labelRenderer.render(scene, camera) labelRenderer.render(scene, camera)
@ -659,7 +676,7 @@ const init = () => {
//创建线 //创建线
function createLine(color: number, pointsList: any, width: number = 4) { function createLine(color: number, pointsList: any, width: number = 4, isDashed: boolean = false) {
// const material = new THREE.LineBasicMaterial({ color: color }); // const material = new THREE.LineBasicMaterial({ color: color });
// const points = []; // const points = [];
// pointsList.forEach(element => { // pointsList.forEach(element => {
@ -684,11 +701,11 @@ function createLine(color: number, pointsList: any, width: number = 4) {
color: color, color: color,
transparent: true, transparent: true,
// opacity: 0.5, // opacity: 0.5,
dashed: width !== 2 ? true : false, dashed: isDashed ? true : false,
dashScale: 1, dashScale: 1,
dashSize: 3, dashSize: 3,
gapSize: 1, gapSize: 1,
linewidth: width linewidth: width,
}) })
//console.log(material,'material'); //console.log(material,'material');
@ -702,25 +719,64 @@ function createLine(color: number, pointsList: any, width: number = 4) {
} }
//创建wifi //创建wifi
function createWifi(position: positionType) { // function createWifi(position: positionType) {
const loader = new GLTFLoader(); // const loader = new GLTFLoader();
loader.load('/models/glb/tothefuture_wifi.glb', function (gltf) { // loader.load('/models/glb/tothefuture_wifi.glb', function (gltf) {
const mesh = gltf.scene.children[0]; // const mesh = gltf.scene.children[0];
const s = 0.5; // const s = 0.5;
mesh.scale.set(s, s, s); // mesh.scale.set(s, s, s);
mesh.position.set(position.x, position.y, position.z); // mesh.position.set(position.x, position.y, position.z);
// mesh.rotation.x = THREE.MathUtils.degToRad(270) // // mesh.rotation.x = THREE.MathUtils.degToRad(270)
mesh.castShadow = true; // mesh.castShadow = true;
mesh.receiveShadow = true; // mesh.receiveShadow = true;
scene.add(mesh); // scene.add(mesh);
}, undefined, function (error) { // }, undefined, function (error) {
console.error(error); // console.error(error);
// });
// }
//计算经纬度与坐标的转换
function getLonLatToPosition(point: any) {
// -507,-340.5 = 117.268834,39.769089
// 507,340.5 = 117.271089,39.771682
let minx = -507
let minz = -340.5
let minLon = 117.268834
let minLat = 39.769089
let lon_step = (117.271089 - 117.268834) / 681
let lat_step = (39.771682 - 39.769089) / 1014
let {x,z} = point
let lon = (minLon + (z-minz) * lon_step).toFixed(6)
let lat = (minLat + (x-minx) * lat_step).toFixed(6)
return {lon,lat}
}
const createWifi = (name:string='wifi', boxposition: positionType, lon_lat:object={lon:117.269808,lat:39.770178}): object => {
const wallTexture = new THREE.TextureLoader().load(requires.wifi);
const wall = new THREE.BoxGeometry(15, 5, 10);
const wallMaterial = new THREE.MeshPhongMaterial({
map: wallTexture,
color: 0xe7e7e7,
transparent: true,
}); });
//墙体的网格
const wallMesh = new THREE.Mesh(wall, wallMaterial);
// 物体移动位置
// wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z);
wallMesh.position.set(boxposition.x, 5 + boxposition.y, boxposition.z - 6);
wallMesh.name = name
wallMesh.lon_lat = getLonLatToPosition({x:boxposition.x,z:boxposition.z - 6})
// 将立方体添加到场景中
group.add(wallMesh)
boxObjects.value.push(wallMesh)
return wallMesh
} }
//创建交换机 //创建交换机
@ -747,7 +803,7 @@ function createWifi(position: positionType) {
// }); // });
// } // }
const createSwitch = (boxposition: positionType, shadow: boolean = true): object => { const createSwitch = (name:string='光猫', boxposition: positionType, lon_lat:object={lon:117.269808,lat:39.770178}): object => {
const wallTexture = new THREE.TextureLoader().load(requires.guangmao); const wallTexture = new THREE.TextureLoader().load(requires.guangmao);
const wall = new THREE.BoxGeometry(15, 5, 10); const wall = new THREE.BoxGeometry(15, 5, 10);
@ -761,12 +817,15 @@ const createSwitch = (boxposition: positionType, shadow: boolean = true): object
// 物体移动位置 // 物体移动位置
// wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z); // wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z);
wallMesh.position.set(boxposition.x - 6, 5 + boxposition.y, boxposition.z + 33.73); wallMesh.position.set(boxposition.x - 6, 5 + boxposition.y, boxposition.z + 33.73);
wallMesh.name = name
wallMesh.lon_lat = getLonLatToPosition({x:boxposition.x - 6,z:boxposition.z + 33.73})
// 将立方体添加到场景中 // 将立方体添加到场景中
group.add(wallMesh) group.add(wallMesh)
boxObjects.value.push(wallMesh)
return wallMesh return wallMesh
} }
const createAc = (boxposition: positionType, shadow: boolean = true): object => { const createAc = (name:string='Ac', boxposition: positionType, lon_lat:object={lon:117.269808,lat:39.770178}): object => {
const wallTexture = new THREE.TextureLoader().load(requires.ac); const wallTexture = new THREE.TextureLoader().load(requires.ac);
const wall = new THREE.BoxGeometry(15, 5, 10); const wall = new THREE.BoxGeometry(15, 5, 10);
@ -780,8 +839,11 @@ const createAc = (boxposition: positionType, shadow: boolean = true): object =>
// 物体移动位置 // 物体移动位置
// wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z); // wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z);
wallMesh.position.set(boxposition.x, 5 + boxposition.y, boxposition.z); wallMesh.position.set(boxposition.x, 5 + boxposition.y, boxposition.z);
wallMesh.name = name
wallMesh.lon_lat = getLonLatToPosition(boxposition)
// 将立方体添加到场景中 // 将立方体添加到场景中
group.add(wallMesh) group.add(wallMesh)
boxObjects.value.push(wallMesh)
return wallMesh return wallMesh
} }
@ -789,7 +851,7 @@ const createAc = (boxposition: positionType, shadow: boolean = true): object =>
//创建服务器 //创建服务器
function createGlb() { function createGlb(name) {
const loader = new GLTFLoader(); const loader = new GLTFLoader();
loader.load('/models/glb/server.glb', function (gltf) { loader.load('/models/glb/server.glb', function (gltf) {
@ -881,7 +943,7 @@ function createLableObj(mesh: any, text: string, vector: positionType) {
laberDiv.className = 'laber_name'; laberDiv.className = 'laber_name';
laberDiv.textContent = text; laberDiv.textContent = text;
let pointLabel = new CSS2DObject(laberDiv); let pointLabel = new CSS2DObject(laberDiv);
pointLabel.position.set(vector.x, vector.y, vector.z); pointLabel.position.set(vector.x, 0, vector.z);
mesh.add(pointLabel); mesh.add(pointLabel);
} }
@ -1134,6 +1196,7 @@ function createSkyBox() {
function setTipDom() { function setTipDom() {
const domTag = document.createElement("div"); const domTag = document.createElement("div");
domTag.setAttribute("id2", "tipId"); domTag.setAttribute("id2", "tipId");
domTag.className = "item-tag"
// domTag.innerText='电流' // domTag.innerText='电流'
domTag.style.fontSize = "14px"; domTag.style.fontSize = "14px";
domTag.style.backgroundColor = "rgba(0,0,0,.5)"; domTag.style.backgroundColor = "rgba(0,0,0,.5)";
@ -1167,17 +1230,17 @@ function sethoveMesh() {
camera, camera,
labelRenderer.domElement labelRenderer.domElement
); );
dragControls.deactivate();
if (!edit) { dragControls.addEventListener("hoveron", function (event: any) {
dragControls.deactivate(); saveTipDom.element.innerHTML = `
} <div>${event.object.name}</div>
dragControls.addEventListener("hoveron", function (event: any) { <div>经度：${event.object.lon_lat.lon}</div>
saveTipDom.element.innerHTML = `${event.object.name}:${event.object.devStatus ? t('messages.onLine') : t('messages.offline') <div>纬度：${event.object.lon_lat.lat}</div>
}`; `;
saveTipDom.element.style.visibility = "visible"; saveTipDom.element.style.visibility = "visible";
saveTipDom.position.x = event.object.position.x; saveTipDom.position.x = event.object.position.x;
saveTipDom.position.y = event.object.position.y + 5; saveTipDom.position.y = event.object.position.y + 5;
saveTipDom.position.z = event.object.position.z - 20; saveTipDom.position.z = event.object.position.z - 30;
saveTipDom.visible = true; saveTipDom.visible = true;
}); });
@ -1189,22 +1252,6 @@ function sethoveMesh() {
saveTipDom.visible = false; saveTipDom.visible = false;
}); });
dragControls.addEventListener("dragend", function (event: any) {
let data = { 'id': event.object.sensor_id, 'x': event.object.position.x.toFixed(2), 'y': event.object.position.z.toFixed(2) }
updateCoordinateByPoint(data).then((res: any) => {
if (res.code == 200) {
ElNotification({
message: '移动位置成功',
duration: 2000,
type: 'success'
})
}
})
});
} }
onMounted(() => { onMounted(() => {
@ -1261,4 +1308,10 @@ onMounted(() => {
padding: 2px; padding: 2px;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
} }
.item-tag {
display: flex;
flex-direction: column;
align-items: center;
}
</style> </style>