ShangHaiYuan-AnXin/src/app/data-collection/water-collection/water-collection.component.ts

import { HttpClient } from '@angular/common/http';
import { Inject, Renderer2 } from '@angular/core';
import { ElementRef } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
declare var AMap: any;

@Component({
  selector: 'app-water-collection',
  templateUrl: './water-collection.component.html',
  styleUrls: ['./water-collection.component.scss']
})
export class WaterCollectionComponent implements OnInit {

  constructor(public snackBar: MatSnackBar,private http:HttpClient,private  elementRef: ElementRef,public renderer2: Renderer2,public dialog: MatDialog) { }

  isCheckedOfSearchDiv:boolean = true//列表过滤滑块
  slideChange(e){
    this.isCheckedOfSearchDiv = e.checked
  }
  searchForm:any = {
    name:'',
    integrityNum:''
  }
  listIntegrityNum:any[] = [
    {id:-1,name:'全部'},
    {id:0,name:'<=50%'},
    {id:1,name:'50%-60%'},
    {id:2,name:'60%-70%'},
    {id:3,name:'70%-80%'},
    {id:4,name:'80%-90%'},
    {id:5,name:'90%-100%'}
  ]
  checkBoxList:any[] = [
    {id:0,name:'消火栓',isChecked:false},
    {id:1,name:'消防水池',isChecked:false},
    {id:2,name:'天然水源',isChecked:false}
  ]
  //勾选水源类型checkbox在地图上显示marker
  checkBoxChange(){
    let WaterSourceTypesArr = []
    this.checkBoxList.forEach(item =>{
      if(item.isChecked){
        WaterSourceTypesArr.push(item.id)
      }
    })
    let params:any = {
      PageSize : 999999,
      WaterSourceTypes:WaterSourceTypesArr
    }
    if(WaterSourceTypesArr.length != 0){//如果勾选了checkbox
      this.http.get('/api/WaterSources',{params:params}).subscribe((data:any) => {
        this.createMarker(data.items)
      })
    }else{
      this.cluster.setData([])
    }
  }
  //循环渲染出所有水源markers
  cluster:any //水源聚合实例
  createMarker(list){
    let markerArrcluster = []
    this.cluster ? this.cluster.setData([]) : null
    list.forEach((item) => {
      let image
      if(item.waterSourceType == 0){//消火栓
        image = '/assets/waterMarkers/市政消火栓.png'
      }else if(item.waterSourceType == 1){//消防水池
        image = '/assets/waterMarkers/方形储水池.png'
      }else if(item.waterSourceType == 2){//天然水源
        image = '/assets/waterMarkers/天然水源.png'
      }
      // 用于点集合的数组
      markerArrcluster.push({
        lnglat : [item.location.x,item.location.y],
        image : image,
        data : item
      })
    })
    this.map.plugin(["AMap.MarkerClusterer"],() => {
      var gridSize = 60
      var count = markerArrcluster.length;
      var _renderClusterMarker = function (context) {
        var factor = Math.pow(context.count / count, 1 / 18);
        var div = document.createElement('div');
        var Hue = 180 - factor * 180;
        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
        div.style.backgroundColor = bgColor;
        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
        div.style.width = div.style.height = size + 'px';
        div.style.border = 'solid 1px ' + borderColor;
        div.style.borderRadius = size / 2 + 'px';
        div.style.boxShadow = '0 0 5px ' + shadowColor;
        div.innerHTML = context.count;
        div.style.lineHeight = size + 'px';
        div.style.color = fontColor;
        div.style.fontSize = '14px';
        div.style.textAlign = 'center';
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div)
      };
      var _renderMarker = (context)=> {
        var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
        context.marker.setContent(content)
        var offset = new AMap.Pixel(-12.5, -12.5);
        context.marker.setOffset(offset)
      }
      this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, {
        gridSize: gridSize, // 设置网格像素大小
        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
        renderMarker: _renderMarker, // 自定义非聚合点样式
      });
      this.cluster.on('click',(e)=>{
        if(e.clusterData.length == 1){
         
        }
      })
    });
    
  }
  ngOnInit(): void {
    this.getAllWaterData()
    setTimeout(() => {
      this.createMap()
    }, 0);
  }
  //获得所有水源
  addWaterListData:any
  dataLength:any //获取的数据一共多少条
  PageNumber:any = 1 //当前第几页
  getAllWaterData(){
    let MinIntegrity = 0
    let MaxIntegrity = 1.1
    if(this.searchForm.integrityNum == '0'){
      MinIntegrity = 0
      MaxIntegrity = 0.5
    }else if(this.searchForm.integrityNum == '1'){
      MinIntegrity = 0.5
      MaxIntegrity = 0.6
    }else if(this.searchForm.integrityNum == '2'){
      MinIntegrity = 0.6
      MaxIntegrity = 0.7
    }else if(this.searchForm.integrityNum == '3'){
      MinIntegrity = 0.7
      MaxIntegrity = 0.8
    }else if(this.searchForm.integrityNum == '4'){
      MinIntegrity = 0.8
      MaxIntegrity = 0.9
    }else if(this.searchForm.integrityNum == '5'){
      MinIntegrity = 0.9
      MaxIntegrity = 1.1
    }else if(this.searchForm.integrityNum == '-1'){
      MinIntegrity = 0
      MaxIntegrity = 1.1
    }
    let params:any = {
      Keyword : this.searchForm.name,
      PageSize : 15,
      PageNumber : this.PageNumber,
      MinIntegrity : MinIntegrity,
      MaxIntegrity : MaxIntegrity
    }
    this.http.get('/api/WaterSources',{params:params}).subscribe((data:any) => {
      this.addWaterListData = data
      this.dataLength = data.totalCount
    })
  }
  //搜索
  searchList(){
    this.getAllWaterData()
  }
  //分页事件
  chagePage(e){
    this.PageNumber = e.pageIndex+1
    this.getAllWaterData()
  }
  //js乘法
  accMul(arg1,arg2,fix) { 
    if(!parseInt(fix)==fix)
    {
        return;
    }
     var m=0,s1=arg1.toString(),s2=arg2.toString(); 
     try{m+=s1.split(".")[1].length}catch(e){} 
     try{m+=s2.split(".")[1].length}catch(e){}
     if(m>fix){
        return (Math.round(Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m-fix))/Math.pow(10,fix));
     }else if(m<=fix){
         return (Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)).toFixed(fix);
     }else{
        return (arg1*arg2).toFixed(fix).toString();
     }
  } 
  //点击水源列表
  selectedLiIndex:any 
  clickWaterLi(item,index){
    // console.log(item)
    if(this.selectedLiIndex != index){
      this.selectedLiIndex = index
      this.clearData()
      this.selectedWaterTypeIndex = item.waterSourceType//点击的水源类型
      this.waterData = item
      item.waterSourceType == 0 && item.detailData ? this.fireCockData = JSON.parse(item.detailData) : null
      item.waterSourceType == 1 && item.detailData ? this.poolData = JSON.parse(item.detailData) : null
      item.waterSourceType == 2 && item.detailData ? this.naturalWaterData = JSON.parse(item.detailData) : null
      this.positionLngLat = item.location
      if(this.newPositionMarker){
        this.map.remove(this.newPositionMarker);
      }
      if(item.location.x){//如果已经标注单位坐标
        this.map.setCenter([item.location.x,item.location.y]);
        this.newPositionMarker = new AMap.Marker({
          position: [item.location.x,item.location.y],
          content: this.newPositionMarkerContent,
          offset: new AMap.Pixel(-15, -18)
        })
        // 将 markers 添加到地图
        this.map.add(this.newPositionMarker);
      }
    }
  }
  //完整度颜色
  integrity(width){
    let _this = this
    let style:any = {}
    style.width = width +'%';
    if(width < 30){
      style.background = '#FF5D4A'
    }
    if(width >= 30 && width < 60){
      style.background = '#FFDD00'
    }
    if(width >= 60){
      style.background = '#5CD64E'
    }
    return style
  }
  //删除某条水源
  deleteWater(item,e){
    e.stopPropagation()
    let isDelete = window.confirm('确定要删除此条水源信息吗')
    if(isDelete){
      this.http.delete(`/api/WaterSources/${item.id}`).subscribe(data => {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.addWaterListData.items = this.addWaterListData.items.filter(x => {
          return item.id != x.id
        })
        this.dataLength = this.dataLength - 1
        // this.getAllWaterData()
        this.snackBar.open('删除成功','确定',config);
      })
    }
  }
  waterData:any = {
    id:null,
    name:'',
    administrativeRegion:'',//行政区
    governmentLevel:'',//水源归属
    village:'',//所属单位（小区）
    address:'',
    location:{x:'',y:''},
    detailData:'',//详细信息
    createTime:'',
    creatorId:''
  }
  //消火栓详细信息
  fireCockData:any = [
    {PropertyName :'可用状态',PropertyValue:''},
    {PropertyName :'放置形式',PropertyValue:''},
    {PropertyName :'管网形式',PropertyValue:''},
    {PropertyName :'管网直径',PropertyValue:''},
    {PropertyName :'管网压力类型',PropertyValue:''},
    {PropertyName :'管网压力范围',PropertyValue:''},
    {PropertyName :'接口形式',PropertyValue:''},
    {PropertyName :'接口口径',PropertyValue:''},
    {PropertyName :'最大流量',PropertyValue:''},
    {PropertyName :'供水单位',PropertyValue:''},
    {PropertyName :'联系方式',PropertyValue:''},
    {PropertyName :'备注',PropertyValue:''}
  ]
  //消防水池详细信息
  poolData:any = [
    {PropertyName :'可用状态',PropertyValue:''},
    {PropertyName :'储水量',PropertyValue:''},
    {PropertyName :'取水最大流量',PropertyValue:''},
    {PropertyName :'进水流量',PropertyValue:''},
    {PropertyName :'同时取水车辆数',PropertyValue:''},
    {PropertyName :'水源标高差',PropertyValue:''},
    {PropertyName :'补水时间',PropertyValue:''},
    {PropertyName :'管网形式',PropertyValue:''},
    {PropertyName :'供水单位',PropertyValue:''},
    {PropertyName :'联系方式',PropertyValue:''},
    {PropertyName :'备注',PropertyValue:''}
  ]
  //天然水源详细信息
  naturalWaterData:any = [
    {PropertyName :'可用状态',PropertyValue:''},
    {PropertyName :'天然水源类型',PropertyValue:''},
    {PropertyName :'有无消防码头',PropertyValue:''},
    {PropertyName :'水质',PropertyValue:''},
    {PropertyName :'同时取水车辆数',PropertyValue:''},
    {PropertyName :'水源标高差',PropertyValue:''},
    {PropertyName :'有无枯水期',PropertyValue:''},
    {PropertyName :'枯水期时间',PropertyValue:''},
    {PropertyName :'供水单位',PropertyValue:''},
    {PropertyName :'联系方式',PropertyValue:''},
    {PropertyName :'备注',PropertyValue:''}
  ]
  //清空表单数据
  clearData(){
    this.waterData = {
      id:null,
      name:'',
      administrativeRegion:'',//行政区
      governmentLevel:'',//水源归属
      village:'',//所属单位（小区）
      address:'',
      location:{x:'',y:''},
      detailData:'',//详细信息
      createTime:'',
      creatorId:''
    }
    this.fireCockData = [
      {PropertyName :'可用状态',PropertyValue:''},
      {PropertyName :'放置形式',PropertyValue:''},
      {PropertyName :'管网形式',PropertyValue:''},
      {PropertyName :'管网直径',PropertyValue:''},
      {PropertyName :'管网压力类型',PropertyValue:''},
      {PropertyName :'管网压力范围',PropertyValue:''},
      {PropertyName :'接口形式',PropertyValue:''},
      {PropertyName :'接口口径',PropertyValue:''},
      {PropertyName :'最大流量',PropertyValue:''},
      {PropertyName :'供水单位',PropertyValue:''},
      {PropertyName :'联系方式',PropertyValue:''},
      {PropertyName :'备注',PropertyValue:''}
    ]
  
    this.poolData = [
      {PropertyName :'可用状态',PropertyValue:''},
      {PropertyName :'储水量',PropertyValue:''},
      {PropertyName :'取水最大流量',PropertyValue:''},
      {PropertyName :'进水流量',PropertyValue:''},
      {PropertyName :'同时取水车辆数',PropertyValue:''},
      {PropertyName :'水源标高差',PropertyValue:''},
      {PropertyName :'补水时间',PropertyValue:''},
      {PropertyName :'管网形式',PropertyValue:''},
      {PropertyName :'供水单位',PropertyValue:''},
      {PropertyName :'联系方式',PropertyValue:''},
      {PropertyName :'备注',PropertyValue:''}
    ]
    this.naturalWaterData =  [
      {PropertyName :'可用状态',PropertyValue:''},
      {PropertyName :'天然水源类型',PropertyValue:''},
      {PropertyName :'有无消防码头',PropertyValue:''},
      {PropertyName :'水质',PropertyValue:''},
      {PropertyName :'同时取水车辆数',PropertyValue:''},
      {PropertyName :'水源标高差',PropertyValue:''},
      {PropertyName :'有无枯水期',PropertyValue:''},
      {PropertyName :'枯水期时间',PropertyValue:''},
      {PropertyName :'供水单位',PropertyValue:''},
      {PropertyName :'联系方式',PropertyValue:''},
      {PropertyName :'备注',PropertyValue:''}
    ]
  }
  //新增水源
  selectedWaterTypeIndex:any//新增水源类型
  addWater(){
    const dialogRef = this.dialog.open(AddWater, {
      data: {},
      id:'addWater'
    });
    dialogRef.afterClosed().subscribe(
      data=>{
        if(typeof data === 'number' && !isNaN(data)){
         this.selectedWaterTypeIndex = data
         this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null
         this.positionLngLat.x = 0
         this.positionLngLat.y = 0
         this.map.setCity('上海市');
         this.clearData()
        }  
      }
    );
  }
  //保存水源
  save(){
    if(!this.waterData.name){
      alert('名称必填')
      return
    }
    this.selectedWaterTypeIndex == '0' ?  this.waterData.detailData = JSON.stringify(this.fireCockData) : null
    this.selectedWaterTypeIndex == '1' ?  this.waterData.detailData = JSON.stringify(this.poolData) : null
    this.selectedWaterTypeIndex == '2' ?  this.waterData.detailData = JSON.stringify(this.naturalWaterData) : null
    this.waterData.waterSourceType = Number(this.selectedWaterTypeIndex) 
   
    this.waterData.createTime = new Date()


    if(this.waterData.id){
      if(this.atLastPositionLngLat.x){
        this.waterData.location.x = this.atLastPositionLngLat.x
        this.waterData.location.y = this.atLastPositionLngLat.y
      }
      console.log(666,this.waterData)
      this.http.put(`/api/WaterSources/${this.waterData.id}`,this.waterData).subscribe(data => {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('修改成功','确定',config);
        this.selectedLiIndex = 0
        this.getAllWaterData()
      })
    }else{
      this.waterData.location.x = this.atLastPositionLngLat.x
      this.waterData.location.y = this.atLastPositionLngLat.y
      this.http.post('/api/WaterSources',this.waterData).subscribe(data => {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('保存成功','确定',config);
        this.selectedLiIndex = 0
        this.waterData = data
        this.getAllWaterData()
      })
    }
   
  }
  //关闭
  close(){
    this.selectedWaterTypeIndex = null
    this.selectedLiIndex = null
    this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null
  }
  map:any
  placeSearch:any//构造地点查询类
  isMapLabel:boolean = false //是否已经标记坐标
  newPositionMarkerContent:any  = 
  '<div class="custom-content-marker">' +
  '   <img src="/assets/images/定位.png">' +
  '</div>'
  newPositionMarkerContentBtn:any = 
  '<div class="custom-content-marker">' +
  '   <img src="/assets/images/定位.png">' +
  '   <div  class="btnbox"><img id="setPositionOk" src="/assets/images/ok.png"><span>|</span><img id="setPositionClose" src="/assets/images/close.png"></div>' +
  '</div>'
  //创建地图
  newPositionMarker:any//坐标实例
  createMap(){
    this.map = new AMap.Map('container', {
      zoom:12
    })
    this.map.setCity('上海市');
    //输入提示
    var autoOptions = {
      input: "tipinput"
    };
    AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{
      let auto = new AMap.AutoComplete(autoOptions);
      this.placeSearch = new AMap.PlaceSearch();  //构造地点查询类
      auto.on("select", (e)=>{
        this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat])
        this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat}
        this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点
      });//注册监听，当选中某条记录时会触发

    });
  }
  //点击位置
  isGisTopBox:boolean = false //
  searchTitle:any = ''//

  positionLngLat:any = {}//临时坐标点
  atLastPositionLngLat:any = {}//最终坐标点
  setPosition(){
    if(!this.isGisTopBox){
      this.isGisTopBox = true
      this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null
      let center
      if(this.newPositionMarker && this.atLastPositionLngLat.x){//如果已经标注单位坐标
        center = [this.atLastPositionLngLat.x, this.atLastPositionLngLat.y]
      }else if(this.newPositionMarker && !this.atLastPositionLngLat.x && this.waterData.location.x){
        center = [this.waterData.location.x, this.waterData.location.y]
      }else{
        center = this.map.getCenter(); //获取当前地图中心位置
      }
      this.newPositionMarker = new AMap.Marker({
        draggable: true,
        position: center,
        content: this.newPositionMarkerContentBtn,
        offset: new AMap.Pixel(-15, -18)
      });
      this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]}
      this.map.add(this.newPositionMarker);
      this.isMapLabel = true
      this.newPositionMarker.on('dragend', (e)=>{
        this.positionLngLat = {x: e.lnglat.lng, y: e.lnglat.lat}
      })
      //点击确定
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{ 
        this.isGisTopBox = false
        this.map.remove(this.newPositionMarker)
        this.newPositionMarker = new AMap.Marker({
          position: [this.positionLngLat.x,this.positionLngLat.y],
          content: this.newPositionMarkerContent,
          offset: new AMap.Pixel(-15, -18)
        });
        this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat))
        this.map.add(this.newPositionMarker);
        this.positionLngLat = this.atLastPositionLngLat
      })
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'click',(event)=>{ 
        this.isGisTopBox = false
        this.map.remove(this.newPositionMarker)
        if(this.positionLngLat.x && this.positionLngLat.x != 0 && !this.atLastPositionLngLat.x){//直接取消
          this.map.remove(this.newPositionMarker)
          this.positionLngLat = {}
          this.atLastPositionLngLat = {}
        }else{
          this.newPositionMarker = new AMap.Marker({
            position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y],
            content: this.newPositionMarkerContent,
            offset: new AMap.Pixel(-15, -18)
          });
          this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点
          this.map.add(this.newPositionMarker);
          this.positionLngLat = this.atLastPositionLngLat
        }
      })//取消
    }
    
  }
}


//新增水源弹出框
@Component({
  selector: 'addwater',
  templateUrl: './addWater.html',
  styleUrls: ['./water-collection.component.scss']
})
export class AddWater {
  
  constructor(private http: HttpClient,public dialogRef: MatDialogRef<AddWater>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {}


  addList:any = [
    {name:'消火栓',src:'/assets/images/市政消火栓.png'},
    {name:'消防水池',src:'/assets/images/方形储水池.png'},
    {name:'天然水源',src:'/assets/images/天然水源.png'}
  ]
  selectedWaterTypeIndex:any = 0
  selecteAddType(item,key){
    this.selectedWaterTypeIndex = key
  }
  confirm(){
    this.dialogRef.close(this.selectedWaterTypeIndex)
  }

}