feat:新增水文信息页面

src/views/comprehensive-overview/left.vue

@@ -1,365 +1,366 @@
 <template>
-    <BasePanelLeft>
+  <BasePanelLeft>
     <div class="comprehensive-container">
-        <div class="left">
-            <BaseMain title="通知公告">
-                <template v-slot:mainArea>
-                    <div class="main-container">
-                        <div class="img-txt" v-if="noticeList.length>0">
-                            <el-image class="img" :src="noticeList[0].url"></el-image>
-                            <div class="txt">{{ noticeList[0].txt }}</div>
-                        </div>
-                        <div class="list" v-for="item in noticeDataList" :key="item.id">
-                            <div class="left">
-                                <el-image :src="item.url" class="img"></el-image>
-                            </div>
-                            <div class="right">
-                                <div class="title">{{ item.txt }}</div>
-                                <div class="date">{{ item.date }}</div>
-                                <div class="detailBtn">详情</div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </BaseMain>
-            <BaseMain title="渭河生态区概况">
-                <template v-slot:mainArea>
-                    <div class="main-container">
-                        <div class="icon-item">
-                            <img src="@/assets/image/comprehensive/point1.png" class="img1"/>
-                            <img src="@/assets/image/comprehensive/line.png" class="img2"/>
-                            <img src="@/assets/image/comprehensive/point2.png" class="img3"/>
-                        </div>
-                        <div class="info">
-                            <div class="left">西起：武兴交界</div>
-                            <div class="right">东起：兴秦交界</div>
-                        </div>
-                        <div class="base-info-card">
-                            <div class="base-info-item">
-                                <span>水资源总量 (2024年)</span>
-                                <span class="value green">0.7 <span>亿m³</span></span>
-                            </div>
-                            <div class="base-info-item">
-                                <span>人均综合用量 (2024年)</span>
-                                <span class="value yellow">亿m³ <span>m³</span></span>
-                            </div>
-                            <div class="base-info-item">
-                                <span>河堤与堤防长度</span>
-                                 <span class="value blue">30.7 <span>km</span></span>
-                            </div>
-                        </div>
-                         <div class="base-info-card m0">
-                            <div class="base-info-item">
-                                <span>堤顶宽度</span>
-                                <span class="value green">20~30<span>m</span></span>
-                            </div>
-                            <div class="base-info-item">
-                                <span>堤距</span>
-                                <span class="value yellow">800~1200 <span>m</span></span>
-                            </div>
-                            <div class="base-info-item">
-                                <span>堤防外总面积</span>
-                                 <span class="value blue">35.75 <span>㎡</span></span>
-                            </div>
-                        </div>
-                        <div class="table-card" v-for="item in tableInfo" :key="item.id">
-                            <div class="title">{{item.title}}</div>
-                            <div class="base-info-card">
-                                <div class="base-info-item">
-                                    <span>堤防长度</span>
-                                    <span class="value">{{ item.len }} <span>km</span></span>
-                                </div>
-                                <div class="base-info-item pl20">
-                                    <span>防洪标准</span>
-                                    <span class="value">{{item.year}} <span>年一遇</span></span>
-                                </div>
-                                <div class="base-info-item pl20">
-                                    <span>设计流量</span>
-                                    <span class="value">{{item.sl}} <span>m³/人</span></span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="icon-card-container">
-                            <div class="area">
-                                <img src="@/assets/image/comprehensive/icon2.png"/>
-                                <div class="areainfo">
-                                    <div class="title">农村区段</div>
-                                    <div class="km"><span class="blue">34.01</span>K㎡</div>
-                                </div>
-                            </div>
-                            <div class="area">
-                                <img src="@/assets/image/comprehensive/icon1.png"/>
-                                 <div class="areainfo">
-                                    <div class="title">城市核心区段</div>
-                                    <div class="km"><span class="green">34.01</span>K㎡</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </BaseMain>
-        </div>
+      <div class="left">
+        <BaseMain title="通知公告">
+          <template v-slot:mainArea>
+            <div class="main-container">
+              <div class="img-txt" v-if="noticeList.length > 0">
+                <el-image class="img" :src="noticeList[0].url"></el-image>
+                <div class="txt">{{ noticeList[0].txt }}</div>
+              </div>
+              <div class="list" v-for="item in noticeDataList" :key="item.id">
+                <div class="left">
+                  <el-image :src="item.url" class="img"></el-image>
+                </div>
+                <div class="right">
+                  <div class="title">{{ item.txt }}</div>
+                  <div class="date">{{ item.date }}</div>
+                  <div class="detailBtn">详情</div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </BaseMain>
+        <BaseMain title="渭河生态区概况">
+          <template v-slot:mainArea>
+            <div class="main-container">
+              <div class="icon-item">
+                <img src="@/assets/image/comprehensive/point1.png" class="img1" />
+                <img src="@/assets/image/comprehensive/line.png" class="img2" />
+                <img src="@/assets/image/comprehensive/point2.png" class="img3" />
+              </div>
+              <div class="info">
+                <div class="left">西起：武兴交界</div>
+                <div class="right">东起：兴秦交界</div>
+              </div>
+              <div class="base-info-card">
+                <div class="base-info-item">
+                  <span>水资源总量 (2024年)</span>
+                  <span class="value green">0.7 <span>亿m³</span></span>
+                </div>
+                <div class="base-info-item">
+                  <span>人均综合用量 (2024年)</span>
+                  <span class="value yellow">201.7 <span>m³</span></span>
+                </div>
+                <div class="base-info-item">
+                  <span>河堤与堤防长度</span>
+                  <span class="value blue">30.7 <span>km</span></span>
+                </div>
+              </div>
+              <div class="base-info-card m0">
+                <div class="base-info-item">
+                  <span>堤顶宽度</span>
+                  <span class="value green">20~30<span>m</span></span>
+                </div>
+                <div class="base-info-item">
+                  <span>堤距</span>
+                  <span class="value yellow">800~1200 <span>m</span></span>
+                </div>
+                <div class="base-info-item">
+                  <span>堤防外总面积</span>
+                  <span class="value blue">35.75 <span>㎡</span></span>
+                </div>
+              </div>
+              <div class="table-card" v-for="item in tableInfo" :key="item.id">
+                <div class="title">{{ item.title }}</div>
+                <div class="base-info-card">
+                  <div class="base-info-item">
+                    <span>堤防长度</span>
+                    <span class="value">{{ item.len }} <span>km</span></span>
+                  </div>
+                  <div class="base-info-item pl20">
+                    <span>防洪标准</span>
+                    <span class="value">{{ item.year }} <span>年一遇</span></span>
+                  </div>
+                  <div class="base-info-item pl20">
+                    <span>设计流量</span>
+                    <span class="value">{{ item.sl }} <span>m³/人</span></span>
+                  </div>
+                </div>
+              </div>
+              <div class="icon-card-container">
+                <div class="area">
+                  <img src="@/assets/image/comprehensive/icon2.png" />
+                  <div class="areainfo">
+                    <div class="title">农村区段</div>
+                    <div class="km"><span class="blue">34.01</span>K㎡</div>
+                  </div>
+                </div>
+                <div class="area">
+                  <img src="@/assets/image/comprehensive/icon1.png" />
+                  <div class="areainfo">
+                    <div class="title">城市核心区段</div>
+                    <div class="km"><span class="green">34.01</span>K㎡</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </BaseMain>
+      </div>
     </div>
   </BasePanelLeft>
 </template>
 
 <script>
 import BasePanelLeft from '@/components/base-panel/base-panel-left'
