2025年6月9日10:23:02
This commit is contained in:
17792275749
@@ -0,0 +1,3 @@
|
||||
import { getRequest } from '@/axios';
|
||||
|
||||
export const list = (params) => getRequest('ctRequest', '/shuwei-zhct/swLargeScreenFood/rankingList', params);
|
||||
@@ -0,0 +1,495 @@
|
||||
<template>
|
||||
<div id="dataBoard">
|
||||
<div class="title"></div>
|
||||
<div class="times">
|
||||
<div>{{ currentDate }}</div>
|
||||
<div>
|
||||
{{ city }}
|
||||
<template v-if="weathersIcon">
|
||||
<img :src="weathersIcon" :alt="weathersIcon">
|
||||
</template>
|
||||
{{ weathers }}℃
|
||||
</div>
|
||||
</div>
|
||||
<div class="total">
|
||||
<div>
|
||||
<div>
|
||||
<countTo
|
||||
:startVal="dataBoard.num_ ? dataBoard.num_ : 0"
|
||||
:endVal="dataBoard.num"
|
||||
separator=""
|
||||
:duration="1500"
|
||||
@count-to-finish="handleFinish('num')" />
|
||||
<p>人</p>
|
||||
</div>
|
||||
<div>当餐用餐人数</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<countTo
|
||||
:startVal="dataBoard.aveEnergy_ ? dataBoard.aveEnergy_ : 0"
|
||||
:endVal="dataBoard.aveEnergy"
|
||||
separator=""
|
||||
:duration="1500"
|
||||
@count-to-finish="handleFinish('aveEnergy')" />
|
||||
<p>千卡</p>
|
||||
</div>
|
||||
<div>人均热量</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<countTo
|
||||
:startVal="dataBoard.aveFraction_ ? dataBoard.aveFraction_ : 0"
|
||||
:endVal="dataBoard.aveFraction"
|
||||
separator=""
|
||||
:duration="1500"
|
||||
@count-to-finish="handleFinish('aveFraction')" />
|
||||
<p>分</p>
|
||||
</div>
|
||||
<div>人均营养分</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="contentHead">
|
||||
<div>排名</div>
|
||||
<div>餐盘号</div>
|
||||
<div>
|
||||
得分
|
||||
<template v-if="type === 1">
|
||||
<img src="@/assets/images/dataBoard/down.png" />
|
||||
</template>
|
||||
</div>
|
||||
<div>热量 (kcal)</div>
|
||||
<div>
|
||||
时间
|
||||
<template v-if="type === 2">
|
||||
<img src="@/assets/images/dataBoard/down.png" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentBody">
|
||||
<template v-if="dataBoard.sortVos && dataBoard.sortVos.length">
|
||||
<template v-for="(item, index) in dataBoard.sortVos">
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div>
|
||||
<template v-if="index < 3">
|
||||
<img :src="require('@/assets/images/dataBoard/' + (index + 1) + '.png')" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<img src="@/assets/images/dataBoard/4.png">
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<template v-if="item.faceUrl">
|
||||
<img :src="item.faceUrl" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<img src="@/assets/images/dataBoard/user.png" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div>{{ item.plateNumber }}</div>
|
||||
<div :class="type === 1 ? 'typeActive' : ''">{{ item.fraction }}</div>
|
||||
<div>{{ item.energy }}</div>
|
||||
<div :class="type === 2 ? 'typeActive' : ''">{{ item.time }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subtitle">数味智餐</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import countTo from "vue-count-to";
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
import {getCurrentDate} from "@/utils/times";
|
||||
import {weatherList} from "@/utils/weather";
|
||||
import {list} from "./api";
|
||||
|
||||
export default {
|
||||
name: "dataBoard",
|
||||
components: {
|
||||
countTo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentDate: getCurrentDate(),
|
||||
city: '',
|
||||
weathersIcon: '',
|
||||
weathers: '',
|
||||
|
||||
setTimeoutParams: {
|
||||
status: true,
|
||||
times: 10
|
||||
},
|
||||
type: 1,
|
||||
dataBoard: {
|
||||
num: 0,
|
||||
aveEnergy: 0,
|
||||
aveFraction: 0,
|
||||
sortVos: []
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initAMap();
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
initAMap() {
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: "eda729515c8d2c3fe5981f0a1616ff40",
|
||||
};
|
||||
AMapLoader.load({
|
||||
key: "a9c8316986c542c6624a7343712d2d18",
|
||||
version: "2.0",
|
||||
plugins: ["AMap.CitySearch","AMap.Geolocation", "AMap.Weather"],
|
||||
resizeEnable: true,
|
||||
}).then((AMap) => {
|
||||
new AMap.CitySearch().getLocalCity((status, result) => {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
this.city = result.city;
|
||||
new AMap.Weather().getLive(result.city, (err, data) => {
|
||||
if(!err && data.info === 'OK') {
|
||||
weatherList.map(item => {
|
||||
if(data.weather === item.name) {
|
||||
this.weathersIcon = item.url;
|
||||
}
|
||||
});
|
||||
this.weathers = data.temperature;
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}).catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
|
||||
handleFinish(k) {
|
||||
let newKey = k + '_';
|
||||
this.dataBoard[newKey] = this.dataBoard[k];
|
||||
},
|
||||
|
||||
setTimePlay() {
|
||||
let times = this.setTimeoutParams.times * 1000;
|
||||
setTimeout(() => {
|
||||
this.type = this.type === 1 ? 2 : 1;
|
||||
this.loadData();
|
||||
}, times);
|
||||
},
|
||||
|
||||
loadData() {
|
||||
let params = {
|
||||
type: this.type
|
||||
};
|
||||
list(params).then(res => {
|
||||
if (res.success) {
|
||||
this.dataBoard.num = res.data.num;
|
||||
this.dataBoard.aveEnergy = res.data.aveEnergy;
|
||||
this.dataBoard.aveFraction = res.data.aveFraction;
|
||||
this.dataBoard.sortVos = res.data.sortVos.slice(0, 9);
|
||||
}
|
||||
|
||||
if (this.setTimeoutParams.status) {
|
||||
this.setTimePlay();
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#dataBoard {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #060F1E;
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("@/assets/images/dataBoard/bg.png");
|
||||
|
||||
.title {
|
||||
width: 506px;
|
||||
height: 48px;
|
||||
margin: 12px auto 18px;
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("@/assets/images/dataBoard/title.png");
|
||||
}
|
||||
|
||||
.times {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-bottom: 3px;
|
||||
padding: 0 120px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
> div {
|
||||
color: #8CCAFF;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
width: 840px;
|
||||
height: 85px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto 16px;
|
||||
padding: 0 93px 0 100px;
|
||||
box-sizing: border-box;
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("@/assets/images/dataBoard/total.png");
|
||||
|
||||
> div {
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #FFB99C;
|
||||
height: 36px;
|
||||
font-size: 36px;
|
||||
line-height: 36px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
> p {
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #8CCAFF;
|
||||
height: 18px;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 820px;
|
||||
padding: 0 202px 0 258px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.contentHead {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-left: 100px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
background-color: #2D4374;
|
||||
box-shadow: 0 3px 12px 0 rgba(11,26,56,0.44);
|
||||
|
||||
> div {
|
||||
color: #8CCAFF;
|
||||
height: 60px;
|
||||
font-size: 24px;
|
||||
line-height: 60px;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
width: 290px;
|
||||
text-align: center;
|
||||
margin-right: 145px;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
width: 195px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
width: 290px;
|
||||
text-align: center;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
&:nth-of-type(5) {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentBody {
|
||||
width: 100%;
|
||||
padding: 24px 50px 0 100px;
|
||||
box-sizing: border-box;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 170px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: relative;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 38px;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #8CCAFF;
|
||||
width: 290px;
|
||||
height: 60px;
|
||||
font-size: 36px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
color: #8CCAFF;
|
||||
width: 340px;
|
||||
height: 60px;
|
||||
font-size: 36px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> div:nth-of-type(4) {
|
||||
color: #8CCAFF;
|
||||
width: 290px;
|
||||
height: 60px;
|
||||
font-size: 36px;
|
||||
line-height: 60px;
|
||||
text-align: right;
|
||||
padding-right: 115px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
> div:nth-of-type(5) {
|
||||
flex: 1;
|
||||
color: #8CCAFF;
|
||||
height: 60px;
|
||||
font-size: 36px;
|
||||
line-height: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:nth-of-type(n + 4) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) {
|
||||
color: #717B86 !important;
|
||||
line-height: 50px !important;
|
||||
}
|
||||
|
||||
.typeActive {
|
||||
color: #FFB99C !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #8CCAFF;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,526 @@
|
||||
<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">
|
||||
<template v-if="personnelType === 'staff'">
|
||||
<div class="staff">
|
||||
<div class="staffHeader">
|
||||
<div>序号</div>
|
||||
<div>单位(部门)</div>
|
||||
<div>姓名</div>
|
||||
<div>体重管理得分</div>
|
||||
</div>
|
||||
<div class="staffContent">
|
||||
<template v-if="list && list.length">
|
||||
<template v-for="item in list">
|
||||
<div class="staffContentList" :key="item.rank + item.departName + item.realName">
|
||||
<div>{{ item.rank }}</div>
|
||||
<div>{{ item.departName }}</div>
|
||||
<div>{{ item.realName }}</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="nullData">
|
||||
<div></div>
|
||||
<div>~ 暂无体重管理信息 ~</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="personnelType === 'department'">
|
||||
<div class="department">
|
||||
<div class="departmentHeader">
|
||||
<div>序号</div>
|
||||
<div>单位(部门)</div>
|
||||
<div>人均体重管理得分</div>
|
||||
</div>
|
||||
<div class="departmentContent">
|
||||
<template v-if="list && list.length">
|
||||
<template v-for="item in list">
|
||||
<div class="departmentContentList" :key="item.rank + item.orgName">
|
||||
<div>{{ item.rank }}</div>
|
||||
<div>{{ item.orgName }}</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="nullData">
|
||||
<div></div>
|
||||
<div>~ 暂无体重管理信息 ~</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpRequest} from "@/XMLHttpRequest";
|
||||
import {getCurrentDate} from "@/utils/times";
|
||||
|
||||
export default {
|
||||
name: "dietaryNutritionTips",
|
||||
data() {
|
||||
return {
|
||||
setTimeoutParams: {
|
||||
status: true,
|
||||
times: 10
|
||||
},
|
||||
|
||||
requestConfig: {
|
||||
agreement: "https",
|
||||
url: "api.cqygjk.com",
|
||||
orgCode: "A01A86"
|
||||
},
|
||||
personnelType: "department", // 员工：staff / 部门：department
|
||||
|
||||
currentPage: 1,
|
||||
totalCount: 0,
|
||||
pageSize: 0,
|
||||
maxPagesToLoad: 0,
|
||||
|
||||
currentData: "",
|
||||
list: [],
|
||||
timerId: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let url = this.$route.query.url;
|
||||
if(url) {
|
||||
this.requestConfig.url = url;
|
||||
}
|
||||
let code = this.$route.query.orgCode;
|
||||
if(code) {
|
||||
this.requestConfig.orgCode = code;
|
||||
}
|
||||
this.currentData = getCurrentDate();
|
||||
this.startSequentialLoading();
|
||||
},
|
||||
methods: {
|
||||
pageTimerCallback() {
|
||||
this.currentData = getCurrentDate();
|
||||
const hasMoreToLoadInCurrentType = this.currentPage < this.maxPagesToLoad;
|
||||
const hasMoreOnServer = (this.currentPage * this.pageSize) < this.totalCount;
|
||||
if (hasMoreToLoadInCurrentType && hasMoreOnServer) {
|
||||
this.currentPage++;
|
||||
this.loadDataSequential();
|
||||
} else {
|
||||
this.personnelType = this.personnelType === "staff" ? "department" : "staff";
|
||||
this.startSequentialLoading();
|
||||
}
|
||||
},
|
||||
|
||||
// 启动或重置顺序加载流程
|
||||
startSequentialLoading() {
|
||||
this.list = [];
|
||||
this.currentPage = 1;
|
||||
this.totalCount = 0;
|
||||
|
||||
if (this.personnelType === "staff") {
|
||||
this.pageSize = 15;
|
||||
this.maxPagesToLoad = 3;
|
||||
} else {
|
||||
this.pageSize = 10;
|
||||
this.maxPagesToLoad = 1;
|
||||
}
|
||||
this.loadDataSequential();
|
||||
},
|
||||
|
||||
loadDataSequential() {
|
||||
let this_ = this;
|
||||
let urlPrefix = '/health-intervene/api/anon';
|
||||
let apiUrl = '';
|
||||
|
||||
if (this_.personnelType === "staff") {
|
||||
apiUrl = urlPrefix + '/userRank';
|
||||
} else {
|
||||
apiUrl = urlPrefix + '/deptRank';
|
||||
}
|
||||
|
||||
let url = this_.requestConfig.agreement + '://' + this_.requestConfig.url + apiUrl + '?orgCode=' + this_.requestConfig.orgCode + '&pageNo=' + this_.currentPage + '&pageSize=' + this_.pageSize;
|
||||
|
||||
if (this_.isRequesting) {
|
||||
console.warn('请求正在进行中，跳过本次调用。');
|
||||
return;
|
||||
}
|
||||
this_.isRequesting = true;
|
||||
|
||||
httpRequest('POST', url, {}, {}).then(function(res) {
|
||||
if (res.success && res.result && res.result.rankList) {
|
||||
this_.list = res.result.rankList;
|
||||
if (this_.currentPage === 1) {
|
||||
this_.totalCount = this_.personnelType === "staff" ? (res.result.joinNum || 0) : (res.result.joinDept || 0);
|
||||
}
|
||||
} else {
|
||||
this_.list = [];
|
||||
}
|
||||
}).catch(function() {
|
||||
this_.list = [];
|
||||
}).finally(() => {
|
||||
this_.isRequesting = false;
|
||||
|
||||
if (this_.setTimeoutParams.status) {
|
||||
if (this_.timerId) {
|
||||
clearTimeout(this_.timerId);
|
||||
}
|
||||
this_.timerId = setTimeout(() => {
|
||||
this_.pageTimerCallback();
|
||||
this_.timerId = null;
|
||||
}, this_.setTimeoutParams.times * 1000);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timerId) {
|
||||
clearTimeout(this.timerId);
|
||||
this.timerId = null;
|
||||
}
|
||||
},
|
||||
}
|
||||
</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%);
|
||||
|
||||
.staff {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.staffHeader {
|
||||
width: 100%;
|
||||
height: 82px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 60px;
|
||||
border-radius: 16px;
|
||||
background-color: #7E0B08;
|
||||
|
||||
> div {
|
||||
color: #FFC87C;
|
||||
height: 82px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
line-height: 82px;
|
||||
text-align: center;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
width: 85px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
width: 120px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.staffContent {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: calc(100% - 142px);
|
||||
|
||||
.staffContentList {
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
width: 120px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.department {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.departmentHeader {
|
||||
width: 100%;
|
||||
height: 82px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 60px;
|
||||
border-radius: 16px;
|
||||
background-color: #7E0B08;
|
||||
|
||||
> div {
|
||||
color: #FFC87C;
|
||||
height: 82px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
line-height: 82px;
|
||||
text-align: center;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
width: 140px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.departmentContent {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: calc(100% - 142px);
|
||||
|
||||
.departmentContentList {
|
||||
width: 100%;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 106px;
|
||||
|
||||
> div {
|
||||
color: #FFFFFF;
|
||||
height: 40px;
|
||||
font-size: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
width: 140px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,429 @@
|
||||
<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>
|
||||
<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>{{ personnelType === 'staff' ? displayValue(item.stepCount) : displayValue(item.avgStepCount) }}</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: "https",
|
||||
url: "yyjk.cqygjk.com",
|
||||
suffix: "gateway",
|
||||
orgCode: "A01A86"
|
||||
},
|
||||
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;
|
||||
}
|
||||
let orgCode = this.$route.query.orgCode;
|
||||
if(orgCode) {
|
||||
this.requestConfig.orgCode = orgCode;
|
||||
}
|
||||
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 +'/food/userRank' + u;
|
||||
|
||||
if (this_.isRequesting) {
|
||||
console.warn('请求正在进行中，跳过本次调用。');
|
||||
return;
|
||||
}
|
||||
this_.isRequesting = true;
|
||||
|
||||
let params = {
|
||||
orgCode: this.requestConfig.orgCode,
|
||||
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;
|
||||
}
|
||||
},
|
||||
|
||||
displayValue(value) {
|
||||
if (value === '' || value === null || value === 0 || value === '0') {
|
||||
return '--';
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -0,0 +1,608 @@
|
||||
<template>
|
||||
<div id="dietaryNutritionTips2">
|
||||
<div class="tips">
|
||||
<div></div>
|
||||
<div>温馨提示</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<template v-if="personnelType === 'staff'">
|
||||
<div class="title staffTitle">
|
||||
<div></div>
|
||||
<div>
|
||||
<div>体重管理行动（员工）</div>
|
||||
<div>
|
||||
<div>{{ currentData }}</div>
|
||||
<div>活动开始第<span>{{ doingDay }}</span>天</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="staff">
|
||||
<div class="staffHeader">
|
||||
<div>序号</div>
|
||||
<div>单位(部门)</div>
|
||||
<div>姓名</div>
|
||||
<div>体重管理得分</div>
|
||||
</div>
|
||||
<div class="staffContent">
|
||||
<template v-if="list && list.length">
|
||||
<template v-for="item in list">
|
||||
<div class="staffContentList" :key="item.rank + item.departName + item.realName">
|
||||
<div>{{ item.rank }}</div>
|
||||
<div>{{ item.departName }}</div>
|
||||
<div>{{ item.realName }}</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="nullData">
|
||||
<div></div>
|
||||
<div>~ 暂无体重管理信息 ~</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="personnelType === 'department'">
|
||||
<div class="title departmentTitle">
|
||||
<div></div>
|
||||
<div>
|
||||
<div>体重管理行动（部门）</div>
|
||||
<div>{{ currentData }}</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="department">
|
||||
<div class="departmentHeader">
|
||||
<div>序号</div>
|
||||
<div>单位(部门)</div>
|
||||
<div>人均体重管理得分</div>
|
||||
</div>
|
||||
<div class="departmentContent">
|
||||
<template v-if="list && list.length">
|
||||
<template v-for="item in list">
|
||||
<div class="departmentContentList" :key="item.rank + item.orgName">
|
||||
<div>{{ item.rank }}</div>
|
||||
<div>{{ item.orgName }}</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="nullData">
|
||||
<div></div>
|
||||
<div>~ 暂无体重管理信息 ~</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="footer">公共事业部</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpRequest} from "@/XMLHttpRequest";
|
||||
import {getCurrentDate} from "@/utils/times";
|
||||
|
||||
export default {
|
||||
name: "dietaryNutritionTips",
|
||||
data() {
|
||||
return {
|
||||
setTimeoutParams: {
|
||||
status: true,
|
||||
times: 15
|
||||
},
|
||||
|
||||
requestConfig: {
|
||||
agreement: "https",
|
||||
url: "api.cqygjk.com",
|
||||
orgCode: "A01A86"
|
||||
},
|
||||
personnelType: "department", // 员工：staff / 部门：department
|
||||
|
||||
currentPage: 1,
|
||||
totalCount: 0,
|
||||
pageSize: 0,
|
||||
maxPagesToLoad: 0,
|
||||
|
||||
currentData: "",
|
||||
doingDay: "-",
|
||||
list: [],
|
||||
timerId: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let url = this.$route.query.url;
|
||||
if(url) {
|
||||
this.requestConfig.url = url;
|
||||
}
|
||||
let code = this.$route.query.orgCode;
|
||||
if(code) {
|
||||
this.requestConfig.orgCode = code;
|
||||
}
|
||||
this.currentData = getCurrentDate();
|
||||
this.startSequentialLoading();
|
||||
},
|
||||
methods: {
|
||||
pageTimerCallback() {
|
||||
this.currentData = getCurrentDate();
|
||||
const hasMoreToLoadInCurrentType = this.currentPage < this.maxPagesToLoad;
|
||||
const hasMoreOnServer = (this.currentPage * this.pageSize) < this.totalCount;
|
||||
if (hasMoreToLoadInCurrentType && hasMoreOnServer) {
|
||||
this.currentPage++;
|
||||
this.loadDataSequential();
|
||||
} else {
|
||||
this.personnelType = this.personnelType === "staff" ? "department" : "staff";
|
||||
this.startSequentialLoading();
|
||||
}
|
||||
},
|
||||
|
||||
// 启动或重置顺序加载流程
|
||||
startSequentialLoading() {
|
||||
this.list = [];
|
||||
this.currentPage = 1;
|
||||
this.totalCount = 0;
|
||||
|
||||
if (this.personnelType === "staff") {
|
||||
this.pageSize = 15;
|
||||
this.maxPagesToLoad = 3;
|
||||
} else {
|
||||
this.pageSize = 10;
|
||||
this.maxPagesToLoad = 1;
|
||||
}
|
||||
this.loadDataSequential();
|
||||
},
|
||||
|
||||
loadDataSequential() {
|
||||
let this_ = this;
|
||||
let urlPrefix = '/health-intervene/api/anon';
|
||||
let apiUrl = '';
|
||||
|
||||
if (this_.personnelType === "staff") {
|
||||
apiUrl = urlPrefix + '/userRank';
|
||||
} else {
|
||||
apiUrl = urlPrefix + '/deptRank';
|
||||
}
|
||||
|
||||
let url = this_.requestConfig.agreement + '://' + this_.requestConfig.url + apiUrl + '?orgCode=' + this_.requestConfig.orgCode + '&pageNo=' + this_.currentPage + '&pageSize=' + this_.pageSize;
|
||||
|
||||
if (this_.isRequesting) {
|
||||
console.warn('请求正在进行中，跳过本次调用。');
|
||||
return;
|
||||
}
|
||||
this_.isRequesting = true;
|
||||
|
||||
httpRequest('POST', url, {}, {}).then(function(res) {
|
||||
if (res.success && res.result && res.result.rankList) {
|
||||
if (this_.personnelType === "staff") {
|
||||
this_.doingDay = res.result.doingDay;
|
||||
}
|
||||
|
||||
this_.list = res.result.rankList;
|
||||
if (this_.currentPage === 1) {
|
||||
this_.totalCount = this_.personnelType === "staff" ? (res.result.joinNum || 0) : (res.result.joinDept || 0);
|
||||
}
|
||||
} else {
|
||||
this_.list = [];
|
||||
}
|
||||
}).catch(function() {
|
||||
this_.list = [];
|
||||
}).finally(() => {
|
||||
this_.isRequesting = false;
|
||||
|
||||
if (this_.setTimeoutParams.status) {
|
||||
if (this_.timerId) {
|
||||
clearTimeout(this_.timerId);
|
||||
}
|
||||
this_.timerId = setTimeout(() => {
|
||||
this_.pageTimerCallback();
|
||||
this_.timerId = null;
|
||||
}, this_.setTimeoutParams.times * 1000);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timerId) {
|
||||
clearTimeout(this.timerId);
|
||||
this.timerId = null;
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#dietaryNutritionTips2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 44px 40px 0;
|
||||
box-sizing: border-box;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
background-image: url("@/assets/images/dietaryNutritionTips/bg.png");
|
||||
|
||||
.tips {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 96px;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 120px;
|
||||
height: 4px;
|
||||
background: linear-gradient(270deg, #FFC87C 0%, rgba(42,199,159,0) 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #FFC87C;
|
||||
height: 36px;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
line-height: 36px;
|
||||
margin: 0 36px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
width: 120px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #FFC87C 0%, rgba(42,199,159,0) 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 182px;
|
||||
position: fixed;
|
||||
top: 85px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 86px;
|
||||
height: 182px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url("@/assets/images/dietaryNutritionTips/l.png");
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
width: 720px;
|
||||
height: 136px;
|
||||
padding: 18px 30px 0;
|
||||
border-radius: 24px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(-90deg, #FFC77B 0%, #FFF4E6 47%, #FFC879 100%);
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #8D0503;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
width: 86px;
|
||||
height: 182px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url("@/assets/images/dietaryNutritionTips/r.png");
|
||||
}
|
||||
|
||||
&.staffTitle {
|
||||
> div:nth-of-type(2) {
|
||||
> div:nth-of-type(1) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.departmentTitle {
|
||||
> div:nth-of-type(2) {
|
||||
> div:nth-of-type(1) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #8D0503;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
padding: 105px 24px 0;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #FFC548;
|
||||
background: linear-gradient(180deg, rgba(225, 225, 225, 0) 0%, rgba(225, 225, 225, 0.3) 100%);
|
||||
|
||||
.staff {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.staffHeader {
|
||||
width: 100%;
|
||||
height: 82px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 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: 85px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
width: 120px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.staffContent {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: calc(100% - 142px);
|
||||
|
||||
.staffContentList {
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
width: 120px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.department {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.departmentHeader {
|
||||
width: 100%;
|
||||
height: 82px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 60px;
|
||||
border-radius: 16px;
|
||||
background-color: #7E0B08;
|
||||
|
||||
> div {
|
||||
color: #FFC87C;
|
||||
height: 82px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
line-height: 82px;
|
||||
text-align: center;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
width: 140px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.departmentContent {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: calc(100% - 142px);
|
||||
|
||||
.departmentContentList {
|
||||
width: 100%;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 106px;
|
||||
|
||||
> div {
|
||||
color: #FFFFFF;
|
||||
height: 40px;
|
||||
font-size: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
width: 140px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: #FFFFFF;
|
||||
width: 100%;
|
||||
height: 95px;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
line-height: 95px;
|
||||
padding-right: 40px;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,8 @@
|
||||
import { getRequest } from '@/axios';
|
||||
|
||||
let url = {
|
||||
ct: "/shuwei-zhct/swLargeScreenFood/foodInfoByDeviceId", // 餐厅
|
||||
st: "/local/zhstapi/zhst/tv/foodInfoByDeviceId", // 食堂
|
||||
};
|
||||
|
||||
export const info = (type, params) => getRequest(type + 'Request', url[type], params);
|
||||
@@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<div id="dishesDetails-info">
|
||||
<div class="personTime">
|
||||
<div>取餐人次</div>
|
||||
<div>
|
||||
<template v-if="dishesDetails && dishesDetails.foodId">
|
||||
<countTo
|
||||
:startVal="dishesDetails.num_ ? dishesDetails.num_ : 0"
|
||||
:endVal="dishesDetails.num"
|
||||
separator=""
|
||||
:duration="1500"
|
||||
@count-to-finish="handleFinish('num')" />
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dishesPictures">
|
||||
<template v-if="dishesDetails && dishesDetails.foodId && dishesDetails.relativeUrl">
|
||||
<img :src="dishesDetails.relativeUrl" :alt="dishesDetails.relativeUrl" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<img src="@/assets/images/dishesDetails/null.png" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="dishesInfo">
|
||||
<div>
|
||||
<template v-if="dishesDetails && dishesDetails.foodId">
|
||||
<div>
|
||||
<div>{{ dishesDetails.foodName }}</div>
|
||||
<div :style="{'color': dishesDetails.initialStatus ? '#FF2222' : '#161616'}">
|
||||
(
|
||||
<countTo
|
||||
:startVal="dishesDetails.initial_ ? dishesDetails.initial_ : 0"
|
||||
:endVal="dishesDetails.initial"
|
||||
separator=""
|
||||
:decimals="2"
|
||||
:duration="1500"
|
||||
@count-to-finish="handleFinish('initial')" />
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>
|
||||
<div style="color: #77849E">暂无数据</div>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<template v-if="dishesDetails && dishesDetails.foodId">
|
||||
<template v-for="item in dishesDetails.itemTexts">
|
||||
<div>{{ item }}</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<template v-if="dishesDetails && dishesDetails.foodId">
|
||||
<div>
|
||||
<countTo
|
||||
:startVal="dishesDetails.surplus ? dishesDetails.surplus_ : 0"
|
||||
:endVal="dishesDetails.surplus"
|
||||
separator=""
|
||||
:decimals="2"
|
||||
:duration="1500"
|
||||
@count-to-finish="handleFinish('surplus')" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="color: #77849E">-</div>
|
||||
</template>
|
||||
<div>余量(kg)</div>
|
||||
</div>
|
||||
<div>
|
||||
<template v-if="dishesDetails && dishesDetails.foodId">
|
||||
<div>
|
||||
<countTo
|
||||
:startVal="dishesDetails.eatWeight_ ? dishesDetails.eatWeight_ : 0"
|
||||
:endVal="dishesDetails.eatWeight"
|
||||
separator=""
|
||||
:decimals="2"
|
||||
:duration="1500"
|
||||
@count-to-finish="handleFinish('eatWeight')" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="color: #77849E">-</div>
|
||||
</template>
|
||||
<div>实名取餐(kg)</div>
|
||||
</div>
|
||||
<div>
|
||||
<template v-if="dishesDetails && dishesDetails.foodId">
|
||||
<div :style="{'color': dishesDetails.anonymityWeight > 0 ? '#FF2222' : '#161616'}">
|
||||
<countTo
|
||||
:startVal="dishesDetails.anonymityWeight_ ? dishesDetails.anonymityWeight_ : 0"
|
||||
:endVal="dishesDetails.anonymityWeight"
|
||||
separator=""
|
||||
:decimals="2"
|
||||
:duration="1500"
|
||||
@count-to-finish="handleFinish('anonymityWeight')" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="color: #77849E">-</div>
|
||||
</template>
|
||||
<div>丢失餐量(kg)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import countTo from "vue-count-to";
|
||||
import {initMqtt, callBackMqttMessage} from "@/utils/mqtt";
|
||||
import {info} from "../api";
|
||||
|
||||
export default {
|
||||
name: "info",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
keyName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
countTo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deviceId: "",
|
||||
|
||||
dishesDetails: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let deviceId = this.$route.query[this.keyName];
|
||||
if(deviceId) {
|
||||
this.deviceId = deviceId;
|
||||
initMqtt('deviceId-' + Math.random().toString(16).substring(2, 8), "sw_device_msg", this.type).then((res) => {
|
||||
console.log(res);
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
this.loadData(deviceId);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData(deviceId) {
|
||||
if(deviceId === this.deviceId) {
|
||||
let params = {
|
||||
deviceId: deviceId
|
||||
};
|
||||
info(this.type, params).then(res => {
|
||||
if (res.success) {
|
||||
let data = this.type === 'ct' ? res.data : res.result;
|
||||
data.initialStatus = this.isAOutOf10PercentOfB(data);
|
||||
this.dishesDetails = data;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
isAOutOf10PercentOfB(data) {
|
||||
let initial = Number((data.surplus + data.eatWeight + data.anonymityWeight).toFixed(2));
|
||||
let lowerBound = data.initial * 0.9;
|
||||
let upperBound = data.initial * 1.1;
|
||||
return initial <= lowerBound || initial >= upperBound;
|
||||
},
|
||||
|
||||
handleFinish(k) {
|
||||
let newKey = k + '_';
|
||||
this.dishesDetails[newKey] = this.dishesDetails[k];
|
||||
},
|
||||
|
||||
mqttMessage(data) {
|
||||
this.loadData(data.deviceId);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
callBackMqttMessage((data) => {
|
||||
this.mqttMessage(data.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#dishesDetails-info {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 24px;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.personTime {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 500px;
|
||||
height: 168px;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("@/assets/images/dishesDetails/personTime.png");
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #FFFFFF;
|
||||
height: 30px;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #FFFFFF;
|
||||
height: 80px;
|
||||
font-size: 80px;
|
||||
line-height: 80px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.dishesPictures {
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background: linear-gradient(0deg, #FFFFFF 0%, #1B2E54 0%, #FFFFFF 0%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.dishesInfo {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
margin: auto;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
border-radius: 24px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #FFFFFF;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 76px 15px 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 45px;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #161616;
|
||||
height: 64px;
|
||||
font-size: 64px;
|
||||
font-weight: bold;
|
||||
line-height: 64px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #161616;
|
||||
height: 64px;
|
||||
font-size: 64px;
|
||||
font-weight: bold;
|
||||
line-height: 64px;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 70px;
|
||||
|
||||
> div {
|
||||
color: #04A777;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
height: 62px;
|
||||
padding: 0 22px;
|
||||
line-height: 62px;
|
||||
border-radius: 6px;
|
||||
margin: 0 12px;
|
||||
background-color: #DBF6EE;
|
||||
border: 1px solid #BCEFE1;
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
> div {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #161616;
|
||||
height: 80px;
|
||||
font-size: 80px;
|
||||
line-height: 80px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #999999;
|
||||
height: 30px;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0.67;
|
||||
background-color: #EEF6FD;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nullData {
|
||||
width: 100%;
|
||||
padding-top: 30vh;
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div id="dishesDetails">
|
||||
<div>
|
||||
<Info :type="type" keyName="l" />
|
||||
</div>
|
||||
<div>
|
||||
<Info :type="type" keyName="r" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Info from "./components/info.vue";
|
||||
|
||||
export default {
|
||||
name: "dishesDetails",
|
||||
components: {
|
||||
Info
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type: this.$route.query.type,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#dishesDetails {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 48px 107px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
background-color: #000000;
|
||||
|
||||
> div {
|
||||
width: 800px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="rowDom-info">
|
||||
1
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "info",
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="rowDom"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Info from "./info.vue";
|
||||
export default {
|
||||
name: "rowDom",
|
||||
components: {
|
||||
Info
|
||||
},
|
||||
data() {
|
||||
return{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.rowDom{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
background-image: url("@/assets/images/led/bg1.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
background-size: cover;
|
||||
|
||||
//.rowDom-logo {
|
||||
// width: 100px;
|
||||
// height: 100%;
|
||||
//}
|
||||
//
|
||||
//.rowDom-dishes {
|
||||
// width: 0;
|
||||
// flex: 1;
|
||||
// height: 100%;
|
||||
//}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div id="led">
|
||||
<div class="ledDom">
|
||||
<div class="ledDom1" :style="{'left': -(screenWidth * 0) + 'px'}">
|
||||
<RowDom />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ledDom">
|
||||
<div class="ledDom2" :style="{'left': -(screenWidth * 1) + 'px'}">
|
||||
<RowDom />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ledDom">
|
||||
<div class="ledDom3" :style="{'left': -(screenWidth * 2) + 'px'}">
|
||||
<RowDom />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RowDom from "./components/rowDom.vue";
|
||||
export default {
|
||||
name: "led",
|
||||
components: {
|
||||
RowDom
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
screenWidth: 1920
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#led {
|
||||
width: 100%;
|
||||
|
||||
.ledDom {
|
||||
width: 100%;
|
||||
height: 312px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.ledDom1 {
|
||||
position: absolute;
|
||||
width: 4800px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.ledDom2 {
|
||||
position: absolute;
|
||||
width: 4800px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.ledDom3 {
|
||||
position: absolute;
|
||||
width: 4800px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<div id="mealSurplusInformation">
|
||||
<div class="title">
|
||||
<div>{{ restName }}</div>
|
||||
<div>餐品余量信息</div>
|
||||
<div>{{ times }} | {{ dinnerType }}</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<template v-for="(item, index) in list">
|
||||
<div :class="['list', 'warning' + item.warningStatus]" @click="clickFood">
|
||||
<div class="index">{{ index < 9 ? '0' + (index + 1) : (index + 1)}}</div>
|
||||
<template v-if="item.warningStatus === 2">
|
||||
<div class="none">
|
||||
<div class="name">{{ item.foodName }} <template v-if="selectedIndex === index">选中</template></div>
|
||||
<div class="accumulate">累计出餐 {{ item.initial }} kg</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="info">
|
||||
<div class="info_">
|
||||
<div class="info_l">
|
||||
<template v-if="item.relativeUrl">
|
||||
<img :src="item.relativeUrl" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="info_r">
|
||||
<div class="name">{{ item.foodName }} <template v-if="selectedIndex === index">选中</template></div>
|
||||
<div class="accumulate">累计出餐 {{ item.initial }} kg</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="remaining">
|
||||
<div class="remaining_">
|
||||
<template v-if="item.warningStatus === 0">当前余量 <span>{{ item.surplus }}</span> kg</template>
|
||||
<template v-if="item.warningStatus === 1">余量预警 <span>{{ item.surplus }}</span> kg 请备餐</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpRequest} from "@/XMLHttpRequest";
|
||||
import {getServeUrl} from "@/utils/serveUrl";
|
||||
import {token} from "@/utils/token";
|
||||
import {getCurrentTime} from "@/utils/times";
|
||||
|
||||
export default {
|
||||
name: "mealSurplusInformation",
|
||||
data() {
|
||||
return {
|
||||
times: getCurrentTime(),
|
||||
|
||||
restName: "",
|
||||
dinnerType: "",
|
||||
list: [],
|
||||
|
||||
cols: 5,
|
||||
selectedIndex: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTime();
|
||||
this.requestFoodReplenishWarningList();
|
||||
},
|
||||
methods: {
|
||||
getTime() {
|
||||
let this_ = this;
|
||||
this_.times = getCurrentTime();
|
||||
setTimeout(function () {
|
||||
this_.getTime();
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
setTimePlay() {
|
||||
let this_ = this;
|
||||
setTimeout(function () {
|
||||
this_.requestFoodReplenishWarningList();
|
||||
}, 10000);
|
||||
},
|
||||
|
||||
requestFoodReplenishWarningList() {
|
||||
let this_ = this;
|
||||
let params = {};
|
||||
let url = getServeUrl('ctRequest') + '/shuwei-zhct/swLargeScreenFood/foodReplenishWarningList';
|
||||
httpRequest('GET', url, params, {
|
||||
'Authorization': token
|
||||
}).then(function(res) {
|
||||
if (res.success) {
|
||||
this_.restName = res.data.restName;
|
||||
this_.dinnerType = res.data.dinnerType;
|
||||
if(res.data.voList && res.data.voList.length) {
|
||||
res.data.voList.map(item => {
|
||||
item.relativeUrl = item.relativeUrl.replace("https", "http");
|
||||
})
|
||||
}
|
||||
this_.list = res.data.voList;
|
||||
|
||||
this_.setTimePlay();
|
||||
} else {
|
||||
console.error(res.message);
|
||||
}
|
||||
}).catch(function(error) {
|
||||
location.reload();
|
||||
console.error('GET request error:', error);
|
||||
});
|
||||
},
|
||||
|
||||
selectFood(key) {
|
||||
let cols = this.cols;
|
||||
let list = this.list;
|
||||
let selectedIndex = this.selectedIndex === null ? 0 : this.selectedIndex;
|
||||
let rows = Math.ceil(list.length / cols);
|
||||
// 19 上
|
||||
if(key === 19) {
|
||||
this.selectedIndex = selectedIndex - cols >= 0 ? selectedIndex - cols : selectedIndex;
|
||||
}
|
||||
// 21 左
|
||||
if(key === 21) {
|
||||
this.selectedIndex = selectedIndex % cols !== 0 ? selectedIndex - 1 : selectedIndex;
|
||||
}
|
||||
// 22 右
|
||||
if(key === 22) {
|
||||
this.selectedIndex = (selectedIndex + 1) % cols !== 0 && selectedIndex + 1 < list.length ? selectedIndex + 1 : selectedIndex;
|
||||
}
|
||||
// 20 下
|
||||
if(key === 20) {
|
||||
this.selectedIndex = selectedIndex + cols < rows * cols ? selectedIndex + cols : selectedIndex;
|
||||
}
|
||||
},
|
||||
|
||||
clickFood() {
|
||||
let { selectedIndex, list } = this;
|
||||
let this_ = this;
|
||||
let params = {
|
||||
foodId: list[selectedIndex].foodId
|
||||
};
|
||||
let url = getServeUrl('ctRequest') + '/shuwei-zhct/swLargeScreenFood/updateStatusByFoodId';
|
||||
httpRequest('GET', url, params, {
|
||||
'Authorization': token
|
||||
}).then(function(res) {
|
||||
if (res.success) {
|
||||
this_.list[selectedIndex].warningStatus = res.data;
|
||||
} else {
|
||||
console.error(res.message);
|
||||
}
|
||||
}).catch(function(error) {
|
||||
location.reload();
|
||||
console.error('GET request error:', error);
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.selectFood = this.selectFood;
|
||||
window.clickFood = this.clickFood;
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#mealSurplusInformation {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #000A14;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
padding: 0 24px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
flex: 1;
|
||||
color: #FFFFFF;
|
||||
font-size: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
flex: 1;
|
||||
color: #FFFFFF;
|
||||
font-size: 40px;
|
||||
height: 40px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
flex: 1;
|
||||
color: #FFFFFF;
|
||||
font-size: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.list {
|
||||
overflow: hidden;
|
||||
width: 355px;
|
||||
height: 216px;
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
margin-right: calc((100% - 355px * 5) / 4);
|
||||
border-radius: 12px;
|
||||
border: 2px solid #5272D9;
|
||||
background-color: #1A3467;
|
||||
|
||||
.index {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #FFFFFF;
|
||||
font-size: 22px;
|
||||
line-height: 50px;
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("@/assets/images/mealSurplusInformation/index.png");
|
||||
}
|
||||
|
||||
.none {
|
||||
height: 100%;
|
||||
padding-top: 70px;
|
||||
box-sizing: border-box;
|
||||
background-color: #0F1A29;
|
||||
|
||||
.name {
|
||||
color: #5A6478;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
font-size: 28px;
|
||||
line-height: 28px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.accumulate {
|
||||
color: #5A6478;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
padding: 22px 18px 0;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.info_ {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.info_l {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info_r {
|
||||
padding-top: 10px;
|
||||
flex: 1;
|
||||
width: 0;
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
color: #FFFFFF;
|
||||
font-size: 28px;
|
||||
height: 28px;
|
||||
font-weight: bold;
|
||||
line-height: 28px;
|
||||
margin-bottom: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.accumulate {
|
||||
width: 100%;
|
||||
color: #9DA8BA;
|
||||
font-size: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remaining {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.remaining_ {
|
||||
color: #FFFFFF;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
line-height: 76px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background-color: #0A2049;
|
||||
|
||||
span {
|
||||
color: #B1FF89;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(5n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes warn_animation {
|
||||
0% {
|
||||
border: 2px solid #5272D9;
|
||||
background-color: #1A3467;
|
||||
}
|
||||
50% {
|
||||
border: 2px solid #DC2828;
|
||||
background-color: #7F1520;
|
||||
}
|
||||
100% {
|
||||
border: 2px solid #5272D9;
|
||||
background-color: #1A3467;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes accumulate_animation {
|
||||
0% {
|
||||
color: #9DA8BA;
|
||||
}
|
||||
50% {
|
||||
color: #FFC8C8;
|
||||
}
|
||||
100% {
|
||||
color: #9DA8BA;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes remaining_animation {
|
||||
0% {
|
||||
background-color: #0A2049;
|
||||
}
|
||||
50% {
|
||||
background-color: #DC2828;
|
||||
}
|
||||
100% {
|
||||
background-color: #0A2049;
|
||||
}
|
||||
}
|
||||
|
||||
.warning1 {
|
||||
animation: warn_animation 1s infinite;
|
||||
|
||||
.accumulate {
|
||||
animation: accumulate_animation 1s infinite;
|
||||
}
|
||||
|
||||
.remaining_ {
|
||||
animation: remaining_animation 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.warning2 {
|
||||
border: 2px solid #263249 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div id="userRanking-setParams" v-if="show">
|
||||
<div class="setParams">
|
||||
<div class="bg" @click="hideModal"></div>
|
||||
<div class="modal">
|
||||
<div class="title">请求参数设置</div>
|
||||
<div class="form">
|
||||
<div>
|
||||
<input type="text" placeholder="请求状态：1启用/0停用" v-model="status">
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" placeholder="请输入接口刷新间隔秒数" v-model="times">
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" placeholder="请输入排行榜展示人数" v-model="listNumber">
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<div @click="submit">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "setParams",
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
|
||||
status: '1',
|
||||
times: '0',
|
||||
listNumber: '0'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showModal(status, times, listNumber) {
|
||||
this.status = status ? '1' : '0';
|
||||
this.times = times.toString();
|
||||
this.listNumber = listNumber.toString();
|
||||
this.show = true;
|
||||
},
|
||||
|
||||
hideModal() {
|
||||
this.show = false;
|
||||
},
|
||||
|
||||
submit() {
|
||||
let status = this.status;
|
||||
let times = this.times;
|
||||
let listNumber = this.listNumber;
|
||||
if(status && times && listNumber) {
|
||||
this.$emit('ok', {
|
||||
status: this.status === '1',
|
||||
times: Number(this.times),
|
||||
listNumber: Number(this.listNumber)
|
||||
});
|
||||
this.hideModal();
|
||||
} else {
|
||||
alert('必填参数不能为空');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#userRanking-setParams {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.setParams {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 25%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
border-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
padding: 50px 100px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
font-size: 50px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
margin-bottom: 100px;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0 30px;
|
||||
margin-bottom: 50px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #cccccc;
|
||||
|
||||
input {
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
font-size: 40px;
|
||||
line-height: 100px;
|
||||
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
|
||||
> div {
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
line-height: 120px;
|
||||
background-color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,542 @@
|
||||
<template>
|
||||
<div id="userRanking">
|
||||
<div class="ranking">
|
||||
<div class="dinersNumber" @click="openModal">当餐用餐人数 {{ 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]['headPortrait']">
|
||||
<img :src="topThree[1]['headPortrait']" />
|
||||
</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]['userName'] }}
|
||||
</template>
|
||||
<template v-else>虚位以待</template>
|
||||
</div>
|
||||
<div class="fraction">
|
||||
<template v-if="topThree && topThree.length && topThree.length >= 2">
|
||||
{{ topThree[1]['scoreValue'] }}
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="one">
|
||||
<div class="avatar">
|
||||
<template v-if="topThree && topThree.length">
|
||||
<template v-if="topThree[0]['headPortrait']">
|
||||
<img :src="topThree[0]['headPortrait']" />
|
||||
</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]['userName'] }}
|
||||
</template>
|
||||
<template v-else>虚位以待</template>
|
||||
</div>
|
||||
<div class="fraction">
|
||||
<template v-if="topThree && topThree.length">
|
||||
{{ topThree[0]['scoreValue'] }}
|
||||
</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]['headPortrait']">
|
||||
<img :src="topThree[2]['headPortrait']" />
|
||||
</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]['userName'] }}
|
||||
</template>
|
||||
<template v-else>虚位以待</template>
|
||||
</div>
|
||||
<div class="fraction">
|
||||
<template v-if="topThree && topThree.length && topThree.length >= 3">
|
||||
{{ topThree[2]['scoreValue'] }}
|
||||
</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['headPortrait']">
|
||||
<img :src="item['headPortrait']" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<img :src="require('@/assets/images/userRanking/' + (index + 1) + '.png')">
|
||||
</template>
|
||||
</div>
|
||||
<div>{{ item['userName'] }}</div>
|
||||
<div>{{ item['energyValue'] }} kcal</div>
|
||||
<div>{{ item['scoreValue'] }}</div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="noData">- 暂无排行数据 -</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<setParams ref="setParamsRef" @ok="resetLoadData"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getServeUrl} from "@/utils/serveUrl";
|
||||
import {httpRequest} from "@/XMLHttpRequest";
|
||||
import setParams from './components/setParams.vue';
|
||||
|
||||
export default {
|
||||
name: "userRanking",
|
||||
components: {
|
||||
setParams
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listNumber: 9,
|
||||
setTimeoutParams: {
|
||||
status: true,
|
||||
times: 3
|
||||
},
|
||||
|
||||
userNum: 0,
|
||||
energyAvg: 0,
|
||||
scoreAvg: 0,
|
||||
|
||||
topThree: [],
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.$refs.setParamsRef.showModal(this.setTimeoutParams.status, this.setTimeoutParams.times, this.listNumber);
|
||||
},
|
||||
|
||||
resetLoadData(params) {
|
||||
this.setTimeoutParams.status = params.status;
|
||||
this.setTimeoutParams.times = params.times;
|
||||
this.listNumber = params.listNumber;
|
||||
if (params.status) {
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
|
||||
setTimePlay() {
|
||||
let times = this.setTimeoutParams.times * 1000;
|
||||
let this_ = this;
|
||||
setTimeout(function () {
|
||||
this_.loadData();
|
||||
}, times);
|
||||
},
|
||||
|
||||
loadData() {
|
||||
let this_ = this;
|
||||
let params = {
|
||||
number: this.listNumber
|
||||
};
|
||||
let url = getServeUrl('stRequest') + '/local/zhstapi/zhst/tv/rankingList';
|
||||
httpRequest('GET', url, params, {}).then(function(res) {
|
||||
if (res.success) {
|
||||
this_.userNum = res.result.userNum;
|
||||
this_.energyAvg = res.result.energyAvg;
|
||||
this_.scoreAvg = res.result.scoreAvg;
|
||||
if (res.result.list && res.result.list.length) {
|
||||
let topThreeNum = res.result.list.length >= 3 ? 3 : res.result.list.length;
|
||||
this_.topThree = res.result.list.slice(0, topThreeNum);
|
||||
|
||||
let litNum = res.result.list.length - 3;
|
||||
if (litNum && litNum > 0) {
|
||||
this_.list = res.result.list.slice(3, res.result.list.length);
|
||||
}
|
||||
} else {
|
||||
this_.topThree = [];
|
||||
this_.list = [];
|
||||
}
|
||||
|
||||
if (this_.setTimeoutParams.status) {
|
||||
this_.setTimePlay();
|
||||
}
|
||||
} else {
|
||||
console.error(res.message);
|
||||
}
|
||||
}).catch(function(error) {
|
||||
location.reload();
|
||||
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>
|
||||
Reference in New Issue
Block a user