4.11

src/style/style.css

@@ -1,6 +1,9 @@
 .fontcolor{
 color: #fff;
 }
+body,html{
+  background: radial-gradient(closest-side, #0B338B , #1C253D);
+}
 .jc_padding {
     /* padding: 18px 10px; */
   }
@@ -159,10 +162,10 @@ color: #fff;
     height: 40px;
     text-align: left;
     padding: 0 20px;
-    border-bottom: 1px solid;
+    /* border-bottom: 1px solid;
     border-image: linear-gradient(180deg, rgb(31, 107, 255), rgba(31, 107, 255, 0.48)) 1 1;
     box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
+    border-radius: 0px 0px 0px 0px; */
   }
   .dialog_class .my-header .el-image {
     padding: 0px 10px 0 0;
@@ -170,7 +173,7 @@ color: #fff;
   .dialog_class .my-header h4 {
     font-weight: bold;
     font-size: 12px;
-    color: #68ADFF;
+    color: #fff;
     line-height: 14px;
     text-align: left;
     font-style: normal;
@@ -217,16 +220,16 @@ color: #fff;
   }
   
   .l_btn .borderimg {
-    width: 109px;
+    /* width: 109px;
     height: 30px;
     background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2); */
     /* border: 1px solid rgba(31, 107, 255, 1); */
-    border-image: linear-gradient(180deg, rgb(31, 107, 255), rgba(31, 107, 255, 0.48)) 1 1;
+    /* border-image: linear-gradient(180deg, rgb(31, 107, 255), rgba(31, 107, 255, 0.48)) 1 1;
     border-radius: 4px;
     display: flex;
     display: inline-block;
-    box-sizing: border-box;
+    box-sizing: border-box; */
   }
   
   .borderimg {
@@ -313,7 +316,7 @@ color: #fff;
   }
   
   .animation_s {
-    padding: 25px;
+    padding: .1563rem;
   }
   
   .tanniu ul {
@@ -352,8 +355,8 @@ color: #fff;
 }
 
 .dialog_class {
-    background-color: rgba(13, 22, 57, 0.96) !important;
-    width: 482px;
+    background-color: rgba(0, 102, 201, 0.1) !important;
+    width: 500px;
 
 
 
@@ -388,29 +391,18 @@ color: #fff;
     color: #68ADFF !important;
 }
 
-.l_btn .borderimg {
-    width: 109px;
-    height: 30px;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    /* border: 1px solid rgba(31, 107, 255, 1); */
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-
-    border-radius: 4px;
-    display: flex;
-    display: inline-block;
-    box-sizing: border-box;
-}
-
 .l_btn .el-button {
     width: 100%;
     height: 100%;
     border-radius: 4px;
     color: #fff;
-    background: rgba(104, 173, 255, 0.3);
-    border: 1px solid rgba(31, 107, 255, 1);
+    /* background: rgba(104, 173, 255, 0.3);
+    border: 1px solid rgba(31, 107, 255, 1); */
+    background-image: url(../assets/img/Rectangle3991.png);
+    background-position: center;
+    background-repeat: no-repeat;
 }
-
+.shigu
 .class_footer {
     position: absolute;
     bottom: 17px;
@@ -886,7 +878,7 @@ border-image: linear-gradient(90deg, rgba(91, 175, 222, 0), rgba(91, 175, 222, 1
     font-size: .0625rem !important;
   }
   .el-table__body-wrapper .el-table__row .el-button:focus, .el-button:hover{
-    background-color:rgba(255, 255, 25, 0) !important;;
+    background-color:rgba(104, 173, 255, 1) !important;;
       color: rgba(255, 255, 25, 1) !important;
       border: none;
  
@@ -907,7 +899,7 @@ ol {
     cursor: pointer;
 }
 .tablebk .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
-    background-color: rgba(255, 255, 25, 0.5) !important;
+    background-color: #F9A466  !important;
 }
 .shigutable  .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
     background-color: rgba(255, 255, 25, 0) !important;
@@ -1101,18 +1093,19 @@ ol {
   line-height: 30px;
 }
 .l_btn .borderimg {
-  width: 70px;
-  height: 30px;
-  font-size: 12px;
-  background: rgba(104, 173, 255, 0.3);
-  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-  /* border: 1px solid rgba(31, 107, 255, 1); */
-  border-image: linear-gradient(180deg, rgb(31, 107, 255), rgba(31, 107, 255, 0.48)) 1 1;
-  font-weight: bold;
   border-radius: 4px;
   display: flex;
   display: inline-block;
   box-sizing: border-box;
+  width: 63px;
+  height: 31px;
+  font-size: 12px;
+  border-radius: 4px;
+  display: flex;
+  display: inline-block;
+  background-image: url(../assets/img/Rectangle3991.png);
+  background-position: bottom;
+  background-repeat: no-repeat;
 }
 .classtab .jc_padding .el-table {
   height: 30px !important;
@@ -1122,6 +1115,7 @@ ol {
   width: 100%;
   position: fixed;
   bottom: 0;
+  z-index: 333333;
 }
 .footet-bottom {
   height: 52px;
@@ -1421,12 +1415,119 @@ font-size: .0833rem;
 .iconimg1{
   padding: 0 12px;
 }
-.echart{
-  padding: .0521rem;
-}
+
 .bganimation .el-collapse-item__content {
   background: rgba(13, 53, 133, 0.5);
 }
 .bganimation  .el-slider__bar{
   background-image: linear-gradient(to right, #ACD6FF , #105CF0 );
+}
+.modle{
+  width: 100%;
+  height: 299px;
+  padding: .0365rem;
+ 
+}
+.je_left {
+  width: 80%;
+}
+.waterdisaster{
+  padding: .0729rem;
+  /* background: radial-gradient( #0B338B 0%, #1C253D 100%);
+border-radius: 0px 0px 0px 0px; */
+background: rgba(26, 38, 69, 0.4);
+}
+.re_tele{
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: .0729rem;
+  color: #FFFFFF;
+  letter-spacing: 1px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  padding: .0521rem;
+  position: relative;
+}
+.re_tele .btn{
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: .401rem;
+height: 22px;
+text-align: center;
+line-height: 22px;
+text-align: center;
+font-family: Microsoft YaHei, Microsoft YaHei;
+font-weight: 400;
+font-size: 0.0625rem;
+color: #FFFFFF;
+font-style: normal;
+text-transform: none;
+background-image: linear-gradient(to right, #ACD6FF , #105CF0 );
+}
+.jiancd{
+display: flex;
+justify-content: space-between;
+}
+.je_right{
+  width: 0.9167rem;
+  position: relative;
+  padding: 0 0.1875rem;
+  height: 114px;
+  overflow: hidden;
+
+}
+.duijc .zongjili{
+  margin-top: 5px;
+}
+.jccolor{
+color: #FFF500 ;
+}
+.echartxian{
+  padding: .0521rem;
+  background-color: rgb(0,102,201,0.1);
+  border-radius: 0px 0px 0px 0px;
+    border: 1px solid;
+    border-image: linear-gradient(326deg, rgba(0, 102, 201, 1), rgba(91, 175, 222, 1)) 1 1;
+}
+.bkxolo{
+  height: calc(100vh - 58px);
+  background: radial-gradient(closest-side, #0B338B , #1C253D);
+    z-index: 33;
+}
+.reimg{
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  text-align: left;
+  background-image: url(../assets/img/Group1275.png);
+  background-size: 100% 100%;
+  padding-left: 50px;
+}
+.resultleftxian{
+  box-shadow: inset -4px 7 12px 0px rgba(140,198,255,0.01);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid;
+  border-image: linear-gradient(237deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;
+}
+.el-table {
+  border-collapse: collapse;
+}
+.el-table tbody > tr {
+  position: relative;
+}
+.el-table tbody > tr::after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 1px;
+  top: 0;
+  left: 0;
+  background: linear-gradient(
+    90deg,
+    rgba(93, 144, 194, 0.1),
+    rgba(93, 144, 194, 1),
+    rgba(93, 144, 194, 0.1)
+  )
 }

src/view/InfoDialoges.vue

@@ -43,11 +43,11 @@
 
                 </div>
             </template>
-            <div class="my_content1 bgcolor  tablefocus scoperadio ">
-                <el-table :data="tableData" style="width: 100%" v-loading="loading" element-loading-text="Loading..."
+            <div class="my_content1  bgcolor  tablefocus scoperadio xian2 shigu">
+                <el-table :data="tableData"  :span-method="mergeCell" style="width: 100%" v-loading="loading" element-loading-text="Loading..."
                 :highlight-current-row="currentrow"
-                    element-loading-background="rgba(0, 10, 0, 0.1)" :row-class-name="tableRowClassName"
-                    :header-cell-style="{ 'background': ' #375A88' }" @select="projectsSelectionSelect">
+                    element-loading-background="rgba(0, 10, 0,0)" :row-class-name="tableRowClassName"
+                    :header-cell-style="{ 'background': 'rgba(0, 10, 0,0)' }" @select="projectsSelectionSelect">
                     <el-table-column width="50">
 
                         <template #default="scope">
@@ -626,7 +626,7 @@ const accident = () => {
         }else{
          initWebSocket();
          rizhi.value.logs='';
-         newlog.value ='';
+         newlog.value ='';  
         emit('headerclick', sgdata.value);
         emit('childfun');
         emit('moxingclick', true);
@@ -646,11 +646,13 @@ const accident2 = (key) => {
     if (key == '1'||key == '2'||key == '3') {
         console.log(classradio.value);
         if (classradio.value== "Fire") {
+ 
             leftcoll.value.collfire = true;
             leftcoll.value.collwater = false;
             leftcoll.value.Gass = false;
+            console.log(leftcoll.value.collfire)
+            console.log(1112333)
         } else if (classradio.value== "Water") {
-          
             leftcoll.value.collwater = true;
             leftcoll.value.collfire = false;
             leftcoll.value.Gass = false;
@@ -743,7 +745,8 @@ const getdata = () => {
         placeholder.value='某次某事件火灾事故'
     } else if (classradio.value== "Water") {
         placeholder.value='某次某事件突水事故'
-    }else{
+    }else if(classradio.value== "Gass"){
+        placeholder.value='某次某事件瓦斯事故'
     }
     const params = {
         transCode: 'D00003',
@@ -1021,10 +1024,15 @@ onMounted(() => {
 
 defineExpose({ monitor, accident2, leftcoll, classradio, aid, dialogVisible ,changeModel,classclick});
 </script>
+<style scoped>
+
+.xian2{
+   margin: 0.0521rem !important;
+}
+</style>
 <style>
  @import '../../src/style/style.css';
  .scoperadio .el-radio__label {
     display: none !important;
 }
-
 </style>

src/view/appmian.vue

@@ -60,11 +60,13 @@
       <!-- 底部按钮三个页面 -->
       <firstLeft ref="firstleftref" :classradio="classradio" :aid="aid" />
       <towright ref="towrightref" :classradio="classradio" :aid="aid" />
-      <result ref="resultbidui" @titleclick="titleclick"  :classradio="classradio"></result>
+    
       <!-- <threeright ref="threerightref" :classradio="classradio" :aid="aid" /> -->
     </div>
     </div>
       </el-main>
+      <div class="bkxolo">
+      <result ref="resultbidui" @titleclick="titleclick"  :classradio="classradio"></result></div>
   <div class="footer">
     <Index ref="indexref" @indexchange="indexchange" @hiadden="hiadden"/>
   </div>
@@ -322,7 +324,8 @@ const handleSelect = (key) => {
   if( bgk2false.value==true){
     activeIndex.value='11'
   }
- 
+  resultbidui.value.accident6('5');
+ // indexref.value.changeColor("1")
   activeIndex.value =key;
   switch (key) {
     case "1":
@@ -333,7 +336,7 @@ const handleSelect = (key) => {
       break;
     case "2":
     classradio.value="Fire";
-    lliudialog.value.classclick( classradio.value);
+    lliudialog.value.classclick(classradio.value);
     menumine.value.dialogVisible=false;
     menusen.value.sendialogVisible=false;
       break;

src/view/index/animation.vue

@@ -0,0 +1,46 @@
+<template>
+   <el-collapse accordion v-model="activeNames" class="bganimation">
+          <el-collapse-item name="1" class="imgneon">
+            <template #title>
+              <el-icon class="iconimg Frame3" fit="contain"></el-icon>
+              动画展示
+            </template>
+            <div class="rg_content">
+              <div class="rg-padding">
+            
+              <div class="animation_s">
+              <el-slider
+                :max="100"
+                :min="0"
+                v-model="count"
+                @change="sliderchange"
+              >
+              </el-slider>
+              <!-- <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/> -->
+              <div class="tanniu">
+                <div><el-image :src="t1" fit="contain" ></el-image></div>
+                <div><el-image :src="t2" fit="contain" ></el-image></div>
+                <div><el-image :src="t3" fit="contain" ></el-image></div>
+                
+              </div>
+            </div>
+          
+            
+            </div>
+          </div>
+            <!-- <div class="mgsnoe" style="height: 200px"></div> -->
+          </el-collapse-item>
+        </el-collapse>
+
+     </template>
+   <script setup>
+import { ref, onMounted, reactive, } from "vue";
+import {RouterView,RouterLink } from "vue-router"
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+import t1 from "@/assets/img/t1.png";
+import t2 from "@/assets/img/t2.png";
+import t3 from "@/assets/img/t3.png";
+import t4 from "@/assets/img/t4.png";
+   </script>
+ 

src/view/index/first-left.vue

@@ -283,11 +283,11 @@ const lineChart=()=>{
  
  
 // // 监听窗口大小变化
-myChart.dispatchAction({ //设置激活第一个选项
-     type: 'showTip',
-     seriesIndex: 0,
-     dataIndex: 0
-   });
+// myChart.dispatchAction({ //设置激活第一个选项
+//      type: 'showTip',
+//      seriesIndex: 0,
+//      dataIndex: 0
+//    });
 }
 defineExpose({firstshow});
 </script>

src/view/result.vue

@@ -15,66 +15,79 @@
           <div class="time">{{ timeline }}</div>
       </div>
       <!-- 动画 -->
-      <div class="animation_s">
-        <el-slider :max="endtime" :min="starttime" v-model="formInline.count" @change="sliderchange">
-        </el-slider>
-        <div class="tanniu">
-          <ul>
-            <li>
-              <el-image :src="t1" fit="contain" @click="Prev()"></el-image>
-              <p>后退</p>
-            </li>
-            <li>
-              <el-image :src="t2" fit="contain" @click="play(500)"></el-image>
-              <p>播放</p>
-            </li>
-            <li>
-              <el-image :src="t3" fit="contain" @click="suspend()"></el-image>
-              <p>暂停</p>
-            </li>
-            <li>
-              <el-image :src="t4" fit="contain" @click="increment()"></el-image>
-              <p>快进</p>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- 物理量 -->
-      <div class="heigjie">
-        <div class="he_pading1 color1">
-          <el-form-item label="物理量:" v-if="props.classradio == 'Fire'">
-            <el-select v-model="formInline.region" @change="regionchange($event)" placeholder="请选择">
-              <el-option v-for="item in strResultFormatlist" :key="item.id" :label="item.name"
-                :value="item.value"></el-option>
-            </el-select>
-          </el-form-item>
-          <div class="wotermn" v-else>
-            <span>物理量：</span>
-            <span>水位</span>
+   
+      <div class="L_aside L_aside1 asideg asidegbg leftbgimg1">
+        <el-collapse accordion v-model="activeNames" class="bganimation">
+          <el-collapse-item name="1" class="imgneon">
+            <template #title>
+              <el-icon class="iconimg Frame3" fit="contain"></el-icon>
+              动画展示
+            </template>
+            <div class="rg_content">
+              <div class="rg-padding">
+            
+              <div class="animation_s">
+              <el-slider
+                :max="100"
+                :min="0"
+                v-model="count"
+                @change="sliderchange"
+              >
+              </el-slider>
+              <!-- <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/> -->
+              <div class="tanniu">
+                <div><el-image :src="t1" fit="contain" ></el-image></div>
+                <div><el-image :src="t2" fit="contain" ></el-image></div>
+                <div><el-image :src="t3" fit="contain" ></el-image></div>
+                
+              </div>
+            </div>
+          
+            
+            </div>
           </div>
-        </div>
+    
+          </el-collapse-item>
+        </el-collapse>
+  
       </div>
+  
     </div>
-    <div class="result_left results">
-      <div class="elimgmn">
+    <div class="result_left results re_pading">
+      <!-- <div class="elimgmn">
         <div class="bceligmn" @click="hazardtype('1')">
           <el-image :src="t5" fit="contain"></el-image>
           <div class="mntext" :title="mntext1">{{ mntext1 }}</div>
         </div>
-        <!-- <div class="mnclose"><el-image :src="t6" fit="contain"></el-image></div> -->
+        <div class="mnclose"><el-image :src="t6" fit="contain"></el-image></div> 
+      </div> -->
+      <div class="resu_title reimg" @click="hazardtype('1')">
+        {{ mntext1 }}
       </div>
+      <div class="resultleftxian">
+      <div class="modle">
       <resultLeft ref="setleftAid" :region="formInline.region" :count="formInline.count" />
     </div>
-    <div class="result_right results">
-      <div class="elimgmn">
-        <div class="bceligmn" @click="hazardtype('2')">
-          <el-image :src="t5" fit="contain"></el-image>
-          <div class="mntext" :title="mntext2">{{ mntext2 }}</div>
-        </div>
-        <!-- <div class="mnclose"><el-image :src="t6" fit="contain"></el-image></div> -->
+    <!--检测点信息 -->
+    <wdisaster ref="wdisasterref"/>
+  </div>
+              <!-- 检测点 -->
+    </div>
+    <!-- 第二个 -->
+    <div class="result_right r results re_pading">
+      <div class="resu_title reimg" @click="hazardtype('1')">
+        {{ mntext2 }}
       </div>
-      <resultRight ref="setrightAid" :region="formInline.region" :count="formInline.count" />
+      <div class="resultleftxian">
+      <div class="modle">
+        <resultRight ref="setrightAid" :region="formInline.region" :count="formInline.count" />
     </div>
+    <!--检测点信息 -->
+    <wdisaster2 ref="wdisasterref2"/>
+  </div>
+              <!-- 检测点 -->
+    </div>
+ 
   </div>
 </template>
 <script setup>
@@ -84,6 +97,8 @@ import { request, uploadFile } from "@/utils/request";
 import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus";
 import resultLeft from "./result/resultLeft.vue";
 import resultRight from "./result/resultRight.vue";
+import wdisaster from "./result/Wdisaster.vue";
+import wdisaster2 from "./result/Wdisaster2.vue";
 import { timestampToTime,timescount } from "@/js/lindex.js";
 import { vtkmodel } from "@/control/vtkModel.js";
 import t1 from "@/assets/img/t1.png";
@@ -94,14 +109,18 @@ import mn from "@/assets/img/Group204.png";
 import t5 from "@/assets/img/Group207.png";
 import t6 from "@/assets/img/Frame.png";
 import bg from "@/assets/img/303.png";
+
 let emit = defineEmits(["titleclick"]);
 const props = defineProps({
   classradio: {
     type: String,
   },
 });
+let wdisasterref=ref();
+let wdisasterref2=ref();
 let resultyem = ref(false);
 let timing = ref(null);
+let leftcontentref=ref();
 let starttime = ref(1);
 let endtime = ref(60);
 let timenum = ref(2);
@@ -127,6 +146,11 @@ const accident6 = (key, id) => {
   if (key == 2) {
     vtkmodel.clearAll();
     resultyem.value = true;
+    nextTick(() => {
+      wdisasterref.value.lineChart();
+      wdisasterref2.value.lineChart2();
+  });
+   
   } else {
     resultyem.value = false;
   }
@@ -277,6 +301,7 @@ async function getMonitor(leftAid, rightAid) {
     .catch((err) => { });
 }
 onMounted(() => {
+  // leftcontentref.value.accident2('1','Water')
 });
 // 卸载时的操作
 onUnmounted(() => {
@@ -300,31 +325,14 @@ defineExpose({ accident6, initAid, mntext1, mntext2, clickflat, endtime,zdtime,t
     padding: 10px 9px 0 7px;
   }
 }
-
-.animation_s {
-  padding: 25px;
+.animation_s .el-slider{
+  padding: 43px 10px;
 }
-
-.tanniu ul {
-  margin-top: 20px;
+.tanniu{
   display: flex;
-
-  li {
-    flex: 1;
-    text-align: center;
-
-    p {
-      text-align: center;
-      font-weight: 400;
-      font-size: 12px;
-      color: #ffffff;
-      line-height: 14px;
-      font-style: normal;
-      text-transform: none;
-    }
-  }
+    justify-content: space-between;
+    align-items: center;
 }
-
 .resultyem {
   width: 100%;
   position: absolute;
@@ -332,44 +340,38 @@ defineExpose({ accident6, initAid, mntext1, mntext2, clickflat, endtime,zdtime,t
   top: 70px;
   color: #fff;
   display: flex;
-  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-  border-radius: 0px 0px 0px 0px;
+  justify-content: space-between;
+  height: calc(100vh - 154px);
 }
 
 .results {
   flex: 1;
   position: relative;
+  overflow: auto;
+  
+}
+.result_left{
+  margin: 0 .0781rem 0 .1563rem;
+}
+.result_right{
+  margin: 0 .1563rem 0  .0781rem;
 }
-
 .result_left,
 .result_right {
-  height: calc(100vh - 70px);
-  border-right: 2px solid;
-  /* border-right: 2px solid; */
-  /* border-image: linear-gradient(180deg, rgba(31, 107, 255, 0), rgba(255, 255, 255, 0.8)) 1 1; */
-  border-image: linear-gradient(180deg,
-      rgba(255, 255, 255, 0.5),
-      rgba(255, 255, 255, 0.5)) 1 1;
-  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  height: calc(100vh - 154px);
+  background: rgba(26,38,69,0.4);
 }
 
 .publicleft {
-  width: 270px;
-  height: calc(100vh - 70px);
-  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-  border-right: 2px solid;
-  /* border-right: 2px solid; */
-  /* border-image: linear-gradient(180deg, rgba(31, 107, 255, 0), rgba(255, 255, 255, 0.8)) 1 1; */
-  border-image: linear-gradient(180deg,
-      rgba(255, 255, 255, 0.5),
-      rgba(255, 255, 255, 0.5)) 1 1;
-  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  width: 2.125rem;
+  background: rgba(26,38,69,0.4);
+    margin-left: 0.1563rem;
 }
 
 .resultime {
 display: flex;
-  height: 70px;
-  border-bottom: 1px solid;
+  height: 50px;
+  border: 1px solid;
   border-image: linear-gradient(347deg, rgb(16, 92, 240), rgb(18, 48, 102)) 1 1;
 }
 
@@ -377,7 +379,7 @@ display: flex;
   font-size: 14px;
   width: 88px;
   font-weight: bold;
-  line-height: 70px;
+  line-height: 50px;
   text-align: center;
   display: inline-block;
   border-right: 1px solid;
@@ -386,12 +388,12 @@ display: flex;
 }
 
 .resultime .time{
-  line-height: 70px;
+  line-height: 50px;
   font-family: Microsoft YaHei UI, Microsoft YaHei UI;
   font-weight: bold;
-  font-size: 14px;
+  font-size: .0729rem;
   color: #ff0f0f;
-  line-height: 70px;
+  line-height: 50px;
   text-align: left;
   text-align: center;
   font-style: normal;
@@ -400,6 +402,7 @@ display: flex;
 }
 </style>
 <style>
+
 .heigjie .el-form-item__label {
   font-weight: 400;
   font-size: 13px;

src/view/result/Wdisaster.vue

@@ -0,0 +1,227 @@
+<template>
+  <!-- 水灾灾害信息 -->
+  <div class="waterdisaster"> 
+    <div class="asides_content">
+              <div class="jc_content tablecolor">
+                <div class="jc_padding">
+                  <div class="re_tele">灾害信息展示
+                    <div class="btn">生成报告</div>
+                  </div >
+                  <div class="jiancd">
+                  <div class="je_left duijc">
+                  <div class="xian2 btncolor tablefocus  tablebk">
+                    <!--  -->
+                    <el-table
+                      :data="tableData"
+                      style="width: 100%"
+                      :row-class-name="tableRowClassName"
+                      :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
+                      :height="tableHeight"
+                      class="custom-table"
+                      @row-click="handleDelete($event)"
+                    >
+                      <el-table-column prop="date" label="监测点"  />
+                      <el-table-column prop="name" label="水位（m）"   />
+                      <el-table-column prop="name"  label="流量（m³/s）" />
+                      <el-table-column   prop="state"  label="预警" >
+                        <template #default="scope">
+                          <el-image v-if="scope.row.state=='0'" style="height: 100%" :src="bt1" fit="contain"></el-image>
+                          <el-image v-if="scope.row.state=='1'" style="height: 100%" :src="bt2" fit="contain"></el-image>
+                          <el-image v-if="scope.row.state=='2'"  style="height: 100%" :src="bt3" fit="contain"></el-image>
+                          <el-image v-if="scope.row.state=='3'" style="height: 100%" :src="bt4" fit="contain"></el-image>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </div>
+                </div>
+                  <div class="je_right duijc">
+                    <div class="">
+                    <div class="zongjili img1">1<span>个</span></div>
+                    <div class="zongjili img2">12<span>个</span></div>
+                  </div>
+                  </div>
+                </div>
+                  <!-- 监测点 -->
+                  <div class="L_aside ">
+                    <div class="hedse jccolor">
+                      <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>监测点
+                </div>
+                <div class="echart echartxian">
+                <div id="line2" style="width: 100%; height: 1.25rem;"></div></div>
+                </div>
+                </div>
+              </div>
+             </div>
+  </div>
+
+   </template>
+ <script setup>
+import { ref, onMounted, reactive, } from "vue";
+import {RouterView,RouterLink } from "vue-router"
+import { request, uploadFile } from "@/utils/request";
+import * as echarts from 'echarts'
+import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+import bt1 from "@/assets/img/Group1376.png"
+import bt2 from "@/assets/img/Group1377.png"
+import bt3 from "@/assets/img/Group1395.png"
+import bt4 from "@/assets/img/Group1396.png"
+let tableHeight=ref(114)
+const tableData = ref([
+{
+  date: '检测点',
+  name: '1',
+  state: '1',
+  city: 'Los Angeles',
+  address: 'No. 189, Grove St, Los Angeles',
+  zip: 'CA 90036',
+  tag: 'Home',
+},
+{
+  date: '检测点',
+  name: '1',
+  state: '2',
+  city: 'Los Angeles',
+  address: 'No. 189, Grove St, Los Angeles',
+  zip: 'CA 90036',
+  tag: 'Office',
+},
+
+]);
+const handleDelete=()=>{
+
+}
+onMounted(() => {
+})
+const lineChart=()=>{
+let myChart = echarts.init(document.getElementById('line2'));
+let option = {
+   tooltip: {
+     trigger: 'axis',
+   },
+   grid: {
+     left: '0',
+     right: '0',
+     bottom: '10',
+     top:'20',
+     containLabel: true
+   },
+   xAxis: [
+     {
+       type: 'category',
+       // boundaryGap: false,
+       data: [0,10,20,30,40],
+       splitLine: {
+         show: false,
+       },
+       axisLine: {
+         lineStyle: {
+           type: 'solid',
+           color: '#E6E7EC',//左边线的颜色
+           width:'1'//坐标线的宽度
+         }
+       },
+       axisLabel: {
+         textStyle: {
+           color: '#B8CED6',//坐标值得具体的颜色
+         }
+       }
+     }
+   ],
+   yAxis: [
+     {
+       type: 'value',
+       minInterval:1,
+       max: 700,
+       splitLine: {
+         show: true,
+         lineStyle:{
+           type:'dashed'
+         }
+       },
+       axisLine: {
+         lineStyle: {
+           type: 'solid',
+            color: '#E6E7EC',//左边线的颜色
+           width:1 //坐标线的宽度
+         }
+       },
+       axisLabel: {
+        type: 'value',
+        // color: '#ACD6FF',
+         textStyle: {
+        //  color: 'red',//坐标值得具体的颜色
+        color: function (value, index) {
+          if(value >=300){
+            return '#CE0000 '
+          } else{
+            return  '#ACD6FF'
+          }
+            // return value >= 120 ? '#CE0000  ': '#ACD6FF';
+        }
+         
+         }
+       }
+     }
+   ],
+   color: 'rgba(37, 190, 171, 1)',
+   series: [
+     {
+       name: '',
+       type: 'line',
+    showSymbol: false,
+    smooth: true,
+    data: [0,60,120,240,360],
+       itemStyle:{
+         normal:{
+           color: {
+             type: 'linear',
+             x: 0,
+             y: 0,
+             x2: 0,
+             y2: 1,
+             colorStops: [
+             {
+               offset:1, color: '#ACD6FF ' // 0% 处的颜色
+             },
+             {
+               offset:0.7, color: '#105CF0 '// 100% 处的颜色
+             },
+             {
+               offset:0.66, color: '#FF7A00 '// 100% 处的颜色
+             },
+             {
+               offset:0.2, color: '#FF0000 '// 100% 处的颜色
+             },
+             {
+               offset:0, color: '#CE0000' // 0% 处的颜色FF7A00
+             }, 
+            
+            ],
+          
+             global: false // 缺省为 false
+           }
+         }
+       },
+       lineStyle: {
+                  width: 3, // 设置线条宽度
+              },
+
+     }
+   ]
+ }
+ myChart.setOption(option);
+ window.onresize = function() {
+  // 让图表自适应大小
+  myChart.resize();
+};
+
+
+// // 监听窗口大小变化
+// myChart.dispatchAction({ //设置激活第一个选项
+//      type: 'showTip',
+//      seriesIndex: 0,
+//      dataIndex: 0
+//    });
+}
+   defineExpose({lineChart});
+ </script>

src/view/result/Wdisaster2.vue

@@ -0,0 +1,227 @@
+<template>
+    <!-- 水灾灾害信息 -->
+    <div class="waterdisaster"> 
+      <div class="asides_content">
+                <div class="jc_content tablecolor">
+                  <div class="jc_padding">
+                    <div class="re_tele">灾害信息展示
+                      <div class="btn">生成报告</div>
+                    </div >
+                    <div class="jiancd">
+                    <div class="je_left duijc">
+                    <div class="xian2 btncolor tablefocus  tablebk">
+                      <!--  -->
+                      <el-table
+                        :data="tableData"
+                        style="width: 100%"
+                        :row-class-name="tableRowClassName"
+                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
+                        :height="tableHeight"
+                        class="custom-table"
+                        @row-click="handleDelete($event)"
+                      >
+                        <el-table-column prop="date" label="监测点"  />
+                        <el-table-column prop="name" label="水位（m）"   />
+                        <el-table-column prop="name"  label="流量（m³/s）" />
+                        <el-table-column   prop="state"  label="预警" >
+                          <template #default="scope">
+                            <el-image v-if="scope.row.state=='0'" style="height: 100%" :src="bt1" fit="contain"></el-image>
+                            <el-image v-if="scope.row.state=='1'" style="height: 100%" :src="bt2" fit="contain"></el-image>
+                            <el-image v-if="scope.row.state=='2'"  style="height: 100%" :src="bt3" fit="contain"></el-image>
+                            <el-image v-if="scope.row.state=='3'" style="height: 100%" :src="bt4" fit="contain"></el-image>
+                          </template>
+                        </el-table-column>
+                      </el-table>
+                    </div>
+                  </div>
+                    <div class="je_right duijc">
+                      <div class="">
+                      <div class="zongjili img1">1<span>个</span></div>
+                      <div class="zongjili img2">12<span>个</span></div>
+                    </div>
+                    </div>
+                  </div>
+                    <!-- 监测点 -->
+                    <div class="L_aside ">
+                      <div class="hedse jccolor">
+                        <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>监测点
+                  </div>
+                  <div class="echart echartxian">
+                  <div id="line3" style="width: 100%; height: 1.25rem;"></div></div>
+                  </div>
+                  </div>
+                </div>
+               </div>
+    </div>
+
+     </template>
+   <script setup>
+import { ref, onMounted, reactive, } from "vue";
+import {RouterView,RouterLink } from "vue-router"
+import { request, uploadFile } from "@/utils/request";
+import * as echarts from 'echarts'
+import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+import bt1 from "@/assets/img/Group1376.png"
+import bt2 from "@/assets/img/Group1377.png"
+import bt3 from "@/assets/img/Group1395.png"
+import bt4 from "@/assets/img/Group1396.png"
+let tableHeight=ref(114)
+const tableData = ref([
+  {
+    date: '检测点',
+    name: '1',
+    state: '1',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+    tag: 'Home',
+  },
+  {
+    date: '检测点',
+    name: '1',
+    state: '2',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+    tag: 'Office',
+  },
+
+]);
+const handleDelete=()=>{
+
+}
+onMounted(() => {
+})
+const lineChart2=()=>{
+ let myChart = echarts.init(document.getElementById('line3'));
+  let option = {
+     tooltip: {
+       trigger: 'axis',
+     },
+     grid: {
+       left: '0',
+       right: '0',
+       bottom: '10',
+       top:'20',
+       containLabel: true
+     },
+     xAxis: [
+       {
+         type: 'category',
+         // boundaryGap: false,
+         data: [0,10,20,30,40],
+         splitLine: {
+           show: false,
+         },
+         axisLine: {
+           lineStyle: {
+             type: 'solid',
+             color: '#E6E7EC',//左边线的颜色
+             width:'1'//坐标线的宽度
+           }
+         },
+         axisLabel: {
+           textStyle: {
+             color: '#B8CED6',//坐标值得具体的颜色
+           }
+         }
+       }
+     ],
+     yAxis: [
+       {
+         type: 'value',
+         minInterval:1,
+         max: 700,
+         splitLine: {
+           show: true,
+           lineStyle:{
+             type:'dashed'
+           }
+         },
+         axisLine: {
+           lineStyle: {
+             type: 'solid',
+              color: '#E6E7EC',//左边线的颜色
+             width:1 //坐标线的宽度
+           }
+         },
+         axisLabel: {
+          type: 'value',
+          // color: '#ACD6FF',
+           textStyle: {
+          //  color: 'red',//坐标值得具体的颜色
+          color: function (value, index) {
+            if(value >=300){
+              return '#CE0000 '
+            } else{
+              return  '#ACD6FF'
+            }
+              // return value >= 120 ? '#CE0000  ': '#ACD6FF';
+          }
+           
+           }
+         }
+       }
+     ],
+     color: 'rgba(37, 190, 171, 1)',
+     series: [
+       {
+         name: '',
+         type: 'line',
+      showSymbol: false,
+      smooth: true,
+      data: [0,60,120,240,360],
+         itemStyle:{
+           normal:{
+             color: {
+               type: 'linear',
+               x: 0,
+               y: 0,
+               x2: 0,
+               y2: 1,
+               colorStops: [
+               {
+                 offset:1, color: '#ACD6FF ' // 0% 处的颜色
+               },
+               {
+                 offset:0.7, color: '#105CF0 '// 100% 处的颜色
+               },
+               {
+                 offset:0.66, color: '#FF7A00 '// 100% 处的颜色
+               },
+               {
+                 offset:0.2, color: '#FF0000 '// 100% 处的颜色
+               },
+               {
+                 offset:0, color: '#CE0000' // 0% 处的颜色FF7A00
+               }, 
+              
+              ],
+            
+               global: false // 缺省为 false
+             }
+           }
+         },
+         lineStyle: {
+                    width: 3, // 设置线条宽度
+                },
+
+       }
+     ]
+   }
+   myChart.setOption(option);
+   window.onresize = function() {
+    // 让图表自适应大小
+    myChart.resize();
+};
+ 
+ 
+// // 监听窗口大小变化
+// myChart.dispatchAction({ //设置激活第一个选项
+//      type: 'showTip',
+//      seriesIndex: 0,
+//      dataIndex: 0
+//    });
+}
+     defineExpose({lineChart2});
+   </script>

src/view/result/leftcontent.vue

@@ -0,0 +1,1028 @@
+<template>
+    <!-- 所有弹出框 -->
+    <div class="l_Dialog tuiy">
+        <!-- 灾害类型 -->
+        <el-dialog v-model="dialogVisible" width="482" align-center :modal="false" :close-on-click-modal="false"
+            draggable class="dialog_class bgcolor">
+            <template #header="{ titleId, titleClass }">
+                <div class="my-header">
+                    <el-image :src="icon" fit="contain"></el-image>
+                    <h4 :id="titleId" :class="titleClass">灾害类型</h4>
+
+                </div>
+            </template>
+            <div class="my_content">
+                <el-radio-group v-model="classradio1" class="radio-group">
+                    <el-radio label="Fire">火灾</el-radio>
+                    <el-radio label="Water">突水</el-radio>
+                    <el-radio label="Gass">瓦斯爆炸</el-radio>
+                </el-radio-group>
+            </div>
+
+            <template #footer>
+                <div class="dialog-footer class_footer l_btn ">
+                    <div class="footerbtn">
+                        <div class="borderimg"><el-button @click="dialogVisible = false">取消</el-button></div>
+                    </div>
+                    <div class="footerbtn">
+                        <div class="borderimg"><el-button @click="classclick(); dialogVisible= false;">
+                                确定
+                            </el-button></div>
+                    </div>
+                </div>
+            </template>
+        </el-dialog>
+        <!--火灾 事故列表 -->
+        <el-dialog v-model="dialog.dialogVisible_fire" width="600" :modal="false" :close-on-click-modal="false"
+            draggable class="dialog_class bgcolor tablefocus shigutable">
+
+            <template #header="{ titleId, titleClass }">
+                <div class="my-header">
+                    <el-image :src="icon" fit="contain"></el-image>
+                    <h4 :id="titleId" :class="titleClass"> 事故列表</h4>
+
+                </div>
+            </template>
+            <div class="my_content1 bgcolor  tablefocus scoperadio ">
+                <el-table :data="tableData" style="width: 100%" v-loading="loading" element-loading-text="Loading..."
+                :highlight-current-row="currentrow"
+                    element-loading-background="rgba(0, 10, 0, 0.1)" :row-class-name="tableRowClassName"
+                    :header-cell-style="{ 'background': ' #375A88' }" @select="projectsSelectionSelect">
+                    <el-table-column width="50">
+
+                        <template #default="scope">
+                            <el-radio v-model="scoperadio" :label="scope.row.aid"
+                                @change="getRadioRow(scope.row)"></el-radio>
+                        </template>
+                    </el-table-column>
+                    <el-table-column type="index" label="序号" width="50" />
+                    <el-table-column prop="name" label="名称" />
+                    <el-table-column prop="name" label="来源" width="120" />
+                    <el-table-column prop="time" label="时间" width="180" />
+                </el-table>
+                <div class="demo-pagination-block pagination">
+                    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" small background
+                        layout="prev, total,pager, next, jumpe," :total="parseInt(total)" class="mt-4"
+                        @current-change="handleCurrentChange2" />
+                </div>
+                <div class="dialog-footer footer_div l_btn">
+                    <div class="footerbtn flex1">
+                        <div class="borderimg"><el-button @click="addsg('1');">添加</el-button></div>
+                    </div>
+                    <div class="footerbtn flex1">
+                        <div class="borderimg"><el-button @click="addsg('2')">
+                                修改
+                            </el-button></div>
+                    </div>
+                    <div class="footerbtn flex1">
+                        <div class="borderimg"><el-button @click="dialog.dialogsgdelect = true; dialog.dialogForm = false;">
+                                删除
+                            </el-button></div>
+                    </div>
+                    <div class="footerbtn flex1">
+                        <div class="borderimg"><el-button @click="accident()">
+                                确定
+                            </el-button></div>
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="ddd" v-show="dialog.dialogForm">
+                <div class="header_l">
+                    <el-image :src="icon" fit="contain"></el-image>
+                    <h4 class="tianjia"> {{ shigtext }}</h4>
+                    <div class="closeimg" @click="dialog.dialogForm = false"><el-image :src="closeimg" fit="contain"
+                            style="margin-top: -10px;"></el-image></div>
+                    <div class="ddd_div" style="display: flex;">
+                        <div class="demo-input-suffix firsttitle magintop">
+                            <el-form-item label="事故名称">
+                                <el-input v-model="formull.name" class="w-50 m-2" maxlength="18"   :placeholder="placeholder" />
+                            </el-form-item>
+                            <div class="l_btn class_btn" style="width: auto;">
+
+                                <div class="footerbtn">
+                                    <div class="borderimg"><el-button @click="sgadd()">
+                                            确定
+                                        </el-button></div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <el-dialog v-model="dialog.dialogsgdelect" width="400" class="dialog_class bgcolor tianjia">
+
+                <template #header="{ titleId, titleClass }">
+                    <div class="my-header ">
+                        <el-image :src="icon" fit="contain"></el-image>
+                        <h4 :id="titleId" :class="titleClass">删除</h4>
+
+                    </div>
+                </template>
+                <h4 class="delecttitle"> 是否确认删除<span class="spanclad">{{ idobj.name }}</span></h4>
+                <div class="dialog-footer footer_div l_btn">
+                    <div class="footerbtn flex1">
+                        <div class="borderimg"><el-button @click="dialog.dialogsgdelect = false">取消</el-button></div>
+                    </div>
+                    <div class="footerbtn flex1">
+                        <div class="borderimg"><el-button @click="sgdelect(); dialog.dialogsgdelect = false">
+                                确定
+                            </el-button></div>
+                    </div>
+                </div>
+            </el-dialog>
+        </el-dialog>
+        <!--火灾左侧栏-->
+        <div class="common-layout" style="margin: 0;" v-show="leftcoll.collfire">
+            <el-aside width="278px" class="L_aside L_aside1 asideg asidegbg  leftbgimg">
+                <div class="demo-collapse">
+                    <el-collapse v-model="coolactiveName" accordion>
+                        <el-collapse-item name="1">
+
+                            <template #title>
+                                <el-icon class="iconimg Frame2" fit="contain"></el-icon>
+                                火灾<el-icon class="header-icon">
+                                </el-icon>
+                            </template>
+                            <div class="asides_content">
+                                <el-form :inline="true" :model="tuiyanobj" class="demo-form-inline">
+                                    <div class="l_padding " style="padding:20px 20px 20px 24px; ">
+                                        <div class="line selecwidth">
+                                            <el-form-item label="污染物选择:">
+                                                <!-- <el-select v-model="options.coid" multiple filterable allow-create
+                                                    default-first-option :reserve-keyword="false" value-key="code"
+                                                    @change="selectchange($event)" placeholder="请选择">
+                                                    <el-option v-for="item in options" :key="item.coid"
+                                                        :label="item.code" :value="item" />
+                                                </el-select> -->
+                                                <el-select v-model="value" multiple filterable allow-create
+                                                    default-first-option :reserve-keyword="false" value-key="code"
+                                                    @change="selectchange($event)" placeholder="请选择">
+                                                    <el-option v-for="item in options" :key="item.coid"
+                                                        :label="item.code" :value="item" />
+                                                </el-select> 
+                                            </el-form-item>
+                                        </div>
+                                        <ul>
+                                            <li>
+                                                <div class="demo-datetime-picker">
+                                                    <!-- <span class="inputtext_1">选择时间</span> -->
+                                                    <div class="block">
+                                                        <el-date-picker v-model="tuiyanobj.pickertime" type="datetime"
+                                                            placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss"
+                                                            @change="timeclick()" />
+                                                    </div>
+                                                </div>
+                                            </li>
+                                            <li><span class="inputtext_1">时间步长</span>
+                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.dt" />
+                                                    <span class="righttext">s</span>
+                                                </div>
+                                            </li>
+                                            <li><span class="inputtext_1">空间步长</span>
+                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.dx" />
+                                                    <span class="righttext">m</span>
+                                                </div>
+                                            </li>
+                                            <li><span class="inputtext_1">模拟时长</span>
+                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.totaltime" />
+                                                    <span class="righttext">s</span>
+                                                </div>
+                                            </li>
+                                            <li><span class="inputtext_1">输出步长</span>
+                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.reportstep" />
+                                                    <span class="righttext">s</span>
+                                                </div>
+                                            </li>
+                                            <li><span class="inputtext_1">交互步长</span>
+                                                <div class="inputkuang"> <el-input
+                                                        v-model="tuiyanobj.interactionstep" />
+                                                    <span class="righttext">s</span>
+                                                </div>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div class="asdis_btn">
+                                        <div class="btn"   :class="{chuactive: isActive === 1}" @click="changeClass(1)"><span class="spantext" @click="initial();">初始数据</span></div>
+                                        <div class="btn"  :class="{chuactive: isActive === 2}" @click="changeClass(2)"><span class="spantext" @click="calculate();">开始计算</span></div>
+                                    </div>
+
+                                    <div class=" logs">
+                                        <div class="logs_pading">
+                                            <h4>模拟日志</h4>
+                                            <div class="footerTextBox">
+                                                <el-input class="footerText" type="textarea" id="textarea_id"
+                                                    v-model="rizhi.logs"></el-input>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </el-form>
+
+                            </div>
+
+                        </el-collapse-item>
+                    </el-collapse>
+                </div>
+            </el-aside>
+        </div>
+        <!-- 突水 -->
+        <div class="common-layout" style="margin: 0;" v-show="leftcoll.collwater">
+            <el-aside width="1.6667rem" class="L_aside L_aside1 asideg asidegbg  leftbgimg1">
+                <div class="demo-collapse">
+                    <el-collapse v-model="coolactiveName" accordion>
+                        <el-collapse-item name="1" class="imgneon">
+
+                            <template #title>
+                                <el-icon class="iconimg Frame3" fit="contain"></el-icon>
+                                突水<el-icon class="header-icon">
+                                </el-icon>
+                            </template>
+                            <div class="asides_content">
+                                <el-form :inline="true" :model="tuiyanobj" class="demo-form-inline">
+                                    <div class="l_padding " style="padding:20px 20px 20px 24px; ">
+                                        <ul>
+                                            <li>
+                                                <div class="demo-datetime-picker">
+                                                    <!-- <span class="inputtext_1">选择时间</span> -->
+                                                    <div class="block">
+                                                        <el-date-picker v-model="tuiyanobj.pickertime" type="datetime"
+                                                            placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss"
+                                                            value-format="YYYY-MM-DD HH:mm:ss" @change="timeclick()" />
+                                                    </div>
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <!-- <el-form-item label="时间步长">
+                                                <el-input v-model="tuiyanobj.dt" placeholder="时间步长" clearable />
+                                                </el-form-item> -->
+                                                <span class="inputtext_1">时间步长</span>
+                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.dt" />
+                                                    <span class="righttext">s</span>
+                                                </div>
+                                            </li>
+                                            <li><span class="inputtext_1">空间步长</span>
+                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.dx" />
+                                                    <span class="righttext">m</span>
+                                                </div>
+                                            </li>
+                                            <li><span class="inputtext_1">模拟时长</span>
+                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.totaltime" />
+                                                    <span class="righttext">s</span>
+                                                </div>
+                                            </li>
+                                            <li><span class="inputtext_1">输出步长</span>
+                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.reportstep" />
+                                                    <span class="righttext">s</span>
+                                                </div>
+                                            </li>
+                                            <li><span class="inputtext_1">交互步长</span>
+                                                <div class="inputkuang"> <el-input
+                                                        v-model="tuiyanobj.interactionstep" />
+                                                    <span class="righttext">s</span>
+                                                </div>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div class="asdis_btn">
+                                        <div class="btn" :class="{chuactive: isActive === 1}" @click="changeClass(1)"><span class="spantext" @click="initial();">初始数据</span></div>
+                                        <div class="btn" :class="{chuactive: isActive === 2}" @click="changeClass(2)"><span class="spantext" @click="calculate();">开始计算</span></div>
+                                    </div>
+
+                                    <div class=" logs">
+                                        <div class="logs_pading">
+                                            <h4>模拟日志</h4>
+                                            <div class="footerTextBox">
+                                                <el-input class="footerText" type="textarea" id="textarea_id"
+                                                    v-model="rizhi.logs"></el-input>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </el-form>
+
+                            </div>
+
+                        </el-collapse-item>
+                    </el-collapse>
+                </div>
+            </el-aside>
+        </div>
+        <!-- 瓦斯爆炸 -->
+        <div class="common-layout" style="margin: 0;" v-show="leftcoll.Gass">
+            <el-aside width="278px" class="L_aside L_aside1 asideg asidegbg  leftbgimg">
+                <div class="demo-collapse">
+                    <el-collapse v-model="coolactiveName" accordion>
+                        <el-collapse-item name="1">
+
+                            <template #title>
+                                <el-icon class="iconimg Frame4" fit="contain"></el-icon>
+                                瓦斯爆炸<el-icon class="header-icon">
+                                </el-icon>
+                            </template>
+                            <div class="asides_content">
+                                <el-form :inline="true" :model="tuiyanobj" class="demo-form-inline">
+                                    <div class="l_padding " style="padding:20px 20px 20px 24px; ">
+                                        <ul>
+                                            <li>
+                                                <span class="inputtext_1">并行核数</span>
+                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.dt" />
+                                                </div>
+                                            </li>
+                                            <li><span class="inputtext_1">时间步长</span>
+                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.dt" />
+                                                    <span class="righttext">s</span>
+                                                </div>
+                                            </li>
+                                        
+                                            <li><span class="inputtext_1">模拟时长</span>
+                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.totaltime" />
+                                                    <span class="righttext">s</span>
+                                                </div>
+                                            </li>
+                                            <li><span class="inputtext_1">输出步长</span>
+                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.reportstep" />
+                                                    <span class="righttext">s</span>
+                                                </div>
+                                            </li>
+                                            <li><span class="inputtext_1">子迭代步数</span>
+                                                <div class="inputkuang"> <el-input
+                                                        v-model="tuiyanobj.interactionstep" />
+                                                </div>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div class="asdis_btn">
+                                        <div class="btn" :class="{chuactive: isActive === 1}" @click="changeClass(1)"><span class="spantext" @click="initial();">初始数据</span></div>
+                                        <div class="btn" :class="{chuactive: isActive === 2}" @click="changeClass(2)"><span class="spantext" @click="calculate();">开始计算</span></div>
+                                    </div>
+
+                                    <div class=" logs">
+                                        <div class="logs_pading">
+                                            <h4>模拟日志</h4>
+                                            <div class="footerTextBox">
+                                                <el-input class="footerText" type="textarea" id="textarea_id"
+                                                    v-model="rizhi.logs"></el-input>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </el-form>
+
+                            </div>
+
+                        </el-collapse-item>
+                    </el-collapse>
+                </div>
+            </el-aside>
+        </div>
+    </div>
+</template>
+<!-- timestampToTime -->
+
+<script setup>
+import { computed, ref, onMounted, reactive, toRef } from "vue";
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect, formEmits } from 'element-plus'
+import icon from "@/assets/img/icon.png";
+import Frame2 from "@/assets/img/Frame2.png";
+import t1 from "@/assets/img/t1.png";
+import t2 from "@/assets/img/t2.png";
+import t3 from "@/assets/img/t3.png";
+import t4 from "@/assets/img/t4.png";
+import mitts from "@/utils/Bus"
+import icon1 from "@/assets/img/Group27.png";
+import closeimg from "@/assets/img/colse.png";
+import { timestampToTime } from '@/js/lindex.js'
+import { vtkmodel } from "@/control/vtkModel.js";
+const changeModel= ()=>  {
+  vtkmodel.clearJgAddMode();
+  vtkmodel.renderWindow.render();
+}
+let currentrow=ref(false);
+let placeholder=ref('某次某事件火灾事故');
+let emit = defineEmits(['headerclick', 'childfun', 'moxingclick','handleSelect','leftsimulation'])
+const props = defineProps({
+    addselect: {
+        type: Function,
+        required: true,
+
+    },
+    headerobj: {
+        type: Object,
+    },
+    valzaiqing:{
+        type:String
+    },
+    classradio: {
+    type: String,
+    // default: '',activeIndex
+  },
+  activeIndex: {
+    type: String,
+    // default: '',activeIndex
+  },
+
+});
+let startlog=ref('0');
+let shigtext = ref('');
+let websock = ref(null);
+let times = ref({
+    lockReconnect: false, //是否真正建立连接
+    timeout: 28 * 1000, //30秒一次心跳
+    timeoutObj: null, //心跳倒计时
+    serverTimeout0bj: null, //
+    timeoutnum: null, //断开重连倒计时
+})
+let zqname = ref({});
+let shiguobj = ref({
+    source: '自荐',
+    type: '预演',
+    sid: '-1'
+})
+let sgdata = ref({});
+let formull = ref({
+    source: '',
+    name: ''
+})
+let idobj = ref({
+    sgaid: "",
+    name: "",
+    time: ""
+})
+let router = useRouter();
+const value1 = ref('')
+let loading = ref(true)
+let aid = ref();
+let firepid = ref("");
+let firesid = ref("");
+const currentPage4 = ref(1);
+const pageSize4 = ref(3)
+let total = ref(1);
+const dialogVisible = ref(false);
+const classradio = ref();
+let classradio1 = ref('Fire');
+const leftcoll = ref({
+    collfire: false,
+    collwater: false,
+    Gass:false,
+});
+const monitor = ref(false);
+const dialog = ref({
+    dialogVisible_fire: false,
+    jianced: true,
+    monitor: false,
+    dialogForm: false,
+    dialogsgdelect: false,
+})
+let tuiyanobj = ref({
+    value: [''],
+    pickertime: '24-03-06 00:00:00',
+    acctime: '2024-03-06 00:00:00',
+    dt: '',
+    dx: '',
+    reportstep: '',
+    interactionstep: '',
+    totaltime: '',
+    coids: '',
+    cocodes: ''
+
+})
+let tuiyanobj2 = ref({
+    value: ['SO2'],
+    pickertime: '',
+    acctime: '2024-03-06 00:00:00',
+    dt: '0.1',
+    dx: '10',
+    reportstep: '60',
+    interactionstep: '3600',
+    totaltime: '3600',
+    coids: '1',
+    cocodes: 'CO2'
+
+})
+let tuiyanobj3 = ref({
+    value: ['SO2'],
+    pickertime: '',
+    acctime: '2024-03-06 00:00:00',
+    dt: '5',
+    dx: '5',
+    reportstep: '60',
+    interactionstep: '3600',
+    totaltime: '3600',
+    coids: '1',
+    cocodes: 'CO2'
+
+})
+let tableobj = ref({});
+let coolactiveName = ref(["1", "2"]);
+let newlog = ref("");
+let rizhi = ref({
+    top: "50px",
+    logs: '',
+    left: "90px"
+});
+let formLabelWidth5 = ref('130px');
+const formInline = ref({
+    user: '11',
+    region: 'shanghai',
+    date: '',
+
+})
+const value = ref([])
+const options = ref([])
+let arrvalue=ref([]);
+let scoperadio = ref(1);
+// 推演结果
+const customColor = ref('#409eff')
+const tableRowClassName = ({ row, rowIndex }) => {
+    if (rowIndex % 2 != 0) {
+        return 'evenRow';
+    }
+    return 'oddRow';
+
+}
+const tableData = ref([]);
+const tableData2 = [
+    {
+
+        date: '站点1',
+        name: '2',
+        address: '10',
+    },
+    {
+        date: '站点1',
+        name: '2',
+        address: '10',
+    },
+    {
+        date: '站点1',
+        name: '2',
+        address: '10',
+    },
+    {
+        date: '站点1',
+        name: '2',
+        address: '10',
+    },
+
+]
+const handleCurrentChange = ({ row, rowIndex }) => {
+    // console.log(row);
+}
+// aid获取
+
+// 类型选择
+const classclick = (val) => {
+    classradio.value= val;
+    console.log(classradio.value);
+    console.log(22222)
+    scoperadio.value="";
+    dialog.value.dialogVisible_fire = true;
+    props.addselect();
+    getdata();
+
+ 
+}
+// 事故确定列表
+const accident = () => {
+    if (idobj.value.name == '') {
+        ElMessage.error('请选择项目')
+    } else {
+    //   router.push({ path: "/appmian" });
+      console.log(router.push);
+        if(props.valzaiqing=='模拟数据'){
+        const params = {
+            transCode: 'D10017',
+            aid:aid.value,
+        }
+        request(params)
+            .then((res) => {
+                if(res.state=='1'){
+                    emit("leftsimulation",res,sgdata.value);
+                }
+                else if(res.state=='-1'){
+                    ElMessage({
+                        message: " 求解失败",
+                        type: 'error',
+                    });
+                    }else if(res.state=='0'){
+                    ElMessage({ message: "求解未完成",  type: 'error',
+                    });
+                    }
+            
+            })
+            .catch((err) => {
+                if(err.returnMsg=="任务不存在！"){
+   
+                    ElMessage({
+                    message: "未求解",
+                    type: 'error',
+                    });
+                    }
+            //ElMessage.error(err.returnMsg)
+            
+            })
+
+        }else{
+         initWebSocket();
+         rizhi.value.logs='';
+         newlog.value ='';  
+        emit('headerclick', sgdata.value);
+        emit('childfun');
+        emit('moxingclick', true);
+        pollute();
+         emit('handleSelect', '1');
+        fetchFileContent();
+        accident2(props.activeIndex)
+
+    }
+    dialog.value.dialogVisible_fire = false;
+    }
+  
+
+}
+const accident2 = (key,val) => {
+    classradio.value=val;
+    console.log(key);
+    if (key == '1'||key == '2'||key == '3') {
+        console.log(classradio.value);
+        if (classradio.value== "Fire") {
+ 
+            leftcoll.value.collfire = true;
+            leftcoll.value.collwater = false;
+            leftcoll.value.Gass = false;
+            console.log(leftcoll.value.collfire)
+            console.log(1112333)
+        } else if (classradio.value== "Water") {
+            leftcoll.value.collwater = true;
+            leftcoll.value.collfire = false;
+            leftcoll.value.Gass = false;
+        } else if(classradio.value== "Gass"){
+            leftcoll.value.Gass = true;
+            leftcoll.value.collfire = false;
+            leftcoll.value.collwater = false;
+        }
+        rewu();
+    } else {
+          leftcoll.value.collfire = false;
+          leftcoll.value.collwater = false;
+          leftcoll.value.Gass = false;
+    }
+
+}
+//事故添加列表
+const sgadd = () => {
+    const params = {
+        transCode: 'D00002',
+        source: shiguobj.value.source,
+        type: shiguobj.value.type,
+        name: formull.value.name,
+        stype: classradio.value,
+        sid: shiguobj.value.sid,
+        aid: aid.value
+    }
+    request(params)
+        .then((res) => {
+            dialog.value.dialogForm = false;
+            getdata();
+            scoperadio.value = null;
+        })
+        .catch((err) => {
+            ElMessage.error(err.returnMsg)
+        })
+}
+// 事故列表的选择
+const getRadioRow = (val) => {
+    // currentrow.value=true;
+    sgdata.value = (val);
+    console.log(tableobj.value)
+    formull.value.name = val.name;
+    aid.value = val.aid;
+    idobj.value.name = val.name;
+    idobj.value.time = val.time;
+}
+function handleCurrentChange2(val) {
+       scoperadio.value = null;
+    currentPage4.value = val;
+    getdata();
+}
+// 事故添加按钮
+const addsg = (val) => {
+    if (val == '1') {
+        currentrow.value=false;
+        shigtext.value = '事故添加';
+        aid.value = 0;
+        formull.value.name = '';
+    } else if (val == '2') {
+        shigtext.value = '事故修改';
+        formull.value.name = idobj.value.name
+    }
+    dialog.value.dialogForm = true;
+}
+// 事故删除
+const sgdelect = () => {
+    const params = {
+        transCode: 'D000016',
+        aid: aid.value,
+
+    }
+    request(params)
+        .then((res) => {
+            getdata();
+            ElMessage({
+                message: '删除成功',
+                type: 'success',
+            })
+        })
+        .catch((err) => {
+            loading.value = false;
+            ElMessage.error(err.returnMsg)
+        })
+
+}
+//事故获取列表
+const getdata = () => {
+    if(classradio.value== "Fire"){
+        placeholder.value='某次某事件火灾事故'
+    } else if (classradio.value== "Water") {
+        placeholder.value='某次某事件突水事故'
+    }else if(classradio.value== "Gass"){
+        placeholder.value='某次某事件瓦斯事故'
+    }
+    const params = {
+        transCode: 'D00003',
+        count: pageSize4.value,
+        page: currentPage4.value,
+        aid: aid.value,
+        stype: classradio.value,
+    }
+    request(params)
+        .then((res) => {
+            loading.value = false;
+            tableData.value = res.rows;
+            total.value = res.total;
+
+        })
+        .catch((err) => {
+            loading.value = false;
+            ElMessage.error(err.returnMsg)
+        })
+
+}
+// 污染物的查询
+const pollute = () => {
+    value.value=[];
+    const params = {
+        transCode: 'D10013',
+    }
+    request(params)
+        .then((res) => {
+            options.value = res.rows;
+           value.value.push(res.rows[0]);
+     
+
+        })
+        .catch((err) => {
+            ElMessage.error(err.returnMsg)
+        })
+}
+//任务求解任务信息
+//state 完成1  失败是-1
+const rewu=()=>{
+  
+     arrvalue.value=[];
+
+    const params = {
+        transCode: 'D10017',
+        aid:aid.value,
+    }
+    request(params)
+        .then((res) => {
+            arrvalue.value=res.cocodes.split(',');
+            tuiyanobj.value=res;
+            tuiyanobj.value.pickertime=res.acctime;
+            console.log(tuiyanobj.value.acctime)
+            console.log(options.value.length);
+            value.value=arrvalue.value;   
+            value.value=[];
+            for (let i = 0; i <options.value.length; i++){
+              for (let j = 0; j < arrvalue.value.length; j++){
+            if(options.value[i].code==arrvalue.value[j]){
+                value.value.push(options.value[i]);
+            }
+              }
+           }
+      
+        })
+        .catch((err) => {
+           // ElMessage.error(err.returnMsg)
+           addinitial();
+        })
+      
+}
+//默认时间
+const inititimeDefaultal = () => {
+    var date = new Date();
+    var timeStamp = Date.parse(date)
+    var s1 = timestampToTime(timeStamp);
+    return s1;
+}
+
+let isActive=ref(0)
+const  changeClass= (i)=>  {
+ isActive.value = i;
+}
+// 初始数据
+const initial = () => {
+  
+    addinitial();
+
+}
+const addinitial=()=>{
+    if (classradio.value == "Fire") {
+        tuiyanobj2.value.pickertime = inititimeDefaultal();
+        tuiyanobj2.value.acctime = inititimeDefaultal();
+        tuiyanobj2.value.cocodes = options.value[0].code;
+        tuiyanobj2.value.coids=options.value[0].coid;
+        tuiyanobj.value = tuiyanobj2.value;
+    } else {
+
+        tuiyanobj3.value.pickertime = inititimeDefaultal();
+        tuiyanobj3.value.acctime = inititimeDefaultal();
+        tuiyanobj.value = tuiyanobj3.value;
+    }
+}
+function zdtimechange() {
+
+
+}
+const timeclick = () => {
+
+    var timeStamp = Date.parse(tuiyanobj.value.pickertime)
+    tuiyanobj.value.acctime = timestampToTime(timeStamp);
+}
+//  下拉多选
+const selectchange = (val) => {
+    console.log(val);
+    let arr1 = [];
+    let arr2 = [];
+    for (let i = 0; i <= val.length - 1; i++) {
+        console.log(val[i])
+        arr1.push(val[i].coid);
+        arr2.push(val[i].code);
+    }
+    tuiyanobj.value.coids = arr1.join(',');
+    tuiyanobj.value.cocodes = arr2.join(',');
+}
+//推演的开始计算
+const calculate = () => {
+    rizhi.value.logs='';
+    newlog.value ='';
+    const params = {
+        transCode: 'D00008',
+        aid: aid.value,
+        acctime: tuiyanobj.value.acctime,
+        dt: tuiyanobj.value.dt,
+        dx: tuiyanobj.value.dx,
+        reportstep: tuiyanobj.value.reportstep,
+        interactionstep: tuiyanobj.value.interactionstep,
+        totaltime: tuiyanobj.value.totaltime,
+        coids: tuiyanobj.value.coids,
+        cocodes: tuiyanobj.value.cocodes,
+    }
+
+    request(params)
+        .then((res) => {
+          //  initWebSocket();
+        })
+        .catch((err) => {
+            ElMessage.error(err.returnMsg)
+        })
+}
+const projectsSelectionSelect = () => {
+}
+// 日志获取
+function getthislog(val) {
+
+    if (val.includes("msg=heartCheck")) {
+    } else {
+        newlog.value = newlog.value + "\n" + val;
+        rizhi.value.logs = newlog.value;
+    }
+        let textarea = document.getElementById("textarea_id");
+        textarea.scrollTop = textarea.scrollHeight;
+   
+}
+// 历史日志
+async function fetchFileContent() {
+    const params = {
+        transCode: "D000015",
+        aid: aid.value
+    };
+    await request(params)
+        .then((res) => {
+            if (res.returnCode == "000000000") {
+                  getthislog(res.logs);
+            } else {
+                ElMessage({
+                    message: res.returnMsg,
+                    type: "error",
+                });
+            }
+        })
+        .catch((err) => { });
+}
+// 日志
+function initWebSocket() {
+    //初始化weosocket
+    // const wsuri = "ws://192.168.0.43:8087//websocket?projectId="+this.pid; ws://192.168.0.131/diswebsocket?projectId=5
+    const wsurl = import.meta.env.VITE_WEBSOCKET_URL + aid.value
+    console.log(wsurl);
+    websock = new WebSocket(wsurl);
+    websock.onopen = websocketonopen;
+    websock.onmessage = websocketonmessage;
+    websock.onerror = websocketonerror;
+    websock.onclose = websocketclose;
+}
+
+// Websoket连接成功事件
+const websocketonopen = (res) => {
+ console.log("WebSocket连接成功", res);
+    start();
+};
+// Websoket接收消息事件
+const websocketonmessage = (res) => {
+ //   console.log("数据", res);
+    //  console.log(res.data);
+    getthislog(res.data);
+
+    reset();
+};
+// Websoket连接错误事件
+const websocketonerror = (res) => {
+    console.log("连接错误", res);
+    websock.value.close();
+    reconnect();
+};
+// Websoket断开事件
+const websocketclose = (res) => {
+    console.log("断开连接", res);
+};
+// 创建 websocket 的实例
+
+// 心跳包
+const reconnect = () => {
+    if (times.value.lockReconnect) return;
+    times.value.lockReconnect = true;
+    //没连接上会一直重连，设置延迟避免请求过多
+    times.value.timeoutnum && clearTimeout(times.value.timeoutnum);
+    times.value.timeoutnum = setTimeout(function () {
+        //新连接
+        initWebSocket();
+        times.value.lockReconnect = false;
+    }, 10000);
+}
+const reset = () => {
+    //重置心跳
+    clearTimeout(times.value.timeoutObj);
+    clearTimeout(times.value.serverTimeoutObj);
+    start();
+}
+const start = () => {
+    //开启心跳
+    times.value.timeoutObj && clearTimeout(times.value.timeoutObj);
+    times.value.serverTimeoutObj && clearTimeout(times.value.serverTimeoutObj);
+    times.value.timeoutObj = setTimeout(function () {
+        //这里发送一个心跳，后端收到后，返回一个心跳消息
+        if (websock.readyState == 1) {
+            //如果连接正常
+            websock.send("heartCheck");
+        } else {
+            //否则重连
+            console.log(111111)
+            reconnect();
+        }
+        times.value.serverTimeoutObj = setTimeout(function () {
+            // 超时关闭
+            websock.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
+        }, times.value.timeout);
+    }, times.value.timeout);
+}
+// 组件被销毁之前，清空 sock 对象
+onBeforeUnmount(() => {
+    // 关闭连接
+    websocketclose;
+    // 销毁 websocket 实例对象
+    websock.value = null;
+    rizhi.logs='';
+
+});
+
+onMounted(() => {
+
+   // dialogVisible.value=true;
+});
+
+defineExpose({ monitor, accident2, leftcoll, classradio, aid, dialogVisible ,changeModel,classclick});
+</script>
+