diff --git a/src/app/ui/real-cases/real-cases.component.html b/src/app/ui/real-cases/real-cases.component.html
index 6c12cd1..7c1fd0f 100644
--- a/src/app/ui/real-cases/real-cases.component.html
+++ b/src/app/ui/real-cases/real-cases.component.html
@@ -35,13 +35,13 @@
             <td style="width:20%;cursor:pointer">详情</td>
         </thead>
         <tbody id="shujubody" >
-            <tr *ngFor="let leisi of leisiYuan">
+            <tr *ngFor="let leisi of leisiYuan; let key=index">
                 <td style="color: #FFFFFF;height: 10%;">{{leisi.danweiName}}</td>
                 <td style="color: #FFFFFF;">{{leisi.year}}</td>
                 <td style="color: #FFFFFF;">{{leisi.zhoahuo}}</td>
                 <td style="color: #FFFFFF;">{{leisi.weizhi}}</td>
                 <td [ngClass]="{'tdyanse56':leisi.xiangjin>=50&&leisi.xiangjin<=60,'tdyanse78':leisi.xiangjin>60,'tdyanse':leisi.xiangjin<50}">{{leisi.xiangjin}}%</td>
-                <td style="color: #CC5D13;" (click)="ShowHide()" ><span style="cursor:pointer">查看详情</span></td>
+                <td style="color: #CC5D13;" (click)="ShowHide(key)" ><span style="cursor:pointer">查看详情</span></td>
             </tr>
         </tbody>
     </table>
@@ -50,19 +50,19 @@
 <div class="tanchuang" id="tanchuang" *ngIf="isshow">
     <!--弹窗头部-->
     <div class="headerOperate">
-        <div id="tedian" class="bigeditdeletebtn"   >
+        <div id="tedian" class="bigeditdeletebtn" [ngClass]="{'biankuang': chooseid == 0}" (click)="clickHead(0)" >
           <span>基本信息</span>
         </div>
-        <div id="zhuyi" class="bigeditdeletebtn" >
+        <div id="zhuyi" class="bigeditdeletebtn" [ngClass]="{'biankuang': chooseid == 1}" (click)="clickHead(1)">
           <span>事故特点</span>
         </div>
-        <div id="chuzhi" class="bigeditdeletebtn" >
+        <div id="chuzhi" class="bigeditdeletebtn" [ngClass]="{'biankuang': chooseid == 2}" (click)="clickHead(2)">
             <span>处置经过</span>
           </div>
-        <div id="chuzhi" class="bigeditdeletebtn" >
+        <div id="chuzhi" class="bigeditdeletebtn" [ngClass]="{'biankuang': chooseid == 3}" (click)="clickHead(3)">
             <span>几点体会</span>
           </div>
-        <div id="zuzhi" class="bigeditdeletebtn" >
+        <div id="zuzhi" class="bigeditdeletebtn" [ngClass]="{'biankuang': chooseid == 4}" (click)="clickHead(4)">
             <span>存在不足</span>
           </div>
           <div style="float: right;margin-left: 50px;" >
@@ -73,30 +73,18 @@
         
       </div>
       <!--弹窗中间部分-->
-      <div class="tanCenter">
+      <div class="tanCenter" >
           <!--左侧-->
-          <div class="centerLeft">
-            <div class="tanCenterbtn">
-                <span>码头基本情况</span>
-              </div>
-              <div  class="tanCenterbtn">
-                <span>事故油轮基本情况</span>
-              </div>
-              <div  class="tanCenterbtn">
-                <span>石脑油理化性质</span>
-              </div>
-              <div  class="tanCenterbtn">
-                <span>消防水源及消防设施情况</span>
-              </div>
-              <div  class="tanCenterbtn">
-                <span>码头基本情况</span>
+          <div class="centerLeft" >
+            <div class="tanCenterbtn" >
+                <span [ngClass]="{'biankuang': key == chooseleft}" (click)="clickLift(key)" *ngFor="let item of centerdata;let key=index">{{item.name}}</span>
               </div>
           </div>
           <!--右侧-->
           <div class="centerRight">
-              <span>八所港危化品码头位于东方市滨海南路，东侧为中海石油建滔化工有限公司化工厂区（甲醇项目）、中海油东方石化有限责任公司化工厂区（DCC项目），西侧、北侧、南侧为大海。码头设置3个泊位，1号泊位为10000吨级，2号泊位为5000吨级，3号泊位为50000吨级。该码头目前运营工业园区六家公司的产品，共有甲醇、原油、汽油、柴油、LPG、丙烯、MTBE等16种作业介质，年吞吐量约为520万吨。</span>
+              <span>{{zjxinxi}}</span>
           </div>
-          <div style="width: 100%;position: absolute;bottom: 30px;right: 20px;">
+          <div style="width: 100%;position: absolute;bottom: 0px;right: 0px;">
             <button class="button" style="float: right;margin-right: 30px;">分享</button>
         </div>
       </div>
