Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/Sinopec-Anxin

README.md

@@ -4,6 +4,32 @@
 
 ### 🌻 简介
 
+> 时间：2021、12、16 周四
+> 根据中化业务需求及建议，调整、优化
+
+### 🌻 详情
+
+> 前端部分
+
+- [🚩 重大变更] 无
+- [🌱 新增] 添加加油机、油罐根据名称排序的功能
+- [🍀 完善] 油罐 UI 列表取消“数量”字段
+- [🍀 完善] 消防设备列表中数目增加单位
+- [🍀 完善] 取消消防设备外其他设备的高亮效果，只有选中时才高亮，优化显示效果
+- [🍀 完善] 应急预案中，主角的 UI 用红色突出，可以设置的功能
+- [🍀 完善] 完善模板的应急预案（油箱口着火）中的细节与表现
+- [🍀 完善] 优化进攻路线箭头的表现，增加流动动画
+
+> 三维部分
+
+- [🚩 重大变更] 无
+- [🌱 新增]
+- [🍀 完善] 无
+
+## 🌼v1.0.4 主要变化 babylon 完全离线方案，部署测试
+
+### 🌻 简介
+
 > 时间：2021、12、10 周五
 > 修复 bug，babylon 离线方案（asset）测试
 

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;
     }

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;
     }
 
 

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()) {

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<Scene>; //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;

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);

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; //界面的阴影模糊
 

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();

src/app/babylon/view/mark-window/mark-window.ts

@@ -860,8 +860,6 @@ export class MarkWindow extends UIBase {
                             //取消选中
                             instance.selectMarkDataFrom3d(instance.currentMarkInfo, false);
                         }
-
-
                     }
                 }
                 break;

src/app/pages/plan/plan.component.html

@@ -257,6 +257,12 @@
             <textarea nz-input #description='ngModel' [(ngModel)]="taskDialog.description" name="description"></textarea>
           </nz-form-control>
         </nz-form-item>
+        <nz-form-item>
+          <nz-form-label [nzSpan]="6">主角</nz-form-label>
+          <nz-form-control [nzSpan]="18">
+            <label nz-checkbox [(ngModel)]="taskDialog.isMainCharacter" name="isMainCharacter"></label>
+          </nz-form-control>
+        </nz-form-item>
       </form>
     </nz-modal>
     <!-- 应急预案设备任务弹窗 -->

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