+
+
+
+
+
| 单位名称 |
@@ -6,17 +32,72 @@
着火物 |
点火位置 |
相近度 |
- 详情 |
+ 详情 |
- | {{leisi.danweiName}} |
+ {{leisi.danweiName}} |
{{leisi.year}} |
{{leisi.zhoahuo}} |
{{leisi.weizhi}} |
{{leisi.xiangjin}}% |
- 查看详情 |
+ 查看详情 |
+
+
+
+
+
+
+
+
+
+
+ 码头基本情况
+
+
+ 事故油轮基本情况
+
+
+ 石脑油理化性质
+
+
+ 消防水源及消防设施情况
+
+
+ 码头基本情况
+
+
+
+
+ 八所港危化品码头位于东方市滨海南路，东侧为中海石油建滔化工有限公司化工厂区（甲醇项目）、中海油东方石化有限责任公司化工厂区（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
+ }
}