[完善] 倒计时完成

src/app/ui/plan-assistance/plan-assistance.component.html

@@ -3,14 +3,16 @@
         <div class="header leftHeader">到场力量</div>
         <div class="list">
             <div class="tableDiv">
-                <div class="tableRows" *ngFor="let item of allCarsData" (click)='selectCar(item)' [ngClass]="{selectIcon: canvasData.selectCar.Id == item.Id}">
+                <div class="tableRows" *ngFor="let item of allCarsData;let key = index" (click)='selectCar(item)' [ngClass]="{selectIcon: canvasData.selectCar.Id == item.Id}">
                     <div style="flex: 60%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                         <p style="flex: 60%;font-size: 16px;font-weight: 550;" class="contentText">{{item.Name}}</p>
                         <p style="flex: 40%" class="contentText">{{item.FireTeamName}}</p>
                     </div>
-                    <div style="flex: 40%; line-height: 50px;text-align: center;color: #37f76D;" *ngIf="item.ReachTime < 1">已到场</div>
-                    <div style="flex: 40%; line-height: 50px;text-align: center;color: #fff;" *ngIf="item.ReachTime > 0">
-                       <label>{{item.ReachTime}}分钟</label>
+                    <div class="countdown" style="color: #37f76D;" *ngIf="item.ReachTime < 1">已到场</div>
+                    <div class="countdown" *ngIf="item.ReachTime > 0">
+                        <label [ngClass]="{smallFive: item.ReachTime<=300,bigTen: item.ReachTime>=600}">
+                            <countdown #key [config]="{leftTime: item.ReachTime,format: 'm分钟'}" (event)="handleEvent($event,item)"></countdown>
+                        </label>
                     </div>
                 </div>
             </div>

src/app/ui/plan-assistance/plan-assistance.component.scss

@@ -69,6 +69,12 @@
             text-overflow:ellipsis;
             white-space: nowrap;
         }
+        .countdown{
+            flex: 40%;
+            line-height: 50px;
+            font-weight: 550;
+            text-align: center;
+        }
     }
 }
 
@@ -76,6 +82,14 @@
 .selectIcon {
     background-color: rgba(13, 139, 241, 0.7);
 }
+//小于五分钟 css
+.smallFive {
+    color: rgb(245, 166, 19);
+}
+//大于十分钟 css
+.bigTen {
+    color: #fff;
+}
 
 //右侧工作区
 .center {

src/app/ui/plan-assistance/plan-assistance.component.ts

@@ -1747,7 +1747,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
       },
       Name: '水罐消防车',
       FireTeamName: '八塘消防救援站', //所属消防队
-      ReachTime: 3, //到场剩余时间
+      ReachTime: 240, //到场剩余时间
       WaterYield: '12t',//载水量
       Foam: '0t', //载泡沫
       PeopleNum: 6, //载人数
@@ -1797,7 +1797,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
       },
       Name: '水罐泡沫消防车',
       FireTeamName: '八塘消防救援站', //所属消防队
-      ReachTime: 3, //到场剩余时间
+      ReachTime: 240, //到场剩余时间
       WaterYield: '6t',//载水量
       Foam: '2t', //载泡沫
       PeopleNum: 6, //载人数
@@ -1847,7 +1847,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
       },
       Name: '水罐泡沫消防车',
       FireTeamName: '八塘消防救援站', //所属消防队
-      ReachTime: 3, //到场剩余时间
+      ReachTime: 240, //到场剩余时间
       WaterYield: '3t',//载水量
       Foam: '1t', //载泡沫
       PeopleNum: 8, //载人数
@@ -1897,7 +1897,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
       },
       Name: '举高喷射消防车',
       FireTeamName: '八塘消防救援站', //所属消防队
-      ReachTime: 4, //到场剩余时间
+      ReachTime: 300, //到场剩余时间
       WaterYield: '16t',//载水量
       Foam: '2t', //载泡沫
       PeopleNum: 4, //载人数
@@ -1947,7 +1947,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
       },
       Name: '水罐泡沫消防车',
       FireTeamName: '龚州消防救援站', //所属消防队
-      ReachTime: 11, //到场剩余时间
+      ReachTime: 660, //到场剩余时间
       WaterYield: '6t',//载水量
       Foam: '2t', //载泡沫
       PeopleNum: 6, //载人数
@@ -1997,7 +1997,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
       },
       Name: '水罐泡沫消防车',
       FireTeamName: '龚州消防救援站', //所属消防队
-      ReachTime: 15, //到场剩余时间
+      ReachTime: 720, //到场剩余时间
       WaterYield: '5t',//载水量
       Foam: '1t', //载泡沫
       PeopleNum: 6, //载人数
@@ -2047,7 +2047,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
       },
       Name: '水罐泡沫消防车',
       FireTeamName: '龚州消防救援站', //所属消防队
-      ReachTime: 15, //到场剩余时间
+      ReachTime: 960, //到场剩余时间
       WaterYield: '3t',//载水量
       Foam: '1t', //载泡沫
       PeopleNum: 6, //载人数
@@ -2097,7 +2097,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
       },
       Name: '举高喷射消防车',
       FireTeamName: '龚州消防救援站', //所属消防队
-      ReachTime: 15, //到场剩余时间
+      ReachTime: 960, //到场剩余时间
       WaterYield: '18t',//载水量
       Foam: '2t', //载泡沫
       PeopleNum: 4, //载人数
@@ -2137,6 +2137,11 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
   rightIsShow:boolean = true; //右侧楼层是否展示
   rightSayIsShow:boolean = false; //右侧语音是否展示
 
+  //倒计时结束
+  handleEvent (e,item) {
+    e.left==0? item.ReachTime=0 : null
+  }
+
   //选择 车辆
   selectCar (e) {
     console.log(e)
@@ -2144,11 +2149,6 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
     this.bottomIsShow = true
   }
 
-  //倒计时结束
-  handleEvent (e,item) {
-    console.log(e,item)
-  }
-
   //关闭 底部车辆信息
   closeBottom () {
     this.bottomIsShow = false

src/app/ui/ui.module.ts

@@ -62,7 +62,7 @@ import { DangerousComponent } from './dangerous/dangerous.component';
 import { SimilarPlansComponent } from './similar-plans/similar-plans.component';
 import { RealCasesComponent } from './real-cases/real-cases.component';
 import { PlanAssistanceComponent } from './plan-assistance/plan-assistance.component';
-
+import { CountdownModule } from 'ngx-countdown';
 
 @NgModule({
   declarations: [UiComponent,PersonaldataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe, CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent, DisposalNodeComponent, DangerousComponent, SimilarPlansComponent, RealCasesComponent, PlanAssistanceComponent,planComponent],
@@ -112,7 +112,7 @@ import { PlanAssistanceComponent } from './plan-assistance/plan-assistance.compo
     MatTreeModule,
     PortalModule,
     ScrollingModule,
-    
+    CountdownModule,
     ReactiveFormsModule,
     FormsModule,
     FileUploadModule