<template>
  <!-- 经营面板 -->
  <div class="container">
    <managementList class="common-width"/>
    <!-- 用户数量变化趋势 -->
    <layoutStackAreaChartTrend class="common-width"/> 
    <!-- 用户分布统计 -->
    <layoutChartRadar class="common-width"/>
    <!-- 订单统计-->
    <orderStatistics class="common-width"/>
    <!-- 经销商订单同比/环比统计 -->
    <commonSelectChart :fetchdata="getOrderRatio" class="common-width" name="经销商订单同比/环比统计" :legendDefault="['经销商订单数','环比值','同比值']"/>
    <!-- 分子公司订单同比/环比统计 -->
    <commonSelectChart :fetchdata="getBranchOrderRatio" class="common-width" name="分子公司订单同比/环比统计" :legendDefault="['分子公司订单数','环比值','同比值']"/>
    <!-- 商机统计 -->
    <opportunityStatistics class="common-width"/>
    <!-- 商机同比/环比统计 -->
    <commonSelectChart :fetchdata="getBusinessOpportunityRatio" class="common-width" name="商机同比/环比统计" :legendDefault="['商机个数','环比值','同比值']"/>
    <!-- 商机转订单同比/环比统计 -->
    <commonSelectChart :fetchdata="getBusinessOpportunityTurnRatio" class="common-width" name="商机转订单同比/环比统计" :legendDefault="['商机转订单数','环比值','同比值']"/>
  </div>
</template>

<script>
import managementList from './components/managementList.vue';
import layoutStackAreaChartTrend from './components/layoutStackAreaChartTrend.vue';
import layoutChartRadar from './components/layoutChartRadar.vue';
import orderStatistics from './components/orderStatistics.vue'
import commonSelectChart from './components/commonSelectChart.vue';
import opportunityStatistics from './components/opportunityStatistics.vue'
import { getOrderRatio, getBranchOrderRatio, getBusinessOpportunityRatio, getBusinessOpportunityTurnRatio } from '@/api/cockpit/cockpit'
export default {
    name:'managementPanel',
    components:{
      managementList,
      layoutStackAreaChartTrend,
      layoutChartRadar,
      orderStatistics,
      commonSelectChart,
      opportunityStatistics
    },
    data() {
      return{
      }
    },
    methods:{
      getOrderRatio:getOrderRatio,
      getBranchOrderRatio:getBranchOrderRatio,
      getBusinessOpportunityRatio:getBusinessOpportunityRatio,
      getBusinessOpportunityTurnRatio:getBusinessOpportunityTurnRatio
    }
}
</script>

<style lang="scss" scoped>
.container{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-right: -17px;
  .common-width{
      width: 33%;
  }
}
</style>