属性弹窗位置更新

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

@@ -47,7 +47,7 @@
     <!-- 基本信息 -->
     <!-- 加油机 -->
     <div class="publicBox refueller" *ngIf="beforeFence === 1">
-      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility(item)">
+      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)">
         <!-- 选中样式 -->
         <div class="positionLeftTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionLeftBottom" *ngIf="selectFacilityId === item.getID()"></div>
         <div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
@@ -77,7 +77,7 @@
     <!-- 加油机 -->
     <!-- 油罐设备 -->
     <div class="publicBox refueller" *ngIf="beforeFence === 2">
-      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility(item)">
+      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)">
         <!-- 选中样式 -->
         <div class="positionLeftTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionLeftBottom" *ngIf="selectFacilityId === item.getID()"></div>
         <div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
@@ -119,7 +119,7 @@
     <!-- 消防设施 -->
     <!-- 输油管线 -->
     <div class="publicBox refueller" *ngIf="beforeFence === 5">
-      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility(item)">
+      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)">
         <!-- 选中样式 -->
         <div class="positionLeftTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionLeftBottom" *ngIf="selectFacilityId === item.getID()"></div>
         <div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
@@ -149,7 +149,7 @@
     <!-- 输油管线 -->
     <!-- 油气回收 -->
     <div class="publicBox refueller" *ngIf="beforeFence === 6">
-      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility(item)">
+      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)">
         <!-- 选中样式 -->
         <div class="positionLeftTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionLeftBottom" *ngIf="selectFacilityId === item.getID()"></div>
         <div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>

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

@@ -100,7 +100,9 @@ export class LeftDomainComponent implements OnInit {
   }
 
   //选中 设备
-  selectFacility(item: FacilityInfoUIItem) {
+  selectFacility(event, item: FacilityInfoUIItem) {
+    event.stopPropagation();
+    event.preventDefault();
     if (this.selectFacilityId != item.getID()) {
       this.selectFacilityId = item.getID()
       FacilityInfoInSceneWindow.instance.selectFacilityItem(item);

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

@@ -77,7 +77,7 @@
         <div *ngIf="editMode && !beforeOnePropertyData.getPropertyData().img"><a href="javascript:;" class="bottomPlanUpload natureUpload"><input type="file" accept="image/*" (change)='uploadPropertyImg($event)'><i nz-icon nzType="plus" nzTheme="outline"></i></a></div>
       </div>
     </div>
-    <div class="nature natureLook" *ngIf="isShowNature && (selectFence === 1 || selectFence === 2) && beforeOnePropertyData" [ngStyle]="{'top': naturePosition.top,'right': naturePosition.right}">
+    <div class="nature natureLook" *ngIf="isShowNature && (selectFence === 1 || selectFence === 2) && beforeOnePropertyData" [ngStyle]="{'top': naturePosition.top,'left': naturePosition.left}">
       <div *ngIf="selectFence === 1">
         <div class="natureTitle">{{beforeOnePropertyData.getPropertyData().name}}</div>
         <div class="flowPower">

src/app/pages/plan/plan.component.scss

@@ -201,9 +201,6 @@
   }
 }
 .natureLook{
-  width: auto;
-  min-width: 170px;
-  box-sizing: border-box;
   padding: 20px;
   color: #fff;
   .flowPower{ 

src/app/pages/plan/plan.component.ts

@@ -379,6 +379,9 @@ export class PlanComponent implements OnInit {
   selectProperty(e: FacilityInfoUIItem) {
     this.isShowNature = true
     this.beforeOnePropertyData = e
+    if (this.selectFence === 1 || this.selectFence === 2) { //刷新弹窗 位置
+      this.renovateDialogPosition()
+    }
     console.log(e.getPropertyData(), '选中设备')
     if (this.isShowChildComponent && this.leftDomain) {
       this.leftDomain.selectFacilityId = e.getID()
@@ -387,7 +390,13 @@ export class PlanComponent implements OnInit {
       window.setTimeout(() => {
         this.propertyImg = new Viewer(this.element.nativeElement.querySelector('#propertyImg'), { url: 'data-original', navbar: false });
       }, 0)
-    }
+    } 
+  }
+
+  //刷新设备属性 弹窗位置
+  renovateDialogPosition() {
+    this.naturePosition.left = `${this.beforeOnePropertyData.getHeadUIPos().x - 150}px`
+    this.naturePosition.top = `${this.beforeOnePropertyData.getHeadUIPos().y + 100}px`
   }
 
   //上传设备 图片
@@ -833,9 +842,8 @@ export class taskList {
 }
 //属性栏 定位
 export class naturePosition {
-  top: string = "1%"
+  top: string = "0px"
-  left: string = "50%"
+  left: string = "0px"
-  right: string = "5%"
 }
 // 处置预案 所有图标
 export class planIcons {