-import BaseMain from '@/components/base-main/base-main.vue';
+import BaseMain from '@/components/base-main/base-main.vue'
 import noticeUrl from '@/assets/image/comprehensive/bg1.png'
 import iUrl from '@/assets/image/comprehensive/bg2.png'
 export default {
-    components:{
-        BaseMain,BasePanelLeft
-    },
-    data() {
-        return {
-            noticeList:[
-                {
-                    id:1,
-                    url:noticeUrl,
-                    txt:'朝元阁峻临秦岭，羯鼓楼高俯渭河',
-                    date:'2025-05-04 10:00:00'
-                },
-                {
-                    id:2,
-                    url:iUrl,
-                    txt:'离亭当日唱离歌，只为柔条傍渭河',
-                     date:'2025-05-04 10:00:00'
-                },
-                {
-                    id:3,
-                    url:iUrl,
-                    txt:'离亭当日唱离歌，只为柔条傍渭河',
-                    date:'2025-05-04 10:00:00'
-                }
-            ],
-            noticeDataList:[],
-            tableInfo:[
-                {
-                    id:1,
-                    title:'桑镇西桥村至庄头镇蔡庄村段',
-                    len:13.146,
-                    year:30,
-                    sl:6669
-                },
-                {
-                    id:2,
-                    title:'庄头镇蔡庄村至阜寨镇段家村段',
-                    len:13.146,
-                    year:30,
-                    sl:6669
-                }
-            ]
+  components: {
+    BaseMain,
+    BasePanelLeft
+  },
+  data() {
+    return {
+      noticeList: [
+        {
+          id: 1,
+          url: noticeUrl,
+          txt: '朝元阁峻临秦岭，羯鼓楼高俯渭河',
+          date: '2025-05-04 10:00:00'
+        },
+        {
+          id: 2,
+          url: iUrl,
+          txt: '离亭当日唱离歌，只为柔条傍渭河',
+          date: '2025-05-04 10:00:00'
+        },
+        {
+          id: 3,
+          url: iUrl,
+          txt: '离亭当日唱离歌，只为柔条傍渭河',
+          date: '2025-05-04 10:00:00'
         }
-    },
-    created(){
-        this.noticeDataList = this.noticeList.splice(1,this.noticeList.length)
-        console.info(this.noticeDataList)
-    },
-    methods:{
-
+      ],
+      noticeDataList: [],
+      tableInfo: [
+        {
+          id: 1,
+          title: '桑镇西桥村至庄头镇蔡庄村段',
+          len: 13.146,
+          year: 30,
+          sl: 6669
+        },
+        {
+          id: 2,
+          title: '庄头镇蔡庄村至阜寨镇段家村段',
+          len: 13.146,
+          year: 30,
+          sl: 6669
+        }
+      ]
     }
+  },
+  created() {
+    this.noticeDataList = this.noticeList.splice(1, this.noticeList.length)
+    console.info(this.noticeDataList)
+  },
+  methods: {}
 }
 </script>
 
 <style lang="scss" scoped>
-.comprehensive-container{
-    position: absolute;
-    top: px-to-rem(66);
-    z-index: 1;
-    left: px-to-rem(-4);
-    .main-container{
-        padding: px-to-rem(10);
-        .img-txt{
-            position: relative;
-            .img{
-                width: 100%;
-            }
-            :deep(.el-image__inner){
-                height: px-to-rem(166);
-                width: 100%;
-            }
-            .txt{
-                width: px-to-rem(337);
-                height: px-to-rem(30);
-                background: rgba(0, 0, 0, 0.5);
-                border-radius: px-to-rem(4);
-                font-weight: bold;
-                font-size:  px-to-rem(14);
-                color: #FFFFFF;
-                line-height: px-to-rem(30);
-                position: absolute;
-                left: 0;
-                bottom: 0;
-                text-align: left;
-                padding-left: px-to-rem(10);
-            }
-        }
-        .list{
-            display: flex;
-            justify-content: space-between;
-            margin-top: px-to-rem(10);
-            background: rgba(79,159,255,0.2);
-            border-radius: px-to-rem(4);
-            border: 1px solid #4F9FFF;
-            padding: px-to-rem(5);
-            height: px-to-rem(93);
-            .left .img{
-                width: px-to-rem(100);
-                height: px-to-rem(80);
-                :deep(.el-image__inner){
-                    height: px-to-rem(80);
-                }
-            }
-            .right{
-                font-weight: 500;
-                font-size: px-to-rem(14);
-                color: #FFFFFF;
-                position: relative;
-                .date{
-                    font-weight: 400;
-                    font-size: px-to-rem(14);
-                    color: #FFFFFF;
-                    margin-top: px-to-rem(9);
-                    margin-bottom:px-to-rem(10)
-                }
-                .detailBtn{
-                    width: px-to-rem(48);
-                    height: px-to-rem(24);
-                    background: linear-gradient(0deg, #468ADB 0%, #366DAE 100%);
-                    border-radius:px-to-rem(4);
-                    border: px-to-rem(1) solid;
-                    font-weight: 400;
-                    font-size: px-to-rem(14);
-                    color: #FFFFFF;
-                    position: absolute;
-                    right: 0;
-                    text-align: center;
-                    bottom: px-to-rem(4);
-                }
-            }
-        }
+.comprehensive-container {
+  position: absolute;
+  top: px-to-rem(66);
+  z-index: 1;
+  left: px-to-rem(-4);
+  .main-container {
+    padding: px-to-rem(10);
+    .img-txt {
+      position: relative;
+      .img {
+        width: 100%;
+      }
+      :deep(.el-image__inner) {
+        height: px-to-rem(166);
+        width: 100%;
+      }
+      .txt {
+        width: px-to-rem(337);
+        height: px-to-rem(30);
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: px-to-rem(4);
+        font-weight: bold;
+        font-size: px-to-rem(14);
+        color: #ffffff;
+        line-height: px-to-rem(30);
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        text-align: left;
+        padding-left: px-to-rem(10);
+      }
     }
-    .icon-item{
-        position: relative;
-        height: px-to-rem(18);
-        .img1{
-            position: absolute;
-            top: px-to-rem(0);
-            z-index: 1;
+    .list {
+      display: flex;
+      justify-content: space-between;
+      margin-top: px-to-rem(10);
+      background: rgba(79, 159, 255, 0.2);
+      border-radius: px-to-rem(4);
+      border: 1px solid #4f9fff;
+      padding: px-to-rem(5);
+      height: px-to-rem(93);
+      .left .img {
+        width: px-to-rem(100);
+        height: px-to-rem(80);
+        :deep(.el-image__inner) {
+          height: px-to-rem(80);
         }
-        .img2{
-            width: px-to-rem(328);
-            height: px-to-rem(11);
-            position: absolute;
-            left: px-to-rem(8);
-            top: px-to-rem(4);
+      }
+      .right {
+        font-weight: 500;
+        font-size: px-to-rem(14);
+        color: #ffffff;
+        position: relative;
+        .date {
+          font-weight: 400;
+          font-size: px-to-rem(14);
+          color: #ffffff;
+          margin-top: px-to-rem(9);
+          margin-bottom: px-to-rem(10);
         }
-        .img3{
-            position: absolute;
-            top: px-to-rem(0);
-            right: 0;
-            z-index: 1;
+        .detailBtn {
+          width: px-to-rem(48);
+          height: px-to-rem(24);
+          background: linear-gradient(0deg, #468adb 0%, #366dae 100%);
+          border-radius: px-to-rem(4);
+          border: px-to-rem(1) solid;
+          font-weight: 400;
+          font-size: px-to-rem(14);
+          color: #ffffff;
+          position: absolute;
+          right: 0;
+          text-align: center;
+          bottom: px-to-rem(4);
         }
+      }
+    }
+  }
+  .icon-item {
+    position: relative;
+    height: px-to-rem(18);
+    .img1 {
+      position: absolute;
+      top: px-to-rem(0);
+      z-index: 1;
+    }
+    .img2 {
+      width: px-to-rem(328);
+      height: px-to-rem(11);
+      position: absolute;
+      left: px-to-rem(8);
+      top: px-to-rem(4);
     }
-    .info{
-        display: flex;
-        justify-content: space-between;
+    .img3 {
+      position: absolute;
+      top: px-to-rem(0);
+      right: 0;
+      z-index: 1;
+    }
+  }
+  .info {
+    display: flex;
+    justify-content: space-between;
+    font-weight: bold;
+    font-size: px-to-rem(14);
+    color: #ffffff;
+    margin-top: px-to-rem(6);
+    padding-bottom: px-to-rem(6);
+    border-bottom: px-to-rem(1) solid #5980a9;
+  }
+  .base-info-card {
+    display: flex;
+    justify-content: space-between;
+    margin-top: px-to-rem(10);
+    .base-info-item {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: px-to-rem(5);
+      justify-content: space-around;
+      width: 30%;
+      span {
         font-weight: bold;
+        font-size: px-to-rem(12);
+        color: #c4c6c8;
+      }
+      .value {
         font-size: px-to-rem(14);
-        color: #FFFFFF;
-        margin-top: px-to-rem(6);
-        padding-bottom: px-to-rem(6);
-        border-bottom: px-to-rem(1) solid #5980A9;
+        margin-top: px-to-rem(5);
+        color: #ffffff;
+      }
+      .yellow {
+        color: #d6a042;
+      }
+      .blue {
+        color: #81b1f5;
+      }
+      .green {
+        color: #80f5ff;
+      }
     }
-    .base-info-card{
-        display: flex;
-        justify-content: space-between;
-        margin-top: px-to-rem(10);
-        .base-info-item {
-            display: flex;
-            flex-direction: column;
-            margin-bottom: px-to-rem(5);
-            width: 30%;
-            span {
-                font-weight: bold;
-                font-size: px-to-rem(12);
-                color: #c4c6c8;
-            }
-            .value {
-                font-size: px-to-rem(14);
-                margin-top: px-to-rem(5);
-                color: #FFFFFF;
-            }
-            .yellow{
-                color: #D6A042;
-            }
-            .blue{
-                color: #81B1F5;
-            }
-            .green{
-                color: #80F5FF;
-            }
-        }
+  }
+  .m0 {
+    margin-top: 0;
+  }
+  .table-card {
+    border: px-to-rem(1) solid #6b87b1;
+    background: #182c44;
+    margin-bottom: px-to-rem(5);
+    .title {
+      background: #3b5071;
+      font-weight: bold;
+      font-size: px-to-rem(14);
+      color: #ffffff;
+      height: px-to-rem(24);
+      line-height: px-to-rem(24);
+      padding-left: px-to-rem(11);
     }
-    .m0{
-        margin-top: 0;
+    .base-info-card {
+      padding: 0 px-to-rem(10);
+      .base-info-item {
+        border-right: px-to-rem(1) solid #3a4148;
+        width: 33%;
+      }
+      .base-info-item:last-child {
+        border-right: 0;
+      }
+      .pl20 {
+        padding-left: px-to-rem(20);
+      }
     }
-    .table-card{
-        border: px-to-rem(1) solid #6B87B1;
-        background: #182C44;
-        margin-bottom: px-to-rem(5);
-        .title{
-            background: #3B5071;
-            font-weight: bold;
-            font-size: px-to-rem(14);
-            color: #FFFFFF;
-            height: px-to-rem(24);
-            line-height: px-to-rem(24);
-            padding-left: px-to-rem(11);
+  }
+  .icon-card-container {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 px-to-rem(10);
+    .area {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      img {
+        width: px-to-rem(47);
+        height: px-to-rem(49);
+        margin-right: px-to-rem(8);
+      }
+      .areainfo {
+        .title,
+        .km {
+          font-weight: bold;
+          font-size: px-to-rem(12);
+          color: #c4c6c8;
         }
-        .base-info-card{
-            padding: 0 px-to-rem(10);
-            .base-info-item{
-                border-right: px-to-rem(1) solid #3A4148;
-                width:33%;
-            }
-            .base-info-item:last-child{
-                border-right: 0;
-            }
-            .pl20{
-                padding-left: px-to-rem(20);
-            }
+        .blue {
+          color: #81b1f5;
         }
-    }
-    .icon-card-container{
-        display: flex;
-        justify-content: space-between;
-        padding: 0 px-to-rem(10);
-        .area{
-            align-items: center;
-            display: flex;
-            justify-content: space-between;
-            img{
-                width:  px-to-rem(47);
-                height:  px-to-rem(49);
-                margin-right: px-to-rem(8);
-            }
-            .areainfo{
-                .title,.km{
-                    font-weight: bold;
-                    font-size: px-to-rem(12);
-                    color: #c4c6c8;
-                }
-                .blue{
-                    color: #81B1F5;
-                }
-                .green{
-                    color: #80F5FF;
-                }
-            }
+        .green {
+          color: #80f5ff;
         }
+      }
     }
+  }
 }
 </style>

src/views/hydrologic-info/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="container">
+    <Left></Left>
+    <Right></Right>
+  </div>
+</template>
+
+<script>
+import Left from './left.vue'
+import Right from './right.vue'
+export default {
+    components:{
+        Left,Right
+    }
+}
+</script>
+
+<style>
+
+</style>

src/views/hydrologic-info/left.vue

@@ -0,0 +1,114 @@
+<template>
+  <BasePanelLeft>
+    <div class="hydrologic-container">
+      <BaseMain title="水文监测点总览">
+        <template v-slot:headerR>
+          <el-radio-group v-model="dateVal" size="mini" class="dateRadio">
+            <el-radio-button label="1">近7日</el-radio-button>
+            <el-radio-button label="2">近30日</el-radio-button>
+            <el-radio-button label="3">近3个月</el-radio-button>
+          </el-radio-group>
+        </template>
+        <template v-slot:mainArea>
+          <div class="main-container">
+            <div class="sector-info">
+              <img src="@/assets/image/hydrologic/sectorBg.png" />
+              <div class="info">
+                <div class="row">
+                  <div class="col">在线率：</div>
+                  <div class="col bg"><span>2个</span><span>100%</span></div>
+                </div>
+                <div class="row">
+                  <div class="col">设备总数：</div>
+                  <div class="col">2个</div>
+                </div>
+                <div class="row">
+                  <div class="col">离线数：</div>
+                  <div class="col">2个</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </BaseMain>
+      <BaseMain title="水文监测点信息">
+        <template v-slot:mainArea> </template>
+      </BaseMain>
+      <BaseMain title="今日气象监测">
+        <template v-slot:mainArea> </template>
+      </BaseMain>
+    </div>
+  </BasePanelLeft>
+</template>
+
+<script>
+import BasePanelLeft from '@/components/base-panel/base-panel-left'
+import BaseMain from '@/components/base-main/base-main.vue'
+export default {
+  data() {
+    return {
+      dateVal: 1
+    }
+  },
+  components: {
+    BasePanelLeft,
+    BaseMain
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hydrologic-container {
+  position: absolute;
+  top: px-to-rem(66);
+  z-index: 1;
+  left: px-to-rem(-4);
+  .dateRadio {
+    :deep(.el-radio-button__inner) {
+      background: transparent;
+      color: #4f9fff;
+      border-color: #4f9fff;
+      font-size: px-to-rem(14);
+      font-weight: 400;
+      padding: px-to-rem(5);
+    }
+    :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
+      background-color: rgba(79, 159, 255, 0.8);
+      font-weight: 400;
+      color: #f2f6ff;
+    }
+  }
+  .main-container {
+    padding: px-to-rem(22) px-to-rem(14);
+    .sector-info {
+      display: flex;
+      img {
+        width: px-to-rem(133);
+        height: px-to-rem(74);
+      }
+      .info {
+        font-weight: 500;
+        font-size: px-to-rem(14);
+        color: #ffffff;
+        .row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: px-to-rem(14);
+          .col span {
+            font-weight: bold;
+            font-size: px-to-rem(16);
+            color: #0dc985;
+            &:first-child {
+              margin-right: px-to-rem(19);
+            }
+          }
+          .bg{
+            // background:  linear-gradient(0deg, #0670B4 0%);;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/hydrologic-info/right.vue

@@ -0,0 +1,67 @@
+<template>
+  <BasePanelRight>
+        <div class="hydrologic-container">
+             <BaseMain title="异常信息分析">
+                 <template v-slot:headerR>
+                    <el-radio-group v-model="dateVal" size="mini" class="dateRadio">
+                        <el-radio-button label="1">近7日</el-radio-button>
+                        <el-radio-button label="2">近30日</el-radio-button>
+                        <el-radio-button label="3">近3个月</el-radio-button>
+                    </el-radio-group>
+                </template>
+                <template v-slot:mainArea>
+
+                </template>
+            </BaseMain>
+            <BaseMain title="监测信息统计">
+                <template v-slot:mainArea>
+                    
+                </template>
+            </BaseMain>
+            <BaseMain title="水文综合分析">
+                <template v-slot:mainArea>
+                    
+                </template>
+            </BaseMain>
+        </div>
+  </BasePanelRight>
+</template>
+
+<script>
+import BasePanelRight from '@/components/base-panel/base-panel-right'
+import BaseMain from '@/components/base-main/base-main.vue'
+export default {
+    data(){
+        return{
+            dateVal:1
+        }
+    },
+    components:{
+        BasePanelRight,BaseMain
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.hydrologic-container{
+    position: absolute;
+    top: px-to-rem(66);
+    z-index: 1;
+    left: px-to-rem(-4);
+     .dateRadio{
+        :deep(.el-radio-button__inner) {
+            background: transparent;
+            color: #4F9FFF;
+            border-color: #4F9FFF;
+            font-size: px-to-rem(14);
+            font-weight: 400;
+            padding: px-to-rem(5);
+        }
+        :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
+            background-color:  rgba(79,159,255,0.8);
+            font-weight: 400;
+            color: #F2F6FF;
+        }
+    }
+}
+</style>

src/views/index.vue

@@ -13,6 +13,7 @@
           <SafetyInspectionLeft v-if="mainMenu === '安全巡查'"></SafetyInspectionLeft>
           <SafetyInspectionRight v-if="mainMenu === '安全巡查'"></SafetyInspectionRight>
           <ComprehensiveOverview v-if="mainMenu === '综合概览'"></ComprehensiveOverview>
+          <HydrologicInfo v-if="mainMenu === '水文信息'"></HydrologicInfo>
         </div>
       </el-main>
     </el-container>
@@ -29,10 +30,11 @@ import SandMonitorRight from './sand-monitor/right.vue'
 import SafetyInspectionLeft from './safety-inspection/left.vue'
 import SafetyInspectionRight from './safety-inspection/right.vue'
 import ComprehensiveOverview from '@/views/comprehensive-overview/index'
+import HydrologicInfo from '@/views/hydrologic-info/index'
 const basePathUrl = window.basePathUrl || ''
 export default {
   name: 'MainView',
-  components: { MainMap, LayerListPanel, menuPanel, SandMonitorLeft, SandMonitorRight, SafetyInspectionLeft, SafetyInspectionRight, ComprehensiveOverview },
+  components: { MainMap, LayerListPanel, menuPanel, SandMonitorLeft, SandMonitorRight,SafetyInspectionLeft, ComprehensiveOverview,SafetyInspectionRight,HydrologicInfo },
   computed: {
     ...mapState({
       mainMenu: (state) => state.home.mainMenu