From 3766b9dc01078b9f8dc99db851e9b3b75b39f018 Mon Sep 17 00:00:00 2001
From: SkyJourney <sky.jiang.s.z@gmail.com>
Date: Mon, 5 Jan 2026 13:29:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E7=9A=84=E6=BA=A2=E5=87=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dietaryNutritionTips8.vue                 | 1219 +++++++++--------
 .../dietaryNutritionTips9.vue                 | 1112 ++++++++-------
 2 files changed, 1258 insertions(+), 1073 deletions(-)

diff --git a/src/views/dietaryNutritionTips/dietaryNutritionTips8.vue b/src/views/dietaryNutritionTips/dietaryNutritionTips8.vue
index d3363ec..39dab51 100644
--- a/src/views/dietaryNutritionTips/dietaryNutritionTips8.vue
+++ b/src/views/dietaryNutritionTips/dietaryNutritionTips8.vue
@@ -1,592 +1,697 @@
 <template>
-    <div id="dietaryNutritionTips">
-        <div class="tips">
-            <div></div>
-            <div>温馨提示</div>
-            <div></div>
-        </div>
-
-        <div class="title">
-            <div></div>
-            <div>
-                <div>体重管理行动（{{ dataConfig.personnelType === 'staff' ? '员工' : '部门' }}）</div>
-                <div>
-                    <div>{{ dataConfig.currentDate }}</div>
-                    <div>
-                        行动开始第<span>{{ dataConfig.doingDay }}</span>天
-                    </div>
-                </div>
-            </div>
-            <div></div>
-        </div>
-
-        <div class="content">
-            <div class="contentHeader">
-                <div>序号</div>
-                <div>单位(部门)</div>
-                <template v-if="dataConfig.personnelType === 'staff'">
-                    <div class="staff-userName">姓名</div>
-                    <div class="staff-fraction">体重管理得分</div>
-                </template>
-                <template v-if="dataConfig.personnelType === 'department'">
-                    <div class="department-avgFraction">人均体重管理得分</div>
-                </template>
-            </div>
-            <div class="contentBody" ref="scrollContentBody">
-                <template v-if="dataConfig.list && dataConfig.list.length">
-                    <div class="contentBodyList" v-for="(item, index) in dataConfig.list" :key="index">
-                        <template v-if="dataConfig.personnelType === 'staff'">
-                            <div>{{ item.rank }}</div>
-                            <div>{{ item.departName }}</div>
-                            <div class="staff-userName">{{ item.realName }}</div>
-                            <div class="staff-fraction">{{ item.value }}</div>
-                        </template>
-                        <template v-if="dataConfig.personnelType === 'department'">
-                            <div>{{ item.rank }}</div>
-                            <div>{{ item.orgName }}</div>
-                            <div class="department-avgFraction">{{ item.value }}</div>
-                        </template>
-                    </div>
-                </template>
-                <template v-else>
-                    <div class="nullData">
-                        <div></div>
-                        <div>~ 暂无体重管理信息 ~</div>
-                    </div>
-                </template>
-            </div>
-        </div>
-
-        <div class="footer">
-            <div>公共事务中心 宣</div>
-            <div>开始时间：{{ dataConfig.startDay }}</div>
-        </div>
+  <div id="dietaryNutritionTips">
+    <div class="tips">
+      <div></div>
+      <div>温馨提示</div>
+      <div></div>
     </div>
