From a1c8637d101b47c17a564fb874cdad201f77d2b7 Mon Sep 17 00:00:00 2001
From: zzyuan <781948537@qq.com>
Date: Thu, 27 Nov 2025 09:24:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/request.js    |  38 +-
 src/views/view copy.vue | 682 +++++++++++++++++++++++++++++
 src/views/view.vue      | 936 +++++++++++++---------------------------
 3 files changed, 990 insertions(+), 666 deletions(-)
 create mode 100644 src/views/view copy.vue

diff --git a/src/utils/request.js b/src/utils/request.js
index 3c29f09..1d30406 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -112,23 +112,23 @@ service.interceptors.response.use(res => {
         const username = Cookies.get('username')
         const password = Cookies.get('password')
         const rememberMe = Cookies.get('rememberMe')
-      if(rememberMe==true){ 
-        let loginForm = {
-          code: "",
-          loginMethod: "password",
-          loginType: "",
-          mobile: "",
-          mobileCodeType: "LOGIN",
-          password: password,
-          phoneUuid: "",
-          rememberMe: rememberMe,
-          username: username,
-          uuid: "",
-          verificationCode: ""
-        }
-        console.log(loginForm) 
-        store.dispatch('Login', loginForm).then(() => {})
-      }else{
+      // if(rememberMe==true){ 
+      //   let loginForm = {
+      //     code: "",
+      //     loginMethod: "password",
+      //     loginType: "",
+      //     mobile: "",
+      //     mobileCodeType: "LOGIN",
+      //     password: password,
+      //     phoneUuid: "",
+      //     rememberMe: rememberMe,
+      //     username: username,
+      //     uuid: "",
+      //     verificationCode: ""
+      //   }
+      //   console.log(loginForm) 
+      //   store.dispatch('Login', loginForm).then(() => {})
+      // }else{
         let loginForm = {
           code: "",
           loginMethod: "password",
@@ -162,9 +162,9 @@ service.interceptors.response.use(res => {
         //     isRelogin.show = false
         //   })
         // }
-      }
+      // }
       
-      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+      // return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
     } else if (code === 500) {
         const username = Cookies.get('username')
         const password = Cookies.get('password')
diff --git a/src/views/view copy.vue b/src/views/view copy.vue
new file mode 100644
index 0000000..9d52be8
--- /dev/null
+++ b/src/views/view copy.vue	
@@ -0,0 +1,682 @@
+<template>
+  <div class="container">
+    <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>
+    </div>
+    <div style="height: auto;width: 100%;margin-bottom: 40px;">
+      <div class="partthree_title"><span>健康晨检</span></div>
+      <div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div> 
+      <div class="contentclass">
+        <table style="width: 100%;height: 100%;">
+          <tr>
+            <td>晨检</td>
+            <td>健康证</td>
+          </tr>
+          <tr style="height: 100%;width: 100%;">
+            <!-- 图表容器：统一设置固定宽高+100%填充，避免尺寸偏差 -->
+            <td rowspan="5" style="width: 50%;">
+                <div style="width: 100%;height: 240px;display: flex;align-items: center;justify-content: center;">
+                    <div ref="chartone" style="width: 90%;height: 90%;"></div>
+                </div>
+            </td>
+            <td rowspan="5" style="width: 50%;">
+              <div style="width: 100%;height: 240px;display: flex;align-items: center;justify-content: center;">
+                <div ref="chartfour" style="width: 90%;height: 90%;"></div>
+              </div>
+            </td>
+          </tr>
+          <tr></tr>
+          <tr></tr>
+          <tr></tr>
+          <tr></tr>
+          <tr>
+            <td>晨检正常：{{Number(morningCheckNum)-Number(morningCheckAbno)}}人</td>
+            <td>正常：{{Number(healthNum)-Number(healthAbno)}}人</td>
+          </tr>
+          <tr>
+            <td>晨检异常：{{morningCheckAbno}}人</td>
+            <td>过期：{{healthAbno}}人</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <div style="height: auto;width: 100%;margin-bottom: 40px;">
+      <div class="partthree_title"><span>今日菜品</span></div>
+      <div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div>
+      <div class="contentclass">
+        <div style="width: 80%;border: 1px solid rgba(191,191,255,0.04);margin-top: 10px;">
+          <div class="dishclass">
+            <img src="../assets/images/Frame1.png"/><span>早餐供应</span><img src="../assets/images/breakfast.png" style="float: right;"/>
+          </div>
+          <div class="dishcontentclass">
+            <template v-if="onedataList.length>0">
+              <template v-for="(group, groupIndex) in groupedBreakfastList">
+                <div class="dishcontentrefclass" v-for="item in group.dishes" :key="item.id || item.dishesName">
+                  {{item.dishesName}}&nbsp;&nbsp;&nbsp;&nbsp; 
+                </div>
+              </template>
+            </template>
+          </div>
+        </div>
+        <div style="width: 80%;border: 2px solid rgba(191,191,255,0.04);margin-top: 10px;">
+          <div class="dishclass">
+            <img src="../assets/images/Frame2.png"/><span>午餐供应</span><img src="../assets/images/lunch.png" style="float: right;"/>
+          </div>
+          <div class="dishcontentclass">
+            <template v-if="twodataList.length>0">
+              <div v-for="(group, groupIndex) in groupedLunchList" :key="groupIndex" style="width: 100%;display: flex;align-items: baseline;">
+                <div class="dishtypeclass" v-if="group.dishes.length>0 && group.typeName" :key="'type-' + groupIndex">
+                  {{getDisplayTypeName(group.typeName)}}
+                </div>
+                <div style="width: 80%;display: flex;align-items: center;flex-wrap: wrap;">
+                  <div class="dishcontentrefclass" style="width: 30%;" v-for="item in group.dishes" :key="item.id || item.dishesName">
+                    {{item.dishesName}}&nbsp;&nbsp;&nbsp;&nbsp;
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+        <div style="width: 80%;border: 2px solid rgba(191,191,255,0.04);margin-top: 10px;">
+          <div class="dishclass">
+            <img src="../assets/images/Frame.png"/><span>晚餐供应</span><img src="../assets/images/dinner.png" style="float: right;"/>
+          </div>
+          <div class="dishcontentclass">
+            <template v-if="fourdataList.length>0">
+              <div class="dishcontentrefclass" v-for="item in fourdataList" :key="item.id || item.dishesName">
+                {{item.dishesName}}&nbsp;&nbsp;&nbsp;&nbsp;
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="height: auto;width: 90%;margin: 0 auto;">
+      <div class="partthree_title"><span>证件公示(健康证)</span></div>
+      <div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div>
+      <div style="width: 100%; height:100%; ">
+          <carousel :per-page="4" :mouse-drag="true" :autoplay="true" :autoplay-timeout="4000"  :loop="true" >
+              <slide v-for="(item, index) in staffNums" :key="index">
+                <div style="padding: 10px;;width: 240px;overflow: hidden;">
+                  <img style="width: 240px; object-fit: cover;" :src="item.healthCertFrontImg"/>
+                </div>
+              </slide>
+          </carousel>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import VueCarousel from 'vue-carousel';
+Vue.use(VueCarousel);
+import axios from 'axios';
+import Cookies from 'js-cookie';
+import { getCurrentRecipeListApi,getCertificateListApi,getMorningCheckInfoApi } from "@/api/view";
+import * as echarts from 'echarts';
+
+export default {
+  name: "Index",
+  data() {
+    return {
+      version: "24.7.1",
+      mealNum:0,
+      dateTime:'',
+      hourTime:'',
+      countTime:0,
+      sysTime:0,
+      timer:null,
+      timer2:null,
+      morningCheckNum:0, //晨检数
+      morningCheckPerc:0,//晨检比
+      morningCheckAbno:0,//晨检异常数
+
+      healthNum:0, //健康证数
+      healthPerc:0,//健康证比
+      healthAbno:0,//健康证异常数
+
+      onedataList:[{"dishesName":"无菜单","salePrice":""}],
+      twodataList:[{"dishesName":"无菜单","salePrice":""}],
+      threedataList:[{"dishesName":"无菜单","salePrice":""}],
+      fourdataList:[{"dishesName":"无菜单","salePrice":""}],
+      fivedataList:[{"dishesName":"无菜单","salePrice":""}],
+      staffNums:[],
+      dataForm:{type:1},
+      angle:0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        key:"2",
+        applyDate:"",
+        areaId:null,
+        canteenId:null,
+        stallId:null,
+        recipeName:"",
+      },
+      // 存储图表实例，用于销毁和resize
+      chartOne: null,
+      chartFour: null
+    };
+  },
+  created() {
+  },
+  mounted() {
+    this.handleLogin()
+    window.addEventListener('popstate', this.handlePopState);
+    this.getMorningCheck()
+    this.timer  = setInterval(() => {
+        this.initData();
+    }, 600000);
+    this.timer2 = setInterval(this.getCurrentTime, 1000);
+    setTimeout(()=>{
+       this.initData();
+    },1500)
+
+    // ------------ 1. 禁止左右滑动：添加事件监听 ------------
+    document.addEventListener('touchstart', this.handleTouchStart);
+    document.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+    document.addEventListener('wheel', this.handleWheel, { passive: false });
+    // 监听窗口resize，确保图表自适应
+    window.addEventListener('resize', this.handleWindowResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('popstate', this.handlePopState);
+    clearInterval(this.timer);
+    clearInterval(this.timer2);
+
+    // ------------ 移除滑动事件监听 ------------
+    document.removeEventListener('touchstart', this.handleTouchStart);
+    document.removeEventListener('touchmove', this.handleTouchMove);
+    document.removeEventListener('wheel', this.handleWheel);
+    window.removeEventListener('resize', this.handleWindowResize);
+
+    // 销毁图表实例，避免内存泄漏
+    if (this.chartOne) this.chartOne.dispose();
+    if (this.chartFour) this.chartFour.dispose();
+  },
+  computed: {
+    groupedBreakfastList() {
+      if (!this.onedataList || this.onedataList.length === 0) {
+        return [];
+      }
+      const hasTypeName = this.onedataList.some(item => item.dishesTypeName);
+      if (!hasTypeName) {
+        return [{ typeName: '', dishes: this.onedataList, isBreakfastMingdang: false }];
+      }
+      const typeMap = {};
+      this.onedataList.forEach(item => {
+        const typeName = item.dishesTypeName || '其他';
+        if (!typeMap[typeName]) typeMap[typeName] = [];
+        typeMap[typeName].push(item);
+      });
+      const result = [];
+      if (typeMap['早餐-明档']) {
+        result.push({ typeName: '早餐-明档', dishes: typeMap['早餐-明档'], isBreakfastMingdang: true });
+        delete typeMap['早餐-明档'];
+      }
+      if (typeMap['早餐明档']) {
+        result.push({ typeName: '早餐明档', dishes: typeMap['早餐明档'], isBreakfastMingdang: true });
+        delete typeMap['早餐明档'];
+      }
+      Object.keys(typeMap).forEach(typeName => {
+        if (typeMap[typeName].length > 0) {
+          result.push({ typeName, dishes: typeMap[typeName], isBreakfastMingdang: false });
+        }
+      });
+      return result;
+    },
+    groupedLunchList() {
+      if (!this.twodataList || this.twodataList.length === 0) return [];
+      const hasTypeName = this.twodataList.some(item => item.dishesTypeName);
+      if (!hasTypeName) return [{ typeName: '', dishes: this.twodataList }];
+      const typeMap = {};
+      this.twodataList.forEach(item => {
+        const typeName = item.dishesTypeName || '其他';
+        if (!typeMap[typeName]) typeMap[typeName] = [];
+        typeMap[typeName].push(item);
+      });
+      const lunchOrder = ['午餐-荤菜', '午餐-炒菜', '午餐-素菜', '午餐-汤类', '午餐-五谷杂粮', '荤菜', '炒菜', '素菜', '汤类', '五谷杂粮','杂粮'];
+      const result = [];
+      lunchOrder.forEach(typeName => {
+        if (typeMap[typeName]?.length > 0) {
+          result.push({ typeName, dishes: typeMap[typeName] });
+          delete typeMap[typeName];
+        }
+      });
+      Object.keys(typeMap).forEach(typeName => {
+        if (typeMap[typeName].length > 0) result.push({ typeName, dishes: typeMap[typeName] });
+      });
+      return result;
+    },
+    groupedAfternoonTeaList() {
+      if (!this.threedataList || this.threedataList.length === 0) return [];
+      const hasTypeName = this.threedataList.some(item => item.dishesTypeName);
+      if (!hasTypeName) return [{ typeName: '', dishes: this.threedataList }];
+      const typeMap = {};
+      this.threedataList.forEach(item => {
+        const typeName = item.dishesTypeName || '其他';
+        if (!typeMap[typeName]) typeMap[typeName] = [];
+        typeMap[typeName].push(item);
+      });
+      return Object.keys(typeMap).map(typeName => ({ typeName, dishes: typeMap[typeName] }));
+    },
+    groupedDinnerList() {
+      if (!this.fourdataList || this.fourdataList.length === 0) return [];
+      const hasTypeName = this.fourdataList.some(item => item.dishesTypeName);
+      if (!hasTypeName) return [{ typeName: '', dishes: this.fourdataList }];
+      const typeMap = {};
+      this.fourdataList.forEach(item => {
+        const typeName = item.dishesTypeName || '其他';
+        if (!typeMap[typeName]) typeMap[typeName] = [];
+        typeMap[typeName].push(item);
+      });
+      return Object.keys(typeMap).map(typeName => ({ typeName, dishes: typeMap[typeName] }));
+    },
+    groupedNightSnackList() {
+      if (!this.fivedataList || this.fivedataList.length === 0) return [];
+      const hasTypeName = this.fivedataList.some(item => item.dishesTypeName);
+      if (!hasTypeName) return [{ typeName: '', dishes: this.fivedataList }];
+      const typeMap = {};
+      this.fivedataList.forEach(item => {
+        const typeName = item.dishesTypeName || '其他';
+        if (!typeMap[typeName]) typeMap[typeName] = [];
+        typeMap[typeName].push(item);
+      });
+      return Object.keys(typeMap).map(typeName => ({ typeName, dishes: typeMap[typeName] }));
+    }
+  },
+  methods: {
+    // ------------ 2. 禁止左右滑动相关方法 ------------
+    handlePopState(event) {
+      event.preventDefault();
+    },
+    // 记录触摸起始位置
+    handleTouchStart(e) {
+      this.touchStartX = e.touches[0].clientX;
+      this.touchStartY = e.touches[0].clientY;
+    },
+    // 阻止横向滑动
+    handleTouchMove(e) {
+      if (!this.touchStartX || !this.touchStartY) return;
+      const diffX = e.touches[0].clientX - this.touchStartX;
+      const diffY = e.touches[0].clientY - this.touchStartY;
+      // 横向滑动距离大于纵向，阻止默认行为（避免浏览器前进/后退）
+      if (Math.abs(diffX) > Math.abs(diffY)) {
+        e.preventDefault();
+      }
+    },
+    // 阻止横向滚轮
+    handleWheel(e) {
+      if (e.deltaX !== 0) {
+        e.preventDefault();
+      }
+    },
+    // 窗口resize时，图表自适应
+    handleWindowResize() {
+      if (this.chartOne) this.chartOne.resize();
+      if (this.chartFour) this.chartFour.resize();
+    },
+
+    // 原有业务方法
+    handleLogin(){
+      let param = {
+        code: "",
+        loginType: "PHONE_PASSWORD",
+        password: "e07e2a30f7431f4aa173e8ba4e97fedc",
+        phoneUuid: "",
+        username: "60064de642247faee1559140f80c7246",
+        uuid: "",
+        verificationCode: ""
+      }
+      this.$store.dispatch('Login',param).then(res => {}).catch(() => {})
+    },
+    refrespage(){
+      this.$router.go(0);
+      return;
+    },
+    getMorningCheck(){
+       getMorningCheckInfoApi({type:1}).then(res => {
+        this.morningCheckNum=res.data.morningCheckNum;
+        this.morningCheckAbno=res.data.morningCheckAbno;
+        this.healthNum=res.data.healthNum;
+        this.healthAbno=res.data.healthAbno;
+        this.sysTime=Number(res.data.thisTime)
+        // 确保DOM渲染完成后初始化图表
+        this.$nextTick(() => {
+          this.initChartOne();
+          this.initChartFour();
+        });
+      });
+    },
+    getCurrentTime() {
+      this.countTime = this.countTime+1000;
+      var nowTime = this.countTime+this.sysTime
+      const now = new Date(nowTime);
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, '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.queryParams.applyDate=this.dateTime;
+      getCurrentRecipeListApi(this.queryParams).then(response => {
+          if(response.rows!=null&&response.rows.length>0){
+            const datas=  response.rows[0].detail.detailList;
+            if(datas!=null&&datas.length>0){
+              datas.map((item,index)=>{
+                if("1"==item.mealtimeType){
+                  if(item.dishesList!=null&&item.dishesList.length>0){
+                    this.onedataList=item.dishesList;
+                  }
+                }else if("2"==item.mealtimeType){
+                  if(item.dishesList!=null&&item.dishesList.length>0){
+                    this.twodataList=item.dishesList;
+                  }
+                }else if("3"==item.mealtimeType){
+                  if(item.dishesList!=null&&item.dishesList.length>0){
+                    this.threedataList=item.dishesList;
+                  }
+                }else if("4"==item.mealtimeType){
+                  if(item.dishesList!=null&&item.dishesList.length>0){
+                    this.fourdataList=item.dishesList;
+                  }
+                }else if(""==item.mealtimeType){
+                  if(item.dishesList!=null&&item.dishesList.length>0){
+                    this.fivedataList=item.dishesList;
+                  }
+                }
+              })
+            }
+          }
+      });
+      this.queryParams.pageNum=1;
+      this.queryParams.pageSize=20;
+      getCertificateListApi(this.queryParams).then(res => {
+        this.staffNums=res.rows;
+      });
+    },
+    goTarget(href) {
+      window.open(href, "_blank");
+    },
+    // ------------ 3. 图表初始化（统一配置，确保大小一致） ------------
+    initChartOne() {
+      this.morningCheckPerc = this.morningCheckNum == 0 ? 0 : ((this.morningCheckNum - this.morningCheckAbno) / this.morningCheckNum * 100).toFixed(2);
+      // 确保容器存在再初始化
+      if (!this.$refs.chartone) return;
+      this.chartOne = echarts.init(this.$refs.chartone);
+      // 统一图表配置
+      const option = {
+        title: {
+            text: `${this.morningCheckPerc}%`,
+            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 },
+        series: [{
+            name: 'Line 1',
+            type: 'pie',
+            clockWise: true,
+            radius: ['76%', '96%'], // 统一环形大小
+            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' }, { offset: 1, color: '#367bec' }]
+                    }
+                  }
+                }
+              },
+              { name: '02', value: this.morningCheckAbno }
+            ]
+        }]
+      };
+      this.chartOne.setOption(option);
+    },
+    initChartFour() {
+      this.healthPerc = this.healthNum == 0 ? 0 : ((this.healthNum - this.healthAbno) / this.healthNum * 100).toFixed(2);
+      if (!this.$refs.chartfour) return;
+      this.chartFour = echarts.init(this.$refs.chartfour);
+      // 完全复用左边图表的配置，仅修改数据
+      const option = {
+        title: {
+            text: `${this.healthPerc}%`,
+            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 },
+        series: [{
+            name: 'Line 1',
+            type: 'pie',
+            clockWise: true,
+            radius: ['76%', '96%'], // 与左边图表统一
+            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' }, { offset: 1, color: '#367bec' }]
+                    }
+                  }
+                }
+              },
+              { name: '02', value: this.healthAbno }
+            ]
+        }]
+      };
+      this.chartFour.setOption(option);
+    },
+    closeView(){
+      Cookies.remove('password')
+      this.$router.push({ path:'/login' });
+    },
+    getDisplayTypeName(typeName) {
+      if (!typeName) return '';
+      return typeName.replace(/^(早餐-|午餐-|下午茶-|晚餐-|夜宵-)/, '');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  /* ------------ 4. 禁止横向滚动样式 ------------ */
+  html, body, #app, .container {
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden !important; /* 关键：禁止横向滚动 */
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .container {
+    height: 100%;
+    width: 100%;
+    background-image: url("../assets/images/background.jpg");
+    background-size: cover;
+    background-position: center;
+    overflow-y: hidden; /* 保留垂直滚动（如果内容超出屏幕） */
+    // display: flex;
+    // justify-content: center;
+    // flex-wrap: wrap;
+  }
+  .topdiv{
+     width: 100%;
+     display: flex;
+     background-image: url("../assets/images/canteen1.png");
+     background-size: cover;
+     background-position: center;
+     height: 5%;
+     margin-bottom: 20px;
+  }
+  .titlediv{
+    display: flex;
+    width: 40%;
+    justify-content: center;
+    font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+    font-weight: normal;
+    font-size: 34px;
+    color: #E1EFFF;
+  }
+  .dateTimeClass{
+    display: flex;
+    justify-content: center;
+    color:#fff;
+    width:30%;
+    align-items: center;
+  }
+  .hourTimeClass{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color:#fff;
+    width:30%;
+  }
+  .titlediv2{
+    display: flex;
+    width: 100%;
+    // height: 10px;
+    justify-content: center;
+    align-items: flex-start;
+    color:#fff;
+    font-size: 28px;
+    // background-image: url("../assets/images/caidanline.png");
+    // background-size: cover;
+    // background-position:bottom;
+  }
+  .contentclass{
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    flex-wrap: wrap;
+    color:#fff; 
+  }
+  .fegexian{
+    width: 50%;
+    height: 5px;
+    // background-image: url("../assets/images/caidanline.png");
+    // background-size: cover;
+    // background-position: center;
+  }
+  .fegexian2{
+    width: 50%;
+    height: 5px;
+    background-image: url("../assets/images/caidanline.png");
+    background-size: cover;
+    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;
+    display: flex;
+    align-items: center;
+    margin: 1%;
+  }
+  .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;
+  }
+  .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;
+    padding-bottom: 1%;
+  }
+  .dishcontentrefclass{
+    width: 22%;
+    margin-left: 2%;
+    margin-right: 1%;
+    margin-bottom: 10px;
+  }
+  .dishtypeclass{
+    width: 20%;
+    margin-left: 2%;
+    margin-bottom: 1%;
+    font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+    font-weight: bold;
+    font-size: 24px;
+    color: #6FA9FF;
+    text-align: left;
+    font-style: normal;
+  }
+  .partthree{
+    height: 100%;
+    width: 85%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .partthree_title{
+     display: flex;
+     color:#fff;
+     font-size: 25px;
+     justify-content: center;
+     margin-bottom: 5px;
+  }
+  .partthree_title2{
+      display: flex;
+      height: 20px;
+      width: 100%;
+      justify-content: 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);
+  }
+  table, th, td {
+      text-align: center;
+  }
+</style>
diff --git a/src/views/view.vue b/src/views/view.vue
index 1156608..bf1ecc2 100644
--- a/src/views/view.vue
+++ b/src/views/view.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="topdiv" style="margin-bottom: 1%;">
+    <div class="topdiv">
       <div class="dateTimeClass">
         <span style="color:#D8E2FF;font-size: 24px;margin-top: 12px;">{{dateTime}}</span>
       </div>
