import { Component, OnInit, Inject, ViewChild,ElementRef,Renderer2, ViewContainerRef } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import {leftFunctionalDomainComponent,editPlaneFigureComponent,editDisposalNodeComponent,addDisposalNodeComponent} from './leftFunctionalDomain' import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; import {FlatTreeControl} from '@angular/cdk/tree'; import {WorkingAreaComponent} from '../../working-area/working-area.component' import {CanvasShareDataService, DisposalNodeData} from '../../canvas-share-data.service' //引入服务 import Viewer from 'viewerjs'; import Swiper from 'swiper'; import { saveOneDialog } from './save'; import { NzFormatBeforeDropEvent, NzFormatEmitEvent,NzTreeComponent } from 'ng-zorro-antd/tree'; import { Observable, of } from 'rxjs'; import { delay } from 'rxjs/operators'; import { windows } from 'src/app/interface'; import { GameMode } from 'src/app/working-area/model/gameMode'; import { ActivatedRoute, Router } from '@angular/router'; import { examinationQuestions,uploadDisposalNodes,uploadQuestions } from './examinationQuestions' @Component({ selector: 'app-collection-tools', templateUrl: './collection-tools.component.html', styleUrls: ['./collection-tools.component.scss'] }) export class CollectionToolsComponent implements OnInit { @ViewChild('canvas',{static: true}) canvas:WorkingAreaComponent; //父组件中获得子组件的引用 constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,public canvasData: CanvasShareDataService,private router:Router,private route:ActivatedRoute) { } @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; // tree配置 private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数 return { expandable: !!node.children && node.children.length > 0, name: node.name || node.Name, level: level, id: node.id || node.Id, children:node.children, isTemplate:node.isTemplate, isNewElement:node.isNewElement, isLook:node.isLook, isLookPattern:node.isLookPattern || null }; } treeControl = new FlatTreeControl(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); hasChild = (_: number, node: any) => node.expandable; colors = ['#076eec','#4dd0e1','#00ee76','#ffff00','#eeb422', '#FF6A6A','#ff0000','#ff6eb4','#00bfff','#54ff9f', '#009688','#836fff','#ff8c00','#ee00ee','#ffa07a', '#00C500','#00ffff','#6495ed','#ffdAb9','#AA00FF'] selected = "1" //图标大小选择框 allBuildings //该单位所有建筑 beforeOneCheckedBuilding:any = {name:"总平面图"}; //当前点击选择的建筑 beforeOneCheckedBuildingIsShow:boolean = false; //建筑是否显示 togglebeforeOneCheckedBuilding () { this.beforeOneCheckedBuildingIsShow = !this.beforeOneCheckedBuildingIsShow } checkedBuildingIndex:number = -1 //当前点击选择的建筑index isEditPat:boolean = true //当前是否是编辑模式 assetName:String//素材名称 assetWidth:number//素材宽度 assetHeight:number//素材高度 sliderValue:number = 0//角度滑竿的值 sliderValueThickness:number = 0//厚度滑竿的值 isHighLight:boolean = false//是否高亮选择框 PropertyInfos = [] //去除图片链接真正用于循环的内容 imagesArrNum //素材属性图片数量上限 imagesArr = [] //属性中的图片链接集合 clickedIndex //点击图片时的索引值 //传入素材对象，设置右侧属性栏内容 canvasAssetObj //传入的素材属性对象 isImgNumCss = false //控制上传文件input显隐 mySwiper:any //轮播图实例 gallery//viewerJs实例 //设置属性框 setAssetsProperty(obj){ //初始化viewerJs实例 setTimeout(() => { obj.PropertyInfos.forEach(item => { if(item.PropertyType == 4){ this.gallery = new Viewer(document.getElementById('viewerjs'),{ url: 'data-original' }); } }) }, 0); //从颜色中取出透明度 let color = obj.Color let strh = color.substring(color.length -2,color.length) let opacity = Math.round(parseInt(strh,16)/255 * 100) this.colorDivSliderValue = opacity this.isShowProperty = true this.isShowAttribute = false let _this = this this.imagesArr = [] this.imagesArrNum = "" this.canvasAssetObj = obj //将选中素材对象存到本地变量 this.assetName = obj.Name this.assetWidth = obj.Width this.assetHeight = obj.Height this.sliderValue = obj.Angle this.selectedcolor = obj.Color this.PropertyInfos = obj.PropertyInfos this.sliderValueThickness = obj.Thickness this.PropertyInfos.forEach(item => { if(item.PropertyType == 3){ //如果是图片链接类型 this.imagesArr.push(item) } if(item.PropertyType == 4){//图片数值上线 this.imagesArrNum = item.PropertyValue } }) //如果存在图片则加载轮播图 if(this.imagesArr.length){ setTimeout(() => { this.mySwiper = new Swiper('.swiper-container',{ loop: false, // grabCursor: true, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, on:{ click: function(){ _this.clickedIndex = this.clickedIndex }, } }); }, 0); } //判断此时图片数量是否达到上限 if(this.imagesArr.length < this.imagesArrNum){//如果不超出 this.isImgNumCss = true }else{ this.isImgNumCss = false } } pattern:boolean = false//默认为基本信息编辑 //基本信息编辑模式 baseInfo(){ if (!this.pattern) { this.basicInfo = true this.canvas.setNameVisible(this.basicInfo,1) this.pattern = true this.canvasData.gameMode = GameMode.BasicInformation this.canvasData.selectPanelPoint = new DisposalNodeData(); this.mateDeleteCustomize() this.getAllLibrary() this.checkedBuildingIndex = -1 this.getSitePlan() //总平面图一层 } } //想定作业编辑模式 wantWork(){ if (this.pattern) { //让基本信息图标显示 this.basicInfo = false this.canvas.setNameVisible(this.basicInfo,0) this.pattern = false this.canvasData.gameMode = GameMode.Assignment this.getAllLibrary('plan') this.getDisposalNode() } } //ngzorro tree 拖拽 nzEvent(event: NzFormatEmitEvent): void { if(this.isDrag){ let parentId if(this.pos == 0){ parentId = event.node.key }else{ if(event.node.level == 0){ parentId = null }else{ parentId = event.node.origin.parentId } } let orders = {} let originalData = JSON.parse(JSON.stringify( this.canvasData.allDisposalNode || [] )) //tree原始数据 let targetNodeData = []//拖动移入节点的数据，用于遍历求出放在该数组的第几位 //找到需要重新排序的数组 if(this.pos == 0){ originalData.forEach(item => { if(item.parentId == event.node.key){ targetNodeData.push(item) } }) }else{ if(event.node.origin.parentId){//如果拖动目标为非一级节点 originalData.forEach(item => { if(item.parentId == event.node.origin.parentId){ targetNodeData.push(item) } }) }else{//如果拖动目标为一级节点 originalData.forEach(item => { if(!item.parentId){ targetNodeData.push(item) } }) } } let idArr = [] targetNodeData.forEach(i => { idArr.push(i.id) }) console.log(6666666666666,event); if(this.pos == 0 && event.node.origin.children.length == 1){ console.log("移入,没有兄弟") let key = event.dragNode.key orders[key] = 0 parentId = event.node.key }else{ console.log("移入,多个兄弟") let array = [] targetNodeData.forEach(item => { if(item.id != event.dragNode.key){ //将拖动项先移除掉 array.push(item) } }) if(event.dragNode.isEnd[event.dragNode.isEnd.length - 1]){ //如果移入到最后一个 console.log("最后") array.push(event.dragNode.origin) }else if(event.dragNode.isStart[event.dragNode.isStart.length - 1]){//如果移入到第一个 console.log("第一") array.unshift(event.dragNode.origin) }else{//如果移入中间位置 console.log("中间") array.splice(event.node.origin.order, 0, event.dragNode.origin) } array.forEach((item,key) => { orders[item.id] = key }) } let obj ={ id : event.dragNode.origin.id, parentId : parentId, orders : orders } this.http.put("/api/DisposalNodes/Sort",obj).subscribe(data => { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('排序成功','确定',config) this.refurbishTreeData() }) } } isDrag //是否可以拖动 pos//放置位置 beforeDrop = (arg: NzFormatBeforeDropEvent) => { if(arg.dragNode.origin.isDataNode && arg.node.level === 0){//如果为数据节点则不允许拖到一级节点 const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('数据节点不允许拖拽到一级节点','确定',config) this.isDrag = false return of(false); }else if(!arg.dragNode.origin.isDataNode && arg.node.level === 2){ const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('处置节点不允许拖拽到三级节点','确定',config) this.isDrag = false return of(false); }else{ this.isDrag = true this.pos = arg.pos return of(true) } } //ngzorro tree 拖拽 //天气栏目 weatherBtn = true weatherBtnShow(){ this.weatherBtn = !this.weatherBtn } weatherBtnHidden(){ this.weatherBtn = !this.weatherBtn } //底部切换按钮div detailsAndattentBtn = true //节点详情 details(){ this.detailsAndattentBtn = true } //注意事项 attent(){ this.detailsAndattentBtn = false } //消防要素div边框高度调节 firecategoriesDivMouseDown(e){ document.onmousemove = (ev) => { let bodyHeight = document.body.clientHeight //网页宽度 let maxHeight = this.element.nativeElement.querySelector('#rightDiv').clientHeight - 35 //最大宽度 if(bodyHeight - ev.clientY >= maxHeight){ this.element.nativeElement.querySelector('#firecategories').style.height = maxHeight+ 'px' this.element.nativeElement.querySelector('#property').style.height = 35+ 'px' }else{ this.element.nativeElement.querySelector('#firecategories').style.height = (bodyHeight - ev.clientY) + 'px' ; this.element.nativeElement.querySelector('#property').style.height = (this.element.nativeElement.querySelector('#rightDiv').clientHeight - this.element.nativeElement.querySelector('#firecategories').clientHeight) + 'px' } } document.onmouseup = () => { document.onmousemove = null; document.onmouseup = null; } } //左侧div边框宽度调节 leftDivMouseDown(e){ document.onmousemove = (ev) => { let bodyWidth = document.body.clientWidth //网页宽度 let maxWidth = bodyWidth - 260 - this.element.nativeElement.querySelector('#rightDiv').clientWidth //最大宽度 if(ev.clientX - 240 >= maxWidth){ this.element.nativeElement.querySelector('#leftDiv').style.width = maxWidth + 'px' }else{ this.element.nativeElement.querySelector('#leftDiv').style.width = ev.clientX - 260 + 'px'; } } document.onmouseup = () => { document.onmousemove = null; document.onmouseup = null; } } //底部div高度调节 bottomDivMouseDown(e){ document.onmousemove = (ev) => { let bodyHeight = document.body.clientHeight //网页高度 let maxHeight = this.element.nativeElement.querySelector('#rightDiv').clientHeight //最大高度 if(bodyHeight - ev.clientY >= maxHeight){ this.element.nativeElement.querySelector('#bottomDiv').style.height = maxHeight + 'px' }else{ this.element.nativeElement.querySelector('#bottomDiv').style.height = (bodyHeight - ev.clientY) + 'px' ; } } document.onmouseup = () => { document.onmousemove = null; document.onmouseup = null; } } //右侧div边框宽度调节 rightDivMouseDown(e){ document.onmousemove = (ev) => { let bodyWidth = document.body.clientWidth //网页宽度 let maxWidth = bodyWidth - 240 - this.element.nativeElement.querySelector('#leftDiv').clientWidth //最大宽度 if(bodyWidth - ev.clientX >= maxWidth){ this.element.nativeElement.querySelector('#rightDiv').style.width = maxWidth + 'px' }else{ this.element.nativeElement.querySelector('#rightDiv').style.width = bodyWidth - ev.clientX + 'px'; } } document.onmouseup = () => { document.onmousemove = null; document.onmouseup = null; } } //放大图标 iconScale(){ let number = Number(this.selected) this.canvas.setIconScale(number) } //素材宽度输入框改变 assetWidthIunput(){ this.canvasAssetObj.Width = this.assetWidth this.canvasData.isChange = true this.canvas.refreshIcon(this.canvasAssetObj.Id) } //素材高度输入框改变 assetHeightIunput(){ this.canvasAssetObj.Height = this.assetHeight this.canvasData.isChange = true this.canvas.refreshIcon(this.canvasAssetObj.Id) } //素材角度输入框改变 assetAngleIunput(){ this.canvasAssetObj.Angle = this.sliderValue this.canvasData.isChange = true this.canvas.refreshIcon(this.canvasAssetObj.Id) } //素材厚度输入框改变 assetThicknessIunput(){ this.canvasAssetObj.Thickness = this.sliderValueThickness this.canvasData.isChange = true this.canvas.refreshIcon(this.canvasAssetObj.Id) } //素材是否高亮改变----->本地操作行为 assetHighLightIunput(){ } //动态属性素材input框值改变 assetInputChange(i,e){ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ return i.PropertyName == item.PropertyName }) this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value this.canvasData.isChange = true this.canvas.refreshIcon(this.canvasAssetObj.Id) } //动态属性素材布尔值框改变radio assetRadioChange(i,boolean){ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ return i.PropertyName == item.PropertyName }) this.canvasAssetObj.PropertyInfos[index].PropertyValue = boolean this.canvasData.isChange = true } colorIndex//默认素材颜色 selectedcolor//点击选择的颜色 //选择素材颜色 selectcolor(item,key){ //在当前透明度基础上改变颜色 this.selectedcolor = item + this.selectedcolor.substring(this.selectedcolor.length-2) this.canvasAssetObj.Color = this.selectedcolor this.canvasData.isChange = true this.canvas.refreshIcon(this.canvasAssetObj.Id) } //颜色选择滑竿的值 colorDivSliderValue colorDivSliderChange(){ let colorOpacity = Math.round(255 * this.colorDivSliderValue * 0.01) //根据滑竿值改变16进制颜色后两位 function replacepos(text,start,stop,replacetext){ let mystr = text.substring(0,stop-1)+replacetext+text.substring(stop+1); return mystr; } this.selectedcolor = replacepos(this.selectedcolor,7,8,colorOpacity.toString(16)) this.canvasAssetObj.Color = this.selectedcolor this.canvasData.isChange = true this.canvas.refreshIcon(this.canvasAssetObj.Id) } //查看图片详情 lookImg(){ const dialogRef = this.dialog.open(ViewDetailss, {//调用open方法打开对话框并且携带参数过去 data: {imagesArr:this.imagesArr,index:this.clickedIndex} }); dialogRef.afterClosed().subscribe(data=>{ }); } //上传素材图片 selectFile(e){ let imgFile = e.target.files[0] || null //上传的文件 this.startUploading(imgFile) } objectName:any //上传对象名 startUploading (imgFile) { let _this = this let file = imgFile || null //获取上传的文件 let fileSize = file.size || null //上传文件的总大小 let shardSize = 5 * 1024 * 1024 //5MB一个分片 let companyId = sessionStorage.getItem("companyId") if (file && fileSize <= shardSize) { //上传文件<=5MB时 let formData = new FormData() formData.append("file",file) this.http.post(`api/Objects/WebPlan2D/${companyId}`,formData).subscribe((data:any)=>{ this.objectName = data.objectName const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('上传成功','确定',config) //在原始素材对象和需要循环图片的对象中分别push最新上传的图片 let imgObj = { "Tag": null, "Order": 0, "Enabled": false, "Visible": false, "Required": false, "RuleName": null, "RuleValue": null, "PhysicalUnit": null, "PropertyName": "图片", "PropertyType": 3, "PropertyValue": "/api/Objects/WebPlan2D/" + this.objectName } this.imagesArr.push(imgObj) this.canvasAssetObj.PropertyInfos.push(imgObj) setTimeout(() => { this.mySwiper = new Swiper('.swiper-container',{ loop: false, // grabCursor: true, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, on:{ click: function(){ _this.clickedIndex = this.clickedIndex }, } }); this.mySwiper.slideTo(this.imagesArr.length - 1) this.gallery.update() }, 0); //判断上传素材属性图片是否超出数量 超出数量则隐藏input框 if(this.imagesArr.length < this.imagesArrNum){//不超出input才会显示 this.isImgNumCss = true }else{ this.isImgNumCss = false } this.canvasData.isChange = true }) } else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传 let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('上传图片文件不允许大于5mb','确定',config); } } //不能上传图片提示 imgNumBeyond(){ const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('图片数量已达上限','确定',config); } //删除素材属性图片 deleteImg(){ if(this.imagesArr.length == 0){ const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('没有可删除的图片，请先上传','确定',config) }else{ // 在素材原始对象中将删除的图片去掉 this.canvasAssetObj.PropertyInfos = [...this.canvasAssetObj.PropertyInfos.filter((item)=>{ return item.PropertyValue != this.imagesArr[this.mySwiper.activeIndex].PropertyValue })] //在图片循环数组中将图片去掉 this.imagesArr.splice(this.mySwiper.activeIndex, 1); //更新swiper视图 setTimeout(() => { this.mySwiper.update(); this.gallery.update() }, 0); //将上传的input框显示出来 this.isImgNumCss = true; //清除图片缓存 if((document.getElementById('inputimg'))){ (document.getElementById('inputimg')).value = null //清空input框缓存 } this.canvasData.isChange = true } } //动态属性方向select选择框 direction(i,e){ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ return i.PropertyName == item.PropertyName }) this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value this.canvasData.isChange = true } //动态属性供给区域select选择框 supplyArea(i,e){ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ return i.PropertyName == item.PropertyName }) this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value this.canvasData.isChange = true } //动态属性供给类型select选择框 supplyType(i,e){ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ return i.PropertyName == item.PropertyName }) this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value this.canvasData.isChange = true } isSixShow = true isSixbtn = true //控制想定作业编辑按钮 isxxx = true //控制查看编辑模式的编辑模式按钮 examMsg = { //单位,考试信息 conpanyName: sessionStorage.getItem('companyName') || '暂无数据', //单位名称 keynote: '', //考试要点 } ngOnInit(): void { this.getAllLibrary('plan') //获取素材库 this.getAllBuildings() //获取所有建筑 this.getAllFirePlan() //获取当前单位灾情 let that = this window.setTimeout(()=>{ document.getElementById("functionalDomainContent").oncontextmenu = function (event) { // that.canvas.cancelPaint() that.selectImageIndex = -1 event.preventDefault(); }; }) this.canvasData.getMessage().subscribe((message: any)=>{ if(message == "send a message"){ this.refurbishTreeData() } }) } ngAfterViewInit(): void { this.getSitePlan() //获取总平面图/楼层 // 监听canvas组件选中素材事件 this.canvas.on("select",obj=>{ //选中素材属性注入函数 this.setAssetsProperty(obj.assetData) }) // 监听canvas组件取消选中素材事件 this.canvas.on("deselect",obj=>{ this.isShowProperty = false }) // 监听canvas组件新增素材事件 this.canvas.on("createIcon",obj=>{ this.renovateTreeData(false) }) // 监听canvas组件删除素材事件 this.canvas.on("deleteIcon",obj=>{ this.renovateTreeData(false) }) } copyAssetData:any //存储用于复制的素材 //复制素材 copyAsset(){ this.canvas.copy() } //粘贴素材 pasteAsset(){ let companyId = sessionStorage.getItem("companyId") let buildingId = this.beforeOneCheckedBuilding.id let floorId = this.selectingSitePlan.id this.canvas.paste(companyId,buildingId,floorId) } basicInfo:boolean = true //基本信息名称显隐 wantToWork:boolean = true //想定作业名称显隐 //点击基本信息名称 basicInfoClick(){ this.basicInfo = !this.basicInfo this.canvas.setNameVisible(this.basicInfo,0) } //点击想定作业名称 wantToWorkClick(){ this.wantToWork = !this.wantToWork this.canvas.setNameVisible(this.wantToWork,1) } isEditPattern:boolean = true //是否为编辑模式 //进入编辑模式 editpat(){ let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('进入编辑模式','确定',config); this.isEditPattern = true } //进入查看模式 lookpat(){ let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('进入查看模式','确定',config); this.isEditPattern = false } //保存平面图 saveNum :any = [] saveSite(){ if (this.selectingSitePlan && this.selectingSitePlan.id) { this.saveNum = [] let SitePlanData = JSON.parse(JSON.stringify(this.canvasData.originaleveryStoreyData)); SitePlanData.data = JSON.stringify(SitePlanData.data) let CompanyData = JSON.parse(JSON.stringify(this.canvasData.originalcompanyBuildingData)); CompanyData.data = JSON.stringify(CompanyData.data) let object = this.canvasData.originalcompanyBuildingData.data let adjoinArr = [] //毗邻数组 if(this.pattern){//如果是基本信息编辑模式 return true }else{//如果是想定作业编辑模式 const dialogRef = this.dialog.open(saveOneDialog, { data: { allDisposalNode: this.canvasData.allDisposalNode, selectedBuildingData:this.beforeOneCheckedBuilding, selectedSiteData:this.selectingSitePlan, siteOrbuilding:this.checkedBuildingIndex, disasterId: this.allFirePlan[0].id || '' } }); dialogRef.afterClosed().subscribe(result => { console.log('The dialog was closed'); }); } } else { //if const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('暂无楼层数据','确定',config); } } //获得所有的建筑物 getAllBuildings(){ this.http.get("/api/Buildings",{ params:{ companyId : this.params.companyId } }).subscribe(data=>{ this.allBuildings = data }) } //创建建筑 createBuilding(){ let data = { allBuildings:this.allBuildings, companyId :this.params.companyId } let dialogRef = this.dialog.open(CreateBuilding,{data}); dialogRef.afterClosed().subscribe(data=>{ if (data == "创建成功") { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('创建成功','确定',config); this.getAllBuildings() }else if (data == "创建失败") { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('创建失败','确定',config); } }); } //选择建筑 checkedBuilding(item,index){ if (this.checkedBuildingIndex!=index) { if (this.canvasData.isChange) { //true 数据被改动 let isTrue = confirm('是否保存当前编辑数据') if (isTrue) { //先保存数据 在切换 let isSuccess = this.saveSite()//true的时候 先保存数据 if (isSuccess != false) { this.beforeOneCheckedBuilding = item this.checkedBuildingIndex = index if (index==-1) { //总平面图数据 this.getSitePlan() } else { //建筑楼层/区域数据 this.getBuildingSitePlan(item) } } } else { this.beforeOneCheckedBuilding = item this.checkedBuildingIndex = index if (index==-1) { //总平面图数据 this.getSitePlan() } else { //建筑楼层/区域数据 this.getBuildingSitePlan(item) } } } else { //flase 数据未被改动 this.beforeOneCheckedBuilding = item this.checkedBuildingIndex = index if (index==-1) { //总平面图数据 this.getSitePlan() } else { //建筑楼层/区域数据 this.getBuildingSitePlan(item) } } //if } //if } //编辑建筑 editBuilding(e,item){ e.stopPropagation(); let dialogRef = this.dialog.open(EditBuilding,{data: {item:item}}); dialogRef.afterClosed().subscribe(data=>{ if (data == "修改成功") { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('修改成功','确定',config); this.getAllBuildings() }else if (data == "修改失败") { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('修改失败','确定',config); } }); } //删除建筑 deleteBuilding(e,item){ e.stopPropagation(); if(confirm("是否删除该建筑") == true){ let isHave = this.canvasData.allDisposalNode.find(items=>{ return items.buildingId === item.id }) if (isHave == undefined) { this.http.delete(`/api/Buildings/${item.id}`).subscribe(data=>{ const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('删除成功','确定',config); this.http.get("/api/Buildings",{ params:{ companyId :this.params.companyId } }).subscribe(data=>{ this.allBuildings = data this.beforeOneCheckedBuilding = {name:"总平面图"} this.checkedBuildingIndex = -1 this.getSitePlan() }) },err=>{ const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('删除失败','确定',config); this.getAllBuildings() }) } else { //建筑 含有数据节点时 const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('含有数据节点的建筑不允许删除','确定',config); } } } storeyData //将建筑素材和当前楼层素材合二为一 //处理 tree 数据结构 handleTreeData (storeyData) { //storeyData为当前楼层拥有的消防设施 this.storeyData = storeyData let data = JSON.parse(JSON.stringify(this.allFireElements)) //所有消防要素模板 console.log(data) let treeData = [] //tree型 处理完成后的数据 data.forEach(element => { element.key = element.id element.isTemplate = true //添加模板标识 element.isLook = true //添加是否可见标识 element.name != '其他' ? element.children = [] : null if(storeyData){ for(let key in storeyData.data){ storeyData.data[key].isLookPattern = true if(element.id == storeyData.data[key].FireElementId){ storeyData.data[key].isTemplate = false storeyData.data[key].isLook = true element.isNewElement = true //该节点children是否存在新添加的真实素材 标识 //定义查看模式下能看到的元素 element.isLookPattern = true if(element.parentId){ data.forEach(i => { if(i.id == element.parentId){ i.isLookPattern = true } }) } element.children.push(storeyData.data[key]) } } } data.forEach(item => { if (item.parentId == element.id) {element.children.push(item)} }); }); data.forEach(element => { if (!element.parentId) { treeData.push(element) } }); function recursionFilterEmpty(originalList, result) {       for(let i = 0, length = originalList.length; i < length; i++) {           const item = originalList[i];           if (item.PropertyInfos) {               // 最内层               result.push(item);           } else if (item.children && item.children.length) {               const newChildren = [];               // 递归调用，底层的真实数据会全部 push 进 newChildren 中               recursionFilterEmpty(item.children, newChildren);               if (newChildren.length) {                   // 替换原始数据                   item.children = newChildren;                   // 子项有真实的数据，就保留这一项                   result.push(item);               } // 如果没有这一项就会被删除           }       }   }      function filterEmpty(listData) {       const result = [];       recursionFilterEmpty(listData, result);       return result;   } console.log(filterEmpty(treeData)) this.dataSource.data = filterEmpty(treeData) this.treeControl.expandAll() } //点击树节点 clickTreeNode(node){ if(this.canvasData.originalcompanyBuildingData.data[node.id]){ this.setAssetsProperty(this.canvasData.originalcompanyBuildingData.data[node.id]) }else if(this.canvasData.originaleveryStoreyData.data[node.id]){ this.setAssetsProperty(this.canvasData.originaleveryStoreyData.data[node.id]) } // console.log(node) // canvas上的素材高亮 let iconHighLightArr:any = [] if(node.isTemplate){//如果是模板,则开始向下找 node.children.forEach(item => { if(item.isTemplate){//如果子节点依旧是模板,则继续开始向下找 item.children.forEach(i => { iconHighLightArr.push(i.Id) }) }else{ iconHighLightArr.push(item.Id) } }) }else{ iconHighLightArr.push(node.id) } // console.log(456,iconHighLightArr) this.canvas.setHighlight(iconHighLightArr) } //点击树节点的显示隐藏icon clickLookItem(node){ //修改真实素材islook属性 for(let key in this.storeyData.data){ if(key == node.id){ this.storeyData.data[key].isLook = !this.storeyData.data[key].isLook } } //所有消防要素模板变化islook值 if(node.isTemplate && node.name == "其他"){ this.allFireElements.forEach(item=>{ if(item.name == "其他"){ item.isLook = !item.isLook } }) } if(node.isTemplate){ this.allFireElements.forEach(item=>{ if(item.id == node.id){ item.isLook = !item.isLook } }) } //子节点跟随父节点的islook变化   if(node.children && node.children.length != 0){       node.children.forEach(item=>{         item.isLook = !node.isLook          if(item.children && item.children.length != 0){           item.children.forEach(i=>{             i.isLook =  !node.isLook            })         }       })      } const nodes = this.treeControl.dataNodes; const expandNodes = []; nodes.forEach((item) => { if(item.expandable && this.treeControl.isExpanded(item)){ expandNodes.push(item.id); } }); this.dataSource.data = [...this.dataSource.data] let newNodes = this.treeControl.dataNodes; newNodes = newNodes.filter(n => { return expandNodes.indexOf(n.id) >= 0; }); newNodes.forEach(item => { this.treeControl.expand(item); }); //canvas上的素材显隐 let iconVisibleArr:any = [] if(node.isTemplate){//如果是模板,则开始向下找 node.children.forEach(item => { if(item.isTemplate){//如果子节点依旧是模板,则继续开始向下找 item.children.forEach(i => { iconVisibleArr.push(i.Id) }) }else{ iconVisibleArr.push(item.Id) } }) }else{ iconVisibleArr.push(node.id) } console.log(1,iconVisibleArr) console.log(2,node.isLook) this.canvas.setIconVisible(iconVisibleArr,!node.isLook) } //打开消防设施考题设定 openFireExamination () { console.log(1,this.beforeOneCheckedBuilding) let treeData = JSON.parse( JSON.stringify(this.dataSource.data) ) let buildFloorData = { buildingData:this.beforeOneCheckedBuilding, floorData:this.selectingSitePlan } let data = { treeData: treeData,oldRealData:this.storeyData ,buildFloorData:buildFloorData} let dialogRef = this.dialog.open(examinationQuestions,{data}); } //上传考题 openUploadQuestions () { let treeData = JSON.parse( JSON.stringify(this.dataSource.data) ) let nodes = JSON.parse( JSON.stringify( JSON.parse(sessionStorage.getItem('examNodeList')) ) ) if (treeData && nodes) { let data = { treeData: treeData, question: JSON.parse( JSON.stringify(this.examMsg) ), node: nodes } let dialogRef = this.dialog.open(uploadQuestions,{data}); } } //封装 刷新 tree 数据 async renovateTreeData (isRefresh:boolean = true) { this.allFireElements[this.allFireElements.length-1].children = [] this.beforeOneCheckedBuildingIsShow = false isRefresh? await this.canvas.refresh() : null this.canvas.setNameVisible(this.basicInfo,0) this.canvas.setNameVisible(this.wantToWork,1) isRefresh? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false isRefresh? this.isShowProperty = true : null isRefresh? this.isShowAttribute = true : null let beforeOneId = this.selectingSitePlan.id || '' //当前 选中 平面图 楼层/区域 id let companyBuildingData = JSON.parse(JSON.stringify( this.canvasData.originalcompanyBuildingData || {} )) // 当前 单位/建筑 数据 let storeyData = JSON.parse(JSON.stringify( this.canvasData.originaleveryStoreyData || {} )) //当前 楼层 数据 // for(let key in companyBuildingData.data){ // if (companyBuildingData.data[key].FloorId === beforeOneId) { //处理 单位/建筑 数据是否归于当前楼层下 // storeyData.data[key] = companyBuildingData.data[key] // } // } for(let key in storeyData.data){ //筛选数据 没有匹配全部放入到 其他 数组 storeyData.data[key].key = storeyData.data[key].Id let noMatch = this.allFireElements.find( every=> every.id===storeyData.data[key].FireElementId ) if (!noMatch) { this.allFireElements[this.allFireElements.length-1].children.push(storeyData.data[key]) } } this.handleTreeData(storeyData) //处理tree数据结构 } //陈鹏飞↓↓↓ //陈鹏飞↓↓↓ //陈鹏飞↓↓↓ params = {companyId: sessionStorage.getItem('companyId')} allFireElements:any = []; //当前 单位/建筑 下的消防要素 isShowAttribute:boolean = true; //属性栏 是否显示 默认数据 isShowProperty:boolean = false //属性栏 是否有东西 toggleExpandPanel:boolean = false; //左侧可展开面板展开或关闭 toggleExpandPanelRight:boolean = false; //右侧可展开面板展开或关闭 togglePlane:boolean = true; //可展开面板平面图 显隐 toggleMaterialBank:boolean = true; //可展开面板素材库 显隐 toggleHandlePlans:boolean = true; //可展开面板处置预案 显隐 //可展开面板展开或关闭 toggle () { this.toggleExpandPanel = !this.toggleExpandPanel } //可展开面板展开或关闭 toggle2 () { this.toggleExpandPanelRight = !this.toggleExpandPanelRight } //可展开面板 平面图 展开或关闭 togglePlanarGraph () { this.togglePlane = !this.togglePlane } //可展开面板 素材库 展开或关闭 toggleMaterial () { this.toggleMaterialBank = !this.toggleMaterialBank } //可展开面板 处置预案 展开或关闭 toggleHandlePlan () { this.toggleHandlePlans = !this.toggleHandlePlans } sitePlanData:any = []; //总平面图 楼层/区域 数据 selectingSitePlan:any; //选中的 平面图 楼层/区域 selectSitePlanIndex:number; //选中的 平面图 楼层/区域 index //获取总平面图 getSitePlan () { let fireData = this.getFireElements(sessionStorage.getItem('buildingTypeId')) //获取单位下 消防要素 let planData = this.getSitePlanCompanyData() //获取 单位 数据 this.http.get('/api/SitePlans',{params:this.params}).subscribe(data=>{ this.sitePlanData = data this.selectingSitePlan = this.sitePlanData[0] || {} this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据 this.selectSitePlanIndex = 0 Promise.all([fireData,planData]).then((res)=>{ this.getSitePlanStorey(this.selectingSitePlan) //获取 平面图 楼层数据 }) }) } //获取建筑 楼层/区域 getBuildingSitePlan (item) { let params = { buildingId: item.id } let fireData = this.getFireElements(item.buildingTypes[0].id || '') //获取建筑下 消防要素 let planData = this.getBuildingData(params) //获取 建筑 数据 this.http.get('/api/BuildingAreas',{params}).subscribe(data=>{ this.sitePlanData = data this.selectingSitePlan = this.sitePlanData[0] || {} this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据 this.selectSitePlanIndex = 0 Promise.all([fireData,planData]).then((res)=>{ this.getBuildingStorey(this.selectingSitePlan) //获取 建筑 楼层数据 }) }) } //根据单位类型获得所有的消防要素 getFireElements (e) { let params = {ids:e} return new Promise ((resolve,reject)=>{ this.http.get('/api/Companies/FireElements',{params}).subscribe((data:any)=>{ this.allFireElements = data //所有消防要素 let other = { children: [], computed: true, id: '', name: '其他', order: 999, parentId: null, tag: "INPUT", isLookPattern : true } this.allFireElements.push(other) resolve('success') }) }) } //获取 单位 数据 getSitePlanCompanyData () { return new Promise ((resolve,reject)=>{ this.http.get('/api/CompanyData',{params:this.params}).subscribe((data:any)=>{ this.canvasData.originalcompanyBuildingData = data || {} // 单位原数据 this.canvasData.originalcompanyBuildingData.data? this.canvasData.originalcompanyBuildingData.data = JSON.parse(this.canvasData.originalcompanyBuildingData.data) : this.canvasData.originalcompanyBuildingData.data = {} this.canvasData.originalcompanyBuildingData.version? null : this.canvasData.originalcompanyBuildingData.version = "2.0" this.canvasData.originalcompanyBuildingData.companyId? null : this.canvasData.originalcompanyBuildingData.companyId = sessionStorage.getItem('companyId') resolve('success') }) }) } //获取 平面图 楼层数据 getSitePlanStorey (e) { let params = {sitePlanId: e.id} this.http.get(`/api/SitePlanData`,{params}).subscribe((data:any)=>{ this.canvasData.originaleveryStoreyData = data || {} // 楼层原数据 this.canvasData.originaleveryStoreyData.data? this.canvasData.originaleveryStoreyData.data = JSON.parse(this.canvasData.originaleveryStoreyData.data) : this.canvasData.originaleveryStoreyData.data = {} this.canvasData.originaleveryStoreyData.version? null : this.canvasData.originaleveryStoreyData.version = "2.0" this.canvasData.originaleveryStoreyData.sitePlanId? null : this.canvasData.originaleveryStoreyData.sitePlanId = e.id || null this.renovateTreeData() }) } //获取 建筑 数据 getBuildingData (e) { return new Promise ((resolve,reject)=>{ this.http.get(`/api/BuildingData`,{params:e}).subscribe((data:any)=>{ this.canvasData.originalcompanyBuildingData = data || {} // 建筑原数据 this.canvasData.originalcompanyBuildingData.data? this.canvasData.originalcompanyBuildingData.data = JSON.parse(this.canvasData.originalcompanyBuildingData.data) : this.canvasData.originalcompanyBuildingData.data = {} this.canvasData.originalcompanyBuildingData.version? null : this.canvasData.originalcompanyBuildingData.version = "2.0" this.canvasData.originalcompanyBuildingData.buildingId? null : this.canvasData.originalcompanyBuildingData.buildingId = e.buildingId resolve('success') }) }) } //获取 建筑 楼层数据 getBuildingStorey (e) { let params = {buildingAreaId: e.id} this.http.get(`/api/BuildingAreaData`,{params}).subscribe((data:any)=>{ this.canvasData.originaleveryStoreyData = data || {} // 楼层原数据 this.canvasData.originaleveryStoreyData.data? this.canvasData.originaleveryStoreyData.data = JSON.parse(this.canvasData.originaleveryStoreyData.data) : this.canvasData.originaleveryStoreyData.data = {} this.canvasData.originaleveryStoreyData.version? null : this.canvasData.originaleveryStoreyData.version = "2.0" this.canvasData.originaleveryStoreyData.buildingAreaId? null : this.canvasData.originaleveryStoreyData.buildingAreaId = e.id || null this.renovateTreeData() }) } //点击选中 平面图 楼层/区域 时 selectSitePlan (item,index) { if (this.selectSitePlanIndex != index) { this.canvasData.selectPanelPoint = new DisposalNodeData(); if (this.canvasData.isChange) { //true 数据被改动 let isTrue = confirm('是否保存当前编辑数据') if (isTrue) { //先保存数据 在切换 let isSuccess = this.saveSite()//true的时候 先保存数据 if (isSuccess != false) { this.selectingSitePlan = item this.selectSitePlanIndex = index this.canvasData.selectStorey = item //服务中 存一份数据 if (this.checkedBuildingIndex==-1) { //总平面图时 this.getSitePlanStorey(item) //获取 平面图 楼层数据 } else { //楼层/区域时 this.getBuildingStorey(item) //获取 建筑 楼层数据 } } } else { //不保存数据 直接切换 this.selectingSitePlan = item this.selectSitePlanIndex = index this.canvasData.selectStorey = item //服务中 存一份数据 if (this.checkedBuildingIndex==-1) { //总平面图时 this.getSitePlanStorey(item) //获取 平面图 楼层数据 this.getSitePlanCompanyData() } else { //楼层/区域时 this.getBuildingStorey(item) //获取 建筑 楼层数据 let params = { buildingId: this.beforeOneCheckedBuilding.id } this.getBuildingData(params) } } } else { //false 数据没被改动 this.selectingSitePlan = item this.selectSitePlanIndex = index this.canvasData.selectStorey = item //服务中 存一份数据 if (this.checkedBuildingIndex==-1) { //总平面图时 this.getSitePlanStorey(item) //获取 平面图 楼层数据 } else { //楼层/区域时 this.getBuildingStorey(item) //获取 建筑 楼层数据 } } //if } } //新增平面图 楼层/区域 foundPanel (e) { e.stopPropagation() let data = { isBuilding: this.checkedBuildingIndex==-1? false:true, Panel: this.beforeOneCheckedBuilding, order: this.sitePlanData.length? this.sitePlanData[this.sitePlanData.length-1].order+1:0, } let dialogRef = this.dialog.open(leftFunctionalDomainComponent,{data}); dialogRef.afterClosed().subscribe(data=>{ if (data =='总平面图') { this.renovateSitePlan() } else if (data =='建筑') { this.renovateBuilding() } }) } //编辑平面图 楼层/区域 editPlaneData (e) { let data = { isBuilding: this.checkedBuildingIndex==-1? false:true, Panel: this.beforeOneCheckedBuilding, buildingData: e, } let dialogRef = this.dialog.open(editPlaneFigureComponent,{data}); dialogRef.afterClosed().subscribe(data=>{ if (data =='总平面图') { this.renovateSitePlan() } else if (data =='建筑') { this.renovateBuilding() } }) } //平面图 楼层/区域 上移 moveUp (item,index) { if (index != 0) { let replaceIndex = this.sitePlanData[index].order this.sitePlanData[index].order = this.sitePlanData[index-1].order this.sitePlanData[index-1].order = replaceIndex if (this.checkedBuildingIndex==-1) { //总平面图 this.http.put(`/api/SitePlans/${this.sitePlanData[index-1].id}`,this.sitePlanData[index-1]).subscribe(data=>{ this.http.put(`/api/SitePlans/${this.sitePlanData[index].id}`,this.sitePlanData[index]).subscribe(data=>{ this.selectSitePlanIndex = this.selectSitePlanIndex-1 this.renovateSitePlan() }) }) } else { //楼层/区域 this.http.put(`/api/BuildingAreas/${this.sitePlanData[index-1].id}`,this.sitePlanData[index-1],{params:this.params}).subscribe(data=>{ this.http.put(`/api/BuildingAreas/${this.sitePlanData[index].id}`,this.sitePlanData[index],{params:this.params}).subscribe(data=>{ this.selectSitePlanIndex = this.selectSitePlanIndex-1 this.renovateBuilding() }) }) } } //if index } //平面图 楼层/区域 下移 moveDown (item,index) { if (index != this.sitePlanData.length-1) { let replaceIndex = this.sitePlanData[index].order this.sitePlanData[index].order = this.sitePlanData[index+1].order this.sitePlanData[index+1].order = replaceIndex if (this.checkedBuildingIndex==-1) { //总平面图 this.http.put(`/api/SitePlans/${this.sitePlanData[index+1].id}`,this.sitePlanData[index+1]).subscribe(data=>{ this.http.put(`/api/SitePlans/${this.sitePlanData[index].id}`,this.sitePlanData[index]).subscribe(data=>{ this.selectSitePlanIndex = this.selectSitePlanIndex+1 this.renovateSitePlan() }) }) } else { //楼层/区域 this.http.put(`/api/BuildingAreas/${this.sitePlanData[index+1].id}`,this.sitePlanData[index+1],{params:this.params}).subscribe(data=>{ this.http.put(`/api/BuildingAreas/${this.sitePlanData[index].id}`,this.sitePlanData[index],{params:this.params}).subscribe(data=>{ this.selectSitePlanIndex = this.selectSitePlanIndex+1 this.renovateBuilding() }) }) } } //if index } //旋转底图 revolveImg (item) { item.imageAngle==270? item.imageAngle = 0 : item.imageAngle = item.imageAngle+90 if (this.checkedBuildingIndex==-1) { //总平面图 this.http.put(`/api/SitePlans/${item.id}`,item).subscribe(data=>{ let isSuccess = this.renovateSitePlan() isSuccess.then(res=>{ this.canvas.refreshBackgroundImage() }) }) } else { //楼层/区域 this.http.put(`/api/BuildingAreas/${item.id}`,item,{params:this.params}).subscribe(data=>{ let isSuccess = this.renovateBuilding() isSuccess.then(res=>{ this.canvas.refreshBackgroundImage() }) }) } } //删除 平面图 楼层/区域 deletePlaneData (item) { const isDelete = confirm('您确定要删除吗'); if (isDelete) { if (this.checkedBuildingIndex==-1) { //总平面图 let isHave = this.canvasData.allDisposalNode.find(items=>{ return items.sitePlanId === item.id }) if (isHave == undefined) { this.http.delete(`/api/SitePlans/${item.id}`).subscribe(data=>{ this.deleteShareData(item,-1) }) } else { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('含有数据节点的楼层不允许删除','确定',config); } } else { //楼层/区域 let isHave = this.canvasData.allDisposalNode.find(items=>{ return items.buildingAreaId === item.id }) if (isHave == undefined) { this.http.delete(`/api/BuildingAreas/${item.id}`).subscribe(data=>{ this.deleteShareData(item,1) }) } else { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('含有数据节点的楼层不允许删除','确定',config); } } } } //删除当前 单位/建筑的 共享数据中 已删除data deleteShareData (e,isCompany) { this.sitePlanData.forEach((element,index) => { if (element.id===e.id) { this.sitePlanData.splice(index,1) return } }); let data = this.canvasData.originalcompanyBuildingData; for(let key in data.data){ if (data.data[key].FloorId === e.id) { //处理 单位/建筑 数据是否归于当前楼层下 delete data.data[key] } } let newData = JSON.parse(JSON.stringify(this.canvasData.originalcompanyBuildingData)); newData.data = JSON.stringify(newData.data) // 转换JSON 数据格式 this.selectingSitePlan = this.sitePlanData[0] || {} this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据 this.selectSitePlanIndex = 0 this.canvasData.isChange = false if (isCompany===-1) { this.http.post("/api/CompanyData",newData).subscribe(data => {}) this.getSitePlanStorey(this.selectingSitePlan) //获取 平面图 楼层数据 } else { this.http.post("/api/BuildingData",newData,{params:this.params}).subscribe(data => {}) this.getBuildingStorey(this.selectingSitePlan) //获取 建筑 楼层数据 } } //复制图层 平面图 楼层/区域 duplicateLayer (item) { if (this.checkedBuildingIndex==-1) { //总平面图 item.id = "" item.modifiedTime = new Date() item.name = item.name + '(副本)' item.order = this.sitePlanData[this.sitePlanData.length-1].order+1 this.http.post('/api/SitePlans',item).subscribe((data:any)=>{ let newData = { version: this.canvasData.originaleveryStoreyData.version || "2.0", id: "", data: JSON.stringify( JSON.parse(JSON.stringify(this.canvasData.originaleveryStoreyData.data)) ) || null, sitePlanId: data.id } this.http.post('/api/SitePlanData',newData,{params:this.params}).subscribe(data=>{ this.renovateSitePlan() }) }) } else { //楼层/区域 item.id = "" item.modifiedTime = new Date() item.name = item.name + '(副本)' item.order = this.sitePlanData[this.sitePlanData.length-1].order+1 this.http.post('/api/BuildingAreas',item,{params:this.params}).subscribe((data:any)=>{ let newData = { version: this.canvasData.originaleveryStoreyData.version || "2.0", id: "", data: JSON.stringify( JSON.parse(JSON.stringify(this.canvasData.originaleveryStoreyData.data)) ) || null, buildingAreaId: data.id } this.http.post('/api/BuildingAreaData',newData,{params:this.params}).subscribe(data=>{ this.renovateBuilding() }) }) } } //平面图 楼层/区域 替换底图 replaceBaseMap (e,item) { e.stopPropagation(); let file = e.target.files[0] || null //获取上传的文件 let fileSize = file.size || null //上传文件的总大小 let maxSize = 5 * 1024 * 1024 //5MB一个分片 if (file && fileSize<=maxSize) { //上传文件<=5MB时 let formData = new FormData() formData.append("file",file) this.http.post(`/api/Objects/WebPlan2D/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{ this.renovateBaseMap(data.objectName,item) }) } else { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('上传底图需小于5MB','确定',config); } } //封装 替换底图 function renovateBaseMap (e,item) { item.imageUrl = '/api/Objects/WebPlan2D/' + e if (this.checkedBuildingIndex ==-1) { //总平面图 this.http.put(`/api/SitePlans/${item.id}`,item).subscribe(data=>{ let isSuccess = this.renovateSitePlan() isSuccess.then(res=>{ this.canvas.refreshBackgroundImage() }) const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('上传底图成功','确定',config); }) } else { //楼层/区域 this.http.put(`/api/BuildingAreas/${item.id}`,item,{params:this.params}).subscribe(data=>{ let isSuccess = this.renovateBuilding() isSuccess.then(res=>{ this.canvas.refreshBackgroundImage() }) const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('上传底图成功','确定',config); }) } } //封装 刷新总平面图 数据 renovateSitePlan () { return new Promise ((resolve,reject)=>{ this.http.get('/api/SitePlans',{params:this.params}).subscribe(data=>{ this.sitePlanData = data this.selectingSitePlan = this.sitePlanData[this.selectSitePlanIndex] this.canvasData.selectStorey = this.sitePlanData[this.selectSitePlanIndex] //服务中 存一份数据 this.canvasData.originaleveryStoreyData.sitePlanId? null : this.canvasData.originaleveryStoreyData.sitePlanId = this.selectingSitePlan.id || null const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('数据更新成功','确定',config); resolve('success') }) }) } //封装 刷新 楼层/区域 数据 renovateBuilding () { let params = { buildingId: this.beforeOneCheckedBuilding.id } return new Promise ((resolve,reject)=>{ this.http.get('/api/BuildingAreas',{params}).subscribe(data=>{ this.sitePlanData = data this.selectingSitePlan = this.sitePlanData[this.selectSitePlanIndex] this.canvasData.selectStorey = this.sitePlanData[this.selectSitePlanIndex] //服务中 存一份数据 this.canvasData.originaleveryStoreyData.buildingAreaId? null : this.canvasData.originaleveryStoreyData.buildingAreaId = this.selectingSitePlan.id || null const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('数据更新成功','确定',config); resolve('success') }) }) } allLibrary:any = []; //所有素材库 + 素材 selectLibrary:any; //选中的素材库 selectImage:any; //选中的素材库图片 selectImageIndex:number; //选中的素材库图片index //获取素材库 getAllLibrary (type:string='input') { this.http.get(`/api/AssetLibraries?tag=${type}`).subscribe((data:any)=>{ data.forEach(element => { element.images = [] }); this.allLibrary = data this.selectImageIndex = -1 // this.canvas.cancelPaint() }) } //素材库展开面板展开时 opened (e) { if (!e.images.length) { //当前素材库没加载素材时 this.http.get(`/api/Assets?libraryId=${e.id}`).subscribe((data:any)=>{ e.images = data }) } } //点击选中素材库图片时 selectImg (item,items,index) { this.selectLibrary = item.name this.selectImage = items this.selectImageIndex = index this.canvasData.selectTemplateData = items this.canvas.beginPaint() } //处置预案 examType = this.route.snapshot.queryParams.openType // 预案类型 1=已存在/2=自定义 allFirePlan:any = []; //所有灾情 selectDisposalNode:string = ''; //当前点击tree节点 css选中样式 //获取所有灾情 getAllFirePlan () { let api this.examType == 1? api='/api/Disasters' : api='/api/ExamDisasters' let params = {componentId: sessionStorage.getItem('planId')} this.http.get(api,{params:params}).subscribe((data:any)=>{ if (!data.length) { //该 单位没有灾情时 let msg = { name: '灾情', modifiedTime: new Date(), examPlanComponentId: sessionStorage.getItem('planId') } this.http.post('/api/ExamDisasters',msg).subscribe(data=>{ this.allFirePlan.push(data) this.getDisposalNode() }) } else { //单位 有灾情时 this.allFirePlan = data this.getDisposalNode() } }) } //获取所有处置节点 getDisposalNode () { let api this.examType == 1? api='/api/DisposalNodes' : api='/api/ExamDisposalNodes' this.selectDisposalNode = '' let params this.examType == 1? params = {disasterId: this.allFirePlan[0].id || ''} : params = {examDisasterId: this.allFirePlan[0].id || ''} this.http.get(api,{params:params}).subscribe(data=>{ //处置节点 this.canvasData.allDisposalNode = data this.handleHybridTree() }) } treeData:any = []; //渲染tree处理完成数据 defaultExpandedKeys:any = []; //首次渲染 tree展开状态 //处理 节点 Tree数据 handleHybridTree () { this.defaultExpandedKeys = [] let treeData = [] let data = JSON.parse(JSON.stringify( this.canvasData.allDisposalNode || [] )) data.forEach(element => { this.defaultExpandedKeys.push(element.id) element.title = element.name //name element.key = element.id //id element.children = [] //children if (element.sitePlanId || element.buildingAreaId) { //是数据节点 element.isLeaf = true element.isDataNode = true } else { //不是数据节点 element.isLeaf = false element.isDataNode = false } data.forEach(item=>{ item.parentId === element.id? element.children.push(item) : null }) }); data.forEach(element=>{ !element.parentId? treeData.push(element) : null }) this.treeData = [...treeData] this.defaultExpandedKeys = [...this.defaultExpandedKeys] } //刷新 treeData 保存已展开节点 refurbishTreeData () { let api this.examType == 1? api='/api/DisposalNodes' : api='/api/ExamDisposalNodes' this.defaultExpandedKeys = [] let params this.examType == 1? params = {disasterId: this.allFirePlan[0].id || ''} : params = {examDisasterId: this.allFirePlan[0].id || ''} this.http.get(api,{params:params}).subscribe(nodeData=>{ //处置节点 this.canvasData.allDisposalNode = nodeData let oldTreeData = this.nzTreeComponent.getExpandedNodeList() oldTreeData.forEach(item=>{ this.defaultExpandedKeys.push(item.key) }) let treeData = [] let data = JSON.parse(JSON.stringify( this.canvasData.allDisposalNode || [] )) data.forEach(element => { element.title = element.name //name element.key = element.id //id element.children = [] //children if (element.sitePlanId || element.buildingAreaId) { //是数据节点 element.isLeaf = true element.isDataNode = true } else { //不是数据节点 element.isLeaf = false element.isDataNode = false } data.forEach(item=>{ item.parentId === element.id? element.children.push(item) : null }) }); data.forEach(element=>{ !element.parentId? treeData.push(element) : null }) this.treeData = [...treeData] this.defaultExpandedKeys = [...this.defaultExpandedKeys] }) } sitePlanIcon = {fire:0,force:0} // 总平面图 火源/力量 图标 是否展示 //刷新 建筑楼层 匹配 火源/力量 图标 mateFireForce () { let data = this.canvasData.allNodeMarkers.markers || {} for(let key in data){ //遍历 火/力量 图标 this.sitePlanData.forEach(element => { //楼层 if (element.id==key) { // 相匹配时 data[key].fireCount != 0? element.fire=1 : element.fire=0 data[key].forceCount != 0? element.force=1 : element.force=0 } }); this.allBuildings.forEach(element => { //建筑 if (element.id==key) { // 相匹配时 data[key].fireCount != 0? element.fire=1 : element.fire=0 data[key].forceCount != 0? element.force=1 : element.force=0 } }); if (this.params.companyId==key) { //总平面图时 data[key].fireCount != 0? this.sitePlanIcon.fire=1 : this.sitePlanIcon.fire=0 data[key].forceCount != 0? this.sitePlanIcon.force=1 : this.sitePlanIcon.force=0 } } let buildingMSG = this.canvasData.allNodeMarkers.highlightMarkers || {} for (let key in buildingMSG) { if (key === this.canvasData.selectPanelPoint.DisposalNodeId) { for (let keys in buildingMSG[key]) { this.sitePlanData.forEach(element => { //楼层 if (element.id === keys) { buildingMSG[key][keys].fireCount != 0? element.fire=2 : null buildingMSG[key][keys].forceCount != 0? element.force=2 : null } }); this.allBuildings.forEach(element => { //建筑 if (element.id === keys) { // 相匹配时 buildingMSG[key][keys].fireCount != 0? element.fire=2 : null buildingMSG[key][keys].forceCount != 0? element.force=2 : null } }); if (this.params.companyId === keys) { //总平面图时 buildingMSG[key][keys].fireCount != 0? this.sitePlanIcon.fire=2 : null buildingMSG[key][keys].forceCount != 0? this.sitePlanIcon.force=2 : null } } } } } // 切换 基本信息时 刷新 删除 建筑楼层 自定义属性 mateDeleteCustomize () { this.defaultExpandedKeys = [] this.sitePlanIcon = {fire:0,force:0} this.sitePlanData.forEach(element => { //楼层 delete element.fire delete element.force }); this.allBuildings.forEach(element => { //建筑 delete element.fire delete element.force }); } //选择 考试节点 countValue (e) { e.stopPropagation() if (this.canvasData.allDisposalNode.length) { let data = {treeData: JSON.parse( JSON.stringify(this.treeData) ), oldTreeData: JSON.parse( JSON.stringify(this.canvasData.allDisposalNode) )} let dialogRef = this.dialog.open(uploadDisposalNodes,{data}); dialogRef.afterClosed().subscribe(data=>{ if (data) { sessionStorage.setItem('examNodeList',JSON.stringify(data)) const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('节点保存成功','确定',config); } }) } else { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('暂无数据节点','确定',config); } } //新建 处置预案 节点 addPanelPoint (e,item,treeData) { e.stopPropagation() let order if (item) { item.children.length? order = item.children[item.children.length-1].order+1 : order = 0 } else { treeData.length? order = treeData[treeData.length-1].order+1 : order = 0 } let data = { name: '', level: item? 1 : 0, order: order, description: '', disasterId: this.allFirePlan[0].id || '', parentId: item? item.id : null, planComponentId: sessionStorage.getItem('planId') || '', } let dialogRef = this.dialog.open(addDisposalNodeComponent,{data}); dialogRef.afterClosed().subscribe(data=>{ if (data) { this.refurbishTreeData() } }) } //编辑 处置预案 节点 editPanelPoint (e,item) { e.stopPropagation() let data = item.origin let dialogRef = this.dialog.open(editDisposalNodeComponent,{data}); dialogRef.afterClosed().subscribe(data=>{ if (data) { item.title = data this.canvasData.allDisposalNode.forEach(element => { element.id === item.key? element.name=data : null }); } }) } //复制 处置预案 节点 copyPanelPoint (e,item,treeData) { e.stopPropagation() if (confirm(`确定要复制 ${item.title} ?`)) { let params = {id: item.origin.id} let order if (item.level==0) { treeData.length? order = treeData[treeData.length-1].order+1 : order = 0 } else { let parent = item.getParentNode() //获取父节点 parent.origin.children.length? order = parent.origin.children[parent.origin.children.length-1].order+1 : order = 0 } let data = { name: item.title + '(副本)', level: item.level, order: order, description: '', disasterId: item.origin.disasterId || '', parentId: item.origin.parentId || null, planComponentId: item.origin.planComponentId || '', } this.http.post('/api/DisposalNodes/Clone',data,{params:params}).subscribe(data=>{ this.refurbishTreeData() }) } //isTrue } //删除 处置预案 节点 deletePanelPoint (e,item) { e.stopPropagation() if (confirm(`确定要删除 ${item.name} ?`)) { this.http.delete(`/api/DisposalNodes/${item.id}`).subscribe(data=>{ this.refurbishTreeData() }) } } //点击 处置Tree节点 selectanelPoint (e) { if (!e.buildingAreaId && !e.sitePlanId) { //当前节点 不是 数据节点 时 let msg = this.canvasData.findDisposalNode(e.id) this.canvasData.selectPanelPointBaseData = msg this.selectDisposalNode == msg.id? this.selectDisposalNode = '' : this.selectDisposalNode = msg.id //选中 节点 } else if (e.buildingAreaId || e.sitePlanId) { //当前节点 是 数据节点 时 let msg = this.canvasData.findDisposalNode(e.parentId) this.canvasData.selectPanelPointBaseData = msg this.selectDisposalNode = e.parentId //选中 节点 if (this.canvasData.selectPanelPoint.DisposalNodeId != e.id) { //选择节点 不是当前节点时 let api this.examType == 1? api='/api/DisposalNodeData' : api='/api/ExamDisposalNodeData' let params = {nodeId: e.id} let parameter = { //查询 节点 对应 建筑/楼层 index,id buildingIndex: e.sitePlanId? -1 : this.allBuildings.findIndex(item=>{ return item.id===e.buildingId }), //总平面图/建筑 index storeyId: e.sitePlanId? e.sitePlanId : e.buildingAreaId, //楼层id } this.http.get(api,{params:params}).subscribe(data=>{ this.canvasData.selectPanelPoint = this.canvasData.deserialize(JSON.stringify(data || new DisposalNodeData())) //选择 当前 节点 this.canvasData.selectPanelPoint.Data = this.canvasData.deserialize(this.canvasData.selectPanelPoint.Data) this.seekPanelPoint(parameter) }) } //if } //else if } //查找 数据节点 对应 建筑/楼层 seekPanelPoint (paramsData) { this.checkedBuildingIndex = paramsData.buildingIndex if (paramsData.buildingIndex ==-1) { //总平面图时 this.beforeOneCheckedBuilding={name:"总平面图"} let fireData = this.getFireElements(sessionStorage.getItem('buildingTypeId')) //获取单位下 消防要素 let planData = this.getSitePlanCompanyData() //获取 单位 数据 this.http.get('/api/SitePlans',{params:this.params}).subscribe(data=>{ this.sitePlanData = data let index = this.sitePlanData.findIndex(item=>{ return item.id===paramsData.storeyId }) this.selectingSitePlan = this.sitePlanData[index] || {} this.canvasData.selectStorey = this.sitePlanData[index] || {} //服务中 存一份数据 this.selectSitePlanIndex = index Promise.all([fireData,planData]).then((res)=>{ this.getSitePlanStorey(this.selectingSitePlan) //获取 平面图 楼层数据 }) }) //get } else { //建筑时 this.beforeOneCheckedBuilding=this.allBuildings[paramsData.buildingIndex] let params = { buildingId: this.beforeOneCheckedBuilding.id } let fireData = this.getFireElements(this.beforeOneCheckedBuilding.buildingTypes[0].id || '') //获取建筑下 消防要素 let planData = this.getBuildingData(params) //获取 建筑 数据 this.http.get('/api/BuildingAreas',{params}).subscribe(data=>{ this.sitePlanData = data let index = this.sitePlanData.findIndex(item=>{ return item.id===paramsData.storeyId }) this.selectingSitePlan = this.sitePlanData[index] || {} this.canvasData.selectStorey = this.sitePlanData[index] || {} //服务中 存一份数据 this.selectSitePlanIndex = index Promise.all([fireData,planData]).then((res)=>{ this.getBuildingStorey(this.selectingSitePlan) //获取 建筑 楼层数据 }) }) //get } } } //创建建筑 @Component({ selector: 'app-createBuilding', templateUrl: './createBuilding.html', styleUrls: ['./collection-tools.component.scss'] }) export class CreateBuilding { constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data) { } allBuildingType:any//所有的建筑类型 selected:any; //选中的建筑 ngOnInit(): void { this.getAllBuildingType() } //获得所有单位类型 getAllBuildingType(){ this.http.get("/api/BuildingTypes/Simple").subscribe(data=>{ this.allBuildingType = data }) } //创建建筑功能分区 onSubmit (e) { let companyId = sessionStorage.getItem("companyId") let lastBuildingOrder = this.data.allBuildings.length != 0 ? this.data.allBuildings[this.data.allBuildings.length - 1].order + 1 : 0 let data = { id: "", name: e.propertyName, order: lastBuildingOrder , enabled: true, companyId: companyId, buildingTypes: [ { id: e.buildingId, name: "" } ] } this.http.post("/api/Buildings",data,{ params:{ companyId : this.data.companyId } }).subscribe(data=>{ this.dialogRef.close("创建成功"); },err=>{ this.dialogRef.close("创建失败"); }) } } //编辑建筑 @Component({ selector: 'app-editBuilding', templateUrl: './editBuilding.html', styleUrls: ['./collection-tools.component.scss'] }) export class EditBuilding { constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data) { } defaultName:String = this.data.item.name//默认建筑名称 defaultBuildingType:String = this.data.item.buildingTypes[0].id//默认建筑类型 allBuildingType:any//所有的建筑类型 ngOnInit(): void { this.getAllBuildingType() } getAllBuildingType(){ this.http.get("/api/BuildingTypes/Simple").subscribe(data=>{ this.allBuildingType = data }) } //编辑建筑信息 onSubmit (e) { let companyId = sessionStorage.getItem("companyId") let data = { id: this.data.item.id, name: e.propertyName, order: this.data.item.order, enabled: true, companyId: companyId, buildingTypes: [ { id: e.buildingId, name: "" } ] } this.http.put(`/api/Buildings/${this.data.item.id}`,data,{ params:{ id:this.data.item.id, companyId:companyId } }).subscribe(data=>{ this.dialogRef.close("修改成功"); },err=>{ this.dialogRef.close("修改失败"); }) } } //查看图片大图 @Component({ selector: 'viewdetails', templateUrl: './viewdetails.html', styleUrls: ['./collection-tools.component.scss'] }) export class ViewDetailss { // myControl = new FormControl(); //注入MatDialogRef，可以用来关闭对话框 //要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌 constructor(private http: HttpClient,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data,private element: ElementRef) {} imagesArr = this.data.imagesArr onNoClick(): void { this.dialogRef.close(); } ngOnInit(): void { setTimeout(() => { var mySwiper = new Swiper('.swiper-container',{ loop: false, initialSlide :this.data.index,//默认索引 // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } //其他设置 }); }, 0); } closeDialog(){ this.dialogRef.close(); } count = 10 zoomimg(e) { if(this.count != 1 || e.wheelDelta >= 120){ if(e.wheelDelta >= 120){ this.count++ }else{ this.count-- } } e.srcElement.style.zoom = this.count + '0%' e.srcElement.style.maxWidth = null e.srcElement.style.maxHeight = null } }