

<template>
  <div class="paifang" style="height: 100vh;overflow: hidden">
    <a-page-header
      :ghost="false"
      style="border-bottom: 1px solid rgb(235, 237, 240)"
      title="有组织排放"
      @back="() => $router.go(-1)"
    />
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card title="全厂有组织排放源" size="small">
          <p>card content</p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="全厂重要排放源" size="small">
          <p>card content</p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="当前区域排放源" size="small">
          <p>card content</p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="当前区域其中重要排放源"  size="small">
          <p>card content</p>
        </a-card>
      </a-col>
    </a-row>
    <a-row style="height: calc(100% - 147px);margin-top: 16px;"  :gutter="16">
      <a-col :span="6" style="height: 100%;">
        <a-card title="工序步骤" size="small">
          <a-button type="primary" block>
            Primary
          </a-button>
          <a-button type="primary" block class="mt16">
            Primary
          </a-button>
          <a-button type="primary" block class="mt16">
            Primary
          </a-button>
          <a-button type="primary" block class="mt16">
            Primary
          </a-button>
          <a-button type="primary" block class="mt16">
            Primary
          </a-button>
          <a-button type="primary" block class="mt16">
            Primary
          </a-button>

        </a-card>
      </a-col>
      <a-col :span="12" style="height: 100%;">
        <div style="height: 100%;position: relative">
          <Map></Map>
        </div>
      </a-col>
      <a-col :span="6" style="height: 100%;">
        <a-table :columns="columns" :data-source="data" />
      </a-col>
    </a-row>
  </div>
</template>

<script>
import Map from "../../components/Map.vue";
export default {
  name: "paifang",
  components: {
    Map
  },
  data () {
    return {
      data: [],
      columns: [
        { title: '名词', key: 'name' },
        { title: 'NO', key: 'NO' },
        { title: 'SO2', key: 'SO2' },
        { title: 'TSP', key: 'TSP' },
      ]
    }
  }
}
</script>

<style scoped lang="less">
  .mt16 {
    margin-top: 16px;
  }
</style>
