From 69570c44f36faddd54f88ef8b2591959b42539f0 Mon Sep 17 00:00:00 2001 From: shijing Date: Wed, 28 Feb 2024 16:42:18 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E6=94=B9=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/bigScreen/index_enp_blue.vue | 431 +------------------------ 1 file changed, 13 insertions(+), 418 deletions(-) diff --git a/src/views/bigScreen/index_enp_blue.vue b/src/views/bigScreen/index_enp_blue.vue index 4af91eee..fbb43c98 100644 --- a/src/views/bigScreen/index_enp_blue.vue +++ b/src/views/bigScreen/index_enp_blue.vue @@ -279,8 +279,9 @@
-
-
项目
+
+
监测设备名称
PM10(μg/m³)
PM2.5(μg/m³)
@@ -400,15 +401,6 @@ export default { resizeTimeout: null, engine: null, loadedPercent: 0, - sectionNames: { - "干渣库_primitive0": "电石渣", - "原料磨及废气处理_primitive0": "原料磨", - "窑": "回转窑", - "煤粉制备_primitive1": "煤磨", - "水泥磨房_primitive0": "水泥磨", - "水泥储存及散装库_primitive2": "水泥包装", - // "停车场": "停车场" - }, showKgcet: true, currentLightMesh: null, activeBtns: 0, @@ -449,7 +441,6 @@ export default { data: [], }, }, - ws: null, pieData: [ { value: 0, name: '物料输送' }, { value: 0, name: '生产工艺过程' }, @@ -497,21 +488,7 @@ export default { ], } }, - // watch: { - // 'config.dark'(val) { - // if (val) { - // document.documentElement.classList.add("dark") - // this.$TOOL.data.set("APP_DARK", val) - // } else { - // document.documentElement.classList.remove("dark") - // this.$TOOL.data.remove("APP_DARK") - // } - // }, - // 'config.lang'(val) { - // this.$i18n.locale = val - // this.$TOOL.data.set("APP_LANG", val) - // } - // }, + created() { document.documentElement.classList.add("dark") this.$TOOL.data.set("APP_DARK", true) @@ -542,6 +519,7 @@ export default { } }, methods: { + //无组织污染源一览数据 getleft1Data() { let that = this; that.$API.enp.drain.countcate.req({ type: 20 }).then((res) => { @@ -552,6 +530,7 @@ export default { that.pieData[2].value = res.count_mstore; }) }, + //接入设备数量 getleft2Data() { this.$API.em.equipment.list.req({ type: 10, query: {} }).then((res1) => { console.log(res1) @@ -570,6 +549,7 @@ export default { this.eqNumData.jk = res4.count; }) }, + //有组织排放口实时监测清单数据（ CEMS） getleft3Data() { let that = this; that.$API.enp.drain_equip.list.req({ drain__type: 10, equipment__type: 20, has_envdata: 'yes' }).then(res => { @@ -577,17 +557,20 @@ export default { that.cemsData = res.results[0]; }) }, + //无组织排放口实时监测数据（TSP） getright1Data() { let that = this; - that.$API.enp.drain_equip.list.req({ drain__type: 10, equipment__type: 20, has_envdata: 'yes' }).then(res => { + that.$API.enp.drain_equip.list.req({ drain__type: 20, equipment__type: 20, has_envdata: 'yes' }).then(res => { // that.cemsDataList = res.results; // that.cemsData = res.results[0]; }) }, + //环境质量实时监测清单---（小微站） getright2Data() { let that = this; - that.$API.enp.drain_equip.list.req({ equipment__type: 40, has_envdata: 'yes' }).then(res => { + that.$API.em.equipment.list.req({ type: 20, cate__code: 'aqms', has_envdata: 'yes' }).then(res => { that.wData = res.results; + console.log('wData', this.wData) }) }, configDark() { @@ -713,9 +696,6 @@ export default { this.activeIndex = 4; this.elDrawer = true; this.activeDrawerName = command; - // if (command == 'video') { - // window.open('/demo/index.html', '_self') - // } }, handleClick5(command) { this.activeIndex = 5; @@ -725,13 +705,7 @@ export default { getMessage(msg) { console.log(msg); }, - close() { - if (this.ws) { - this.ws.close(); - this.ws = null; - console.log("socket已经关闭"); - } - }, + compare(property) { return function (a, b) { return a[property] - b[property]; @@ -780,387 +754,8 @@ export default { } catch (error) { } }, 500) }, - initFactory() { - var that = this; - const canvas = document.getElementById("renderCanvas"); // Get the canvas element - const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine - BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () { - } - BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function () { - document.getElementById("loadingScreen").style.display = "none"; - } - engine.displayLoadingUI(); - // Add your code here matching the playground format - const createScene = function () { - const scene = new BABYLON.Scene(engine); - scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1); - const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 100, height: 100 }); - const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene); - groundMaterial.majorUnitFrequency = 5; - groundMaterial.minorUnitVisibility = 0.5; - groundMaterial.gridRatio = 2; - // groundMaterial.opacity = 0.99; - ground.material = groundMaterial; - ground.position.y = -0.1 - // 加载背景图片 - const backgroundImage = new BABYLON.Layer('', 'img/enp_blue/bg_enp.png', scene, true); - const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0, 1.2)); - that.initialTarget = camera.getTarget(); - camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下 - camera.attachControl(canvas, true); - camera.maxZ = 1000; // 调整适当的值 - // 相机限制 - camera.lowerRadiusLimit = 6; - camera.upperRadiusLimit = 18; - // 灯光 - const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0)); - light.intensity = 1.6; - // skybox - const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 150 }, scene); - var skyboxMaterial = new BABYLON_MATERIAL.SkyMaterial("skyMaterial", scene); - skyboxMaterial.backFaceCulling = false; - skybox.material = skyboxMaterial; - /* - * Keys: - * - 1: Day - * - 2: Evening - * - 3: Increase Luminance - * - 4: Decrease Luminance - * - 5: Increase Turbidity - * - 6: Decrease Turbidity - * - 7: Move horizon to -50 - * - 8: Restore horizon to 0 - */ - var setSkyConfig = function (property, from, to) { - var keys = [ - { frame: 0, value: from }, - { frame: 100, value: to } - ]; - - var animation = new BABYLON.Animation("animation", property, 100, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT); - animation.setKeys(keys); - - scene.stopAnimation(skybox); - scene.beginDirectAnimation(skybox, [animation], 0, 100, false, 1); - }; - - window.addEventListener("keydown", function (evt) { - switch (evt.keyCode) { - case 49: setSkyConfig("material.inclination", skyboxMaterial.inclination, 0); break; // 1 - case 50: setSkyConfig("material.inclination", skyboxMaterial.inclination, -0.5); break; // 2 - - case 51: setSkyConfig("material.luminance", skyboxMaterial.luminance, 0.1); break; // 3 - case 52: setSkyConfig("material.luminance", skyboxMaterial.luminance, 1.0); break; // 4 - - case 53: setSkyConfig("material.turbidity", skyboxMaterial.turbidity, 40); break; // 5 - case 54: setSkyConfig("material.turbidity", skyboxMaterial.turbidity, 5); break; // 6 - - case 55: setSkyConfig("material.cameraOffset.y", skyboxMaterial.cameraOffset.y, 50); break; // 7 - case 56: setSkyConfig("material.cameraOffset.y", skyboxMaterial.cameraOffset.y, 0); break; // 8 - default: break; - } - }); - - // Set to Day - setSkyConfig("material.inclination", skyboxMaterial.inclination, 0); - - // 全屏GUI - const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI"); - that.myui = advancedTexture; - // 创建一个高亮层 - const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene); - // 主控制区 - var control_main = new BABYLON_GUI.StackPanel(); - control_main.isVertical = false - control_main.top = '-40%'; - control_main.left = '-20%'; - advancedTexture.addControl(control_main); - - // var button_main = BABYLON_GUI.Button.CreateSimpleButton("button_main", "主视角"); - // button_main.width = "80px" - // button_main.height = "30px"; - // button_main.color = "white"; - // button_main.cornerRadius = 20; - // button_main.background = "green"; - // control_main.addControl(button_main) - // button_main.onPointerClickObservable.add(() => { - // if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) { - // var cameraPosition = new BABYLON.Vector3( - // 0 + that.initialRadius * Math.sin(that.initialBeta) * Math.cos(that.initialAlpha), - // 0 + that.initialRadius * Math.cos(that.initialBeta), - // 0 + that.initialRadius * Math.sin(that.initialBeta) * Math.sin(that.initialAlpha) - // ); - // var ease = new BABYLON.CubicEase(); - // ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT); - // BABYLON.Animation.CreateAndStartAnimation('at6', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease); - // BABYLON.Animation.CreateAndStartAnimation('at61', camera, 'target', 45, 200, camera.target, that.initialTarget, 0, ease); - // } - // }) - - // 高亮显示mesh名 - const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect'); - mesh_rect.width = "100px"; - mesh_rect.height = "25px"; - mesh_rect.background = 'orange'; - mesh_rect.alpha = 0.6; - mesh_rect.isVisible = false; - advancedTexture.addControl(mesh_rect); - - var mesh_name = new BABYLON_GUI.TextBlock('mesh_name'); - mesh_name.text = ""; - mesh_name.color = 'white'; - mesh_name.fontSize = '14px'; - mesh_rect.addControl(mesh_name); - var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/factory.glb"; - BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) { - for (let key in that.sectionNames) { - const value = that.sectionNames[key]; - const mesh = scene.getMeshByName(key); - if (mesh) { - const img = new BABYLON_GUI.Image('img', 'img/ignore/qm_enp.png'); - img.width = '50px'; - img.height = '50px'; - img.top = '50%'; - img.left = '50%'; - img.horizontalAlignment = 10; - img.verticalAlignment = 10; - //建筑标签 - const rect1 = new BABYLON_GUI.Rectangle(value + '_rect'); - rect1.width = "60px"; - rect1.height = "30px"; - rect1.cornerRadius = 4; - rect1.color = "Orange"; - rect1.thickness = 2; - rect1.background = "green"; - rect1.isPointerBlocker = true; // 防止点击穿透 - advancedTexture.addControl(img); - var label = new BABYLON_GUI.TextBlock(value + '_label'); - label.text = value; - label.color = 'white'; - label.fontSize = '14px'; - img.linkWithMesh(mesh); - rect1.onPointerDownObservable.add(() => { - - const mesh = rect1.linkedMesh; - if (camera.target != mesh.position) { - // console.log('fly to') - // 计算新的相机位置 - let position = mesh._parentNode._position - if (mesh._parentNode.id == '__root__') { - position = mesh.position - } - const cameraPosition = new BABYLON.Vector3( - mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI), - mesh.position.y + 9 * Math.cos(camera.beta), - mesh.position.z + 9 * Math.sin(camera.beta) * Math.sin(Math.PI) - ); - var ease = new BABYLON.CubicEase(); - ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT); - BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease); - BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease); - } - let dataViewName = rect1.name.split('_')[0] + '_data_view'; - that.activeSectionName = dataViewName; - that.activeSection = 2; - let dataView = advancedTexture.getControlByName(dataViewName); - if (dataView) { - // // 在这里进行矩形的操作 - dataView.isVisible = false; - } - }); - // 创建一个数据展示层,创建一个StackPanel，用于容纳多个文本控件 - const data_view = new BABYLON_GUI.StackPanel(value + '_data_view'); - data_view.width = '200px'; // StackPanel的宽度 - data_view.height = '140px'; - data_view.thickness = 1; - data_view.background = 'rgba(0, 34, 51, 0.5)';//暗色 - let mgroupName = new BABYLON_GUI.TextBlock(value + '_label'); - mgroupName.height = "30px"; - mgroupName.width = "120px"; - mgroupName.color = "white"; - mgroupName.text = value; - mgroupName.shadowColor = '#66b1ff'; - mgroupName.shadowBlur = 5; - mgroupName.shadowOffsetX = -2; - mgroupName.shadowOffsetY = 2; - data_view.addControl(mgroupName); - const mgroup = new BABYLON_GUI.Rectangle('mgroup'); - mgroup.height = "3px"; - mgroup.width = "160px"; - mgroup.thickness = 0; - mgroup.background = 'rgba(44, 237, 255, 0.45)'; - data_view.addControl(mgroup); - var grid = new BABYLON_GUI.Grid("grid"); - grid.width = '200px'; - grid.height = '70px'; - grid.paddingLeft = 1; - var wd = 2; - var hd = 2; - for (let i = 0; i < wd; i++) { - grid.addRowDefinition(1 / wd); - } - for (let j = 0; j < hd; j++) { - grid.addColumnDefinition(1 / hd); - } - // for (let i = 0; i < wd; i++) { - // for (let j = 0; j < hd; j++) { - // var rc = new BABYLON_GUI.TextBlock("rc" + i + j); - // rc.width = "100%"; - // // rc.height = "100%"; - // rc.thickness = 0; - // if (j == 0 && i == 0) { - // rc.width = "120px"; - // rc.text = "产品产量："; - // rc.color = "white"; - // rc.fontSize = '16px'; - // } else if (j == 0 && i == 1) { - // rc.width = "120px"; - // rc.color = "white"; - // rc.fontSize = '16px'; - // rc.text = "单位产品电耗："; - // } else if (j == 1 && i == 0) { - // // rc.text = that.mgroupValues[value].total; - // rc.text = "123"; - // rc.width = "80px"; - // rc.fontSize = '18px'; - // rc.color = "rgb(44,237,255)"; - // } else if (j == 1 && i == 1) { - // // rc.text = that.mgroupValues[value].total; - // rc.text = "456"; - // rc.width = "80px"; - // rc.fontSize = '18px'; - // rc.color = "rgb(44,237,255)"; - // } - // grid.addControl(rc, i, j); - // } - // } - data_view.addControl(grid); - var mgroup_close = BABYLON_GUI.Button.CreateSimpleButton("mgroup_close" + value, '关闭'); - mgroup_close.width = "70px" - mgroup_close.height = "25px"; - mgroup_close.color = "white"; - mgroup_close.cornerRadius = 15; - mgroup_close.fontSize = '12px'; - mgroup_close.background = 'rgb(44,237,255,.5)'; - mgroup_close.HORIZONTAL_ALIGNMENT_RIGHT = 5; - mgroup_close.onPointerClickObservable.add(() => { - console.log('data_view', data_view) - data_view.isVisible = false; - }) - // data_view.addControl(mgroup_close); - // 将StackPanel添加到GUI系统中 - // advancedTexture.addControl(data_view); - data_view.linkWithMesh(mesh); - data_view.linkOffsetY = -120; - if (value == '电石渣') { - data_view.linkOffsetY = -290; - } - } - } - engine.hideLoadingUI() - }, - function (evt) { - var loadedPercent = 0; - if (evt.lengthComputable) { - loadedPercent = parseInt(evt.loaded * 100 / evt.total); - } else { - var dlCount = evt.loaded / (1024 * 1024); - loadedPercent = Math.floor(dlCount * 100.0) / 100.0; - } - that.loadedPercent = loadedPercent; - }) - // 自动旋转checkbox - // var checkbox = new BABYLON_GUI.Checkbox(); - // checkbox.width = "20px"; - // checkbox.height = "20px"; - // checkbox.isChecked = false; - // checkbox.marginLeft = '16px' - // checkbox.color = "green"; - // checkbox.onIsCheckedChangedObservable.add(function (value) { - // if (value) { - // camera.useAutoRotationBehavior = true; - // } else { - // camera.useAutoRotationBehavior = false; - // } - // }); - // control_main.addControl(checkbox); - // var header = new BABYLON_GUI.TextBlock(); - // header.text = "自动旋转"; - // header.width = "80px"; - // header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT; - // header.color = "white"; - // control_main.addControl(header); - // 工段数据checkbox - // var checkbox1 = new BABYLON_GUI.Checkbox(); - // checkbox1.width = "20px"; - // checkbox1.height = "20px"; - // checkbox1.isChecked = true; - // checkbox1.marginLeft = '16px' - // checkbox1.color = "green"; - // checkbox1.onIsCheckedChangedObservable.add(function (value) { - // if (value) { - // for (let key in that.sectionNames) { - // let name = that.sectionNames[key] + '_data_view'; - // console.log(name) - // let dataView = advancedTexture.getControlByName(name); - // dataView.isVisible = true; - // } - // } else { - // for (let key in that.sectionNames) { - // let name = that.sectionNames[key] + '_data_view'; - // console.log(name) - // let dataView = advancedTexture.getControlByName(name); - // dataView.isVisible = false; - // } - // } - // }); - // control_main.addControl(checkbox1); - // var header1 = new BABYLON_GUI.TextBlock(); - // header1.text = "工段数据"; - // header1.width = "80px"; - // header1.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT; - // header1.color = "white"; - // control_main.addControl(header1); - // 添加抓取事件 - canvas.addEventListener('mousemove', (event) => { - // 使用 scene.pick 检测鼠标拾取 - const pickResult = scene.pick(scene.pointerX, scene.pointerY); - if (that.currentLightMesh) { - mesh_rect.isVisible = false; - highlightLayer.removeAllMeshes(); - } - if (pickResult.hit) { - const mesh = pickResult.pickedMesh; - highlightLayer.removeAllMeshes(); - if (/.*[\u4e00-\u9fa5]+.*$/.test(mesh.name) && mesh.name !== '地面1' && mesh.name !== '绿地' && mesh.name !== '停车场') { - // 在选中的 mesh 上添加高亮效果 - highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5)); - that.currentLightMesh = mesh; - mesh_rect.linkWithMesh(mesh); - let name = mesh.name.split('_')[0]; - mesh_name.text = name; - mesh_rect.isVisible = true; - } - } - }); - // checkbox.isChecked = true; //默认开启自动旋转 - return scene; - }; - - const scene = createScene(); - // scene.debugLayer.show() - engine.runRenderLoop(function () { - scene.render(); - }); - this.engine = engine; - this.scene = scene; - window.addEventListener("resize", function () { - engine.resize(); - }); - }, }, unmounted() { - this.close(); document.documentElement.classList.remove("dark"); this.$TOOL.data.remove("APP_DARK") },