shaojiahao
/
TheCommandPlatform-Anxin
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[真实战例]页面和弹窗

develop
baozw 4 years ago
parent
ee41941ad2
commit
e4e6700a41
3 changed files with 319 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 89
      src/app/ui/real-cases/real-cases.component.html
  2. 225
      src/app/ui/real-cases/real-cases.component.scss
  3. 13
      src/app/ui/real-cases/real-cases.component.ts

89
src/app/ui/real-cases/real-cases.component.html
Unescape View File

@ -1,4 +1,30 @@
<div class="leisiTable">
<div class="headerOperate">
<div class="bigTalkBox" style="position: absolute;right: 26px;">
<mat-icon class="titleIcon" (click)="openTalkDiv()">volume_up</mat-icon>
<div class="talkBox" *ngIf="isOpenTalk">
<div class="btndiv">
<div>泵房</div>
<div>控制室</div>
</div>
<div class="bottomDiv">
<div>
<mat-icon>settings_voice</mat-icon>
</div>
<div>
按住说话
</div>
<div>
<mat-icon>search</mat-icon>
</div>
</div>
</div>
</div>
</div>
<div class="leisiTable">
<table>
<thead >
<td style="width:40%;">单位名称</td>
@ -6,17 +32,72 @@
<td style="width:10%;">着火物</td>
<td style="width:10%;">点火位置</td>
<td style="width:10%;">相近度</td>
<td style="width:20%;">详情</td>
<td style="width:20%;cursor:pointer">详情</td>
</thead>
<tbody id="shujubody" >
<tr *ngFor="let leisi of leisiYuan">
<td style="color: #FFFFFF;">{{leisi.danweiName}}</td>
<td style="color: #FFFFFF;height: 10%;">{{leisi.danweiName}}</td>
<td style="color: #FFFFFF;">{{leisi.year}}</td>
<td style="color: #FFFFFF;">{{leisi.zhoahuo}}</td>
<td style="color: #FFFFFF;">{{leisi.weizhi}}</td>
<td [ngClass]="{'tdyanse56':leisi.xiangjin>=50&&leisi.xiangjin<=60,'tdyanse78':leisi.xiangjin>60,'tdyanse':leisi.xiangjin<50}">{{leisi.xiangjin}}%</td>
<td style="color: #CC5D13;">查看详情</td>
<td style="color: #CC5D13;" (click)="ShowHide()" ><span style="cursor:pointer">查看详情</span></td>
</tr>
</tbody>
</table>
</div>
<!--弹窗-->
<div class="tanchuang" id="tanchuang" *ngIf="isshow">
<!--弹窗头部-->
<div class="headerOperate">
<div id="tedian" class="bigeditdeletebtn" ngClass="buildingbtnchecked">
<span>基本信息</span>
</div>
<div id="zhuyi" class="bigeditdeletebtn" ngClass="buildingbtnchecked">
<span>事故特点</span>
</div>
<div id="chuzhi" class="bigeditdeletebtn" ngClass="buildingbtnchecked">
<span>处置经过</span>
</div>
<div id="chuzhi" class="bigeditdeletebtn" ngClass="buildingbtnchecked">
<span>几点体会</span>
</div>
<div id="zuzhi" class="bigeditdeletebtn" ngClass="buildingbtnchecked">
<span>存在不足</span>
</div>
<div style="float: right;margin-left: 50px;" >
<a class="xiao">-</a>
<a><span style="cursor:pointer" class="close" (click)="ShoeFalse()"><mat-icon>clear</mat-icon></span></a>
</div>
</div>
<!--弹窗中间部分-->
<div class="tanCenter">
<!--左侧-->
<div class="centerLeft">
<div class="tanCenterbtn">
<span>码头基本情况</span>
</div>
<div class="tanCenterbtn">
<span>事故油轮基本情况</span>
</div>
<div class="tanCenterbtn">
<span>石脑油理化性质</span>
</div>
<div class="tanCenterbtn">
<span>消防水源及消防设施情况</span>
</div>
<div class="tanCenterbtn">
<span>码头基本情况</span>
</div>
</div>
<!--右侧-->
<div class="centerRight">
<span>八所港危化品码头位于东方市滨海南路，东侧为中海石油建滔化工有限公司化工厂区（甲醇项目）、中海油东方石化有限责任公司化工厂区（DCC项目），西侧、北侧、南侧为大海。码头设置3个泊位，1号泊位为10000吨级，2号泊位为5000吨级，3号泊位为50000吨级。该码头目前运营工业园区六家公司的产品，共有甲醇、原油、汽油、柴油、LPG、丙烯、MTBE等16种作业介质，年吞吐量约为520万吨。</span>
</div>
<div style="width: 100%;position: absolute;bottom: 30px;right: 20px;">
<button class="button" style="float: right;margin-right: 30px;">分享</button>
</div>
</div>
</div>

225
src/app/ui/real-cases/real-cases.component.scss
Unescape View File

@ -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;
}
}
//弹窗
.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;
}

13
src/app/ui/real-cases/real-cases.component.ts
Unescape View File

@ -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
}
}

Write Preview
Loading…
Cancel
Save