diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
index 66b6399..ae77c3a 100644
--- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -36,6 +36,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -53,6 +54,7 @@
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
 import tuLi72X from '@/assets/newImgs/tuLi72X.png';
 import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json';
+import { onBeforeUnmount } from 'vue';
 
 const { proxy } = getCurrentInstance();
 const tabList = ref([
@@ -60,12 +62,17 @@
   { id: 'nlbz', name: '内涝标准' },
   { id: 'nlxc', name: '内涝消除' },
 ]);
-
 const curTab = ref('');
 const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
 const tableData = ref([]);
 const waterLoggingData = ref([]);
 const waterLoggingDataByType = ref([]);
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -342,10 +349,15 @@
 
 onMounted(() => {
   getWaterlogging();
-  setTimeout(() => {
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
     tabClick(tabList.value[0]);
   });
 });
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
+});
 </script>
 <style lang="scss">
 .l7-popup-tip {

diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
index 66b6399..ae77c3a 100644
--- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -36,6 +36,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -53,6 +54,7 @@
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
 import tuLi72X from '@/assets/newImgs/tuLi72X.png';
 import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json';
+import { onBeforeUnmount } from 'vue';
 
 const { proxy } = getCurrentInstance();
 const tabList = ref([
@@ -60,12 +62,17 @@
   { id: 'nlbz', name: '内涝标准' },
   { id: 'nlxc', name: '内涝消除' },
 ]);
-
 const curTab = ref('');
 const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
 const tableData = ref([]);
 const waterLoggingData = ref([]);
 const waterLoggingDataByType = ref([]);
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -342,10 +349,15 @@
 
 onMounted(() => {
   getWaterlogging();
-  setTimeout(() => {
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
     tabClick(tabList.value[0]);
   });
 });
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
+});
 </script>
 <style lang="scss">
 .l7-popup-tip {
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
index c6d0028..ac8833e 100644
--- a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="jiZhiJianShe">
-    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估</div>
     <div class="ListBoxBody">
       <div class="content">
         <div class="table_content">

diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
index 66b6399..ae77c3a 100644
--- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -36,6 +36,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -53,6 +54,7 @@
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
 import tuLi72X from '@/assets/newImgs/tuLi72X.png';
 import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json';
+import { onBeforeUnmount } from 'vue';
 
 const { proxy } = getCurrentInstance();
 const tabList = ref([
@@ -60,12 +62,17 @@
   { id: 'nlbz', name: '内涝标准' },
   { id: 'nlxc', name: '内涝消除' },
 ]);
-
 const curTab = ref('');
 const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
 const tableData = ref([]);
 const waterLoggingData = ref([]);
 const waterLoggingDataByType = ref([]);
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -342,10 +349,15 @@
 
 onMounted(() => {
   getWaterlogging();
-  setTimeout(() => {
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
     tabClick(tabList.value[0]);
   });
 });
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
+});
 </script>
 <style lang="scss">
 .l7-popup-tip {
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
index c6d0028..ac8833e 100644
--- a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="jiZhiJianShe">
-    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估</div>
     <div class="ListBoxBody">
       <div class="content">
         <div class="table_content">
diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
index 897bba6..0d2f814 100644
--- a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
+++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="chanChuJiXiao">
     <div class="partTitleHM">
-      河湖水质
+      产出绩效
       <div class="tabs flex">
         <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
           {{ item.name }}
@@ -45,6 +45,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -121,6 +122,12 @@
 const quotaInfo = ref({}); //改造措施数据
 const tableData = ref([]);
 const type = ref('hcst');
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -266,27 +273,34 @@
 };
 
 onMounted(() => {
-  getjb();
-  getkhzn();
-  setTimeout(() => {
-    // 地图河湖水质点击查看监测数据详情
-    newfiberMapbox.map.on('click', 'waterLine', e => {
-      let clickfeature = newfiberMapbox.map
-        .queryRenderedFeatures([
-          [e.point.x - 10 / 2, e.point.y - 10 / 2],
-          [e.point.x + 10 / 2, e.point.y + 10 / 2],
-        ])
-        // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
-        .filter(i => i.layer.id == 'waterLine');
-      dialogShow.value = true;
-      blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
-      blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
+    getjb();
+    getkhzn();
+    setTimeout(() => {
+      // 地图河湖水质点击查看监测数据详情
+      newfiberMapbox.map.on('click', 'waterLine', e => {
+        let clickfeature = newfiberMapbox.map
+          .queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ])
+          // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
+          .filter(i => i.layer.id == 'waterLine');
+        dialogShow.value = true;
+        blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
+        blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
 
-      queryYearStatist();
-      console.log('clickfeature', '点击事件11', clickfeature);
-      // emits('clicksWaterBodies', clickfeature[0].properties);
-    });
-  }, 5000);
+        queryYearStatist();
+        console.log('clickfeature', '点击事件11', clickfeature);
+        // emits('clicksWaterBodies', clickfeature[0].properties);
+      });
+    }, 5000);
+  });
+});
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
 });
 </script>
 <style lang="scss">

diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
index 66b6399..ae77c3a 100644
--- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -36,6 +36,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -53,6 +54,7 @@
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
 import tuLi72X from '@/assets/newImgs/tuLi72X.png';
 import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json';
+import { onBeforeUnmount } from 'vue';
 
 const { proxy } = getCurrentInstance();
 const tabList = ref([
@@ -60,12 +62,17 @@
   { id: 'nlbz', name: '内涝标准' },
   { id: 'nlxc', name: '内涝消除' },
 ]);
