yudao-dev/src/views/home/index.vue

<template>
  <div id="dayReport" class="dayReport" :style="styles">
    <ReportHeader top-title="洛玻集团运营驾驶舱" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
       @timeRangeChange="handleTimeChange" />
    <div class="main-body"
      style="margin-top: -20px; flex: 1; display: flex;padding: 0px 16px 0;flex-direction: column;">
      <div class="top" style="display: flex;gap: 16px;">
        <div class="top-three" style="
              display: grid;
              gap: 12px;
              grid-template-columns: 560px 745px 560px ;
            ">
          <coreSalesKPIs />
          <financeCosts />
          <keyProductionIndicators />
        </div>
      </div>
      <div class="top" style="display: flex;gap: 16px;margin-top: 6px;">
        <div class="left-three" style="
              display: grid;
              gap: 12px;
              grid-template-columns: 560px 745px 560px ;
            ">
          <coreBottomLeft />
          <orderProgress />
          <keyWork />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ReportHeader from './components/Header.vue'
import screenfull from 'screenfull'
import coreSalesKPIs from './components/coreSalesKPIs.vue'
import financeCosts from './components/financeCosts.vue'
import keyProductionIndicators from './components/keyProductionIndicators.vue'
import coreBottomLeft from './components/coreBottomLeft.vue'
import orderProgress from './components/orderProgress.vue'
import keyWork from './components/keyWork.vue'
import moment from 'moment'
export default {
  name: 'DayReport',
  components: { ReportHeader, coreSalesKPIs, keyProductionIndicators, coreBottomLeft, keyWork, orderProgress, financeCosts },
  data() {
    return {
      isFullScreen: false,
      timer: null,
      beilv: 1,
      value: 100,
    }
  },

  created() {
    this.init()
    this.windowWidth(document.documentElement.clientWidth)
  },
  computed: {
    // ...mapGetters(['sidebar']),
    styles() {
      const v = Math.floor(this.value * this.beilv * 100) / 10000
      return {
        transform: `scale(${v})`,
        transformOrigin: 'left top'
        // overflow: hidden;
      }
    }
  },
  watch: {
    clientWidth(val) {
      if (!this.timer) {
        this.clientWidth = val
        this.beilv2 = this.clientWidth / 1920
        this.timer = true
        let _this = this
        setTimeout(function () {
          _this.timer = false
        }, 500)
      }
      // 这里可以添加修改时的方法
      this.windowWidth(val);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.destroy()
  },
  mounted() {
    const startTime = moment().startOf('week').format('YYYY-MM-DD')
    const endTime = moment().format('YYYY-MM-DD')
    console.log(this.date, 'date')
    this.date = [startTime, endTime]
    // this.weekDay = this.weekArr[moment(this.date).format('e')]
    // this.getData()
    this.loopTime()
    console.log(1111);
    const _this = this;
    _this.beilv = document.documentElement.clientWidth / 1920
    window.onresize = () => {
      return (() => {
        _this.clientWidth = `${document.documentElement.clientWidth}`
        this.beilv = _this.clientWidth / 1920
      })()
    }
  },
  methods: {
    handleTimeChange(data) {
      console.log(data);

    },
    windowWidth(value) {
      this.clientWidth = value
      this.beilv2 = this.clientWidth / 1920
    },
    getToday8StartTimestamp() {
      const date = new Date(); // 获取当前时间
      // 将时设为8、分0、秒0、毫秒0
      date.setHours(8, 0, 0, 0);
      return date.getTime(); // 转换为时间戳（毫秒）
    },

    // 获取第二天早上八点的时间戳
    getTomorrow8EndTimestamp() {
      const date = new Date(); // 获取当前时间
      // 先加一天，再设置为早上八点
      date.setDate(date.getDate() + 1);
      date.setHours(8, 0, 0, 0);
      return date.getTime(); // 转换为时间戳（毫秒）
    },



    loopTime() {
      const _this = this
      _this.timer = setInterval(
        function() {
          // _this.getData()
        }, 60000)
    },
    change() {
      this.isFullScreen = screenfull.isFullscreen
    },
    init() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.on('change', this.change)
    },
    destroy() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.off('change', this.change)
    },
    // 全屏
    screenfullChange() {
      console.log('screenfull.enabled', screenfull.isEnabled);

      if (!screenfull.isEnabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle(this.$refs.dayReportB)
    },
    changeDate(val) {
      this.date = val
      // this.weekDay = this.weekArr[moment(this.date).format('e')]
      // this.getData()
      if (this.date === moment().format('yyyy-MM-DD')) {
        this.loopTime()
      } else {
        clearInterval(this.timer)
      }
    },
    // 导出
    // exportPDF() {
    //   this.$message.success('正在导出，请稍等！')
    //   const element = document.getElementById('dayRepDom')
    //   element.style.display = 'block'
    //   const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
    //   html2canvas(element, {
    //     dpi: 300, // Set to 300 DPI
    //     scale: 3 // Adjusts your resolution
    //   }).then(function(canvas) {
    //     const imgWidth = 595.28
    //     const imgHeight = 841.89
    //     const pageData = canvas.toDataURL('image/jpeg', 1.0)
    //     const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
    //     PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
    //     setTimeout(() => {
    //       PDF.save(fileName) // 导出文件名
    //     }, 1000)
    //   })
    //   element.style.display = 'none'
    // }
  }
}
</script>
<style scoped lang="scss">
  .dayReport {
    width: 1920px;
    height: 1080px;
    background: url('../../assets/img/backp.png') no-repeat;
    background-size: cover;
  }
</style>