ShangHaiYuan-AnXin/src/app/key-unit/key-unit-management/key-unit-management.component.ts

import { Component, OnInit, ViewChild, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { MatPaginator } from '@angular/material/paginator';
import { FlatTreeControl } from '@angular/cdk/tree';
import { FormControl } from '@angular/forms';
import { Router,ActivatedRoute } from '@angular/router'
import { PageEvent } from '@angular/material/paginator';
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { TreeService } from '../../http-interceptors/tree.service'
@Component({
  selector: 'app-key-unit-management',
  templateUrl: './key-unit-management.component.html',
  styleUrls: ['./key-unit-management.component.scss']
})
export class KeyUnitManagementComponent implements OnInit {

  constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,private tree: TreeService,public dialog: MatDialog,public snackBar: MatSnackBar) { }
  
  private _transformer = (node, level: number) => {   //初始化tree
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level,
      id: node.id,
      parentId: node.parentId,
      children: node.children
    };
  }
  treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);
  treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
  myControl = new FormControl();
  hasChild = (_: number, node: any) => node.expandable;


  allunittype:any //获取所有的单位类型

  //分页
  @ViewChild(MatPaginator, {static: true}) 
  pageEvent: PageEvent;
  paginator: MatPaginator;
  length:any; //共多少条数据
  pageSize:any; //每页条数
  pageSizeOptions: number[] = [10] //设置每页条数
  PageNumber:any //第几页
  
  displayedColumns: string[] = ['checked','Follow','unitname','jurisdictionsquadron', 'unittype','scc', 'time','operation'];
  tabledataSource:any
  allorganizations:any
  
  
  colorRgb(sColor){
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    var sColor = sColor.toLowerCase();
    if (sColor && reg.test(sColor)) {
        if (sColor.length === 4) {
            var sColorNew = "#";
            for (var i = 1; i < 4; i += 1) {
                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
            }
            sColor = sColorNew;
        }
        //处理六位的颜色值
        var sColorChange = [];
        for (var i = 1; i < 7; i += 2) {
            sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
        }
        return sColorChange;
    } else {
        return sColor;
    }
  }
  colorHex(rgb){
    var _this = rgb;
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    if (/^(rgb|RGB)/.test(_this)) {
        var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");
        var strHex = "#";
        for (var i = 0; i < aColor.length; i++) {
            var hex:any = Number(aColor[i]).toString(16);
            hex = hex < 10 ? 0 + '' + hex : hex;// 保证每个rgb的值为2位
            if (hex === "0") {
                hex += hex;
            }
            strHex += hex;
        }
        if (strHex.length !== 7) {
            strHex = _this;
        }
        return strHex;
    } else if (reg.test(_this)) {
        var aNum = _this.replace(/#/, "").split("");
        if (aNum.length === 6) {
            return _this;
        } else if (aNum.length === 3) {
            var numHex = "#";
            for (var i = 0; i < aNum.length; i += 1) {
                numHex += (aNum[i] + aNum[i]);
            }
            return numHex;
        }
    } else {
        return _this;
    }
  }
  gradientColor(startColor, endColor, step) {
    let _this = this
    let  startRGB = _this.colorRgb(startColor);//转换为rgb数组模式
    let  startR = startRGB[0];
    let  startG = startRGB[1];
    let  startB = startRGB[2];

    let  endRGB = _this.colorRgb(endColor);
    let  endR = endRGB[0];
    let  endG = endRGB[1];
    let  endB = endRGB[2];

    let  sR = (endR - startR) / step;//总差值
    let  sG = (endG - startG) / step;
    let  sB = (endB - startB) / step;

    var colorArr = [];
    for (var i = 0; i < step; i++) {
        //计算每一步的hex值 
        var hex = _this.colorHex('rgb('+ parseInt((sR * i + startR))+ ',' + parseInt((sG * i + startG))+ ',' + parseInt((sB * i + startB)) + ')');
        colorArr.push(hex);
    }
    return colorArr;
}
  integrity(width){
    let _this = this
    
    let style:any = {}
    style.width = width*10 +'%';
    if(width < 3){
      let colorArr = this.gradientColor('#D50000', '#E53935', 30);  
      for(let i = 0; i < 30; i++){
        if( i == width*10){
          style.background = colorArr[i]
        }
      }
    }
    if(width >= 3 && width < 6){
      let colorArr = this.gradientColor('#FF9800', '#E65100', 30);  
      for(let i = 30; i < 60; i++){
        if( i == width*10){
          style.background = colorArr[i-30]
        }
      }
    }
    if(width >= 6){
      let colorArr = this.gradientColor('#81C784', '#2E7D32', 41);  
      for(let i = 60; i <= 100; i++){
        if( i == width*10){
          style.background = colorArr[i-60]
        }
      }
    }
    return style
  }
  integrityDetails(width,zong){
    let style:any = {}
    style.width = (width/zong)*100 +'%';
    return style
  }
  //分页事件
  chagePage(e){
    this.PageNumber = e.pageIndex+1
    this.getAllKeyUnit();
  }
  ngOnInit(): void {
    this.getunitdata();
    this.getOrganizations();
    this.getUnittype();
    this.getAllKeyUnit();
  }
  //获得所有重点单位
  allKeyUnitInfo:any //所有的重点单位
  getAllKeyUnit(){
    // console.log(Boolean(Number(this.follow)))
    let follow 
    if(this.follow == ''){
      follow = ''
    }
    if(this.follow == '0'){
      follow = false
    }
    if(this.follow == '1'){
      follow = true
    }
    // console.log(222,follow)
    let paramsdata:any = {
      Name: this.companyName || '',
      OrganizationId: this.jsId || '',
      HasChildren:this.jscheck || '',
      USCI:this.shehui || '',
      IsFollowed: follow,
      BuildingTypeId:  this.unittype || '',
      PageNumber: this.PageNumber || '1',
      PageSize:  this.pageSizeOptions[0],
      Sort: ''
    }
    this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any)=>{

      this.length = data.totalCount
      this.allKeyUnitInfo = data
      // console.log(data)
      this.tabledataSource = data.items
    })
  }
  //得到当前单位信息
  getunitdata(){
    this.http.get("/api/Account/Profiles").subscribe(
      (data:any)=>{
      this.organizationName = data.organizationName
      }
    )
  }
  organizationName:any //当前单位组织机构名称
  treedata:any //组织机构树型数据
  newArr:any = []
  newallorganizations:any //用于存储在原始数据基础上的每个机构增加children字段
  newallorganizations2:any
  //得到当前单位所在组织机构的tree型数据
  getpresentOrganization(){
    this.newallorganizations = this.allorganizations
    this.newallorganizations.forEach(item => {
      item.children = []
      this.newallorganizations.forEach(element => {
        if(element.parentId == item.id){
          item.children.push(element)
        }
      });
    });
    this.http.get("/api/Account/Profiles").subscribe(
      (data:any)=>{
        this.organizationName = data.organizationName
        if(this.organizationName){
          this.newallorganizations.forEach(item => {
            if(item.name == this.organizationName){
              this.dataSource.data = [item]
              this.newallorganizations2 = [item]
            }
          });
        }else{
          this.newallorganizations2 = this.treedata
          this.dataSource.data = this.treedata
        }
      }
    )
    
  }
  //获得所有组织机构
  getOrganizations(){
    this.http.get('/api/Organizations').subscribe(
      (data:any)=>{
        this.allorganizations = data
        this.treedata = this.tree.toTree(data);
        this.getpresentOrganization();
      }
    )
  }

  //获得所有单位类型
  getUnittype(){
    this.http.get('/api/BuildingTypes/Simple').subscribe(
      data=>{
        this.allunittype = data
      }
    )
  }
  selectedunitArr:any =[] //选中单位的数组
  //勾选框事件
  checkChange(e,element){
    element.checked = e.checked
  }
  //编辑单位信息
  editunit(){
    let selectedunitArr = []
    this.allKeyUnitInfo.items.forEach(item => {
      if(item.checked){
        selectedunitArr.push(item.id)
      }
    });

    if(selectedunitArr.length == 0){
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请先选择要修改的单位','确定',config);
    }
    if(selectedunitArr.length != 1 && selectedunitArr.length != 0){
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('只能选择一个单位修改','确定',config);
    }
    if(selectedunitArr.length == 1){  //带着id跳到修改页面
      this.allKeyUnitInfo.items.forEach(item => {
        if(item.id == selectedunitArr[0]){
          let companyName = item.name
          sessionStorage.setItem("companyName",companyName)
        }
      });
      sessionStorage.setItem("editable","1")
      window.open(`/keyUnit/editplaninfo?id=${selectedunitArr[0]}`);
    }
  }
  //关注重点单位
  Follow(element){
    // console.log(element)
    this.http.put(`/api/Companies/${element.id}/Follow`,'').subscribe(data=>{
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('关注成功','确定',config);
      this.getAllKeyUnit();

    })
  }
  //取消关注
  unFollow(element){
    // console.log(element)
    this.http.put(`/api/Companies/${element.id}/Unfollow`,'').subscribe(data=>{
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('取消成功','确定',config);
      this.getAllKeyUnit();
    })
  }
  //删除单位信息
  deleteunit(){
    let selectedunitArr = []
    this.allKeyUnitInfo.items.forEach(item => {
      if(item.checked){
        selectedunitArr.push(item.id)
      }
    });

    if(selectedunitArr.length == 0){
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请先选择要删除的单位','确定',config);
    }
    if(selectedunitArr.length != 1 && selectedunitArr.length != 0){
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('只能选择一个单位删除','确定',config);
    }
    if(selectedunitArr.length == 1){  //带着id跳到删除页面
      let isTrue = confirm('您确定要删除吗')
      if(isTrue){
        this.http.delete(`/api/Companies/${selectedunitArr[0]}`).subscribe(data=>{
          const config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('删除成功','确定',config);
          this.getAllKeyUnit();
        }) 
      }
     
    }
  }


  //重置
  js:any //辖区中队输入框
  jsId:any //辖区中队选择的id
  companyName:any //单位名称
  shehui:any //统一社会信用代码
  unittype:any //单位类型
  jscheck:any //辖区中队包含下级
  OrganizationId //
  follow:any = '' //是否为关注单位
  reset(){
    this.js='' //辖区中队输入框
    this.jscheck='' //辖区中队包含下级
    this.companyName='' //单位名称
    this.shehui='' //统一社会信用代码
    this.unittype='' //单位类型
    this.jsId = ''
    this.follow = ''
    this.PageNumber = 1
    this.pageEvent.pageIndex = 0
    this.getAllKeyUnit();
  }

  //跳转查看基本信息页面
  unitdetails(element){
    // console.log(element)
    // this.router.navigate(['/keyUnit/viewunitinfo'])
    sessionStorage.setItem("editable","0")
    sessionStorage.setItem("companyName",element.name)
    sessionStorage.setItem("companyId",element.id)
    window.open(`/keyUnit/viewunitinfo?id=${element.id}&grade=46`,'_blank');
  }
  //提交查询表单
  onSubmit(value){
    this.PageNumber = 1
    this.pageEvent.pageIndex = 0
    this.getAllKeyUnit();
  }
  bigclosediv(e){
    this.isorganizationbox = false
  }
  stopclose(e){
    e.stopPropagation();
  }
  //辖区中队div是否显示
  isorganizationbox:boolean = false
  //点击辖区中队树，将选择的辖区中队添加到变量
  add(node) {
    this.isorganizationbox = false
    this.js = node.name
    this.jsId = node.id
  }
  //关闭辖区中队隐藏框
  closeorganizationbox() {
    this.isorganizationbox = false
  }
  //打开辖区中队隐藏框
  openorganizationbox() {
    this.isorganizationbox = true
    
  }
  
  //关闭出现的组织机构div
  closediv(){
    this.isorganizationbox = false
  }

  //新增重点单位
  createunit(){
    // console.log(this.newallorganizations2)
    const dialogRef = this.dialog.open(CreateUnit, {//调用open方法打开对话框并且携带参数过去
      width: '625px',
      data: {allunittype:this.allunittype,allorganizations:this.newallorganizations2}
    });
    dialogRef.afterClosed().subscribe(
      data=>{
        if(data){
          const config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('创建成功','确定',config);
          this.getAllKeyUnit();
          sessionStorage.setItem("companyName",data.name)
          sessionStorage.setItem("editable","1")
          sessionStorage.setItem("companyId",data.id)
          window.open(`/keyUnit/editplaninfo?id=${data.id}`);
        }  
      }
    );
  }
}



