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

<template>
  <PageWrapper dense>
    <div style="margin: 1%; padding: 1%; border-radius: 10px; background: #fff">
      <div v-for="(i, index) in goalTimesMsg" style="margin: 20px 0 20px 20px" :key="index">{{
        i
      }}</div>
      <div>
        <a-table :dataSource="goalTimeList" :columns="columns" :pagination="false" />
      </div>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { PageWrapper } from '@/components/Page';

  const goalTimesMsg = [
    '1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
    '1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
    '1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
    '1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
    '1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
  ];

  const columns = [
    {
      dataIndex: 'date',
      key: 'date',
      title: '时期',
    },
    {
      dataIndex: 'planProject',
      key: 'planProject',
      title: '规划项目',
    },
    {
      dataIndex: 'actualProject',
      key: 'actualProject',
      title: '实际实施项目',
    },
    {
      dataIndex: 'projectPercent',
      key: 'projectPercent',
      title: '实施率',
    },
    {
      dataIndex: 'planInvest',
      key: 'planInvest',
      title: '规划投资(亿元)',
    },
    {
      dataIndex: 'actualInvest',
      key: 'actualInvest',
      title: '实际完成投资(亿元)',
    },
    {
      dataIndex: 'investPercent',
      key: 'investPercent',
      title: '完成投资率',
    },
  ];
  const goalTimeList = ref([
    {
      date: '1995',
      planProject: '100',
      actualProject: '80',
      projectPercent: '80%',
      planInvest: '30',
      actualInvest: '20',
      investPercent: '67%',
    },
    {
      date: '1995',
      planProject: '100',
      actualProject: '80',
      projectPercent: '80%',
      planInvest: '30',
      actualInvest: '20',
      investPercent: '67%',
    },
    {
      date: '1995',
      planProject: '100',
      actualProject: '80',
      projectPercent: '80%',
      planInvest: '30',
      actualInvest: '20',
      investPercent: '67%',
    },
    {
      date: '1995',
      planProject: '100',
      actualProject: '80',
      projectPercent: '80%',
      planInvest: '30',
      actualInvest: '20',
      investPercent: '67%',
    },
    {
      date: '1995',
      planProject: '100',
      actualProject: '80',
      projectPercent: '80%',
      planInvest: '30',
      actualInvest: '20',
      investPercent: '67%',
    },
    {
      date: '1995',
      planProject: '100',
      actualProject: '80',
      projectPercent: '80%',
      planInvest: '30',
      actualInvest: '20',
      investPercent: '67%',
    },
    {
      date: '1995',
      planProject: '100',
      actualProject: '80',
      projectPercent: '80%',
      planInvest: '30',
      actualInvest: '20',
      investPercent: '67%',
    },
    {
      date: '1995',
      planProject: '100',
      actualProject: '80',
      projectPercent: '80%',
      planInvest: '30',
      actualInvest: '20',
      investPercent: '67%',
    },
    {
      date: '1995',
      planProject: '100',
      actualProject: '80',
      projectPercent: '80%',
      planInvest: '30',
      actualInvest: '20',
      investPercent: '67%',
    },
    {
      date: '1995',
      planProject: '100',
      actualProject: '80',
      projectPercent: '80%',
      planInvest: '30',
      actualInvest: '20',
      investPercent: '67%',
    },
  ]);
</script>
<style lang="less">
  .tabBox {
    margin: 20px;
  }

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