diff --git a/public/models/glb/server.glb b/public/models/glb/server.glb new file mode 100644 index 0000000..9ffa746 Binary files /dev/null and b/public/models/glb/server.glb differ diff --git a/public/models/glb/tothefuture_wifi.glb b/public/models/glb/tothefuture_wifi.glb new file mode 100644 index 0000000..5981a88 Binary files /dev/null and b/public/models/glb/tothefuture_wifi.glb differ diff --git a/src/assets/css/newicon/iconfont.css b/src/assets/css/newicon/iconfont.css index 8c2021b..0ee81ea 100644 --- a/src/assets/css/newicon/iconfont.css +++ b/src/assets/css/newicon/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 4025145 */ - src: url('iconfont.woff2?t=1681876255746') format('woff2'), - url('iconfont.woff?t=1681876255746') format('woff'), - url('iconfont.ttf?t=1681876255746') format('truetype'); + src: url('//at.alicdn.com/t/c/font_4025145_25o1en7emhw.woff2?t=1684836220462') format('woff2'), + url('//at.alicdn.com/t/c/font_4025145_25o1en7emhw.woff?t=1684836220462') format('woff'), + url('//at.alicdn.com/t/c/font_4025145_25o1en7emhw.ttf?t=1684836220462') format('truetype'); } .iconfont { @@ -13,6 +13,22 @@ -moz-osx-font-smoothing: grayscale; } +.icon-zhongduananquanjierukongzhiqi:before { + content: "\e649"; +} + +.icon-guangmao:before { + content: "\e612"; +} + +.icon-WIFI:before { + content: "\e63f"; +} + +.icon-tuoputu_jiaohuanjizu:before { + content: "\e639"; +} + .icon-angle-right:before { content: "\e84e"; } @@ -20,4 +36,3 @@ .icon-angle-left:before { content: "\e84f"; } - diff --git a/src/assets/img/Factory/ac.jpg b/src/assets/img/Factory/ac.jpg new file mode 100644 index 0000000..7cfdb93 Binary files /dev/null and b/src/assets/img/Factory/ac.jpg differ diff --git a/src/assets/img/Factory/guangmao.jpg b/src/assets/img/Factory/guangmao.jpg new file mode 100644 index 0000000..503a784 Binary files /dev/null and b/src/assets/img/Factory/guangmao.jpg differ diff --git a/src/assets/img/Factory/switch.jpg b/src/assets/img/Factory/switch.jpg new file mode 100644 index 0000000..10d3e8d Binary files /dev/null and b/src/assets/img/Factory/switch.jpg differ diff --git a/src/assets/img/Factory/wood4.jpg b/src/assets/img/Factory/wood4.jpg new file mode 100644 index 0000000..3428a73 Binary files /dev/null and b/src/assets/img/Factory/wood4.jpg differ diff --git a/src/views/FactoryView/index.vue b/src/views/FactoryView/index.vue index f772dff..345ab31 100644 --- a/src/views/FactoryView/index.vue +++ b/src/views/FactoryView/index.vue @@ -14,7 +14,7 @@ import { getSensorInfodata , deviceDistributeInMachineryFactorydata} from "@/htt import { connectWebsocket, closeWebsocket } from "@/utils/websocket"; import { useFactoryStore } from '@/store/module/Factory'; -import statusBar from '@/components/mapStatus/statusBar.vue'; +import statusBar from './statusBar.vue'; const store = useFactoryStore(); let Acontent = ref(); diff --git a/src/views/FactoryView/statusBar.vue b/src/views/FactoryView/statusBar.vue new file mode 100644 index 0000000..0216a91 --- /dev/null +++ b/src/views/FactoryView/statusBar.vue @@ -0,0 +1,188 @@ + + + + + + diff --git a/src/views/FactoryView/threeMap.vue b/src/views/FactoryView/threeMap.vue index 885d615..eae77f1 100644 --- a/src/views/FactoryView/threeMap.vue +++ b/src/views/FactoryView/threeMap.vue @@ -9,8 +9,11 @@ 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 { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'; import { DragControls } from "@/utils/DragControls"; +import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; +import { Line2 } from 'three/examples/jsm/lines/Line2' +import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry' +import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial' import { useFactoryStore } from "@/store/module/Factory" import { useRouter } from 'vue-router'; import { updateCoordinateByPoint } from "@/http/AerialView/index" @@ -57,13 +60,15 @@ const requires = { '燃气': require('@/assets/img/Factory/ranqi.jpg'), '设备': require('@/assets/img/Factory/shebei.jpg'), 'ny': require("@/assets/img/Factory/ny.jpg"), - 'wood': require("@/assets/img/Factory/wood.jpg"), + 'wood': require("@/assets/img/Factory/wood4.jpg"), // 'wall1': require("@/assets/img/Factory/floor1.jpeg"), 'wall1': require("@/assets/img/Factory/wall1.jpg"), 'tile': require("@/assets/img/Factory/tile.jpg"), 'door': require("@/assets/img/Factory/door.jpg"), 'sky': require("@/assets/img/Factory/sky.jpg"), 'titleFloor': require("@/assets/img/Factory/screen_title.png"), + 'guangmao': require("@/assets/img/Factory/guangmao.jpg"), + 'ac': require("@/assets/img/Factory/ac.jpg"), } const workerShopRoute = { @@ -265,6 +270,12 @@ const init = () => { //机械设计及行政办公区 const mesh_hr = createFloor(t('messages.machineDesign'), 45, 120, { x: -431, y: 0, z: 102 }) createLableObj(mesh_hr, t('messages.machineDesign'), { x: 0, y: 60, z: 0 }) + + const mesh_serve = createFloor('', 45, 48, { x: -364.5, y: 0, z: 58 }) + createLableObj(mesh_serve, t('messages.服务器机房'), { x: 0, y: 60, z: 0 }) + + + //电控车间 const mesh_dkcj = createFloor(t('messages.ControllerRoom'), 76.5, 237, { x: -266, y: 0, z: -138.5 }) createLableObj(mesh_dkcj, t('messages.ControllerRoom'), { x: 0, y: 60, z: 0 }) @@ -328,10 +339,10 @@ const init = () => { // createUseWall('料场中间的墙', { baseWidth: 82, baseHeght: 30, baseLength: 1 }, { x: 228, y: 0, z: 183.5 }) createUseWall('料场后面的墙', { baseWidth: 82, baseHeght: 30, baseLength: 1 }, { x: 228, y: 0, z: 308 }) const mesh_lc = createFloor('料场', 84, 131, { x: 188, y: 0, z: 110 }) - createLableObj(mesh_lc, '料场', { x: 0, y: 60, z: 0 }) + createLableObj(mesh_lc, t('messages.料场'), { x: 0, y: 60, z: 0 }) const mesh_wfzcq = createFloor('料场', 84, 132, { x: 188, y: 0, z: 242 }) - createLableObj(mesh_wfzcq, '危废暂存间', { x: 0, y: 60, z: 0 }) + createLableObj(mesh_wfzcq, t('messages.危废暂存间'), { x: 0, y: 60, z: 0 }) @@ -369,8 +380,182 @@ const init = () => { createTitleFloor('', 464, 45, { x: 0, y: 0, z: 15 }) + //放置服务器 + createGlb() + /*放置光猫************/ + //汽车军团 + 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: -40.22, y: 0, z: 19.90 }) + //电控分厂 + createSwitch({ x: -232.96, y: 0, z: -64.48 }) + //大配套中心 + createSwitch({ x: 29.01, y: 0, z: -60.75 }) + //大件车间 + createSwitch({ x: 5.29, y: 0, z: 19.00 }) + //家纺 医防 + createSwitch({ x: 88.55, y: 0, z: -214.89 }) + //二道岗 + createSwitch({ x: 306.5, y: 0, z: 5.43 }) + /*光猫结束********************************* */ + /**创建ac */ + createAc({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}) + + /**创建AC结束 */ + + + /*创建wifi */ + //机加 + createWifi({ x: -46.96, y: 2, z: 156.57 }) + //大件 + createWifi({ x: 52.60, y: 2, z: 96.44 }) + createWifi({ x: 52.60, y: 2, z: 157.07 }) + //精饰 + createWifi({ x: 133.14, y: 2, z: 107.43 }) + createWifi({ x: 133.14, y: 2, z: 156.25 }) + //焊接 + createWifi({ x: 305.73, y: 2, z: 110.45 }) + createWifi({ x: 305.73, y: 2, z: 238.67 }) + //服装 + createWifi({ x: -89.13, y: 4, z: -245.33 }) + createWifi({ x: -132.07, y: 2, z: -245.33 }) + createWifi({ x: -222.31, y: 2, z: -245.33 }) + createWifi({ x: -119.3, y: 2, z: -114.15 }) + createWifi({ x: -176.45, y: 2, 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 }) + + + + /*创建第一条线******************/ + let garyLine = 0x595959; + let whiteColor = 0xffffff; + createLine(whiteColor, [{ x: -346.00, y: 23.6, z: 59.40 }, { x: -160.50, y: 2, z: 142.08 }], 2) + //服装 + createLine(whiteColor, [ + { x: -345.65, y: 2, z: 36.40 }, + { x: 22.67, y: 2, z: 36.40 }, + { x: 22.67, y: 2, z: -25.70 }, + ], 2) + createLine(garyLine, [ + { x: 22.67, y: 2, z: -25.70 }, + { x: -47.67, y: 2, z: -25.70 }, + { x: -47.67, y: 2, z: -248.85 }, + { x: -221.76, y: 2, z: -248.85 } + ]) + + + 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(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: -114.64, y: 2, z: 36.40 }, + { x: -114.64, y: 2, z: 52.42 }, + { x: -46.13, y: 2, z: 52.90 }, + ], 2) + + createLine(garyLine, [ + { x: -46.13, y: 2, z: 52.90 }, + { x: -46.13, y: 2, z: 153.05 } + ]) + //家纺医防 + createLine(garyLine, [ + { x: 27.47, y: 2, z: -26.11 }, + { x: 27.47, y: 2, z: -248.85 }, + { x: 69.26, y: 2, z: -248.85 }, + { x: 69.26, y: 2, z: -180.29 }, + { x: 85.51, y: 2, z: -180.29 }, + { x: 141.66, y: 2, z: -200.86 }, + { x: 260.42, y: 2, z: -200.86 }, + { x: 260.42, y: 2, z: -115.33 }, + { x: 141.66, y: 2, z: -115.33 }, + { x: 141.66, y: 2, z: -200.86 }, + ]) + + + //创建第二条线 + //横线 主干道 + createLine(whiteColor, [ + { x: -341.87, y: 2, z: 30.98 }, + { x: 111.97, y: 2, z: 30.98 }, + { x: 111.97, y: 2, z: 175.55 }, + { x: 294.54, y: 2, z: 175.55 }, + { x: 294.54, y: 2, z: 40.43 }, + { x: 306.56, y: 2, z: 40.43 } + ], 2) + createLine(garyLine, [ + { x: 306.56, y: 2, z: 40.43 }, + { x: 306.56, y: 2, z: 235.28 } + ]) + //精加 + createLine(whiteColor, [ + { x: -164.26, y: 2, z: 30.98 }, + { x: -164.26, y: 2, z: 140.05 } + + ],2) + createLine(garyLine, [ + { x: -164.26, y: 2, z: 140.05 }, + { x: -214.35, y: 2, z: 140.05 } + + ]) + //大件 总---精饰 + createLine(garyLine, [ + { x: 26.61, y: 2, z: -27.08 }, + { x: 26.61, y: 2, z: 39.27 }, + { x: -0.90, y: 2, z: 39.27 }, + {x:-0.90,y:2,z:52.24}, + { x: 133.97, y: 2, z: 53.16 }, + { x: 133.97, y: 2, z: 154.31 } + ]) + //大件 分 + createLine(garyLine, [ + { x: 53.43, y: 2, z: 53.16 }, + { x: 53.43, y: 2, z: 154.31 } + ]) +/** + * + { x: 26.61, y: 2, z: -27.08 }, + { x: 26.61, y: 2, z: 39.27 }, + { x: -0.90, y: 2, z: 39.27 }, + { x: 53.43, y: 2, z: 154.31 } + */ + //电控 + createLine(whiteColor, [ + { x: -292.24, y: 2, z: 30.98 }, + { x: -242.61, y: 2, z: -30.90 } + ], 2) + //家纺 医防 + createLine(whiteColor, [ + { x: 18.30, y: 2, z: 30.98 }, + { x: 18.30, y: 2, z: -28.94 } + ], 2) + //家纺 医防 + createLine(garyLine, [ + { x: 18.30, y: 2, z: -28.94 }, + { x: 25.64, y: 2, z: -28.94 }, + { x: 25.64, y: 2, z: -251.40 }, + { x: 71.44, y: 2, z: -251.40 }, + { x: 71.44, y: 2, z: -183.05 }, + { x: 83.96, y: 2, z: -183.05 } + ]) + createLine(whiteColor, [ + { x: 18.30, y: 2, z: 30.98 }, + { x: 18.30, y: 2, z: -28.94 } + ],2) + setTipDom() sethoveMesh() @@ -406,8 +591,8 @@ const init = () => { //width、height表示canvas画布宽高度 const x = (px / iw) * 2 - 1; const y = -(py / ih) * 2 + 1; - console.log("鼠标点击位置", "x:" + x, "y:" + y); - console.log("鼠标点击位置", "px:" + px, "py:" + py); + // console.log("鼠标点击位置", "x:" + x, "y:" + y); + // console.log("鼠标点击位置", "px:" + px, "py:" + py); //创建一个射线投射器`Raycaster` @@ -420,9 +605,10 @@ const init = () => { const intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { var selected = intersects[0]; //取第一个物体 - console.log("坐标", "{x:" + selected.point.x.toFixed(2) + ",y:" + (selected.point.y.toFixed(2) - 1) + ",z:" + selected.point.z.toFixed(2) + "}"); + console.log("坐标", "{x:" + selected.point.x.toFixed(2) + ",y:" + (selected.point.y.toFixed(2) - 1) + ",z:" + selected.point.z.toFixed(2) + "}", selected.object.name); + // console.log("非正常坐标", "{x:" + (+selected.point.x - 0.83).toFixed(2) + ",y:2 ,z:" + (selected.point.z + 3.52).toFixed(2) + "}"); let workerShop = intersects[0]?.object?.name - if (workerShopRoute.hasOwnProperty(workerShop)&&!edit) { + if (workerShopRoute.hasOwnProperty(workerShop) && !edit) { router.push({ path: workerShopRoute[workerShop] }) } @@ -535,6 +721,156 @@ const init = () => { +//创建线 +function createLine(color: number, pointsList: any, width: number = 4) { + // const material = new THREE.LineBasicMaterial({ color: color }); + // const points = []; + // pointsList.forEach(element => { + // points.push(new THREE.Vector3(element.x, element.y, element.z)); + // }); + + // const geometry = new THREE.BufferGeometry().setFromPoints(points); + // const line = new THREE.Line(geometry, material); + // scene.add(line); + // renderer.render(scene, camera); + + const geometry = new LineGeometry() + let pointList = [] + pointsList.forEach(element => { + let { x, y, z } = element + let arr = [x, y, z] + pointList.push(...arr) + }); + geometry.setPositions(pointList) + + const material = new LineMaterial({ + color: color, + transparent: true, + // opacity: 0.5, + dashed: width !== 2?true:false, + dashScale: 1, + dashSize: 3, + gapSize: 1, + linewidth: width + }) + //console.log(material,'material'); + + material.resolution.set(iw, ih) + // 5. 创建 Line2 + var line = new Line2(geometry, material); + // 6. 计算下线条长度 + line.computeLineDistances(); + // 7. 添加到场景 + scene.add(line) +} + +//创建wifi +function createWifi(position: positionType) { + const loader = new GLTFLoader(); + + loader.load('/models/glb/tothefuture_wifi.glb', function (gltf) { + const mesh = gltf.scene.children[0]; + + const s = 0.3; + 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) { + + console.error(error); + + }); +} + +//创建交换机 +// function createSwitch(position: positionType, scale: number = 0.2) { +// const loader = new GLTFLoader(); + +// loader.load('/models/gltf/scene.gltf', function (gltf) { +// const mesh = gltf.scene.children[0]; + +// const s = scale; +// mesh.scale.set(s, s, 0.5); +// mesh.position.set(position.x-12.75, position.y, position.z+66.22); +// mesh.rotation.z = THREE.MathUtils.degToRad(180) +// // mesh.rotation.y = THREE.MathUtils.degToRad(90) +// // mesh.rotation.x = THREE.MathUtils.degToRad(45) +// mesh.castShadow = true; +// mesh.receiveShadow = true; +// scene.add(mesh); + +// }, undefined, function (error) { + +// console.error(error); + +// }); +// } + +const createSwitch = (boxposition: positionType, shadow: boolean = true): object => { + + const wallTexture = new THREE.TextureLoader().load(requires.guangmao); + 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 - 6, 5 + boxposition.y, boxposition.z + 33.73); + // 将立方体添加到场景中 + group.add(wallMesh) + return wallMesh +} + +const createAc = (boxposition: positionType, shadow: boolean = true): object => { + +const wallTexture = new THREE.TextureLoader().load(requires.ac); +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); +// 将立方体添加到场景中 +group.add(wallMesh) +return wallMesh +} + + + + +//创建服务器 +function createGlb() { + const loader = new GLTFLoader(); + + loader.load('/models/glb/server.glb', function (gltf) { + const mesh = gltf.scene.children[0]; + + const s = 0.12; + mesh.scale.set(s, s, s); + mesh.position.set(-346, 0, 51); + mesh.castShadow = true; + mesh.receiveShadow = true; + scene.add(mesh); + }, undefined, function (error) { + + console.error(error); + + }); +} + type positionType = { @@ -557,7 +893,7 @@ function createHouse(houseName: string, size = { baseWidth: 40, baseHeght: 4, ba const mesh = createFloor('焊接车间', baseWidth, baseLength, position) createLableObj(mesh, t('messages.HanJieRoom'), { x: 0, y: 60, z: 0 }) } else { - const mesh = createFloor('houseName', baseWidth, baseLength, position) + const mesh = createFloor(houseName, baseWidth, baseLength, position) createLableObj(mesh, houseName, { x: 0, y: 60, z: 0 }) } } @@ -724,6 +1060,8 @@ function createWall(baseWidth: number = 10, baseHeght: number, baseLength: numbe const wall = new THREE.BoxGeometry(baseLength, baseHeght, baseWidth); const wallMaterial = new THREE.MeshPhongMaterial({ map: wallTexture, + color: 0xffffff, + transparent: true, }); //墙体的网格 const wallMesh = new THREE.Mesh(wall, wallMaterial); @@ -894,7 +1232,7 @@ function sethoveMesh() { ); if (!edit) { - dragControls.deactivate(); + dragControls.deactivate(); } dragControls.addEventListener("hoveron", function (event: any) { saveTipDom.element.innerHTML = `${event.object.name}:${event.object.devStatus ? t('messages.onLine') : t('messages.offline')