2025年6月27日11:20:43
This commit is contained in:
17792275749
@@ -0,0 +1,410 @@
|
||||
<template>
|
||||
<div id="dietaryNutritionTips">
|
||||
<div class="tips">
|
||||
<div></div>
|
||||
<div>温馨提示</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<div></div>
|
||||
<div>
|
||||
<div>体重管理行动（{{ personnelType === 'staff' ? '员工' : '部门'}}）</div>
|
||||
<div>{{ currentData }}</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="contentHeader">
|
||||
<div>序号</div>
|
||||
<div>单位(部门)</div>
|
||||
<div>
|
||||
<template v-if="personnelType === 'staff'">姓名</template>
|
||||
<template v-else>用餐人数</template>
|
||||
</div>
|
||||
<div>
|
||||
<template v-if="personnelType === 'staff'">营养得分</template>
|
||||
<template v-else>人均营养评分</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentSection">
|
||||
<template v-if="list && list.length">
|
||||
<template v-for="(item, index) in list">
|
||||
<div :class="['contentSectionLst', personnelType]">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div>{{ item.departName }}</div>
|
||||
<div>{{ personnelType === 'staff' ? maskUserName(item.userName) : item.userCount }}</div>
|
||||
<div>{{ personnelType === 'staff' ? item.fraction : item.avgFraction}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</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 {
|
||||
setTimeoutParams: {
|
||||
status: true,
|
||||
times: 15
|
||||
},
|
||||
|
||||
requestConfig: {
|
||||
agreement: "http",
|
||||
url: "192.168.10.6",
|
||||
suffix: "gateway"
|
||||
},
|
||||
personnelType: "department", // 员工：staff / 部门：department
|
||||
|
||||
|
||||
currentData: "",
|
||||
list: [],
|
||||
timerId: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let agreement = this.$route.query.agreement;
|
||||
if(agreement) {
|
||||
this.requestConfig.agreement = agreement;
|
||||
}
|
||||
let url = this.$route.query.url;
|
||||
if(url) {
|
||||
this.requestConfig.url = url;
|
||||
}
|
||||
let suffix = this.$route.query.suffix;
|
||||
if(suffix) {
|
||||
this.requestConfig.suffix = suffix;
|
||||
}
|
||||
this.loadDataUrl();
|
||||
},
|
||||
methods: {
|
||||
loadDataUrl() {
|
||||
this.currentData = getCurrentDate();
|
||||
this.personnelType = this.personnelType === "staff" ? "department" : "staff";
|
||||
let url = this.personnelType === "staff" ? "/getNutritionRankings" : "/getDepartRankings";
|
||||
this.loadData(url);
|
||||
},
|
||||
|
||||
loadData(u) {
|
||||
let this_ = this;
|
||||
let url = this.requestConfig.agreement + '://'+ this.requestConfig.url +'/'+ this.requestConfig.suffix +'local/food/userRank' + u;
|
||||
|
||||
if (this_.isRequesting) {
|
||||
console.warn('请求正在进行中，跳过本次调用。');
|
||||
return;
|
||||
}
|
||||
this_.isRequesting = true;
|
||||
|
||||
let params = {
|
||||
no: this.personnelType === "staff" ? 15 : 10
|
||||
};
|
||||
httpRequest('GET', url, params, {
|
||||
'X-Sign': signMd5Utils.getSign(url, params),
|
||||
'X-TIMESTAMP': signMd5Utils.getDateTimeToString(url, params),
|
||||
}).then(function(res) {
|
||||
if (res.success) {
|
||||
if(this_.personnelType === "department") {
|
||||
res.result.map(item => {
|
||||
if(item.userCount && item.avgStepCount) {
|
||||
item.avgStepCount = (item.avgStepCount / item.userCount).toFixed(0);
|
||||
}
|
||||
})
|
||||
}
|
||||
this_.list = res.result && res.result.length ? res.result : [];
|
||||
}
|
||||
|
||||
}).catch(function() {
|
||||
this_.list = [];
|
||||
}).finally(() => {
|
||||
this_.isRequesting = false;
|
||||
|
||||
if (this_.setTimeoutParams.status) {
|
||||
if (this_.timerId) {
|
||||
clearTimeout(this_.timerId);
|
||||
}
|
||||
this_.timerId = setTimeout(() => {
|
||||
this_.loadDataUrl();
|
||||
this_.timerId = null;
|
||||
}, this_.setTimeoutParams.times * 1000);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
maskUserName(fullName) {
|
||||
if (!fullName || typeof fullName !== 'string' || fullName.length === 0) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const len = fullName.length;
|
||||
|
||||
if (len === 1) {
|
||||
return fullName;
|
||||
} else if (len === 2) {
|
||||
return fullName.charAt(0) + '*';
|
||||
} else {
|
||||
const firstChar = fullName.charAt(0);
|
||||
const lastChar = fullName.charAt(len - 1);
|
||||
const maskedPart = '*'.repeat(len - 2);
|
||||
return firstChar + maskedPart + lastChar;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#dietaryNutritionTips {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 44px 40px 45px;
|
||||
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-top: 18px;
|
||||
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: 20px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #8D0503;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
> 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%;
|
||||
height: calc(100% - 132px);
|
||||
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;
|
||||
margin-bottom: 60px;
|
||||
border-radius: 16px;
|
||||
background-color: #7E0B08;
|
||||
|
||||
> div {
|
||||
color: #FFC87C;
|
||||
height: 82px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
line-height: 82px;
|
||||
text-align: center;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
&:nth-of-type(5) {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentSection {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: calc(100% - 142px);
|
||||
|
||||
.contentSectionLst {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&.staff {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
&.department {
|
||||
margin-bottom: 106px;
|
||||
}
|
||||
|
||||
> div {
|
||||
color: #FFFFFF;
|
||||
height: 40px;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
width: 180px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
&:nth-of-type(5) {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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