From 6e600d6c727ccc7739a599438321fe19c1780257 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=88=E5=85=86=E5=A2=9E?= <你的邮箱@example.com>
Date: Fri, 24 Apr 2026 15:31:32 +0800
Subject: [PATCH 1/9] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A1=AB=E6=8A=A5?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/guoYuSheShiShuJuTianBao/index.ts  |  77 ++-
 frontend/src/api/select/index.ts              |  33 +
 frontend/src/components/BasicSearch/index.vue | 157 +++--
 frontend/src/components/BasicTable/index.vue  |  15 +-
 frontend/src/components/fishSearch/index.vue  | 160 +++--
 frontend/src/store/modules/shuJuTianBao.ts    |  61 ++
 .../shuJuTianBao/guoYuSheShiShuJuTianBao.vue  | 634 ++++++++++++------
 .../guoYuSheShiShuJuTianBaoForm.vue           | 272 ++++++--
 .../guoYuSheShiShuJuTianBaoSearch.vue         | 347 ++--------
 9 files changed, 1055 insertions(+), 701 deletions(-)
 create mode 100644 frontend/src/api/select/index.ts
 create mode 100644 frontend/src/store/modules/shuJuTianBao.ts

diff --git a/frontend/src/api/guoYuSheShiShuJuTianBao/index.ts b/frontend/src/api/guoYuSheShiShuJuTianBao/index.ts
index 69561a5..ef96df2 100644
--- a/frontend/src/api/guoYuSheShiShuJuTianBao/index.ts
+++ b/frontend/src/api/guoYuSheShiShuJuTianBao/index.ts
@@ -8,27 +8,90 @@ export function getFishDraftPage(data:any) {
     data
   });
 }
-//新增目录
+//新增过鱼数据
 export function addFishDraft(queryParams:any) {
   return request({
-    url: '/data/fishDraft/add',
+    url: '/data/fishDraft/saveDraft',
     method: 'post',
     data: queryParams
   });
 }
-//修改目录
+//修改过鱼数据
 export function editFishDraft(queryParams:any) {
   return request({
-    url: '/data/fishDraft/update',
+    url: '/data/fishDraft/updateDraft',
     method: 'post',
     data: queryParams
   });
 }
-//删除
+//删除 过鱼数据
 export function delFishDraft(data:any) {
   return request({
-    url: '/data/fishDraft/batchDelete',
+    url: '/data/fishDraft/batchRemoveDraft',
     method: 'post',
     data
   });
-}
\ No newline at end of file
+}
+//提交过鱼数据
+export function submitFishDraft(data:any) {
+  return request({
+    url: '/data/fishDraft/submitDrafts',
+    method: 'post',
+    data
+  });
+}
+//审批过鱼数据
+export function successFishDraft(data:any) {
+  return request({
+    url: '/data/fishDraft/batchApprove',
+    method: 'post',
+    data
+  });
+}
+//驳回过鱼数据
+export function rejectFishDraft(data:any) {
+  return request({
+    url: '/data/fishDraft/reject',
+    method: 'post',
+    data
+  });
+}
+// 导入zip
+export function importFishZip(data:FormData) {
+  return request({
+    url: '/data/fishDraft/importZip',
+    method: 'post',
+    data,
+    headers: { 'Content-Type': 'multipart/form-data' }
+  });
+}
+// 提交导入任务
+export function submitImportTask(data:any) {
+  return request({
+    url: '/data/fishDraft/submitDrafts',
+    method: 'post',
+    data
+  });
+}
+// 取消导入任务
+export function cancelImportTask(data:any) {
+  return request({
+    url: '/data/fishDraft/cancelImport',
+    method: 'post',
+    data
+  });
+}
+// 查询导入任务
+export function getImportTask() {
+  return request({
+    url: '/data/importTask/list',
+    method: 'get'
+  });
+}
+//检测用户导入状态
+export function checkImportStatus() {
+  return request({
+    url: '/data/fishDraft/checkImportStatus',
+    method: 'get'
+  });
+}
diff --git a/frontend/src/api/select/index.ts b/frontend/src/api/select/index.ts
new file mode 100644
index 0000000..71b574b
--- /dev/null
+++ b/frontend/src/api/select/index.ts
@@ -0,0 +1,33 @@
+import request from '@/utils/request';
+
+// 基地下拉列表
+export function getBaseDropdown(data:any) {
+  return request({
+    url: '/env/hydrobase/dropdown',
+    method: 'get',
+    data
+  });
+}
+//电站下拉列表
+export function getEngInfoDropdown(params:any) {
+  return request({
+    url: '/env/engInfo/dropdown',
+    method: 'get',
+    params
+  });
+}
+//过鱼设施下拉列表
+export function getFpssDropdown(params:any) {
+  return request({
+    url: '/env/fpss/dropdown',
+    method: 'get',
+    params
+  });
+}
+//鱼类名称下拉列表
+export function getFishDictoryDropdown() {
+  return request({
+    url: '/env/fishDictory/listByName',
+    method: 'get'
+  });
+}
\ No newline at end of file
diff --git a/frontend/src/components/BasicSearch/index.vue b/frontend/src/components/BasicSearch/index.vue
index 6e78549..a0bd480 100644
--- a/frontend/src/components/BasicSearch/index.vue
+++ b/frontend/src/components/BasicSearch/index.vue
@@ -6,6 +6,7 @@
       :rules="rules"
       layout="inline"
       class="basic-search-form"
+      @reset="handleReset"
       @finish="handleFinish"
       @values-change="handleValuesChange"
     >
@@ -18,14 +19,18 @@
               :name="item.name"
               style="width: 100%; margin-bottom: 0"
             >
-             <!-- 1. 优先检查是否有具名插槽，或者 type 为 custom -->
-                <slot 
-                  v-if="$slots[item.name] || item.type === 'custom'" 
-                  :name="item.name" 
-                  :value="formData[item.name]" 
-                  :onChange="(val:any) => { formData[item.name] = val }"
-                  :formModel="formData"
-                />
+              <!-- 1. 优先检查是否有具名插槽，或者 type 为 custom -->
+              <slot
+                v-if="$slots[item.name] || item.type === 'custom'"
+                :name="item.name"
+                :value="formData[item.name]"
+                :onChange="(val:any) => { 
+                  formData[item.name] = val;
+                  triggerManualValuesChange(item.name, val);
+                }"
+                :formModel="formData"
+              />
+
               <!-- 普通日期选择器 -->
               <a-date-picker
                 v-else-if="item.type === 'DataPicker'"
@@ -38,7 +43,9 @@
                 :allow-clear="item.fieldProps?.allowClear"
                 :presets="item.presets"
                 style="width: 100%"
+                @change="(val) => triggerManualValuesChange(item.name, val)"
               />
+
               <!-- 日期范围选择器 -->
               <a-range-picker
                 v-else-if="item.type === 'RangePicker'"
@@ -51,6 +58,7 @@
                 :allow-clear="item.fieldProps?.allowClear"
                 :presets="item.presets"
                 style="width: 100%"
+                @change="(val) => triggerManualValuesChange(item.name, val)"
               />
 
               <!-- 普通输入框 -->
@@ -60,38 +68,40 @@
                 :placeholder="item.placeholder || '请输入'"
                 :allow-clear="item.fieldProps?.allowClear"
                 :style="{ width: item.width ? item.width + 'px' : '200px' }"
+                @change="(e) => triggerManualValuesChange(item.name, e.target.value)"
               />
+
               <!-- 电站下拉框 -->
               <div class="flex gap-[10px]" v-else-if="item.type === 'waterStation'">
                 <a-form-item-rest>
-                <a-select
-                  :value="formData.stcd?.dataDimensionData"
-                  placeholder="请选择"
-                  @change="dataDimensionDataChange"
-                  style="width: 135px"
-                >
-                  <a-select-option
-                    v-for="opt in item.options"
-                    :key="opt.value"
-                    :value="opt.value"
+                  <a-select
+                    :value="formData.baseId"
+                    placeholder="请选择"
+                    @change="dataDimensionDataChange"
+                    style="width: 135px"
                   >
-                    {{ opt.label }}
-                  </a-select-option>
-                </a-select>
-                <a-select
-                  :value="formData.stcd?.stcdId"
-                  placeholder="请选择电站"
-                  @change="stcdIdChange"
-                  style="width: 135px"
-                >
-                  <a-select-option
-                    v-for="opt in item.options"
-                    :key="opt.value"
-                    :value="opt.value"
+                    <a-select-option
+                      v-for="opt in shuJuTianBaoStore.baseOption"
+                      :key="opt.baseid"
+                      :value="opt.baseid"
+                    >
+                      {{ opt.basename }}
+                    </a-select-option>
+                  </a-select>
+                  <a-select
+                    :value="formData.rstcd"
+                    placeholder="请选择电站"
+                    @change="stcdIdChange"
+                    style="width: 135px"
                   >
-                    {{ opt.label }}
-                  </a-select-option>
-                </a-select>
+                    <a-select-option
+                      v-for="opt in shuJuTianBaoStore.engOption"
+                      :key="opt.stcd"
+                      :value="opt.stcd"
+                    >
+                      {{ opt.ennm }}
+                    </a-select-option>
+                  </a-select>
                 </a-form-item-rest>
               </div>
 
@@ -102,27 +112,25 @@
                 :placeholder="item.placeholder || '请选择'"
                 :allow-clear="item.fieldProps?.allowClear"
                 :style="{ width: item.width ? item.width + 'px' : '200px' }"
+                @change="(val) => triggerManualValuesChange(item.name, val)"
               >
                 <a-select-option
                   v-for="opt in item.options"
-                  :key="opt.value"
-                  :value="opt.value"
+                  :key="opt[item.values?.value] || opt.value || opt.itemCode"
+                  :value="opt[item.values?.value] || opt.value || opt.itemCode"
                 >
-                  {{ opt.label }}
+                  {{ opt[item.values?.name] || opt.label || opt.dictName }}
                 </a-select-option>
               </a-select>
 
-              <!-- 单选 框 -->
+              <!-- 单选框 -->
               <a-radio-group
                 v-else-if="item.type === 'Radio'"
                 v-model:value="formData[item.name]"
                 :style="{ width: item.width ? item.width + 'px' : '200px' }"
+                @change="(e) => triggerManualValuesChange(item.name, e.target.value)"
               >
-                <a-radio
-                  v-for="opt in item.options"
-                  :key="opt.value"
-                  :value="opt.value"
-                >
+                <a-radio v-for="opt in item.options" :key="opt.value" :value="opt.value">
                   {{ opt.label }}
                 </a-radio>
               </a-radio-group>
