physical_distribution/src/views/dashboard/homepage.vue

<template>
  <div class="container_box">
    <div class="left_box">
      <div class="left_top">
        <div class="time_box">
          <div style="font-size: 0.4rem; color: #fff">{{ time }}</div>
          <div class="date_box">
            <div style="font-size: 0.18rem; color: #fff">{{ date }}</div>
            <div style="font-size: 0.18rem; color: #fff">{{ week }}</div>
          </div>
        </div>
        <div class="weather_box"></div>
      </div>
      <div class="left_cen">
        <div class="title_box">
          <div class="left_tit">收件量</div>
          <div class="right_tit">
            <div class="btn">收</div>
            <div class="btn">发</div>
            <div class="btn">到</div>
            <div class="btn">派</div>
            <div class="btn">签</div>
          </div>
        </div>
        <div class="cen_con"></div>
      </div>
      <div class="left_bot">
        <div class="title_box">
          <div class="tit">村点信息</div>
        </div>
      </div>
    </div>
    <div class="center_box">
      <div class="center_top">
        <div class="top_tit">莒县物流服务中心</div>
      </div>
      <div class="cen_data">
        <div class="data_top">
          <div class="left_btn">
            <div class="txt">按日</div>
            <div class="txt">按月</div>
          </div>
          <div class="right_time">数据更新时间:2022-01-09</div>
        </div>
      </div>
      <div class="center_cen"></div>
      <div class="cen_bot">
        <div class="echarts"></div>
        <div class="echarts"></div>
      </div>
    </div>
    <div class="right_box">
      <div class="full_btn">
        <img v-show="!isFullFlag" src="~@/assets/images/full.png" @click="clickFun" alt="">
        <img v-show="isFullFlag" src="~@/assets/images/nofull.png" @click="clickFun" alt="">
      </div>
      <div class="right_top">
        <div class="title_box">
          <div class="tit">派件入库量占比</div>
        </div>
      </div>
      <div class="right_center">
        <div class="title_box">
          <div class="tit">车辆行驶里程</div>
        </div>
      </div>
      <div class="right_bot">
        <div class="title_box">
          <div class="tit">车辆报警</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      day: "",
      time: "",
      date: "",
      week: "",
      isFullFlag:false,
      isSupport:false
    };
  },
  created() {
    this.getTime();
  },
  mounted() {
    this.isSupport=document.fullscreenEnabled
    
  },
  methods: {
    clickFun(){
      if (this.isSupport) {
        if (document.fullscreenElement) {
          //document.exitFullscreen()退出全屏模式的方法
          document.exitFullscreen();
          this.isFullFlag = false;
        } else {
          //requestFullscreen(),请求全屏的方法
          document.documentElement.requestFullscreen();
          this.isFullFlag = true;
        }
	    }
      console.log(this.isFullFlag)
      // this.isFullFlag =!this.isFullFlag
			// if (!screenfull.enabled) {
			// 	this.$message({
			// 		 message: 'Your browser does not work',
			// 		 type: 'warning'
			// 	})
			// 	return false
			// }
			// screenfull.toggle()
    },
    
    fn(str) {
      let num = null;
      str >= 10 ? (num = str) : (num = "0" + str);
      return num;
    },
    getWeek(e) {
      let arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      this.week = arr[e];
    },
    getTime() {
      //获取当前时间
      this.timer = setInterval(() => {
        var date = new Date();
        var year = date.getFullYear(); //当前年份
        var month = date.getMonth(); //当前月份
        var data = date.getDate(); //天
        var hours = date.getHours(); //小时
        var minute = date.getMinutes(); //分
        var second = date.getSeconds(); //秒
        this.day = date.getDay(); //获取当前星期几
        this.getWeek(this.day);
        this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second);
        this.date = year + "/" + (month + 1) + "/" + data;
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.container_box {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(~@/assets/images/index_bg.png);
  background-size: 100% 100%;
  display: flex;

  .left_box {
    width: 25%;
    height: 100%;
    background: url(~@/assets/images/line_img.png) top right repeat-y;

    .left_top {
      width: 90%;
      height: 12%;
      border: 1px solid #0e94ea;
      margin: 0 auto;
      margin-top: 0.1rem;

      .time_box {
        width: 49%;
        height: 100%;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        .date_box {
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          color: #fff;
          font-size: 0.18rem;
        }
      }
    }

    .left_cen {
      width: 90%;
      height: 45%;
      margin: 0 auto;
      margin-top: 0.1rem;
      .title_box {
        width: 100%;
        height: 0.42rem;
        background: url(~@/assets/images/box_title.png) top left no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_tit {
          color: #fff;
          width: 30%;
          display: flex;
          padding-left: 0.4rem;
          align-items: center;
          font-size: 0.2rem;
        }
        .right_tit {
          width: 65%;
          color: #fff;
          display: flex;
          height: 70%;
          border: 0.5px solid #0e94ea;
          border-radius: 10px;
          justify-content: space-between;
          align-items: center;
          margin-right: 0.3rem;

          .btn {
            width: 20%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-right: 0.5px solid #0e94ea;
            cursor: pointer;
            font-size: 0.18rem;
            color: #fff;

            &:last-child {
              border-right: none;
            }
          }
        }
      }
      .cen_con {
        width: 100%;
        height: 89%;
      }
    }

    .left_bot {
      width: 90%;
      height: 39%;
      // background: red;
      margin: 0 auto;
      margin-top: 0.1rem;

      .title_box {
        width: 100%;
        height: 0.42rem;
        background: url(~@/assets/images/box_title.png) top left no-repeat;
        background-size: 100% 100%;

        .tit {
          width: 30%;
          height: 100%;
          font-size: 0.2rem;
          color: #fff;
          display: flex;
          align-items: center;
          padding-left: 0.4rem;
        }
      }
    }
  }
  .center_box {
    width: 45%;
    height: 100%;
    
    .center_top{
      width: 100%;
      height: 8.8%;
      background: red;
      background: url(~@/assets/images/title_border.png) bottom center no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;

      .top_tit{
        color: #cdddf7;
        font-size: 0.52rem;
      }
    }
    .cen_data{
      width: 100%;
      height: 15%;

      .data_top{
        width: 100%;
        height: 30%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left_btn{
          width: 15%;
          border: 1px solid #0e94ea;
          height: 65%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-radius: 0.1rem;
          margin-left: 0.1rem;

          .txt{
            font-size: 0.18rem;
            color: #fff;
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: center;
            border-right: 1px solid #0e94ea;
            align-items: center;

            &:last-child{
              border: none;
            }
          }
        }
        .right_time{
          width: 25%;
          height: 100%;
          color: #fff;
          font-size: 0.18rem;
          display: flex;
          align-items: center;
        }
      }
    }

    .center_cen{
      width: 100%;
      height: 46%;
      background: red;
    }
    .cen_bot{
      width: 100%;
      height: 30%;
      display: flex;
      // background: green;

      .echarts{
        width: 50%;
        height: 100%;

      }
    }
  }
  .right_box {
    width: 30%;
    height: 100%;
    background: url(~@/assets/images/line_img.png) top left repeat-y;

    .full_btn{
      width: 92%;
      height: 3%;
      // background: red;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .right_top{
      width: 92%;
      height: 30%;
      margin: 0 auto;
      margin-top: 0.1rem;

      .title_box {
        width: 100%;
        height: 0.42rem;
        background: url(~@/assets/images/box_title.png) top left no-repeat;
        background-size:100% 100% ;

        .tit {
          width: 30%;
          height: 100%;
          font-size: 0.2rem;
          color: #fff;
          display: flex;
          align-items: center;
          padding-left: 0.4rem;
        }
      }
    }

    .right_center{
      width: 92%;
      height: 45%;
      // background: red;
      margin:0 auto;
      .title_box {
        width: 100%;
        height: 0.42rem;
        background: url(~@/assets/images/box_title.png) top left no-repeat;
        background-size:100% 100% ;

        .tit {
          width: 30%;
          height: 100%;
          font-size: 0.2rem;
          color: #fff;
          display: flex;
          align-items: center;
          padding-left: 0.4rem;
        }
      }
    }

    .right_bot{
      width: 92%;
      height: 20%;
      // background: green;
      margin:0 auto;
      .title_box {
        width: 100%;
        height: 0.42rem;
        background: url(~@/assets/images/box_title.png) top left no-repeat;
        background-size:100% 100% ;

        .tit {
          width: 30%;
          height: 100%;
          font-size: 0.2rem;
          color: #fff;
          display: flex;
          align-items: center;
          padding-left: 0.4rem;
        }
      }
    }
  }
}
</style>