/* * @Descripttion: * @version: * @Author: sueRimn * @Date: 2021-06-16 13:56:54 * @LastEditors: sueRimn * @LastEditTime: 2021-06-23 16:26:37 */ import { HttpClient } from '@angular/common/http'; import { Component, Inject, OnInit, Renderer2, ViewChild, Input } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import Viewer from 'viewerjs'; @Component({ selector: 'app-create-plan-online-five', templateUrl: './create-plan-online-five.component.html', styleUrls: ['./create-plan-online-five.component.scss'] }) export class CreatePlanOnlineFiveComponent implements OnInit { constructor(private http: HttpClient, private route: ActivatedRoute, public snackBar: MatSnackBar, public dialog: MatDialog) { } planName: string //预案名称 planLevel: string//预案级别 ngOnInit(): void { this.planName = this.route.snapshot.queryParams.planName this.planLevel = this.route.snapshot.queryParams.planCategory console.log('级别', this.planLevel) this.getTemplateData() this.getUnitData() this.getAllBuildings() this.tree = { json: this.treedate, config: this.treeConfig }; } //树形结构数据 treedate = [ { "guid": "bc4c7a02-5379-4046-92be-12c67af4295a", "displayName": "Elentrix", "children": [ /* "85d412c2-ebc1-4d56-96c9-7da433ac9bb2", "28aac445-83b1-464d-9695-a4157dab6eac" */ ] } ] tree treeConfig = { nodeWidth: 90, nodeHeight: 60 }; //获得单位信息 unitData: any getUnitData() { let paramsdata: any = { Name: this.route.snapshot.queryParams.unitName || '', } this.http.get("/api/Companies", { params: paramsdata }).subscribe((data: any) => { data.items.forEach(element => { if (element.id == this.route.snapshot.queryParams.companyId) { this.unitData = element console.log('单位列表信息', this.unitData) } }); }) } selectedItem: string = '封面' clickTitleItem(item) { this.addNumber = -1 item == '封面' ? this.selectedItem = '封面' : this.selectedItem = item.groupName if (this.selectedItem == '重点图示') { this.getAllBuildings() this.getSitePlan() this.getRealPicture() } else if (this.selectedItem == '单位概况') { //this.getAllBuildings() } else if (this.selectedItem == '预案附件') { this.getTwoDPlanList() } } //获取当前单位的二维预案 TwoDPlanList: any getTwoDPlanList() { let paramsData = { companyId: this.route.snapshot.queryParams.companyId, pageSize: "999" } this.http.get("/api/PlanComponents", { params: paramsData }).subscribe((data: any) => { this.TwoDPlanList = data.items.filter((item) => { return item.planType == 1 }) console.log(this.TwoDPlanList) }) } //获取实景图 allRealPicture getRealPicture() { let companyId = this.unitId this.http.get('/api/RealityImageGroups', { params: { companyId: '5e9964caa760a059e84512e9' } }).subscribe((data: any) => { this.allRealPicture = data this.getAllRealPicture().then(() => { console.log('实景图', this.allRealPicture) }) }) } async getAllRealPicture() { for (let index = 0; index < this.allRealPicture.length; index++) { const element = this.allRealPicture[index]; let data = { groupId: element.id, pageSize: '999', } await new Promise((resolve, reject) => { this.http.get('/api/RealityImages', { params: data }).subscribe((data: any) => { element.realityImages = data.items element.realityImages.forEach(item => { //每张图片设置选中状态为false item.newImageUrl = `/api/Objects/PlanPlatform/${item.imageUrl}?x-oss-process=image/resize,m_fill,h_100,w_100` //处理图片URL地址 item.nameStart = item.name.substring(0, item.name.lastIndexOf(".")); //图片名称前缀 item.nameEnd = item.name.substring(item.name.lastIndexOf("."), item.name.length); //图片名称后缀 resolve(data) }); }) }) } } planTemplateData: any //获得模板信息 getTemplateData() { this.http.get(`/api/PlanComponents/${this.route.snapshot.queryParams.planId}/WebText`).subscribe(data => { console.log('预案内容',data) // this.planTemplateData = JSON.parse(data.webdata).filter(item => // item.completed == true // ) console.log(this.planTemplateData) this.planTemplateData.forEach(element => { if (element.groupName == '重点图示') { if (!element.attribute) { element.attribute = [{ name: '', imgArr: [] }] } } if (element.groupName == '交通水源') { if (!element.attribute) { element.attribute = [{ name: '', imgArr: [] }] } } if (element.groupName == '预案附件') { if (!element.attribute) { element.attribute = [{ name: '', imgArr: [] }] } } if (element.groupName == '处置要点') { if (!element.attribute) { element.attribute = [{ name: '', content: '' }] } } if (element.groupName == '特别警示') { if (!element.attribute) { element.attribute = [{ name: '特别警示', content: '' }] } } }); }) } //重点图示增加分组 addkeyImgItem(item) { item.attribute.push({ name: '', imgArr: [] }) } //处置要点增加分组 addDisposalPointItem(item) { item.attribute.push({ name: '', content: '' }) } //通过左侧查看实景图 gallery lookkeyImgItemLeft(key1, key2, i) { let dom = document.getElementById(`viewerjs`) let pObjs = dom.childNodes; let node = document.createElement("img") node.style.display = "none"; node.src = '/api/Objects/PlanPlatform/' + i.imageUrl; node.id = 'img' dom.appendChild(node) setTimeout(() => { let viewer = new Viewer(document.getElementById(`viewerjs`), { hidden: () => { dom.removeChild(pObjs[0]); viewer.destroy(); } }); node.click(); }, 0); } //通过左侧实景图增加分组 addkeyImgItemLeft(item, i) { this.planTemplateData.forEach(element => { if (element.groupName == '重点图示') { element.attribute.push({ name: item.name + '-' + i.name, imgArr: ['/api/Objects/PlanPlatform/' + i.imageUrl] }) } }); } //重点图示,处置要点删除指定分组 deleteItem(item, key) { let isDelete = window.confirm('确定要删除该分组吗?分组下内容将一同被删除!') if (isDelete) { item.attribute.splice(key, 1) } } //重点图示删除指定分组里面的图片 deleteImgItem(imgArr, imgkey) { let isDelete = window.confirm('确定要删除该图片吗?') if (isDelete) { imgArr.splice(imgkey, 1) } } //重点图示上传图片 filechange(e, i) { let file = e.target.files[0] || null //获取上传的文件 let fileSize = file.size || null //上传文件的总大小 let maxSize = 5 * 1024 * 1024 //5MB一个分片 let tenSize = 100 * 1024 * 1024 //100MB限制 if (file && fileSize <= maxSize) { //上传文件<=5MB时 let upload = this.uploadFile(this.route.snapshot.queryParams.companyId, this.route.snapshot.queryParams.planId, file) upload.then((res: any) => { i.imgArr.push('/api/Objects/PlanPlatform/' + res.objectName) }) } else { //上传文件>5MB时 let upload = this.sectionUpload(this.route.snapshot.queryParams.companyId, this.route.snapshot.queryParams.planId, file) upload.then(res => { i.imgArr.push('/api/Objects/PlanPlatform/' + res) }) } } //单位相关数据 unitId: any = this.route.snapshot.queryParams.companyId //获得所有的建筑物 allBuildings: any getAllBuildings() { this.http.get("/api/Buildings", { params: { companyId: this.unitId } }).subscribe((data: any) => { data.forEach((item, index) => { let params = { buildingId: item.id } item.plandata = [] this.http.get('/api/BuildingAreas', { params }).subscribe(data => { item.plandata = data }) }) this.allBuildings = data this.planTemplateData[0].building = [] for (var i = 0; i < this.allBuildings.length; i++) { this.planTemplateData[0].building.push({ name: this.allBuildings[i].name, body: this.planTemplateData[0].attribute }) } this.buildingName = this.allBuildings[0].name this.group = this.planTemplateData[0].building[this.clicki].body console.log(this.planTemplateData) }) } //获取总平面图 sitePlanItems: any getSitePlan() { let params = { companyId: this.unitId } this.http.get('/api/SitePlans', { params: params }).subscribe(data => { this.sitePlanItems = data }) } //打开采集工具 openPlan(item, index, type?: string) { sessionStorage.setItem("gisplan", 'look') sessionStorage.setItem("companyId", this.unitId) console.log(item) if(type == '预案'){ sessionStorage.setItem("planId", item.id) sessionStorage.setItem("companyId", this.route.snapshot.queryParams.companyId) sessionStorage.setItem("buildingTypeId",this.route.snapshot.queryParams.unitTypeId) sessionStorage.setItem("editable", "0") sessionStorage.setItem("planName", item.name) sessionStorage.setItem("orName", item.name) sessionStorage.setItem("orId", item.name) } let data = { select: item, key: index, allBuildings: this.allBuildings, type: type } let width = Math.round(document.body.clientWidth * 0.8) + 'px' let height = Math.round(document.body.clientHeight * 0.9) + 'px' // console.log('宽度',width) let dialogRef = this.dialog.open(OpenPlanToolDialog, {//调用open方法打开对话框并且携带参数过去 id: 'openPlanToolDialog', data, width: width, height: height }); dialogRef.afterClosed().subscribe((data) => { }); } //正常上传 async uploadFile(companyId: string, planId: string, file) { let formData = new FormData() formData.append("file", file) return new Promise((resolve, reject) => { this.http.post(`/api/Objects/PlanPlatform/${companyId}/${planId}`, formData).subscribe((data: any) => { resolve(data) }) }) } //input key值，一个字符焦点消失问题 trackByFn(index) { return index } //灾情设定表格增加一行 addNumber = -1 addTd(key, i) { this.addNumber++ //this.planTemplateData[key].attribute[i].push({tabletr:[]}) if (this.planTemplateData[key].attribute[i].tabletr == undefined) { this.planTemplateData[key].attribute[i].tabletr = [] } this.planTemplateData[key].attribute[i].tabletr.push({ tabletd: [] }) for (var j = 0; j < this.planTemplateData[key].attribute[i].tableth.length; j++) { if (this.planTemplateData[key].attribute[i].tabletr != undefined) { this.planTemplateData[key].attribute[i].tabletr[this.planTemplateData[key].attribute[i].tabletr.length - 1].tabletd.push('') } else { this.planTemplateData[key].attribute[i].tabletr[this.addNumber].tabletd.push('') } } console.log(this.planTemplateData) } //灾情设定表格删除一行 delTd(key, i) { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 if (this.planTemplateData[key].attribute[i].tabletr != undefined) { this.planTemplateData[key].attribute[i].tabletr.splice(this.planTemplateData[key].attribute[i].tabletr.length - 1, 1) this.addNumber-- if (this.planTemplateData[key].attribute[i].tabletr.length == 0) { this.addNumber = -1 } } else { this.snackBar.open('请先增加一行!', '确定', config); } } //单位概况左侧建筑点击事件 buildingName clicki = 0 group clickBuilding(item, i) { this.buildingName = item.name this.clicki = i this.group = this.planTemplateData[0].building[this.clicki].body //console.log(this.group) } //单位概况增加一行 unitadd(surveyName, attacki) { this.addNumber++ if (surveyName == '进攻通道') { if (this.planTemplateData[0].building[this.clicki].body[4].attinf[attacki].tabletr == undefined) { this.planTemplateData[0].building[this.clicki].body[4].attinf[attacki].tabletr = [] } this.planTemplateData[0].building[this.clicki].body[4].attinf[attacki].tabletr.push({ tabletd: [] }) for (var j = 0; j < this.planTemplateData[0].building[this.clicki].body[4].attinf[attacki].tableth.length; j++) { if (this.planTemplateData[0].building[this.clicki].body[4].attinf[attacki].tabletr != undefined) { this.planTemplateData[0].building[this.clicki].body[4].attinf[attacki].tabletr[this.planTemplateData[0].building[this.clicki].body[4].attinf[attacki].tabletr.length - 1].tabletd.push('') } else { this.planTemplateData[0].building[this.clicki].body[4].attinf[attacki].tabletr[this.addNumber].tabletd.push('') } } console.log(this.planTemplateData) } } //单位概况删除一行 unitDel(surveyName, attacki) { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 if (surveyName == '进攻通道') { if (this.planTemplateData[0].building[this.clicki].body[4].attinf[attacki].tabletr != undefined) { this.planTemplateData[0].building[this.clicki].body[4].attinf[attacki].tabletr.splice(this.planTemplateData[0].building[this.clicki].body[4].attinf[attacki].tabletr.length - 1, 1) this.addNumber-- if (this.planTemplateData[0].building[this.clicki].body[4].attinf[attacki].tabletr.length == 0) { this.addNumber = -1 } } else { this.snackBar.open('请先增加一行!', '确定', config); } } } //分段上传 sectionUpload(companyId: string, planId: string, file) { let data = { filename: file.name } return new Promise((resolve, reject) => { this.http.post(`/api/NewMultipartUpload/PlanPlatform/${companyId}/${planId}`, {}, { params: data }).subscribe(async (data: any) => { //初始化分段上传 let objectName = data.objectName let uploadId = data.uploadId let PartNumberETag = []; //每次返回需要保存的信息 //分块 处理 let fileSize = file.size || null //上传文件的总大小 let shardSize = 5 * 1024 * 1024 //5MB一个分片 let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段 for (let i = 0; i < allSlice; i++) { //循环分段上传 let start = i * shardSize //切割文件开始位置 let end = Math.min(fileSize, start + shardSize); //切割文件结束位置 let formData = new FormData() formData.append("file", file.slice(start, end)) //同步写法实现异步调用 let result = await new Promise((resolve, reject) => { // await 需要后面返回一个 promise 对象 this.http.post(`/api/MultipartUpload/PlanPlatform/${objectName}?uploadId=${uploadId}&partNumber=${i + 1}`, formData).subscribe((data: any) => { let msg = { "partNumber": data.partNumber || null, "eTag": data.eTag || null } resolve(msg) // 调用 promise 内置方法处理成功 }) }); PartNumberETag.push(result) if (PartNumberETag.length === allSlice) { //分块上传完成 let data = PartNumberETag let paramsData = { uploadId: uploadId } this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${objectName}`, data, { params: paramsData }).subscribe(data => { resolve(objectName) }) } }//for循环 //分块 处理 }) }) } } //查看预案 @Component({ selector: 'lookPlan-dialog', templateUrl: './openPlanTool.html', styleUrls: ['./openPlanTool.scss'] }) export class OpenPlanToolDialog { constructor(public http: HttpClient, public snackBar: MatSnackBar, public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data, private render2: Renderer2, public dialog: MatDialog, private route: ActivatedRoute) { } @ViewChild('plan') plan: any //子组件 type: any//打开的类型 是平面图还是水源 ngOnInit() { this.type = this.data.type } ngAfterViewInit(): void { if (this.type != '水源' && this.type != '预案') { this.noticePlan() } } //通知 子组件 传递参数 noticePlan() { let parameter = { //查询 节点 对应 建筑/楼层 index,id buildingIndex: this.data.key, //总平面图/建筑 index storeyId: this.data.select.id } this.http.get("/api/Buildings", { params: { companyId: this.route.snapshot.queryParams.companyId } }).subscribe((data: any) => { this.plan.allBuildings = data this.plan.isGis = this.data.select.isGis this.plan.seekPanelPoint(parameter) }) } //关闭弹窗 closeDiv() { this.dialogRef.close() } }