diff --git a/src/assets/images/Sponge_screen/HmbjZp.png b/src/assets/images/Sponge_screen/HmbjZp.png
new file mode 100644
index 0000000..c8057eb
--- /dev/null
+++ b/src/assets/images/Sponge_screen/HmbjZp.png
Binary files differ

diff --git a/src/assets/images/Sponge_screen/HmbjZp.png b/src/assets/images/Sponge_screen/HmbjZp.png
new file mode 100644
index 0000000..c8057eb
--- /dev/null
+++ b/src/assets/images/Sponge_screen/HmbjZp.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue b/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue
new file mode 100644
index 0000000..ffb7088
--- /dev/null
+++ b/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        // label: {
+        //   show: true,
+        // }
+      },
+      formatter: function (params) {
+        return params[0].name + ' : ' + params[0].value + 'km²';
+      },
+    },
+    grid: {
+      top: nowSize(14, 1920),
+      bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
+      left: nowSize(100, 1920),
+      right: nowSize(20, 1920),
+    },
+    xAxis: {
+      type: 'value',
+      axisLine: {
+        show: false, //隐藏X轴轴线
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+      },
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: true, //隐藏或显示
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: props.echartData.xData,
+      name: '面积/km²',
+      nameLocation: 'start',
+      nameTextStyle: {
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+        padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: nowSize(13, 1920),
+      },
+      // splitArea: {
+      //   show: true,
+      //   areaStyle: {
+      //     color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
+      //   }
+      // }
+    },
+    series: [
+      {
+        type: 'bar',
+        name: '面积/km²',
+        data: props.echartData.data,
+        barWidth: nowSize(10, 1920),
+        zlevel: 1,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 167, 245,1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253,1)',
+            },
+          ]),
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: nowSize(10, 1920),
+        barGap: '-100%',
+        data: props.echartData.num,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: 'rgba(77, 149, 217, 0.15)',
+        },
+      },
+    ],
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>

diff --git a/src/assets/images/Sponge_screen/HmbjZp.png b/src/assets/images/Sponge_screen/HmbjZp.png
new file mode 100644
index 0000000..c8057eb
--- /dev/null
+++ b/src/assets/images/Sponge_screen/HmbjZp.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue b/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue
new file mode 100644
index 0000000..ffb7088
--- /dev/null
+++ b/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        // label: {
+        //   show: true,
+        // }
+      },
+      formatter: function (params) {
+        return params[0].name + ' : ' + params[0].value + 'km²';
+      },
+    },
+    grid: {
+      top: nowSize(14, 1920),
+      bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
+      left: nowSize(100, 1920),
+      right: nowSize(20, 1920),
+    },
+    xAxis: {
+      type: 'value',
+      axisLine: {
+        show: false, //隐藏X轴轴线
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+      },
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: true, //隐藏或显示
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: props.echartData.xData,
+      name: '面积/km²',
+      nameLocation: 'start',
+      nameTextStyle: {
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+        padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: nowSize(13, 1920),
+      },
+      // splitArea: {
+      //   show: true,
+      //   areaStyle: {
+      //     color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
+      //   }
+      // }
+    },
+    series: [
+      {
+        type: 'bar',
+        name: '面积/km²',
+        data: props.echartData.data,
+        barWidth: nowSize(10, 1920),
+        zlevel: 1,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 167, 245,1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253,1)',
+            },
+          ]),
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: nowSize(10, 1920),
+        barGap: '-100%',
+        data: props.echartData.num,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: 'rgba(77, 149, 217, 0.15)',
+        },
+      },
+    ],
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue
new file mode 100644
index 0000000..be41f0d
--- /dev/null
+++ b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        // label: {
+        //   show: true,
+        // }
+      },
+      formatter: function (params) {
+        return params[0].name + ' : ' + params[0].value + '万立方米';
+      },
+    },
+    grid: {
+      top: nowSize(14, 1920),
+      bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
+      left: nowSize(100, 1920),
+      right: nowSize(20, 1920),
+    },
+    xAxis: {
+      type: 'value',
+      axisLine: {
+        show: false, //隐藏X轴轴线
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+      },
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: true, //隐藏或显示
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: props.echartData.xData,
+      name: '万立方米',
+      nameLocation: 'start',
+      nameTextStyle: {
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+        padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: nowSize(13, 1920),
+      },
+      // splitArea: {
+      //   show: true,
+      //   areaStyle: {
+      //     color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
+      //   }
+      // }
+    },
+    series: [
+      {
+        type: 'bar',
+        name: '万立方米',
+        data: props.echartData.data,
+        barWidth: nowSize(10, 1920),
+        zlevel: 1,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 167, 245,1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253,1)',
+            },
+          ]),
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: nowSize(10, 1920),
+        barGap: '-100%',
+        data: props.echartData.num,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: 'rgba(77, 149, 217, 0.15)',
+        },
+      },
+    ],
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>

diff --git a/src/assets/images/Sponge_screen/HmbjZp.png b/src/assets/images/Sponge_screen/HmbjZp.png
new file mode 100644
index 0000000..c8057eb
--- /dev/null
+++ b/src/assets/images/Sponge_screen/HmbjZp.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue b/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue
new file mode 100644
index 0000000..ffb7088
--- /dev/null
+++ b/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        // label: {
+        //   show: true,
+        // }
+      },
+      formatter: function (params) {
+        return params[0].name + ' : ' + params[0].value + 'km²';
+      },
+    },
+    grid: {
+      top: nowSize(14, 1920),
+      bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
+      left: nowSize(100, 1920),
+      right: nowSize(20, 1920),
+    },
+    xAxis: {
+      type: 'value',
+      axisLine: {
+        show: false, //隐藏X轴轴线
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+      },
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: true, //隐藏或显示
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: props.echartData.xData,
+      name: '面积/km²',
+      nameLocation: 'start',
+      nameTextStyle: {
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+        padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: nowSize(13, 1920),
+      },
+      // splitArea: {
+      //   show: true,
+      //   areaStyle: {
+      //     color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
+      //   }
+      // }
+    },
+    series: [
+      {
+        type: 'bar',
+        name: '面积/km²',
+        data: props.echartData.data,
+        barWidth: nowSize(10, 1920),
+        zlevel: 1,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 167, 245,1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253,1)',
+            },
+          ]),
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: nowSize(10, 1920),
+        barGap: '-100%',
+        data: props.echartData.num,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: 'rgba(77, 149, 217, 0.15)',
+        },
+      },
+    ],
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue
new file mode 100644
index 0000000..be41f0d
--- /dev/null
+++ b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        // label: {
+        //   show: true,
+        // }
+      },
+      formatter: function (params) {
+        return params[0].name + ' : ' + params[0].value + '万立方米';
+      },
+    },
+    grid: {
+      top: nowSize(14, 1920),
+      bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
+      left: nowSize(100, 1920),
+      right: nowSize(20, 1920),
+    },
+    xAxis: {
+      type: 'value',
+      axisLine: {
+        show: false, //隐藏X轴轴线
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+      },
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: true, //隐藏或显示
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: props.echartData.xData,
+      name: '万立方米',
+      nameLocation: 'start',
+      nameTextStyle: {
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+        padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: nowSize(13, 1920),
+      },
+      // splitArea: {
+      //   show: true,
+      //   areaStyle: {
+      //     color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
+      //   }
+      // }
+    },
+    series: [
+      {
+        type: 'bar',
+        name: '万立方米',
+        data: props.echartData.data,
+        barWidth: nowSize(10, 1920),
+        zlevel: 1,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 167, 245,1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253,1)',
+            },
+          ]),
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: nowSize(10, 1920),
+        barGap: '-100%',
+        data: props.echartData.num,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: 'rgba(77, 149, 217, 0.15)',
+        },
+      },
+    ],
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 3ee47c4..7ff988b 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -36,8 +36,12 @@
             </div>
           </div>
           <div class="specifics" v-if="Flcname == '城市防洪'"></div>
-          <div class="nlfz" v-if="Flcname == '内涝防治'"></div>
-          <div class="jsdxc" v-if="Flcname == '积水点消除'"></div>
+          <div class="nlfz" v-if="Flcname == '内涝防治'">
+            <ChartNlfz :echartData="ryData" :refresh="ryRefresh" />
+          </div>
+          <div class="jsdxc" v-if="Flcname == '积水点消除'">
+            <jsdChart :echartData="aiList" :refresh="ryRefresh1" />
+          </div>
         </div>
 
         <!-- 雨污水资源利用 -->
@@ -58,14 +62,24 @@
             </div>
           </div>
           <div class="utilize" v-if="Ywcname == '雨水资源化利用'"></div>
-          <div class="zsslyl" v-if="Ywcname == '再生水利用率'"></div>
+          <div class="zsslyl" v-if="Ywcname == '再生水利用率'">
+            <ChartZsslyl :echartData="zssList" :refresh="ryRefresh2" />
+          </div>
+          <div class="BottomLook flex" v-if="Ywcname == '再生水利用率'">
+            <div class="ConstrucBot flex" v-for="(item, index) in YwsList">
+              <div class="ConstruBox flex flex-justcontent-spacebetween flex-align-center">
+                <div class="left">{{ item.name }}</div>
+                <div class="right">{{ item.value }}</div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="topVehicl flex">
+    <div class="topVehicl flex" @click="showSewageFectory">
       <div class="icon"></div>
       <div class="name">污水收集处理</div>
     </div>
@@ -75,12 +89,27 @@
 
 <script setup>
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+import ChartNlfz from './ChartNlfz.vue'; //内涝防治
+import jsdChart from './jsdChart.vue'; //积水点
+
+import ChartZsslyl from './ChartZsslyl.vue'; //再生水利用率
+
 import bus from '@/bus';
+const ryData = ref({});
+const ryRefresh = ref('');
+const aiList = ref([]);
+const ryRefresh1 = ref('');
+const zssList = ref({});
+const ryRefresh2 = ref('');
 const categoryList = ref([
   { name: '2023', value: 1 },
   { name: '2024', value: 2 },
   { name: '2025', value: 3 },
 ]);
