[处置要点]出版页面实现

src/app/ui/disposal-node/disposal-node.component.html

@@ -1 +1,23 @@
-<p>disposal-node works!</p>
+<!-- 头部操作栏 -->
+<div class="headerOperate">
+    <div id="tedian" class="bigeditdeletebtn"  (click)='xianshi(1)' ngClass="buildingbtnchecked">
+      <span>火灾特点</span>
+    </div>
+    <div id="zhuyi" class="bigeditdeletebtn" (click)='xianshi(2)'  ngClass="buildingbtnchecked">
+      <span>注意事项</span>
+    </div>
+    <div id="chuzhi" class="bigeditdeletebtn"  (click)='xianshi(3)' ngClass="buildingbtnchecked">
+        <span>处置要点</span>
+      </div>
+      <div id="zuzhi" class="bigeditdeletebtn"  (click)='xianshi(4)'  ngClass="buildingbtnchecked">
+        <span (click)='this.chooseBiaoti=4'>组织指挥要点</span>
+      </div>
+    
+  </div>
+  <!--中间文字-->
+  <div class="wenzi" id="aaa">
+    <div class="scrollbar"></div>
+  </div>
+  <div style="width: 100%;">
+    <button class="button" style="float: right;margin-right: 30px;">分享</button>
+  </div>

src/app/ui/disposal-node/disposal-node.component.scss

