diff --git a/src/assets/css/newicon/iconfont.css b/src/assets/css/newicon/iconfont.css index ffe36ff..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('//at.alicdn.com/t/c/font_4025145_o5efykd2y3.woff2?t=1684721703109') format('woff2'), - url('//at.alicdn.com/t/c/font_4025145_o5efykd2y3.woff?t=1684721703109') format('woff'), - url('//at.alicdn.com/t/c/font_4025145_o5efykd2y3.ttf?t=1684721703109') 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,14 @@ -moz-osx-font-smoothing: grayscale; } +.icon-zhongduananquanjierukongzhiqi:before { + content: "\e649"; +} + +.icon-guangmao:before { + content: "\e612"; +} + .icon-WIFI:before { content: "\e63f"; } 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/views/FactoryView/statusBar.vue b/src/views/FactoryView/statusBar.vue index b5af292..0216a91 100644 --- a/src/views/FactoryView/statusBar.vue +++ b/src/views/FactoryView/statusBar.vue @@ -31,9 +31,14 @@
  16/16
  • -     - 交换机 -
      10/10
    +     + 光猫 +
      9/9
    +
    • +
  • +     + AC +
      3/3
    • diff --git a/src/views/FactoryView/threeMap.vue b/src/views/FactoryView/threeMap.vue index da1d986..81694d8 100644 --- a/src/views/FactoryView/threeMap.vue +++ b/src/views/FactoryView/threeMap.vue @@ -67,7 +67,8 @@ const requires = { 'door': require("@/assets/img/Factory/door.jpg"), 'sky': require("@/assets/img/Factory/sky.jpg"), 'titleFloor': require("@/assets/img/Factory/screen_title.png"), - 'switch': require("@/assets/img/Factory/switch.jpg"), + 'guangmao': require("@/assets/img/Factory/guangmao.jpg"), + 'ac': require("@/assets/img/Factory/ac.jpg"), } const workerShopRoute = { @@ -270,7 +271,7 @@ 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 }) + const mesh_serve = createFloor('', 45, 48, { x: -364.5, y: 0, z: 58 }) createLableObj(mesh_serve, '服务器机房', { x: 0, y: 60, z: 0 }) @@ -381,7 +382,7 @@ const init = () => { createTitleFloor('', 464, 45, { x: 0, y: 0, z: 15 }) //放置服务器 createGlb() - /*放置交换机************/ + /*放置光猫************/ //汽车军团 createSwitch({ x: -287.44, y: 0, z: 19.24 }) //精加车间 @@ -389,8 +390,6 @@ const init = () => { createSwitch({ x: -208.35, y: 0, z: 107.47 }) //机加车间 createSwitch({ x: -40.22, y: 0, z: 19.90 }) - //服装军团 - createSwitch({ x: -81.96, y: 0, z: -283.33 }) //电控分厂 createSwitch({ x: -232.96, y: 0, z: -64.48 }) //大配套中心 @@ -401,7 +400,18 @@ const init = () => { 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 }) @@ -418,8 +428,8 @@ const init = () => { 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:-87.78,y:2 ,z:-114.15}) - createWifi({x:-176.45,y:2 ,z:-114.40}) + 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 }) @@ -429,30 +439,40 @@ const init = () => { - /*创建红线******************/ - let redLine = 0xF47378; - createLine(redLine, [{ x: -346.00, y: 23.6, z: 59.40 }, { x: -160.50, y: 2, z: 142.08 }]) + /*创建第一条线******************/ + 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 }], 1) //服装 - createLine(redLine, [ + 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 }, + ], 1) + 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(redLine, [{ x: -47.67, 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 }]) //汽车军团 - createLine(redLine, [{ x: -293.44, y: 2, z: 52.52 }, { x: -293.44, y: 2, z: 36.40 }, { x: -235.84, y: 2, z: -30.87 }]) + 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 }], 1) //机加 - createLine(redLine, [ + 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 }, + ], 1) + + createLine(garyLine, [ + { x: -46.13, y: 2, z: 52.90 }, { x: -46.13, y: 2, z: 153.05 } ]) //家纺医防 - createLine(redLine, [ + 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 }, @@ -465,46 +485,65 @@ const init = () => { { x: 141.66, y: 2, z: -200.86 }, ]) - //创建黄线 - let yellowLine = 0xFFF766; + + //创建第二条线 //横线 主干道 - createLine(yellowLine, [ + 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 } + ], 1) + createLine(garyLine, [ { x: 306.56, y: 2, z: 40.43 }, { x: 306.56, y: 2, z: 235.28 } ]) //精加 - createLine(yellowLine, [ + createLine(whiteColor, [ { x: -164.26, y: 2, z: 30.98 }, + { x: -164.26, y: 2, z: 140.05 } + + ],1) + createLine(garyLine, [ { x: -164.26, y: 2, z: 140.05 }, { x: -214.35, y: 2, z: 140.05 } ]) //大件 总---精饰 - createLine(yellowLine, [ - { x: -0.71, y: 2, z: 30.98 }, - { x: -0.71, y: 2, z: 53.16 }, + 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(yellowLine, [ + 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(yellowLine, [ + createLine(whiteColor, [ { x: -292.24, y: 2, z: 30.98 }, { x: -242.61, y: 2, z: -30.90 } - ]) + ], 1) //家纺 医防 - createLine(yellowLine, [ + createLine(whiteColor, [ { x: 18.30, y: 2, z: 30.98 }, + { x: 18.30, y: 2, z: -28.94 } + ], 1) + //家纺 医防 + 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 }, @@ -512,6 +551,10 @@ const init = () => { { 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 } + ],1) setTipDom() sethoveMesh() @@ -562,7 +605,7 @@ 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) + "}",selected.object.name); + 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) { @@ -679,7 +722,7 @@ const init = () => { //创建线 -function createLine(color: number, pointsList: any) { +function createLine(color: number, pointsList: any, width: number = 4) { // const material = new THREE.LineBasicMaterial({ color: color }); // const points = []; // pointsList.forEach(element => { @@ -694,24 +737,24 @@ function createLine(color: number, pointsList: any) { const geometry = new LineGeometry() let pointList = [] pointsList.forEach(element => { - let {x,y,z} = element - let arr = [x,y,z] + 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:true, + transparent: true, + // opacity: 0.5, + dashed: width !== 1?true:false, dashScale: 1, dashSize: 3, gapSize: 1, - linewidth: 4 + linewidth: width }) //console.log(material,'material'); - + material.resolution.set(iw, ih) // 5. 创建 Line2 var line = new Line2(geometry, material); @@ -767,9 +810,28 @@ function createWifi(position: positionType) { // }); // } -const createSwitch = ( boxposition: positionType, shadow: boolean = true): object => { +const createSwitch = (boxposition: positionType, shadow: boolean = true): object => { -const wallTexture = new THREE.TextureLoader().load(requires.switch); + 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, @@ -780,9 +842,7 @@ const wallMaterial = new THREE.MeshPhongMaterial({ 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); -// 对象是否渲染到阴影贴图当中 -wallMesh.castShadow = shadow; +wallMesh.position.set(boxposition.x, 5 + boxposition.y, boxposition.z); // 将立方体添加到场景中 group.add(wallMesh) return wallMesh @@ -985,7 +1045,7 @@ function createFloor(houseName: string, baseWidth: number, baseLength: number, p const texture = new THREE.TextureLoader().load(requires.wood); //设置地板大小，由于后面将要生成墙体存在设置为1的厚度，因此这里对地板的x，z均-2 const floor = new THREE.BoxGeometry(baseWidth - 2, 1, baseLength); - const material = new THREE.MeshPhongMaterial({ map: texture, transparent: true}); + const material = new THREE.MeshPhongMaterial({ map: texture, transparent: true }); const mesh = new THREE.Mesh(floor, material); const { x, y, z } = position mesh.position.set(x, y + 1 / 2, z);