陈鹏飞 4 years ago
parent
commit
6055a3684a
  1. 19
      src/app/ui/collection-tools/collection-tools.component.html
  2. 6
      src/app/ui/collection-tools/collection-tools.component.scss
  3. 20
      src/app/ui/collection-tools/collection-tools.component.ts
  4. 35
      src/app/ui/collection-tools/panel.scss
  5. 13
      src/app/ui/similar-plans/similar-plans.component.html
  6. 17
      src/app/ui/similar-plans/similar-plans.component.scss
  7. 9
      src/app/ui/similar-plans/similar-plans.component.ts
  8. 52
      src/app/working-area/working-area.component.ts

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

@ -160,6 +160,7 @@
<mat-icon (click)='foundPanel($event)'>add</mat-icon> <mat-icon (click)='foundPanel($event)'>add</mat-icon>
</label> </label>
</div> </div>
<div [hidden]="!togglePlane" > <div [hidden]="!togglePlane" >
<div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" [ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'> <div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" [ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>
<mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon> <mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>
@ -203,10 +204,13 @@
<!-- 素材库 --> <!-- 素材库 -->
<div id="materialBank" *ngIf="isEditPattern" [ngClass]="{'selectEditMode': pattern}" style="display: none;"> <div id="materialBank" *ngIf="isEditPattern" [ngClass]="{'selectEditMode': pattern}" style="display: none;">
<div class="planarGraphHeader" (click)='toggleMaterial()'> <!-- <div class="planarGraphHeader" (click)='toggleMaterial()'>
<mat-icon *ngIf="toggleMaterialBank">keyboard_arrow_up</mat-icon> <mat-icon *ngIf="toggleMaterialBank">keyboard_arrow_up</mat-icon>
<mat-icon *ngIf="!toggleMaterialBank">keyboard_arrow_down</mat-icon> <mat-icon *ngIf="!toggleMaterialBank">keyboard_arrow_down</mat-icon>
<label class="overflowText" style="font-weight: 550;">素材库</label> <label class="overflowText" style="font-weight: 550;">素材库</label>
</div> -->
<div class="planarGraphHeader">
<label class="overflowText">素材库</label>
</div> </div>
<div [hidden]="!toggleMaterialBank" [ngClass]="{'materialBankDIV': pattern}"> <div [hidden]="!toggleMaterialBank" [ngClass]="{'materialBankDIV': pattern}">
<mat-accordion *ngFor="let item of allLibrary" id="panelLibrary"> <mat-accordion *ngFor="let item of allLibrary" id="panelLibrary">
@ -232,7 +236,7 @@
<!-- 处置预案 --> <!-- 处置预案 -->
<div class="handlePlan"> <div class="handlePlan">
<div class="planarGraphHeader" (click)='toggleHandlePlan()'> <!-- <div class="planarGraphHeader" (click)='toggleHandlePlan()'>
<mat-icon *ngIf="toggleHandlePlans">keyboard_arrow_up</mat-icon> <mat-icon *ngIf="toggleHandlePlans">keyboard_arrow_up</mat-icon>
<mat-icon *ngIf="!toggleHandlePlans">keyboard_arrow_down</mat- icon> <mat-icon *ngIf="!toggleHandlePlans">keyboard_arrow_down</mat- icon>
<label class="overflowText" style="font-weight: 550;">处置预案</label> <label class="overflowText" style="font-weight: 550;">处置预案</label>
@ -240,6 +244,9 @@
<mat-icon style="color: #c2a40ce8;" title="计算差异" (click)='countValue($event)'>flash_on</mat-icon> <mat-icon style="color: #c2a40ce8;" title="计算差异" (click)='countValue($event)'>flash_on</mat-icon>
<mat-icon style="margin-left: 3px;" title="新建空节点" (click)='addPanelPoint($event,null,fireTreeData)'>add</mat-icon> <mat-icon style="margin-left: 3px;" title="新建空节点" (click)='addPanelPoint($event,null,fireTreeData)'>add</mat-icon>
</label> </label>
</div> -->
<div class="planarGraphHeader">
<label class="overflowText">处置预案</label>
</div> </div>
<div [hidden]="!toggleHandlePlans"> <div [hidden]="!toggleHandlePlans">
@ -249,12 +256,12 @@
<label title="{{node.name}}" class="textNode overflowText"> <label title="{{node.name}}" class="textNode overflowText">
{{node.name}} {{node.name}}
</label> </label>
<div class="planIconDiv"> <!-- <div class="planIconDiv">
<mat-icon *ngIf="!node.sitePlanId && !node.buildingAreaId" (click)='editPanelPoint($event,node)'>edit</mat-icon> <mat-icon *ngIf="!node.sitePlanId && !node.buildingAreaId" (click)='editPanelPoint($event,node)'>edit</mat-icon>
<mat-icon *ngIf="node.level<1" (click)='addPanelPoint($event,node,null)'>add</mat-icon> <mat-icon *ngIf="node.level<1" (click)='addPanelPoint($event,node,null)'>add</mat-icon>
<mat-icon *ngIf="!node.sitePlanId && !node.buildingAreaId" (click)='copyPanelPoint($event,node,fireTreeData)'>library_books</mat-icon> <mat-icon *ngIf="!node.sitePlanId && !node.buildingAreaId" (click)='copyPanelPoint($event,node,fireTreeData)'>library_books</mat-icon>
<mat-icon (click)='deletePanelPoint($event,node)'>delete_forever</mat-icon> <mat-icon (click)='deletePanelPoint($event,node)'>delete_forever</mat-icon>
</div> </div> -->
</mat-tree-node> </mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding cdkTreeNodePaddingIndent='5' id="terrNodePublic" (click)='selectanelPoint(node)' [ngClass]="{'selectanelPoint': selectDisposalNode==node.id}"> <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding cdkTreeNodePaddingIndent='5' id="terrNodePublic" (click)='selectanelPoint(node)' [ngClass]="{'selectanelPoint': selectDisposalNode==node.id}">
@ -264,12 +271,12 @@
<label title="{{node.name}}" class="textNode overflowText"> <label title="{{node.name}}" class="textNode overflowText">
{{node.name}} {{node.name}}
</label> </label>
<div class="planIconDiv"> <!-- <div class="planIconDiv">
<mat-icon *ngIf="!node.sitePlanId && !node.buildingAreaId" (click)='editPanelPoint($event,node)'>edit</mat-icon> <mat-icon *ngIf="!node.sitePlanId && !node.buildingAreaId" (click)='editPanelPoint($event,node)'>edit</mat-icon>
<mat-icon *ngIf="node.level<1" (click)='addPanelPoint($event,node,null)'>add</mat-icon> <mat-icon *ngIf="node.level<1" (click)='addPanelPoint($event,node,null)'>add</mat-icon>
<mat-icon *ngIf="!node.sitePlanId && !node.buildingAreaId" (click)='copyPanelPoint($event,node,fireTreeData)'>library_books</mat-icon> <mat-icon *ngIf="!node.sitePlanId && !node.buildingAreaId" (click)='copyPanelPoint($event,node,fireTreeData)'>library_books</mat-icon>
<mat-icon (click)='deletePanelPoint($event,node)'>delete_forever</mat-icon> <mat-icon (click)='deletePanelPoint($event,node)'>delete_forever</mat-icon>
</div> </div> -->
</mat-tree-node> </mat-tree-node>
</mat-tree> </mat-tree>

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

@ -216,7 +216,7 @@
flex-direction: column; flex-direction: column;
margin-left: 0px; margin-left: 0px;
transition: margin-left 0.5s; transition: margin-left 0.5s;
border: 1px solid #E6EAEE; border: 1px solid #30bbec;
left: 0; left: 0;
z-index: 111; z-index: 111;
.leftDragDiv{ .leftDragDiv{
@ -447,8 +447,8 @@ div:focus {
//没有图片时显示无图片背景图 //没有图片时显示无图片背景图
.noImgCss{ .noImgCss{
background: url(../../../assets/images/noImg.png) no-repeat center center; background: url(../../../assets/images/noImg.png) ;
background-size: 88% 100%;/*按比例缩放*/ background-size: 100% 100%;/*按比例缩放*/
} }
.input{ .input{
width: 18px; width: 18px;

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

@ -479,7 +479,7 @@ export class CollectionToolsComponent implements OnInit {
} }
ngOnInit(): void { ngOnInit(): void {
// this.canvas.setNameVisible(this.basicInfo,1)
let that = this let that = this
window.setTimeout(()=>{ window.setTimeout(()=>{
document.getElementById("functionalDomainContent").oncontextmenu = function (event) { document.getElementById("functionalDomainContent").oncontextmenu = function (event) {
@ -492,6 +492,7 @@ export class CollectionToolsComponent implements OnInit {
this.canvasData.getMessage().subscribe((message: any)=>{ this.canvasData.getMessage().subscribe((message: any)=>{
console.log(message);//send a message console.log(message);//send a message
}) })
} }
//右侧属性和消防要素切换 //右侧属性和消防要素切换
@ -1053,8 +1054,23 @@ export class CollectionToolsComponent implements OnInit {
     }      }
const nodes = this.treeControl.dataNodes;
const expandNodes = [];
nodes.forEach((item) => {
if(item.expandable && this.treeControl.isExpanded(item)){
expandNodes.push(item.id);
}
});
this.dataSource.data = [...this.dataSource.data] this.dataSource.data = [...this.dataSource.data]
this.treeControl.expandAll() let newNodes = this.treeControl.dataNodes;
newNodes = newNodes.filter(n => {
return expandNodes.indexOf(n.id) >= 0;
});
newNodes.forEach(item => {
this.treeControl.expand(item);
});
//canvas上的素材显隐 //canvas上的素材显隐
let iconVisibleArr:any = [] let iconVisibleArr:any = []

35
src/app/ui/collection-tools/panel.scss

@ -6,19 +6,17 @@
//平面图 素材库 公共样式 头部 //平面图 素材库 公共样式 头部
.planarGraphHeader{ .planarGraphHeader{
height: 35px; width: 100%;
min-height: 35px; text-align: center;
height: 40px;
line-height: 40px;
min-height: 40px;
cursor: pointer; cursor: pointer;
display: flex; text-align: center;
flex-direction: row; font-style: italic;
align-items: center; font-size: 20px;
padding: 0 24px; color: white;
border-radius: 5px; border-bottom:2px solid #accbf2;
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 15px;
font-weight: 400;
color: #000;
background: linear-gradient(to top,#cdced1,#FFF);
} }
//平面图头部字体图标样式 //平面图头部字体图标样式
.hover { .hover {
@ -191,7 +189,7 @@
font-size: 20px; font-size: 20px;
width: 20px; width: 20px;
height: 20px; height: 20px;
color: #666; color: white;
margin-right: 3px; margin-right: 3px;
} }
} }
@ -258,7 +256,7 @@
} }
//选中 处置节点时 //选中 处置节点时
.selectanelPoint { .selectanelPoint {
background-color: #F4C235; background-color: #0c2d44;
} }
@ -288,3 +286,12 @@
resize:none; resize:none;
} }
} }
.mat-tree{
background-color:transparent;
.mat-tree-node{
color: white;
}
.mat-tree-node:hover{
background-color: #0c2d44;
}
}

13
src/app/ui/similar-plans/similar-plans.component.html

@ -1,4 +1,8 @@
<!-- <div class="leisiTable"> <div style="width: 100%;height: 100%;position: relative;">
<div class="backBtn" *ngIf="isResponsePlans" (click)="back()">
返回
</div>
<div class="leisiTable" *ngIf="!isResponsePlans">
<table> <table>
<thead > <thead >
<td style="width:40%;">单位名称</td> <td style="width:40%;">单位名称</td>
@ -15,11 +19,12 @@
<td></td> <td></td>
<td style="color: #FFFFFF;">{{leisi.weizhi}}</td> <td style="color: #FFFFFF;">{{leisi.weizhi}}</td>
<td [ngClass]="{'tdyanse56':leisi.xiangjin>=50&&leisi.xiangjin<=60,'tdyanse78':leisi.xiangjin>60,'tdyanse':leisi.xiangjin<50}">{{leisi.xiangjin}}%</td> <td [ngClass]="{'tdyanse56':leisi.xiangjin>=50&&leisi.xiangjin<=60,'tdyanse78':leisi.xiangjin>60,'tdyanse':leisi.xiangjin<50}">{{leisi.xiangjin}}%</td>
<td style="color: #CC5D13;">查看详情</td> <td style="color: #CC5D13;cursor: pointer;" (click)="openDeatails()">查看详情</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> --> </div>
<div style="width: 100%;height: 100%;"> <div style="width: 100%;height: 100%;" *ngIf="isResponsePlans">
<app-collection-tools></app-collection-tools> <app-collection-tools></app-collection-tools>
</div> </div>
</div>

17
src/app/ui/similar-plans/similar-plans.component.scss

@ -33,3 +33,20 @@
.tdyanse{ .tdyanse{
color: #FFFFFF; color: #FFFFFF;
} }
.backBtn{
position: absolute;
right: 30px;
top: 8px;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
color: white;
cursor: pointer;
border: 1px solid #0E79A9;
border-radius: 5px;
z-index: 8999;
}
.backBtn:hover{
background-color: #0c4c69;
}

9
src/app/ui/similar-plans/similar-plans.component.ts

@ -29,7 +29,12 @@ export class SimilarPlansComponent implements OnInit {
{danweiName:"中油广西田东石油化工总厂有限公司",year:"",zhoahuo:"XXX",weizhi:"3-1#储罐",xiangjin:parseFloat("30%")} {danweiName:"中油广西田东石油化工总厂有限公司",year:"",zhoahuo:"XXX",weizhi:"3-1#储罐",xiangjin:parseFloat("30%")}
] ]
isResponsePlans = false //默认是否是处置预案
openDeatails(){
this.isResponsePlans = true
}
back(){
this.isResponsePlans = false
}
} }

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

@ -157,7 +157,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
if (event.keyCode === 46) { if (event.keyCode === 46) {
this.selection.objects.forEach(item => { this.selection.objects.forEach(item => {
// 删除 选中的数据 // 删除 选中的数据
if (item.assetData.IsFromBuilding) { if (item.assetData?.IsFromBuilding) {
// console.log(this.canvasData.originaleveryStoreyData.data[item.assetData.Id]); // console.log(this.canvasData.originaleveryStoreyData.data[item.assetData.Id]);
delete this.canvasData.originalcompanyBuildingData?.data[item.assetData.Id]; delete this.canvasData.originalcompanyBuildingData?.data[item.assetData.Id];
// console.log(this.canvasData.originalcompanyBuildingData.data[item.assetData.Id]); // console.log(this.canvasData.originalcompanyBuildingData.data[item.assetData.Id]);
@ -318,7 +318,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.rectToolGraphics.closePath(); this.rectToolGraphics.closePath();
} }
if (this.paintingArrows !== null) { if (this.paintingArrows !== null) {
this.paintingArrows.data.pointB = new PIXI.Point(this.circleShadow.position.x, this.circleShadow.position.y); this.paintingArrows.assetData.pointB = new PIXI.Point(this.circleShadow.position.x, this.circleShadow.position.y);
this.paintingArrows.refresh(); this.paintingArrows.refresh();
} }
}); });
@ -776,6 +776,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
case PaintMode.Arrows: case PaintMode.Arrows:
if (this.paintingArrows === null) { if (this.paintingArrows === null) {
const data = { const data = {
Id: ObjectID.default.generate(),
name: 'string', name: 'string',
point: new PIXI.Point(this.circleShadow.x, this.circleShadow.y), point: new PIXI.Point(this.circleShadow.x, this.circleShadow.y),
pointA: new PIXI.Point(this.circleShadow.x, this.circleShadow.y), pointA: new PIXI.Point(this.circleShadow.x, this.circleShadow.y),
@ -1784,13 +1785,15 @@ export class Car extends SinglePointIcon {
/** /**
* 线 * 线
*/ */
export class Pipeline extends PIXI.Graphics { export class Pipeline extends PIXI.Container {
public line: PIXI.Graphics = new PIXI.Graphics();
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
super(); super();
this.name = this.assetData.Id; this.name = this.assetData.Id;
this.x = this.assetData.Point.x; this.x = this.assetData.Point.x;
this.y = this.assetData.Point.y; this.y = this.assetData.Point.y;
this.workingArea.backgroundImage.addChild(this); this.workingArea.backgroundImage.addChild(this);
this.addChild(this.line);
// 画线图标 // 画线图标
this.refresh(); this.refresh();
this.interactive = true; this.interactive = true;
@ -1804,25 +1807,25 @@ export class Pipeline extends PIXI.Graphics {
* *
*/ */
public refresh() { public refresh() {
this.clear(); this.line.clear();
this.lineStyle(5, 0x0000ff, 1); this.line.lineStyle(5, 0x0000ff, 1);
for (let i = 0, count = this.assetData.MultiPoint.length; i < count; i++) { for (let i = 0, count = this.assetData.MultiPoint.length; i < count; i++) {
const pointA = this.assetData.MultiPoint[i]; const pointA = this.assetData.MultiPoint[i];
if (i === 0) { if (i === 0) {
this.moveTo(pointA.x, pointA.y); this.line.moveTo(pointA.x, pointA.y);
} else { } else {
this.lineTo(pointA.x, pointA.y); this.line.lineTo(pointA.x, pointA.y);
if (i === count - 1) { if (i === count - 1) {
const pointB = this.assetData.MultiPoint[i - 1]; const pointB = this.assetData.MultiPoint[i - 1];
const angle = Math.atan2((pointA.y - pointB.y), (pointA.x - pointB.x)) * (180 / Math.PI) + 90; const angle = Math.atan2((pointA.y - pointB.y), (pointA.x - pointB.x)) * (180 / Math.PI) + 90;
this.beginFill(0x0000ff); this.line.beginFill(0x0000ff);
this.drawStar(pointA.x, pointA.y, 3, 5, 0, (Math.PI / 180 * angle)); this.line.drawStar(pointA.x, pointA.y, 3, 5, 0, (Math.PI / 180 * angle));
} else { } else {
this.drawCircle(pointA.x, pointA.y, 5); this.line.drawCircle(pointA.x, pointA.y, 5);
} }
} }
} }
this.endFill(); this.line.endFill();
// if (this.assetData.MultiPoint.length >= 2) { // if (this.assetData.MultiPoint.length >= 2) {
// const pointA = this.assetData.MultiPoint[this.assetData.MultiPoint.length - 2]; // const pointA = this.assetData.MultiPoint[this.assetData.MultiPoint.length - 2];
// const pointB = this.assetData.MultiPoint[this.assetData.MultiPoint.length - 1]; // const pointB = this.assetData.MultiPoint[this.assetData.MultiPoint.length - 1];
@ -1838,20 +1841,13 @@ export class Pipeline extends PIXI.Graphics {
* 2 * 2
*/ */
export class Arrows extends PIXI.Container { export class Arrows extends PIXI.Container {
public data: any;
// public icon: PIXI.Sprite;
public line: PIXI.Graphics = new PIXI.Graphics(); public line: PIXI.Graphics = new PIXI.Graphics();
public san: PIXI.Graphics = new PIXI.Graphics();
public ready = false; public ready = false;
constructor(assetData: any, private workingArea: WorkingAreaComponent) { constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
super(); super();
this.workingArea.backgroundImage.addChild(this); this.workingArea.backgroundImage.addChild(this);
this.data = assetData; this.name = this.assetData.Id;
// 画线图标
// this.icon = new PIXI.Sprite(PIXI.Texture.from(this.data.source));
this.addChild(this.line); this.addChild(this.line);
this.addChild(this.san);
// this.addChild(this.icon);
this.refresh(); this.refresh();
this.interactive = true; this.interactive = true;
this.on('mousedown', event => { this.on('mousedown', event => {
@ -1866,22 +1862,16 @@ export class Arrows extends PIXI.Container {
public refresh() { public refresh() {
this.line.clear(); this.line.clear();
this.line.lineStyle(5, 0xff0000, 1); this.line.lineStyle(5, 0xff0000, 1);
this.line.moveTo(this.data.pointA.x, this.data.pointA.y); this.line.moveTo(this.assetData.pointA.x, this.assetData.pointA.y);
this.line.lineTo(this.data.pointB.x, this.data.pointB.y); this.line.lineTo(this.assetData.pointB.x, this.assetData.pointB.y);
const angle = Math.atan2((this.data.pointB.y - this.data.pointA.y), (this.data.pointB.x - this.data.pointA.x)) * (180 / Math.PI) + 90; const angle = Math.atan2((this.assetData.pointB.y - this.assetData.pointA.y), (this.assetData.pointB.x - this.assetData.pointA.x))
* (180 / Math.PI) + 90;
// this.san.clear();
// this.san.lineStyle(5, 0xff0000, 1);
this.line.beginFill(0xff0000); this.line.beginFill(0xff0000);
console.log(Math.PI / 180 / 1.6); console.log(Math.PI / 180 / 1.6);
this.line.drawStar(this.data.pointB.x, this.data.pointB.y, 3, 10, 0, (Math.PI / 180 * angle)); this.line.drawStar(this.assetData.pointB.x, this.assetData.pointB.y, 3, 10, 0, (Math.PI / 180 * angle));
// this.san.angle = angle;
this.line.endFill(); this.line.endFill();
// this.icon.anchor.set(0, 0.5);
// this.icon.x = this.data.pointB.x;
// this.icon.y = this.data.pointB.y;
// this.icon.angle = angle;
} }
} }
/** /**

Loading…
Cancel
Save