/**
  // author：zhangb
  // time:2022-10-19
  // desc:可视化组件图标部分拆解
*/
<template>
  <div class="dashboard">
    <!-- 顶部卡片汇总 -->
    <div class="top_card_border">
      <card-box :boxWidth="'19%'" :numValue="8866" :mainTitle="'牧场总数量'" :numUnit="'个'"></card-box>
      <card-box :startCor="'#f382ee'" :endCor="'#7d7cfe'" :boxWidth="'19%'" :numValue="65244" :mainTitle="'奶牛总数量'" :numUnit="'头'"></card-box>
      <card-box :startCor="'#40ecb0'" :endCor="'#0eb4e8'" :boxWidth="'19%'" :numValue="10521" :mainTitle="'原奶总产量'" :numUnit="'公斤'"></card-box>
      <card-box :startCor="'#fe8e82'" :endCor="'#ff6fb7'" :boxWidth="'19%'" :numValue="8452" :mainTitle="'草料需求量'" :numUnit="'万吨'" :subTitle="'(按每月)'"></card-box>
      <card-box :startCor="'#fe8e82'" :endCor="'#ff6fb7'" :boxWidth="'19%'" :numValue="65121" :mainTitle="'饲料需求量'" :numUnit="'万吨'" :subTitle="'(按每月)'"></card-box>
    </div>

    <!-- TODO 暂不使用 -->
    <!-- 中部区域 -->
    <div class="mid_content" v-show="false">
      <!-- 左边 -->
      <div class="let_step">
        <des-card></des-card>
        <des-card></des-card>
        <des-card></des-card>
        <des-card></des-card>
        <des-card></des-card>
        <des-card></des-card>
      </div>
      <!-- echarts 图表 -->
      <div class="right_step">
        <pie-chart></pie-chart>
      </div>
    </div>
    
    <!-- 核心可视化地图内容 -->
    <div class="map_style">
      <map-chart :heightStyle="'height:800px;'"></map-chart>
    </div>
    
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import cardBox from './components/cardBox.vue'
import desCard from './components/desCard.vue'
export default defineComponent({
  components:{
    cardBox,desCard
  },
  setup() {
    return {
      
    }
  },
  methods: {
    
  }
})
</script>

<style lang="scss" scoped>
.dashboard{
  padding: 1em;
  .top_card_border{
    width: 100%;
    display: flex;
    justify-content:space-between;
  }
  .mid_content{
    margin-top:30px;
    display: flex; justify-content:space-between;
    .let_step{
      // border: 1px solid #000;
      display: flex; justify-content:space-between;
      width:55%; height: calc(35vh);
      flex-wrap:wrap;
    }
    .right_step{
      width: 44%; height: 34vh;
      background-color: #fff;
    }
  }
  .map_style{
    border: 1px solid #000; margin-top:30px;
    height: calc(100vh*0.7);
  }
}
</style>