矿端安全监控历史预警更新

src/views/vent/monitorManager/safetyMonitor/AlarmHistoryTable.vue

@@ -9,299 +9,317 @@
 </template>
 
 <script lang="ts" name="system-user" setup>
-  //ts语法
-  import { watch, ref, defineExpose, inject, onMounted } from 'vue';
-  import { BasicTable } from '/@/components/Table';
-  import { useListPage } from '/@/hooks/system/useListPage';
-  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-  import { defHttp } from '/@/utils/http/axios';
-  import dayjs from 'dayjs';
-  import { getAutoScrollContainer } from '/@/utils/common/compUtils';
-  import { safetyDeviceList, safetyList } from './safety.api';
+//ts语法
+import { watch, ref, defineExpose, inject, onMounted } from 'vue';
+import { BasicTable } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+import { defHttp } from '/@/utils/http/axios';
+import dayjs from 'dayjs';
+import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+import { safetyDeviceList, safetyList } from './safety.api';
 
-  const props = defineProps({
-    columnsType: {
-      type: String,
-      required: true,
-    },
-    columns: {
-      type: Array,
-      // required: true,
-      default: () => [],
-    },
-    deviceType: {
-      type: String,
-      required: true,
-    },
-    deviceListApi: {
-      type: Function,
-    },
-    designScope: {
-      type: String,
-    },
-    sysId: {
-      type: String,
-    },
-    scroll: {
-      type: Object,
-      default: { y: 0 },
-    },
-    list: {
-      type: Function,
-      default: (params) => defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params }),
-    },
-  });
+const props = defineProps({
+  columnsType: {
+    type: String,
+    required: true,
+  },
+  columns: {
+    type: Array,
+    // required: true,
+    default: () => [],
+  },
+  deviceType: {
+    type: String,
+    required: true,
+  },
+  deviceListApi: {
+    type: Function,
+  },
+  designScope: {
+    type: String,
+  },
+  sysId: {
+    type: String,
+  },
+  scroll: {
+    type: Object,
+    default: { y: 0 },
+  },
+  list: {
+    type: Function,
+    default: (params) => defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params }),
+  },
+});
 
-  const getDeviceListApi = (params) => defHttp.post({ url: '/monitor/device', params });
-  const globalConfig = inject('globalConfig');
-  const alarmHistory = ref();
-  const columns = ref([]);
-  const deviceOptions = ref([]);
-  const dataTypeName = ref('');
+const getDeviceListApi = (params) => defHttp.post({ url: '/monitor/device', params });
+const globalConfig = inject('globalConfig');
+const alarmHistory = ref();
+const columns = ref([]);
+const deviceOptions = ref([]);
+const dataTypeName = ref('');
 
-  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
+const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
 
