|
|
@@ -9,317 +9,316 @@
|
|
|
</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';
|
|
|
+ //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({
|
|
|
- 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,
|
|
|
- },
|
|
|
- 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([]);
|
|
|
-const dataTypeName = ref('');
|
|
|
+ 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,
|
|
|
+ },
|
|
|
+ scroll: {
|
|
|
+ type: Object,
|
|
|
+ default: { y: 0 },
|
|
|
+ },
|
|
|
+ list: {
|
|
|
+ type: Function,
|
|
|
+ default: (params) => defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params }),
|
|
|
+ },
|
|
|
+ });
|
|
|
|
|
|
-const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
|
|
|
+ const getDeviceListApi = (params) => defHttp.post({ url: '/monitor/device', params });
|
|
|
+ const globalConfig = inject('globalConfig');
|
|
|
+ const alarmHistory = ref();
|
|
|
+ const columns = ref([]);
|
|
|
+ const deviceOptions = ref([]);
|
|
|
+ const dataTypeName = ref('');
|
|
|
|
|
|
-async function getDeviceList() {
|
|
|
- let result;
|
|
|
- const res = await getDeviceListApi({ devicetype: props.deviceType, 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'] : '' });
|
|
|
-}
|
|
|
+ const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
|
|
|
|
|
|
-watch(
|
|
|
- () => {
|
|
|
- return props.columnsType;
|
|
|
- },
|
|
|
- async (newVal) => {
|
|
|
- if (!newVal) return;
|
|
|
- let column;
|
|
|
- column = getTableHeaderColumns('safetymonitor_warning');
|
|
|
- if (!column || column.length < 1) {
|
|
|
- column = getTableHeaderColumns(newVal + '_history');
|
|
|
+ async function getDeviceList() {
|
|
|
+ let result;
|
|
|
+ const res = await getDeviceListApi({ devicetype: props.deviceType, 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 (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;
|
|
|
- }
|
|
|
+ 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'],
|
|
|
+ };
|
|
|
});
|
|
|
- columns.value = getTableHeaderColumns(arr[0] + '_history');
|
|
|
} else {
|
|
|
- columns.value = column;
|
|
|
+ deviceOptions.value = [];
|
|
|
}
|
|
|
- if (alarmHistory.value) reload();
|
|
|
- },
|
|
|
- {
|
|
|
- immediate: true,
|
|
|
+ await getForm().setFieldsValue({ deviceId: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '' });
|
|
|
}
|
|
|
-);
|
|
|
|
|
|
-watch(
|
|
|
- () => props.deviceType,
|
|
|
- async () => {
|
|
|
- if (alarmHistory.value) getForm().resetFields();
|
|
|
- await getDeviceList();
|
|
|
- }
|
|
|
-);
|
|
|
+ watch(
|
|
|
+ () => {
|
|
|
+ return props.columnsType;
|
|
|
+ },
|
|
|
+ async (newVal) => {
|
|
|
+ if (!newVal) return;
|
|
|
+ let column;
|
|
|
+ column = getTableHeaderColumns('safetymonitor_warning');
|
|
|
+ if (!column || column.length < 1) {
|
|
|
+ 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 = {};
|
|
|
+ watch(
|
|
|
+ () => props.deviceType,
|
|
|
+ async () => {
|
|
|
+ if (alarmHistory.value) getForm().resetFields();
|
|
|
+ await getDeviceList();
|
|
|
}
|
|
|
- }
|
|
|
-);
|
|
|
+ );
|
|
|
|
|
|
-// 列表页面公共参数、方法
|
|
|
-const { tableContext, onExportXls } = useListPage({
|
|
|
- tableProps: {
|
|
|
- api: safetyList,
|
|
|
- columns: props.columnsType ? columns : (props.columns as any[]),
|
|
|
- canResize: false,
|
|
|
- showTableSetting: false,
|
|
|
- showActionColumn: false,
|
|
|
- bordered: false,
|
|
|
- showIndexColumn: true,
|
|
|
- size: 'small',
|
|
|
- scroll: tableScroll,
|
|
|
- formConfig: {
|
|
|
- labelAlign: 'left',
|
|
|
- showAdvancedButton: false,
|
|
|
- // autoAdvancedCol: 2,
|
|
|
- actionColOptions: {
|
|
|
+ watch(
|
|
|
+ () => props.scroll.y,
|
|
|
+ (newVal) => {
|
|
|
+ if (newVal) {
|
|
|
+ tableScroll.value = { y: newVal - 100 };
|
|
|
+ } else {
|
|
|
+ tableScroll.value = {};
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
|
|
|
- xs: 4, // <576px
|
|
|
- sm: 14, // ≥576px
|
|
|
- md: 4, // ≥768px
|
|
|
- lg: 4, // ≥992px
|
|
|
- xl: 4, // ≥1200px
|
|
|
- xxl: 4, // ≥1600px
|
|
|
+ // 列表页面公共参数、方法
|
|
|
+ const { tableContext, onExportXls } = useListPage({
|
|
|
+ tableProps: {
|
|
|
+ api: safetyList,
|
|
|
+ columns: props.columnsType ? columns : (props.columns as any[]),
|
|
|
+ canResize: false,
|
|
|
+ showTableSetting: false,
|
|
|
+ showActionColumn: false,
|
|
|
+ bordered: false,
|
|
|
+ showIndexColumn: true,
|
|
|
+ size: 'small',
|
|
|
+ scroll: tableScroll,
|
|
|
+ formConfig: {
|
|
|
+ labelAlign: 'left',
|
|
|
+ showAdvancedButton: false,
|
|
|
+ // autoAdvancedCol: 2,
|
|
|
+ actionColOptions: {
|
|
|
+ xs: 4, // <576px
|
|
|
+ sm: 14, // ≥576px
|
|
|
+ md: 4, // ≥768px
|
|
|
+ lg: 4, // ≥992px
|
|
|
+ xl: 4, // ≥1200px
|
|
|
+ xxl: 4, // ≥1600px
|
|
|
|
|
|
- style: { textAlign: 'left' },
|
|
|
- },
|
|
|
- schemas: [
|
|
|
- {
|
|
|
- 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,
|
|
|
- },
|
|
|
+ style: { textAlign: 'left' },
|
|
|
},
|
|
|
- {
|
|
|
- field: 'endTime',
|
|
|
- label: '结束时间',
|
|
|
- component: 'DatePicker',
|
|
|
- defaultValue: dayjs(),
|
|
|
- required: true,
|
|
|
- componentProps: {
|
|
|
- showTime: true,
|
|
|
- valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
- getPopupContainer: getAutoScrollContainer,
|
|
|
- },
|
|
|
- colProps: {
|
|
|
- span: 4,
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- label: '设备类型',
|
|
|
- field: 'dataTypeName',
|
|
|
- component: 'ApiSelect',
|
|
|
- componentProps: {
|
|
|
- api: safetyDeviceList.bind(null, { devicetype: 'safetymonitor', code: 'dataTypeName' }),
|
|
|
- labelField: 'name',
|
|
|
- valueField: 'code',
|
|
|
- onChange: async (e, option) => {
|
|
|
- console.log('1111', e, option);
|
|
|
- dataTypeName.value = e;
|
|
|
- await getDeviceList();
|
|
|
+ schemas: [
|
|
|
+ {
|
|
|
+ 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,
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- 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;
|
|
|
+ colProps: {
|
|
|
+ span: 4,
|
|
|
},
|
|
|
- options: deviceOptions,
|
|
|
},
|
|
|
- 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,
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- {
|
|
|
- label: '是否解决',
|
|
|
- field: 'isok',
|
|
|
- component: 'Select',
|
|
|
- componentProps: {
|
|
|
- options: [
|
|
|
- {
|
|
|
- label: '未解决',
|
|
|
- value: '0',
|
|
|
+ {
|
|
|
+ label: '设备类型',
|
|
|
+ field: 'dataTypeName',
|
|
|
+ component: 'ApiSelect',
|
|
|
+ componentProps: {
|
|
|
+ api: safetyDeviceList.bind(null, { devicetype: 'safetymonitor', code: 'dataTypeName' }),
|
|
|
+ labelField: 'name',
|
|
|
+ valueField: 'code',
|
|
|
+ onChange: async (e, option) => {
|
|
|
+ console.log('1111', e, option);
|
|
|
+ dataTypeName.value = e;
|
|
|
+ await getDeviceList();
|
|
|
},
|
|
|
- {
|
|
|
- label: '已解决',
|
|
|
- value: '1',
|
|
|
+ },
|
|
|
+ colProps: {
|
|
|
+ span: 4,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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,
|
|
|
+ },
|
|
|
},
|
|
|
- colProps: { span: 4 },
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- fetchSetting: {
|
|
|
- listField: 'records',
|
|
|
+ {
|
|
|
+ label: '是否解决',
|
|
|
+ field: 'isok',
|
|
|
+ component: 'Select',
|
|
|
+ componentProps: {
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ label: '未解决',
|
|
|
+ value: '0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '已解决',
|
|
|
+ value: '1',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ colProps: { span: 4 },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ // }
|
|
|
+ // },
|
|
|
},
|
|
|
- pagination: {
|
|
|
- current: 1,
|
|
|
- pageSize: 10,
|
|
|
- pageSizeOptions: ['10', '30', '50', '100'],
|
|
|
+ exportConfig: {
|
|
|
+ name: '预警历史列表',
|
|
|
+ url: '/safety/ventanalyAlarmLog/exportXls',
|
|
|
},
|
|
|
- // 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;
|
|
|
+ });
|
|
|
+ //注册table数据
|
|
|
+ const [registerTable, { reload, setLoading, getForm }] = tableContext;
|
|
|
|
|
|
-onMounted(async () => {
|
|
|
- await getDeviceList();
|
|
|
-});
|
|
|
+ onMounted(async () => {
|
|
|
+ await getDeviceList();
|
|
|
+ });
|
|
|
|
|
|
-defineExpose({ setLoading });
|
|
|
+ defineExpose({ setLoading });
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
-@ventSpace: zxm;
|
|
|
+ @ventSpace: zxm;
|
|
|
|
|
|
-:deep(.ventSpace-table-body) {
|
|
|
- height: auto !important;
|
|
|
-}
|
|
|
+ :deep(.ventSpace-table-body) {
|
|
|
+ height: auto !important;
|
|
|
+ }
|
|
|
|
|
|
-:deep(.zxm-picker) {
|
|
|
- height: 30px !important;
|
|
|
-}
|
|
|
+ :deep(.zxm-picker) {
|
|
|
+ height: 30px !important;
|
|
|
+ }
|
|
|
|
|
|
-.alarm-history-table {
|
|
|
- width: 100%;
|
|
|
+ .alarm-history-table {
|
|
|
+ width: 100%;
|
|
|
|
|
|
- :deep(.jeecg-basic-table-form-container) {
|
|
|
- .@{ventSpace}-form {
|
|
|
- padding: 0 !important;
|
|
|
- border: none !important;
|
|
|
- margin-bottom: 0 !important;
|
|
|
+ :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;
|
|
|
+ .@{ventSpace}-picker,
|
|
|
+ .@{ventSpace}-select-selector {
|
|
|
+ width: 100% !important;
|
|
|
+ background: #00000017;
|
|
|
+ border: 1px solid #b7b7b7;
|
|
|
|
|
|
- input,
|
|
|
- .@{ventSpace}-select-selection-item,
|
|
|
- .@{ventSpace}-picker-suffix {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ input,
|
|
|
+ .@{ventSpace}-select-selection-item,
|
|
|
+ .@{ventSpace}-picker-suffix {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .@{ventSpace}-select-selection-placeholder {
|
|
|
- color: #ffffffaa;
|
|
|
+ .@{ventSpace}-select-selection-placeholder {
|
|
|
+ color: #ffffffaa;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .@{ventSpace}-table-title {
|
|
|
- min-height: 0 !important;
|
|
|
+ .@{ventSpace}-table-title {
|
|
|
+ min-height: 0 !important;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
hongrunxia