diff --git a/package-lock.json b/package-lock.json index 19c6ffc..ec9b386 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11999,7 +11999,7 @@ }, "parse5": { "version": "5.1.1", - "resolved": "https://registry.npm.taobao.org/parse5/download/parse5-5.1.1.tgz?cache=0&sync_timestamp=1595849319979&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparse5%2Fdownload%2Fparse5-5.1.1.tgz", + "resolved": "https://registry.npm.taobao.org/parse5/download/parse5-5.1.1.tgz", "integrity": "sha1-9o5OW6GFKsLK3AD0VV//bCq7YXg=", "optional": true }, @@ -12898,6 +12898,11 @@ "sha.js": "^2.4.8" } }, + "penner": { + "version": "0.1.3", + "resolved": "https://registry.npm.taobao.org/penner/download/penner-0.1.3.tgz", + "integrity": "sha1-C4tILU6bOa8vPXw3WSIpuKzClwU=" + }, "perfect-scrollbar": { "version": "1.5.0", "resolved": "https://registry.npm.taobao.org/perfect-scrollbar/download/perfect-scrollbar-1.5.0.tgz", @@ -12975,6 +12980,14 @@ "@pixi/filter-zoom-blur": "3.1.1" } }, + "pixi-viewport": { + "version": "4.20.0", + "resolved": "https://registry.npm.taobao.org/pixi-viewport/download/pixi-viewport-4.20.0.tgz", + "integrity": "sha1-Gu3vsQhZqv7toJUJ8o4jNvaVDQ4=", + "requires": { + "penner": "^0.1.3" + } + }, "pixi.js": { "version": "5.3.3", "resolved": "https://registry.npm.taobao.org/pixi.js/download/pixi.js-5.3.3.tgz", @@ -15913,6 +15926,11 @@ } } }, + "three": { + "version": "0.125.2", + "resolved": "https://registry.npm.taobao.org/three/download/three-0.125.2.tgz", + "integrity": "sha1-3LoSdJoutBUi4VISuRnNP79ymxI=" + }, "through": { "version": "2.3.8", "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz", diff --git a/package.json b/package.json index 0479b61..34586ad 100644 --- a/package.json +++ b/package.json @@ -35,9 +35,11 @@ "ngx-echarts": "^4.2.2", "ngx-perfect-scrollbar": "^8.0.0", "pixi-filters": "^3.1.1", + "pixi-viewport": "^4.20.0", "pixi.js": "^5.3.2", "rxjs": "~6.5.4", "swiper": "^5.3.7", + "three": "^0.125.2", "tslib": "^1.10.0", "viewerjs": "^1.9.0", "zone.js": "~0.10.2" diff --git a/src/app/canvas-share-data.service.ts b/src/app/canvas-share-data.service.ts index 12e034a..1d74555 100644 --- a/src/app/canvas-share-data.service.ts +++ b/src/app/canvas-share-data.service.ts @@ -1,75 +1,79 @@ +import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import {ReplaySubject} from 'rxjs'; +import { ReplaySubject } from 'rxjs'; import { Observable } from 'rxjs'; import { GameMode } from './working-area/model/gameMode'; + @Injectable({ providedIn: 'root' }) export class CanvasShareDataService { - constructor() { } + constructor(private http: HttpClient) { } private _sendMessage: ReplaySubject = new ReplaySubject(1); - examDisposalNodesData//考生进入时获取当前试卷的处置节点 - examFacilityAssetsData//考生进入时获取当前试卷要考察的消防设施 + examDisposalNodesData; // 考生进入时获取当前试卷的处置节点 + examFacilityAssetsData; // 考生进入时获取当前试卷要考察的消防设施 + examOriginaleveryStoreyData: any; // 考生答卷 总平面图/楼层/区域 楼层数据 + hiddenBasicInfoFacilities: any = []; // 考生答卷 当前楼层需要隐藏的基本信息素材 + - isChange = false; // 数据 是否改动 + + isChange: boolean = false; // 数据 是否改动 selectTemplateData: any; // 选择当前 模板数据 // 总平面图/建筑 楼层 - selectStorey: any = {area: '', details: ''}; // 选择当前 楼层 数据 - + selectStorey: any = { area: '', details: '' }; // 选择当前 楼层 数据 originalcompanyBuildingData: any; // 单位/建筑 数据 - originaleveryStoreyData: any; // 总平面图/楼层/区域 楼层数据 - - - examOriginaleveryStoreyData: any; // 考生答卷 总平面图/楼层/区域 楼层数据 - - hiddenBasicInfoFacilities: any = []// 考生答卷 当前楼层需要隐藏的基本信息素材 // 总平面图/建筑 楼层 // 处置 节点 allDisposalNode: any = []; // 所有 处置节点 - allNodeMarkers: any; // 灾情 标签信息 - selectPanelPoint: DisposalNodeData = new DisposalNodeData(); - selectPanelPointBaseData: any = {description: '', notes: '', weather: '', airTemperature: '', windDirection: '', windScale: ''}; // 当前 数据节点 所对应的 天气,详情 数据节点 + allNodeMarkers: any = { highlightMarkers: {}, markers: {} }; // 灾情 标签信息 + selectPanelPoint: DisposalNodeData = new DisposalNodeData(); // 当前数据节点 + selectPanelPointBaseData: any = { description: '', notes: '', weather: '', airTemperature: '', windDirection: '', windScale: '' }; // 当前 数据节点 对应 父级节点 + customizeDisposalNode: any; // 新建 自定义数据节点 底图+名称 // 处置 节点 + /** * 游戏模式 */ - gameMode: GameMode = GameMode.Examinee; + gameMode: GameMode = GameMode.BasicInformation; facilityAssetsName = new Map([ - [ '消防水池', '消防水池'], - [ '疏散楼梯', '疏散楼梯'], - [ '消防电梯', '消防电梯'], - [ '避难区域', '避难区域'], - [ '安全出口', '安全出口'], - [ '地上消火栓', '室外消火栓' ], - [ '地下消火栓', '室外消火栓' ], - [ '室内消火栓', '室内消火栓' ], - [ '供水管网', '供水管网'], - [ '湿式自动喷淋系统', '湿式自动喷淋系统'], - [ '水幕系统', '水幕系统' ], - [ '消防泵房', '消防泵房'], - [ '水泵接合器（地上）', '水泵接合器'], - [ '水泵接合器（地下）', '水泵接合器'], - [ '水泵接合器（墙壁）', '水泵接合器'], - [ '消防水泵房', '消防水泵房'], - [ '箱式消火栓', '箱式消火栓'], - [ '固定水炮', '消防水炮' ], - [ '消防水罐', '储水罐'], - [ '消防水罐2', '储水罐'], - [ '卧式水罐', '储水罐'], - [ '消防泵', '水泵' ], - [ '泡沫泵', '水泵' ], - [ '泡沫泵房', '泡沫站'], - [ '泡沫栓', '泡沫栓' ], - [ '泡沫枪', '泡沫枪'], - [ '泡沫发生器', '泡沫发生器' ], - [ '消防管网', '消防管网'], - [ 'DCS控制室', 'DCS控制室'] + ['消防水池', '消防水池'], + ['疏散楼梯', '疏散楼梯'], + ['消防电梯', '消防电梯'], + ['避难区域', '避难区域'], + ['安全出口', '安全出口'], + ['地上消火栓', '室外消火栓'], + ['地下消火栓', '室外消火栓'], + ['室内消火栓', '室内消火栓'], + ['供水管网', '供水管网'], + ['湿式自动喷淋系统', '湿式自动喷淋系统'], + ['水幕系统', '水幕系统'], + ['消防泵房', '消防泵房'], + ['水泵接合器（地上）', '水泵接合器'], + ['水泵接合器（地下）', '水泵接合器'], + ['水泵接合器（墙壁）', '水泵接合器'], + ['水泵接合器（喷淋）', '水泵接合器'], + ['水泵接合器（消防）', '水泵接合器'], + ['消防水泵房', '消防水泵房'], + ['箱式消火栓', '箱式消火栓'], + ['固定水炮', '消防水炮'], + ['消防水罐', '储水罐'], + ['消防水罐2', '储水罐'], + ['卧式水罐', '储水罐'], + ['消防泵', '水泵'], + ['泡沫泵', '水泵'], + ['泡沫泵房', '泡沫站'], + ['泡沫栓', '泡沫栓'], + ['泡沫枪', '泡沫枪'], + ['泡沫发生器', '泡沫发生器'], + ['消防管网', '消防管网'], + ['泡沫管网', '消防管网'], + ['DCS控制室', 'DCS控制室'] ]); /** * 向其他组件发送信息 * @@ -77,12 +81,55 @@ export class CanvasShareDataService { public sendMessage(message: any) { this._sendMessage.next(message); } - public getMessage(): Observable { + public getMessage(): Observable { return this._sendMessage.asObservable(); } + //分段上传 + sectionUpload(companyId: string, file) { + let data = { filename: file.name } + return new Promise((resolve, reject) => { + this.http.post(`/api/NewMultipartUpload/PlanPlatform/${companyId}/DisposalNode`, {}, { params: data }).subscribe(async (data: any) => { //初始化分段上传 + let objectName = data.objectName + let uploadId = data.uploadId + let PartNumberETag = []; //每次返回需要保存的信息 + //分块 处理 + let fileSize = file.size || null //上传文件的总大小 + let shardSize = 5 * 1024 * 1024 //5MB一个分片 + let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段 + + for (let i = 0; i < allSlice; i++) { //循环分段上传 + let start = i * shardSize //切割文件开始位置 + let end = Math.min(fileSize, start + shardSize); //切割文件结束位置 + let formData = new FormData() + formData.append("file", file.slice(start, end)) + + //同步写法实现异步调用 + let result = await new Promise((resolve, reject) => { + // await 需要后面返回一个 promise 对象 + this.http.post(`/api/MultipartUpload/PlanPlatform/${objectName}?uploadId=${uploadId}&partNumber=${i + 1}`, formData).subscribe((data: any) => { + let msg = { "partNumber": data.partNumber || null, "eTag": data.eTag || null } + resolve(msg) // 调用 promise 内置方法处理成功 + }) + }); + PartNumberETag.push(result) + + if (PartNumberETag.length === allSlice) { //分块上传完成 + let data = PartNumberETag + let paramsData = { uploadId: uploadId } + this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${objectName}`, data, { params: paramsData }).subscribe(data => { + resolve(objectName) + }) + } + }//for循环 + + //分块 处理 + }) + }) + } + // 处置节点 筛选出 匹配数据 匹配不到 return undefined - findDisposalNode(parentId: string= null, name: string= null) { + findDisposalNode(parentId: string = null, name: string = null) { if (parentId && name) { // 匹配 父id, name const returnData = this.allDisposalNode.find(item => item.parentId === parentId && item.name === name); return returnData; @@ -95,6 +142,13 @@ export class CanvasShareDataService { * 更新建筑数据 */ public updateBuildingData() { + // 删除建筑数据中当前层数据 + Object.keys(this.originalcompanyBuildingData.data).forEach((key) => { + if (this.originalcompanyBuildingData.data[key].FloorId === this.selectStorey.id) { + delete this.originalcompanyBuildingData.data[key]; + } + }); + // 新增当前层数据到建筑数据 Object.keys(this.originaleveryStoreyData.data).forEach((key) => { this.originalcompanyBuildingData.data[key] = this.originaleveryStoreyData.data[key]; }); @@ -102,7 +156,7 @@ export class CanvasShareDataService { /** * 删除建筑数据中当前楼层的数据 */ - public deleteBuildingDataByCurrentFloorData():void { + public deleteBuildingDataByCurrentFloorData(): void { Object.keys(this.originaleveryStoreyData.data).forEach((key) => { // 删除建筑数据 delete this.originalcompanyBuildingData.data[key]; @@ -242,7 +296,22 @@ export class CanvasShareDataService { facility.Id = ''; facility.Name = this.facilityAssetsName.get(item.Name); facility.AssetName = item.Name; - facility.PropertyInfos = item.PropertyInfos; + facility.PropertyInfos = []; + item.PropertyInfos.forEach(e => { + var p: PropertyInfo = new PropertyInfo(); + p.Enabled = e.Enabled; + p.Order = e.Order; + p.PhysicalUnit = e.PhysicalUnit; + p.PropertyName = e.PropertyName; + p.PropertyType = e.PropertyType; + p.PropertyValue = e.PropertyValue.toString(); + p.Required = e.Required; + p.RuleName = e.RuleName; + p.RuleValue = e.RuleValue; + p.Tag = e.Tag; + p.Visible = e.Visible; + facility.PropertyInfos.push(p); + }); facility.SitePlanId = item.FloorId; list.push(facility); } @@ -263,7 +332,22 @@ export class CanvasShareDataService { facility.Id = ''; facility.Name = this.facilityAssetsName.get(item.Name); facility.AssetName = item.Name; - facility.PropertyInfos = item.PropertyInfos; + facility.PropertyInfos = []; + item.PropertyInfos.forEach(e => { + var p: PropertyInfo = new PropertyInfo(); + p.Enabled = e.Enabled; + p.Order = e.Order; + p.PhysicalUnit = e.PhysicalUnit; + p.PropertyName = e.PropertyName; + p.PropertyType = e.PropertyType; + p.PropertyValue = e.PropertyValue.toString(); + p.Required = e.Required; + p.RuleName = e.RuleName; + p.RuleValue = e.RuleValue; + p.Tag = e.Tag; + p.Visible = e.Visible; + facility.PropertyInfos.push(p); + }); facility.BuildingAreaId = item.FloorId; list.push(facility); } @@ -312,7 +396,7 @@ export class CompanyAdjoinInfo { * 建筑毗邻 */ export class BuildingAdjoinInfo { - public BuildingId: string; + public BuildingId: string; public Id: string; public Name: string; public Direction: number; @@ -354,7 +438,7 @@ export class CompanyFacilityAssetInfo { public Id: string; public Name: string; public AssetName: string; - public PropertyInfos: string; + public PropertyInfos: PropertyInfo[]; public AssetId: string; public CompanyId: string; public SitePlanId: string; @@ -366,7 +450,7 @@ export class BuildingFacilityAssetInfo { public Id: string; public Name: string; public AssetName: string; - public PropertyInfos: string; + public PropertyInfos: PropertyInfo[]; public AssetId: string; public BuildingId: string; public BuildingAreaId: string; @@ -506,62 +590,62 @@ export class DisposalNode { * 方向。 */ export enum Direction { - /** - * 东 - */ - East, - /** - * 西 - */ - West, - /** - * 南 - */ - South, - /** - * 北 - */ - North, - /** - * 东南 - */ - Southeast, - /** - * 西南 - */ - Southwest, - /** - * 东北 - */ - Northeast, - /** - * 西北 - */ - Northwest + /** + * 东 + */ + East, + /** + * 西 + */ + West, + /** + * 南 + */ + South, + /** + * 北 + */ + North, + /** + * 东南 + */ + Southeast, + /** + * 西南 + */ + Southwest, + /** + * 东北 + */ + Northeast, + /** + * 西北 + */ + Northwest } /** * 风力等级 */ export enum WindScale { - WS0, - WS1, - WS2, - WS3, - WS4, - WS5, - WS6, - WS7, - WS8, - WS9, - WS10, - WS11, - WS12, - WS13, - WS14, - WS15, - WS16, - WS17, - WS18 + WS0, + WS1, + WS2, + WS3, + WS4, + WS5, + WS6, + WS7, + WS8, + WS9, + WS10, + WS11, + WS12, + WS13, + WS14, + WS15, + WS16, + WS17, + WS18 } /** * 处置节点数据 @@ -579,6 +663,14 @@ export class DisposalNodeData { * 版本号 */ public Version: string; + /** + * 图片地址 + */ + public BackgroundImageUrl: string; + /** + * 图片地址 + */ + public BackgroundImageAngle: number; /** * 处置节点编号 */ @@ -609,105 +701,105 @@ export class FloorNodeData { * 素材数据 */ export class AssetData { - /// - /// 模板编号 - /// + /// + /// 模板编号 + /// public TemplateId: string; - /// - /// 编号 - /// + /// + /// 编号 + /// public Id: string; - /// - /// 名称 - /// + /// + /// 名称 + /// public Name: string; - /// - /// 角度 - /// + /// + /// 角度 + /// public Angle: number; - /// - /// 颜色 - /// + /// + /// 颜色 + /// public Color: string; - /// - /// 坐标 - /// + /// + /// 坐标 + /// public Point: PIXI.Point; - /// - /// 宽度 - /// + /// + /// 宽度 + /// public Width: number; - /// - /// 高度 - /// + /// + /// 高度 + /// public Height: number; - /// - /// 是否启用 - /// + /// + /// 是否启用 + /// public Enabled: boolean; - /// - /// 填充方式 - /// + /// + /// 填充方式 + /// public FillMode: FillMode; - /// - /// 图片地址 - /// + /// + /// 图片地址 + /// public ImageUrl: string; - /// - /// 是否固定大小 - /// - public FixedSize: boolean; - /// - /// 点路径 - /// + /// + /// 是否固定大小 + /// + public FixedSize: boolean; + /// + /// 点路径 + /// public MultiPoint: PIXI.Point[]; - /// - /// 建筑ID - /// + /// + /// 建筑ID + /// public BuildingId: string; - /// - /// 单位ID - /// + /// + /// 单位ID + /// public CompanyId: string; - /// - /// 楼层编号 - /// + /// + /// 楼层编号 + /// public FloorId: string; - /// - /// 楼层名称 - /// + /// + /// 楼层名称 + /// public FloorName: string; - /// - /// 消防要素编号 - /// + /// + /// 消防要素编号 + /// public FireElementId: string; - /// - /// 属性列表 - /// + /// + /// 属性列表 + /// public PropertyInfos: PropertyInfo[]; - /// - /// 交互方式 - /// + /// + /// 交互方式 + /// public InteractiveMode: InteractiveMode; - /// - /// 是否来自建筑 - /// + /// + /// 是否来自建筑 + /// public IsFromBuilding: boolean; - /// - /// 渲染方式。 - /// + /// + /// 渲染方式。 + /// public DrawMode: ImageType; - /// - /// 9宫格边框数值。 - /// + /// + /// 9宫格边框数值。 + /// public Border: Border; - /// - /// 厚度。 - /// + /// + /// 厚度。 + /// public Thickness: number; - /// - /// 素材类型 - /// + /// + /// 素材类型 + /// public GameMode: GameMode; } /** @@ -748,9 +840,9 @@ export enum ImageType { */ export class Border { - public x: number; + public x: number; - public y: number; + public y: number; public z: number; diff --git a/src/app/examiner/create-test-score/create-test-score.component.ts b/src/app/examiner/create-test-score/create-test-score.component.ts index 2ebe169..72ddaed 100644 --- a/src/app/examiner/create-test-score/create-test-score.component.ts +++ b/src/app/examiner/create-test-score/create-test-score.component.ts @@ -75,8 +75,10 @@ export class CreateTestScoreComponent implements OnInit { } //获得指定试卷信息。 + editdata getSoloPaper(){ this.http.get(`/api/Papers/${sessionStorage.getItem('paperId')}`).subscribe((data:any) => { + this.editdata=data data.paperDataInfo.forEach(item => { this.unitId.push(JSON.parse(item.originalData)) }) @@ -1283,13 +1285,17 @@ export class CreateTestScoreComponent implements OnInit { paperDataInfo:paperDataInfo } this.http.put(`/api/Papers/UpdatePaperData/${sessionStorage.getItem('paperId')}`,body).subscribe(data => { - const config = new MatSnackBarConfig(); + const dialogRef = this.dialog.open(editorsDia, { + width: '650px', + data: this.editdata + }); + /* const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('创建试卷成功,页面将于一秒后退出','确定',config); setTimeout(() => { this.router.navigateByUrl('/home/createexam-index') - }, 1000); + }, 1000); */ }) }) @@ -1550,3 +1556,102 @@ export class LookTreeNodeDialog { } } + +//编辑试题弹窗 +@Component({ + selector: 'finish-dialog', + templateUrl: 'editors.html', + styleUrls: ['finishDia.scss'] +}) +export class editorsDia{ + constructor(private router:Router,private http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public datas: any) {} + ngOnInit(): void { + /* this.startTime=this.datas.startTime + this.endTime=this.datas.endTime */ + this.startTime=this.datas.startTime.split("+")[0] + this.endTime=this.datas.endTime.split("+")[0] + this.examName=this.datas.title + console.log(this.datas) + } + //获取登录账号的个人资料 + Profiles:any + getProfiles(){ + this.http.get('/api/ExamAccounts/Profiles').subscribe((data:any) => { + console.log(data) + this.Profiles = data + sessionStorage.setItem('creatorData',JSON.stringify(data)) + }) + } + + + startTime:string//考试开始时间 + endTime:string//考试结束时间 + examName:string//考试名称 + indexid:string//创建考试的id + tabledate + + //弹窗确定点击事件 + onNoClick(): void { + //console.log( this.startTime,this.endTime) + if(this.startTime>this.endTime){ + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('开始时间不能早于结束时间','确定',config); + }else{ + let body = { + id:this.datas.id, + startTime:this.startTime, + endTime:this.endTime, + title:this.examName + } + let params = { + id: null, + title: this.examName, + duration: this.datas.duration, + modifiedTime: new Date(), + deleted: false, + startTime: this.startTime, + endTime: this.endTime, + organizationId: this.datas.organizationId, + creatorId: this.datas.creatorId, + paperDataInfo: null + } + this.http.put(`/api/Papers/${this.datas.id}`,body).subscribe(data => { + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('修改试卷成功','确定',config); + this.router.navigateByUrl('/home/createexam-index') + this.dialogRef.close(); + /* setTimeout(() => { + this.http.get(`/api/Papers/${this.datas.id}`).subscribe((data:any) => { + if(data.paperDataInfo.length==0){ + this.http.delete(`/api/Papers/${this.datas.id}`).subscribe((data:any) => { + }) + this.http.post('/api/Papers',params).subscribe(data => { + //sessionStorage.removeItem("checkedWork") + sessionStorage.setItem("paperId",this.datas.id) + this.router.navigate(['/home/createexam-index/examiner-index']) //跳转试卷列表页面 + },err => { + this.snackBar.open(err,'确定',config); + }) + }else{ + sessionStorage.setItem("paperId",this.datas.id) + this.router.navigateByUrl("/examiner/create-test-score?pattern=edit") + } + }) + + this.dialogRef.close(); + }, 1000); */ + }) + } + + + } + + + close(){ + this.dialogRef.close(); + } +} diff --git a/src/app/examiner/create-test-score/editors.html b/src/app/examiner/create-test-score/editors.html new file mode 100644 index 0000000..a1bc442 --- /dev/null +++ b/src/app/examiner/create-test-score/editors.html @@ -0,0 +1,32 @@ + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+ +
+ + +
+
\ No newline at end of file diff --git a/src/app/examiner/create-test-score/finishDia.scss b/src/app/examiner/create-test-score/finishDia.scss new file mode 100644 index 0000000..93c9f42 --- /dev/null +++ b/src/app/examiner/create-test-score/finishDia.scss @@ -0,0 +1,44 @@ +.box{ + display: flex; + flex-direction: column; + margin-left: 20px; + input{ + width: 260px; + height: 40px; + line-height: 34px; + border-radius: 5px; + padding-left: 5px; + outline: none; + border: 1px solid rgb(226, 211, 211); + } + .diaone{ + display: flex; + flex-direction: column; + + button { + border: none; + color: white; + padding: 5px 25px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + border-radius: 8px; + outline:0 none !important; + } + } + .diatwo{ + margin-top: 20px; + display: flex; + flex-direction: row; + .endtime{ + margin-left: 20px; + } + .datepicker{ + height: 44px; + border-radius: 5px; + } + } +} diff --git a/src/app/examiner/examiner-index/editors.html b/src/app/examiner/examiner-index/editors.html new file mode 100644 index 0000000..a1bc442 --- /dev/null +++ b/src/app/examiner/examiner-index/editors.html @@ -0,0 +1,32 @@ + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+ +
+ + +
+
\ No newline at end of file diff --git a/src/app/examiner/examiner-index/examiner-index.component.ts b/src/app/examiner/examiner-index/examiner-index.component.ts index e71dae8..5e2c1ce 100644 --- a/src/app/examiner/examiner-index/examiner-index.component.ts +++ b/src/app/examiner/examiner-index/examiner-index.component.ts @@ -4,7 +4,7 @@ * @Author: sueRimn * @Date: 2020-12-11 09:06:03 * @LastEditors: sueRimn - * @LastEditTime: 2021-01-04 16:13:12 + * @LastEditTime: 2021-02-25 11:44:34 */ import { Component, OnInit, ViewChild, Inject,Input } from '@angular/core'; import {HttpClient} from '@angular/common/http' @@ -126,12 +126,23 @@ export class ExaminerIndexComponent implements OnInit { //编辑试卷 editPaper(item){ + console.log(item) if(item.status == 2){ const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('考试结束，不能编辑','确定',config); - }else{ + }else if(item.status == 1){ + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('开考中，不能编辑','确定',config); + } + else{ + /* const dialogRef = this.dialog.open(editorsDia, { + width: '650px', + data: item + }); */ sessionStorage.setItem("paperId",item.id) this.router.navigateByUrl("/examiner/create-test-score?pattern=edit") } @@ -308,6 +319,7 @@ export class ExaminerIndexComponent implements OnInit { } +//创建试题弹窗 @Component({ selector: 'finish-dialog', templateUrl: 'finishDia.html', @@ -361,8 +373,6 @@ export class FinishDia{ var n=min2-min1; //将日期和时间两个部分计算出来的差值相加，即得到两个时间相减后的分钟数 var minutes=m+n; - - console.log(this.startTime,this.endTime) let params = { id: null, title: this.examName, @@ -375,7 +385,7 @@ export class FinishDia{ creatorId: this.Profiles.id, paperDataInfo: null } - //console.log(params) + this.http.post('/api/Papers',params).subscribe(data => { this.snackBar.open('创建成功','确定',config); this.dialogRef.close(); @@ -405,3 +415,6 @@ export class FinishDia{ this.dialogRef.close(); } } + + + \ No newline at end of file diff --git a/src/app/examiner/examiner-new-one/examiner-new-one.component.ts b/src/app/examiner/examiner-new-one/examiner-new-one.component.ts index 7214caf..d12fcc4 100644 --- a/src/app/examiner/examiner-new-one/examiner-new-one.component.ts +++ b/src/app/examiner/examiner-new-one/examiner-new-one.component.ts @@ -4,7 +4,7 @@ * @Author: sueRimn * @Date: 2020-12-11 16:34:26 * @LastEditors: sueRimn - * @LastEditTime: 2020-12-21 11:03:29 + * @LastEditTime: 2021-02-23 17:13:27 */ import { Component, OnInit, ViewChild, Inject } from '@angular/core'; import { HttpClient } from '@angular/common/http' @@ -36,6 +36,7 @@ export class ExaminerNewOneComponent implements OnInit { this.getUnittype(); this.getAllKeyUnit(); } + pattern:any = this.route.snapshot.queryParams.pattern || '' indexid=sessionStorage.getItem("paperId") //上个页面传过来的id removeClass=document.getElementsByClassName("mat-form-field-underline") @@ -343,7 +344,7 @@ export class ExaminerNewOneComponent implements OnInit { } //下一步事件 nextClick(){ - //console.log(this.selectedunitArr) + console.log(this.pattern) /* var workDate=[] for(var i=0;i{ this.dataSource=data.items this.length=data.totalCount - console.log(this.dataSource) }) } @@ -72,7 +71,7 @@ export class MarkPapersTwoComponent implements OnInit { //阅卷 reviewFiles (e) { - window.open(`/reviewFiles?examId=${e.id}`) + window.open(`/reviewFiles?examId=${e.id}&paperType=1`) } } diff --git a/src/app/examiner/review-files/review-files.component.html b/src/app/examiner/review-files/review-files.component.html index bf9b93e..70434cf 100644 --- a/src/app/examiner/review-files/review-files.component.html +++ b/src/app/examiner/review-files/review-files.component.html @@ -19,7 +19,7 @@
- + @@ -33,7 +33,7 @@ - +
{{item.name}}
@@ -46,8 +46,8 @@ done clear - create -

{{elements.result}}

+ create +

{{elements.result}}

@@ -57,8 +57,8 @@ done clear - -

{{element.result}}

+ +

{{element.result}}

@@ -69,7 +69,7 @@ - +
{{item.name}}
@@ -77,8 +77,8 @@ done clear - -

{{element.result}}

+ +

{{element.result}}

@@ -88,7 +88,7 @@ - +
{{item.name}}
@@ -100,8 +100,8 @@ done clear - create -

{{elements.result}}

+ create +

{{elements.result}}

@@ -113,7 +113,7 @@ - +
{{item.name}}
@@ -125,8 +125,8 @@ done clear - create -

{{elements.result}}

+ create +

{{elements.result}}

@@ -138,7 +138,7 @@ - +
{{item.name}}
@@ -146,8 +146,8 @@ done clear - -

{{element.result}}

+ +

{{element.result}}

@@ -176,12 +176,13 @@ {{item.score || '暂未评分'}} {{item.score ? '已阅' : '未阅'}} - 阅卷 + 阅卷 + 查看 -
+
refresh (阅卷完成后请点击此按钮刷新表格数据)
diff --git a/src/app/examiner/review-files/review-files.component.ts b/src/app/examiner/review-files/review-files.component.ts index d61e769..2009c48 100644 --- a/src/app/examiner/review-files/review-files.component.ts +++ b/src/app/examiner/review-files/review-files.component.ts @@ -14,10 +14,12 @@ export class ReviewFilesComponent implements OnInit { constructor(public http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public route:ActivatedRoute) { } async ngOnInit(): Promise { + this.paperType = this.route.snapshot.queryParams.paperType || 1 await this.getTest() this.getUnitPlans()//将试卷的预案考题放进数据中 } + paperType:any = 1; //阅卷/查看 examId:any = this.route.snapshot.queryParams.examId; //考卷id paperId:any; //试卷id paperData:any //试卷信息 @@ -32,6 +34,7 @@ export class ReviewFilesComponent implements OnInit { this.http.get(`/api/Examinations/${this.examId}`).subscribe((data:any)=>{ this.paperData = data this.paperId = this.paperData.paperId + this.paperData.examinationDataInfo.forEach((element,index) => { element.adjoinData? element.adjoinData = JSON.parse(element.adjoinData) : null element.basicInfoData? element.basicInfoData = JSON.parse(element.basicInfoData) : null @@ -43,11 +46,19 @@ export class ReviewFilesComponent implements OnInit { element.facilityItemScore = data.paperInfo.paperDataInfo[index].facilityItemScore //消防设施单项分 element.functionalDivisionItemSocre = data.paperInfo.paperDataInfo[index].functionalDivisionItemSocre //功能分区单选分 element.importLocationItemScore = data.paperInfo.paperDataInfo[index].importLocationItemScore //重点部位单项分 + if (this.paperType == 1) { //阅卷 + element.adjoinScore = data.paperInfo.paperDataInfo[index].adjoinScore //四周毗邻 总分 + element.basicInfoScore = data.paperInfo.paperDataInfo[index].basicInfoScore //基本信息 总分 + element.facilityScore = data.paperInfo.paperDataInfo[index].facilityScore //消防设施 总分 + element.functionalDivisionScore = data.paperInfo.paperDataInfo[index].functionalDivisionScore //功能分区 总分 + element.importLocationScore = data.paperInfo.paperDataInfo[index].importLocationScore //重点部位 总分 + } element.score = element.adjoinScore + element.basicInfoScore + element.facilityScore + element.functionalDivisionScore + element.importLocationScore }); this.paperCompanyData = JSON.parse( JSON.stringify(data.examinationDataInfo) ) //具体考卷 this.selectPaper = this.paperCompanyData[0] resolve(1) + }) }) } @@ -65,7 +76,7 @@ export class ReviewFilesComponent implements OnInit { await new Promise((resolve,reject)=>{ this.http.get(`/api/ExaminationPlans`,{params:params}).subscribe(data => { item.planList = data - item.planList.forEach(element => { item.planScore = item.planScore + element.paperPlanInfo.score }); + item.planList.forEach(element => { this.paperType == 1? item.planScore = item.planScore + element.paperPlanInfo.score : item.planScore = item.planScore + element.score }); if(type == false){ const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; @@ -76,7 +87,7 @@ export class ReviewFilesComponent implements OnInit { }) }) } - this.handleResults() //计算答案正确错误 + type? this.handleResults() : null //计算答案正确错误 } //处理数据 计算答案正确错误 @@ -182,7 +193,6 @@ export class ReviewFilesComponent implements OnInit { }); //forEach }); - console.log(this.selectPaper) } //修改结果 @@ -229,22 +239,62 @@ export class ReviewFilesComponent implements OnInit { //提交阅卷结果 submitResult () { - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 5000 - this.snackBar.open('阅卷结果提交成功','确定',config); + let bodyData = { + id: this.paperData.id, + isMarked: true, + totalScore: 0, + examinationDataInfo: [], + } + let paramsData = JSON.parse(JSON.stringify( this.paperCompanyData )) //考卷 + paramsData.forEach(element => { + //计算总分 + bodyData.totalScore = bodyData.totalScore+element.adjoinTotalPoints+element.basicInfoTotalPoints+element.facilityTotalPoints+element.functionalDivisionTotalPoints+element.importLocationTotalPoints + element.planList.forEach(item => { + bodyData.totalScore = bodyData.totalScore + item.score || 0 + }); + //计算总分 + element.adjoinScore = element.adjoinTotalPoints //四周毗邻 + delete element.adjoinTotalPoints + delete element.adjoinItemScore + element.basicInfoScore = element.basicInfoTotalPoints //基本信息 + delete element.basicInfoTotalPoints + delete element.basicInfoItemScore + element.facilityScore = element.facilityTotalPoints //消防设施 + delete element.facilityTotalPoints + delete element.facilityItemScore + element.functionalDivisionScore = element.functionalDivisionTotalPoints //功能分区 + delete element.functionalDivisionTotalPoints + delete element.functionalDivisionItemSocre + element.importLocationScore = element.importLocationTotalPoints //重点部位 + delete element.importLocationTotalPoints + delete element.importLocationItemScore + delete element.planList + delete element.planScore + delete element.score + element.adjoinData = JSON.stringify(element.adjoinData) + element.basicInfoData = JSON.stringify(element.basicInfoData) + element.facilityData = JSON.stringify(element.facilityData) + element.functionalDivisionData = JSON.stringify(element.functionalDivisionData) + element.importLocationData = JSON.stringify(element.importLocationData) + }); + bodyData.examinationDataInfo = paramsData + this.http.put(`/api/Examinations/${this.paperData.id}`,bodyData).subscribe(data=>{ + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 5000 + this.snackBar.open('阅卷结果提交成功','确定',config); + }) } //作战部署 阅卷 - readExam(item){ - console.log(item) - sessionStorage.setItem('companyName',this.selectPaper.companyInfo.name) - sessionStorage.setItem('planId',item.paperPlanInfo.planComponentId) - sessionStorage.setItem('buildingTypeId',this.selectPaper.companyInfo.buildingTypes[0].id) - sessionStorage.setItem('companyId',this.selectPaper.companyInfo.id) + readExam(item,e){ + sessionStorage.setItem('companyName', this.selectPaper.companyInfo.name) + sessionStorage.setItem('planId', item.paperPlanInfo.planComponentId) + sessionStorage.setItem('buildingTypeId', this.selectPaper.companyInfo.buildingTypes[0].id) + sessionStorage.setItem('companyId', this.selectPaper.companyInfo.id) let openType - item.examPlanType == 0 ? openType = 1 : openType = 2 - window.open(`/canvasToolRead?planName=${item.paperPlanInfo.title}&paperplanId=${item.paperPlanId}&openType=${openType}&paperId=${this.paperId}&examId=${this.route.snapshot.queryParams.examId}&planComponentId=${item.paperPlanInfo.planComponentId}`) + item.paperPlanInfo.examPlanType == 0 ? openType = 1 : openType = 2 + window.open(`/canvasToolRead?planName=${item.paperPlanInfo.title}&paperplanId=${item.paperPlanId}&openType=${openType}&paperId=${this.paperId}&examId=${this.route.snapshot.queryParams.examId}&planComponentId=${item.paperPlanInfo.planComponentId}&paperType=${e}`) } diff --git a/src/app/student/student-exam-record/student-exam-record.component.html b/src/app/student/student-exam-record/student-exam-record.component.html index 79aafdd..c90eb6f 100644 --- a/src/app/student/student-exam-record/student-exam-record.component.html +++ b/src/app/student/student-exam-record/student-exam-record.component.html @@ -23,8 +23,8 @@ {{item.examineeName}} {{item.paperInfo.organizationsName}} {{item.paperInfo.startTime|date:'yyyy-MM-dd HH:mm'}} - 90分 - 查看 + {{ item.totalScore && item.totalScore!=0 ? item.totalScore+'分' : '未阅卷' }} + 查看 diff --git a/src/app/student/student-exam-record/student-exam-record.component.ts b/src/app/student/student-exam-record/student-exam-record.component.ts index ffe8ed3..da982fe 100644 --- a/src/app/student/student-exam-record/student-exam-record.component.ts +++ b/src/app/student/student-exam-record/student-exam-record.component.ts @@ -61,8 +61,12 @@ export class StudentExamRecordComponent implements OnInit { this.http.get("/api/Examinations",{params:paramsdata}).subscribe((data:any)=>{ this.tabledataSource=data.items this.length=data.totalCount - console.log(this.tabledataSource) }) } + //查看试卷 + seePaper (e) { + window.open(`/reviewFiles?examId=${e.id}&paperType=2`) + } + } diff --git a/src/app/tabbar/tabbar.component.html b/src/app/tabbar/tabbar.component.html index 265f213..ecefc0f 100644 --- a/src/app/tabbar/tabbar.component.html +++ b/src/app/tabbar/tabbar.component.html @@ -15,7 +15,9 @@ - {{realName}}keyboard_arrow_down + + {{realName}}keyboard_arrow_down + - -
+
- open_with - + open_with +
@@ -45,9 +48,7 @@
- - -
+
@@ -153,7 +154,7 @@
-
+
diff --git a/src/app/ui/collection-tools-examinee/collection-tools.component.scss b/src/app/ui/collection-tools-examinee/collection-tools.component.scss index 0b13e68..a53fc75 100644 --- a/src/app/ui/collection-tools-examinee/collection-tools.component.scss +++ b/src/app/ui/collection-tools-examinee/collection-tools.component.scss @@ -188,11 +188,11 @@ box-sizing: border-box; padding: 0 5px; font-size: 14px; - .mat-icon:hover {cursor: move;;} - .mat-icon { + .above:hover {cursor: move;;} + .above { font-size: 24px; color: rgb(175, 164, 164); - margin: 0 30px 0 10px; + margin: 0 10px 0 10px; } } .everyTotal { diff --git a/src/app/ui/collection-tools-read/collection-tools.component.html b/src/app/ui/collection-tools-read/collection-tools.component.html index 5543520..8e566b4 100644 --- a/src/app/ui/collection-tools-read/collection-tools.component.html +++ b/src/app/ui/collection-tools-read/collection-tools.component.html @@ -7,13 +7,18 @@ 考试要点 : {{planData.mainPoint}}
-
+
+
+ +
@@ -23,13 +28,16 @@ - -
+
- open_with - + open_with +
@@ -46,7 +54,7 @@
-
+
@@ -58,8 +66,7 @@
- -
+
@@ -124,7 +131,7 @@
-
+
diff --git a/src/app/ui/collection-tools-read/collection-tools.component.scss b/src/app/ui/collection-tools-read/collection-tools.component.scss index 89dc490..b31b630 100644 --- a/src/app/ui/collection-tools-read/collection-tools.component.scss +++ b/src/app/ui/collection-tools-read/collection-tools.component.scss @@ -201,11 +201,11 @@ box-sizing: border-box; padding: 0 5px; font-size: 14px; - .mat-icon:hover {cursor: move;;} - .mat-icon { + .above:hover {cursor: move;;} + .above { font-size: 24px; color: rgb(175, 164, 164); - margin: 0 30px 0 10px; + margin: 0 10px 0 10px; } } .everyTotal { diff --git a/src/app/ui/collection-tools-read/collection-tools.component.ts b/src/app/ui/collection-tools-read/collection-tools.component.ts index b8ee7bf..ffc8af1 100644 --- a/src/app/ui/collection-tools-read/collection-tools.component.ts +++ b/src/app/ui/collection-tools-read/collection-tools.component.ts @@ -192,7 +192,7 @@ export class CollectionToolsReadComponent implements OnInit { } async ngOnInit(): Promise { - + this.getAllBuildings() //获取所有建筑 this.getAllFirePlan() //获取当前单位灾情 @@ -211,6 +211,8 @@ export class CollectionToolsReadComponent implements OnInit { } }) } + + paperType:any = this.route.snapshot.queryParams.paperType // 阅卷 / 查看试卷 paperId:any = this.route.snapshot.queryParams.paperId planData:any //当前考题题目 Facilities:any //当前预案考题所有楼层要考的基本信息素材 @@ -228,14 +230,13 @@ export class CollectionToolsReadComponent implements OnInit { let questions = JSON.parse(this.planData.examDisposalNodesData) this.handleHybridTree(questions,'题目') - this.Facilities = JSON.parse(this.planData.examFacilityAssetsData) + this.Facilities = JSON.parse(this.planData.examFacilityAssetsData) console.log('当前预案设定需要隐藏的基本信息图标',this.Facilities) resolve(1) }) }) } - ngAfterViewInit(): void { this.getSitePlan() //获取总平面图/楼层 @@ -457,16 +458,14 @@ export class CollectionToolsReadComponent implements OnInit { //打开消防设施考题设定 openFireExamination () { - let buildFloorData = { buildingData:this.beforeOneCheckedBuilding, floorData:this.selectingSitePlan } - let data = { oldRealData:this.storeyData ,buildFloorData:buildFloorData,Facilities:this.Facilities,allFireElements:this.allFireElements} - let dialogRef = this.dialog.open(examinationQuestionsRead,{data}); + let data = { oldRealData:this.storeyData ,buildFloorData:buildFloorData,Facilities:this.Facilities,allFireElements:this.allFireElements,paperType:this.paperType} + let dialogRef = this.dialog.open(examinationQuestionsRead,{data}); //examinationQuestionsExaminee } - answerDivDrag:boolean = false//查看答案窗口的显隐 answertreeData:any = [] lookAnswerDiv(){ diff --git a/src/app/ui/collection-tools-read/examinationQuestions.html b/src/app/ui/collection-tools-read/examinationQuestions.html index d92a7ee..b9d25c4 100644 --- a/src/app/ui/collection-tools-read/examinationQuestions.html +++ b/src/app/ui/collection-tools-read/examinationQuestions.html @@ -1,5 +1,5 @@
-
需要标记的消防设施
+
消防设施
-
+
- open_with - + open_with +
@@ -35,7 +39,7 @@
-
+
@@ -138,7 +142,7 @@
-
+
diff --git a/src/app/ui/collection-tools/collection-tools.component.scss b/src/app/ui/collection-tools/collection-tools.component.scss index e97085a..cbff07c 100644 --- a/src/app/ui/collection-tools/collection-tools.component.scss +++ b/src/app/ui/collection-tools/collection-tools.component.scss @@ -183,11 +183,11 @@ box-sizing: border-box; padding: 0 5px; font-size: 14px; - .mat-icon:hover {cursor: move;;} - .mat-icon { + .above:hover {cursor: move;;} + .above { font-size: 24px; color: rgb(175, 164, 164); - margin: 0 30px 0 10px; + margin: 0 10px 0 10px; } } .everyTotal { diff --git a/src/app/ui/collection-tools/collection-tools.component.ts b/src/app/ui/collection-tools/collection-tools.component.ts index 10b85d5..98db288 100644 --- a/src/app/ui/collection-tools/collection-tools.component.ts +++ b/src/app/ui/collection-tools/collection-tools.component.ts @@ -1250,12 +1250,7 @@ export class CollectionToolsComponent implements OnInit { this.canvasData.originaleveryStoreyData.version? null : this.canvasData.originaleveryStoreyData.version = "2.0" this.canvasData.originaleveryStoreyData.sitePlanId? null : this.canvasData.originaleveryStoreyData.sitePlanId = e.id || null this.renovateTreeData() - this.canvas.onExaminerClickFloor() - // this.canvas.createBackground(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle); - // this.canvas.createFloorShape(this.canvasData.originaleveryStoreyData.data); - // this.canvas.createNodeShape(this.canvasData.selectPanelPoint.Data); - // // 隐藏基本信息图形 - // this.canvas.setNameVisible(false, 0); + this.canvas.onExaminerClickFloor_CreateTestpaper() }) } @@ -1281,13 +1276,7 @@ export class CollectionToolsComponent implements OnInit { this.canvasData.originaleveryStoreyData.version? null : this.canvasData.originaleveryStoreyData.version = "2.0" this.canvasData.originaleveryStoreyData.buildingAreaId? null : this.canvasData.originaleveryStoreyData.buildingAreaId = e.id || null this.renovateTreeData() - this.canvas.onExaminerClickFloor() - // this.canvas.createBackground(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle); - // await this.canvas.refreshBackgroundImage(); - // this.canvas.createFloorShape(this.canvasData.originaleveryStoreyData.data); - // this.canvas.createNodeShape(this.canvasData.selectPanelPoint.Data); - // // 隐藏基本信息图形 - // this.canvas.setNameVisible(false, 0); + this.canvas.onExaminerClickFloor_CreateTestpaper() }) } diff --git a/src/app/ui/enterpriseuser/addenterpriseuser.component.html b/src/app/ui/enterpriseuser/addenterpriseuser.component.html index 3c624ef..cc2f159 100644 --- a/src/app/ui/enterpriseuser/addenterpriseuser.component.html +++ b/src/app/ui/enterpriseuser/addenterpriseuser.component.html @@ -1,48 +1,50 @@ -

创建用户

+

新增用户

- - - 请输入正确身份证号 - +
- +
- -
- {{item.name}} -
-
- {{item.name}} -
-
- {{item.name}} -
- +
- +
+

消防救援站:

+
+ +
+ + + +
  • {{node.name}}
    • +     + + +
  • {{node.name}}
    • +     +     +
    +

    {{errmsg}}

    - +
    diff --git a/src/app/ui/enterpriseuser/addenterpriseuser.component.ts b/src/app/ui/enterpriseuser/addenterpriseuser.component.ts index e7aab20..feaf5df 100644 --- a/src/app/ui/enterpriseuser/addenterpriseuser.component.ts +++ b/src/app/ui/enterpriseuser/addenterpriseuser.component.ts @@ -1,8 +1,10 @@ import { Component, OnInit, Inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -import {MatDialogRef} from '@angular/material/dialog'; +import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; import {FormControl} from '@angular/forms'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; +import { FlatTreeControl } from '@angular/cdk/tree'; +import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; @Component({ selector: 'addenterpriseuser', @@ -11,57 +13,59 @@ import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; }) export class AddEnterpriserUser { - toppings = new FormControl(); - constructor(private http: HttpClient,public dialogRef: MatDialogRef,public snackBar: MatSnackBar) {} - errmsg:any; //捕获错误信息 - detachmentPosts: any = []//支队职务列表 - brigadePosts: any = []//大队职务列表 - RescueStationPosts: any = []//救援站职务列表 - ngOnInit(): void { - this.getAllPosts() - } + constructor(private http: HttpClient,public dialogRef: MatDialogRef,public snackBar: MatSnackBar,@Inject(MAT_DIALOG_DATA) public data) {} + + ngOnInit(): void { this.dataSource.data = this.data } + + errmsg:string = null; + + organizationId:string = null; + organizationName:string = null; - //获得所有职务 - getAllPosts(){ - this.http.get("/api/Posts").subscribe( (data:any) =>{ - data.forEach(item => { - if(item.name.indexOf("支队级") != -1){ - this.detachmentPosts.push(item) - }else if(item.name.indexOf("大队级") != -1){ - this.brigadePosts.push(item) - }else{ - this.RescueStationPosts.push(item) - } - }); - }) + private _transformer = (node, level: number) => { //初始化tree + return { + expandable: !!node.children && node.children.length > 0, + name: node.name, + level: level, + id: node.id, + parentId: node.parentId, + children: node.children + }; } + 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; + //选择tree节点 + selectTree (e) { + this.organizationId = e.id + this.organizationName = e.name + } //提交创建表单 onSubmit (e) { - let date = new Date() - let postsArr = this.toppings.value - let postsObj = [] - postsArr.forEach((item) => { - postsObj.push({id:item, name:""}) - }) - let body = { - name : e.idNumber, - realName : e.realName, - roleType : 2, - enabled : true, - creationTime : date, - posts : postsObj - } - this.http.post("/api/Users",body).subscribe( data => { - this.dialogRef.close(data); - },err => { + if (this.organizationId && this.organizationName) { + e.phone = String(e.phone) + e.roleType = 2 + e.enabled = true + e.creationTime = new Date() + e.organizationId = this.organizationId + e.organizationName = this.organizationName + this.http.post("/api/ExamUsers",e).subscribe(data => { + this.dialogRef.close(data); + },err => { + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open(err,'确定',config); + }) + } else { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 - this.snackBar.open(err,'确定',config); - }) - + this.snackBar.open('请选择消防救援站','确定',config); + } } } \ No newline at end of file diff --git a/src/app/ui/enterpriseuser/editenterpriseuser.html b/src/app/ui/enterpriseuser/editenterpriseuser.html index 964e833..410e6aa 100644 --- a/src/app/ui/enterpriseuser/editenterpriseuser.html +++ b/src/app/ui/enterpriseuser/editenterpriseuser.html @@ -4,42 +4,47 @@
    - +
    - +
    - -
    - {{item.name}} -
    -
    - {{item.name}} -
    -
    - {{item.name}} -
    -     +
    +
    +

    消防救援站:

    +
    + +
    + + + +
  • {{node.name}}
    • +     + + +
  • {{node.name}}
    • +     +     +

    {{errmsg}}

    - +
    diff --git a/src/app/ui/enterpriseuser/enterpriseuser.component.html b/src/app/ui/enterpriseuser/enterpriseuser.component.html index ca37553..47ee53d 100644 --- a/src/app/ui/enterpriseuser/enterpriseuser.component.html +++ b/src/app/ui/enterpriseuser/enterpriseuser.component.html @@ -11,9 +11,24 @@
    -
    +
    - + + highlight_off +
    + + + +
  • {{node.name}}
    • +     + + +
  • {{node.name}}
    • +     +     +
    @@ -26,7 +41,7 @@
    - + @@ -36,7 +51,7 @@ - + @@ -60,7 +75,7 @@ 重置密码 编辑 禁用 - 禁用 + 启用 删除 diff --git a/src/app/ui/enterpriseuser/enterpriseuser.component.scss b/src/app/ui/enterpriseuser/enterpriseuser.component.scss index 71c0551..85b628b 100644 --- a/src/app/ui/enterpriseuser/enterpriseuser.component.scss +++ b/src/app/ui/enterpriseuser/enterpriseuser.component.scss @@ -52,3 +52,33 @@ table { .red{ color: #FF8678 } .gray{ color: gray; } } + +//tree +.treeDiv { + max-height: 300px; + overflow-y: auto; + .mat-icon-button { + width: 20px; + height: 20px; + line-height: 20px; + } + li { cursor: pointer; } + .mat-tree-node:hover { background-color: rgb(240, 236, 236); } +} + +.closeTree { + cursor: pointer; + position: absolute; + top: 40px; + right: -95px; + z-index: 100; +} +.searchTree { + .mat-tree-node button .mat-icon { color: #000; } + border: 1px solid rgb(207, 204, 204); + width: 350px; + max-height: 150px; + position: absolute; + top: 40px; + left: 0; +} diff --git a/src/app/ui/enterpriseuser/enterpriseuser.component.ts b/src/app/ui/enterpriseuser/enterpriseuser.component.ts index 6967c81..601d987 100644 --- a/src/app/ui/enterpriseuser/enterpriseuser.component.ts +++ b/src/app/ui/enterpriseuser/enterpriseuser.component.ts @@ -8,6 +8,8 @@ import { AddEnterpriserUser } from './addenterpriseuser.component' import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import {FormControl} from '@angular/forms'; import { Router,ActivatedRoute } from '@angular/router' +import { FlatTreeControl } from '@angular/cdk/tree'; +import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; @Component({ selector: 'app-enterpriseuser', @@ -20,6 +22,53 @@ export class EnterpriseuserComponent implements OnInit { ngOnInit() { this.initData() + this.getOrganizations() + } + + allOrganizations:any; //所有组织机构 + treeData:any = []; //tree型 data + isShowTree:boolean = false; //树形结构是否展示 + showTree () { this.isShowTree = true } + hideTree () { this.isShowTree = false } + + //获取所有组织机构 + getOrganizations () { + this.http.get('/api/Organizations').subscribe((data:any)=>{ + this.allOrganizations = data + data.forEach(element => { + element.children = [] + data.forEach(item => { item.parentId === element.id? element.children.push(item) : null }); + }); + data.forEach(element => { + !element.parentId? this.treeData.push(element) : null + }); + this.dataSources.data = this.treeData + }) //http + } + + organizationId:string = null; + organizationName:string = null; + + private _transformer = (node, level: number) => { //初始化tree + return { + expandable: !!node.children && node.children.length > 0, + name: node.name, + level: level, + id: node.id, + parentId: node.parentId, + children: node.children + }; + } + treeControl = new FlatTreeControl(node => node.level, node => node.expandable); + treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); + dataSources = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); + hasChild = (_: number, node: any) => node.expandable; + + //选择tree节点 + selectTree (e) { + this.organizationId = e.id + this.organizationName = e.name + this.isShowTree = false } displayedColumns: string[] = [ 'name','identitycard', 'post', 'tel', 'time', 'operation',]; @@ -27,7 +76,6 @@ export class EnterpriseuserComponent implements OnInit { name:any //姓名 identityCard:any //身份证 - fireTeam:any; //消防救援站 //分页 @ViewChild(MatPaginator, {static: true}) @@ -42,8 +90,9 @@ export class EnterpriseuserComponent implements OnInit { chagePage (e) { this.pageNumber = e.pageIndex+1 let data= { - Name: this.identityCard || '', RealName: this.name || '', + IdentityCard: this.identityCard || '', + OrganizationId: this.organizationId || '', RoleType: '2', PageNumber: String(this.pageNumber), } @@ -57,8 +106,9 @@ export class EnterpriseuserComponent implements OnInit { //页面初始化 + 查询 + 重置 initData () { let data= { - Name: this.identityCard || '', RealName: this.name || '', + IdentityCard: this.identityCard || '', + OrganizationId: this.organizationId || '', RoleType: '2', } this.http.get('/api/ExamUsers',{params:data}).subscribe((data:any)=>{ @@ -72,8 +122,9 @@ export class EnterpriseuserComponent implements OnInit { //更新当前页数据 getAllUsers () { let data= { - Name: this.identityCard || '', RealName: this.name || '', + IdentityCard: this.identityCard || '', + OrganizationId: this.organizationId || '', RoleType: '2', PageNumber: String(this.pageNumber), } @@ -86,16 +137,17 @@ export class EnterpriseuserComponent implements OnInit { //清空搜索 empty () { - this.identityCard = '' - this.name = '' + this.name = '', + this.identityCard = '', + this.organizationId = '', + this.organizationName = '', this.initData() } //创建用户 open(){ - let dialogRef = this.dialog.open(AddEnterpriserUser, {//调用open方法打开对话框并且携带参数过去 - width: '250px', - }); + let data = this.treeData + let dialogRef = this.dialog.open(AddEnterpriserUser,{data}); dialogRef.afterClosed().subscribe(data=>{ if (data) { const config = new MatSnackBarConfig(); @@ -109,10 +161,8 @@ export class EnterpriseuserComponent implements OnInit { //编辑企业用户 edit (e) { - let dialogRef = this.dialog.open(editenterpriseuser,{ - width: '250px', - data:e - }); + let data = {treeData: this.treeData, userData: e} + let dialogRef = this.dialog.open(editenterpriseuser,{data}); dialogRef.afterClosed().subscribe(data=>{ if (data) { const config = new MatSnackBarConfig(); @@ -126,32 +176,34 @@ export class EnterpriseuserComponent implements OnInit { //重置密码 reset (e) { - this.http.put(`/api/ExamUsers/${e.name}/ResetPassword`,{}).subscribe( - data=>{ - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('重置密码成功!','确定',config); - },err=>{ - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('重置密码失败!','确定',config); - }) + this.http.put(`/api/ExamUsers/${e.id}/ResetPassword`,{}).subscribe(data=>{ + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('重置密码成功!','确定',config); + },err=>{ + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('重置密码失败!','确定',config); + }) } //启用 enabled (e) { - let date = new Date() let body = { + creationTime: new Date(), + enabled: true, + id: e.id, + identityCard: e.identityCard, name : e.name, + organizationId: e.organizationId, + organizationName: e.organizationName, + phone: e.phone, realName : e.realName, roleType : e.roleType, - enabled : true, - creationTime : date, - posts : e.posts } - this.http.put(`/api/ExamUsers/${e.name}`,body).subscribe(data => { + this.http.put(`/api/ExamUsers/${e.id}`,body).subscribe(data => { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000; @@ -162,16 +214,19 @@ export class EnterpriseuserComponent implements OnInit { //禁用 noEnabled (e) { - let date = new Date() let body = { + creationTime: new Date(), + enabled: false, + id: e.id, + identityCard: e.identityCard, name : e.name, + organizationId: e.organizationId, + organizationName: e.organizationName, + phone: e.phone, realName : e.realName, roleType : e.roleType, - enabled : false, - creationTime : date, - posts : e.posts } - this.http.put(`/api/ExamUsers/${e.name}`,body).subscribe(data => { + this.http.put(`/api/ExamUsers/${e.id}`,body).subscribe(data => { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000; @@ -184,7 +239,7 @@ export class EnterpriseuserComponent implements OnInit { delete (e) { let isTrue = confirm('您确定要删除吗') if (isTrue) { - this.http.delete(`/api/ExamUsers/${e.name}`).subscribe(data=>{ + this.http.delete(`/api/ExamUsers/${e.id}`).subscribe(data=>{ const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 @@ -208,49 +263,71 @@ export class EnterpriseuserComponent implements OnInit { }) export class editenterpriseuser { - toppings:any = new FormControl(); - constructor(private http: HttpClient,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data) {} - errmsg:any; //捕获错误信息 - detachmentPosts: any = []//支队职务列表 - brigadePosts: any = []//大队职务列表 - RescueStationPosts: any = []//救援站职务列表 + constructor(private http: HttpClient,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar,) {} - IdNumber:any //身份证号 - realName:any //真实姓名 ngOnInit(): void { - this.toppings.value = [] - this.IdNumber = this.data.name - this.realName = this.data.realName - this.data.posts.forEach((item) => { - this.toppings.value.push(item.id) - }) + this.dataSource.data = this.data.treeData + this.realName = JSON.parse(JSON.stringify(this.data.userData.realName)) + this.identityCard = JSON.parse(JSON.stringify(this.data.userData.identityCard)) + this.phone = JSON.parse(JSON.stringify(this.data.userData.phone)) + this.organizationId = JSON.parse(JSON.stringify(this.data.userData.organizationId)) + this.organizationName = JSON.parse(JSON.stringify(this.data.userData.organizationName)) } - //获得所有职务 - getAllPosts(){ - + errmsg:string = null; //捕获错误信息 + + realName:string = null; + identityCard:string = null; + phone:number = null; + organizationId:string = null; + organizationName:string = null; + + private _transformer = (node, level: number) => { //初始化tree + return { + expandable: !!node.children && node.children.length > 0, + name: node.name, + level: level, + id: node.id, + parentId: node.parentId, + children: node.children + }; + } + 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; + + //选择tree节点 + selectTree (e) { + this.organizationId = e.id + this.organizationName = e.name } - //提交创建表单 onSubmit (e) { - let date = new Date() - let postsArr = this.toppings.value - let postsObj = [] - postsArr.forEach((item) => { - postsObj.push({id:item, name:""}) - }) - let body = { - name : this.data.name, - realName : e.realName, - roleType : 2, - enabled : this.data.enabled, - creationTime : date, - posts : postsObj + if (this.organizationId && this.organizationName) { + e.phone = String(e.phone) + e.roleType = 2 + e.name = this.data.userData.name + e.id = this.data.userData.id + e.enabled = this.data.userData.enabled + e.creationTime = new Date() + e.organizationId = this.organizationId + e.organizationName = this.organizationName + this.http.put(`/api/ExamUsers/${this.data.userData.id}`,e).subscribe(data => { + this.dialogRef.close('success'); + },err => { + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open(err,'确定',config); + }) + } else { + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('请选择消防救援站','确定',config); } - this.http.put(`/api/ExamUsers/${this.data.name}`,body).subscribe(data => { - this.dialogRef.close("修改成功"); - }) } } diff --git a/src/app/ui/teacherManagement/addenterpriseuser.component.html b/src/app/ui/teacherManagement/addenterpriseuser.component.html index 36be501..11c2847 100644 --- a/src/app/ui/teacherManagement/addenterpriseuser.component.html +++ b/src/app/ui/teacherManagement/addenterpriseuser.component.html @@ -1,48 +1,44 @@ -

    创建教员

    +

    新增用户

    - - - 帐号格式为字母+数字 - +
    - +
    -
    - - -
    - {{item.name}} -
    -
    - {{item.name}} -
    -
    - {{item.name}} -
    -     -     +
    +

    消防救援站:

    +
    + +
    + + + +
  • {{node.name}}
    • +     + + +
  • {{node.name}}
    • +     +
    -

    {{errmsg}}

    - +
    diff --git a/src/app/ui/teacherManagement/addenterpriseuser.component.ts b/src/app/ui/teacherManagement/addenterpriseuser.component.ts index c4d6c72..22a0749 100644 --- a/src/app/ui/teacherManagement/addenterpriseuser.component.ts +++ b/src/app/ui/teacherManagement/addenterpriseuser.component.ts @@ -1,8 +1,10 @@ import { Component, OnInit, Inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -import {MatDialogRef} from '@angular/material/dialog'; +import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; import {FormControl} from '@angular/forms'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; +import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; +import { FlatTreeControl } from '@angular/cdk/tree'; @Component({ selector: 'addenterpriseuser', @@ -11,57 +13,60 @@ import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; }) export class AddTeacher { - toppings = new FormControl(); - constructor(private http: HttpClient,public dialogRef: MatDialogRef,public snackBar: MatSnackBar) {} - errmsg:any; //捕获错误信息 - detachmentPosts: any = []//支队职务列表 - brigadePosts: any = []//大队职务列表 - RescueStationPosts: any = []//救援站职务列表 - ngOnInit(): void { - this.getAllPosts() - } + constructor(private http: HttpClient,public dialogRef: MatDialogRef,public snackBar: MatSnackBar,@Inject(MAT_DIALOG_DATA) public data) {} + + ngOnInit(): void { this.dataSource.data = this.data } + + errmsg:string = null; + + organizationId:string = null; + organizationName:string = null; - //获得所有职务 - getAllPosts(){ - this.http.get("/api/Posts").subscribe( (data:any) =>{ - data.forEach(item => { - if(item.name.indexOf("支队级") != -1){ - this.detachmentPosts.push(item) - }else if(item.name.indexOf("大队级") != -1){ - this.brigadePosts.push(item) - }else{ - this.RescueStationPosts.push(item) - } - }); - }) + private _transformer = (node, level: number) => { //初始化tree + return { + expandable: !!node.children && node.children.length > 0, + name: node.name, + level: level, + id: node.id, + parentId: node.parentId, + children: node.children + }; } + 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; + //选择tree节点 + selectTree (e) { + this.organizationId = e.id + this.organizationName = e.name + } //提交创建表单 onSubmit (e) { - let date = new Date() - let postsArr = this.toppings.value - let postsObj = [] - postsArr.forEach((item) => { - postsObj.push({id:item, name:""}) - }) - let body = { - name : e.idNumber, - realName : e.realName, - roleType : 1, - enabled : true, - creationTime : date, - posts : postsObj - } - this.http.post("/api/Users",body).subscribe( data => { - this.dialogRef.close(data); - },err=>{ + if (this.organizationId && this.organizationName) { + e.phone = null + e.identityCard = null + e.roleType = 1 + e.enabled = true + e.creationTime = new Date() + e.organizationId = this.organizationId + e.organizationName = this.organizationName + this.http.post("/api/ExamUsers",e).subscribe(data => { + this.dialogRef.close(data); + },err => { + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open(err,'确定',config); + }) + } else { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 - this.snackBar.open(err,'确定',config); - }) - + this.snackBar.open('请选择消防救援站','确定',config); + } } } \ No newline at end of file diff --git a/src/app/ui/teacherManagement/editenterpriseuser.html b/src/app/ui/teacherManagement/editenterpriseuser.html index 013cd42..b01e9d2 100644 --- a/src/app/ui/teacherManagement/editenterpriseuser.html +++ b/src/app/ui/teacherManagement/editenterpriseuser.html @@ -1,45 +1,44 @@ -

    编辑教员

    +

    编辑用户

    - +
    - +
    -
    - - -
    - {{item.name}} -
    -
    - {{item.name}} -
    -
    - {{item.name}} -
    -     -     +
    +

    消防救援站:

    +
    + + + +
  • {{node.name}}
    • +     + + +
  • {{node.name}}
    • +     +     +

    {{errmsg}}

    - +
    diff --git a/src/app/ui/teacherManagement/enterpriseuser.component.html b/src/app/ui/teacherManagement/enterpriseuser.component.html index b2f662d..cf317d7 100644 --- a/src/app/ui/teacherManagement/enterpriseuser.component.html +++ b/src/app/ui/teacherManagement/enterpriseuser.component.html @@ -11,9 +11,24 @@
    -
    +
    - + + highlight_off +
    + + + +
  • {{node.name}}
    • +     + + +
  • {{node.name}}
    • +     +     +
    @@ -55,7 +70,7 @@ 重置密码 编辑 禁用 - 禁用 + 启用 删除 diff --git a/src/app/ui/teacherManagement/enterpriseuser.component.scss b/src/app/ui/teacherManagement/enterpriseuser.component.scss index 71c0551..85b628b 100644 --- a/src/app/ui/teacherManagement/enterpriseuser.component.scss +++ b/src/app/ui/teacherManagement/enterpriseuser.component.scss @@ -52,3 +52,33 @@ table { .red{ color: #FF8678 } .gray{ color: gray; } } + +//tree +.treeDiv { + max-height: 300px; + overflow-y: auto; + .mat-icon-button { + width: 20px; + height: 20px; + line-height: 20px; + } + li { cursor: pointer; } + .mat-tree-node:hover { background-color: rgb(240, 236, 236); } +} + +.closeTree { + cursor: pointer; + position: absolute; + top: 40px; + right: -95px; + z-index: 100; +} +.searchTree { + .mat-tree-node button .mat-icon { color: #000; } + border: 1px solid rgb(207, 204, 204); + width: 350px; + max-height: 150px; + position: absolute; + top: 40px; + left: 0; +} diff --git a/src/app/ui/teacherManagement/enterpriseuser.component.ts b/src/app/ui/teacherManagement/enterpriseuser.component.ts index 1da79e2..7795479 100644 --- a/src/app/ui/teacherManagement/enterpriseuser.component.ts +++ b/src/app/ui/teacherManagement/enterpriseuser.component.ts @@ -7,6 +7,8 @@ import { PageEvent } from '@angular/material/paginator'; import { AddTeacher } from './addenterpriseuser.component' import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import {FormControl} from '@angular/forms'; +import { FlatTreeControl } from '@angular/cdk/tree'; +import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; @Component({ selector: 'app-enterpriseuser', @@ -19,6 +21,53 @@ export class TeacherManagementComponent implements OnInit { ngOnInit() { this.initData() + this.getOrganizations() + } + + allOrganizations:any; //所有组织机构 + treeData:any = []; //tree型 data + isShowTree:boolean = false; //树形结构是否展示 + showTree () { this.isShowTree = true } + hideTree () { this.isShowTree = false } + + //获取所有组织机构 + getOrganizations () { + this.http.get('/api/Organizations').subscribe((data:any)=>{ + this.allOrganizations = data + data.forEach(element => { + element.children = [] + data.forEach(item => { item.parentId === element.id? element.children.push(item) : null }); + }); + data.forEach(element => { + !element.parentId? this.treeData.push(element) : null + }); + this.dataSources.data = this.treeData + }) //http + } + + organizationId:string = null; + organizationName:string = null; + + private _transformer = (node, level: number) => { //初始化tree + return { + expandable: !!node.children && node.children.length > 0, + name: node.name, + level: level, + id: node.id, + parentId: node.parentId, + children: node.children + }; + } + treeControl = new FlatTreeControl(node => node.level, node => node.expandable); + treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); + dataSources = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); + hasChild = (_: number, node: any) => node.expandable; + + //选择tree节点 + selectTree (e) { + this.organizationId = e.id + this.organizationName = e.name + this.isShowTree = false } displayedColumns: string[] = ['identitycard', 'name', 'post', 'time', 'operation',]; @@ -26,7 +75,6 @@ export class TeacherManagementComponent implements OnInit { name:any //用户姓名 identityCard:any //用户账号 - fireTeam:any; //消防救援站 //分页 @ViewChild(MatPaginator, {static: true}) @@ -41,8 +89,9 @@ export class TeacherManagementComponent implements OnInit { chagePage (e) { this.pageNumber = e.pageIndex+1 let data= { - Name: this.identityCard || '', - RealName: this.name || '', + name: this.identityCard || '', + realName: this.name || '', + OrganizationId: this.organizationId || '', RoleType: '1', PageNumber: String(this.pageNumber), } @@ -56,8 +105,9 @@ export class TeacherManagementComponent implements OnInit { //页面初始化 + 查询 + 重置 initData () { let data= { - Name: this.identityCard || '', - RealName: this.name || '', + name: this.identityCard || '', + realName: this.name || '', + OrganizationId: this.organizationId || '', RoleType: '1', } this.http.get('/api/ExamUsers',{params:data}).subscribe((data:any)=>{ @@ -71,8 +121,9 @@ export class TeacherManagementComponent implements OnInit { //更新当前页数据 getAllUsers () { let data= { - Name: this.identityCard || '', - RealName: this.name || '', + name: this.identityCard || '', + realName: this.name || '', + OrganizationId: this.organizationId || '', RoleType: '1', PageNumber: String(this.pageNumber), } @@ -85,16 +136,17 @@ export class TeacherManagementComponent implements OnInit { //清空搜索 empty () { - this.identityCard = '' - this.name = '' + this.name = '', + this.identityCard = '', + this.organizationId = '', + this.organizationName = '', this.initData() } //创建教员 open(){ - let dialogRef = this.dialog.open(AddTeacher, {//调用open方法打开对话框并且携带参数过去 - width: '250px', - }); + let data = this.treeData + let dialogRef = this.dialog.open(AddTeacher,{data}); dialogRef.afterClosed().subscribe(data=>{ if (data) { const config = new MatSnackBarConfig(); @@ -108,10 +160,8 @@ export class TeacherManagementComponent implements OnInit { //编辑企业用户 edit (e) { - let dialogRef = this.dialog.open(editTeacher,{ - width: '250px', - data:e - }); + let data = {treeData: this.treeData, userData: e} + let dialogRef = this.dialog.open(editTeacher,{data}); dialogRef.afterClosed().subscribe(data=>{ if (data) { const config = new MatSnackBarConfig(); @@ -125,7 +175,7 @@ export class TeacherManagementComponent implements OnInit { //重置密码 reset (e) { - this.http.put(`/api/ExamUsers/${e.name}/ResetPassword`,{}).subscribe( + this.http.put(`/api/ExamUsers/${e.id}/ResetPassword`,{}).subscribe( data=>{ const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; @@ -141,16 +191,9 @@ export class TeacherManagementComponent implements OnInit { //启用 enabled (e) { - let date = new Date() - let body = { - name : e.name, - realName : e.realName, - roleType : e.roleType, - enabled : true, - creationTime : date, - posts : e.posts - } - this.http.put(`/api/ExamUsers/${e.name}`,body).subscribe(data => { + e.date = new Date() + e.enabled = true + this.http.put(`/api/ExamUsers/${e.id}`,e).subscribe(data => { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000; @@ -161,16 +204,9 @@ export class TeacherManagementComponent implements OnInit { //禁用 noEnabled (e) { - let date = new Date() - let body = { - name : e.name, - realName : e.realName, - roleType : e.roleType, - enabled : false, - creationTime : date, - posts : e.posts - } - this.http.put(`/api/ExamUsers/${e.name}`,body).subscribe(data => { + e.date = new Date() + e.enabled = false + this.http.put(`/api/ExamUsers/${e.id}`,e).subscribe(data => { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000; @@ -183,7 +219,7 @@ export class TeacherManagementComponent implements OnInit { delete (e) { let isTrue = confirm('您确定要删除吗') if (isTrue) { - this.http.delete(`/api/ExamUsers/${e.name}`).subscribe(data=>{ + this.http.delete(`/api/ExamUsers/${e.id}`).subscribe(data=>{ const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 @@ -207,49 +243,69 @@ export class TeacherManagementComponent implements OnInit { }) export class editTeacher { - toppings:any = new FormControl(); - constructor(private http: HttpClient,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data) {} - errmsg:any; //捕获错误信息 - detachmentPosts: any = []//支队职务列表 - brigadePosts: any = []//大队职务列表 - RescueStationPosts: any = []//救援站职务列表 + constructor(private http: HttpClient,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar,) {} - IdNumber:any //身份证号 - realName:any //真实姓名 ngOnInit(): void { - this.toppings.value = [] - this.IdNumber = this.data.name - this.realName = this.data.realName - this.data.posts.forEach((item) => { - this.toppings.value.push(item.id) - }) + this.dataSource.data = this.data.treeData + this.name = JSON.parse(JSON.stringify(this.data.userData.name)) + this.realName = JSON.parse(JSON.stringify(this.data.userData.realName)) + this.organizationId = JSON.parse(JSON.stringify(this.data.userData.organizationId)) + this.organizationName = JSON.parse(JSON.stringify(this.data.userData.organizationName)) } - //获得所有职务 - getAllPosts(){ - + errmsg:string = null; //捕获错误信息 + + name:string = null; + realName:string = null; + organizationId:string = null; + organizationName:string = null; + + private _transformer = (node, level: number) => { //初始化tree + return { + expandable: !!node.children && node.children.length > 0, + name: node.name, + level: level, + id: node.id, + parentId: node.parentId, + children: node.children + }; + } + 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; + + //选择tree节点 + selectTree (e) { + this.organizationId = e.id + this.organizationName = e.name } - //提交创建表单 onSubmit (e) { - let date = new Date() - let postsArr = this.toppings.value - let postsObj = [] - postsArr.forEach((item) => { - postsObj.push({id:item, name:""}) - }) - let body = { - name : this.data.name, - realName : e.realName, - roleType : 1, - enabled : this.data.enabled, - creationTime : date, - posts : postsObj + if (this.organizationId && this.organizationName) { + e.phone = this.data.userData.phone + e.identityCard = this.data.userData.identityCard + e.roleType = 1 + e.id = this.data.userData.id + e.enabled = this.data.userData.enabled + e.creationTime = new Date() + e.organizationId = this.organizationId + e.organizationName = this.organizationName + this.http.put(`/api/ExamUsers/${this.data.userData.id}`,e).subscribe(data => { + this.dialogRef.close('success'); + },err => { + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open(err,'确定',config); + }) + } else { + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('请选择消防救援站','确定',config); } - this.http.put(`/api/ExamUsers/${this.data.name}`,body).subscribe(data => { - this.dialogRef.close("修改成功"); - }) } } diff --git a/src/app/working-area/model/axArrowConnector.ts b/src/app/working-area/model/axArrowConnector.ts index 6ed0dd9..d9ba040 100644 --- a/src/app/working-area/model/axArrowConnector.ts +++ b/src/app/working-area/model/axArrowConnector.ts @@ -9,7 +9,7 @@ import { GameMode } from './gameMode'; */ export class AxArrowConnector extends AxShape { pointSprites: Array = new Array(); - line: PIXI.Graphics; + tempLine: PIXI.Graphics; text: PIXI.Text; style = new PIXI.TextStyle({ fontFamily: 'Arial', @@ -29,34 +29,34 @@ export class AxArrowConnector extends AxShape { }); pts: PIXI.Point[]; - markerStart = true;// 是否绘制起始箭头 - markerEnd = true;// 是否绘制结束箭头 - constructor(assetData: any, workingArea: WorkingAreaComponent,markerStart: boolean,markerEnd:boolean) { + markerStart = true; // 是否绘制起始箭头 + markerEnd = true; // 是否绘制结束箭头 + constructor(assetData: any, workingArea: WorkingAreaComponent, markerStart: boolean, markerEnd: boolean) { super(assetData, workingArea); this.markerStart = markerStart; this.markerEnd = markerEnd; - + this.position = this.assetData.Point; this.name = assetData.Id; this.text = new PIXI.Text(this.assetData.Name + '\r\n' + this.assetData.PropertyInfos?.find((item: { PropertyName: string; }) => item.PropertyName === '名称/编号')?.PropertyValue, this.style); - this.line = new PIXI.Graphics(); + this.tempLine = new PIXI.Graphics(); this.addChild(this.text); - this.addChild(this.line); + this.addChild(this.tempLine); this.workingArea.backgroundImage.addChild(this); this.refresh(); this.drawPoints(); this.sortableChildren = true; this.text.zIndex = this.children.length; this.text.visible = this.showName; - this.text.angle = -this.workingArea.backgroundImage.angle; + this.text.angle = -this.workingArea.backgroundImage.angle; } public drawPoints() { this.assetData.MultiPoint.forEach(element => { - var point = new Sprite(this.pointTexture); + const point = new Sprite(this.pointTexture); point.position = element; point.anchor.set(0.5); this.pointSprites.push(point); @@ -67,7 +67,7 @@ export class AxArrowConnector extends AxShape { value .on('pointerdown', event => { event.stopPropagation(); - if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { + if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { event.currentTarget.data = event.data; event.currentTarget.alpha = 0.5; event.currentTarget.dragging = true; @@ -102,7 +102,7 @@ export class AxArrowConnector extends AxShape { }) .on('rightclick', event => { }); - }) + }); this.setPointVisiable(false); } @@ -110,10 +110,10 @@ export class AxArrowConnector extends AxShape { * 设置点显示状态 * @param b true/false */ - public setPointVisiable(b:boolean) { + public setPointVisiable(b: boolean) { this.pointSprites.forEach(item => { item.visible = b; - }) + }); } // 设置缩放 public setItemScale(scale: number) { @@ -121,17 +121,28 @@ export class AxArrowConnector extends AxShape { this.pointSprites.forEach(point => { point.scale.set(scale); }); + this.refresh(); } public setNameVisible(value: boolean, mode: GameMode) { if (this.assetData.GameMode === mode) { this.text.visible = value; } } + /** + * + * @param scale 绘制边框 + */ + public drawBorder(scale: number) { + const visible = this.pointSprites[0].visible; + this.setPointVisiable(false); + super.drawBorder(scale); + this.setPointVisiable(visible); + } /** * 刷新形状 */ public refresh(): void { - const c = this.line; + const c = this.tempLine; const pts = this.assetData.MultiPoint; if (pts.length < 2) { return; @@ -142,17 +153,22 @@ export class AxArrowConnector extends AxShape { + '\r\n' + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; const strokeWidth = 1; - const startWidth = 30 + strokeWidth; - const endWidth = 30 + strokeWidth; - const edgeWidth = this.assetData.Thickness === 0 ? 10 : this.assetData.Thickness; // 宽度 + + const edgeWidth = this.assetData.Thickness === 0 ? 5 : this.assetData.Thickness; // 宽度 + + const startWidth = edgeWidth * 2 + strokeWidth; + const endWidth = edgeWidth * 2 + strokeWidth; + const openEnded = false; const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2; - const startSize = 30 + strokeWidth; - const endSize = 30 + strokeWidth; + + const startSize = edgeWidth * 2 + strokeWidth; + const endSize = edgeWidth * 2 + strokeWidth; + const isRounded = true; const lineColor = 0x000000; - const fillColor: number = this.assetData.Color.substring(0, 7).replace('#', '0x');; + const fillColor: number = this.assetData.Color.substring(0, 7).replace('#', '0x'); const pe = pts[pts.length - 1]; @@ -190,8 +206,8 @@ export class AxArrowConnector extends AxShape { // } // c.lineStyle(1, 0x000000, 1); c.clear(); - c.lineTextureStyle({ width: 1, color: lineColor, join: PIXI.LINE_JOIN.ROUND }); - + c.lineTextureStyle({ width: 1 / this.workingArea.backgroundImage.scale.x, color: lineColor, join: PIXI.LINE_JOIN.ROUND }); + const startNx = nx; const startNy = ny; if (!openEnded) { @@ -328,12 +344,9 @@ export class AxArrowConnector extends AxShape { fns[i](); } - if (openEnded) - { + if (openEnded) { c.closePath(); - } - else - { + } else { c.closePath(); c.endFill(); } @@ -410,10 +423,10 @@ export class AxArrowConnector extends AxShape { return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0); } - redraw(): void{ + redraw(): void { this.pointSprites.forEach(item => { item.destroy(); - }) + }); this.pointSprites.splice(0, this.pointSprites.length); this.refresh(); this.drawPoints(); diff --git a/src/app/working-area/model/axGrid.ts b/src/app/working-area/model/axGrid.ts new file mode 100644 index 0000000..4e178ad --- /dev/null +++ b/src/app/working-area/model/axGrid.ts @@ -0,0 +1,179 @@ +import * as PIXI from 'pixi.js'; + +const DEFAULT_LINE_STYLE = { + width: 1, + color: 0xffffff, + alpha: 1, + alignment: 0.5, + native: true, +}; + +export class AxGrid extends PIXI.Graphics { + private _cellSize: number; + private _correctedWidth: number; + private _gridWidth: number; + private _useCorrectedWidth: boolean; + private _drawBoundaries: any; + private _amtLines: any; + + set cellSize(cellSize) { + this._cellSize = cellSize || Math.sqrt(this._correctedWidth); + } + get cellSize() { + return this._cellSize; + } + get amtLines() { + return Math.floor(this.gridWidth / this.cellSize); + } + get originalWidth() { + return this._gridWidth; + } + /** + * 修正后的网格宽度，大于最小平方根的数 + */ + get correctedWidth() { + return this._correctedWidth; + } + get useCorrectedWidth() { + return this._useCorrectedWidth; + } + + /** + * 网格中每个角落的坐标。 + */ + get bounds() { + return { + x1: this.x, + y1: this.y, + x2: this.x + this._correctedWidth, + y2: this.y + this._correctedWidth, + }; + } + + set drawBoundaries(drawBoundaries) { + this._drawBoundaries = drawBoundaries; + } + + get drawBoundaries() { + return this._drawBoundaries; + } + + get gridWidth() { + if (!this.useCorrectedWidth) { return this._gridWidth; } + return Math.abs(this.cellSize - Math.sqrt(this._correctedWidth)) <= 1e-6 ? this._correctedWidth : this._gridWidth; + } + + constructor( + width, + cellSize= null, + lineConfig = null, + useCorrectedWidth = true, + drawBoundaries = true, + ) { + super(); + + this._cellSize = null; + this._amtLines = null; + + this._gridWidth = width; + this._useCorrectedWidth = useCorrectedWidth; + this._correctedWidth = null; + this._correctWidth(); + + this._drawBoundaries = drawBoundaries; + + this.cellSize = cellSize; + + const lConfig = { ...DEFAULT_LINE_STYLE, ...(lineConfig || {} )}; + this.lineStyle( + lConfig.width, + lConfig.color, + lConfig.alpha, + lConfig.alignment, + lConfig.native + ); + this.interactive = true; + this.on('mousemove', (evt) => { + const mouseCoords = evt.data.getLocalPosition(evt.currentTarget.parent); + if ( + mouseCoords.x >= this.bounds.x1 && + mouseCoords.x <= this.bounds.x2 && + mouseCoords.y >= this.bounds.y1 && + mouseCoords.y <= this.bounds.y2 + ) { + const gridCoords = this.getCellCoordinates(mouseCoords.x, mouseCoords.y); + this.onMousemove(evt, gridCoords); + } + }); + } + + /** + * 绘制网格 + */ + drawGrid() { + this.clearGrid(true); + for (let i = (this._drawBoundaries ? 0 : 1); i <= this.amtLines - (this._drawBoundaries ? 0 : 1); i += 1) { + const startCoord = i * this._cellSize; + + // 画列 + this.moveTo(startCoord, 0); + this.lineTo(startCoord, this._correctedWidth); + + // 画行 + this.moveTo(0, startCoord); + this.lineTo(this._correctedWidth, startCoord); + } + this.endFill(); + + return this; + } + + /** + * 清除网格 + */ + clearGrid(retainLineStyle = true) { + const { width, alignment, color, alpha, native } = this.line; + this.clear(); + + if (!retainLineStyle) { return; } + this.lineStyle(width, color, alpha, alignment, native); + + return this; + } + /** + * 返回网格的坐标 + * @param x 坐标x + * @param y 坐标y + */ + getCellCoordinates(x, y) { + return { + x: Math.floor((x - this.bounds.x1) / this.cellSize), + y: Math.floor((y - this.bounds.y1) / this.cellSize), + }; + } + /** + * 鼠标移动事件 + * @param evt 鼠标事件 + * @param gridCoords 鼠标所在网格坐标 + */ + onMousemove(evt, gridCoords) { + + } + // 默认宽度 + _correctWidth() { + if (!this._useCorrectedWidth) { + this._correctedWidth = this._gridWidth; + } + + this._correctedWidth = Math.ceil(Math.sqrt(this._gridWidth)) ** 2; + } + // 自定义宽度 + correctWidth(width: number) { + if (!this._useCorrectedWidth) { + this._correctedWidth = width; + } + + this._correctedWidth = Math.ceil(Math.sqrt(width)) ** 2; + this.cellSize = null; + } +} diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index d12ae3c..ddb7ccf 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -5,15 +5,17 @@ import { PaintMode } from './paintModel'; import * as PIXI from 'pixi.js'; import { PropertyInfo } from './PropertyInfo'; import { AxShape } from './axShape'; -import { Sprite } from 'pixi.js'; +import { Sprite, Point, Rectangle } from 'pixi.js'; import { AxArrowConnector } from './axArrowConnector'; +import { AxMessageSystem } from './axMessageSystem'; +import { EVENT_IMAGE_RESIZE } from './events'; /** * 安信图片形状 * AxImageShape */ export class AxImageShape extends AxShape { - connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); + // connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 18, @@ -31,6 +33,7 @@ export class AxImageShape extends AxShape { wordWrapWidth: 100, }); + text = new PIXI.Text(this.assetData.Name + '\r\n' + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); @@ -48,6 +51,16 @@ export class AxImageShape extends AxShape { upRight: PIXI.Sprite; downLeft: PIXI.Sprite; downRight: PIXI.Sprite; + + upDrag: boolean = false; + downDrag: boolean = false; + leftDrag: boolean = false; + rightDrag: boolean = false; + upLeftDrag: boolean = false; + upRightDrag: boolean = false; + downLeftDrag: boolean = false; + downRightDrag: boolean = false; + constructor(assetData: any, workingArea: WorkingAreaComponent) { super(assetData, workingArea); this.angle = -this.workingArea.backgroundImage.angle; @@ -71,84 +84,353 @@ export class AxImageShape extends AxShape { this.addChild(this.image); this.addChild(this.selectionBox); - //// + // up + this.up = new PIXI.Sprite(this.pointTexture); + this.up.cursor = 'ns-resize'; + this.up.anchor.set(0.5); + this.addChild(this.up); + this.up.interactive = true; + this.up.on('pointerdown', event => { + this.upDrag = true; + this.image.anchor.set(0.5, 1); + this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2)); + event.stopPropagation(); + }); + this.up.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (this.upDrag) { + var pos = this.toLocal(event.data.global); + var dY = Math.abs(pos.y - this.image.y); + this.assetData.Height = Math.abs(dY); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.up.on('pointerup', event => { + if (this.upDrag) { + this.upDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2)); + } + }); + this.up.on('pointerupoutside', event => { + if (this.upDrag) { + this.upDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2)); + } + }); + this.up.visible = false; + // down + this.down = new PIXI.Sprite(this.pointTexture); + this.down.cursor = 'ns-resize'; + this.down.anchor.set(0.5); + this.addChild(this.down); + this.down.interactive = true; + this.down.on('pointerdown', event => { + this.downDrag = true; + this.image.anchor.set(0.5, 0); + this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2)); + event.stopPropagation(); + }); + this.down.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (this.downDrag) { + var pos = this.toLocal(event.data.global); + var dY = Math.abs(pos.y - this.image.y); + this.assetData.Height = Math.abs(dY); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.down.on('pointerup', event => { + if (this.downDrag) { + this.downDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2)); + } + }); + this.down.on('pointerupoutside', event => { + if (this.downDrag) { + this.downDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2)); + } + }); + this.down.visible = false; + // left + this.left = new PIXI.Sprite(this.pointTexture); + this.left.cursor = 'ew-resize'; + this.left.anchor.set(0.5); + this.addChild(this.left); + this.left.interactive = true; + this.left.on('pointerdown', event => { + this.leftDrag = true; + this.image.anchor.set(1, 0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y); + event.stopPropagation(); + }); + this.left.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (this.leftDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + this.assetData.Width = Math.abs(dX); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.left.on('pointerup', event => { + if (this.leftDrag) { + this.leftDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y); + } + }); + this.left.on('pointerupoutside', event => { + if (this.leftDrag) { + this.leftDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y); + } + }); + this.left.visible = false; + // right + this.right = new PIXI.Sprite(this.pointTexture); + this.right.cursor = 'ew-resize'; + this.right.anchor.set(0.5); + this.addChild(this.right); + this.right.interactive = true; + this.right.on('pointerdown', event => { + this.rightDrag = true; + this.image.anchor.set(0, 0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y); + event.stopPropagation(); + }); + this.right.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (this.rightDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + this.assetData.Width = Math.abs(dX); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.right.on('pointerup', event => { + if (this.rightDrag) { + this.rightDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y); + } + }); + this.right.on('pointerupoutside', event => { + if (this.rightDrag) { + this.rightDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2)); + } + }); + this.right.visible = false; // up-left this.upLeft = new PIXI.Sprite(this.pointTexture); + this.upLeft.cursor = 'nwse-resize'; this.upLeft.anchor.set(0.5); this.addChild(this.upLeft); this.upLeft.interactive = true; + this.upLeft.on('pointerdown', event => { + this.upLeftDrag = true; + this.image.anchor.set(1); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + event.stopPropagation(); + }); + this.upLeft.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (this.upLeftDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.upLeft.on('pointerup', event => { + if (this.upLeftDrag) { + this.upLeftDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + } + }); + this.upLeft.on('pointerupoutside', event => { + if (this.upLeftDrag) { + this.upLeftDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + } + }); this.upLeft.visible = false; // up-right this.upRight = new PIXI.Sprite(this.pointTexture); + this.upRight.cursor = 'nesw-resize'; this.upRight.anchor.set(0.5); this.addChild(this.upRight); this.upRight.interactive = true; + this.upRight.on('pointerdown', event => { + this.upRightDrag = true; + this.image.anchor.set(0, 1); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + event.stopPropagation(); + }); + this.upRight.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (this.upRightDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.upRight.on('pointerup', event => { + if (this.upRightDrag) { + this.upRightDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + } + }); + this.upRight.on('pointerupoutside', event => { + if (this.upRightDrag) { + this.upRightDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + } + }); this.upRight.visible = false; // down-left this.downLeft = new PIXI.Sprite(this.pointTexture); + this.downLeft.cursor = 'nesw-resize'; this.downLeft.anchor.set(0.5); this.addChild(this.downLeft); this.downLeft.interactive = true; + this.downLeft.on('pointerdown', event => { + this.downLeftDrag = true; + this.image.anchor.set(1, 0); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + event.stopPropagation(); + }); + this.downLeft.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (this.downLeftDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.downLeft.on('pointerup', event => { + if (this.downLeftDrag) { + this.downLeftDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); + this.downLeft.on('pointerupoutside', event => { + if (this.downLeftDrag) { + this.downLeftDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); this.downLeft.visible = false; // down-right this.downRight = new PIXI.Sprite(this.pointTexture); + this.downRight.cursor = 'nwse-resize'; this.downRight.anchor.set(0.5); this.addChild(this.downRight); this.downRight.interactive = true; + this.downRight.on('pointerdown', event => { + this.downRightDrag = true; + this.image.anchor.set(0, 0); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + event.stopPropagation(); + }); + this.downRight.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (this.downRightDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.downRight.on('pointerup', event => { + if (this.downRightDrag) { + this.downRightDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); + this.downRight.on('pointerupoutside', event => { + if (this.downRightDrag) { + this.downRightDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); this.downRight.visible = false; //// - - - - if (this.assetData.CanConnect) { - // connectPoint - this.connectPoint = new PIXI.Sprite(this.connectPointTexture); - this.connectPoint.anchor.set(0.5); - this.connectPoint.x = this.image.x; - this.connectPoint.y = this.image.y; - this.addChild(this.connectPoint); - this.connectPoint.interactive = true; - this.connectPoint - .on('pointerdown', event => { - event.stopPropagation(); - this.paintingPipeline(this.x, this.y); - }) - .on('pointerover', event => { - this.setSelectionBox(true, this.connectPoint); - }) - .on('pointerout', event => { - this.setSelectionBox(false); - }); - this.showConnectionPoint(false); - } this.setItemScale(1 / this.workingArea.backgroundImage.scale.x); } - // 设置选择框 - public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) { - if (b) { - this.selectionBox.lineStyle(2, 0x00EB00, 1); - this.selectionBox.position = sprite.position; - this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height); - } else { - this.selectionBox.clear(); - } - } // 设置名称 public setNameVisible(value: boolean, mode: GameMode) { if (this.assetData.GameMode === mode) { this.text.visible = value; } } - // 显示连接点 - public showConnectionPoint(b: boolean) { - this.connectPoint.visible = b; - } /** * 设置点显示状态 * @param value 显示状态 */ public setPointVisiable(value: boolean) { - let rect = this.getLocalBounds(); + const rect = this.getLocalBounds(); + this.up.x = rect.right - rect.width / 2; + this.up.y = rect.top; + this.down.x = rect.right - rect.width / 2; + this.down.y = rect.bottom; + this.left.x = rect.left; + this.left.y = rect.bottom - rect.height / 2; + this.right.x = rect.right; + this.right.y = rect.bottom - rect.height / 2; this.upLeft.x = rect.left; this.upLeft.y = rect.top; this.upRight.x = rect.right; @@ -157,21 +439,33 @@ export class AxImageShape extends AxShape { this.downLeft.y = rect.bottom; this.downRight.x = rect.right; this.downRight.y = rect.bottom; + this.up.visible = value; + this.down.visible = value; + this.left.visible = value; + this.right.visible = value; this.upLeft.visible = value; this.upRight.visible = value; this.downLeft.visible = value; this.downRight.visible = value; } /** - * + * * @param scale 绘制边框 */ public drawBorder(scale: number) { - let visible = this.upLeft.visible; + const visible = this.upLeft.visible; this.setPointVisiable(false); - + super.drawBorder(scale); - let rect = this.getLocalBounds(); + const rect = this.getLocalBounds(); + this.up.x = rect.right - rect.width / 2; + this.up.y = rect.top; + this.down.x = rect.right - rect.width / 2; + this.down.y = rect.bottom; + this.left.x = rect.left; + this.left.y = rect.bottom - rect.height / 2; + this.right.x = rect.right; + this.right.y = rect.bottom - rect.height / 2; this.upLeft.x = rect.left; this.upLeft.y = rect.top; this.upRight.x = rect.right; @@ -191,81 +485,57 @@ export class AxImageShape extends AxShape { this.upRight.scale.set(scale); this.downLeft.scale.set(scale); this.downRight.scale.set(scale); + this.up.scale.set(scale); + this.down.scale.set(scale); + this.left.scale.set(scale); + this.right.scale.set(scale); } } - paintingPipeline(x: number, y: number) { - if (this.assetData.CanConnect) { - if (this.workingArea.getPaintMode() === PaintMode.Pipeline) { - if (this.workingArea.paintingShape === null) { - this.workingArea.previewLineSegment.visible = true; - this.workingArea.currentClickPoint.position = - new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); - this.workingArea.paintPoints.push(new PIXI.Point(x, y)); - const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos)); - const list = []; - json.forEach(element => { - const property = new PropertyInfo(element); - list.push(property); - }); - const tempData = { - TemplateId: this.workingArea.canvasData.selectTemplateData.id, - CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect, - Pipelines: new Array(), - FloorId: this.workingArea.canvasData.selectStorey.id, - Angle: this.workingArea.canvasData.selectTemplateData.angle, - Color: this.workingArea.canvasData.selectTemplateData.color, - Enabled: this.workingArea.canvasData.selectTemplateData.enabled, - FillMode: this.workingArea.canvasData.selectTemplateData.fillMode, - FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId, - FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize, - Height : 32, - Width : 32, - Id: ObjectID.default.generate(), - ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl, - InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode, - MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)), - Point: new PIXI.Point(0, 0), - Name : this.workingArea.canvasData.selectTemplateData.name, - PropertyInfos: list, - Border : this.workingArea.canvasData.selectTemplateData.border, - DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode, - Thickness : this.workingArea.canvasData.selectTemplateData.thickness, - IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding, - GameMode: this.workingArea.canvasData.gameMode, - LinkedObjects: new Array(this.assetData.Id), - Tag: this.workingArea.canvasData.selectTemplateData.tag - }; - this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea,false,true); - this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id); - this.workingArea.emit('createIcon', this.workingArea.paintingShape); - } else { - this.workingArea.previewLineSegment.visible = false; - this.workingArea.currentClickPoint.position = - new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); - this.workingArea.paintPoints.push(new PIXI.Point(x, y)); - this.workingArea.paintingShape.assetData.MultiPoint = - JSON.parse(JSON.stringify(this.workingArea.paintPoints)); - this.workingArea.paintingShape.assetData.LinkedObjects.push(this.assetData.Id); - this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id); - this.workingArea.paintingShape.redraw(); - this.workingArea.initPipelineData(); - } - } - } - } // 刷新 public refresh() { - if (this.assetData.CanConnect) { - - } this.image.width = this.assetData.Width; this.image.height = this.assetData.Height; this.image.angle = this.assetData.Angle; this.text.text = this.assetData.Name + '\r\n' + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; - this.text.x = this.image.x; - this.text.y = this.image.y - this.image.height / 2; + + + if (this.image.anchor.x == 0) { + if (this.image.anchor.y == 0) { + this.text.x = this.image.x + this.image.width / 2; + this.text.y = this.image.y; + } else if (this.image.anchor.y == 0.5) { + this.text.x = this.image.x + this.image.width / 2; + this.text.y = this.image.y - this.image.height / 2; + } else if (this.image.anchor.y == 1) { + this.text.x = this.image.x + this.image.width / 2; + this.text.y = this.image.y - this.image.height; + } + + } else if (this.image.anchor.x == 0.5) { + if (this.image.anchor.y == 0) { + this.text.x = this.image.x; + this.text.y = this.image.y; + } else if (this.image.anchor.y == 0.5) { + + } else if (this.image.anchor.y == 1) { + this.text.x = this.image.x; + this.text.y = this.image.y - this.image.height; + } + } else if (this.image.anchor.x == 1) { + if (this.image.anchor.y == 0) { + this.text.x = this.image.x - this.image.width / 2; + this.text.y = this.image.y; + } else if (this.image.anchor.y == 0.5) { + this.text.x = this.image.x - this.image.width / 2; + this.text.y = this.image.y - this.image.height / 2; + } else if (this.image.anchor.y == 1) { + this.text.x = this.image.x - this.image.width / 2; + this.text.y = this.image.y - this.image.height; + } + } this.angle = -this.workingArea.backgroundImage.angle; + this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); } } diff --git a/src/app/working-area/model/axImageShapeTest.ts b/src/app/working-area/model/axImageShapeTest.ts new file mode 100644 index 0000000..81c141c --- /dev/null +++ b/src/app/working-area/model/axImageShapeTest.ts @@ -0,0 +1,11 @@ +import { AxRectangleShape } from "./axRectangleShape"; + +export class AxImageShapeTest extends AxRectangleShape{ + /** + * + */ + constructor(x:number,y:number,width:number,height:number) { + super(x,y,width,height); + + } +} \ No newline at end of file diff --git a/src/app/working-area/model/axLegend.ts b/src/app/working-area/model/axLegend.ts index 55f4d8f..a1c8281 100644 --- a/src/app/working-area/model/axLegend.ts +++ b/src/app/working-area/model/axLegend.ts @@ -1,5 +1,7 @@ import { Constructor } from '@angular/material/core/common-behaviors/constructor'; -import { Sprite, Texture,Text, Graphics, Point } from 'pixi.js'; +import { MatGridTileHeaderCssMatStyler } from '@angular/material/grid-list'; +import { DefaultProxy } from 'cesium'; +import { Sprite, Texture, Text, Graphics, Point } from 'pixi.js'; import { WorkingAreaComponent } from '../working-area.component'; import { AxShape } from './axShape'; @@ -8,20 +10,35 @@ import { AxShape } from './axShape'; */ export class AxLegend extends AxShape { // 数据 - public shapeMap: Map = new Map(); + public shapeMap: Map = new Map(); pen: Graphics = new Graphics(); + // up: Sprite = new Sprite(this.pointTexture); + // down: Sprite= new Sprite(this.pointTexture); + // left: Sprite= new Sprite(this.pointTexture); + // right: Sprite= new Sprite(this.pointTexture); + upLeft: Sprite = new Sprite(this.pointTexture); + upRight: Sprite = new Sprite(this.pointTexture); + downLeft: Sprite = new Sprite(this.pointTexture); + downRight: Sprite = new Sprite(this.pointTexture); /** * */ - constructor(assetData: any, workingArea: WorkingAreaComponent,shapeMap:Map) { + constructor(assetData: any, workingArea: WorkingAreaComponent, shapeMap: Map) { super(assetData, workingArea); this.angle = -this.workingArea.backgroundImage.angle; this.name = this.assetData.Id; + this.pivot.set(this.assetData.PivotX, this.assetData.PivotY); + this.x = this.assetData.Point.x; + this.y = this.assetData.Point.y; + this.scale.set(this.assetData.Scale); this.shapeMap = shapeMap; + this.createPoint(); this.refresh(); + this.sortableChildren = true; + this.pen.zIndex = -1; } // 添加数据 - public addItem(item:Legend) { + public addItem(item: Legend) { if (this.shapeMap.has(item.Name)) { this.shapeMap.get(item.Name).Count++; } else { @@ -43,35 +60,35 @@ export class AxLegend extends AxShape { refresh() { this.removeChildren(); let index = 1; - let offset = 25; - let number = this.assetData.PropertyInfos[0].PropertyValue; - let width = 300; - let height = 50; - for (let i = 0; i < number; i++){ - if (i >= this.shapeMap.size) break; - let x = width * i; - var textImage = new Text('图例',{ + const offset = 25; + let number = Number(this.assetData.PropertyInfos[0].PropertyValue); + const width = 300; + const height = 50; + for (let i = 0; i < number; i++) { + if (i >= this.shapeMap.size) { break; } + const x = width * i; + const textImage = new Text('图例', { fontSize: 20, - fill: ['#0000ff'], + fill: ['#0000ff'], }); - textImage.anchor.set(0.5) + textImage.anchor.set(0.5); textImage.x = x; textImage.y = 0; this.addChild(textImage); - var textName = new Text("名称"+' 【数量】',{ + const textName = new Text('名称' + ' 【数量】', { fontSize: 20, - fill: ['#0000ff'], + fill: ['#0000ff'], }); - textName.anchor.set(0,0.5); + textName.anchor.set(0, 0.5); textName.x = x + 32 + offset; textName.y = 0; this.addChild(textName); } - for (let item of this.shapeMap.values()) { - let x = index % number === 0 ? (number -1) * width : (index % number - 1) * width; - let y = Math.ceil(index / number) * height; - let image: Sprite = Sprite.from(item.ImageUrl); + for (const item of this.shapeMap.values()) { + const x = index % number === 0 ? (number - 1) * width : (index % number - 1) * width; + const y = Math.ceil(index / number) * height; + const image: Sprite = Sprite.from(item.ImageUrl); image.width = 32; image.height = 32; image.anchor.set(0.5); @@ -79,40 +96,363 @@ export class AxLegend extends AxShape { image.y = y; this.addChild(image); - var textName = new Text(item.Name+' 【'+item.Count.toString()+'】',{ + const textName = new Text(item.Name + ' 【' + item.Count.toString() + '】', { fontSize: 20, }); - textName.anchor.set(0,0.5); - textName.x = x + image.width/2 + offset; + textName.anchor.set(0, 0.5); + textName.x = x + image.width / 2 + offset; textName.y = y; this.addChild(textName); index++; } if (this.shapeMap.size > 0) { - let rect = this.getLocalBounds(); + const rect = this.getLocalBounds(); this.pen.clear(); - this.pen.beginFill(0xffffff,0.01); + this.pen.beginFill(0xffffff, 1); this.pen.lineStyle(3, 0x000000); - this.pen.moveTo(rect.left-offset, rect.top-offset); - this.pen.lineTo(rect.right+offset, rect.top-offset); - this.pen.lineTo(rect.right+offset, rect.bottom+offset); + this.pen.moveTo(rect.left - offset, rect.top - offset); + this.pen.lineTo(rect.right + offset, rect.top - offset); + this.pen.lineTo(rect.right + offset, rect.bottom + offset); this.pen.lineTo(rect.left - offset, rect.bottom + offset); this.pen.closePath(); this.pen.endFill(); - } + } this.addChild(this.pen); + // 添加border + this.addChild(this.border); + // 添加控制点 + this.addChild(this.upLeft); + this.addChild(this.upRight); + this.addChild(this.downLeft); + this.addChild(this.downRight); + + this.angle = -this.workingArea.backgroundImage.angle; + this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); + } + public createPoint() { + // this.addChild(this.upLeft); + this.upLeft.anchor.set(0.5); + this.upLeft.interactive = true; + this.upLeft.visible = false; + this.upLeft + .on('pointerdown', event => { + event.stopPropagation(); + event.currentTarget.data = event.data; + event.currentTarget.alpha = 0.5; + event.currentTarget.dragging = true; + + event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); + + const pointStart = this.position; + const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.downRight.position)); + + const delX = pointEnd.x - pointStart.x; + const delY = pointEnd.y - pointStart.y; + + this.pivot.set(this.downRight.x, this.downRight.y); + + this.position.x += delX; + this.position.y += delY; + + this.assetData.PivotX = this.pivot.x; + this.assetData.PivotY = this.pivot.y; + this.assetData.Point = new Point(this.x, this.y); + }) + .on('pointerup', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointerupoutside', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointermove', event => { + if (event.currentTarget.dragging) { + const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); + const startPos = this.position; + const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); + const width = (endPos.x - startPos.x); + const height = (endPos.y - startPos.y); + const scaleX = width / (this.width / this.scale.x); + const scaleY = height / (this.width / this.scale.x); + const angle = Math.abs(this.angle); + console.log(angle); + if (angle === 0) { + this.scale.set(-scaleX); + } else if (angle === 90) { + this.scale.set(scaleY); + } else if (angle === 180) { + this.scale.set(scaleX); + } else if (angle === 270) { + this.scale.set(-scaleY); + } + this.assetData.Scale = this.scale.x; + } + }) + .on('rightclick', event => { + this.border.visible = false; + }); + // this.addChild(this.upRight); + this.upRight.anchor.set(0.5); + this.upRight.interactive = true; + this.upRight.visible = false; + this.upRight + .on('pointerdown', event => { + event.stopPropagation(); + event.currentTarget.data = event.data; + event.currentTarget.alpha = 0.5; + event.currentTarget.dragging = true; + + event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); + + const pointStart = this.position; + const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.downLeft.position)); + + const delX = pointEnd.x - pointStart.x; + const delY = pointEnd.y - pointStart.y; + + this.pivot.set(this.downLeft.x, this.downLeft.y); + + this.position.x += delX; + this.position.y += delY; + + this.assetData.PivotX = this.pivot.x; + this.assetData.PivotY = this.pivot.y; + this.assetData.Point = new Point(this.x, this.y); + }) + .on('pointerup', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointerupoutside', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointermove', event => { + if (event.currentTarget.dragging) { + const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); + const startPos = this.position; + const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); + const width = (endPos.x - startPos.x); + const height = (endPos.y - startPos.y); + const scaleX = width / (this.width / this.scale.x); + const scaleY = height / (this.width / this.scale.x); + const angle = Math.abs(this.angle); + console.log(angle); + if (angle === 0) { + this.scale.set(scaleX); + } else if (angle === 90) { + this.scale.set(-scaleY); + } else if (angle === 180) { + this.scale.set(-scaleX); + } else if (angle === 270) { + this.scale.set(scaleY); + } + this.assetData.Scale = this.scale.x; + } + }) + .on('rightclick', event => { + this.border.visible = false; + }); + // this.addChild(this.downLeft); + this.downLeft.anchor.set(0.5); + this.downLeft.interactive = true; + this.downLeft.visible = false; + this.downLeft + .on('pointerdown', event => { + event.stopPropagation(); + event.currentTarget.data = event.data; + event.currentTarget.alpha = 0.5; + event.currentTarget.dragging = true; + + event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); + + const pointStart = this.position; + const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.upRight.position)); + + const delX = pointEnd.x - pointStart.x; + const delY = pointEnd.y - pointStart.y; + + this.pivot.set(this.upRight.x, this.upRight.y); + + this.position.x += delX; + this.position.y += delY; + + this.assetData.PivotX = this.pivot.x; + this.assetData.PivotY = this.pivot.y; + this.assetData.Point = new Point(this.x, this.y); + }) + .on('pointerup', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointerupoutside', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointermove', event => { + if (event.currentTarget.dragging) { + const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); + const startPos = this.position; + const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); + const width = (endPos.x - startPos.x); + const height = (endPos.y - startPos.y); + const scaleX = width / (this.width / this.scale.x); + const scaleY = height / (this.width / this.scale.x); + const angle = Math.abs(this.angle); + console.log(angle); + if (angle === 0) { + this.scale.set(-scaleX); + } else if (angle === 90) { + this.scale.set(scaleY); + } else if (angle === 180) { + this.scale.set(scaleX); + } else if (angle === 270) { + this.scale.set(-scaleY); + } + this.assetData.Scale = this.scale.x; + } + }) + .on('rightclick', event => { + this.border.visible = false; + }); + // this.addChild(this.downRight); + this.downRight.anchor.set(0.5); + this.downRight.interactive = true; + this.downRight.visible = false; + this.downRight + .on('pointerdown', event => { + event.stopPropagation(); + event.currentTarget.data = event.data; + event.currentTarget.alpha = 0.5; + event.currentTarget.dragging = true; + + event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); + + const pointStart = this.position; + const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.upLeft.position)); + + const delX = pointEnd.x - pointStart.x; + const delY = pointEnd.y - pointStart.y; + + this.pivot.set(this.upLeft.x, this.upLeft.y); + + this.position.x += delX; + this.position.y += delY; + + this.assetData.PivotX = this.pivot.x; + this.assetData.PivotY = this.pivot.y; + this.assetData.Point = new Point(this.x, this.y); + }) + .on('pointerup', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointerupoutside', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointermove', event => { + if (event.currentTarget.dragging) { + const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); + const startPos = this.position; + const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); + const width = (endPos.x - startPos.x); + const height = (endPos.y - startPos.y); + const scaleX = width / (this.width / this.scale.x); + const scaleY = height / (this.width / this.scale.x); + const angle = Math.abs(this.angle); + console.log(angle); + if (angle === 0) { + this.scale.set(scaleX); + } else if (angle === 90) { + this.scale.set(-scaleY); + } else if (angle === 180) { + this.scale.set(-scaleX); + } else if (angle === 270) { + this.scale.set(scaleY); + } + this.assetData.Scale = this.scale.x; + } + }) + .on('rightclick', event => { + this.border.visible = false; + }); + } + /** + * 设置点显示状态 + * @param value 显示状态 + */ + public setPointVisiable(value: boolean) { + const rect = this.getLocalBounds(); + this.upLeft.x = rect.left; + this.upLeft.y = rect.top; + this.upRight.x = rect.right; + this.upRight.y = rect.top; + this.downLeft.x = rect.left; + this.downLeft.y = rect.bottom; + this.downRight.x = rect.right; + this.downRight.y = rect.bottom; + this.upLeft.visible = value; + this.upRight.visible = value; + this.downLeft.visible = value; + this.downRight.visible = value; + } + /** + * + * @param scale 绘制边框 + */ + public drawBorder(scale: number) { + const visible = this.upLeft.visible; + this.setPointVisiable(false); + + super.drawBorder(scale); + const rect = this.getLocalBounds(); + this.upLeft.x = rect.left; + this.upLeft.y = rect.top; + this.upRight.x = rect.right; + this.upRight.y = rect.top; + this.downLeft.x = rect.left; + this.downLeft.y = rect.bottom; + this.downRight.x = rect.right; + this.downRight.y = rect.bottom; + this.setPointVisiable(visible); } } -export class Legend{ +export class Legend { public Name: string; public ImageUrl: string; public Count: number; /** * */ - constructor(name:string,imageUrl:string,count:number) { + constructor(name: string, imageUrl: string, count: number) { this.Name = name; this.ImageUrl = imageUrl; this.Count = count; diff --git a/src/app/working-area/model/axMessageSystem.ts b/src/app/working-area/model/axMessageSystem.ts new file mode 100644 index 0000000..fac6c6b --- /dev/null +++ b/src/app/working-area/model/axMessageSystem.ts @@ -0,0 +1,90 @@ +/** + * 事件系统 + */ +export class AxMessageSystem { + /** 监听数组 */ + private static listeners = {}; + + /** + * 注册事件 + * @param name 事件名称 + * @param callback 回调函数 + * @param context 上下文 + */ + public static addListener(name: string, callback: Function, context: any) { + let observers: Observer[] = AxMessageSystem.listeners[name]; + if (!observers) { + AxMessageSystem.listeners[name] = []; + } + AxMessageSystem.listeners[name].push(new Observer(callback, context)); + } + + /** + * 移除事件 + * @param name 事件名称 + * @param callback 回调函数 + * @param context 上下文 + */ + public static removeListener(name: string, callback: Function, context: any) { + let observers: Observer[] = AxMessageSystem.listeners[name]; + if (!observers) return; + let length = observers.length; + for (let i = 0; i < length; i++) { + let observer = observers[i]; + if (observer.compar(context)) { + observers.splice(i, 1); + break; + } + } + if (observers.length == 0) { + delete AxMessageSystem.listeners[name]; + } + } + + /** + * 发送事件 + * @param name 事件名称 + */ + public static send(name: string, ...args: any[]) { + let observers: Observer[] = AxMessageSystem.listeners[name]; + if (!observers) return; + let length = observers.length; + for (let i = 0; i < length; i++) { + let observer = observers[i]; + observer.notify(name, ...args); + } + } +} + +/** + * 观察者 + */ +class Observer { + /** 回调函数 */ + private callback: Function = null; + /** 上下文 */ + private context: any = null; + + constructor(callback: Function, context: any) { + let self = this; + self.callback = callback; + self.context = context; + } + + /** + * 发送通知 + * @param args 不定参数 + */ + notify(...args: any[]): void { + let self = this; + self.callback.call(self.context, ...args); + } + + /** + * 上下文比较 + * @param context 上下文 + */ + compar(context: any): boolean { + return context == this.context; + } +} diff --git a/src/app/working-area/model/axRectangleShape.ts b/src/app/working-area/model/axRectangleShape.ts new file mode 100644 index 0000000..cf61f6c --- /dev/null +++ b/src/app/working-area/model/axRectangleShape.ts @@ -0,0 +1,21 @@ +import { Sprite } from 'pixi.js'; +import { Graphics } from 'pixi.js'; +import { WorkingAreaComponent } from '../working-area.component'; +import { AxShape } from './axShape'; + +export class AxRectangleShape extends AxShape { + /** + * + */ + constructor(x: number, y: number, width: number, height: number, assetData: any, workingArea: WorkingAreaComponent) { + super(assetData, workingArea); + this.beginFill(0x0000ff, 1); + this.lineStyle(1, 0xff0000, 1); + this.drawRect(x, y, width, height); + this.endFill(); + + + } + + +} diff --git a/src/app/working-area/model/axSelection.ts b/src/app/working-area/model/axSelection.ts new file mode 100644 index 0000000..4089480 --- /dev/null +++ b/src/app/working-area/model/axSelection.ts @@ -0,0 +1,64 @@ + +/** + * 选择器 + */ +export class AxSelection { + constructor() { + } + private objects: Set = new Set(); + // 获得第一个对象 + public first(): any { + if (this.objects.size > 0) { + return [...this.objects][0]; + } else { + return null; + } + } + // 是否已经选择了对象 + public has(obj: any): boolean { + return this.objects.has(obj); + } + // 是否所有选择对象都允许编辑 + public allowEdit(): boolean { + let allowEdit = true; + for (const item of this.objects) { + if (!item.allowEdit) { + allowEdit = false; + break; + } + } + return allowEdit; + } + // 获得所有对象 + public all() { + return [...this.objects]; + } + // 获取集合长度 + public size(): number { + return this.objects.size; + } + // 添加对象 + public add(obj: any) { + this.objects.add(obj); + } + // 添加集合 + public addArray(array: any[]) { + array.forEach(item => { + this.objects.add(item); + }); + } + // 移除对象 + public delete(obj: any) { + this.objects.delete(obj); + } + // 移除集合 + public deleteArray(array: any[]) { + array.forEach(item => { + this.objects.delete(item); + }); + } + // 清空所有对象 + public clear() { + this.objects.clear(); + } +} diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts index 7e784b3..85ab02c 100644 --- a/src/app/working-area/model/axShape.ts +++ b/src/app/working-area/model/axShape.ts @@ -6,21 +6,23 @@ import { WorkingAreaComponent } from '../working-area.component'; /** * 安信形状 */ -export class AxShape extends Container { +export class AxShape extends Graphics { assetData: any; - pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png') + pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png'); workingArea: WorkingAreaComponent; - // 可以被移动的 - moveable = true; - // 可以被选中的 - selectable = true; + // 允许选择 + allowSelect = true; // 允许编辑 allowEdit = true; // 是否显示名称 showName = true; // 边框 border: PIXI.Graphics = new PIXI.Graphics(); - + // 鼠标位置 + mousePosition: PIXI.Point; + // 鼠标拖动 + mouseDragging: boolean; + constructor(assetData: any, workingArea: WorkingAreaComponent) { super(); this.border.visible = false; @@ -30,105 +32,71 @@ export class AxShape extends Container { this.workingArea.backgroundImage.addChild(this); this.zIndex = 200; this.interactive = true; - this.buttonMode = true; + // this.buttonMode = true; this .on('pointerdown', event => { - event.stopPropagation(); - if (this.selectable) { - this.workingArea.selection.selectOne(this); - } - if (this.moveable) { - event.currentTarget.data = event.data; - event.currentTarget.alpha = 0.5; - event.currentTarget.dragging = true; - - event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); - event.currentTarget.dragPoint.x -= event.currentTarget.x; - event.currentTarget.dragPoint.y -= event.currentTarget.y; - } + event.stopPropagation(); + if (this.allowSelect + && event.data.button === 0) { + this.workingArea.select(this); + } + if (this.allowEdit) { + this.mouseDragging = true; + this.mousePosition = new PIXI.Point(event.data.global.x, event.data.global.y); + } }) .on('pointerup', event => { - if (event.currentTarget.dragging) { - event.currentTarget.alpha = 1; - event.currentTarget.dragging = false; - event.currentTarget.data = null; - } + this.mouseDragging = false; }) .on('pointerupoutside', event => { - if (event.currentTarget.dragging) { - event.currentTarget.alpha = 1; - event.currentTarget.dragging = false; - event.currentTarget.data = null; - } + this.mouseDragging = false; }) .on('pointermove', event => { - if (event.currentTarget.dragging) { - const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); - - // const offsetX = newPosition.x - event.currentTarget.dragPoint.x; - // const offsetY = newPosition.y - event.currentTarget.dragPoint.y; - // const offset = this.workingArea.backgroundImage.toLocal(new Point(offsetX, offsetY)); - // event.currentTarget.position += offset; - // // this.workingArea.selection.objects.forEach(shpae => { - // // shpae.x = newPosition.x - event.currentTarget.dragPoint.x; - // // shpae.y = newPosition.y - event.currentTarget.dragPoint.y; - // // shpae.assetData.Point = new PIXI.Point(this.x, this.y); - // // this.workingArea.canvasData.isChange = true; - // // }) - event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x; - event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y; - this.assetData.Point = new PIXI.Point(this.x, this.y); - this.workingArea.canvasData.isChange = true; + if (this.mouseDragging) { + this.workingArea.selection.all().forEach(item => { + const x = event.data.global.x - this.mousePosition.x; + const y = event.data.global.y - this.mousePosition.y; + item.x += x * (1 / this.workingArea.camera2D.scale.x); + item.y += y * (1 / this.workingArea.camera2D.scale.y); + item.assetData.Point = new PIXI.Point(item.x, item.y); + this.workingArea.canvasData.isChange = true; + }); + this.mousePosition = new PIXI.Point(event.data.global.x, event.data.global.y); } }) .on('rightclick', event => { this.border.visible = false; - }) - .on('pointerover', event => { - event.stopPropagation(); - }) - .on('pointerout', event => { - event.stopPropagation(); }); } redraw(): void { - + } - refresh(): void{ - + refresh(): void { + } public setItemScale(scale: number) { - + } - /** - * 显示边框 - */ + public showBorder() { - if (this.assetData.FixedSize) { - this.drawBorder(1); - } - else { - this.drawBorder(1/this.workingArea.backgroundImage.scale.x); - } this.border.visible = true; } /** * 隐藏边框 */ public hideBorder() { - this.border.clear(); this.border.visible = false; } - /** - * 设置点显示状态 - * @param value 显示状态 - */ + /** + * 设置点显示状态 + * @param value 显示状态 + */ public setPointVisiable(value: boolean) { - + } /** - * + * * @param rect 画边框 */ public drawBorder(scale: number) { @@ -142,52 +110,52 @@ export class AxShape extends Container { this.border.lineStyle(scale * 1, 0x00a8ff); - var spaceLength = scale * 1; - var lineLenght = rect.width + 0.5 + 0.5; - var dashLength = scale*( lineLenght +spaceLength - Math.floor((rect.width + rect.height)/2 / 4.1))/Math.floor((rect.width + rect.height)/2 / 4.1); - this.drawDash(this.border, p1.x -0.5*scale, p1.y, p2.x + 0.5*scale, p2.y,dashLength,spaceLength); - this.drawDash(this.border, p2.x, p2.y -0.5*scale, p3.x, p3.y + 0.5*scale, dashLength, spaceLength); - this.drawDash(this.border, p3.x+0.5*scale, p3.y, p4.x - 0.5*scale, p4.y, dashLength, spaceLength); - this.drawDash(this.border, p4.x, p4.y + 0.5*scale, p1.x, p1.y - 0.5*scale, dashLength, spaceLength); - + const spaceLength = scale * 1; + const lineLenght = rect.width + 0.5 + 0.5; + const dashLength = scale * (lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1); + this.drawDash(this.border, p1.x - 0.5 * scale, p1.y, p2.x + 0.5 * scale, p2.y, dashLength, spaceLength); + this.drawDash(this.border, p2.x, p2.y - 0.5 * scale, p3.x, p3.y + 0.5 * scale, dashLength, spaceLength); + this.drawDash(this.border, p3.x + 0.5 * scale, p3.y, p4.x - 0.5 * scale, p4.y, dashLength, spaceLength); + this.drawDash(this.border, p4.x, p4.y + 0.5 * scale, p1.x, p1.y - 0.5 * scale, dashLength, spaceLength); + this.border.lineStyle(0, 0x0000ff); - this.border.beginFill(0x00ff00,0.1); + // this.border.beginFill(0x00ff00,0.1); this.border.moveTo(p1.x, p1.y); this.border.lineTo(p2.x, p2.y); this.border.lineTo(p3.x, p4.y); this.border.lineTo(p4.x, p4.y); this.border.closePath(); - this.border.endFill(); - } - // 画虚线 - drawDash(target, x1, y1, x2, y2,dashLength = 5, spaceLength = 1) { - let x = x2 - x1; - let y = y2 - y1; - let hyp = Math.sqrt((x) * (x) + (y) * (y)); - let units = hyp / (dashLength + spaceLength); - let dashSpaceRatio = dashLength / (dashLength + spaceLength); - let dashX = (x / units) * dashSpaceRatio; - let spaceX = (x / units) - dashX; - let dashY = (y / units) * dashSpaceRatio; - let spaceY = (y / units) - dashY; + // this.border.endFill(); + } + // 画虚线 + drawDash(target, x1, y1, x2, y2, dashLength = 5, spaceLength = 1) { + const x = x2 - x1; + const y = y2 - y1; + let hyp = Math.sqrt((x) * (x) + (y) * (y)); + const units = hyp / (dashLength + spaceLength); + const dashSpaceRatio = dashLength / (dashLength + spaceLength); + const dashX = (x / units) * dashSpaceRatio; + const spaceX = (x / units) - dashX; + const dashY = (y / units) * dashSpaceRatio; + const spaceY = (y / units) - dashY; - target.moveTo(x1, y1); - - while (hyp > 0) { - x1 += dashX; - y1 += dashY; - hyp -= dashLength; - if (hyp < 0) { - x1 = x2; - y1 = y2; - } - target.lineTo(x1, y1); - x1 += spaceX; - y1 += spaceY; target.moveTo(x1, y1); - hyp -= spaceLength; - } - target.moveTo(x2, y2); + + while (hyp > 0) { + x1 += dashX; + y1 += dashY; + hyp -= dashLength; + if (hyp < 0) { + x1 = x2; + y1 = y2; + } + target.lineTo(x1, y1); + x1 += spaceX; + y1 += spaceY; + target.moveTo(x1, y1); + hyp -= spaceLength; + } + target.moveTo(x2, y2); } // 计算多边形重心 public calculatePolygonGravityCenter(points: PIXI.Point[]) { @@ -215,7 +183,7 @@ export class AxShape extends Container { return new PIXI.Point(gravityLat, gravityLng); } // 计算线段中点坐标 - public getLineCenter(point1:PIXI.Point,point2:PIXI.Point) { - return new PIXI.Point((point1.x+point2.x)/2,(point1.y+point2.y)/2) + public getLineCenter(point1: PIXI.Point, point2: PIXI.Point) { + return new PIXI.Point((point1.x + point2.x) / 2, (point1.y + point2.y) / 2); } } diff --git a/src/app/working-area/model/configuration.ts b/src/app/working-area/model/configuration.ts new file mode 100644 index 0000000..f26898b --- /dev/null +++ b/src/app/working-area/model/configuration.ts @@ -0,0 +1,165 @@ +import { EventDispatcher } from 'three'; +import { EVENT_CHANGED } from './events'; + + +// GENERAL: +/** The dimensioning unit for 2D floorplan measurements. */ +export var configDimUnit = 'dimUnit'; +// WALL: +/** The initial wall height in cm. */ +export const configWallHeight = 'wallHeight'; +/** The initial wall thickness in cm. */ +export const configWallThickness = 'wallThickness'; + +export const configSystemUI = 'systemUI'; + +export const scale = 'scale'; + +export const gridSpacing = 'gridSpacing'; +export const snapToGrid = 'snapToGrid'; +export const directionalDrag = 'directionalDrag'; +export const dragOnlyX = 'dragOnlyX'; +export const dragOnlyY = 'dragOnlyY'; +export const snapTolerance = 'snapTolerance'; //In CMS +export const boundsX = 'boundsX'; //In CMS +export const boundsY = 'boundsY'; //In CMS +export const viewBounds = 'viewBounds';//In CMS + +export const dimInch = 'inch'; + +/** Dimensioning in Inch. */ +export const dimFeetAndInch = 'feetAndInch'; + +/** Dimensioning in Meter. */ +export const dimMeter = 'm'; + +/** Dimensioning in Centi Meter. */ +export const dimCentiMeter = 'cm'; + +/** Dimensioning in Milli Meter. */ +export const dimMilliMeter = 'mm'; + +export const VIEW_TOP = 'topview'; +export const VIEW_FRONT = 'frontview'; +export const VIEW_RIGHT = 'rightview'; +export const VIEW_LEFT = 'leftview'; +export const VIEW_ISOMETRY = 'isometryview'; + +export enum WallTypes { + STRAIGHT, + CURVED +} + +export const TEXTURE_DEFAULT_REPEAT = 300; +export const defaultWallTexture = +{ + color: '#FFFFFF', repeat: TEXTURE_DEFAULT_REPEAT, normalmap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_normal.jpg', roughnessmap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_roughness.jpg', colormap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_basecolor.jpg', ambientmap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_ambientOcclusion.jpg', bumpmap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_height.png' +}; +export const defaultFloorTexture = +{ + color: '#FFFFFF', emissive: '#181818', repeat: TEXTURE_DEFAULT_REPEAT, ambientmap: 'textures/Floor/Marble_Tiles_001/Marble_Tiles_001_ambientOcclusion.jpg', colormap: 'textures/Floor/Marble_Tiles_001/Marble_Tiles_001_basecolor.jpg', roughnessmap: 'textures/Floor/Marble_Tiles_001/Marble_Tiles_001_roughness.jpg', normalmap: 'textures/Floor/Marble_Tiles_001/Marble_Tiles_001_normal.jpg' +}; + +export const TEXTURE_PROPERTY_COLOR = 'color'; +export const TEXTURE_NO_PREVIEW = 'textures/NoPreview.jpg'; + +export var config = { + dimUnit: dimCentiMeter, + wallHeight: 250, + wallThickness: 20, + systemUI: false, + scale: 1, + snapToGrid: true, + dragOnlyX: false, + dragOnlyY: false, + snapTolerance: 50, + gridSpacing: 20, // 50, + directionalDrag: true, + boundsX: 500, + boundsY: 500, + viewBounds: 60000 +}; + +export var wallInformation = { exterior: false, interior: false, midline: true, labels: true, exteriorlabel: 'e:', interiorlabel: 'i:', midlinelabel: 'm:' }; + + +/** + * The tolerance in cms between corners, otherwise below this tolerance they will snap together as one corner*/ +export const cornerTolerance = 20; + +/** Global configuration to customize the whole system. + * This is a singleton instance; + */ +export class Configuration extends EventDispatcher { + private static instance = new Configuration(); + constructor() { + /** Configuration data loaded from/stored to extern. */ + // this.data = {dimUnit: dimCentiMeter, wallHeight: 250, wallThickness: 10}; + super(); + } + + static getInstance() { + if (this.instance === undefined + || this.instance === null) { + this.instance = new Configuration(); + } + return this.instance; + } + + static getData() { + // return {dimUnit: dimCentiMeter,wallHeight: 250, wallThickness: 10}; + return config; + } + + /** Set a configuration parameter. */ + static setValue(key, value) { + // this.data[key] = value; + config[key] = value; + // if(key !== viewBounds){ + Configuration.getInstance().dispatchEvent({ type: EVENT_CHANGED, item: Configuration.getInstance(), 'key': key, 'value': value }); + // } + } + + /** Get a string configuration parameter. */ + static getStringValue(key) { + switch (key) { + case configDimUnit: + // return String(this.data[key]); + return String(Configuration.getData()[key]); + default: + throw new Error('Invalid string configuration parameter: ' + key); + } + } + + /** Get a numeric configuration parameter. */ + static getNumericValue(key) { + switch (key) { + case configSystemUI: + case configWallHeight: + case configWallThickness: + case scale: + case snapTolerance: + case gridSpacing: + case boundsX: + case boundsY: + case viewBounds: + // return Number(this.data[key]); + return Number(Configuration.getData()[key]); + default: + throw new Error('Invalid numeric configuration parameter: ' + key); + } + } + + /** Get a numeric configuration parameter. */ + static getBooleanValue(key) { + switch (key) { + case snapToGrid: + case directionalDrag: + case dragOnlyX: + case dragOnlyY: + return Boolean(Configuration.getData()[key]); + default: + throw new Error('Invalid Boolean configuration parameter: ' + key); + } + } +} \ No newline at end of file diff --git a/src/app/working-area/model/dimensioning.ts b/src/app/working-area/model/dimensioning.ts new file mode 100644 index 0000000..f7a3fc4 --- /dev/null +++ b/src/app/working-area/model/dimensioning.ts @@ -0,0 +1,145 @@ +import { Vector2, Vector3 } from 'three'; +import { Configuration, configDimUnit,dimInch, dimFeetAndInch, dimMeter, dimCentiMeter, dimMilliMeter } from './configuration'; + +export const decimals = 1000; + +export const cmPerFoot = 30.48; +export const pixelsPerFoot = 5.0; + +export const pixelsPerCm = 1; // 0.5; +export const cmPerPixel = (1.0 / pixelsPerCm); + + +export const dimensioningOptions = [dimInch, dimFeetAndInch, dimMeter, dimCentiMeter, dimMilliMeter]; + + +/** Dimensioning functions. */ +export class Dimensioning { + static cmToPixelVector2D(cmV2d) { + let pixelV2d = new Vector2(Dimensioning.cmToPixel(cmV2d.x), Dimensioning.cmToPixel(cmV2d.y)); + return pixelV2d; + } + + static cmToPixelVector3D(cmV3d) { + let pixelV2d = new Vector3(Dimensioning.cmToPixel(cmV3d.x), Dimensioning.cmToPixel(cmV3d.y), Dimensioning.cmToPixel(cmV3d.z)); + return pixelV2d; + } + + static pixelToCmVector2D(pixelV2d) { + let cmV2d = new Vector2(Dimensioning.cmToPixel(pixelV2d.x), Dimensioning.cmToPixel(pixelV2d.y)); + return cmV2d; + } + + static pixelToCmVector3D(pixel3d) { + let cmV2d = new Vector3(Dimensioning.cmToPixel(pixel3d.x), Dimensioning.cmToPixel(pixel3d.y), Dimensioning.cmToPixel(pixel3d.z)); + return cmV2d; + } + + static cmToPixel(cm, apply_scale = true) { + if (apply_scale) { + return cm * pixelsPerCm * Configuration.getNumericValue('scale'); + } + return cm * pixelsPerCm; + } + + static pixelToCm(pixel, apply_scale = true) { + if (apply_scale) { + return pixel * cmPerPixel * (1.0 / Configuration.getNumericValue('scale')); + } + return pixel * cmPerPixel; + } + + static roundOff(value, decimals) { + return Math.round(decimals * value) / decimals; + } + /** Converts cm to dimensioning number. + * @param cm Centi meter value to be converted. + * @returns Number representation. + */ + static cmFromMeasureRaw(measure) { + switch (Configuration.getStringValue(configDimUnit)) { + case dimFeetAndInch: + return Math.round(decimals * (measure * 30.480016459203095991)) / decimals; + case dimInch: + return Math.round(decimals * (measure * 2.5400013716002578512)) / decimals; + case dimMilliMeter: + return Math.round(decimals * (measure * 0.10000005400001014955)) / decimals; + case dimCentiMeter: + return measure; + case dimMeter: + default: + return Math.round(decimals * 100 * measure) / decimals; + } + } + + /** Converts cm to dimensioning string. + * @param cm Centi meter value to be converted. + * @returns String representation. + */ + static cmFromMeasure(measure) { + switch (Configuration.getStringValue(configDimUnit)) { + case dimFeetAndInch: + return Math.round(decimals * (measure * 30.480016459203095991)) / decimals + 'cm'; + case dimInch: + return Math.round(decimals * (measure * 2.5400013716002578512)) / decimals + 'cm'; + case dimMilliMeter: + return Math.round(decimals * (measure * 0.10000005400001014955)) / decimals + 'cm'; + case dimCentiMeter: + return measure; + case dimMeter: + default: + return Math.round(decimals * 100 * measure) / decimals + 'cm'; + } + } + + /** Converts cm to dimensioning string. + * @param cm Centi meter value to be converted. + * @returns String representation. + */ + static cmToMeasureRaw(cm, power = 1) { + switch (Configuration.getStringValue(configDimUnit)) { + case dimFeetAndInch: // dimFeetAndInch returns only the feet + var allInFeet = (cm * Math.pow(0.032808416666669996953, power)); + return allInFeet; + case dimInch: + var inches = Math.round(decimals * (cm * Math.pow(0.393700, power))) / decimals; + return inches; + case dimMilliMeter: + var mm = Math.round(decimals * (cm * Math.pow(10, power))) / decimals; + return mm; + case dimCentiMeter: + return Math.round(decimals * cm) / decimals; + case dimMeter: + default: + var m = Math.round(decimals * (cm * Math.pow(0.01, power))) / decimals; + return m; + } + } + + /** Converts cm to dimensioning string. + * @param cm Centi meter value to be converted. + * @returns String representation. + */ + static cmToMeasure(cm, power = 1) { + switch (Configuration.getStringValue(configDimUnit)) { + case dimFeetAndInch: + var allInFeet = (cm * Math.pow(0.032808416666669996953, power)); + var floorFeet = Math.floor(allInFeet); + var remainingFeet = allInFeet - floorFeet; + var remainingInches = Math.round(remainingFeet * 12); + return floorFeet + '\'' + remainingInches + ''; + case dimInch: + var inches = Math.round(decimals * (cm * Math.pow(0.393700, power))) / decimals; + return inches + '\''; + case dimMilliMeter: + var mm = Math.round(decimals * (cm * Math.pow(10, power))) / decimals; + return '' + mm + 'mm'; + case dimCentiMeter: + return '' + Math.round(decimals * cm) / decimals + 'cm'; + case dimMeter: + default: + var m = Math.round(decimals * (cm * Math.pow(0.01, power))) / decimals; + return '' + m + 'm'; + } + } +} \ No newline at end of file diff --git a/src/app/working-area/model/events.ts b/src/app/working-area/model/events.ts new file mode 100644 index 0000000..d06de6a --- /dev/null +++ b/src/app/working-area/model/events.ts @@ -0,0 +1,71 @@ +export const EVENT_ACTION = 'ACTION_EVENT'; +export const EVENT_DELETED = 'DELETED_EVENT'; +export const EVENT_MOVED = 'MOVED_EVENT'; +export const EVENT_REDRAW = 'REDRAW_EVENT'; +export const EVENT_NEW = 'NEW_EVENT'; +export const EVENT_LOADED = 'LOADED_EVENT'; +export const EVENT_LOADING = 'LOADING_EVENT'; +export const EVENT_UPDATED = 'UPDATED_EVENT'; +export const EVENT_SAVED = 'SAVED_EVENT'; +export const EVENT_CHANGED = 'CHANGED_EVENT'; +export const EVENT_GLTF_READY = 'GLTF_READY_EVENT'; + +export const EVENT_EXTERNAL_FLOORPLAN_LOADED = 'EXTERNAL_FLOORPLAN_LOADED_EVENT'; + +export const EVENT_NEW_PARAMETRIC_ITEM = 'NEW_PARAMETRIC_ITEM_EVENT'; +export const EVENT_NEW_ITEM = 'NEW_ITEM_EVENT'; +export const EVENT_ITEM_LOADING = 'ITEM_LOADING_EVENT'; +export const EVENT_ITEM_LOADED = 'ITEM_LOADED_EVENT'; +export const EVENT_ITEM_REMOVED = 'ITEM_REMOVED_EVENT'; + +export const EVENT_ITEM_SELECTED = 'ITEM_SELECTED_EVENT'; +export const EVENT_ITEM_MOVE = 'ITEM_MOVED_EVENT'; +export const EVENT_ITEM_MOVE_FINISH = 'ITEM_MOVED_FINISH_EVENT'; +export const EVENT_ITEM_HOVERON = 'ITEM_HOVERON_EVENT'; +export const EVENT_ITEM_HOVEROFF = 'ITEM_HOVEROFF_EVENT'; +export const EVENT_NO_ITEM_SELECTED = 'ITEM_NO_SELECTED_EVENT'; + +export const EVENT_MODE_RESET = 'MODE_RESET_EVENT'; +export const EVENT_CAMERA_MOVED = 'CAMERA_MOVED_EVENT'; +export const EVENT_CAMERA_ACTIVE_STATUS = 'CAMERA_ACTIVE_STATUS_EVENT'; +export const EVENT_CAMERA_VIEW_CHANGE = 'CAMERA_VIEW_CHANGE_EVENT'; +export const EVENT_FPS_EXIT = 'CAMERA_FPS_EXIT_EVENT'; + +export const EVENT_WALL_CLICKED = 'WALL_CLICKED_EVENT'; +export const EVENT_ROOM_CLICKED = 'ROOM_CLICKED_EVENT'; +export const EVENT_FLOOR_CLICKED = 'FLOOR_CLICKED_EVENT'; +export const EVENT_NOTHING_CLICKED = 'NOTHING_CLICKED_EVENT'; + +export const EVENT_ROOM_NAME_CHANGED = 'CHANGED_ROOM_NAME_EVENT'; +export const EVENT_NEW_ROOMS_ADDED = 'ADDED_NEW_ROOMS_EVENT'; + +export const EVENT_CORNER_ATTRIBUTES_CHANGED = 'CORNER_ATTRIBUTES_CHANGED_EVENT'; +export const EVENT_WALL_ATTRIBUTES_CHANGED = 'WALL_ATTRIBUTES_CHANGED_EVENT'; +export const EVENT_ROOM_ATTRIBUTES_CHANGED = 'ROOM_ATTRIBUTES_CHANGED_EVENT'; + +export const EVENT_CORNER_2D_CLICKED = 'CORNER_CLICKED_2D_EVENT'; +export const EVENT_WALL_2D_CLICKED = 'WALL_CLICKED_2D_EVENT'; +export const EVENT_ROOM_2D_CLICKED = 'ROOM_CLICKED_2D_EVENT'; +export const EVENT_2D_UNSELECTED = 'UNSELECTED_2D_EVENT'; +export const EVENT_2D_SELECTED = 'SELECTED_2D_EVENT'; +export const EVENT_NOTHING_2D_SELECTED = 'NOTHING_2D_SELECTED_EVENT'; + +export const EVENT_CORNER_2D_DOUBLE_CLICKED = 'CORNER_DOUBLE_CLICKED_2D_EVENT'; +export const EVENT_WALL_2D_DOUBLE_CLICKED = 'WALL_DOUBLE_CLICKED_2D_EVENT'; +export const EVENT_ROOM_2D_DOUBLE_CLICKED = 'ROOM_DOUBLE_CLICKED_2D_EVENT'; + +export const EVENT_CORNER_2D_HOVER = 'CORNER_HOVER_2D_EVENT'; +export const EVENT_WALL_2D_HOVER = 'WALL_HOVER_2D_EVENT'; +export const EVENT_ROOM_2D_HOVER = 'ROOM_HOVER_2D_EVENT'; + +export const EVENT_KEY_PRESSED = 'KEY_PRESSED_EVENT'; +export const EVENT_KEY_RELEASED = 'KEY_RELEASED_EVENT'; + +export const EVENT_UPDATE_TEXTURES = 'UPDATE_TEXTURES_EVENT'; +export const EVENT_MODIFY_TEXTURE_ATTRIBUTE = 'MODIFY_TEXTURE_ATTRIBUTE_EVENT'; + +export const EVENT_PARAMETRIC_GEOMETRY_UPATED = 'PARAMETRIC_GEOMETRY_UPATED_EVENT'; + +export const EVENT_SELECTION_CHANGED = 'selectionChanged'; + +export const EVENT_IMAGE_RESIZE = 'imageResize'; diff --git a/src/app/working-area/model/grid2D.ts b/src/app/working-area/model/grid2D.ts new file mode 100644 index 0000000..7a5c17c --- /dev/null +++ b/src/app/working-area/model/grid2D.ts @@ -0,0 +1,87 @@ +import { Configuration, gridSpacing, viewBounds } from './configuration'; +import { EVENT_CHANGED } from './events'; +import { Graphics } from 'pixi.js'; +import { Vector2 } from 'three'; +import { Dimensioning } from './dimensioning'; + +const GRID_SIZE = 10000; + +export class Grid2D extends Graphics { + + canvas; + options; + size; + gridScale; + constructor(canvas, options) { + super(); + // this.drawRect(0, 0, GRID_SIZE, GRID_SIZE); + this.canvas = canvas; + this.options = options; + this.size = new Vector2(GRID_SIZE, GRID_SIZE); + this.gridScale = 1.0; + this.width = this.size.x; + this.height = this.size.y; + this.drawRect(0, 0, GRID_SIZE, GRID_SIZE); + this.pivot.x = this.pivot.y = 0.5; + Configuration.getInstance().addEventListener(EVENT_CHANGED, (evt) => this.updateGrid()); + this.updateGrid(); + } + + updateGrid() { + let gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1); + let spacingCMS = Configuration.getNumericValue(gridSpacing); + let spacing = Dimensioning.cmToPixel(spacingCMS); + let totalLines = gridSize / spacing; + let halfSize = gridSize * 0.5; + let linewidth = Math.max(1.0 / this.gridScale, 1.0) * 1 / this.canvas.scale.x;// 增加缩放系数 + let highlightLineWidth = Math.max(1 / this.gridScale, 1.0) * 1 / this.canvas.scale.x;// 增加缩放系数 + let normalColor = 0xE0E0E0; + let highlightColor = 0xD0D0D0; + const cellSize = 5; + this.clear(); + for (let i = 0; i <= totalLines; i++) { + let co = (i * spacing) - halfSize; + if (i % cellSize === 0) { + this.lineStyle(highlightLineWidth, highlightColor).moveTo(-halfSize, co).lineTo(halfSize, co); + this.lineStyle(highlightLineWidth, highlightColor).moveTo(co, -halfSize).lineTo(co, halfSize); + } else { + this.lineStyle(linewidth, normalColor).moveTo(-halfSize, co).lineTo(halfSize, co); + this.lineStyle(linewidth, normalColor).moveTo(co, -halfSize).lineTo(co, halfSize); + } + } + this.endFill(); + + this.beginFill(0xFF0000, 1.0); + this.drawCircle(-halfSize, -halfSize, 5); + this.drawCircle(halfSize, -halfSize, 5); + this.drawCircle(halfSize, halfSize, 5); + this.drawCircle(-halfSize, halfSize, 5); + this.drawCircle(0, 0, 5); + this.endFill(); + } + + getGridScale() { + return this.gridScale; + } + + setGridScale(value) { + this.gridScale = value; + this.updateGrid(); + } + + configurationUpdate(evt) { + if (evt.key === gridSpacing) { + this.updateGrid(); + } + } + getCellCoordinates(x, y) { + let gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1); + let spacingCMS = Configuration.getNumericValue(gridSpacing); + let spacing = Dimensioning.cmToPixel(spacingCMS); + let halfSize = gridSize * 0.5; + return { + x: Math.floor((x - -halfSize) / spacing), + y: Math.floor((y - -halfSize) / spacing), + }; + } +} diff --git a/src/app/working-area/model/messageSystem.ts b/src/app/working-area/model/messageSystem.ts new file mode 100644 index 0000000..322eef4 --- /dev/null +++ b/src/app/working-area/model/messageSystem.ts @@ -0,0 +1,37 @@ +class MyEvent extends CustomEvent { + public static readonly CMD: string = "EVENT_NAME"; + public constructor($type: string , $data: T ) { + super( $type , { detail: $data, bubbles: true, cancelable: true, composed: true }); + } +} + +class MyDispatch extends EventTarget { + private static _instance: MyDispatch; + public static get Instance(): MyDispatch { + if (!MyDispatch._instance) MyDispatch._instance = new MyDispatch(); + return MyDispatch._instance; + } + public send($data: T, $type: string = MyEvent.CMD): void { + const $event: CustomEvent = new MyEvent($type, $data); + this.dispatchEvent($event); + } +} + +class Test { + + public constructor() { + MyDispatch.Instance.addEventListener(MyEvent.CMD, this.onEvent as EventListener); + } + private onEvent($e: MyEvent): void { + console.log(`target ${$e.target}`); + console.log(`name: ${$e.detail._name} , occupation: ${$e.detail._occupation}`); + } +} + +interface ITest { + _name: string; + _occupation: string; +} + +let $test: Test = new Test(); +MyDispatch.Instance.send({ _name: `Aonaufly`, _occupation: `it` }); diff --git a/src/app/working-area/model/multipointIcon.ts b/src/app/working-area/model/multipointIcon.ts index 395afd1..55ac71a 100644 --- a/src/app/working-area/model/multipointIcon.ts +++ b/src/app/working-area/model/multipointIcon.ts @@ -48,6 +48,8 @@ export class MultipointIcon extends AxShape { this.text.visible = this.showName; this.text.angle = -this.workingArea.backgroundImage.angle; this.addChild(this.text); + this.assetData.Thickness = this.assetData.Thickness === 0 ? 32: this.assetData.Thickness; + var tileScale = this.assetData.Thickness/64; // 画线图标 for (let i = 0, count = this.pointsData.length - 1; i < count; i++) { const pointA = this.pointsData[i]; @@ -58,15 +60,17 @@ export class MultipointIcon extends AxShape { const b = pointB.y - pointA.y; const distance = Math.sqrt(a * a + b * b); - const icon = new PIXI.TilingSprite(PIXI.Texture.from(this.assetData.ImageUrl), distance, 64); + const icon = new PIXI.TilingSprite(PIXI.Texture.from(this.assetData.ImageUrl), distance, this.assetData.Thickness); + icon.tileScale.set(tileScale); icon.anchor.set(0, 0.5); icon.x = pointA.x; icon.y = pointA.y; icon.angle = angle; - // icon.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness; this.iconsTilingSprite.push(icon); this.addChild(icon); this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]); + // 等距等分 + this.tileDistanceEqual(icon); } this.sortableChildren = true; this.text.zIndex = this.pointsData.length; @@ -128,6 +132,8 @@ export class MultipointIcon extends AxShape { const distance = Math.sqrt(a * a + b * b); this.iconsTilingSprite[index].angle = angle; this.iconsTilingSprite[index].width = distance; + + this.tileDistanceEqual(this.iconsTilingSprite[index]); } else if (index < array.length - 1) {// 不是第一个点，也不是最后一个点 this.iconsTilingSprite[index].x = newPosition.x; this.iconsTilingSprite[index].y = newPosition.y; @@ -143,12 +149,16 @@ export class MultipointIcon extends AxShape { this.iconsTilingSprite[index].angle = angle; this.iconsTilingSprite[index].width = distance; + this.tileDistanceEqual(this.iconsTilingSprite[index]); + const angleC = Math.atan2((pointA.y - pointC.y), (pointA.x - pointC.x)) * (180 / Math.PI); const aC = pointA.x - pointC.x; const bC = pointA.y - pointC.y; const distanceC = Math.sqrt(aC * aC + bC * bC); this.iconsTilingSprite[index - 1].angle = angleC; this.iconsTilingSprite[index - 1].width = distanceC; + + this.tileDistanceEqual(this.iconsTilingSprite[index - 1]); } else if (index === array.length - 1) { // 最后一个点 const pointA = array[index]; // 当前点 const pointC = array[index - 1]; // 前一个点 @@ -159,6 +169,8 @@ export class MultipointIcon extends AxShape { const distanceC = Math.sqrt(aC * aC + bC * bC); this.iconsTilingSprite[index - 1].angle = angleC; this.iconsTilingSprite[index - 1].width = distanceC; + + this.tileDistanceEqual(this.iconsTilingSprite[index - 1]); } this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]); @@ -177,6 +189,16 @@ export class MultipointIcon extends AxShape { item.visible = value; }); } + /** + * + * @param scale 绘制边框 + */ + public drawBorder(scale: number) { + let visible = this.pointsGraphics[0].visible; + this.setPointVisiable(false); + super.drawBorder(scale); + this.setPointVisiable(visible); + } // 设置名称 public setNameVisible(value: boolean, mode: GameMode) { if (this.assetData.GameMode === mode) { @@ -192,13 +214,28 @@ export class MultipointIcon extends AxShape { } // 刷新数据 public refresh() { - // console.log(this.assetData); - // this.iconsTilingSprite.forEach(element => { - // element.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness; - // }); + this.assetData.Thickness = this.assetData.Thickness === 0 ? 32: this.assetData.Thickness; + this.iconsTilingSprite.forEach(item => { + // 厚度优化 + this.tileDistanceEqual(item); + }); this.text.text = this.assetData.Name + '\r\n' + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue; this.text.angle = -this.workingArea.backgroundImage.angle; } + + // 等距等分 + public tileDistanceEqual(icon: PIXI.TilingSprite) { + icon.height = this.assetData.Thickness; + var tileScale = this.assetData.Thickness / 64; + icon.tileScale.set(tileScale); + console.log(tileScale); + var tileWidth = tileScale * 64; + var tileCount = Math.ceil(icon.width / tileWidth); + tileWidth = icon.width / tileCount; + tileScale = tileWidth / 64; + console.log(tileScale); + icon.tileScale.set(tileScale); + } } diff --git a/src/app/working-area/model/polygonIcon.ts b/src/app/working-area/model/polygonIcon.ts index 2494748..0186a11 100644 --- a/src/app/working-area/model/polygonIcon.ts +++ b/src/app/working-area/model/polygonIcon.ts @@ -155,6 +155,16 @@ export class PolygonIcon extends AxShape { item.visible = value; }); } + /** + * + * @param scale 绘制边框 + */ + public drawBorder(scale: number) { + let visible = this.pointsGraphics[0].visible; + this.setPointVisiable(false); + super.drawBorder(scale); + this.setPointVisiable(visible); + } // 设置缩放 public setItemScale(scale: number) { // this.text.scale.set(scale); diff --git a/src/app/working-area/working-area.component.html b/src/app/working-area/working-area.component.html index ee66290..736e057 100644 --- a/src/app/working-area/working-area.component.html +++ b/src/app/working-area/working-area.component.html @@ -1,2 +1 @@ -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 66749de..08a224c 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from '@angular/core'; +import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input, OnDestroy } from '@angular/core'; import * as PIXI from 'pixi.js'; import { EventEmitter } from 'events'; import { EventManager } from '@angular/platform-browser'; @@ -16,7 +16,14 @@ import { PropertyInfo } from './model/PropertyInfo'; import { AxPreviewImageShape } from './model/axPreviewImageShape'; import { AxArrowConnector } from './model/axArrowConnector'; import { AxLegend, Legend } from './model/axLegend'; -import { NullTemplateVisitor } from '@angular/compiler'; +import { AxGrid } from './model/axGrid'; +import { AxSelection } from './model/axSelection'; +import { AxMessageSystem } from './model/axMessageSystem'; +import { Grid2D } from './model/grid2D'; +import { Viewport } from 'pixi-viewport'; +import { EVENT_IMAGE_RESIZE, EVENT_SELECTION_CHANGED } from './model/events'; +import { Dimensioning } from './model/dimensioning'; +import { Configuration, viewBounds } from './model/configuration'; @Component({ @@ -27,10 +34,11 @@ import { NullTemplateVisitor } from '@angular/compiler'; /** * 工作区 */ -export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit { +export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit, OnDestroy { constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService) { super(); + console.log('组件构造函数'); } @ViewChild('content') @@ -42,7 +50,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * pixijs 程序 */ - public app: PIXI.Application; + public app: PIXI.Application = null; + /** + * 相机 + */ + public camera2D: Viewport = null; + /** + * 网格 + */ + public grid2D: Grid2D = null; /** * 资源加载器 */ @@ -74,9 +90,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 选择器 */ - public selection: Selection = new Selection(this); + public selection: AxSelection = new AxSelection(); /** - * 当前鼠标的点 + * 当前鼠标点击的点 */ public currentClickPoint: PIXI.Graphics = new PIXI.Graphics(); /** @@ -107,6 +123,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 确认绘制按钮 */ private enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.png'); + /** + * 编辑点图片 + */ + editorPointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png'); + backgroundTexture: PIXI.Texture = PIXI.Texture.from('assets/images/noImg.png'); /** * 框选工具图形 */ @@ -130,75 +151,131 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public animation; public animationIcon; public animationTime; - // 车辆作业面 - public carAreas: PolygonIcon[]; - // 车辆数据 - public carData: Map = new Map(); - // 当前选择的车辆id - public selectCar: any = null; - // 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta - // Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。 - // Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。 - // RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。 - // Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。 - public VERSION = '1.0.4.20210109_beta'; + // 是否按下Ctrl键 + isCtrlKeyClicked = false; + // 是否开启多点连线垂直绘制 + isDrawVerticalLine = false; + /** + * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta + * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。 + * Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。 + * RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。 + * Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。 + * 修改-修订版本号增加 + * 新增-子版本号增加 + * 重大调整-主版本号增加 + * 日期变更-日期版本号增加 + */ + public VERSION = '1.4.2.20210325_rc'; /** * 数据初始化 */ ngOnInit(): void { - PIXI.utils.skipHello() + console.log('组件OnInit'); + PIXI.utils.skipHello(); this.sayHello(); this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { - if (event.keyCode === 17) { - this.selection.isMultiselection = true; + // if (event.keyCode === 16) { + // this.isDrawVerticalLine = true; + // } + switch (event.keyCode) { + case 16: + this.isDrawVerticalLine = true; + break; + default: + break; } }); this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => { - if (event.keyCode === 17) { - this.selection.isMultiselection = false; - this.rectToolGraphics.visible = false; - this.rectToolGraphics.clear(); - } - // 按Del键删除选中的图标 - if (event.keyCode === 46) { - this.deleteSelectedShape(); + // // 按Del键删除选中的图标 + // if (event.keyCode === 46) { + // this.deleteSelectedShape(); + // } + switch (event.keyCode) { + case 16: // shift + this.isDrawVerticalLine = false; + break; + case 46: // delete + this.deleteSelectedShape(); + break; + default: + break; } }); } + ngOnDestroy(): void { + console.log('组件OnDestroy'); + this.selection.clear(); + this.camera2D.destroy(); + this.app.destroy(); + } + public setMulitSelect(b: boolean) { + if (b) { + this.isCtrlKeyClicked = true; + this.camera2D.plugins.pause('drag'); + } else { + this.isCtrlKeyClicked = false; + this.camera2D.drag(); + } + } /** * 删除选中的图标 */ public deleteSelectedShape() { - this.selection.objects.forEach(item => { - this.deleteShape(item); - }); - this.selection.deselectAll(); - } - /** - * - * @param obj 删除一个形状 - */ - public deleteShape(shape) { - if (this.allowEdit && this.canvasData.gameMode === shape.assetData.GameMode) { - this.emit('deleteIcon',shape); + if (this.selection.size() > 0) { + this.selection.all().forEach(axShape => { + if (this.allowEdit && this.canvasData.gameMode === axShape.assetData.GameMode) { + // 删除图例对象 + const temp = this.backgroundImage.getChildByName('图例') as AxLegend; + if (temp !== undefined + && temp !== null + && axShape.assetData.Name !== '图例') { + const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); + temp.deleteItem(itemLegend); + } + if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息 + // 删除楼层数据 + delete this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id]; + // 删除建筑数据 + delete this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id]; + } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案 + delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id]; + } else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试 + if (axShape.assetData.Tag === 1) { + // 删除楼层数据 + delete this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id]; + } else { + delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id]; + } + } + this.backgroundImage.removeChild(axShape); + } + }); + this.selection.clear(); + this.emit('canvasDataChanged'); + this.canvasData.isChange = true; + AxMessageSystem.send(EVENT_SELECTION_CHANGED); } } /** * 打招呼 */ sayHello() { - var _a; + let _a; if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - "\n %c 版本号 - " + this.VERSION + "\n", - 'color: #ff66a5; background: #000000; padding:5px 0;', - ]; - (_a = window.console).log.apply(_a, args); + const args = [ + '\n %c 版本号 - ' + this.VERSION + '\n', + 'color: #ff66a5; background: #000000; padding:5px 0;', + ]; + (_a = window.console).log.apply(_a, args); + } else if (window.console) { + window.console.log('\n %c 版本号 - ' + this.VERSION + '\n'); } - else if (window.console) { - window.console.log("\n %c 版本号 - " + this.VERSION + "\n"); - } -} + } /** * 页面初始化 */ @@ -212,77 +289,243 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } /** * - * @param event 鼠标滑动事件 - */ - public mouseWheelHandel(event) { - const delX = this.mousePosition.x - this.backgroundImage.position.x; - const delY = this.mousePosition.y - this.backgroundImage.position.y; - const pivot = this.backgroundImage.toLocal(this.mousePosition); - const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); - if (delta > 0) { - if (this.backgroundImage.scale.x >= 32) { - this.backgroundImage.scale.x = 32; - this.backgroundImage.scale.y = 32; - this.resizeItem(1/this.backgroundImage.scale.x) - return; - } - this.backgroundImage.pivot.set(pivot.x, pivot.y); + * @param event 鼠标滑动事件,改用ViewPort控制 + */ + // public mouseWheelHandel(event) { + // const delX = this.mousePosition.x - this.backgroundImage.position.x; + // const delY = this.mousePosition.y - this.backgroundImage.position.y; + // const pivot = this.backgroundImage.toLocal(this.mousePosition); + // const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); + // if (delta > 0) { + // if (this.backgroundImage.scale.x >= 32) { + // this.backgroundImage.scale.x = 32; + // this.backgroundImage.scale.y = 32; + // this.resizeItem(1 / this.backgroundImage.scale.x); + // return; + // } + // this.backgroundImage.pivot.set(pivot.x, pivot.y); - this.backgroundImage.scale.x += this.backgroundImage.scale.x * 0.1; - this.backgroundImage.scale.y += this.backgroundImage.scale.y * 0.1; + // this.backgroundImage.scale.x += this.backgroundImage.scale.x * 0.1; + // this.backgroundImage.scale.y += this.backgroundImage.scale.y * 0.1; - this.backgroundImage.position.x += delX; - this.backgroundImage.position.y += delY; - } else if (delta < 0) { - if (this.backgroundImage.scale.x <= 0.1) { - this.backgroundImage.scale.x = 0.1; - this.backgroundImage.scale.y = 0.1; - this.resizeItem(1/this.backgroundImage.scale.x) - return; - } - this.backgroundImage.pivot.set(pivot.x, pivot.y); + // this.backgroundImage.position.x += delX; + // this.backgroundImage.position.y += delY; + // } else if (delta < 0) { + // if (this.backgroundImage.scale.x <= 0.1) { + // this.backgroundImage.scale.x = 0.1; + // this.backgroundImage.scale.y = 0.1; + // this.resizeItem(1 / this.backgroundImage.scale.x); + // return; + // } + // this.backgroundImage.pivot.set(pivot.x, pivot.y); - this.backgroundImage.scale.x -= this.backgroundImage.scale.x * 0.1; - this.backgroundImage.scale.y -= this.backgroundImage.scale.y * 0.1; + // this.backgroundImage.scale.x -= this.backgroundImage.scale.x * 0.1; + // this.backgroundImage.scale.y -= this.backgroundImage.scale.y * 0.1; - this.backgroundImage.position.x += delX; - this.backgroundImage.position.y += delY; - } - this.resizeItem(1/this.backgroundImage.scale.x) - } + // this.backgroundImage.position.x += delX; + // this.backgroundImage.position.y += delY; + // } + // this.resizeItem(1 / this.backgroundImage.scale.x); + // } // 重置图形缩放 - public resizeItem(size:number) { + public resizeItem(size: number) { this.backgroundImage.children.forEach(item => { if (item instanceof AxShape) { - item.setItemScale(size); - item.drawBorder(size); + item.setItemScale(size); + item.drawBorder(size); } }); } /** * - * @param icon 移动到选中车辆到屏幕中心点 - */ - public moveIconToScreenCenter(icon) { - if (icon.parent === this.backgroundImage && ( - icon.assetData.Type === 1 || - icon.assetData.Type === 2 || - icon.assetData.Type === 3 || - icon.assetData.Type === 4 - )) { - console.log(this.backgroundImage.position); - this.backgroundImage.pivot.set(icon.x, icon.y); - this.backgroundImage.position.set(771, 404); - clearTimeout(this.animationTime); - this.animation?.pause(); - this.animationIcon?.scale.set(1); - this.animation = this.animator.breathe(icon, 10, 10, 30, true, 0); - this.animationIcon = icon; - this.animationTime = setTimeout(() => { - this.animation?.pause(); - this.animationIcon?.scale.set(1); - }, 5000); + * @param icon 移动到选中车辆到屏幕中心点，改用Viewport控制 + */ + // public moveIconToScreenCenter(icon) { + // if (icon.parent === this.backgroundImage && ( + // icon.assetData.Type === 1 || + // icon.assetData.Type === 2 || + // icon.assetData.Type === 3 || + // icon.assetData.Type === 4 + // )) { + // this.backgroundImage.pivot.set(icon.x, icon.y); + // this.backgroundImage.position.set(771, 404); + // clearTimeout(this.animationTime); + // this.animation?.pause(); + // this.animationIcon?.scale.set(1); + // this.animation = this.animator.breathe(icon, 10, 10, 30, true, 0); + // this.animationIcon = icon; + // this.animationTime = setTimeout(() => { + // this.animation?.pause(); + // this.animationIcon?.scale.set(1); + // }, 5000); + // } + // } + + + /** + * 创建2D相机 + */ + private createViewport(): void { + var gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1); + this.camera2D = new Viewport({ + screenWidth: this.app.view.width, + screenHeight: this.app.view.height, + worldWidth: gridSize, + worldHeight: gridSize, + interaction: this.app.renderer.plugins.interaction, + }); + this.camera2D.pivot.set(0.5); + this.camera2D.position = new PIXI.Point(0, 0); + this.app.stage.addChild(this.camera2D); + + this.camera2D + .clamp({ + left: -gridSize / 2, + right: gridSize / 2, + top: -gridSize / 2, + bottom: gridSize / 2, + }) + .drag() + .pinch() + .wheel() + .clampZoom({ + minScale: 0.12, + maxScale: 16, + }) + .decelerate(); + + this.camera2D.on('wheel', event => { + this.updateCamera2D(); + }); + + this.camera2D.on('pointerdown', event => { + if (this.isCtrlKeyClicked === true + && event.data.button === 0) { + this.rectToolGraphics.visible = true; + this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); + this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); + } + }); + this.camera2D.on('pointerup', event => { + if (this.isCtrlKeyClicked === true) { + this.rectToolGraphics.visible = false; + const shapes: AxShape[] = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape + && item instanceof AxPreviewImageShape === false) { + // 判断2个矩形是否相交 + const rect1 = this.rectToolGraphics.getBounds(); + const rect2 = item.getBounds(); + if (this.isOverlap(rect1, rect2) && item.interactive) { + shapes.push(item); + } + } + }); + this.rectToolGraphics.clear(); + this.selectAll(shapes); + } + }); + this.camera2D.on('pointerupoutside', event => { + if (this.isCtrlKeyClicked === true) { + this.rectToolGraphics.visible = false; + const shapes: AxShape[] = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape + && item instanceof AxPreviewImageShape === false) { + // 判断2个矩形是否相交 + const rect1 = this.rectToolGraphics.getBounds(); + const rect2 = item.getBounds(); + if (this.isOverlap(rect1, rect2) && item.interactive) { + shapes.push(item); + } + } + }); + this.rectToolGraphics.clear(); + this.selectAll(shapes); + } + }); + this.camera2D.on('pointermove', event => { + if (this.isCtrlKeyClicked === true + && this.rectToolGraphics.visible === true) { + this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); + + const init = this.initialScreenMousePos; + const final = this.finalScreenMousePos; + + this.rectToolGraphics.clear(); + this.rectToolGraphics.lineStyle(1 / this.camera2D.scale.x, 0x00ff00, 1); + this.rectToolGraphics.beginFill(0xccccf2, 0.25); + if (final.x > init.x && final.y > init.y) { + this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y); + } else if (final.x > init.x && final.y < init.y) { + this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y); + } else if (final.x < init.x && final.y > init.y) { + this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y); + } else if (final.x < init.x && final.y < init.y) { + this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y); + } + this.rectToolGraphics.endFill(); + } + }); + // 右键事件 + this.camera2D.on('rightclick', event => { + event.stopPropagation(); + this.deselectAll(); + this.setPaintMode(PaintMode.endPaint); + }); + + } + /** + * 更新2D相机 + */ + private updateCamera2D() { + this.grid2D.updateGrid(); + this.resizeItem(1 / this.camera2D.scale.x); + } + /** + * 重置相机 + */ + public resetCamera2D() { + this.camera2D.scale.set(1); + this.camera2D.x = (this.app.view.width - this.backgroundImage.width) / 2; + this.camera2D.y = (this.app.view.height - this.backgroundImage.height) / 2; + this.updateCamera2D(); + } + /** + * 缩放适应 + */ + public zoomFit() { + const imageWidth = this.backgroundImage.width; + const imageHeight = this.backgroundImage.height; + const appWidth = this.app.view.width - 470; + const appHeight = this.app.view.height; + const wScale = appWidth / imageWidth; + const hScale = appHeight / imageHeight; + let scale = wScale < hScale ? wScale : hScale; + + if (scale < 0.12) { + scale = 0.12; + } + if (scale > 16) { + scale = 16; + } + this.camera2D.scale.set(scale); + if (wScale < hScale) { + this.camera2D.x = 470 / 2; + this.camera2D.y = (appHeight - (imageHeight * this.camera2D.scale.y)) / 2; + } else { + this.camera2D.x = 470 / 2 + (appWidth - (imageWidth * this.camera2D.scale.x)) / 2; + this.camera2D.y = 0; } + this.updateCamera2D(); + } + /** + * 创建2D网格 + */ + private createGrid2D(): void { + this.grid2D = new Grid2D(this.camera2D, null); + + this.camera2D.addChild(this.grid2D); } /** * 创建画布 @@ -294,12 +537,16 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV antialias: true, transparent: false, resolution: 1, - backgroundColor: 0xE9FAFF + backgroundColor: 0xE9EAEA }); this.content.nativeElement.appendChild(this.app.view); this.app.view.style.border = '1px dashed blue'; this.animator = new Charm(PIXI); + + this.createViewport(); + this.createGrid2D(); this.createBackgroundImage(); + this.app.ticker.add((delta) => { this.animator.update(); this.mousePosition = this.app.renderer.plugins.interaction.mouse.global; @@ -313,48 +560,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position); this.refreshPreviewPoint(); } - /** - * 显示框选 - */ - if (this.rectToolGraphics.visible === true) { - - const init = this.initialScreenMousePos; - const final = this.finalScreenMousePos; - - this.rectToolGraphics.clear(); - this.rectToolGraphics.lineStyle(2, 0x00ff00, 1); - this.rectToolGraphics.beginFill(0xccccf2, 0.25); - if (final.x > init.x && final.y > init.y) { - this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y); - } else if (final.x > init.x && final.y < init.y) { - this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y); - } else if (final.x < init.x && final.y > init.y) { - this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y); - } else if (final.x < init.x && final.y < init.y) { - this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y); - } - this.rectToolGraphics.endFill(); - } - }); - /** - * 选中事件 - */ - this.on('select', (axShape:AxShape)=> { - axShape.showBorder(); - axShape.setPointVisiable(this.allowEdit); - }); - /** - * 取消选中事件 - */ - this.on('deselect', (axShape:AxShape)=> { - axShape.hideBorder(); - axShape.setPointVisiable(false); }); /** * 创建图标事件（数据处理） */ this.on('createIcon', (axShape: AxShape) => { - console.log("新增图标："+axShape.assetData.Name); if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息 // 添加楼层数据 this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData; @@ -366,8 +576,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.canvasData.selectPanelPoint.Data = new FloorNodeData(); } this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id] = axShape.assetData; - } - else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试 + } else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试 if (axShape.assetData.Tag === 1) { this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData; } else { @@ -378,52 +587,16 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id] = axShape.assetData; } } - var temp = this.backgroundImage.getChildByName("图例") as AxLegend; - if ( temp !== undefined - && temp !== null) { - var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); + const temp = this.backgroundImage.getChildByName('图例') as AxLegend; + if (temp !== undefined + && temp !== null + && axShape.assetData.Name !== '图例') { + const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); temp.addItem(itemLegend); } this.emit('canvasDataChanged'); this.canvasData.isChange = true; - }); - /** - * 删除图标事件(数据处理) - */ - this.on('deleteIcon', (axShape:AxShape)=>{ - // 删除图例对象 - var temp = this.backgroundImage.getChildByName("图例") as AxLegend; - if ( temp !== undefined - && temp !== null) { - var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); - temp.deleteItem(itemLegend); - } - - - if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息 - // 删除楼层数据 - delete this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id]; - // 删除建筑数据 - delete this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id]; - } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案 - delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id]; - delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id]; - delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id]; - } - else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试 - if (axShape.assetData.Tag === 1) { - // 删除楼层数据 - delete this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id]; - } else { - delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id]; - delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id]; - delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id]; - } - - } - this.backgroundImage.removeChild(axShape); - this.emit('canvasDataChanged'); - this.canvasData.isChange = true; + this.updateCamera2D(); }); } /** @@ -456,7 +629,6 @@ 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); if (icon instanceof AxImageShape) { icon.refresh(); } else if (icon instanceof MultipointIcon) { @@ -476,7 +648,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public setIconScale(value: number): void { this.backgroundImage.children.forEach(item => { if (item instanceof AxImageShape) { - console.log(item.image.scale); item.image.scale.set(value); } else if (item instanceof MultipointIcon) { @@ -485,46 +656,38 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } }); } - /** - * 设置高亮 - */ - public setHighlight(ids: string[]): void { - this.selection.deselectAll(); - ids.forEach(item => { - let obj = this.backgroundImage.getChildByName(item); - if (obj === null) { - obj = this.app.stage.getChildByName(item); - } - this.selection.select(obj); - }); - } /** * 创建楼层图形 */ public createFloorShape(floorData: any) { - if (floorData === undefined || floorData === null) return; + if (floorData === undefined || floorData === null) { return; } Object.keys(floorData).forEach((key) => { switch (floorData[key].InteractiveMode) { case 0: const singleIcon = new AxImageShape(floorData[key], this); - singleIcon.moveable = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode; + singleIcon.allowEdit = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode; break; case 1: const icon = new MultipointIcon(floorData[key], this); + icon.allowEdit = this.allowEdit && this.canvasData.gameMode === icon.assetData.GameMode; break; case 2: const polygonIcon = new PolygonIcon(floorData[key], this); + polygonIcon.allowEdit = this.allowEdit && this.canvasData.gameMode === polygonIcon.assetData.GameMode; break; case 3: if (floorData[key].Name === '水带') { - const distance = new AxArrowConnector(floorData[key], this, false, true); - } else if(floorData[key].Name === '距离'){ + const waterLine = new AxArrowConnector(floorData[key], this, false, true); + waterLine.allowEdit = this.allowEdit && this.canvasData.gameMode === waterLine.assetData.GameMode; + } else if (floorData[key].Name === '距离') { const distance = new AxArrowConnector(floorData[key], this, true, true); - }else if(floorData[key].Name === '普通墙' || floorData[key].Name === '承重墙'){ + distance.allowEdit = this.allowEdit && this.canvasData.gameMode === distance.assetData.GameMode; + } else if (floorData[key].Name === '普通墙' || floorData[key].Name === '承重墙') { const wall = new AxArrowConnector(floorData[key], this, false, false); + wall.allowEdit = this.allowEdit && this.canvasData.gameMode === wall.assetData.GameMode; } break; - } + } }); // this.emit('backgroundScale', this.backgroundImage.scale.x); } @@ -534,27 +697,29 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public createNodeShape(nodeData: any) { if (nodeData !== undefined && nodeData !== null) { Object.keys(nodeData).forEach((key) => { - if (nodeData[key] === undefined || nodeData[key] === null) { return;} + if (nodeData[key] === undefined || nodeData[key] === null) { return; } Object.keys(nodeData[key]).forEach((tempKey) => { switch (nodeData[key][tempKey].InteractiveMode) { case 0: const singleIcon = new AxImageShape(nodeData[key][tempKey], this); - singleIcon.moveable = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode; + singleIcon.allowEdit = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode; break; case 1: - const icon = new MultipointIcon(nodeData[key][tempKey], this); - break; + const icon = new MultipointIcon(nodeData[key][tempKey], this); + icon.allowEdit = this.allowEdit && this.canvasData.gameMode === icon.assetData.GameMode; + break; case 2: const polygonIcon = new PolygonIcon(nodeData[key][tempKey], this); + polygonIcon.allowEdit = this.allowEdit && this.canvasData.gameMode === polygonIcon.assetData.GameMode; break; case 3: - const pipeline = new AxArrowConnector(nodeData[key][tempKey], this,false,true); + const pipeline = new AxArrowConnector(nodeData[key][tempKey], this, false, true); + pipeline.allowEdit = this.allowEdit && this.canvasData.gameMode === pipeline.assetData.GameMode; break; - } + } }); }); } - // this.emit('backgroundScale', this.backgroundImage.scale.x); } /** * 创建确认绘制结束按钮 @@ -563,7 +728,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.enterPaintEndButton.width = 60; this.enterPaintEndButton.height = 60; this.enterPaintEndButton.anchor.set(0.5); - this.enterPaintEndButton.position = new PIXI.Point(0, 0); + this.enterPaintEndButton.position = new PIXI.Point(0, 0); this.enterPaintEndButton.interactive = true; this.enterPaintEndButton.buttonMode = true; this.enterPaintEndButton @@ -578,37 +743,16 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 创建背景图 */ - public createBackgroundImage(){ - this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png') + public createBackgroundImage() { + this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png'); this.backgroundImage.anchor.set(0.5); - // this.backgroundImage.x = this.app.view.width / 2; - // this.backgroundImage.y = this.app.view.height / 2; this.backgroundImage.interactive = true; this.backgroundImage.name = 'background'; - // this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle; - // const imageWidth = 665; - // const imageHeight = 530; - // const appWidth = this.app.view.width - 470; - // const appHeight = this.app.view.height; - - // const wScale = appWidth / imageWidth; - // const hScale = appHeight / imageHeight; - - // const scale = wScale < hScale - // ? wScale - // : hScale; - // this.backgroundImage.scale.set(scale); this.backgroundImage.sortableChildren = true; this.backgroundImage .on('pointerdown', event => { - if (event.data.button !== 0) return; - if (!event.currentTarget.dragging && this.selection.isMultiselection === false) { - this.selection.deselectAll(); - event.currentTarget.data = event.data; - event.currentTarget.dragging = true; - event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); - event.currentTarget.dragPoint.x -= event.currentTarget.x; - event.currentTarget.dragPoint.y -= event.currentTarget.y; + if (event.data.button !== 0) { return; } + if (this.isCtrlKeyClicked === false) { switch (this.paintMode) { case PaintMode.endPaint: break; @@ -620,7 +764,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV list.push(property); }); - const assetData = { + const assetData = { TemplateId: this.canvasData.selectTemplateData.id, CanConnect: this.canvasData.selectTemplateData.canConnect, Pipelines: new Array(), @@ -631,19 +775,19 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV FillMode: this.canvasData.selectTemplateData.fillMode, FireElementId: this.canvasData.selectTemplateData.fireElementId, FixedSize: this.canvasData.selectTemplateData.fixedSize, - Height : 32, - Width : 32, + Height: 32, + Width: 32, Id: ObjectID.default.generate(), ImageUrl: this.canvasData.selectTemplateData.imageUrl, InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, - MultiPoint : null, + MultiPoint: null, Point: new PIXI.Point(this.previewImage.x, this.previewImage.y), - Name : this.canvasData.selectTemplateData.name, + Name: this.canvasData.selectTemplateData.name, PropertyInfos: list, - Border : this.canvasData.selectTemplateData.border, - DrawMode : this.canvasData.selectTemplateData.drawMode, - Thickness : this.canvasData.selectTemplateData.thickness, - IsFromBuilding : this.canvasData.selectTemplateData.isFromBuilding, + Border: this.canvasData.selectTemplateData.border, + DrawMode: this.canvasData.selectTemplateData.drawMode, + Thickness: this.canvasData.selectTemplateData.thickness, + IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding, GameMode: this.canvasData.gameMode, Tag: this.canvasData.selectTemplateData.tag }; @@ -653,8 +797,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV break; case PaintMode.lineIcon: this.previewLineSegment.visible = true; - this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); - this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); + + var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + if (this.isDrawVerticalLine && this.paintPoints.length !== 0) { + // 起点距离终点水平距离 + const dh = Math.abs(point.x - this.currentClickPoint.x); + // 起点距离终点垂直距离 + const dv = Math.abs(point.y - this.currentClickPoint.y); + if (dh >= dv) { + // 绘制水平线 + point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y); + + } else { + // 绘制垂直线 + point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y); + } + this.currentClickPoint.position = new PIXI.Point(point.x, point.y); + } else { + this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + } + // 添加数据 + this.paintPoints.push(point); if (this.paintPoints.length >= 2) { this.enterPaintEndButton.position = this.circleShadow.position; @@ -711,8 +874,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV break; case PaintMode.polygonIcon: this.previewLineSegment.visible = true; - this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); - this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); + // this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); + var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + if (this.isDrawVerticalLine && this.paintPoints.length !== 0) { + // 起点距离终点水平距离 + const dh = Math.abs(point.x - this.currentClickPoint.x); + // 起点距离终点垂直距离 + const dv = Math.abs(point.y - this.currentClickPoint.y); + if (dh >= dv) { + // 绘制水平线 + point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y); + + } else { + // 绘制垂直线 + point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y); + } + this.currentClickPoint.position = new PIXI.Point(point.x, point.y); + } else { + this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + } + // 添加数据 + this.paintPoints.push(point); if (this.paintPoints.length === 1) { this.enterPaintEndButton.position = this.circleShadow.position; } else if (this.paintPoints.length >= 3) { @@ -735,133 +918,119 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // this.paintingIcon = new PolygonIcon(this.paintPoints, this); break; case PaintMode.Pipeline: - if (this.canvasData.selectTemplateData.name === '水带') { - if (this.paintingShape !== null) { - this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); - this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); - this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints)); - this.paintingShape.refresh(); + // if (this.canvasData.selectTemplateData.name === '水带-------') { + // if (this.paintingShape !== null) { + // this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); + // this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints)); + // this.paintingShape.refresh(); + // } + // } else { + this.previewLineSegment.visible = true; + this.enterPaintEndButton.position = this.circleShadow.position; + this.enterPaintEndButton.visible = true; + this.enterPaintEndButton.zIndex = this.backgroundImage.children.length; + // this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); + var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + if (this.isDrawVerticalLine && this.paintPoints.length !== 0) { + // 起点距离终点水平距离 + const dh = Math.abs(point.x - this.currentClickPoint.x); + // 起点距离终点垂直距离 + const dv = Math.abs(point.y - this.currentClickPoint.y); + if (dh >= dv) { + // 绘制水平线 + point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y); + + } else { + // 绘制垂直线 + point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y); } + this.currentClickPoint.position = new PIXI.Point(point.x, point.y); } else { - this.previewLineSegment.visible = true; - this.enterPaintEndButton.position = this.circleShadow.position; - this.enterPaintEndButton.visible = true; - this.enterPaintEndButton.zIndex = this.backgroundImage.children.length; this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); - this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); - if (this.paintPoints.length < 2) { - return; - } - if (this.paintingShape === null) { - const jsonObject = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos)); - const propertyList = []; - jsonObject.forEach(element => { - const property = new PropertyInfo(element); - propertyList.push(property); - }); - const assetData2 = { - 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: ObjectID.default.generate(), - ImageUrl: this.canvasData.selectTemplateData.imageUrl, - InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, - MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)), - 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: this.canvasData.gameMode, - Tag: this.canvasData.selectTemplateData.tag - }; - if (this.canvasData.selectTemplateData.name === '距离') { - this.paintingShape = new AxArrowConnector(assetData2, this,true,true); - } else if (this.canvasData.selectTemplateData.name === '普通墙' || this.canvasData.selectTemplateData.name === '承重墙') { - this.paintingShape = new AxArrowConnector(assetData2, this,false,false); - } - } else { - this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints)); - this.paintingShape.redraw(); + } + // 添加数据 + this.paintPoints.push(point); + if (this.paintPoints.length < 2) { + return; + } + if (this.paintingShape === null) { + const jsonObject = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos)); + const propertyList = []; + jsonObject.forEach(element => { + const property = new PropertyInfo(element); + propertyList.push(property); + }); + const assetData2 = { + 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: ObjectID.default.generate(), + ImageUrl: this.canvasData.selectTemplateData.imageUrl, + InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, + MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)), + 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: this.canvasData.gameMode, + Tag: this.canvasData.selectTemplateData.tag + }; + if (this.canvasData.selectTemplateData.name === '距离') { + this.paintingShape = new AxArrowConnector(assetData2, this, true, true); + } else if (this.canvasData.selectTemplateData.name === '普通墙' || this.canvasData.selectTemplateData.name === '承重墙') { + this.paintingShape = new AxArrowConnector(assetData2, this, false, false); + } else if (this.canvasData.selectTemplateData.name === '水带') { + this.paintingShape = new AxArrowConnector(assetData2, this, false, true); } + } else { + this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints)); + this.paintingShape.redraw(); } + // } // this.emit('backgroundScale', this.backgroundImage.scale.x); break; } - } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) { - this.rectToolGraphics.visible = true; - event.currentTarget.dragging = true; - this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); - this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); } + // else if (this.isCtrlKeyClicked === true) { + // this.rectToolGraphics.visible = true; + // this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); + // this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); + // } }) .on('pointerup', event => { - if (event.currentTarget.dragging) { - event.currentTarget.dragging = false; - event.currentTarget.data = null; - } - if (this.rectToolGraphics.visible === true) { - this.backgroundImage.children.forEach(item => { - if ( item instanceof AxImageShape - || item instanceof MultipointIcon - || item instanceof PolygonIcon - || item instanceof AxArrowConnector) { - // 判断2个矩形是否相交 - const rect1 = this.rectToolGraphics.getBounds(); - const rect2 = item.getBounds(); - if (this.isOverlap(rect1, rect2)) { - this.selection.select(item); - } - } - }); - this.rectToolGraphics.clear(); - this.rectToolGraphics.visible = false; - } + }) .on('pointerupoutside', event => { - if (event.currentTarget.dragging) { - event.currentTarget.dragging = false; - event.currentTarget.data = null; - } + }) .on('pointermove', event => { - if (event.currentTarget.dragging && this.selection.isMultiselection === false) { - const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); - event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x; - event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y; - } else if (event.currentTarget.dragging && this.selection.isMultiselection === true) { - if (this.rectToolGraphics.visible === true) { - this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); - } - } - }) - .on('rightclick', event => { - event.stopPropagation(); - this.selection.deselectAll(); - this.setPaintMode(PaintMode.endPaint); + }) .on('pointerover', (event) => { if (this.previewImage !== null - && this.paintMode === PaintMode.singlePointIcon) { + && this.paintMode === PaintMode.singlePointIcon) { this.previewImage.visible = true; } }) .on('pointerout', (event) => { if (this.previewImage !== null - && this.paintMode === PaintMode.singlePointIcon) { + && this.paintMode === PaintMode.singlePointIcon) { this.previewImage.visible = false; } }); - this.app.stage.addChild(this.backgroundImage); + this.camera2D.addChild(this.backgroundImage); this.createPreviewImage(); this.createPreviewLineSegment(); this.createCircleShadow(); @@ -869,121 +1038,210 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.addChild(this.paintingLine); } - public isOverlap(rect1, rect2):boolean { - const l1 = { x: rect1.x, y: rect1.y } - const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height } - const l2 = { x: rect2.x, y: rect2.y } - const r2 = { x: rect2.x + rect2.width, y: rect2.y + rect2.height } + /** + * 判断矩形一是否包含矩形二 + * @param rect1 矩形一 + * @param rect2 矩形二 + */ + public isOverlap(rect1, rect2): boolean { + const l1 = { x: rect1.x, y: rect1.y }; + const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height }; + const l2 = { x: rect2.x, y: rect2.y }; + const r2 = { x: rect2.x + rect2.width, y: rect2.y + rect2.height }; if ( l1.x > r2.x || l2.x > r1.x || l1.y > r2.y || l2.y > r1.y - ) return false - return true + ) { return false; } + return true; } /** * 刷新背景图 */ - public async refreshBackgroundImage(imageUrl:string = this.canvasData.selectStorey.imageUrl,imageAngle:number = this.canvasData.selectStorey.imageAngle): Promise { - if (imageUrl === undefined || imageUrl === null || imageUrl === "") { - this.backgroundImage.visible = false; + public async refreshBackgroundImage( + imageUrl: string = this.canvasData.selectStorey.imageUrl, + imageAngle: number = this.canvasData.selectStorey.imageAngle, + imageWidth: number = this.canvasData.selectStorey.imageWidth, + imageHeight: number = this.canvasData.selectStorey.imageHeight, + ): Promise { + if (imageAngle === undefined || imageAngle === null) { + imageAngle = 0; + } + this.backgroundImage.scale.set(1); + // this.backgroundImage.pivot.set(0); + if (imageUrl === undefined || imageUrl === null || imageUrl === '') { + this.backgroundImage.texture = this.backgroundTexture; } else { - this.backgroundImage.visible = false; - this.backgroundImage.scale.set(1); - this.backgroundImage.pivot.set(0); - this.backgroundImage.x = this.app.view.width / 2; - this.backgroundImage.y = this.app.view.height / 2; - this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); - this.backgroundImage.angle = imageAngle; - // 等待图片加载完成 - let imageWidth = this.backgroundImage.texture.width; - let imageHeight = this.backgroundImage.texture.height; - let appWidth = this.app.view.width - 470; - let appHeight = this.app.view.height; - let wScale = appWidth / imageWidth; - let hScale = appHeight / imageHeight; - let scale = wScale < hScale ? wScale : hScale; - // 设置图片缩放 - this.backgroundImage.scale.set(scale); - this.backgroundImage.visible = true; - this.backgroundImage.children.forEach((item) => { - if (item instanceof AxShape) { - item.refresh(); - } - }) + // this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); + if (imageWidth !== undefined + && imageWidth !== null + && imageWidth !== 0 + && imageHeight !== undefined + && imageHeight !== null + && imageHeight !== 0) { + // console.log(imageWidth, imageHeight); + // this.backgroundImage.width = imageWidth; + // this.backgroundImage.height = imageHeight; + this.backgroundImage.texture = + await PIXI.Texture.fromURL(imageUrl + '?x-oss-process=image/resize,m_fixed,h_' + imageHeight + ',w_' + imageWidth); // 图片处理 + } else { + // this.backgroundImage.width = this.backgroundImage.texture.width; + // this.backgroundImage.height = this.backgroundImage.texture.height; + this.backgroundImage.texture = + await PIXI.Texture.fromURL(imageUrl); // 请求原图 + } } + + this.backgroundImage.angle = imageAngle; + + // if (imageWidth !== undefined + // && imageWidth !== null + // && imageWidth !== 0 + // && imageHeight !== undefined + // && imageHeight !== null + // && imageHeight !== 0) { + // console.log(imageWidth, imageHeight); + // this.backgroundImage.width = imageWidth; + // this.backgroundImage.height = imageHeight; + // } else { + // this.backgroundImage.width = this.backgroundImage.texture.width; + // this.backgroundImage.height = this.backgroundImage.texture.height; + // } + + this.backgroundImage.x = this.backgroundImage.width / 2; + this.backgroundImage.y = this.backgroundImage.height / 2; + + this.resetCamera2D(); } /** * 刷新 - * @param imageUrl - * @param imageAngle + * @param imageUrl + * @param imageAngle */ - public async refresh(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise { - await this.refreshBackgroundImage(); - + public async refresh(): Promise { + await this.refreshBackgroundImage(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle); // 清空所有图形 - this.selection.deselectAll(); - let itemList = []; - this.backgroundImage.children.forEach(item => { - if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) { - itemList.push(item.name); + this.deselectAll(); + const itemList = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { + itemList.push(item.name); } }); - itemList.forEach(item => { + itemList.forEach(item => { this.backgroundImage.getChildByName(item).destroy(); // let child = this.backgroundImage.getChildByName(item); // this.backgroundImage.removeChild(child); - }) - //加载当前数据 + }); + // 加载当前数据 this.createFloorShape(this.canvasData.originaleveryStoreyData.data); // 创建处置预案图形 this.createNodeShape(this.canvasData.selectPanelPoint.Data); this.createAxLegend(); + if (this.canvasData.gameMode == GameMode.Assignment) { + this.setLegendVisible(false); + } + this.updateCamera2D(); + } + /** + * 加载无关联信息处置预案 + * @data 处置预案数据 + */ + public async loadNoRelevantInformationDisposalPlan(data: DisposalNodeData): Promise { + await this.refreshBackgroundImage(data.BackgroundImageUrl, data.BackgroundImageAngle); + // 清空所有图形 + this.deselectAll(); + const itemList = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { + itemList.push(item.name); + } + }); + + itemList.forEach(item => { + this.backgroundImage.getChildByName(item).destroy(); + }); + // 创建处置预案图形 + this.createNodeShape(this.canvasData.selectPanelPoint.Data); + + this.updateCamera2D(); } /** * 创建安信图例 */ public createAxLegend() { const tempAssetData = { - Id: "图例",//ObjectID.default.generate() - Color: "#066EED80", + Id: '图例', + Name: '图例', + Color: '#066EED80', + TemplateId: null, + FloorId: this.canvasData.selectStorey.id, + Angle: 0, + Enabled: true, + FillMode: null, + FireElementId: null, + FixedSize: null, + Height: 32, + Width: 32, + ImageUrl: null, + InteractiveMode: null, + MultiPoint: null, + Point: new PIXI.Point(0, 0), + Border: null, + DrawMode: null, + Thickness: null, + IsFromBuilding: null, + GameMode: this.canvasData.gameMode, PropertyInfos: [ { - Tag : '', - Order : 0, - Enabled : true, - Visible : true, - Required : false, - RuleName : "", - RuleValue : "", - PhysicalUnit : "", - PropertyName : "列", - PropertyType : 2, - PropertyValue : 2, + Tag: '', + Order: 0, + Enabled: true, + Visible: true, + Required: false, + RuleName: '', + RuleValue: '', + PhysicalUnit: '', + PropertyName: '列', + PropertyType: 2, + PropertyValue: '2', }, - ] + ], + Scale: 1, + PivotX: 0, + PivotY: 0, }; - let shapeMap: Map = new Map(); - - for (let item in this.canvasData.originaleveryStoreyData.data) { + const shapeMap: Map = new Map(); + let data = null; + for (const item in this.canvasData.originaleveryStoreyData.data) { if (shapeMap.has(this.canvasData.originaleveryStoreyData.data[item].Name)) { shapeMap.get(this.canvasData.originaleveryStoreyData.data[item].Name).Count++; } else { - shapeMap.set(this.canvasData.originaleveryStoreyData.data[item].Name, new Legend( - this.canvasData.originaleveryStoreyData.data[item].Name, - this.canvasData.originaleveryStoreyData.data[item].ImageUrl, - 1 - )); + if (item !== '图例') { + shapeMap.set(this.canvasData.originaleveryStoreyData.data[item].Name, new Legend( + this.canvasData.originaleveryStoreyData.data[item].Name, + this.canvasData.originaleveryStoreyData.data[item].ImageUrl, + 1 + )); + } else { + data = this.canvasData.originaleveryStoreyData.data[item]; + } } } - var axLegend = new AxLegend(tempAssetData, this, shapeMap); - var rect = this.backgroundImage.getLocalBounds(); - var itemRect = axLegend.getLocalBounds(); - axLegend.x = rect.right - itemRect.right; - axLegend.y = rect.bottom - itemRect.bottom; + if (data === null) { + const axLegend = new AxLegend(tempAssetData, this, shapeMap); + const rect = this.backgroundImage.getLocalBounds(); + const itemRect = axLegend.getLocalBounds(); + axLegend.x = rect.right - itemRect.right; + axLegend.y = rect.bottom - itemRect.bottom; + axLegend.assetData.Point = new PIXI.Point(axLegend.x, axLegend.y); + this.emit('createIcon', axLegend); + } else { + const axLegend = new AxLegend(data, this, shapeMap); + } } // /** // * 清空画布 @@ -1011,15 +1269,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 创建预览单点图标 */ private createPreviewImage(): void { - // if (this.previewSinglePointIcon === null) { - // this.previewSinglePointIcon = PIXI.Sprite.from(this.canvasData.selectTemplateData.imageUrl); - // this.previewSinglePointIcon.width = this.canvasData.selectTemplateData.width; - // this.previewSinglePointIcon.height = this.canvasData.selectTemplateData.height; - // this.previewSinglePointIcon.anchor.set(0.5); - // this.previewSinglePointIcon.interactive = false; - // this.backgroundImage.addChild(this.previewSinglePointIcon); - // this.previewSinglePointIcon.scale.set(1 / this.backgroundImage.scale.x); - // } this.previewImage = new AxPreviewImageShape(this); this.previewImage.visible = false; } @@ -1040,19 +1289,35 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * @param pointB 点B */ private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) { + const ps: PIXI.Point = pointA; + let pe: PIXI.Point = pointB; + if (this.isDrawVerticalLine) { + // 起点距离终点水平距离 + const dh = Math.abs(pointB.x - pointA.x); + // 起点距离终点垂直距离 + const dv = Math.abs(pointB.y - pointA.y); + if (dh >= dv) { + // 绘制水平线 + pe = new PIXI.Point(pointB.x, pointA.y); + + } else { + // 绘制垂直线 + pe = new PIXI.Point(pointA.x, pointB.y); + } + } + this.previewLineSegment.clear(); - this.previewLineSegment.lineStyle(1/this.backgroundImage.scale.x, 0x00ff00, 1); - this.previewLineSegment.moveTo(pointA.x, pointA.y); - this.previewLineSegment.lineTo(pointB.x, pointB.y ); + this.previewLineSegment.lineStyle(1 / this.backgroundImage.scale.x, 0x00ff00, 1); + // this.previewLineSegment.moveTo(pointA.y, pointA.y); + // this.previewLineSegment.lineTo(pointB.x, pointB.y); + this.previewLineSegment.moveTo(ps.x, ps.y); + this.previewLineSegment.lineTo(pe.x, pe.y); } /** * 创建半径图标影子 * @param x 半径 */ private createCircleShadow(): void { - // this.circleShadow.beginFill(0xFFCC5A); - // this.circleShadow.drawCircle(0, 0, 10); - // this.circleShadow.endFill(); this.circleShadow.visible = false; this.backgroundImage.addChild(this.circleShadow); } @@ -1062,24 +1327,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV private refreshPreviewPoint() { this.circleShadow.clear(); this.circleShadow.beginFill(0x00ff00); - this.circleShadow.drawCircle(0, 0, 5/this.backgroundImage.scale.x); + this.circleShadow.drawCircle(0, 0, 5 / this.backgroundImage.scale.x); this.circleShadow.endFill(); } - showConnectionPoint(b: boolean) { - this.backgroundImage?.children.forEach(item => { - if (item instanceof AxImageShape) { - if (item.assetData.CanConnect) { - item.showConnectionPoint(b); - } - } - }); - } /** * 开始绘制 */ public beginPaint() { - console.log(this.canvasData.selectTemplateData); - this.selection.deselectAll(); + this.deselectAll(); this.setPaintMode(PaintMode.endPaint); this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode); } @@ -1126,27 +1381,17 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.circleShadow.visible = true; break; case PaintMode.Pipeline: - if (this.canvasData.selectTemplateData.name==='水带') { - this.showConnectionPoint(true); - } else { - - } + break; case PaintMode.endPaint: - this.showConnectionPoint(false); if (this.previewImage !== null) { this.previewImage.visible = false; } // 重置组件状态 - if ( this.paintingIcon !== undefined + if (this.paintingIcon !== undefined && this.paintingIcon !== null) { this.backgroundImage.removeChild(this.paintingIcon); } - - // if (this.paintingShape !== undefined - // && this.paintingShape !== null) { - // this.backgroundImage.removeChild(this.paintingShape); - // } if (this.paintingShape !== null) { this.backgroundImage.removeChild(this.paintingShape); this.paintingShape = null; @@ -1180,7 +1425,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV private enterPaint(): void { this.previewLineSegment.visible = false; this.enterPaintEndButton.visible = false; - console.log(this.paintMode); switch (this.paintMode) { case PaintMode.singlePointIcon: break; @@ -1228,21 +1472,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } break; case PaintMode.Pipeline: - if (this.canvasData.selectTemplateData.name !== '水带') { - this.emit('createIcon', this.paintingShape); - this.paintingShape = null; - } + this.emit('createIcon', this.paintingShape); + this.paintingShape = null; break; } this.paintPoints.splice(0, this.paintPoints.length); - // this.emit('backgroundScale', this.backgroundImage.scale.x); } /** * 复制 */ public copy(): void { this.copyData = []; - this.selection.objects.forEach(item => { + this.selection.all().forEach(item => { const newData = JSON.parse(JSON.stringify(item.assetData)); this.copyData.push(newData); }); @@ -1251,42 +1492,45 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 粘贴 */ public paste(companyId: string, buildingId: string, floorId: string): void { - this.copyData.forEach(item => { - item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); - const newData = JSON.parse(JSON.stringify(item)); - newData.Id = ObjectID.default.generate(), - newData.CompanyId = companyId; - newData.BuildingId = buildingId; - newData.FloorId = floorId; - newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); - // if (newData.IsFromBuilding) { - // this.canvasData.originalcompanyBuildingData.data[newData.Id] = newData; - // } else { - this.canvasData.originaleveryStoreyData.data[newData.Id] = newData; - // } - switch (item.InteractiveMode) { - case PaintMode.singlePointIcon: - const singleIcon = new AxImageShape(newData, this); - break; - case PaintMode.lineIcon: - const lineIcon = new MultipointIcon(newData, this); - break; - case PaintMode.polygonIcon: - const polygonIcon = new PolygonIcon(newData, this); - break; - case PaintMode.Pipeline: - if (item.Name === '距离') { - const wall = new AxArrowConnector(newData, this,true,true); - } else if (item.Name === '普通墙' || item.Name === '承重墙') { - const wall = new AxArrowConnector(newData, this,false,false); - } - break; - } - this.selection.select(this.backgroundImage.getChildByName(newData.Id)); - }); - // this.emit('backgroundScale', this.backgroundImage.scale.x); + const ids: string[] = []; + if (this.copyData.length > 0) { + this.copyData.forEach(item => { + item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); + const newData = JSON.parse(JSON.stringify(item)); + newData.Id = ObjectID.default.generate(), + newData.CompanyId = companyId; + newData.BuildingId = buildingId; + newData.FloorId = floorId; + newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); + switch (item.InteractiveMode) { + case PaintMode.singlePointIcon: + const singleIcon = new AxImageShape(newData, this); + this.emit('createIcon', singleIcon); + break; + case PaintMode.lineIcon: + const lineIcon = new MultipointIcon(newData, this); + this.emit('createIcon', lineIcon); + break; + case PaintMode.polygonIcon: + const polygonIcon = new PolygonIcon(newData, this); + this.emit('createIcon', polygonIcon); + break; + case PaintMode.Pipeline: + if (item.Name === '距离') { + const wall = new AxArrowConnector(newData, this, true, true); + this.emit('createIcon', wall); + } else if (item.Name === '普通墙' || item.Name === '承重墙') { + const wall = new AxArrowConnector(newData, this, false, false); + this.emit('createIcon', wall); + } + break; + } + ids.push(newData.Id); + }); + this.setHighlight(ids); + } } - ////////////////////////////////////////////////////////////////////////通用///////////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////// 通用///////////////////////////////////////////////////////////////////////////// /** * * @param id 图标ID @@ -1297,28 +1541,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.getChildByName(item).visible = b; }); } - ////////////////////////////////////////////////////////////////////////采集平台加载逻辑/////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////// 采集平台加载逻辑/////////////////////////////////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////编制平台加载逻辑/////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////// 编制平台加载逻辑/////////////////////////////////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////考试系统加载逻辑/////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////// 考试系统加载逻辑/////////////////////////////////////////////////////////////////////// /** * 考生点击楼层 */ public async onExamineeClickFloor() { - await this.refreshBackgroundImage(); + await this.refreshBackgroundImage(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle); // 清空所有图形 - this.selection.deselectAll(); - let itemList = []; - this.backgroundImage.children.forEach(item => { - if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) { - itemList.push(item.name); + this.deselectAll(); + const itemList = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { + itemList.push(item.name); } }); - itemList.forEach(item => { + itemList.forEach(item => { this.backgroundImage.getChildByName(item).destroy(); - }) + }); // 创建楼层图形 this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data); // 创建楼层图形 @@ -1327,25 +1571,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.createNodeShape(this.canvasData.selectPanelPoint.Data); // 隐藏图标 this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); + + this.updateCamera2D(); } /** - * 考官点击楼层 + * 考官点击楼层-阅卷 */ public async onExaminerClickFloor() { - await this.refreshBackgroundImage(); + await this.refreshBackgroundImage(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle); // 清空所有图形 - this.selection.deselectAll(); - let itemList = []; - this.backgroundImage.children.forEach(item => { - if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) { - itemList.push(item.name); + this.deselectAll(); + const itemList = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { + itemList.push(item.name); } }); - itemList.forEach(item => { + itemList.forEach(item => { this.backgroundImage.getChildByName(item).destroy(); - }) + }); // 创建楼层图形 // this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data); // 创建楼层图形 @@ -1354,95 +1600,150 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.createNodeShape(this.canvasData.selectPanelPoint.Data); // 隐藏图标 this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); + + this.updateCamera2D(); } -} + /** + * 考官点击楼层-创建试卷 + */ + public async onExaminerClickFloor_CreateTestpaper() { + await this.refreshBackgroundImage(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle); + // 清空所有图形 + this.deselectAll(); + const itemList = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { + itemList.push(item.name); + } + }); -/** - * 选择器 - */ -export class Selection { - constructor(private workingArea: WorkingAreaComponent) {} - public objects: any[] = []; - public isMultiselection = false; + itemList.forEach(item => { + this.backgroundImage.getChildByName(item).destroy(); + }); + // 创建楼层图形 + this.createFloorShape(this.canvasData.originaleveryStoreyData.data); + // 创建处置预案图形 + this.createNodeShape(this.canvasData.selectPanelPoint.Data); + // 隐藏图标 + this.setNameVisible(false, 0); + + this.updateCamera2D(); + } + //////////////////////////////////////////////////////////////////// 选择逻辑 /** - * 返回选择器中是否包含对象 - * @param obj 对象 + * 清空选择，选择单个形状 + * @param shape 形状 */ - public contains(obj: any): boolean { - return this.objects.includes(obj); + public selectSingle(shape: AxShape) { + if (this.selection.first() !== null) { + this.selection.all().forEach(item => { + this.clearSelectEffect(item); + }); + this.selection.clear(); + } + this.selection.add(shape); + this.setSelectEffect(shape); + AxMessageSystem.send(EVENT_SELECTION_CHANGED); } /** - * 选定对象 - * @param obj 对象 + * 选择 + * @param shape 形状 */ - public select(obj: any) { - if (!this.contains(obj)) { - this.workingArea.emit('select', obj); - this.objects.push(obj); + public select(shape: AxShape) { + if (this.selection.first() !== null + && !this.isCtrlKeyClicked + && !this.selection.has(shape)) { + this.selection.all().forEach(item => { + this.clearSelectEffect(item); + }); + this.selection.clear(); } + this.selection.add(shape); + this.setSelectEffect(shape); + AxMessageSystem.send(EVENT_SELECTION_CHANGED); } /** - * 取消选定对象 - * @param obj 对象 + * 选择集合中的形状 + * @param shape 形状集合 */ - public deselect(obj: any) { - if (this.contains(obj)) { - this.workingArea.emit('deselect', obj); - const idx = this.objects.findIndex(x => x === obj); - this.objects.splice(idx, 1); + public selectAll(shape: AxShape[]) { + if (shape.length > 0) { + this.selection.addArray(shape); + this.selection.all().forEach(item => { + this.setSelectEffect(item); + }); + AxMessageSystem.send(EVENT_SELECTION_CHANGED); } } /** - * 选定或取消选定对象 - * @param obj 对象 + * 先清空再选择全部 + * @param shape 形状集合 */ - public selectOrDeselect(obj: any) { - if (this.contains(obj)) { - this.deselect(obj); - } else { - this.select(obj); + public selectAllWithClear(shape: AxShape[]) { + if (this.selection.first() !== null) { + this.selection.all().forEach(item => { + this.clearSelectEffect(item); + }); + this.selection.clear(); } + this.selection.addArray(shape); + this.selection.all().forEach(item => { + this.setSelectEffect(item); + }); + AxMessageSystem.send(EVENT_SELECTION_CHANGED); } /** - * 取消选定所有已选定对象 + * 选择集合中所有id的形状 + * @param ids 形状id集合 */ - public deselectAll() { - this.objects.forEach(item => { - this.workingArea.emit('deselect', item); + public setHighlight(ids: string[]): void { + const shapes: AxShape[] = []; + // 重新选择 + ids.forEach(item => { + const obj = this.backgroundImage.getChildByName(item); + shapes.push(obj as AxShape); }); - this.objects.splice(0, this.objects.length); + this.selectAllWithClear(shapes); } /** - * 取消选定所有对象后选定一个对象 - * @param obj 对象 + * 取消所有选择 */ - public selectOne(obj: any) { - if (this.isMultiselection) { - this.selectOrDeselect(obj); - } else { - this.deselectAll(); - this.select(obj); + public deselectAll() { + if (this.selection.first() !== null) { + this.selection.all().forEach(item => { + this.clearSelectEffect(item); + }); + this.selection.clear(); + AxMessageSystem.send(EVENT_SELECTION_CHANGED); } } /** - * 选定对象集合中所有对象 - * @param objects 对象集合 + * 设置选中效果 + * @param shape 形状 */ - public selectAll(objects: any[]) { - this.objects.forEach(item => { - this.select(item); - }); + public setSelectEffect(shape: AxShape) { + shape.hideBorder(); + shape.setPointVisiable(false); + shape.showBorder(); + shape.drawBorder(1 / this.backgroundImage.scale.x); + shape.setPointVisiable(this.allowEdit); + } + /** + * 设置形状选中效果 + * @param shape 形状 + */ + public clearSelectEffect(shape: AxShape) { + shape.hideBorder(); + shape.setPointVisiable(false); + } + //////////////////////////////////////////////////////////////////////////////////////////////// 图例 + /** + * 设置图例显示隐藏 + * @param b true 显示，false隐藏 + */ + public setLegendVisible(b: boolean): void { + const legend = this.backgroundImage.getChildByName('图例') as AxLegend; + legend.interactive = b; + legend.visible = b; } -} - - -/** - * 车辆类型 - */ -export enum Type { - 水源 = 0, - 举高喷射消防车 = 1, - 泡沫消防车 = 2, - 水罐消防车 = 3, - 压缩空气泡沫消防车 = 4 } diff --git a/src/assets/images/enterPaintButton.png b/src/assets/images/enterPaintButton.png index e6b99b7..e5abb92 100644 Binary files a/src/assets/images/enterPaintButton.png and b/src/assets/images/enterPaintButton.png differ
    身份证号{{element.name}}{{element.identityCard}}