gas-injection/src/views/vent/monitorManager/warningMonitor/index.vue

<template>
  <div class="data-statistics"> </div>
  <div class="alarm-history-table">
    <BasicTable ref="alarmHistory" @register="registerTable">
      <template #form-onExportXls>
        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" name="system-user" setup>
  //ts语法
  import { watch, ref, defineExpose, inject, onMounted } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { defHttp } from '/@/utils/http/axios';
  import dayjs from 'dayjs';
  import { getAutoScrollContainer } from '/@/utils/common/compUtils';
  import { list } from './warning.api';

  const props = defineProps({
    deviceListApi: {
      type: Function,
    },
    designScope: {
      type: String,
    },
    sysId: {
      type: String,
    },
    list: {
      type: Function,
      default: (params) => defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params }),
    },
  });

  const alarmHistory = ref();
  const columns = getTableHeaderColumns('alarm_history');

  // 列表页面公共参数、方法
  const { tableContext, onExportXls } = useListPage({
    tableProps: {
      api: list,
      columns: columns,
      canResize: true,
      showTableSetting: false,
      showActionColumn: false,
      bordered: false,
      size: 'small',
      formConfig: {
        labelAlign: 'left',
        showAdvancedButton: false,
        // autoAdvancedCol: 2,
        schemas: [
          {
            label: '是否解决',
            field: 'isok',
            component: 'Select',
            componentProps: {
              options: [
                {
                  label: '未解决',
                  value: '0',
                },
                {
                  label: '已解决',
                  value: '1',
                },
              ],
            },
            colProps: { span: 4 },
          },
          {
            label: '所属系统',
            field: 'kindtype',
            component: 'Select',
            componentProps: {
              options: [
                {
                  label: '通风',
                  value: 'ventS',
                },
                {
                  label: '防灭火',
                  value: 'fireS',
                },
                {
                  label: '防尘',
                  value: 'dustS',
                },
                {
                  label: '瓦斯',
                  value: 'gasS',
                },
              ],
            },
            colProps: { span: 4 },
          },

          {
            field: 'startTime',
            label: '开始时间',
            component: 'DatePicker',
            defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
            required: true,
            componentProps: {
              showTime: true,
              valueFormat: 'YYYY-MM-DD HH:mm:ss',
              getPopupContainer: getAutoScrollContainer,
            },
            colProps: {
              span: 4,
            },
          },
          {
            field: 'endTime',
            label: '结束时间',
            component: 'DatePicker',
            defaultValue: dayjs(),
            required: true,
            componentProps: {
              showTime: true,
              valueFormat: 'YYYY-MM-DD HH:mm:ss',
              getPopupContainer: getAutoScrollContainer,
            },
            colProps: {
              span: 4,
            },
          },
        ],
      },
      fetchSetting: {
        listField: 'records',
      },
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '30', '50', '100'],
      },
      beforeFetch(params) {
        // params.devicetype = params.devicetype ? params.devicetype + '*' : '';
        if (props.sysId) {
          params.sysId = props.sysId;
        }
      },
    },
    exportConfig: {
      name: '预警历史列表',
      url: '/safety/ventanalyAlarmLog/exportXls',
    },
  });
  //注册table数据
  const [registerTable, { reload, setLoading, getForm }] = tableContext;

  onMounted(async () => {});

  defineExpose({ setLoading });
</script>

<style scoped lang="less">
  @ventSpace: zxm;
  :deep(.zxm-table-container) {
    max-height: 720px !important;
  }
  :deep(.ventSpace-table-body) {
    height: auto !important;
  }
  :deep(.zxm-picker) {
    height: 30px !important;
  }
  :deep(.@{ventSpace}-picker-dropdown) {
    position: absolute !important;
    top: 35px !important;
    left: 0 !important;
  }
  .data-statistics {
    height: 200px;
    padding: 20px;
    margin-top: 20px;
    background-color: #0ebbff15;
  }
  // .tab-button-group {
  //   // line-height: 60px;
  //   margin-top: 16px;
  //   display: flex;
  //   pointer-events: auto;
  //   position: relative;
  //   &::after {
  //     position: absolute;
  //     content: '';
  //     width: calc(100% + 10px);
  //     height: 2px;
  //     top: 44px;
  //     left: -10px;
  //     border-bottom: 1px solid #0efcff;
  //   }
  //   .tab-button {
  //     padding: 10px 30px;
  //     position: relative;
  //     display: flex;
  //     justify-content: center;
  //     align-items: center;
  //     font-size: 16px;
  //     color: #fff;
  //     cursor: pointer;
  //     margin-right: 10px;
  //     background-color: rgba(0, 103, 103, 0.253);
  //     &::before {
  //       content: '';
  //       position: absolute;
  //       top: 0;
  //       right: 0;
  //       bottom: 0;
  //       left: 0;
  //       border: 1px solid #2bb2c4;
  //       // transform: skewX(-38deg);
  //       // background-color: rgba(0, 77, 103, 85%);
  //       z-index: 0;
  //     }
  //     &::after {
  //       background-color: rgba(0, 77, 103, 85%);
  //     }
  //   }
  //   .active {
  //     &::before {
  //       border-color: #46fcff;
  //       box-shadow: 1px 1px 10px 2px #0efcff99 inset;
  //     }
  //   }
  // }
  .alarm-history-table {
    width: 100%;
    background-color: #0ebbff15;
    position: relative;
    margin-top: 10px;
    &::after {
      position: absolute;
      content: '';
      width: calc(100% + 10px);
      height: 2px;
      top: 0px;
      left: -10px;
      border-bottom: 1px solid #0efcff99;
    }
  }
</style>