liuqiao 1 an în urmă
părinte
comite
68da377829

+ 5 - 0
package-lock.json

@@ -6297,6 +6297,11 @@
         }
       }
     },
+    "mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",

+ 1 - 0
package.json

@@ -17,6 +17,7 @@
     "exports-loader": "^1.1.0",
     "jquery": "^3.7.1",
     "js-cookie": "2.2.0",
+    "mitt": "^3.0.1",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
     "sass": "^1.69.7",

BIN
src/assets/img/Group10.png


BIN
src/assets/img/Group24.png


BIN
src/assets/img/Group9.png


BIN
src/assets/img/Rectangle399.png


BIN
src/assets/img/b1.png


BIN
src/assets/img/colse.png


+ 34 - 21
src/components/layout/NavigateBar.vue

@@ -27,23 +27,9 @@
         >
             <el-menu-item index="1">灾害源设置</el-menu-item>
             <el-menu-item index="2">边界设置</el-menu-item>
-            <!-- <el-sub-menu index="2">
-            <template #title>Workspace</template>
-            <el-menu-item index="2-1">item one</el-menu-item>
-            <el-menu-item index="2-2">item two</el-menu-item>
-            <el-menu-item index="2-3">item three</el-menu-item>
-            <el-sub-menu index="2-4">
-                <template #title>item four</template>
-                <el-menu-item index="2-4-1">item one</el-menu-item>
-                <el-menu-item index="2-4-2">item two</el-menu-item>
-                <el-menu-item index="2-4-3">item three</el-menu-item>
-            </el-sub-menu>
-            </el-sub-menu> -->
+           
             <el-menu-item index="3" >灾害推演</el-menu-item>
             <el-menu-item index="4">推演结果</el-menu-item>
-            <!-- <el-menu-item index="5" >灾害源设置</el-menu-item>
-            <el-menu-item index="6">模拟参数</el-menu-item>
-            <el-menu-item index="7" >灾害推演</el-menu-item> -->
         </el-menu>
         <div class="ve_right">
             <div class="ve_time">
@@ -62,24 +48,51 @@
 </template>
 
 <script setup>
-import { computed,ref,onMounted } from "vue";
+import { computed,ref,onMounted,toRefs } from "vue";
 import { useStore } from "vuex";
 import logo from "@/assets/logo.png";
 import Vector from "@/assets/img/Vector.png";
 import {timestampToTime} from '@/js/lindex.js'
-
+import mitts from "@/utils/Bus"
+const props= defineProps({
+    monitor: {
+        type: Boolean,
+        default: false,
+    },
+    collfire: {
+        type: Boolean,
+        default: false,
+    }
+ });
+ const emits =defineEmits(['upmonitor']);
+ const {monitor} =toRefs(props);
 const title = "灾情推演软件";
 const activeIndex = ref('1')
 const activeIndex2 = ref('1')
 const handleSelect = (key,keyPath) => {
-  console.log(key, keyPath)
+    console.log(props.monitor);
+    switch (key) {
+    case '1':
+        console.log(1);
+        break;
+    case '2':
+    break;
+    case '3':
+        console.log(2);
+        break;
+     case '4':
+     emits("upmonitor",true)
+    // props.monitor=true;
+    default:
+        break;
+}
 }
 
 onMounted(() => {
     
-const timestamp = new Date().getTime();
-console.log(timestamp);
-    timestampToTime(1709199092000)
+// const timestamp = new Date().getTime();
+// console.log(timestamp);
+//     timestampToTime(1709199092000)
 });
 
 </script>

+ 3 - 1
src/main.js

@@ -11,15 +11,17 @@ import 'element-plus/theme-chalk/index.css' // 引入整个Element样式
 import './style/index.css' // 引入整个Element样式
 import "normalize.css/normalize.css";//重置样式
 import '@/js/lindex.js'
+// import mitt from 'mitt'
 
 //import '"element-plus/dist/index.css'
 //创建一个路由.user(router)
-console.log($);
 createApp(App)
     .use(router)
     .use(ElementUI)
     .use(createPinia)
+    // .use(mitt)
     //.use(Vuex)
     .mount('#app')
 VueElement.prototype.$echarts = echarts;
+// app.config.globalProperties.$mitt=mitt();
 

+ 3 - 0
src/utils/Bus.js

@@ -0,0 +1,3 @@
+import mitt from 'mitt'
+const mitts = mitt();
+export default mitts;

+ 49 - 32
src/view/Dialoges.vue

@@ -20,7 +20,7 @@
       </div>
     </template>
    <div class="my_content">
-    <el-radio-group v-model="classradio" class="radio-group">
+    <el-radio-group v-model="classradio1" class="radio-group">
     <el-radio label="Fire">火灾</el-radio>
     <el-radio label="Water">突水</el-radio>
     <el-radio label="9">瓦斯爆炸</el-radio>
@@ -112,7 +112,7 @@
   </el-dialog>
   <!--火灾左侧栏-->
   <div class="common-layout" style="margin: 0;"> 
