ops-management-platform-frontend/src/views/achievement/goalDistrict/index.vue

<template>
  <PageWrapper dense>
    <div style="margin: 1%; padding: 1%; border-radius: 10px; background: #fff">
      <span>控制区：</span>
       <a-input v-model:value="district" style="width:180px"></a-input>
       <a-button type="primary" @click="search" style="margin-left: 20px;">查询</a-button>
      <div v-for="(i, index) in goalDistrictInfo" style="margin: 20px 0" :key="index">
        <div style="margin: 10px">{{ i.description }}</div>
        <div>
          <a-table :dataSource="i.areaInfo" :columns="columns" :pagination="false" bordered />
        </div>
      </div>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import {list} from './api'
  //地区
  const district = ref('');
  const districtOptions = ref([
  ]);
  const search = async() =>{
  const res = await list({district:district.value})
  goalDistrictInfo.value = res
  console.log(res)
  }
  const goalDistrictInfo = ref([
  ])

  const columns = [
    {
      dataIndex: 'district',
      key: 'district',
      title: '控制区',
      customCell: (_, index) => {
        if (index === 0) {
          return { rowSpan: 3 };
        } else {
          return { rowSpan: 0 };
        }
      },
    },
    {
      dataIndex: 'river',
      key: 'river',
      title: '水体',
    },
    {
      dataIndex: 'controlSection',
      key: 'controlSection',
      title: '控制断面',
    },
    {
      dataIndex: 'goal',
      key: 'goal',
      title: '目标',
    },
    {
      dataIndex: 'thirdFive',
      key: 'thirdFive',
      title: '十一五',
    },
    {
      dataIndex: 'fourthFive',
      key: 'fourthFive',
      title: '十二五',
    },
    {
      dataIndex: 'fifthFive',
      key: 'fifthFive',
      title: '十三五',
    },
  ];
</script>
<style lang="less">
  .tabBox {
    margin: 20px;
  }

  .title {
    margin: 10px 0;
    font-size: 20px;
    font-weight: 550;
  }
</style>