feat: 巡检任务情况详情弹框

张含笑

2025-04-09 0c8e9171680e32e16ea30d524f09ed3987eebc66

feat: 巡检任务情况详情弹框

 src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue

@@ -14,22 +14,26 @@
                    <el-input v-model="searchForm.key_word" placeholder="请输入任务/机巢名称" clearable />
                </el-form-item>
                <el-form-item label="关联算法">
                    <el-select v-model="searchForm.ai_type" placeholder="请选择"> </el-select>
                    <el-select v-model="searchForm.ai_types" placeholder="请选择">
                        <el-option v-for="item in taskAlgorithm" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
                    </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-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </div>
            <div class="search-row">
                <el-form-item label="选择机巢">
                    <el-select v-model="searchForm.ai_type" placeholder="请选择"> </el-select>
                    <el-select v-model="searchForm.device_sn" placeholder="请选择">
                        <el-option
                            v-for="item in deviceList"
                            :label="item.nickname"
                            :value="item.device_sn"
                            :key="item.device_sn"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
@@ -50,22 +54,20 @@
        </el-form>
        <!-- 表格 -->
        <el-table :data="taskDetailData" style="width: 100%">
            <el-table-column label="序号">
            <el-table-column label="序号" width="60">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                    {{ (taskDetailParams.page - 1) * taskDetailParams.limit + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="任务编号" />
            <el-table-column prop="job_info_num" label="任务编号" />
            <el-table-column prop="name" label="任务名称" />
            <el-table-column prop="name" label="所属机巢" />
            <el-table-column prop="name" label="关联算法" />
            <el-table-column prop="name" label="任务状态" />
            <el-table-column prop="name" label="任务类型" />
            <el-table-column prop="name" label="任务时间" />
            <el-table-column prop="device_names" label="所属机巢" />
            <el-table-column prop="ai_type_str" label="关联算法" />
            <el-table-column prop="status" label="任务状态" />
            <el-table-column prop="industry_type_str" label="任务类型" />
            <el-table-column prop="begin_time" label="任务时间" />
            <el-table-column prop="name" label="关联事件" />
            <el-table-column label="操作">
                <el-button link type="primary" size="small">查看</el-button></el-table-column
            >
            <el-table-column label="操作"> <el-button link type="primary" size="small">查看</el-button></el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
@@ -75,9 +77,8 @@
                :page-sizes="[10, 20, 30, 50]"
                background
                :disabled="disabled"
				
                layout="total, sizes, prev, pager, next, jumper"
                :total="100"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
@@ -86,18 +87,18 @@
</template>
<script setup>
import { pxToRem } from '@/utils/rem'
import { jobList } from '@/api/home/task'
import { getDictionary } from '@/api/system/dict'
import { selectDevicePage } from '@/api/home/machineNest'
import { getMultipleDictionary } from '@/api/system/dictbiz'
const isShowDetailsDialog = defineModel('show')
const dateRange = ref('')
const searchForm = reactive({
    key_word: '', // 模糊搜索关键词（匹配名称/昵称/设备sn）
    ai_type: '', // 算法类型
    area_code: '', // 区域code
    create_dept: '', // 创建部门
    date_enum: '', // 日期枚举,可用值:TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR
    ai_types: [], // 算法类型
    device_sn: '', // 设备编号
    end_date: '', // 结束时间
    industry_type: '', // 行业key
    start_date: '', // 开始时间
    end_date: null, // 结束时间
    start_date: null, // 开始时间
    status: '', // 作业状态
})
const statusOptions = [
@@ -107,35 +108,103 @@
    { label: '已取消', value: 4 },
    { label: '执行失败', value: 5 },
]
// 设备页面参数
const devicePageParams = ref({
    current: 1,
    size: 10,
    total: 0,
    nickname: '',
})
const deviceList = ref([])
// 表格
const taskDetailData = ref([])
// 表格参数
const taskDetailParams = reactive({
    page: 1,
    limit: 10,
    searchParams: {},
})
// 分页
const total = ref(0)
// 分页参数
let pageParams = reactive({
    page: 1,
    limit: 10,
})
// 日期选择
const changeselect = () => {
    console.log('changedata', dateRange.value)
    searchForm.start_date = dateRange.value.length ? `${dateRange.value[0]} 00:00:00` : null
    searchForm.end_date = dateRange.value.length ? `${dateRange.value[1]} 00:00:00` : null
}

// 重置
const handleReset = () => {
    console.log('重置')
    dateRange.value = null
    Object.keys(searchForm).forEach(key => {
        if (key == 'start_date' || key == 'end_date') {
            searchForm[key] = null
        } else if (key == 'ai_types') {
            searchForm[key] = []
        } else {
            searchForm[key] = ''
        }
    })

    handleSearch()
}
// 查询
const handleSearch = () => {
    console.log('查询')
    taskDetailParams.page = 1
    taskDetailParams.limit = 10
    taskDetailParams.searchParams = searchForm
    console.log('taskDetailParams.value', taskDetailParams)
    getJobList()
}
// 表格
const taskDetailData = ref([])
// 分页
const total = ref(0);
// 分页参数
let pageParams = reactive({
  page: 1,
  limit: 10
});
// 分页大小改变
const handleSizeChange =(val)=>{
     pageParams.limit = val;
const handleSizeChange = val => {
    pageParams.limit = val
    getJobList()
}
// 页码改变
const handleCurrentChange =(val)=>{
     pageParams.page = val;
const handleCurrentChange = val => {
    pageParams.page = val
    getJobList()
}
// 获取任务列表
const getJobList = () => {
    jobList(taskDetailParams).then(res => {
        if (res.data.code !== 0) return
        taskDetailData.value = res.data.data.records
        total.value = res.data.data.total
    })
}
// 机巢列表数据
const getDeviceList = async () => {
    const res = await selectDevicePage({ current: 1, size: 99999, type: 1 })
    deviceList.value = res.data?.data?.records || []
}
// 关联算法

let taskBusiness = ref([])
let taskAlgorithm = ref([])
// 请求字典字段
const requestDictionary = () => {
    getMultipleDictionary('SF,HYLB').then(res => {
        if (res.code !== 0) {
            // 处理数据
            taskAlgorithm.value = res.data.data['SF']
            taskBusiness.value = res.data.data['HYLB']
        }
    })
}
const algorithmChange = val => {
    searchForm.ai_types = val
}
onMounted(() => {
    requestDictionary()
    getJobList()
    getDeviceList()
})
</script>
<style scoped lang="scss">
.search-row {
@@ -174,7 +243,6 @@
    }
}
.pagination {
margin-top: 20px;

    margin-top: 20px;
}
</style>