import { Component, OnInit, Inject, ViewChild,ElementRef,Renderer2 } 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} from './leftFunctionalDomain' import Swiper from 'swiper'; import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; import {FlatTreeControl} from '@angular/cdk/tree'; import {WorkingAreaComponent} from '../../working-area/working-area.component' import {CanvasShareDataService} from '../../canvas-share-data.service' //引入服务 @Component({ selector: 'app-collection-tools', templateUrl: './collection-tools.component.html', styleUrls: ['./collection-tools.component.scss'] }) export class CollectionToolsComponent implements OnInit { @ViewChild('canvas') canvas:WorkingAreaComponent; //父组件中获得子组件的引用 constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,public canvasData: CanvasShareDataService) { } // 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, node:node }; } 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; selected = 'option1' //图标大小选择框 basicInfo:boolean = true //基本信息名称显隐 wantToWork:boolean = true //想定作业名称显隐 allBuildings //该单位所有建筑 beforeOneCheckedBuilding:any = {name:"总平面图"}; //当前点击选择的建筑 checkedBuildingIndex:number = -1 //当前点击选择的建筑index isEditPat:boolean = true //当前是否是编辑模式 proObject = { "Id": "6856647621407145995", "Name": "实景照片", "Angle": 104.0, "Color": "#FFFFFFFF", "Point": { "x": -45.2675133, "y": 26.3694324 }, "Width": 66, "Border": { "w": 0.0, "x": 0.0, "y": 0.0, "z": 0.0 }, "Height": 66, "Enabled": true, "FloorId": "5e902b399f45957cf4387616", "DrawMode": 0, "FillMode": 1, "GameMode": 0, "ImageUrl": "/api/Objects/PlanPlatform/5e7c13e9bb3cf106508afafc.png", "CompanyId": null, "FixedSize": true, "FloorName": null, "Thickness": 0, "BuildingId": null, "MultiPoint": null, "TemplateId": "5e7c13ef61550e2754d461c8", "FireElementId": "5e796f040814180f1c1ecaf5", "PropertyInfos": [{ "Tag": "", "Order": 0, "Enabled": true, "Visible": true, "Required": false, "RuleName": "", "RuleValue": "", "PhysicalUnit": "", "PropertyName": "单行文本", "PropertyType": 0, "PropertyValue": "99999" },{ "Tag": "", "Order": 0, "Enabled": true, "Visible": true, "Required": false, "RuleName": "", "RuleValue": "", "PhysicalUnit": "", "PropertyName": "多行文本", "PropertyType": 1, "PropertyValue": "99999" },{ "Tag": "", "Order": 0, "Enabled": true, "Visible": true, "Required": false, "RuleName": "", "RuleValue": "", "PhysicalUnit": "", "PropertyName": "数值", "PropertyType": 2, "PropertyValue": "666" }, { "Tag": "", "Order": 0, "Enabled": true, "Visible": true, "Required": false, "RuleName": "", "RuleValue": "", "PhysicalUnit": "张", "PropertyName": "布尔值", "PropertyType": 6, "PropertyValue": "1" }, { "Tag": "", "Order": 0, "Enabled": true, "Visible": true, "Required": false, "RuleName": "", "RuleValue": "", "PhysicalUnit": "张", "PropertyName": "图片", "PropertyType": 4, "PropertyValue": "5" }, { "Tag": null, "Order": 0, "Enabled": false, "Visible": false, "Required": false, "RuleName": null, "RuleValue": null, "PhysicalUnit": null, "PropertyName": "图片", "PropertyType": 3, "PropertyValue": "/api/Objects/WebPlan2D/5e8ed394aaca5f7c102530ad/5f27b4c15ba53b1bc0ae312e.png" }, { "Tag": null, "Order": 0, "Enabled": false, "Visible": false, "Required": false, "RuleName": null, "RuleValue": null, "PhysicalUnit": null, "PropertyName": "图片", "PropertyType": 3, "PropertyValue": "/api/Objects/PlanPlatform/5e7c0ff1bb3cf106508afaed.png" }, { "Tag": null, "Order": 0, "Enabled": false, "Visible": false, "Required": false, "RuleName": null, "RuleValue": null, "PhysicalUnit": null, "PropertyName": "图片", "PropertyType": 3, "PropertyValue": "/api/Objects/PlanPlatform/5e7abccbefc8471c94ff19ff.png" }, { "Tag": null, "Order": 0, "Enabled": false, "Visible": false, "Required": false, "RuleName": null, "RuleValue": null, "PhysicalUnit": null, "PropertyName": "图片", "PropertyType": 3, "PropertyValue": "/api/Objects/PlanPlatform/5e7d68e5e72823213c55e4cf.png" },{ "Tag": null, "Order": 0, "Enabled": false, "Visible": false, "Required": false, "RuleName": null, "RuleValue": null, "PhysicalUnit": null, "PropertyName": "方向", "PropertyType": 5, "PropertyValue": "4" },{ "Tag": null, "Order": 0, "Enabled": false, "Visible": false, "Required": false, "RuleName": null, "RuleValue": null, "PhysicalUnit": null, "PropertyName": "供给区域", "PropertyType": 7, "PropertyValue": "4" },{ "Tag": null, "Order": 0, "Enabled": false, "Visible": false, "Required": false, "RuleName": null, "RuleValue": null, "PhysicalUnit": null, "PropertyName": "供给类型", "PropertyType": 8, "PropertyValue": "4" }], "IsFromBuilding": false, "InteractiveMode": 0 } assetName:String//素材名称 assetWidth:number//素材宽度 assetHeight:number//素材高度 sliderValue:number = 0//滑竿的值 isHighLight:boolean = false//是否高亮选择框 PropertyInfos = [] //去除图片链接真正用于循环的内容 imagesArrNum //素材属性图片数量上限 imagesArr = [] //属性中的图片链接集合 clickedIndex //点击图片时的索引值 //传入素材对象，设置右侧属性栏内容 canvasAssetObj //传入的素材属性对象 isImgNumCss = false //控制上传文件input显隐 mySwiper:any //轮播图实例 setAssetsProperty(obj){ 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.PropertyInfos = obj.PropertyInfos 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 } } //右侧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; } } //消防要素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; } } //素材宽度输入框改变 assetWidthIunput(){ this.canvasAssetObj.Width = this.assetWidth // 需要将this.canvasAssetObj替换到serves服务对应对象中 ↓↓↓↓↓↓↓ } //素材高度输入框改变 assetHeightIunput(){ this.canvasAssetObj.Height = this.assetHeight } //素材角度输入框改变 assetAngleIunput(){ this.canvasAssetObj.Angle = this.sliderValue } //素材是否高亮改变----->本地操作行为 assetHighLightIunput(){ } //动态属性素材input框值改变 assetInputChange(i,e){ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ return i.PropertyName == item.PropertyName }) this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value } //动态属性素材布尔值框改变radio assetRadioChange(i,boolean){ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ return i.PropertyName == item.PropertyName }) this.canvasAssetObj.PropertyInfos[index].PropertyValue = boolean } //查看图片详情 lookImg(){ const dialogRef = this.dialog.open(ViewDetails, {//调用open方法打开对话框并且携带参数过去 data: {imagesArr:this.imagesArr,index:this.clickedIndex} }); dialogRef.afterClosed().subscribe(data=>{ }); } //上传素材图片 selectFile(e){ let imgFile = e.target.files[0] || null //上传的文件 this.startUploading(imgFile) } objectName:any //上传对象名 startUploading (imgFile) { let _this = this let file = imgFile || null //获取上传的文件 let fileSize = file.size || null //上传文件的总大小 let shardSize = 5 * 1024 * 1024 //5MB一个分片 let companyId = sessionStorage.getItem("companyId") if (file && fileSize <= shardSize) { //上传文件<=5MB时 let formData = new FormData() formData.append("file",file) this.http.post(`api/Objects/WebPlan2D/${companyId}`,formData).subscribe((data:any)=>{ this.objectName = data.objectName const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('上传成功','确定',config) //在原始素材对象和需要循环图片的对象中分别push最新上传的图片 let imgObj = { "Tag": null, "Order": 0, "Enabled": false, "Visible": false, "Required": false, "RuleName": null, "RuleValue": null, "PhysicalUnit": null, "PropertyName": "图片", "PropertyType": 3, "PropertyValue": "/api/Objects/WebPlan2D/" + this.objectName } this.imagesArr.push(imgObj) this.canvasAssetObj.PropertyInfos.push(imgObj) setTimeout(() => { this.mySwiper = new Swiper('.swiper-container',{ loop: false, // grabCursor: true, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, on:{ click: function(){ _this.clickedIndex = this.clickedIndex }, } }); // this.mySwiper.update() this.mySwiper.slideTo(this.imagesArr.length - 1) }, 0); //判断上传素材属性图片是否超出数量 超出数量则隐藏input框 if(this.imagesArr.length < this.imagesArrNum){//不超出input才会显示 this.isImgNumCss = true }else{ this.isImgNumCss = false } //此处需要把 this.canvasAssetObj这个传入对象 返回给canvas 或者在源数据中替换掉↓↓↓↓↓↓↓↓↓↓ }) } 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(); }, 0); //此处需要把 this.canvasAssetObj这个传入对象 返回给canvas ↓↓↓↓↓↓↓↓↓↓ } } //动态属性方向select选择框 direction(i,e){ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ return i.PropertyName == item.PropertyName }) this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value } //动态属性供给区域select选择框 supplyArea(i,e){ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ return i.PropertyName == item.PropertyName }) this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value } //动态属性供给类型select选择框 supplyType(i,e){ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ return i.PropertyName == item.PropertyName }) this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value } ngOnInit(): void { this.getAllLibrary() this.getSitePlan() this.getAllBuildings() setTimeout(() => { // console.log(1,this.canvasData.selectStorey) // console.log(2,this.canvasData.originalcompanyBuildingData) // console.log(3,this.canvasData.originaleveryStoreyData) }, 3000); // this.setAssetsProperty(this.proObject) //测试 } ngAfterViewInit(): void { // 监听canvas组件选中素材事件 this.canvas.on("select",obj=>{ console.log(99999999999,obj) }) // 监听canvas组件取消选中素材事件 this.canvas.on("deselect ",obj=>{ console.log(99999999999,obj) }) } //点击基本信息名称 basicInfoClick(){ this.basicInfo = !this.basicInfo } //点击想定作业名称 wantToWorkClick(){ this.wantToWork = !this.wantToWork } //进入编辑模式 editpat(){ this.isEditPat = true let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('进入编辑模式','确定',config); } //进入查看模式 lookpat(){ this.isEditPat = false let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('进入查看模式','确定',config); } //保存平面图 saveSite(){ } //获得所有的建筑物 getAllBuildings(){ this.http.get("/api/CompanyAccount/Buildings").subscribe(data=>{ this.allBuildings = data }) } //创建建筑 createBuilding(){ let data = this.allBuildings 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.beforeOneCheckedBuilding = item this.checkedBuildingIndex = index if (index==-1) { //总平面图数据 this.getSitePlan() } else { //建筑楼层/区域数据 this.getBuildingSitePlan(item) } } } //编辑建筑 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){ this.http.delete(`/api/CompanyAccount/Buildings/${item.id}`).subscribe(data=>{ const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('删除成功','确定',config); this.http.get("/api/CompanyAccount/Buildings").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() }) } } storeyData //将建筑素材和当前楼层素材合二为一 //处理 tree 数据结构 handleTreeData (storeyData) { this.storeyData = storeyData let data = this.allFireElements //所有消防要素 let treeData = [] //tree型 处理完成后的数据 data.forEach(element => { element.isTemplate = true //添加模板标识 element.isLook = true //添加是否可见标识 element.children = [] if(storeyData){ for(let key in storeyData.data){ if(element.id == storeyData.data[key].FireElementId){ storeyData.data[key].isTemplate = false storeyData.data[key].isLook = true element.isNewElement = 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(node.node.Point){ this.setAssetsProperty(node.node) } } //点击数节点的显示隐藏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 } } this.allFireElements.forEach(item=>{ if(item.id == node.id){ item.isLook = !item.isLook } }) function updateChildrenIsLook(node, childHandleCb) { if(node.children && node.children.length != 0){ node.children.forEach(item => { item.isLook = !item.isLook if (childHandleCb) { childHandleCb(item) } }) } } updateChildrenIsLook(node, (child) => { updateChildrenIsLook(child, null) }) this.dataSource.data = [...this.dataSource.data] this.treeControl.expandAll() } //封装 刷新 tree 数据 renovateTreeData () { this.canvas.refresh() this.canvasData.isChange = false //服务中 数据是否改动 改为false this.isShowAttribute = true //属性栏展示 默认数据 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] } } this.handleTreeData(storeyData) //处理tree数据结构 } //陈鹏飞↓↓↓ //陈鹏飞↓↓↓ //陈鹏飞↓↓↓ allFireElements:any = []; //当前 单位/建筑 下的消防要素 isShowAttribute:boolean = true; //属性栏 是否显示 默认数据 toggleExpandPanel:boolean = false; //可展开面板展开或关闭 togglePlane:boolean = true; //可展开面板平面图 显隐 toggleMaterialBank:boolean = false; //可展开面板素材库 显隐 //可展开面板展开或关闭 toggle () { this.toggleExpandPanel = !this.toggleExpandPanel } //可展开面板 平面图 展开或关闭 togglePlanarGraph () { this.togglePlane = !this.togglePlane } //可展开面板 素材库 展开或关闭 toggleMaterial () { this.toggleMaterialBank = !this.toggleMaterialBank } sitePlanData:any = []; //总平面图 楼层/区域 数据 selectingSitePlan:any; //选中的 平面图 楼层/区域 selectSitePlanIndex:number; //选中的 平面图 楼层/区域 index //获取总平面图 getSitePlan () { this.getFireElements(sessionStorage.getItem('buildingTypeId')) //获取单位下 消防要素 this.getSitePlanCompanyData() //获取 单位 数据 this.http.get('/api/CompanyAccount/SitePlans').subscribe(data=>{ this.sitePlanData = data this.selectingSitePlan = this.sitePlanData[0] || {} this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据 this.selectSitePlanIndex = 0 this.getSitePlanStorey(this.selectingSitePlan) //获取 平面图 楼层数据 }) } //获取建筑 楼层/区域 getBuildingSitePlan (item) { let params = { buildingId: item.id } this.getFireElements(item.buildingTypes[0].id || '') //获取建筑下 消防要素 this.getBuildingData(params) //获取 建筑 数据 this.http.get('/api/CompanyAccount/BuildingAreas',{params}).subscribe(data=>{ this.sitePlanData = data this.selectingSitePlan = this.sitePlanData[0] || {} this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据 this.selectSitePlanIndex = 0 this.getBuildingStorey(this.selectingSitePlan) //获取 建筑 楼层数据 }) } //根据单位类型获得所有的消防要素 getFireElements (e) { let params = {ids:e} this.http.get('/api/Companies/FireElements',{params}).subscribe((data:any)=>{ this.allFireElements = data //所有消防要素 }) } //获取 单位 数据 getSitePlanCompanyData () { this.http.get('/api/CompanyAccount/CompanyData').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 = {} }) } //获取 平面图 楼层数据 getSitePlanStorey (e) { let params = {sitePlanId: e.id} this.http.get(`/api/CompanyAccount/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.renovateTreeData() }) } //获取 建筑 数据 getBuildingData (e) { this.http.get(`/api/CompanyAccount/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 = {} }) } //获取 建筑 楼层数据 getBuildingStorey (e) { let params = {buildingAreaId: e.id} this.http.get(`/api/CompanyAccount/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.renovateTreeData() }) } //点击选中 平面图 楼层/区域 时 selectSitePlan (item,index) { if (this.selectSitePlanIndex != index) { this.selectingSitePlan = item this.selectSitePlanIndex = index this.canvasData.selectStorey = item //服务中 存一份数据 if (this.checkedBuildingIndex==-1) { //总平面图时 this.getSitePlanStorey(item) //获取 平面图 楼层数据 } else { //楼层/区域时 this.getBuildingStorey(item) //获取 建筑 楼层数据 } } } //新增平面图 楼层/区域 foundPanel (e) { e.stopPropagation() let data = { isBuilding: this.checkedBuildingIndex==-1? false:true, Panel: this.beforeOneCheckedBuilding, order: this.sitePlanData.length? this.sitePlanData[this.sitePlanData.length-1].order+1:0, } let dialogRef = this.dialog.open(leftFunctionalDomainComponent,{data}); dialogRef.afterClosed().subscribe(data=>{ if (data =='总平面图') { this.renovateSitePlan() } else if (data =='建筑') { this.renovateBuilding() } }) } //编辑平面图 楼层/区域 editPlaneData (e) { let data = { isBuilding: this.checkedBuildingIndex==-1? false:true, Panel: this.beforeOneCheckedBuilding, buildingData: e, } let dialogRef = this.dialog.open(editPlaneFigureComponent,{data}); dialogRef.afterClosed().subscribe(data=>{ if (data =='总平面图') { this.renovateSitePlan() } else if (data =='建筑') { this.renovateBuilding() } }) } //平面图 楼层/区域 上移 moveUp (item,index) { if (index != 0) { let replaceIndex = this.sitePlanData[index].order this.sitePlanData[index].order = this.sitePlanData[index-1].order this.sitePlanData[index-1].order = replaceIndex if (this.checkedBuildingIndex==-1) { //总平面图 this.http.put(`/api/CompanyAccount/SitePlans/${this.sitePlanData[index-1].id}`,this.sitePlanData[index-1]).subscribe(data=>{ this.http.put(`/api/CompanyAccount/SitePlans/${this.sitePlanData[index].id}`,this.sitePlanData[index]).subscribe(data=>{ this.selectSitePlanIndex = this.selectSitePlanIndex-1 this.renovateSitePlan() }) }) } else { //楼层/区域 this.http.put(`/api/CompanyAccount/BuildingAreas/${this.sitePlanData[index-1].id}`,this.sitePlanData[index-1]).subscribe(data=>{ this.http.put(`/api/CompanyAccount/BuildingAreas/${this.sitePlanData[index].id}`,this.sitePlanData[index]).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/CompanyAccount/SitePlans/${this.sitePlanData[index+1].id}`,this.sitePlanData[index+1]).subscribe(data=>{ this.http.put(`/api/CompanyAccount/SitePlans/${this.sitePlanData[index].id}`,this.sitePlanData[index]).subscribe(data=>{ this.selectSitePlanIndex = this.selectSitePlanIndex+1 this.renovateSitePlan() }) }) } else { //楼层/区域 this.http.put(`/api/CompanyAccount/BuildingAreas/${this.sitePlanData[index+1].id}`,this.sitePlanData[index+1]).subscribe(data=>{ this.http.put(`/api/CompanyAccount/BuildingAreas/${this.sitePlanData[index].id}`,this.sitePlanData[index]).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/CompanyAccount/SitePlans/${item.id}`,item).subscribe(data=>{ this.renovateSitePlan() }) } else { //楼层/区域 this.http.put(`/api/CompanyAccount/BuildingAreas/${item.id}`,item).subscribe(data=>{ this.renovateBuilding() }) } } //删除 平面图 楼层/区域 deletePlaneData (item) { let isDelete = confirm('您确定要删除吗') if (isDelete) { if (this.checkedBuildingIndex==-1) { //总平面图 this.http.delete(`/api/CompanyAccount/SitePlans/${item.id}`).subscribe(data=>{ this.getSitePlan() }) } else { //楼层/区域 this.http.delete(`/api/CompanyAccount/BuildingAreas/${item.id}`).subscribe(data=>{ this.getBuildingSitePlan(this.beforeOneCheckedBuilding) }) } } } //复制图层 平面图 楼层/区域 duplicateLayer (item) { if (this.checkedBuildingIndex==-1) { //总平面图 item.id = "" item.modifiedTime = new Date() item.name = item.name + '(副本)' item.order = this.sitePlanData[this.sitePlanData.length-1].order+1 this.http.post('/api/CompanyAccount/SitePlans',item).subscribe((data:any)=>{ let newData = { version: this.canvasData.originaleveryStoreyData.version || "2.0", id: "", data: this.canvasData.originaleveryStoreyData.data || null, sitePlanId: data.id } this.http.post('/api/CompanyAccount/SitePlanData',newData).subscribe(data=>{ this.renovateSitePlan() }) }) } else { //楼层/区域 item.id = "" item.modifiedTime = new Date() item.name = item.name + '(副本)' item.order = this.sitePlanData[this.sitePlanData.length-1].order+1 this.http.post('/api/CompanyAccount/BuildingAreas',item).subscribe((data:any)=>{ let newData = { version: this.canvasData.originaleveryStoreyData.version || "2.0", id: "", data: this.canvasData.originaleveryStoreyData.data || null, buildingAreaId: data.id } this.http.post('/api/CompanyAccount/BuildingAreaData',newData).subscribe(data=>{ this.renovateBuilding() }) }) } } //平面图 楼层/区域 替换底图 replaceBaseMap (e,item) { e.stopPropagation(); let file = e.target.files[0] || null //获取上传的文件 let fileSize = file.size || null //上传文件的总大小 let maxSize = 5 * 1024 * 1024 //5MB一个分片 if (file && fileSize<=maxSize) { //上传文件<=5MB时 let formData = new FormData() formData.append("file",file) this.http.post(`/api/Objects/WebPlan2D/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{ this.renovateBaseMap(data.objectName,item) }) } else { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('上传底图需小于5MB','确定',config); } } //封装 替换底图 function renovateBaseMap (e,item) { item.imageUrl = '/api/Objects/WebPlan2D/' + e if (this.checkedBuildingIndex ==-1) { //总平面图 this.http.put(`/api/CompanyAccount/SitePlans/${item.id}`,item).subscribe(data=>{ this.renovateSitePlan() const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('上传底图成功','确定',config); }) } else { //楼层/区域 this.http.put(`/api/CompanyAccount/BuildingAreas/${item.id}`,item).subscribe(data=>{ this.renovateBuilding() const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('上传底图成功','确定',config); }) } } //封装 统一刷新 左侧菜单栏数据 // renovateLeftMenu () { // } //封装 刷新总平面图 数据 renovateSitePlan () { this.http.get('/api/CompanyAccount/SitePlans').subscribe(data=>{ this.sitePlanData = data this.selectingSitePlan = this.sitePlanData[this.selectSitePlanIndex] this.canvasData.selectStorey = this.sitePlanData[this.selectSitePlanIndex] //服务中 存一份数据 const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('数据更新成功','确定',config); }) } //封装 刷新 楼层/区域 数据 renovateBuilding () { let params = { buildingId: this.beforeOneCheckedBuilding.id } this.http.get('/api/CompanyAccount/BuildingAreas',{params}).subscribe(data=>{ this.sitePlanData = data this.selectingSitePlan = this.sitePlanData[this.selectSitePlanIndex] this.canvasData.selectStorey = this.sitePlanData[this.selectSitePlanIndex] //服务中 存一份数据 const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('数据更新成功','确定',config); }) } allLibrary:any = []; //所有素材库 + 素材 selectLibrary:any; //选中的素材库 selectImage:any; //选中的素材库图片 selectImageIndex:number; //选中的素材库图片index //获取素材库 getAllLibrary () { this.http.get('/api/AssetLibraries?tag=input').subscribe((data:any)=>{ data.forEach(element => { element.images = [] }); this.allLibrary = data }) } //素材库展开面板展开时 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() } } //创建建筑 @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.length != 0 ? this.data[this.data.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/CompanyAccount/Buildings",data).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/CompanyAccount/Buildings/${this.data.item.id}`,data).subscribe(data=>{ this.dialogRef.close("修改成功"); },err=>{ this.dialogRef.close("修改失败"); }) } } //查看图片大图 @Component({ selector: 'viewdetails', templateUrl: './viewdetails.html', styleUrls: ['./collection-tools.component.scss'] }) export class ViewDetails { // myControl = new FormControl(); //注入MatDialogRef，可以用来关闭对话框 //要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌 constructor(private http: HttpClient,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data) {} imagesArr = this.data.imagesArr onNoClick(): void { this.dialogRef.close(); } ngOnInit(): void { setTimeout(() => { var mySwiper = new Swiper('.swiper-container',{ loop: false, initialSlide :this.data.index,//默认索引 // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } //其他设置 }); }, 0); } closeDialog(){ this.dialogRef.close(); } }