diff --git a/frontend/src/components/RightDrawer/index.vue b/frontend/src/components/RightDrawer/index.vue
index f199a89..eb0ef97 100644
--- a/frontend/src/components/RightDrawer/index.vue
+++ b/frontend/src/components/RightDrawer/index.vue
@@ -19,7 +19,7 @@
         <div @click="handleToggle" class="drawerController">
           <img src="../../assets/components/arrow-right.png" alt="">
         </div>
-        <div style="padding:16px 16px 0">
+        <div style="padding:16px 8px 0;" class="text_she">
           <slot />
         </div>
       </a-drawer>
@@ -100,4 +100,10 @@ const handleToggle = () => {
     justify-content: center;
     align-items: center;
 }
+.text_she{
+  font-size: 14px;
+  color:#262626;
+  font-variant: tabular-nums;
+      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/developStatusChart/index.vue b/frontend/src/components/developStatusChart/index.vue
index 3a3b524..b4f78fd 100644
--- a/frontend/src/components/developStatusChart/index.vue
+++ b/frontend/src/components/developStatusChart/index.vue
@@ -54,7 +54,7 @@ const initChart = () => {
             itemWidth: 14,
             itemHeight: 14,
             itemStyle: {
-                borderRadius: 3
+                borderRadius: 0
             },
             textStyle: {
                 fontSize: 11
@@ -69,7 +69,7 @@ const initChart = () => {
                 center: ['35%', '50%'], // 整体向下移动一点
                 avoidLabelOverlap: false,
                 itemStyle: {
-                    borderRadius: 5,
+                    borderRadius: 0,
                     borderColor: '#fff',
                     borderWidth: 1
                 },
diff --git a/frontend/src/components/engEnvironmentData/index.vue b/frontend/src/components/engEnvironmentData/index.vue
index 5b5c070..61a8e58 100644
--- a/frontend/src/components/engEnvironmentData/index.vue
+++ b/frontend/src/components/engEnvironmentData/index.vue
@@ -53,6 +53,7 @@ onMounted(() => {
     padding: 0px 5px;
     background: #fff;
     border-radius: 4px;
+    width: 100%;
 
     .title {
         font-size: 14px;
diff --git a/frontend/src/modules/dianxingcuoshijieshao/index.vue b/frontend/src/modules/dianxingcuoshijieshao/index.vue
new file mode 100644
index 0000000..e722964
--- /dev/null
+++ b/frontend/src/modules/dianxingcuoshijieshao/index.vue
@@ -0,0 +1,162 @@
+<!-- SidePanelItem.vue -->
+<template>
+    <div class="carousel-container">
+        <SidePanelItem title="典型设施介绍">
+            <div v-if="carouselData.length > 0" class="carousel-wrapper">
+                <a-carousel v-model:current="currentIndex" autoplay class="tech-carousel"
+                    :dot-style="{ bottom: '0px' }">
+                    <div v-for="(item, index) in carouselData" :key="index" class="carousel-item">
+                        <div class="image-container">
+                            <img :src="item.image" :alt="item.title" class="carousel-image" />
+                        </div>
+                    </div>
+                </a-carousel>
+
+                <!-- 文字描述区域 -->
+                <div v-if="carouselData[currentIndex]" class="description-container">
+                    <p class="item-description">{{ carouselData[currentIndex].description }}</p>
+                </div>
+            </div>
+            <div v-else>
+                <a-empty />
+            </div>
+        </SidePanelItem>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+
+// 定义组件名（便于调试和递归）
+defineOptions({
+    name: 'dianxingcuoshijieshao'
+});
+
+// 当前轮播索引
+const currentIndex = ref(0);
+
+// 轮播图数据
+const carouselData = ref([
+    {
+        title: '叠梁门',
+        description: '叠梁门是一种用于调节水库流量和控制水位的设施。在低温季节，可以通过控制叠梁门的开闭程度来调节流量，减少低温水体的进...',
+        image: 'https://img.shetu66.com/2024/02/19/170835076078361368.png' // 替换为实际图片路径
+    },
+    {
+        title: '环保设施',
+        description: '现代化环保设施，采用先进技术，有效处理工业废水废气，实现达标排放，保护生态环境...',
+        image: 'https://img.shetu66.com/2024/02/19/170835076078361368.png'
+    },
+    {
+        title: '智能监控',
+        description: '24 小时智能监控系统，实时监测设备运行状态，确保设施安全稳定运行...',
+        image: 'https://img.shetu66.com/2024/02/19/170835076078361368.png'
+    },
+    {
+        title: '水处理系统',
+        description: '高效水处理系统，通过多级过滤和生物处理，实现水资源循环利用...',
+        image: 'https://img.shetu66.com/2024/02/19/170835076078361368.png'
+    }
+]);
+
+// 页面加载时执行的逻辑
+onMounted(() => {
+    // 可以在这里加载实际的图片数据
+});
+</script>
+
+<style lang="scss" scoped>
+.carousel-container {
+    width: 415px;
+    padding-right: 12px;
+}
+
+.carousel-wrapper {
+    width: 100%;
+
+    :deep(.ant-carousel) {
+        width: 100%;
+
+        .slick-slide {
+            height: auto !important;
+        }
+
+        .slick-dots {
+            bottom: 0px !important;
+            margin: 0;
+            padding: 8px 0;
+            display: flex;
+            justify-content: center;
+            gap: 6px;
+
+            li {
+                width: 6px;
+                height: 6px;
+                margin: 0;
+                background-color: transparent;
+                border-radius: 50%;
+
+                button {
+                    width: 6px;
+                    height: 6px;
+                    background-color: #005293;
+                    opacity: 0.3;
+                    border-radius: 50%;
+                    transition: all 0.3s;
+                    padding: 0;
+                    border: none;
+                }
+
+                &.slick-active button {
+                    width: 8px;
+                    height: 8px;
+                    opacity: 1;
+                    background-color: #005293;
+                }
+            }
+        }
+    }
+}
+
+.carousel-item {
+    display: block;
+}
+
+.image-container {
+    width: 100%;
+    background-color: #f5f0e1; // 米黄色背景
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.carousel-image {
+    width: 100%;
+    height: auto;
+    display: block;
+    object-fit: contain; // 保持图片比例，完整显示
+}
+
+.description-container {
+    padding: 12px 0 0 0;
+    text-align: left;
+}
+
+.item-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1f1f1f;
+    margin: 0 0 8px 0;
+    line-height: 1.5;
+}
+
+.item-description {
+    font-size: 14px;
+    color: #595959;
+    margin: 0;
+    line-height: 1.8;
+    text-align: justify;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/modules/huanbaoMod/index.vue b/frontend/src/modules/huanbaoMod/index.vue
new file mode 100644
index 0000000..50f44bd
--- /dev/null
+++ b/frontend/src/modules/huanbaoMod/index.vue
@@ -0,0 +1,134 @@
+<!-- SidePanelItem.vue -->
+<template>
+    <div>
+        <SidePanelItem title="环保设施情况">
+            <div class="facility-grid">
+                <div v-for="facility in facilities" :key="facility.name" class="facility-card">
+                    <div class="facility-icon">
+                        <component :is="facility.icon" />
+                    </div>
+                    <div class="facility-info">
+                        <div class="facility-name">{{ facility.name }}</div>
+                        <div> <span class="facility-count">{{ facility.count }}</span> 个</div>
+                    </div>
+                </div>
+            </div>
+        </SidePanelItem>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import {
+    // DropletOutlined, 
+    // ThermometerOutlined, 
+    HomeOutlined,
+    FileTextOutlined,
+    // FishOutlined, 
+    EnvironmentOutlined,
+    HeartOutlined
+} from '@ant-design/icons-vue';
+
+// 定义组件名（便于调试和递归）
+defineOptions({
+    name: 'huanbaoMod'
+});
+
+// 设施数据
+const facilities = ref([
+    {
+        name: '生态流量泄放设施',
+        count: 145,
+        // icon: DropletOutlined
+    },
+    {
+        name: '低温水减缓设施',
+        count: 24,
+        // icon: ThermometerOutlined
+    },
+    {
+        name: '栖息地',
+        count: 142,
+        icon: HomeOutlined
+    },
+    {
+        name: '过鱼设施',
+        count: 60,
+        icon: FileTextOutlined
+    },
+    {
+        name: '鱼类增殖站',
+        count: 69,
+        // icon: FishOutlined
+    },
+    {
+        name: '珍稀植物园',
+        count: 41,
+        icon: EnvironmentOutlined
+    },
+    {
+        name: '动物救助站',
+        count: 4,
+        icon: HeartOutlined
+    }
+]);
+
+// 页面加载时执行的逻辑
+onMounted(() => {
+
+});
+</script>
+
+<style lang="scss" scoped>
+.facility-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+.facility-card {
+    display: flex;
+    align-items: center;
+    padding: 6px;
+    background: #fff;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    transition: all 0.3s;
+    cursor: pointer;
+}
+
+.facility-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    margin-right: 8px;
+    background: #2f6b98;
+    border-radius: 50%;
+
+    .anticon {
+        font-size: 24px;
+        color: #fff;
+    }
+}
+
+.facility-info {
+    flex: 1;
+}
+
+.facility-name {
+    font-size: 16px;
+    color: #333;
+    margin-bottom: 4px;
+    // font-weight: 500;
+}
+
+.facility-count {
+    font-size: 18px;
+    color: #2f6b98;
+    font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/modules/huanbaozdjcgzkzQK/index.vue b/frontend/src/modules/huanbaozdjcgzkzQK/index.vue
new file mode 100644
index 0000000..5a15bc2
--- /dev/null
+++ b/frontend/src/modules/huanbaozdjcgzkzQK/index.vue
@@ -0,0 +1,133 @@
+<!-- SidePanelItem.vue -->
+<template>
+    <div>
+        <SidePanelItem title="环保自动监测工作开展情况">
+            <div class="facility-grid">
+                <div v-for="facility in facilities" :key="facility.name" class="facility-card">
+                    <div class="facility-icon">
+                        <component :is="facility.icon" />
+                    </div>
+                    <div class="facility-info">
+                        <div class="facility-name">{{ facility.name }}</div>
+                        <div> <span class="facility-count">{{ facility.count }}</span> 个</div>
+                    </div>
+                </div>
+            </div>
+        </SidePanelItem>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import {
+    // DropletOutlined, 
+    // ThermometerOutlined, 
+    HomeOutlined,
+    FileTextOutlined,
+    // FishOutlined, 
+    EnvironmentOutlined,
+    HeartOutlined
+} from '@ant-design/icons-vue';
+
+// 定义组件名（便于调试和递归）
+defineOptions({
+    name: 'huanbaoMod'
+});
+
+// 设施数据
+const facilities = ref([
+    {
+        name: '生态流量泄放设施',
+        count: 145,
+        // icon: DropletOutlined
+    },
+    {
+        name: '低温水减缓设施',
+        count: 24,
+        // icon: ThermometerOutlined
+    },
+    {
+        name: '栖息地',
+        count: 142,
+        icon: HomeOutlined
+    },
+    {
+        name: '过鱼设施',
+        count: 60,
+        icon: FileTextOutlined
+    },
+    {
+        name: '鱼类增殖站',
+        count: 69,
+        // icon: FishOutlined
+    },
+    {
+        name: '珍稀植物园',
+        count: 41,
+        icon: EnvironmentOutlined
+    },
+    {
+        name: '动物救助站',
+        count: 4,
+        icon: HeartOutlined
+    }
+]);
+
+// 页面加载时执行的逻辑
+onMounted(() => {
+
+});
+</script>
+
+<style lang="scss" scoped>
+.facility-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+}
+
+.facility-card {
+    display: flex;
+    align-items: center;
+    padding: 6px;
+    background: #fff;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    transition: all 0.3s;
+    cursor: pointer;
+}
+
+.facility-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    margin-right: 8px;
+    background: #2f6b98;
+    border-radius: 50%;
+
+    .anticon {
+        font-size: 24px;
+        color: #fff;
+    }
+}
+
+.facility-info {
+    flex: 1;
+}
+
+.facility-name {
+    font-size: 16px;
+    color: #333;
+    margin-bottom: 4px;
+    // font-weight: 500;
+}
+
+.facility-count {
+    font-size: 18px;
+    color: #2f6b98;
+    font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/modules/shengtaidabiaoMod/index.vue b/frontend/src/modules/shengtaidabiaoMod/index.vue
new file mode 100644
index 0000000..742bb27
--- /dev/null
+++ b/frontend/src/modules/shengtaidabiaoMod/index.vue
@@ -0,0 +1,190 @@
+<!-- SidePanelItem.vue -->
+<template>
+    <div>
+        <SidePanelItem title="生态流量达标情况" :clickprompt="obj">
+            <div class="body_topOne">
+                <a-radio-group v-model:value="mode">
+                    <a-radio-button value="top">逐时</a-radio-button>
+                    <a-radio-button value="left">日</a-radio-button>
+                </a-radio-group>
+                <div class="title_text">≥95%座数/总座数</div>
+            </div>
+            <a-spin :spinning="spinning">
+                <div>
+                    <div v-for="el in datalist">
+                        <div :key='el.key'>
+                            <div class="boy_one">
+                                <div style="flex: 1; white-space: nowrap;margin-right: 5px;">{{ el.name }}</div>
+                                <img style="flex: 1;" src="@/assets/components/fgx.svg" alt="">
+                            </div>
+                            <div class="body_zhu">
+                                <div class="body_biao">
+                                    <div v-for="value in allArr">
+                                        <div :key="value" class="nei_body">
+                                            <div v-if="value < (el?.key == null ? 1 : el.qecTCnt == 0 ? 0 : el.qecCnt / el.qecTCnt) * 20"
+                                                class="little_body" :style="{ backgroundColor: el.color }"></div>
+                                        </div>
+                                    </div>
+
+                                </div>
+                                <div class="body_text">
+                                    {{ el.qecCnt }}/{{ el.qecTCnt }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </a-spin>
+
+
+        </SidePanelItem>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+
+
+// 定义组件名（便于调试和递归）
+defineOptions({
+    name: 'shengtaidabiaoMod'
+});
+const obj =
+{
+    show: true,
+    value: '1、统计电站范围：接入过生态流量数据的电站,2、当来水不足时，生态流量不小于入库流量判定为达标,3、“≥95%座数”表示统计电站范围内时段达标率大于等于95%的电站数量',
+}
+const mode = ref('top');
+const dataArr: any = ref([
+    {
+        name: '生态环境部门要求',
+        qecCnt: '41', // 座数
+        qecTCnt: '55', //总座数
+        type: 1
+
+    },
+    {
+        name: '水利部门要求',
+        qecCnt: '41', // 座数
+        qecTCnt: '55', //总座数
+        type: 2
+    }
+])
+const list: any = ref(
+    [
+        { name: '生态环境部门要求', type: 1, color: '#77C300', key: 'qecInterval' },
+        { name: '水利部门要求', type: 2, color: '#56C3E3', key: 'mwrInterval' },
+        { name: '多年平均流量 10%', type: 3, color: '#F76B01', key: 'avqInterval' },
+        { name: '无生态流量要求', type: 4, color: '#B4B4B4', key: null },
+    ]
+)
+const datalist: any = ref([])
+const allArr: any = ref(Array.from({ length: 20 }, (_, i) => i))
+const spinning = ref(false)
+// 根据 type 将 list 中的数据合并到 dataArr 中
+const setStyle = () => {
+    if (dataArr.value.length == 0) {
+        return false
+    }
+    dataArr.value.forEach((item: any) => {
+        // 在 list 中找到 type 匹配的数据
+        const matched = list.value.find((listItem: any) => listItem.type === item.type)
+        if (matched) {
+            // 合并数据，dataArr 的属性优先
+            datalist.value.push({
+                ...matched,
+                ...item,
+            })
+        }
+    })
+    console.log(datalist.value)
+}
+
+// 页面加载时执行的逻辑
+onMounted(() => {
+    setStyle()
+});
+</script>
+
+<style lang="scss" scoped>
+.body_topOne {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+
+    .title_text {
+        font-size: 16px;
+    }
+}
+
+.boy_one {
+    display: flex;
+    align-items: center;
+    margin: 5px 0px;
+}
+
+.body_zhu {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+
+    .body_biao {
+        width: 100%;
+        height: 52px;
+        border: 1px solid #ccdae7;
+        border-radius: 2px;
+        display: flex;
+        padding: 5px 1px;
+        overflow: hidden;
+
+        .nei_body {
+            width: 12px;
+            height: 100%;
+            border: 1px solid #ccdae7;
+            padding: 2px;
+            margin-left: 4px;
+
+            .little_body {
+                width: 100%;
+                height: 100%;
+
+            }
+        }
+    }
+
+    .body_text {
+        display: flex;
+        flex-direction: column;
+        width: 90px;
+        height: 100%;
+        justify-content: space-around;
+        margin-left: 6px;
+        align-items: center;
+        font-size: 18px;
+        font-weight: 500;
+    }
+}
+
+.ant-radio-group {
+    // border: 3px solid #2f6b98 !important;
+    // border-radius: 10px !important;
+
+    .ant-radio-button-wrapper-checked {
+        border: 1px solid #2f6b98 !important;
+        background-color: #2f6b98 !important;
+        color: #fff !important;
+    }
+
+    .ant-radio-button-wrapper {
+        border: 2px solid #2f6b98 !important;
+    }
+
+    .ant-radio-button-wrapper-checked :before {
+        background-color: #2f6b98 !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/modules/shengtaidabiaoTwoMod/index.vue b/frontend/src/modules/shengtaidabiaoTwoMod/index.vue
new file mode 100644
index 0000000..e829b86
--- /dev/null
+++ b/frontend/src/modules/shengtaidabiaoTwoMod/index.vue
@@ -0,0 +1,215 @@
+<template>
+    <div>
+        <SidePanelItem title="生态流量达标情况" :clickprompt="obj">
+            <div class="body_topOne">
+                <a-radio-group v-model:value="mode">
+                    <a-radio-button value="top">按基地</a-radio-button>
+                    <a-radio-button value="left">按调节性能</a-radio-button>
+                </a-radio-group>
+            </div>
+            <a-spin :spinning="spinning">
+                <div ref="chartRef" class="chart-container"></div>
+            </a-spin>
+        </SidePanelItem>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch } from 'vue';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import * as echarts from 'echarts';
+
+
+// 定义组件名（便于调试和递归）
+defineOptions({
+    name: 'shengtaidabiaoMod'
+});
+const obj =
+{
+    show: true,
+    value: '1、统计电站范围：接入过生态流量数据的电站，2、当来水不足时，生态流量不小于入库流量判定为达标，3、"≥95% 座数"表示统计电站范围内时段达标率大于等于 95% 的电站数量',
+}
+const mode = ref('top');
+const spinning = ref(false)
+const chartRef = ref<HTMLElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+
+// 模拟数据
+const categoryData = [
+    '其他', '闽浙赣', '澜沧江干流', '东北', '南盘江·红水河',
+    '黄河中游干流', '黄河上游干流', '湘西', '长江上游干流',
+    '乌江干流', '大渡河干流', '雅砻江干流', '金沙江干流'
+];
+const currentData = Array(13).fill(0).map(() => Math.random() * 5 + 86);
+const lastYearData = Array(13).fill(0).map(() => Math.random() * 5 + 86);
+
+// 初始化图表
+const initChart = () => {
+    if (!chartRef.value) return;
+    
+    // 如果实例存在，先销毁
+    if (chartInstance) {
+        chartInstance.dispose();
+    }
+    
+    chartInstance = echarts.init(chartRef.value);
+    
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            formatter: function(params: any) {
+                let result = params[0].name + '<br/>';
+                params.forEach((param: any) => {
+                    const percentage = param.value.toFixed(2) + '%';
+                    result += param.marker + param.seriesName + '&nbsp;&nbsp;<b>' + percentage + '</b><br/>';
+                });
+                return result;
+            }
+        },
+        legend: {
+            data: ['当前', '去年同期'],
+            top: 0,
+            left: 'center',
+            itemWidth: 20,
+            itemHeight: 10,
+            textStyle: {
+                color: '#666'
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: '50',
+            containLabel: true
+        },
+        dataZoom: [
+            {
+                type: 'inside',
+                xAxisIndex: 0,
+                filterMode: 'empty',
+                zoomOnMouseWheel: true,
+                moveOnMouseMove: false,
+                moveOnMouseWheel: true,
+                start: 0,
+                end: 100,
+                minValueSpan: 0,
+                maxValueSpan: 20
+            }
+        ],
+        xAxis: {
+            type: 'value',
+            min: 80,
+            max: 100,
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#E8E8E8',
+                    type: 'solid'
+                }
+            },
+            axisLabel: {
+                color: '#666',
+                formatter: '{value}'
+            }
+        },
+        yAxis: {
+            type: 'category',
+            data: categoryData,
+            inverse: true,
+            axisLabel: {
+                color: '#666',
+                fontSize: 12,
+                interval: 0,
+                rotate: 0,
+                margin: 10
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#666'
+                }
+            },
+            axisTick: {
+                show: true,
+                lineStyle: {
+                    color: '#666'
+                }
+            },
+            splitLine: {
+                show: false
+            }
+        },
+        series: [
+            {
+                name: '当前',
+                type: 'bar',
+                data: currentData,
+                itemStyle: {
+                    color: '#5470C6'
+                },
+                barWidth: 12,
+                barGap: '30%'
+            },
+            {
+                name: '去年同期',
+                type: 'bar',
+                data: lastYearData,
+                itemStyle: {
+                    color: '#91CC75'
+                },
+                barWidth: 12,
+                barGap: '30%'
+            }
+        ]
+    };
+    
+    chartInstance.setOption(option);
+};
+
+// 页面加载时执行的逻辑
+onMounted(() => {
+    initChart();
+
+    // 监听窗口大小变化
+    window.addEventListener('resize', () => {
+        chartInstance?.resize();
+    });
+});
+
+// 监听 mode 变化
+watch(mode, () => {
+    // 这里可以根据 mode 的值重新加载数据
+    initChart();
+});
+</script>
+
+<style lang="scss" scoped>
+.ant-radio-group {
+    // border: 3px solid #2f6b98 !important;
+    // border-radius: 10px !important;
+
+    .ant-radio-button-wrapper-checked {
+        border: 1px solid #2f6b98 !important;
+        background-color: #2f6b98 !important;
+        color: #fff !important;
+    }
+
+    .ant-radio-button-wrapper {
+        border: 2px solid #2f6b98 !important;
+    }
+
+    .ant-radio-button-wrapper-checked :before {
+        background-color: #2f6b98 !important;
+    }
+}
+
+.chart-container {
+    width: 100%;
+    height: 500px;
+    padding: 10px;
+}
+</style>
diff --git a/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue b/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue
index 0ba3d7a..3bb47cf 100644
--- a/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue
+++ b/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue
@@ -211,7 +211,7 @@ onMounted(() => {
 
 .custom-table {
     :deep(.ant-table) {
-        font-size: 13px;
+        font-size: 14px;
         border: 1px solid #e8e8e8;
 
         .ant-table-thead {
@@ -219,7 +219,7 @@ onMounted(() => {
                 >th {
                     background-color: #e5eff8 !important;
                     color: #2f6b98;
-                    font-weight: 600;
+                    // font-weight: 600;
                     border: 1px solid #e8e8e8 !important;
                     padding: 6px 8px;
                     text-align: center;
@@ -251,7 +251,7 @@ onMounted(() => {
 
                     &:first-child {
                         text-align: left;
-                        font-weight: 500;
+                        // font-weight: 500;
                     }
                 }
 
@@ -276,7 +276,7 @@ onMounted(() => {
                     .footer-item {
                         flex: 1;
                         text-align: center;
-                        font-weight: 600;
+                        // font-weight: 600;
                         color: #333;
 
                         &:first-child {
diff --git a/frontend/src/views/home/huanBaoSheShiYunXingZhuangKuang.vue b/frontend/src/views/home/huanBaoSheShiYunXingZhuangKuang.vue
index 1ad3d4e..943a2c2 100644
--- a/frontend/src/views/home/huanBaoSheShiYunXingZhuangKuang.vue
+++ b/frontend/src/views/home/huanBaoSheShiYunXingZhuangKuang.vue
@@ -1,5 +1,36 @@
+<script setup lang="ts">
+import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
+import RightDrawer from "@/components/RightDrawer/index.vue";
+import HuanbaoMod from "@/modules/huanbaoMod/index.vue" // 环保设施建设情况
+import Dianxingcuoshijieshao from "@/modules/dianxingcuoshijieshao/index.vue" // 环保设施建设情况
+</script>
+
 <template>
-  <div>
-    <h1>环保设施情况</h1>
+  <div class="all_width">
+    <div class="moduleContent">
+      <div class="leftContent">
+        <JidiSelectorMod />
+      </div>
+      <div class="rightContent">
+        <RightDrawer>
+            <HuanbaoMod />
+    <Dianxingcuoshijieshao />
+        </RightDrawer>
+      </div>
+    </div>
   </div>
 </template>
+<style lang="scss">
+.all_width{
+  width: 100%;
+   .moduleContent{
+    display: flex;
+    justify-content: space-between;
+    .rightContent{
+      height: 88vh;
+      width: 450px;
+    }
+  }
+}
+ 
+</style>
diff --git a/frontend/src/views/home/huanBaoZhiLiangZhuangKuang.vue b/frontend/src/views/home/huanBaoZhiLiangZhuangKuang.vue
index cc9fd2b..0bd061d 100644
--- a/frontend/src/views/home/huanBaoZhiLiangZhuangKuang.vue
+++ b/frontend/src/views/home/huanBaoZhiLiangZhuangKuang.vue
@@ -1,5 +1,34 @@
+<script setup lang="ts">
+import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
+import RightDrawer from "@/components/RightDrawer/index.vue";
+import HuanbaozdjcgzkzQK from "@/modules/huanbaozdjcgzkzQK/index.vue"
+</script>
+
 <template>
-  <div>
-    <h1>监测工作开展情况</h1>
+  <div class="all_width">
+    <div class="moduleContent">
+      <div class="leftContent">
+        <JidiSelectorMod />
+      </div>
+      <div class="rightContent">
+        <RightDrawer>
+          <HuanbaozdjcgzkzQK />
+        </RightDrawer>
+      </div>
+    </div>
   </div>
 </template>
+<style lang="scss">
+.all_width{
+  width: 100%;
+   .moduleContent{
+    display: flex;
+    justify-content: space-between;
+    .rightContent{
+      height: 88vh;
+      width: 450px;
+    }
+  }
+}
+ 
+</style>
diff --git a/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue b/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue
index 57b70a4..36e7863 100644
--- a/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue
+++ b/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue
@@ -6,7 +6,7 @@ import shuidianhuangjingjieruMod from '@/modules/shuidianhuangjingjieruMod/index
 </script>
 
 <template>
-  <div>
+  <div class="all_width">
     <div class="moduleContent">
       <div class="leftContent">
         <JidiSelectorMod />
@@ -21,11 +21,16 @@ import shuidianhuangjingjieruMod from '@/modules/shuidianhuangjingjieruMod/index
   </div>
 </template>
 <style lang="scss">
-  .moduleContent{
+.all_width{
+  width: 100%;
+   .moduleContent{
     display: flex;
     justify-content: space-between;
     .rightContent{
       height: 88vh;
+      width: 450px;
     }
   }
+}
+ 
 </style>
diff --git a/frontend/src/views/shengTaiLiuLiang/shengTaiLiuLiangManZuQingKuang.vue b/frontend/src/views/shengTaiLiuLiang/shengTaiLiuLiangManZuQingKuang.vue
index aede6af..2b5d2cf 100644
--- a/frontend/src/views/shengTaiLiuLiang/shengTaiLiuLiangManZuQingKuang.vue
+++ b/frontend/src/views/shengTaiLiuLiang/shengTaiLiuLiangManZuQingKuang.vue
@@ -1,5 +1,36 @@
+<script setup lang="ts">
+import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
+import RightDrawer from "@/components/RightDrawer/index.vue";
+import ShengtaidabiaoMod from '@/modules/shengtaidabiaoMod/index.vue' // 模块-生态流量达标情况 生态流量达标情况
+import ShengtaidabiaoTwoMod from '@/modules/shengtaidabiaoTwoMod/index.vue'
+</script>
+
 <template>
-  <div>
-    <h2>生态流量达标情况</h2>
+  <div class="all_width">
+    <div class="moduleContent">
+      <div class="leftContent">
+        <JidiSelectorMod />
+      </div>
+      <div class="rightContent">
+        <RightDrawer>
+   <ShengtaidabiaoMod />
+    <ShengtaidabiaoTwoMod />
+        </RightDrawer>
+      </div>
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+<style lang="scss">
+.all_width{
+  width: 100%;
+   .moduleContent{
+    display: flex;
+    justify-content: space-between;
+    .rightContent{
+      height: 88vh;
+      width: 450px;
+    }
+  }
+}
+ 
+</style>