@@ -149,7 +157,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, reactive, watch, onMounted } from "vue";
+import { ref, computed, reactive, watch, onMounted, nextTick } from "vue";
+import { useShuJuTianBaoStore } from "@/store/modules/shuJuTianBao";
+const shuJuTianBaoStore = useShuJuTianBaoStore();
+// import { nextTick } from "process";
 
 // --- 类型定义 ---
 export interface SearchItem {
@@ -163,7 +174,13 @@ export interface SearchItem {
   xlSpan?: number;
   width?: number;
   presets?: any[];
-  options?: { label: string; value: any }[];
+  values?: any;
+  options?: {
+    itemCode?: string;
+    dictName?: string;
+    label: string;
+    value: any;
+  }[];
   component?: any;
 }
 
@@ -192,21 +209,26 @@ const rules = reactive<Record<string, any>>({});
 
 // 2. 创建计算属性，自动过滤掉 false/null/undefined 的项
 const validSearchList = computed(() => {
-  return props.searchList.filter(item => item);
+  return props.searchList.filter((item) => item);
 });
+
 // --- 初始化逻辑 ---
 const initForm = () => {
   const initial = JSON.parse(JSON.stringify(props.initialValues || {}));
-  
+
   // 1. 清空 formData
   Object.keys(formData).forEach((key) => delete formData[key]);
-  
+
   // 2. 赋值初始数据
   Object.assign(formData, initial);
 
   // 3. 过滤掉 searchList 中为 false/null/undefined 的项，并生成规则
-
   validSearchList.value.forEach((item) => {
+    if (item.type == "waterStation") {
+      // 下拉菜单
+      shuJuTianBaoStore.getBaseOption();
+      shuJuTianBaoStore.getEngOption(formData.baseId);
+    }
     if (item.fieldProps?.required) {
       rules[item.name] = [
         { required: true, message: `${item.label}不能为空`, trigger: "blur" },
@@ -214,15 +236,35 @@ const initForm = () => {
     }
   });
 };
+
+/**
+ * 手动触发 valuesChange 事件
+ * 用于处理那些没有被 a-form 直接管理的字段（如 waterStation 内部逻辑）
+ * 或者作为标准控件的备份触发机制
+ */
+const triggerManualValuesChange = (changedKey: string, newValue: any) => {
+  // 构造变更对象
+  const changedValues = { [changedKey]: newValue };
+  // 发射事件，传递变更值和当前所有值
+  // 注意：这里使用 {...formData} 是为了传递当前的最新状态
+  emit("valuesChange", changedValues, { ...formData });
+};
+
 const dataDimensionDataChange = (value: any) => {
-  formData.stcd.dataDimensionData = value;
+  formData.baseId = value;
+  formData.rstcd = "";
+  shuJuTianBaoStore.getEngOption(formData.baseId);
+
+  // 【关键修改】手动触发 valuesChange，因为 a-form-item-rest 阻断了自动监听
+  triggerManualValuesChange("baseId", formData.baseId);
 };
-// const hbrvcdChange = (value: any) => {
-//   formData.stcd.hbrvcd = value;
-// };
+
 const stcdIdChange = (value: any) => {
-  formData.stcd.stcdId = value;
+  formData.rstcd = value;
+  // 【关键修改】手动触发 valuesChange
+  triggerManualValuesChange("rstcd", formData.rstcd);
 };
+
 onMounted(() => {
   initForm();
 });
@@ -240,7 +282,8 @@ watch(
 
 // --- 事件处理 ---
 const handleFinish = (values: any) => {
-  emit("finish", values);
+  const finalValues = { ...formData, ...values };
+  emit("finish", finalValues);
 };
 
 const handleValuesChange = (changedValues: any, allValues: any) => {
@@ -250,12 +293,16 @@ const handleValuesChange = (changedValues: any, allValues: any) => {
 const handleReset = () => {
   if (formRef.value) {
     formRef.value.resetFields();
+    nextTick(() => {
+      initForm();
+    });
     emit("reset");
   }
 };
 
 defineExpose({
   form: formRef,
+  formData,
   reset: handleReset,
   submit: () => formRef.value?.submit(),
 });
diff --git a/frontend/src/components/BasicTable/index.vue b/frontend/src/components/BasicTable/index.vue
index f019a2b..92e9bfd 100644
--- a/frontend/src/components/BasicTable/index.vue
+++ b/frontend/src/components/BasicTable/index.vue
@@ -67,7 +67,7 @@ const rowSelection = computed(() => ({
     emit("selection-change", keys, rows);
   },
   getCheckboxProps: (record: any) => ({
-    disabled: record.disabled, // 可根据业务逻辑禁用某些行的勾选
+    // disabled: record.status === 'SUBMITTED'
   }),
 }));
 
@@ -88,23 +88,23 @@ const paginationConfig = computed(() => ({
  * 获取列表数据
  * @param extraParams 额外的临时参数（可选）
  */
-const getList = async (extraParams?: Record<string, any>) => {
+const getList = async (filter?: Record<string, any>) => {
   loading.value = true;
   try {
     // 合并基础分页参数、外部搜索参数和临时参数
     const params = {
-      ...props.searchParams,
-      ...extraParams,
+      // ...props.searchParams,
       skip: page.value,
       take: size.value,
-      filter: {}
+      filter: filter,
       // 如果后端需要 skip/take 格式，可以在此转换
       // skip: (page.value - 1) * size.value,
       // take: size.value,
     };
+    console.log(params);
 
     const res = await props.listUrl(params);
-    
+
     // 假设后端返回结构为 { data: { records: [], total: 0 } }
     // 请根据实际后端接口调整以下取值逻辑
     const records = res?.data?.records || res?.data?.list || res?.data || [];
@@ -177,10 +177,9 @@ watch(
 
 // --- Lifecycle ---
 onMounted(() => {
-  getList();
 });
 </script>
 
 <style scoped>
 /* 如有必要，添加少量样式 */
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/fishSearch/index.vue b/frontend/src/components/fishSearch/index.vue
index 0c702b8..9fa697d 100644
--- a/frontend/src/components/fishSearch/index.vue
+++ b/frontend/src/components/fishSearch/index.vue
@@ -1,24 +1,28 @@
 <template>
   <a-select
+    ref="selectRef"
     :style="{ width: width }"
     :value="modelValue"
+    :options="options"
+    :loading="loading"
     @change="handleChange"
-    placeholder="请选择鱼名称"
-    mode="multiple"
+    @search="handleSearch"
+    placeholder="请选择鱼种类"
+    :mode="multiple ? 'multiple' : undefined"
     show-search
-    :filter-option="filterOption"
+    :filter-option="false"
     class="custom-fish-select"
     :dropdownMatchSelectWidth="false"
     :getPopupContainer="(triggerNode: HTMLElement) => triggerNode.parentNode"
     @dropdownVisibleChange="handleDropdownVisibleChange"
+    :max-tag-count="multiple ? 1 : undefined"
+    :open="open"
+    @update:open="open = $event"
+    :field-names="{ label: 'name', value: 'id' }"
   >
-    <!-- 自定义 Tag 显示名称 -->
-    <template #tagRender="{ value: tagId, onClose }">
-      <a-tag 
-        closable 
-        @close="onClose" 
-        style="margin-right: 3px; max-width: 120px"
-      >
+    <!-- 自定义 Tag 显示名称 (仅在多选时生效) -->
+    <template #tagRender="{ value: tagId, onClose }" v-if="multiple">
+      <a-tag closable @close="onClose" style="margin-right: 3px; max-width: 120px">
         {{ getFishNameById(tagId) }}
       </a-tag>
     </template>
@@ -32,7 +36,7 @@
             :key="opt.id"
             class="dropdown-item"
             :class="{
-              'is-active': Array.isArray(modelValue) && modelValue.includes(opt.id),
+              'is-active': isSelected(opt.id),
               'is-hovered': opt.id === hoveredId,
             }"
             @click.stop="handleSelectOption(opt)"
@@ -40,11 +44,9 @@
           >
             <span class="item-name">{{ opt.name }}</span>
             <!-- 选中对勾 -->
-            <span v-if="Array.isArray(modelValue) && modelValue.includes(opt.id)" class="check-icon">✓</span>
-          </div>
-          <div v-if="filteredOptions.length === 0" class="empty-tip">
-            无匹配数据
+            <span v-if="isSelected(opt.id)" class="check-icon">✓</span>
           </div>
+          <div v-if="filteredOptions.length === 0" class="empty-tip">无匹配数据</div>
         </div>
 
         <!-- 中间分割线 -->
@@ -66,30 +68,42 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from "vue";
+import { ref, onMounted, computed, watch } from "vue";
+import { getFishDictoryDropdown } from "@/api/select";
 
 // --- Props & Emits ---
 interface Props {
-  modelValue: string[]; // 接收选中的 ID 数组
-  options: any[];
-  width: string;
+  modelValue: string | string[]; // 支持字符串(单选)或数组(多选)
+  width?: string;
+  multiple?: boolean; // 控制是否多选
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  multiple: false, // 默认单选，根据需求调整
+});
 
 const emit = defineEmits<{
-  (e: "update:modelValue", value: string[]): void;
+  (e: "update:modelValue", value: string | string[]): void;
 }>();
 
 // --- State ---
-// 这里可以改为从 API 获取，目前先保留静态数据作为示例
-const options = ref<any>(props.options || []);
-
+const loading = ref(false);
+const options = ref<any[]>([]);
+const searchKeyword = ref<string>("");
 const hoveredId = ref<string | null>(null);
+const open = ref(false); // 控制下拉框显隐
 
 // --- Computed ---
 const filteredOptions = computed(() => {
-  return options.value;
+  if (!searchKeyword.value) {
+    return options.value;
+  }
+  const lowerKeyword = searchKeyword.value.toLowerCase();
+  return options.value.filter((item: any) => {
+    const nameMatch = item.name?.toLowerCase().includes(lowerKeyword);
+    const aliasMatch = item.alias?.toLowerCase().includes(lowerKeyword);
+    return nameMatch || aliasMatch;
+  });
 });
 
 const currentDetailData = computed(() => {
@@ -100,39 +114,59 @@ const currentDetailData = computed(() => {
 });
 
 // --- Methods ---
-const handleDropdownVisibleChange = (open: boolean) => {
-  if (!open) {
-    hoveredId.value = null;
+
+// 辅助函数：判断是否选中
+const isSelected = (id: string) => {
+  if (props.multiple) {
+    return Array.isArray(props.modelValue) && props.modelValue.includes(id);
+  } else {
+    return props.modelValue === id;
   }
 };
 
-const filterOption = (input: string, option: any) => {
-  if (!input) return true;
-  const targetOpt = options.value.find((item: any) => item.id === option.value);
-  if (!targetOpt) return false;
+const handleSearch = (value: string) => {
+  searchKeyword.value = value;
+};
 
-  const lowerInput = input.toLowerCase();
-  const nameMatch = targetOpt.name?.toLowerCase().includes(lowerInput);
-  const aliasMatch = targetOpt.alias?.toLowerCase().includes(lowerInput);
-  return nameMatch || aliasMatch;
+const handleDropdownVisibleChange = (val: boolean) => {
+  open.value = val;
+  if (!val) {
+    hoveredId.value = null;
+    searchKeyword.value = "";
+  }
 };
 
 const handleSelectOption = (opt: any) => {
-  let newValues: string[] = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
-  const index = newValues.indexOf(opt.id);
+  if (props.multiple) {
+    // --- 多选逻辑 ---
+    let newValues: string[] = Array.isArray(props.modelValue)
+      ? [...props.modelValue]
+      : [];
+    const index = newValues.indexOf(opt.id);
 
-  if (index > -1) {
-    newValues.splice(index, 1);
+    if (index > -1) {
+      newValues.splice(index, 1); // 取消选中
+    } else {
+      newValues.push(opt.id); // 选中
+    }
+    emit("update:modelValue", newValues);
   } else {
-    newValues.push(opt.id);
+    // --- 单选逻辑 ---
+    // 关键：单选模式下，直接发射当前 ID，覆盖旧值
+    // 如果点击的是已选中的项，则清空（可选行为，视需求而定）
+    if (props.modelValue === opt.id) {
+      emit("update:modelValue", ""); // 取消选中
+    } else {
+      emit("update:modelValue", opt.id); // 选中新项
+      // 单选模式下，选择后通常希望关闭下拉框
+      open.value = false;
+    }
   }
-  
-  // 触发更新
-  emit("update:modelValue", newValues);
 };
 
 const handleChange = (val: any) => {
-  // 处理直接通过 a-select 内部机制触发的变化（如删除 tag）
+  // 当 a-select 内部触发 change 时（例如删除 Tag）
+  // 在单选模式下，如果用户通过键盘或删除操作改变了值，这里也会捕获
   emit("update:modelValue", val);
 };
 
@@ -141,9 +175,37 @@ const getFishNameById = (id: string) => {
   const fish = options.value.find((item: any) => item.id === id);
   return fish ? fish.name : id;
 };
+
+// 监听 multiple 变化，确保模式切换时状态正确
+watch(
+  () => props.multiple,
+  (newVal) => {
+    // 如果从多选变为单选，且 modelValue 是数组，取第一个值或清空
+    if (!newVal && Array.isArray(props.modelValue)) {
+      emit("update:modelValue", props.modelValue || null);
+    }
+    // 如果从单选变为多选，且 modelValue 是字符串，转为数组
+    if (newVal && typeof props.modelValue === "string") {
+      emit("update:modelValue", props.modelValue ? [props.modelValue] : []);
+    }
+  }
+);
+
+onMounted(() => {
+  loading.value = true;
+  getFishDictoryDropdown()
+    .then((res) => {
+      options.value = res.data || [];
+      loading.value = false;
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+});
 </script>
 
 <style lang="scss" scoped>
+/* 样式保持不变 */
 .custom-fish-select {
   :deep(.ant-select-dropdown) {
     padding: 0 !important;
@@ -157,7 +219,7 @@ const getFishNameById = (id: string) => {
   background: #fff;
   border-radius: 4px;
   overflow: hidden;
-  height: 300px; /* 固定高度 */
+  height: 300px;
 }
 
 .dropdown-left-list {
@@ -165,7 +227,7 @@ const getFishNameById = (id: string) => {
   height: 100%;
   overflow-y: auto;
   border-right: 1px solid #f0f0f0;
-  
+
   &::-webkit-scrollbar {
     width: 6px;
   }
@@ -206,7 +268,7 @@ const getFishNameById = (id: string) => {
     text-overflow: ellipsis;
     flex: 1;
   }
-  
+
   .check-icon {
     color: #1890ff;
     font-weight: bold;
@@ -268,4 +330,4 @@ const getFishNameById = (id: string) => {
   text-align: center;
   font-size: 12px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/store/modules/shuJuTianBao.ts b/frontend/src/store/modules/shuJuTianBao.ts
new file mode 100644
index 0000000..fb3b513
--- /dev/null
+++ b/frontend/src/store/modules/shuJuTianBao.ts
@@ -0,0 +1,61 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue'; // 使用 ref 更简单直观
+import { getBaseDropdown, getEngInfoDropdown, getFpssDropdown } from '@/api/select';
+
+export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
+  // 1. 直接使用 ref 定义状态，确保响应式
+  const fpssOption = ref<any[]>([]);
+  const baseOption = ref<any[]>([]);
+  const engOption = ref<any[]>([]);
+
+  // 2. 业务逻辑方法
+  const getBaseOption = async () => {
+    try {
+      const res = await getBaseDropdown({});
+      if (res.data && Array.isArray(res.data)) {
+        const list = [...res.data];
+        list.unshift({
+          baseid: 'all',
+          basename: '当前全部'
+        });
+        // 直接赋值给 ref，触发响应式更新
+        baseOption.value = list;
+      }
+    } catch (error) {
+      console.error('获取水电基地列表失败:', error);
+    }
+  };
+
+  const getEngOption = async (baseId: string) => {
+    try {
+      const param = baseId === 'all' ? {} : { baseId };
+      const res = await getEngInfoDropdown(param);
+      if (res.data && Array.isArray(res.data)) {
+        // 直接赋值给 ref
+        engOption.value = res.data;
+      }
+    } catch (error) {
+      console.error('获取电站列表失败:', error);
+    }
+  };
+
+
+  const getFpssOption = async (baseId: string, rstcd: string) => {
+    try {
+      const res = await getFpssDropdown({ baseId, rstcd });
+      fpssOption.value = res.data;
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  // 3. 直接返回 ref 和方法
+  // 在组件中使用时：store.baseOption 会自动解包为数组
+  return {
+    fpssOption,
+    baseOption,
+    engOption,
+    getBaseOption,
+    getEngOption,
+    getFpssOption,
+  };
+});
\ No newline at end of file
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao.vue
index 06b9db9..547cc64 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao.vue
@@ -2,11 +2,16 @@
   <div class="guoYuSheShiShuJuTianBao-page">
     <!-- 搜索区域组件，具体 props 需根据实际子组件调整 -->
     <GuoYuSheShiShuJuTianBaoSearch
-      :import-btn="importBtn"
-      :save-btn="saveBtn"
+      ref="searchRef"
+      :guoyuStatus="guoyuStatus"
+      :direction="direction"
       :handle-add="handleAdd"
       :batchData="batchData"
-      :batchDel="batchDel"
+      :importBtn="importBtn"
+      :batchDelBtn="batchDelBtn"
+      :submitBtn="submitBtn"
+      :successBtn="successBtn"
+      @reset="handleReset"
       @search-finish="handleSearchFinish"
     />
 
@@ -23,21 +28,68 @@
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action' || column.dataIndex === 'action'">
           <div class="flex">
-            <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
-            <a-button type="link" danger size="small" @click="handleDelete([record.id])"
+            <a-button
+              type="link"
+              size="small"
+              @click="handleSubmit([record.id])"
+              v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
+              >提交</a-button
+            >
+            <a-button
+              type="link"
+              size="small"
+              @click="handleEdit(record, 'edit')"
+              v-if="record.status === 'DRAFT' || record.status === 'REJECTED'|| record.status === 'SUBMITTED'"
+              >编辑</a-button
+            >
+            <a-button
+              type="link"
+              danger
+              size="small"
+              @click="handleDelete([record.id])"
+              v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
               >删除</a-button
             >
+            <a-button
+              type="link"
+              size="small"
+              @click="handleEdit(record, 'view')"
+              v-if="record.status === 'SUBMITTED'"
+              >查看</a-button
+            >
+            <a-button
+              type="link"
+              size="small"
+              @click="handleSuccess([record.id])"
+              v-if="record.status === 'SUBMITTED'"
+              >审批</a-button
+            >
+            <a-button
+              type="link"
+              danger
+              size="small"
+              @click="handleReject(record.id)"
+              v-if="record.status === 'SUBMITTED'"
+              >驳回</a-button
+            >
           </div>
         </template>
       </template>
     </BasicTable>
     <!-- <BasicTable :columns="columns" :listUrl="getFishDraftPage" /> -->
-
+    <!-- 隐藏的文件输入框 -->
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept=".zip,application/zip,application/x-zip-compressed"
+      style="display: none"
+      @change="handleFileSelect"
+    />
     <!-- 导入预览 Modal -->
     <a-modal
       title="导入数据预览"
       ok-text="提交导入"
-      cancel-text="取消"
+      cancel-text="取消导入"
       :width="1500"
       v-model:open="visible"
       :confirm-loading="fileLoading"
@@ -60,6 +112,8 @@
     <!-- 假设已创建对应的 Vue 组件 GuoYuSheShiShuJuTianBaoForm -->
     <EditModal
       v-model:visible="editModalVisible"
+      :is-view="isView"
+      :direction="direction"
       :initial-values="currentRecord"
       :loading="submitLoading"
       @cancel="editModalCancel"
@@ -88,10 +142,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref,  computed, onMounted, h } from "vue";
+import { ref, computed, onMounted, h } from "vue";
 import { message, Modal } from "ant-design-vue"; // 假设使用 ant-design-vue
-import JSZip from "jszip";
-import * as XLSX from "xlsx";
 import BasicTable from "@/components/BasicTable/index.vue";
 import GuoYuSheShiShuJuTianBaoSearch from "./guoYuSheShiShuJuTianBaoSearch.vue";
 import EditModal from "./guoYuSheShiShuJuTianBaoForm.vue";
@@ -100,9 +152,17 @@ import {
   addFishDraft,
   editFishDraft,
   delFishDraft,
+  submitFishDraft,
+  successFishDraft,
+  rejectFishDraft,
+  importFishZip,
+  submitImportTask,
+  cancelImportTask,
+  getImportTask,
+  checkImportStatus
 } from "@/api/guoYuSheShiShuJuTianBao";
-import dayjs from "dayjs";
-import { Tag } from 'ant-design-vue'; // 确保导入 Tag
+import { Tag } from "ant-design-vue"; // 确保导入 Tag
+import { getDictItemsByCode } from "@/api/dict";
 // import { FileImageOutlined, VideoCameraOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
 
 // --- 类型定义 ---
@@ -115,34 +175,52 @@ interface ColumnConfig {
   key: string;
   title: string;
   width?: number;
+  fixed?: string;
   customRender?: (text: any, record: any) => any;
 }
+const fileInputRef = ref<any>(null);
 const tableRef = ref<any>(null);
+// 字典项
+const direction = ref<any>([]);
+const guoyuStatus = ref<any>([]);
 // --- 基础配置 ---
 const baseColumnsConfig: ColumnConfig[] = [
-  { dataIndex: "engName", key: "engName", title: "水电基地", width: 100 },
-  { dataIndex: "baseName", key: "baseName", title: "电站名称", width: 120 },
-  { dataIndex: "fpname", key: "fpname", title: "过鱼设施名称", width: 150 },
+  {
+    dataIndex: "baseName",
+    key: "baseName",
+    title: "水电基地",
+    width: 120,
+    fixed: "left",
+  },
+  { dataIndex: "ennm", key: "ennm", title: "电站名称", width: 120, fixed: "left" },
+  { dataIndex: "stnm", key: "stnm", title: "过鱼设施名称", width: 150, fixed: "left" },
   { dataIndex: "strdt", key: "strdt", title: "过鱼时间", width: 150 },
-  { dataIndex: "ftp", key: "ftp", title: "鱼种类", width: 120 },
+  { dataIndex: "ftpName", key: "ftpName", title: "鱼种类", width: 120 },
   {
     dataIndex: "isfs",
     key: "isfs",
     title: "是否鱼苗",
     width: 74,
     customRender: ({ text }: any) => {
-    const isYes = text === 1 || text === '1';
-    return h(
-      Tag,
-      {
-        color: isYes ? 'success' : 'error', // Antdv Tag 的颜色预设
-        style: { margin: 0 } // 去除默认 margin，使其在表格中对齐更好
-      },
-      () => isYes ? '是' : '否'
-    );
+      const isYes = text === 1 || text === "1";
+      return h(
+        Tag,
+        {
+          color: isYes ? "success" : "error", // Antdv Tag 的颜色预设
+          style: { margin: 0 }, // 去除默认 margin，使其在表格中对齐更好
+        },
+        () => (isYes ? "是" : "否")
+      );
+    },
   },
+  {
+    dataIndex: "direction",
+    key: "direction",
+    title: "游向",
+    width: 80,
+    customRender: ({ text }: any) =>
+      direction.value.find((item: any) => item.itemCode === text)?.dictName || "-",
   },
-  { dataIndex: "direction", key: "direction", title: "游向", width: 80 },
   { dataIndex: "fcnt", key: "fcnt", title: "过鱼数量(尾)", width: 120 },
   { dataIndex: "fsz", key: "fsz", title: "体长(cm)", width: 110 },
   { dataIndex: "fwet", key: "fwet", title: "平均体重(g)", width: 110 },
@@ -150,7 +228,22 @@ const baseColumnsConfig: ColumnConfig[] = [
   { dataIndex: "picpth", key: "level5", title: "图片", width: 100 },
   { dataIndex: "vdpth", key: "level6", title: "视频", width: 100 },
   { dataIndex: "tm", key: "tm", title: "填报时间", width: 150 },
-  { dataIndex: "status", key: "status", title: "状态", width: 100 },
+  {
+    dataIndex: "status",
+    key: "status",
+    title: "状态",
+    width: 100,
+    customRender: ({ text }: any) => {
+      let data = guoyuStatus.value.find((item: any) => item.itemCode === text);
+      return h(
+        Tag,
+        {
+          color: data?.custom1 || "error", // Antdv Tag 的颜色预设
+        },
+        () => data?.dictName || "-"
+      );
+    },
+  },
 ];
 
 // --- 状态定义 ---
@@ -158,6 +251,7 @@ const visible = ref(false); // 导入预览 Modal
 
 // 编辑相关状态
 const editModalVisible = ref(false);
+const isView = ref(false);
 const currentRecord = ref<FormData | null>(null);
 const submitLoading = ref(false);
 
@@ -175,7 +269,6 @@ const fileLoading = ref(false);
 // 行内编辑 Key (用于导入预览表格)
 const editingKey = ref<string | number>("");
 
-
 // --- 辅助函数 ---
 
 // 从 Zip 获取 Blob URL
@@ -235,7 +328,7 @@ const columns = computed(() => {
       key: "action",
       dataIndex: "action",
       fixed: "right",
-      width: 100,
+      width: 200,
       align: "center",
     },
   ];
@@ -256,43 +349,42 @@ const modalColumns = computed(() => {
   //   message.success("行数据已删除");
   // };
 
-  return baseColumnsConfig
-    .map((col) => ({
-      ...col,
-      customRender: ({ text, record, index }: any) => {
-        const editing = isEditing(record, index);
+  return baseColumnsConfig.map((col) => ({
+    ...col,
+    customRender: ({ text, record, index }: any) => {
+      const editing = isEditing(record, index);
 
-        // 如果是媒体列
-        if (col.dataIndex === "level5" || col.dataIndex === "level6") {
-          if (editing) {
-            // 返回 Input 组件的 VNode 或标识，实际需用 slot 或 h 函数
-            return "Input编辑中";
-          }
-          return col.dataIndex === "level5" ? "查看图片" : "播放视频";
-        }
-
-        // 普通列
+      // 如果是媒体列
+      if (col.dataIndex === "level5" || col.dataIndex === "level6") {
         if (editing) {
-          // 返回 Input 组件标识
+          // 返回 Input 组件的 VNode 或标识，实际需用 slot 或 h 函数
           return "Input编辑中";
         }
-        return text;
-      },
-      // Antdv 支持通过 slots 自定义单元格内容以实现交互
-      slots: { customRender: `cell-${col.dataIndex}` },
-    }))
-    // .concat({
-    //   title: "操作",
-    //   dataIndex: "operation",
-    //   fixed: "right",
-    //   width: 140,
-    //   align: "center",
-    //   customRender: ({ record, index }: any) => {
-    //     const editable = isEditing(record, index);
-    //     return editable ? "保存/取消" : "修改/删除";
-    //   },
-    //   slots: { customRender: "cell-operation" },
-    // });
+        return col.dataIndex === "level5" ? "查看图片" : "播放视频";
+      }
+
+      // 普通列
+      if (editing) {
+        // 返回 Input 组件标识
+        return "Input编辑中";
+      }
+      return text;
+    },
+    // Antdv 支持通过 slots 自定义单元格内容以实现交互
+    slots: { customRender: `cell-${col.dataIndex}` },
+  }));
+  // .concat({
+  //   title: "操作",
+  //   dataIndex: "operation",
+  //   fixed: "right",
+  //   width: 140,
+  //   align: "center",
+  //   customRender: ({ record, index }: any) => {
+  //     const editable = isEditing(record, index);
+  //     return editable ? "保存/取消" : "修改/删除";
+  //   },
+  //   slots: { customRender: "cell-operation" },
+  // });
 });
 
 // --- 业务逻辑方法 ---
@@ -301,17 +393,21 @@ const handleAdd = () => {
   currentRecord.value = null;
   editModalVisible.value = true;
 };
-
-const handleEdit = (record: any) => {
+// 修改
+const handleEdit = (record: any, type: string) => {
+  if (type == "view") {
+    isView.value = true;
+  } else {
+    isView.value = false;
+  }
   currentRecord.value = { ...record };
   editModalVisible.value = true;
 };
 
-// 删除过鱼数据
+// 单个/批量 删除过鱼数据
 const handleDelete = (ids: any[]) => {
-  console.log(ids)
   Modal.confirm({
-    title: "是否确认删除选中数据吗?",
+    title: "是否确认 删除 选中数据吗?",
     onOk: async () => {
       let res: any = await delFishDraft(ids);
       if (res && res?.code == 0) {
@@ -321,28 +417,132 @@ const handleDelete = (ids: any[]) => {
     },
   });
 };
-// 批量删除
-const batchDel = () => { 
+// 批量删除 - 按钮
+const batchDelBtn = () => {
   handleDelete(batchData.value);
 };
+//单个/ 批量提交过鱼数据
+const handleSubmit = (ids: any[]) => {
+  Modal.confirm({
+    title: "是否 提交 选中数据吗?",
+    onOk: async () => {
+      let res: any = await submitFishDraft(ids);
+      if (res && res?.code == 0) {
+        message.success("提交成功");
+        tableRef.value?.getList();
+      }
+    },
+  });
+};
+// 批量提交-按钮
+const submitBtn = async () => {
+  handleSubmit(batchData.value);
+};
+
+// 单个/ 批量审批过鱼数据
+const handleSuccess = (ids: any[]) => {
+  let rejectReason = "";
+  Modal.confirm({
+    title: "是否确认 审批通过 选中数据?",
+    // 使用 h 函数创建内容
+    content: h("div", { style: "margin-top: 10px;" }, [
+      h("div", { style: "margin-bottom: 8px;" }, [
+        h("span", { style: "color: red;" }, "* "),
+        h("span", "审批原因："),
+      ]),
+      h("textarea", {
+        class: "ant-input", // 使用 antdv 的样式类，使其看起来像 Antdv 输入框
+        placeholder: "请输入审批原因",
+        rows: 4,
+        style: {
+          width: "100%",
+          resize: "none",
+          border: "1px solid #d9d9d9",
+          padding: "8px",
+          borderRadius: "4px",
+        },
+        // 监听输入事件，更新局部变量
+        onInput: (e: Event) => {
+          rejectReason = (e.target as HTMLTextAreaElement).value;
+        },
+      }),
+    ]),
+    okText: "确认审批",
+    cancelText: "取消",
+    onOk: async () => {
+      let res: any = await successFishDraft({ ids: ids, approveComment: rejectReason });
+      if (res && res?.code == 0) {
+        message.success("审批成功");
+        tableRef.value?.getList();
+      }
+    },
+  });
+};
+// 批量审批-按钮
+const successBtn = async () => {
+  handleSuccess(batchData.value);
+};
+
+// 批量驳回过鱼数据
+const handleReject = (id: any) => {
+  let rejectReason = "";
+
+  Modal.confirm({
+    title: "是否确认 驳回 选中数据?",
+    // 使用 h 函数创建内容
+    content: h("div", { style: "margin-top: 10px;" }, [
+      h("div", { style: "margin-bottom: 8px;" }, [
+        h("span", { style: "color: red;" }, "* "),
+        h("span", "驳回原因："),
+      ]),
+      h("textarea", {
+        class: "ant-input", // 使用 antdv 的样式类，使其看起来像 Antdv 输入框
+        placeholder: "请输入驳回原因",
+        rows: 4,
+        style: {
+          width: "100%",
+          resize: "none",
+          border: "1px solid #d9d9d9",
+          padding: "8px",
+          borderRadius: "4px",
+        },
+        // 监听输入事件，更新局部变量
+        onInput: (e: Event) => {
+          rejectReason = (e.target as HTMLTextAreaElement).value;
+        },
+      }),
+    ]),
+    okText: "确认驳回",
+    cancelText: "取消",
+    onOk: async () => {
+      // 校验驳回原因不能为空
+      if (!rejectReason || rejectReason.trim() === "") {
+        message.warning("请输入驳回原因");
+        return Promise.reject(); // 阻止 Modal 关闭
+      }
+
+      let res: any = await rejectFishDraft({ id: id, rejectReason: rejectReason });
+      if (res && res?.code == 0) {
+        message.success("驳回成功");
+        tableRef.value?.getList();
+      }
+    },
+  });
+};
 // 多选
-const handleSelectionChange = (keys: any) => { 
+const handleSelectionChange = (keys: any) => {
   batchData.value = keys;
 };
 const editModalCancel = () => {
   editModalVisible.value = false;
 };
-
+// 编辑/新增-按钮
 const handleEditSubmit = async (values: FormData) => {
   submitLoading.value = true;
-  console.log(values);
-  // 模拟异步请求
-  // setTimeout(() => {
   if (currentRecord.value) {
     // 编辑逻辑
-    
     let res: any = await editFishDraft({
-      ...values
+      ...values,
     });
     if (res && res?.code == 0) {
       message.success("编辑成功");
@@ -350,27 +550,10 @@ const handleEditSubmit = async (values: FormData) => {
       tableRef.value?.getList();
     }
     submitLoading.value = false;
-    // const newData = tableData.value.map((item) => {
-    //   // 简单比较，实际建议用 ID
-    //   if (JSON.stringify(item) === JSON.stringify(currentRecord.value)) {
-    //     // 注意：浅比较可能不够，需根据实际 ID
-    //     return { ...item, ...values };
-    //   }
-    //   return item;
-    // });
-    // // 更稳妥的方式是通过 key 查找
-    // const targetIndex = tableData.value.findIndex(
-    //   (item) => item.key === currentRecord.value?.key
-    // );
-    // if (targetIndex > -1) {
-    //   tableData.value[targetIndex] = { ...tableData.value[targetIndex], ...values };
-    // }
   } else {
     // 新增逻辑
     let res: any = await addFishDraft({
       ...values,
-      tm: dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
-      stcd: 1,
     });
     if (res && res?.code == 0) {
       message.success("新增成功");
@@ -379,152 +562,154 @@ const handleEditSubmit = async (values: FormData) => {
     }
     submitLoading.value = false;
   }
-  // }, 500);
-};
-
-const parseExcelFile = async (fileName: string, arrayBuffer: ArrayBuffer) => {
-  try {
-    const workbook = XLSX.read(arrayBuffer, {
-      type: "array",
-      cellDates: true, // 【关键】将日期单元格解析为 JS Date 对象
-      dateNF: "yyyy-mm-dd", // 【关键】指定日期输出格式
-    });
-    const firstSheetName = workbook.SheetNames[0];
-    if (!firstSheetName) throw new Error("Excel文件中没有工作表");
-    const worksheet = workbook.Sheets[firstSheetName];
-    const jsonData: any[] = XLSX.utils.sheet_to_json(worksheet);
-    return jsonData;
-  } catch (error) {
-    console.error(`解析文件 ${fileName} 失败:`, error);
-    message.error(`文件 ${fileName} 解析失败`);
-    return [];
-  }
 };
 
 const handleModalOk = () => {
-  tableData.value = [...fileTableData.value];
-  visible.value = false;
-  message.success("数据已导入至列表");
+  Modal.confirm({
+    title: "是否提交导入数据?",
+    onOk: async () => {
+      // tableData.value = [...fileTableData.value];
+      visible.value = false;
+      editingKey.value = "";
+      message.success("数据已导入至列表");
+      // let res: any = await submitImportTask(ids);
+      // if (res && res?.code == 0) {
+      //   message.success("审批成功");
+      //   tableRef.value?.getList();
+      // }
+    },
+  });
 };
 
 const handleModalCancel = () => {
-  visible.value = false;
-  editingKey.value = "";
+  Modal.confirm({
+    title: "是否取消导入数据?",
+    onOk: async () => {
+      visible.value = false;
+      editingKey.value = "";
+      // let res: any = await cancelImportTask(ids);
+      // if (res && res?.code == 0) {
+      //   message.success("审批成功");
+      //   tableRef.value?.getList();
+      // }
+    },
+  });
 };
 
-const importBtn = async (file: File) => {
-  fileLoading.value = true;
-  editingKey.value = "";
-  const hideMessage = message.loading("正在解析压缩包...", 0);
 
-  try {
-    const zip = await JSZip.loadAsync(file);
-    const zipPathMap: Record<string, string> = {};
+const handleFileSelect = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (!file) return;
 
-    // 构建路径映射
-    zip.forEach((relativePath, zipEntry) => {
-      if (!zipEntry.dir) {
-        const lowerPath = relativePath.toLowerCase();
-        zipPathMap[lowerPath] = relativePath;
-        const pathParts = relativePath.split("/");
-        for (let i = 0; i < pathParts.length; i++) {
-          const subPath = pathParts.slice(i).join("/");
-          if (subPath) zipPathMap[subPath.toLowerCase()] = relativePath;
-        }
-      }
-    });
+  // 校验文件大小 (50MB)
+  const maxSize = 50 * 1024 * 1024;
+  if (file.size > maxSize) {
+    message.error("文件大小不能超过50MB");
+    resetFileInput();
+    return;
+  }
 
-    const fileNames = Object.keys(zip.files);
-    if (fileNames.length === 0) {
-      hideMessage();
-      message.warning("压缩包为空");
-      fileLoading.value = false;
-      return;
-    }
+  // 校验文件类型
+  const isZip =
+    file.name.toLowerCase().endsWith(".zip") ||
+    file.type === "application/zip" ||
+    file.type === "application/x-zip-compressed";
 
-    let allExcelData: any[] = [];
-    for (const fileName of fileNames) {
-      const zipEntry = zip.files[fileName];
-      if (zipEntry.dir) continue;
-      if (!fileName.match(/\.(xls|xlsx)$/i)) continue;
+  if (!isZip) {
+    message.error("请选择.zip格式的压缩包");
+    resetFileInput();
+    return;
+  }
 
-      try {
-        const arrayBuffer = await zipEntry.async("arraybuffer");
-        const data = await parseExcelFile(fileName, arrayBuffer);
-        if (!data || data.length === 0) continue;
+  // props.importBtn(file);
+  resetFileInput();
+};
 
-        const transformedData = await Promise.all(
-          data.map(async (item: any) => {
-            const newObj: any = {};
-            for (const excelKey in item) {
-              if (!Object.prototype.hasOwnProperty.call(item, excelKey)) continue;
-              const value = item[excelKey];
-              // 模糊匹配列标题
-              const matchedCol = baseColumnsConfig.find(
-                (col) => excelKey.includes(col.title) || col.title.includes(excelKey)
-              );
-
-              if (matchedCol) {
-                let finalValue = value;
-                // 处理图片和视频路径提取
-                if (
-                  (matchedCol.dataIndex === "level5" ||
-                    matchedCol.dataIndex === "level6") &&
-                  value &&
-                  typeof value === "string"
-                ) {
-                  const trimPath = value.trim().replace(/\\/g, "/");
-                  if (trimPath) {
-                    const searchKey = trimPath.toLowerCase();
-                    const realPath = zipPathMap[searchKey];
-                    if (realPath) {
-                      try {
-                        const zipFile = zip.file(realPath);
-                        if (zipFile) {
-                          const blob = await zipFile.async("blob");
-                          finalValue = URL.createObjectURL(blob);
-                        }
-                      } catch (e) {
-                        console.error(`Failed to extract blob for: ${realPath}`, e);
-                      }
-                    }
-                  }
-                }
-                newObj[matchedCol.dataIndex] = finalValue;
-              }
-            }
-            return newObj;
-          })
-        );
-        allExcelData = [...allExcelData, ...transformedData];
-      } catch (err) {
-        console.error(`读取文件 ${fileName} 失败`, err);
-      }
-    }
-
-    fileTableData.value = allExcelData;
-    visible.value = true;
-    hideMessage();
-    message.success(`解析完成，共获取 ${allExcelData.length} 条数据`);
-  } catch (error) {
-    hideMessage();
-    console.error("ZIP 解析失败:", error);
-    message.error("文件格式错误或解析失败");
-  } finally {
-    fileLoading.value = false;
+const resetFileInput = () => {
+  if (fileInputRef.value) {
+    fileInputRef.value.value = "";
   }
 };
+const importBtn = async (file: File) => {
+  let res: any = await checkImportStatus();
+  console.log(res)
+  // fileInputRef.value?.click();
+  // fileLoading.value = true;
+  // editingKey.value = "";
 
-const saveBtn = async () => {
-  // TODO: 实现保存逻辑
-  console.log("Save button clicked");
+  // try {
+  //   const formData = new FormData();
+  //   formData.append("file", file);
+  //   let res: any = await importFishZip(formData);
+  //   console.log(res);
+  //   visible.value = true;
+  // } catch (error) {
+  // } finally {
+  //   // fileLoading.value = false;
+  // }
 };
-
+const handleReset = (values) => {
+  handleSearchFinish(values);
+};
+// 搜索-按钮
 const handleSearchFinish = (values: any) => {
-  console.log(values);
-  // const newSearchData = { ...searchData.value, ...e };
-  // searchData.value = newSearchData;
-  // getData(newSearchData, label);
+  const filters = [
+    values.ftp && {
+      field: "ftp",
+      operator: "eq",
+      dataType: "string",
+      value: values.ftp,
+    },
+    {
+      field: "TM",
+      operator: "gte",
+      dataType: "date",
+      value: values.strdt[0],
+    },
+    {
+      field: "TM",
+      operator: "lte",
+      dataType: "date",
+      value: values.strdt[1],
+    },
+    values.direction && {
+      field: "direction",
+      operator: "eq",
+      dataType: "string",
+      value: values.direction,
+    },
+    values.status && {
+      field: "status",
+      operator: "eq",
+      dataType: "string",
+      value: values.status,
+    },
+    values.stcd && {
+      field: "stcd",
+      operator: "eq",
+      dataType: "string",
+      value: values.stcd,
+    },
+    values.rstcd && {
+      field: "rstcd",
+      operator: "eq",
+      dataType: "string",
+      value: values.rstcd,
+    },
+    values.baseId !== "all" && {
+      field: "baseId",
+      operator: "eq",
+      dataType: "string",
+      value: values.baseId,
+    },
+  ].filter(Boolean);
+
+  const filter = {
+    logic: "and",
+    filters: filters,
+  };
+  tableRef.value?.getList(filter);
 };
 
 const closeVideoPreview = () => {
@@ -533,7 +718,14 @@ const closeVideoPreview = () => {
 };
 
 // --- 生命周期 ---
-onMounted(() => {});
+onMounted(() => {
+  getDictItemsByCode({ dictCode: "direction" }).then((res) => {
+    direction.value = res.data;
+  });
+  getDictItemsByCode({ dictCode: "guoyuStatus" }).then((res) => {
+    guoyuStatus.value = res.data;
+  });
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
index 27ab4a0..98f360f 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
@@ -1,10 +1,11 @@
 <template>
   <a-modal
-    :title="isEdit ? '编辑数据' : '新增数据'"
+    :title="isView ? '查看数据' : isEdit ? '编辑数据' : '新增数据'"
     v-model:open="modalVisible"
     :confirm-loading="loading"
     width="800px"
     :destroy-on-close="true"
+    :footer="isView ? null : undefined"
     @cancel="handleCancel"
     @ok="handleOk"
   >
@@ -17,21 +18,58 @@
     >
       <a-row :gutter="16">
         <a-col :span="12">
-          <a-form-item label="水电基地" name="engName">
-            <a-input v-model:value="formData.engName" placeholder="请输入水电基地" />
+          <a-form-item label="水电基地" name="baseId">
+            <a-select
+              v-model:value="formData.baseId"
+              :loading="baseLoading"
+              placeholder="请选择水电基地"
+              :disabled="isView"
+              @change="baseChange"
+            >
+              <a-select-option
+                v-for="opt in baseOption"
+                :key="opt.baseid"
+                :value="opt.baseid"
+              >
+                {{ opt.basename }}
+              </a-select-option>
+            </a-select>
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item label="电站名称" name="baseName">
-            <a-input v-model:value="formData.baseName" placeholder="请输入电站名称" />
+          <a-form-item label="电站名称" name="rstcd">
+            <a-select
+              v-model:value="formData.rstcd"
+              :loading="engLoading"
+              placeholder="请选择电站名称"
+              :disabled="isView"
+              @change="engChange"
+            >
+              <a-select-option v-for="opt in engOption" :key="opt.stcd" :value="opt.stcd">
+                {{ opt.ennm }}
+              </a-select-option>
+            </a-select>
           </a-form-item>
         </a-col>
       </a-row>
 
       <a-row :gutter="16">
         <a-col :span="12">
-          <a-form-item label="过鱼设施名称" name="fpname">
-            <a-input v-model:value="formData.fpname" placeholder="请输入过鱼设施名称" />
+          <a-form-item label="过鱼设施" name="stcd">
+            <a-select
+              v-model:value="formData.stcd"
+              :loading="fpssLoading"
+              placeholder="请选择过鱼设施"
+              :disabled="isView"
+            >
+              <a-select-option
+                v-for="opt in fpssOption"
+                :key="opt.stcd"
+                :value="opt.stcd"
+              >
+                {{ opt.stnm }}
+              </a-select-option>
+            </a-select>
           </a-form-item>
         </a-col>
         <a-col :span="12">
@@ -42,6 +80,7 @@
               format="YYYY-MM-DD"
               value-format="YYYY-MM-DD HH:mm:ss"
               placeholder="选择日期"
+              :disabled="isView"
             />
           </a-form-item>
         </a-col>
@@ -50,12 +89,12 @@
       <a-row :gutter="16">
         <a-col :span="12">
           <a-form-item label="鱼种类" name="ftp">
-            <a-input v-model:value="formData.ftp" placeholder="请输入鱼种类" />
+            <fishSearch v-model="formData.ftp" :disabled="isView" />
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="是否鱼苗" name="isfs">
-            <a-radio-group v-model:value="formData.isfs">
+            <a-radio-group v-model:value="formData.isfs" :disabled="isView">
               <a-radio :value="1">是</a-radio>
               <a-radio :value="0">否</a-radio>
             </a-radio-group>
@@ -70,11 +109,14 @@
               v-model:value="formData.direction"
               placeholder="请选择游向"
               allow-clear
+              :disabled="isView"
             >
-              <a-select-option value="上行">上行</a-select-option>
-              <a-select-option value="下行">下行</a-select-option>
-              <a-select-option value="上行折返">上行折返</a-select-option>
-              <a-select-option value="下行折返">下行折返</a-select-option>
+              <a-select-option
+                v-for="item in direction"
+                :key="item.itemCode"
+                :value="item.itemCode"
+                >{{ item.dictName }}</a-select-option
+              >
             </a-select>
           </a-form-item>
         </a-col>
@@ -85,6 +127,7 @@
               style="width: 100%"
               placeholder="数量"
               :min="0"
+              :disabled="isView"
             />
           </a-form-item>
         </a-col>
@@ -104,6 +147,7 @@
                 placeholder="请输入"
                 :min="0"
                 @change="validateBodyLength"
+                :disabled="isView"
               />
               <span class="px-[10px]">~</span>
               <a-input-number
@@ -112,6 +156,7 @@
                 placeholder="请输入"
                 :min="0"
                 @change="validateBodyLength"
+                :disabled="isView"
               />
             </div>
           </a-form-item>
@@ -129,6 +174,7 @@
                 placeholder="请输入"
                 :min="0"
                 @change="validateWeight"
+                :disabled="isView"
               />
               <span class="px-[10px]">~</span>
               <a-input-number
@@ -137,6 +183,7 @@
                 placeholder="请输入"
                 :min="0"
                 @change="validateWeight"
+                :disabled="isView"
               />
             </div>
           </a-form-item>
@@ -150,6 +197,7 @@
               style="width: 100%"
               placeholder="水温"
               :min="0"
+              :disabled="isView"
             />
           </a-form-item>
         </a-col>
@@ -172,21 +220,77 @@
 
 <script lang="ts" setup>
 import { ref, reactive, watch, computed } from "vue";
+import dayjs from "dayjs";
 import { message } from "ant-design-vue";
 import type { Rule } from "ant-design-vue/es/form";
+import fishSearch from "@/components/fishSearch/index.vue";
+import { getBaseDropdown, getEngInfoDropdown, getFpssDropdown } from "@/api/select";
 
 // 定义 Props
 interface Props {
   visible: boolean;
+  direction: any[];
   initialValues?: any | null;
   loading?: boolean;
+  isView?: boolean;
 }
+const baseLoading = ref(false);
+const engLoading = ref(false);
+const fpssLoading = ref(false);
+const baseOption = ref<any[]>([]);
+const engOption = ref<any[]>([]);
+const fpssOption = ref<any[]>([]);
 
 const props = withDefaults(defineProps<Props>(), {
   visible: false,
   initialValues: null,
   loading: false,
 });
+// 1. 在表单内部定义独立的电站列表状态
+
+const getBaseDropdownSelect = async () => {
+  try {
+    baseLoading.value = true;
+    const res = await getBaseDropdown({});
+    baseOption.value = res.data;
+  } catch (error) {
+    console.error("获取水电基地列表失败:", error);
+  } finally {
+    baseLoading.value = false;
+  }
+};
+const baseChange = async (baseId: string) => {
+  formData.rstcd = undefined;
+  formData.stcd = undefined;
+  await getEngInfoDropdownSelect(baseId);
+  await getFpssDropdownSelect(formData.rstcd, baseId);
+};
+const getEngInfoDropdownSelect = async (baseId: string) => {
+  try {
+    engLoading.value = true;
+    const res = await getEngInfoDropdown({ baseId });
+    engOption.value = res.data;
+  } catch (error) {
+    console.error("获取电站列表失败", error);
+  } finally {
+    engLoading.value = false;
+  }
+};
+const engChange = async (rstcd: string) => {
+  formData.stcd = undefined;
+  await getFpssDropdownSelect(rstcd, formData.baseId);
+};
+const getFpssDropdownSelect = async (rstcd: string, baseId: string) => {
+  try {
+    fpssLoading.value = true;
+    const res = await getFpssDropdown({ rstcd, baseId });
+    fpssOption.value = res.data;
+  } catch (error) {
+    console.error("获取流量列表失败", error);
+  } finally {
+    fpssLoading.value = false;
+  }
+};
 // --- 核心修复：创建计算属性处理 v-model ---
 const modalVisible = computed({
   get: () => props.visible,
@@ -208,10 +312,9 @@ const weightError = ref<string>("");
 // 表单数据模型
 const defaultFormData = reactive({
   id: undefined,
-  engName: undefined,
-  baseName: undefined,
-  fpname: undefined,
+  baseId: undefined,
   stcd: undefined,
+  rstcd: undefined,
   strdt: undefined,
   ftp: undefined,
   isfs: 0,
@@ -229,41 +332,15 @@ const defaultFormData = reactive({
 });
 const formData: any = reactive({ ...defaultFormData });
 
-// 自定义验证器：检查最小值是否小于最大值
-// const validateBodyLengthRange = (rule: any, value: any) => {
-//   const min = formData.bodyLengthMin;
-//   const max = formData.bodyLengthMax;
-
-//   // 如果两个值都存在，则进行比较
-//   if (min !== undefined && min !== null && max !== undefined && max !== null) {
-//     if (Number(min) >= Number(max)) {
-//       return Promise.reject("最小体长必须小于最大体长");
-//     }
-//   }
-//   return Promise.resolve();
-// };
-// const validateWeightRange = (rule: any, value: any) => {
-//   const min = formData.weightMin;
-//   const max = formData.weightMax;
-
-//   // 如果两个值都存在，则进行比较
-//   if (min !== undefined && min !== null && max !== undefined && max !== null) {
-//     if (Number(min) >= Number(max)) {
-//       return Promise.reject("最小体重必须小于最大体重");
-//     }
-//   }
-// };
 // 验证规则
 const rules: Record<string, Rule[]> = {
-  // engName: [{ required: true, message: "请输入水电基地", trigger: "blur" }],
-  // baseName: [{ required: true, message: "请输入电站名称", trigger: "blur" }],
-  // fpname: [{ required: true, message: "请输入过鱼设施名称", trigger: "blur" }],
+  // baseId: [{ required: true, message: "请选择水电基地", trigger: "change" }],
+  // rstcd: [{ required: true, message: "请选择电站", trigger: "change" }],
+  // stcd: [{ required: true, message: "请选择过鱼设施", trigger: "change" }],
   // strdt: [{ required: true, message: "请选择过鱼时间", trigger: "change" }],
-  // // 添加体长的验证规则
-  // bodyLengthMin: [{ validator: validateBodyLengthRange, trigger: "change" }],
-  // bodyLengthMax: [{ validator: validateBodyLengthRange, trigger: "change" }],
-  // weightMin: [{ validator: validateWeightRange, trigger: "change" }],
-  // weightMax: [{ validator: validateWeightRange, trigger: "change" }],
+  // ftp: [{ required: true, message: "请选择鱼种类", trigger: "change" }],
+  // direction: [{ required: true, message: "请选择游向", trigger: "change" }],
+  // fcnt: [{ required: true, message: "请输入过鱼数量", trigger: "change" }],
 };
 
 // 计算是否为编辑模式
@@ -276,14 +353,25 @@ const validateBodyLength = () => {
   // 重置错误
   bodyLengthError.value = "";
 
-  // 如果两个值都有，才进行比对
-  if (min !== undefined && min !== null && max !== undefined && max !== null) {
-    if (Number(min) >= Number(max)) {
-      bodyLengthError.value = "最小体长必须小于最大体长";
-      // 如果需要阻止提交，可以在 handleOk 中检查这个变量
+  // 判断是否有值 (排除 undefined, null, 和空字符串)
+  const hasMin = min !== undefined && min !== null && min !== "";
+  const hasMax = max !== undefined && max !== null && max !== "";
+
+  // 1. 如果只填了一个值，提示两个都必填
+  if ((hasMin && !hasMax) || (!hasMin && hasMax)) {
+    bodyLengthError.value = "最小体长和最大体长均需填写";
+    return false;
+  }
+
+  // 2. 如果两个值都有，才进行比对
+  if (hasMin && hasMax) {
+    // 允许相等，只禁止 min > max
+    if (Number(min) > Number(max)) {
+      bodyLengthError.value = "最小体长不能大于最大体长";
       return false;
     }
   }
+
   return true;
 };
 
@@ -294,12 +382,25 @@ const validateWeight = () => {
   // 重置错误
   weightError.value = "";
 
-  if (min !== undefined && min !== null && max !== undefined && max !== null) {
-    if (Number(min) >= Number(max)) {
-      weightError.value = "最小体重必须小于最大体重";
+  // 判断是否有值
+  const hasMin = min !== undefined && min !== null && min !== "";
+  const hasMax = max !== undefined && max !== null && max !== "";
+
+  // 1. 如果只填了一个值，提示两个都必填
+  if ((hasMin && !hasMax) || (!hasMin && hasMax)) {
+    weightError.value = "最小体重和最大体重均需填写";
+    return false;
+  }
+
+  // 2. 如果两个值都有，才进行比对
+  if (hasMin && hasMax) {
+    // 允许相等，只禁止 min > max
+    if (Number(min) > Number(max)) {
+      weightError.value = "最小体重不能大于最大体重";
       return false;
     }
   }
+
   return true;
 };
 
@@ -312,8 +413,13 @@ const initForm = () => {
     // 处理特殊字段拆分
     if (values.fwet) {
       const weights = values.fwet.split("~");
-      formData.weightMin = weights[0];
-      formData.weightMax = weights[1];
+      if (weights.length === 2) {
+        formData.weightMin = weights[0];
+        formData.weightMax = weights[1];
+      } else {
+        formData.weightMin = weights[0];
+        formData.weightMax = weights[0];
+      }
     } else {
       formData.weightMin = undefined;
       formData.weightMax = undefined;
@@ -321,8 +427,13 @@ const initForm = () => {
 
     if (values.fsz) {
       const sizes = values.fsz.split("~");
-      formData.bodyLengthMin = sizes[0];
-      formData.bodyLengthMax = sizes[1];
+      if (sizes.length === 2) {
+        formData.bodyLengthMin = sizes[0];
+        formData.bodyLengthMax = sizes[1];
+      } else {
+        formData.bodyLengthMin = sizes[0];
+        formData.bodyLengthMax = sizes[0];
+      }
     } else {
       formData.bodyLengthMin = undefined;
       formData.bodyLengthMax = undefined;
@@ -356,6 +467,9 @@ watch(
   (newVisible) => {
     if (newVisible) {
       // 弹窗打开时，初始化数据
+      getBaseDropdownSelect();
+      getEngInfoDropdownSelect(formData.baseId);
+      getFpssDropdownSelect(formData.rstcd, formData.baseId);
       initForm();
     } else {
       // 弹窗关闭时，可以选择是否重置，或者留给下次打开时处理
@@ -378,8 +492,8 @@ const resetForm = () => {
   }
   Object.assign(formData, defaultFormData);
   // 清空手动验证的错误信息
-  bodyLengthError.value = '';
-  weightError.value = '';
+  bodyLengthError.value = "";
+  weightError.value = "";
 };
 
 // 取消操作
@@ -402,13 +516,41 @@ const handleOk = async () => {
     }
     // 验证表单
     await formRef.value.validate();
+    let fwet = "";
+    if (
+      formData.weightMin == formData.weightMax &&
+      formData.weightMin != undefined &&
+      formData.weightMax != undefined
+    ) {
+      fwet = formData.weightMin;
+    } else if (formData.weightMin == undefined && formData.weightMax == undefined) {
+      fwet = "-";
+    } else {
+      fwet = formData.weightMin + "~" + formData.weightMax;
+    }
+    let fsz = "";
+    if (
+      formData.bodyLengthMin == formData.bodyLengthMax &&
+      formData.bodyLengthMin != undefined &&
+      formData.bodyLengthMax != undefined
+    ) {
+      fsz = formData.bodyLengthMin;
+    } else if (
+      formData.bodyLengthMin == undefined &&
+      formData.bodyLengthMax == undefined
+    ) {
+      fsz = "-";
+    } else {
+      fsz = formData.bodyLengthMin + "~" + formData.bodyLengthMax;
+    }
     // 准备提交数据
     const submitValues = {
       ...formData,
-      fwet: formData.weightMin + "~" + formData.weightMax,
-      fsz: formData.bodyLengthMin + "~" + formData.bodyLengthMax,
+      fwet: fwet,
+      fsz: fsz,
     };
-
+    if (!formData.id)  submitValues.tm = dayjs().format("YYYY-MM-DD HH:mm:ss")
+    console.log(submitValues);
     emit("ok", submitValues);
   } catch (error) {
     console.error("Validate Failed:", error);
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue
index 70e2c9d..281fb72 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue
@@ -1,52 +1,38 @@
 <template>
   <div class="guoYuSheShiShuJuTianBao-search">
-    <!-- 隐藏的文件输入框 -->
-    <input
-      ref="fileInputRef"
-      type="file"
-      accept=".zip,application/zip,application/x-zip-compressed"
-      style="display: none"
-      @change="handleFileSelect"
-    />
-
     <BasicSearch
       ref="basicSearchRef"
       :searchList="searchList"
       :initial-values="initSearchData"
+      @reset="handleReset"
       @finish="onSearchFinish"
       @values-change="onValuesChange"
     >
-      <template #typeDate="{ onChange }">
-        <fishSearch
-          v-model="localTypeDate"
-          width="280px"
-          :options="options"
-          @update:modelValue="onChange"
-        />
+      <template #ftp="{ onChange }">
+        <fishSearch v-model="localTypeDate" width="280px" @update:modelValue="onChange" />
       </template>
       <!-- 自定义重置及操作按钮区域 -->
       <template #actions>
         <a-tooltip title="新增">
           <a-button @click="props.handleAdd"> 新增 </a-button>
         </a-tooltip>
-
         <a-tooltip title="导入zip">
-          <a-button v-hasPerm="['sjtb:import-zip']" @click="triggerFileInput">
+          <a-button v-hasPerm="['sjtb:import-zip']" @click="props.importBtn">
             导入zip
           </a-button>
         </a-tooltip>
-        <a-button @click="props.batchDel" :disabled="batchData.length === 0">
+        <a-button @click="props.batchDelBtn" :disabled="batchData.length === 0">    
           批量删除
         </a-button>
         <a-tooltip title="提交数据">
-          <a-button @click="props.saveBtn">
+          <a-button @click="props.submitBtn" :disabled="batchData.length === 0">
             <template #icon><SaveOutlined /></template>
             提交数据
           </a-button>
         </a-tooltip>
 
         <a-tooltip title="批量审批">
-          <a-button @click="props.saveBtn">
+          <a-button @click="props.successBtn" :disabled="batchData.length === 0">
             <template #icon><CheckSquareOutlined /></template>
             批量审批
           </a-button>
@@ -77,224 +63,43 @@ import BasicSearch from "@/components/BasicSearch/index.vue"; // 确保路径正
 import { DateSetting } from "@/utils/enumeration";
 import { checkPerm } from "@/directive/permission";
 import fishSearch from "@/components/fishSearch/index.vue";
+import { useShuJuTianBaoStore } from "@/store/modules/shuJuTianBao";
 
 // --- Props & Emits ---
 interface Props {
+  direction: any[];
+  guoyuStatus: any[];
   importBtn: (file: File) => void;
-  batchDel: () => void;
-  saveBtn: () => void;
+  batchDelBtn: () => void;
+  submitBtn: () => void;
+  successBtn: () => void;
   batchData: any[];
   handleAdd: () => void;
 }
+const shuJuTianBaoStore = useShuJuTianBaoStore();
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-  (e: "searchFinish", values: any, label: string): void;
+  (e: "reset", values: any): void;
+  (e: "searchFinish", values: any): void;
 }>();
-const localTypeDate = ref<string[]>([]);
+const localTypeDate = ref<string>(null);
 // --- State ---
+const basicSearchRef = ref<any>(); // 1. 定义 ref
 const fileInputRef = ref<HTMLInputElement>();
-const options = ref<any>([
-  {
-    _tls: {},
-    id: "00DDF2A72147B2115384F64DDFE26A5E",
-    recordUser: null,
-    recordTime: null,
-    modifyTime: null,
-    displayRecordUser: null,
-    departmentId: null,
-    displayDepartment: null,
-    index: 1,
-    name: "异唇裂腹鱼",
-    code: null,
-    nameEn: null,
-    alias: null,
-    description: null,
-    logo: null,
-    introduce: null,
-    inffile: null,
-    genus: null,
-    family: null,
-    species: null,
-    fsz: null,
-    type: 1,
-    typeName: "淡水",
-    rare: null,
-    specOrigin: null,
-    specOriginName: null,
-    ptype: null,
-    ptypeName: null,
-    rvcd: "null",
-    rvcdName: "",
-    zyFishId: "00DDF2A72147B2115384F64DDFE26A5E",
-    habitMigrat: null,
-    feedingHabit: null,
-    spawnCharact: null,
-    spawnMonth: null,
-    food: null,
-    timeFeed: null,
-    orignDate: null,
-    pretemp: null,
-    flowRate: null,
-    depth: null,
-    botmMater: null,
-    wqtq: null,
-    habitat: null,
-    situation: null,
-    resourceType: null,
-    shapedesc: null,
-    protectlvl: null,
-    habitation: null,
-    fid: null,
-    enable: null,
-    internal: null,
-    orderIndex: null,
-    filterContent: null,
-    platformId: null,
-    isTempStorage: null,
-  },
-  {
-    _tls: {},
-    id: "0249006974f34c288d6cb4df54e3b19d",
-    recordUser: null,
-    recordTime: null,
-    modifyTime: null,
-    displayRecordUser: null,
-    departmentId: null,
-    displayDepartment: null,
-    index: 2,
-    name: "匙吻鲟",
-    code: null,
-    nameEn: "Polyodon spathula",
-    alias: "美国匙吻鲟、鸭嘴鲟",
-    description:
-      "匙吻鲟(Polyodonspathula)亦称匙吻猫鱼(spoonbillcat)。产于北美洲的原始鱼，为桨吻鲟(paddlefish)的一种。属鲟形目、匙吻鲟科，是北美洲的一种名贵大型淡水经济鱼类。匙吻鲟的显著特点是吻呈扁平桨状，特别长。鱼的体表光滑无鳞，背部黑蓝灰色，有一些斑点在其间，体侧有点状赭色，腹部白色。个体大，这种大型淡水鱼可以长到220厘米，重达90公斤以上。",
-    logo: "20240527221754634033127655455265",
-    introduce: null,
-    inffile:
-      "20240527221811830658320352201158,20240527221805865127213075311524,20240527221822527347221377607671,20240527221828072460253583084314,20240527221800311481326028334838,20240527221817630761245563388673",
-    genus: "匙吻鲟属",
-    family: "匙吻鲟科",
-    species: "匙吻鲟",
-    fsz: "85~220",
-    type: 1,
-    typeName: "淡水",
-    rare: null,
-    specOrigin: 2,
-    specOriginName: "外来鱼类",
-    ptype: 4,
-    ptypeName: "易危",
-    rvcd: "SJLY148",
-    rvcdName: "大渡河",
-    zyFishId: "0249006974f34c288d6cb4df54e3b19d",
-    habitMigrat: "繁殖洄游",
-    feedingHabit: "肉食性",
-    spawnCharact: "粘性卵类型",
-    spawnMonth: "4-5",
-    food: "主要以浮游动物，也以甲壳类和双壳类生物为食",
-    timeFeed: "夜间觅食",
-    orignDate:
-      "匙吻鲟在美国密西西比河流域的22个洲均有发现。包括密苏里河到蒙大拿州，俄亥俄河，和它的主要支流流域。雄鱼在7～9龄达到性成熟，雌鱼晚一年，相对怀卵量约为每克体重3.5粒。匙吻鲟多在4～5月繁殖，适宜水温为16～18℃，繁殖期会游到江河上游产卵，受精卵灰黑色，直径2～2.5毫米，有黏性，往往粘在砾石上孵化，孵化期6～7天。",
-    pretemp: "0～37℃",
-    flowRate: "0.3m/s",
-    depth: "2~2.5",
-    botmMater: "泥质",
-    wqtq: "适宜的pH范围为6.5～8，对溶解氧要求较高，应在5毫克/升以上。",
-    habitat: null,
-    situation: null,
-    resourceType: null,
-    shapedesc:
-      "匙吻鲟有一个形如匙柄的长吻，长约为体长的三分之一。身体流线型，体表光滑无鳞。眼小，口较大，位于吻末端的腹面，不能伸缩；上颌背面具有粗糙的颗粒感觉器。鳃盖骨大而向后延伸，鳃盖膜长达胸鳍至腹鳍的1/2处。头部有一喷水孔和喷水腔。胸鳍较小，下位；腹鳍腹位，背鳍起点在腹鳍之后。尾鳍分叉，歪尾型，上叶长于下叶，尾柄披有梗栉状的甲鳞。背部黑蓝灰色，常有一些斑点间于其中，两侧逐渐变浅，体侧有点状褐色，腹部白色。",
-    protectlvl: null,
-    habitation: "缓流型；广温性；中上层水域",
-    fid: null,
-    enable: null,
-    internal: null,
-    orderIndex: null,
-    filterContent: null,
-    platformId: null,
-    isTempStorage: null,
-  },
-  {
-    _tls: {},
-    id: "02A23B169BF240589B2C37C5E81A8DC2",
-    recordUser: null,
-    recordTime: null,
-    modifyTime: null,
-    displayRecordUser: null,
-    departmentId: null,
-    displayDepartment: null,
-    index: 3,
-    name: "南方马口鱼",
-    code: null,
-    nameEn: "Chinese hooksnout carp",
-    alias:
-      "午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公午仔鱼、山涟仔、桃花鱼、山鳡、坑爬、宽口、大口扒、扯口婆、红车公",
-    description:
-      "南方马口鱼，Opsariichthys uncirostris bidens （Gunther，1873），是鲤科马口鱼属的一种生活的溪流中的小型鱼类。体长，稍侧扁，腹部圆。头稍尖，头长大于体高。吻钝，吻长远比其宽为大。口特大，下颌前端突起，两侧面各有一凹陷，恰与上颌突出部分吻合。下咽齿3行。鳞圆形，背鳍条2，7，无硬刺。臀鳍条3，8-10。背部黑灰色，体侧下半部及腹面银白色，喉部、口唇及各鳍橙黄，背鳍上有黑色的小斑点，眼上部有一红色斑点，体两侧具有浅蓝色的垂直条纹。生殖季节时，雄鱼体色更为鲜艳。",
-    logo: "20240527192500111683624865306342",
-    introduce: null,
-    inffile:
-      "20240527192505300717052825727341,20240527192533035616525871580354,20240527192510217883087850433201,20240527192516128514164206355182,20240527192522835236402141341053,20240527192527583177528213025212",
-    genus: "马口鱼属",
-    family: "鲤科",
-    species: "南方马口鱼",
-    fsz: "7～20",
-    type: 1,
-    typeName: "淡水",
-    rare: null,
-    specOrigin: 1,
-    specOriginName: "本土",
-    ptype: 4,
-    ptypeName: "易危",
-    rvcd: "null",
-    rvcdName: "",
-    zyFishId: "02A23B169BF240589B2C37C5E81A8DC2",
-    habitMigrat: "定居型",
-    feedingHabit: "肉食性",
-    spawnCharact: "沉性卵类型",
-    spawnMonth: "6-8",
-    food: "摄食小型鱼类和水生昆虫。",
-    timeFeed: "白天觅食",
-    orignDate:
-      "产卵期在6～8月份。第一年生长较迅速，可达7～11厘米。1龄鱼即有繁殖能力，系小型鱼类。",
-    pretemp: "0～30℃",
-    flowRate: "0.3m/s",
-    depth: "1~1.5",
-    botmMater: "砂砾底质",
-    wqtq: "pH在7.2～7.8之内，凉爽清洁、溶氧丰富的水质",
-    habitat: null,
-    situation: null,
-    resourceType: null,
-    shapedesc:
-      "背鳍条3，7；臀鳍条3，9；侧线鳞45～47；下咽齿3行，1·4·5－4·4·1。鳃耙外侧10，脊椎骨35。体长为体高的3.1～4.3倍，为头长的3.5～3.9倍，为尾柄长的4.7～5.2倍，为尾柄高的10.2～11.3倍。头长为吻长的2.7～3.2倍，为眼径的5.0～6.2倍，为眼间距的3.1～3.3倍。体延长，侧扁。吻长，其长略大于宽，口大，端位，口裂向上倾斜，下颌后端延长达眼前缘，其前缘凸起，两侧凹陷，恰与上颌前端和两侧嵌合。眼中等大，位于头侧上方。鳃耙短小而稀疏。下咽齿圆柱性，顶端尖而长。侧线完全，前端弯向体侧腹方，后端向上延至尾柄正中。背鳍无硬刺，其起点至吻端稍大于至尾鳍基部的距离，胸鳍不达腹鳍，其末端可达胸、腹鳍间距的3/5处。腹鳍外缘略钝圆，起点约与背鳍不分支鳍条相对。鳔2视，后室约为前室的2倍，腹腔膜银白色。体背部灰黑色，腹部银白色，体侧有浅蓝色的垂直条纹，胸鳍、腹鳍和臀鳍为橙黄色。雄鱼在生殖期出现婚装，头部、吻部和臀部有显眼的珠星，臀鳍的第1～4根分支鳍条特别延长，全身具有很鲜艳的婚姻色。",
-    protectlvl: null,
-    habitation: "流水型；冷水性；中上水层",
-    fid: null,
-    enable: null,
-    internal: null,
-    orderIndex: null,
-    filterContent: null,
-    platformId: null,
-    isTempStorage: null,
-  },
-]);
 
 // 模拟 initSearchData
 const initSearchData = {
-  dmStcd: "008660306300000079", // 默认水电站ID，实际可能需要动态获取
-  stcd: {
-    dataDimensionData: "all",
-    dataDimensionType: "hyBase",
-    hbrvcd: "",
-    stcdId: "",
-  },
-  mway: "1",
-  typeDate: [],
+  baseId: "all",
+  stcd: null,
+  rstcd: null,
+  ftp: null,
+  status: null,
+  direction: null,
   strdt: [
-    dayjs().startOf("month").format("YYYY-MM-DD"),
-    dayjs().endOf("day").format("YYYY-MM-DD"),
+    dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss"),
+    dayjs().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
   ],
 };
 
@@ -305,7 +110,7 @@ const searchData = ref<any>({ ...initSearchData });
 const searchList: any = computed(() => [
   {
     type: "waterStation",
-    name: "engName",
+    name: "baseId",
     label: "水电基地",
     fieldProps: {
       allowClear: true,
@@ -314,24 +119,20 @@ const searchList: any = computed(() => [
   },
   {
     type: "Select",
-    name: "fpname",
+    name: "stcd",
     label: "过鱼设施",
+    values: { name: "stnm", value: "rstcd" },
     fieldProps: {
       allowClear: true,
     },
-    options: [],
+    options: shuJuTianBaoStore.fpssOption,
   },
   {
     type: "Select",
     name: "direction",
     label: "游向",
     width: 120,
-    options: [
-      { label: "上行", value: "上行" },
-      { label: "下行", value: "下行" },
-      { label: "上行折返", value: "上行折返" },
-      { label: "下行折返", value: "下行折返" },
-    ],
+    options: props.direction,
     fieldProps: {
       allowClear: true,
     },
@@ -352,10 +153,7 @@ const searchList: any = computed(() => [
     fieldProps: {
       allowClear: true,
     },
-    options: [
-      { label: "正常", value: "01" },
-      { label: "异常", value: "02" },
-    ],
+    options: props.guoyuStatus,
   },
 
   {
@@ -374,43 +172,6 @@ const searchList: any = computed(() => [
   },
 ]);
 // --- Methods ---
-
-// 1. 文件处理逻辑
-const handleFileSelect = (e: Event) => {
-  const target = e.target as HTMLInputElement;
-  const file = target.files?.[0];
-  if (!file) return;
-
-  // 校验文件大小 (50MB)
-  const maxSize = 50 * 1024 * 1024;
-  if (file.size > maxSize) {
-    message.error("文件大小不能超过50MB");
-    resetFileInput();
-    return;
-  }
-
-  // 校验文件类型
-  const isZip =
-    file.name.toLowerCase().endsWith(".zip") ||
-    file.type === "application/zip" ||
-    file.type === "application/x-zip-compressed";
-
-  if (!isZip) {
-    message.error("请选择.zip格式的压缩包");
-    resetFileInput();
-    return;
-  }
-
-  props.importBtn(file);
-  resetFileInput();
-};
-
-const resetFileInput = () => {
-  if (fileInputRef.value) {
-    fileInputRef.value.value = "";
-  }
-};
-
 const triggerFileInput = () => {
   fileInputRef.value?.click();
 };
@@ -421,52 +182,46 @@ const onSearchFinish = (values: any) => {
   // 模拟获取 label，实际可能需要根据 dmStcd 查找名称
   // 在原 React 代码中，label 来自 options.find(...)
   // 这里简化处理，直接传递 ID 或固定名称，或者你需要维护一个电站列表映射
-  const label = "默认水温站"; // TODO: 根据 values.dmStcd 查找真实名称
   // const params: any = {};
   // if (values.strdt) {
   //   params.startDate = values.strdt[0].format("YYYY-MM-DD");
   //   params.endDate = values.strdt[1].format("YYYY-MM-DD");
   // }
 
-  emit("searchFinish", values, label);
+  emit("searchFinish", values);
 };
 
 const onValuesChange = (changedValues: any, allValues: any) => {
-  // 同步更新本地 searchData，以便其他逻辑使用
+  console.log(changedValues, allValues);
   searchData.value = { ...searchData.value, ...allValues };
-
-  if (changedValues.strdt) {
-    // 如果需要在时间改变时做额外处理
-    console.log("Time changed:", changedValues.strdt);
+  // 同步更新本地 searchData，以便其他逻辑使用
+  if (changedValues.rstcd || changedValues.baseId) {
+    shuJuTianBaoStore.getFpssOption(
+      allValues.baseId == "all" ? "" : allValues.baseId,
+      allValues.rstcd
+    );
+    const formInstance = basicSearchRef.value?.formData;
+    formInstance.stcd = null;
   }
 };
 
-// const handleReset = (form: any) => {
-//   // 重置表单
-//   if (form) {
-//     form.resetFields();
-//   }
-
-//   // 重置后重新设置默认值并触发搜索
-//   nextTick(() => {
-//     if (form) {
-//       form.setFieldsValue(initSearchData);
-//     }
-//     // 触发初始搜索
-//     emit("searchFinish", initSearchData, "两河口出库水温站");
-//   });
-// };
+const handleReset = () => {
+  localTypeDate.value = null;
+  emit("reset", searchData.value);
+};
 watch(
-  () => initSearchData.typeDate,
+  () => initSearchData.ftp,
   (newVal) => {
-    localTypeDate.value = newVal || [];
+    localTypeDate.value = newVal || "";
   },
   { immediate: true }
 );
 // --- Lifecycle ---
 onMounted(() => {
   // 初始请求
-  emit("searchFinish", initSearchData, "两河口出库水温站");
+  emit("searchFinish", initSearchData);
+
+  shuJuTianBaoStore.getFpssOption("", "");
 });
 </script>
 <style lang="scss"></style>

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 2/9] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A1=AB=E6=8A=A5-?=
 =?UTF-8?q?=E5=AE=A1=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>

From 875f674f60fa1903bca3502ebd5e1f5b59b9d497 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=88=E5=85=86=E5=A2=9E?= <你的邮箱@example.com>
Date: Mon, 27 Apr 2026 09:28:16 +0800
Subject: [PATCH 3/9] =?UTF-8?q?=E8=BF=87=E9=B1=BC=E8=AE=BE=E6=96=BD?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A1=AB=E6=8A=A5=E5=AF=BC=E5=85=A5=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Copilot <copilot@github.com>
---
 .../src/api/guoYuSheShiShuJuTianBao/index.ts  |  24 +-
 frontend/src/components/BasicSearch/index.vue |  13 +
 frontend/src/components/fishSearch/index.vue  |  30 +-
 frontend/src/store/modules/shuJuTianBao.ts    |  11 +
 .../guoYuSheShiShuJuTianBaoForm.vue           |  62 +--
 .../guoYuSheShiShuJuTianBaoSearch.vue         |  35 +-
 .../guoYuSheShiShuJuTianBaoTable.vue          | 502 ++++++++++++++++++
 .../index.vue}                                | 323 ++++++-----
 frontend/tsconfig.json                        |   4 +-
 frontend/vite.config.ts                       |   2 +-
 10 files changed, 794 insertions(+), 212 deletions(-)
 rename frontend/src/views/shuJuTianBao/{ => guoYuSheShiShuJuTianBao}/guoYuSheShiShuJuTianBaoForm.vue (90%)
 rename frontend/src/views/shuJuTianBao/{ => guoYuSheShiShuJuTianBao}/guoYuSheShiShuJuTianBaoSearch.vue (79%)
 create mode 100644 frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoTable.vue
 rename frontend/src/views/shuJuTianBao/{guoYuSheShiShuJuTianBao.vue => guoYuSheShiShuJuTianBao/index.vue} (74%)

diff --git a/frontend/src/api/guoYuSheShiShuJuTianBao/index.ts b/frontend/src/api/guoYuSheShiShuJuTianBao/index.ts
index ef96df2..bd5eb6d 100644
--- a/frontend/src/api/guoYuSheShiShuJuTianBao/index.ts
+++ b/frontend/src/api/guoYuSheShiShuJuTianBao/index.ts
@@ -81,13 +81,6 @@ export function cancelImportTask(data:any) {
     data
   });
 }
-// 查询导入任务
-export function getImportTask() {
-  return request({
-    url: '/data/importTask/list',
-    method: 'get'
-  });
-}
 //检测用户导入状态
 export function checkImportStatus() {
   return request({
@@ -95,3 +88,20 @@ export function checkImportStatus() {
     method: 'get'
   });
 }
+
+// 查询用户导入导入结果
+export function getLastImportResult() {
+  return request({
+    url: '/data/fishDraft/getLastImportResult',
+    method: 'get'
+  });
+}
+
+// 批量保存草稿
+export function batchSaveDraft(data:any) {
+  return request({
+    url: '/data/fishDraft/batchSaveDraft',
+    method: 'post',
+    data
+  });
+}
diff --git a/frontend/src/components/BasicSearch/index.vue b/frontend/src/components/BasicSearch/index.vue
index a0bd480..1775b01 100644
--- a/frontend/src/components/BasicSearch/index.vue
+++ b/frontend/src/components/BasicSearch/index.vue
@@ -78,12 +78,15 @@
                     :value="formData.baseId"
                     placeholder="请选择"
                     @change="dataDimensionDataChange"
+                    show-search
+                    :filter-option="filterOption"
                     style="width: 135px"
                   >
                     <a-select-option
                       v-for="opt in shuJuTianBaoStore.baseOption"
                       :key="opt.baseid"
                       :value="opt.baseid"
+                      :label="opt.basename"
                     >
                       {{ opt.basename }}
                     </a-select-option>
@@ -92,12 +95,15 @@
                     :value="formData.rstcd"
                     placeholder="请选择电站"
                     @change="stcdIdChange"
+                    show-search
+                    :filter-option="filterOption"
                     style="width: 135px"
                   >
                     <a-select-option
                       v-for="opt in shuJuTianBaoStore.engOption"
                       :key="opt.stcd"
                       :value="opt.stcd"
+                      :label="opt.ennm"
                     >
                       {{ opt.ennm }}
                     </a-select-option>
@@ -113,11 +119,14 @@
                 :allow-clear="item.fieldProps?.allowClear"
                 :style="{ width: item.width ? item.width + 'px' : '200px' }"
                 @change="(val) => triggerManualValuesChange(item.name, val)"
+                show-search
+                :filter-option="filterOption"
               >
                 <a-select-option
                   v-for="opt in item.options"
                   :key="opt[item.values?.value] || opt.value || opt.itemCode"
                   :value="opt[item.values?.value] || opt.value || opt.itemCode"
+                  :label="opt[item.values?.name] || opt.label || opt.dictName"
                 >
                   {{ opt[item.values?.name] || opt.label || opt.dictName }}
                 </a-select-option>
@@ -207,6 +216,10 @@ const formRef = ref<any>();
 const formData = reactive<any>({});
 const rules = reactive<Record<string, any>>({});
 
+const filterOption = (inputValue: string, option: any) => {
+  if (!option.label) return false;
+  return option.label.indexOf(inputValue) !== -1;
+};
 // 2. 创建计算属性，自动过滤掉 false/null/undefined 的项
 const validSearchList = computed(() => {
   return props.searchList.filter((item) => item);
diff --git a/frontend/src/components/fishSearch/index.vue b/frontend/src/components/fishSearch/index.vue
index 9fa697d..2f78425 100644
--- a/frontend/src/components/fishSearch/index.vue
+++ b/frontend/src/components/fishSearch/index.vue
@@ -70,6 +70,9 @@
 <script lang="ts" setup>
 import { ref, onMounted, computed, watch } from "vue";
 import { getFishDictoryDropdown } from "@/api/select";
+import { useShuJuTianBaoStore } from "@/store/modules/shuJuTianBao";
+import { init } from "echarts";
+const shuJuTianBaoStore = useShuJuTianBaoStore();
 
 // --- Props & Emits ---
 interface Props {
@@ -83,7 +86,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  (e: "update:modelValue", value: string | string[]): void;
+  (e: "update:modelValue", value: string | string[], opt: any): void;
 }>();
 
 // --- State ---
@@ -149,15 +152,15 @@ const handleSelectOption = (opt: any) => {
     } else {
       newValues.push(opt.id); // 选中
     }
-    emit("update:modelValue", newValues);
+    emit("update:modelValue", newValues, opt);
   } else {
     // --- 单选逻辑 ---
     // 关键：单选模式下，直接发射当前 ID，覆盖旧值
     // 如果点击的是已选中的项，则清空（可选行为，视需求而定）
     if (props.modelValue === opt.id) {
-      emit("update:modelValue", ""); // 取消选中
+      emit("update:modelValue", "", opt); // 取消选中
     } else {
-      emit("update:modelValue", opt.id); // 选中新项
+      emit("update:modelValue", opt.id, opt); // 选中新项
       // 单选模式下，选择后通常希望关闭下拉框
       open.value = false;
     }
@@ -167,7 +170,7 @@ const handleSelectOption = (opt: any) => {
 const handleChange = (val: any) => {
   // 当 a-select 内部触发 change 时（例如删除 Tag）
   // 在单选模式下，如果用户通过键盘或删除操作改变了值，这里也会捕获
-  emit("update:modelValue", val);
+  emit("update:modelValue", val, opt);
 };
 
 const getFishNameById = (id: string) => {
@@ -182,25 +185,34 @@ watch(
   (newVal) => {
     // 如果从多选变为单选，且 modelValue 是数组，取第一个值或清空
     if (!newVal && Array.isArray(props.modelValue)) {
-      emit("update:modelValue", props.modelValue || null);
+      emit("update:modelValue", props.modelValue || null, options.value);
     }
     // 如果从单选变为多选，且 modelValue 是字符串，转为数组
     if (newVal && typeof props.modelValue === "string") {
-      emit("update:modelValue", props.modelValue ? [props.modelValue] : []);
+      emit("update:modelValue", props.modelValue ? [props.modelValue] : [], {});
     }
   }
 );
-
-onMounted(() => {
+const init = () => { 
+  let data = shuJuTianBaoStore.getFishOption();
+  if (data.length === 0) {
   loading.value = true;
   getFishDictoryDropdown()
     .then((res) => {
       options.value = res.data || [];
       loading.value = false;
+      shuJuTianBaoStore.setFishOption(options.value);
     })
     .catch(() => {
       loading.value = false;
     });
+  } else {
+    options.value = data;
+  }
+};
+
+onMounted(() => {
+  init();
 });
 </script>
 
diff --git a/frontend/src/store/modules/shuJuTianBao.ts b/frontend/src/store/modules/shuJuTianBao.ts
index fb3b513..d437d6c 100644
--- a/frontend/src/store/modules/shuJuTianBao.ts
+++ b/frontend/src/store/modules/shuJuTianBao.ts
@@ -1,12 +1,14 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue'; // 使用 ref 更简单直观
 import { getBaseDropdown, getEngInfoDropdown, getFpssDropdown } from '@/api/select';
+import { set } from 'lodash';
 
 export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
   // 1. 直接使用 ref 定义状态，确保响应式
   const fpssOption = ref<any[]>([]);
   const baseOption = ref<any[]>([]);
   const engOption = ref<any[]>([]);
+  const fishOption = ref([]);
 
   // 2. 业务逻辑方法
   const getBaseOption = async () => {
@@ -48,14 +50,23 @@ export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
       console.log(error);
     }
   };
+  const getFishOption = () => {
+    return fishOption.value;
+  };
+  const setFishOption = (data: any[]) => {
+    fishOption.value = data;
+  };
   // 3. 直接返回 ref 和方法
   // 在组件中使用时：store.baseOption 会自动解包为数组
   return {
     fpssOption,
     baseOption,
     engOption,
+    fishOption,
     getBaseOption,
     getEngOption,
     getFpssOption,
+    getFishOption,
+    setFishOption
   };
 });
\ No newline at end of file
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
similarity index 90%
rename from frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
rename to frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
index 98f360f..f456c8e 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
@@ -18,18 +18,21 @@
     >
       <a-row :gutter="16">
         <a-col :span="12">
-          <a-form-item label="水电基地" name="baseId">
+          <a-form-item label="流域" name="baseId">
             <a-select
               v-model:value="formData.baseId"
               :loading="baseLoading"
-              placeholder="请选择水电基地"
+              placeholder="请选择流域"
               :disabled="isView"
+              show-search
+              :filter-option="filterOption"
               @change="baseChange"
             >
               <a-select-option
                 v-for="opt in baseOption"
                 :key="opt.baseid"
                 :value="opt.baseid"
+                :label="opt.basename"
               >
                 {{ opt.basename }}
               </a-select-option>
@@ -43,9 +46,16 @@
               :loading="engLoading"
               placeholder="请选择电站名称"
               :disabled="isView"
+              show-search
+              :filter-option="filterOption"
               @change="engChange"
             >
-              <a-select-option v-for="opt in engOption" :key="opt.stcd" :value="opt.stcd">
+              <a-select-option
+                v-for="opt in engOption"
+                :key="opt.stcd"
+                :value="opt.stcd"
+                :label="opt.ennm"
+              >
                 {{ opt.ennm }}
               </a-select-option>
             </a-select>
@@ -61,11 +71,14 @@
               :loading="fpssLoading"
               placeholder="请选择过鱼设施"
               :disabled="isView"
+              show-search
+              :filter-option="filterOption"
             >
               <a-select-option
                 v-for="opt in fpssOption"
                 :key="opt.stcd"
                 :value="opt.stcd"
+                :label="opt.stnm"
               >
                 {{ opt.stnm }}
               </a-select-option>
@@ -76,8 +89,9 @@
           <a-form-item label="过鱼时间" name="strdt">
             <a-date-picker
               v-model:value="formData.strdt"
+              show-time
               style="width: 100%"
-              format="YYYY-MM-DD"
+              format="YYYY-MM-DD HH:mm:ss"
               value-format="YYYY-MM-DD HH:mm:ss"
               placeholder="选择日期"
               :disabled="isView"
@@ -246,15 +260,13 @@ const props = withDefaults(defineProps<Props>(), {
   initialValues: null,
   loading: false,
 });
-// 1. 在表单内部定义独立的电站列表状态
-
 const getBaseDropdownSelect = async () => {
   try {
     baseLoading.value = true;
     const res = await getBaseDropdown({});
     baseOption.value = res.data;
   } catch (error) {
-    console.error("获取水电基地列表失败:", error);
+    console.error("获取流域列表失败:", error);
   } finally {
     baseLoading.value = false;
   }
@@ -291,7 +303,6 @@ const getFpssDropdownSelect = async (rstcd: string, baseId: string) => {
     fpssLoading.value = false;
   }
 };
-// --- 核心修复：创建计算属性处理 v-model ---
 const modalVisible = computed({
   get: () => props.visible,
   set: (val) => emit("update:visible", val),
@@ -331,16 +342,19 @@ const defaultFormData = reactive({
   weightMax: undefined,
 });
 const formData: any = reactive({ ...defaultFormData });
-
+const filterOption = (inputValue: string, option: any) => {
+  if (!option.label) return false;
+  return option.label.indexOf(inputValue) !== -1;
+};
 // 验证规则
 const rules: Record<string, Rule[]> = {
-  // baseId: [{ required: true, message: "请选择水电基地", trigger: "change" }],
-  // rstcd: [{ required: true, message: "请选择电站", trigger: "change" }],
-  // stcd: [{ required: true, message: "请选择过鱼设施", trigger: "change" }],
-  // strdt: [{ required: true, message: "请选择过鱼时间", trigger: "change" }],
-  // ftp: [{ required: true, message: "请选择鱼种类", trigger: "change" }],
-  // direction: [{ required: true, message: "请选择游向", trigger: "change" }],
-  // fcnt: [{ required: true, message: "请输入过鱼数量", trigger: "change" }],
+  baseId: [{ required: true, message: "请选择流域", trigger: "change" }],
+  rstcd: [{ required: true, message: "请选择电站", trigger: "change" }],
+  stcd: [{ required: true, message: "请选择过鱼设施", trigger: "change" }],
+  strdt: [{ required: true, message: "请选择过鱼时间", trigger: "change" }],
+  ftp: [{ required: true, message: "请选择鱼种类", trigger: "change" }],
+  direction: [{ required: true, message: "请选择游向", trigger: "change" }],
+  fcnt: [{ required: true, message: "请输入过鱼数量", trigger: "change" }],
 };
 
 // 计算是否为编辑模式
@@ -409,8 +423,6 @@ const initForm = () => {
   if (props.initialValues) {
     // --- 编辑模式：回填数据 ---
     const values = props.initialValues;
-
-    // 处理特殊字段拆分
     if (values.fwet) {
       const weights = values.fwet.split("~");
       if (weights.length === 2) {
@@ -456,12 +468,10 @@ const initForm = () => {
       }
     });
   } else {
-    // --- 新增模式：重置表单 ---
     resetForm();
   }
 };
 
-// 2. 修改 watch，只监听 visible 的变化
 watch(
   () => props.visible,
   (newVisible) => {
@@ -471,20 +481,11 @@ watch(
       getEngInfoDropdownSelect(formData.baseId);
       getFpssDropdownSelect(formData.rstcd, formData.baseId);
       initForm();
-    } else {
-      // 弹窗关闭时，可以选择是否重置，或者留给下次打开时处理
-      // 通常建议在关闭时重置，或者在下次打开时根据 initialValues 判断
     }
   },
   { immediate: false } // 不需要 immediate，因为初始状态通常是 false
 );
 
-// 3. 删除原来的复杂 watch
-// 删除这段代码：
-// watch(
-//   () => [props.visible, props.initialValues],
-//   ...
-// );
 // 重置表单
 const resetForm = () => {
   if (formRef.value) {
@@ -549,7 +550,7 @@ const handleOk = async () => {
       fwet: fwet,
       fsz: fsz,
     };
-    if (!formData.id)  submitValues.tm = dayjs().format("YYYY-MM-DD HH:mm:ss")
+    if (!formData.id) submitValues.tm = dayjs().format("YYYY-MM-DD HH:mm:ss");
     console.log(submitValues);
     emit("ok", submitValues);
   } catch (error) {
@@ -560,5 +561,4 @@ const handleOk = async () => {
 </script>
 
 <style scoped>
-/* 如有需要，添加局部样式 */
 </style>
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue
similarity index 79%
rename from frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue
rename to frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue
index 281fb72..f3fa471 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue
@@ -11,7 +11,6 @@
       <template #ftp="{ onChange }">
         <fishSearch v-model="localTypeDate" width="280px" @update:modelValue="onChange" />
       </template>
-      <!-- 自定义重置及操作按钮区域 -->
       <template #actions>
         <a-tooltip title="新增">
           <a-button @click="props.handleAdd"> 新增 </a-button>
@@ -21,7 +20,7 @@
             导入zip
           </a-button>
         </a-tooltip>
-        <a-button @click="props.batchDelBtn" :disabled="batchData.length === 0">    
+        <a-button @click="props.batchDelBtn" :disabled="batchData.length === 0">
           批量删除
         </a-button>
         <a-tooltip title="提交数据">
@@ -65,11 +64,10 @@ import { checkPerm } from "@/directive/permission";
 import fishSearch from "@/components/fishSearch/index.vue";
 import { useShuJuTianBaoStore } from "@/store/modules/shuJuTianBao";
 
-// --- Props & Emits ---
 interface Props {
   direction: any[];
   guoyuStatus: any[];
-  importBtn: (file: File) => void;
+  importBtn: () => void;
   batchDelBtn: () => void;
   submitBtn: () => void;
   successBtn: () => void;
@@ -85,11 +83,8 @@ const emit = defineEmits<{
   (e: "searchFinish", values: any): void;
 }>();
 const localTypeDate = ref<string>(null);
-// --- State ---
-const basicSearchRef = ref<any>(); // 1. 定义 ref
-const fileInputRef = ref<HTMLInputElement>();
+const basicSearchRef = ref<any>();
 
-// 模拟 initSearchData
 const initSearchData = {
   baseId: "all",
   stcd: null,
@@ -104,14 +99,11 @@ const initSearchData = {
 };
 
 const searchData = ref<any>({ ...initSearchData });
-
-// --- Search List Configuration ---
-// 电站（下拉框）、STCD：过鱼设施编码（下拉框）、STRDT：开始时间、ENDDT：结束时间、鱼名称（字符串模糊查询）、DIRECTION：游向（0：上行、1：下行、2：上下行）
 const searchList: any = computed(() => [
   {
     type: "waterStation",
     name: "baseId",
-    label: "水电基地",
+    label: "流域",
     fieldProps: {
       allowClear: true,
     },
@@ -166,33 +158,18 @@ const searchList: any = computed(() => [
       format: "YYYY-MM-DD",
       valueFormat: "YYYY-MM-DD",
       allowClear: false,
-      // disabledDate: disabledDateFn, // 如果需要禁用日期，在此传入函数
     },
     presets: DateSetting.RangeButton.days,
   },
 ]);
 // --- Methods ---
-const triggerFileInput = () => {
-  fileInputRef.value?.click();
-};
 
 // 2. 搜索表单逻辑
 const onSearchFinish = (values: any) => {
-  console.log(values);
-  // 模拟获取 label，实际可能需要根据 dmStcd 查找名称
-  // 在原 React 代码中，label 来自 options.find(...)
-  // 这里简化处理，直接传递 ID 或固定名称，或者你需要维护一个电站列表映射
-  // const params: any = {};
-  // if (values.strdt) {
-  //   params.startDate = values.strdt[0].format("YYYY-MM-DD");
-  //   params.endDate = values.strdt[1].format("YYYY-MM-DD");
-  // }
-
   emit("searchFinish", values);
 };
 
 const onValuesChange = (changedValues: any, allValues: any) => {
-  console.log(changedValues, allValues);
   searchData.value = { ...searchData.value, ...allValues };
   // 同步更新本地 searchData，以便其他逻辑使用
   if (changedValues.rstcd || changedValues.baseId) {
@@ -207,7 +184,7 @@ const onValuesChange = (changedValues: any, allValues: any) => {
 
 const handleReset = () => {
   localTypeDate.value = null;
-  emit("reset", searchData.value);
+  emit("reset", initSearchData);
 };
 watch(
   () => initSearchData.ftp,
@@ -216,9 +193,7 @@ watch(
   },
   { immediate: true }
 );
-// --- Lifecycle ---
 onMounted(() => {
-  // 初始请求
   emit("searchFinish", initSearchData);
 
   shuJuTianBaoStore.getFpssOption("", "");
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoTable.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoTable.vue
new file mode 100644
index 0000000..b58f824
--- /dev/null
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoTable.vue
@@ -0,0 +1,502 @@
+<template>
+  <a-table
+    size="small"
+    :loading="fileLoading"
+    :data-source="fileTableData"
+    :columns="modalColumns"
+    height="500"
+    :scroll="{ y: 500, x: '100%' }"
+    :row-key="(record, index) => index"
+  >
+    <template #bodyCell="{ column, record, index }">
+      <!-- 1. 操作列 -->
+      <template v-if="column.key === 'action' || column.dataIndex === 'action'">
+        <div class="flex">
+          <template v-if="editingRowIndex === index">
+            <a-button type="link" size="small" @click="saveEdit(index)">保存</a-button>
+            <a-button type="link" size="small" @click="cancelEdit">取消</a-button>
+          </template>
+          <template v-else>
+            <a-button type="link" size="small" @click="startEdit(index)">编辑</a-button>
+            <a-button type="link" danger size="small" @click="handlePreviewDelete(index)"
+              >删除</a-button
+            >
+          </template>
+        </div>
+      </template>
+
+      <!-- 2. 警告提示列 (非编辑状态) -->
+      <template
+        v-else-if="
+          !isEditing(index) &&
+          column.dataIndex &&
+          record._warnings &&
+          record._warnings.includes(column.dataIndex)
+        "
+      >
+        <div style="color: red; display: flex; align-items: center">
+          <span>{{ getDisplayValue(column.dataIndex, record) }}</span>
+          <exclamation-circle-outlined style="margin-left: 4px" />
+        </div>
+      </template>
+
+      <!-- 3. 编辑状态下的单元格 (绑定到 editingData) -->
+      <template v-else-if="isEditing(index)">
+        <template v-if="column.dataIndex === 'baseName'">
+          <a-select
+            v-model:value="editingData.baseId"
+            placeholder="请选择"
+            show-search
+            :filter-option="filterOption"
+            :loading="rowStates[index]?.baseLoading"
+            style="width: 100%"
+            @change="(val) => handleBaseChange(val, index)"
+          >
+            <a-select-option
+              v-for="opt in baseOptions"
+              :key="opt.baseid"
+              :value="opt.baseid"
+              :label="opt.basename"
+            >
+              {{ opt.basename }}
+            </a-select-option>
+          </a-select>
+        </template>
+
+        <!-- 电站名称 -->
+        <template v-else-if="column.dataIndex === 'ennm'">
+          <a-select
+            v-model:value="editingData.rstcd"
+            placeholder="请选择"
+            show-search
+            :filter-option="filterOption"
+            :loading="rowStates[index]?.engLoading"
+            style="width: 100%"
+            :disabled="!editingData.baseId"
+            @change="(val) => handleEngChange(val, index)"
+          >
+            <a-select-option
+              v-for="opt in rowStates[index]?.engOptions || []"
+              :key="opt.stcd"
+              :value="opt.stcd"
+              :label="opt.ennm"
+            >
+              {{ opt.ennm }}
+            </a-select-option>
+          </a-select>
+        </template>
+
+        <!-- 过鱼设施 -->
+        <template v-else-if="column.dataIndex === 'stnm'">
+          <a-select
+            v-model:value="editingData.stcd"
+            placeholder="请选择"
+            show-search
+            :filter-option="filterOption"
+            :loading="rowStates[index]?.fpssLoading"
+            style="width: 100%"
+            :disabled="!editingData.rstcd"
+            @change="(val) => handleFpssChange(val, index)"
+          >
+            <a-select-option
+              v-for="opt in rowStates[index]?.fpssOptions || []"
+              :key="opt.stcd"
+              :value="opt.stcd"
+              :label="opt.stnm"
+            >
+              {{ opt.stnm }}
+            </a-select-option>
+          </a-select>
+        </template>
+
+        <!-- 过鱼时间 -->
+        <template v-else-if="column.dataIndex === 'strdt'">
+          <a-date-picker
+            v-model:value="editingData.strdt"
+            show-time
+            style="width: 100%"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
+        </template>
+
+        <!-- 鱼种类 -->
+        <template v-else-if="column.dataIndex === 'ftpName'">
+          <fishSearch
+            v-model="editingData.ftp"
+            style="width: 100%"
+            @update:modelValue="handleFtpChange"
+          />
+        </template>
+
+        <!-- 游向 -->
+        <template v-else-if="column.dataIndex === 'direction'">
+          <a-select
+            v-model:value="editingData.direction"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <a-select-option
+              v-for="item in direction"
+              :key="item.itemCode"
+              :value="item.itemCode"
+            >
+              {{ item.dictName }}
+            </a-select-option>
+          </a-select>
+        </template>
+
+        <!-- 数字输入框 -->
+        <template v-else-if="['fcnt', 'wt'].includes(column.dataIndex)">
+          <a-input-number
+            v-model:value="editingData[column.dataIndex]"
+            style="width: 100%"
+            :min="0"
+          />
+        </template>
+
+        <!-- 是否鱼苗 -->
+        <template v-else-if="column.dataIndex === 'isfs'">
+          <a-radio-group v-model:value="editingData.isfs">
+            <a-radio :value="1">是</a-radio>
+            <a-radio :value="0">否</a-radio>
+          </a-radio-group>
+        </template>
+
+        <!-- 体长 (编辑态使用 Min/Max) -->
+        <template v-else-if="column.dataIndex === 'fsz'">
+          <div class="flex">
+            <a-input-number
+              v-model:value="editingData.bodyLengthMin"
+              style="width: 50%"
+              :min="0"
+            />
+            <span class="px-[2px]">~</span>
+            <a-input-number
+              v-model:value="editingData.bodyLengthMax"
+              style="width: 50%"
+              :min="0"
+            />
+          </div>
+        </template>
+
+        <!-- 体重 (编辑态使用 Min/Max) -->
+        <template v-else-if="column.dataIndex === 'fwet'">
+          <div class="flex align-center">
+            <a-input-number
+              v-model:value="editingData.weightMin"
+              style="width: 50%"
+              :min="0"
+            />
+            <span class="px-[2px]">~</span>
+            <a-input-number
+              v-model:value="editingData.weightMax"
+              style="width: 50%"
+              :min="0"
+            />
+          </div>
+        </template>
+
+        <!-- 其他默认文本输入 -->
+        <template v-else>
+          <a-input v-model:value="editingData[column.dataIndex]" size="small" />
+        </template>
+      </template>
+
+      <!-- 4. 普通展示状态 (直接显示 record) -->
+      <!-- <template v-else>
+        {{ getDisplayValue(column.dataIndex, record) }}
+      </template> -->
+    </template>
+  </a-table>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, h } from "vue";
+import { message, Tag } from "ant-design-vue";
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import fishSearch from "@/components/fishSearch/index.vue";
+import { getBaseDropdown, getEngInfoDropdown, getFpssDropdown } from "@/api/select";
+import dayjs from "dayjs";
+
+const props: any = defineProps({
+  fileTableData: { type: Array, default: () => [] },
+  fileLoading: { type: Boolean, default: false },
+  direction: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(["update:fileTableData"]);
+
+// --- 状态管理 ---
+const editingRowIndex = ref<number | null>(null);
+const baseOptions = ref<any[]>([]);
+const rowStates = reactive<Record<number, any>>({});
+
+// 【核心】临时编辑数据，只在编辑模式下使用
+const editingData = ref<any>(null);
+
+const modalColumns = ref([
+  { dataIndex: "baseName", key: "baseName", title: "流域", width: 140 },
+  { dataIndex: "ennm", key: "ennm", title: "电站名称", width: 140 },
+  { dataIndex: "stnm", key: "stnm", title: "过鱼设施名称", width: 150 },
+  { dataIndex: "strdt", key: "strdt", title: "过鱼时间", width: 190 },
+  { dataIndex: "ftpName", key: "ftpName", title: "鱼种类", width: 120 },
+  {
+    dataIndex: "isfs",
+    key: "isfs",
+    title: "是否鱼苗",
+    width: 130,
+    customRender: ({ text }: any) => {
+      const isYes = text === 1 || text === "1";
+      return h(Tag, { color: isYes ? "success" : "error", style: { margin: 0 } }, () =>
+        isYes ? "是" : "否"
+      );
+    },
+  },
+  {
+    dataIndex: "direction",
+    key: "direction",
+    title: "游向",
+    width: 120,
+    customRender: ({ text }: any) =>
+      props.direction.find((item: any) => item.itemCode === text)?.dictName || "-",
+  },
+  { dataIndex: "fcnt", key: "fcnt", title: "过鱼数量(尾)", width: 120 },
+  { dataIndex: "fsz", key: "fsz", title: "体长(cm)", width: 160 },
+  { dataIndex: "fwet", key: "fwet", title: "平均体重(g)", width: 160 },
+  { dataIndex: "wt", key: "wt", title: "水温(℃)", width: 80 },
+  { dataIndex: "picpth", key: "level5", title: "图片", width: 100 },
+  { dataIndex: "vdpth", key: "level6", title: "视频", width: 100 },
+  {
+    title: "操作",
+    key: "action",
+    dataIndex: "action",
+    fixed: "right",
+    width: 100,
+    align: "center",
+  },
+]);
+
+// --- 初始化 ---
+onMounted(() => {
+  loadBaseOptions();
+});
+
+const loadBaseOptions = async () => {
+  try {
+    const res = await getBaseDropdown({});
+    baseOptions.value = res.data || [];
+  } catch (e) {
+    console.error("Load base options failed", e);
+  }
+};
+
+const ensureRowState = (index: number) => {
+  if (!rowStates[index]) {
+    rowStates[index] = {
+      engOptions: [],
+      fpssOptions: [],
+      baseLoading: false,
+      engLoading: false,
+      fpssLoading: false,
+    };
+  }
+  return rowStates[index];
+};
+
+// --- 级联逻辑 (操作 editingData) ---
+
+const handleBaseChange = async (baseId: string, index: number) => {
+  console.log(baseId)
+  editingData.value.baseName = baseOptions.value.find(
+    (item: any) => item.baseid == baseId
+  )?.basename;
+  if (baseId && editingData.value._warnings) {
+    editingData.value._warnings = editingData.value._warnings.filter((w: string) => w !== 'baseName');
+  }
+  const state = ensureRowState(index);
+  // 清空后续字段
+  editingData.value.rstcd = undefined;
+  editingData.value.stcd = undefined;
+  state.engOptions = [];
+  state.fpssOptions = [];
+
+  if (!baseId) return;
+  state.engLoading = true;
+  try {
+    const res = await getEngInfoDropdown({ baseId });
+    state.engOptions = res.data || [];
+  } catch (e) {
+    message.error("获取电站列表失败");
+  } finally {
+    state.engLoading = false;
+  }
+};
+
+const handleEngChange = async (rstcd: string, index: number) => {
+  const state = ensureRowState(index);
+  if (rstcd && editingData.value._warnings) {
+    editingData.value._warnings = editingData.value._warnings.filter((w: string) => w !== 'ennm');
+  }
+  editingData.value.ennm = state.engOptions.find(
+    (item: any) => item.stcd === rstcd
+  )?.ennm;
+  editingData.value.stcd = undefined;
+  state.fpssOptions = [];
+
+  if (!rstcd || !editingData.value.baseId) return;
+  state.fpssLoading = true;
+  try {
+    const res = await getFpssDropdown({ rstcd, baseId: editingData.value.baseId });
+    state.fpssOptions = res.data || [];
+  } catch (e) {
+    message.error("获取设施列表失败");
+  } finally {
+    state.fpssLoading = false;
+  }
+};
+const handleFpssChange = (stcd: string, index: number) => {
+  const state = ensureRowState(index);
+  if (stcd && editingData.value._warnings) {
+    editingData.value._warnings = editingData.value._warnings.filter((w: string) => w !== 'stnm');
+  }
+  editingData.value.stnm = state.fpssOptions.find(
+    (item: any) => item.stcd === stcd
+  )?.stnm;
+};
+
+// --- 编辑控制 ---
+
+const isEditing = (index: number) => editingRowIndex.value === index;
+const startEdit = (index: number) => {
+  const originalRecord = props.fileTableData[index];
+
+  // 1. 深拷贝原始数据到临时编辑区
+  editingData.value = JSON.parse(JSON.stringify(originalRecord));
+
+  // 2. 预处理：将 fsz/fwet 字符串拆分为 Min/Max 供输入框使用
+  processStringToMinMax(editingData.value);
+
+  editingRowIndex.value = index;
+
+  // 3. 预加载下拉选项 (基于 editingData 的值)
+  if (editingData.value.baseId && !editingData.value.rstcd) {
+    handleBaseChange(editingData.value.baseId, index);
+  } else if (editingData.value.baseId && editingData.value.rstcd) {
+    handleBaseChange(editingData.value.baseId, index).then(() => {
+      handleEngChange(editingData.value.rstcd, index);
+    });
+  }
+};
+
+// 辅助：字符串转 Min/Max
+const processStringToMinMax = (data: any) => {
+  if (data.fsz) {
+    const sizes = String(data.fsz).split("~");
+    data.bodyLengthMin = sizes[0] || "";
+    data.bodyLengthMax = sizes[1] || sizes[0] || "";
+  } else {
+    data.bodyLengthMin = "";
+    data.bodyLengthMax = "";
+  }
+  if (data.fwet) {
+    const weights = String(data.fwet).split("~");
+    data.weightMin = weights[0] || "";
+    data.weightMax = weights[1] || weights[0] || "";
+  } else {
+    data.weightMin = "";
+    data.weightMax = "";
+  }
+};
+
+// 辅助：Min/Max 转字符串
+const processMinMaxToString = (data: any) => {
+  // 处理体长
+  if (data.bodyLengthMin !== "" || data.bodyLengthMax !== "") {
+    if (data.bodyLengthMin == data.bodyLengthMax) {
+      data.fsz = data.bodyLengthMin;
+    } else {
+      data.fsz = `${data.bodyLengthMin}~${data.bodyLengthMax}`;
+    }
+  } else {
+    data.fsz = "";
+  }
+
+  // 处理体重
+  if (data.weightMin !== "" || data.weightMax !== "") {
+    if (data.weightMin == data.weightMax) {
+      data.fwet = data.weightMin;
+    } else {
+      data.fwet = `${data.weightMin}~${data.weightMax}`;
+    }
+  } else {
+    data.fwet = "";
+  }
+
+  // 清理临时字段，避免污染原数据
+  delete data.bodyLengthMin;
+  delete data.bodyLengthMax;
+  delete data.weightMin;
+  delete data.weightMax;
+};
+
+const saveEdit = (index: number) => {
+  // 1. 后处理：将 Min/Max 合并回 fsz/fwet
+  processMinMaxToString(editingData.value);
+
+  // 2. 创建新数组，替换对应索引的数据
+  const newData = [...props.fileTableData];
+  newData[index] = { ...editingData.value };
+
+  // 3. 通知父组件更新
+  emit("update:fileTableData", newData);
+
+  // 4. 重置状态
+  editingRowIndex.value = null;
+  editingData.value = null;
+  message.success("保存成功");
+};
+
+const cancelEdit = () => {
+  editingRowIndex.value = null;
+  editingData.value = null;
+  // 由于我们从未修改过 props.fileTableData，所以不需要恢复操作，直接退出即可
+};
+
+const handlePreviewDelete = (index: number) => {
+  const newData = [...props.fileTableData];
+  newData.splice(index, 1);
+  emit("update:fileTableData", newData);
+
+  if (editingRowIndex.value === index) {
+    editingRowIndex.value = null;
+    editingData.value = null;
+  } else if (editingRowIndex.value !== null && editingRowIndex.value > index) {
+    editingRowIndex.value--;
+  }
+  message.success("删除成功");
+};
+// 鱼种类编辑 修改名称
+const handleFtpChange = (val: any, opt: any) => {
+  editingData.value.ftpName = opt.name;
+};
+
+// --- 辅助函数 ---
+
+const filterOption = (input: string, option: any) => {
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+
+// 统一获取显示值
+const getDisplayValue = (dataIndex: string, record: any) => {
+  const val = record[dataIndex];
+  if (val === undefined || val === null) return "-";
+  if (dataIndex === "isfs") return val === 1 ? "是" : "否";
+  if (dataIndex === "strdt") return val ? dayjs(val).format("YYYY-MM-DD HH:mm:ss") : "-";
+  return val;
+};
+defineExpose({
+  editingRowIndex, 
+  editingData,
+});
+</script>
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
similarity index 74%
rename from frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao.vue
rename to frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
index 547cc64..24f60ae 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="guoYuSheShiShuJuTianBao-page">
-    <!-- 搜索区域组件，具体 props 需根据实际子组件调整 -->
     <GuoYuSheShiShuJuTianBaoSearch
       ref="searchRef"
       :guoyuStatus="guoyuStatus"
@@ -14,7 +13,6 @@
       @reset="handleReset"
       @search-finish="handleSearchFinish"
     />
-
     <!-- 主表格 -->
     <BasicTable
       ref="tableRef"
@@ -39,7 +37,11 @@
               type="link"
               size="small"
               @click="handleEdit(record, 'edit')"
-              v-if="record.status === 'DRAFT' || record.status === 'REJECTED'|| record.status === 'SUBMITTED'"
+              v-if="
+                record.status === 'DRAFT' ||
+                record.status === 'REJECTED' ||
+                record.status === 'SUBMITTED'
+              "
               >编辑</a-button
             >
             <a-button
@@ -76,7 +78,6 @@
         </template>
       </template>
     </BasicTable>
-    <!-- <BasicTable :columns="columns" :listUrl="getFishDraftPage" /> -->
     <!-- 隐藏的文件输入框 -->
     <input
       ref="fileInputRef"
@@ -92,20 +93,31 @@
       cancel-text="取消导入"
       :width="1500"
       v-model:open="visible"
+      maskClosable="false"
+       @cancel="handleCancel"
       :confirm-loading="fileLoading"
-      @cancel="handleModalCancel"
-      @ok="handleModalOk"
     >
-      <a-table
-        size="small"
-        :loading="fileLoading"
-        :data-source="fileTableData"
-        :columns="modalColumns"
-        :scroll="{ y: 500, x: '100%' }"
-        row-key="index"
-      >
-        <!-- 如果需要复杂的行内编辑插槽，可在此定义，但目前逻辑主要在 column render 中处理 -->
-      </a-table>
+      <GuoYuSheShiShuJuTianBaoTable
+        ref="modalTableRef"
+        :fileLoading="fileLoading"
+        :fileTableData="fileTableData"
+        :direction="direction"
+        @update:file-table-data="(val) => fileTableData = val"
+      />
+
+
+
+      <template #footer>
+        <a-button key="back" @click="handleCustomCancel">取消导入</a-button>
+        <a-button
+          key="submit"
+          type="primary"
+          :loading="fileLoading"
+          @click="handleModalOk"
+        >
+          提交导入
+        </a-button>
+      </template>
     </a-modal>
 
     <!-- 新增/编辑 Modal (对应 React 的 EditModal) -->
@@ -142,10 +154,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, h } from "vue";
+import { ref, computed, onMounted, h, nextTick } from "vue";
 import { message, Modal } from "ant-design-vue"; // 假设使用 ant-design-vue
 import BasicTable from "@/components/BasicTable/index.vue";
 import GuoYuSheShiShuJuTianBaoSearch from "./guoYuSheShiShuJuTianBaoSearch.vue";
+import GuoYuSheShiShuJuTianBaoTable from "./guoYuSheShiShuJuTianBaoTable.vue";
 import EditModal from "./guoYuSheShiShuJuTianBaoForm.vue";
 import {
   getFishDraftPage,
@@ -158,11 +171,13 @@ import {
   importFishZip,
   submitImportTask,
   cancelImportTask,
-  getImportTask,
-  checkImportStatus
+  checkImportStatus,
+  batchSaveDraft,
+  getLastImportResult,
 } from "@/api/guoYuSheShiShuJuTianBao";
 import { Tag } from "ant-design-vue"; // 确保导入 Tag
 import { getDictItemsByCode } from "@/api/dict";
+import { m } from "vue-router/dist/router-CWoNjPRp.mjs";
 // import { FileImageOutlined, VideoCameraOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
 
 // --- 类型定义 ---
@@ -188,7 +203,7 @@ const baseColumnsConfig: ColumnConfig[] = [
   {
     dataIndex: "baseName",
     key: "baseName",
-    title: "水电基地",
+    title: "流域",
     width: 120,
     fixed: "left",
   },
@@ -260,10 +275,12 @@ const videoPreviewVisible = ref(false);
 const currentVideoUrl = ref<string>("");
 
 // 表格数据
-const tableData = ref<any[]>([]);
 const fileTableData = ref<any[]>([]);
+const orgFileTableData = ref<any[]>([]);
+const warnings = ref<any[]>([]);
 const batchData = ref<any[]>([]);
 
+const modalTableRef = ref<any>(null);
 const fileLoading = ref(false);
 
 // 行内编辑 Key (用于导入预览表格)
@@ -278,25 +295,7 @@ const editingKey = ref<string | number>("");
 //     if (!file) return "";
 //     const blob = await file.async("blob");
 //     return URL.createObjectURL(blob);
-//   } catch (e) {
-//     console.error("Extract file failed", e);
-//     return "";
-//   }
-// };
-
-// 渲染媒体单元格 (返回 VNode 或简单结构，实际在 Antdv columns render 中处理)
-// 在 Vue Antdv 中，render 函数接收 (text, record, index)
-// const createMediaRender = (type: "image" | "video") => {
-//   return (text: string) => {
-//     if (!text) return "-";
-//     // 这里简化处理，实际项目中可能需要使用 h 函数渲染图标和点击事件
-//     // 由于无法直接在这里绑定 click 事件到简单的字符串返回，建议在 columns 定义中使用 slots 或 h 函数
-//     // 为了保持逻辑清晰，这里仅返回文本提示，实际 UI 需结合 Antdv 的 customRender
-//     return type === "image" ? "查看图片" : "播放视频";
-//   };
-// };
-
-// --- Columns 定义 ---
+const taskId = ref<string>("");
 
 // 主表格 Columns
 const columns = computed(() => {
@@ -334,59 +333,6 @@ const columns = computed(() => {
   ];
 });
 
-// 导入预览表格 Columns (包含行内编辑逻辑)
-const modalColumns = computed(() => {
-  const isEditing = (_record: any, index: number) => index === editingKey.value;
-
-  // const save = async (index: number) => {
-  //   // 保存逻辑：实际上 fileTableData 是响应式的，input change 时已经更新
-  //   editingKey.value = "";
-  //   message.success("行数据已更新");
-  // };
-
-  // const deleteRow = (index: number) => {
-  //   fileTableData.value = fileTableData.value.filter((_, i) => i !== index);
-  //   message.success("行数据已删除");
-  // };
-
-  return baseColumnsConfig.map((col) => ({
-    ...col,
-    customRender: ({ text, record, index }: any) => {
-      const editing = isEditing(record, index);
-
-      // 如果是媒体列
-      if (col.dataIndex === "level5" || col.dataIndex === "level6") {
-        if (editing) {
-          // 返回 Input 组件的 VNode 或标识，实际需用 slot 或 h 函数
-          return "Input编辑中";
-        }
-        return col.dataIndex === "level5" ? "查看图片" : "播放视频";
-      }
-
-      // 普通列
-      if (editing) {
-        // 返回 Input 组件标识
-        return "Input编辑中";
-      }
-      return text;
-    },
-    // Antdv 支持通过 slots 自定义单元格内容以实现交互
-    slots: { customRender: `cell-${col.dataIndex}` },
-  }));
-  // .concat({
-  //   title: "操作",
-  //   dataIndex: "operation",
-  //   fixed: "right",
-  //   width: 140,
-  //   align: "center",
-  //   customRender: ({ record, index }: any) => {
-  //     const editable = isEditing(record, index);
-  //     return editable ? "保存/取消" : "修改/删除";
-  //   },
-  //   slots: { customRender: "cell-operation" },
-  // });
-});
-
 // --- 业务逻辑方法 ---
 
 const handleAdd = () => {
@@ -563,40 +509,111 @@ const handleEditSubmit = async (values: FormData) => {
     submitLoading.value = false;
   }
 };
+const isRowDataEqual = (oldRow: any, newRow: any, fields: string[]): boolean => {
+  for (const field of fields) {
+    // 处理 undefined/null 的情况，确保比较的一致性
+    let oldVal = oldRow?.[field];
+    let newVal = newRow?.[field];
 
-const handleModalOk = () => {
-  Modal.confirm({
-    title: "是否提交导入数据?",
-    onOk: async () => {
-      // tableData.value = [...fileTableData.value];
-      visible.value = false;
-      editingKey.value = "";
-      message.success("数据已导入至列表");
-      // let res: any = await submitImportTask(ids);
-      // if (res && res?.code == 0) {
-      //   message.success("审批成功");
-      //   tableRef.value?.getList();
-      // }
-    },
-  });
+    // 特殊处理：如果都是空值，视为相等
+    if ((oldVal === undefined || oldVal === null || oldVal === '') && 
+        (newVal === undefined || newVal === null || newVal === '')) {
+      continue;
+    }
+
+    // 严格不相等
+    if (oldVal !== newVal) {
+      return false;
+    }
+  }
+  return true;
 };
 
-const handleModalCancel = () => {
+const checkTableDataChanges = () => {
+  // 1. 定义需要比对的核心字段 (对应 Form 中的字段)
+  const oldData = orgFileTableData.value;
+  const newData = fileTableData.value;
+
+  // 2. 如果行数不同，肯定有变化
+  if (oldData.length !== newData.length) {
+    return { hasChanged: true, changedCount: newData.length };
+  }
+
+  let changedCount = 0;
+
+  // 3. 逐行比对
+  for (let i = 0; i < newData.length; i++) {
+    const oldRow = oldData[i];
+    const newRow = newData[i];
+    
+    // 如果某一行数据不一致，计数+1
+    if (!isRowDataEqual(oldRow, newRow, ['baseId'])) {
+      changedCount++;
+    }
+  }
+
+  return { hasChanged: changedCount > 0, changedCount };
+};
+
+// 提交导入
+const handleModalOk = () => {
+  console.log(orgFileTableData.value)
+  console.log(fileTableData.value)
+  console.log(
+  modalTableRef.value.editingData)
+  if (modalTableRef.value.editingData != undefined) {
+    message.warning("请点击保存后提交数据！");
+    return
+  }
+   const { hasChanged, changedCount } = checkTableDataChanges();
+
+  // 3. 如果没有变化，直接返回，不执行后续操作
+  if (!hasChanged) {
+    message.info("数据未发生任何变化，无需提交");
+    return;
+  }
+console.log(123)
+  // if (warnings.value.length > 0) {
+  //   message.warning("请先修复数据");
+  //   return;
+  // }
+  // Modal.confirm({
+  //   title: "是否提交导入数据?",
+  //   onOk: async () => {
+  //     // tableData.value = [...fileTableData.value];
+  //     let ids = fileTableData.value.map((item: any) => item.id);
+  //     visible.value = false;
+  //     editingKey.value = "";
+  //     let res: any = await submitImportTask(ids);
+  //     if (res && res?.code == 0) {
+  //       message.success("导入成功");
+  //       tableRef.value?.getList();
+  //     } else {
+  //       message.error("导入失败,请检查数据是否正确");
+  //     }
+  //   },
+  // });
+};
+
+// 关闭导入弹窗
+const handleCustomCancel = () => {
   Modal.confirm({
     title: "是否取消导入数据?",
+    content: "未提交的数据将丢失",
+    okText: "确定",
     onOk: async () => {
       visible.value = false;
       editingKey.value = "";
-      // let res: any = await cancelImportTask(ids);
-      // if (res && res?.code == 0) {
-      //   message.success("审批成功");
-      //   tableRef.value?.getList();
-      // }
+      // 可选：调用取消接口
+      let res: any = await cancelImportTask({taskId: taskId.value});
+      if (res && res?.code == 0) {
+        message.success("取消成功");
+        tableRef.value?.getList();
+      }
     },
   });
 };
 
-
 const handleFileSelect = (e: Event) => {
   const target = e.target as HTMLInputElement;
   const file = target.files?.[0];
@@ -621,8 +638,7 @@ const handleFileSelect = (e: Event) => {
     resetFileInput();
     return;
   }
-
-  // props.importBtn(file);
+  fileChange(file);
   resetFileInput();
 };
 
@@ -631,23 +647,66 @@ const resetFileInput = () => {
     fileInputRef.value.value = "";
   }
 };
-const importBtn = async (file: File) => {
+const fileChange = async (file: File) => {
+  try {
+    fileLoading.value = true;
+    const formData = new FormData();
+    formData.append("file", file);
+    let res: any = await importFishZip(formData);
+    const { code } = res.data || {};
+    if (code == 1) {
+      message.error("导入失败");
+    } else {
+      message.success("导入成功");
+      fileTableaAnalysis(res, "file");
+    }
+  } catch (error) {
+  } finally {
+  }
+};
+// 导入-按钮
+const importBtn = async () => {
   let res: any = await checkImportStatus();
-  console.log(res)
-  // fileInputRef.value?.click();
-  // fileLoading.value = true;
+  taskId.value = "";
+  if (res?.code == 0) {
+    const { hasImportingTask ,currentTask} = res?.data || {};
+    taskId.value = currentTask.id;
+    if (hasImportingTask) {
+      visible.value = true;
+      nextTick(async () => {
+        fileLoading.value = true;
+        modalTableRef.value.editingRowIndex = null;
+        let res1: any = await getLastImportResult();
+        fileTableaAnalysis(res1, "get");
+      });
+    } else {
+      fileInputRef.value?.click();
+    }
+  } else {
+    message.error("导入查询失败");
+  }
   // editingKey.value = "";
-
-  // try {
-  //   const formData = new FormData();
-  //   formData.append("file", file);
-  //   let res: any = await importFishZip(formData);
-  //   console.log(res);
-  //   visible.value = true;
-  // } catch (error) {
-  // } finally {
-  //   // fileLoading.value = false;
-  // }
+};
+const fileTableaAnalysis = (res: any, type: string) => {
+  let data = [];
+  // let warningsList = [];
+  let list = [];
+  if (type == "file") {
+    list = res.data.failedRows;
+  } else {
+    list = res.data.result.failedRowDetails;
+  }
+  console.log(list);
+  list.forEach((item) => {
+    data.push({
+      ...item.data,
+      _warnings: item.warnings,
+    });
+  });
+  fileTableData.value = data || [];
+  orgFileTableData.value = JSON.parse(JSON.stringify(fileTableData.value));
+  // warnings.value = warningsList || [];
+  fileLoading.value = false;
 };
 const handleReset = (values) => {
   handleSearchFinish(values);
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 497194a..e4c8159 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "target": "esnext",
     "useDefineForClassFields": true,
     "module": "esnext",
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index dba6199..7586116 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -27,7 +27,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
           // 线上API地址
           // target: 'http://localhost:8093/',
           // 本地API地址
-           target: 'http://10.84.121.21:8093',
+          target: 'http://10.84.121.21:8093',
           changeOrigin: true,
           rewrite: path =>
             path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')

From 054adf7672765bcc9d03faaf69d7ea742411f637 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=85=B4=E5=87=AF?= <2448379534@qq.com>
Date: Mon, 27 Apr 2026 09:52:42 +0800
Subject: [PATCH 4/9] =?UTF-8?q?=E5=AE=A1=E6=89=B9=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/shuJuTianBao/shengPiJiLu.vue    | 49 ++++++++++---------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/frontend/src/views/shuJuTianBao/shengPiJiLu.vue b/frontend/src/views/shuJuTianBao/shengPiJiLu.vue
index 044ae7e..11ae240 100644
--- a/frontend/src/views/shuJuTianBao/shengPiJiLu.vue
+++ b/frontend/src/views/shuJuTianBao/shengPiJiLu.vue
@@ -98,14 +98,15 @@ let columns = ref([
         title: '审批批次号',
         dataIndex: 'approvalNo',
         key: 'approvalNo',
-        width: 180,
+        width: 160,
         fixed: 'left'
     },
     {
         title: '业务类型',
         dataIndex: 'bizType',
         key: 'bizType',
-        width: 120
+        width: 100,
+        align: 'center'
     },
     {
         title: '数据条数',
@@ -118,20 +119,22 @@ let columns = ref([
         title: '提交人',
         dataIndex: 'applyUserId',
         key: 'applyUserId',
-        width: 120
+        width: 120,
+          align: 'center'
     },
     {
         title: '提交时间',
         dataIndex: 'applyTime',
         key: 'applyTime',
-        width: 180,
+        width: 160,
+          align: 'center'
 
     },
     {
         title: '审批状态',
         dataIndex: 'status',
         key: 'status',
-        width: 100,
+        width: 80,
         align: 'center',
 
     },
@@ -145,7 +148,7 @@ let columns = ref([
         title: '审批时间',
         dataIndex: 'approveTime',
         key: 'approveTime',
-        width: 180,
+        width: 160,
 
     },
     {
@@ -153,12 +156,12 @@ let columns = ref([
         dataIndex: 'remark',
         key: 'remark',
         ellipsis: true,
-        width: 200
+
     },
     {
         title: '操作',
         key: 'action',
-        width: 120,
+        width: 160,
         fixed: 'right',
         align: 'center'
     }
@@ -215,20 +218,20 @@ const approvalLogColumns = ref([
         dataIndex: 'operateTime',
         key: 'operateTime',
         width: 180
+    },
+     {
+        title: '创建时间',
+        dataIndex: 'createdAt',
+        key: 'createdAt',
+        width: 180
     },
     {
         title: '审批意见',
         dataIndex: 'commentInfo',
         key: 'commentInfo',
         ellipsis: true,
-        width: 300
     },
-    {
-        title: '创建时间',
-        dataIndex: 'createdAt',
-        key: 'createdAt',
-        width: 180
-    }
+   
 ]);
 
 // 数据变更记录弹框相关
@@ -250,13 +253,6 @@ const changeLogColumns = ref([
         width: 120,
         align: 'center'
     },
-    {
-        title: '变更内容',
-        dataIndex: 'changeJson',
-        key: 'changeJson',
-        width: 400,
-        ellipsis: true
-    },
     {
         title: '操作人',
         dataIndex: 'operatorId',
@@ -274,7 +270,14 @@ const changeLogColumns = ref([
         dataIndex: 'createdAt',
         key: 'createdAt',
         width: 180
-    }
+    },
+    {
+        title: '变更内容',
+        dataIndex: 'changeJson',
+        key: 'changeJson',
+        ellipsis: true
+    },
+    
 ]);
 
 const currentApprovalId = ref('');

From 0817d152588fb3f9c8689b6b8ef851f62c92a6dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=88=E5=85=86=E5=A2=9E?= <你的邮箱@example.com>
Date: Mon, 27 Apr 2026 10:35:06 +0800
Subject: [PATCH 5/9] =?UTF-8?q?sjtb=20=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=20=E8=A1=A8=E6=A0=BC=E5=A4=9A=E9=80=89=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Copilot <copilot@github.com>
---
 frontend/src/components/BasicSearch/index.vue |  3 +-
 frontend/src/components/BasicTable/index.vue  |  6 ++--
 frontend/src/components/fishSearch/index.vue  |  3 +-
 frontend/src/lang/zh-cn.ts                    |  1 +
 frontend/src/layout/components/Navbar.vue     |  4 ++-
 frontend/src/permission.ts                    |  8 ++---
 frontend/src/router/index.ts                  | 20 ++++++-------
 frontend/src/store/modules/shuJuTianBao.ts    | 25 ++++++++++++----
 frontend/src/views/login-sjtb/index.vue       |  2 +-
 .../guoYuSheShiShuJuTianBao/index.vue         | 29 ++++++++++---------
 10 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/BasicSearch/index.vue b/frontend/src/components/BasicSearch/index.vue
index 1775b01..3b8fb43 100644
--- a/frontend/src/components/BasicSearch/index.vue
+++ b/frontend/src/components/BasicSearch/index.vue
@@ -79,6 +79,7 @@
                     placeholder="请选择"
                     @change="dataDimensionDataChange"
                     show-search
+                    :loading="shuJuTianBaoStore.baseLoading"
                     :filter-option="filterOption"
                     style="width: 135px"
                   >
@@ -96,6 +97,7 @@
                     placeholder="请选择电站"
                     @change="stcdIdChange"
                     show-search
+                    :loading="shuJuTianBaoStore.engLoading"
                     :filter-option="filterOption"
                     style="width: 135px"
                   >
@@ -169,7 +171,6 @@
 import { ref, computed, reactive, watch, onMounted, nextTick } from "vue";
 import { useShuJuTianBaoStore } from "@/store/modules/shuJuTianBao";
 const shuJuTianBaoStore = useShuJuTianBaoStore();
-// import { nextTick } from "process";
 
 // --- 类型定义 ---
 export interface SearchItem {
diff --git a/frontend/src/components/BasicTable/index.vue b/frontend/src/components/BasicTable/index.vue
index 92e9bfd..82d4cb0 100644
--- a/frontend/src/components/BasicTable/index.vue
+++ b/frontend/src/components/BasicTable/index.vue
@@ -33,6 +33,7 @@ interface Props {
   searchParams?: Record<string, any>;
   // 默认每页显示数量
   defaultPageSize?: number;
+  getCheckboxProps?: (record: any) => any;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -40,6 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
   rowKey: "id",
   searchParams: () => ({}),
   defaultPageSize: 20,
+  getCheckboxProps: undefined
 });
 
 const emit = defineEmits<{
@@ -66,9 +68,7 @@ const rowSelection = computed(() => ({
     selectedRows.value = rows;
     emit("selection-change", keys, rows);
   },
-  getCheckboxProps: (record: any) => ({
-    // disabled: record.status === 'SUBMITTED'
-  }),
+  getCheckboxProps: props.getCheckboxProps ? props.getCheckboxProps : (record: any) => ({})
 }));
 
 // --- Pagination Config ---
diff --git a/frontend/src/components/fishSearch/index.vue b/frontend/src/components/fishSearch/index.vue
index 2f78425..6149eb8 100644
--- a/frontend/src/components/fishSearch/index.vue
+++ b/frontend/src/components/fishSearch/index.vue
@@ -71,7 +71,6 @@
 import { ref, onMounted, computed, watch } from "vue";
 import { getFishDictoryDropdown } from "@/api/select";
 import { useShuJuTianBaoStore } from "@/store/modules/shuJuTianBao";
-import { init } from "echarts";
 const shuJuTianBaoStore = useShuJuTianBaoStore();
 
 // --- Props & Emits ---
@@ -170,7 +169,7 @@ const handleSelectOption = (opt: any) => {
 const handleChange = (val: any) => {
   // 当 a-select 内部触发 change 时（例如删除 Tag）
   // 在单选模式下，如果用户通过键盘或删除操作改变了值，这里也会捕获
-  emit("update:modelValue", val, opt);
+  emit("update:modelValue", val, '');
 };
 
 const getFishNameById = (id: string) => {
diff --git a/frontend/src/lang/zh-cn.ts b/frontend/src/lang/zh-cn.ts
index c27b960..b61ac93 100644
--- a/frontend/src/lang/zh-cn.ts
+++ b/frontend/src/lang/zh-cn.ts
@@ -7,6 +7,7 @@ export default {
   // 登录页面国际化
   login: {
     title: '水电水利建设项目全过程环境管理信息平台',
+    titleSjtb: '水电水利建设项目全过程数据填报系统',
     username: '用户名',
     rulesUsername: '用户账号/身份证号/手机号 不能为空',
     password: '密码',
diff --git a/frontend/src/layout/components/Navbar.vue b/frontend/src/layout/components/Navbar.vue
index 832f922..e200109 100644
--- a/frontend/src/layout/components/Navbar.vue
+++ b/frontend/src/layout/components/Navbar.vue
@@ -54,7 +54,9 @@ onBeforeUnmount(() => {
           href="/"
           class="h-[50px] min-w-[350px] flex items-center justify-center text-white"
         >
-          <h1 class="text-blank font-bold text-[16px]">{{ t("login.title") }}</h1></a
+          <!-- <h1 class="text-blank font-bold text-[16px]">{{ t("login.title") }}</h1> -->
+          <h1 class="text-blank font-bold text-[16px]">{{ t("login.titleSjtb") }}</h1>
+          </a
         >
       </transition>
       <Sidebar />
diff --git a/frontend/src/permission.ts b/frontend/src/permission.ts
index 87df0ea..4f9ddba 100644
--- a/frontend/src/permission.ts
+++ b/frontend/src/permission.ts
@@ -9,7 +9,7 @@ NProgress.configure({ showSpinner: false });
 const permissionStore = usePermissionStoreHook();
 
 // 白名单路由
-const whiteList = ['/login', '/login-sjtb']; //login
+const whiteList = ['/login']; //login
 
 // 查找第一个可用路由
 function findFirstAvailableRoute(routes: any[]): string | undefined {
@@ -35,7 +35,7 @@ router.beforeEach(async (to, from, next) => {
 
   if (userStore.Token) {
     // 登录成功，跳转到首页
-    if (to.path === '/login-sjtb' || to.path === '/login') {//login
+    if (to.path === '/login') {//login
       next({ path: '/' });
       NProgress.done();
     } else {
@@ -80,7 +80,7 @@ router.beforeEach(async (to, from, next) => {
         } catch (error) {
           console.log(error);
           await userStore.resetToken();
-          to.path === '/login-sjtb' ? next(`/login-sjtb?redirect=${to.path}`) : next(`/login?redirect=${to.path}`);
+          next(`/login?redirect=${to.path}`);
           NProgress.done();
         }
       }
@@ -91,7 +91,7 @@ router.beforeEach(async (to, from, next) => {
     if (whiteList.indexOf(to.path) !== -1) {
       next();
     } else {
-      to.path === '/login-sjtb' ? next(`/login-sjtb?redirect=${to.path}`) : next(`/login?redirect=${to.path}`);
+      next(`/login?redirect=${to.path}`);
       NProgress.done();
     }
   }
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 0ff5dbb..eda82d7 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -16,13 +16,13 @@ export const constantRoutes: RouteRecordRaw[] = [
       }
     ]
   },
+  // {
+  //   path: '/login',
+  //   component: () => import('@/views/login/index.vue'),
+  //   meta: { hidden: true }
+  // },
   {
     path: '/login',
-    component: () => import('@/views/login/index.vue'),
-    meta: { hidden: true }
-  },
-   {
-    path: '/login-sjtb',
     component: () => import('@/views/login-sjtb/index.vue'),
     meta: { hidden: true }
   },
@@ -31,11 +31,11 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import('@/views/error-page/404.vue'),
     meta: { hidden: true }
   },
-    {
-      path: '/401',
-      component: () => import('@/views/error-page/401.vue'),
-      meta: { hidden: true }
-    },
+  {
+    path: '/401',
+    component: () => import('@/views/error-page/401.vue'),
+    meta: { hidden: true }
+  }
 ];
 
 // 创建路由
diff --git a/frontend/src/store/modules/shuJuTianBao.ts b/frontend/src/store/modules/shuJuTianBao.ts
index d437d6c..49f2bd4 100644
--- a/frontend/src/store/modules/shuJuTianBao.ts
+++ b/frontend/src/store/modules/shuJuTianBao.ts
@@ -5,14 +5,17 @@ import { set } from 'lodash';
 
 export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
   // 1. 直接使用 ref 定义状态，确保响应式
-  const fpssOption = ref<any[]>([]);
+  const fpssOption = ref<any[]>([]); 
+  const fpssLoading = ref(false);
   const baseOption = ref<any[]>([]);
+  const baseLoading = ref(false);
   const engOption = ref<any[]>([]);
+  const engLoading = ref(false);
   const fishOption = ref([]);
-
-  // 2. 业务逻辑方法
+  // 获取水电基地列表
   const getBaseOption = async () => {
     try {
+      baseLoading.value = true;
       const res = await getBaseDropdown({});
       if (res.data && Array.isArray(res.data)) {
         const list = [...res.data];
@@ -25,11 +28,14 @@ export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
       }
     } catch (error) {
       console.error('获取水电基地列表失败:', error);
+    } finally {
+      baseLoading.value = false;
     }
   };
-
+  // 获取电站列表
   const getEngOption = async (baseId: string) => {
     try {
+      engLoading.value = true;
       const param = baseId === 'all' ? {} : { baseId };
       const res = await getEngInfoDropdown(param);
       if (res.data && Array.isArray(res.data)) {
@@ -38,16 +44,20 @@ export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
       }
     } catch (error) {
       console.error('获取电站列表失败:', error);
+    } finally {
+      engLoading.value = false;
     }
   };
-
-
+  // 获取过鱼设施列表
   const getFpssOption = async (baseId: string, rstcd: string) => {
     try {
+      fpssLoading.value = true;
       const res = await getFpssDropdown({ baseId, rstcd });
       fpssOption.value = res.data;
     } catch (error) {
       console.log(error);
+    } finally {
+      fpssLoading.value = false;
     }
   };
   const getFishOption = () => {
@@ -63,6 +73,9 @@ export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
     baseOption,
     engOption,
     fishOption,
+    fpssLoading,
+    baseLoading,
+    engLoading,
     getBaseOption,
     getEngOption,
     getFpssOption,
diff --git a/frontend/src/views/login-sjtb/index.vue b/frontend/src/views/login-sjtb/index.vue
index 00fe032..7cc8bdb 100644
--- a/frontend/src/views/login-sjtb/index.vue
+++ b/frontend/src/views/login-sjtb/index.vue
@@ -10,7 +10,7 @@
       <!-- 左侧：背景图区域 -->
       <div class="left-section">
         <div class="slogan">
-          <p>采集网站及数据管理子系统</p>
+          <p>{{ $t("login.titleSjtb") }}</p>
         </div>
       </div>
 
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
index 24f60ae..ece6e1e 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
@@ -20,6 +20,7 @@
       :list-url="getFishDraftPage"
       :search-params="{}"
       :enable-row-selection="true"
+      :get-checkbox-props="getCheckboxProps" 
       @selection-change="handleSelectionChange"
     >
       <!-- 使用 bodyCell 插槽自定义单元格渲染 -->
@@ -94,7 +95,6 @@
       :width="1500"
       v-model:open="visible"
       maskClosable="false"
-       @cancel="handleCancel"
       :confirm-loading="fileLoading"
     >
       <GuoYuSheShiShuJuTianBaoTable
@@ -104,9 +104,6 @@
         :direction="direction"
         @update:file-table-data="(val) => fileTableData = val"
       />
-
-
-
       <template #footer>
         <a-button key="back" @click="handleCustomCancel">取消导入</a-button>
         <a-button
@@ -475,6 +472,13 @@ const handleReject = (id: any) => {
     },
   });
 };
+// 多选禁用
+const getCheckboxProps = (record: any) => {
+  console.log(record)
+  return {
+    disabled: record.status === 'SUBMITTED' || record.status === 'APPROVED',
+  };
+};
 // 多选
 const handleSelectionChange = (keys: any) => {
   batchData.value = keys;
@@ -559,24 +563,19 @@ const checkTableDataChanges = () => {
 const handleModalOk = () => {
   console.log(orgFileTableData.value)
   console.log(fileTableData.value)
-  console.log(
-  modalTableRef.value.editingData)
+  console.log(modalTableRef.value.editingData)
   if (modalTableRef.value.editingData != undefined) {
     message.warning("请点击保存后提交数据！");
     return
   }
-   const { hasChanged, changedCount } = checkTableDataChanges();
+  const { hasChanged, changedCount } = checkTableDataChanges();
 
   // 3. 如果没有变化，直接返回，不执行后续操作
   if (!hasChanged) {
     message.info("数据未发生任何变化，无需提交");
     return;
   }
-console.log(123)
-  // if (warnings.value.length > 0) {
-  //   message.warning("请先修复数据");
-  //   return;
-  // }
+  console.log(123)
   // Modal.confirm({
   //   title: "是否提交导入数据?",
   //   onOk: async () => {
@@ -669,8 +668,10 @@ const importBtn = async () => {
   let res: any = await checkImportStatus();
   taskId.value = "";
   if (res?.code == 0) {
-    const { hasImportingTask ,currentTask} = res?.data || {};
-    taskId.value = currentTask.id;
+    const { hasImportingTask, currentTask} = res?.data || {};
+    if (currentTask) {
+      taskId.value = currentTask.id;
+    }
     if (hasImportingTask) {
       visible.value = true;
       nextTick(async () => {

From c78399c98c890c1f0aa607dd3e9c4470d40faa4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=85=B4=E5=87=AF?= <2448379534@qq.com>
Date: Mon, 27 Apr 2026 11:57:26 +0800
Subject: [PATCH 6/9] =?UTF-8?q?BUG=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/login-sjtb/index.vue       |  17 +-
 frontend/src/views/register/index.vue         | 324 ++++++++++++++++++
 .../src/views/shuJuTianBao/shengPiJiLu.vue    |  26 +-
 frontend/src/views/system/role/index.vue      |   4 +-
 4 files changed, 356 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/views/register/index.vue

diff --git a/frontend/src/views/login-sjtb/index.vue b/frontend/src/views/login-sjtb/index.vue
index 7cc8bdb..f6dbffc 100644
--- a/frontend/src/views/login-sjtb/index.vue
+++ b/frontend/src/views/login-sjtb/index.vue
@@ -168,6 +168,15 @@
                 >
                   忘记密码
                 </a-button> -->
+                <a-button
+                  type="link"
+                  size="mini"
+                  block
+                  @click="goRegister"
+                  :style="{ marginTop: '10px', border: 'none' }"
+                >
+                  注册
+                </a-button>
 
                 <!-- 忘记密码 -->
               </a-form>
@@ -367,6 +376,7 @@ function onFinish() {
         setPath('/login-sjtb')
       router.push({ path: "/" });
       state.loading = false;
+      message.success("登录成功");
     })
     .catch(() => {
       getCode();
@@ -437,7 +447,10 @@ const startCountdown = () => {
 // const showForgotPasswordPage = () => {
 //   showForgotPassword.value = true;
 // };
-
+//注册用户页面
+const goRegister = () => {
+  router.push({ path: "/register" });
+};
 // 返回登录页面
 const backToLogin = () => {
   showForgotPassword.value = false;
@@ -625,7 +638,7 @@ onMounted(() => {
       position: absolute;
       top: 20%;
       left: 18%;
-      width: 490px;
+      width: 700px;
       height: 112px;
       color: #040504;
       font-size: 40px;
diff --git a/frontend/src/views/register/index.vue b/frontend/src/views/register/index.vue
new file mode 100644
index 0000000..0d1126e
--- /dev/null
+++ b/frontend/src/views/register/index.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="register-container">
+    <div class="register-wrapper">
+      <!-- 左侧：背景图区域 -->
+      <div class="left-section">
+        <div class="slogan">
+          <p>{{ $t("login.titleSjtb") }}</p>
+        </div>
+      </div>
+
+      <!-- 右侧：注册表单区域 -->
+      <div class="right-section">
+        <a-tabs v-model:activeKey="activeTab" class="register-tabs">
+          <a-tab-pane key="register" tab="用户注册">
+            <a-form
+              :model="registerData"
+              :rules="registerRules"
+              layout="vertical"
+              class="form-container"
+              @finish="onRegister"
+            >
+              <!-- 登录账号 -->
+              <a-form-item name="username" label="登录账号">
+                <a-input 
+                  v-model:value="registerData.username" 
+                  placeholder="请输入登录账号（4-20个字符）"
+                  :prefix="h(UserOutlined)"
+                />
+              </a-form-item>
+
+              <!-- 真实姓名 -->
+              <a-form-item name="realName" label="真实姓名">
+                <a-input 
+                  v-model:value="registerData.realName" 
+                  placeholder="请输入真实姓名"
+                />
+              </a-form-item>
+
+              <!-- 手机号 -->
+              <a-form-item name="phone" label="手机号">
+                <a-input 
+                  v-model:value="registerData.phone" 
+                  placeholder="请输入11位手机号"
+                  :prefix="h(MobileOutlined)"
+                />
+              </a-form-item>
+
+              <!-- 密码 -->
+              <a-form-item name="password" label="密码">
+                <a-input-password 
+                  v-model:value="registerData.password" 
+                  placeholder="请设置密码（6-20个字符）"
+                  :prefix="h(LockOutlined)"
+                />
+              </a-form-item>
+
+              <!-- 确认密码 -->
+              <a-form-item name="confirmPassword" label="确认密码">
+                <a-input-password 
+                  v-model:value="registerData.confirmPassword" 
+                  placeholder="请再次输入密码"
+                  :prefix="h(LockOutlined)"
+                />
+              </a-form-item>
+
+              <!-- 验证码 -->
+              <a-form-item name="code" label="验证码">
+                <a-row :gutter="8">
+                  <a-col :span="16">
+                    <a-input 
+                      v-model:value="registerData.code" 
+                      placeholder="请输入验证码"
+                    />
+                  </a-col>
+                  <a-col :span="8">
+                    <img 
+                      v-if="captchaImg"
+                      :src="captchaImg" 
+                      @click="refreshCaptcha" 
+                      style="cursor: pointer; width: 100%; height: 36px;"
+                    />
+                  </a-col>
+                </a-row>
+              </a-form-item>
+
+              <!-- 注册按钮 -->
+              <a-button
+                type="primary"
+                size="large"
+                block
+                htmlType="submit"
+                :loading="loading"
+              >
+                <span>立即注册</span>
+              </a-button>
+
+              <!-- 返回登录 -->
+              <a-button
+                type="link"
+                size="small"
+                block
+                @click="backToLogin"
+                :style="{ marginTop: '10px' }"
+              >
+                已有账号？返回登录
+              </a-button>
+            </a-form>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted, h } from "vue";
+import { UserOutlined, LockOutlined, MobileOutlined } from "@ant-design/icons-vue";
+import { getCaptcha, registerUser } from "@/api/auth";
+import { message } from "ant-design-vue";
+import router from "@/router";
+import { encrypt } from "@/utils/rsaEncrypt";
+
+// 注册表单数据
+const registerData = reactive({
+  // 必填字段
+  username: "",
+  realName: "",
+  phone: "",
+  password: "",
+  confirmPassword: "",
+  code: "",
+  uuid: "",
+  
+  // 系统字段
+  userType: 1,
+  status: 1,
+  regStatus: 0
+});
+
+// 表单验证规则
+const registerRules = {
+  // 登录账号
+  username: [
+    { required: true, message: "请输入登录账号", trigger: "blur" },
+    { min: 4, max: 20, message: "账号长度4-20个字符", trigger: "blur" },
+    { pattern: /^[a-zA-Z0-9_]+$/, message: "只能包含字母、数字和下划线", trigger: "blur" }
+  ],
+  
+  // 真实姓名
+  realName: [
+    { required: true, message: "请输入真实姓名", trigger: "blur" },
+    { min: 2, max: 20, message: "姓名长度2-20个字符", trigger: "blur" }
+  ],
+  
+  // 手机号
+  phone: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的11位手机号", trigger: "blur" }
+  ],
+  
+  // 密码
+  password: [
+    { required: true, message: "请输入密码", trigger: "blur" },
+    { min: 6, max: 20, message: "密码长度6-20个字符", trigger: "blur" }
+  ],
+  
+  // 确认密码
+  confirmPassword: [
+    { required: true, message: "请再次输入密码", trigger: "blur" },
+    {
+      validator: (rule: any, value: string) => {
+        if (value && value !== registerData.password) {
+          return Promise.reject("两次输入的密码不一致");
+        }
+        return Promise.resolve();
+      },
+      trigger: "blur"
+    }
+  ],
+  
+  // 验证码
+  code: [
+    { required: true, message: "请输入验证码", trigger: "blur" }
+  ]
+};
+
+const loading = ref(false);
+const captchaImg = ref("");
+const activeTab = ref("register");
+
+// 获取验证码
+const refreshCaptcha = async () => {
+  try {
+    const res = await getCaptcha();
+    registerData.uuid = res.data.verifyCodeKey;
+    captchaImg.value = res.data.verifyCodeImg; // base64图片
+  } catch (error) {
+    message.error("获取验证码失败");
+  }
+};
+
+// 注册提交
+const onRegister = async () => {
+  loading.value = true;
+  
+  try {
+    // 密码加密
+    const encryptedPassword = encrypt(registerData.password);
+    
+    // 构造注册数据
+    const registerParams = {
+      username: registerData.username,
+      realName: registerData.realName,
+      phone: registerData.phone,
+      password: encryptedPassword,
+      
+      // 系统字段
+      userType: 1,
+      status: 1,
+      regStatus: 0,
+      
+      // 验证码相关
+      code: registerData.code,
+      uuid: registerData.uuid
+    };
+    
+    // 调用注册接口
+    await registerUser(registerParams);
+    
+    message.success("注册成功，等待管理员审核");
+    
+    // 延迟跳转到登录页
+    setTimeout(() => {
+      router.push({ path: "/login" });
+    }, 1500);
+    
+  } catch (error: any) {
+    message.error(error.message || "注册失败，请重试");
+    // 刷新验证码
+    refreshCaptcha();
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 返回登录
+const backToLogin = () => {
+  router.push({ path: "/login" });
+};
+
+// 初始化
+onMounted(() => {
+  refreshCaptcha();
+});
+</script>
+
+<style scoped lang="scss">
+.register-container {
+  margin: 0 auto;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 1500px;
+  background-color: #fff;
+
+  .register-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 600px;
+    background: url("@/assets/images/bg_sjtb.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  // 左侧背景区域
+  .left-section {
+    .slogan {
+      position: absolute;
+      top: 20%;
+      left: 18%;
+      width: 700px;
+      height: 112px;
+      color: #040504;
+      font-size: 40px;
+    }
+  }
+
+  // 右侧注册卡片区域
+  .right-section {
+    position: absolute;
+    left: 70%;
+    top: 15%;
+    width: 25%;
+    // max-height: 650px;
+    // max-width: 400px;
+    min-height: 650px;
+    border-radius: 3px;
+    padding: 20px 24px 24px;
+    background-color: #fff;
+    overflow-y: auto;
+
+    :deep(.ant-form-item) {
+      margin-bottom: 14px;
+    }
+
+    :deep(.ant-form-item-label > label) {
+      font-size: 13px;
+    }
+
+
+    :deep(.ant-input-prefix) {
+      display: flex;
+      width: 26px;
+
+      svg {
+        width: 18px;
+        height: 18px;
+        margin-right: 4px;
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/shuJuTianBao/shengPiJiLu.vue b/frontend/src/views/shuJuTianBao/shengPiJiLu.vue
index 11ae240..9d1bb16 100644
--- a/frontend/src/views/shuJuTianBao/shengPiJiLu.vue
+++ b/frontend/src/views/shuJuTianBao/shengPiJiLu.vue
@@ -117,8 +117,8 @@ let columns = ref([
     },
     {
         title: '提交人',
-        dataIndex: 'applyUserId',
-        key: 'applyUserId',
+        dataIndex: 'applyUserName',
+        key: 'applyUserName',
         width: 120,
           align: 'center'
     },
@@ -140,15 +140,17 @@ let columns = ref([
     },
     {
         title: '审批人',
-        dataIndex: 'approverId',
-        key: 'approverId',
-        width: 120
+        dataIndex: 'approverName',
+        key: 'approverName',
+        width: 120,
+         align: 'center'
     },
     {
         title: '审批时间',
         dataIndex: 'approveTime',
         key: 'approveTime',
         width: 160,
+         align: 'center'
 
     },
     {
@@ -209,9 +211,10 @@ const approvalLogColumns = ref([
     },
     {
         title: '操作人',
-        dataIndex: 'operatorId',
-        key: 'operatorId',
-        width: 150
+        dataIndex: 'operatorName',
+        key: 'operatorName',
+        width: 150,
+        align: 'center'
     },
     {
         title: '操作时间',
@@ -255,9 +258,10 @@ const changeLogColumns = ref([
     },
     {
         title: '操作人',
-        dataIndex: 'operatorId',
-        key: 'operatorId',
-        width: 150
+        dataIndex: 'operatorName',
+        key: 'operatorName',
+        width: 150,
+        align: 'center'
     },
     {
         title: '操作时间',
diff --git a/frontend/src/views/system/role/index.vue b/frontend/src/views/system/role/index.vue
index 9072002..15e4b3a 100644
--- a/frontend/src/views/system/role/index.vue
+++ b/frontend/src/views/system/role/index.vue
@@ -68,7 +68,7 @@ const input = ref("");
 const title = ref("");
 const info: any = ref({
   rolename: "",
-  level: "系统管理员",
+  level: "2",
   description: "",
 });
 const faultList: any = [
@@ -90,7 +90,7 @@ function addClick() {
   title.value = "新增角色";
   info.value = {
     rolename: "",
-    level: "系统管理员",
+    level: "2",
     description: "",
   };
   dialogVisible.value = true;

From 7ccaeffd3956f7def39920be704d5fcc24f85d00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=88=E5=85=86=E5=A2=9E?= <你的邮箱@example.com>
Date: Mon, 27 Apr 2026 11:58:47 +0800
Subject: [PATCH 7/9] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Copilot <copilot@github.com>
---
 frontend/index.html                           |   2 +-
 .../src/api/guoYuSheShiShuJuTianBao/index.ts  |  17 +-
 frontend/src/views/login-sjtb/index.vue       |  20 ++-
 .../guoYuSheShiShuJuTianBaoSearch.vue         |  28 +++-
 .../guoYuSheShiShuJuTianBaoTable.vue          |  22 +--
 .../guoYuSheShiShuJuTianBao/index.vue         | 151 ++++++++----------
 6 files changed, 126 insertions(+), 114 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index e5fed2d..b90f83a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="qgc-buji-web" />
     <meta name="keywords" content="qgc-buji-web" />
-    <title>水电水利建设项目全过程环境管理信息平台</title>
+    <title>水电水利建设项目全过程数据填报系统</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/frontend/src/api/guoYuSheShiShuJuTianBao/index.ts b/frontend/src/api/guoYuSheShiShuJuTianBao/index.ts
index bd5eb6d..b3fd165 100644
--- a/frontend/src/api/guoYuSheShiShuJuTianBao/index.ts
+++ b/frontend/src/api/guoYuSheShiShuJuTianBao/index.ts
@@ -65,14 +65,6 @@ export function importFishZip(data:FormData) {
     headers: { 'Content-Type': 'multipart/form-data' }
   });
 }
-// 提交导入任务
-export function submitImportTask(data:any) {
-  return request({
-    url: '/data/fishDraft/submitDrafts',
-    method: 'post',
-    data
-  });
-}
 // 取消导入任务
 export function cancelImportTask(data:any) {
   return request({
@@ -105,3 +97,12 @@ export function batchSaveDraft(data:any) {
     data
   });
 }
+
+// 标记导入任务为成功
+export function markImportTaskSuccess(data:any) {
+  return request({
+    url: '/data/importTask/markSuccess',
+    method: 'post',
+    data
+  });
+}
diff --git a/frontend/src/views/login-sjtb/index.vue b/frontend/src/views/login-sjtb/index.vue
index 7cc8bdb..79bd136 100644
--- a/frontend/src/views/login-sjtb/index.vue
+++ b/frontend/src/views/login-sjtb/index.vue
@@ -159,6 +159,11 @@
                 >
                   <span>登录</span>
                 </a-button>
+                <div class="flex justify-center items-center mt-[10px]">
+                  <a-button type="link" size="small">
+                    <span>注册</span>
+                  </a-button>
+                </div>
                 <!-- <a-button
                   type="link"
                   size="mini"
@@ -245,7 +250,7 @@ import loginImg from "@/assets/images/logo.png";
 import { UserOutlined, LockOutlined, MobileOutlined } from "@ant-design/icons-vue";
 import { getCaptcha } from "@/api/auth";
 import { message } from "ant-design-vue";
-import { setPath } from '@/utils/auth';
+import { setPath } from "@/utils/auth";
 // 组件依赖
 
 import router from "@/router";
@@ -322,11 +327,12 @@ const forgotPasswordRules = ref({
   ],
 });
 
-const { loginData, loginRules, loading, 
-  // passwordType, capslockTooltipDisabled 
-} = toRefs(
-  state
-);
+const {
+  loginData,
+  loginRules,
+  loading,
+  // passwordType, capslockTooltipDisabled
+} = toRefs(state);
 
 // function checkCapslock(e: any) {
 //   const { key } = e;
@@ -364,7 +370,7 @@ function onFinish() {
     .login(user)
     .then(() => {
       Cookies.set("username", user.username);
-        setPath('/login-sjtb')
+      setPath("/login-sjtb");
       router.push({ path: "/" });
       state.loading = false;
     })
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue
index f3fa471..a79187c 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue
@@ -13,25 +13,39 @@
       </template>
       <template #actions>
         <a-tooltip title="新增">
-          <a-button @click="props.handleAdd"> 新增 </a-button>
+          <a-button v-hasPerm="['sjtb:import-add']" @click="props.handleAdd">
+            新增
+          </a-button>
         </a-tooltip>
         <a-tooltip title="导入zip">
-          <a-button v-hasPerm="['sjtb:import-zip']" @click="props.importBtn">
+          <a-button v-hasPerm="['sjtb:import-add']" @click="props.importBtn">
             导入zip
           </a-button>
         </a-tooltip>
-        <a-button @click="props.batchDelBtn" :disabled="batchData.length === 0">
+        <a-button
+          v-hasPerm="['sjtb:import-add']"
+          @click="props.batchDelBtn"
+          :disabled="batchData.length === 0"
+        >
           批量删除
         </a-button>
         <a-tooltip title="提交数据">
-          <a-button @click="props.submitBtn" :disabled="batchData.length === 0">
+          <a-button
+            v-hasPerm="['sjtb:import-add']"
+            @click="props.submitBtn"
+            :disabled="batchData.length === 0"
+          >
             <template #icon><SaveOutlined /></template>
             提交数据
           </a-button>
         </a-tooltip>
 
         <a-tooltip title="批量审批">
-          <a-button @click="props.successBtn" :disabled="batchData.length === 0">
+          <a-button
+            v-hasPerm="['sjtb:edit-review']"
+            @click="props.successBtn"
+            :disabled="batchData.length === 0"
+          >
             <template #icon><CheckSquareOutlined /></template>
             批量审批
           </a-button>
@@ -51,7 +65,6 @@
 
 <script lang="ts" setup>
 import { ref, computed, onMounted, watch } from "vue";
-import { message } from "ant-design-vue";
 import {
   SaveOutlined,
   CheckSquareOutlined,
@@ -137,7 +150,7 @@ const searchList: any = computed(() => [
       allowClear: true,
     },
   },
-  checkPerm(["sjtb:edit-ztcx"]) && {
+  {
     width: 120,
     type: "Select",
     name: "status",
@@ -147,7 +160,6 @@ const searchList: any = computed(() => [
     },
     options: props.guoyuStatus,
   },
-
   {
     span: 12,
     type: "RangePicker",
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoTable.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoTable.vue
index b58f824..6de9a0b 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoTable.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoTable.vue
@@ -4,8 +4,8 @@
     :loading="fileLoading"
     :data-source="fileTableData"
     :columns="modalColumns"
-    height="500"
-    :scroll="{ y: 500, x: '100%' }"
+    :scroll="{ y: '100%', x: '100%' }"
+    pagination="false"
     :row-key="(record, index) => index"
   >
     <template #bodyCell="{ column, record, index }">
@@ -29,13 +29,13 @@
       <template
         v-else-if="
           !isEditing(index) &&
-          column.dataIndex &&
+          column.dataIndexKey &&
           record._warnings &&
-          record._warnings.includes(column.dataIndex)
+          record._warnings.includes(column.dataIndexKey)
         "
       >
         <div style="color: red; display: flex; align-items: center">
-          <span>{{ getDisplayValue(column.dataIndex, record) }}</span>
+          <span>{{record[column.dataIndex] }}</span>
           <exclamation-circle-outlined style="margin-left: 4px" />
         </div>
       </template>
@@ -236,9 +236,9 @@ const rowStates = reactive<Record<number, any>>({});
 const editingData = ref<any>(null);
 
 const modalColumns = ref([
-  { dataIndex: "baseName", key: "baseName", title: "流域", width: 140 },
-  { dataIndex: "ennm", key: "ennm", title: "电站名称", width: 140 },
-  { dataIndex: "stnm", key: "stnm", title: "过鱼设施名称", width: 150 },
+  { dataIndex: "baseName", key: "baseName", dataIndexKey: "baseId", title: "流域", width: 140 },
+  { dataIndex: "ennm", key: "ennm", dataIndexKey: "rstcd", title: "电站名称", width: 140 },
+  { dataIndex: "stnm", key: "stnm", dataIndexKey: "stcd", title: "过鱼设施名称", width: 150 },
   { dataIndex: "strdt", key: "strdt", title: "过鱼时间", width: 190 },
   { dataIndex: "ftpName", key: "ftpName", title: "鱼种类", width: 120 },
   {
@@ -258,8 +258,10 @@ const modalColumns = ref([
     key: "direction",
     title: "游向",
     width: 120,
-    customRender: ({ text }: any) =>
-      props.direction.find((item: any) => item.itemCode === text)?.dictName || "-",
+    customRender: ({ text }: any) => {
+      console.log(props.direction)
+      return props.direction.find((item: any) => item.itemCode === text)?.dictName || "-"
+    }
   },
   { dataIndex: "fcnt", key: "fcnt", title: "过鱼数量(尾)", width: 120 },
   { dataIndex: "fsz", key: "fsz", title: "体长(cm)", width: 160 },
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
index ece6e1e..a82424a 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
@@ -57,7 +57,7 @@
               type="link"
               size="small"
               @click="handleEdit(record, 'view')"
-              v-if="record.status === 'SUBMITTED'"
+              v-if="record.status === 'SUBMITTED' || record.status === 'APPROVED'"
               >查看</a-button
             >
             <a-button
@@ -97,6 +97,7 @@
       maskClosable="false"
       :confirm-loading="fileLoading"
     >
+    <div class="w-full h-[500px]">
       <GuoYuSheShiShuJuTianBaoTable
         ref="modalTableRef"
         :fileLoading="fileLoading"
@@ -104,6 +105,7 @@
         :direction="direction"
         @update:file-table-data="(val) => fileTableData = val"
       />
+      </div>
       <template #footer>
         <a-button key="back" @click="handleCustomCancel">取消导入</a-button>
         <a-button
@@ -166,15 +168,14 @@ import {
   successFishDraft,
   rejectFishDraft,
   importFishZip,
-  submitImportTask,
   cancelImportTask,
   checkImportStatus,
   batchSaveDraft,
   getLastImportResult,
+  markImportTaskSuccess
 } from "@/api/guoYuSheShiShuJuTianBao";
 import { Tag } from "ant-design-vue"; // 确保导入 Tag
 import { getDictItemsByCode } from "@/api/dict";
-import { m } from "vue-router/dist/router-CWoNjPRp.mjs";
 // import { FileImageOutlined, VideoCameraOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
 
 // --- 类型定义 ---
@@ -274,24 +275,10 @@ const currentVideoUrl = ref<string>("");
 // 表格数据
 const fileTableData = ref<any[]>([]);
 const orgFileTableData = ref<any[]>([]);
-const warnings = ref<any[]>([]);
 const batchData = ref<any[]>([]);
 
 const modalTableRef = ref<any>(null);
 const fileLoading = ref(false);
-
-// 行内编辑 Key (用于导入预览表格)
-const editingKey = ref<string | number>("");
-
-// --- 辅助函数 ---
-
-// 从 Zip 获取 Blob URL
-// const getBlobUrlFromZip = async (zip: JSZip, fileName: string): Promise<string> => {
-//   try {
-//     const file = zip.file(fileName);
-//     if (!file) return "";
-//     const blob = await file.async("blob");
-//     return URL.createObjectURL(blob);
 const taskId = ref<string>("");
 
 // 主表格 Columns
@@ -429,7 +416,6 @@ const successBtn = async () => {
 // 批量驳回过鱼数据
 const handleReject = (id: any) => {
   let rejectReason = "";
-
   Modal.confirm({
     title: "是否确认 驳回 选中数据?",
     // 使用 h 函数创建内容
@@ -576,22 +562,20 @@ const handleModalOk = () => {
     return;
   }
   console.log(123)
-  // Modal.confirm({
-  //   title: "是否提交导入数据?",
-  //   onOk: async () => {
-  //     // tableData.value = [...fileTableData.value];
-  //     let ids = fileTableData.value.map((item: any) => item.id);
-  //     visible.value = false;
-  //     editingKey.value = "";
-  //     let res: any = await submitImportTask(ids);
-  //     if (res && res?.code == 0) {
-  //       message.success("导入成功");
-  //       tableRef.value?.getList();
-  //     } else {
-  //       message.error("导入失败,请检查数据是否正确");
-  //     }
-  //   },
-  // });
+  Modal.confirm({
+    title: "是否提交导入数据?",
+    onOk: async () => {
+      let res: any = await batchSaveDraft(fileTableData.value);
+      if (res && res?.code == 0) {
+        message.success("导入成功");
+        visible.value = false;
+        tableRef.value?.getList();
+       await markImportTaskSuccess({id: taskId.value});
+      } else {
+        message.error("导入失败,请检查数据是否正确");
+      }
+    },
+  });
 };
 
 // 关闭导入弹窗
@@ -601,18 +585,69 @@ const handleCustomCancel = () => {
     content: "未提交的数据将丢失",
     okText: "确定",
     onOk: async () => {
-      visible.value = false;
-      editingKey.value = "";
       // 可选：调用取消接口
       let res: any = await cancelImportTask({taskId: taskId.value});
       if (res && res?.code == 0) {
         message.success("取消成功");
         tableRef.value?.getList();
+        visible.value = false;
       }
     },
   });
 };
+// 导入-按钮
+const importBtn = async () => {
+  let res: any = await checkImportStatus();
+  taskId.value = "";
+  if (res?.code == 0) {
+    const { hasImportingTask, currentTask} = res?.data || {};
+    if (currentTask) {
+      taskId.value = currentTask.id;
+    }
+    if (hasImportingTask) {
+      visible.value = true;
+      nextTick(async () => {
+        try {
+          fileLoading.value = true;
+          modalTableRef.value.editingRowIndex = null;
+          let res1: any = await getLastImportResult();
+          fileTableaAnalysis(res1, "get");
+        } catch (error) {
+          message.error("导入失败");
+        } finally {
+          fileLoading.value = false;
+        }
+      });
+    } else {
+      fileInputRef.value?.click();
+    }
+  } else {
+    message.error("导入查询失败");
+  }
+};
+// 上传文件
+const fileChange = async (file: File) => {
+  try {
+    visible.value = true;
+    fileLoading.value = true;
+    const formData = new FormData();
+    formData.append("file", file);
+    let res: any = await importFishZip(formData);
+    const { code } = res.data || {};
+    if (code == 1) {
+      message.error("导入失败");
+    } else {
+      taskId.value = res.data.taskId;
+      message.success("导入成功");
+      fileTableaAnalysis(res, "file");
+    }
+  } catch (error) {
+  } finally {
+    fileLoading.value = false;
+  }
 
+};
+// 获取文件列表
 const handleFileSelect = (e: Event) => {
   const target = e.target as HTMLInputElement;
   const file = target.files?.[0];
@@ -646,51 +681,8 @@ const resetFileInput = () => {
     fileInputRef.value.value = "";
   }
 };
-const fileChange = async (file: File) => {
-  try {
-    fileLoading.value = true;
-    const formData = new FormData();
-    formData.append("file", file);
-    let res: any = await importFishZip(formData);
-    const { code } = res.data || {};
-    if (code == 1) {
-      message.error("导入失败");
-    } else {
-      message.success("导入成功");
-      fileTableaAnalysis(res, "file");
-    }
-  } catch (error) {
-  } finally {
-  }
-};
-// 导入-按钮
-const importBtn = async () => {
-  let res: any = await checkImportStatus();
-  taskId.value = "";
-  if (res?.code == 0) {
-    const { hasImportingTask, currentTask} = res?.data || {};
-    if (currentTask) {
-      taskId.value = currentTask.id;
-    }
-    if (hasImportingTask) {
-      visible.value = true;
-      nextTick(async () => {
-        fileLoading.value = true;
-        modalTableRef.value.editingRowIndex = null;
-        let res1: any = await getLastImportResult();
-        fileTableaAnalysis(res1, "get");
-      });
-    } else {
-      fileInputRef.value?.click();
-    }
-  } else {
-    message.error("导入查询失败");
-  }
-  // editingKey.value = "";
-};
 const fileTableaAnalysis = (res: any, type: string) => {
   let data = [];
-  // let warningsList = [];
   let list = [];
   if (type == "file") {
     list = res.data.failedRows;
@@ -706,7 +698,6 @@ const fileTableaAnalysis = (res: any, type: string) => {
   });
   fileTableData.value = data || [];
   orgFileTableData.value = JSON.parse(JSON.stringify(fileTableData.value));
-  // warnings.value = warningsList || [];
   fileLoading.value = false;
 };
 const handleReset = (values) => {

From 7707ea90f7ce8693fb8b6ec9681f921f507eb848 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=88=E5=85=86=E5=A2=9E?= <你的邮箱@example.com>
Date: Mon, 27 Apr 2026 13:43:34 +0800
Subject: [PATCH 8/9] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BAusername?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/index.html                     |  2 +-
 frontend/src/lang/zh-cn.ts              |  2 +-
 frontend/src/views/login-sjtb/index.vue | 33 +++----------------------
 frontend/src/views/login/index.vue      | 23 ++---------------
 frontend/src/views/register/index.vue   |  6 +++--
 5 files changed, 12 insertions(+), 54 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index b90f83a..10c3ecb 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="qgc-buji-web" />
     <meta name="keywords" content="qgc-buji-web" />
-    <title>水电水利建设项目全过程数据填报系统</title>
+    <title>水电水利建设项目全过程环境管理信息平台数据填报子系统</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/frontend/src/lang/zh-cn.ts b/frontend/src/lang/zh-cn.ts
index b61ac93..db877d8 100644
--- a/frontend/src/lang/zh-cn.ts
+++ b/frontend/src/lang/zh-cn.ts
@@ -7,7 +7,7 @@ export default {
   // 登录页面国际化
   login: {
     title: '水电水利建设项目全过程环境管理信息平台',
-    titleSjtb: '水电水利建设项目全过程数据填报系统',
+    titleSjtb: '水电水利建设项目全过程环境管理信息平台数据填报子系统',
     username: '用户名',
     rulesUsername: '用户账号/身份证号/手机号 不能为空',
     password: '密码',
diff --git a/frontend/src/views/login-sjtb/index.vue b/frontend/src/views/login-sjtb/index.vue
index b527617..47c86b9 100644
--- a/frontend/src/views/login-sjtb/index.vue
+++ b/frontend/src/views/login-sjtb/index.vue
@@ -159,11 +159,6 @@
                 >
                   <span>登录</span>
                 </a-button>
-                <div class="flex justify-center items-center mt-[10px]">
-                  <a-button type="link" size="small">
-                    <span>注册</span>
-                  </a-button>
-                </div>
                 <!-- <a-button
                   type="link"
                   size="mini"
@@ -177,7 +172,6 @@
                   type="link"
                   size="mini"
                   block
-                  @click="goRegister"
                   :style="{ marginTop: '10px', border: 'none' }"
                 >
                   注册
@@ -263,7 +257,6 @@ import { setPath } from "@/utils/auth";
 // 组件依赖
 
 import router from "@/router";
-import Cookies from "js-cookie";
 // API依赖
 import { useRoute } from "vue-router";
 import { LoginData } from "@/api/auth/types";
@@ -302,8 +295,8 @@ const state = reactive({
   redirect: "",
   loginData: {
     uuid: "",
-    username: "admin",
-    password: "123456",
+    username: "",
+    password: "",
     code: "",
   } as LoginData,
   loginRules: {
@@ -378,7 +371,6 @@ function onFinish() {
   userStore
     .login(user)
     .then(() => {
-      Cookies.set("username", user.username);
       setPath("/login-sjtb");
       router.push({ path: "/" });
       state.loading = false;
@@ -412,22 +404,6 @@ function getOtherQuery(query: any) {
     return acc;
   }, {});
 }
-function getCookie() {
-  const username = Cookies.get("username");
-  let password = Cookies.get("password");
-  const rememberMe = Cookies.get("rememberMe");
-  rememberMe == "true" ? (remember.value = Boolean(rememberMe)) : false;
-  // 保存cookie里面的加密后的密码
-  state.cookiePass = password === undefined ? "" : password;
-  password = password === undefined ? state.loginData.password : password;
-  state.loginData = {
-    username: username === undefined ? state.loginData.username : username,
-    password: decrypt(password),
-    code: "",
-    uuid: "",
-  };
-  remember.value = rememberMe === undefined ? false : Boolean(rememberMe);
-}
 function getCode() {
   getCaptcha().then((result: any) => {
     codeUrl.value = result.data.img;
@@ -573,7 +549,6 @@ const handleResetPassword = async () => {
 };
 
 onMounted(() => {
-  getCookie();
   getCode();
 });
 </script>
@@ -643,8 +618,8 @@ onMounted(() => {
     .slogan {
       position: absolute;
       top: 20%;
-      left: 18%;
-      width: 700px;
+      left: 16%;
+      width: 780px;
       height: 112px;
       color: #040504;
       font-size: 40px;
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index a0b32db..a74742b 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -288,8 +288,8 @@ const state = reactive({
   redirect: "",
   loginData: {
     uuid: "",
-    username: "admin",
-    password: "123456",
+    username: "",
+    password: "",
     code: "",
   } as LoginData,
   loginRules: {
@@ -359,11 +359,9 @@ function onFinish() {
   if (user.password !== state.cookiePass) {
     user.password = encrypt(user.password);
   }
-  console.log(user);
   userStore
     .login(user)
     .then(() => {
-      Cookies.set("username", user.username);
       router.push({ path: "/" });
         setPath('/login')
       state.loading = false;
@@ -396,22 +394,6 @@ function getOtherQuery(query: any) {
     return acc;
   }, {});
 }
-function getCookie() {
-  const username = Cookies.get("username");
-  let password = Cookies.get("password");
-  const rememberMe = Cookies.get("rememberMe");
-  rememberMe == "true" ? (remember.value = Boolean(rememberMe)) : false;
-  // 保存cookie里面的加密后的密码
-  state.cookiePass = password === undefined ? "" : password;
-  password = password === undefined ? state.loginData.password : password;
-  state.loginData = {
-    username: username === undefined ? state.loginData.username : username,
-    password: decrypt(password),
-    code: "",
-    uuid: "",
-  };
-  remember.value = rememberMe === undefined ? false : Boolean(rememberMe);
-}
 function getCode() {
   getCaptcha().then((result: any) => {
     codeUrl.value = result.data.img;
@@ -554,7 +536,6 @@ const handleResetPassword = async () => {
 };
 
 onMounted(() => {
-  getCookie();
   getCode();
 });
 </script>
diff --git a/frontend/src/views/register/index.vue b/frontend/src/views/register/index.vue
index 0d1126e..612f417 100644
--- a/frontend/src/views/register/index.vue
+++ b/frontend/src/views/register/index.vue
@@ -115,7 +115,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, h } from "vue";
 import { UserOutlined, LockOutlined, MobileOutlined } from "@ant-design/icons-vue";
-import { getCaptcha, registerUser } from "@/api/auth";
+import { getCaptcha, 
+  // registerUser
+ } from "@/api/auth";
 import { message } from "ant-design-vue";
 import router from "@/router";
 import { encrypt } from "@/utils/rsaEncrypt";
@@ -225,7 +227,7 @@ const onRegister = async () => {
     };
     
     // 调用注册接口
-    await registerUser(registerParams);
+    // await registerUser(registerParams);
     
     message.success("注册成功，等待管理员审核");
     

From 10c3c33ad0d62a63288d8f08d4c76634cbf4ce98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=88=E5=85=86=E5=A2=9E?= <你的邮箱@example.com>
Date: Mon, 27 Apr 2026 19:11:22 +0800
Subject: [PATCH 9/9] =?UTF-8?q?=E5=AF=BC=E5=85=A5=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E8=B5=B0=E9=80=9A=EF=BC=8C=E9=A2=84=E8=A7=88=E5=AF=BC=E5=85=A5?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=92=8C=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Copilot <copilot@github.com>
---
 frontend/.env.development                     |   1 +
 frontend/.env.production                      |   1 +
 frontend/src/components/BasicSearch/index.vue |   2 +
 frontend/src/components/BasicTable/index.vue  |  23 +-
 frontend/src/components/gis/GisView.vue       |  69 +--
 frontend/src/components/gis/map.ol.ts         |   1 -
 .../guoYuSheShiShuJuTianBaoForm.vue           |   3 +
 .../guoYuSheShiShuJuTianBaoSearch.vue         |  10 +-
 .../guoYuSheShiShuJuTianBaoTable.vue          | 126 ++++--
 .../guoYuSheShiShuJuTianBao/index.vue         | 405 +++++++++++++++---
 10 files changed, 493 insertions(+), 148 deletions(-)

diff --git a/frontend/.env.development b/frontend/.env.development
index f553b27..d81642f 100644
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -6,3 +6,4 @@ NODE_ENV='development'
 VITE_APP_TITLE = '水电水利建设项目全过程环境管理信息平台'
 VITE_APP_PORT = 3000
 VITE_APP_BASE_API = '/dev-api'
+VITE_APP_PREVIEW_URL = 'https://211.99.26.225:12125'
diff --git a/frontend/.env.production b/frontend/.env.production
index afcb741..508d6f8 100644
--- a/frontend/.env.production
+++ b/frontend/.env.production
@@ -4,3 +4,4 @@ NODE_ENV='production'
 VITE_APP_TITLE = 'qgc-buji-web'
 VITE_APP_PORT = 3000
 VITE_APP_BASE_API = '/prod-api'
+VITE_APP_PREVIEW_URL = 'https://211.99.26.225:12125'
diff --git a/frontend/src/components/BasicSearch/index.vue b/frontend/src/components/BasicSearch/index.vue
index 3b8fb43..a03b9ec 100644
--- a/frontend/src/components/BasicSearch/index.vue
+++ b/frontend/src/components/BasicSearch/index.vue
@@ -79,6 +79,7 @@
                     placeholder="请选择"
                     @change="dataDimensionDataChange"
                     show-search
+                    allow-clear
                     :loading="shuJuTianBaoStore.baseLoading"
                     :filter-option="filterOption"
                     style="width: 135px"
@@ -97,6 +98,7 @@
                     placeholder="请选择电站"
                     @change="stcdIdChange"
                     show-search
+                    allow-clear
                     :loading="shuJuTianBaoStore.engLoading"
                     :filter-option="filterOption"
                     style="width: 135px"
diff --git a/frontend/src/components/BasicTable/index.vue b/frontend/src/components/BasicTable/index.vue
index 82d4cb0..5fc6919 100644
--- a/frontend/src/components/BasicTable/index.vue
+++ b/frontend/src/components/BasicTable/index.vue
@@ -34,6 +34,7 @@ interface Props {
   // 默认每页显示数量
   defaultPageSize?: number;
   getCheckboxProps?: (record: any) => any;
+  transformData?: (res: any) => { records: any[]; total: number };
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -41,7 +42,8 @@ const props = withDefaults(defineProps<Props>(), {
   rowKey: "id",
   searchParams: () => ({}),
   defaultPageSize: 20,
-  getCheckboxProps: undefined
+  getCheckboxProps: undefined,
+  transformData: undefined,
 });
 
 const emit = defineEmits<{
@@ -101,20 +103,29 @@ const getList = async (filter?: Record<string, any>) => {
       // skip: (page.value - 1) * size.value,
       // take: size.value,
     };
-    console.log(params);
 
     const res = await props.listUrl(params);
+    let records: any[] = [];
+    let totalCount: number = 0;
+
+    // [!code ++] 核心逻辑：如果父组件传入了 transformData，则使用父组件的逻辑
+    if (props.transformData) {
+      const result = props.transformData(res);
+      records = result.records || [];
+      totalCount = result.total || 0;
+    } else {
+      // [!code ++] 否则使用默认逻辑
+      records = res?.data?.records || res?.data || [];
+      totalCount = res?.data?.total || res?.total || 0;
+    }
 
-    // 假设后端返回结构为 { data: { records: [], total: 0 } }
-    // 请根据实际后端接口调整以下取值逻辑
-    const records = res?.data?.records || res?.data?.list || res?.data || [];
-    const totalCount = res?.data?.total || res?.total || 0;
 
     tableData.value = records;
     total.value = totalCount;
 
     // 向父组件暴露当前请求参数和结果
     emit("data-loaded", params, { records, total: totalCount });
+    
   } catch (error) {
     console.error("Fetch table data error:", error);
     tableData.value = [];
diff --git a/frontend/src/components/gis/GisView.vue b/frontend/src/components/gis/GisView.vue
index b2f4e37..398b8ae 100644
--- a/frontend/src/components/gis/GisView.vue
+++ b/frontend/src/components/gis/GisView.vue
@@ -56122,41 +56122,42 @@ const fetchPointData = _.debounce(async () => {
   //   }
   // }
   // 基础图层
-  // mapClass.addBaseDataLayer({
-  //   id: "customBaseLayer",
-  //   key: "customBaseLayer",
-  //   type: "wmts",
-  //   name: "qgc_sx_gjjdx_arcgistiles_l13",
-  //   urlType: "gisurl",
-  //   url:
-  //     "/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=qgc_qsj_arcgistiles_l13&STYLE=&TILEMATRIX=EPSG:3857_qgc_qsj_arcgistiles_l13:{z}&TILEMATRIXSET=EPSG:3857_qgc_qsj_arcgistiles_l13&FORMAT=image/png&TILECOL={x}&TILEROW={y}",
-  //   url_3d:
-  //     "/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=qgc_sx_gjjdx_arcgistiles_l13&STYLE=&TILEMATRIX=EPSG:3857_qgc_sx_gjjdx_arcgistiles_l13:{z}&TILEMATRIXSET=EPSG:3857_qgc_sx_gjjdx_arcgistiles_l13&FORMAT=image/png&TILECOL={x}&TILEROW={y}",
-  //   matrixIds_index: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
-  //   tileMatrixSetID: "EPSG:3857_qgc_sx_gjjdx_arcgistiles_l13",
-  // });
+  mapClass.addBaseDataLayer({
+    id: "customBaseLayer",
+    key: "customBaseLayer",
+    type: "wmts",
+    name: "qgc_sx_gjjdx_arcgistiles_l13",
+    urlType: "gisurl",
+    url:
+      "/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=qgc_qsj_arcgistiles_l13&STYLE=&TILEMATRIX=EPSG:3857_qgc_qsj_arcgistiles_l13:{z}&TILEMATRIXSET=EPSG:3857_qgc_qsj_arcgistiles_l13&FORMAT=image/png&TILECOL={x}&TILEROW={y}",
+    url_3d:
+      "/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=qgc_sx_gjjdx_arcgistiles_l13&STYLE=&TILEMATRIX=EPSG:3857_qgc_sx_gjjdx_arcgistiles_l13:{z}&TILEMATRIXSET=EPSG:3857_qgc_sx_gjjdx_arcgistiles_l13&FORMAT=image/png&TILECOL={x}&TILEROW={y}",
+    matrixIds_index: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
+    tileMatrixSetID: "EPSG:3857_qgc_sx_gjjdx_arcgistiles_l13",
+  });
   // setTimeout(() => {
-    mapClass.addBaseDataLayer({
-    "id": "hydropBase",
-    "key": "hydropBase",
-    "urlType": "gisurl",
-    "url": "https://211.99.26.225:18085/geoserver/gwc/service/tms/1.0.0/qgc%3AstationEra1117@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
-    "geojson_url": "https://211.99.26.225:18085/geoserver/qgc/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=qgc:stationEra1117&maxFeatures=50&outputFormat=application/json&token=bearer a9a0f227-1df3-4e68-b380-2eca5bb49bd1",
-    "url_3d": "https://211.99.26.225:18085/geoserver/qgc/wms",
-    "_layer": "stationEra1117",
-    "layers": "qgc:stationEra1117",
-    "rasteropacity": 0.5,
-    "visible": true,
-    "minZoom": 0,
-    "maxZoom": 20,
-    "type": "vector",
-    "layerType": "line",
-    "paint": {
-        "line-color": "#C5C6F3",
-        "line-width": 1,
-        "line-opacity": 1
-    }
-})
+  // 单个
+//     mapClass.addBaseDataLayer({
+//     "id": "hydropBase",
+//     "key": "hydropBase",
+//     "urlType": "gisurl",
+//     "url": "https://211.99.26.225:18085/geoserver/gwc/service/tms/1.0.0/qgc%3AstationEra1117@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
+//     "geojson_url": "https://211.99.26.225:18085/geoserver/qgc/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=qgc:stationEra1117&maxFeatures=50&outputFormat=application/json&token=bearer a9a0f227-1df3-4e68-b380-2eca5bb49bd1",
+//     "url_3d": "https://211.99.26.225:18085/geoserver/qgc/wms",
+//     "_layer": "stationEra1117",
+//     "layers": "qgc:stationEra1117",
+//     "rasteropacity": 0.5,
+//     "visible": true,
+//     "minZoom": 0,
+//     "maxZoom": 20,
+//     "type": "vector",
+//     "layerType": "line",
+//     "paint": {
+//         "line-color": "#C5C6F3",
+//         "line-width": 1,
+//         "line-opacity": 1
+//     }
+// })
   // }, 2000);
 
   // 梯级流域图
diff --git a/frontend/src/components/gis/map.ol.ts b/frontend/src/components/gis/map.ol.ts
index 4dc6397..00c8e2c 100644
--- a/frontend/src/components/gis/map.ol.ts
+++ b/frontend/src/components/gis/map.ol.ts
@@ -439,7 +439,6 @@ export class MapOl implements MapInterface {
       if (layer.key === 'hydropBase') {
         // this.hydropBaseConfig = layer;
       }
-      console.log(this.geoJsonData1)
       // ✅ 1. 创建矢量源，关键是要配置投影转换
       const vectorSource = new VectorSource({
         features: new GeoJSON().readFeatures(this.geoJsonData1, {
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
index f456c8e..df28a5e 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
@@ -25,6 +25,7 @@
               placeholder="请选择流域"
               :disabled="isView"
               show-search
+              allowClear
               :filter-option="filterOption"
               @change="baseChange"
             >
@@ -47,6 +48,7 @@
               placeholder="请选择电站名称"
               :disabled="isView"
               show-search
+              allowClear
               :filter-option="filterOption"
               @change="engChange"
             >
@@ -72,6 +74,7 @@
               placeholder="请选择过鱼设施"
               :disabled="isView"
               show-search
+              allowClear
               :filter-option="filterOption"
             >
               <a-select-option
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue
index a79187c..b1a572d 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue
@@ -50,6 +50,11 @@
             批量审批
           </a-button>
         </a-tooltip>
+        <a-tooltip title="下载模板">
+          <a-button v-hasPerm="['sjtb:import-add']">
+            下载模板
+          </a-button>
+        </a-tooltip>
         <a-tooltip placement="leftBottom">
           <template #title>
             <div>1.</div>
@@ -184,7 +189,10 @@ const onSearchFinish = (values: any) => {
 const onValuesChange = (changedValues: any, allValues: any) => {
   searchData.value = { ...searchData.value, ...allValues };
   // 同步更新本地 searchData，以便其他逻辑使用
-  if (changedValues.rstcd || changedValues.baseId) {
+  if (
+    Object.keys(changedValues)[0] == "rstcd" ||
+    Object.keys(changedValues)[0] == "baseId"
+  ) {
     shuJuTianBaoStore.getFpssOption(
       allValues.baseId == "all" ? "" : allValues.baseId,
       allValues.rstcd
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoTable.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoTable.vue
index 6de9a0b..edb64fc 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoTable.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoTable.vue
@@ -4,8 +4,8 @@
     :loading="fileLoading"
     :data-source="fileTableData"
     :columns="modalColumns"
-    :scroll="{ y: '100%', x: '100%' }"
-    pagination="false"
+    :scroll="{ y: 500, x: '100%' }"
+    :pagination="false"
     :row-key="(record, index) => index"
   >
     <template #bodyCell="{ column, record, index }">
@@ -35,13 +35,13 @@
         "
       >
         <div style="color: red; display: flex; align-items: center">
-          <span>{{record[column.dataIndex] }}</span>
+          <span>{{ record[column.dataIndex] }}</span>
           <exclamation-circle-outlined style="margin-left: 4px" />
         </div>
       </template>
 
       <!-- 3. 编辑状态下的单元格 (绑定到 editingData) -->
-      <template v-else-if="isEditing(index)">
+      <template v-else-if="isEditing(index) && column.dataIndex != 'picpth' && column.dataIndex != 'vdpth'">
         <template v-if="column.dataIndex === 'baseName'">
           <a-select
             v-model:value="editingData.baseId"
@@ -196,17 +196,28 @@
             />
           </div>
         </template>
-
-        <!-- 其他默认文本输入 -->
-        <template v-else>
-          <a-input v-model:value="editingData[column.dataIndex]" size="small" />
-        </template>
       </template>
 
-      <!-- 4. 普通展示状态 (直接显示 record) -->
-      <!-- <template v-else>
-        {{ getDisplayValue(column.dataIndex, record) }}
-      </template> -->
+      <template
+        v-else-if="column.dataIndex === 'picpth'"
+      >
+        <div class="preview" v-for="(item, index) in record.picpthList">
+          <div class="text" :class="{'text_warning': record.picpthsWarnings.includes(item.name)}" @click="emit('preview-click', record, 'image' ,index)">
+            {{ item.name }}
+          </div>
+        </div>
+        <div v-if="record.picpthList.length==0">暂无图片</div>
+      </template>
+      <template
+        v-else-if="column.dataIndex === 'vdpth'"
+      >
+        <div class="preview"  v-for="(item, index) in record.vdpthList">
+          <div class="text" :class="{'text_warning': record.vdpthsWarnings.includes(item.name)}" @click="emit('preview-click', record, 'vdpth' ,index)">
+            {{ item.name }}
+          </div>
+        </div>
+        <div v-if="record.vdpthList.length==0">暂无视频</div>
+      </template>
     </template>
   </a-table>
 </template>
@@ -217,7 +228,8 @@ import { message, Tag } from "ant-design-vue";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import fishSearch from "@/components/fishSearch/index.vue";
 import { getBaseDropdown, getEngInfoDropdown, getFpssDropdown } from "@/api/select";
-import dayjs from "dayjs";
+import { CloseCircleOutlined } from "@ant-design/icons-vue";
+import { es } from "element-plus/es/locale/index.mjs";
 
 const props: any = defineProps({
   fileTableData: { type: Array, default: () => [] },
@@ -225,7 +237,7 @@ const props: any = defineProps({
   direction: { type: Array, default: () => [] },
 });
 
-const emit = defineEmits(["update:fileTableData"]);
+const emit = defineEmits(["update:fileTableData", "preview-click"]);
 
 // --- 状态管理 ---
 const editingRowIndex = ref<number | null>(null);
@@ -236,9 +248,27 @@ const rowStates = reactive<Record<number, any>>({});
 const editingData = ref<any>(null);
 
 const modalColumns = ref([
-  { dataIndex: "baseName", key: "baseName", dataIndexKey: "baseId", title: "流域", width: 140 },
-  { dataIndex: "ennm", key: "ennm", dataIndexKey: "rstcd", title: "电站名称", width: 140 },
-  { dataIndex: "stnm", key: "stnm", dataIndexKey: "stcd", title: "过鱼设施名称", width: 150 },
+  {
+    dataIndex: "baseName",
+    key: "baseName",
+    dataIndexKey: "baseId",
+    title: "流域",
+    width: 140,
+  },
+  {
+    dataIndex: "ennm",
+    key: "ennm",
+    dataIndexKey: "rstcd",
+    title: "电站名称",
+    width: 140,
+  },
+  {
+    dataIndex: "stnm",
+    key: "stnm",
+    dataIndexKey: "stcd",
+    title: "过鱼设施名称",
+    width: 150,
+  },
   { dataIndex: "strdt", key: "strdt", title: "过鱼时间", width: 190 },
   { dataIndex: "ftpName", key: "ftpName", title: "鱼种类", width: 120 },
   {
@@ -258,17 +288,15 @@ const modalColumns = ref([
     key: "direction",
     title: "游向",
     width: 120,
-    customRender: ({ text }: any) => {
-      console.log(props.direction)
-      return props.direction.find((item: any) => item.itemCode === text)?.dictName || "-"
-    }
+    customRender: ({ text }: any) => props.direction.find((item: any) => item.itemCode === text)?.dictName || "-"
+    ,
   },
   { dataIndex: "fcnt", key: "fcnt", title: "过鱼数量(尾)", width: 120 },
   { dataIndex: "fsz", key: "fsz", title: "体长(cm)", width: 160 },
   { dataIndex: "fwet", key: "fwet", title: "平均体重(g)", width: 160 },
   { dataIndex: "wt", key: "wt", title: "水温(℃)", width: 80 },
-  { dataIndex: "picpth", key: "level5", title: "图片", width: 100 },
-  { dataIndex: "vdpth", key: "level6", title: "视频", width: 100 },
+  { dataIndex: "picpth", key: "picpth", title: "图片", width: 160 },
+  { dataIndex: "vdpth", key: "vdpth", title: "视频", width: 160 },
   {
     title: "操作",
     key: "action",
@@ -309,12 +337,14 @@ const ensureRowState = (index: number) => {
 // --- 级联逻辑 (操作 editingData) ---
 
 const handleBaseChange = async (baseId: string, index: number) => {
-  console.log(baseId)
+  console.log(baseId);
   editingData.value.baseName = baseOptions.value.find(
     (item: any) => item.baseid == baseId
   )?.basename;
   if (baseId && editingData.value._warnings) {
-    editingData.value._warnings = editingData.value._warnings.filter((w: string) => w !== 'baseName');
+    editingData.value._warnings = editingData.value._warnings.filter(
+      (w: string) => w !== "baseName"
+    );
   }
   const state = ensureRowState(index);
   // 清空后续字段
@@ -338,7 +368,9 @@ const handleBaseChange = async (baseId: string, index: number) => {
 const handleEngChange = async (rstcd: string, index: number) => {
   const state = ensureRowState(index);
   if (rstcd && editingData.value._warnings) {
-    editingData.value._warnings = editingData.value._warnings.filter((w: string) => w !== 'ennm');
+    editingData.value._warnings = editingData.value._warnings.filter(
+      (w: string) => w !== "ennm"
+    );
   }
   editingData.value.ennm = state.engOptions.find(
     (item: any) => item.stcd === rstcd
@@ -360,7 +392,9 @@ const handleEngChange = async (rstcd: string, index: number) => {
 const handleFpssChange = (stcd: string, index: number) => {
   const state = ensureRowState(index);
   if (stcd && editingData.value._warnings) {
-    editingData.value._warnings = editingData.value._warnings.filter((w: string) => w !== 'stnm');
+    editingData.value._warnings = editingData.value._warnings.filter(
+      (w: string) => w !== "stnm"
+    );
   }
   editingData.value.stnm = state.fpssOptions.find(
     (item: any) => item.stcd === stcd
@@ -483,22 +517,36 @@ const handleFtpChange = (val: any, opt: any) => {
   editingData.value.ftpName = opt.name;
 };
 
-// --- 辅助函数 ---
 
+// --- 辅助函数 ---
 const filterOption = (input: string, option: any) => {
   return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
 };
-
-// 统一获取显示值
-const getDisplayValue = (dataIndex: string, record: any) => {
-  const val = record[dataIndex];
-  if (val === undefined || val === null) return "-";
-  if (dataIndex === "isfs") return val === 1 ? "是" : "否";
-  if (dataIndex === "strdt") return val ? dayjs(val).format("YYYY-MM-DD HH:mm:ss") : "-";
-  return val;
-};
 defineExpose({
-  editingRowIndex, 
+  editingRowIndex,
   editingData,
 });
 </script>
+<style lang="scss" scoped>
+.preview {
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+  color: #1890ff;
+  &:hover {
+    color: #40a9ff;
+  }
+  display: flex;
+  justify-content: justify-between;
+  align-items: center;
+  .text {
+    width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .text_warning {
+    color: red;
+  }
+}
+</style>
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
index a82424a..6ea2f5e 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
@@ -20,7 +20,8 @@
       :list-url="getFishDraftPage"
       :search-params="{}"
       :enable-row-selection="true"
-      :get-checkbox-props="getCheckboxProps" 
+      :get-checkbox-props="getCheckboxProps"
+      :transform-data="customTransform"
       @selection-change="handleSelectionChange"
     >
       <!-- 使用 bodyCell 插槽自定义单元格渲染 -->
@@ -94,18 +95,17 @@
       cancel-text="取消导入"
       :width="1500"
       v-model:open="visible"
-      maskClosable="false"
+      :maskClosable="false"
       :confirm-loading="fileLoading"
     >
-    <div class="w-full h-[500px]">
       <GuoYuSheShiShuJuTianBaoTable
         ref="modalTableRef"
         :fileLoading="fileLoading"
         :fileTableData="fileTableData"
         :direction="direction"
-        @update:file-table-data="(val) => fileTableData = val"
+        @preview-click="handlePreviewClick"
+        @update:file-table-data="(val) => (fileTableData = val)"
       />
-      </div>
       <template #footer>
         <a-button key="back" @click="handleCustomCancel">取消导入</a-button>
         <a-button
@@ -120,7 +120,6 @@
     </a-modal>
 
     <!-- 新增/编辑 Modal (对应 React 的 EditModal) -->
-    <!-- 假设已创建对应的 Vue 组件 GuoYuSheShiShuJuTianBaoForm -->
     <EditModal
       v-model:visible="editModalVisible"
       :is-view="isView"
@@ -131,23 +130,104 @@
       @ok="handleEditSubmit"
     />
 
-    <!-- 视频预览 Modal -->
+    <!-- 媒体预览 Modal -->
     <a-modal
-      title="视频预览"
-      v-model:open="videoPreviewVisible"
+      v-model:open="mediaPreviewVisible"
+      :title="videoPreviewTitle"
       :footer="null"
-      width="800px"
-      @cancel="closeVideoPreview"
+      width="900px"
+      @cancel="closeMediaPreview"
     >
-      <video
-        v-if="currentVideoUrl"
-        controls
-        autoplay
-        style="width: 100%"
-        :src="currentVideoUrl"
-      >
-        您的浏览器不支持视频播放
-      </video>
+      <div class="flex h-[60vh] gap-4">
+        <!-- 左侧：混合列表 (图片+视频) -->
+        <div class="w-1/4 overflow-y-auto border-r pr-2 media-list-container">
+          <div
+            v-for="(item, index) in previewList"
+            :key="index"
+            class="mb-2 cursor-pointer list-item"
+            :class="{ select: index === currentMediaIndex }"
+            @click="currentMediaIndex = index"
+          >
+            <span class="file-name">{{ item.name }}</span>
+
+            <!-- 删除按钮 -->
+            <div class="list-item-delete" @click.stop="handleDeleteMedia(item, index)">
+              <CloseCircleOutlined />
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧：动态预览区域 -->
+        <div
+          class="w-3/4 flex flex-col items-center justify-center bg-gray-100 relative p-4"
+        >
+          <!-- 图片预览 -->
+          <a-image
+            v-if="
+              currentMediaItem &&
+              currentMediaItem.url != '' &&
+              currentMediaItem.type === 'image'
+            "
+            :src="currentMediaItem.url"
+            class="max-w-full max-h-full object-contain"
+            :preview="{ visible: false }"
+          />
+          <div
+            v-else-if="
+              currentMediaItem &&
+              currentMediaItem.url == '' &&
+              currentMediaItem.type === 'image'
+            "
+            class="text-gray-400"
+          >
+            暂无图片预览
+          </div>
+
+          <!-- 视频预览 -->
+          <video
+            v-else-if="
+              currentMediaItem &&
+              currentMediaItem.url != '' &&
+              currentMediaItem.type === 'video'
+            "
+            :src="currentMediaItem.url"
+            controls
+            autoplay
+            class="max-w-full max-h-[50vh]"
+          >
+            您的浏览器不支持视频播放
+          </video>
+          <div
+            v-else-if="
+              currentMediaItem &&
+              currentMediaItem.url == '' &&
+              currentMediaItem.type === 'video'
+            "
+            class="text-gray-400"
+          >
+            暂无视频预览
+          </div>
+
+          <!-- 底部切换控制 -->
+          <div class="absolute bottom-4 flex gap-4 z-10">
+            <a-button
+              shape="circle"
+              :icon="h(LeftOutlined)"
+              @click="prevMedia"
+              :disabled="currentMediaIndex === 0"
+            />
+            <span class="self-center text-gray-600 bg-white px-2 rounded shadow-sm">
+              {{ currentMediaIndex + 1 }} / {{ previewList.length }}
+            </span>
+            <a-button
+              shape="circle"
+              :icon="h(RightOutlined)"
+              @click="nextMedia"
+              :disabled="currentMediaIndex === previewList.length - 1"
+            />
+          </div>
+        </div>
+      </div>
     </a-modal>
   </div>
 </template>
@@ -155,10 +235,12 @@
 <script lang="ts" setup>
 import { ref, computed, onMounted, h, nextTick } from "vue";
 import { message, Modal } from "ant-design-vue"; // 假设使用 ant-design-vue
+import { LeftOutlined, RightOutlined, CloseCircleOutlined } from "@ant-design/icons-vue"; // 引入图标组件
 import BasicTable from "@/components/BasicTable/index.vue";
 import GuoYuSheShiShuJuTianBaoSearch from "./guoYuSheShiShuJuTianBaoSearch.vue";
 import GuoYuSheShiShuJuTianBaoTable from "./guoYuSheShiShuJuTianBaoTable.vue";
 import EditModal from "./guoYuSheShiShuJuTianBaoForm.vue";
+
 import {
   getFishDraftPage,
   addFishDraft,
@@ -172,12 +254,14 @@ import {
   checkImportStatus,
   batchSaveDraft,
   getLastImportResult,
-  markImportTaskSuccess
+  markImportTaskSuccess,
 } from "@/api/guoYuSheShiShuJuTianBao";
 import { Tag } from "ant-design-vue"; // 确保导入 Tag
 import { getDictItemsByCode } from "@/api/dict";
+import dayjs from "dayjs";
 // import { FileImageOutlined, VideoCameraOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
 
+  const baseUrl = import.meta.env.VITE_APP_PREVIEW_URL;
 // --- 类型定义 ---
 interface FormData {
   [key: string]: any;
@@ -238,14 +322,12 @@ const baseColumnsConfig: ColumnConfig[] = [
   { dataIndex: "fsz", key: "fsz", title: "体长(cm)", width: 110 },
   { dataIndex: "fwet", key: "fwet", title: "平均体重(g)", width: 110 },
   { dataIndex: "wt", key: "wt", title: "水温(℃)", width: 80 },
-  { dataIndex: "picpth", key: "level5", title: "图片", width: 100 },
-  { dataIndex: "vdpth", key: "level6", title: "视频", width: 100 },
   { dataIndex: "tm", key: "tm", title: "填报时间", width: 150 },
   {
     dataIndex: "status",
     key: "status",
     title: "状态",
-    width: 100,
+    width: 74,
     customRender: ({ text }: any) => {
       let data = guoyuStatus.value.find((item: any) => item.itemCode === text);
       return h(
@@ -268,9 +350,19 @@ const isView = ref(false);
 const currentRecord = ref<FormData | null>(null);
 const submitLoading = ref(false);
 
-// 视频预览相关状态
-const videoPreviewVisible = ref(false);
-const currentVideoUrl = ref<string>("");
+const mediaPreviewVisible = ref(false);
+const videoPreviewTitle = ref("视频预览");
+interface MediaItem {
+  type: "image" | "video";
+  name: string;
+  url: string;
+}
+const previewList = ref<MediaItem[]>([]);
+const currentMediaIndex = ref(0);
+const tablePreviewRecord = ref<any>({});
+
+// 计算当前选中的项
+const currentMediaItem = computed(() => previewList.value[currentMediaIndex.value]);
 
 // 表格数据
 const fileTableData = ref<any[]>([]);
@@ -460,11 +552,14 @@ const handleReject = (id: any) => {
 };
 // 多选禁用
 const getCheckboxProps = (record: any) => {
-  console.log(record)
   return {
-    disabled: record.status === 'SUBMITTED' || record.status === 'APPROVED',
+    disabled:  ['SUBMITTED', 'APPROVED'].includes(record.status),
   };
 };
+const handleDataLoaded = (params: any, data: any) => {
+  console.log(params, data);
+  return 
+};
 // 多选
 const handleSelectionChange = (keys: any) => {
   batchData.value = keys;
@@ -506,8 +601,10 @@ const isRowDataEqual = (oldRow: any, newRow: any, fields: string[]): boolean =>
     let newVal = newRow?.[field];
 
     // 特殊处理：如果都是空值，视为相等
-    if ((oldVal === undefined || oldVal === null || oldVal === '') && 
-        (newVal === undefined || newVal === null || newVal === '')) {
+    if (
+      (oldVal === undefined || oldVal === null || oldVal === "") &&
+      (newVal === undefined || newVal === null || newVal === "")
+    ) {
       continue;
     }
 
@@ -535,9 +632,9 @@ const checkTableDataChanges = () => {
   for (let i = 0; i < newData.length; i++) {
     const oldRow = oldData[i];
     const newRow = newData[i];
-    
+
     // 如果某一行数据不一致，计数+1
-    if (!isRowDataEqual(oldRow, newRow, ['baseId'])) {
+    if (!isRowDataEqual(oldRow, newRow, ["baseId"])) {
       changedCount++;
     }
   }
@@ -547,30 +644,46 @@ const checkTableDataChanges = () => {
 
 // 提交导入
 const handleModalOk = () => {
-  console.log(orgFileTableData.value)
-  console.log(fileTableData.value)
-  console.log(modalTableRef.value.editingData)
+  console.log(orgFileTableData.value);
+  console.log(fileTableData.value);
+  console.log(modalTableRef.value.editingData);
   if (modalTableRef.value.editingData != undefined) {
     message.warning("请点击保存后提交数据！");
-    return
-  }
-  const { hasChanged, changedCount } = checkTableDataChanges();
-
-  // 3. 如果没有变化，直接返回，不执行后续操作
-  if (!hasChanged) {
-    message.info("数据未发生任何变化，无需提交");
     return;
   }
-  console.log(123)
+  for (let i = 0; i < fileTableData.value.length; i++) {
+    // if (fileTableData.value[i]._warnings?.length > 0) {
+    //   message.warning("请检查数据，标红部分数据有误！");
+    //   return;
+    // }
+    if (fileTableData.value[i].picpthsWarnings?.length > 0) {
+      message.warning("请检查图片，图片路径有误！");
+      return;
+    }
+    if (fileTableData.value[i].vdpthsWarnings?.length > 0) {
+      message.warning("请检查视频，视频路径有误！");
+      return;
+    }
+  }
+  fileTableData.value.forEach((item) => {
+    item.tm = dayjs().format("YYYY-MM-DD HH:mm:ss");
+  });
+  // const { hasChanged, changedCount } = checkTableDataChanges();
+
+  // // 3. 如果没有变化，直接返回，不执行后续操作
+  // if (!hasChanged) {
+  //   message.info("数据未发生任何变化，无需提交");
+  //   return;
+  // }
   Modal.confirm({
     title: "是否提交导入数据?",
     onOk: async () => {
       let res: any = await batchSaveDraft(fileTableData.value);
       if (res && res?.code == 0) {
         message.success("导入成功");
-        visible.value = false;
         tableRef.value?.getList();
-       await markImportTaskSuccess({id: taskId.value});
+        visible.value = false;
+        await markImportTaskSuccess({ id: taskId.value });
       } else {
         message.error("导入失败,请检查数据是否正确");
       }
@@ -586,7 +699,7 @@ const handleCustomCancel = () => {
     okText: "确定",
     onOk: async () => {
       // 可选：调用取消接口
-      let res: any = await cancelImportTask({taskId: taskId.value});
+      let res: any = await cancelImportTask({ taskId: taskId.value });
       if (res && res?.code == 0) {
         message.success("取消成功");
         tableRef.value?.getList();
@@ -600,7 +713,7 @@ const importBtn = async () => {
   let res: any = await checkImportStatus();
   taskId.value = "";
   if (res?.code == 0) {
-    const { hasImportingTask, currentTask} = res?.data || {};
+    const { hasImportingTask, currentTask } = res?.data || {};
     if (currentTask) {
       taskId.value = currentTask.id;
     }
@@ -626,26 +739,28 @@ const importBtn = async () => {
   }
 };
 // 上传文件
-const fileChange = async (file: File) => {
+const fileChange = (file: File) => {
   try {
-    visible.value = true;
-    fileLoading.value = true;
-    const formData = new FormData();
-    formData.append("file", file);
-    let res: any = await importFishZip(formData);
-    const { code } = res.data || {};
-    if (code == 1) {
-      message.error("导入失败");
-    } else {
-      taskId.value = res.data.taskId;
-      message.success("导入成功");
-      fileTableaAnalysis(res, "file");
-    }
+    nextTick(async () => {
+      visible.value = true;
+      fileLoading.value = true;
+      fileTableData.value = [];
+      const formData = new FormData();
+      formData.append("file", file);
+      let res: any = await importFishZip(formData);
+      const { code } = res.data || {};
+      if (code == 1) {
+        message.error("导入失败");
+      } else {
+        taskId.value = res.data.taskId;
+        message.success("导入成功");
+        fileTableaAnalysis(res, "file");
+      }
+    });
   } catch (error) {
   } finally {
     fileLoading.value = false;
   }
-
 };
 // 获取文件列表
 const handleFileSelect = (e: Event) => {
@@ -689,10 +804,13 @@ const fileTableaAnalysis = (res: any, type: string) => {
   } else {
     list = res.data.result.failedRowDetails;
   }
-  console.log(list);
   list.forEach((item) => {
     data.push({
       ...item.data,
+      vdpthList: item.vdpthList,
+      vdpthsWarnings: item.vdpthsWarnings,
+      picpthList: item.picpthList,
+      picpthsWarnings: item.picpthsWarnings,
       _warnings: item.warnings,
     });
   });
@@ -703,6 +821,20 @@ const fileTableaAnalysis = (res: any, type: string) => {
 const handleReset = (values) => {
   handleSearchFinish(values);
 };
+// 自定义数据转换函数
+const customTransform = (res: any) => {
+  const rawRecords = res?.data?.records || [];
+  const modifiedRecords = rawRecords.map((item: any) => {
+    return {
+      ...item,
+      picpthList: item.picpth ? item.picpth.split(",").map((item: string) => baseUrl + "/?" + item) || [] : [],
+    };
+  });
+  return {
+    records: modifiedRecords,
+    total: res?.data?.total || 0,
+  };
+};
 // 搜索-按钮
 const handleSearchFinish = (values: any) => {
   const filters = [
@@ -762,10 +894,100 @@ const handleSearchFinish = (values: any) => {
   };
   tableRef.value?.getList(filter);
 };
+// 处理预览点击 (由子组件触发)
+const handlePreviewClick = (record: any, type: string, index: number) => {
+  const mixedList: MediaItem[] = [];
+  tablePreviewRecord.value = record;
+  if (type === "image") {
+    videoPreviewTitle.value = "图片预览";
+    const nameList = record.picpthList;
+    nameList.forEach((item: any) => {
+      mixedList.push({
+        type: "image",
+        name: item.name,
+        url: item.value ? `${baseUrl}/?${item.value}` : "",
+      });
+    });
+  } else {
+    videoPreviewTitle.value = "视频预览";
+    const nameList = record.vdpthList;
+    nameList.forEach((item: any) => {
+      mixedList.push({
+        type: "video",
+        name: item.name, // 视频通常没有单独的名称字段，可根据需要调整
+        url: item.value ? `${baseUrl}/?${item.value}` : "",
+      });
+    });
+  }
 
-const closeVideoPreview = () => {
-  videoPreviewVisible.value = false;
-  currentVideoUrl.value = "";
+  mediaPreviewVisible.value = true;
+  currentMediaIndex.value = index;
+  nextTick(() => {
+    previewList.value = mixedList;
+  });
+};
+
+// 【新增】统一切换逻辑
+const prevMedia = () => {
+  if (currentMediaIndex.value > 0) {
+    currentMediaIndex.value--;
+  }
+};
+
+const nextMedia = () => {
+  if (currentMediaIndex.value < previewList.value.length - 1) {
+    currentMediaIndex.value++;
+  }
+};
+
+// 【新增】统一删除逻辑
+const handleDeleteMedia = (item: any, index: number) => {
+  Modal.confirm({
+    title: "确认删除",
+    content: "确定要从预览列表中移除该项吗？",
+    onOk: () => {
+      previewList.value.splice(index, 1);
+      console.log(previewList.value);
+      if (videoPreviewTitle.value == "图片预览") {
+        if (previewList.value.length == 0) {
+          tablePreviewRecord.value.picpthList = [];
+          tablePreviewRecord.value.picpthsWarnings = [];
+        } else {
+          tablePreviewRecord.value.picpthList.splice(index, 1);
+          tablePreviewRecord.value.picpthsWarnings = tablePreviewRecord.value.picpthsWarnings.filter(
+            (warningName: any) => warningName !== item.name
+          );
+        }
+      } else {
+        if (previewList.value.length == 0) {
+          tablePreviewRecord.value.vdpthList = [];
+          tablePreviewRecord.value.vdpthsWarnings = [];
+        } else {
+          tablePreviewRecord.value.vdpthList.splice(index, 1);
+          tablePreviewRecord.value.vdpthsWarnings = tablePreviewRecord.value.vdpthsWarnings.filter(
+            (warningName: any) => warningName !== item.name
+          );
+        }
+      }
+
+      if (previewList.value.length === 0) {
+        mediaPreviewVisible.value = false;
+      } else {
+        // 调整索引
+        if (index <= currentMediaIndex.value) {
+          currentMediaIndex.value = Math.max(0, currentMediaIndex.value - 1);
+        }
+      }
+    },
+  });
+};
+
+const closeMediaPreview = () => {
+  mediaPreviewVisible.value = false;
+  nextTick(() => {
+    previewList.value = [];
+    currentMediaIndex.value = 0;
+  });
 };
 
 // --- 生命周期 ---
@@ -786,4 +1008,53 @@ onMounted(() => {
   background-color: #ffffff;
   padding: 20px;
 }
+.media-list-container {
+  background-color: rgb(234, 241, 251);
+  padding: 10px;
+
+  .list-item {
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.5);
+    }
+    .file-name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 13px;
+    }
+
+    &.select {
+      color: #ffffff;
+      background-color: rgb(37, 93, 138);
+    }
+
+    .list-item-delete {
+      color: red;
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 0.3s;
+      margin-left: 8px;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+
+    &:hover .list-item-delete {
+      opacity: 1;
+    }
+  }
+}
 </style>