[完善]类似预案切换

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

@@ -1,25 +1,30 @@
-<!-- <div class="leisiTable">
+<div style="width: 100%;height: 100%;position: relative;">
-    <table>
+    <div class="backBtn" *ngIf="isResponsePlans" (click)="back()">
-        <thead >
+        返回
-            <td style="width:40%;">单位名称</td>
+    </div>
-            <td style="width:10%;">始建于</td>
+    <div class="leisiTable" *ngIf="!isResponsePlans">
-            <td style="width:10%;">着火物</td>
+        <table>
-            <td style="width:10%;">点火位置</td>
+            <thead >
-            <td style="width:10%;">相近度</td>
+                <td style="width:40%;">单位名称</td>
-            <td style="width:20%;">详情</td>
+                <td style="width:10%;">始建于</td>
-        </thead>
+                <td style="width:10%;">着火物</td>
-        <tbody id="shujubody" >
+                <td style="width:10%;">点火位置</td>
-            <tr *ngFor="let leisi of leisiYuan">
+                <td style="width:10%;">相近度</td>
-                <td style="color: #FFFFFF;">{{leisi.danweiName}}</td>
+                <td style="width:20%;">详情</td>
-                <td></td>
+            </thead>
-                <td></td>
+            <tbody id="shujubody" >
-                <td style="color: #FFFFFF;">{{leisi.weizhi}}</td>
+                <tr *ngFor="let leisi of leisiYuan">
-                <td [ngClass]="{'tdyanse56':leisi.xiangjin>=50&&leisi.xiangjin<=60,'tdyanse78':leisi.xiangjin>60,'tdyanse':leisi.xiangjin<50}">{{leisi.xiangjin}}%</td>
+                    <td style="color: #FFFFFF;">{{leisi.danweiName}}</td>
-                <td style="color: #CC5D13;">查看详情</td>
+                    <td></td>
-            </tr>
+                    <td></td>
-        </tbody>
+                    <td style="color: #FFFFFF;">{{leisi.weizhi}}</td>
-    </table>
+                    <td [ngClass]="{'tdyanse56':leisi.xiangjin>=50&&leisi.xiangjin<=60,'tdyanse78':leisi.xiangjin>60,'tdyanse':leisi.xiangjin<50}">{{leisi.xiangjin}}%</td>
-</div> -->
+                    <td style="color: #CC5D13;cursor: pointer;" (click)="openDeatails()">查看详情</td>
-<div style="width: 100%;height: 100%;">
+                </tr>
-    <app-collection-tools></app-collection-tools>
+            </tbody>
-</div>
+        </table>
+    </div>
+    <div style="width: 100%;height: 100%;" *ngIf="isResponsePlans">
+        <app-collection-tools></app-collection-tools>
+    </div>
+</div>

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

@@ -32,4 +32,21 @@
 }
 .tdyanse{
     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;
 }

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%")}
   ]
   
-  
+  isResponsePlans = false //默认是否是处置预案
 
-  
+  openDeatails(){
+    this.isResponsePlans = true
+  }
+  back(){
+    this.isResponsePlans = false
+  }
 }