From 8b3ea08fc9703bafcd15f540e623cc8a36810b27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=85=B4=E5=87=AF?= <2448379534@qq.com>
Date: Fri, 24 Apr 2026 17:46:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A1=AB=E6=8A=A5-=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E8=AE=B0=E5=BD=95=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/shengPiJiLu/index.ts         |  27 ++
 .../modules/EnvironmentalQuality/index.vue    | 343 ++++++++++++++
 .../qixidibaohugongzuokaizhanQK/index.vue     | 124 +++++
 .../modules/shuizhijiancegongzuoQK/index.vue  |   2 +-
 frontend/src/views/qiXiDi/shengTaiDiBaoHu.vue |  26 +-
 .../views/shuJuTianBao/approvalLogSearch.vue  |  66 +++
 .../views/shuJuTianBao/changeLogSearch.vue    |  66 +++
 .../src/views/shuJuTianBao/shengPiJiLu.vue    | 439 ++++++++++++++++++
 .../views/shuJuTianBao/shengPiJiLuSearch.vue  |  85 ++++
 .../shuiHuanJingZhiLiangZhuangKuang.vue       |   4 +-
 10 files changed, 1176 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/api/shengPiJiLu/index.ts
 create mode 100644 frontend/src/modules/EnvironmentalQuality/index.vue
 create mode 100644 frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
 create mode 100644 frontend/src/views/shuJuTianBao/approvalLogSearch.vue
 create mode 100644 frontend/src/views/shuJuTianBao/changeLogSearch.vue
 create mode 100644 frontend/src/views/shuJuTianBao/shengPiJiLu.vue
 create mode 100644 frontend/src/views/shuJuTianBao/shengPiJiLuSearch.vue

