feat(paramConfiguration):反应分离，G1，G3分解，24平带过滤器参数配置页

ui/src/router/index.js

@@ -187,6 +187,28 @@ export const constantRoutes = [
     component: () => import('@/views/controlPage/flowSelect/G3Decomposition/index'),
     name: 'G3Decomposition_Control',//G3分解控制页面
   },
+  // Na2SO4参数配置页面
+  {
+    path: '/controlPage/paramConfiguration/reaction',
+    component: () => import('@/views/controlPage/paramConfiguration/reaction/index'),
+    name: 'Reaction_Param',//反应参数配置页面
+  },
+  {
+    path: '/controlPage/paramConfiguration/flatBeltFiltration',
+    component: () => import('@/views/controlPage/paramConfiguration/flatBeltFiltration/index'),
+    name: 'FlatBeltFiltration_Param',//24平带式过滤参数配置页面
+  },
+  {
+    path: '/controlPage/paramConfiguration/G1Decomposition',
+    component: () => import('@/views/controlPage/paramConfiguration/G1Decomposition/index'),
+    name: 'G1Decomposition_Param',//G1分解参数配置页面
+  },
+  {
+    path: '/controlPage/paramConfiguration/G3Decomposition',
+    component: () => import('@/views/controlPage/paramConfiguration/G3Decomposition/index'),
+    name: 'G3Decomposition_Param',//G3分解参数配置页面
+  },
+
   //上海组态页面
   {
     path: '/m1sj',//水解：m1Hydrolyze
@@ -210,88 +232,88 @@ export const constantRoutes = [
   },
   //湖南组态页面
   {
-    path:'/CaSO4_1',//硫酸钙
+    path: '/CaSO4_1',//硫酸钙
     component: () => import('@/views/hnyzConfiguratePage/CaSO4_1/index'),
     name: 'CaSO4_1',
   },
   {
-    path:'/CaSO4_2',//硫酸钙
+    path: '/CaSO4_2',//硫酸钙
     component: () => import('@/views/hnyzConfiguratePage/CaSO4_2/index'),
     name: 'CaSO4_2',
   },
   {
-    path:'/CaSO4_3',//硫酸钙
+    path: '/CaSO4_3',//硫酸钙
     component: () => import('@/views/hnyzConfiguratePage/CaSO4_3/index'),
     name: 'CaSO4_3',
   },
   {
-    path:'/CaSO4_4',//硫酸钙
+    path: '/CaSO4_4',//硫酸钙
     component: () => import('@/views/hnyzConfiguratePage/CaSO4_4/index'),
     name: 'CaSO4_4',
   },
   {
-    path:'/SeparationTower/SingleGroup',//分离塔单组
+    path: '/SeparationTower/SingleGroup',//分离塔单组
     component: () => import('@/views/hnyzConfiguratePage/SeparationTower_SingleGroup/index'),
     name: 'SingleGroup',
   },
   {
-    path:'/HeatExchange',//换热
+    path: '/HeatExchange',//换热
     component: () => import('@/views/hnyzConfiguratePage/HeatExchange/index'),
     name: 'HeatExchange',
   },
   {
-    path:'/IronAlloy',//铁合金
+    path: '/IronAlloy',//铁合金
     component: () => import('@/views/hnyzConfiguratePage/IronAlloy/index'),
     name: 'IronAlloy',
   },
   {
-    path:'/mgm',//烛式过滤器模拟器
+    path: '/mgm',//烛式过滤器模拟器
     component: () => import('@/views/hnyzConfiguratePage/MGM/index'),
     name: 'MGM',
   },
   //湖南硫酸钠组态页面
   {
-    path:'/configuratePage/Na2SO4_FY',//硫酸钠-反应
+    path: '/configuratePage/Na2SO4_FY',//硫酸钠-反应
     component: () => import('@/views/hnyzConfiguratePage/Na2SO4_FY/index'),
     name: 'Na2SO4_FY',
   },
   {
-    path:'/configuratePage/Na2SO4_FYFL2',//硫酸钠-反应分离2
+    path: '/configuratePage/Na2SO4_FYFL2',//硫酸钠-反应分离2
     component: () => import('@/views/hnyzConfiguratePage/Na2SO4_FYFL2/index'),
     name: 'Na2SO4_FYFL2',
   },
   {
-    path:'/configuratePage/Na2SO4_GYFL',//硫酸钠-固液分离
+    path: '/configuratePage/Na2SO4_GYFL',//硫酸钠-固液分离
     component: () => import('@/views/hnyzConfiguratePage/Na2SO4_GYFL/index'),
     name: 'Na2SO4_GYFL',
   },
   {
-    path:'/configuratePage/Na2SO4_24PDSGL',//硫酸钠-24平带式过滤
+    path: '/configuratePage/Na2SO4_24PDSGL',//硫酸钠-24平带式过滤
     component: () => import('@/views/hnyzConfiguratePage/Na2SO4_24PDSGL/index'),
     name: 'Na2SO4_24PDSGL',
   },
   {
-    path:'/configuratePage/Na2SO4_G1FJ',//硫酸钠-G1分解
+    path: '/configuratePage/Na2SO4_G1FJ',//硫酸钠-G1分解
     component: () => import('@/views/hnyzConfiguratePage/Na2SO4_G1FJ/index'),
     name: 'Na2SO4_G1FJ',
   },
   {
-    path:'/configuratePage/Na2SO4_G1FJ2',//硫酸钠-G1附属分离
+    path: '/configuratePage/Na2SO4_G1FJ2',//硫酸钠-G1附属分离
     component: () => import('@/views/hnyzConfiguratePage/Na2SO4_G1FJ2/index'),
     name: 'Na2SO4_G1FJ2',
   },
   {
-    path:'/configuratePage/Na2SO4_RJ',//硫酸钠-溶晶
+    path: '/configuratePage/Na2SO4_RJ',//硫酸钠-溶晶
     component: () => import('@/views/hnyzConfiguratePage/Na2SO4_RJ/index'),
     name: 'Na2SO4_RJ',
   },
   {
-    path:'/configuratePage/Na2SO4_G3FJ',//硫酸钠-G3分解
+    path: '/configuratePage/Na2SO4_G3FJ',//硫酸钠-G3分解
     component: () => import('@/views/hnyzConfiguratePage/Na2SO4_G3FJ/index'),
     name: 'Na2SO4_G3FJ',
   },
   {
-    path:'/configuratePage/Na2SO4_G3FJ2',//硫酸钠-G3分解2
+    path: '/configuratePage/Na2SO4_G3FJ2',//硫酸钠-G3分解2
     component: () => import('@/views/hnyzConfiguratePage/Na2SO4_G3FJ2/index'),
     name: 'Na2SO4_G3FJ2',
   },

ui/src/views/controlPage/paramConfiguration/G1Decomposition/index.vue

@@ -0,0 +1,403 @@
+<template>
+    <div class="param_config_page">
+        <!-- 固定在顶部的头部区域 -->
+        <div class="fixed_header" ref="fixedHeader">
+            <HeaderComponent title="硫酸钠-参数配置" backTo="/controlPage/flowSelect" />
+            <PageNav :items="paramItems_Na2SO4" :currentCode="paramPageCode" />
+        </div>
+
+        <!-- 主内容区（包含设备导航） -->
+        <div class="main_container">
+            <div class="main_content">
+                <!-- 设备列表区域 -->
+                <div class="content_area">
+                    <!-- 加载状态 -->
+                    <div v-if="isLoading" class="loading">正在加载参数配置...</div>
+
+                    <!-- 错误状态 -->
+                    <div v-if="hasError" class="error">
+                        <p>加载配置失败: {{ errorMessage }}</p>
+                        <button @click="loadConfigData">重试</button>
+                    </div>
+
+                    <div v-else class="config_container">
+                        <!-- 按罐体分组 -->
+                        <div v-for="(equipments, tankName) in filteredDeviceConfigGroup" :key="tankName"
+                            class="tank_section" :id="`tank_${tankName}`">
+                            <h2 class="tank_title">{{ tankName }}</h2>
+                            <div class="params_grid">
+                                <!-- 显示参数加载状态 -->
+                                <div v-if="!isInitialParamsLoaded" class="loading">加载参数中...</div>
+
+                                <!-- 确保初始参数加载完成后再渲染组件 -->
+                                <ParamConfigComponent v-if="isInitialParamsLoaded" v-for="equipment in equipments"
+                                    :key="equipment.code" :title="equipment.title + '-' + equipment.equipmentName"
+                                    :code="equipment.code" :initial-params="getInitialParams(equipment.code)"
+                                    :id="`device_${equipment.code}`" />
+                            </div>
+                        </div>
+
+                        <!-- 无数据提示 -->
+                        <div v-if="isEmptyData" class="no_data">未获取到设备配置信息</div>
+                    </div>
+                </div>
+
+                <!-- 右侧罐体导航（使用导航组件） -->
+                <TankNavigation :tanks="tankNavList" :current-index="currentNavIndex" :header-height="headerHeight"
+                    @tankClick="scrollToTank" @scrollPositionChange="handleScrollPositionChange" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, watchEffect, onBeforeUnmount } from 'vue'
+import { useRoute } from 'vue-router'
+import HeaderComponent from '@/components/DCS/HeaderComponent.vue'
+import PageNav from '@/components/GeneralComponents/control/PageNavComponent.vue'
+import { getPageEquipmentGroupByTankByFlowCode } from '@/api/hnyz/equipment'
+import { paramItems_Na2SO4 } from '@/config'
+import ParamConfigComponent from '@/components/GeneralComponents/control/paramConfigComponent.vue'
+import TankNavigation from '@/components/GeneralComponents/control/TankNavigationComponent.vue'
+import { getAllParamConfigDataByCodeList } from '@/api/hnyz/param'
+const route = useRoute()
+
+// 状态变量
+const isLoading = ref(true)
+const hasError = ref(false)
+const errorMessage = ref('')
+const isEmptyData = ref(false)
+const flowCode = ref(route.name.replace(/_.+$/, '_Control'))
+const paramPageCode = ref(route.name)
+const fixedHeader = ref(null)
+const headerHeight = ref(0)
+
+// 新增：标记初始参数是否加载完成
+const isInitialParamsLoaded = ref(false)
+
+// 导航相关变量 - 只处理最外层罐体
+const tankNavList = ref([])  // 罐体导航列表数据
+const currentNavIndex = ref(-1)  // 当前激活的导航项索引
+
+// 设备配置和初始参数数据
+const deviceConfigGroup = ref({})
+const initialParamData = ref({})
+
+// 过滤后的设备配置（排除阀门）
+const filteredDeviceConfigGroup = computed(() => {
+    const filtered = {}
+    Object.entries(deviceConfigGroup.value).forEach(([tankName, equipments]) => {
+        const validEquipments = equipments.filter(equip =>
+            ![1, 5].includes(Number(equip.equipmentType))
+        )
+        if (validEquipments.length > 0) {
+            filtered[tankName] = validEquipments
+        }
+    })
+    isEmptyData.value = Object.keys(filtered).length === 0
+    return filtered
+})
+
+// 生成罐体导航列表（只包含最外层罐体，不包含子设备）
+const generateTankNavList = computed(() => {
+    const navList = []
+    // 直接遍历罐体名称，不处理子设备
+    Object.keys(filteredDeviceConfigGroup.value).forEach(tankName => {
+        // 生成简短名称用于导航显示
+        const shortName = tankName.length > 18
+            ? tankName.substring(0, 17) + '...'
+            : tankName
+
+        navList.push({
+            uniqueId: `tank_${tankName}`,  // 与罐体DOM元素ID对应
+            tankName,
+            shortName,
+            fullName: tankName
+        })
+    })
+    return navList
+})
+
+// 计算固定头部高度
+const calculateHeaderHeight = () => {
+    if (fixedHeader.value) {
+        headerHeight.value = fixedHeader.value.offsetHeight
+    }
+}
+
+// 处理滚动位置变化事件
+function handleScrollPositionChange(index) {
+    currentNavIndex.value = index
+}
+
+// 加载设备配置和初始参数
+async function loadConfigData() {
+    try {
+        isLoading.value = true
+        hasError.value = false
+        // 重置参数加载状态
+        isInitialParamsLoaded.value = false
+
+        // 1. 获取设备列表（按罐体分组）
+        const res = await getPageEquipmentGroupByTankByFlowCode(flowCode.value)
+        deviceConfigGroup.value = Object.fromEntries(
+            Object.entries(res.data || {}).filter(([_, equipments]) => equipments?.length > 0)
+        )
+        // 2. 加载初始参数值（若有设备）
+        if (Object.keys(filteredDeviceConfigGroup.value).length > 0) {
+            await loadInitialParamValues()
+        } else {
+            // 没有设备时也标记参数加载完成
+            isInitialParamsLoaded.value = true
+        }
+
+    } catch (err) {
+        hasError.value = true
+        errorMessage.value = err.message || '加载配置失败'
+        console.error('加载配置失败', err)
+        // 错误时也标记参数加载完成，避免一直显示加载状态
+        isInitialParamsLoaded.value = true
+    } finally {
+        isLoading.value = false
+    }
+}
+
+// 加载所有设备的初始参数值
+async function loadInitialParamValues() {
+    try {
+        const allCodes = []
+        Object.values(filteredDeviceConfigGroup.value).forEach(equipments => {
+            equipments.forEach(equip => allCodes.push(equip.code))
+        })
+        const res = await getAllParamConfigDataByCodeList(allCodes)
+        // console.log('加载初始参数结果', res)
+        initialParamData.value = res.data || {}
+    } catch (err) {
+        console.error('加载初始参数失败', err)
+        initialParamData.value = {}
+    } finally {
+        // 无论成功失败，都标记参数加载完成
+        isInitialParamsLoaded.value = true
+    }
+}
+
+// 获取设备的初始参数
+function getInitialParams(code) {
+    const paramCount = getParamCountByCode(code)
+    // console.log('获取初始参数', code, paramCount, initialParamData.value)
+    return initialParamData.value[code] || new Array(paramCount).fill(0)
+}
+
+// 辅助函数：根据设备code获取参数数量
+function getParamCountByCode(code) {
+    const type = getDeviceTypeByCode(code)
+    const paramCount = paramTemplates[type] || 0
+    return paramCount
+}
+
+// 辅助函数：根据设备code判断类型
+function getDeviceTypeByCode(code) {
+    const upperType = code.toUpperCase()
+    if (upperType.startsWith('PH')) return 'ph'
+    if (upperType.startsWith('PT')) return 'pressuregauge'
+    if (upperType.startsWith('TT')) return 'thermometer'
+    if (upperType.startsWith('FIT')) return 'flowmeter'
+    if (upperType.startsWith('P') || upperType.startsWith('M')) return 'pump'
+    if (upperType.startsWith('LT')) return 'levelmeter'
+    return 'unknown'
+}
+
+// 滚动到指定罐体（而非子设备）
+function scrollToTank(tank, index) {
+    currentNavIndex.value = index
+    const element = document.getElementById(`tank_${tank.tankName}`)
+    if (element) {
+        // 平滑滚动到罐体位置，考虑头部高度
+        window.scrollTo({
+            top: element.offsetTop - headerHeight.value - 20,
+            behavior: 'smooth'
+        })
+    }
+}
+
+// 参数模板定义（不同设备类型的参数数量）
+const paramTemplates = {
+    pump: 3,
+    flowmeter: 5,
+    thermometer: 2,
+    ph: 3,
+    levelmeter: 5,
+    pressuregauge: 3,
+    unknown: 0
+}
+
+// 初始化
+onMounted(() => {
+    // 计算头部高度
+    calculateHeaderHeight()
+    // 监听窗口大小变化，重新计算头部高度
+    window.addEventListener('resize', calculateHeaderHeight)
+    loadConfigData()
+
+    // 当罐体列表变化时更新导航
+    watchEffect(() => {
+        tankNavList.value = generateTankNavList.value
+        currentNavIndex.value = -1
+    })
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', calculateHeaderHeight)
+})
+</script>
+
+<style scoped>
+.param_config_page {
+    width: 100%;
+    min-height: 100vh;
+    padding: 0;
+    background-color: #252525;
+}
+
+/* 固定头部样式 */
+.fixed_header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background-color: #252525;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+/* 主容器样式（避免被固定头部遮挡） */
+.main_container {
+    padding: 140px 20px 24px;
+    box-sizing: border-box;
+}
+
+/* 主内容区布局 */
+.main_content {
+    display: flex;
+    gap: 20px;
+    max-width: 1700px;
+    margin: 0 auto;
+}
+
+.content_area {
+    flex: 1;
+    min-width: 1350px;
+}
+
+.config_container {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.tank_section {
+    margin-bottom: 30px;
+    background: #1a1a1a;
+    border-radius: 8px;
+    padding: 20px;
+    border: 1px solid #72E0FF;
+    scroll-margin-top: 160px;
+    /* 滚动定位预留空间 */
+}
+
+.tank_title {
+    margin: 0 0 20px 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    font-size: 18px;
+    color: #76E1FF;
+}
+
+.params_grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 20px;
+}
+
+/* 状态提示样式 */
+.loading,
+.error,
+.no_data {
+    width: 100%;
+    margin: 20px auto;
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+    background-color: rgba(255, 255, 255, 0.1);
+    color: #fff;
+}
+
+.loading {
+    color: #1890ff;
+}
+
+.error {
+    color: #f5222d;
+}
+
+.error button {
+    padding: 8px 16px;
+    background: #f5222d;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.error button:hover {
+    background: #d91111;
+}
+
+/* 响应式调整 */
+@media (max-width: 1400px) {
+    .params_grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
+    }
+}
+
+@media (max-width: 1200px) {
+    .main_container {
+        padding: 140px 15px 16px;
+    }
+
+    .main_content {
+        max-width: 100%;
+    }
+
+    .content_area {
+        min-width: auto;
+    }
+}
+
+@media (max-width: 992px) {
+    .main_content {
+        flex-direction: column;
+    }
+
+    .params_grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+
+    .main_container {
+        padding: 120px 15px 16px;
+    }
+}
+
+@media (max-width: 768px) {
+    .tank_section {
+        padding: 15px;
+        margin-bottom: 20px;
+    }
+
+    .params_grid {
+        gap: 14px;
+    }
+}
+</style>

