From 92cb26206217883eec143c350285b8954f151aea Mon Sep 17 00:00:00 2001
From: zzyuan <781948537@qq.com>
Date: Tue, 2 Sep 2025 14:50:34 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/monitor/iframe.html    |   14 +-
 src/views/videoMonitoring.vue |   71 +--
 src/views/view.vue            | 1044 ++++++++++++++++-----------------
 vue.config.js                 |    4 +-
 4 files changed, 537 insertions(+), 596 deletions(-)

diff --git a/public/monitor/iframe.html b/public/monitor/iframe.html
index 04ce4dd..fa9c218 100644
--- a/public/monitor/iframe.html
+++ b/public/monitor/iframe.html
@@ -31,20 +31,10 @@ html, body {
 <script>
 var urlParams = new URLSearchParams(window.location.search);
 var type = urlParams.get('type');
-console.log(type)
 $(function () {
     var height = '100%';
-    var width = $("body").width();
-    if(type=="dialog"){
-        width = $("body").width();
-        height = '500';
-    }
-    if(type=="sanwei"){
-        width = $("body").width();
-        height = '930';
-    }
-    width = 500;
-    height = 300;
+    var width = $("body").width(); 
+    height = 320;
     // ��ʼ�����������������
     WebVideoCtrl.I_InitPlugin(width,height, {
         bWndFull: true,//�Ƿ�֧�ֵ�����˫��ȫ����Ĭ��֧�� true:֧�� false:��֧��
diff --git a/src/views/videoMonitoring.vue b/src/views/videoMonitoring.vue
index d24694e..d8a6083 100644
--- a/src/views/videoMonitoring.vue
+++ b/src/views/videoMonitoring.vue
@@ -1,36 +1,18 @@
 <template>
     <div id="video">
         <div class="contant">
-          <table style="height: 600px;width: 100%;">
-            <tr style="height: 100%;width: 100%;">
-              <td style="width: 100%;">
-                 <div style="width: 80%; height: 100%; object-fit: cover;" >
-                     <div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('14')"></div>
-                     <iframe style="width: 500px;height: 300px" src="monitor/iframe.html" ref="videoIframe1" frameborder="0" ></iframe>
-                 </div>
-              </td>
-              <td style="width: 100%;">
-                 <div style="width: 80%; height: 100%; object-fit: cover;">
-                     <div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('16')"></div>
-                     <iframe style="width: 500px;height: 300px" src="monitor/iframe.html" ref="videoIframe2" frameborder="0" ></iframe>
-                 </div>
-              </td>
-            </tr>
-            <tr style="height: 100%;width: 100%;">
-              <td style="width: 100%;">
-                 <div style="width: 80%; height: 100%; object-fit: cover;" >
-                     <div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('17')"></div>
-                     <iframe style="width: 500px;height: 300px" src="monitor/iframe.html" ref="videoIframe3" frameborder="0" ></iframe>
-                 </div>
-              </td>
-              <td style="width: 100%;">
-                 <div style="width: 80%; height: 100%; object-fit: cover;" >
-                     <div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('32')"></div>
-                     <iframe style="width: 500px;height: 300px"  src="monitor/iframe.html" ref="videoIframe4" frameborder="0" ></iframe>
-                 </div>
-              </td>
-            </tr>
-          </table>
+            <div style="width: 49%;height: auto;margin-bottom: 20px;"> 
+                <iframe style="width: 100%;height: 320px;" src="monitor/iframe.html" ref="videoIframe1" frameborder="0" ></iframe>
+            </div>
+            <div style="width: 49%;height: auto;"> 
+                <iframe style="width: 100%;height: 320px" src="monitor/iframe.html" ref="videoIframe2" frameborder="0" ></iframe>
+            </div>
+            <div style="width: 49%;height: auto;"> 
+                <iframe style="width: 100%;height: 320px;" src="monitor/iframe.html" ref="videoIframe3" frameborder="0" ></iframe>
+            </div>
+            <div style="width: 49%;height: auto;"> 
+                <iframe style="width: 100%;height: 320px;" src="monitor/iframe.html" ref="videoIframe4" frameborder="0" ></iframe>
+            </div> 
         </div>
     </div>
 
@@ -156,31 +138,14 @@ methods:{
 #video{
     width: 100%;
     height: 100%;
-    margin: 0 0.2rem;
-    .header{
+    margin: 0 0.2rem; 
+    .contant{ 
+        width: 100%;
+        height: auto;
         display: flex;
-        align-items: center;
-        color: #fff;
-        font-size: 0.5rem;
-        margin-bottom: 0.1rem;
-        span{
-            margin-left: 0.2rem;
-        }
-        img{
-            width: 0.5rem;
-            height: 0.5rem;
-        }
-        // justify-content: center;
+        flex-wrap: wrap; 
+        justify-content: space-between;
     }
-    .contant{
-        // height: 85%;
-        display: flex;
-        padding-top: 1%;
-    }
-
-
-
-
 }
 
 </style>
diff --git a/src/views/view.vue b/src/views/view.vue
index f0e0f49..d79fdd0 100644
--- a/src/views/view.vue
+++ b/src/views/view.vue
@@ -1,134 +1,114 @@
 <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 class="titlediv2">
-      健康晨检
-    </div>
-    <div class="fegexian" style="margin-top: 10px;"></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: 25%;">
-              <div style="width: 100%;height: 100%;">
-                  <div style="height: 100%;" ref="chartone"></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: 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>
-    </div>
-    <div class="fegexian" style="margin-top: 10px;"></div>
-   <div class="partthree">
-      <div class="partthree_title"><span>AI巡检记录</span></div>
-      <div style="width: 100%; height: 100%; ">
-          <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"/>
-                </div>
-              </slide>
-            </carousel>
-      </div>
-    </div>
-
-    <div  style="display: flex;margin-top: 15%;">
-      <div class="container2">
-        <div class="partthree_title"><span>证照公示</span></div>
-        <div class="partthree_title2"><div class="fegexian2" style="margin-top: 0px;"></div></div>
-        <div style="height: 100%;width: 100%;">
-          <img style="width: 80%; height: 100%; object-fit: cover;padding-left: 10%" :src="certificatePic[0]"/>
+      <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 class="container2">
-        <div class="partthree_title"><span>厨师公示</span></div>
-        <div class="partthree_title2"><div class="fegexian2" style="margin-top: 0px;"></div></div>
-        <div style="width: 100%; height: 100%; ">
-            <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: 100%;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 class="titlediv2">
+        健康晨检
+      </div>
+      <div class="fegexian" style="margin-top: 10px;"></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: 25%;">
+                <div style="width: 100%;height: 100%;">
+                    <div style="height: 100%;" ref="chartone"></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: 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>
+      </div>
+      
+      <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"/>
                   </div>
                 </slide>
               </carousel>
         </div>
       </div>
-    </div>
-    <div style="height: 40%;width: 70%;margin-top: 8%;">
-      <div class="partthree_title"><span>重点区域监控</span></div>
-      <div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div>
-      <div style="height: 100%;width: 100%;margin-top: 1%;">
-        <videoMonitoring></videoMonitoring>
-        <!-- <table style="height: 50%;width: 100%;">
-          <tr style="height: 50%;width: 50%;">
-            <td style="width: 50%;">
-               <img style="width: 80%; height: 50%; object-fit: cover;" :src="certificatePic[0]"/>
-            </td>
-            <td style="width: 50%;">
-               <img style="width: 80%; height: 50%; object-fit: cover;" :src="certificatePic[0]"/>
-            </td>
-          </tr>
-          <tr style="height: 50%;width: 50%;">
-            <td style="width: 50%;">
-               <img style="width: 80%; height: 50%; object-fit: cover;" :src="certificatePic[0]"/>
-            </td>
-            <td style="width: 50%;">
-               <img style="width: 80%; height: 50%; object-fit: cover;" :src="certificatePic[0]"/>
-            </td>
-          </tr>
-        </table> -->
+
+      <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>
       </div>
-    </div>
-    <br>
+      <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> 
   </div>
 </template>
 
@@ -141,12 +121,12 @@
   import axios from 'axios';
   import Cookies from 'js-cookie';
   import { getCertificatePicInfoApi,getCookCertificateInfoApi,getAIRewordInfoApi,getMorningCheckInfoApi } from "@/api/view";
-export default {
-  name: "Index",
-  components: {
+  export default {
+    name: "Index",
+    components: {
       videoMonitoring // 注册子组件
-  },
-  data() {
+    },
+    data() {
     return {
       // 版本号
       version: "24.7.1",
@@ -180,10 +160,10 @@ export default {
         certificatePic:["http://sgwpdm.ah.sgcc.com.cn/canteen/lnyst/378915229716713472/dishes/ce0e4591db7e439a9951e8c48be92d31.png"],
       angle:0
     };
-  },
-  created() {
-  },
-  mounted() {
+    },
+    created() {
+    },
+    mounted() {
      this.getCurrentTime(); // 组件挂载后获取时间
      this.initData();// 你的业务逻辑
      setTimeout(()=>{
@@ -206,380 +186,380 @@ export default {
     beforeDestroy() {
       clearInterval(this.timer);  // 必须清除定时器！
     },
-  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;
+    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;
 
-        this.initChartOne();
-        this.initChartTwo();
-        this.initChartThree();
-        this.initChartFour();
+          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
+              }]
+          }]
       });
-      getAIRewordInfoApi(this.dataForm).then(res => {
-        this.inspectionRecord=res.data;
+      },
+      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
+              }]
+          }]
       });
-      getCookCertificateInfoApi(this.dataForm).then(res => {
-        console.log("cookCertificate",res);
-        this.cookCertificate=res.data;
+      },
+      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
+              }]
+          }]
       });
