3.4

src/App.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script setup>
+//import viewIndex from './view/configurator.vue'
 import viewIndex from './view/appmian.vue'
 //import viewIndex from './view/index.vue'
 // import viewIndex from './view/myIndex.vue'

src/view/Dialoges.vue

@@ -902,7 +902,7 @@ box-sizing: border-box;
     height: calc(100vh - 70px);
     position: absolute;
     top: 70px;
-
+    overflow: hidden;
 }
 .asides_content{
 //     background: rgba(13,22,57,0.4);
@@ -1240,6 +1240,8 @@ text-transform: none;
     --el-collapse-content-bg-color:rgba(104,173,255,0) !important;
 }
 .asideg .el-collapse-item__content{
+    height: calc(100vh - 100px);
+    overflow-y: auto;  
 padding:0 !important;
 }
 .asideg  .el-collapse-item__wrap{
@@ -1434,5 +1436,10 @@ border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255,
 .el-select__input{
     font-size: 12px;
 }
+ul, ol {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
 
 </style>

src/view/components/MenuMine.vue

@@ -0,0 +1,705 @@
+<template>
+      <div class="l_Dialog">
+        <el-dialog
+        v-model="dialogVisible"
+        width="470"
+        align-center
+        :modal="false"
+        :close-on-click-modal="false"
+        draggable
+    class="dialog_class bgcolor"
+    >
+    <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">
+        <el-tabs
+          v-model="resultactiveName"
+          type="card"
+          class="demo-tabs"
+          @tab-click="handleClick"
+        >
+          <el-tab-pane label="节点信息" name="first">
+          
+          </el-tab-pane>
+          <el-tab-pane label="巷道信息" name="second">
+            </el-tab-pane>
+          <el-tab-pane label="设备信息" name="third">
+           
+          </el-tab-pane>
+          <el-tab-pane label="网络信息" name="thirds">
+           
+        </el-tab-pane>
+        </el-tabs>
+      </div>
+       <div class="dialog-footer footer_div l_btn">
+        <div class="footerbtn flex1"><div class="borderimg"><el-button @click="addsg('1');">添加</el-button></div></div>
+        <!-- <div class="footerbtn flex1"><div class="borderimg"><el-button  @click="addsg('2')">
+       修改
+        </el-button></div></div> -->
+        <div class="footerbtn flex1"><div class="borderimg"><el-button  @click="dialog.dialogsgdelect=true">
+       删除
+        </el-button></div></div>
+        <div class="footerbtn flex1"><div class="borderimg"><el-button  @click="accident()">
+       确定
+        </el-button></div></div>
+      </div>
+ 
+    </el-dialog>
+      </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 dialogVisible=ref(true);
+let classradio1= ref('Fire');
+</script>
+<style lang="scss" scoped>
+.jc_padding{
+    padding: 18px 10px;
+}
+.line{
+border-bottom: 1px solid rgba(255, 255, 255, 0.20);  
+box-sizing: border-box;
+}
+.L_aside{
+.iconimg{
+    width: 37px;
+    height: 36px;
+    margin:0 7px 0 24px;
+}
+.Frame2{
+    background-image: url(../assets/img/Frame2.png);
+    background-size: 100%;
+    background-position: center;
+}
+.Frame3{
+    background-image: url(../assets/img/Frame3.png);
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.el-collapse,.el-collapse-item__header{
+border: none;
+ul li{
+    text-align: left;
+}
+.inputkuang{
+    height: 30px;
+    width: 100%;
+    background: rgba(13,22,57,0.4);
+position: relative;
+.righttext{
+    display: inline-block;
+    position: absolute;
+    right: 10px;
+    top: 3px;
+}
+}
+
+.inputtext_1{
+    font-weight: 400;
+font-size: 13px;
+color: #FFFFFF;
+line-height: 14px;
+text-align: left;
+font-style: normal;
+text-transform: none; 
+padding: 13px 0 7px 0;
+display: inline-block;
+
+}
+}
+}
+.ddd{
+    margin-top: 20px;
+    .ddd_div{
+        padding: 20px 0;
+        position: relative;
+    }
+    .class_btn{
+        position: absolute;
+    right: 0;
+    top: 21px;
+    }
+  
+}
+.header_l{
+            line-height: 10px;
+            text-align: left;
+            padding: 0 20px;
+            border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+            box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+            border-radius: 0px 0px 0px 0px;
+            .el-image{
+                padding: 10px 10px 0 0;
+            }
+            h4{
+                font-weight: bold;
+                font-size: 12px;
+                color: #68ADFF;
+                line-height: 14px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+            }
+        }
+.tianjia{
+    display: inline-block;
+}
+.el-dialog__title{
+    display: inline-block;
+}  
+.bgcolor{
+    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;
+            }
+        }
+        .el-dialog__footer{
+            position: absolute;
+            bottom: 17px;
+            display: flex;
+            .footerbtn{
+                flex: 1;
+                text-align: center;
+            }
+        }
+    }
+    .my_content1{
+        .el-table .cell{
+            font-weight: 400;
+            font-size: 12px;
+            color: #FFFFFF !important;
+            line-height: 14px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+        }
+
+    }
+    .l_btn .borderimg {
+    width: 109px;
+height: 30px;
+background: rgba(104,173,255,0.3);
+box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+/* border: 1px solid rgba(31, 107, 255, 1); */
+ border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
+
+border-radius: 4px;
+display: flex;
+display: inline-block;
+box-sizing: border-box;
+}
+.borderimg{
+    width: 109px;
+    height: 30px;
+    background: rgba(104,173,255,0.3);
+    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+    /* border: 1px solid rgba(31, 107, 255, 1); */
+    -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+    border-radius: 4px;
+    display: flex;
+    display: inline-block;
+    box-sizing: border-box
+}
+.el-table,.el-table thead th {
+    background-color: rgba(13, 22, 57, 0.96) !important;
+}
+.L_aside{
+    height: calc(100vh - 70px);
+    position: absolute;
+    top: 70px;
+    overflow: hidden;
+}
+.asides_content{
+.el-form-item__label{
+    color: #FFFFFF !important;
+}
+}
+.asdis_btn{
+display: flex;
+margin-top: 9px;
+    .btn{
+        flex: 1;
+        width: 145px;
+        height: 54px;
+        background-image: url(../assets/img/Rectangle5.png) ; 
+        background-repeat: no-repeat;
+        line-height: 54px;
+        .spantext{
+            font-weight: bold;
+            font-size: 12px;
+            color: #FFFFFF;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+
+        }
+    }
+}
+.logs{
+  margin-top: 25px;
+    border-radius: 0px 0px 0px 0px;
+     border-top: 1px solid;
+     border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+     box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+     h4{
+     padding: 10px 0;
+        font-weight: 400;
+font-size: 13px;
+color: #FFFFFF;
+line-height: 14px;
+text-align: left;
+font-style: normal;
+text-transform: none;
+     }
+}
+.logs_pading{
+    padding: 13px 20px 23px 24px;
+}
+.newtime{
+    height: 112px;
+    padding: 38px;
+    font-weight: bold;
+    font-size: 20px;
+    color: #FF0F0F;
+    line-height: 23px;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+}
+.animation_s{
+    padding: 25px;
+}
+.tanniu ul{
+    margin-top: 40px;
+display: flex;
+li{
+    flex: 1;
+    text-align: center;
+    p{
+        text-align: center;
+        font-weight: 400;
+        font-size: 12px;
+        color: #FFFFFF;
+        line-height: 14px;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+}
+.jiancedian{
+    width:371px;
+    position: absolute;
+    right: 0;
+    top: 70px;
+ box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+border-radius: 4px 4px 4px 4px;
+border: 1px solid;
+border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
+}
+</style>
+<style>
+/* //.bgcolor */
+.bgcolor{
+    border-radius: 0px 0px 0px 0px;
+     border: 1px solid;
+     border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+     box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+}
+.dialog_class{
+        background-color: rgba(13, 22, 57, 0.96) !important;
+        width: 482px;
+
+  
+      
+    }
+    .el-dialog__header,.el-dialog__body,.el-dialog__footer{
+padding: 0 !important;
+margin: 0 !important;
+    }
+.el-dialog{
+    --el-dialog-padding-primary: 0px !important;
+    }
+.el-dialog__headerbtn{
+    position: absolute;
+    top: 2px !important;
+    right: 0;
+    padding: 0;
+    width: 40px !important;
+    height: 40px !important;
+    background: 0 0;
+    border: none;
+    outline: 0;
+    cursor: pointer;
+    font-size: var(--el-message-close-size,16px);
+}
+.el-icon{
+    color: #68ADFF !important;
+}
+.l_btn .borderimg {
+    width: 109px;
+height: 30px;
+background: rgba(104,173,255,0.3);
+box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+/* border: 1px solid rgba(31, 107, 255, 1); */
+ border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
+
+border-radius: 4px;
+display: flex;
+display: inline-block;
+box-sizing: border-box;
+}
+.l_btn .el-button{
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    color: #fff;
+    background: rgba(104,173,255,0.3);
+    border: 1px solid rgba(31, 107, 255, 1);
+}
+.class_footer{
+    position: absolute;
+    bottom: 17px;
+}
+.footer_div{
+    height: 90px;
+    padding: 30px 0;
+}
+.l_btn{
+            width: 100%;
+       
+            bottom: 17px;
+            display: flex;
+            border-radius: 4px;
+        
+        }
+        .el-table .el-table__cell{
+            padding: 0 !important;
+            height: 30px;
+    line-height: 30px;
+        }
+        /* .el-table tr,.el-table th.el-table__cell{
+            background-color: rgba(13, 22, 57, 0.96) !important;
+        } */
+        .el-table__row{
+            box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+            border-radius: 0px 0px 0px 0px;
+            border: 1px solid;
+            border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+        }
+        .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+            /* box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2); */
+border-radius: 0px 0px 0px 0px;
+border-bottom: 1px solid;
+border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
+}   
+.oddRow {
+    background-color:  rgba(104, 173, 255, 0.20)!important;
+}
+.evenRow {
+    background-color: rgba(13, 22, 57, 0.96) !important;
+}
+.my_content1 .el-table .cell{
+            font-weight: 400;
+            font-size: 12px;
+            color: #FFFFFF !important;
+            line-height: 14px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+    }
+    .el-table--border .el-table__inner-wrapper::after, .el-table--border::after, .el-table--border::before, .el-table__inner-wrapper::before{
+        height: 0 !important;
+        background-color:rgba(red, green, blue,0) !important;
+    }
+    
+    .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+    background-color:rgba(104,173,255,0) !important;
+} 
+ .el-button:focus, .el-button:hover{
+    background: rgba(104, 173, 255, 1) !important;
+    font-weight: bold;
+    color: #000 !important;
+box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+border-radius: 4px 4px 4px 4px;
+border: 1px solid;
+border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+}
+.el-input__wrapper{
+ 
+    height: 30px;
+    background: rgba(104,173,255,0.3) !important;
+box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2) !important;
+border-radius: 0px 0px 0px 0px;
+border: 1px solid;
+border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+}
+.selecwidth .el-input__wrapper{
+    height: auto !important;
+}
+.selecwidth .el-select__tags{
+max-width: 200px !important;
+}
+.ddd_div .el-input__inner{
+    border: none;
+    /* background: rgba(104,173,255,0.3); */
+  
+}
+.ddd_div .el-form-item__label{
+color: #fff !important;
+}
+.ddd_div .demo-input-suffix{
+    width: 100%;
+}
+ .ddd .el-form-item{
+    width: 80%;
+}
+/* .el-input__inner::placeholder {
+			color: #fff !important;
+		} */
+        .flex1{
+        flex: 1;
+        }
+ .el-radio__input.is-checked .el-radio__inner{
+    border-color: #fff !important;
+    background: #fff !important;
+}
+.el-radio__inner{
+    border: 2px solid #fff !important;
+    background-color: rgba(104, 173, 255, 0)!important;
+    border: 1px solid #68ADFF;
+}
+.asideg .el-collapse-item__header{
+    height: 50px !important;
+    width: 100%;
+
+ background-position: left;
+ border: none !important;
+ font-weight: bold;
+font-size: 15px;
+color: #FFFFFF;
+line-height: 18px;
+text-align: left;
+font-style: normal;
+text-transform: none;
+}
+.leftbgimg .el-collapse-item__header{
+    background-image: url(../assets/img/Group10.png)!important; 
+}
+.asideg1 .jc_header{
+    width: 100%;
+    height: 52px;
+    line-height: 69px;
+    background-image: url(../assets/img/Group24.png)!important; 
+    background-repeat: no-repeat;
+        background-position: center;
+
+}
+.jc_tile{
+    padding-left: 20px;
+}
+.he_pading{
+    padding: 19px 14px 0 31px;
+}
+.asideg1  .el-form-item__label{
+    font-weight: 400;
+    font-size: 13px;
+    color: #FFFFFF;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+.asideg .el-collapse{
+    --el-collapse-header-bg-color: none !important;
+}
+.asideg .el-collapse-item__arrow{
+    margin: 0 8px 0 auto;
+    font-weight: 800;
+    color: #fff !important;
+    font-weight: bold !important;
+    font-size: 20px !important;
+}
+  .el-collapse-item__content{
+    background: rgba(13, 22, 57, 0.2);
+}
+.asideg .el-input__wrapper{
+    background: rgba(104,173,255,0) !important;
+    border:1px solid rgba(31, 107, 255, 1);
+    border-radius: 4px;
+    box-shadow:none !important;
+}
+.asideg .el-input__inner{
+    color:rgba(255, 15, 15, 1);
+    font-weight: 400;
+    font-size: 16px;
+}
+.el-collapse {
+    --el-collapse-header-bg-color:rgba(104,173,255,0) !important;
+    --el-collapse-header-text-color: var(--el-text-color-primary);
+    --el-collapse-header-font-size: 13px;
+    --el-collapse-content-text-color:rgba(104,173,255,0) !important;
+    --el-collapse-content-bg-color:rgba(104,173,255,0) !important;
+}
+.asideg .el-collapse-item__content{
+    height: calc(100vh - 100px);
+    overflow-y: auto;  
+padding:0 !important;
+}
+.asideg  .el-collapse-item__wrap{
+
+ box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+border-radius: 4px 4px 4px 4px;
+border-bottom: 1px solid;
+border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
+}
+#textarea_id{
+    height: 226px;
+    background: rgba(104,173,255,0) !important;
+    border: 1px solid rgba(31, 107, 255, 1);
+    border-radius: 4px;
+    box-shadow: none !important;
+}
+.asides_content .el-form-item__label{
+    color: #FFFFFF !important;
+            font-weight: 400;
+        font-size: 13px;
+        line-height: 33px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+}
+.el-form-item {
+    width: 100%;
+}
+.el-select__wrapper{
+background-color: rgba(104, 173, 255, 0) !important;
+}
+.el-select__wrapper.is-hovering:not(.is-focused),.el-select__wrapper{
+box-shadow: none !important;
+border: 1px solid rgba(31, 107, 255, 1);
+    border-radius: 4px;
+    box-shadow: none !important;
+}
+/* Webkit内核浏览器（Chrome、Safari等）*/
+::-webkit-scrollbar {
+    width: 4px; /* 设置滚动条宽度 */
+    background-color: #161A2A; /* 设置滚动条背景颜色 */
+}
+ 
+/* 滑块样式 */
+::-webkit-scrollbar-thumb {
+    border-radius: 2px; /* 设置滑块边角半径 */
+    background-color: rgba(31, 107, 255, 1); /* 设置滑块背景颜色 */
+}
+ 
+/* 滑块在hover状态时的样式 */
+::-webkit-scrollbar-thumb:hover {
+    background-color: #555; /* 设置滑块在hover状态下的背景颜色 */
+}
+ 
+/* 滚动条轨道样式 */
+::-webkit-scrollbar-track {
+    background-color: rgba(104, 173, 255, 0.4) /* 设置滚动条轨道背景颜色 */
+}
+.classtab .el-tabs--card>.el-tabs__header .el-tabs__item{
+    border-top: 1px solid;
+    border-left: 1px solid;
+    border-bottom: 1px solid;
+    border-image: linear-gradient(180deg, rgb(31, 107, 255), rgba(31, 107, 255, 0.48)) 1 1;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+}
+
+.classtab .el-tabs__item{
+    width:117px;
+    height:48px;
+    padding:0 10px !important;
+    font-weight: bold;
+    font-size: 12px;
+    color: #68ADFF ;
+    line-height: 16px;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+}
+.el-tabs--card>.el-tabs__header,.el-tabs--card>.el-tabs__header,.el-tabs--card>.el-tabs__header .el-tabs__nav{
+    border: none !important;
+}
+.el-tabs{
+    --el-tabs-header-height: 70px  !important;
+}
+
+.classtab .is-active{
+    height:48px;
+    background:radial-gradient(ellipse at 54px 0px, #3AA0FF -37%, #123066 53%);
+    border-radius: 0px 0px 0px 0px;
+     color:#fff!important;
+    border-left: 1px solid rgba(16, 92, 240, 1);
+    border-right: 1px solid rgba(18, 48, 102, 1);
+
+    border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
+}
+.classtab  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
+    border-top-left-radius: 10px !important;
+    border-top-right-radius:10px !important;
+}
+.classtab .el-tabs__content{
+    border: 1px solid;
+     color:rgba(255, 15, 15, 1) !important;
+     border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
+     box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+    position: relative;
+}
+
+.el-select__input{
+    font-size: 12px;
+}
+ul, ol {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+/* 新的css */
+.classtab{
+    display: flex;
+}
+.classtab .el-tabs__item{
+    flex:1
+}
+.xinxi_header{
+    border-bottom: none !important;
+}
+ </style>

src/view/components/MyBoundary.vue

@@ -1,11 +1,9 @@
 <template>
     <!-- 所有弹出框 -->
     <div class="l_Dialog">
-
-
         <!--火灾左侧栏-->
         <div class="common-layout " style="margin: 0;">
-            <el-aside width="591px" class="L_aside L_aside1 asideg asidegbg leftbgimg2 " v-show="boun.collfire">
+            <el-aside width="591px" class="L_aside L_aside1 asideg asidegbg leftbgimg2"  v-show="boun.collfire">
                 <div class="demo-collapse">
                     <el-collapse v-model="coolactiveName1" accordion>
                         <el-collapse-item name="1">
@@ -63,7 +61,7 @@
 
         </div>
         <!-- 突水 -->
-        <div class="common-layout " style="margin: 0;">
+        <div class="common-layout " style="margin: 0;"  >
             <el-aside width="231px" class="L_aside L_aside1 asideg asidegbg leftbgimg0 " v-show="boun.collwater">
                 <div class="demo-collapse">
                     <el-collapse v-model="coolactiveName1" accordion>
@@ -333,7 +331,7 @@ let bformInline = ref({
             label: ' 压力入口',
         },
     ],
-    region: 'Pressure',
+    region: '压力出口',
     options2: [
         {
             value: '压力出口',
@@ -421,6 +419,14 @@ const  bounadd=()=>{
     bformInline.value.temperature='';
     bformInline.value.polcon1='';
     bformInline.value.polcon2='';
+    if (props.classradio == "Fire") {
+        bformInline.value.type='Pressure'
+        } else if (props.classradio == "Water") {
+            bformInline.value.type='边界出口'
+        }else{
+        
+        }
+
 }
 //边界的添加
 const  accidentboun=()=>{
@@ -608,6 +614,7 @@ defineExpose({ boun, accident4,addboundary });
          width: 37px;
          height: 36px;
          margin: 0 7px 0 24px;
+    
      }
 
      .Frame2 {
@@ -822,7 +829,7 @@ defineExpose({ boun, accident4,addboundary });
      height: calc(100vh - 70px);
      position: absolute;
      top: 70px;
-
+     overflow: hidden;
  }
 
  .el-form-item__label {
@@ -899,19 +906,6 @@ defineExpose({ boun, accident4,addboundary });
 
 }
 
-.asideg .el-collapse-item__wrap {
-    height: calc(100vh - 120px);
-    background: rgba(13, 22, 57, 0.4);
-    /* //border: 1px solid; */
-    border-bottom: 1px solid;
-    border-left: 1px solid;
-    border-right: 1px solid;
-    -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;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-    background-color: rgba(13, 22, 57, 0.4);
-}
 
 .leftbgimg2 .el-table tr {
     height: 30px !important;

src/view/components/Sourcedisaster.vue

@@ -2,8 +2,8 @@
   <!-- 所有弹出框 -->
     <div class="l_Dialog bbb" >
     <!--火灾左侧栏-->
-    <div class="common-layout" style="margin: 0;"> 
-        <el-aside width="354px" class="L_aside L_aside1 asideg asidegbg leftbgimg1"  v-show="sour.collfire">
+    <div class="common-layout" style="margin: 0;"  v-show="sour.collfire"> 
+        <el-aside width="354px" class="L_aside L_aside1 asideg asidegbg leftbgimg1" >
           <div class="demo-collapse">
       <el-collapse v-model="coolactiveName1" accordion >
         <el-collapse-item  name="1">
@@ -53,7 +53,7 @@
               <div class="header_l header_z">
       <el-image :src="icon" fit="contain" ></el-image> 
       <h4  class="tianjia"> 灾害源表</h4>
-      <div class="closeimg"><el-image :src="closeimg" fit="contain" ></el-image></div>
+      <div class="closeimg" @click="sdialog.isDisasterfire=false"><el-image :src="closeimg" fit="contain" ></el-image></div>
   </div>   
           <el-table
               :data="tableDatafir"
@@ -72,7 +72,7 @@
     <div class="asdis_btn">
       <div class="flex_a" @click="firinit();sdialog.adddialog=true"><div class="btns"><span class="spantext">添加</span></div></div>
       <div class="flex_a" @click="shanchu('2');sdialog.dialogsgdelect=true"><div class="btns"><span class="spantext">删除</span></div></div>
-      <div class="flex_a"><div class="btns"><span class="spantext">确定</span></div></div>
+      <div class="flex_a"><div class="btns"  @click="sdialog.isDisasterfire=false"><span class="spantext">确定</span></div></div>
   </div>
 
       </div>
@@ -87,7 +87,9 @@
       </el-collapse>
   </div>
   </el-aside>
-  <el-aside width="354px" class="L_aside L_aside1 asideg asidegbg leftbgimg1" v-show="sour.collwater">
+    </div>
+    <div class="common-layout" style="margin: 0;" v-show="sour.collwater"> 
+  <el-aside width="354px" class="L_aside L_aside1 asideg asidegbg leftbgimg1" >
           <div class="demo-collapse">
       <!-- 突水 sour.collwater-->
       <el-collapse v-model="coolactiveName1" accordion  >
@@ -138,7 +140,7 @@
               <div class="header_l header_z">
       <el-image :src="icon" fit="contain" ></el-image>
       <h4  class="tianjia">灾害源表</h4>
-      <div class="closeimg" @click="sdialog.disDisasterwter"><el-image :src="closeimg" fit="contain" ></el-image></div>
+      <div class="closeimg" @click="sdialog.disDisasterwter=false"><el-image :src="closeimg" fit="contain" ></el-image></div>
   </div>   
                       <el-table
               :data="tableData4"
@@ -155,7 +157,7 @@
       <div class="asdis_btn">
       <div class="flex_a" @click="firinit();sdialog.adddwater=true"><div class="btns"><span class="spantext">添加</span></div></div>
       <div class="flex_a" @click="shanchu('2');sdialog.dialogsgdelect=true"><div class="btns"><span class="spantext">删除</span></div></div>
-      <div class="flex_a"><div class="btns"><span class="spantext">确定</span></div></div>
+      <div class="flex_a"  @click="sdialog.disDisasterwter=false"><div class="btns"><span class="spantext">确定</span></div></div>
   </div>
       </div>
           </div>
@@ -975,7 +977,7 @@ text-transform: none;
         height: calc(100vh - 70px);
         position: absolute;
         top: 70px;
-    
+        overflow: hidden;
     }
     .el-form-item__label{
         color: #FFFFFF !important;
@@ -1018,10 +1020,19 @@ text-transform: none;
     }
     </style>
    <style>
+    .el-collapse-item__header{
+      border: 1px solid;
+    -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;
+    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+    border-radius: 0px 0px 0px 0px;
+    background-color: rgba(13, 22, 57, 0.4);
+    }
     .leftbgimg1 .el-collapse-item__header{
       background-image: url(../../assets/img/Group10.png)!important; 
       background-size: cover;
     background-position-x: center !important;
+  
 }
 .xian{
     border: 1px solid;
@@ -1042,7 +1053,6 @@ text-transform: none;
 
 }
 .asideg .el-collapse-item__wrap{
-    height: calc(100vh - 120px);
     background: rgba(13, 22, 57, 0.4);
     /* //border: 1px solid; */
     border-bottom: 1px solid;
@@ -1108,4 +1118,5 @@ text-transform: none;
 .guand_1 .asdis_btn{
     margin-top: -9px;
 }
+
 </style>

src/view/configurator.vue

@@ -0,0 +1,265 @@
+<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">
+                    <div class="ve_timeioc">
+                        <el-image
+                            :src="Vector"
+                            fit="contain"
+                        ></el-image>
+                        <span>返回主界面</span>
+                    </div>
+                </div>
+        </div>
+            </el-header>
+         
+            <el-main>
+             
+            <Menu-Mine></Menu-Mine>
+              
+            </el-main>
+        </el-container>
+    </div>
+  </template>
+  
+  <script setup>
+import { ref, onMounted, reactive,nextTick } from "vue";
+import Vector from "@/assets/img/Vector.png";
+import icon from "@/assets/img/icon.png";
+import logo from "@/assets/logo.png";
+import MenuMine  from "./components/MenuMine.vue"
+const title = "灾情推演软件";
+const activeIndex = ref('1')
+  onMounted(() => {
+  });
+
+
+const handleSelect = (key,keyPath) => {
+    switch (key) {
+    case '1':
+        break;
+    case '2':
+
+    break;
+    case '3':
+ 
+        break;
+     case '4':
+ 
+    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{
+    height: 70px;
+    overflow: hidden;
+    position:absolute;
+    right: 0;
+    display: flex;
+  .ve_time{
+    width: 190px;
+    height: 55px;
+    padding-top: 15px;
+    height: 70px;
+    border-radius: 0px 0px 0px 0px;
+    border-left: 2px solid rgba(12, 97, 197, 0.20);
+    border-right: 2px  solid rgba(12, 97, 197, 0.20);;
+    box-sizing: border-box;
+   // 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;
+      }
+      .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>
+  
+