ShangHaiYuan-AnXin/src/app/plan-audit/water-audit/water-audit.component.ts

import { Component, Input, OnInit } from '@angular/core';
declare var AMap: any;
@Component({
  selector: 'app-water-audit',
  templateUrl: './water-audit.component.html',
  styleUrls: ['./water-audit.component.scss']
})
export class WaterAuditComponent implements OnInit {
  @Input() public waterData: any;//data名字根据引用场景自定义
  constructor() { }
  map:any
  newPositionMarker:any
  newPositionMarkerContent:any  = 
  '<div class="custom-content-marker">' +
  '   <img style="width:20px;height:24px" src="/assets/images/dingwei.png">' +
  '</div>'
  ngOnInit(): void {
   
    this.selectedWaterTypeIndex = this.waterData.waterSourceType
    this.waterData.detailData = JSON.parse(this.waterData.detailData)
    this.fireCockData = this.waterData.detailData
    this.poolData = this.waterData.detailData
    this.naturalWaterData = this.waterData.detailData
    setTimeout(() => {
      this.map = new AMap.Map('container', {
        zoom:18
      })
      
      if(this.waterData.location && this.waterData.location.x){
        this.map.setCenter([this.waterData.location.x,this.waterData.location.y]);
        this.newPositionMarker = new AMap.Marker({
          position: [this.waterData.location.x,this.waterData.location.y],
          content: this.newPositionMarkerContent,
          offset: new AMap.Pixel(-10, -12)
        })
        // 将 markers 添加到地图
        this.map.add(this.newPositionMarker);
      }else{
        this.map.setCity('株洲市');
      }
      
    }, 0);
  }
  selectedWaterTypeIndex:number //选择的水源类型  0消火栓 1水池 2天然水源
  fireCockData:any = []//消火栓详情
  poolData:any = []//水池详情
  naturalWaterData:any = []//天然水源详情
  // waterData:any = {
  //   id: "60125d31d31fab7de81c56b0",
  //   name: "上海中心消火栓01",
  //   administrativeRegion: "上海区",
  //   governmentLevel: "1",
  //   village: "小高社区",
  //   address: "国际会议中心",
  //   location: {
  //     x: 121.496717,
  //     y: 31.239452
  //   },
  //   detailData: "[{\"PropertyName\":\"可用状态\",\"PropertyValue\":\"1\"},{\"PropertyName\":\"放置形式\",\"PropertyValue\":\"1\"},{\"PropertyName\":\"管网形式\",\"PropertyValue\":\"2\"},{\"PropertyName\":\"管网直径\",\"PropertyValue\":\"2\"},{\"PropertyName\":\"管网压力类型\",\"PropertyValue\":\"1\"},{\"PropertyName\":\"管网压力范围\",\"PropertyValue\":\"2222\"},{\"PropertyName\":\"接口形式\",\"PropertyValue\":\"1\"},{\"PropertyName\":\"接口口径\",\"PropertyValue\":\"3\"},{\"PropertyName\":\"最大流量\",\"PropertyValue\":\"333\"},{\"PropertyName\":\"供水单位\",\"PropertyValue\":\"剃剃头\"},{\"PropertyName\":\"联系方式\",\"PropertyValue\":\"119\"},{\"PropertyName\":\"备注\",\"PropertyValue\":\"突突突突突突\"}]",
  //   detailItems: null,
  //   createTime: "2021-02-03T02:36:57.451Z",
  //   creatorId: "5e8eced2aaca5f7c1025309b",
  //   deleted: false,
  //   waterSourceType: 0,
  //   integrityScore: 0.21052632
  // }
}