@ -15,7 +15,7 @@ import Swiper from 'swiper';
export class CollectionToolsComponent implements OnInit {
constructor ( private http :HttpClient , public dialog : MatDialog , public snackBar : MatSnackBar ) { }
mySwiper
selected = 'option1' //图标大小选择框
basicInfo :boolean = true //基本信息名称显隐
wantToWork :boolean = true //想定作业名称显隐
@ -66,9 +66,45 @@ export class CollectionToolsComponent implements OnInit {
"RuleName" : "" ,
"RuleValue" : "" ,
"PhysicalUnit" : "" ,
"PropertyName" : "名称/编号 " ,
"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 ,
@ -105,6 +141,66 @@ export class CollectionToolsComponent implements OnInit {
"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
@ -115,11 +211,17 @@ export class CollectionToolsComponent implements OnInit {
sliderValue :number = 0 //滑竿的值
isHighLight :boolean = false //是否高亮选择框
PropertyInfos = [ ] //去除图片链接真正用于循环的内容
imagesArrNum //素材属性图片数量上限
imagesArr = [ ] //属性中的图片链接集合
clickedIndex //点击图片的索引值
clickedIndex //点击图片时的索引值
//传入素材对象，设置右侧属性栏内容
canvasAssetObj //传入的素材属性对象
isImgNumCss = false //控制上传文件input显隐
setAssetsProperty ( obj ) {
let _this = this
this . canvasAssetObj = obj
this . assetName = obj . Name
this . assetWidth = obj . Width
this . assetHeight = obj . Height
@ -131,14 +233,16 @@ export class CollectionToolsComponent implements OnInit {
} else {
this . PropertyInfos . push ( item )
}
if ( item . PropertyType == 4 ) {
this . imagesArrNum = item . PropertyValue
}
} )
//如果存在图片则加载轮播图
if ( this . imagesArr . length ) {
setTimeout ( ( ) = > {
var mySwiper = new Swiper ( '.swiper-container' , {
this . mySwiper = new Swiper ( '.swiper-container' , {
loop : false ,
grabCursor : true ,
// grabCursor: true,
// 如果需要前进后退按钮
navigation : {
nextEl : '.swiper-button-next' ,
@ -149,12 +253,15 @@ export class CollectionToolsComponent implements OnInit {
_this . clickedIndex = this . clickedIndex
} ,
}
} ) ;
} ) ;
} , 0 ) ;
}
//判断此时图片数量是否达到上限
if ( this . imagesArr . length < this . imagesArrNum ) { //如果不超出
this . isImgNumCss = true
} else {
this . isImgNumCss = false
}
}
//素材宽度输入框改变
@ -173,22 +280,159 @@ export class CollectionToolsComponent implements OnInit {
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 . 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 ( )
this . setAssetsProperty ( this . proObject ) //测试
function xxx ( args ) {
console . log ( args )
}
xxx ( {
name : "xxxx"
} )
}
//点击基本信息名称
@ -587,7 +831,6 @@ export class EditBuilding {
}
//查看图片大图
//查看图片大图和视频
@Component ( {
selector : 'viewdetails' ,
templateUrl : './viewdetails.html' ,
@ -606,7 +849,6 @@ export class ViewDetails {
setTimeout ( ( ) = > {
var mySwiper = new Swiper ( '.swiper-container' , {
loop : false ,
grabCursor : true ,
initialSlide :this.data.index , //默认索引
// 如果需要前进后退按钮
navigation : {
