陈鹏飞 4 years ago
parent
commit
7509825a7f
  1. 41
      src/app/ui/collection-tools/collection-tools.component.html
  2. 33
      src/app/ui/collection-tools/collection-tools.component.scss
  3. 233
      src/app/ui/collection-tools/collection-tools.component.ts
  4. 146
      src/app/working-area/working-area.component.ts

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

@ -165,22 +165,43 @@
<!-- 素材属性 -->
<div class="assetsproperty" style="user-select: none" *ngIf="isShowProperty && !isShowAttribute">
<h3 style="text-align: center;font-weight: 900;">{{assetName}}</h3>
<p>宽度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()">
<p>高度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()">
<p>角度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="sliderValue"
oninput="if(value>360)value=360;if(value<0)value=0;" (input)="assetAngleIunput()">
<mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="sliderValue" (change)="assetAngleIunput()"></mat-slider>
<div *ngIf="canvasAssetObj.FixedSize">
<p>宽度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()">
<p>高度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()">
<p>角度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="sliderValue"
oninput="if(value>360)value=360;if(value<0)value=0;" (input)="assetAngleIunput()">
<mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="sliderValue" (change)="assetAngleIunput()"></mat-slider>
</div>
</div>
<p style="margin-top: 4px;margin-bottom: 0px;">是否高亮</p>
<div>
<input class="input" [(ngModel)]="isHighLight" type="checkbox">
<span style="font-size: 14px;">选中高亮</span>
</div>
<div class="colorBigDiv" *ngIf="canvasAssetObj.FillMode == 0">
<div class="colorBigTemplateDiv">
<span>颜色</span>
<div class="colorTemplateDiv" [style]="{'background-color':selectedcolor}">
</div>
</div>
<div class="colorDiv">
<ul>
<li (click)="selectcolor(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)="colorDivSliderChange()"></mat-slider>
<span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span>
</div>
<div *ngFor="let item of PropertyInfos;index as key ">
<!-- 单行文本 -->
<div *ngIf="item.PropertyType == 0">

33
src/app/ui/collection-tools/collection-tools.component.scss

@ -216,6 +216,39 @@
border-radius: 2px;
}
}
.colorBigDiv{
width: 88%;
margin-left: 8px;
.colorBigTemplateDiv{
span{
color: #9c9fa5;
font-size: 14px;
height: 26px;
line-height: 26px;
}
.colorTemplateDiv{
width: 65%;
height: 22px;
display: inline-block;
vertical-align: middle;
margin-left: 26px;
}
}
.colorDiv{
.colorLi{
width: 24px;
height: 24px;
list-style: none;
float: left;
border: 2px solid white;
}
.coloractive{
border: 2px solid black;
}
}
}
}
}
//右侧消防要素

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

