兼容老版本的浏览器
This commit is contained in:
17792275749
@@ -0,0 +1,601 @@
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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;
|
||||
},
|
||||
|
||||
// 极限规避：时间管理与凌晨 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 = ("0" + (now.getMonth() + 1)).slice(-2);
|
||||
const day = ("0" + now.getDate()).slice(-2);
|
||||
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 Object.assign({}, 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;
|
||||
let newItem = Object.assign({}, item);
|
||||
newItem.rank = currentRank;
|
||||
return newItem;
|
||||
}).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: 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%);
|
||||
|
||||
.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: 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>
|
||||
@@ -0,0 +1,553 @@
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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;
|
||||
},
|
||||
|
||||
// 极限规避：凌晨 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);
|
||||
}
|
||||
}
|
||||
};
|
||||
</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: 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%
|
||||
);
|
||||
|
||||
.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: 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>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user