Browse Source

[新增]危化品基本完成

develop
邵佳豪 4 years ago
parent
commit
2f037f8216
  1. 11
      src/app/pipes/boolean.pipe.ts
  2. 51
      src/app/ui/dangerous/dangerous.component.html
  3. 63
      src/app/ui/dangerous/dangerous.component.scss
  4. 249
      src/app/ui/dangerous/dangerous.component.ts
  5. 11
      src/app/ui/dangerous/gis.html
  6. 8
      src/app/ui/plan/collection-tools.component.html
  7. 1
      src/app/ui/plan/collection-tools.component.scss
  8. 6
      src/app/ui/plan/collection-tools.component.ts
  9. 6
      src/app/ui/ui.module.ts

11
src/app/pipes/boolean.pipe.ts

@ -1,5 +1,6 @@
import { Pipe, PipeTransform } from '@angular/core';
import { isno , PlanTypeEnum , AuditStatusEnum , PlanLevelEnum} from '../interface'
import {DomSanitizer} from '@angular/platform-browser'
@Pipe({name: 'isno'})
export class IsnoPipe implements PipeTransform {
transform(value: boolean): string {
@ -30,3 +31,13 @@ export class PlanLevel implements PipeTransform {
return PlanLevelEnum[value]
}
}
@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {
}
transform(html) {
return this.sanitizer.bypassSecurityTrustHtml(html)
}
}

51
src/app/ui/dangerous/dangerous.component.html

@ -7,7 +7,7 @@
<!-- 危化品类型 -->
<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>
@ -18,50 +18,35 @@
<th>分类</th>
<th>查看详情</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td (click)="openDetails()">查看详情</td>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>查看详情</td>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>查看详情</td>
<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>
<!-- 危化品分布 -->
<div id="size" class="size" *ngIf="!istype">
</div>
<app-gis *ngIf="!istype"></app-gis>
<!-- 详情弹出框 -->
<div class="openDiv" *ngIf="isOpen" cdkDragBoundary=".box" cdkDrag>
<div class="top">
<h4>name</h4>
<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>品名</div>
<div>理化属性</div>
<div>危害特性</div>
<div>灭火剂</div>
<div>储运注意事项</div>
<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">
<div class="right" [innerHTML]="detailNode.content[num].data | safeHtml">
</div>
</div>

63
src/app/ui/dangerous/dangerous.component.scss

@ -35,6 +35,28 @@
// 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%;
@ -73,14 +95,14 @@
border-bottom: 1px solid #26b5fb;
width: 100%;
}
tr:nth-child(2){
margin-top: 8px;
}
}
}
.size{
width: 100%;
height: 100%;
}
.openDiv{
z-index: 3000;
width:600px;
@ -94,12 +116,16 @@
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 #26b5fb;
border-bottom: 1px solid #ff4949;
font-size: 18px;
position: relative;
h4{
color: red;
@ -117,10 +143,11 @@
}
.details{
width: 100%;
height: 100%;
height: 468px;
display: flex;
.left{
height: 100%;
width: 24%;
flex: 2;
border-right:1px solid #26b5fb;
div{
width: 100%;
@ -135,7 +162,29 @@
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;
}

249
src/app/ui/dangerous/dangerous.component.ts

@ -12,9 +12,182 @@ export class DangerousComponent implements OnInit {
ngOnInit(): void {
}
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
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.656839, 23.098685],
center: [109.660144, 23.100172],
radius: 500, //半径
strokeOpacity: 1,
fillOpacity: 0.4,
@ -24,47 +197,63 @@ export class DangerousComponent implements OnInit {
fillColor: '#1791fc',
zIndex: 50,
})
//类型选择
istype = true//默认选择危化品类型
typeSelect(type){
if(type ==1 ){
this.istype = true
}else{
this.istype = false
setTimeout(() => {
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(116.38,39.92),
// 将一张图片的地址设置为 icon
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
// 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30)
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.656839, 23.098685],//中心点坐标
zoom: 16,
center: [109.661536,23.098726],//中心点坐标
zoom: 15.8,
layers:[
satellite,
// roadNet
roadNet
]
});
this.circle.setMap(this.map)
this.map.add([viaMarker]);
// this.map.setFitView([ circle ])
}, 0);
this.circle.setMap(this.map);//增加范围圆圈
this.map.add([viaMarker]);//火源标点
marker1.setMap(this.map);
marker2.setMap(this.map);
marker3.setMap(this.map);
}
}
//查看详情框打开
isOpen = false
closeDiv(){
this.isOpen = false
}
openDetails(){
this.isOpen = true
//范围选择
rangevalue = 500
rangeSelect(e){
this.circle.setRadius(Number(this.rangevalue))
this.circle.setMap(this.map);//增加范围圆圈
}
}

