From 12dba1adad950f2166ee98a25bdefdd4f2c4db33 Mon Sep 17 00:00:00 2001
From: 17792275749 <812100002@qq.com>
Date: Mon, 30 Jun 2025 17:05:22 +0800
Subject: [PATCH] =?UTF-8?q?2025=E5=B9=B46=E6=9C=8830=E6=97=A517:05:20?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |    9 +
 .../dietaryNutritionTips2.vue                 |    9 +-
 .../dietaryNutritionTips5.vue                 | 1042 +++++++++++++++++
 3 files changed, 1055 insertions(+), 5 deletions(-)
 create mode 100644 src/views/dietaryNutritionTips/dietaryNutritionTips5.vue

diff --git a/src/router/index.js b/src/router/index.js
index b46b3d7..e117daa 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -40,6 +40,15 @@ const routes = [
         },
         component: () => import('@/views/dietaryNutritionTips/dietaryNutritionTips4.vue')
     },
+    {
+        path: '/dietaryNutritionTips5',
+        name: 'dietaryNutritionTips5',
+        meta: {
+            title: '膳食营养温馨提示',
+            rootValue: 108
+        },
+        component: () => import('@/views/dietaryNutritionTips/dietaryNutritionTips5.vue')
+    },
     {
         path: '/dataBoard',
         name: 'dataBoard',
diff --git a/src/views/dietaryNutritionTips/dietaryNutritionTips2.vue b/src/views/dietaryNutritionTips/dietaryNutritionTips2.vue
index 1c591fc..23acc5c 100644
--- a/src/views/dietaryNutritionTips/dietaryNutritionTips2.vue
+++ b/src/views/dietaryNutritionTips/dietaryNutritionTips2.vue
@@ -105,7 +105,7 @@
             </div>
         </template>
 
-        <div class="footer">公共事务中心</div>
+        <div class="footer">公共事务中心&emsp;开始时间：{{ startDay }}</div>
     </div>
 </template>
 
@@ -140,6 +140,7 @@ export default {
             currentData: "",
             doingDay: "-",
             list: [],
+            startDay: "-",
 
             // 明确区分不同用途的定时器ID
             pageChangeTimerId: null, // 用于页面切换或重试的定时器
@@ -375,6 +376,7 @@ export default {
                         if (res.success && res.result && res.result.rankList && res.result.rankList.length > 0) { // 确保有数据才赋值和滚动
                             _this.doingDay = res.result.doingDay === null ? "-" : res.result.doingDay;
                             _this.list = res.result.rankList; // 更新列表数据
+                            _this.startDay = res.result.startDay === null ? "-" : res.result.startDay;
                             _this.callAndroidPostLog(`数据加载成功，列表长度：${_this.list.length}。`);
 
                             _this.$nextTick(() => {
@@ -989,12 +991,9 @@ export default {
         color: #ffffff;
         width: 100%;
         height: 95px;
-        font-size: 36px;
+        font-size: 32px;
         font-weight: bold;
         line-height: 95px;
-        padding-right: 40px;
-        text-align: right;
-        box-sizing: border-box;
     }
 
     .nullData {
diff --git a/src/views/dietaryNutritionTips/dietaryNutritionTips5.vue b/src/views/dietaryNutritionTips/dietaryNutritionTips5.vue
new file mode 100644
index 0000000..3852ffc
--- /dev/null
+++ b/src/views/dietaryNutritionTips/dietaryNutritionTips5.vue
@@ -0,0 +1,1042 @@
+<template>
+    <div id="dietaryNutritionTips2">
+        <div class="tips">
+            <div></div>
+            <div>温馨提示</div>
+            <div></div>
+        </div>
+
+        <template v-if="personnelType === 'staff'">
+            <div class="title">
+                <div></div>
+                <div>
+                    <div>膳食营养行动（员工）</div>
+                    <div>
+                        <div>{{ currentData }}</div>
+                        <div>{{ dinnerType }}：{{ userNum }}人</div>
+                    </div>
+                </div>
+                <div></div>
+            </div>
+
+            <div class="content">
+                <div class="staff">
+                    <div class="staffHeader">
+                        <div>序号</div>
+                        <div>单位(部门)</div>
+                        <div>姓名</div>
+                        <div>膳食营养得分</div>
+                    </div>
+                    <div class="staffContent" ref="staffContent">
+                        <div
+                            class="staff-list-wrapper"
+                            ref="staffList"
+                            :style="{
+                                transform: `translateY(${scrollPosition}px)`,
+                                transition: scrollAnimationDuration > 0 ? `transform ${scrollAnimationDuration}s linear` : 'none',
+                            }"
+                        >
+                            <template v-if="list && list.length">
+                                <div
+                                    class="staffContentList"
+                                    v-for="(item, index) in list"
+                                    :key="item.departName + item.realName"
+                                >
+                                    <div>{{ index + 1 }}</div>
+                                    <div>{{ item.departName }}</div>
+                                    <div>{{ item.userName }}</div>
+                                    <div>{{ item.fraction }}</div>
+                                </div>
+                            </template>
+                        </div>
+                        <template v-if="!list || list.length === 0">
+                            <div class="nullData">
+                                <div></div>
+                                <div>~ 暂无膳食营养信息 ~</div>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        <template v-if="personnelType === 'department'">
+            <div class="title">
+                <div></div>
+                <div>
+                    <div>膳食营养行动（部门）</div>
+                    <div>
+                        <div>{{ currentData }}</div>
+                        <div>{{ dinnerType }}：{{ userNum }}人</div>
+                    </div>
+                </div>
+                <div></div>
+            </div>
+
+            <div class="content">
+                <div class="department">
+                    <div class="departmentHeader">
+                        <div>序号</div>
+                        <div>单位(部门)</div>
+                        <div>人均膳食营养得分</div>
+                    </div>
+                    <div class="departmentContent">
+                        <template v-if="list && list.length">
+                            <template v-for="(item, index) in list">
+                                <div class="departmentContentList" :key="item.userCount + item.avgFraction">
+                                    <div>{{ index + 1 }}</div>
+                                    <div>{{ item.departName }}</div>
+                                    <div>{{ item.avgFraction }}</div>
+                                </div>
+                            </template>
+                        </template>
+                        <template v-else>
+                            <div class="nullData">
+                                <div></div>
+                                <div>~ 暂无膳食营养信息 ~</div>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        <div class="footer">公共事务中心&emsp;开始时间：{{ startDay }}</div>
+    </div>
+</template>
+
+<script>
+import { httpRequest } from "@/XMLHttpRequest";
+import { getCurrentDate } from "@/utils/times";
+import signMd5Utils from "@/utils/signMd5";
+
+export default {
+    name: "dietaryNutritionTips",
+    data: function () {
+        return {
+            setTimeoutParams: {
+                status: true,
+                times: 15, // 页面切换的间隔时间，单位：秒
+                retryDelay: 5, // 错误或无数据时重试/切换的延迟时间，单位：秒
+                scrollDelay: 2, // 滚动前停顿时间，单位：秒
+                scrollEndDelay: 2, // 滚动结束后等待时间，单位：秒
+                initialRenderDelay: 100, // 首次渲染延迟，确保 DOM 准备好
+                maxRefRetry: 10, // 获取 ref 的最大重试次数
+                refRetryInterval: 100, // 获取 ref 的重试间隔，单位：毫秒
+            },
+
+            requestConfig: {
+                agreement: "https",
+                url: "yyjk.cqygjk.com",
+                suffix: "gateway",
+                orgCode: "A01A86",
+                canteenId: "1599670511042785282,1746801170592919553",
+            },
+            personnelType: "staff", // 员工：staff / 部门：department
+
+            pageSize: 0,
+
+            currentData: "",
+            dinnerType: "-",
+            userNum: "-",
+            list: [],
+            startDay: "-",
+
+            // 明确区分不同用途的定时器ID
+            pageChangeTimerId: null, // 用于页面切换或重试的定时器
+            scrollDelayTimerId: null, // 用于滚动前停顿的定时器
+            scrollFallbackTimerId: null, // 滚动动画的备用定时器
+
+            isRequesting: false, // 防止重复请求
+            isScrolling: false, // 标志是否正在进行滚动动画
+
+            scrollPosition: 0, // 滚动位置
+            scrollAnimationDuration: 0, // 滚动动画持续时间
+
+            isPageVisible: true, // 页面是否可见
+
+            onTransitionEndHandlerRef: null, // 存储 transitionend 事件处理函数的引用
+            refRetryCount: 0, // 记录 $refs 获取的重试次数
+            mutationObserver: null, // MutationObserver 实例
+            mutationObserverDebounceTimer: null, // MutationObserver 防抖定时器
+        };
+    },
+    created: function () {
+        const _this = this;
+
+        let url = _this.$route.query.url;
+        if (url) {
+            _this.requestConfig.url = Array.isArray(url) ? url[0] : url;
+        }
+        let code = _this.$route.query.orgCode;
+        if (code) {
+            _this.requestConfig.orgCode = Array.isArray(code) ? code[0] : code;
+        }
+        let canteenId = _this.$route.query.canteenId;
+        if (canteenId) {
+            _this.requestConfig.canteenId = Array.isArray(canteenId) ? canteenId[0] : canteenId;
+        }
+        _this.currentData = getCurrentDate();
+
+        // 绑定页面可见性监听器
+        document.addEventListener("visibilitychange", _this.handleVisibilityChange);
+
+        // 组件创建后，首次启动流程时增加一个小的延迟，确保 DOM 结构基本准备好
+        _this.pageChangeTimerId = setTimeout(() => {
+            _this.startSequentialLoading();
+        }, _this.setTimeoutParams.initialRenderDelay);
+    },
+    mounted() {
+        // 在 mounted 钩子中初始化 MutationObserver
+        this.setupMutationObserver();
+    },
+    methods: {
+        /**
+         * 调用 Android 端的 postLog 方法，用于调试日志输出
+         */
+        callAndroidPostLog(content) {
+            // Android 接口检查
+            if (typeof window.Android !== 'undefined' && window.Android.postLog) {
+                try {
+                    window.Android.postLog(content);
+                } catch (e) {
+                    console.error("调用 Android.postLog 失败:", e);
+                }
+            } else {
+                console.log("H5 Log (Android Interface Not Available):", content);
+            }
+        },
+
+        /**
+         * 设置 MutationObserver 来监控关键元素的 DOM 变化
+         */
+        setupMutationObserver: function() {
+            const _this = this;
+            // 确保只设置一次
+            if (_this.mutationObserver) return;
+
+            const targetNode = _this.$el; // 监控组件的根元素
+            const config = { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] };
+
+            _this.mutationObserver = new MutationObserver((mutationsList) => {
+                // 添加防抖，避免过于频繁的触发
+                clearTimeout(_this.mutationObserverDebounceTimer);
+                _this.mutationObserverDebounceTimer = setTimeout(() => {
+                    for (let mutation of mutationsList) {
+                        if (mutation.type === 'childList' || mutation.type === 'attributes') {
+                            // 只有在非滚动状态且页面可见时，才考虑处理 Mutation。
+                            // 这里的逻辑依然是辅助性监控，不直接触发关键流程，减少干扰。
+                            if (_this.personnelType === 'staff' && _this.isPageVisible && !_this.isScrolling && _this.list.length > 0) {
+                                _this.callAndroidPostLog(`MutationObserver 触发 (防抖后)。类型: ${mutation.type}`);
+                                // 实际的滚动启动在 loadDataSequential 的 nextTick 中。
+                                // 此处可以根据需要添加更具体的异常处理或重新评估逻辑。
+                            }
+                        }
+                    }
+                }, 100); // 100ms 防抖
+            });
+
+            if (targetNode) {
+                _this.mutationObserver.observe(targetNode, config);
+                _this.callAndroidPostLog("MutationObserver 已设置在组件根元素上。");
+            } else {
+                _this.callAndroidPostLog("警告：无法获取组件根元素设置 MutationObserver。");
+            }
+        },
+
+        /**
+         * 页面可见性处理
+         */
+        handleVisibilityChange: function () {
+            const _this = this;
+            const listWrapperEl = _this.$refs.staffList;
+
+            if (document.hidden) {
+                _this.isPageVisible = false;
+                _this.callAndroidPostLog("页面不可见，暂停所有流程。");
+                _this.clearAllTimers(); // 统一清除所有定时器和动画状态
+                if (listWrapperEl) {
+                    listWrapperEl.style.transition = "none";
+                    listWrapperEl.style.transform = "translateY(0px)";
+                    void listWrapperEl.offsetWidth; // 强制浏览器重绘
+                }
+            } else {
+                _this.isPageVisible = true;
+                _this.callAndroidPostLog("页面可见，恢复所有流程。");
+                // 页面恢复可见时，重置重试计数并重新开始加载流程
+                _this.refRetryCount = 0;
+                _this.startSequentialLoading();
+            }
+        },
+
+        /**
+         * 统一清除所有定时器和滚动状态
+         */
+        clearAllTimers: function() {
+            const _this = this;
+            _this.callAndroidPostLog(`>>> 清理定时器 | pageChangeTimerId=${_this.pageChangeTimerId} | scrollDelayTimerId=${_this.scrollDelayTimerId} | scrollFallbackTimerId=${_this.scrollFallbackTimerId} | isScrolling=${_this.isScrolling}`);
+
+            if (_this.pageChangeTimerId) {
+                clearTimeout(_this.pageChangeTimerId);
+                _this.pageChangeTimerId = null;
+                _this.callAndroidPostLog("清除 pageChangeTimerId。");
+            }
+            if (_this.scrollDelayTimerId) {
+                clearTimeout(_this.scrollDelayTimerId);
+                _this.scrollDelayTimerId = null;
+                _this.callAndroidPostLog("清除 scrollDelayTimerId。");
+            }
+            if (_this.scrollFallbackTimerId) {
+                clearTimeout(_this.scrollFallbackTimerId);
+                _this.scrollFallbackTimerId = null;
+                _this.callAndroidPostLog("清除 scrollFallbackTimerId。");
+            }
+            if (_this.mutationObserverDebounceTimer) {
+                clearTimeout(_this.mutationObserverDebounceTimer);
+                _this.mutationObserverDebounceTimer = null;
+                _this.callAndroidPostLog("清除 MutationObserver 防抖定时器。");
+            }
+
+            _this.isScrolling = false; // 确保滚动状态被重置
+
+            const listWrapperEl = _this.$refs.staffList;
+            if (listWrapperEl && _this.onTransitionEndHandlerRef) {
+                listWrapperEl.removeEventListener("transitionend", _this.onTransitionEndHandlerRef);
+                _this.onTransitionEndHandlerRef = null; // 清除引用
+                _this.callAndroidPostLog("移除 transitionend 监听器。");
+            }
+            _this.callAndroidPostLog("所有定时器和相关状态已清除。");
+        },
+
+        /**
+         * 页面切换回调函数，用于在员工和部门模式之间切换。
+         */
+        pageTimerCallback: function () {
+            const _this = this;
+            _this.callAndroidPostLog("pageTimerCallback 被调用。");
+            if (!_this.isPageVisible) {
+                _this.callAndroidPostLog("页面不可见，暂停 pageTimerCallback 内部执行。");
+                return;
+            }
+            _this.refRetryCount = 0; // 每次切换页面或加载数据前重置重试计数
+            _this.personnelType = _this.personnelType === "department" ? "staff" : "department";
+            _this.callAndroidPostLog(`切换到模式：${_this.personnelType}。`);
+            _this.startSequentialLoading();
+        },
+
+        /**
+         * 启动或重置顺序加载流程。
+         * 根据当前人员类型设置 pageSize，并调用数据加载方法。
+         */
+        startSequentialLoading: function () {
+            const _this = this;
+            _this.callAndroidPostLog("startSequentialLoading 被调用。");
+            if (!_this.isPageVisible) {
+                _this.callAndroidPostLog("页面不可见，暂停 startSequentialLoading 内部执行。");
+                return;
+            }
+
+            _this.clearAllTimers(); // 确保在启动新流程前清除所有旧的定时器
+
+            _this.list = []; // 清空列表，准备加载新数据
+            if (_this.personnelType === "staff") {
+                _this.pageSize = 45;
+            } else {
+                _this.pageSize = 10;
+            }
+            _this.callAndroidPostLog(`设置 pageSize: ${_this.pageSize}。`);
+            _this.loadDataSequential();
+        },
+
+        /**
+         * 加载数据并根据人员类型处理滚动或定时器。
+         */
+        loadDataSequential: function () {
+            const _this = this;
+            let urlPrefix = "/food/userRank";
+            let apiUrl = "";
+
+            _this.callAndroidPostLog("loadDataSequential 被调用。");
+            if (!_this.isPageVisible) {
+                _this.callAndroidPostLog("页面不可见，暂停 loadDataSequential 内部执行。");
+                return;
+            }
+
+            if (_this.isRequesting) {
+                _this.callAndroidPostLog('请求正在进行中，跳过本次 loadDataSequential 调用。');
+                return;
+            }
+            _this.isRequesting = true;
+            _this.clearAllTimers(); // 在发送请求前再次清除定时器，以防万一
+
+            apiUrl = urlPrefix + (_this.personnelType === "staff" ? "/getNutritionRankings" : "/getDepartRankings");
+            let requestUrl = _this.requestConfig.agreement + "://" + _this.requestConfig.url +'/'+ this.requestConfig.suffix + apiUrl;
+            _this.callAndroidPostLog(`发起请求：${requestUrl}`);
+            let params = {
+                orgCode: _this.requestConfig.orgCode,
+                canteenId: _this.requestConfig.canteenId,
+                no: _this.pageSize,
+            };
+            httpRequest("GET", requestUrl, params, {
+                'X-Sign': signMd5Utils.getSign(requestUrl, params),
+                'X-TIMESTAMP': signMd5Utils.getDateTimeToString(requestUrl, params),
+            }).then((res) => {
+                _this.callAndroidPostLog(`请求返回：${JSON.stringify(res)}`);
+                if (res.success && res.result && res.result[_this.personnelType === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos'] && res.result[_this.personnelType === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos'].length > 0) { // 确保有数据才赋值和滚动
+                    _this.dinnerType = res.result.dinnerType === null ? "-" : res.result.dinnerType;
+                    _this.userNum = res.result.userNum === null ? "-" : res.result.userNum;
+                    _this.list = res.result[_this.personnelType === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos']; // 更新列表数据
+                    _this.startDay = res.result.startDay ? _this.formatISODateToChinese(res.result.startDay) : "-"; // 更新列表数据
+                    _this.callAndroidPostLog(`数据加载成功，列表长度：${_this.list.length}。`);
+
+                    _this.$nextTick(() => {
+                        // 只有在 staff 模式且有数据时才尝试滚动
+                        if (_this.personnelType === "staff" && _this.list.length > 0) {
+                            _this.refRetryCount = 0; // 每次尝试滚动前重置重试计数
+                            _this.startSingleScroll();
+                        } else {
+                            // 部门模式或员工无数据，直接设置页面切换定时器
+                            _this.callAndroidPostLog("无需滚动或无数据，设置页面切换定时器。");
+                            _this.pageChangeTimerId = setTimeout(
+                                _this.pageTimerCallback,
+                                _this.setTimeoutParams.times * 1000
+                            );
+                        }
+                    });
+                } else {
+                    _this.list = []; // 数据不成功或无数据时清空列表
+                    _this.callAndroidPostLog("请求成功但数据无效或为空，将在 " + _this.setTimeoutParams.retryDelay + " 秒后重试/切换。");
+                    _this.pageChangeTimerId = setTimeout(
+                        _this.pageTimerCallback,
+                        _this.setTimeoutParams.retryDelay * 1000
+                    );
+                }
+            },
+            (error) => { // 添加错误回调
+                _this.callAndroidPostLog("请求失败: " + JSON.stringify(error));
+                _this.list = []; // 请求失败时清空列表
+                _this.callAndroidPostLog('请求失败，将在 ' + _this.setTimeoutParams.retryDelay + ' 秒后重试/切换。');
+                _this.pageChangeTimerId = setTimeout(
+                    _this.pageTimerCallback,
+                    _this.setTimeoutParams.retryDelay * 1000
+                );
+            }).then(() => { // 使用 .then() 替代 .finally()，无论成功或失败都会执行
+                _this.isRequesting = false;
+                _this.callAndroidPostLog("请求结束，isRequesting 设置为 false。");
+            });
+        },
+
+        formatISODateToChinese(dateString) {
+            const [year, month, day] = dateString.split('-');
+            return `${year}年${month}月${day}日`;
+        },
+
+        /**
+         * 开始员工列表的单次滚动动画。
+         * 确保滚动容器和列表元素已就绪。
+         */
+        startSingleScroll: function () {
+            const _this = this;
+            const contentEl = _this.$refs.staffContent; // 滚动容器
+            const listWrapperEl = _this.$refs.staffList; // 实际滚动的元素
+
+            _this.callAndroidPostLog(`>>> 开始滚动 | isScrolling=${_this.isScrolling} | pageChangeTimerId=${_this.pageChangeTimerId} | scrollDelayTimerId=${_this.scrollDelayTimerId} | scrollFallbackTimerId=${_this.scrollFallbackTimerId}`);
+            _this.callAndroidPostLog("startSingleScroll 被调用。");
+
+            if (!_this.isPageVisible) {
+                _this.callAndroidPostLog("页面不可见，暂停 startSingleScroll 内部执行，直接切换页面。");
+                _this.pageChangeTimerId = setTimeout(_this.pageTimerCallback, _this.setTimeoutParams.retryDelay * 1000);
+                return;
+            }
+
+            // **重试机制：如果 refs 未就绪，进行重试**
+            if (!contentEl || !listWrapperEl || contentEl.clientHeight === 0 || listWrapperEl.offsetHeight === 0) {
+                _this.callAndroidPostLog(`Refs未就绪或尺寸为0。contentEl: ${contentEl}, listWrapperEl: ${listWrapperEl}, contentHeight: ${contentEl ? contentEl.clientHeight : 'N/A'}, listHeight: ${listWrapperEl ? listWrapperEl.offsetHeight : 'N/A'}`);
+
+                if (_this.refRetryCount < _this.setTimeoutParams.maxRefRetry) {
+                    _this.refRetryCount++;
+                    _this.callAndroidPostLog(`尝试获取refs，重试次数：${_this.refRetryCount}/${_this.setTimeoutParams.maxRefRetry}。将在 ${_this.setTimeoutParams.refRetryInterval}ms 后重试。`);
+                    _this.scrollDelayTimerId = setTimeout(() => { // 使用 scrollDelayTimerId
+                        _this.startSingleScroll(); // 再次尝试启动滚动
+                    }, _this.setTimeoutParams.refRetryInterval);
+                    return; // 退出当前函数，等待重试
+                } else {
+                    _this.callAndroidPostLog("致命错误：滚动元素staffContent或staffList多次尝试后仍未就绪或尺寸为0，放弃滚动。将切换页面。");
+                    // 此时无法滚动，直接切换页面
+                    _this.pageChangeTimerId = setTimeout(_this.pageTimerCallback, _this.setTimeoutParams.retryDelay * 1000);
+                    return;
+                }
+            }
+
+            if (_this.isScrolling) {
+                _this.callAndroidPostLog("滚动正在进行中，跳过本次启动 startSingleScroll。");
+                return;
+            }
+
+            // **核心优化：在开始动画前，确保清理旧的动画状态和监听器**
+            _this.clearScrollAnimationState(listWrapperEl);
+
+            let contentHeight = contentEl.clientHeight; // 容器的可见高度
+            let actualListHeight = 0;
+
+            // 确保列表项已经渲染，才能获取其高度
+            if (listWrapperEl.children.length > 0) {
+                // 计算实际总高度（包括所有列表项和它们之间的 margin-bottom）
+                for(let i=0; i<listWrapperEl.children.length; i++){
+                    let child = listWrapperEl.children[i];
+                    actualListHeight += child.offsetHeight + parseFloat(window.getComputedStyle(child).marginBottom);
+                }
+                // 减去最后一个元素的 margin-bottom，因为它下面没有其他元素
+                if (listWrapperEl.children.length > 0) {
+                    actualListHeight -= parseFloat(window.getComputedStyle(listWrapperEl.children[listWrapperEl.children.length - 1]).marginBottom);
+                }
+
+                _this.callAndroidPostLog(`容器高度: ${contentHeight}px, 实际列表总高度: ${actualListHeight}px。`);
+            } else {
+                _this.callAndroidPostLog("staffList内部无子元素，无法计算滚动高度。将切换页面。");
+                // 无列表项时也直接切换页面
+                _this.pageChangeTimerId = setTimeout(_this.pageTimerCallback, _this.setTimeoutParams.times * 1000);
+                return;
+            }
+
+            // 如果列表实际高度小于或等于容器高度，则无需滚动
+            if (actualListHeight <= contentHeight) {
+                _this.scrollAnimationDuration = 0;
+                _this.scrollPosition = 0;
+                _this.callAndroidPostLog("列表高度 (" + actualListHeight + "px) 小于或等于容器高度 (" + contentHeight + "px)，无需滚动。将切换页面。");
+                _this.pageChangeTimerId = setTimeout(_this.pageTimerCallback, _this.setTimeoutParams.times * 1000);
+                return;
+            }
+
+            _this.isScrolling = true;
+            let scrollDistance = actualListHeight - contentHeight;
+            let scrollSpeed = 40; // 像素/秒
+            _this.scrollAnimationDuration = scrollDistance / scrollSpeed;
+            _this.callAndroidPostLog(`计算滚动距离：${scrollDistance}px，动画时长：${_this.scrollAnimationDuration}s。`);
+
+            // --- 滚动前停顿 ---
+            _this.scrollDelayTimerId = setTimeout( // 使用 scrollDelayTimerId
+                () => {
+                    _this.callAndroidPostLog("滚动前停顿结束，准备执行动画。");
+                    if (window.requestAnimationFrame) {
+                        window.requestAnimationFrame(() => {
+                            _this.performScrollAnimation(listWrapperEl, scrollDistance);
+                        });
+                    } else {
+                        _this.performScrollAnimation(listWrapperEl, scrollDistance);
+                    }
+                },
+                _this.setTimeoutParams.scrollDelay * 1000
+            );
+        },
+
+        /**
+         * 清理滚动动画相关的CSS属性和事件监听器
+         */
+        clearScrollAnimationState: function(listWrapperEl) {
+            const _this = this;
+            // 移除任何旧的 transitionend 监听器，防止重复绑定
+            if (_this.onTransitionEndHandlerRef) {
+                listWrapperEl.removeEventListener("transitionend", _this.onTransitionEndHandlerRef);
+                _this.onTransitionEndHandlerRef = null;
+                _this.callAndroidPostLog("已在动画开始前移除旧的 transitionend 监听器。");
+            }
+            // 清除之前的动画效果，并重置位置
+            listWrapperEl.style.transition = "none";
+            _this.scrollPosition = 0; // 重置位置到顶部
+            listWrapperEl.style.transform = `translateY(${_this.scrollPosition}px)`;
+            // 强制浏览器重绘/回流，确保 'transition: none' 立即生效，防止动画闪烁
+            void listWrapperEl.offsetWidth;
+            _this.callAndroidPostLog("已清除旧动画状态并重置滚动位置。");
+        },
+
+        // 统一处理 transitionend 事件，方便移除监听器
+        onTransitionEnd: function(event) {
+            const _this = this;
+            const listWrapperEl = _this.$refs.staffList;
+            _this.callAndroidPostLog("onTransitionEnd triggered.");
+            // 检查事件是否来自正确的元素和正确的属性，避免其他transition影响
+            if (event.target === listWrapperEl && event.propertyName === 'transform') {
+                _this.callAndroidPostLog("滚动动画完成，清除 scrollFallbackTimerId。");
+                clearTimeout(_this.scrollFallbackTimerId); // 动画正常完成，清除备用定时器
+                _this.scrollFallbackTimerId = null;
+
+                _this.isScrolling = false; // 动画完成，重置滚动状态
+                _this.callAndroidPostLog("滚动动画完成。");
+
+                // --- 滚动结束后，设置页面切换定时器 ---
+                _this.pageChangeTimerId = setTimeout( // 使用 pageChangeTimerId
+                    _this.pageTimerCallback,
+                    _this.setTimeoutParams.scrollEndDelay * 1000
+                );
+                _this.callAndroidPostLog(`设置 pageChangeTimerId，将在 ${_this.setTimeoutParams.scrollEndDelay} 秒后调用 pageTimerCallback。`);
+
+                // 动画完成后，再次确保移除监听器，防止重复触发
+                if (_this.onTransitionEndHandlerRef) {
+                    listWrapperEl.removeEventListener("transitionend", _this.onTransitionEndHandlerRef);
+                    _this.onTransitionEndHandlerRef = null;
+                    _this.callAndroidPostLog("移除 transitionend 监听器。");
+                }
+            } else {
+                _this.callAndroidPostLog(`onTransitionEnd triggered by unexpected target or property: ${event.target.tagName}, ${event.propertyName}`);
+            }
+        },
+
+        performScrollAnimation: function (listWrapperEl, scrollDistance) {
+            const _this = this;
+            _this.callAndroidPostLog("performScrollAnimation 被调用。");
+
+            // 再次确保在设置新监听器前移除旧的
+            _this.clearScrollAnimationState(listWrapperEl);
+
+            _this.onTransitionEndHandlerRef = _this.onTransitionEnd.bind(_this);
+            listWrapperEl.addEventListener("transitionend", _this.onTransitionEndHandlerRef);
+            _this.callAndroidPostLog("添加 transitionend 监听器。");
+
+            // 设置目标位置（负值表示向上滚动）
+            _this.scrollPosition = -scrollDistance;
+            listWrapperEl.style.transition = `transform ${_this.scrollAnimationDuration}s linear`;
+            listWrapperEl.style.transform = `translateY(${_this.scrollPosition}px)`; // 立即应用样式
+
+            _this.callAndroidPostLog(`开始滚动动画。目标位置：${_this.scrollPosition}px，时长：${_this.scrollAnimationDuration}s`);
+
+            // **优化：更可靠的备用定时器，在动画预期结束时间后触发**
+            // 这个定时器会在动画正常完成（`transitionend` 触发并清除它）或动画未完成时触发
+            _this.scrollFallbackTimerId = setTimeout(
+                () => {
+                    _this.callAndroidPostLog("备用定时器触发！TransitionEnd 可能未正常触发或动画完成但流程卡顿。强制进入下一流程。");
+                    // 即使动画被中断或未触发 transitionend，也强制执行清理和切换逻辑
+                    _this.forceNextStepAfterScroll(listWrapperEl);
+                },
+                (_this.scrollAnimationDuration + _this.setTimeoutParams.scrollEndDelay) * 1000 + 500 // 动画持续时间 + 动画结束后等待时间 + 0.5秒缓冲
+            );
+            _this.callAndroidPostLog(`设置 scrollFallbackTimerId，将在 ${(_this.scrollAnimationDuration + _this.setTimeoutParams.scrollEndDelay + 0.5)} 秒后触发。`);
+        },
+
+        /**
+         * 强制进入滚动动画后的下一个流程
+         * 用于 transitionend 未触发时的备用方案
+         */
+        forceNextStepAfterScroll: function(listWrapperEl) {
+            const _this = this;
+            _this.callAndroidPostLog("forceNextStepAfterScroll 被调用。");
+            // 清理所有相关定时器，防止多重触发
+            _this.clearAllTimers();
+
+            // 强制停止动画并归位
+            listWrapperEl.style.transition = "none";
+            listWrapperEl.style.transform = "translateY(0px)";
+            void listWrapperEl.offsetWidth; // 强制重绘
+            _this.callAndroidPostLog("强制停止动画并重置位置。");
+
+            // 直接调用页面切换逻辑，避免卡住
+            _this.pageTimerCallback();
+        }
+    },
+    beforeDestroy: function () {
+        const _this = this;
+        _this.callAndroidPostLog("组件即将销毁，执行 beforeDestroy。");
+        _this.clearAllTimers(); // 清除所有定时器
+
+        // 确保在组件销毁时，正在进行的 CSS 动画被停止并归位
+        const listWrapperEl = _this.$refs.staffList;
+        if (listWrapperEl) {
+            listWrapperEl.style.transition = "none";
+            listWrapperEl.style.transform = "translateY(0px)";
+            void listWrapperEl.offsetWidth; // 强制重绘
+            _this.callAndroidPostLog("组件销毁时，列表动画已停止并归位。");
+        }
+
+        // 移除页面可见性监听器
+        document.removeEventListener("visibilitychange", _this.handleVisibilityChange);
+        _this.callAndroidPostLog("已移除页面可见性监听器。");
+
+        // 断开 MutationObserver
+        if (_this.mutationObserver) {
+            _this.mutationObserver.disconnect();
+            _this.mutationObserver = null;
+            _this.callAndroidPostLog("MutationObserver 已断开。");
+        }
+        if (_this.mutationObserverDebounceTimer) {
+            clearTimeout(_this.mutationObserverDebounceTimer);
+            _this.mutationObserverDebounceTimer = null;
+            _this.callAndroidPostLog("MutationObserver 防抖定时器在销毁时已清除。");
+        }
+        _this.callAndroidPostLog("beforeDestroy 完成。");
+    },
+};
+</script>
+
+<style scoped lang="less">
+/* 样式部分保持不变 */
+#dietaryNutritionTips2 {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: 44px 40px 0;
+    box-sizing: border-box;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-image: url("@/assets/images/dietaryNutritionTips/bg.png");
+
+    .tips {
+        width: 100%;
+        height: 36px;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 96px;
+
+        > div:nth-of-type(1) {
+            width: 120px;
+            height: 4px;
+            background: linear-gradient(270deg, #ffc87c 0%, rgba(42, 199, 159, 0) 100%);
+            border-radius: 2px;
+        }
+
+        > div:nth-of-type(2) {
+            color: #ffc87c;
+            height: 36px;
+            font-size: 36px;
+            font-weight: bold;
+            line-height: 36px;
+            margin: 0 36px;
+        }
+
+        > div:nth-of-type(3) {
+            width: 120px;
+            height: 4px;
+            background: linear-gradient(90deg, #ffc87c 0%, rgba(42, 199, 159, 0) 100%);
+            border-radius: 2px;
+        }
+    }
+
+    .title {
+        width: 100%;
+        height: 182px;
+        position: fixed;
+        top: 85px;
+        left: 0;
+        right: 0;
+        z-index: 3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        > div:nth-of-type(1) {
+            width: 86px;
+            height: 182px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-image: url("@/assets/images/dietaryNutritionTips/l.png");
+        }
+
+        > div:nth-of-type(2) {
+            width: 720px;
+            height: 136px;
+            padding: 18px 30px 0;
+            border-radius: 24px;
+            box-sizing: border-box;
+            background: linear-gradient(-90deg, #ffc77b 0%, #fff4e6 47%, #ffc879 100%);
+
+            > div:nth-of-type(1) {
+                color: #8d0503;
+                width: 100%;
+                height: 48px;
+                font-size: 48px;
+                font-weight: bold;
+                line-height: 48px;
+                text-align: center;
+                margin-bottom: 12px;
+            }
+
+            > div:nth-of-type(2) {
+                width: 100%;
+                height: 40px;
+                display: flex;
+                flex-wrap: nowrap;
+                justify-content: space-between;
+                align-items: flex-end;
+
+                > div:nth-of-type(1) {
+                    color: #8d0503;
+                    height: 32px;
+                    font-size: 30px;
+                    line-height: 32px;
+                }
+
+                > div:nth-of-type(2) {
+                    color: #8d0503;
+                    height: 40px;
+                    font-size: 30px;
+                    line-height: 40px;
+
+                    > span {
+                        margin: 0 6px;
+                        font-size: 40px;
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+
+        > div:nth-of-type(3) {
+            width: 86px;
+            height: 182px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-image: url("@/assets/images/dietaryNutritionTips/r.png");
+        }
+    }
+
+    .content {
+        width: 100%;
+        flex: 1;
+        overflow: hidden;
+        border-radius: 16px;
+        padding: 105px 24px 0;
+        box-sizing: border-box;
+        border: 2px solid #ffc548;
+        background: linear-gradient(
+            180deg,
+            rgba(225, 225, 225, 0) 0%,
+            rgba(225, 225, 225, 0.3) 100%
+        );
+
+        .staff {
+            width: 100%;
+            height: 100%;
+
+            .staffHeader {
+                width: 100%;
+                height: 82px;
+                display: flex;
+                flex-wrap: nowrap;
+                padding: 0 30px;
+                box-sizing: border-box;
+                margin-bottom: 40px;
+                border-radius: 16px;
+                background-color: #7e0b08;
+
+                > div {
+                    color: #ffc87c;
+                    height: 82px;
+                    font-size: 32px;
+                    font-weight: bold;
+                    line-height: 82px;
+                    text-align: center;
+
+                    &:nth-of-type(1) {
+                        width: 85px;
+                        margin-right: 25px;
+                    }
+
+                    &:nth-of-type(2) {
+                        flex: 1;
+                        text-align: left;
+                    }
+
+                    &:nth-of-type(3) {
+                        width: 120px;
+                        margin-right: 20px;
+                    }
+
+                    &:nth-of-type(4) {
+                        width: 250px;
+                    }
+                }
+            }
+
+            .staffContent {
+                width: 100%;
+                overflow: hidden;
+                height: calc(100% - 152px); // 根据实际高度调整
+                position: relative; // 为 nullData 定位提供基础
+
+                .staff-list-wrapper {
+                    width: 100%;
+                    min-height: 1px; // 确保即使无子元素也有高度，避免 refs 无法获取
+                }
+
+                .staffContentList {
+                    width: 100%;
+                    height: 40px;
+                    padding: 0 30px;
+                    box-sizing: border-box;
+                    display: flex;
+                    flex-wrap: nowrap;
+                    margin-bottom: 56px; // 调整行间距，确保和 singleHeight 匹配
+
+                    > div {
+                        color: #ffffff;
+                        height: 40px;
+                        font-size: 40px;
+                        line-height: 40px;
+                        text-align: center;
+                        font-weight: bold;
+
+                        &:nth-of-type(1) {
+                            width: 85px;
+                            margin-right: 25px;
+                        }
+
+                        &:nth-of-type(2) {
+                            flex: 1;
+                            width: 0;
+                            text-align: left;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                        }
+
+                        &:nth-of-type(3) {
+                            width: 120px;
+                            margin-right: 20px;
+                        }
+
+                        &:nth-of-type(4) {
+                            width: 250px;
+                        }
+                    }
+
+                    &:last-of-type {
+                        margin-bottom: 0 !important;
+                    }
+                }
+            }
+        }
+
+        .department {
+            width: 100%;
+            height: 100%;
+
+            .departmentHeader {
+                width: 100%;
+                height: 82px;
+                display: flex;
+                flex-wrap: nowrap;
+                padding: 0 30px;
+                box-sizing: border-box;
+                margin-bottom: 60px;
+                border-radius: 16px;
+                background-color: #7e0b08;
+
+                > div {
+                    color: #ffc87c;
+                    height: 82px;
+                    font-size: 32px;
+                    font-weight: bold;
+                    line-height: 82px;
+                    text-align: center;
+
+                    &:nth-of-type(1) {
+                        width: 140px;
+                        margin-right: 40px;
+                    }
+
+                    &:nth-of-type(2) {
+                        flex: 1;
+                        text-align: left;
+                    }
+
+                    &:nth-of-type(3) {
+                        width: 350px;
+                    }
+                }
+            }
+
+            .departmentContent {
+                width: 100%;
+                overflow: hidden;
+                height: calc(100% - 142px);
+                position: relative; // 为 nullData 定位提供基础
+
+                .departmentContentList {
+                    width: 100%;
+                    padding: 0 30px;
+                    box-sizing: border-box;
+                    display: flex;
+                    flex-wrap: nowrap;
+                    margin-bottom: 106px;
+
+                    > div {
+                        color: #ffffff;
+                        height: 40px;
+                        font-size: 40px;
+                        line-height: 40px;
+                        text-align: center;
+                        font-weight: bold;
+
+                        &:nth-of-type(1) {
+                            width: 140px;
+                            margin-right: 40px;
+                        }
+
+                        &:nth-of-type(2) {
+                            flex: 1;
+                            width: 0;
+                            text-align: left;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                        }
+
+                        &:nth-of-type(3) {
+                            width: 350px;
+                        }
+                    }
+
+                    &:last-of-type {
+                        margin-bottom: 0 !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .footer {
+        color: #ffffff;
+        width: 100%;
+        height: 95px;
+        font-size: 32px;
+        font-weight: bold;
+        line-height: 95px;
+    }
+
+    .nullData {
+        width: 100%;
+        // 定位到容器中心，确保在有滚动列表时不会覆盖
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding-top: 0; // 移除之前的 paddingTop
+        text-align: center; // 确保内容居中
+
+        > div:nth-of-type(1) {
+            width: 280px;
+            height: 232px;
+            margin: 0 auto 40px;
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center top;
+            background-image: url("@/assets/images/dietaryNutritionTips/nullData.png");
+        }
+
+        > div:nth-of-type(2) {
+            color: #ffc87c;
+            width: 100%;
+            height: 40px;
+            font-size: 40px;
+            line-height: 40px;
+            text-align: center;
+        }
+    }
+}
+</style>
\ No newline at end of file