skjia
/
bonus-ui-notice-screen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
bonus-ui-notice-screen/src/views/view.vue

727 lines
24 KiB
Vue
Raw Normal View History

jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
<template>
<div class="container">
页面样式优化
2025-09-02 14:50:34 +08:00
<div class="topdiv">
<div class="dateTimeClass">
<span style="color:#D8E2FF;font-size: 24px;margin-top: 12px;">{{dateTime}}</span>
</div>
<div class="titlediv">
经研院食安公示
</div>
<div class="hourTimeClass">
<span style="color:#D8E2FF;font-size: 24px;margin-top: 12px;">{{hourTime}}</span>
</div>
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
</div>
页面样式优化
2025-09-02 14:50:34 +08:00
<div class="titlediv2">
健康晨检
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
</div>
页面样式优化
2025-09-02 14:50:34 +08:00
<div class="fegexian" style="margin-top: 10px;"></div>
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
页面样式优化
2025-09-02 14:50:34 +08:00
<div class="contentclass">
<table style="width: 100%;height: 100%;">
<tr>
<td>晨检</td>
<td>手部检测</td>
<td>脸部检测</td>
<td>健康证</td>
</tr>
<tr style="height: 100%;width: 100%;">
<td rowspan="5" style="height: 250px;width: 25%;">
<div style="width: 100%;height: 100%;">
<div style="height: 100%;" ref="chartone"></div>
</div>
</td>
<td rowspan="5" style="height: 100%;width: 25%;">
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
<div style="width: 100%;height: 100%;">
页面样式优化
2025-09-02 14:50:34 +08:00
<div style="height: 100%;" ref="charttwo"></div>
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
</div>
页面样式优化
2025-09-02 14:50:34 +08:00
</td>
<td rowspan="5" style="height: 100%;width: 25%;">
<div style="width: 100%;height: 100%;">
<div style="height: 100%;" ref="chartthree"></div>
</div>
</td>
<td rowspan="5" style="height: 100%;width: 25%;">
<div style="width: 100%;height: 100%;">
<div style="height: 100%;" ref="chartfour"></div>
</div>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td>晨检正常：{{morningCheckNum}}人</td>
<td>晨检正常：{{handCheckNum}}人</td>
<td>晨检正常：{{faceCheckNum}}人</td>
<td>正常：{{healthNum}}人</td>
</tr>
<tr>
<td>晨检异常：{{morningCheckAbno}}人</td>
<td>晨检异常：{{handCheckAbno}}人</td>
<td>晨检异常：{{faceCheckAbno}}人</td>
<td>过期：{{healthAbno}}人</td>
</tr>
</table>
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
</div>
页面样式优化
2025-09-02 14:50:34 +08:00
<div class="partthree">
<div class="partthree_title"><span>AI巡检记录</span></div>
<div class="fegexian" style="margin: 10px auto;"></div>
<div style="width: 100%; height: auto;">
<carousel :per-page="3" :mouse-drag="true" :paginationActive="false" :autoplay="true" :autoplay-timeout="5000" :loop="true" >
<slide v-for="(item, index) in inspectionRecord" :key="index">
<div style="padding: 5%;;width: 100%; height: 90%;overflow: hidden;">
<img style="width: 100%; height: 100%; object-fit: cover;" :src="item.picUrl"/>
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
</div>
</slide>
</carousel>
</div>
</div>
页面样式优化
2025-09-02 14:50:34 +08:00
<div style="width: 96%;height: auto;margin: 1% auto;display: flex;justify-content: space-between;">
<div class="container2">
<div class="partthree_title"><span>证照公示</span></div>
<div class="partthree_title2"><div class="fegexian2" style="width: 80%;"></div></div>
<div style="width: 90%;height: 260px;margin: 10px auto;text-align: center;">
<img style="width: 100%; height: 250px; object-fit: cover;" :src="certificatePic[0]"/>
</div>
</div>
<div class="container2">
<div class="partthree_title"><span>厨师公示</span></div>
<div class="partthree_title2"><div class="fegexian2" style="width: 80%;"></div></div>
<div style="width: 90%;height: 260px;margin: 10px auto;text-align: center;">
<carousel :per-page="3" :mouse-drag="false" :navigationEnabled="false" :autoplay="true" :autoplay-timeout="5000" :loop="true" >
<slide v-for="(item, index) in cookCertificate" :key="index">
<div style="padding: 5%;;width: 100%; height: 250px;overflow: hidden;">
<img style="width: 100%; height: 90%; object-fit: cover;" :src="item.picUrl"/>
<div style="color: #D8E2FF;height: 10%;text-align: center;">{{item.staffname}}</div>
</div>
</slide>
</carousel>
</div>
</div>
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
</div>
页面样式优化
2025-09-02 14:50:34 +08:00
<div style="width: 90%;height: auto;margin: 1% auto;">
<div class="partthree_title"><span>重点区域监控</span></div>
<div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;width: 80%;"></div></div>
<div style="width: 100%;height: 800px;margin-top: 1%;">
<videoMonitoring></videoMonitoring>
</div>
</div>
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
</div>
</template>
<script>
import videoMonitoring from './videoMonitoring.vue'
import Vue from 'vue'
import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel);
import * as echarts from 'echarts';
import axios from 'axios';
import Cookies from 'js-cookie';
import { getCertificatePicInfoApi,getCookCertificateInfoApi,getAIRewordInfoApi,getMorningCheckInfoApi } from "@/api/view";
页面样式优化
2025-09-02 14:50:34 +08:00
export default {
name: "Index",
components: {
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
videoMonitoring // 注册子组件
页面样式优化
2025-09-02 14:50:34 +08:00
},
data() {
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
return {
// 版本号
version: "24.7.1",
currentSeat:300,
mealNum:0,
dateTime:'',//日期
hourTime:'',//时分秒
settimenum:0,
morningCheckNum:0, //晨检数
morningCheckPerc:0,//晨检比
morningCheckAbno:0,//晨检异常数
handCheckNum:0, //手晨检数
handCheckPerc:0,//手晨检比
handCheckAbno:0,//手晨检异常数
faceCheckNum:0, //脸晨检数
faceCheckPerc:0,//脸晨检比
faceCheckAbno:0,//脸晨检异常数
healthNum:0, //健康证数
healthPerc:0,//健康证比
healthAbno:0,//健康证异常数
dataForm:{},
inspectionRecord:[//AI巡检记录
],
cookCertificate:[//厨师证
],
//证照公示
certificatePic:["http://sgwpdm.ah.sgcc.com.cn/canteen/lnyst/378915229716713472/dishes/ce0e4591db7e439a9951e8c48be92d31.png"],
angle:0
};
页面样式优化
2025-09-02 14:50:34 +08:00
},
created() {
},
mounted() {
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
this.getCurrentTime(); // 组件挂载后获取时间
this.initData();// 你的业务逻辑
setTimeout(()=>{
var elements = document.querySelectorAll(".VueCarousel-pagination");
elements.forEach(function(el) {
el.style.display="none";
});
},1000);
setInterval(this.getCurrentTime, 1000); // 每秒更新时间
this.timer = setInterval(() => {
this.settimenum=this.settimenum+1;
this.getUserFlage();//判断是否需要获取token
this.initData(); // 你的业务逻辑
var elements = document.querySelectorAll(".VueCarousel-pagination");
elements.forEach(function(el) {
el.style.display="none";
});
}, 1000000);
},
beforeDestroy() {
clearInterval(this.timer); // 必须清除定时器！
},
页面样式优化
2025-09-02 14:50:34 +08:00
methods: {
refrespage(){
this.$router.go(0);
return;
},
getCurrentTime() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
this.dateTime = year+'-'+month+'-'+day;
this.hourTime = hours+':'+minutes+':'+seconds;
},
initData(){
this.dataForm.type=1;
getMorningCheckInfoApi(this.dataForm).then(res => {
console.log("morningCheckNum",res)
this.morningCheckNum=res.data.morningCheckNum;
this.morningCheckAbno=res.data.morningCheckAbno;
this.handCheckNum=res.data.handCheckNum;
this.handCheckAbno=res.data.handCheckAbno;
this.faceCheckNum=res.data.faceCheckNum;
this.faceCheckAbno=res.data.faceCheckAbno;
this.healthNum=res.data.healthNum;
this.healthAbno=res.data.healthAbno;
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
页面样式优化
2025-09-02 14:50:34 +08:00
this.initChartOne();
this.initChartTwo();
this.initChartThree();
this.initChartFour();
});
getAIRewordInfoApi(this.dataForm).then(res => {
this.inspectionRecord=res.data;
});
getCookCertificateInfoApi(this.dataForm).then(res => {
console.log("cookCertificate",res);
this.cookCertificate=res.data;
});
getCertificatePicInfoApi(this.dataForm).then(res => {
this.certificatePic[0]=res.data.picUrl;
});
},
getUserFlage(){
if(this.settimenum>60){
this.settimenum=0;
//重新获取token,每十分钟
this.reloadUser();
}
},
reloadUser(){
this.loginForm.loginMethod =Cookies.get('loginMethodd');
this.loginForm.username = Cookies.get('usernamed');
this.loginForm.password = Cookies.get('passwordd');
this.$store.dispatch('Login', this.loginForm)
.then(res => {
this.loading = false
// this.$router.push({ path:'/view' });
// setTimeout(()=>{
// location.reload();
// },1000)
})
},
goTarget(href) {
window.open(href, "_blank");
},
initChartOne() {
if(this.morningCheckNum==0){
this.morningCheckPerc=0;
}else{
this.morningCheckPerc=(this.morningCheckNum-this.morningCheckAbno)/(this.morningCheckNum)*100;
}
// 基于准备好的dom，初始化echarts实例
this.chartOne = echarts.init(this.$refs.chartone);
// 绘制图表
this.chartOne.setOption({
title: {
text:this.morningCheckPerc.toFixed(2) +'%',
subtext: '合格率',
x: 'center',
y: 'center',
subtextStyle: {
fontSize: 15,
color: '#fff'
},
textStyle: {
fontWeight: 'normal',
color: '#0580f2',
fontSize: '15'
}
},
color: ['rgba(176, 212, 251, 1)'],
legend: {
show: false,
itemGap: 12,
data: ['01', '02']
},
series: [{
name: 'Line 1',
type: 'pie',
clockWise: true,
radius: ['50%', '66%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
value: this.morningCheckNum-this.morningCheckAbno,
name: '01',
itemStyle: {
normal: {
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#00cefc' // 0% 处的颜色
}, {
offset: 1,
color: '#367bec' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
}, {
name: '02',
value: this.morningCheckAbno
}]
}]
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
});
页面样式优化
2025-09-02 14:50:34 +08:00
},
initChartTwo() {
if(this.handCheckNum==0){
this.handCheckPerc=0;
}else{
this.handCheckPerc=(this.handCheckNum-this.handCheckAbno)/(this.handCheckNum)*100;
}
// 基于准备好的dom，初始化echarts实例
this.chartTwo = echarts.init(this.$refs.charttwo);
// 绘制图表
this.chartTwo.setOption({
title: {
text:this.handCheckPerc.toFixed(2) +'%',
subtext: '合格率',
x: 'center',
y: 'center',
subtextStyle: {
fontSize: 15,
color: '#fff'
},
textStyle: {
fontWeight: 'normal',
color: '#0580f2',
fontSize: '15'
}
},
color: ['rgba(176, 212, 251, 1)'],
legend: {
show: false,
itemGap: 12,
data: ['01', '02']
},
series: [{
name: 'Line 1',
type: 'pie',
clockWise: true,
radius: ['50%', '66%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
value: this.handCheckNum-this.handCheckAbno,
name: '01',
itemStyle: {
normal: {
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#00cefc' // 0% 处的颜色
}, {
offset: 1,
color: '#367bec' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
}, {
name: '02',
value: this.handCheckAbno
}]
}]
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
});
页面样式优化
2025-09-02 14:50:34 +08:00
},
initChartThree() {
if(this.faceCheckNum==0){
this.faceCheckPerc=0;
}else{
this.faceCheckPerc=(this.faceCheckNum-this.faceCheckAbno)/(this.faceCheckNum)*100;
}
// 基于准备好的dom，初始化echarts实例
this.chartThree = echarts.init(this.$refs.chartthree);
// 绘制图表
this.chartThree.setOption({
title: {
text:this.faceCheckPerc.toFixed(2) +'%',
subtext: '合格率',
x: 'center',
y: 'center',
subtextStyle: {
fontSize: 15,
color: '#fff'
},
textStyle: {
fontWeight: 'normal',
color: '#0580f2',
fontSize: '15'
}
},
color: ['rgba(176, 212, 251, 1)'],
legend: {
show: false,
itemGap: 12,
data: ['01', '02']
},
series: [{
name: 'Line 1',
type: 'pie',
clockWise: true,
radius: ['50%', '66%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
value: this.faceCheckNum-this.faceCheckAbno,
name: '01',
itemStyle: {
normal: {
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#00cefc' // 0% 处的颜色
}, {
offset: 1,
color: '#367bec' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
}, {
name: '02',
value: this.faceCheckAbno
}]
}]
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
});
页面样式优化
2025-09-02 14:50:34 +08:00
},
initChartFour() {
if(this.healthNum==0){
this.healthPerc=0;
}else{
this.healthPerc=((this.healthNum)-(this.healthAbno))/(this.healthNum)*100;
}
// 基于准备好的dom，初始化echarts实例
this.chartFour = echarts.init(this.$refs.chartfour);
// 绘制图表
this.chartFour.setOption({
title: {
text:this.healthPerc.toFixed(2) +'%',
subtext: '合格率',
x: 'center',
y: 'center',
subtextStyle: {
fontSize: 15,
color: '#fff'
},
textStyle: {
fontWeight: 'normal',
color: '#0580f2',
fontSize: '15'
}
},
color: ['rgba(176, 212, 251, 1)'],
legend: {
show: false,
itemGap: 12,
data: ['01', '02']
},
series: [{
name: 'Line 1',
type: 'pie',
clockWise: true,
radius: ['50%', '66%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
value: this.healthNum-this.healthAbno,
name: '01',
itemStyle: {
normal: {
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#00cefc' // 0% 处的颜色
}, {
offset: 1,
color: '#367bec' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
}, {
name: '02',
value: this.healthAbno
}]
}]
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
});
页面样式优化
2025-09-02 14:50:34 +08:00
},
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
},
页面样式优化
2025-09-02 14:50:34 +08:00
};
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
</script>
<style lang="scss" scoped>
.container {
height: 100%;
width: 100%;
background-image: url("../assets/images/background.jpg");
background-size: cover; /* 覆盖整个div */
background-position: center; /* 图片居中 */
页面样式优化
2025-09-02 14:50:34 +08:00
overflow-y: auto; /* 仅垂直滚动 */
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
display: flex;
width: 100%;
justify-content: center; /* 水平居中 */
flex-wrap: wrap;
页面样式优化
2025-09-02 14:50:34 +08:00
}
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
.topdiv{
页面样式优化
2025-09-02 14:50:34 +08:00
width: 96%;
margin: 0 auto;
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
background-image: url("../assets/images/canteen1.png");
页面样式优化
2025-09-02 14:50:34 +08:00
background-size: 100% 100%; /* 覆盖整个div */
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
background-position: center; /* 图片居中 */
页面样式优化
2025-09-02 14:50:34 +08:00
height: 180px;
display: flex;
justify-content: space-between;
padding-top: 3%;
margin-bottom: 2%;
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
}
.titlediv{
display: flex;
width: 40%;
页面样式优化
2025-09-02 14:50:34 +08:00
justify-content: center; /* 水平居中 */
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
页面样式优化
2025-09-02 14:50:34 +08:00
font-weight: 600;
font-size: 32px;
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
color: #E1EFFF;
}
.dateTimeClass{
display: flex;
页面样式优化
2025-09-02 14:50:34 +08:00
// justify-content: center; /* 水平居中 */
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
color:#fff;
width:30%;
页面样式优化
2025-09-02 14:50:34 +08:00
font-size: 26px;
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
}
.hourTimeClass{
display: flex;
页面样式优化
2025-09-02 14:50:34 +08:00
justify-content: flex-end; /* 水平居中 */
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
color:#fff;
width:30%;
页面样式优化
2025-09-02 14:50:34 +08:00
font-size: 26px;
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
}
.titlediv2{
display: flex;
width: 100%;
justify-content: center; /* 水平居中 */
align-items: flex-start; /* 垂直靠上 */
color:#fff;
font-size: 28px;
background-image: url("../assets/images/caidanline.png");
background-size: cover; /* 覆盖整个div */
background-position:bottom; /* 图片居中 */
}
.contentclass{
display: flex;
width: 100%;
justify-content: center; /* 水平居中 */
flex-wrap: wrap;
color:#fff;
页面样式优化
2025-09-02 14:50:34 +08:00
margin-bottom: 2%;
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
}
.fegexian{
width: 49%;
height: 5px;
background-image: url("../assets/images/caidanline.png");
background-size: cover; /* 覆盖整个div */
background-position: center; /* 图片居中 */
}
.fegexian2{
width: 40%;
height: 5px;
background-image: url("../assets/images/caidanline.png");
background-size: cover; /* 覆盖整个div */
background-position: center; /* 图片居中 */
}
.dishclass{
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
font-weight: normal;
font-size: 24px;
color: #D8E2FF;
text-align: left;
font-style: normal;
text-transform: none;
}
.dishclass span{
background-image: linear-gradient(0deg, rgba(111,169,255,0.5) 30%, #6FA9FF 86%);
-webkit-background-clip: text;
background-clip: text;
color: transparent; /* 或者使用 text-fill-color: transparent; */
}
.dishcontentclass{
display: flex;
align-items: flex-end;
flex-wrap: wrap;
margin-top: 1%;
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
font-weight: normal;
font-size: 22px;
color: #D8E2FF;
text-align: left;
font-style: normal;
}
.dishcontentrefclass{
margin-left: 5%;
margin-top: 3%;
}
页面样式优化
2025-09-02 14:50:34 +08:00
.partthree{
height: auto;
width: 96%;
margin: 1% auto;
margin-bottom: 2%;
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
}
.partthree_title{
display: flex;
color:#fff;
font-size: 25px;
justify-content: center; /* 水平居中 */
}
.partthree_title2{
display: flex;
页面样式优化
2025-09-02 14:50:34 +08:00
height: 30px;
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
width: 100%;
页面样式优化
2025-09-02 14:50:34 +08:00
margin-top: 1%;
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
justify-content: center; /* 水平居中 */
}
页面样式优化
2025-09-02 14:50:34 +08:00
.container2 {
height: auto;
width: 50%;
display: flex;
flex-direction: row;
justify-content: center; /* 水平居中 */
align-items: center;
flex-wrap: wrap;
}
jsk 经研院-公示大屏
2025-08-15 15:36:07 +08:00
table, th, td {
// border: 1px solid #fff;
// border-collapse: collapse; /* 可选，用于合并相邻单元格的边框 */
text-align: center;
}
.big-number {
font-size: 30px;
font-family: 'Arial', sans-serif;
color: #fff;
padding: 5px;
border-radius: 10px;
display: inline-flex;
}
.digit {
margin: 0 5px;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
}
</style>