+const YwsList = ref([
+  { name: '合计', value: '899.55万m³' },
+  { name: '利用率为', value: '23.05%' },
+]);
 const FlList = ref([
   { name: '城市防洪', value: 1 },
   { name: '内涝防治', value: 2 },
@@ -103,6 +132,52 @@
 function Ywclick(val) {
   Ywcname.value = val.name;
 }
+
+// 内涝防治
+function getData() {
+  let obj = {
+    xData: ['濠河', '黄梅港', '王家河', '松杨湖', '北港河', '芭蕉湖', '南津河', '东风湖'],
+    data: [39, 59, 23, 39, 60, 45, 52, 62],
+    num: [],
+  };
+  let max = JSON.parse(JSON.stringify(obj.data));
+  let one = max.sort((a, b) => b - a)[0];
+  max.forEach(i => {
+    obj.num.push(one);
+  });
+  ryData.value = obj;
+  ryRefresh.value = Math.random();
+}
+
+// 内涝防治
+async function getNlfz() {
+  let obj = [
+    { name: '源头减排', value: 10 },
+    { name: '其他', value: 32 },
+    { name: '过程控制', value: 20 },
+    { name: '末端治理', value: 38 },
+  ];
+
+  aiList.value = obj;
+  ryRefresh1.value = Math.random();
+}
+
+// 再生水利用率
+function geZssLyl() {
+  let obj = {
+    xData: ['工业建筑', '城市杂用量', '绿化浇灌', '生态及再生水'],
+    data: [160, 20, 23, 700, 60, 45, 52, 95],
+    num: [],
+  };
+  let max = JSON.parse(JSON.stringify(obj.data));
+  let one = max.sort((a, b) => b - a)[0];
+  max.forEach(i => {
+    obj.num.push(one);
+  });
+  zssList.value = obj;
+  ryRefresh2.value = Math.random();
+}
+
 function showSewageFectory() {
   newfiberMapbox.map.easeTo({
     center: [109.528, 36.626],
@@ -111,6 +186,12 @@
   });
   bus.emit('SetLayerShow', ['污水处理厂']);
 }
+
+onMounted(() => {
+  getData();
+  getNlfz();
+  geZssLyl();
+});
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
 });
@@ -212,22 +293,22 @@
           width: 420px;
           height: calc(100% - 40px);
           margin: 5px auto;
-          background: url('@/assets/images/Sponge_screen/nlfz.png') no-repeat;
-          background-size: 100% 100%;
+          // background: url('@/assets/images/Sponge_screen/nlfz.png') no-repeat;
+          // background-size: 100% 100%;
         }
         .jsdxc {
           width: 420px;
           height: calc(100% - 40px);
           margin: 5px auto;
-          background: url('@/assets/images/Sponge_screen/jsdxc.png') no-repeat;
-          background-size: 100% 100%;
+          // background: url('@/assets/images/Sponge_screen/jsdxc.png') no-repeat;
+          // background-size: 100% 100%;
         }
       }
       .YwBox {
         width: 430px;
         height: 40%;
         margin: 5px auto;
-
+        // background: yellow;
         .topYwBox {
           font-family: Source Han Sans CN;
           font-weight: bold;
@@ -282,10 +363,42 @@
         }
         .zsslyl {
           width: 420px;
-          height: calc(100% - 40px);
+          height: calc(100% - 80px);
           margin: 5px auto;
-          background: url('@/assets/images/Sponge_screen/zss.png') no-repeat;
-          background-size: 100% 100%;
+          // background: red;
+          // background: url('@/assets/images/Sponge_screen/zss.png') no-repeat;
+          // background-size: 100% 100%;
+        }
+        .BottomLook {
+          margin: 5px auto;
+          width: 430px;
+          height: 35px;
+          // background: blue;
+          .ConstrucBot {
+            width: 205px;
+            height: 32px;
+            background: url('@/assets/images/Sponge_screen/HmbjZp.png') no-repeat;
+            background-size: 100% 100%;
+            margin-left: 7px;
+            .ConstruBox {
+              position: relative;
+              left: 30px;
+              width: 160px;
+              // background: red;
+              .left {
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+                font-size: 14px;
+                color: #ffffff;
+              }
+              .right {
+                font-family: Source Han Sans CN;
+                font-weight: 500;
+                font-size: 16px;
+                color: #ffed98;
+              }
+            }
+          }
         }
       }
     }
@@ -303,6 +416,7 @@
     align-items: center;
     height: 30px;
     // background: teal;
+    cursor: pointer;
     .icon {
       position: relative;
       top: -1px;

diff --git a/src/assets/images/Sponge_screen/HmbjZp.png b/src/assets/images/Sponge_screen/HmbjZp.png
new file mode 100644
index 0000000..c8057eb
--- /dev/null
+++ b/src/assets/images/Sponge_screen/HmbjZp.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue b/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue
new file mode 100644
index 0000000..ffb7088
--- /dev/null
+++ b/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        // label: {
+        //   show: true,
+        // }
+      },
+      formatter: function (params) {
+        return params[0].name + ' : ' + params[0].value + 'km²';
+      },
+    },
+    grid: {
+      top: nowSize(14, 1920),
+      bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
+      left: nowSize(100, 1920),
+      right: nowSize(20, 1920),
+    },
+    xAxis: {
+      type: 'value',
+      axisLine: {
+        show: false, //隐藏X轴轴线
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+      },
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: true, //隐藏或显示
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: props.echartData.xData,
+      name: '面积/km²',
+      nameLocation: 'start',
+      nameTextStyle: {
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+        padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: nowSize(13, 1920),
+      },
+      // splitArea: {
+      //   show: true,
+      //   areaStyle: {
+      //     color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
+      //   }
+      // }
+    },
+    series: [
+      {
+        type: 'bar',
+        name: '面积/km²',
+        data: props.echartData.data,
+        barWidth: nowSize(10, 1920),
+        zlevel: 1,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 167, 245,1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253,1)',
+            },
+          ]),
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: nowSize(10, 1920),
+        barGap: '-100%',
+        data: props.echartData.num,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: 'rgba(77, 149, 217, 0.15)',
+        },
+      },
+    ],
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue
new file mode 100644
index 0000000..be41f0d
--- /dev/null
+++ b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        // label: {
+        //   show: true,
+        // }
+      },
+      formatter: function (params) {
+        return params[0].name + ' : ' + params[0].value + '万立方米';
+      },
+    },
+    grid: {
+      top: nowSize(14, 1920),
+      bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
+      left: nowSize(100, 1920),
+      right: nowSize(20, 1920),
+    },
+    xAxis: {
+      type: 'value',
+      axisLine: {
+        show: false, //隐藏X轴轴线
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+      },
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: true, //隐藏或显示
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: props.echartData.xData,
+      name: '万立方米',
+      nameLocation: 'start',
+      nameTextStyle: {
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+        padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: nowSize(13, 1920),
+      },
+      // splitArea: {
+      //   show: true,
+      //   areaStyle: {
+      //     color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
+      //   }
+      // }
+    },
+    series: [
+      {
+        type: 'bar',
+        name: '万立方米',
+        data: props.echartData.data,
+        barWidth: nowSize(10, 1920),
+        zlevel: 1,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 167, 245,1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253,1)',
+            },
+          ]),
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: nowSize(10, 1920),
+        barGap: '-100%',
+        data: props.echartData.num,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: 'rgba(77, 149, 217, 0.15)',
+        },
+      },
+    ],
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 3ee47c4..7ff988b 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -36,8 +36,12 @@
             </div>
           </div>
           <div class="specifics" v-if="Flcname == '城市防洪'"></div>
-          <div class="nlfz" v-if="Flcname == '内涝防治'"></div>
-          <div class="jsdxc" v-if="Flcname == '积水点消除'"></div>
+          <div class="nlfz" v-if="Flcname == '内涝防治'">
+            <ChartNlfz :echartData="ryData" :refresh="ryRefresh" />
+          </div>
+          <div class="jsdxc" v-if="Flcname == '积水点消除'">
+            <jsdChart :echartData="aiList" :refresh="ryRefresh1" />
+          </div>
         </div>
 
         <!-- 雨污水资源利用 -->
@@ -58,14 +62,24 @@
             </div>
           </div>
           <div class="utilize" v-if="Ywcname == '雨水资源化利用'"></div>
-          <div class="zsslyl" v-if="Ywcname == '再生水利用率'"></div>
+          <div class="zsslyl" v-if="Ywcname == '再生水利用率'">
+            <ChartZsslyl :echartData="zssList" :refresh="ryRefresh2" />
+          </div>
+          <div class="BottomLook flex" v-if="Ywcname == '再生水利用率'">
+            <div class="ConstrucBot flex" v-for="(item, index) in YwsList">
+              <div class="ConstruBox flex flex-justcontent-spacebetween flex-align-center">
+                <div class="left">{{ item.name }}</div>
+                <div class="right">{{ item.value }}</div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="topVehicl flex">
+    <div class="topVehicl flex" @click="showSewageFectory">
       <div class="icon"></div>
       <div class="name">污水收集处理</div>
     </div>
@@ -75,12 +89,27 @@
 
 <script setup>
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+import ChartNlfz from './ChartNlfz.vue'; //内涝防治
+import jsdChart from './jsdChart.vue'; //积水点
+
+import ChartZsslyl from './ChartZsslyl.vue'; //再生水利用率
+
 import bus from '@/bus';
+const ryData = ref({});
+const ryRefresh = ref('');
+const aiList = ref([]);
+const ryRefresh1 = ref('');
+const zssList = ref({});
+const ryRefresh2 = ref('');
 const categoryList = ref([
   { name: '2023', value: 1 },
   { name: '2024', value: 2 },
   { name: '2025', value: 3 },
 ]);
