jsm-mall-front/src/views/bigViews/dataView1/index.vue

<template>
  <div class="margin-of-content">
    <zj-page-container direction="row">
      <zj-page-fill>
        <zj-page-container direction="row">
          <div style="width: 26%">
            <zj-page-container>
              <div class="module-inner-margin" style="height: 28%">
                <!-- 辅配件统计 -->
                <accessoryStatistics />
              </div>
              <div class="module-inner-margin" style="height: 38%">
                <!-- 工单统计 -->
                <workOrderStatistics />
              </div>
              <div class="module-inner-margin" style="min-height: 30.32%; height: 44.32%">
                <!-- 工单趋势 -->
                <workOrderTrend />
              </div>
            </zj-page-container>
          </div>
          <div style="width: 48%">
            <zj-page-container>
              <div class="module-inner-margin h70">
                <mapdata />
              </div>
              <div class="module-inner-margin h30">
                <trendChart />
              </div>
            </zj-page-container>
          </div>
          <div style="width: 26%">
            <zj-page-container>
              <div class="module-inner-margin" style="height: 28%">
                <orderStatistics />
              </div>
              <div class="module-inner-margin" style="height: 38%">
                <orderTrend />
              </div>
              <div class="module-inner-margin" style="min-height: 30.32%; height: 44.32%">
                <orderAmountTrend />
              </div>
            </zj-page-container>
          </div>
        </zj-page-container>
      </zj-page-fill>
    </zj-page-container>
  </div>
</template>

<script>
import orderAmountTrend from './components/orderAmountTrend.vue'
import workOrderTrend from './components/workOrderTrend.vue'
import orderTrend from './components/orderTrend.vue'
import accessoryStatistics from './components/accessoryStatistics.vue'
import orderStatistics from './components/orderStatistics.vue'
import mapdata from './components/mapdata.vue'
import workOrderStatistics from './components/workOrderStatistics.vue'
import trendChart from './components/trendChart.vue'
export default {
  components: {
    orderAmountTrend,
    workOrderTrend,
    orderTrend,
    accessoryStatistics,
    orderStatistics,
    mapdata,
    workOrderStatistics,
    trendChart
  },
  data() {
    return {
      showMap: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.showMap = true
    })
  },
  beforeUnmount() {},
  methods: {}
}
</script>

<style scoped lang="scss">
.margin-of-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 6px;
}
.module-inner-margin {
  box-sizing: border-box;
  padding: 6px;
}
.h30 {
  height: 30%;
}
.h53 {
  height: 53%;
}
.h47 {
  height: 47%;
}
.h70 {
  height: 70%;
}
</style>