选中设备及选中样式

src/app/pages/left-domain/left-domain.component.html

@@ -18,7 +18,11 @@
     <!-- 基本信息 -->
     <!-- 加油机 -->
     <div class="publicBox refueller" *ngIf="beforeFence === 1">
-      <div class="interval" *ngFor="let item of FacilityList">
+      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility(item)">
+        <!-- 选中样式 -->
+        <div class="positionLeftTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionLeftBottom" *ngIf="selectFacilityId === item.getID()"></div>
+        <div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
+        <!-- 选中样式 -->
         <p class="title"><input type="text" class="tableInput" [(ngModel)]="item.getPropertyData().name"></p>
         <div class="table">
           <div class="tableHeader">
@@ -46,7 +50,11 @@
     <!-- 加油机 -->
     <!-- 油罐设备 -->
     <div class="publicBox refueller oilTank" *ngIf="beforeFence === 2">
-      <div class="interval" *ngFor="let item of FacilityList">
+      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility(item)">
+        <!-- 选中样式 -->
+        <div class="positionLeftTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionLeftBottom" *ngIf="selectFacilityId === item.getID()"></div>
+        <div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
+        <!-- 选中样式 -->
         <p class="title"><input type="text" class="tableInput" [(ngModel)]="item.getPropertyData().name"></p>
         <div class="table">
           <div class="tableHeader">

src/app/pages/left-domain/left-domain.component.scss

@@ -47,7 +47,11 @@
   .textImage{ margin-bottom: 15px; height: auto; line-height: normal; img{ width: auto; height: 130px; } }
 }
 .refueller{ //加油机
-  .interval{ margin-top: 10px; } //分隔div
+  .interval{ margin-top: 10px; position: relative; cursor: pointer; } //分隔div
+  .positionLeftTop { position: absolute; width: 10px; height: 10px; left: -5px; top: -5px; border-left: 1px solid #fff; border-top: 1px solid #fff; } //左上角
+  .positionLeftBottom { position: absolute; width: 10px; height: 10px; left: -5px; bottom: -5px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; } //左下角
+  .positionRightTop { position: absolute; width: 10px; height: 10px; right: -5px; top: -5px; border-right: 1px solid #fff; border-top: 1px solid #fff; } //右上角
+  .positionRightBottom { position: absolute; width: 10px; height: 10px; right: -5px; bottom: -5px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; } //右下角
   .table{
     width: 100%;
     border: 1px solid #91CCFF;

src/app/pages/left-domain/left-domain.component.ts

@@ -56,6 +56,17 @@ export class LeftDomainComponent implements OnInit {
     }
   }
 
+  //选中 设备
+  selectFacility(item: FacilityInfoUIItem) {
+    if (this.selectFacilityId != item.getID()) {
+      this.selectFacilityId = item.getID()
+      FacilityInfoInSceneWindow.instance.selectFacilityItem(item);
+    } else {
+      this.selectFacilityId = null
+      item.onSelect(false)
+    }
+  }
+
   //处理 treeData
   handleTreeData(list: FacilityInfoUIItem[]) {
     this.treeData = []