-
 const curTab = ref('');
 const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
 const tableData = ref([]);
 const waterLoggingData = ref([]);
 const waterLoggingDataByType = ref([]);
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -342,10 +349,15 @@
 
 onMounted(() => {
   getWaterlogging();
-  setTimeout(() => {
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
     tabClick(tabList.value[0]);
   });
 });
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
+});
 </script>
 <style lang="scss">
 .l7-popup-tip {
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
index c6d0028..ac8833e 100644
--- a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="jiZhiJianShe">
-    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估</div>
     <div class="ListBoxBody">
       <div class="content">
         <div class="table_content">
diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
index 897bba6..0d2f814 100644
--- a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
+++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="chanChuJiXiao">
     <div class="partTitleHM">
-      河湖水质
+      产出绩效
       <div class="tabs flex">
         <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
           {{ item.name }}
@@ -45,6 +45,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -121,6 +122,12 @@
 const quotaInfo = ref({}); //改造措施数据
 const tableData = ref([]);
 const type = ref('hcst');
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -266,27 +273,34 @@
 };
 
 onMounted(() => {
-  getjb();
-  getkhzn();
-  setTimeout(() => {
-    // 地图河湖水质点击查看监测数据详情
-    newfiberMapbox.map.on('click', 'waterLine', e => {
-      let clickfeature = newfiberMapbox.map
-        .queryRenderedFeatures([
-          [e.point.x - 10 / 2, e.point.y - 10 / 2],
-          [e.point.x + 10 / 2, e.point.y + 10 / 2],
-        ])
-        // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
-        .filter(i => i.layer.id == 'waterLine');
-      dialogShow.value = true;
-      blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
-      blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
+    getjb();
+    getkhzn();
+    setTimeout(() => {
+      // 地图河湖水质点击查看监测数据详情
+      newfiberMapbox.map.on('click', 'waterLine', e => {
+        let clickfeature = newfiberMapbox.map
+          .queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ])
+          // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
+          .filter(i => i.layer.id == 'waterLine');
+        dialogShow.value = true;
+        blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
+        blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
 
-      queryYearStatist();
-      console.log('clickfeature', '点击事件11', clickfeature);
-      // emits('clicksWaterBodies', clickfeature[0].properties);
-    });
-  }, 5000);
+        queryYearStatist();
+        console.log('clickfeature', '点击事件11', clickfeature);
+        // emits('clicksWaterBodies', clickfeature[0].properties);
+      });
+    }, 5000);
+  });
+});
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
 });
 </script>
 <style lang="scss">
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 2b78ea4..46b8884 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -20,10 +20,28 @@
       <xiangMuJianShe></xiangMuJianShe>
       <ziJinJiXiao></ziJinJiXiao>
     </div>
+
+    <!-- 年份切换 -->
+    <div class="yearBox">
+      <el-button :type="currentYear == 2022 ? 'warning' : 'primary'" @click="changeYear(2022)">2022</el-button>
+      <el-button :type="currentYear == 2023 ? 'warning' : 'primary'" @click="changeYear(2023)">2023</el-button>
+      <el-button :type="currentYear == 2024 ? 'warning' : 'primary'" @click="changeYear(2024)" disabled>2024</el-button>
+    </div>
+
+    <!-- 佐证材料 -->
+    <el-dialog v-model="dialogVisible" :title="'佐证材料' + currentYear" width="600px" append-to-body>
+      <zzclDialog v-if="dialogVisible" :pageParams="pageParams"></zzclDialog>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import zzclDialog from './zzclDialog.vue'; //佐证材料公共弹窗
 import jiZhiJianShe from './jiZhiJianShe'; //管理绩效评价
 import ganZhiRenKeDu from './ganZhiRenKeDu'; //感知认可度考核评估
 import chanChuJiXiao from './chanChuJiXiao'; //产出绩效
@@ -37,6 +55,15 @@
 
 const { proxy } = getCurrentInstance();
 const showPanel = ref(true); //面板展开收起
+const currentYear = ref(2023);
+const dialogVisible = ref(false);
+const pageParams = ref({});
+
+// 年份切换
+function changeYear(year) {
+  currentYear.value = year;
+  bus.emit('changeYearKH', year);
+}
 
 // 面板内容展开收起控制
 const props = defineProps({
@@ -91,6 +118,13 @@
   bus.on('removeKHLayer', () => {
     removeSelectedLayer();
   });
+  changeYear(2023); //默认显示2023年数据
+  // 佐证材料
+  bus.on('getZzclData', e => {
+    pageParams.value.type = e;
+    pageParams.value.year = currentYear.value;
+    dialogVisible.value = true;
+  });
 });
 onBeforeUnmount(() => {
   removeSelectedLayer(['kaifengFangHong', 'kaifengRainUse']);
@@ -101,13 +135,27 @@
 <style lang="scss" scoped>
 .oneMapKHPG {
   width: 100%;
+  height: 100%;
   .headHMA {
     border-radius: 8px;
     top: 0px;
     height: auto;
-    padding: 10px;
     display: flex;
     background: none;
+    padding: 10px;
+  }
+  .yearBox {
+    position: fixed;
+    left: 480px;
+    bottom: 40px;
+    z-index: 99;
+    width: 80px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: right;
+    .el-button {
+      margin-bottom: 10px;
+    }
   }
 }
 </style>

diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
index 66b6399..ae77c3a 100644
--- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -36,6 +36,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -53,6 +54,7 @@
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
 import tuLi72X from '@/assets/newImgs/tuLi72X.png';
 import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json';
+import { onBeforeUnmount } from 'vue';
 
 const { proxy } = getCurrentInstance();
 const tabList = ref([
@@ -60,12 +62,17 @@
   { id: 'nlbz', name: '内涝标准' },
   { id: 'nlxc', name: '内涝消除' },
 ]);
-
 const curTab = ref('');
 const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
 const tableData = ref([]);
 const waterLoggingData = ref([]);
 const waterLoggingDataByType = ref([]);
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -342,10 +349,15 @@
 
 onMounted(() => {
   getWaterlogging();
-  setTimeout(() => {
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
     tabClick(tabList.value[0]);
   });
 });
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
+});
 </script>
 <style lang="scss">
 .l7-popup-tip {
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
index c6d0028..ac8833e 100644
--- a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="jiZhiJianShe">
-    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估</div>
     <div class="ListBoxBody">
       <div class="content">
         <div class="table_content">
diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
index 897bba6..0d2f814 100644
--- a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
+++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="chanChuJiXiao">
     <div class="partTitleHM">
-      河湖水质
+      产出绩效
       <div class="tabs flex">
         <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
           {{ item.name }}
@@ -45,6 +45,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -121,6 +122,12 @@
 const quotaInfo = ref({}); //改造措施数据
 const tableData = ref([]);
 const type = ref('hcst');
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -266,27 +273,34 @@
 };
 
 onMounted(() => {
-  getjb();
-  getkhzn();
-  setTimeout(() => {
-    // 地图河湖水质点击查看监测数据详情
-    newfiberMapbox.map.on('click', 'waterLine', e => {
-      let clickfeature = newfiberMapbox.map
-        .queryRenderedFeatures([
-          [e.point.x - 10 / 2, e.point.y - 10 / 2],
-          [e.point.x + 10 / 2, e.point.y + 10 / 2],
-        ])
-        // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
-        .filter(i => i.layer.id == 'waterLine');
-      dialogShow.value = true;
-      blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
-      blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
+    getjb();
+    getkhzn();
+    setTimeout(() => {
+      // 地图河湖水质点击查看监测数据详情
+      newfiberMapbox.map.on('click', 'waterLine', e => {
+        let clickfeature = newfiberMapbox.map
+          .queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ])
+          // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
+          .filter(i => i.layer.id == 'waterLine');
+        dialogShow.value = true;
+        blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
+        blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
 
-      queryYearStatist();
-      console.log('clickfeature', '点击事件11', clickfeature);
-      // emits('clicksWaterBodies', clickfeature[0].properties);
-    });
-  }, 5000);
+        queryYearStatist();
+        console.log('clickfeature', '点击事件11', clickfeature);
+        // emits('clicksWaterBodies', clickfeature[0].properties);
+      });
+    }, 5000);
+  });
+});
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
 });
 </script>
 <style lang="scss">
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 2b78ea4..46b8884 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -20,10 +20,28 @@
       <xiangMuJianShe></xiangMuJianShe>
       <ziJinJiXiao></ziJinJiXiao>
     </div>