11
src/app/ui/dangerous/gis.html

@ -0,0 +1,11 @@
<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>

8
src/app/ui/plan/collection-tools.component.html

@ -225,17 +225,17 @@
<!-- 消防列表树写在这里 -->
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' (click)="clickTreeNode(node)" class="treeNode">
<mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' (click)="clickTreeNode(node,$event)" class="treeNode">
<button mat-icon-button disabled></button>
<span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
{{node.name}}
</span>
<span *ngIf="node.isTemplate">({{node.children.length}})</span>
<span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
<span class="isLookCss" (click)="clickLookItem(node,$event)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
</mat-tree-node>
<mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="clickTreeNode(node)"class="treeNode" >
<mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="clickTreeNode(node,$event)"class="treeNode" >
<button mat-icon-button
matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name">
@ -247,7 +247,7 @@
{{node.name}}
</span>
<span *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span>
<span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
<span class="isLookCss" (click)="clickLookItem(node,$event)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
</mat-tree-node>
</mat-tree>

1
src/app/ui/plan/collection-tools.component.scss

@ -361,6 +361,7 @@
.isLookCss{
position: absolute;
right: 6px;
z-index: 1000;
}
}
.mat-tree{

6
src/app/ui/plan/collection-tools.component.ts

@ -557,7 +557,7 @@ export class planComponent implements OnInit {
}
//点击树节点
clickTreeNode(node){
clickTreeNode(node,e){
if(this.canvasData.originalcompanyBuildingData.data[node.id]){
this.setAssetsProperty(this.canvasData.originalcompanyBuildingData.data[node.id])
}else if(this.canvasData.originaleveryStoreyData.data[node.id]){
@ -583,8 +583,8 @@ export class planComponent implements OnInit {
}
//点击数节点的显示隐藏icon
clickLookItem(node){
clickLookItem(node,e){
// e.stopPropation()
//修改真实素材islook属性
for(let key in this.storeyData.data){
if(key == node.id){

6
src/app/ui/ui.module.ts

@ -48,7 +48,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatPaginatorIntl } from '@angular/material/paginator';
import { PersonaldataComponent } from '../pages/personaldata/personaldata.component';
import { ChangepasswordComponent } from './changepassword/changepassword.component';
import { IsnoPipe } from '../pipes/boolean.pipe';
import { IsnoPipe, SafeHtmlPipe } from '../pipes/boolean.pipe';
import {ConfirmpswDirective} from './changepassword/equal-validator.directive'
import { TimePipe } from '../pipes/time.pipe';
import { FileUploadModule } from 'ng2-file-upload'
@ -58,14 +58,14 @@ import {leftFunctionalDomainComponent,editPlaneFigureComponent,addDisposalNodeCo
import { saveOneDialog, saveTwoDialog } from './collection-tools/save';
import { planComponent } from './plan/collection-tools.component';
import { DisposalNodeComponent } from './disposal-node/disposal-node.component';
import { DangerousComponent } from './dangerous/dangerous.component';
import { DangerousComponent, GisComponent } from './dangerous/dangerous.component';
import { SimilarPlansComponent } from './similar-plans/similar-plans.component';
import { RealCasesComponent } from './real-cases/real-cases.component';
import { PlanAssistanceComponent } from './plan-assistance/plan-assistance.component';
@NgModule({
declarations: [UiComponent,PersonaldataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe, CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent, DisposalNodeComponent, DangerousComponent, SimilarPlansComponent, RealCasesComponent, PlanAssistanceComponent,planComponent],
declarations: [SafeHtmlPipe,GisComponent,UiComponent,PersonaldataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe, CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent, DisposalNodeComponent, DangerousComponent, SimilarPlansComponent, RealCasesComponent, PlanAssistanceComponent,planComponent],
imports: [
CommonModule,

Loading…
Cancel
Save