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

README.md

@@ -1,6 +1,27 @@
 # 中国石化加油站项目
 
-## 🌼v1.0.4 主要变化 babylon 完全离线方案，部署测试
+## 🌼v1.0.6
+
+### 🌻 简介
+
+> 时间：2021、12、25 周六
+> 根据中化业务需求及建议，调整、优化
+
+### 🌻 详情
+
+> 前端部分
+
+- [🚩 重大变更]
+- [🌱 新增]
+- [🍀 完善]
+
+> 三维部分
+
+- [🚩 重大变更] 无
+- [🌱 新增] 右键取消测量点
+- [🍀 完善] 新增从模型中重新获取设备、更新的功能
+
+## 🌼v1.0.5 主要变化 babylon 完全离线方案，部署测试
 
 ### 🌻 简介
 

src/app/babylon/controller/config-manager.ts

@@ -179,6 +179,7 @@ export class ConfigManager {
         [MarkType.PTMHQ, "二氧化碳灭火器"],
         [MarkType.GFMHQ, "干粉灭火器"],
         [MarkType.TCMHQ, "推车灭火器"],
+        [MarkType.MHTK, "灭火毯（开）"],
         [MarkType.ZYMBRQ, "专用密闭容器"],
         [MarkType.JJX, "警戒线"],
         [MarkType.JGLX, "进攻路线"],

src/app/babylon/controller/info-manager.ts

@@ -178,6 +178,7 @@ export class InfoManager {
         }
 
 
+
         FacilityWindow.instance.createFacility(
           modelEditData.facilities[i].facilities[j],
           false,

src/app/babylon/controller/serve-manager.ts

@@ -5,7 +5,7 @@ import { BuildingBasicInfosService } from "src/app/service/babylon/building-basi
 import { ObjectsService } from "src/app/service/objects.service";
 import { ExportData } from "../model/data/institution/building/export-data";
 import { InsitutionDataSimple } from "../model/data/institution/institution-data-simple";
-import { AllMarkPlanData } from "../model/data/mark/mark-plan-data";
+import { AllMarkPlanData, MarkPlanData } from "../model/data/mark/mark-plan-data";
 import { DataManager } from "./data-manager";
 import { ModeManager, ModeType } from "./mode-manager";
 
@@ -159,6 +159,64 @@ export class ServeManager {
 
     //#endregion
 
+    //#region 态势标会模板
+
+    /**
+     * 获取所有模板
+     * @param onSuccess 
+     */
+    getAllMarkTemplate(onSuccess?: (data: string) => void) {
+        this.buildingBISrv.getAllSandBoxTemplate()
+            .subscribe(data => {
+                console.log("得到所有模板", data);
+                if (onSuccess) {
+                    onSuccess(JSON.parse((data as any).items));
+                }
+            }, error => {
+                console.error("From serve:AllMarkTemplate", error);
+                if (onSuccess) {
+                    onSuccess(null);
+                }
+            })
+    }
+
+    /**
+     * 获取单个模板
+     */
+    getOneMarkTemplate(id: number, onSuccess?: (data: string) => void) {
+        this.buildingBISrv.getSandBoxTemplate(id).
+            subscribe(data => {
+                console.log("得到单个模板" + id, data);
+                if (onSuccess) {
+                    // onSuccess( JSON.parse((data as any).result));
+                }
+            }, error => {
+                console.error("From serve:OneMarkTemplate", error);
+            })
+    }
+
+    /**
+     * 保存为模板
+     * @param id 
+     * @param name 
+     * @param data 
+     * @param onSuccess 
+     */
+    saveOneMarkTemplate(id: number, name: string, data: MarkPlanData, onSuccess?: (data: string) => void) {
+        this.buildingBISrv.postSandBoxTemplate(name, id, data).
+            subscribe(data => {
+                console.log("保存单个模板" + id, data);
+                if (onSuccess) {
+                    // onSuccess( JSON.parse((data as any).result));
+                }
+            }, error => {
+                console.error("From serve:OneMarkTemplate", error);
+            })
+
+    }
+
+
+    //#endregion
 
     //#region 导出excel的信息
 

src/app/babylon/model/data/institution/building/export-data.ts

@@ -36,7 +36,10 @@ export class ExportData {
             }
             let type = facilityByTypes[i].facilityType;
             if (TsTool.stringContain(type, "XF_")) {
-                this.消防设备.push(new ExportData_XFSB(facilityByTypes[i]));
+                if (facilityByTypes[i].facilities.length > 0) {
+                    this.消防设备.push(new ExportData_XFSB(facilityByTypes[i]));
+                }
+
             }
 
             for (let j = 0; j < facilities.length; j++) {

src/app/babylon/model/data/mark/all-mark-data.ts

@@ -77,6 +77,7 @@ export class AllMarkData {
         AllMarkData.newMarkData(MarkType.PTMHQ, MarkKindType.Goods, tagPos, result);
         AllMarkData.newMarkData(MarkType.GFMHQ, MarkKindType.Goods, tagPos, result);
         AllMarkData.newMarkData(MarkType.TCMHQ, MarkKindType.Goods, tagPos, result);
+        AllMarkData.newMarkData(MarkType.MHTK, MarkKindType.Goods, tagPos, result);
 
         //其他
         tagPos = MarkTagPos.Other;

src/app/babylon/model/data/mark/mark-data.ts

@@ -300,6 +300,11 @@ export enum MarkType {
      */
     TCMHQ = "TCMHQ",
 
+    /**
+     * 灭火毯（开）
+     */
+    MHTK = "MHTK",
+
 
     //===================其他===================
 

src/app/babylon/model/data/mark/mark-template-data.ts

@@ -0,0 +1,12 @@
+import { Type } from "class-transformer";
+import { MarkPlanData } from "./mark-plan-data";
+
+/**
+ * 预案模板
+ */
+export class MarkTemplate {
+    id: number;
+    name: string;
+    @Type(() => MarkPlanData)
+    value: MarkPlanData;
+}

src/app/babylon/model/info/mark/model-info-mark.ts

@@ -221,7 +221,8 @@ export class ModelInfo_mark extends ModelInfo {
             //特效类、灭火器类、文字标注，要出现坐标轴
             if (this.markData.markKindType == MarkKindType.Effect
                 || TsTool.stringContain(this.markData.type, "MHQ")
-                || this.markData.type == MarkType.WZ) {
+                || this.markData.type == MarkType.WZ
+                || this.markData.type == MarkType.MHTK) {
                 GizmoTool.onPickMeshInfoObservable.notifyObservers(this);
             }
             else {
@@ -235,7 +236,9 @@ export class ModelInfo_mark extends ModelInfo {
         else {
             //GizmoTool.onPickMeshInfoObservable.notifyObservers(null);
             SceneManager.Instance.removeFromHighLight(this.modelBox as Mesh)
+
             if (this.pointerDragBehavior != null) {
+                this.pointerDragBehavior.releaseDrag(); //防止卡主
                 this.pointerDragBehavior.enabled = false; //停止拖拽
             }
         }

src/app/babylon/model/info/model/model-info-building.ts

@@ -189,6 +189,7 @@ export class ModelInfo_building extends ModelInfo {
         infos = [];
     }
 
+
     //释放所有设备
     disposeAllFacility() {
         ModeManager.log('释放室内设备' + this.facilityInfos.length);

src/app/babylon/tool/measure-tool.ts

@@ -16,6 +16,11 @@ export class MeasureTool {
      */
     currentMeasureInfo: MeasureInfo;
 
+    /**
+     * 所有测量数据
+     */
+    allMeasureInfo: MeasureInfo[] = [];
+
     /**
      * 当前所处的测量状态
      */
@@ -50,6 +55,9 @@ export class MeasureTool {
      * 中断测量
      */
     breakMeasure() {
+        if (this.currentMeasureInfo != null) {
+            this.allMeasureInfo.push(this.currentMeasureInfo);
+        }
         this.currentMeasureInfo = null;
     }
 
@@ -94,6 +102,7 @@ export class MeasureTool {
                 else if (eventData.event.button == 2) //右键，中断
                 {
                     instance.breakMeasure();
+                    instance.clearMeasure();//2021/12/24需求： 右键清除测量点
 
                 }
 
@@ -101,6 +110,17 @@ export class MeasureTool {
         }
     }
 
+    /**
+     * 清除测量内容
+     */
+    clearMeasure() {
+
+        for (let i = 0; i < this.allMeasureInfo.length; i++) {
+            this.allMeasureInfo[i].dispose();
+        }
+        this.allMeasureInfo = [];
+    }
+
     /**
  * 添加测量点
  */

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

@@ -15,7 +15,7 @@ import { ArcRotateCameraData } from "../../model/data/camera-data";
 import { BuildingData, BuildingData_ChemicalPlant, BuildingData_Environment, BuildingData_Normal, BuildingType } from "../../model/data/institution/building/building-data";
 import { JYZInfoMoudleType, JYZShowData } from "../../model/data/institution/jyz-show-data";
 import { ModelType } from "../../model/data/model-data/model-data";
-import { FacilityPosType, FacilityType } from "../../model/data/model-data/model-data-facility";
+import { FacilityPosType, FacilityType, ModelData_facility } from "../../model/data/model-data/model-data-facility";
 import { ModelEditData } from "../../model/data/model-data/model-edit-data";
 import { BuildingInfo } from "../../model/info/building/building-info";
 import { BuildingInfo_ChemicalPlant } from "../../model/info/building/building-info-chemicalplant";
@@ -688,7 +688,30 @@ export class BuildingWindow extends UIBase {
     public clearHomeLessFacilityData() {
         if (this.currentBuidngItem != null) {
 
-            this.currentBuidngItem.clearFacilityFromMesh();
+            let allFacilities = this.currentBuidngItem.buildingInfo.buildingData.outdoorData.facilities;
+            let needClear: ModelData_facility[] = [];
+            for (let i = 0; i < allFacilities.length; i++) {
+
+                let facilityByType = allFacilities[i];
+                for (let j = 0; j < facilityByType.facilities.length; j++) {
+                    let info = FacilityInfoInSceneWindow.instance.getFacilityInfo(facilityByType.facilities[j]);
+                    if (info == null
+                        || TsTool.stringContain(info._modelBox.id, "(Box)")) {
+                        needClear.push(facilityByType.facilities[j]);
+                    }
+                }
+
+            }
+
+
+            for (let k = 0; k < needClear.length; k++) {
+                for (let i = 0; i < allFacilities.length; i++) {
+                    let facilityByType = allFacilities[i];
+                    TsTool.arrayRemove(facilityByType.facilities, needClear[k]);
+
+                }
+            }
+
         }
     }
 
@@ -708,7 +731,7 @@ export class BuildingWindow extends UIBase {
      */
     public getModelAndCreateFacilityData() {
 
-        //this.clearHomeLessFacilityData();
+        this.clearHomeLessFacilityData();
 
         if (this.currentBuidngItem != null) {
             //获取所有transformNodes

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

@@ -442,13 +442,14 @@ export class FacilityWindow extends UIBase {
         let defaultMesh: AbstractMesh = null;
 
         if (mesh == null) {
-            defaultMesh = MeshBuilder.CreateBox(facilityData.key, { size: 1 });
+            defaultMesh = MeshBuilder.CreateBox(facilityData.key + "(Box)", { size: 1 });
             defaultMesh.isVisible = false;
         }
         else {
             defaultMesh = mesh;
         }
 
+
         let facilityInfo = InfoManager.newModelInfo_facility(
             facilityData.key,
             facilityData,

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

@@ -687,6 +687,22 @@ export class FacilityInfoInSceneWindow extends UIBase {
 
     }
 
+    /**
+     * 是否有data对应的设备info
+     * @param facilityData 
+     */
+    getFacilityInfo(facilityData: ModelData_facility) {
+        let result: ModelInfo_facility = null;
+        for (let i = 0; i < this.facilityInfoUIItemes.length; i++) {
+            if (this.facilityInfoUIItemes[i].modelInfo.modelData == facilityData) {
+                result = this.facilityInfoUIItemes[i].modelInfo;
+                break;
+            }
+        }
+        return result;
+
+    }
+
     //根据info找到相应的item，然后模拟选中
     selectFacilityInfo(facilityInfo: ModelInfo_facility) {
 

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

@@ -11,6 +11,7 @@ import { Event_MarkInfoChange, MarkInfoChangeType } from "../../controller/event
 import { InputController } from "../../controller/inputController";
 import { ModeManager, ModeType } from "../../controller/mode-manager";
 import { SceneManager } from "../../controller/scene-manager";
+import { ServeManager } from "../../controller/serve-manager";
 import { BuildingStatus } from "../../controller/status/building-status";
 import { IndoorStatus } from "../../controller/status/indoor-status";
 import { StatusManager } from "../../controller/status/status-manager";
@@ -18,6 +19,7 @@ import { UIManager } from "../../controller/ui-manager";
 import { ArcRotateCameraData } from "../../model/data/camera-data";
 import { MarkData, MarkKindType, MarkTagPos, MarkType } from "../../model/data/mark/mark-data";
 import { AllMarkPlanData, MarkNodeData, MarkPlanData, WeatherType, WindDirectionType, EnvironmentData, NatureData } from "../../model/data/mark/mark-plan-data";
+import { MarkTemplate } from "../../model/data/mark/mark-template-data";
 import { ModelType } from "../../model/data/model-data/model-data";
 import { FacilityType } from "../../model/data/model-data/model-data-facility";
 import { BuildingInfo } from "../../model/info/building/building-info";
@@ -177,6 +179,7 @@ export class MarkWindow extends UIBase {
     onShow() {
         super.onShow();
         let instance = this;
+        instance.getAllSandBoxTemplate();//获取模板
         if (this.allMarkPlanData == null) {
             DataManager.initMarkData((data: AllMarkPlanData) => {
                 instance.onGetAllMarkPlanData(data);
@@ -888,7 +891,8 @@ export class MarkWindow extends UIBase {
             //是标绘物
             let l_markInfo = instance.getMarkInfoFromMesh(eventData.pickInfo.pickedMesh);
             if (l_markInfo != null) {
-                if (instance.currentMarkDataPrefab != null && instance.currentMarkDataPrefab.markKindType != MarkKindType.Effect) //特效可以放在标绘物上
+                if (instance.currentMarkDataPrefab != null && instance.currentMarkDataPrefab.markKindType != MarkKindType.Effect
+                    && instance.currentMarkDataPrefab.type != MarkType.MHTK) //特效可以放在标绘物上
                 {
                     readyCreateMark = false;
                 }
@@ -1328,11 +1332,11 @@ export class MarkWindow extends UIBase {
             let markData = environmentData.markDatas[i];
 
 
-            if (markData.belongtoBuildingId == key) {
-                this.createMark(0, markData, false, null, buildingInfo, true, null, (modelInfo: ModelInfo_mark) => {
-                    modelInfo.showFollowUI(instance.isShowProperty3d);
-                });
-            }
+            //if (markData.belongtoBuildingId == key) {
+            this.createMark(0, markData, false, null, buildingInfo, true, null, (modelInfo: ModelInfo_mark) => {
+                modelInfo.showFollowUI(instance.isShowProperty3d);
+            });
+            //}
         }
 
         this.shouWaterSource(this.isShowWaterSource);
@@ -1580,5 +1584,60 @@ export class MarkWindow extends UIBase {
     //#endregion
 
 
+    //#region 应急模板
+
+    /**
+     * 所有应急模板
+     */
+    allSandBoxTemplate: MarkTemplate[];
+
+    /**
+     * 获取所有沙盒模板
+     */
+    getAllSandBoxTemplate() {
+        let instance = this;
+        this.allSandBoxTemplate = [];
+        ServeManager.instance.getAllMarkTemplate((data: string) => {
+            if (data == null) {
+                instance.allSandBoxTemplate = [];
+            }
+            else {
+
+            }
+        });
+    }
+
+    /**
+     * 获取一个模板的详细内容
+     * @param id 
+     */
+    getOneSandBoxTemplate(id: number) {
+        let instance = this;
+        ServeManager.instance.getOneMarkTemplate(id, (data: string) => {
+
+        })
+
+    }
+
+    /**
+     * 保存为模板
+     * @param id 
+     * @param name 
+     * @param data 
+     */
+    saveToSandBoxTemplate(data: MarkPlanData) {
+        let name: string = data.name;
+        let id: number = new Date().getTime();
+        let instance = this;
+        ServeManager.instance.saveOneMarkTemplate(id, name, data, (data: string) => {
+
+        });
+
+    }
+
+
+
+    //#endregion
+
 }
 

src/app/pages/left-domain/left-domain.component.html

@@ -70,11 +70,11 @@
             <p>油枪编号</p>
             <p>油泵类型</p>
           </div>
-          <div class="tableContent">
-            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().brand" (click)="stopBubbling($event)"></p>
-            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNum" (click)="stopBubbling($event)"></p>
-            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilProductNo" (click)="stopBubbling($event)"></p>
-            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNo" (click)="stopBubbling($event)"></p>
+          <div class="tableContent"> 
+            <p [title]="item.getPropertyData().brand"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().brand" (click)="stopBubbling($event)"></p>
+            <p [title]="item.getPropertyData().oilGunNum"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNum" (click)="stopBubbling($event)"></p>
+            <p [title]="item.getPropertyData().oilProductNo"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilProductNo" (click)="stopBubbling($event)"></p>
+            <p [title]="item.getPropertyData().oilGunNo"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNo" (click)="stopBubbling($event)"></p>
             <p style="padding-left: 8px;" (click)="stopBubbling($event)">
               <nz-select class="tableSelect" [nzBorderless]="true" [nzDisabled]="!editMode" [(ngModel)]="item.getPropertyData().oilPumpType">
                 <nz-option nzValue="zxb" nzLabel="自吸泵"></nz-option>
@@ -100,11 +100,11 @@
             <p>油罐类型</p>
           </div>
           <div class="tableContent">
-            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilProductNo" (click)="stopBubbling($event)"></p>
-            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNo" (click)="stopBubbling($event)"></p>
-            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilTankVolume" (click)="stopBubbling($event)"></p>
-            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().safeVolume" (click)="stopBubbling($event)"></p>
-            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().tankFarm" (click)="stopBubbling($event)"></p>
+            <p [title]="item.getPropertyData().oilProductNo"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilProductNo" (click)="stopBubbling($event)"></p>
+            <p [title]="item.getPropertyData().oilGunNo"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNo" (click)="stopBubbling($event)"></p>
+            <p [title]="item.getPropertyData().oilTankVolume"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilTankVolume" (click)="stopBubbling($event)"></p>
+            <p [title]="item.getPropertyData().safeVolume"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().safeVolume" (click)="stopBubbling($event)"></p>
+            <p [title]="item.getPropertyData().tankFarm"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().tankFarm" (click)="stopBubbling($event)"></p>
             <p style="padding-left: 8px;" (click)="stopBubbling($event)">
               <nz-select class="tableSelect" [nzBorderless]="true" [nzDisabled]="!editMode" [(ngModel)]="item.getPropertyData().oilTankType">
                 <nz-option nzValue="scg" nzLabel="双层罐"></nz-option>
@@ -134,8 +134,8 @@
             <p>连接的油罐</p>
           </div>
           <div class="tableContent" style="flex: 50%;">
-            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().linkJYJ" (click)="stopBubbling($event)"></p>
-            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().linkYG" (click)="stopBubbling($event)"></p>
+            <p [title]="item.getPropertyData().linkJYJ"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().linkJYJ" (click)="stopBubbling($event)"></p>
+            <p [title]="item.getPropertyData().linkYG"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().linkYG" (click)="stopBubbling($event)"></p>
           </div>
         </div>
         <div class="propertyImage" id="pipelineViewer{{item.getID()}}">
@@ -166,7 +166,7 @@
                 <nz-option nzValue="jzs" nzLabel="集中式"></nz-option>
               </nz-select>
             </p>
-            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().VRUPumpType" (click)="stopBubbling($event)"></p>
+            <p [title]="item.getPropertyData().VRUPumpType"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().VRUPumpType" (click)="stopBubbling($event)"></p>
           </div>
         </div>
         <div class="propertyImage" id="orvrViewer{{item.getID()}}">
@@ -182,23 +182,27 @@
     </div>
     <!-- 油气回收 -->
     <!-- 处置预案 -->
-    <div class="publicBox disposalPlan" *ngIf="beforeFence === 7 && allMarkPlanData">
-      <div class="interval" *ngFor="let item of allMarkPlanData.datas;let key = index;">
-        <div class="publicDisposal disposalHeader">
-          {{item.name}}
-          <label *ngIf="editMode">
-            <i nz-icon nzType="plus-circle" nzTheme="outline" (click)="addNodePop = item.id;"></i>
-            <i nz-icon nzType="edit" nzTheme="outline" (click)="openEditDisposal(item)"></i>
-            <i nz-icon nzType="delete" nzTheme="outline" (click)="deleteDisposal(item)"></i>
-          </label>
-        </div>
-        <ul>
-          <li class="publicDisposal disposalContent" *ngFor="let items of item.nodes;let keys = index;">
-            <span nz-popconfirm nzPopconfirmTitle="切换节点后,没保存的信息将会丢失!" [nzCondition]="!editMode" (nzOnConfirm)="selectNode(item,items,keys)" [ngClass]="{'selectNode': selectNodeId == items.id && selectPlanId == item.id}">{{items.name}}</span>
-            <label *ngIf="editMode"><i nz-icon nzType="save" nzTheme="outline" (click)="saveDisposal(item.id,items.id)"></i><i nz-icon nzType="delete" nzTheme="outline" (click)="deleteDisposal(item,items)"></i></label>
-          </li>
-        </ul>
-      </div>
+    <div class="publicBox disposalPlan" *ngIf="beforeFence === 7 && allMarkPlanData" id="disposalPlan">
+      <nz-collapse>
+        <nz-collapse-panel *ngFor="let item of allMarkPlanData.datas;let key = index;" [nzHeader]="extraTpl" nzActive="true" nzShowArrow="false">
+          <ng-template #extraTpl>
+            <div class="publicDisposal disposalHeader">
+              <span>{{item.name}}</span>
+              <label *ngIf="editMode">
+                <i nz-icon nzType="plus-circle" nzTheme="outline" (click)="openAddDisposal($event,item.id)"></i>
+                <i nz-icon nzType="edit" nzTheme="outline" (click)="openEditDisposal($event,item)"></i>
+                <i nz-icon nzType="delete" nzTheme="outline" (click)="deleteDisposal($event,item)"></i>
+              </label>
+            </div>
+          </ng-template>
+          <ul>
+            <li class="publicDisposal disposalContent" *ngFor="let items of item.nodes;let keys = index;">
+              <span nz-popconfirm nzPopconfirmTitle="切换节点后,没保存的信息将会丢失!" [nzCondition]="!editMode" (nzOnConfirm)="selectNode(item,items,keys)" [ngClass]="{'selectNode': selectNodeId == items.id && selectPlanId == item.id}">{{items.name}}</span>
+              <label *ngIf="editMode"><i nz-icon nzType="save" nzTheme="outline" (click)="saveDisposal(item.id,items.id)"></i><i nz-icon nzType="delete" nzTheme="outline" (click)="deleteDisposal($event,item,items)"></i></label>
+            </li>
+          </ul>
+        </nz-collapse-panel>
+      </nz-collapse>
     </div>
     <!-- 处置预案 -->
     <!-- 弹窗 -->
@@ -215,7 +219,7 @@
         </nz-form-item>
       </form>
     </nz-modal>
-    <nz-modal [(nzVisible)]="editSelectDisposal" nzTitle="编辑预案名称" (nzOnCancel)="editSelectDisposal = null;" (nzOnOk)="editDisposal(editForm.value)" [nzOkDisabled]='name.invalid'>
+    <nz-modal [(nzVisible)]="editSelectDisposal" nzTitle="编辑预案名称" [nzOkDisabled]='name.invalid'>
       <form nz-form #editForm='ngForm'>
         <nz-form-item>
           <nz-form-label [nzSpan]="6">预案名称</nz-form-label>
@@ -224,6 +228,11 @@
           </nz-form-control>
         </nz-form-item>
       </form>
+      <div *nzModalFooter>
+        <button nz-button nzType="primary" (click)="saveMould()">保存为模板</button>
+        <button nz-button nzType="default" (click)="editSelectDisposal = null;">取消</button>
+        <button nz-button nzType="primary" (click)="editDisposal(editForm.value)">确定</button>
+      </div>
     </nz-modal>
     <nz-modal [(nzVisible)]="saveDisposalDialog" nzTitle="处置节点保存" (nzOnCancel)="saveDisposalDialog = false;" [nzFooter]="null">
       <div class="submitBottom">

src/app/pages/left-domain/left-domain.component.scss

@@ -87,23 +87,18 @@
   .treeRow{ width: 100%; display: flex; height: 30px; line-height: 30px; p:first-child{ flex: 1; }; p{ margin: 0; padding: 0; .anticon{ margin-right: 5px; font-size: 16px; } } }
 }
 .disposalPlan{ //处置预案
-  .interval{ margin-top: 10px; } //分隔div
-  font-size: 15px;
   ul,li { width: 100%; }
-  li:before{ content: ""; width: 5px; height: 5px; border-radius: 50%; display: inline-block; vertical-align: 3px; background: #23D9FF; margin-right: 10px; }
+  li:before{ content: ""; width: 5px; height: 5px; border-radius: 50%; display: inline-block; background: #23D9FF; margin-top: 15px; }
   .publicDisposal{
     height: 35px;
     line-height: 35px;
     color: #23D9FF;
-    padding-left: 20px;
-    label{ float: right; .anticon{ margin-right: 10px; font-size: 18px; cursor: pointer; } }
-    span{ cursor: pointer; }
+    padding-left: 15px;
+    display: flex;
+    label{ display: block; .anticon{ margin-right: 10px; font-size: 18px; cursor: pointer; } }
+    span{ display: block; cursor: pointer; flex: 1; padding: 0 5px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; }
   }
   .disposalContent { color: #fff; .anticon{ color: #23D9FF; } }
-  .disposalHeader {
-    background: rgba(35, 153, 255, 0.41);
-    border: 1px solid rgba(35, 217, 255, 0.4);
-  }
   .selectNode{ color: red; } //选中节点样式
 }
 //弹窗

src/app/pages/left-domain/left-domain.component.ts

@@ -258,8 +258,20 @@ export class LeftDomainComponent implements OnInit {
   editSelectDisposal: MarkPlanData = null; //编辑预案名称 选中预案
   editDisposalName: string = null; //显示/隐藏 编辑预案名称 弹窗
 
+  //打开 创建预案弹窗
+  openAddDisposal(event, id: number) {
+    event.stopPropagation()
+    this.addNodePop = id
+  }
+
+  //保存为模板
+  saveMould() {
+    MarkWindow.instance.saveToSandBoxTemplate(this.editSelectDisposal)
+  }
+
   //打开 编辑预案名称弹窗
-  openEditDisposal(item: MarkPlanData) {
+  openEditDisposal(event, item: MarkPlanData) {
+    event.stopPropagation()
     this.editSelectDisposal = item;
     this.editDisposalName = JSON.parse(JSON.stringify(item.name))
   }
@@ -271,7 +283,8 @@ export class LeftDomainComponent implements OnInit {
   }
 
   //删除预案/节点
-  deleteDisposal(item: MarkPlanData, e?: MarkNodeData) {
+  deleteDisposal(event, item: MarkPlanData, e?: MarkNodeData) {
+    event.stopPropagation()
     let isTrue = confirm('您确定要删除吗')
     if (isTrue) {
       if (!e) {

src/app/service/babylon/building-basic-infos.service.ts

@@ -29,6 +29,17 @@ export class BuildingBasicInfosService {
    */
   readonly api_excelData = "api/Services/3D/GasStationExcelData";
 
+  /**
+   * 预案模板
+   */
+  readonly api_sandBoxTemplate = "api​/Services/3D/SandboxTemplate​";
+
+  /**
+   * 获取全部的预案模板
+   */
+  readonly api_sandBoxTemplateGetAll = "api​/Services/3D/SandboxTemplate​/GetAll";
+
+
 
   /**
    * 获取三维信息
@@ -74,6 +85,38 @@ export class BuildingBasicInfosService {
   }
 
 
+  /**
+   * 获取沙盒模板
+   * @param id 
+   */
+  getSandBoxTemplate(id: number) {
+    return this.getInfos(this.api_sandBoxTemplate, { "Id": id });
+  }
+
+  /**
+   * 获取所有沙盒模板
+   * 较为特殊，所以没走统一的get封装
+   * @param id 
+   */
+  getAllSandBoxTemplate() {
+    return this.http.get<string>(this.api_sandBoxTemplateGetAll).pipe(
+      catchError((err) => this.handleError(err))
+    );
+  }
+
+  /**
+   * 保存沙盒模板
+   * @param name 
+   * @param id 
+   * @param data 
+   */
+  postSandBoxTemplate(name: string, id: number, data: object) {
+    return this.postInfos(this.api_sandBoxTemplate, data, { name: name, "Id": id });
+  }
+
+
+
+
   //#region 通用封装，新增api时调用即可，不需关心具体组装规则。若修改规则，只需修改此通用封装
   /**
  * get类api所需的固定内容

src/assets/mesh/mark/inside/mhtk/MHTK.gltf

@@ -0,0 +1,158 @@
+{
+    "asset" : {
+        "generator" : "Khronos glTF Blender I/O v1.7.33",
+        "version" : "2.0"
+    },
+    "extensionsUsed" : [
+        "KHR_draco_mesh_compression"
+    ],
+    "extensionsRequired" : [
+        "KHR_draco_mesh_compression"
+    ],
+    "scene" : 0,
+    "scenes" : [
+        {
+            "name" : "Scene",
+            "nodes" : [
+                0
+            ]
+        }
+    ],
+    "nodes" : [
+        {
+            "mesh" : 0,
+            "name" : "mhtk",
+            "translation" : [
+                0.7841799855232239,
+                0.984013557434082,
+                1.3926525115966797
+            ]
+        }
+    ],
+    "materials" : [
+        {
+            "doubleSided" : true,
+            "name" : "\u6750\u8d28",
+            "normalTexture" : {
+                "index" : 0
+            },
+            "pbrMetallicRoughness" : {
+                "baseColorTexture" : {
+                    "index" : 1
+                },
+                "metallicRoughnessTexture" : {
+                    "index" : 2
+                }
+            }
+        }
+    ],
+    "meshes" : [
+        {
+            "name" : "mhtk",
+            "primitives" : [
+                {
+                    "attributes" : {
+                        "POSITION" : 0,
+                        "NORMAL" : 1,
+                        "TEXCOORD_0" : 2
+                    },
+                    "extensions" : {
+                        "KHR_draco_mesh_compression" : {
+                            "bufferView" : 0,
+                            "attributes" : {
+                                "POSITION" : 0,
+                                "NORMAL" : 1,
+                                "TEXCOORD_0" : 2
+                            }
+                        }
+                    },
+                    "indices" : 3,
+                    "material" : 0,
+                    "mode" : 4
+                }
+            ]
+        }
+    ],
+    "textures" : [
+        {
+            "sampler" : 0,
+            "source" : 0
+        },
+        {
+            "sampler" : 0,
+            "source" : 1
+        },
+        {
+            "sampler" : 0,
+            "source" : 2
+        }
+    ],
+    "images" : [
+        {
+            "mimeType" : "image/jpeg",
+            "name" : "MHT_Normal",
+            "uri" : "MHT_Normal.jpg"
+        },
+        {
+            "mimeType" : "image/jpeg",
+            "name" : "MHT_BaseColor",
+            "uri" : "MHT_BaseColor.jpg"
+        },
+        {
+            "mimeType" : "image/png",
+            "name" : "MHT_Metallic-MHT_Roughness",
+            "uri" : "MHT_Metallic-MHT_Roughness.png"
+        }
+    ],
+    "accessors" : [
+        {
+            "componentType" : 5126,
+            "count" : 208,
+            "max" : [
+                0.24659651517868042,
+                0.38860058784484863,
+                0.4306669235229492
+            ],
+            "min" : [
+                -0.35113176703453064,
+                -0.4865396022796631,
+                -0.47243988513946533
+            ],
+            "type" : "VEC3"
+        },
+        {
+            "componentType" : 5126,
+            "count" : 208,
+            "type" : "VEC3"
+        },
+        {
+            "componentType" : 5126,
+            "count" : 208,
+            "type" : "VEC2"
+        },
+        {
+            "componentType" : 5123,
+            "count" : 1080,
+            "type" : "SCALAR"
+        }
+    ],
+    "bufferViews" : [
+        {
+            "buffer" : 0,
+            "byteLength" : 1391,
+            "byteOffset" : 0
+        }
+    ],
+    "samplers" : [
+        {
+            "magFilter" : 9729,
+            "minFilter" : 9987
+        }
+    ],
+    "buffers" : [
+        {
+            "byteLength" : 1392,
+            "uri" : "MHTK.bin"
+        }
+    ]
+}

src/styles.scss

@@ -137,6 +137,22 @@ h1 {
   canvas{ width: 100%; height: 100%; border: none; outline: none; }
 }
 #threeDimensional {
+  //可展开面板
+  #disposalPlan{
+    font-size: 15px;
+    .ant-collapse-header{
+      width: 100%;
+      height: 35px;
+      line-height: 35px;
+      color: #23D9FF;
+      padding: 0px;
+      background: rgba(35, 153, 255, 0.41);
+      border: 1px solid rgba(35, 217, 255, 0.4);
+    }
+    .ant-collapse { background-color: transparent; }
+    .ant-collapse-content { background-color: transparent; width: 100% }
+  }
+
   .ant-tree{ color: #C4E2FC; } //tree
   .ant-tree,.ant-tree-node-content-wrapper:hover,.ant-tree-node-content-wrapper.ant-tree-node-selected { background-color: transparent; } //tree
   .ant-tree-node-content-wrapper { width: 100%; } //tree