-      <el-aside width="300px" class="L_aside asideg asidegbg">
+      <el-aside width="278px" class="L_aside asideg asidegbg  leftbgimg">
         <div class="demo-collapse">
     <el-collapse v-model="coolactiveName" accordion v-show="leftcoll.collfire">
       <el-collapse-item  name="1">
@@ -251,7 +251,7 @@
     </el-collapse>
   </div>
   <!-- 推演结果 -->
-  <div class="result">
+  <div class="result" v-show="monitor">
     <el-tabs
     v-model="resultactiveName"
     type="card"
@@ -264,14 +264,13 @@
     <el-tab-pane label="指定时间" name="second"> <div class="newtime">{{newtime}}</div></el-tab-pane>
     <el-tab-pane label="动画演示" name="third">
         <div class="animation_s">
-        <!-- <el-slider
+        <el-slider
               :max="endtime"
               :min="starttime"
               v-model="count"
               @change="sliderchange"
-              :stroke-width="2"
-            ></el-slider> -->
-            <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/>
+            ></el-slider>
+            <!-- <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/> -->
             <div class="tanniu">
                 <ul>
                     <li> <el-image :src="t1" fit="contain" ></el-image><p>后退</p></li>
@@ -289,7 +288,7 @@
   </div>
  <!-- 监测点 -->
  <!-- 监测点 -->
- <div class="jiancedian asideg1 ">
+ <div class="jiancedian asideg1 " v-show="monitor">
         <div class="jc_header he_pading color1">
             
             <el-form-item label="污染物选择:" >
@@ -305,6 +304,7 @@
         </div>
         <div class="jc_content tablecolor">
             <div class="jc_padding">
+             <div class="xian">
                 <el-table
         :data="tableData2"
         style="width: 100%"
@@ -317,6 +317,7 @@
     <el-table-column prop="name" label="水位(m)"  />
     <el-table-column prop="name" label="流量(m³/s)"/>
   </el-table>
+</div>
             </div>
             <div class="jc_header color1">
                 <span class="jc_tile">锋面定义</span>
@@ -337,16 +338,29 @@ import t1 from "@/assets/img/t1.png";
 import t2 from "@/assets/img/t2.png";
 import t3 from "@/assets/img/t3.png";
 import t4 from "@/assets/img/t4.png";
+import mitts from "@/utils/Bus"
 import {timestampToTime} from '@/js/lindex.js'
+const props= defineProps({
+    addselect: {
+        type: Function,
+        required: true
+
+
+    },
+
+ });
 const dialogVisible = ref(true);
-const classradio = ref('Fire');
+const classradio = ref();
+let classradio1= ref('Fire');
 const leftcoll = ref({
     collfire:false,
     collwater:false,
 });
+const monitor = ref(false);
 const dialog=ref({
     dialogVisible_fire:false,
     jianced:true,
+    monitor:false,
 })
 let coolactiveName=ref(["1","2"]);
 let rizhi=ref({
@@ -442,13 +456,19 @@ const handleCurrentChange= ({row, rowIndex}) =>{
 }
 // 类型选择
 const classclick= () =>{
-    console.log(classradio.value);
   dialogVisible.value = false; 
-  dialog.value.dialogVisible_fire = true
+  dialog.value.dialogVisible_fire = true;
+  classradio.value=classradio1.value;
+  props.addselect();
+ // sessionStorage.setItem('classradio',classradio.value);
+
 }
 // 事故确定列表
 const accident=()=>{
     dialog.value.dialogVisible_fire=false;
+  
+}
+const  accident2=()=>{
     if(classradio.value=="Fire"){
         leftcoll.value.collfire=true;
 
@@ -462,6 +482,7 @@ onMounted(() => {
     newtime.value= timestampToTime(timestamp);
 });
 
+defineExpose({monitor,accident2,leftcoll,classradio});
 </script>
 <style lang="scss" scoped>
 .jc_padding{
@@ -531,7 +552,9 @@ display: inline-block;
     right: 0;
     top: 21px;
     }
-    .header_l{
+  
+}
+.header_l{
             line-height: 10px;
             // height: 40px;
             text-align: left;
@@ -553,7 +576,6 @@ display: inline-block;
                 text-transform: none;
             }
         }
-}
 .tianjia{
     display: inline-block;
 }
@@ -670,11 +692,11 @@ box-sizing: border-box;
 
 }
 .asides_content{
-    background: rgba(13,22,57,0.4);
-box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
-border-radius: 0px 0px 0px 0px;
-border: 1px solid;
-border-image: linear-gradient(359deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0)) 1 1;
+//     background: rgba(13,22,57,0.4);
+// box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+// border-radius: 0px 0px 0px 0px;
+// border: 1px solid;
+// border-image: linear-gradient(359deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0)) 1 1;
 .el-form-item__label{
     color: #FFFFFF !important;
 }
@@ -752,7 +774,7 @@ li{
 }
 }
 .jiancedian{
-    width:380px;
+    width:371px;
     position: absolute;
     right: 0;
     top: 70px;
@@ -858,11 +880,10 @@ 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(13, 22, 57, 0.96) !important;
+    background-color:  rgba(104, 173, 255, 0.20)!important;
 }
 .evenRow {
-    background-color:  rgba(104, 173, 255, 0.20)!important;
+    background-color: rgba(13, 22, 57, 0.96) !important;
 }
 .my_content1 .el-table .cell{
             font-weight: 400;
@@ -942,14 +963,16 @@ text-align: left;
 font-style: normal;
 text-transform: none;
 }
