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

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>
+</div>

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;

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,8 +49,8 @@ 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+='<span style="color: #FFFFFF">（一）灾情处置应坚持“</span>'
+    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>'
     chuzhiYuanze+='<span style="color: #FFFFFF">（二）现场情况基本清楚，无爆炸等次生灾害风险，灾情易于辨识研判，在技术人员指导下，果断下达指令开展灭火救援行动。</br>'
@@ -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>'

src/app/working-area/working-area.component.ts

@@ -120,6 +120,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
 
   // 是否登录
   public verificationURL = '/ui/plan'; // 验证url地址是否为验证页面
+  count = 0;
   isLogin() {
     const token = sessionStorage.getItem('token'); // 判断 是否登录状态
     if (token) {
@@ -387,6 +388,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     const floorData = this.canvasData.originaleveryStoreyData.data;
     const buildingData = this.canvasData.originalcompanyBuildingData.data;
     const floor = this.canvasData.selectStorey;
+    console.log(JSON.stringify(buildingData));
     // // key=>属性名    data[key]=>属性值
     Object.keys(floorData).forEach((key) => {
       switch (floorData[key].InteractiveMode) {
@@ -472,9 +474,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       IsFromBuilding: false,
       GameMode: 2
     };
-    const tempCar = new Car(tempData, this);
-    tempCar.setParent(this.app.stage);
-    tempCar.position.set(25, 25);
 
     const tempData2 = {
       TemplateId: null,
@@ -519,15 +518,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       IsFromBuilding: false,
       GameMode: 2
     };
-    const tempCar2 = new Car(tempData2, this);
-    tempCar2.setParent(this.app.stage);
-    tempCar2.position.set(25, 50);
-
-    // 开始绘制管线
-    this.beginPaintPipeline();
+    this.ShowCarIcon(tempData);
+    this.ShowCarIcon(tempData2);
+    this.ShowCarIcon(tempData);
+    this.ShowCarIcon(tempData2);
+    this.ShowCarIcon(tempData);
+    this.ShowCarIcon(tempData2);
+
+    // // 开始绘制管线
+    // this.beginPaintPipeline();
     // this.beginPaintingArrows();
   }
-
+  /**
+   * 显示车辆图标
+   * @param data
+   */
+  public ShowCarIcon(data: any) {
+    this.count++;
+    const tempCar2 = new Car(data, this);
+    tempCar2.setParent(this.app.stage);
+    tempCar2.position.set(25, this.count * 25);
+  }
   /**
    *
    * @param id 图标ID