shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

[完善]车辆和相关资料功能

tangshan
邵佳豪 3 years ago
parent
f616ae24be
commit
d8e0339c48
11 changed files with 1415 additions and 329 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/app/data-collection/data-collection.module.ts
  2. 2
      src/app/data-collection/fire-force/addFireForce.html
  3. 20
      src/app/data-collection/fire-force/addFireForceCar.html
  4. 280
      src/app/data-collection/fire-force/fire-force.component.html
  5. 247
      src/app/data-collection/fire-force/fire-force.component.scss
  6. 747
      src/app/data-collection/fire-force/fire-force.component.ts
  7. 85
      src/app/services/objects.service.ts
  8. 1
      src/app/working-area/working-area.component.ts
  9. BIN
      src/assets/images/add2.png
  10. BIN
      src/assets/images/uploadbtn.png
  11. 298
      src/styles.scss

4
src/app/data-collection/data-collection.module.ts
Unescape View File

@ -44,12 +44,12 @@ import { MatTreeModule } from '@angular/material/tree';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DataCollectionRoutingModule } from './data-collection.routing';
import { AddWater, WaterCollectionComponent } from './water-collection/water-collection.component';
import { AddFireForce, FireForceComponent, ViewDetails } from './fire-force/fire-force.component';
import { AddFireForce, AddFireForceCar, FireForceComponent, ViewDetails } from './fire-force/fire-force.component';
import { AddLinkageForce, LinkageForcesComponent, ViewDetails2 } from './linkage-forces/linkage-forces.component';
import { NzTreeModule } from 'ng-zorro-antd/tree';
import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
@NgModule({
declarations: [WaterCollectionComponent, FireForceComponent, LinkageForcesComponent, AddWater, AddFireForce, ViewDetails, AddLinkageForce, ViewDetails2],
declarations: [WaterCollectionComponent, FireForceComponent, LinkageForcesComponent, AddWater, AddFireForce, ViewDetails, AddLinkageForce, ViewDetails2,AddFireForceCar],
imports: [
CommonModule,
A11yModule,

2
src/app/data-collection/fire-force/addFireForce.html
Unescape View File

@ -2,7 +2,7 @@
<div class="topbox">
<span>新增消防力量</span>
</div>
<div class="contant">
<div class="content">
<div (click)="selecteAddType(item,key)" *ngFor="let item of addList;let key = index" [ngClass]="{selectedDiv: item.id == selectedFireForceTypeIndex}">
<!-- <img [src]="item.src" alt=""> -->
{{item.name}}

20
src/app/data-collection/fire-force/addFireForceCar.html
Unescape View File

@ -0,0 +1,20 @@
<div class="addCarBox">
<div class="topbox">
<span>新增消防车辆</span>
</div>
<div class="content">
<!-- <div (click)="selecteAddType(item,key)" *ngFor="let item of addList;let key = index" [ngClass]="{selectedDiv: item.id == selectedFireForceTypeIndex}">
{{item.name}}
</div> -->
<form class="example-form" (ngSubmit)="onSubmit(form.value)" #form="ngForm">
<mat-form-field class="example-full-width">
<mat-label>车辆名称</mat-label>
<input name="carName" matInput [(ngModel)]="carName" required>
</mat-form-field>
</form>
</div>
<div class="btnbox">
<button type="submit" mat-flat-button color="primary" [disabled]='form.invalid' (click)="onSubmit(form.value)">确定</button>
<button type="button" mat-flat-button style="background-color: #F2F4F6;" mat-dialog-close>取消</button>
</div>
</div>

280
src/app/data-collection/fire-force/fire-force.component.html
Unescape View File

@ -36,16 +36,15 @@
</div>
</div>
<div style="height: 1px;width: 100%;background-color: #F2F4F6;"></div>
<div class="contantbox">
<div class="contentbox">
<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'>
<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>
@ -148,17 +147,19 @@
<div (click)="selectedTab(1)" [ngClass]="{'selectedBtn': tabIndex == 1}">
<span>详情</span>
</div>
<div (click)="selectedTab(2)" [ngClass]="{'selectedBtn': tabIndex == 2}">
<!-- <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="btnbox">
<div class="goback" (click)="goback()" *ngIf="carPageIndex == 1"><img
src="/assets/images/goback.png" alt=""> 返回</div>
<div class="uploadAttachment" *ngIf="tabIndex == 3">
<!-- <div class="goback" (click)="goback()" *ngIf="carPageIndex == 1 && tabIndex == 2"><img
src="/assets/images/goback.png" alt=""> 返回
</div> -->
<!-- <span *ngIf="tabIndex == 2" type="submit" (click)="saveCarData(form.value)">保存车辆</span> -->
<!-- <div class="uploadAttachment" *ngIf="tabIndex == 3">
<button mat-flat-button color="primary">
<mat-icon>attach_file</mat-icon>
上传附件
@ -166,7 +167,7 @@
<a href="javascript:;" class="a-upload">
<input type="file" (change)='uploadAttachment($event)'>
</a>
</div>
</div> -->
<!-- <span class="state" *ngIf="selectedFireForce.contentVerify && selectedFireForce.contentVerify.verifyState == 3">(
<span *ngIf="selectedFireForce.contentVerify.operation == 2" style="color: red;">删除</span>
<span *ngIf="selectedFireForce.contentVerify.operation == 0" >新增</span>
@ -184,7 +185,7 @@
</div>
</div>
<!-- 详情 -->
<div class="contant" *ngIf="tabIndex == 1">
<div class="content" *ngIf="tabIndex == 1">
<!-- 总队 支队 联系方式不同-->
<div *ngIf="selectedFireForceLevel == 0 || selectedFireForceLevel == 1">
<p>基本信息</p>
@ -218,8 +219,8 @@
<span>
备注:
</span>
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 84%;" name=""
id="" cols="30" rows="10"></textarea>
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 84%;"
cols="30" rows="10"></textarea>
</mat-grid-tile>
</mat-grid-list>
<p>位置信息</p>
@ -349,8 +350,8 @@
<span>
备注:
</span>
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 84%;" name=""
id="" cols="30" rows="10"></textarea>
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 84%;"
cols="30" rows="10"></textarea>
</mat-grid-tile>
</mat-grid-list>
<p>位置信息</p>
@ -539,8 +540,8 @@
<span>
备注:
</span>
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 82%;" name=""
id="" cols="30" rows="10"></textarea>
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 82%;"
cols="30" rows="10"></textarea>
</mat-grid-tile>
</mat-grid-list>
<p>位置信息</p>
@ -605,8 +606,8 @@
</div>
</div>
<!-- 车辆 -->
<div class="contant" *ngIf="tabIndex == 2">
<div class="carOne carcontent" *ngIf="carPageIndex == 0">
<!-- <div class="content" id="carcontent" *ngIf="tabIndex == 2">
<div class="carOne" *ngIf="carPageIndex == 0">
<div class="cartopbox">
<div class="add">
<div>
@ -614,9 +615,9 @@
labelPosition='before'>列表过滤</mat-slide-toggle>
</div>
<div>
<button (click)="reset()" style="width: 68px;margin-right: 12px;" mat-flat-button
<button (click)="resetCarList()" style="width: 68px;margin-right: 12px;" mat-flat-button
color="primary">重置</button>
<button (click)="addFireForce()" style="width: 68px;" mat-flat-button
<button (click)="addFireForceCar()" style="width: 68px;" mat-flat-button
color="primary">新增</button>
</div>
</div>
@ -631,15 +632,19 @@
<span>
所属队站:
</span>
<input type="text" placeholder="请选择" [(ngModel)]="carSearchForm.organization" />
<nz-tree-select [nzDropdownClassName]="'carTreeDropdown'"
[nzExpandedKeys]="expandOrKeys" [nzNodes]="selectOrganizationTree" nzShowSearch
nzPlaceHolder="请选择" [(ngModel)]="carSearchForm.organization"
(ngModelChange)="onChange($event)"></nz-tree-select>
</div>
<div class="inputbox">
<span>
车辆类别:
</span>
<nz-tree-select style="width: 250px" [nzExpandedKeys]="expandKeys" [nzNodes]="nodes"
nzShowSearch nzPlaceHolder="Please select" [(ngModel)]="value"
(ngModelChange)="onChange($event)"></nz-tree-select>
<nz-tree-select #treeCarTypeSelected [nzDropdownClassName]="'carTreeDropdown'"
[nzExpandedKeys]="expandCarTypeKeys" [nzNodes]="carTypeList" nzShowSearch
nzPlaceHolder="请选择" [(ngModel)]="carSearchForm.carType"
(ngModelChange)="onChangeCarType($event)"></nz-tree-select>
</div>
<div class="inputbox">
<span>
@ -652,7 +657,8 @@
</option>
</select>
<div class="searchbtn">
<button (click)="searchList()" style="width: 100%;" mat-flat-button color="primary">
<button (click)="searchCarList()" style="width: 100%;" mat-flat-button
color="primary">
<mat-icon style="width: 20px;height: 20px;font-size: 20px;">search</mat-icon>搜索
</button>
</div>
@ -669,7 +675,7 @@
</tr>
<tr *ngFor="let item of carsList" class="caritem" (click)="openCarDetails(item)">
<td class="td1">{{item.name}}</td>
<td class="td2">{{item.organization}}</td>
<td class="td2">{{item.organizationName}}</td>
<td>
<div class="integrity">
<span class="integrityNum">
@ -681,35 +687,227 @@
</div>
</td>
<td>
<mat-icon class="deleteFile">highlight_off</mat-icon>
<mat-icon (click)="deleteCar(item,$event)" class="deleteFile">highlight_off
</mat-icon>
</td>
</tr>
</table>
</div>
<div class="pagingDevice">
<mat-paginator [length]="dataLength" [pageSize]="16" (page)="chagePage($event)"></mat-paginator>
<mat-paginator [length]="carDataLength" [pageSize]="16" (page)="carListChagePage($event)">
</mat-paginator>
</div>
</div>
<form class="example-form" (ngSubmit)="saveCarData(form.invalid)" #form="ngForm">
<div class="carTwo" *ngIf="carPageIndex == 1">
<p>基本信息</p>
<p class="expandP">基本信息 <button type="submit" matRipple>保存车辆信息</button></p>
<div class="carTwoItemBox">
<div>
<span><span style="color: red;">*</span>车辆类别：</span>
<nz-tree-select #carDetailsTypeSelected [nzDropdownClassName]="'carTreeDropdown'"
[nzExpandedKeys]="expandCarTypeKeys" [nzNodes]="carTypeList" nzShowSearch
nzPlaceHolder="请选择" [(ngModel)]="carData.basicInfo.carType"
(ngModelChange)="carDetailsTypeChange($event)" required name="carType"></nz-tree-select>
</div>
<div>
<span><span style="color: red;">*</span>车辆类别</span>
<select class="shortselect" [(ngModel)]="carSearchForm.integrityNum"
[ngClass]="{'gray': carSearchForm.integrityNum == ''}">
<option value='' selected disabled style='display:none;'>请选择</option>
<option *ngFor="let item of listIntegrityNum" [value]="item.id">{{item.name}}</option>
</select>
<span><span style="color: red;">*</span>车辆名称：</span>
<input type="text" name="carName" required [(ngModel)]="carData.basicInfo.carName">
</div>
<div>
<span><span style="color: red;">*</span>车牌号：</span>
<input type="text" name="carNumber" required [(ngModel)]="carData.basicInfo.carNumber">
</div>
<div>
<span><span style="color: red;">*</span>所属队站：</span>
<nz-tree-select required [nzDropdownClassName]="'carTreeDropdown'"
[nzExpandedKeys]="expandOrKeys" [nzNodes]="selectOrganizationTree" nzShowSearch
nzPlaceHolder="请选择" [(ngModel)]="carData.basicInfo.carOrganization"
(ngModelChange)="onChange($event)" name="carOrganization">
</nz-tree-select>
</div>
</div>
<p>作战用信息</p>
<p>车载灭火剂</p>
<p>消防器材</p>
<div class="carTwoItemBox">
<div>
<span>水泵流量：</span>
<div class="unitDiv">
<input type="text" name="pumpFlow" [(ngModel)]="carData.fightInfo.pumpFlow">
<span class="unit">L/s</span>
</div>
</div>
<div>
<span>消防炮流量：</span>
<div class="unitDiv">
<input type="text" name="fireGunFlow" [(ngModel)]="carData.fightInfo.fireGunFlow">
<span class="unit">L/s</span>
</div>
</div>
<div>
<span>水泵额定压力：</span>
<div class="unitDiv">
<input type="text" name="pumpPressure" [(ngModel)]="carData.fightInfo.pumpPressure">
<span class="unit">Mpa</span>
</div>
</div>
<div>
<span>载水量：</span>
<div class="unitDiv">
<input type="text" name="waterCapacity"
[(ngModel)]="carData.fightInfo.waterCapacity">
<span class="unit">吨</span>
</div>
</div>
<div>
<span>举高类车辆高度：</span>
<div class="unitDiv">
<input type="text" name="carHeight" [(ngModel)]="carData.fightInfo.carHeight">
<span class="unit">米</span>
</div>
</div>
<div>
<span>车辆状态：</span>
<input type="text" name="carState" [(ngModel)]="carData.fightInfo.carState">
</div>
<div>
<span>备注：</span>
<textarea name="remark" [(ngModel)]="carData.fightInfo.remark" cols="30"
rows="10"></textarea>
</div>
<div>
<span>车辆照片：</span>
<div class="uploadbox">
<img class="img"
[src]="carData.fightInfo.carPhoto[0] ? carData.fightInfo.carPhoto[0] : '/assets/images/noImg.png'"
alt="">
<input name="uploadinput" class="uploadinput" type="file"
(change)='uploadCarImg($event)'>
<div class="uploadbtn"><img src="/assets/images/uploadbtn.png" alt=""> 上传照片</div>
</div>
</div>
</div>
<p class="expandP">
<span>
<span style="margin-right: 8px;">车载灭火剂</span>
<mat-slide-toggle color="primary" name="expand1"
[(ngModel)]="carData.carExtinguishant.isExpand">
</mat-slide-toggle>
</span>
<span *ngIf="carData.carExtinguishant.isExpand" class="add"
(click)="addCarDetailsItem('carExtinguishant')">
<img src="/assets/images/add2.png" alt=""> 新增
</span>
</p>
<div class="carTwoItemBox2" *ngIf="carData.carExtinguishant.isExpand">
<div class="item" *ngFor="let item of carData.carExtinguishant.data;let key = index">
<div>
<span><span style="color: red;">*</span>灭火剂类型：</span>
<nz-tree-select required [nzDropdownClassName]="'carTreeDropdown'"
[nzExpandedKeys]="expandOrKeys" [nzNodes]="extinguishantTypeList" nzShowSearch
nzPlaceHolder="请选择" (ngModelChange)="onChange($event)"
[name]="'exextinguishantType' + key" [(ngModel)]="item.extinguishantType">
</nz-tree-select>
</div>
<div>
<span><span style="color: red;">*</span>灭火剂名称：</span>
<input [name]="'exextinguishantName' + key" type="text"
[(ngModel)]="item.extinguishantName">
</div>
<div>
<span><span style="color: red;">*</span>所属队站：</span>
<nz-tree-select required [nzDropdownClassName]="'carTreeDropdown'"
[nzExpandedKeys]="expandOrKeys" [nzNodes]="selectOrganizationTree" nzShowSearch
nzPlaceHolder="请选择" (ngModelChange)="onChange($event)"
[name]="'exextinguishantOr' + key" [(ngModel)]="item.extinguishantOr">
</nz-tree-select>
</div>
<div>
<span>混合比：</span>
<div class="unitDiv">
<input type="text" [name]="'exmixingRatio' + key"
[(ngModel)]="item.mixingRatio">
<span class="unit">%</span>
</div>
</div>
<div>
<span>车载量：</span>
<div class="unitDiv">
<input type="text" [name]="'excapacity' + key" [(ngModel)]="item.capacity">
<span class="unit">吨</span>
</div>
</div>
<div>
<span>生产厂家：</span>
<input type="text" [name]="'exmanufacturer' + key" [(ngModel)]="item.manufacturer">
</div>
<div class="remark">
<span>备注：</span>
<textarea cols="30" rows="10" [name]="'exremark' + key"
[(ngModel)]="item.remark"></textarea>
<span style="color: red;margin-left: 8px;cursor: pointer;"
(click)="deleteCarDetailsItem(carData.carExtinguishant.data,key)">删除</span>
</div>
</div>
</div>
<p class="expandP">
<span>
<span style="margin-right: 8px;">消防器材</span>
<mat-slide-toggle color="primary" name="expand2"
[(ngModel)]="carData.fireEquipment.isExpand">
</mat-slide-toggle>
</span>
<span *ngIf="carData.fireEquipment.isExpand" class="add"
(click)="addCarDetailsItem('fireEquipment')">
<img src="/assets/images/add2.png" alt=""> 新增
</span>
</p>
<div class="carTwoItemBox3" *ngIf="carData.fireEquipment.isExpand">
<div class="item" *ngFor="let item of carData.fireEquipment.data;let key = index">
<div>
<span><span style="color: red;">*</span>器材类型：</span>
<nz-tree-select required [nzDropdownClassName]="'carTreeDropdown'"
[nzExpandedKeys]="expandOrKeys" [nzNodes]="fireEquipmentTypeList" nzShowSearch
nzPlaceHolder="请选择" (ngModelChange)="onChange($event)"
[name]="'eqequipmentType' + key" [(ngModel)]="item.equipmentType">
</nz-tree-select>
</div>
<div>
<span><span style="color: red;">*</span>器材名称：</span>
<input type="text" [name]="'eqequipmentName' + key"
[(ngModel)]="item.equipmentName">
</div>
<div>
<span><span style="color: red;">*</span>所属队站：</span>
<nz-tree-select required [nzDropdownClassName]="'carTreeDropdown'"
[nzExpandedKeys]="expandOrKeys" [nzNodes]="selectOrganizationTree" nzShowSearch
nzPlaceHolder="请选择" (ngModelChange)="onChange($event)"
[name]="'eqequipmentOr' + key" [(ngModel)]="item.equipmentOr">
</nz-tree-select>
</div>
<div class="width50">
<span>车辆装载数：</span>
<div class="unitDiv">
<input type="text" [name]="'eqcapacity' + key" [(ngModel)]="item.capacity">
<span class="unit">件</span>
</div>
</div>
<div class="width50">
<span>生产厂家：</span>
<input type="text" [name]="'eqmanufacturer' + key" [(ngModel)]="item.manufacturer">
</div>
<div class="remark">
<span>备注：</span>
<textarea cols="30" rows="10" [name]="'eqremark' + key"
[(ngModel)]="item.remark"></textarea>
<span style="color: red;margin-left: 8px;cursor: pointer;"
(click)="deleteCarDetailsItem(carData.fireEquipment.data,key)">删除</span>
</div>
</div>
</div>
</div>
</form>
</div> -->
<!-- 相关资料 -->
<div class="contant" *ngIf="tabIndex == 3">
<!-- <div class="content" *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">
@ -731,7 +929,7 @@
<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>

247
src/app/data-collection/fire-force/fire-force.component.scss
Unescape View File

@ -1,6 +1,4 @@
.box {
width: 100%;
height: 100%;
background-color: #f2f4f6;
display: flex;
box-sizing: border-box;
@ -61,7 +59,7 @@
}
}
}
.contantbox {
.contentbox {
flex: 1;
overflow-y: auto;
display: flex;
@ -361,12 +359,12 @@
.close {
margin-right: 30px;
}
.goback{
.goback {
cursor: pointer;
display: flex;
align-items: center;
color: #2196f3;
img{
img {
width: 14px;
height: 14px;
margin-right: 5px;
@ -375,7 +373,7 @@
}
}
}
.contant {
.content {
width: 100%;
height: 460px;
overflow-y: auto;
@ -396,7 +394,7 @@
height: 30px;
line-height: 30px;
box-sizing: border-box;
padding: 0 12px;
padding: 0 9px;
width: 60%;
margin-left: 5px;
border: 1px solid #ebebeb;
@ -408,6 +406,8 @@
height: 85%;
border: 1px solid #ebebeb;
border-radius: 5px;
box-sizing: border-box;
padding: 3px 9px;
}
.longinput {
width: 74%;
@ -503,6 +503,12 @@
display: block;
}
}
}
.carOne {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
//车辆头部
.cartopbox {
max-height: 200px;
@ -543,10 +549,11 @@
box-sizing: border-box;
padding: 0 8px;
}
.shortselect{
.shortselect {
width: 68.5%;
}
.searchbtn{
.searchbtn {
margin-left: 20px;
}
.gray {
@ -555,40 +562,34 @@
}
}
}
}
.carcontent{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.carList{
.carList {
flex: 1;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 22px;
border: 1px solid #F2F4F6;
table{
border: 1px solid #f2f4f6;
table {
width: 100%;
border-spacing:0px;
tr{
border-spacing: 0px;
tr {
height: 33px;
width: 100%;
td:nth-child(1){
td:nth-child(1) {
width: 46%;
}
td:nth-child(2){
td:nth-child(2) {
width: 26%;
}
td:nth-child(3){
td:nth-child(3) {
width: 26%;
}
td:nth-child(4){
td:nth-child(4) {
width: 2%;
display: flex;
align-items: center;
height: 33px;
}
td{
td {
border: none;
.integrity {
height: 18px;
@ -608,28 +609,195 @@
height: 100%;
}
}
.deleteFile{
.deleteFile {
cursor: pointer;
}
}
.td1,.td2{
color: #2196F3;
.td1,
.td2 {
color: #2196f3;
}
}
.caritem:hover{
.caritem:hover {
border: 0px;
cursor: default;
background-color: #d2eafd;
}
}
}
.pagingDevice{
.pagingDevice {
width: 100%;
height: 40px;
}
}
.carTwo {
width: 100%;
height: 100%;
p {
margin-bottom: 10px;
}
.expandP {
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding-right: 18px;
span {
display: flex;
align-items: center;
}
.add {
cursor: pointer;
img {
margin-right: 3px;
}
}
button{
background-color: #2196f3;
height: 32px;
line-height: 32px;
color: white;
border: 0;
border-radius: 4px;
cursor: pointer;
}
}
.carTwoItemBox {
display: flex;
flex-wrap: wrap;
div {
width: 50%;
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 10px;
input,
select {
height: 32px !important;
line-height: 32px;
width: 75% !important;
border: 1px solid #ebebeb;
border-radius: 4px;
margin-left: 0px;
}
textarea {
width: 75.1%;
height: 100px;
border-radius: 4px;
margin-left: 0px;
}
.unitDiv {
position: relative;
width: 75% !important;
margin-bottom: 0px;
input,
select {
width: 100% !important;
}
.unit {
position: absolute;
right: 13px;
top: 4px;
color: #000000;
opacity: 0.4;
}
}
}
.uploadbox {
width: 75%;
display: flex;
justify-content: flex-start;
align-items: flex-end;
margin-bottom: 0px;
position: relative;
.img {
width: 150px;
height: 100px;
}
.uploadbtn,.uploadinput {
width: 110px !important;
height: 30px;
background: #2196f3;
opacity: 1;
border-radius: 4px;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
position: absolute;
left: 160px;
bottom: 0px;
z-index: 0;
}
.uploadinput{
display: inline-block;
opacity: 0;
z-index: 1;
}
}
}
.carTwoItemBox2,
.carTwoItemBox3 {
.item {
display: flex;
flex-wrap: wrap;
div {
width: 33%;
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 10px;
input,
select {
height: 32px !important;
line-height: 32px;
width: 70% !important;
border: 1px solid #ebebeb;
border-radius: 4px;
margin-left: 0px;
}
textarea {
width: 75.1%;
height: 100px;
border-radius: 4px;
margin-left: 0px;
}
.unitDiv {
position: relative;
width: 70% !important;
margin-bottom: 0px;
input,
select {
width: 100% !important;
}
.unit {
position: absolute;
right: 13px;
top: 4px;
color: #000000;
opacity: 0.4;
}
}
}
.remark {
width: 99%;
textarea {
width: 86.9%;
}
}
.width50 {
width: 50%;
input,
select {
width: 80% !important;
}
.unitDiv {
width: 80% !important;
}
}
}
}
}
.masklayer {
position: absolute;
left: 0;
@ -666,9 +834,9 @@
}
}
.addWaterBox {
.addWaterBox,.addWaterBox {
width: 260px;
height: 284px;
height: 200px;
display: flex;
flex-direction: column;
.topbox {
@ -680,7 +848,7 @@
color: #ffffff;
font-size: 15px;
}
.contant {
.content {
flex: 1;
box-sizing: border-box;
padding: 0 30px;
@ -725,6 +893,9 @@
}
}
}
.addWaterBox{
height: 284px;
}
@media screen and (max-width: 1400px) {
.box {
@ -733,7 +904,7 @@
}
.listbox {
width: 310px;
.contantbox {
.contentbox {
.waterList {
li {
.address {
@ -787,11 +958,9 @@
.close {
margin-right: 12px;
}
}
}
.contant {
.content {
height: 300px;
p {

747
src/app/data-collection/fire-force/fire-force.component.ts
Unescape View File

@ -1,6 +1,6 @@
import { FlatTreeControl } from '@angular/cdk/tree';
import { HttpClient } from '@angular/common/http';
import { Inject, Renderer2 } from '@angular/core';
import { Inject, Renderer2, ViewChild } from '@angular/core';
import { ElementRef } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@ -12,7 +12,9 @@ import { Console } from 'console';
import { TreeService } from 'src/app/http-interceptors/tree.service';
import Viewer from 'viewerjs'
declare var CryptoJS
import { ObjectsService } from "src/app/services/objects.service";
import { NzTreeSelectComponent } from 'ng-zorro-antd/tree-select'
import { DateAdapter } from '@angular/material/core';
@Component({
selector: 'app-fire-force',
templateUrl: './fire-force.component.html',
@ -20,7 +22,10 @@ declare var CryptoJS
})
export class FireForceComponent implements OnInit {
constructor(private tree: TreeService, public snackBar: MatSnackBar, private http: HttpClient, private elementRef: ElementRef, public renderer2: Renderer2, public dialog: MatDialog) { }
@ViewChild('treeCarTypeSelected') treeCarTypeSelected:NzTreeSelectComponent
@ViewChild('carDetailsTypeSelected') carDetailsTypeSelected:NzTreeSelectComponent
constructor(private tree: TreeService, public snackBar: MatSnackBar, private http: HttpClient, private elementRef: ElementRef, public renderer2: Renderer2, public dialog: MatDialog, private objectsSrv: ObjectsService) { }
isCheckedOfSearchDiv: boolean = true//列表过滤滑块
slideChange(e) {
@ -58,176 +63,504 @@ export class FireForceComponent implements OnInit {
this.isCarCheckedOfSearchDiv = e.checked
}
carsList: any = [
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.92 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.72 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.52 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.32 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.02 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.92 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.92 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.92 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.92 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.92 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.92 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.92 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.92 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.92 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.92 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.92 },
{ id: 0, name: '【沪C5869应急】沃尔沃18米高喷车', organization: '浦东支队', integrityScore: 0.92 },
]
dataLength: any //获取的数据一共多少条
PageNumber: any = 1 //当前第几页
//分页事件
chagePage(e) {
this.PageNumber = e.pageIndex + 1
carListChagePage(e) {
this.carListPageNumber = e.pageIndex + 1
// this.getAllWaterData()
}
carDataLength: any //获取的数据一共多少条
carListPageNumber: any = 1 //当前第几页
getCarList() {
let MinIntegrity = 0
let MaxIntegrity = 1.1
if (this.searchForm.integrityNum == '0') {
MinIntegrity = 0
MaxIntegrity = 0.5
} else if (this.searchForm.integrityNum == '1') {
MinIntegrity = 0.5
MaxIntegrity = 0.6
} else if (this.searchForm.integrityNum == '2') {
MinIntegrity = 0.6
MaxIntegrity = 0.7
} else if (this.searchForm.integrityNum == '3') {
MinIntegrity = 0.7
MaxIntegrity = 0.8
} else if (this.searchForm.integrityNum == '4') {
MinIntegrity = 0.8
MaxIntegrity = 0.9
} else if (this.searchForm.integrityNum == '5') {
MinIntegrity = 0.9
MaxIntegrity = 1.1
} else if (this.searchForm.integrityNum == '-1') {
MinIntegrity = 0
MaxIntegrity = 1.1
}
let params: any = {
Keyword: this.carSearchForm.name || '',
OrganizationId: this.carSearchForm.organization || '',
Category: this.treeCarTypeSelected && this.treeCarTypeSelected.getSelectedNodeList().length!=0 ? this.treeCarTypeSelected.getSelectedNodeList()[0].origin.title : '',
MinIntegrity: MinIntegrity,
MaxIntegrity: MaxIntegrity,
PageSize: 16,
PageNumber: this.carListPageNumber
}
console.log(params)
// console.log(this.treeCarTypeSelected.getSelectedNodeList()[0].origin.title)
this.http.get('/api/FireFightingVehicles', { params: params }).subscribe((data: any) => {
console.log('车辆列表', data)
this.carDataLength = data.totalCount
this.carsList = data.items
})
}
//重置车辆列表
resetCarList() {
this.carSearchForm = {
name: '',
organization: this.selectedFireForceId,
carType: '',
integrityNum: ''
}
this.getCarList()
}
addFireForceCar() {
let data = {
organization: this.selectedFireForceId
}
const dialogRef = this.dialog.open(AddFireForceCar, {
data: data,
id: 'addCar'
});
dialogRef.afterClosed().subscribe(
data => {
this.resetCarList()
this.getCarList()
}
);
}
//删除车辆
deleteCar(item, e) {
e.stopPropagation()
let isDelete = window.confirm(`确定要删除${item.name}车辆吗?`)
if (isDelete) {
this.http.delete(`/api/FireFightingVehicles/${item.id}`).subscribe(data => {
let config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('删除成功', '确定', config);
this.getCarList()
})
}
}
//进入车辆详情页
carPageIndex: number = 0
carDetailsId: string
carDetailsData: any
openCarDetails(item) {
console.log(item)
this.carPageIndex = 1
this.carDetailsId = item.id
this.carDetailsData = item
//消防器材
item.equipmentData ? this.carData.fireEquipment = JSON.parse(item.equipmentData) : this.carData.fireEquipment.data[0].equipmentOr = item.organizationId
//灭火剂
item.extinguishingAgentData ? this.carData.carExtinguishant = JSON.parse(item.extinguishingAgentData) : this.carData.carExtinguishant.data[0].extinguishantOr = item.organizationId
//作战用行动
item.combatInformationData ? this.carData.fightInfo = JSON.parse(item.combatInformationData) : null
this.carData.basicInfo.carName = item.name
this.carData.basicInfo.carOrganization = item.organizationId
this.carData.basicInfo.carNumber = item.registrationNumber
for (let index = 0; index < this.carTypeList.length; index++) {
const element = this.carTypeList[index];
if(element.title == item.category){
this.carData.basicInfo.carType = element.key
return
}
if(element.children && element.children.length != 0){
for (let i = 0; i < element.children.length; i++) {
const item = element.children[i];
if(item.title == item.category){
this.carData.basicInfo.carType = item.key
return
}
}
}
}
}
//返回车辆列表页
goback() {
this.carPageIndex = 0
this.clearCarDetails()
}
//重置车辆详情
clearCarDetails() {
this.carData = {
basicInfo: {
carType: '',//车辆类别
carName: '',
carNumber: '',
carOrganization: ''
},
fightInfo: {
pumpFlow: '',//水泵流量
fireGunFlow: '',//消防炮流量
pumpPressure: '',//水泵额定压力
waterCapacity: '',//载水量
carHeight: '',//车辆高度
carState: '',//车辆状态
remark: '',//备注
carPhoto: []//车辆照片
},
carExtinguishant: {//车载灭火剂
isExpand: null,
data: [
{
extinguishantType: '',//灭火剂类型
extinguishantName: '',//灭火剂名称
extinguishantOr: '',//所属队站
mixingRatio: '',//混合比
capacity: '',//车载量
manufacturer: '',//成产厂家
remark: ''//备注
}
]
},
fireEquipment: {//消防器材
isExpand: null,
data: [
{
equipmentType: '',//器材类别
equipmentName: '',//器材名称
equipmentOr: '',//所属队站
capacity: '',//车载量
manufacturer: '',//成产厂家
remark: ''//备注
}
]
}
}
}
//消防车类型
carTpyeList: any = [
carTypeList: any = [
{
name: '灭火类消防车',
title: '灭火类消防车',
key: '1',
children: [
{ name: '水罐车' },
{ name: '泡沫车' },
{ name: '高倍数泡沫车' },
{ name: '干粉车' },
{ name: '干粉泡沫联用车' },
{ name: '干粉水联用车' },
{ name: '干粉二氧化碳联用车' },
{ name: '涡喷车' },
{ name: '液氮车' },
{ name: '二氧化碳车' },
{ name: '其他灭火消防车' }
{ title: '水罐车', key: '11', isLeaf: true },
{ title: '泡沫车', key: '12', isLeaf: true },
{ title: '高倍数泡沫车', key: '13', isLeaf: true },
{ title: '干粉车', key: '14', isLeaf: true },
{ title: '干粉泡沫联用车', key: '15', isLeaf: true },
{ title: '干粉水联用车', key: '16', isLeaf: true },
{ title: '干粉二氧化碳联用车', key: '17', isLeaf: true },
{ title: '涡喷车', key: '18', isLeaf: true },
{ title: '液氮车', key: '19', isLeaf: true },
{ title: '二氧化碳车', key: '110', isLeaf: true },
{ title: '其他灭火消防车', key: '111', isLeaf: true }
]
},
{
name: '举高类消防车',
title: '举高类消防车',
key: '2',
children: [
{ name: '高喷车' },
{ name: '曲臂登高车' },
{ name: '直臂登高车' },
{ name: '其他举高消防车' }
{ title: '高喷车', key: '21', isLeaf: true },
{ title: '曲臂登高车', key: '22', isLeaf: true },
{ title: '直臂登高车', key: '23', isLeaf: true },
{ title: '其他举高消防车', key: '24', isLeaf: true }
]
},
{
name: '专勤类消防车',
title: '专勤类消防车',
key: '3',
children: [
{ name: '抢险救援车' },
{ name: '侦检车' },
{ name: '勘察车' },
{ name: '排烟车' },
{ name: '照明车' },
{ name: '宣传车' },
{ name: '排烟照明车' },
{ name: '通信指挥车' },
{ name: '有毒气体处置车' },
{ name: '防化消防车' },
{ name: '挖掘车' },
{ name: '铲车' },
{ name: '破拆车' },
{ name: '其他专勤消防车' }
{ title: '抢险救援车', key: '31', isLeaf: true },
{ title: '侦检车', key: '32', isLeaf: true },
{ title: '勘察车', key: '33', isLeaf: true },
{ title: '排烟车', key: '34', isLeaf: true },
{ title: '照明车', key: '35', isLeaf: true },
{ title: '宣传车', key: '36', isLeaf: true },
{ title: '排烟照明车', key: '37', isLeaf: true },
{ title: '通信指挥车', key: '38', isLeaf: true },
{ title: '有毒气体处置车', key: '39', isLeaf: true },
{ title: '防化消防车', key: '310', isLeaf: true },
{ title: '挖掘车', key: '311', isLeaf: true },
{ title: '铲车', key: '312', isLeaf: true },
{ title: '破拆车', key: '313', isLeaf: true },
{ title: '其他专勤消防车', key: '314', isLeaf: true }
]
},
{
name: '后援类消防车',
title: '后援类消防车',
key: '4',
children: [
{ name: '饮食保障车' },
{ name: '卫勤保障车' },
{ name: '排障车' },
{ name: '装备抢修车' },
{ name: '拖车车' },
{ name: '运兵车' },
{ name: '运输车' },
{ name: '运渣车' },
{ name: '吊车' },
{ name: '移动供气车' },
{ name: '移动供液车' },
{ name: '油料供给车' },
{ name: '远程供水车(水泵)' },
{ name: '远程供水车(水带铺设)' },
{ name: '宿营车' },
{ name: '发电车' },
{ name: '淋浴车' },
{ name: '其他后援消防车' }
{ title: '饮食保障车', key: '41', isLeaf: true },
{ title: '卫勤保障车', key: '42', isLeaf: true },
{ title: '排障车', key: '43', isLeaf: true },
{ title: '装备抢修车', key: '44', isLeaf: true },
{ title: '拖车车', key: '45', isLeaf: true },
{ title: '运兵车', key: '46', isLeaf: true },
{ title: '运输车', key: '47', isLeaf: true },
{ title: '运渣车', key: '48', isLeaf: true },
{ title: '吊车', key: '49', isLeaf: true },
{ title: '移动供气车', key: '410', isLeaf: true },
{ title: '移动供液车', key: '411', isLeaf: true },
{ title: '油料供给车', key: '412', isLeaf: true },
{ title: '远程供水车(水泵)', key: '413', isLeaf: true },
{ title: '远程供水车(水带铺设)', key: '414', isLeaf: true },
{ title: '宿营车', key: '415', isLeaf: true },
{ title: '发电车', key: '416', isLeaf: true },
{ title: '淋浴车', key: '417', isLeaf: true },
{ title: '其他后援消防车', key: '418', isLeaf: true }
]
},
{
name: '机场消防车',
title: '机场消防车',
key: '5',
children: [
{ name: '机场快速调动消防车' },
{ name: '机场主力泡沫消防车' },
{ name: '其他机场消防车' },
{ name: '防爆消防车' },
{ name: '轨道消防车(GD)' }
{ title: '机场快速调动消防车', key: '51', isLeaf: true },
{ title: '机场主力泡沫消防车', key: '52', isLeaf: true },
{ title: '其他机场消防车', key: '53', isLeaf: true },
{ title: '防爆消防车', key: '54', isLeaf: true },
{ title: '轨道消防车(GD)', key: '55', isLeaf: true }
]
},
{
name: '消防摩托车',
title: '消防摩托车',
key: '6',
children: [
{ name: '灭火消防摩托车' },
{ name: '抢险救援摩托车' },
{ name: '其他消防摩托车' }
{ title: '灭火消防摩托车', key: '61', isLeaf: true },
{ title: '抢险救援摩托车', key: '62', isLeaf: true },
{ title: '其他消防摩托车', key: '63', isLeaf: true }
]
},
{
name: '联动类车辆',
title: '联动类车辆',
key: '7',
children: [
{ name: '急救车' },
{ name: '警用指挥车' },
{ name: '警用巡逻车' },
{ name: '警用摩托车' },
{ name: '电力抢修车' },
{ name: '水力抢修车' },
{ name: '燃气抢修车' },
{ name: '特种工程车' },
{ name: '环保监测车' },
{ name: '其他联动车辆' }
{ title: '急救车', key: '71', isLeaf: true },
{ title: '警用指挥车', key: '72', isLeaf: true },
{ title: '警用巡逻车', key: '73', isLeaf: true },
{ title: '警用摩托车', key: '74', isLeaf: true },
{ title: '电力抢修车', key: '75', isLeaf: true },
{ title: '水力抢修车', key: '76', isLeaf: true },
{ title: '燃气抢修车', key: '77', isLeaf: true },
{ title: '特种工程车', key: '78', isLeaf: true },
{ title: '环保监测车', key: '79', isLeaf: true },
{ title: '其他联动车辆', key: '710', isLeaf: true }
]
},
{
name: '其他消防车辆'
title: '其他消防车辆',
key: '8',
isLeaf: true
}
]
expandKeys = ['100', '1001'];
value?: string;
nodes = [
//灭火剂分类
extinguishantTypeList: any = [
{
title: 'parent 1',
key: '100',
key: '1',
title: '泡沫灭火剂',
children: [
{
title: 'parent 1-0',
key: '1001',
key: '1-1',
title: '蛋白类泡沫灭火剂',
isLeaf: true
},
{
key: '1-2',
title: '合成类泡沫灭火剂',
isLeaf: true
},
{
key: '1-3',
title: '压缩空气泡沫灭火剂',
isLeaf: true
},
{
key: '1-4',
title: '化学泡沫灭火剂',
isLeaf: true
},
{
key: '1-5',
title: '其他类泡沫灭火剂',
isLeaf: true
}
]
},
{
key: '2',
title: '水泵灭火剂',
children: [
{ title: 'leaf 1-0-0', key: '10010', isLeaf: true },
{ title: 'leaf 1-0-1', key: '10011', isLeaf: true }
{
key: '2-1',
title: '强化水',
isLeaf: true
},
{
key: '2-2',
title: '乳化水',
isLeaf: true
},
{
key: '2-3',
title: '润湿水',
isLeaf: true
},
{
key: '2-4',
title: '粘性水',
isLeaf: true
},
{
key: '2-5',
title: 'SD系列水泵灭火剂',
isLeaf: true
},
{
key: '2-6',
title: '微胞囊类水泵灭火剂',
isLeaf: true
},
{
key: '2-7',
title: '其他水泵灭火剂',
isLeaf: true
}
]
},
{
title: 'parent 1-1',
key: '1002',
children: [{ title: 'leaf 1-1-0', key: '10020', isLeaf: true }]
key: '3',
title: '干粉灭火剂',
children: [
{
key: '3-1',
title: '普通干粉灭火剂',
isLeaf: true
},
{
key: '3-2',
title: '超细干粉灭火剂',
isLeaf: true
},
{
key: '3-3',
title: '金属火灾干粉灭火剂',
isLeaf: true
},
{
key: '3-4',
title: '其他干粉灭火剂',
isLeaf: true
}
]
},
{
key: '4',
title: '气体灭火剂',
children: [
{
key: '4-1',
title: '卤代烷烃灭火剂',
isLeaf: true
},
{
key: '4-2',
title: '二氧化碳灭火剂',
isLeaf: true
},
{
key: '4-3',
title: '惰性气体灭火剂',
isLeaf: true
},
{
key: '4-4',
title: '其他气体灭火剂',
isLeaf: true
}
]
},
{
key: '5',
title: '其他灭火剂',
children: [
{
key: '5-1',
title: '液氮', isLeaf: true
},
{
key: '5-2',
title: '火碱',
isLeaf: true
},
{
key: '5-3',
title: '其他灭火剂',
isLeaf: true
}
]
}
]
//消防器材分类
fireEquipmentTypeList: any = [
{
key: '1',
title: '消防人员防护装备',
isLeaf: true
},
{
key: '2',
title: '灭火器材装备',
isLeaf: true
},
{
key: '3',
title: '抢险救援装备',
isLeaf: true
},
{
key: '4',
title: '消防通讯指挥装备',
isLeaf: true
},
{
key: '5',
title: '特种消防装备',
isLeaf: true
},
{
key: '6',
title: '防火检查与火灾调查装备',
isLeaf: true
},
{
key: '7',
title: '其他类消防装备器材',
isLeaf: true
}
];
]
expandOrKeys = [];
expandCarTypeKeys = [];
onChange($event: string): void {
console.log($event);
onChangeCarType($event: string): void {
console.log(this.treeCarTypeSelected.getSelectedNodeList()[0].origin.title);
}
carDetailsTypeChange($event: string): void {
console.log(this.carDetailsTypeSelected.getSelectedNodeList()[0].origin.title);
}
onChange($event: string): void {
}
searchCarList() {
this.getCarList()
}
//车辆详细信息
carData: any = {
basicInfo: {
@ -247,7 +580,7 @@ export class FireForceComponent implements OnInit {
carPhoto: []//车辆照片
},
carExtinguishant: {//车载灭火剂
isExpand: false,
isExpand: null,
data: [
{
extinguishantType: '',//灭火剂类型
@ -261,7 +594,7 @@ export class FireForceComponent implements OnInit {
]
},
fireEquipment: {//消防器材
isExpand: false,
isExpand: null,
data: [
{
equipmentType: '',//器材类别
@ -274,19 +607,112 @@ export class FireForceComponent implements OnInit {
]
}
}
//车辆详情新增按钮
addCarDetailsItem(type) {
if (type == 'carExtinguishant') {
this.carData.carExtinguishant.data.push({
extinguishantType: '',//灭火剂类型
extinguishantName: '',//灭火剂名称
extinguishantOr: this.carDetailsData.organizationId,//所属队站
mixingRatio: '',//混合比
capacity: '',//车载量
manufacturer: '',//成产厂家
remark: ''//备注
})
} else if (type == 'fireEquipment') {
this.carData.fireEquipment.data.push({
equipmentType: '',//器材类别
equipmentName: '',//器材名称
equipmentOr: this.carDetailsData.organizationId,//所属队站
capacity: '',//车载量
manufacturer: '',//成产厂家
remark: ''//备注
})
}
}
deleteCarDetailsItem(arr, index) {
let isDelete = window.confirm('确定要删除该分组吗？')
if (isDelete) {
arr.splice(index, 1)
}
}
//上传车辆照片
uploadCarImg(e) {
// this.file = e.target.files[0] || null //上传的文件
let file = e.target.files[0] || null //获取上传的文件
this.openFileSelect(file, 'FireForce/car/' + this.carDetailsId)
}
//设置文件路径并上传
postFilePath
openFileSelect(file: File, extensionPath: string) {
this.postFilePath = extensionPath;
let fileSize = file.size || null //上传文件的总大小
let shardSize = 5 * 1024 * 1024 //5MB 超过5MB要分块上传
if (fileSize >= shardSize) // 超过5MB要分块上传
{
this.postFileByMul(file);
}
else //普通上传
{
this.postFile(file);
}
}
//上传文件
async postFile(file: File) {
await new Promise((resolve, reject) => {
this.objectsSrv.postFile(this.postFilePath, file).subscribe(data => {
let dataObj = data as any;
let filePath: string = ObjectsService.baseUrl + dataObj.objectName;
this.carData.fightInfo.carPhoto[0] = filePath
resolve('success')
});
})
}
/**
* 分块上传
* @param file
*/
postFileByMul(file: File) {
this.objectsSrv.postFile_MultipartUpload(this.postFilePath, file).then((value) => {
let dataObj = value as any;
this.carData.fightInfo.carPhoto[0] = dataObj.filePath
});
}
//保存车辆信息
saveCarData(invalid) {
console.log(invalid)
if (invalid) {
let config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('还有必填项未填写！', '确定', config);
} else {
this.carDetailsData.category = this.carDetailsTypeSelected.getSelectedNodeList()[0].origin.title
this.carDetailsData.name = this.carData.basicInfo.carName
this.carDetailsData.registrationNumber = this.carData.basicInfo.carNumber
this.carDetailsData.organizationId = this.carData.basicInfo.carOrganization
this.carDetailsData.combatInformationData = JSON.stringify(this.carData.fightInfo)
this.carDetailsData.equipmentData = JSON.stringify(this.carData.fireEquipment)
this.carDetailsData.extinguishingAgentData = JSON.stringify(this.carData.carExtinguishant)
this.carDetailsData.updatedTime = new Date()
console.log('putbody',this.carDetailsData)
this.http.put(`/api/FireFightingVehicles/${this.carDetailsData.id}`,this.carDetailsData).subscribe(data=>{
let config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('保存成功', '确定', config);
})
}
}
//勾选力量类型checkbox在地图上显示marker
checkBoxChange() {
@ -439,6 +865,7 @@ export class FireForceComponent implements OnInit {
}
ngOnInit(): void {
this.getAllFireForce()
this.getAllFireForce2()
setTimeout(() => {
this.createMap()
}, 0);
@ -482,6 +909,23 @@ export class FireForceComponent implements OnInit {
this.treeControl.expand(this.treeControl.dataNodes[0]);
})
}
//获得当前点击队站的组织机构
clickOrganizationTree: any
getAllFireForce2() {
this.http.get('/api/CustomFireForce').subscribe((data: any) => {
this.clickOrganizationTree = data
this.clickOrganizationTree.forEach(item => {
item.children = []
item.title = item.name
item.key = item.id
this.clickOrganizationTree.forEach(element => {
if (element.parentId == item.id) {
item.children.push(element)
}
});
});
})
}
upDateAllFireForce = (): void => {
this.http.get('/api/CustomFireForce').subscribe((data: any) => {
this.newdata = this.tree.toTree(data)
@ -532,13 +976,21 @@ export class FireForceComponent implements OnInit {
name: '',
code: ''
}
selectOrganizationTree: any = []
selectTreeNode(node) {
// console.log(node)
console.log(111222,node)
this.isGisTopBox = false
if (this.selectedFireForceId != node.id) {
this.clearData()
this.carPageIndex = 0//回到车辆列表页
this.selectedFireForce = node
this.selectedFireForceId = node.id
this.resetCarList()
this.clearCarDetails()
this.getCarList()
if (node.forceType != 0) {//如果是其他消防力量
this.selectedFireForceLevel = 4
} else {
@ -593,13 +1045,13 @@ export class FireForceComponent implements OnInit {
if (node.forceType != 0) {
this.otherpersonCountData = JSON.parse(data.personCountData) || this.otherpersonCountData
this.othercontactData = JSON.parse(data.contactData) || this.othercontactData
console.log(8888,this.othercontactData)
}
}, err => {
this.isMasklayer = false
alert('获取信息错误！')
})
} else {
this.map.setCity('上海市');
}
@ -610,6 +1062,14 @@ export class FireForceComponent implements OnInit {
this.superior.code = item.code
}
})
//找出点击的组织及其下属机构
this.carSearchForm.organization = node.id
this.clickOrganizationTree.forEach(item => {
if (item.id == node.id) {
this.selectOrganizationTree[0] = item
console.log('点击的组织机构', this.selectOrganizationTree)
}
});
}
}
//搜索
@ -1451,6 +1911,51 @@ export class AddFireForce {
}
//新增消防车辆弹出框
@Component({
selector: 'addwater',
templateUrl: './addFireForceCar.html',
styleUrls: ['./fire-force.component.scss']
})
export class AddFireForceCar {
constructor(private http: HttpClient, public dialogRef: MatDialogRef<AddFireForceCar>, @Inject(MAT_DIALOG_DATA) public data, public snackBar: MatSnackBar) { }
addList: any = [
{ id: 4, name: '微型消防站' },
{ id: 5, name: '企业专职消防站' },
{ id: 6, name: '义务(志愿)消防站' }
]
selectedFireForceTypeIndex: any = 4
selecteAddType(item, key) {
this.selectedFireForceTypeIndex = item.id
}
ngOnInit(): void {
}
carName: string
onSubmit(value) {
// console.log('organizationId', this.data.organization)
// console.log(value)
let body = {
name: this.carName,
organizationId: this.data.organization
}
this.http.post('/api/FireFightingVehicles', body).subscribe(data => {
let config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('新增成功', '确定', config);
this.dialogRef.close(data)
})
}
}
//查看图片大图和视频
@Component({
selector: 'viewdetails',

85
src/app/services/objects.service.ts
Unescape View File

@ -0,0 +1,85 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ObjectsService {
static readonly c_apiRoot = "/api/";//普通上传的API根路径
static readonly c_apiRoot_Multipart = "/api/";//分块上传的API根路径
// static testPath = "f1/f2";//测试路径
constructor(private http: HttpClient) { }
//普通上传，单个文件上限5M
static baseUrl = ObjectsService.c_apiRoot + 'Objects/PlanPlatform/';
postFile(extensionPath: string, file: File): Observable<Object> {
let formData = new FormData()
formData.append("file", file, file.name)
let data = { keepOriginalName: 'true' }
return this.http.post(ObjectsService.baseUrl + extensionPath, formData, { params: data });
}
//分块上传
static baseUrl_MultipartUpload = ObjectsService.c_apiRoot_Multipart + 'NewMultipartUpload/PlanPlatform/';
// {
// "objectName": "string",
// "uploadId": "string"
// }
postFile_MultipartUpload(extensionPath: string, file: File): Promise<Object> {
// let formData = new FormData()
// formData.append("file", file, file.name)
// return this.http.post(ObjectsService.baseUrl + extensionPath, formData);
let data = { keepOriginalName: 'true', filename: file.name }
return new Promise((resolve, reject) => {
this.http.post(ObjectsService.baseUrl_MultipartUpload + extensionPath, {}, { params: data }).subscribe(async (data: any) => { //初始化分段上传
let objectName = data.objectName
let uploadId = data.uploadId
let PartNumberETag = []; //每次返回需要保存的信息
//分块 处理
let fileSize = file.size || null //上传文件的总大小
let shardSize = 5 * 1024 * 1024 //5MB一个分片
let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
for (let i = 0; i < allSlice; i++) { //循环分段上传
let start = i * shardSize //切割文件开始位置
let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
let formData = new FormData()
formData.append("file", file.slice(start, end))
//同步写法实现异步调用
let result = await new Promise((resolve, reject) => {
// await 需要后面返回一个 promise 对象
this.http.post(ObjectsService.c_apiRoot_Multipart + `MultipartUpload/PlanPlatform/${objectName}?uploadId=${uploadId}&partNumber=${i + 1}`, formData).subscribe((data: any) => {
let msg = { "partNumber": data.partNumber || null, "eTag": data.eTag || null }
resolve(msg) // 调用 promise 内置方法处理成功
})
});
PartNumberETag.push(result)
if (PartNumberETag.length === allSlice) { //分块上传完成
let data = PartNumberETag
let paramsData = { uploadId: uploadId };
let path = ObjectsService.c_apiRoot_Multipart + 'CompleteMultipartUpload/PlanPlatform/' + objectName;
this.http.post(path, data, { params: paramsData }).subscribe(data => {
let objData: any = new Object();
objData.fileName = file.name;
objData.filePath = (ObjectsService.baseUrl + objectName).replace(file.name, "");
resolve(objData)
})
}
}//for循环
//分块 处理
})
})
}
}

1
src/app/working-area/working-area.component.ts
Unescape View File

@ -1098,6 +1098,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
imageWidth: number = this.canvasData.selectStorey.imageWidth,
imageHeight: number = this.canvasData.selectStorey.imageHeight,
): Promise<void> {
console.log('当前背景图',imageUrl)
if (imageAngle === undefined || imageAngle === null) {
imageAngle = 0;
}

BIN
src/assets/images/add2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 383 B

BIN
src/assets/images/uploadbtn.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 423 B

298
src/styles.scss
Unescape View File

@ -1,61 +1,95 @@
@import './app/theme.scss';
@import "./app/theme.scss";
@import "./app/ngZorroTree.css"; /* 引入组件样式 */
// @import "~ng-zorro-antd/select/style/index.min.css"; /* 引入组件样式 */
@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
// @import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
@import "~ng-zorro-antd/tree-select/style/index.min.css"; /* 引入组件样式 */
@font-face
{
@font-face {
font-family: Regular;
src: url('./assets/font/SourceHanSansCN-Regular.otf'),
src: url("./assets/font/SourceHanSansCN-Regular.otf");
}
html,body{
html,
body {
touch-action: none;
width: 100%;
height:100%;
margin:0 auto;
padding:0;
height: 100%;
margin: 0 auto;
padding: 0;
overflow: hidden;
font-family: Regular;
textarea{
font-family: Regular
textarea {
font-family: Regular;
}
user-select:auto!important
}
ul,ol,dl,li,dt,dd,p,form,input,h1,h2,h3,h4,h5,h6,section,article,aside,header,footer,nav,figure,time,mark,main,canvas{
margin:0;
padding:0;
}
b,strong,i,em,h1,h2,h3,h4,h5,h6{
font-weight:500;
font-style:normal;
}
img{
border:none;
user-select: auto !important;
}
ul,
ol,
dl,
li,
dt,
dd,
p,
form,
input,
h1,
h2,
h3,
h4,
h5,
h6,
section,
article,
aside,
header,
footer,
nav,
figure,
time,
mark,
main,
canvas {
margin: 0;
padding: 0;
}
a{
b,
strong,
i,
em,
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
font-style: normal;
}
img {
border: none;
}
a {
text-decoration: none;
color:#000;
color: #000;
}
ul,ol,li{
list-style:none;
ul,
ol,
li {
list-style: none;
overflow-x: hidden;
}
.clearfn:after{
content:"";
clear:both;
.clearfn:after {
content: "";
clear: both;
display: block;
overflow:hidden;
height:0;
overflow: hidden;
height: 0;
visibility: hidden;
}
//root标签
app-root{
app-root {
height: 100%;
}
h1{
h1 {
font-size: 16px;
}
.mat-expansion-panel-body {
@ -67,43 +101,44 @@ h1{
.example-sidenav .mat-drawer-inner-container {
overflow: hidden;
}
table th.mat-header-cell:last-of-type,table td.mat-cell:last-of-type,
table td.mat-footer-cell:last-of-type{
table th.mat-header-cell:last-of-type,
table td.mat-cell:last-of-type,
table td.mat-footer-cell:last-of-type {
padding-right: 0px;
}
.mat-tab-body{
.mat-tab-body {
height: 100%;
overflow-y: auto;
}
.mat-content { //可展开面板垂直居中
.mat-content {
//可展开面板垂直居中
align-items: center;
}
//滚动条样式
::-webkit-scrollbar{
::-webkit-scrollbar {
width: 5px;
background-color: white;
}
::-webkit-scrollbar-thumb{
::-webkit-scrollbar-thumb {
background-color: #999;
}
//x轴滚动条隐藏
.example-sidenav-content {
overflow-x: hidden; overflow-y: auto;
}
overflow-x: hidden;
overflow-y: auto;
}
.mat-tab-body-wrapper{
.mat-tab-body-wrapper {
height: 100%;
}
.mat-tab-body-content{
overflow: hidden!important;
.mat-tab-body-content {
overflow: hidden !important;
}
//gis单位信息tabs样式
#gis{
.mat-tab-label{
#gis {
.mat-tab-label {
height: 38px;
line-height: 38px;
min-width: 80px;
@ -111,26 +146,33 @@ table td.mat-footer-cell:last-of-type{
}
}
//可展开面板按钮颜色
#gisbasicinfo,#planlist,#allaround,#firefacilities,#keysite,#functionpartition,#realisticpicture{
#gisbasicinfo,
#planlist,
#allaround,
#firefacilities,
#keysite,
#functionpartition,
#realisticpicture {
.mat-expansion-indicator::after {
color: #333333;
}
}
#waitexamineergis{
#waitexamineergis {
.mat-expansion-indicator::after {
color: #fff;
}
mat-expansion-panel{
box-shadow: 0 0 black;border: 1px solid #EEF1F5;
mat-expansion-panel {
box-shadow: 0 0 black;
border: 1px solid #eef1f5;
}
}
//gis标点弹出框样式
#gispopupbox{
.btn{
#gispopupbox {
.btn {
width: 92px;
height: 36px;
background: #FFFFFF;
border: 1px solid #EEF1F5;
background: #ffffff;
border: 1px solid #eef1f5;
opacity: 1;
border-radius: 4px;
margin: 0 5px;
@ -138,25 +180,33 @@ table td.mat-footer-cell:last-of-type{
// font-family: Source Han Sans CN;
font-weight: 400;
line-height: 36px;
color: #0080FF;
color: #0080ff;
opacity: 1;
cursor: pointer;
display: table-cell; //主要是这个属性
text-align: center;
img{
img {
vertical-align: middle;
margin-right: 3px;
padding-bottom: 2px;
}
}
}
//弹出框样式取消padding
#shareDialog,#lookPlanDialog,#openPlanToolDialog,#addWater,#videodialog,#addLinkageForce,#videodialog2,#gisImgDialog{
#shareDialog,
#lookPlanDialog,
#openPlanToolDialog,
#addWater,
#addCar,
#videodialog,
#addLinkageForce,
#videodialog2,
#gisImgDialog {
padding: 0;
}
#setPosition,#map{
#setPosition,
#map {
.custom-content-marker {
position: relative;
width: 29px;
@ -174,40 +224,40 @@ table td.mat-footer-cell:last-of-type{
bottom: -36px;
width: 68px;
height: 30px;
background:#FFFFFF;
background: #ffffff;
border-radius: 60px;
color: #EBEBEB;
color: #ebebeb;
display: flex;
justify-content: space-around;
box-sizing: border-box;
padding: 0 5px;
align-items: center;
img{
img {
width: 20px;
height: 20px;
cursor: pointer;
}
}
.custom-content-marker .close-btn:hover{
.custom-content-marker .close-btn:hover {
background: #666;
}
}
#fireForceTree{
.mat-tree-node{
#fireForceTree {
.mat-tree-node {
min-height: 40px;
flex: none;
box-sizing: border-box;
}
.mat-icon-button{
.mat-icon-button {
width: 30px;
height: 30px;
line-height: 30px;
}
}
#linkageForcesSwiper{
.swiper-container{
--swiper-navigation-size: 26px;/* 设置按钮大小 */
#linkageForcesSwiper {
.swiper-container {
--swiper-navigation-size: 26px; /* 设置按钮大小 */
}
}
.KedaPosImg {
@ -223,35 +273,36 @@ table td.mat-footer-cell:last-of-type{
background: no-repeat center;
}
//点聚合自定义图片大小
.clusterImg{
.clusterImg {
width: 30px;
height: 30px;
}
//水源采集点聚合
.clusterImgCollection{
width:30px;
height:30px;
.clusterImgCollection {
width: 30px;
height: 30px;
}
#unitBasicInfo{
.mat-expansion-indicator::after{
#unitBasicInfo {
.mat-expansion-indicator::after {
color: black;
}
}
td{
word-break:break-all;
td {
word-break: break-all;
}
@media screen and (max-width:1400px){
.mat-toolbar-row, .mat-toolbar-single-row {
height: 50px!important;
@media screen and (max-width: 1400px) {
.mat-toolbar-row,
.mat-toolbar-single-row {
height: 50px !important;
}
}
#firefightingdevicelook,#firefightingdevice{
.expansionheader{
height: auto!important;
#firefightingdevicelook,
#firefightingdevice {
.expansionheader {
height: auto !important;
}
}
#planContainer{
#planContainer {
.custom-content-marker {
position: relative;
width: 28px;
@ -275,15 +326,16 @@ td{
color: #fff;
text-align: center;
line-height: 15px;
box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
}
.custom-content-marker .close-btn:hover{
.custom-content-marker .close-btn:hover {
background: #666;
}
}
#setUnitPosition,#setUnitPositionLook{
#setUnitPosition,
#setUnitPositionLook {
.custom-content-marker {
position: relative;
// border: 1px solid red;
@ -338,6 +390,62 @@ td{
background: #666;
}
}
.mat-paginator-container{
min-height: 40px!important;
.mat-paginator-container {
min-height: 40px !important;
}
#carcontent {
.cartopbox {
nz-tree-select {
width: 81.4%;
margin-right: 22px;
}
.ant-select-selector {
background-color: #f2f4f6;
height: 40px;
border: none;
border-radius: 5px;
padding-top: 5px;
box-sizing: border-box;
width: 104.7%;
}
input{
height: 40px;
}
}
.carTwoItemBox{
nz-tree-select {
width: 71.6%;
margin-right: 22px;
}
.ant-select-selector {
height: 34px;
border: none;
border-radius: 4px;
border: 1px solid #EBEBEB;
box-sizing: border-box;
padding-top: 1px;
width: 104.9%;
}
}
.carTwoItemBox2,.carTwoItemBox3{
nz-tree-select {
width: 64.3%;
margin-right: 22px;
}
.ant-select-selector {
height: 34px;
border: none;
border-radius: 4px;
border: 1px solid #EBEBEB;
box-sizing: border-box;
padding-top: 1px;
width: 104.9%;
}
}
}
.carTreeDropdown{
max-height: 239px;
}
Write Preview
Loading…
Cancel
Save