@@ -8,187 +8,130 @@
         公示大屏
       </div>
       <div class="hourTimeClass">
-        <span style="color:#D8E2FF;font-size: 24px;margin-top: 12px;">{{hourTime}}</span> 
+        <span style="color:#D8E2FF;font-size: 24px;margin-top: 12px;">{{hourTime}}</span>
       </div>
-      <!-- <img src="@/assets/images/closeView.png" style="width: 24px;height: 24px;margin: 20px;" @click="closeView"/> -->
-    </div>
-    <div class="titlediv2">
-        健康晨检
-    </div>
-    <div class="fegexian" style="margin: 10px auto;"></div> 
-    <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: 50%;">
-              <div style="width: 100%;height: 100%;">
-                  <div style="height: 100%;width: 100%;" ref="chartone"></div>
+    </div> 
+    <div style="height: auto;width: 100%;margin-bottom: 40px;">
+      <div class="partthree_title"><span>健康晨检</span></div>
+      <div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div> 
+      <div class="contentclass">
+        <table style="width: 100%;height: 100%;">
+          <tr>
+            <td>晨检</td>
+            <td>健康证</td>
+          </tr>
+          <tr style="height: 100%;width: 100%;">
+            <!-- 图表容器：统一设置固定宽高+100%填充，避免尺寸偏差 -->
+            <td rowspan="5" style="width: 50%;">
+                <div style="width: 100%;height: 240px;display: flex;align-items: center;justify-content: center;">
+                    <div ref="chartone" style="width: 90%;height: 90%;"></div>
+                </div>
+            </td>
+            <td rowspan="5" style="width: 50%;">
+              <div style="width: 100%;height: 240px;display: flex;align-items: center;justify-content: center;">
+                <div ref="chartfour" style="width: 90%;height: 90%;"></div>
               </div>
