123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259 |
- <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>
- </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 { safetyDeviceList, safetyList } from './safety.api';
- const props = defineProps({
- columns: {
- type: Array,
- // required: true,
- default: () => [],
- },
- deviceListApi: {
- type: Function,
- },
- designScope: {
- type: String,
- },
- sysId: {
- type: String,
- },
- 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 = getTableHeaderColumns('warnig_history');
- const deviceOptions = ref([]);
- const dataTypeName = ref('');
- const deviceType = ref('');
- const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
- async function getDeviceList() {
- let result;
- const res = await getDeviceListApi({ devicetype: deviceType.value, filterParams: { dataTypeName: dataTypeName.value }, 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 && result.length > 0) {
- 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'],
- };
- });
- } else {
- deviceOptions.value = [];
- }
- await getForm().setFieldsValue({ deviceId: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '' });
- }
- // watch(
- // () => {
- // return deviceType.value;
- // },
- // 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.scroll.y,
- (newVal) => {
- if (newVal) {
- tableScroll.value = { y: newVal - 100 };
- } else {
- tableScroll.value = {};
- }
- }
- );
- // 列表页面公共参数、方法
- const { tableContext, onExportXls } = useListPage({
- tableProps: {
- api: safetyList,
- columns: props.columnsType ? columns : (props.columns as any[]),
- canResize: true,
- showTableSetting: false,
- showActionColumn: false,
- bordered: false,
- size: 'small',
- scroll: tableScroll,
- formConfig: {
- labelAlign: 'left',
- showAdvancedButton: false,
- // autoAdvancedCol: 2,
- schemas: [
- {
- label: '设备类型',
- field: 'devicetype',
- component: 'MTreeSelect',
- componentProps: {
- virtual: false,
- onChange: async (e: any) => {
- if (alarmHistory.value) getForm().resetFields();
- deviceType.value = e;
- await getDeviceList();
- },
- },
- colProps: { span: 6 },
- },
- {
- label: '查询设备',
- field: 'deviceId',
- component: 'Select',
- defaultValue: 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,
- },
- },
- {
- 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'],
- },
- },
- 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(.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>
|