保存节点

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

@@ -99,7 +99,8 @@
         </div>
         <ul>
           <li class="publicDisposal disposalContent" *ngFor="let items of item.nodes;let keys = index;">
-            {{items.name}}<label><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>
+            <span (click)='selectNode(item,items)' [ngClass]="{'selectNode': selectNodeId == items.id && selectPlanId == item.id}">{{items.name}}</span>
+            <label><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>
@@ -116,6 +117,37 @@
         </nz-form-item>
       </form>
     </nz-modal>
+    <nz-modal [(nzVisible)]="saveDisposalDialog" nzTitle="处置节点保存" (nzOnCancel)="saveDisposalDialog = false;" [nzFooter]="null">
+      <div class="submitBottom">
+        <button (click)='saveNode(true)'>新建节点并保存</button><button (click)='saveNode(false)'>保存到已有节点</button>
+      </div>
+    </nz-modal>
+    <nz-modal [(nzVisible)]="saveType" [nzTitle]="saveType === 1? '新建节点并保存' : '保存到已有节点'" (nzOnCancel)="saveType = null;" (nzOnOk)="saveDisposalNode(saveForm.value)">
+      <form nz-form #saveForm='ngForm'>
+        <nz-form-item *ngIf="saveType === 1">
+          <nz-form-label [nzSpan]="6">节点名称<span style="color: red;">*</span></nz-form-label>
+          <nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
+            <input nz-input #name='ngModel' ngModel name="name" required/>
+          </nz-form-control>
+        </nz-form-item>
+        <nz-form-item *ngIf="saveType === 1">
+          <nz-form-label [nzSpan]="6"><span>根</span>节点</nz-form-label>
+          <nz-form-control [nzSpan]="18" nzErrorTip="请选择节点">
+            <nz-select #root='ngModel'ngModel name="root" required>
+              <nz-option *ngFor="let item of allNodeList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+            </nz-select>
+          </nz-form-control>
+        </nz-form-item>
+        <nz-form-item *ngIf="saveType === 2">
+          <nz-form-label [nzSpan]="6">节点</nz-form-label>
+          <nz-form-control [nzSpan]="18" nzErrorTip="请选择节点">
+            <nz-select #node='ngModel'ngModel name="node" required>
+              <nz-option *ngFor="let item of allNodeList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+            </nz-select>
+          </nz-form-control>
+        </nz-form-item>
+      </form>
+    </nz-modal>
     <!-- 弹窗 -->
   </div>
 

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

@@ -88,10 +88,31 @@
     color: #23D9FF;
     padding-left: 20px;
     label{ float: right; .anticon{ margin-right: 15px; font-size: 18px; cursor: pointer; } }
+    span{ cursor: pointer; }
   }
   .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; } //选中节点样式
+}
+//弹窗
+.submitBottom{
+  button {
+    cursor: pointer;
+    padding: 0;
+    width: 150px;
+    height: 30px;
+    line-height: 30px;
+    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
+    background: #e2e8f0;
+    color: #000;
+    border: none;
+    outline: none;
+  }
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly; /* 水平居中 */
 }

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

@@ -43,9 +43,9 @@ export class LeftDomainComponent implements OnInit {
   //处理 设备data
   handleFacility() {
     if (this.beforeFence === 7) { //应急预案
+      MarkWindow.instance? this.allMarkPlanData= MarkWindow.instance.allMarkPlanData : null
       EventManager.addListener(Event_GetAllMarkPlanData, (data: Event_GetAllMarkPlanData)=>{
         this.allMarkPlanData = data.data
-        console.log(this.allMarkPlanData,777)
       })
       return
     }
@@ -153,7 +153,7 @@ export class LeftDomainComponent implements OnInit {
   allMarkPlanData: AllMarkPlanData; //处置预案节点数据
   selectPlanId: number;
   selectNodeId: number;
-  addDisposalPop: boolean = false; //显示/隐藏 创建预案弹窗
+  addDisposalPop: boolean = false; //显示/隐藏 创建预案 弹窗
   addNodePop: number = null; //显示/隐藏 创建节点 父节点ID
 
   //创建预案/节点
@@ -179,7 +179,36 @@ export class LeftDomainComponent implements OnInit {
     }
   }
 
-  //保存预案/节点
+  //选中 数据节点
+  selectNode(item: MarkPlanData, e: MarkNodeData) {
+    if (this.selectPlanId != item.id || this.selectNodeId != e.id) { //选中
+      if (!MarkWindow.instance.currentMarkNodeInfo) { //未选中节点
+        this.selectPlanId = item.id
+        this.selectNodeId = e.id
+        MarkWindow.instance.selectMarkNode(item.id,e.id)
+      } else { //已选中节点
+        let isTrue = confirm('切换节点后,没保存的信息将会丢失!')
+        if (isTrue) {
+          this.selectPlanId = item.id
+          this.selectNodeId = e.id
+          MarkWindow.instance.selectMarkNode(item.id,e.id)
+        }
+      }
+    } else if (this.selectPlanId === item.id && this.selectNodeId === e.id) { //取消选中
+      let isTrue = confirm('切换节点后,没保存的信息将会丢失!')
+      if (isTrue) {
+        this.selectPlanId = null
+        this.selectNodeId = null
+        MarkWindow.instance.selectMarkNode(null,null)
+      }
+    }
+  }
+
+  saveDisposalDialog: boolean = false; //整体保存预案 弹窗
+  saveType: number = null; //新建保存/保存到已有 弹窗
+  allNodeList: any[] = []; //所有根节点/节点
+
+  //保存-1
   saveDisposal(markPlanId: number = null, nodeId: number = null) {
     if (!MarkWindow.instance.currentMarkNodeInfo) { //未选中节点
       this.message.info('还没有进行标绘,无法保存');
@@ -197,7 +226,46 @@ export class LeftDomainComponent implements OnInit {
     }
   }
 
-  saveDisposalDialog: boolean = false; //整体保存预案 弹窗
+  //保存-2
+  saveNode(isNew: boolean) {
+    this.saveDisposalDialog = false
+    if (isNew) { //新建节点并保存
+      this.saveType = 1
+      this.allNodeList = MarkWindow.instance.allMarkPlanData.datas
+    } else { //保存到已有节点
+      this.saveType = 2
+      this.allNodeList = []
+      MarkWindow.instance.allMarkPlanData.datas.forEach(item => {
+        item.nodes.forEach(element=>{
+          let node = {
+            id: element.id,
+            parrentId: item.id,
+            name: element.name,
+          }
+          this.allNodeList.push(node)
+        })
+      });
+    }
+  }
+
+  //保存-3
+  saveDisposalNode(e) {
+    if (this.saveType === 1) { //新建节点并保存
+      if (!e.name || !e.root) {
+        this.message.info('请完善表单')
+        return
+      }
+      MarkWindow.instance.createNewNodeAndSave(e.root.id,e.name)
+      this.saveType = null
+    } else { //保存到已有节点
+      if (!e.node) {
+        this.message.info('请完善表单')
+        return
+      }
+      MarkWindow.instance.saveToOldNode(e.node.parrentId,e.node.id)
+      this.saveType = null
+    }
+  }
 
   //编辑信息
   editInfo() {