gas-injection/src/views/vent/dataCenter/deviceCenter/history/HistoryTable.vue

<template>
  <div class="history-table" v-if="loading">
    <BasicTable ref="historyTable" @register="registerTable" :data-source="dataSource" :scroll="tableScroll">
      <template #form-submitBefore>
        <a-button type="primary" preIcon="ant-design:search-outlined" @click="getDataSource">查询</a-button>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" setup>
//ts语法
import { watchEffect, ref, watch, defineExpose, inject, nextTick, onMounted, computed } from 'vue';
import { FormSchema } from '/@/components/Form/index';
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 { useMethods } from '/@/hooks/system/useMethods';
import { getDeviceList, getHistoryList } from './history.api';
import { getDictItemsByCode } from '/@/utils/dict';
import { get } from 'lodash-es';

const globalConfig = inject('globalConfig');
const props = defineProps({
  columnsType: {
    type: String,
  },
  columns: {
    type: Array,
    // required: true,
    default: () => [],
  },
  deviceType: {
    type: String,
    required: true,
  },
  deviceListApi: {
    type: Function,
  },
  deviceArr: {
    type: Array,
    // required: true,
    default: () => [],
  },
  designScope: {
    type: String,
  },
  sysId: {
    type: String,
  },
  deviceId: {
    type: String,
  },
  scroll: {
    type: Object,
    default: { y: 0 },
  },
  formSchemas: {
    type: Array<FormSchema>,
    default: () => [],
  },
  /** 仅展示已绑定设备，选择是则从系统中获取sysId下已绑定设备。仅能查询到已绑定设备的历史数据 */
  onlyBounedDevices: {
    type: Boolean,
    default: false,
  },
  showHistoryCurve: {
    type: Boolean,
    default: false,
  },
});
const getDeviceListApi = (params) => defHttp.post({ url: '/monitor/device', params });
const historyTable = ref();
const loading = ref(false);
const stationType = ref('plc1');
const dataSource = ref([]);
const emit = defineEmits(['change']);

const historyType = ref('');
const deviceKide = ref('');
const columns = ref([]);
let deviceOptions = ref([]);
const deviceTypeStr = ref('');
const deviceTypeName = ref('');
const deviceType = ref('');
loading.value = true;

const selectedOption = computed<Record<string, any> | undefined>(() => {
  let idval: string | undefined = getForm()?.getFieldsValue()?.gdeviceids;
  if (VENT_PARAM.historyIsMultiple && idval) {
    const arr = idval.split(',');
    idval = arr[arr.length - 1];
  }
  return deviceOptions.value.find((e: any) => {
    return e.value === idval;
  });
});

watch(
  () => {
    return props.columnsType;
  },
  async (newVal) => {
    if (!newVal) return;
    deviceKide.value = newVal;
    if (historyTable.value) {
      getForm().resetFields();
      // getForm().updateSchema();
      // getForm();
    }
    dataSource.value = [];
    // const column = getTableHeaderColumns(newVal.includes('_history') ? newVal : newVal + '_history');
    // if (column && column.length < 1) {
    //   const arr = newVal.split('_');
    //   console.log('历史记录列表表头------------>', arr[0] + '_monitor');
    //   columns.value = getTableHeaderColumns(arr[0] + '_history');
    //   if (columns.value.length < 1) {
    //     if (historyType.value) {
    //       columns.value = getTableHeaderColumns(historyType.value + '_history');
    //     }
    //   }
    // } else {
    //   columns.value = column;
    // }
    await getDeviceList();
    nextTick(() => {
      getDataSource();
    });

    if (historyTable.value) reload();
  },
  {
    immediate: true,
  }
);

watch(historyType, (type) => {
  if (!type) return;
  // if (historyTable.value) getForm().resetFields()

  const column = getTableHeaderColumns(type.includes('_history') ? type : type + '_history');
  if (column && column.length < 1) {
    const arr = type.split('_');
    columns.value = getTableHeaderColumns(arr[0] + '_history');
  } else {
    columns.value = column;
  }
  setColumns(columns.value);
});

