[新增]危化品引入地图

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

@@ -1,6 +1,70 @@
 <div class="box">
     <div class="title">
-        <div>危化品类型</div>
+        <div (click)="typeSelect(1)" [ngClass]="{'selectedBtn': istype}">危化品类型</div>
-        <div>危化品分布</div>
+        <div (click)="typeSelect(2)" [ngClass]="{'selectedBtn': !istype}">危化品分布</div>
+    </div>
+    <div class="body">
+        <!-- 危化品类型 -->
+        <div class="type" *ngIf="istype">
+            <div class="leftbox">
+
+            </div>
+            <div class="rightbox">
+                <table>
+                    <tr>
+                        <th>品名</th>
+                        <th>英文名</th>
+                        <th>分子式</th>
+                        <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>
+                </table>
+            </div>
+        </div>
+        <!-- 危化品分布 -->
+        <div id="size" class="size" *ngIf="!istype">
+
+        </div>
+        <!-- 详情弹出框 -->
+        <div class="openDiv" *ngIf="isOpen" cdkDragBoundary=".box" cdkDrag>
+            <div class="top">
+                <h4>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>
+                <div class="right">
+
+                </div>
+            </div>
+        </div>
     </div>
 </div>

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;
+            width: 126px;
-            height: 80%;
+            height: 35px;
-            border: #26b5fb;
+            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;
+                    }
+                }
+            }
         }
     }
 }

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
   }
-
 }