-          </td>
-          <!-- <td rowspan="5" style="height: 100%;width: 25%;">
-            <div style="width: 100%;height: 100%;">
-              <div style="height: 100%;" ref="charttwo"></div>
-            </div>
-          </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: 250px;width: 50%;">
-            <div style="width: 100%;height: 100%;">
-              <div style="height: 100%;width: 100%;" ref="chartfour"></div>
-            </div>
-          </td>
-        </tr>
-        <tr></tr>
-        <tr></tr>
-        <tr></tr>
-        <tr></tr>
-        <tr>
-          <td>晨检正常：{{Number(morningCheckNum)-Number(morningCheckAbno)}}人</td>
-          <!-- <td>晨检正常：{{handCheckNum}}人</td>
-          <td>晨检正常：{{faceCheckNum}}人</td> -->
-          <td>正常：{{Number(healthNum)-Number(healthAbno)}}人</td>
-        </tr>
-        <tr>
-          <td>晨检异常：{{morningCheckAbno}}人</td>
-          <!-- <td>晨检异常：{{handCheckAbno}}人</td>
-          <td>晨检异常：{{faceCheckAbno}}人</td> -->
-          <td>过期：{{healthAbno}}人</td>
-        </tr>
-      </table>
+            </td>
+          </tr>
+          <tr></tr>
+          <tr></tr>
+          <tr></tr>
+          <tr></tr>
+          <tr>
+            <td>晨检正常：{{Number(morningCheckNum)-Number(morningCheckAbno)}}人</td>
+            <td>正常：{{Number(healthNum)-Number(healthAbno)}}人</td>
+          </tr>
+          <tr>
+            <td>晨检异常：{{morningCheckAbno}}人</td>
+            <td>过期：{{healthAbno}}人</td>
+          </tr>
+        </table>
+      </div>
     </div>
