hyyfClient/src/views/PdcData/Analysis.vue

<template>
  <div class="analysis">
    <!-- 工作看板 -->
    <board :title="title[0]">
      <div>
        <work-infos :dataList="workInfos" @workInfoClick="handleWorkInfoClick"></work-infos>
        <div class="table-content">
          <table-content 
            :tableItems="tableItems" 
            :height="height" 
            :shows="tableShows"
            :listData="tableData">
          </table-content>
        </div>
      </div>
    </board>

    <!-- 存栏情况 -->
    <board :title="title[1]">
      <div></div>
    </board>
  </div>
</template>

<script>
import Board from 'components/board/index.vue'
import WorkInfos from './analysis/WorkInfos.vue'
import TableContent from 'components/newTable/TableContent.vue'

import { tableItems, tableShows } from './analysis/table.config'

export default {
  name: "Analysis",
  components: {
    Board,
    WorkInfos,
    TableContent
  },
  data() {
    return {
      title: ['工作看板', '存栏情况'],
      workInfos: [
        {
          label: '预警信息',
          number: 10
        },
        {
          label: '断奶数量',
          number: 1150
        },
        {
          label: '配种数量',
          number: 1540
        },
        {
          label: '转舍计划',
          number: 108
        },
        {
          label: '分娩数量',
          number: 180
        },
        {
          label: '日常计划',
          number: 10
        },
        {
          label: '天才计划',
          number: 10
        },
        {
          label: '保健计划',
          number: 10
        }
      ],
      tableItems: [], 
      tableShows: {},
      height: 300,
      tableData: []
    }
  },
  mounted() {
    this.tableItems = tableItems
    this.tableShows = tableShows
  },
  methods: {
    handleWorkInfoClick(item) {
      console.log(item)
    }
  },
}
</script>

<style scoped>
.analysis {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}
.table-content {
  padding: 10px 15px 12px;
}
</style>