-      getCertificatePicInfoApi(this.dataForm).then(res => {
-        this.certificatePic[0]=res.data.picUrl;
+      },
+      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
+              }]
+          }]
       });
+      },
     },
-    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
-            }]
-        }]
-    });
-    },
-    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
-            }]
-        }]
-    });
-    },
-    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
-            }]
-        }]
-    });
-    },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
@@ -589,50 +569,46 @@ export default {
       background-image: url("../assets/images/background.jpg");
       background-size: cover; /* 覆盖整个div */
       background-position: center; /* 图片居中 */
-      overflow-y: auto; /* 仅垂直滚动 */
+      overflow-y: auto; /* 仅垂直滚动 */ 
       display: flex;
       width: 100%;
       justify-content: center; /* 水平居中 */
       flex-wrap: wrap;
-    }
-    .container2 {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        justify-content: center; /* 水平居中 */
-        align-items: center;
-        flex-wrap: wrap;
-      }
+    } 
     .topdiv{
-       width: 100%;
-       display: flex;
+       width: 96%;
+       margin: 0 auto; 
        background-image: url("../assets/images/canteen1.png");
-       background-size: cover; /* 覆盖整个div */
+       background-size: 100% 100%; /* 覆盖整个div */
        background-position: center; /* 图片居中 */
-       height: 15%;
+       height: 180px;
+       display: flex;
+       justify-content: space-between;
+       padding-top: 3%;
+       margin-bottom: 2%;
     }
     .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;
