4.3改界面

package-lock.json

@@ -21,6 +21,7 @@
         "pinia-plugin-persistedstate": "^3.2.0",
         "sass": "^1.71.1",
         "sass-loader": "^13.3.3",
+        "v-scale-screen": "^2.2.0",
         "vue": "^3.3.4",
         "vue-router": "4.0",
         "webuploader": "^0.1.8"
@@ -7067,6 +7068,17 @@
       "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/v-scale-screen": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/v-scale-screen/-/v-scale-screen-2.2.0.tgz",
+      "integrity": "sha512-GHzwRYQwj5MTiYWxtdxI5S6DgEzFjSSMxg53TLddRgXjNSe/dG++Q+6AgrYS3HKDcWzccs19agF6UFcckxn1yA==",
+      "dependencies": {
+        "vue": "^3.2.37"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.37"
+      }
+    },
     "node_modules/vite": {
       "version": "4.4.9",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-4.4.9.tgz",

package.json

@@ -24,6 +24,7 @@
     "pinia-plugin-persistedstate": "^3.2.0",
     "sass": "^1.71.1",
     "sass-loader": "^13.3.3",
+    "v-scale-screen": "^2.2.0",
     "vue": "^3.3.4",
     "vue-router": "4.0",
     "webuploader": "^0.1.8"

src/App.vue

@@ -4,13 +4,13 @@
           <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
     <router-view v-if="!$route.meta.keepAlive"></router-view> -->
-  <!-- //<router-view></router-view> -->
-  <router-view v-slot="{ Component }">
+  <router-view></router-view>
+  <!-- <router-view v-slot="{ Component }">
 	   <keep-alive>
 	     <component :is="Component"  v-if="$route.meta.keepAlive"/>
 	   </keep-alive>
 	   <component :is="Component"  v-if="!$route.meta.keepAlive"/>
-	 </router-view> 
+	 </router-view>  -->
 </template>
 
 <script setup>

src/components.d.ts

@@ -13,5 +13,6 @@ declare module 'vue' {
     NavigateBar: typeof import('./components/layout/NavigateBar.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ScaleScreen: typeof import('./components/scale-screen/scale-screen.vue')['default']
   }
 }

src/js/lindex.js

@@ -21,6 +21,35 @@ export function timestampToTime(timestamp) {
        let dTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
         return dTime;
     }
-//     timestampToTime(1403058804);
-//     console.log(timestampToTime(1403058804));//2014-06-18 10:33:24
-//      }
+    export function formatTime(time, fmt) {
+        if (!time) return '';
+        else {
+          const date = new Date(time);
+          const o = {
+            'M+': date.getMonth() + 1,
+            'd+': date.getDate(),
+            'H+': date.getHours(),
+            'm+': date.getMinutes(),
+            's+': date.getSeconds(),
+            'q+': Math.floor((date.getMonth() + 3) / 3),
+            S: date.getMilliseconds(),
+          };
+          if (/(y+)/.test(fmt))
+            fmt = fmt.replace(
+              RegExp.$1,
+              (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+            );
+          for (const k in o) {
+            if (new RegExp('(' + k + ')').test(fmt)) {
+              fmt = fmt.replace(
+                RegExp.$1,
+                RegExp.$1.length === 1
+                  ? o[k]
+                  : ('00' + o[k]).substr(('' + o[k]).length)
+              );
+            }
+          }
+          return fmt;
+        }
+      }
+      

src/main.js

@@ -10,6 +10,7 @@ import 'element-plus/theme-chalk/index.css' // 引入整个Element样式
 import './style/index.css' // 引入整个Element样式
 import "normalize.css/normalize.css";//重置样式
 import '@/js/lindex.js'
+import VScaleScreen from 'v-scale-screen'
 // import mitt from 'mitt'
 
 //import '"element-plus/dist/index.css'
@@ -18,6 +19,7 @@ createApp(App)
     .use(router)
     .use(ElementUI)
     .use(createPinia)
+    .use(VScaleScreen)
     // .use(mitt)
     //.use(Vuex)
     .mount('#app')

src/utils/flexible.js

@@ -0,0 +1,137 @@
+(function (win, lib) {
+    var doc = win.document;
+    var docEl = doc.documentElement;
+    var metaEl = doc.querySelector('meta[name="viewport"]');
+    var flexibleEl = doc.querySelector('meta[name="flexible"]');
+    var dpr = 0;
+    var scale = 0;
+    var tid;
+    var flexible = lib.flexible || (lib.flexible = {});
+   
+    if (metaEl) {
+      console.warn("将根据已有的meta标签来设置缩放比例");
+      var match = metaEl.getAttribute("content").match(/initial-scale=([d.]+)/);
+      if (match) {
+        scale = parseFloat(match[1]);
+        dpr = parseInt(1 / scale);
+      }
+    } else if (flexibleEl) {
+      var content = flexibleEl.getAttribute("content");
+      if (content) {
+        var initialDpr = content.match(/initial-dpr=([d.]+)/);
+        var maximumDpr = content.match(/maximum-dpr=([d.]+)/);
+        if (initialDpr) {
+          dpr = parseFloat(initialDpr[1]);
+          scale = parseFloat((1 / dpr).toFixed(2));
+        }
+        if (maximumDpr) {
+          dpr = parseFloat(maximumDpr[1]);
+          scale = parseFloat((1 / dpr).toFixed(2));
+        }
+      }
+    }
+   
+    if (!dpr && !scale) {
+      // var isAndroid = win.navigator.appVersion.match(/android/gi);
+      var isIPhone = win.navigator.appVersion.match(/iphone/gi);
+      var devicePixelRatio = win.devicePixelRatio;
+      if (isIPhone) {
+        // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+          dpr = 3;
+        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
+          dpr = 2;
+        } else {
+          dpr = 1;
+        }
+      } else {
+        // 其他设备下，仍旧使用1倍的方案
+        dpr = 1;
+      }
+      scale = 1 / dpr;
+    }
+   
+    docEl.setAttribute("data-dpr", dpr);
+    if (!metaEl) {
+      metaEl = doc.createElement("meta");
+      metaEl.setAttribute("name", "viewport");
+      metaEl.setAttribute(
+        "content",
+        "initial-scale=" +
+          scale +
+          ", maximum-scale=" +
+          scale +
+          ", minimum-scale=" +
+          scale +
+          ", user-scalable=no"
+      );
+      if (docEl.firstElementChild) {
+        docEl.firstElementChild.appendChild(metaEl);
+      } else {
+        var wrap = doc.createElement("div");
+        wrap.appendChild(metaEl);
+        doc.write(wrap.innerHTML);
+      }
+    }
+   
+    function refreshRem() {
+      var width = docEl.getBoundingClientRect().width;
+      if (width / dpr > 1920) {
+        // 这个位置划重点 1920是设计稿的大小 如果你的设计稿是750 那么就需要将1920替换成750
+        width = (docEl.clientWidth / 1920) * 1920;
+      }
+      var rem = width / 10;
+      docEl.style.fontSize = rem + "px";
+      flexible.rem = win.rem = rem;
+    }
+   
+    win.addEventListener(
+      "resize",
+      function () {
+        clearTimeout(tid);
+        tid = setTimeout(refreshRem, 300);
+      },
+      false
+    );
+    win.addEventListener(
+      "pageshow",
+      function (e) {
+        if (e.persisted) {
+          clearTimeout(tid);
+          tid = setTimeout(refreshRem, 300);
+        }
+      },
+      false
+    );
+   
+    if (doc.readyState === "complete") {
+      doc.body.style.fontSize = 12 * dpr + "px";
+    } else {
+      doc.addEventListener(
+        "DOMContentLoaded",
+        function () {
+          doc.body.style.fontSize = 12 * dpr + "px";
+        },
+        false
+      );
+    }
+   
+    refreshRem();
+   
+    flexible.dpr = win.dpr = dpr;
+    flexible.refreshRem = refreshRem;
+    flexible.rem2px = function (d) {
+      var val = parseFloat(d) * this.rem;
+      if (typeof d === "string" && d.match(/rem$/)) {
+        val += "px";
+      }
+      return val;
+    };
+    flexible.px2rem = function (d) {
+      var val = parseFloat(d) / this.rem;
+      if (typeof d === "string" && d.match(/px$/)) {
+        val += "rem";
+      }
+      return val;
+    };
+  })(window, window["lib"] || (window["lib"] = {}));

src/view/InfoDialoges.vue

@@ -168,7 +168,7 @@
                                         <ul>
                                             <li>
                                                 <div class="demo-datetime-picker">
-                                                    <span class="inputtext_1">选择时间</span>
+                                                    <!-- <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"
@@ -245,7 +245,7 @@
                                         <ul>
                                             <li>
                                                 <div class="demo-datetime-picker">
-                                                    <span class="inputtext_1">选择时间</span>
+                                                    <!-- <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"
@@ -253,7 +253,11 @@
                                                     </div>
                                                 </div>
                                             </li>
-                                            <li><span class="inputtext_1">时间步长</span>
+                                            <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>
@@ -408,7 +412,16 @@ const props = defineProps({
     },
     valzaiqing:{
         type:String
-    }
+    },
+    classradio: {
+    type: String,
+    // default: '',activeIndex
+  },
+  activeIndex: {
+    type: String,
+    // default: '',activeIndex
+  },
+
 });
 let startlog=ref('0');
 let shigtext = ref('');
