[Wip 0000] 密闭监测详情对接

src/views/monitor/sealedMonitor/components/HistoricalDetailsModal.vue

@@ -47,7 +47,7 @@
     </div>
   </Modal>
 </template>
-<script setup>
+<script lang="ts" setup>
   import { ref, computed } from 'vue';
   import { Modal, DatePicker, Button, message, Input } from 'ant-design-vue';
   import { BasicTree } from '/@/components/Tree/index';
@@ -64,7 +64,13 @@
 
   // 弹框控制
   const visible = ref(false);
-  const showModal = () => (visible.value = true);
+  const dataRef = ref<any>();
+
+  // 外部调用显示弹框
+  const showModal = (record: any) => {
+    visible.value = true;
+    dataRef.value = record;
+  };
   const hideModal = () => (visible.value = false);
   const handleOk = () => hideModal();
   const handleCancel = () => hideModal();

src/views/monitor/sealedMonitor/components/RealtimeDetailsModal.vue

@@ -20,7 +20,7 @@
       <div class="chart-item">
         <div class="chart-title">爆炸三角形</div>
         <div class="chart-placeholder">
-          <BlastDelta :posMonitor="modalDetailsData.demoBlastData" canvasSize="{ width: 95%, height: 95% }" />
+          <BlastDelta :posMonitor="modalDetailsData.demoBlastData" :canvasSize="{ width: '95%', height: '95%' }" />
         </div>
       </div>
       <div class="chart-item">
@@ -47,7 +47,7 @@
   </Modal>
 </template>
 
-<script setup>
+<script lang="ts" setup>
   import { ref } from 'vue';
   import { Modal } from 'ant-design-vue';
   import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
@@ -57,9 +57,13 @@
 
   // 控制弹框显隐
   const visible = ref(false);
+
+  const dataRef = ref<any>();
+
   // 外部调用显示弹框
-  const showModal = () => {
+  const showModal = (record: any) => {
     visible.value = true;
+    dataRef.value = record;
   };
   // 外部调用隐藏弹框
   const hideModal = () => {

src/views/monitor/sealedMonitor/index.vue

@@ -1,9 +1,26 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <!-- 新增Tabs组件区分实时/历史数据 -->
   <Tabs v-model:activeKey="activeTab" class="monitoring-page" type="line">
     <TabPane tab="实时数据监测" key="realtime">
       <!-- 实时数据表格 -->
       <BasicTable style="padding: 0" @register="registerRealtimeTable">
+        <template #form-mine-cascader>
+          <a-cascader
+            v-model:value="mineCodes"
+            :options="getMineTree"
+            :field-names="{
+              label: 'departName',
+              value: 'id',
+              children: 'childDepart',
+            }"
+            show-search
+          >
+            <template #displayRender="{ labels }">
+              {{ labels[labels.length - 1] }}
+            </template>
+          </a-cascader>
+        </template>
         <template #action="{ record }">
           <button @click="openModal(record, 'realtime')" class="action-btn">
             <SvgIcon name="details" />
@@ -15,6 +32,25 @@
     <TabPane tab="历史数据监测" key="history">
       <!-- 历史数据表格 -->
       <BasicTable style="padding: 0" @register="registerHistoryTable">
+        <template #form-mine-cascader>
+          <a-cascader
+            v-model:value="mineCodes"
+            :options="getMineTree"
+            :field-names="{
+              label: 'departName',
+              value: 'id',
+              children: 'childDepart',
+            }"
+            show-search
+          >
+            <template #displayRender="{ labels }">
+              {{ labels[labels.length - 1] }}
+            </template>
+          </a-cascader>
+        </template>
+        <template #form-goaf-select>
+          <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
+        </template>
         <template #afterReset>
           <a-button type="primary" @click="onExportXls">导出</a-button>
         </template>
@@ -28,77 +64,65 @@
   </Tabs>
 
   <!-- 实时数据详情弹框 -->
-  <realtimeDetailsModal ref="realtimeModalRef" />
+  <RealtimeDetailsModal ref="realtimeModalRef" />
   <!-- 历史数据详情弹框 -->
   <HistoricalDetailsModal ref="historyModalRef" />
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
-  import { BasicTable, useTable } from '/@/components/Table';
+  import { computed, ref } from 'vue';
+  import { BasicTable } from '/@/components/Table';
   import { Tabs, TabPane } from 'ant-design-vue';
   // 引入模拟数据