+
+    <div class="title">
+      <div></div>
+      <div>
+        <div>
+          体重管理行动（{{
+            dataConfig.personnelType === "staff" ? "员工" : "部门"
+          }}）
+        </div>
+        <div>
+          <div>{{ dataConfig.currentDate }}</div>
+          <div>
+            行动开始第<span>{{ dataConfig.doingDay }}</span
+            >天
+          </div>
+        </div>
+      </div>
+      <div></div>
+    </div>
+
+    <div class="content">
+      <div class="contentHeader">
+        <div>序号</div>
+        <div>单位(部门)</div>
+        <template v-if="dataConfig.personnelType === 'staff'">
+          <div class="staff-userName">姓名</div>
+          <div class="staff-fraction">体重管理得分</div>
+        </template>
+        <template v-if="dataConfig.personnelType === 'department'">
+          <div class="department-avgFraction">人均体重管理得分</div>
+        </template>
+      </div>
+      <div class="contentBody" ref="scrollContentBody">
+        <template v-if="dataConfig.list && dataConfig.list.length">
+          <div
+            class="contentBodyList"
+            v-for="(item, index) in dataConfig.list"
+            :key="`${item.rank}-${item.realName || item.orgName}`"
+          >
+            <template v-if="dataConfig.personnelType === 'staff'">
+              <div>{{ item.rank }}</div>
+              <div>{{ item.departName }}</div>
+              <div class="staff-userName">{{ item.realName }}</div>
+              <div class="staff-fraction">{{ item.value }}</div>
+            </template>
+            <template v-if="dataConfig.personnelType === 'department'">
+              <div>{{ item.rank }}</div>
+              <div>{{ item.orgName }}</div>
+              <div class="department-avgFraction">{{ item.value }}</div>
+            </template>
+          </div>
+        </template>
+        <template v-else>
+          <div class="nullData">
+            <div></div>
+            <div>~ 暂无体重管理信息 ~</div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <div class="footer">
+      <div>公共事务中心 宣</div>
+      <div>开始时间：{{ dataConfig.startDay }}</div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { shallowRef, markRaw, triggerRef } from "vue";
 import { httpRequest } from "@/XMLHttpRequest";
 
 export default {
-    name: "dietaryNutritionTips",
-    data() {
-        return {
-            isLoading: false, // 极限规避：请求锁
-            rankingConfig: {
-                personnelType: "department",
-                requestConfig: {
-                    agreement: "https",
-                    url: "api.cqygjk.com",
-                    suffix: "",
-                    urlPrefix: "/health-weight/api/anon",
-                    orgCode: ""
-                },
-                setTimeOutFun: null
-            },
-            dataConfig: {
-                personnelType: "department",
-                currentDate: "",
-                doingDay: "",
-                list: [],
-                startDay: "-",
-            },
-            scrollConfig: {
-                scrollAnimationFrameId: null,
-                scrollSpeed: 2,
-                dynamicScrollWaitTime: 6
-            }
-        };
-    },
-    created() {
-        this.initParams();
-        this.load("department");
-        this.initDailyScheduler(); // 启动时间更新与零点刷新逻辑
-    },
-    beforeDestroy() {
-        this.stopAllLoops();
-    },
-    methods: {
-        initParams() {
-            let url = this.$route.query.url;
-            if (url) this.rankingConfig.requestConfig.url = Array.isArray(url) ? url[0] : url;
-            let code = this.$route.query.orgCode;
-            if (code) this.rankingConfig.requestConfig.orgCode = Array.isArray(code) ? code[0] : code;
+  name: "dietaryNutritionTips",
+  setup() {
+    // 极限优化:使用 shallowRef 避免深度响应式,降低内存占用
+    const dataConfig = shallowRef({
+      personnelType: "department",
+      currentDate: "",
+      doingDay: "",
+      list: [], // 这个数组会用 markRaw 包裹,完全避免响应式
+      startDay: "-",
+    });
+
+    return {
+      dataConfig,
+    };
+  },
+  data() {
+    return {
+      isLoading: false, // 极限规避:请求锁
+      rankingConfig: {
+        personnelType: "department",
+        requestConfig: {
+          agreement: "https",
+          url: "api.cqygjk.com",
+          suffix: "",
+          urlPrefix: "/health-weight/api/anon",
+          orgCode: "",
         },
-
-        // 极限规避：时间管理与凌晨 0 点强制刷新
-        initDailyScheduler() {
-            const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
-
-            setInterval(() => {
-                const now = new Date();
-                const hours = now.getHours();
-                const minutes = now.getMinutes();
-                const seconds = now.getSeconds();
-
-                // 1. 每秒更新一次界面日期信息
-                const year = now.getFullYear();
-                const month = (now.getMonth() + 1).toString().padStart(2, "0");
-                const day = (now.getDate()).toString().padStart(2, "0");
-                const week = now.getDay();
-                this.dataConfig.currentDate = `${year}年${month}月${day}日 ${weekDays[week]}`;
-                this.dataConfig.doingDay = this.daysSinceDate("2025-05-07");
-                this.dataConfig.startDay = "2025年5月7日";
-
-                // 2. 极限规避：凌晨 00:00:00 强制刷新整个页面
-                // 彻底释放内存、清除过期缓存、重置字体渲染引擎
-                if (hours === 0 && minutes === 0 && seconds === 0) {
-                    sessionStorage.clear();
-                    window.location.reload();
-                }
-            }, 1000);
-        },
-
-        stopAllLoops() {
-            if (this.scrollConfig.scrollAnimationFrameId) {
-                cancelAnimationFrame(this.scrollConfig.scrollAnimationFrameId);
-                this.scrollConfig.scrollAnimationFrameId = null;
-            }
-            if (this.rankingConfig.setTimeOutFun) {
-                clearTimeout(this.rankingConfig.setTimeOutFun);
-                this.rankingConfig.setTimeOutFun = null;
-            }
-        },
-
-        load(targetType) {
-            if (this.isLoading) return; // 锁死，防止并发
-
-            this.stopAllLoops();
-            this.rankingConfig.personnelType = targetType;
-
-            const org = this.rankingConfig.requestConfig.orgCode;
-            const cacheKey = `weight_${targetType}_${org}`;
-            const localData = sessionStorage.getItem(cacheKey);
-
-            if (localData) {
-                const parsedData = JSON.parse(localData);
-                if (parsedData && parsedData.length) {
-                    this.renderUI(parsedData, targetType);
-                    return;
-                }
-            }
-            this.loadDataUrl(targetType);
-        },
-
-        loadDataUrl(type) {
-            this.isLoading = true;
-            const _this = this;
-            const config = _this.rankingConfig.requestConfig;
-            const serve = `${config.agreement}://${config.url}${config.suffix}${config.urlPrefix}`;
-            const apiPath = type === "staff" ? "/userRank" : "/deptRank";
-            const pageSize = type === "staff" ? "300" : "100";
-            const fullUrl = `${serve}${apiPath}?pageNo=1&pageSize=${pageSize}&orgCode=`;
-
-            Promise.all([
-                _this.orgCodeRequest(fullUrl + "A01A86"),
-                _this.orgCodeRequest(fullUrl + "A01A37"),
-            ]).then((res) => {
-                const processedData = _this.combineAndSortAndTakeTop50(res[0], res[1], type);
-
-                // 存储带 OrgCode 的唯一缓存
-                const cacheKey = `weight_${type}_${config.orgCode}`;
-                sessionStorage.setItem(cacheKey, JSON.stringify(processedData));
-
-                // 只有类型匹配才更新渲染
-                if (_this.rankingConfig.personnelType === type) {
-                    _this.renderUI(processedData, type);
-                }
-            }).catch(() => {
-                if (_this.rankingConfig.personnelType === type) {
-                    _this.dataConfig.list = [];
-                    _this.startBannerLoop();
-                }
-            }).finally(() => {
-                _this.isLoading = false;
-            });
-        },
-
-        renderUI(data, type) {
-            this.dataConfig.personnelType = type;
-            this.dataConfig.list = data;
-            this.$nextTick(() => {
-                this.startOneTimeScroll();
-            });
-        },
-
-        orgCodeRequest(requestUrl) {
-            return new Promise((resolve, reject) => {
-                httpRequest("POST", requestUrl, {}, {}).then((res) => {
-                    resolve(res.result.rankList || []);
-                }).catch(() => reject());
-            });
-        },
-
-        startOneTimeScroll() {
-            const container = this.$refs.scrollContentBody;
-            if (!container) return;
-
-            const maxScrollTop = container.scrollHeight - container.clientHeight;
-            this.scrollConfig.dynamicScrollWaitTime = 6;
-
-            container.scrollTop = 0;
-            let currentScrollTop = 0;
-
-            const animateScroll = () => {
-                if (currentScrollTop < maxScrollTop) {
-                    currentScrollTop += this.scrollConfig.scrollSpeed;
-                    if (currentScrollTop > maxScrollTop) currentScrollTop = maxScrollTop;
-                    container.scrollTop = currentScrollTop;
-                    this.scrollConfig.scrollAnimationFrameId = requestAnimationFrame(animateScroll);
-                } else {
-                    this.scrollConfig.scrollAnimationFrameId = null;
-                    this.rankingConfig.setTimeOutFun = setTimeout(() => {
-                        const nextType = this.rankingConfig.personnelType === "staff" ? "department" : "staff";
-                        this.load(nextType);
-                    }, this.scrollConfig.dynamicScrollWaitTime * 1000);
-                }
-            };
-
-            this.scrollConfig.scrollAnimationFrameId = requestAnimationFrame(animateScroll);
-        },
-
-        startBannerLoop() {
-            this.rankingConfig.setTimeOutFun = setTimeout(() => {
-                const nextType = this.rankingConfig.personnelType === "staff" ? "department" : "staff";
-                this.load(nextType);
-            }, 5000);
-        },
-
-        daysSinceDate(targetDateString) {
-            const targetDate = new Date(targetDateString);
-            const currentDate = new Date();
-            targetDate.setHours(0, 0, 0, 0);
-            currentDate.setHours(0, 0, 0, 0);
-            return Math.floor((currentDate - targetDate) / (1000 * 3600 * 24));
-        },
-
-        combineAndSortAndTakeTop50(arr1, arr2, personnelType) {
-            const combinedArray = arr1.concat(arr2);
-            let processedArray = [];
-
-            if(personnelType === "department") {
-                processedArray = combinedArray.filter(item =>
-                    item.orgName && item.orgName !== "公司机关"
-                );
-            } else {
-                const departmentsToReplace = [
-                    "综合管理部", "人力资源部", "计划财务部", "安全与设备管理部",
-                    "矿区建设中心", "物业后勤中心", "健康服务中心", "社会服务中心",
-                    "机关事务中心", "交通服务中心"
-                ];
-                processedArray = combinedArray.filter(item =>
-                    item.departName !== "部领导" && item.departName !== "助理副总师"
-                ).map(item => {
-                    if (departmentsToReplace.includes(item.departName)) {
-                        return { ...item, departName: "公共事务中心" };
-                    }
-                    return item;
-                });
-            }
-
-            const sorted = processedArray.sort((a, b) => parseFloat(b.value) - parseFloat(a.value));
-
-            let currentRank = 1;
-            let previousValue = null;
-            return sorted.map((item, index) => {
-                const val = parseFloat(item.value);
-                if (index !== 0 && val !== previousValue) {
-                    currentRank++;
-                }
-                previousValue = val;
-                return { ...item, rank: currentRank };
-            }).filter(item => item.rank <= 50);
-        }
+        setTimeOutFun: null,
+      },
+      scrollConfig: {
+        scrollAnimationFrameId: null,
+        scrollSpeed: 2,
+        dynamicScrollWaitTime: 6,
+      },
+      reloadTimer: null, // 2小时reload兜底定时器
+    };
+  },
+  created() {
+    this.initParams();
+    this.load("department");
+    this.initDailyScheduler(); // 启动时间更新与零点刷新逻辑
+    this.initReloadFallback(); // 启动2小时reload兜底策略
+  },
+  beforeDestroy() {
+    this.stopAllLoops();
+    if (this.reloadTimer) {
+      clearTimeout(this.reloadTimer);
+      this.reloadTimer = null;
     }
+  },
+  methods: {
+    initParams() {
+      let url = this.$route.query.url;
+      if (url)
+        this.rankingConfig.requestConfig.url = Array.isArray(url)
+          ? url[0]
+          : url;
+      let code = this.$route.query.orgCode;
+      if (code)
+        this.rankingConfig.requestConfig.orgCode = Array.isArray(code)
+          ? code[0]
+          : code;
+    },
+
+    // 极限规避：时间管理与凌晨 0 点强制刷新
+    initDailyScheduler() {
+      const weekDays = [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
+
+      setInterval(() => {
+        const now = new Date();
+        const hours = now.getHours();
+        const minutes = now.getMinutes();
+        const seconds = now.getSeconds();
+
+        // 1. 每秒更新一次界面日期信息
+        const year = now.getFullYear();
+        const month = (now.getMonth() + 1).toString().padStart(2, "0");
+        const day = now.getDate().toString().padStart(2, "0");
+        const week = now.getDay();
+        // 使用浅层更新,手动触发响应
+        this.dataConfig.value = {
+          ...this.dataConfig.value,
+          currentDate: `${year}年${month}月${day}日 ${weekDays[week]}`,
+          doingDay: this.daysSinceDate("2025-05-07"),
+          startDay: "2025年5月7日",
+        };
+
+        // 2. 极限规避：凌晨 00:00:00 强制刷新整个页面
+        // 彻底释放内存、清除过期缓存、重置字体渲染引擎
+        if (hours === 0 && minutes === 0 && seconds === 0) {
+          sessionStorage.clear();
+          window.location.reload();
+        }
+      }, 1000);
+    },
+
+    // 极限规避:2小时自动reload兜底策略
+    // 配合凌晨0点刷新,确保即使出现内存泄漏也能定期释放
+    initReloadFallback() {
+      this.reloadTimer = setTimeout(() => {
+        console.log("[兜底策略] 2小时到期,执行页面刷新释放内存");
+        sessionStorage.clear();
+        window.location.reload();
+      }, 1000 * 60 * 60 * 2); // 2小时
+    },
+
+    stopAllLoops() {
+      if (this.scrollConfig.scrollAnimationFrameId) {
+        cancelAnimationFrame(this.scrollConfig.scrollAnimationFrameId);
+        this.scrollConfig.scrollAnimationFrameId = null;
+      }
+      if (this.rankingConfig.setTimeOutFun) {
+        clearTimeout(this.rankingConfig.setTimeOutFun);
+        this.rankingConfig.setTimeOutFun = null;
+      }
+    },
+
+    load(targetType) {
+      if (this.isLoading) return; // 锁死，防止并发
+
+      this.stopAllLoops();
+      this.rankingConfig.personnelType = targetType;
+
+      const org = this.rankingConfig.requestConfig.orgCode;
+      const cacheKey = `weight_${targetType}_${org}`;
+      const localData = sessionStorage.getItem(cacheKey);
+
+      if (localData) {
+        const parsedData = JSON.parse(localData);
+        if (parsedData && parsedData.length) {
+          this.renderUI(parsedData, targetType);
+          return;
+        }
+      }
+      this.loadDataUrl(targetType);
+    },
+
+    loadDataUrl(type) {
+      this.isLoading = true;
+      const _this = this;
+      const config = _this.rankingConfig.requestConfig;
+      const serve = `${config.agreement}://${config.url}${config.suffix}${config.urlPrefix}`;
+      const apiPath = type === "staff" ? "/userRank" : "/deptRank";
+      const pageSize = type === "staff" ? "300" : "100";
+      const fullUrl = `${serve}${apiPath}?pageNo=1&pageSize=${pageSize}&orgCode=`;
+
+      Promise.all([
+        _this.orgCodeRequest(fullUrl + "A01A86"),
+        _this.orgCodeRequest(fullUrl + "A01A37"),
+      ])
+        .then((res) => {
+          const processedData = _this.combineAndSortAndTakeTop50(
+            res[0],
+            res[1],
+            type
+          );
+
+          // 存储带 OrgCode 的唯一缓存
+          const cacheKey = `weight_${type}_${config.orgCode}`;
+          sessionStorage.setItem(cacheKey, JSON.stringify(processedData));
+
+          // 只有类型匹配才更新渲染
+          if (_this.rankingConfig.personnelType === type) {
+            _this.renderUI(processedData, type);
+          }
+        })
+        .catch(() => {
+          if (_this.rankingConfig.personnelType === type) {
+            _this.dataConfig.value = {
+              ..._this.dataConfig.value,
+              list: markRaw([]),
+            };
+            _this.startBannerLoop();
+          }
+        })
+        .finally(() => {
+          _this.isLoading = false;
+        });
+    },
+
+    renderUI(data, type) {
+      // 极限优化:使用 markRaw 冻结数据,告诉 Vue 永远不要将其转为响应式
+      // 排行榜数据只需整体替换,不需要深度监听每个属性
+      this.dataConfig.value = {
+        ...this.dataConfig.value,
+        personnelType: type,
+        list: markRaw(data), // 关键:冻结数组,避免响应式开销
+      };
+      this.$nextTick(() => {
+        this.startOneTimeScroll();
+      });
+    },
+
+    orgCodeRequest(requestUrl) {
+      return new Promise((resolve, reject) => {
+        httpRequest("POST", requestUrl, {}, {})
+          .then((res) => {
+            resolve(res.result.rankList || []);
+          })
+          .catch(() => reject());
+      });
+    },
+
+    startOneTimeScroll() {
+      const container = this.$refs.scrollContentBody;
+      if (!container) return;
+
+      const maxScrollTop = container.scrollHeight - container.clientHeight;
+      this.scrollConfig.dynamicScrollWaitTime = 6;
+
+      container.scrollTop = 0;
+      let currentScrollTop = 0;
+
+      const animateScroll = () => {
+        if (currentScrollTop < maxScrollTop) {
+          currentScrollTop += this.scrollConfig.scrollSpeed;
+          if (currentScrollTop > maxScrollTop) currentScrollTop = maxScrollTop;
+          container.scrollTop = currentScrollTop;
+          this.scrollConfig.scrollAnimationFrameId =
+            requestAnimationFrame(animateScroll);
+        } else {
+          this.scrollConfig.scrollAnimationFrameId = null;
+          this.rankingConfig.setTimeOutFun = setTimeout(() => {
+            const nextType =
+              this.rankingConfig.personnelType === "staff"
+                ? "department"
+                : "staff";
+            this.load(nextType);
+          }, this.scrollConfig.dynamicScrollWaitTime * 1000);
+        }
+      };
+
+      this.scrollConfig.scrollAnimationFrameId =
+        requestAnimationFrame(animateScroll);
+    },
+
+    startBannerLoop() {
+      this.rankingConfig.setTimeOutFun = setTimeout(() => {
+        const nextType =
+          this.rankingConfig.personnelType === "staff" ? "department" : "staff";
+        this.load(nextType);
+      }, 5000);
+    },
+
+    daysSinceDate(targetDateString) {
+      const targetDate = new Date(targetDateString);
+      const currentDate = new Date();
+      targetDate.setHours(0, 0, 0, 0);
+      currentDate.setHours(0, 0, 0, 0);
+      return Math.floor((currentDate - targetDate) / (1000 * 3600 * 24));
+    },
+
+    combineAndSortAndTakeTop50(arr1, arr2, personnelType) {
+      const combinedArray = arr1.concat(arr2);
+      let processedArray = [];
+
+      if (personnelType === "department") {
+        processedArray = combinedArray.filter(
+          (item) => item.orgName && item.orgName !== "公司机关"
+        );
+      } else {
+        const departmentsToReplace = [
+          "综合管理部",
+          "人力资源部",
+          "计划财务部",
+          "安全与设备管理部",
+          "矿区建设中心",
+          "物业后勤中心",
+          "健康服务中心",
+          "社会服务中心",
+          "机关事务中心",
+          "交通服务中心",
+        ];
+        processedArray = combinedArray
+          .filter(
+            (item) =>
+              item.departName !== "部领导" && item.departName !== "助理副总师"
+          )
+          .map((item) => {
+            if (departmentsToReplace.includes(item.departName)) {
+              return { ...item, departName: "公共事务中心" };
+            }
+            return item;
+          });
+      }
+
+      const sorted = processedArray.sort(
+        (a, b) => parseFloat(b.value) - parseFloat(a.value)
+      );
+
+      let currentRank = 1;
+      let previousValue = null;
+      return sorted
+        .map((item, index) => {
+          const val = parseFloat(item.value);
+          if (index !== 0 && val !== previousValue) {
+            currentRank++;
+          }
+          previousValue = val;
+          return { ...item, rank: currentRank };
+        })
+        .filter((item) => item.rank <= 50);
+    },
+  },
 };
 </script>
 
 <style scoped lang="less">
 #dietaryNutritionTips {
+  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.jpg");
+  font-family: "Microsoft YaHei";
+  transform: translateZ(0);
+  -webkit-font-smoothing: antialiased;
+
+  .tips {
     width: 100%;
-    height: 100%;
-    overflow: hidden;
+    height: 36px;
     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.jpg");
-    font-family: "Microsoft YaHei";
-    transform: translateZ(0);
-    -webkit-font-smoothing: antialiased;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 96px;
 
-    .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;
-        }
+    > div:nth-of-type(1) {
+      width: 120px;
+      height: 4px;
+      background: linear-gradient(
+        270deg,
+        #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");
-        }
+    > div:nth-of-type(2) {
+      color: #ffc87c;
+      height: 36px;
+      font-size: 36px;
+      font-weight: bold;
+      line-height: 36px;
+      margin: 0 36px;
     }
 
-    .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%);
+    > div:nth-of-type(3) {
+      width: 120px;
+      height: 4px;
+      background: linear-gradient(
+        90deg,
+        #ffc87c 0%,
+        rgba(42, 199, 159, 0) 100%
+      );
+      border-radius: 2px;
+    }
+  }
 
-        .contentHeader {
-            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;
+  .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 {
-                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;
-                    width: 0;
-                    text-align: left;
-                }
-
-                &.staff-userName {
-                    width: 120px;
-                    margin-right: 20px;
-                }
-
-                &.staff-fraction {
-                    width: 250px;
-                }
-
-                &.department-avgFraction {
-                    width: 350px;
-                }
-            }
-        }
-
-        .contentBody {
-            width: 100%;
-            height: calc(100% - 152px); /* 减去 contentHeader 和其 margin-bottom 的高度 */
-            overflow: hidden; /* 关键：隐藏溢出内容，实现滚动效果 */
-
-            .contentBodyList {
-                width: 100%;
-                height: 40px; /* 行高 */
-                padding: 0 30px;
-                box-sizing: border-box;
-                display: flex;
-                flex-wrap: nowrap;
-                margin-bottom: 56px; /* 行间距 */
-
-                > 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;
-                    }
-
-                    &.staff-userName {
-                        width: 120px;
-                        margin-right: 20px;
-                    }
-
-                    &.staff-fraction {
-                        width: 250px;
-                    }
-
-                    &.department-avgFraction {
-                        width: 350px;
-                    }
-                }
-
-                &:last-of-type {
-                    margin-bottom: 0 !important; /* 确保最后一行没有下边距，防止影响 totalHeight 计算 */
-                }
-            }
-
-            .nullData {
-                width: 100%;
-                padding-top: 350px;
-
-                > 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;
-                }
-            }
-        }
+    > 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");
     }
 
