替换UI 可展开面板

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

@@ -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="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)="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>
+                <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(item,items)"></i></label>
+              <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>
-      </div>
+        </nz-collapse-panel>
+      </nz-collapse>
     </div>
     <!-- 处置预案 -->
     <!-- 弹窗 -->

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

@@ -87,24 +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; background: #23D9FF; margin-top: 15px; }
   .publicDisposal{
     height: 35px;
     line-height: 35px;
     color: #23D9FF;
-    padding-left: 20px;
+    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,15 @@ export class LeftDomainComponent implements OnInit {
   editSelectDisposal: MarkPlanData = null; //编辑预案名称 选中预案
   editDisposalName: string = null; //显示/隐藏 编辑预案名称 弹窗
 
+  //打开 创建预案弹窗
+  openAddDisposal(event, id: number) {
+    event.stopPropagation()
+    this.addNodePop = id
+  }
+
   //打开 编辑预案名称弹窗
-  openEditDisposal(item: MarkPlanData) {
+  openEditDisposal(event, item: MarkPlanData) {
+    event.stopPropagation()
     this.editSelectDisposal = item;
     this.editDisposalName = JSON.parse(JSON.stringify(item.name))
   }
@@ -271,7 +278,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/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