用vue ant做出来代码页面 需求是做一个报警页面的配置，主要是上面有一些报警的策略，例如选择磁盘空间小于多少、数据包丢弃多少等选项，上面是配置，下面是报警的历史列表 。

好的，下面是一个简单的示例代码，你可以根据自己的需求进行修改：

<template>
  <div>
    <!-- 报警配置 -->
    <h2>报警配置</h2>
    <a-row :gutter="16" style="margin-bottom: 20px;">
      <a-col :span="12">
        <a-form-item label="磁盘空间">
          <a-input-number v-model="diskSpace" :min="0" :max="100" />
          <span slot="suffix">%</span>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="数据包丢弃">
          <a-input-number v-model="dataDrop" :min="0" :max="100" />
          <span slot="suffix">%</span>
        </a-form-item>
      </a-col>
    </a-row>

    <!-- 报警历史列表 -->
    <h2>报警历史</h2>
    <a-table :columns="columns" :dataSource="dataSource" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      diskSpace: 0, // 磁盘空间报警阈值
      dataDrop: 0, // 数据包丢弃报警阈值
      columns: [
        { title: '时间', dataIndex: 'time', key: 'time' },
        { title: '报警类型', dataIndex: 'type', key: 'type' },
        { title: '报警内容', dataIndex: 'content', key: 'content' },
      ],
      dataSource: [
        {
          time: '2021-01-01 10:00:00',
          type: '磁盘空间',
          content: '磁盘空间不足，目前仅剩下 10% 的空间。',
        },
        {
          time: '2021-01-01 11:00:00',
          type: '数据包丢失',
          content: '数据包丢失率超过 20%。',
        },
      ],
    };
  },
};
</script>

这里使用了 Ant Design Vue 中的 `a-input-number`、`a-form-item` 和 `a-table` 组件来实现页面的布局和展示。其中，`diskSpace` 和 `dataDrop` 分别表示磁盘空间和数据包丢失的报警阈值，`columns` 定义了报警历史列表的列名，`dataSource` 则表示报警历史列表的数据源。你可以根据自己的需求进行修改和扩展。