@@ -0,0 +1,84 @@
+
+.icongray{
+  color: #D9D0DC;
+}
+//头部操作栏
+.headerOperate {
+    position: relative;
+    span{
+      font-size: 18px;
+    }
+    flex: 2%;
+    display: flex;
+    align-items:center;
+    min-height: 40px;
+    box-sizing: border-box;
+    margin: 3px 0;
+  
+    .bigeditdeletebtn{
+      border:1px solid  #0E79A9;
+      margin-right: 0px;
+      height: 80%;
+      display: flex;
+      flex-direction: column;
+      // align-items:center;/*由于flex-direction: column，因此align-items代表的是水平方向*/
+      justify-content: center;
+      user-select: none;
+      //background-image: url("../../../assets/images/标签正常.png") ;
+      background-size:100% 100%;
+      color: white;
+      span{
+        padding: 13px 13px;
+        //padding-right: 18px;
+        font-size: 24px;
+      }
+    }
+    .bigeditdeletebtn:hover{
+      cursor: pointer; 
+      //background-image: url("../../../assets/images/标签经过.png") ;
+    }
+    
+  }
+  //中间文字区域
+  .wenzi{
+      overflow:auto;
+      height: 85%;
+      width: 100%;
+      line-height: 35px;
+      .h3{
+          color: #CC5D13;
+      }
+      .scrollbar{
+        width: 30px;
+        height: 300px;
+        margin: 0 auto;
+      
+    }
+    .wenzi::-webkit-scrollbar {/*滚动条整体样式*/
+        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px;
+    }
+    .wenzi::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+        border-radius: 10px;
+         //-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+        background: #CC5D13;
+    }
+    .wenzi::-webkit-scrollbar-track {/*滚动条里面轨道*/
+        //-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+        border-radius: 10px;
+        background: #EDEDED;
+    }
+  }
+  .button {
+    border-radius: 2px;
+    background-color: #4CAF50;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+}

src/app/ui/disposal-node/disposal-node.component.ts

@@ -8,8 +8,118 @@ import { Component, OnInit } from '@angular/core';
 export class DisposalNodeComponent implements OnInit {
 
   constructor() { }
+  setTimeoutObj//延时器需要清除
 
   ngOnInit(): void {
+    console.log(this.chooseBiaoti)
+    this.setTimeoutObj = window.setTimeout(()=>{
+      this.xianshi(1)
+    },0)
   }
+  ngAfterContentInit (){
+    //this.xianshi()
+  }
+  checkedBuildingIndex:number = -1
+  chooseBiaoti=1
+  
+   //鼠标移入边框变颜色
+   yiru(yirunum){
+    var tedian=document.getElementById(yirunum)
+    tedian.style.border="1px solid  #C8CE4D"
+
+   }
+   yichu(yichunum){
+    var tedian=document.getElementById(yichunum)
+    tedian.style.border="1px solid   #0E79A9"
+   }
+   //点击切换中间显示的文字
+  xianshi(biaotinum){
+   var mianban=document.getElementById('aaa')
+   var tedian=document.getElementById('tedian')
+   var zhuyi=document.getElementById('zhuyi')
+   var chuzhi=document.getElementById('chuzhi')
+   var zuzhi= document.getElementById('zuzhi')
+   var chuzhiYuanze='';
+   if(biaotinum==4){ 
+    zuzhi.style.border="1px solid  #30BBEC"
+    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+='<span style="color: #F95E5A">救人第一、科学施救</span>'
+    chuzhiYuanze+='<span style="color: #FFFFFF">”的原则，严禁在不熟悉情况时擅自行动，严禁冒险蛮干。</br></span>'
+    chuzhiYuanze+='<span style="color: #FFFFFF">（二）现场情况基本清楚，无爆炸等次生灾害风险，灾情易于辨识研判，在技术人员指导下，果断下达指令开展灭火救援行动。</br>'
+    chuzhiYuanze+='（三）燃烧物不清，现场情况不明，难于辨识研判，参战力量要与现场保持足够的安全距离；如有人员被困，且有希望抢救受困人员生命时，指挥员应视情采取救人措施。</br>'
+    chuzhiYuanze+='（四）燃烧物不清，现场情况不明，无人员受困，难以研判决策，现场指挥员应及时采取外部控灾措施，并与现场保持适当安全距离。</br>'
+    chuzhiYuanze+='（五）燃烧物已知，无人员受困，有爆炸伤亡风险，指挥员应采取依托掩体外围抑爆控灾措施，必要时建议指挥部扩大警戒、疏散范围。</br>'
+    chuzhiYuanze+='<h3 style="color: #CC5D13">二、受理报警</h3>'
+    chuzhiYuanze+='（一）危险化学品场所发生火灾爆炸，火警等级不应小于四级；危险化学品发生泄漏事故，容易导致火灾爆炸或中毒事故发生，对人员、财产威胁严重或可能出现二次污染等情况特殊、灾情严重的灾害事故，应急救援等级不应小于三级。</br>'
+    chuzhiYuanze+='（二）事故发生后，指挥中心应迅速准确受理报警，应当询问掌握报警人信息、事故单位基本情况、主要联系方式，</span>'
+    chuzhiYuanze+='<span style="color: #F95E5A">问清危险化学品的种类、数量、危害特性和储存方式，以及有无人员被困，周边受威胁危险化学品的有关情况，</br></span>'
+    chuzhiYuanze+='<span style="color: #FFFFFF">及时告知救援人员相关情况和注意事项，同时报告指挥长和全勤指挥部成员。</br>'
+    chuzhiYuanze+='（三）指挥中心要不间断与辖区消防救援站、报警群众和单位负责人联系，根据现场情况及时调派增援力量，向参战力量推送危险化学品理化性质、处置措施和注意事项，并将灾情按要求上报上级指挥中心。'
+    chuzhiYuanze+='<h3 style="color: #CC5D13">三、力量调集</h3>'
+    chuzhiYuanze+='（一）指挥中心应及时调集辖区中队、周边化工灭火救援编队到场处置，全勤指挥部和战勤保障力量遂行出动</span>'
+   }
+   else if(biaotinum==1){
+    zuzhi.style.border="1px solid  #0E79A9"
+    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+='（2） 燃烧引起爆炸。在形成稳定燃烧的油罐的邻近油罐，在热辐射的作用下易发生爆炸，扩大火势。</br>'
+     chuzhiYuanze+='（3） 火焰高，辐射热强。爆炸后在油罐破裂位置形成的稳定燃烧，其火焰高达几十米，并对其四周产生强烈的热辐射。</br>'
+     chuzhiYuanze+='（4） 易形成沸溢与喷溅。由于重质油品具有“热波特性”，对含有一定水分或有水垫层的重质油品储罐发生火灾后，如果不能及时进行冷却控制，在其“热波特性”的作用下就会使油品内的乳化水或油层下的水垫层产生过热蒸汽，而导致发生油品的沸溢或喷溅现象。</br>'
+     chuzhiYuanze+='（5） 易造成大面积燃烧。重质油品储罐发生的沸溢、喷溅现象，在其压力的作用会将大量的油品喷洒在事故区域内，瞬间即可造成大面积燃烧，同时，对在火场内的消防战斗人员、车辆及其他装置、设备造成极大的威胁。</span>'
+   }
+   else if(biaotinum==2){
+    zuzhi.style.border="1px solid  #0E79A9"
+    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+='2、正确选择停车位置。消防车尽量停在上风或侧上风向，与燃烧油罐保持一定的安全距离。扑救重质油罐火灾时，消防车头应背向油罐，以备紧急撤离。作战行动中的部分车辆动画加上文字配音说明</br>'
+     chuzhiYuanze+='3、注意观察火场情况变化，及时发现沸溢、喷溅征兆。</br>'
+     chuzhiYuanze+='4、充分冷却，防止复燃。燃烧罐的火势被扑灭后，要继续对其实施冷却，直至使罐内油品温度降到燃点以下为止。设有保温层的原油罐可不予以冷却。轻质油品罐不会形成高温层，冷却的重点是液面以上的罐壁。救活的图片加上文字配音说明。</br>'
+     chuzhiYuanze+='5、浮顶油罐在初期火灾时，燃烧仅限于密封围堰部位，应立即启动固定泡沫灭火装置或组织泡沫管枪从固定铁梯进行强攻，消灭围堰内的火灾。作战行动中的动画加文字配音说明。</br>'
+     chuzhiYuanze+='6、注意观察和选择有利地形，尽量选取上风向处，前沿阵地的战斗人员（水枪手等）要注意利用地形地物掩护自己，并穿着铝箔隔热服。防止坍塌及爆炸对人的危害。作战行动中的动画加文字配音说明。</br>'
+     chuzhiYuanze+='7、要与工程技术人员联系，充分工艺手段灭火。</br>'
+     chuzhiYuanze+='8、火情侦察要详细、认真、全面，尤其注意关联设备和邻近装置，注意流淌火的观察和控制，防止沿沟渠蔓延。</br>'
+     chuzhiYuanze+='9、充分利用固定消防设施。</br>'
+     chuzhiYuanze+='10、灭火剂要供应充足，兵力部署要符合灭火战斗要求，集中优势兵力，一举扑灭火灾，切忌供应出现中断和零打碎敲。</br>'
+     chuzhiYuanze+='11、注意第一力量调集，调集兵力的数量要满足灭火需要，但不能过多，以免造成现场拥挤和混乱。7-11用厂区的作战行动动画做背景加上文字配音说明</span>'
+   }
+   else if(biaotinum==3){
+    zuzhi.style.border="1px solid  #0E79A9"
+    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+='<span style="color: #FFFFFF">①应综合考虑风力风向、工艺流程、地形地势、封闭管井等因素，</span>'
+     chuzhiYuanze+='<span style="color: #F95E5A">科学选择车辆站位和阵地设置；</span>'
+     chuzhiYuanze+='<span style="color: #FFFFFF">②科学设置内、外观察哨，通过单位DCS系统设内观察哨，重点监测着火罐及周边邻近罐的介质、压力、温度、液位以及预警等级；通过在外部设观察哨，实时观察燃烧烟雾、火焰以及罐体外形变化、颤动声响等，确保整个作战行动安全可控；</br>'
+     chuzhiYuanze+='③实施登罐灭火作业，在</span>'
+     chuzhiYuanze+='<span style="color: #F95E5A">完成泡沫覆盖完成后，现场人员应迅速佩戴空气呼吸器，第一时间撤离，防止硫化氢中毒。</span>'
+     chuzhiYuanze+='<h3 style="color: #CC5D13">2、泡沫灭火</h3>'
+     chuzhiYuanze+='<span style="color: #FFFFFF">①登罐灭火最佳时间；着火时间冬季在</span>'
+     chuzhiYuanze+='<span style="color: #F95E5A">60 分钟</span>'
+     chuzhiYuanze+='<span style="color: #FFFFFF">之内，夏季在 </span>'
+     chuzhiYuanze+='<span style="color: #F95E5A">40 分钟</span>'
+     chuzhiYuanze+='<span style="color: #FFFFFF">之内；</br>②登罐灭火作业，必须根据现场风向和液位合理布设进攻阵地，推进灭火过程还需注意风向变化，适时调整左右推进速度；</br> </span>'
+     chuzhiYuanze+='<span style="color: #F95E5A">③严禁将移动炮、车载炮、高喷臂架炮的泡沫和冷却水直接打入罐体浮盘中央，</span>'
+     chuzhiYuanze+='<span style="color: #FFFFFF">防止出现卡盘、沉盘。对着火罐的冷却要均匀，不能留有空白点，防止温差大导致罐体变形、塌陷；</br>④泡沫灭火时，</span>'
+     chuzhiYuanze+='<span style="color: #F95E5A">应选用同一种类、比例、倍数的泡沫，</span>'
+     chuzhiYuanze+='<span style="color: #FFFFFF">必须保证喷射的泡沫打在一侧的罐壁上，流向液面形成覆盖层，严禁不同方向同时喷射泡沫。</br>⑤固定系统操作失误，到场水罐无可利用水源，应再采取冷油循环的基础上，控制灾情。再采取紧急调集远程供水。</span>'
+     chuzhiYuanze+='<h3 style="color: #CC5D13">3、沸溢喷溅</h3>'
+     chuzhiYuanze+='<span style="color: #FFFFFF">①由于处置方法、处置程序错误或排水不及时，重质油品通常在起火</span>'
+     chuzhiYuanze+='<span style="color: #F95E5A">3-6小时</span>'
+     chuzhiYuanze+='<span style="color: #FFFFFF">后罐内出现水垫层，随着油温传导水垫层气化出现油品沸溢，喷射时间一般晚于沸溢时间，常常先发生沸溢，间隔一段时间，再发生喷溅。现场指挥员要科学把握进攻时机，运用好浮盘中央排水和罐内紧急排水两种方法，加强储罐定时积水排放；</br>'
+     chuzhiYuanze+='②一旦发生沸溢、喷溅征兆时，如罐体颤动、发出嘶撕声、浓黑的烟变白变淡、火焰变高耀眼、油面蠕动涌涨现象明显等，应立即发生撤离信号，指挥部应事先统一撤离信号、撤离的路径方式和集结区。</span>'
+   }
+    
+    mianban.innerHTML=chuzhiYuanze
+  }
+  
   
 }