gasInjection-project/src/views/vent/monitorManager/comment/AlarmHistoryTable.vue

<template>
  <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>

      <template #bodyCell="{ column, record }">
        <template v-if="column.dict">
          <!-- 除了 101（蓝色预警）其他都是红色字体 -->
          <span v-if="column.dataIndex === 'nwartype'" :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
            {{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
          </span>
          <span v-else>
            {{ render.renderDictText(record[column.dataIndex], column.dict) || '-' }}
          </span>
        </template>
      </template>
      <template #action="{ record }">
        <a @click="openHistoryCurve(record)">预警分析</a>
      </template>
    </BasicTable>
    <HistoryCurveModal @register="registerModal" />
  </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 { render } from '/@/utils/common/renderUtils';
  import HistoryCurveModal from './components/HistoryCurveModal.vue';
  import { useModal } from '/@/components/Modal';
  import { message } from 'ant-design-vue';

  const props = defineProps({
    columnsType: {
      type: String,
      required: true,
    },
    columns: {
      type: Array,
      // required: true,
      default: () => [],
    },
    deviceType: {
      type: String,
      required: true,
    },
    deviceListApi: {
      type: Function,
    },
    designScope: {
      type: String,
    },
    sysId: {
      type: String,
    },
    deviceId: {
      type: String,
      default: '',
    },
    scroll: {
      type: Object,
      default: { y: 0 },
    },
    list: {
      type: Function,
      default: (params) => defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params }),
    },
  });

  const getDeviceListApi = (params) => defHttp.post({ url: '/monitor/device', params });
  const globalConfig = inject('globalConfig');
  const alarmHistory = ref();
  const columns = ref([]);
  const deviceOptions = ref<any>([]);

  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});

  async function getDeviceList() {
    if (props.deviceType.split('_')[1] && props.deviceType.split('_')[1] === 'history') return;
    let result;
    if (!props.sysId) {
      if (props.deviceListApi) {
        const res = await props.deviceListApi();
        if (props.deviceType.startsWith('modelsensor')) {
          if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
            result = res['msgTxt'][0]['datalist'];
          }
        } else {
          if (res['records'] && res['records'].length > 0) result = res['records'];
        }
      } else {
        const res = await getDeviceListApi({ devicetype: props.deviceType, pageSize: 10000 });
        if (res['records'] && res['records'].length > 0) {
          result = res['records'];
        } else if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
          result = res['msgTxt'][0]['datalist'];
        }
      }
    } else {
      const res = await getDeviceListApi({
        sysId: props.sysId,
        devicetype: props.deviceType.startsWith('vehicle') ? 'location_normal' : props.deviceType,
        pageSize: 10000,
      });
      if (res['records'] && res['records'].length > 0) {
        result = res['records'];
      } else if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
        result = res['msgTxt'][0]['datalist'];
      }
    }
    if (result) {
      deviceOptions.value = [];
      deviceOptions.value = result.map((item) => {
        return {
          label: item['strinstallpos'],
          value: item['id'] || item['deviceID'],
          strtype: item['strtype'],
          strinstallpos: item['strinstallpos'],
          devicekind: item['devicekind'],
          stationtype: item['stationtype'],
        };
        // return { label: item['strname'], value: item['id']}
      });
    }
    deviceOptions.value.unshift({ label: '--请选择设备--', value: '', strtype: '', strinstallpos: '', devicekind: '', stationtype: '' });
    globalConfig.History_Type == 'vent' && deviceOptions.value[0]
      ? getForm().setFieldsValue({ deviceid: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '' })
      : getForm().setFieldsValue({ deviceid: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '' });
  }

  watch(
    () => {
      return props.columnsType;
    },
    async (newVal) => {
      if (!newVal) return;

      const column = getTableHeaderColumns(newVal + '_history');
      if (column && column.length < 1) {
        const arr = newVal.split('_');
        const columnKey = arr.reduce((prev, cur, index) => {
          if (index !== arr.length - 2) {
            return prev + '_' + cur;
          } else {
            return prev;
          }
        });
        columns.value = getTableHeaderColumns(arr[0] + '_history');
      } else {
        columns.value = column;
      }
      if (alarmHistory.value) reload();
    },
    {
      immediate: true,
    }
  );

  watch(
    () => props.deviceType,
    async () => {
      if (alarmHistory.value) getForm().resetFields();
      await getDeviceList();
    }
  );

  watch(
    () => props.scroll.y,
    (newVal) => {
      if (newVal) {
        tableScroll.value = { y: newVal - 100 };
      } else {
        tableScroll.value = {};
      }
    }
  );

  // 列表页面公共参数、方法
  const { tableContext, onExportXls } = useListPage({
    tableProps: {
      api: props.list,
      columns: props.columnsType ? columns : (props.columns as any[]),
      canResize: true,
      showTableSetting: false,
      showActionColumn: true,
      bordered: false,
      size: 'small',
      scroll: tableScroll,
      showIndexColumn: true,
      formConfig: {
        labelAlign: 'left',
        showAdvancedButton: false,
        // autoAdvancedCol: 2,
        schemas: [
          {
            field: 'createTime_begin',
            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: 'createTime_end',
            label: '结束时间',
            component: 'DatePicker',
            defaultValue: dayjs(),
            required: true,
            componentProps: {
              showTime: true,
              valueFormat: 'YYYY-MM-DD HH:mm:ss',
              getPopupContainer: getAutoScrollContainer,
            },
            colProps: {
              span: 4,
            },
          },
          {
            label: '查询设备',
            field: 'deviceid',
            component: 'Select',
            defaultValue: props.deviceId ? props.deviceId : deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
            componentProps: {
              showSearch: true,
              filterOption: (input: string, option: any) => {
                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
              },
              options: deviceOptions,
            },
            colProps: {
              span: 4,
            },
          },
          {
            label: '是否解决',
            field: 'isok',
            component: 'Select',
            componentProps: {
              options: [
                {
                  label: '未解决',
                  value: '0',
                },
                {
                  label: '已解决',
                  value: '1',
                },
              ],
            },
            colProps: { span: 4 },
          },
        ],
        // fieldMapToTime: [['createTime', ['createTime_begin', 'createTime_end'], '']],
      },
      fetchSetting: {
        listField: 'records',
      },
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '30', '50', '100'],
      },
      beforeFetch(params) {
        params.devicetype = props.deviceType + '*';
        if (props.sysId) {
          params.sysId = props.sysId;
        }
      },
    },
    exportConfig: {
      name: '预警历史列表',
      url: '/safety/ventanalyAlarmLog/exportXls',
    },
  });
  //注册table数据
  const [registerTable, { reload, setLoading, getForm }] = tableContext;

  const [registerModal, { openModal }] = useModal();

  function openHistoryCurve(record) {
    if (['net'].includes(record.valuecode)) return message.info('该报警字段不支持历史曲线展示');
    openModal(true, {
      data: record,
      device: deviceOptions.value[0],
    });
  }

  onMounted(async () => {
    await getDeviceList();
  });

  defineExpose({ setLoading });
</script>

<style scoped lang="less">
  @ventSpace: zxm;

  :deep(.ventSpace-table-body) {
    height: auto !important;
  }
  :deep(.zxm-picker) {
    height: 30px !important;
  }
  .alarm-history-table {
    width: 100%;
    :deep(.jeecg-basic-table-form-container) {
      .@{ventSpace}-form {
        padding: 0 !important;
        border: none !important;
        margin-bottom: 0 !important;
        .@{ventSpace}-picker,
        .@{ventSpace}-select-selector {
          width: 100% !important;
          background: #00000017;
          border: 1px solid #b7b7b7;
          input,
          .@{ventSpace}-select-selection-item,
          .@{ventSpace}-picker-suffix {
            color: #fff;
          }
          .@{ventSpace}-select-selection-placeholder {
            color: #ffffffaa;
          }
        }
      }
      .@{ventSpace}-table-title {
        min-height: 0 !important;
      }
    }
  }
</style>