27 changed files with 1752 additions and 154 deletions
@ -0,0 +1,453 @@
|
||||
<!-- 消防力量审核 --> |
||||
<div class="box" style="width: 100%;height: 100%;overflow: hidden;"> |
||||
<div class="mapbox"> |
||||
<div id="container"></div> |
||||
|
||||
<div class="detailsbox" *ngIf="selectedFireForceLevel != null"> |
||||
<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 (click)="selectedTab(3)" [ngClass]="{'selectedBtn': tabIndex == 3}"> |
||||
<span>相关资料</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 详情 --> |
||||
<div class="contant" *ngIf="tabIndex == 1"> |
||||
<!-- 总队 支队 联系方式不同--> |
||||
<div *ngIf="selectedFireForceLevel == 0 || selectedFireForceLevel == 1"> |
||||
<p>基本信息</p> |
||||
<mat-grid-list cols="6" rowHeight="40px"> |
||||
<mat-grid-tile colspan='6' rowspan='1'> |
||||
<span> |
||||
<span style="color: red;">*</span> |
||||
队站名称: |
||||
</span> |
||||
<input [(ngModel)]="FireForceDetailInfo.stationName" type="text" style="width:88%;"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
联系电话: |
||||
</span> |
||||
<input [(ngModel)]="FireForceDetailInfo.phoneNumber" type="text"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
传真: |
||||
</span> |
||||
<input [(ngModel)]="FireForceDetailInfo.faxNumber" type="text"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
辖区面积: |
||||
</span> |
||||
<input [(ngModel)]="FireForceDetailInfo.jurisdictionArea" type="text"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='6' rowspan='2'> |
||||
<span> |
||||
备注: |
||||
</span> |
||||
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 84%;" 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 [(ngModel)]="FireForceDetailInfo.address" type="text" style="width:76%;"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
经度: |
||||
</span> |
||||
<input [(ngModel)]="FireForceDetailInfo.location.x" disabled type="text" style="width: 26%;margin-right: 6%;"> |
||||
<span> |
||||
纬度: |
||||
</span> |
||||
<input [(ngModel)]="FireForceDetailInfo.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 [(ngModel)]="ZongpersonCountData[0].PropertyValue" type="text"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
政府专职消防员数: |
||||
</span> |
||||
<input [(ngModel)]="ZongpersonCountData[1].PropertyValue" type="text"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
消防文员数: |
||||
</span> |
||||
<input [(ngModel)]="ZongpersonCountData[2].PropertyValue" type="text"> |
||||
</mat-grid-tile> |
||||
</mat-grid-list> |
||||
<p>联系方式</p> |
||||
<mat-grid-list cols="6" rowHeight="40px" *ngIf="selectedFireForceLevel == 0"> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
总队长名称: |
||||
</span> |
||||
<input type="text" [(ngModel)]="ZongcontactData[0].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
总队长联系方式: |
||||
</span> |
||||
<input type="text" [(ngModel)]="ZongcontactData[1].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
总队政委姓名: |
||||
</span> |
||||
<input type="text" [(ngModel)]="ZongcontactData[2].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
总队政委联系方式: |
||||
</span> |
||||
<input type="text" [(ngModel)]="ZongcontactData[3].PropertyValue"> |
||||
</mat-grid-tile> |
||||
</mat-grid-list> |
||||
<mat-grid-list cols="6" rowHeight="40px" *ngIf="selectedFireForceLevel == 1"> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
支队长姓名: |
||||
</span> |
||||
<input type="text" [(ngModel)]="ZhicontactData[0].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
支队长联系方式: |
||||
</span> |
||||
<input type="text" [(ngModel)]="ZhicontactData[1].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
支队政委姓名: |
||||
</span> |
||||
<input type="text" [(ngModel)]="ZhicontactData[2].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
支队政委联系方式: |
||||
</span> |
||||
<input type="text" [(ngModel)]="ZhicontactData[3].PropertyValue"> |
||||
</mat-grid-tile> |
||||
</mat-grid-list> |
||||
</div> |
||||
<!-- 大队 中队--> |
||||
<div *ngIf="selectedFireForceLevel == 2 || selectedFireForceLevel == 3"> |
||||
<p>基本信息</p> |
||||
<mat-grid-list cols="6" rowHeight="40px"> |
||||
<mat-grid-tile colspan='6' rowspan='1'> |
||||
<span> |
||||
<span style="color: red;">*</span> |
||||
队站名称: |
||||
</span> |
||||
<input type="text" style="width:81%;" [(ngModel)]="FireForceDetailInfo.stationName"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
值班电话: |
||||
</span> |
||||
<input type="text" [(ngModel)]="FireForceDetailInfo.phoneNumber"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
辖区面积: |
||||
</span> |
||||
<input type="text" [(ngModel)]="FireForceDetailInfo.jurisdictionArea"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='6' rowspan='2'> |
||||
<span> |
||||
备注: |
||||
</span> |
||||
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 84%;" 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 [(ngModel)]="FireForceDetailInfo.address" type="text" style="width:76%;"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
经度: |
||||
</span> |
||||
<input [(ngModel)]="FireForceDetailInfo.location.x" disabled type="text" style="width: 26%;margin-right: 6%;"> |
||||
<span> |
||||
纬度: |
||||
</span> |
||||
<input [(ngModel)]="FireForceDetailInfo.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)]="DaZhongpersonCountData[0].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
政府专职消防员数: |
||||
</span> |
||||
<input type="text" [(ngModel)]="DaZhongpersonCountData[1].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
每日执勤人数: |
||||
</span> |
||||
<input type="text" [(ngModel)]="DaZhongpersonCountData[2].PropertyValue"> |
||||
</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" [(ngModel)]="DaZhongcontactData[0].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
站长联系方式: |
||||
</span> |
||||
<input type="text" [(ngModel)]="DaZhongcontactData[1].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
指导员姓名: |
||||
</span> |
||||
<input type="text" [(ngModel)]="DaZhongcontactData[2].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
指导员联系方式: |
||||
</span> |
||||
<input type="text" [(ngModel)]="DaZhongcontactData[3].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
副指导员姓名: |
||||
</span> |
||||
<input type="text" [(ngModel)]="DaZhongcontactData[4].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
副指导员联系方式: |
||||
</span> |
||||
<input type="text" [(ngModel)]="DaZhongcontactData[5].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
副站长一姓名: |
||||
</span> |
||||
<input type="text" [(ngModel)]="DaZhongcontactData[6].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
副站长一联系方式: |
||||
</span> |
||||
<input type="text" [(ngModel)]="DaZhongcontactData[7].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
副站长二姓名: |
||||
</span> |
||||
<input type="text" [(ngModel)]="DaZhongcontactData[8].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
副站长二联系方式: |
||||
</span> |
||||
<input type="text" [(ngModel)]="DaZhongcontactData[9].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
副站长三姓名: |
||||
</span> |
||||
<input type="text" [(ngModel)]="DaZhongcontactData[10].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
副站长三联系方式: |
||||
</span> |
||||
<input type="text" [(ngModel)]="DaZhongcontactData[11].PropertyValue"> |
||||
</mat-grid-tile> |
||||
</mat-grid-list> |
||||
</div> |
||||
<!-- 其他消防力量 --> |
||||
<div *ngIf="selectedFireForceLevel == 4 || selectedFireForceLevel == 5 || selectedFireForceLevel == 6"> |
||||
<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 [(ngModel)]="selectedFireForceLevel"> |
||||
<option value="4">微型消防站</option> |
||||
<option value="5">企业专职消防队</option> |
||||
<option value="6">义务(志愿)消防队</option> |
||||
<!-- <option value="3">其他</option> --> |
||||
</select> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
<span style="color: red;">*</span> |
||||
队伍名称: |
||||
</span> |
||||
<input type="text" [(ngModel)]="FireForceDetailInfo.stationName"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
管辖单位: |
||||
</span> |
||||
<!-- <input disabled [(ngModel)]="superior.name" class="smallwidth" type="text" placeholder="名称"> |
||||
<input disabled [(ngModel)]="superior.code" class="smallwidth" type="text" placeholder="编号"> --> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
队长: |
||||
</span> |
||||
<input [(ngModel)]="othercontactData[0].PropertyValue" class="smallwidth" type="text" placeholder="姓名"> |
||||
<input [(ngModel)]="othercontactData[1].PropertyValue" class="smallwidth" type="text" placeholder="联系方式"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
值班电话: |
||||
</span> |
||||
<input [(ngModel)]="FireForceDetailInfo.phoneNumber" type="text"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
传真: |
||||
</span> |
||||
<input [(ngModel)]="FireForceDetailInfo.faxNumber" type="text"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='6' rowspan='2'> |
||||
<span> |
||||
备注: |
||||
</span> |
||||
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 82%;" 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 [(ngModel)]="FireForceDetailInfo.address" type="text" style="width:76%;"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
经度: |
||||
</span> |
||||
<input [(ngModel)]="FireForceDetailInfo.location.x" disabled type="text" style="width: 26%;margin-right: 6%;"> |
||||
<span> |
||||
纬度: |
||||
</span> |
||||
<input [(ngModel)]="FireForceDetailInfo.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='3' rowspan='1'> |
||||
<span> |
||||
每日执勤人数: |
||||
</span> |
||||
<input type="text" [(ngModel)]="otherpersonCountData[0].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
消防队员总人数: |
||||
</span> |
||||
<input type="text" [(ngModel)]="otherpersonCountData[1].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
执勤车辆数: |
||||
</span> |
||||
<div class="unitDiv"> |
||||
<input type="text" [(ngModel)]="otherpersonCountData[2].PropertyValue"> |
||||
<span class="unit">辆</span> |
||||
</div> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
灭火剂总量: |
||||
</span> |
||||
<div class="unitDiv"> |
||||
<input type="text" [(ngModel)]="otherpersonCountData[3].PropertyValue"> |
||||
<span class="unit">个</span> |
||||
</div> |
||||
</mat-grid-tile> |
||||
</mat-grid-list> |
||||
</div> |
||||
</div> |
||||
<!-- 车辆 --> |
||||
<!-- <div class="contant" *ngIf="tabIndex == 2"> |
||||
车辆 |
||||
</div> --> |
||||
<!-- 相关资料 --> |
||||
<div class="contant" *ngIf="tabIndex == 3"> |
||||
<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,265 @@
|
||||
.box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #F2F4F6; |
||||
display: flex; |
||||
box-sizing: border-box; |
||||
font-size: 16px; |
||||
font-weight: 400; |
||||
color: #000000; |
||||
} |
||||
|
||||
.mapbox{ |
||||
flex: 1; |
||||
background-color: #fff; |
||||
display: flex; |
||||
flex-direction: column; |
||||
#container{ |
||||
width: 100%; |
||||
height: 200px; |
||||
} |
||||
.detailsbox{ |
||||
width: 100%; |
||||
height:500px; |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { FireforceAuditComponent } from './fireforce-audit.component'; |
||||
|
||||
describe('FireforceAuditComponent', () => { |
||||
let component: FireforceAuditComponent; |
||||
let fixture: ComponentFixture<FireforceAuditComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ FireforceAuditComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(FireforceAuditComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,232 @@
|
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { MatSnackBar } from '@angular/material/snack-bar'; |
||||
import Viewer from 'viewerjs' |
||||
declare var CryptoJS |
||||
declare var AMap: any; |
||||
@Component({ |
||||
selector: 'app-fireforce-audit', |
||||
templateUrl: './fireforce-audit.component.html', |
||||
styleUrls: ['./fireforce-audit.component.scss'] |
||||
}) |
||||
export class FireforceAuditComponent implements OnInit { |
||||
|
||||
constructor(public snackBar: MatSnackBar,private http:HttpClient) { } |
||||
selectedFireForceLevel:any = 0 |
||||
|
||||
FireForceDetailInfo:any = { |
||||
id: "600144ffe7036e11b8121684", |
||||
stationName: "上海总队", |
||||
isIndependentAlarm: true, |
||||
phoneNumber: "13864340193", |
||||
faxNumber: "120", |
||||
jurisdictionArea: 999, |
||||
remark: "暂无备注", |
||||
address: "齐鲁树谷", |
||||
location: { |
||||
x:0, |
||||
y:0 |
||||
}, |
||||
personCountData: "[{\"PropertyName\":\"现役官兵人数\",\"PropertyValue\":\"1\"},{\"PropertyName\":\"政府专职消防员数\",\"PropertyValue\":\"2\"},{\"PropertyName\":\"消防文员数\",\"PropertyValue\":\"3\"}]", |
||||
personCountItems: null, |
||||
contactData: "[{\"PropertyName\":\"总队长名称\",\"PropertyValue\":\"4\"},{\"PropertyName\":\"总队长联系方式\",\"PropertyValue\":\"5\"},{\"PropertyName\":\"总队政委名称\",\"PropertyValue\":\"6\"},{\"PropertyName\":\"总队政委联系方式\",\"PropertyValue\":\"7\"}]", |
||||
contactItems: null, |
||||
dutyForceData: null, |
||||
dutyForceItems: null, |
||||
relevantInfomationData: null, |
||||
integrityScore: 0, |
||||
integrityTotalCount: 0, |
||||
integrityNotEmptyCount: 0, |
||||
RelevantInfomationData:"[{\"objectName\":\"FireForce/1/601b69697cea2c03587c4c6d.png\",\"fileName\":\"楼层区域.png\",\"fileLength\":4079},{\"objectName\":\"FireForce/1/601b696e7cea2c03587c4c6e.mp4\",\"fileName\":\"李志 《天空之城》.mp4\",\"fileLength\":56362628},{\"objectName\":\"FireForce/1/601b69867cea2c03587c4c6f.docx\",\"fileName\":\"完整度规划20200724.docx\",\"fileLength\":16480}]" |
||||
} |
||||
|
||||
ZongpersonCountData |
||||
ZongcontactData |
||||
ZhicontactData |
||||
DaZhongpersonCountData |
||||
DaZhongcontactData |
||||
othercontactData |
||||
otherpersonCountData |
||||
AttachmentArr |
||||
ngOnInit(): void { |
||||
this.ZongpersonCountData = JSON.parse(this.FireForceDetailInfo.personCountData) |
||||
this.ZongcontactData = JSON.parse(this.FireForceDetailInfo.contactData) |
||||
this.ZhicontactData = JSON.parse(this.FireForceDetailInfo.contactData) |
||||
this.DaZhongpersonCountData = JSON.parse(this.FireForceDetailInfo.personCountData) |
||||
this.DaZhongcontactData = JSON.parse(this.FireForceDetailInfo.contactData) |
||||
this.othercontactData = JSON.parse(this.FireForceDetailInfo.contactData) |
||||
this.otherpersonCountData = JSON.parse(this.FireForceDetailInfo.personCountData) |
||||
this.AttachmentArr = JSON.parse(this.FireForceDetailInfo.RelevantInfomationData) |
||||
|
||||
setTimeout(() => { |
||||
this.map = new AMap.Map('container', { |
||||
zoom:18 |
||||
}) |
||||
|
||||
if(this.FireForceDetailInfo.location && this.FireForceDetailInfo.location.x){ |
||||
this.map.setCenter([this.FireForceDetailInfo.location.x,this.FireForceDetailInfo.location.y]); |
||||
this.newPositionMarker = new AMap.Marker({ |
||||
position: [this.FireForceDetailInfo.location.x,this.FireForceDetailInfo.location.y], |
||||
content: this.newPositionMarkerContent, |
||||
offset: new AMap.Pixel(-10, -12) |
||||
}) |
||||
// 将 markers 添加到地图
|
||||
this.map.add(this.newPositionMarker); |
||||
}else{ |
||||
this.map.setCity('上海市'); |
||||
} |
||||
|
||||
}, 0); |
||||
} |
||||
map:any |
||||
newPositionMarker:any |
||||
newPositionMarkerContent:any =
|
||||
'<div class="custom-content-marker">' + |
||||
' <img style="width:20px;height:24px" src="/assets/images/定位.png">' + |
||||
'</div>' |
||||
//当前点击tab页面第几个
|
||||
tabIndex:any = 1 |
||||
selectedTab(index){ |
||||
this.tabIndex = index |
||||
} |
||||
|
||||
|
||||
//上传附件
|
||||
objectName:any |
||||
isMasklayer:boolean = false//圆圈遮罩层是否打开
|
||||
isMasklayerDownload:boolean = false//下载进度条遮罩层是否打开
|
||||
progressBarValue:any = 0//分块上传进度
|
||||
|
||||
//下载
|
||||
download (e) { |
||||
this.isMasklayerDownload = true //开启下载进度条
|
||||
let file = e //传递过来的文件元数据
|
||||
let fileSize = file.fileLength //下载文件的总大小
|
||||
let shardSize = 3 * 1024 * 1024 //文件大小是否大于10MB
|
||||
if (file && fileSize<=shardSize) { //<=3MB时直接下载
|
||||
this.progressBarValue = 60 |
||||
this.http.get(`/api/Objects/PlanPlatform/${e.objectName}`,{responseType: 'blob'},).subscribe(data=>{ |
||||
let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
|
||||
let link = document.createElement("a"); |
||||
link.style.display = "none"; |
||||
link.href = url; |
||||
let fileName = e.fileName ? e.fileName : e.objectName.split('/')[e.objectName.split('/').length-1] |
||||
link.setAttribute("download", fileName); |
||||
document.body.appendChild(link); |
||||
link.click(); |
||||
this.isMasklayerDownload = false //关闭下载进度条
|
||||
this.progressBarValue = 0 //初始化进度条
|
||||
}) |
||||
} else if (file && fileSize>shardSize) { //>3MB时分块下载
|
||||
this.blockingDownload(e) //分段下载
|
||||
} |
||||
|
||||
} |
||||
|
||||
//分段下载并合并
|
||||
async blockingDownload (e) { |
||||
let file = e //传递过来的文件元数据
|
||||
let fileSize = file.fileLength //下载文件的总大小
|
||||
let shardSize = 3 * 1024 * 1024 //3MB一个分片
|
||||
let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段
|
||||
let allFile:any = [] //所有的file分段
|
||||
|
||||
for (let i=0;i<allSlice;i++) { |
||||
let start = i * shardSize //每次下载文件开始位置
|
||||
let end = Math.min(fileSize, start + shardSize-1); //每次下载文件结束为止
|
||||
|
||||
let result = await new Promise ((result,reject)=>{ |
||||
this.http.get(`/api/Objects/PlanPlatform/${e.objectName}`,{headers:{'range':`bytes= ${start}-${end}`},responseType:'blob'}).subscribe(data=>{ |
||||
result(data) })
|
||||
}) |
||||
allFile.push(result) |
||||
// this.progressBarValue = Number((i/allSlice).toFixed(2))*100 //文件进度数
|
||||
this.progressBarValue = this.accMul(Number((i/allSlice).toFixed(2))*100,1,0) |
||||
if (allFile.length === allSlice) { //合并文件输出给浏览器
|
||||
let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址
|
||||
let link = document.createElement("a"); |
||||
link.style.display = "none"; |
||||
link.href = url; |
||||
let fileName = e.fileName ? e.fileName : e.objectName.split('/')[e.objectName.split('/').length-1] |
||||
link.setAttribute("download", fileName); |
||||
document.body.appendChild(link); |
||||
link.click(); |
||||
this.isMasklayerDownload = false //关闭下载进度条
|
||||
this.progressBarValue = 0 //初始化进度条
|
||||
} |
||||
|
||||
} //for循环结束
|
||||
|
||||
} |
||||
|
||||
|
||||
//点击文件
|
||||
clickFile(item){ |
||||
let suffix = item.fileName.split('.')[item.fileName.split('.').length-1] |
||||
if(suffix == 'png' || suffix == 'jpg' || suffix == 'JPG'){ |
||||
let dom = document.getElementById(`viewerjs`) |
||||
let pObjs = dom.childNodes; |
||||
let node = document.createElement("img") |
||||
node.style.display = "none"; |
||||
node.src = "/api/Objects/PlanPlatform/" + item.objectName; |
||||
node.id = 'img' |
||||
dom.appendChild(node) |
||||
setTimeout(() => { |
||||
let viewer = new Viewer(document.getElementById(`viewerjs`), { |
||||
hidden:()=>{ |
||||
dom.removeChild(pObjs[0]); |
||||
viewer.destroy(); |
||||
} |
||||
}); |
||||
node.click(); |
||||
}, 0); |
||||
} |
||||
if(suffix == 'docx' || suffix == 'doc' || suffix == 'pdf'){ |
||||
let fetchUrl = item.objectName |
||||
let json={ |
||||
doc: { |
||||
docId: new Date(),
|
||||
title: item.fileName, |
||||
fetchUrl: `http://${location.host}/api/Objects/PlanPlatform/`+fetchUrl |
||||
}, |
||||
user: { |
||||
uid: "test", |
||||
nickName: "test", |
||||
avatar: "", |
||||
privilege: [ |
||||
'FILE_READ','FILE_DOWNLOAD', 'FILE_PRINT'
|
||||
], |
||||
}, |
||||
} |
||||
var stringjson=JSON.stringify(json) |
||||
var wordArray = CryptoJS.enc.Utf8.parse(stringjson); |
||||
var base64 = CryptoJS.enc.Base64.stringify(wordArray); |
||||
window.open(`http://121.5.10.84/apps/editor/openPreview?data=${base64}`) |
||||
} |
||||
if(suffix == 'mp4'){ |
||||
// const dialogRef = this.dialog.open(ViewDetails, {//调用open方法打开对话框并且携带参数过去
|
||||
// data: {item:item,type:"video"},
|
||||
// id:'videodialog'
|
||||
// });
|
||||
// dialogRef.afterClosed().subscribe();
|
||||
} |
||||
} |
||||
|
||||
//js乘法
|
||||
accMul(arg1,arg2,fix) {
|
||||
if(!parseInt(fix)==fix) |
||||
{ |
||||
return; |
||||
} |
||||
var m=0,s1=arg1.toString(),s2=arg2.toString();
|
||||
try{m+=s1.split(".")[1].length}catch(e){}
|
||||
try{m+=s2.split(".")[1].length}catch(e){} |
||||
if(m>fix){ |
||||
return (Math.round(Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m-fix))/Math.pow(10,fix)); |
||||
}else if(m<=fix){ |
||||
return (Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)).toFixed(fix); |
||||
}else{ |
||||
return (arg1*arg2).toFixed(fix).toString(); |
||||
} |
||||
}
|
||||
} |
||||
@ -0,0 +1 @@
|
||||
<!-- 联动力量审核 --> |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { LinkageforcesAuditComponent } from './linkageforces-audit.component'; |
||||
|
||||
describe('LinkageforcesAuditComponent', () => { |
||||
let component: LinkageforcesAuditComponent; |
||||
let fixture: ComponentFixture<LinkageforcesAuditComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ LinkageforcesAuditComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(LinkageforcesAuditComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-linkageforces-audit', |
||||
templateUrl: './linkageforces-audit.component.html', |
||||
styleUrls: ['./linkageforces-audit.component.scss'] |
||||
}) |
||||
export class LinkageforcesAuditComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,359 @@
|
||||
<div class="box" style="width: 100%;height: 100%;overflow: hidden;"> |
||||
<div class="mapbox"> |
||||
<div class="detailsbox"> |
||||
<div class="tabsbox"> |
||||
<div class="tabs"> |
||||
<div class="selectedBtn"> |
||||
<span>消火栓</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div id="container"></div> |
||||
<div class="contant" > |
||||
<p>基本信息</p> |
||||
<mat-grid-list cols="6" rowHeight="40px"> |
||||
<mat-grid-tile colspan='6' rowspan='1'> |
||||
<span> |
||||
<span style="color: red;">*</span> |
||||
名称: |
||||
</span> |
||||
<input readonly [(ngModel)]="waterData.name" type="text" style="width: 88.6%;"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
行政区: |
||||
</span> |
||||
<input readonly [(ngModel)]="waterData.administrativeRegion" type="text"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
水源归属: |
||||
</span> |
||||
<select disabled [(ngModel)]="waterData.governmentLevel"> |
||||
<option value="0">市政</option> |
||||
<option value="1">单位(小区)</option> |
||||
</select> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
所属单位(小区): |
||||
</span> |
||||
<input readonly [(ngModel)]="waterData.village" type="text"> |
||||
</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 readonly [(ngModel)]="waterData.address" type="text" style="width:76%;"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
经度: |
||||
</span> |
||||
<input readonly [(ngModel)]="waterData.location.x" disabled type="text" style="width: 26%;margin-right: 6%;"> |
||||
<span> |
||||
纬度: |
||||
</span> |
||||
<input readonly [(ngModel)]="waterData.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" *ngIf="selectedWaterTypeIndex == 0 && fireCockData.length != 0"> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
可用状态: |
||||
</span> |
||||
<select disabled [(ngModel)]="fireCockData[0].PropertyValue"> |
||||
<option value="0">可用</option> |
||||
<option value="1">维护</option> |
||||
<option value="2">损坏</option> |
||||
</select> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
放置形式: |
||||
</span> |
||||
<select disabled [(ngModel)]="fireCockData[1].PropertyValue"> |
||||
<option value="0">地上</option> |
||||
<option value="1">地下</option> |
||||
</select> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
管网形式: |
||||
</span> |
||||
<select disabled [(ngModel)]="fireCockData[2].PropertyValue"> |
||||
<option value="0">枝状管网</option> |
||||
<option value="1">环状管网</option> |
||||
<option value="2">混合状管网</option> |
||||
<option value="3">其他</option> |
||||
</select> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
管网直径: |
||||
</span> |
||||
<div class="unitDiv"> |
||||
<select disabled [(ngModel)]="fireCockData[3].PropertyValue"> |
||||
<option value="0">100</option> |
||||
<option value="1">150</option> |
||||
<option value="2">200</option> |
||||
<option value="3">300</option> |
||||
<option value="4">350</option> |
||||
<option value="5">400</option> |
||||
</select> |
||||
<span class="unit">mm</span> |
||||
</div> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
管网压力类型: |
||||
</span> |
||||
<select disabled [(ngModel)]="fireCockData[4].PropertyValue"> |
||||
<option value="0">高压管网</option> |
||||
<option value="1">临时高压管网</option> |
||||
<option value="2">低压管网</option> |
||||
</select> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
管网压力范围: |
||||
</span> |
||||
<div class="unitDiv"> |
||||
<input readonly type="text" [(ngModel)]="fireCockData[5].PropertyValue"> |
||||
<span class="unit">Mpa</span> |
||||
</div> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
接口形式: |
||||
</span> |
||||
<select disabled [(ngModel)]="fireCockData[6].PropertyValue"> |
||||
<option value="0">内扣式</option> |
||||
<option value="1">卡式</option> |
||||
<option value="2">螺纹式</option> |
||||
</select> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
接口口径: |
||||
</span> |
||||
<div class="unitDiv"> |
||||
<select disabled [(ngModel)]="fireCockData[7].PropertyValue"> |
||||
<option value="0">65</option> |
||||
<option value="1">80</option> |
||||
<option value="2">100</option> |
||||
<option value="3">150</option> |
||||
</select> |
||||
<span class="unit">mm</span> |
||||
</div> |
||||
|
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
最大流量: |
||||
</span> |
||||
<div class="unitDiv"> |
||||
<input readonly type="text" [(ngModel)]="fireCockData[8].PropertyValue"> |
||||
<span class="unit">L/s</span> |
||||
</div> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
供水单位: |
||||
</span> |
||||
<input readonly style="width: 74%;" type="text" [(ngModel)]="fireCockData[9].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
联系方式: |
||||
</span> |
||||
<input readonly style="width: 74%;" type="text" [(ngModel)]="fireCockData[10].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='6' rowspan='2'> |
||||
<span> |
||||
备注: |
||||
</span> |
||||
<textarea readonly [(ngModel)]="fireCockData[11].PropertyValue" style="height: 80%;" name="" id="" cols="30" rows="10"></textarea> |
||||
</mat-grid-tile> |
||||
</mat-grid-list> |
||||
<!-- 消防水池 --> |
||||
<mat-grid-list cols="6" rowHeight="40px" *ngIf="selectedWaterTypeIndex == 1"> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
可用状态: |
||||
</span> |
||||
<select disabled [(ngModel)]="poolData[0].PropertyValue"> |
||||
<option value="0">可用</option> |
||||
<option value="1">维护</option> |
||||
<option value="2">损坏</option> |
||||
</select> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
储水量: |
||||
</span> |
||||
<div class="unitDiv"> |
||||
<input readonly type="text" [(ngModel)]="poolData[1].PropertyValue"> |
||||
<span class="unit">m³</span> |
||||
</div> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
取水最大流量: |
||||
</span> |
||||
<div class="unitDiv"> |
||||
<input readonly type="text" [(ngModel)]="poolData[2].PropertyValue"> |
||||
<span class="unit">L/s</span> |
||||
</div> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
进水流量: |
||||
</span> |
||||
<div class="unitDiv"> |
||||
<input readonly type="text" [(ngModel)]="poolData[3].PropertyValue"> |
||||
<span class="unit">L/s</span> |
||||
</div> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
同时取水车辆数: |
||||
</span> |
||||
<input readonly type="text" [(ngModel)]="poolData[4].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
水源标高差: |
||||
</span> |
||||
<div class="unitDiv"> |
||||
<input readonly type="text" [(ngModel)]="poolData[5].PropertyValue"> |
||||
<span class="unit">m</span> |
||||
</div> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
补水时间: |
||||
</span> |
||||
<input readonly class="longinput" type="text" [(ngModel)]="poolData[6].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
管网形式: |
||||
</span> |
||||
<input readonly class="longinput" type="text" [(ngModel)]="poolData[7].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
供水单位: |
||||
</span> |
||||
<input readonly class="longinput" type="text" [(ngModel)]="poolData[8].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
联系方式: |
||||
</span> |
||||
<input readonly class="longinput" type="text" [(ngModel)]="poolData[9].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='6' rowspan='2'> |
||||
<span> |
||||
备注: |
||||
</span> |
||||
<textarea [(ngModel)]="poolData[10].PropertyValue" style="height: 80%;" name="" id="" cols="30" rows="10"></textarea> |
||||
</mat-grid-tile> |
||||
</mat-grid-list> |
||||
<!-- 天然水源 --> |
||||
<mat-grid-list cols="6" rowHeight="40px" *ngIf="selectedWaterTypeIndex == 2"> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
可用状态: |
||||
</span> |
||||
<select disabled [(ngModel)]="naturalWaterData[0].PropertyValue"> |
||||
<option value="0">可用</option> |
||||
<option value="1">维护</option> |
||||
<option value="2">损坏</option> |
||||
</select> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
天然水源类型: |
||||
</span> |
||||
<input readonly type="text" [(ngModel)]="naturalWaterData[1].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
有无消防码头: |
||||
</span> |
||||
<select disabled [(ngModel)]="naturalWaterData[2].PropertyValue"> |
||||
<option value="0">有</option> |
||||
<option value="1">无</option> |
||||
</select> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
水质: |
||||
</span> |
||||
<select disabled [(ngModel)]="naturalWaterData[3].PropertyValue"> |
||||
<option value="0">淡水</option> |
||||
<option value="1">海水</option> |
||||
<option value="2">中水</option> |
||||
</select> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
同时取水车辆数: |
||||
</span> |
||||
<input readonly type="text" [(ngModel)]="naturalWaterData[4].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='2' rowspan='1'> |
||||
<span> |
||||
水源标高差: |
||||
</span> |
||||
<div class="unitDiv"> |
||||
<input readonly type="text" [(ngModel)]="naturalWaterData[5].PropertyValue"> |
||||
<span class="unit">m</span> |
||||
</div> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
有无枯水期: |
||||
</span> |
||||
<select disabled class="longinput" [(ngModel)]="naturalWaterData[6].PropertyValue"> |
||||
<option value="0">有</option> |
||||
<option value="1">无</option> |
||||
</select> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
枯水期时间: |
||||
</span> |
||||
<input readonly class="longinput" type="text" [(ngModel)]="naturalWaterData[7].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
供水单位: |
||||
</span> |
||||
<input readonly class="longinput" type="text" [(ngModel)]="naturalWaterData[8].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='3' rowspan='1'> |
||||
<span> |
||||
联系方式: |
||||
</span> |
||||
<input readonly class="longinput" type="text" [(ngModel)]="naturalWaterData[9].PropertyValue"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile colspan='6' rowspan='2'> |
||||
<span> |
||||
备注: |
||||
</span> |
||||
<textarea [(ngModel)]="naturalWaterData[10].PropertyValue" style="height: 80%;" name="" id="" cols="30" rows="10"></textarea> |
||||
</mat-grid-tile> |
||||
</mat-grid-list> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,116 @@
|
||||
.mapbox{ |
||||
flex: 1; |
||||
background-color: #fff; |
||||
display: flex; |
||||
flex-direction: column; |
||||
select:disabled { |
||||
color: black!important; |
||||
opacity: 1; |
||||
} |
||||
#container{ |
||||
width: 100%; |
||||
height: 200px; |
||||
} |
||||
.detailsbox{ |
||||
width: 100%; |
||||
height:500px; |
||||
.tabsbox{ |
||||
width: 100%; |
||||
height: 40px; |
||||
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{ |
||||
span{ |
||||
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:480px; |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { WaterAuditComponent } from './water-audit.component'; |
||||
|
||||
describe('WaterAuditComponent', () => { |
||||
let component: WaterAuditComponent; |
||||
let fixture: ComponentFixture<WaterAuditComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ WaterAuditComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(WaterAuditComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,64 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
declare var AMap: any; |
||||
@Component({ |
||||
selector: 'app-water-audit', |
||||
templateUrl: './water-audit.component.html', |
||||
styleUrls: ['./water-audit.component.scss'] |
||||
}) |
||||
export class WaterAuditComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
map:any |
||||
newPositionMarker:any |
||||
newPositionMarkerContent:any =
|
||||
'<div class="custom-content-marker">' + |
||||
' <img style="width:20px;height:24px" src="/assets/images/定位.png">' + |
||||
'</div>' |
||||
ngOnInit(): void { |
||||
this.waterData.detailData = JSON.parse(this.waterData.detailData) |
||||
this.fireCockData = this.waterData.detailData |
||||
console.log(789, this.fireCockData) |
||||
setTimeout(() => { |
||||
this.map = new AMap.Map('container', { |
||||
zoom:18 |
||||
}) |
||||
|
||||
if(this.waterData.location && this.waterData.location.x){ |
||||
this.map.setCenter([this.waterData.location.x,this.waterData.location.y]); |
||||
this.newPositionMarker = new AMap.Marker({ |
||||
position: [this.waterData.location.x,this.waterData.location.y], |
||||
content: this.newPositionMarkerContent, |
||||
offset: new AMap.Pixel(-10, -12) |
||||
}) |
||||
// 将 markers 添加到地图
|
||||
this.map.add(this.newPositionMarker); |
||||
}else{ |
||||
this.map.setCity('上海市'); |
||||
} |
||||
|
||||
}, 0); |
||||
} |
||||
selectedWaterTypeIndex:number = 0//选择的水源类型 0消火栓 1水池 2天然水源
|
||||
fireCockData:any = []//消火栓详情
|
||||
poolData:any = []//水池详情
|
||||
naturalWaterData:any = []//天然水源详情
|
||||
waterData:any = { |
||||
id: "60125d31d31fab7de81c56b0", |
||||
name: "上海中心消火栓01", |
||||
administrativeRegion: "上海区", |
||||
governmentLevel: "1", |
||||
village: "小高社区", |
||||
address: "国际会议中心", |
||||
location: { |
||||
x: 121.496717, |
||||
y: 31.239452 |
||||
}, |
||||
detailData: "[{\"PropertyName\":\"可用状态\",\"PropertyValue\":\"1\"},{\"PropertyName\":\"放置形式\",\"PropertyValue\":\"1\"},{\"PropertyName\":\"管网形式\",\"PropertyValue\":\"2\"},{\"PropertyName\":\"管网直径\",\"PropertyValue\":\"2\"},{\"PropertyName\":\"管网压力类型\",\"PropertyValue\":\"1\"},{\"PropertyName\":\"管网压力范围\",\"PropertyValue\":\"2222\"},{\"PropertyName\":\"接口形式\",\"PropertyValue\":\"1\"},{\"PropertyName\":\"接口口径\",\"PropertyValue\":\"3\"},{\"PropertyName\":\"最大流量\",\"PropertyValue\":\"333\"},{\"PropertyName\":\"供水单位\",\"PropertyValue\":\"剃剃头\"},{\"PropertyName\":\"联系方式\",\"PropertyValue\":\"119\"},{\"PropertyName\":\"备注\",\"PropertyValue\":\"突突突突突突\"}]", |
||||
detailItems: null, |
||||
createTime: "2021-02-03T02:36:57.451Z", |
||||
creatorId: "5e8eced2aaca5f7c1025309b", |
||||
deleted: false, |
||||
waterSourceType: 0, |
||||
integrityScore: 0.21052632 |
||||
} |
||||
} |
||||
Loading…
Reference in new issue