ui/src/views/controlPage/paramConfiguration/G3Decomposition/index.vue

@@ -0,0 +1,403 @@
+<template>
+    <div class="param_config_page">
+        <!-- 固定在顶部的头部区域 -->
+        <div class="fixed_header" ref="fixedHeader">
+            <HeaderComponent title="硫酸钠-参数配置" backTo="/controlPage/flowSelect" />
+            <PageNav :items="paramItems_Na2SO4" :currentCode="paramPageCode" />
+        </div>
+
+        <!-- 主内容区（包含设备导航） -->
+        <div class="main_container">
+            <div class="main_content">
+                <!-- 设备列表区域 -->
+                <div class="content_area">
+                    <!-- 加载状态 -->
+                    <div v-if="isLoading" class="loading">正在加载参数配置...</div>
+
+                    <!-- 错误状态 -->
+                    <div v-if="hasError" class="error">
+                        <p>加载配置失败: {{ errorMessage }}</p>
+                        <button @click="loadConfigData">重试</button>
+                    </div>
+
+                    <div v-else class="config_container">
+                        <!-- 按罐体分组 -->
+                        <div v-for="(equipments, tankName) in filteredDeviceConfigGroup" :key="tankName"
+                            class="tank_section" :id="`tank_${tankName}`">
+                            <h2 class="tank_title">{{ tankName }}</h2>
+                            <div class="params_grid">
+                                <!-- 显示参数加载状态 -->
+                                <div v-if="!isInitialParamsLoaded" class="loading">加载参数中...</div>
+
+                                <!-- 确保初始参数加载完成后再渲染组件 -->
+                                <ParamConfigComponent v-if="isInitialParamsLoaded" v-for="equipment in equipments"
+                                    :key="equipment.code" :title="equipment.title + '-' + equipment.equipmentName"
+                                    :code="equipment.code" :initial-params="getInitialParams(equipment.code)"
+                                    :id="`device_${equipment.code}`" />
+                            </div>
+                        </div>
+
+                        <!-- 无数据提示 -->
+                        <div v-if="isEmptyData" class="no_data">未获取到设备配置信息</div>
+                    </div>
+                </div>
+
+                <!-- 右侧罐体导航（使用导航组件） -->
+                <TankNavigation :tanks="tankNavList" :current-index="currentNavIndex" :header-height="headerHeight"
+                    @tankClick="scrollToTank" @scrollPositionChange="handleScrollPositionChange" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, watchEffect, onBeforeUnmount } from 'vue'
+import { useRoute } from 'vue-router'
+import HeaderComponent from '@/components/DCS/HeaderComponent.vue'
+import PageNav from '@/components/GeneralComponents/control/PageNavComponent.vue'
+import { getPageEquipmentGroupByTankByFlowCode } from '@/api/hnyz/equipment'
+import { paramItems_Na2SO4 } from '@/config'
+import ParamConfigComponent from '@/components/GeneralComponents/control/paramConfigComponent.vue'
+import TankNavigation from '@/components/GeneralComponents/control/TankNavigationComponent.vue'
+import { getAllParamConfigDataByCodeList } from '@/api/hnyz/param'
+const route = useRoute()
+
+// 状态变量
+const isLoading = ref(true)
+const hasError = ref(false)
+const errorMessage = ref('')
+const isEmptyData = ref(false)
+const flowCode = ref(route.name.replace(/_.+$/, '_Control'))
+const paramPageCode = ref(route.name)
+const fixedHeader = ref(null)
+const headerHeight = ref(0)
+
+// 新增：标记初始参数是否加载完成
+const isInitialParamsLoaded = ref(false)
+
+// 导航相关变量 - 只处理最外层罐体
+const tankNavList = ref([])  // 罐体导航列表数据
+const currentNavIndex = ref(-1)  // 当前激活的导航项索引
+
+// 设备配置和初始参数数据
+const deviceConfigGroup = ref({})
+const initialParamData = ref({})
+
+// 过滤后的设备配置（排除阀门）
+const filteredDeviceConfigGroup = computed(() => {
+    const filtered = {}
+    Object.entries(deviceConfigGroup.value).forEach(([tankName, equipments]) => {
+        const validEquipments = equipments.filter(equip =>
+            ![1, 5].includes(Number(equip.equipmentType))
+        )
+        if (validEquipments.length > 0) {
+            filtered[tankName] = validEquipments
+        }
+    })
+    isEmptyData.value = Object.keys(filtered).length === 0
+    return filtered
+})
+
+// 生成罐体导航列表（只包含最外层罐体，不包含子设备）
+const generateTankNavList = computed(() => {
+    const navList = []
+    // 直接遍历罐体名称，不处理子设备
+    Object.keys(filteredDeviceConfigGroup.value).forEach(tankName => {
+        // 生成简短名称用于导航显示
+        const shortName = tankName.length > 18
+            ? tankName.substring(0, 17) + '...'
+            : tankName
+
+        navList.push({
+            uniqueId: `tank_${tankName}`,  // 与罐体DOM元素ID对应
+            tankName,
+            shortName,
+            fullName: tankName
+        })
+    })
+    return navList
+})
+
+// 计算固定头部高度
+const calculateHeaderHeight = () => {
+    if (fixedHeader.value) {
+        headerHeight.value = fixedHeader.value.offsetHeight
+    }
+}
+
+// 处理滚动位置变化事件
+function handleScrollPositionChange(index) {
+    currentNavIndex.value = index
+}
+
+// 加载设备配置和初始参数
+async function loadConfigData() {
+    try {
+        isLoading.value = true
+        hasError.value = false
+        // 重置参数加载状态
+        isInitialParamsLoaded.value = false
+
+        // 1. 获取设备列表（按罐体分组）
+        const res = await getPageEquipmentGroupByTankByFlowCode(flowCode.value)
+        deviceConfigGroup.value = Object.fromEntries(
+            Object.entries(res.data || {}).filter(([_, equipments]) => equipments?.length > 0)
+        )
+        // 2. 加载初始参数值（若有设备）
+        if (Object.keys(filteredDeviceConfigGroup.value).length > 0) {
+            await loadInitialParamValues()
+        } else {
+            // 没有设备时也标记参数加载完成
+            isInitialParamsLoaded.value = true
+        }
+
+    } catch (err) {
+        hasError.value = true
+        errorMessage.value = err.message || '加载配置失败'
+        console.error('加载配置失败', err)
+        // 错误时也标记参数加载完成，避免一直显示加载状态
+        isInitialParamsLoaded.value = true
+    } finally {
+        isLoading.value = false
+    }
+}
+
+// 加载所有设备的初始参数值
+async function loadInitialParamValues() {
+    try {
+        const allCodes = []
+        Object.values(filteredDeviceConfigGroup.value).forEach(equipments => {
+            equipments.forEach(equip => allCodes.push(equip.code))
+        })
+        const res = await getAllParamConfigDataByCodeList(allCodes)
+        // console.log('加载初始参数结果', res)
+        initialParamData.value = res.data || {}
+    } catch (err) {
+        console.error('加载初始参数失败', err)
+        initialParamData.value = {}
+    } finally {
+        // 无论成功失败，都标记参数加载完成
+        isInitialParamsLoaded.value = true
+    }
+}
+
+// 获取设备的初始参数
+function getInitialParams(code) {
+    const paramCount = getParamCountByCode(code)
+    // console.log('获取初始参数', code, paramCount, initialParamData.value)
+    return initialParamData.value[code] || new Array(paramCount).fill(0)
+}
+
+// 辅助函数：根据设备code获取参数数量
+function getParamCountByCode(code) {
+    const type = getDeviceTypeByCode(code)
+    const paramCount = paramTemplates[type] || 0
+    return paramCount
+}
+
+// 辅助函数：根据设备code判断类型
+function getDeviceTypeByCode(code) {
+    const upperType = code.toUpperCase()
+    if (upperType.startsWith('PH')) return 'ph'
+    if (upperType.startsWith('PT')) return 'pressuregauge'
+    if (upperType.startsWith('TT')) return 'thermometer'
+    if (upperType.startsWith('FIT')) return 'flowmeter'
+    if (upperType.startsWith('P') || upperType.startsWith('M')) return 'pump'
+    if (upperType.startsWith('LT')) return 'levelmeter'
+    return 'unknown'
+}
+
+// 滚动到指定罐体（而非子设备）
+function scrollToTank(tank, index) {
+    currentNavIndex.value = index
+    const element = document.getElementById(`tank_${tank.tankName}`)
+    if (element) {
+        // 平滑滚动到罐体位置，考虑头部高度
+        window.scrollTo({
+            top: element.offsetTop - headerHeight.value - 20,
+            behavior: 'smooth'
+        })
+    }
+}
+
+// 参数模板定义（不同设备类型的参数数量）
+const paramTemplates = {
+    pump: 3,
+    flowmeter: 5,
+    thermometer: 2,
+    ph: 3,
+    levelmeter: 5,
+    pressuregauge: 3,
+    unknown: 0
+}
+
+// 初始化
+onMounted(() => {
+    // 计算头部高度
+    calculateHeaderHeight()
+    // 监听窗口大小变化，重新计算头部高度
+    window.addEventListener('resize', calculateHeaderHeight)
+    loadConfigData()
+
+    // 当罐体列表变化时更新导航
+    watchEffect(() => {
+        tankNavList.value = generateTankNavList.value
+        currentNavIndex.value = -1
+    })
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', calculateHeaderHeight)
+})
+</script>
+
+<style scoped>
+.param_config_page {
+    width: 100%;
+    min-height: 100vh;
+    padding: 0;
+    background-color: #252525;
+}
+
+/* 固定头部样式 */
+.fixed_header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background-color: #252525;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+/* 主容器样式（避免被固定头部遮挡） */
+.main_container {
+    padding: 140px 20px 24px;
+    box-sizing: border-box;
+}
+
+/* 主内容区布局 */
+.main_content {
+    display: flex;
+    gap: 20px;
+    max-width: 1700px;
+    margin: 0 auto;
+}
+
+.content_area {
+    flex: 1;
+    min-width: 1350px;
+}
+
+.config_container {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.tank_section {
+    margin-bottom: 30px;
+    background: #1a1a1a;
+    border-radius: 8px;
+    padding: 20px;
+    border: 1px solid #72E0FF;
+    scroll-margin-top: 160px;
+    /* 滚动定位预留空间 */
+}
+
+.tank_title {
+    margin: 0 0 20px 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    font-size: 18px;
+    color: #76E1FF;
+}
+
+.params_grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 20px;
+}
+
+/* 状态提示样式 */
+.loading,
+.error,
+.no_data {
+    width: 100%;
+    margin: 20px auto;
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+    background-color: rgba(255, 255, 255, 0.1);
+    color: #fff;
+}
+
+.loading {
+    color: #1890ff;
+}
+
+.error {
+    color: #f5222d;
+}
+
+.error button {
+    padding: 8px 16px;
+    background: #f5222d;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.error button:hover {
+    background: #d91111;
+}
+
+/* 响应式调整 */
+@media (max-width: 1400px) {
+    .params_grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
+    }
+}
+
+@media (max-width: 1200px) {
+    .main_container {
+        padding: 140px 15px 16px;
+    }
+
+    .main_content {
+        max-width: 100%;
+    }
+
+    .content_area {
+        min-width: auto;
+    }
+}
+
+@media (max-width: 992px) {
+    .main_content {
+        flex-direction: column;
+    }
+
+    .params_grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+
+    .main_container {
+        padding: 120px 15px 16px;
+    }
+}
+
+@media (max-width: 768px) {
+    .tank_section {
+        padding: 15px;
+        margin-bottom: 20px;
+    }
+
+    .params_grid {
+        gap: 14px;
+    }
+}
+</style>

