chenjingyu
5 years ago
47 changed files with 475 additions and 16503 deletions
@ -1,24 +0,0 @@ |
|||||||
<div class="functionalDomainContent"> |
|
||||||
<div mat-dialog-title> |
|
||||||
<label *ngIf="!data.parentId">新建处置节点</label> |
|
||||||
<label *ngIf="data.parentId">新建节点</label> |
|
||||||
</div> |
|
||||||
|
|
||||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
|
||||||
|
|
||||||
<div class="keyMargin"> |
|
||||||
<mat-form-field> |
|
||||||
<input matInput name="name" required ngModel placeholder="名称"> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="submitBottom"> |
|
||||||
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid"> |
|
||||||
确定 |
|
||||||
</button> |
|
||||||
<button mat-raised-button mat-dialog-close>取消</button> |
|
||||||
</div> |
|
||||||
|
|
||||||
</form> |
|
||||||
|
|
||||||
</div> |
|
||||||
@ -1,38 +0,0 @@ |
|||||||
<div class="functionalDomainContent"> |
|
||||||
<div mat-dialog-title> |
|
||||||
<label *ngIf="!data.isBuilding">新建平面图</label> |
|
||||||
<label *ngIf="data.isBuilding">新建楼层/区域</label> |
|
||||||
</div> |
|
||||||
|
|
||||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
|
||||||
|
|
||||||
<div class="keyMargin"> |
|
||||||
<mat-form-field> |
|
||||||
<input matInput name="name" required ngModel placeholder="名称"> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="keyMargin" *ngIf="data.isBuilding"> |
|
||||||
<mat-checkbox name="isRefugeStorey" [(ngModel)]="checked">是否为避难层</mat-checkbox> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="keyMargin"> |
|
||||||
<mat-form-field> |
|
||||||
<input matInput name="area" type="number" required ngModel placeholder="面积 (平方米)"> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="keyMargin"> |
|
||||||
<textarea name="details" ngModel placeholder="详情"></textarea> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="submitBottom"> |
|
||||||
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid"> |
|
||||||
确定 |
|
||||||
</button> |
|
||||||
<button mat-raised-button mat-dialog-close>取消</button> |
|
||||||
</div> |
|
||||||
|
|
||||||
</form> |
|
||||||
|
|
||||||
</div> |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { CollectionToolsComponent } from './collection-tools.component'; |
|
||||||
|
|
||||||
describe('CollectionToolsComponent', () => { |
|
||||||
let component: CollectionToolsComponent; |
|
||||||
let fixture: ComponentFixture<CollectionToolsComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ CollectionToolsComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(CollectionToolsComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,28 +0,0 @@ |
|||||||
<div mat-dialog-title>新增建筑</div> |
|
||||||
<div> |
|
||||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
|
||||||
|
|
||||||
<div mat-dialog-content> |
|
||||||
<mat-form-field> |
|
||||||
<input type="text" matInput ngModel |
|
||||||
required name="propertyName" placeholder="建筑名称" autocomplete="off"> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
<div mat-dialog-content> |
|
||||||
<mat-form-field> |
|
||||||
<mat-select [(value)]="selected" required ngModel name="buildingId" placeholder="建筑类型"> |
|
||||||
<mat-option *ngFor="let item of allBuildingType" [value]="item.id"> |
|
||||||
{{item.name}} |
|
||||||
</mat-option> |
|
||||||
</mat-select> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
<div mat-dialog-actions> |
|
||||||
<button mat-raised-button color="primary" type="submit" |
|
||||||
[disabled]="!form.form.valid"> |
|
||||||
确定 |
|
||||||
</button> |
|
||||||
<button mat-raised-button mat-dialog-close>取消</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
</div> |
|
||||||
@ -1,23 +0,0 @@ |
|||||||
<div mat-dialog-title>编辑建筑</div> |
|
||||||
<div> |
|
||||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
|
||||||
<div mat-dialog-content> |
|
||||||
<mat-form-field> |
|
||||||
<input type="text" matInput [(ngModel)]="defaultName" required name="propertyName" placeholder="建筑名称" autocomplete="off"> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
<div mat-dialog-content> |
|
||||||
<mat-form-field> |
|
||||||
<mat-select required [(ngModel)]="defaultBuildingType" name="buildingId" placeholder="建筑类型"> |
|
||||||
<mat-option *ngFor="let item of allBuildingType" [value]="item.id"> |
|
||||||
{{item.name}} |
|
||||||
</mat-option> |
|
||||||
</mat-select> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
<div mat-dialog-actions> |
|
||||||
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">确定</button> |
|
||||||
<button mat-raised-button mat-dialog-close>取消</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
</div> |
|
||||||
@ -1,23 +0,0 @@ |
|||||||
<div class="functionalDomainContent"> |
|
||||||
<div mat-dialog-title> |
|
||||||
<label>修改灾情节点名称</label> |
|
||||||
</div> |
|
||||||
|
|
||||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
|
||||||
|
|
||||||
<div class="keyMargin"> |
|
||||||
<mat-form-field> |
|
||||||
<input matInput name="name" required [(ngModel)]="nodeName" placeholder="名称"> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="submitBottom"> |
|
||||||
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid"> |
|
||||||
确定 |
|
||||||
</button> |
|
||||||
<button mat-raised-button mat-dialog-close>取消</button> |
|
||||||
</div> |
|
||||||
|
|
||||||
</form> |
|
||||||
|
|
||||||
</div> |
|
||||||
@ -1,39 +0,0 @@ |
|||||||
<div class="functionalDomainContent"> |
|
||||||
|
|
||||||
<div mat-dialog-title> |
|
||||||
<label *ngIf="!data.isBuilding">编辑平面图</label> |
|
||||||
<label *ngIf="data.isBuilding">编辑楼层/区域</label> |
|
||||||
</div> |
|
||||||
|
|
||||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
|
||||||
|
|
||||||
<div class="keyMargin"> |
|
||||||
<mat-form-field> |
|
||||||
<input matInput name="name" required [(ngModel)]="name" placeholder="名称"> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="keyMargin" *ngIf="data.isBuilding"> |
|
||||||
<mat-checkbox name="isRefugeStorey" [(ngModel)]="checked">是否为避难层</mat-checkbox> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="keyMargin"> |
|
||||||
<mat-form-field> |
|
||||||
<input matInput name="area" type="number" required [(ngModel)]="area" placeholder="面积 (平方米)"> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="keyMargin"> |
|
||||||
<textarea name="details" [(ngModel)]="details" placeholder="详情"></textarea> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="submitBottom"> |
|
||||||
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid"> |
|
||||||
确定 |
|
||||||
</button> |
|
||||||
<button mat-raised-button mat-dialog-close>取消</button> |
|
||||||
</div> |
|
||||||
|
|
||||||
</form> |
|
||||||
|
|
||||||
</div> |
|
||||||
@ -1,180 +0,0 @@ |
|||||||
import { Component, OnInit, Inject } from '@angular/core'; |
|
||||||
import { HttpClient, HttpHeaders } from '@angular/common/http'; |
|
||||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
|
||||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-leftFunctionalDomain', |
|
||||||
templateUrl: './addPlaneFigure.html', |
|
||||||
styleUrls: ['./panel.scss'] |
|
||||||
}) |
|
||||||
export class leftFunctionalDomainComponent implements OnInit { |
|
||||||
|
|
||||||
constructor( |
|
||||||
private http:HttpClient, |
|
||||||
public dialog: MatDialog, |
|
||||||
public snackBar: MatSnackBar, |
|
||||||
public dialogRef: MatDialogRef<any>, |
|
||||||
@Inject(MAT_DIALOG_DATA) public data) { } |
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
params = {companyId: sessionStorage.getItem('companyId')} |
|
||||||
checked:boolean = false;//是否为避难层
|
|
||||||
|
|
||||||
//提交表单创建平面图
|
|
||||||
onSubmit (e) { |
|
||||||
if (!this.data.isBuilding) { //总平面图 创建平面图
|
|
||||||
let data = { |
|
||||||
companyId: sessionStorage.getItem('companyId'), |
|
||||||
name: e.name, |
|
||||||
order: this.data.order, |
|
||||||
area:e.area, |
|
||||||
details:e.details, |
|
||||||
enabled: true, |
|
||||||
modifiedTime: new Date(), |
|
||||||
} |
|
||||||
this.http.post('/api/SitePlans',data).subscribe(data=>{ |
|
||||||
this.dialogRef.close('总平面图'); |
|
||||||
}) |
|
||||||
} else { //建筑 创建楼层/区域
|
|
||||||
let data = { |
|
||||||
isRefugeStorey: e.isRefugeStorey, |
|
||||||
buildingId: this.data.Panel.id, |
|
||||||
name: e.name, |
|
||||||
order: this.data.order, |
|
||||||
area:e.area, |
|
||||||
details:e.details, |
|
||||||
enabled: true, |
|
||||||
modifiedTime: new Date(), |
|
||||||
} |
|
||||||
this.http.post('/api/BuildingAreas',data,{params:this.params}).subscribe(data=>{ |
|
||||||
this.dialogRef.close('建筑'); |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
//编辑平面图 楼层/区域
|
|
||||||
@Component({ |
|
||||||
selector: 'app-editPlaneFigure', |
|
||||||
templateUrl: './editPlaneFigure.html', |
|
||||||
styleUrls: ['./panel.scss'] |
|
||||||
}) |
|
||||||
export class editPlaneFigureComponent implements OnInit { |
|
||||||
|
|
||||||
constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { } |
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
this.name = this.data.buildingData.name || '' |
|
||||||
this.checked = this.data.buildingData.isRefugeStorey || false |
|
||||||
this.area = this.data.buildingData.area || 0 |
|
||||||
this.details = this.data.buildingData.details || '' |
|
||||||
} |
|
||||||
|
|
||||||
params = {companyId: sessionStorage.getItem('companyId')} |
|
||||||
name:any; //name
|
|
||||||
checked:boolean = false;//是否为避难层
|
|
||||||
area:number; //面积
|
|
||||||
details:string; //详情
|
|
||||||
|
|
||||||
//提交表单修改平面图
|
|
||||||
onSubmit (e) { |
|
||||||
if (!this.data.isBuilding) { //总平面图 修改平面图
|
|
||||||
let data = { |
|
||||||
companyId: sessionStorage.getItem('companyId'), |
|
||||||
id: this.data.buildingData.id, |
|
||||||
name: e.name, |
|
||||||
cadUrl: this.data.buildingData.cadUrl, |
|
||||||
imageUrl: this.data.buildingData.imageUrl, |
|
||||||
imageAngle: this.data.buildingData.imageAngle, |
|
||||||
order: this.data.buildingData.order, |
|
||||||
area:e.area, |
|
||||||
details:e.details, |
|
||||||
enabled: this.data.buildingData.enabled, |
|
||||||
modifiedTime: new Date(), |
|
||||||
} |
|
||||||
this.http.put(`/api/SitePlans/${this.data.buildingData.id}`,data).subscribe(data=>{ |
|
||||||
this.dialogRef.close('总平面图'); |
|
||||||
}) |
|
||||||
} else { //建筑 修改楼层/区域
|
|
||||||
let data = { |
|
||||||
isRefugeStorey: e.isRefugeStorey, |
|
||||||
buildingId: this.data.Panel.id, |
|
||||||
id: this.data.buildingData.id, |
|
||||||
name: e.name, |
|
||||||
cadUrl: this.data.buildingData.cadUrl, |
|
||||||
imageUrl: this.data.buildingData.imageUrl, |
|
||||||
imageAngle: this.data.buildingData.imageAngle, |
|
||||||
order: this.data.buildingData.order, |
|
||||||
area:e.area, |
|
||||||
details:e.details, |
|
||||||
enabled: this.data.buildingData.enabled, |
|
||||||
modifiedTime: new Date(), |
|
||||||
} |
|
||||||
this.http.put(`/api/BuildingAreas/${this.data.buildingData.id}`,data,{params:this.params}).subscribe(data=>{ |
|
||||||
this.dialogRef.close('建筑'); |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//创建 处置预案 节点
|
|
||||||
@Component({ |
|
||||||
selector: 'app-addDisposalNode', |
|
||||||
templateUrl: './addDisposalNode.html', |
|
||||||
styleUrls: ['./panel.scss'] |
|
||||||
}) |
|
||||||
export class addDisposalNodeComponent implements OnInit { |
|
||||||
|
|
||||||
constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { } |
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
} |
|
||||||
|
|
||||||
//提交表单
|
|
||||||
onSubmit (e) { |
|
||||||
this.data.name = e.name |
|
||||||
this.http.post('/api/DisposalNodes',this.data).subscribe(data=>{ |
|
||||||
this.dialogRef.close('success'); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//编辑 处置预案 节点
|
|
||||||
@Component({ |
|
||||||
selector: 'app-editDisposalNode', |
|
||||||
templateUrl: './editDisposalNode.html', |
|
||||||
styleUrls: ['./panel.scss'] |
|
||||||
}) |
|
||||||
export class editDisposalNodeComponent implements OnInit { |
|
||||||
|
|
||||||
constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { } |
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
this.nodeName = JSON.parse(JSON.stringify( this.data.name || '' ))
|
|
||||||
} |
|
||||||
nodeName:string; |
|
||||||
|
|
||||||
//提交表单
|
|
||||||
onSubmit (e) { |
|
||||||
this.data.name = e.name |
|
||||||
this.http.put(`/api/DisposalNodes/${this.data.id}`,this.data).subscribe(data=>{ |
|
||||||
this.dialogRef.close('success'); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,297 +0,0 @@ |
|||||||
.matIcons { |
|
||||||
color: #8E909F; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//平面图 素材库 公共样式 头部 |
|
||||||
.planarGraphHeader{ |
|
||||||
width: 100%; |
|
||||||
text-align: center; |
|
||||||
height: 40px; |
|
||||||
line-height: 40px; |
|
||||||
min-height: 40px; |
|
||||||
cursor: pointer; |
|
||||||
text-align: center; |
|
||||||
font-style: italic; |
|
||||||
font-size: 20px; |
|
||||||
color: white; |
|
||||||
border-bottom:2px solid #accbf2; |
|
||||||
} |
|
||||||
//平面图头部字体图标样式 |
|
||||||
.hover { |
|
||||||
width: 18px; |
|
||||||
height: 18px; |
|
||||||
margin-left: 90px; |
|
||||||
border: 1px solid #999; |
|
||||||
border-radius: 3px; |
|
||||||
.mat-icon {font-size: 18px; color: #999;} |
|
||||||
} |
|
||||||
.hover:hover { |
|
||||||
background-color: #4DA5FA; |
|
||||||
.mat-icon {color: #fff;} |
|
||||||
} |
|
||||||
|
|
||||||
//平面图 |
|
||||||
.sitePlanContent { |
|
||||||
position: relative; |
|
||||||
width: 100%; |
|
||||||
height: 35px; |
|
||||||
line-height: 35px; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 0 10px 0 25px; |
|
||||||
.mat-icon { |
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//火源/力量 图标 |
|
||||||
.fireForce { |
|
||||||
display: block; |
|
||||||
float: right; |
|
||||||
margin: 8px 5px 0 0; |
|
||||||
width: 40px; |
|
||||||
height: 20px; |
|
||||||
line-height: 20px; |
|
||||||
text-align: center; |
|
||||||
position: relative; |
|
||||||
overflow: hidden; |
|
||||||
img{ |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
} |
|
||||||
} |
|
||||||
//替换底图 inputfile |
|
||||||
.a-upload { |
|
||||||
display: block; |
|
||||||
float: right; |
|
||||||
margin: 8px 18px 0 0; |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
line-height: 20px; |
|
||||||
text-align: center; |
|
||||||
position: relative; |
|
||||||
overflow: hidden; |
|
||||||
input { |
|
||||||
position: absolute; |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
.a-upload:hover { |
|
||||||
.mat-icon { |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
} |
|
||||||
//上传底图 inputfile |
|
||||||
#a-uploadImg { |
|
||||||
display: block; |
|
||||||
width: 300px; |
|
||||||
height: 170px; |
|
||||||
position: fixed; |
|
||||||
top: 40%; |
|
||||||
left: 48%; |
|
||||||
overflow: hidden; |
|
||||||
border-radius: 5px; |
|
||||||
border: 1px solid #999; |
|
||||||
z-index: 999; |
|
||||||
input { |
|
||||||
position: absolute; |
|
||||||
width: 300px; |
|
||||||
height: 170px; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
img { |
|
||||||
width: 100%; |
|
||||||
height: auto; |
|
||||||
} |
|
||||||
} |
|
||||||
#a-uploadImg:hover { |
|
||||||
border: 5px solid skyblue; |
|
||||||
} |
|
||||||
|
|
||||||
//hover时显示右边操作栏 |
|
||||||
.sitePlanContent:hover { |
|
||||||
#rightOperate { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
} |
|
||||||
//右边操作栏 |
|
||||||
#rightOperate{ |
|
||||||
width: 50px; |
|
||||||
height: 100px; |
|
||||||
position: absolute; |
|
||||||
top: -32px; |
|
||||||
right: -48px; |
|
||||||
z-index: 99999; |
|
||||||
border-radius: 0 100px 100px 0; |
|
||||||
background-color: #F0F4F7; |
|
||||||
// #F0F4F7 cdced1 |
|
||||||
display: none; |
|
||||||
.functionButton { |
|
||||||
height: 25%; |
|
||||||
line-height: 25px; |
|
||||||
} |
|
||||||
.bigFunctionIcon { |
|
||||||
font-size: 24px; |
|
||||||
} |
|
||||||
.functionIcon { |
|
||||||
color: #999; |
|
||||||
} |
|
||||||
.functionIcon:hover { |
|
||||||
color: #4DA5FA; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//处置预案 素材库 公用div |
|
||||||
.publiclBankPlan { |
|
||||||
flex: 1; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
overflow: hidden; |
|
||||||
padding-bottom: 10px; |
|
||||||
// border-top: 1px dashed #999; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 基本信息/想定作业 切换 |
|
||||||
.scenarioAssignment { |
|
||||||
overflow-y: auto; |
|
||||||
} |
|
||||||
.selectEditMode { |
|
||||||
flex: 1; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
.materialBankDIV{ |
|
||||||
flex: 1; |
|
||||||
overflow-x: hidden; |
|
||||||
overflow-y: auto; |
|
||||||
} |
|
||||||
// 基本信息/想定作业 切换 |
|
||||||
//处置预案 |
|
||||||
#terrNodePublic { |
|
||||||
height: 35px; |
|
||||||
line-height: 35px; |
|
||||||
.textNode {flex: 1;} |
|
||||||
} |
|
||||||
//字体图标 |
|
||||||
.planIconDiv { |
|
||||||
display: inline-block; |
|
||||||
.mat-icon{ |
|
||||||
font-size: 20px; |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
color: white; |
|
||||||
margin-right: 3px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.mat-expansion-panel-header { |
|
||||||
height: 40px !important; |
|
||||||
} |
|
||||||
//素材库溢出隐藏 |
|
||||||
#materialBank { |
|
||||||
margin: 1px 0; |
|
||||||
} |
|
||||||
//素材库图片flex |
|
||||||
#panelLibrary .text{ |
|
||||||
box-sizing: border-box; |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
.panelLibraryFlex { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
flex-wrap: wrap; |
|
||||||
justify-content: space-between; /* 水平居中 */ |
|
||||||
.imgBox { |
|
||||||
width: 70px; |
|
||||||
height: 100px; |
|
||||||
display: inline-block; |
|
||||||
text-align: center; |
|
||||||
border-radius: 3px; |
|
||||||
margin: 5px 0; |
|
||||||
img { |
|
||||||
width: 70px; |
|
||||||
height: auto; |
|
||||||
max-height: 70px; |
|
||||||
cursor:pointer; |
|
||||||
} |
|
||||||
p { |
|
||||||
font-size: 12px; |
|
||||||
cursor:pointer; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//文本溢出 |
|
||||||
.overflowText { |
|
||||||
overflow: hidden; |
|
||||||
text-overflow:ellipsis; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
// 楼层/区域 是避难层时 |
|
||||||
.isRefugeStorey { |
|
||||||
color: #fff; |
|
||||||
background-color: rgb(238, 186, 186); |
|
||||||
} |
|
||||||
//选中平面图时 |
|
||||||
.selectSitePlan { |
|
||||||
color: #fff; |
|
||||||
background-color: #6BC2FF; |
|
||||||
} |
|
||||||
//选中素材库图片时 |
|
||||||
.selectImg { |
|
||||||
color: #fff; |
|
||||||
background-color: #4DA5FA; |
|
||||||
} |
|
||||||
//选中 处置节点时 |
|
||||||
.selectanelPoint { |
|
||||||
background-color: #0c2d44; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//左侧功能区弹出框样式 |
|
||||||
.keyMargin { |
|
||||||
width: 100%; |
|
||||||
margin: 5px 0; |
|
||||||
.mat-form-field { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
.submitBottom { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
flex-wrap: wrap; |
|
||||||
justify-content: space-between; /* 水平居中 */ |
|
||||||
} |
|
||||||
.functionalDomainContent { |
|
||||||
// width: 300px; |
|
||||||
height: 100%; |
|
||||||
textarea { |
|
||||||
border-radius: 5px; |
|
||||||
border: 1px solid #999; |
|
||||||
width: 100%; |
|
||||||
height: 120px; |
|
||||||
resize:none; |
|
||||||
} |
|
||||||
} |
|
||||||
.mat-tree{ |
|
||||||
background-color:transparent; |
|
||||||
.mat-tree-node{ |
|
||||||
color: white; |
|
||||||
} |
|
||||||
.mat-tree-node:hover{ |
|
||||||
background-color: #0c2d44; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,250 +0,0 @@ |
|||||||
import { Component, OnInit, Inject } from '@angular/core'; |
|
||||||
import { HttpClient, HttpHeaders } from '@angular/common/http'; |
|
||||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
|
||||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
|
||||||
import {CanvasShareDataService} from '../../canvas-share-data.service' //引入服务
|
|
||||||
// 保存想定作业第一个弹窗
|
|
||||||
@Component({ |
|
||||||
selector: 'dialog-overview-example-dialog', |
|
||||||
templateUrl: 'saveOne.html', |
|
||||||
styleUrls: ['./collection-tools.component.scss'] |
|
||||||
}) |
|
||||||
export class saveOneDialog { |
|
||||||
|
|
||||||
constructor( |
|
||||||
private http:HttpClient, |
|
||||||
public dialog: MatDialog, |
|
||||||
public snackBar: MatSnackBar, |
|
||||||
public dialogRef: MatDialogRef<saveOneDialog>, |
|
||||||
@Inject(MAT_DIALOG_DATA) public data) {} |
|
||||||
|
|
||||||
onNoClick(): void { |
|
||||||
this.dialogRef.close() |
|
||||||
} |
|
||||||
allDisposalNode = this.data.allDisposalNode |
|
||||||
|
|
||||||
saveType(type){ |
|
||||||
this.dialogRef.close() |
|
||||||
const dialogRef = this.dialog.open(saveTwoDialog, { |
|
||||||
data: {type: type, |
|
||||||
allDisposalNode: this.data.allDisposalNode, |
|
||||||
selectedBuildingData:this.data.selectedBuildingData, |
|
||||||
selectedSiteData:this.data.selectedSiteData, |
|
||||||
siteOrbuilding:this.data.siteOrbuilding, |
|
||||||
disasterId:this.data.disasterId} |
|
||||||
}); |
|
||||||
dialogRef.afterClosed().subscribe(result => { |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
// 保存想定作业第二个弹窗
|
|
||||||
@Component({ |
|
||||||
selector: 'dialog-overview-example-dialog', |
|
||||||
templateUrl: 'saveTwo.html', |
|
||||||
styleUrls: ['./collection-tools.component.scss'] |
|
||||||
}) |
|
||||||
export class saveTwoDialog { |
|
||||||
|
|
||||||
constructor( |
|
||||||
private http:HttpClient, |
|
||||||
public dialogRef: MatDialogRef<saveTwoDialog>, |
|
||||||
public canvasData: CanvasShareDataService, |
|
||||||
@Inject(MAT_DIALOG_DATA) public data) {} |
|
||||||
|
|
||||||
type = this.data.type |
|
||||||
allDisposalNode = this.data.allDisposalNode |
|
||||||
allPlanDisposalNode = [] |
|
||||||
allRootDisposalNode = [{name:"根节点",id:null}] |
|
||||||
allDisposalNodeChild = [] |
|
||||||
ngOnInit(): void { |
|
||||||
//所有非数据节点
|
|
||||||
this.allDisposalNode.forEach(item => { |
|
||||||
if(!item.sitePlanId && !item.buildingAreaId){ |
|
||||||
this.allPlanDisposalNode.push(item) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
//所有一级节点
|
|
||||||
this.allDisposalNode.forEach(item => { |
|
||||||
if(!item.parentId){ |
|
||||||
this.allRootDisposalNode.push(item) |
|
||||||
} |
|
||||||
}) |
|
||||||
this.allDisposalNodeChild = JSON.parse(JSON.stringify(this.allDisposalNode)) |
|
||||||
this.allDisposalNodeChild.forEach(item => { |
|
||||||
item.children = [] |
|
||||||
this.allDisposalNodeChild.forEach(i => { |
|
||||||
if(i.parentId == item.id){ |
|
||||||
item.children.push(i) |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
// console.log(this.nodeItem.id)
|
|
||||||
} |
|
||||||
onNoClick(): void { |
|
||||||
this.dialogRef.close(); |
|
||||||
} |
|
||||||
nodeItem |
|
||||||
itemChildNum = 0 //点击处置节点子数据节点的数量
|
|
||||||
clickNode(item){ |
|
||||||
console.log(item) |
|
||||||
this.nodeItem = item |
|
||||||
this.allDisposalNodeChild.forEach(item => { |
|
||||||
if(item.id == this.nodeItem.id){ |
|
||||||
this.itemChildNum = item.children.length |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
selectedBuildingData = this.data.selectedBuildingData |
|
||||||
selectedSiteData = this.data.selectedSiteData |
|
||||||
onSubmit(value,type){ |
|
||||||
console.log(type) |
|
||||||
let name = this.selectedBuildingData.name + '-' + this.selectedSiteData.name |
|
||||||
//如果保存到已有节点
|
|
||||||
var postdata = { |
|
||||||
id: "", |
|
||||||
name: name, |
|
||||||
level: 0, |
|
||||||
order: this.itemChildNum, |
|
||||||
description: "", |
|
||||||
notes: "", |
|
||||||
weather: null, |
|
||||||
airTemperature: null, |
|
||||||
windDirection: null, |
|
||||||
windScale: null, |
|
||||||
imageNames: null, |
|
||||||
imageUrls: null, |
|
||||||
parentId: this.nodeItem ? this.nodeItem.id : null, |
|
||||||
disasterId: this.data.disasterId, |
|
||||||
planComponentId: sessionStorage.getItem('planId') || '', |
|
||||||
companyId: this.data.siteOrbuilding == -1 ? sessionStorage.getItem('companyId') : null, |
|
||||||
sitePlanId: this.data.siteOrbuilding==-1 ? this.selectedSiteData.id : null, |
|
||||||
buildingId: this.selectedBuildingData.id || null, |
|
||||||
buildingAreaId: this.data.siteOrbuilding!=-1 ? this.selectedSiteData.id : null |
|
||||||
} |
|
||||||
if(type == 'old'){ |
|
||||||
let istrue = this.canvasData.findDisposalNode(this.nodeItem.id,name) |
|
||||||
let putdata = this.nodeItem |
|
||||||
putdata.weather = this.canvasData.selectPanelPointBaseData.weather |
|
||||||
putdata.airTemperature = Number(this.canvasData.selectPanelPointBaseData.airTemperature) |
|
||||||
putdata.windScale = Number(this.canvasData.selectPanelPointBaseData.windScale)
|
|
||||||
putdata.windDirection = Number(this.canvasData.selectPanelPointBaseData.windDirection)
|
|
||||||
putdata.description = this.canvasData.selectPanelPointBaseData.description |
|
||||||
putdata.notes = this.canvasData.selectPanelPointBaseData.notes |
|
||||||
|
|
||||||
|
|
||||||
if(istrue){//如果该处置节点下已有同名数据节点 则只修改 2个接口
|
|
||||||
new Promise((resolve,reject)=>{ |
|
||||||
this.http.put(`/api/DisposalNodes/${value.nodeId}`,putdata).subscribe(data => { |
|
||||||
resolve("更新处置节点成功,将天气 节点详情等信息保存到点击的节点") |
|
||||||
}) |
|
||||||
}).then((values)=>{ |
|
||||||
console.log(9999,values) |
|
||||||
this.canvasData.sendMessage('send a message');//发布一条消息
|
|
||||||
// 保存平面图数据到当前节点
|
|
||||||
// let postdata = {}
|
|
||||||
// this.http.post(`/api/DisposalNodeData`,postdata).subscribe(data => {
|
|
||||||
// console.log("提交数据成功")
|
|
||||||
// })
|
|
||||||
}) |
|
||||||
|
|
||||||
}else{//需要3个接口
|
|
||||||
new Promise((resolve,reject)=>{ |
|
||||||
this.http.put(`/api/DisposalNodes/${value.nodeId}`,putdata).subscribe(data => { |
|
||||||
resolve("更新处置节点成功,将天气 节点详情等信息保存到点击的节点") |
|
||||||
}) |
|
||||||
}).then((values)=>{ |
|
||||||
console.log(values) |
|
||||||
postdata.level = putdata.level + 1
|
|
||||||
new Promise((resolve,reject) => { |
|
||||||
this.http.post(`/api/DisposalNodes`,postdata).subscribe(data => { |
|
||||||
resolve("创建数据节点成功") |
|
||||||
}) |
|
||||||
}).then((values)=>{ |
|
||||||
console.log(values) |
|
||||||
// 保存平面图数据到当前节点
|
|
||||||
// let postdata = {}
|
|
||||||
// this.http.post(`/api/DisposalNodeData`,postdata).subscribe(data => {
|
|
||||||
// console.log("提交数据成功")
|
|
||||||
// })
|
|
||||||
this.canvasData.sendMessage('send a message');//发布一条消息
|
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
}else{//如果保存到新建节点
|
|
||||||
let dispositionNodeData //处置节点data
|
|
||||||
let order |
|
||||||
let oneLevelNum = [] |
|
||||||
//将order赋值为所有一级节点最后一个+1
|
|
||||||
this.allDisposalNode.forEach(item => { |
|
||||||
if(!item.parentId){ |
|
||||||
oneLevelNum.push(item) |
|
||||||
} |
|
||||||
}) |
|
||||||
order = oneLevelNum[oneLevelNum.length - 1].order + 1 |
|
||||||
if(this.nodeItem){//如果点击了下拉选择框
|
|
||||||
if(this.nodeItem.id != null){ |
|
||||||
this.allDisposalNodeChild.forEach(item => { |
|
||||||
if(item.id == this.nodeItem.id){ |
|
||||||
order = item.children.length |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
dispositionNodeData = { |
|
||||||
id: "", |
|
||||||
name: value.name, |
|
||||||
level: this.nodeItem && this.nodeItem.id != null ? this.nodeItem.level + 1 : 0, |
|
||||||
order: order, |
|
||||||
description: "", |
|
||||||
notes: "", |
|
||||||
weather: null, |
|
||||||
airTemperature: 0, |
|
||||||
windDirection: 0, |
|
||||||
windScale: 0, |
|
||||||
imageNames: null, |
|
||||||
imageUrls: null, |
|
||||||
parentId: this.nodeItem ? this.nodeItem.id : null, |
|
||||||
disasterId: this.data.disasterId, |
|
||||||
planComponentId: sessionStorage.getItem('planId') || '', |
|
||||||
companyId: null, |
|
||||||
sitePlanId: null, |
|
||||||
buildingId: null, |
|
||||||
buildingAreaId: null |
|
||||||
} |
|
||||||
|
|
||||||
dispositionNodeData.weather = this.canvasData.selectPanelPointBaseData.weather |
|
||||||
dispositionNodeData.airTemperature = Number(this.canvasData.selectPanelPointBaseData.airTemperature) |
|
||||||
dispositionNodeData.windScale = Number(this.canvasData.selectPanelPointBaseData.windScale)
|
|
||||||
dispositionNodeData.windDirection = Number(this.canvasData.selectPanelPointBaseData.windDirection)
|
|
||||||
dispositionNodeData.description = this.canvasData.selectPanelPointBaseData.description |
|
||||||
dispositionNodeData.notes = this.canvasData.selectPanelPointBaseData.notes |
|
||||||
//1.先创建一个处置节点 然后 .then 2.创建数据节点到刚创建的处置节点 3.然后拿着创建好的数据节点的id 将平面图data保存
|
|
||||||
new Promise((resolve,reject) => { |
|
||||||
this.http.post("/api/DisposalNodes",dispositionNodeData).subscribe((data:any) => { |
|
||||||
resolve(data.id) |
|
||||||
}) |
|
||||||
}).then((id) => { |
|
||||||
let dataNodeData
|
|
||||||
console.log("qnm",id) |
|
||||||
new Promise((resolve,reject) => { |
|
||||||
postdata.parentId = id |
|
||||||
postdata.level = dispositionNodeData.level + 1 |
|
||||||
this.http.post("/api/DisposalNodes",postdata).subscribe((data:any) => { |
|
||||||
resolve(data.id) |
|
||||||
}) |
|
||||||
}).then((id) => { |
|
||||||
// 保存平面图数据到当前节点
|
|
||||||
// let postdata = {}
|
|
||||||
// this.http.post(`/api/DisposalNodeData`,postdata).subscribe(data => {
|
|
||||||
// console.log("提交数据成功")
|
|
||||||
// })
|
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
<div mat-dialog-title>处置节点保存</div> |
|
||||||
<div style="display: flex;"> |
|
||||||
<button mat-stroked-button style="margin-right: 5px;" (click)="saveType('new')">新建节点并保存</button> |
|
||||||
<button mat-stroked-button (click)="saveType('old')">保存到已有节点</button> |
|
||||||
</div> |
|
||||||
@ -1,53 +0,0 @@ |
|||||||
<div *ngIf="type == 'new'"> |
|
||||||
<div mat-dialog-title>新增节点</div> |
|
||||||
<div> |
|
||||||
<form (ngSubmit)="onSubmit(form.value,'new')" #form="ngForm" class="example-container"> |
|
||||||
|
|
||||||
<div mat-dialog-content> |
|
||||||
<mat-form-field> |
|
||||||
<input type="text" matInput ngModel |
|
||||||
required name="name" placeholder="节点名称" autocomplete="off"> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
<div mat-dialog-content> |
|
||||||
<mat-form-field> |
|
||||||
<mat-select [(value)]="allRootDisposalNode[0].name" required placeholder="父节点名称"> |
|
||||||
<mat-option *ngFor="let item of allRootDisposalNode" [value]="item.name" (click)="clickNode(item)"> |
|
||||||
{{item.name}} |
|
||||||
</mat-option> |
|
||||||
</mat-select> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
<div mat-dialog-actions> |
|
||||||
<button mat-raised-button color="primary" type="submit" |
|
||||||
[disabled]="!form.form.valid"> |
|
||||||
确定 |
|
||||||
</button> |
|
||||||
<button mat-raised-button mat-dialog-close>取消</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div *ngIf="type == 'old'"> |
|
||||||
<div mat-dialog-title>保存到已有节点</div> |
|
||||||
<div> |
|
||||||
<form (ngSubmit)="onSubmit(form.value,'old')" #form="ngForm" class="example-container"> |
|
||||||
<div mat-dialog-content> |
|
||||||
<mat-form-field> |
|
||||||
<mat-select required ngModel placeholder="父节点名称" name="nodeId"> |
|
||||||
<mat-option *ngFor="let item of allPlanDisposalNode" [value]="item.id" (click)="clickNode(item)"> |
|
||||||
{{item.name}} |
|
||||||
</mat-option> |
|
||||||
</mat-select> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
<div mat-dialog-actions> |
|
||||||
<button mat-raised-button color="primary" type="submit" |
|
||||||
[disabled]="!form.form.valid"> |
|
||||||
确定 |
|
||||||
</button> |
|
||||||
<button mat-raised-button mat-dialog-close>取消</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
<div style="position: relative;width: 1400px;height: 800px;line-height: 800px;" class="swiper-container"> |
|
||||||
<div style="position: absolute;right: -2px;top: -392px;cursor: pointer;z-index: 999;width: 24px;height: 24px;" (click)="closeDialog()"> |
|
||||||
<span><mat-icon>clear</mat-icon></span> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="swiper-wrapper"> |
|
||||||
<div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr"> |
|
||||||
<img id="bigimg" (mousewheel)="zoomimg($event)" style=" |
|
||||||
max-width: 96%; |
|
||||||
max-height: 100%; |
|
||||||
min-width: 1px; |
|
||||||
min-height: 1px; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
bottom: 0; |
|
||||||
right: 0; |
|
||||||
margin: auto;" [src]="img.PropertyValue" alt=""> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<!-- 如果需要导航按钮 --> |
|
||||||
<div class="swiper-button-next"></div> |
|
||||||
<div class="swiper-button-prev"></div> |
|
||||||
</div> |
|
||||||
@ -1,76 +0,0 @@ |
|||||||
<div class="box"> |
|
||||||
<div class="title" style="position: relative;"> |
|
||||||
<div class="divtype" (click)="typeSelect(1)" [ngClass]="{'selectedBtn': istype}">危化品类型</div> |
|
||||||
<div class="divtype" (click)="typeSelect(2)" [ngClass]="{'selectedBtn': !istype}">危化品分布</div> |
|
||||||
<div class="bigTalkBox" style="position: absolute;right: 26px;top: 8px;"> |
|
||||||
<mat-icon class="titleIcon" (click)="openTalkDiv()">volume_up</mat-icon> |
|
||||||
<div class="talkBox" *ngIf="isOpenTalk"> |
|
||||||
<div class="btndiv"> |
|
||||||
<div>泵房</div> |
|
||||||
<div>控制室</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
<div class="bottomDiv"> |
|
||||||
<div> |
|
||||||
<mat-icon>settings_voice</mat-icon> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
按住说话 |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<mat-icon>search</mat-icon> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="body"> |
|
||||||
<!-- 危化品类型 --> |
|
||||||
<div class="type" *ngIf="istype"> |
|
||||||
<div class="leftbox"> |
|
||||||
<div *ngFor="let item of typedata,let key = index" [title]="item.name" (click)="selectedDiv(key,item)" [ngClass]="{'divselected': key == selectedIndex}"><span>{{item.name}}</span></div> |
|
||||||
</div> |
|
||||||
<div class="rightbox"> |
|
||||||
<table> |
|
||||||
<tr> |
|
||||||
<th>品名</th> |
|
||||||
<th>英文名</th> |
|
||||||
<th>分子式</th> |
|
||||||
<th>分类</th> |
|
||||||
<th>查看详情</th> |
|
||||||
</tr> |
|
||||||
<tr *ngFor="let item of detaildata"> |
|
||||||
<td>{{item.name}}</td> |
|
||||||
<td>{{item.englishname}}</td> |
|
||||||
<td>{{item.molecularformula}}</td> |
|
||||||
<td>{{item.type}}</td> |
|
||||||
<td (click)="openDetails(item)">查看详情</td> |
|
||||||
</tr> |
|
||||||
|
|
||||||
</table> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<!-- 危化品分布 --> |
|
||||||
<app-gis *ngIf="!istype"></app-gis> |
|
||||||
<!-- 详情弹出框 --> |
|
||||||
<div class="openDiv" *ngIf="isOpen" cdkDragBoundary=".box" cdkDrag > |
|
||||||
<div class="top" cdkDragHandle> |
|
||||||
<h4>{{detailNode.name}}</h4> |
|
||||||
<!-- <div class="btn" style="right: 33px;" title="最小化">-</div> --> |
|
||||||
<div class="btn" title="关闭" (click)="closeDiv()">x</div> |
|
||||||
</div> |
|
||||||
<div class="details"> |
|
||||||
<div class="left"> |
|
||||||
<div (click)="clickNode(0)">品名</div> |
|
||||||
<div (click)="clickNode(1)">理化属性</div> |
|
||||||
<div (click)="clickNode(2)">危害特性</div> |
|
||||||
<div (click)="clickNode(3)">灭火剂</div> |
|
||||||
<div (click)="clickNode(4)">储运注意事项</div> |
|
||||||
</div> |
|
||||||
<div class="right" [innerHTML]="detailNode.content[num].data | safeHtml"> |
|
||||||
|
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,261 +0,0 @@ |
|||||||
.box{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
// border: 1px solid red; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
.title{ |
|
||||||
flex: 2%; |
|
||||||
width: 100%; |
|
||||||
padding-top: 10px; |
|
||||||
font-size: 20px; |
|
||||||
.divtype{ |
|
||||||
display: inline-block; |
|
||||||
width: 126px; |
|
||||||
height: 35px; |
|
||||||
line-height: 35px; |
|
||||||
text-align: center; |
|
||||||
border:1px solid #26b5fb; |
|
||||||
color: white; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.selectedBtn{ |
|
||||||
background-color: #e88108; |
|
||||||
} |
|
||||||
.bigTalkBox{ |
|
||||||
user-select: none; |
|
||||||
.titleIcon{ |
|
||||||
font-size: 33px; |
|
||||||
vertical-align: sub; |
|
||||||
color: white; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.talkBox{ |
|
||||||
width: 309px; |
|
||||||
height: 326px; |
|
||||||
border: 1px solid #30bbec; |
|
||||||
background-color: #013a64; |
|
||||||
opacity: .9 ; |
|
||||||
position: absolute; |
|
||||||
top: 32px; |
|
||||||
right:4px; |
|
||||||
z-index: 2000; |
|
||||||
.btndiv{ |
|
||||||
div{ |
|
||||||
border-radius: 18px; |
|
||||||
width: 70px; |
|
||||||
height: 30px; |
|
||||||
text-align: center; |
|
||||||
line-height: 30px; |
|
||||||
display: inline-block; |
|
||||||
font-size: 13px; |
|
||||||
color: white; |
|
||||||
cursor: pointer; |
|
||||||
|
|
||||||
} |
|
||||||
div:nth-child(1){ |
|
||||||
background-color: #fe9400; |
|
||||||
margin: 10px; |
|
||||||
} |
|
||||||
div:nth-child(2){ |
|
||||||
background-color: #f95e5a; |
|
||||||
} |
|
||||||
} |
|
||||||
.bottomDiv{ |
|
||||||
position: absolute; |
|
||||||
bottom:6px; |
|
||||||
width: 100%; |
|
||||||
height: 32px; |
|
||||||
line-height: 32px; |
|
||||||
display: flex; |
|
||||||
color: white; |
|
||||||
text-align: center; |
|
||||||
mat-icon{ |
|
||||||
vertical-align: sub; |
|
||||||
} |
|
||||||
div:nth-child(1){ |
|
||||||
flex: 1; |
|
||||||
} |
|
||||||
div:nth-child(2){ |
|
||||||
flex: 6; |
|
||||||
color: #409eff; |
|
||||||
background: url('../../../assets/images/输入框.png'); |
|
||||||
background-size: 100% 100%; |
|
||||||
} |
|
||||||
div:nth-child(3){ |
|
||||||
flex: 1; |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.body{ |
|
||||||
width: 99.9%; |
|
||||||
height: 100%; |
|
||||||
border:1px solid #26b5fb; |
|
||||||
.type{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
.leftbox{ |
|
||||||
height: 100%; |
|
||||||
// flex: 20%; |
|
||||||
width: 16%; |
|
||||||
border-right: 1px solid #26b5fb; |
|
||||||
div{ |
|
||||||
white-space: nowrap;/*一行显示*/ |
|
||||||
overflow: hidden;/*超出部分隐藏*/ |
|
||||||
text-overflow: ellipsis;/*用...代替超出部分*/ |
|
||||||
width: 100%; |
|
||||||
height:46px; |
|
||||||
line-height:46px; |
|
||||||
letter-spacing: 3px; |
|
||||||
font-size: 20px; |
|
||||||
color: white; |
|
||||||
// padding-left: 5px; |
|
||||||
cursor: pointer; |
|
||||||
span{ |
|
||||||
margin-left: 6px; |
|
||||||
} |
|
||||||
} |
|
||||||
div:hover{ |
|
||||||
background-color: #e6963c; |
|
||||||
} |
|
||||||
.divselected{ |
|
||||||
background-color: #e88108; |
|
||||||
} |
|
||||||
} |
|
||||||
.rightbox{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
table{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
tr{ |
|
||||||
width: 100%; |
|
||||||
display: flex; |
|
||||||
height: 38px; |
|
||||||
line-height: 38px; |
|
||||||
th{ |
|
||||||
text-align: center; |
|
||||||
flex: 1; |
|
||||||
color: #f7ba2a; |
|
||||||
font-size: 20px; |
|
||||||
height: 30px; |
|
||||||
line-height: 30px; |
|
||||||
} |
|
||||||
td{ |
|
||||||
text-align: center; |
|
||||||
flex: 1; |
|
||||||
color: white; |
|
||||||
} |
|
||||||
td:last-child{ |
|
||||||
cursor: pointer; |
|
||||||
color: #f0c398; |
|
||||||
} |
|
||||||
td:last-child:hover{ |
|
||||||
color: #f7ba2a; |
|
||||||
} |
|
||||||
} |
|
||||||
tr:first-child{ |
|
||||||
margin-top:6px; |
|
||||||
border-bottom: 1px solid #26b5fb; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
tr:nth-child(2){ |
|
||||||
margin-top: 8px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.openDiv{ |
|
||||||
z-index: 3000; |
|
||||||
width:600px; |
|
||||||
height: 500px; |
|
||||||
position: fixed; |
|
||||||
left: 0; |
|
||||||
top:0; |
|
||||||
right: 0; |
|
||||||
bottom: 0; |
|
||||||
margin:auto; |
|
||||||
background: #063659; |
|
||||||
opacity: 0.9; |
|
||||||
border: 1px solid #26b5fb; |
|
||||||
div{ |
|
||||||
float: left; |
|
||||||
} |
|
||||||
.top{ |
|
||||||
width: 100%; |
|
||||||
height: 32px; |
|
||||||
line-height: 32px; |
|
||||||
text-align: center; |
|
||||||
border-bottom: 1px solid #ff4949; |
|
||||||
font-size: 18px; |
|
||||||
position: relative; |
|
||||||
h4{ |
|
||||||
color: red; |
|
||||||
} |
|
||||||
.btn{ |
|
||||||
width: 30px; |
|
||||||
height: 30px; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
right: 0; |
|
||||||
color: #919191; |
|
||||||
cursor: pointer; |
|
||||||
font-size: 18px; |
|
||||||
} |
|
||||||
} |
|
||||||
.details{ |
|
||||||
width: 100%; |
|
||||||
height: 468px; |
|
||||||
display: flex; |
|
||||||
.left{ |
|
||||||
height: 100%; |
|
||||||
flex: 2; |
|
||||||
border-right:1px solid #26b5fb; |
|
||||||
div{ |
|
||||||
width: 100%; |
|
||||||
height: 33px; |
|
||||||
line-height: 33px; |
|
||||||
text-align: center; |
|
||||||
color: #8aadce; |
|
||||||
border-bottom:1px solid #999b9d ; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
div:hover{ |
|
||||||
background: #041f33; |
|
||||||
} |
|
||||||
} |
|
||||||
.right{ |
|
||||||
flex: 8; |
|
||||||
height: 468px; |
|
||||||
color: white; |
|
||||||
letter-spacing: 2px; |
|
||||||
padding: 5px 8px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.size{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
position: relative; |
|
||||||
z-index: 100; |
|
||||||
} |
|
||||||
#selectedBox{ |
|
||||||
width: 120px; |
|
||||||
height: 20px; |
|
||||||
position: absolute; |
|
||||||
z-index: 101; |
|
||||||
left: 6px; |
|
||||||
top: 0; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { DangerousComponent } from './dangerous.component'; |
|
||||||
|
|
||||||
describe('DangerousComponent', () => { |
|
||||||
let component: DangerousComponent; |
|
||||||
let fixture: ComponentFixture<DangerousComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ DangerousComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(DangerousComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,267 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
declare var AMap: any; |
|
||||||
@Component({ |
|
||||||
selector: 'app-dangerous', |
|
||||||
templateUrl: './dangerous.component.html', |
|
||||||
styleUrls: ['./dangerous.component.scss'] |
|
||||||
}) |
|
||||||
export class DangerousComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
map:any //地图
|
|
||||||
ngOnInit(): void { |
|
||||||
|
|
||||||
} |
|
||||||
//打开说话框
|
|
||||||
isOpenTalk = false |
|
||||||
openTalkDiv(){ |
|
||||||
this.isOpenTalk = !this.isOpenTalk |
|
||||||
} |
|
||||||
selectedIndex = 0 |
|
||||||
typedata = [ |
|
||||||
{name:"爆炸品",details:[ |
|
||||||
{name:"点火绳",englishname:"Det donating Cords",molecularformula:"无",type:"点火绳"}, |
|
||||||
{name:"乙二硝胺",englishname:"Ethylene Dinitramine",molecularformula:"(CH2NHNO2)2",type:"炸药及爆炸性药品"}, |
|
||||||
{name:"导爆锁",englishname:"Detonating Cords",molecularformula:"无",type:"起爆器材"} |
|
||||||
]}, |
|
||||||
{name:"气体",details:[ |
|
||||||
{name:"乙炔",englishname:"Acetylene",molecularformula:"C2H2",type:"易燃气体"}, |
|
||||||
{name:"二氟氯甲烷",englishname:"Chlorodifluoromethane",molecularformula:"CHCF2",type:"非易燃无毒气体"}, |
|
||||||
{name:"二氧化硫",englishname:"Sulfur die oxIde",molecularformula:"SO2",type:"毒性气体"} |
|
||||||
]}, |
|
||||||
{name:"易燃液体",details:[ |
|
||||||
{name:"2-乙基-1-丁烯",englishname:"2-Ethyl-1-butene",molecularformula:"CH3CH2(C2Hb)CCH2",type:"低闪点液体",content:[ |
|
||||||
{data:"2-乙基-1-丁烯"}, |
|
||||||
{data:"无色液体,不溶于水,能溶于乙醇丙酮和乙醚。相对密度:0.69(20℃) ,沸点:62℃ ,闪点:<-20℃, 自燃点:315℃"}, |
|
||||||
{data:`易燃,遇热、明火、强氧化剂,均有引起燃烧爆炸的危险。</br>其蒸气能与空气形成爆炸性混合物,遇火星易爆炸。`}, |
|
||||||
{data:"泡沫、二氧化碳、干粉、1211。"}, |
|
||||||
{data:"储存于阴凉通风仓间内,仓温不超过30℃,远离火种、热源,防止阳光直射。应与硝酸等氧化剂分仓间储存。不宜久储,以防聚合变质。搬运时应轻装轻卸,防止包装破损。"}, |
|
||||||
]}, |
|
||||||
{name:"2-乙基丁醛",englishname:"Diethyl Acetaldehyde",molecularformula:"C212 CHCHO",type:"中闪点液体",content:[ |
|
||||||
{data:"2-乙基丁醛"}, |
|
||||||
{data:`无色液体,不溶于水。能与乙醇、乙燃醚混溶。
|
|
||||||
相对密度:0.8164(20℃) |
|
||||||
凝固点:-89℃ |
|
||||||
沸点:116.8℃ |
|
||||||
闪点:21.1℃(开杯 |
|
||||||
爆炸极限:1.2%~7.7% |
|
||||||
蒸气压:1.827kPa(20℃)`},
|
|
||||||
{data:`遇明火、高温、氧化剂,有引起燃烧爆
|
|
||||||
炸的危险。`},
|
|
||||||
{data:`泡沫、干粉、二氧化碳、砂土。`}, |
|
||||||
{data:`包装要密封。储存于阴凉通风
|
|
||||||
的仓间内,防止阳光直射,仓温不超过30℃,远离火 |
|
||||||
种、热源。应与酸类、氧化剂分仓间存放,切勿混储混 |
|
||||||
运。搬运时轻装轻卸,防止包装破损。不宜久储。若 |
|
||||||
触及皮肤,应及时用水冲洗。`},
|
|
||||||
]}, |
|
||||||
{name:"乙二醇一乙醚",englishname:"Ethylene Glycol Monoethyl Ether",molecularformula:"CH2OHCH2OC2H5",type:"高闪点液体",content:[ |
|
||||||
{data:`乙二醇一乙醚`}, |
|
||||||
{data:`无色液体,几无气味。能与水和醇等
|
|
||||||
大多数有机溶剂混溶。稍有毒,空气中的最高容许浓 |
|
||||||
度为2.0×10-4。 |
|
||||||
相对密度:0.9360(15℃) |
|
||||||
凝固点:-70 |
|
||||||
沸点:135.1℃ |
|
||||||
闪点:43℃ |
|
||||||
自燃点:235℃ |
|
||||||
爆炸极限:1.8%~14% |
|
||||||
蒸气压:506.6Pa(20℃)`},
|
|
||||||
{data:`遇明火、高温或氧化剂,有发生燃烧
|
|
||||||
的危险。`},
|
|
||||||
{data:`泡沫、二氧化碳、砂土、干粉。`}, |
|
||||||
{data:`储存于阴凉通风仓间内,远离火
|
|
||||||
种、热源。应与氧化剂分开堆放。包装要密封,防止损 |
|
||||||
耗和变质。搬运时轻装轻卸,保持包装完整`},
|
|
||||||
]} |
|
||||||
]}, |
|
||||||
{name:"易燃固体",details:[ |
|
||||||
{name:"N,N-二亚硝基五亚甲基四胺",englishname:"N,N- Dinitrosopentamethylene",molecularformula:"(CH2)(NO)2N",type:"一级易燃固体",content:[ |
|
||||||
{data:`N,N-二亚硝基五亚甲基四胺`}, |
|
||||||
{data:`淡黄色粉末或砂粒状固体。<span style="color: #ff6600;" >易燃,有毒</span>。易溶于丙酮,略溶于醇,微溶于氯仿,不溶于乙醚及水。<span style="color: #ff6600;" >温度≥199℃时分解,与酸或酸雾接触,将迅速起火燃烧。</span>
|
|
||||||
相对密度:1.4~1.4 |
|
||||||
熔点:200℃(分解)`},
|
|
||||||
{data:`遇高温、明火或与酸(无机酸、有机酸)接触,容易引起剧烈燃烧。与氧化剂混和,能成为爆炸性混合物`}, |
|
||||||
{data:"水、砂土。"}, |
|
||||||
{data:"储存于阴凉通风干燥的库房内。远离火种及热源。严禁与无机酸、有机酸、碱性物质、氧化剂混储混运。要经常检查同库混放物质观其性能是否抵触。储存期最长不超过6个月(自出厂日起)。搬运时应轻装轻卸,防止摩擦、撞击引起燃烧"}, |
|
||||||
]}, |
|
||||||
{name:"2,4-二亚硝基间苯二酚",englishname:"2,4- Dinitrosores",molecularformula:"C6H2(OH)2(NO)2",type:"二级易燃固体",content:[ |
|
||||||
{data:`2,4-二亚硝基间苯二酚`}, |
|
||||||
{data:`从50%乙醇中析出者,呈黄褐色叶片
|
|
||||||
状结晶。<span style="color: #ff6600;" >易溶于乙醚和苯,难溶于冷水和乙醇。</span>遇铜铁和钴盐溶液,分别显褐色、黄绿色和黄褐色。受热剧烈分解。自甲醇及水中析出者,具有1个分子结晶水, |
|
||||||
不溶于水,其熔点为162~163℃ |
|
||||||
熔点:168℃ |
|
||||||
自燃点:115℃`},
|
|
||||||
{data:`受热或与氧化剂接触,有燃烧爆炸的
|
|
||||||
危险。`},
|
|
||||||
{data:`砂土、二氧化碳、雾状水。`}, |
|
||||||
{data:`储存于阴凉通风仓间内。最高仓温不宜超过30℃。远离火种及热源。应与氧化剂分仓间存放,与金属粉末及酸类隔离堆放。搬运时应轻装轻卸,防止猛撞引起爆炸。`}, |
|
||||||
]}, |
|
||||||
{name:"乙基膦",englishname:"Ethylphosphine",molecularformula:"C2H5PH2",type:"一级易于自燃物质",content:[ |
|
||||||
{data:`乙基膦`}, |
|
||||||
{data:`无色液体。遇水分解。
|
|
||||||
相对密度:<1 |
|
||||||
沸点:25℃`},
|
|
||||||
{data:`在空气中能自燃,接触溴、氯和发烟
|
|
||||||
硝酸会发生爆炸。遇浓硫酸会燃烧`},
|
|
||||||
{data:`干砂、干粉。禁止用水、泡沫`}, |
|
||||||
{data:`储存于阴凉干燥仓间内。<span style="color: #ff6600;" >最高仓温不超过20℃。</span>包装必须完整、密封,防止与空气接触。堆放时应与卤素、酸类、潮解性物质、氧化剂分开。远离火种、热源。搬运时轻装轻卸,保持包装完整。`}, |
|
||||||
]} |
|
||||||
]}, |
|
||||||
{name:"氧化物和有机过氧化物",details:[ |
|
||||||
{name:"三氟化溴",englishname:"Bromine Trifluoride",molecularformula:"BrF3",type:"一级氧化性物质"}, |
|
||||||
{name:"三氧化铬(无水)",englishname:"Chromic Anhydride",molecularformula:"CrO3",type:"二级氧化性物质"}, |
|
||||||
{name:"2,5-二甲基-2,5-双",englishname:"2,5- Dimethyl-2",molecularformula:"C16H30O4",type:"有机过氧化物"} |
|
||||||
]}, |
|
||||||
{name:"毒性物质",details:[ |
|
||||||
{name:"二氧化硒",englishname:"Selenium dioxide",molecularformula:"SeO2",type:"一级无机毒性物质"}, |
|
||||||
{name:"一氯乙醛",englishname:"Chloroacetaldehyde",molecularformula:"C2H3OCl",type:"一级有机毒性物质"}, |
|
||||||
{name:"一氧化铅",englishname:"Lead Oxide",molecularformula:"PbO",type:"二级无机毒性物质"} |
|
||||||
]}, |
|
||||||
{name:"化学毒剂",details:[ |
|
||||||
{name:"二氧二甲胺基氰磷酸乙酯化硒",englishname:"Tabun",molecularformula:"(CH3)2 NPOCNO2H5O",type:"化学毒剂"} |
|
||||||
]}, |
|
||||||
{name:"生物战剂",details:[ |
|
||||||
{name:"炭疽杆菌",englishname:"Bacillus Anthracis",molecularformula:"无",type:"生物战剂"} |
|
||||||
]}, |
|
||||||
{name:"杂项危险物质",details:[ |
|
||||||
{name:"乙二醇",englishname:"Ethylene Glycol",molecularformula:"HOCH2CH2OH",type:"杂项危险物质"} |
|
||||||
]}, |
|
||||||
] |
|
||||||
|
|
||||||
|
|
||||||
num = 0 |
|
||||||
clickNode(num){ |
|
||||||
this.num = num |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
detaildata = this.typedata[0].details |
|
||||||
selectedDiv(index,item){ |
|
||||||
this.selectedIndex = index |
|
||||||
this.detaildata = item.details |
|
||||||
} |
|
||||||
//类型选择
|
|
||||||
istype = true//默认选择危化品类型
|
|
||||||
typeSelect(type){ |
|
||||||
if(type == 1){ |
|
||||||
this.istype = true
|
|
||||||
}else{ |
|
||||||
this.istype = false |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
//查看详情框打开
|
|
||||||
isOpen = false |
|
||||||
closeDiv(){ |
|
||||||
this.isOpen = false |
|
||||||
} |
|
||||||
|
|
||||||
detailNode = null |
|
||||||
openDetails(item){ |
|
||||||
this.detailNode = item |
|
||||||
if(item.content){ |
|
||||||
this.isOpen = true |
|
||||||
} |
|
||||||
|
|
||||||
this.num = 0 |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-gis', |
|
||||||
templateUrl: './gis.html', |
|
||||||
styleUrls: ['./dangerous.component.scss'] |
|
||||||
}) |
|
||||||
export class GisComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
map:any //地图
|
|
||||||
ngOnInit(): void { |
|
||||||
setTimeout(() => { |
|
||||||
this.creatMap() |
|
||||||
}, 0); |
|
||||||
} |
|
||||||
|
|
||||||
markerIcon = new AMap.Icon({
|
|
||||||
image:"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", |
|
||||||
size: new AMap.Size(52, 52), //图标大小
|
|
||||||
imageSize: new AMap.Size(26,36) |
|
||||||
})
|
|
||||||
//地图范围圆圈
|
|
||||||
circle = new AMap.Circle({ |
|
||||||
center: [109.660144, 23.100172], |
|
||||||
radius: 500, //半径
|
|
||||||
strokeOpacity: 1,
|
|
||||||
fillOpacity: 0.4, |
|
||||||
strokeStyle: 'dashed', |
|
||||||
strokeDasharray: [10, 10],
|
|
||||||
// 线样式还支持 'dashed'
|
|
||||||
fillColor: '#1791fc', |
|
||||||
zIndex: 50, |
|
||||||
}) |
|
||||||
|
|
||||||
creatMap(){ |
|
||||||
var satellite = new AMap.TileLayer.Satellite(); |
|
||||||
var roadNet = new AMap.TileLayer.RoadNet(); |
|
||||||
|
|
||||||
// 创建一个 icon
|
|
||||||
var startIcon = new AMap.Icon({ |
|
||||||
// 图标尺寸
|
|
||||||
// size: new AMap.Size(150, 60),
|
|
||||||
// 图标的取图地址
|
|
||||||
image: '../../../assets/images/fire.png', |
|
||||||
// // 图标所用图片大小
|
|
||||||
imageSize: new AMap.Size(60, 60), |
|
||||||
// // 图标取图偏移量
|
|
||||||
// imageOffset: new AMap.Pixel(-9, -3)
|
|
||||||
}); |
|
||||||
var viaMarker = new AMap.Marker({ |
|
||||||
position: new AMap.LngLat(109.660144, 23.100172), |
|
||||||
icon: startIcon, |
|
||||||
offset: new AMap.Pixel(-20, -30) |
|
||||||
}); |
|
||||||
let marker1 = new AMap.Marker({ |
|
||||||
icon: this.markerIcon, |
|
||||||
position: [109.644436,23.101842], |
|
||||||
offset: new AMap.Pixel(-7, -34) |
|
||||||
}); |
|
||||||
let marker2 = new AMap.Marker({ |
|
||||||
icon: this.markerIcon, |
|
||||||
position: [109.666768,23.104276], |
|
||||||
offset: new AMap.Pixel(0, -20) |
|
||||||
}); |
|
||||||
let marker3 = new AMap.Marker({ |
|
||||||
icon: this.markerIcon, |
|
||||||
position: [109.660118,23.095472], |
|
||||||
offset: new AMap.Pixel(-13, -8) |
|
||||||
}); |
|
||||||
|
|
||||||
this.map = new AMap.Map('size',{ |
|
||||||
center: [109.661536,23.098726],//中心点坐标
|
|
||||||
zoom: 15.8, |
|
||||||
layers:[ |
|
||||||
satellite, |
|
||||||
roadNet |
|
||||||
] |
|
||||||
}); |
|
||||||
this.circle.setMap(this.map);//增加范围圆圈
|
|
||||||
this.map.add([viaMarker]);//火源标点
|
|
||||||
marker1.setMap(this.map); |
|
||||||
marker2.setMap(this.map); |
|
||||||
marker3.setMap(this.map); |
|
||||||
} |
|
||||||
|
|
||||||
//范围选择
|
|
||||||
rangevalue = 500 |
|
||||||
|
|
||||||
rangeSelect(e){ |
|
||||||
this.circle.setRadius(Number(this.rangevalue)) |
|
||||||
this.circle.setMap(this.map);//增加范围圆圈
|
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,11 +0,0 @@ |
|||||||
<div style="width: 100%;height: 100%;position: relative;"> |
|
||||||
<div id="size" class="size"> |
|
||||||
|
|
||||||
</div> |
|
||||||
<div id="selectedBox" class="selectedBox"> |
|
||||||
<select (change)="rangeSelect($event)" [(ngModel)]="rangevalue"> |
|
||||||
<option value="500">500米</option> |
|
||||||
<option value="1000">1000米</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,98 +0,0 @@ |
|||||||
<div class="content"> |
|
||||||
<!-- [ngClass]="{closeLeft: !rightIsShow,openLeft: rightIsShow}" --> |
|
||||||
<div class="left"> |
|
||||||
<div class="header leftHeader" style="overflow: hidden;">到场力量</div> |
|
||||||
<div class="list"> |
|
||||||
<div class="tableDiv"> |
|
||||||
<div class="tableRows" *ngFor="let item of allCarsData;let key = index" (click)='selectCar(item)' [ngClass]="{selectIcon: selectCarID == item.Id}"> |
|
||||||
<div style="flex: 60%;display: flex;flex-direction: column;justify-content: center;align-items: center;"> |
|
||||||
<p style="flex: 60%;font-size: 16px;font-weight: 550;" class="contentText">{{item.Name}}</p> |
|
||||||
<p style="flex: 40%" class="contentText">{{item.FireTeamName}}</p> |
|
||||||
</div> |
|
||||||
<div class="countdown" style="color: #37f76D;" *ngIf="item.ReachTime < 1">已到场</div> |
|
||||||
<div class="countdown" *ngIf="item.ReachTime > 0"> |
|
||||||
<label [ngClass]="{smallFive: item.ReachTime<=300,bigTen: item.ReachTime>300}"> |
|
||||||
<countdown #key [config]="{leftTime: item.ReachTime,notify: [299],format: 'm:ss'}" (event)="handleEvent($event,item)"></countdown> |
|
||||||
</label> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<!-- canvas --> |
|
||||||
<div class="center" id="center"> |
|
||||||
<div class="header" style="position: relative;"> |
|
||||||
<div class="title">总平面图</div> |
|
||||||
<div class="draw"> |
|
||||||
<label title="开始绘制" (click)='plot(0)'></label> |
|
||||||
<label title="开始绘制" (click)='plot(1)'></label> |
|
||||||
</div> |
|
||||||
<div style="float: right;width: 66px;height: 100%;line-height: 40px;text-align: center;position: relative;"> |
|
||||||
<mat-icon style="color: #fff;font-size: 32px;width: 32px;height: 32px;" (click)='toggleSay()'>volume_up</mat-icon> |
|
||||||
<div class="rightSpeak" *ngIf="rightSayIsShow"> |
|
||||||
<div style="flex: 1;"> |
|
||||||
<div class="iconButton" style="background-color: #fe9400;">冷却</div> |
|
||||||
<div class="iconButton" style="background-color: #f95e5a;">登罐</div> |
|
||||||
<div class="iconButton" style="background-color: #0676ee;">注入泡沫</div> |
|
||||||
</div> |
|
||||||
<div style="width: 100%;height: 34px;line-height: 34px;display: flex;"> |
|
||||||
<mat-icon>settings_voice</mat-icon> |
|
||||||
<label class="sayBgc">按住说话</label> |
|
||||||
<mat-icon>search</mat-icon> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="canvas"> |
|
||||||
<!-- 底部车辆信息 --> |
|
||||||
<div class="bottomWork" *ngIf="bottomIsShow"> |
|
||||||
<div style="flex: 30%;line-height: 30px;width: 120px;color: #fff;text-align: center;"> |
|
||||||
<label>车辆属性 <mat-icon (click)="closeBottom()">highlight_off</mat-icon></label> |
|
||||||
</div> |
|
||||||
<div style="flex: 70%;display: flex;"> |
|
||||||
<div style="flex: 90%;"> |
|
||||||
<div class="publicRow" style="box-sizing: border-box;border-bottom: 1px solid #30bbec;color: #f7ae4a; font-weight: 550;"> |
|
||||||
<p>载水量</p> |
|
||||||
<p>载泡沫</p> |
|
||||||
<p>载人数</p> |
|
||||||
<p>吨位</p> |
|
||||||
<p>执行任务</p> |
|
||||||
<p>连接车辆</p> |
|
||||||
<p>水源占用</p> |
|
||||||
</div> |
|
||||||
<div class="publicRow" style="color: #fff;font-size: 12px;"> |
|
||||||
<p>{{canvasData.selectCar.WaterYield}}</p> |
|
||||||
<p>{{canvasData.selectCar.Foam}}</p> |
|
||||||
<p>{{canvasData.selectCar.PeopleNum}}</p> |
|
||||||
<p>{{canvasData.selectCar.Tonnage}}</p> |
|
||||||
<p> |
|
||||||
<input type="text" class="taskInput" [(ngModel)]="canvasData.selectCar.Assignment"> |
|
||||||
</p> |
|
||||||
<p title="{{canvasData.selectCar.LinkCar}}">{{canvasData.selectCar.LinkCar}}</p> |
|
||||||
<p title="{{canvasData.selectCar.WaterOccupy}}">{{canvasData.selectCar.WaterOccupy}}</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div style="flex: 10%;text-align: center;line-height: 70px;"> |
|
||||||
<button mat-button>发送</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<!-- 底部车辆信息 --> |
|
||||||
<!-- 右侧楼层区域 --> |
|
||||||
<div class="showRightStorey" *ngIf="!rightIsShow" title="打开楼层/区域"><mat-icon (click)='openRight()'>keyboard_arrow_left</mat-icon></div> |
|
||||||
<div class="rightStorey" [ngClass]="{closeRight: !rightIsShow,openRight: rightIsShow}"> |
|
||||||
<div style="flex: 10%;"> |
|
||||||
<label><mat-icon (click)='closeRight()' title="关闭楼层/区域">keyboard_arrow_right</mat-icon> 楼层/区域</label> |
|
||||||
</div> |
|
||||||
<div style="flex: 90%;border-top: 1px solid #30bbec;padding: 1px 0;"> |
|
||||||
<div style="font-size: 14px;width: 100%;height: 35px;line-height: 35px;background-color: rgba(7,89,155,0.7);"><label>厂区总平面图</label></div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<!-- 右侧楼层区域 --> |
|
||||||
<app-working-area #workingArea></app-working-area> |
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
<!-- canvas --> |
|
||||||
</div> |
|
||||||
@ -1,269 +0,0 @@ |
|||||||
.content { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 1px; |
|
||||||
overflow: hidden; |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
|
|
||||||
//左右侧 header |
|
||||||
.header { |
|
||||||
width: 100%; |
|
||||||
height: 40px; |
|
||||||
min-height: 40px; |
|
||||||
} |
|
||||||
.leftHeader { |
|
||||||
line-height: 40px; |
|
||||||
text-align: center; |
|
||||||
font-size: 20px; |
|
||||||
font-weight: 550; |
|
||||||
color: #F7bA2A; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.title { |
|
||||||
display: inline-block; |
|
||||||
margin: 1px 0; |
|
||||||
width: 120px; |
|
||||||
height: 38px; |
|
||||||
line-height: 38px; |
|
||||||
background: url('../../../assets/images/标签正常.png'); |
|
||||||
-moz-background-size:100% 100%; |
|
||||||
background-size:100% 100%; |
|
||||||
font-size: 20px; |
|
||||||
color: #fff; |
|
||||||
padding-left: 25px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
//左侧菜单 |
|
||||||
.left { |
|
||||||
width: 300px; |
|
||||||
height: 100%; |
|
||||||
min-width: 200px; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 1px; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
.list { |
|
||||||
flex: 1; |
|
||||||
overflow: hidden; |
|
||||||
.tableDiv { |
|
||||||
height: 100%; |
|
||||||
overflow-y: auto; |
|
||||||
border-left: 1px solid #30bbec; |
|
||||||
border-top: 1px solid #30bbec; |
|
||||||
} |
|
||||||
} |
|
||||||
//每一行 |
|
||||||
.tableRows { |
|
||||||
height: 50px; |
|
||||||
overflow: hidden; |
|
||||||
display: flex; |
|
||||||
margin: 13px 0; |
|
||||||
.contentText { |
|
||||||
font-size: 12px; |
|
||||||
color: #fff; |
|
||||||
cursor: pointer; |
|
||||||
overflow: hidden; |
|
||||||
text-overflow:ellipsis; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
.countdown{ |
|
||||||
flex: 40%; |
|
||||||
line-height: 50px; |
|
||||||
font-weight: 550; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
//打开关闭左侧 车辆 |
|
||||||
.openLeft { |
|
||||||
width: 300px; |
|
||||||
transition: width 0.5s; |
|
||||||
} |
|
||||||
.closeLeft { |
|
||||||
width: 0px; |
|
||||||
min-width: 0px; |
|
||||||
transition: width 0.5s; |
|
||||||
} |
|
||||||
|
|
||||||
//选中状态 |
|
||||||
.selectIcon { |
|
||||||
background-color: rgba(13, 139, 241, 0.7); |
|
||||||
} |
|
||||||
//小于五分钟 css |
|
||||||
.smallFive { |
|
||||||
color: rgb(245, 166, 19); |
|
||||||
} |
|
||||||
//大于十分钟 css |
|
||||||
.bigTen { |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
//右侧工作区 |
|
||||||
.center { |
|
||||||
flex: 1; |
|
||||||
min-width: 810px; |
|
||||||
box-sizing: border-box; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
.canvas { |
|
||||||
flex: 1; |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.mat-icon { vertical-align: middle; cursor: pointer; } |
|
||||||
//下方 车辆信息 UI |
|
||||||
.bottomWork { |
|
||||||
width: 800px; |
|
||||||
height: 100px; |
|
||||||
position: absolute; |
|
||||||
bottom: 5px; |
|
||||||
left: 50%; |
|
||||||
margin-left: -400px; |
|
||||||
z-index: 10; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
>div{ background-color:rgba(2, 44, 73, 0.9); } |
|
||||||
button { width: 50px; height: 40px; background-color: #67c23a; color: #fff; } |
|
||||||
//table表格 |
|
||||||
.publicRow { |
|
||||||
height: 50%; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
p { |
|
||||||
flex: 1; |
|
||||||
text-align: center; |
|
||||||
line-height: 35px; |
|
||||||
overflow: hidden; |
|
||||||
text-overflow:ellipsis; |
|
||||||
white-space: nowrap; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
} |
|
||||||
.taskInput { |
|
||||||
width: 100px; |
|
||||||
height: 24px; |
|
||||||
padding-left: 5px; |
|
||||||
outline: none; |
|
||||||
border: none; |
|
||||||
background-color:rgba(255,255,255,0); |
|
||||||
background: url('../../../assets/images/输入框.png') no-repeat; |
|
||||||
background-size: 100% 100%; |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//右侧 楼层UI |
|
||||||
.rightStorey { |
|
||||||
width: 100px; |
|
||||||
height: 250px; |
|
||||||
position: absolute; |
|
||||||
right: 2px; |
|
||||||
top: 50%; |
|
||||||
margin-top: -125px; |
|
||||||
z-index: 10; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
background-color:rgba(2, 44, 73, 0.9); |
|
||||||
color: #fff; |
|
||||||
font-weight: 300; |
|
||||||
>div {text-align: center; line-height: 25px;} |
|
||||||
} |
|
||||||
.showRightStorey { |
|
||||||
position: absolute; |
|
||||||
right: 0; |
|
||||||
top: 50%; |
|
||||||
margin-top: -13px; |
|
||||||
z-index: 10; |
|
||||||
width: 26px; |
|
||||||
height: 26px; |
|
||||||
line-height: 26px; |
|
||||||
text-align: center; |
|
||||||
background-color:rgba(2, 44, 73, 0.9); |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
//打开关闭右侧 楼层 |
|
||||||
.openRight { |
|
||||||
margin-right: 0px; |
|
||||||
transition: margin-right 0.5s; |
|
||||||
} |
|
||||||
.closeRight { |
|
||||||
margin-right: -300px; |
|
||||||
transition: margin-right 0.5s; |
|
||||||
} |
|
||||||
|
|
||||||
//右侧语音 UI |
|
||||||
.rightSpeak { |
|
||||||
position: absolute; |
|
||||||
top: 40px; |
|
||||||
left: -275px; |
|
||||||
width: 310px; |
|
||||||
height: 320px; |
|
||||||
z-index: 11; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 3px; |
|
||||||
border: 1px solid #30bbec; |
|
||||||
background-color:rgba(2, 44, 73, 0.9); |
|
||||||
color: #fff; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
.mat-icon { |
|
||||||
font-size: 28px; |
|
||||||
width: 28px; |
|
||||||
height: 28px; |
|
||||||
margin: 3px 10px; |
|
||||||
} |
|
||||||
.sayBgc { |
|
||||||
flex: 1; |
|
||||||
box-sizing: border-box; |
|
||||||
background: url('../../../assets/images/输入框.png'); |
|
||||||
background-size: 100% 100%; |
|
||||||
color: #30bbec; |
|
||||||
} |
|
||||||
.iconButton { |
|
||||||
margin: 10px; |
|
||||||
border-radius: 18px; |
|
||||||
width: 70px; |
|
||||||
height: 30px; |
|
||||||
text-align: center; |
|
||||||
line-height: 30px; |
|
||||||
display: inline-block; |
|
||||||
font-size: 13px; |
|
||||||
color: white; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//右侧 绘制工具 |
|
||||||
.draw { |
|
||||||
display: inline-block; |
|
||||||
position: absolute; |
|
||||||
width: 80px; |
|
||||||
height: 38px; |
|
||||||
top: 1px; |
|
||||||
left: 50%; |
|
||||||
margin-left: -40px; |
|
||||||
padding-top: 6px; |
|
||||||
label { |
|
||||||
display: inline-block; |
|
||||||
width: 24px; |
|
||||||
height: 24px; |
|
||||||
margin: 0 5px; |
|
||||||
border-radius: 50%; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
:first-child { |
|
||||||
background: url('../../../assets/images/route.png') no-repeat center center; |
|
||||||
background-size: 16px 16px; |
|
||||||
background-color: #fff; |
|
||||||
} |
|
||||||
:last-child { |
|
||||||
background: url('../../../assets/images/direction.png') no-repeat center center; |
|
||||||
background-size: 16px 16px; |
|
||||||
background-color: #fff; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { PlanAssistanceComponent } from './plan-assistance.component'; |
|
||||||
|
|
||||||
describe('PlanAssistanceComponent', () => { |
|
||||||
let component: PlanAssistanceComponent; |
|
||||||
let fixture: ComponentFixture<PlanAssistanceComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ PlanAssistanceComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(PlanAssistanceComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,495 +0,0 @@ |
|||||||
@import './panel.scss'; |
|
||||||
.icongray{ |
|
||||||
color: #D9D0DC; |
|
||||||
} |
|
||||||
.content111 { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
overflow: hidden; |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 1px; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
.buildingbtnchecked{ |
|
||||||
color: white; |
|
||||||
background-image: url("../../../assets/images/标签选中.png")!important; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//头部操作栏 |
|
||||||
.headerOperate { |
|
||||||
position: relative; |
|
||||||
span{ |
|
||||||
font-size: 18px; |
|
||||||
} |
|
||||||
flex: 2%; |
|
||||||
display: flex; |
|
||||||
align-items:center; |
|
||||||
min-height: 40px; |
|
||||||
box-sizing: border-box; |
|
||||||
margin: 3px 0; |
|
||||||
|
|
||||||
.bigeditdeletebtn{ |
|
||||||
margin-right: 12px; |
|
||||||
height: 80%; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
// align-items:center;/*由于flex-direction: column，因此align-items代表的是水平方向*/ |
|
||||||
justify-content: center; |
|
||||||
user-select: none; |
|
||||||
background-image: url("../../../assets/images/标签正常.png") ; |
|
||||||
background-size:100% 100%; |
|
||||||
color: white; |
|
||||||
span{ |
|
||||||
padding: 0 13px; |
|
||||||
padding-right: 18px; |
|
||||||
} |
|
||||||
} |
|
||||||
.bigeditdeletebtn:hover{ |
|
||||||
cursor: pointer; |
|
||||||
background-image: url("../../../assets/images/标签经过.png") ; |
|
||||||
} |
|
||||||
.bigTalkBox{ |
|
||||||
user-select: none; |
|
||||||
.titleIcon{ |
|
||||||
font-size: 33px; |
|
||||||
vertical-align: sub; |
|
||||||
color: white; |
|
||||||
} |
|
||||||
.talkBox{ |
|
||||||
width: 309px; |
|
||||||
height: 326px; |
|
||||||
border: 1px solid #30bbec; |
|
||||||
background-color: #013a64; |
|
||||||
opacity: .9 ; |
|
||||||
position: absolute; |
|
||||||
top: 32px; |
|
||||||
right:4px; |
|
||||||
z-index: 2000; |
|
||||||
.btndiv{ |
|
||||||
div{ |
|
||||||
border-radius: 18px; |
|
||||||
width: 70px; |
|
||||||
height: 30px; |
|
||||||
text-align: center; |
|
||||||
line-height: 30px; |
|
||||||
display: inline-block; |
|
||||||
font-size: 13px; |
|
||||||
color: white; |
|
||||||
cursor: pointer; |
|
||||||
|
|
||||||
} |
|
||||||
div:nth-child(1){ |
|
||||||
background-color: #fe9400; |
|
||||||
margin: 10px; |
|
||||||
} |
|
||||||
div:nth-child(2){ |
|
||||||
background-color: #f95e5a; |
|
||||||
} |
|
||||||
} |
|
||||||
.bottomDiv{ |
|
||||||
position: absolute; |
|
||||||
bottom:6px; |
|
||||||
width: 100%; |
|
||||||
height: 32px; |
|
||||||
line-height: 32px; |
|
||||||
display: flex; |
|
||||||
color: white; |
|
||||||
text-align: center; |
|
||||||
div:nth-child(1){ |
|
||||||
flex: 1; |
|
||||||
} |
|
||||||
div:nth-child(2){ |
|
||||||
flex: 6; |
|
||||||
color: #409eff; |
|
||||||
background: url('../../../assets/images/输入框.png'); |
|
||||||
background-size: 100% 100%; |
|
||||||
} |
|
||||||
div:nth-child(3){ |
|
||||||
flex: 1; |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//功能区 |
|
||||||
// icon统一样式 |
|
||||||
.mat-icon { |
|
||||||
cursor:pointer; |
|
||||||
vertical-align: middle; |
|
||||||
} |
|
||||||
//左右两侧功能栏 统一样式 |
|
||||||
.publicCss { |
|
||||||
overflow: hidden; |
|
||||||
border-radius: 5px; |
|
||||||
top: 0; |
|
||||||
} |
|
||||||
.functionalDomain { |
|
||||||
flex: 98%; |
|
||||||
overflow: hidden; |
|
||||||
.functionalDomainContent { |
|
||||||
// position: relative; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
.canvas{ |
|
||||||
flex: 5; |
|
||||||
} |
|
||||||
.functionalDomainLeft { |
|
||||||
// background: url("../../../assets/images/列表背景.png"); |
|
||||||
background-size: 100% 100%; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
margin-left: 0px; |
|
||||||
transition: margin-left 0.5s; |
|
||||||
// min-width: 235px; |
|
||||||
border: 1px solid #30bbec; |
|
||||||
width: 235px; |
|
||||||
left: 0; |
|
||||||
z-index: 111; |
|
||||||
.leftDragDiv{ |
|
||||||
position: absolute; |
|
||||||
right: 0; |
|
||||||
height: 100%; |
|
||||||
width: 3px; |
|
||||||
z-index: 1000; |
|
||||||
cursor: e-resize; |
|
||||||
} |
|
||||||
flex: 1; |
|
||||||
} |
|
||||||
.functionalDomainRight { |
|
||||||
color: white; |
|
||||||
z-index: 1001; |
|
||||||
margin-right: 0px; |
|
||||||
transition: margin-right 0.5s; |
|
||||||
border: 1px solid #30bbec; |
|
||||||
width: 235px; |
|
||||||
right: 0; |
|
||||||
flex: 1; |
|
||||||
} |
|
||||||
//右边导航栏显示隐藏 |
|
||||||
.togglePanel2 { |
|
||||||
margin-right: -2000px; |
|
||||||
transition: margin-right 1s; |
|
||||||
} |
|
||||||
//左侧导航栏显示隐藏 |
|
||||||
.togglePanel { |
|
||||||
margin-left: -2000px; |
|
||||||
transition: margin-left 1s; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
//右边操作栏 |
|
||||||
.title{ |
|
||||||
width: 100%; |
|
||||||
height: 40px; |
|
||||||
line-height: 40px; |
|
||||||
border-bottom:2px solid #accbf2; |
|
||||||
display: flex; |
|
||||||
align-content: center; |
|
||||||
span{ |
|
||||||
display: inline-block; |
|
||||||
flex: 1; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
span:hover{ |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
} |
|
||||||
.selectedTitle{ |
|
||||||
background: #0c2d44; |
|
||||||
} |
|
||||||
|
|
||||||
//右侧属性 |
|
||||||
.property{ |
|
||||||
display: flex; |
|
||||||
flex-flow: column; |
|
||||||
.siteproperty{ |
|
||||||
height: 100%; |
|
||||||
overflow-y: auto; |
|
||||||
p{ |
|
||||||
color: #d0e0f4; |
|
||||||
padding-left: 7px; |
|
||||||
letter-spacing:3px; |
|
||||||
margin: 5px 0; |
|
||||||
} |
|
||||||
.siteproperty_size{ |
|
||||||
border-bottom:1px solid #d0e0f4; |
|
||||||
width: 93%; |
|
||||||
margin: 0 auto; |
|
||||||
min-height: 21px; |
|
||||||
color: #2399f1; |
|
||||||
padding-bottom: 5px; |
|
||||||
font-size: 16px; |
|
||||||
letter-spacing:2px; |
|
||||||
} |
|
||||||
.rightAttribute{ |
|
||||||
width: 12%; |
|
||||||
height: 99.5%; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
right: 0; |
|
||||||
bottom: 0; |
|
||||||
border: 2px solid #464646; |
|
||||||
} |
|
||||||
} |
|
||||||
.assetsproperty{ |
|
||||||
overflow-y: auto; |
|
||||||
height: 100%; |
|
||||||
p{ |
|
||||||
|
|
||||||
color: #d0e0f4; |
|
||||||
padding-left: 7px; |
|
||||||
letter-spacing:3px; |
|
||||||
margin: 5px 0; |
|
||||||
} |
|
||||||
.siteproperty_size{ |
|
||||||
border-bottom:1px solid #d0e0f4; |
|
||||||
width: 93%; |
|
||||||
margin: 0 auto; |
|
||||||
min-height: 21px; |
|
||||||
color: #2399f1; |
|
||||||
padding-bottom: 5px; |
|
||||||
font-size: 16px; |
|
||||||
letter-spacing:2px; |
|
||||||
} |
|
||||||
span{ |
|
||||||
font-size: 15px; |
|
||||||
} |
|
||||||
input{ |
|
||||||
height: 18px; |
|
||||||
} |
|
||||||
.biginput{ |
|
||||||
display: block; |
|
||||||
width: 88%; |
|
||||||
margin: 0 auto; |
|
||||||
} |
|
||||||
.smallinput{ |
|
||||||
display: block; |
|
||||||
width: 19%; |
|
||||||
margin-left: 8px; |
|
||||||
} |
|
||||||
.textarea{ |
|
||||||
display: block; |
|
||||||
width: 88%; |
|
||||||
height: 50px; |
|
||||||
margin: 0 auto; |
|
||||||
} |
|
||||||
.swiper-button-next{ |
|
||||||
right: 6px; |
|
||||||
} |
|
||||||
.swiper-button-prev{ |
|
||||||
left: 6px; |
|
||||||
} |
|
||||||
.swiper-container{ |
|
||||||
// --swiper-theme-color: #ff6600;/* 设置Swiper风格 */ |
|
||||||
// --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */ |
|
||||||
--swiper-navigation-size:20px;/* 设置按钮大小 */ |
|
||||||
} |
|
||||||
.hoverred:hover{ |
|
||||||
color: rgb(187, 28, 28); |
|
||||||
} |
|
||||||
.selectDiv{ |
|
||||||
height: 21px; |
|
||||||
position: relative; |
|
||||||
margin-bottom: 5px; |
|
||||||
select{ |
|
||||||
width: 98px; |
|
||||||
height: 22px; |
|
||||||
vertical-align: middle; |
|
||||||
position: absolute; |
|
||||||
right: 10px; |
|
||||||
top: 1px; |
|
||||||
border: 1px solid rgb(208, 211, 214); |
|
||||||
border-radius: 2px; |
|
||||||
} |
|
||||||
} |
|
||||||
.colorBigDiv{ |
|
||||||
width: 88%; |
|
||||||
margin-left: 8px; |
|
||||||
|
|
||||||
|
|
||||||
.colorDiv{ |
|
||||||
.colorLi{ |
|
||||||
width: 24px; |
|
||||||
height: 24px; |
|
||||||
list-style: none; |
|
||||||
float: left; |
|
||||||
border: 2px solid white; |
|
||||||
} |
|
||||||
.coloractive{ |
|
||||||
border: 2px solid black; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.colorBigTemplateDiv{ |
|
||||||
span{ |
|
||||||
color: #9c9fa5; |
|
||||||
font-size: 14px; |
|
||||||
height: 26px; |
|
||||||
line-height: 26px; |
|
||||||
} |
|
||||||
.colorTemplateDiv{ |
|
||||||
width: 65%; |
|
||||||
height: 22px; |
|
||||||
display: inline-block; |
|
||||||
vertical-align: middle; |
|
||||||
margin-left: 26px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
//右侧消防要素 |
|
||||||
.firecategories{ |
|
||||||
position: relative; |
|
||||||
// display: flex; |
|
||||||
// flex-flow: column; |
|
||||||
.firecategoriesTree{ |
|
||||||
overflow-y: auto; |
|
||||||
height: 100%; |
|
||||||
mat-tree-node{ |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
.isLookCss{ |
|
||||||
position: absolute; |
|
||||||
right: 6px; |
|
||||||
z-index: 1000; |
|
||||||
} |
|
||||||
} |
|
||||||
.mat-tree{ |
|
||||||
background-color:transparent; |
|
||||||
.mat-tree-node{ |
|
||||||
color: white!important; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// 解决轮播图蓝框问题 |
|
||||||
div:focus { |
|
||||||
outline: none; |
|
||||||
} |
|
||||||
|
|
||||||
//没有图片时显示无图片背景图 |
|
||||||
.noImgCss{ |
|
||||||
background: url(../../../assets/images/noImg.png) repeat center center; |
|
||||||
background-size: 88% 100%;/*按比例缩放*/ |
|
||||||
} |
|
||||||
.input{ |
|
||||||
width: 18px; |
|
||||||
height: 18px; |
|
||||||
vertical-align: middle; |
|
||||||
margin-left: 9px; |
|
||||||
margin-right: 3px; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
// tree |
|
||||||
.mat-tree-node{ |
|
||||||
min-height: 0; |
|
||||||
height: 32px; |
|
||||||
line-height: 32px; |
|
||||||
font-size: 13px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.treeNode:hover{ |
|
||||||
background-color: #105a8f |
|
||||||
} |
|
||||||
.isLookPattern{ |
|
||||||
display: none; |
|
||||||
} |
|
||||||
.treeText{ |
|
||||||
overflow: hidden; |
|
||||||
white-space: nowrap; |
|
||||||
text-overflow: ellipsis; |
|
||||||
display: inline-block; |
|
||||||
width: 65px; |
|
||||||
} |
|
||||||
|
|
||||||
.bigBox{ |
|
||||||
width: 700px; |
|
||||||
height: 40px; |
|
||||||
position: absolute; |
|
||||||
overflow: hidden; |
|
||||||
right: 0; |
|
||||||
} |
|
||||||
.weatherBox{ |
|
||||||
height: 40px; |
|
||||||
width: 700px; |
|
||||||
line-height: 40px; |
|
||||||
position: absolute; |
|
||||||
right: 0; |
|
||||||
transition: right linear .5s; |
|
||||||
.openbtn{ |
|
||||||
font-size: 45px; |
|
||||||
height: 45px; |
|
||||||
width: 40px; |
|
||||||
} |
|
||||||
.name{ |
|
||||||
font-size: 16px; |
|
||||||
vertical-align: middle; |
|
||||||
margin-left: 3px; |
|
||||||
} |
|
||||||
input{ |
|
||||||
width: 140px; |
|
||||||
height: 22px; |
|
||||||
margin-left: 3px; |
|
||||||
} |
|
||||||
select{ |
|
||||||
width: 96px; |
|
||||||
height: 25px; |
|
||||||
margin-left: 3px; |
|
||||||
vertical-align: middle; |
|
||||||
} |
|
||||||
} |
|
||||||
.open{ |
|
||||||
right: 0px; |
|
||||||
} |
|
||||||
.close{ |
|
||||||
right:-622px; |
|
||||||
} |
|
||||||
.bottomCss{ |
|
||||||
position: absolute; |
|
||||||
left: 232px; |
|
||||||
right: 0px; |
|
||||||
bottom: 0; |
|
||||||
height: 158px; |
|
||||||
width: auto; |
|
||||||
z-index: 100; |
|
||||||
background-color: white; |
|
||||||
border: 1px solid #464646; |
|
||||||
.dragDiv{ |
|
||||||
width: 100%; |
|
||||||
height: 3px; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
z-index: 1000; |
|
||||||
cursor: n-resize; |
|
||||||
} |
|
||||||
.title{ |
|
||||||
height: 35px; |
|
||||||
background-color: #464646; |
|
||||||
div{ |
|
||||||
background-color: #464646; |
|
||||||
float: left; |
|
||||||
width: 80px; |
|
||||||
color: white; |
|
||||||
font-size: 13px; |
|
||||||
padding-left: 5px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.detailsAndattentBtn{ |
|
||||||
background-color: #595959; |
|
||||||
} |
|
||||||
} |
|
||||||
.body{ |
|
||||||
textarea{ |
|
||||||
width: 100%; |
|
||||||
border-radius: 0px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,286 +0,0 @@ |
|||||||
.matIcons { |
|
||||||
color: #8E909F; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//平面图 素材库 公共样式 头部 |
|
||||||
.planarGraphHeader{ |
|
||||||
width: 100%; |
|
||||||
text-align: center; |
|
||||||
height: 40px; |
|
||||||
line-height: 40px; |
|
||||||
min-height: 40px; |
|
||||||
cursor: pointer; |
|
||||||
text-align: center; |
|
||||||
font-style: italic; |
|
||||||
font-size: 20px; |
|
||||||
color: white; |
|
||||||
border-bottom:2px solid #accbf2; |
|
||||||
} |
|
||||||
//平面图头部字体图标样式 |
|
||||||
.hover { |
|
||||||
width: 18px; |
|
||||||
height: 18px; |
|
||||||
margin-left: 90px; |
|
||||||
border: 1px solid #999; |
|
||||||
border-radius: 3px; |
|
||||||
.mat-icon {font-size: 18px; color: #999;} |
|
||||||
} |
|
||||||
.hover:hover { |
|
||||||
background-color: #4DA5FA; |
|
||||||
.mat-icon {color: #fff;} |
|
||||||
} |
|
||||||
|
|
||||||
//平面图 |
|
||||||
.sitePlanContent { |
|
||||||
position: relative; |
|
||||||
width: 100%; |
|
||||||
height: 37px; |
|
||||||
line-height: 37px; |
|
||||||
box-sizing: border-box; |
|
||||||
text-align: center; |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
|
||||||
//火源/力量 图标 |
|
||||||
.fireForce { |
|
||||||
display: block; |
|
||||||
float: right; |
|
||||||
margin: 8px 5px 0 0; |
|
||||||
width: 40px; |
|
||||||
height: 20px; |
|
||||||
line-height: 20px; |
|
||||||
text-align: center; |
|
||||||
position: relative; |
|
||||||
overflow: hidden; |
|
||||||
img{ |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
} |
|
||||||
} |
|
||||||
//替换底图 inputfile |
|
||||||
.a-upload { |
|
||||||
display: block; |
|
||||||
float: right; |
|
||||||
margin: 8px 18px 0 0; |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
line-height: 20px; |
|
||||||
text-align: center; |
|
||||||
position: relative; |
|
||||||
overflow: hidden; |
|
||||||
input { |
|
||||||
position: absolute; |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
.a-upload:hover { |
|
||||||
.mat-icon { |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
} |
|
||||||
//上传底图 inputfile |
|
||||||
#a-uploadImg { |
|
||||||
display: block; |
|
||||||
width: 300px; |
|
||||||
height: 170px; |
|
||||||
position: fixed; |
|
||||||
top: 40%; |
|
||||||
left: 48%; |
|
||||||
overflow: hidden; |
|
||||||
border-radius: 5px; |
|
||||||
border: 1px solid #999; |
|
||||||
z-index: 999; |
|
||||||
input { |
|
||||||
position: absolute; |
|
||||||
width: 300px; |
|
||||||
height: 170px; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
img { |
|
||||||
width: 100%; |
|
||||||
height: auto; |
|
||||||
} |
|
||||||
} |
|
||||||
#a-uploadImg:hover { |
|
||||||
border: 5px solid skyblue; |
|
||||||
} |
|
||||||
|
|
||||||
//hover时显示右边操作栏 |
|
||||||
.sitePlanContent:hover { |
|
||||||
cursor: pointer; |
|
||||||
#rightOperate { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
} |
|
||||||
//右边操作栏 |
|
||||||
#rightOperate{ |
|
||||||
width: 50px; |
|
||||||
height: 100px; |
|
||||||
position: absolute; |
|
||||||
top: -32px; |
|
||||||
right: -48px; |
|
||||||
z-index: 99999; |
|
||||||
border-radius: 0 100px 100px 0; |
|
||||||
background-color: #F0F4F7; |
|
||||||
// #F0F4F7 cdced1 |
|
||||||
display: none; |
|
||||||
.functionButton { |
|
||||||
height: 25%; |
|
||||||
line-height: 25px; |
|
||||||
} |
|
||||||
.bigFunctionIcon { |
|
||||||
font-size: 24px; |
|
||||||
} |
|
||||||
.functionIcon { |
|
||||||
color: #999; |
|
||||||
} |
|
||||||
.functionIcon:hover { |
|
||||||
color: #4DA5FA; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//处置预案 素材库 公用div |
|
||||||
.publiclBankPlan { |
|
||||||
flex: 1; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
overflow: hidden; |
|
||||||
padding-bottom: 10px; |
|
||||||
// border-top: 1px dashed #999; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 基本信息/想定作业 切换 |
|
||||||
.scenarioAssignment { |
|
||||||
overflow-y: auto; |
|
||||||
} |
|
||||||
.selectEditMode { |
|
||||||
flex: 1; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
.materialBankDIV{ |
|
||||||
flex: 1; |
|
||||||
overflow-x: hidden; |
|
||||||
overflow-y: auto; |
|
||||||
} |
|
||||||
// 基本信息/想定作业 切换 |
|
||||||
//处置预案 |
|
||||||
#terrNodePublic { |
|
||||||
height: 35px; |
|
||||||
line-height: 35px; |
|
||||||
.textNode {flex: 1;} |
|
||||||
} |
|
||||||
//字体图标 |
|
||||||
.planIconDiv { |
|
||||||
display: inline-block; |
|
||||||
.mat-icon{ |
|
||||||
font-size: 20px; |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
color: #666; |
|
||||||
margin-right: 3px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.mat-expansion-panel-header { |
|
||||||
height: 40px !important; |
|
||||||
} |
|
||||||
//素材库溢出隐藏 |
|
||||||
#materialBank { |
|
||||||
margin: 1px 0; |
|
||||||
} |
|
||||||
//素材库图片flex |
|
||||||
#panelLibrary .text{ |
|
||||||
box-sizing: border-box; |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
.panelLibraryFlex { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
flex-wrap: wrap; |
|
||||||
justify-content: space-between; /* 水平居中 */ |
|
||||||
.imgBox { |
|
||||||
width: 70px; |
|
||||||
height: 100px; |
|
||||||
display: inline-block; |
|
||||||
text-align: center; |
|
||||||
border-radius: 3px; |
|
||||||
margin: 5px 0; |
|
||||||
img { |
|
||||||
width: 70px; |
|
||||||
height: auto; |
|
||||||
max-height: 70px; |
|
||||||
cursor:pointer; |
|
||||||
} |
|
||||||
p { |
|
||||||
font-size: 12px; |
|
||||||
cursor:pointer; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//文本溢出 |
|
||||||
.overflowText { |
|
||||||
overflow: hidden; |
|
||||||
text-overflow:ellipsis; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
// 楼层/区域 是避难层时 |
|
||||||
.isRefugeStorey { |
|
||||||
color: #fff; |
|
||||||
background-color: rgb(238, 186, 186); |
|
||||||
} |
|
||||||
//选中平面图时 |
|
||||||
.selectSitePlan { |
|
||||||
background-color: #105a8f; |
|
||||||
} |
|
||||||
//选中素材库图片时 |
|
||||||
.selectImg { |
|
||||||
color: #fff; |
|
||||||
background-color: #4DA5FA; |
|
||||||
} |
|
||||||
//选中 处置节点时 |
|
||||||
.selectanelPoint { |
|
||||||
background-color: #F4C235; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//左侧功能区弹出框样式 |
|
||||||
.keyMargin { |
|
||||||
width: 100%; |
|
||||||
margin: 5px 0; |
|
||||||
.mat-form-field { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
.submitBottom { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
flex-wrap: wrap; |
|
||||||
justify-content: space-between; /* 水平居中 */ |
|
||||||
} |
|
||||||
.functionalDomainContent { |
|
||||||
width: 300px; |
|
||||||
height: 100%; |
|
||||||
textarea { |
|
||||||
border-radius: 5px; |
|
||||||
border: 1px solid #999; |
|
||||||
width: 100%; |
|
||||||
height: 120px; |
|
||||||
resize:none; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
<div mat-dialog-title>处置节点保存</div> |
|
||||||
<div style="display: flex;"> |
|
||||||
<button mat-stroked-button style="margin-right: 5px;" (click)="saveType('new')">新建节点并保存</button> |
|
||||||
<button mat-stroked-button (click)="saveType('old')">保存到已有节点</button> |
|
||||||
</div> |
|
||||||
@ -1,53 +0,0 @@ |
|||||||
<div *ngIf="type == 'new'"> |
|
||||||
<div mat-dialog-title>新增节点</div> |
|
||||||
<div> |
|
||||||
<form (ngSubmit)="onSubmit(form.value,'new')" #form="ngForm" class="example-container"> |
|
||||||
|
|
||||||
<div mat-dialog-content> |
|
||||||
<mat-form-field> |
|
||||||
<input type="text" matInput ngModel |
|
||||||
required name="name" placeholder="节点名称" autocomplete="off"> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
<div mat-dialog-content> |
|
||||||
<mat-form-field> |
|
||||||
<mat-select [(value)]="allRootDisposalNode[0].name" required placeholder="父节点名称"> |
|
||||||
<mat-option *ngFor="let item of allRootDisposalNode" [value]="item.name" (click)="clickNode(item)"> |
|
||||||
{{item.name}} |
|
||||||
</mat-option> |
|
||||||
</mat-select> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
<div mat-dialog-actions> |
|
||||||
<button mat-raised-button color="primary" type="submit" |
|
||||||
[disabled]="!form.form.valid"> |
|
||||||
确定 |
|
||||||
</button> |
|
||||||
<button mat-raised-button mat-dialog-close>取消</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div *ngIf="type == 'old'"> |
|
||||||
<div mat-dialog-title>保存到已有节点</div> |
|
||||||
<div> |
|
||||||
<form (ngSubmit)="onSubmit(form.value,'old')" #form="ngForm" class="example-container"> |
|
||||||
<div mat-dialog-content> |
|
||||||
<mat-form-field> |
|
||||||
<mat-select required ngModel placeholder="父节点名称" name="nodeId"> |
|
||||||
<mat-option *ngFor="let item of allPlanDisposalNode" [value]="item.id" (click)="clickNode(item)"> |
|
||||||
{{item.name}} |
|
||||||
</mat-option> |
|
||||||
</mat-select> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
<div mat-dialog-actions> |
|
||||||
<button mat-raised-button color="primary" type="submit" |
|
||||||
[disabled]="!form.form.valid"> |
|
||||||
确定 |
|
||||||
</button> |
|
||||||
<button mat-raised-button mat-dialog-close>取消</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
<div style="position: relative;width: 1400px;height: 800px;line-height: 800px;" class="swiper-container"> |
|
||||||
<div style="position: absolute;right: -2px;top: -392px;cursor: pointer;z-index: 999;width: 24px;height: 24px;" (click)="closeDialog()"> |
|
||||||
<span><mat-icon>clear</mat-icon></span> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="swiper-wrapper"> |
|
||||||
<div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr"> |
|
||||||
<img id="bigimg" (mousewheel)="zoomimg($event)" style=" |
|
||||||
max-width: 96%; |
|
||||||
max-height: 100%; |
|
||||||
min-width: 1px; |
|
||||||
min-height: 1px; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
bottom: 0; |
|
||||||
right: 0; |
|
||||||
margin: auto;" [src]="img.PropertyValue" alt=""> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<!-- 如果需要导航按钮 --> |
|
||||||
<div class="swiper-button-next"></div> |
|
||||||
<div class="swiper-button-prev"></div> |
|
||||||
</div> |
|
||||||
@ -1,91 +0,0 @@ |
|||||||
<div class="headerOperate"> |
|
||||||
<div class="bigTalkBox" style="position: absolute;right: 26px;"> |
|
||||||
<mat-icon class="titleIcon" (click)="openTalkDiv()">volume_up</mat-icon> |
|
||||||
<div class="talkBox" *ngIf="isOpenTalk"> |
|
||||||
<div class="btndiv"> |
|
||||||
<div>泵房</div> |
|
||||||
<div>控制室</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
<div class="bottomDiv"> |
|
||||||
<div> |
|
||||||
<mat-icon>settings_voice</mat-icon> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
按住说话 |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<mat-icon>search</mat-icon> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="leisiTable"> |
|
||||||
<table> |
|
||||||
<thead > |
|
||||||
<td style="width:40%;">单位名称</td> |
|
||||||
<td style="width:10%;">始建于</td> |
|
||||||
<td style="width:10%;">着火物</td> |
|
||||||
<td style="width:10%;">点火位置</td> |
|
||||||
<td style="width:10%;">相近度</td> |
|
||||||
<td style="width:20%;cursor:pointer">详情</td> |
|
||||||
</thead> |
|
||||||
<tbody id="shujubody" > |
|
||||||
<tr *ngFor="let leisi of leisiYuan; let key=index"> |
|
||||||
<td style="color: #FFFFFF;height: 10%;">{{leisi.danweiName}}</td> |
|
||||||
<td style="color: #FFFFFF;">{{leisi.year}}</td> |
|
||||||
<td style="color: #FFFFFF;">{{leisi.zhoahuo}}</td> |
|
||||||
<td style="color: #FFFFFF;">{{leisi.weizhi}}</td> |
|
||||||
<td [ngClass]="{'tdyanse56':leisi.xiangjin>=50&&leisi.xiangjin<=60,'tdyanse78':leisi.xiangjin>60,'tdyanse':leisi.xiangjin<50}">{{leisi.xiangjin}}%</td> |
|
||||||
<td style="color: #CC5D13;" (click)="ShowHide(0)" ><span style="cursor:pointer">查看详情</span></td> |
|
||||||
</tr> |
|
||||||
</tbody> |
|
||||||
</table> |
|
||||||
</div> |
|
||||||
<!--弹窗--> |
|
||||||
<div class="tanchuang" id="tanchuang" *ngIf="isshow" cdkDrag> |
|
||||||
<!--弹窗头部--> |
|
||||||
<div class="headerOperate"> |
|
||||||
<div id="tedian" class="bigeditdeletebtn" [ngClass]="{'biankuang': chooseid == 0}" (click)="clickHead(0)" > |
|
||||||
<span>基本信息</span> |
|
||||||
</div> |
|
||||||
<div id="zhuyi" class="bigeditdeletebtn" [ngClass]="{'biankuang': chooseid == 1}" (click)="clickHead(1)"> |
|
||||||
<span>事故特点</span> |
|
||||||
</div> |
|
||||||
<div id="chuzhi" class="bigeditdeletebtn" [ngClass]="{'biankuang': chooseid == 2}" (click)="clickHead(2)"> |
|
||||||
<span>处置经过</span> |
|
||||||
</div> |
|
||||||
<div id="chuzhi" class="bigeditdeletebtn" [ngClass]="{'biankuang': chooseid == 3}" (click)="clickHead(3)"> |
|
||||||
<span>几点体会</span> |
|
||||||
</div> |
|
||||||
<div id="zuzhi" class="bigeditdeletebtn" [ngClass]="{'biankuang': chooseid == 4}" > |
|
||||||
<span>存在不足</span> |
|
||||||
</div> |
|
||||||
<div style="float: right;margin-left: 50px;" > |
|
||||||
<!-- <a class="xiao">-</a> --> |
|
||||||
|
|
||||||
<a><span style="cursor:pointer" class="close" (click)="ShoeFalse()"><mat-icon>clear</mat-icon></span></a> |
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
<!--弹窗中间部分--> |
|
||||||
<div class="tanCenter" > |
|
||||||
<!--左侧--> |
|
||||||
<div class="centerLeft" > |
|
||||||
<div class="tanCenterbtn" > |
|
||||||
<span [ngClass]="{'biankuang': key == chooseleft}" (click)="clickLift(key)" *ngFor="let item of centerdata;let key=index">{{item.name}}</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<!--右侧--> |
|
||||||
<div class="centerRight"> |
|
||||||
<span>{{zjxinxi}}</span> |
|
||||||
</div> |
|
||||||
<div style="width: 100%;position: absolute;bottom: 0px;right: 0px;"> |
|
||||||
<button class="button" style="float: right;margin-right: 30px;">分享</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,260 +0,0 @@ |
|||||||
.headerOperate { |
|
||||||
position: relative; |
|
||||||
flex: 2%; |
|
||||||
display: flex; |
|
||||||
align-items:center; |
|
||||||
box-sizing: border-box; |
|
||||||
margin: 0 0; |
|
||||||
.bigTalkBox{ |
|
||||||
user-select: none; |
|
||||||
.titleIcon{ |
|
||||||
font-size: 33px; |
|
||||||
vertical-align: sub; |
|
||||||
color: white; |
|
||||||
} |
|
||||||
.talkBox{ |
|
||||||
width: 309px; |
|
||||||
height: 326px; |
|
||||||
border: 1px solid #30bbec; |
|
||||||
background-color: #013a64; |
|
||||||
opacity: .9 ; |
|
||||||
position: absolute; |
|
||||||
top: 32px; |
|
||||||
right:4px; |
|
||||||
z-index: 2000; |
|
||||||
.btndiv{ |
|
||||||
div{ |
|
||||||
border-radius: 18px; |
|
||||||
width: 70px; |
|
||||||
height: 30px; |
|
||||||
text-align: center; |
|
||||||
line-height: 30px; |
|
||||||
display: inline-block; |
|
||||||
font-size: 13px; |
|
||||||
color: white; |
|
||||||
cursor: pointer; |
|
||||||
|
|
||||||
} |
|
||||||
div:nth-child(1){ |
|
||||||
background-color: #fe9400; |
|
||||||
margin: 10px; |
|
||||||
} |
|
||||||
div:nth-child(2){ |
|
||||||
background-color: #f95e5a; |
|
||||||
} |
|
||||||
} |
|
||||||
.bottomDiv{ |
|
||||||
position: absolute; |
|
||||||
bottom:6px; |
|
||||||
width: 100%; |
|
||||||
height: 32px; |
|
||||||
line-height: 32px; |
|
||||||
display: flex; |
|
||||||
color: white; |
|
||||||
text-align: center; |
|
||||||
div:nth-child(1){ |
|
||||||
flex: 1; |
|
||||||
} |
|
||||||
div:nth-child(2){ |
|
||||||
flex: 6; |
|
||||||
color: #409eff; |
|
||||||
background: url('../../../assets/images/输入框.png'); |
|
||||||
background-size: 100% 100%; |
|
||||||
} |
|
||||||
div:nth-child(3){ |
|
||||||
flex: 1; |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.leisiTable{ |
|
||||||
border:1px solid #0E79A9; |
|
||||||
height: 95%; |
|
||||||
width: 100%; |
|
||||||
background-color: #05385E; |
|
||||||
//margin-top: 50px; |
|
||||||
table{ |
|
||||||
width: 100%; |
|
||||||
height: 50%; |
|
||||||
border-collapse:collapse; |
|
||||||
thead{ |
|
||||||
td{ |
|
||||||
color:#F7BA2A; |
|
||||||
height: 50px; |
|
||||||
text-align:center; |
|
||||||
border-bottom: 1px solid #0E79A9; |
|
||||||
} |
|
||||||
} |
|
||||||
tbody{ |
|
||||||
td{ |
|
||||||
text-align:center; |
|
||||||
//height: 10%; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.tdyanse56{ |
|
||||||
color:#3BA9F2 |
|
||||||
} |
|
||||||
.tdyanse78{ |
|
||||||
color:#28BC69 |
|
||||||
} |
|
||||||
.tdyanse{ |
|
||||||
color: #FFFFFF; |
|
||||||
} |
|
||||||
//弹窗 |
|
||||||
.tanchuang{ |
|
||||||
width: 50%; |
|
||||||
height: 70%; |
|
||||||
border:1px solid #0E79A9; |
|
||||||
background-color: #05385E; |
|
||||||
z-index: 99; |
|
||||||
position: absolute; |
|
||||||
top: 15%; |
|
||||||
left: 20%; |
|
||||||
} |
|
||||||
.headerOperate { |
|
||||||
position: relative; |
|
||||||
span{ |
|
||||||
font-size: 18px; |
|
||||||
} |
|
||||||
flex: 2%; |
|
||||||
display: flex; |
|
||||||
align-items:center; |
|
||||||
min-height: 40px; |
|
||||||
box-sizing: border-box; |
|
||||||
margin: 0 0; |
|
||||||
|
|
||||||
.bigeditdeletebtn{ |
|
||||||
margin-top: 5px; |
|
||||||
border: 1px solid #30bbec; |
|
||||||
margin-right: 0px; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: center; |
|
||||||
user-select: none; |
|
||||||
background-size:100% 100%; |
|
||||||
color: white; |
|
||||||
span{ |
|
||||||
padding: 13px 13px; |
|
||||||
//padding-right: 18px; |
|
||||||
font-size: 24px; |
|
||||||
} |
|
||||||
} |
|
||||||
.bigeditdeletebtn:hover{ |
|
||||||
cursor: pointer; |
|
||||||
//background-image: url("../../../assets/images/标签经过.png") ; |
|
||||||
} |
|
||||||
.close { |
|
||||||
top: 20px; |
|
||||||
right: 20px; |
|
||||||
position: absolute; |
|
||||||
color: #778087; |
|
||||||
/* make a round button */ |
|
||||||
border-radius: 12px; |
|
||||||
/* center text */ |
|
||||||
line-height: 20px; |
|
||||||
text-align: center; |
|
||||||
height: 20px; |
|
||||||
width: 20px; |
|
||||||
font-size: 18px; |
|
||||||
padding: 1px; |
|
||||||
font-size: 40px; |
|
||||||
} |
|
||||||
.xiao{ |
|
||||||
top: 20px; |
|
||||||
right: 50px; |
|
||||||
position: absolute; |
|
||||||
color: #778087; |
|
||||||
/* make a round button */ |
|
||||||
border-radius: 12px; |
|
||||||
/* center text */ |
|
||||||
line-height: 20px; |
|
||||||
text-align: center; |
|
||||||
height: 20px; |
|
||||||
width: 20px; |
|
||||||
font-size: 38px; |
|
||||||
padding: 1px; |
|
||||||
font-size: 40px; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
.tanCenter{ |
|
||||||
width: 100%; |
|
||||||
height: 90%; |
|
||||||
.centerLeft{ |
|
||||||
float: left; |
|
||||||
height: 100%; |
|
||||||
width: 30%; |
|
||||||
position: relative; |
|
||||||
flex-direction: column; |
|
||||||
span{ |
|
||||||
font-size: 18px; |
|
||||||
} |
|
||||||
flex: 2%; |
|
||||||
display: flex; |
|
||||||
align-items:center; |
|
||||||
box-sizing: border-box; |
|
||||||
margin: 0 0; |
|
||||||
.tanCenterbtn{ |
|
||||||
//margin-top: 5px; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
border: 1px solid #30bbec; |
|
||||||
//margin-right: 0px; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
// align-items:center;/*由于flex-direction: column，因此align-items代表的是水平方向*/ |
|
||||||
//justify-content: center; |
|
||||||
user-select: none; |
|
||||||
//background-image: url("../../../assets/images/标签正常.png") ; |
|
||||||
background-size:100% 100%; |
|
||||||
color: white; |
|
||||||
span{ |
|
||||||
cursor:pointer; |
|
||||||
border-bottom:1px solid #30bbec; |
|
||||||
padding: 8px ; |
|
||||||
text-align: center; |
|
||||||
//padding-right: 18px; |
|
||||||
font-size: 24px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.centerRight{ |
|
||||||
overflow: auto; |
|
||||||
padding-top: 10px; |
|
||||||
height: 90%; |
|
||||||
width: 65%; |
|
||||||
float:right ; |
|
||||||
span{ |
|
||||||
margin: 15px 15px; |
|
||||||
color: #FFFFFF; |
|
||||||
font-size: 18px; |
|
||||||
line-height: 38px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.button { |
|
||||||
border-radius: 2px; |
|
||||||
background-color: #4CAF50; |
|
||||||
border: none; |
|
||||||
color: white; |
|
||||||
padding: 15px 32px; |
|
||||||
text-align: center; |
|
||||||
text-decoration: none; |
|
||||||
display: inline-block; |
|
||||||
font-size: 16px; |
|
||||||
margin: 4px 2px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
//点击后边框变色 |
|
||||||
.biankuang{ |
|
||||||
//border:1px solid red; |
|
||||||
background-color: #F7BA2A; |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { RealCasesComponent } from './real-cases.component'; |
|
||||||
|
|
||||||
describe('RealCasesComponent', () => { |
|
||||||
let component: RealCasesComponent; |
|
||||||
let fixture: ComponentFixture<RealCasesComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ RealCasesComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(RealCasesComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,220 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-real-cases', |
|
||||||
templateUrl: './real-cases.component.html', |
|
||||||
styleUrls: ['./real-cases.component.scss'] |
|
||||||
}) |
|
||||||
export class RealCasesComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
} |
|
||||||
|
|
||||||
leisiYuan=[ |
|
||||||
{danweiName:"江苏南京扬子石化",year:"2017年",zhoahuo:"液态丙烯",weizhi:"烴泵区",xiangjin:parseFloat("50%")}, |
|
||||||
{danweiName:"河北张家口中国化工集团盛华化工公司",year:"2018年",zhoahuo:"氯乙烯",weizhi:"氯乙烯一号气柜",xiangjin:parseFloat("40%")}, |
|
||||||
{danweiName:"山东临沂金誉石化",year:"2017年",zhoahuo:"液化气",weizhi:"装卸区东北侧11号卸车位",xiangjin:parseFloat("30%")}, |
|
||||||
{danweiName:"江苏省靖江市德桥化工仓储有限公司",year:"2016年",zhoahuo:"汽油",weizhi:"2号交换站",xiangjin:parseFloat("20%")}, |
|
||||||
{danweiName:"海南东方市八所港危化品码头",year:"2016年",zhoahuo:"石脑油",weizhi:"丰盛油8油轮发动机舱",xiangjin:parseFloat("10%")} |
|
||||||
|
|
||||||
] |
|
||||||
//弹窗数据
|
|
||||||
tandata=[ |
|
||||||
{key:0,zongdata:[ |
|
||||||
{name:"基本信息",xinxidata:[ |
|
||||||
{name:"单位基本情况",xinxi:"江苏德桥化工仓储有限公司位于江苏省靖江市新港园区，是由新加坡恒阳石化物流有限公司投资组建的液体石化产品储运公司，" |
|
||||||
+"占地面积31.5万m2，现有员工130人，罐区13个、储罐139个，储存能力约58.3万m3。事故发生时储存有汽油、石脑油、甲醇、二氯乙烷、三氯乙烯、四氯乙烯、" |
|
||||||
+"液化烃、芳烃、醋酸乙酯、醋酸丁酯、冰醋酸等25种危化品，共计21.12万吨，其中：油品约14万吨、液态化学品近7万吨、主要组分为C3、C4的液化烃约1420吨。" |
|
||||||
+"事故单位北侧400m为村庄，东侧120m为储存能力52万m3、22个易燃易爆危化品储罐的联合安能石化有限公司，南侧300m为长江主航道，西侧50m为长江丹华港。"}, |
|
||||||
{name:"主要工艺流程",xinxi:"德桥化工仓储有限公司是典型的危化品储运企业，主要从事液态散化、油品及液化气体的仓储中转、分拨、灌装业务。厂区设有2个软管交换站，" |
|
||||||
+"作为物料集中配输中心，通过输送管线分别连接长江码头、罐区储罐和厂区装卸台，实现危化品物料从码头—罐区—装卸台间的进出双向输转。其中，1号交换站：设有发船泵5台、" |
|
||||||
+"发车泵30台，对应11、12、21、22罐区60个储罐的物料分输；2号交换站：设有发船泵6台、发车泵36台，对应13、14、15、23、24、25罐区58个储罐的物料分输。" |
|
||||||
+"事故所在的2号交换站，位于厂区中间，24罐区北侧，为半敞开式框架结构，建筑面积1482m2，交换站下层管廊设有码头管线12根，连接长江码头，长度741-1102m、" |
|
||||||
+"管径200-300mm；上层管廊设有发车管线36根，连接厂区装卸台，长度477-601m、管径100mm；底部分布有储罐内管线58根，分别连向各罐区储罐的罐根，因各罐区位置不同，" |
|
||||||
+"管线长度也不一样，总长约为1.1km。事故发生时，长江码头上的码头海油318（船名）、赣华强化016（船名），正在通过2号交换站，分别利用码头206号管线（管径250mm）、" |
|
||||||
+"305号管线（管径200mm）进行卸汽油至2411储罐、卸醋酸乙酯至2307储罐的作业。其他10条管线内有残留物料。"}, |
|
||||||
{name:"重点危险罐区",xinxi:"厂区危险等级最高的物料：燃烧或爆炸能产生剧毒光气的2406号二氯乙烷罐（存量4274吨）、1108号三氯乙烯罐（存量1988吨）和1105、1109、" |
|
||||||
+"2210、2213、2214号四氯乙烯罐（存量9315吨）以及燃烧爆炸后威力巨大、主要组分为C3、C4 的901-926号液化烃罐（存量1536吨）。二氯乙烷：无色或浅黄色透明液体，有类似氯仿的气味，" |
|
||||||
+"微溶于水，可混溶于醇、醚、氯仿等，主要用于作蜡、脂肪、橡胶等的溶剂及谷物杀虫剂；属高毒类，对眼睛及呼吸道有刺激作用，吸入可引起肺水肿，抑制中枢神经系统、刺激胃肠道和引起肝、肾及肾上腺损害；" |
|
||||||
+"其蒸气与空气形成爆炸性混合物，遇明火、高热能引起燃烧爆炸，与氧化剂能发生强烈反应，受高热分解产生有毒的腐蚀性气体。熔点-35.7℃、闪点13℃、沸点83.5℃、饱和蒸气压13.33Kpa／29.4℃，爆炸极限6.2%-16%。" |
|
||||||
+"有害燃烧产物：一氧化碳、二氧化碳、氯化氢、光气。三氯乙烯：无色透明液体，有似氯仿的气味，不溶于水，可混溶于乙醇、乙醚等多数有机溶剂，主要用于脱脂、冷冻、农药、香料、橡胶工业、洗涤织物等；吸入后出现头痛、" |
|
||||||
+"头晕、酩酊感、嗜睡等，重者发生谵妄、抽搐，甚至昏迷、呼吸麻痹或循环衰竭；其蒸气与空气形成爆炸性混合物，遇明火、高热能引起燃烧爆炸，与强氧化剂可发生反应，受高热分解产生有毒的腐蚀性气体。熔点-87.1℃、闪点32.2℃、" |
|
||||||
+"沸点87.1℃、饱和蒸气压13.33Kpa／32℃，爆炸极限12.5%-90%。有害燃烧产物：一氧化碳、二氧化碳、氯化氢、光气。" |
|
||||||
+"四氯乙烯：无色液体，有氯仿样气味，不溶于水，可混溶于乙醇、乙醚等多数有机溶剂，主要用作溶剂；吸入急性中毒者有上呼吸道刺激症状、流泪、流涎，随之出现头晕、头痛、恶心、运动失调及酒醉样症状；一般不会燃烧，" |
|
||||||
+"但长时间暴露在明火及高温下仍能燃烧；若遇高热可发生剧烈分解，引起容器破裂或爆炸事故；受高热分解产生有毒的腐蚀性气体。熔点-22.2℃、沸点121.2℃、饱和蒸气压2.11Kpa／20℃。有害燃烧产物：氯化氢、光气。"}, |
|
||||||
{name:"着火区域情况",xinxi:"1、起火区域。起火位置为2号交换站。事故发生时，2号交换站进出料管线内存有汽油、石脑油、甲醇、芳烃、醋酸乙酯、醋酸丁酯、冰醋酸等物料，与其相连的罐区共存储12种、约15.8万吨的危化品。" |
|
||||||
+"后期起火的2401罐所在罐区，位于厂区中部，共有12个储罐，呈东、西两排分布，罐区防火堤长170m、宽70m、高1.1m，罐组隔堤高1m，最小罐间距10m。其中，2401-2408号为内浮顶罐、2409-2412号为拱顶罐，2401、2402罐罐容2500m3，" |
|
||||||
+"其余均为3750m3。事故发生时，2401、2402、2403、2404、2407、2409、2410、2411罐储存汽油共计13482吨，2408、2412罐储存甲醇共计1895吨，2405罐储存汽油添加剂MTBE（又称甲基叔丁基醚）1675吨，2406罐储存二氯乙烷4274吨。" |
|
||||||
+"2、毗邻情况。距离着火区域南侧7-8m为2401-2412罐区，储存裂解汽油、石脑油、甲醇、二氯乙烷等约1.8万吨；北侧66m为1301-1308罐区，储存甲醇约2.3万吨；东侧36m为2301-2316罐区，储存醋酸乙酯、醋酸丁酯、冰醋酸等约1.6万吨；" |
|
||||||
+"西侧36m为2501-2504罐区，储存混合芳烃约1.5万吨；西侧100m为液化烃罐区，储存主要组分为C3、C4的液化烃约1536吨。"}, |
|
||||||
{name:"单位消防设施及水源情况",xinxi:"事故单位设有消防水池1个，容积4864m3；消防水泵房位于厂区东侧，设有消防水泵3台，每台功率480kW、流量250L∕s、扬程130m；消防给水管网为环状、管径500mm，采用稳高压系统，平时压力0.7Mpa；" |
|
||||||
+"厂区共有消火栓132只、固定水炮54门。泡沫站位于2号交换站北侧，设有泡沫储罐2座，储存3%型抗溶性水成膜泡沫18吨，泡沫混合液主管道管径200-250mm。各罐区均设有水喷淋冷却系统，除液化烃罐区外，其他罐区还设有泡沫灭火系统；" |
|
||||||
+"1、2号交换站未设置自动消防设施。厂区四面有人工河流（护仓河）环绕，南临长江航道，西连丹华港，均可作为消防取水码头。"}, |
|
||||||
{name:"单位及周边消防力量情况",xinxi:"德桥化工仓储有限公司只建有微型消防站，没有企业专职消防队。周边20km范围有1个现役消防队、1个政府专职消防队，共有消防车11辆、队员53人，总载水量59吨、泡沫量12.4吨，距离最近的新港城专职队约5公里。"}, |
|
||||||
{name:"当日气象情况",xinxi:"气象资料显示：22日-23日，白天多云，夜里多云转阴有小雨，东南风3-4级，最低气温15-16℃，最高气温26-27℃。"} |
|
||||||
]}, |
|
||||||
{name:"事故特点",xinxidata:[ |
|
||||||
{name:"化学品种类多，危险性大",xinxi:"事故厂区储存有汽油、石脑油、甲醇、二氯乙烷、三氯乙烯、四氯乙烯、液化烃、芳烃、醋酸乙酯、" |
|
||||||
+"醋酸丁酯等各类危化品共计25种、21万余吨，且分储在13个罐区内。库区、罐区、罐组、罐与罐的安全间距小，同一罐区、罐组内存有多种易燃易爆、" |
|
||||||
+"有毒有害物料，成分复杂，风险极高。特别是厂区储存4274吨二氯乙烷、1988吨三氯乙烯、9315吨四氯乙烯，一旦遇到高热或发生爆炸、燃烧，会快速释放大量的剧毒光气。"}, |
|
||||||
{name:"储罐类型复杂，处置难度高",xinxi:"罐区内有拱顶、内浮顶、全压力球型、半冷冻球型等多种储罐类型，储存物料有油、烷烃、醇、酯等，" |
|
||||||
+"处置方法和灭火药剂类型不同，特别是厂区南侧的二氯乙烷、东北侧的三氯乙烯和四氯乙烯罐以及主要组分为C3、C4的液化烃罐区，危险性大、处置难度高。"}, |
|
||||||
{name:"地势落差大，流淌火蔓延快",xinxi:"厂区地势“中间高、南北低”，地面绝对标高相差约1.55m，道路坡度近1%。发生爆炸后，位于厂区中部的2号交换站上方管线被拉断，" |
|
||||||
+"大量易燃易爆物料外泄并沿地势急速流淌燃烧，将邻近罐区两侧的冷却管线和泡沫灭火管线烧毁。扑救过程中，大面积流淌火先后5次突破灭火防线，烧毁部分器材装备，严重威胁参战官兵生命安全。"}, |
|
||||||
{name:"周边环境复杂，指挥决策难度大",xinxi:"事故单位距离长江主航道仅300m，有相邻的危险品码头2个，事发时正在作业的危险品运输船只2艘，其他危险品船只若干；" |
|
||||||
+"周边5公里范围有19个村镇6万余名群众。加之事故单位有139个危化品储罐，与其一路之隔的联合安能化工有限公司还有22个、总储量达52万m3的易燃易爆物料储罐，火势一旦失控，极易引起连锁反应，给周边数十平方公里区域和长江水域带来不可估量的灾难。"} |
|
||||||
]}, |
|
||||||
{name:"处置过程",xinxidata:[ |
|
||||||
{name:"辖区力量到场",xinxi:"4月22日7时许，江苏德桥仓储有限公司组织承包商（华东建设安装有限公司）3名工人进入厂区2号交换站进行检修作业；" |
|
||||||
+"8时10分，在未实施有效监护的情况下动火作业；9时13分，因作业产生的明火引起2号交换站排污沟内残留油体燃烧，烧裂正在进料作业的206、305号管线" |
|
||||||
+"与储罐间的连接软管，造成管线内的裂解汽油和醋酸乙酯大量外泄燃烧；现场人员关闭了206、305号管线的紧急切断阀，并进行自救；9时16分，DCS系统发出指令，" |
|
||||||
+"关闭与2号交换站相连的物料输送管道的电动阀；9时18分，现场人员撤离前对2401罐未完全关闭的电动阀实施手动关阀（旋转了4圈）；9时18分55秒、9时19分38秒，" |
|
||||||
+"大火烧裂交换站部分管线，物料外泄加剧，先后发生2次较大规模爆炸；9时26分，事故单位向119报警。9时34分至49分，辖区中队新港城专职队和靖江中队相继到场。" |
|
||||||
+"此时，2号交换站一片火海，燃烧面积约2000㎡，火焰高达几十米，上层管廊出现局部坍塌。经询问单位技术人员，厂区所有生产系统已紧急停车，着火区域及邻近罐区的消防泵、" |
|
||||||
+"喷淋系统和固定炮已开启，燃烧物质为醇、脂、油类等易燃液体（主要为206、305号管线内的裂解汽油和醋酸乙酯）。到场力量迅速进行战斗部署：新港城专职队一号车泡沫水罐车" |
|
||||||
+"停靠1号交换站附近，从着火区域东侧架设1门移动炮阻截火势、1门移动炮冷却2402罐；二号车水罐车占据氮气站附近消火栓，向一号车供水；三号车抢险救援车停靠厂区东门外，" |
|
||||||
+"负责外围警戒和增援车辆引导。靖江中队一号车压缩空气泡沫车停靠南侧2411罐附近，从着火区域西南侧架设1门移动炮冷却2401罐（后期改为2支泡沫枪灭火）；二号车泡沫水罐车占据" |
|
||||||
+"南侧人工河，向一号车供水；三号车高喷车停靠西侧2501罐附近，从着火区域西北侧压制火势；四号车泡沫水罐车占据西侧926罐附近消火栓，向三号车供水；五号车泡沫水罐车占据北侧人工河，" |
|
||||||
+"从着火区域北侧架设1门移动炮阻截火势；六号车抢险救援车停靠厂区东门外，负责外围警戒和增援车辆引导。10时40分，2号交换站发生第三次爆炸，站内承重结构严重受损，管廊呈V型坍塌，" |
|
||||||
+"与装卸台相连的36条管线以及与码头相连的12条管线被拉断，大量带压物料加速外泄，顺地势沿罐区东、西两侧道路急速流淌，瞬间形成“全路面”流淌火。现场指挥员立即下达紧急撤退命令，" |
|
||||||
+"参战官兵按照既定路线，迅速撤离至邻近的2502罐南侧未使用的罐区防火堤内。在西南侧承担主攻任务的靖江中队泡沫车驾驶员朱军军，为保证火场供水不间断、掩护战友及时撤退、抢救车辆装备，被流淌火围困，瞬间被大火吞噬，壮烈牺牲。"}, |
|
||||||
{name:"支队增援力量到场",xinxi:"10时50分，支队全勤指挥部和特勤、泰兴、通扬路中队到场。此时，交换站及其东、南、西侧道路的流淌火近5000m2，火焰高度约40-50m，严重威胁位于" |
|
||||||
+"厂区南侧的液化烃输送管道及24、25罐区的16个储罐安全。指挥部立即组织力量从东、南、西侧部署1门暴雪泡沫炮、2支泡沫枪梯次掩护、强攻推进压制地面流淌火，并重新部署2门移动炮在西侧" |
|
||||||
+"道路设置阻截阵地。同时，组织相继到场的姜堰、兴化、滨江、春晖路中队，分别从着火区域西南、东北、东南方向共增设6门移动炮，阻截火势，强行对邻近的2401、2402、2403、2404、2502罐实施冷却、抑制爆炸。"}, |
|
||||||
{name:"总队增援力量到场",xinxi:"总队全勤指挥部出动途中，周详总队长通过指挥中心和移动视频终端实时跟踪灾情发展态势、了解战斗部署情况，并及时向前方指挥员下达指示要求：一是迅速查明燃烧物料的种类、性质和储量；" |
|
||||||
+"二是力量到场后不得盲目靠近事故核心区，应边行进边侦检，在相对安全区域设置移动炮、车载炮等阵地，确保官兵自身安全；三是组织单位技术人员采取关阀断料、紧急停车、氮封保护、启动固定消防设施等工艺措施，有效控制灾情发展；" |
|
||||||
+"四是根据火场态势和力量到场情况，集中全力加强对着火区域邻近罐体的冷却，防止火势扩大蔓延；五是及时关闭罐区雨排系统，安排力量提前筑堤设防，防止流淌火蔓延；六是派出安全哨，实时观察灾情发展态势，不间断监测罐体结构变化和" |
|
||||||
+"罐壁温度，明确紧急撤离路线。11时50分至12时，总队全勤指挥部和周详总队长相继到达现场，第一时间在距离2号交换站120m的配电房附近设立火场总指挥部，由周详总队长担任总指挥、高宁宇参谋长担任前沿指挥,朱晖副参谋长负责火情侦察" |
|
||||||
+"和通信保障、王士军副参谋长负责统筹协调和药剂保障，责令事故单位指派熟悉厂区情况和工艺安全的技术人员到指挥部全程值守，同时架设无人机高空侦察。指挥部第一时间调取厂区平面图和DCS系统实时监测数据，并围绕着火区域进行火情侦察，" |
|
||||||
+"确认着火区域南侧为混存裂解汽油、石脑油和燃烧爆炸产生剧毒光气的二氯乙烷罐区；北侧为甲醇罐区；东侧为冰醋酸、醋酸乙酯罐区；西侧为混合芳烃及主要组分为C3、C4的液化烃罐区。无人机航拍发现，2号交换站燃烧猛烈，直接烘烤南侧2401、" |
|
||||||
+"2402罐和西侧2502、2504罐；东、西两侧道路形成大面积流淌火迅速向南蔓延；2401-2404罐组防火隔堤内充满流淌火。根据DCS系统监测和无人机侦察结果，考虑到现场力量与灾情态势不对等的现状，指挥部确定了“控制燃烧、冷却抑爆、筑堤设防、" |
|
||||||
+"全程监测”的战术原则，并研究制定七项处置措施：一是明确将2406罐和液化烃罐区作为保护重点，集中力量冷却南侧的2401、2402、2403、2404罐和西侧2502、2504罐，阻止火势蔓延；二是组织力量在着火区域东南、西南、西北方向道路上筑堤设防，" |
|
||||||
+"防止地面流淌火蔓延，威胁战斗阵地和官兵生命安全；三是核查着火罐区关阀断料情况；四是密切监视邻近储罐的结构变化，时刻监测罐体温度以及厂区可燃、有毒气体浓度；五是组织力量接应灭火药剂、装备器材厂家，做好向战斗阵地的输送投放；六是通知" |
|
||||||
+"交通部门对长江航道采取禁航措施，撤离事故码头上下游船舶；七是通知环保部门做好防范水域污染的应对措施。12时05分至13时10分，无锡、南通、扬州支队增援力量相继到场。指挥部命令：泰州支队占据着火区域西北侧阵地，继续阻截流淌火向西侧芳烃罐区" |
|
||||||
+"蔓延，重点冷却2502、2504罐，防止火势威胁液化烃罐区；无锡支队在着火区域东、西侧道路及南侧设置阵地，扑灭地面流淌火，加强冷却2401、2402、2403、2404罐进行，死保2406罐；扬州支队占据着火区域北侧阵地，阻截流淌火蔓延，加强冷却1307、1406罐；" |
|
||||||
+"南通支队2套远程供水泵组分别利用东南侧消防水池和北侧人工河，向无锡和泰州支队阵地供水。12时15分许，着火区域接连传出十几声“嘭嘭”的爆炸声。侦察发现，由于长时间火焰烧烤，与2号交换站相连的部分进出料管线及盲板炸裂，管线内残存的汽油、甲醇、芳烃、" |
|
||||||
+"醋酸乙酯、冰醋酸等物料大量外泄（约260吨）。随着火势猛烈燃烧，流淌火再次向东、西两侧排水明渠和道路翻腾外溢，并流淌至厂区南侧人工河流，同时越过西侧道路向芳烃罐区蔓延，2502、2504罐被浓烈的烟火笼罩，2502罐保温层局部脱落。根据火情，指挥部调整" |
|
||||||
+"力量部署：在2502罐南侧未使用的罐区防火堤内设置4支泡沫枪阻截扑灭堤外流淌火；在2405—2408罐组防火堤内架设4门移动炮，加强对2403、2404罐冷却控制，继续死保2406罐；在西北侧架设2门移动炮，加强冷却2502、2504罐；在厂区南侧河面上，利用15m拉梯搭建" |
|
||||||
+"紧急撤离通道；依托罐区道路和防火堤，从东南、西南、西北三个方向利用沙袋构筑防护堤。同时，考虑2406罐存在爆炸危险，为在紧急情况下掩护官兵撤退，指挥部调集2台涡喷消防车增援现场。随即，指挥部前移至距离着火点30m左右的地点。" |
|
||||||
+"12时30分，省委常委、政法委书记、公安厅厅长王立科，省公安厅副厅长程建东到达现场，实地勘察灾情。王立科书记就事故处置工作提出六点要求：一是始终将参战官兵安全放在第一位，加强个人防护；二是发挥厂方技术人员作用，科学制定处置方案；" |
|
||||||
+"三是全力控制灾情扩大，做好长时间作战准备；四是如实发布信息，客观规范舆论导向；五是加强外围警戒，严禁无关人员进入现场；六是尽快组织专家评估灾情发展态势。" |
|
||||||
+"13时30分至17时45分，常州、苏州、镇江、南京、盐城支队和总队培训基地、公安消防部队士官学校的增援力量陆续到场。指挥部随即将整个火场划分为前、后方两个战区。" |
|
||||||
+"前方以事故区域为中心，划分东、西、南、北四个战斗段，要求着火区域必须使用“全泡沫”灭火与冷却。西侧阵地：泰州、苏州、南通、镇江支队和总队培训基地部署4门移动炮、" |
|
||||||
+"1门车载炮、1门高喷炮，阻截火势，加强对2401、2403、2502罐冷却，重点保护液化烃罐区。南侧阵地：无锡、常州支队部署8门移动炮，阻截火势，加强对2401、2402、2403、" |
|
||||||
+"2404、2405、2406罐冷却，持续死保2406号二氯乙烷罐。东侧阵地：南京、常州、盐城、泰州支队部署8门移动炮，阻截火势，加强对2401、2402、2404、2301、2303罐冷却。" |
|
||||||
+"北侧阵地：南京、扬州、泰州、南通、苏州支队部署10门移动炮、2门高喷炮、2门暴雪泡沫炮，阻截火势，加强对1307、1308罐冷却。" |
|
||||||
+"后方调集全省10套远程供水泵组、4辆泡沫原液供给车、40台泡沫输转泵、1200吨抗溶性泡沫，依托厂区人工河和长江航道设立取水点，设置2个泡沫补给点，全力保障火场不间断供水、" |
|
||||||
+"供液。远程供水：常州、无锡支队2套泵组利用厂区东南侧消防水池，向南侧、东侧阵地供水；苏州支队1套泵组利用北侧人工河，向北侧阵地供水；南通支队3套泵组分别利用厂区东南侧消防" |
|
||||||
+"水池、北侧人工河和南面长江干道，向南侧、北侧阵地供水；扬州支队1套泵组利用北侧人工河，向北侧阵地供水；泰州支队2套泵组分别利用南侧人工河和长江主干道，向消防水池和东侧阵地供水；" |
|
||||||
+"培训基地1套泵组利用北侧人工河，向西侧阵地供水。泡沫供给：分别在东、西门附近设置2个泡沫补给点，采取泡沫原液供给车输转、泡沫输转泵输转、人工搬运等多种方法，向各战斗阵地不间断补给泡沫药剂。" |
|
||||||
+"14时50分，指挥部决定：组织公安消防部队士官学校132名官兵，分别在东、西、北侧进攻路线上布设第二道防护堤，组织力量死看死守，牢牢将火势控制在交换站周边区域内。" |
|
||||||
+"16时11分，2号交换站火势突然急剧增大，巨大的火球腾空而起，近百米高的浓烟烈火笼罩厂区上空，东、西两侧部分道路和2401-2404罐防火隔堤内瞬间布满流淌火。加之厂区邻近" |
|
||||||
+"长江、风向多次突变，固定泡沫站被大火完全吞噬，强大的热辐射对邻近2号交换站北侧的甲醇和西北侧的芳烃等罐区安全构成了极大的威胁，人员难以靠近。指挥部根据物料泄漏量、" |
|
||||||
+"流淌速度及燃烧时间推断，2401-2404罐组存在储罐阀门未完全关闭，提出了“加强筑堤保护、全力阻截流淌火、持续强化冷却、伺机抵近关阀”的针对性措施。鉴于1307、1308罐体外壁温度均已超过300℃，" |
|
||||||
+"命令北侧阵地的扬州、泰州、苏州支队尽全力冷却1307、1308甲醇罐。" |
|
||||||
+"16时45分，紧急调集的2万米水带、30门移动炮、100套隔热服、30台泡沫输转泵、300套防毒面具全部到场，做好了打持久战的准备。" |
|
||||||
+"18时，指挥部根据兵力部署、火场态势和泡沫药剂、水源准备情况，发动第一次总攻，共部署30门移动炮、3门高喷炮、1门车载炮、2门暴雪泡沫炮、21支泡沫管枪强攻灭火。" |
|
||||||
+"18时30分，交换站东、西两侧地面流淌火被陆续扑灭，前期丢失的部分阵地重新占领，灭火力量与灾情态势相对均衡，火场进入拉锯相持阶段。" |
|
||||||
+"18时40分，指挥部明确四项措施：一是各阵地灭火冷却强度保持均衡；二是确保泡沫药剂、油料、供水不间断；三是加紧筑堤，巩固阵地；四是战斗预备队做好轮换准备。" |
|
||||||
+"19时许，淮安、宿迁、连云港、徐州4个支队，中石化华东片区的扬子石化、金陵石化、仪征化纤、南化公司、管道分公司、高桥石化6个企业专职消防队，共51辆重型泡沫车、342名队员，" |
|
||||||
+"以及总队2套单车400L/s的超重型化工编队，到达现场。按照指挥部要求，立即组成战斗预备队，做好随时轮换投入战斗的准备。" |
|
||||||
+"19时45分，伴随着几声巨响，数个火球接连腾起，管道再次爆裂，交换站东、西两侧道路再次出现大面积流淌火，2401罐顶鼓起，呼吸阀和泡沫产生器罐壁连接处起火，" |
|
||||||
+"呈火炬型燃烧。指挥部要求前沿指挥长密切监控火情，必要时有权决定撤退，确保安全。囿于高喷车难以抵近作战、移动炮和车载炮射程不足，指挥部要求加大供给强度，加强2401罐冷却，责成企业调集氮气车沿2401罐的东南侧道路停靠，强制向2401罐实施充氮保护。"}, |
|
||||||
{name:"部局领导到场",xinxi:"20时10分，罗永强副局长一行到达现场。在听取情况汇报、查看无人机视频后，罗永强副局长率领部局专家组深入现场，抵近着火点侦察，与化工专家研判商讨后，" |
|
||||||
+"作出战斗部署：一是即将到场的上海增援力量配合无锡支队在重点防御的西南侧阵地展开战斗；二是再次确认所有储罐阀门关闭情况；三是调用高喷车对受火势威胁较大的1307、1308罐进一步强化冷却。" |
|
||||||
+"20时30分，上海总队汪永明副总队长率领增援力量到场。根据罗永强副局长指示，组织力量从着火区域西南侧架设6门移动炮，协助无锡支队阻截交换站火势，并对2401、2403罐实施冷却。" |
|
||||||
+"21时50分，部消防局于建华局长带领工作组到达现场，详细听取现场情况汇报，深入前沿阵地勘察火情，准确研判火灾发展态势，迅速召集各战斗段指挥员和事故单位工程技术人员，提出五项处置措施：" |
|
||||||
+"一是保持足够力量对着火邻近储罐进行大强度冷却，确保不发生问题；二是从临近地区调集氮气，架设临时管线，对受火势威胁的储罐进行充氮保护；三是外接临时电源，启动西侧半冷冻球罐冰机；" |
|
||||||
+"四是备足力量和药剂，择机对交换站及罐区实施强攻灭火；五是树立底线意识，组织疏散半径5公里范围内的群众。" |
|
||||||
+"根据于建华局长指示，4个战斗区段分别增设1门移动炮加强对邻近罐冷却；组织对2401-2404罐组防火堤进行凿孔导流，降低液面、防止漫堤；" |
|
||||||
+"加强对2401-2404罐补充氮气保护；协调当地政府疏散周边5公里范围内的群众；各战斗阵地迅速补足泡沫和油料，组织预备力量轮换，做好总攻准备。" |
|
||||||
+"23日0时左右，2号交换站内火势仍呈喷射状燃烧。根据现场情况，于建华局长召集专家分析认定，罐区内仍有管线阀门未关闭，随即要求0时至1时再次发动总攻，为关阀断料创造条件。" |
|
||||||
+"0时30分，各阵地共部署42门移动炮、1门高喷炮、2门车载炮、2门暴雪泡沫炮、21支泡沫管枪，对着火区域及邻近罐区发起第二次总攻，2401-2404罐组内的流淌火、" |
|
||||||
+"2401罐顶呼吸阀和泡沫产生器罐壁连接处的明火被全部扑灭，2号交换站火势有所减弱。前沿侦察小组冒着强辐射热，抵近火场最前沿，反复观察火情，认为现场已具备关阀条件，" |
|
||||||
+"当即向于建华局长报告。于建华局长当机立断、果断决策，命令实施关阀断料。随后，罗永强副局长亲自排查罐区管线，制定关阀方案，指挥南京支队关阀攻坚小组，" |
|
||||||
+"在雾状水掩护下深入罐区防火堤内实施关阀断料。0时40分，2403、2404罐的进出料阀门被彻底关闭。" |
|
||||||
+"1时10分，2401罐的进出料阀门被彻底关闭。随后，火势明显减弱。指挥部命令，在保证冷却力量的前提下，各战斗段抢抓战机，梯次掩护推进，全力围剿火势。3时10分，大火被彻底扑灭。"}, |
|
||||||
{name:"冷却监护、移交现场",xinxi:"大火扑灭后，现场指挥部命令参战力量继续向着火区域液面喷射泡沫，增加泡沫覆盖厚度，防止复燃。同时继续冷却相邻罐体、持续降温，" |
|
||||||
+"安排专人对罐体温度和水样、空气进行不间断检测。4时25分，2401、2403、2404罐壁温度降至40℃以下，其它罐降至20℃左右，空气、水体检测结果基本正常。" |
|
||||||
+"9时30分，指挥部召集参战队伍指挥员进行战斗小结，明确苏州、无锡、南通、镇江、扬州5个支队，25辆消防车、150名官兵留守现场，配合泰州支队实施监护，其余力量陆续返回。" |
|
||||||
+"25日12时，现场所有储罐温度均降至常温，增援支队全部撤回，泰州支队17辆消防车、102名官兵继续监护。"} |
|
||||||
]}, |
|
||||||
{name:"几点体会",xinxidata:[ |
|
||||||
{name:"领导高度重视、正确指挥是先决条件",xinxi:"事故发生后，按照习近平总书记、李克强总理作出的批示指示，郭声琨部长，黄明、李伟副部长坐镇公安部指挥中心，" |
|
||||||
+"通过音视频系统指导现场处置工作，尤其是李伟副部长全程、实时跟踪指导一线战斗行动，明确了5条富有实效的战斗措施，为整个灭火救援战斗提供了科学遵循。江苏省委书记罗志军、" |
|
||||||
+"省长石泰峰，省委常委、政法委书记、公安厅厅长王立科，公安部消防局局长于建华、副局长罗永强深入火场前沿阵地，指导事故处置工作，鼓舞士气、凝聚警心，为全体参战官兵注入了强大的精神动力。" |
|
||||||
+"特别是于建华局长、罗永强副局长率先垂范、靠前指挥，准确研判、抢抓战机、果断决策，采取了一系列行之有效的灭火措施，从根本上遏制了火灾态势，为最终圆满打赢了这场险象环生的战斗起到了决定性作用。"}, |
|
||||||
{name:"力量调集充分、响应迅速是有力支撑",xinxi:"针对石油化工火灾的特殊复杂性和灾情预判情况，总队第一时间提请省政府启动重特大灾害事故应急处置预案，按火灾最高等级调集全省13个支队和总队培训基地28个化工编队、" |
|
||||||
+"4个战勤保障编队、10套远程供水泵组、124辆大功率泡沫水罐车、161门移动炮、1200吨抗溶性泡沫以及通信、侦检、洗消等装备器材，部消防局紧急调派公安消防部队士官学校和上海总队40辆车、332名官兵到场增援，为打好初战控制、有效遏制灾情扩大提供了有力保障。"}, |
|
||||||
{name:"发挥专家作用、科学施救是关键所在",xinxi:"事故发生后，部消防局和总队紧急调派化工灭火专家遂行出动、辅助决策。专家组根据侦察结果，实时评估灾情发展态势和罐体设备安全，及时提出了筑堤设防、全力冷却、" |
|
||||||
+"注氮排险等处置建议。尤其是公安部灭火救援专家组郝伟同志，在事故单位2次关阀未果的情况下，多次抵近罐区侦察，与罗永强副局长一起全程指导攻坚组关阀，对成功扑灭大火起到了十分关键的作用。"}, |
|
||||||
{name:"应急联动高效、保障有力是重要基础",xinxi:"事故发生后，省、市两级市政府迅速启动应急预案和联动机制，公安、安监、交通、气象、卫生、供水、供电、环保等部门第一时间响应，调集了客运车、环境检测车、" |
|
||||||
+"120救护车、叉车、运沙车等各种车辆40余辆和砂土、水泥等应急物资，协同开展了外围警戒、人员疏散、物资保障、环境监测、医疗急救等工作。总、支队两级战勤保障和应急通信力量遂行作战，调集战勤保障车辆22辆、" |
|
||||||
+"器材装备600余件套、水带2万多米、泡沫灭火剂约1200吨、油料约52吨，综合利用4G球机、3G单兵、卫星通信指挥车、无人机等设备，实时采集全景视频、火点分布、罐体温度等数据，不间断上传重点部位图像，为现场指挥决策提供了科学参考。"}, |
|
||||||
{name:"官兵英勇顽强、舍生忘死是根本保证",xinxi:"面对高温、浓烟、毒害气体和随时可能发生的爆炸，参战官兵从将军到士兵无一人退缩，始终战斗在灭火最前沿，面对生与死的考验，表现出应有的血性和担当。在多次进攻受阻的情况下，全体参战官兵顶着巨大压力，敢打敢拼、死守“红线”，与大火展开拉锯战、攻坚战，彰显了消防铁军英勇善战、敢打必胜的战斗精神。"} |
|
||||||
]} |
|
||||||
]}, |
|
||||||
{key:1,zongdata:[ |
|
||||||
{name:"基本信息",xinxidata:[ |
|
||||||
{name:"码头基本情况",xinxi:"八所港危化品码头位于东方市滨海南路，东侧为中海石油建滔化工有限公司化工厂区（甲醇项目）、中海油东方石化有限责任公司化工厂区" |
|
||||||
+"（DCC项目），西侧、北侧、南侧为大海。码头设置3个泊位，1号泊位为10000吨级，2号泊位为5000吨级，3号泊位为50000吨级。该码头目前运营工业园区六家公司的产品，" |
|
||||||
+"共有甲醇、原油、汽油、柴油、LPG、丙烯、MTBE等16种作业介质，年吞吐量约为520万吨。"},{name:"事故油轮基本情况",xinxi:"“丰盛油8 号”船体总长99.87m，型宽14.2m，吃水深度7.1m," |
|
||||||
+"满载为4800 吨。船体前端和中段共有10 个储油舱，分布在船体左右两侧，每个储油舱480 吨。船尾甲板以上共3 层，分别为驾驶室、船员舱和生活舱。船尾负二层为船员舱，负一层底舱为机" |
|
||||||
+"舱,机舱和货舱之间为泵舱。事故发生时油轮已装油完毕正准备离港。"},{name:"石脑油理化性质",xinxi:"石脑油化学俗名为溶剂油、粗汽油，是一种无色或浅黄色易燃液体，有特殊气味。其蒸汽与空气混合，能形成爆炸性混合物。" |
|
||||||
+"相对密度为0.78～0.97，闪点小于-18℃，燃点为260℃，爆炸极限%（V/V）为1.2～6.8。不溶于水，溶于多数有机溶剂，主要成分为烷烃的-C4～C6-成分。蒸汽比空气重，沿地面扩散并易积存于低洼处，遇火源会着火回燃。" |
|
||||||
+"能够通过呼吸道吸入、皮肤接触、食入等方式进入体内，石脑油蒸气可引起眼及上呼吸道刺激症状。如浓度过高，几分钟即可引起呼吸困难、紫绀等缺氧症状。"}, |
|
||||||
{name:"消防水源及消防设施情况",xinxi:"该码头设施的消防用水采用两路供水，一路由后方甲醇项目厂区2 座各为容量4000m3 的消防水池提供，另外一路由后方精细化工项目厂区内2 座各为容量10000m3的消防水池提供，由2 条管" |
|
||||||
+"径DN400mm 的消防供水干管接至码头，消防管网供水能力为600L/S，压力0.7～1.2MPa。码头设置46 套消防栓箱、1 套水幕系统、2 套ZPF3000 干粉灭火系统、8 座消防炮塔（每座炮塔上有" |
|
||||||
+"电动遥控消防泡沫炮和水炮各一门，消防水炮和消防泡沫炮流量均为80L/s），备有抗溶性水成膜泡沫25 吨，存储在泡沫泵房内，通过比例混合器直接进入泡沫管线，向泡沫栓供给。码头周边" |
|
||||||
+"1000m 范围内有可用市政消火栓10 个（园区三路2 个，疏港北路2 个，疏港三中路6 个），压力为0.2～0.3MPa，另距离码头约300m处有华能电厂码头可作为海水取水点。"} |
|
||||||
]} |
|
||||||
]} |
|
||||||
] |
|
||||||
zongdata |
|
||||||
centerdata |
|
||||||
|
|
||||||
//打开说话框
|
|
||||||
isOpenTalk = false |
|
||||||
openTalkDiv(){ |
|
||||||
this.isOpenTalk = !this.isOpenTalk |
|
||||||
} |
|
||||||
//详情页
|
|
||||||
isshow=false//控制显隐
|
|
||||||
ShowHide (key){ |
|
||||||
console.log(this.tandata) |
|
||||||
this.zongdata=this.tandata[key].zongdata |
|
||||||
this.centerdata=this.zongdata[0].xinxidata |
|
||||||
console.log(this.zongdata) |
|
||||||
this.isshow=true |
|
||||||
} |
|
||||||
ShoeFalse(){ |
|
||||||
this.isshow=false |
|
||||||
/* this.zongdata=null |
|
||||||
this.centerdata=null */ |
|
||||||
this.zjxinxi="" |
|
||||||
this.chooseleft=-1 |
|
||||||
this.chooseid=0 |
|
||||||
} |
|
||||||
//点击弹窗头部
|
|
||||||
chooseid=0 |
|
||||||
clickHead(num){ |
|
||||||
this.zjxinxi="" |
|
||||||
this.chooseid=num |
|
||||||
this.centerdata=this.zongdata[num].xinxidata |
|
||||||
this.chooseleft=-1 |
|
||||||
console.log(this.centerdata) |
|
||||||
} |
|
||||||
|
|
||||||
//点击弹窗左侧菜单栏
|
|
||||||
zjxinxi |
|
||||||
chooseleft |
|
||||||
clickLift(key){ |
|
||||||
this.chooseleft=key |
|
||||||
console.log(key) |
|
||||||
this.zjxinxi=this.centerdata[key].xinxi |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
@ -1,52 +0,0 @@ |
|||||||
<div style="width: 100%;height: 100%;position: relative;"> |
|
||||||
<div class="backBtn" *ngIf="isResponsePlans" (click)="back()"> |
|
||||||
返回 |
|
||||||
</div> |
|
||||||
<div class="bigTalkBox" style="position: absolute;right: 26px;top: 8px;" [ngClass]="{cssClass: !isResponsePlans}"> |
|
||||||
<mat-icon class="titleIcon" (click)="openTalkDiv()">volume_up</mat-icon> |
|
||||||
<div class="talkBox" *ngIf="isOpenTalk"> |
|
||||||
<div class="btndiv"> |
|
||||||
<div>泵房</div> |
|
||||||
<div>控制室</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
<div class="bottomDiv"> |
|
||||||
<div> |
|
||||||
<mat-icon>settings_voice</mat-icon> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
按住说话 |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<mat-icon>search</mat-icon> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="leisiTable" *ngIf="!isResponsePlans"> |
|
||||||
<table> |
|
||||||
<thead > |
|
||||||
<td style="width:40%;">单位名称</td> |
|
||||||
<td style="width:10%;">始建于</td> |
|
||||||
<td style="width:10%;">着火物</td> |
|
||||||
<td style="width:10%;">点火位置</td> |
|
||||||
<td style="width:10%;">相近度</td> |
|
||||||
<td style="width:20%;">详情</td> |
|
||||||
</thead> |
|
||||||
<tbody id="shujubody" > |
|
||||||
<tr *ngFor="let leisi of leisiYuan"> |
|
||||||
<td style="color: #FFFFFF;">{{leisi.danweiName}}</td> |
|
||||||
<td></td> |
|
||||||
<td></td> |
|
||||||
<td style="color: #FFFFFF;">{{leisi.weizhi}}</td> |
|
||||||
<td [ngClass]="{'tdyanse56':leisi.xiangjin>=50&&leisi.xiangjin<=60,'tdyanse78':leisi.xiangjin>60,'tdyanse':leisi.xiangjin<50}">{{leisi.xiangjin}}%</td> |
|
||||||
<td style="color: #CC5D13;cursor: pointer;" (click)="openDeatails()">查看详情</td> |
|
||||||
</tr> |
|
||||||
</tbody> |
|
||||||
</table> |
|
||||||
</div> |
|
||||||
<div style="width: 100%;height: 100%;" *ngIf="isResponsePlans"> |
|
||||||
<app-collection-tools></app-collection-tools> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,122 +0,0 @@ |
|||||||
.leisiTable{ |
|
||||||
border:1px solid #0E79A9; |
|
||||||
height: 95%; |
|
||||||
width: 100%; |
|
||||||
background-color: #05385E; |
|
||||||
margin-top: 50px; |
|
||||||
table{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
border-collapse:collapse; |
|
||||||
thead{ |
|
||||||
td{ |
|
||||||
color:#F7BA2A; |
|
||||||
height: 50px; |
|
||||||
text-align:center; |
|
||||||
border-bottom: 1px solid #0E79A9; |
|
||||||
} |
|
||||||
} |
|
||||||
tbody{ |
|
||||||
td{ |
|
||||||
text-align:center; |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.tdyanse56{ |
|
||||||
color:#3BA9F2 |
|
||||||
} |
|
||||||
.tdyanse78{ |
|
||||||
color:#28BC69 |
|
||||||
} |
|
||||||
.tdyanse{ |
|
||||||
color: #FFFFFF; |
|
||||||
} |
|
||||||
.backBtn{ |
|
||||||
position: absolute; |
|
||||||
right: 60px; |
|
||||||
top: 8px; |
|
||||||
width: 80px; |
|
||||||
height: 30px; |
|
||||||
line-height: 30px; |
|
||||||
text-align: center; |
|
||||||
color: white; |
|
||||||
cursor: pointer; |
|
||||||
border: 1px solid #0E79A9; |
|
||||||
border-radius: 5px; |
|
||||||
z-index: 8999; |
|
||||||
} |
|
||||||
.backBtn:hover{ |
|
||||||
background-color: #0c4c69; |
|
||||||
} |
|
||||||
.bigTalkBox{ |
|
||||||
user-select: none; |
|
||||||
.titleIcon{ |
|
||||||
font-size: 33px; |
|
||||||
vertical-align: sub; |
|
||||||
color: white; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.talkBox{ |
|
||||||
width: 309px; |
|
||||||
height: 326px; |
|
||||||
border: 1px solid #30bbec; |
|
||||||
background-color: #013a64; |
|
||||||
opacity: .9 ; |
|
||||||
position: absolute; |
|
||||||
top: 32px; |
|
||||||
right:4px; |
|
||||||
z-index: 2000; |
|
||||||
.btndiv{ |
|
||||||
div{ |
|
||||||
border-radius: 18px; |
|
||||||
width: 70px; |
|
||||||
height: 30px; |
|
||||||
text-align: center; |
|
||||||
line-height: 30px; |
|
||||||
display: inline-block; |
|
||||||
font-size: 13px; |
|
||||||
color: white; |
|
||||||
cursor: pointer; |
|
||||||
|
|
||||||
} |
|
||||||
div:nth-child(1){ |
|
||||||
background-color: #fe9400; |
|
||||||
margin: 10px; |
|
||||||
} |
|
||||||
div:nth-child(2){ |
|
||||||
background-color: #f95e5a; |
|
||||||
} |
|
||||||
} |
|
||||||
.bottomDiv{ |
|
||||||
position: absolute; |
|
||||||
bottom:6px; |
|
||||||
width: 100%; |
|
||||||
height: 32px; |
|
||||||
line-height: 32px; |
|
||||||
display: flex; |
|
||||||
color: white; |
|
||||||
text-align: center; |
|
||||||
mat-icon{ |
|
||||||
vertical-align: sub; |
|
||||||
} |
|
||||||
div:nth-child(1){ |
|
||||||
flex: 1; |
|
||||||
} |
|
||||||
div:nth-child(2){ |
|
||||||
flex: 6; |
|
||||||
color: #409eff; |
|
||||||
background: url('../../../assets/images/输入框.png'); |
|
||||||
background-size: 100% 100%; |
|
||||||
} |
|
||||||
div:nth-child(3){ |
|
||||||
flex: 1; |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.cssClass{ |
|
||||||
top: -42px!important; |
|
||||||
} |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { SimilarPlansComponent } from './similar-plans.component'; |
|
||||||
|
|
||||||
describe('SimilarPlansComponent', () => { |
|
||||||
let component: SimilarPlansComponent; |
|
||||||
let fixture: ComponentFixture<SimilarPlansComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ SimilarPlansComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(SimilarPlansComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,44 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
import { Color } from 'cesium'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-similar-plans', |
|
||||||
templateUrl: './similar-plans.component.html', |
|
||||||
styleUrls: ['./similar-plans.component.scss'] |
|
||||||
}) |
|
||||||
export class SimilarPlansComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
|
|
||||||
} |
|
||||||
//打开说话框
|
|
||||||
isOpenTalk = false |
|
||||||
openTalkDiv(){ |
|
||||||
this.isOpenTalk = !this.isOpenTalk |
|
||||||
} |
|
||||||
|
|
||||||
leisiYuan=[ |
|
||||||
{danweiName:"广西钦州志诚化工有限公司",year:"XXXX年",zhoahuo:"XXX",weizhi:"2#储罐",xiangjin:parseFloat("80%")}, |
|
||||||
{danweiName:"南宁交能石化有限责任公司",year:"",zhoahuo:"XXX",weizhi:"3#储罐",xiangjin:parseFloat("75%")}, |
|
||||||
{danweiName:"广西藤县通轩立信化学有限公司",year:"",zhoahuo:"XXX",weizhi:"1#储罐",xiangjin:parseFloat("70%")}, |
|
||||||
{danweiName:"广西田东锦盛化工科技有限公司",year:"",zhoahuo:"XXXXXX",weizhi:"12#储罐",xiangjin:parseFloat("60%")}, |
|
||||||
{danweiName:"梧州市联溢化工有限公司",year:"",zhoahuo:"XXX",weizhi:"5#储罐",xiangjin:parseFloat("50%")}, |
|
||||||
{danweiName:"田东石油化工钦州港油品储运库",year:"",zhoahuo:"XXX",weizhi:"4-1#储罐",xiangjin:parseFloat("40%")}, |
|
||||||
{danweiName:"中国石油进德油库",year:"",zhoahuo:"XXX",weizhi:"3#储罐",xiangjin:parseFloat("45%")}, |
|
||||||
{danweiName:"广西华鑫化工有限公司",year:"",zhoahuo:"XXX",weizhi:"11#储罐",xiangjin:parseFloat("42%")}, |
|
||||||
{danweiName:"广西中油能源有限公司",year:"",zhoahuo:"XXX",weizhi:"6#储罐",xiangjin:parseFloat("39%")}, |
|
||||||
{danweiName:"广西钦州澄星化工科技有限公司",year:"",zhoahuo:"XXX",weizhi:"5-2#储罐",xiangjin:parseFloat("35%")}, |
|
||||||
{danweiName:"中油广西田东石油化工总厂有限公司",year:"",zhoahuo:"XXX",weizhi:"3-1#储罐",xiangjin:parseFloat("30%")} |
|
||||||
] |
|
||||||
|
|
||||||
isResponsePlans = false //默认是否是处置预案
|
|
||||||
|
|
||||||
openDeatails(){ |
|
||||||
this.isResponsePlans = true |
|
||||||
} |
|
||||||
back(){ |
|
||||||
this.isResponsePlans = false |
|
||||||
} |
|
||||||
} |
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue