From c68ff0d0d1da90e3e8e352e262ddce016b2df5b8 Mon Sep 17 00:00:00 2001
From: wbc <942429426@qq.com>
Date: Wed, 20 Aug 2025 16:28:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B0=B4=E7=8E=AF=E5=A2=83=E6=B1=A1=E6=9F=93?=
 =?UTF-8?q?=E6=BC=94=E5=8F=98=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../analysis/components/VisitAnalysis.vue     |   2 +-
 src/views/achievement/achievementType/api.ts  |  10 +
 .../achievement/achievementType/index.vue     |  32 +-
 .../achievement/achievementType/secondTab.vue |  32 +-
 src/views/achievement/goalDistrict/api.ts     |  10 +
 src/views/achievement/goalDistrict/index.vue  | 133 +------
 src/views/achievement/goalTimes/api.ts        |  10 +
 src/views/achievement/goalTimes/index.vue     | 130 +------
 src/views/pollution/manage/manage.api.ts      |  10 +-
 src/views/pollution/manage/table.vue          |  24 +-
 .../{secondTab.vue => fourAxis.vue}           |   8 +-
 src/views/water/waterEnvironment/index.vue    |   6 +-
 .../water/waterEnvironment/singerAxis.vue     |   2 +-
 .../water/waterEnvironment/singerBar.vue      |   2 +-
 src/views/water/waterPollution/fourAxis.vue   | 342 +++++++++++++++++
 src/views/water/waterPollution/index.vue      |  45 +++
 src/views/water/waterPollution/mutiBar.vue    | 350 ++++++++++++++++++
 src/views/water/waterPollution/threeAxis.vue  | 266 +++++++++++++
 src/views/water/waterPollution/twoBar.vue     | 167 +++++++++
 .../演示使用自行删除/gitee/index.vue  |   2 +-
 .../visit/pages/loginLine.vue                 |   2 +-
 vite.config.ts                                |   2 +-
 22 files changed, 1311 insertions(+), 276 deletions(-)
 create mode 100644 src/views/achievement/achievementType/api.ts
 create mode 100644 src/views/achievement/goalDistrict/api.ts
 create mode 100644 src/views/achievement/goalTimes/api.ts
 rename src/views/water/waterEnvironment/{secondTab.vue => fourAxis.vue} (98%)
 create mode 100644 src/views/water/waterPollution/fourAxis.vue
 create mode 100644 src/views/water/waterPollution/index.vue
 create mode 100644 src/views/water/waterPollution/mutiBar.vue
 create mode 100644 src/views/water/waterPollution/threeAxis.vue
 create mode 100644 src/views/water/waterPollution/twoBar.vue

