2025年8月27日17:28:31
This commit is contained in:
17792275749
+1
-1
@@ -2,7 +2,7 @@ module.exports = {
|
||||
plugins: [
|
||||
require('postcss-pxtorem')({
|
||||
rootValue:({ file }) => {
|
||||
if (file.includes('userRanking') || file.includes('dietaryNutritionTips')) {
|
||||
if (file.includes('userRanking') || file.includes('dietaryNutritionTips') || file.includes('restaurantAndCafeteriaCombined')) {
|
||||
return 108;
|
||||
} else {
|
||||
return 192;
|
||||
|
||||
@@ -121,6 +121,33 @@ const routes = [
|
||||
},
|
||||
component: () => import('@/views/led/led.vue')
|
||||
},
|
||||
{
|
||||
path: '/restaurantAndCafeteriaCombined_canteen',
|
||||
name: 'restaurantAndCafeteriaCombined_canteen',
|
||||
meta: {
|
||||
title: '食堂 _ 排行榜',
|
||||
rootValue: 108
|
||||
},
|
||||
component: () => import('@/views/restaurantAndCafeteriaCombined/restaurantAndCafeteriaCombined_canteen.vue')
|
||||
},
|
||||
{
|
||||
path: '/restaurantAndCafeteriaCombined_restaurant',
|
||||
name: 'restaurantAndCafeteriaCombined_restaurant',
|
||||
meta: {
|
||||
title: '餐厅 _ 排行榜',
|
||||
rootValue: 108
|
||||
},
|
||||
component: () => import('@/views/restaurantAndCafeteriaCombined/restaurantAndCafeteriaCombined_restaurant.vue')
|
||||
},
|
||||
{
|
||||
path: '/restaurantAndCafeteriaCombined_weight',
|
||||
name: 'restaurantAndCafeteriaCombined_weight',
|
||||
meta: {
|
||||
title: '体重 _ 排行榜',
|
||||
rootValue: 108
|
||||
},
|
||||
component: () => import('@/views/restaurantAndCafeteriaCombined/restaurantAndCafeteriaCombined_weight.vue')
|
||||
},
|
||||
{
|
||||
path: '/:catchAll(.*)',
|
||||
redirect: '/dietaryNutritionTips1'
|
||||
@@ -133,6 +160,9 @@ const router = new VueRouter({
|
||||
routes
|
||||
});
|
||||
|
||||
// http://192.168.1.210/gateway/local/zhstapi/zhst/tv/rankingList?number=9
|
||||
// http://vip.shuziweidao.com/shuwei-zhct/swLargeScreenFood/rankingList?type=1
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.meta && to.meta.rootValue) {
|
||||
window.POSTCSS_PXTOREM_ROOT_VALUE = to.meta.rootValue;
|
||||
|
||||
@@ -0,0 +1,518 @@
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpRequest } from "@/XMLHttpRequest";
|
||||
import { getCurrentDate } from "@/utils/times";
|
||||
import signMd5Utils from "@/utils/signMd5";
|
||||
|
||||
export default {
|
||||
name: "dietaryNutritionTips",
|
||||
data() {
|
||||
return {
|
||||
rankingConfig: {
|
||||
personnelType: "department", // 员工：staff / 部门：department
|
||||
requestConfig: {
|
||||
agreement: "https",
|
||||
url: "yyjk.shuziweidao.com",
|
||||
suffix: "/gateway",
|
||||
urlPrefix: "/food/userRank",
|
||||
orgCode: "",
|
||||
canteenId: "1678234139391512577",
|
||||
pageSize: 0
|
||||
},
|
||||
},
|
||||
|
||||
dataConfig: {
|
||||
personnelType: "department", // 员工：staff / 部门：department
|
||||
currentDate: "",
|
||||
dinnerType: "",
|
||||
userNum: "-",
|
||||
list: [],
|
||||
},
|
||||
|
||||
scrollConfig: {
|
||||
scrollAnimationFrameId: null, // 用于存储 requestAnimationFrame 的 ID
|
||||
scrollSpeed: 2, // 滚动速度，每帧移动的像素数
|
||||
// 这里的 scrollWaitTime 将在 startOneTimeScroll 中动态决定
|
||||
// 1秒用于有数据且能滚动，5秒用于无数据或数据不足以滚动
|
||||
dynamicScrollWaitTime: 1 // 动态等待时间，默认为1秒
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
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;
|
||||
}
|
||||
let canteenId = this.$route.query.canteenId;
|
||||
if (canteenId) {
|
||||
this.rankingConfig.requestConfig.canteenId = Array.isArray(canteenId) ? canteenId[0] : canteenId;
|
||||
}
|
||||
this.loadDataUrl();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.stopAllLoops();
|
||||
},
|
||||
methods: {
|
||||
stopAllLoops() {
|
||||
if (this.scrollConfig.scrollAnimationFrameId) {
|
||||
cancelAnimationFrame(this.scrollConfig.scrollAnimationFrameId);
|
||||
this.scrollConfig.scrollAnimationFrameId = null;
|
||||
}
|
||||
// 清除可能存在的 setTimeout，避免重复请求
|
||||
if (this.rankingConfig.setTimeOutFun) {
|
||||
clearTimeout(this.rankingConfig.setTimeOutFun);
|
||||
this.rankingConfig.setTimeOutFun = null;
|
||||
}
|
||||
},
|
||||
|
||||
loadDataUrl() {
|
||||
let _this = this;
|
||||
_this.stopAllLoops(); // 在请求数据前，停止所有正在进行的循环
|
||||
|
||||
_this.dataConfig.currentDate = getCurrentDate();
|
||||
_this.rankingConfig.personnelType = _this.rankingConfig.personnelType === "staff" ? "department" : "staff";
|
||||
_this.rankingConfig.requestConfig.pageSize = _this.rankingConfig.personnelType === "staff" ? 50 : 100;
|
||||
|
||||
let serve = _this.rankingConfig.requestConfig.agreement + "://" + _this.rankingConfig.requestConfig.url;
|
||||
let requestUrl = serve + _this.rankingConfig.requestConfig.suffix + _this.rankingConfig.requestConfig.urlPrefix + (_this.rankingConfig.personnelType === "staff" ? "/getNutritionRankings" : "/getDepartRankings");
|
||||
|
||||
let params = {
|
||||
orgCode: _this.rankingConfig.requestConfig.orgCode,
|
||||
canteenId: _this.rankingConfig.requestConfig.canteenId,
|
||||
no: _this.rankingConfig.requestConfig.pageSize,
|
||||
};
|
||||
|
||||
httpRequest("GET", requestUrl, params, {
|
||||
'X-Sign': signMd5Utils.getSign(requestUrl, params),
|
||||
'X-TIMESTAMP': signMd5Utils.getDateTimeToString(requestUrl, params),
|
||||
}).then((res) => {
|
||||
_this.dataConfig.list = [];
|
||||
if (res.success && res.result) {
|
||||
_this.dataConfig.dinnerType = res.result.dinnerType ? res.result.dinnerType : "-";
|
||||
_this.dataConfig.userNum = res.result.userNum ? res.result.userNum : "-";
|
||||
|
||||
_this.dataConfig.personnelType = _this.rankingConfig.personnelType;
|
||||
let dataKey = _this.dataConfig.personnelType === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos';
|
||||
let list = res.result[dataKey];
|
||||
|
||||
if (list && list.length) {
|
||||
list.map(item => {
|
||||
if(item.departName === "行政事务管理处") {
|
||||
item.departName = "公共事务中心";
|
||||
}
|
||||
})
|
||||
_this.dataConfig.list = list;
|
||||
|
||||
_this.$nextTick(() => {
|
||||
_this.startOneTimeScroll();
|
||||
});
|
||||
} else {
|
||||
_this.startBannerLoop();
|
||||
}
|
||||
} else {
|
||||
_this.startBannerLoop();
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error("请求失败：", error);
|
||||
_this.dataConfig.list = [];
|
||||
_this.startBannerLoop();
|
||||
});
|
||||
},
|
||||
|
||||
startOneTimeScroll() {
|
||||
const container = this.$refs.scrollContentBody;
|
||||
if (!container) return;
|
||||
|
||||
const maxScrollTop = container.scrollHeight - container.clientHeight;
|
||||
|
||||
// 根据是否可滚动来设置动态等待时间
|
||||
if (maxScrollTop <= 0) {
|
||||
console.log('内容不足以滚动，等待 5 秒并请求下一批数据');
|
||||
this.scrollConfig.dynamicScrollWaitTime = 6; // 设置为5秒
|
||||
} else {
|
||||
console.log('内容可滚动，等待 1 秒并请求下一批数据');
|
||||
this.scrollConfig.dynamicScrollWaitTime = 6; // 设置为1秒
|
||||
}
|
||||
|
||||
console.log(this.scrollConfig.dynamicScrollWaitTime);
|
||||
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 {
|
||||
// 滚动完成后
|
||||
console.log(`列表滚动完成，等待 ${this.scrollConfig.dynamicScrollWaitTime} 秒并请求下一批数据`);
|
||||
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' || fullName.length === 0) {
|
||||
return '';
|
||||
}
|
||||
let len = fullName.length;
|
||||
if (len === 1) {
|
||||
return fullName;
|
||||
} else if (len === 2) {
|
||||
return fullName.charAt(0) + '*';
|
||||
} else {
|
||||
let firstChar = fullName.charAt(0);
|
||||
let lastChar = fullName.charAt(len - 1);
|
||||
let maskedPart = '*'.repeat(len - 2);
|
||||
return firstChar + maskedPart + lastChar;
|
||||
}
|
||||
},
|
||||
|
||||
startBannerLoop() {
|
||||
setTimeout(() => {
|
||||
this.stopAllLoops();
|
||||
this.loadDataUrl();
|
||||
}, 5000)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#dietaryNutritionTips {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 44px 40px 40px;
|
||||
box-sizing: border-box;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
background-image: url("@/assets/images/dietaryNutritionTips/bg.png");
|
||||
|
||||
.tips {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 96px;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 120px;
|
||||
height: 4px;
|
||||
background: linear-gradient(270deg, #ffc87c 0%, rgba(42, 199, 159, 0) 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #ffc87c;
|
||||
height: 36px;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
line-height: 36px;
|
||||
margin: 0 36px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
width: 120px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #ffc87c 0%, rgba(42, 199, 159, 0) 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 182px;
|
||||
position: fixed;
|
||||
top: 85px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 86px;
|
||||
height: 182px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url("@/assets/images/dietaryNutritionTips/l.png");
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
width: 720px;
|
||||
height: 136px;
|
||||
padding: 18px 30px 0;
|
||||
border-radius: 24px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(-90deg, #ffc77b 0%, #fff4e6 47%, #ffc879 100%);
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #8d0503;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #8d0503;
|
||||
height: 32px;
|
||||
font-size: 30px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #8d0503;
|
||||
height: 40px;
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
|
||||
> span {
|
||||
margin: 0 6px;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
width: 86px;
|
||||
height: 182px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url("@/assets/images/dietaryNutritionTips/r.png");
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
padding: 105px 24px 0;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #ffc548;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(225, 225, 225, 0) 0%,
|
||||
rgba(225, 225, 225, 0.3) 100%
|
||||
);
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+544
@@ -0,0 +1,544 @@
|
||||
<template>
|
||||
<div id="userRanking">
|
||||
<div class="ranking">
|
||||
<div class="dinersNumber">当餐用餐人数 {{ userNum }}</div>
|
||||
<div class="title"></div>
|
||||
<div class="average">
|
||||
<div>平均热量 <span>{{ energyAvg }}</span> 千卡</div>
|
||||
<div>平均得分 <span>{{ scoreAvg }}</span> 分</div>
|
||||
</div>
|
||||
<div class="topThree">
|
||||
<div class="topThree_1">
|
||||
<div class="two">
|
||||
<div class="avatar">
|
||||
<template v-if="topThree && topThree.length && topThree.length >= 2">
|
||||
<template v-if="topThree[1]['faceUrl']">
|
||||
<img :src="topThree[1]['faceUrl']" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<img src="@/assets/images/userRanking/2.png" />
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<img src="@/assets/images/userRanking/avatar.png" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="bg">
|
||||
<img src="@/assets/images/userRanking/two.png" alt="">
|
||||
</div>
|
||||
<div class="userName">
|
||||
<template v-if="topThree && topThree.length && topThree.length >= 2">
|
||||
{{ topThree[1]['name'] }}
|
||||
</template>
|
||||
<template v-else>虚位以待</template>
|
||||
</div>
|
||||
<div class="fraction">
|
||||
<template v-if="topThree && topThree.length && topThree.length >= 2">
|
||||
{{ topThree[1]['fraction'] }}
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="one">
|
||||
<div class="avatar">
|
||||
<template v-if="topThree && topThree.length">
|
||||
<template v-if="topThree[0]['faceUrl']">
|
||||
<img :src="topThree[0]['faceUrl']" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<img src="@/assets/images/userRanking/1.png" />
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<img src="@/assets/images/userRanking/avatar.png" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="bg">
|
||||
<img src="@/assets/images/userRanking/one.png" alt="">
|
||||
</div>
|
||||
<div class="userName">
|
||||
<template v-if="topThree && topThree.length">
|
||||
{{ topThree[0]['name'] }}
|
||||
</template>
|
||||
<template v-else>虚位以待</template>
|
||||
</div>
|
||||
<div class="fraction">
|
||||
<template v-if="topThree && topThree.length">
|
||||
{{ topThree[0]['fraction'] }}
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three">
|
||||
<div class="avatar">
|
||||
<template v-if="topThree && topThree.length && topThree.length >= 3">
|
||||
<template v-if="topThree[2]['faceUrl']">
|
||||
<img :src="topThree[2]['faceUrl']" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<img src="@/assets/images/userRanking/3.png" />
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<img src="@/assets/images/userRanking/avatar.png" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="bg">
|
||||
<img src="@/assets/images/userRanking/three.png" alt="">
|
||||
</div>
|
||||
<div class="userName">
|
||||
<template v-if="topThree && topThree.length && topThree.length >= 3">
|
||||
{{ topThree[2]['name'] }}
|
||||
</template>
|
||||
<template v-else>虚位以待</template>
|
||||
</div>
|
||||
<div class="fraction">
|
||||
<template v-if="topThree && topThree.length && topThree.length >= 3">
|
||||
{{ topThree[2]['fraction'] }}
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topThree_2">
|
||||
<div>排名</div>
|
||||
<div>用户</div>
|
||||
<div>热量</div>
|
||||
<div>营养得分</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<template v-if="list && list.length">
|
||||
<div>
|
||||
<ul class="listUl">
|
||||
<template v-for="(item, index) in list">
|
||||
<li class="listLi" :key="index">
|
||||
<div>{{ index + 4 }}</div>
|
||||
<div>
|
||||
<template v-if="item['faceUrl']">
|
||||
<img :src="item['faceUrl']" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<img :src="require('@/assets/images/userRanking/' + (index + 1) + '.png')">
|
||||
</template>
|
||||
</div>
|
||||
<div>{{ item['name'] }}</div>
|
||||
<div>{{ item['energy'] }} kcal</div>
|
||||
<div>{{ item['fraction'] }}</div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="noData">- 暂无排行数据 -</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpRequest} from "@/XMLHttpRequest";
|
||||
import {token} from "@/utils/token";
|
||||
|
||||
export default {
|
||||
name: "restaurant",
|
||||
data() {
|
||||
return {
|
||||
requestConfig: {
|
||||
agreement: "https",
|
||||
url: "vip.shuziweidao.com/",
|
||||
suffix: "",
|
||||
urlPrefix: "/shuwei-zhct/swLargeScreenFood/rankingList",
|
||||
},
|
||||
|
||||
setTimeoutParams: {
|
||||
fun: null,
|
||||
times: 5
|
||||
},
|
||||
|
||||
userNum: 0,
|
||||
energyAvg: 0,
|
||||
scoreAvg: 0,
|
||||
|
||||
topThree: [],
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.stopAllLoops();
|
||||
},
|
||||
methods: {
|
||||
stopAllLoops() {
|
||||
if (this.setTimeoutParams.fun) {
|
||||
clearTimeout(this.setTimeoutParams.fun);
|
||||
this.setTimeoutParams.fun = null;
|
||||
}
|
||||
},
|
||||
|
||||
setTimePlay() {
|
||||
let times = this.setTimeoutParams.times * 1000;
|
||||
let this_ = this;
|
||||
this.setTimeoutParams.fun = setTimeout(function () {
|
||||
this_.loadData();
|
||||
}, times);
|
||||
},
|
||||
|
||||
loadData() {
|
||||
let this_ = this;
|
||||
this_.stopAllLoops();
|
||||
let params = {
|
||||
type: 1,
|
||||
number: 9
|
||||
};
|
||||
|
||||
let serve = this_.requestConfig.agreement + "://" + this_.requestConfig.url;
|
||||
let requestUrl = serve + this_.requestConfig.suffix + this_.requestConfig.urlPrefix;
|
||||
httpRequest('GET', requestUrl, params, {
|
||||
Authorization: token
|
||||
}).then(function(res) {
|
||||
if (res.success) {
|
||||
this_.userNum = res.data.num;
|
||||
this_.energyAvg = res.data.aveEnergy;
|
||||
this_.scoreAvg = res.data.aveFraction;
|
||||
if (res.data.sortVos && res.data.sortVos.length) {
|
||||
let topThreeNum = res.data.sortVos.length >= 3 ? 3 : res.data.sortVos.length;
|
||||
this_.topThree = res.data.sortVos.slice(0, topThreeNum);
|
||||
|
||||
let litNum = res.data.sortVos.length - 3;
|
||||
if (litNum && litNum > 0) {
|
||||
this_.list = res.data.sortVos.slice(3, res.data.sortVos.length);
|
||||
}
|
||||
} else {
|
||||
this_.topThree = [];
|
||||
this_.list = [];
|
||||
}
|
||||
|
||||
this_.setTimePlay();
|
||||
} else {
|
||||
console.error(res.message);
|
||||
this_.setTimePlay();
|
||||
}
|
||||
}).catch(function(error) {
|
||||
this_.setTimePlay();
|
||||
console.error('GET request error:', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#userRanking {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #810A11;
|
||||
|
||||
.ranking {
|
||||
width: 100%;
|
||||
height: 1070px;
|
||||
padding: 104px 48px 0;
|
||||
box-sizing: border-box;
|
||||
background-size: contain;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("@/assets/images/userRanking/topThree.jpg");
|
||||
|
||||
.dinersNumber {
|
||||
color: #FCE9CD;
|
||||
width: 550px;
|
||||
height: 90px;
|
||||
line-height: 90px;
|
||||
text-align: center;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
margin: 0 auto 60px;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("@/assets/images/userRanking/dinersNumber.png");
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 874px;
|
||||
height: 124px;
|
||||
margin: 0 auto 32px;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("@/assets/images/userRanking/title.png");
|
||||
}
|
||||
|
||||
.average {
|
||||
width: 874px;
|
||||
height: 48px;
|
||||
margin: 0 auto 65px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
|
||||
> div {
|
||||
color: #FFF0C8;
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
font-size: 36px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
|
||||
> span {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topThree {
|
||||
width: 100%;
|
||||
|
||||
.topThree_1 {
|
||||
width: 100%;
|
||||
height: 465px;
|
||||
padding: 0 16px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
box-sizing: border-box;
|
||||
|
||||
.one {
|
||||
width: 392px;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 265px;
|
||||
margin: auto;
|
||||
width: 190px;
|
||||
height: 190px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.userName {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 133px;
|
||||
color: #5D3C31;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fraction {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 73px;
|
||||
color: #D23C32;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.two,
|
||||
.three {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 192px;
|
||||
margin: auto;
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
top: 143px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.userName {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 100px;
|
||||
color: #5D3C31;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fraction {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 38px;
|
||||
color: #D23C32;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topThree_2 {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 0 48px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
background: linear-gradient(0deg, #DFB379, #EDD1AC);
|
||||
|
||||
> div {
|
||||
color: #5D3C31;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
width: 130px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
height: calc(100% - 1070px);
|
||||
padding: 55px 96px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.listUl {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
|
||||
.listLi {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
padding: 15px 0;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #E34E3D;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
margin-right: 48px;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("@/assets/images/userRanking/rankingIcon.png");
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
margin-right: 48px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
color: #FDE6C0;
|
||||
flex: 1;
|
||||
width: 0;
|
||||
height: 90px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(4) {
|
||||
color: #FDE6C0;
|
||||
width: 200px;
|
||||
height: 90px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(5) {
|
||||
color: #FDE6C0;
|
||||
width: 130px;
|
||||
height: 90px;
|
||||
text-align: right;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
line-height: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.noData {
|
||||
padding-top: 200px;
|
||||
color: #ffffff;
|
||||
font-size: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,523 @@
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpRequest } from "@/XMLHttpRequest";
|
||||
|
||||
export default {
|
||||
name: "dietaryNutritionTips",
|
||||
data() {
|
||||
return {
|
||||
rankingConfig: {
|
||||
personnelType: "department", // 员工：staff / 部门：department
|
||||
requestConfig: {
|
||||
agreement: "https",
|
||||
url: "health-api.tzgl.shuziweidao.com",
|
||||
suffix: "",
|
||||
urlPrefix: "/health-intervene/api/anon",
|
||||
orgCode: ""
|
||||
},
|
||||
},
|
||||
|
||||
dataConfig: {
|
||||
personnelType: "department", // 员工：staff / 部门：department
|
||||
currentDate: "",
|
||||
doingDay: "",
|
||||
list: [],
|
||||
},
|
||||
|
||||
scrollConfig: {
|
||||
scrollAnimationFrameId: null, // 用于存储 requestAnimationFrame 的 ID
|
||||
scrollSpeed: 2, // 滚动速度，每帧移动的像素数
|
||||
// 这里的 scrollWaitTime 将在 startOneTimeScroll 中动态决定
|
||||
// 1秒用于有数据且能滚动，5秒用于无数据或数据不足以滚动
|
||||
dynamicScrollWaitTime: 1 // 动态等待时间，默认为1秒
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
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;
|
||||
}
|
||||
this.load();
|
||||
this.dailyTaskScheduler();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.stopAllLoops();
|
||||
},
|
||||
methods: {
|
||||
dailyTaskScheduler() {
|
||||
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
|
||||
const now = new Date();
|
||||
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();
|
||||
const hours = now.getHours();
|
||||
const minutes = now.getMinutes();
|
||||
const seconds = now.getSeconds();
|
||||
this.dataConfig.currentDate = year + "年" + month + "月" + day + "日 " + weekDays[week];
|
||||
|
||||
if (hours === 23 && minutes === 59 && seconds === 50) {
|
||||
sessionStorage.removeItem('staff');
|
||||
sessionStorage.removeItem('department');
|
||||
}
|
||||
|
||||
if (hours === 0 && minutes === 0 && seconds === 10) {
|
||||
this.load();
|
||||
}
|
||||
|
||||
setTimeout(this.dailyTaskScheduler, 1000);
|
||||
},
|
||||
|
||||
|
||||
stopAllLoops() {
|
||||
if (this.scrollConfig.scrollAnimationFrameId) {
|
||||
cancelAnimationFrame(this.scrollConfig.scrollAnimationFrameId);
|
||||
this.scrollConfig.scrollAnimationFrameId = null;
|
||||
}
|
||||
// 清除可能存在的 setTimeout，避免重复请求
|
||||
if (this.rankingConfig.setTimeOutFun) {
|
||||
clearTimeout(this.rankingConfig.setTimeOutFun);
|
||||
this.rankingConfig.setTimeOutFun = null;
|
||||
}
|
||||
},
|
||||
|
||||
orgCodeRequest(requestUrl) {
|
||||
return new Promise((resolve, reject) => {
|
||||
httpRequest("POST", requestUrl, {}, {}).then((res) => {
|
||||
this.dataConfig.doingDay = res.result.doingDay;
|
||||
|
||||
resolve(res.result.rankList);
|
||||
}).catch(() => {
|
||||
reject();
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
load() {
|
||||
let _this = this;
|
||||
_this.rankingConfig.personnelType = _this.rankingConfig.personnelType === "staff" ? "department" : "staff";
|
||||
let data = sessionStorage.getItem(_this.rankingConfig.personnelType) || null;
|
||||
if(data) {
|
||||
let dataLength = JSON.parse(data);
|
||||
if(dataLength && dataLength.length) {
|
||||
_this.dataConfig.personnelType = _this.rankingConfig.personnelType;
|
||||
_this.dataConfig.list = JSON.parse(data);
|
||||
_this.$nextTick(() => {
|
||||
_this.startOneTimeScroll();
|
||||
});
|
||||
} else {
|
||||
_this.loadDataUrl();
|
||||
}
|
||||
} else {
|
||||
_this.loadDataUrl();
|
||||
}
|
||||
},
|
||||
|
||||
loadDataUrl() {
|
||||
let _this = this;
|
||||
let serve = _this.rankingConfig.requestConfig.agreement + "://" + _this.rankingConfig.requestConfig.url + _this.rankingConfig.requestConfig.suffix + _this.rankingConfig.requestConfig.urlPrefix;
|
||||
let url = serve + (_this.rankingConfig.personnelType === "staff" ? "/userRank" : "/deptRank") + "?pageNo=1&pageSize=" + (_this.rankingConfig.personnelType === "staff" ? "300" : "100") + "&orgCode=";
|
||||
Promise.all([
|
||||
_this.orgCodeRequest(url + "A01A37"),
|
||||
]).then((res) => {
|
||||
_this.dataConfig.personnelType = _this.rankingConfig.personnelType;
|
||||
let data = res[0];
|
||||
sessionStorage.setItem(_this.rankingConfig.personnelType, JSON.stringify(data));
|
||||
if (data && data.length) {
|
||||
_this.dataConfig.list = data;
|
||||
_this.$nextTick(() => {
|
||||
_this.startOneTimeScroll();
|
||||
});
|
||||
} else {
|
||||
_this.startBannerLoop();
|
||||
}
|
||||
}).catch((error) => {
|
||||
_this.dataConfig.list = [];
|
||||
_this.startBannerLoop();
|
||||
})
|
||||
},
|
||||
|
||||
startOneTimeScroll() {
|
||||
const container = this.$refs.scrollContentBody;
|
||||
if (!container) return;
|
||||
|
||||
const maxScrollTop = container.scrollHeight - container.clientHeight;
|
||||
|
||||
// 根据是否可滚动来设置动态等待时间
|
||||
if (maxScrollTop <= 0) {
|
||||
console.log('内容不足以滚动，等待 5 秒并请求下一批数据');
|
||||
this.scrollConfig.dynamicScrollWaitTime = 6; // 设置为5秒
|
||||
} else {
|
||||
console.log('内容可滚动，等待 1 秒并请求下一批数据');
|
||||
this.scrollConfig.dynamicScrollWaitTime = 6; // 设置为1秒
|
||||
}
|
||||
|
||||
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 {
|
||||
// 滚动完成后
|
||||
console.log(`列表滚动完成，等待 ${this.scrollConfig.dynamicScrollWaitTime} 秒并请求下一批数据`);
|
||||
this.scrollConfig.scrollAnimationFrameId = null;
|
||||
this.rankingConfig.setTimeOutFun = setTimeout(() => {
|
||||
this.load();
|
||||
}, this.scrollConfig.dynamicScrollWaitTime * 1000);
|
||||
}
|
||||
};
|
||||
|
||||
this.scrollConfig.scrollAnimationFrameId = requestAnimationFrame(animateScroll);
|
||||
},
|
||||
|
||||
startBannerLoop() {
|
||||
setTimeout(() => {
|
||||
this.stopAllLoops();
|
||||
this.load();
|
||||
}, 5000)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#dietaryNutritionTips {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 44px 40px 40px;
|
||||
box-sizing: border-box;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
background-image: url("@/assets/images/dietaryNutritionTips/bg.png");
|
||||
|
||||
|
||||
.tips {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 96px;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 120px;
|
||||
height: 4px;
|
||||
background: linear-gradient(270deg, #ffc87c 0%, rgba(42, 199, 159, 0) 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #ffc87c;
|
||||
height: 36px;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
line-height: 36px;
|
||||
margin: 0 36px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
width: 120px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #ffc87c 0%, rgba(42, 199, 159, 0) 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 182px;
|
||||
position: fixed;
|
||||
top: 85px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 86px;
|
||||
height: 182px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url("@/assets/images/dietaryNutritionTips/l.png");
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
width: 720px;
|
||||
height: 136px;
|
||||
padding: 18px 30px 0;
|
||||
border-radius: 24px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(-90deg, #ffc77b 0%, #fff4e6 47%, #ffc879 100%);
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #8d0503;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #8d0503;
|
||||
height: 32px;
|
||||
font-size: 30px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #8d0503;
|
||||
height: 40px;
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
|
||||
> span {
|
||||
margin: 0 6px;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
width: 86px;
|
||||
height: 182px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url("@/assets/images/dietaryNutritionTips/r.png");
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
padding: 105px 24px 0;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #ffc548;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(225, 225, 225, 0) 0%,
|
||||
rgba(225, 225, 225, 0.3) 100%
|
||||
);
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user