4.7

src/main.js

@@ -10,7 +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 '@/utils/flexible'
 
 // import mitt from 'mitt'
 

src/router/index.js

@@ -25,12 +25,21 @@ const router = createRouter({
         {
             path: '/',
             name:'首页',
-            component: () => import('@/view/appmian.vue'),
+            component: () => import('@/view/home.vue'),
             meta:{
                 keepAlive:true, // 需要缓存
                 title: '首页'
             }
         },
+        {
+          path: '/appmian',
+          name:'主页',
+          component: () => import('@/view/appmian.vue'),
+          meta:{
+              keepAlive:true, // 需要缓存
+              title: '主页'
+          }
+      },
 
 {
     path: '/goods',

src/style/style.css

@@ -1,3 +1,6 @@
+.fontcolor{
+color: #fff;
+}
 .jc_padding {
     padding: 18px 10px;
   }
@@ -1084,4 +1087,158 @@ ol {
 .classtab .jc_padding .el-table {
   height: 30px !important;
 
+}
+.footer{
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+}
+.footet-bottom{
+
+}
+.footet-bottom ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.footet-bottom ul li{
+width: 0.6878rem;
+font-size: 0.1563rem;
+text-align: center;
+}
+.first-left{
+  width: 1.7188rem;
+  position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 206;
+}
+.tilteh1{
+  height: 0.1356rem;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 0.1042rem;
+  color: #FFFFFF;
+  line-height: 0.1198;
+  letter-spacing: 1px;
+  text-align: center;
+  font-style: normal;
+  text-transform: none;
+  margin-top: 51px;
+
+}
+.bgk1{
+  /* width: 100%;
+  background-image: url(../assets/img/Group1342.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center; */
+  height: 65px;
+  background-image: url(../assets/img/Group1342.png);
+  background-size: cover;
+  background-position: 50% 70%;
+  position: relative;
+  margin-bottom: 4px;
+}
+.title_wrap .title .title-text {
+  font-size: 0.125rem;
+   font-weight: 900;
+   letter-spacing: 6px;
+   color:#fff;
+   line-height:53px;
+   white-space: nowrap;
+
+}
+.timers{
+  position: absolute;
+    left:20px;
+    top:26px;
+    font-size: .0729rem;
+    display: flex;
+    align-items: center;
+
+}
+.ve_logo_img{
+  margin-right: 10px;
+}
+.s-content{
+  width: 390px;
+  justify-content: center;
+    display: flex;
+}
+.tiletimg{
+  display: flex;
+  padding: 0px 22px;
+}
+.titleanniu{
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  overflow: hidden;
+  height: 0.1458rem;
+  background-position: center;
+}
+.bgk1 .imgtupian{
+  width: 0.6094rem;
+
+  background-image: url(/src/assets/img/Rectangle456.png);
+}
+.bgk1 .imgtupian2{
+  width: .6823rem;
+  background-image: url(/src/assets/img/Rectangle1456.png);
+}
+
+.titlebtn{
+  margin-left: 20px;
+font-size: .0833rem;
+  margin-top:20px;
+  line-height: 0.13578rem;
+  font-weight: bold;
+}
+.el-main .bgk2{
+  /* max-width: 1153px; */
+  margin: 0 auto;
+  background-image: url(../assets/img/Group1317.png);
+  background-size: cover;
+  background-position:center;
+  position: relative;
+  margin-bottom: 4px;
+  height: calc(100vh - 64px);
+  border-radius: 0px 0px 0px 0px;
+
+}
+.el-main {
+  background: radial-gradient(closest-side, #0B338B , #1C253D);
+}
+.el-header{
+  background: radial-gradient(closest-side, #0B338B , #1C253D);
+}
+.bgk2 ul li{
+  width: 25%;
+  text-align: center;
+  position: absolute;
+}
+.bgk2 ul .s1{
+  top: 34%;
+  left: 8%;
+}
+.bgk2 ul .s4{
+  top:34%;
+  right: 8%;
+}
+.bgk2 ul .s2{
+  top:50%;
+  left: 26%;
+}
+.bgk2 ul .s3{
+  top: 50%;
+  right:26%;
+}
+.bgk2 .stext{
+  display: inline-block;
+  width: 100%;
+  color: #fff;
+  text-align: center;
+  font-size: .1042rem;
+  font-weight: bold;
 }

src/utils/flexible.js

@@ -1,137 +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);
+  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));
       }
-    } 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 (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;
-        }
+  }
+ 
+  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 {
-        // 其他设备下，仍旧使用1倍的方案
         dpr = 1;
       }
