[Feat 0000] 历史数据针对安全监控历史数据动态展示曲线进行开发

src/views/vent/monitorManager/balancePressMonitor/components/balancePressHistory.vue

@@ -7,12 +7,12 @@
       designScope="pressurefan_history"
       :scroll="{ y: 650 }"
       :only-bouned-devices="true"
-      :show-history-curve="showHistoryCurve"
+      :show-history-curve="true"
     />
   </div>
 </template>
 <script setup lang="ts">
-  import { defineProps, computed } from 'vue';
+  import { defineProps } from 'vue';
   import HistoryTable from '../../comment/HistoryTable.vue';
   // import { getTableList } from '../balancePress.api'
 
@@ -26,11 +26,6 @@
       required: true,
     },
   });
-
-  const showHistoryCurve = computed(() => {
-    const arr = ['safetymonitor', 'windrect'];
-    return arr.some((e) => props.deviceType.startsWith(e));
-  });
 </script>
 <style lang="less" scoped>
   .history-box {

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

@@ -1,6 +1,6 @@
 <template>
   <div class="history-table" v-if="loading">
-    <BasicTable ref="historyTable" @register="registerTable" :data-source="dataSource">
+    <BasicTable ref="historyTable" @register="registerTable" :data-source="dataSource" :scroll="tableScroll">
       <template #bodyCell="{ column, record }">
         <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
           record.warnFlag == '0' ? '正常' : '报警'
@@ -23,15 +23,21 @@
       </template>
     </BasicTable>
     <BarAndLine
-      v-if="showHistoryCurve"
+      v-if="showCurve"
       :charts-columns="chartsColumns"
       :option="{
         legend: {
           top: '5',
         },
+        grid: {
+          top: 50,
+          left: 200,
+          right: 200,
+          bottom: 50,
+        },
       }"
       :data-source="dataSource"
-      height="250px"
+      height="300px"
       x-axis-prop-type="ttime"
     />
   </div>
@@ -50,6 +56,8 @@
   import { render } from '/@/utils/common/renderUtils';
   import { useMethods } from '/@/hooks/system/useMethods';
   import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { getDictItemsByCode } from '/@/utils/dict';
+  import { get } from 'lodash-es';
 
   const globalConfig = inject('globalConfig');
   const props = defineProps({
@@ -129,7 +137,6 @@
   const historyType = ref('');
   const deviceKide = ref('');
   const columns = ref([]);
-  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
   let deviceOptions = ref([]);
   const deviceTypeStr = ref('');
   const deviceTypeName = ref('');
@@ -137,6 +144,17 @@
   const chartsColumns = ref([]);
   loading.value = true;
 
+  const selectedOption = computed<Record<string, any> | undefined>(() => {
+    let idval: string | undefined = getForm()?.getFieldsValue()?.gdeviceids;
+    if (VENT_PARAM.historyIsMultiple && idval) {
+      const arr = idval.split(',');
+      idval = arr[arr.length - 1];
+    }
+    return deviceOptions.value.find((e: any) => {
+      return e.value === idval;
+    });
+  });
+
   watch(
     () => {
       return props.columnsType;
@@ -188,21 +206,45 @@
     }
     if (props.showHistoryCurve) {
       const arr = type.split('_');
-      chartsColumns.value = getTableHeaderColumns(arr[0] + '_chart');
+      // 没错，又是安全监控。安全监控的单位无法一次定好，所以根据返回的数据协定单位
+      if (props.deviceType.startsWith('safetymonitor')) {
+        chartsColumns.value = getTableHeaderColumns(arr[0] + '_chart').map((e) => {
+          const unit = get(selectedOption.value, 'readData.unit', e.unit);
+          return {
+            ...e,
+            unit: unit,
+            seriesName: unit,
+          };
+        });
+      } else {
+        chartsColumns.value = getTableHeaderColumns(arr[0] + '_chart');
+      }
     }
     setColumns(columns.value);
   });
 
-  watch(
-    () => props.scroll.y,
-    (newVal) => {
-      if (newVal) {
-        tableScroll.value = { y: newVal - 100 };
-      } else {
-        tableScroll.value = {};
-      }
-    }
-  );
+  // 是否显示历史曲线，在devices_shows_history_curve字典里可以配置哪些设备类型需要显示曲线
+  // 字典内的字段可以是前缀，例如fanlocal之于fanlocal_normal
+  // 安全监控设备需要更多的配置，除去配置safetymonitor，还需要配置哪些安全监控设备需要曲线
+  // 因此可以配置例如A1001的dataTypeName代码（可以查看真实数据参考）
+  const historyCurveDicts = getDictItemsByCode('devices_shows_history_curve');
+  const findDict = (str) => historyCurveDicts.some(({ value }) => str.startsWith(value));
+  const showCurve = computed(() => {
+    if (!props.showHistoryCurve) return false;
+    const dt = props.deviceType; // 依赖项
+
+    if (!findDict(dt)) return false;
+    if (!dt.startsWith('safetymonitor')) return true;
+
+    // 和字典的设备类型匹配后，如果是安全监控设备，需要额外的匹配安全监控类型
+    const dtns = get(selectedOption.value, 'readData.dataTypeName', ''); // 依赖项
+    return findDict(dtns);
+  });
+  const tableScroll = computed(() => {
+    if (props.scroll.y && showCurve.value) return { y: props.scroll.y - 450 };
+    if (props.scroll.y) return { y: props.scroll.y - 100 };
+    return {};
+  });
 
   // watch(stationType, (type) => {
   //   if (type) {
@@ -266,6 +308,7 @@
           strinstallpos: item['strinstallpos'],
           devicekind: item['devicekind'],
           stationtype: item['stationtype'],
+          readData: item['readData'],
         };
       });
 
@@ -362,7 +405,6 @@
       showActionColumn: false,
       bordered: false,
       size: 'small',
-      scroll: tableScroll,
       showIndexColumn: true,
       tableLayout: 'auto',
       formConfig: {
@@ -425,9 +467,12 @@
                     },
                     options: deviceOptions,
                     onChange: (e, option) => {
-                      if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind']))
+                      if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind'])) {
                         historyType.value = option['strtype'] || option['devicekind'];
-                      if (option['strtype']) deviceTypeStr.value = option['strtype'];
+                      }
+                      if (option['strtype']) {
+                        deviceTypeStr.value = option['strtype'];
+                      }
                       stationType.value = option['stationtype'];
                       nextTick(async () => {
                         await getDataSource();