Merge remote-tracking branch 'origin/test' into test

罗广辉

2025-06-21 f1c3131872fc49e58db3e7ef6bbc0ba124f9d93c

 src/views/dataCenter/components/searchData.vue

New file
@@ -0,0 +1,343 @@
<template>
  <div class="search-box-test">
    <el-form :model="searchForm" inline>
      <div class="search-first">
        <el-form-item label="行政区划:">
          <el-tree-select
            popper-class="custom-tree-select"
            v-model="searchForm.areaCode"
            :data="deptTreeData"
            :default-expanded-keys="[searchForm.areaCode]"
            check-strictly
            node-key="id"
            :props="treeProps"
            @node-click="handleNodeClick"
          />
        </el-form-item>
        <el-form-item label="所属机巢:">
          <el-select
            :teleported="false"
            v-model="searchForm.deviceSn"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in machineData"
              :key="item.device_sn"
              :label="item.nickname"
              :value="item.device_sn"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="任务名称:">
          <el-input v-model="searchForm.jobName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            popper-class="custom-date-picker"
            v-model="dateRange"
            type="daterange"
            :clearable="false"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :value-format="timeFormat"
            @change="handleDateChange"
            :popper-options="{
              modifiers: [
                {
                  name: 'flip',
                  options: {
                    fallbackPlacements: ['bottom-start'], // 优先向下弹出
                    allowedAutoPlacements: ['bottom-start'], // 禁止其他方向
                  },
                },
              ],
            }"
          />
        </el-form-item>
        <el-form-item label="文件格式:">
          <el-select
            :teleported="false"
            v-model="searchForm.resultType"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in fileFormatOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文件类别:">
          <el-select
            :teleported="false"
            v-model="searchForm.photoType"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in CategoryOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="search-first">
        <el-form-item label="文件名称:">
          <el-input v-model="searchForm.name" placeholder="请输入" clearable />
        </el-form-item>
        <div class="search-btn">
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">清空</el-button>
        </div>
      </div>
      <div class="search-first">
        <div class="search-btn">
          <el-button type="primary" icon="el-icon-download" @click="allDownloadFun">全部下载</el-button>
          <el-button type="success" plain icon="el-icon-download" @click="downloadFun">下载</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { pxToRem } from '@/utils/rem';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
import { useStore } from 'vuex';
import { getRegionTreeAll, getDeviceRegion, deptsByAreaCode } from '@/api/job/task';
const store = useStore();
const userAreaCode = computed(() => store.getters.userInfo.detail.areaCode);
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode);
const emit = defineEmits(['search','downFun','allDownFun']);
const treeProps = {
  label: 'name',
  value: 'id',
  children: 'childrens',
};
const fileFormatOption = [
{
    value: '',
    label: '全部',
  },
  {
    value: '0',
    label: '照片',
  },
  {
    value: '1',
    label: '视频',
  },
  {
    value: '2',
    label: 'AI识别',
  },
  {
    value: '5',
    label: '全景',
  },
  {
    value: '4',
    label: '正射',
  },
];
const CategoryOption = [
  {
    value: 'visible',
    label: '可见光',
  },
  {
    value: 'ir',
    label: '红外',
  },
];
const startTime = dayjs().subtract(6, 'day').startOf('day')
const endTime = dayjs().endOf('day')
const timeRange = [startTime.format('YYYY-MM-DD HH:mm:ss'), endTime.format('YYYY-MM-DD HH:mm:ss')]
const dateRange = ref(timeRange);
const timeFormat = 'YYYY-MM-DD HH:mm:ss';
const searchForm = reactive({
  jobName: '', //任务名称
  name: '', //文件名称
  areaCode: userAreaCode.value, // 区域code
  endTime:  endTime.format(timeFormat), // 结束时间
  startTime: startTime.format(timeFormat), // 开始时间
  deviceSn: '', // 所属机巢
  resultType: '', //文件格式
  photoType: '', //文件类别
});

