diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cg.png b/src/assets/newImgs/HMScreen/jxkh/cg.png
new file mode 100644
index 0000000..27eddc2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cg.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cg.png b/src/assets/newImgs/HMScreen/jxkh/cg.png
new file mode 100644
index 0000000..27eddc2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cs.png b/src/assets/newImgs/HMScreen/jxkh/cs.png
new file mode 100644
index 0000000..03dfacc
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cs.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cg.png b/src/assets/newImgs/HMScreen/jxkh/cg.png
new file mode 100644
index 0000000..27eddc2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cs.png b/src/assets/newImgs/HMScreen/jxkh/cs.png
new file mode 100644
index 0000000..03dfacc
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cs.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/mb.png b/src/assets/newImgs/HMScreen/jxkh/mb.png
new file mode 100644
index 0000000..9e56e63
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/mb.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cg.png b/src/assets/newImgs/HMScreen/jxkh/cg.png
new file mode 100644
index 0000000..27eddc2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cs.png b/src/assets/newImgs/HMScreen/jxkh/cs.png
new file mode 100644
index 0000000..03dfacc
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cs.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/mb.png b/src/assets/newImgs/HMScreen/jxkh/mb.png
new file mode 100644
index 0000000..9e56e63
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/mb.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/normal.png b/src/assets/newImgs/HMScreen/jxkh/normal.png
new file mode 100644
index 0000000..c23e26e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/normal.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cg.png b/src/assets/newImgs/HMScreen/jxkh/cg.png
new file mode 100644
index 0000000..27eddc2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cs.png b/src/assets/newImgs/HMScreen/jxkh/cs.png
new file mode 100644
index 0000000..03dfacc
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cs.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/mb.png b/src/assets/newImgs/HMScreen/jxkh/mb.png
new file mode 100644
index 0000000..9e56e63
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/mb.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/normal.png b/src/assets/newImgs/HMScreen/jxkh/normal.png
new file mode 100644
index 0000000..c23e26e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/normal.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..be1b152 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -24,7 +24,7 @@
     <PopupInfo></PopupInfo>
 
     <!-- 控制面板按钮 -->
-    <div :class="['controlHM', showPanel ? 'right30' : 'right480']" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right480']">
       <img src="@/assets/newImgs/HMScreen/pipe3D.png" alt="" title="三维管网" @click="controlPipe3D" />
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
@@ -179,7 +179,7 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(3);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);

diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cg.png b/src/assets/newImgs/HMScreen/jxkh/cg.png
new file mode 100644
index 0000000..27eddc2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cs.png b/src/assets/newImgs/HMScreen/jxkh/cs.png
new file mode 100644
index 0000000..03dfacc
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cs.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/mb.png b/src/assets/newImgs/HMScreen/jxkh/mb.png
new file mode 100644
index 0000000..9e56e63
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/mb.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/normal.png b/src/assets/newImgs/HMScreen/jxkh/normal.png
new file mode 100644
index 0000000..c23e26e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/normal.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..be1b152 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -24,7 +24,7 @@
     <PopupInfo></PopupInfo>
 
     <!-- 控制面板按钮 -->
