mj_firm_former/src/views/system/jbdHome/board/sampleBoard.vue

<template>
    <div  class="data-view">
        <!-- 全屏显示容器 -->
        <dv-full-screen-container>
          <!-- 头部内容部分 -->
          <div class="headerContent">
             <!-- 标题装饰组件 -->
            <header-decoration :titleName="outputData.headerName"/> 
            <div 
              class="goBackButton" 
              style="width: 12%;
              height:2.825rem;
              line-height: 2.825rem;
              text-align:center;
              position: absolute;
              left: 11%;
              top:3.8%;" >
              <span>月份</span>
              <el-date-picker
                style="width:80%"
                v-model="NowTime1"
                type="month"
                @change="changeTime1"
                format="yyyy-MM" 
                value-format="yyyy-MM"
                placeholder="请选择时间">
              </el-date-picker>
            </div>
            <!-- 返回按钮 -->
  
            <div 
              class="goBackButton" 
              @click.prevent="goBack()" 
              style="width: 12%;
              height:2.825rem;
              line-height: 2.825rem;
              text-align:center;
              position: absolute;
              right: 11%;
              top:4%;" >
              <dv-border-box-8>返回</dv-border-box-8>
            </div>
            <!-- 显示数据上一次更新的时间 -->
            <!-- <div
              class="changeTime"
              style="width: 18%;
              cursor: pointer;
              height:2.825rem;
              line-height: 2.825rem;
              text-align:center;
              position: absolute;
              left: 63%;
              top:4%;
              color: #FFFFFF;">
                <dv-border-box-8 >上一次更新时间:{{this.sendTime}}</dv-border-box-8>
            </div> -->
            <!-- 样品头部数据总览 -->
            <div class="overView">
              <headerContent  @getUpdateTime="getTime" :NowTime1="NowTime1+'-01'"></headerContent>
              <dv-decoration-10 style="width:100%;height:5px;" />
            </div> 
  
          </div>
         
  
          <!-- 主体内容(图表部分) -->
          <div class="mainContent">
            <div class="entrust">
              <div class="Number" ref="Number_refs"><entrustNumber :NowTime1="NowTime1"/> </div>
              <!-- <div class="Type" ><entrustType/></div> -->
            </div>
            <div class="detection">
              <div class="monthlyS" ref="MonthlyStatus_refs"><monthlyStatus  :NowTime1="NowTime1"/></div>
              <div class="annualS" ref="AnnualStatus_refs"><annualStatus/></div>
              <div class="monthlyN" ref="MonthlyNumber_refs"><monthlyNumber  :NowTime1="NowTime1"/></div>
            </div>
          </div>
          
        </dv-full-screen-container>
     </div>
  </template>
  
  <script>
  //全屏展示
  import screenfull from 'screenfull'
  //大屏标题组件
  import headerDecoration from './component/sample/headerDecoration'
  //头部内容组件
  import headerContent from './component/sample/headerContent'
  //委托样品条目情况组件
  import entrustNumber from './component/sample/EntrustNumber'
  //委托样品类型组件
  import entrustType from './component/sample/EntrustType'  
  // 月度检测完成情况(环形图)
  import monthlyStatus from './component/sample/MonthlyStatus'
  //年度检测完成情况(环形图)
  import annualStatus from './component/sample/AnnualStatus'
  //月度检测情况组件
  import monthlyNumber from './component/sample/MonthlyNumber'
  export default {
  
    components:{
      headerDecoration,
      headerContent,
      entrustNumber,
      entrustType,
      monthlyStatus,
      annualStatus,
      monthlyNumber
    },
    data(){
      return{
        sendTime:'',
        outputData:{
          headerName:"样品管理看板"
        },
        NowTime1:'',
        value1:[]
      }
      
    },
    mounted() {
      this.getNowTime()
    },
    created() {
      //时间
      // this.currentTime()
      if(screenfull.isEnabled && !screenfull.isFullscreen){
       this.allView()
        
      }
    },
    beforeDestroy() {
        if(screenfull.isFullscreen){
          screenfull.toggle()
          }
      },
    methods: {
      getTime(val){
        this.sendTime = val
      },
  
      allView(){
        screenfull.request() //默认显示全屏
      },
      goBack(){
        this.$router.back(-1)
      },
      getNowTime(){
        const nowDate = new Date();
        const date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
        }
        this.NowTime1 = date.year + '-' + date.month
        // console.log('页面第一次进来显示时间',date.year,date.month)
        //进来获取当前时间 之后获取当前月份天数 传给
        // console.log('页面显示的时间',this.NowTime1+"-01")  //2022-11
        //把页面第一次进来的 当前年度月份 传给该方法处理 得到day及days
        // this.getDaysInMonth(date.year,date.month)
        
      },
      changeTime1(e){
        // console.log('改变时间',e) //2022-07
        // debugger
        let year = e.slice(0,4)
        let month = e.slice(5,7)
        this.NowTime1 = year + '-' + month
        // this.$set(this.data_key[index], "key", value);
        // console.log('用户操作之后 页面显示的时间',this.NowTime,year,month) //2022-11 2022 11
        //把年度月份传给getDaysInMonth()之前，先清理上一次数据
        // this.entrustNumber.diswpose()  //这个方法干嘛的？？ 为啥清不掉entrustNumberInit()方法的数据
        this.days=[]
        //在这里打印一下this.days数组
        // console.log('用户操作了时间控件之后打印this.days数组',this.days)
        //把用户操作时间控件改变的时间 的年度月份 传给该方法处理 得到day及days
        // this.getDaysInMonth(year,month)
      },
      // getDaysInMonth(year,month){
      //   let temp = new Date(year,month,0);
      //   this.day = temp.getDate(); 
      //   // console.log('处理好的年 月 月份天数',year,month,this.day);   //2022 11 30
      //   //把月份对应天数转化为数组
      //   for( let i=1;i <= this.day ;i++){
      //     this.days.push(i)
      //   }
      //   // console.log('月份每一天',this.days)
      //   this.getCheckSampleData(this.day)
  
      // }
    }
  
  }
  </script>
  
  <style lang="less" scoped>
  *body{
    padding: 0px;
    margin: 0px;
  }
  .data-view {
    width: 100%;
    height: 100%;
    color: #fff;
    z-index: 9999;
    #dv-full-screen-container {
      background-image: url('./img/bg.png');
      background-size: 100% 100%;
      display: flex;
      flex-direction:column;
      align-items: center;
      .headerContent{
        width: 100%;
        height: 19%;
        position:relative
        .overView{
          width: 100%;
          height: 80px;
        }
      }
      
      .mainContent{
        width: 100%;
        height:80%;
        display: flex;
        flex-direction:column;
        align-content:space-between;
        // border: 1px solid rgb(71, 17, 197);
          .entrust{
          width: 100%;
          height: 48%;
          display: flex;
          justify-content:space-between;
          // border: 1px solid rgb(17, 110, 197);
            .Number{
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              // background-color: rgb(171, 163, 204);
            }
            .Type{
              width: 37.5%;
              height: 100%;
              margin-left: 10px;
              // background-color: rgb(12, 103, 131);
            
            }
          }
  
          .detection{
            width: 100%;
            height: 48%;
            margin-top: 15px;
            display: flex;
            justify-content:space-between;
            // border: 1px solid rgb(142, 190, 30);
            .monthlyS{
              width: 23%;
              height: 100%;
              // background-color: rgb(12, 103, 131);
            }
            .monthlyN{
              flex: 3;
              width: 50%;
              height: 100%;
              margin: 0px 10px;
              // background-color: rgb(171, 163, 204);
            }
            .annualS{
              width: 23%;
              height: 100%;
              // background-color: rgb(12, 103, 131);
            }
          
          }
      } 
    } 
  }
  
  </style>