-
-    <div class="titlediv2">
-      今日菜品
-    </div>
-    <div class="fegexian"></div>
-
-    <div class="contentclass">
-      <div style="width: 80%;border: 1px solid rgba(191,191,255,0.04);margin-top: 10px;">
-        <div class="dishclass">
-          <img src="../assets/images/Frame1.png"/><span>早餐供应</span><img src="../assets/images/breakfast.png" style="float: right;"/>
+    <div style="height: auto;width: 100%;margin-bottom: 40px;">
+      <div class="partthree_title"><span>本周菜谱</span></div>
+      <div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div>
+      <div class="contentclass">
+        <div style="width: 80%;border: 1px solid rgba(191,191,255,0.04);margin-top: 10px;">
+          <div class="dishclass">
+            <img src="../assets/images/Frame1.png"/><span>早餐供应</span><img src="../assets/images/breakfast.png" style="float: right;"/>
+          </div>
+          <div class="dishcontentclass">
+            <template v-if="onedataList.length>0">
+              <template v-for="(group, groupIndex) in groupedBreakfastList">
+                <div class="dishcontentrefclass" v-for="item in group.dishes" :key="item.id || item.dishesName">
+                  {{item.dishesName}}&nbsp;&nbsp;&nbsp;&nbsp;
+                </div>
+              </template>
+            </template>
+          </div>
         </div>
-        <div class="dishcontentclass">
-          <template v-if="onedataList.length>0">
-            <template v-for="(group, groupIndex) in groupedBreakfastList">
-              <!-- 早餐明档结束后强制换行 -->
-              <!-- <div v-if="!group.isBreakfastMingdang && groupIndex > 0 && groupedBreakfastList[groupIndex - 1].isBreakfastMingdang" style="width: 100%; flex-basis: 100%; height: 0;"></div> -->
-              <!-- 显示该类型下的菜品 -->
-              <div class="dishcontentrefclass" v-for="item in group.dishes" :key="item.id || item.dishesName">
+        <div style="width: 80%;border: 2px solid rgba(191,191,255,0.04);margin-top: 10px;">
+          <div class="dishclass">
+            <img src="../assets/images/Frame2.png"/><span>午餐供应</span><img src="../assets/images/lunch.png" style="float: right;"/>
+          </div>
+          <div class="dishcontentclass">
+            <template v-if="twodataList.length>0">
+              <div v-for="(group, groupIndex) in groupedLunchList" :key="groupIndex" style="width: 100%;display: flex;align-items: baseline;">
+                <div class="dishtypeclass" v-if="group.dishes.length>0 && group.typeName" :key="'type-' + groupIndex">
+                  {{getDisplayTypeName(group.typeName)}}
+                </div>
+                <div style="width: 80%;display: flex;align-items: center;flex-wrap: wrap;">
+                  <div class="dishcontentrefclass" style="width: 30%;" v-for="item in group.dishes" :key="item.id || item.dishesName">
+                    {{item.dishesName}}&nbsp;&nbsp;&nbsp;&nbsp;
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+        <div style="width: 80%;border: 2px solid rgba(191,191,255,0.04);margin-top: 10px;">
+          <div class="dishclass">
+            <img src="../assets/images/Frame.png"/><span>晚餐供应</span><img src="../assets/images/dinner.png" style="float: right;"/>
+          </div>
+          <div class="dishcontentclass">
+            <template v-if="fourdataList.length>0">
+              <div class="dishcontentrefclass" v-for="item in fourdataList" :key="item.id || item.dishesName">
                 {{item.dishesName}}&nbsp;&nbsp;&nbsp;&nbsp;
               </div>
             </template>
-          </template>
+          </div>
         </div>
       </div>