+
+    <!-- 年份切换 -->
+    <div class="yearBox">
+      <el-button :type="currentYear == 2022 ? 'warning' : 'primary'" @click="changeYear(2022)">2022</el-button>
+      <el-button :type="currentYear == 2023 ? 'warning' : 'primary'" @click="changeYear(2023)">2023</el-button>
+      <el-button :type="currentYear == 2024 ? 'warning' : 'primary'" @click="changeYear(2024)" disabled>2024</el-button>
+    </div>
+
+    <!-- 佐证材料 -->
+    <el-dialog v-model="dialogVisible" :title="'佐证材料' + currentYear" width="600px" append-to-body>
+      <zzclDialog v-if="dialogVisible" :pageParams="pageParams"></zzclDialog>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import zzclDialog from './zzclDialog.vue'; //佐证材料公共弹窗
 import jiZhiJianShe from './jiZhiJianShe'; //管理绩效评价
 import ganZhiRenKeDu from './ganZhiRenKeDu'; //感知认可度考核评估
 import chanChuJiXiao from './chanChuJiXiao'; //产出绩效
@@ -37,6 +55,15 @@
 
 const { proxy } = getCurrentInstance();
 const showPanel = ref(true); //面板展开收起
+const currentYear = ref(2023);
+const dialogVisible = ref(false);
+const pageParams = ref({});
+
+// 年份切换
+function changeYear(year) {
+  currentYear.value = year;
+  bus.emit('changeYearKH', year);
+}
 
 // 面板内容展开收起控制
 const props = defineProps({
@@ -91,6 +118,13 @@
   bus.on('removeKHLayer', () => {
     removeSelectedLayer();
   });
+  changeYear(2023); //默认显示2023年数据
+  // 佐证材料
+  bus.on('getZzclData', e => {
+    pageParams.value.type = e;
+    pageParams.value.year = currentYear.value;
+    dialogVisible.value = true;
+  });
 });
 onBeforeUnmount(() => {
   removeSelectedLayer(['kaifengFangHong', 'kaifengRainUse']);
@@ -101,13 +135,27 @@
 <style lang="scss" scoped>
 .oneMapKHPG {
   width: 100%;
+  height: 100%;
   .headHMA {
     border-radius: 8px;
     top: 0px;
     height: auto;
-    padding: 10px;
     display: flex;
     background: none;
+    padding: 10px;
+  }
+  .yearBox {
+    position: fixed;
+    left: 480px;
+    bottom: 40px;
+    z-index: 99;
+    width: 80px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: right;
+    .el-button {
+      margin-bottom: 10px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
index 1573fee..6c56639 100644
--- a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
+++ b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 管理绩效评价 -->
   <div class="jiZhiJianShe">
-    <div class="partTitleHM" style="width: 99.8%">管理绩效评价(截至2024)</div>
+    <div class="partTitleHM" style="width: 99.8%">管理绩效评价</div>
     <div class="ListBoxBody">
       <div class="content">
         <div class="table_content">

diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
index 66b6399..ae77c3a 100644
--- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -36,6 +36,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -53,6 +54,7 @@
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
 import tuLi72X from '@/assets/newImgs/tuLi72X.png';
 import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json';
+import { onBeforeUnmount } from 'vue';
 
 const { proxy } = getCurrentInstance();
 const tabList = ref([
@@ -60,12 +62,17 @@
   { id: 'nlbz', name: '内涝标准' },
   { id: 'nlxc', name: '内涝消除' },
 ]);
-
 const curTab = ref('');
 const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
 const tableData = ref([]);
 const waterLoggingData = ref([]);
 const waterLoggingDataByType = ref([]);
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -342,10 +349,15 @@
 
 onMounted(() => {
   getWaterlogging();
-  setTimeout(() => {
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
     tabClick(tabList.value[0]);
   });
 });
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
+});
 </script>
 <style lang="scss">
 .l7-popup-tip {
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
index c6d0028..ac8833e 100644
--- a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="jiZhiJianShe">
-    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估</div>
     <div class="ListBoxBody">
       <div class="content">
         <div class="table_content">
diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
index 897bba6..0d2f814 100644
--- a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
+++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="chanChuJiXiao">
     <div class="partTitleHM">
-      河湖水质
+      产出绩效
       <div class="tabs flex">
         <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
           {{ item.name }}
@@ -45,6 +45,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -121,6 +122,12 @@
 const quotaInfo = ref({}); //改造措施数据
 const tableData = ref([]);
 const type = ref('hcst');
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -266,27 +273,34 @@
 };
 
 onMounted(() => {
-  getjb();
-  getkhzn();
-  setTimeout(() => {
-    // 地图河湖水质点击查看监测数据详情
-    newfiberMapbox.map.on('click', 'waterLine', e => {
-      let clickfeature = newfiberMapbox.map
-        .queryRenderedFeatures([
-          [e.point.x - 10 / 2, e.point.y - 10 / 2],
-          [e.point.x + 10 / 2, e.point.y + 10 / 2],
-        ])
-        // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
-        .filter(i => i.layer.id == 'waterLine');
-      dialogShow.value = true;
-      blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
-      blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
+    getjb();
+    getkhzn();
+    setTimeout(() => {
+      // 地图河湖水质点击查看监测数据详情
+      newfiberMapbox.map.on('click', 'waterLine', e => {
+        let clickfeature = newfiberMapbox.map
+          .queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ])
+          // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
+          .filter(i => i.layer.id == 'waterLine');
+        dialogShow.value = true;
+        blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
+        blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
 
-      queryYearStatist();
-      console.log('clickfeature', '点击事件11', clickfeature);
-      // emits('clicksWaterBodies', clickfeature[0].properties);
-    });
-  }, 5000);
+        queryYearStatist();
+        console.log('clickfeature', '点击事件11', clickfeature);
+        // emits('clicksWaterBodies', clickfeature[0].properties);
+      });
+    }, 5000);
+  });
+});
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
 });
 </script>
 <style lang="scss">
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 2b78ea4..46b8884 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -20,10 +20,28 @@
       <xiangMuJianShe></xiangMuJianShe>
       <ziJinJiXiao></ziJinJiXiao>
     </div>
+
+    <!-- 年份切换 -->
+    <div class="yearBox">
+      <el-button :type="currentYear == 2022 ? 'warning' : 'primary'" @click="changeYear(2022)">2022</el-button>
+      <el-button :type="currentYear == 2023 ? 'warning' : 'primary'" @click="changeYear(2023)">2023</el-button>
+      <el-button :type="currentYear == 2024 ? 'warning' : 'primary'" @click="changeYear(2024)" disabled>2024</el-button>
+    </div>
+
+    <!-- 佐证材料 -->
+    <el-dialog v-model="dialogVisible" :title="'佐证材料' + currentYear" width="600px" append-to-body>
+      <zzclDialog v-if="dialogVisible" :pageParams="pageParams"></zzclDialog>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import zzclDialog from './zzclDialog.vue'; //佐证材料公共弹窗
 import jiZhiJianShe from './jiZhiJianShe'; //管理绩效评价
 import ganZhiRenKeDu from './ganZhiRenKeDu'; //感知认可度考核评估
 import chanChuJiXiao from './chanChuJiXiao'; //产出绩效
@@ -37,6 +55,15 @@
 
 const { proxy } = getCurrentInstance();
 const showPanel = ref(true); //面板展开收起
+const currentYear = ref(2023);
+const dialogVisible = ref(false);
+const pageParams = ref({});
+
+// 年份切换
+function changeYear(year) {
+  currentYear.value = year;
+  bus.emit('changeYearKH', year);
+}
 
 // 面板内容展开收起控制
 const props = defineProps({
@@ -91,6 +118,13 @@
   bus.on('removeKHLayer', () => {
     removeSelectedLayer();
   });
+  changeYear(2023); //默认显示2023年数据
+  // 佐证材料
+  bus.on('getZzclData', e => {
+    pageParams.value.type = e;
+    pageParams.value.year = currentYear.value;
+    dialogVisible.value = true;
+  });
 });
 onBeforeUnmount(() => {
   removeSelectedLayer(['kaifengFangHong', 'kaifengRainUse']);
@@ -101,13 +135,27 @@
 <style lang="scss" scoped>
 .oneMapKHPG {
   width: 100%;
+  height: 100%;
   .headHMA {
     border-radius: 8px;
     top: 0px;
     height: auto;
-    padding: 10px;
     display: flex;
     background: none;
+    padding: 10px;
+  }
+  .yearBox {
+    position: fixed;
+    left: 480px;
+    bottom: 40px;
+    z-index: 99;
+    width: 80px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: right;
+    .el-button {
+      margin-bottom: 10px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
index 1573fee..6c56639 100644
--- a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
+++ b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 管理绩效评价 -->
   <div class="jiZhiJianShe">
-    <div class="partTitleHM" style="width: 99.8%">管理绩效评价(截至2024)</div>
+    <div class="partTitleHM" style="width: 99.8%">管理绩效评价</div>
     <div class="ListBoxBody">
       <div class="content">
         <div class="table_content">
diff --git a/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
index a39f881..911f40d 100644
--- a/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
+++ b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
@@ -2,7 +2,7 @@
   <!-- 可透水面积 -->
   <div class="ktsmjPage">
     <div class="partTitleHM">
-      可透水面积
+      产出绩效
       <div class="tabs flex">
         <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
           {{ item.name }}
@@ -39,6 +39,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom">
           {{ quotaInfo.remark }}
@@ -65,6 +66,12 @@
 const quotaInfo = ref({}); //改造措施数据
 const tableData = ref([]);
 const type = ref('ktsdmmj');
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -116,8 +123,15 @@
   }
 }
 onMounted(() => {
-  getjb();
-  getkhzn();
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
+    getjb();
+    getkhzn();
+  });
+});
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
 });
 </script>
 <style lang="scss" scoped>

diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
index 66b6399..ae77c3a 100644
--- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -36,6 +36,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -53,6 +54,7 @@
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
 import tuLi72X from '@/assets/newImgs/tuLi72X.png';
 import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json';
+import { onBeforeUnmount } from 'vue';
 
 const { proxy } = getCurrentInstance();
 const tabList = ref([
@@ -60,12 +62,17 @@
   { id: 'nlbz', name: '内涝标准' },
   { id: 'nlxc', name: '内涝消除' },
 ]);
