Browse Source

[新增]新增框选多个素材后修改共同拥有属性

zhuzhou
邵佳豪 4 years ago
parent
commit
812aae1383
  1. 110
      src/app/ui/collection-tools-building/collection-tools.component.html
  2. 170
      src/app/ui/collection-tools-building/collection-tools.component.ts
  3. 115
      src/app/ui/collection-tools-plan/collection-tools.component.html
  4. 191
      src/app/ui/collection-tools-plan/collection-tools.component.ts
  5. 113
      src/app/ui/collection-tools/collection-tools.component.html
  6. 172
      src/app/ui/collection-tools/collection-tools.component.ts
  7. 2
      src/app/working-area/working-area.component.ts

110
src/app/ui/collection-tools-building/collection-tools.component.html

@ -174,7 +174,7 @@
</div>
</div>
<!-- 平面图属性 -->
<div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute">
<div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute && !isMultipleAsset">
<p>面积(平方米)</p>
<div class="siteproperty_size">{{canvasData.selectStorey.area}}</div>
<p>详情</p>
@ -183,7 +183,7 @@
</div>
</div>
<!-- 素材属性 -->
<div class="assetsproperty" style="user-select: none" *ngIf="isShowProperty && !isShowAttribute">
<div class="assetsproperty" style="user-select: none" *ngIf="isShowProperty && !isShowAttribute && !isMultipleAsset">
<h3 style="text-align: center;font-weight: 900;">{{assetName}}</h3>
<div *ngIf="canvasAssetObj.InteractiveMode == 0">
@ -315,8 +315,112 @@
</select>
</div>
</div>
</div>
</div>
<!-- 框选多个素材属性 -->
<div class="assetsproperty" style="user-select: none" *ngIf="isMultipleAsset">
<div *ngIf="multipleAsset.InteractiveMode == 0">
<p>宽度(像素)</p>
<input type="number" class="biginput" [(ngModel)]="multipleAsset.Width" (input)="multipleAssetWidthInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<p>高度(像素)</p>
<input type="number" class="biginput" [(ngModel)]="multipleAsset.Height" (input)="multipleAssetHeightInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<p>角度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="multipleAsset.Angle"
oninput="if(value>360)value=360;if(value<0)value=0;" (input)="multipleAssetAngleInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="multipleAsset.Angle" (change)="multipleAssetAngleInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)"></mat-slider>
</div>
</div>
<!-- 如果是多点连线 -->
<div *ngIf="multipleAsset.InteractiveMode == 1 || multipleAsset.InteractiveMode == 3">
<p>厚度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="multipleAsset.Thickness"
oninput="if(value>999)value=999;if(value<0)value=0;" (input)="multipleAssetThicknessInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="multipleAsset.Thickness" (change)="multipleAssetThicknessInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)"></mat-slider>
</div>
</div>
<div class="colorBigDiv" *ngIf="multipleAsset.FillMode == 0">
<div class="colorBigTemplateDiv">
<span>颜色</span>
<div class="colorTemplateDiv" [style]="{'background-color':selectedcolor}">
</div>
</div>
<div class="colorDiv" *ngIf="isEditPattern && pattern && firstMultipleAssetData.assetData.GameMode == 0">
<ul>
<li (click)="multipleAssetSelectcolor(item,key)" class="colorLi" *ngFor="let item of colors,let key=index" [style]="{'background-color':item}"></li>
</ul>
</div>
<span style="color: #9c9fa5;font-size: 14px;">透明度</span>
<mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;"
[(ngModel)]="colorDivSliderValue" (change)="multipleColorDivSliderChange()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)"></mat-slider>
<span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span>
</div>
<div *ngFor="let item of multipleAsset.PropertyInfos;index as key ">
<!-- 单行文本 -->
<div *ngIf="item.PropertyType == 0">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<input type="text" class="biginput" [name]="item.PropertyName" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
</div>
<!-- 多行文本 -->
<div *ngIf="item.PropertyType == 1">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<textarea class="textarea" name="" id="" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)"></textarea>
</div>
<!-- 数值 -->
<div *ngIf="item.PropertyType == 2">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<input type="number" class="biginput" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
</div>
<!-- 方向 -->
<!-- <div *ngIf="item.PropertyType == 5 " class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="direction(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<option value ="0" [selected]="item.PropertyValue =='0'"></option>
<option value ="1" [selected]="item.PropertyValue =='1'">西</option>
<option value ="2" [selected]="item.PropertyValue =='2'"></option>
<option value ="3" [selected]="item.PropertyValue =='3'"></option>
<option value ="4" [selected]="item.PropertyValue =='4'">东南</option>
<option value ="5" [selected]="item.PropertyValue =='5'">西南</option>
<option value ="6" [selected]="item.PropertyValue =='6'">东北</option>
<option value ="7" [selected]="item.PropertyValue =='7'">西北</option>
</select>
</div> -->
<!-- 布尔值 是1或否0 -->
<div *ngIf="item.PropertyType == 6">
<p>{{item.PropertyName}}</p>
<input value='1' [(ngModel)]="item.PropertyValue" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)" class="input" type="radio" name="radio" (click)="multipleAssetRadioChange(item,'1')"><span></span>
<input value='0' [(ngModel)]="item.PropertyValue" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)" class="input" type="radio" name="radio" (click)="multipleAssetRadioChange(item,'0')"><span></span>
</div>
<!-- 供给区域 -->
<div *ngIf="item.PropertyType == 7" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="multipleSupplyArea(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<option value ="0">全部</option>
<option value ="1">高区</option>
<option value ="2">中区</option>
<option value ="3">低区</option>
<option value ="4">高中区</option>
<option value ="5">高低区</option>
<option value ="6">中低区</option>
</select>
</div>
<!-- 供给类型 -->
<div *ngIf="item.PropertyType == 8" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="multipleSupplyArea(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<option value ="0">消火栓</option>
<option value ="1">喷淋</option>
<option value ="2">水幕</option>
<option value ="3">泡沫</option>
<option value ="4">消防</option>
</select>
</div>
</div>
</div>
</div>
<!-- 消防要素 -->
<div id="firecategories" class="firecategories" style="height: 50%;">

