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, addBGCDisposalNodeComponent } 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 { GameMode } from 'src/app/working-area/model/gameMode'; import { ActivatedRoute, Router } from '@angular/router'; import { MaskLayerService } from 'src/app/mask-layer.service'; import * as ObjectID from 'bson-objectid'; import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem'; import { TreeService } from 'src/app/http-interceptors/tree.service'; @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 maskLayerService: MaskLayerService, 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: "总平面图" }; //当前点击选择的建筑 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) { 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 (item.PropertyName == '所属单位') { if (!item.PropertyValue) { item.PropertyValue = this.organizationName item.Tag = this.organizationId } } }) //如果存在图片则加载轮播图 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 } } //人或车选择所属单位 changeOr() { let dialogRef = this.dialog.open(Organization); dialogRef.afterClosed().subscribe(data => { if (data && data.name) { this.PropertyInfos.forEach(item => { if (item.PropertyName == '所属单位') { item.PropertyValue = data.name item.Tag = data.id } }) } }); } //截图 takeScreenshot() { this.canvas.takeScreenshot(); } 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() } } //适应缩放 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) { // 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() { } //判断是否是数字类型 myIsNaN(value) { return typeof value === 'number' && !isNaN(value); } //动态属性素材input框值改变 assetInputChange(i, e) { 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) } //动态属性素材布尔值框改变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 = 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 } isMultipleAsset: boolean = false//框选多个素材属性显隐 multipleAsset: any = { Width: null, Height: null, Angle: null, Thickness: null, Color: null, PropertyInfos: [] }//多个素材共同属性 multipleAssetData: any//当前多选的素材 firstMultipleAssetData: any//当前多选的第一个素材 organizationName: any = this.route.snapshot.queryParams.orName//当前预案单位所属机构名称 organizationId: any = this.route.snapshot.queryParams.orId//当前预案单位所属机构名称 ngOnInit(): void { this.canvasData.isInheritSky = { weather: '', airTemperature: '', windDirection: '', windScale: '', }; //缓存 节点 天气 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()) { // console.log('多选') 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) } } }); }) }) } 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) this.canvasData.gameMode = GameMode.Assignment if (sessionStorage.getItem('editable') == "0") { //查看模式 this.isEditPattern = false } else { } 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() } }) } //多选宽度共同改变 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() 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 } }) }) } //多选状态动态属性素材radio框值改变 multipleAssetRadioChange(i, value) { // e.stopPropagation() this.multipleAssetData.forEach(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 { this.getSitePlan() //监听数据变化后 this.canvas.on('canvasDataChanged', () => { // 收到数据表示共享数据发生变化 this.canvasData.selectPanelPoint.BackgroundImageUrl ? this.customizeNodes() : this.renovateTreeData(false) }); } copyAssetData: any //存储用于复制的素材 //复制素材 copyAsset() { if (this.canvas.selection.allowEdit()) {//如果当前选中素材可以编辑 this.canvas.copy() } else { let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('当前选中素材不可复制', '确定', config); } } //粘贴素材 pasteAsset() { let companyId = sessionStorage.getItem("companyId") let buildingId = this.beforeOneCheckedBuilding.id let floorId = this.selectingSitePlan.id this.canvas.paste(companyId, buildingId, floorId) this.canvasData.selectPanelPoint.BackgroundImageUrl ? this.customizeNodes() : this.renovateTreeData(false) } 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.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) {//如果是基本信息编辑模式 this.maskLayerService.sendMessage(true) for (const key in object) { if (object[key].Name == "毗邻") {//如果是相同楼层,则筛选出毗邻 object[key].PropertyInfos.forEach(element => { if (element.PropertyName == "方向") { adjoinArr.push(element.PropertyValue) } }); } } if ((new Set(adjoinArr)).size != adjoinArr.length) { let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('保存失败,毗邻存在相同方向', '确定', config); this.maskLayerService.sendMessage(false) return false } else { //如果是单位 总平面图 if (this.checkedBuildingIndex == -1) { //保存平面图数据 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); } }, 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); } }, 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); } }, 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); } }, 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.canvasData.isChange = false let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('保存成功', '确定', config); } }, 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.canvasData.isChange = false let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('保存成功', '确定', config); } }, 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 let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('保存成功', '确定', config); } }, 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); } }, 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); } }, 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); } }, err => { this.maskLayerService.sendMessage(false) let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.canvasData.isChange = true this.snackBar.open('建筑消防设施素材同步失败', '确定', config); }) } } } 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 || '' } }); } //else } 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 }) } //拖拽tree drop(e) { // console.log(1111,e) } drop2(e) { // console.log(222,e) } //创建建筑 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) { 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(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 //将建筑素材和当前楼层素材合二为一 selectPanelPoint //传过来的处置素材 //处理 tree 数据结构 handleTreeData(storeyData, selectPanelPoint) { this.hideAllTreenode = true this.storeyData = storeyData this.selectPanelPoint = selectPanelPoint 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]) } } } if (selectPanelPoint.Data) { for (let key in selectPanelPoint.Data.Stock) { selectPanelPoint.Data.Stock[key].isLookPattern = true selectPanelPoint.Data.Stock[key].isLook = true if (element.id == selectPanelPoint.Data.Stock[key].FireElementId) { selectPanelPoint.Data.Stock[key].isTemplate = false element.isNewElement = true //该节点children是否存在新添加的真实素材 标识 //定义查看模式下能看到的元素 element.isLookPattern = true if (element.parentId) { data.forEach(i => { if (i.id == element.parentId) { i.isLookPattern = true } }) } // element.children.push(selectPanelPoint.Data.Stock[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 } } if (this.selectPanelPoint && this.selectPanelPoint.Data) { for (let key in this.selectPanelPoint.Data.Stock) { if (key == node.id) { this.selectPanelPoint.Data.Stock[key].isLook = !this.selectPanelPoint.Data.Stock[key].isLook } } } //所有消防要素模板变化islook值 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) //图例显隐 isRefresh ? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false isRefresh ? this.isShowProperty = true : null isRefresh ? this.isShowAttribute = true : null !this.pattern ? this.mateFireForce() : null //刷新 建筑楼层 火源/力量图标 this.beforeOneCheckedBuildingIsShow = false 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]) } } let selectPanelPoint: any = this.canvasData.selectPanelPoint || {} //当前 节点 数据 if (selectPanelPoint.Data) { for (let key in selectPanelPoint.Data.Stock) { //筛选数据 没有匹配全部放入到 其他 数组 let noMatch = this.allFireElements.find(every => every.id === selectPanelPoint.Data.Stock[key].FireElementId) if (!noMatch && selectPanelPoint.Data.Stock[key].Id != "图例") { this.allFireElements[this.allFireElements.length - 1].children.push(selectPanelPoint.Data.Stock[key]) } } } this.handleTreeData(storeyData, selectPanelPoint) //处理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; //可展开面板处置预案 显隐 beforeOneCheckedBuildingIsShow: boolean = false; //想定作业下 建筑是否显示 togglebeforeOneCheckedBuilding() { this.beforeOneCheckedBuildingIsShow = !this.beforeOneCheckedBuildingIsShow } 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) } //可展开面板展开或关闭 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 = { id: null }; //选中的 平面图 楼层/区域 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) => { 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.pattern && 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, { 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) { 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) { 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) => { 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) => { 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 = 10 * 1024 * 1024 //10MB限制 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) { //上传文件>10MB时 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('上传底图需小于10MB', '确定', 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 this.getDisposalNode() }) }) } else { //单位 有灾情时 this.allFirePlan = data let params = { disasterId: this.allFirePlan[0].id || '' } this.http.get('/api/DisposalNodes', { params: params }).subscribe(data => { //所有处置节点 this.canvasData.allDisposalNode = data this.getDisposalNode() }) } }) } //获取所有处置节点 getDisposalNode() { this.selectDisposalNode = '' this.canvasData.selectPanelPoint = new DisposalNodeData(); 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); }) } //新建 底图数据节点 addBGCPanelPoint(e) { e.stopPropagation() let dialogRef = this.dialog.open(addBGCDisposalNodeComponent); dialogRef.afterClosed().subscribe(data => { if (data) { this.canvasData.selectStorey.imageWidth = 0 //修正加载底图BUG this.canvasData.customizeDisposalNode = data //自定义数据节点 let imgURL = window.URL.createObjectURL(data.file) //将图片生成 url地址 // this.canvasData.selectPanelPointBaseData = {description: '', notes: '', weather: '', airTemperature: '', windDirection: '', windScale: ''} //更新 当前数据节点对应父级节点 this.selectDisposalNode = '' this.canvasData.selectPanelPoint = new DisposalNodeData() //更新 当前数据节点 this.canvasData.selectPanelPoint.BackgroundImageUrl = imgURL this.customizeNodes() } }) } //新建 处置预案 节点 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') || '', weather: this.canvasData.isInheritSky.weather, airTemperature: Number(this.canvasData.isInheritSky.airTemperature), windDirection: Number(this.canvasData.isInheritSky.windDirection), windScale: Number(this.canvasData.isInheritSky.windScale), } 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 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: any) => { this.canvasData.selectPanelPoint = this.canvasData.deserialize(JSON.stringify(data || new DisposalNodeData())) //选择 当前 节点 this.canvasData.selectPanelPoint.Data = this.canvasData.deserialize(this.canvasData.selectPanelPoint.Data) data.backgroundImageUrl ? this.customizeNodes() : this.seekPanelPoint(parameter) }) } //if } //else if } //自定义数据节点 时 async customizeNodes() { this.canvasData.selectPanelPoint.BackgroundImageAngle = 0 await this.canvas.loadNoRelevantInformationDisposalPlan(this.canvasData.selectPanelPoint) let other = { children: [], computed: true, id: '', name: '其他', order: 999, parentId: null, tag: "INPUT", isLookPattern: true } this.allFireElements = [other] this.canvas.setNameVisible(this.basicInfo, 0) this.canvas.setNameVisible(this.wantToWork, 1) // this.canvas.setLegendVisible(this.isShowLegend) //图例显隐 this.beforeOneCheckedBuildingIsShow = false this.canvasData.isChange = false //服务中 数据是否改动 改为false this.isShowProperty = true this.isShowAttribute = true let selectPanelPoint = JSON.parse(JSON.stringify(this.canvasData.selectPanelPoint || {})) //当前 节点 数据 if (selectPanelPoint.Data) { for (let key in selectPanelPoint.Data.Stock) { //筛选数据 没有匹配全部放入到 其他 数组 let noMatch = this.allFireElements.find(every => every.id === selectPanelPoint.Data.Stock[key].FireElementId) if (!noMatch && selectPanelPoint.Data.Stock[key].Id != "图例") { this.allFireElements[this.allFireElements.length - 1].children.push(selectPanelPoint.Data.Stock[key]) } } } this.handleTreeData({ data: {} }, selectPanelPoint) //处理tree数据结构 } //查找 数据节点 对应 建筑/楼层 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 if (index == -1) { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('匹配楼层已被删除', '确定', config); } 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 if (index == -1) { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('匹配楼层已被删除', '确定', config); } 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: 'app-organization', templateUrl: './changeOr.html', styleUrls: ['./collection-tools.component.scss'] }) export class Organization { constructor(private tree: TreeService, private http: HttpClient, public dialog: MatDialog, public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data) { } private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数 return { expandable: !!node.children && node.children.length > 0, name: node.name, level: level, id: node.id, }; } 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; ngOnInit(): void { this.getAllOrganization() } selectedNodeId: any selectedNodeName: any selectedNode(node) { this.selectedNodeId = node.id this.selectedNodeName = node.name } getAllOrganization() { this.http.get('/api/Organizations').subscribe(data => { this.dataSource.data = this.tree.toTree(data); this.treeControl.expand(this.treeControl.dataNodes[0]); }) } ok() { this.dialogRef.close({ id: this.selectedNodeId, name: this.selectedNodeName }) } }