-
 const curTab = ref('');
 const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
 const tableData = ref([]);
 const waterLoggingData = ref([]);
 const waterLoggingDataByType = ref([]);
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -342,10 +349,15 @@
 
 onMounted(() => {
   getWaterlogging();
-  setTimeout(() => {
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
     tabClick(tabList.value[0]);
   });
 });
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
+});
 </script>
 <style lang="scss">
 .l7-popup-tip {
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
index c6d0028..ac8833e 100644
--- a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="jiZhiJianShe">
-    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估</div>
     <div class="ListBoxBody">
       <div class="content">
         <div class="table_content">
diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
index 897bba6..0d2f814 100644
--- a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
+++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="chanChuJiXiao">
     <div class="partTitleHM">
-      河湖水质
+      产出绩效
       <div class="tabs flex">
         <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
           {{ item.name }}
@@ -45,6 +45,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -121,6 +122,12 @@
 const quotaInfo = ref({}); //改造措施数据
 const tableData = ref([]);
 const type = ref('hcst');
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -266,27 +273,34 @@
 };
 
 onMounted(() => {
-  getjb();
-  getkhzn();
-  setTimeout(() => {
-    // 地图河湖水质点击查看监测数据详情
-    newfiberMapbox.map.on('click', 'waterLine', e => {
-      let clickfeature = newfiberMapbox.map
-        .queryRenderedFeatures([
-          [e.point.x - 10 / 2, e.point.y - 10 / 2],
-          [e.point.x + 10 / 2, e.point.y + 10 / 2],
-        ])
-        // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
-        .filter(i => i.layer.id == 'waterLine');
-      dialogShow.value = true;
-      blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
-      blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
+    getjb();
+    getkhzn();
+    setTimeout(() => {
+      // 地图河湖水质点击查看监测数据详情
+      newfiberMapbox.map.on('click', 'waterLine', e => {
+        let clickfeature = newfiberMapbox.map
+          .queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ])
+          // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
+          .filter(i => i.layer.id == 'waterLine');
+        dialogShow.value = true;
+        blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
+        blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
 
-      queryYearStatist();
-      console.log('clickfeature', '点击事件11', clickfeature);
-      // emits('clicksWaterBodies', clickfeature[0].properties);
-    });
-  }, 5000);
+        queryYearStatist();
+        console.log('clickfeature', '点击事件11', clickfeature);
+        // emits('clicksWaterBodies', clickfeature[0].properties);
+      });
+    }, 5000);
+  });
+});
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
 });
 </script>
 <style lang="scss">
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 2b78ea4..46b8884 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -20,10 +20,28 @@
       <xiangMuJianShe></xiangMuJianShe>
       <ziJinJiXiao></ziJinJiXiao>
     </div>
+
+    <!-- 年份切换 -->
+    <div class="yearBox">
+      <el-button :type="currentYear == 2022 ? 'warning' : 'primary'" @click="changeYear(2022)">2022</el-button>
+      <el-button :type="currentYear == 2023 ? 'warning' : 'primary'" @click="changeYear(2023)">2023</el-button>
+      <el-button :type="currentYear == 2024 ? 'warning' : 'primary'" @click="changeYear(2024)" disabled>2024</el-button>
+    </div>
+
+    <!-- 佐证材料 -->
+    <el-dialog v-model="dialogVisible" :title="'佐证材料' + currentYear" width="600px" append-to-body>
+      <zzclDialog v-if="dialogVisible" :pageParams="pageParams"></zzclDialog>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import zzclDialog from './zzclDialog.vue'; //佐证材料公共弹窗
 import jiZhiJianShe from './jiZhiJianShe'; //管理绩效评价
 import ganZhiRenKeDu from './ganZhiRenKeDu'; //感知认可度考核评估
 import chanChuJiXiao from './chanChuJiXiao'; //产出绩效
@@ -37,6 +55,15 @@
 
 const { proxy } = getCurrentInstance();
 const showPanel = ref(true); //面板展开收起
+const currentYear = ref(2023);
+const dialogVisible = ref(false);
+const pageParams = ref({});
+
+// 年份切换
+function changeYear(year) {
+  currentYear.value = year;
+  bus.emit('changeYearKH', year);
+}
 
 // 面板内容展开收起控制
 const props = defineProps({
@@ -91,6 +118,13 @@
   bus.on('removeKHLayer', () => {
     removeSelectedLayer();
   });
+  changeYear(2023); //默认显示2023年数据
+  // 佐证材料
+  bus.on('getZzclData', e => {
+    pageParams.value.type = e;
+    pageParams.value.year = currentYear.value;
+    dialogVisible.value = true;
+  });
 });
 onBeforeUnmount(() => {
   removeSelectedLayer(['kaifengFangHong', 'kaifengRainUse']);
@@ -101,13 +135,27 @@
 <style lang="scss" scoped>
 .oneMapKHPG {
   width: 100%;
+  height: 100%;
   .headHMA {
     border-radius: 8px;
     top: 0px;
     height: auto;
-    padding: 10px;
     display: flex;
     background: none;
+    padding: 10px;
+  }
+  .yearBox {
+    position: fixed;
+    left: 480px;
+    bottom: 40px;
+    z-index: 99;
+    width: 80px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: right;
+    .el-button {
+      margin-bottom: 10px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
index 1573fee..6c56639 100644
--- a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
+++ b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 管理绩效评价 -->
   <div class="jiZhiJianShe">
-    <div class="partTitleHM" style="width: 99.8%">管理绩效评价(截至2024)</div>
+    <div class="partTitleHM" style="width: 99.8%">管理绩效评价</div>
     <div class="ListBoxBody">
       <div class="content">
         <div class="table_content">
diff --git a/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
index a39f881..911f40d 100644
--- a/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
+++ b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
@@ -2,7 +2,7 @@
   <!-- 可透水面积 -->
   <div class="ktsmjPage">
     <div class="partTitleHM">
-      可透水面积
+      产出绩效
       <div class="tabs flex">
         <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
           {{ item.name }}
@@ -39,6 +39,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom">
           {{ quotaInfo.remark }}
@@ -65,6 +66,12 @@
 const quotaInfo = ref({}); //改造措施数据
 const tableData = ref([]);
 const type = ref('ktsdmmj');
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -116,8 +123,15 @@
   }
 }
 onMounted(() => {
-  getjb();
-  getkhzn();
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
+    getjb();
+    getkhzn();
+  });
+});
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
 });
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue b/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
index 9bd624c..0d0e2d2 100644
--- a/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
+++ b/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="xiangMuJianShe">
-    <div class="partTitleHM">项目建设完成情况</div>
+    <div class="partTitleHM">管理绩效-项目建设完成情况</div>
     <div class="ListBoxBody">
       <div class="planCont">
         <div class="list">

diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
index 66b6399..ae77c3a 100644
--- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -36,6 +36,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -53,6 +54,7 @@
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
 import tuLi72X from '@/assets/newImgs/tuLi72X.png';
 import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json';
+import { onBeforeUnmount } from 'vue';
 
 const { proxy } = getCurrentInstance();
 const tabList = ref([
@@ -60,12 +62,17 @@
   { id: 'nlbz', name: '内涝标准' },
   { id: 'nlxc', name: '内涝消除' },
 ]);
