Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/TheCommandPlatform-Anxin

src/app/ui/real-cases/real-cases.component.html

@@ -1 +1,22 @@
-<p>real-cases works!</p>
+<div class="leisiTable">
+    <table>
+        <thead >
+            <td style="width:40%;">单位名称</td>
+            <td style="width:10%;">始建于</td>
+            <td style="width:10%;">着火物</td>
+            <td style="width:10%;">点火位置</td>
+            <td style="width:10%;">相近度</td>
+            <td style="width:20%;">详情</td>
+        </thead>
+        <tbody id="shujubody" >
+            <tr *ngFor="let leisi of leisiYuan">
+                <td style="color: #FFFFFF;">{{leisi.danweiName}}</td>
+                <td style="color: #FFFFFF;">{{leisi.year}}</td>
+                <td style="color: #FFFFFF;">{{leisi.zhoahuo}}</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 style="color: #CC5D13;">查看详情</td>
+            </tr>
+        </tbody>
+    </table>
+</div>

src/app/ui/real-cases/real-cases.component.scss

@@ -0,0 +1,35 @@
+.leisiTable{
+    border:1px solid  #0E79A9;
+    height: 95%;
+    width: 100%;
+    background-color: #05385E;
+    margin-top: 50px;
+    table{
+        width: 100%;
+        height: 100%;
+        border-collapse:collapse;
+        thead{
+            td{
+                color:#F7BA2A;
+                height: 50px;
+                text-align:center;
+                border-bottom: 1px solid  #0E79A9;
+            }
+        }
+        tbody{
+            td{
+                text-align:center;
+                
+            }
+        }
+    }
+}
+.tdyanse56{
+        color:#3BA9F2 
+}
+.tdyanse78{
+    color:#28BC69
+}
+.tdyanse{
+    color: #FFFFFF;
+}

src/app/ui/real-cases/real-cases.component.ts

@@ -12,4 +12,13 @@ export class RealCasesComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  leisiYuan=[
+    {danweiName:"江苏南京扬子石化",year:"2017年",zhoahuo:"液态丙烯",weizhi:"烴泵区",xiangjin:parseFloat("50%")},
+    {danweiName:"河北张家口中国化工集团盛华化工公司",year:"2018年",zhoahuo:"氯乙烯",weizhi:"氯乙烯一号气柜",xiangjin:parseFloat("40%")},
+    {danweiName:"山东临沂金誉石化",year:"2017年",zhoahuo:"液化气",weizhi:"装卸区东北侧11号卸车位",xiangjin:parseFloat("30%")},
+    {danweiName:"江苏省靖江市德桥化工仓储有限公司",year:"2016年",zhoahuo:"汽油",weizhi:"2号交换站",xiangjin:parseFloat("20%")},
+    {danweiName:"海南东方市八所港危化品码头",year:"2016年",zhoahuo:"石脑油",weizhi:"丰盛油8油轮发动机舱",xiangjin:parseFloat("10%")}
+    
+  ]
+
 }

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

@@ -8,7 +8,16 @@
             <td style="width:10%;">相近度</td>
             <td style="width:20%;">详情</td>
         </thead>
-        <tbody id="shujubody"></tbody>
+        <tbody id="shujubody" >
+            <tr *ngFor="let leisi of leisiYuan">
+                <td style="color: #FFFFFF;">{{leisi.danweiName}}</td>
+                <td></td>
+                <td></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 style="color: #CC5D13;">查看详情</td>
+            </tr>
+        </tbody>
     </table>
 </div> -->
 <div style="width: 100%;height: 100%;">

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

@@ -7,6 +7,7 @@
     table{
         width: 100%;
         height: 100%;
+        border-collapse:collapse;
         thead{
             td{
                 color:#F7BA2A;
@@ -15,5 +16,20 @@
                 border-bottom: 1px solid  #0E79A9;
             }
         }
+        tbody{
+            td{
+                text-align:center;
+                
+            }
+        }
     }