// 是否显示历史曲线，在devices_shows_history_curve字典里可以配置哪些设备类型需要显示曲线
// 字典内的字段可以是前缀，例如fanlocal之于fanlocal_normal
// 安全监控设备需要更多的配置，除去配置safetymonitor，还需要配置哪些安全监控设备需要曲线
// 因此可以配置例如A1001的dataTypeName代码（可以查看真实数据参考）
function calcShowCurveValue() {
  const historyCurveDicts = getDictItemsByCode('devices_shows_history_curve') || [];
  const findDict = (str) => historyCurveDicts.some(({ value }) => str.startsWith(value));

  if (!props.showHistoryCurve) return false;
  const dt = props.deviceType; // 依赖项

  if (!findDict(dt)) return false;
  if (!dt.startsWith('safetymonitor')) return true;

  // 和字典的设备类型匹配后，如果是安全监控设备，需要额外的匹配安全监控类型
  const dtns = get(selectedOption.value, 'readData.dataTypeName', ''); // 依赖项
  return findDict(dtns);
}

const tableScroll = computed(() => {
  if (props.scroll.y) return { y: props.scroll.y - 100 };
  return {};
});

// watch(stationType, (type) => {
//   if (type) {
//     nextTick(() => {
//       getDataSource();
//     });
//   }
// });

watch(
  () => props.deviceId,
  async () => {
    await getForm().setFieldsValue({});
    await getDeviceList();
  }
);

/** 获取可供查询历史数据的设备列表 */
async function getDeviceList() {
  // if (props.deviceType.split('_')[1] && props.deviceType.split('_')[1] === 'history') return;
  let result;
  let response;
  if (props.onlyBounedDevices) {
    response = await getDeviceListApi({
      systemID: props.sysId,
      devicetype: 'sys',
    }).then(({ msgTxt }) => {
      return { msgTxt: msgTxt.filter((e) => e.type === props.deviceType) };
    });
  } else if (props.sysId) {
    response = await getDeviceListApi({
      sysId: props.sysId,
      devicetype: props.deviceType.startsWith('vehicle') ? 'location_normal' : props.deviceType,
      pageSize: 10000,
    });
  } else if (props.deviceListApi) {
    response = await props.deviceListApi();
  } else {
    response = await getDeviceListApi({ devicetype: props.deviceType, pageSize: 10000 });
  }

  // 处理不同格式的数据
  if (response['records'] && response['records'].length > 0) {
    result = response['records'];
  } else if (response['msgTxt'] && response['msgTxt'][0] && response['msgTxt'][0]['datalist']) {
    result = response['msgTxt'][0]['datalist'];
  }
  if (response['msgTxt'] && response['msgTxt'][0]) {
    deviceTypeName.value = response['msgTxt'][0]['typeName'];
    deviceType.value = response['msgTxt'][0]['type'];
  }

  if (result) {
    deviceOptions.value = [];
    deviceOptions.value = result.map((item, index) => {
      return {
        label: item['strinstallpos'],
        value: item['id'] || item['deviceID'],
        strtype: item['strtype'] || item['deviceType'],
        strinstallpos: item['strinstallpos'],
        devicekind: item['devicekind'],
        stationtype: item['stationtype'],
        readData: item['readData'],
      };
    });

    stationType.value = deviceOptions.value[0]['stationtype'];
    if (props.deviceType.startsWith('vehicle')) {
      historyType.value = 'vehicle';
    } else {
      historyType.value = deviceOptions.value[0]['strtype'] || deviceOptions.value[0]['devicekind'];
    }
  }
  if (VENT_PARAM.historyIsMultiple) {
    await getForm().setFieldsValue({
      gdeviceids: [props.deviceId ? props.deviceId : deviceOptions.value[0] ? deviceOptions.value[0]['value'] : ''],
    });
    await getForm().updateSchema({
      field: 'gdeviceids',
      componentProps: {
        mode: 'multiple',
        maxTagCount: 'responsive',
      },
    });
  } else {
    await getForm().setFieldsValue({
      gdeviceids: props.deviceId ? props.deviceId : deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
    });
    await getForm().updateSchema({
      field: 'gdeviceids',
    });
  }
}

function resetFormParam() {
  const formData = getForm().getFieldsValue();
  const pagination = getPaginationRef();
  formData['pageNo'] = pagination['current'];
  formData['pageSize'] = pagination['pageSize'];
  formData['column'] = 'createTime';
  const params = {
    pageNo: pagination['current'],
    pageSize: pagination['pageSize'],
    column: pagination['createTime'],
    ttime_begin: formData['ttime_begin'],
    ttime_end: formData['ttime_end'],
    deviceId: formData['gdeviceids'],
  };
  return params;
}

