diff --git a/README.md b/README.md index 70a0cb9..b802da4 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,32 @@ ### 🌻 简介 +> 时间：2021、12、16 周四 +> 根据中化业务需求及建议，调整、优化 + +### 🌻 详情 + +> 前端部分 + +- [🚩 重大变更] 无 +- [🌱 新增] 添加加油机、油罐根据名称排序的功能 +- [🍀 完善] 油罐 UI 列表取消“数量”字段 +- [🍀 完善] 消防设备列表中数目增加单位 +- [🍀 完善] 取消消防设备外其他设备的高亮效果，只有选中时才高亮，优化显示效果 +- [🍀 完善] 应急预案中，主角的 UI 用红色突出，可以设置的功能 +- [🍀 完善] 完善模板的应急预案（油箱口着火）中的细节与表现 +- [🍀 完善] 优化进攻路线箭头的表现，增加流动动画 + +> 三维部分 + +- [🚩 重大变更] 无 +- [🌱 新增] +- [🍀 完善] 无 + +## 🌼v1.0.4 主要变化 babylon 完全离线方案，部署测试 + +### 🌻 简介 + > 时间：2021、12、10 周五 > 修复 bug，babylon 离线方案（asset）测试 diff --git a/src/app/babylon/controller/scene-manager.ts b/src/app/babylon/controller/scene-manager.ts index 68ca990..71d56a0 100644 --- a/src/app/babylon/controller/scene-manager.ts +++ b/src/app/babylon/controller/scene-manager.ts @@ -285,7 +285,7 @@ export class SceneManager { blurVerticalSize: 1.5, blurHorizontalSize: 1.5, }); - this.openInnerGlow(true); + this.openInnerGlow(false); // this.highLightLayer.innerGlow = true; this.highLightLayer.outerGlow = true; } diff --git a/src/app/babylon/model/data/mark/mark-property.ts b/src/app/babylon/model/data/mark/mark-property.ts index f36b9ce..f9d22eb 100644 --- a/src/app/babylon/model/data/mark/mark-property.ts +++ b/src/app/babylon/model/data/mark/mark-property.ts @@ -30,12 +30,18 @@ export class MarkProperty { */ description: string; + /** + * 主要角色 + */ + isMainCharacter: boolean = false; + constructor(taskType?: MarkTask, institution: string = "未命名", index: number = 1, task: string = "待命", description?: string) { this.taskType = taskType this.institution = institution this.index = index this.task = task - this.description = description + this.description = description; + this.isMainCharacter = false; } diff --git a/src/app/babylon/model/info/mark/model-info-mark.ts b/src/app/babylon/model/info/mark/model-info-mark.ts index cc06525..57d85ed 100644 --- a/src/app/babylon/model/info/mark/model-info-mark.ts +++ b/src/app/babylon/model/info/mark/model-info-mark.ts @@ -262,18 +262,13 @@ export class ModelInfo_mark extends ModelInfo { if (this.markData.property.taskType != MarkTask.None) { this.uiNumber.text = this.markData.property.getInstitutionNum(); this.uiTask.text = this.markData.property.task; - this.uiNumber - let instance = this; - // setTimeout(() => { - // if (instance.uiNumber == null) { - // return; - // } - // let numWidth = instance.uiNumber.widthInPixels; - // let taskWidth = instance.uiTask.widthInPixels; - // let maxWidth = Math.max(numWidth, taskWidth, this.c_uiDefaultWidth); - // instance.uiFollowHead.widthInPixels = maxWidth; - // // instance.uiFollowHeadBg.widthInPixels = maxWidth; - // }, (100)); + if (this.markData.property.isMainCharacter) { + this.uiFollowHeadBg.background = BabylonUIStyleTool.c_color_3d_redBg; + } + else { + this.uiFollowHeadBg.background = BabylonUIStyleTool.c_color_3d_blueBg; + } + // console.log("喷水", this.taskNeedWaterParticle()); if (this.taskNeedWaterParticle()) { diff --git a/src/app/babylon/model/info/mark/other/mark-plan-multi-arrow.ts b/src/app/babylon/model/info/mark/other/mark-plan-multi-arrow.ts index af1881b..4402d2e 100644 --- a/src/app/babylon/model/info/mark/other/mark-plan-multi-arrow.ts +++ b/src/app/babylon/model/info/mark/other/mark-plan-multi-arrow.ts @@ -1,4 +1,4 @@ -import { Color3, MeshBuilder, Quaternion, Space, Vector3 } from "@babylonjs/core"; +import { Color3, MeshBuilder, Quaternion, Scene, Space, Vector3 } from "@babylonjs/core"; import { PointerEventTypes, PointerInfo } from "@babylonjs/core/Events/pointerEvents"; import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial"; import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh"; @@ -27,6 +27,9 @@ export class ModelInfo_mark_multiArrow extends ModelInfo_mark { arrowInfo: ArrowInfo[] = []; mat: StandardMaterial; + mat_Light: StandardMaterial; + + updateObserver: Observer; //update的观察者 onCreate(isNew: boolean) { @@ -57,7 +60,8 @@ export class ModelInfo_mark_multiArrow extends ModelInfo_mark { this.mat.disableLighting = false; - + this.mat_Light = this.mat.clone(this.mat.name + "_light"); + this.mat_Light.diffuseColor = Color3.FromHexString("#0000FF"); if (isNew) { instance.arrowData.pointData = []; @@ -76,6 +80,21 @@ export class ModelInfo_mark_multiArrow extends ModelInfo_mark { instance.updateRender(); } + this.updateObserver = SceneManager.Instance.scene.onBeforeRenderObservable.add((eventData: Scene, eventState: EventState) => { + instance.onUpdate(instance, eventData, eventState); + }); + + } + + + + /** + * 每帧调用 + * @param eventData + * @param eventState + */ + onUpdate(instance: ModelInfo_mark_multiArrow, eventData: Scene, eventState: EventState) { + instance.updateAnim(); } /** @@ -139,6 +158,8 @@ export class ModelInfo_mark_multiArrow extends ModelInfo_mark { SceneManager.Instance.scene.onPointerObservable.remove(this.onPointObserver); this.onPointObserver = null; } + + } /** @@ -233,12 +254,80 @@ export class ModelInfo_mark_multiArrow extends ModelInfo_mark { if (this.mat != null) { this.mat.dispose(); } - + if (this.updateObserver != null) { + SceneManager.Instance.scene.onBeforeRenderObservable.remove(this.updateObserver); + this.updateObserver = null; + } this.removeEvent(); super.dispose(); } + //#region 箭头动画 + + animIndex = -1; + + readonly c_animTimer = 10; + + animTimer = 0; + /** + * 更新动画 + */ + updateAnim() { + + if (this.animTimer > 0) { + this.animTimer -= SceneManager.Instance.scene.deltaTime; + return; + } + else { + this.animTimer = this.c_animTimer; + // if (arrowNum > this.animIndex) { + // this.animIndex++; + + // } + // else { + // this.animIndex = -1; + // } + this.animIndex = this.showArrow(this.animIndex); + } + + } + + /** + * 展示哪个小箭头隐藏 + * @param animIndex + * 返回值：找到了为所在的index +1，没找到为-1 + */ + showArrow(animIndex: number) { + if (this.arrowInfo == null) { + return -1; + } + let index = -1; + let result = -1; + for (let i = 0; i < this.arrowInfo.length; i++) { + let arrowInfo = this.arrowInfo[i].mesh; + + if (arrowInfo != null) { + for (let j = 0; j < arrowInfo.length; j++) { + index++; + // arrowInfo[j].setEnabled(index != animIndex); + if (index == animIndex) { + arrowInfo[j].material = this.mat_Light; + result = index; + } + else { + arrowInfo[j].material = this.mat; + } + } + + } + } + return result + 1; + } + + //#endregion + + } /** @@ -264,6 +353,8 @@ class ArrowInfo { endlocalY: number; //局部的Y做坐标，末尾 mat: StandardMaterial; + + constructor(start: Vector3, end: Vector3, mat: StandardMaterial, parent: Mesh) { this.start = start; this.end = end; diff --git a/src/app/babylon/tool/babylon-tool.ts b/src/app/babylon/tool/babylon-tool.ts index f5b43c5..7aee30a 100644 --- a/src/app/babylon/tool/babylon-tool.ts +++ b/src/app/babylon/tool/babylon-tool.ts @@ -51,7 +51,7 @@ export class BabylonTool { static getWorldPosition(mesh: AbstractMesh): Vector3 { let result = mesh.position; if (mesh.parent != null) { - result = mesh.absolutePosition; + result = mesh.getAbsolutePosition(); } return result.clone(); } @@ -352,6 +352,9 @@ export class BabylonTool { camera.alpha = BabylonTool.limitPI(camera.alpha); camera.beta = BabylonTool.limitPI(camera.beta); + alpha = BabylonTool.limitPI(alpha); + beta = BabylonTool.limitPI(beta); + //缓动动画 let easingFunction = new QuadraticEase(); easingFunction.setEasingMode(EasingFunction.EASINGMODE_EASEOUT); diff --git a/src/app/babylon/tool/babylon-ui-style-tool.ts b/src/app/babylon/tool/babylon-ui-style-tool.ts index 16e4f41..3c0a2d8 100644 --- a/src/app/babylon/tool/babylon-ui-style-tool.ts +++ b/src/app/babylon/tool/babylon-ui-style-tool.ts @@ -24,6 +24,8 @@ export class BabylonUIStyleTool { static c_color_3d_blue: string = "#47E0FF";//蓝， 框体 static c_color_3d_blueBg: string = "#122F49";//蓝黑，背景 + static c_color_3d_redBg: string = "#990000";//红黑，背景 + static c_shadow_blur_button = 2;//按钮的阴影模糊 static c_shadow_blur_window = 20; //界面的阴影模糊 diff --git a/src/app/babylon/view/facilityinfoinscene-window/facilityinfoinscene-window.ts b/src/app/babylon/view/facilityinfoinscene-window/facilityinfoinscene-window.ts index 711a3e5..9f5a6d8 100644 --- a/src/app/babylon/view/facilityinfoinscene-window/facilityinfoinscene-window.ts +++ b/src/app/babylon/view/facilityinfoinscene-window/facilityinfoinscene-window.ts @@ -20,7 +20,6 @@ import { GizmoTool } from "../../tool/gizmo-tool"; import { TsTool } from "../../tool/ts-tool"; import { BuildingWindow } from "../building-window/building-window"; -import { FacilityWindow } from "../facility-window/facility-window"; import { UIBase } from "../window-base/ui-base"; import { FacilityInfoUIItem } from "./facilityinfo-ui-item"; @@ -464,12 +463,14 @@ export class FacilityInfoInSceneWindow extends UIBase { if (eventData.pickInfo.hit && !SceneManager.s_isPointerDrag) { instance.doubleClickModle(eventData.pickInfo); + } break; } } + /** * 选中加油机时，高亮颜色 */ @@ -778,8 +779,6 @@ export class FacilityInfoInSceneWindow extends UIBase { } - console.log("双击", result); - if (result != null) { let facilityItem: FacilityInfoUIItem = FacilityInfoInSceneWindow.instance.getFacilityItem(result); facilityItem.lookAt(); diff --git a/src/app/babylon/view/mark-window/mark-window.ts b/src/app/babylon/view/mark-window/mark-window.ts index 274640a..2e0f947 100644 --- a/src/app/babylon/view/mark-window/mark-window.ts +++ b/src/app/babylon/view/mark-window/mark-window.ts @@ -860,8 +860,6 @@ export class MarkWindow extends UIBase { //取消选中 instance.selectMarkDataFrom3d(instance.currentMarkInfo, false); } - - } } break; diff --git a/src/app/pages/plan/plan.component.html b/src/app/pages/plan/plan.component.html index 2a060fa..7bfc1d1 100644 --- a/src/app/pages/plan/plan.component.html +++ b/src/app/pages/plan/plan.component.html @@ -257,6 +257,12 @@ + + 主角 + + + + diff --git a/src/app/pages/plan/plan.component.ts b/src/app/pages/plan/plan.component.ts index 649fa7b..0434fb4 100644 --- a/src/app/pages/plan/plan.component.ts +++ b/src/app/pages/plan/plan.component.ts @@ -681,7 +681,7 @@ export class PlanComponent implements OnInit { } contingencyPlanTask: MarkData = null; //应急预案选中 设备 - taskDialog: taskDialog = new taskDialog("", "", ""); //设备任务 深拷贝数据 + taskDialog: taskDialog = new taskDialog("", "", "", false); //设备任务 深拷贝数据 allTaskList: any[] = []; //所有任务 List //选中应急预案 设备 @@ -696,6 +696,7 @@ export class PlanComponent implements OnInit { this.taskDialog.institution = JSON.parse(JSON.stringify(markData.property.institution || "")) this.taskDialog.description = JSON.parse(JSON.stringify(markData.property.description || "")) this.taskDialog.task = JSON.parse(JSON.stringify(markData.property.task || "")) + this.taskDialog.isMainCharacter = JSON.parse(JSON.stringify(markData.property.isMainCharacter || false)) if (markData.property.taskType === MarkTask.Person) { this.allTaskList = (new taskList()).character } else if (markData.property.taskType === MarkTask.Car) { @@ -711,6 +712,7 @@ export class PlanComponent implements OnInit { this.contingencyPlanTask.property.institution = e.companyName this.contingencyPlanTask.property.description = e.description this.contingencyPlanTask.property.task = e.taskName + this.contingencyPlanTask.property.isMainCharacter = e.isMainCharacter MarkWindow.instance.updateProperty() this.contingencyPlanTask = null //关闭弹窗 } @@ -876,10 +878,12 @@ export class taskDialog { institution: string; //单位 task: string; //任务 description: string; //备注 - constructor(institution: string, task: string, description: string) { + isMainCharacter: boolean; //主要角色 + constructor(institution: string, task: string, description: string, isMainCharacter: boolean) { this.institution = institution this.task = task this.description = description + this.isMainCharacter = isMainCharacter } } //设备任务list