+}
+.tdyanse56{
+        color:#3BA9F2 
+}
+.tdyanse78{
+    color:#28BC69
+}
+.tdyanse{
+    color: #FFFFFF;
 }

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Color } from 'cesium';
 
 @Component({
   selector: 'app-similar-plans',
@@ -10,46 +11,25 @@ export class SimilarPlansComponent implements OnInit {
   constructor() { }
 
   ngOnInit(): void {
-    this.tableData()
+    
   }
+  
 
   leisiYuan=[
-    {danweiName:"广西钦州志诚化工有限公司",year:"XXXX年",zhoahuo:"XXX",weizhi:"2#储罐",xiangjin:"80%"},
-    {danweiName:"南宁交能石化有限责任公司",year:"",zhoahuo:"XXX",weizhi:"3#储罐",xiangjin:"75%"},
-    {danweiName:"广西藤县通轩立信化学有限公司",year:"",zhoahuo:"XXX",weizhi:"1#储罐",xiangjin:"70%"},
-    {danweiName:"广西田东锦盛化工科技有限公司",year:"",zhoahuo:"XXXXXX",weizhi:"12#储罐",xiangjin:"60%"},
-    {danweiName:"梧州市联溢化工有限公司",year:"",zhoahuo:"XXX",weizhi:"5#储罐",xiangjin:"50%"},
-    {danweiName:"田东石油化工钦州港油品储运库",year:"",zhoahuo:"XXX",weizhi:"4-1#储罐",xiangjin:"40%"},
-    {danweiName:"中国石油进德油库",year:"",zhoahuo:"XXX",weizhi:"3#储罐",xiangjin:"45%"},
-    {danweiName:"广西华鑫化工有限公司",year:"",zhoahuo:"XXX",weizhi:"11#储罐",xiangjin:"42%"},
-    {danweiName:"广西中油能源有限公司",year:"",zhoahuo:"XXX",weizhi:"6#储罐",xiangjin:"39%"},
-    {danweiName:"广西钦州澄星化工科技有限公司",year:"",zhoahuo:"XXX",weizhi:"5-2#储罐",xiangjin:"35%"},
-    {danweiName:"中油广西田东石油化工总厂有限公司",year:"",zhoahuo:"XXX",weizhi:"3-1#储罐",xiangjin:"35%"}
+    {danweiName:"广西钦州志诚化工有限公司",year:"XXXX年",zhoahuo:"XXX",weizhi:"2#储罐",xiangjin:parseFloat("80%")},
+    {danweiName:"南宁交能石化有限责任公司",year:"",zhoahuo:"XXX",weizhi:"3#储罐",xiangjin:parseFloat("75%")},
+    {danweiName:"广西藤县通轩立信化学有限公司",year:"",zhoahuo:"XXX",weizhi:"1#储罐",xiangjin:parseFloat("70%")},
+    {danweiName:"广西田东锦盛化工科技有限公司",year:"",zhoahuo:"XXXXXX",weizhi:"12#储罐",xiangjin:parseFloat("60%")},
+    {danweiName:"梧州市联溢化工有限公司",year:"",zhoahuo:"XXX",weizhi:"5#储罐",xiangjin:parseFloat("50%")},
+    {danweiName:"田东石油化工钦州港油品储运库",year:"",zhoahuo:"XXX",weizhi:"4-1#储罐",xiangjin:parseFloat("40%")},
+    {danweiName:"中国石油进德油库",year:"",zhoahuo:"XXX",weizhi:"3#储罐",xiangjin:parseFloat("45%")},
+    {danweiName:"广西华鑫化工有限公司",year:"",zhoahuo:"XXX",weizhi:"11#储罐",xiangjin:parseFloat("42%")},
+    {danweiName:"广西中油能源有限公司",year:"",zhoahuo:"XXX",weizhi:"6#储罐",xiangjin:parseFloat("39%")},
+    {danweiName:"广西钦州澄星化工科技有限公司",year:"",zhoahuo:"XXX",weizhi:"5-2#储罐",xiangjin:parseFloat("35%")},
+    {danweiName:"中油广西田东石油化工总厂有限公司",year:"",zhoahuo:"XXX",weizhi:"3-1#储罐",xiangjin:parseFloat("30%")}
   ]
-  tableData(){
-    var res=''
-    for(var i=0;i<this.leisiYuan.length;i++){
-      res+='<tr style="color:#FFFFFF">'
-      res+='<td style="text-align:center;">'+this.leisiYuan[i].danweiName+'</td>'
-      res+='<td style="text-align:center;">'+"" +'</td>'
-      res+='<td style="text-align:center;">'+""+'</td>'
-      res+='<td style="text-align:center;">'+this.leisiYuan[i].weizhi+'</td>'
-      if(parseFloat(this.leisiYuan[i].xiangjin)<parseFloat('50%')){
-        res+='<td style="text-align:center;">'+this.leisiYuan[i].xiangjin+'</td>'
-      }
-      else if(parseFloat(this.leisiYuan[i].xiangjin)<=parseFloat('60%')&&parseFloat(this.leisiYuan[i].xiangjin)>=parseFloat('50%')){
-        res+='<td style="text-align:center;color:#3BA9F2">'+this.leisiYuan[i].xiangjin+'</td>'
-      }
-      else{
-        res+='<td style="text-align:center;color:#28BC69">'+this.leisiYuan[i].xiangjin+'</td>'
-      }
-      res+='<td style="text-align:center;"><span style="color:#CC5D13;cursor: pointer;(click)="openResponsePlans()">查看详情</span></td></tr>'
-    }
-    res+='</tbody>'
-    var shuju = document.getElementById('shujubody')
-    shuju.innerHTML=res
-  }
-  openResponsePlans(){
-    console.log(123)
-  }
+  
+  
+
+  
 }