mec-cloud_-intelligent-manufacturing_client/zkqy-ui/src/views/orderMange/statisticalAnalysis/saleIndex.vue

<template>
  <div style="overflow: hidden">
    <!-- 销售统计 -->
    <el-row>
      <el-col :span="12">
        <el-card class="box-card" style="margin-left: 20px;margin-top: 20px">
          <div style="margin-left: 15px">
            <child-component3></child-component3>
          </div>
        </el-card>
      </el-col>

      <!-- 按品种统计  已销售产品的单据中销售量大的产品做排行 -->
      <el-col :span="12">
        <el-card class="box-card" style="margin-left: 20px;margin-top: 20px;margin-right: 20px">
          <div>
            <child-component4></child-component4>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <!-- 客户订单排行表，排行前10名和单据总量和货品总数量 -->
      <el-col :span="12">
        <el-card class="box-card" style="margin-left: 20px;margin-top: 20px;padding-top: 40px;padding-bottom: 18px">
          <div>
            <child-component1></child-component1>
          </div>
        </el-card>
      </el-col>
      <!-- 按客户统计订单数数量和货品总量 -->
      <el-col :span="12">
        <el-card class="box-card" style="margin-left: 20px;margin-top: 20px;margin-right: 20px">
          <div>
            <child-component2></child-component2>
          </div>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import ChildComponent1 from './customerOrderRanking.vue';
import ChildComponent2 from './customerStatistics.vue';
import ChildComponent3 from './salesStatistics.vue';
import ChildComponent4 from './productsSoldRanking.vue';

export default {
  name: 'customerParentComponent',
  components: {
    ChildComponent1,
    ChildComponent2,
    ChildComponent3,
    ChildComponent4
  }
};
</script>

<style scoped>
.box-card {
  box-shadow: 10px 10px 5px #e0e0e0;
  background-color: #fff;
  border-radius: 10px;
}

</style>