shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
上海预案管理平台
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.
114 Commits
7 Branches
0 Tags
32 MiB
 
 
 
 
 
Tree: 37ab4607d8
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '37ab4607d8'
${ noResults }
ShangHaiYuan-AnXin/src/app/data-collection/fire-force/fire-force.component.html

584 lines
32 KiB
Raw Blame History

<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)="addFireForce()" 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="fireForceTree" id="fireForceTree" *ngIf="isTreeView">
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" >
<mat-tree-node (click)="selectTreeNode(node)" [ngClass]="{'selectedTreeNode': node.id == selectedFireForceId}" *matTreeNodeDef="let node;" matTreeNodePadding matTreeNodePaddingIndent='10px'>
<button mat-icon-button disabled ></button>
<span class="nodename">{{node.name}}</span>
<div class="integrity">
<span class="integrityNum">
{{node.fireForceDetailInfo ? accMul(node.fireForceDetailInfo.integrityScore.toFixed(3),100,1) : 0}}%
</span>
<div class="integrityColorDiv" [style]="integrity(node.fireForceDetailInfo ? (node.fireForceDetailInfo.integrityScore.toFixed(2) * 100).toFixed(): 0)">
</div>
</div>
<div class="deletebtn" (click)="deleteFireForce(node,$event)"><mat-icon>highlight_off</mat-icon></div>
</mat-tree-node>
<mat-tree-node (click)="selectTreeNode(node)" [ngClass]="{'selectedTreeNode': node.id == selectedFireForceId}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodePaddingIndent='10px'>
<button mat-icon-button
matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<span class="nodename">{{node.name}}</span>
<div class="integrity">
<span class="integrityNum">
{{node.fireForceDetailInfo ? accMul(node.fireForceDetailInfo.integrityScore.toFixed(3),100,1) : 0}}%
</span>
<div class="integrityColorDiv" [style]="integrity(node.fireForceDetailInfo ? (node.fireForceDetailInfo.integrityScore.toFixed(2) * 100).toFixed(): 0)">
</div>
</div>
<div class="deletebtn" (click)="deleteFireForce(node,$event)"><mat-icon>highlight_off</mat-icon></div>
</mat-tree-node>
</mat-tree>
</div>
<div class="fireForceList" *ngIf="!isTreeView">
<ul>
<li [ngClass]="{'selectedLi': item.id == selectedFireForceId}" *ngFor="let item of allFireForceList;let key = index" (click)="selectTreeNode(item)">
<div class="name" [title]="item.name">{{item.name}}</div>
<div class="integrity">
<span class="integrityNum">
{{item.fireForceDetailInfo ? accMul(item.fireForceDetailInfo.integrityScore.toFixed(3),100,1) : 0}}%
</span>
<div class="integrityColorDiv" [style]="integrity(item.fireForceDetailInfo ? (item.fireForceDetailInfo.integrityScore.toFixed(2) * 100).toFixed(): 0)">
</div>
</div>
<div class="deletebtn" (click)="deleteFireForce(item,$event)"><mat-icon>highlight_off</mat-icon></div>
</li>
</ul>
</div>
</div>
</div>
<div class="mapbox">
<div class="mapcheckbox">
<mat-checkbox (change)="checkBoxChange()" [(ngModel)]="item.isChecked" color="primary" *ngFor="let item of checkBoxList">{{item.name}}</mat-checkbox>
</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" *ngIf="selectedFireForceLevel != null">
<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="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 class="btnbox">
<div class="uploadAttachment" *ngIf="tabIndex == 3">
<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="save" (click)="save()"><mat-icon>save</mat-icon>保存</span>
<span class="submitAudit"><mat-icon>open_in_browser</mat-icon>提交审核</span>
</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)]="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 [(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)]="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)]="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)]="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='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" >
<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>