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 { leftFunctionalDomainBuildingComponent, editPlaneFigureBuildingComponent, } 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 { NzFormatBeforeDropEvent, NzFormatEmitEvent, NzTreeComponent, } from "ng-zorro-antd/tree"; import { Observable, of } from "rxjs"; import { GameMode } from "src/app/working-area/model/gameMode"; import { ActivatedRoute, Router } from "@angular/router"; import { TabbarAndScoreService } from "src/app/http-interceptors/tabbar-and-score.service"; import { MaskLayerService } from "src/app/mask-layer.service"; import * as ObjectID from "bson-objectid"; import { AxMessageSystem } from "src/app/working-area/model/axMessageSystem"; @Component({ selector: "app-collection-tools-building", templateUrl: "./collection-tools.component.html", styleUrls: ["./collection-tools.component.scss"], }) export class CollectionToolsBuildingComponent implements OnInit { @ViewChild("canvas", { static: true }) canvas: WorkingAreaComponent; //父组件中获得子组件的引用 constructor( private maskLayerService: MaskLayerService, private tabbarService: TabbarAndScoreService, 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; //当前点击选择的建筑 checkedBuildingIndex: number = 0; //当前点击选择的建筑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) { if (document.getElementById("viewerjs")) { 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 = true; //默认为基本信息编辑 //基本信息编辑模式 baseInfo() { if (!this.pattern) { 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.pattern = false; this.canvasData.gameMode = GameMode.Assignment; this.getAllLibrary("plan"); this.getDisposalNode(); } } //适应缩放 adaptZoom() { this.canvas.zoomFit(); } //重置缩放 resetZoom() { this.canvas.resetCamera2D(); } //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); }); if (this.pos == 0 && event.node.origin.children.length == 1) { let key = event.dragNode.key; orders[key] = 0; parentId = event.node.key; } else { let array = []; targetNodeData.forEach((item) => { if (item.id != event.dragNode.key) { //将拖动项先移除掉 array.push(item); } }); if (event.dragNode.isEnd[event.dragNode.isEnd.length - 1]) { //如果移入到最后一个 array.push(event.dragNode.origin); } else if (event.dragNode.isStart[event.dragNode.isStart.length - 1]) { //如果移入到第一个 array.unshift(event.dragNode.origin); } else { //如果移入中间位置 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) { if (e.target.value) { let index = this.canvasAssetObj.PropertyInfos.findIndex((item) => { return i.PropertyName == item.PropertyName; }); if (this.myIsNaN(e.target.value)) { e.target.value = String(e.target.value); } this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value; this.canvasData.isChange = true; this.canvas.refreshIcon(this.canvasAssetObj.Id); } } //判断是否是数字类型 myIsNaN(value) { return typeof value === "number" && !isNaN(value); } //动态属性素材布尔值框改变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); } //上传素材图片 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 = 10 * 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("上传图片文件不允许大于10mb", "确定", 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; } isediticon = true; //控制查看编辑模式的编辑模式小笔按钮 isMultipleAsset: boolean = false; //框选多个素材属性显隐 multipleAsset: any = { Width: null, Height: null, Angle: null, Thickness: null, Color: null, PropertyInfos: [], }; //多个素材共同属性 multipleAssetData: any; //当前多选的素材 firstMultipleAssetData: any; //当前多选的第一个素材 ngOnInit(): void { let _this = this; AxMessageSystem.addListener( "selectionChanged", () => { if (this.canvas.selection.size() == 1) { //如果是单选 this.isMultipleAsset = false; console.log("单选", this.canvas.selection.first().assetData); this.setAssetsProperty(this.canvas.selection.first().assetData); } else if (this.canvas.selection.size()) { this.isShowProperty = true; this.multipleAssetData = this.canvas.selection.all(); this.firstMultipleAssetData = this.canvas.selection.first(); this.multipleAsset = { Width: null, Height: null, Angle: null, Thickness: null, Color: null, PropertyInfos: [], }; this.isMultipleAsset = true; let firstAssetData = this.canvas.selection.first().assetData; //拿出第一个素材作为例子与其他素材进行对比 let InteractiveMode = firstAssetData.InteractiveMode; //素材连接方式 let isInteractiveMode = this.canvas.selection .all() .every( (item) => item.assetData.InteractiveMode === InteractiveMode ); if (isInteractiveMode) { this.multipleAsset.InteractiveMode = InteractiveMode; } let isFillMode = this.canvas.selection .all() .every((item) => item.assetData.FillMode === 0); //素材填充方式都为0 if (isFillMode) { this.multipleAsset.FillMode = 0; } this.canvas.selection.first().assetData.PropertyInfos.forEach((i) => { let index = 0; this.canvas.selection.all().forEach((item) => { item.assetData.PropertyInfos.forEach((element) => { if ( element.PropertyName == i.PropertyName && element.PropertyType == i.PropertyType && element.PropertyType != 3 && element.PropertyType != 4 ) { index++; if (index == this.canvas.selection.size()) { let newElement = JSON.parse(JSON.stringify(element)); newElement.PropertyValue = ""; this.multipleAsset.PropertyInfos.push(newElement); } } }); }); }); // console.log(666,_this.multipleAsset.PropertyInfos) } else if (this.canvas.selection.size() == 0) { this.isShowProperty = false; } }, this ); AxMessageSystem.addListener( "imageResize", (eventName, args1) => { this.assetWidth = args1.Width; this.assetHeight = args1.Height; }, this ); if (this.router.url.indexOf("keyUnit/viewunitinfo") != -1) { //查看模式 this.isEditPattern = false; this.isediticon = false; this.canvasData.gameMode = GameMode.Assignment; } else if (this.router.url.indexOf("keyUnit/editplaninfo") != -1) { //编辑模式 this.canvasData.gameMode = GameMode.BasicInformation; } //gis模块平面图 if ( this.router.url.indexOf("gis") != -1 && sessionStorage.getItem("gisplan") == "look" ) { this.isEditPattern = false; this.isediticon = false; this.canvasData.gameMode = GameMode.Assignment; } else { this.getAllLibrary(); //获取素材库 } let that = this; window.setTimeout(() => { document.getElementById("functionalDomainContentTwo").oncontextmenu = function (event) { // that.canvas.cancelPaint() that.selectImageIndex = -1; event.preventDefault(); }; }); this.canvasData.getMessage().subscribe((message: any) => { if (message == "send a message") { this.refurbishTreeData(); } }); } //多选宽度共同改变 multipleAssetWidthInput() { this.multipleAssetData.forEach((item) => { item.assetData.Width = this.multipleAsset.Width; this.canvas.refreshIcon(item.assetData.Id); this.canvasData.isChange = true; }); } //多选高度共同改变 multipleAssetHeightInput() { this.multipleAssetData.forEach((item) => { item.assetData.Height = this.multipleAsset.Height; this.canvas.refreshIcon(item.assetData.Id); this.canvasData.isChange = true; }); } //多选角度共同改变 multipleAssetAngleInput() { this.multipleAssetData.forEach((item) => { item.assetData.Angle = this.multipleAsset.Angle; this.canvas.refreshIcon(item.assetData.Id); this.canvasData.isChange = true; }); } //多选厚度共同改变 multipleAssetThicknessInput() { this.multipleAssetData.forEach((item) => { item.assetData.Thickness = this.multipleAsset.Thickness; this.canvas.refreshIcon(item.assetData.Id); this.canvasData.isChange = true; }); } //多选颜色共同改变 multipleSelectedcolor: any; multipleAssetSelectcolor(item, key) { //在当前透明度基础上改变颜色 this.multipleSelectedcolor = item; this.multipleAssetData.forEach((item) => { item.assetData.Color = this.multipleSelectedcolor; this.canvasData.isChange = true; this.canvas.refreshIcon(item.assetData.Id); }); } //多选颜色滑竿改变 multipleColorDivSliderChange() { 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.multipleAssetData.forEach((item) => { this.multipleSelectedcolor = replacepos( this.multipleSelectedcolor, 7, 8, colorOpacity.toString(16) ); item.assetData.Color = this.multipleSelectedcolor; this.canvasData.isChange = true; this.canvas.refreshIcon(item.assetData.Id); }); } //多选状态动态属性素材input框值改变 multipleAssetInputChange(i, e) { e.stopPropagation(); setTimeout(() => { this.multipleAssetData.forEach((item) => { item.assetData.PropertyInfos.forEach((element) => { if (element.PropertyName == i.PropertyName) { if (this.myIsNaN(i.PropertyValue)) { i.PropertyValue = String(i.PropertyValue); } element.PropertyValue = i.PropertyValue; this.canvas.refreshIcon(item.assetData.Id); this.canvasData.isChange = true; } }); }); }, 0); } //多选状态动态属性素材radio框值改变 multipleAssetRadioChange(i, value) { // e.stopPropagation() this.multipleAssetData.forEach((item) => { // console.log(item) item.assetData.PropertyInfos.forEach((element) => { if (element.PropertyName == i.PropertyName) { element.PropertyValue = value; this.canvas.refreshIcon(item.assetData.Id); this.canvasData.isChange = true; } }); }); } //多选状态动态属性素材下拉框值改变 multipleSupplyArea(i, e) { e.stopPropagation(); this.multipleAssetData.forEach((item) => { item.assetData.PropertyInfos.forEach((element) => { if (element.PropertyName == i.PropertyName) { element.PropertyValue = i.PropertyValue; this.canvas.refreshIcon(item.assetData.Id); this.canvasData.isChange = true; } }); }); } ngAfterViewInit(): void { //不是gis模块平面图 if (this.router.url.indexOf("gis") == -1) { this.getAllBuildings(true); //获取所有建筑 } //监听数据变化后 this.canvas.on("canvasDataChanged", () => { // 收到数据表示共享数据发生变化 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); this.renovateTreeData(false); } //截图 takeScreenshot() { this.canvas.takeScreenshot(); } isMultiSelect: boolean = false; // 多选/单选 切换 changeMultiSelect(e) { this.canvas.setMulitSelect(this.isMultiSelect); } isShowLegend: boolean = true; //图例是否显示 changeLegend(e) { this.canvasData.selectPanelPoint.BackgroundImageUrl ? null : this.canvas.setLegendVisible(this.isShowLegend); } basicInfo: boolean = false; //基本信息名称显隐 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() { //更新用于统计的数据 this.canvasData.updateBuildingData(); if (this.selectingSitePlan && this.selectingSitePlan.id) { //打开遮罩层 this.maskLayerService.sendMessage(true); //遍历 建筑数据 删除多余数据 let object = this.canvasData.originalcompanyBuildingData.data; let adjoinArr = []; //毗邻数组 Object.keys(object).forEach((key) => { let isExist = this.sitePlanData.find((item) => { return item.id === object[key].FloorId; }); if (isExist === undefined) { console.log(object[key], "当前楼层已被删除"); delete object[key]; } }); //遍历 建筑数据 删除多余数据 this.saveNum = []; let SitePlanData = JSON.parse( JSON.stringify(this.canvasData.originaleveryStoreyData) ); console.log(SitePlanData.data); for (const key in SitePlanData.data) { if (Object.prototype.hasOwnProperty.call(SitePlanData.data, key)) { const element = SitePlanData.data[key]; element.Width = Number(element.Width); element.Height = Number(element.Height); element.PropertyInfos.forEach((item) => { item.PropertyType = Number(item.PropertyType); item.PropertyValue = String(item.PropertyValue); }); } } SitePlanData.data = JSON.stringify(SitePlanData.data); let CompanyData = JSON.parse( JSON.stringify(this.canvasData.originalcompanyBuildingData) ); CompanyData.data = JSON.stringify(CompanyData.data); if (this.pattern) { //如果是基本信息编辑模式 for (const key in object) { if (object[key].Name == "毗邻") { //如果是相同楼层，则筛选出毗邻 object[key].PropertyInfos.forEach((element) => { element.PropertyValue = String(element.PropertyValue); if (element.PropertyName == "方向") { adjoinArr.push(element.PropertyValue); } }); } } if (new Set(adjoinArr).size != adjoinArr.length) { this.maskLayerService.sendMessage(false); let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("保存失败，毗邻存在相同方向", "确定", config); return false; } else { //如果是单位 总平面图 if (this.checkedBuildingIndex == -1) { // console.log(111,SitePlanData) //保存平面图数据 this.http .post("/api/SitePlanData", SitePlanData, { params: { companyId: this.params.companyId, }, }) .subscribe( (data) => { this.saveNum.push("1"); if (this.saveNum.length == 5) { this.maskLayerService.sendMessage(false); this.canvasData.isChange = false; let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("保存成功", "确定", config); this.tabbarService.sendMessage("changeScore"); } }, (err) => { this.maskLayerService.sendMessage(false); let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.canvasData.isChange = true; this.snackBar.open("平面图数据保存失败", "确定", config); } ); //保存建筑数据 this.http .post("/api/CompanyData", CompanyData, { params: { companyId: this.params.companyId, }, }) .subscribe( (data) => { this.saveNum.push("1"); if (this.saveNum.length == 5) { this.maskLayerService.sendMessage(false); this.canvasData.isChange = false; let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("保存成功", "确定", config); this.tabbarService.sendMessage("changeScore"); } }, (err) => { this.maskLayerService.sendMessage(false); let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.canvasData.isChange = true; this.snackBar.open("单位数据保存失败", "确定", config); } ); //批量保存单位毗邻 let CompanyAdjoins = this.canvasData.getCompanyAdjoinInfo(); this.http .post("/api/CompanyAdjoins/Batch", CompanyAdjoins, { params: { companyId: this.params.companyId, }, }) .subscribe( (data) => { this.saveNum.push("1"); if (this.saveNum.length == 5) { this.maskLayerService.sendMessage(false); this.canvasData.isChange = false; let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("保存成功", "确定", config); this.tabbarService.sendMessage("changeScore"); } }, (err) => { this.maskLayerService.sendMessage(false); let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.canvasData.isChange = true; if (err == "infos 有重复方向！") { this.snackBar.open( "单位毗邻同步失败,存在相同方向", "确定", config ); } else { this.snackBar.open("单位毗邻同步失败", "确定", config); } } ); //批量保存单位重点部位 let CompanyImportantLocations = this.canvasData.getCompanyImportantLocations(); this.http .post( "/api/CompanyImportantLocations/Batch", CompanyImportantLocations, { params: { companyId: this.params.companyId, }, } ) .subscribe( (data) => { this.saveNum.push("1"); if (this.saveNum.length == 5) { this.maskLayerService.sendMessage(false); this.canvasData.isChange = false; let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("保存成功", "确定", config); this.tabbarService.sendMessage("changeScore"); } }, (err) => { this.maskLayerService.sendMessage(false); let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.canvasData.isChange = true; this.snackBar.open("单位重点部位同步失败", "确定", config); } ); //批量保存单位消防设施素材 let CompanyFacilityAssets = this.canvasData.getAllCompanyFacilityAssetInfo(); this.http .post("/api/CompanyFacilityAssets/Batch", CompanyFacilityAssets, { params: { companyId: this.params.companyId, }, }) .subscribe( (data) => { this.saveNum.push("1"); if (this.saveNum.length == 5) { this.maskLayerService.sendMessage(false); this.maskLayerService.sendMessage(false); this.canvasData.isChange = false; let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("保存成功", "确定", config); this.tabbarService.sendMessage("changeScore"); } }, (err) => { this.maskLayerService.sendMessage(false); let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.canvasData.isChange = true; this.snackBar.open( "单位消防设施素材同步失败", "确定", config ); } ); } else { //如果是建筑 //建筑平面图数据 this.http .post("/api/BuildingAreaData", SitePlanData, { params: { companyId: this.params.companyId, }, }) .subscribe( (data) => { this.saveNum.push("1"); if (this.saveNum.length == 5) { this.maskLayerService.sendMessage(false); this.maskLayerService.sendMessage(false); this.canvasData.isChange = false; let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("保存成功", "确定", config); this.tabbarService.sendMessage("changeScore"); } }, (err) => { this.maskLayerService.sendMessage(false); let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.canvasData.isChange = true; this.snackBar.open("平面图数据保存失败", "确定", config); } ); //建筑数据 this.http .post("/api/BuildingData", CompanyData, { params: { companyId: this.params.companyId, }, }) .subscribe( (data) => { this.saveNum.push("1"); if (this.saveNum.length == 5) { this.maskLayerService.sendMessage(false); this.canvasData.isChange = false; this.maskLayerService.sendMessage(false); let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("保存成功", "确定", config); this.tabbarService.sendMessage("changeScore"); } }, (err) => { this.maskLayerService.sendMessage(false); let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.canvasData.isChange = true; this.snackBar.open("单位数据保存失败", "确定", config); } ); //批量保存建筑毗邻 let buildingAdjoins = this.canvasData.getBuildingAdjoinInfo(); this.http .post( `/api/BuildingAdjoins/Batch?companyId=${this.params.companyId}&buildingId=${this.canvasData.selectStorey.buildingId}`, buildingAdjoins ) .subscribe( (data) => { this.saveNum.push("1"); if (this.saveNum.length == 5) { this.maskLayerService.sendMessage(false); this.canvasData.isChange = false; let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("保存成功", "确定", config); this.tabbarService.sendMessage("changeScore"); } }, (err) => { this.maskLayerService.sendMessage(false); let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.canvasData.isChange = true; if (err == "infos 有重复方向！") { this.snackBar.open( "建筑毗邻同步失败,存在相同方向", "确定", config ); } else { this.snackBar.open("建筑毗邻同步失败", "确定", config); } } ); //批量保存建筑重点部位 let buildingImportantLocations = this.canvasData.getBuildingImportantLocations(); this.http .post( `/api/BuildingImportantLocations/Batch?companyId=${this.params.companyId}&buildingId=${this.canvasData.selectStorey.buildingId}`, buildingImportantLocations ) .subscribe( (data) => { this.saveNum.push("1"); if (this.saveNum.length == 5) { this.maskLayerService.sendMessage(false); this.canvasData.isChange = false; let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("保存成功", "确定", config); this.tabbarService.sendMessage("changeScore"); } }, (err) => { this.maskLayerService.sendMessage(false); let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.canvasData.isChange = true; this.snackBar.open("建筑重点部位同步失败", "确定", config); } ); //批量保存建筑消防设施素材 let buildingFacilityAssets = this.canvasData.getAllBuildingFacilityAssetInfo(); this.http .post( `/api/BuildingFacilityAssets/Batch?companyId=${this.params.companyId}&buildingId=${this.canvasData.selectStorey.buildingId}`, buildingFacilityAssets ) .subscribe( (data) => { this.saveNum.push("1"); if (this.saveNum.length == 5) { this.maskLayerService.sendMessage(false); this.canvasData.isChange = false; let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("保存成功", "确定", config); this.tabbarService.sendMessage("changeScore"); } }, (err) => { this.maskLayerService.sendMessage(false); let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.canvasData.isChange = true; this.snackBar.open( "建筑消防设施素材同步失败", "确定", config ); } ); } } } } else { //if const config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("暂无楼层数据", "确定", config); } } //获得所有的建筑物 getAllBuildings(init: boolean = false) { this.http .get("/api/Buildings", { params: { companyId: this.params.companyId } }) .subscribe((data: any) => { this.allBuildings = data; if (init) { this.checkedBuildingIndex = 0; data && data.length ? (this.beforeOneCheckedBuilding = data[0]) : (this.beforeOneCheckedBuilding = { id: null, buildingTypes: [{ id: null }], }); this.getBuildingSitePlan(this.beforeOneCheckedBuilding); } //if }); } //创建建筑 createBuilding() { let data = { allBuildings: this.allBuildings, companyId: this.params.companyId, }; let dialogRef = this.dialog.open(CreateBuildingBuilding, { data }); dialogRef.afterClosed().subscribe((data) => { if (data == "创建成功") { const config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("创建成功", "确定", config); this.allBuildings.length ? this.getAllBuildings() : this.getAllBuildings(true); } else if (data == "创建失败") { const config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("创建失败", "确定", config); } }); } //选择建筑 checkedBuilding(item, index) { if (this.checkedBuildingIndex != 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.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(EditBuildingBuilding, { 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.getAllBuildings(true); }, (err) => { const config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("删除失败", "确定", config); this.getAllBuildings(true); } ); } else { //建筑 含有数据节点时 const config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("含有数据节点的建筑不允许删除", "确定", config); } } } storeyData; //将建筑素材和当前楼层素材合二为一 //处理 tree 数据结构 handleTreeData(storeyData) { this.hideAllTreenode = true; this.storeyData = storeyData; let data = this.allFireElements; //所有消防要素模板 let treeData = []; //tree型 处理完成后的数据 data.forEach((element) => { 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); } }); this.dataSource.data = 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] ); } //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); } this.canvas.setHighlight(iconHighLightArr); } hideAllTreenode: boolean = true; //全部显示/隐藏tree节点 toggoleAllTreenode() { this.hideAllTreenode = !this.hideAllTreenode; let list = []; this.allFireElements.forEach((element) => { if (element.isTemplate) { this.hideAllTreenode ? (element.isLook = false) : (element.isLook = true); } }); this.treeControl.dataNodes.forEach((item) => { this.hideAllTreenode ? (item.isLook = false) : (item.isLook = true); item.level === 0 ? list.push(item) : null; }); list.forEach((item) => { this.clickLookItem(item); }); } //点击数节点的显示隐藏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值 console.log(node); if (node.isTemplate) { this.allFireElements.forEach((item) => { if (item.id == node.id) { item.isLook = !item.isLook; } if (item.name == "其他" && node.name == "其他") { 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); } this.canvas.setIconVisible(iconVisibleArr, !node.isLook); } //计算 可视区域内宽度, 是否缩放背景图 backGroundScale() { // let that = this // let dad = this.element.nativeElement.querySelector('.functionalDomainContent').clientWidth // let dadHeight = this.element.nativeElement.querySelector('.functionalDomainContent').clientHeight // let left = this.element.nativeElement.querySelector('.functionalDomainLeft').clientWidth // let right = this.element.nativeElement.querySelector('.functionalDomainRight').clientWidth // let imgWidth = dad - left - right//可视区域内 宽度 // let img = new Image() // img.src = this.selectingSitePlan.imageUrl; // img.onload = function(){ // if (img.height > dadHeight && img.width > imgWidth) { // let width = imgWidth/img.width // let height = dadHeight/img.height // that.canvas.setBackgroundScale((width>height? height : width)-0.005) // return // } else if (img.height > dadHeight) { // that.canvas.setBackgroundScale((dadHeight/img.height)-0.005) // return // } else if (img.width > imgWidth) { // that.canvas.setBackgroundScale((imgWidth/img.width)-0.005) // return // } // }; } //封装 刷新 tree 数据 async renovateTreeData(isRefresh: boolean = true) { this.allFireElements[this.allFireElements.length - 1].children = []; isRefresh ? await this.canvas.refresh() : null; this.canvas.setNameVisible(this.basicInfo, 0); this.canvas.setNameVisible(this.wantToWork, 1); this.canvas.setLegendVisible(this.isShowLegend); //图例显隐 if (this.router.url.indexOf("keyUnit/viewunitinfo") != -1) { //查看模式 console.log("查看模式"); this.canvas.allowEdit = false; } isRefresh ? (this.canvasData.isChange = false) : null; //服务中 数据是否改动 改为false isRefresh ? (this.isShowProperty = true) : null; isRefresh ? (this.isShowAttribute = true) : null; !this.pattern ? this.mateFireForce() : 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) { //筛选数据 没有匹配全部放入到 其他 数组 let noMatch = this.allFireElements.find( (every) => every.id === storeyData.data[key].FireElementId ); if (!noMatch && storeyData.data[key].Id != "图例") { 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 = false; //可展开面板素材库 显隐 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 = "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 = "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 = "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) => { console.log("建筑楼层数据", data); 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 = "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 } if (this.element.nativeElement.querySelector("#rightOperate")) { setTimeout(() => { this.element.nativeElement.querySelector( "#rightOperate" ).style.position = "fixed"; this.element.nativeElement.querySelector("#rightOperate").style.left = document .getElementsByClassName("sitePlanContentBox")[0] .children[this.selectSitePlanIndex].getBoundingClientRect().left + document.getElementById("leftDiv").offsetWidth + "px"; this.element.nativeElement.querySelector("#rightOperate").style.top = document .getElementsByClassName("sitePlanContentBox")[0] .children[this.selectSitePlanIndex].getBoundingClientRect().top - 32 + "px"; }, 0); } } hoverSitePlan(item, key) { if (key == this.selectSitePlanIndex) { if (this.element.nativeElement.querySelector("#rightOperate")) { setTimeout(() => { this.element.nativeElement.querySelector( "#rightOperate" ).style.position = "fixed"; this.element.nativeElement.querySelector("#rightOperate").style.left = document .getElementsByClassName("sitePlanContentBox")[0] .children[this.selectSitePlanIndex].getBoundingClientRect().left + document.getElementById("leftDiv").offsetWidth + "px"; this.element.nativeElement.querySelector("#rightOperate").style.top = document .getElementsByClassName("sitePlanContentBox")[0] .children[this.selectSitePlanIndex].getBoundingClientRect().top - 32 + "px"; }, 0); } } } //新增平面图 楼层/区域 foundPanel(e) { e.stopPropagation(); if (this.beforeOneCheckedBuilding.id) { 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(leftFunctionalDomainBuildingComponent, { data, }); dialogRef.afterClosed().subscribe((data) => { if (data == "总平面图") { this.renovateSitePlan(); } else if (data == "建筑") { this.renovateBuilding(); } }); } else { const config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("请选择建筑", "确定", config); } } //编辑平面图 楼层/区域 editPlaneData(e) { let data = { isBuilding: this.checkedBuildingIndex == -1 ? false : true, Panel: this.beforeOneCheckedBuilding, buildingData: e, }; let dialogRef = this.dialog.open(editPlaneFigureBuildingComponent, { disableClose: true, hasBackdrop: false, position: { left: "150px", top: "200px" }, data, }); dialogRef.keydownEvents().subscribe((data) => { if (data.key === "Enter") { this.canvas.refreshBackgroundImage(); } }); dialogRef.afterClosed().subscribe((data) => { if (data == "总平面图") { let isSuccess = this.renovateSitePlan(); isSuccess.then((res) => { this.canvas.refreshBackgroundImage(); }); } else if (data == "建筑") { let isSuccess = this.renovateBuilding(); isSuccess.then((res) => { this.canvas.refreshBackgroundImage(); }); } else if (data == "更新背景图") { this.canvas.refreshBackgroundImage(); } }); } //平面图 楼层/区域 上移 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(item.imageUrl, item.imageAngle); }); }); } else { //楼层/区域 this.http .put(`/api/BuildingAreas/${item.id}`, item, { params: this.params }) .subscribe((data) => { let isSuccess = this.renovateBuilding(); isSuccess.then((res) => { this.canvas.refreshBackgroundImage(item.imageUrl, item.imageAngle); }); }); } } //删除 平面图 楼层/区域 deletePlaneData(item) { const isDelete = confirm("您确定要删除吗"); if (isDelete) { //打开遮罩层 this.maskLayerService.sendMessage(true); 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); //获取 平面图 楼层数据 this.maskLayerService.sendMessage(false); } else { this.http .post("/api/BuildingData", newData, { params: this.params }) .subscribe((data) => {}); this.getBuildingStorey(this.selectingSitePlan); //获取 建筑 楼层数据 this.maskLayerService.sendMessage(false); } } //复制图层 平面图 楼层/区域 duplicateLayer(item) { this.maskLayerService.sendMessage(true); let paramsData = JSON.parse( JSON.stringify(this.canvasData.originaleveryStoreyData.data || {}) ); Object.keys(paramsData).forEach((key) => { if (key != "图例") { let ID = ObjectID.default.generate(); paramsData[key].Id = ID; paramsData[ID] = paramsData[key]; delete paramsData[key]; } }); //图标Id重新赋值 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) => { for (const key in paramsData) { if (Object.prototype.hasOwnProperty.call(paramsData, key)) { const element = paramsData[key]; element.FloorId = data.id; } } let newData = { version: "2.0", id: "", data: JSON.stringify(paramsData) || null, sitePlanId: data.id, }; this.http .post("/api/SitePlanData", newData, { params: this.params }) .subscribe((data) => { this.canvasData.originaleveryStoreyData = data || {}; // 楼层原数据 this.canvasData.originaleveryStoreyData.data ? (this.canvasData.originaleveryStoreyData.data = JSON.parse( this.canvasData.originaleveryStoreyData.data )) : (this.canvasData.originaleveryStoreyData.data = {}); Object.keys(this.canvasData.originaleveryStoreyData.data).forEach( (key) => { this.canvasData.originalcompanyBuildingData.data[key] = this.canvasData.originaleveryStoreyData.data[key]; } ); let list = []; //保存建筑数据 let CompanyData = JSON.parse( JSON.stringify(this.canvasData.originalcompanyBuildingData) ); CompanyData.data = JSON.stringify(CompanyData.data); this.http .post("/api/CompanyData", CompanyData, { params: { companyId: this.params.companyId }, }) .subscribe((data) => { list.push(1); if (list.length === 4) { this.updateCurrentFloor(); } }); //批量保存单位毗邻 let CompanyAdjoins = this.canvasData.getCompanyAdjoinInfo(); this.http .post("/api/CompanyAdjoins/Batch", CompanyAdjoins, { params: { companyId: this.params.companyId }, }) .subscribe( (data) => { list.push(1); if (list.length === 4) { this.updateCurrentFloor(); } }, (err) => { let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; if (err == "infos 有重复方向！") { this.snackBar.open( "单位毗邻同步失败,存在相同方向", "确定", config ); } else { this.snackBar.open("单位毗邻同步失败", "确定", config); } } ); //批量保存单位重点部位 let CompanyImportantLocations = this.canvasData.getCompanyImportantLocations(); this.http .post( "/api/CompanyImportantLocations/Batch", CompanyImportantLocations, { params: { companyId: this.params.companyId } } ) .subscribe((data) => { list.push(1); if (list.length === 4) { this.updateCurrentFloor(); } }); //批量保存单位消防设施素材 let CompanyFacilityAssets = this.canvasData.getAllCompanyFacilityAssetInfo(); this.http .post("/api/CompanyFacilityAssets/Batch", CompanyFacilityAssets, { params: { companyId: this.params.companyId }, }) .subscribe((data) => { list.push(1); if (list.length === 4) { this.updateCurrentFloor(); } }); }); }); } 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) => { // console.log('复制出的新楼层',data.id) // console.log('复制的数据',paramsData) for (const key in paramsData) { if (Object.prototype.hasOwnProperty.call(paramsData, key)) { const element = paramsData[key]; element.FloorId = data.id; } } let newData = { version: "2.0", id: "", data: JSON.stringify(paramsData) || null, buildingAreaId: data.id, }; this.http .post("/api/BuildingAreaData", newData, { params: this.params }) .subscribe((data) => { this.canvasData.originaleveryStoreyData = data || {}; // 楼层原数据 this.canvasData.originaleveryStoreyData.data ? (this.canvasData.originaleveryStoreyData.data = JSON.parse( this.canvasData.originaleveryStoreyData.data )) : (this.canvasData.originaleveryStoreyData.data = {}); Object.keys(this.canvasData.originaleveryStoreyData.data).forEach( (key) => { this.canvasData.originalcompanyBuildingData.data[key] = this.canvasData.originaleveryStoreyData.data[key]; } ); let list = []; //建筑数据 let CompanyData = JSON.parse( JSON.stringify(this.canvasData.originalcompanyBuildingData) ); CompanyData.data = JSON.stringify(CompanyData.data); this.http .post("/api/BuildingData", CompanyData, { params: { companyId: this.params.companyId }, }) .subscribe((data) => { list.push(1); if (list.length === 4) { this.updateCurrentFloor(); } }); //批量保存建筑毗邻 let buildingAdjoins = this.canvasData.getBuildingAdjoinInfo(); this.http .post( `/api/BuildingAdjoins/Batch?companyId=${this.params.companyId}&buildingId=${this.canvasData.selectStorey.buildingId}`, buildingAdjoins ) .subscribe( (data) => { list.push(1); if (list.length === 4) { this.updateCurrentFloor(); } }, (err) => { let config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; if (err == "infos 有重复方向！") { this.snackBar.open( "建筑毗邻同步失败,存在相同方向", "确定", config ); } else { this.snackBar.open("建筑毗邻同步失败", "确定", config); } } ); //批量保存建筑重点部位 let buildingImportantLocations = this.canvasData.getBuildingImportantLocations(); this.http .post( `/api/BuildingImportantLocations/Batch?companyId=${this.params.companyId}&buildingId=${this.canvasData.selectStorey.buildingId}`, buildingImportantLocations ) .subscribe((data) => { list.push(1); if (list.length === 4) { this.updateCurrentFloor(); } }); //批量保存建筑消防设施素材 let buildingFacilityAssets = this.canvasData.getAllBuildingFacilityAssetInfo(); this.http .post( `/api/BuildingFacilityAssets/Batch?companyId=${this.params.companyId}&buildingId=${this.canvasData.selectStorey.buildingId}`, buildingFacilityAssets ) .subscribe((data) => { list.push(1); if (list.length === 4) { this.updateCurrentFloor(); } }); }); }); } } //复制完楼层后 刷新视图 updateCurrentFloor() { if (this.checkedBuildingIndex == -1) { //总平面图 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[this.sitePlanData.length - 1] || {}; this.canvasData.selectStorey = this.sitePlanData[this.sitePlanData.length - 1] || {}; //服务中 存一份数据 this.selectSitePlanIndex = this.sitePlanData.length - 1; Promise.all([fireData, planData]).then((res) => { this.getSitePlanStorey(this.selectingSitePlan); //获取 平面图 楼层数据 this.maskLayerService.sendMessage(false); }); }); //重新加载 新楼层 } else { //楼层/区域 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; this.selectingSitePlan = this.sitePlanData[this.sitePlanData.length - 1] || {}; this.canvasData.selectStorey = this.sitePlanData[this.sitePlanData.length - 1] || {}; //服务中 存一份数据 this.selectSitePlanIndex = this.sitePlanData.length - 1; Promise.all([fireData, planData]).then((res) => { this.getBuildingStorey(this.selectingSitePlan); //获取 建筑 楼层数据 this.maskLayerService.sendMessage(false); }); }); //重新加载 新楼层 } } //平面图 楼层/区域 替换底图 replaceBaseMap(e, item) { e.stopPropagation(); 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 && file.name.toLowerCase().indexOf("png") == -1 && file.name.toLowerCase().indexOf("jpg") == -1 && file.name.toLowerCase().indexOf("jpeg") == -1 ) { const config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("请上传图片后缀为png,jpg,jpeg的文件", "确定", config); return; } 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( "/api/Objects/WebPlan2D/" + data.objectName, item ); }); } else if (file && fileSize > maxSize && fileSize < tenSize) { //上传文件>100MB时 let upload = this.canvasData.sectionUpload( sessionStorage.getItem("companyId"), file ); upload.then((res) => { this.renovateBaseMap("/api/Objects/PlanPlatform/" + res, item); }); } else { const config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("上传底图需小于100MB", "确定", config); } } //封装 替换底图 function renovateBaseMap(e, item) { let that = this; let img = new Image(); img.src = e; img.onload = function () { item.imageUrl = e; item.imageWidth = img.width; item.imageHeight = img.height; if (that.checkedBuildingIndex == -1) { //总平面图 that.http.put(`/api/SitePlans/${item.id}`, item).subscribe((data) => { let isSuccess = that.renovateSitePlan(); isSuccess.then((res) => { that.canvas.refreshBackgroundImage(); }); const config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; that.snackBar.open("上传底图成功", "确定", config); }); } else { //楼层/区域 that.http .put(`/api/BuildingAreas/${item.id}`, item, { params: that.params }) .subscribe((data) => { let isSuccess = that.renovateBuilding(); isSuccess.then((res) => { that.canvas.refreshBackgroundImage(); }); const config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; that.snackBar.open("上传底图成功", "确定", config); }); } //else }; //onload } //封装 刷新总平面图 数据 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 searchSettimeout: any; //延时器 searchInput: string = null; //模糊搜索 input searchLibrary: any = []; //模糊搜索 素材 //输入框 输入事件 libraryChange() { window.clearTimeout(this.searchSettimeout); this.searchSettimeout = window.setTimeout(() => { if (this.searchInput === "") { this.searchLibrary = []; } else { this.http .get(`/api/Assets?assetName=${this.searchInput}`) .subscribe((data: any) => { this.searchLibrary = data; }); } }, 500); } //获取素材库 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; }); } //素材库展开面板展开时 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(); } //处置预案 allFirePlan: any = []; //所有灾情 selectDisposalNode: string = ""; //当前点击tree节点 css选中样式 //获取所有灾情 getAllFirePlan() { let params = { componentId: sessionStorage.getItem("planId") }; this.http .get("/api/Disasters", { params: params }) .subscribe((data: any) => { if (!data.length) { //该 单位没有灾情时 let msg = { name: "灾情", modifiedTime: new Date(), planComponentId: sessionStorage.getItem("planId"), }; this.http.post("/api/Disasters", msg).subscribe((data) => { this.allFirePlan.push(data); let params = { disasterId: this.allFirePlan[0].id || "" }; this.http .get("/api/DisposalNodes", { params: params }) .subscribe((data) => { //所有处置节点 this.canvasData.allDisposalNode = data; }); }); } else { //单位 有灾情时 this.allFirePlan = data; let params = { disasterId: this.allFirePlan[0].id || "" }; this.http .get("/api/DisposalNodes", { params: params }) .subscribe((data) => { //所有处置节点 this.canvasData.allDisposalNode = data; }); } }); } //获取所有处置节点 getDisposalNode() { this.selectDisposalNode = ""; let params = { disasterId: this.allFirePlan[0].id || "" }; this.http .get("/api/DisasterData/Markers", { params: params }) .subscribe((data) => { //灾情标签信息 this.canvasData.allNodeMarkers = data; this.mateFireForce(); }); this.http .get("/api/DisposalNodes", { 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() { this.defaultExpandedKeys = []; let params = { disasterId: this.allFirePlan[0].id || "" }; this.http .get("/api/DisposalNodes", { 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.canvasData.selectPanelPointBaseData = { description: "", notes: "", weather: "", airTemperature: "", windDirection: "", windScale: "", }; 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(); let params = { disasterId: this.allFirePlan[0].id || "" }; this.http .get("/api/DisasterData/Diffs", { params: params }) .subscribe((data) => { this.canvasData.allNodeMarkers = data; this.mateFireForce(); const config = new MatSnackBarConfig(); config.verticalPosition = "top"; config.duration = 3000; this.snackBar.open("计算差异完成", "确定", config); }); } //复制 处置预案 节点 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 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/DisposalNodeData", { 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-building", templateUrl: "./createBuilding.html", styleUrls: ["./collection-tools.component.scss"], }) export class CreateBuildingBuilding { 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-building", templateUrl: "./editBuilding.html", styleUrls: ["./collection-tools.component.scss"], }) export class EditBuildingBuilding { 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("修改失败"); } ); } }