You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
273 lines
16 KiB
273 lines
16 KiB
<div class="box" style="width: 100%;height: 100%;overflow: hidden;"> |
|
<div class="listbox"> |
|
<div class="topbox"> |
|
<div class="add"> |
|
<div> |
|
<mat-slide-toggle color="primary" (change)='slideChange($event)' checked labelPosition='before'>列表过滤</mat-slide-toggle> |
|
</div> |
|
<div> |
|
<button (click)="reset()" style="width: 68px;margin-right: 12px;" mat-flat-button color="primary">重置</button> |
|
<button (click)="addLinkageForce()" style="width: 68px;" mat-flat-button color="primary">新增</button> |
|
</div> |
|
</div> |
|
<div class="searchbox" *ngIf="isCheckedOfSearchDiv"> |
|
<div class="inputbox"> |
|
<span> |
|
关键字: |
|
</span> |
|
<input type="text" placeholder="请输入名称/类别" [(ngModel)]="searchForm.name"/> |
|
</div> |
|
<div class="inputbox"> |
|
<span> |
|
完整度: |
|
</span> |
|
<select [(ngModel)]="searchForm.integrityNum" [ngClass]="{'gray': searchForm.integrityNum == ''}"> |
|
<option value='' selected disabled style='display:none;'>请选择</option> |
|
<option *ngFor="let item of listIntegrityNum" [value]="item.id">{{item.name}}</option> |
|
</select> |
|
</div> |
|
<div class="searchbtn"> |
|
<button (click)="searchList()" style="width: 100%;" mat-flat-button color="primary"><mat-icon style="width: 20px;height: 20px;font-size: 20px;">search</mat-icon>搜索</button> |
|
</div> |
|
</div> |
|
</div> |
|
<div style="height: 1px;width: 100%;background-color: #F2F4F6;"></div> |
|
<div class="contantbox"> |
|
<div class="title"> |
|
<span>消防队</span> |
|
<span>完整度</span> |
|
</div> |
|
<div class="linkageForceList"> |
|
<ul *ngIf="allLinkageForceObj && allLinkageForceObj.items.length != 0"> |
|
<li *ngFor="let item of allLinkageForceObj.items" (click)="selectedLinkageForce(item)" [ngClass]="{'selectedLi': item.id == LinkageForceDetailInfo.id}"> |
|
<div class="name" [title]="item.name">{{item.name}}</div> |
|
<div class="integrity"> |
|
<span class="integrityNum"> |
|
{{accMul(item.integrityScore.toFixed(3),100,1)}}% |
|
</span> |
|
<div class="integrityColorDiv" [style]="integrity((item.integrityScore.toFixed(2) * 100).toFixed())"> |
|
</div> |
|
</div> |
|
<div class="deletebtn" (click)="deleteLinkageForc(item,$event)"><mat-icon>highlight_off</mat-icon></div> |
|
</li> |
|
</ul> |
|
</div> |
|
<div class="paginator"> |
|
<mat-paginator [length]="dataLength" [pageSize]="15" (page)="chagePage($event)"></mat-paginator> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
<div class="mapbox" id="linkageForcesSwiper"> |
|
<div class="mapcheckbox swiper-container"> |
|
|
|
<div class="swiper-wrapper"> |
|
<mat-checkbox (change)="checkBoxChange()" [(ngModel)]="item.isChecked" class="swiper-slide" color="primary" *ngFor="let item of checkBoxList"> |
|
<span> |
|
<img style="width: 16px;height:16px;" [src]="item.imgUrl" alt=""> |
|
{{item.name}} |
|
</span> |
|
</mat-checkbox> |
|
</div> |
|
<!-- 如果需要导航按钮 --> |
|
<div style="left: 2px;top: 52%;" class="swiper-button-prev"></div> |
|
<div style="top: 52%;"class="swiper-button-next"></div> |
|
|
|
</div> |
|
<div id="map" class="map" style="overflow: hidden;"> |
|
<div id="container"></div> |
|
<div class="gistopbox hidden" [ngClass]="{'show': isGisTopBox}"> |
|
<div class="inputBox"> |
|
<span>搜索: </span> |
|
<input name="position" [(ngModel)]="searchTitle" id="tipinput" class="positionInput" type="text" autocomplete="off"> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="detailsbox" [ngClass]="{'noHeight': isPutDown}" *ngIf="LinkageForceDetailInfo.linkageForceType || LinkageForceDetailInfo.linkageForceType == '0'"> |
|
<div class="masklayer" *ngIf="isMasklayer"> |
|
<mat-spinner [diameter]='30'></mat-spinner> |
|
<span>请等待...</span> |
|
</div> |
|
<div class="masklayer" *ngIf="isMasklayerUploading"> |
|
<mat-progress-bar class="progressbar" mode="determinate" [value]="progressBarValue"></mat-progress-bar> |
|
<span>上传中...({{progressBarValue}}%)</span> |
|
<button (click)="cancelUploading()" class="cancelbtn" mat-flat-button>取消上传</button> |
|
</div> |
|
<div class="masklayer" *ngIf="isMasklayerDownload"> |
|
<mat-progress-bar class="progressbar" mode="determinate" [value]="progressBarValue"></mat-progress-bar> |
|
<span>下载中...({{progressBarValue}}%)</span> |
|
</div> |
|
<div class="putDown" (click)="putDown()"> |
|
<img src="/assets/images/向下收起.png" alt=""> |
|
</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 class="btnbox"> |
|
<div class="uploadAttachment" *ngIf="tabIndex == 2"> |
|
<button mat-flat-button color="primary"> |
|
<mat-icon>attach_file</mat-icon> |
|
上传附件 |
|
</button> |
|
<a href="javascript:;" class="a-upload"> |
|
<input type="file" (change)='uploadAttachment($event)'> |
|
</a> |
|
</div> |
|
|
|
<span class="state" *ngIf="LinkageForceDetailInfo.contentVerify && LinkageForceDetailInfo.contentVerify.verifyState == 3">( |
|
<span *ngIf="LinkageForceDetailInfo.contentVerify.operation == 2" style="color: red;">删除</span> |
|
<span *ngIf="LinkageForceDetailInfo.contentVerify.operation == 0" >新增</span> |
|
<span *ngIf="LinkageForceDetailInfo.contentVerify.operation == 1" >更新</span> |
|
待审核)</span> |
|
<span [matTooltip]="LinkageForceDetailInfo.contentVerify.remark" class="state" style="color: rgb(92, 214, 78);" *ngIf="LinkageForceDetailInfo.contentVerify && LinkageForceDetailInfo.contentVerify.verifyState == 4">(审核通过)</span> |
|
<span [matTooltip]="LinkageForceDetailInfo.contentVerify.remark" class="state" *ngIf="LinkageForceDetailInfo.contentVerify && LinkageForceDetailInfo.contentVerify.verifyState == 5">(审核驳回)</span> |
|
|
|
<span class="submitAudit" *ngIf="!LinkageForceDetailInfo.contentVerify || LinkageForceDetailInfo.contentVerify.verifyState == 5 || LinkageForceDetailInfo.contentVerify.verifyState == 4" (click)="submitAudit()"><mat-icon>open_in_browser</mat-icon>提交审核</span> |
|
<span class="state" *ngIf="LinkageForceDetailInfo.contentVerify && LinkageForceDetailInfo.contentVerify.verifyState == 3" (click)="cancelAudit()">撤销审核</span> |
|
<span class="save state" *ngIf="!LinkageForceDetailInfo.contentVerify || LinkageForceDetailInfo.contentVerify.verifyState == 5 || LinkageForceDetailInfo.contentVerify.verifyState == 4" (click)="save()"><mat-icon>save</mat-icon>保存</span> |
|
<span class="close" (click)="close()"><mat-icon>close</mat-icon>关闭</span> |
|
</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)]="positionLngLat.x" disabled type="text" style="width: 26%;margin-right: 6%;"> |
|
<span> |
|
纬度: |
|
</span> |
|
<input [(ngModel)]="positionLngLat.y" disabled type="text" style="width: 26%;margin-right: 6%;"> |
|
<button (click)="setPosition()" style="width:85px;text-align: center;" mat-flat-button color="primary"> |
|
<mat-icon style="width: 20px;height: 20px;font-size: 20px;">place</mat-icon>位置 |
|
</button> |
|
</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" > |
|
<mat-icon class="deleteFile" (click)="deleteFile(item,$event)">highlight_off</mat-icon> |
|
<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> |