[类似预案]表格

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

@@ -1 +1,13 @@
-<p>similar-plans 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"></tbody>
+    </table>
+</div>

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

@@ -0,0 +1,19 @@
+.leisiTable{
+    border:1px solid  #0E79A9;
+    height: 95%;
+    width: 100%;
+    background-color: #05385E;
+    margin-top: 50px;
+    table{
+        width: 100%;
+        height: 100%;
+        thead{
+            td{
+                color:#F7BA2A;
+                height: 50px;
+                text-align:center;
+                border-bottom: 1px solid  #0E79A9;
+            }
+        }
+    }
+}

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

@@ -10,6 +10,44 @@ 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%"}
+  ]
+  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;"><a href="" style="color:#CC5D13">查看详情</a></td></tr>'
+    }
+    res+='</tbody>'
+    var shuju=document.getElementById('shujubody')
+    shuju.innerHTML=res
   }
 
 }