+      font-weight: 600;
+      font-size: 32px; 
       color: #E1EFFF;
     }
     .dateTimeClass{
       display: flex;
-      justify-content: center; /* 水平居中 */
+      // justify-content: center; /* 水平居中 */
       color:#fff;
       width:30%;
+      font-size: 26px;
     }
     .hourTimeClass{
       display: flex;
-      justify-content: center; /* 水平居中 */
+      justify-content: flex-end; /* 水平居中 */
       color:#fff;
       width:30%;
+      font-size: 26px;
     }
     .titlediv2{
       display: flex;
@@ -651,6 +627,7 @@ export default {
       justify-content: center; /* 水平居中 */
       flex-wrap: wrap;
       color:#fff;
+      margin-bottom: 2%;
     }
     .fegexian{
       width: 49%;
@@ -697,15 +674,11 @@ export default {
       margin-left: 5%;
       margin-top: 3%;
     }
-    .partthree{
-      margin-top: 1%;
-      height: 30%;
-      width: 90%;
-
-      display: flex;
-      width: 100%;
-      justify-content: center; /* 水平居中 */
-      flex-wrap: wrap;
+    .partthree{ 
+      height: auto;
+      width: 96%; 
+      margin: 1% auto; 
+      margin-bottom: 2%;
     }
     .partthree_title{
         display: flex;
@@ -715,10 +688,23 @@ export default {
     }
     .partthree_title2{
         display: flex;
-        height: 6px;
+        height: 30px;
         width: 100%;
+        margin-top: 1%;
         justify-content: center; /* 水平居中 */
     }
+    .container2 {
+      height: auto;
+      width: 50%;
+      display: flex;
+      flex-direction: row;
+      justify-content: center; /* 水平居中 */
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+
+
     table, th, td {
         // border: 1px solid #fff;
         // border-collapse: collapse; /* 可选，用于合并相邻单元格的边框 */
diff --git a/vue.config.js b/vue.config.js
index 55cec9e..c53d48e 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -38,8 +38,8 @@ module.exports = {
                 // target: `http://192.168.2.75:58080`,
                 // target: `http://192.168.0.61:58080`,
                 // target: `http://192.168.0.44:58085`,
-                target: `http://127.0.0.1:48380`,
-                // target: `http://192.168.0.244:38380`,
+                // target: `http://192.168.2.55:48380`,
+                target: `http://192.168.0.244:48380`,
                 changeOrigin: true,
                 pathRewrite: {
                     ['^' + process.env.VUE_APP_BASE_API]: '',