-
 const curTab = ref('');
 const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
 const tableData = ref([]);
 const waterLoggingData = ref([]);
 const waterLoggingDataByType = ref([]);
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -342,10 +349,15 @@
 
 onMounted(() => {
   getWaterlogging();
-  setTimeout(() => {
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
     tabClick(tabList.value[0]);
   });
 });
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
+});
 </script>
 <style lang="scss">
 .l7-popup-tip {
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
index c6d0028..ac8833e 100644
--- a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="jiZhiJianShe">
-    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估</div>
     <div class="ListBoxBody">
       <div class="content">
         <div class="table_content">
diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
index 897bba6..0d2f814 100644
--- a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
+++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="chanChuJiXiao">
     <div class="partTitleHM">
-      河湖水质
+      产出绩效
       <div class="tabs flex">
         <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
           {{ item.name }}
@@ -45,6 +45,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -121,6 +122,12 @@
 const quotaInfo = ref({}); //改造措施数据
 const tableData = ref([]);
 const type = ref('hcst');
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -266,27 +273,34 @@
 };
 
 onMounted(() => {
-  getjb();
-  getkhzn();
-  setTimeout(() => {
-    // 地图河湖水质点击查看监测数据详情
-    newfiberMapbox.map.on('click', 'waterLine', e => {
-      let clickfeature = newfiberMapbox.map
-        .queryRenderedFeatures([
-          [e.point.x - 10 / 2, e.point.y - 10 / 2],
-          [e.point.x + 10 / 2, e.point.y + 10 / 2],
-        ])
-        // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
-        .filter(i => i.layer.id == 'waterLine');
-      dialogShow.value = true;
-      blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
-      blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
+    getjb();
+    getkhzn();
+    setTimeout(() => {
+      // 地图河湖水质点击查看监测数据详情
+      newfiberMapbox.map.on('click', 'waterLine', e => {
+        let clickfeature = newfiberMapbox.map
+          .queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ])
+          // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
+          .filter(i => i.layer.id == 'waterLine');
+        dialogShow.value = true;
+        blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
+        blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
 
-      queryYearStatist();
-      console.log('clickfeature', '点击事件11', clickfeature);
-      // emits('clicksWaterBodies', clickfeature[0].properties);
-    });
-  }, 5000);
+        queryYearStatist();
+        console.log('clickfeature', '点击事件11', clickfeature);
+        // emits('clicksWaterBodies', clickfeature[0].properties);
+      });
+    }, 5000);
+  });
+});
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
 });
 </script>
 <style lang="scss">
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 2b78ea4..46b8884 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -20,10 +20,28 @@
       <xiangMuJianShe></xiangMuJianShe>
       <ziJinJiXiao></ziJinJiXiao>
     </div>
+
+    <!-- 年份切换 -->
+    <div class="yearBox">
+      <el-button :type="currentYear == 2022 ? 'warning' : 'primary'" @click="changeYear(2022)">2022</el-button>
+      <el-button :type="currentYear == 2023 ? 'warning' : 'primary'" @click="changeYear(2023)">2023</el-button>
+      <el-button :type="currentYear == 2024 ? 'warning' : 'primary'" @click="changeYear(2024)" disabled>2024</el-button>
+    </div>
+
+    <!-- 佐证材料 -->
+    <el-dialog v-model="dialogVisible" :title="'佐证材料' + currentYear" width="600px" append-to-body>
+      <zzclDialog v-if="dialogVisible" :pageParams="pageParams"></zzclDialog>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import zzclDialog from './zzclDialog.vue'; //佐证材料公共弹窗
 import jiZhiJianShe from './jiZhiJianShe'; //管理绩效评价
 import ganZhiRenKeDu from './ganZhiRenKeDu'; //感知认可度考核评估
 import chanChuJiXiao from './chanChuJiXiao'; //产出绩效
@@ -37,6 +55,15 @@
 
 const { proxy } = getCurrentInstance();
 const showPanel = ref(true); //面板展开收起
+const currentYear = ref(2023);
+const dialogVisible = ref(false);
+const pageParams = ref({});
+
+// 年份切换
+function changeYear(year) {
+  currentYear.value = year;
+  bus.emit('changeYearKH', year);
+}
 
 // 面板内容展开收起控制
 const props = defineProps({
@@ -91,6 +118,13 @@
   bus.on('removeKHLayer', () => {
     removeSelectedLayer();
   });
+  changeYear(2023); //默认显示2023年数据
+  // 佐证材料
+  bus.on('getZzclData', e => {
+    pageParams.value.type = e;
+    pageParams.value.year = currentYear.value;
+    dialogVisible.value = true;
+  });
 });
 onBeforeUnmount(() => {
   removeSelectedLayer(['kaifengFangHong', 'kaifengRainUse']);
@@ -101,13 +135,27 @@
 <style lang="scss" scoped>
 .oneMapKHPG {
   width: 100%;
+  height: 100%;
   .headHMA {
     border-radius: 8px;
     top: 0px;
     height: auto;
-    padding: 10px;
     display: flex;
     background: none;
+    padding: 10px;
+  }
+  .yearBox {
+    position: fixed;
+    left: 480px;
+    bottom: 40px;
+    z-index: 99;
+    width: 80px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: right;
+    .el-button {
+      margin-bottom: 10px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
index 1573fee..6c56639 100644
--- a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
+++ b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 管理绩效评价 -->
   <div class="jiZhiJianShe">
-    <div class="partTitleHM" style="width: 99.8%">管理绩效评价(截至2024)</div>
+    <div class="partTitleHM" style="width: 99.8%">管理绩效评价</div>
     <div class="ListBoxBody">
       <div class="content">
         <div class="table_content">
diff --git a/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
index a39f881..911f40d 100644
--- a/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
+++ b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
@@ -2,7 +2,7 @@
   <!-- 可透水面积 -->
   <div class="ktsmjPage">
     <div class="partTitleHM">
-      可透水面积
+      产出绩效
       <div class="tabs flex">
         <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
           {{ item.name }}
@@ -39,6 +39,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom">
           {{ quotaInfo.remark }}
@@ -65,6 +66,12 @@
 const quotaInfo = ref({}); //改造措施数据
 const tableData = ref([]);
 const type = ref('ktsdmmj');
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -116,8 +123,15 @@
   }
 }
 onMounted(() => {
-  getjb();
-  getkhzn();
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
+    getjb();
+    getkhzn();
+  });
+});
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
 });
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue b/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
index 9bd624c..0d0e2d2 100644
--- a/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
+++ b/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="xiangMuJianShe">
-    <div class="partTitleHM">项目建设完成情况</div>
+    <div class="partTitleHM">管理绩效-项目建设完成情况</div>
     <div class="ListBoxBody">
       <div class="planCont">
         <div class="list">
