4.12

src/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    Header: typeof import('./components/header.vue')['default']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     'HelloWorld——1': typeof import('./components/HelloWorld——1.vue')['default']
     MyHome: typeof import('./components/myHome.vue')['default']

src/components/header.vue

@@ -0,0 +1,77 @@
+<template>
+       <div class="bgk1">
+        <div class="d-flex jc-center title_wrap">
+            <div class="timers">
+            <span>{{props.name }}</span>
+            <div class="headertime">
+              <p class="datayear">{{  headertime.dateYear }}</p>
+              <p class="dateday" >{{  headertime.dateDay }}</p>
+            </div>
+          </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>
+          </div>
+          
+          <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('3')" >瓦斯爆炸推演</div>
+            <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('4')"  >模型库</div>
+        </div>
+      </div>
+     </template>
+   <script setup>
+import { ref, onMounted, reactive, } from "vue";
+import {RouterView,RouterLink } from "vue-router"
+import { request, uploadFile } from "@/utils/request";
+import logo from "@/assets/logo.png";
+import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+import { timestampToTime,formatTime } from "@/js/lindex.js";
+let emit = defineEmits(['handleSelect'])
+const props = defineProps({
+    name:{
+        type:String
+    },
+ 
+
+});
+ defineExpose({});
+ let headerobj = ref({
+  time: "",
+  name: "",
+});
+ let headertime=ref({
+       timing: null,
+      loading: true,
+      dateDay: null,
+      dateYear: null,
+      dateWeek: null,
+      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
+})
+let headerid=ref();
+onMounted(() => {
+  timeFn();
+});
+// 当前时间
+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 handleSelect = (key) => {
+    headerid.value=key;
+    emit('handleSelect', key);
+    props.name='';
+};
+   </script>
+   <style  lang="scss" scoped>
+
+
+   </style>

src/style/style.css