diff --git a/src/layouts/local/dashboard/analysis/components/VisitAnalysis.vue b/src/layouts/local/dashboard/analysis/components/VisitAnalysis.vue
index ccdabd5..23b7a0c 100644
--- a/src/layouts/local/dashboard/analysis/components/VisitAnalysis.vue
+++ b/src/layouts/local/dashboard/analysis/components/VisitAnalysis.vue
@@ -25,7 +25,7 @@
       },
       xAxis: {
         type: 'category',
-        boundaryGap: false,
+        boundaryGap: true,
         data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
         splitLine: {
           show: true,
diff --git a/src/views/achievement/achievementType/api.ts b/src/views/achievement/achievementType/api.ts
new file mode 100644
index 0000000..828da37
--- /dev/null
+++ b/src/views/achievement/achievementType/api.ts
@@ -0,0 +1,10 @@
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  list = '/evr/project/getInfoList',
+}
+
+
+export function list(params?: any) {
+  return defHttp.get({ url: Api.list, params });
+}
diff --git a/src/views/achievement/achievementType/index.vue b/src/views/achievement/achievementType/index.vue
index b5db60e..f2d5928 100644
--- a/src/views/achievement/achievementType/index.vue
+++ b/src/views/achievement/achievementType/index.vue
@@ -3,21 +3,23 @@
     <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" />
+          <a-tab-pane key="城镇污水处理及配套" tab="城镇污水处理及配套">
+            <secondTab :loading="loading" type="城镇污水处理及配套"/>
           </a-tab-pane>
-          <a-tab-pane key="2" tab="河道整治">
-            <secondTab :loading="loading" />
+          <a-tab-pane key="河道整治" tab="河道整治">
+            <secondTab :loading="loading" type="河道整治" />
           </a-tab-pane>
-          <a-tab-pane key="3" tab="农业农村面源污染治理">
-            <secondTab :loading="loading" />
+          <a-tab-pane key="农业农村面源污染治理" tab="农业农村面源污染治理">
+            <secondTab :loading="loading" type="农业农村面源污染治理" />
           </a-tab-pane>
-          <a-tab-pane key="4" tab="引用水源地保护建设">
-            <secondTab :loading="loading" />
+          <a-tab-pane key="饮用水源地保护建设" tab="饮用水源地保护建设">
+            <secondTab :loading="loading" type="饮用水源地保护建设"/>
           </a-tab-pane>
-          <a-tab-pane key="5" tab="内源治理"> <secondTab :loading="loading" /> </a-tab-pane>
-          <a-tab-pane key="6" tab="水资源综合利用及调度">
-            <secondTab :loading="loading" />
+          <a-tab-pane key="内源治理" tab="内源治理"> 
+            <secondTab :loading="loading" type="内源治理" /> 
+          </a-tab-pane>
+          <a-tab-pane key="水资源综合利用及调度" tab="水资源综合利用及调度">
+            <secondTab :loading="loading" type="水资源综合利用及调度"/>
           </a-tab-pane>
         </a-tabs>
       </div>
@@ -29,8 +31,12 @@
   import { ref } from 'vue';
   import { PageWrapper } from '@/components/Page';
   import secondTab from './secondTab.vue';
-
-  const activeKey = ref<String>('1');
+  import {list} from './api'
+  // const tabChange = async(key) =>{
+  //  const res = await list({projectTypeList:key})
+   
+  // }
+  const activeKey = ref<String>('城镇污水处理及配套');
   const loading = ref(false);
 </script>
 <style lang="less">
diff --git a/src/views/achievement/achievementType/secondTab.vue b/src/views/achievement/achievementType/secondTab.vue
index 383fc3d..c51dcfa 100644
--- a/src/views/achievement/achievementType/secondTab.vue
+++ b/src/views/achievement/achievementType/secondTab.vue
@@ -77,7 +77,7 @@
   import { watch, ref, Ref, watchEffect } from 'vue';
   import { useECharts } from '@/hooks/web/useECharts';
   import { Card } from 'ant-design-vue';
-
+  import {list } from './api'
   const subTab = ref<String>('a');
   const props = defineProps({
     loading: Boolean,
@@ -89,29 +89,39 @@
       type: String as PropType<string>,
       default: '300px',
     },
+    type:{
+      type: String as any,
+      default:'城镇污水处理及配套'
+    }
+
   });
+  const getInfo = () =>{
+    const res = list({projectTypeList:props.type})
+    console.log(res)
+  }
+  getInfo()
   const dataSource1 = ref([]);
   const columns1 = [
     {
-      dataIndex: 'date',
-      key: 'date',
+      dataIndex: 'projectDate',
+      key: 'projectDate',
       title: '项目时期',
       width: 200,
     },
     {
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'projectName',
+      key: 'projectName',
       title: '项目名称',
     },
     {
-      dataIndex: 'technology',
-      key: 'technology',
-      title: '技术',
+      dataIndex: 'projectTech',
+      key: 'projectTech',
+      title: '水环境保护治理技术',
     },
     {
-      dataIndex: 'technologyInfo',
-      key: 'technologyInfo',
-      title: '技术详情',
+      dataIndex: 'techName',
+      key: 'techName',
+      title: '技术名称',
     },
   ];
   const dataSource2 = ref([]);
diff --git a/src/views/achievement/goalDistrict/api.ts b/src/views/achievement/goalDistrict/api.ts
new file mode 100644
index 0000000..028f71b
--- /dev/null
+++ b/src/views/achievement/goalDistrict/api.ts
@@ -0,0 +1,10 @@
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  list = '/evr/area/getList',
+}
+
+
+export function list(params?: any) {
+  return defHttp.get({ url: Api.list, params });
+}
diff --git a/src/views/achievement/goalDistrict/index.vue b/src/views/achievement/goalDistrict/index.vue
index 345dbb2..ae364cd 100644
--- a/src/views/achievement/goalDistrict/index.vue
+++ b/src/views/achievement/goalDistrict/index.vue
@@ -2,17 +2,12 @@
   <PageWrapper dense>
     <div style="margin: 1%; padding: 1%; border-radius: 10px; background: #fff">
       <span>控制区：</span>
-      <a-cascader
-        v-model:value="district"
-        :options="districtOptions"
-        placeholder="请选择"
-        change-on-select
-        @change="districtChange"
-      />
+       <a-input v-model:value="district" style="width:180px"></a-input>
+       <a-button type="primary" @click="search" style="margin-left: 20px;">查询</a-button>
       <div v-for="(i, index) in goalDistrictInfo" style="margin: 20px 0" :key="index">
-        <div style="margin: 10px">{{ i.msg }}</div>
+        <div style="margin: 10px">{{ i.description }}</div>
         <div>
-          <a-table :dataSource="i.list" :columns="columns" :pagination="false" bordered />
+          <a-table :dataSource="i.areaInfo" :columns="columns" :pagination="false" bordered />
         </div>
       </div>
     </div>
