AX.Angular9DataCollection/src/app/ui/collection-tools/collection-tools.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';

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

  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { }
  selected = 'option1' //图标大小选择框
  basicInfo:boolean = true //基本信息名称显隐
  wantToWork:boolean = true //想定作业名称显隐
  allBuildings //该单位所有建筑
  checkedBuildingDate //当前点击选择的建筑
  isEditPat:boolean =  true //当前是否是编辑模式
  sliderValue:String = "30"//滑竿的值
  ngOnInit(): void {
    this.getAllLibrary()
    this.getSitePlan()
    this.checkedBuildingDate = "总平面图"
    this.getAllBuildings()
  }
  //点击基本信息名称
  basicInfoClick(){
    this.basicInfo = !this.basicInfo
  }
  //点击想定作业名称
  wantToWorkClick(){
    this.wantToWork = !this.wantToWork
  }
  //进入编辑模式
  editpat(){
    this.isEditPat = true
    let config = new MatSnackBarConfig();
    config.verticalPosition = 'top';
    config.duration = 3000
    this.snackBar.open('进入编辑模式','确定',config);
  }
  //进入查看模式
  lookpat(){
    this.isEditPat = false
    let config = new MatSnackBarConfig();
    config.verticalPosition = 'top';
    config.duration = 3000
    this.snackBar.open('进入查看模式','确定',config);
  }
  //保存平面图
  saveSite(){
    
  }
  //获得所有的建筑物
  getAllBuildings(){
    this.http.get("/api/CompanyAccount/Buildings").subscribe(data=>{
      this.allBuildings = data
    })
  }
  //创建建筑
  createBuilding(){
    let data = this.allBuildings
    let dialogRef = this.dialog.open(CreateBuilding,{data});
    dialogRef.afterClosed().subscribe(data=>{
      if (data == "创建成功") {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('创建成功','确定',config);
        this.getAllBuildings()
      }else if (data == "创建失败") {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('创建失败','确定',config);
      }
    });  
  }
  //选择建筑
  checkedBuilding(item){
    this.checkedBuildingDate = item.name
  }
  //编辑建筑
  editBuilding(e,item){
    e.stopPropagation();
    let dialogRef = this.dialog.open(EditBuilding,{data: {item:item}});
    dialogRef.afterClosed().subscribe(data=>{
      if (data == "修改成功") {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('修改成功','确定',config);
        this.getAllBuildings()
      }else if (data == "修改失败") {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('修改失败','确定',config);
      }
    });  
  }
  //删除建筑
  deleteBuilding(e,item){
    e.stopPropagation();
    if(confirm("是否删除该建筑") == true){
      this.http.delete(`/api/CompanyAccount/Buildings/${item.id}`).subscribe(data=>{
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('删除成功','确定',config);
        this.getAllBuildings()
      },err=>{
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('删除失败','确定',config);
        this.getAllBuildings()
      })
    }
  }



  //陈鹏飞↓↓↓
  //陈鹏飞↓↓↓
  //陈鹏飞↓↓↓

  toggleExpandPanel:boolean = false; //可展开面板展开或关闭
  togglePlane:boolean = true; //可展开面板平面图 显隐
  toggleMaterialBank:boolean = false; //可展开面板素材库 显隐
  //可展开面板展开或关闭
  toggle () {
    this.toggleExpandPanel = !this.toggleExpandPanel
  }
  //可展开面板 平面图 展开或关闭
  togglePlanarGraph () {
    this.togglePlane = !this.togglePlane
  }
  //可展开面板 素材库 展开或关闭
  toggleMaterial () {
    this.toggleMaterialBank = !this.toggleMaterialBank
  }

  sitePlanData:any = []; //总平面图数据
  selectingSitePlan:any; //选中的平面图
  selectSitePlanIndex:number; //选中的平面图index

  //获取总平面图
  getSitePlan () {
    this.http.get('/api/CompanyAccount/SitePlans').subscribe(data=>{
      this.sitePlanData = data
      if (this.sitePlanData.length) { //数据不为空时
        this.selectingSitePlan = this.sitePlanData[0]
        this.selectSitePlanIndex = 0 
      }
    })
  }

  //新增平面图 
  foundPanel (e) {
    e.stopPropagation()
  }

  //点击选中平面图时
  selectSitePlan (item,index) {
    this.selectingSitePlan = item
    this.selectSitePlanIndex = index
  }

  allLibrary:any = []; //所有素材库 + 素材
  selectLibrary:any; //选中的素材库
  selectImage:any; //选中的素材库图片
  selectImageIndex:number; //选中的素材库图片index

  //获取素材库
  getAllLibrary () {
    this.http.get('/api/AssetLibraries?tag=input').subscribe((data:any)=>{
      data.forEach(element => {
        element.images = []
      });
      this.allLibrary = data
    })
  }

  //素材库展开面板展开时
  opened (e) {
    if (!e.images.length) { //当前素材库没加载素材时
      this.http.get(`/api/Assets?libraryId=${e.id}`).subscribe((data:any)=>{
        data.forEach(element => {
          element.imageUrl = element.imageUrl + '?x-oss-process=image/auto-orient,1' //压缩图片
        });
        e.images = data
      })
    }
  }

  //点击选中素材库图片时
  selectImg (item,items,index) {
    this.selectLibrary = item.name
    this.selectImage = items
    this.selectImageIndex = index
  }
  
}



