|
|
|
|
@ -12,50 +12,139 @@ export class DangerousComponent implements OnInit {
|
|
|
|
|
ngOnInit(): void { |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
//地图范围圆圈
|
|
|
|
|
circle = new AMap.Circle({ |
|
|
|
|
center: [109.656839, 23.098685], |
|
|
|
|
radius: 500, //半径
|
|
|
|
|
strokeOpacity: 1,
|
|
|
|
|
fillOpacity: 0.4, |
|
|
|
|
strokeStyle: 'dashed', |
|
|
|
|
strokeDasharray: [10, 10],
|
|
|
|
|
// 线样式还支持 'dashed'
|
|
|
|
|
fillColor: '#1791fc', |
|
|
|
|
zIndex: 50, |
|
|
|
|
}) |
|
|
|
|
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 |
|
|
|
|
if(type == 1){ |
|
|
|
|
this.istype = true
|
|
|
|
|
}else{ |
|
|
|
|
this.istype = false |
|
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
var satellite = new AMap.TileLayer.Satellite(); |
|
|
|
|
var roadNet = new AMap.TileLayer.RoadNet(); |
|
|
|
|
// 创建一个 icon
|
|
|
|
|
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) |
|
|
|
|
}); |
|
|
|
|
this.map = new AMap.Map('size',{ |
|
|
|
|
center: [109.656839, 23.098685],//中心点坐标
|
|
|
|
|
zoom: 16, |
|
|
|
|
layers:[ |
|
|
|
|
satellite, |
|
|
|
|
// roadNet
|
|
|
|
|
] |
|
|
|
|
}); |
|
|
|
|
this.circle.setMap(this.map) |
|
|
|
|
this.map.add([viaMarker]); |
|
|
|
|
// this.map.setFitView([ circle ])
|
|
|
|
|
}, 0); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
@ -64,7 +153,107 @@ export class DangerousComponent implements OnInit {
|
|
|
|
|
closeDiv(){ |
|
|
|
|
this.isOpen = false |
|
|
|
|
} |
|
|
|
|
openDetails(){ |
|
|
|
|
|
|
|
|
|
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.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);//增加范围圆圈
|
|
|
|
|
} |
|
|
|
|
} |
