From 465c505bbe03e4a00069237be0d8e0f7308e41d3 Mon Sep 17 00:00:00 2001 From: Shaojihao <55341701@qq.com> Date: Mon, 21 Sep 2020 12:00:58 +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=BC=95=E5=85=A5=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/ui/dangerous/dangerous.component.html | 68 ++++++++- src/app/ui/dangerous/dangerous.component.scss | 132 +++++++++++++++++- src/app/ui/dangerous/dangerous.component.ts | 61 +++++++- 3 files changed, 252 insertions(+), 9 deletions(-) diff --git a/src/app/ui/dangerous/dangerous.component.html b/src/app/ui/dangerous/dangerous.component.html index 8a22dfe..5d15e2d 100644 --- a/src/app/ui/dangerous/dangerous.component.html +++ b/src/app/ui/dangerous/dangerous.component.html @@ -1,6 +1,70 @@
-
危化品类型
-
危化品分布
+
危化品类型
+
危化品分布
+
+
+ +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
品名英文名分子式分类查看详情
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查看详情
+
+
+ +
+ +
+ +
+
+

name

+ +
x
+
+
+
+
品名
+
理化属性
+
危害特性
+
灭火剂
+
储运注意事项
+
+
+ +
+
+
diff --git a/src/app/ui/dangerous/dangerous.component.scss b/src/app/ui/dangerous/dangerous.component.scss index fe3b9a5..f68c763 100644 --- a/src/app/ui/dangerous/dangerous.component.scss +++ b/src/app/ui/dangerous/dangerous.component.scss @@ -1,17 +1,141 @@ .box{ width: 100%; height: 100%; - border: 1px solid red; + // border: 1px solid red; display: flex; flex-direction: column; .title{ flex: 2%; width: 100%; + padding-top: 10px; div{ display: inline-block; - width: 200px; - height: 80%; - border: #26b5fb; + width: 126px; + height: 35px; + line-height: 35px; + text-align: center; + border:1px solid #26b5fb; + color: white; + cursor: pointer; + } + .selectedBtn{ + background-color: #e88108; + } + } + .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; + } + .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%; + } + } + + } + } + .size{ + width: 100%; + height: 100%; + } + .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; + .top{ + width: 100%; + height: 32px; + line-height: 32px; + text-align: center; + border-bottom: 1px solid #26b5fb; + 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: 100%; + .left{ + height: 100%; + width: 24%; + 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; + } + } + } } } } \ No newline at end of file diff --git a/src/app/ui/dangerous/dangerous.component.ts b/src/app/ui/dangerous/dangerous.component.ts index 6401696..11c0e4e 100644 --- a/src/app/ui/dangerous/dangerous.component.ts +++ b/src/app/ui/dangerous/dangerous.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; - +declare var AMap: any; @Component({ selector: 'app-dangerous', templateUrl: './dangerous.component.html', @@ -8,8 +8,63 @@ import { Component, OnInit } from '@angular/core'; export class DangerousComponent implements OnInit { constructor() { } - + map:any //地图 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, + }) + //类型选择 + istype = true//默认选择危化品类型 + + typeSelect(type){ + 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); + } + + } + //查看详情框打开 + isOpen = false + closeDiv(){ + this.isOpen = false + } + openDetails(){ + this.isOpen = true } - }