-      scale = 1 / dpr;
+    } else {
+      // 其他设备下，仍旧使用1倍的方案
+      dpr = 1;
     }
-   
-    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);
-      }
+    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;
+  }
+ 
+  function refreshRem() {
+    var width = docEl.getBoundingClientRect().width;
+    if (width / dpr > 1920) {
+      // 这个位置划重点 1920是设计稿的大小 如果你的设计稿是750 那么就需要将1920替换成750
+      width = (docEl.clientWidth / 1920) * 1920;
     }
-   
-    win.addEventListener(
-      "resize",
-      function () {
+    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
     );
-    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";
     }
-   
-    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"] = {}));
+    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

@@ -449,6 +449,7 @@ let idobj = ref({
     name: "",
     time: ""
 })
+let router = useRouter();
 const value1 = ref('')
 let loading = ref(true)
 let aid = ref();
@@ -587,6 +588,7 @@ const accident = () => {
     if (idobj.value.name == '') {
         ElMessage.error('请选择项目')
     } else {
+        router.push({ path: "/appmian" });
         if(props.valzaiqing=='模拟数据'){
         const params = {
             transCode: 'D10017',
@@ -621,6 +623,7 @@ const accident = () => {
             })
 
         }else{
+
            initWebSocket();
           rizhi.value.logs='';
           newlog.value ='';

src/view/appmian.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="appmian"  >
+    <!-- <v-scale-screen width="1920" height="1080" style="margin: 0;"> -->
+
     <el-container>
+  
       <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" @click="handleSelect('1')">突水推演</div>
-            <div class="titlebtn" @click="handleSelect('2')" style="margin-right: 20px;">火灾推演</div>
-          <div class="d-flex jc-center">
+          <div class="titlebtn titleanniu imgtupian" >突水推演</div>
+            <div class="titlebtn titleanniu imgtupian" style="margin-right: 20px;">火灾推演</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>
@@ -19,8 +22,8 @@
             </div>
           </div>
           
-          <div class="titlebtn" @click="handleSelect('3')">瓦斯爆炸推演</div>
-            <div class="titlebtn" @click="handleSelect('4')">模型库</div>
+          <div class="titlebtn titleanniu imgtupian2" >瓦斯爆炸推演</div>
+            <div class="titlebtn titleanniu imgtupian2" >模型库</div>
         </div>
         <!-- <div class="ve_menu_logo">
           <div class="ve_title">
@@ -67,16 +70,39 @@
             </div>
          
         </div>  -->
-
+      </div>
       </el-header>
- 
+  
       <el-main>
-        <div class="main-conyeny">
-       
+        <div class="bgk2">
+          <h1 class="tilteh1">请添加一项灾害预演事件</h1>
+          <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>
+        <!-- <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"
@@ -93,22 +119,31 @@
         <result ref="resultbidui" @titleclick="titleclick"  :classradio="classradio"></result>
         <MenuMine ref="menumine"/>
         <MenuSensor ref="menusen"/>
-      </div>
-      </el-main>
+        <!-- right -->
+        <!-- <firstLeft/> -->
+      <!-- </div> -->
+   
   
+      </el-main>
+  <div class="footer">
+    <Index/>
+  </div>
     </el-container>
+  <!-- </v-scale-screen> -->
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted, reactive, nextTick } from "vue";
 import { RouterView, RouterLink, useRouter } 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";
@@ -116,7 +151,13 @@ 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";
@@ -327,16 +368,7 @@ 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;
@@ -377,7 +409,7 @@ const handleSelect = (key) => {
 
   .ve_logo_img {
     padding-left: 30px;
-    height: 100%;
+    padding-right: 30px;
     display: inline-block;
     box-sizing: border-box;
     vertical-align: middle;
@@ -521,27 +553,6 @@ const handleSelect = (key) => {
 
 <style>
  @import '../../src/style/style.css';
-.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;

src/view/components/InfoAnimation.vue

@@ -1496,10 +1496,6 @@ defineExpose({ monitor, accident5 });
   text-transform: none;
 }
 
-.jc_padding .el-table tr {
-  height: 40px;
-  background-color: none;
-}
 
 .jc_padding .el-table .cell {
   font-weight: 400;

src/view/home.vue

@@ -1,101 +1,89 @@
 <template>
-    <div class="appmian">
+    <div class="appmian"  >
+      <!-- <v-scale-screen width="1920" height="1080" style="margin: 0;"> -->
+  
       <el-container>
+    
         <el-header>
-          <div class="ve_menu_logo">
-            <div class="ve_title">
+          <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>
-              <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>
+            
+                <span class="title-text">矿道灾情软件推演</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 class="titlebtn titleanniu imgtupian2" @click="handleSelect('3')">瓦斯爆炸推演</div>
+              <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('4')">模型库</div>
           </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>
+          <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>
+       <Dialoges  ref="lliudialog" 
+          :addselect="addselect" :classradio="classradio" 
+        ></Dialoges>
+    </el-main>
       </el-container>
+    <!-- </v-scale-screen> -->
     </div>
   </template>
   
   <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 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";
+  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";
+
+ 
   
   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");
@@ -105,6 +93,15 @@
   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,91 +110,22 @@
   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 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 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 objequality = () => {};
-  const moxingclick = (val) => {
-    titlefalse.value = val;
-  };
-  // const qingsel=()=>{
-  //     lliudialog.value.dialogVisible = true;
-  // }
+      
+const addselect = () => {
+  classradio.value = lliudialog.value.classradio;
+};
   //点击头部弹出弹框
   
   const titleclick = (val, index) => {
@@ -210,79 +138,27 @@
       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 = "";
+  
+    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);
         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);
         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";
+      lliudialog.value.classclick( classradio.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";
+      classradio.value="Model";
         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 +166,18 @@
   </script>
   
   <style lang="scss" scoped>
+  
+  .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%;
@@ -325,7 +207,7 @@
   
     .ve_logo_img {
       padding-left: 30px;
-      height: 100%;
+      padding-right: 30px;
       display: inline-block;
       box-sizing: border-box;
       vertical-align: middle;
@@ -444,9 +326,6 @@
       .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;
@@ -468,6 +347,7 @@
   </style>
   
   <style>
+   @import '../../src/style/style.css';
   body {
     width: 100%;
     height: 100vh;
@@ -480,9 +360,16 @@
   }
   
   .l_Dialog {
-    /* position: absolute; */
-    z-index: 206;
-    top: 0;
+    position: relative;
+  }
+  .main-conyeny{
+      position: absolute;
+      z-index: 206;
+    top: 70px;
+  }
+  .L_aside {
+    margin-top: 10px;
+      overflow: hidden;
   }
   </style>
   

src/view/home1.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>
+  

src/view/index/first-left.vue

@@ -0,0 +1,58 @@
+<template>
+    <!-- 底部导航栏 -->
+    <div class="first-left"> 
+        <div
+      class="demo-collapse jiancedian asideg1 jc_header collapseeion jianstyle"
+      v-show="firstshow"
+    >
+      <el-collapse accordion v-model="activeNamesf">
+        <el-collapse-item name="1">
+          <template #title>
+            <div class="he_pading color1">
+              <!-- <el-form-item label="物理量:">
+                <el-select
+                  v-model="formInline.region"
+                  @change="regionchange($event)"
+                  placeholder="请选择"
+                >
+                  <el-option
+                    v-for="item in strResultFormatlist"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.value"
+                  ></el-option>
+                </el-select>
+              </el-form-item> -->
+            
+            </div>
+          </template>
+          <div class="jc_content tablecolor">
+            <div class="jc_padding">
+             
+          
+            </div>
+            <div class="jc_header color1">
+              <span class="jc_tile">信息展示</span>
+            </div>
+          
+          </div>
+          <!-- <div class="mgsnoe" style="height: 200px"></div> -->
+        </el-collapse-item>
+      </el-collapse>
+    </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/index/index.vue

@@ -0,0 +1,23 @@
+<template>
+    <!-- 底部导航栏 -->
+    <div class="footet-bottom"> 
+        <ul>
+            <li class="fontcolor">灾情推演</li>
+            <li class="fontcolor">路径判断</li>
+            <li class="fontcolor">灾害对比</li>
+        </ul>
+    </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'
+
+     defineExpose({});
+   </script>
+   <style  lang="scss" scoped>
+
+
+   </style>