import { Component, Input, Renderer2, OnDestroy, AfterViewInit, ElementRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { NzMessageService } from 'ng-zorro-antd/message'; import { Router, ActivatedRoute } from '@angular/router'; import { MethodService } from 'src/app/service/method.service'; import { TreeService } from 'src/app/service/tree.service'; import { HttpClient } from '@angular/common/http'; import { asBlob } from 'html-docx-js-typescript' // 要保存这个docx文件推荐引入file-saver哦,你可以用npm i -D file-saver来安装 import { saveAs } from 'file-saver' import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service'; declare var AMap: any; import Viewer from 'viewerjs'; import { NzModalService } from 'ng-zorro-antd/modal'; import { OperationLogComponent } from './operation-log/operation-log.component'; declare var $: any @Component({ selector: 'app-unit-details', templateUrl: './unit-details.component.html', styleUrls: ['./unit-details.component.scss'] }) export class UnitDetailsComponent implements OnInit { @ViewChild('box') box: ElementRef; loading = false; avatarUrl?: string; constructor(public methodService: MethodService, private route: ActivatedRoute, private message: NzMessageService, private router: Router, private toTree: TreeService, private fb: FormBuilder, private http: HttpClient, private renderer: Renderer2, private el: ElementRef, public renderer2: Renderer2, private elementRef: ElementRef, private objectsSrv: ObjectsSimpleService, private modal: NzModalService, private viewContainerRef: ViewContainerRef) { } index = 1 disableds = false exerciseData: any = { data: { people: "", typeAndAmount: "", time: "请选择时间", add: '', information: "", situation: "",//消防设施使用情况 data: { danger: '', from: [ { name: '侦查', form: { // mode: '', // people: '', // add: '', // marshalling: '', // imgShow: '' } }, { name: '警戒', form: { // mode: '', // people: '', // add: '', // jingshi: '', // imgShow: '' } }, { name: '供水', form: { // mode: '', // people: '', // gongshui: '', // qushuidian: '', // imgShow: '' } }, { name: '搜救', form: { // mode: '', // people: '', // add: '', // jingshi: '', // imgShow: '' } }, { name: '排烟', form: { // mode: '', // people: '', // add: '', // paiyan: '', // imgShow: '' } }, { name: '灭火', form: { // mode: '', // people: '', // add: '', // jingshi: '', // imgShow: '' } }, { name: '照明', form: { // mode: '', // people: '', // zhaoming: '', // imgShow: '' } }, { name: '撤离', form: { // cheliluxian: '', // chelixinhao: '', // imgShow: '' } }, { name: '讲评', form: { // jiangpingren: '', // qingdian: '', // haode: '', // buzu: '', // imgShow: '' } } ] }, vehicleType: [] } } /** * 救援预案信息 */ planData: any = { data: { basicInfo: { name: '', address: '', people: '', phone: '', peoplenum: '', buildingheight: '', cengshu: '', jiegou: '', zhandimianji: '', zongmianji: '', xingzhi: '', pilin: { dong: '', xi: '', nan: '', bei: '' }, luxian: '', time: '' }, other: { listdata: [{ name: '消防水源', data: [ { name: '消防水池数量', velue: '' }, { name: '消防水池位置', velue: '' }, { name: '总容量(平方米)', velue: '' }, { name: '补给方式', velue: '' }, { name: '室外其他水源', velue: '' }, { name: '室外其他水源位置', velue: '' } ] }, { name: '消防栓泵', data: [ { name: '数量', velue: '' }, { name: '扬程(m)', velue: '' }, { name: '流量(L/S)', velue: '' }, { name: '水泵接合器数量', velue: '' }, { name: '水泵接合器位置', velue: '' } ] }, { name: '喷淋泵', data: [ { name: '数量', velue: '' }, { name: '扬程(m)', velue: '' }, { name: '流量(L/S)', velue: '' }, { name: '水泵接合器数量', velue: '' }, { name: '水泵接合器位置', velue: '' }, ] }, { name: '消防电梯', data: [ { name: '数量', velue: '' }, { name: '位置', velue: '' }, ] }, { name: '疏散电梯', data: [ { name: '数量', velue: '' }, { name: '位置', velue: '' }, ] }, { name: '安全出口', data: [ { name: '数量', velue: '' }, { name: '位置', velue: '' }, ] }, { name: '标准层室内消火栓', data: [ { name: '数量', velue: '' }, { name: '位置', velue: '' }, ] } ], radiodata: [{ name: '自动报警系统', isHave: null }, { name: '自动喷水系统', isHave: null }, { name: '应急广播系统', isHave: null }, { name: '放排烟系统', isHave: null } ] }, key: [ ], zhongdiantishi: '' } } /** * 消防控制室 */ kongzhishi = { data: { addres: '' } } /** * 室外消火栓 */ shiwaixiaohuoshuan = { data: { addres: '' } } company: string organization: string datas = { basicInfo: { name: "", addr: "", phone: "", total: "", height: "", layer: "", structure: "", coveredArea: "", builtUpArea: "", nature: "", east: "", south: "", west: "", north: "", routeAndTime: "", positionCoordinates: { x: 0, y: 0 } }, facilities: { controlPosition: "", poolNumbe: "", poolPosition: "", poolCapacity: "", supplyMode: "", waterSources: "", waterSourcesPosition: "", system: { alarm: false, spray: false, broadcast: false, smoke: false, }, hydrantsNumber: "", hydrantsPosition: "", pumpNumber: "", pumpRange: "", pumpFlow: "", pumpAdapter: "", SprayPumpNumber: "", SprayPumpRange: "", SprayPumpFlow: "", SprayPumpAdapter: "", elevator: "", stairs: "", Export: "", indoorHydrant: "", standardIndoorHydrant: "" }, KeyParts: [ { keyparts: "", keypartsposition: "", buildingstructure: "", useNature: "", danger: "" }, { keyparts: "", keypartsposition: "", buildingstructure: "", useNature: "", danger: "" } ], tips: "" } validateForm!: FormGroup; id = "" integrity = 0 ngOnInit(): void { this.id = this.router['browserUrlTree'].queryParams.id if (this.router['browserUrlTree'].queryParams.pattern != "edit") { this.disableds = true } this.company = this.route.snapshot.queryParams.company this.organization = this.route.snapshot.queryParams.organization let taskId = this.route.snapshot.queryParams.id this.methodService.getCompanyTaskDetails(taskId).then((data: any) => { let obj = JSON.parse(data.resultData) console.log('所有数据', obj) let exerciseData = this.methodService.getTaskDetailsItem('实战演练', obj.form) if (exerciseData.data.data) { this.exerciseData = this.methodService.getTaskDetailsItem('实战演练', obj.form) } // console.log('实战演练详情', this.exerciseData) let planData = this.methodService.getTaskDetailsItem('数字化预案', obj.form) if (JSON.stringify(planData.data) != "{}") { if (JSON.stringify(planData.data.basicInfo) != "{}") { this.planData.data.basicInfo = this.methodService.getTaskDetailsItem('数字化预案', obj.form).data.basicInfo } if (JSON.stringify(planData.data.other) != "{}") { this.planData.data.other = this.methodService.getTaskDetailsItem('数字化预案', obj.form).data.other } if (planData.data.key.lenth != 0) { this.planData.data.key = this.methodService.getTaskDetailsItem('数字化预案', obj.form).data.key } if (planData.data.zhongdiantishi) { this.planData.data.zhongdiantishi = this.methodService.getTaskDetailsItem('数字化预案', obj.form).data.zhongdiantishi } } // console.log('数字化预案详情', this.planData) let kongzhishi = this.methodService.getTaskDetailsItem('消防控制室', obj.form) if (JSON.stringify(kongzhishi.data) != "{}") { this.kongzhishi = this.methodService.getTaskDetailsItem('消防控制室', obj.form) } let shiwaixiaohuoshuan = this.methodService.getTaskDetailsItem('室外消火栓', obj.form) if (JSON.stringify(shiwaixiaohuoshuan.data) != "{}") { this.shiwaixiaohuoshuan = this.methodService.getTaskDetailsItem('室外消火栓', obj.form) } // console.log('消防控制室详情', this.kongzhishi) // console.log('室外消火栓详情', this.shiwaixiaohuoshuan) }) this.validateForm = this.fb.group({ code: [null], organizationId: [null, [Validators.required]], relatedOrganizationId: [null], buildingTypeId: [null], legalPersonName: [null], legalPersonPhone: [null], principalName: [null], principalPhone: [null], adminName: [null], adminPhone: [null] }); this.getAllOrganization() this.getCompanies() this.getBuildingTypes() } imageUrl = ''//单位照片 isLoadingSave: boolean = false uploadIndex: string filechange(e) { this.isLoadingSave = true let file = e.target.files[0] || null //获取上传的文件 this.openFileSelect(file, `unitPhoto/${this.id}/`) } //设置文件路径并上传 postFilePath openFileSelect(file: File, extensionPath: string) { this.postFilePath = extensionPath; let fileSize = file.size || null //上传文件的总大小 let shardSize = 5 * 1024 * 1024 //5MB 超过5MB要分块上传 if (fileSize >= shardSize) // 超过5MB要分块上传 { this.postFileByMul(file); } else //普通上传 { this.postFile(file); } } //小文件直接上传 async postFile(file: File) { await new Promise((resolve, reject) => { this.objectsSrv.postFile(this.postFilePath, file).subscribe(data => { let dataObj = data as any; let filePath: string = ObjectsSimpleService.baseUrl + dataObj.objectName; this.imageUrl = filePath this.isLoadingSave = false resolve('success') }); }) } //大文件分块上传 postFileByMul(file: File) { this.objectsSrv.postFile_MultipartUpload(this.postFilePath, file).then((value) => { let dataObj = value as any; let filePath = dataObj.filePath this.imageUrl = filePath this.isLoadingSave = false }); } //查看图片 viewImg(url) { let dom = document.getElementById(`viewerjs`) let pObjs = dom.childNodes; let node = document.createElement("img") node.style.display = "none"; node.src = url; node.id = 'img' dom.appendChild(node) setTimeout(() => { let viewer = new Viewer(document.getElementById(`viewerjs`), { hidden: () => { dom.removeChild(pObjs[0]); viewer.destroy(); } }); node.click(); }, 0); } isMapLabel: boolean //地图标注位置 markerPosition: any = { x: 0, y: 0 }//单位坐标 map: any //地图实例 isGisTopBox: boolean = false//点击位置按钮 isGisTopBoxTwo: boolean = false//点击位置按钮 oldPositionMarker: any //旧位置marker实例 newPositionMarker: any //新位置marker实例 newPositionMarkerContent: any = '
单位基本情况 |
单位名称 |
`+ this.datas.basicInfo.name + ` |
单位地址 |
`+ this.datas.basicInfo.addr + ` |
联系电话 |
`+ this.datas.basicInfo.phone + ` |
|||||||||||||
人员总数 |
`+ this.datas.basicInfo.total + ` |
建筑高度 |
`+ this.datas.basicInfo.height + ` |
层数 |
`+ this.datas.basicInfo.layer + ` |
||||||||||||||
建筑结构 |
`+ this.datas.basicInfo.structure + ` |
占地面积 |
`+ this.datas.basicInfo.coveredArea + ` |
总建筑面积 |
`+ this.datas.basicInfo.builtUpArea + ` |
主要使用性质 |
`+ this.datas.basicInfo.nature + ` |
||||||||||||
毗邻建筑 |
东:`+ this.datas.basicInfo.east + ` |
南:`+ this.datas.basicInfo.south + ` |
西:`+ this.datas.basicInfo.west + ` |
北:`+ this.datas.basicInfo.north + ` |
|||||||||||||||
辖区中队行驶路线及时间 |
`+ this.datas.basicInfo.routeAndTime + ` |
||||||||||||||||||
单位内部主要消防设施 |
消防控制室 |
位置 |
`+ this.datas.facilities.controlPosition + ` |
||||||||||||||||
消防水源 |
消防水池数量 |
`+ this.datas.facilities.poolNumbe + ` |
位置 |
`+ this.datas.facilities.poolPosition + ` |
总容量 |
`+ this.datas.facilities.poolCapacity + ` |
补给方式 |
`+ this.datas.facilities.supplyMode + ` |
|||||||||||
室外其他水源 |
`+ this.datas.facilities.waterSources + ` |
位置 |
`+ this.datas.facilities.waterSourcesPosition + ` |
||||||||||||||||
自动报警系统 |
`+ alarm + ` |
自动喷水系统 |
`+ spray + ` |
应急广播系统 |
`+ broadcast + ` |
防排烟系统 |
`+ smoke + ` |
||||||||||||
室外消火栓数量 |
`+ this.datas.facilities.hydrantsNumber + `个 |
室外消火栓位置分布 |
`+ this.datas.facilities.hydrantsPosition + ` |
||||||||||||||||
消防泵 |
消火栓泵 |
数量:`+ this.datas.facilities.pumpNumber + ` |
扬程:`+ this.datas.facilities.pumpRange + `m |
流量:`+ this.datas.facilities.pumpFlow + `L/S |
水泵接合器 |
数量: |
`+ this.datas.facilities.pumpAdapter + ` |
||||||||||||
喷淋泵 |
数量:`+ this.datas.facilities.SprayPumpNumber + ` |
扬程:`+ this.datas.facilities.SprayPumpRange + `m |
流量:`+ this.datas.facilities.SprayPumpFlow + `L/S |
水泵接合器 |
数量: |
`+ this.datas.facilities.SprayPumpAdapter + ` |
|||||||||||||
消防电梯 数量及位置 |
`+ this.datas.facilities.elevator + ` |
疏散楼梯 数量及位置 |
`+ this.datas.facilities.stairs + ` |
安全出口 数量及位置 |
`+ this.datas.facilities.Export + ` |
||||||||||||||
室内消火栓数量 |
`+ this.datas.facilities.indoorHydrant + `个 |
标准层室内消火栓数量及位置 |
`+ this.datas.facilities.standardIndoorHydrant + ` |
||||||||||||||||
重点部位情况(一) |
重点部位名称 |
`+ this.datas.KeyParts[0].keyparts + ` |
重点部位所在位置 |
`+ this.datas.KeyParts[0].keypartsposition + ` |
建筑结构 |
`+ this.datas.KeyParts[0].buildingstructure + ` |
使用性质 |
`+ this.datas.KeyParts[0].useNature + ` |
|||||||||||
主要危险性 |
`+ this.datas.KeyParts[0].danger + ` |
||||||||||||||||||
重点部位情况(二) |
重点部位名称 |
`+ this.datas.KeyParts[1].keyparts + ` |
重点部位所在位置 |
`+ this.datas.KeyParts[1].keypartsposition + ` |
建筑结构 |
`+ this.datas.KeyParts[1].buildingstructure + ` |
使用性质 |
`+ this.datas.KeyParts[1].useNature + ` |
|||||||||||
主要危险性 |
`+ this.datas.KeyParts[1].danger + ` |
||||||||||||||||||
重点 提示 |
`+ this.datas.tips + ` |
||||||||||||||||||
` const htmlString = `