-    .footer {
+    > 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: 95px;
+        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%
+    );
+
+    .contentHeader {
+      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;
+          width: 0;
+          text-align: left;
+        }
+
+        &.staff-userName {
+          width: 120px;
+          margin-right: 20px;
+        }
+
+        &.staff-fraction {
+          width: 250px;
+        }
+
+        &.department-avgFraction {
+          width: 350px;
+        }
+      }
+    }
+
+    .contentBody {
+      width: 100%;
+      height: calc(
+        100% - 152px
+      ); /* 减去 contentHeader 和其 margin-bottom 的高度 */
+      overflow: hidden; /* 关键：隐藏溢出内容，实现滚动效果 */
+
+      .contentBodyList {
+        width: 100%;
+        height: 40px; /* 行高 */
+        padding: 0 30px;
+        box-sizing: border-box;
+        display: flex;
+        flex-wrap: nowrap;
+        margin-bottom: 56px; /* 行间距 */
 
         > div {
-            color: #ffffff;
-            height: 95px;
-            font-size: 32px;
-            font-weight: bold;
-            line-height: 95px;
+          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;
+          }
+
+          &.staff-userName {
+            width: 120px;
+            margin-right: 20px;
+          }
+
+          &.staff-fraction {
+            width: 250px;
+          }
+
+          &.department-avgFraction {
+            width: 350px;
+          }
         }
+
+        &:last-of-type {
+          margin-bottom: 0 !important; /* 确保最后一行没有下边距，防止影响 totalHeight 计算 */
+        }
+      }
+
+      .nullData {
+        width: 100%;
+        padding-top: 350px;
+
+        > 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;
+        }
+      }
     }
