ShangHaiYuan-AnXin/src/app/plan-management/open-plan/open-plan.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'
import { Viewer } from 'photo-sphere-viewer';
declare var CryptoJS
import Swiper from 'swiper';
@Component({
  selector: 'app-open-plan',
  templateUrl: './open-plan.component.html',
  styleUrls: ['./open-plan.component.scss']
})
export class OpenPlanComponent 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;
  //分页
  @ViewChild(MatPaginator, { static: true })
  pageEvent: PageEvent;
  paginator: MatPaginator;
  length: any; //共多少条数据
  pageSize: any; //每页条数
  pageSizeOptions: number[] = [10] //设置每页条数
  PageNumber: any; //第几页

  displayedColumns: string[] = ['unitname', 'planname', 'addpeople', 'addtime', 'plantype', 'auditStatus', 'openRange', 'projectlevel', 'operation'];

  allorganizations: any //所有组织机构
  allunittype: any //所有单位类型
  tabledataSource: any //表格数据
  preparelevels: any //编制级别
  ngOnInit(): void {
    if (window.matchMedia("(max-width: 1400px)").matches) {
      this.pcMore = false
      this.padMore = true
      this.pcfind = false
      this.padjt = true
    } else {
      this.pcfind = true
      this.pcMore = true
      this.padMore = false
      this.padjt = false
    }
    this.getunitdata();
    this.getOrganizations();
    this.getUnittype();
    this.getAllPlanInfo(); //得到所有单位
    let level = sessionStorage.getItem("level");
    if (level == "0") {//如果是总队
      this.preparelevels = [
        { name: "总队", value: "1" },
        { name: "支队", value: "2" },
        { name: "大队", value: "4" },
        { name: "中队", value: "8" }
      ]
    }
    if (level == "1") {//如果是支队
      this.preparelevels = [
        { name: "支队", value: "2" },
        { name: "大队", value: "4" },
        { name: "中队", value: "8" }
      ]
    }
    if (level == "2") {//如果是大队
      this.preparelevels = [
        { name: "大队", value: "4" },
        { name: "中队", value: "8" }
      ]
    }
    if (level == "3") {//如果是中队
      this.preparelevels = [
        { name: "中队", value: "8" }
      ]
    }
  }

  pcMore//pc更多
  pcput = false//pc收起
  pcfind//pc查询
  padjt = false
  padMore = true//pad收缩控制
  padput = false//pad收起按钮
  imgsrcopen = "../../../assets/images/routdown2.png"
  imgsrcdown = "../../../assets/images/routup2.png"
  pcInfo() {
    this.pcMore = !this.pcMore
    this.pcput = !this.pcput
  }
  padInfo() {
    this.padMore = !this.padMore
    this.padput = !this.padput
  }

  allPlanInfo: any //存储所有预案信息
  //获得所有预案信息
  getAllPlanInfo() {
    let paramsdata: any = {
      CompanyName: this.companyName || '',
      OrganizationId: '',
      HasChildrenOrganization: '',
      BuildingTypeId: this.unittype || '',
      PlanType: this.reservePlanType || '',
      AuditStatus: '', //审核状态
      PlanLevel: this.preparelevel || '',
      HasChildrenPlanLevel: this.plcheck || '',
      PageNumber: this.PageNumber || '1',
      PageSize: this.pageSizeOptions[0],
      Sort: ''
    }
    this.http.get("/api/PublicPlans", { params: paramsdata }).subscribe((data: any) => {
      // console.log(111,data)
      this.length = data.totalCount
      this.allPlanInfo = 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字段
  //得到当前单位所在组织机构的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)
        }
      });
    });
    // console.log(666,this.organizationName)
    if (this.organizationName) {
      this.newallorganizations.forEach(item => {
        if (item.name == this.organizationName) {
          this.dataSource.data = [item]
        }
      });
    } else {
      this.dataSource.data = this.tree.toTree(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
      }
    )
  }
  //跳转查看预案页面 公开预案
  routerTo(e) {
    console.log(e)
    if (e.planMode == 0 || e.planMode == 1) {
      var index = e.attachmentUrls[0].indexOf("\/")
      if (e.attachmentUrls[0].substr(0, index) == 'psw') {
        const dialogRef = this.dialog.open(GkhtmlPsViewer, {
          width: '1500px',
          height: '800px',
          data: e.attachmentUrls[0]
        });
      } else if (e.attachmentUrls[0].substr(e.attachmentUrls[0].length - 3, e.attachmentUrls[0].length) == 'JPG' || e.attachmentUrls[0].substr(e.attachmentUrls[0].length - 3, e.attachmentUrls[0].length) == 'png' || e.attachmentUrls[0].substr(e.attachmentUrls[0].length - 3, e.attachmentUrls[0].length) == 'peg' || e.attachmentUrls[0].substr(e.attachmentUrls[0].length - 3, e.attachmentUrls[0].length) == 'jpg') {
        let data = e
        const dialogRef = this.dialog.open(OpenImgDetails, {//调用open方法打开对话框并且携带参数过去
          data: data.attachmentUrls,
        });
        dialogRef.afterClosed().subscribe();
      } else {
        let fetchUrl = e.attachmentUrls[0]
        if (fetchUrl) {
          let suffix = fetchUrl.split('.')[fetchUrl.split('.').length - 1].toLowerCase()
          if (suffix == 'docx' || suffix == 'doc') {
            let arr = fetchUrl.split('.')
            arr[arr.length - 1] = 'pdf'
            window.open(`/api/Objects/PlanPlatform/` + arr.join('.'))
          } else if (suffix == 'pdf') {
            window.open(`/api/Objects/PlanPlatform/` + fetchUrl)
          } else {
            let config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.snackBar.open('该文件类型暂不支持在线查看', '确定', config);
          }
        }
      }
    }

    if (e.planMode == 2) {  //如果是在线编辑
      let id = e.id
      sessionStorage.setItem("planId", id)
      sessionStorage.setItem("companyId", e.companyId)
      //sessionStorage.setItem("buildingTypeId",this.unittypeId)
      sessionStorage.setItem("editable", "0")
      sessionStorage.setItem("planName", e.name)
      let companyId = sessionStorage.getItem("companyId")
      window.open(`/keyUnit/viewunitinfoplan?id=${companyId}`);
    }
    if (e.planMode == 3) {  //如果是跳转网页
      sessionStorage.setItem("url", e.url)
      window.open(`/planManagement/webLook`)
    }
  }
  //分页事件
  chagePage(e) {
    this.PageNumber = e.pageIndex + 1
    this.getAllPlanInfo();
  }
  //辖区中队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
  }
  //查询
  onSubmit(e) {
    this.getAllPlanInfo()
  }
  companyName: any //单位名称
  js: any //所选组织机构
  jsId: any //所选组织机构的id
  // jscheck:boolean //所选组织机构勾选框
  unittype: any //单位类型
  reservePlanType: any //预案类型
  preparelevel: any //编制级别
  plcheck: boolean //编制级别勾选框
  //重置
  reset() {
    this.companyName = ''
    // this.js = ''
    // this.jsId = ''
    // this.jscheck = false
    this.unittype = ''
    this.reservePlanType = ''
    this.preparelevel = ''
    this.plcheck = false
    //重新获取初始化列表
    this.pageEvent.pageIndex = 0
    this.PageNumber = 1
    this.getAllPlanInfo();

  }
}

