wangh
/
beijing_daxing_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板显示

Browse Source
master
夜笙歌 1 month ago
parent 307d735aaa
commit 245542e103
1 changed files with 355 additions and 328 deletions
Show Stats Download Patch File Download Diff File

683
ruoyi-manage/src/main/resources/templates/manage/model/model.html
Unescape Escape View File

@ -1,397 +1,424 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org"> <html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<th:block th:include="include :: header('模型')"/> <th:block th:include="include :: header('模型')"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js"> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js">
</script> </script>
</head> </head>
<style> <style>
body::-webkit-scrollbar { body::-webkit-scrollbar {
display: none; display: none;
} }
.bg { .bg {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
background-image: url("/img/model/bg.jpg"); background-image: url("/img/model/bg.jpg");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#three canvas { #three canvas {
background-color: transparent; background-color: transparent;
display: block; display: block;
} }
.btn1 { .btn1 {
color: #fff; color: #fff;
} }
.btns { .btns {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 25%; left: 25%;
width: 48vw; width: 48vw;
height: 3.3vw; height: 3.3vw;
white-space: nowrap; white-space: nowrap;
overflow: auto; overflow: auto;
} }
.btns::-webkit-scrollbar { .btns::-webkit-scrollbar {
display: none; display: none;
} }
.bottomBtn { .bottomBtn {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 9.5vw; width: 9.5vw;
height: 3vw; height: 3vw;
text-align: center; text-align: center;
line-height: 3vw; line-height: 3vw;
font-size: 1.03vw; font-size: 1.03vw;
letter-spacing: 0.1vw; letter-spacing: 0.1vw;
color: #fff9; color: #fff9;
cursor: pointer; cursor: pointer;
} }
.qy { .qy {
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
top: 50%; top: 50%;
width: 1vw; width: 1vw;
height: 0.5vw; height: 0.5vw;
background-image: url("/img/model/zs1.png"); background-image: url("/img/model/zs1.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.qyL { .qyL {
left: 12%; left: 12%;
} }
.qyR { .qyR {
transform: translate(-50%, -50%) scale(-1); transform: translate(-50%, -50%) scale(-1);
right: calc(12% - 0.5vw); right: calc(12% - 0.5vw);
} }
.qyBottom { .qyBottom {
position: absolute; position: absolute;
display: none; display: none;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
bottom: 5%; bottom: 5%;
left: 50%; left: 50%;
width: 7.5vw; width: 7.5vw;
height: 0.21vw; height: 0.21vw;
background-image: url("/img/model/zs3.png"); background-image: url("/img/model/zs3.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.threeLabelContent { .threeLabelContent, .threeLabelContent1 {
display: none; display: none;
/*width: 200px;*/ /*width: 200px;*/
height: auto; height: auto;
color: #fff; color: #fff;
text-align: center; text-align: center;
background-color: rgba(23, 48, 97, 0.8); background-color: rgba(23, 48, 97, 0.8);
border: 2px #fff3 solid; border: 2px #fff3 solid;
position: absolute; position: absolute;
right: 0; right: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
overflow: auto; overflow: auto;
max-height: 90vh; max-height: 90vh;
} }
.threeLabelContent1 {
left: 0;
right: inherit;
}
.threeLabelContent:before { .threeLabelContent:before, .threeLabelContent1:before {
/*content: '';*/ /*content: '';*/
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 0; width: 0;
height: 0; height: 0;
border-left: 5px solid transparent; border-left: 5px solid transparent;
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-top: 10px solid rgba(23, 48, 97, 0.8); border-top: 10px solid rgba(23, 48, 97, 0.8);
} }
.sign { .sign {
} }
.sign .content{
background-image: url("/img/model/sign.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 5vw;
height: 6.42vw;
transform: translateY(-50%);
position: relative;
}
.sign .content .title { .sign .content {
position: absolute; background-image: url("/img/model/sign.png");
top: 15%; background-size: 100% 100%;
font-size: 0.6vw; background-repeat: no-repeat;
color: #fff; width: 5vw;
width: 100%; height: 6.42vw;
text-align: center; transform: translateY(-50%);
transform: translateY(-50%); position: relative;
} }
.pageTitle{
position: absolute; .sign .content .title {
transform: translateY(-50%); position: absolute;
top: 4%; top: 15%;
width: 100%; font-size: 0.6vw;
left: 0; color: #fff;
text-align: center; width: 100%;
letter-spacing: 2px; text-align: center;
font-size: 2vw; transform: translateY(-50%);
color: #fff; }
}
.rightTH{ .pageTitle {
display: inline-block; position: absolute;
width: 33%; transform: translateY(-50%);
} top: 4%;
.rightTable{ width: 100%;
width: 20vw; left: 0;
position: sticky; text-align: center;
top: 0; letter-spacing: 2px;
background-color: rgba(23, 48, 97); font-size: 2vw;
} color: #fff;
}
.rightTH {
display: inline-block;
width: 33%;
}
.rightTH1 {
display: inline-block;
width: 16.66%;
}
.rightTable {
width: 20vw;
position: sticky;
top: 0;
background-color: rgba(23, 48, 97);
}
.rightTable1 {
width: 30vw;
position: sticky;
top: 0;
background-color: rgba(23, 48, 97);
}
</style> </style>
<body class="gray-bg"> <body class="gray-bg">
<!-- 29.4 39.8 50.1 59.6 68.8 --> <!-- 29.4 39.8 50.1 59.6 68.8 -->
<div> <div>
<div class="bg"></div> <div class="bg"></div>
<div class="pageTitle">机场轮档平台</div> <div class="pageTitle">机场轮档平台</div>
<div id="three" style="width: 100vw;height: 82vh;position:absolute;top: 9%;left: 0;"></div> <div id="three" style="width: 100vw;height: 82vh;position:absolute;top: 9%;left: 0;"></div>
<div class="btns" id="btns"> <div class="btns" id="btns">
</div>
<div class="threeLabel" id="threeLabel">
<div class="threeLabelContent" id="threeLabelContent"></div>
</div>
<div class="sign" id="sign1">
<div class="content">
<span class="title">1号试车坪</span>
</div> </div>
</div> <div class="threeLabel" id="threeLabel">
<div class="sign" id="sign2"> <div class="threeLabelContent" id="threeLabelContent"></div>
<div class="content"> <div class="threeLabelContent1" id="threeLabelContent1"></div>
<span class="title">2号口</span>
</div> </div>
</div> <div class="sign" id="sign1">
<div class="sign" id="sign3"> <div class="content">
<div class="content"> <span class="title">1号试车坪</span>
<span class="title">3号口</span> </div>
</div> </div>
</div> <div class="sign" id="sign2">
<div class="sign" id="sign4"> <div class="content">
<div class="content"> <span class="title">2号口</span>
<span class="title">4号口</span> </div>
</div> </div>
</div> <div class="sign" id="sign3">
<div class="sign" id="sign5"> <div class="content">
<div class="content"> <span class="title">3号口</span>
<span class="title">3号试车坪</span> </div>
</div> </div>
</div> <div class="sign" id="sign4">
<div class="sign" id="sign6"> <div class="content">
<div class="content"> <span class="title">4号口</span>
<span class="title">3号坪</span> </div>
</div> </div>
</div> <div class="sign" id="sign5">
<div class="sign" id="sign7"> <div class="content">
<div class="content"> <span class="title">3号试车坪</span>
<span class="title">2号除冰坪</span> </div>
</div> </div>
</div> <div class="sign" id="sign6">
<div class="sign" id="sign8"> <div class="content">
<div class="content"> <span class="title">3号坪</span>
<span class="title">4号除冰坪</span> </div>
</div> </div>
</div> <div class="sign" id="sign7">
<div class="sign" id="sign9"> <div class="content">
<div class="content"> <span class="title">2号除冰坪</span>
<span class="title">轮挡仓库</span> </div>
</div>
<div class="sign" id="sign8">
<div class="content">
<span class="title">4号除冰坪</span>
</div>
</div>
<div class="sign" id="sign9">
<div class="content">
<span class="title">轮挡仓库</span>
</div>
</div> </div>
</div>
</div> </div>
<th:block th:include="include :: footer"/> <th:block th:include="include :: footer"/>
<script> <script>
let scene = null let scene = null
let controls = null let controls = null
let camera = null let camera = null
let tween = null let tween = null
</script> </script>
<script name="module1" type="module"> <script name="module1" type="module">
import * as TWEEN from '/js/tween.js' import * as TWEEN from '/js/tween.js'
import {OrbitControls} from '/js/three/examples/jsm/controls/OrbitControls.js' import {OrbitControls} from '/js/three/examples/jsm/controls/OrbitControls.js'
import {MTLLoader} from '/js/three/examples/jsm/loaders/MTLLoader.js' import {MTLLoader} from '/js/three/examples/jsm/loaders/MTLLoader.js'
import {OBJLoader} from '/js/three/examples/jsm/loaders/OBJLoader.js' import {OBJLoader} from '/js/three/examples/jsm/loaders/OBJLoader.js'
import * as THREE from '/js/three/build/three.module.min.js' import * as THREE from '/js/three/build/three.module.min.js'
import {CSS2DObject, CSS2DRenderer} from '/js/three/examples/jsm/renderers/CSS2DRenderer.js' import {CSS2DObject, CSS2DRenderer} from '/js/three/examples/jsm/renderers/CSS2DRenderer.js'
tween = TWEEN tween = TWEEN
scene = new THREE.Scene() scene = new THREE.Scene()
// scene.background = new THREE.Color(0x000000,0) // scene.background = new THREE.Color(0x000000,0)
camera = new THREE.PerspectiveCamera(75, window.innerWidth / (window.innerHeight), 0.1, 100000); camera = new THREE.PerspectiveCamera(75, window.innerWidth / (window.innerHeight), 0.1, 100000);
const pointLight = new THREE.PointLight(0xffffff, 10) //光源颜色 光照强度 const pointLight = new THREE.PointLight(0xffffff, 10) //光源颜色 光照强度
const ambient = new THREE.AmbientLight(0xffffff, 2) const ambient = new THREE.AmbientLight(0xffffff, 2)
const light = new THREE.DirectionalLight(0xffffff, 1) const light = new THREE.DirectionalLight(0xffffff, 1)
const labelRenderer = new CSS2DRenderer() const labelRenderer = new CSS2DRenderer()
const renderer = new THREE.WebGLRenderer({ const renderer = new THREE.WebGLRenderer({
antialias: true, antialias: true,
alpha: true, alpha: true,
logarithmicDepthBuffer: true, logarithmicDepthBuffer: true,
}) })
renderer.setClearColor(0x000000, 0) renderer.setClearColor(0x000000, 0)
controls = new OrbitControls(camera, renderer.domElement) controls = new OrbitControls(camera, renderer.domElement)
renderer.setSize(window.innerWidth, window.innerHeight * 0.82) renderer.setSize(window.innerWidth, window.innerHeight * 0.82)
camera.position.set(-363, 3719, 585) camera.position.set(-363, 3719, 585)
camera.rotation.x = -1.57 camera.rotation.x = -1.57
camera.rotation.y = 0 camera.rotation.y = 0
camera.rotation.z = 0 camera.rotation.z = 0
camera.updateProjectionMatrix() camera.updateProjectionMatrix()
controls.target = new THREE.Vector3(-363, 612, 585) controls.target = new THREE.Vector3(-363, 612, 585)
controls.update() controls.update()
// scene.add(pointLight) // scene.add(pointLight)
scene.add(ambient) scene.add(ambient)
light.position.set(-250, 872, 1814) light.position.set(-250, 872, 1814)
light.target.position.set(-1218, 2326, 3986) light.target.position.set(-1218, 2326, 3986)
// scene.add(light) // scene.add(light)
console.log(renderer) console.log(renderer)
document.getElementById('three').appendChild(renderer.domElement) document.getElementById('three').appendChild(renderer.domElement)
labelRenderer.setSize(window.innerWidth, window.innerHeight) labelRenderer.setSize(window.innerWidth, window.innerHeight)
labelRenderer.domElement.style.position = 'absolute' labelRenderer.domElement.style.position = 'absolute'
labelRenderer.domElement.style.top = '0' labelRenderer.domElement.style.top = '0'
labelRenderer.domElement.style.pointerEvents = 'none' labelRenderer.domElement.style.pointerEvents = 'none'
document.body.appendChild(labelRenderer.domElement) document.body.appendChild(labelRenderer.domElement)
let sign1 = new CSS2DObject(document.getElementById('sign1')) let sign1 = new CSS2DObject(document.getElementById('sign1'))
let sign2 = new CSS2DObject(document.getElementById('sign2')) let sign2 = new CSS2DObject(document.getElementById('sign2'))
let sign3 = new CSS2DObject(document.getElementById('sign3')) let sign3 = new CSS2DObject(document.getElementById('sign3'))
let sign4 = new CSS2DObject(document.getElementById('sign4')) let sign4 = new CSS2DObject(document.getElementById('sign4'))
let sign5 = new CSS2DObject(document.getElementById('sign5')) let sign5 = new CSS2DObject(document.getElementById('sign5'))
let sign6 = new CSS2DObject(document.getElementById('sign6')) let sign6 = new CSS2DObject(document.getElementById('sign6'))
let sign7 = new CSS2DObject(document.getElementById('sign7')) let sign7 = new CSS2DObject(document.getElementById('sign7'))
let sign8 = new CSS2DObject(document.getElementById('sign8')) let sign8 = new CSS2DObject(document.getElementById('sign8'))
let sign9 = new CSS2DObject(document.getElementById('sign9')) let sign9 = new CSS2DObject(document.getElementById('sign9'))
sign1.position.set(-3008, -0.131, -908) sign1.position.set(-3008, -0.131, -908)
sign2.position.set(-1462, -0.131, -809) sign2.position.set(-1462, -0.131, -809)
sign3.position.set(-1757, -0.11, -1312) sign3.position.set(-1757, -0.11, -1312)
sign4.position.set(1320, -0 / 131, -1014) sign4.position.set(1320, -0 / 131, -1014)
sign5.position.set(829, -0.51, 128) sign5.position.set(829, -0.51, 128)
sign6.position.set(-704, -0.131, 1140) sign6.position.set(-704, -0.131, 1140)
sign7.position.set(-1232, -0.109, 1724) sign7.position.set(-1232, -0.109, 1724)
sign8.position.set(-1102, -0.131, 1861) sign8.position.set(-1102, -0.131, 1861)
sign9.position.set(1308, -2.7, 1974) sign9.position.set(1308, -2.7, 1974)
scene.add(sign1) scene.add(sign1)
scene.add(sign2) scene.add(sign2)
scene.add(sign3) scene.add(sign3)
scene.add(sign4) scene.add(sign4)
scene.add(sign5) scene.add(sign5)
scene.add(sign6) scene.add(sign6)
scene.add(sign7) scene.add(sign7)
scene.add(sign8) scene.add(sign8)
scene.add(sign9) scene.add(sign9)
const geometry = new THREE.BoxGeometry(1, 1, 1); const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00}); const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material); const cube = new THREE.Mesh(geometry, material);
scene.add(cube); scene.add(cube);
function animate() { function animate() {
requestAnimationFrame(animate) requestAnimationFrame(animate)
renderer.render(scene, camera) renderer.render(scene, camera)
labelRenderer.render(scene, camera) labelRenderer.render(scene, camera)
tween.update() tween.update()
// console.log(camera) // console.log(camera)
// console.log(controls) // console.log(controls)
} }
animate() animate()
let mtlLoader = new MTLLoader() let mtlLoader = new MTLLoader()
mtlLoader.load(`https://ysg-1308998881.cos.ap-nanjing.myqcloud.com/daxingjichang/daxingjichang1/daxingjichang.mtl`, mtlLoader.load(`https://ysg-1308998881.cos.ap-nanjing.myqcloud.com/daxingjichang/daxingjichang1/daxingjichang.mtl`,
materials => { materials => {
materials.preload() materials.preload()
let loader = new OBJLoader() let loader = new OBJLoader()
loader.setMaterials(materials) loader.setMaterials(materials)
loader.load( loader.load(
`https://ysg-1308998881.cos.ap-nanjing.myqcloud.com/daxingjichang/daxingjichang1/daxingjichang.obj`, `https://ysg-1308998881.cos.ap-nanjing.myqcloud.com/daxingjichang/daxingjichang1/daxingjichang.obj`,
object => { object => {
scene.add(object) scene.add(object)
// 更新渲染器 // 更新渲染器
renderer.render(scene, camera) renderer.render(scene, camera)
}, },
xhr => { xhr => {
}, },
(err) => { (err) => {
} }
) )
}) })
let mouse = new THREE.Vector2() let mouse = new THREE.Vector2()
let raycaster = new THREE.Raycaster() let raycaster = new THREE.Raycaster()
document.addEventListener('dblclick', function (event) { document.addEventListener('dblclick', function (event) {
// 将鼠标位置转换为二维向量 // 将鼠标位置转换为二维向量
mouse.x = (event.clientX / window.innerWidth) * 2 - 1 mouse.x = (event.clientX / window.innerWidth) * 2 - 1
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1 mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
// 使用鼠标的位置和相机进行raycasting // 使用鼠标的位置和相机进行raycasting
raycaster.setFromCamera(mouse, camera) raycaster.setFromCamera(mouse, camera)
// 计算物体和鼠标点的交点 // 计算物体和鼠标点的交点
let intersects = raycaster.intersectObjects(scene.children) let intersects = raycaster.intersectObjects(scene.children)
// 如果有交点 // 如果有交点
if (intersects.length > 0) { if (intersects.length > 0) {
let obj = intersects[0] let obj = intersects[0]
console.log(obj) console.log(obj)
renderer.render(scene, camera) renderer.render(scene, camera)
} }
}, false) }, false)
</script> </script>
<script> <script>
const btnClick = (el, id) => { const btnClick = (el, id) => {
$(el).children('.qyBottom').css({display: 'inline-block'}) $(el).children('.qyBottom').css({display: 'inline-block'})
$(el).siblings().each(function () { $(el).siblings().each(function () {
$(this).children('.qyBottom').css({display: 'none'}) $(this).children('.qyBottom').css({display: 'none'})
}) })
$.post(ctx + 'api/getCountNumberById', {id: id.toString()}, (e) => { $.post(ctx + 'api/getCountNumberById', {id: id.toString()}, (e) => {
$("#threeLabelContent").css('display', 'block') $("#threeLabelContent").css('display', 'block')
$("#threeLabelContent").html(`<div class="rightTable"><div class="rightTH">机坪名称</div><div class="rightTH">机位编码</div><div class="rightTH">轮挡数量</div></div>${e.data.map(v => `<div class="rightTH">${v.areaName}</div><div class="rightTH">${v.locationCode}</div><div class="rightTH">${v.countNumber}</div> `).join('<br>')}`) $("#threeLabelContent").html(`<div class="rightTable"><div class="rightTH">机坪名称</div><div class="rightTH">机位编码</div><div class="rightTH">轮挡数量</div></div>${e.data.map(v => `<div class="rightTH">${v.areaName}</div><div class="rightTH">${v.locationCode}</div><div class="rightTH">${v.countNumber}</div> `).join('<br>')}`)
// new tween.Tween(camera.position).to(new THREE.Vector3(383, 439, 3553), 500).start() // new tween.Tween(camera.position).to(new THREE.Vector3(383, 439, 3553), 500).start()
// camera.position.set(383, 439, 3553) // camera.position.set(383, 439, 3553)
// camera.rotation.x = -0.9742 // camera.rotation.x = -0.9742
// camera.rotation.y = -0.2454 // camera.rotation.y = -0.2454
// camera.rotation.z = -0.3435 // camera.rotation.z = -0.3435
// controls.target = new THREE.Vector3(832, -1042, 2547) // controls.target = new THREE.Vector3(832, -1042, 2547)
// camera.updateProjectionMatrix() // camera.updateProjectionMatrix()
// controls.update() // controls.update()
}) })
} $.post(ctx + 'api/getDevice', {id: id.toString()}, (e) => {
$("#threeLabelContent1").css('display', 'block')
$("#threeLabelContent1").html(`<div class="rightTable1"><div class="rightTH1">摆放桩位</div><div class="rightTH1">设备编码</div><div class="rightTH1">设备名称</div><div class="rightTH1">设备类型</div><div class="rightTH1">使用状态</div><div class="rightTH1">设备状态</div></div>${e.data.map(v => `<div class="rightTH1">${v.locationName}</div><div class="rightTH1">${v.devicecode}</div><div class="rightTH1">${v.deviceName}</div><div class="rightTH1">${v.deviceType}</div><div class="rightTH1">${v.usestate}</div><div class="rightTH1">${v.devicestate}</div> `).join('<br>')}`)
$.post(ctx + 'api/getArea', {}, (e) => { })
let html = `` }
e.data.forEach(v => {
html += ` $.post(ctx + 'api/getArea', {}, (e) => {
let html = ``
e.data.forEach(v => {
html += `
<div class="bottomBtn btn1" onclick="btnClick(this,${v.storeId})" style="font-size: ${v.storeName.length > 5 ? '0.8vw' : '1.03vw'}"> <div class="bottomBtn btn1" onclick="btnClick(this,${v.storeId})" style="font-size: ${v.storeName.length > 5 ? '0.8vw' : '1.03vw'}">
<div class="qy qyL"></div> <div class="qy qyL"></div>
<div class="qy qyR"></div> <div class="qy qyR"></div>
@ -401,9 +428,9 @@
</span> </span>
</div> </div>
` `
})
$("#btns").html(html)
}) })
$("#btns").html(html)
})
</script> </script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save