+const YwsList = ref([
+  { name: '合计', value: '899.55万m³' },
+  { name: '利用率为', value: '23.05%' },
+]);
 const FlList = ref([
   { name: '城市防洪', value: 1 },
   { name: '内涝防治', value: 2 },
@@ -103,6 +132,52 @@
 function Ywclick(val) {
   Ywcname.value = val.name;
 }
+
+// 内涝防治
+function getData() {
+  let obj = {
+    xData: ['濠河', '黄梅港', '王家河', '松杨湖', '北港河', '芭蕉湖', '南津河', '东风湖'],
+    data: [39, 59, 23, 39, 60, 45, 52, 62],
+    num: [],
+  };
+  let max = JSON.parse(JSON.stringify(obj.data));
+  let one = max.sort((a, b) => b - a)[0];
+  max.forEach(i => {
+    obj.num.push(one);
+  });
+  ryData.value = obj;
+  ryRefresh.value = Math.random();
+}
+
+// 内涝防治
+async function getNlfz() {
+  let obj = [
+    { name: '源头减排', value: 10 },
+    { name: '其他', value: 32 },
+    { name: '过程控制', value: 20 },
+    { name: '末端治理', value: 38 },
+  ];
+
+  aiList.value = obj;
+  ryRefresh1.value = Math.random();
+}
+
+// 再生水利用率
+function geZssLyl() {
+  let obj = {
+    xData: ['工业建筑', '城市杂用量', '绿化浇灌', '生态及再生水'],
+    data: [160, 20, 23, 700, 60, 45, 52, 95],
+    num: [],
+  };
+  let max = JSON.parse(JSON.stringify(obj.data));
+  let one = max.sort((a, b) => b - a)[0];
+  max.forEach(i => {
+    obj.num.push(one);
+  });
+  zssList.value = obj;
+  ryRefresh2.value = Math.random();
+}
+
 function showSewageFectory() {
   newfiberMapbox.map.easeTo({
     center: [109.528, 36.626],
@@ -111,6 +186,12 @@
   });
   bus.emit('SetLayerShow', ['污水处理厂']);
 }
+
+onMounted(() => {
+  getData();
+  getNlfz();
+  geZssLyl();
+});
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
 });
@@ -212,22 +293,22 @@
           width: 420px;
           height: calc(100% - 40px);
           margin: 5px auto;
-          background: url('@/assets/images/Sponge_screen/nlfz.png') no-repeat;
-          background-size: 100% 100%;
+          // background: url('@/assets/images/Sponge_screen/nlfz.png') no-repeat;
+          // background-size: 100% 100%;
         }
         .jsdxc {
           width: 420px;
           height: calc(100% - 40px);
           margin: 5px auto;
-          background: url('@/assets/images/Sponge_screen/jsdxc.png') no-repeat;
-          background-size: 100% 100%;
+          // background: url('@/assets/images/Sponge_screen/jsdxc.png') no-repeat;
+          // background-size: 100% 100%;
         }
       }
       .YwBox {
         width: 430px;
         height: 40%;
         margin: 5px auto;
-
+        // background: yellow;
         .topYwBox {
           font-family: Source Han Sans CN;
           font-weight: bold;
@@ -282,10 +363,42 @@
         }
         .zsslyl {
           width: 420px;
-          height: calc(100% - 40px);
+          height: calc(100% - 80px);
           margin: 5px auto;
-          background: url('@/assets/images/Sponge_screen/zss.png') no-repeat;
-          background-size: 100% 100%;
+          // background: red;
+          // background: url('@/assets/images/Sponge_screen/zss.png') no-repeat;
+          // background-size: 100% 100%;
+        }
+        .BottomLook {
+          margin: 5px auto;
+          width: 430px;
+          height: 35px;
+          // background: blue;
+          .ConstrucBot {
+            width: 205px;
+            height: 32px;
+            background: url('@/assets/images/Sponge_screen/HmbjZp.png') no-repeat;
+            background-size: 100% 100%;
+            margin-left: 7px;
+            .ConstruBox {
+              position: relative;
+              left: 30px;
+              width: 160px;
+              // background: red;
+              .left {
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+                font-size: 14px;
+                color: #ffffff;
+              }
+              .right {
+                font-family: Source Han Sans CN;
+                font-weight: 500;
+                font-size: 16px;
+                color: #ffed98;
+              }
+            }
+          }
         }
       }
     }
@@ -303,6 +416,7 @@
     align-items: center;
     height: 30px;
     // background: teal;
+    cursor: pointer;
     .icon {
       position: relative;
       top: -1px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index f72791f..9e83360 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -19,18 +19,28 @@
     <!-- 2023 -->
     <div class="managementBox">
       <!-- 循环 -->
-      <div class="listBox">
-        <div class="title">立法及长效机制</div>
+      <div class="listBox" v-for="(item, v) in obj">
+        <div class="title">{{ item.name }}</div>
         <div class="progress">
           <div class="ratio flex flex-align-center">
             <div class="one">年度进度</div>
-            <div class="two"><div class="in"><div class="zb" :style="{width:`${30}%`}"></div></div></div>
-            <div class="three">70%</div>
+            <div class="two">
+              <div class="in"><div class="zb" :style="{ width: `${item.pro1}%` }"></div></div>
+            </div>
+            <div class="three">
+              {{ item.pro3 }}
+              {{ item.pro1 }}%
+            </div>
           </div>
           <div class="ratio flex flex-align-center">
             <div class="one">总体进度</div>
-            <div class="two"><div class="in"><div class="zb" :style="{width:`${60}%`}"></div></div></div>
-            <div class="three">70%</div>
+            <div class="two">
+              <div class="in"><div class="zb" :style="{ width: `${item.pro2}%` }"></div></div>
+            </div>
+            <div class="three">
+              {{ item.pro4 }}
+              {{ item.pro2 }}%
+            </div>
           </div>
         </div>
       </div>
@@ -43,11 +53,11 @@
     </div>
     <div class="mydContent">
       <div class="list flex flex-justcontent-spacebetween">
-        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center" style="width:49%">
+        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center" style="width: 49%">
           <div class="left">目标</div>
           <div class="right">96.17%</div>
         </div>
-        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center" style="width:49%">
+        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center" style="width: 49%">
           <div class="left">结果</div>
           <div class="right">96.17%</div>
         </div>
@@ -74,10 +84,106 @@
   { name: '2024', value: 2 },
   { name: '2025', value: 3 },
 ]);
+const obj = ref([
+  { name: '立法及长效机制', pro1: '70', pro2: '30' },
+  { name: '立法及长效机制', pro1: '88', pro2: '45' },
+  {
+    name: '海绵城市建设的全域性',
+    pro1: '75',
+    pro2: '35',
+  },
+  {
+    name: '规划建设管控制度',
+    pro1: '70',
+    pro2: '30',
+  },
+
+  { name: '投融资机制', pro1: '70', pro2: '30' },
+  { name: '培训', pro1: '70', pro2: '30', pro3: '3/4', pro4: '6/10' },
+  {
+    name: '宣传与公众参与',
+    pro1: '85',
+    pro2: '40',
+  },
+]);
 const activedname = ref('2023');
 // 点击事件
 function categoryclick(val) {
   activedname.value = val.name;
+  console.log(activedname.value, ' activedname.value');
+  if (activedname.value == '2023') {
+    obj.value = [
+      { name: '立法及长效机制', pro1: '70', pro2: '30' },
+      { name: '立法及长效机制', pro1: '88', pro2: '45' },
+      {
+        name: '海绵城市建设的全域性',
+        pro1: '75',
+        pro2: '35',
+      },
+      {
+        name: '规划建设管控制度',
+        pro1: '70',
+        pro2: '30',
+      },
+
+      { name: '投融资机制', pro1: '70', pro2: '30' },
+      { name: '培训', pro1: '70', pro2: '30', pro3: '3/4', pro4: '6/10' },
+      {
+        name: '宣传与公众参与',
+        pro1: '85',
+        pro2: '40',
+      },
+    ];
+    console.log(obj.value, '2023');
+  } else if (activedname.value == '2024') {
+    obj.value = [
+      { name: '立法及长效机制', pro1: '70', pro2: '30' },
+      { name: '立法及长效机制', pro1: '88', pro2: '45' },
+      {
+        name: '海绵城市建设的全域性',
+        pro1: '75',
+        pro2: '35',
+      },
+      {
+        name: '规划建设管控制度',
+        pro1: '70',
+        pro2: '30',
+      },
+
+      { name: '投融资机制', pro1: '70', pro2: '30' },
+      { name: '培训', pro1: '70', pro2: '60', pro3: '3/4', pro4: '6/10' },
+      {
+        name: '宣传与公众参与',
+        pro1: '85',
+        pro2: '40',
+      },
+    ];
+    console.log(obj.value, '2024');
+  } else if (activedname.value == '2025') {
+    obj.value = [
+      { name: '立法及长效机制', pro1: '100', pro2: '100' },
+      { name: '立法及长效机制', pro1: '100', pro2: '100' },
+      {
+        name: '海绵城市建设的全域性',
+        pro1: '100',
+        pro2: '100',
+      },
+      {
+        name: '规划建设管控制度',
+        pro1: '100',
+        pro2: '100',
+      },
+
+      { name: '投融资机制', pro1: '100', pro2: '100' },
+      { name: '培训', pro1: '100', pro2: '100', pro3: '3/3', pro4: '10/10' },
+      {
+        name: '宣传与公众参与',
+        pro1: '100',
+        pro2: '100',
+      },
+    ];
+    console.log(obj.value, '2025');
+  }
 }
 </script>
 