170
src/app/ui/collection-tools-building/collection-tools.component.ts

@ -17,7 +17,7 @@ import { ActivatedRoute, Router } from '@angular/router';
import { TabbarAndScoreService } from 'src/app/http-interceptors/tabbar-and-score.service';
import { MaskLayerService } from 'src/app/mask-layer.service';
import * as ObjectID from 'bson-objectid';
import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem';
@Component({
selector: 'app-collection-tools-building',
templateUrl: './collection-tools.component.html',
@ -83,9 +83,11 @@ export class CollectionToolsBuildingComponent implements OnInit {
setTimeout(() => {
obj.PropertyInfos.forEach(item => {
if(item.PropertyType == 4){
this.gallery = new Viewer(document.getElementById('viewerjs'),{
url: 'data-original'
});
if(document.getElementById('viewerjs')){
this.gallery = new Viewer(document.getElementById('viewerjs'),{
url: 'data-original'
});
}
}
})
}, 0);
@ -611,7 +613,67 @@ export class CollectionToolsBuildingComponent implements OnInit {
isSixShow = true
isSixbtn = true //控制想定作业编辑按钮
isediticon = true //控制查看编辑模式的编辑模式小笔按钮
isMultipleAsset:boolean = false//框选多个素材属性显隐
multipleAsset:any = {
Width:null,
Height:null,
Angle:null,
Thickness:null,
Color:null,
PropertyInfos:[]
}//多个素材共同属性
multipleAssetData:any//当前多选的素材
firstMultipleAssetData:any//当前多选的第一个素材
ngOnInit(): void {
let _this = this
AxMessageSystem.addListener('selectionChanged', ()=>{
if(this.canvas.selection.size() == 1){//如果是单选
this.isMultipleAsset = false
// console.log('单选',this.canvas.selection.first().assetData)
this.setAssetsProperty(this.canvas.selection.first().assetData)
}else if(this.canvas.selection.size()){
// console.log('多选')
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)
}
}
});
})
})
}
}, this)
if(this.router.url.indexOf("keyUnit/viewunitinfo") != -1 || this.router.url.indexOf("keyUnit/editplaninfo")!= -1){
this.isSixbtn = false
@ -648,6 +710,106 @@ export class CollectionToolsBuildingComponent implements OnInit {
}
})
}
//多选宽度共同改变
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=>{
// console.log(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
}
})
})
}
//多选状态动态属性素材radio框值改变
multipleAssetRadioChange(i,value){
// e.stopPropagation()
this.multipleAssetData.forEach(item=>{
// console.log(item)
item.assetData.PropertyInfos.forEach(element => {
if(element.PropertyName == i.PropertyName){
element.PropertyValue = value
this.canvas.refreshIcon(item.assetData.Id)
this.canvasData.isChange = true
}
})
})
}
//多选状态动态属性素材下拉框值改变
multipleSupplyArea(i,e){
e.stopPropagation()
this.multipleAssetData.forEach(item=>{
// console.log(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
}
})
})
}

