[Feat 0000] 新增闭外超限报警页面并对接其功能

public/js/global.js

@@ -283,10 +283,22 @@ const __STATIC_ROUTES__ = [
           internalOrExternal: false,
           icon: '',
           componentName: 'index',
-          title: '超限报警',
+          title: '闭内超限报警',
         },
         name: 'warningAnalysis-overlimit-alarm',
       },
+      {
+        path: '/warningAnalysis/overlimit-alarm-out',
+        component: '/analysis/warningAnalysis/overlimitAlarmOut/index',
+        meta: {
+          keepAlive: true,
+          internalOrExternal: false,
+          icon: '',
+          componentName: 'index',
+          title: '闭外超限报警',
+        },
+        name: 'warningAnalysis-overlimit-alarm-out',
+      },
       {
         path: '/warningAnalysis/report-analysis',
         component: '/analysis/warningAnalysis/reportAnalysis/index',

src/views/analysis/warningAnalysis/overlimitAlarmOut/index.vue

@@ -0,0 +1,248 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 新增Tabs组件区分实时/历史数据 -->
+  <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
+    <TabPane tab="实时监测" key="realtime">
+      <div class="board-info">
+        <MiniBoard
+          v-for="(item, index) in boardData"
+          :key="index"
+          type="A"
+          :label="item.label"
+          :value="item.value"
+          layout="label-top"
+          class="board-item"
+        />
+      </div>
+      <!-- 实时数据表格 -->
+      <BasicTable @register="registerRealtimeTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
+        <template #action="{ record }">
+          <div class="action-buttons">
+            <!-- 操作按钮 -->
+            <button @click="openModal(record)" class="resolved-btn" title="解决">
+              <SvgIcon name="details" />
+            </button>
+          </div>
+        </template>
+        <template #resetBefore>
+          <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXlsTime"> 导出 </a-button>
+        </template>
+      </BasicTable>
+    </TabPane>
+
+    <TabPane tab="历史数据" key="history">
+      <!-- 历史数据表格 -->
+      <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
+        <!-- <template #action="{ record }">
+          <div class="action-buttons">
+            <button @click="openModal(record, 'history')" class="action-btn">
+              <SvgIcon name="details" />
+            </button>
+          </div>
+        </template> -->
+        <template #resetBefore>
+          <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXls"> 导出 </a-button>
+        </template>
+        <template #form-goaf-select>
+          <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
+        </template>
+      </BasicTable>
+    </TabPane>
+  </Tabs>
+  <!-- 弹窗组件 -->
+  <BasicModal @register="registerModal" :width="600" :minHeight="100" centered title="处理情况" @ok="handleResolve">
+    <a-textarea class="ml-10px" :style="{ width: `calc(100% - 20px)` }" v-model:value="resolveValue" placeholder="请输入解决情况" :rows="4" />
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { BasicTable } 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 './overlimitAlarm.data';
+  import { getProvinceAlarm, getProvinceAlarmHistory, getProvinceAlarmNum } from './overlimit.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');
+
+  const boardData = ref([
+    {
+      label: '存在风险情况数量',
+      value: '-',
+    },
+    {
+      label: '低风险',
+      value: '-',
+    },
+    {
+      label: '一般风险',
+      value: '-',
+    },
+    {
+      label: '较高风险',
+      value: '-',
+    },
+    {
+      label: '高风险',
+      value: '-',
+    },
+  ]);
+
+  const wrappedGetMineData = (params) => {
+    // 调用原接口
+    return Promise.all([getAlarmTotalData(params), getProvinceAlarm(params)]).then(([__, res]) => res);
+  };
+
+  // 注册实时数据表格
+  const { tableContext: ctxRealtime, onExportXls: onExportXlsTime } = useListPage({
+    tableProps: {
+      columns,
+      api: wrappedGetMineData,
+      formConfig: {
+        labelWidth: 120,
+        schemas: [
+          {
+            label: '煤矿名称',
+            field: 'deptId',
+            component: 'MineCascader', // 自定义组件名
+            colProps: { span: 6 },
+            rules: [],
+          },
+        ],
+        showAdvancedButton: false,
+        schemaGroupNames: ['常规查询'],
+      },
+      pagination: true,
+      striped: true,
+      useSearchForm: true,
+      bordered: true,
+      showIndexColumn: false,
+      actionColumn: {
+        width: 80,
+        title: '操作',
+        dataIndex: 'action',
+        slots: { customRender: 'action' },
+        fixed: undefined,
+      },
+    },
+    exportConfig: {
+      url: '/ventanaly-province/province/alarm/exportProvinceAlarmReal',
+      name: '超限报警',
+      params: {
+        alarmType: 'overLimitAlarmOut',
+      },
+    },
+  });
+  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: { customField: 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: 'customField',
+            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,
+    },
+    exportConfig: {
+      url: '/province/alarm/exportProvinceAlarmHistory',
+      name: '历史数据',
+      params: {
+        alarmType: 'overLimitAlarmOut',
+        goafId,
+      },
+    },
+  });
+
+  const [registerHistoryTable, historyTable] = tableContext;
+
+  async function getAlarmTotalData(p) {
+    const params = {
+      ...p,
+      alarmType: 'overLimitAlarmOut',
+    };
+    const result = await getProvinceAlarmNum(params);
+    boardData.value[1].value = result.alarmLevel1;
+    boardData.value[2].value = result.alarmLevel2;
+    boardData.value[3].value = result.alarmLevel3;
+    boardData.value[4].value = result.alarmLevel4;
+    boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
+  }
+</script>
+
+<style lang="less" scoped>
+  @import url(../../common/board.less);
+</style>