-  import { columns, searchFormSchema, minesData, historicalColumns, historicalFormSchema, historicalMinesData } from './monitor.data';
-  import realtimeDetailsModal from './components/RealtimeDetailsModal.vue';
+  import { columns, searchFormSchema, historicalColumns, historicalFormSchema } 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 { getGoafData, getGoafHistory, getGoafSelectOption } from './monitor.api';
   import { useListPage } from '/@/hooks/system/useListPage';
+  import { useRoute } from 'vue-router';
+  import { last } from 'lodash-es';
+  import { useMineStore } from '/@/store/modules/mine';
+  import { findNodeAll, findPath } from '/@/utils/helper/treeHelper';
+  // import { getGoafList } from '../../system/algorithm/algorithm.api';
 
   // 激活的Tab页签
   const activeTab = ref('realtime');
 
   // 注册实时数据表格
-  const [registerRealtimeTable, { getForm }] = useTable({
-    api: (params) =>
-      getGoafData(params).then((res) => {
-        if (res.length) return res;
-        return minesData;
-      }),
-    beforeFetch(params) {},
-    columns,
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema,
-      showAdvancedButton: false,
-      schemaGroupNames: ['常规查询'],
+  const { tableContext: ctxRealtime } = useListPage({
+    tableProps: {
+      api: getGoafData,
+      beforeFetch(params) {
+        params.mineCode = last(mineCodes.value);
+      },
+      columns,
+      formConfig: {
+        schemas: searchFormSchema,
+        schemaGroupNames: ['常规查询'],
+      },
+      showIndexColumn: false,
+      scroll: { x: 'max-content' },
     },
     pagination: false,
-    useSearchForm: true,
-    showIndexColumn: false,
-    canResize: false,
-    scroll: { x: 'max-content' },
-    actionColumn: {
-      width: 60,
-      title: '操作',
-      dataIndex: 'action',
-      slots: { customRender: 'action' },
-    },
   });
+  const [registerRealtimeTable] = ctxRealtime;
 
   // 注册历史数据表格
-  const { tableContext, onExportXls } = useListPage({
+  const { tableContext: ctxHistory, onExportXls } = useListPage({
     tableProps: {
-      api: (params) =>
-        getGoafHistory(params)
-          .then((res) => {
-            return res;
-          })
-          .catch(() => {
-            return historicalMinesData;
-          }),
-      beforeFetch(params) {},
+      api: getGoafHistory,
+      beforeFetch(params) {
+        params.goafId = goafId.value;
+      },
       columns: historicalColumns,
       formConfig: {
-        labelWidth: 120,
         schemas: historicalFormSchema, // 使用历史数据的搜索配置
-        showAdvancedButton: false,
         schemaGroupNames: ['常规查询'],
       },
       useSearchForm: true,
       bordered: true,
       showIndexColumn: false,
-      canResize: false,
       scroll: { x: 'max-content' },
     },
     exportConfig: {
@@ -107,11 +131,11 @@
     },
     pagination: true,
   });
-  const [registerHistoryTable] = tableContext;
+  const [registerHistoryTable] = ctxHistory;
 
   // 弹窗引用
-  const realtimeModalRef = ref(null);
-  const historyModalRef = ref(null);
+  const realtimeModalRef = ref<any>(null);
+  const historyModalRef = ref<any>(null);
 
   // 打开弹窗方法（区分实时/历史）
   const openModal = (record, type) => {
@@ -123,6 +147,30 @@
       historyModalRef.value?.showModal(record);
     }
   };
+
+  const config = {
+    id: 'id',
+    pid: 'parentId',
+    children: 'childDepart',
+  };
+  const route = useRoute();
+  const mineStroe = useMineStore();
+  const mineCodes = ref<string[]>([]);
+  const getMineTree = computed(() => {
+    const id = last(route.fullPath.split('/'));
+    return findNodeAll(mineStroe.mineTree, (item) => item.id === id, config);
+  });
+  const paths = findPath(getMineTree.value, (item) => item.isLeaf, config);
+
+  mineCodes.value = paths.map((e) => e.id);
+
+  const goafId = ref('');
+  const goafOptions = ref<any[]>([]);
+
+  getGoafSelectOption({ mineCode: last(mineCodes.value) }).then(({ options, defaultValue }) => {
+    goafOptions.value = options;
+    goafId.value = defaultValue;
+  });
 </script>
 
 <style lang="less" scoped>

src/views/monitor/sealedMonitor/monitor.api.ts

@@ -3,11 +3,22 @@ import { defHttp } from '/@/utils/http/axios';
 enum Api {
   getGoafData = '/province/device/getGoafData',
   getGoafHistory = '/province/device/getGoafHistory',
+  getGoafList = '/province/device/getGoafList',
 }
 
 export function getGoafData(params: any) {
-  return defHttp.post({ url: Api.getGoafData, params });
+  return defHttp.post({ url: Api.getGoafData, params }, { joinParamsToUrl: true });
 }
 export function getGoafHistory(params: any) {
-  return defHttp.get({ url: Api.getGoafHistory, params }, { errorMessageMode: 'none' });
+  return defHttp.get({ url: Api.getGoafHistory, params }, { joinParamsToUrl: true });
+}
+
+export function getGoafSelectOption(params: any) {
+  return defHttp.post({ url: Api.getGoafList, params }, { joinParamsToUrl: true }).then((res) => {
+    const options = res.map((e) => ({ value: e.id, label: e.devicePos }));
+    return {
+      options,
+      defaultValue: options[0]?.value,
+    };
+  });
 }

src/views/monitor/sealedMonitor/monitor.data.ts

@@ -82,19 +82,8 @@ export const searchFormSchema: FormSchema[] = [
     field: 'mineCode',
     label: '煤矿名称',
     component: 'MineCascader',
+    slot: 'mine-cascader',
     colProps: { span: 6 },
-    // componentProps: {
-    //   //请求api,返回结果{ result: { records: [{'id':'1',name:'scott'},{'id':'2',name:'小张'}] }}
-    //   api: () => getMineData({ pageNo: 1, pageSize: 999 }),
-    //   //数值转成String
-    //   numberToString: false,
-    //   //标题字段
-    //   labelField: 'mineName',
-    //   //值字段
-    //   valueField: 'id',
-    //   //返回结果字段
-    //   resultField: 'records',
-    // },
   },
   {
     field: 'mineNameAbbr',
@@ -389,15 +378,16 @@ export const historicalFormSchema: FormSchema[] = [
     field: 'mineCode',
     label: '煤矿名称',
     component: 'MineCascader',
-    colProps: { span: 6 },
-  },
-  {
-    field: 'mineNameAbbr',
-    label: '煤矿简称',
-    component: 'Input',
+    slot: 'mine-cascader',
     colProps: { span: 6 },
   },
   // {
+  //   field: 'mineNameAbbr',
+  //   label: '煤矿简称',
+  //   component: 'Input',
+  //   colProps: { span: 6 },
+  // },
+  // {
   //   field: 'productStatus',
   //   label: '生产状态',
   //   component: 'Select',
@@ -440,18 +430,7 @@ export const historicalFormSchema: FormSchema[] = [
     field: 'goafId',
     label: '密闭名称',
     component: 'ApiSelect',
-    componentProps: {
-      api: getGoafList,
-      //标题字段
-      labelField: 'devicePos',
-      //值字段
-      valueField: 'id',
-      //请求参数
-      params: {},
-      //返回结果字段
-      resultField: 'records',
-    },
-    // required: true,
+    slot: 'goaf-select',
     colProps: { span: 6 },
   },
   {
@@ -464,7 +443,7 @@ export const historicalFormSchema: FormSchema[] = [
       //返回值格式化（绑定值的格式）
       valueFormat: 'YYYY-MM-DD hh:mm:ss',
     },
-    defaultValue: dayjs().add(-1, 'day').format('YYYY-MM-DD hh:mm:ss'),
+    defaultValue: dayjs().add(-7, 'day').format('YYYY-MM-DD hh:mm:ss'),
     colProps: { span: 6 },
   },
   {

src/views/system/algorithm/algorithm.api.ts

@@ -21,7 +21,7 @@ export function getMineData(params: any) {
   return defHttp.post({ url: Api.getMineData, params });
 }
 export function getCoalSeam(params: any) {
-  return defHttp.post({ url: Api.getCoalSeam, params });
+  return defHttp.post({ url: Api.getCoalSeam, params }, { joinParamsToUrl: true });
 }
 export function getCoalSeamAlarmRule(params: any) {
   return defHttp.post({ url: Api.getCoalSeamAlarmRule, params });
@@ -32,25 +32,31 @@ export function updateCoalSeamAlarmRule(params: any) {
   });
 }
 export function addCoalSeamAlarmRule(params: any) {
-  return defHttp.post({ url: Api.addCoalSeamAlarmRule, params });
+  return defHttp.post({ url: Api.addCoalSeamAlarmRule, params }).then(() => {
+    message.success('新增成功');
+  });
 }
 export function deleteCoalSeamAlarmRule(params: any) {
-  return defHttp.post({ url: Api.deleteCoalSeamAlarmRule, params });
+  return defHttp.post({ url: Api.deleteCoalSeamAlarmRule, params }, { joinParamsToUrl: true });
 }
 export function getGoafList(params: any) {
-  return defHttp.post({ url: Api.getGoafList, params });
+  return defHttp.post({ url: Api.getGoafList, params }, { joinParamsToUrl: true });
 }
 export function getGoafDataLimit(params: any) {
   return defHttp.post({ url: Api.getGoafDataLimit, params }, { joinParamsToUrl: true });
 }
 export function addGoafDataLimit(params: any) {
-  return defHttp.post({ url: Api.addGoafDataLimit, params });
+  return defHttp.post({ url: Api.addGoafDataLimit, params }).then(() => {
+    message.success('新增成功');
+  });
 }
 export function updateGoafDataLimit(params: any) {
-  return defHttp.post({ url: Api.updateGoafDataLimit, params });
+  return defHttp.post({ url: Api.updateGoafDataLimit, params }).then(() => {
+    message.success('修改成功');
+  });
 }
 export function deleteGoafDataLimit(params: any) {
-  return defHttp.post({ url: Api.deleteGoafDataLimit, params });
+  return defHttp.post({ url: Api.deleteGoafDataLimit, params }, { joinParamsToUrl: true });
 }
 
 export function getMineTree(params: { searchValue: string }) {

src/views/system/algorithm/algorithm.data.ts

@@ -2,7 +2,6 @@ import { h } from 'vue';
 import { FormSchema } from '/@/components/Form';
 import { BasicColumn } from '/@/components/Table';
 import { Tag } from 'ant-design-vue';
-import { options } from '../../monitor/mynews/XssWhiteList';
 
 const goafAlarmOptions = [
   { value: 'ch4Val', label: '甲烷' },
@@ -479,6 +478,7 @@ export const schemasGoafLimit: FormSchema[] = [
     label: '监测值:',
     field: 'alarmField',
     component: 'Select',
+    defaultValue: 'ch4Val',
     componentProps: {
       options: goafAlarmOptions,
     },
@@ -486,11 +486,13 @@ export const schemasGoafLimit: FormSchema[] = [
   {
     label: '下限值:',
     field: 'lowerLimit',
+    defaultValue: 0,
     component: 'InputNumber',
   },
   {
     label: '上限值:',
     field: 'upperLimit',
+    defaultValue: 100,
     component: 'InputNumber',
   },
 ];

src/views/system/algorithm/index.vue

@@ -14,10 +14,10 @@
       <template #expandedRowRender>
         <BasicTable @register="registerInnerTable">
           <template #action="{ record }">
-            <button @click="handleEdit({ goafId: record.id }, 'goaf')" class="action-btn">
+            <button @click="handleEdit({ goafId: record.id, mineCode: last(expandedRowKeys) }, 'goaf')" class="action-btn">
               <SvgIcon name="edit" />
             </button>
-            <button @click="handleAdd({ goafId: record.id }, 'goaf')" class="action-btn ml-1">
+            <button @click="handleAdd({ goafId: record.id, mineCode: last(expandedRowKeys) }, 'goaf')" class="action-btn ml-1">
               <PlusOutlined />
             </button>
             <a-popconfirm title="确认删除？" @confirm="handleDelete(record, 'coal')">
@@ -146,6 +146,7 @@
       dataIndex: 'action',
       slots: { customRender: 'action' },
     },
+    immediate: false,
     beforeFetch(p) {
       p.coalSeamId = expandedRowKeys.value[0];
     },
@@ -200,6 +201,7 @@
     if (!formPropsMap.has(sign)) return;
     setModalProps(modalPropsMap.get(sign) as ModalProps);
     const { schemas, submitFunc } = formPropsMap.get(sign)!;
+    await nextTick();
     await resetSchema(schemas);
 
     await nextTick();