8 changed files with 726 additions and 26 deletions
@ -1 +1,159 @@
|
||||
<!-- 联动力量审核 --> |
||||
<!-- 联动力量审核 --> |
||||
<div class="box" style="width: 100%;height: 100%;overflow: hidden;"> |
||||
<div class="mapbox" id="linkageForcesSwiper"> |
||||
|
||||
|
||||
<div id="container"></div> |
||||
|
||||
<div class="detailsbox" *ngIf="LinkageForceDetailInfo.linkageForceType || LinkageForceDetailInfo.linkageForceType == '0'"> |
||||
<div class="masklayer" *ngIf="isMasklayer"> |
||||
<mat-spinner [diameter]='30'></mat-spinner> |
||||
<span>请等待...</span> |
||||
</div> |
||||
<div class="masklayer" *ngIf="isMasklayerDownload"> |
||||
<mat-progress-bar class="progressbar" mode="determinate" [value]="progressBarValue"></mat-progress-bar> |
||||
<span>下载中...({{progressBarValue}}%)</span> |
||||
</div> |
||||
<div class="tabsbox"> |
||||
<div class="tabs"> |
||||
<div (click)="selectedTab(1)" [ngClass]="{'selectedBtn': tabIndex == 1}"> |
||||
<span>详情</span> |
||||
</div> |
||||
<div (click)="selectedTab(2)" [ngClass]="{'selectedBtn': tabIndex == 2}"> |
||||
<span>相关资料</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 详情 --> |
||||
<div class="contant" *ngIf="tabIndex == 1"> |
||||
<div> |
||||
<p>基本信息</p> |
||||
<mat-grid-list cols="6" rowHeight="40px"> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
<span style="color: red;">*</span> |
||||
类型: |
||||
</span> |
||||
<select disabled style="width: 67.7%;" [(ngModel)]="LinkageForceDetailInfo.linkageForceType"> |
||||
<option *ngFor="let item of checkBoxList" [value]="item.id">{{item.name}}</option> |
||||
</select> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
<span style="color: red;">*</span> |
||||
名称: |
||||
</span> |
||||
<input type="text" style="width: 63%;" [(ngModel)]="LinkageForceDetailInfo.name"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
单位联系电话: |
||||
</span> |
||||
<input type="text" [(ngModel)]="LinkageForceDetailInfo.phoneNumber"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
单位传真: |
||||
</span> |
||||
<input type="text" [(ngModel)]="LinkageForceDetailInfo.faxNumber"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='6' rowspan='2'> |
||||
<span> |
||||
备注: |
||||
</span> |
||||
<textarea [(ngModel)]="LinkageForceDetailInfo.remark" style="height: 80%;width: 84.5%;" name="" id="" cols="30" rows="10"></textarea> |
||||
</mat-grid-tile> |
||||
</mat-grid-list> |
||||
<p>位置信息</p> |
||||
<mat-grid-list cols="6" rowHeight="40px"> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
行政区: |
||||
</span> |
||||
<input type="text" style="width: 26%;margin-right: 6%;" [(ngModel)]="LinkageForceDetailInfo.administrativeRegion"> |
||||
<span> |
||||
地址: |
||||
</span> |
||||
<input type="text" style="width: 26%;margin-right: 6%;" [(ngModel)]="LinkageForceDetailInfo.address"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
经度: |
||||
</span> |
||||
<input [(ngModel)]="LinkageForceDetailInfo.location.x" disabled type="text" style="width: 26%;margin-right: 6%;"> |
||||
<span> |
||||
纬度: |
||||
</span> |
||||
<input [(ngModel)]="LinkageForceDetailInfo.location.y" disabled type="text" style="width: 26%;margin-right: 6%;"> |
||||
</mat-grid-tile> |
||||
|
||||
</mat-grid-list> |
||||
<p>联系人</p> |
||||
<mat-grid-list cols="6" rowHeight="40px"> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
联系人: |
||||
</span> |
||||
<input type="text" [(ngModel)]="LinkageForceDetailInfo.contactName"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
职务: |
||||
</span> |
||||
<input type="text" [(ngModel)]="LinkageForceDetailInfo.contactTitle"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
电话: |
||||
</span> |
||||
<input type="text" [(ngModel)]="LinkageForceDetailInfo.contactPhone"> |
||||
</mat-grid-tile> |
||||
</mat-grid-list> |
||||
<p>应急信息</p> |
||||
<mat-grid-list cols="6" rowHeight="40px"> |
||||
<mat-grid-tile colspan='3' rowspan='2'> |
||||
<span> |
||||
服务内容: |
||||
</span> |
||||
<textarea style="height: 80%;width: 70%;" name="" id="" cols="30" rows="10" [(ngModel)]="LinkageForceDetailInfo.serviceContent"></textarea> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='2'> |
||||
<span> |
||||
资源说明: |
||||
</span> |
||||
<textarea style="height: 80%;width: 70%;" name="" id="" cols="30" rows="10" [(ngModel)]="LinkageForceDetailInfo.resourceRemark"></textarea> |
||||
</mat-grid-tile> |
||||
|
||||
</mat-grid-list> |
||||
</div> |
||||
</div> |
||||
<!-- 相关资料 --> |
||||
<div class="contant" *ngIf="tabIndex == 2"> |
||||
<div class="fileDivBox" *ngFor="let item of AttachmentArr" > |
||||
<div class="imgbox"> |
||||
<img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'png' |
||||
|| item.fileName.split('.')[item.fileName.split('.').length-1] == 'jpg' |
||||
|| item.fileName.split('.')[item.fileName.split('.').length-1] == 'JPG'" |
||||
class="thumbnailImg" src="/api/Objects/PlanPlatform/{{item.objectName}}" alt=""> |
||||
<img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'docx' |
||||
|| item.fileName.split('.')[item.fileName.split('.').length-1] == 'doc'" |
||||
class="thumbnailImg" src="/assets/images/word.jpg" alt=""> |
||||
<img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'pdf'" |
||||
class="thumbnailImg" src="/assets/images/pdf.jpg" alt=""> |
||||
<img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'txt'" |
||||
class="thumbnailImg" src="/assets/images/txt.jpg" alt=""> |
||||
<img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'mp4'" |
||||
class="thumbnailImg" src="/assets/images/vedio.jpg" alt=""> |
||||
</div> |
||||
<span [title]="item.fileName">{{item.fileName}}</span> |
||||
<button (click)="clickFile(item)" class="btn btn1" mat-flat-button color="primary">查看</button> |
||||
<button (click)="download (item)" class="btn btn2" mat-flat-button color="primary">下载</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="viewerjs" style="display:none"> |
||||
|
||||
</div> |
||||
@ -0,0 +1,330 @@
|
||||
.box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #F2F4F6; |
||||
display: flex; |
||||
box-sizing: border-box; |
||||
padding: 10px; |
||||
font-size: 16px; |
||||
// font-family: Source Han Sans CN; |
||||
font-weight: 400; |
||||
color: #000000; |
||||
} |
||||
.mapbox{ |
||||
flex: 1; |
||||
margin-left: 10px; |
||||
background-color: #fff; |
||||
display: flex; |
||||
overflow: hidden; |
||||
flex-direction: column; |
||||
|
||||
#container{ |
||||
width: 100%; |
||||
height: 220px; |
||||
} |
||||
.detailsbox{ |
||||
width: 100%; |
||||
flex: 1; |
||||
position: relative; |
||||
.tabsbox{ |
||||
width: 100%; |
||||
height: 40px; |
||||
overflow: hidden; |
||||
overflow-x: auto; |
||||
line-height: 40px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
font-size: 15px; |
||||
.tabs{ |
||||
div{ |
||||
float: left; |
||||
width: 120px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
color: #000000; |
||||
opacity: 0.4; |
||||
border-right: 1px solid #F2F4F6; |
||||
} |
||||
.selectedBtn{ |
||||
background-color: #2196F3; |
||||
color: #fff; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.btnbox{ |
||||
display: flex; |
||||
align-items: center; |
||||
.uploadAttachment{ |
||||
display: inline-block; |
||||
margin-right: 20px; |
||||
width: 120px; |
||||
text-align: center; |
||||
height: 28px; |
||||
line-height: 28px; |
||||
position: relative; |
||||
button{ |
||||
width: 100%; |
||||
height: 28px; |
||||
line-height: 28px; |
||||
mat-icon{ |
||||
transform: rotate(25deg); |
||||
font-size: 20px; |
||||
width: 20px; |
||||
height: 20px; |
||||
} |
||||
} |
||||
.a-upload{ |
||||
display: inline-block; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
display: inline-block; |
||||
width: 100%; |
||||
height: 100%; |
||||
opacity: 0; |
||||
input{ |
||||
width: 100%; |
||||
height: 100%; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
span{ |
||||
display: inline-block; |
||||
cursor: pointer; |
||||
color: #2196F3; |
||||
mat-icon{ |
||||
vertical-align: sub; |
||||
font-size: 20px; |
||||
width: 20px; |
||||
height: 20px; |
||||
} |
||||
} |
||||
span:hover{ |
||||
text-decoration: underline; |
||||
} |
||||
.submitAudit{ |
||||
margin: 0 30px; |
||||
} |
||||
.close{ |
||||
margin-right: 30px; |
||||
} |
||||
} |
||||
} |
||||
.contant{ |
||||
width: 100%; |
||||
height:460px; |
||||
overflow-y: auto; |
||||
p{ |
||||
color: #2196F3; |
||||
background-color: #F2F4F6; |
||||
height: 33px; |
||||
line-height: 33px; |
||||
box-sizing: border-box; |
||||
padding-left: 20px; |
||||
font-size: 15px; |
||||
} |
||||
span{ |
||||
font-size: 15px; |
||||
} |
||||
input,select{ |
||||
height: 30px; |
||||
line-height: 30px; |
||||
box-sizing: border-box; |
||||
padding: 0 12px; |
||||
width: 60%; |
||||
margin-left: 5px; |
||||
border: 1px solid #EBEBEB; |
||||
border-radius: 5px; |
||||
} |
||||
textarea{ |
||||
width: 89%; |
||||
margin-left: 5px; |
||||
height: 85%; |
||||
border: 1px solid #EBEBEB; |
||||
border-radius: 5px; |
||||
} |
||||
.longinput{ |
||||
width: 74%; |
||||
} |
||||
.unitDiv{ |
||||
width: 60%; |
||||
position: relative; |
||||
input,select{ |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
padding-right: 50px; |
||||
} |
||||
.unit{ |
||||
position: absolute; |
||||
right: 13px; |
||||
top: 4px; |
||||
color: #000000; |
||||
opacity: 0.4; |
||||
} |
||||
} |
||||
.smallwidth{ |
||||
width: 30%; |
||||
} |
||||
// 相关资料 |
||||
.fileDivBox{ |
||||
position: relative; |
||||
float: left; |
||||
border: 1px solid #EBEBEB; |
||||
width: 160px; |
||||
height: 162px; |
||||
box-sizing: border-box; |
||||
padding: 16px 16px 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin: 12px; |
||||
align-items: center; |
||||
cursor: pointer; |
||||
.imgbox{ |
||||
width: 134px; |
||||
height: 110px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.thumbnailImg{ |
||||
width: 134px; |
||||
height: 110px; |
||||
} |
||||
} |
||||
|
||||
span{ |
||||
width: 100%; |
||||
text-align: center; |
||||
margin-top: 5px; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
color: gray; |
||||
font-size: 14px; |
||||
} |
||||
.deleteFile{ |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
width: 18px; |
||||
height: 18px; |
||||
font-size: 18px; |
||||
display: none; |
||||
} |
||||
.btn{ |
||||
position: absolute; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
font-size: 14px; |
||||
display: none; |
||||
} |
||||
.btn1{ |
||||
top: 37px; |
||||
} |
||||
.btn2{ |
||||
top: 78px; |
||||
} |
||||
} |
||||
.fileDivBox:hover{ |
||||
border: 1px solid #000; |
||||
.deleteFile{ |
||||
display: block; |
||||
|
||||
} |
||||
.deleteFile:hover{ |
||||
color: red; |
||||
} |
||||
.btn{ |
||||
display: block; |
||||
} |
||||
} |
||||
} |
||||
.masklayer{ |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
z-index: 2000; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: rgba(0,0,0,0.2); |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
span{ |
||||
font-size: 14px; |
||||
margin-top: 5px; |
||||
} |
||||
.progressbar{ |
||||
width: 15%; |
||||
} |
||||
.cancelbtn{ |
||||
height: 32px; |
||||
line-height: 32px; |
||||
font-size: 14px; |
||||
margin-top: 12px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.addLinkageForceBox{ |
||||
width: 530px; |
||||
height: 262px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.topbox{ |
||||
width: 100%; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
background-color: #2196F3; |
||||
text-align: center; |
||||
color: #FFFFFF; |
||||
font-size: 15px; |
||||
} |
||||
.contant{ |
||||
flex: 1; |
||||
box-sizing: border-box; |
||||
padding:20px 30px; |
||||
|
||||
div{ |
||||
width:86px; |
||||
margin: 3px; |
||||
height: 36px; |
||||
float: left; |
||||
line-height: 36px; |
||||
text-align: center; |
||||
background-color: #F2F4F6; |
||||
font-size: 14px; |
||||
cursor: pointer; |
||||
border: 1px solid #fff; |
||||
border-radius: 4px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
img{ |
||||
margin-right: 3px; |
||||
} |
||||
} |
||||
.selectedDiv{ |
||||
background-color: #fff; |
||||
border: 1px solid #2196F3; |
||||
} |
||||
} |
||||
.btnbox{ |
||||
width: 100%; |
||||
height: 50px; |
||||
box-sizing: border-box; |
||||
padding: 0px 30px; |
||||
display: flex; |
||||
align-items: flex-start;; |
||||
justify-content: center; |
||||
button{ |
||||
width: 80px; |
||||
height: 36px; |
||||
line-height: 36px; |
||||
margin: 0 20px; |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue