@ -2,6 +2,10 @@ import { Component, OnInit, Inject } 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' ;
@Component ( {
selector : 'app-collection-tools' ,
@ -11,19 +15,182 @@ import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
export class CollectionToolsComponent implements OnInit {
constructor ( private http :HttpClient , public dialog : MatDialog , public snackBar : MatSnackBar ) { }
selected = 'option1' //图标大小选择框
basicInfo :boolean = true //基本信息名称显隐
wantToWork :boolean = true //想定作业名称显隐
allBuildings //该单位所有建筑
checkedBuildingDate //当前点击选择的建筑
beforeOneCheckedBuilding :any = { name : "总平面图" } ; //当前点击选择的建筑
checkedBuildingIndex :number = - 1 //当前点击选择的建筑index
isEditPat :boolean = true //当前是否是编辑模式
sliderValue :String = "30" //滑竿的值
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" : 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"
} ] ,
"IsFromBuilding" : false ,
"InteractiveMode" : 0
}
assetName :String //素材名称
assetWidth :number //素材宽度
assetHeight :number //素材高度
sliderValue :number = 0 //滑竿的值
isHighLight :boolean = false //是否高亮选择框
PropertyInfos = [ ] //去除图片链接真正用于循环的内容
imagesArr = [ ] //属性中的图片链接集合
clickedIndex //点击图片的索引值
//传入素材对象，设置右侧属性栏内容
setAssetsProperty ( obj ) {
let _this = this
this . assetName = obj . Name
this . assetWidth = obj . Width
this . assetHeight = obj . Height
this . sliderValue = obj . Angle
obj . PropertyInfos . forEach ( item = > {
if ( item . PropertyType == 3 ) { //如果是图片链接类型
this . imagesArr . push ( item )
} else {
this . PropertyInfos . push ( item )
}
} )
//如果存在图片则加载轮播图
if ( this . imagesArr . length ) {
setTimeout ( ( ) = > {
var 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 ) ;
}
}
//素材宽度输入框改变
assetWidthIunput ( ) {
this . proObject . Width = this . assetWidth
}
//素材高度输入框改变
assetHeightIunput ( ) {
this . proObject . Height = this . assetHeight
}
//素材角度输入框改变
assetAngleIunput ( ) {
this . proObject . Angle = this . sliderValue
}
//素材是否高亮改变
assetHighLightIunput ( ) {
}
//查看图片详情
lookImg ( ) {
const dialogRef = this . dialog . open ( ViewDetails , { //调用open方法打开对话框并且携带参数过去
data : { imagesArr :this.imagesArr , index :this.clickedIndex }
} ) ;
}
ngOnInit ( ) : void {
this . getAllLibrary ( )
this . getSitePlan ( )
this . checkedBuildingDate = "总平面图"
this . getAllBuildings ( )
this . setAssetsProperty ( this . proObject ) //测试
}
//点击基本信息名称
basicInfoClick ( ) {
this . basicInfo = ! this . basicInfo
@ -78,8 +245,16 @@ export class CollectionToolsComponent implements OnInit {
} ) ;
}
//选择建筑
checkedBuilding ( item ) {
this . checkedBuildingDate = item . name
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 ) {
@ -109,7 +284,12 @@ export class CollectionToolsComponent implements OnInit {
config . verticalPosition = 'top' ;
config . duration = 3000
this . snackBar . open ( '删除成功' , '确定' , config ) ;
this . getAllBuildings ( )
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' ;
@ -121,7 +301,6 @@ export class CollectionToolsComponent implements OnInit {
}
//陈鹏飞↓↓↓
//陈鹏飞↓↓↓
//陈鹏飞↓↓↓
@ -142,30 +321,132 @@ export class CollectionToolsComponent implements OnInit {
this . toggleMaterialBank = ! this . toggleMaterialBank
}
sitePlanData :any = [ ] ; //总平面图数据
selectingSitePlan :any ; //选中的平面图
selectSitePlanIndex :number ; //选中的平面图index
sitePlanData :any = [ ] ; //总平面图 楼层/区域 数据
selectingSitePlan :any ; //选中的 平面图 楼层/区域
selectSitePlanIndex :number ; //选中的 平面图 楼层/区域 index
//获取总平面图
getSitePlan ( ) {
this . http . get ( '/api/CompanyAccount/SitePlans' ) . subscribe ( data = > {
this . sitePlanData = data
if ( this . sitePlanData . length ) { //数据不为空时
this . selectingSitePlan = this . sitePlanData [ 0 ]
this . selectSitePlanIndex = 0
}
this . selectingSitePlan = this . sitePlanData [ 0 ] || ''
this . selectSitePlanIndex = 0
} )
}
//新增平面图
//获取建筑 楼层/区域
getBuildingSitePlan ( item ) {
let params = {
buildingId : item.id
}
this . http . get ( '/api/CompanyAccount/BuildingAreas' , { params } ) . subscribe ( data = > {
this . sitePlanData = data
this . selectingSitePlan = this . sitePlanData [ 0 ] || ''
this . selectSitePlanIndex = 0
} )
}
//新增平面图 楼层/区域
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 . renovateLeftMenu ( - 1 , this . beforeOneCheckedBuilding )
} else if ( data == '建筑' ) {
this . renovateLeftMenu ( 0 , this . beforeOneCheckedBuilding )
}
} )
}
//点击选中平面图时
//编辑平面图 楼层/区域
editPlaneData ( e ) {
console . log ( e )
let dialogRef = this . dialog . open ( editPlaneFigureComponent ) ;
}
//封装 统一刷新 左侧菜单栏数据
renovateLeftMenu ( index , item ) {
if ( index == - 1 ) { //总平面图数据
this . getSitePlan ( )
} else { //建筑楼层/区域数据
this . getBuildingSitePlan ( item )
}
}
//点击选中 平面图 楼层/区域 时
selectSitePlan ( item , index ) {
this . selectingSitePlan = item
this . selectSitePlanIndex = index
if ( this . selectSitePlanIndex != index ) {
this . selectingSitePlan = item
this . selectSitePlanIndex = index
}
}
//平面图 楼层/区域 替换底图
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 ) ;
} )
}
}
//封装 刷新总平面图 数据
renovateSitePlan ( ) {
this . http . get ( '/api/CompanyAccount/SitePlans' ) . subscribe ( data = > {
this . sitePlanData = data
this . selectingSitePlan = this . sitePlanData [ this . selectSitePlanIndex ]
} )
}
//封装 刷新 楼层/区域 数据
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 ]
} )
}
allLibrary :any = [ ] ; //所有素材库 + 素材
@ -187,9 +468,6 @@ export class CollectionToolsComponent implements OnInit {
opened ( e ) {
if ( ! e . images . length ) { //当前素材库没加载素材时
this . http . get ( ` /api/Assets?libraryId= ${ e . id } ` ) . subscribe ( ( data :any ) = > {
data . forEach ( element = > {
element . imageUrl = element . imageUrl + '?x-oss-process=image/auto-orient,1' //压缩图片
} ) ;
e . images = data
} )
}
@ -201,7 +479,7 @@ export class CollectionToolsComponent implements OnInit {
this . selectImage = items
this . selectImageIndex = index
}
}
@ -306,4 +584,41 @@ export class EditBuilding {
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 < ViewDetails > , @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 ,
grabCursor : true ,
initialSlide :this.data.index , //默认索引
// 如果需要前进后退按钮
navigation : {
nextEl : '.swiper-button-next' ,
prevEl : '.swiper-button-prev' ,
}
//其他设置
} ) ;
} , 0 ) ;
}
closeDialog ( ) {
this . dialogRef . close ( ) ;
}
}
