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

<template>
  <div class="history-table" v-if="loading">
    <BasicTable ref="historyTable" @register="registerTable" :data-source="dataSource" :scroll="tableScroll">
      <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>

      <template #form-submitBefore>
        <a-button type="primary" preIcon="ant-design:search-outlined" @click="getDataSource">查询</a-button>
        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsFn"> 导出</a-button>
      </template>
    </BasicTable>
    <div class="history-chart">
      <BarAndLine
        v-if="showCurve"
        :charts-columns="chartsColumns"
        chartsType="history"
        :option="{
          legend: {
            top: '5',
          },
          grid: {
            top: 50,
            left: 100,
            right: 100,
            bottom: 50,
          },
        }"
        :data-source="dataSource"
        height="290px"
        :x-axis-prop-type="stationType !== 'redis' ? 'ttime' : 'time'"
      />
    </div>
  </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 BarAndLine from '/@/components/chart/BarAndLine.vue';
  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 intervalMap = new Map([
    ['1', '1s'],
    ['2', '5s'],
    ['3', '10s'],
    ['4', '30s'],
    ['5', '1m'],
    ['6', '10m'],
    ['7', '30m'],
    ['8', '1h'],
    ['9', '1d'],
  ]);

  const getExportXlsUrl = () => {
    if (stationType.value !== 'redis') {
      return '/safety/ventanalyMonitorData/export/historydata';
    } else {
      return '/monitor/history/exportHistoryData';
    }
  };
  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('');
  const chartsColumns = 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);
  });

  const showCurve = ref(false);

  // 是否显示历史曲线，在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);
  }

  function initHistoryCurveColumns() {
    if (!props.showHistoryCurve) return;
    const arr = historyType.value.split('_');
    // 没错，又是安全监控。安全监控的单位无法一次定好，所以根据返回的数据协定单位
    if (props.deviceType.startsWith('safetymonitor')) {
      chartsColumns.value = getTableHeaderColumns(arr[0] + '_chart').map((e) => {
        const unit = get(selectedOption.value, 'readData.unit', e.unit);
        return {
          ...e,
          unit: unit,
          seriesName: unit,
        };
      });
    } else {
      chartsColumns.value = getTableHeaderColumns(arr[0] + '_chart');
    }
  }

  const tableScroll = computed(() => {
    if (props.scroll.y && showCurve.value) return { y: props.scroll.y - 450 };
    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'];
      }

      /** 此处使用nextTick是由于可能表单暂未更新，而下面的方法依赖表单项 */
      nextTick(() => {
        showCurve.value = calcShowCurveValue();
        initHistoryCurveColumns();
      });
    }
    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';
    if (stationType.value !== 'redis' && deviceOptions.value[0]) {
      formData['strtype'] = deviceTypeStr.value
        ? deviceTypeStr.value
        : deviceOptions.value[0]['strtype']
        ? deviceOptions.value[0]['strtype']
        : props.deviceType + '*';
      if (props.sysId) {
        formData['sysId'] = props.sysId;
      }
      return formData;
    } else {
      const params = {
        pageNum: pagination['current'],
        pageSize: pagination['pageSize'],
        column: pagination['createTime'],
        startTime: formData['ttime_begin'],
        endTime: formData['ttime_end'],
        deviceId: formData['gdeviceids'],
        strtype: props.deviceType + '*',
        sysId: props.sysId,
        interval: intervalMap.get(formData['skip']) ? intervalMap.get(formData['skip']) : '1h',
        isEmployee: props.deviceType.startsWith('vehicle') ? false : true,
      };
      return params;
    }
  }

  async function getDataSource() {
    dataSource.value = [];
    setLoading(true);
    const params = await resetFormParam();
    if (stationType.value !== 'redis') {
      const result = await defHttp.get({ url: '/safety/ventanalyMonitorData/listdays', params: 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 = [];
      }
    } else {
      const result = await defHttp.post({ url: '/monitor/history/getHistoryData', params: params });
      setPagination({ total: Math.abs(result['total']) || 0 });
      dataSource.value = result['records'] || [];
    }
    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: 4,
                  },
                },
                {
                  field: 'ttime_end',
                  label: '结束时间',
                  component: 'DatePicker',
                  defaultValue: dayjs(),
                  required: true,
                  componentProps: {
                    showTime: true,
                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
                    getPopupContainer: getAutoScrollContainer,
                  },
                  colProps: {
                    span: 4,
                  },
                },
                {
                  label: computed(() => `${deviceKide.value.startsWith('location') ? '查询人员' : '查询设备'}`),
                  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(() => {
                        showCurve.value = calcShowCurveValue();
                        initHistoryCurveColumns();
                        getDataSource();
                      });
                    },
                  },
                  colProps: {
                    span: 5,
                  },
                },
                {
                  label: '间隔时间',
                  field: 'skip',
                  component: 'Select',
                  defaultValue: '8',
                  componentProps: {
                    options: [
                      {
                        label: '1秒',
                        value: '1',
                      },
                      {
                        label: '5秒',
                        value: '2',
                      },
                      {
                        label: '10秒',
                        value: '3',
                      },
                      {
                        label: '30秒',
                        value: '4',
                      },
                      {
                        label: '1分钟',
                        value: '5',
                      },
                      {
                        label: '10分钟',
                        value: '6',
                      },
                      {
                        label: '30分钟',
                        value: '7',
                      },
                      {
                        label: '1小时',
                        value: '8',
                      },
                      {
                        label: '1天',
                        value: '9',
                      },
                    ],
                  },
                  colProps: {
                    span: 3,
                  },
                },
              ],
        // fieldMapToTime: [['tickectDate', ['ttime_begin', 'ttime_end'], '']],
      },
      // fetchSetting: {
      //   listField: 'datalist',
      //   totalField: 'datalist.total',
      // },
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '30', '50', '100'],
        showQuickJumper: false,
      },
      beforeFetch() {
        const newParams = { ...resetFormParam() };
        return newParams;
      },
      // afterFetch(result) {
      //   const resultItems = result['records'];
      //   resultItems.map((item) => {
      //     Object.assign(item, item['readData']);
      //   });
      //   console.log('result---------------->', result);
      //   return resultItems;
      // },
    },
    exportConfig: {
      name: '设备历史列表',
      url: getExportXlsUrl,
    },
  });

  //注册table数据
  const [registerTable, { reload, setLoading, getForm, setColumns, getPaginationRef, setPagination }] = tableContext;

  function onExportXlsFn() {
    const params = resetFormParam();
    // 判断时间间隔和查询时间区间，数据量下载大时进行提示
    if (stationType.value !== 'redis') {
      return onExportXls(params);
    } else {
      return onExportXlsPost(params);
    }
  }

  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>