From c832bf2e80ac465e71b7a1c1f7a59d4252030989 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 05 Aug 2025 17:33:08 +0800
Subject: [PATCH] feat:事件工单滚动条
---
src/views/dataCenter/components/searchData.vue | 146 +++++++++++++++++++++++++++++++++---------------
1 files changed, 100 insertions(+), 46 deletions(-)
diff --git a/src/views/dataCenter/components/searchData.vue b/src/views/dataCenter/components/searchData.vue
index a8a9ac0..2c4d8c2 100644
--- a/src/views/dataCenter/components/searchData.vue
+++ b/src/views/dataCenter/components/searchData.vue
@@ -5,9 +5,9 @@
<el-form-item label="行政区划:">
<el-tree-select
popper-class="custom-tree-select"
- v-model="searchForm.area_code"
+ v-model="searchForm.areaCode"
:data="deptTreeData"
- :default-expanded-keys="[searchForm.area_code]"
+ :default-expanded-keys="[searchForm.areaCode]"
check-strictly
node-key="id"
:props="treeProps"
@@ -17,7 +17,7 @@
<el-form-item label="所属机巢:">
<el-select
:teleported="false"
- v-model="searchForm.device_sn"
+ v-model="searchForm.deviceSn"
placeholder="请选择"
clearable
>
@@ -30,13 +30,14 @@
</el-select>
</el-form-item>
<el-form-item label="任务名称:">
- <el-input v-model="searchForm.taskName" placeholder="请输入" clearable />
+ <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="true"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@@ -58,7 +59,7 @@
<el-form-item label="文件格式:">
<el-select
:teleported="false"
- v-model="searchForm.formatValue"
+ v-model="searchForm.resultType"
placeholder="请选择"
clearable
>
@@ -67,15 +68,18 @@
:key="item.value"
:label="item.label"
:value="item.value"
+ :disabled="searchForm.photoType !== '' && item.value === '4'"
/>
</el-select>
</el-form-item>
<el-form-item label="文件类别:">
<el-select
+ :disabled="disabled"
:teleported="false"
- v-model="searchForm.categoryValue"
+ v-model="searchForm.photoType"
placeholder="请选择"
clearable
+ @clear="changePhotoType"
>
<el-option
v-for="item in CategoryOption"
@@ -88,7 +92,7 @@
</div>
<div class="search-first">
<el-form-item label="文件名称:">
- <el-input v-model="searchForm.fileName" placeholder="请输入" clearable />
+ <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>
@@ -97,8 +101,12 @@
</div>
<div class="search-first">
<div class="search-btn">
- <el-button type="primary" icon="el-icon-download">全部下载</el-button>
- <el-button type="success" plain icon="el-icon-download">下载</el-button>
+ <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>
@@ -111,10 +119,27 @@
import dayjs from 'dayjs';
import { useStore } from 'vuex';
import { getRegionTreeAll, getDeviceRegion, deptsByAreaCode } from '@/api/job/task';
+import { watch } from 'vue';
const store = useStore();
const userAreaCode = computed(() => store.getters.userInfo.detail.areaCode);
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode);
-const emit = defineEmits(['search']);
+const emit = defineEmits(['search', 'downFun', 'allDownFun']);
+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: '', //文件类别
+});
+const disabled = ref(false);
const treeProps = {
label: 'name',
value: 'id',
@@ -122,49 +147,58 @@
};
const fileFormatOption = [
{
- value: '照片',
+ value: '',
+ label: '全部',
+ },
+ {
+ value: '0',
label: '照片',
},
{
- value: '视频',
+ value: '1',
label: '视频',
},
{
- value: 'AI识别',
+ value: '2',
label: 'AI识别',
},
{
- value: '全景',
+ value: '5',
label: '全景',
+
},
{
- value: '正射',
+ value: '4',
label: '正射',
+
},
];
const CategoryOption = [
{
- value: '可见光',
+ value: 'visible',
label: '可见光',
},
{
- value: '红外',
+ value: 'ir',
label: '红外',
},
];
-const searchForm = reactive({
- taskName: '', //任务名称
- fileName: '', //文件名称
- area_code: userAreaCode.value, // 区域code
- create_dept: '', // 创建部门
- end_date: null, // 结束时间
- start_date: null, // 开始时间
- device_sn: '', // 所属机巢
- formatValue: '', //文件格式
- categoryValue: '', //文件类别
-});
-const dateRange = ref([]);
-const timeFormat = 'YYYY-MM-DD HH:mm:ss';
+watch(
+ () => searchForm.resultType,
+ newVal => {
+ if (newVal === '4') {
+ disabled.value = true;
+ } else {
+ disabled.value = false;
+ }
+ },
+ { deep: true }
+);
+const changePhotoType =(val)=>{
+if(val === undefined){
+ searchForm.photoType = ''
+}
+}
// 部门
let deptTreeData = ref([]);
// 机巢
@@ -178,14 +212,22 @@
const start = dayjs(val[0]);
const end = dayjs(val[1]);
const diff = end.diff(start, 'day');
-
- if (diff > 31) {
- ElMessage.warning('日期范围不能超过31天');
+ const maxDays = 365;
+ if (diff > maxDays) {
+ ElMessage.warning('日期范围不能超过一年');
dateRange.value = [];
+ // 重置为默认时间范围
+ setTimeout(() => {
+ dateRange.value = timeRange;
+ }, 0);
return;
}
+
+ // 更新搜索表单中的时间
+ searchForm.startTime = start.format(timeFormat);
+ searchForm.endTime = end.format(timeFormat);
}
- handleSearch();
+
};
// 部门下得机巢
const requestDockInfo = () => {
@@ -197,7 +239,7 @@
};
const handleNodeClick = async data => {
// 处理机巢数据
- searchForm.device_sn = '';
+ searchForm.deviceSn = '';
machineData.value = '';
const droneList = await getDeviceRegion({ areaCode: data.id });
@@ -205,16 +247,16 @@
machineData.value = droneList?.data?.data;
// 默认选中值
if (signDevice_sn.value) {
- searchForm.device_sn = signDevice_sn.value;
+ searchForm.deviceSn = signDevice_sn.value;
}
// 所属部门重新请求值
- searchForm.create_dept = '';
+
deptData.value = [];
getDeptsByAreaCode();
};
// 所属部门信息
const getDeptsByAreaCode = () => {
- deptsByAreaCode(searchForm.area_code).then(res => {
+ deptsByAreaCode(searchForm.areaCode).then(res => {
if (res.code !== 0) {
deptData.value = res.data.data;
}
@@ -227,26 +269,38 @@
}
let params = {
...searchForm,
- start_date: dateRange.value.length
+ startTime: dateRange.value.length
? dayjs(dateRange?.value[0]).startOf('day').format(timeFormat)
: null,
- end_date: dateRange.value.length
+ endTime: dateRange.value.length
? dayjs(dateRange?.value[1]).endOf('day').format(timeFormat)
: null,
};
- console.log('searchForm', params);
// 调用父组件方法
emit('search', params);
};
-// 重置
+// 清空
const handleReset = () => {
- dateRange.value = [];
- Object.keys(searchForm).forEach(key => {
- searchForm[key] = '';
- });
+ 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();
});
--
Gitblit v1.9.3