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

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

@@ -2,7 +2,17 @@
 <div class="content" id="threeDimensional">
 
   <div class="header">
-    <button *ngFor="let item of allFence; let key = index;" [ngClass]="{'selectFence': selectFence === key}" (click)="toggleHeaderFence(key)">{{item}}</button>
+    <button *ngFor="let item of allFence; let key = index;" [ngClass]="{'selectFence': selectFence === key}" (click)="toggleHeaderFence(key)">
+      <label nz-dropdown [nzDropdownMenu]="menu" [nzDisabled]="item != '基本信息'">{{item}}<i nz-icon nzType="caret-up" nzTheme="outline" *ngIf="key === 0"></i></label>
+    </button>
+    <nz-dropdown-menu #menu="nzDropdownMenu">
+      <ul nz-menu class="dropDown">
+        <li nz-menu-item><label nz-checkbox>毗邻</label></li>
+        <li nz-menu-item><label nz-checkbox>区域</label></li>
+        <li nz-menu-item><label nz-checkbox>图片</label></li>
+        <li nz-menu-item><label nz-checkbox>点位</label></li>
+      </ul>
+    </nz-dropdown-menu>
     <div class="rightFence">
       <img src="../../../assets/images/awningShow.png" [hidden]="!isOpenAwning" (click)="toggleHeaderAwning(false)">
       <img src="../../../assets/images/awningHide.png" [hidden]="isOpenAwning" (click)="toggleHeaderAwning(true)">
@@ -47,6 +57,45 @@
     </div>
     <!-- 左侧建筑栏 -->
 
+    <!-- 右侧属性栏 -->
+    <div class="nature" *ngIf="isShowNature && selectFence === 0 && beforeOnePropertyData && beforeOnePropertyData.getPropertyData()" [ngStyle]="{'right': editMode? '5%' : null}">
+      <div class="natureHeader"><i nz-icon nzType="close-circle" nzTheme="outline" title="关闭" (click)="isShowNature = false;"></i></div>
+      <div class="natureContent" *ngIf="beforeOnePropertyData.getPropertyData().info != undefined">
+        <div class="natureTitle">详情</div>
+        <div><textarea [(ngModel)]="beforeOnePropertyData.getPropertyData().info"></textarea></div>
+      </div>
+      <div class="natureContent" *ngIf="beforeOnePropertyData.getPropertyData().img != undefined">
+        <div class="natureTitle">图片</div>
+        <div class="natureImg" *ngIf="beforeOnePropertyData.getPropertyData().img"><img [src]="beforeOnePropertyData.getPropertyData().img"></div>
+        <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>
+    <!-- 右侧属性栏 -->
+
     <!-- 右侧图标栏 -->
     <div class="rightIcons" *ngIf="editMode && (selectFence === 0 || selectFence === 7)" [ngClass]="{'publicMoveUp': selectFence === 7}" [ngStyle]="{'width': selectFence === 0? '60px' : null}">
       <div class="bottomCenter" id="bottomCenter">

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

@@ -48,6 +48,7 @@
     cursor: pointer;
     margin: 7px 10px 0px;
     padding: 0;
+    label{ display: block; width: 100%; height: 100%; cursor: pointer; .anticon{ font-size: 14px; margin-left: 1px; } }
   }
   .selectFence { background: linear-gradient(180deg, #000D21 0%, #00404D 49%, #23D9FF 100%); } //选种样式
   .rightFence{
@@ -178,6 +179,51 @@
   transition: margin-left 0.5s;
 }
 
+//右侧属性栏
+.nature{
+  width: 230px;
+  position: absolute;
+  top: 1%;
+  right: 1%;
+  color: #C4E2FC;
+  font-size: 14px;
+  background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%);
+  .natureHeader{ text-align: right; height: 10px; .anticon{ font-size: 18px; margin: 5px 5px 0 0; } }
+  .natureContent{
+    box-sizing: border-box;
+    padding: 0 20px;
+    margin-bottom: 5px;
+    .natureTitle{ margin-bottom: 5px; height: 20px; line-height: 20px; }
+    textarea{ width: 100%; height: 75px; background: rgba(145, 204, 255, 0.41); border: 1px solid #91CCFF; padding: 0; resize: none; outline: none; }
+    .natureImg{ margin-bottom: 5px; img{ width: auto; height: auto; max-width: 100%; } }
+    .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{
   width: 100px;
@@ -286,7 +332,7 @@
       flex: 1;
       font-size: 14px;
       p{ margin: 0; height: 20px; line-height: 18px; }
-      textarea{ width: 100%; height: 50px; background: rgba(145, 204, 255, 0.41); border: 1px solid #91CCFF; padding: 0; resize:none; outline: none; }
+      textarea{ width: 100%; height: 50px; background: rgba(145, 204, 255, 0.41); border: 1px solid #91CCFF; padding: 0; resize: none; outline: none; }
     }
     .planHeaderImg{ width: 100px; height: 100%; text-align: center; }
     .planHeaderVideo{ width: 120px; height: 100%; text-align: center; }

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
@@ -300,11 +301,15 @@ export class PlanComponent implements OnInit {
     e == 0 ? bootomDiv.scrollLeft = bootomDiv.scrollLeft + 50 : bootomDiv.scrollLeft = bootomDiv.scrollLeft - 50
   }
 
+  isShowNature: boolean = false; //显隐设备 属性栏
   beforeOnePropertyData: FacilityInfoUIItem = null; //当前选择 设备
+  naturePosition: naturePosition = new naturePosition(); //设备栏 定位位置
 
   //选中 设备
   selectProperty(e: FacilityInfoUIItem) {
+    this.isShowNature = true
     this.beforeOnePropertyData = e
+    console.log(e.getPropertyData(),'选中设备')
     if (this.isShowChildComponent && this.leftDomain) {
       this.leftDomain.selectFacilityId = e.getID()
     }
@@ -383,9 +388,14 @@ export class PlanComponent implements OnInit {
     this.isShowLoading = show;
   }
 
-
 }
 
+//属性栏 定位
+export class naturePosition {
+  top: string = "1%"
+  left: string = "50%"
+  right: string = "5%"
+}
 // 处置预案 所有图标
 export class planIcons {
   iconsName: string[] = ["灾情", "内部力量", "外部力量", "其他"]

src/styles.scss

@@ -103,6 +103,13 @@ h1 {
 }
 
 //三维场景
+.dropDown{
+  border: 1px solid #23D9FF;
+  background: linear-gradient(180deg, #000D21 0%, #006E85 100%);
+  li:hover { background-color: transparent; }
+  li { text-align: center; }
+  .ant-checkbox-wrapper { color: #fff; }
+}
 #threeDimensional {
   .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
@@ -114,7 +121,7 @@ h1 {
   .ant-collapse,.ant-collapse-item,.ant-collapse-header,.ant-collapse-content{ border-radius: 0px; border: none; } //可展开面板
   .ant-collapse-content{ background: rgba(0, 59, 110, 0.9); color: #fff; } //可展开面板
   .ant-collapse-content-box{ padding: 0; } //可展开面板
-  .ant-collapse-header{
+  .ant-collapse-header{ //可展开面板
     padding: 0 0 0 25px;
     height: 30px;
     line-height: 28px;
@@ -123,6 +130,7 @@ h1 {
     color: #23D9FF;
     .ant-collapse-arrow{ left: 5px; } //可展开面板
   }
+
   //滚动条样式	
   ::-webkit-scrollbar {
     width: 5px;