mky-vent-base/src/views/vent/monitorManager/alarmMonitor/warn/waterLevel.vue

<template>
  <customHeader> 水文监测 </customHeader>
  <div class="gasWarn">
    <a-button
      v-if="!hasPermission('waterLevel:return')"
      preIcon="ant-design:rollback-outlined"
      type="text"
      size="small"
      style="position: absolute; left: 15px; top: 15px; color: #fff"
      @click="getBack"
    >
      返回
    </a-button>
    <div class="gas-content">
      <a-table
        :height="300"
        :columns="columns"
        :data-source="tableData"
        size="large"
        :pagination="pagination"
        class="tableW"
        @change="pageChange"
        :scroll="{ y: 800 }"
      ></a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
import CustomHeader from '/@/components/vent/customHeader.vue';
import { getHydrology } from '../common.api';
import { usePermission } from '/@/hooks/web/usePermission';
import { useRouter } from 'vue-router';
import { columns, pagination } from '../common.data';
const { hasPermission } = usePermission();
let router = useRouter();
let tableData = ref([]);
//分页切换
let pageChange = (val) => {
  pagination.current = val.current;
  pagination.pageSize = val.pageSize;
  getListData();
};
//返回首页
function getBack() {
  router.push('/monitorChannel/monitor-alarm-home');
}
async function getListData() {
  var params = {
    pageIndex: pagination.current,
    pageSize: pagination.pageSize,
  };
  const res = await getHydrology(params);
  if (res?.result) {
    const parsedResult = JSON.parse(res.result);
    tableData.value = parsedResult?.data || []; // 默认空数组防undefined
    pagination.total = parsedResult.total; // 更新总条数
  }
}
onMounted(() => {
  getListData();
});
onUnmounted(() => {});
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .gasWarn {
    --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
    --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
    --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
    --image-top-area: url('/@/assets/images/themify/deepblue/fire/top-area.png');
  }
}

.gasWarn {
  --image-no-choice: url('/@/assets/images/fire/no-choice.png');
  --image-choice: url('/@/assets/images/fire/choice.png');
  --image-border: url('/@/assets/images/fire/border.png');
  --image-bj1: url('/@/assets/images/fire/bj1.png');
  --image-top-area: url('/@/assets/images/fire/top-area.png');
  width: 100%;
  height: 100%;
  padding: 80px 10px 15px 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;

  .gas-content {
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: 10px;
    padding: 15px;
    background: var(--image-border) no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
  }
}
</style>