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

<template>
  <PageWrapper dense>
    <div style="margin: 1%; padding: 1%; border-radius: 10px; background: #fff">
      <a-cascader
        v-model:value="district"
        :options="districtOptions"
        placeholder="Please select"
        change-on-select
        @change="districtChange"
      />
      <div v-for="(i, index) in goalDistrictInfo" style="margin: 20px 0" :key="index">
        <div style="margin: 10px">{{ i.msg }}</div>
        <div>
          <a-table :dataSource="i.list" :columns="columns" :pagination="false" bordered />
        </div>
      </div>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { PageWrapper } from '@/components/Page';
  //地区
  const district = ref<any>([]);
  const districtOptions = ref([
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
              value: 'xihu',
              label: 'West Lake',
            },
          ],
        },
      ],
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
          children: [
            {
              value: 'zhonghuamen',
              label: 'Zhong Hua Men',
            },
          ],
        },
      ],
    },
  ]);
  const districtChange = () => {
    console.log(district.value);
  };
  const goalDistrictInfo = [
    {
      msg: '1996-2000：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
      list: [
        {
          district: '1995',
          river: '100',
          cross: '80',
          goal: '80%',
          thirdFive: '30',
          fourthFive: '20',
          fifthFive: '67%',
        },
      ],
    },
    {
      msg: '1996-2000：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
      list: [
        {
          district: '1995',
          river: '100',
          cross: '80',
          goal: '80%',
          thirdFive: '30',
          fourthFive: '20',
          fifthFive: '67%',
        },
        {
          district: '1995',
          river: '100',
          cross: '80',
          goal: '80%',
          thirdFive: '30',
          fourthFive: '20',
          fifthFive: '67%',
        },
      ],
    },
    {
      msg: '1996-2000：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
      list: [
        {
          district: '1995',
          river: '100',
          cross: '80',
          goal: '80%',
          thirdFive: '30',
          fourthFive: '20',
          fifthFive: '67%',
        },
        {
          district: '1995',
          river: '100',
          cross: '80',
          goal: '80%',
          thirdFive: '30',
          fourthFive: '20',
          fifthFive: '67%',
        },
        {
          district: '1995',
          river: '100',
          cross: '80',
          goal: '80%',
          thirdFive: '30',
          fourthFive: '20',
          fifthFive: '67%',
        },
      ],
    },
  ];

  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: 'cross',
      key: 'cross',
      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>