-      <div style="width: 80%;border: 2px solid rgba(191,191,255,0.04);margin-top: 10px;">
-        <div class="dishclass">
-          <img src="../assets/images/Frame2.png"/><span>午餐供应</span><img src="../assets/images/lunch.png" style="float: right;"/>
-        </div>
-        <div class="dishcontentclass">
-          <template v-if="twodataList.length>0">
-            <div v-for="(group, groupIndex) in groupedLunchList" :key="groupIndex" style="width: 100%;display: flex;align-items: baseline;">
-              <!-- 显示类型名称（如果有类型名称才显示） -->  
-              <div class="dishtypeclass" v-if="group.dishes.length>0 && group.typeName" :key="'type-' + groupIndex">
-                {{getDisplayTypeName(group.typeName)}}
-              </div>
-              <div style="width: 80%;display: flex;align-items: center;flex-wrap: wrap;">
-                <!-- 显示该类型下的菜品 -->
-                <div class="dishcontentrefclass" style="width: 30%;" v-for="item in group.dishes" :key="item.id || item.dishesName">
-                  {{item.dishesName}}&nbsp;&nbsp;&nbsp;&nbsp;
-                </div>
-              </div> 
-            </div>
-          </template>
-        </div>
-      </div>
-      <!-- <div style="width: 80%;border: 2px solid rgba(191,191,255,0.04);margin-top: 20px;">
-        <div class="dishclass">
-          <img src="../assets/images/Frame3.png"/><span>下午茶供应</span><img src="../assets/images/afternoontea.png" style="float: right;"/>
-        </div>
-        <div class="dishcontentclass">
-          <template v-if="threedataList.length>0">
-            <template v-for="(group, groupIndex) in groupedAfternoonTeaList"> 
-              <div class="dishtypeclass" v-if="group.dishes.length>0 && group.typeName" :key="'type-' + groupIndex">
-                {{getDisplayTypeName(group.typeName)}}
-              </div> 
-              <div class="dishcontentrefclass" v-for="item in group.dishes" :key="item.id || item.dishesName">
-                {{item.dishesName}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.salePrice}}
-              </div>
-            </template>
-          </template>
-        </div>
-      </div> -->
-      <div style="width: 80%;border: 2px solid rgba(191,191,255,0.04);margin-top: 10px;">
-        <div class="dishclass">
-          <img src="../assets/images/Frame.png"/><span>晚餐供应</span><img src="../assets/images/dinner.png" style="float: right;"/>
-        </div>
-        <div class="dishcontentclass">
-          <template v-if="fourdataList.length>0"> 
-            <div class="dishcontentrefclass" v-for="item in fourdataList" :key="item.id || item.dishesName">
-              {{item.dishesName}}&nbsp;&nbsp;&nbsp;&nbsp;
-            </div>
-          </template>
-        </div>
-      </div>
-      <!-- <div style="width: 80%;border: 2px solid rgba(191,191,255,0.04);margin-top: 20px;">
-        <div class="dishclass">
-          <img src="../assets/images/Frame4.png"/><span>夜宵供应</span><img src="../assets/images/nightsnack.png" style="float: right;"/>
-        </div>
-        <div class="dishcontentclass">
-          <template v-if="fivedataList.length>0">
-            <template v-for="(group, groupIndex) in groupedNightSnackList"> 
-              <div class="dishtypeclass" v-if="group.dishes.length>0 && group.typeName" :key="'type-' + groupIndex">
-                {{getDisplayTypeName(group.typeName)}}
-              </div> 
-              <div class="dishcontentrefclass" v-for="item in group.dishes" :key="item.id || item.dishesName">
-                {{item.dishesName}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.salePrice}}
-              </div>
-            </template>
-          </template>
-        </div>
-      </div> -->
     </div>
-   <div style="height: auto;width: 80%;margin-top: 1%;">
+    <div style="height: auto;width: 90%;margin: 0 auto;">
       <div class="partthree_title"><span>证件公示(健康证)</span></div>
       <div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div>
       <div style="width: 100%; height:100%; ">
-          <carousel :per-page="4" :mouse-drag="true" :autoplay="true"  :autoplay-timeout="2000"  :loop="false" >
+          <carousel :per-page="4" :mouse-drag="true" :autoplay="true" :autoplay-timeout="4000"  :loop="true" >
               <slide v-for="(item, index) in staffNums" :key="index">
-                <div style="padding: 10px;;width: 300px;overflow: hidden;">
-                  <img style="width: 270px; object-fit: cover;" :src="item.healthCertFrontImg"/>
+                <div style="padding: 10px;;width: 240px;overflow: hidden;">
+                  <img style="width: 240px; object-fit: cover;" :src="item.healthCertFrontImg"/>
                 </div>
               </slide>