ui/src/views/controlPage/paramConfiguration/flatBeltFiltration/index.vue

@@ -0,0 +1,403 @@
+<template>
+    <div class="param_config_page">
+        <!-- 固定在顶部的头部区域 -->
+        <div class="fixed_header" ref="fixedHeader">
+            <HeaderComponent title="硫酸钠-参数配置" backTo="/controlPage/flowSelect" />
+            <PageNav :items="paramItems_Na2SO4" :currentCode="paramPageCode" />
+        </div>
+
+        <!-- 主内容区（包含设备导航） -->
+        <div class="main_container">
+            <div class="main_content">
+                <!-- 设备列表区域 -->
+                <div class="content_area">
+                    <!-- 加载状态 -->
+                    <div v-if="isLoading" class="loading">正在加载参数配置...</div>
+
+                    <!-- 错误状态 -->
+                    <div v-if="hasError" class="error">
+                        <p>加载配置失败: {{ errorMessage }}</p>
+                        <button @click="loadConfigData">重试</button>
+                    </div>
+
+                    <div v-else class="config_container">
+                        <!-- 按罐体分组 -->
+                        <div v-for="(equipments, tankName) in filteredDeviceConfigGroup" :key="tankName"
+                            class="tank_section" :id="`tank_${tankName}`">
+                            <h2 class="tank_title">{{ tankName }}</h2>
+                            <div class="params_grid">
+                                <!-- 显示参数加载状态 -->
+                                <div v-if="!isInitialParamsLoaded" class="loading">加载参数中...</div>
+
+                                <!-- 确保初始参数加载完成后再渲染组件 -->
+                                <ParamConfigComponent v-if="isInitialParamsLoaded" v-for="equipment in equipments"
+                                    :key="equipment.code" :title="equipment.title + '-' + equipment.equipmentName"
+                                    :code="equipment.code" :initial-params="getInitialParams(equipment.code)"
+                                    :id="`device_${equipment.code}`" />
+                            </div>
+                        </div>
+
+                        <!-- 无数据提示 -->
+                        <div v-if="isEmptyData" class="no_data">未获取到设备配置信息</div>
+                    </div>
+                </div>
+
+                <!-- 右侧罐体导航（使用导航组件） -->
+                <TankNavigation :tanks="tankNavList" :current-index="currentNavIndex" :header-height="headerHeight"
+                    @tankClick="scrollToTank" @scrollPositionChange="handleScrollPositionChange" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, watchEffect, onBeforeUnmount } from 'vue'
+import { useRoute } from 'vue-router'
+import HeaderComponent from '@/components/DCS/HeaderComponent.vue'
+import PageNav from '@/components/GeneralComponents/control/PageNavComponent.vue'
+import { getPageEquipmentGroupByTankByFlowCode } from '@/api/hnyz/equipment'
+import { paramItems_Na2SO4 } from '@/config'
+import ParamConfigComponent from '@/components/GeneralComponents/control/paramConfigComponent.vue'
+import TankNavigation from '@/components/GeneralComponents/control/TankNavigationComponent.vue'
+import { getAllParamConfigDataByCodeList } from '@/api/hnyz/param'
+const route = useRoute()
+
+// 状态变量
+const isLoading = ref(true)
+const hasError = ref(false)
+const errorMessage = ref('')
+const isEmptyData = ref(false)
+const flowCode = ref(route.name.replace(/_.+$/, '_Control'))
+const paramPageCode = ref(route.name)
+const fixedHeader = ref(null)
+const headerHeight = ref(0)
+
+// 新增：标记初始参数是否加载完成
+const isInitialParamsLoaded = ref(false)
+
+// 导航相关变量 - 只处理最外层罐体
+const tankNavList = ref([])  // 罐体导航列表数据
+const currentNavIndex = ref(-1)  // 当前激活的导航项索引
+
+// 设备配置和初始参数数据
+const deviceConfigGroup = ref({})
+const initialParamData = ref({})
+
+// 过滤后的设备配置（排除阀门）
+const filteredDeviceConfigGroup = computed(() => {
+    const filtered = {}
+    Object.entries(deviceConfigGroup.value).forEach(([tankName, equipments]) => {
+        const validEquipments = equipments.filter(equip =>
+            ![1, 5].includes(Number(equip.equipmentType))
+        )
+        if (validEquipments.length > 0) {
+            filtered[tankName] = validEquipments
+        }
+    })
+    isEmptyData.value = Object.keys(filtered).length === 0
+    return filtered
+})
+
+// 生成罐体导航列表（只包含最外层罐体，不包含子设备）
+const generateTankNavList = computed(() => {
+    const navList = []
+    // 直接遍历罐体名称，不处理子设备
+    Object.keys(filteredDeviceConfigGroup.value).forEach(tankName => {
+        // 生成简短名称用于导航显示
+        const shortName = tankName.length > 18
+            ? tankName.substring(0, 17) + '...'
+            : tankName
+
+        navList.push({
+            uniqueId: `tank_${tankName}`,  // 与罐体DOM元素ID对应
+            tankName,
+            shortName,
+            fullName: tankName
+        })
+    })
+    return navList
+})
+
+// 计算固定头部高度
+const calculateHeaderHeight = () => {
+    if (fixedHeader.value) {
+        headerHeight.value = fixedHeader.value.offsetHeight
+    }
+}
+
+// 处理滚动位置变化事件
+function handleScrollPositionChange(index) {
+    currentNavIndex.value = index
+}
+
+// 加载设备配置和初始参数
+async function loadConfigData() {
+    try {
+        isLoading.value = true
+        hasError.value = false
+        // 重置参数加载状态
+        isInitialParamsLoaded.value = false
+
+        // 1. 获取设备列表（按罐体分组）
+        const res = await getPageEquipmentGroupByTankByFlowCode(flowCode.value)
+        deviceConfigGroup.value = Object.fromEntries(
+            Object.entries(res.data || {}).filter(([_, equipments]) => equipments?.length > 0)
+        )
+        // 2. 加载初始参数值（若有设备）
+        if (Object.keys(filteredDeviceConfigGroup.value).length > 0) {
+            await loadInitialParamValues()
+        } else {
+            // 没有设备时也标记参数加载完成
+            isInitialParamsLoaded.value = true
+        }
+
+    } catch (err) {
+        hasError.value = true
+        errorMessage.value = err.message || '加载配置失败'
+        console.error('加载配置失败', err)
+        // 错误时也标记参数加载完成，避免一直显示加载状态
+        isInitialParamsLoaded.value = true
+    } finally {
+        isLoading.value = false
+    }
+}
+
+// 加载所有设备的初始参数值
+async function loadInitialParamValues() {
+    try {
+        const allCodes = []
+        Object.values(filteredDeviceConfigGroup.value).forEach(equipments => {
+            equipments.forEach(equip => allCodes.push(equip.code))
+        })
+        const res = await getAllParamConfigDataByCodeList(allCodes)
+        // console.log('加载初始参数结果', res)
+        initialParamData.value = res.data || {}
+    } catch (err) {
+        console.error('加载初始参数失败', err)
+        initialParamData.value = {}
+    } finally {
+        // 无论成功失败，都标记参数加载完成
+        isInitialParamsLoaded.value = true
+    }
+}
+
+// 获取设备的初始参数
+function getInitialParams(code) {
+    const paramCount = getParamCountByCode(code)
+    // console.log('获取初始参数', code, paramCount, initialParamData.value)
+    return initialParamData.value[code] || new Array(paramCount).fill(0)
+}
+
+// 辅助函数：根据设备code获取参数数量
+function getParamCountByCode(code) {
+    const type = getDeviceTypeByCode(code)
+    const paramCount = paramTemplates[type] || 0
+    return paramCount
+}
+
+// 辅助函数：根据设备code判断类型
+function getDeviceTypeByCode(code) {
+    const upperType = code.toUpperCase()
+    if (upperType.startsWith('PH')) return 'ph'
+    if (upperType.startsWith('PT')) return 'pressuregauge'
+    if (upperType.startsWith('TT')) return 'thermometer'
+    if (upperType.startsWith('FIT')) return 'flowmeter'
+    if (upperType.startsWith('P') || upperType.startsWith('M')) return 'pump'
+    if (upperType.startsWith('LT')) return 'levelmeter'
+    return 'unknown'
+}
+
+// 滚动到指定罐体（而非子设备）
+function scrollToTank(tank, index) {
+    currentNavIndex.value = index
+    const element = document.getElementById(`tank_${tank.tankName}`)
+    if (element) {
+        // 平滑滚动到罐体位置，考虑头部高度
+        window.scrollTo({
+            top: element.offsetTop - headerHeight.value - 20,
+            behavior: 'smooth'
+        })
+    }
+}
+
+// 参数模板定义（不同设备类型的参数数量）
+const paramTemplates = {
+    pump: 3,
+    flowmeter: 5,
+    thermometer: 2,
+    ph: 3,
+    levelmeter: 5,
+    pressuregauge: 3,
+    unknown: 0
+}
+
+// 初始化
+onMounted(() => {
+    // 计算头部高度
+    calculateHeaderHeight()
+    // 监听窗口大小变化，重新计算头部高度
+    window.addEventListener('resize', calculateHeaderHeight)
+    loadConfigData()
+
+    // 当罐体列表变化时更新导航
+    watchEffect(() => {
+        tankNavList.value = generateTankNavList.value
+        currentNavIndex.value = -1
+    })
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', calculateHeaderHeight)
+})
+</script>
+
+<style scoped>
+.param_config_page {
+    width: 100%;
+    min-height: 100vh;
+    padding: 0;
+    background-color: #252525;
+}
+
+/* 固定头部样式 */
+.fixed_header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background-color: #252525;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+/* 主容器样式（避免被固定头部遮挡） */
+.main_container {
+    padding: 140px 20px 24px;
+    box-sizing: border-box;
+}
+
+/* 主内容区布局 */
+.main_content {
+    display: flex;
+    gap: 20px;
+    max-width: 1700px;
+    margin: 0 auto;
+}
+
+.content_area {
+    flex: 1;
+    min-width: 1350px;
+}
+
+.config_container {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.tank_section {
+    margin-bottom: 30px;
+    background: #1a1a1a;
+    border-radius: 8px;
+    padding: 20px;
+    border: 1px solid #72E0FF;
+    scroll-margin-top: 160px;
+    /* 滚动定位预留空间 */
+}
+
+.tank_title {
+    margin: 0 0 20px 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    font-size: 18px;
+    color: #76E1FF;
+}
+
+.params_grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 20px;
+}
+
+/* 状态提示样式 */
+.loading,
+.error,
+.no_data {
+    width: 100%;
+    margin: 20px auto;
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+    background-color: rgba(255, 255, 255, 0.1);
+    color: #fff;
+}
+
+.loading {
+    color: #1890ff;
+}
+
+.error {
+    color: #f5222d;
+}
+
+.error button {
+    padding: 8px 16px;
+    background: #f5222d;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.error button:hover {
+    background: #d91111;
+}
+
+/* 响应式调整 */
+@media (max-width: 1400px) {
+    .params_grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
+    }
+}
+
+@media (max-width: 1200px) {
+    .main_container {
+        padding: 140px 15px 16px;
+    }
+
+    .main_content {
+        max-width: 100%;
+    }
+
+    .content_area {
+        min-width: auto;
+    }
+}
+
+@media (max-width: 992px) {
+    .main_content {
+        flex-direction: column;
+    }
+
+    .params_grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+
+    .main_container {
+        padding: 120px 15px 16px;
+    }
+}
+
+@media (max-width: 768px) {
+    .tank_section {
+        padding: 15px;
+        margin-bottom: 20px;
+    }
+
+    .params_grid {
+        gap: 14px;
+    }
+}
+</style>

