<!--
 描述: 本月总产量
 作者: anni
 日期: 2024-10-30
-->

<template>
  <div class="home-container">
  	<div class="wrap" ref="editor">
      <div class="wrap-container sn-container"> 
          <div class="sn-content"> 
              <div class="sn-title" @click="goHome">{{ time }}（截止至{{ date }}）<span style="color:#ff9829">{{ name }} </span></div> 
              <div class="sn-body"> 
              <div class="wrap-container">
                  <div class="map">
                    <span class="text">
                      <div class="title">累计总产量</div>
                      <countTo :startVal='0' :endVal='data' :duration='1000' separator=""></countTo>
                    </span>
                    <div class="map1"></div>
                    <div class="map2"></div>
                    <div class="map3"></div>
                  </div>
                </div> 
              </div> 
          </div>   
      </div>

      <div class="divider"></div>
    </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
import { getMonthTotal } from "@/api/product/dashboard.js";
import { screenSize } from '@/assets/js/utils'

export default {
  name: 'MonthTotal',
  components: {
    countTo
  },
  data() {
  	return {
  		option: null,
      timer: null,
      timers: null,
      data: 0,
      allData: {},
      time: '',
      name: '',
      date: '',
      timelineData: []
  	}
  },
  computed: {
  	
  },
  created() {
  },
  async mounted() {
    this.timeFormate(new Date());

    await this.getData();

    this.loadData();

    screenSize(this.$refs.editor);
  },
  methods: {
    goHome() {
      if (process.env.NODE_ENV === 'production') {
        this.$router.push({ path: '/admin/index' });
      } else {
        this.$router.push({ path: '/' });
      }
    },
    timeFormate(timeStamp) { //显示当前时间
        let newDate = new Date(timeStamp);
        let year = newDate.getFullYear();
        let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
        let day = newDate.getDate() - 1;

        this.time = year + '年' + month + '月份'

        this.date = year + '年' + month + '月' + day + '日'
    },

    /** 获取列表数据 */
    async getData() {
      let list = [];
      let index = 0;
      await getMonthTotal().then(res => {
        if (res.data) {
          let sum = 0;
          Object.values(res.data).forEach((val) => {
            sum += val;
          })
          this.data = sum;
        }
      }).catch();

      // let _this = this;
      // this.timer = setInterval(function() {
      //   index++;
      //   if (index === _this.timelineData.length) {
      //     index = 0;
      //   }

      //   _this.name = _this.timelineData[index];
      //   _this.data = _this.allData[_this.name] 
      // }, 60000)
    },
    loadData() {
      let _this = this;
      this.timers = setInterval(function() {
        _this.getData();
      }, 1800000)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.timers);
  }
}
</script>
<style lang="scss" scoped>
.home-container {
  height: 100vh !important;
  width: 100% !important;
  z-index: 10001 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
}
.sn-container {
  left: 3%;
  top: 4%;
  width: 94%;
  height: 91%;
  .chartsdom {
      width: 100%;
      height: 95%;
  }
  .sn-title {
    z-index: 99999;
    cursor: pointer;
    position: absolute;
    height: 50px;
    font-size: 50px;
    color: #7becff;
    line-height: 50px;
    padding: 0 0 0 30px;
    left: 26px;
    right: 10px;
    top: 20px;

    &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -7px;
        width: 20px;
        height: 20px;
        background: url(../../assets/images/sn-title.png) no-repeat 0% 0%;
      }
  }

  .sn-body {
      top: 70px;
  }
}
.home-container {
	position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .wrap {
    transform-origin: 0px 0px 0px 0px;
    transform: none !important;
    background: url(../../assets/images/bj.jpg) no-repeat;
    background-size: contain;
    background-position: 50% 0;
    background-color: rgb(0, 0, 0);
    min-width: auto;
    width: 1920px;
    min-height: auto;
    height: 1080px;
    overflow: hidden;

    .top {
    position: absolute;
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 80px; 
    background-color: transparent; 
    // background: url(../../assets/images/top_nav.png) no-repeat;
    background: url(../../assets/images/top_nav.png) no-repeat;
    background-position: 65% 0;
    border: none; 
    overflow: hidden;

    h1 {
        font-size: 36px;
        color: rgb(216, 255, 255);
        text-align: center;
        line-height: 70px;
        -webkit-text-stroke: 2px #193d8f;
    }
    }

    header {
    position: relative;
    height: 80px;
    background: url(../../assets/images/head_bg2.png) no-repeat top center;
    background-size: 100% 100%;
    h2 {
        color: #ffffff;
        font-size: 34px;
        text-align: center;
        line-height: 80px;
        letter-spacing: 4px;
        -webkit-text-stroke: 2px #193d8f;
    }
    .weather {
        position: absolute;
        left: 10px;
        top: 10px;
        font-size: 14px;
        color: rgba(126, 240, 255, .7);
        img {
        width: 20px;
        }
        span {
        display: inline-block;
        }
        .tem {
        margin: 0 10px 0 .2rem;
        }
    }
    .showTime {
        position: absolute;
        right: 50px;
        top: 40px;
        color: rgba(145, 233, 255, 0.801);
        display: flex;
        .time {
        font-size: 26px;
        margin-right: 30px;
        }
        .date {
        span {
            &:nth-child(1) {
            font-size: 18px;
            margin-right: 14px;
            }
            &:nth-child(2) {
            font-size: 20px;
            }
        }
        }
    }
    }

    .map {
    position: relative;
    height: 100vh;
    width: 100vw;
    text-align: center;

    .text {
      text-align: center;
      position: relative;
      top: 20%;
      z-index: 5;
      line-height: 550px;
      font-size: 180px;
      color: #ffeb7b;
      font-family: 'DIGITALDREAMFAT';
      font-weight: bold;
    }
    .title {
      position: relative;
      top: 12%;
      z-index: 5;
      font-size: 80px;
      color: #fff;
      font-family: 'YouYuan';
      font-weight: 800;
      line-height: 90px;
      width: 100%;
    }
    .map1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 750px;
      height: 750px;
      background: url(../../assets/images/map.png) no-repeat;
      background-size: 100% 100%;
      opacity: 0.3;
    }
    .map2 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: url(../../assets/images/map.png) no-repeat;
      background-size: 100% 100%;
      opacity: 0.3;
      width: 800px;
      height: 800px;
      background-image: url(../../assets/images/lbx.png);
      opacity: 0.6;
      -webkit-animation: rotate 15s linear infinite;
      animation: rotate 15s linear infinite;
      z-index: 2;
    }
    .map3 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 800px;
      background: url(../../assets/images/map.png) no-repeat;
      background-size: 100% 100%;
      opacity: 0.3;
      background-image: url(../../assets/images/jt.png);
      -webkit-animation: rotate1 10s linear infinite;
      animation: rotate1 10s linear infinite;
    }
  }
    

    .divider {
      position: absolute;
      left: 50px;
      top: 3253px;
      width: 90%;
      height: 50px;
      width: 300px;
      border: none;
      background: transparent;
    }

  }
}
@-webkit-keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@-webkit-keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920) {
  html {
    font-size: 80px !important;
  }
}
</style>
