WholeProcessPlatform/frontend-sjgl/src/views/monitorData/VerticalTemp/VerticalTempSearch.vue

<template>
  <div class="approval-search">
    <BasicSearch
      ref="basicSearchRef"
      :searchList="searchList"
      :initial-values="initSearchData"
      :zhujianfujian="'fu'"
      @reset="handleResetWrapper"
      @finish="onSearchFinish"
      @values-change="onValuesChange"
      ><template #jcdt>
        <a-date-picker
          class="w-[160px]"
          v-model:value="jcdt.min"
          :format="timeFormat"
          value-format="YYYY-MM-DD HH:mm:ss"
          :picker="timePicker"
          :showTime="timeShowTime"
          :allow-clear="false"
          placeholder="起始时间"
          :showToday="false"
          :showNow="false"
        >
          <template #renderExtraFooter>
            <div class="flex items-center flex-wrap px-2">
              <span
                v-for="item in timeShortcutList"
                :key="item.label"
                @click="handleRangeClick(item)"
              >
                <a class="text-[#1890ff] mr-1"> {{ item.label }}</a>
              </span>
            </div>
          </template>
        </a-date-picker>
        至
        <a-form-item-rest>
          <a-date-picker
            class="w-[160px]"
            v-model:value="jcdt.max"
            :format="timeFormat"
            value-format="YYYY-MM-DD HH:mm:ss"
            :picker="timePicker"
            :showTime="timeShowTime"
            :disabledDate="disabledEndDate"
            :allow-clear="false"
            placeholder="结束时间"
            :showToday="false"
            :showNow="false"
          >
            <template #renderExtraFooter>
              <div class="flex items-center flex-wrap px-2">
                <span
                  v-for="item in timeShortcutList"
                  :key="item.label"
                  @click="handleRangeClick(item)"
                >
                  <a class="text-[#1890ff] mr-1"> {{ item.label }}</a>
                </span>
              </div>
            </template>
          </a-date-picker>
        </a-form-item-rest>
      </template>
      <template #actions>
        <a-button type="primary" @click="seeEdit">查看修改</a-button>
        <a-button danger :disabled="!selectedCount" @click="batchDelete"
          >批量删除</a-button
        >
        <a-button :loading="exportLoading" @click="exportBtn">导出</a-button>
      </template>
    </BasicSearch>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import BasicSearch from '@/components/BasicSearch/index.vue';
import { useTimeScale } from '@/store/composables/useTimeScale';
import { getSurfaceTempSectionList } from '@/api/DataQueryMenuModule';

const emit = defineEmits<{
  (e: 'export-btn'): void;
  (e: 'reset', values: any): void;
  (e: 'search-finish', values: any): void;
  (e: 'seeEdit'): void;
  (e: 'batch-delete'): void;
}>();

const basicSearchRef = ref<any>();
const btnLoading = ref<boolean>(false);

const props = defineProps<{
  exportLoading?: boolean;
  selectedCount?: number;
}>();

const initSearchData = {
  rvcd: 'all',
  rstcd: null,
  stcd: '008640202300001012',
  timeScale: 'tm'
};

const searchData = ref<any>({ ...initSearchData });

const {
  jcdt,
  currentTimeScale,
  timePicker,
  timeFormat,
  timeShowTime,
  timeShortcutList,
  handleRangeClick,
  disabledEndDate,
  handleSearchFinish,
  handleValuesChange,
  handleReset,
  init,
  setDefaultTimeRange
} = useTimeScale({
  defaultTimeScale: initSearchData.timeScale,
  onSearchFinish: values => emit('search-finish', values),
  onReset: () => emit('reset', initSearchData)
});
const crossSectionListLoading = ref<any>(false);
const crossSectionList = ref<any>([]);

const searchList: any = computed(() => [
  {
    type: 'waterStation',
    name: 'rvcd',
    label: '流域',
    placeholder: '请输入流域名称',
    fieldProps: {
      allowClear: true
    },
    options: []
  },
  {
    type: 'Select',
    name: 'stcd',
    label: '测站/断面名称',
    width: 180,
    placeholder: '请选择测站/断面名称',
    fieldProps: {
      allowClear: true
    },
    loading: crossSectionListLoading.value,
    options: crossSectionList.value.map(item => ({
      label: item.stnm,
      value: item.stcd
    }))
  },
  {
    type: 'Select',
    name: 'timeScale',
    label: '时间统计尺度',
    width: 80,
    placeholder: '请选择时间统计尺度',
    fieldProps: {
      allowClear: false
    },
    options: [
      {
        label: '小时',
        value: 'tm'
      },
      {
        label: '日',
        value: 'dt'
      },
      {
        label: '月',
        value: 'month'
      }
    ]
  },
  {
    type: 'custom',
    name: 'jcdt',
    label: '时间',
    fieldProps: {
      allowClear: false
    }
  }
]);

const onSearchFinish = (values: any) => {
  handleSearchFinish(values);
};

const exportBtn = () => {
  emit('export-btn');
};
const seeEdit = () => {
  emit('seeEdit');
};
const batchDelete = () => {
  emit('batch-delete');
};
const initCrossSectionList = params => {
  const filters = [
    {
      field: 'sttpFullPath',
      operator: 'contains',
      dataType: 'string',
      value: 'ENV,ENVM,WT,WTVT'
    },
    {
      field: 'sttpCode',
      operator: 'eq',
      dataType: 'string',
      value: 'WTVT'
    }
  ];
  if (params) {
    if (params.rvcd != '' && params.rvcd != 'all') {
      filters.push({
        field: 'rvcd',
        operator: 'contains',
        dataType: 'string',
        value: params.rvcd
      });
    }
    if (params.rstcd != '' && params.rstcd != null) {
      filters.push({
        field: 'rstcd',
        operator: 'contains',
        dataType: 'string',
        value: params.rstcd
      });
    }
  }
  crossSectionListLoading.value = true;
  getSurfaceTempSectionList({
    filter: {
      logic: 'and',
      filters: filters
    },
    select: ['stcd', 'stnm', 'wtDeviceType', 'dtinType', 'mway']
  }).then(res => {
    if (res.data?.data) {
      crossSectionList.value = res.data?.data;
    }
    crossSectionListLoading.value = false;
  });
};

const onValuesChange = (changedValues: any, allValues: any) => {
  // 当流域变化时，清空断面选中
  if ('rvcd' in changedValues || 'rstcd' in changedValues) {
    allValues.stcd = null;
    if (basicSearchRef.value?.formData) {
      basicSearchRef.value.formData.stcd = null;
    }
    initCrossSectionList(allValues);
  }

  handleValuesChange(changedValues, allValues);
  searchData.value = { ...searchData.value, ...allValues };
};

const handleResetWrapper = () => {
  // 手动重置内部状态，避免触发两次请求
  currentTimeScale.value = initSearchData.timeScale;
  setDefaultTimeRange(initSearchData.timeScale);
  // 触发搜索，使用当前状态而非 initSearchData
  handleSearchFinish({
    ...initSearchData,
    timeScale: currentTimeScale.value
  });
};

defineExpose({
  btnLoading,
  searchData
});

onMounted(() => {
  init();
  initCrossSectionList();
  // 使用 handleSearchFinish 确保包含 jcdt 等完整参数
  handleSearchFinish({ ...initSearchData });
});
</script>

<style lang="scss"></style>