|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div id="menuScreen" style="position: relative;">
|
|
|
+ <div id="menuScreen" style="position: relative">
|
|
|
<div class="title">德荣食堂</div>
|
|
|
<div class="title2">
|
|
|
<span>时段</span>
|
|
@@ -7,15 +7,32 @@
|
|
|
<span>价格</span>
|
|
|
<span>日期</span>
|
|
|
</div>
|
|
|
- <div class="tables">
|
|
|
- <!-- class="gun" -->
|
|
|
- <div class="gun">
|
|
|
- <el-table :cell-style="{ color: '#fff' }" :header-cell-style="{ color: '#fff' }" :data="tableData"
|
|
|
- style="width: 100%;height:100%;font-size: 2.4vh;" ref="tableBox">
|
|
|
-
|
|
|
+ <div>
|
|
|
+ <!-- 去除滚动 2024.02.26 class="tables" -->
|
|
|
+ <div>
|
|
|
+ <!-- class="gun" -->
|
|
|
+ <el-table
|
|
|
+ :cell-style="{ color: '#fff' }"
|
|
|
+ :header-cell-style="{ color: '#fff' }"
|
|
|
+ :data="tableData"
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 30vh);
|
|
|
+ font-size: 4.5vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ "
|
|
|
+ ref="tableBox"
|
|
|
+ >
|
|
|
<el-table-column prop="timeFrame" align="center" label="">
|
|
|
<template slot-scope="scope">
|
|
|
- <span>{{ scope.row.timeFrame == '1' ? '早餐' : scope.row.timeFrame == '2' ? '午餐' : '晚餐' }}</span>
|
|
|
+ <span>{{
|
|
|
+ scope.row.timeFrame == "1"
|
|
|
+ ? "早餐"
|
|
|
+ : scope.row.timeFrame == "2"
|
|
|
+ ? "午餐"
|
|
|
+ : "晚餐"
|
|
|
+ }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
@@ -34,45 +51,45 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <p class="people">{{nowDate}}园区打卡人数:{{ dakaNum }}人</p>
|
|
|
+ <p class="people">{{ nowDate }}园区打卡人数:{{ dakaNum }}人</p>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import axios from 'axios'
|
|
|
-import { menuList, dakaPeople } from '@/api/canteen/basic.js'
|
|
|
+import axios from "axios";
|
|
|
+import { menuList, dakaPeople } from "@/api/canteen/basic.js";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
tableData: [],
|
|
|
- nowDate: '',
|
|
|
+ nowDate: "",
|
|
|
intervalId: null,
|
|
|
- dakaNum: ''
|
|
|
- }
|
|
|
+ dakaNum: "",
|
|
|
+ };
|
|
|
},
|
|
|
created() {
|
|
|
this.getList();
|
|
|
- this.dataRefreh()
|
|
|
- this.getPeoples()
|
|
|
+ this.dataRefreh();
|
|
|
+ this.getPeoples();
|
|
|
},
|
|
|
- destroyed(){
|
|
|
+ destroyed() {
|
|
|
// 在页面销毁后,清除计时器
|
|
|
this.clear();
|
|
|
},
|
|
|
methods: {
|
|
|
getList() {
|
|
|
- this.getNow()
|
|
|
+ this.getNow();
|
|
|
// {billDate: this.nowDate}
|
|
|
- menuList({ pageSize: 100, billDate: this.nowDate }).then(res => {
|
|
|
+ menuList({ pageSize: 100, billDate: this.nowDate }).then((res) => {
|
|
|
if (res.code === 200) {
|
|
|
- this.tableData = res.rows
|
|
|
- this.tableData = this.tableData.map(data => {
|
|
|
- data.billDate = data.billDate.substring(0, 11)
|
|
|
+ this.tableData = res.rows;
|
|
|
+ this.tableData = this.tableData.map((data) => {
|
|
|
+ data.billDate = data.billDate.substring(0, 11);
|
|
|
return data;
|
|
|
- })
|
|
|
- console.log(this.tableData, 'this.tableData');
|
|
|
+ });
|
|
|
+ console.log(this.tableData, "this.tableData");
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
getNow() {
|
|
|
var date = new Date();
|
|
@@ -86,10 +103,10 @@ export default {
|
|
|
day = "0" + day;
|
|
|
}
|
|
|
const nowDate = year + "-" + month + "-" + day;
|
|
|
- this.nowDate = nowDate
|
|
|
+ this.nowDate = nowDate;
|
|
|
},
|
|
|
- // 定时刷新数据函数
|
|
|
- dataRefreh() {
|
|
|
+ // 定时刷新数据函数
|
|
|
+ dataRefreh() {
|
|
|
// 计时器正在进行中,退出函数
|
|
|
if (this.intervalId != null) {
|
|
|
return;
|
|
@@ -98,8 +115,8 @@ export default {
|
|
|
this.intervalId = setInterval(() => {
|
|
|
console.log("刷新" + new Date());
|
|
|
this.getList(); //加载数据函数
|
|
|
- this.getPeoples() // 加载园区打卡人数
|
|
|
- }, 1000*60*5);
|
|
|
+ this.getPeoples(); // 加载园区打卡人数
|
|
|
+ }, 1000 * 60 * 5);
|
|
|
},
|
|
|
// 停止定时器
|
|
|
clear() {
|
|
@@ -108,23 +125,23 @@ export default {
|
|
|
},
|
|
|
// 获取园区打卡数据
|
|
|
getPeoples() {
|
|
|
- axios.defaults.baseURL = ''
|
|
|
- axios.get('/data-service-center/accessControl/getPeople ').then(res => {
|
|
|
- console.log(res.data)
|
|
|
- if(res.data.code === 200) {
|
|
|
- this.dakaNum = res.data.data
|
|
|
+ axios.defaults.baseURL = "";
|
|
|
+ axios.get("/data-service-center/accessControl/getPeople ").then((res) => {
|
|
|
+ console.log(res.data);
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.dakaNum = res.data.data;
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
#menuScreen {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background-image: url('../../assets/images/background.png');
|
|
|
+ background-image: url("../../assets/images/background.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: cover;
|
|
|
// overflow: hidden;
|
|
@@ -147,11 +164,11 @@ export default {
|
|
|
|
|
|
.title2 {
|
|
|
text-align: center;
|
|
|
- font-size: 3vh;
|
|
|
+ font-size: 6vh;
|
|
|
font-weight: 600;
|
|
|
color: #fff;
|
|
|
width: 80%;
|
|
|
- color: #FFF;
|
|
|
+ color: #fff;
|
|
|
margin: 2% auto;
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
@@ -178,7 +195,7 @@ export default {
|
|
|
|
|
|
@keyframes tables {
|
|
|
0% {
|
|
|
- transform: translateY(0px)
|
|
|
+ transform: translateY(0px);
|
|
|
}
|
|
|
|
|
|
100% {
|
|
@@ -199,7 +216,7 @@ export default {
|
|
|
background-color: transparent !important;
|
|
|
// border-top-color: #808DA6;
|
|
|
// border-bottom-color: #808DA6;
|
|
|
- border-top: 1px solid #808DA6;
|
|
|
+ border-top: 1px solid #808da6;
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
|
|
@@ -211,9 +228,14 @@ export default {
|
|
|
}
|
|
|
.people {
|
|
|
position: absolute;
|
|
|
- top: 0;right: 1%;
|
|
|
- font-size: 3vh;
|
|
|
+ top: 0;
|
|
|
+ right: 1%;
|
|
|
+ font-size: 4vh;
|
|
|
font-weight: 600;
|
|
|
color: #fff;
|
|
|
}
|
|
|
-</style>
|
|
|
+
|
|
|
+.el-table::before {
|
|
|
+ height: 0;
|
|
|
+}
|
|
|
+</style>
|