加油机油罐属性栏完善

src/app/babylon/model/data/institution/facility/property-data/in/property-data-jyj.ts

@@ -12,6 +12,8 @@ export class PropertyData_JYJ extends PropertyData_Base {
   oilGunNum: string = ""; //油枪数量
   oilProductNo: string = ""; //油品品号
   oilPumpType: string = ""; //油泵类型
+  flow: string = ""; //流量
+  power: string = ""; //功率
 
   constructor(key: string, brand: string, superBrand: string, oilGunNum: string, oilProductNo: string, oilPumpType: string) {
     super(key, FacilityType.JY_JYJ);
@@ -21,11 +23,15 @@ export class PropertyData_JYJ extends PropertyData_Base {
     this.oilGunNum = oilGunNum
     this.oilProductNo = oilProductNo
     this.oilPumpType = oilPumpType
+    this.flow = "0.5kg/s"
+    this.power = "1kw"
   }
 
   clone(key: string) {
     let result = new PropertyData_JYJ(key, this.brand, this.superBrand, this.oilGunNum, this.oilProductNo, this.oilPumpType);
     result.name = this.name;
+    result.flow = this.flow;
+    result.power = this.power;
     return result;
   }
 

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

@@ -70,6 +70,30 @@
         <div><a href="javascript:;" class="bottomPlanUpload natureUpload"><input type="file"><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 *ngIf="selectFence === 1">
+        <div class="natureTitle">{{beforeOnePropertyData.getPropertyData().name}}</div>
+        <div class="flowPower">
+          <div>
+            <img src="../../../assets/images/flow.png">
+            <label><p>流量</p><p><input type="text" [(ngModel)]="beforeOnePropertyData.getPropertyData().flow" [disabled]="!editMode"></p></label>
+          </div>
+          <div>
+            <img src="../../../assets/images/power.png">
+            <label><p>功率</p><p><input type="text" [(ngModel)]="beforeOnePropertyData.getPropertyData().power" [disabled]="!editMode"></p></label>
+          </div>
+        </div>
+        <div class="everyNature"><span>品牌 :</span><label>{{beforeOnePropertyData.getPropertyData().brand}}</label></div>
+        <div class="everyNature"><span>油枪数量 :</span><label>{{beforeOnePropertyData.getPropertyData().oilGunNum}}</label></div>
+        <div class="everyNature"><span>油品品号 :</span><label>{{beforeOnePropertyData.getPropertyData().oilProductNo}}</label></div>
+      </div>
+      <div *ngIf="selectFence === 2">
+        <div class="natureTitle">{{beforeOnePropertyData.getPropertyData().name}}</div>
+        <div class="everyNature"><span>油品品号 :</span><label>{{beforeOnePropertyData.getPropertyData().oilProductNo}}</label></div>
+        <div class="everyNature"><span>油罐容积 :</span><label>{{beforeOnePropertyData.getPropertyData().oilTankVolume}}</label></div>
+        <div class="everyNature"><span>安全容积 :</span><label>{{beforeOnePropertyData.getPropertyData().safeVolume}}</label></div>
+      </div>
+    </div>
     <!-- 右侧属性栏 -->
 
     <!-- 右侧图标栏 -->

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

@@ -188,7 +188,6 @@
   color: #C4E2FC;
   font-size: 14px;
   background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%);
-  overflow: hidden;
   .natureHeader{ text-align: right; height: 10px; .anticon{ font-size: 18px; margin: 5px 5px 0 0; } }
   .natureContent{
     box-sizing: border-box;
@@ -200,6 +199,30 @@
     .natureUpload{ margin: 0; text-align: center; width: 50px; height: 50px; line-height: 50px; }
   }
 }
+.natureLook{
+  width: auto;
+  min-width: 170px;
+  box-sizing: border-box;
+  padding: 20px;
+  color: #fff;
+  .flowPower{ 
+    width: 200px;
+    height: 50px;
+    display: flex;
+    font-size: 12px;
+    margin-bottom: 8px;
+    div{ flex: 1; line-height: 50px; margin-left: -10px; }
+    img { width: 40%; height: auto; vertical-align: top; }
+    label { display: inline-block; width: 60%; height: 100%; overflow: hidden; }
+    p{ width: 100%; height: 25px; line-height: 25px; margin: 0; }
+    input{ border: none; outline: none; background-color: transparent; width: 100%; height: 100%; }
+  }
+  .everyNature{
+    margin-bottom: 8px;
+    font-size: 12px;
+    span{ margin-right: 10px; }
+  }
+}
 
 //右侧图标栏
 .rightIcons{

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

@@ -116,6 +116,7 @@ export class PlanComponent implements OnInit {
     this.beforeOneSatus = StatusManager.getStatus<BuildingStatus>(BuildingStatus);
     let buildingWindow: BuildingWindow = this.beforeOneSatus.buildingWindow;
     let fenceType: JYZInfoMoudleType = this.getFenceType(type)
+    this.isShowNature = false //隐藏属性栏
     if (this.selectFence != type) {
       this.isShowChildComponent && this.leftDomain && type != 4 ? this.leftDomain.initComponent(type) : null; //手动初始化子组件
       this.selectFence = type
@@ -302,6 +303,7 @@ export class PlanComponent implements OnInit {
 
   isShowNature: boolean = false; //显隐设备 属性栏
   beforeOnePropertyData: FacilityInfoUIItem = null; //当前选择 设备
+  naturePosition: naturePosition = new naturePosition(); //设备栏 定位位置
 
   //选中 设备
   selectProperty(e: FacilityInfoUIItem) {
@@ -388,6 +390,12 @@ export class PlanComponent implements OnInit {
 
 }
 
+//属性栏 定位
+export class naturePosition {
+  top: string = "1%"
+  left: string = "50%"
+  right: string = "5%"
+}
 // 处置预案 所有图标
 export class planIcons {
   iconsName: string[] = ["灾情", "内部力量", "外部力量", "其他"]