// 部门
let deptTreeData = ref([]);
// 机巢
let machineData = ref([]);
let deptData = ref([]);
// 从单机巢任务传参值
const signDevice_sn = ref('');
// 日期限制
const handleDateChange = val => {
  if (val && val.length === 2) {
    const start = dayjs(val[0]);
    const end = dayjs(val[1]);
    const diff = end.diff(start, 'day');

    if (diff > 31) {
      ElMessage.warning('日期范围不能超过31天');
      dateRange.value = [];
      // 重置为默认时间范围
      setTimeout(() => {
        dateRange.value = timeRange;
      }, 0);
      return;
    }
    
    // 更新搜索表单中的时间
    searchForm.startTime = start.format(timeFormat);
    searchForm.endTime = end.format(timeFormat);
  }
  //handleSearch();
};
// 部门下得机巢
const requestDockInfo = () => {
  getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => {
    deptTreeData.value = res.data.data ? [res.data.data] : [];

    handleNodeClick({ id: userAreaCode.value });
  });
};
const handleNodeClick = async data => {
  // 处理机巢数据
  searchForm.deviceSn = '';
  machineData.value = '';

  const droneList = await getDeviceRegion({ areaCode: data.id });

  machineData.value = droneList?.data?.data;
  // 默认选中值
  if (signDevice_sn.value) {
    searchForm.deviceSn = signDevice_sn.value;
  }
  // 所属部门重新请求值
 
  deptData.value = [];
  getDeptsByAreaCode();
};
// 所属部门信息
const getDeptsByAreaCode = () => {
  deptsByAreaCode(searchForm.areaCode).then(res => {
    if (res.code !== 0) {
      deptData.value = res.data.data;
    }
  });
};
// 搜索
const handleSearch = () => {
  if (!dateRange.value) {
    dateRange.value = [];
  }
  let params = {
    ...searchForm,
    startTime: dateRange.value.length
      ? dayjs(dateRange?.value[0]).startOf('day').format(timeFormat)
      : null,
    endTime: dateRange.value.length
      ? dayjs(dateRange?.value[1]).endOf('day').format(timeFormat)
      : null,
  };
  // 调用父组件方法
  emit('search', params);
};
// 清空
const handleReset = () => {
  dateRange.value = timeRange;
searchForm.jobName = ''
searchForm.name = ''
searchForm.areaCode = userAreaCode.value
searchForm.endTime = endTime.format(timeFormat)
searchForm.startTime = startTime.format(timeFormat)
searchForm.deviceSn = ''
searchForm.resultType = ''
searchForm.photoType = ''
  handleNodeClick({ id: userAreaCode.value });
  handleSearch();
  
};
// 下载
const downloadFun =()=>{
  emit('downFun');
}
// 全部下载
const allDownloadFun =()=>{ 
    emit('allDownFun');
}
onMounted(() => {
  requestDockInfo();
});
</script>

<style scoped lang="scss">
.search-box-test {
  transition: all 0.3s;

  .search-first {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 7px; // 设置行间距和列间距
    margin-bottom: 10px;
    justify-content: space-between;

    .search-btn {
      margin-right: 32px;
    }
    .time-card {
      text-align: center;
      background: #ffffff;
      border-radius: 4px 0px 0px 4px;
      border: 1px solid #e5e5e5;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #7c8091;
      display: flex;
      height: 32px;

      .card-item {
        width: 60px;
        height: 100%;
        line-height: 32px;
        cursor: pointer;
      }

      .active {
        background: #ffffff;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #1c5cff;
        color: #1441ff;
      }
    }
  }

  :deep(.el-form) {
    :deep(.el-input__wrapper.is-disabled) {
      box-shadow: 0 0 0 1px #026ad6;
    }

    .el-form-item {
      margin-bottom: 0;
      width: 233px;

      .el-form-item__label {
        color: #363636;
        line-height: 32px;
      }
    }
  }
}
</style>