//创建建筑
@Component({
  selector: 'app-createBuilding',
  templateUrl: './createBuilding.html',
  styleUrls: ['./collection-tools.component.scss']
})
export class CreateBuilding {

  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<CreateBuilding>,@Inject(MAT_DIALOG_DATA) public data) { }

  allBuildingType:any//所有的建筑类型
  selected:any; //选中的建筑
  ngOnInit(): void {
    this.getAllBuildingType()
  }






  getAllBuildingType(){
    this.http.get("/api/BuildingTypes/Simple").subscribe(data=>{
      this.allBuildingType = data
    })
  }

  //创建建筑功能分区
  onSubmit (e) {
    let companyId = sessionStorage.getItem("companyId")
    let lastBuildingOrder = this.data.length != 0 ? this.data[this.data.length - 1].order + 1 : 0
    let data = 
    {
      id: "",
      name: e.propertyName,
      order: lastBuildingOrder ,
      enabled: true,
      companyId: companyId,
      buildingTypes: [
        {
          id: e.buildingId,
          name: ""
        }
      ]
    }
    this.http.post("/api/CompanyAccount/Buildings",data).subscribe(data=>{
      this.dialogRef.close("创建成功");
    },err=>{
      this.dialogRef.close("创建失败");
    })
  }
}

//编辑建筑
@Component({
  selector: 'app-editBuilding',
  templateUrl: './editBuilding.html',
  styleUrls: ['./collection-tools.component.scss']
})
export class EditBuilding {

  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<EditBuilding>,@Inject(MAT_DIALOG_DATA) public data) { }
  
  defaultName:String = this.data.item.name//默认建筑名称
  defaultBuildingType:String = this.data.item.buildingTypes[0].id//默认建筑类型
  allBuildingType:any//所有的建筑类型

  ngOnInit(): void {
    this.getAllBuildingType()
  }

  getAllBuildingType(){
    this.http.get("/api/BuildingTypes/Simple").subscribe(data=>{
      this.allBuildingType = data
    })
  }

  //编辑建筑信息
  onSubmit (e) {
    let companyId = sessionStorage.getItem("companyId")
    let data = 
    {
      id: this.data.item.id,
      name: e.propertyName,
      order: this.data.item.order,
      enabled: true,
      companyId: companyId,
      buildingTypes: [
        {
          id: e.buildingId,
          name: ""
        }
      ]
    }
    this.http.put(`/api/CompanyAccount/Buildings/${this.data.item.id}`,data).subscribe(data=>{
      this.dialogRef.close("修改成功");
    },err=>{
      this.dialogRef.close("修改失败");
    })
  }
}