115
src/app/ui/collection-tools-plan/collection-tools.component.html

@ -153,7 +153,7 @@
<div [ngClass]="{'forbidden': !isEditPattern}" id="property" class="property" style="height: 100%;background-color: white;">
<div class="rightTitle">属性</div>
<!-- 平面图属性 -->
<div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute">
<div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute && !isMultipleAsset">
<p>面积(平方米)</p>
<div class="siteproperty_size">{{canvasData.selectStorey.area}}</div>
<p>详情</p>
@ -162,14 +162,14 @@
</div>
</div>
<!-- 素材属性 -->
<div class="assetsproperty" style="user-select: none" *ngIf="isShowProperty && !isShowAttribute">
<div class="assetsproperty" style="user-select: none" *ngIf="isShowProperty && !isShowAttribute && !isMultipleAsset">
<h3 style="text-align: center;font-weight: 900;">{{assetName}}</h3>
<div *ngIf="canvasAssetObj.InteractiveMode == 0">
<p>宽度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
<input type="number" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
<p>高度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
<input type="number" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
<p>角度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="sliderValue"
@ -191,7 +191,7 @@
<p style="margin-top: 4px;margin-bottom: 0px;">是否高亮</p>
<div>
<input class="input" [(ngModel)]="isHighLight" type="checkbox" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
<input (change)="assetHighLightIunput()" class="input" [(ngModel)]="isHighLight" type="checkbox" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
<span style="font-size: 14px;">选中高亮</span>
</div>
<div class="colorBigDiv" *ngIf="canvasAssetObj.FillMode == 0">
@ -295,7 +295,110 @@
</div>
</div>
</div>
<!-- 框选多个素材属性 -->
<div class="assetsproperty" style="user-select: none" *ngIf="isMultipleAsset">
<div *ngIf="multipleAsset.InteractiveMode == 0">
<p>宽度(像素)</p>
<input type="number" class="biginput" [(ngModel)]="multipleAsset.Width" (input)="multipleAssetWidthInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<p>高度(像素)</p>
<input type="number" class="biginput" [(ngModel)]="multipleAsset.Height" (input)="multipleAssetHeightInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<p>角度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="multipleAsset.Angle"
oninput="if(value>360)value=360;if(value<0)value=0;" (input)="multipleAssetAngleInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="multipleAsset.Angle" (change)="multipleAssetAngleInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)"></mat-slider>
</div>
</div>
<!-- 如果是多点连线 -->
<div *ngIf="multipleAsset.InteractiveMode == 1 || multipleAsset.InteractiveMode == 3">
<p>厚度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="multipleAsset.Thickness"
oninput="if(value>999)value=999;if(value<0)value=0;" (input)="multipleAssetThicknessInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="multipleAsset.Thickness" (change)="multipleAssetThicknessInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)"></mat-slider>
</div>
</div>
<div class="colorBigDiv" *ngIf="multipleAsset.FillMode == 0">
<div class="colorBigTemplateDiv">
<span>颜色</span>
<div class="colorTemplateDiv" [style]="{'background-color':selectedcolor}">
</div>
</div>
<div class="colorDiv" *ngIf="isEditPattern && pattern && firstMultipleAssetData.assetData.GameMode == 0">
<ul>
<li (click)="multipleAssetSelectcolor(item,key)" class="colorLi" *ngFor="let item of colors,let key=index" [style]="{'background-color':item}"></li>
</ul>
</div>
<span style="color: #9c9fa5;font-size: 14px;">透明度</span>
<mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;"
[(ngModel)]="colorDivSliderValue" (change)="multipleColorDivSliderChange()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)"></mat-slider>
<span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span>
</div>
<div *ngFor="let item of multipleAsset.PropertyInfos;index as key ">
<!-- 单行文本 -->
<div *ngIf="item.PropertyType == 0">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<input type="text" class="biginput" [name]="item.PropertyName" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
</div>
<!-- 多行文本 -->
<div *ngIf="item.PropertyType == 1">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<textarea class="textarea" name="" id="" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)"></textarea>
</div>
<!-- 数值 -->
<div *ngIf="item.PropertyType == 2">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<input type="number" class="biginput" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
</div>
<!-- 方向 -->
<!-- <div *ngIf="item.PropertyType == 5 " class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="direction(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<option value ="0" [selected]="item.PropertyValue =='0'"></option>
<option value ="1" [selected]="item.PropertyValue =='1'">西</option>
<option value ="2" [selected]="item.PropertyValue =='2'"></option>
<option value ="3" [selected]="item.PropertyValue =='3'"></option>
<option value ="4" [selected]="item.PropertyValue =='4'">东南</option>
<option value ="5" [selected]="item.PropertyValue =='5'">西南</option>
<option value ="6" [selected]="item.PropertyValue =='6'">东北</option>
<option value ="7" [selected]="item.PropertyValue =='7'">西北</option>
</select>
</div> -->
<!-- 布尔值 是1或否0 -->
<div *ngIf="item.PropertyType == 6">
<p>{{item.PropertyName}}</p>
<input value='1' [(ngModel)]="item.PropertyValue" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)" class="input" type="radio" name="radio" (click)="multipleAssetRadioChange(item,'1')"><span></span>
<input value='0' [(ngModel)]="item.PropertyValue" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)" class="input" type="radio" name="radio" (click)="multipleAssetRadioChange(item,'0')"><span></span>
</div>
<!-- 供给区域 -->
<div *ngIf="item.PropertyType == 7" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="multipleSupplyArea(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<option value ="0">全部</option>
<option value ="1">高区</option>
<option value ="2">中区</option>
<option value ="3">低区</option>
<option value ="4">高中区</option>
<option value ="5">高低区</option>
<option value ="6">中低区</option>
</select>
</div>
<!-- 供给类型 -->
<div *ngIf="item.PropertyType == 8" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="multipleSupplyArea(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<option value ="0">消火栓</option>
<option value ="1">喷淋</option>
<option value ="2">水幕</option>
<option value ="3">泡沫</option>
<option value ="4">消防</option>
</select>
</div>
</div>
</div>
</div>
</div>

