修改网络拓扑图
This commit is contained in:
hzz
parent
bfe2400d46
commit
3fc6935718
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div :class="$style['container']" ref="Acontent">
|
||||
<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>
|
||||
|
||||
</template>
|
||||
|
||||
@ -15,16 +15,16 @@
|
||||
</div> -->
|
||||
<div class="iconTip">
|
||||
<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
|
||||
>{{ "   " + item.value }}
|
||||
<div>{{ ` ${item.counts}/${item.allnum}` }}</div>
|
||||
</li>
|
||||
<li v-for="item in prop.devList" :key="item.id" >
|
||||
<div>{{ ` ${item.counts}/${item.allnum}` }}</div> -->
|
||||
<!-- </li> -->
|
||||
<!-- <li v-for="item in prop.devList" :key="item.id" >
|
||||
<i :class="'iconfont ' + item.name + ' icon-logo SSCBar'"></i
|
||||
>{{ "   " + item.value }}
|
||||
<div>{{ ` ${item.counts}/${item.allnum}` }}</div>
|
||||
</li>
|
||||
</li> -->
|
||||
<li>
|
||||
<i class="iconfont icon-WIFI icon-logo"></i>
|
||||
WIFI
|
||||
@ -95,6 +95,7 @@ watch(
|
||||
(newVal, oldVal) => {
|
||||
//监听父组件宽高变化，随时重置本组件尺寸
|
||||
reset(newVal);
|
||||
console.log(newVal);
|
||||
|
||||
},
|
||||
{ immediate: true, deep: true, flush: "post" }
|
||||
|
||||
@ -3,11 +3,10 @@
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted, defineExpose } from 'vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as THREE from 'three';
|
||||
import * as TWEEN from '@tweenjs/tween.js';
|
||||
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 { DragControls } from "@/utils/DragControls";
|
||||
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 { ElNotification } from 'element-plus'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRoute } from 'vue-router';
|
||||
let { t } = useI18n();
|
||||
let route = useRoute();
|
||||
let edit = false;
|
||||
let type = route.params?.type;
|
||||
if (type == 'edit') {
|
||||
edit = true;
|
||||
}
|
||||
const store = useFactoryStore();
|
||||
const router = useRouter();
|
||||
|
||||
@ -66,9 +58,11 @@ const requires = {
|
||||
'tile': require("@/assets/img/Factory/tile.jpg"),
|
||||
'door': require("@/assets/img/Factory/door.jpg"),
|
||||
'sky': require("@/assets/img/Factory/sky.jpg"),
|
||||
//数字化工厂物联3D图
|
||||
'titleFloor': require("@/assets/img/Factory/screen_title.png"),
|
||||
'guangmao': require("@/assets/img/Factory/guangmao.jpg"),
|
||||
'ac': require("@/assets/img/Factory/ac.jpg"),
|
||||
'wifi': require("@/assets/img/Factory/wifi.jpg"),
|
||||
}
|
||||
|
||||
const workerShopRoute = {
|
||||
@ -159,7 +153,7 @@ const init = () => {
|
||||
scene.add(hjLight);
|
||||
// 定位相机，并且指向场景中心
|
||||
camera.position.x = 0;
|
||||
camera.position.y = 880; //650
|
||||
camera.position.y = 910; //650
|
||||
camera.position.z = 0; //600
|
||||
|
||||
|
||||
@ -185,9 +179,9 @@ const init = () => {
|
||||
})
|
||||
/**-------------------------------结束后注释------------------------------------------------- */
|
||||
controls.mouseButtons = {
|
||||
LEFT: THREE.MOUSE.PAN,
|
||||
// LEFT: ,
|
||||
MIDDLE: THREE.MOUSE.DOLLY,
|
||||
// RIGHT:
|
||||
RIGHT:THREE.MOUSE.PAN
|
||||
};
|
||||
|
||||
|
||||
@ -374,61 +368,61 @@ const init = () => {
|
||||
|
||||
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: -208.35, 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: -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 */
|
||||
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({ x: 82.99, y: 0, z: -170.17 })
|
||||
createAc('AC', { x: -88.39, y: 0, z: -249.36 })
|
||||
createAc('AC', { x: 82.99, y: 0, z: -170.17 })
|
||||
|
||||
/**创建AC结束 */
|
||||
|
||||
|
||||
/*创建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({ x: 52.60, y: 3, z: 157.07 })
|
||||
createWifi('WIFI', { x: 52.60, y: 3, z: 96.44 })
|
||||
createWifi('WIFI', { x: 52.60, y: 3, z: 157.07 })
|
||||
//精饰
|
||||
createWifi({ 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: 107.43 })
|
||||
createWifi('WIFI', { x: 133.14, y: 3, z: 156.25 })
|
||||
//焊接
|
||||
createWifi({ 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: 110.45 })
|
||||
createWifi('WIFI', { x: 305.73, y: 3, z: 238.67 })
|
||||
//服装
|
||||
createWifi({ x: -89.13, y: 4, z: -245.33 })
|
||||
createWifi({ x: -132.07, y: 3, z: -245.33 })
|
||||
createWifi({ x: -222.31, y: 3, z: -245.33 })
|
||||
createWifi({ x: -119.3, y: 3, z: -114.15 })
|
||||
createWifi({ x: -176.45, y: 3, z: -114.40 })
|
||||
createWifi('WIFI', { x: -88, y: 3, z: -232 })
|
||||
createWifi('WIFI', { x: -132.07, y: 3, z: -245.33 })
|
||||
createWifi('WIFI', { x: -222.31, y: 3, z: -245.33 })
|
||||
createWifi('WIFI', { x: -119.3, y: 3, z: -114.15 })
|
||||
createWifi('WIFI', { x: -176.45, y: 3, z: -114.40 })
|
||||
|
||||
//家纺 医防
|
||||
createWifi({ x: 140.83, y: 2, z: -197.34 })
|
||||
createWifi({ x: 259.37, y: 2, z: -197.34 })
|
||||
createWifi({ x: 140.83, y: 2, z: -111.84 })
|
||||
createWifi({ x: 259.50, y: 2, z: -111.81 })
|
||||
createWifi('WIFI', { x: 140.83, y: 2, z: -197.34 })
|
||||
createWifi('WIFI', { x: 259.37, y: 2, z: -197.34 })
|
||||
createWifi('WIFI', { x: 140.83, y: 2, z: -111.84 })
|
||||
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: -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)
|
||||
//机加
|
||||
@ -463,7 +457,7 @@ const init = () => {
|
||||
createLine(garyLine, [
|
||||
{ x: -46.13, y: 2, z: 52.90 },
|
||||
{ x: -46.13, y: 2, z: 153.05 }
|
||||
])
|
||||
], 4, true)
|
||||
//家纺医防
|
||||
createLine(garyLine, [
|
||||
{ x: 27.47, y: 2, z: -26.11 },
|
||||
@ -476,7 +470,7 @@ const init = () => {
|
||||
{ x: 260.42, y: 2, z: -115.33 },
|
||||
{ x: 141.66, y: 2, z: -115.33 },
|
||||
{ x: 141.66, y: 2, z: -200.86 },
|
||||
])
|
||||
], 4, true)
|
||||
|
||||
|
||||
//创建第二条线
|
||||
@ -492,7 +486,7 @@ const init = () => {
|
||||
createLine(garyLine, [
|
||||
{ x: 306.56, y: 2, z: 40.43 },
|
||||
{ x: 306.56, y: 2, z: 235.28 }
|
||||
])
|
||||
], 4, true)
|
||||
//精加
|
||||
createLine(whiteColor, [
|
||||
{ x: -164.26, y: 2, z: 30.98 },
|
||||
@ -503,7 +497,7 @@ const init = () => {
|
||||
{ x: -164.26, y: 2, z: 140.05 },
|
||||
{ x: -214.35, y: 2, z: 140.05 }
|
||||
|
||||
])
|
||||
], 4, true)
|
||||
//大件 总---精饰
|
||||
createLine(garyLine, [
|
||||
{ x: 26.61, y: 2, z: -27.08 },
|
||||
@ -512,12 +506,12 @@ const init = () => {
|
||||
{ x: -0.90, y: 2, z: 52.24 },
|
||||
{ x: 133.97, y: 2, z: 53.16 },
|
||||
{ x: 133.97, y: 2, z: 154.31 }
|
||||
])
|
||||
], 4, true)
|
||||
//大件 分
|
||||
createLine(garyLine, [
|
||||
{ x: 53.43, y: 2, z: 53.16 },
|
||||
{ x: 53.43, y: 2, z: 154.31 }
|
||||
])
|
||||
], 4, true)
|
||||
/**
|
||||
*
|
||||
{ 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: -183.05 },
|
||||
{ x: 83.96, y: 2, z: -183.05 }
|
||||
])
|
||||
], 4, true)
|
||||
createLine(whiteColor, [
|
||||
{ x: 18.30, y: 2, z: 30.98 },
|
||||
{ x: 18.30, y: 2, z: -28.94 }
|
||||
], 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()
|
||||
sethoveMesh()
|
||||
|
||||
@ -626,26 +648,21 @@ const init = () => {
|
||||
let T1 = +new Date()
|
||||
// let t = T1 - T0 //获取时间间隔
|
||||
renderer.render(scene, camera)
|
||||
//旋转立方体,每次绕y轴旋转0.01弧度，每一秒渲染0.001弧度
|
||||
//box.rotateY(0.001 * t)
|
||||
// if (t >= 2000) {
|
||||
// return
|
||||
// boxObjects.value.forEach((element: any) => {
|
||||
// let color1 = 0x88e76a
|
||||
// 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
|
||||
// element.devStatus = store.updateSensorData[element.sensor_id].status
|
||||
// element.material.color = new THREE.Color(color)
|
||||
|
||||
// }
|
||||
boxObjects.value.forEach((element: any) => {
|
||||
let color1 = 0x88e76a
|
||||
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
|
||||
element.devStatus = store.updateSensorData[element.sensor_id].status
|
||||
element.material.color = new THREE.Color(color)
|
||||
|
||||
}
|
||||
// reader(element)
|
||||
});
|
||||
// // reader(element)
|
||||
// });
|
||||
TWEEN.update()
|
||||
controls.update()
|
||||
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 points = [];
|
||||
// pointsList.forEach(element => {
|
||||
@ -684,11 +701,11 @@ function createLine(color: number, pointsList: any, width: number = 4) {
|
||||
color: color,
|
||||
transparent: true,
|
||||
// opacity: 0.5,
|
||||
dashed: width !== 2 ? true : false,
|
||||
dashed: isDashed ? true : false,
|
||||
dashScale: 1,
|
||||
dashSize: 3,
|
||||
gapSize: 1,
|
||||
linewidth: width
|
||||
linewidth: width,
|
||||
})
|
||||
//console.log(material,'material');
|
||||
|
||||
@ -702,25 +719,64 @@ function createLine(color: number, pointsList: any, width: number = 4) {
|
||||
}
|
||||
|
||||
//创建wifi
|
||||
function createWifi(position: positionType) {
|
||||
const loader = new GLTFLoader();
|
||||
// function createWifi(position: positionType) {
|
||||
// const loader = new GLTFLoader();
|
||||
|
||||
loader.load('/models/glb/tothefuture_wifi.glb', function (gltf) {
|
||||
const mesh = gltf.scene.children[0];
|
||||
// loader.load('/models/glb/tothefuture_wifi.glb', function (gltf) {
|
||||
// const mesh = gltf.scene.children[0];
|
||||
|
||||
const s = 0.5;
|
||||
mesh.scale.set(s, s, s);
|
||||
mesh.position.set(position.x, position.y, position.z);
|
||||
// mesh.rotation.x = THREE.MathUtils.degToRad(270)
|
||||
mesh.castShadow = true;
|
||||
mesh.receiveShadow = true;
|
||||
scene.add(mesh);
|
||||
// const s = 0.5;
|
||||
// mesh.scale.set(s, s, s);
|
||||
// mesh.position.set(position.x, position.y, position.z);
|
||||
// // mesh.rotation.x = THREE.MathUtils.degToRad(270)
|
||||
// mesh.castShadow = true;
|
||||
// mesh.receiveShadow = true;
|
||||
// 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 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(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)
|
||||
boxObjects.value.push(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 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(boxposition.x, 5 + boxposition.y, boxposition.z);
|
||||
wallMesh.name = name
|
||||
wallMesh.lon_lat = getLonLatToPosition(boxposition)
|
||||
// 将立方体添加到场景中
|
||||
group.add(wallMesh)
|
||||
boxObjects.value.push(wallMesh)
|
||||
return wallMesh
|
||||
}
|
||||
|
||||
@ -789,7 +851,7 @@ const createAc = (boxposition: positionType, shadow: boolean = true): object =>
|
||||
|
||||
|
||||
//创建服务器
|
||||
function createGlb() {
|
||||
function createGlb(name) {
|
||||
const loader = new GLTFLoader();
|
||||
|
||||
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.textContent = text;
|
||||
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);
|
||||
}
|
||||
@ -1134,6 +1196,7 @@ function createSkyBox() {
|
||||
function setTipDom() {
|
||||
const domTag = document.createElement("div");
|
||||
domTag.setAttribute("id2", "tipId");
|
||||
domTag.className = "item-tag"
|
||||
// domTag.innerText='电流'
|
||||
domTag.style.fontSize = "14px";
|
||||
domTag.style.backgroundColor = "rgba(0,0,0,.5)";
|
||||
@ -1167,17 +1230,17 @@ function sethoveMesh() {
|
||||
camera,
|
||||
labelRenderer.domElement
|
||||
);
|
||||
|
||||
if (!edit) {
|
||||
dragControls.deactivate();
|
||||
}
|
||||
dragControls.addEventListener("hoveron", function (event: any) {
|
||||
saveTipDom.element.innerHTML = `${event.object.name}:${event.object.devStatus ? t('messages.onLine') : t('messages.offline')
|
||||
}`;
|
||||
saveTipDom.element.innerHTML = `
|
||||
<div>${event.object.name}</div>
|
||||
<div>经度：${event.object.lon_lat.lon}</div>
|
||||
<div>纬度：${event.object.lon_lat.lat}</div>
|
||||
`;
|
||||
saveTipDom.element.style.visibility = "visible";
|
||||
saveTipDom.position.x = event.object.position.x;
|
||||
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;
|
||||
|
||||
});
|
||||
@ -1189,22 +1252,6 @@ function sethoveMesh() {
|
||||
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(() => {
|
||||
@ -1261,4 +1308,10 @@ onMounted(() => {
|
||||
padding: 2px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.item-tag {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user