4.8

src/router/index.js

@@ -27,18 +27,35 @@ const router = createRouter({
             name:'首页',
             component: () => import('@/view/home.vue'),
             meta:{
-                keepAlive:true, // 需要缓存
+                keepAlive:false, // 需要缓存
                 title: '首页'
             }
         },
+        {
+          path: '/myHome',
+          name:'首页1',
+          component: () => import('@/view/myHome.vue'),
+          meta:{
+              keepAlive:false, // 需要缓存
+              title: '首页1'
+          }
+      },
         {
           path: '/appmian',
           name:'主页',
           component: () => import('@/view/appmian.vue'),
           meta:{
-              keepAlive:true, // 需要缓存
+              keepAlive:false, // 需要缓存
               title: '主页'
-          }
+          },
+          children: [
+            // 这里可以定义子路由，它们将在Home组件的<RouterView>内渲染
+            {
+              path: '/myHome',
+              name:"myhome",
+              component: () => import('@/view/myHome.vue')
+            }
+          ]
       },
 
 {

src/style/style.css

@@ -13,7 +13,7 @@ color: #fff;
   .L_aside .iconimg {
     width: 37px;
     height: 36px;
-    margin: 0 7px 0 24px;
+    /* margin: 0 7px 0 24px; */
   }
   .L_aside .Frame2 {
     background-image: url(../assets/img/Frame2.png);
@@ -533,7 +533,7 @@ color: #fff;
 }
 
 .leftbgimg .el-collapse-item__header {
-    background-image: url(../assets/img/Group10.png) !important;
+    background-image: url(../assets/img/Group1386.png) !important;
 }
 
 .asideg1 .jc_header {
@@ -575,9 +575,6 @@ color: #fff;
     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;
@@ -601,13 +598,11 @@ color: #fff;
 }
 
 .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;
+  background: rgba(26,38,69,0.4);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid;
+  border-image: linear-gradient(237deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;background: rgba(26,38,69,0.4);
 }
-
 #textarea_id {
     color: #fff;
     font-size: 12px;
@@ -768,7 +763,7 @@ color: #fff;
 
 .jc_padding .el-table .cell {
     font-weight: 400;
-    font-size: 13px;
+    font-size: 0.0625rem;
     color: #FFFFFF;
     line-height: 14px;
     text-align: left;
@@ -798,7 +793,18 @@ color: #fff;
 .ddd_div .el-input__inner {
     color: #fff;
 }
-
+.el-button>span{
+  color: #fff;
+}
+.el-button--success{
+  --el-button-bg-color:rgba(0,0,0,0);
+  border: none;
+}
+.el-button:focus, .el-button:hover{
+  background: rgba(104, 173, 255, 0) !important;
+  color: rgba(255, 255, 25, 1) !important;
+  border: none;
+}
 .pagination {
     margin-top: 30px;
     display: flex;
@@ -886,9 +892,9 @@ ol {
     padding: 0 19px;
 }
 .leftbgimg1 .el-collapse-item__header {
-    background-image: url(../../src/assets/img//Group10.png)!important;
-    background-size: cover;
-    background-position-x: center!important;
+    background-image: url(../../src/assets/img//Group1386.png)!important;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
 }
 .leftbgimg2 .el-collapse-item__header {
     background-image: url(../../src/assets/img/b1.png) !important;
@@ -896,13 +902,13 @@ ol {
     background-position-x: center !important;
 }
 .asideg .el-collapse-item__header {
-    height: 50px !important;
+    height: 30px !important;
     width: 100%;
     color: #fff;
     background-position: left;
     border: none !important;
     font-weight: bold;
-    font-size: 15px;
+    font-size: 0.07293rem;
     color: #ffffff;
     line-height: 18px;
     text-align: left;
@@ -946,7 +952,7 @@ ol {
   color: #fff;
 }
 .leftbgimg0 .el-collapse-item__header {
-  background-image: url(../../src/assets/img/b1.png)!important;
+  background-image: url(/src/assets/img/Group1386.png)!important;
   background-size: cover;
   background-position-x: center!important;
 }
@@ -1093,18 +1099,69 @@ ol {
   position: fixed;
   bottom: 0;
 }
-.footet-bottom{
-
+.footet-bottom {
+  height: 52px;
+  background-image: url(/src/assets/img/Line28.png);
+  background-position: bottom;
+  background-repeat: no-repeat;
+  /* background-size: cover; */
+  margin-bottom: 15px;
+  position: relative;
+  background: radial-gradient(#1C253D 100%);
 }
 .footet-bottom ul {
   display: flex;
-  justify-content: center;
+justify-content: center; 
+justify-content: space-between;
   align-items: center;
+  width: 415px;
+  margin: 0 auto;
+
+}
+.leftline{
+  width: 413px;
+  height: 15px;
+  position: absolute;
+  left: 10px;
+  background-image: url(/src/assets/img/Line29.png);
+  bottom: -13px;
+}
+.rightline{
+  width: 413px;
+  height: 15px;
+  position: absolute;
+  right: 13px;
+  bottom: -13px;
+    background-image: url(/src/assets/img/Line30.png);
+}
+.btnactive{
+background: linear-gradient(to bottom, rgba(11,51,142,0.1) 15%, rgba(17,56,143 ,0.2) 40%,rgba(0,224,225 ,1)) !important;
+border-radius: 0px 0px 0px 0px !important;
+opacity: 1 !important;
 }
 .footet-bottom ul li{
-width: 0.6878rem;
-font-size: 0.1563rem;
+
+width: 130px;
+text-align: center;
+font-weight: 400;
+font-size: 0.0833rem;
+color: #FFFFFF;
+line-height: 19px;
+letter-spacing: 1px;
 text-align: center;
+font-style: normal;
+text-transform: none;
+background: linear-gradient( 139deg, #11388F 100%, rgba(55,103,209,0) 0%);
+border-radius: 0px 0px 0px 0px;
+opacity: 0.4;
+
+
+}
+ .el-image{
+  vertical-align: middle;
+}
+.footet-bottom ul li .el-image {
+  margin-right: 10px;
 }
 .first-left{
   width: 1.7188rem;
@@ -1205,9 +1262,11 @@ font-size: .0833rem;
   margin-bottom: 4px;
   height: calc(100vh - 64px);
   border-radius: 0px 0px 0px 0px;
-
+    /* position: fixed;
+    z-index: 10000;
+    width: 100%; */
 }
-.el-main {
+.apphome .el-main {
   background: radial-gradient(closest-side, #0B338B , #1C253D);
 }
 .el-header{
@@ -1241,4 +1300,12 @@ font-size: .0833rem;
   text-align: center;
   font-size: .1042rem;
   font-weight: bold;
+}
+.header_l .closeimg {
+  position: absolute;
+  top:0;
+  right: 0;
+}
+.header_l {
+  position: relative;
 }

src/view/InfoDialoges.vue

@@ -229,7 +229,7 @@
         </div>
         <!-- 突水 -->
         <div class="common-layout" style="margin: 0;" v-show="leftcoll.collwater">
-            <el-aside width="278px" class="L_aside L_aside1 asideg asidegbg  leftbgimg">
+            <el-aside width="320px" class="L_aside L_aside1 asideg asidegbg  leftbgimg1">
                 <div class="demo-collapse">
                     <el-collapse v-model="coolactiveName" accordion>
                         <el-collapse-item name="1">
@@ -290,7 +290,7 @@
                                         <div class="btn"><span class="spantext" @click="calculate();">开始计算</span></div>
                                     </div>
 
-                                    <div class=" logs">
+                                    <div class=" logs" v-show="false">
                                         <div class="logs_pading">
                                             <h4>模拟日志</h4>
                                             <div class="footerTextBox">
@@ -588,7 +588,7 @@ const accident = () => {
     if (idobj.value.name == '') {
         ElMessage.error('请选择项目')
     } else {
-        router.push({ path: "/appmian" });
+        // router.push({ path: "/appmian" });
         if(props.valzaiqing=='模拟数据'){
         const params = {
             transCode: 'D10017',
@@ -623,8 +623,10 @@ const accident = () => {
             })
 
         }else{
-
-           initWebSocket();
+           
+       
+        
+               initWebSocket();
           rizhi.value.logs='';
           newlog.value ='';
         emit('headerclick', sgdata.value);
@@ -634,6 +636,7 @@ const accident = () => {
         // emit('handleSelect', '1');
           fetchFileContent();
           accident2(props.activeIndex)
+     
     }
     dialog.value.dialogVisible_fire = false;
     }
@@ -642,7 +645,6 @@ const accident = () => {
 }
 const accident2 = (key) => {
     console.log(key);
-    
     if (key == '1'||key == '2'||key == '3') {
         console.log(classradio.value);
         if (classradio.value== "Fire") {
@@ -650,6 +652,7 @@ const accident2 = (key) => {
             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;
@@ -801,7 +804,6 @@ const rewu=()=>{
             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]);

src/view/appmian.vue

@@ -7,11 +7,14 @@
       <el-header>
         <div class="bgk1">
         <div class="d-flex jc-center title_wrap">
+       
           <div class="timers">
-            {{  headertime.dateYear }} {{  headertime.dateWeek }} {{  headertime.dateDay }}
+            <span>{{ headerobj.name }}</span>
+            {{  headertime.dateYear }} {{  headertime.dateDay }}
           </div>
-          <div class="titlebtn titleanniu imgtupian" >突水推演</div>
-            <div class="titlebtn titleanniu imgtupian" style="margin-right: 20px;">火灾推演</div>
+          <!-- <RouterLink :to="{path:'/myHome'}">跳转到目标页</RouterLink> -->
+          <div class="titlebtn titleanniu imgtupian" @click="handleSelect('1')" >突水推演</div>
+            <div class="titlebtn titleanniu imgtupian" style="margin-right: 20px;" @click="handleSelect('2')">火灾推演</div>
           <div class="d-flex jc-center s-content">
             <div class="title tiletimg">
             <div class="ve_logo_img">
@@ -22,60 +25,14 @@
             </div>
           </div>
           
-          <div class="titlebtn titleanniu imgtupian2" >瓦斯爆炸推演</div>
-            <div class="titlebtn titleanniu imgtupian2" >模型库</div>
+          <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('3')" >瓦斯爆炸推演</div>
+            <div class="titlebtn titleanniu imgtupian2" @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>
-            </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>
-         
-        </div>  -->
       </div>
       </el-header>
-  
+    
       <el-main>
-        <div class="bgk2">
-          <h1 class="tilteh1">请添加一项灾害预演事件</h1>
+        <div class="bgk2" v-show="bgk2false">
           <div>
             <ul>
               <li class="s1" @click="handleSelect('2')" >
@@ -97,12 +54,13 @@
             </ul>
           </div>
         </div>
+        <!-- <RouterView name="myhome"></RouterView> -->
         <!-- <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" /> -->
+        <InfoVtkmodel ref="vtkmodel" />
         <Dialoges
           ref="lliudialog"
           :addselect="addselect"
@@ -126,7 +84,7 @@
   
       </el-main>
   <div class="footer">
-    <Index/>
+    <Index ref="indexref"/>
   </div>
     </el-container>
   <!-- </v-scale-screen> -->
@@ -171,6 +129,7 @@ let boundary = ref();
 let tanimation = ref();
 let menumine=ref();
 let menusen=ref();
+let indexref=ref();
 const title = "灾情推演软件";
 const activeIndex = ref("1");
 const activeIndex2 = ref("1");
@@ -188,7 +147,7 @@ let headertime=ref({
       dateWeek: null,
       weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
 })
-      
+ let bgk2false=ref(true)     
 let headerobj = ref({
   time: "",
   name: "",
@@ -201,6 +160,10 @@ onMounted(() => {
   timeFn()
 });
 // 跳转页面,{ aid:aid.value}
+const  handleSelectzt=(val)=>{
+  router.push({ path: "/" ,query:{classradio:val}});
+
+}
 // 当前时间
 const timeFn=()=> {
   headertime.value.timing = setInterval(() => {
@@ -289,7 +252,9 @@ const moxingclick = (val) => {
 //     lliudialog.value.dialogVisible = true;
 // }
 //点击头部弹出弹框
+const bgkchange= ()=>{
 
+}
 const titleclick = (val, index) => {
   mnindex.value = index;
   valzaiqing.value = val;
@@ -307,7 +272,8 @@ const aidlist = () => {
 };
 // 获取子组件的方法
 const childfun = () => {
-
+  bgk2false.value=false;
+  indexref.value.btnlistshow=true;
   if(classradio.value=='Gass'){
     sourcedis.value.Gassgetdata(aid.value);
   }else{
@@ -329,7 +295,12 @@ const handindodialoges=()=>{
 }
 
 const handleSelect = (key) => {
-
+  bgk2false.value=true;
+  indexref.value.btnlistshow=false;
+  if( bgk2false.value==true){
+    activeIndex.value='11'
+  }
+ 
   activeIndex.value =key;
   switch (key) {
     case "1":
@@ -377,6 +348,9 @@ const handleSelect = (key) => {
 .appmian {
   .el-main {
     --el-main-padding: 0 !important;
+    position: absolute;
+    top: 60px;
+    left: 0;
   }
 
   .el-container {

src/view/components/InfoBoundary.vue

@@ -91,8 +91,8 @@
     <!-- 突水 -->
     <div class="common-layout" style="margin: 0" >
       <el-aside
-        width="231px"
-        class="L_aside L_aside1 asideg asidegbg leftbgimg0"
+        width="320px"
+        class="L_aside L_aside1 asideg asidegbg leftbgimg1"
         v-show="boun.collwater"
       > 
        <div class="demo-collapse"> 

src/view/components/InfoDisaster.vue

@@ -127,7 +127,7 @@
     </div>
     <!-- 突水 -->
     <div class="common-layout collapseaside" style="margin: 0" v-show="sour.collwater">
-      <el-aside width="354px" class="L_aside L_aside1 asideg asidegbg leftbgimg1">
+      <el-aside width="320px" class="L_aside L_aside1 asideg asidegbg leftbgimg1">
         <div class="demo-collapse">
           <!-- 突水 sour.collwater-->
           <el-collapse v-model="coolactiveName1" accordion>
@@ -1178,16 +1178,21 @@ const tableDatay = ref([]);
 const tableData4 = ref([]);
 
 const accident3 = (key) => {
-  
+  console.log(key);
   if (key == "1"||key == "2"||key == "3") {
+    console.log(props.classradio )
     if (props.classradio == "Fire") {
       sour.value.collfire = true;
       sour.value.collwater = false;
       sour.value.Gass = false;
     } else if (props.classradio == "Water") {
+     
       sour.value.collwater = true;
       sour.value.collfire = false;
       sour.value.Gass = false;
+      console.log(sour.value.collwater );
+      console.log(222333)
+   
     }else if(props.classradio == "Gass"){
       sour.value.collwater = false;
       sour.value.collfire = false;

src/view/header.vue

@@ -0,0 +1,20 @@
+<template>
+    <!-- 头部导航栏 -->
+<div>
+    
+</div>
+     </template>
+   <script setup>
+import { ref, onMounted, reactive, } from "vue";
+import {RouterView,RouterLink } from "vue-router"
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+let firstshow=ref(true);
+let activeNamesf=ref(["1", "2"]);
+
+     defineExpose({});
+   </script>
+   <style  lang="scss" scoped>
+
+
+   </style>

src/view/home.vue

@@ -1,375 +1,537 @@
 <template>
-    <div class="appmian"  >
-      <!-- <v-scale-screen width="1920" height="1080" style="margin: 0;"> -->
+  <div class="apphome"  >
+    <!-- <v-scale-screen width="1920" height="1080" style="margin: 0;"> -->
+
+    <el-container>
   
-      <el-container>
-    
-        <el-header>
-          <div class="bgk1">
-          <div class="d-flex jc-center title_wrap">
-            <div class="timers">
-              {{  headertime.dateYear }} {{  headertime.dateWeek }} {{  headertime.dateDay }}
+      <el-header>
+        <div class="bgk1">
+        <div class="d-flex jc-center title_wrap">
+          <div class="timers">
+            {{  headertime.dateYear }} {{  headertime.dateWeek }} {{  headertime.dateDay }}
+          </div>
+          <div class="titlebtn titleanniu imgtupian" @click="handleSelect('1')">突水推演</div>
+            <div class="titlebtn titleanniu imgtupian" style="margin-right: 20px;" @click="handleSelect('2')">火灾推演</div>
+          <div class="d-flex jc-center s-content">
+            <div class="title tiletimg">
+            <div class="ve_logo_img">
+              <el-image style="height: 100%" :src="logo" fit="contain"></el-image>
             </div>
-            <div class="titlebtn titleanniu imgtupian" @click="handleSelect('1')" >突水推演</div>
-              <div class="titlebtn titleanniu imgtupian" style="margin-right: 20px;" @click="handleSelect('2')">火灾推演</div>
-            <div class="d-flex jc-center s-content">
-              <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>
+          
+              <span class="title-text">矿道灾情软件推演</span>
             </div>
-            
-            <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('3')">瓦斯爆炸推演</div>
-              <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('4')">模型库</div>
           </div>
+          
+          <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('3')" >瓦斯爆炸推演</div>
+            <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('4')"  >模型库</div>
         </div>
-        </el-header>
-    
-        <el-main>
-          <div class="bgk2">
-            <div>
-              <ul>
-                <li class="s1" @click="handleSelect('2')" >
-                  <el-image :src="s1" fit="contain"></el-image>
-                  <span class="stext">火灾推演</span>
-                </li>
-                <li class="s2" @click="handleSelect('1')">
-                  <el-image :src="s2" fit="contain"></el-image>
-                  <span class="stext">突水推演</span>
-                </li>
-                <li class="s3" @click="handleSelect('3')">
-                  <el-image :src="s3" fit="contain"></el-image>
-                  <span class="stext">瓦斯爆炸推演</span>
-                </li>
-                <li  class="s4" @click="handleSelect('4')">   <el-image :src="s4" fit="contain"></el-image>
-                  <span class="stext">模型库</span>
-                </li>
-              </ul>
-            </div>
+      </div>
+      </el-header>
+  
+      <el-main>
+        <div class="bgk2">
+          <div>
+            <ul>
+              <li class="s1" @click="handleSelect('2')" >
+                <el-image :src="s1" fit="contain"></el-image>
+                <span class="stext">火灾推演</span>
+              </li>
+              <li class="s2" @click="handleSelect('1')">
+                <el-image :src="s2" fit="contain"></el-image>
+                <span class="stext">突水推演</span>
+              </li>
+              <li class="s3" @click="handleSelect('3')">
+                <el-image :src="s3" fit="contain"></el-image>
+                <span class="stext">瓦斯爆炸推演</span>
+              </li>
+              <li  class="s4" @click="handleSelect('4')">   <el-image :src="s4" fit="contain"></el-image>
+                <span class="stext">模型库</span>
+
+              </li>
+            </ul>
           </div>
-       <Dialoges  ref="lliudialog" 
-          :addselect="addselect" :classradio="classradio" 
+        </div>
+
+   
+        <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>
-    </el-main>
-      </el-container>
-    <!-- </v-scale-screen> -->
-    </div>
-  </template>
+        <result ref="resultbidui" @titleclick="titleclick"  :classradio="classradio"></result>
+        <MenuMine ref="menumine"/>
+        <MenuSensor ref="menusen"/>
+   
   
-  <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";
-  import { ElMessage, ElButton, ElDialog, ElSelect, formEmits } from 'element-plus'
-  import Vector from "@/assets/img/Vector.png";
-  import s1 from "@/assets/img/s1.png";
-  import s2 from "@/assets/img/s2.png";
-  import s3 from "@/assets/img/s3.png";
-  import s4 from "@/assets/img/s4.png";
-  import b from "@/assets/img/Group1317.png";
-  import { timestampToTime,formatTime } from "@/js/lindex.js";
+      </el-main>
 
- 
-  
-  let lliudialog = ref();
-  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");
-  let titlefalse = ref(false);
-  let resultbidui = ref();
-  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: "",
-  });
-  let valzaiqing = ref("");
-  let router = useRouter();
-  let sgdata = ref({});
-  let aid = ref();
-  onMounted(() => {
-    timeFn()
-  });
-  // 跳转页面,{ aid:aid.value}
-  // 当前时间
-  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);
-      }
+    </el-container>
+  <!-- </v-scale-screen> -->
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, reactive, nextTick } from "vue";
+import { RouterView, RouterLink, useRouter,useRoute} from "vue-router";
+import VScaleScreen from 'v-scale-screen'
+import '@/utils/flexible'
+// 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 Index  from "./index/index.vue"
+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 firstLeft  from "./index/first-left.vue"
+import Vector from "@/assets/img/Vector.png";
+import s1 from "@/assets/img/s1.png";
+import s2 from "@/assets/img/s2.png";
+import s3 from "@/assets/img/s3.png";
+import s4 from "@/assets/img/s4.png";
+import b from "@/assets/img/Group1317.png";
+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();
+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");
+let titlefalse = ref(false);
+let resultbidui = ref();
+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: "",
+});
+let valzaiqing = ref("");
+let router = useRouter();
+let route=useRoute();
+let sgdata = ref({});
+let aid = ref();
+onMounted(() => {
+  timeFn()
+  console.log(route.query )
+  if(route.query.classradio!=undefined){
+    classradio.value=route.query.classradio;
+    handleSelect(route.query.classradio)
+
+  }
+});
+// 跳转页面,{ aid:aid.value}
+
+// 当前时间
+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;
 };
-  //点击头部弹出弹框
-  
-  const titleclick = (val, index) => {
-    mnindex.value = index;
-    valzaiqing.value = val;
-    if (val == "模拟数据") {
-      lliudialog.value.dialogVisible = true;
-    } else {
-      lliudialog.value.dialogVisible = true;
-      clearInterval();
-    }
-  };
-  const handleSelect = (key) => {
-  
-    activeIndex.value =key;
-    switch (key) {
-      case "1":
-      classradio.value="Water";
-      lliudialog.value.classclick( classradio.value);
-        break;
-      case "2":
-      classradio.value="Fire";
-      lliudialog.value.classclick( classradio.value);
-        break;
-      case "3":
-      classradio.value="Gass";
-      lliudialog.value.classclick( classradio.value);
-        break;
-      case "4":
-      classradio.value="Model";
-        break;
-      case "5":
-  
-      default:
-        break;
-    }
-  };
-  </script>
-  
-  <style lang="scss" scoped>
-  
-  .title_wrap{
-    display: flex;
-    justify-content: center;
-      color: #fff;
+// 获取模拟数据对比
+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;
   }
-  .appmian {
-    .el-main {
-      --el-main-padding: 0 !important;
-    }
-  
-    .el-container {
-      padding: 0;
-      margin: 0;
-      width: 100%;
-      position: absolute;
-      z-index: 206;
-      top: 0;
+
+    //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();
   }
-  
-  .ve_menu_logo {
+};
+//获取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(activeIndex.value);
+  boundary.value.accident4(activeIndex.value);
+};
+const headerclick = (data) => {
+  console.log(data);
+  headerobj.value.name = data.name;
+  headerobj.value.time = data.time;
+  aid.value = data.aid;
+};
+//首页组件调用的方法
+const handindodialoges=()=>{
+
+}
+
+const handleSelect = (key) => {
+
+  activeIndex.value =key;
+  switch (key) {
+    case "1":
+    classradio.value="Water";
+    lliudialog.value.classclick( classradio.value);
+    menumine.value.dialogVisible=false;
+    menusen.value.sendialogVisible=false;
+    
+      break;
+    case "2":
+    classradio.value="Fire";
+    lliudialog.value.classclick( classradio.value);
+    menumine.value.dialogVisible=false;
+    menusen.value.sendialogVisible=false;
+      break;
+    case "3":
+    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);
+      sourcedis.value.accident3(key);
+      lliudialog.value.accident2(key);
+      break;
+    case "5":
+
+    default:
+      break;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+.title_wrap{
+  display: flex;
+  justify-content: center;
+    color: #fff;
+}
+.apphome {
+  .el-main {
+    --el-main-padding: 0 !important;
+  }
+
+  .el-container {
+    padding: 0;
+    margin: 0;
     width: 100%;
-    height: 70px;
-    background: #0d1639;
+    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;
+    padding-right: 30px;
+    display: inline-block;
+    box-sizing: border-box;
+    vertical-align: middle;
+    padding: 15px;
+  }
+
+  .ve_logo_title {
+    width: 160px;
     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;
-      padding-right: 30px;
-      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;
+    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;
-      font-size: 20px;
+      line-height: 15px;
+      text-align: center;
+      font-style: normal;
+      text-transform: none;
+      width: 110px;
+      height: 70px;
+      border-radius: 0px 0px 0px 0px;
+      border: none;
     }
-  
-    .el-menu-demo {
-      width: 60% !important;
+
+    .is-active {
+      width: 110px;
       height: 70px;
-      border: none !important;
-      background: rgba(12, 97, 197, 0);
-  
-      .el-menu-item {
-        position: relative;
-        width: 97px;
+      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;
-        font-weight: bold;
-        font-size: 13px;
-        color: #68adff;
-        line-height: 15px;
+        color: #ffffff;
         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%);
-        }
+
+      .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_right {
-      // width: 350px;
+
+    .ve_timeioc {
+      width: 150px;
       height: 70px;
-      overflow: hidden;
-      position: absolute;
-      right: 0;
+      // 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;
-  
-      .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;
-        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;
-        }
+      justify-content: center;
+      align-items: center;
+
+      span {
+        padding-left: 15px;
       }
     }
   }
-  </style>
-  
-  <style>
-   @import '../../src/style/style.css';
-  body {
-    width: 100%;
-    height: 100vh;
-    background: #161a2a;
-  }
-  
-  button:focus,
-  button:focus-visible {
-    outline: none;
-  }
-  
-  .l_Dialog {
-    position: relative;
-  }
-  .main-conyeny{
-      position: absolute;
-      z-index: 206;
-    top: 70px;
-  }
-  .L_aside {
-    margin-top: 10px;
-      overflow: hidden;
-  }
-  </style>
-  
+}
+</style>
+
+<style>
+ @import '../../src/style/style.css';
+body {
+  width: 100%;
+  height: 100vh;
+  background: #161a2a;
+}
+
+button:focus,
+button:focus-visible {
+  outline: none;
+}
+
+.l_Dialog {
+  position: relative;
+}
+.main-conyeny{
+    position: absolute;
+    z-index: 206;
+  top: 70px;
+}
+.L_aside {
+  margin-top: 10px;
+    overflow: hidden;
+}
+</style>

src/view/index/index.vue

@@ -1,10 +1,13 @@
 <template>
     <!-- 底部导航栏 -->
     <div class="footet-bottom"> 
-        <ul>
-            <li class="fontcolor">灾情推演</li>
-            <li class="fontcolor">路径判断</li>
-            <li class="fontcolor">灾害对比</li>
+        <div class="leftline"></div>
+        <div class="rightline"></div>
+        <ul v-show="btnlistshow">
+            <li class="fontcolor  "  v-for="(item, index) in listArray" :key="index" :class="{btnactive: index === currentIndex}"  @click="changeColor(index)"> <el-image :src="item.img" fit="contain"></el-image>{{item.name}}</li>
+            <!-- <li class="fontcolor  btnactive" > <el-image :src="bt1" fit="contain"></el-image>灾情推演</li>
+            <li class="fontcolor"> <el-image  :src="bt2" fit="contain"></el-image>路径判断</li>
+            <li class="fontcolor"> <el-image  :src="bt3" fit="contain"></el-image>灾害对比</li> -->
         </ul>
     </div>
 
@@ -14,8 +17,21 @@ import { ref, onMounted, reactive, } from "vue";
 import {RouterView,RouterLink } from "vue-router"
 import { request, uploadFile } from "@/utils/request";
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
-
-     defineExpose({});
+import bt1 from "@/assets/img/bt1.png"
+import bt2 from "@/assets/img/bt2.png"
+import bt3 from "@/assets/img/bt2.png"
+let listArray = ref([
+     { id: 0, name: "灾情推演",img:bt1 },
+     { id: 1, name: "路径判断" ,img:bt2},
+     { id: 2, name: "灾害对比" ,img:bt2},
+   ]);
+let currentIndex=ref(0);
+let btnlistshow=ref(false);
+const changeColor=(index)=>{
+    
+    currentIndex.value = index
+}
+     defineExpose({btnlistshow});
    </script>
    <style  lang="scss" scoped>