src/views/analysis/warningAnalysis/overlimitAlarmOut/overlimit.api.ts

@@ -0,0 +1,40 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  getProvinceAlarm = '/province/alarm/getProvinceAlarm',
+  getProvinceAlarmNum = '/province/alarm/getProvinceAlarmNum',
+  getProvinceAlarmHistory = '/province/alarm/getProvinceAlarmHistory',
+}
+//根据预警类型查询不同等级数量
+export const getProvinceAlarmNum = (params) =>
+  defHttp.post(
+    {
+      url: Api.getProvinceAlarmNum,
+      params,
+    },
+    { joinParamsToUrl: true }
+  );
+//查询预警数据
+export const getProvinceAlarm = (params) =>
+  defHttp.post(
+    {
+      url: Api.getProvinceAlarm,
+      params: {
+        alarmType: 'overLimitAlarmOut',
+        ...params,
+      },
+    },
+    { joinParamsToUrl: true }
+  );
+//查询预警历史数据
+export const getProvinceAlarmHistory = (params) =>
+  defHttp.post(
+    {
+      url: Api.getProvinceAlarmHistory,
+      params: {
+        alarmType: 'overLimitAlarmOut',
+        ...params,
+      },
+    },
+    { joinParamsToUrl: true }
+  );

src/views/analysis/warningAnalysis/overlimitAlarmOut/overlimitAlarm.data.ts

@@ -0,0 +1,96 @@
+import { BasicColumn } from '/@/components/Table';
+import { alarmCellRender } from '/@/views/monitor/sealedMonitor/monitor.data';
+
+export const boardData = [
+  {
+    label: '存在风险情况数量',
+    value: '10',
+  },
+  {
+    label: '低风险',
+    value: '27',
+  },
+  {
+    label: '一般风险',
+    value: '27',
+  },
+  {
+    label: '较高风险',
+    value: '27',
+  },
+  {
+    label: '高风险',
+    value: '27',
+  },
+];
+// 实时数据相关
+export const columns: BasicColumn[] = [
+  {
+    title: '区域',
+    dataIndex: 'areaName',
+    width: 100,
+  },
+  {
+    title: '煤矿名称',
+    dataIndex: 'mineName',
+    width: 200,
+  },
+  {
+    title: '老空区永久密闭名称',
+    dataIndex: 'devicePos',
+    width: 200,
+  },
+  {
+    title: '所属煤层',
+    dataIndex: 'coalSeamName',
+    width: 100,
+  },
+  {
+    title: '自燃倾向性',
+    dataIndex: 'coalSeamLevel',
+    width: 100,
+  },
+  {
+    title: 'CO浓度(ppm)',
+    dataIndex: 'coVal',
+    width: 100,
+  },
+  {
+    title: 'CO日增率(%)',
+    dataIndex: 'coRzl',
+    width: 100,
+  },
+  {
+    title: 'O2浓度(%)',
+    dataIndex: 'o2Val',
+    width: 100,
+  },
+  {
+    title: '温度(℃)',
+    dataIndex: 'temperature',
+    width: 100,
+  },
+  {
+    title: '温差(℃)',
+    dataIndex: 'temperatureDiff',
+    width: 100,
+  },
+  {
+    title: '风险分析',
+    dataIndex: 'alarmName',
+    width: 100,
+    customRender({ record }) {
+      return alarmCellRender(record);
+    },
+  },
+  {
+    title: '预警时间',
+    dataIndex: 'createTime',
+    width: 100,
+  },
+  {
+    title: '是否解决',
+    customRender: () => '未解决',
+    width: 100,
+  },
+];