@@ -110,13 +110,13 @@ body,html{
     margin-top: 20px;
   }
   .ddd .ddd_div {
-    padding: 20px 0;
+    padding: 20px 20px;
     position: relative;
   }
   .ddd .class_btn {
     position: absolute;
-    right: 0;
-    top: 21px;
+    right: 38px;
+    top: 20px;
   }
   
   .header_l {
@@ -409,8 +409,8 @@ body,html{
 }
 
 .footer_div {
-    height: 90px;
-    padding: 30px 0;
+  height: 62px;
+  padding: 9px 0;
 }
 
 .l_btn {
@@ -1009,7 +1009,7 @@ ol {
 
 .classtab .el-tabs__item {
   /* width:120px; */
-  height: 48px;
+  height: 32px;
   padding: 0 10px !important;
   font-weight: bold;
   font-size: 12px;
@@ -1027,7 +1027,7 @@ ol {
 }
 
 .classtab .el-tabs {
-  --el-tabs-header-height: 48px !important;
+  --el-tabs-header-height: 32px !important;
 }
 
 .classtab .el-tabs__header {
@@ -1035,7 +1035,7 @@ ol {
 }
 
 .classtab .is-active {
-  height: 48px;
+  height: 32px;
   background: radial-gradient(ellipse at 54px 0px, #3AA0FF -37%, #123066 53%);
   border-radius: 0px 0px 0px 0px;
   color: #fff !important;
@@ -1224,10 +1224,15 @@ opacity: 0.4;
    white-space: nowrap;
 
 }
+.title_wrap{
+  display: flex;
+  justify-content: center;
+    color: #fff;
+}
 .timers{
   position: absolute;
     left:20px;
-    top:26px;
+    top:16px;
     font-size: .0729rem;
     display: flex;
     align-items: center;
@@ -1328,9 +1333,10 @@ font-size: .0833rem;
   position: relative;
 }
 .maincontent{
-    left: 0;
-    overflow: auto;
-    height: calc(100vh - 106px);
+  left: 0;
+  overflow: auto;
+  height: calc(100vh - 106px);
+  position: absolute;
 }
 /* 隐藏滚动条 */
 ::-webkit-scrollbar {
@@ -1530,4 +1536,45 @@ color: #FFF500 ;
     rgba(93, 144, 194, 1),
     rgba(93, 144, 194, 0.1)
   )
+}
+.headertime{
+  margin-left: .1042rem;
+}
+.datayear{
+font-size: .0677rem;
+}
+.dateday{
+  font-size: .0781rem;
+
+}
+.bgk3{
+  height: calc(100vh - 58px);
+  background: radial-gradient(closest-side, #0B338B , #1C253D);
+  z-index: 330;
+}
+
+.el-header{
+  /* position: fixed;
+  z-index: 10000;
+  width: 100%; */
+}
+ .bgk2 {
+  /* max-width: 1153px; */
+  /* margin: 0 auto; */
+  background-image: url(/src/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; */
+}
+.is-vertical{
+  height: 100vh;
+  background: radial-gradient(closest-side, #0B338B , #1C253D);
+}
+.rightflex{
+  position: fixed;
+  right: 15px;
+  top: 70px;
 }

src/view/InfoDialoges.vue

@@ -44,7 +44,7 @@
                 </div>
             </template>
             <div class="my_content1  bgcolor  tablefocus scoperadio xian2 shigu">
-                <el-table :data="tableData"  :span-method="mergeCell" style="width: 100%" v-loading="loading" element-loading-text="Loading..."
+                <el-table :data="tableData"  style="width: 100%" v-loading="loading" element-loading-text="Loading..."
                 :highlight-current-row="currentrow"
                     element-loading-background="rgba(0, 10, 0,0)" :row-class-name="tableRowClassName"
                     :header-cell-style="{ 'background': 'rgba(0, 10, 0,0)' }" @select="projectsSelectionSelect">
@@ -91,9 +91,9 @@
             <div class="ddd" v-show="dialog.dialogForm">
                 <div class="header_l">
                     <el-image :src="icon" fit="contain"></el-image>
-                    <h4 class="tianjia"> {{ shigtext }}</h4>
+                    <h4 class="tianjia"> {{ shigtext }}</h4>   
                     <div class="closeimg" @click="dialog.dialogForm = false"><el-image :src="closeimg" fit="contain"
-                            style="margin-top: -10px;"></el-image></div>
+                            style="margin-top: -10px;"></el-image></div> </div>
                     <div class="ddd_div" style="display: flex;">
                         <div class="demo-input-suffix firsttitle magintop">
                             <el-form-item label="事故名称">
@@ -110,7 +110,7 @@
 
                         </div>
                     </div>
-                </div>
+            
             </div>
             <el-dialog v-model="dialog.dialogsgdelect" width="400" class="dialog_class bgcolor tianjia">
 
@@ -588,8 +588,7 @@ const accident = () => {
     if (idobj.value.name == '') {
         ElMessage.error('请选择项目')
     } else {
-    //   router.push({ path: "/appmian" });
-      console.log(router.push);
+     // router.push({ path: "/appmian" });
         if(props.valzaiqing=='模拟数据'){
         const params = {
             transCode: 'D10017',
@@ -624,6 +623,7 @@ const accident = () => {
             })
 
         }else{
+        // setTimeout(function(){
          initWebSocket();
          rizhi.value.logs='';
          newlog.value ='';  
@@ -631,10 +631,11 @@ const accident = () => {
         emit('childfun');
         emit('moxingclick', true);
         pollute();
-         emit('handleSelect', '1');
+        //  emit('handleSelect', '1');
         fetchFileContent();
         accident2(props.activeIndex)
-
+        console.log(11112222333)
+    // },100)
     }
     dialog.value.dialogVisible_fire = false;
     }
@@ -694,7 +695,6 @@ const sgadd = () => {
 const getRadioRow = (val) => {
     // currentrow.value=true;
     sgdata.value = (val);
-    console.log(tableobj.value)
     formull.value.name = val.name;
     aid.value = val.aid;
     idobj.value.name = val.name;

src/view/appmian.vue

@@ -3,41 +3,17 @@
     <!-- <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">
-            <span>{{ headerobj.name }}</span>
-            {{  headertime.dateYear }} {{  headertime.dateDay }}
-          </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">
-              <el-image style="height: 100%" :src="logo" fit="contain"></el-image>
-            </div>
-          
-              <span class="title-text">矿道灾情软件推演</span>
-            </div>
-          </div>
-          
-          <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('3')" >瓦斯爆炸推演</div>
-            <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('4')">模型库</div>
-        </div>
-      </div>
-      </el-header>
-    
+      <reheader @handleSelect="handleSelect" :name="headerobj.name"/>
+    </el-header>
       <el-main>
    <div  class="maincontent">
       <div class="mainpdding">
         <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"
@@ -51,22 +27,48 @@
           @moxingclick="moxingclick"
           :classradio="classradio" 
         ></Dialoges>
- 
-        <MenuMine ref="menumine"/>
-        <MenuSensor ref="menusen"/>
+        <!-- 模型库 -->
+        <configurator ref="configuratorref"/>
+        <!-- <MenuMine ref="menumine"/>
+        <MenuSensor ref="menusen"/> -->
+
         <!-- right -->
         <!-- <firstLeft/> -->
       <!-- </div> -->
-      <!-- 底部按钮三个页面 -->
-      <firstLeft ref="firstleftref" :classradio="classradio" :aid="aid" />
-      <towright ref="towrightref" :classradio="classradio" :aid="aid" />
-    
-      <!-- <threeright ref="threerightref" :classradio="classradio" :aid="aid" /> -->
+   
     </div>
     </div>
+    <div class="vtkmodel1" id="infomodel"><InfoVtkmodel ref="vtkmodel" /></div>
+     
       </el-main>
-      <div class="bkxolo">
+   
+      <div class=" bgk3" v-show="bgk2false">
+      <div class="bgk2 bgk3">
+          <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>
+      <div class="bkxolo" v-show="bkmodel">
       <result ref="resultbidui" @titleclick="titleclick"  :classradio="classradio"></result></div>
+       <!-- 底部按钮三个页面 -->
   <div class="footer">
     <Index ref="indexref" @indexchange="indexchange" @hiadden="hiadden"/>
   </div>
@@ -86,16 +88,14 @@ 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 configurator from "./configurator.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 configurator  from "./components/configurator.vue"
+import reheader  from "@/components/header.vue"
 import result from "./result.vue";
-import firstLeft  from "./index/first-left.vue"
-import towright  from "./index/tow-right.vue"
-import threeright  from "./index/three-right.vue"
 import Vector from "@/assets/img/Vector.png";
 import s1 from "@/assets/img/s1.png";
 import s2 from "@/assets/img/s2.png";
@@ -116,6 +116,8 @@ let tanimation = ref();
 let menumine=ref();
 let menusen=ref();
 let indexref=ref();
+let configuratorref=ref();
+let bkmodel=ref(false);
 const title = "灾情推演软件";
 const activeIndex = ref("1");
 const activeIndex2 = ref("1");
@@ -136,7 +138,7 @@ let headertime=ref({
       dateWeek: null,
       weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
 })
- let bgk2false=ref(true)     
+ let bgk2false=ref(true);     
 let headerobj = ref({
   time: "",
   name: "",
@@ -163,18 +165,6 @@ const timeFn=()=> {
     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;
 };
@@ -263,33 +253,16 @@ const aidlist = () => {
 };
 // index组件的方法
 const indexchange=(key)=>{
-  if(key==0){
-    firstleftref.value.firstshow=true;
-    towrightref.value.towshow=false;
-    // threerightref.value.threeshow=false;
-    resultbidui.value.accident6(key, aid.value);
-  }else if(key==1){
-    firstleftref.value.firstshow=false;
-    towrightref.value.towshow=true;
-    resultbidui.value.accident6(key, aid.value);
-    // threerightref.value.threeshow=false;
-  }else if(key==2){
-    firstleftref.value.firstshow=false;
-    towrightref.value.towshow=false;
-    resultbidui.value.accident6(key, aid.value);
-  }
-  else{
-    firstleftref.value.firstshow=false;
-    towrightref.value.towshow=false;
-    resultbidui.value.accident6(key, aid.value);
-    // threerightref.value.threeshow=false;
-  }
+  bkmodel.value=true;
+resultbidui.value.accident6(key, aid.value);
 }
 
 // 获取子组件的方法
 const childfun = () => {
   bgk2false.value=false;
-  indexref.value.showhadend()
+  console.log( bgk2false.value);
+  indexref.value.showhadend();
+  
   indexchange(indexref.value.btnindex);
   if(classradio.value=='Gass'){
     sourcedis.value.Gassgetdata(aid.value);
@@ -301,7 +274,6 @@ const childfun = () => {
   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;
@@ -318,42 +290,42 @@ const handindodialoges=()=>{
  }
 
 const handleSelect = (key) => {
-  router.push({ path: "/" ,query:{classradio:key}});
+  // router.push({ path: "/" ,query:{classradio:key}});
   bgk2false.value=true;
   indexref.value.btnlistshow=false;
   if( bgk2false.value==true){
     activeIndex.value='11'
+    bkmodel.value=false;
+  sourcedis.value.accident3(activeIndex.value);
+  boundary.value.accident4(activeIndex.value);
+  lliudialog.value.accident2( activeIndex.value);
+  indexref.value.hiddfalse();
+  configuratorref.value.menumfalse();
   }
+  indexref.value.btnlistshow=false;
   resultbidui.value.accident6('5');
- // indexref.value.changeColor("1")
   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);
+    bgk2false.value=false;
+    configuratorref.value.showmenum();
+    boundary.value.accident4(key);
+    sourcedis.value.accident3(key);
+    lliudialog.value.accident2(key);
       break;
     case "5":
 
@@ -364,18 +336,8 @@ const handleSelect = (key) => {
 </script>
 
 <style lang="scss" scoped>
-
-.title_wrap{
-  display: flex;
-  justify-content: center;
-    color: #fff;
-}
 .appmian {
   .el-main {
-    --el-main-padding: 0 !important;
-    position: absolute;
-    top: 60px;
-    left: 0;
   }
 
   .el-container {
@@ -552,6 +514,11 @@ const handleSelect = (key) => {
 
 <style>
  @import '../../src/style/style.css';
+.vtkmodel1{
+  position: absolute;
+    z-index: 207; 
+
+}
 body {
   width: 100%;
   height: 100vh;

src/view/components/MenuCheck.vue

@@ -1,14 +1,19 @@
 <template>
+    <div class=" bou   tablebk">
+        <div class="common-layout" style="margin: 0">
+        <el-aside
+        width="357px"
+          class="L_aside L_aside1 asideg asidegbg leftbgimg1"
+          v-show="sendialogVisible"
+        >
+          <div class="demo-collapse">
+            <el-collapse v-model="coolactiveName1" accordion>
+              <el-collapse-item name="1" class="imgneon">
+                <template #title>
+                  <el-icon class="iconimg Frame3" fit="contain"></el-icon>
+                  监测点<el-icon class="header-icon"> </el-icon>
+                </template>
     <div class="l_Dialog">
-        <el-dialog v-model="sendialogVisible" width="470" align-center :modal="false" :close-on-click-modal="false"
-            modal-class="summary-dlg" draggable class="dialog_class bgcolor zhucentent chuanjianc">
-            <template #header="{ titleId, titleClass }">
-                <div class="my-header xinxi_header">
-                    <el-image :src="icon" fit="contain"></el-image>
-                    <h4 :id="titleId" :class="titleClass">监测点信息</h4>
-
-                </div>
-            </template>
             <div class="classtab">
                 <div class="asides_content">
                     <div class="jc_content tablecolor jc_content">
@@ -19,7 +24,7 @@
                                 <el-table :data="tableData" style="width:480px" :max-height="tableHeight"
                                     :highlight-current-row="currentrow" :row-class-name="tableRowClassName"
                                     @row-click="handleDelete($event)"
-                                    :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0.9) ' }">
+                                    :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0) ' }">
                                     <el-table-column type="index" label="编号"  />
                                     <el-table-column prop="chname" label="所在巷道" />
                                     <el-table-column prop="pname" label="所在巷道" />
@@ -50,7 +55,9 @@
                     </div>
                 </div>
             </div>
-        </el-dialog>
+        </div>
+        </el-collapse-item>
+            </el-collapse>
         <!-- 删除 -->
         <el-dialog v-model="dialogsgdelect" width="400" class="dialog_class bgcolor tianjia">
 
@@ -183,6 +190,9 @@
     </div>
    </div>
    </el-dialog>
+</div>
+        </el-aside>
+    </div>
     </div>
 </template>
 
@@ -207,6 +217,7 @@ let sdialog=ref({
     dianadddialog:false,
     dialogVisiblenode:false,
 })
+let coolactiveName1 = ref(["1", "2"]);
 let total = ref(1);
 let searchtaggd = ref("");
 const currentPage4 = ref(1);
@@ -219,7 +230,7 @@ let source=ref({
 })
 let  firepid=ref("")
 const resultactiveName = ref("first");
-let tableHeight = ref(400);
+let tableHeight = ref(160);
 let tableData = ref([]);
 let tableobj = ref({});
 let zqname = ref();
@@ -400,264 +411,4 @@ const projectsSelectionSelect=(selection, row)=>{
      
      }
 defineExpose({ sendialogVisible, });
-</script>
-
-<style lang="scss" scoped>
-.jc_padding .el-table tr {
-    height: 30px !important;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-}
-
-.flex_a {
-    flex: 1;
-    padding: 0 19px;
-}
-
-.btns {
-    width: 72px;
-    height: 30px;
-    background-image: url(../../assets/img/Rectangle399.png);
-    background-repeat: no-repeat;
-    line-height: 30px;
-    overflow: hidden;
-    margin: 10px 0;
-
-    .spantext {
-        font-weight: bold;
-        font-size: 12px;
-        color: #FFFFFF;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-}
-
-.header_z {
-    box-shadow: none !important;
-    padding: 10px 20px !important;
-}
-
-.header_l {
-    line-height: 10px;
-    // height: 40px;
-    text-align: left;
-    padding: 0 20px;
-    // border-bottom: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-
-    .el-image {
-        padding: 10px 10px 0 0;
-    }
-
-    h4 {
-        font-weight: bold;
-        font-size: 12px;
-        color: #68ADFF;
-        line-height: 14px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-
-}
-
-.jc_padding {
-    padding: 18px 10px;
-}
-
-.line {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
-    box-sizing: border-box;
-}
-
-.L_aside {
-    .iconimg {
-        width: 37px;
-        height: 36px;
-        margin: 0 7px 0 24px;
-    }
-}
-
-.ddd {
-    margin-top: 20px;
-
-    .ddd_div {
-        padding: 20px 0;
-        position: relative;
-    }
-
-    .class_btn {
-        position: absolute;
-        right: 0;
-        top: 21px;
-    }
-
-    .header_l {
-        line-height: 10px;
-        // height: 40px;
-        text-align: left;
-        padding: 0 20px;
-        // border-bottom: 1px solid;
-        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        border-radius: 0px 0px 0px 0px;
-
-        .el-image {
-            padding: 10px 10px 0 0;
-        }
-
-        h4 {
-            font-weight: bold;
-            font-size: 12px;
-            color: #68ADFF;
-            line-height: 14px;
-            text-align: left;
-            font-style: normal;
-            text-transform: none;
-        }
-    }
-}
-
-.el-dialog__title {
-    display: inline-block;
-}
-
-.bgcolor {
-    // width: 482px;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-}
-
-.dialog_class {
-    .my-header {
-        line-height: 10px;
-        height: 40px;
-        text-align: left;
-        padding: 0 20px;
-        border-bottom: 1px solid;
-        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        border-radius: 0px 0px 0px 0px;
-
-        .el-image {
-            padding: 10px 10px 0 0;
-        }
-
-        h4 {
-            font-weight: bold;
-            font-size: 12px;
-            color: #68ADFF;
-            line-height: 14px;
-            text-align: left;
-            font-style: normal;
-            text-transform: none;
-        }
-    }
-
-    .my_content {
-        width: 100%;
-        height: 90px;
-        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        border-radius: 0px 0px 0px 0px;
-        position: relative;
-
-        .radio-group {
-            display: flex;
-            justify-content: center;
-
-            .el-radio {
-                flex: 1;
-                justify-content: center;
-                font-weight: bold;
-                font-size: 12px;
-                color: #FFFFFF;
-                line-height: 14px;
-
-            }
-
-        }
-    }
-
-    .el-dialog__footer {
-        position: absolute;
-        bottom: 17px;
-        display: flex;
-
-        .footerbtn {
-            flex: 1;
-            text-align: center;
-        }
-    }
-}
-
-.my_content1 {
-    .el-table .cell {
-        font-weight: 400;
-        font-size: 12px;
-        color: #FFFFFF !important;
-        line-height: 14px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-
-}
-
-.l_btn .borderimg {
-    width: 70px;
-    height: 30px;
-    font-size: 12px;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    /* border: 1px solid rgba(31, 107, 255, 1); */
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    font-weight: bold;
-    border-radius: 4px;
-    display: flex;
-    display: inline-block;
-    box-sizing: border-box;
-}
-
-.borderimg {
-    width: 109px;
-    height: 30px;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    /* border: 1px solid rgba(31, 107, 255, 1); */
-    -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    border-radius: 4px;
-    display: flex;
-    display: inline-block;
-    box-sizing: border-box
-}
-
-.el-table,
-.el-table thead th {
-    background-color: rgba(13, 22, 57, 0.96) !important;
-}
-
-.el-form-item__label {
-    color: #FFFFFF !important;
-}
-
-.jiancedian {
-    width: 380px;
-    position: absolute;
-    right: 0;
-    top: 70px;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 4px 4px 4px 4px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-}
-
-</style>
+</script>

src/view/components/MenuMine.vue

@@ -3,16 +3,17 @@
     <div class="l_Dialog bou tablebk">
       <div class="common-layout" style="margin: 0" >
         <el-aside
-          width="591px"
-          class="L_aside L_aside1 asideg asidegbg leftbgimg2"
+          width="480px"
+          class="L_aside L_aside1 asideg asidegbg leftbgimg1"
           v-show="dialogVisible"
         >
           <div class="demo-collapse">
             <el-collapse v-model="coolactiveName1" accordion>
-              <el-collapse-item name="1">
+              <el-collapse-item name="1"  class="imgneon">
+           
                 <template #title>
-                  <el-icon class="iconimg Frame2" fit="contain"></el-icon>
-                  矿井信息<el-icon class="header-icon"> </el-icon>
+                    <el-icon class="iconimg Frame3 imgneon" fit="contain"></el-icon>
+                  矿井信息
                 </template>
                 <div class="asides_content">
                   <div class="jc_content tablecolor">
@@ -32,7 +33,7 @@
                                         <el-table :data="tableData2" style="width:480px" :max-height="tableHeight"
                                             :highlight-current-row="currentrow" :row-class-name="tableRowClassName"
                                             @row-click="handleDelete($event)"
-                                            :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0.9) ' }">
+                                            :header-cell-style="{ 'background': 'rgba(13, 22, 57,0) ' }">
                                             <el-table-column type="index" label="节点编号" width="80px" />
                                             <el-table-column prop="name" label="节点名称" />
                                             <el-table-column prop="x" label="X" />
@@ -129,12 +130,12 @@
                         </div>
 
                     </el-tab-pane>
-                    <el-tab-pane label="设备信息" name="third">
+                    <!-- <el-tab-pane label="设备信息" name="third">
 
                     </el-tab-pane>
                     <el-tab-pane label="网络信息" name="thirds">
 
-                    </el-tab-pane>
+                    </el-tab-pane> -->
                 </el-tabs>
             </div>
             <!-- 添加弹窗 -->
@@ -326,7 +327,7 @@
   let formLabelWidth6 = ref(70);
   let formLabelWidth7 = ref(100)
   const resultactiveName = ref("first");
-  let tableHeight = ref(570);
+  let tableHeight = ref(280);
   let total = ref(1);
   let searchtag = ref("");
   let options = ref([{

src/view/components/MenuPhysics.vue

@@ -1,15 +1,19 @@
 <template>
-    <!-- 表格表头不一样wuli -->
+   <div class=" bou  tablebk">
+        <div class="common-layout" style="margin: 0">
+        <el-aside
+        width="357px"
+          class="L_aside L_aside1 asideg asidegbg leftbgimg1"
+          v-show="sendialogVisible"
+        >
+          <div class="demo-collapse">
+            <el-collapse v-model="coolactiveName1" accordion>
+              <el-collapse-item name="1" class="imgneon">
+                <template #title>
+                  <el-icon class="iconimg Frame3" fit="contain"></el-icon>
+                  物理属性<el-icon class="header-icon"> </el-icon>
+                </template>
     <div class="l_Dialog">
-        <el-dialog v-model="sendialogVisible" width="470" align-center :modal="false" :close-on-click-modal="false"
-            modal-class="summary-dlg" draggable class="dialog_class bgcolor zhucentent ">
-            <template #header="{ titleId, titleClass }">
-                <div class="my-header xinxi_header">
-                    <el-image :src="icon" fit="contain"></el-image>
-                    <h4 :id="titleId" :class="titleClass">物理属性</h4>
-
-                </div>
-            </template>
             <div class="classtab">
                 <div class="asides_content">
                     <div class="jc_content tablecolor jc_content">
@@ -20,7 +24,7 @@
                                 <el-table :data="tableData" style="width:480px" :max-height="tableHeight"
                                 :highlight-current-row="currentrow" :row-class-name="tableRowClassName"
                                     @row-click="handleDelete($event)"
-                                    :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0.9) ' }">
+                                    :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0) ' }">
                                     <el-table-column prop="name" label="名称" />
                                     <el-table-column prop="density" label="密度" />
                                     <el-table-column prop="diffcoe" label="扩散系数" />
@@ -51,7 +55,9 @@
                     </div>
                 </div>
             </div>
-        </el-dialog>
+        </div>
+        </el-collapse-item>
+            </el-collapse>
         <!-- 添加 -->
         <el-dialog v-model="addVisible" width="400" class="dialog_class bgcolor tianjia  foter_l tianjia">
 
@@ -113,8 +119,10 @@
                 </div>
             </div>
         </el-dialog>
+          </div>
         <!-- 选择管道 -->
-      
+    </el-aside>
+    </div>
     </div>
 </template>
 
@@ -133,7 +141,8 @@ let classradio1 = ref('Fire');
 const formLabelWidth6 = ref(100);
 let add = ref("")
 const resultactiveName = ref("first");
-let tableHeight = ref(570);
+let coolactiveName1 = ref(["1", "2"]);
+let tableHeight = ref(145);
 let tableData = ref([]);
 let tableobj = ref({});
 let zqname = ref();
@@ -257,311 +266,3 @@ const amend = () => {
 
 defineExpose({ sendialogVisible, });
 </script>
-
-<style lang="scss" scoped>
-.jc_padding .el-table tr {
-    height: 30px !important;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-}
-
-.flex_a {
-    flex: 1;
-    padding: 0 19px;
-}
-
-.btns {
-    width: 72px;
-    height: 30px;
-    background-image: url(../../assets/img/Rectangle399.png);
-    background-repeat: no-repeat;
-    line-height: 30px;
-    overflow: hidden;
-    margin: 10px 0;
-
-    .spantext {
-        font-weight: bold;
-        font-size: 12px;
-        color: #FFFFFF;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-}
-
-.header_z {
-    box-shadow: none !important;
-    padding: 10px 20px !important;
-}
-
-.header_l {
-    line-height: 10px;
-    // height: 40px;
-    text-align: left;
-    padding: 0 20px;
-    // border-bottom: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-
-    .el-image {
-        padding: 10px 10px 0 0;
-    }
-
-    h4 {
-        font-weight: bold;
-        font-size: 12px;
-        color: #68ADFF;
-        line-height: 14px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-
-}
-
-.jc_padding {
-    padding: 18px 10px;
-}
-
-.line {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
-    box-sizing: border-box;
-}
-
-.L_aside {
-    .iconimg {
-        width: 37px;
-        height: 36px;
-        margin: 0 7px 0 24px;
-    }
-}
-
-.ddd {
-    margin-top: 20px;
-
-    .ddd_div {
-        padding: 20px 0;
-        position: relative;
-    }
-
-    .class_btn {
-        position: absolute;
-        right: 0;
-        top: 21px;
-    }
-
-    .header_l {
-        line-height: 10px;
-        // height: 40px;
-        text-align: left;
-        padding: 0 20px;
-        // border-bottom: 1px solid;
-        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        border-radius: 0px 0px 0px 0px;
-
-        .el-image {
-            padding: 10px 10px 0 0;
-        }
-
-        h4 {
-            font-weight: bold;
-            font-size: 12px;
-            color: #68ADFF;
-            line-height: 14px;
-            text-align: left;
-            font-style: normal;
-            text-transform: none;
-        }
-    }
-}
-
-.el-dialog__title {
-    display: inline-block;
-}
-
-.bgcolor {
-    // width: 482px;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-}
-
-.dialog_class {
-    .my-header {
-        line-height: 10px;
-        height: 40px;
-        text-align: left;
-        padding: 0 20px;
-        border-bottom: 1px solid;
-        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        border-radius: 0px 0px 0px 0px;
-
-        .el-image {
-            padding: 10px 10px 0 0;
-        }
-
-        h4 {
-            font-weight: bold;
-            font-size: 12px;
-            color: #68ADFF;
-            line-height: 14px;
-            text-align: left;
-            font-style: normal;
-            text-transform: none;
-        }
-    }
-
-    .my_content {
-        width: 100%;
-        height: 90px;
-        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        border-radius: 0px 0px 0px 0px;
-        position: relative;
-
-        .radio-group {
-            display: flex;
-            justify-content: center;
-
-            .el-radio {
-                flex: 1;
-                justify-content: center;
-                font-weight: bold;
-                font-size: 12px;
-                color: #FFFFFF;
-                line-height: 14px;
-
-            }
-
-        }
-    }
-
-    .el-dialog__footer {
-        position: absolute;
-        bottom: 17px;
-        display: flex;
-
-        .footerbtn {
-            flex: 1;
-            text-align: center;
-        }
-    }
-}
-
-.my_content1 {
-    .el-table .cell {
-        font-weight: 400;
-        font-size: 12px;
-        color: #FFFFFF !important;
-        line-height: 14px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-
-}
-
-.l_btn .borderimg {
-    width: 70px;
-    height: 30px;
-    font-size: 12px;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    /* border: 1px solid rgba(31, 107, 255, 1); */
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    font-weight: bold;
-    border-radius: 4px;
-    display: flex;
-    display: inline-block;
-    box-sizing: border-box;
-}
-
-.borderimg {
-    width: 109px;
-    height: 30px;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    /* border: 1px solid rgba(31, 107, 255, 1); */
-    -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    border-radius: 4px;
-    display: flex;
-    display: inline-block;
-    box-sizing: border-box
-}
-
-.el-table,
-.el-table thead th {
-    background-color: rgba(13, 22, 57, 0.96) !important;
-}
-
-
-.el-form-item__label {
-    color: #FFFFFF !important;
-}
-
-.jiancedian {
-    width: 380px;
-    position: absolute;
-    right: 0;
-    top: 70px;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 4px 4px 4px 4px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-}
-
-</style>
-<style>
- .wuli  .el-table .el-table__header .el-table__cell{
-    height:48px !important;
-    text-align: center;
-
-
-}
-.wuli  .el-table .el-table__header .el-table__cell .cell{
-    text-align: center;
-    position: relative; 
-
-}
-.wuli  .el-table .el-table__header {
-/* 
-   border-top: 1px solid !important;
-    border-bottom: 1px solid !important;
-   border-image: linear-gradient(237deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;  */
-
-}
-.wuli  .el-table .el-table__header .el-table__cell:before{
-    content: ''; 
-      width: 100%;
-      height: 1px;
-      background-color:rgba(16, 92, 240, 1);
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      transform: scaleY(0.5);
-
-}
-
-.wuli  .el-table .el-table__header .el-table__cell::after{
-         content: " ";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 200%;
-        height: 200%;
-        border-right: 1px solid;
-        border-top: 1px solid;
-        border-bottom: 1px solid;
-        border-image: linear-gradient(180deg, rgb(31, 107, 255), rgba(31, 107, 255, 0.48)) 1 1;
-        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        transform-origin: 0 0;
-        transform: scale(0.5);
-}
-</style>

src/view/components/MenuSensor.vue

@@ -3,23 +3,18 @@
       <!--火灾左侧栏-->
       <div class="common-layout" style="margin: 0">
         <el-aside
-          width="591px"
-          class="L_aside L_aside1 asideg asidegbg leftbgimg2"
+        width="480px"
+          class="L_aside L_aside1 asideg asidegbg leftbgimg1"
           v-show="sendialogVisible"
         >
           <div class="demo-collapse">
             <el-collapse v-model="coolactiveName1" accordion>
-              <el-collapse-item name="1">
+              <el-collapse-item name="1" class="imgneon">
                 <template #title>
-                  <el-icon class="iconimg Frame2" fit="contain"></el-icon>
+                  <el-icon class="iconimg Frame3" fit="contain"></el-icon>
                   传感器信息<el-icon class="header-icon"> </el-icon>
                 </template>
-                <div class="asides_content">
-                  <div class="jc_content tablecolor">
-                    <div class="jc_padding font12">
-                      <div class="xian btncolor tablefocus bmar">
     <div class="l_Dialog">
-    
             <div class="classtab">
                 <div class="asides_content">
                     <div class="jc_content tablecolor jc_content">
@@ -30,7 +25,7 @@
                                 <el-table :data="tableData" style="width:480px" :max-height="tableHeight"
                                 :highlight-current-row="currentrow"  :row-class-name="tableRowClassName"
                                     @row-click="handleDelete($event)"
-                                    :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0.9) ' }">
+                                    :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0) ' }">
                                     <el-table-column type="index" label="编号" />
                                     <el-table-column prop="type" label="类型" />
                                     <el-table-column prop="pname" label="所在巷道" />
@@ -64,6 +59,9 @@
                     </div>
                 </div>
             </div>
+        </div>
+        </el-collapse-item>
+            </el-collapse>
         <!-- 添加 -->
         <el-dialog v-model="addVisible" width="400" class="dialog_class bgcolor tianjia  foter_l tianjia">
 
@@ -129,14 +127,7 @@
         </el-dialog>
         <!-- 选择管道 -->
         <pipelines ref="pipeline" :selectstr="source.selectstr" @pipelineapi="pipelineapi" />
-    </div>
-    <!--  -->
-</div>
-                    </div>
-                  </div>
-                </div>
-              </el-collapse-item>
-            </el-collapse>
+           
           </div>
         </el-aside>
       </div>
@@ -291,310 +282,3 @@ const pipelineapi = (row) => {
 }
 defineExpose({ sendialogVisible, });
 </script>
-
-<style lang="scss" scoped>
-.jc_padding .el-table tr {
-    height: 30px !important;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-}
-
-.flex_a {
-    flex: 1;
-    padding: 0 19px;
-}
-
-.btns {
-    width: 72px;
-    height: 30px;
-    background-image: url(../../assets/img/Rectangle399.png);
-    background-repeat: no-repeat;
-    line-height: 30px;
-    overflow: hidden;
-    margin: 10px 0;
-
-    .spantext {
-        font-weight: bold;
-        font-size: 12px;
-        color: #FFFFFF;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-}
-
-.header_z {
-    box-shadow: none !important;
-    padding: 10px 20px !important;
-}
-
-.header_l {
-    line-height: 10px;
-    // height: 40px;
-    text-align: left;
-    padding: 0 20px;
-    // border-bottom: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-
-    .el-image {
-        padding: 10px 10px 0 0;
-    }
-
-    h4 {
-        font-weight: bold;
-        font-size: 12px;
-        color: #68ADFF;
-        line-height: 14px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-
-}
-
-.jc_padding {
-    padding: 18px 10px;
-}
-
-.line {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
-    box-sizing: border-box;
-}
-
-.L_aside {
-    .iconimg {
-        width: 37px;
-        height: 36px;
-        margin: 0 7px 0 24px;
-    }
-}
-
-.ddd {
-    margin-top: 20px;
-
-    .ddd_div {
-        padding: 20px 0;
-        position: relative;
-    }
-
-    .class_btn {
-        position: absolute;
-        right: 0;
-        top: 21px;
-    }
-
-    .header_l {
-        line-height: 10px;
-        // height: 40px;
-        text-align: left;
-        padding: 0 20px;
-        // border-bottom: 1px solid;
-        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        border-radius: 0px 0px 0px 0px;
-
-        .el-image {
-            padding: 10px 10px 0 0;
-        }
-
-        h4 {
-            font-weight: bold;
-            font-size: 12px;
-            color: #68ADFF;
-            line-height: 14px;
-            text-align: left;
-            font-style: normal;
-            text-transform: none;
-        }
-    }
-}
-
-.el-dialog__title {
-    display: inline-block;
-}
-
-.bgcolor {
-    // width: 482px;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-}
-
-.dialog_class {
-    .my-header {
-        line-height: 10px;
-        height: 40px;
-        text-align: left;
-        padding: 0 20px;
-        border-bottom: 1px solid;
-        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        border-radius: 0px 0px 0px 0px;
-
-        .el-image {
-            padding: 10px 10px 0 0;
-        }
-
-        h4 {
-            font-weight: bold;
-            font-size: 12px;
-            color: #68ADFF;
-            line-height: 14px;
-            text-align: left;
-            font-style: normal;
-            text-transform: none;
-        }
-    }
-
-    .my_content {
-        width: 100%;
-        height: 90px;
-        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        border-radius: 0px 0px 0px 0px;
-        position: relative;
-
-        .radio-group {
-            display: flex;
-            justify-content: center;
-
-            .el-radio {
-                flex: 1;
-                justify-content: center;
-                font-weight: bold;
-                font-size: 12px;
-                color: #FFFFFF;
-                line-height: 14px;
-
-            }
-
-        }
-    }
-
-    .el-dialog__footer {
-        position: absolute;
-        bottom: 17px;
-        display: flex;
-
-        .footerbtn {
-            flex: 1;
-            text-align: center;
-        }
-    }
-}
-
-.my_content1 {
-    .el-table .cell {
-        font-weight: 400;
-        font-size: 12px;
-        color: #FFFFFF !important;
-        line-height: 14px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-
-}
-
-.l_btn .borderimg {
-    width: 70px;
-    height: 30px;
-    font-size: 12px;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    /* border: 1px solid rgba(31, 107, 255, 1); */
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    font-weight: bold;
-    border-radius: 4px;
-    display: flex;
-    display: inline-block;
-    box-sizing: border-box;
-}
-
-.borderimg {
-    width: 109px;
-    height: 30px;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    /* border: 1px solid rgba(31, 107, 255, 1); */
-    -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    border-radius: 4px;
-    display: flex;
-    display: inline-block;
-    box-sizing: border-box
-}
-
-.el-table,
-.el-table thead th {
-    background-color: rgba(13, 22, 57, 0.96) !important;
-}
-
-
-.el-form-item__label {
-    color: #FFFFFF !important;
-}
-
-.jiancedian {
-    width: 380px;
-    position: absolute;
-    right: 0;
-    top: 70px;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 4px 4px 4px 4px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-}
-</style>
-
-<style>
-.tianjia {
-    display: inline-block;
-
-}
-
-.btncolor .el-table__header {
-    margin: 0 !important;
-}
-
-.tianjia .el-dialog__body {
-    padding: 20px !important;
-}
-
-.tianjia .el-form-item__label {
-    color: #fff;
-}
-
-.tianjia .el-input__inner {
-    color: #fff;
-    font-size: 14px;
-    font-weight: 400;
-    text-align: left;
-    padding: 20px 0;
-    height: 30px;
-    line-height: 47px;
-}
-
-.tablefocus .el-table__body tr.current-row>td.el-table__cell {
-    background-color: rgba(255, 255, 25, 0.5);
-}
-
-.delecttitle {
-    font-size: 22px;
-    font-weight: bold;
-    color: #fff;
-}
-
-.spanclad {
-    color: #FFF500;
-}
-.chuanjianc .el-dialog__header{
-    border-bottom: 1px solid;
-border-image: linear-gradient(359deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.5)) 1 1;
-}
-</style>

src/view/components/Menudisaster.vue

@@ -0,0 +1,136 @@
+<template>
+    <!--矿井信息-->
+    <div class="l_Dialog bou tablebk">
+      <div class="common-layout" style="margin: 0" >
+        <el-aside
+          width="480px"
+          class="L_aside L_aside1 asideg asidegbg leftbgimg1"
+          v-show="dialogVisible"
+        >
+          <div class="demo-collapse">
+            <el-collapse v-model="coolactiveName1" accordion>
+              <el-collapse-item name="1"  class="imgneon">
+           
+                <template #title>
+                    <el-icon class="iconimg Frame3 imgneon" fit="contain"></el-icon>
+                   报警设置
+                </template>
+                <div class="asides_content">
+                  <div class="jc_content tablecolor">
+                    <div class="jc_padding font12">
+                      <div class="xian btncolor tablefocus bmar">
+                       <!--内容 -->
+            <div class="classtab">
+                <el-tabs v-model="resultactiveName" type="card" class="demo-tabs" @tab-click="handleClick"
+                    :stretch="true">
+                    <el-tab-pane label="突水" name="first">
+                        <div class="asides_content">
+                            <div class="jc_content tablecolor jc_content">
+
+                                <div class="font12 my_content1">
+                                    <div class=" btncolor tablefocus bmar">
+
+                                        <el-table :data="tableData" style="width:480px" :max-height="tableHeight"
+                                            :highlight-current-row="currentrow" :row-class-name="tableRowClassName"
+                                            @row-click="handleDelete($event)"
+                                            :header-cell-style="{ 'background': 'rgba(13, 22, 57,0) ' }">
+                                            <el-table-column   prop="state"  label="预警" >
+                                            <template #default="scope">
+                                                <el-image v-if="scope.row.state=='0'" style="height: 100%" :src="bt1" fit="contain"></el-image>
+                                                <el-image v-if="scope.row.state=='1'" style="height: 100%" :src="bt2" fit="contain"></el-image>
+                                                <el-image v-if="scope.row.state=='2'"  style="height: 100%" :src="bt3" fit="contain"></el-image>
+                                                <el-image v-if="scope.row.state=='3'" style="height: 100%" :src="bt4" fit="contain"></el-image>
+                                            </template>
+                                            </el-table-column>
+                                            <el-table-column prop="name" label="突水量" />
+                                        </el-table>
+                                    </div>
+                                </div>
+                                <div class="dialog-footer footer_div l_btn">
+                                    <div class="footerbtn flex1">
+                                        <div class="borderimg"><el-button @click="addsg();">添加</el-button></div>
+                                    </div>
+                                    <div class="footerbtn flex1">
+                                        <div class="borderimg"><el-button @click="nodedelete()">
+                                                删除
+                                            </el-button></div>
+                                    </div>
+                                    <div class="footerbtn flex1">
+                                        <div class="borderimg"><el-button @click="accident()">
+                                                修改
+                                            </el-button></div>
+                                    </div>
+                                    <div class="footerbtn flex1">
+                                        <div class="borderimg"><el-button
+                                                @click="dialogVisible = false; currentrow = false;">
+                                                确认
+                                            </el-button></div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </el-tab-pane>
+                    <el-tab-pane label="火灾" name="second">
+                      
+
+                    </el-tab-pane>
+                    <el-tab-pane label="瓦斯" name="third">
+
+                    </el-tab-pane>
+                   
+                </el-tabs>
+            </div>
+    
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </el-aside>
+      </div>
+    </div>
+  
+  </template>
+  <script setup>
+  import { computed, ref, onMounted, reactive, toRef } from "vue";
+  import { request, uploadFile } from "@/utils/request";
+  import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+  import icon from "@/assets/img/icon.png";
+  import bt1 from "@/assets/img/Group1376.png"
+import bt2 from "@/assets/img/Group1377.png"
+import bt3 from "@/assets/img/Group1395.png"
+import bt4 from "@/assets/img/Group1396.png"
+  import { timestampToTime } from '@/js/lindex.js';
+  import NodeSelect from "./NodeLine.vue";
+  let dialogVisible=ref(false);
+  const resultactiveName = ref("first");
+  let coolactiveName1 = ref(["1",'2']);
+  let tableHeight = ref(280);
+  const tableData = [
+  {
+    date: '检测点',
+    name: '1',
+    state: '1',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+    tag: 'Home',
+  },
+  {
+    date: '检测点',
+    name: '1',
+    state: '2',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+    tag: 'Office',
+  },
+
+
+]
+  defineExpose({ dialogVisible, });
+  </script>
+  

src/view/components/Menupath.vue

@@ -0,0 +1,278 @@
+<template>
+    <div class=" bou  tablebk">
+         <div class="common-layout" style="margin: 0">
+         <el-aside
+         width="357px"
+           class="L_aside L_aside1 asideg asidegbg leftbgimg1"
+           v-show="sendialogVisible"
+         >
+           <div class="demo-collapse">
+             <el-collapse v-model="coolactiveName1" accordion>
+               <el-collapse-item name="1" class="imgneon">
+                 <template #title>
+                   <el-icon class="iconimg Frame3" fit="contain"></el-icon>
+                   路径预设<el-icon class="header-icon"> </el-icon>
+                 </template>
+     <div class="l_Dialog">
+             <div class="classtab">
+                 <div class="asides_content">
+                     <div class="jc_content tablecolor jc_content">
+ 
+                         <div class="font12 my_content1">
+                             <div class="btncolor tablefocus bmar">
+ 
+                                 <el-table :data="tableData" style="width:480px" :max-height="tableHeight"
+                                 :highlight-current-row="currentrow" :row-class-name="tableRowClassName"
+                                     @row-click="handleDelete($event)"
+                                     :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0) ' }">
+                                     <el-table-column prop="name" label="路径名称" />
+                                     <el-table-column label="操作" >
+                                        <template #default="scope">
+                                            <el-button
+                                            size="small"
+                                            type="success"
+                                            @click="handledetection(scope.$index, scope.row)"
+                                            >查看</el-button
+                                            >
+                                        </template>
+                                        </el-table-column>
+                                 </el-table>
+                             </div>
+                         </div>
+                         <div class="dialog-footer footer_div l_btn">
+                             <div class="footerbtn flex1">
+                                 <div class="borderimg"><el-button @click="addsg();">添加</el-button></div>
+                             </div>
+                             <div class="footerbtn flex1">
+                                 <div class="borderimg"><el-button @click="shanchu()">
+                                         删除
+                                     </el-button></div>
+                             </div>
+                             <div class="footerbtn flex1">
+                                 <div class="borderimg"><el-button @click="amend()">
+                                         修改
+                                     </el-button></div>
+                             </div>
+                             <div class="footerbtn flex1">
+                                 <div class="borderimg"><el-button @click="sendialogVisible = false;currentrow=false;">
+                                         确认
+                                     </el-button></div>
+                             </div>
+                         </div>
+                     </div>
+                 </div>
+             </div>
+         </div>
+         </el-collapse-item>
+             </el-collapse>
+         <!-- 添加 -->
+         <el-dialog v-model="addVisible" width="400" class="dialog_class bgcolor tianjia  foter_l tianjia">
+ 
+             <template #header="{ titleId, titleClass }">
+                 <div class="my-header ">
+                     <el-image :src="icon" fit="contain"></el-image>
+                     <h4 :id="titleId" :class="titleClass">{{ add }}</h4>
+ 
+                 </div>
+             </template>
+             <el-form class="demo-form-inline" :inline="true" :model="wuliobj">
+                 <el-form-item label="编号" :label-width="formLabelWidth6">
+                     <el-input v-model="wuliobj.code" maxlength="15" class="w-50 m-2" placeholder="请输入" />
+                 </el-form-item>
+                 <el-form-item label="名称" :label-width="formLabelWidth6">
+                     <el-input v-model="wuliobj.name" maxlength="18" class="w-50 m-2" placeholder="请输入" />
+                 </el-form-item>
+                 <el-form-item label="密度" :label-width="formLabelWidth6">
+                     <el-input v-model="wuliobj.density" maxlength="15" oninput ="value=value.replace(/[^0-9.]/g,'')"  class="w-50 m-2" placeholder="请输入" />
+                 </el-form-item>
+                 <el-form-item label="扩散系数" :label-width="formLabelWidth6">
+                     <el-input v-model="wuliobj.diffcoe" maxlength="15" oninput ="value=value.replace(/[^0-9.]/g,'')"  class="w-50 m-2" placeholder="请输入" />
+                 </el-form-item>
+                 <el-form-item label="比热" :label-width="formLabelWidth6">
+                     <el-input v-model="wuliobj.speheat" maxlength="15" oninput ="value=value.replace(/[^0-9.]/g,'')"  class="w-50 m-2" placeholder="请输入" />
+                 </el-form-item>
+             </el-form>
+             <div class="dialog-footer footer_div l_btn">
+                 <div class="footerbtn flex1">
+                     <div class="borderimg"><el-button @click="addVisible = false">取消</el-button></div>
+                 </div>
+                 <div class="footerbtn flex1">
+                     <div class="borderimg"><el-button @click="addEied(); addVisible = false">
+                             确定
+                         </el-button></div>
+                 </div>
+             </div>
+         </el-dialog>
+ 
+         <!-- 删除 -->
+         <el-dialog v-model="dialogsgdelect" width="400" class="dialog_class bgcolor tianjia">
+ 
+             <template #header="{ titleId, titleClass }">
+                 <div class="my-header ">
+                     <el-image :src="icon" fit="contain"></el-image>
+                     <h4 :id="titleId" :class="titleClass">删除框</h4>
+ 
+                 </div>
+             </template>
+             <h4 class="delecttitle"> 是否确认删除名称 <span class="spanclad">{{ zqname }}</span></h4>
+             <div class="dialog-footer footer_div l_btn">
+                 <div class="footerbtn flex1">
+                     <div class="borderimg"><el-button @click="dialogsgdelect = false">取消</el-button></div>
+                 </div>
+                 <div class="footerbtn flex1">
+                     <div class="borderimg"><el-button @click="fundeledata(); dialogsgdelect = false">
+                             确定
+                         </el-button></div>
+                 </div>
+             </div>
+         </el-dialog>
+           </div>
+         <!-- 选择管道 -->
+     </el-aside>
+     </div>
+     </div>
+ </template>
+ 
+ <script setup>
+ import { computed, ref, onMounted, reactive, toRef } from "vue";
+ import { request, uploadFile } from "@/utils/request";
+ import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+ import icon from "@/assets/img/icon.png";
+ import { timestampToTime } from '@/js/lindex.js'
+ let pipeline = ref();
+ let sendialogVisible = ref(false);
+ let currentrow=ref(true);
+ let addVisible = ref(false);
+ let dialogsgdelect = ref(false)
+ let classradio1 = ref('Fire');
+ const formLabelWidth6 = ref(100);
+ let add = ref("")
+ const resultactiveName = ref("first");
+ let coolactiveName1 = ref(["1", "2"]);
+ let tableHeight = ref(145);
+ let tableData = ref([]);
+ let tableobj = ref({});
+ let zqname = ref();
+ let wuliobj = ref({
+     coid:'',
+     code: '',
+     name:'',
+     density: "",
+     diffcoe: '',
+     speheat: '',
+ })
+ let source = ref({
+     selectstr: '',
+     site: ''
+ })
+ let firepid = ref("")
+ const tableRowClassName = ({ row, rowIndex }) => {
+     if (rowIndex % 2 != 0) {
+         return 'evenRow';
+     }
+     return 'oddRow';
+ 
+ }
+ // 选中一行
+ const handleDelete = (val) => {
+     currentrow.value=true;
+     tableobj.value = val;
+     console.log(tableobj.value)
+ }
+ // 删除
+ const shanchu = () => {
+     if (JSON.stringify(tableobj.value) == '{}') {
+         ElMessage.error("你还没有选中修改的项目")
+     } else {
+         dialogsgdelect.value = true
+         zqname.value = tableobj.value.name;
+     }
+ }
+ const handledetection=()=>{
+
+ }
+ const fundeledata = () => {
+ 
+     console.log(zqname.value);
+     const params = {
+         transCode: 'D10015',
+         coid: tableobj.value.coid
+     }
+     request(params)
+         .then((res) => {
+             getsensor();
+         })
+         .catch((err) => {
+             ElMessage.error(err.returnMsg)
+         })
+ }
+ onMounted(() => {
+     getsensor();
+ });
+ // 查询
+ const getsensor = () => {
+ 
+     const params = {
+         transCode: 'D10013',
+     }
+     request(params)
+         .then((res) => {
+             tableData.value = res.rows;
+         })
+         .catch((err) => {
+             ElMessage.error(err.returnMsg)
+         })
+ }
+ //添加
+ const addsg = () => {
+     add.value = "添加";
+     currentrow.value=false;
+     addVisible.value = true;
+     wuliobj.value.coid = '';
+     wuliobj.value.code = '';
+     wuliobj.value.name = '';
+     wuliobj.value.density = '';
+     wuliobj.value.diffcoe = '';
+     wuliobj.value.speheat = '';
+ 
+ 
+ }
+ // 添加修改的接口
+ const addEied = () => {
+     const params = {
+         transCode: 'D10014',
+         coid: wuliobj.value.coid,
+         code: wuliobj.value.code,
+         name:  wuliobj.value.name ,
+         density: wuliobj.value.density,
+         diffcoe:wuliobj.value.diffcoe,
+         speheat:wuliobj.value.speheat,
+     }
+     request(params)
+         .then((res) => {
+             tableData.value = res.rows;
+             getsensor();
+         })
+         .catch((err) => {
+             ElMessage.error(err.returnMsg)
+         })
+ }
+ //修改
+ const amend = () => {
+     add.value = "修改";
+     if (JSON.stringify(tableobj.value) == '{}') {
+         ElMessage.error("你还没有选中修改的项目")
+     } else {
+     addVisible.value = true;
+     wuliobj.value.coid = tableobj.value.coid;
+     wuliobj.value.code =tableobj.value.code;
+     wuliobj.value.name = tableobj.value.name;
+     wuliobj.value.density = tableobj.value.density;
+     wuliobj.value.diffcoe =tableobj.value.diffcoe;
+     wuliobj.value.speheat =tableobj.value.speheat;
+     }
+ }
+ 
+ 
+ defineExpose({ sendialogVisible, });
+ </script>

src/view/configurator.vue

@@ -1,61 +1,13 @@
 <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>
-                <div class="ve_right" @click="clickreture()">
-                    <div class="ve_timeioc">
-                        <el-image
-                            :src="Vector"
-                            fit="contain"
-                        ></el-image>
-                        <span>返回主界面</span>
-                    </div>
-                </div>
-      
-        </div>
-            </el-header>
-         
-            <el-main>
             <MenuMine ref="menumine"/>
             <MenuSensor ref="menusen"/>
+            <Menudisaster ref="Menudisasterref"/>
+            <div class="rightflex">
             <MenuCheck ref="menucheck"/>
             <menuphysics2 ref="menuphysics"/>
-            </el-main>
-         
-        </el-container>
+            <Menupath ref="menupath"/>
+          </div>
     </div>
   </template>
   
@@ -64,8 +16,10 @@ import { ref, onMounted,watch,reactive,nextTick} from "vue";
 import {RouterView,RouterLink,useRouter,createRouter } from "vue-router"
 import MenuMine  from "./components/MenuMine.vue"
 import MenuSensor  from "./components/MenuSensor.vue"
+import Menudisaster  from "./components/Menudisaster.vue"
 import MenuCheck  from "./components/MenuCheck.vue"
 import menuphysics2  from "./components/MenuPhysics.vue"
+import Menupath  from "./components/Menupath.vue"
 import Vector from "@/assets/img/Vector.png";
 import icon from "@/assets/img/icon.png";
 import logo from "@/assets/logo.png";
@@ -87,43 +41,58 @@ const activeIndex = ref('')
 let menusen=ref();
 let menucheck =ref();
 let menuphysics=ref();
+let menupath=ref();
+let Menudisasterref=ref();
 const clickreture=()=>{
-// router.push("/");
-//router.back()
-
-router.push("/");
 }
-const handleSelect = (key,keyPath) => {
-    switch (key) {
-    case '1':
+const showmenum=()=>{
+  menumine.value.dialogVisible=true;
+  menusen.value.sendialogVisible=true;
+  Menudisasterref.value.dialogVisible=true
+  menucheck.value.sendialogVisible=true;
+  menuphysics.value.sendialogVisible=true;
+  menupath.value.sendialogVisible=true;
 
-    menumine.value.dialogVisible=true;
-    menusen.value.sendialogVisible=false;
-    menucheck.value.sendialogVisible=false;
-    menuphysics.value.sendialogVisible=false;
-        break;
-    case '2':
-    menumine.value.dialogVisible=false;
-    menusen.value.sendialogVisible=true;
-    menucheck.value.sendialogVisible=false;
-    menuphysics.value.sendialogVisible=false;
-    break;
-    case '3':
-    menumine.value.dialogVisible=false;
-    menucheck.value.sendialogVisible=true;
-    menusen.value.sendialogVisible=false;
-    menuphysics.value.sendialogVisible=false;
-        break;
-     case '4':
-     menumine.value.dialogVisible=false;
-    menucheck.value.sendialogVisible=false;
-    menusen.value.sendialogVisible=false;
-    menuphysics.value.sendialogVisible=true;
-    default:
-        break;
 }
+const menumfalse=()=>{
+  menumine.value.dialogVisible=false;
+  menusen.value.sendialogVisible=false;
+  Menudisasterref.value.dialogVisible=false
+  menucheck.value.sendialogVisible=false;
+  menuphysics.value.sendialogVisible=false;
+  menupath.value.sendialogVisible=false;
 }
+// const handleSelect = (key,keyPath) => {
+//     switch (key) {
+//     case '1':
 
+//     menumine.value.dialogVisible=true;
+//     menusen.value.sendialogVisible=false;
+//     menucheck.value.sendialogVisible=false;
+//     menuphysics.value.sendialogVisible=false;
+//         break;
+//     case '2':
+//     menumine.value.dialogVisible=false;
+//     menusen.value.sendialogVisible=true;
+//     menucheck.value.sendialogVisible=false;
+//     menuphysics.value.sendialogVisible=false;
+//     break;
+//     case '3':
+//     menumine.value.dialogVisible=false;
+//     menucheck.value.sendialogVisible=true;
+//     menusen.value.sendialogVisible=false;
+//     menuphysics.value.sendialogVisible=false;
+//         break;
+//      case '4':
+//      menumine.value.dialogVisible=false;
+//     menucheck.value.sendialogVisible=false;
+//     menusen.value.sendialogVisible=false;
+//     menuphysics.value.sendialogVisible=true;
+//     default:
+//         break;
+// }
+// }
+defineExpose({showmenum,menumfalse});
 watch(router, (to, from) => {
   router.go(0)
 })

src/view/home.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="apphome"  >
-    <!-- <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">
@@ -56,9 +53,6 @@
         <Dialoges
           ref="lliudialog"
           :addselect="addselect"
-          :valzaiqing="valzaiqing"
-          :headerobj="headerobj"
-          :activeIndex="activeIndex"
           @handleSelect="handleSelect"
           :classradio="classradio" 
         ></Dialoges>
@@ -66,7 +60,6 @@
       </el-main>
 
     </el-container>
-  <!-- </v-scale-screen> -->
   </div>
 </template>
 
@@ -75,21 +68,9 @@ 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";
@@ -154,63 +135,12 @@ const timeFn=()=> {
     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 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(activeIndex.value);
-//   boundary.value.accident4(activeIndex.value);
-// };
-//首页组件调用的方法
-const handindodialoges=()=>{
 
-}
+
 
 const handleSelect = (key) => {
 
@@ -219,29 +149,18 @@ const handleSelect = (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";
      lliudialog.value.classclick( classradio.value);
-    // menumine.value.dialogVisible=false;
-    // menusen.value.sendialogVisible=false;
-    //   break;
+       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":
 

src/view/index/first-left.vue

@@ -272,6 +272,48 @@ const lineChart=()=>{
                     width: 3, // 设置线条宽度
                 },
 
+       },
+       {
+         name: '',
+         type: 'line',
+      showSymbol: false,
+      smooth: true,
+      data: [1,10,120,10,20],
+         itemStyle:{
+           normal:{
+             color: {
+               type: 'linear',
+               x: 0,
+               y: 0,
+               x2: 0,
+               y2: 1,
+               colorStops: [
+               {
+                 offset:1, color: '#ACD6FF ' // 0% 处的颜色
+               },
+               {
+                 offset:0.7, color: '#105CF0 '// 100% 处的颜色
+               },
+               {
+                 offset:0.66, color: '#FF7A00 '// 100% 处的颜色
+               },
+               {
+                 offset:0.2, color: '#FF0000 '// 100% 处的颜色
+               },
+               {
+                 offset:0, color: '#CE0000' // 0% 处的颜色FF7A00
+               }, 
+              
+              ],
+            
+               global: false // 缺省为 false
+             }
+           }
+         },
+         lineStyle: {
+                    width: 3, // 设置线条宽度
+                },
+
        }
      ]
    }

src/view/index/index.vue

@@ -10,16 +10,21 @@
             <li class="fontcolor"> <el-image  :src="bt3" fit="contain"></el-image>灾害对比</li> -->
         </ul>
     </div>
-
+    <firstLeft ref="firstleftref" :classradio="classradio" :aid="aid" />
+    <towright ref="towrightref" :classradio="classradio" :aid="aid" />
      </template>
    <script setup>
 import { ref, onMounted, reactive, } from "vue";
 import {RouterView,RouterLink } from "vue-router"
 import { request, uploadFile } from "@/utils/request";
+import firstLeft  from "./first-left.vue"
+import towright  from "./tow-right.vue"
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
 import bt1 from "@/assets/img/bt1.png"
 import bt2 from "@/assets/img/bt2.png"
 import bt3 from "@/assets/img/bt2.png"
+let firstleftref=ref();
+let towrightref=ref();
 let btnindex=ref(0);
 let emit = defineEmits(['indexchange','hiadden' ])
 let listArray = ref([
@@ -32,17 +37,36 @@ let btnlistshow=ref(false);
 const changeColor=(index)=>{
     btnindex.value=index;
     currentIndex.value = btnindex.value;
-    emit("indexchange", btnindex.value);
+    indexchange(btnindex.value);
+   emit("indexchange", btnindex.value);
     if(btnindex.value==0){
         emit("hiadden", 1);
     }else{
         emit("hiadden", 5);
     }
 }
+const indexchange=(key)=>{
+  if(key==0){
+    firstleftref.value.firstshow=true;
+    towrightref.value.towshow=false;
+  }else if(key==1){
+    firstleftref.value.firstshow=false;
+    towrightref.value.towshow=true;
+  }
+  else{
+    firstleftref.value.firstshow=false;
+    towrightref.value.towshow=false;
+    // threerightref.value.threeshow=false;
+  }
+}
+const hiddfalse=()=>{
+    firstleftref.value.firstshow=false;
+    towrightref.value.towshow=false;
+}
 const showhadend=()=>{
     btnlistshow.value=true;
 }
-     defineExpose({showhadend,changeColor,btnindex});
+     defineExpose({showhadend,changeColor,btnindex,btnlistshow,hiddfalse});
    </script>
    <style  lang="scss" scoped>
 

src/view/result.vue

@@ -12,10 +12,10 @@
                 @change="zdtimechange"
               />
             </div> -->
-          <div class="time">{{ timeline }}</div>
+        <div class="time">{{ timeline }}</div>
       </div>
       <!-- 动画 -->
-   
+
       <div class="L_aside L_aside1 asideg asidegbg leftbgimg1">
         <el-collapse accordion v-model="activeNames" class="bganimation">
           <el-collapse-item name="1" class="imgneon">
@@ -25,53 +25,41 @@
             </template>
             <div class="rg_content">
               <div class="rg-padding">
-            
-              <div class="animation_s">
-              <el-slider
-                :max="100"
-                :min="0"
-                v-model="count"
-                @change="sliderchange"
-              >
-              </el-slider>
-              <!-- <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/> -->
-              <div class="tanniu">
-                <div><el-image :src="t1" fit="contain" ></el-image></div>
-                <div><el-image :src="t2" fit="contain" ></el-image></div>
-                <div><el-image :src="t3" fit="contain" ></el-image></div>
-                
+
+                <div class="animation_s">
+                  <el-slider :max="100" :min="0" v-model="count" @change="sliderchange">
+                  </el-slider>
+                  <!-- <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/> -->
+                  <div class="tanniu">
+                    <div><el-image :src="t1" fit="contain"></el-image></div>
+                    <div><el-image :src="t2" fit="contain"></el-image></div>
+                    <div><el-image :src="t3" fit="contain"></el-image></div>
+
+                  </div>
+                </div>
+
+
               </div>
             </div>
-          
-            
-            </div>
-          </div>
-    
+
           </el-collapse-item>
         </el-collapse>
-  
+
       </div>
-  
+
     </div>
     <div class="result_left results re_pading">
-      <!-- <div class="elimgmn">
-        <div class="bceligmn" @click="hazardtype('1')">
-          <el-image :src="t5" fit="contain"></el-image>
-          <div class="mntext" :title="mntext1">{{ mntext1 }}</div>
-        </div>
-        <div class="mnclose"><el-image :src="t6" fit="contain"></el-image></div> 
-      </div> -->
       <div class="resu_title reimg" @click="hazardtype('1')">
         {{ mntext1 }}
       </div>
       <div class="resultleftxian">
-      <div class="modle">
-      <resultLeft ref="setleftAid" :region="formInline.region" :count="formInline.count" />
-    </div>
-    <!--检测点信息 -->
-    <wdisaster ref="wdisasterref"/>
-  </div>
-              <!-- 检测点 -->
+        <div class="modle">
+          <resultLeft ref="setleftAid" :region="formInline.region" :count="formInline.count" />
+        </div>
+        <!--检测点信息 -->
+        <wdisaster ref="wdisasterref" />
+      </div>
+      <!-- 检测点 -->
     </div>
     <!-- 第二个 -->
     <div class="result_right r results re_pading">
@@ -79,15 +67,15 @@
         {{ mntext2 }}
       </div>
       <div class="resultleftxian">
-      <div class="modle">
-        <resultRight ref="setrightAid" :region="formInline.region" :count="formInline.count" />
-    </div>
-    <!--检测点信息 -->
-    <wdisaster2 ref="wdisasterref2"/>
-  </div>
-              <!-- 检测点 -->
+        <div class="modle">
+          <resultRight ref="setrightAid" :region="formInline.region" :count="formInline.count" />
+        </div>
+        <!--检测点信息 -->
+        <wdisaster2 ref="wdisasterref2" />
+      </div>
+      <!-- 检测点 -->
     </div>
- 
+
   </div>
 </template>
 <script setup>
@@ -99,7 +87,7 @@ import resultLeft from "./result/resultLeft.vue";
 import resultRight from "./result/resultRight.vue";
 import wdisaster from "./result/Wdisaster.vue";
 import wdisaster2 from "./result/Wdisaster2.vue";
-import { timestampToTime,timescount } from "@/js/lindex.js";
+import { timestampToTime, timescount } from "@/js/lindex.js";
 import { vtkmodel } from "@/control/vtkModel.js";
 import t1 from "@/assets/img/t1.png";
 import t2 from "@/assets/img/t2.png";
@@ -116,18 +104,18 @@ const props = defineProps({
     type: String,
   },
 });
-let wdisasterref=ref();
-let wdisasterref2=ref();
+let wdisasterref = ref();
+let wdisasterref2 = ref();
 let resultyem = ref(false);
 let timing = ref(null);
-let leftcontentref=ref();
+let leftcontentref = ref();
 let starttime = ref(1);
 let endtime = ref(60);
 let timenum = ref(2);
-let time=ref();
+let time = ref();
 const isstop = ref(false);
 let aid = ref(Number);
-let oldtime=ref();
+let oldtime = ref();
 let timeline = ref("2024-03-22 09:42:06");
 let setleftAid = ref();
 let setrightAid = ref();
@@ -141,16 +129,18 @@ const formInline = ref({
 const zdtime = ref("");
 const strResultFormatlist = ref([]);
 const accident6 = (key, id) => {
-  aid.value = id;
 
+  aid.value = id;
   if (key == 2) {
     vtkmodel.clearAll();
     resultyem.value = true;
+    console.log(222222);
+    console.log(resultyem.value);
     nextTick(() => {
       wdisasterref.value.lineChart();
       wdisasterref2.value.lineChart2();
-  });
-   
+    });
+
   } else {
     resultyem.value = false;
   }
@@ -169,20 +159,20 @@ function zdtimechange() {
 //滑块
 function sliderchange(val) {
   //fcon.step = count.value;
-//  console.log(val);
+  //  console.log(val);
   newtime();
 }
 // 时间计算
 const newtime = () => {
-  time.value=null;
+  time.value = null;
   console.log(formInline.value.count);
-  time.value=(new Date(oldtime.value).getTime())/1000;
-  if(formInline.value.count==2){
-     let time2=(formInline.value.count-1)*60+time.value;
-    timeline.value=timescount(time2);
-  }else{
-    let time2=(formInline.value.count)*60+time.value;
-    timeline.value=timescount(time2);
+  time.value = (new Date(oldtime.value).getTime()) / 1000;
+  if (formInline.value.count == 2) {
+    let time2 = (formInline.value.count - 1) * 60 + time.value;
+    timeline.value = timescount(time2);
+  } else {
+    let time2 = (formInline.value.count) * 60 + time.value;
+    timeline.value = timescount(time2);
   }
 
 
@@ -191,7 +181,7 @@ const newtime = () => {
 function Prev() {
   isstop.value = false;
   formInline.value.count--;
-     newtime();
+  newtime();
 }
 //播放
 function play(time) {
@@ -310,7 +300,7 @@ onUnmounted(() => {
     clearInterval(timing.value);
   }
 });
-defineExpose({ accident6, initAid, mntext1, mntext2, clickflat, endtime,zdtime,timeline,oldtime });
+defineExpose({ accident6, initAid, mntext1, mntext2, clickflat, endtime, zdtime, timeline, oldtime });
 </script>
 <style scoped lang="scss">
 .heigjie {
@@ -325,14 +315,17 @@ defineExpose({ accident6, initAid, mntext1, mntext2, clickflat, endtime,zdtime,t
     padding: 10px 9px 0 7px;
   }
 }
-.animation_s .el-slider{
+
+.animation_s .el-slider {
   padding: 43px 10px;
 }
-.tanniu{
+
+.tanniu {
   display: flex;
-    justify-content: space-between;
-    align-items: center;
+  justify-content: space-between;
+  align-items: center;
 }
+
 .resultyem {
   width: 100%;
   position: absolute;
@@ -348,28 +341,31 @@ defineExpose({ accident6, initAid, mntext1, mntext2, clickflat, endtime,zdtime,t
   flex: 1;
   position: relative;
   overflow: auto;
-  
+
 }
-.result_left{
+
+.result_left {
   margin: 0 .0781rem 0 .1563rem;
 }
-.result_right{
-  margin: 0 .1563rem 0  .0781rem;
+
+.result_right {
+  margin: 0 .1563rem 0 .0781rem;
 }
+
 .result_left,
 .result_right {
   height: calc(100vh - 154px);
-  background: rgba(26,38,69,0.4);
+  background: rgba(26, 38, 69, 0.4);
 }
 
 .publicleft {
   width: 2.125rem;
-  background: rgba(26,38,69,0.4);
-    margin-left: 0.1563rem;
+  background: rgba(26, 38, 69, 0.4);
+  margin-left: 0.1563rem;
 }
 
 .resultime {
-display: flex;
+  display: flex;
   height: 50px;
   border: 1px solid;
   border-image: linear-gradient(347deg, rgb(16, 92, 240), rgb(18, 48, 102)) 1 1;
@@ -387,7 +383,7 @@ display: flex;
   float: left;
 }
 
-.resultime .time{
+.resultime .time {
   line-height: 50px;
   font-family: Microsoft YaHei UI, Microsoft YaHei UI;
   font-weight: bold;
@@ -402,7 +398,6 @@ display: flex;
 }
 </style>
 <style>
-
 .heigjie .el-form-item__label {
   font-weight: 400;
   font-size: 13px;
@@ -460,10 +455,12 @@ display: flex;
 .wotermn {
   line-height: 34px;
 }
-.resultime .newtime{
+
+.resultime .newtime {
   width: 190px;
 }
-.resultime .newtime .el-input__inner{
+
+.resultime .newtime .el-input__inner {
   line-height: 70px;
   font-family: Microsoft YaHei UI, Microsoft YaHei UI;
   font-weight: bold;
@@ -474,17 +471,19 @@ display: flex;
   font-style: normal;
   text-transform: none;
 }
-.resultime .el-input__wrapper{
-  height:70px;
+
+.resultime .el-input__wrapper {
+  height: 70px;
   background: none !important;
   border: none;
-  box-shadow:none;
+  box-shadow: none;
 }
-.resultime .el-input__prefix{
+
+.resultime .el-input__prefix {
   display: none;
 }
 
-.newtime .el-input{
-  width: 180px !important; 
+.newtime .el-input {
+  width: 180px !important;
 }
 </style>