-            </carousel>
+          </carousel>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  import Vue from 'vue'
-  import VueCarousel from 'vue-carousel';
-  Vue.use(VueCarousel); 
-  import axios from 'axios';
-  import Cookies from 'js-cookie';
-  import { getCurrentRecipeListApi,getCertificateListApi,getMorningCheckInfoApi } from "@/api/view";
-  import * as echarts from 'echarts';
+import Vue from 'vue'
+import VueCarousel from 'vue-carousel';
+Vue.use(VueCarousel);
+import axios from 'axios';
+import Cookies from 'js-cookie';
+import { getCurrentRecipeListApi,getCertificateListApi,getMorningCheckInfoApi } from "@/api/view";
+import * as echarts from 'echarts';
+
 export default {
   name: "Index",
   data() {
     return {
-      // 版本号
       version: "24.7.1",
       mealNum:0,
       dateTime:'',
-      hourTime:'', 
+      hourTime:'',
       countTime:0,
       sysTime:0,
       timer:null,
@@ -197,18 +140,10 @@ export default {
       morningCheckPerc:0,//晨检比
       morningCheckAbno:0,//晨检异常数
 
-      handCheckNum:0, //手晨检数
-      handCheckPerc:0,//手晨检比
-      handCheckAbno:0,//手晨检异常数
-
-      faceCheckNum:0, //脸晨检数
-      faceCheckPerc:0,//脸晨检比
-      faceCheckAbno:0,//脸晨检异常数
-
       healthNum:0, //健康证数
       healthPerc:0,//健康证比
       healthAbno:0,//健康证异常数
-     
+
       onedataList:[{"dishesName":"无菜单","salePrice":""}],
       twodataList:[{"dishesName":"无菜单","salePrice":""}],
       threedataList:[{"dishesName":"无菜单","salePrice":""}],
@@ -226,255 +161,185 @@ export default {
         canteenId:null,
         stallId:null,
         recipeName:"",
-      }
+      },
+      // 存储图表实例，用于销毁和resize
+      chartOne: null,
+      chartFour: null
     };
   },
   created() {
-     // this.initData();  // 你的业务逻辑
   },
   mounted() {
     this.handleLogin()
     window.addEventListener('popstate', this.handlePopState);
-    this.getMorningCheck() 
-    this.timer  = setInterval(() => { 
-        this.initData();  // 你的业务逻辑
-    }, 600000); 
-    this.timer2 = setInterval(this.getCurrentTime, 1000); // 每秒更新时间
+    this.getMorningCheck()
+    this.timer  = setInterval(() => {
+        this.initData();
+    }, 600000);
+    this.timer2 = setInterval(this.getCurrentTime, 1000);
     setTimeout(()=>{
        this.initData();
     },1500)
+
+    // ------------ 1. 禁止左右滑动：添加事件监听 ------------
+    document.addEventListener('touchstart', this.handleTouchStart);
+    document.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+    document.addEventListener('wheel', this.handleWheel, { passive: false });
+    // 监听窗口resize，确保图表自适应
+    window.addEventListener('resize', this.handleWindowResize);
   },
   beforeDestroy() {
     window.removeEventListener('popstate', this.handlePopState);
-    clearInterval(this.timer);  // 必须清除定时器！
-    clearInterval(this.timer2);  // 必须清除定时器！
+    clearInterval(this.timer);
+    clearInterval(this.timer2);
+
+    // ------------ 移除滑动事件监听 ------------
+    document.removeEventListener('touchstart', this.handleTouchStart);
+    document.removeEventListener('touchmove', this.handleTouchMove);
+    document.removeEventListener('wheel', this.handleWheel);
+    window.removeEventListener('resize', this.handleWindowResize);
+
+    // 销毁图表实例，避免内存泄漏
+    if (this.chartOne) this.chartOne.dispose();
+    if (this.chartFour) this.chartFour.dispose();
   },
   computed: {
-    // 早餐按类型分组，确保"早餐-明档"或"早餐明档"在第一行
     groupedBreakfastList() {
       if (!this.onedataList || this.onedataList.length === 0) {
         return [];
       }
-      // 检查是否有类型字段
       const hasTypeName = this.onedataList.some(item => item.dishesTypeName);
       if (!hasTypeName) {
-        // 如果没有类型信息，直接显示所有数据，不显示类型名称
-        return [{
-          typeName: '',
-          dishes: this.onedataList,
-          isBreakfastMingdang: false
-        }];
+        return [{ typeName: '', dishes: this.onedataList, isBreakfastMingdang: false }];
       }
-      // 按类型分组
       const typeMap = {};
       this.onedataList.forEach(item => {
         const typeName = item.dishesTypeName || '其他';
-        if (!typeMap[typeName]) {
-          typeMap[typeName] = [];
-        }
+        if (!typeMap[typeName]) typeMap[typeName] = [];
         typeMap[typeName].push(item);
       });
-      // 转换为数组，确保"早餐-明档"或"早餐明档"排在最前面
       const result = [];
-      // 先添加"早餐-明档"或"早餐明档"
       if (typeMap['早餐-明档']) {
-        result.push({
-          typeName: '早餐-明档',
-          dishes: typeMap['早餐-明档'],
-          isBreakfastMingdang: true
-        });
+        result.push({ typeName: '早餐-明档', dishes: typeMap['早餐-明档'], isBreakfastMingdang: true });
         delete typeMap['早餐-明档'];
       }
       if (typeMap['早餐明档']) {
-        result.push({
-          typeName: '早餐明档',
-          dishes: typeMap['早餐明档'],
-          isBreakfastMingdang: true
-        });
+        result.push({ typeName: '早餐明档', dishes: typeMap['早餐明档'], isBreakfastMingdang: true });
         delete typeMap['早餐明档'];
       }
-      // 添加其他类型（不显示类型名称，所以typeName可以保留用于分组）
       Object.keys(typeMap).forEach(typeName => {
-        if (typeMap[typeName] && typeMap[typeName].length > 0) {
-          result.push({
-            typeName: typeName,
-            dishes: typeMap[typeName],
-            isBreakfastMingdang: false
-          });
+        if (typeMap[typeName].length > 0) {
+          result.push({ typeName, dishes: typeMap[typeName], isBreakfastMingdang: false });
         }
       });
       return result;
     },
-    // 午餐按类型分组，按照 午餐-荤菜、午餐-炒菜、午餐-素菜、午餐-汤类、午餐-五谷杂粮 的顺序
     groupedLunchList() {
-      if (!this.twodataList || this.twodataList.length === 0) {
-        return [];
-      }
-      // 检查是否有类型字段
+      if (!this.twodataList || this.twodataList.length === 0) return [];
       const hasTypeName = this.twodataList.some(item => item.dishesTypeName);
-      if (!hasTypeName) {
-        // 如果没有类型信息，直接显示所有数据，不显示类型名称
-        return [{
-          typeName: '',
-          dishes: this.twodataList
-        }];
-      }
-      // 按类型分组
+      if (!hasTypeName) return [{ typeName: '', dishes: this.twodataList }];
       const typeMap = {};
       this.twodataList.forEach(item => {
         const typeName = item.dishesTypeName || '其他';
-        if (!typeMap[typeName]) {
-          typeMap[typeName] = [];
-        }
+        if (!typeMap[typeName]) typeMap[typeName] = [];
         typeMap[typeName].push(item);
       });
-      // 按照指定顺序排列：支持"午餐-荤菜"、"午餐-炒菜"等格式，也支持"荤菜"、"炒菜"等格式
       const lunchOrder = ['午餐-荤菜', '午餐-炒菜', '午餐-素菜', '午餐-汤类', '午餐-五谷杂粮', '荤菜', '炒菜', '素菜', '汤类', '五谷杂粮','杂粮'];
       const result = [];
-      // 先按顺序添加（优先匹配带"午餐-"前缀的）
       lunchOrder.forEach(typeName => {
-        if (typeMap[typeName] && typeMap[typeName].length > 0) {
-          result.push({
-            typeName: typeName,
-            dishes: typeMap[typeName]
-          });
+        if (typeMap[typeName]?.length > 0) {
+          result.push({ typeName, dishes: typeMap[typeName] });
           delete typeMap[typeName];
         }
       });
-      // 添加其他类型
       Object.keys(typeMap).forEach(typeName => {
-        if (typeMap[typeName] && typeMap[typeName].length > 0) {
-          result.push({
-            typeName: typeName,
-            dishes: typeMap[typeName]
-          });
-        }
+        if (typeMap[typeName].length > 0) result.push({ typeName, dishes: typeMap[typeName] });
       });
       return result;
     },
-    // 下午茶按类型分组
     groupedAfternoonTeaList() {
-      if (!this.threedataList || this.threedataList.length === 0) {
-        return [];
-      }
-      // 检查是否有类型字段
+      if (!this.threedataList || this.threedataList.length === 0) return [];
       const hasTypeName = this.threedataList.some(item => item.dishesTypeName);
-      if (!hasTypeName) {
-        // 如果没有类型信息，直接显示所有数据，不显示类型名称
-        return [{
-          typeName: '',
-          dishes: this.threedataList
-        }];
-      }
-      // 按类型分组
+      if (!hasTypeName) return [{ typeName: '', dishes: this.threedataList }];
       const typeMap = {};
       this.threedataList.forEach(item => {
         const typeName = item.dishesTypeName || '其他';
-        if (!typeMap[typeName]) {
-          typeMap[typeName] = [];
-        }
+        if (!typeMap[typeName]) typeMap[typeName] = [];
         typeMap[typeName].push(item);
       });
-      // 转换为数组
-      const result = [];
-      Object.keys(typeMap).forEach(typeName => {
-        if (typeMap[typeName] && typeMap[typeName].length > 0) {
-          result.push({
-            typeName: typeName,
-            dishes: typeMap[typeName]
-          });
-        }
-      });
-      return result;
+      return Object.keys(typeMap).map(typeName => ({ typeName, dishes: typeMap[typeName] }));
     },
-    // 晚餐按类型分组
     groupedDinnerList() {
-      if (!this.fourdataList || this.fourdataList.length === 0) {
-        return [];
-      }
-      // 检查是否有类型字段
+      if (!this.fourdataList || this.fourdataList.length === 0) return [];
       const hasTypeName = this.fourdataList.some(item => item.dishesTypeName);
-      if (!hasTypeName) {
-        // 如果没有类型信息，直接显示所有数据，不显示类型名称
-        return [{
-          typeName: '',
-          dishes: this.fourdataList
-        }];
-      }
-      // 按类型分组
+      if (!hasTypeName) return [{ typeName: '', dishes: this.fourdataList }];
       const typeMap = {};
       this.fourdataList.forEach(item => {
         const typeName = item.dishesTypeName || '其他';
-        if (!typeMap[typeName]) {
-          typeMap[typeName] = [];
-        }
+        if (!typeMap[typeName]) typeMap[typeName] = [];
         typeMap[typeName].push(item);
       });
-      // 转换为数组
-      const result = [];
-      Object.keys(typeMap).forEach(typeName => {
-        if (typeMap[typeName] && typeMap[typeName].length > 0) {
-          result.push({
-            typeName: typeName,
-            dishes: typeMap[typeName]
-          });
-        }
-      });
-      return result;
+      return Object.keys(typeMap).map(typeName => ({ typeName, dishes: typeMap[typeName] }));
     },
-    // 夜宵按类型分组
     groupedNightSnackList() {
-      if (!this.fivedataList || this.fivedataList.length === 0) {
-        return [];
-      }
-      // 检查是否有类型字段
+      if (!this.fivedataList || this.fivedataList.length === 0) return [];
       const hasTypeName = this.fivedataList.some(item => item.dishesTypeName);
-      if (!hasTypeName) {
-        // 如果没有类型信息，直接显示所有数据，不显示类型名称
-        return [{
-          typeName: '',
-          dishes: this.fivedataList
-        }];
-      }
-      // 按类型分组
+      if (!hasTypeName) return [{ typeName: '', dishes: this.fivedataList }];
       const typeMap = {};
       this.fivedataList.forEach(item => {
         const typeName = item.dishesTypeName || '其他';
-        if (!typeMap[typeName]) {
-          typeMap[typeName] = [];
-        }
+        if (!typeMap[typeName]) typeMap[typeName] = [];
         typeMap[typeName].push(item);
       });
-      // 转换为数组
-      const result = [];
-      Object.keys(typeMap).forEach(typeName => {
-        if (typeMap[typeName] && typeMap[typeName].length > 0) {
-          result.push({
-            typeName: typeName,
-            dishes: typeMap[typeName]
-          });
-        }
-      });
-      return result;
+      return Object.keys(typeMap).map(typeName => ({ typeName, dishes: typeMap[typeName] }));
     }
   },
   methods: {
+    // ------------ 2. 禁止左右滑动相关方法 ------------
     handlePopState(event) {
-      // 阻止默认行为，即不后退
       event.preventDefault();
-      // 可以在这里添加其他逻辑，比如提示用户是否真的要离开当前页面
-      console.log('Pop state event triggered');
     },
+    // 记录触摸起始位置
+    handleTouchStart(e) {
+      this.touchStartX = e.touches[0].clientX;
+      this.touchStartY = e.touches[0].clientY;
+    },
+    // 阻止横向滑动
+    handleTouchMove(e) {
+      if (!this.touchStartX || !this.touchStartY) return;
+      const diffX = e.touches[0].clientX - this.touchStartX;
+      const diffY = e.touches[0].clientY - this.touchStartY;
+      // 横向滑动距离大于纵向，阻止默认行为（避免浏览器前进/后退）
+      if (Math.abs(diffX) > Math.abs(diffY)) {
+        e.preventDefault();
+      }
+    },
+    // 阻止横向滚轮
+    handleWheel(e) {
+      if (e.deltaX !== 0) {
+        e.preventDefault();
+      }
+    },
+    // 窗口resize时，图表自适应
+    handleWindowResize() {
+      if (this.chartOne) this.chartOne.resize();
+      if (this.chartFour) this.chartFour.resize();
+    },
+
+    // 原有业务方法
     handleLogin(){
       let param = {
         code: "",
         loginType: "PHONE_PASSWORD",
-        password: "6abadd8c0eb15451da41e9c6ed1245ce",
+        password: "e07e2a30f7431f4aa173e8ba4e97fedc",
         phoneUuid: "",
-        username: "18225951378",
+        username: "60064de642247faee1559140f80c7246",
         uuid: "",
         verificationCode: ""
       }
+      Cookies.set("username", "60064de642247faee1559140f80c7246", { expires: 30 });
+      Cookies.set("password", "e07e2a30f7431f4aa173e8ba4e97fedc", { expires: 30 });
+      Cookies.set('rememberMe', false, { expires: 30 });
       this.$store.dispatch('Login',param).then(res => {}).catch(() => {})
     },
     refrespage(){
@@ -483,44 +348,36 @@ export default {
     },
     getMorningCheck(){
        getMorningCheckInfoApi({type:1}).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;
-        this.sysTime=Number(res.data.thisTime) 
-        this.initChartOne();
-        // this.initChartTwo();
-        // this.initChartThree();
-        this.initChartFour();
-      });  
+        this.sysTime=Number(res.data.thisTime)
+        // 确保DOM渲染完成后初始化图表
+        this.$nextTick(() => {
+          this.initChartOne();
+          this.initChartFour();
+        });
+      });
     },
-    getCurrentTime() { 
-      this.countTime = this.countTime+1000; 
+    getCurrentTime() {
+      this.countTime = this.countTime+1000;
       var nowTime = this.countTime+this.sysTime
-      console.log(nowTime)
       const now = new Date(nowTime);
       const year = now.getFullYear();
-      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
+      const month = String(now.getMonth() + 1).padStart(2, '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;
-      console.log(this.hourTime)
-      // this.initData();
     },
-    initData(){ 
+    initData(){
       this.queryParams.applyDate=this.dateTime;
       getCurrentRecipeListApi(this.queryParams).then(response => {
           if(response.rows!=null&&response.rows.length>0){
             const datas=  response.rows[0].detail.detailList;
-            console.log(datas)
             if(datas!=null&&datas.length>0){
               datas.map((item,index)=>{
                 if("1"==item.mealtimeType){
@@ -552,356 +409,142 @@ export default {
       this.queryParams.pageSize=20;
       getCertificateListApi(this.queryParams).then(res => {
         this.staffNums=res.rows;
-      }); 
-    },  
+      });
+    },
     goTarget(href) {
       window.open(href, "_blank");
     },
+    // ------------ 3. 图表初始化（统一配置，确保大小一致） ------------
     initChartOne() {
-      if(this.morningCheckNum==0){
-        this.morningCheckPerc=0;
-      }else{
-        this.morningCheckPerc=(this.morningCheckNum-this.morningCheckAbno)/(this.morningCheckNum)*100;
-      }
-      // 基于准备好的dom，初始化echarts实例
+      this.morningCheckPerc = this.morningCheckNum == 0 ? 0 : ((this.morningCheckNum - this.morningCheckAbno) / this.morningCheckNum * 100).toFixed(2);
+      // 确保容器存在再初始化
+      if (!this.$refs.chartone) return;
       this.chartOne = echarts.init(this.$refs.chartone);
-      // 绘制图表
-      this.chartOne.setOption({
+      // 统一图表配置
+      const option = {
         title: {
-            text:this.morningCheckPerc.toFixed(2) +'%',
+            text: `${this.morningCheckPerc}%`,
             subtext: '合格率',
             x: 'center',
             y: 'center',
-            subtextStyle: {
-                fontSize: 15,
-                color: '#fff'
-            },
-            textStyle: {
-                fontWeight: 'normal',
-                color: '#0580f2',
-                fontSize: '15'
-            }
+            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']
-        },
+        legend: { show: false },
         series: [{
             name: 'Line 1',
             type: 'pie',
             clockWise: true,
-            radius: ['50%', '66%'],
-            itemStyle: {
-                normal: {
-                    label: {
-                        show: false
-                    },
-                    labelLine: {
-                        show: false
-                    }
-                }
-            },
+            radius: ['76%', '96%'], // 统一环形大小
+            itemStyle: { normal: { label: { show: false }, labelLine: { show: false } } },
             hoverAnimation: false,
-            data: [{
-                value: this.morningCheckNum-this.morningCheckAbno,
+            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
-                        }
+                  normal: {
+                    color: {
+                      colorStops: [{ offset: 0, color: '#00cefc' }, { offset: 1, color: '#367bec' }]
                     }
+                  }
                 }
-            }, {
-                name: '02',
-                value: this.morningCheckAbno
-            }]
+              },
+              { name: '02', value: this.morningCheckAbno }
+            ]
         }]
-      });
-    },
-    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
-            }]
-        }]
-      });
-    },
-    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
-            }]
-        }]
-      });
+      };
+      this.chartOne.setOption(option);
     },
     initChartFour() {
-      if(this.healthNum==0){
-        this.healthPerc=0;
-      }else{
-        this.healthPerc=((this.healthNum)-(this.healthAbno))/(this.healthNum)*100;
-      }
-      // 基于准备好的dom，初始化echarts实例
+      this.healthPerc = this.healthNum == 0 ? 0 : ((this.healthNum - this.healthAbno) / this.healthNum * 100).toFixed(2);
+      if (!this.$refs.chartfour) return;
       this.chartFour = echarts.init(this.$refs.chartfour);
-      // 绘制图表
-      this.chartFour.setOption({
+      // 完全复用左边图表的配置，仅修改数据
+      const option = {
         title: {
-            text:this.healthPerc.toFixed(2) +'%',
+            text: `${this.healthPerc}%`,
             subtext: '合格率',
             x: 'center',
             y: 'center',
-            subtextStyle: {
-                fontSize: 15,
-                color: '#fff'
-            },
-            textStyle: {
-                fontWeight: 'normal',
-                color: '#0580f2',
-                fontSize: '15'
-            }
+            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']
-        },
+        legend: { show: false },
         series: [{
             name: 'Line 1',
             type: 'pie',
             clockWise: true,
-            radius: ['50%', '66%'],
-            itemStyle: {
-                normal: {
-                    label: {
-                        show: false
-                    },
-                    labelLine: {
-                        show: false
-                    }
-                }
-            },
+            radius: ['76%', '96%'], // 与左边图表统一
+            itemStyle: { normal: { label: { show: false }, labelLine: { show: false } } },
             hoverAnimation: false,
-            data: [{
-                value: this.healthNum-this.healthAbno,
+            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
-                        }
+                  normal: {
+                    color: {
+                      colorStops: [{ offset: 0, color: '#00cefc' }, { offset: 1, color: '#367bec' }]
                     }
+                  }
                 }
-            }, {
-                name: '02',
-                value: this.healthAbno
-            }]
+              },
+              { name: '02', value: this.healthAbno }
+            ]
         }]