-.asidegbg .el-collapse-item__header{
+.leftbgimg .el-collapse-item__header{
     background-image: url(../assets/img/Group10.png)!important; 
 }
 .asideg1 .jc_header{
     width: 100%;
-    height: 69px;
+    height: 52px;
     line-height: 69px;
-    background-image: url(../assets/img/Group9.png)!important; 
+    background-image: url(../assets/img/Group24.png)!important; 
+    background-repeat: no-repeat;
+        background-position: center;
 
 }
 .jc_tile{
@@ -1130,13 +1153,7 @@ text-align: left;
 font-style: normal;
 text-transform: none;
 }
-.tablecolor .el-table{
-     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);
-    border-radius: 0px 0px 0px 0px;
-   background-color:  rgba(13, 22, 57, 0.4);
-} 
+
 .jc_padding .el-table tr{
     height:40px;
     background-color: none;

+ 242 - 7
src/view/appmian.vue

@@ -1,13 +1,59 @@
 <template>
     <div class="appmian">
-
         <el-container>
-            <el-header >
-                <navigate-bar></navigate-bar>
+            <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_time">
+                        <span class="l_huoqing">火灾事故2023.02.26</span>
+                        <span class="l_time">2024-03-20 11:30:20</span>
+                    </div>
+                    <div class="ve_timeioc">
+                        <el-image
+                            :src="Vector"
+                            fit="contain"
+                        ></el-image>
+                        <span>模型库</span>
+                    </div>
+                </div>
+        </div>
             </el-header>
          
             <el-main>
-                <Dialoges/>
+                <Dialoges ref="lliudialog"  :addselect="addselect"></Dialoges>
+                <Sourcedisaster ref="sourcedis" :classradio="classradio"></Sourcedisaster>
+                <boundary :classradio="classradio"></boundary>
                 <!-- <el-scrollbar
                     style="
                         padding: 20px;
@@ -24,12 +70,58 @@
   
   <script setup>
 import { ref, onMounted, reactive,nextTick } from "vue";
-import NavigateBar from "@/components/layout/NavigateBar.vue";
+// import NavigateBar from "@/components/layout/NavigateBar.vue";
 import Dialoges  from "./Dialoges.vue"
-
+import logo from "@/assets/logo.png";
+import Sourcedisaster  from "./components/Sourcedisaster.vue"
+import boundary  from "./components/boundary.vue"
+import Vector from "@/assets/img/Vector.png";
+import {timestampToTime} from '@/js/lindex.js'
+import mitts from "@/utils/Bus"
+let lliudialog=ref();
+let sourcedis=ref();
+const title = "灾情推演软件";
+const activeIndex = ref('1')
+const activeIndex2 = ref('1')
+let classradio=ref()
   onMounted(() => {
   });
-
+// 
+const addselect=()=>{
+    classradio.value=lliudialog.value.classradio;
+    console.log(111)
+}
+const handleSelect = (key,keyPath) => {
+    switch (key) {
+    case '1':
+    sourcedis.value.accident3();
+    lliudialog.value.leftcoll.collfire=false;
+     lliudialog.value.leftcoll.collwater=false;
+     lliudialog.value.monitor=false;
+        break;
+    case '2':
+    sourcedis.value.sour.collfire=false;
+    sourcedis.value.sour.collwater=false;
+    lliudialog.value.leftcoll.collfire=false;
+     lliudialog.value.leftcoll.collwater=false;
+     lliudialog.value.monitor=false;
+    break;
+    case '3':
+    sourcedis.value.sour.collfire=false;
+    sourcedis.value.sour.collwater=false;
+    lliudialog.value.accident2();
+    lliudialog.value.monitor=false;
+        break;
+     case '4':
+     sourcedis.value.sour.collfire=false;
+    sourcedis.value.sour.collwater=false;
+     lliudialog.value.leftcoll.collfire=false;
+     lliudialog.value.leftcoll.collwater=false;
+     lliudialog.value.monitor=true;
+    default:
+        break;
+}
+}
   
   </script>
   
@@ -47,6 +139,149 @@ import Dialoges  from "./Dialoges.vue"
     z-index: 206;
     top: 0;
     }