@Component({
  selector: 'PsViewer',
  templateUrl: './PsvShow.html',
  styleUrls: ['./open-plan.component.scss']
})
export class GkhtmlPsViewer {
  constructor(private router: Router, private http: HttpClient, public dialog: MatDialog, public snackBar: MatSnackBar, public dialogRef: MatDialogRef<GkhtmlPsViewer>, @Inject(MAT_DIALOG_DATA) public data: any) { }
  ngOnInit(): void {
    // console.log(this.data)
    const viewer = new Viewer({
      container: document.querySelector('#viewer'),
      panorama: '/api/Objects/PlanPlatform/' + this.data,

    });
  }
}


//普通图片弹窗
@Component({
  selector: 'imgdetails',
  templateUrl: './previewImg.html',
  styleUrls: ['./open-plan.component.scss']
})
export class OpenImgDetails {
  constructor(private http: HttpClient, public dialog: MatDialog, public dialogRef: MatDialogRef<OpenImgDetails>,
    @Inject(MAT_DIALOG_DATA) public data) { }
  testSwiper: Swiper;

  ngOnInit(): void {
    this.allImages = []
    this.data.forEach(element => {
      element = `/api/Objects/PlanPlatform/${element}?x-oss-process=image/auto-orient,1`
      this.allImages.push(element)
    });
  }

  ngAfterViewInit() {
    this.testSwiper = new Swiper('.swiper-container', {
      lazy: true,
      direction: 'horizontal',
      loop: false,

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });
  }

  allImages: any; //展示所有的图片
  rotationAngle: number = 0; //旋转角度

  //旋转图片
  rotate() {
    this.rotationAngle = this.rotationAngle + 90
    if (this.rotationAngle === 360) { this.rotationAngle = 0 }
  }
}