diff --git a/public/web3D/index.js b/public/web3D/index.js index 1e968ed..25761bd 100644 --- a/public/web3D/index.js +++ b/public/web3D/index.js @@ -7,8 +7,11 @@ var oldtransformNodex = null var oldMeshOther = null var drag = null -var isRotating = true -var clickParentRotate = false +var isRotating = true // 控制整体旋转状态：true=自动旋转，false=停止 +var clickParentRotate = false // 仅标记「手动暂停」状态，不干扰鼠标划出逻辑 + +// 新增：标记鼠标是否悬停在模型上（核心控制旋转恢复的开关） +var isPointerOverModel = false var targetAngles = { default: { // 初始视角 @@ -17,9 +20,9 @@ var targetAngles = { radius: 3 }, alarm: { // 报警视角（示例） - alpha: 3.1213, // -π（180度） - beta: 0.5855, // π/4（45度） - radius: 3 // 更近的距离 + alpha: 3.1213, + beta: 0.5855, + radius: 3 } } @@ -43,110 +46,71 @@ BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function() { document.body.appendChild(this._loadingDiv) } -function prepareGroupButton2(transformNodex, color, qu) { +// 重构通用的模型交互绑定函数（核心优化鼠标划入/划出逻辑） +function bindModelPointerEvents(transformNodex, clickCallback, highlightColor) { var mesheses = null if (transformNodex.getClassName() === 'TransformNode') { mesheses = transformNodex.getChildMeshes(false) } else { - mesheses = [] - mesheses.push(transformNodex) + mesheses = [transformNodex] } for (var i = 0; i < mesheses.length; i++) { - mesheses[i].actionManager = new BABYLON.ActionManager(scene) - mesheses[i].actionManager.registerAction( - new BABYLON.ExecuteCodeAction({ - trigger: BABYLON.ActionManager.OnPointerOverTrigger, - parameter: '' - }, - function() { - isRotating = false - camera.useAutoRotationBehavior = isRotating - } - ) - ) - // 移出事件 - mesheses[i].actionManager.registerAction( - new BABYLON.ExecuteCodeAction({ - trigger: BABYLON.ActionManager.OnPointerOutTrigger, - parameter: '' - }, - function() { - if (clickParentRotate) { - isRotating = true - camera.useAutoRotationBehavior = isRotating - } - } - ) - ) - mesheses[i].actionManager.registerAction( - new BABYLON.ExecuteCodeAction({ - trigger: BABYLON.ActionManager.OnPickTrigger, - parameter: '' - }, - function() { - clickbegin = true - try { - cameraClick(transformNodex) - } catch (error) { + const mesh = mesheses[i] + mesh.actionManager = new BABYLON.ActionManager(scene) + + // 鼠标划入：停止旋转（无论之前是否在旋转） + mesh.actionManager.registerAction( + new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, function() { + isPointerOverModel = true + isRotating = false // 标记为停止状态 + camera.useAutoRotationBehavior = false // 立即停止旋转 + // 高亮逻辑（如果需要） + if (highlightColor && h2) { + h2.addMesh(mesh, highlightColor) } }) ) - } -} -function prepareGroupButton3(transformNodex, color, qu) { - var mesheses = null - if (transformNodex.getClassName() === 'TransformNode') { - mesheses = transformNodex.getChildMeshes(false) - } else { - mesheses = [] - mesheses.push(transformNodex) - } - - for (var i = 0; i < mesheses.length; i++) { - mesheses[i].actionManager = new BABYLON.ActionManager(scene) - mesheses[i].actionManager.registerAction( - new BABYLON.ExecuteCodeAction({ - trigger: BABYLON.ActionManager.OnPointerOverTrigger, - parameter: '' - }, - function() { - isRotating = false - camera.useAutoRotationBehavior = isRotating - } - ) - ) - // 移出事件 - mesheses[i].actionManager.registerAction( - new BABYLON.ExecuteCodeAction({ - trigger: BABYLON.ActionManager.OnPointerOutTrigger, - parameter: '' - }, - function() { - if (clickParentRotate) { + // 鼠标划出：无条件恢复旋转（核心修改！只要移出，就恢复，除非手动暂停） + mesh.actionManager.registerAction( + new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, function() { + isPointerOverModel = false + // 关键：只要不是「手动暂停」，就恢复旋转（没有其他额外条件） + if (!clickParentRotate) { isRotating = true - camera.useAutoRotationBehavior = isRotating + camera.useAutoRotationBehavior = true // 立即恢复旋转 } - } - ) + // 移除高亮（如果需要） + if (highlightColor && h2) { + h2.removeMesh(mesh) + } + }) ) - mesheses[i].actionManager.registerAction( - new BABYLON.ExecuteCodeAction({ - trigger: BABYLON.ActionManager.OnPickTrigger, - parameter: '' - }, - function() { - clickbegin = true + + // 点击事件（不影响旋转逻辑） + mesh.actionManager.registerAction( + new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function() { try { - archCabinetsClick(transformNodex) + clickCallback && clickCallback(transformNodex) } catch (error) { + console.warn('点击回调执行失败:', error) } }) ) } } +// 原prepareGroupButton2改为调用通用函数 +function prepareGroupButton2(transformNodex, color, qu) { + bindModelPointerEvents(transformNodex, cameraClick, color || new BABYLON.Color3(0, 0, 1)) +} + +// 原prepareGroupButton3改为调用通用函数 +function prepareGroupButton3(transformNodex, color, qu) { + bindModelPointerEvents(transformNodex, archCabinetsClick, color || new BABYLON.Color3(0, 1, 0)) +} + BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() { show = 50 document.getElementById('customLoadingScreenDiv').style.display = 'none' @@ -156,93 +120,65 @@ BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() { var prepareGroupButton2ByMesh = function(transformNodex, color, qu) { var mesheses = null if (transformNodex.getClassName() === 'Mesh') { - mesheses = [] - mesheses.push(transformNodex) + mesheses = [transformNodex] } for (var i = 0; i < mesheses.length; i++) { - mesheses[i].actionManager = new BABYLON.ActionManager(scene) - mesheses[i].actionManager.registerAction( - new BABYLON.ExecuteCodeAction({ - trigger: BABYLON.ActionManager.OnPointerOverTrigger, - parameter: '' - }, - function() { + const mesh = mesheses[i] + mesh.actionManager = new BABYLON.ActionManager(scene) + + mesh.actionManager.registerAction( + new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, function() { + isPointerOverModel = true + isRotating = false + camera.useAutoRotationBehavior = false + if (oldMeshOther != null) { oldMeshOther.removeBehavior(drag) - var mesheses2 = null - if (oldMeshOther.getClassName() === 'Mesh') { - mesheses2 = [] - mesheses2.push(oldMeshOther) - } - for (var i = 0; i < mesheses2.length; i++) { - try { - h2.removeMesh(mesheses2[i]) - } catch (error) { - } - } + var mesheses2 = oldMeshOther.getClassName() === 'Mesh' ? [oldMeshOther] : [] + mesheses2.forEach(m => { + try { h2.removeMesh(m) } catch (e) {} + }) } oldMeshOther = transformNodex - var mesheses3 = null - if (transformNodex.getClassName() === 'Mesh') { - mesheses3 = [] - mesheses3.push(transformNodex) - } - for (let i = 0; i < mesheses3.length; i++) { - try { - h2.addMesh(mesheses3[i], color) - } catch (error) { - } - } - isRotating = false - camera.useAutoRotationBehavior = isRotating - } - ) + var mesheses3 = transformNodex.getClassName() === 'Mesh' ? [transformNodex] : [] + mesheses3.forEach(m => { + try { h2.addMesh(m, color) } catch (e) {} + }) + }) ) - // 移出事件 - mesheses[i].actionManager.registerAction( - new BABYLON.ExecuteCodeAction({ - trigger: BABYLON.ActionManager.OnPointerOutTrigger, - parameter: '' - }, - function() { - var mesheses4 = null - if (transformNodex.getClassName() === 'Mesh') { - mesheses4 = [] - mesheses4.push(transformNodex) - } - for (var i = 0; i < mesheses4.length; i++) { - try { - h2.removeMesh(mesheses4[i]) - } catch (error) { - } - } - if (clickParentRotate) { + + // 同样优化这个函数里的鼠标划出逻辑 + mesh.actionManager.registerAction( + new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, function() { + isPointerOverModel = false + if (!clickParentRotate) { // 仅排除「手动暂停」的情况 isRotating = true - camera.useAutoRotationBehavior = isRotating + camera.useAutoRotationBehavior = true } - } - ) + + var mesheses4 = transformNodex.getClassName() === 'Mesh' ? [transformNodex] : [] + mesheses4.forEach(m => { + try { h2.removeMesh(m) } catch (e) {} + }) + }) ) - mesheses[i].actionManager.registerAction( - new BABYLON.ExecuteCodeAction({ - trigger: BABYLON.ActionManager.OnPickTrigger, - parameter: '' - }, - function() { + + mesh.actionManager.registerAction( + new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function() { try { cameraClick(transformNodex) } catch (error) { + console.warn('点击回调执行失败:', error) } - } - ) + }) ) } } - // 绑功能点 - var smokeAlarms = [] // 烟感 + // 绑功能点（烟感） + var smokeAlarms = [] scene.transformNodes.forEach(function(node) { if (node.name.startsWith('smokealarm')) { smokeAlarms.push(node) @@ -253,17 +189,12 @@ BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() { smokeAlarms.forEach(function(jk01, index) { console.log('smokeAlarms', jk01) var parts = jk01.name.split('smokealarm') - if (parts.length > 1) { - const paddedIndex = String(index + 1).padStart(3, '0') - jk01.nameID = `S${paddedIndex}` - } else { - jk01.nameID = 'S000' - } + jk01.nameID = parts.length > 1 ? `S${String(index + 1).padStart(3, '0')}` : 'S000' jk01.baojing = false - prepareGroupButton2(jk01) }) - // 存储所有 camera 相关的 Mesh 监控 + + // 绑监控设备 const cameraMeshes = [] scene.transformNodes.forEach(function(node) { if (node.name.startsWith('有害生物去除器')) { @@ -271,17 +202,14 @@ BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() { } }) const cameraCount = cameraMeshes.length - console.log('以 camera 开头的 Mesh 数量:', cameraCount) + console.log('以 有害生物去除器 开头的 Mesh 数量:', cameraCount) const colorBlue = new BABYLON.Color3(0, 0, 1) cameraMeshes.forEach((cam, index) => { - const paddedIndex = String(index + 1).padStart(3, '0') - // DAK_MO_CAM_001 - // cam.nameID = `DAK_MO_CAM_${paddedIndex}` - cam.nameID = `cam_${paddedIndex}` - prepareGroupButton2(cam) + cam.nameID = `cam_${String(index + 1).padStart(3, '0')}` + prepareGroupButton2(cam, colorBlue) }) - // 档案柜 + // 绑档案柜 const archivesCabinets = []; scene.transformNodes.forEach(function(node) { if (node.name.startsWith('档案柜')) { @@ -289,9 +217,9 @@ BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() { } }); const archivesCabinetsCount = archivesCabinets.length; - console.log('以 档案柜 数量:', archivesCabinetsCount); + console.log('档案柜数量:', archivesCabinetsCount); - if (archivesCabinets.length > 0) { // 增加安全判断，避免数组为空时报错 + if (archivesCabinets.length > 0) { const children = archivesCabinets[0]._children; const filteredChildren = children.filter(cam => cam.name !== "克隆_1"); @@ -325,43 +253,29 @@ var createScene = function() { new BABYLON.Vector3(1.2, 0.08, 0.03), scene ) - camera.setTarget(new BABYLON.Vector3(0, 0, 0)) // 瞄准原点 + camera.setTarget(new BABYLON.Vector3(0, 0, 0)) camera.attachControl(canvas, true) - // ========== 关键修改：解决裁剪问题 ========== - camera.lowerRadiusLimit = 0.1 // 减小最小距离限制，允许相机更靠近物体 - camera.upperRadiusLimit = 500 // 增大最大距离限制 + // 相机参数（保持原优化） + camera.lowerRadiusLimit = 0.1 + camera.upperRadiusLimit = 500 camera.inertia = 0.1 + camera.minZ = 0.01 + camera.maxZ = 1000 + camera.fov = 0.8 - // 设置裁剪平面（核心解决裁剪问题） - camera.minZ = 0.01 // 近裁剪平面：设置为较小值，避免近距离裁剪 - camera.maxZ = 1000 // 远裁剪平面：设置为较大值，避免远距离裁剪 - - // 优化相机视场角（可选，根据需求调整） - camera.fov = 0.8 // 增大视场角，看到更多内容（默认约0.87弧度=50度） - - camera.useAutoRotationBehavior = isRotating // 自动旋转 + camera.useAutoRotationBehavior = isRotating // 初始启用自动旋转 - // 改变场景背景颜色 - 背景颜色opacity值设为0，达到透明背景的效果 + // 透明背景 scene.clearColor = new BABYLON.Color4(0, 0, 0, 0) scene.activeCamera = camera - scene.activeCamera.useInputToRestoreState = true var assetsManager = new BABYLON.AssetsManager(scene) - // 加载GLB模型并处理材质 + // 加载GLB模型 BABYLON.SceneLoader.LoadAssetContainerAsync('asset/', 'F5.glb', scene).then((container) => { - // 遍历所有材质 - container.materials.forEach(material => { - // 可以保留材质处理逻辑 - }) - // 将加载的资产添加到场景中 container.addAllToScene() - - // setTimeout(() => { - // moveCameraTo('alarm') - // }, 3000) }).catch((error) => { console.error('加载模型时出错:', error) }) @@ -377,13 +291,10 @@ var createScene = function() { scene.onPointerDown = function(evt) { var pickResult = scene.pickSprite(this.pointerX, this.pointerY) - var pick = scene.pick(scene.pointerX, scene.pointerY) console.log('pick', pick.pickedPoint) - if (pickResult.pickedSprite != null) { - if (pickResult.hit) { - alert(pickResult.pickedSprite.name) - } + if (pickResult.pickedSprite != null && pickResult.hit) { + alert(pickResult.pickedSprite.name) } } @@ -394,23 +305,15 @@ var createScene = function() { }) drag.validateDrag = (targetPosition) => { - if (targetPosition.x > 10.5 || targetPosition.x < -10.5) { - return false - } - if (targetPosition.z > 10.5 || targetPosition.z < -10.5) { - return false - } - if (oldtransformNodex != null) { - return true - } + if (targetPosition.x > 10.5 || targetPosition.x < -10.5) return false + if (targetPosition.z > 10.5 || targetPosition.z < -10.5) return false + return oldtransformNodex != null } - drag.onDragEndObservable.add((event) => { - // console.log("dragEnd"); - }) - // GUI + + // GUI高亮层 h1 = new BABYLON.HighlightLayer('hl1', scene) h2 = new BABYLON.HighlightLayer('hl2', scene) - h3 = new BABYLON.HighlightLayer('hl3', scene) // 修复重复的ID问题 + h3 = new BABYLON.HighlightLayer('hl3', scene) var step = 0.1 var currentx = 1 @@ -418,50 +321,40 @@ var createScene = function() { scene.registerAfterRender(() => { h1.blurHorizontalSize = h1.blurVerticalSize + currentx + // 报警高亮逻辑 var nodealert = scene.getTransformNodeByName('yan') if (nodealert != null) { - var mesheses3 = null - if (nodealert.getClassName() === 'TransformNode') { - mesheses3 = nodealert.getChildMeshes(false) - } else { - mesheses3 = [] - mesheses3.push(nodealert) - } - for (var i = 0; i < mesheses3.length; i++) { + var mesheses3 = nodealert.getClassName() === 'TransformNode' + ? nodealert.getChildMeshes(false) + : [nodealert] + mesheses3.forEach(mesh => { try { if (nodealert.baojing === true) { - h3.addMesh(mesheses3[i], new BABYLON.Color3(1, 0, 0)) + h3.addMesh(mesh, new BABYLON.Color3(1, 0, 0)) } else { - h3.removeMesh(mesheses3[i]) + h3.removeMesh(mesh) } - } catch (error) { - } - } + } catch (error) {} + }) } + + // 修复高亮动画速度控制 + if (currentx > 0.5) step *= -1 + if (currentx < 0) step *= -1 + currentx += step }) - if (currentx > 0.5) { - step *= -1 - } - if (currentx < 0) { - step *= -1 - } - currentx += step return scene } var canvas = document.getElementById('renderCanvas') -// load the 3D engine -var engine = new BABYLON.Engine(canvas, true, { - stencil: true -}) - -// call the createScene function +var engine = new BABYLON.Engine(canvas, true, { stencil: true }) var scene = createScene() scene.autoClear = true scene.imageProcessingConfiguration.exposure = 1 scene.imageProcessingConfiguration.contrast = 1 scene.environmentIntensity = 0.4 + engine.runRenderLoop(function() { scene.render() }) @@ -470,108 +363,93 @@ window.addEventListener('resize', function() { engine.resize() }) -// 报警 true:表示报警， false :表示不报警 +// 设备点击回调 function cameraClick(TheCamera) { - window.parent.postMessage( - { - type: 'cameraClick', - data: TheCamera.nameID - }, - '*' - ) + window.parent.postMessage({ + type: 'cameraClick', + data: TheCamera.nameID + }, '*') } -// 报警 true:表示报警， false :表示不报警 function archCabinetsClick(TheCamera) { - window.parent.postMessage( - { - type: 'archCabinetsClick', - data: TheCamera.nameID - }, - '*' - ) + window.parent.postMessage({ + type: 'archCabinetsClick', + data: TheCamera.nameID + }, '*') } +// 报警状态处理 function handleAlarm(deviceId, isAlarm) { var cl = new BABYLON.Color3(0, 0, 1) var c2 = new BABYLON.Color3(1, 0, 0) const targetDevice = scene.transformNodes.find(node => node.nameID === deviceId) if (targetDevice) { targetDevice.baojing = isAlarm - var mesheses = null - if (targetDevice.getClassName() === 'TransformNode') { - mesheses = targetDevice.getChildMeshes(false) - } else { - mesheses = [] - mesheses.push(targetDevice) - } - if (isAlarm) { - console.log('111') - for (var i = 0; i < mesheses.length; i++) { - h2.addMesh(mesheses[i], c2) - } - } else { - console.log('222') - for (var j = 0; j < mesheses.length; j++) { - h2.removeMesh(mesheses[j]) - h2.addMesh(mesheses[j], cl) + var mesheses = targetDevice.getClassName() === 'TransformNode' + ? targetDevice.getChildMeshes(false) + : [targetDevice] + + mesheses.forEach(mesh => { + if (isAlarm) { + h2.addMesh(mesh, c2) + } else { + h2.removeMesh(mesh) + h2.addMesh(mesh, cl) } - } + }) } else { console.log(`未找到设备 ID 为 ${deviceId} 的设备`) } } -window.addEventListener( - 'message', - function(e) { - if (e.data.type === 'deviceState') { - console.log('ddd', e.data.data) - const deviceData = e.data.data - if (Array.isArray(deviceData)) { - deviceData.forEach((device) => { - handleAlarm(device.deviceId, device.isAlarm) - }) - } else { - handleAlarm(deviceData.deviceId, deviceData.isAlarm) - } - } else if (e.data.type === 'isGetRotate') { - const isGetRotate = e.data.value - console.log('isGetRotate:', isGetRotate) - toggleAutoRotation(isGetRotate) +// 接收父页面消息（手动控制旋转） +window.addEventListener('message', function(e) { + if (e.data.type === 'deviceState') { + console.log('ddd', e.data.data) + const deviceData = e.data.data + if (Array.isArray(deviceData)) { + deviceData.forEach((device) => { + handleAlarm(device.deviceId, device.isAlarm) + }) + } else { + handleAlarm(deviceData.deviceId, deviceData.isAlarm) } - }, - false -) + } else if (e.data.type === 'isGetRotate') { + const isGetRotate = e.data.value + console.log('isGetRotate:', isGetRotate) + toggleAutoRotation(isGetRotate) + } +}, false) +// 手动控制旋转开关（仅影响「手动暂停」状态） function toggleAutoRotation(isAutoRotating) { - var camera = scene.activeCamera - clickParentRotate = !isAutoRotating - if (!isAutoRotating) { - // 启用自动旋转 - camera.useAutoRotationBehavior = true - } else { - // 禁用自动旋转 + clickParentRotate = isAutoRotating // 标记：true=手动暂停，false=手动启用 + if (isAutoRotating) { + // 手动暂停：无论鼠标是否在模型上，都停止旋转 + isRotating = false camera.useAutoRotationBehavior = false - camera.angularSpeed = 0 // 停止旋转 + camera.angularSpeed = 0 + } else { + // 手动启用：如果鼠标不在模型上，立即恢复旋转 + if (!isPointerOverModel) { + isRotating = true + camera.useAutoRotationBehavior = true + } } } -// 相机运动到指定视角（带动画） +// 相机动画跳转 function moveCameraTo(targetPreset) { - // 获取目标参数 var target = targetAngles[targetPreset] if (!target) return console.error('无效的视角预设') var camera = scene.activeCamera - // 禁用用户交互（可选） - camera.panningInertia = 0 // 禁止平移 + camera.panningInertia = 0 - // 创建并设置动画 var animationAlpha = new BABYLON.Animation( 'cameraAlphaAnimation', 'alpha', - 60, // 帧率 + 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ) @@ -579,7 +457,7 @@ function moveCameraTo(targetPreset) { var animationBeta = new BABYLON.Animation( 'cameraBetaAnimation', 'beta', - 60, // 帧率 + 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ) @@ -587,12 +465,11 @@ function moveCameraTo(targetPreset) { var animationRadius = new BABYLON.Animation( 'cameraRadiusAnimation', 'radius', - 60, // 帧率 + 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ) - // 定义关键帧 var keysAlpha = [ { frame: 0, value: camera.alpha }, { frame: 120, value: target.alpha } @@ -610,18 +487,15 @@ function moveCameraTo(targetPreset) { animationBeta.setKeys(keysBeta) animationRadius.setKeys(keysRadius) - // 设置缓动函数 var easingFunction = new BABYLON.CubicEase() easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT) animationAlpha.setEasingFunction(easingFunction) animationBeta.setEasingFunction(easingFunction) animationRadius.setEasingFunction(easingFunction) - // 开始动画 scene.beginDirectAnimation(camera, [animationAlpha, animationBeta, animationRadius], 0, 120, false, 1, function() { - // 动画完成后恢复用户交互 camera.panningInertia = 0.1 - toggleAutoRotation(true) + toggleAutoRotation(false) // 动画结束后，恢复自动旋转（除非手动暂停） window.parent.postMessage({ type: 'autoRotationStatus', value: true }, '*') }) } \ No newline at end of file diff --git a/src/assets/iconfonts/new/iconfont.css b/src/assets/iconfonts/new/iconfont.css index 1b1ae32..c2564ca 100644 --- a/src/assets/iconfonts/new/iconfont.css +++ b/src/assets/iconfonts/new/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 5078403 */ - src: url('iconfont.woff2?t=1764643437116') format('woff2'), - url('iconfont.woff?t=1764643437116') format('woff'), - url('iconfont.ttf?t=1764643437116') format('truetype'); + src: url('iconfont.woff2?t=1765782062984') format('woff2'), + url('iconfont.woff?t=1765782062984') format('woff'), + url('iconfont.ttf?t=1765782062984') format('truetype'); } .iconfont { @@ -13,6 +13,10 @@ -moz-osx-font-smoothing: grayscale; } +.icon-shebei:before { + content: "\e617"; +} + .icon-rfid-fill:before { content: "\e781"; } diff --git a/src/assets/iconfonts/new/iconfont.js b/src/assets/iconfonts/new/iconfont.js index b975b33..9fad03f 100644 --- a/src/assets/iconfonts/new/iconfont.js +++ b/src/assets/iconfonts/new/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_5078403='',(n=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var i,o,a,d,c,l=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_5078403,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?l(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(a=i,d=n.document,c=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,s())})}function s(){c||(c=!0,a())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}s()}})(window); \ No newline at end of file +window._iconfont_svg_string_5078403='',(n=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var i,o,a,l,c,d=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_5078403,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(a=i,l=n.document,c=!1,h(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,s())})}function s(){c||(c=!0,a())}function h(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}s()}})(window); \ No newline at end of file diff --git a/src/assets/iconfonts/new/iconfont.json b/src/assets/iconfonts/new/iconfont.json index 914a091..bc4a1be 100644 --- a/src/assets/iconfonts/new/iconfont.json +++ b/src/assets/iconfonts/new/iconfont.json @@ -5,6 +5,13 @@ "css_prefix_text": "icon-", "description": "", "glyphs": [ + { + "icon_id": "7677938", + "name": "设备", + "font_class": "shebei", + "unicode": "e617", + "unicode_decimal": 58903 + }, { "icon_id": "42198013", "name": "rfid-fill", diff --git a/src/assets/iconfonts/new/iconfont.ttf b/src/assets/iconfonts/new/iconfont.ttf index 54b14e2..648d30f 100644 Binary files a/src/assets/iconfonts/new/iconfont.ttf and b/src/assets/iconfonts/new/iconfont.ttf differ diff --git a/src/assets/iconfonts/new/iconfont.woff b/src/assets/iconfonts/new/iconfont.woff index 301ce0a..b68538e 100644 Binary files a/src/assets/iconfonts/new/iconfont.woff and b/src/assets/iconfonts/new/iconfont.woff differ diff --git a/src/assets/iconfonts/new/iconfont.woff2 b/src/assets/iconfonts/new/iconfont.woff2 index 88350e5..0d3ce40 100644 Binary files a/src/assets/iconfonts/new/iconfont.woff2 and b/src/assets/iconfonts/new/iconfont.woff2 differ diff --git a/src/views/components/AccessDoor.vue b/src/views/components/AccessDoor.vue index dd0f1be..04bdc2a 100644 --- a/src/views/components/AccessDoor.vue +++ b/src/views/components/AccessDoor.vue @@ -4,21 +4,21 @@