@@ -444,7 +457,7 @@ let firesid = ref("");
 const currentPage4 = ref(1);
 const pageSize4 = ref(3)
 let total = ref(1);
-const dialogVisible = ref(true);
+const dialogVisible = ref(false);
 const classradio = ref();
 let classradio1 = ref('Fire');
 const leftcoll = ref({
@@ -558,13 +571,15 @@ const handleCurrentChange = ({ row, rowIndex }) => {
 // aid获取
 
 // 类型选择
-const classclick = () => {
-   
+const classclick = (val) => {
+    classradio.value= val;
+    console.log(classradio.value);
+    console.log(22222)
     scoperadio.value="";
     dialog.value.dialogVisible_fire = true;
-    classradio.value = classradio1.value;
     props.addselect();
     getdata();
+
  
 }
 // 事故确定列表
@@ -606,8 +621,6 @@ const accident = () => {
             })
 
         }else{
-
-   
            initWebSocket();
           rizhi.value.logs='';
           newlog.value ='';
@@ -615,8 +628,9 @@ const accident = () => {
         emit('childfun');
         emit('moxingclick', true);
         pollute();
-        emit('handleSelect', '1');
+        // emit('handleSelect', '1');
           fetchFileContent();
+          accident2(props.activeIndex)
     }
     dialog.value.dialogVisible_fire = false;
     }
@@ -624,17 +638,26 @@ const accident = () => {
 
 }
 const accident2 = (key) => {
-    if (key == '3') {
+    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;
         } 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.collfire = false;
           leftcoll.value.collwater = false;
           leftcoll.value.Gass = false;
     }
@@ -989,7 +1012,7 @@ onMounted(() => {
    // dialogVisible.value=true;
 });
 
-defineExpose({ monitor, accident2, leftcoll, classradio, aid, dialogVisible ,changeModel});
+defineExpose({ monitor, accident2, leftcoll, classradio, aid, dialogVisible ,changeModel,classclick});
 </script>
 
 <style lang="scss" scoped>
@@ -1032,8 +1055,20 @@ defineExpose({ monitor, accident2, leftcoll, classradio, aid, dialogVisible ,cha
 
         ul li {
             text-align: left;
+            display: inline-flex;
+            width:100%;
+            .demo-datetime-picker{
+                display: inline-flex;
+                width:100%;
+             
+            }
+            .block,.el-input{
+                width:100% !important; 
+            }
+        }
+        .el-date-editor.el-input, .el-date-editor.el-input__wrapper{
+            width:100% !important; 
         }
-
         .inputkuang {
             height: 30px;
             width: 100%;
@@ -1059,6 +1094,7 @@ defineExpose({ monitor, accident2, leftcoll, classradio, aid, dialogVisible ,cha
             text-transform: none;
             padding: 13px 0 7px 0;
             display: inline-block;
+            width: 80px;
 
         }
     }
@@ -1229,12 +1265,6 @@ defineExpose({ monitor, accident2, leftcoll, classradio, aid, dialogVisible ,cha
     background-color: rgba(13, 22, 57, 0.96) !important;
 }
 
-.L_aside {
-    height: calc(100vh - 70px);
-    position: absolute;
-    top: 70px;
-    overflow: hidden;
-}
 
 .asides_content {
 
@@ -1628,12 +1658,6 @@ defineExpose({ monitor, accident2, leftcoll, classradio, aid, dialogVisible ,cha
     --el-collapse-content-bg-color: rgba(104, 173, 255, 0) !important;
 }
 
-.asideg .el-collapse-item__content {
-    height: calc(100vh - 100px);
-    overflow-y: auto;
-    padding: 0 !important;
-}
-
 .asideg .el-collapse-item__wrap {
 
     box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);

src/view/appmian.vue

@@ -1,8 +1,28 @@
 <template>
-  <div class="appmian">
+  <div class="appmian"  >
     <el-container>
       <el-header>
-        <div class="ve_menu_logo">
+      
+        <div class="d-flex jc-center title_wrap">
+          <div class="timers">
+            {{  headertime.dateYear }} {{  headertime.dateWeek }} {{  headertime.dateDay }}
+          </div>
+          <div class="titlebtn" @click="handleSelect('1')">突水推演</div>
+            <div class="titlebtn" @click="handleSelect('2')" style="margin-right: 20px;">火灾推演</div>
+          <div class="d-flex jc-center">
+            <div class="title tiletimg">
+            <div class="ve_logo_img">
+              <el-image style="height: 100%" :src="logo" fit="contain"></el-image>
+            </div>
+          
+              <span class="title-text">矿道灾情软件推演</span>
+            </div>
+          </div>
+          
+          <div class="titlebtn" @click="handleSelect('3')">瓦斯爆炸推演</div>
+            <div class="titlebtn" @click="handleSelect('4')">模型库</div>
+        </div>
+        <!-- <div class="ve_menu_logo">
           <div class="ve_title">
             <div class="ve_logo_img">
               <el-image style="height: 100%" :src="logo" fit="contain"></el-image>
@@ -40,34 +60,42 @@
                 <span class="l_time">{{ headerobj.time }}</span>
               </div>
             </div>
-            <!-- <router-link to="/configurator"> -->
-            <div class="ve_timeioc" @click="tiaozhuan()">
+          <router-link to="/configurator"> -->
+            <!-- <div class="ve_timeioc" @click="tiaozhuan()">
               <el-image :src="Vector" fit="contain"></el-image>
               <span>模型库</span>
             </div>
-            <!-- </router-link> -->
-          </div>
-        </div>
-      </el-header>
+         
+        </div>  -->
 
+      </el-header>
+ 
       <el-main>
+        <div class="main-conyeny">
+       
+        <source-disaster ref="sourcedis" :classradio="classradio"  />
+        <info-boundary ref="boundary" :classradio="classradio" />
+        <info-animation ref="tanimation" :classradio="classradio" :aid="aid" />
+        <InfoVtkmodel ref="vtkmodel" />
         <Dialoges
           ref="lliudialog"
           :addselect="addselect"
           :valzaiqing="valzaiqing"
           :headerobj="headerobj"
+          :activeIndex="activeIndex"
           @leftsimulation="leftsimulation"
           @headerclick="headerclick"
           @handleSelect="handleSelect"
           @childfun="childfun"
           @moxingclick="moxingclick"
+          :classradio="classradio" 
         ></Dialoges>
-        <source-disaster ref="sourcedis" :classradio="classradio"  />
-        <info-boundary ref="boundary" :classradio="classradio" />
-        <info-animation ref="tanimation" :classradio="classradio" :aid="aid" />
-        <InfoVtkmodel ref="vtkmodel" />
         <result ref="resultbidui" @titleclick="titleclick"  :classradio="classradio"></result>
+        <MenuMine ref="menumine"/>
+        <MenuSensor ref="menusen"/>
+      </div>
       </el-main>
+  
     </el-container>
   </div>
 </template>
@@ -75,6 +103,7 @@
 <script setup>
 import { ref, onMounted, reactive, nextTick } from "vue";
 import { RouterView, RouterLink, useRouter } from "vue-router";
+import '@/utils/flexible'
 // import NavigateBar from "@/components/layout/NavigateBar.vue";
 import Dialoges from "./InfoDialoges.vue";
 import logo from "@/assets/logo.png";
@@ -84,11 +113,14 @@ import SourceDisaster from "./components/InfoDisaster.vue";
 import InfoBoundary from "./components/InfoBoundary.vue";
 import InfoAnimation from "./components/InfoAnimation.vue";
 import InfoVtkmodel from "./components/InfoVtkmodel.vue";
+import MenuMine  from "./components/MenuMine.vue"
+import MenuSensor  from "./components/MenuSensor.vue"
 import result from "./result.vue";
 import Vector from "@/assets/img/Vector.png";
-import { timestampToTime } from "@/js/lindex.js";
+import { timestampToTime,formatTime } from "@/js/lindex.js";
 import mitts from "@/utils/Bus";
 import { contains } from "@kitware/vtk.js/Common/DataModel/BoundingBox";
+
 // import { vtkmodel } from "@/control/vtkModel.js";
 
 let lliudialog = ref();
@@ -96,6 +128,8 @@ let sourcedis = ref();
 let classradio = ref();
 let boundary = ref();
 let tanimation = ref();
+let menumine=ref();
+let menusen=ref();
 const title = "灾情推演软件";
 const activeIndex = ref("1");
 const activeIndex2 = ref("1");
@@ -105,6 +139,15 @@ let mnindex = ref("");
 let resultleft = ref({});
 let datares=ref({});
 let resultright = ref({});
+let headertime=ref({
+       timing: null,
+      loading: true,
+      dateDay: null,
+      dateYear: null,
+      dateWeek: null,
+      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
+})
+      
 let headerobj = ref({
   time: "",
   name: "",
@@ -113,23 +156,29 @@ let valzaiqing = ref("");
 let router = useRouter();
 let sgdata = ref({});
 let aid = ref();
-onMounted(() => {});
+onMounted(() => {
+  timeFn()
+});
 // 跳转页面,{ aid:aid.value}
-const tiaozhuan = () => {
-  activeIndex.value = "1";
-  handleSelect( activeIndex.value);
-  const key = activeIndex.value;
-  sourcedis.value.changeModel();
-  sourcedis.value.accident3(key);
-  boundary.value.accident4(key);
-  lliudialog.value.accident2(key);
-  tanimation.value.monitor = false;
-  router.push({ path: "/configurator" });
-
-  // console.log(router.push("/configurator"))
-
-  // console.log(router.push("/configurator"))
-};
+// 当前时间
+const timeFn=()=> {
+  headertime.value.timing = setInterval(() => {
+    headertime.value.dateDay = formatTime(new Date(), "HH: mm: ss");
+    headertime.value.dateYear = formatTime(new Date(), "yyyy-MM-dd");
+    headertime.value.dateWeek =  headertime.value.weekday[new Date().getDay()];
+      }, 1000);
+    }
+// const tiaozhuan = () => {
+//   activeIndex.value = "1";
+//   handleSelect( activeIndex.value);
+//   const key = activeIndex.value;
+//   sourcedis.value.changeModel();
+//   sourcedis.value.accident3(key);
+//   boundary.value.accident4(key);
+//   lliudialog.value.accident2(key);
+//   tanimation.value.monitor = false;
+//   router.push({ path: "/configurator" });
+// };
 
 const addselect = () => {
   classradio.value = lliudialog.value.classradio;
@@ -224,7 +273,8 @@ const childfun = () => {
     sourcedis.value.handledisaster(aid.value);
   }
   boundary.value.addboundary(aid.value);
-  sourcedis.value.accident3();
+  sourcedis.value.accident3(activeIndex.value);
+  boundary.value.accident4(activeIndex.value);
 };
 const headerclick = (data) => {
   console.log(data);
@@ -232,57 +282,44 @@ const headerclick = (data) => {
   headerobj.value.time = data.time;
   aid.value = data.aid;
 };
+//首页组件调用的方法
+const handindodialoges=()=>{
+
+}
+
 const handleSelect = (key) => {
-  activeIndex.value = "";
+
+  activeIndex.value =key;
   switch (key) {
     case "1":
-      sourcedis.value.changeModel();
-      sourcedis.value.accident3(key);
-      boundary.value.accident4(key);
-      lliudialog.value.accident2(key);
-      tanimation.value.monitor = false;
-      resultbidui.value.accident6(key, aid.value);
-      tanimation.value.accident5(aid.value, key);
-      activeIndex.value = "1";
+    classradio.value="Water";
+    lliudialog.value.classclick( classradio.value);
+    menumine.value.dialogVisible=false;
+    menusen.value.sendialogVisible=false;
       break;
     case "2":
-      boundary.value.changeModel();
-      boundary.value.accident4(key);
-      sourcedis.value.accident3(key);
-      lliudialog.value.accident2(key);
-      tanimation.value.monitor = false;
-      resultbidui.value.accident6(key, aid.value);
-      tanimation.value.accident5(aid.value, key);
-      activeIndex.value = "2";
+    classradio.value="Fire";
+    lliudialog.value.classclick( classradio.value);
+    menumine.value.dialogVisible=false;
+    menusen.value.sendialogVisible=false;
       break;
     case "3":
-      lliudialog.value.changeModel();
-      boundary.value.accident4(key);
-      sourcedis.value.accident3(key);
-      lliudialog.value.accident2(key);
-      tanimation.value.monitor = false;
-      activeIndex.value = "3";
-      tanimation.value.accident5(aid.value, key);
-      resultbidui.value.accident6(key, aid.value);
-
+    classradio.value="Gass";
+    console.log( classradio.value);
+    lliudialog.value.classclick( classradio.value);
+    menumine.value.dialogVisible=false;
+    menusen.value.sendialogVisible=false;
       break;
     case "4":
+    classradio.value="Model";
+    menumine.value.dialogVisible=true;
+    menusen.value.sendialogVisible=true;
       boundary.value.accident4(key);
-      tanimation.value.accident5(aid.value, key);
       sourcedis.value.accident3(key);
       lliudialog.value.accident2(key);
-      resultbidui.value.accident6(key, aid.value);
-      activeIndex.value = "4";
       break;
     case "5":
-      sourcedis.value.changeModel();
-      sourcedis.value.accident3(key);
-      boundary.value.accident4(key);
-      lliudialog.value.accident2(key);
-      resultbidui.value.accident6(key, aid.value);
-      tanimation.value.accident5(aid.value, key);
-      tanimation.value.monitor = false;
-      activeIndex.value = "5";
+
     default:
       break;
   }
@@ -290,12 +327,27 @@ const handleSelect = (key) => {
 </script>
 
 <style lang="scss" scoped>
+.title_wrap .title .title-text {
+   font-size: 0.1563rem;
+  //  font-size: 30px;
+    font-weight: 900;
+    letter-spacing: 6px;
+    width: 100%;
+    background: linear-gradient(92deg,#0072ff,#00eaff 48.8525390625%,#01aaff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.title_wrap{
+  display: flex;
+  justify-content: center;
+    color: #fff;
+}
 .appmian {
   .el-main {
     --el-main-padding: 0 !important;
   }
 
-  .el-header {
+  .el-container {
     padding: 0;
     margin: 0;
     width: 100%;
@@ -468,6 +520,26 @@ const handleSelect = (key) => {
 </style>
 
 <style>
+.titlebtn{
+  margin-left: 20px;
+  font-size: 0.10442rem;
+  margin-top: 15px;
+  font-weight: bold;
+  border: 1px solid #fff;
+  
+}
+.timers{
+  position: absolute;
+    left:20px;
+    top:0px;
+    font-size: 0.0938rem;
+    display: flex;
+    align-items: center;
+
+}
+.tiletimg{
+  display: flex;
+}
 body {
   width: 100%;
   height: 100vh;
@@ -480,8 +552,16 @@ button:focus-visible {
 }
 
 .l_Dialog {
-  position: absolute;
+  position: relative;
   z-index: 206;
-  top: 0;
+}
+.main-conyeny{
+    position: absolute;
+    z-index: 206;
+  top: 70px;
+}
+.L_aside {
+  margin-top: 10px;
+    overflow: hidden;
 }
 </style>

src/view/components/InfoBoundary.vue

@@ -89,19 +89,19 @@
       </el-aside>
     </div>
     <!-- 突水 -->
-    <div class="common-layout" style="margin: 0">
+    <div class="common-layout" style="margin: 0" >
       <el-aside
         width="231px"
         class="L_aside L_aside1 asideg asidegbg leftbgimg0"
         v-show="boun.collwater"
-      >
-        <div class="demo-collapse">
-          <el-collapse v-model="coolactiveName1" accordion>
+      > 
+       <div class="demo-collapse"> 
+         <el-collapse v-model="coolactiveName1" accordion>
             <el-collapse-item name="2">
               <template #title>
                 <el-icon class="iconimg Frame3" fit="contain"></el-icon>
                 突水<el-icon class="header-icon"> </el-icon>
-              </template>
+              </template> 
               <div class="asides_content">
                 <div class="jc_content tablecolor">
                   <div class="jc_padding font12">
@@ -147,8 +147,8 @@
               </div>
             </el-collapse-item>
           </el-collapse>
-        </div>
-      </el-aside>
+         </div> 
+    </el-aside>
     </div>
     <!-- 添加 -->
     <el-dialog
@@ -690,11 +690,14 @@ const tableRowClassName = ({ row, rowIndex }) => {
 };
 // 弹出框
 const accident4 = (key) => {
-  if (key == "2") {
+  if (key == "1"||key == "2") {
+    console.log(key);
     if (props.classradio == "Fire") {
       boun.value.collfire = true;
+      boun.value.collwater = false;
     } else if (props.classradio == "Water") {
       boun.value.collwater = true;
+      boun.value.collfire = false;
     } else {
     }
   } else {
@@ -1019,12 +1022,7 @@ defineExpose({ boun, accident4, addboundary, changeModel });
   background-color: rgba(13, 22, 57, 0.96) !important;
 }
 
-.L_aside {
-  height: calc(100vh - 70px);
-  position: absolute;
-  top: 70px;
-  overflow: hidden;
-}
+
 
 .el-form-item__label {
   color: #ffffff !important;

src/view/components/InfoDisaster.vue

@@ -1,11 +1,11 @@
 <template>
-  <!--  灾情源设置-->
-  <div class="l_Dialog bbb tablebk">
+  <!--  灾情源设置collapseaside-->
+  <div class="l_Dialog bbb tablebk ">
     <!--火灾左侧栏-->
     <div class="common-layout" style="margin: 0" v-show="sour.collfire">
       <el-aside width="354px" class="L_aside L_aside1 asideg asidegbg leftbgimg1">
         <div class="demo-collapse">
-          <el-collapse v-model="coolactiveName1" accordion>
+          <el-collapse v-model="coolactiveName1" accordion @change="handleChangecollapse ">
             <el-collapse-item name="1">
               <template #title>
                 <el-icon class="iconimg Frame2" fit="contain"></el-icon>
@@ -118,8 +118,6 @@
                       </div>
                     </div>
                   </div>
-
-                  <div style="height: 200px"></div>
                 </div>
               </div>
             </el-collapse-item>
@@ -128,7 +126,7 @@
       </el-aside>
     </div>
     <!-- 突水 -->
-    <div class="common-layout" style="margin: 0" v-show="sour.collwater">
+    <div class="common-layout collapseaside" style="margin: 0" v-show="sour.collwater">
       <el-aside width="354px" class="L_aside L_aside1 asideg asidegbg leftbgimg1">
         <div class="demo-collapse">
           <!-- 突水 sour.collwater-->
@@ -136,7 +134,7 @@
             <el-collapse-item name="1">
               <template #title>
                 <el-icon class="iconimg Frame3" fit="contain"></el-icon>
-                突水<el-icon class="header-icon"> </el-icon>
+                突水灾害源设置<el-icon class="header-icon"> </el-icon>
               </template>
               <div class="asides_content">
                 <div class="jc_content tablecolor">
@@ -148,7 +146,7 @@
                         :row-class-name="tableRowClassName"
                         :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }"
                         @row-click="handleDelete($event)"
-                        max-height="350px"
+                        :max-height="tableHeight"
                         :highlight-current-row="currentrow" 
                       >
                         <el-table-column prop="pname" label="选择巷道"  />
@@ -243,18 +241,21 @@
                       </div>
                     </div>
                   </div>
-
-                  <div style="height: 200px"></div>
                 </div>
               </div>
             </el-collapse-item>
+            <!-- <el-collapse-item name="2">
+              <div style="position: relative;">是的
+              <info-boundary :classradio="classradio" /></div>
+            </el-collapse-item> -->
           </el-collapse>
+        
         </div>
       </el-aside>
     </div>
     <!-- 瓦斯爆炸 -->
      <!--火灾左侧栏-->
-     <div class="common-layout" style="margin: 0" v-show="sour.Gass">
+     <div class="common-layout " style="margin: 0" v-show="sour.Gass">
       <el-aside width="465px" class="L_aside L_aside1 asideg asidegbg leftbgimg1">
         <div class="demo-collapse">
           <el-collapse v-model="coolactiveName1" accordion>
@@ -1050,6 +1051,8 @@ import {
   DROPDOWN_COLLECTION_INJECTION_KEY,
 } from "element-plus";
 import { Calendar, Search } from "@element-plus/icons-vue";
+
+import InfoBoundary from "./InfoBoundary.vue";
 import { c } from "@kitware/vtk.js/macros2";
 import { vtkmodel } from "@/control/vtkModel.js";;
 import selfdialogs from "./SetPipe.vue";
@@ -1142,7 +1145,7 @@ let searchtaggd = ref("");
 let total = ref(1);
 let gdadd = ref("0");
 let jcadd = ref();
-let tableHeight = ref(300);
+let tableHeight = ref(150);
 const multipleTableRef = ref();
 const multipleSelection = ref([]);
 const formLabelWidth5 = ref(77);
@@ -1175,7 +1178,7 @@ const tableData4 = ref([]);
 
 const accident3 = (key) => {
   
-  if (key == "1") {
+  if (key == "1"||key == "2"||key == "3") {
     if (props.classradio == "Fire") {
       sour.value.collfire = true;
       sour.value.collwater = false;
@@ -1253,6 +1256,13 @@ const fireadd = () => {
     });
   }
 };
+//下拉跳转
+const handleChangecollapse = (val) => {
+  
+  coolactiveName1.value=val;
+  
+}
+
 //添加保存
 const handleEditfire = () => {
   if (gdadd.value == "1") {
@@ -2192,12 +2202,7 @@ defineExpose({ sour, accident3, handledisaster,changeModel,Gassgetdata});
 .el-table thead th {
   background-color: rgba(13, 22, 57, 0.96) !important;
 }
-.L_aside {
-  height: calc(100vh - 70px);
-  position: absolute;
-  top: 70px;
-  overflow: hidden;
-}
+
 .el-form-item__label {
   color: #ffffff !important;
 }
@@ -2365,4 +2370,8 @@ padding: 0 13px 0 0;
  margin-top: 20px;
  width:350px;
 }
+/* .collapseaside{
+  position: absolute;
+
+} */
 </style>

src/view/components/InfoRun.vue

@@ -0,0 +1,1903 @@
+<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"><span class="spantext" @click="initial();">初始数据</span></div>
+                                        <div class="btn"><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="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 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"><span class="spantext" @click="initial();">初始数据</span></div>
+                                        <div class="btn"><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"><span class="spantext" @click="initial();">初始数据</span></div>
+                                        <div class="btn"><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: '',
+  },
+
+});
+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: ""
+})
+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(true);
+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;
+    scoperadio.value="";
+    dialog.value.dialogVisible_fire = true;
+    props.addselect();
+    getdata();
+
+ 
+}
+// 事故确定列表
+const accident = () => {
+    if (idobj.value.name == '') {
+        ElMessage.error('请选择项目')
+    } else {
+        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("1")
+    }
+    dialog.value.dialogVisible_fire = false;
+    }
+  
+
+}
+const accident2 = (key) => {
+    if (key == '1'||key == '2'||key == '3') {
+        if (classradio.value== "Fire") {
+            leftcoll.value.collfire = true;
+        } else if (classradio.value== "Water") {
+            leftcoll.value.collwater = true;
+        } else if(classradio.value== "Gass"){
+            leftcoll.value.Gass = true;
+        }
+        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{
+    }
+    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++){
+              console.log(options.value[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;
+}
+
+// 初始数据
+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>
+
+<style lang="scss" scoped>
+.jc_padding {
+    padding: 18px 10px;
+}
+
+.line {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
+    box-sizing: border-box;
+}
+
+.L_aside {
+    .iconimg {
+        width: 37px;
+        height: 36px;
+        margin: 0 7px 0 24px;
+    }
+
+    .Frame2 {
+        background-image: url(../assets/img/Frame2.png);
+        background-size: 100%;
+        background-position: center;
+    }
+
+    .Frame3 {
+        background-image: url(../assets/img/Frame3.png);
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+    .Frame4 {
+        
+        background-image: url(../assets/img/Group27.png);
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+    .el-collapse,
+    .el-collapse-item__header {
+        border: none;
+
+        ul li {
+            text-align: left;
+            display: inline-flex;
+            width:100%;
+            .demo-datetime-picker{
+                display: inline-flex;
+                width:100%;
+             
+            }
+            .block,.el-input{
+                width:100% !important; 
+            }
+        }
+        .el-date-editor.el-input, .el-date-editor.el-input__wrapper{
+            width:100% !important; 
+        }
+        .inputkuang {
+            height: 30px;
+            width: 100%;
+            background: rgba(13, 22, 57, 0.4);
+            position: relative;
+
+            .righttext {
+                display: inline-block;
+                position: absolute;
+                right: 10px;
+                top: 3px;
+                color: rgba($color: #FFFFFF, $alpha: 0.8);
+            }
+        }
+
+        .inputtext_1 {
+            font-weight: 400;
+            font-size: 13px;
+            color: #FFFFFF;
+            line-height: 14px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            padding: 13px 0 7px 0;
+            display: inline-block;
+            width: 80px;
+
+        }
+    }
+}
+
+.ddd {
+    margin-top: 20px;
+
+    .ddd_div {
+        padding: 20px 0;
+        position: relative;
+    }
+
+    .class_btn {
+        position: absolute;
+        right: 0;
+        top: 21px;
+    }
+
+}
+
+.header_l {
+    line-height: 10px;
+    // height: 40px;
+    text-align: left;
+    padding: 0 20px;
+    // border-bottom: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), 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;
+
+    .el-image {
+        padding: 10px 10px 0 0;
+    }
+
+    h4 {
+        font-weight: bold;
+        font-size: 12px;
+        color: #68ADFF;
+        line-height: 14px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+
+.tianjia {
+    display: inline-block;
+}
+
+.el-dialog__title {
+    display: inline-block;
+}
+
+.bgcolor {
+    // width: 482px;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+}
+
+.dialog_class {
+    .my-header {
+        line-height: 10px;
+        height: 40px;
+        text-align: left;
+        padding: 0 20px;
+        border-bottom: 1px solid;
+        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), 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;
+
+        .el-image {
+            padding: 10px 10px 0 0;
+        }
+
+        h4 {
+            font-weight: bold;
+            font-size: 12px;
+            color: #68ADFF;
+            line-height: 14px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+        }
+    }
+
+    .my_content {
+        width: 100%;
+        height: 90px;
+        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+        border-radius: 0px 0px 0px 0px;
+        position: relative;
+
+        .radio-group {
+            display: flex;
+            justify-content: center;
+
+            .el-radio {
+                flex: 1;
+                justify-content: center;
+                font-weight: bold;
+                font-size: 12px;
+                color: #FFFFFF;
+                line-height: 14px;
+
+            }
+
+        }
+    }
+
+    .el-dialog__footer {
+        position: absolute;
+        bottom: 17px;
+        display: flex;
+
+        .footerbtn {
+            flex: 1;
+            text-align: center;
+        }
+    }
+}
+
+.my_content1 {
+    .el-table .cell {
+        font-weight: 400;
+        font-size: 12px;
+        color: #FFFFFF !important;
+        line-height: 14px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+}
+
+.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;
+}
+
+.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); */
+    -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 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
+}
+
+.el-table,
+.el-table thead th {
+    background-color: rgba(13, 22, 57, 0.96) !important;
+}
+
+
+.asides_content {
+
+    //     background: rgba(13,22,57,0.4);
+    // box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+    // border-radius: 0px 0px 0px 0px;
+    // border: 1px solid;
+    // border-image: linear-gradient(359deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0)) 1 1;
+    .el-form-item__label {
+        color: #FFFFFF !important;
+    }
+}
+
+.asdis_btn {
+    display: flex;
+    margin-top: 9px;
+
+    .btn {
+        flex: 1;
+        width: 145px;
+        height: 54px;
+        background-image: url(../assets/img/Rectangle5.png);
+        background-repeat: no-repeat;
+        line-height: 54px;
+
+        .spantext {
+            font-weight: bold;
+            font-size: 12px;
+            color: #FFFFFF;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+
+        }
+    }
+}
+
+.logs {
+    margin-top: 25px;
+    border-radius: 0px 0px 0px 0px;
+    border-top: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+
+    h4 {
+        padding: 10px 0;
+        font-weight: 400;
+        font-size: 13px;
+        color: #FFFFFF;
+        line-height: 14px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+
+.logs_pading {
+    padding: 13px 20px 23px 24px;
+}
+
+.newtime {
+    height: 112px;
+    padding: 38px;
+    font-weight: bold;
+    font-size: 20px;
+    color: #FF0F0F;
+    line-height: 23px;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+}
+
+.animation_s {
+    padding: 25px;
+}
+
+.tanniu ul {
+    margin-top: 40px;
+    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;
+        }
+    }
+}
+
+.jiancedian {
+    width: 371px;
+    position: absolute;
+    right: 0;
+    top: 70px;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 4px 4px 4px 4px;
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+}
+</style>
+
+<style>
+/* //.bgcolor */
+.bgcolor {
+    border-radius: 0px 0px 0px 0px;
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+}
+
+.dialog_class {
+    background-color: rgba(13, 22, 57, 0.96) !important;
+    width: 482px;
+
+
+
+}
+
+.el-dialog__header,
+.el-dialog__body,
+.el-dialog__footer {
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+.el-dialog {
+    --el-dialog-padding-primary: 0px !important;
+}
+
+.el-dialog__headerbtn {
+    position: absolute;
+    top: 2px !important;
+    right: 0;
+    padding: 0;
+    width: 40px !important;
+    height: 40px !important;
+    background: 0 0;
+    border: none;
+    outline: 0;
+    cursor: pointer;
+    font-size: var(--el-message-close-size, 16px);
+}
+
+.el-icon {
+    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);
+}
+
+.class_footer {
+    position: absolute;
+    bottom: 17px;
+}
+
+.footer_div {
+    height: 90px;
+    padding: 30px 0;
+}
+
+.l_btn {
+    width: 100%;
+
+    bottom: 17px;
+    display: flex;
+    border-radius: 4px;
+
+}
+
+.el-table .el-table__cell {
+    padding: 0 !important;
+    height: 30px;
+    line-height: 30px;
+}
+
+/* .el-table tr,.el-table th.el-table__cell{
+            background-color: rgba(13, 22, 57, 0.96) !important;
+        } */
+.el-table__row {
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+}
+
+.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+    /* box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2); */
+    border-radius: 0px 0px 0px 0px;
+    border-bottom: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+}
+
+.oddRow {
+    background-color: rgba(104, 173, 255, 0.20) !important;
+}
+
+.evenRow {
+    background-color: rgba(13, 22, 57, 0.96) !important;
+}
+
+.my_content1 .el-table .cell {
+    font-weight: 400;
+    font-size: 12px;
+    color: #FFFFFF !important;
+    line-height: 14px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.el-table--border .el-table__inner-wrapper::after,
+.el-table--border::after,
+.el-table--border::before,
+.el-table__inner-wrapper::before {
+    height: 0 !important;
+    background-color: rgba(red, green, blue, 0) !important;
+}
+.el-button:focus,
+.el-button:hover {
+    background: rgba(104, 173, 255, 1) !important;
+    font-weight: bold;
+    color: #000 !important;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 4px 4px 4px 4px;
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+}
+
+.el-input__wrapper {
+
+    height: 30px;
+    background: rgba(104, 173, 255, 0.3) !important;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2) !important;
+    border-radius: 0px 0px 0px 0px;
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+}
+
+.selecwidth .el-input__wrapper {
+    height: auto !important;
+}
+
+.selecwidth .el-select__tags {
+    max-width: 200px !important;
+}
+
+.ddd_div .el-input__inner {
+    border: none;
+    /* background: rgba(104,173,255,0.3); */
+
+}
+
+.ddd_div .el-form-item__label {
+    color: #fff !important;
+}
+
+.ddd_div .demo-input-suffix {
+    width: 100%;
+}
+
+.ddd .el-form-item {
+    width: 72% ;
+}
+
+/* .el-input__inner::placeholder {
+			color: #fff !important;
+		} */
+.flex1 {
+    flex: 1;
+}
+
+.el-radio__input.is-checked .el-radio__inner {
+    border-color: #fff !important;
+    background: #fff !important;
+}
+
+.el-radio__inner {
+    border: 2px solid #fff !important;
+    background-color: rgba(104, 173, 255, 0) !important;
+    border: 1px solid #68ADFF;
+}
+
+.asideg .el-collapse-item__header {
+    height: 50px !important;
+    width: 100%;
+
+    background-position: left;
+    border: none !important;
+    font-weight: bold;
+    font-size: 15px;
+    color: #FFFFFF;
+    line-height: 18px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.leftbgimg .el-collapse-item__header {
+    background-image: url(../assets/img/Group10.png) !important;
+}
+
+.asideg1 .jc_header {
+    width: 100%;
+    height: 52px;
+    line-height: 69px;
+    background-image: url(../assets/img/Group24.png) !important;
+    background-repeat: no-repeat;
+    background-position: center;
+
+}
+
+.jc_tile {
+    padding-left: 20px;
+}
+
+.he_pading {
+    padding: 19px 14px 0 31px;
+}
+
+.asideg1 .el-form-item__label {
+    font-weight: 400;
+    font-size: 13px;
+    color: #FFFFFF;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.asideg .el-collapse {
+    --el-collapse-header-bg-color: none !important;
+}
+
+.asideg .el-collapse-item__arrow {
+    margin: 0 8px 0 auto;
+    font-weight: 800;
+    color: #fff !important;
+    font-weight: bold !important;
+    font-size: 20px !important;
+}
+
+.el-collapse-item__content {
+    background: rgba(13, 22, 57, 0.2);
+}
+
+.asideg .el-input__wrapper {
+    background: rgba(104, 173, 255, 0) !important;
+    border: 1px solid rgba(31, 107, 255, 1);
+    border-radius: 4px;
+    box-shadow: none !important;
+}
+
+.asideg .el-input__inner {
+    color: rgba(255, 15, 15, 1);
+    font-weight: 400;
+    font-size: 16px;
+}
+
+.el-collapse {
+    --el-collapse-header-bg-color: rgba(104, 173, 255, 0) !important;
+    --el-collapse-header-text-color: var(--el-text-color-primary);
+    --el-collapse-header-font-size: 13px;
+    --el-collapse-content-text-color: rgba(104, 173, 255, 0) !important;
+    --el-collapse-content-bg-color: rgba(104, 173, 255, 0) !important;
+}
+
+.asideg .el-collapse-item__wrap {
+
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 4px 4px 4px 4px;
+    border-bottom: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+}
+
+#textarea_id {
+    color: #fff;
+    font-size: 12px;
+    height: 226px;
+    background: rgba(104, 173, 255, 0) !important;
+    border: 1px solid rgba(31, 107, 255, 1);
+    border-radius: 4px;
+    box-shadow: none !important;
+}
+
+.asides_content .el-form-item__label {
+    color: #FFFFFF !important;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 33px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.el-form-item {
+    width: 100%;
+}
+
+.el-select__wrapper {
+    background-color: rgba(104, 173, 255, 0) !important;
+}
+
+.el-select__wrapper.is-hovering:not(.is-focused),
+.el-select__wrapper {
+    box-shadow: none !important;
+    border: 1px solid rgba(31, 107, 255, 1);
+    border-radius: 4px;
+    box-shadow: none !important;
+}
+
+/* Webkit内核浏览器（Chrome、Safari等）*/
+::-webkit-scrollbar {
+    width: 4px;
+    /* 设置滚动条宽度 */
+    background-color: #161A2A;
+    /* 设置滚动条背景颜色 */
+}
+
+/* 滑块样式 */
+::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    /* 设置滑块边角半径 */
+    background-color: rgba(31, 107, 255, 1);
+    /* 设置滑块背景颜色 */
+}
+
+/* 滑块在hover状态时的样式 */
+::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+    /* 设置滑块在hover状态下的背景颜色 */
+}
+
+/* 滚动条轨道样式 */
+::-webkit-scrollbar-track {
+    background-color: rgba(104, 173, 255, 0.4)
+        /* 设置滚动条轨道背景颜色 */
+}
+
+.result .el-tabs__item {
+    padding: 17px !important;
+    font-weight: bold;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 16px;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+}
+
+.el-tabs--card>.el-tabs__header,
+.el-tabs--card>.el-tabs__header,
+.el-tabs--card>.el-tabs__header .el-tabs__nav {
+    border: none !important;
+}
+
+.el-tabs {
+    --el-tabs-header-height: 70px !important;
+}
+
+.result .el-tabs__item {
+    border-left: 1px solid;
+    border-right: 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;
+    font-weight: bold;
+    font-size: 14px;
+    color: #fff;
+    line-height: 23px;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+}
+
+.result .is-active {
+    height: 70px;
+    background: radial-gradient(ellipse at 54px 0px, #3AA0FF -37%, #123066 53%);
+    border-radius: 0px 0px 0px 0px;
+    border: 2px solid;
+    color: rgba(255, 15, 15, 1) !important;
+    border-left: 1px solid rgba(16, 92, 240, 1);
+    border-right: 1px solid rgba(18, 48, 102, 1);
+    border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
+}
+
+.result .el-tabs__item:hover {
+    color: rgba(255, 15, 15, 1);
+    cursor: pointer;
+}
+
+.result .el-tabs__header {
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+.result .el-tabs__content {
+    border: 1px solid;
+    color: rgba(255, 15, 15, 1) !important;
+    border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+    position: relative;
+}
+
+.result .el-tabs__content {
+    width: 275px;
+}
+
+.el-slider__button {
+    height: 10px;
+    width: 10px;
+
+}
+
+.color1 {
+    font-weight: 400;
+    font-size: 13px;
+    color: #FFFFFF;
+    line-height: 14px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.jc_padding .el-table tr {
+    height: 40px;
+    background-color: none;
+
+
+}
+
+.jc_padding .el-table .cell {
+    font-weight: 400;
+    font-size: 13px;
+    color: #FFFFFF;
+    line-height: 14px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.tianjia .el-dialog__body {
+    padding: 20px !important;
+}
+
+.tianjia .el-form-item__label {
+    color: #fff;
+
+}
+
+.tianjia .el-input__inner {
+    color: #fff;
+    font-size: 14px;
+    font-weight: 400;
+    text-align: left;
+    padding: 20px 0;
+    height: 30px;
+    line-height: 47px;
+}
+
+.ddd_div .el-input__inner {
+    color: #fff;
+}
+
+.pagination {
+    margin-top: 30px;
+    display: flex;
+    justify-content: center;
+}
+
+.pagination .el-pagination__total {
+    color: #fff;
+}
+
+.el-pagination.is-background .btn-next.is-disabled,
+.el-pagination.is-background .btn-next:disabled,
+.el-pagination.is-background .btn-prev.is-disabled,
+.el-pagination.is-background .btn-prev:disabled,
+.el-pagination.is-background .el-pager li.is-disabled,
+.el-pagination.is-background .el-pager li:disabled {
+    background: rgba(104, 173, 255, 0.3) !important;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2) !important;
+    border-radius: 0px 0px 0px 0px;
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+}
+
+.delecttitle {
+    font-size: 18px;
+    font-weight: bold;
+    color: #fff;
+}
+
+.scoperadio .el-radio__label {
+    display: none;
+}
+
+.el-select__input {
+    font-size: 12px;
+}
+
+ul,
+ol {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.tuiy{
+    z-index: 888 !important;
+}
+.tuiy .asideg .el-input__inner {
+    font-size: 14px !important;
+}
+.spantext{
+    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;
+}
+.shigutable  .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+    background-color: rgba(255, 255, 25, 0) !important;
+}
+</style>

src/view/components/MenuCheck.vue

@@ -645,13 +645,6 @@ defineExpose({ sendialogVisible, });
     background-color: rgba(13, 22, 57, 0.96) !important;
 }
 
-.L_aside {
-    height: calc(100vh - 70px);
-    position: absolute;
-    top: 70px;
-    overflow: hidden;
-}
-
 .el-form-item__label {
     color: #FFFFFF !important;
 }

src/view/components/MenuPhysics.vue

@@ -501,12 +501,6 @@ defineExpose({ sendialogVisible, });
     background-color: rgba(13, 22, 57, 0.96) !important;
 }
 
-.L_aside {
-    height: calc(100vh - 70px);
-    position: absolute;
-    top: 70px;
-    overflow: hidden;
-}
 
 .el-form-item__label {
     color: #FFFFFF !important;

src/view/components/MenuSensor.vue

@@ -1,14 +1,25 @@
 <template>
+     <div class="l_Dialog bou tablebk">
+      <!--火灾左侧栏-->
+      <div class="common-layout" style="margin: 0">
+        <el-aside
+          width="591px"
+          class="L_aside L_aside1 asideg asidegbg leftbgimg2"
+          v-show="sendialogVisible"
+        >
+          <div class="demo-collapse">
+            <el-collapse v-model="coolactiveName1" 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">
+                  <div class="jc_content tablecolor">
+                    <div class="jc_padding font12">
+                      <div class="xian btncolor tablefocus bmar">
     <div class="l_Dialog">
-        <el-dialog v-model="sendialogVisible" width="470" align-center :modal="false" :close-on-click-modal="false"
-            modal-class="summary-dlg" draggable class="dialog_class bgcolor zhucentent chuanjianc">
-            <template #header="{ titleId, titleClass }">
-                <div class="my-header xinxi_header">
-                    <el-image :src="icon" fit="contain"></el-image>
-                    <h4 :id="titleId" :class="titleClass">传感器信息</h4>
-
-                </div>
-            </template>
+    
             <div class="classtab">
                 <div class="asides_content">
                     <div class="jc_content tablecolor jc_content">
@@ -53,7 +64,6 @@
                     </div>
                 </div>
             </div>
-        </el-dialog>
         <!-- 添加 -->
         <el-dialog v-model="addVisible" width="400" class="dialog_class bgcolor tianjia  foter_l tianjia">
 
@@ -120,6 +130,17 @@
         <!-- 选择管道 -->
         <pipelines ref="pipeline" :selectstr="source.selectstr" @pipelineapi="pipelineapi" />
     </div>
+    <!--  -->
+</div>
+                    </div>
+                  </div>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </el-aside>
+      </div>
+    </div>
 </template>
 
 <script setup>
@@ -136,9 +157,10 @@ let addVisible = ref(false);
 let dialogsgdelect = ref(false)
 let classradio1 = ref('Fire');
 const formLabelWidth6 = ref(100);
+let coolactiveName1 = ref(["1", "2"]);
 let add = ref("")
 const resultactiveName = ref("first");
-let tableHeight = ref(400);
+let tableHeight = ref(180);
 let tableData = ref([]);
 let tableobj = ref({});
 let zqname = ref();
@@ -513,12 +535,6 @@ defineExpose({ sendialogVisible, });
     background-color: rgba(13, 22, 57, 0.96) !important;
 }
 
-.L_aside {
-    height: calc(100vh - 70px);
-    position: absolute;
-    top: 70px;
-    overflow: hidden;
-}
 
 .el-form-item__label {
     color: #FFFFFF !important;

src/view/components/NodeLine.vue

@@ -391,12 +391,6 @@ defineExpose({ dialogVisiblenode, pipelinedata,searchtaggd });
     background-color: rgba(13, 22, 57, 0.96) !important;
 }
 
-.L_aside {
-    height: calc(100vh - 70px);
-    position: absolute;
-    top: 70px;
-    overflow: hidden;
-}
 
 .el-form-item__label {
     color: #FFFFFF !important;

src/view/components/PipeIine.vue

@@ -413,12 +413,6 @@ const projectsSelectionSelect=(selection, row)=>{
     background-color: rgba(13, 22, 57, 0.96) !important;
 }
 
-.L_aside {
-    height: calc(100vh - 70px);
-    position: absolute;
-    top: 70px;
-    overflow: hidden;
-}
 
 .el-form-item__label {
     color: #FFFFFF !important;

src/view/components/SetNode.vue

@@ -345,13 +345,6 @@ function jgSelect(){
   background-color: rgba(13, 22, 57, 0.96) !important;
 }
 
-.L_aside {
-  height: calc(100vh - 70px);
-  position: absolute;
-  top: 70px;
-  overflow: hidden;
-}
-
 .el-form-item__label {
   color: #ffffff !important;
 }

src/view/components/SetPipe.vue

@@ -355,13 +355,6 @@ function jgSelect(){
   background-color: rgba(13, 22, 57, 0.96) !important;
 }
 
-.L_aside {
-  height: calc(100vh - 70px);
-  position: absolute;
-  top: 70px;
-  overflow: hidden;
-}
-
 .el-form-item__label {
   color: #ffffff !important;
 }

src/view/configurator.vue

@@ -297,7 +297,7 @@ watch(router, (to, from) => {
     outline:none;
   }
   .l_Dialog{
-    position: absolute;
+    /* position: absolute; */
     z-index: 206;
     top: 0;
 

src/view/home.vue

@@ -0,0 +1,488 @@
+<template>
+    <div class="appmian">
+      <el-container>
+        <el-header>
+          <div class="ve_menu_logo">
+            <div class="ve_title">
+              <div class="ve_logo_img">
+                <el-image style="height: 100%" :src="logo" fit="contain"></el-image>
+              </div>
+              <h3 class="ve_logo_title">
+                {{ title }}
+              </h3>
+            </div>
+            <el-menu
+              :default-active="activeIndex"
+              class="el-menu-demo"
+              mode="horizontal"
+              :popper-offset="2"
+              style="width: 780px"
+              background-color="#0D1639 "
+              active-background-color="#0E50C8"
+              text-color="#68ADFF"
+              active-text-color="#fff"
+              @select="handleSelect"
+            >
+              <el-menu-item index="1">灾害源设置</el-menu-item>
+              <el-menu-item index="2">边界设置</el-menu-item>
+  
+              <el-menu-item index="3">灾害推演</el-menu-item>
+              <el-menu-item index="4">推演结果</el-menu-item>
+              <el-menu-item index="5">结果对比</el-menu-item>
+            </el-menu>
+            <div class="ve_right">
+              <div class="ve_timeioc" v-if="aid == null" @click="titleclick()">
+                <span>请选择</span>
+              </div>
+              <div v-else>
+                <div class="ve_time" v-show="titlefalse" @click="titleclick()">
+                  <span class="l_huoqing" >{{ headerobj.name }}</span>
+                  <span class="l_time">{{ headerobj.time }}</span>
+                </div>
+              </div>
+              <!-- <router-link to="/configurator"> -->
+              <div class="ve_timeioc" @click="tiaozhuan()">
+                <el-image :src="Vector" fit="contain"></el-image>
+                <span>模型库</span>
+              </div>
+              <!-- </router-link> -->
+            </div>
+          </div>
+        </el-header>
+  
+        <el-main>
+          <Dialoges
+            ref="lliudialog"
+            :addselect="addselect"
+            :valzaiqing="valzaiqing"
+            :headerobj="headerobj"
+            @leftsimulation="leftsimulation"
+            @headerclick="headerclick"
+            @handleSelect="handleSelect"
+            @childfun="childfun"
+            @moxingclick="moxingclick"
+          ></Dialoges>
+          <source-disaster ref="sourcedis" :classradio="classradio"  />
+          <info-boundary ref="boundary" :classradio="classradio" />
+          <info-animation ref="tanimation" :classradio="classradio" :aid="aid" />
+          <InfoVtkmodel ref="vtkmodel" />
+          <result ref="resultbidui" @titleclick="titleclick"  :classradio="classradio"></result>
+        </el-main>
+      </el-container>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, reactive, nextTick } from "vue";
+  import { RouterView, RouterLink, useRouter } from "vue-router";
+  // import NavigateBar from "@/components/layout/NavigateBar.vue";
+  import Dialoges from "./InfoDialoges.vue";
+  import logo from "@/assets/logo.png";
+  import { ElMessage, ElButton, ElDialog, ElSelect, formEmits } from 'element-plus'
+  // import myIndex  from "./index"
+  import SourceDisaster from "./components/InfoDisaster.vue";
+  import InfoBoundary from "./components/InfoBoundary.vue";
+  import InfoAnimation from "./components/InfoAnimation.vue";
+  import InfoVtkmodel from "./components/InfoVtkmodel.vue";
+  import result from "./result.vue";
+  import Vector from "@/assets/img/Vector.png";
+  import { timestampToTime } from "@/js/lindex.js";
+  import mitts from "@/utils/Bus";
+  import { contains } from "@kitware/vtk.js/Common/DataModel/BoundingBox";
+  // import { vtkmodel } from "@/control/vtkModel.js";
+  
+  let lliudialog = ref();
+  let sourcedis = ref();
+  let classradio = ref();
+  let boundary = ref();
+  let tanimation = ref();
+  const title = "灾情推演软件";
+  const activeIndex = ref("1");
+  const activeIndex2 = ref("1");
+  let titlefalse = ref(false);
+  let resultbidui = ref();
+  let mnindex = ref("");
+  let resultleft = ref({});
+  let datares=ref({});
+  let resultright = ref({});
+  let headerobj = ref({
+    time: "",
+    name: "",
+  });
+  let valzaiqing = ref("");
+  let router = useRouter();
+  let sgdata = ref({});
+  let aid = ref();
+  onMounted(() => {});
+  // 跳转页面,{ aid:aid.value}
+  const tiaozhuan = () => {
+    activeIndex.value = "1";
+    handleSelect( activeIndex.value);
+    const key = activeIndex.value;
+    sourcedis.value.changeModel();
+    sourcedis.value.accident3(key);
+    boundary.value.accident4(key);
+    lliudialog.value.accident2(key);
+    tanimation.value.monitor = false;
+    router.push({ path: "/configurator" });
+  
+    // console.log(router.push("/configurator"))
+  
+    // console.log(router.push("/configurator"))
+  };
+  
+  const addselect = () => {
+    classradio.value = lliudialog.value.classradio;
+  };
+  // 获取模拟数据对比
+  const leftsimulation = (res,data) => {
+    if (mnindex.value == "1") {
+      resultleft.value.coids = res.coids;
+      resultleft.value.totaltime = res.totaltime;
+      resultleft.value.reportstep = res.reportstep;
+      resultleft.value.pickertime = res.acctime;
+      resultleft.value.aid = res.aid;
+      resultbidui.value.mntext1=data.name;
+      
+     
+    } else {
+      resultright.value.coids = res.coids;
+      resultright.value.totaltime = res.totaltime;
+      resultright.value.reportstep = res.reportstep;
+      resultright.value.pickertime = res.acctime;
+      resultright.value.aid = res.aid;
+      resultbidui.value.mntext2=data.name;
+    }
+  
+      //TODO 
+      if(resultleft.value.aid==''||resultright.value.aid==''||resultleft.value.aid==undefined||resultright.value.aid==undefined){
+   
+  
+      }else{
+        if (resultleft.value.coids != resultright.value.coids) {
+      ElMessage.error('污染物不一样，无法进行比较')
+      return;
+    }
+  
+    if (resultleft.value.totaltime != resultright.value.totaltime) {
+      ElMessage.error('模拟时长不一样，无法进行比较')
+      return;
+    }
+  
+    if (resultleft.value.reportstep != resultright.value.reportstep) {
+      ElMessage.error('输出步长不一样，无法进行比较')
+      return;
+    }
+  
+    if (resultleft.value.pickertime != resultright.value.pickertime ) {
+      ElMessage.error('事故时间不一样，无法进行比较')
+      return;
+    }
+      
+  //TODO 获取物理量
+  resultbidui.value.timeline=res.acctime;
+  resultbidui.value.oldtime=res.acctime;
+  // resultbidui.value.zdtime=res.acctime;
+  resultbidui.value.endtime= Number(res.totaltime)/Number(res.reportstep);
+  resultbidui.value.initAid(resultleft.value.aid,resultright.value.aid);
+  resultbidui.value.clickflat=true;
+      }
+  
+  
+  };
+  //判断两个对象是否相等
+  const objequality = () => {};
+  const moxingclick = (val) => {
+    titlefalse.value = val;
+  };
+  // const qingsel=()=>{
+  //     lliudialog.value.dialogVisible = true;
+  // }
+  //点击头部弹出弹框
+  
+  const titleclick = (val, index) => {
+    mnindex.value = index;
+    valzaiqing.value = val;
+    if (val == "模拟数据") {
+      lliudialog.value.dialogVisible = true;
+    } else {
+      lliudialog.value.dialogVisible = true;
+      clearInterval();
+    }
+  };
+  //获取aid
+  const aidlist = () => {
+    sgdata.value = lliudialog.value.sgdata;
+    aid.value = sgdata.value.aid;
+  };
+  // 获取子组件的方法
+  const childfun = () => {
+  
+    if(classradio.value=='Gass'){
+      sourcedis.value.Gassgetdata(aid.value);
+    }else{
+      sourcedis.value.handledisaster(aid.value);
+    }
+    boundary.value.addboundary(aid.value);
+    sourcedis.value.accident3();
+  };
+  const headerclick = (data) => {
+    console.log(data);
+    headerobj.value.name = data.name;
+    headerobj.value.time = data.time;
+    aid.value = data.aid;
+  };
+  const handleSelect = (key) => {
+    activeIndex.value = "";
+    switch (key) {
+      case "1":
+        sourcedis.value.changeModel();
+        sourcedis.value.accident3(key);
+        boundary.value.accident4(key);
+        lliudialog.value.accident2(key);
+        tanimation.value.monitor = false;
+        resultbidui.value.accident6(key, aid.value);
+        tanimation.value.accident5(aid.value, key);
+        activeIndex.value = "1";
+        break;
+      case "2":
+        boundary.value.changeModel();
+        boundary.value.accident4(key);
+        sourcedis.value.accident3(key);
+        lliudialog.value.accident2(key);
+        tanimation.value.monitor = false;
+        resultbidui.value.accident6(key, aid.value);
+        tanimation.value.accident5(aid.value, key);
+        activeIndex.value = "2";
+        break;
+      case "3":
+        lliudialog.value.changeModel();
+        boundary.value.accident4(key);
+        sourcedis.value.accident3(key);
+        lliudialog.value.accident2(key);
+        tanimation.value.monitor = false;
+        activeIndex.value = "3";
+        tanimation.value.accident5(aid.value, key);
+        resultbidui.value.accident6(key, aid.value);
+  
+        break;
+      case "4":
+        boundary.value.accident4(key);
+        tanimation.value.accident5(aid.value, key);
+        sourcedis.value.accident3(key);
+        lliudialog.value.accident2(key);
+        resultbidui.value.accident6(key, aid.value);
+        activeIndex.value = "4";
+        break;
+      case "5":
+        sourcedis.value.changeModel();
+        sourcedis.value.accident3(key);
+        boundary.value.accident4(key);
+        lliudialog.value.accident2(key);
+        resultbidui.value.accident6(key, aid.value);
+        tanimation.value.accident5(aid.value, key);
+        tanimation.value.monitor = false;
+        activeIndex.value = "5";
+      default:
+        break;
+    }
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .appmian {
+    .el-main {
+      --el-main-padding: 0 !important;
+    }
+  
+    .el-header {
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      position: absolute;
+      z-index: 206;
+      top: 0;
+    }
+  }
+  
+  .ve_menu_logo {
+    width: 100%;
+    height: 70px;
+    background: #0d1639;
+    white-space: nowrap;
+    text-align: left;
+    overflow: hidden;
+    display: flex;
+    background: #0d1639;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+    border-bottom: 1px solid;
+    box-sizing: border-box;
+    border-image: linear-gradient(28deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0)) 1 1;
+  
+    .ve_title {
+    }
+  
+    .ve_logo_img {
+      padding-left: 30px;
+      height: 100%;
+      display: inline-block;
+      box-sizing: border-box;
+      vertical-align: middle;
+      padding: 15px;
+    }
+  
+    .ve_logo_title {
+      width: 160px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-block;
+      margin: 0;
+      vertical-align: middle;
+      color: #68adff;
+      font-size: 20px;
+    }
+  
+    .el-menu-demo {
+      width: 60% !important;
+      height: 70px;
+      border: none !important;
+      background: rgba(12, 97, 197, 0);
+  
+      .el-menu-item {
+        position: relative;
+        width: 97px;
+        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+        font-weight: bold;
+        font-size: 13px;
+        color: #68adff;
+        line-height: 15px;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+        width: 110px;
+        height: 70px;
+        border-radius: 0px 0px 0px 0px;
+        border: none;
+      }
+  
+      .is-active {
+        width: 110px;
+        height: 70px;
+        background: radial-gradient(ellipse at 54px 0px, #3aa0ff -37%, #123066 53%);
+        border-radius: 0px 0px 0px 0px;
+        border: 1px solid;
+        border-left: 1px solid rgba(16, 92, 240, 1);
+        border-right: 1px solid rgba(18, 48, 102, 1);
+        border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1
+          1;
+  
+        &:after {
+          width: 24px;
+          height: 1px;
+          background-color: #fff;
+          -webkit-transition: all ease-out 0.2s;
+          transition: all ease-out 0.2s;
+          content: "";
+          position: absolute;
+          left: 50%;
+          bottom: 15px;
+          webkit-transform: translate(-50%, 0%);
+          -moz-transform: translate(-50%, 0%);
+          transform: translate(-50%, 0%);
+        }
+      }
+    }
+  
+    .ve_right {
+      // width: 350px;
+      height: 70px;
+      overflow: hidden;
+      position: absolute;
+      right: 0;
+      display: flex;
+  
+      .ve_time {
+        width: 190px;
+        height: 55px;
+        padding-top: 15px;
+        height: 70px;
+        overflow: hidden;
+        border-radius: 0px 0px 0px 0px;
+        border-left: 2px solid rgba(12, 97, 197, 0.2);
+        border-right: 2px solid rgba(12, 97, 197, 0.2);
+        box-sizing: border-box;
+        padding: 15px 5px;
+        // border-image: linear-gradient(347deg, rgba(31, 107, 255, 1), rgba(164, 195, 255, 1)) 1 1;
+        span {
+          display: block;
+          font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+          color: #ffffff;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+        }
+  
+        .l_huoqing {
+          font-size: 13px;
+          line-height: 15px;
+          font-weight: bold;
+          line-height: 2;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+  
+        .l_time {
+          font-size: 12px;
+          line-height: 14px;
+          font-weight: 400;
+        }
+      }
+  
+      .ve_timeioc {
+        width: 150px;
+        height: 70px;
+        // border-radius: 0px 0px 0px 0px;
+        // border: 1px solid;
+        // border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;
+        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+        font-weight: bold;
+        font-size: 13px;
+        color: #68adff;
+        line-height: 15px;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+  
+        span {
+          padding-left: 15px;
+        }
+      }
+    }
+  }
+  </style>
+  
+  <style>
+  body {
+    width: 100%;
+    height: 100vh;
+    background: #161a2a;
+  }
+  
+  button:focus,
+  button:focus-visible {
+    outline: none;
+  }
+  
+  .l_Dialog {
+    /* position: absolute; */
+    z-index: 206;
+    top: 0;
+  }
+  </style>
+