-    <div :class="['controlHM', showPanel ? 'right30' : 'right480']" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right480']">
       <img src="@/assets/newImgs/HMScreen/pipe3D.png" alt="" title="三维管网" @click="controlPipe3D" />
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
@@ -179,7 +179,7 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(3);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
new file mode 100644
index 0000000..b872e4f
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -0,0 +1,238 @@
+<template>
+  <!--  产出绩效 -->
+  <div class="chanChuJiXiao">
+    <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 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="ConstrucClass">
+      <div class="content">
+        <div class="target flex flex-j-left flex-align-center">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">黄河 100 年一遇，黄汴河、惠济河 50 年一遇，马家河、东护城河、运粮河 20 年一遇。</div>
+        </div>
+        <div class="measures flex flex-j-left flex-align-center">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">
+            开封市实施一渠六河连通综合治理工程，对东 护城河、西护城河（黄汴河）、南护城河（黄汴河）等 5 条河道 进行了综合治理
+          </div>
+        </div>
+        <el-table ref="table" :data="tableData" max-height="120">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+
+        <div class="achievements flex flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import bus from '@/bus';
+// import { quotaCommomInfoList,hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const tabList = ref([
+  { id: 1, name: '防洪标准' },
+  { id: 2, name: '内涝标准' },
+  { id: 3, name: '内涝消除' },
+]);
+const curTab = ref(1);
+const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+  if (curTab.value == 1) {
+    bus.emit('jhkhclick', 'fzbz');
+  } else if (curTab.value == 2) {
+    bus.emit('jhkhclick', 'nlfz');
+  } else {
+    bus.emit('jhkhclick', 'nlxc');
+  }
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getjb();
+  // getkhzn();
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 100%;
+
+  .ConstrucClass {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        width: 350px;
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .renovation {
+        width: 100%;
+        height: 78px;
+        .renovationcons {
+          height: 50px;
+          color: #58d6ff;
+          font-size: 14px;
+          padding: 5px;
+
+          .sy,
+          .mj {
+            width: 50%;
+            text-align: center;
+          }
+        }
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cg.png b/src/assets/newImgs/HMScreen/jxkh/cg.png
new file mode 100644
index 0000000..27eddc2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cs.png b/src/assets/newImgs/HMScreen/jxkh/cs.png
new file mode 100644
index 0000000..03dfacc
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cs.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/mb.png b/src/assets/newImgs/HMScreen/jxkh/mb.png
new file mode 100644
index 0000000..9e56e63
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/mb.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/normal.png b/src/assets/newImgs/HMScreen/jxkh/normal.png
new file mode 100644
index 0000000..c23e26e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/normal.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..be1b152 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -24,7 +24,7 @@
     <PopupInfo></PopupInfo>
 
     <!-- 控制面板按钮 -->
-    <div :class="['controlHM', showPanel ? 'right30' : 'right480']" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right480']">
       <img src="@/assets/newImgs/HMScreen/pipe3D.png" alt="" title="三维管网" @click="controlPipe3D" />
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
@@ -179,7 +179,7 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(3);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
new file mode 100644
index 0000000..b872e4f
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -0,0 +1,238 @@
+<template>
+  <!--  产出绩效 -->
+  <div class="chanChuJiXiao">
+    <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 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="ConstrucClass">
+      <div class="content">
+        <div class="target flex flex-j-left flex-align-center">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">黄河 100 年一遇，黄汴河、惠济河 50 年一遇，马家河、东护城河、运粮河 20 年一遇。</div>
+        </div>
+        <div class="measures flex flex-j-left flex-align-center">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">
+            开封市实施一渠六河连通综合治理工程，对东 护城河、西护城河（黄汴河）、南护城河（黄汴河）等 5 条河道 进行了综合治理
+          </div>
+        </div>
+        <el-table ref="table" :data="tableData" max-height="120">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+
+        <div class="achievements flex flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import bus from '@/bus';
+// import { quotaCommomInfoList,hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const tabList = ref([
+  { id: 1, name: '防洪标准' },
+  { id: 2, name: '内涝标准' },
+  { id: 3, name: '内涝消除' },
+]);
+const curTab = ref(1);
+const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+  if (curTab.value == 1) {
+    bus.emit('jhkhclick', 'fzbz');
+  } else if (curTab.value == 2) {
+    bus.emit('jhkhclick', 'nlfz');
+  } else {
+    bus.emit('jhkhclick', 'nlxc');
+  }
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getjb();
+  // getkhzn();
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 100%;
+
+  .ConstrucClass {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        width: 350px;
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .renovation {
+        width: 100%;
+        height: 78px;
+        .renovationcons {
+          height: 50px;
+          color: #58d6ff;
+          font-size: 14px;
+          padding: 5px;
+
+          .sy,
+          .mj {
+            width: 50%;
+            text-align: center;
+          }
+        }
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
new file mode 100644
index 0000000..00bdf22
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="jiZhiJianShe">
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="table_content">
+          <el-table ref="table" :data="tableData" height="170">
+            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
+            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
+            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const tableData = ref([
+  { partitionName: '海绵文化宣传培训', reformProjectName: '培训4次,宣传6次', reformAchievement: '培训7次,宣传9次' },
+  { partitionName: '群众满意度', reformProjectName: '96%', reformAchievement: '96.9%' },
+]);
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.jiZhiJianShe {
+  width: 49%;
+  background: url('@/assets/images/Sponge_screen/chengShiTeZheng/box_back.png') no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .img_box {
+        width: 100%;
+        height: 100%;
+      }
+
+      .tabs {
+        height: 36px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .table_content {
+        height: 98%;
+      }
+
+      .monitor {
+        width: 20px;
+        height: 20px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+#tables {
+  width: 100%;
+  ::v-deep .el-table__header-wrapper .el-table__header thead {
+    background: transparent !important;
+    border-bottom: 1px solid #579ff6 !important;
+  }
+  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
+    background: transparent !important;
+    border-bottom: 2px solid #2eafbf !important;
+  }
+}
+
+::v-deep .table_content .el-table__body-wrapper {
+  padding-top: 5px;
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cg.png b/src/assets/newImgs/HMScreen/jxkh/cg.png
new file mode 100644
index 0000000..27eddc2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cs.png b/src/assets/newImgs/HMScreen/jxkh/cs.png
new file mode 100644
index 0000000..03dfacc
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cs.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/mb.png b/src/assets/newImgs/HMScreen/jxkh/mb.png
new file mode 100644
index 0000000..9e56e63
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/mb.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/normal.png b/src/assets/newImgs/HMScreen/jxkh/normal.png
new file mode 100644
index 0000000..c23e26e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/normal.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..be1b152 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -24,7 +24,7 @@
     <PopupInfo></PopupInfo>
 
     <!-- 控制面板按钮 -->
-    <div :class="['controlHM', showPanel ? 'right30' : 'right480']" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right480']">
       <img src="@/assets/newImgs/HMScreen/pipe3D.png" alt="" title="三维管网" @click="controlPipe3D" />
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
@@ -179,7 +179,7 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(3);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
new file mode 100644
index 0000000..b872e4f
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -0,0 +1,238 @@
+<template>
+  <!--  产出绩效 -->
+  <div class="chanChuJiXiao">
+    <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 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="ConstrucClass">
+      <div class="content">
+        <div class="target flex flex-j-left flex-align-center">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">黄河 100 年一遇，黄汴河、惠济河 50 年一遇，马家河、东护城河、运粮河 20 年一遇。</div>
+        </div>
+        <div class="measures flex flex-j-left flex-align-center">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">
+            开封市实施一渠六河连通综合治理工程，对东 护城河、西护城河（黄汴河）、南护城河（黄汴河）等 5 条河道 进行了综合治理
+          </div>
+        </div>
+        <el-table ref="table" :data="tableData" max-height="120">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+
+        <div class="achievements flex flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import bus from '@/bus';
+// import { quotaCommomInfoList,hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const tabList = ref([
+  { id: 1, name: '防洪标准' },
+  { id: 2, name: '内涝标准' },
+  { id: 3, name: '内涝消除' },
+]);
+const curTab = ref(1);
+const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+  if (curTab.value == 1) {
+    bus.emit('jhkhclick', 'fzbz');
+  } else if (curTab.value == 2) {
+    bus.emit('jhkhclick', 'nlfz');
+  } else {
+    bus.emit('jhkhclick', 'nlxc');
+  }
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getjb();
+  // getkhzn();
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 100%;
+
+  .ConstrucClass {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        width: 350px;
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .renovation {
+        width: 100%;
+        height: 78px;
+        .renovationcons {
+          height: 50px;
+          color: #58d6ff;
+          font-size: 14px;
+          padding: 5px;
+
+          .sy,
+          .mj {
+            width: 50%;
+            text-align: center;
+          }
+        }
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
new file mode 100644
index 0000000..00bdf22
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="jiZhiJianShe">
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="table_content">
+          <el-table ref="table" :data="tableData" height="170">
+            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
+            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
+            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const tableData = ref([
+  { partitionName: '海绵文化宣传培训', reformProjectName: '培训4次,宣传6次', reformAchievement: '培训7次,宣传9次' },
+  { partitionName: '群众满意度', reformProjectName: '96%', reformAchievement: '96.9%' },
+]);
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.jiZhiJianShe {
+  width: 49%;
+  background: url('@/assets/images/Sponge_screen/chengShiTeZheng/box_back.png') no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .img_box {
+        width: 100%;
+        height: 100%;
+      }
+
+      .tabs {
+        height: 36px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .table_content {
+        height: 98%;
+      }
+
+      .monitor {
+        width: 20px;
+        height: 20px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+#tables {
+  width: 100%;
+  ::v-deep .el-table__header-wrapper .el-table__header thead {
+    background: transparent !important;
+    border-bottom: 1px solid #579ff6 !important;
+  }
+  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
+    background: transparent !important;
+    border-bottom: 2px solid #2eafbf !important;
+  }
+}
+
+::v-deep .table_content .el-table__body-wrapper {
+  padding-top: 5px;
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
new file mode 100644
index 0000000..dc7b464
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
@@ -0,0 +1,341 @@
+<template>
+  <div
+    class="chanChuJiXiao"
+    :style="{
+      height: curTab == 1 ? '352px' : '382px',
+    }"
+  >
+    <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 }}
+        </div>
+      </div>
+    </div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="target flex flex-j-left">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.improveGoals }}</div>
+        </div>
+        <div class="measures flex flex-j-left">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.reformMethod }}</div>
+        </div>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 1">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 2">
+          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="进水量(万t/d)" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 3">
+          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="进水BOD浓度(mg/L)" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <div class="achievements flex flex-j-left flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <el-dialog v-model="opens" title="沋西渠" id="dialogContent" :modal-append-to-body="false" :close-on-click-modal="false" width="500px">
+    <div class="jcxx">
+      <el-tabs v-model="actitabs" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="基础信息" name="基础信息">
+          <div class="hcmsg">黑臭水体长度：&nbsp {{ hcdatas.blackRiverLength }}</div>
+          <div class="hcmsg">黑臭水体面积：&nbsp {{ hcdatas.blackRiverArea }}</div>
+          <div class="hcmsg">黑臭段起点：&nbsp {{ hcdatas.blackRiverStart }}</div>
+          <div class="hcmsg">黑臭段终点：&nbsp {{ hcdatas.blackRiverEnd }}</div>
+          <div>
+            治理照片：
+            <div class="img_box">
+              <img :src="item.url" alt="" class="img" v-for="item in photosList" />
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="监测站数据" name="监测站数据">
+          <div class="jcsj" v-if="actitabs == '监测站数据'">
+            <el-table ref="table" :data="listTable" style="width: 100%" :max-height="260">
+              <el-table-column label="监测月份" prop="month" show-overflow-tooltip />
+              <el-table-column label="溶解氧" prop="DOX" show-overflow-tooltip />
+              <el-table-column label="COD" prop="COD" />
+              <el-table-column label="氨氮" prop="NH3N" />
+              <el-table-column label="总磷" prop="TP1" />
+            </el-table>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="工程治理介绍" name="工程治理介绍">
+          <div class="" v-if="actitabs == '工程治理介绍'">
+            <div>
+              {{ hcdatas.projectManageIntro }}
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </el-dialog>
+</template>
+<script setup>
+// import { blackRiverList,sampleDetaillistTable ,quotaCommomInfoList,hmyztQuotaDataList} from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const opens = ref(false);
+const actitabs = ref('基础信息');
+const photosList = ref([]);
+const hcdatas = ref('');
+const listTable = ref('');
+const tabs = ref([
+  {
+    id: 1,
+    name: '黑臭水体',
+  },
+  {
+    id: 2,
+    name: '生活污水',
+  },
+  {
+    id: 3,
+    name: '进水BOD',
+  },
+]);
+const curTab = ref(1);
+
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+const type = ref('hcst');
+
+const tabClick = item => {
+  curTab.value = item.id;
+
+  if (curTab.value == 1) {
+    opens.value = true;
+    bus.emit('jhkhclick', 'hcst');
+    type.value = 'hcst';
+  } else if (curTab.value == 2) {
+    type.value = 'shwssjl';
+    bus.emit('jhkhclick', 'shwssjl');
+  } else {
+    type.value = 'cqjsbod';
+    bus.emit('jhkhclick', 'cqjsbod');
+  }
+  getjb();
+  getkhzn();
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: type.value,
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: type.value,
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+//黑臭水体数据切换table
+const handleClick = ({ props: { name } }, event) => {
+  if (name == '监测数据') {
+    setTimeout(() => {
+      getRiverData();
+    }, 500);
+  } else if (name == '视频监控') {
+    videoInfo.value = '';
+  }
+};
+// 黑臭基础信息+工程治理介绍
+
+async function getHc() {
+  let res = await blackRiverList();
+  if (res && res.code == 200) {
+    hcdatas.value = res.data[0];
+  }
+}
+// 黑臭水体监测站数据
+async function gethcrtus() {
+  let param = {
+    sampleType: 'hcst',
+    sampleYear: '2023',
+    sampleMonth: '',
+  };
+  let res = await sampleDetaillistTable(param);
+  if (res && res.code == 200) {
+    listTable.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getHc()
+  // gethcrtus()
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 460px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        overflow-y: scroll;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.jcxx {
+  width: 450px;
+  height: 360px;
+  color: #ffffff;
+  .hcmsg {
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .img_box {
+    margin-top: 10px;
+    width: 100%;
+    height: 160px;
+    overflow-y: scroll;
+    flex-wrap: wrap;
+    .img {
+      width: 100px;
+      height: 100px;
+    }
+  }
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cg.png b/src/assets/newImgs/HMScreen/jxkh/cg.png
new file mode 100644
index 0000000..27eddc2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cs.png b/src/assets/newImgs/HMScreen/jxkh/cs.png
new file mode 100644
index 0000000..03dfacc
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cs.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/mb.png b/src/assets/newImgs/HMScreen/jxkh/mb.png
new file mode 100644
index 0000000..9e56e63
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/mb.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/normal.png b/src/assets/newImgs/HMScreen/jxkh/normal.png
new file mode 100644
index 0000000..c23e26e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/normal.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..be1b152 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -24,7 +24,7 @@
     <PopupInfo></PopupInfo>
 
     <!-- 控制面板按钮 -->
-    <div :class="['controlHM', showPanel ? 'right30' : 'right480']" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right480']">
       <img src="@/assets/newImgs/HMScreen/pipe3D.png" alt="" title="三维管网" @click="controlPipe3D" />
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
@@ -179,7 +179,7 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(3);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
new file mode 100644
index 0000000..b872e4f
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -0,0 +1,238 @@
+<template>
+  <!--  产出绩效 -->
+  <div class="chanChuJiXiao">
+    <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 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="ConstrucClass">
+      <div class="content">
+        <div class="target flex flex-j-left flex-align-center">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">黄河 100 年一遇，黄汴河、惠济河 50 年一遇，马家河、东护城河、运粮河 20 年一遇。</div>
+        </div>
+        <div class="measures flex flex-j-left flex-align-center">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">
+            开封市实施一渠六河连通综合治理工程，对东 护城河、西护城河（黄汴河）、南护城河（黄汴河）等 5 条河道 进行了综合治理
+          </div>
+        </div>
+        <el-table ref="table" :data="tableData" max-height="120">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+
+        <div class="achievements flex flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import bus from '@/bus';
+// import { quotaCommomInfoList,hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const tabList = ref([
+  { id: 1, name: '防洪标准' },
+  { id: 2, name: '内涝标准' },
+  { id: 3, name: '内涝消除' },
+]);
+const curTab = ref(1);
+const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+  if (curTab.value == 1) {
+    bus.emit('jhkhclick', 'fzbz');
+  } else if (curTab.value == 2) {
+    bus.emit('jhkhclick', 'nlfz');
+  } else {
+    bus.emit('jhkhclick', 'nlxc');
+  }
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getjb();
+  // getkhzn();
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 100%;
+
+  .ConstrucClass {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        width: 350px;
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .renovation {
+        width: 100%;
+        height: 78px;
+        .renovationcons {
+          height: 50px;
+          color: #58d6ff;
+          font-size: 14px;
+          padding: 5px;
+
+          .sy,
+          .mj {
+            width: 50%;
+            text-align: center;
+          }
+        }
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
new file mode 100644
index 0000000..00bdf22
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="jiZhiJianShe">
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="table_content">
+          <el-table ref="table" :data="tableData" height="170">
+            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
+            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
+            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const tableData = ref([
+  { partitionName: '海绵文化宣传培训', reformProjectName: '培训4次,宣传6次', reformAchievement: '培训7次,宣传9次' },
+  { partitionName: '群众满意度', reformProjectName: '96%', reformAchievement: '96.9%' },
+]);
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.jiZhiJianShe {
+  width: 49%;
+  background: url('@/assets/images/Sponge_screen/chengShiTeZheng/box_back.png') no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .img_box {
+        width: 100%;
+        height: 100%;
+      }
+
+      .tabs {
+        height: 36px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .table_content {
+        height: 98%;
+      }
+
+      .monitor {
+        width: 20px;
+        height: 20px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+#tables {
+  width: 100%;
+  ::v-deep .el-table__header-wrapper .el-table__header thead {
+    background: transparent !important;
+    border-bottom: 1px solid #579ff6 !important;
+  }
+  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
+    background: transparent !important;
+    border-bottom: 2px solid #2eafbf !important;
+  }
+}
+
+::v-deep .table_content .el-table__body-wrapper {
+  padding-top: 5px;
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
new file mode 100644
index 0000000..dc7b464
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
@@ -0,0 +1,341 @@
+<template>
+  <div
+    class="chanChuJiXiao"
+    :style="{
+      height: curTab == 1 ? '352px' : '382px',
+    }"
+  >
+    <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 }}
+        </div>
+      </div>
+    </div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="target flex flex-j-left">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.improveGoals }}</div>
+        </div>
+        <div class="measures flex flex-j-left">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.reformMethod }}</div>
+        </div>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 1">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 2">
+          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="进水量(万t/d)" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 3">
+          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="进水BOD浓度(mg/L)" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <div class="achievements flex flex-j-left flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <el-dialog v-model="opens" title="沋西渠" id="dialogContent" :modal-append-to-body="false" :close-on-click-modal="false" width="500px">
+    <div class="jcxx">
+      <el-tabs v-model="actitabs" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="基础信息" name="基础信息">
+          <div class="hcmsg">黑臭水体长度：&nbsp {{ hcdatas.blackRiverLength }}</div>
+          <div class="hcmsg">黑臭水体面积：&nbsp {{ hcdatas.blackRiverArea }}</div>
+          <div class="hcmsg">黑臭段起点：&nbsp {{ hcdatas.blackRiverStart }}</div>
+          <div class="hcmsg">黑臭段终点：&nbsp {{ hcdatas.blackRiverEnd }}</div>
+          <div>
+            治理照片：
+            <div class="img_box">
+              <img :src="item.url" alt="" class="img" v-for="item in photosList" />
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="监测站数据" name="监测站数据">
+          <div class="jcsj" v-if="actitabs == '监测站数据'">
+            <el-table ref="table" :data="listTable" style="width: 100%" :max-height="260">
+              <el-table-column label="监测月份" prop="month" show-overflow-tooltip />
+              <el-table-column label="溶解氧" prop="DOX" show-overflow-tooltip />
+              <el-table-column label="COD" prop="COD" />
+              <el-table-column label="氨氮" prop="NH3N" />
+              <el-table-column label="总磷" prop="TP1" />
+            </el-table>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="工程治理介绍" name="工程治理介绍">
+          <div class="" v-if="actitabs == '工程治理介绍'">
+            <div>
+              {{ hcdatas.projectManageIntro }}
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </el-dialog>
+</template>
+<script setup>
+// import { blackRiverList,sampleDetaillistTable ,quotaCommomInfoList,hmyztQuotaDataList} from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const opens = ref(false);
+const actitabs = ref('基础信息');
+const photosList = ref([]);
+const hcdatas = ref('');
+const listTable = ref('');
+const tabs = ref([
+  {
+    id: 1,
+    name: '黑臭水体',
+  },
+  {
+    id: 2,
+    name: '生活污水',
+  },
+  {
+    id: 3,
+    name: '进水BOD',
+  },
+]);
+const curTab = ref(1);
+
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+const type = ref('hcst');
+
+const tabClick = item => {
+  curTab.value = item.id;
+
+  if (curTab.value == 1) {
+    opens.value = true;
+    bus.emit('jhkhclick', 'hcst');
+    type.value = 'hcst';
+  } else if (curTab.value == 2) {
+    type.value = 'shwssjl';
+    bus.emit('jhkhclick', 'shwssjl');
+  } else {
+    type.value = 'cqjsbod';
+    bus.emit('jhkhclick', 'cqjsbod');
+  }
+  getjb();
+  getkhzn();
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: type.value,
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: type.value,
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+//黑臭水体数据切换table
+const handleClick = ({ props: { name } }, event) => {
+  if (name == '监测数据') {
+    setTimeout(() => {
+      getRiverData();
+    }, 500);
+  } else if (name == '视频监控') {
+    videoInfo.value = '';
+  }
+};
+// 黑臭基础信息+工程治理介绍
+
+async function getHc() {
+  let res = await blackRiverList();
+  if (res && res.code == 200) {
+    hcdatas.value = res.data[0];
+  }
+}
+// 黑臭水体监测站数据
+async function gethcrtus() {
+  let param = {
+    sampleType: 'hcst',
+    sampleYear: '2023',
+    sampleMonth: '',
+  };
+  let res = await sampleDetaillistTable(param);
+  if (res && res.code == 200) {
+    listTable.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getHc()
+  // gethcrtus()
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 460px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        overflow-y: scroll;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.jcxx {
+  width: 450px;
+  height: 360px;
+  color: #ffffff;
+  .hcmsg {
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .img_box {
+    margin-top: 10px;
+    width: 100%;
+    height: 160px;
+    overflow-y: scroll;
+    flex-wrap: wrap;
+    .img {
+      width: 100px;
+      height: 100px;
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 5d473df..33b303f 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -1,15 +1,69 @@
 <template>
   <!-- 海绵综合一张图 考核评估 -->
   <div class="oneMapKHPG">
-    <KHPGHM></KHPGHM>
+    <!-- 左侧 -->
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
+      <chanChuJiXiao></chanChuJiXiao>
+      <yuShuiZiYuanHua></yuShuiZiYuanHua>
+      <keTouShuiMianJi></keTouShuiMianJi>
+    </div>
+
+    <!-- 中间 -->
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
+      <jiZhiJianShe></jiZhiJianShe>
+      <ganZhiRenKeDu></ganZhiRenKeDu>
+    </div>
+
+    <!-- 右侧 -->
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <heiChouShuiTi></heiChouShuiTi>
+      <xiangMuJianShe></xiangMuJianShe>
+      <ziJinJiXiao></ziJinJiXiao>
+    </div>
   </div>
 </template>
 
 <script setup>
-import KHPGHM from '@/views/spongePerformance/mainIndex/index.vue'; //业务系统考核首页
+import jiZhiJianShe from './jiZhiJianShe'; //管理绩效评价
+import ganZhiRenKeDu from './ganZhiRenKeDu'; //感知认可度考核评估
+import chanChuJiXiao from './chanChuJiXiao'; //产出绩效
+import yuShuiZiYuanHua from './yuShuiZiYuanHua'; //雨水资源化利用
+import keTouShuiMianJi from './keTouShuiMianJi'; //可透水面积
+import heiChouShuiTi from './heiChouShuiTi'; //黑臭水体
+import xiangMuJianShe from './xiangMuJianShe'; //项目建设完成情况
+import ziJinJiXiao from './ziJinJiXiao'; //资金绩效评价
+
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
 
 onMounted(() => {});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.oneMapKHPG {
+  width: 100%;
+  .headHMA {
+    background: none;
+    background: rgba(0, 59, 109, 0.8);
+    border-radius: 8px;
+    top: 10px;
+    height: auto;
+    padding: 10px;
+    display: flex;
+  }
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cg.png b/src/assets/newImgs/HMScreen/jxkh/cg.png
new file mode 100644
index 0000000..27eddc2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cs.png b/src/assets/newImgs/HMScreen/jxkh/cs.png
new file mode 100644
index 0000000..03dfacc
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cs.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/mb.png b/src/assets/newImgs/HMScreen/jxkh/mb.png
new file mode 100644
index 0000000..9e56e63
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/mb.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/normal.png b/src/assets/newImgs/HMScreen/jxkh/normal.png
new file mode 100644
index 0000000..c23e26e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/normal.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..be1b152 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -24,7 +24,7 @@
     <PopupInfo></PopupInfo>
 
     <!-- 控制面板按钮 -->
-    <div :class="['controlHM', showPanel ? 'right30' : 'right480']" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right480']">
       <img src="@/assets/newImgs/HMScreen/pipe3D.png" alt="" title="三维管网" @click="controlPipe3D" />
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
@@ -179,7 +179,7 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(3);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
new file mode 100644
index 0000000..b872e4f
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -0,0 +1,238 @@
+<template>
+  <!--  产出绩效 -->
+  <div class="chanChuJiXiao">
+    <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 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="ConstrucClass">
+      <div class="content">
+        <div class="target flex flex-j-left flex-align-center">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">黄河 100 年一遇，黄汴河、惠济河 50 年一遇，马家河、东护城河、运粮河 20 年一遇。</div>
+        </div>
+        <div class="measures flex flex-j-left flex-align-center">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">
+            开封市实施一渠六河连通综合治理工程，对东 护城河、西护城河（黄汴河）、南护城河（黄汴河）等 5 条河道 进行了综合治理
+          </div>
+        </div>
+        <el-table ref="table" :data="tableData" max-height="120">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+
+        <div class="achievements flex flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import bus from '@/bus';
+// import { quotaCommomInfoList,hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const tabList = ref([
+  { id: 1, name: '防洪标准' },
+  { id: 2, name: '内涝标准' },
+  { id: 3, name: '内涝消除' },
+]);
+const curTab = ref(1);
+const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+  if (curTab.value == 1) {
+    bus.emit('jhkhclick', 'fzbz');
+  } else if (curTab.value == 2) {
+    bus.emit('jhkhclick', 'nlfz');
+  } else {
+    bus.emit('jhkhclick', 'nlxc');
+  }
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getjb();
+  // getkhzn();
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 100%;
+
+  .ConstrucClass {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        width: 350px;
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .renovation {
+        width: 100%;
+        height: 78px;
+        .renovationcons {
+          height: 50px;
+          color: #58d6ff;
+          font-size: 14px;
+          padding: 5px;
+
+          .sy,
+          .mj {
+            width: 50%;
+            text-align: center;
+          }
+        }
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
new file mode 100644
index 0000000..00bdf22
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="jiZhiJianShe">
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="table_content">
+          <el-table ref="table" :data="tableData" height="170">
+            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
+            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
+            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const tableData = ref([
+  { partitionName: '海绵文化宣传培训', reformProjectName: '培训4次,宣传6次', reformAchievement: '培训7次,宣传9次' },
+  { partitionName: '群众满意度', reformProjectName: '96%', reformAchievement: '96.9%' },
+]);
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.jiZhiJianShe {
+  width: 49%;
+  background: url('@/assets/images/Sponge_screen/chengShiTeZheng/box_back.png') no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .img_box {
+        width: 100%;
+        height: 100%;
+      }
+
+      .tabs {
+        height: 36px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .table_content {
+        height: 98%;
+      }
+
+      .monitor {
+        width: 20px;
+        height: 20px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+#tables {
+  width: 100%;
+  ::v-deep .el-table__header-wrapper .el-table__header thead {
+    background: transparent !important;
+    border-bottom: 1px solid #579ff6 !important;
+  }
+  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
+    background: transparent !important;
+    border-bottom: 2px solid #2eafbf !important;
+  }
+}
+
+::v-deep .table_content .el-table__body-wrapper {
+  padding-top: 5px;
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
new file mode 100644
index 0000000..dc7b464
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
@@ -0,0 +1,341 @@
+<template>
+  <div
+    class="chanChuJiXiao"
+    :style="{
+      height: curTab == 1 ? '352px' : '382px',
+    }"
+  >
+    <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 }}
+        </div>
+      </div>
+    </div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="target flex flex-j-left">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.improveGoals }}</div>
+        </div>
+        <div class="measures flex flex-j-left">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.reformMethod }}</div>
+        </div>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 1">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 2">
+          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="进水量(万t/d)" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 3">
+          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="进水BOD浓度(mg/L)" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <div class="achievements flex flex-j-left flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <el-dialog v-model="opens" title="沋西渠" id="dialogContent" :modal-append-to-body="false" :close-on-click-modal="false" width="500px">
+    <div class="jcxx">
+      <el-tabs v-model="actitabs" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="基础信息" name="基础信息">
+          <div class="hcmsg">黑臭水体长度：&nbsp {{ hcdatas.blackRiverLength }}</div>
+          <div class="hcmsg">黑臭水体面积：&nbsp {{ hcdatas.blackRiverArea }}</div>
+          <div class="hcmsg">黑臭段起点：&nbsp {{ hcdatas.blackRiverStart }}</div>
+          <div class="hcmsg">黑臭段终点：&nbsp {{ hcdatas.blackRiverEnd }}</div>
+          <div>
+            治理照片：
+            <div class="img_box">
+              <img :src="item.url" alt="" class="img" v-for="item in photosList" />
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="监测站数据" name="监测站数据">
+          <div class="jcsj" v-if="actitabs == '监测站数据'">
+            <el-table ref="table" :data="listTable" style="width: 100%" :max-height="260">
+              <el-table-column label="监测月份" prop="month" show-overflow-tooltip />
+              <el-table-column label="溶解氧" prop="DOX" show-overflow-tooltip />
+              <el-table-column label="COD" prop="COD" />
+              <el-table-column label="氨氮" prop="NH3N" />
+              <el-table-column label="总磷" prop="TP1" />
+            </el-table>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="工程治理介绍" name="工程治理介绍">
+          <div class="" v-if="actitabs == '工程治理介绍'">
+            <div>
+              {{ hcdatas.projectManageIntro }}
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </el-dialog>
+</template>
+<script setup>
+// import { blackRiverList,sampleDetaillistTable ,quotaCommomInfoList,hmyztQuotaDataList} from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const opens = ref(false);
+const actitabs = ref('基础信息');
+const photosList = ref([]);
+const hcdatas = ref('');
+const listTable = ref('');
+const tabs = ref([
+  {
+    id: 1,
+    name: '黑臭水体',
+  },
+  {
+    id: 2,
+    name: '生活污水',
+  },
+  {
+    id: 3,
+    name: '进水BOD',
+  },
+]);
+const curTab = ref(1);
+
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+const type = ref('hcst');
+
+const tabClick = item => {
+  curTab.value = item.id;
+
+  if (curTab.value == 1) {
+    opens.value = true;
+    bus.emit('jhkhclick', 'hcst');
+    type.value = 'hcst';
+  } else if (curTab.value == 2) {
+    type.value = 'shwssjl';
+    bus.emit('jhkhclick', 'shwssjl');
+  } else {
+    type.value = 'cqjsbod';
+    bus.emit('jhkhclick', 'cqjsbod');
+  }
+  getjb();
+  getkhzn();
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: type.value,
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: type.value,
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+//黑臭水体数据切换table
+const handleClick = ({ props: { name } }, event) => {
+  if (name == '监测数据') {
+    setTimeout(() => {
+      getRiverData();
+    }, 500);
+  } else if (name == '视频监控') {
+    videoInfo.value = '';
+  }
+};
+// 黑臭基础信息+工程治理介绍
+
+async function getHc() {
+  let res = await blackRiverList();
+  if (res && res.code == 200) {
+    hcdatas.value = res.data[0];
+  }
+}
+// 黑臭水体监测站数据
+async function gethcrtus() {
+  let param = {
+    sampleType: 'hcst',
+    sampleYear: '2023',
+    sampleMonth: '',
+  };
+  let res = await sampleDetaillistTable(param);
+  if (res && res.code == 200) {
+    listTable.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getHc()
+  // gethcrtus()
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 460px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        overflow-y: scroll;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.jcxx {
+  width: 450px;
+  height: 360px;
+  color: #ffffff;
+  .hcmsg {
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .img_box {
+    margin-top: 10px;
+    width: 100%;
+    height: 160px;
+    overflow-y: scroll;
+    flex-wrap: wrap;
+    .img {
+      width: 100px;
+      height: 100px;
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 5d473df..33b303f 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -1,15 +1,69 @@
 <template>
   <!-- 海绵综合一张图 考核评估 -->
   <div class="oneMapKHPG">
-    <KHPGHM></KHPGHM>
+    <!-- 左侧 -->
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
+      <chanChuJiXiao></chanChuJiXiao>
+      <yuShuiZiYuanHua></yuShuiZiYuanHua>
+      <keTouShuiMianJi></keTouShuiMianJi>
+    </div>
+
+    <!-- 中间 -->
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
+      <jiZhiJianShe></jiZhiJianShe>
+      <ganZhiRenKeDu></ganZhiRenKeDu>
+    </div>
+
+    <!-- 右侧 -->
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <heiChouShuiTi></heiChouShuiTi>
+      <xiangMuJianShe></xiangMuJianShe>
+      <ziJinJiXiao></ziJinJiXiao>
+    </div>
   </div>
 </template>
 
 <script setup>
-import KHPGHM from '@/views/spongePerformance/mainIndex/index.vue'; //业务系统考核首页
+import jiZhiJianShe from './jiZhiJianShe'; //管理绩效评价
+import ganZhiRenKeDu from './ganZhiRenKeDu'; //感知认可度考核评估
+import chanChuJiXiao from './chanChuJiXiao'; //产出绩效
+import yuShuiZiYuanHua from './yuShuiZiYuanHua'; //雨水资源化利用
+import keTouShuiMianJi from './keTouShuiMianJi'; //可透水面积
+import heiChouShuiTi from './heiChouShuiTi'; //黑臭水体
+import xiangMuJianShe from './xiangMuJianShe'; //项目建设完成情况
+import ziJinJiXiao from './ziJinJiXiao'; //资金绩效评价
+
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
 
 onMounted(() => {});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.oneMapKHPG {
+  width: 100%;
+  .headHMA {
+    background: none;
+    background: rgba(0, 59, 109, 0.8);
+    border-radius: 8px;
+    top: 10px;
+    height: auto;
+    padding: 10px;
+    display: flex;
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
new file mode 100644
index 0000000..d36259f
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
@@ -0,0 +1,111 @@
+<template>
+  <!-- 管理绩效评价 -->
+  <div class="jiZhiJianShe">
+    <div class="partTitleHM" style="width: 99.8%">管理绩效评价(截至2024)</div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="table_content">
+          <el-table ref="table" :data="tableData" height="170">
+            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
+            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
+            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
+            <el-table-column label="达标评估" prop="isCompliance" width="120px">
+              <template #default="{ row }">
+                <span :class="row.isCompliance === '1' ? 'success' : 'danger'">{{ row.isCompliance === '1' ? '达标' : '未达标' }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import bus from '@/bus';
+
+const { proxy } = getCurrentInstance();
+const tableData = ref([
+  {
+    partitionName: '立法及长效机制',
+    reformProjectName: '完成立法1项,长效机制2项',
+    reformAchievement: '立法1项,6项长效机制',
+    isCompliance: '1',
+  },
+  { partitionName: '规划建设管控制度', reformProjectName: '基本完善', reformAchievement: '基本完善', isCompliance: '1' },
+  {
+    partitionName: '绩效考核制度',
+    reformProjectName: '基本完善',
+    reformAchievement: '完善海绵城市绩效考核制度并有效落实',
+    isCompliance: '1',
+  },
+]);
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.jiZhiJianShe {
+  width: 50%;
+  background: url('@/assets/images/Sponge_screen/chengShiTeZheng/box_back.png') no-repeat;
+  background-size: 100% 100%;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .img_box {
+        width: 100%;
+        height: 100%;
+      }
+
+      .tabs {
+        height: 36px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .table_content {
+        height: 98%;
+      }
+
+      .monitor {
+        width: 20px;
+        height: 20px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+.success {
+  color: #00fe00 !important;
+}
+.danger {
+  color: #ff5e66 !important;
+}
+#tables {
+  width: 100%;
+  ::v-deep .el-table__header-wrapper .el-table__header thead {
+    background: transparent !important;
+    border-bottom: 1px solid #579ff6 !important;
+  }
+  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
+    background: transparent !important;
+    border-bottom: 2px solid #2eafbf !important;
+  }
+}
+
+::v-deep .table_content .el-table__body-wrapper {
+  padding-top: 5px;
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cg.png b/src/assets/newImgs/HMScreen/jxkh/cg.png
new file mode 100644
index 0000000..27eddc2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cs.png b/src/assets/newImgs/HMScreen/jxkh/cs.png
new file mode 100644
index 0000000..03dfacc
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cs.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/mb.png b/src/assets/newImgs/HMScreen/jxkh/mb.png
new file mode 100644
index 0000000..9e56e63
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/mb.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/normal.png b/src/assets/newImgs/HMScreen/jxkh/normal.png
new file mode 100644
index 0000000..c23e26e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/normal.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..be1b152 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -24,7 +24,7 @@
     <PopupInfo></PopupInfo>
 
     <!-- 控制面板按钮 -->
-    <div :class="['controlHM', showPanel ? 'right30' : 'right480']" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right480']">
       <img src="@/assets/newImgs/HMScreen/pipe3D.png" alt="" title="三维管网" @click="controlPipe3D" />
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
@@ -179,7 +179,7 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(3);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
new file mode 100644
index 0000000..b872e4f
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -0,0 +1,238 @@
+<template>
+  <!--  产出绩效 -->
+  <div class="chanChuJiXiao">
+    <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 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="ConstrucClass">
+      <div class="content">
+        <div class="target flex flex-j-left flex-align-center">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">黄河 100 年一遇，黄汴河、惠济河 50 年一遇，马家河、东护城河、运粮河 20 年一遇。</div>
+        </div>
+        <div class="measures flex flex-j-left flex-align-center">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">
+            开封市实施一渠六河连通综合治理工程，对东 护城河、西护城河（黄汴河）、南护城河（黄汴河）等 5 条河道 进行了综合治理
+          </div>
+        </div>
+        <el-table ref="table" :data="tableData" max-height="120">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+
+        <div class="achievements flex flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import bus from '@/bus';
+// import { quotaCommomInfoList,hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const tabList = ref([
+  { id: 1, name: '防洪标准' },
+  { id: 2, name: '内涝标准' },
+  { id: 3, name: '内涝消除' },
+]);
+const curTab = ref(1);
+const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+  if (curTab.value == 1) {
+    bus.emit('jhkhclick', 'fzbz');
+  } else if (curTab.value == 2) {
+    bus.emit('jhkhclick', 'nlfz');
+  } else {
+    bus.emit('jhkhclick', 'nlxc');
+  }
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getjb();
+  // getkhzn();
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 100%;
+
+  .ConstrucClass {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        width: 350px;
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .renovation {
+        width: 100%;
+        height: 78px;
+        .renovationcons {
+          height: 50px;
+          color: #58d6ff;
+          font-size: 14px;
+          padding: 5px;
+
+          .sy,
+          .mj {
+            width: 50%;
+            text-align: center;
+          }
+        }
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
new file mode 100644
index 0000000..00bdf22
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="jiZhiJianShe">
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="table_content">
+          <el-table ref="table" :data="tableData" height="170">
+            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
+            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
+            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const tableData = ref([
+  { partitionName: '海绵文化宣传培训', reformProjectName: '培训4次,宣传6次', reformAchievement: '培训7次,宣传9次' },
+  { partitionName: '群众满意度', reformProjectName: '96%', reformAchievement: '96.9%' },
+]);
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.jiZhiJianShe {
+  width: 49%;
+  background: url('@/assets/images/Sponge_screen/chengShiTeZheng/box_back.png') no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .img_box {
+        width: 100%;
+        height: 100%;
+      }
+
+      .tabs {
+        height: 36px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .table_content {
+        height: 98%;
+      }
+
+      .monitor {
+        width: 20px;
+        height: 20px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+#tables {
+  width: 100%;
+  ::v-deep .el-table__header-wrapper .el-table__header thead {
+    background: transparent !important;
+    border-bottom: 1px solid #579ff6 !important;
+  }
+  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
+    background: transparent !important;
+    border-bottom: 2px solid #2eafbf !important;
+  }
+}
+
+::v-deep .table_content .el-table__body-wrapper {
+  padding-top: 5px;
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
new file mode 100644
index 0000000..dc7b464
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
@@ -0,0 +1,341 @@
+<template>
+  <div
+    class="chanChuJiXiao"
+    :style="{
+      height: curTab == 1 ? '352px' : '382px',
+    }"
+  >
+    <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 }}
+        </div>
+      </div>
+    </div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="target flex flex-j-left">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.improveGoals }}</div>
+        </div>
+        <div class="measures flex flex-j-left">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.reformMethod }}</div>
+        </div>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 1">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 2">
+          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="进水量(万t/d)" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 3">
+          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="进水BOD浓度(mg/L)" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <div class="achievements flex flex-j-left flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <el-dialog v-model="opens" title="沋西渠" id="dialogContent" :modal-append-to-body="false" :close-on-click-modal="false" width="500px">
+    <div class="jcxx">
+      <el-tabs v-model="actitabs" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="基础信息" name="基础信息">
+          <div class="hcmsg">黑臭水体长度：&nbsp {{ hcdatas.blackRiverLength }}</div>
+          <div class="hcmsg">黑臭水体面积：&nbsp {{ hcdatas.blackRiverArea }}</div>
+          <div class="hcmsg">黑臭段起点：&nbsp {{ hcdatas.blackRiverStart }}</div>
+          <div class="hcmsg">黑臭段终点：&nbsp {{ hcdatas.blackRiverEnd }}</div>
+          <div>
+            治理照片：
+            <div class="img_box">
+              <img :src="item.url" alt="" class="img" v-for="item in photosList" />
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="监测站数据" name="监测站数据">
+          <div class="jcsj" v-if="actitabs == '监测站数据'">
+            <el-table ref="table" :data="listTable" style="width: 100%" :max-height="260">
+              <el-table-column label="监测月份" prop="month" show-overflow-tooltip />
+              <el-table-column label="溶解氧" prop="DOX" show-overflow-tooltip />
+              <el-table-column label="COD" prop="COD" />
+              <el-table-column label="氨氮" prop="NH3N" />
+              <el-table-column label="总磷" prop="TP1" />
+            </el-table>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="工程治理介绍" name="工程治理介绍">
+          <div class="" v-if="actitabs == '工程治理介绍'">
+            <div>
+              {{ hcdatas.projectManageIntro }}
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </el-dialog>
+</template>
+<script setup>
+// import { blackRiverList,sampleDetaillistTable ,quotaCommomInfoList,hmyztQuotaDataList} from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const opens = ref(false);
+const actitabs = ref('基础信息');
+const photosList = ref([]);
+const hcdatas = ref('');
+const listTable = ref('');
+const tabs = ref([
+  {
+    id: 1,
+    name: '黑臭水体',
+  },
+  {
+    id: 2,
+    name: '生活污水',
+  },
+  {
+    id: 3,
+    name: '进水BOD',
+  },
+]);
+const curTab = ref(1);
+
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+const type = ref('hcst');
+
+const tabClick = item => {
+  curTab.value = item.id;
+
+  if (curTab.value == 1) {
+    opens.value = true;
+    bus.emit('jhkhclick', 'hcst');
+    type.value = 'hcst';
+  } else if (curTab.value == 2) {
+    type.value = 'shwssjl';
+    bus.emit('jhkhclick', 'shwssjl');
+  } else {
+    type.value = 'cqjsbod';
+    bus.emit('jhkhclick', 'cqjsbod');
+  }
+  getjb();
+  getkhzn();
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: type.value,
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: type.value,
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+//黑臭水体数据切换table
+const handleClick = ({ props: { name } }, event) => {
+  if (name == '监测数据') {
+    setTimeout(() => {
+      getRiverData();
+    }, 500);
+  } else if (name == '视频监控') {
+    videoInfo.value = '';
+  }
+};
+// 黑臭基础信息+工程治理介绍
+
+async function getHc() {
+  let res = await blackRiverList();
+  if (res && res.code == 200) {
+    hcdatas.value = res.data[0];
+  }
+}
+// 黑臭水体监测站数据
+async function gethcrtus() {
+  let param = {
+    sampleType: 'hcst',
+    sampleYear: '2023',
+    sampleMonth: '',
+  };
+  let res = await sampleDetaillistTable(param);
+  if (res && res.code == 200) {
+    listTable.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getHc()
+  // gethcrtus()
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 460px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        overflow-y: scroll;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.jcxx {
+  width: 450px;
+  height: 360px;
+  color: #ffffff;
+  .hcmsg {
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .img_box {
+    margin-top: 10px;
+    width: 100%;
+    height: 160px;
+    overflow-y: scroll;
+    flex-wrap: wrap;
+    .img {
+      width: 100px;
+      height: 100px;
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 5d473df..33b303f 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -1,15 +1,69 @@
 <template>
   <!-- 海绵综合一张图 考核评估 -->
   <div class="oneMapKHPG">
-    <KHPGHM></KHPGHM>
+    <!-- 左侧 -->
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
+      <chanChuJiXiao></chanChuJiXiao>
+      <yuShuiZiYuanHua></yuShuiZiYuanHua>
+      <keTouShuiMianJi></keTouShuiMianJi>
+    </div>
+
+    <!-- 中间 -->
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
+      <jiZhiJianShe></jiZhiJianShe>
+      <ganZhiRenKeDu></ganZhiRenKeDu>
+    </div>
+
+    <!-- 右侧 -->
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <heiChouShuiTi></heiChouShuiTi>
+      <xiangMuJianShe></xiangMuJianShe>
+      <ziJinJiXiao></ziJinJiXiao>
+    </div>
   </div>
 </template>
 
 <script setup>
-import KHPGHM from '@/views/spongePerformance/mainIndex/index.vue'; //业务系统考核首页
+import jiZhiJianShe from './jiZhiJianShe'; //管理绩效评价
+import ganZhiRenKeDu from './ganZhiRenKeDu'; //感知认可度考核评估
+import chanChuJiXiao from './chanChuJiXiao'; //产出绩效
+import yuShuiZiYuanHua from './yuShuiZiYuanHua'; //雨水资源化利用
+import keTouShuiMianJi from './keTouShuiMianJi'; //可透水面积
+import heiChouShuiTi from './heiChouShuiTi'; //黑臭水体
+import xiangMuJianShe from './xiangMuJianShe'; //项目建设完成情况
+import ziJinJiXiao from './ziJinJiXiao'; //资金绩效评价
+
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
 
 onMounted(() => {});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.oneMapKHPG {
+  width: 100%;
+  .headHMA {
+    background: none;
+    background: rgba(0, 59, 109, 0.8);
+    border-radius: 8px;
+    top: 10px;
+    height: auto;
+    padding: 10px;
+    display: flex;
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
new file mode 100644
index 0000000..d36259f
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
@@ -0,0 +1,111 @@
+<template>
+  <!-- 管理绩效评价 -->
+  <div class="jiZhiJianShe">
+    <div class="partTitleHM" style="width: 99.8%">管理绩效评价(截至2024)</div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="table_content">
+          <el-table ref="table" :data="tableData" height="170">
+            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
+            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
+            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
+            <el-table-column label="达标评估" prop="isCompliance" width="120px">
+              <template #default="{ row }">
+                <span :class="row.isCompliance === '1' ? 'success' : 'danger'">{{ row.isCompliance === '1' ? '达标' : '未达标' }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import bus from '@/bus';
+
+const { proxy } = getCurrentInstance();
+const tableData = ref([
+  {
+    partitionName: '立法及长效机制',
+    reformProjectName: '完成立法1项,长效机制2项',
+    reformAchievement: '立法1项,6项长效机制',
+    isCompliance: '1',
+  },
+  { partitionName: '规划建设管控制度', reformProjectName: '基本完善', reformAchievement: '基本完善', isCompliance: '1' },
+  {
+    partitionName: '绩效考核制度',
+    reformProjectName: '基本完善',
+    reformAchievement: '完善海绵城市绩效考核制度并有效落实',
+    isCompliance: '1',
+  },
+]);
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.jiZhiJianShe {
+  width: 50%;
+  background: url('@/assets/images/Sponge_screen/chengShiTeZheng/box_back.png') no-repeat;
+  background-size: 100% 100%;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .img_box {
+        width: 100%;
+        height: 100%;
+      }
+
+      .tabs {
+        height: 36px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .table_content {
+        height: 98%;
+      }
+
+      .monitor {
+        width: 20px;
+        height: 20px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+.success {
+  color: #00fe00 !important;
+}
+.danger {
+  color: #ff5e66 !important;
+}
+#tables {
+  width: 100%;
+  ::v-deep .el-table__header-wrapper .el-table__header thead {
+    background: transparent !important;
+    border-bottom: 1px solid #579ff6 !important;
+  }
+  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
+    background: transparent !important;
+    border-bottom: 2px solid #2eafbf !important;
+  }
+}
+
+::v-deep .table_content .el-table__body-wrapper {
+  padding-top: 5px;
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
new file mode 100644
index 0000000..856530d
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
@@ -0,0 +1,223 @@
+<template>
+  <!-- 可透水面积 -->
+  <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 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="target flex flex-j-left">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.improveGoals }}</div>
+        </div>
+        <div class="measures flex flex-j-left">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.reformMethod }}</div>
+        </div>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 1">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 2">
+          <el-table-column label="现状水域" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="水域面积（㎡）" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <div class="achievements flex flex-j-left flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom">
+          {{ quotaInfo.remark }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+const { proxy } = getCurrentInstance();
+// import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js';
+const tabs = ref([
+  {
+    id: 1,
+    name: '可透水',
+  },
+  {
+    id: 2,
+    name: '天然水域',
+  },
+]);
+const curTab = ref(1);
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+  if (curTab.value == 1) {
+    type.value = 'ktsdmmj';
+    bus.emit('jhkhclick', 'ktsdmmj');
+  } else {
+    bus.emit('jhkhclick', 'trsymj');
+    type.value = 'trsymj';
+  }
+  getjb();
+  getkhzn();
+};
+const type = ref('ktsdmmj');
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: type.value,
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: type.value,
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+onMounted(() => {
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.ktsmjPage {
+  width: 100%;
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 40px;
+        line-height: 35px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cg.png b/src/assets/newImgs/HMScreen/jxkh/cg.png
new file mode 100644
index 0000000..27eddc2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cs.png b/src/assets/newImgs/HMScreen/jxkh/cs.png
new file mode 100644
index 0000000..03dfacc
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cs.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/mb.png b/src/assets/newImgs/HMScreen/jxkh/mb.png
new file mode 100644
index 0000000..9e56e63
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/mb.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/normal.png b/src/assets/newImgs/HMScreen/jxkh/normal.png
new file mode 100644
index 0000000..c23e26e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/normal.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..be1b152 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -24,7 +24,7 @@
     <PopupInfo></PopupInfo>
 
     <!-- 控制面板按钮 -->
-    <div :class="['controlHM', showPanel ? 'right30' : 'right480']" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right480']">
       <img src="@/assets/newImgs/HMScreen/pipe3D.png" alt="" title="三维管网" @click="controlPipe3D" />
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
@@ -179,7 +179,7 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(3);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
new file mode 100644
index 0000000..b872e4f
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -0,0 +1,238 @@
+<template>
+  <!--  产出绩效 -->
+  <div class="chanChuJiXiao">
+    <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 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="ConstrucClass">
+      <div class="content">
+        <div class="target flex flex-j-left flex-align-center">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">黄河 100 年一遇，黄汴河、惠济河 50 年一遇，马家河、东护城河、运粮河 20 年一遇。</div>
+        </div>
+        <div class="measures flex flex-j-left flex-align-center">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">
+            开封市实施一渠六河连通综合治理工程，对东 护城河、西护城河（黄汴河）、南护城河（黄汴河）等 5 条河道 进行了综合治理
+          </div>
+        </div>
+        <el-table ref="table" :data="tableData" max-height="120">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+
+        <div class="achievements flex flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import bus from '@/bus';
+// import { quotaCommomInfoList,hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const tabList = ref([
+  { id: 1, name: '防洪标准' },
+  { id: 2, name: '内涝标准' },
+  { id: 3, name: '内涝消除' },
+]);
+const curTab = ref(1);
+const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+  if (curTab.value == 1) {
+    bus.emit('jhkhclick', 'fzbz');
+  } else if (curTab.value == 2) {
+    bus.emit('jhkhclick', 'nlfz');
+  } else {
+    bus.emit('jhkhclick', 'nlxc');
+  }
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getjb();
+  // getkhzn();
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 100%;
+
+  .ConstrucClass {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        width: 350px;
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .renovation {
+        width: 100%;
+        height: 78px;
+        .renovationcons {
+          height: 50px;
+          color: #58d6ff;
+          font-size: 14px;
+          padding: 5px;
+
+          .sy,
+          .mj {
+            width: 50%;
+            text-align: center;
+          }
+        }
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
new file mode 100644
index 0000000..00bdf22
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="jiZhiJianShe">
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="table_content">
+          <el-table ref="table" :data="tableData" height="170">
+            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
+            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
+            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const tableData = ref([
+  { partitionName: '海绵文化宣传培训', reformProjectName: '培训4次,宣传6次', reformAchievement: '培训7次,宣传9次' },
+  { partitionName: '群众满意度', reformProjectName: '96%', reformAchievement: '96.9%' },
+]);
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.jiZhiJianShe {
+  width: 49%;
+  background: url('@/assets/images/Sponge_screen/chengShiTeZheng/box_back.png') no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .img_box {
+        width: 100%;
+        height: 100%;
+      }
+
+      .tabs {
+        height: 36px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .table_content {
+        height: 98%;
+      }
+
+      .monitor {
+        width: 20px;
+        height: 20px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+#tables {
+  width: 100%;
+  ::v-deep .el-table__header-wrapper .el-table__header thead {
+    background: transparent !important;
+    border-bottom: 1px solid #579ff6 !important;
+  }
+  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
+    background: transparent !important;
+    border-bottom: 2px solid #2eafbf !important;
+  }
+}
+
+::v-deep .table_content .el-table__body-wrapper {
+  padding-top: 5px;
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
new file mode 100644
index 0000000..dc7b464
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
@@ -0,0 +1,341 @@
+<template>
+  <div
+    class="chanChuJiXiao"
+    :style="{
+      height: curTab == 1 ? '352px' : '382px',
+    }"
+  >
+    <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 }}
+        </div>
+      </div>
+    </div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="target flex flex-j-left">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.improveGoals }}</div>
+        </div>
+        <div class="measures flex flex-j-left">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.reformMethod }}</div>
+        </div>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 1">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 2">
+          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="进水量(万t/d)" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 3">
+          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="进水BOD浓度(mg/L)" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <div class="achievements flex flex-j-left flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <el-dialog v-model="opens" title="沋西渠" id="dialogContent" :modal-append-to-body="false" :close-on-click-modal="false" width="500px">
+    <div class="jcxx">
+      <el-tabs v-model="actitabs" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="基础信息" name="基础信息">
+          <div class="hcmsg">黑臭水体长度：&nbsp {{ hcdatas.blackRiverLength }}</div>
+          <div class="hcmsg">黑臭水体面积：&nbsp {{ hcdatas.blackRiverArea }}</div>
+          <div class="hcmsg">黑臭段起点：&nbsp {{ hcdatas.blackRiverStart }}</div>
+          <div class="hcmsg">黑臭段终点：&nbsp {{ hcdatas.blackRiverEnd }}</div>
+          <div>
+            治理照片：
+            <div class="img_box">
+              <img :src="item.url" alt="" class="img" v-for="item in photosList" />
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="监测站数据" name="监测站数据">
+          <div class="jcsj" v-if="actitabs == '监测站数据'">
+            <el-table ref="table" :data="listTable" style="width: 100%" :max-height="260">
+              <el-table-column label="监测月份" prop="month" show-overflow-tooltip />
+              <el-table-column label="溶解氧" prop="DOX" show-overflow-tooltip />
+              <el-table-column label="COD" prop="COD" />
+              <el-table-column label="氨氮" prop="NH3N" />
+              <el-table-column label="总磷" prop="TP1" />
+            </el-table>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="工程治理介绍" name="工程治理介绍">
+          <div class="" v-if="actitabs == '工程治理介绍'">
+            <div>
+              {{ hcdatas.projectManageIntro }}
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </el-dialog>
+</template>
+<script setup>
+// import { blackRiverList,sampleDetaillistTable ,quotaCommomInfoList,hmyztQuotaDataList} from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const opens = ref(false);
+const actitabs = ref('基础信息');
+const photosList = ref([]);
+const hcdatas = ref('');
+const listTable = ref('');
+const tabs = ref([
+  {
+    id: 1,
+    name: '黑臭水体',
+  },
+  {
+    id: 2,
+    name: '生活污水',
+  },
+  {
+    id: 3,
+    name: '进水BOD',
+  },
+]);
+const curTab = ref(1);
+
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+const type = ref('hcst');
+
+const tabClick = item => {
+  curTab.value = item.id;
+
+  if (curTab.value == 1) {
+    opens.value = true;
+    bus.emit('jhkhclick', 'hcst');
+    type.value = 'hcst';
+  } else if (curTab.value == 2) {
+    type.value = 'shwssjl';
+    bus.emit('jhkhclick', 'shwssjl');
+  } else {
+    type.value = 'cqjsbod';
+    bus.emit('jhkhclick', 'cqjsbod');
+  }
+  getjb();
+  getkhzn();
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: type.value,
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: type.value,
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+//黑臭水体数据切换table
+const handleClick = ({ props: { name } }, event) => {
+  if (name == '监测数据') {
+    setTimeout(() => {
+      getRiverData();
+    }, 500);
+  } else if (name == '视频监控') {
+    videoInfo.value = '';
+  }
+};
+// 黑臭基础信息+工程治理介绍
+
+async function getHc() {
+  let res = await blackRiverList();
+  if (res && res.code == 200) {
+    hcdatas.value = res.data[0];
+  }
+}
+// 黑臭水体监测站数据
+async function gethcrtus() {
+  let param = {
+    sampleType: 'hcst',
+    sampleYear: '2023',
+    sampleMonth: '',
+  };
+  let res = await sampleDetaillistTable(param);
+  if (res && res.code == 200) {
+    listTable.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getHc()
+  // gethcrtus()
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 460px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        overflow-y: scroll;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.jcxx {
+  width: 450px;
+  height: 360px;
+  color: #ffffff;
+  .hcmsg {
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .img_box {
+    margin-top: 10px;
+    width: 100%;
+    height: 160px;
+    overflow-y: scroll;
+    flex-wrap: wrap;
+    .img {
+      width: 100px;
+      height: 100px;
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 5d473df..33b303f 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -1,15 +1,69 @@
 <template>
   <!-- 海绵综合一张图 考核评估 -->
   <div class="oneMapKHPG">
-    <KHPGHM></KHPGHM>
+    <!-- 左侧 -->
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
+      <chanChuJiXiao></chanChuJiXiao>
+      <yuShuiZiYuanHua></yuShuiZiYuanHua>
+      <keTouShuiMianJi></keTouShuiMianJi>
+    </div>
+
+    <!-- 中间 -->
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
+      <jiZhiJianShe></jiZhiJianShe>
+      <ganZhiRenKeDu></ganZhiRenKeDu>
+    </div>
+
+    <!-- 右侧 -->
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <heiChouShuiTi></heiChouShuiTi>
+      <xiangMuJianShe></xiangMuJianShe>
+      <ziJinJiXiao></ziJinJiXiao>
+    </div>
   </div>
 </template>
 
 <script setup>
-import KHPGHM from '@/views/spongePerformance/mainIndex/index.vue'; //业务系统考核首页
+import jiZhiJianShe from './jiZhiJianShe'; //管理绩效评价
+import ganZhiRenKeDu from './ganZhiRenKeDu'; //感知认可度考核评估
+import chanChuJiXiao from './chanChuJiXiao'; //产出绩效
+import yuShuiZiYuanHua from './yuShuiZiYuanHua'; //雨水资源化利用
+import keTouShuiMianJi from './keTouShuiMianJi'; //可透水面积
+import heiChouShuiTi from './heiChouShuiTi'; //黑臭水体
+import xiangMuJianShe from './xiangMuJianShe'; //项目建设完成情况
+import ziJinJiXiao from './ziJinJiXiao'; //资金绩效评价
+
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
 
 onMounted(() => {});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.oneMapKHPG {
+  width: 100%;
+  .headHMA {
+    background: none;
+    background: rgba(0, 59, 109, 0.8);
+    border-radius: 8px;
+    top: 10px;
+    height: auto;
+    padding: 10px;
+    display: flex;
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
new file mode 100644
index 0000000..d36259f
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
@@ -0,0 +1,111 @@
+<template>
+  <!-- 管理绩效评价 -->
+  <div class="jiZhiJianShe">
+    <div class="partTitleHM" style="width: 99.8%">管理绩效评价(截至2024)</div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="table_content">
+          <el-table ref="table" :data="tableData" height="170">
+            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
+            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
+            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
+            <el-table-column label="达标评估" prop="isCompliance" width="120px">
+              <template #default="{ row }">
+                <span :class="row.isCompliance === '1' ? 'success' : 'danger'">{{ row.isCompliance === '1' ? '达标' : '未达标' }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import bus from '@/bus';
+
+const { proxy } = getCurrentInstance();
+const tableData = ref([
+  {
+    partitionName: '立法及长效机制',
+    reformProjectName: '完成立法1项,长效机制2项',
+    reformAchievement: '立法1项,6项长效机制',
+    isCompliance: '1',
+  },
+  { partitionName: '规划建设管控制度', reformProjectName: '基本完善', reformAchievement: '基本完善', isCompliance: '1' },
+  {
+    partitionName: '绩效考核制度',
+    reformProjectName: '基本完善',
+    reformAchievement: '完善海绵城市绩效考核制度并有效落实',
+    isCompliance: '1',
+  },
+]);
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.jiZhiJianShe {
+  width: 50%;
+  background: url('@/assets/images/Sponge_screen/chengShiTeZheng/box_back.png') no-repeat;
+  background-size: 100% 100%;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .img_box {
+        width: 100%;
+        height: 100%;
+      }
+
+      .tabs {
+        height: 36px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .table_content {
+        height: 98%;
+      }
+
+      .monitor {
+        width: 20px;
+        height: 20px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+.success {
+  color: #00fe00 !important;
+}
+.danger {
+  color: #ff5e66 !important;
+}
+#tables {
+  width: 100%;
+  ::v-deep .el-table__header-wrapper .el-table__header thead {
+    background: transparent !important;
+    border-bottom: 1px solid #579ff6 !important;
+  }
+  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
+    background: transparent !important;
+    border-bottom: 2px solid #2eafbf !important;
+  }
+}
+
+::v-deep .table_content .el-table__body-wrapper {
+  padding-top: 5px;
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
new file mode 100644
index 0000000..856530d
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
@@ -0,0 +1,223 @@
+<template>
+  <!-- 可透水面积 -->
+  <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 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="target flex flex-j-left">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.improveGoals }}</div>
+        </div>
+        <div class="measures flex flex-j-left">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.reformMethod }}</div>
+        </div>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 1">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 2">
+          <el-table-column label="现状水域" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="水域面积（㎡）" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <div class="achievements flex flex-j-left flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom">
+          {{ quotaInfo.remark }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+const { proxy } = getCurrentInstance();
+// import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js';
+const tabs = ref([
+  {
+    id: 1,
+    name: '可透水',
+  },
+  {
+    id: 2,
+    name: '天然水域',
+  },
+]);
+const curTab = ref(1);
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+  if (curTab.value == 1) {
+    type.value = 'ktsdmmj';
+    bus.emit('jhkhclick', 'ktsdmmj');
+  } else {
+    bus.emit('jhkhclick', 'trsymj');
+    type.value = 'trsymj';
+  }
+  getjb();
+  getkhzn();
+};
+const type = ref('ktsdmmj');
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: type.value,
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: type.value,
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+onMounted(() => {
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.ktsmjPage {
+  width: 100%;
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 40px;
+        line-height: 35px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue b/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
new file mode 100644
index 0000000..3207fdd
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="xiangMuJianShe">
+    <div class="partTitleHM">项目建设完成情况</div>
+    <div class="ListBoxBody">
+      <div class="planCont">
+        <div class="list">
+          <div class="flex flex-wrap">
+            <p class="title">计划开工项目</p>
+            <el-progress :text-inside="true" :stroke-width="20" :percentage="Math.round(45)" status="success"></el-progress>
+            <p class="title2">54</p>
+            <div class="progressunit">
+              <div class="title">（单位：个）</div>
+              <div class="title2">完工率：90%</div>
+            </div>
+          </div>
+        </div>
+        <div class="list">
+          <div class="flex flex-wrap">
+            <p class="title">实际竣工项目</p>
+            <el-progress :text-inside="true" :stroke-width="20" :percentage="Math.round(45)" status="success"></el-progress>
+            <p class="title2">60</p>
+            <div class="progressunit">
+              <div class="title">（单位：个）</div>
+              <div class="title2">完工率：90%</div>
+            </div>
+          </div>
+        </div>
+        <div class="list">
+          <div class="flex flex-wrap">
+            <p class="title">计划投入海绵资金</p>
+            <el-progress :text-inside="true" :stroke-width="20" :percentage="Math.round(45)" status="success"> </el-progress>
+            <p class="title2">{{ jhtrhmzj.quotaTarget }}</p>
+            <!-- {{reformAchievement/quotaTarget}} -->
+            <div class="progressunit">
+              <div class="title">（单位：亿元）</div>
+              <div class="title2">{{ jhtrhmzj.remark }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="list">
+          <div class="flex flex-wrap">
+            <p class="title">海绵资金使用</p>
+            <el-progress :text-inside="true" :stroke-width="20" :percentage="Math.round(45)" status="success"> </el-progress>
+            <p class="title2">{{ hmzjsy.quotaTarget || 90 }}</p>
+            <div class="progressunit">
+              <div class="title">（单位：亿元）</div>
+              <div class="title2">{{ hmzjsy.remark }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="achievements flex flex-j-left flex-align-center">
+        <div class="titles titlecg">
+          <div class="mbs">成果</div>
+        </div>
+        <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+          {{ quotaInfo.isCompliance == '1' ? '达标' : '未达标' }}
+        </div>
+      </div>
+      <div class="bottom">
+        {{ quotaInfo.remark }}
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+const { proxy } = getCurrentInstance();
+// import { quotaCommomInfoList,hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'
+
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+
+const jhtrhmzj = ref('');
+const hmzjsy = ref('');
+const sjjgxm = ref('');
+const jhkgxm = ref('');
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: 'xmjswcqk',
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: 'xmjswcqk',
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+    tableData.value.forEach(item => {
+      if (item.reformProjectName == 'jhtrhmzj') {
+        jhtrhmzj.value = item;
+      }
+      if (item.reformProjectName == 'hmzjsy') {
+        hmzjsy.value = item;
+      }
+      if (item.reformProjectName == 'sjjgxm') {
+        sjjgxm.value = item;
+      }
+      if (item.reformProjectName == 'jhkgxm') {
+        jhkgxm.value = item;
+      }
+    });
+  }
+}
+onMounted(() => {
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.xiangMuJianShe {
+  margin-bottom: 10px;
+  width: 460px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    height: 280px;
+    overflow: auto;
+    .planCont {
+      margin: 5px auto;
+      font-size: 13px;
+
+      .activePlan {
+        background: #3ce6ff;
+      }
+
+      .progressunit {
+        display: flex;
+        margin-bottom: 5px;
+        align-items: center;
+        width: 100%;
+        margin-top: -5px;
+
+        .title {
+          width: 130px;
+          color: #ffffff;
+        }
+
+        .title2 {
+          flex: 1;
+          margin: 0px 15px;
+          color: #67c23a;
+        }
+      }
+
+      .flex {
+        padding: 0px 10px;
+        border-radius: 8px;
+        align-items: center;
+        cursor: pointer;
+        flex: 1;
+
+        .title {
+          width: 130px;
+          color: #ffffff;
+        }
+
+        .el-progress {
+          width: 230px;
+          margin: 0px 15px;
+
+          .name {
+            font-size: 15px;
+            font-weight: bold;
+            padding-right: 10px;
+          }
+        }
+
+        .title2 {
+          width: 30px;
+          color: #67c23a;
+        }
+      }
+    }
+
+    .achievements {
+      background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+      border-radius: 3px;
+      height: 40px;
+      padding: 0 10px;
+
+      .titles {
+        width: 50px;
+        font-size: 16px;
+        color: #ffffff;
+        position: relative;
+        height: 20px;
+        margin-top: 15px;
+
+        .mbs {
+          position: absolute;
+          top: -10px;
+          left: 5px;
+        }
+      }
+
+      .vals {
+        color: #ff5e66;
+        font-size: 14px;
+      }
+      .colors1 {
+        color: #00fe00;
+      }
+      .colors2 {
+        color: #ff5e66;
+      }
+      .titlecg {
+        background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+      }
+    }
+
+    .bottom {
+      width: 100%;
+      height: 50px;
+      line-height: 25px;
+      background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+      color: #58d6ff;
+      font-size: 14px;
+      padding-left: 10px;
+      overflow-y: scroll;
+    }
+  }
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cg.png b/src/assets/newImgs/HMScreen/jxkh/cg.png
new file mode 100644
index 0000000..27eddc2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cs.png b/src/assets/newImgs/HMScreen/jxkh/cs.png
new file mode 100644
index 0000000..03dfacc
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cs.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/mb.png b/src/assets/newImgs/HMScreen/jxkh/mb.png
new file mode 100644
index 0000000..9e56e63
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/mb.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/normal.png b/src/assets/newImgs/HMScreen/jxkh/normal.png
new file mode 100644
index 0000000..c23e26e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/normal.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..be1b152 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -24,7 +24,7 @@
     <PopupInfo></PopupInfo>
 
     <!-- 控制面板按钮 -->
-    <div :class="['controlHM', showPanel ? 'right30' : 'right480']" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right480']">
       <img src="@/assets/newImgs/HMScreen/pipe3D.png" alt="" title="三维管网" @click="controlPipe3D" />
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
@@ -179,7 +179,7 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(3);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
new file mode 100644
index 0000000..b872e4f
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -0,0 +1,238 @@
+<template>
+  <!--  产出绩效 -->
+  <div class="chanChuJiXiao">
+    <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 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="ConstrucClass">
+      <div class="content">
+        <div class="target flex flex-j-left flex-align-center">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">黄河 100 年一遇，黄汴河、惠济河 50 年一遇，马家河、东护城河、运粮河 20 年一遇。</div>
+        </div>
+        <div class="measures flex flex-j-left flex-align-center">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">
+            开封市实施一渠六河连通综合治理工程，对东 护城河、西护城河（黄汴河）、南护城河（黄汴河）等 5 条河道 进行了综合治理
+          </div>
+        </div>
+        <el-table ref="table" :data="tableData" max-height="120">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+
+        <div class="achievements flex flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import bus from '@/bus';
+// import { quotaCommomInfoList,hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const tabList = ref([
+  { id: 1, name: '防洪标准' },
+  { id: 2, name: '内涝标准' },
+  { id: 3, name: '内涝消除' },
+]);
+const curTab = ref(1);
+const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+  if (curTab.value == 1) {
+    bus.emit('jhkhclick', 'fzbz');
+  } else if (curTab.value == 2) {
+    bus.emit('jhkhclick', 'nlfz');
+  } else {
+    bus.emit('jhkhclick', 'nlxc');
+  }
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getjb();
+  // getkhzn();
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 100%;
+
+  .ConstrucClass {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        width: 350px;
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .renovation {
+        width: 100%;
+        height: 78px;
+        .renovationcons {
+          height: 50px;
+          color: #58d6ff;
+          font-size: 14px;
+          padding: 5px;
+
+          .sy,
+          .mj {
+            width: 50%;
+            text-align: center;
+          }
+        }
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
new file mode 100644
index 0000000..00bdf22
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="jiZhiJianShe">
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="table_content">
+          <el-table ref="table" :data="tableData" height="170">
+            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
+            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
+            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const tableData = ref([
+  { partitionName: '海绵文化宣传培训', reformProjectName: '培训4次,宣传6次', reformAchievement: '培训7次,宣传9次' },
+  { partitionName: '群众满意度', reformProjectName: '96%', reformAchievement: '96.9%' },
+]);
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.jiZhiJianShe {
+  width: 49%;
+  background: url('@/assets/images/Sponge_screen/chengShiTeZheng/box_back.png') no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .img_box {
+        width: 100%;
+        height: 100%;
+      }
+
+      .tabs {
+        height: 36px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .table_content {
+        height: 98%;
+      }
+
+      .monitor {
+        width: 20px;
+        height: 20px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+#tables {
+  width: 100%;
+  ::v-deep .el-table__header-wrapper .el-table__header thead {
+    background: transparent !important;
+    border-bottom: 1px solid #579ff6 !important;
+  }
+  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
+    background: transparent !important;
+    border-bottom: 2px solid #2eafbf !important;
+  }
+}
+
+::v-deep .table_content .el-table__body-wrapper {
+  padding-top: 5px;
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
new file mode 100644
index 0000000..dc7b464
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
@@ -0,0 +1,341 @@
+<template>
+  <div
+    class="chanChuJiXiao"
+    :style="{
+      height: curTab == 1 ? '352px' : '382px',
+    }"
+  >
+    <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 }}
+        </div>
+      </div>
+    </div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="target flex flex-j-left">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.improveGoals }}</div>
+        </div>
+        <div class="measures flex flex-j-left">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.reformMethod }}</div>
+        </div>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 1">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 2">
+          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="进水量(万t/d)" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 3">
+          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="进水BOD浓度(mg/L)" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <div class="achievements flex flex-j-left flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <el-dialog v-model="opens" title="沋西渠" id="dialogContent" :modal-append-to-body="false" :close-on-click-modal="false" width="500px">
+    <div class="jcxx">
+      <el-tabs v-model="actitabs" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="基础信息" name="基础信息">
+          <div class="hcmsg">黑臭水体长度：&nbsp {{ hcdatas.blackRiverLength }}</div>
+          <div class="hcmsg">黑臭水体面积：&nbsp {{ hcdatas.blackRiverArea }}</div>
+          <div class="hcmsg">黑臭段起点：&nbsp {{ hcdatas.blackRiverStart }}</div>
+          <div class="hcmsg">黑臭段终点：&nbsp {{ hcdatas.blackRiverEnd }}</div>
+          <div>
+            治理照片：
+            <div class="img_box">
+              <img :src="item.url" alt="" class="img" v-for="item in photosList" />
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="监测站数据" name="监测站数据">
+          <div class="jcsj" v-if="actitabs == '监测站数据'">
+            <el-table ref="table" :data="listTable" style="width: 100%" :max-height="260">
+              <el-table-column label="监测月份" prop="month" show-overflow-tooltip />
+              <el-table-column label="溶解氧" prop="DOX" show-overflow-tooltip />
+              <el-table-column label="COD" prop="COD" />
+              <el-table-column label="氨氮" prop="NH3N" />
+              <el-table-column label="总磷" prop="TP1" />
+            </el-table>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="工程治理介绍" name="工程治理介绍">
+          <div class="" v-if="actitabs == '工程治理介绍'">
+            <div>
+              {{ hcdatas.projectManageIntro }}
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </el-dialog>
+</template>
+<script setup>
+// import { blackRiverList,sampleDetaillistTable ,quotaCommomInfoList,hmyztQuotaDataList} from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const opens = ref(false);
+const actitabs = ref('基础信息');
+const photosList = ref([]);
+const hcdatas = ref('');
+const listTable = ref('');
+const tabs = ref([
+  {
+    id: 1,
+    name: '黑臭水体',
+  },
+  {
+    id: 2,
+    name: '生活污水',
+  },
+  {
+    id: 3,
+    name: '进水BOD',
+  },
+]);
+const curTab = ref(1);
+
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+const type = ref('hcst');
+
+const tabClick = item => {
+  curTab.value = item.id;
+
+  if (curTab.value == 1) {
+    opens.value = true;
+    bus.emit('jhkhclick', 'hcst');
+    type.value = 'hcst';
+  } else if (curTab.value == 2) {
+    type.value = 'shwssjl';
+    bus.emit('jhkhclick', 'shwssjl');
+  } else {
+    type.value = 'cqjsbod';
+    bus.emit('jhkhclick', 'cqjsbod');
+  }
+  getjb();
+  getkhzn();
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: type.value,
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: type.value,
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+//黑臭水体数据切换table
+const handleClick = ({ props: { name } }, event) => {
+  if (name == '监测数据') {
+    setTimeout(() => {
+      getRiverData();
+    }, 500);
+  } else if (name == '视频监控') {
+    videoInfo.value = '';
+  }
+};
+// 黑臭基础信息+工程治理介绍
+
+async function getHc() {
+  let res = await blackRiverList();
+  if (res && res.code == 200) {
+    hcdatas.value = res.data[0];
+  }
+}
+// 黑臭水体监测站数据
+async function gethcrtus() {
+  let param = {
+    sampleType: 'hcst',
+    sampleYear: '2023',
+    sampleMonth: '',
+  };
+  let res = await sampleDetaillistTable(param);
+  if (res && res.code == 200) {
+    listTable.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getHc()
+  // gethcrtus()
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 460px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        overflow-y: scroll;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.jcxx {
+  width: 450px;
+  height: 360px;
+  color: #ffffff;
+  .hcmsg {
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .img_box {
+    margin-top: 10px;
+    width: 100%;
+    height: 160px;
+    overflow-y: scroll;
+    flex-wrap: wrap;
+    .img {
+      width: 100px;
+      height: 100px;
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 5d473df..33b303f 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -1,15 +1,69 @@
 <template>
   <!-- 海绵综合一张图 考核评估 -->
   <div class="oneMapKHPG">
-    <KHPGHM></KHPGHM>
+    <!-- 左侧 -->
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
+      <chanChuJiXiao></chanChuJiXiao>
+      <yuShuiZiYuanHua></yuShuiZiYuanHua>
+      <keTouShuiMianJi></keTouShuiMianJi>
+    </div>
+
+    <!-- 中间 -->
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
+      <jiZhiJianShe></jiZhiJianShe>
+      <ganZhiRenKeDu></ganZhiRenKeDu>
+    </div>
+
+    <!-- 右侧 -->
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <heiChouShuiTi></heiChouShuiTi>
+      <xiangMuJianShe></xiangMuJianShe>
+      <ziJinJiXiao></ziJinJiXiao>
+    </div>
   </div>
 </template>
 
 <script setup>
-import KHPGHM from '@/views/spongePerformance/mainIndex/index.vue'; //业务系统考核首页
+import jiZhiJianShe from './jiZhiJianShe'; //管理绩效评价
+import ganZhiRenKeDu from './ganZhiRenKeDu'; //感知认可度考核评估
+import chanChuJiXiao from './chanChuJiXiao'; //产出绩效
+import yuShuiZiYuanHua from './yuShuiZiYuanHua'; //雨水资源化利用
+import keTouShuiMianJi from './keTouShuiMianJi'; //可透水面积
+import heiChouShuiTi from './heiChouShuiTi'; //黑臭水体
+import xiangMuJianShe from './xiangMuJianShe'; //项目建设完成情况
+import ziJinJiXiao from './ziJinJiXiao'; //资金绩效评价
+
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
 
 onMounted(() => {});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.oneMapKHPG {
+  width: 100%;
+  .headHMA {
+    background: none;
+    background: rgba(0, 59, 109, 0.8);
+    border-radius: 8px;
+    top: 10px;
+    height: auto;
+    padding: 10px;
+    display: flex;
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
new file mode 100644
index 0000000..d36259f
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
@@ -0,0 +1,111 @@
+<template>
+  <!-- 管理绩效评价 -->
+  <div class="jiZhiJianShe">
+    <div class="partTitleHM" style="width: 99.8%">管理绩效评价(截至2024)</div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="table_content">
+          <el-table ref="table" :data="tableData" height="170">
+            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
+            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
+            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
+            <el-table-column label="达标评估" prop="isCompliance" width="120px">
+              <template #default="{ row }">
+                <span :class="row.isCompliance === '1' ? 'success' : 'danger'">{{ row.isCompliance === '1' ? '达标' : '未达标' }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import bus from '@/bus';
+
+const { proxy } = getCurrentInstance();
+const tableData = ref([
+  {
+    partitionName: '立法及长效机制',
+    reformProjectName: '完成立法1项,长效机制2项',
+    reformAchievement: '立法1项,6项长效机制',
+    isCompliance: '1',
+  },
+  { partitionName: '规划建设管控制度', reformProjectName: '基本完善', reformAchievement: '基本完善', isCompliance: '1' },
+  {
+    partitionName: '绩效考核制度',
+    reformProjectName: '基本完善',
+    reformAchievement: '完善海绵城市绩效考核制度并有效落实',
+    isCompliance: '1',
+  },
+]);
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.jiZhiJianShe {
+  width: 50%;
+  background: url('@/assets/images/Sponge_screen/chengShiTeZheng/box_back.png') no-repeat;
+  background-size: 100% 100%;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .img_box {
+        width: 100%;
+        height: 100%;
+      }
+
+      .tabs {
+        height: 36px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .table_content {
+        height: 98%;
+      }
+
+      .monitor {
+        width: 20px;
+        height: 20px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+.success {
+  color: #00fe00 !important;
+}
+.danger {
+  color: #ff5e66 !important;
+}
+#tables {
+  width: 100%;
+  ::v-deep .el-table__header-wrapper .el-table__header thead {
+    background: transparent !important;
+    border-bottom: 1px solid #579ff6 !important;
+  }
+  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
+    background: transparent !important;
+    border-bottom: 2px solid #2eafbf !important;
+  }
+}
+
+::v-deep .table_content .el-table__body-wrapper {
+  padding-top: 5px;
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
new file mode 100644
index 0000000..856530d
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
@@ -0,0 +1,223 @@
+<template>
+  <!-- 可透水面积 -->
+  <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 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="target flex flex-j-left">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.improveGoals }}</div>
+        </div>
+        <div class="measures flex flex-j-left">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.reformMethod }}</div>
+        </div>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 1">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 2">
+          <el-table-column label="现状水域" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="水域面积（㎡）" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <div class="achievements flex flex-j-left flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom">
+          {{ quotaInfo.remark }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+const { proxy } = getCurrentInstance();
+// import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js';
+const tabs = ref([
+  {
+    id: 1,
+    name: '可透水',
+  },
+  {
+    id: 2,
+    name: '天然水域',
+  },
+]);
+const curTab = ref(1);
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+  if (curTab.value == 1) {
+    type.value = 'ktsdmmj';
+    bus.emit('jhkhclick', 'ktsdmmj');
+  } else {
+    bus.emit('jhkhclick', 'trsymj');
+    type.value = 'trsymj';
+  }
+  getjb();
+  getkhzn();
+};
+const type = ref('ktsdmmj');
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: type.value,
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: type.value,
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+onMounted(() => {
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.ktsmjPage {
+  width: 100%;
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 40px;
+        line-height: 35px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue b/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
new file mode 100644
index 0000000..3207fdd
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="xiangMuJianShe">
+    <div class="partTitleHM">项目建设完成情况</div>
+    <div class="ListBoxBody">
+      <div class="planCont">
+        <div class="list">
+          <div class="flex flex-wrap">
+            <p class="title">计划开工项目</p>
+            <el-progress :text-inside="true" :stroke-width="20" :percentage="Math.round(45)" status="success"></el-progress>
+            <p class="title2">54</p>
+            <div class="progressunit">
+              <div class="title">（单位：个）</div>
+              <div class="title2">完工率：90%</div>
+            </div>
+          </div>
+        </div>
+        <div class="list">
+          <div class="flex flex-wrap">
+            <p class="title">实际竣工项目</p>
+            <el-progress :text-inside="true" :stroke-width="20" :percentage="Math.round(45)" status="success"></el-progress>
+            <p class="title2">60</p>
+            <div class="progressunit">
+              <div class="title">（单位：个）</div>
+              <div class="title2">完工率：90%</div>
+            </div>
+          </div>
+        </div>
+        <div class="list">
+          <div class="flex flex-wrap">
+            <p class="title">计划投入海绵资金</p>
+            <el-progress :text-inside="true" :stroke-width="20" :percentage="Math.round(45)" status="success"> </el-progress>
+            <p class="title2">{{ jhtrhmzj.quotaTarget }}</p>
+            <!-- {{reformAchievement/quotaTarget}} -->
+            <div class="progressunit">
+              <div class="title">（单位：亿元）</div>
+              <div class="title2">{{ jhtrhmzj.remark }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="list">
+          <div class="flex flex-wrap">
+            <p class="title">海绵资金使用</p>
+            <el-progress :text-inside="true" :stroke-width="20" :percentage="Math.round(45)" status="success"> </el-progress>
+            <p class="title2">{{ hmzjsy.quotaTarget || 90 }}</p>
+            <div class="progressunit">
+              <div class="title">（单位：亿元）</div>
+              <div class="title2">{{ hmzjsy.remark }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="achievements flex flex-j-left flex-align-center">
+        <div class="titles titlecg">
+          <div class="mbs">成果</div>
+        </div>
+        <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+          {{ quotaInfo.isCompliance == '1' ? '达标' : '未达标' }}
+        </div>
+      </div>
+      <div class="bottom">
+        {{ quotaInfo.remark }}
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+const { proxy } = getCurrentInstance();
+// import { quotaCommomInfoList,hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'
+
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+
+const jhtrhmzj = ref('');
+const hmzjsy = ref('');
+const sjjgxm = ref('');
+const jhkgxm = ref('');
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: 'xmjswcqk',
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: 'xmjswcqk',
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+    tableData.value.forEach(item => {
+      if (item.reformProjectName == 'jhtrhmzj') {
+        jhtrhmzj.value = item;
+      }
+      if (item.reformProjectName == 'hmzjsy') {
+        hmzjsy.value = item;
+      }
+      if (item.reformProjectName == 'sjjgxm') {
+        sjjgxm.value = item;
+      }
+      if (item.reformProjectName == 'jhkgxm') {
+        jhkgxm.value = item;
+      }
+    });
+  }
+}
+onMounted(() => {
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.xiangMuJianShe {
+  margin-bottom: 10px;
+  width: 460px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    height: 280px;
+    overflow: auto;
+    .planCont {
+      margin: 5px auto;
+      font-size: 13px;
+
+      .activePlan {
+        background: #3ce6ff;
+      }
+
+      .progressunit {
+        display: flex;
+        margin-bottom: 5px;
+        align-items: center;
+        width: 100%;
+        margin-top: -5px;
+
+        .title {
+          width: 130px;
+          color: #ffffff;
+        }
+
+        .title2 {
+          flex: 1;
+          margin: 0px 15px;
+          color: #67c23a;
+        }
+      }
+
+      .flex {
+        padding: 0px 10px;
+        border-radius: 8px;
+        align-items: center;
+        cursor: pointer;
+        flex: 1;
+
+        .title {
+          width: 130px;
+          color: #ffffff;
+        }
+
+        .el-progress {
+          width: 230px;
+          margin: 0px 15px;
+
+          .name {
+            font-size: 15px;
+            font-weight: bold;
+            padding-right: 10px;
+          }
+        }
+
+        .title2 {
+          width: 30px;
+          color: #67c23a;
+        }
+      }
+    }
+
+    .achievements {
+      background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+      border-radius: 3px;
+      height: 40px;
+      padding: 0 10px;
+
+      .titles {
+        width: 50px;
+        font-size: 16px;
+        color: #ffffff;
+        position: relative;
+        height: 20px;
+        margin-top: 15px;
+
+        .mbs {
+          position: absolute;
+          top: -10px;
+          left: 5px;
+        }
+      }
+
+      .vals {
+        color: #ff5e66;
+        font-size: 14px;
+      }
+      .colors1 {
+        color: #00fe00;
+      }
+      .colors2 {
+        color: #ff5e66;
+      }
+      .titlecg {
+        background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+      }
+    }
+
+    .bottom {
+      width: 100%;
+      height: 50px;
+      line-height: 25px;
+      background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+      color: #58d6ff;
+      font-size: 14px;
+      padding-left: 10px;
+      overflow-y: scroll;
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/yuShuiZiYuanHua.vue b/src/views/sponeScreen/evaluationKH/yuShuiZiYuanHua.vue
new file mode 100644
index 0000000..ee579aa
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/yuShuiZiYuanHua.vue
@@ -0,0 +1,205 @@
+<template>
+  <!-- 雨水资源化利用 -->
+  <div class="rainLYPage">
+    <div class="ListBoxHeader">
+      <div class="partTitleHM">雨水资源化利用</div>
+    </div>
+    <div class="ConstrucClass">
+      <div class="content">
+        <div class="target flex flex-j-left flex-align-center">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">达到 10 万立方米/年</div>
+        </div>
+        <div class="measures flex flex-j-left flex-align-center">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">开封市建成区内收集雨水后利用的调蓄水体有 4 处，分别为 龙亭湖、西北湖、金明池和中意湖。</div>
+        </div>
+        <el-table ref="table" :data="tableData" max-height="120">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+
+        <div class="achievements flex flex-j-left flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+const { proxy } = getCurrentInstance();
+// import { quotaCommomInfoList,hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'
+
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: 'yszyhly',
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: 'yszyhly',
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.rainLYPage {
+  width: 100%;
+  margin: 10px auto;
+  .ConstrucClass {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        width: 350px;
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        justify-content: flex-start;
+        display: flex;
+        span {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/jxkh/active.png b/src/assets/newImgs/HMScreen/jxkh/active.png
new file mode 100644
index 0000000..52cd766
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/active.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cg.png b/src/assets/newImgs/HMScreen/jxkh/cg.png
new file mode 100644
index 0000000..27eddc2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/cs.png b/src/assets/newImgs/HMScreen/jxkh/cs.png
new file mode 100644
index 0000000..03dfacc
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/cs.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/mb.png b/src/assets/newImgs/HMScreen/jxkh/mb.png
new file mode 100644
index 0000000..9e56e63
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/mb.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/jxkh/normal.png b/src/assets/newImgs/HMScreen/jxkh/normal.png
new file mode 100644
index 0000000..c23e26e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/jxkh/normal.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..be1b152 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -24,7 +24,7 @@
     <PopupInfo></PopupInfo>
 
     <!-- 控制面板按钮 -->
-    <div :class="['controlHM', showPanel ? 'right30' : 'right480']" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right480']">
       <img src="@/assets/newImgs/HMScreen/pipe3D.png" alt="" title="三维管网" @click="controlPipe3D" />
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
@@ -179,7 +179,7 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(3);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
new file mode 100644
index 0000000..b872e4f
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue
@@ -0,0 +1,238 @@
+<template>
+  <!--  产出绩效 -->
+  <div class="chanChuJiXiao">
+    <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 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="ConstrucClass">
+      <div class="content">
+        <div class="target flex flex-j-left flex-align-center">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">黄河 100 年一遇，黄汴河、惠济河 50 年一遇，马家河、东护城河、运粮河 20 年一遇。</div>
+        </div>
+        <div class="measures flex flex-j-left flex-align-center">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">
+            开封市实施一渠六河连通综合治理工程，对东 护城河、西护城河（黄汴河）、南护城河（黄汴河）等 5 条河道 进行了综合治理
+          </div>
+        </div>
+        <el-table ref="table" :data="tableData" max-height="120">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+
+        <div class="achievements flex flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import bus from '@/bus';
+// import { quotaCommomInfoList,hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const tabList = ref([
+  { id: 1, name: '防洪标准' },
+  { id: 2, name: '内涝标准' },
+  { id: 3, name: '内涝消除' },
+]);
+const curTab = ref(1);
+const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+  if (curTab.value == 1) {
+    bus.emit('jhkhclick', 'fzbz');
+  } else if (curTab.value == 2) {
+    bus.emit('jhkhclick', 'nlfz');
+  } else {
+    bus.emit('jhkhclick', 'nlxc');
+  }
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: 'fhbz',
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getjb();
+  // getkhzn();
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 100%;
+
+  .ConstrucClass {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        width: 350px;
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .renovation {
+        width: 100%;
+        height: 78px;
+        .renovationcons {
+          height: 50px;
+          color: #58d6ff;
+          font-size: 14px;
+          padding: 5px;
+
+          .sy,
+          .mj {
+            width: 50%;
+            text-align: center;
+          }
+        }
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
new file mode 100644
index 0000000..00bdf22
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/ganZhiRenKeDu.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="jiZhiJianShe">
+    <div class="partTitleHM" style="width: 99.8%">感知认可度考核评估(截至2024)</div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="table_content">
+          <el-table ref="table" :data="tableData" height="170">
+            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
+            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
+            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const tableData = ref([
+  { partitionName: '海绵文化宣传培训', reformProjectName: '培训4次,宣传6次', reformAchievement: '培训7次,宣传9次' },
+  { partitionName: '群众满意度', reformProjectName: '96%', reformAchievement: '96.9%' },
+]);
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.jiZhiJianShe {
+  width: 49%;
+  background: url('@/assets/images/Sponge_screen/chengShiTeZheng/box_back.png') no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .img_box {
+        width: 100%;
+        height: 100%;
+      }
+
+      .tabs {
+        height: 36px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .table_content {
+        height: 98%;
+      }
+
+      .monitor {
+        width: 20px;
+        height: 20px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+#tables {
+  width: 100%;
+  ::v-deep .el-table__header-wrapper .el-table__header thead {
+    background: transparent !important;
+    border-bottom: 1px solid #579ff6 !important;
+  }
+  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
+    background: transparent !important;
+    border-bottom: 2px solid #2eafbf !important;
+  }
+}
+
+::v-deep .table_content .el-table__body-wrapper {
+  padding-top: 5px;
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
new file mode 100644
index 0000000..dc7b464
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue
@@ -0,0 +1,341 @@
+<template>
+  <div
+    class="chanChuJiXiao"
+    :style="{
+      height: curTab == 1 ? '352px' : '382px',
+    }"
+  >
+    <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 }}
+        </div>
+      </div>
+    </div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="target flex flex-j-left">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.improveGoals }}</div>
+        </div>
+        <div class="measures flex flex-j-left">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.reformMethod }}</div>
+        </div>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 1">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 2">
+          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="进水量(万t/d)" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 3">
+          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="进水BOD浓度(mg/L)" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <div class="achievements flex flex-j-left flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <el-dialog v-model="opens" title="沋西渠" id="dialogContent" :modal-append-to-body="false" :close-on-click-modal="false" width="500px">
+    <div class="jcxx">
+      <el-tabs v-model="actitabs" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="基础信息" name="基础信息">
+          <div class="hcmsg">黑臭水体长度：&nbsp {{ hcdatas.blackRiverLength }}</div>
+          <div class="hcmsg">黑臭水体面积：&nbsp {{ hcdatas.blackRiverArea }}</div>
+          <div class="hcmsg">黑臭段起点：&nbsp {{ hcdatas.blackRiverStart }}</div>
+          <div class="hcmsg">黑臭段终点：&nbsp {{ hcdatas.blackRiverEnd }}</div>
+          <div>
+            治理照片：
+            <div class="img_box">
+              <img :src="item.url" alt="" class="img" v-for="item in photosList" />
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="监测站数据" name="监测站数据">
+          <div class="jcsj" v-if="actitabs == '监测站数据'">
+            <el-table ref="table" :data="listTable" style="width: 100%" :max-height="260">
+              <el-table-column label="监测月份" prop="month" show-overflow-tooltip />
+              <el-table-column label="溶解氧" prop="DOX" show-overflow-tooltip />
+              <el-table-column label="COD" prop="COD" />
+              <el-table-column label="氨氮" prop="NH3N" />
+              <el-table-column label="总磷" prop="TP1" />
+            </el-table>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="工程治理介绍" name="工程治理介绍">
+          <div class="" v-if="actitabs == '工程治理介绍'">
+            <div>
+              {{ hcdatas.projectManageIntro }}
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </el-dialog>
+</template>
+<script setup>
+// import { blackRiverList,sampleDetaillistTable ,quotaCommomInfoList,hmyztQuotaDataList} from '@/api/sponeScreen/jxkh.js'
+
+const { proxy } = getCurrentInstance();
+const opens = ref(false);
+const actitabs = ref('基础信息');
+const photosList = ref([]);
+const hcdatas = ref('');
+const listTable = ref('');
+const tabs = ref([
+  {
+    id: 1,
+    name: '黑臭水体',
+  },
+  {
+    id: 2,
+    name: '生活污水',
+  },
+  {
+    id: 3,
+    name: '进水BOD',
+  },
+]);
+const curTab = ref(1);
+
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+const type = ref('hcst');
+
+const tabClick = item => {
+  curTab.value = item.id;
+
+  if (curTab.value == 1) {
+    opens.value = true;
+    bus.emit('jhkhclick', 'hcst');
+    type.value = 'hcst';
+  } else if (curTab.value == 2) {
+    type.value = 'shwssjl';
+    bus.emit('jhkhclick', 'shwssjl');
+  } else {
+    type.value = 'cqjsbod';
+    bus.emit('jhkhclick', 'cqjsbod');
+  }
+  getjb();
+  getkhzn();
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: type.value,
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: type.value,
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+//黑臭水体数据切换table
+const handleClick = ({ props: { name } }, event) => {
+  if (name == '监测数据') {
+    setTimeout(() => {
+      getRiverData();
+    }, 500);
+  } else if (name == '视频监控') {
+    videoInfo.value = '';
+  }
+};
+// 黑臭基础信息+工程治理介绍
+
+async function getHc() {
+  let res = await blackRiverList();
+  if (res && res.code == 200) {
+    hcdatas.value = res.data[0];
+  }
+}
+// 黑臭水体监测站数据
+async function gethcrtus() {
+  let param = {
+    sampleType: 'hcst',
+    sampleYear: '2023',
+    sampleMonth: '',
+  };
+  let res = await sampleDetaillistTable(param);
+  if (res && res.code == 200) {
+    listTable.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getHc()
+  // gethcrtus()
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.chanChuJiXiao {
+  width: 460px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        overflow-y: scroll;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.jcxx {
+  width: 450px;
+  height: 360px;
+  color: #ffffff;
+  .hcmsg {
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .img_box {
+    margin-top: 10px;
+    width: 100%;
+    height: 160px;
+    overflow-y: scroll;
+    flex-wrap: wrap;
+    .img {
+      width: 100px;
+      height: 100px;
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 5d473df..33b303f 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -1,15 +1,69 @@
 <template>
   <!-- 海绵综合一张图 考核评估 -->
   <div class="oneMapKHPG">
-    <KHPGHM></KHPGHM>
+    <!-- 左侧 -->
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
+      <chanChuJiXiao></chanChuJiXiao>
+      <yuShuiZiYuanHua></yuShuiZiYuanHua>
+      <keTouShuiMianJi></keTouShuiMianJi>
+    </div>
+
+    <!-- 中间 -->
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
+      <jiZhiJianShe></jiZhiJianShe>
+      <ganZhiRenKeDu></ganZhiRenKeDu>
+    </div>
+
+    <!-- 右侧 -->
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <heiChouShuiTi></heiChouShuiTi>
+      <xiangMuJianShe></xiangMuJianShe>
+      <ziJinJiXiao></ziJinJiXiao>
+    </div>
   </div>
 </template>
 
 <script setup>
-import KHPGHM from '@/views/spongePerformance/mainIndex/index.vue'; //业务系统考核首页
+import jiZhiJianShe from './jiZhiJianShe'; //管理绩效评价
+import ganZhiRenKeDu from './ganZhiRenKeDu'; //感知认可度考核评估
+import chanChuJiXiao from './chanChuJiXiao'; //产出绩效
+import yuShuiZiYuanHua from './yuShuiZiYuanHua'; //雨水资源化利用
+import keTouShuiMianJi from './keTouShuiMianJi'; //可透水面积
+import heiChouShuiTi from './heiChouShuiTi'; //黑臭水体
+import xiangMuJianShe from './xiangMuJianShe'; //项目建设完成情况
+import ziJinJiXiao from './ziJinJiXiao'; //资金绩效评价
+
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
 
 onMounted(() => {});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.oneMapKHPG {
+  width: 100%;
+  .headHMA {
+    background: none;
+    background: rgba(0, 59, 109, 0.8);
+    border-radius: 8px;
+    top: 10px;
+    height: auto;
+    padding: 10px;
+    display: flex;
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
new file mode 100644
index 0000000..d36259f
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/jiZhiJianShe.vue
@@ -0,0 +1,111 @@
+<template>
+  <!-- 管理绩效评价 -->
+  <div class="jiZhiJianShe">
+    <div class="partTitleHM" style="width: 99.8%">管理绩效评价(截至2024)</div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="table_content">
+          <el-table ref="table" :data="tableData" height="170">
+            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
+            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
+            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
+            <el-table-column label="达标评估" prop="isCompliance" width="120px">
+              <template #default="{ row }">
+                <span :class="row.isCompliance === '1' ? 'success' : 'danger'">{{ row.isCompliance === '1' ? '达标' : '未达标' }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import bus from '@/bus';
+
+const { proxy } = getCurrentInstance();
+const tableData = ref([
+  {
+    partitionName: '立法及长效机制',
+    reformProjectName: '完成立法1项,长效机制2项',
+    reformAchievement: '立法1项,6项长效机制',
+    isCompliance: '1',
+  },
+  { partitionName: '规划建设管控制度', reformProjectName: '基本完善', reformAchievement: '基本完善', isCompliance: '1' },
+  {
+    partitionName: '绩效考核制度',
+    reformProjectName: '基本完善',
+    reformAchievement: '完善海绵城市绩效考核制度并有效落实',
+    isCompliance: '1',
+  },
+]);
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.jiZhiJianShe {
+  width: 50%;
+  background: url('@/assets/images/Sponge_screen/chengShiTeZheng/box_back.png') no-repeat;
+  background-size: 100% 100%;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .img_box {
+        width: 100%;
+        height: 100%;
+      }
+
+      .tabs {
+        height: 36px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .table_content {
+        height: 98%;
+      }
+
+      .monitor {
+        width: 20px;
+        height: 20px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+.success {
+  color: #00fe00 !important;
+}
+.danger {
+  color: #ff5e66 !important;
+}
+#tables {
+  width: 100%;
+  ::v-deep .el-table__header-wrapper .el-table__header thead {
+    background: transparent !important;
+    border-bottom: 1px solid #579ff6 !important;
+  }
+  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
+    background: transparent !important;
+    border-bottom: 2px solid #2eafbf !important;
+  }
+}
+
+::v-deep .table_content .el-table__body-wrapper {
+  padding-top: 5px;
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
new file mode 100644
index 0000000..856530d
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/keTouShuiMianJi.vue
@@ -0,0 +1,223 @@
+<template>
+  <!-- 可透水面积 -->
+  <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 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="target flex flex-j-left">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.improveGoals }}</div>
+        </div>
+        <div class="measures flex flex-j-left">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">{{ quotaInfo.reformMethod }}</div>
+        </div>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 1">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 2">
+          <el-table-column label="现状水域" prop="partitionName" show-overflow-tooltip />
+          <el-table-column label="水域面积（㎡）" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+        <div class="achievements flex flex-j-left flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom">
+          {{ quotaInfo.remark }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+const { proxy } = getCurrentInstance();
+// import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js';
+const tabs = ref([
+  {
+    id: 1,
+    name: '可透水',
+  },
+  {
+    id: 2,
+    name: '天然水域',
+  },
+]);
+const curTab = ref(1);
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+  if (curTab.value == 1) {
+    type.value = 'ktsdmmj';
+    bus.emit('jhkhclick', 'ktsdmmj');
+  } else {
+    bus.emit('jhkhclick', 'trsymj');
+    type.value = 'trsymj';
+  }
+  getjb();
+  getkhzn();
+};
+const type = ref('ktsdmmj');
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: type.value,
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: type.value,
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+onMounted(() => {
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.ktsmjPage {
+  width: 100%;
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 40px;
+        line-height: 35px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue b/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
new file mode 100644
index 0000000..3207fdd
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/xiangMuJianShe.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="xiangMuJianShe">
+    <div class="partTitleHM">项目建设完成情况</div>
+    <div class="ListBoxBody">
+      <div class="planCont">
+        <div class="list">
+          <div class="flex flex-wrap">
+            <p class="title">计划开工项目</p>
+            <el-progress :text-inside="true" :stroke-width="20" :percentage="Math.round(45)" status="success"></el-progress>
+            <p class="title2">54</p>
+            <div class="progressunit">
+              <div class="title">（单位：个）</div>
+              <div class="title2">完工率：90%</div>
+            </div>
+          </div>
+        </div>
+        <div class="list">
+          <div class="flex flex-wrap">
+            <p class="title">实际竣工项目</p>
+            <el-progress :text-inside="true" :stroke-width="20" :percentage="Math.round(45)" status="success"></el-progress>
+            <p class="title2">60</p>
+            <div class="progressunit">
+              <div class="title">（单位：个）</div>
+              <div class="title2">完工率：90%</div>
+            </div>
+          </div>
+        </div>
+        <div class="list">
+          <div class="flex flex-wrap">
+            <p class="title">计划投入海绵资金</p>
+            <el-progress :text-inside="true" :stroke-width="20" :percentage="Math.round(45)" status="success"> </el-progress>
+            <p class="title2">{{ jhtrhmzj.quotaTarget }}</p>
+            <!-- {{reformAchievement/quotaTarget}} -->
+            <div class="progressunit">
+              <div class="title">（单位：亿元）</div>
+              <div class="title2">{{ jhtrhmzj.remark }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="list">
+          <div class="flex flex-wrap">
+            <p class="title">海绵资金使用</p>
+            <el-progress :text-inside="true" :stroke-width="20" :percentage="Math.round(45)" status="success"> </el-progress>
+            <p class="title2">{{ hmzjsy.quotaTarget || 90 }}</p>
+            <div class="progressunit">
+              <div class="title">（单位：亿元）</div>
+              <div class="title2">{{ hmzjsy.remark }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="achievements flex flex-j-left flex-align-center">
+        <div class="titles titlecg">
+          <div class="mbs">成果</div>
+        </div>
+        <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+          {{ quotaInfo.isCompliance == '1' ? '达标' : '未达标' }}
+        </div>
+      </div>
+      <div class="bottom">
+        {{ quotaInfo.remark }}
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+const { proxy } = getCurrentInstance();
+// import { quotaCommomInfoList,hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'
+
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+
+const jhtrhmzj = ref('');
+const hmzjsy = ref('');
+const sjjgxm = ref('');
+const jhkgxm = ref('');
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: 'xmjswcqk',
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: 'xmjswcqk',
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+    tableData.value.forEach(item => {
+      if (item.reformProjectName == 'jhtrhmzj') {
+        jhtrhmzj.value = item;
+      }
+      if (item.reformProjectName == 'hmzjsy') {
+        hmzjsy.value = item;
+      }
+      if (item.reformProjectName == 'sjjgxm') {
+        sjjgxm.value = item;
+      }
+      if (item.reformProjectName == 'jhkgxm') {
+        jhkgxm.value = item;
+      }
+    });
+  }
+}
+onMounted(() => {
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.xiangMuJianShe {
+  margin-bottom: 10px;
+  width: 460px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    height: 280px;
+    overflow: auto;
+    .planCont {
+      margin: 5px auto;
+      font-size: 13px;
+
+      .activePlan {
+        background: #3ce6ff;
+      }
+
+      .progressunit {
+        display: flex;
+        margin-bottom: 5px;
+        align-items: center;
+        width: 100%;
+        margin-top: -5px;
+
+        .title {
+          width: 130px;
+          color: #ffffff;
+        }
+
+        .title2 {
+          flex: 1;
+          margin: 0px 15px;
+          color: #67c23a;
+        }
+      }
+
+      .flex {
+        padding: 0px 10px;
+        border-radius: 8px;
+        align-items: center;
+        cursor: pointer;
+        flex: 1;
+
+        .title {
+          width: 130px;
+          color: #ffffff;
+        }
+
+        .el-progress {
+          width: 230px;
+          margin: 0px 15px;
+
+          .name {
+            font-size: 15px;
+            font-weight: bold;
+            padding-right: 10px;
+          }
+        }
+
+        .title2 {
+          width: 30px;
+          color: #67c23a;
+        }
+      }
+    }
+
+    .achievements {
+      background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+      border-radius: 3px;
+      height: 40px;
+      padding: 0 10px;
+
+      .titles {
+        width: 50px;
+        font-size: 16px;
+        color: #ffffff;
+        position: relative;
+        height: 20px;
+        margin-top: 15px;
+
+        .mbs {
+          position: absolute;
+          top: -10px;
+          left: 5px;
+        }
+      }
+
+      .vals {
+        color: #ff5e66;
+        font-size: 14px;
+      }
+      .colors1 {
+        color: #00fe00;
+      }
+      .colors2 {
+        color: #ff5e66;
+      }
+      .titlecg {
+        background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+      }
+    }
+
+    .bottom {
+      width: 100%;
+      height: 50px;
+      line-height: 25px;
+      background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+      color: #58d6ff;
+      font-size: 14px;
+      padding-left: 10px;
+      overflow-y: scroll;
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/yuShuiZiYuanHua.vue b/src/views/sponeScreen/evaluationKH/yuShuiZiYuanHua.vue
new file mode 100644
index 0000000..ee579aa
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/yuShuiZiYuanHua.vue
@@ -0,0 +1,205 @@
+<template>
+  <!-- 雨水资源化利用 -->
+  <div class="rainLYPage">
+    <div class="ListBoxHeader">
+      <div class="partTitleHM">雨水资源化利用</div>
+    </div>
+    <div class="ConstrucClass">
+      <div class="content">
+        <div class="target flex flex-j-left flex-align-center">
+          <div class="titles titlesmb">
+            <div class="mbs">目标</div>
+          </div>
+          <div class="valsText">达到 10 万立方米/年</div>
+        </div>
+        <div class="measures flex flex-j-left flex-align-center">
+          <div class="titles titlecs">
+            <div class="mbs">措施</div>
+          </div>
+          <div class="valsText">开封市建成区内收集雨水后利用的调蓄水体有 4 处，分别为 龙亭湖、西北湖、金明池和中意湖。</div>
+        </div>
+        <el-table ref="table" :data="tableData" max-height="120">
+          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
+          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
+        </el-table>
+
+        <div class="achievements flex flex-j-left flex-align-center">
+          <div class="titles titlecg">
+            <div class="mbs">成果</div>
+          </div>
+          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
+            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
+          </div>
+        </div>
+        <div class="bottom flex-v">
+          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+const { proxy } = getCurrentInstance();
+// import { quotaCommomInfoList,hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'
+
+const quotaInfo = ref({}); //改造措施数据
+const tableData = ref([]);
+
+const tabClick = item => {
+  curTab.value = item.id;
+};
+
+// 产出绩效公共指标信息
+async function getjb() {
+  let res = await quotaCommomInfoList({
+    quotaCode: 'yszyhly',
+  });
+  if (res && res.code == 200) {
+    let data = res.data;
+    quotaInfo.value = data && data.length ? data[0] : {};
+    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
+    console.log(quotaInfo.value.remarkData);
+  }
+}
+// 产出绩效公共指标信息
+async function getkhzn() {
+  let res = await hmyztQuotaDataList({
+    quotaType: 'yszyhly',
+  });
+  if (res && res.code == 200) {
+    tableData.value = res.data;
+  }
+}
+
+onMounted(() => {
+  // getjb()
+  // getkhzn()
+});
+</script>
+<style lang="scss" scoped>
+.rainLYPage {
+  width: 100%;
+  margin: 10px auto;
+  .ConstrucClass {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      width: 100%;
+      height: 100%;
+
+      .target,
+      .measures,
+      .achievements {
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        border-radius: 3px;
+        width: 100%;
+        height: 40px;
+        padding: 0 10px;
+
+        .titles {
+          width: 50px;
+          font-size: 16px;
+          color: #ffffff;
+          position: relative;
+          height: 20px;
+          margin-top: 15px;
+
+          .mbs {
+            position: absolute;
+            top: -10px;
+            left: 5px;
+          }
+        }
+
+        .titlesmb {
+          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
+        }
+
+        .titlecs {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
+        }
+
+        .titlecg {
+          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
+        }
+      }
+
+      .measures {
+        margin-top: 5px;
+      }
+
+      .valsText {
+        width: 350px;
+        color: #58d6ff;
+        margin-left: 10px;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .achievements {
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+
+        margin-top: 10px !important;
+
+        .vals {
+          color: #00fe00 !important;
+          margin-left: 20px;
+        }
+        .colors1 {
+          color: #00fe00;
+        }
+        .colors2 {
+          color: #ff5e66;
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 50px;
+        line-height: 25px;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+        color: #58d6ff;
+        font-size: 14px;
+        padding-left: 10px;
+        justify-content: flex-start;
+        display: flex;
+        span {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  .tabs {
+    float: right;
+    margin: 8px 40px 0px 0px;
+    .tabItem {
+      width: 78px;
+      height: 24px;
+      line-height: 24px;
+      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/evaluationKH/ziJinJiXiao.vue b/src/views/sponeScreen/evaluationKH/ziJinJiXiao.vue
new file mode 100644
index 0000000..5fe7589
--- /dev/null
+++ b/src/views/sponeScreen/evaluationKH/ziJinJiXiao.vue
@@ -0,0 +1,123 @@
+<template>
+  <!-- 资金绩效评价 -->
+  <div class="jiXiaoPingJia">
+    <div class="partTitleHM">资金绩效评价</div>
+    <div class="ListBoxBody">
+      <div class="content">
+        <div class="table_content">
+          <el-table ref="table" :data="tableData" height="200">
+            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
+            <el-table-column label="目标要求" prop="quotaTarget" show-overflow-tooltip />
+            <el-table-column label="现状情况" prop="reformAchievement" />
+            <el-table-column width="80px">
+              <template #default="{ row }">
+                <div class="monitor" @click.stop="monitorIconClick(row)">查看</div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <el-dialog
+    v-model="opens"
+    title="资金绩效评价详情"
+    id="dialogContent"
+    :modal-append-to-body="false"
+    :close-on-click-modal="false"
+    width="700px"
+  >
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <!-- <el-button type="primary" plain icon="Plus" @click="addFile">新增文件</el-button> -->
+      </el-col>
+    </el-row>
+    <el-table :data="tableData2" style="width: 100%" :max-height="400">
+      <el-table-column type="index" label="序号" width="50"> </el-table-column>
+      <el-table-column prop="name" label="文件"> </el-table-column>
+      <el-table-column label="操作" class-name="small-padding fixed-width" width="100">
+        <template #default="scope">
+          <div @click="handleFileDetail(scope.row)">详情</div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-dialog>
+</template>
+
+<script setup>
+// import { hmyztQuotaDataList, querySysFileByType } from '@/api/sponeScreen/jxkh.js';
+const { proxy } = getCurrentInstance();
+const tableData = ref([]);
+const tableData2 = ref([]);
+
+const opens = ref(false);
+const getData = async () => {
+  const res = await hmyztQuotaDataList({ quotaType: 'zjjxpj' });
+  if (res?.code !== 200) return;
+  tableData.value = res?.data || [];
+};
+
+const monitorIconClick = async val => {
+  opens.value = true;
+
+  const res = await querySysFileByType({ quotaType: val.remark, dataYear: 2023 });
+  if (res?.code !== 200) return;
+  tableData2.value = res?.data || [];
+  console.log(tableData2.value, '8888888888');
+};
+
+//查看文件
+const handleFileDetail = row => {
+  window.open(row.url);
+};
+onMounted(() => {
+  // getData();
+});
+</script>
+
+<style lang="scss" scoped>
+.jiXiaoPingJia {
+  width: 460px;
+
+  .ListBoxBody {
+    background: rgba(8, 75, 125, 1);
+    padding: 10px;
+    margin-top: -3px;
+    .content {
+      height: 100%;
+
+      .img_box {
+        width: 100%;
+        height: 100%;
+      }
+
+      .tabs {
+        height: 36px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .table_content {
+        height: 98%;
+      }
+
+      .monitor {
+        width: 50px;
+        height: 20px;
+        background: linear-gradient(0deg, #0566d7 0%, #007eff 100%);
+        border-radius: 11px;
+        color: #d2efff;
+      }
+    }
+  }
+}
+.consts {
+  width: 100%;
+  height: 400px;
+}
+
+.el-message-box {
+  background: #004565 !important;
+}
+</style>