-
项目
+
+
监测设备名称
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")
},
