vent-template/src/views/vent/monitorManager/alarmMonitor/common/PipeWarn.vue

<template>
  <div class="warnTarget">
    <div class="top-section">
      <a-table :columns="columns" :data-source="tableData" bordered :pagination="false">
        <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex === 'name'">
            <a href="javascript:;">{{ text }}</a>
          </template>
        </template>
      </a-table>
    </div>
    <div class="bottom-section"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';

let columns = reactive([
  {
    title: '序号',
    width: 60,
    align: 'center',
  },
  {
    title: '一级指标',
    dataIndex: 'one',
    align: 'center',
  },
  {
    title: '二级指标',
    dataIndex: 'two',
    align: 'center',
  },
  {
    title: '三级指标',
    align: 'center',
    dataIndex: 'three',
  },
  {
    title: '低风险',
    dataIndex: 'warnLow',
    align: 'center',
  },
  {
    title: '一般风险',
    dataIndex: 'warnCen',
    align: 'center',
  },
  {
    title: '较高风险',
    dataIndex: 'warnJg',
    align: 'center',
  },
  {
    title: '高风险',
    dataIndex: 'warnHign',
    align: 'center',
  },
]);
</script>

<style lang="less" scoped>
.warnTarget {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.top-section,
.bottom-section {
  flex: 1;
  min-height: 0;
}
.bottom-section {
  overflow: hidden;
}
</style>