diff --git a/frontend/src/api/shengPiJiLu/index.ts b/frontend/src/api/shengPiJiLu/index.ts
new file mode 100644
index 0000000..31890e6
--- /dev/null
+++ b/frontend/src/api/shengPiJiLu/index.ts
@@ -0,0 +1,27 @@
+import request from '@/utils/request';
+
+export function queryPageList(queryParams:any){
+  return request({
+    url: '/data/approvalMain/queryPageList' ,
+    method: 'post',
+    data:queryParams
+  });
+}
+
+// 查询审批操作日志列表
+export function getApprovalLogList(params: any) {
+  return request({
+    url: '/data/approvalLog/queryPageList',
+    method: 'post',
+    data: params
+  });
+}
+
+// 查询审批变更记录列表
+export function getApprovalChangeLogList(params: any) {
+  return request({
+    url: '/data/approvalChangeLog/queryPageList',
+    method: 'post',
+    data: params
+  });
+}
diff --git a/frontend/src/modules/EnvironmentalQuality/index.vue b/frontend/src/modules/EnvironmentalQuality/index.vue
new file mode 100644
index 0000000..79d2c83
--- /dev/null
+++ b/frontend/src/modules/EnvironmentalQuality/index.vue
@@ -0,0 +1,343 @@
+<!-- SidePanelItem.vue -->
+<template>
+    <SidePanelItem title="地表水水质达标率">
+        <div class="body_item">
+            <div class="tabs_all">
+                <div :class="tabs == 1 ? 'zhong_tabs' : 'no_tabs'" @click="handleTabChange(1)">自建水质站</div>
+                <div :class="tabs == 2 ? 'zhong_tabs' : 'no_tabs'" @click="handleTabChange(2)">国家水质站</div>
+            </div>
+            <div v-show="tabs == 1 || tabs == 2" class="tabs_body">
+                <div ref="chartRef" class="chart-container"></div>
+            </div>
+        </div>
+
+    </SidePanelItem>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import * as echarts from 'echarts';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+
+// 定义组件名（便于调试和递归）
+defineOptions({
+    name: 'EnvironmentalQuality'
+});
+
+const tabs = ref(1);
+const chartRef = ref<HTMLElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+
+// 静态数据 - 自建水质站（第1页）
+const selfBuiltData = [
+    { name: '雅砻江\n干流', current: 99, lastYear: 100 },
+    { name: '大渡河\n干流', current: 99, lastYear: 100 },
+    { name: '黄河上游\n干流', current: 99, lastYear: 100 }
+];
+
+// 静态数据 - 国家水质站（第2页）
+const nationalData = [
+    { name: '长江\n干流', current: 98, lastYear: 99 },
+    { name: '珠江\n干流', current: 97, lastYear: 98 },
+    { name: '淮河\n干流', current: 96, lastYear: 97 }
+];
+
+// 根据tab获取对应数据
+const getCurrentData = () => {
+    return tabs.value === 1 ? selfBuiltData : nationalData;
+};
+
+// 处理tab切换
+const handleTabChange = (tab: number) => {
+    tabs.value = tab;
+};
+
+// 监听tabs变化，处理图表刷新
+watch(tabs, (newVal) => {
+    if (newVal === 1 || newVal === 2) {
+        nextTick(() => {
+            setTimeout(() => {
+                if (!chartInstance) {
+                    initChart();
+                } else {
+                    // 更新图表数据
+                    updateChartData();
+                }
+            }, 50);
+        });
+    }
+});
+
+// 初始化图表
+const initChart = () => {
+    if (!chartRef.value) return;
+    
+    chartInstance = echarts.init(chartRef.value);
+    
+    const currentData = getCurrentData();
+    
+    const option = {
+        // 图例配置
+        legend: {
+            top: 10,
+            itemWidth: 18,
+            itemHeight: 12,
+            itemGap: 20,
+            icon: 'roundRect',
+            data: [
+                { name: '2026-04 月度', itemStyle: { color: '#4A8BC2' } },
+                { name: '去年同期', itemStyle: { color: '#9B59B6' } }
+            ],
+            textStyle: {
+                fontSize: 12,
+                color: '#333'
+            }
+        },
+        
+        // 提示框配置
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: 'rgba(200, 200, 200, 0.2)'
+                },
+                label: {
+                    show: false
+                }
+            },
+            backgroundColor: '#fff',
+            borderColor: '#e8e8e8',
+            borderWidth: 1,
+            padding: 12,
+            textStyle: {
+                color: '#333',
+                fontSize: 12
+            },
+            formatter: (params: any) => {
+                const name = params[0].name.replace('\n', '');
+                let result = `<div style="font-weight: bold; margin-bottom: 8px;">${name}</div>`;
+                params.forEach((item: any) => {
+                    result += `<div style="display: flex; align-items: center; margin-bottom: 4px;">
+                        <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: ${item.color}; margin-right: 8px;"></span>
+                        <span>${item.seriesName}:</span>
+                        <span style="margin-left: auto; font-weight: bold;">${item.value} %</span>
+                    </div>`;
+                });
+                return result;
+            }
+        },
+        
+        // 网格配置
+        grid: {
+            left: 60,
+            right: 10,
+            top: 60,
+            bottom: 50
+        },
+        
+        // X轴配置
+        xAxis: {
+            type: 'value',
+            min: 0,
+            max: 100,
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#e8e8e8',
+                    type: 'solid'
+                }
+            },
+            axisLabel: {
+                fontSize: 12,
+                color: '#666'
+            }
+        },
+        
+        // Y轴配置
+        yAxis: {
+            type: 'category',
+            data: currentData.map(item => item.name),
+            inverse: true,
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#333',
+                    width: 1
+                }
+            },
+            axisTick: {
+                show: true,
+                length: 4,
+                lineStyle: {
+                    color: '#333',
+                    width: 1
+                }
+            },
+            axisLabel: {
+                fontSize: 12,
+                color: '#333',
+                margin: 12
+            },
+            // 在Y轴底部添加"达标率(%)"标签
+            name: '达标率(%)',
+            nameLocation: 'end',
+            nameGap: 20,
+            nameTextStyle: {
+                fontSize: 12,
+                color: '#666',
+                align: 'left'
+            }
+        },
+        
+        // 系列配置
+        series: [
+            {
+                name: '2026-04 月度',
+                type: 'bar',
+                data: currentData.map(item => item.current),
+                barWidth: 10,
+                barGap: '20%',
+                itemStyle: {
+                    color: '#4A8BC2',
+                    borderRadius: [0, 3, 3, 0]
+                },
+                markArea: {
+                    silent: true,
+                    itemStyle: {
+                        color: 'rgba(240, 245, 250, 0.5)'
+                    },
+                    data: [
+                        [{ yAxis: 1 }, { yAxis: 2 }]
+                    ]
+                }
+            },
+            {
+                name: '去年同期',
+                type: 'bar',
+                data: currentData.map(item => item.lastYear),
+                barWidth: 10,
+                barGap: '20%',
+                itemStyle: {
+                    color: '#9B59B6',
+                    borderRadius: [0, 3, 3, 0]
+                }
+            }
+        ]
+    };
+    
+    chartInstance.setOption(option);
+};
+
+// 更新图表数据
+const updateChartData = () => {
+    if (!chartInstance) return;
+    
+    const currentData = getCurrentData();
+    
+    chartInstance.setOption({
+        yAxis: {
+            data: currentData.map(item => item.name)
+        },
+        series: [
+            {
+                data: currentData.map(item => item.current)
+            },
+            {
+                data: currentData.map(item => item.lastYear)
+            }
+        ]
+    });
+    
+    // 强制重新计算尺寸
+    chartInstance.resize();
+};
+
+// 页面加载时执行
+onMounted(() => {
+    // 延迟初始化，确保容器已渲染
+    setTimeout(() => {
+        initChart();
+    }, 100);
+    
+    // 监听窗口resize
+    window.addEventListener('resize', () => {
+        chartInstance?.resize();
+    });
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+    chartInstance?.dispose();
+    window.removeEventListener('resize', () => {
+        chartInstance?.resize();
+    });
+});
+</script>
+
+<style lang="scss" scoped>
+.body_item {
+    width: 100%;
+    height: 600px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .tabs_all {
+        width: 28px;
+        height: 600px;
+        box-sizing: border-box;
+        border: 2px solid #2f6b98;
+        border-radius: 5px;
+
+        .zhong_tabs {
+            width: 100%;
+            height: 50%;
+            background: #2f6b98;
+            color: #fff;
+            font-size: 14px;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            text-shadow: 0 0 .25px currentcolor;
+            cursor: pointer;
+        }
+
+        .no_tabs {
+            width: 100%;
+            height: 50%;
+            font-size: 14px;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            cursor: pointer;
+        }
+         .no_tabs:hover {
+          color: #40a9ff;
+        }
+    }
+    
+    .tabs_body {
+        width: 368px;
+        height: 600px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        .chart-container {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue b/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
new file mode 100644
index 0000000..087385e
--- /dev/null
+++ b/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
@@ -0,0 +1,124 @@
+<!-- SidePanelItem.vue -->
+<template>
+    <SidePanelItem title="栖息地保护工作开展情况">
+        <div class="facility-grid">
+            <div v-for="facility in facilities" :key="facility.name" class="facility-card">
+                <div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
+                    <div class="facility-icon">
+                        <i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
+                    </div>
+                </div>
+
+                <div class="facility-info">
+                    <div class="facility-name">{{ facility.name }}</div>
+                    <div style="font-size: 16px;"> <span class="facility-count">{{ facility.count
+                            }}</span><span>个</span></div>
+                </div>
+            </div>
+        </div>
+    </SidePanelItem>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+
+// 定义组件名（便于调试和递归）
+defineOptions({
+    name: 'qixidibaohugongzuokaizhanQK'
+});
+
+// 设施数据
+const facilities = ref([
+    {
+        name: '栖息地',
+        count: 56,
+        icon: 'icon iconfont icon-qixidi'
+    },
+    {
+        name: '水温监测',
+        count: 1722,
+        icon: 'icon iconfont icon-diwenshuijianhuan'
+    },
+    {
+        name: '水文监测',
+        count: 135,
+        icon: 'icon iconfont icon-shuiwen-line'
+    },
+     {
+        name: '视频监控',
+        count: 135,
+        icon: 'icon iconfont icon-shipinjiankongshebei'
+    },
+
+]);
+
+// 页面加载时执行
+onMounted(() => {
+    // 延迟初始化，确保容器已渲染
+
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+
+});
+</script>
+
+<style lang="scss" scoped>
+.facility-grid {
+    width: 406px;
+    flex-flow: wrap;
+    display: flex;
+    justify-content: space-between;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+.facility-card {
+    width: 200px;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 4px 0px;
+    background: #fff;
+    border: 1px solid #e8e8e8;
+    border-radius: 2px;
+    transition: all 0.3s;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+
+.facility-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    // margin-right: 8px;
+    background: #5389b5;
+    border-radius: 50%;
+
+    .anticon {
+        font-size: 24px;
+        color: #fff;
+    }
+}
+
+.facility-info {
+    flex: 1;
+}
+
+.facility-name {
+    font-size: 16px;
+    color: #333;
+    // margin-bottom: 4px;
+    // font-weight: 500;
+}
+
+.facility-count {
+    font-size: 18px;
+    color: #2f6b98;
+    // font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/modules/shuizhijiancegongzuoQK/index.vue b/frontend/src/modules/shuizhijiancegongzuoQK/index.vue
index c79e44d..6d46b9f 100644
--- a/frontend/src/modules/shuizhijiancegongzuoQK/index.vue
+++ b/frontend/src/modules/shuizhijiancegongzuoQK/index.vue
@@ -1,6 +1,6 @@
 <!-- SidePanelItem.vue -->
 <template>
-        <SidePanelItem title="环保设施情况">
+        <SidePanelItem title="水质监测工作开展情况">
             <div class="facility-grid" >
                 <div v-for="facility in facilities" :key="facility.name" class="facility-card">
                     <div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
diff --git a/frontend/src/views/qiXiDi/shengTaiDiBaoHu.vue b/frontend/src/views/qiXiDi/shengTaiDiBaoHu.vue
index 246ea9e..1ceae18 100644
--- a/frontend/src/views/qiXiDi/shengTaiDiBaoHu.vue
+++ b/frontend/src/views/qiXiDi/shengTaiDiBaoHu.vue
@@ -1,5 +1,25 @@
+<script setup lang="ts">
+import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
+import RightDrawer from "@/components/RightDrawer/index.vue";
+import QiXiDiBaoHuGongZuoKaiZhan from "@/modules/qixidibaohugongzuokaizhanQK/index.vue"
+// import QixidijchuXx from "@/modules/qixidijchuXx"
+// import QiXiDiShuiWenBianHua from "@/modules/qixidishuiwenbianhua"
+// import QiXiDiLiuLiangBianHua from "@/modules/qixidiliuliangbianhua"
+</script>
+
 <template>
-  <div>
-    <h2>栖息地</h2>
+  <div class="moduleContent">
+    <div class="leftContent">
+      <JidiSelectorMod />
+    </div>
+    <div class="rightContent">
+      <RightDrawer>
+        <QiXiDiBaoHuGongZuoKaiZhan />
+        <!-- <QiXiDiShuiWenBianHua /> -->
+        <!-- <QiXiDiLiuLiangBianHua /> -->
+        <!-- <QixidijchuXx /> -->
+      </RightDrawer>
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/shuJuTianBao/approvalLogSearch.vue b/frontend/src/views/shuJuTianBao/approvalLogSearch.vue
new file mode 100644
index 0000000..b42fc0d
--- /dev/null
+++ b/frontend/src/views/shuJuTianBao/approvalLogSearch.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="approval-log-search">
+        <BasicSearch ref="basicSearchRef" :searchList="searchList" :initial-values="initSearchData"
+            @finish="onSearchFinish" @values-change="onValuesChange" @reset="handleReset">
+        </BasicSearch>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from "vue";
+import BasicSearch from "@/components/BasicSearch/index.vue";
+
+// --- Props & Emits ---
+interface Props {
+    actionTypeDict: any[];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+    (e: "reset", values: any): void;
+    (e: "searchFinish", values: any): void;
+}>();
+
+
+// 模拟 initSearchData
+const initSearchData = {
+  action: '',
+};
+
+const searchData = ref<any>({ ...initSearchData });
+
+const searchList: any = computed(() => [
+    {
+        type: "Select",
+        name: "action",
+        label: "操作类型",
+        fieldProps: {
+            allowClear: true,
+        },
+        options: props.actionTypeDict || [],
+    },
+]);
+
+// --- Methods ---
+
+// 2. 搜索表单逻辑
+const onSearchFinish = (values: any) => {
+    console.log(values);
+    emit("searchFinish", values);
+};
+
+const handleReset = () => {
+    emit("reset", initSearchData);
+};
+
+const onValuesChange = (changedValues: any, allValues: any) => {
+    // 同步更新本地 searchData，以便其他逻辑使用
+    searchData.value = { ...searchData.value, ...allValues };
+};
+
+// --- Lifecycle ---
+onMounted(() => {
+  emit("searchFinish", initSearchData);
+});
+</script>
+<style lang="scss"></style>
diff --git a/frontend/src/views/shuJuTianBao/changeLogSearch.vue b/frontend/src/views/shuJuTianBao/changeLogSearch.vue
new file mode 100644
index 0000000..0567d65
--- /dev/null
+++ b/frontend/src/views/shuJuTianBao/changeLogSearch.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="change-log-search">
+        <BasicSearch ref="basicSearchRef" :searchList="searchList" :initial-values="initSearchData"
+            @finish="onSearchFinish" @values-change="onValuesChange" @reset="handleReset">
+        </BasicSearch>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from "vue";
+import BasicSearch from "@/components/BasicSearch/index.vue";
+
+// --- Props & Emits ---
+interface Props {
+    operationTypeDict: any[];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+    (e: "reset", values: any): void;
+    (e: "searchFinish", values: any): void;
+}>();
+
+
+// 模拟 initSearchData
+const initSearchData = {
+  operationType: '',
+};
+
+const searchData = ref<any>({ ...initSearchData });
+
+const searchList: any = computed(() => [
+    {
+        type: "Select",
+        name: "operationType",
+        label: "操作类型",
+        fieldProps: {
+            allowClear: true,
+        },
+        options: props.operationTypeDict || [],
+    },
+]);
+
+// --- Methods ---
+
+// 2. 搜索表单逻辑
+const onSearchFinish = (values: any) => {
+    console.log(values);
+    emit("searchFinish", values);
+};
+
+const handleReset = () => {
+    emit("reset", initSearchData);
+};
+
+const onValuesChange = (changedValues: any, allValues: any) => {
+    // 同步更新本地 searchData，以便其他逻辑使用
+    searchData.value = { ...searchData.value, ...allValues };
+};
+
+// --- Lifecycle ---
+onMounted(() => {
+  emit("searchFinish", initSearchData);
+});
+</script>
+<style lang="scss"></style>
diff --git a/frontend/src/views/shuJuTianBao/shengPiJiLu.vue b/frontend/src/views/shuJuTianBao/shengPiJiLu.vue
new file mode 100644
index 0000000..044ae7e
--- /dev/null
+++ b/frontend/src/views/shuJuTianBao/shengPiJiLu.vue
@@ -0,0 +1,439 @@
+<template>
+    <div class="shengPiJiLu-page">
+        <!-- 搜索区域组件，具体 props 需根据实际子组件调整 -->
+        <GuoYuSheShiShuJuTianBaoSearch @search-finish="handleSearchFinish" @reset="handleReset" />
+        <!-- 主表格 -->
+        <BasicTable ref="tableRef" :columns="columns" :list-url="queryPageList" :search-params="{}">
+            <!-- 使用 bodyCell 插槽自定义单元格渲染 -->
+            <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'action' || column.dataIndex === 'action'">
+                    <div class="flex">
+                        <a-button type="link" size="small" @click="handleShowApprovalLog(record)">审批详情</a-button>
+                        <a-button type="link" size="small" @click="handleShowChangeLog(record)">变更详情</a-button>
+                    </div>
+                </template>
+                <template v-if="column.dataIndex === 'bizType'">
+                    {{ handName(record.bizType, yeWuType) }}
+                </template>
+                <template v-if="column.dataIndex === 'status'">
+                    {{ handName(record.status, shenStatus) }}
+                </template>
+            </template>
+        </BasicTable>
+
+        <!-- 审批操作日志弹框 -->
+        <a-modal
+            v-model:open="approvalLogVisible"
+            title="审批操作日志"
+            width="1600px"
+            :footer="null"
+            destroy-on-close="false"
+        >
+            <div class="approval-log-modal-content">
+                <ApprovalLogSearch 
+                    :action-type-dict="actionTypeDict" 
+                    @search-finish="handleApprovalLogSearch" 
+                    @reset="handleApprovalLogReset" 
+                />
+                <BasicTable 
+                    ref="approvalLogTableRef" 
+                    :columns="approvalLogColumns" 
+                    :list-url="getApprovalLogList"
+                >
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="column.dataIndex === 'action'">
+                            {{ handName(record.action, actionTypeDict) }}
+                        </template>
+                    </template>
+                </BasicTable>
+            </div>
+        </a-modal>
+
+        <!-- 数据变更记录弹框 -->
+        <a-modal
+            v-model:open="changeLogVisible"
+            title="数据变更记录"
+            width="1600px"
+            :footer="null"
+            destroy-on-close="false"
+        >
+            <div class="change-log-modal-content">
+                <ChangeLogSearch 
+                    :operation-type-dict="operationTypeDict" 
+                    @search-finish="handleChangeLogSearch" 
+                    @reset="handleChangeLogReset" 
+                />
+                <BasicTable 
+                    ref="changeLogTableRef" 
+                    :columns="changeLogColumns" 
+                    :list-url="getApprovalChangeLogList"
+                >
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="column.dataIndex === 'operationType'">
+                            {{ handName(record.operationType, operationTypeDict) }}
+                        </template>
+                        <template v-if="column.dataIndex === 'bizType'">
+                            {{ handName(record.bizType, yeWuType) }}
+                        </template>
+                        <template v-if="column.dataIndex === 'changeJson'">
+                            <pre style="max-height: 200px; overflow: auto; margin: 0;">{{ record.changeJson }}</pre>
+                        </template>
+                    </template>
+                </BasicTable>
+            </div>
+        </a-modal>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue';
+import { queryPageList, getApprovalLogList, getApprovalChangeLogList } from '@/api/shengPiJiLu';
+import BasicTable from "@/components/BasicTable/index.vue";
+import GuoYuSheShiShuJuTianBaoSearch from "./shengPiJiLuSearch.vue";
+import ApprovalLogSearch from "./approvalLogSearch.vue";
+import ChangeLogSearch from "./changeLogSearch.vue";
+import { getDictItemsByCode } from '@/api/dict';
+let columns = ref([
+    {
+        title: '审批批次号',
+        dataIndex: 'approvalNo',
+        key: 'approvalNo',
+        width: 180,
+        fixed: 'left'
+    },
+    {
+        title: '业务类型',
+        dataIndex: 'bizType',
+        key: 'bizType',
+        width: 120
+    },
+    {
+        title: '数据条数',
+        dataIndex: 'dataCount',
+        key: 'dataCount',
+        width: 100,
+        align: 'center'
+    },
+    {
+        title: '提交人',
+        dataIndex: 'applyUserId',
+        key: 'applyUserId',
+        width: 120
+    },
+    {
+        title: '提交时间',
+        dataIndex: 'applyTime',
+        key: 'applyTime',
+        width: 180,
+
+    },
+    {
+        title: '审批状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 100,
+        align: 'center',
+
+    },
+    {
+        title: '审批人',
+        dataIndex: 'approverId',
+        key: 'approverId',
+        width: 120
+    },
+    {
+        title: '审批时间',
+        dataIndex: 'approveTime',
+        key: 'approveTime',
+        width: 180,
+
+    },
+    {
+        title: '审批备注',
+        dataIndex: 'remark',
+        key: 'remark',
+        ellipsis: true,
+        width: 200
+    },
+    {
+        title: '操作',
+        key: 'action',
+        width: 120,
+        fixed: 'right',
+        align: 'center'
+    }
+]);
+const tableRef = ref()
+const handleSearchFinish = (values: any) => {
+    console.log(values);
+    const filters = [
+        values.approvalNo && {
+            field: "approvalNo",
+            operator: "contains",
+            dataType: "string",
+            value: values.approvalNo,
+        },
+        values.status && {
+            field: "status",
+            operator: "eq",
+            dataType: "string",
+            value: values.status,
+        },
+    ].filter(Boolean);
+
+
+    const filter = {
+        logic: "and",
+        filters: filters,
+    };
+    tableRef.value?.getList(filter);
+};
+const handleReset = (values) => {
+    handleSearchFinish(values);
+};
+
+// 审批操作日志弹框相关
+const approvalLogVisible = ref(false);
+const approvalLogTableRef = ref();
+
+const approvalLogColumns = ref([
+    {
+        title: '操作类型',
+        dataIndex: 'action',
+        key: 'action',
+        width: 120,
+        align: 'center'
+    },
+    {
+        title: '操作人',
+        dataIndex: 'operatorId',
+        key: 'operatorId',
+        width: 150
+    },
+    {
+        title: '操作时间',
+        dataIndex: 'operateTime',
+        key: 'operateTime',
+        width: 180
+    },
+    {
+        title: '审批意见',
+        dataIndex: 'commentInfo',
+        key: 'commentInfo',
+        ellipsis: true,
+        width: 300
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createdAt',
+        key: 'createdAt',
+        width: 180
+    }
+]);
+
+// 数据变更记录弹框相关
+const changeLogVisible = ref(false);
+const changeLogTableRef = ref();
+
+const changeLogColumns = ref([
+    {
+        title: '业务类型',
+        dataIndex: 'bizType',
+        key: 'bizType',
+        width: 120,
+        align: 'center'
+    },
+    {
+        title: '操作类型',
+        dataIndex: 'operationType',
+        key: 'operationType',
+        width: 120,
+        align: 'center'
+    },
+    {
+        title: '变更内容',
+        dataIndex: 'changeJson',
+        key: 'changeJson',
+        width: 400,
+        ellipsis: true
+    },
+    {
+        title: '操作人',
+        dataIndex: 'operatorId',
+        key: 'operatorId',
+        width: 150
+    },
+    {
+        title: '操作时间',
+        dataIndex: 'operateTime',
+        key: 'operateTime',
+        width: 180
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createdAt',
+        key: 'createdAt',
+        width: 180
+    }
+]);
+
+const currentApprovalId = ref('');
+const actionTypeDict = ref([]);
+const operationTypeDict = ref([]);
+
+// 显示审批操作日志弹框
+const handleShowApprovalLog = (record: any) => {
+    currentApprovalId.value = record.id;
+    approvalLogVisible.value = true;
+    // 延迟调用，确保弹框和 BasicTable 组件完全渲染
+    setTimeout(() => {
+        const filter = {
+            logic: "and",
+            filters: [
+                {
+                    field: "approvalId",
+                    operator: "eq",
+                    dataType: "string",
+                    value: record.id,
+                }
+            ]
+        };
+        approvalLogTableRef.value?.getList(filter);
+    }, 300);
+};
+
+// 审批日志搜索处理
+const handleApprovalLogSearch = (values: any) => {
+    console.log('审批日志搜索:', values);
+    const filters = [
+        {
+            field: "approvalId",
+            operator: "eq",
+            dataType: "string",
+            value: currentApprovalId.value,
+        },
+        values.action && {
+            field: "action",
+            operator: "eq",
+            dataType: "string",
+            value: values.action,
+        },
+    ].filter(Boolean);
+
+    const filter = {
+        logic: "and",
+        filters: filters,
+    };
+    approvalLogTableRef.value?.getList(filter);
+};
+
+// 审批日志重置处理
+const handleApprovalLogReset = (values: any) => {
+    console.log('审批日志重置:', values);
+    handleApprovalLogSearch(values);
+};
+
+// 显示数据变更记录弹框
+const handleShowChangeLog = (record: any) => {
+    currentApprovalId.value = record.id;
+    changeLogVisible.value = true;
+    // 延迟调用，确保弹框和 BasicTable 组件完全渲染
+    setTimeout(() => {
+        const filter = {
+            logic: "and",
+            filters: [
+                {
+                    field: "approvalId",
+                    operator: "eq",
+                    dataType: "string",
+                    value: record.id,
+                }
+            ]
+        };
+        changeLogTableRef.value?.getList(filter);
+    }, 300);
+};
+
+// 变更日志搜索处理
+const handleChangeLogSearch = (values: any) => {
+    console.log('变更日志搜索:', values);
+    const filters = [
+        {
+            field: "approvalId",
+            operator: "eq",
+            dataType: "string",
+            value: currentApprovalId.value,
+        },
+        values.operationType && {
+            field: "operationType",
+            operator: "eq",
+            dataType: "string",
+            value: values.operationType,
+        },
+    ].filter(Boolean);
+
+    const filter = {
+        logic: "and",
+        filters: filters,
+    };
+    changeLogTableRef.value?.getList(filter);
+};
+
+// 变更日志重置处理
+const handleChangeLogReset = (values: any) => {
+    console.log('变更日志重置:', values);
+    handleChangeLogSearch(values);
+};
+
+// 初始化
+onMounted(() => {
+    dictNmae()
+});
+const shenStatus = ref([])
+const yeWuType = ref([])
+const dictNmae = () => {
+    getDictItemsByCode({ dictCode: 'shenStatus' }).then((res) => {
+        shenStatus.value = res.data;
+    });
+    getDictItemsByCode({ dictCode: 'yeWuType' }).then((res) => {
+        yeWuType.value = res.data;
+    });
+    // TODO: 待补充操作类型字典
+    getDictItemsByCode({ dictCode: 'caoType' }).then((res) => {
+        actionTypeDict.value = res.data;
+    });
+    getDictItemsByCode({ dictCode: 'caoTypeTwo' }).then((res) => {
+        operationTypeDict.value = res.data;
+    });
+}
+const handName = (val: any, arr: any) => {
+    let dictName1 = ''
+    arr.forEach((item: any) => {
+        if (item.itemCode == val) {
+            dictName1 = item.dictName
+        }
+    })
+    return dictName1    
+}
+</script>
+
+<style scoped lang="scss">
+.shengPiJiLu-page {
+    width: 100%;
+    height: 100%;
+    background-color: #ffffff;
+    padding: 20px;
+}
+
+.approval-log-modal-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.change-log-modal-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/shuJuTianBao/shengPiJiLuSearch.vue b/frontend/src/views/shuJuTianBao/shengPiJiLuSearch.vue
new file mode 100644
index 0000000..977c781
--- /dev/null
+++ b/frontend/src/views/shuJuTianBao/shengPiJiLuSearch.vue
@@ -0,0 +1,85 @@
+<template>
+    <div class="guoYuSheShiShuJuTianBao-search">
+        <BasicSearch ref="basicSearchRef" :searchList="searchList" :initial-values="initSearchData"
+            @finish="onSearchFinish" @values-change="onValuesChange" @reset="handleReset">
+        </BasicSearch>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from "vue";
+import BasicSearch from "@/components/BasicSearch/index.vue"; // 确保路径正确
+import { getDictItemsByCode } from '@/api/dict';
+// --- Props & Emits ---
+interface Props {
+
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+    (e: "reset", values: any): void;
+    (e: "searchFinish", values: any): void;
+}>();
+
+
+// 模拟 initSearchData
+const initSearchData = {
+  approvalNo:'',
+  status:'',
+};
+
+const searchData = ref<any>({ ...initSearchData });
+
+const searchList: any = computed(() => [
+    {
+        type: "Input",
+        name: "approvalNo",
+        label: "审批批次号",
+        fieldProps: {
+            allowClear: true,
+        },
+        options: [],
+    },
+    {
+        type: "Select",
+        name: "status",
+        label: "审批状态",
+        fieldProps: {
+            allowClear: true,
+        },
+        options: statusData.value,
+    },
+
+]);
+// --- Methods ---
+
+
+
+// 2. 搜索表单逻辑
+const onSearchFinish = (values: any) => {
+    console.log(values);
+
+    emit("searchFinish", values);
+};
+const handleReset = () => {
+    emit("reset", initSearchData);
+};
+
+const onValuesChange = (changedValues: any, allValues: any) => {
+    // 同步更新本地 searchData，以便其他逻辑使用
+    searchData.value = { ...searchData.value, ...allValues };
+};
+
+// --- Lifecycle ---
+onMounted(() => {
+  emit("searchFinish", initSearchData);
+  getstatusData()
+});
+const statusData = ref(false)
+const getstatusData = () => {
+  getDictItemsByCode({ dictCode: "shenStatus" }).then((res) => {
+    statusData.value = res.data;
+  });
+};
+</script>
+<style lang="scss"></style>
diff --git a/frontend/src/views/shuiZhiJianCe/shuiHuanJingZhiLiangZhuangKuang.vue b/frontend/src/views/shuiZhiJianCe/shuiHuanJingZhiLiangZhuangKuang.vue
index e9e2375..461c381 100644
--- a/frontend/src/views/shuiZhiJianCe/shuiHuanJingZhiLiangZhuangKuang.vue
+++ b/frontend/src/views/shuiZhiJianCe/shuiHuanJingZhiLiangZhuangKuang.vue
@@ -2,7 +2,7 @@
 import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
 import RightDrawer from "@/components/RightDrawer/index.vue";
 import ShuiZhiJianCeGongZuoQingKuang from "@/modules/shuizhijiancegongzuoQK/index.vue"
-// import EnvironmentalQuality from "@/modules/environmentalQuality/index.vue" // 环境质量满足度
+import EnvironmentalQuality from "@/modules/EnvironmentalQuality/index.vue" // 环境质量满足度
 </script>
 
 <template>
@@ -13,7 +13,7 @@ import ShuiZhiJianCeGongZuoQingKuang from "@/modules/shuizhijiancegongzuoQK/inde
     <div class="rightContent">
       <RightDrawer>
         <ShuiZhiJianCeGongZuoQingKuang />
-        <!-- <EnvironmentalQuality /> -->
+        <EnvironmentalQuality />
       </RightDrawer>
     </div>
   </div>