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

<template>
  <div id="dayReport" class="dayReport" :style="styles">
    <!-- <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> -->
    <sidebar style="opacity: .9;" v-if="!sidebar.hide && openSider" class="sidebar-container" />
    <ReportHeader top-title="洛玻集团运营驾驶舱" :openSider="openSider" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
      @siderOpenChange="siderOpenChange" @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 :sale="sale" :dateData="dateData" />
          <financeCosts :finance="finance" :dateData="dateData" :cost="cost" />
          <keyProductionIndicators :product="productData" :heat="heat" :dateData="dateData" />
        </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:745px 560px 560px ;
            ">
          <orderProgress @getData="getOrderData" :baseOrder="orderTableData" :orderOutput="orderOutput" />
          <coreBottomLeft :dateData="dateData" :purchase="purchase" :inventory="inventory" />
          <keyWork :importantWork="importantWork" />
        </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'
import { getOperateCockpit, getOrderDetail } from '@/api/cockpit'
import { Sidebar } from "../../layout/components";
import { mapState } from "vuex";
export default {
  name: 'JtHome',
  components: { ReportHeader, coreSalesKPIs, keyProductionIndicators, coreBottomLeft, keyWork, orderProgress, financeCosts, Sidebar },
  data() {
    return {
      isFullScreen: false,
      openSider: false,
      timer: null,
      beilv: 1,
      value: 100,
      orderTableData:[],
      productData: {},
      purchase: {},
      dateData:{},
      inventory: {},
      importantWork: {},
      finance: {},
      cost: {},
      sale: {},
      orderOutput: {},
      baseOrder:[],
    }
  },

  created() {
    this.init()
    this.windowWidth(document.documentElement.clientWidth)
  },
  computed: {
    ...mapState({
      theme: (state) => state.settings.theme,
      sideTheme: (state) => state.settings.sideTheme,
      sidebar: (state) => state.app.sidebar,
      device: (state) => state.app.device,
      needTagsView: (state) => state.settings.tagsView,
      fixedHeader: (state) => state.settings.fixedHeader,
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === "mobile",
      };
    },
    variables() {
      return variables;
    },
    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 _this = this;
    _this.beilv = document.documentElement.clientWidth / 1920
    window.onresize = () => {
      return (() => {
        _this.clientWidth = `${document.documentElement.clientWidth}`
        this.beilv = _this.clientWidth / 1920
      })()
    }
  },
  methods: {
   async getOrderData(num) {
      const res = await getOrderDetail({
        // startTime: this.dateData.startTime,
        // endTime: this.dateData.endTime,
        // timeDim: this.dateData.mode,
        baseId: num
      })
      this.orderTableData = res.data
    },
    getData(obj) {
      console.log('obj', obj);

      this.dateData= obj
      getOperateCockpit({
        startTime: obj.startTime,
        endTime: obj.endTime,
        timeDim: obj.mode ? obj.mode : obj.timeDim,
        baseId: obj.baseId ? obj.baseId : 1
      }).then((res) => {
        console.log(res)
        this.productData = res.data.product
        this.heat = res.data.heat
        this.purchase = res.data.purchase
        this.inventory = res.data.inventory
        this.importantWork = res.data.importantWork
        this.finance = res.data.finance
        this.cost = res.data.cost
        this.sale = res.data.sale
        this.orderOutput = res.data.orderOutput
        this.baseOrder = res.data.baseOrder
      })
    },
    handleTimeChange(obj) {
      console.log(obj, 'obj');
      this.getData(obj)
    },
    change() {
      this.isFullScreen = screenfull.isFullscreen
    },
    handleClickOutside() {
      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
    },
    windowWidth(value) {
      this.clientWidth = value;
      this.beilv2 = this.clientWidth / 1920;
    },
    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)
    },
    siderOpenChange() {
      this.openSider = !this.openSider
    },
    // 全屏
    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)
    },
  }
}
</script>
<style scoped lang="scss">
  .dayReport {
    width: 1920px;
    height: 1080px;
    background: url('../../assets/img/backp.png') no-repeat;
    background-size: cover;
  }
</style>