+}
+
+.ve_menu_logo {
+    width: 100%;
+    height:70px;
+    background: #0D1639;
+    white-space: nowrap;
+    text-align: left;
+    overflow: hidden;
+    display: flex;
+    background: #0D1639;
+    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+    border-radius: 0px 0px 0px 0px;
+    border-bottom: 1px solid;
+    box-sizing: border-box;
+    border-image: linear-gradient(28deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0)) 1 1;
+    .ve_title{
+     
+    }
+    .ve_logo_img {
+        padding-left: 30px;
+        height: 100%;
+        display: inline-block;
+        box-sizing: border-box;
+        vertical-align: middle;
+        padding: 15px;
+    }
+    .ve_logo_title {
+        width: 160px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    margin: 0;
+    vertical-align: middle;
+    color: #68ADFF;
+    font-size: 20px;
+    }
+    .el-menu-demo{
+        width:60% !important;
+   height: 70px;
+   border: none !important;
+   background: rgba(12,97,197,0);
+   .el-menu-item{
+    position: relative;
+    width: 97px;
+    font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+    font-weight: bold;
+    font-size: 13px;
+    color: #68ADFF;
+    line-height: 15px;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+    width: 110px;
+    height: 70px;
+    border-radius: 0px 0px 0px 0px;
+  border:none;
+   }
+   .is-active{
+    width: 110px;
+    height: 70px;
+    background:radial-gradient(ellipse at 54px 0px, #3AA0FF -37%, #123066 53%);
+    border-radius: 0px 0px 0px 0px;
+     border: 1px solid;
+    border-left: 1px solid rgba(16, 92, 240, 1);
+    border-right: 1px solid rgba(18, 48, 102, 1);
+     border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
+    &:after {
+    width: 24px;
+    height: 1px;
+    background-color: #fff;
+    -webkit-transition: all ease-out 0.2s;
+    transition: all ease-out 0.2s;
+    content: "";
+    position: absolute;
+    left: 50%;
+    bottom: 15px;
+    webkit-transform: translate(-50%, 0%);
+    -moz-transform: translate(-50%,0%);
+    transform: translate(-50%, 0%);
+}
+   }
+}
+.ve_right{
+    width: 350px;
+    height: 70px;
+    overflow: hidden;
+    position:absolute;
+    right: 0;
+    display: flex;
+  .ve_time{
+    width: 190px;
+    height: 55px;
+    padding-top: 15px;
+    height: 70px;
+    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>

+ 659 - 0
src/view/components/Sourcedisaster.vue

@@ -0,0 +1,659 @@
+<template>
+    <!-- 所有弹出框 -->
+      <div class="l_Dialog" >
+      <!--火灾左侧栏-->
+      <div class="common-layout" style="margin: 0;"> 
+          <el-aside width="354px" class="L_aside asideg asidegbg leftbgimg1"  v-show="sour.collfire">
+            <div class="demo-collapse">
+        <el-collapse v-model="coolactiveName1" accordion >
+          <el-collapse-item  name="1">
+            <template #title>
+                <el-icon class="iconimg Frame2" fit="contain" ></el-icon>  
+              火灾<el-icon class="header-icon">
+                <info-filled />
+              </el-icon>
+            </template>
+            <div class="asides_content">
+                <div class="jc_content tablecolor">
+             
+            <div class="jc_padding">
+                <div class="xian btncolor" >
+             
+                        <el-table
+                :data="tableData2"
+                style="width: 100%"
+                @current-change= "handleCurrentChange"
+                :row-class-name="tableRowClassName"
+                :header-cell-style="{'background':'rgba(13, 22, 57, 0.96) '}"
+
+                >
+            <el-table-column prop="date" label="选择巷道" width="130" />
+            <el-table-column prop="name" label="位置" width="70" />
+            <el-table-column label="操作" width="100">
+         <template #default="scope">
+           <el-button
+             size="small"
+             type="success"
+             @click.stop="handlexiugai(scope.$index, scope.row)"
+             >查看</el-button
+           >
+          
+         </template>
+       </el-table-column>
+        </el-table>
+        <div class="asdis_btn">
+        <div class="flex_a"><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"><span class="spantext">确定</span></div></div>
+    </div>
+        </div>
+                <!--  -->
+                <div class="xian" style="margin-top: 20px;">
+                <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>   
+                        <el-table
+                :data="tableData2"
+                style="width: 100%"
+                @current-change= "handleCurrentChange"
+                :row-class-name="tableRowClassName"
+                :header-cell-style="{'background':'rgba(13, 22, 57, 0.96) '}"
+
+                >
+            <el-table-column prop="date" label="时间" width="70" />
+            <el-table-column prop="name" label="温度℃" width="70" />
+            <el-table-column prop="address" label="污染物1浓度" width="100" />
+            <el-table-column prop="address2" label="污染物2浓度" width="100" />
+        </el-table>
+        <div class="asdis_btn">
+        <div class="flex_a"><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"><span class="spantext">确定</span></div></div>
+    </div>
+        </div>
+            </div>
+            
+        <div style="height:200px"></div>
+        </div>
+
+            </div>
+        
+          </el-collapse-item>
+        </el-collapse>
+    </div>
+    </el-aside>
+    <el-aside width="354px" class="L_aside asideg asidegbg leftbgimg1" v-show="sour.collwater">
+            <div class="demo-collapse">
+        <!-- 突水 -->
+        <el-collapse v-model="coolactiveName1" accordion  >
+          <el-collapse-item  name="1">
+            <template #title>
+                <el-icon class="iconimg Frame3" fit="contain" ></el-icon>  
+              突水<el-icon class="header-icon">
+                <info-filled />
+              </el-icon>
+            </template>
+            <div class="asides_content">
+                <div class="jc_content tablecolor">
+             
+            <div class="jc_padding">
+                <div class="xian btncolor" >
+             
+                        <el-table
+                :data="tableData2"
+                style="width: 100%"
+                @current-change= "handleCurrentChange"
+                :row-class-name="tableRowClassName"
+                :header-cell-style="{'background':'rgba(13, 22, 57, 0.96) '}"
+
+                >
+            <el-table-column prop="date" label="选择巷道" width="130" />
+            <el-table-column prop="name" label="位置" width="70" />
+            <el-table-column label="操作" width="100">
+         <template #default="scope">
+           <el-button
+             size="small"
+             type="success"
+             @click.stop="handlexiugai(scope.$index, scope.row)"
+             >查看</el-button
+           >
+          
+         </template>
+       </el-table-column>
+        </el-table>
+        <div class="asdis_btn">
+        <div class="flex_a"><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"><span class="spantext">确定</span></div></div>
+    </div>
+        </div>
+                <!-- 灾害源表 -->
+                <div class="xian" style="margin-top: 20px;">
+                <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>   
+                        <el-table
+                :data="tableData4"
+                style="width: 100%"
+                @current-change= "handleCurrentChange"
+                :row-class-name="tableRowClassName"
+                :header-cell-style="{'background':'rgba(13, 22, 57, 0.96) '}"
+
+                >
+            <el-table-column prop="date" label="时间"  />
+            <el-table-column prop="name" label="突水量(m³/s)" />
+        </el-table>
+        <div class="asdis_btn">
+        <div class="flex_a"><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"><span class="spantext">确定</span></div></div>
+    </div>
+        </div>
+            </div>
+            
+        <div style="height:200px"></div>
+        </div>
+
+            </div>
+        
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+
+          </el-aside>
+       
+      </div>
+  
+      </div>
+    </template>
+    
+    <script setup>
+    import { computed,ref,onMounted,reactive } from "vue";
+    import { useStore } from "vuex";
+    import icon from "@/assets/img/icon.png";
+    import closeimg from "@/assets/img/colse.png";
+    import { ElMessage,ElButton, ElDialog,ElSelect } from 'element-plus'
+    const props= defineProps({
+        classradio: {
+        type: String,
+        // default: '',
+    },
+
+ });
+    const dialogVisible = ref(true);
+const sour = ref({
+    collfire:false,
+    collwater:false,
+});
+
+let coolactiveName1=ref(["1","2"]);
+
+const tableRowClassName = ({row, rowIndex}) =>{
+    if (rowIndex%2 != 0) {
+        return 'evenRow';
+    }
+    return 'oddRow';
+  
+}
+const tableData = [
+  {
+    id:1,
+    date: '01',
+    name: '首次火灾事故',
+    address: 'No. 189, Grove S',
+  },
+  {
+    id:2,
+    date: '02',
+    name: 'T首次火灾事故om',
+    address: 'No. 189, Grove St',
+  },
+  {
+    id:3,
+    date: '03',
+    name: '首次火灾事故',
+    address: 'No. 189, Grove St ',
+  },
+
+]
+const tableData2 = [
+  {
+   
+    date: '15.30',
+    name: '35',
+    address: '20%',
+    address2: '10%',
+  },
+  {
+   
+   date: '15.30',
+   name: '35',
+   address: '20%',
+   address2: '10%',
+ },
+ {
+   
+   date: '15.30',
+   name: '35',
+   address: '20%',
+   address2: '10%',
+ },
+   {
+   
+   date: '15.30',
+   name: '35',
+   address: '20%',
+   address2: '10%',
+ },
+
+]
+const tableData4=[
+  {
+   
+    date: '15.30',
+    name: '100',
+  },
+  {
+   
+   date: '15.30',
+   name: '35',
+ },
+ {
+   
+   date: '15.30',
+   name: '35',
+ },
+   {
+   
+   date: '15.30',
+   name: '35',
+ },
+]
+const  accident3=()=>{
+    console.log(props.classradio);
+    if(props.classradio=="Fire"){
+        sour.value.collfire=true;
+
+    }else if(props.classradio=="Water"){
+        sour.value.collwater=true;
+    }
+}
+onMounted(() => {
+  });
+    defineExpose({sour,accident3});
+    </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;
+            }
+        
+        }
+.tianjia{
+    display: inline-block;
+}
+    .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;
+        color: rgba($color: #FFFFFF, $alpha: 0.8);
+    }
+    }
+    
+    .inputtext_1{
+        font-weight: 400;
+    font-size: 13px;
+    color: #FFFFFF;
+    line-height: 14px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none; 
+    padding: 13px 0 7px 0;
+    display: inline-block;
+    
+    }
+    }
+    }
+    .ddd{
+        margin-top: 20px;
+        .ddd_div{
+            padding: 20px 0;
+            position: relative;
+        }
+        .class_btn{
+            position: absolute;
+        right: 0;
+        top: 21px;
+        }
+        .header_l{
+                line-height: 10px;
+                // height: 40px;
+                text-align: left;
+                padding: 0 20px;
+                // border-bottom: 1px solid;
+                border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+                box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+                border-radius: 0px 0px 0px 0px;
+                .el-image{
+                    padding: 10px 10px 0 0;
+                }
+                h4{
+                    font-weight: bold;
+                    font-size: 12px;
+                    color: #68ADFF;
+                    line-height: 14px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                }
+            }
+    }
+    .tianjia{
+        display: inline-block;
+    }
+    .el-dialog__title{
+        display: inline-block;
+    }  
+    .bgcolor{
+        // width: 482px;
+        box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+        border-radius: 0px 0px 0px 0px;
+        border: 1px solid;
+        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+    }
+    .dialog_class{
+            .my-header{
+                line-height: 10px;
+                height: 40px;
+                text-align: left;
+                padding: 0 20px;
+                border-bottom: 1px solid;
+                border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+                box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+                border-radius: 0px 0px 0px 0px;
+                .el-image{
+                    padding: 10px 10px 0 0;
+                }
+                h4{
+                    font-weight: bold;
+                    font-size: 12px;
+                    color: #68ADFF;
+                    line-height: 14px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                }
+            }
+            .my_content{
+                width: 100%;
+                height: 90px;
+                box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+                border-radius: 0px 0px 0px 0px;
+                position: relative;
+               
+                .radio-group{
+                    display: flex;
+                    justify-content: center;
+                    .el-radio{
+                        flex: 1;
+                        justify-content: center;
+                        font-weight: bold;
+                            font-size: 12px;
+                            color: #FFFFFF;
+                            line-height: 14px;
+                      
+                    }
+                  
+                }
+            }
+            .el-dialog__footer{
+                position: absolute;
+                bottom: 17px;
+                display: flex;
+                .footerbtn{
+                    flex: 1;
+                    text-align: center;
+                }
+            }
+        }
+        .my_content1{
+            .el-table .cell{
+                font-weight: 400;
+                font-size: 12px;
+                color: #FFFFFF !important;
+                line-height: 14px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+            }
+    
+        }
+        .l_btn .borderimg {
+        width: 109px;
+    height: 30px;
+    background: rgba(104,173,255,0.3);
+    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+    /* border: 1px solid rgba(31, 107, 255, 1); */
+     border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
+    
+    border-radius: 4px;
+    display: flex;
+    display: inline-block;
+    box-sizing: border-box;
+    }
+    .borderimg{
+        width: 109px;
+        height: 30px;
+        background: rgba(104,173,255,0.3);
+        box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+        /* border: 1px solid rgba(31, 107, 255, 1); */
+        -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+        border-radius: 4px;
+        display: flex;
+        display: inline-block;
+        box-sizing: border-box
+    }
+    .el-table,.el-table thead th {
+        background-color: rgba(13, 22, 57, 0.96) !important;
+    }
+    .L_aside{
+        height: calc(100vh - 70px);
+        position: absolute;
+        top: 70px;
+    
+    }
+    .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-size: cover;
+             background-position-x: center !important;
+            line-height: 54px;
+            .spantext{
+                font-weight: bold;
+                font-size: 12px;
+                color: #FFFFFF;
+                text-align: center;
+                font-style: normal;
+                text-transform: none;
+    
+            }
+        }
+    }
+ 
+  
+  
+    .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>
+    .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;
+    -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);
+}
+.header_l{
+    position: relative;
+}
+.header_l .closeimg{
+
+    position: absolute;
+    top: 10px;
+    right: 0;
+
+}
+.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);
+}
+.leftbgimg1 .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;
+
+
+}
+.btncolor .el-button{
+    background-color: rgba(104,173,255,0);
+    font-weight: 400;
+    font-size: 12px;
+    color: #FFF500;
+    line-height: 14px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    border: none;
+}
+.btncolor .el-button:focus, .el-button:hover{
+    background-color: none;
+    background-color: rgba(104,173,255,0);
+}
+.btncolor .el-table__header{
+    margin: 0 14px
+}
+</style>

