|
|
@@ -9,7 +9,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 实时数据表格 -->
|
|
|
- <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
|
|
|
+ <BasicTable @register="registerRealtimeTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
|
|
|
<template #action="{ record }">
|
|
|
<!-- 操作按钮 -->
|
|
|
<!-- <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
|
|
|
@@ -20,6 +20,9 @@
|
|
|
<SvgIcon name="details" />
|
|
|
</button>
|
|
|
</template>
|
|
|
+ <template #resetBefore>
|
|
|
+ <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXlsTime"> 导出 </a-button>
|
|
|
+ </template>
|
|
|
</BasicTable>
|
|
|
</TabPane>
|
|
|
|
|
|
@@ -49,33 +52,39 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref, onMounted } from 'vue';
|
|
|
- import { BasicTable, useTable } from '/@/components/Table';
|
|
|
- import { Tabs, TabPane, message } from 'ant-design-vue';
|
|
|
- import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
|
|
|
- import { SvgIcon } from '/@/components/Icon';
|
|
|
- // 引入模拟数据
|
|
|
- import { columns } from './airLeakStatus.data';
|
|
|
- import { getProvinceAlarm, getProvinceAlarmHistory, getProvinceAlarmNum } from './airLeak.api';
|
|
|
- import { useInitForm } from '../../common/analysis';
|
|
|
- import { BasicModal } from '/@/components/Modal/index';
|
|
|
- import { historicalFormSchema } from '/@/views/monitor/sealedMonitor/monitor.data';
|
|
|
- import { useIntervalFn } from '@vueuse/core';
|
|
|
- import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
+import { BasicTable, useTable } from '/@/components/Table';
|
|
|
+import { Tabs, TabPane, message } from 'ant-design-vue';
|
|
|
+import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
|
|
|
+import { SvgIcon } from '/@/components/Icon';
|
|
|
+// 引入模拟数据
|
|
|
+import { columns } from './airLeakStatus.data';
|
|
|
+import { getProvinceAlarm, getProvinceAlarmHistory, getProvinceAlarmNum, exportMineData } from './airLeak.api';
|
|
|
+import { useInitForm } from '../../common/analysis';
|
|
|
+import { BasicModal } from '/@/components/Modal/index';
|
|
|
+import { historicalFormSchema } from '/@/views/monitor/sealedMonitor/monitor.data';
|
|
|
+import { useIntervalFn } from '@vueuse/core';
|
|
|
+import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
|
|
|
- // 激活的Tab页签
|
|
|
- const activeTab = ref('realtime');
|
|
|
+// 激活的Tab页签
|
|
|
+const activeTab = ref('realtime');
|
|
|
|
|
|
- const boardData = ref([
|
|
|
- { label: '存在风险情况数量', value: '-' },
|
|
|
- { label: '闭内气体涌出', value: '-' },
|
|
|
- { label: '闭外气体涌出', value: '-' },
|
|
|
- ]);
|
|
|
-
|
|
|
- // 注册实时数据表格
|
|
|
- const [registerTable, tableCtx] = useTable({
|
|
|
- title: '密闭漏风状态判定',
|
|
|
- api: getProvinceAlarm,
|
|
|
+const boardData = ref([
|
|
|
+ { label: '存在风险情况数量', value: '-' },
|
|
|
+ { label: '闭内气体涌出', value: '-' },
|
|
|
+ { label: '闭外气体涌出', value: '-' },
|
|
|
+]);
|
|
|
+const tableQueryParams = ref({}); // 存储表格查询参数的响应式变量
|
|
|
+const wrappedGetMineData = async (params) => {
|
|
|
+ // 缓存参数(这就是getMineData实际请求的参数)
|
|
|
+ tableQueryParams.value = { ...params };
|
|
|
+ // 调用原接口
|
|
|
+ return await getProvinceAlarm(params);
|
|
|
+};
|
|
|
+// 注册实时数据表格
|
|
|
+const { tableContext: ctxRealtime, onExportXls: onExportXlsTime } = useListPage({
|
|
|
+ tableProps: {
|
|
|
+ api: wrappedGetMineData,
|
|
|
columns,
|
|
|
formConfig: {
|
|
|
labelWidth: 120,
|
|
|
@@ -101,133 +110,138 @@
|
|
|
dataIndex: 'action',
|
|
|
slots: { customRender: 'action' },
|
|
|
},
|
|
|
- });
|
|
|
-
|
|
|
- const { goafOptions, goafId, hiscode, resolveValue, registerModal, openModal, initGoafOptions, handleResolve } = useInitForm(tableCtx);
|
|
|
-
|
|
|
- // 注册历史数据表格
|
|
|
- const { tableContext, onExportXls } = useListPage({
|
|
|
- tableProps: {
|
|
|
- columns,
|
|
|
- // columns: historyColumns,
|
|
|
- api: (params) => {
|
|
|
- if (!goafId.value) {
|
|
|
- message.info('请先选择煤矿及老空区');
|
|
|
- return Promise.reject();
|
|
|
- }
|
|
|
- params.goafId = goafId.value;
|
|
|
- return getProvinceAlarmHistory(params);
|
|
|
- },
|
|
|
- formConfig: {
|
|
|
- model: { mineCode: hiscode },
|
|
|
- labelWidth: 120,
|
|
|
- schemas: [
|
|
|
- // {
|
|
|
- // label: '开始时间',
|
|
|
- // field: 'startTime',
|
|
|
- // component: 'DatePicker',
|
|
|
- // defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- // componentProps: {
|
|
|
- // showTime: true,
|
|
|
- // placeholder: '请选择开始时间',
|
|
|
- // valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
- // },
|
|
|
- // colProps: { span: 6 },
|
|
|
- // rules: [{ required: true, message: '请选择开始时间' }],
|
|
|
- // },
|
|
|
- // {
|
|
|
- // label: '结束时间',
|
|
|
- // field: 'endTime',
|
|
|
- // component: 'DatePicker',
|
|
|
- // defaultValue: dayjs(),
|
|
|
- // componentProps: {
|
|
|
- // showTime: true,
|
|
|
- // placeholder: '请选择结束时间',
|
|
|
- // valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
- // },
|
|
|
- // colProps: { span: 6 },
|
|
|
- // rules: [{ required: true, message: '请选择结束时间' }],
|
|
|
- // },
|
|
|
- {
|
|
|
- label: '煤矿名称',
|
|
|
- field: 'mineCode', // 对应组件的value.mineCode(最终传给Table的查询参数)
|
|
|
- component: 'MineCascader', // 自定义组件名
|
|
|
- componentProps: {
|
|
|
- initFromStore: false,
|
|
|
- syncToStore: false,
|
|
|
- changeOnSelect: false,
|
|
|
- onChange: (e) => {
|
|
|
- historyTable.setLoading(true);
|
|
|
- initGoafOptions(e).finally(() => {
|
|
|
- historyTable.setLoading(false);
|
|
|
- });
|
|
|
- },
|
|
|
+ },
|
|
|
+ exportConfig: {
|
|
|
+ url: '/ventanaly-province/province/alarm/exportProvinceAlarmReal',
|
|
|
+ name: '密闭漏风状态判定',
|
|
|
+ params: {
|
|
|
+ alarmType: 'leakageAlarm',
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
+const [registerRealtimeTable] = ctxRealtime;
|
|
|
+const { goafOptions, goafId, hiscode, resolveValue, registerModal, openModal, initGoafOptions, handleResolve } = useInitForm();
|
|
|
+// 注册历史数据表格
|
|
|
+const { tableContext, onExportXls } = useListPage({
|
|
|
+ tableProps: {
|
|
|
+ columns,
|
|
|
+ // columns: historyColumns,
|
|
|
+ api: (params) => {
|
|
|
+ if (!goafId.value) {
|
|
|
+ message.info('请先选择煤矿及老空区');
|
|
|
+ return Promise.reject();
|
|
|
+ }
|
|
|
+ params.goafId = goafId.value;
|
|
|
+ return getProvinceAlarmHistory(params);
|
|
|
+ },
|
|
|
+ formConfig: {
|
|
|
+ model: { mineCode: hiscode },
|
|
|
+ labelWidth: 120,
|
|
|
+ schemas: [
|
|
|
+ // {
|
|
|
+ // label: '开始时间',
|
|
|
+ // field: 'startTime',
|
|
|
+ // component: 'DatePicker',
|
|
|
+ // defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ // componentProps: {
|
|
|
+ // showTime: true,
|
|
|
+ // placeholder: '请选择开始时间',
|
|
|
+ // valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
+ // },
|
|
|
+ // colProps: { span: 6 },
|
|
|
+ // rules: [{ required: true, message: '请选择开始时间' }],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // label: '结束时间',
|
|
|
+ // field: 'endTime',
|
|
|
+ // component: 'DatePicker',
|
|
|
+ // defaultValue: dayjs(),
|
|
|
+ // componentProps: {
|
|
|
+ // showTime: true,
|
|
|
+ // placeholder: '请选择结束时间',
|
|
|
+ // valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
+ // },
|
|
|
+ // colProps: { span: 6 },
|
|
|
+ // rules: [{ required: true, message: '请选择结束时间' }],
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ label: '煤矿名称',
|
|
|
+ field: 'mineCode', // 对应组件的value.mineCode(最终传给Table的查询参数)
|
|
|
+ component: 'MineCascader', // 自定义组件名
|
|
|
+ componentProps: {
|
|
|
+ initFromStore: false,
|
|
|
+ syncToStore: false,
|
|
|
+ changeOnSelect: false,
|
|
|
+ onChange: (e) => {
|
|
|
+ historyTable.setLoading(true);
|
|
|
+ initGoafOptions(e).finally(() => {
|
|
|
+ historyTable.setLoading(false);
|
|
|
+ });
|
|
|
},
|
|
|
- colProps: { span: 6 },
|
|
|
- rules: [],
|
|
|
},
|
|
|
- ...historicalFormSchema,
|
|
|
- ],
|
|
|
- showAdvancedButton: false,
|
|
|
- schemaGroupNames: ['常规查询'],
|
|
|
- },
|
|
|
- pagination: true,
|
|
|
- striped: true,
|
|
|
- useSearchForm: true,
|
|
|
- bordered: true,
|
|
|
- showIndexColumn: true,
|
|
|
- showActionColumn: false,
|
|
|
+ colProps: { span: 6 },
|
|
|
+ rules: [],
|
|
|
+ },
|
|
|
+ ...historicalFormSchema,
|
|
|
+ ],
|
|
|
+ showAdvancedButton: false,
|
|
|
+ schemaGroupNames: ['常规查询'],
|
|
|
},
|
|
|
- exportConfig: {
|
|
|
- url: '/province/alarm/exportProvinceAlarmHistory',
|
|
|
- name: '历史数据',
|
|
|
- params: {
|
|
|
- alarmType: 'leakageAlarm',
|
|
|
- goafId,
|
|
|
- },
|
|
|
+ pagination: true,
|
|
|
+ striped: true,
|
|
|
+ useSearchForm: true,
|
|
|
+ bordered: true,
|
|
|
+ showIndexColumn: true,
|
|
|
+ showActionColumn: false,
|
|
|
+ },
|
|
|
+ exportConfig: {
|
|
|
+ url: '/province/alarm/exportProvinceAlarmHistory',
|
|
|
+ name: '历史数据',
|
|
|
+ params: {
|
|
|
+ alarmType: 'leakageAlarm',
|
|
|
+ goafId,
|
|
|
},
|
|
|
- });
|
|
|
-
|
|
|
- const [registerHistoryTable, historyTable] = tableContext;
|
|
|
+ },
|
|
|
+});
|
|
|
|
|
|
- async function getAlarmTotalData() {
|
|
|
- const params = {
|
|
|
- alarmType: 'leakageAlarm',
|
|
|
- };
|
|
|
- const result = await getProvinceAlarmNum(params);
|
|
|
- boardData.value[1].value = result.alarmLevel1;
|
|
|
- boardData.value[2].value = result.alarmLevel2;
|
|
|
- boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2;
|
|
|
- }
|
|
|
+const [registerHistoryTable, historyTable] = tableContext;
|
|
|
|
|
|
- useIntervalFn(() => tableCtx.reload({ silence: true }), 10000);
|
|
|
+async function getAlarmTotalData() {
|
|
|
+ const params = {
|
|
|
+ alarmType: 'leakageAlarm',
|
|
|
+ };
|
|
|
+ const result = await getProvinceAlarmNum(params);
|
|
|
+ boardData.value[1].value = result.alarmLevel1;
|
|
|
+ boardData.value[2].value = result.alarmLevel2;
|
|
|
+ boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2;
|
|
|
+}
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- // 页面挂载时的逻辑
|
|
|
- getAlarmTotalData();
|
|
|
- });
|
|
|
+onMounted(() => {
|
|
|
+ // 页面挂载时的逻辑
|
|
|
+ getAlarmTotalData();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- .board-info {
|
|
|
- display: flex;
|
|
|
- flex-wrap: nowrap;
|
|
|
- padding: 10px;
|
|
|
- justify-content: space-evenly;
|
|
|
- background-color: @white;
|
|
|
- // margin: 0 10px;
|
|
|
- margin-bottom: 5px;
|
|
|
- gap: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .board-item {
|
|
|
- // flex: 1;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- :deep(.jeecg-basic-table-form-container .ant-form) {
|
|
|
- border: none !important;
|
|
|
- }
|
|
|
- :where(.css-dev-only-do-not-override-x9w3vz).ant-form-item .ant-form-item-label {
|
|
|
- margin-top: 10px !important;
|
|
|
- }
|
|
|
+.board-info {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ padding: 10px;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ background-color: @white;
|
|
|
+ // margin: 0 10px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ gap: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.board-item {
|
|
|
+ // flex: 1;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+:deep(.jeecg-basic-table-form-container .ant-form) {
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
+:where(.css-dev-only-do-not-override-x9w3vz).ant-form-item .ant-form-item-label {
|
|
|
+ margin-top: 10px !important;
|
|
|
+}
|
|
|
</style>
|