|
@@ -0,0 +1,376 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="history-table" v-if="loading">
|
|
|
|
+ <BasicTable ref="historyTable" @register="registerTable" :data-source="dataSource" :columns="historyColumns">
|
|
|
|
+ <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>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script lang="ts" setup>
|
|
|
|
+//ts语法
|
|
|
|
+import { watchEffect, ref, watch, defineExpose, inject, nextTick, onMounted, computed } from 'vue';
|
|
|
|
+import { subStationList } from '../safetyList.api';
|
|
|
|
+import { historyColumns } from '../historyLsit.data';
|
|
|
|
+import { FormSchema } from '/@/components/Form/index';
|
|
|
|
+import { BasicTable } from '/@/components/Table';
|
|
|
|
+import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
|
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
|
+import { useMethods } from '/@/hooks/system/useMethods';
|
|
|
|
+import { defHttp } from '/@/utils/http/axios';
|
|
|
|
+import dayjs from 'dayjs';
|
|
|
|
+import { getAutoScrollContainer } from '/@/utils/common/compUtils';
|
|
|
|
+
|
|
|
|
+const props = defineProps({
|
|
|
|
+ columnsType: {
|
|
|
|
+ type: String,
|
|
|
|
+ },
|
|
|
|
+ columns: {
|
|
|
|
+ type: Array,
|
|
|
|
+ // required: true,
|
|
|
|
+ default: () => [],
|
|
|
|
+ },
|
|
|
|
+ historyColumns: {
|
|
|
|
+ type: Array,
|
|
|
|
+ default: () => [],
|
|
|
|
+ },
|
|
|
|
+ id: {
|
|
|
|
+ type: String,
|
|
|
|
+ },
|
|
|
|
+ scroll: {
|
|
|
|
+ type: Object,
|
|
|
|
+ default: { y: 0 },
|
|
|
|
+ },
|
|
|
|
+ formSchemas: {
|
|
|
|
+ type: Array<FormSchema>,
|
|
|
|
+ default: () => [],
|
|
|
|
+ },
|
|
|
|
+});
|
|
|
|
+const postExportXlsUrl = '/safety/ventanalySubStation/export158StatusLog';
|
|
|
|
+//获取分站数据
|
|
|
|
+const getDeviceListApi = (params) => defHttp.get({ url: '/safety/ventanalySubStation/alllist', params });
|
|
|
|
+const historyTable = ref();
|
|
|
|
+const loading = ref(false);
|
|
|
|
+const dataSource = ref([]);
|
|
|
|
+
|
|
|
|
+const emit = defineEmits(['change']);
|
|
|
|
+
|
|
|
|
+const historyType = ref('');
|
|
|
|
+const linkStatus = ref('');
|
|
|
|
+const deviceKide = ref('');
|
|
|
|
+const columns = ref([]);
|
|
|
|
+const deviceOptions = ref([]);
|
|
|
|
+const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
|
|
|
|
+const deviceTypeStr = ref('');
|
|
|
|
+loading.value = true;
|
|
|
|
+
|
|
|
|
+watch(
|
|
|
|
+ () => {
|
|
|
|
+ return props.columnsType;
|
|
|
|
+ },
|
|
|
|
+ async (newVal) => {
|
|
|
|
+ debugger;
|
|
|
|
+ if (!newVal) return;
|
|
|
|
+ deviceKide.value = newVal;
|
|
|
|
+ if (historyTable.value) {
|
|
|
|
+ getForm().resetFields();
|
|
|
|
+ // getForm().updateSchema();
|
|
|
|
+ // getForm();
|
|
|
|
+ }
|
|
|
|
+ dataSource.value = [];
|
|
|
|
+ await getSubStationList();
|
|
|
|
+ nextTick(() => {
|
|
|
|
+ getDataSource();
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ if (historyTable.value) reload();
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ immediate: true,
|
|
|
|
+ }
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+watch(
|
|
|
|
+ () => props.scroll.y,
|
|
|
|
+ (newVal) => {
|
|
|
|
+ if (newVal) {
|
|
|
|
+ tableScroll.value = { y: newVal - 100 };
|
|
|
|
+ } else {
|
|
|
|
+ tableScroll.value = {};
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+watch(
|
|
|
|
+ () => props.id,
|
|
|
|
+ async () => {
|
|
|
|
+ await getForm().setFieldsValue({});
|
|
|
|
+ await getSubStationList();
|
|
|
|
+ }
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+//获取分站信息
|
|
|
|
+async function getSubStationList() {
|
|
|
|
+ let result;
|
|
|
|
+ let res = await subStationList({ strtype: 'modbus' });
|
|
|
|
+ result = res;
|
|
|
|
+ if (result) {
|
|
|
|
+ deviceOptions.value = [];
|
|
|
|
+ deviceOptions.value = result['records'].map((item) => {
|
|
|
|
+ return {
|
|
|
|
+ label: item['stationName'],
|
|
|
|
+ value: item['id'],
|
|
|
|
+ strinstallpos: item['stationName'],
|
|
|
|
+ status: item['status'],
|
|
|
|
+ };
|
|
|
|
+ // return { label: item['strname'], value: item['id']}
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ deviceOptions.value.unshift({ label: '--请选择分站--', value: '', stationName: '' });
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function resetFormParam() {
|
|
|
|
+ const formData = getForm().getFieldsValue();
|
|
|
|
+ const pagination = getPaginationRef();
|
|
|
|
+ formData['pageNo'] = pagination['current'];
|
|
|
|
+ formData['pageSize'] = pagination['pageSize'];
|
|
|
|
+ const params = {
|
|
|
|
+ pageNo: pagination['current'],
|
|
|
|
+ pageSize: pagination['pageSize'],
|
|
|
|
+ createTime_begin: formData['starttime_begin'],
|
|
|
|
+ createTime_end: formData['starttime_end'],
|
|
|
|
+ stationId: formData['stationId'],
|
|
|
|
+ status: formData['status'],
|
|
|
|
+ };
|
|
|
|
+ return params;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+async function getDataSource() {
|
|
|
|
+ dataSource.value = [];
|
|
|
|
+ setLoading(true);
|
|
|
|
+ const params = await resetFormParam();
|
|
|
|
+ const result = await defHttp.post({ url: '/safety/ventanalySubStation/get158StatusLog', params: params });
|
|
|
|
+ // if (result['datalist']['records'].length > 0) {
|
|
|
|
+ // dataSource.value = result['datalist']['records'].map((item: any) => {
|
|
|
|
+ // return Object.assign(item, item['readData']);
|
|
|
|
+ // });
|
|
|
|
+ // } else {
|
|
|
|
+ dataSource.value = result['records'];
|
|
|
|
+ // }
|
|
|
|
+ // return result;
|
|
|
|
+
|
|
|
|
+ setLoading(false);
|
|
|
|
+}
|
|
|
|
+//导出
|
|
|
|
+// function onExportXlsFn() {
|
|
|
|
+// // const params = resetFormParam();
|
|
|
|
+// // // 判断时间间隔和查询时间区间,数据量下载大时进行提示
|
|
|
|
+// // return onExportXlsPost(params);
|
|
|
|
+// }
|
|
|
|
+//导入导出方法
|
|
|
|
+function onExportXlsFn() {
|
|
|
|
+ const { handleExportXlsPost } = useMethods();
|
|
|
|
+ const params = resetFormParam();
|
|
|
|
+ handleExportXlsPost('历史数据', postExportXlsUrl, params);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 列表页面公共参数、方法
|
|
|
|
+const { tableContext, onExportXlsPost } = useListPage({
|
|
|
|
+ tableProps: {
|
|
|
|
+ // api: list,
|
|
|
|
+ columns: props.historyColumns ? props.historyColumns : (props.historyColumns as any[]),
|
|
|
|
+ canResize: true,
|
|
|
|
+ showTableSetting: false,
|
|
|
|
+ showActionColumn: false,
|
|
|
|
+ bordered: false,
|
|
|
|
+ size: 'small',
|
|
|
|
+ scroll: tableScroll,
|
|
|
|
+ showIndexColumn: true,
|
|
|
|
+ tableLayout: 'auto',
|
|
|
|
+ formConfig: {
|
|
|
|
+ labelAlign: 'left',
|
|
|
|
+ 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: 'starttime_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: 'starttime_end',
|
|
|
|
+ label: '结束时间',
|
|
|
|
+ component: 'DatePicker',
|
|
|
|
+ defaultValue: dayjs(),
|
|
|
|
+ required: true,
|
|
|
|
+ componentProps: {
|
|
|
|
+ showTime: true,
|
|
|
|
+ valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
|
+ getPopupContainer: getAutoScrollContainer,
|
|
|
|
+ },
|
|
|
|
+ colProps: {
|
|
|
|
+ span: 4,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '查询分站',
|
|
|
|
+ field: 'stationId',
|
|
|
|
+ component: 'Select',
|
|
|
|
+ defaultValue: props.id ? props.id : 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,
|
|
|
|
+ onChange: (e, option) => {
|
|
|
|
+ if (option) {
|
|
|
|
+ historyType.value = option.value; // 使用选项的value(即id)更新historyType
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ colProps: {
|
|
|
|
+ span: 4,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '连接状态',
|
|
|
|
+ field: 'status',
|
|
|
|
+ component: 'Select',
|
|
|
|
+ componentProps: {
|
|
|
|
+ options: [
|
|
|
|
+ { label: '连接成功', value: 1 },
|
|
|
|
+ { label: '连接失败', value: 0 },
|
|
|
|
+ ],
|
|
|
|
+ onChange: (e, option) => {
|
|
|
|
+ if (option) {
|
|
|
|
+ linkStatus.value = option.value; // 使用选项的value(即id)更新historyType
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ colProps: {
|
|
|
|
+ span: 4,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ // fetchSetting: {
|
|
|
|
+ pagination: {
|
|
|
|
+ current: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ pageSizeOptions: ['10', '30', '50', '100'],
|
|
|
|
+ showQuickJumper: false,
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ beforeFetch() {
|
|
|
|
+ const newParams = { ...resetFormParam() };
|
|
|
|
+ // debugger;
|
|
|
|
+ return newParams;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ exportConfig: {
|
|
|
|
+ name: '历史列表',
|
|
|
|
+ url: postExportXlsUrl,
|
|
|
|
+ },
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+//注册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 getSubStationList();
|
|
|
|
+ console.log(deviceOptions.value[0], '数据');
|
|
|
|
+ if (deviceOptions.value[0]) {
|
|
|
|
+ historyType.value = deviceOptions.value[0]['stationName'] || deviceOptions.value[0]['id'];
|
|
|
|
+ linkStatus.value = deviceOptions.value[0]['status'];
|
|
|
|
+ nextTick(async () => {
|
|
|
|
+ await getDataSource();
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+});
|
|
|
|
+defineExpose({ setLoading });
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped lang="less">
|
|
|
|
+@import '/@/design/vent/color.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;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|