+ 598 - 0
src/view/components/boundary.vue

@@ -0,0 +1,598 @@
+<template>
+    <!-- 所有弹出框 -->
+      <div class="l_Dialog" >
+      <!--火灾左侧栏-->
+      <div class="common-layout " style="margin: 0;"> 
+          <el-aside width="591px" class="L_aside asideg asidegbg leftbgimg2 "  v-show="boun.collfire">
+            <div class="demo-collapse">
+        <el-collapse v-model="coolactiveName1" accordion>
+          <el-collapse-item  name="1">
+            <template #title>
+                <el-icon class="iconimg Frame2" fit="contain" ></el-icon>  
+              火灾<el-icon class="header-icon">
+                <info-filled />
+              </el-icon>
+            </template>
+            <div class="asides_content">
+                <div class="jc_content tablecolor">
+             
+            <div class="jc_padding font12">
+                <div class="xian btncolor" >
+             
+                        <el-table
+                :data="tableData"
+                style="width: 100%"
+                @current-change= "handleCurrentChange"
+                :row-class-name="tableRowClassName"
+                :header-cell-style="{'background':'rgba(13, 22, 57, 0.96) '}"
+
+                >
+            <el-table-column prop="date" label="节点选择"  />
+            <el-table-column prop="name" label="边界类型"  />
+            <el-table-column prop="date" label="流量(m³/s)" width="80" />
+            <el-table-column prop="name" label="压强(pa)" width="70" />
+            <el-table-column prop="date" label="温度(℃)"  />
+            <el-table-column prop="name" label="污染物1浓度" width="95" />
+            <el-table-column prop="date" label="污染物2浓度" width="95" />
+        </el-table>
+        <div class="asdis_btn">
+        <div class="flex_a"><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="dialog.dialogVisible = true"><span class="spantext">修改</span></div></div>
+    </div>
+        </div>
+            </div>
+            
+        </div>
+
+            </div>
+        
+          </el-collapse-item>
+        </el-collapse>
+        
+      </div>
+
+          </el-aside>
+       
+      </div>
+  <!-- 修改 -->
+  <el-dialog
+    v-model="dialog.dialogVisible"
+    width="482"
+    :before-close="handleClose"
+    :modal="false"
+    :close-on-click-modal="false"
+    draggable
+ class="dialog_class bgcolor  foter_l"
+  >
+
+  <template #header="{titleId, titleClass }">
+      <div class="my-header">
+        <el-image :src="icon" fit="contain" ></el-image>
+        <h4 :id="titleId" :class="titleClass">修改</h4>
+       
+      </div>
+    </template>
+    <div class="addye">
+    <el-form   class="demo-form-inline">
+             <div class="l_padding input" style="padding:20px 20px 20px 24px; ">
+                <!-- <el-form-item label="节点选择" >
+                <el-select v-model="formInline.region" placeholder="请选择">
+                    <el-option
+                        v-for="item in strResultFormatlist"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.value"
+                    ></el-option>
+                </el-select>
+            </el-form-item> -->
+            <!-- <el-form-item label="Activity zone">
+      <el-select v-model="formInline.region" placeholder="please select">
+        <el-option label="Zone one" value="shanghai" />
+      </el-select>
+    </el-form-item> -->
+                <!-- <el-form-item label="边界类型" >
+                <el-select v-model="formInline.region" placeholder="请选择">
+                    <el-option
+                        v-for="item in strResultFormatlist"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.value"
+                    ></el-option>
+                </el-select>
+            </el-form-item> -->
+       
+        <ul>
+            <li><span class="inputtext_1">流量(m³/s)</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" /></div>
+        </li>
+        <li><span class="inputtext_1">压强(pa)</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" /></div>
+        </li>
+        <li><span class="inputtext_1">温度(℃)</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" /></div>
+        </li>
+        <li><span class="inputtext_1">污染物1浓度</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" /></div>
+        </li>
+        <li><span class="inputtext_1">污染物2浓度</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" /></div>
+        </li>
+        
+        </ul>
+    </div> 
+  </el-form>
+  <div class="dialog-footer footer_div l_btn">
+        <div class="footerbtn flex1"><div class="borderimg"><el-button @click="dialog.dialogVisible = false">添加</el-button></div></div>
+        <div class="footerbtn flex1"><div class="borderimg"><el-button  @click="accident()">
+       确定
+        </el-button></div></div>
+      </div>
+  </div>
+  </el-dialog>
+      </div>
+    </template>
+    
+    <script setup>
+    import { computed,ref,onMounted,reactive } from "vue";
+    import { useStore } from "vuex";
+    import icon from "@/assets/img/icon.png";
+    import closeimg from "@/assets/img/colse.png";
+    import { ElMessage,ElButton, ElDialog,ElSelect } from 'element-plus'
+    const props= defineProps({
+        classradio: {
+        type: String,
+        // default: '',
+    },
+
+ });
+ const strResultFormatlist = ref([
+     { id: 0, name: "灾情演化",value: ".vtk" },
+     { id: 1, name: "演化过程" ,value: ".mesh"},
+   ]);
+let formInline = reactive({
+  user: '11',
+  region: 'shanghai',
+  date: '',
+  
+})
+ const  dialog = ref({
+    dialogVisible:false
+});
+const boun = ref({
+    collfire:true,
+    collwater:false,
+});
+
+let coolactiveName1=ref(["1","2"]);
+
+
+const tableData = [
+  {
+    date: '01',
+    name: '首次',
+  },
+  {
+    date: '02',
+    name: '火灾',
+  },
+  {
+   
+    date: '03',
+    name: '灾事',
+  },
+
+]
+
+const tableRowClassName = ({row, rowIndex}) =>{
+    if (rowIndex%2 != 0) {
+        return 'evenRow';
+    }
+    return 'oddRow';
+  
+}
+
+const  accident3=()=>{
+    console.log(props.classradio);
+    if(props.classradio=="Fire"){
+        sour.value.collfire=true;
+
+    }else if(props.classradio=="Water"){
+        sour.value.collwater=true;
+    }
+}
+onMounted(() => {
+  });
+    defineExpose({boun,});
+    </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;
+            }
+        
+        }
+.tianjia{
+    display: inline-block;
+}
+    .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-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;
+        color: rgba($color: #FFFFFF, $alpha: 0.8);
+    }
+    }
+    
+    .inputtext_1{
+        font-weight: 400;
+    font-size: 13px;
+    color: #FFFFFF;
+    line-height: 14px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none; 
+    padding: 13px 0 7px 0;
+    display: inline-block;
+    
+    }
+    }
+    }
+    .ddd{
+        margin-top: 20px;
+        .ddd_div{
+            padding: 20px 0;
+            position: relative;
+        }
+        .class_btn{
+            position: absolute;
+        right: 0;
+        top: 21px;
+        }
+        .header_l{
+                line-height: 10px;
+                // height: 40px;
+                text-align: left;
+                padding: 0 20px;
+                // border-bottom: 1px solid;
+                border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+                box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+                border-radius: 0px 0px 0px 0px;
+                .el-image{
+                    padding: 10px 10px 0 0;
+                }
+                h4{
+                    font-weight: bold;
+                    font-size: 12px;
+                    color: #68ADFF;
+                    line-height: 14px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                }
+            }
+    }
+    .tianjia{
+        display: inline-block;
+    }
+    .el-dialog__title{
+        display: inline-block;
+    }  
+    .bgcolor{
+        // width: 482px;
+        box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+        border-radius: 0px 0px 0px 0px;
+        border: 1px solid;
+        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+    }
+    .dialog_class{
+            .my-header{
+                line-height: 10px;
+                height: 40px;
+                text-align: left;
+                padding: 0 20px;
+                border-bottom: 1px solid;
+                border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+                box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+                border-radius: 0px 0px 0px 0px;
+                .el-image{
+                    padding: 10px 10px 0 0;
+                }
+                h4{
+                    font-weight: bold;
+                    font-size: 12px;
+                    color: #68ADFF;
+                    line-height: 14px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                }
+            }
+            .my_content{
+                width: 100%;
+                height: 90px;
+                box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+                border-radius: 0px 0px 0px 0px;
+                position: relative;
+               
+                .radio-group{
+                    display: flex;
+                    justify-content: center;
+                    .el-radio{
+                        flex: 1;
+                        justify-content: center;
+                        font-weight: bold;
+                            font-size: 12px;
+                            color: #FFFFFF;
+                            line-height: 14px;
+                      
+                    }
+                  
+                }
+            }
+            .el-dialog__footer{
+                position: absolute;
+                bottom: 17px;
+                display: flex;
+                .footerbtn{
+                    flex: 1;
+                    text-align: center;
+                }
+            }
+        }
+        .my_content1{
+            .el-table .cell{
+                font-weight: 400;
+                font-size: 12px;
+                color: #FFFFFF !important;
+                line-height: 14px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+            }
+    
+        }
+        .l_btn .borderimg {
+        width: 109px;
+    height: 30px;
+    background: rgba(104,173,255,0.3);
+    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+    /* border: 1px solid rgba(31, 107, 255, 1); */
+     border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
+    
+    border-radius: 4px;
+    display: flex;
+    display: inline-block;
+    box-sizing: border-box;
+    }
+    .borderimg{
+        width: 109px;
+        height: 30px;
+        background: rgba(104,173,255,0.3);
+        box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+        /* border: 1px solid rgba(31, 107, 255, 1); */
+        -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+        border-radius: 4px;
+        display: flex;
+        display: inline-block;
+        box-sizing: border-box
+    }
+    .el-table,.el-table thead th {
+        background-color: rgba(13, 22, 57, 0.96) !important;
+    }
+    .L_aside{
+        height: calc(100vh - 70px);
+        position: absolute;
+        top: 70px;
+    
+    }
+    .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-size: cover;
+             background-position-x: center !important;
+            line-height: 54px;
+            .spantext{
+                font-weight: bold;
+                font-size: 12px;
+                color: #FFFFFF;
+                text-align: center;
+                font-style: normal;
+                text-transform: none;
+    
+            }
+        }
+    }
+ 
+  
+  
+    .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>
+    .leftbgimg2 .el-collapse-item__header{
+      background-image: url(../../assets/img/b1.png)!important; 
+      background-size: cover;
+    background-position-x: center !important;
+}
+.xian{
+    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);
+}
+.header_l{
+    position: relative;
+}
+.header_l .closeimg{
+
+    position: absolute;
+    top: 10px;
+    right: 0;
+
+}
+.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;
+        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;
+
+
+}
+
+.font12 .el-table .cell{
+    font-size: 12px !important;
+    }
+    .el-table .cell{
+        padding: 0 !important;
+    }
+.addye{
+    width: 100%;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+    position: relative;
+}
+</style>
+<style >
+ .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;
+}
+.input ul li{
+    text-align: left;
+}
+.input .el-form-item__label{
+    color: #FFFFFF; 
+}
+.input .el-input__inner{
+    color: #FFFFFF; 
+}
+.foter_l .el-dialog__footer{
+    height: 40px;
+}
+
+.addye .footer_div{
+height: auto;
+padding-bottom: 30px;
+}
+</style>