- 通道门记录 + 门禁出入记录

- + - + - + diff --git a/src/views/environmentalScreen/index.js b/src/views/environmentalScreen/index.js index b538acd..0dacb89 100644 --- a/src/views/environmentalScreen/index.js +++ b/src/views/environmentalScreen/index.js @@ -1,131 +1,4 @@ -export const allDeviceData = [ - { - 'id': 1, - 'ParentID': 0, - 'SubClass': 0, - 'IP': '', - 'Name': '环境监控', - 'NetStatus': 1, - 'SUBTYPE': '1' - }, - { - 'id': 11303, - 'ParentID': 1, - 'SubClass': 0, - 'IP': '192.168.99.101:5005', - 'Name': '温湿度', - 'NetStatus': 1, - 'SUBTYPE': '17' - }, - { - 'id': 11519, - 'ParentID': 1, - 'SubClass': 0, - 'IP': '', - 'Name': '空调红外控制', - 'NetStatus': 1, - 'SUBTYPE': '1' - }, - { - 'id': 11520, - 'ParentID': 1, - 'SubClass': 0, - 'IP': '192.168.99.101:6003', - 'Name': '开关量', - 'NetStatus': 1, - 'SUBTYPE': '11' - }, - { - 'id': 11605, - 'ParentID': 1, - 'SubClass': 0, - 'IP': '192.168.99.000', - 'Name': 'PM2.5 浓度', - 'NetStatus': 1, - 'SUBTYPE': '101' - }, - { - 'id': 11606, - 'ParentID': 1, - 'SubClass': 0, - 'IP': '192.168.99.001', - 'Name': 'PM10浓度', - 'NetStatus': 1, - 'SUBTYPE': '101' - }, - { - 'id': 11607, - 'ParentID': 1, - 'SubClass': 0, - 'IP': '192.168.99.002', - 'Name': 'TWOC', - 'NetStatus': 1, - 'SUBTYPE': '101' - }, - { - 'id': 11608, - 'ParentID': 1, - 'SubClass': 0, - 'IP': '192.168.99.003', - 'Name': '二氧化碳', - 'NetStatus': 1, - 'SUBTYPE': '101' - }, - { - 'id': 11609, - 'ParentID': 1, - 'SubClass': 0, - 'IP': '192.168.99.004', - 'Name': '甲醛', - 'NetStatus': 1, - 'SUBTYPE': '101' - }, - { - 'id': 11682, - 'ParentID': 1, - 'SubClass': 0, - 'IP': '192.168.99.101:5004', - 'Name': '壁挂升降空气净化机', - 'NetStatus': 1, - 'SUBTYPE': '11' - }, - { - 'id': 11695, - 'ParentID': 1, - 'SubClass': 0, - 'IP': '192.168.99.101:5003', - 'Name': '恒湿净化一体机', - 'NetStatus': 1, - 'SUBTYPE': '11' - }, - { - 'id': 11728, - 'ParentID': 1, - 'SubClass': 0, - 'IP': '192.168.99.102:5005', - 'Name': '环境监测1', - 'NetStatus': 1, - 'SUBTYPE': '25' - }, - { - 'id': 11800, - 'ParentID': 1, - 'SubClass': 0, - 'IP': '192.168.99.102:5003.3', - 'Name': '环境监测3_3', - 'NetStatus': 1, - 'SUBTYPE': '25' - }, - { - 'id': 11824, - 'ParentID': 1, - 'SubClass': 0, - 'IP': '192.168.99.102:5004.2', - 'Name': '环境监测2_2', - 'NetStatus': 1, - 'SUBTYPE': '25' - } -] +export const allDeviceData = [{ 'id': 1, 'ParentID': 0, 'SubClass': 0, 'IP': '', 'Name': '环境监控', 'NetStatus': 1, 'SUBTYPE': '1' }, { 'id': 11303, 'ParentID': 1, 'SubClass': 0, 'IP': '192.168.99.101:5005', 'Name': '温湿度', 'NetStatus': 1, 'SUBTYPE': '17' }, { 'id': 11355, 'ParentID': 1, 'SubClass': 0, 'IP': '192.168.99.102:5003:3', 'Name': '环境监测3_3', 'NetStatus': 1, 'SUBTYPE': '25' }, { 'id': 11379, 'ParentID': 1, 'SubClass': 0, 'IP': '192.168.99.102:5004:2', 'Name': '环境监测2_2', 'NetStatus': 1, 'SUBTYPE': '25' }, { 'id': 11403, 'ParentID': 1, 'SubClass': 0, 'IP': '192.168.99.102:5005', 'Name': '环境监测1', 'NetStatus': 1, 'SUBTYPE': '25' }, { 'id': 11440, 'ParentID': 1, 'SubClass': 0, 'IP': '192.168.99.101:5004', 'Name': '壁挂升降空气净化机', 'NetStatus': 1, 'SUBTYPE': '11' }, { 'id': 11486, 'ParentID': 1, 'SubClass': 0, 'IP': '192.168.99.101:5003', 'Name': '恒湿净化一体机', 'NetStatus': 1, 'SUBTYPE': '11' }, { 'id': 11519, 'ParentID': 1, 'SubClass': 0, 'IP': '', 'Name': '空调红外控制', 'NetStatus': 1, 'SUBTYPE': '1' }, { 'id': 11520, 'ParentID': 1, 'SubClass': 0, 'IP': '192.168.99.101:6003', 'Name': '开关量', 'NetStatus': 0, 'SUBTYPE': '11' }] export const mockIpData = { // 温湿度 diff --git a/src/views/environmentalScreen/index.vue b/src/views/environmentalScreen/index.vue index 9cfee22..3cd462f 100644 --- a/src/views/environmentalScreen/index.vue +++ b/src/views/environmentalScreen/index.vue @@ -14,15 +14,15 @@ -
+

档案库空气质量数据 -

+ + {{ currentDeviceName || '' }} +
  • @@ -46,11 +46,60 @@
-
-
+
+