4.9

src/router/index.js

@@ -22,15 +22,15 @@ const router = createRouter({
             },
            
         },
-        {
-            path: '/',
-            name:'首页',
-            component: () => import('@/view/home.vue'),
-            meta:{
-                keepAlive:false, // 需要缓存
-                title: '首页'
-            }
-        },
+        // {
+        //     path: '/',
+        //     name:'首页',
+        //     component: () => import('@/view/home.vue'),
+        //     meta:{
+        //         keepAlive:false, // 需要缓存
+        //         title: '首页'
+        //     }
+        // },
         {
           path: '/myHome',
           name:'首页1',
@@ -41,7 +41,7 @@ const router = createRouter({
           }
       },
         {
-          path: '/appmian',
+          path: '/',
           name:'主页',
           component: () => import('@/view/appmian.vue'),
           meta:{

src/style/style.css

@@ -2,9 +2,11 @@
 color: #fff;
 }
 .jc_padding {
-    padding: 18px 10px;
+    /* padding: 18px 10px; */
+  }
+  .mainpdding{
+    padding-left: .1094rem;
   }
-  
   .line {
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     box-sizing: border-box;
@@ -25,6 +27,23 @@ color: #fff;
     background-repeat: no-repeat;
     background-position: center;
   }
+  .imgneon .el-icon svg {
+    background-image: url(../assets/img/jian.png);
+    background-repeat: no-repeat;
+    background-image: url(/src/assets/img/jian.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    /* transform: rotate(346deg); */
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    transform: rotate(270deg);
+    -ms-transform: rotate(30deg);
+    transform-origin: 50% 50%;
+  }
+ .imgneon .el-icon svg path{
+    display: none;
+  }
   .L_aside .Frame4 {
     background-image: url(../assets/img/Group27.png);
     background-repeat: no-repeat;
@@ -73,7 +92,7 @@ color: #fff;
   .L_aside .el-collapse .inputtext_1,
   .L_aside .el-collapse-item__header .inputtext_1 {
     font-weight: 400;
-    font-size: 13px;
+    font-size: .0677rem;
     color: #FFFFFF;
     line-height: 14px;
     text-align: left;
@@ -104,18 +123,20 @@ color: #fff;
     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;
+    height: 30px;
   }
   .header_l .el-image {
-    padding: 10px 10px 0 0;
+    padding: 0px 10px 0 0;
   }
   .header_l h4 {
     font-weight: bold;
-    font-size: 12px;
+    font-size: 0.0625rem;
     color: #68ADFF;
     line-height: 14px;
     text-align: left;
     font-style: normal;
     text-transform: none;
+    margin-top: 10px;
   }
   
   .tianjia {
@@ -144,7 +165,7 @@ color: #fff;
     border-radius: 0px 0px 0px 0px;
   }
   .dialog_class .my-header .el-image {
-    padding: 10px 10px 0 0;
+    padding: 0px 10px 0 0;
   }
   .dialog_class .my-header h4 {
     font-weight: bold;
@@ -154,6 +175,7 @@ color: #fff;
     text-align: left;
     font-style: normal;
     text-transform: none;
+    margin-top: 14px;
   }
   .dialog_class .my_content {
     width: 100%;
@@ -223,9 +245,11 @@ color: #fff;
   
   .el-table,
   .el-table thead th {
-    background-color: rgba(13, 22, 57, 0.96) !important;
+    background-color: rgba(rgba(26,38,69,0)) !important;
+  }
+  .el-table--enable-row-transition .el-table__body td.el-table__cell {
+    background-color: rgba(rgba(26,38,69,0)) !important;
   }
-  
   .asides_content .el-form-item__label {
     color: #FFFFFF !important;
   }
@@ -233,18 +257,21 @@ color: #fff;
   .asdis_btn {
     display: flex;
     margin-top: 9px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0.0469rem 0.0469rem 0.0469rem;
   }
   .asdis_btn .btn {
-    flex: 1;
-    width: 145px;
-    height: 54px;
-    background-image: url(../assets/img/Rectangle5.png);
+    width: .4167rem;
+    height:30px;
+    background-image: url(../assets/img/Group1429.png);
     background-repeat: no-repeat;
-    line-height: 54px;
+    line-height: 30px;
+    background-size: 100% 100%;
   }
   .asdis_btn .btn .spantext {
     font-weight: bold;
-    font-size: 12px;
+    font-size: 0.0625rem;
     color: #FFFFFF;
     text-align: center;
     font-style: normal;
@@ -307,9 +334,9 @@ color: #fff;
     text-transform: none;
   }
   
-  .jiancedian {
-    width: 371px;
-    position: absolute;
+  .jiancedian1 {
+    width: 1.7031rem;
+    position: fixed;
     right: 0;
     top: 70px;
     box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
@@ -413,28 +440,39 @@ color: #fff;
             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-bottom: 1px solid;
+border-image: linear-gradient(90deg, rgba(91, 175, 222, 0), rgba(91, 175, 222, 1), rgba(198, 232, 255, 1), rgba(0, 102, 201, 1), rgba(0, 102, 201, 0)) 1 1;
+
+
+
+    /* 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;
-}
+    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-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;
-}
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; */
+    border:none;
+  }
 
 .oddRow {
-    background-color: rgba(104, 173, 255, 0.20) !important;
+    /* background-color: rgba(104, 173, 255, 0.4) !important; */
+    background-color: rgba(13, 22, 57, 0) !important; 
 }
 
 .evenRow {
-    background-color: rgba(13, 22, 57, 0.96) !important;
+    background-color: rgba(13, 22, 57, 0) !important;
+}
+.el-table{
+  --el-table-bg-color: rgba(26,38,69,0);
 }
-
 .my_content1 .el-table .cell {
     font-weight: 400;
     font-size: 12px;
@@ -516,22 +554,6 @@ color: #fff;
     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/Group1386.png) !important;
 }
@@ -584,9 +606,9 @@ color: #fff;
 }
 
 .asideg .el-input__inner {
-    color: rgba(255, 15, 15, 1);
+    color: #00FFF0;
     font-weight: 400;
-    font-size: 16px;
+    font-size: .0833rem;
 }
 
 .el-collapse {
@@ -596,13 +618,6 @@ color: #fff;
     --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__wrap {
-  background: rgba(26,38,69,0.4);
-  border-radius: 0px 0px 0px 0px;
-  border: 1px solid;
-  border-image: linear-gradient(237deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;background: rgba(26,38,69,0.4);
-}
 #textarea_id {
     color: #fff;
     font-size: 12px;
@@ -763,7 +778,7 @@ color: #fff;
 
 .jc_padding .el-table .cell {
     font-weight: 400;
-    font-size: 0.0625rem;
+    font-size: .0677rem;
     color: #FFFFFF;
     line-height: 14px;
     text-align: left;
@@ -800,11 +815,7 @@ color: #fff;
   --el-button-bg-color:rgba(0,0,0,0);
   border: none;
 }
-.el-button:focus, .el-button:hover{
-  background: rgba(104, 173, 255, 0) !important;
-  color: rgba(255, 255, 25, 1) !important;
-  border: none;
-}
+
 .pagination {
     margin-top: 30px;
     display: flex;
@@ -838,21 +849,47 @@ color: #fff;
     font-size: 12px;
 }
 .btns {
-    width: 72px;
-    height: 30px;
-    background-image: url(../../assets/img/Rectangle399.png);
+    width: .3125rem;
+    height: 23px;
+    background-image: url(../assets/img/Rectangle399.png);
     background-repeat: no-repeat;
-    line-height: 30px;
+    background-size: cover;
+    line-height: 21px;
     overflow: hidden;
-    margin: 10px 0;
+
+  }
+  .tabactive{
+    background-image: url(/src/assets/img/Rectangle3992.png) !important;
+   background-size: 100% 100%;
+  }  
+  .chuactive{
+    background-image: url(/src/assets/img/Group1403.png) !important;
+    background-size: 100% 100%;
+  }
+  .tabactive .spantext {
+    opacity:1 !important;
+  }
+  .el-table tr{
+    background: rgba(26,38,69,0) !important;
+
   }
   .btns .spantext {
     font-weight: bold;
-    font-size: 12px;
+    font-size: .0625rem;
     color: #ffffff;
     text-align: left;
     font-style: normal;
     text-transform: none;
+    opacity: 0.6;
+  }
+  .el-table__body-wrapper .el-table__row .el-button>span{
+    font-size: .0625rem !important;
+  }
+  .el-table__body-wrapper .el-table__row .el-button:focus, .el-button:hover{
+    background-color:rgba(255, 255, 25, 0) !important;;
+      color: rgba(255, 255, 25, 1) !important;
+      border: none;
+ 
   }
 ul,
 ol {
@@ -878,19 +915,7 @@ ol {
  .el-table__body-wrapper .el-radio__label{
     display: none !important;
 }
-.btns{
-    width: 72px;
-    height: 30px;
-    background-image: url(../../src/assets/img/Rectangle399.png);
-    background-repeat: no-repeat;
-    line-height: 30px;
-    overflow: hidden;
-    margin: 10px 0;
-}
-.flex_a {
-    flex: 1;
-    padding: 0 19px;
-}
+
 .leftbgimg1 .el-collapse-item__header {
     background-image: url(../../src/assets/img//Group1386.png)!important;
     background-size: 100% 100%;
@@ -902,13 +927,13 @@ ol {
     background-position-x: center !important;
 }
 .asideg .el-collapse-item__header {
-    height: 30px !important;
+    height: 0.2084rem !important;
     width: 100%;
     color: #fff;
     background-position: left;
     border: none !important;
     font-weight: bold;
-    font-size: 0.07293rem;
+    font-size :.0729rem;
     color: #ffffff;
     line-height: 18px;
     text-align: left;
@@ -916,10 +941,17 @@ ol {
     text-transform: none;
 }
 .asideg .el-collapse-item__wrap {
-    box-shadow: inset 0 0 17px 5px #0c61c533;
-    border-radius: 4px;
-    border-bottom: 1px solid;
-    border-image: linear-gradient(180deg,rgba(31,107,255,1),rgba(31,107,255,.48)) 1 1;
+  background: rgba(26,38,69,0.4);
+  box-shadow: inset -4px 7 12px 0px rgba(140,198,255,0.01);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid;
+  border-bottom: 2px solid;
+  border-image: linear-gradient(237deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;
+}
+.headerimg{
+  background-image: url(/src/assets/img/Group1386.png)!important;
+  background-size: 100% 100%;
+  background-repeat: no-repeat; 
 }
 .magintop {
     display: flex;
@@ -937,14 +969,6 @@ ol {
     line-height: 23px;
     padding: 0 12px;
 }
-.btns .spantext{
-  font-weight: 700;
-  font-size: 12px;
-  color: #fff;
-  text-align: left;
-  font-style: normal;
-  text-transform: none;
-}
 .padingcla .flex_a {
   padding: 0 2px!important;
 }
@@ -1303,9 +1327,97 @@ font-size: .0833rem;
 }
 .header_l .closeimg {
   position: absolute;
-  top:0;
+  top:9px;
   right: 0;
 }
 .header_l {
   position: relative;
+}
+.maincontent{
+    left: 0;
+    overflow: auto;
+    height: calc(100vh - 106px);
+}
+/* 隐藏滚动条 */
+::-webkit-scrollbar {
+  display: none;
+}
+
+/* 启用滚动 */
+.scrollable {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch; /* 移动端使用触摸滚动 */
+}
+/* 隐藏滚动条 */
+.scrollable {
+  scrollbar-width: none; /* Firefox */
+  overflow: auto;
+}
+.first-right{
+  position: absolute;
+    z-index: 206;
+    top: 0;
+}
+.jiancedian {
+  width: 1.7031rem;
+  position: fixed;
+  right: 0;
+  top: 70px;
+  background-color: rgb(26,38,69,0.4);
+ 
+}
+.zongji{
+  padding: 30px;
+  display: flex;
+  justify-content: space-between;
+}
+.zongjili{
+  width: .4271rem;
+  height: .2708rem;
+  line-height: .3542rem;
+  font-size: .0729rem;
+  color: #fff;
+  position: relative;
+  padding: 0 0.0925rem;
+  text-align: left;
+
+}
+.zongjili span{
+  position: absolute;
+  right: 5px;
+
+}
+.img1{
+  background-image: url(../assets/img/Group1399.png);
+  background-size: 100% 100%;
+}
+.img2{
+  background-image: url(../assets/img/Group1400.png);
+  background-size: 100% 100%;
+}
+.img3{
+  background-image: url(../assets/img/Group1392.png);
+  background-size: 100% 100%;
+}
+.img4{
+  background-image: url(../assets/img/Group1394.png);
+  background-size: 100% 100%;
+  font-size: .0469rem;
+}
+.rg-padding{
+  padding: .0521rem;
+}
+.xian2{
+  background: rgba(0,102,201,0.1);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid;
+  border-image: linear-gradient(326deg, rgba(0, 102, 201, 1), rgba(91, 175, 222, 1)) 1 1;
+}
+.hedse{
+  text-align: left;
+  color: #fff;
+  line-height: .2083rem;
+}
+.iconimg1{
+  padding: 0 12px;
 }

src/view/InfoDialoges.vue

@@ -205,8 +205,8 @@
                                         </ul>
                                     </div>
                                     <div class="asdis_btn">
-                                        <div class="btn"><span class="spantext" @click="initial();">初始数据</span></div>
-                                        <div class="btn"><span class="spantext" @click="calculate();">开始计算</span></div>
+                                        <div class="btn"   :class="{chuactive: isActive === 1}" @click="changeClass(1)"><span class="spantext" @click="initial();">初始数据</span></div>
+                                        <div class="btn"  :class="{chuactive: isActive === 2}" @click="changeClass(2)"><span class="spantext" @click="calculate();">开始计算</span></div>
                                     </div>
 
                                     <div class=" logs">
@@ -229,10 +229,10 @@
         </div>
         <!-- 突水 -->
         <div class="common-layout" style="margin: 0;" v-show="leftcoll.collwater">
-            <el-aside width="320px" class="L_aside L_aside1 asideg asidegbg  leftbgimg1">
+            <el-aside width="1.6667rem" class="L_aside L_aside1 asideg asidegbg  leftbgimg1">
                 <div class="demo-collapse">
                     <el-collapse v-model="coolactiveName" accordion>
-                        <el-collapse-item name="1">
+                        <el-collapse-item name="1" class="imgneon">
 
                             <template #title>
                                 <el-icon class="iconimg Frame3" fit="contain"></el-icon>
@@ -286,11 +286,11 @@
                                         </ul>
                                     </div>
                                     <div class="asdis_btn">
-                                        <div class="btn"><span class="spantext" @click="initial();">初始数据</span></div>
-                                        <div class="btn"><span class="spantext" @click="calculate();">开始计算</span></div>
+                                        <div class="btn" :class="{chuactive: isActive === 1}" @click="changeClass(1)"><span class="spantext" @click="initial();">初始数据</span></div>
+                                        <div class="btn" :class="{chuactive: isActive === 2}" @click="changeClass(2)"><span class="spantext" @click="calculate();">开始计算</span></div>
                                     </div>
 
-                                    <div class=" logs" v-show="false">
+                                    <div class=" logs">
                                         <div class="logs_pading">
                                             <h4>模拟日志</h4>
                                             <div class="footerTextBox">
@@ -353,8 +353,8 @@
                                         </ul>
                                     </div>
                                     <div class="asdis_btn">
-                                        <div class="btn"><span class="spantext" @click="initial();">初始数据</span></div>
-                                        <div class="btn"><span class="spantext" @click="calculate();">开始计算</span></div>
+                                        <div class="btn" :class="{chuactive: isActive === 1}" @click="changeClass(1)"><span class="spantext" @click="initial();">初始数据</span></div>
+                                        <div class="btn" :class="{chuactive: isActive === 2}" @click="changeClass(2)"><span class="spantext" @click="calculate();">开始计算</span></div>
                                     </div>
 
                                     <div class=" logs">
@@ -588,7 +588,7 @@ const accident = () => {
     if (idobj.value.name == '') {
         ElMessage.error('请选择项目')
     } else {
-        // router.push({ path: "/appmian" });
+    //    router.push({ path: "/appmian" });
         if(props.valzaiqing=='模拟数据'){
         const params = {
             transCode: 'D10017',
@@ -623,20 +623,17 @@ const accident = () => {
             })
 
         }else{
-           
-       
-        
-               initWebSocket();
-          rizhi.value.logs='';
-          newlog.value ='';
+         initWebSocket();
+         rizhi.value.logs='';
+         newlog.value ='';
         emit('headerclick', sgdata.value);
         emit('childfun');
         emit('moxingclick', true);
         pollute();
         // emit('handleSelect', '1');
-          fetchFileContent();
-          accident2(props.activeIndex)
-     
+        fetchFileContent();
+        accident2(props.activeIndex)
+
     }
     dialog.value.dialogVisible_fire = false;
     }
@@ -826,6 +823,10 @@ const inititimeDefaultal = () => {
     return s1;
 }
 
+let isActive=ref(0)
+const  changeClass= (i)=>  {
+ isActive.value = i;
+}
 // 初始数据
 const initial = () => {
   

src/view/appmian.vue

@@ -56,7 +56,8 @@
         </div>
         <!-- <RouterView name="myhome"></RouterView> -->
         <!-- <div class="main-conyeny"> -->
-   
+   <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" />
@@ -80,8 +81,9 @@
         <!-- right -->
         <!-- <firstLeft/> -->
       <!-- </div> -->
-   
-  
+      <firstLeft ref="tanimation" :classradio="classradio" :aid="aid" />
+    </div>
+    </div>
       </el-main>
   <div class="footer">
     <Index ref="indexref"/>
@@ -272,7 +274,10 @@ const aidlist = () => {
 };
 // 获取子组件的方法
 const childfun = () => {
+  console.log(1112222)
   bgk2false.value=false;
+  console.log(bgk2false.value);
+
   indexref.value.btnlistshow=true;
   if(classradio.value=='Gass'){
     sourcedis.value.Gassgetdata(aid.value);
@@ -295,6 +300,7 @@ const handindodialoges=()=>{
 }
 
 const handleSelect = (key) => {
+  router.push({ path: "/" ,query:{classradio:key}});
   bgk2false.value=true;
   indexref.value.btnlistshow=false;
   if( bgk2false.value==true){

src/view/components/InfoAnimation.vue

@@ -1052,16 +1052,12 @@ defineExpose({ monitor, accident5 });
 }
 
 .jiancedian {
-  width: 371px;
+  width: 1.7031rem;
   position: fixed;
   right: 0;
   top: 70px;
-  background-color: rgba(13, 22, 57, 0.6);
-  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;
+  background-color: rgb(26,38,69,0.4);
+ 
 }
 </style>
 
@@ -1160,21 +1156,15 @@ defineExpose({ monitor, accident5 });
 /* .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-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;
+    1; */
 }
 
 .oddRow {
@@ -1608,4 +1598,5 @@ defineExpose({ monitor, accident5 });
 .namemgd2 {
   text-align: left;
 }
+
 </style>

src/view/components/InfoBoundary.vue

@@ -26,7 +26,7 @@
                         :highlight-current-row="true"
                         :row-class-name="tableRowClassName"
                         @row-click="handleDelete($event)"
-                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }"
+                         :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
                       >
                         <el-table-column prop="nid" label="节点选择" />
                         <!-- <el-table-column prop="type" label="边界类型" /> -->
@@ -74,7 +74,7 @@
                           </div>
                         </div>
                         <div class="flex_a">
-                          <div class="btns" @click="sdialog.dialogsgdelect = true">
+                          <div class="btns" @click="xiudelete();">
                             <span class="spantext">删除</span>
                           </div>
                         </div>
@@ -91,13 +91,13 @@
     <!-- 突水 -->
     <div class="common-layout" style="margin: 0" >
       <el-aside
-        width="320px"
+        width="1.6667rem"
         class="L_aside L_aside1 asideg asidegbg leftbgimg1"
         v-show="boun.collwater"
       > 
        <div class="demo-collapse"> 
          <el-collapse v-model="coolactiveName1" accordion>
-            <el-collapse-item name="2">
+            <el-collapse-item name="2" class="imgneon">
               <template #title>
                 <el-icon class="iconimg Frame3" fit="contain"></el-icon>
                 突水<el-icon class="header-icon"> </el-icon>
@@ -113,7 +113,7 @@
                         :highlight-current-row="true"
                         :row-class-name="tableRowClassName"
                         @row-click="handleDelete($event)"
-                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }"
+                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
                       >
                         <el-table-column prop="nid" label="节点选择" />
                         <el-table-column prop="type" label="边界类型" />
@@ -121,24 +121,24 @@
                     </div>
                   </div>
                   <div class="asdis_btn padingcla">
-                    <div class="flex_a">
-                      <div
-                        class="btns"
-                        @click="
+                    <div class="flex_a"  @click="
                           bounadd();
                           dialog.dialogVisible = true;
-                        "
+                      ">
+                      <div
+                        class="btns"
+                      :class="{tabactive: isActive === 1}" @click="changeClass(1)"
                       >
                         <span class="spantext">添加</span>
                       </div>
                     </div>
-                    <div class="flex_a">
-                      <div class="btns" @click="xiugai()">
+                    <div class="flex_a"  @click="xiugai()">
+                      <div class="btns"  :class="{tabactive: isActive === 2}" @click="changeClass(2)">
                         <span class="spantext">修改</span>
                       </div>
                     </div>
-                    <div class="flex_a">
-                      <div class="btns" @click="sdialog.dialogsgdelect = true">
+                    <div class="flex_a"  @click="xiudelete();">
+                      <div class="btns"  :class="{tabactive: isActive === 3}" @click="changeClass(3)">
                         <span class="spantext">删除</span>
                       </div>
                     </div>
@@ -338,7 +338,7 @@
           :data="tableData2"
           style="width: 100%"
           @select="projectsSelectionSelect"
-          :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }"
+           :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
         >
           <el-table-column type="selection" width="55" />
           <el-table-column property="id" label="节点编号" />
@@ -424,7 +424,10 @@ import { ElMessage, ElButton, ElDialog } from "element-plus";
 import { Calendar, Search } from "@element-plus/icons-vue";
 import selfdialogs from "./SetNode.vue";
 import { vtkmodel } from "@/control/vtkModel.js";
-
+let isActive=ref(0)
+const  changeClass= (i)=>  {
+ isActive.value = i;
+}
 const changeModel = () => {
   vtkmodel.clearJgAddMode();
   vtkmodel.renderWindow.render();
@@ -592,7 +595,15 @@ const bounadd = () => {
   } else {
   }
 };
+const xiudelete = () => {
+  if (JSON.stringify(xiugaiobj.value) == "{}") {
+    ElMessage.error("你还没有选中修改的项目");
+  } else {
+    sdialog.value.dialogsgdelect = true
+}
+}
 //修改
+
 const xiugai = () => {
   buntext.value = "修改";
   if (JSON.stringify(xiugaiobj.value) == "{}") {

src/view/components/InfoDisaster.vue

@@ -66,7 +66,7 @@
                       style="margin-top: 20px"
                       v-show="sdialog.isDisasterfire"
                     >
-                      <div class="header_l header_z">
+                      <div class="header_l header_z  headerimg">
                         <el-image :src="icon" fit="contain"></el-image>
                         <h4 class="tianjia">灾害源表</h4>
                         <div class="closeimg" @click="sdialog.isDisasterfire = false">
@@ -127,14 +127,14 @@
     </div>
     <!-- 突水 -->
     <div class="common-layout collapseaside" style="margin: 0" v-show="sour.collwater">
-      <el-aside width="320px" class="L_aside L_aside1 asideg asidegbg leftbgimg1">
+      <el-aside width="1.6667rem" class="L_aside L_aside1 asideg asidegbg leftbgimg1">
         <div class="demo-collapse">
           <!-- 突水 sour.collwater-->
           <el-collapse v-model="coolactiveName1" accordion>
-            <el-collapse-item name="1">
+            <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="asides_content">
                 <div class="jc_content tablecolor">
@@ -144,7 +144,7 @@
                         :data="tableDatawat"
                         style="width: 100%"
                         :row-class-name="tableRowClassName"
-                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }"
+                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
                         @row-click="handleDelete($event)"
                         :max-height="tableHeight"
                         :highlight-current-row="currentrow" 
@@ -170,10 +170,10 @@
                             sdialog.dianadddialog = true;
                           "
                         >
-                          <div class="btns"><span class="spantext">添加</span></div>
+                          <div class="btns" :class="{tabactive: isActive === 1}" @click="changeClass(1)"><span class="spantext">添加</span></div>
                         </div>
                         <div class="flex_a" @click="xiugaitable()">
-                          <div class="btns"><span class="spantext">修改</span></div>
+                          <div class="btns" :class="{tabactive: isActive === 2}" @click="changeClass(2)"><span class="spantext">修改</span></div>
                         </div>
                         <div
                           class="flex_a"
@@ -182,11 +182,11 @@
                         
                           "
                         >
-                          <div class="btns"><span class="spantext">删除</span></div>
+                          <div class="btns"  :class="{tabactive: isActive === 3}" @click="changeClass(3)"><span class="spantext">删除</span></div>
                         </div>
-                        <div class="flex_a">
+                        <!-- <div class="flex_a">
                           <div class="btns"><span class="spantext">确定</span></div>
-                        </div>
+                        </div> -->
                       </div>
                     </div>
                     <!-- 灾害源表 -->
@@ -195,7 +195,7 @@
                       style="margin-top: 20px"
                       v-show="sdialog.disDisasterwter"
                     >
-                      <div class="header_l header_z">
+                      <div class="header_l header_z headerimg">
                         <el-image :src="icon" fit="contain"></el-image>
                         <h4 class="tianjia">灾害源表</h4>
                         <div class="closeimg" @click="sdialog.disDisasterwter = false">
@@ -222,10 +222,10 @@
                             sdialog.adddwater = true;
                           "
                         >
-                          <div class="btns"><span class="spantext">添加</span></div>
+                          <div class="btns" :class="{tabactive: isActive === 4}" @click="changeClass(4)"><span class="spantext">添加</span></div>
                         </div>
                         <div class="flex_a" @click="zaiyuxiugai()">
-                          <div class="btns"><span class="spantext"> 修改</span></div>
+                          <div class="btns" :class="{tabactive: isActive === 5}" @click="changeClass(5)"><span class="spantext"> 修改</span></div>
                         </div>
                         <div
                           class="flex_a"
@@ -233,7 +233,7 @@
                             shanchu('2');
                           "
                         >
-                          <div class="btns"><span class="spantext">删除</span></div>
+                          <div class="btns" :class="{tabactive: isActive === 6}" @click="changeClass(6)"><span class="spantext">删除</span></div>
                         </div>
                         <div class="flex_a" @click="sdialog.disDisasterwter = false">
                           <div class="btns"><span class="spantext">确定</span></div>
@@ -1061,8 +1061,10 @@ import vueUploader from "./fileuploads.vue";
 import { NULL } from "sass";
 // import filesload from "./filesloads.vue";
 
-
-
+let isActive=ref(0)
+const  changeClass= (i)=>  {
+ isActive.value = i;
+}
 const changeModel= ()=>  {
   vtkmodel.clearJgAddMode();
   vtkmodel.renderWindow.render();

src/view/home.vue

@@ -64,17 +64,13 @@
           :headerobj="headerobj"
           :activeIndex="activeIndex"
           @leftsimulation="leftsimulation"
-          @headerclick="headerclick"
           @handleSelect="handleSelect"
-          @childfun="childfun"
-          @moxingclick="moxingclick"
           :classradio="classradio" 
         ></Dialoges>
         <result ref="resultbidui" @titleclick="titleclick"  :classradio="classradio"></result>
         <MenuMine ref="menumine"/>
         <MenuSensor ref="menusen"/>
-   
-  
+        <firstLeft ref="tanimation" :classradio="classradio" :aid="aid" />
       </el-main>
 
     </el-container>
@@ -263,23 +259,17 @@ const aidlist = () => {
   aid.value = sgdata.value.aid;
 };
 // 获取子组件的方法
-const childfun = () => {
-
-  if(classradio.value=='Gass'){
-    sourcedis.value.Gassgetdata(aid.value);
-  }else{
-    sourcedis.value.handledisaster(aid.value);
-  }
-  boundary.value.addboundary(aid.value);
-  sourcedis.value.accident3(activeIndex.value);
-  boundary.value.accident4(activeIndex.value);
-};
-const headerclick = (data) => {
-  console.log(data);
-  headerobj.value.name = data.name;
-  headerobj.value.time = data.time;
-  aid.value = data.aid;
-};
+// const 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=()=>{
 

src/view/index/first-left.vue

@@ -1,58 +1,101 @@
 <template>
-    <!-- 底部导航栏 -->
-    <div class="first-left"> 
-        <div
-      class="demo-collapse jiancedian asideg1 jc_header collapseeion jianstyle"
-      v-show="firstshow"
-    >
-      <el-collapse accordion v-model="activeNamesf">
-        <el-collapse-item name="1">
-          <template #title>
-            <div class="he_pading color1">
-              <!-- <el-form-item label="物理量:">
-                <el-select
-                  v-model="formInline.region"
-                  @change="regionchange($event)"
-                  placeholder="请选择"
-                >
-                  <el-option
-                    v-for="item in strResultFormatlist"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.value"
-                  ></el-option>
-                </el-select>
-              </el-form-item> -->
-            
+  <!-- 底部导航栏 -->
+  <div class="first-right l_Dialog tablebk">
+    <el-aside width="340px" class="L_aside L_aside1 asideg asidegbg leftbgimg1" v-show="firstshow">
+      <div class="demo-collapse jiancedian1 asideg1 jc_header collapseeion jianstyle">
+        <el-collapse accordion v-model="activeNames">
+          <el-collapse-item name="1" class="imgneon">
+            <template #title>
+              <el-icon class="iconimg Frame3" fit="contain"></el-icon>
+              灾害信息展示
+            </template>
+            <div class="rg_content">
+              <div class="rg-padding">
+              <div class="zongji">
+                <div class="zongjili img1">1<span>个</span></div>
+                <div class="zongjili img2">12<span>个</span></div>
+              </div>
+              <div class="asides_content">
+                <div class="jc_content tablecolor">
+                  <div class="jc_padding">
+                    <div class="xian2 btncolor tablefocus ">
+                      <el-table
+                        :data="tableData"
+                        style="width: 100%"
+                        :row-class-name="tableRowClassName"
+                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
+                        @row-click="handleDelete($event)"
+                        :max-height="tableHeight"
+                      >
+                        <el-table-column prop="date" label="监测点"  />
+                        <el-table-column prop="name" label="水位（m）"   />
+                        <el-table-column prop="name"  label="流量（m³/s）" />
+                        <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>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- 监测点 -->
+              <div>
+                <div class="hedse">
+              <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>监测点
             </div>
-          </template>
-          <div class="jc_content tablecolor">
-            <div class="jc_padding">
-             
-          
+            <div class="zongji">
+                <div class="zongjili img3">50<span>m</span></div>
+                <div class="zongjili img4">2024-03-20<span>14:23:00</span></div>
+              </div>
             </div>
-            <div class="jc_header color1">
-              <span class="jc_tile">信息展示</span>
             </div>
-          
           </div>
-          <!-- <div class="mgsnoe" style="height: 200px"></div> -->
-        </el-collapse-item>
-      </el-collapse>
-    </div>
-    </div>
-     </template>
-   <script setup>
+            <!-- <div class="mgsnoe" style="height: 200px"></div> -->
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+    </el-aside>
+  </div>
+</template>
+<script setup>
 import { ref, onMounted, reactive, } from "vue";
-import {RouterView,RouterLink } from "vue-router"
+import { RouterView, RouterLink } from "vue-router"
 import { request, uploadFile } from "@/utils/request";
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
-let firstshow=ref(true);
-let activeNamesf=ref(["1", "2"]);
+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"
+let firstshow = ref(true);
+let activeNamesf = ref(["1"]);
+let tableHeight = ref(150);
+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({});
-   </script>
-   <style  lang="scss" scoped>
 
-
-   </style>
+]
+defineExpose({});
+</script>
+<style lang="scss" scoped></style>