191
src/app/ui/collection-tools-plan/collection-tools.component.ts

@ -17,7 +17,7 @@ import { ActivatedRoute, Router } from '@angular/router';
import { TabbarAndScoreService } from 'src/app/http-interceptors/tabbar-and-score.service';
import { MaskLayerService } from 'src/app/mask-layer.service';
import * as ObjectID from 'bson-objectid';
import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem';
@Component({
selector: 'app-collection-tools-plan',
templateUrl: './collection-tools.component.html',
@ -83,9 +83,11 @@ export class CollectionToolsPlanComponent implements OnInit {
setTimeout(() => {
obj.PropertyInfos.forEach(item => {
if(item.PropertyType == 4){
this.gallery = new Viewer(document.getElementById('viewerjs'),{
url: 'data-original'
});
if(document.getElementById('viewerjs')){
this.gallery = new Viewer(document.getElementById('viewerjs'),{
url: 'data-original'
});
}
}
})
}, 0);
@ -408,7 +410,10 @@ export class CollectionToolsPlanComponent implements OnInit {
//素材是否高亮改变----->本地操作行为
assetHighLightIunput(){
// console.log(this.isHighLight,this.canvasAssetObj)
// let arr = []
// arr.push(this.canvasAssetObj.Id)
// this.canvas.setHighlight(arr)
}
//动态属性素材input框值改变
@ -610,12 +615,70 @@ export class CollectionToolsPlanComponent implements OnInit {
isSixShow = true
isSixbtn = true //控制想定作业编辑按钮
isediticon = true //控制查看编辑模式的编辑模式小笔按钮
isMultipleAsset:boolean = false//框选多个素材属性显隐
multipleAsset:any = {
Width:null,
Height:null,
Angle:null,
Thickness:null,
Color:null,
PropertyInfos:[]
}//多个素材共同属性
multipleAssetData:any//当前多选的素材
firstMultipleAssetData:any//当前多选的第一个素材
ngOnInit(): void {
let _this = this
AxMessageSystem.addListener('selectionChanged', ()=>{
if(this.canvas.selection.size() == 1){//如果是单选
this.isMultipleAsset = false
console.log('单选',this.canvas.selection.first().assetData)
this.setAssetsProperty(this.canvas.selection.first().assetData)
}else if(this.canvas.selection.size()){
console.log('多选')
this.multipleAssetData = this.canvas.selection.all()
this.firstMultipleAssetData = this.canvas.selection.first()
this.multipleAsset = {
Width:null,
Height:null,
Angle:null,
Thickness:null,
Color:null,
PropertyInfos:[]
}
this.isMultipleAsset = true
let firstAssetData = this.canvas.selection.first().assetData;//拿出第一个素材作为例子与其他素材进行对比
let InteractiveMode = firstAssetData.InteractiveMode //素材连接方式
let isInteractiveMode = this.canvas.selection.all().every(item => item.assetData.InteractiveMode === InteractiveMode)
if(isInteractiveMode){
this.multipleAsset.InteractiveMode = InteractiveMode
}
let isFillMode = this.canvas.selection.all().every(item => item.assetData.FillMode === 0) //素材填充方式都为0
if(isFillMode){
this.multipleAsset.FillMode = 0
}
this.canvas.selection.first().assetData.PropertyInfos.forEach(i => {
let index = 0
this.canvas.selection.all().forEach(item => {
item.assetData.PropertyInfos.forEach(element => {
if(element.PropertyName == i.PropertyName && element.PropertyType == i.PropertyType && element.PropertyType != 3 && element.PropertyType != 4){
index++
if(index == this.canvas.selection.size()){
let newElement = JSON.parse(JSON.stringify(element))
newElement.PropertyValue = ''
this.multipleAsset.PropertyInfos.push(newElement)
}
}
});
})
})
console.log(666,_this.multipleAsset.PropertyInfos)
}
}, this)
if(this.router.url.indexOf("keyUnit/viewunitinfo") != -1 || this.router.url.indexOf("keyUnit/editplaninfo")!= -1){
this.isSixbtn = false
}
if(!this.isSixbtn && sessionStorage.getItem("six") == "edit"){
this.isSixShow = true
}
@ -647,6 +710,112 @@ export class CollectionToolsPlanComponent implements OnInit {
}
})
}
//多选宽度共同改变
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=>{
console.log(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
}
})
})
}
//多选状态动态属性素材radio框值改变
multipleAssetRadioChange(i,value){
// e.stopPropagation()
this.multipleAssetData.forEach(item=>{
console.log(item)
item.assetData.PropertyInfos.forEach(element => {
if(element.PropertyName == i.PropertyName){
element.PropertyValue = value
this.canvas.refreshIcon(item.assetData.Id)
this.canvasData.isChange = true
}
})
})
}
//多选状态动态属性素材下拉框值改变
multipleSupplyArea(i,e){
e.stopPropagation()
this.multipleAssetData.forEach(item=>{
console.log(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
}
})
})
}
@ -655,11 +824,11 @@ export class CollectionToolsPlanComponent implements OnInit {
if(this.router.url.indexOf("gis") == -1) {
this.getSitePlan()
}
// 监听canvas组件选中素材事件
this.canvas.on("select",obj=>{
//选中素材属性注入函数
this.setAssetsProperty(obj.assetData)
})
// // 监听canvas组件选中素材事件
// this.canvas.on("select",obj=>{
// //选中素材属性注入函数
// this.setAssetsProperty(obj.assetData)
// })
// 监听canvas组件取消选中素材事件
this.canvas.on("deselect",obj=>{
this.isShowProperty = false

113
src/app/ui/collection-tools/collection-tools.component.html

@ -227,7 +227,7 @@
</div>
</div>
<!-- 平面图属性 -->
<div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute">
<div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute && !isMultipleAsset">
<p>面积(平方米)</p>
<div class="siteproperty_size">{{canvasData.selectStorey.area}}</div>
<p>详情</p>
@ -236,14 +236,14 @@
</div>
</div>
<!-- 素材属性 -->
<div class="assetsproperty" style="user-select: none" *ngIf="isShowProperty && !isShowAttribute">
<div class="assetsproperty" style="user-select: none" *ngIf="isShowProperty && !isShowAttribute && !isMultipleAsset">
<h3 style="text-align: center;font-weight: 900;">{{assetName}}</h3>
<div *ngIf="canvasAssetObj.InteractiveMode == 0">
<p>宽度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
<input type="number" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
<p>高度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
<input type="number" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
<p>角度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="sliderValue"
@ -369,7 +369,110 @@
</div>
</div>
</div>
<!-- 框选多个素材属性 -->
<div class="assetsproperty" style="user-select: none" *ngIf="isMultipleAsset">
<div *ngIf="multipleAsset.InteractiveMode == 0">
<p>宽度(像素)</p>
<input type="number" class="biginput" [(ngModel)]="multipleAsset.Width" (input)="multipleAssetWidthInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<p>高度(像素)</p>
<input type="number" class="biginput" [(ngModel)]="multipleAsset.Height" (input)="multipleAssetHeightInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<p>角度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="multipleAsset.Angle"
oninput="if(value>360)value=360;if(value<0)value=0;" (input)="multipleAssetAngleInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="multipleAsset.Angle" (change)="multipleAssetAngleInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)"></mat-slider>
</div>
</div>
<!-- 如果是多点连线 -->
<div *ngIf="multipleAsset.InteractiveMode == 1 || multipleAsset.InteractiveMode == 3">
<p>厚度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="multipleAsset.Thickness"
oninput="if(value>999)value=999;if(value<0)value=0;" (input)="multipleAssetThicknessInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="multipleAsset.Thickness" (change)="multipleAssetThicknessInput()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)"></mat-slider>
</div>
</div>
<div class="colorBigDiv" *ngIf="multipleAsset.FillMode == 0">
<div class="colorBigTemplateDiv">
<span>颜色</span>
<div class="colorTemplateDiv" [style]="{'background-color':selectedcolor}">
</div>
</div>
<div class="colorDiv" *ngIf="isEditPattern && pattern && firstMultipleAssetData.assetData.GameMode == 0">
<ul>
<li (click)="multipleAssetSelectcolor(item,key)" class="colorLi" *ngFor="let item of colors,let key=index" [style]="{'background-color':item}"></li>
</ul>
</div>
<span style="color: #9c9fa5;font-size: 14px;">透明度</span>
<mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;"
[(ngModel)]="colorDivSliderValue" (change)="multipleColorDivSliderChange()" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)"></mat-slider>
<span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span>
</div>
<div *ngFor="let item of multipleAsset.PropertyInfos;index as key ">
<!-- 单行文本 -->
<div *ngIf="item.PropertyType == 0">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<input type="text" class="biginput" [name]="item.PropertyName" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
</div>
<!-- 多行文本 -->
<div *ngIf="item.PropertyType == 1">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<textarea class="textarea" name="" id="" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)"></textarea>
</div>
<!-- 数值 -->
<div *ngIf="item.PropertyType == 2">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<input type="number" class="biginput" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
</div>
<!-- 方向 -->
<!-- <div *ngIf="item.PropertyType == 5 " class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="direction(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<option value ="0" [selected]="item.PropertyValue =='0'"></option>
<option value ="1" [selected]="item.PropertyValue =='1'">西</option>
<option value ="2" [selected]="item.PropertyValue =='2'"></option>
<option value ="3" [selected]="item.PropertyValue =='3'"></option>
<option value ="4" [selected]="item.PropertyValue =='4'">东南</option>
<option value ="5" [selected]="item.PropertyValue =='5'">西南</option>
<option value ="6" [selected]="item.PropertyValue =='6'">东北</option>
<option value ="7" [selected]="item.PropertyValue =='7'">西北</option>
</select>
</div> -->
<!-- 布尔值 是1或否0 -->
<div *ngIf="item.PropertyType == 6">
<p>{{item.PropertyName}}</p>
<input value='1' [(ngModel)]="item.PropertyValue" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)" class="input" type="radio" name="radio" (click)="multipleAssetRadioChange(item,'1')"><span></span>
<input value='0' [(ngModel)]="item.PropertyValue" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)" class="input" type="radio" name="radio" (click)="multipleAssetRadioChange(item,'0')"><span></span>
</div>
<!-- 供给区域 -->
<div *ngIf="item.PropertyType == 7" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="multipleSupplyArea(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<option value ="0">全部</option>
<option value ="1">高区</option>
<option value ="2">中区</option>
<option value ="3">低区</option>
<option value ="4">高中区</option>
<option value ="5">高低区</option>
<option value ="6">中低区</option>
</select>
</div>
<!-- 供给类型 -->
<div *ngIf="item.PropertyType == 8" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="multipleSupplyArea(item,$event)" [disabled]="!isEditPattern || (firstMultipleAssetData.assetData.GameMode == 0 && !pattern)">
<option value ="0">消火栓</option>
<option value ="1">喷淋</option>
<option value ="2">水幕</option>
<option value ="3">泡沫</option>
<option value ="4">消防</option>
</select>
</div>
</div>
</div>
</div>
<!-- 消防要素 -->
<div id="firecategories" class="firecategories" style="height: 50%;background-color: white;">