//创建重点单位
@Component({
  selector: 'createunit',
  templateUrl: './createunit.component.html',
  styleUrls: ['./key-unit-management.component.scss']
})
export class CreateUnit {
  myControl = new FormControl();
  private _transformer = (node, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level,
      id: node.id,
      parentId: node.parentId,
      enabled:node.enabled,
      order:node.order,
    };
  }
  treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);
  treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
  constructor(private http: HttpClient,public dialogRef: MatDialogRef<CreateUnit>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar,private tree: TreeService) {}
  hasChild = (_: number, node: any) => node.expandable;
  allunittype = this.data.allunittype
  js:any //所属辖区中队
  jsId:any //所属辖区中队的id
  ngOnInit(): void {
    this.dataSource.data =  this.data.allorganizations
  }
  onNoClick(): void {
    this.dialogRef.close();
  }
  add(node){
    this.js = node.name
    this.jsId = node.id
  }
  onSubmit(value){
    // console.log(value)
    let myDate = new Date();
    let body = {
      id: "",
      name: value.name,
      usci: value.usci,
      contacts: "",
      phone: "",
      address: "",
      imageUrl: "",
      location: {
        x: 0,
        y: 0
      },
      modifiedTime: myDate,
      organizationId: this.jsId,
      organizationName: this.js,
      buildingTypes: [
        {
          id: value.unittype,
          name: ""
        }
      ]
    }
    this.http.post("/api/Companies",body).subscribe(
    data=>{
      this.dialogRef.close(data);
    },
    err=>{
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open(err,'确定',config);
    })
  }
}