-  async function getDeviceList() {
-    let result;
-    const res = await getDeviceListApi({ devicetype: props.deviceType, filterParams: { dataTypeName: dataTypeName.value }, pageSize: 10000 });
-    if (res['records'] && res['records'].length > 0) {
-      result = res['records'];
-    } else if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
-      result = res['msgTxt'][0]['datalist'];
+async function getDeviceList() {
+  let result;
+  const res = await getDeviceListApi({ devicetype: props.deviceType, filterParams: { dataTypeName: dataTypeName.value }, pageSize: 10000 });
+  if (res['records'] && res['records'].length > 0) {
+    result = res['records'];
+  } else if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
+    result = res['msgTxt'][0]['datalist'];
+  }
+  if (result && result.length > 0) {
+    deviceOptions.value = [];
+    deviceOptions.value = result.map((item, index) => {
+      return {
+        label: item['strinstallpos'],
+        value: item['id'] || item['deviceID'],
+        strtype: item['strtype'] || item['deviceType'],
+        strinstallpos: item['strinstallpos'],
+        devicekind: item['devicekind'],
+        stationtype: item['stationtype'],
+      };
+    });
+  } else {
+    deviceOptions.value = [];
+  }
+  await getForm().setFieldsValue({ deviceId: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '' });
+}
+
+watch(
+  () => {
+    return props.columnsType;
+  },
+  async (newVal) => {
+    if (!newVal) return;
+    let column;
+    column = getTableHeaderColumns('safetymonitor_warning');
+    if (!column || column.length < 1) {
+      column = getTableHeaderColumns(newVal + '_history');
     }
-    if (result && result.length > 0) {
-      deviceOptions.value = [];
-      deviceOptions.value = result.map((item, index) => {
-        return {
-          label: item['strinstallpos'],
-          value: item['id'] || item['deviceID'],
-          strtype: item['strtype'] || item['deviceType'],
-          strinstallpos: item['strinstallpos'],
-          devicekind: item['devicekind'],
-          stationtype: item['stationtype'],
-        };
+    if (column && column.length < 1) {
+      const arr = newVal.split('_');
+      const columnKey = arr.reduce((prev, cur, index) => {
+        if (index !== arr.length - 2) {
+          return prev + '_' + cur;
+        } else {
+          return prev;
+        }
       });
+      columns.value = getTableHeaderColumns(arr[0] + '_history');
     } else {
-      deviceOptions.value = [];
+      columns.value = column;
     }
-    await getForm().setFieldsValue({ deviceId: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '' });
+    if (alarmHistory.value) reload();
+  },
+  {
+    immediate: true,
   }
+);
 
-  watch(
-    () => {
-      return props.columnsType;
-    },
-    async (newVal) => {
-      if (!newVal) return;
-      let column;
-      column = getTableHeaderColumns('safetymonitor_warning');
-      if (!column || column.length < 1) {
-        column = getTableHeaderColumns(newVal + '_history');
-      }
-      if (column && column.length < 1) {
-        const arr = newVal.split('_');
-        const columnKey = arr.reduce((prev, cur, index) => {
-          if (index !== arr.length - 2) {
-            return prev + '_' + cur;
-          } else {
-            return prev;
-          }
-        });
-        columns.value = getTableHeaderColumns(arr[0] + '_history');
-      } else {
-        columns.value = column;
-      }
-      if (alarmHistory.value) reload();
-    },
-    {
-      immediate: true,
-    }
-  );
+watch(
+  () => props.deviceType,
+  async () => {
+    if (alarmHistory.value) getForm().resetFields();
+    await getDeviceList();
+  }
+);
 
-  watch(
-    () => props.deviceType,
-    async () => {
-      if (alarmHistory.value) getForm().resetFields();
-      await getDeviceList();
+watch(
+  () => props.scroll.y,
+  (newVal) => {
+    if (newVal) {
+      tableScroll.value = { y: newVal - 100 };
+    } else {
+      tableScroll.value = {};
     }
-  );
+  }
+);
 
-  watch(
-    () => props.scroll.y,
-    (newVal) => {
-      if (newVal) {
-        tableScroll.value = { y: newVal - 100 };
-      } else {
-        tableScroll.value = {};
-      }
-    }
-  );
+// 列表页面公共参数、方法
+const { tableContext, onExportXls } = useListPage({
+  tableProps: {
+    api: safetyList,
+    columns: props.columnsType ? columns : (props.columns as any[]),
+    canResize: false,
+    showTableSetting: false,
+    showActionColumn: false,
+    bordered: false,
+    showIndexColumn: true,
+    size: 'small',
+    scroll: tableScroll,
+    formConfig: {
+      labelAlign: 'left',
+      showAdvancedButton: false,
+      // autoAdvancedCol: 2,
+      actionColOptions: {
 
-  // 列表页面公共参数、方法
-  const { tableContext, onExportXls } = useListPage({
-    tableProps: {
-      api: safetyList,
-      columns: props.columnsType ? columns : (props.columns as any[]),
-      canResize: false,
-      showTableSetting: false,
-      showActionColumn: false,
-      bordered: false,
-      showIndexColumn: true,
-      size: 'small',
-      scroll: tableScroll,
-      formConfig: {
-        labelAlign: 'left',
-        showAdvancedButton: false,
-        // autoAdvancedCol: 2,
-        schemas: [
-          {
-            field: 'startTime',
-            label: '开始时间',
-            component: 'DatePicker',
-            defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
-            required: true,
-            componentProps: {
-              showTime: true,
-              valueFormat: 'YYYY-MM-DD HH:mm:ss',
-              getPopupContainer: getAutoScrollContainer,
-            },
-            colProps: {
-              span: 4,
-            },
+        xs: 4, // <576px
+        sm: 14, // ≥576px
+        md: 4, // ≥768px
+        lg: 4, // ≥992px
+        xl: 4, // ≥1200px
+        xxl: 4, // ≥1600px
+
+        style: { textAlign: 'left' },
+      },
+      schemas: [
+        {
+          field: 'startTime',
+          label: '开始时间',
+          component: 'DatePicker',
+          defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+          required: true,
+          componentProps: {
+            showTime: true,
+            valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            getPopupContainer: getAutoScrollContainer,
           },
-          {
-            field: 'endTime',
-            label: '结束时间',
-            component: 'DatePicker',
-            defaultValue: dayjs(),
-            required: true,
-            componentProps: {
-              showTime: true,
-              valueFormat: 'YYYY-MM-DD HH:mm:ss',
-              getPopupContainer: getAutoScrollContainer,
-            },
-            colProps: {
-              span: 4,
-            },
+          colProps: {
+            span: 4,
           },
-          {
-            label: '设备类型',
-            field: 'dataTypeName',
-            component: 'ApiSelect',
-            componentProps: {
-              api: safetyDeviceList.bind(null, { devicetype: 'safetymonitor', code: 'dataTypeName' }),
-              labelField: 'name',
-              valueField: 'code',
-              onChange: async (e, option) => {
-                console.log('1111', e, option);
-                dataTypeName.value = e;
-                await getDeviceList();
-              },
-            },
-            colProps: {
-              span: 4,
-            },
+        },
+        {
+          field: 'endTime',
+          label: '结束时间',
+          component: 'DatePicker',
+          defaultValue: dayjs(),
+          required: true,
+          componentProps: {
+            showTime: true,
+            valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            getPopupContainer: getAutoScrollContainer,
           },
-          {
-            label: '查询设备',
-            field: 'deviceId',
-            component: 'Select',
-            defaultValue: 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,
-            },
-            colProps: {
-              span: 4,
+          colProps: {
+            span: 4,
+          },
+        },
+        {
+          label: '设备类型',
+          field: 'dataTypeName',
+          component: 'ApiSelect',
+          componentProps: {
+            api: safetyDeviceList.bind(null, { devicetype: 'safetymonitor', code: 'dataTypeName' }),
+            labelField: 'name',
+            valueField: 'code',
+            onChange: async (e, option) => {
+              console.log('1111', e, option);
+              dataTypeName.value = e;
+              await getDeviceList();
             },
           },
-          {
-            label: '是否解决',
-            field: 'isok',
-            component: 'Select',
-            componentProps: {
-              options: [
-                {
-                  label: '未解决',
-                  value: '0',
-                },
-                {
-                  label: '已解决',
-                  value: '1',
-                },
-              ],
+          colProps: {
+            span: 4,
+          },
+        },
+        {
+          label: '查询设备',
+          field: 'deviceId',
+          component: 'Select',
+          defaultValue: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
+          componentProps: {
+            showSearch: true,
+            filterOption: (input: string, option: any) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
             },
-            colProps: { span: 4 },
+            options: deviceOptions,
           },
-        ],
-      },
-      fetchSetting: {
-        listField: 'records',
-      },
-      pagination: {
-        current: 1,
-        pageSize: 10,
-        pageSizeOptions: ['10', '30', '50', '100'],
-      },
-      // beforeFetch(params) {
-      //   params.devicetype = props.deviceType + '*';
-      //   if (props.sysId) {
-      //     params.sysId = props.sysId;
-      //   }
-      // },
+          colProps: {
+            span: 4,
+          },
+        },
+        {
+          label: '是否解决',
+          field: 'isok',
+          component: 'Select',
+          componentProps: {
+            options: [
+              {
+                label: '未解决',
+                value: '0',
+              },
+              {
+                label: '已解决',
+                value: '1',
+              },
+            ],
+          },
+          colProps: { span: 4 },
+        },
+      ],
     },
-    exportConfig: {
-      name: '预警历史列表',
-      url: '/safety/ventanalyAlarmLog/exportXls',
+    fetchSetting: {
+      listField: 'records',
     },
-  });
-  //注册table数据
-  const [registerTable, { reload, setLoading, getForm }] = tableContext;
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      pageSizeOptions: ['10', '30', '50', '100'],
+    },
+    // beforeFetch(params) {
+    //   params.devicetype = props.deviceType + '*';
+    //   if (props.sysId) {
+    //     params.sysId = props.sysId;
+    //   }
+    // },
+  },
+  exportConfig: {
+    name: '预警历史列表',
+    url: '/safety/ventanalyAlarmLog/exportXls',
+  },
+});
+//注册table数据
+const [registerTable, { reload, setLoading, getForm }] = tableContext;
 
-  onMounted(async () => {
-    await getDeviceList();
-  });
+onMounted(async () => {
+  await getDeviceList();
+});
 
-  defineExpose({ setLoading });
+defineExpose({ setLoading });
 </script>
 
 <style scoped lang="less">
-  @ventSpace: zxm;
+@ventSpace: zxm;
 
-  :deep(.ventSpace-table-body) {
-    height: auto !important;
-  }
-  :deep(.zxm-picker) {
-    height: 30px !important;
-  }
-  .alarm-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;
-          background: #00000017;
-          border: 1px solid #b7b7b7;
-          input,
-          .@{ventSpace}-select-selection-item,
-          .@{ventSpace}-picker-suffix {
-            color: #fff;
-          }
-          .@{ventSpace}-select-selection-placeholder {
-            color: #ffffffaa;
-          }
+:deep(.ventSpace-table-body) {
+  height: auto !important;
+}
+
+:deep(.zxm-picker) {
+  height: 30px !important;
+}
+
+.alarm-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;
+        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;
-      }
+    }
+
+    .@{ventSpace}-table-title {
+      min-height: 0 !important;
     }
   }
+}
 </style>

src/views/vent/monitorManager/warningMonitor/index-mine.vue

@@ -1,5 +1,5 @@
 <template>
-  <customHeader>预警历史监控系统222</customHeader>
+  <customHeader>预警历史监控系统</customHeader>
   <div class="data-statistics">
     <div class="statistics-box" v-for="(item, index) in statisticsList" :key="index">
       <div class="left-box">
@@ -20,43 +20,52 @@
   <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
     <a-tab-pane tab="设备预警历史" key="device" />
     <a-tab-pane tab="联动预警历史" key="manageAuto" />
+    <a-tab-pane tab="安全监控预警历史" key="safety" />
   </a-tabs>
   <div class="alarm-history-table">
-    <BasicTable v-if="activeKey == 'device'" ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 350 }">
-      <template #form-onExportXls>
-        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
-      </template>
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.dict">
-          <!-- 除了 101（蓝色预警）其他都是红色字体 -->
-          <span v-if="column.dataIndex === 'nwartype'"
-            :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
-            {{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
-          </span>
-          <span v-else>
-            {{ render.renderDictText(record[column.dataIndex], column.dict) || '-' }}
-          </span>
+    <template v-if="activeKey == 'device'">
+      <BasicTable ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 350 }">
+        <template #form-onExportXls>
+          <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
         </template>
-      </template>
-    </BasicTable>
-    <BasicTable v-if="activeKey == 'manageAuto'" ref="alarmHistory" @register="registerTable"
-      :scroll="{ x: 0, y: 350 }">
-      <template #form-onExportXls>
-        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
-      </template>
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.dict">
-          <!-- 除了 101（蓝色预警）其他都是红色字体 -->
-          <span v-if="column.dataIndex === 'nwartype'"
-            :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
-            {{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
-          </span>
-          <span v-else>
-            {{ render.renderDictText(record[column.dataIndex], column.dict) || '-' }}
-          </span>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dict">
+            <!-- 除了 101（蓝色预警）其他都是红色字体 -->
+            <span v-if="column.dataIndex === 'nwartype'"
+              :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
+              {{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
+            </span>
+            <span v-else>
+              {{ render.renderDictText(record[column.dataIndex], column.dict) || '-' }}
+            </span>
+          </template>
         </template>
-      </template>
-    </BasicTable>
+      </BasicTable>
+    </template>
+    <template v-if="activeKey == 'manageAuto'">
+      <BasicTable ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 350 }">
+        <template #form-onExportXls>
+          <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dict">
+            <!-- 除了 101（蓝色预警）其他都是红色字体 -->
+            <span v-if="column.dataIndex === 'nwartype'"
+              :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
+              {{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
+            </span>
+            <span v-else>
+              {{ render.renderDictText(record[column.dataIndex], column.dict) || '-' }}
+            </span>
+          </template>
+        </template>
+      </BasicTable>
+    </template>
+    <template v-if="activeKey == 'safety'">
+      <AlarmHistoryTable ref="alarmHistoryTable" columns-type="alarm" :list="safetyList" device-type="safetymonitor"
+        :device-list-api="getDeviceList.bind(null, { devicekind: 'safetymonitor', pageSize: 10000 })"
+        designScope="alarm-history" />
+    </template>
   </div>
 </template>
 
@@ -69,8 +78,10 @@ import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
 import { manageAutoColumns } from './alarm.data';
 import { getAutoScrollContainer } from '/@/utils/common/compUtils';
 import { getAlarmLogList, getManageAutoLogList, getWarnCountInfo } from './warning.api';
+import { getDeviceList, safetyList, } from '../safetyMonitor/safety.api';
 import { useRoute } from 'vue-router';
 import customHeader from '/@/components/vent/customHeader.vue';
+import AlarmHistoryTable from '../safetyMonitor/AlarmHistoryTable.vue';
 import { render } from '/@/utils/common/renderUtils';
 const props = defineProps({
   formConfig: {