ui/src/views/controlPage/paramConfiguration/reaction/index.vue

@@ -0,0 +1,403 @@
+<template>
+    <div class="param_config_page">
+        <!-- 固定在顶部的头部区域 -->
+        <div class="fixed_header" ref="fixedHeader">
+            <HeaderComponent title="硫酸钠-参数配置" backTo="/controlPage/flowSelect" />
+            <PageNav :items="paramItems_Na2SO4" :currentCode="paramPageCode" />
+        </div>
+
+        <!-- 主内容区（包含设备导航） -->
+        <div class="main_container">
+            <div class="main_content">
+                <!-- 设备列表区域 -->
+                <div class="content_area">
+                    <!-- 加载状态 -->
+                    <div v-if="isLoading" class="loading">正在加载参数配置...</div>
+
+                    <!-- 错误状态 -->
+                    <div v-if="hasError" class="error">
+                        <p>加载配置失败: {{ errorMessage }}</p>
+                        <button @click="loadConfigData">重试</button>
+                    </div>
+
+                    <div v-else class="config_container">
+                        <!-- 按罐体分组 -->
+                        <div v-for="(equipments, tankName) in filteredDeviceConfigGroup" :key="tankName"
+                            class="tank_section" :id="`tank_${tankName}`">
+                            <h2 class="tank_title">{{ tankName }}</h2>
+                            <div class="params_grid">
+                                <!-- 显示参数加载状态 -->
+                                <div v-if="!isInitialParamsLoaded" class="loading">加载参数中...</div>
+
+                                <!-- 确保初始参数加载完成后再渲染组件 -->
+                                <ParamConfigComponent v-if="isInitialParamsLoaded" v-for="equipment in equipments"
+                                    :key="equipment.code" :title="equipment.title + '-' + equipment.equipmentName"
+                                    :code="equipment.code" :initial-params="getInitialParams(equipment.code)"
+                                    :id="`device_${equipment.code}`" />
+                            </div>
+                        </div>
+
+                        <!-- 无数据提示 -->
+                        <div v-if="isEmptyData" class="no_data">未获取到设备配置信息</div>
+                    </div>
+                </div>
+
+                <!-- 右侧罐体导航（使用导航组件） -->
+                <TankNavigation :tanks="tankNavList" :current-index="currentNavIndex" :header-height="headerHeight"
+                    @tankClick="scrollToTank" @scrollPositionChange="handleScrollPositionChange" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, watchEffect, onBeforeUnmount } from 'vue'
+import { useRoute } from 'vue-router'
+import HeaderComponent from '@/components/DCS/HeaderComponent.vue'
+import PageNav from '@/components/GeneralComponents/control/PageNavComponent.vue'
+import { getPageEquipmentGroupByTankByFlowCode } from '@/api/hnyz/equipment'
+import { paramItems_Na2SO4 } from '@/config'
+import ParamConfigComponent from '@/components/GeneralComponents/control/paramConfigComponent.vue'
+import TankNavigation from '@/components/GeneralComponents/control/TankNavigationComponent.vue'
+import { getAllParamConfigDataByCodeList } from '@/api/hnyz/param'
+const route = useRoute()
+
+// 状态变量
+const isLoading = ref(true)
+const hasError = ref(false)
+const errorMessage = ref('')
+const isEmptyData = ref(false)
+const flowCode = ref(route.name.replace(/_.+$/, '_Control'))
+const paramPageCode = ref(route.name)
+const fixedHeader = ref(null)
+const headerHeight = ref(0)
+
+// 新增：标记初始参数是否加载完成
+const isInitialParamsLoaded = ref(false)
+
+// 导航相关变量 - 只处理最外层罐体
+const tankNavList = ref([])  // 罐体导航列表数据
+const currentNavIndex = ref(-1)  // 当前激活的导航项索引
+
+// 设备配置和初始参数数据
+const deviceConfigGroup = ref({})
+const initialParamData = ref({})
+
+// 过滤后的设备配置（排除阀门）
+const filteredDeviceConfigGroup = computed(() => {
+    const filtered = {}
+    Object.entries(deviceConfigGroup.value).forEach(([tankName, equipments]) => {
+        const validEquipments = equipments.filter(equip =>
+            ![1, 5].includes(Number(equip.equipmentType))
+        )
+        if (validEquipments.length > 0) {
+            filtered[tankName] = validEquipments
+        }
+    })
+    isEmptyData.value = Object.keys(filtered).length === 0
+    return filtered
+})
+
+// 生成罐体导航列表（只包含最外层罐体，不包含子设备）
+const generateTankNavList = computed(() => {
+    const navList = []
+    // 直接遍历罐体名称，不处理子设备
+    Object.keys(filteredDeviceConfigGroup.value).forEach(tankName => {
+        // 生成简短名称用于导航显示
+        const shortName = tankName.length > 18
+            ? tankName.substring(0, 17) + '...'
+            : tankName
+
+        navList.push({
+            uniqueId: `tank_${tankName}`,  // 与罐体DOM元素ID对应
+            tankName,
+            shortName,
+            fullName: tankName
+        })
+    })
+    return navList
+})
+
+// 计算固定头部高度
+const calculateHeaderHeight = () => {
+    if (fixedHeader.value) {
+        headerHeight.value = fixedHeader.value.offsetHeight
+    }
+}
+
+// 处理滚动位置变化事件
+function handleScrollPositionChange(index) {
+    currentNavIndex.value = index
+}
+
+// 加载设备配置和初始参数
+async function loadConfigData() {
+    try {
+        isLoading.value = true
+        hasError.value = false
+        // 重置参数加载状态
+        isInitialParamsLoaded.value = false
+
+        // 1. 获取设备列表（按罐体分组）
+        const res = await getPageEquipmentGroupByTankByFlowCode(flowCode.value)
+        deviceConfigGroup.value = Object.fromEntries(
+            Object.entries(res.data || {}).filter(([_, equipments]) => equipments?.length > 0)
+        )
+        // 2. 加载初始参数值（若有设备）
+        if (Object.keys(filteredDeviceConfigGroup.value).length > 0) {
+            await loadInitialParamValues()
+        } else {
+            // 没有设备时也标记参数加载完成
+            isInitialParamsLoaded.value = true
+        }
+
+    } catch (err) {
+        hasError.value = true
+        errorMessage.value = err.message || '加载配置失败'
+        console.error('加载配置失败', err)
+        // 错误时也标记参数加载完成，避免一直显示加载状态
+        isInitialParamsLoaded.value = true
+    } finally {
+        isLoading.value = false
+    }
+}
+
+// 加载所有设备的初始参数值
+async function loadInitialParamValues() {
+    try {
+        const allCodes = []
+        Object.values(filteredDeviceConfigGroup.value).forEach(equipments => {
+            equipments.forEach(equip => allCodes.push(equip.code))
+        })
+        const res = await getAllParamConfigDataByCodeList(allCodes)
+        // console.log('加载初始参数结果', res)
+        initialParamData.value = res.data || {}
+    } catch (err) {
+        console.error('加载初始参数失败', err)
+        initialParamData.value = {}
+    } finally {
+        // 无论成功失败，都标记参数加载完成
+        isInitialParamsLoaded.value = true
+    }
+}
+
+// 获取设备的初始参数
+function getInitialParams(code) {
+    const paramCount = getParamCountByCode(code)
+    // console.log('获取初始参数', code, paramCount, initialParamData.value)
+    return initialParamData.value[code] || new Array(paramCount).fill(0)
+}
+
+// 辅助函数：根据设备code获取参数数量
+function getParamCountByCode(code) {
+    const type = getDeviceTypeByCode(code)
+    const paramCount = paramTemplates[type] || 0
+    return paramCount
+}
+
+// 辅助函数：根据设备code判断类型
+function getDeviceTypeByCode(code) {
+    const upperType = code.toUpperCase()
+    if (upperType.startsWith('PH')) return 'ph'
+    if (upperType.startsWith('PT')) return 'pressuregauge'
+    if (upperType.startsWith('TT')) return 'thermometer'
+    if (upperType.startsWith('FIT')) return 'flowmeter'
+    if (upperType.startsWith('P') || upperType.startsWith('M')) return 'pump'
+    if (upperType.startsWith('LT')) return 'levelmeter'
+    return 'unknown'
+}
+
+// 滚动到指定罐体（而非子设备）
+function scrollToTank(tank, index) {
+    currentNavIndex.value = index
+    const element = document.getElementById(`tank_${tank.tankName}`)
+    if (element) {
+        // 平滑滚动到罐体位置，考虑头部高度
+        window.scrollTo({
+            top: element.offsetTop - headerHeight.value - 20,
+            behavior: 'smooth'
+        })
+    }
+}
+
+// 参数模板定义（不同设备类型的参数数量）
+const paramTemplates = {
+    pump: 3,
+    flowmeter: 5,
+    thermometer: 2,
+    ph: 3,
+    levelmeter: 5,
+    pressuregauge: 3,
+    unknown: 0
+}
+
+// 初始化
+onMounted(() => {
+    // 计算头部高度
+    calculateHeaderHeight()
+    // 监听窗口大小变化，重新计算头部高度
+    window.addEventListener('resize', calculateHeaderHeight)
+    loadConfigData()
+
+    // 当罐体列表变化时更新导航
+    watchEffect(() => {
+        tankNavList.value = generateTankNavList.value
+        currentNavIndex.value = -1
+    })
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', calculateHeaderHeight)
+})
+</script>
+
+<style scoped>
+.param_config_page {
+    width: 100%;
+    min-height: 100vh;
+    padding: 0;
+    background-color: #252525;
+}
+
+/* 固定头部样式 */
+.fixed_header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background-color: #252525;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+/* 主容器样式（避免被固定头部遮挡） */
+.main_container {
+    padding: 140px 20px 24px;
+    box-sizing: border-box;
+}
+
+/* 主内容区布局 */
+.main_content {
+    display: flex;
+    gap: 20px;
+    max-width: 1700px;
+    margin: 0 auto;
+}
+
+.content_area {
+    flex: 1;
+    min-width: 1350px;
+}
+
+.config_container {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.tank_section {
+    margin-bottom: 30px;
+    background: #1a1a1a;
+    border-radius: 8px;
+    padding: 20px;
+    border: 1px solid #72E0FF;
+    scroll-margin-top: 160px;
+    /* 滚动定位预留空间 */
+}
+
+.tank_title {
+    margin: 0 0 20px 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    font-size: 18px;
+    color: #76E1FF;
+}
+
+.params_grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 20px;
+}
+
+/* 状态提示样式 */
+.loading,
+.error,
+.no_data {
+    width: 100%;
+    margin: 20px auto;
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+    background-color: rgba(255, 255, 255, 0.1);
+    color: #fff;
+}
+
+.loading {
+    color: #1890ff;
+}
+
+.error {
+    color: #f5222d;
+}
+
+.error button {
+    padding: 8px 16px;
+    background: #f5222d;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.error button:hover {
+    background: #d91111;
+}
+
+/* 响应式调整 */
+@media (max-width: 1400px) {
+    .params_grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
+    }
+}
+
+@media (max-width: 1200px) {
+    .main_container {
+        padding: 140px 15px 16px;
+    }
+
+    .main_content {
+        max-width: 100%;
+    }
+
+    .content_area {
+        min-width: auto;
+    }
+}
+
+@media (max-width: 992px) {
+    .main_content {
+        flex-direction: column;
+    }
+
+    .params_grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+
+    .main_container {
+        padding: 120px 15px 16px;
+    }
+}
+
+@media (max-width: 768px) {
+    .tank_section {
+        padding: 15px;
+        margin-bottom: 20px;
+    }
+
+    .params_grid {
+        gap: 14px;
+    }
+}
+</style>