/* * @Descripttion: * @version: * @Author: sueRimn * @Date: 2021-06-16 13:56:54 * @LastEditors: sueRimn * @LastEditTime: 2021-07-05 15:36:30 */ 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'; declare var $: any @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) { } planLevel: string//预案级别 ngOnInit(): void { this.planLevel = this.route.snapshot.queryParams.planCategory 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) this.getTemplateData() } }); }) } selectedItem: string = '封面' clickTitleItem(item) { this.addNumber = -1 this.selectedItem = item.groupName if (this.selectedItem == '重点图示') { this.getAllBuildings() this.getSitePlan() this.getRealPicture() } else if (this.selectedItem == '单位概况') { this.getAllBuildings() this.planTemplateData[1].attribute[0].attinf[0].value=this.planTemplateData[1].attribute[0].attinf[0].olddata = this.unitData.usci this.planTemplateData[1].attribute[0].attinf[1].value=this.planTemplateData[1].attribute[0].attinf[1].olddata = this.unitData.buildingTypes[0].name this.planTemplateData[1].attribute[0].attinf[2].value=this.planTemplateData[1].attribute[0].attinf[2].olddata = this.unitData.contacts this.planTemplateData[1].attribute[0].attinf[3].value=this.planTemplateData[1].attribute[0].attinf[3].olddata = this.unitData.phone this.planTemplateData[1].attribute[0].attinf[4].value=this.planTemplateData[1].attribute[0].attinf[4].olddata = this.unitData.organizationName this.planTemplateData[1].attribute[0].attinf[5].value=this.planTemplateData[1].attribute[0].attinf[5].olddata = this.unitData.address console.log(this.planTemplateData) } /* 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 }) }) } //获取实景图 allRealPicture getRealPicture() { let companyId = this.unitId this.http.get('/api/RealityImageGroups', { params: { companyId: this.route.snapshot.queryParams.companyId } }).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: any) => { // console.log('预案内容', data) this.planTemplateData = JSON.parse(data.webTextData).filter(item => item.completed == true ) // console.log(this.planTemplateData) if (this.planTemplateData[0].groupName != '封面') { let obj = { completed: true, groupName: "封面", attribute: { planNumber: '', planName: this.route.snapshot.queryParams.planName, objName: this.unitData.name, unitNature: this.unitData.buildingTypes[0].name, planLevel: '', disasterType: '火灾', fireproofingLevel: '', fireproofingAdminister: this.unitData.organizationName, putOutFireAdminister: '', producer: { name: '', duty: '' }, verifier: { name: '', duty: '' }, auditTime: '' } } this.planTemplateData.unshift(obj) } 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) { console.log(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) => { if(i.tableth!=undefined){ i.tableth.json.push('/api/Objects/PlanPlatform/' + res.objectName) }else{ 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 => { if(i.tableth!=undefined){ i.tableth.json.push('/api/Objects/PlanPlatform/' + res) }else{ 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 if (this.planTemplateData[1].building == undefined) { this.planTemplateData[1].building = [] for (var i = 0; i < this.allBuildings.length; i++) { if (i == 0) { this.planTemplateData[1].building.push({ name: this.allBuildings[i].name, body: this.planTemplateData[1].attribute, completed: true }) } else { this.planTemplateData[1].building.push({ name: this.allBuildings[i].name, body: this.planTemplateData[1].attribute, completed: false }) } } } console.log(this.planTemplateData) //this.buildingName=this.planTemplateData[1].building[0].name this.group = this.planTemplateData[1].building //delete this.planTemplateData[0].attribute }) } //获取总平面图 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 console.log(item, this.clicki) //this.group=this.planTemplateData[1].building[this.clicki].body } //单位概况增加一行 unitadd(surveyName, attacki, i) { this.addNumber++ if (surveyName == '进攻通道') { if (this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr == undefined) { this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr = [] } this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr.push({ tabletd: [] }) for (var j = 0; j < this.planTemplateData[1].building[attacki].body[4].attinf[i].tableth.length; j++) { if (this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr != undefined) { this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr[this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr.length - 1].tabletd.push('') } else { this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr[this.addNumber].tabletd.push('') } } // console.log(this.planTemplateData) } else if (surveyName == '功能分区') { console.log(attacki) this.planTemplateData[1].building[attacki].body[6].attinf.push({ name: '', value: '' }) } else if (surveyName == '重点部位') { this.planTemplateData[1].building[attacki].body[5].attinf.push({ heafName: '', body: [{ name: '重点部位名称', value: '' }, { name: '重点部位所在位置', value: '' }, { name: '建筑结构', value: '' }, { name: '使用性质', value: '' }, { name: '主要危险性', value: '' }] }) } } //单位概况删除一行 unitDel(surveyName, attacki, i) { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 let isTrue = confirm('您确定要删除该条信息吗') if (surveyName == '进攻通道') { if (isTrue) { if (this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr != undefined) { this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr.splice(this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr.length - 1, 1) this.addNumber-- if (this.planTemplateData[1].building[attacki].body[4].attinf[i].tabletr.length == 0) { this.addNumber = -1 } } else { this.snackBar.open('请先增加一行!', '确定', config); } } } else if (surveyName == '功能分区') { if (isTrue) { this.planTemplateData[1].building[attacki].body[6].attinf.splice(i, 1) } } else if (surveyName == '重点部位') { if (isTrue) { this.planTemplateData[1].building[attacki].body[5].attinf.splice(i, 1) } } } //分段上传 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循环 //分块 处理 }) }) } //预览 pattern: string = 'edit' preview() { this.pattern = 'look' } quitPreview() { this.pattern = 'edit' } //提交 submit() { console.log('提交信息', this.planTemplateData) let body = { webTextData: JSON.stringify(this.planTemplateData) } this.http.put(`/api/PlanComponents/${this.route.snapshot.queryParams.planId}`, body).subscribe(data => { // console.log('提交成功',data) const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('提交成功', '确定', config); }) } //返回顶部 goBack() { document.querySelector('#mainbox').scrollIntoView(true) } //生成word generatingDoc() { console.log(666, $(".mainbox")) $(".mainbox").wordExport('word文档'); } //原数据点击 oldData=false clickoldData(){ this.oldData=!this.oldData } } //查看预案 @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() } }