基本信息

src/app/home/basic-info/unit/unit.component.html

@@ -49,15 +49,17 @@
         </thead>
         <tbody>
           <tr *ngFor="let data of basicTable.data">
-            <td class="td">{{ data.name }}</td>
-            <td class="td">{{ data.integrity }}</td>
-            <td class="td">{{ data.organization }}</td>
-            <td class="td">{{ data.level }}</td>
-            <td class="td">{{ data.nature }}</td>
-            <td class="td">{{ data.time }}</td>
-            <td class="td">{{ data.addr }}</td>
-            <td class="td">{{ data.state }}</td>
-            <td class="td">
+            <td >{{ data.name }}</td>
+            <td ><div style="height: 20px; background: #eee; border-radius: 4px;">
+                <div [ngStyle]="{'width':data.integrity+'%'}" style=" height: 100%; background: #46B783; border-radius: 4px; text-align: center; color: #fff;">{{data.integrity}}%</div>
+            </div></td>
+            <td >{{ data.organization }}</td>
+            <td >{{ data.level }}</td>
+            <td >{{ data.nature }}</td>
+            <td >{{ data.time }}</td>
+            <td >{{ data.addr }}</td>
+            <td >{{ data.state }}</td>
+            <td >
               <a>查看详情</a>
               &nbsp;
               <a>关闭</a>

src/app/home/basic-info/unit/unit.component.scss

@@ -76,7 +76,16 @@
     .grey{
       color: rgba(0, 13, 33, 0.48)!important;
     }
+    .progress{
+        width: 100%;
+        height: 20px;
+        background: #eee;
+        border-radius: 2px;
+        .bg{
+            width: 32%;
+            height: 100%;
+            background: #46B783;
+        }
+    }
   }
-  .td{
-      border-style: 1px solid red;
-  }
+  

src/app/home/basic-info/unit/unit.component.ts

@@ -21,7 +21,7 @@ export class UnitComponent implements OnInit {
     {
       id: '1',
       name: 'John Brown',
-      integrity: 32,
+      integrity: 20,
       organization: 'New York No. 1 Lake Park',
       level:'重点单位',
       nature:'会议中心',

src/app/home/home.module.ts

@@ -24,6 +24,7 @@ import { DaOneselfPlanComponent } from './task/da-oneself-plan/da-oneself-plan.c
 import { StationTaskExecutionComponent } from './task/station-task-execution/station-task-execution.component';
 import { StationTaskApplyComponent } from './task/station-task-apply/station-task-apply.component';
 import { StationWeeklyPlanComponent } from './task/station-weekly-plan/station-weekly-plan.component';
+import { NzProgressModule } from 'ng-zorro-antd/progress';
 @NgModule({
   declarations: [
     NavComponent,
@@ -52,7 +53,8 @@ import { StationWeeklyPlanComponent } from './task/station-weekly-plan/station-w
     NzDropDownModule,
     NzInputModule,
     NzTableModule,
-    NzIconModule
+    NzIconModule,
+    NzProgressModule
   ]
 })
 export class HomeModule { }

src/styles.scss

@@ -155,6 +155,3 @@ app-root {
 .maxHeightTreeSelect {
   max-height: 280px;
 }
-button{
-  background: #2D4CC1;
-}