From f1c3131872fc49e58db3e7ef6bbc0ba124f9d93c Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 21 Jun 2025 11:04:05 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/test' into test
---
src/views/dataCenter/components/searchData.vue | 343 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 343 insertions(+), 0 deletions(-)
diff --git a/src/views/dataCenter/components/searchData.vue b/src/views/dataCenter/components/searchData.vue
new file mode 100644
index 0000000..b2ec5a7
--- /dev/null
+++ b/src/views/dataCenter/components/searchData.vue
@@ -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>
--
Gitblit v1.9.3