diff --git a/src/app/babylon/model/data/institution/facility/property-data/in/property-data-jyj.ts b/src/app/babylon/model/data/institution/facility/property-data/in/property-data-jyj.ts index e06fede..ea673a0 100644 --- a/src/app/babylon/model/data/institution/facility/property-data/in/property-data-jyj.ts +++ b/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; } diff --git a/src/app/pages/plan/plan.component.html b/src/app/pages/plan/plan.component.html index 3d3c285..9978d24 100644 --- a/src/app/pages/plan/plan.component.html +++ b/src/app/pages/plan/plan.component.html @@ -2,7 +2,17 @@
- + + +
    +
    • +
    • +
    • +
    • +
+
@@ -47,6 +57,45 @@
+ +
+
+
+
详情
+
+
+
+
图片
+
+
+
+
+
+
+
{{beforeOnePropertyData.getPropertyData().name}}
+
+
+ + +
+
+ + +
+
+
品牌 :
+
油枪数量 :
+
油品品号 :
+
+
+
{{beforeOnePropertyData.getPropertyData().name}}
+
油品品号 :
+
油罐容积 :
+
安全容积 :
+
+
+ +
diff --git a/src/app/pages/plan/plan.component.scss b/src/app/pages/plan/plan.component.scss index 896fb73..4dcc908 100644 --- a/src/app/pages/plan/plan.component.scss +++ b/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; } diff --git a/src/app/pages/plan/plan.component.ts b/src/app/pages/plan/plan.component.ts index 45827e1..3d1ace7 100644 --- a/src/app/pages/plan/plan.component.ts +++ b/src/app/pages/plan/plan.component.ts @@ -116,6 +116,7 @@ export class PlanComponent implements OnInit { this.beforeOneSatus = StatusManager.getStatus(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[] = ["灾情", "内部力量", "外部力量", "其他"] diff --git a/src/assets/images/flow.png b/src/assets/images/flow.png new file mode 100644 index 0000000..d7291b9 Binary files /dev/null and b/src/assets/images/flow.png differ diff --git a/src/assets/images/power.png b/src/assets/images/power.png new file mode 100644 index 0000000..2eacd10 Binary files /dev/null and b/src/assets/images/power.png differ diff --git a/src/styles.scss b/src/styles.scss index 3981db8..508ce71 100644 --- a/src/styles.scss +++ b/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;