gas-injection/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: 700 }"
      />
    </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 } from '../common.data';
  const { hasPermission } = usePermission();
  const router = useRouter();
  const tableData = ref([]);

  //分页切换
  const pageChange = (val) => {
    console.log(val, 'val');
    pagination.current = val.current;
    pagination.pageSize = val.pageSize;
    getListData();
  };
  const pagination = reactive({
    current: 1, // 当前页码
    pageSize: 20, // 每页显示条数
    total: 0, // 总条目数，后端返回
    showTotal: (total) => `共 ${total} 条`, // 分页右下角显示信息
  });
  //返回首页
  function getBack() {
    router.push('/monitorChannel/monitor-alarm-home');
  }
  async function getListData() {
    var params = {
      pageIndex: pagination.current,
      pageSize: pagination.pageSize,
    };
    const res = await getHydrology({ ...params });
    tableData.value = res.data;
    pagination.total = res.count;
  }
  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>