[Feat 0000]测风装置历史数据多选查询功能优化

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

@@ -61,7 +61,8 @@ import { useMethods } from '/@/hooks/system/useMethods';
 import BarAndLine from '/@/components/chart/BarAndLine.vue';
 import { getDictItemsByCode } from '/@/utils/dict';
 import { get } from 'lodash-es';
-
+import { usePermission } from '/@/hooks/web/usePermission';
+const { hasPermission } = usePermission();
 const globalConfig = inject('globalConfig');
 const props = defineProps({
   columnsType: {
@@ -127,7 +128,6 @@ const intervalMap = new Map([
   ['8', '1h'],
   ['9', '1d'],
 ]);
-
 const getExportXlsUrl = () => {
   if (stationType.value !== 'redis') {
     return '/safety/ventanalyMonitorData/export/historydata';
@@ -136,7 +136,10 @@ const getExportXlsUrl = () => {
   }
 };
 const emit = defineEmits(['change']);
-
+const hasWindRectPermission = hasPermission('windrect:hasMultipleChoice');
+const hasMultipleChoice = computed(() => {
+  return hasWindRectPermission && props.deviceType === 'windrect';
+});
 const historyType = ref('');
 const deviceKide = ref('');
 const columns = ref([]);
@@ -319,7 +322,14 @@ async function getDeviceList() {
         readData: item['readData'],
       };
     });
-
+    if (hasMultipleChoice.value) {
+      deviceOptions.value.unshift({
+        label: '全部',
+        value: 'ALL',
+        strtype: deviceOptions.value[0]?.strtype || '',
+        stationtype: deviceOptions.value[0]?.stationtype || 'plc1',
+      });
+    }
     stationType.value = deviceOptions.value[0]['stationtype'];
     if (props.deviceType.startsWith('vehicle')) {
       historyType.value = 'vehicle';
@@ -335,7 +345,7 @@ async function getDeviceList() {
   }
   if (VENT_PARAM.historyIsMultiple) {
     await getForm().setFieldsValue({
-      gdeviceids: [props.deviceId ? props.deviceId : deviceOptions.value[0] ? deviceOptions.value[0]['value'] : ''],
+      gdeviceids: [props.deviceId ? props.deviceId : deviceOptions.value[1] ? deviceOptions.value[1]['value'] : ''],
     });
     await getForm().updateSchema({
       field: 'gdeviceids',
@@ -346,7 +356,7 @@ async function getDeviceList() {
     });
   } else {
     await getForm().setFieldsValue({
-      gdeviceids: props.deviceId ? props.deviceId : deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
+      gdeviceids: props.deviceId ? props.deviceId : deviceOptions.value[1] ? deviceOptions.value[1]['value'] : '',
     });
     await getForm().updateSchema({
       field: 'gdeviceids',
@@ -360,6 +370,19 @@ function resetFormParam() {
   formData['pageNo'] = pagination['current'];
   formData['pageSize'] = pagination['pageSize'];
   formData['column'] = 'createTime';
+  let gdeviceids = formData['gdeviceids'];
+  let realDeviceIds = [];
+  if (gdeviceids) {
+    if (Array.isArray(gdeviceids)) {
+      realDeviceIds = gdeviceids;
+    } else {
+      realDeviceIds = String(gdeviceids)
+        .split(',')
+        .map((i) => i.trim());
+    }
+  }
+  realDeviceIds = realDeviceIds.filter((id) => id && id !== 'ALL' && id !== '');
+  const deviceIdStr = realDeviceIds.join(',');
   if (stationType.value !== 'redis' && deviceOptions.value[0]) {
     formData['strtype'] = deviceTypeStr.value
       ? deviceTypeStr.value
@@ -369,6 +392,7 @@ function resetFormParam() {
     if (props.sysId) {
       formData['sysId'] = props.sysId;
     }
+    formData['gdeviceids'] = deviceIdStr;
     return formData;
   } else {
     const params = {
@@ -377,16 +401,15 @@ function resetFormParam() {
       column: pagination['createTime'],
       startTime: formData['ttime_begin'],
       endTime: formData['ttime_end'],
-      deviceId: formData['gdeviceids'],
+      deviceId: deviceIdStr,
       strtype: props.deviceType + '*',
       sysId: props.sysId,
-      interval: intervalMap.get(formData['skip']) ? intervalMap.get(formData['skip']) : '1h',
+      interval: intervalMap.get(formData['skip']) || '1h',
       isEmployee: props.deviceType.startsWith('vehicle') ? false : true,
     };
     return params;
   }
 }
-
 async function getDataSource() {
   dataSource.value = [];
   setLoading(true);
@@ -474,30 +497,73 @@ const { tableContext, onExportXls, onExportXlsPost } = useListPage({
                 field: 'gdeviceids',
                 component: 'Select',
                 required: true,
-                componentProps: {
-                  showSearch: true,
-                  filterOption: (input: string, option: any) => {
-                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-                  },
-                  options: deviceOptions,
-                  onChange: (e, option) => {
-                    if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind'])) {
-                      historyType.value = option['strtype'] || option['devicekind'];
-                    }
-                    if (option['strtype']) {
-                      deviceTypeStr.value = option['strtype'];
-                    }
-                    stationType.value = option['stationtype'];
-                    nextTick(() => {
-                      showCurve.value = calcShowCurveValue();
-                      initHistoryCurveColumns();
-                      getDataSource();
-                    });
-                  },
-                },
-                colProps: {
-                  span: 5,
-                },
+                componentProps: computed(() => {
+                  const isMultiple = hasMultipleChoice.value;
+                  const ALL_VALUE = 'ALL';
+
+                  return {
+                    showSearch: true,
+                    mode: isMultiple ? 'multiple' : undefined,
+                    multiple: isMultiple,
+                    maxTagCount: 1,
+                    maxTagPlaceholder: (omittedValues) => `+ ${omittedValues.length} 项已选择`,
+                    optionType: isMultiple ? 'checkbox' : undefined,
+                    filterOption: (input: string, option: any) => {
+                      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+                    },
+                    options: deviceOptions,
+
+                    onChange: (valueList, selectedOptions) => {
+                      const form = getForm();
+                      if (!isMultiple) {
+                        const lastOption = selectedOptions;
+                        if (lastOption) {
+                          historyType.value = lastOption.strtype || lastOption.devicekind;
+                          deviceTypeStr.value = lastOption.strtype;
+                          stationType.value = lastOption.stationtype;
+                        }
+                        nextTick(() => {
+                          showCurve.value = calcShowCurveValue();
+                          initHistoryCurveColumns();
+                          getDataSource();
+                        });
+                        return;
+                      }
+                      const userSelectedIds = valueList.filter((id) => id !== ALL_VALUE);
+                      const allRealIds = deviceOptions.value.filter((o) => o.value !== ALL_VALUE).map((o) => o.value);
+                      const justClickedAll = valueList.at(-1) === ALL_VALUE;
+                      const isAllChecked = valueList.includes(ALL_VALUE);
+
+                      // 1. 手动点了【全部】→ 全选
+                      if (justClickedAll) {
+                        form.setFieldsValue({
+                          gdeviceids: [ALL_VALUE, ...allRealIds],
+                        });
+                      } else if (isAllChecked && userSelectedIds.length < allRealIds.length) {
+                        form.setFieldsValue({
+                          gdeviceids: userSelectedIds,
+                        });
+                      } else if (!isAllChecked && userSelectedIds.length === allRealIds.length && allRealIds.length > 0) {
+                        form.setFieldsValue({
+                          gdeviceids: [ALL_VALUE, ...userSelectedIds],
+                        });
+                      }
+                      const realOptions = selectedOptions?.filter((o) => o.value !== ALL_VALUE);
+                      const lastOption = realOptions?.at(-1);
+                      if (lastOption) {
+                        historyType.value = lastOption.strtype || lastOption.devicekind;
+                        deviceTypeStr.value = lastOption.strtype;
+                        stationType.value = lastOption.stationtype;
+                      }
+                      nextTick(() => {
+                        showCurve.value = calcShowCurveValue();
+                        initHistoryCurveColumns();
+                        getDataSource();
+                      });
+                    },
+                  };
+                }),
+                colProps: { span: 5 },
               },
               {
                 label: '间隔时间',