Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

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

@@ -16,7 +16,11 @@
           </span>
         </template>
       </template>
+      <template #action="{ record }">
+        <a @click="openHistoryCurve(record)">预警分析</a>
+      </template>
     </BasicTable>
+    <HistoryCurveModal @register="registerModal" />
   </div>
 </template>
 
@@ -30,6 +34,9 @@
   import dayjs from 'dayjs';
   import { getAutoScrollContainer } from '/@/utils/common/compUtils';
   import { render } from '/@/utils/common/renderUtils';
+  import HistoryCurveModal from './components/HistoryCurveModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { message } from 'ant-design-vue';
 
   const props = defineProps({
     columnsType: {
@@ -72,7 +79,7 @@
   const globalConfig = inject('globalConfig');
   const alarmHistory = ref();
   const columns = ref([]);
-  const deviceOptions = ref([]);
+  const deviceOptions = ref<any>([]);
 
   const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
 
@@ -118,11 +125,12 @@
           strtype: item['strtype'],
           strinstallpos: item['strinstallpos'],
           devicekind: item['devicekind'],
+          stationtype: item['stationtype'],
         };
         // return { label: item['strname'], value: item['id']}
       });
     }
-    deviceOptions.value.unshift({ label: '--请选择设备--', value: '', strtype: '', strinstallpos: '', devicekind: '' });
+    deviceOptions.value.unshift({ label: '--请选择设备--', value: '', strtype: '', strinstallpos: '', devicekind: '', stationtype: '' });
     globalConfig.History_Type == 'vent' && deviceOptions.value[0]
       ? getForm().setFieldsValue({ deviceid: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '' })
       : getForm().setFieldsValue({ deviceid: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '' });
@@ -182,7 +190,7 @@
       columns: props.columnsType ? columns : (props.columns as any[]),
       canResize: true,
       showTableSetting: false,
-      showActionColumn: false,
+      showActionColumn: true,
       bordered: false,
       size: 'small',
       scroll: tableScroll,
@@ -282,6 +290,16 @@
   //注册table数据
   const [registerTable, { reload, setLoading, getForm }] = tableContext;
 
+  const [registerModal, { openModal }] = useModal();
+
+  function openHistoryCurve(record) {
+    if (['net'].includes(record.valuecode)) return message.info('该报警字段不支持历史曲线展示');
+    openModal(true, {
+      data: record,
+      device: deviceOptions.value[0],
+    });
+  }
+
   onMounted(async () => {
     await getDeviceList();
   });

src/views/vent/monitorManager/comment/comment.api.ts

@@ -9,6 +9,8 @@ enum Api {
   getInfo = '/safety/reportLocalData/queryReportData',
   getFileList = '/safety/reportLocalData/list',
   getGasDeviceInfo = '/monitor/getGasDeviceInfo',
+  listdays = '/safety/ventanalyMonitorData/listdays',
+  getHistoryData = '/monitor/history/getHistoryData',
 }
 
 /**
@@ -29,3 +31,5 @@ export const sysInput = (params) => defHttp.put({ url: Api.sysInput, params });
 export const getInfoList = (params) => defHttp.post({ url: Api.getInfo, params });
 export const getAllFileList = (params) => defHttp.get({ url: Api.getFileList, params });
 export const getGasDeviceInfo = (params) => defHttp.post({ url: Api.getGasDeviceInfo, params });
+export const getHistoryData = (params) => defHttp.post({ url: Api.getHistoryData, params });
+export const listdays = (params) => defHttp.get({ url: Api.listdays, params });

src/views/vent/monitorManager/comment/components/HistoryCurveModal.vue

@@ -0,0 +1,106 @@
+<template>
+  <BasicModal title="历史曲线" width="1000px" :height="600" v-bind="$attrs" @register="register">
+    <LineMulti
+      class="w-900px"
+      height="500px"
+      x-axis-prop-type="ttime"
+      :prop-type-arr="propTypeMap"
+      :chart-data="chartData"
+      :option="{ textStyle: { color: '#fff' }, legend: { textStyle: { color: '#fff', top: 10 } } }"
+    />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  /**
+   * 预警信息-历史曲线组件
+   *
+   * 使用方式，从外部使用 useModal 钩子并将 register 传入该组件
+   *
+   * 然后使用钩子提供的 openModal 并在调用时提供数据，数据参考下面 useModalInner 的回调
+   */
+  import { ref, defineEmits, computed } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import dayjs from 'dayjs';
+  import LineMulti from '/@/components/chart/LineMulti.vue';
+  import { getHistoryData, listdays } from '../comment.api';
+
+  const warningRecord = ref<{
+    starttime: string;
+    endtime: string;
+    deviceid: string;
+    devicename: string;
+    devicetype: string;
+    valuecode: string;
+    valuename: string;
+  }>();
+
+  const chartData = ref<any>();
+
+  defineEmits(['register']);
+
+  const [register] = useModalInner(({ data, device }) => {
+    warningRecord.value = data;
+    refresh(device);
+  });
+
+  const params = computed(() => {
+    if (!warningRecord.value) return {};
+    const { starttime, endtime = dayjs(), deviceid, devicetype } = warningRecord.value;
+
+    const gapstr = ['1s', '5s', '10s', '30s', '1m', '10m', '30m', '1h'];
+    const gaparr = [1000, 5000, 10000, 30000, 60000, 600000, 1800000, 3600000, Infinity];
+    // 需要根据预警信息的报警开始-报警结束（报警未解决即为当前时间）差值决定请求历史数据时使用的间隔
+    // 例如差值为20s，那么应以1s为间隔，如果为5h，那么应为30min，为10h则应为1h
+    // 如此，根据下面的逻辑获取到合适的间隔：
+    // 设大小间隔为x、y（例如x=1000ms,y=5000ms），已知时间轴最少应分10份，则时间差z >= 10x且z < 10y时可以取该间隔
+    const timediff = dayjs(endtime).diff(dayjs(starttime));
+    let interval = '1s';
+    for (let index = 0; index < gaparr.length - 1; index++) {
+      const x = gaparr[index];
+      const y = gaparr[index + 1];
+
+      if (timediff >= 10 * x && timediff < 10 * y) {
+        interval = gapstr[index];
+      }
+    }
+
+    return {
+      ttime_begin: starttime,
+      ttime_end: endtime,
+      gdeviceids: deviceid,
+      strtype: devicetype,
+      interval,
+    };
+  });
+
+  const propTypeMap = computed(() => {
+    if (!warningRecord.value) return new Map();
+    const { valuecode, valuename } = warningRecord.value;
+    return new Map([[valuecode, valuename]]);
+  });
+
+  async function refresh(device) {
+    let result: any = { records: [] };
+    if (device.stationtype === 'redis') {
+      result = await getHistoryData({
+        startTime: params.value.ttime_begin,
+        endTime: params.value.ttime_end,
+        deviceId: params.value.gdeviceids,
+        ...params.value,
+      });
+    } else {
+      result = await listdays(params.value).then((r) => {
+        if (r.datalist) return r.datalist;
+        return { total: 0, records: [] };
+      });
+    }
+    result.records.forEach((e) => {
+      return Object.assign(e, e.readData);
+    });
+    chartData.value = result.records;
+  }
+</script>
+<style scoped lang="less">
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+</style>