From 2f037f8216279b204e89d76318824963c8ed73bd Mon Sep 17 00:00:00 2001 From: Shaojihao <55341701@qq.com> Date: Mon, 21 Sep 2020 18:46:45 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E5=8D=B1=E5=8C=96=E5=93=81?= =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pipes/boolean.pipe.ts | 11 + src/app/ui/dangerous/dangerous.component.html | 53 ++-- src/app/ui/dangerous/dangerous.component.scss | 65 ++++- src/app/ui/dangerous/dangerous.component.ts | 269 +++++++++++++++--- src/app/ui/dangerous/gis.html | 11 + .../ui/plan/collection-tools.component.html | 8 +- .../ui/plan/collection-tools.component.scss | 1 + src/app/ui/plan/collection-tools.component.ts | 6 +- src/app/ui/ui.module.ts | 6 +- 9 files changed, 338 insertions(+), 92 deletions(-) create mode 100644 src/app/ui/dangerous/gis.html diff --git a/src/app/pipes/boolean.pipe.ts b/src/app/pipes/boolean.pipe.ts index 56b7930..8604d14 100644 --- a/src/app/pipes/boolean.pipe.ts +++ b/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 { @@ -29,4 +30,14 @@ export class PlanLevel implements PipeTransform { transform(value: number): string { return PlanLevelEnum[value] } +} + +@Pipe({name: 'safeHtml'}) +export class SafeHtmlPipe implements PipeTransform { + constructor(private sanitizer: DomSanitizer) { + } + + transform(html) { + return this.sanitizer.bypassSecurityTrustHtml(html) + } } \ No newline at end of file diff --git a/src/app/ui/dangerous/dangerous.component.html b/src/app/ui/dangerous/dangerous.component.html index 5d15e2d..3a49d5b 100644 --- a/src/app/ui/dangerous/dangerous.component.html +++ b/src/app/ui/dangerous/dangerous.component.html @@ -7,7 +7,7 @@
- +
{{item.name}}
@@ -18,51 +18,36 @@ - - - - - - - - - - - - - - - - - - - - + + + + + + +
分类 查看详情
row 1, cell 1row 1, cell 2row 1, cell 1row 1, cell 2查看详情
row 1, cell 1row 1, cell 2row 1, cell 1row 1, cell 2查看详情
row 1, cell 1row 1, cell 2row 1, cell 1row 1, cell 2查看详情
{{item.name}}{{item.englishname}}{{item.molecularformula}}{{item.type}}查看详情
-
- -
+ -
-
-

name

+
+
+

{{detailNode.name}}

x
-
品名
-
理化属性
-
危害特性
-
灭火剂
-
储运注意事项
+
品名
+
理化属性
+
危害特性
+
灭火剂
+
储运注意事项
-
- +
+
diff --git a/src/app/ui/dangerous/dangerous.component.scss b/src/app/ui/dangerous/dangerous.component.scss index f68c763..3c70771 100644 --- a/src/app/ui/dangerous/dangerous.component.scss +++ b/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; + } } } } -} \ No newline at end of file +} + +.size{ + width: 100%; + height: 100%; + position: relative; + z-index: 100; +} +#selectedBox{ + width: 120px; + height: 20px; + position: absolute; + z-index: 101; + left: 6px; + top: 0; +} diff --git a/src/app/ui/dangerous/dangerous.component.ts b/src/app/ui/dangerous/dangerous.component.ts index 11c0e4e..3fe0e24 100644 --- a/src/app/ui/dangerous/dangerous.component.ts +++ b/src/app/ui/dangerous/dangerous.component.ts @@ -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:`易燃,遇热、明火、强氧化剂,均有引起燃烧爆炸的危险。
其蒸气能与空气形成爆炸性混合物,遇火星易爆炸。`}, + {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:`淡黄色粉末或砂粒状固体。易燃,有毒。易溶于丙酮,略溶于醇,微溶于氯仿,不溶于乙醚及水。温度≥199℃时分解,与酸或酸雾接触,将迅速起火燃烧。 + 相对密度: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%乙醇中析出者,呈黄褐色叶片 + 状结晶。易溶于乙醚和苯,难溶于冷水和乙醇。遇铜铁和钴盐溶液,分别显褐色、黄绿色和黄褐色。受热剧烈分解。自甲醇及水中析出者,具有1个分子结晶水, + 不溶于水,其熔点为162~163℃ + 熔点:168℃ + 自燃点:115℃`}, + {data:`受热或与氧化剂接触,有燃烧爆炸的 + 危险。`}, + {data:`砂土、二氧化碳、雾状水。`}, + {data:`储存于阴凉通风仓间内。最高仓温不宜超过30℃。远离火种及热源。应与氧化剂分仓间存放,与金属粉末及酸类隔离堆放。搬运时应轻装轻卸,防止猛撞引起爆炸。`}, + ]}, + {name:"乙基膦",englishname:"Ethylphosphine",molecularformula:"C2H5PH2",type:"一级易于自燃物质",content:[ + {data:`乙基膦`}, + {data:`无色液体。遇水分解。 + 相对密度:<1 + 沸点:25℃`}, + {data:`在空气中能自燃,接触溴、氯和发烟 + 硝酸会发生爆炸。遇浓硫酸会燃烧`}, + {data:`干砂、干粉。禁止用水、泡沫`}, + {data:`储存于阴凉干燥仓间内。最高仓温不超过20℃。包装必须完整、密封,防止与空气接触。堆放时应与卤素、酸类、潮解性物质、氧化剂分开。远离火种、热源。搬运时轻装轻卸,保持包装完整。`}, + ]} + ]}, + {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);//增加范围圆圈 + } +} \ No newline at end of file diff --git a/src/app/ui/dangerous/gis.html b/src/app/ui/dangerous/gis.html new file mode 100644 index 0000000..c4a8e15 --- /dev/null +++ b/src/app/ui/dangerous/gis.html @@ -0,0 +1,11 @@ +
+
+ +
+
+ +
+
diff --git a/src/app/ui/plan/collection-tools.component.html b/src/app/ui/plan/collection-tools.component.html index 7cca24a..2fcbec8 100644 --- a/src/app/ui/plan/collection-tools.component.html +++ b/src/app/ui/plan/collection-tools.component.html @@ -225,17 +225,17 @@ - + {{node.name}} ({{node.children.length}}) - visibility + visibility - +