diff --git a/src/views/sponeScreen/evaluationKH/yuShuiZiYuanHua.vue b/src/views/sponeScreen/evaluationKH/yuShuiZiYuanHua.vue
index 5c0b6f6..1a0ebca 100644
--- a/src/views/sponeScreen/evaluationKH/yuShuiZiYuanHua.vue
+++ b/src/views/sponeScreen/evaluationKH/yuShuiZiYuanHua.vue
@@ -3,7 +3,7 @@
   <div class="rainLYPage">
     <div class="ListBoxHeader">
       <div class="partTitleHM">
-        雨水资源化利用
+        产出绩效
         <div class="tabs flex">
           <div class="tabItem" v-for="item in tabList" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
             {{ item.name }}
@@ -37,6 +37,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -58,6 +59,8 @@
 const tableData = ref([]);
 const tabList = ref([{ id: '1', name: '雨水资源化利用' }]);
 const curTab = ref('1');
+const currentYear = ref(2023);
+
 const tabClick = item => {
   curTab.value = item.id;
   getjb();
@@ -73,6 +76,11 @@
   }, 500);
 };
 
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
+
 // 产出绩效公共指标信息
 async function getjb() {
   let res = await quotaCommomInfoList({
@@ -95,8 +103,15 @@
 }
 
 onMounted(() => {
-  getjb();
-  getkhzn();
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
+    getjb();
+    getkhzn();
+  });
+});
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
 });
 </script>
 <style lang="scss" scoped>

diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
index 66b6399..ae77c3a 100644
--- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -36,6 +36,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -53,6 +54,7 @@
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
 import tuLi72X from '@/assets/newImgs/tuLi72X.png';
 import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json';
+import { onBeforeUnmount } from 'vue';
 
 const { proxy } = getCurrentInstance();
 const tabList = ref([
@@ -60,12 +62,17 @@
   { id: 'nlbz', name: '内涝标准' },
   { id: 'nlxc', name: '内涝消除' },
 ]);
-
 const curTab = ref('');
 const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
 const tableData = ref([]);
 const waterLoggingData = ref([]);
 const waterLoggingDataByType = ref([]);
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -342,10 +349,15 @@
 
 onMounted(() => {
   getWaterlogging();
-  setTimeout(() => {
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
     tabClick(tabList.value[0]);
   });
 });
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
+});
 </script>
 <style lang="scss">
 .l7-popup-tip {
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
index c6d0028..ac8833e 100644
--- a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="jiZhiJianShe">
-    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估</div>
     <div class="ListBoxBody">
       <div class="content">
         <div class="table_content">
diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
index 897bba6..0d2f814 100644
--- a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
+++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="chanChuJiXiao">
     <div class="partTitleHM">
-      河湖水质
+      产出绩效
       <div class="tabs flex">
         <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
           {{ item.name }}
@@ -45,6 +45,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -121,6 +122,12 @@
 const quotaInfo = ref({}); //改造措施数据
 const tableData = ref([]);
 const type = ref('hcst');
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -266,27 +273,34 @@
 };
 
 onMounted(() => {
-  getjb();
-  getkhzn();
-  setTimeout(() => {
-    // 地图河湖水质点击查看监测数据详情
-    newfiberMapbox.map.on('click', 'waterLine', e => {
-      let clickfeature = newfiberMapbox.map
-        .queryRenderedFeatures([
-          [e.point.x - 10 / 2, e.point.y - 10 / 2],
-          [e.point.x + 10 / 2, e.point.y + 10 / 2],
-        ])
-        // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
-        .filter(i => i.layer.id == 'waterLine');
-      dialogShow.value = true;
-      blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
-      blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
+    getjb();
+    getkhzn();
+    setTimeout(() => {
+      // 地图河湖水质点击查看监测数据详情
+      newfiberMapbox.map.on('click', 'waterLine', e => {
+        let clickfeature = newfiberMapbox.map
+          .queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ])
+          // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
+          .filter(i => i.layer.id == 'waterLine');
+        dialogShow.value = true;
+        blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
+        blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
 
-      queryYearStatist();
-      console.log('clickfeature', '点击事件11', clickfeature);
-      // emits('clicksWaterBodies', clickfeature[0].properties);
-    });
-  }, 5000);
+        queryYearStatist();
+        console.log('clickfeature', '点击事件11', clickfeature);
+        // emits('clicksWaterBodies', clickfeature[0].properties);
+      });
+    }, 5000);
+  });
+});
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
 });
 </script>
 <style lang="scss">
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 2b78ea4..46b8884 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -20,10 +20,28 @@
       <xiangMuJianShe></xiangMuJianShe>
       <ziJinJiXiao></ziJinJiXiao>
     </div>
+
+    <!-- 年份切换 -->
+    <div class="yearBox">
+      <el-button :type="currentYear == 2022 ? 'warning' : 'primary'" @click="changeYear(2022)">2022</el-button>
+      <el-button :type="currentYear == 2023 ? 'warning' : 'primary'" @click="changeYear(2023)">2023</el-button>
+      <el-button :type="currentYear == 2024 ? 'warning' : 'primary'" @click="changeYear(2024)" disabled>2024</el-button>
+    </div>
+
+    <!-- 佐证材料 -->
+    <el-dialog v-model="dialogVisible" :title="'佐证材料' + currentYear" width="600px" append-to-body>
+      <zzclDialog v-if="dialogVisible" :pageParams="pageParams"></zzclDialog>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import zzclDialog from './zzclDialog.vue'; //佐证材料公共弹窗
 import jiZhiJianShe from './jiZhiJianShe'; //管理绩效评价
 import ganZhiRenKeDu from './ganZhiRenKeDu'; //感知认可度考核评估
 import chanChuJiXiao from './chanChuJiXiao'; //产出绩效
@@ -37,6 +55,15 @@
 
 const { proxy } = getCurrentInstance();
 const showPanel = ref(true); //面板展开收起