@@ -22,116 +17,18 @@
 <script setup lang="ts">
   import { ref } from 'vue';
   import { PageWrapper } from '@/components/Page';
+  import {list} from './api'
   //地区
-  const district = ref<any>([]);
+  const district = ref('');
   const districtOptions = ref([
-    {
-      value: 'zhejiang',
-      label: 'Zhejiang',
-      children: [
-        {
-          value: 'hangzhou',
-          label: 'Hangzhou',
-          children: [
-            {
-              value: 'xihu',
-              label: 'West Lake',
-            },
-          ],
-        },
-      ],
-    },
-    {
-      value: 'jiangsu',
-      label: 'Jiangsu',
-      children: [
-        {
-          value: 'nanjing',
-          label: 'Nanjing',
-          children: [
-            {
-              value: 'zhonghuamen',
-              label: 'Zhong Hua Men',
-            },
-          ],
-        },
-      ],
-    },
   ]);
-  const districtChange = () => {
-    console.log(district.value);
-  };
-  const goalDistrictInfo = [
-    {
-      msg: '1996-2000：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
-      list: [
-        {
-          district: '1995',
-          river: '100',
-          cross: '80',
-          goal: '80%',
-          thirdFive: '30',
-          fourthFive: '20',
-          fifthFive: '67%',
-        },
-      ],
-    },
-    {
-      msg: '1996-2000：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
-      list: [
-        {
-          district: '1995',
-          river: '100',
-          cross: '80',
-          goal: '80%',
-          thirdFive: '30',
-          fourthFive: '20',
-          fifthFive: '67%',
-        },
-        {
-          district: '1995',
-          river: '100',
-          cross: '80',
-          goal: '80%',
-          thirdFive: '30',
-          fourthFive: '20',
-          fifthFive: '67%',
-        },
-      ],
-    },
-    {
-      msg: '1996-2000：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
-      list: [
-        {
-          district: '1995',
-          river: '100',
-          cross: '80',
-          goal: '80%',
-          thirdFive: '30',
-          fourthFive: '20',
-          fifthFive: '67%',
-        },
-        {
-          district: '1995',
-          river: '100',
-          cross: '80',
-          goal: '80%',
-          thirdFive: '30',
-          fourthFive: '20',
-          fifthFive: '67%',
-        },
-        {
-          district: '1995',
-          river: '100',
-          cross: '80',
-          goal: '80%',
-          thirdFive: '30',
-          fourthFive: '20',
-          fifthFive: '67%',
-        },
-      ],
-    },
-  ];
+  const search = async() =>{
+  const res = await list({district:district.value})
+  goalDistrictInfo.value = res
+  console.log(res)
+  }
+  const goalDistrictInfo = ref([
+  ])
 
   const columns = [
     {
@@ -152,8 +49,8 @@
       title: '水体',
     },
     {
-      dataIndex: 'cross',
-      key: 'cross',
+      dataIndex: 'controlSection',
+      key: 'controlSection',
       title: '控制断面',
     },
     {
diff --git a/src/views/achievement/goalTimes/api.ts b/src/views/achievement/goalTimes/api.ts
new file mode 100644
index 0000000..649a962
--- /dev/null
+++ b/src/views/achievement/goalTimes/api.ts
@@ -0,0 +1,10 @@
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  list = '/evr/project/getInvestmentStats',
+}
+
+
+export function list(params?: any) {
+  return defHttp.get({ url: Api.list, params });
+}
diff --git a/src/views/achievement/goalTimes/index.vue b/src/views/achievement/goalTimes/index.vue
index 255253e..a2e2889 100644
--- a/src/views/achievement/goalTimes/index.vue
+++ b/src/views/achievement/goalTimes/index.vue
@@ -1,11 +1,11 @@
 <template>
   <PageWrapper dense>
     <div style="margin: 1%; padding: 1%; border-radius: 10px; background: #fff">
-      <div v-for="(i, index) in goalTimesMsg" style="margin: 20px 0 20px 20px" :key="index">{{
+      <div v-for="(i, index) in description" style="margin: 20px 0 20px 20px" :key="index">{{
         i
       }}</div>
       <div>
-        <a-table :dataSource="goalTimeList" :columns="columns" :pagination="false" />
+        <a-table :dataSource="projectInfo" :columns="columns" :pagination="false" />
       </div>
     </div>
   </PageWrapper>
@@ -14,14 +14,8 @@
 <script setup lang="ts">
   import { ref } from 'vue';
   import { PageWrapper } from '@/components/Page';
-
-  const goalTimesMsg = [
-    '1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
-    '1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
-    '1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
-    '1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
-    '1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
-  ];
+  import {list} from './api'
+  const description = ref([])
 
   const columns = [
     {
@@ -29,21 +23,6 @@
       key: 'date',
       title: '时期',
     },
-    // {
-    //   dataIndex: 'planProject',
-    //   key: 'planProject',
-    //   title: '规划项目',
-    // },
-    // {
-    //   dataIndex: 'actualProject',
-    //   key: 'actualProject',
-    //   title: '实际实施项目',
-    // },
-    // {
-    //   dataIndex: 'projectPercent',
-    //   key: 'projectPercent',
-    //   title: '实施率',
-    // },
     {
       dataIndex: 'planInvest',
       key: 'planInvest',
@@ -57,101 +36,18 @@
     {
       dataIndex: 'investPercent',
       key: 'investPercent',
-      title: '完成投资率',
+      title: '完成投资率%',
     },
   ];
-  const goalTimeList = ref([
-    {
-      date: '1995',
-      planProject: '100',
-      actualProject: '80',
-      projectPercent: '80%',
-      planInvest: '30',
-      actualInvest: '20',
-      investPercent: '67%',
-    },
-    {
-      date: '1995',
-      planProject: '100',
-      actualProject: '80',
-      projectPercent: '80%',
-      planInvest: '30',
-      actualInvest: '20',
-      investPercent: '67%',
-    },
-    {
-      date: '1995',
-      planProject: '100',
-      actualProject: '80',
-      projectPercent: '80%',
-      planInvest: '30',
-      actualInvest: '20',
-      investPercent: '67%',
-    },
-    {
-      date: '1995',
-      planProject: '100',
-      actualProject: '80',
-      projectPercent: '80%',
-      planInvest: '30',
-      actualInvest: '20',
-      investPercent: '67%',
-    },
-    {
-      date: '1995',
-      planProject: '100',
-      actualProject: '80',
-      projectPercent: '80%',
-      planInvest: '30',
-      actualInvest: '20',
-      investPercent: '67%',
-    },
-    {
-      date: '1995',
-      planProject: '100',
-      actualProject: '80',
-      projectPercent: '80%',
-      planInvest: '30',
-      actualInvest: '20',
-      investPercent: '67%',
-    },
-    {
-      date: '1995',
-      planProject: '100',
-      actualProject: '80',
-      projectPercent: '80%',
-      planInvest: '30',
-      actualInvest: '20',
-      investPercent: '67%',
-    },
-    {
-      date: '1995',
-      planProject: '100',
-      actualProject: '80',
-      projectPercent: '80%',
-      planInvest: '30',
-      actualInvest: '20',
-      investPercent: '67%',
-    },
-    {
-      date: '1995',
-      planProject: '100',
-      actualProject: '80',
-      projectPercent: '80%',
-      planInvest: '30',
-      actualInvest: '20',
-      investPercent: '67%',
-    },
-    {
-      date: '1995',
-      planProject: '100',
-      actualProject: '80',
-      projectPercent: '80%',
-      planInvest: '30',
-      actualInvest: '20',
-      investPercent: '67%',
-    },
+  const projectInfo = ref([
   ]);
+  const getInfo = async() =>{
+  const res = await list()
+  description.value = res.description
+  projectInfo.value = res.projectInfo
+  console.log(res)
+  }
+  getInfo()
 </script>
 <style lang="less">
   .tabBox {
diff --git a/src/views/pollution/manage/manage.api.ts b/src/views/pollution/manage/manage.api.ts
index 51709d7..3f1c9f3 100644
--- a/src/views/pollution/manage/manage.api.ts
+++ b/src/views/pollution/manage/manage.api.ts
@@ -1,10 +1,11 @@
-import { ID, IDS, PageQuery, commonExport } from '@/api/base';
+import {commonExport } from '@/api/base';
 import { defHttp } from '@/utils/http/axios';
 
 enum Api {
   root = '/evr/project',
   list = '/evr/project/list',
   export = '/evr/project/export',
+  listUpload = '/evr/excel/uploadProjectInfo',
 }
 
 
@@ -31,3 +32,10 @@ export function update(data: any) {
 export function removeByIds(ids: any) {
   return defHttp.deleteWithMsg<void>({ url: `${Api.root}/${ids.join(',')}` });
 }
+export function listUpload(params: any) {
+  return defHttp.post({
+    url: Api.listUpload,
+    headers: { 'Content-Type': 'multipart/form-data' },
+    params,
+  });
+}
\ No newline at end of file
diff --git a/src/views/pollution/manage/table.vue b/src/views/pollution/manage/table.vue
index adde0eb..c20986f 100644
--- a/src/views/pollution/manage/table.vue
+++ b/src/views/pollution/manage/table.vue
@@ -3,7 +3,14 @@
     <BasicTable @register="registerTable">
       <template #toolbar>
         <a-button type="primary" @click="handleAdd">新增</a-button>
-        <a-button type="primary" @click="handleImport">导入</a-button>
+        <a-upload
+          name="file"
+          :before-upload="beforeUpload"
+          @change="importChange"
+          :showUploadList="false"
+        >
+          <a-button type="primary"> 导入 </a-button>
+        </a-upload>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column && record && column.key === 'action'">
@@ -37,7 +44,7 @@
 <script setup lang="ts">
   import { PageWrapper } from '@/components/Page';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
-  import { list, removeByIds } from './manage.api.ts';
+  import { list, removeByIds, listUpload } from './manage.api.ts';
   import { formSchemas, columns } from './manage.data';
   import { IconEnum } from '@/enums/appEnum';
   import { useGo } from '@/hooks/web/usePage';
@@ -84,7 +91,18 @@
     await removeByIds([record.id]);
     await reload();
   }
-
+  //导入
+  const beforeUpload = async (file: any) => {
+    console.log(file);
+    const params = {
+      file: file,
+    };
+    await listUpload(params);
+    return false;
+  };
+  const importChange = () => {
+    reload();
+  };
   // 前往审批记录页面
   const go = useGo();
 </script>
diff --git a/src/views/water/waterEnvironment/secondTab.vue b/src/views/water/waterEnvironment/fourAxis.vue
similarity index 98%
rename from src/views/water/waterEnvironment/secondTab.vue
rename to src/views/water/waterEnvironment/fourAxis.vue
index c5b1c84..c9a485e 100644
--- a/src/views/water/waterEnvironment/secondTab.vue
+++ b/src/views/water/waterEnvironment/fourAxis.vue
@@ -76,7 +76,7 @@
           },
           xAxis: {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
           },
           yAxis: {
@@ -126,7 +126,7 @@
           },
           xAxis: {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
           },
           yAxis: {
@@ -176,7 +176,7 @@
           },
           xAxis: {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
           },
           yAxis: {
@@ -226,7 +226,7 @@
           },
           xAxis: {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
           },
           yAxis: {
diff --git a/src/views/water/waterEnvironment/index.vue b/src/views/water/waterEnvironment/index.vue
index 2eb95e0..1e56893 100644
--- a/src/views/water/waterEnvironment/index.vue
+++ b/src/views/water/waterEnvironment/index.vue
@@ -4,13 +4,13 @@
       <div class="tabBox">
         <a-tabs v-model:activeKey="activeKey" size="large">
           <a-tab-pane key="1" tab="水质变化">
-            <secondTab :loading="loading" :title="secondTabTitle1"/>
+            <fourAxis :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" />
+            <fourAxis :loading="loading":title="secondTabTitle3" />
           </a-tab-pane>
           <a-tab-pane key="4" tab="河流水质变化" >
             <singerBar :loading="loading" />
@@ -24,7 +24,7 @@
 <script setup lang="ts">
   import { ref } from 'vue';
   import { PageWrapper } from '@/components/Page';
-  import secondTab from './secondTab.vue';
+  import fourAxis from './fourAxis.vue';
   import singerAxis from './singerAxis.vue';
   import singerBar from './singerBar.vue';
 
diff --git a/src/views/water/waterEnvironment/singerAxis.vue b/src/views/water/waterEnvironment/singerAxis.vue
index 60afc30..23fa19b 100644
--- a/src/views/water/waterEnvironment/singerAxis.vue
+++ b/src/views/water/waterEnvironment/singerAxis.vue
@@ -44,7 +44,7 @@
         },
         xAxis: {
           type: 'category',
-          boundaryGap: false,
+          boundaryGap: true,
           data: [
             '"1995"',
             '"1996"',
diff --git a/src/views/water/waterEnvironment/singerBar.vue b/src/views/water/waterEnvironment/singerBar.vue
index 188709d..b932dd8 100644
--- a/src/views/water/waterEnvironment/singerBar.vue
+++ b/src/views/water/waterEnvironment/singerBar.vue
@@ -43,7 +43,7 @@
         },
         xAxis: {
           type: 'category',
-          boundaryGap: false,
+          boundaryGap: true,
           data: [
             '"1995"',
             '"1996"',
diff --git a/src/views/water/waterPollution/fourAxis.vue b/src/views/water/waterPollution/fourAxis.vue
new file mode 100644
index 0000000..ec0b437
--- /dev/null
+++ b/src/views/water/waterPollution/fourAxis.vue
@@ -0,0 +1,342 @@
+<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/10', 'NH3-N', 'TN', 'TP'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          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/10',
+            data: [90, 200, 150, 80, 70, 78, 123, 29, 45, 99],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'NH3-N',
+            data: [132, 23, 42, 88, 66, 77, 99, 111, 122, 133],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'TN',
+            data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'TP',
+            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', 'NH3-N', 'TN', 'TP'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          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: 'NH3-N',
+            data: [132, 23, 42, 88, 66, 77, 99, 111, 122, 133],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'TN',
+            data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'TP',
+            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','NH3-N','TN', 'TP'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          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: 'NH3-N',
+            data: [132, 23, 42, 88, 66, 77, 99, 111, 122, 133],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'TN',
+            data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'TP',
+            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','NH3-N','TN', 'TP'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          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: 'NH3-N',
+            data: [132, 23, 42, 88, 66, 77, 99, 111, 122, 133],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'TN',
+            data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'TP',
+            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/waterPollution/index.vue b/src/views/water/waterPollution/index.vue
new file mode 100644
index 0000000..741b3bb
--- /dev/null
+++ b/src/views/water/waterPollution/index.vue
@@ -0,0 +1,45 @@
+<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="污染源负荷变化">
+            <twoBar :loading="loading" />
+          </a-tab-pane>
+          <a-tab-pane key="2" tab="点源污染变化">
+            <threeAxis :loading="loading" />
+          </a-tab-pane>
+          <a-tab-pane key="3" tab="面源污染变化">
+            <fourAxis :loading="loading" :title="secondTabTitle1" />
+          </a-tab-pane>
+          <a-tab-pane key="4" tab="污染负荷汇入变化">
+            <mutiBar :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 twoBar from './twoBar.vue';
+  import threeAxis from './threeAxis.vue';
+  import fourAxis from './fourAxis.vue';
+  import mutiBar from './mutiBar.vue';
+  const activeKey = ref<String>('1');
+  const loading = ref(false);
+  const secondTabTitle1 = ['农业农村面源污染负荷排放量变化趋势', '农业农村面源污染汇入量变化趋势', '城市面源产生量变化趋势', '城市面源汇入量变化趋势'];
+</script>
+<style lang="less">
+  .tabBox {
+    margin: 20px;
+  }
+
+  .title {
+    margin: 10px 0;
+    font-size: 20px;
+    font-weight: 550;
+  }
+</style>
diff --git a/src/views/water/waterPollution/mutiBar.vue b/src/views/water/waterPollution/mutiBar.vue
new file mode 100644
index 0000000..866ff1c
--- /dev/null
+++ b/src/views/water/waterPollution/mutiBar.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="tabBox">
+    <div class="md:flex enter-y">
+      <div class="md:w-1/2 w-full">
+        <Card title="1988年" :loading="loading">
+          <div ref="chartRef1" :style="{ width, height }"></div>
+        </Card>
+      </div>
+      <div class="md:w-1/2 w-full">
+        <Card title="2000年" :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="2005年" :loading="loading">
+          <div ref="chartRef3" :style="{ width, height }"></div>
+        </Card>
+      </div>
+      <div class="md:w-1/2 w-full">
+        <Card title="2020年" :loading="loading">
+          <div ref="chartRef4" :style="{ width, height }"></div>
+        </Card>
+      </div>
+    </div>
+    <div>
+        <Card title="污染负荷构成特征变化" :loading="loading">
+          <div ref="chartRef5" :style="{ width, height }"></div>
+        </Card>
+    </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',
+    },
+  });
+
+  const chartRef1 = ref<HTMLDivElement | null>(null);
+  const setOptions1 = useECharts(chartRef1 as Ref<HTMLDivElement>).setOptions;
+  const chartRef2 = ref<HTMLDivElement | null>(null);
+  const setOptions2 = useECharts(chartRef2 as Ref<HTMLDivElement>).setOptions;
+  const chartRef3 = ref<HTMLDivElement | null>(null);
+  const setOptions3 = useECharts(chartRef3 as Ref<HTMLDivElement>).setOptions;
+  const chartRef4 = ref<HTMLDivElement | null>(null);
+  const setOptions4 = useECharts(chartRef4 as Ref<HTMLDivElement>).setOptions;
+  const chartRef5 = ref<HTMLDivElement | null>(null);
+  const setOptions5 = useECharts(chartRef5 as Ref<HTMLDivElement>).setOptions;
+  watch(
+    () => subTab.value,
+    () => {
+      setOptions1({
+        tooltip: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {
+          data: ['未收集点源', '城市面源', '农业农村面源'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          data: ['COD', 'TN', 'TP'],
+        },
+        yAxis: {
+          type: 'value',
+          name: '污染负荷率', // 单位说明文本
+          nameLocation: 'end', // 文本位置（start/center/end）
+          nameTextStyle: {
+            color: '#666',
+            fontSize: 12,
+            align: 'left', // 文本对齐方向
+            padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+          },
+        },
+        series: [
+          {
+            name: '未收集点源',
+            data: [90, 200, 150],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: '城市面源',
+            data: [78, 123, 29],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: '农业农村面源',
+            data: [100, 100, 100],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+        ],
+      });
+      setOptions2({
+        tooltip: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {
+          data: ['污水处理厂尾水', '未收集点源', '城市面源', '农业农村面源'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          data: ['COD', 'TN', 'TP'],
+        },
+        yAxis: {
+          type: 'value',
+          name: '污染负荷率', // 单位说明文本
+          nameLocation: 'end', // 文本位置（start/center/end）
+          nameTextStyle: {
+            color: '#666',
+            fontSize: 12,
+            align: 'left', // 文本对齐方向
+            padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+          },
+        },
+        series: [
+          {
+            name: '污水处理厂尾水',
+            data: [90, 200, 150, 99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: '未收集点源',
+            data: [78, 123, 29, 99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: '城市面源',
+            data: [100, 100, 100, 99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: '农业农村面源',
+            data: [100, 100, 100, 99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+        ],
+      });
+      setOptions3({
+        tooltip: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {
+          data: ['污水处理厂尾水', '未收集点源', '城市面源', '农业农村面源'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          data: ['COD', 'TN', 'TP'],
+        },
+        yAxis: {
+          type: 'value',
+          name: '污染负荷率', // 单位说明文本
+          nameLocation: 'end', // 文本位置（start/center/end）
+          nameTextStyle: {
+            color: '#666',
+            fontSize: 12,
+            align: 'left', // 文本对齐方向
+            padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+          },
+        },
+        series: [
+          {
+            name: '污水处理厂尾水',
+            data: [90, 200, 150, 99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: '未收集点源',
+            data: [78, 123, 29, 99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: '城市面源',
+            data: [100, 100, 100, 99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: '农业农村面源',
+            data: [100, 100, 100, 99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+        ],
+      });
+      setOptions4({
+        tooltip: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {
+          data: ['污水处理厂尾水', '未收集点源', '城市面源', '农业农村面源'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          data: ['COD', 'TN', 'TP'],
+        },
+        yAxis: {
+          type: 'value',
+          name: '污染负荷率', // 单位说明文本
+          nameLocation: 'end', // 文本位置（start/center/end）
+          nameTextStyle: {
+            color: '#666',
+            fontSize: 12,
+            align: 'left', // 文本对齐方向
+            padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+          },
+        },
+        series: [
+          {
+            name: '污水处理厂尾水',
+            data: [90, 200, 150, 99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: '未收集点源',
+            data: [78, 123, 29, 99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: '城市面源',
+            data: [100, 100, 100, 99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: '农业农村面源',
+            data: [100, 100, 100, 99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+        ],
+      });
+      setOptions5({
+        tooltip: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {
+          data: ['2000', '2005', '2020'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          data: ['XX区', 'XX区', 'XX区', 'XX区', 'XX区'],
+        },
+        yAxis: {
+          type: 'value',
+          name: '污染负荷率', // 单位说明文本
+          nameLocation: 'end', // 文本位置（start/center/end）
+          nameTextStyle: {
+            color: '#666',
+            fontSize: 12,
+            align: 'left', // 文本对齐方向
+            padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+          },
+        },
+        series: [
+          {
+            name: '2000',
+            data: [90, 200, 150,66,77],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: '2005',
+            data: [78, 123, 29,55,99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: '2020',
+            data: [100, 100, 100,88,111],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+        ],
+      });
+    },
+    { immediate: true },
+  );
+</script>
+<style lang="less">
+  .tabBox {
+    margin: 20px;
+  }
+</style>
diff --git a/src/views/water/waterPollution/threeAxis.vue b/src/views/water/waterPollution/threeAxis.vue
new file mode 100644
index 0000000..0e87d91
--- /dev/null
+++ b/src/views/water/waterPollution/threeAxis.vue
@@ -0,0 +1,266 @@
+<template>
+  <div class="tabBox">
+    <div class="md:flex enter-y">
+      <div class="md:w-1/3 w-full">
+        <Card title="污染负荷产生量变化趋势" :loading="loading">
+          <div ref="chartRef1" :style="{ width, height }"></div>
+        </Card>
+      </div>
+      <div class="md:w-1/3 w-full">
+        <Card title="污染负荷削减量变化趋势" :loading="loading">
+          <div ref="chartRef2" :style="{ width, height }"></div>
+        </Card>
+      </div>
+      <div class="md:w-1/3 w-full">
+        <Card title="污染环境负荷变化趋势" :loading="loading">
+          <div ref="chartRef3" :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 setOptions1 = useECharts(chartRef1 as Ref<HTMLDivElement>).setOptions;
+  const setOptions2 = useECharts(chartRef2 as Ref<HTMLDivElement>).setOptions;
+  const setOptions3 = useECharts(chartRef3 as Ref<HTMLDivElement>).setOptions;
+  watch(
+    () => subTab.value,
+    () => {
+      setOptions1({
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {
+          data: ['COD', 'NH3-N', 'TN', 'TP'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          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/10',
+            data: [90, 200, 150, 80, 70, 78, 123, 29, 45, 99],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'NH3-N',
+            data: [132, 23, 42, 88, 66, 77, 99, 111, 122, 133],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'TN',
+            data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'TP',
+            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', 'NH3-N', 'TN', 'TP'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          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: 'NH3-N',
+            data: [132, 23, 42, 88, 66, 77, 99, 111, 122, 133],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'TN',
+            data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'TP',
+            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', 'NH3-N', 'TN', 'TP'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          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: 'NH3-N',
+            data: [132, 23, 42, 88, 66, 77, 99, 111, 122, 133],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'TN',
+            data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
+            type: 'line',
+            itemStyle: {},
+          },
+          {
+            name: 'TP',
+            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/waterPollution/twoBar.vue b/src/views/water/waterPollution/twoBar.vue
new file mode 100644
index 0000000..f8d802b
--- /dev/null
+++ b/src/views/water/waterPollution/twoBar.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="tabBox">
+    <div class="md:flex enter-y">
+      <div class="md:w-1/2 w-full">
+        <Card title="2020年污染负荷(按来源构成)" :loading="loading">
+          <div ref="chartRef1" :style="{ width, height }"></div>
+        </Card>
+      </div>
+      <div class="md:w-1/2 w-full">
+        <Card title="2020年污染负荷(空间分布)" :loading="loading">
+          <div ref="chartRef2" :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',
+    },
+  });
+
+  const chartRef1 = ref<HTMLDivElement | null>(null);
+  const setOptions1 = useECharts(chartRef1 as Ref<HTMLDivElement>).setOptions;
+  const chartRef2 = ref<HTMLDivElement | null>(null);
+  const setOptions2 = useECharts(chartRef2 as Ref<HTMLDivElement>).setOptions;
+  watch(
+    () => subTab.value,
+    () => {
+      setOptions1({
+        tooltip: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {
+          data: ['COD', 'NH3-N', 'TN', 'TP'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          data: ['水质净化厂尾水', '未收集点源', '城市面源', '农业农村面源', '水土流失'],
+        },
+        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],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: 'NH3-N',
+            data: [132, 23, 42, 88, 66],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: 'TN',
+            data: [78, 123, 29, 45, 99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: 'TP',
+            data: [100, 100, 100, 100, 100],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+        ],
+      });
+      setOptions2({
+        tooltip: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        legend: {
+          data: ['COD', 'NH3-N', 'TN', 'TP'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          data: ['XX区', 'XX区', 'XX区', 'XX区', 'XX区'],
+        },
+        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],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: 'NH3-N',
+            data: [132, 23, 42, 88, 66],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: 'TN',
+            data: [78, 123, 29, 45, 99],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+          {
+            name: 'TP',
+            data: [100, 100, 100, 100, 100],
+            type: 'bar',
+            barWidth: '10px',
+            itemStyle: {},
+          },
+        ],
+      });
+    },
+    { immediate: true },
+  );
+</script>
+<style lang="less">
+  .tabBox {
+    margin: 20px;
+  }
+</style>
diff --git a/src/views/演示使用自行删除/gitee/index.vue b/src/views/演示使用自行删除/gitee/index.vue
index 61c8ab9..3c6e656 100644
--- a/src/views/演示使用自行删除/gitee/index.vue
+++ b/src/views/演示使用自行删除/gitee/index.vue
@@ -37,7 +37,7 @@
       },
       xAxis: {
         type: 'category',
-        boundaryGap: false,
+        boundaryGap: true,
         data: resp.starList.map((item) => item.date),
       },
       yAxis: {
diff --git a/src/views/演示使用自行删除/visit/pages/loginLine.vue b/src/views/演示使用自行删除/visit/pages/loginLine.vue
index 0119387..7e14830 100644
--- a/src/views/演示使用自行删除/visit/pages/loginLine.vue
+++ b/src/views/演示使用自行删除/visit/pages/loginLine.vue
@@ -38,7 +38,7 @@
       },
       xAxis: {
         type: 'category',
-        boundaryGap: false,
+        boundaryGap: true,
         data: data.date,
       },
       yAxis: {
diff --git a/vite.config.ts b/vite.config.ts
index f6fbce9..dadc47e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,7 +17,7 @@ export default defineApplicationConfig({
     server: {
       proxy: {
         '/basic-api': {
-          target: 'http://10.1.21.250:8083',
+          target: 'http://10.1.21.250:8085',
           changeOrigin: true,
           ws: true,
           rewrite: (path) => path.replace(new RegExp(`^/basic-api`), ''),