async function getDataSource() {
  dataSource.value = [];
  setLoading(true);
  const params = await resetFormParam();
  const result = await getHistoryList(params);
  setPagination({ total: Math.abs(result['datalist']['total']) || 0 });
  if (result['datalist']['records'].length > 0) {
    dataSource.value = result['datalist']['records'].map((item: any) => {
      return Object.assign(item, item['readData']);
    });
  } else {
    dataSource.value = [];
  }
  setLoading(false);
}

// 列表页面公共参数、方法
const { tableContext, onExportXls, onExportXlsPost } = useListPage({
  tableProps: {
    // api: list,
    columns: props.columnsType ? columns : (props.columns as any[]),
    canResize: true,
    showTableSetting: false,
    showActionColumn: false,
    bordered: false,
    size: 'small',
    showIndexColumn: true,
    tableLayout: 'auto',
    formConfig: {
      labelAlign: 'left',
      labelWidth: 80,
      showAdvancedButton: false,
      showSubmitButton: false,
      showResetButton: false,
      baseColProps: {
        xs: 24,
        sm: 24,
        md: 24,
        lg: 9,
        xl: 7,
        xxl: 4,
      },
      schemas:
        props.formSchemas.length > 0
          ? props.formSchemas
          : [
              {
                field: 'ttime_begin',
                label: '开始时间',
                component: 'DatePicker',
                defaultValue: dayjs().startOf('date'),
                required: true,
                componentProps: {
                  showTime: true,
                  valueFormat: 'YYYY-MM-DD HH:mm:ss',
                  getPopupContainer: getAutoScrollContainer,
                },
                colProps: {
                  span: 5,
                },
              },
              {
                field: 'ttime_end',
                label: '结束时间',
                component: 'DatePicker',
                defaultValue: dayjs(),
                required: true,
                componentProps: {
                  showTime: true,
                  valueFormat: 'YYYY-MM-DD HH:mm:ss',
                  getPopupContainer: getAutoScrollContainer,
                },
                colProps: {
                  span: 5,
                },
              },
              {
                label: '查询设备',
                field: 'gdeviceids',
                component: 'Select',
                required: true,
                componentProps: {
                  showSearch: true,
                  filterOption: (input: string, option: any) => {
                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
                  },
                  options: deviceOptions,
                  onChange: (e, option) => {
                    if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind'])) {
                      historyType.value = option['strtype'] || option['devicekind'];
                    }
                    if (option['strtype']) {
                      deviceTypeStr.value = option['strtype'];
                    }
                    stationType.value = option['stationtype'];
                    nextTick(() => {
                      getDataSource();
                    });
                  },
                },
                colProps: {
                  span: 6,
                },
              },
            ],
      // fieldMapToTime: [['tickectDate', ['ttime_begin', 'ttime_end'], '']],
    },
    // fetchSetting: {
    //   listField: 'datalist',
    //   totalField: 'datalist.total',
    // },
    pagination: {
      current: 1,
      pageSize: 20,
      showQuickJumper: false,
      showSizeChanger: false,
    },
    beforeFetch() {
      const newParams = { ...resetFormParam() };
      return newParams;
    },
  },
});
//注册table数据
const [registerTable, { reload, setLoading, getForm, setColumns, getPaginationRef, setPagination }] = tableContext;
watchEffect(() => {
  if (historyTable.value && dataSource) {
    const data = dataSource.value || [];
    emit('change', data);
  }
});

onMounted(async () => {
  await getDeviceList();
  if (deviceOptions.value[0]) {
    nextTick(async () => {
      await getDataSource();
    });
  }

  watch([() => getPaginationRef()['current'], () => getPaginationRef()['pageSize']], async () => {
    if (deviceOptions.value[0]) {
      if (deviceOptions.value[0]) {
        await getDataSource();
      }
    }
  });
});
defineExpose({ setLoading });
</script>

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

:deep(.@{ventSpace}-table-body) {
  height: auto !important;
}
:deep(.zxm-picker) {
  height: 30px !important;
}
.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;
        height: 100%;
        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;
    }
  }
  .pagination-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .page-num {
      border: 1px solid #0090d8;
      padding: 4px 8px;
      margin-right: 5px;
      color: #0090d8;
    }
    .btn {
      margin-right: 10px;
    }
  }
}

.history-chart {
  background-color: #0090d822;
  margin: 0 10px;
}
</style>