+const currentYear = ref(2023);
+const dialogVisible = ref(false);
+const pageParams = ref({});
+
+// 年份切换
+function changeYear(year) {
+  currentYear.value = year;
+  bus.emit('changeYearKH', year);
+}
 
 // 面板内容展开收起控制
 const props = defineProps({
@@ -91,6 +118,13 @@
   bus.on('removeKHLayer', () => {
     removeSelectedLayer();
   });
+  changeYear(2023); //默认显示2023年数据
+  // 佐证材料
+  bus.on('getZzclData', e => {
+    pageParams.value.type = e;
+    pageParams.value.year = currentYear.value;
+    dialogVisible.value = true;
+  });
 });
 onBeforeUnmount(() => {
   removeSelectedLayer(['kaifengFangHong', 'kaifengRainUse']);
@@ -101,13 +135,27 @@
 <style lang="scss" scoped>
 .oneMapKHPG {
   width: 100%;
+  height: 100%;
   .headHMA {
     border-radius: 8px;
     top: 0px;
     height: auto;
-    padding: 10px;
     display: flex;
     background: none;
+    padding: 10px;
+  }
+  .yearBox {
+    position: fixed;
+    left: 480px;
+    bottom: 40px;
+    z-index: 99;
+    width: 80px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: right;
+    .el-button {
+      margin-bottom: 10px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
index 1573fee..6c56639 100644
--- a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
+++ b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 管理绩效评价 -->
   <div class="jiZhiJianShe">
-    <div class="partTitleHM" style="width: 99.8%">管理绩效评价(截至2024)</div>
+    <div class="partTitleHM" style="width: 99.8%">管理绩效评价</div>
     <div class="ListBoxBody">
       <div class="content">
         <div class="table_content">
diff --git a/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
index a39f881..911f40d 100644
--- a/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
+++ b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
@@ -2,7 +2,7 @@
   <!-- 可透水面积 -->
   <div class="ktsmjPage">
     <div class="partTitleHM">
-      可透水面积
+      产出绩效
       <div class="tabs flex">
         <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
           {{ item.name }}
@@ -39,6 +39,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom">
           {{ quotaInfo.remark }}
@@ -65,6 +66,12 @@
 const quotaInfo = ref({}); //改造措施数据
 const tableData = ref([]);
 const type = ref('ktsdmmj');
+const currentYear = ref(2023);
+
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
 
 const tabClick = item => {
   curTab.value = item.id;
@@ -116,8 +123,15 @@
   }
 }
 onMounted(() => {
-  getjb();
-  getkhzn();
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
+    getjb();
+    getkhzn();
+  });
+});
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
 });
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue b/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
index 9bd624c..0d0e2d2 100644
--- a/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
+++ b/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="xiangMuJianShe">
-    <div class="partTitleHM">项目建设完成情况</div>
+    <div class="partTitleHM">管理绩效-项目建设完成情况</div>
     <div class="ListBoxBody">
       <div class="planCont">
         <div class="list">
diff --git a/src/views/sponeScreen/evaluationKH/yuShuiZiYuanHua.vue b/src/views/sponeScreen/evaluationKH/yuShuiZiYuanHua.vue
index 5c0b6f6..1a0ebca 100644
--- a/src/views/sponeScreen/evaluationKH/yuShuiZiYuanHua.vue
+++ b/src/views/sponeScreen/evaluationKH/yuShuiZiYuanHua.vue
@@ -3,7 +3,7 @@
   <div class="rainLYPage">
     <div class="ListBoxHeader">
       <div class="partTitleHM">
-        雨水资源化利用
+        产出绩效
         <div class="tabs flex">
           <div class="tabItem" v-for="item in tabList" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
             {{ item.name }}
@@ -37,6 +37,7 @@
           <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
             {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
           </div>
+          <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
         </div>
         <div class="bottom flex-v">
           <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
@@ -58,6 +59,8 @@
 const tableData = ref([]);
 const tabList = ref([{ id: '1', name: '雨水资源化利用' }]);
 const curTab = ref('1');
+const currentYear = ref(2023);
+
 const tabClick = item => {
   curTab.value = item.id;
   getjb();
@@ -73,6 +76,11 @@
   }, 500);
 };
 
+// 获取佐证材料
+function getZzcl() {
+  bus.emit('getZzclData', curTab.value);
+}
+
 // 产出绩效公共指标信息
 async function getjb() {
   let res = await quotaCommomInfoList({
@@ -95,8 +103,15 @@
 }
 
 onMounted(() => {
-  getjb();
-  getkhzn();
+  // 切换年份
+  bus.on('changeYearKH', e => {
+    currentYear.value = e;
+    getjb();
+    getkhzn();
+  });
+});
+onBeforeUnmount(() => {
+  bus.off('changeYearKH');
 });
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/sponeScreen/evaluationKH/zzclDialog.vue b/src/views/sponeScreen/evaluationKH/zzclDialog.vue
new file mode 100644
index 0000000..f82d2d2
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/zzclDialog.vue
@@ -0,0 +1,88 @@
+<template>
+  <!-- 佐证材料公共上传 -->
+  <div class="zzclPage">
+    <el-button type="warning" size="small" @click="addZzcl">新增佐证材料</el-button>
+    <el-table :data="tableData" style="margin: 20px 0px">
+      <el-table-column label="序号" type="index" width="50" />
+      <el-table-column label="文件名称" prop="name">
+        <template #default="{ row }">
+          <span class="green" style="cursor: pointer" @click="previewFile(row.name)">{{ row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="100">
+        <template #default="{ row }">
+          <el-button type="danger" size="small">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+  <el-dialog v-model="dialogVisible" title="新增佐证材料" width="500px" append-to-body>
+    <el-form ref="formRef" :model="formData" label-width="120px">
+      <el-form-item label="佐证材料:" prop="fileList">
+        <ImageFileUpload
+          :limit="1"
+          :saveFileArr="formData.fileList"
+          :listType="'text'"
+          :refField="'trfield'"
+          :refType="'tr_site_info'"
+          :fileType="['pdf,doc,docx']"
+        ></ImageFileUpload>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="info" @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
+
+const { proxy } = getCurrentInstance();
+const tableData = ref([{ index: 1, name: '材料.doc' }]);
+const dialogVisible = ref(false);
+const formData = ref({ fileList: [] });
+
+const props = defineProps({
+  pageParams: {
+    type: Object,
+  },
+});
+
+// 新增佐证材料
+function addZzcl() {
+  dialogVisible.value = true;
+  formData.value.fileList = [];
+}
+
+// 保存佐证材料
+function submitForm() {
+  // specialNavEdit(formData.value).then(response => {
+  //   proxy.$modal.msgSuccess('新增成功');
+  //   dialogVisible.value = false;
+  //   getDataList();
+  // });
+}
+
+// 预览文件
+function previewFile(name) {
+  window.open(name);
+}
+
+// 获取佐证材料列表
+function getDataList() {}
+
+onMounted(() => {
+  console.log('------', props.pageParams);
+  getDataList();
+});
+</script>
+
+<style lang="scss" scoped>
+.zzclPage {
+  width: 100%;
+}
+</style>