172
src/app/ui/collection-tools/collection-tools.component.ts

@ -16,7 +16,7 @@ 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';
@Component({
selector: 'app-collection-tools',
templateUrl: './collection-tools.component.html',
@ -82,9 +82,11 @@ export class CollectionToolsComponent implements OnInit {
setTimeout(() => {
obj.PropertyInfos.forEach(item => {
if(item.PropertyType == 4){
this.gallery = new Viewer(document.getElementById('viewerjs'),{
url: 'data-original'
});
if(document.getElementById('viewerjs')){
this.gallery = new Viewer(document.getElementById('viewerjs'),{
url: 'data-original'
});
}
}
})
}, 0);
@ -624,7 +626,68 @@ export class CollectionToolsComponent implements OnInit {
isSixbtn = true //控制想定作业编辑按钮
isxxx = true //控制查看编辑模式的编辑模式按钮
isMultipleAsset:boolean = false//框选多个素材属性显隐
multipleAsset:any = {
Width:null,
Height:null,
Angle:null,
Thickness:null,
Color:null,
PropertyInfos:[]
}//多个素材共同属性
multipleAssetData:any//当前多选的素材
firstMultipleAssetData:any//当前多选的第一个素材
ngOnInit(): void {
let _this = this
AxMessageSystem.addListener('selectionChanged', ()=>{
if(this.canvas.selection.size() == 1){//如果是单选
this.isMultipleAsset = false
// console.log('单选',this.canvas.selection.first().assetData)
this.setAssetsProperty(this.canvas.selection.first().assetData)
}else if(this.canvas.selection.size()){
// console.log('多选')
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)
}
}
});
})
})
}
}, this)
this.canvasData.gameMode = GameMode.Assignment
if(this.router.url.indexOf("keyUnit/viewunitinfoplan") == -1 && this.router.url.indexOf("keyUnit/viewunitinfo") != -1 || this.router.url.indexOf("keyUnit/editplaninfo")!= -1){
this.isSixbtn = false
@ -663,7 +726,106 @@ export class CollectionToolsComponent implements OnInit {
})
}
//多选宽度共同改变
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=>{
// console.log(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
}
})
})
}
//多选状态动态属性素材radio框值改变
multipleAssetRadioChange(i,value){
// e.stopPropagation()
this.multipleAssetData.forEach(item=>{
// console.log(item)
item.assetData.PropertyInfos.forEach(element => {
if(element.PropertyName == i.PropertyName){
element.PropertyValue = value
this.canvas.refreshIcon(item.assetData.Id)
this.canvasData.isChange = true
}
})
})
}
//多选状态动态属性素材下拉框值改变
multipleSupplyArea(i,e){
e.stopPropagation()
this.multipleAssetData.forEach(item=>{
// console.log(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 {

2
src/app/working-area/working-area.component.ts

@ -453,7 +453,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
*/
public refreshIcon(id: string): void {
const icon = this.backgroundImage.children.find(item => item.name === id);
console.log(icon);
// console.log(icon);
if (icon instanceof AxImageShape) {
icon.refresh();
} else if (icon instanceof MultipointIcon) {

Loading…
Cancel
Save