@ -39,7 +39,10 @@ export class CollectionToolsComponent implements OnInit {
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
hasChild = (_: number, node: any) => node.expandable;
colors = ['#076eec','#4dd0e1','#00ee76','#ffff00','#eeb422',
'#FF6A6A','#ff0000','#ff6eb4','#00bfff','#54ff9f',
'#009688','#836fff','#ff8c00','#ee00ee','#ffa07a',
'#00C500','#00ffff','#6495ed','#ffdAb9','#AA00FF']
selected = 'option1' //图标大小选择框
basicInfo:boolean = true //基本信息名称显隐
wantToWork:boolean = true //想定作业名称显隐
@ -48,187 +51,6 @@ export class CollectionToolsComponent implements OnInit {
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//素材高度
@ -244,6 +66,12 @@ export class CollectionToolsComponent implements OnInit {
isImgNumCss = false //控制上传文件input显隐
mySwiper:any //轮播图实例
setAssetsProperty(obj){
//从颜色中取出透明度
let color = obj.Color
let strh = color.substring(color.length -2,color.length)
let opacity = Math.round(parseInt(strh,16)/255 * 100)
this.colorDivSliderValue = opacity
this.isShowProperty = true
this.isShowAttribute = false
let _this = this
@ -256,9 +84,9 @@ export class CollectionToolsComponent implements OnInit {
this.assetWidth = obj.Width
this.assetHeight = obj.Height
this.sliderValue = obj.Angle
this.selectedcolor = obj.Color
this.PropertyInfos = obj.PropertyInfos
this.PropertyInfos.forEach(item => {
if(item.PropertyType == 3){ //如果是图片链接类型
this.imagesArr.push(item)
@ -330,6 +158,8 @@ export class CollectionToolsComponent implements OnInit {
}
}
//素材宽度输入框改变
assetWidthIunput(){
this.canvasAssetObj.Width = this.assetWidth
@ -348,7 +178,7 @@ export class CollectionToolsComponent implements OnInit {
//素材是否高亮改变----->本地操作行为
assetHighLightIunput(){
}
//动态属性素材input框值改变
@ -368,6 +198,28 @@ export class CollectionToolsComponent implements OnInit {
}
colorIndex//默认素材颜色
selectedcolor//点击选择的颜色
//选择素材颜色
selectcolor(item,key){
//在当前透明度基础上改变颜色
this.selectedcolor = item + this.selectedcolor.substring(this.selectedcolor.length-2)
this.canvasAssetObj.Color = this.selectedcolor
}
//颜色选择滑竿的值
colorDivSliderValue
colorDivSliderChange(){
let colorOpacity = Math.round(255 * this.colorDivSliderValue * 0.01)
//根据滑竿值改变16进制颜色后两位
function replacepos(text,start,stop,replacetext){
let mystr = text.substring(0,stop-1)+replacetext+text.substring(stop+1);
return mystr;
}
this.selectedcolor = replacepos(this.selectedcolor,7,8,colorOpacity.toString(16))
this.canvasAssetObj.Color = this.selectedcolor
}
//查看图片详情
lookImg(){
const dialogRef = this.dialog.open(ViewDetails, {//调用open方法打开对话框并且携带参数过去
@ -515,9 +367,12 @@ export class CollectionToolsComponent implements OnInit {
this.getAllLibrary()
this.getSitePlan()
this.getAllBuildings()
// console.log(1,this.canvasData.selectStorey)
// console.log(2,this.canvasData.originalcompanyBuildingData)
// console.log(3,this.canvasData.originaleveryStoreyData)
setTimeout(() => {
// console.log(1,this.canvasData.selectStorey)
// console.log(2,this.canvasData.originalcompanyBuildingData)
// console.log(3,this.canvasData.originaleveryStoreyData)
}, 3000);
}
ngAfterViewInit(): void {
@ -525,7 +380,7 @@ export class CollectionToolsComponent implements OnInit {
this.canvas.on("select",obj=>{
//选中素材属性注入函数
this.setAssetsProperty(obj.assetData)
console.log(obj.assetData)
// console.log(obj.assetData)
})
// 监听canvas组件取消选中素材事件
this.canvas.on("deselect",obj=>{

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

@ -288,7 +288,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
console.log(this.backgroundImage.toLocal(this.mousePosition));
break;
case PaintMode.singlePointIcon:
console.log(this.canvasData.selectStorey);
const json = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
const list = [];
json.forEach(element => {
const property = new PropertyInfo(element);
list.push(property);
});
const assetData = {
TemplateId: this.canvasData.selectTemplateData.id,
FloorId: this.canvasData.selectStorey.id,
@ -306,16 +311,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
MultiPoint : null,
Point: new PIXI.Point(this.previewSinglePointIcon.x, this.previewSinglePointIcon.y),
Name : this.canvasData.selectTemplateData.name,
PropertyInfos: JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos)),
PropertyInfos: list,
Border : this.canvasData.selectTemplateData.border,
DrawMode : this.canvasData.selectTemplateData.drawMode,
Thickness : this.canvasData.selectTemplateData.thickness,
IsFromBuilding : this.canvasData.selectTemplateData.isFromBuilding,
GameMode : GameMode.BasicInformation
};
console.log(assetData);
const singleIcon = new SinglePointIcon(assetData, this);
// this.createSinglePointIcon(this.canvasData.selectTemplateData.imageUrl, this.previewSinglePointIcon.x, this.previewSinglePointIcon.y, 32, 32, 1, this.canvasData.selectTemplateData.name);
break;
case PaintMode.lineIcon:
this.previewLineSegment.visible = true;
@ -329,14 +332,44 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
if (this.paintingIcon !== null) {
this.backgroundImage.removeChild(this.paintingIcon);
}
const jsonObject = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
const propertyList = [];
jsonObject.forEach(element => {
const property = new PropertyInfo(element);
propertyList.push(property);
});
const assetData1 = {
ImageUrl: this.canvasData.selectTemplateData.imageUrl,
Point: new PIXI.Point(0, 0),
Width: 32,
TemplateId: this.canvasData.selectTemplateData.id,
FloorId: this.canvasData.selectStorey.id,
Angle: this.canvasData.selectTemplateData.angle,
Color: this.canvasData.selectTemplateData.color,
Enabled: this.canvasData.selectTemplateData.enabled,
FillMode: this.canvasData.selectTemplateData.fillMode,
FireElementId: this.canvasData.selectTemplateData.fireElementId,
FixedSize: this.canvasData.selectTemplateData.fixedSize,
Height: 32,
Width: 32,
Id: Guid.NewGuid().ToString(),
ImageUrl: this.canvasData.selectTemplateData.imageUrl,
InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
MultiPoint: this.paintPoints,
Name: this.canvasData.selectTemplateData.name
Point: new PIXI.Point(0, 0),
Name: this.canvasData.selectTemplateData.name,
PropertyInfos: propertyList,
Border: this.canvasData.selectTemplateData.border,
DrawMode: this.canvasData.selectTemplateData.drawMode,
Thickness: this.canvasData.selectTemplateData.thickness,
IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
GameMode: GameMode.BasicInformation
};
// const assetData1 = {
// ImageUrl: this.canvasData.selectTemplateData.imageUrl,
// Point: new PIXI.Point(0, 0),
// Width: 32,
// Height: 32,
// MultiPoint: this.paintPoints,
// Name: this.canvasData.selectTemplateData.name
// };
this.paintingIcon = new MultipointIcon(assetData1, this);
// this.paintingIcon = new MultipointIcon(this.previewSinglePointIcon.texture, new PIXI.Point(0, 0), this.paintPoints, this,
// this.canvasData.selectTemplateData.name);
@ -561,10 +594,35 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
case PaintMode.polygonIcon:
this.paintingLine.clear();
if (this.paintPoints.length >= 3) {
const jsonList = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
const propertyList = [];
jsonList.forEach(element => {
const property = new PropertyInfo(element);
propertyList.push(property);
});
const assetData = {
Point: new PIXI.Point(0, 0),
TemplateId: this.canvasData.selectTemplateData.id,
FloorId: this.canvasData.selectStorey.id,
Angle: this.canvasData.selectTemplateData.angle,
Color: this.canvasData.selectTemplateData.color,
Enabled: this.canvasData.selectTemplateData.enabled,
FillMode: this.canvasData.selectTemplateData.fillMode,
FireElementId: this.canvasData.selectTemplateData.fireElementId,
FixedSize: this.canvasData.selectTemplateData.fixedSize,
Height: 32,
Width: 32,
Id: Guid.NewGuid().ToString(),
ImageUrl: this.canvasData.selectTemplateData.imageUrl,
InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
MultiPoint: this.paintPoints,
Name: this.canvasData.selectTemplateData.name
Point: new PIXI.Point(0, 0),
Name: this.canvasData.selectTemplateData.name,
PropertyInfos: propertyList,
Border: this.canvasData.selectTemplateData.border,
DrawMode: this.canvasData.selectTemplateData.drawMode,
Thickness: this.canvasData.selectTemplateData.thickness,
IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
GameMode: GameMode.BasicInformation
};
const polygonIcon = new PolygonIcon(assetData, this);
}
@ -1048,10 +1106,72 @@ export class Guid {
}
}
/// <summary>
/// 游戏状态
/// </summary>
/**
*
*/
enum GameMode {
BasicInformation,
Assignment
}
/**
*
*/
export class PropertyInfo {
constructor(instanceData: any) {
this.Tag = instanceData.tag;
this.Order = instanceData.order;
this.Enabled = instanceData.enabled;
this.Visible = instanceData.visible;
this.Required = instanceData.required;
this.RuleName = instanceData.ruleName;
this.RuleValue = instanceData.ruleValue;
this.PhysicalUnit = instanceData.physicalUnit;
this.PropertyName = instanceData.propertyName;
this.PropertyType = instanceData.propertyType;
this.PropertyValue = instanceData.propertyValue;
}
/**
* ,
*/
public Tag: string;
/**
*
*/
public Order: number;
/**
*
*/
public Enabled: boolean;
/**
*
*/
public Visible: boolean;
/**
*
*/
public Required: boolean;
/**
*
*/
public RuleName: string;
/**
*
*/
public RuleValue: string;
/**
*
*/
public PhysicalUnit: string;
/**
*
*/
public PropertyName: string;
/**
*
*/
public PropertyType: number;
/**
*
*/
public PropertyValue: string;
}

Loading…
Cancel
Save