diff --git a/src/app/ui/real-cases/real-cases.component.scss b/src/app/ui/real-cases/real-cases.component.scss
index 29b97d5..f291888 100644
--- a/src/app/ui/real-cases/real-cases.component.scss
+++ b/src/app/ui/real-cases/real-cases.component.scss
@@ -135,10 +135,8 @@
       height: 100%;
       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{
@@ -205,6 +203,7 @@
     .tanCenterbtn{
         //margin-top: 5px;
         width: 100%;
+        height: 100%;
       border: 1px solid #30bbec;
       //margin-right: 0px;
       display: flex;
@@ -216,6 +215,8 @@
       background-size:100% 100%;
       color: white;
       span{
+        cursor:pointer;
+        border-bottom:1px solid #30bbec;
         padding: 8px ;
         text-align: center;
         //padding-right: 18px;
@@ -224,6 +225,7 @@
     }
       }
       .centerRight{
+        overflow: auto;
           padding-top: 10px;
           height: 90%;
           width: 65%;
@@ -249,4 +251,10 @@
     margin: 4px 2px;
     cursor: pointer;
 }
+
+//点击后边框变色
+.biankuang{
+  //border:1px solid red;
+  background-color: #F7BA2A;
+}
   
diff --git a/src/app/ui/real-cases/real-cases.component.ts b/src/app/ui/real-cases/real-cases.component.ts
index 7299cd3..e6d6f0b 100644
--- a/src/app/ui/real-cases/real-cases.component.ts
+++ b/src/app/ui/real-cases/real-cases.component.ts
@@ -20,18 +20,200 @@ export class RealCasesComponent implements OnInit {
     {danweiName:"海南东方市八所港危化品码头",year:"2016年",zhoahuo:"石脑油",weizhi:"丰盛油8油轮发动机舱",xiangjin:parseFloat("10%")}
     
   ]
+  //弹窗数据
+  tandata=[
+    {key:0,zongdata:[
+      {name:"基本信息",xinxidata:[
+        {name:"单位基本情况",xinxi:"江苏德桥化工仓储有限公司位于江苏省靖江市新港园区，是由新加坡恒阳石化物流有限公司投资组建的液体石化产品储运公司，"
+        +"占地面积31.5万m2，现有员工130人，罐区13个、储罐139个，储存能力约58.3万m3。事故发生时储存有汽油、石脑油、甲醇、二氯乙烷、三氯乙烯、四氯乙烯、"
+        +"液化烃、芳烃、醋酸乙酯、醋酸丁酯、冰醋酸等25种危化品，共计21.12万吨，其中：油品约14万吨、液态化学品近7万吨、主要组分为C3、C4的液化烃约1420吨。"
+        +"事故单位北侧400m为村庄，东侧120m为储存能力52万m3、22个易燃易爆危化品储罐的联合安能石化有限公司，南侧300m为长江主航道，西侧50m为长江丹华港。"},
+        {name:"主要工艺流程",xinxi:"德桥化工仓储有限公司是典型的危化品储运企业，主要从事液态散化、油品及液化气体的仓储中转、分拨、灌装业务。厂区设有2个软管交换站，"
+        +"作为物料集中配输中心，通过输送管线分别连接长江码头、罐区储罐和厂区装卸台，实现危化品物料从码头—罐区—装卸台间的进出双向输转。其中，1号交换站：设有发船泵5台、"
+        +"发车泵30台，对应11、12、21、22罐区60个储罐的物料分输；2号交换站：设有发船泵6台、发车泵36台，对应13、14、15、23、24、25罐区58个储罐的物料分输。"
+        +"事故所在的2号交换站，位于厂区中间，24罐区北侧，为半敞开式框架结构，建筑面积1482m2，交换站下层管廊设有码头管线12根，连接长江码头，长度741-1102m、"
+        +"管径200-300mm；上层管廊设有发车管线36根，连接厂区装卸台，长度477-601m、管径100mm；底部分布有储罐内管线58根，分别连向各罐区储罐的罐根，因各罐区位置不同，"
+        +"管线长度也不一样，总长约为1.1km。事故发生时，长江码头上的码头海油318（船名）、赣华强化016（船名），正在通过2号交换站，分别利用码头206号管线（管径250mm）、"
+        +"305号管线（管径200mm）进行卸汽油至2411储罐、卸醋酸乙酯至2307储罐的作业。其他10条管线内有残留物料。"},
+        {name:"重点危险罐区",xinxi:"厂区危险等级最高的物料：燃烧或爆炸能产生剧毒光气的2406号二氯乙烷罐（存量4274吨）、1108号三氯乙烯罐（存量1988吨）和1105、1109、"
+        +"2210、2213、2214号四氯乙烯罐（存量9315吨）以及燃烧爆炸后威力巨大、主要组分为C3、C4 的901-926号液化烃罐（存量1536吨）。二氯乙烷：无色或浅黄色透明液体，有类似氯仿的气味，"
+        +"微溶于水，可混溶于醇、醚、氯仿等，主要用于作蜡、脂肪、橡胶等的溶剂及谷物杀虫剂；属高毒类，对眼睛及呼吸道有刺激作用，吸入可引起肺水肿，抑制中枢神经系统、刺激胃肠道和引起肝、肾及肾上腺损害；"
+        +"其蒸气与空气形成爆炸性混合物，遇明火、高热能引起燃烧爆炸，与氧化剂能发生强烈反应，受高热分解产生有毒的腐蚀性气体。熔点-35.7℃、闪点13℃、沸点83.5℃、饱和蒸气压13.33Kpa／29.4℃，爆炸极限6.2%-16%。"
+        +"有害燃烧产物：一氧化碳、二氧化碳、氯化氢、光气。三氯乙烯：无色透明液体，有似氯仿的气味，不溶于水，可混溶于乙醇、乙醚等多数有机溶剂，主要用于脱脂、冷冻、农药、香料、橡胶工业、洗涤织物等；吸入后出现头痛、"
+        +"头晕、酩酊感、嗜睡等，重者发生谵妄、抽搐，甚至昏迷、呼吸麻痹或循环衰竭；其蒸气与空气形成爆炸性混合物，遇明火、高热能引起燃烧爆炸，与强氧化剂可发生反应，受高热分解产生有毒的腐蚀性气体。熔点-87.1℃、闪点32.2℃、"
+        +"沸点87.1℃、饱和蒸气压13.33Kpa／32℃，爆炸极限12.5%-90%。有害燃烧产物：一氧化碳、二氧化碳、氯化氢、光气。"
+        +"四氯乙烯：无色液体，有氯仿样气味，不溶于水，可混溶于乙醇、乙醚等多数有机溶剂，主要用作溶剂；吸入急性中毒者有上呼吸道刺激症状、流泪、流涎，随之出现头晕、头痛、恶心、运动失调及酒醉样症状；一般不会燃烧，"
+        +"但长时间暴露在明火及高温下仍能燃烧；若遇高热可发生剧烈分解，引起容器破裂或爆炸事故；受高热分解产生有毒的腐蚀性气体。熔点-22.2℃、沸点121.2℃、饱和蒸气压2.11Kpa／20℃。有害燃烧产物：氯化氢、光气。"},
+        {name:"着火区域情况",xinxi:"1、起火区域。起火位置为2号交换站。事故发生时，2号交换站进出料管线内存有汽油、石脑油、甲醇、芳烃、醋酸乙酯、醋酸丁酯、冰醋酸等物料，与其相连的罐区共存储12种、约15.8万吨的危化品。"
+        +"后期起火的2401罐所在罐区，位于厂区中部，共有12个储罐，呈东、西两排分布，罐区防火堤长170m、宽70m、高1.1m，罐组隔堤高1m，最小罐间距10m。其中，2401-2408号为内浮顶罐、2409-2412号为拱顶罐，2401、2402罐罐容2500m3，"
+        +"其余均为3750m3。事故发生时，2401、2402、2403、2404、2407、2409、2410、2411罐储存汽油共计13482吨，2408、2412罐储存甲醇共计1895吨，2405罐储存汽油添加剂MTBE（又称甲基叔丁基醚）1675吨，2406罐储存二氯乙烷4274吨。"
+        +"2、毗邻情况。距离着火区域南侧7-8m为2401-2412罐区，储存裂解汽油、石脑油、甲醇、二氯乙烷等约1.8万吨；北侧66m为1301-1308罐区，储存甲醇约2.3万吨；东侧36m为2301-2316罐区，储存醋酸乙酯、醋酸丁酯、冰醋酸等约1.6万吨；"
+        +"西侧36m为2501-2504罐区，储存混合芳烃约1.5万吨；西侧100m为液化烃罐区，储存主要组分为C3、C4的液化烃约1536吨。"},
+        {name:"单位消防设施及水源情况",xinxi:"事故单位设有消防水池1个，容积4864m3；消防水泵房位于厂区东侧，设有消防水泵3台，每台功率480kW、流量250L∕s、扬程130m；消防给水管网为环状、管径500mm，采用稳高压系统，平时压力0.7Mpa；"
+        +"厂区共有消火栓132只、固定水炮54门。泡沫站位于2号交换站北侧，设有泡沫储罐2座，储存3%型抗溶性水成膜泡沫18吨，泡沫混合液主管道管径200-250mm。各罐区均设有水喷淋冷却系统，除液化烃罐区外，其他罐区还设有泡沫灭火系统；"
+        +"1、2号交换站未设置自动消防设施。厂区四面有人工河流（护仓河）环绕，南临长江航道，西连丹华港，均可作为消防取水码头。"},
+        {name:"单位及周边消防力量情况",xinxi:"德桥化工仓储有限公司只建有微型消防站，没有企业专职消防队。周边20km范围有1个现役消防队、1个政府专职消防队，共有消防车11辆、队员53人，总载水量59吨、泡沫量12.4吨，距离最近的新港城专职队约5公里。"},
+        {name:"当日气象情况",xinxi:"气象资料显示：22日-23日，白天多云，夜里多云转阴有小雨，东南风3-4级，最低气温15-16℃，最高气温26-27℃。"}
+      ]},
+      {name:"事故特点",xinxidata:[
+        {name:"化学品种类多，危险性大",xinxi:"事故厂区储存有汽油、石脑油、甲醇、二氯乙烷、三氯乙烯、四氯乙烯、液化烃、芳烃、醋酸乙酯、"
+        +"醋酸丁酯等各类危化品共计25种、21万余吨，且分储在13个罐区内。库区、罐区、罐组、罐与罐的安全间距小，同一罐区、罐组内存有多种易燃易爆、"
+        +"有毒有害物料，成分复杂，风险极高。特别是厂区储存4274吨二氯乙烷、1988吨三氯乙烯、9315吨四氯乙烯，一旦遇到高热或发生爆炸、燃烧，会快速释放大量的剧毒光气。"},
+        {name:"储罐类型复杂，处置难度高",xinxi:"罐区内有拱顶、内浮顶、全压力球型、半冷冻球型等多种储罐类型，储存物料有油、烷烃、醇、酯等，"
+        +"处置方法和灭火药剂类型不同，特别是厂区南侧的二氯乙烷、东北侧的三氯乙烯和四氯乙烯罐以及主要组分为C3、C4的液化烃罐区，危险性大、处置难度高。"},
+        {name:"地势落差大，流淌火蔓延快",xinxi:"厂区地势“中间高、南北低”，地面绝对标高相差约1.55m，道路坡度近1%。发生爆炸后，位于厂区中部的2号交换站上方管线被拉断，"
+        +"大量易燃易爆物料外泄并沿地势急速流淌燃烧，将邻近罐区两侧的冷却管线和泡沫灭火管线烧毁。扑救过程中，大面积流淌火先后5次突破灭火防线，烧毁部分器材装备，严重威胁参战官兵生命安全。"},
+        {name:"周边环境复杂，指挥决策难度大",xinxi:"事故单位距离长江主航道仅300m，有相邻的危险品码头2个，事发时正在作业的危险品运输船只2艘，其他危险品船只若干；"
+        +"周边5公里范围有19个村镇6万余名群众。加之事故单位有139个危化品储罐，与其一路之隔的联合安能化工有限公司还有22个、总储量达52万m3的易燃易爆物料储罐，火势一旦失控，极易引起连锁反应，给周边数十平方公里区域和长江水域带来不可估量的灾难。"}
+      ]},
+      {name:"处置过程",xinxidata:[
+        {name:"辖区力量到场",xinxi:"4月22日7时许，江苏德桥仓储有限公司组织承包商（华东建设安装有限公司）3名工人进入厂区2号交换站进行检修作业；"
+        +"8时10分，在未实施有效监护的情况下动火作业；9时13分，因作业产生的明火引起2号交换站排污沟内残留油体燃烧，烧裂正在进料作业的206、305号管线"
+        +"与储罐间的连接软管，造成管线内的裂解汽油和醋酸乙酯大量外泄燃烧；现场人员关闭了206、305号管线的紧急切断阀，并进行自救；9时16分，DCS系统发出指令，"
+        +"关闭与2号交换站相连的物料输送管道的电动阀；9时18分，现场人员撤离前对2401罐未完全关闭的电动阀实施手动关阀（旋转了4圈）；9时18分55秒、9时19分38秒，"
+        +"大火烧裂交换站部分管线，物料外泄加剧，先后发生2次较大规模爆炸；9时26分，事故单位向119报警。9时34分至49分，辖区中队新港城专职队和靖江中队相继到场。"
+        +"此时，2号交换站一片火海，燃烧面积约2000㎡，火焰高达几十米，上层管廊出现局部坍塌。经询问单位技术人员，厂区所有生产系统已紧急停车，着火区域及邻近罐区的消防泵、"
+        +"喷淋系统和固定炮已开启，燃烧物质为醇、脂、油类等易燃液体（主要为206、305号管线内的裂解汽油和醋酸乙酯）。到场力量迅速进行战斗部署：新港城专职队一号车泡沫水罐车"
+        +"停靠1号交换站附近，从着火区域东侧架设1门移动炮阻截火势、1门移动炮冷却2402罐；二号车水罐车占据氮气站附近消火栓，向一号车供水；三号车抢险救援车停靠厂区东门外，"
+        +"负责外围警戒和增援车辆引导。靖江中队一号车压缩空气泡沫车停靠南侧2411罐附近，从着火区域西南侧架设1门移动炮冷却2401罐（后期改为2支泡沫枪灭火）；二号车泡沫水罐车占据"
+        +"南侧人工河，向一号车供水；三号车高喷车停靠西侧2501罐附近，从着火区域西北侧压制火势；四号车泡沫水罐车占据西侧926罐附近消火栓，向三号车供水；五号车泡沫水罐车占据北侧人工河，"
+        +"从着火区域北侧架设1门移动炮阻截火势；六号车抢险救援车停靠厂区东门外，负责外围警戒和增援车辆引导。10时40分，2号交换站发生第三次爆炸，站内承重结构严重受损，管廊呈V型坍塌，"
+        +"与装卸台相连的36条管线以及与码头相连的12条管线被拉断，大量带压物料加速外泄，顺地势沿罐区东、西两侧道路急速流淌，瞬间形成“全路面”流淌火。现场指挥员立即下达紧急撤退命令，"
+        +"参战官兵按照既定路线，迅速撤离至邻近的2502罐南侧未使用的罐区防火堤内。在西南侧承担主攻任务的靖江中队泡沫车驾驶员朱军军，为保证火场供水不间断、掩护战友及时撤退、抢救车辆装备，被流淌火围困，瞬间被大火吞噬，壮烈牺牲。"},
+        {name:"支队增援力量到场",xinxi:"10时50分，支队全勤指挥部和特勤、泰兴、通扬路中队到场。此时，交换站及其东、南、西侧道路的流淌火近5000m2，火焰高度约40-50m，严重威胁位于"
+        +"厂区南侧的液化烃输送管道及24、25罐区的16个储罐安全。指挥部立即组织力量从东、南、西侧部署1门暴雪泡沫炮、2支泡沫枪梯次掩护、强攻推进压制地面流淌火，并重新部署2门移动炮在西侧"
+        +"道路设置阻截阵地。同时，组织相继到场的姜堰、兴化、滨江、春晖路中队，分别从着火区域西南、东北、东南方向共增设6门移动炮，阻截火势，强行对邻近的2401、2402、2403、2404、2502罐实施冷却、抑制爆炸。"},
+        {name:"总队增援力量到场",xinxi:"总队全勤指挥部出动途中，周详总队长通过指挥中心和移动视频终端实时跟踪灾情发展态势、了解战斗部署情况，并及时向前方指挥员下达指示要求：一是迅速查明燃烧物料的种类、性质和储量；"
+        +"二是力量到场后不得盲目靠近事故核心区，应边行进边侦检，在相对安全区域设置移动炮、车载炮等阵地，确保官兵自身安全；三是组织单位技术人员采取关阀断料、紧急停车、氮封保护、启动固定消防设施等工艺措施，有效控制灾情发展；"
+        +"四是根据火场态势和力量到场情况，集中全力加强对着火区域邻近罐体的冷却，防止火势扩大蔓延；五是及时关闭罐区雨排系统，安排力量提前筑堤设防，防止流淌火蔓延；六是派出安全哨，实时观察灾情发展态势，不间断监测罐体结构变化和"
+        +"罐壁温度，明确紧急撤离路线。11时50分至12时，总队全勤指挥部和周详总队长相继到达现场，第一时间在距离2号交换站120m的配电房附近设立火场总指挥部，由周详总队长担任总指挥、高宁宇参谋长担任前沿指挥,朱晖副参谋长负责火情侦察"
+        +"和通信保障、王士军副参谋长负责统筹协调和药剂保障，责令事故单位指派熟悉厂区情况和工艺安全的技术人员到指挥部全程值守，同时架设无人机高空侦察。指挥部第一时间调取厂区平面图和DCS系统实时监测数据，并围绕着火区域进行火情侦察，"
+        +"确认着火区域南侧为混存裂解汽油、石脑油和燃烧爆炸产生剧毒光气的二氯乙烷罐区；北侧为甲醇罐区；东侧为冰醋酸、醋酸乙酯罐区；西侧为混合芳烃及主要组分为C3、C4的液化烃罐区。无人机航拍发现，2号交换站燃烧猛烈，直接烘烤南侧2401、"
+        +"2402罐和西侧2502、2504罐；东、西两侧道路形成大面积流淌火迅速向南蔓延；2401-2404罐组防火隔堤内充满流淌火。根据DCS系统监测和无人机侦察结果，考虑到现场力量与灾情态势不对等的现状，指挥部确定了“控制燃烧、冷却抑爆、筑堤设防、"
+        +"全程监测”的战术原则，并研究制定七项处置措施：一是明确将2406罐和液化烃罐区作为保护重点，集中力量冷却南侧的2401、2402、2403、2404罐和西侧2502、2504罐，阻止火势蔓延；二是组织力量在着火区域东南、西南、西北方向道路上筑堤设防，"
+        +"防止地面流淌火蔓延，威胁战斗阵地和官兵生命安全；三是核查着火罐区关阀断料情况；四是密切监视邻近储罐的结构变化，时刻监测罐体温度以及厂区可燃、有毒气体浓度；五是组织力量接应灭火药剂、装备器材厂家，做好向战斗阵地的输送投放；六是通知"
+        +"交通部门对长江航道采取禁航措施，撤离事故码头上下游船舶；七是通知环保部门做好防范水域污染的应对措施。12时05分至13时10分，无锡、南通、扬州支队增援力量相继到场。指挥部命令：泰州支队占据着火区域西北侧阵地，继续阻截流淌火向西侧芳烃罐区"
+        +"蔓延，重点冷却2502、2504罐，防止火势威胁液化烃罐区；无锡支队在着火区域东、西侧道路及南侧设置阵地，扑灭地面流淌火，加强冷却2401、2402、2403、2404罐进行，死保2406罐；扬州支队占据着火区域北侧阵地，阻截流淌火蔓延，加强冷却1307、1406罐；"
+        +"南通支队2套远程供水泵组分别利用东南侧消防水池和北侧人工河，向无锡和泰州支队阵地供水。12时15分许，着火区域接连传出十几声“嘭嘭”的爆炸声。侦察发现，由于长时间火焰烧烤，与2号交换站相连的部分进出料管线及盲板炸裂，管线内残存的汽油、甲醇、芳烃、"
+        +"醋酸乙酯、冰醋酸等物料大量外泄（约260吨）。随着火势猛烈燃烧，流淌火再次向东、西两侧排水明渠和道路翻腾外溢，并流淌至厂区南侧人工河流，同时越过西侧道路向芳烃罐区蔓延，2502、2504罐被浓烈的烟火笼罩，2502罐保温层局部脱落。根据火情，指挥部调整"
+        +"力量部署：在2502罐南侧未使用的罐区防火堤内设置4支泡沫枪阻截扑灭堤外流淌火；在2405—2408罐组防火堤内架设4门移动炮，加强对2403、2404罐冷却控制，继续死保2406罐；在西北侧架设2门移动炮，加强冷却2502、2504罐；在厂区南侧河面上，利用15m拉梯搭建"
+        +"紧急撤离通道；依托罐区道路和防火堤，从东南、西南、西北三个方向利用沙袋构筑防护堤。同时，考虑2406罐存在爆炸危险，为在紧急情况下掩护官兵撤退，指挥部调集2台涡喷消防车增援现场。随即，指挥部前移至距离着火点30m左右的地点。"
+        +"12时30分，省委常委、政法委书记、公安厅厅长王立科，省公安厅副厅长程建东到达现场，实地勘察灾情。王立科书记就事故处置工作提出六点要求：一是始终将参战官兵安全放在第一位，加强个人防护；二是发挥厂方技术人员作用，科学制定处置方案；"
+        +"三是全力控制灾情扩大，做好长时间作战准备；四是如实发布信息，客观规范舆论导向；五是加强外围警戒，严禁无关人员进入现场；六是尽快组织专家评估灾情发展态势。"
+        +"13时30分至17时45分，常州、苏州、镇江、南京、盐城支队和总队培训基地、公安消防部队士官学校的增援力量陆续到场。指挥部随即将整个火场划分为前、后方两个战区。"
+        +"前方以事故区域为中心，划分东、西、南、北四个战斗段，要求着火区域必须使用“全泡沫”灭火与冷却。西侧阵地：泰州、苏州、南通、镇江支队和总队培训基地部署4门移动炮、"
+        +"1门车载炮、1门高喷炮，阻截火势，加强对2401、2403、2502罐冷却，重点保护液化烃罐区。南侧阵地：无锡、常州支队部署8门移动炮，阻截火势，加强对2401、2402、2403、"
+        +"2404、2405、2406罐冷却，持续死保2406号二氯乙烷罐。东侧阵地：南京、常州、盐城、泰州支队部署8门移动炮，阻截火势，加强对2401、2402、2404、2301、2303罐冷却。"
+        +"北侧阵地：南京、扬州、泰州、南通、苏州支队部署10门移动炮、2门高喷炮、2门暴雪泡沫炮，阻截火势，加强对1307、1308罐冷却。"
+        +"后方调集全省10套远程供水泵组、4辆泡沫原液供给车、40台泡沫输转泵、1200吨抗溶性泡沫，依托厂区人工河和长江航道设立取水点，设置2个泡沫补给点，全力保障火场不间断供水、"
+        +"供液。远程供水：常州、无锡支队2套泵组利用厂区东南侧消防水池，向南侧、东侧阵地供水；苏州支队1套泵组利用北侧人工河，向北侧阵地供水；南通支队3套泵组分别利用厂区东南侧消防"
+        +"水池、北侧人工河和南面长江干道，向南侧、北侧阵地供水；扬州支队1套泵组利用北侧人工河，向北侧阵地供水；泰州支队2套泵组分别利用南侧人工河和长江主干道，向消防水池和东侧阵地供水；"
+        +"培训基地1套泵组利用北侧人工河，向西侧阵地供水。泡沫供给：分别在东、西门附近设置2个泡沫补给点，采取泡沫原液供给车输转、泡沫输转泵输转、人工搬运等多种方法，向各战斗阵地不间断补给泡沫药剂。"
+        +"14时50分，指挥部决定：组织公安消防部队士官学校132名官兵，分别在东、西、北侧进攻路线上布设第二道防护堤，组织力量死看死守，牢牢将火势控制在交换站周边区域内。"
+        +"16时11分，2号交换站火势突然急剧增大，巨大的火球腾空而起，近百米高的浓烟烈火笼罩厂区上空，东、西两侧部分道路和2401-2404罐防火隔堤内瞬间布满流淌火。加之厂区邻近"
+        +"长江、风向多次突变，固定泡沫站被大火完全吞噬，强大的热辐射对邻近2号交换站北侧的甲醇和西北侧的芳烃等罐区安全构成了极大的威胁，人员难以靠近。指挥部根据物料泄漏量、"
+        +"流淌速度及燃烧时间推断，2401-2404罐组存在储罐阀门未完全关闭，提出了“加强筑堤保护、全力阻截流淌火、持续强化冷却、伺机抵近关阀”的针对性措施。鉴于1307、1308罐体外壁温度均已超过300℃，"
+        +"命令北侧阵地的扬州、泰州、苏州支队尽全力冷却1307、1308甲醇罐。"
+        +"16时45分，紧急调集的2万米水带、30门移动炮、100套隔热服、30台泡沫输转泵、300套防毒面具全部到场，做好了打持久战的准备。"
+        +"18时，指挥部根据兵力部署、火场态势和泡沫药剂、水源准备情况，发动第一次总攻，共部署30门移动炮、3门高喷炮、1门车载炮、2门暴雪泡沫炮、21支泡沫管枪强攻灭火。"
+        +"18时30分，交换站东、西两侧地面流淌火被陆续扑灭，前期丢失的部分阵地重新占领，灭火力量与灾情态势相对均衡，火场进入拉锯相持阶段。"
+        +"18时40分，指挥部明确四项措施：一是各阵地灭火冷却强度保持均衡；二是确保泡沫药剂、油料、供水不间断；三是加紧筑堤，巩固阵地；四是战斗预备队做好轮换准备。"
+        +"19时许，淮安、宿迁、连云港、徐州4个支队，中石化华东片区的扬子石化、金陵石化、仪征化纤、南化公司、管道分公司、高桥石化6个企业专职消防队，共51辆重型泡沫车、342名队员，"
+        +"以及总队2套单车400L/s的超重型化工编队，到达现场。按照指挥部要求，立即组成战斗预备队，做好随时轮换投入战斗的准备。"
+        +"19时45分，伴随着几声巨响，数个火球接连腾起，管道再次爆裂，交换站东、西两侧道路再次出现大面积流淌火，2401罐顶鼓起，呼吸阀和泡沫产生器罐壁连接处起火，"
+        +"呈火炬型燃烧。指挥部要求前沿指挥长密切监控火情，必要时有权决定撤退，确保安全。囿于高喷车难以抵近作战、移动炮和车载炮射程不足，指挥部要求加大供给强度，加强2401罐冷却，责成企业调集氮气车沿2401罐的东南侧道路停靠，强制向2401罐实施充氮保护。"},
+        {name:"部局领导到场",xinxi:"20时10分，罗永强副局长一行到达现场。在听取情况汇报、查看无人机视频后，罗永强副局长率领部局专家组深入现场，抵近着火点侦察，与化工专家研判商讨后，"
+        +"作出战斗部署：一是即将到场的上海增援力量配合无锡支队在重点防御的西南侧阵地展开战斗；二是再次确认所有储罐阀门关闭情况；三是调用高喷车对受火势威胁较大的1307、1308罐进一步强化冷却。"
+        +"20时30分，上海总队汪永明副总队长率领增援力量到场。根据罗永强副局长指示，组织力量从着火区域西南侧架设6门移动炮，协助无锡支队阻截交换站火势，并对2401、2403罐实施冷却。"
+        +"21时50分，部消防局于建华局长带领工作组到达现场，详细听取现场情况汇报，深入前沿阵地勘察火情，准确研判火灾发展态势，迅速召集各战斗段指挥员和事故单位工程技术人员，提出五项处置措施："
+        +"一是保持足够力量对着火邻近储罐进行大强度冷却，确保不发生问题；二是从临近地区调集氮气，架设临时管线，对受火势威胁的储罐进行充氮保护；三是外接临时电源，启动西侧半冷冻球罐冰机；"
+        +"四是备足力量和药剂，择机对交换站及罐区实施强攻灭火；五是树立底线意识，组织疏散半径5公里范围内的群众。"
+        +"根据于建华局长指示，4个战斗区段分别增设1门移动炮加强对邻近罐冷却；组织对2401-2404罐组防火堤进行凿孔导流，降低液面、防止漫堤；"
+        +"加强对2401-2404罐补充氮气保护；协调当地政府疏散周边5公里范围内的群众；各战斗阵地迅速补足泡沫和油料，组织预备力量轮换，做好总攻准备。"
+        +"23日0时左右，2号交换站内火势仍呈喷射状燃烧。根据现场情况，于建华局长召集专家分析认定，罐区内仍有管线阀门未关闭，随即要求0时至1时再次发动总攻，为关阀断料创造条件。"
+        +"0时30分，各阵地共部署42门移动炮、1门高喷炮、2门车载炮、2门暴雪泡沫炮、21支泡沫管枪，对着火区域及邻近罐区发起第二次总攻，2401-2404罐组内的流淌火、"
+        +"2401罐顶呼吸阀和泡沫产生器罐壁连接处的明火被全部扑灭，2号交换站火势有所减弱。前沿侦察小组冒着强辐射热，抵近火场最前沿，反复观察火情，认为现场已具备关阀条件，"
+        +"当即向于建华局长报告。于建华局长当机立断、果断决策，命令实施关阀断料。随后，罗永强副局长亲自排查罐区管线，制定关阀方案，指挥南京支队关阀攻坚小组，"
+        +"在雾状水掩护下深入罐区防火堤内实施关阀断料。0时40分，2403、2404罐的进出料阀门被彻底关闭。"
+        +"1时10分，2401罐的进出料阀门被彻底关闭。随后，火势明显减弱。指挥部命令，在保证冷却力量的前提下，各战斗段抢抓战机，梯次掩护推进，全力围剿火势。3时10分，大火被彻底扑灭。"},
+        {name:"冷却监护、移交现场",xinxi:"大火扑灭后，现场指挥部命令参战力量继续向着火区域液面喷射泡沫，增加泡沫覆盖厚度，防止复燃。同时继续冷却相邻罐体、持续降温，"
+        +"安排专人对罐体温度和水样、空气进行不间断检测。4时25分，2401、2403、2404罐壁温度降至40℃以下，其它罐降至20℃左右，空气、水体检测结果基本正常。"
+        +"9时30分，指挥部召集参战队伍指挥员进行战斗小结，明确苏州、无锡、南通、镇江、扬州5个支队，25辆消防车、150名官兵留守现场，配合泰州支队实施监护，其余力量陆续返回。"
+        +"25日12时，现场所有储罐温度均降至常温，增援支队全部撤回，泰州支队17辆消防车、102名官兵继续监护。"}
+      ]},
+      {name:"几点体会",xinxidata:[
+        {name:"领导高度重视、正确指挥是先决条件",xinxi:"事故发生后，按照习近平总书记、李克强总理作出的批示指示，郭声琨部长，黄明、李伟副部长坐镇公安部指挥中心，"
+        +"通过音视频系统指导现场处置工作，尤其是李伟副部长全程、实时跟踪指导一线战斗行动，明确了5条富有实效的战斗措施，为整个灭火救援战斗提供了科学遵循。江苏省委书记罗志军、"
+        +"省长石泰峰，省委常委、政法委书记、公安厅厅长王立科，公安部消防局局长于建华、副局长罗永强深入火场前沿阵地，指导事故处置工作，鼓舞士气、凝聚警心，为全体参战官兵注入了强大的精神动力。"
+        +"特别是于建华局长、罗永强副局长率先垂范、靠前指挥，准确研判、抢抓战机、果断决策，采取了一系列行之有效的灭火措施，从根本上遏制了火灾态势，为最终圆满打赢了这场险象环生的战斗起到了决定性作用。"},
+        {name:"力量调集充分、响应迅速是有力支撑",xinxi:"针对石油化工火灾的特殊复杂性和灾情预判情况，总队第一时间提请省政府启动重特大灾害事故应急处置预案，按火灾最高等级调集全省13个支队和总队培训基地28个化工编队、"
+        +"4个战勤保障编队、10套远程供水泵组、124辆大功率泡沫水罐车、161门移动炮、1200吨抗溶性泡沫以及通信、侦检、洗消等装备器材，部消防局紧急调派公安消防部队士官学校和上海总队40辆车、332名官兵到场增援，为打好初战控制、有效遏制灾情扩大提供了有力保障。"},
+        {name:"发挥专家作用、科学施救是关键所在",xinxi:"事故发生后，部消防局和总队紧急调派化工灭火专家遂行出动、辅助决策。专家组根据侦察结果，实时评估灾情发展态势和罐体设备安全，及时提出了筑堤设防、全力冷却、"
+        +"注氮排险等处置建议。尤其是公安部灭火救援专家组郝伟同志，在事故单位2次关阀未果的情况下，多次抵近罐区侦察，与罗永强副局长一起全程指导攻坚组关阀，对成功扑灭大火起到了十分关键的作用。"},
+        {name:"应急联动高效、保障有力是重要基础",xinxi:"事故发生后，省、市两级市政府迅速启动应急预案和联动机制，公安、安监、交通、气象、卫生、供水、供电、环保等部门第一时间响应，调集了客运车、环境检测车、"
+        +"120救护车、叉车、运沙车等各种车辆40余辆和砂土、水泥等应急物资，协同开展了外围警戒、人员疏散、物资保障、环境监测、医疗急救等工作。总、支队两级战勤保障和应急通信力量遂行作战，调集战勤保障车辆22辆、"
+        +"器材装备600余件套、水带2万多米、泡沫灭火剂约1200吨、油料约52吨，综合利用4G球机、3G单兵、卫星通信指挥车、无人机等设备，实时采集全景视频、火点分布、罐体温度等数据，不间断上传重点部位图像，为现场指挥决策提供了科学参考。"},
+        {name:"官兵英勇顽强、舍生忘死是根本保证",xinxi:"面对高温、浓烟、毒害气体和随时可能发生的爆炸，参战官兵从将军到士兵无一人退缩，始终战斗在灭火最前沿，面对生与死的考验，表现出应有的血性和担当。在多次进攻受阻的情况下，全体参战官兵顶着巨大压力，敢打敢拼、死守“红线”，与大火展开拉锯战、攻坚战，彰显了消防铁军英勇善战、敢打必胜的战斗精神。"}
+      ]}
+    ]},
+    {key:1,zongdata:[
+    {name:"基本信息",xinxidata:[
+    {name:"码头基本情况",xinxi:"八所港危化品码头位于东方市滨海南路，东侧为中海石油建滔化工有限公司化工厂区（甲醇项目）、中海油东方石化有限责任公司化工厂区"
+    +"（DCC项目），西侧、北侧、南侧为大海。码头设置3个泊位，1号泊位为10000吨级，2号泊位为5000吨级，3号泊位为50000吨级。该码头目前运营工业园区六家公司的产品，"
+    +"共有甲醇、原油、汽油、柴油、LPG、丙烯、MTBE等16种作业介质，年吞吐量约为520万吨。"},{name:"事故油轮基本情况",xinxi:"“丰盛油8 号”船体总长99.87m，型宽14.2m，吃水深度7.1m,"
+    +"满载为4800 吨。船体前端和中段共有10 个储油舱，分布在船体左右两侧，每个储油舱480 吨。船尾甲板以上共3 层，分别为驾驶室、船员舱和生活舱。船尾负二层为船员舱，负一层底舱为机"
+    +"舱,机舱和货舱之间为泵舱。事故发生时油轮已装油完毕正准备离港。"},{name:"石脑油理化性质",xinxi:"石脑油化学俗名为溶剂油、粗汽油，是一种无色或浅黄色易燃液体，有特殊气味。其蒸汽与空气混合，能形成爆炸性混合物。"
+    +"相对密度为0.78～0.97，闪点小于-18℃，燃点为260℃，爆炸极限%（V/V）为1.2～6.8。不溶于水，溶于多数有机溶剂，主要成分为烷烃的-C4～C6-成分。蒸汽比空气重，沿地面扩散并易积存于低洼处，遇火源会着火回燃。"
+    +"能够通过呼吸道吸入、皮肤接触、食入等方式进入体内，石脑油蒸气可引起眼及上呼吸道刺激症状。如浓度过高，几分钟即可引起呼吸困难、紫绀等缺氧症状。"},
+    {name:"消防水源及消防设施情况",xinxi:"该码头设施的消防用水采用两路供水，一路由后方甲醇项目厂区2 座各为容量4000m3 的消防水池提供，另外一路由后方精细化工项目厂区内2 座各为容量10000m3的消防水池提供，由2 条管"
+    +"径DN400mm 的消防供水干管接至码头，消防管网供水能力为600L/S，压力0.7～1.2MPa。码头设置46 套消防栓箱、1 套水幕系统、2 套ZPF3000 干粉灭火系统、8 座消防炮塔（每座炮塔上有"
+    +"电动遥控消防泡沫炮和水炮各一门，消防水炮和消防泡沫炮流量均为80L/s），备有抗溶性水成膜泡沫25 吨，存储在泡沫泵房内，通过比例混合器直接进入泡沫管线，向泡沫栓供给。码头周边"
+    +"1000m 范围内有可用市政消火栓10 个（园区三路2 个，疏港北路2 个，疏港三中路6 个），压力为0.2～0.3MPa，另距离码头约300m处有华能电厂码头可作为海水取水点。"}
+  ]}
+  ]}
+  ]
+  zongdata
+  centerdata
+
   //打开说话框
   isOpenTalk = false
   openTalkDiv(){
     this.isOpenTalk = !this.isOpenTalk
   }
+  //详情页
   isshow=false//控制显隐
-  ShowHide (){
-    console.log("000")
+  ShowHide (key){
+    console.log(this.tandata)
+    this.zongdata=this.tandata[key].zongdata
+    this.centerdata=this.zongdata[0].xinxidata
+    console.log(this.zongdata)
    this.isshow=true
   }
   ShoeFalse(){
     this.isshow=false
+    /* this.zongdata=null
+    this.centerdata=null */
+    this.zjxinxi=""
+    this.chooseleft=-1
+    this.chooseid=0
+  }
+  //点击弹窗头部
+  chooseid=0
+  clickHead(num){
+    this.zjxinxi=""
+    this.chooseid=num
+    this.centerdata=this.zongdata[num].xinxidata
+    this.chooseleft=-1
+    console.log(this.centerdata)
+  }
+  
+  //点击弹窗左侧菜单栏
+  zjxinxi
+  chooseleft
+  clickLift(key){
+    this.chooseleft=key
+    console.log(key)
+    this.zjxinxi=this.centerdata[key].xinxi
   }
 
 }