<template>
|
<div class="search-box">
|
<el-form :model="searchForm" inline>
|
<el-form-item label="任务名称">
|
<el-input v-model="searchForm.name" placeholder="请输入任务名称" clearable />
|
</el-form-item>
|
<el-form-item label="所属部门">
|
<el-select
|
v-model="searchForm.deptId"
|
placeholder="请选择部门"
|
clearable
|
>
|
<el-tree-select
|
v-model="searchForm.deptId"
|
:data="deptTreeData"
|
node-key="id"
|
:props="{
|
label: 'name',
|
children: 'children'
|
}"
|
check-strictly
|
clearable
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="周期">
|
<el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
|
<el-option label="日" value="日" />
|
<el-option label="周" value="周" />
|
<el-option label="月" value="月" />
|
<el-option label="年" value="年" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="任务状态">
|
<el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
|
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="任务时间">
|
<el-date-picker
|
v-model="searchForm.dateRange"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="YYYY-MM-DD"
|
/>
|
</el-form-item>
|
<el-form-item label="任务算法">
|
<el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
|
<el-option label="识别火情" value="日" />
|
<el-option label="识别车辆" value="周" />
|
<el-option label="识别船只" value="月" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
<script setup>
|
import { getDictionary, deptsByAreaCode, getDockInfo } from '@/api/home/common';
|
|
|
const searchForm = reactive({
|
name: '',
|
job_info_num: '',
|
status: '',
|
dateRange: []
|
});
|
const statusOptions = [
|
{ label: '待执行', value: 1 },
|
{ label: '执行中', value: 2 },
|
{ label: '已完成', value: 3 },
|
{ label: '已取消', value: 4 },
|
{ label: '执行失败', value: 5 }
|
];
|
|
// 部门以及机巢
|
const deptTreeData = ref([]);
|
|
const emit = defineEmits(['search']);
|
|
const handleSearch = () => {
|
emit('search', {
|
...searchForm,
|
begin_time: searchForm.dateRange[0],
|
end_time: searchForm.dateRange[1]
|
});
|
};
|
|
const handleReset = () => {
|
searchForm.name = '';
|
searchForm.job_info_num = '';
|
searchForm.status = '';
|
searchForm.dateRange = [];
|
handleSearch();
|
};
|
|
// 请求字典字段
|
const requestDictionary = () => {
|
getDictionary('SF,HYLB').then((res) => {
|
if (res.data.code !== 0) {
|
// 处理数据
|
console.log('111111',res.data)
|
}
|
});
|
};
|
|
// 处理部门数据为树形结构
|
const handleDeptData = (data) => {
|
const buildTree = (items, parentId = 0) => {
|
const result = [];
|
for (const item of items) {
|
if (item.parent_id === parentId) {
|
const children = buildTree(items, item.id);
|
if (children.length) {
|
item.children = children;
|
}
|
result.push(item);
|
}
|
}
|
return result;
|
};
|
return buildTree(data);
|
};
|
// 部门信息
|
const getDeptsByAreaCode = () => {
|
deptsByAreaCode().then((res) => {
|
if (res.data.code !== 0) {
|
deptTreeData.value = res.data;
|
// 处理数据
|
console.log('22222',res.data)
|
}
|
});
|
};
|
|
// 机巢信息
|
const requestDockInfo = () => {
|
getDockInfo().then((res) => {
|
if (res.data.code !== 0) {
|
// 处理数据
|
console.log('33333',res.data)
|
}
|
});
|
};
|
|
|
onMounted(() => {
|
requestDictionary();
|
deptsByAreaCode();
|
requestDockInfo();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.search-box {
|
position: absolute;
|
top: 120px;
|
left: 450px;
|
width: calc(100% - 400px - 400px - 100px);
|
height:60px;
|
color: #fff;
|
background: rgba(31, 62, 122, 0.35);
|
padding: 10px 20px;
|
|
:deep(.el-form) {
|
--el-text-color-regular: #fff;
|
|
.el-form-item {
|
margin-bottom: 0;
|
margin-right: 20px;
|
|
.el-form-item__label {
|
color: #fff;
|
}
|
|
.el-input,
|
.el-select,
|
.el-date-editor {
|
width: 200px;
|
--el-input-bg-color: transparent;
|
--el-input-border-color: rgba(255, 255, 255, 0.3);
|
--el-input-text-color: #fff;
|
--el-input-placeholder-color: rgba(255, 255, 255, 0.5);
|
}
|
}
|
}
|
}
|
</style>
|
