|
|
@@ -41,144 +41,144 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref } from 'vue';
|
|
|
-import { BasicTable } from '/@/components/Table';
|
|
|
-import { Tabs, TabPane, message } from 'ant-design-vue';
|
|
|
-// 引入模拟数据
|
|
|
-import { columns, historicalColumns, historicalFormSchema, searchFormSchema } from './monitor.data';
|
|
|
-import RealtimeDetailsModal from './components/RealtimeDetailsModal.vue';
|
|
|
-// import HistoricalDetailsModal from './components/HistoricalDetailsModal.vue';
|
|
|
-import { SvgIcon } from '/@/components/Icon';
|
|
|
-import { getGoafData, getGoafHistory, exportMineData } from './monitor.api';
|
|
|
-import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
-import { useModal } from '/@/components/Modal';
|
|
|
-import { useIntervalFn } from '@vueuse/core';
|
|
|
-import { useInitForm } from './hooks/form';
|
|
|
-// import { getGoafList } from '../../system/algorithm/algorithm.api';
|
|
|
+ import { ref } from 'vue';
|
|
|
+ import { BasicTable } from '/@/components/Table';
|
|
|
+ import { Tabs, TabPane, message } from 'ant-design-vue';
|
|
|
+ // 引入模拟数据
|
|
|
+ import { columns, historicalColumns, historicalFormSchema, searchFormSchema } from './monitor.data';
|
|
|
+ import RealtimeDetailsModal from './components/RealtimeDetailsModal.vue';
|
|
|
+ // import HistoricalDetailsModal from './components/HistoricalDetailsModal.vue';
|
|
|
+ import { SvgIcon } from '/@/components/Icon';
|
|
|
+ import { getGoafData, getGoafHistory } from './monitor.api';
|
|
|
+ import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
+ import { useModal } from '/@/components/Modal';
|
|
|
+ import { useIntervalFn } from '@vueuse/core';
|
|
|
+ import { useInitForm } from './hooks/form';
|
|
|
+ // import { getGoafList } from '../../system/algorithm/algorithm.api';
|
|
|
|
|
|
-// 激活的Tab页签
|
|
|
+ // 激活的Tab页签
|
|
|
|
|
|
-// 处理矿名选择器相关的逻辑
|
|
|
-const { departId, goafOptions, goafId, rawcode, hiscode, initGoafOptions } = useInitForm();
|
|
|
-const activeTab = ref('realtime');
|
|
|
-const tableQueryParams = ref({}); // 存储表格查询参数的响应式变量
|
|
|
-const wrappedGetMineData = async (params) => {
|
|
|
- // 缓存参数（这就是getMineData实际请求的参数）
|
|
|
- tableQueryParams.value = { ...params };
|
|
|
- // 调用原接口
|
|
|
- return await getGoafData(params);
|
|
|
-};
|
|
|
-// 注册实时数据表格
|
|
|
-const { tableContext: ctxRealtime, onExportXls: onExportXlsTime } = useListPage({
|
|
|
- tableProps: {
|
|
|
- api: wrappedGetMineData,
|
|
|
- columns,
|
|
|
- formConfig: {
|
|
|
- model: { mineCodeList: rawcode },
|
|
|
- schemas: [
|
|
|
- {
|
|
|
- field: 'mineCodeList',
|
|
|
- label: '煤矿名称',
|
|
|
- component: 'MineCascader',
|
|
|
- colProps: { span: 6 },
|
|
|
- required: true,
|
|
|
- componentProps: {
|
|
|
- initFromStore: false,
|
|
|
- syncToStore: false,
|
|
|
- rootId: departId,
|
|
|
+ // 处理矿名选择器相关的逻辑
|
|
|
+ const { departId, goafOptions, goafId, rawcode, hiscode, initGoafOptions } = useInitForm();
|
|
|
+ const activeTab = ref('realtime');
|
|
|
+ const tableQueryParams = ref({}); // 存储表格查询参数的响应式变量
|
|
|
+ const wrappedGetMineData = async (params) => {
|
|
|
+ // 缓存参数（这就是getMineData实际请求的参数）
|
|
|
+ tableQueryParams.value = { ...params };
|
|
|
+ // 调用原接口
|
|
|
+ return await getGoafData(params);
|
|
|
+ };
|
|
|
+ // 注册实时数据表格
|
|
|
+ const { tableContext: ctxRealtime, onExportXls: onExportXlsTime } = useListPage({
|
|
|
+ tableProps: {
|
|
|
+ api: wrappedGetMineData,
|
|
|
+ columns,
|
|
|
+ formConfig: {
|
|
|
+ model: { mineCodeList: rawcode },
|
|
|
+ schemas: [
|
|
|
+ {
|
|
|
+ field: 'mineCodeList',
|
|
|
+ label: '煤矿名称',
|
|
|
+ component: 'MineCascader',
|
|
|
+ colProps: { span: 6 },
|
|
|
+ required: true,
|
|
|
+ componentProps: {
|
|
|
+ initFromStore: false,
|
|
|
+ syncToStore: false,
|
|
|
+ rootId: departId,
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- ...searchFormSchema,
|
|
|
- ],
|
|
|
- schemaGroupNames: ['常规查询'],
|
|
|
+ ...searchFormSchema,
|
|
|
+ ],
|
|
|
+ schemaGroupNames: ['常规查询'],
|
|
|
+ },
|
|
|
+ showIndexColumn: false,
|
|
|
+ scroll: { x: 'max-content' },
|
|
|
},
|
|
|
- showIndexColumn: false,
|
|
|
- scroll: { x: 'max-content' },
|
|
|
- },
|
|
|
- pagination: false,
|
|
|
- exportConfig: {
|
|
|
- url: '/ventanaly-province/province/device/exportGoafReal',
|
|
|
- name: '密闭监测数据',
|
|
|
- params: {
|
|
|
- goafId,
|
|
|
+ pagination: false,
|
|
|
+ exportConfig: {
|
|
|
+ url: '/ventanaly-province/province/device/exportGoafReal',
|
|
|
+ name: '密闭监测数据',
|
|
|
+ params: {
|
|
|
+ goafId,
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
-});
|
|
|
-const [registerRealtimeTable, realtimeTable] = ctxRealtime;
|
|
|
+ });
|
|
|
+ const [registerRealtimeTable, realtimeTable] = ctxRealtime;
|
|
|
|
|
|
-const { pause, resume } = useIntervalFn(() => realtimeTable.reload({ silence: true }), 10000);
|
|
|
+ const { pause, resume } = useIntervalFn(() => realtimeTable.reload({ silence: true }), 10000);
|
|
|
|
|
|
-// 注册历史数据表格
|
|
|
-const { tableContext: ctxHistory, onExportXls } = useListPage({
|
|
|
- tableProps: {
|
|
|
- api: (params) => {
|
|
|
- if (!goafId.value) {
|
|
|
- message.info('请先选择煤矿及老空区');
|
|
|
- return Promise.reject();
|
|
|
- }
|
|
|
- params.goafId = goafId.value;
|
|
|
- return getGoafHistory(params);
|
|
|
- },
|
|
|
- columns: historicalColumns,
|
|
|
- formConfig: {
|
|
|
- model: {
|
|
|
- mineCodeList: hiscode,
|
|
|
+ // 注册历史数据表格
|
|
|
+ const { tableContext: ctxHistory, onExportXls } = useListPage({
|
|
|
+ tableProps: {
|
|
|
+ api: (params) => {
|
|
|
+ if (!goafId.value) {
|
|
|
+ message.info('请先选择煤矿及老空区');
|
|
|
+ return Promise.reject();
|
|
|
+ }
|
|
|
+ params.goafId = goafId.value;
|
|
|
+ return getGoafHistory(params);
|
|
|
},
|
|
|
- schemas: [
|
|
|
- {
|
|
|
- field: 'mineCodeList',
|
|
|
- label: '煤矿名称',
|
|
|
- component: 'MineCascader',
|
|
|
- colProps: { span: 6 },
|
|
|
- required: true,
|
|
|
- componentProps: {
|
|
|
- initFromStore: false,
|
|
|
- syncToStore: false,
|
|
|
- rootId: departId,
|
|
|
- onChange(v) {
|
|
|
- historyTable.setLoading(true);
|
|
|
- initGoafOptions(v).finally(() => {
|
|
|
- historyTable.setLoading(false);
|
|
|
- });
|
|
|
+ columns: historicalColumns,
|
|
|
+ formConfig: {
|
|
|
+ model: {
|
|
|
+ mineCodeList: hiscode,
|
|
|
+ },
|
|
|
+ schemas: [
|
|
|
+ {
|
|
|
+ field: 'mineCodeList',
|
|
|
+ label: '煤矿名称',
|
|
|
+ component: 'MineCascader',
|
|
|
+ colProps: { span: 6 },
|
|
|
+ required: true,
|
|
|
+ componentProps: {
|
|
|
+ initFromStore: false,
|
|
|
+ syncToStore: false,
|
|
|
+ rootId: departId,
|
|
|
+ onChange(v) {
|
|
|
+ historyTable.setLoading(true);
|
|
|
+ initGoafOptions(v).finally(() => {
|
|
|
+ historyTable.setLoading(false);
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
- },
|
|
|
- ...historicalFormSchema,
|
|
|
- ], // 使用历史数据的搜索配置
|
|
|
- schemaGroupNames: ['常规查询'],
|
|
|
+ ...historicalFormSchema,
|
|
|
+ ], // 使用历史数据的搜索配置
|
|
|
+ schemaGroupNames: ['常规查询'],
|
|
|
+ },
|
|
|
+ useSearchForm: true,
|
|
|
+ bordered: true,
|
|
|
+ showIndexColumn: false,
|
|
|
+ scroll: { x: 'max-content' },
|
|
|
+ showActionColumn: false,
|
|
|
},
|
|
|
- useSearchForm: true,
|
|
|
- bordered: true,
|
|
|
- showIndexColumn: false,
|
|
|
- scroll: { x: 'max-content' },
|
|
|
- showActionColumn: false,
|
|
|
- },
|
|
|
- exportConfig: {
|
|
|
- url: '/province/device/exportGoafHistory',
|
|
|
- name: '历史数据',
|
|
|
- params: {
|
|
|
- goafId,
|
|
|
+ exportConfig: {
|
|
|
+ url: '/province/device/exportGoafHistory',
|
|
|
+ name: '历史数据',
|
|
|
+ params: {
|
|
|
+ goafId,
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- pagination: true,
|
|
|
-});
|
|
|
-const [registerHistoryTable, historyTable] = ctxHistory;
|
|
|
+ pagination: true,
|
|
|
+ });
|
|
|
+ const [registerHistoryTable, historyTable] = ctxHistory;
|
|
|
|
|
|
-// 弹窗引用
|
|
|
-const [registerRealtimeModal, { openModal: openRealtimeModal }] = useModal();
|
|
|
-// const [registerHistoryModal, { openModal: openHistoryModal }] = useModal();
|
|
|
+ // 弹窗引用
|
|
|
+ const [registerRealtimeModal, { openModal: openRealtimeModal }] = useModal();
|
|
|
+ // const [registerHistoryModal, { openModal: openHistoryModal }] = useModal();
|
|
|
|
|
|
-// 打开弹窗方法（区分实时/历史）
|
|
|
-const openModal = (record) => {
|
|
|
- openRealtimeModal(true, record);
|
|
|
- // if (type === 'realtime') {
|
|
|
- // // 可向实时弹窗传递当前记录数据
|
|
|
- // } else {
|
|
|
- // // 可向历史弹窗传递当前记录数据
|
|
|
- // openHistoryModal(true, record);
|
|
|
- // }
|
|
|
- pause();
|
|
|
-};
|
|
|
+ // 打开弹窗方法（区分实时/历史）
|
|
|
+ const openModal = (record) => {
|
|
|
+ openRealtimeModal(true, record);
|
|
|
+ // if (type === 'realtime') {
|
|
|
+ // // 可向实时弹窗传递当前记录数据
|
|
|
+ // } else {
|
|
|
+ // // 可向历史弹窗传递当前记录数据
|
|
|
+ // openHistoryModal(true, record);
|
|
|
+ // }
|
|
|
+ pause();
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped></style>
|