@@ -88,8 +194,8 @@
 
   .subRightBox {
     width: 450px;
-    margin:10px auto;
-    height:35px;
+    margin: 10px auto;
+    height: 35px;
     display: flex;
     cursor: pointer;
     font-size: 14px;
@@ -114,63 +220,69 @@
     padding: 0 10px;
     height: calc(100% - 95px);
     overflow: auto;
-    .listBox{
-      background:rgba(7, 86, 128, 0.6);
-      border: 1px solid #1CF5FC;
+    .listBox {
+      background: rgba(7, 86, 128, 0.6);
+      border: 1px solid #1cf5fc;
       padding: 0 10px;
       overflow: hidden;
-      margin-bottom:10px;
-      .title{
+      margin-bottom: 10px;
+      .title {
         line-height: 34px;
         font-weight: 500;
         font-size: 14px;
-        color: #1CF5FC;
+        color: #1cf5fc;
       }
-      .progress{
+      .progress {
         overflow: hidden;
-        .ratio{
+        .ratio {
           padding-bottom: 10px;
           overflow: hidden;
           font-weight: 400;
           font-size: 14px;
-          color: #FFFFFF;
-          .one{
+          color: #ffffff;
+          .one {
             width: 64px;
           }
-          .two{
-            flex:1;
+          .two {
+            flex: 1;
             height: 16px;
             border-radius: 2px;
             border: 1px solid rgba(223, 254, 255, 0.15);
             padding: 5px 9px;
             overflow: hidden;
-            .in{
+            .in {
               height: 100%;
               background: rgba(94, 167, 255, 0.3);
               border-radius: 2px;
             }
-            .zb{
-              background: linear-gradient(90deg, rgba(0, 246, 255, 0.3) 40%,rgba(0, 246, 255, 0.85) 80%, rgba(197, 253, 255, 1) 100%);
+            .zb {
+              background: linear-gradient(
+                90deg,
+                rgba(0, 246, 255, 0.3) 40%,
+                rgba(0, 246, 255, 0.85) 80%,
+                rgba(197, 253, 255, 1) 100%
+              );
               height: 100%;
               border-radius: 2px;
               position: relative;
-              &::after{
+              &::after {
                 content: '';
-                width:7px;
-                height:7px;
+                width: 7px;
+                height: 7px;
                 background: rgba(197, 253, 255, 1);
                 position: absolute;
-                right:0;
-                top:50%;
+                right: 0;
+                top: 50%;
                 transform: translateY(-50%);
                 border-radius: 50%;
                 box-shadow: 0 0 10px rgba(223, 254, 255, 1);
               }
             }
           }
-          .three{
-            width: 46px;
+          .three {
+            width: 60px;
             text-align: right;
+            // background: red;
           }
         }
       }
@@ -185,23 +297,23 @@
     margin: 5px auto;
     width: 430px;
     height: calc(100% - 60px);
-    .list{
+    .list {
       overflow: hidden;
       margin-bottom: 10px;
     }
-    .mydBox{
+    .mydBox {
       height: 32px;
       background: rgba(7, 86, 128, 0.6);
-      border: 1px solid #02B9C3;
-      box-shadow: 0 0 10px #02B9C3 inset;
+      border: 1px solid #02b9c3;
+      box-shadow: 0 0 10px #02b9c3 inset;
       font-weight: 400;
       font-size: 14px;
-      color: #FFFFFF;
+      color: #ffffff;
       border-left: 2px solid rgba(0, 242, 255, 1);
       padding-left: 35px;
       padding-right: 10px;
       position: relative;
-      &::before{
+      &::before {
         content: '';
         width: 12px;
         height: 10px;
@@ -212,43 +324,43 @@
         top: 50%;
         transform: translateY(-50%);
       }
-      &::after{
+      &::after {
         content: '';
         width: 27px;
         height: 1px;
-        background:rgba(0, 242, 255, 1);
+        background: rgba(0, 242, 255, 1);
         position: absolute;
         left: 50%;
         top: 50%;
-        transform: translate(-50%,-50%);
+        transform: translate(-50%, -50%);
       }
-      .right{
+      .right {
         font-weight: 500;
         font-size: 16px;
-        color: #FFED98;
+        color: #ffed98;
         font-family: DINPro;
-        span{
+        span {
           font-weight: 400;
           font-size: 14px;
-          color: #5FE889;
+          color: #5fe889;
           margin-left: 10px;
         }
       }
     }
-    .listBox{
+    .listBox {
       width: 32%;
       line-height: 32px;
-      background: linear-gradient(0deg, #102755 0%, #009DAB 0%, #034D66 100%);
+      background: linear-gradient(0deg, #102755 0%, #009dab 0%, #034d66 100%);
       border-radius: 4px;
-      border: 1px solid #1CF5FC;
+      border: 1px solid #1cf5fc;
       font-weight: 400;
       font-size: 14px;
-      color: #FFFFFF;
+      color: #ffffff;
       padding: 0 10px;
-      span{
+      span {
         font-weight: 500;
         font-size: 16px;
-        color: #12F9FF;
+        color: #12f9ff;
       }
     }
   }

diff --git a/src/assets/images/Sponge_screen/HmbjZp.png b/src/assets/images/Sponge_screen/HmbjZp.png
new file mode 100644
index 0000000..c8057eb
--- /dev/null
+++ b/src/assets/images/Sponge_screen/HmbjZp.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue b/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue
new file mode 100644
index 0000000..ffb7088
--- /dev/null
+++ b/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        // label: {
+        //   show: true,
+        // }
+      },
+      formatter: function (params) {
+        return params[0].name + ' : ' + params[0].value + 'km²';
+      },
+    },
+    grid: {
+      top: nowSize(14, 1920),
+      bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
+      left: nowSize(100, 1920),
+      right: nowSize(20, 1920),
+    },
+    xAxis: {
+      type: 'value',
+      axisLine: {
+        show: false, //隐藏X轴轴线
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+      },
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: true, //隐藏或显示
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: props.echartData.xData,
+      name: '面积/km²',
+      nameLocation: 'start',
+      nameTextStyle: {
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+        padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: nowSize(13, 1920),
+      },
+      // splitArea: {
+      //   show: true,
+      //   areaStyle: {
+      //     color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
+      //   }
+      // }
+    },
+    series: [
+      {
+        type: 'bar',
+        name: '面积/km²',
+        data: props.echartData.data,
+        barWidth: nowSize(10, 1920),
+        zlevel: 1,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 167, 245,1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253,1)',
+            },
+          ]),
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: nowSize(10, 1920),
+        barGap: '-100%',
+        data: props.echartData.num,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: 'rgba(77, 149, 217, 0.15)',
+        },
+      },
+    ],
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue
new file mode 100644
index 0000000..be41f0d
--- /dev/null
+++ b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        // label: {
+        //   show: true,
+        // }
+      },
+      formatter: function (params) {
+        return params[0].name + ' : ' + params[0].value + '万立方米';
+      },
+    },
+    grid: {
+      top: nowSize(14, 1920),
+      bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
+      left: nowSize(100, 1920),
+      right: nowSize(20, 1920),
+    },
+    xAxis: {
+      type: 'value',
+      axisLine: {
+        show: false, //隐藏X轴轴线
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+      },
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: true, //隐藏或显示
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: props.echartData.xData,
+      name: '万立方米',
+      nameLocation: 'start',
+      nameTextStyle: {
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+        padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: nowSize(13, 1920),
+      },
+      // splitArea: {
+      //   show: true,
+      //   areaStyle: {
+      //     color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
+      //   }
+      // }
+    },
+    series: [
+      {
+        type: 'bar',
+        name: '万立方米',
+        data: props.echartData.data,
+        barWidth: nowSize(10, 1920),
+        zlevel: 1,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 167, 245,1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253,1)',
+            },
+          ]),
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: nowSize(10, 1920),
+        barGap: '-100%',
+        data: props.echartData.num,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: 'rgba(77, 149, 217, 0.15)',
+        },
+      },
+    ],
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 3ee47c4..7ff988b 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -36,8 +36,12 @@
             </div>
           </div>
           <div class="specifics" v-if="Flcname == '城市防洪'"></div>
-          <div class="nlfz" v-if="Flcname == '内涝防治'"></div>
-          <div class="jsdxc" v-if="Flcname == '积水点消除'"></div>
+          <div class="nlfz" v-if="Flcname == '内涝防治'">
+            <ChartNlfz :echartData="ryData" :refresh="ryRefresh" />
+          </div>
+          <div class="jsdxc" v-if="Flcname == '积水点消除'">
+            <jsdChart :echartData="aiList" :refresh="ryRefresh1" />
+          </div>
         </div>
 
         <!-- 雨污水资源利用 -->
@@ -58,14 +62,24 @@
             </div>
           </div>
           <div class="utilize" v-if="Ywcname == '雨水资源化利用'"></div>
-          <div class="zsslyl" v-if="Ywcname == '再生水利用率'"></div>
+          <div class="zsslyl" v-if="Ywcname == '再生水利用率'">
+            <ChartZsslyl :echartData="zssList" :refresh="ryRefresh2" />
+          </div>
+          <div class="BottomLook flex" v-if="Ywcname == '再生水利用率'">
+            <div class="ConstrucBot flex" v-for="(item, index) in YwsList">
+              <div class="ConstruBox flex flex-justcontent-spacebetween flex-align-center">
+                <div class="left">{{ item.name }}</div>
+                <div class="right">{{ item.value }}</div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="topVehicl flex">
+    <div class="topVehicl flex" @click="showSewageFectory">
       <div class="icon"></div>
       <div class="name">污水收集处理</div>
     </div>
@@ -75,12 +89,27 @@
 
 <script setup>
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+import ChartNlfz from './ChartNlfz.vue'; //内涝防治
+import jsdChart from './jsdChart.vue'; //积水点
+
+import ChartZsslyl from './ChartZsslyl.vue'; //再生水利用率
+
 import bus from '@/bus';
+const ryData = ref({});
+const ryRefresh = ref('');
+const aiList = ref([]);
+const ryRefresh1 = ref('');
+const zssList = ref({});
+const ryRefresh2 = ref('');
 const categoryList = ref([
   { name: '2023', value: 1 },
   { name: '2024', value: 2 },
   { name: '2025', value: 3 },
 ]);
+const YwsList = ref([
+  { name: '合计', value: '899.55万m³' },
+  { name: '利用率为', value: '23.05%' },
+]);
 const FlList = ref([
   { name: '城市防洪', value: 1 },
   { name: '内涝防治', value: 2 },
@@ -103,6 +132,52 @@
 function Ywclick(val) {
   Ywcname.value = val.name;
 }
+
+// 内涝防治
+function getData() {
+  let obj = {
+    xData: ['濠河', '黄梅港', '王家河', '松杨湖', '北港河', '芭蕉湖', '南津河', '东风湖'],
+    data: [39, 59, 23, 39, 60, 45, 52, 62],
+    num: [],
+  };
+  let max = JSON.parse(JSON.stringify(obj.data));
+  let one = max.sort((a, b) => b - a)[0];
+  max.forEach(i => {
+    obj.num.push(one);
+  });
+  ryData.value = obj;
+  ryRefresh.value = Math.random();
+}
+
+// 内涝防治
+async function getNlfz() {
+  let obj = [
+    { name: '源头减排', value: 10 },
+    { name: '其他', value: 32 },
+    { name: '过程控制', value: 20 },
+    { name: '末端治理', value: 38 },
+  ];
+
+  aiList.value = obj;
+  ryRefresh1.value = Math.random();
+}
+
+// 再生水利用率
+function geZssLyl() {
+  let obj = {
+    xData: ['工业建筑', '城市杂用量', '绿化浇灌', '生态及再生水'],
+    data: [160, 20, 23, 700, 60, 45, 52, 95],
+    num: [],
+  };
+  let max = JSON.parse(JSON.stringify(obj.data));
+  let one = max.sort((a, b) => b - a)[0];
+  max.forEach(i => {
+    obj.num.push(one);
+  });
+  zssList.value = obj;
+  ryRefresh2.value = Math.random();
+}
+
 function showSewageFectory() {
   newfiberMapbox.map.easeTo({
     center: [109.528, 36.626],
@@ -111,6 +186,12 @@
   });
   bus.emit('SetLayerShow', ['污水处理厂']);
 }
+
+onMounted(() => {
+  getData();
+  getNlfz();
+  geZssLyl();
+});
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
 });
@@ -212,22 +293,22 @@
           width: 420px;
           height: calc(100% - 40px);
           margin: 5px auto;
-          background: url('@/assets/images/Sponge_screen/nlfz.png') no-repeat;
-          background-size: 100% 100%;
+          // background: url('@/assets/images/Sponge_screen/nlfz.png') no-repeat;
+          // background-size: 100% 100%;
         }
         .jsdxc {
           width: 420px;
           height: calc(100% - 40px);
           margin: 5px auto;
-          background: url('@/assets/images/Sponge_screen/jsdxc.png') no-repeat;
-          background-size: 100% 100%;
+          // background: url('@/assets/images/Sponge_screen/jsdxc.png') no-repeat;
+          // background-size: 100% 100%;
         }
       }
       .YwBox {
         width: 430px;
         height: 40%;
         margin: 5px auto;
-
+        // background: yellow;
         .topYwBox {
           font-family: Source Han Sans CN;
           font-weight: bold;
@@ -282,10 +363,42 @@
         }
         .zsslyl {
           width: 420px;
-          height: calc(100% - 40px);
+          height: calc(100% - 80px);
           margin: 5px auto;
-          background: url('@/assets/images/Sponge_screen/zss.png') no-repeat;
-          background-size: 100% 100%;
+          // background: red;
+          // background: url('@/assets/images/Sponge_screen/zss.png') no-repeat;
+          // background-size: 100% 100%;
+        }
+        .BottomLook {
+          margin: 5px auto;
+          width: 430px;
+          height: 35px;
+          // background: blue;
+          .ConstrucBot {
+            width: 205px;
+            height: 32px;
+            background: url('@/assets/images/Sponge_screen/HmbjZp.png') no-repeat;
+            background-size: 100% 100%;
+            margin-left: 7px;
+            .ConstruBox {
+              position: relative;
+              left: 30px;
+              width: 160px;
+              // background: red;
+              .left {
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+                font-size: 14px;
+                color: #ffffff;
+              }
+              .right {
+                font-family: Source Han Sans CN;
+                font-weight: 500;
+                font-size: 16px;
+                color: #ffed98;
+              }
+            }
+          }
         }
       }
     }
@@ -303,6 +416,7 @@
     align-items: center;
     height: 30px;
     // background: teal;
+    cursor: pointer;
     .icon {
       position: relative;
       top: -1px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index f72791f..9e83360 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -19,18 +19,28 @@
     <!-- 2023 -->
     <div class="managementBox">
       <!-- 循环 -->
-      <div class="listBox">
-        <div class="title">立法及长效机制</div>
+      <div class="listBox" v-for="(item, v) in obj">
+        <div class="title">{{ item.name }}</div>
         <div class="progress">
           <div class="ratio flex flex-align-center">
             <div class="one">年度进度</div>
-            <div class="two"><div class="in"><div class="zb" :style="{width:`${30}%`}"></div></div></div>
-            <div class="three">70%</div>
+            <div class="two">
+              <div class="in"><div class="zb" :style="{ width: `${item.pro1}%` }"></div></div>
+            </div>
+            <div class="three">
+              {{ item.pro3 }}
+              {{ item.pro1 }}%
+            </div>
           </div>
           <div class="ratio flex flex-align-center">
             <div class="one">总体进度</div>
-            <div class="two"><div class="in"><div class="zb" :style="{width:`${60}%`}"></div></div></div>
-            <div class="three">70%</div>
+            <div class="two">
+              <div class="in"><div class="zb" :style="{ width: `${item.pro2}%` }"></div></div>
+            </div>
+            <div class="three">
+              {{ item.pro4 }}
+              {{ item.pro2 }}%
+            </div>
           </div>
         </div>
       </div>
@@ -43,11 +53,11 @@
     </div>
     <div class="mydContent">
       <div class="list flex flex-justcontent-spacebetween">
-        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center" style="width:49%">
+        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center" style="width: 49%">
           <div class="left">目标</div>
           <div class="right">96.17%</div>
         </div>
-        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center" style="width:49%">
+        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center" style="width: 49%">
           <div class="left">结果</div>
           <div class="right">96.17%</div>
         </div>
@@ -74,10 +84,106 @@
   { name: '2024', value: 2 },
   { name: '2025', value: 3 },
 ]);
+const obj = ref([
+  { name: '立法及长效机制', pro1: '70', pro2: '30' },
+  { name: '立法及长效机制', pro1: '88', pro2: '45' },
+  {
+    name: '海绵城市建设的全域性',
+    pro1: '75',
+    pro2: '35',
+  },
+  {
+    name: '规划建设管控制度',
+    pro1: '70',
+    pro2: '30',
+  },
+
+  { name: '投融资机制', pro1: '70', pro2: '30' },
+  { name: '培训', pro1: '70', pro2: '30', pro3: '3/4', pro4: '6/10' },
+  {
+    name: '宣传与公众参与',
+    pro1: '85',
+    pro2: '40',
+  },
+]);
 const activedname = ref('2023');
 // 点击事件
 function categoryclick(val) {
   activedname.value = val.name;
+  console.log(activedname.value, ' activedname.value');
+  if (activedname.value == '2023') {
+    obj.value = [
+      { name: '立法及长效机制', pro1: '70', pro2: '30' },
+      { name: '立法及长效机制', pro1: '88', pro2: '45' },
+      {
+        name: '海绵城市建设的全域性',
+        pro1: '75',
+        pro2: '35',
+      },
+      {
+        name: '规划建设管控制度',
+        pro1: '70',
+        pro2: '30',
+      },
+
+      { name: '投融资机制', pro1: '70', pro2: '30' },
+      { name: '培训', pro1: '70', pro2: '30', pro3: '3/4', pro4: '6/10' },
+      {
+        name: '宣传与公众参与',
+        pro1: '85',
+        pro2: '40',
+      },
+    ];
+    console.log(obj.value, '2023');
+  } else if (activedname.value == '2024') {
+    obj.value = [
+      { name: '立法及长效机制', pro1: '70', pro2: '30' },
+      { name: '立法及长效机制', pro1: '88', pro2: '45' },
+      {
+        name: '海绵城市建设的全域性',
+        pro1: '75',
+        pro2: '35',
+      },
+      {
+        name: '规划建设管控制度',
+        pro1: '70',
+        pro2: '30',
+      },
+
+      { name: '投融资机制', pro1: '70', pro2: '30' },
+      { name: '培训', pro1: '70', pro2: '60', pro3: '3/4', pro4: '6/10' },
+      {
+        name: '宣传与公众参与',
+        pro1: '85',
+        pro2: '40',
+      },
+    ];
+    console.log(obj.value, '2024');
+  } else if (activedname.value == '2025') {
+    obj.value = [
+      { name: '立法及长效机制', pro1: '100', pro2: '100' },
+      { name: '立法及长效机制', pro1: '100', pro2: '100' },
+      {
+        name: '海绵城市建设的全域性',
+        pro1: '100',
+        pro2: '100',
+      },
+      {
+        name: '规划建设管控制度',
+        pro1: '100',
+        pro2: '100',
+      },
+
+      { name: '投融资机制', pro1: '100', pro2: '100' },
+      { name: '培训', pro1: '100', pro2: '100', pro3: '3/3', pro4: '10/10' },
+      {
+        name: '宣传与公众参与',
+        pro1: '100',
+        pro2: '100',
+      },
+    ];
+    console.log(obj.value, '2025');
+  }
 }
 </script>
 
@@ -88,8 +194,8 @@
 
   .subRightBox {
     width: 450px;
-    margin:10px auto;
-    height:35px;
+    margin: 10px auto;
+    height: 35px;
     display: flex;
     cursor: pointer;
     font-size: 14px;
@@ -114,63 +220,69 @@
     padding: 0 10px;
     height: calc(100% - 95px);
     overflow: auto;
-    .listBox{
-      background:rgba(7, 86, 128, 0.6);
-      border: 1px solid #1CF5FC;
+    .listBox {
+      background: rgba(7, 86, 128, 0.6);
+      border: 1px solid #1cf5fc;
       padding: 0 10px;
       overflow: hidden;
-      margin-bottom:10px;
-      .title{
+      margin-bottom: 10px;
+      .title {
         line-height: 34px;
         font-weight: 500;
         font-size: 14px;
-        color: #1CF5FC;
+        color: #1cf5fc;
       }
-      .progress{
+      .progress {
         overflow: hidden;
-        .ratio{
+        .ratio {
           padding-bottom: 10px;
           overflow: hidden;
           font-weight: 400;
           font-size: 14px;
-          color: #FFFFFF;
-          .one{
+          color: #ffffff;
+          .one {
             width: 64px;
           }
-          .two{
-            flex:1;
+          .two {
+            flex: 1;
             height: 16px;
             border-radius: 2px;
             border: 1px solid rgba(223, 254, 255, 0.15);
             padding: 5px 9px;
             overflow: hidden;
-            .in{
+            .in {
               height: 100%;
               background: rgba(94, 167, 255, 0.3);
               border-radius: 2px;
             }
-            .zb{
-              background: linear-gradient(90deg, rgba(0, 246, 255, 0.3) 40%,rgba(0, 246, 255, 0.85) 80%, rgba(197, 253, 255, 1) 100%);
+            .zb {
+              background: linear-gradient(
+                90deg,
+                rgba(0, 246, 255, 0.3) 40%,
+                rgba(0, 246, 255, 0.85) 80%,
+                rgba(197, 253, 255, 1) 100%
+              );
               height: 100%;
               border-radius: 2px;
               position: relative;
-              &::after{
+              &::after {
                 content: '';
-                width:7px;
-                height:7px;
+                width: 7px;
+                height: 7px;
                 background: rgba(197, 253, 255, 1);
                 position: absolute;
-                right:0;
-                top:50%;
+                right: 0;
+                top: 50%;
                 transform: translateY(-50%);
                 border-radius: 50%;
                 box-shadow: 0 0 10px rgba(223, 254, 255, 1);
               }
             }
           }
-          .three{
-            width: 46px;
+          .three {
+            width: 60px;
             text-align: right;
+            // background: red;
           }
         }
       }
@@ -185,23 +297,23 @@
     margin: 5px auto;
     width: 430px;
     height: calc(100% - 60px);
-    .list{
+    .list {
       overflow: hidden;
       margin-bottom: 10px;
     }
-    .mydBox{
+    .mydBox {
       height: 32px;
       background: rgba(7, 86, 128, 0.6);
-      border: 1px solid #02B9C3;
-      box-shadow: 0 0 10px #02B9C3 inset;
+      border: 1px solid #02b9c3;
+      box-shadow: 0 0 10px #02b9c3 inset;
       font-weight: 400;
       font-size: 14px;
-      color: #FFFFFF;
+      color: #ffffff;
       border-left: 2px solid rgba(0, 242, 255, 1);
       padding-left: 35px;
       padding-right: 10px;
       position: relative;
-      &::before{
+      &::before {
         content: '';
         width: 12px;
         height: 10px;
@@ -212,43 +324,43 @@
         top: 50%;
         transform: translateY(-50%);
       }
-      &::after{
+      &::after {
         content: '';
         width: 27px;
         height: 1px;
-        background:rgba(0, 242, 255, 1);
+        background: rgba(0, 242, 255, 1);
         position: absolute;
         left: 50%;
         top: 50%;
-        transform: translate(-50%,-50%);
+        transform: translate(-50%, -50%);
       }
-      .right{
+      .right {
         font-weight: 500;
         font-size: 16px;
-        color: #FFED98;
+        color: #ffed98;
         font-family: DINPro;
-        span{
+        span {
           font-weight: 400;
           font-size: 14px;
-          color: #5FE889;
+          color: #5fe889;
           margin-left: 10px;
         }
       }
     }
-    .listBox{
+    .listBox {
       width: 32%;
       line-height: 32px;
-      background: linear-gradient(0deg, #102755 0%, #009DAB 0%, #034D66 100%);
+      background: linear-gradient(0deg, #102755 0%, #009dab 0%, #034d66 100%);
       border-radius: 4px;
-      border: 1px solid #1CF5FC;
+      border: 1px solid #1cf5fc;
       font-weight: 400;
       font-size: 14px;
-      color: #FFFFFF;
+      color: #ffffff;
       padding: 0 10px;
-      span{
+      span {
         font-weight: 500;
         font-size: 16px;
-        color: #12F9FF;
+        color: #12f9ff;
       }
     }
   }
diff --git a/src/views/oneMap/ConstructionEvaluation/jsdChart.vue b/src/views/oneMap/ConstructionEvaluation/jsdChart.vue
new file mode 100644
index 0000000..028c9b5
--- /dev/null
+++ b/src/views/oneMap/ConstructionEvaluation/jsdChart.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Array,
+    default: [],
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+let activeName = ref(null);
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+let colorLine = ['#00FCFF', '#FFF600', '#0072FF', '#cd780b', '#08EE8A', '#F5FF52', '#5377FF'];
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    color: colorLine,
+    tooltip: {
+      // trigger: "axis",
+      // axisPointer: {
+      //   type: "shadow",
+      //   label: {
+      //     show: true,
+
+      //   }
+      // },
+      formatter: function (prams) {
+        return prams.name + '：' + prams.value;
+      },
+    },
+    legend: {
+      triggerEvent: true,
+      bottom: nowSize(40, 1920),
+      x: 'center',
+      itemWidth: nowSize(18, 1920),
+      itemHeight: nowSize(10, 1920),
+      selectedMode: false,
+      itemGap: nowSize(10, 3328),
+      textStyle: {
+        color: '#FFFFFF',
+        fontSize: nowSize(14, 1920),
+      },
+    },
+    series: [
+      {
+        name: '统计',
+        type: 'pie',
+        roseType: 'radius',
+        radius: ['10%', '40%'],
+        center: ['50%', '40%'],
+        label: {
+          show: true,
+          position: 'outside',
+          formatter: function (params) {
+            const name = params.name;
+            const value = params.percent;
+            const index = params.dataIndex;
+            return [`{a${index}|${name}(${value}%)}`, `{hr${index}|}`].join('\n');
+          },
+          rich: getRich(),
+        },
+        labelLine: {
+          show: true,
+          length: 4,
+          length2: 4,
+        },
+        data: props.echartData,
+      },
+    ],
+  });
+  myChart.value.on('click', params => {
+    activeName.value = params.dataIndex;
+    // emit('updateKeyAi',activeName.value)
+    myChart.value.resize();
+  });
+}
+function getRich() {
+  let result = {};
+  colorLine.forEach((v, i) => {
+    result[`hr${i}`] = {
+      backgroundColor: colorLine[i],
+      borderRadius: 3,
+      width: 3,
+      height: 3,
+      padding: [3, 3, 0, -12],
+    };
+    result[`a${i}`] = {
+      padding: [-11, 6, -20, 6],
+      color: colorLine[i],
+      backgroundColor: 'transparent',
+      fontSize: 12,
+    };
+  });
+  return result;
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>

diff --git a/src/assets/images/Sponge_screen/HmbjZp.png b/src/assets/images/Sponge_screen/HmbjZp.png
new file mode 100644
index 0000000..c8057eb
--- /dev/null
+++ b/src/assets/images/Sponge_screen/HmbjZp.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue b/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue
new file mode 100644
index 0000000..ffb7088
--- /dev/null
+++ b/src/views/oneMap/ConstructionEvaluation/ChartNlfz.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        // label: {
+        //   show: true,
+        // }
+      },
+      formatter: function (params) {
+        return params[0].name + ' : ' + params[0].value + 'km²';
+      },
+    },
+    grid: {
+      top: nowSize(14, 1920),
+      bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
+      left: nowSize(100, 1920),
+      right: nowSize(20, 1920),
+    },
+    xAxis: {
+      type: 'value',
+      axisLine: {
+        show: false, //隐藏X轴轴线
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+      },
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: true, //隐藏或显示
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: props.echartData.xData,
+      name: '面积/km²',
+      nameLocation: 'start',
+      nameTextStyle: {
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+        padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: nowSize(13, 1920),
+      },
+      // splitArea: {
+      //   show: true,
+      //   areaStyle: {
+      //     color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
+      //   }
+      // }
+    },
+    series: [
+      {
+        type: 'bar',
+        name: '面积/km²',
+        data: props.echartData.data,
+        barWidth: nowSize(10, 1920),
+        zlevel: 1,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 167, 245,1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253,1)',
+            },
+          ]),
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: nowSize(10, 1920),
+        barGap: '-100%',
+        data: props.echartData.num,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: 'rgba(77, 149, 217, 0.15)',
+        },
+      },
+    ],
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue
new file mode 100644
index 0000000..be41f0d
--- /dev/null
+++ b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        // label: {
+        //   show: true,
+        // }
+      },
+      formatter: function (params) {
+        return params[0].name + ' : ' + params[0].value + '万立方米';
+      },
+    },
+    grid: {
+      top: nowSize(14, 1920),
+      bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
+      left: nowSize(100, 1920),
+      right: nowSize(20, 1920),
+    },
+    xAxis: {
+      type: 'value',
+      axisLine: {
+        show: false, //隐藏X轴轴线
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+      },
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: true, //隐藏或显示
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: props.echartData.xData,
+      name: '万立方米',
+      nameLocation: 'start',
+      nameTextStyle: {
+        color: '#39F7FF',
+        fontSize: nowSize(14, 1920),
+        padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: nowSize(13, 1920),
+      },
+      // splitArea: {
+      //   show: true,
+      //   areaStyle: {
+      //     color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
+      //   }
+      // }
+    },
+    series: [
+      {
+        type: 'bar',
+        name: '万立方米',
+        data: props.echartData.data,
+        barWidth: nowSize(10, 1920),
+        zlevel: 1,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 167, 245,1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 238, 253,1)',
+            },
+          ]),
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: nowSize(10, 1920),
+        barGap: '-100%',
+        data: props.echartData.num,
+        itemStyle: {
+          barBorderRadius: nowSize(5, 1920),
+          color: 'rgba(77, 149, 217, 0.15)',
+        },
+      },
+    ],
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 3ee47c4..7ff988b 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -36,8 +36,12 @@
             </div>
           </div>
           <div class="specifics" v-if="Flcname == '城市防洪'"></div>
-          <div class="nlfz" v-if="Flcname == '内涝防治'"></div>
-          <div class="jsdxc" v-if="Flcname == '积水点消除'"></div>
+          <div class="nlfz" v-if="Flcname == '内涝防治'">
+            <ChartNlfz :echartData="ryData" :refresh="ryRefresh" />
+          </div>
+          <div class="jsdxc" v-if="Flcname == '积水点消除'">
+            <jsdChart :echartData="aiList" :refresh="ryRefresh1" />
+          </div>
         </div>
 
         <!-- 雨污水资源利用 -->
@@ -58,14 +62,24 @@
             </div>
           </div>
           <div class="utilize" v-if="Ywcname == '雨水资源化利用'"></div>
-          <div class="zsslyl" v-if="Ywcname == '再生水利用率'"></div>
+          <div class="zsslyl" v-if="Ywcname == '再生水利用率'">
+            <ChartZsslyl :echartData="zssList" :refresh="ryRefresh2" />
+          </div>
+          <div class="BottomLook flex" v-if="Ywcname == '再生水利用率'">
+            <div class="ConstrucBot flex" v-for="(item, index) in YwsList">
+              <div class="ConstruBox flex flex-justcontent-spacebetween flex-align-center">
+                <div class="left">{{ item.name }}</div>
+                <div class="right">{{ item.value }}</div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="topVehicl flex">
+    <div class="topVehicl flex" @click="showSewageFectory">
       <div class="icon"></div>
       <div class="name">污水收集处理</div>
     </div>
@@ -75,12 +89,27 @@
 
 <script setup>
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+import ChartNlfz from './ChartNlfz.vue'; //内涝防治
+import jsdChart from './jsdChart.vue'; //积水点
+
+import ChartZsslyl from './ChartZsslyl.vue'; //再生水利用率
+
 import bus from '@/bus';
+const ryData = ref({});
+const ryRefresh = ref('');
+const aiList = ref([]);
+const ryRefresh1 = ref('');
+const zssList = ref({});
+const ryRefresh2 = ref('');
 const categoryList = ref([
   { name: '2023', value: 1 },
   { name: '2024', value: 2 },
   { name: '2025', value: 3 },
 ]);
+const YwsList = ref([
+  { name: '合计', value: '899.55万m³' },
+  { name: '利用率为', value: '23.05%' },
+]);
 const FlList = ref([
   { name: '城市防洪', value: 1 },
   { name: '内涝防治', value: 2 },
@@ -103,6 +132,52 @@
 function Ywclick(val) {
   Ywcname.value = val.name;
 }
+
+// 内涝防治
+function getData() {
+  let obj = {
+    xData: ['濠河', '黄梅港', '王家河', '松杨湖', '北港河', '芭蕉湖', '南津河', '东风湖'],
+    data: [39, 59, 23, 39, 60, 45, 52, 62],
+    num: [],
+  };
+  let max = JSON.parse(JSON.stringify(obj.data));
+  let one = max.sort((a, b) => b - a)[0];
+  max.forEach(i => {
+    obj.num.push(one);
+  });
+  ryData.value = obj;
+  ryRefresh.value = Math.random();
+}
+
+// 内涝防治
+async function getNlfz() {
+  let obj = [
+    { name: '源头减排', value: 10 },
+    { name: '其他', value: 32 },
+    { name: '过程控制', value: 20 },
+    { name: '末端治理', value: 38 },
+  ];
+
+  aiList.value = obj;
+  ryRefresh1.value = Math.random();
+}
+
+// 再生水利用率
+function geZssLyl() {
+  let obj = {
+    xData: ['工业建筑', '城市杂用量', '绿化浇灌', '生态及再生水'],
+    data: [160, 20, 23, 700, 60, 45, 52, 95],
+    num: [],
+  };
+  let max = JSON.parse(JSON.stringify(obj.data));
+  let one = max.sort((a, b) => b - a)[0];
+  max.forEach(i => {
+    obj.num.push(one);
+  });
+  zssList.value = obj;
+  ryRefresh2.value = Math.random();
+}
+
 function showSewageFectory() {
   newfiberMapbox.map.easeTo({
     center: [109.528, 36.626],
@@ -111,6 +186,12 @@
   });
   bus.emit('SetLayerShow', ['污水处理厂']);
 }
+
+onMounted(() => {
+  getData();
+  getNlfz();
+  geZssLyl();
+});
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
 });
@@ -212,22 +293,22 @@
           width: 420px;
           height: calc(100% - 40px);
           margin: 5px auto;
-          background: url('@/assets/images/Sponge_screen/nlfz.png') no-repeat;
-          background-size: 100% 100%;
+          // background: url('@/assets/images/Sponge_screen/nlfz.png') no-repeat;
+          // background-size: 100% 100%;
         }
         .jsdxc {
           width: 420px;
           height: calc(100% - 40px);
           margin: 5px auto;
-          background: url('@/assets/images/Sponge_screen/jsdxc.png') no-repeat;
-          background-size: 100% 100%;
+          // background: url('@/assets/images/Sponge_screen/jsdxc.png') no-repeat;
+          // background-size: 100% 100%;
         }
       }
       .YwBox {
         width: 430px;
         height: 40%;
         margin: 5px auto;
-
+        // background: yellow;
         .topYwBox {
           font-family: Source Han Sans CN;
           font-weight: bold;
@@ -282,10 +363,42 @@
         }
         .zsslyl {
           width: 420px;
-          height: calc(100% - 40px);
+          height: calc(100% - 80px);
           margin: 5px auto;
-          background: url('@/assets/images/Sponge_screen/zss.png') no-repeat;
-          background-size: 100% 100%;
+          // background: red;
+          // background: url('@/assets/images/Sponge_screen/zss.png') no-repeat;
+          // background-size: 100% 100%;
+        }
+        .BottomLook {
+          margin: 5px auto;
+          width: 430px;
+          height: 35px;
+          // background: blue;
+          .ConstrucBot {
+            width: 205px;
+            height: 32px;
+            background: url('@/assets/images/Sponge_screen/HmbjZp.png') no-repeat;
+            background-size: 100% 100%;
+            margin-left: 7px;
+            .ConstruBox {
+              position: relative;
+              left: 30px;
+              width: 160px;
+              // background: red;
+              .left {
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+                font-size: 14px;
+                color: #ffffff;
+              }
+              .right {
+                font-family: Source Han Sans CN;
+                font-weight: 500;
+                font-size: 16px;
+                color: #ffed98;
+              }
+            }
+          }
         }
       }
     }
@@ -303,6 +416,7 @@
     align-items: center;
     height: 30px;
     // background: teal;
+    cursor: pointer;
     .icon {
       position: relative;
       top: -1px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index f72791f..9e83360 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -19,18 +19,28 @@
     <!-- 2023 -->
     <div class="managementBox">
       <!-- 循环 -->
-      <div class="listBox">
-        <div class="title">立法及长效机制</div>
+      <div class="listBox" v-for="(item, v) in obj">
+        <div class="title">{{ item.name }}</div>
         <div class="progress">
           <div class="ratio flex flex-align-center">
             <div class="one">年度进度</div>
-            <div class="two"><div class="in"><div class="zb" :style="{width:`${30}%`}"></div></div></div>
-            <div class="three">70%</div>
+            <div class="two">
+              <div class="in"><div class="zb" :style="{ width: `${item.pro1}%` }"></div></div>
+            </div>
+            <div class="three">
+              {{ item.pro3 }}
+              {{ item.pro1 }}%
+            </div>
           </div>
           <div class="ratio flex flex-align-center">
             <div class="one">总体进度</div>
-            <div class="two"><div class="in"><div class="zb" :style="{width:`${60}%`}"></div></div></div>
-            <div class="three">70%</div>
+            <div class="two">
+              <div class="in"><div class="zb" :style="{ width: `${item.pro2}%` }"></div></div>
+            </div>
+            <div class="three">
+              {{ item.pro4 }}
+              {{ item.pro2 }}%
+            </div>
           </div>
         </div>
       </div>
@@ -43,11 +53,11 @@
     </div>
     <div class="mydContent">
       <div class="list flex flex-justcontent-spacebetween">
-        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center" style="width:49%">
+        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center" style="width: 49%">
           <div class="left">目标</div>
           <div class="right">96.17%</div>
         </div>
-        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center" style="width:49%">
+        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center" style="width: 49%">
           <div class="left">结果</div>
           <div class="right">96.17%</div>
         </div>
@@ -74,10 +84,106 @@
   { name: '2024', value: 2 },
   { name: '2025', value: 3 },
 ]);
+const obj = ref([
+  { name: '立法及长效机制', pro1: '70', pro2: '30' },
+  { name: '立法及长效机制', pro1: '88', pro2: '45' },
+  {
+    name: '海绵城市建设的全域性',
+    pro1: '75',
+    pro2: '35',
+  },
+  {
+    name: '规划建设管控制度',
+    pro1: '70',
+    pro2: '30',
+  },
+
+  { name: '投融资机制', pro1: '70', pro2: '30' },
+  { name: '培训', pro1: '70', pro2: '30', pro3: '3/4', pro4: '6/10' },
+  {
+    name: '宣传与公众参与',
+    pro1: '85',
+    pro2: '40',
+  },
+]);
 const activedname = ref('2023');
 // 点击事件
 function categoryclick(val) {
   activedname.value = val.name;
+  console.log(activedname.value, ' activedname.value');
+  if (activedname.value == '2023') {
+    obj.value = [
+      { name: '立法及长效机制', pro1: '70', pro2: '30' },
+      { name: '立法及长效机制', pro1: '88', pro2: '45' },
+      {
+        name: '海绵城市建设的全域性',
+        pro1: '75',
+        pro2: '35',
+      },
+      {
+        name: '规划建设管控制度',
+        pro1: '70',
+        pro2: '30',
+      },
+
+      { name: '投融资机制', pro1: '70', pro2: '30' },
+      { name: '培训', pro1: '70', pro2: '30', pro3: '3/4', pro4: '6/10' },
+      {
+        name: '宣传与公众参与',
+        pro1: '85',
+        pro2: '40',
+      },
+    ];
+    console.log(obj.value, '2023');
+  } else if (activedname.value == '2024') {
+    obj.value = [
+      { name: '立法及长效机制', pro1: '70', pro2: '30' },
+      { name: '立法及长效机制', pro1: '88', pro2: '45' },
+      {
+        name: '海绵城市建设的全域性',
+        pro1: '75',
+        pro2: '35',
+      },
+      {
+        name: '规划建设管控制度',
+        pro1: '70',
+        pro2: '30',
+      },
+
+      { name: '投融资机制', pro1: '70', pro2: '30' },
+      { name: '培训', pro1: '70', pro2: '60', pro3: '3/4', pro4: '6/10' },
+      {
+        name: '宣传与公众参与',
+        pro1: '85',
+        pro2: '40',
+      },
+    ];
+    console.log(obj.value, '2024');
+  } else if (activedname.value == '2025') {
+    obj.value = [
+      { name: '立法及长效机制', pro1: '100', pro2: '100' },
+      { name: '立法及长效机制', pro1: '100', pro2: '100' },
+      {
+        name: '海绵城市建设的全域性',
+        pro1: '100',
+        pro2: '100',
+      },
+      {
+        name: '规划建设管控制度',
+        pro1: '100',
+        pro2: '100',
+      },
+
+      { name: '投融资机制', pro1: '100', pro2: '100' },
+      { name: '培训', pro1: '100', pro2: '100', pro3: '3/3', pro4: '10/10' },
+      {
+        name: '宣传与公众参与',
+        pro1: '100',
+        pro2: '100',
+      },
+    ];
+    console.log(obj.value, '2025');
+  }
 }
 </script>
 
@@ -88,8 +194,8 @@
 
   .subRightBox {
     width: 450px;
-    margin:10px auto;
-    height:35px;
+    margin: 10px auto;
+    height: 35px;
     display: flex;
     cursor: pointer;
     font-size: 14px;
@@ -114,63 +220,69 @@
     padding: 0 10px;
     height: calc(100% - 95px);
     overflow: auto;
-    .listBox{
-      background:rgba(7, 86, 128, 0.6);
-      border: 1px solid #1CF5FC;
+    .listBox {
+      background: rgba(7, 86, 128, 0.6);
+      border: 1px solid #1cf5fc;
       padding: 0 10px;
       overflow: hidden;
-      margin-bottom:10px;
-      .title{
+      margin-bottom: 10px;
+      .title {
         line-height: 34px;
         font-weight: 500;
         font-size: 14px;
-        color: #1CF5FC;
+        color: #1cf5fc;
       }
-      .progress{
+      .progress {
         overflow: hidden;
-        .ratio{
+        .ratio {
           padding-bottom: 10px;
           overflow: hidden;
           font-weight: 400;
           font-size: 14px;
-          color: #FFFFFF;
-          .one{
+          color: #ffffff;
+          .one {
             width: 64px;
           }
-          .two{
-            flex:1;
+          .two {
+            flex: 1;
             height: 16px;
             border-radius: 2px;
             border: 1px solid rgba(223, 254, 255, 0.15);
             padding: 5px 9px;
             overflow: hidden;
-            .in{
+            .in {
               height: 100%;
               background: rgba(94, 167, 255, 0.3);
               border-radius: 2px;
             }
-            .zb{
-              background: linear-gradient(90deg, rgba(0, 246, 255, 0.3) 40%,rgba(0, 246, 255, 0.85) 80%, rgba(197, 253, 255, 1) 100%);
+            .zb {
+              background: linear-gradient(
+                90deg,
+                rgba(0, 246, 255, 0.3) 40%,
+                rgba(0, 246, 255, 0.85) 80%,
+                rgba(197, 253, 255, 1) 100%
+              );
               height: 100%;
               border-radius: 2px;
               position: relative;
-              &::after{
+              &::after {
                 content: '';
-                width:7px;
-                height:7px;
+                width: 7px;
+                height: 7px;
                 background: rgba(197, 253, 255, 1);
                 position: absolute;
-                right:0;
-                top:50%;
+                right: 0;
+                top: 50%;
                 transform: translateY(-50%);
                 border-radius: 50%;
                 box-shadow: 0 0 10px rgba(223, 254, 255, 1);
               }
             }
           }
-          .three{
-            width: 46px;
+          .three {
+            width: 60px;
             text-align: right;
+            // background: red;
           }
         }
       }
@@ -185,23 +297,23 @@
     margin: 5px auto;
     width: 430px;
     height: calc(100% - 60px);
-    .list{
+    .list {
       overflow: hidden;
       margin-bottom: 10px;
     }
-    .mydBox{
+    .mydBox {
       height: 32px;
       background: rgba(7, 86, 128, 0.6);
-      border: 1px solid #02B9C3;
-      box-shadow: 0 0 10px #02B9C3 inset;
+      border: 1px solid #02b9c3;
+      box-shadow: 0 0 10px #02b9c3 inset;
       font-weight: 400;
       font-size: 14px;
-      color: #FFFFFF;
+      color: #ffffff;
       border-left: 2px solid rgba(0, 242, 255, 1);
       padding-left: 35px;
       padding-right: 10px;
       position: relative;
-      &::before{
+      &::before {
         content: '';
         width: 12px;
         height: 10px;
@@ -212,43 +324,43 @@
         top: 50%;
         transform: translateY(-50%);
       }
-      &::after{
+      &::after {
         content: '';
         width: 27px;
         height: 1px;
-        background:rgba(0, 242, 255, 1);
+        background: rgba(0, 242, 255, 1);
         position: absolute;
         left: 50%;
         top: 50%;
-        transform: translate(-50%,-50%);
+        transform: translate(-50%, -50%);
       }
-      .right{
+      .right {
         font-weight: 500;
         font-size: 16px;
-        color: #FFED98;
+        color: #ffed98;
         font-family: DINPro;
-        span{
+        span {
           font-weight: 400;
           font-size: 14px;
-          color: #5FE889;
+          color: #5fe889;
           margin-left: 10px;
         }
       }
     }
-    .listBox{
+    .listBox {
       width: 32%;
       line-height: 32px;
-      background: linear-gradient(0deg, #102755 0%, #009DAB 0%, #034D66 100%);
+      background: linear-gradient(0deg, #102755 0%, #009dab 0%, #034d66 100%);
       border-radius: 4px;
-      border: 1px solid #1CF5FC;
+      border: 1px solid #1cf5fc;
       font-weight: 400;
       font-size: 14px;
-      color: #FFFFFF;
+      color: #ffffff;
       padding: 0 10px;
-      span{
+      span {
         font-weight: 500;
         font-size: 16px;
-        color: #12F9FF;
+        color: #12f9ff;
       }
     }
   }
diff --git a/src/views/oneMap/ConstructionEvaluation/jsdChart.vue b/src/views/oneMap/ConstructionEvaluation/jsdChart.vue
new file mode 100644
index 0000000..028c9b5
--- /dev/null
+++ b/src/views/oneMap/ConstructionEvaluation/jsdChart.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Array,
+    default: [],
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+let activeName = ref(null);
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+let colorLine = ['#00FCFF', '#FFF600', '#0072FF', '#cd780b', '#08EE8A', '#F5FF52', '#5377FF'];
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    color: colorLine,
+    tooltip: {
+      // trigger: "axis",
+      // axisPointer: {
+      //   type: "shadow",
+      //   label: {
+      //     show: true,
+
+      //   }
+      // },
+      formatter: function (prams) {
+        return prams.name + '：' + prams.value;
+      },
+    },
+    legend: {
+      triggerEvent: true,
+      bottom: nowSize(40, 1920),
+      x: 'center',
+      itemWidth: nowSize(18, 1920),
+      itemHeight: nowSize(10, 1920),
+      selectedMode: false,
+      itemGap: nowSize(10, 3328),
+      textStyle: {
+        color: '#FFFFFF',
+        fontSize: nowSize(14, 1920),
+      },
+    },
+    series: [
+      {
+        name: '统计',
+        type: 'pie',
+        roseType: 'radius',
+        radius: ['10%', '40%'],
+        center: ['50%', '40%'],
+        label: {
+          show: true,
+          position: 'outside',
+          formatter: function (params) {
+            const name = params.name;
+            const value = params.percent;
+            const index = params.dataIndex;
+            return [`{a${index}|${name}(${value}%)}`, `{hr${index}|}`].join('\n');
+          },
+          rich: getRich(),
+        },
+        labelLine: {
+          show: true,
+          length: 4,
+          length2: 4,
+        },
+        data: props.echartData,
+      },
+    ],
+  });
+  myChart.value.on('click', params => {
+    activeName.value = params.dataIndex;
+    // emit('updateKeyAi',activeName.value)
+    myChart.value.resize();
+  });
+}
+function getRich() {
+  let result = {};
+  colorLine.forEach((v, i) => {
+    result[`hr${i}`] = {
+      backgroundColor: colorLine[i],
+      borderRadius: 3,
+      width: 3,
+      height: 3,
+      padding: [3, 3, 0, -12],
+    };
+    result[`a${i}`] = {
+      padding: [-11, 6, -20, 6],
+      color: colorLine[i],
+      backgroundColor: 'transparent',
+      fontSize: 12,
+    };
+  });
+  return result;
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/components/ZHHM_JSPG.vue b/src/views/oneMap/components/ZHHM_JSPG.vue
index df2c85f..33d24f8 100644
--- a/src/views/oneMap/components/ZHHM_JSPG.vue
+++ b/src/views/oneMap/components/ZHHM_JSPG.vue
@@ -30,9 +30,9 @@
 <script setup name="ZHHM_JSPG">
 import { ref, reactive, toRefs, onMounted, defineProps, defineEmits } from 'vue';
 import JSPGLeftBox from '@/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue';
+import bus from '@/bus';
 import JSPGRightBox from '@/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue';
 const showPanel = ref(true); //面板展开收起
-
 // 面板内容展开收起控制
 const props = defineProps({
   showPanel: {