diff --git a/src/views/achievement/achievementType/secondTab.vue b/src/views/achievement/achievementType/secondTab.vue
index 17aa916..383fc3d 100644
--- a/src/views/achievement/achievementType/secondTab.vue
+++ b/src/views/achievement/achievementType/secondTab.vue
@@ -95,13 +95,13 @@
     {
       dataIndex: 'date',
       key: 'date',
-      title: '时期',
+      title: '项目时期',
       width: 200,
     },
     {
-      dataIndex: 'apply',
-      key: 'apply',
-      title: '应用',
+      dataIndex: 'name',
+      key: 'name',
+      title: '项目名称',
     },
     {
       dataIndex: 'technology',
diff --git a/src/views/pollution/manage/index.vue b/src/views/pollution/manage/index.vue
index d5d3a8b..cb956a1 100644
--- a/src/views/pollution/manage/index.vue
+++ b/src/views/pollution/manage/index.vue
@@ -420,7 +420,7 @@
               </a-row>
               <a-row>
                 <a-col :span="12">
-                  <a-form-item label="TN削减(%)" name="tn">
+                  <a-form-item label="TN削减率(%)" name="tn">
                     <a-input
                       v-model:value="projectType.tn"
                       style="width: 360px"
diff --git a/src/views/water/waterEnvironment/index.vue b/src/views/water/waterEnvironment/index.vue
new file mode 100644
index 0000000..2eb95e0
--- /dev/null
+++ b/src/views/water/waterEnvironment/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <PageWrapper dense>
+    <div style="margin: 20px; border-radius: 10px; background: #fff">
+      <div class="tabBox">
+        <a-tabs v-model:activeKey="activeKey" size="large">
+          <a-tab-pane key="1" tab="水质变化">
+            <secondTab :loading="loading" :title="secondTabTitle1"/>
+          </a-tab-pane>
+          <a-tab-pane key="2" tab="富营养状况变化">
+            <singerAxis :loading="loading" />
+          </a-tab-pane>
+          <a-tab-pane key="3" tab="蓝藻水华变化">
+            <secondTab :loading="loading":title="secondTabTitle3" />
+          </a-tab-pane>
+          <a-tab-pane key="4" tab="河流水质变化" >
+            <singerBar :loading="loading" />
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </div>
+  </PageWrapper>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { PageWrapper } from '@/components/Page';
+  import secondTab from './secondTab.vue';
+  import singerAxis from './singerAxis.vue';
+  import singerBar from './singerBar.vue';
+
+  const activeKey = ref<String>('1');
+  const loading = ref(false);
+  const secondTabTitle1 = ['COD','TP','TN','其他']
+  const secondTabTitle3 = ['水体叶绿素a浓度年均变化','蓝藻富集重点水域水体叶绿素a浓度年均变化','多年蓝藻水华各月发生状况','其他']
+</script>
+<style lang="less">
+  .tabBox {
+    margin: 20px;
+  }
+
+  .title {
+    margin: 10px 0;
+    font-size: 20px;
+    font-weight: 550;
+  }
+</style>
diff --git a/src/views/water/waterEnvironment/secondTab.vue b/src/views/water/waterEnvironment/secondTab.vue
new file mode 100644
index 0000000..c5b1c84
--- /dev/null
+++ b/src/views/water/waterEnvironment/secondTab.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="tabBox">
+        <div class="md:flex enter-y">
+          <div class="md:w-1/2 w-full">
+            <Card :title="title[0]" :loading="loading">
+              <div ref="chartRef1" :style="{ width, height }"></div>
+            </Card>
+          </div>
+          <div class="md:w-1/2 w-full">
+            <Card :title="title[1]" :loading="loading">
+              <div ref="chartRef2" :style="{ width, height }"></div>
+            </Card>
+          </div>
+        </div>
+        <div class="md:flex enter-y">
+          <div class="md:w-1/2 w-full">
+            <Card :title="title[2]" :loading="loading">
+              <div ref="chartRef3" :style="{ width, height }"></div>
+            </Card>
+          </div>
+          <div class="md:w-1/2 w-full">
+            <Card :title="title[3]" :loading="loading">
+              <div ref="chartRef4" :style="{ width, height }"></div>
+            </Card>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { watch, ref, Ref, watchEffect } from 'vue';
+  import { useECharts } from '@/hooks/web/useECharts';
+  import { Card } from 'ant-design-vue';
+
+  const subTab = ref<String>('a');
+  const props = defineProps({
+    loading: Boolean,
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '300px',
+    },
+    title:{
+      type: String as PropType<any>,
+      default: '300px',
+    }
+  });
+
+
+  const chartRef1 = ref<HTMLDivElement | null>(null);
+  const chartRef2 = ref<HTMLDivElement | null>(null);
+  const chartRef3 = ref<HTMLDivElement | null>(null);
+  const chartRef4 = ref<HTMLDivElement | null>(null);
+  const setOptions1 = useECharts(chartRef1 as Ref<HTMLDivElement>).setOptions;
+  const setOptions2 = useECharts(chartRef2 as Ref<HTMLDivElement>).setOptions;
+  const setOptions3 = useECharts(chartRef3 as Ref<HTMLDivElement>).setOptions;
+  const setOptions4 = useECharts(chartRef4 as Ref<HTMLDivElement>).setOptions;
+  watch(
+    () => subTab.value,
+    () => {
+        setOptions1({
+          tooltip: {
+            trigger: 'axis',
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true,
+          },
+          legend: {
+            data: ['cod', 'tn×10', 'tp×100'],
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
+          },
+          yAxis: {
+            type: 'value',
+            name: 'COD(mg/l)', // 单位说明文本
+            nameLocation: 'end', // 文本位置（start/center/end）
+            nameTextStyle: {
+              color: '#666',
+              fontSize: 12,
+              align: 'left', // 文本对齐方向
+              padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+            },
+          },
+          series: [
+            {
+              name: 'cod',
+              data: [90, 200, 150, 80, 70,78, 123, 29, 45, 99],
+              type: 'line',
+              itemStyle: {},
+            },
+            {
+              name: 'tn×10',
+              data: [78, 123, 29, 45, 99,134, 131, 39, 67, 156],
+              type: 'line',
+              itemStyle: {},
+            },
+            {
+              name: 'tp×100',
+              data: [100, 100, 100, 100, 100,100, 100, 100, 100, 100],
+              type: 'line',
+              itemStyle: {},
+            },
+          ],
+        });
+        setOptions2({
+          tooltip: {
+            trigger: 'axis',
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true,
+          },
+          legend: {
+            data: ['cod', 'tn×10', 'tp×100'],
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
+          },
+          yAxis: {
+            type: 'value',
+            name: 'TP(mg/l)', // 单位说明文本
+            nameLocation: 'end', // 文本位置（start/center/end）
+            nameTextStyle: {
+              color: '#666',
+              fontSize: 12,
+              align: 'left', // 文本对齐方向
+              padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+            },
+          },
+          series: [
+            {
+              name: 'cod',
+              data: [90, 200, 150, 80, 70,78, 123, 29, 45, 99],
+              type: 'line',
+              itemStyle: {},
+            },
+            {
+              name: 'tn×10',
+              data: [78, 123, 29, 45, 99,134, 131, 39, 67, 156],
+              type: 'line',
+              itemStyle: {},
+            },
+            {
+              name: 'tp×100',
+              data: [100, 100, 100, 100, 100,100, 100, 100, 100, 100],
+              type: 'line',
+              itemStyle: {},
+            },
+          ],
+        });
+         setOptions3({
+          tooltip: {
+            trigger: 'axis',
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true,
+          },
+          legend: {
+            data: ['cod', 'tn×10', 'tp×100'],
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
+          },
+          yAxis: {
+            type: 'value',
+            name: 'TN(mg/l)', // 单位说明文本
+            nameLocation: 'end', // 文本位置（start/center/end）
+            nameTextStyle: {
+              color: '#666',
+              fontSize: 12,
+              align: 'left', // 文本对齐方向
+              padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+            },
+          },
+          series: [
+            {
+              name: 'cod',
+              data: [90, 200, 150, 80, 70,78, 123, 29, 45, 99],
+              type: 'line',
+              itemStyle: {},
+            },
+            {
+              name: 'tn×10',
+              data: [78, 123, 29, 45, 99,134, 131, 39, 67, 156],
+              type: 'line',
+              itemStyle: {},
+            },
+            {
+              name: 'tp×100',
+              data: [100, 100, 100, 100, 100,100, 100, 100, 100, 100],
+              type: 'line',
+              itemStyle: {},
+            },
+          ],
+        });
+        setOptions4({
+          tooltip: {
+            trigger: 'axis',
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true,
+          },
+          legend: {
+            data: ['cod', 'tn×10', 'tp×100'],
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
+          },
+          yAxis: {
+            type: 'value',
+            name: 'cod(mg/l)', // 单位说明文本
+            nameLocation: 'end', // 文本位置（start/center/end）
+            nameTextStyle: {
+              color: '#666',
+              fontSize: 12,
+              align: 'left', // 文本对齐方向
+              padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+            },
+          },
+          series: [
+            {
+              name: 'cod',
+              data: [90, 200, 150, 80, 70,78, 123, 29, 45, 99],
+              type: 'line',
+              itemStyle: {},
+            },
+            {
+              name: 'tn×10',
+              data: [78, 123, 29, 45, 99,134, 131, 39, 67, 156],
+              type: 'line',
+              itemStyle: {},
+            },
+            {
+              name: 'tp×100',
+              data: [100, 100, 100, 100, 100,100, 100, 100, 100, 100],
+              type: 'line',
+              itemStyle: {},
+            },
+          ],
+        });
+    },
+    { immediate: true },
+  );
+</script>
+<style lang="less">
+  .tabBox {
+    margin: 20px;
+  }
+  .mutiTable {
+    margin: 20px 0;
+  }
+</style>
diff --git a/src/views/water/waterEnvironment/singerAxis.vue b/src/views/water/waterEnvironment/singerAxis.vue
new file mode 100644
index 0000000..60afc30
--- /dev/null
+++ b/src/views/water/waterEnvironment/singerAxis.vue
@@ -0,0 +1,101 @@
+<template>
+    <div class="tabBox">
+      <Card title="富营养化指数" :loading="loading">
+        <div ref="chartRef1" :style="{ width, height }"></div>
+      </Card>
+    </div>
+</template>
+
+<script setup lang="ts">
+  import { watch, ref, Ref, watchEffect } from 'vue';
+  import { useECharts } from '@/hooks/web/useECharts';
+  import { Card } from 'ant-design-vue';
+
+  const subTab = ref<String>('a');
+  const props = defineProps({
+    loading: Boolean,
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '300px',
+    },
+  });
+
+  const chartRef1 = ref<HTMLDivElement | null>(null);
+  const setOptions1 = useECharts(chartRef1 as Ref<HTMLDivElement>).setOptions;
+  watch(
+    () => subTab.value,
+    () => {
+      setOptions1({
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {
+          data: ['cod', 'tn×10', 'tp×100'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [
+            '"1995"',
+            '"1996"',
+            '"1997"',
+            '"1998"',
+            '"1999"',
+            '"2000"',
+            '"2001"',
+            '"2002"',
+            '"2003"',
+            '"2004"',
+          ],
+        },
+        yAxis: {
+          type: 'value',
+          name: '富营养化指数', // 单位说明文本
+          nameLocation: 'end', // 文本位置（start/center/end）
+          nameTextStyle: {
+            color: '#666',
+            fontSize: 12,
+            align: 'left', // 文本对齐方向
+            padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+          },
+        },
+        series: [
+          {
+            name: 'cod',
+            data: [90, 200, 150, 80, 70, 78, 123, 29, 45, 99],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'tn×10',
+            data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'tp×100',
+            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
+            type: 'line',
+            itemStyle: {},
+          },
+        ],
+      });
+    },
+    { immediate: true },
+  );
+</script>
+<style lang="less">
+  .tabBox {
+    margin: 20px;
+  }
+</style>
diff --git a/src/views/water/waterEnvironment/singerBar.vue b/src/views/water/waterEnvironment/singerBar.vue
new file mode 100644
index 0000000..188709d
--- /dev/null
+++ b/src/views/water/waterEnvironment/singerBar.vue
@@ -0,0 +1,100 @@
+<template>
+    <div class="tabBox">
+      <Card title="富营养化指数" :loading="loading">
+        <div ref="chartRef1" :style="{ width, height }"></div>
+      </Card>
+    </div>
+</template>
+
+<script setup lang="ts">
+  import { watch, ref, Ref, watchEffect } from 'vue';
+  import { useECharts } from '@/hooks/web/useECharts';
+  import { Card } from 'ant-design-vue';
+
+  const subTab = ref<String>('a');
+  const props = defineProps({
+    loading: Boolean,
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '300px',
+    },
+  });
+
+  const chartRef1 = ref<HTMLDivElement | null>(null);
+  const setOptions1 = useECharts(chartRef1 as Ref<HTMLDivElement>).setOptions;
+  watch(
+    () => subTab.value,
+    () => {
+      setOptions1({
+        tooltip: {
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {
+          data: ['cod', 'tn×10', 'tp×100'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [
+            '"1995"',
+            '"1996"',
+            '"1997"',
+            '"1998"',
+            '"1999"',
+            '"2000"',
+            '"2001"',
+            '"2002"',
+            '"2003"',
+            '"2004"',
+          ],
+        },
+        yAxis: {
+          type: 'value',
+          name: '富营养化指数', // 单位说明文本
+          nameLocation: 'end', // 文本位置（start/center/end）
+          nameTextStyle: {
+            color: '#666',
+            fontSize: 12,
+            align: 'left', // 文本对齐方向
+            padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+          },
+        },
+        series: [
+          {
+            name: 'cod',
+            data: [90, 200, 150, 80, 70, 78, 123, 29, 45, 99],
+             type: 'bar',
+            itemStyle: {},
+          },
+          {
+            name: 'tn×10',
+            data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
+            type: 'bar',
+            itemStyle: {},
+          },
+          {
+            name: 'tp×100',
+            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
+            type: 'bar',
+            itemStyle: {},
+          },
+        ],
+      });
+    },
+    { immediate: true },
+  );
+</script>
+<style lang="less">
+  .tabBox {
+    margin: 20px;
+  }
+</style>