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

4 years ago · 22fa417930
9 changed files with 212 additions and 101 deletions
--- a/src/app/ui/dangerous/dangerous.component.scss
+++ b/src/app/ui/dangerous/dangerous.component.scss
@ -8,6 +8,7 @@
        flex: 2%;
        width: 100%;
        padding-top: 10px;
+        font-size: 20px;
        div{
            display: inline-block;
            width: 126px;
--- a/src/app/ui/disposal-node/disposal-node.component.html
+++ b/src/app/ui/disposal-node/disposal-node.component.html
@ -12,12 +12,35 @@
      <div id="zuzhi" class="bigeditdeletebtn"  (click)='xianshi(4)'  ngClass="buildingbtnchecked">
        <span (click)='this.chooseBiaoti=4'>组织指挥要点</span>
      </div>
+      <div class="bigTalkBox" style="position: absolute;right: 26px;">
+        <mat-icon class="titleIcon" (click)="openTalkDiv()">volume_up</mat-icon>
+        <div class="talkBox" *ngIf="isOpenTalk">
+          <div class="btndiv"> 
+            <div>泵房</div>
+            <div>控制室</div>
            
          </div>
+          <div class="bottomDiv">
+            <div>
+              <mat-icon>settings_voice</mat-icon>
+            </div>
+            <div>
+              按住说话
+            </div>
+            <div>
+              <mat-icon>search</mat-icon>
+            </div>
+          </div>
+        </div>
+      </div>
+    
+  </div>
+  
+  
  <!--中间文字-->
  <div class="wenzi" id="aaa">
    <div class="scrollbar"></div>
  </div>
-  <div style="width: 100%;">
+  <div style="width: 100%;position: absolute;bottom: 30px;right: 20px;">
    <button class="button" style="float: right;margin-right: 30px;">分享</button>
 </div>
--- a/src/app/ui/disposal-node/disposal-node.component.scss
+++ b/src/app/ui/disposal-node/disposal-node.component.scss
@ -13,12 +13,12 @@
    align-items:center;
    min-height: 40px;
    box-sizing: border-box;
-    margin: 3px 0;
+    margin: 0 0;
  
    .bigeditdeletebtn{
-      border:1px solid  #0E79A9;
+      
      margin-right: 0px;
-      height: 80%;
+      height: 100%;
      display: flex;
      flex-direction: column;
      // align-items:center;/*由于flex-direction: column，因此align-items代表的是水平方向*/
@ -37,10 +37,74 @@
      cursor: pointer; 
      //background-image: url("../../../assets/images/标签经过.png") ;
    }
+    .bigTalkBox{
+    user-select: none;
+    .titleIcon{
+      font-size: 33px;
+      vertical-align: sub;
+      color: white;
+    }
+    .talkBox{
+      width: 309px;
+      height: 326px;  
+      border: 1px solid #30bbec;
+      background-color: #013a64;
+      opacity: .9 ;
+      position: absolute;
+      top: 32px;  
+      right:4px;
+      z-index: 2000;
+      .btndiv{
+        div{
+          border-radius: 18px;
+          width: 70px;
+          height: 30px;
+          text-align: center;
+          line-height: 30px;
+          display: inline-block;
+          font-size: 13px;
+          color: white;
+          cursor: pointer;
+          
+        }
+        div:nth-child(1){
+          background-color: #fe9400;
+          margin: 10px;
+        }
+        div:nth-child(2){
+          background-color: #f95e5a;
+        }
+      }
+      .bottomDiv{
+        position: absolute;
+        bottom:6px;
+        width: 100%;
+        height: 32px;
+        line-height: 32px;
+        display: flex;
+        color: white;
+        text-align: center;
+        div:nth-child(1){
+          flex: 1;
+        }
+        div:nth-child(2){
+          flex: 6;
+          color: #409eff;
+          background: url('../../../assets/images/输入框.png');
+          background-size: 100% 100%;
+        }
+        div:nth-child(3){
+          flex: 1;
+
+        }
+      }
+    }
+  }
    
  }
  //中间文字区域
  .wenzi{
+      border-top:1px solid #30bbec;
      overflow:auto;
      height: 85%;
      width: 100%;
@ -48,6 +112,9 @@
      .h3{
          color: #CC5D13;
      }
+      
+        font-size: 20px;
+      
      .scrollbar{
        width: 30px;
        height: 300px;
--- a/src/app/ui/disposal-node/disposal-node.component.ts
+++ b/src/app/ui/disposal-node/disposal-node.component.ts
@ -21,7 +21,11 @@ export class DisposalNodeComponent implements OnInit {
  }
  checkedBuildingIndex:number = -1
  chooseBiaoti=1
-  
+  //打开说话框
+  isOpenTalk = false
+  openTalkDiv(){
+    this.isOpenTalk = !this.isOpenTalk
+  }
   //鼠标移入边框变颜色
   yiru(yirunum){
    var tedian=document.getElementById(yirunum)
@ -45,7 +49,7 @@ export class DisposalNodeComponent implements OnInit {
    tedian.style.border="1px solid  #0E79A9"
    zhuyi.style.border="1px solid  #0E79A9"
    chuzhi.style.border="1px solid  #0E79A9"
-    chuzhiYuanze+=`<h3 style="color: #CC5D13">一、处置原则</h3>`;
+    chuzhiYuanze+=`<h3 style="color: #CC5D13; padding-top:30px">一、处置原则</h3>`;
    chuzhiYuanze+='<span style="color: #FFFFFF ">（一）灾情处置应坚持“</span>'
    chuzhiYuanze+='<span style="color: #F95E5A">救人第一、科学施救</span>'
    chuzhiYuanze+='<span style="color: #FFFFFF">”的原则，严禁在不熟悉情况时擅自行动，严禁冒险蛮干。</br></span>'
@ -67,7 +71,7 @@ export class DisposalNodeComponent implements OnInit {
    tedian.style.border="1px solid  #30BBEC"
    zhuyi.style.border="1px solid  #0E79A9"
    chuzhi.style.border="1px solid  #0E79A9"
-     chuzhiYuanze+='<span style="color: #FFFFFF">（1） 爆炸引起燃烧。油罐发生爆炸后，随即易形成稳定燃烧。爆炸后，从罐顶或裂口处流出的油品或因罐体移位流出的油品，易造成地面流淌性燃烧。</br>'
+     chuzhiYuanze+='</br><span style="color: #FFFFFF; ">（1） 爆炸引起燃烧。油罐发生爆炸后，随即易形成稳定燃烧。爆炸后，从罐顶或裂口处流出的油品或因罐体移位流出的油品，易造成地面流淌性燃烧。</br>'
     chuzhiYuanze+='（2） 燃烧引起爆炸。在形成稳定燃烧的油罐的邻近油罐，在热辐射的作用下易发生爆炸，扩大火势。</br>'
     chuzhiYuanze+='（3） 火焰高，辐射热强。爆炸后在油罐破裂位置形成的稳定燃烧，其火焰高达几十米，并对其四周产生强烈的热辐射。</br>'
     chuzhiYuanze+='（4） 易形成沸溢与喷溅。由于重质油品具有“热波特性”，对含有一定水分或有水垫层的重质油品储罐发生火灾后，如果不能及时进行冷却控制，在其“热波特性”的作用下就会使油品内的乳化水或油层下的水垫层产生过热蒸汽，而导致发生油品的沸溢或喷溅现象。</br>'
@ -78,7 +82,7 @@ export class DisposalNodeComponent implements OnInit {
    tedian.style.border="1px solid  #0E79A9"
    zhuyi.style.border="1px solid  #30BBEC"
    chuzhi.style.border="1px solid  #0E79A9"
-     chuzhiYuanze+='<span style="color: #FFFFFF">1、油罐火灾的辐射热强，参战人员应配有防高温、防辐射、防毒的防护装备。</br>'
+     chuzhiYuanze+='</br><span style="color: #FFFFFF; padding-top:20px">1、油罐火灾的辐射热强，参战人员应配有防高温、防辐射、防毒的防护装备。</br>'
     chuzhiYuanze+='2、正确选择停车位置。消防车尽量停在上风或侧上风向，与燃烧油罐保持一定的安全距离。扑救重质油罐火灾时，消防车头应背向油罐，以备紧急撤离。作战行动中的部分车辆动画加上文字配音说明</br>'
     chuzhiYuanze+='3、注意观察火场情况变化，及时发现沸溢、喷溅征兆。</br>'
     chuzhiYuanze+='4、充分冷却，防止复燃。燃烧罐的火势被扑灭后，要继续对其实施冷却，直至使罐内油品温度降到燃点以下为止。设有保温层的原油罐可不予以冷却。轻质油品罐不会形成高温层，冷却的重点是液面以上的罐壁。救活的图片加上文字配音说明。</br>'
@ -95,7 +99,7 @@ export class DisposalNodeComponent implements OnInit {
    tedian.style.border="1px solid  #0E79A9"
    zhuyi.style.border="1px solid  #0E79A9"
    chuzhi.style.border="1px solid  #30BBEC"
-     chuzhiYuanze+='<h3 style="color: #CC5D13">1、安全防护</h3>'
+     chuzhiYuanze+='<h3 style="color: #CC5D13; padding-top:30px">1、安全防护</h3>'
     chuzhiYuanze+='<span style="color: #FFFFFF">①应综合考虑风力风向、工艺流程、地形地势、封闭管井等因素，</span>'
     chuzhiYuanze+='<span style="color: #F95E5A">科学选择车辆站位和阵地设置；</span>'
     chuzhiYuanze+='<span style="color: #FFFFFF">②科学设置内、外观察哨，通过单位DCS系统设内观察哨，重点监测着火罐及周边邻近罐的介质、压力、温度、液位以及预警等级；通过在外部设观察哨，实时观察燃烧烟雾、火焰以及罐体外形变化、颤动声响等，确保整个作战行动安全可控；</br>'
--- a/src/app/ui/plan-assistance/plan-assistance.component.html
+++ b/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>
--- a/src/app/ui/plan-assistance/plan-assistance.component.scss
+++ b/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 {
--- a/src/app/ui/plan-assistance/plan-assistance.component.ts
+++ b/src/app/ui/plan-assistance/plan-assistance.component.ts
@ -6865,7 +6865,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
      },
      Name: '水罐消防车',
      FireTeamName: '八塘消防救援站', //所属消防队
-      ReachTime: 3, // 到场剩余时间
+      ReachTime: 240, //到场剩余时间
      WaterYield: '12t',//载水量
      Foam: '0t', //载泡沫
      PeopleNum: 6, //载人数
@ -6915,7 +6915,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
      },
      Name: '水罐泡沫消防车',
      FireTeamName: '八塘消防救援站', //所属消防队
-      ReachTime: 3, // 到场剩余时间
+      ReachTime: 240, //到场剩余时间
      WaterYield: '6t',//载水量
      Foam: '2t', //载泡沫
      PeopleNum: 6, //载人数
@ -6965,7 +6965,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
      },
      Name: '水罐泡沫消防车',
      FireTeamName: '八塘消防救援站', //所属消防队
-      ReachTime: 3, // 到场剩余时间
+      ReachTime: 240, //到场剩余时间
      WaterYield: '3t',//载水量
      Foam: '1t', //载泡沫
      PeopleNum: 8, //载人数
@ -7015,7 +7015,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
      },
      Name: '举高喷射消防车',
      FireTeamName: '八塘消防救援站', //所属消防队
-      ReachTime: 4, // 到场剩余时间
+      ReachTime: 300, //到场剩余时间
      WaterYield: '16t',//载水量
      Foam: '2t', //载泡沫
      PeopleNum: 4, //载人数
@ -7065,7 +7065,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
      },
      Name: '水罐泡沫消防车',
      FireTeamName: '龚州消防救援站', //所属消防队
-      ReachTime: 11, // 到场剩余时间
+      ReachTime: 660, //到场剩余时间
      WaterYield: '6t',//载水量
      Foam: '2t', //载泡沫
      PeopleNum: 6, //载人数
@ -7115,7 +7115,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
      },
      Name: '水罐泡沫消防车',
      FireTeamName: '龚州消防救援站', //所属消防队
-      ReachTime: 15, // 到场剩余时间
+      ReachTime: 720, //到场剩余时间
      WaterYield: '5t',//载水量
      Foam: '1t', //载泡沫
      PeopleNum: 6, //载人数
@ -7165,7 +7165,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
      },
      Name: '水罐泡沫消防车',
      FireTeamName: '龚州消防救援站', //所属消防队
-      ReachTime: 15, // 到场剩余时间
+      ReachTime: 960, //到场剩余时间
      WaterYield: '3t',//载水量
      Foam: '1t', //载泡沫
      PeopleNum: 6, //载人数
@ -7215,7 +7215,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
      },
      Name: '举高喷射消防车',
      FireTeamName: '龚州消防救援站', //所属消防队
