<template>
|
<div class="task-container">
|
|
<!-- 时间段设置弹窗 -->
|
<el-dialog title="时间段" :visible.sync="timeDialogVisible" custom-class="time-dialog" width="900px">
|
<time-span v-model="taskForm.workTime" @confirm="confirmTimePeriods" :visible="this.timeDialogVisible" />
|
<span slot="footer">
|
<el-button @click="timeDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="timeDialogVisible = false">确定</el-button>
|
</span>
|
</el-dialog>
|
|
<!-- 新增查看详情弹窗 -->
|
<el-dialog title="任务详情" :visible.sync="viewDialogVisible" width="800px" custom-class="view-dialog"
|
@open="handleDialogOpen" @closed="handleDialogClose">
|
<el-form :model="currentTask" label-width="100px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="任务名称" prop="taskName">
|
<el-input v-model="currentTask.taskName" :readonly="true"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="事件等级" prop="eventLevel">
|
<el-select v-model="currentTask.eventLevel" placeholder="请选择" disabled>
|
<el-option v-for="item in levelOptions" :key="item.dictId" :label="item.dictValue"
|
:value="item.dictId"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<!-- 工作时间 -->
|
<el-row :gutter="20">
|
|
<el-form-item label="工作时间" prop="workingTimes">
|
<el-col :span="20">
|
<el-select v-model="currentTask.workingTimes" placeholder="请选择或设置时间段" multiple disabled>
|
<el-option v-for="item in timeOptions" :key="item.labelId" :label="item.labelName"
|
:value="item.labelId"></el-option>
|
</el-select>
|
</el-col>
|
</el-form-item>
|
</el-row>
|
|
<!-- 任务描述 -->
|
<el-form-item label="任务描述" prop="taskDescription">
|
<el-input type="textarea" :rows="3" v-model="currentTask.taskDescription" placeholder="请输入内容"
|
:readonly="true"></el-input>
|
</el-form-item>
|
|
<!-- 多列选择 -->
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="视频点位" prop="videoIds">
|
<el-select v-model="currentTask.videoIds" placeholder="请选择" multiple disabled>
|
<el-option v-for="item in positionOptions" :key="item.videoId" :label="item.deviceName"
|
:value="item.videoId"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="多模态大模型" prop="modelName">
|
<el-select v-model="currentTask.modelName" placeholder="请选择" disabled>
|
<el-option v-for="item in modelOptions" :key="item.value" :label="item.label"
|
:value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 检测内容 -->
|
<el-form-item label="检测内容" prop="checkContents">
|
<el-select v-model="currentTask.checkContents" multiple placeholder="请选择" disabled>
|
<el-option v-for="item in checkOptions" :key="item.checkId" :label="item.fileName"
|
:value="item.checkId"></el-option>
|
</el-select>
|
</el-form-item>
|
|
<!-- 预警规则 -->
|
<el-form-item label="预警规则" prop="warningRules">
|
<el-select v-model="currentTask.warningRules" placeholder="请选择" multiple disabled>
|
<el-option v-for="item in ruleOptions" :key="item.ruleId" :label="item.fileName"
|
:value="item.ruleId"></el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 知识库 -->
|
<!-- <el-form-item label="知识库" prop="knows">
|
<el-select v-model="currentTask.knowsList" placeholder="请选择" multiple disabled>
|
<el-option v-for="item in flattenKnowledgeOptions" :key="item.value" :label="getKnowledgeLabel(item)"
|
:value="item.value"></el-option>
|
</el-select>
|
</el-form-item> -->
|
</el-form>
|
<span slot="footer">
|
<el-button @click="viewDialogVisible = false">关闭</el-button>
|
</span>
|
</el-dialog>
|
<!-- 新建任务弹窗 -->
|
<el-dialog title="添加智查任务" :visible.sync="dialogVisible" width="800px" custom-class="task-dialog"
|
@open="handleDialogOpen" @closed="handleDialogClose">
|
<el-form ref="taskForm" :model="taskForm" label-width="100px" :rules="formRules">
|
<!-- 第一行 -->
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="任务名称" prop="taskName" required>
|
<el-input v-model="taskForm.taskName" placeholder="请输入" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="事件等级" prop="eventLevel">
|
<el-select v-model="taskForm.eventLevel" placeholder="请选择" clearvnle="">
|
<el-option v-for="item in levelOptions" :key="item.dictId" :label="item.dictValue"
|
:value="item.dictId"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="18">
|
<el-form-item label="工作时间" prop="workingTimes" required>
|
<el-select v-model="taskForm.workingTimes" placeholder="请选择或设置时间段" multiple>
|
<el-option v-for="item in timeOptions" :key="item.labelId" :label="item.labelName"
|
:value="item.labelId"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-button type="primary" @click="handleTimeSetting" class="time-setting-btn">时间段设置</el-button>
|
</el-col>
|
</el-row>
|
|
|
<!-- 任务描述 -->
|
<el-form-item label="任务描述" prop="taskDescription">
|
<el-input type="textarea" :rows="3" v-model="taskForm.taskDescription" placeholder="请输入内容"></el-input>
|
</el-form-item>
|
|
<!-- 多列选择 -->
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="视频点位" prop="videoIds" required>
|
<el-select v-model="taskForm.videoIds" placeholder="请选择" multiple>
|
<el-option-group v-for="group in positionOptions" :key="group.label" :label="group.label"
|
class="custom-group-header">
|
<el-option v-for="item in group.options" :key="item.videoId" :label="item.deviceName"
|
:value="item.videoId"></el-option>
|
</el-option-group>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="多模态大模型" prop="modelName">
|
<el-select v-model="taskForm.modelId" placeholder="请选择">
|
<el-option v-for="item in modelOptions" :key="item.value" :label="item.label"
|
:value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 检测内容 -->
|
<el-form-item label="检测内容" prop="checkContents" required>
|
<el-select v-model="taskForm.checkContents" multiple placeholder="请选择">
|
<el-option v-for="item in checkOptions" :key="item.checkId" :label="item.fileName"
|
:value="item.checkId"></el-option>
|
</el-select>
|
</el-form-item>
|
|
<!-- 预警规则 -->
|
<el-form-item label="预警规则" prop="warningRules" required>
|
<el-select v-model="taskForm.warningRules" placeholder="请选择" multiple>
|
<el-option v-for="item in ruleOptions" :key="item.ruleId" :label="item.fileName"
|
:value="item.ruleId"></el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 知识库 -->
|
<!-- <el-form-item label="知识库" prop="knows">
|
<el-cascader v-model="taskForm.knowsList" :options="knowledgeOptions" :props="knowledgeProps" clearable
|
filterable placeholder="请选择知识库文件" class="knowledge-cascader" :show-all-levels="false"></el-cascader>
|
</el-form-item> -->
|
</el-form>
|
|
<span slot="footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="submitTask">保存</el-button>
|
</span>
|
</el-dialog>
|
|
<!-- 搜索和操作栏 -->
|
<div class="search-bar">
|
<el-input v-model="searchKey" placeholder="请输入任务名称/摄像机名称" clearable class="search-input"></el-input>
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
<!-- <el-button type="primary" class="new-btn" @click="handleCreate()"><i class="el-icon-plus"></i> 新建任务</el-button> -->
|
</div>
|
|
<!-- 任务表格（精确列宽配置） -->
|
<el-table :data="tableData" style="width: 100%" class="data-table" :header-cell-style="{
|
background: '#f5f7fa',
|
color: '#606266'
|
}">
|
<!-- 选择列 -->
|
<!-- <el-table-column type="selection" width="auto" min-width="5%"></el-table-column> -->
|
|
|
<!-- 任务ID -->
|
<el-table-column prop="id" label="任务ID" v-if="false">
|
<template #default="{ row }">
|
<span class="text-ellipsis">{{ row.taskId }}</span>
|
</template>
|
</el-table-column>
|
<!-- 任务名称 -->
|
<el-table-column prop="taskName" label="任务名称" width="auto" min-width="180px">
|
<template #default="{ row }">
|
<span class="text-ellipsis">{{ row.taskName }}</span>
|
</template>
|
</el-table-column>
|
<!-- 多模态大模型 -->
|
<!-- <el-table-column prop="modelName" label="多模态大模型" width="auto" min-width="80px">
|
<template #default="{ row }">
|
{{ row.modelName }}
|
</template>
|
</el-table-column> -->
|
|
<!-- 事件等级 -->
|
<el-table-column prop="eventLevel" label="事件等级" width="auto" min-width="80px">
|
<template #default="{ row }">
|
<!-- <span class="level level-1 text-ellipsis">{{ row.eventLevel }}</span> -->
|
<!-- {{ row.eventLevel }} -->
|
{{levelOptions.find(item => item.dictId === row.eventLevel).dictValue || ''}}
|
</template>
|
</el-table-column>
|
<!-- 视频点位 -->
|
<el-table-column prop="deviceName" label="摄像机名称" width="auto" min-width="180px">
|
<template #default="{ row }">
|
<div class="multi-tags">
|
<!-- <span v-for="(item, index) in row.videoCamera" :key="index" class="text-ellipsis tag-item">{{ item.deviceName
|
}}/</span> -->
|
{{row.deviceName}}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="deviceName" label="RTSP" width="auto" min-width="180px">
|
<template #default="{ row }">
|
<div class="multi-tags">
|
<!-- <span v-for="(item, index) in row.videoCamera" :key="index" class="text-ellipsis tag-item">{{ item.deviceName
|
}}/</span> -->
|
{{row.rtspAddress}}
|
</div>
|
</template>
|
</el-table-column>
|
<!-- 工作时间 -->
|
<el-table-column prop="labelName" label="工作时间" width="auto" min-width="180px">
|
<template #default="{ row }">
|
<div class="multi-tags">
|
{{row.WorkTimeName}}
|
</div>
|
</template>
|
<!-- <template #default="{ row }">
|
<div class="multi-tags">
|
{{(row.workingTime || []).map(r => r.labelName).join('/') || ''}}
|
</div>
|
</template> -->
|
</el-table-column>
|
|
<!-- 检查项类型 -->
|
<!-- <el-table-column prop="checkType" label="检查项类型" width="100">
|
<template #default="{row}">
|
<span class="text-ellipsis">{{ row.checkType }}</span>
|
</template>
|
</el-table-column> -->
|
<!-- 检测内容 -->
|
<el-table-column label="检测内容" width="auto" min-width="180px">
|
<template #default="{ row }">
|
<div class="check-items">
|
<!-- <span v-for="(item, index) in row.checkContent" :key="index" >{{ item.fileName
|
}}/</span> -->
|
{{(row.checkContent || []).map(r => r.fileName).join('/') || ''}}
|
</div>
|
</template>
|
</el-table-column>
|
<!-- 预警规则 -->
|
<el-table-column label="预警规则" width="auto" min-width="180px">
|
<template #default="{ row }">
|
<div class="check-items">
|
<!-- <el-tag v-for="(item, index) in row.warningRule" :key="index" class="text-ellipsis check-tag">{{ item.fileName }}</el-tag> -->
|
{{(row.warningRule || []).map(r => r.fileName).join('/') || ''}}
|
</div>
|
</template>
|
</el-table-column>
|
|
<!-- 知识库 -->
|
<!-- <el-table-column label="知识库" width="auto" min-width="185px">
|
<template #default="{ row }">
|
<div class="check-items">
|
{{(row.knowledge || []).map(r => r.fileName).join('/') || ''}}
|
</div>
|
</template>
|
</el-table-column> -->
|
|
<!-- 操作 -->
|
<el-table-column label="操作" width="auto" min-width="80px">
|
<template #default="{ row }">
|
<div style="display: flex; gap: 8px">
|
<!-- <el-button type="text" icon="el-icon-edit" @click="handleEdit(row)"></el-button> -->
|
<el-button type="text" icon="el-icon-view" @click="handleView(row)"></el-button>
|
<!-- <el-button type="text" icon="el-icon-delete" @click="handleDelete(row)"></el-button> -->
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<div class="pagination">
|
<el-pagination @current-change="handleCurrentChange" :page-size="10" layout="prev, pager, next"
|
:total="this.pagination.total"></el-pagination>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Inspection from "@/api/InspectionView"
|
export default {
|
data() {
|
return {
|
// 新增搜索参数
|
searchParams: {
|
searchKey: '',
|
},
|
// 新增分页参数
|
pagination: {
|
page: 1,
|
pageSize: 10,
|
total: 100,
|
totalPage: 1
|
},
|
// 新增时间设置相关状态
|
timeDialogVisible: false,
|
// 新增状态管理
|
dialogType: 'create', // create/edit
|
viewDialogVisible: false,
|
currentTask: {
|
taskId: null,
|
taskName: '',
|
taskDescription: "",
|
modelId: '',
|
modelName: '',
|
eventLevel: '',
|
eventLevelName: '',
|
videoIds: [],
|
videoCamera: [],
|
workingTimes: [],
|
checkContents: [],
|
warningRules: [],
|
knowsList: []
|
},
|
//校验规则配置
|
formRules: {
|
taskName: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
|
workingTimes: [{
|
type: 'array',
|
required: true,
|
message: '至少选择一个时间段',
|
trigger: 'change'
|
}],
|
videoIds: [{
|
type: 'array',
|
required: true,
|
message: '至少选择一个视频点',
|
trigger: 'change'
|
}],
|
checkContents: [{
|
type: 'array',
|
required: true,
|
message: '至少选择一个检测项',
|
trigger: 'change'
|
}],
|
warningRules: [{
|
type: 'array',
|
required: true,
|
message: '至少选择一个预警规则',
|
trigger: 'change'
|
}],
|
knowsList: [{
|
type: 'array',
|
required: true,
|
message: '至少选择一个预警规则',
|
trigger: 'change'
|
}]
|
},
|
dialogVisible: false,
|
taskForm: {
|
taskId: null,
|
taskName: '',
|
taskDescription: "",
|
modelId: '',
|
modelName: '',
|
eventLevel: '',
|
eventLevelName: '',
|
videoIds: [],
|
videoCamera: [],
|
workingTimes: [],
|
checkContents: [],
|
warningRules: [],
|
knowsList: []
|
},
|
// 下拉选项数据
|
levelOptions: [//事件等级
|
{ dictId: 1, dictValue: '一级' },
|
{ dictId: 2, dictValue: '二级' },
|
{ dictId: 3, dictValue: '三级' }
|
],
|
timeOptions: [//工作时间
|
{ labelId: '1', labelName: '工作时间1' },
|
{ labelId: '2', labelName: '工作时间2' }
|
],
|
positionOptions: [//视频点位
|
{
|
label: '本地摄像机',
|
options: [
|
{ videoId: 1, deviceName: '点位A' },
|
{ videoId: 2, deviceName: '点位B' }
|
]
|
},
|
{
|
label: '国标摄像机',
|
options: [
|
{ videoId: 3, deviceName: 'GB点位A' },
|
{ videoId: 4, deviceName: 'GB点位B' }
|
]
|
}
|
],
|
modelOptions: [//大模型
|
{ value: 1, label: 'DINO' }
|
],
|
checkOptions: [//检测内容
|
{ checkId: 1, fileName: '安全帽检测' },
|
{ checkId: 2, fileName: '火焰检测' }
|
],
|
ruleOptions: [//预警规则
|
{ ruleId: 1, fileName: '规则1' },
|
{ ruleId: 2, fileName: '规则2' }
|
],
|
knowledgFiles: [//预警规则
|
{ id: 1, title: '知识库1' },
|
{ id: 2, title: '知识库2' }
|
],
|
searchKey: '',
|
currentPage: 1,
|
tableData: [],
|
knowledgeOptions: [{
|
id: 1,
|
title: "知识库1",
|
files: [
|
{ id: 11, title: "文件1-1" },
|
{ id: 12, title: "文件2-2" }
|
]
|
}, {
|
id: 2,
|
title: "知识库2",
|
files: [
|
{ id: 13, title: "文件2-1" },
|
{ id: 14, title: "文件2-2" }
|
]
|
}, {
|
id: 3,
|
title: "知识库3",
|
files: [
|
{ id: 15, title: "文件3-1" },
|
{ id: 16, title: "文件3-2" }
|
]
|
},], // 级联选择器选项
|
knowledgeProps: {
|
multiple: true, // 支持多选
|
value: 'id', // 指定选项值字段
|
label: 'title', // 指定选项标签字段
|
children: 'files' // 指定子选项字段（文件列表）
|
},
|
}
|
},
|
computed: {
|
// 展平的知识库选项，用于详情弹窗
|
flattenKnowledgeOptions() {
|
const flatten = []
|
this.knowledgeOptions.forEach(lib => {
|
if (lib.files) {
|
lib.files.forEach(file => {
|
flatten.push({
|
value: file.id,
|
label: file.title
|
// label: `${lib.title}/${file.title}`
|
})
|
})
|
}
|
})
|
return flatten
|
}
|
},
|
mounted() {
|
this.fetchTableData() // 初始化加载数据
|
this.selectData()
|
},
|
methods: {
|
|
// 获取知识库标签（用于详情弹窗）
|
getKnowledgeLabel(item) {
|
// console.info(item)
|
return item.label
|
},
|
|
// 新增搜索处理方法
|
handleSearch() {
|
this.pagination.page = 1; // 搜索时重置到第一页
|
this.fetchTableData();
|
},
|
// 新增重置处理方法
|
handleReset() {
|
this.searchKey = '';
|
},
|
// 分页处理
|
handleCurrentChange(page) {
|
this.pagination.page = page
|
this.fetchTableData()
|
// console.info(this.pagination)
|
},
|
// 打开时间设置弹窗
|
handleTimeSetting() {
|
this.timeDialogVisible = true
|
},
|
// 确认时间设置
|
confirmTimePeriods(periods) {
|
this.taskForm.workTime = periods
|
this.timeDialogVisible = false
|
},
|
// 编辑操作
|
handleEdit(row) {
|
this.dialogType = 'edit'
|
this.dialogVisible = true
|
// 将知识库文件转换为级联选择器需要的格式 [知识库ID, 文件ID] 的数组
|
// 修正知识库文件转换逻辑
|
const convertKnowledge = row.knowledge.map(file => {
|
const library = this.knowledgeOptions.find(lib =>
|
lib.files.some(f => f.id === file.id)
|
)
|
return library ? [library.id, file.id] : null
|
}).filter(item => item !== null) || []
|
this.taskForm = {
|
...row,
|
videoIds: row.videoCamera ? row.videoCamera.map(camera => camera.videoId) : [],
|
checkContents: row.checkContent ? row.checkContent.map(check => check.checkId) : [],
|
warningRules: row.warningRule ? row.warningRule.map(rule => rule.ruleId) : [],
|
knowsList: convertKnowledge,
|
workingTimes: row.workingTime ? row.workingTime.map(time => time.labelId) : [],
|
}
|
// console.info(this.taskForm)
|
},
|
// 新增操作
|
handleCreate() {
|
this.dialogType = 'create'
|
this.dialogVisible = true
|
this.taskForm = {
|
taskId: 0,
|
taskName: '',
|
taskDescription: "",
|
modelId: 1,
|
modelName: '',
|
eventLevel: 1,
|
eventLevelName: '',
|
videoIds: [],
|
videoCamera: [],
|
workingTimes: [],
|
checkContents: [],
|
warningRules: [],
|
knowsList: []
|
}
|
},
|
// 查看详情弹窗
|
// handleView(row) {
|
// this.currentTask = {
|
// ...row,
|
// videoIds: row.videoCamera?.map(camera => camera.videoId),
|
// checkContents: row.checkContent?.map(check => check.checkId),
|
// warningRules: row.warningRule?.map(rule => rule.ruleId),
|
// knowsList: row.knowledge ? row.knowledge.map(file => file.id) : [],
|
// workingTimes: row.workingTime?.map(rule => rule.labelId),
|
// }
|
// this.viewDialogVisible = true
|
// },
|
|
// 查看详情跳转摄像机配置
|
handleView(row) {
|
this.$router.push({
|
name: 'camera',
|
params: {
|
tempData: { id:row.videoId ,videoType:row.videoType} // 临时数据
|
}
|
})
|
},
|
|
// 删除操作
|
async handleDelete(row) {
|
this.$confirm('确认删除该任务吗？', '提示', {
|
type: 'warning'
|
}).then(async () => {
|
// this.tableData = this.tableData.filter(item => item.taskName !== row.taskName)
|
try {
|
await Inspection.deleteFile({
|
taskId: row.taskId
|
})
|
// 删除成功后自动修正页码
|
if (this.tableData.length === 1 && this.pagination.page > 1) {
|
this.pagination.page -= 1
|
}
|
this.$message.success('删除成功')
|
await this.handleReset()
|
await this.fetchTableData()
|
} catch (error) {
|
this.$message.error('删除失败')
|
console.error('API Error:', error)
|
}
|
}).catch(() => {
|
|
})
|
},
|
// 弹窗打开时的处理
|
handleDialogOpen() {
|
this.$nextTick(() => {
|
this.$refs.taskForm.clearValidate()
|
})
|
},
|
// 弹窗关闭时的处理
|
handleDialogClose() {
|
this.$refs.taskForm.resetFields()
|
},
|
//加载下拉框数据
|
async selectData() {
|
// const knowRes = await Inspection.getKnowledges({ //知识库
|
// page: 1,
|
// pageSize: 999
|
// })
|
// this.knowledgeOptions = knowRes.data?.map(k => ({
|
// id: Number(k.knowledgeId),
|
// title: k.title,
|
// files: k.files?.map(f => ({
|
// id: Number(f.id),
|
// title: f.title
|
// }))
|
// }))
|
//levelOptions
|
const events = await Inspection.getEvelens() //事件等级
|
this.levelOptions = events.data
|
|
const cameras = await Inspection.getCameras({})//视频点位
|
this.positionOptions = cameras.data
|
|
const checkContent = await Inspection.getTasks({//检测内容
|
page: 1,
|
pageSize: 999
|
})
|
this.checkOptions = checkContent.data.list
|
// console.info(this.checkOptions)
|
|
const warnings = await Inspection.getWarnings({//预警规则
|
page: 1,
|
pageSize: 999
|
})
|
this.ruleOptions = warnings.data.list
|
// console.info(this.ruleOptions)
|
|
const workT = await Inspection.getTimes()//工作时间
|
let workArr = workT.msg
|
this.timeOptions = workArr.filter((item, index, self) => {
|
// 返回第一个匹配项的索引，用于判断当前项是否为第一个匹配项
|
const firstIndex = self.findIndex((obj) => obj.labelId === item.labelId);
|
|
// 如果当前项是第一个匹配项，则保留，否则过滤掉
|
return index === firstIndex;
|
});
|
// console.info(this.timeOptions)
|
},
|
// 新增数据获取方法
|
async fetchTableData() {
|
try {
|
// 模拟接口请求
|
const res = await Inspection.getFiles({
|
page: this.pagination.page,
|
pageSize: this.pagination.pageSize,
|
searchName: this.searchKey // 添加搜索参数
|
})
|
// 更新分页数据前先校验当前页码
|
const totalPage = res.data.pagination.totalPage
|
const currentPage = this.pagination.page > totalPage
|
? totalPage
|
: res.data.pagination.page
|
this.pagination = {
|
...this.pagination,
|
page: currentPage,
|
total: res.data.pagination.total,
|
totalPage: totalPage
|
}
|
this.pagination.total = res.data.pagination.total
|
this.pagination.totalPage = res.data.pagination.totalPage
|
this.tableData = res.data.list
|
// this.tableData = [
|
// {
|
// taskId: 76,
|
// taskName: "国标测试",
|
// eventLevel: 1,
|
// taskDescription: "",
|
// modelId: 1,
|
// modelName: "DINO",
|
// checkContent: [
|
// {
|
// taskId: 76,
|
// checkId: 95,
|
// fileName: "国标测试0703"
|
// }
|
// ],
|
// warningRule: [
|
// {
|
// taskId: 76,
|
// ruleId: 62,
|
// fileName: "国标测试0703"
|
// }
|
// ],
|
// workingTime: [
|
// {
|
// taskId: 76,
|
// labelId: "994d7c94-cd4d-4b6f-b2f6-44b533973cd4",
|
// labelName: "时间段1"
|
// }
|
// ],
|
// deviceName: "办公室",
|
// rtspAddress: "rtsp://192.168.1.173:554/rtp/34020000002000000001_44122500041325000002?originTypeStr=rtp_push",
|
// knowledge: null,
|
// createTime: "",
|
// createUser: 0
|
// }
|
// ]
|
} catch (error) {
|
this.$message.error('数据加载失败' + error.message)
|
}
|
},
|
|
// 提交方法
|
async submitTask() {
|
try {
|
// 表单验证
|
await this.$refs.taskForm.validate()
|
const formData = JSON.parse(JSON.stringify(this.taskForm))
|
// console.info("knowsList:" + fileIds)
|
// console.info(formData)
|
// console.info(this.taskForm)
|
// 转换知识库选择结果到文件ID列表
|
// const fileIds = this.taskForm.knowsList.map(
|
// path => {
|
// // 提取最后一级的文件ID并转换为数字
|
// const id = path[path.length - 1];
|
// return Number(id); // 或者使用 parseInt(id) 或 +id
|
// }
|
// )
|
// console.info(fileIds)
|
// 转换工作时间格式
|
const workTimes = formData.workingTimes.map(id => {
|
const timeOption = this.timeOptions.find(opt => opt.labelId === id)
|
return {
|
labelId: id,
|
labelName: timeOption ? timeOption.labelName : ''
|
}
|
})
|
if (this.dialogType === 'create') {
|
// 新增逻辑
|
await Inspection.createFile({
|
|
taskName: formData.taskName,
|
eventLevel: formData.eventLevel,
|
taskDescription: formData.taskDescription,
|
modelId: formData.modelId,
|
modelName: this.modelOptions.find(item => item.value === formData.modelId).label || '',
|
checks: formData.checkContents,
|
rules: formData.warningRules,
|
// knows: fileIds,
|
videos: formData.videoIds,
|
workTimes: workTimes
|
})
|
} else {
|
// 更新逻辑
|
await Inspection.updateFile({
|
taskId: formData.taskId,
|
taskName: formData.taskName,
|
eventLevel: formData.eventLevel,
|
taskDescription: formData.taskDescription,
|
modelId: formData.modelId,
|
modelName: this.modelOptions.find(item => item.value === formData.modelId).label || '',
|
checks: formData.checkContents,
|
rules: formData.warningRules,
|
// knows: fileIds,
|
videos: formData.videoIds,
|
workTimes: workTimes
|
})
|
}
|
this.$message.success('操作成功')
|
this.dialogVisible = false
|
// 刷新列表
|
await this.handleReset()
|
await this.fetchTableData()
|
|
// 重置表单
|
this.$refs.taskForm.resetFields()
|
this.currentTask = {
|
taskId: null,
|
taskName: '',
|
eventLevel: '',
|
workTime: [],
|
taskDescription: '',
|
deviceName: [],
|
modelName: '',
|
checkContents: [],
|
warningRules: [],
|
knowsList: []
|
}
|
} catch (error) {
|
// 7. 错误类型判断
|
if (error instanceof Error) {
|
this.$message.error('保存失败：' + error.message)
|
} else {
|
console.log('表单验证未通过')
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.task-container {
|
padding: 20px;
|
background: #fff;
|
|
.search-bar {
|
display: flex;
|
gap: 10px;
|
margin-bottom: 20px;
|
|
.search-input {
|
width: 300px;
|
}
|
|
.new-btn {
|
margin-left: auto;
|
}
|
}
|
|
.data-table {
|
::v-deep {
|
|
.el-table__header,
|
.el-table__body {
|
|
th,
|
td {
|
border-right: 1px solid #ebeef5;
|
|
&:last-child {
|
border-right: none;
|
}
|
}
|
}
|
|
.el-table__row td {
|
padding: 12px 0;
|
}
|
|
.cell {
|
overflow: visible !important;
|
}
|
}
|
|
.text-ellipsis {
|
display: inline-block;
|
max-width: 100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
vertical-align: middle;
|
}
|
|
.level {
|
display: inline-block;
|
padding: 4px 12px;
|
border-radius: 4px;
|
font-size: 12px;
|
|
&-1 {
|
background: #fef0f0;
|
color: #f56c6c;
|
}
|
}
|
|
.check-tag {
|
margin: 2px;
|
}
|
|
.kb-btn {
|
padding: 5px 10px;
|
}
|
|
.multi-tags {
|
display: flex;
|
flex-wrap: nowrap;
|
overflow: hidden;
|
gap: 4px;
|
|
.tag-item {
|
flex-shrink: 1;
|
max-width: 100px;
|
margin: 2px;
|
}
|
}
|
|
.check-items {
|
display: flex;
|
flex-wrap: wrap;
|
max-height: 36px;
|
overflow: hidden;
|
gap: 4px;
|
|
.check-tag {
|
max-width: 120px;
|
flex-shrink: 1;
|
}
|
}
|
|
.kb-buttons {
|
display: flex;
|
flex-wrap: nowrap;
|
overflow: hidden;
|
gap: 4px;
|
|
.kb-btn {
|
max-width: 100px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
padding: 5px 8px;
|
|
span {
|
display: block;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
}
|
|
.pagination {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 20px;
|
}
|
}
|
|
.task-dialog {
|
.knowledge-cascader {
|
width: 100%;
|
}
|
|
.el-dialog__header {
|
border-bottom: 1px solid #ebeef5;
|
padding: 15px 20px;
|
}
|
|
.el-dialog__title {
|
font-size: 16px;
|
color: #303133;
|
}
|
|
.el-form-item {
|
margin-bottom: 18px;
|
|
.el-input__inner,
|
.el-textarea__inner {
|
border-radius: 4px;
|
}
|
}
|
|
.el-select {
|
width: 100%;
|
}
|
|
.el-button--primary {
|
padding: 10px 20px;
|
}
|
}
|
|
/* 查看详情弹窗样式 */
|
.view-dialog {
|
.el-dialog__header {
|
border-bottom: 1px solid #ebeef5;
|
padding: 15px 20px;
|
}
|
|
.el-dialog__title {
|
font-size: 16px;
|
color: #303133;
|
}
|
|
.el-form-item {
|
margin-bottom: 18px;
|
|
.el-input__inner,
|
.el-textarea__inner {
|
border-radius: 4px;
|
}
|
}
|
|
.el-select {
|
width: 100%;
|
}
|
|
.el-button--primary {
|
padding: 10px 20px;
|
}
|
}
|
|
.time-dialog {
|
.el-dialog__body {
|
padding: 20px;
|
}
|
|
.time-period-component {
|
margin: 15px 0;
|
}
|
}
|
|
.time-setting-btn {
|
margin-left: 10px;
|
}
|
</style>
|