+  }
+
+  .footer {
+    width: 100%;
+    height: 95px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+
+    > div {
+      color: #ffffff;
+      height: 95px;
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 95px;
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dietaryNutritionTips/dietaryNutritionTips9.vue b/src/views/dietaryNutritionTips/dietaryNutritionTips9.vue
index b18663c..118c662 100644
--- a/src/views/dietaryNutritionTips/dietaryNutritionTips9.vue
+++ b/src/views/dietaryNutritionTips/dietaryNutritionTips9.vue
@@ -1,553 +1,633 @@
 <template>
-    <div id="dietaryNutritionTips">
-        <div class="tips">
-            <div></div>
-            <div>温馨提示</div>
-            <div></div>
-        </div>
-
-        <div class="title">
-            <div></div>
-            <div>
-                <div>膳食营养行动（{{dataConfig.personnelType === 'staff' ? '员工' : '部门'}}）</div>
-                <div>
-                    <div>{{ dataConfig.currentDate }}</div>
-                    <div>{{ dataConfig.dinnerType }}：{{ dataConfig.userNum }}人</div>
-                </div>
-            </div>
-            <div></div>
-        </div>
-
-        <div class="content">
-            <div class="contentHeader">
-                <div>序号</div>
-                <div>单位(部门)</div>
-                <template v-if="dataConfig.personnelType === 'staff'">
-                    <div class="staff-userName">姓名</div>
-                    <div class="staff-fraction">膳食营养得分</div>
-                </template>
-                <template v-if="dataConfig.personnelType === 'department'">
-                    <div class="department-avgFraction">人均膳食营养得分</div>
-                </template>
-            </div>
-            <div class="contentBody" ref="scrollContentBody">
-                <template v-if="dataConfig.list && dataConfig.list.length">
-                    <div class="contentBodyList" v-for="(item, index) in dataConfig.list" :key="index">
-                        <template v-if="dataConfig.personnelType === 'staff'">
-                            <div>{{ index + 1 }}</div>
-                            <div>{{ item.departName }}</div>
-                            <div class="staff-userName">{{ maskUserName(item.userName) }}</div>
-                            <div class="staff-fraction">{{ item.fraction }}</div>
-                        </template>
-                        <template v-if="dataConfig.personnelType === 'department'">
-                            <div>{{ index + 1 }}</div>
-                            <div>{{ item.departName }}</div>
-                            <div class="department-avgFraction">{{ item.avgFraction }}</div>
-                        </template>
-                    </div>
-                </template>
-                <template v-else>
-                    <div class="nullData">
-                        <div></div>
-                        <div>~ 暂无体重管理信息 ~</div>
-                    </div>
-                </template>
-            </div>
-        </div>
-
-        <div class="footer">
-            <div>公共事务中心 宣</div>
-            <div>开始时间：{{ dataConfig.startDay }}</div>
-        </div>
+  <div id="dietaryNutritionTips">
+    <div class="tips">
+      <div></div>
+      <div>温馨提示</div>
+      <div></div>
     </div>
+
+    <div class="title">
+      <div></div>
+      <div>
+        <div>
+          膳食营养行动（{{
+            dataConfig.personnelType === "staff" ? "员工" : "部门"
+          }}）
+        </div>
+        <div>
+          <div>{{ dataConfig.currentDate }}</div>
+          <div>{{ dataConfig.dinnerType }}：{{ dataConfig.userNum }}人</div>
+        </div>
+      </div>
+      <div></div>
+    </div>
+
+    <div class="content">
+      <div class="contentHeader">
+        <div>序号</div>
+        <div>单位(部门)</div>
+        <template v-if="dataConfig.personnelType === 'staff'">
+          <div class="staff-userName">姓名</div>
+          <div class="staff-fraction">膳食营养得分</div>
+        </template>
+        <template v-if="dataConfig.personnelType === 'department'">
+          <div class="department-avgFraction">人均膳食营养得分</div>
+        </template>
+      </div>
+      <div class="contentBody" ref="scrollContentBody">
+        <template v-if="dataConfig.list && dataConfig.list.length">
+          <div
+            class="contentBodyList"
+            v-for="(item, index) in dataConfig.list"
+            :key="`${index}-${item.userName || item.departName}`"
+          >
+            <template v-if="dataConfig.personnelType === 'staff'">
+              <div>{{ index + 1 }}</div>
+              <div>{{ item.departName }}</div>
+              <div class="staff-userName">
+                {{ maskUserName(item.userName) }}
+              </div>
+              <div class="staff-fraction">{{ item.fraction }}</div>
+            </template>
+            <template v-if="dataConfig.personnelType === 'department'">
+              <div>{{ index + 1 }}</div>
+              <div>{{ item.departName }}</div>
+              <div class="department-avgFraction">{{ item.avgFraction }}</div>
+            </template>
+          </div>
+        </template>
+        <template v-else>
+          <div class="nullData">
+            <div></div>
+            <div>~ 暂无体重管理信息 ~</div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <div class="footer">
+      <div>公共事务中心 宣</div>
+      <div>开始时间：{{ dataConfig.startDay }}</div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { shallowRef, markRaw } from "vue";
 import { httpRequest } from "@/XMLHttpRequest";
 import { getCurrentDate } from "@/utils/times";
 import signMd5Utils from "@/utils/signMd5";
 
 export default {
-    name: "dietaryNutritionTips",
-    data() {
-        return {
-            isLoading: false, // 极限规避：请求锁
-            rankingConfig: {
-                personnelType: "department",
-                requestConfig: {
-                    agreement: "https",
-                    url: "yyjk.cqygjk.com",
-                    suffix: "/gateway",
-                    urlPrefix: "/food/userRank",
-                    orgCode: "A01A86,A01A36",
-                    canteenId: "1599670511042785282,1746801170592919553",
-                    pageSize: 0
-                },
-                setTimeOutFun: null
-            },
-            dataConfig: {
-                personnelType: "department",
-                currentDate: "",
-                dinnerType: "",
-                userNum: "-",
-                list: [],
-                startDay: "-",
-            },
-            scrollConfig: {
-                scrollAnimationFrameId: null,
-                scrollSpeed: 2,
-                dynamicScrollWaitTime: 6
-            }
-        };
-    },
-    created() {
-        this.initParams();
-        this.loadDataUrl();
-        this.initDailyRefresh(); // 启动凌晨刷新逻辑
-    },
-    beforeDestroy() {
-        this.stopAllLoops();
-    },
-    methods: {
-        initParams() {
-            const { query } = this.$route;
-            if (query.url) this.rankingConfig.requestConfig.url = Array.isArray(query.url) ? query.url[0] : query.url;
-            if (query.orgCode) this.rankingConfig.requestConfig.orgCode = Array.isArray(query.orgCode) ? query.orgCode[0] : query.orgCode;
-            if (query.canteenId) this.rankingConfig.requestConfig.canteenId = Array.isArray(query.canteenId) ? query.canteenId[0] : query.canteenId;
+  name: "dietaryNutritionTips",
+  setup() {
+    // 极限优化:使用 shallowRef 避免深度响应式,降低内存占用
+    const dataConfig = shallowRef({
+      personnelType: "department",
+      currentDate: "",
+      dinnerType: "",
+      userNum: "-",
+      list: [], // 这个数组会用 markRaw 包裹,完全避免响应式
+      startDay: "-",
+    });
+
+    return {
+      dataConfig,
+    };
+  },
+  data() {
+    return {
+      isLoading: false, // 极限规避:请求锁
+      rankingConfig: {
+        personnelType: "department",
+        requestConfig: {
+          agreement: "https",
+          url: "yyjk.cqygjk.com",
+          suffix: "/gateway",
+          urlPrefix: "/food/userRank",
+          orgCode: "A01A86,A01A36",
+          canteenId: "1599670511042785282,1746801170592919553",
+          pageSize: 0,
         },
-
-        // 极限规避：凌晨 0 点强制刷新页面，解决汉字消失和内存碎片的终极方案
-        initDailyRefresh() {
-            setInterval(() => {
-                const now = new Date();
-                if (now.getHours() === 0 && now.getMinutes() === 0 && now.getSeconds() === 0) {
-                    sessionStorage.clear();
-                    window.location.reload();
-                }
-            }, 1000);
-        },
-
-        stopAllLoops() {
-            if (this.scrollConfig.scrollAnimationFrameId) {
-                cancelAnimationFrame(this.scrollConfig.scrollAnimationFrameId);
-                this.scrollConfig.scrollAnimationFrameId = null;
-            }
-            if (this.rankingConfig.setTimeOutFun) {
-                clearTimeout(this.rankingConfig.setTimeOutFun);
-                this.rankingConfig.setTimeOutFun = null;
-            }
-        },
-
-        loadDataUrl() {
-            if (this.isLoading) return; // 锁死并发
-
-            this.stopAllLoops();
-
-            // 1. 确定本次加载的目标类型并锁定
-            const targetType = this.rankingConfig.personnelType === "staff" ? "department" : "staff";
-            this.rankingConfig.personnelType = targetType;
-
-            const config = this.rankingConfig.requestConfig;
-            const pageSize = targetType === "staff" ? 50 : 100;
-            const dataKey = targetType === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos';
-
-            // 2. 尝试从带 OrgCode 标识的缓存读取
-            const cacheKey = `${dataKey}_${config.orgCode}`;
-            const localData = sessionStorage.getItem(cacheKey);
-
-            if (localData) {
-                this.renderData(JSON.parse(localData), targetType);
-                return;
-            }
-
-            // 3. 真正发起请求
-            this.isLoading = true;
-            this.dataConfig.currentDate = getCurrentDate();
-
-            const serve = `${config.agreement}://${config.url}`;
-            const apiPath = targetType === "staff" ? "/getNutritionRankings" : "/getDepartRankings";
-            const requestUrl = `${serve}${config.suffix}${config.urlPrefix}${apiPath}`;
-
-            const params = {
-                orgCode: config.orgCode,
-                canteenId: config.canteenId,
-                no: pageSize,
-            };
-
-            httpRequest("GET", requestUrl, params, {
-                'X-Sign': signMd5Utils.getSign(requestUrl, params),
-                'X-TIMESTAMP': signMd5Utils.getDateTimeToString(requestUrl, params),
-            }).then((res) => {
-                if (res && res.success && res.result) {
-                    // 数据脱敏/替换
-                    const list = res.result[dataKey];
-                    if (list && list.length) {
-                        list.forEach(item => {
-                            if (item.departName === "行政事务管理处") item.departName = "公共事务中心";
-                        });
-                    }
-                    // 存储缓存
-                    sessionStorage.setItem(cacheKey, JSON.stringify(res.result));
-                    // 渲染（传入 targetType 确保一致性）
-                    this.renderData(res.result, targetType);
-                } else {
-                    this.startBannerLoop();
-                }
-            }).catch(() => {
-                this.startBannerLoop();
-            }).finally(() => {
-                this.isLoading = false;
-            });
-        },
-
-        renderData(dataObj, type) {
-            // 只有当前视图类型依然匹配时，才允许渲染，防止慢接口覆盖新视图
-            if (this.rankingConfig.personnelType !== type) return;
-
-            const dataKey = type === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos';
-            this.dataConfig.personnelType = type;
-            this.dataConfig.dinnerType = dataObj.dinnerType || "-";
-            this.dataConfig.userNum = dataObj.userNum || "-";
-            this.dataConfig.startDay = "2025年5月7日";
-            this.dataConfig.list = dataObj[dataKey] || [];
-
-            if (this.dataConfig.list.length > 0) {
-                this.$nextTick(() => {
-                    this.startOneTimeScroll();
-                });
-            } else {
-                this.startBannerLoop();
-            }
-        },
-
-        startOneTimeScroll() {
-            const container = this.$refs.scrollContentBody;
-            if (!container) return;
-
-            const maxScrollTop = container.scrollHeight - container.clientHeight;
-            this.scrollConfig.dynamicScrollWaitTime = maxScrollTop <= 0 ? 6 : 6;
-
-            container.scrollTop = 0;
-            let currentScrollTop = 0;
-
-            const animateScroll = () => {
-                if (currentScrollTop < maxScrollTop) {
-                    currentScrollTop += this.scrollConfig.scrollSpeed;
-                    if (currentScrollTop > maxScrollTop) currentScrollTop = maxScrollTop;
-                    container.scrollTop = currentScrollTop;
-                    this.scrollConfig.scrollAnimationFrameId = requestAnimationFrame(animateScroll);
-                } else {
-                    this.scrollConfig.scrollAnimationFrameId = null;
-                    this.rankingConfig.setTimeOutFun = setTimeout(() => {
-                        this.loadDataUrl();
-                    }, this.scrollConfig.dynamicScrollWaitTime * 1000);
-                }
-            };
-
-            this.scrollConfig.scrollAnimationFrameId = requestAnimationFrame(animateScroll);
-        },
-
-        maskUserName(fullName) {
-            if (!fullName || typeof fullName !== 'string') return '';
-            const len = fullName.length;
-            if (len <= 1) return fullName;
-            if (len === 2) return fullName[0] + '*';
-            return fullName[0] + '*'.repeat(len - 2) + fullName[len - 1];
-        },
-
-        startBannerLoop() {
-            this.rankingConfig.setTimeOutFun = setTimeout(() => {
-                this.loadDataUrl();
-            }, 5000);
-        }
+        setTimeOutFun: null,
+      },
+      scrollConfig: {
+        scrollAnimationFrameId: null,
+        scrollSpeed: 2,
+        dynamicScrollWaitTime: 6,
+      },
+      reloadTimer: null, // 2小时reload兜底定时器
+    };
+  },
+  created() {
+    this.initParams();
+    this.loadDataUrl();
+    this.initDailyRefresh(); // 启动凌晨刷新逻辑
+    this.initReloadFallback(); // 启动2小时reload兜底策略
+  },
+  beforeDestroy() {
+    this.stopAllLoops();
+    if (this.reloadTimer) {
+      clearTimeout(this.reloadTimer);
+      this.reloadTimer = null;
     }
+  },
+  methods: {
+    initParams() {
+      const { query } = this.$route;
+      if (query.url)
+        this.rankingConfig.requestConfig.url = Array.isArray(query.url)
+          ? query.url[0]
+          : query.url;
+      if (query.orgCode)
+        this.rankingConfig.requestConfig.orgCode = Array.isArray(query.orgCode)
+          ? query.orgCode[0]
+          : query.orgCode;
+      if (query.canteenId)
+        this.rankingConfig.requestConfig.canteenId = Array.isArray(
+          query.canteenId
+        )
+          ? query.canteenId[0]
+          : query.canteenId;
+    },
+
+    // 极限规避：凌晨 0 点强制刷新页面，解决汉字消失和内存碎片的终极方案
+    initDailyRefresh() {
+      setInterval(() => {
+        const now = new Date();
+        if (
+          now.getHours() === 0 &&
+          now.getMinutes() === 0 &&
+          now.getSeconds() === 0
+        ) {
+          sessionStorage.clear();
+          window.location.reload();
+        }
+      }, 1000);
+    },
+
+    // 极限规避:2小时自动reload兜底策略
+    // 配合凌晨0点刷新,确保即使出现内存泄漏也能定期释放
+    initReloadFallback() {
+      this.reloadTimer = setTimeout(() => {
+        console.log("[兜底策略] 2小时到期,执行页面刷新释放内存");
+        sessionStorage.clear();
+        window.location.reload();
+      }, 1000 * 60 * 60 * 2); // 2小时
+    },
+
+    stopAllLoops() {
+      if (this.scrollConfig.scrollAnimationFrameId) {
+        cancelAnimationFrame(this.scrollConfig.scrollAnimationFrameId);
+        this.scrollConfig.scrollAnimationFrameId = null;
+      }
+      if (this.rankingConfig.setTimeOutFun) {
+        clearTimeout(this.rankingConfig.setTimeOutFun);
+        this.rankingConfig.setTimeOutFun = null;
+      }
+    },
+
+    loadDataUrl() {
+      if (this.isLoading) return; // 锁死并发
+
+      this.stopAllLoops();
+
+      // 1. 确定本次加载的目标类型并锁定
+      const targetType =
+        this.rankingConfig.personnelType === "staff" ? "department" : "staff";
+      this.rankingConfig.personnelType = targetType;
+
+      const config = this.rankingConfig.requestConfig;
+      const pageSize = targetType === "staff" ? 50 : 100;
+      const dataKey =
+        targetType === "staff" ? "nutritionRankingsVos" : "departRankingsVos";
+
+      // 2. 尝试从带 OrgCode 标识的缓存读取
+      const cacheKey = `${dataKey}_${config.orgCode}`;
+      const localData = sessionStorage.getItem(cacheKey);
+
+      if (localData) {
+        this.renderData(JSON.parse(localData), targetType);
+        return;
+      }
+
+      // 3. 真正发起请求
+      this.isLoading = true;
+      this.dataConfig.currentDate = getCurrentDate();
+
+      const serve = `${config.agreement}://${config.url}`;
+      const apiPath =
+        targetType === "staff" ? "/getNutritionRankings" : "/getDepartRankings";
+      const requestUrl = `${serve}${config.suffix}${config.urlPrefix}${apiPath}`;
+
+      const params = {
+        orgCode: config.orgCode,
+        canteenId: config.canteenId,
+        no: pageSize,
+      };
+
+      httpRequest("GET", requestUrl, params, {
+        "X-Sign": signMd5Utils.getSign(requestUrl, params),
+        "X-TIMESTAMP": signMd5Utils.getDateTimeToString(requestUrl, params),
+      })
+        .then((res) => {
+          if (res && res.success && res.result) {
+            // 数据脱敏/替换
+            const list = res.result[dataKey];
+            if (list && list.length) {
+              list.forEach((item) => {
+                if (item.departName === "行政事务管理处")
+                  item.departName = "公共事务中心";
+              });
+            }
+            // 存储缓存
+            sessionStorage.setItem(cacheKey, JSON.stringify(res.result));
+            // 渲染（传入 targetType 确保一致性）
+            this.renderData(res.result, targetType);
+          } else {
+            this.startBannerLoop();
+          }
+        })
+        .catch(() => {
+          this.startBannerLoop();
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+
+    renderData(dataObj, type) {
+      // 只有当前视图类型依然匹配时，才允许渲染，防止慢接口覆盖新视图
+      if (this.rankingConfig.personnelType !== type) return;
+
+      const dataKey =
+        type === "staff" ? "nutritionRankingsVos" : "departRankingsVos";
+
+      // 极限优化:使用 markRaw 冻结数据,告诉 Vue 永远不要将其转为响应式
+      // 排行榜数据只需整体替换,不需要深度监听每个属性
+      this.dataConfig.value = {
+        ...this.dataConfig.value,
+        personnelType: type,
+        dinnerType: dataObj.dinnerType || "-",
+        userNum: dataObj.userNum || "-",
+        startDay: "2025年5月7日",
+        list: markRaw(dataObj[dataKey] || []), // 关键:冻结数组,避免响应式开销
+      };
+
+      if (this.dataConfig.value.list.length > 0) {
+        this.$nextTick(() => {
+          this.startOneTimeScroll();
+        });
+      } else {
+        this.startBannerLoop();
+      }
+    },
+
+    startOneTimeScroll() {
+      const container = this.$refs.scrollContentBody;
+      if (!container) return;
+
+      const maxScrollTop = container.scrollHeight - container.clientHeight;
+      this.scrollConfig.dynamicScrollWaitTime = maxScrollTop <= 0 ? 6 : 6;
+
+      container.scrollTop = 0;
+      let currentScrollTop = 0;
+
+      const animateScroll = () => {
+        if (currentScrollTop < maxScrollTop) {
+          currentScrollTop += this.scrollConfig.scrollSpeed;
+          if (currentScrollTop > maxScrollTop) currentScrollTop = maxScrollTop;
+          container.scrollTop = currentScrollTop;
+          this.scrollConfig.scrollAnimationFrameId =
+            requestAnimationFrame(animateScroll);
+        } else {
+          this.scrollConfig.scrollAnimationFrameId = null;
+          this.rankingConfig.setTimeOutFun = setTimeout(() => {
+            this.loadDataUrl();
+          }, this.scrollConfig.dynamicScrollWaitTime * 1000);
+        }
+      };
+
+      this.scrollConfig.scrollAnimationFrameId =
+        requestAnimationFrame(animateScroll);
+    },
+
+    maskUserName(fullName) {
+      if (!fullName || typeof fullName !== "string") return "";
+      const len = fullName.length;
+      if (len <= 1) return fullName;
+      if (len === 2) return fullName[0] + "*";
+      return fullName[0] + "*".repeat(len - 2) + fullName[len - 1];
+    },
+
+    startBannerLoop() {
+      this.rankingConfig.setTimeOutFun = setTimeout(() => {
+        this.loadDataUrl();
+      }, 5000);
+    },
+  },
 };
 </script>
 
 <style scoped lang="less">
 #dietaryNutritionTips {
+  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.jpg");
+  font-family: "Microsoft YaHei";
+  transform: translateZ(0);
+  -webkit-font-smoothing: antialiased;
+
+  .tips {
     width: 100%;
-    height: 100%;
-    overflow: hidden;
+    height: 36px;
     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.jpg");
-    font-family: "Microsoft YaHei";
-    transform: translateZ(0);
-    -webkit-font-smoothing: antialiased;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 96px;
 
-    .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;
-        }
+    > div:nth-of-type(1) {
+      width: 120px;
+      height: 4px;
+      background: linear-gradient(
+        270deg,
+        #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");
-        }
+    > div:nth-of-type(2) {
+      color: #ffc87c;
+      height: 36px;
+      font-size: 36px;
+      font-weight: bold;
+      line-height: 36px;
+      margin: 0 36px;
     }
 
-    .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%
-        );
+    > div:nth-of-type(3) {
+      width: 120px;
+      height: 4px;
+      background: linear-gradient(
+        90deg,
+        #ffc87c 0%,
+        rgba(42, 199, 159, 0) 100%
+      );
+      border-radius: 2px;
+    }
+  }
 
-        .contentHeader {
-            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;
+  .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 {
-                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;
-                    width: 0;
-                    text-align: left;
-                }
-
-                &.staff-userName {
-                    width: 120px;
-                    margin-right: 20px;
-                }
-
-                &.staff-fraction {
-                    width: 250px;
-                }
-
-                &.department-avgFraction {
-                    width: 350px;
-                }
-            }
-        }
-
-        .contentBody {
-            width: 100%;
-            height: calc(100% - 152px); /* 减去 contentHeader 和其 margin-bottom 的高度 */
-            overflow: hidden; /* 关键：隐藏溢出内容，实现滚动效果 */
-
-            .contentBodyList {
-                width: 100%;
-                height: 40px; /* 行高 */
-                padding: 0 30px;
-                box-sizing: border-box;
-                display: flex;
-                flex-wrap: nowrap;
-                margin-bottom: 56px; /* 行间距 */
-
-                > 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;
-                    }
-
-                    &.staff-userName {
-                        width: 120px;
-                        margin-right: 20px;
-                    }
-
-                    &.staff-fraction {
-                        width: 250px;
-                    }
-
-                    &.department-avgFraction {
-                        width: 350px;
-                    }
-                }
-
-                &:last-of-type {
-                    margin-bottom: 0 !important; /* 确保最后一行没有下边距，防止影响 totalHeight 计算 */
-                }
-            }
-
-            .nullData {
-                width: 100%;
-                padding-top: 350px;
-
-                > 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;
-                }
-            }
-        }
+    > 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");
     }
 
-    .footer {
+    > 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: 95px;
+        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%
+    );
+
+    .contentHeader {
+      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;
+          width: 0;
+          text-align: left;
+        }
+
+        &.staff-userName {
+          width: 120px;
+          margin-right: 20px;
+        }
+
+        &.staff-fraction {
+          width: 250px;
+        }
+
+        &.department-avgFraction {
+          width: 350px;
+        }
+      }
+    }
+
+    .contentBody {
+      width: 100%;
+      height: calc(
+        100% - 152px
+      ); /* 减去 contentHeader 和其 margin-bottom 的高度 */
+      overflow: hidden; /* 关键：隐藏溢出内容，实现滚动效果 */
+
+      .contentBodyList {
+        width: 100%;
+        height: 40px; /* 行高 */
+        padding: 0 30px;
+        box-sizing: border-box;
+        display: flex;
+        flex-wrap: nowrap;
+        margin-bottom: 56px; /* 行间距 */
 
         > div {
-            color: #ffffff;
-            height: 95px;
-            font-size: 32px;
-            font-weight: bold;
-            line-height: 95px;
+          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;
+          }
+
+          &.staff-userName {
+            width: 120px;
+            margin-right: 20px;
+          }
+
+          &.staff-fraction {
+            width: 250px;
+          }
+
+          &.department-avgFraction {
+            width: 350px;
+          }
         }
+
+        &:last-of-type {
+          margin-bottom: 0 !important; /* 确保最后一行没有下边距，防止影响 totalHeight 计算 */
+        }
+      }
+
+      .nullData {
+        width: 100%;
+        padding-top: 350px;
+
+        > 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;
+        }
+      }
     }
+  }
+
+  .footer {
+    width: 100%;
+    height: 95px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+
+    > div {
+      color: #ffffff;
+      height: 95px;
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 95px;
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>