-      ReachTime: 15, // 到场剩余时间
+      ReachTime: 960, //到场剩余时间
      WaterYield: '18t',//载水量
      Foam: '2t', //载泡沫
      PeopleNum: 4, //载人数
@ -7268,21 +7268,21 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {

  }

-  // 选择 车辆
-  selectCar(e) {
-    console.log(e);
-    this.canvasData.selectCar = e;
-    this.bottomIsShow = true;
-  }
-
  //倒计时结束
  handleEvent (e,item) {
-    console.log(e, item);
+    e.left==0? item.ReachTime=0 : null
+  }
+
+  //选择 车辆
+  selectCar (e) {
+    console.log(e)
+    this.canvasData.selectCar = e
+    this.bottomIsShow = true
  }

  //关闭 底部车辆信息
  closeBottom () {
-    this.bottomIsShow = false;
+    this.bottomIsShow = false
  }

  // 打开 右侧楼层
--- a/src/app/ui/plan/collection-tools.component.scss
+++ b/src/app/ui/plan/collection-tools.component.scss
@ -148,7 +148,7 @@
    flex-direction: column;
    margin-left: 0px;
    transition: margin-left 0.5s;
-    min-width: 235px;
+    // min-width: 235px;
    border: 1px solid #30bbec;
    width: 235px;
    left: 0;
--- a/src/app/ui/ui.module.ts
+++ b/src/app/ui/ui.module.ts
@ -62,7 +62,7 @@ import { DangerousComponent, GisComponent } from './dangerous/dangerous.componen
 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: [SafeHtmlPipe,GisComponent,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