diff --git a/src/app/ui/real-cases/real-cases.component.html b/src/app/ui/real-cases/real-cases.component.html index a2511e2..972ea3c 100644 --- a/src/app/ui/real-cases/real-cases.component.html +++ b/src/app/ui/real-cases/real-cases.component.html @@ -1,4 +1,30 @@ -
+
+
+ volume_up +
+
+
泵房
+
控制室
+ +
+
+
+ settings_voice +
+
+ 按住说话 +
+
+ search +
+
+
+
+
+ + + +
@@ -6,17 +32,72 @@ - + - + - +
单位名称着火物 点火位置 相近度详情详情
{{leisi.danweiName}}{{leisi.danweiName}} {{leisi.year}} {{leisi.zhoahuo}} {{leisi.weizhi}} {{leisi.xiangjin}}%查看详情查看详情
+
+ +
+ +
+
+ 基本信息 +
+
+ 事故特点 +
+
+ 处置经过 +
+
+ 几点体会 +
+
+ 存在不足 +
+
+ - + + clear +
+ +
+ +
+ +
+
+ 码头基本情况 +
+
+ 事故油轮基本情况 +
+
+ 石脑油理化性质 +
+
+ 消防水源及消防设施情况 +
+
+ 码头基本情况 +
+
+ +
+ 八所港危化品码头位于东方市滨海南路，东侧为中海石油建滔化工有限公司化工厂区（甲醇项目）、中海油东方石化有限责任公司化工厂区（DCC项目），西侧、北侧、南侧为大海。码头设置3个泊位，1号泊位为10000吨级，2号泊位为5000吨级，3号泊位为50000吨级。该码头目前运营工业园区六家公司的产品，共有甲醇、原油、汽油、柴油、LPG、丙烯、MTBE等16种作业介质，年吞吐量约为520万吨。 +
+
+ +
+
diff --git a/src/app/ui/real-cases/real-cases.component.scss b/src/app/ui/real-cases/real-cases.component.scss index 0a6ac4c..29b97d5 100644 --- a/src/app/ui/real-cases/real-cases.component.scss +++ b/src/app/ui/real-cases/real-cases.component.scss @@ -1,12 +1,84 @@ +.headerOperate { + position: relative; + flex: 2%; + display: flex; + align-items:center; + box-sizing: border-box; + margin: 0 0; + .bigTalkBox{ + user-select: none; + .titleIcon{ + font-size: 33px; + vertical-align: sub; + color: white; + } + .talkBox{ + width: 309px; + height: 326px; + border: 1px solid #30bbec; + background-color: #013a64; + opacity: .9 ; + position: absolute; + top: 32px; + right:4px; + z-index: 2000; + .btndiv{ + div{ + border-radius: 18px; + width: 70px; + height: 30px; + text-align: center; + line-height: 30px; + display: inline-block; + font-size: 13px; + color: white; + cursor: pointer; + + } + div:nth-child(1){ + background-color: #fe9400; + margin: 10px; + } + div:nth-child(2){ + background-color: #f95e5a; + } + } + .bottomDiv{ + position: absolute; + bottom:6px; + width: 100%; + height: 32px; + line-height: 32px; + display: flex; + color: white; + text-align: center; + div:nth-child(1){ + flex: 1; + } + div:nth-child(2){ + flex: 6; + color: #409eff; + background: url('../../../assets/images/输入框.png'); + background-size: 100% 100%; + } + div:nth-child(3){ + flex: 1; + + } + } + } + } +} + .leisiTable{ border:1px solid #0E79A9; height: 95%; width: 100%; background-color: #05385E; - margin-top: 50px; + //margin-top: 50px; table{ width: 100%; - height: 100%; + height: 50%; border-collapse:collapse; thead{ td{ @@ -19,7 +91,7 @@ tbody{ td{ text-align:center; - + //height: 10%; } } } @@ -32,4 +104,149 @@ } .tdyanse{ color: #FFFFFF; -} \ No newline at end of file +} +//弹窗 +.tanchuang{ + width: 50%; + height: 70%; + border:1px solid #0E79A9; + background-color: #05385E; + z-index: 99; + position: absolute; + top: 15%; + left: 20%; +} +.headerOperate { + position: relative; + span{ + font-size: 18px; + } + flex: 2%; + display: flex; + align-items:center; + min-height: 40px; + box-sizing: border-box; + margin: 0 0; + + .bigeditdeletebtn{ + margin-top: 5px; + border: 1px solid #30bbec; + margin-right: 0px; + height: 100%; + display: flex; + flex-direction: column; + // align-items:center;/*由于flex-direction: column，因此align-items代表的是水平方向*/ + justify-content: center; + user-select: none; + //background-image: url("../../../assets/images/标签正常.png") ; + background-size:100% 100%; + color: white; + span{ + padding: 13px 13px; + //padding-right: 18px; + font-size: 24px; + } + } + .bigeditdeletebtn:hover{ + cursor: pointer; + //background-image: url("../../../assets/images/标签经过.png") ; + } + .close { + top: 20px; + right: 20px; + position: absolute; + color: #778087; + /* make a round button */ + border-radius: 12px; + /* center text */ + line-height: 20px; + text-align: center; + height: 20px; + width: 20px; + font-size: 18px; + padding: 1px; + font-size: 40px; + } + .xiao{ + top: 20px; + right: 50px; + position: absolute; + color: #778087; + /* make a round button */ + border-radius: 12px; + /* center text */ + line-height: 20px; + text-align: center; + height: 20px; + width: 20px; + font-size: 38px; + padding: 1px; + font-size: 40px; + } + + } + .tanCenter{ + width: 100%; + height: 90%; + .centerLeft{ + float: left; + height: 100%; + width: 30%; + position: relative; + flex-direction: column; + span{ + font-size: 18px; + } + flex: 2%; + display: flex; + align-items:center; + box-sizing: border-box; + margin: 0 0; + .tanCenterbtn{ + //margin-top: 5px; + width: 100%; + border: 1px solid #30bbec; + //margin-right: 0px; + display: flex; + flex-direction: column; + // align-items:center;/*由于flex-direction: column，因此align-items代表的是水平方向*/ + //justify-content: center; + user-select: none; + //background-image: url("../../../assets/images/标签正常.png") ; + background-size:100% 100%; + color: white; + span{ + padding: 8px ; + text-align: center; + //padding-right: 18px; + font-size: 24px; + } + } + } + .centerRight{ + padding-top: 10px; + height: 90%; + width: 65%; + float:right ; + span{ + margin: 15px 15px; + color: #FFFFFF; + font-size: 18px; + line-height: 38px; + } + } + } + .button { + border-radius: 2px; + background-color: #4CAF50; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; +} + diff --git a/src/app/ui/real-cases/real-cases.component.ts b/src/app/ui/real-cases/real-cases.component.ts index f290216..7299cd3 100644 --- a/src/app/ui/real-cases/real-cases.component.ts +++ b/src/app/ui/real-cases/real-cases.component.ts @@ -20,5 +20,18 @@ export class RealCasesComponent implements OnInit { {danweiName:"海南东方市八所港危化品码头",year:"2016年",zhoahuo:"石脑油",weizhi:"丰盛油8油轮发动机舱",xiangjin:parseFloat("10%")} ] + //打开说话框 + isOpenTalk = false + openTalkDiv(){ + this.isOpenTalk = !this.isOpenTalk + } + isshow=false//控制显隐 + ShowHide (){ + console.log("000") + this.isshow=true + } + ShoeFalse(){ + this.isshow=false + } }