<template>
    <!-- 创业公司登记 -->
    <div class="firm">
      <div class="pAHeader">
        <div class="pAHeader1">数据监测</div>
      </div>
      <hr />
      <!-- 顶部展示信息区开始 -->
      <topData :data="HeaderData"/>
      <!-- 顶部展示信息区结束 -->
      <!-- 中部大饼区开始 -->
     <div class="midBlock">
      <!-- 圆形图开始 -->
      <CircularChart :data="CircularData"/>
      <!-- 圆形图结束 -->
      <!-- 横向柱状图开始 -->
      <HorizontalChart :data="HorizontalData"/>
      <!-- 横向柱状图结束 -->
     </div>
      <!-- 中部大饼区结束 -->

      <!-- 柱状图区域开始 -->
      <ColumnarChart :data="ColumnarData"/>
      <!-- 柱状图区域结束 -->

      <!-- 底部表格区域开始 -->
      <RankingTable :tableData="tableData"/>
<!-- 通知表格结束-->
      <!-- 底部表格区域结束 -->


    </div>
  </template>
    
  <script>
 //顶部数据
 import topData from './components/topData.vue'
 //圆形图
 import CircularChart from './components/CircularChart.vue';
 //横向柱状图
 import HorizontalChart from './components/HorizontalChart.vue';
 //竖向柱状图
 import ColumnarChart from './components/ColumnarChart.vue';
 //排名表格
 import RankingTable from './components/RankingTable.vue';
  export default {
   components:{topData,CircularChart,HorizontalChart,ColumnarChart,RankingTable},
    data() {
      return {
        //头部区域数据
        HeaderData:{
          people:329,
          project:40,
          activity:25,
          budget:100,
          isPay:25
        },
        //圆形
        CircularData:[
          {value:30,name:"个人创客"},
          {value:70,name:"创客活动"}
        ],
        //横行的柱状
        HorizontalData:[
            [ '物联网激光切割器',0],
            [ '人工智能领跑马拉松',1000, ],
            [ '3D演奏智能工具', 2000],
            [ '人工智能分链机器',3000],
        ],
        // 柱状
        ColumnarData:[
              ['3D智能分链机器', 2000],
              ['3D智能分链机器1',3000],
              ['3D智能分链机器2', 2500],
              ['3D智能分链机器3', 1000],
              ['3D智能分链机器4', 2000],
              ['3D智能分链机器5',3000],
              ['3D智能分链机器6', 2500],
              ['3D智能分链机器7', 1000],
              ['3D智能分链机器8', 2000],
              ['3D智能分链机器9',3000],
              ['3D智能分链机器10', 2500],
              ['3D智能分链机器11', 1000],
              ['3D智能分链机器12', 2000],
              ['3D智能分链机器13',3000],
              ['3D智能分链机器14', 2500],
              ['3D智能分链机器15', 1000],
            ],
        tableData: [
          {title:"人工智能分链机器",pro_leader:"覃罡彤",TypeName:"个人创客",Activity:"286",ClassName:"信息与通讯学院"},
          {title:"3D演奏智能工具",pro_leader:"袁一鸣",TypeName:"个人创客",Activity:"225",ClassName:"信息与通讯学院"},
          {title:"物联网切割机器",pro_leader:"张晓分",TypeName:"个人创客",Activity:"169",ClassName:"中德制造"},
          {title:"人工智能领航AI马拉松",pro_leader:"林子夏",TypeName:"创客活动",Activity:"121",ClassName:"中德制造"},
        ]
      };
    },
  };
  </script>
    
<style lang="less">
  .midBlock{     //中部大饼
    width: 100%;
    height: 400px;
    margin-top: 20px;
    // background: #ce7070;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .mid{
      height: 95%;
      width: 49%;
      padding: 20px;
      box-sizing: border-box;
      background: #f3f6f7;
    }
  }

  .histogram{       //柱状图
    margin-top: 20px;
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    height: 400px;
    background: #f3f6f7;
  }
</style>