-      });
+      };
+      this.chartFour.setOption(option);
     },
     closeView(){
       Cookies.remove('password')
       this.$router.push({ path:'/login' });
     },
-    // 去除类型名称中的餐次前缀（如"午餐-"、"下午茶-"等）
     getDisplayTypeName(typeName) {
       if (!typeName) return '';
-      // 去除"早餐-"、"午餐-"、"下午茶-"、"晚餐-"、"夜宵-"前缀
       return typeName.replace(/^(早餐-|午餐-|下午茶-|晚餐-|夜宵-)/, '');
     },
   },
- 
 };
 </script>
 
 <style lang="scss" scoped>
+  /* ------------ 4. 禁止横向滚动样式 ------------ */
+  html, body, #app, .container {
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden !important; /* 关键：禁止横向滚动 */
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
   .container {
     height: 100%;
     width: 100%;
     background-image: url("../assets/images/background.jpg");
-    background-size: cover; /* 覆盖整个div */
-    background-position: center; /* 图片居中 */
-    overflow-y: hidden; /* 仅垂直滚动 */
-    display: flex;
-    width: 100%;
-    justify-content: center; /* 水平居中 */
-    flex-wrap: wrap;
+    background-size: cover;
+    background-position: center;
+    overflow-y: hidden; /* 保留垂直滚动（如果内容超出屏幕） */
+    // display: flex;
+    // justify-content: center;
+    // flex-wrap: wrap;
   }
   .topdiv{
      width: 100%;
      display: flex;
      background-image: url("../assets/images/canteen1.png");
-     background-size: cover; /* 覆盖整个div */
-     background-position: center; /* 图片居中 */
+     background-size: cover;
+     background-position: center;
      height: 5%;
+     margin-bottom: 20px;
   }
   .titlediv{
     display: flex;
     width: 40%;
-    justify-content: center; /* 水平居中 */
-    // align-items: flex-end; /* 垂直靠上 */
+    justify-content: center;
     font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
     font-weight: normal;
     font-size: 34px;
@@ -909,13 +552,14 @@ export default {
   }
   .dateTimeClass{
     display: flex;
-    justify-content: center; /* 水平居中 */
+    justify-content: center;
     color:#fff;
     width:30%;
+    align-items: center;
   }
   .hourTimeClass{
     display: flex;
-    justify-content: center; /* 水平居中 */
+    justify-content: center;
     align-items: center;
     color:#fff;
     width:30%;
@@ -923,35 +567,35 @@ export default {
   .titlediv2{
     display: flex;
     width: 100%;
-    justify-content: center; /* 水平居中 */
-    align-items: flex-start; /* 垂直靠上 */
+    // height: 10px;
+    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; /* 图片居中 */
+    // background-image: url("../assets/images/caidanline.png");
+    // background-size: cover;
+    // background-position:bottom;
   }
   .contentclass{
     display: flex;
     width: 100%;
-    justify-content: center; /* 水平居中 */
+    justify-content: center;
     flex-wrap: wrap;
-    color:#fff;
-    margin-bottom: 1%;
+    color:#fff; 
   }
   .fegexian{
-    width: 49%;
+    width: 50%;
     height: 5px;
-    background-image: url("../assets/images/caidanline.png");
-    background-size: cover; /* 覆盖整个div */
-    background-position: center; /* 图片居中 */
+    // background-image: url("../assets/images/caidanline.png");
+    // background-size: cover;
+    // background-position: center;
   }
   .fegexian2{
-    width: 80%;
+    width: 50%;
     height: 5px;
     background-image: url("../assets/images/caidanline.png");
-    background-size: cover; /* 覆盖整个div */
-    background-position: center; /* 图片居中 */
+    background-size: cover;
+    background-position: center;
   }
   .dishclass{
     font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
@@ -969,7 +613,7 @@ export default {
     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; */
+    color: transparent;
   }
   .dishcontentclass{
     display: flex;
@@ -988,12 +632,11 @@ export default {
     width: 22%;
     margin-left: 2%;
     margin-right: 1%;
-    // margin-top: 1%;
-    // padding-left: 6%;
+    margin-bottom: 10px;
   }
   .dishtypeclass{
     width: 20%;
-    margin-left: 2%; 
+    margin-left: 2%;
     margin-bottom: 1%;
     font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
     font-weight: bold;
@@ -1002,12 +645,12 @@ export default {
     text-align: left;
     font-style: normal;
   }
-  .partthree{ 
+  .partthree{
     height: 100%;
     width: 85%;
     display: flex;
     flex-direction: row;
-    justify-content: center; /* 水平居中 */
+    justify-content: center;
     align-items: center;
     flex-wrap: wrap;
   }
@@ -1015,13 +658,14 @@ export default {
      display: flex;
      color:#fff;
      font-size: 25px;
-     justify-content: center; /* 水平居中 */
+     justify-content: center;
+     margin-bottom: 5px;
   }
   .partthree_title2{
       display: flex;
-      height: 6px;
+      height: 20px;
       width: 100%;
-      justify-content: center; /* 水平居中 */
+      justify-content: center;
   }
   .big-number {
     font-size: 30px;
@@ -1036,8 +680,6 @@ export default {
     text-shadow: 0 0 10px rgba(255,255,255,0.5);
   }
   table, th, td {
-      // border: 1px solid #fff;
-      // border-collapse: collapse; /* 可选，用于合并相邻单元格的边框 */
       text-align: center;
   }
 </style>