mky-vent-base/src/views/vent/monitorManager/comment/AlarmNumTable.vue

<template>
  <div class="alarm-history-table">
    <BasicTable ref="alarmHistory" @register="registerTable" :data-source="dataSource">
      <template #bodyCell="{ column, record }">
        <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
          record.warnFlag == '0' ? '正常' : '报警'
        }}</a-tag>
        <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
          record.netStatus == '0' ? '断开' : '连接'
        }}</a-tag>
        <template v-if="column.dataIndex === 'nwartype'">
          <!-- 除了 101（蓝色预警）其他都是红色字体 -->
          <span :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
            {{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
          </span>
        </template>
        <slot name="filterCell" v-bind="{ column, record }"></slot>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" name="system-user" setup>
//ts语法
import { watch, ref, defineExpose, 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 { usePermission } from '/@/hooks/web/usePermission';

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 { hasPermission } = usePermission();
const getAlarmLogNumApi = (params) => defHttp.post({ url: '/safety/ventanalyAlarmLog/queryAlarmLogNumByType', params });
const alarmHistory = ref();
const columns = ref([]);
const dataSource = ref([]);

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

async function getDeviceList() {
  const formData = getForm().getFieldsValue();
  const params = {
    deviceType: 'windrect_ds',
    starttime: formData['createTime_begin'],
    endtime: formData['createTime_end'],
  };
  const res = await getAlarmLogNumApi(params);
  const flattenedData = res.result.map((item) => {
    return {
      deviceid: item.deviceid,
      devicename: item.devicename,
      ...item.alarmTypeCounts,
    };
  });

  dataSource.value = flattenedData;
}

watch(
  () => {
    return props.columnsType;
  },
  async (newVal) => {
    if (!newVal) return;
    const column = getTableHeaderColumns(props.deviceType + '_alarmNum');
    columns.value = column;
    // if (alarmHistory.value) reload();
  },
  {
    immediate: true,
  }
);

watch(
  () => props.deviceType,
  async () => {
    await getDeviceList();
  }
);

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

// 列表页面公共参数、方法
const { tableContext } = useListPage({
  tableProps: {
    // api: props.list,
    columns: props.columnsType ? columns : (props.columns as any[]),
    canResize: true,
    showTableSetting: false,
    showActionColumn: !hasPermission('ventanalyAlarmAnalysis:noShow'),
    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,
          },
        },
      ],
      // 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;
      }
    },
  },
});
//注册table数据
const [registerTable, { reload, setLoading, getForm }] = tableContext;
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>