<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="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 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 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>

<script>
  import videoMonitoring from './videoMonitoring.vue'
  import Vue from 'vue'
  import VueCarousel from 'vue-carousel';
  Vue.use(VueCarousel);
  import * as echarts from 'echarts';
  import axios from 'axios';
  import Cookies from 'js-cookie';
  import { getCertificatePicInfoApi,getCookCertificateInfoApi,getAIRewordInfoApi,getMorningCheckInfoApi } from "@/api/view";
  export default {
    name: "Index",
    components: {
      videoMonitoring // 注册子组件
    },
    data() {
    return {
      // 版本号
      version: "24.7.1",
      currentSeat:300,
      mealNum:0,
      dateTime:'',//日期
      hourTime:'',//时分秒
      settimenum:0,

      morningCheckNum:0, //晨检数
      morningCheckPerc:0,//晨检比
      morningCheckAbno:0,//晨检异常数

      handCheckNum:0, //手晨检数
      handCheckPerc:0,//手晨检比
      handCheckAbno:0,//手晨检异常数

      faceCheckNum:0, //脸晨检数
      faceCheckPerc:0,//脸晨检比
      faceCheckAbno:0,//脸晨检异常数

      healthNum:0, //健康证数
      healthPerc:0,//健康证比
      healthAbno:0,//健康证异常数
      dataForm:{},
      inspectionRecord:[//AI巡检记录
        ],
      cookCertificate:[//厨师证
        ],
        //证照公示
        certificatePic:["http://sgwpdm.ah.sgcc.com.cn/canteen/lnyst/378915229716713472/dishes/ce0e4591db7e439a9951e8c48be92d31.png"],
      angle:0
    };
    },
    created() {
    },
    mounted() {
     this.getCurrentTime(); // 组件挂载后获取时间
     this.initData();// 你的业务逻辑
     setTimeout(()=>{
       var elements = document.querySelectorAll(".VueCarousel-pagination");
       elements.forEach(function(el) {
           el.style.display="none";
       });
     },1000);
     setInterval(this.getCurrentTime, 1000); // 每秒更新时间
     this.timer  = setInterval(() => {
       this.settimenum=this.settimenum+1;
       this.getUserFlage();//判断是否需要获取token
       this.initData();  // 你的业务逻辑
       var elements = document.querySelectorAll(".VueCarousel-pagination");
        elements.forEach(function(el) {
            el.style.display="none";
        });
     }, 1000000);
    },
    beforeDestroy() {
      clearInterval(this.timer);  // 必须清除定时器！
    },
    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();
        });
        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
              }]
          }]
      });
      },
      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>
  .container {
      height: 100%;
      width: 100%;
      background-image: url("../assets/images/background.jpg");
      background-size: cover; /* 覆盖整个div */
      background-position: center; /* 图片居中 */
      overflow-y: auto; /* 仅垂直滚动 */ 
      display: flex;
      width: 100%;
      justify-content: center; /* 水平居中 */
      flex-wrap: wrap;
    } 
    .topdiv{
       width: 96%;
       margin: 0 auto; 
       background-image: url("../assets/images/canteen1.png");
       background-size: 100% 100%; /* 覆盖整个div */
       background-position: center; /* 图片居中 */
       height: 180px;
       display: flex;
       justify-content: space-between;
       padding-top: 3%;
       margin-bottom: 2%;
    }
    .titlediv{
      display: flex;
      width: 40%;
      justify-content: center; /* 水平居中 */ 
      font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
      font-weight: 600;
      font-size: 32px; 
      color: #E1EFFF;
    }
    .dateTimeClass{
      display: flex;
      // justify-content: center; /* 水平居中 */
      color:#fff;
      width:30%;
      font-size: 26px;
    }
    .hourTimeClass{
      display: flex;
      justify-content: flex-end; /* 水平居中 */
      color:#fff;
      width:30%;
      font-size: 26px;
    }
    .titlediv2{
      display: flex;
      width: 100%;
      justify-content: center; /* 水平居中 */
      align-items: flex-start; /* 垂直靠上 */
      color:#fff;
      font-size: 28px;
      background-image: url("../assets/images/caidanline.png");
      background-size: cover; /* 覆盖整个div */
      background-position:bottom; /* 图片居中 */
    }
    .contentclass{
      display: flex;
      width: 100%;
      justify-content: center; /* 水平居中 */
      flex-wrap: wrap;
      color:#fff;
      margin-bottom: 2%;
    }
    .fegexian{
      width: 49%;
      height: 5px;
      background-image: url("../assets/images/caidanline.png");
      background-size: cover; /* 覆盖整个div */
      background-position: center; /* 图片居中 */
    }
    .fegexian2{
      width: 40%;
      height: 5px;
      background-image: url("../assets/images/caidanline.png");
      background-size: cover; /* 覆盖整个div */
      background-position: center; /* 图片居中 */
    }
    .dishclass{
      font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
      font-weight: normal;
      font-size: 24px;
      color: #D8E2FF;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .dishclass span{
      background-image: linear-gradient(0deg, rgba(111,169,255,0.5) 30%, #6FA9FF 86%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent; /* 或者使用 text-fill-color: transparent; */
    }
    .dishcontentclass{
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      margin-top: 1%;
      font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
      font-weight: normal;
      font-size: 22px;
      color: #D8E2FF;
      text-align: left;
      font-style: normal;
    }
    .dishcontentrefclass{
      margin-left: 5%;
      margin-top: 3%;
    }
    .partthree{ 
      height: auto;
      width: 96%; 
      margin: 1% auto; 
      margin-bottom: 2%;
    }
    .partthree_title{
        display: flex;
        color:#fff;
        font-size: 25px;
        justify-content: center; /* 水平居中 */
    }
    .partthree_title2{
        display: flex;
        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; /* 可选，用于合并相邻单元格的边框 */
        text-align: center;
    }
    .big-number {
      font-size: 30px;
      font-family: 'Arial', sans-serif;
      color: #fff;
      padding: 5px;
      border-radius: 10px;
      display: inline-flex;
    }
    .digit {
      margin: 0 5px;
      text-shadow: 0 0 10px rgba(255,255,255,0.5);
    }
</style>

