<template>
|
<div class="app-container">
|
<div class="search_form">
|
<div>
|
<span class="search_title">巡检名称：</span>
|
<el-input v-model="searchForm.inspectionName" style="width: 200px" placeholder="请输入" clearable @change="handleQuery" />
|
<span class="search_title ml10">巡检类型：</span>
|
<el-select v-model="searchForm.inspectionType" style="width: 140px" placeholder="全部" clearable @change="handleQuery">
|
<el-option label="定期巡检" :value="1" /><el-option label="临时巡检" :value="2" /><el-option label="故障巡检" :value="3" />
|
</el-select>
|
<span class="search_title ml10">状态：</span>
|
<el-select v-model="searchForm.status" style="width: 120px" placeholder="全部" clearable @change="handleQuery">
|
<el-option label="待执行" :value="0" /><el-option label="执行中" :value="1" /><el-option label="已完成" :value="2" /><el-option label="已取消" :value="3" />
|
</el-select>
|
<el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
|
</div>
|
<div>
|
<el-button type="primary" @click="openForm('add')">新增巡检</el-button>
|
<el-button @click="handleOut">导出</el-button>
|
<el-button type="danger" plain @click="handleDelete">删除</el-button>
|
</div>
|
</div>
|
<div class="table_list">
|
<PIMTable rowKey="id" :column="tableColumn" :tableData="tableData" :page="page" :isSelection="true"
|
@selection-change="handleSelectionChange" :tableLoading="tableLoading" @pagination="pagination"></PIMTable>
|
</div>
|
|
<el-dialog v-model="dialogVisible" :title="operationType === 'add' ? '新增巡检' : '编辑巡检'" width="70%" @close="closeDia">
|
<el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
|
<el-row :gutter="30">
|
<el-col :span="12"><el-form-item label="巡检名称：" prop="inspectionName"><el-input v-model="form.inspectionName" placeholder="请输入" /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="巡检类型：" prop="inspectionType">
|
<el-select v-model="form.inspectionType" placeholder="请选择" style="width:100%">
|
<el-option label="定期巡检" :value="1" /><el-option label="临时巡检" :value="2" /><el-option label="故障巡检" :value="3" />
|
</el-select>
|
</el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12"><el-form-item label="巡检区域：" prop="area"><el-input v-model="form.area" placeholder="请输入" /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="巡检人员：" prop="inspector"><el-input v-model="form.inspector" placeholder="请输入" /></el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="24"><el-form-item label="巡检路径规划：" prop="routePlan">
|
<el-input v-model="form.routePlan" type="textarea" :rows="2" placeholder="请输入巡检路径规划" />
|
</el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12"><el-form-item label="计划开始：" prop="planStartTime"><el-date-picker v-model="form.planStartTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" style="width:100%" /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="计划结束：" prop="planEndTime"><el-date-picker v-model="form.planEndTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" style="width:100%" /></el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12"><el-form-item label="实际开始："><el-date-picker v-model="form.actualStartTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" style="width:100%" /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="实际结束："><el-date-picker v-model="form.actualEndTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" style="width:100%" /></el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12"><el-form-item label="状态："><el-select v-model="form.status" style="width:100%">
|
<el-option label="待执行" :value="0" /><el-option label="执行中" :value="1" /><el-option label="已完成" :value="2" /><el-option label="已取消" :value="3" />
|
</el-select></el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="24"><el-form-item label="巡检结果/记录："><el-input v-model="form.inspectionResult" type="textarea" :rows="2" placeholder="请输入巡检结果" /></el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12"><el-form-item label="AI视频分析结果："><el-input v-model="form.aiAnalysis" type="textarea" :rows="2" placeholder="设备回传后自动写入；也可手工录入" /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="无人机/机器人数据："><el-input v-model="form.uavData" type="textarea" :rows="2" placeholder="设备回传后自动写入；也可手工录入" /></el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="24"><el-form-item label="巡检报告："><el-input v-model="form.reportPath" type="textarea" :rows="2" placeholder="自动生成/填写巡检报告" /></el-form-item></el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="24"><el-form-item label="备注："><el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入" /></el-form-item></el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<el-button type="primary" @click="submitForm">确认</el-button>
|
<el-button @click="closeDia">取消</el-button>
|
</template>
|
</el-dialog>
|
|
<!-- 巡检报告 -->
|
<el-dialog v-model="reportVisible" :title="reportTitle" width="70%">
|
<div v-html="reportContent" style="line-height: 1.8"></div>
|
<template #footer>
|
<el-button type="primary" @click="downloadReport">下载报告</el-button>
|
<el-button @click="reportVisible = false">关闭</el-button>
|
</template>
|
</el-dialog>
|
|
<!-- 巡检回传详情：AI 视频分析 + 无人机/机器人回传数据 -->
|
<el-dialog v-model="traceVisible" :title="traceTitle" width="75%" top="6vh">
|
<div v-if="!traceHasData" class="trace-empty">
|
该巡检任务暂无设备回传数据。无人机 / 机器人 / AI 摄像头通过回传接口上报后，这里会自动展示识别结果、现场照片与轨迹。
|
</div>
|
<template v-else>
|
<div class="trace-block">
|
<div class="trace-title">数据来源</div>
|
<el-descriptions :column="4" border size="small">
|
<el-descriptions-item label="来源类型">{{ deviceTypeText(trace.device.deviceType) }}</el-descriptions-item>
|
<el-descriptions-item label="设备编号">{{ trace.device.deviceCode || "-" }}</el-descriptions-item>
|
<el-descriptions-item label="巡检区域">{{ trace.device.area || "-" }}</el-descriptions-item>
|
<el-descriptions-item label="设备电量">{{ trace.device.battery != null ? trace.device.battery + "%" : "-" }}</el-descriptions-item>
|
<el-descriptions-item label="采集时间">{{ trace.device.collectedAt || "-" }}</el-descriptions-item>
|
<el-descriptions-item label="系统接收时间">{{ trace.device.receivedAt || "-" }}</el-descriptions-item>
|
<el-descriptions-item label="采集坐标">{{ coordText }}</el-descriptions-item>
|
<el-descriptions-item label="作业高度">{{ trace.device.altitude != null ? trace.device.altitude + " m" : "-" }}</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
|
<div class="trace-block">
|
<div class="trace-title">AI 视频分析结果</div>
|
<div class="trace-summary">{{ trace.ai.summary || "本次回传未附带 AI 结论" }}</div>
|
<el-table v-if="aiObjects.length" :data="aiObjects" border size="small">
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
<el-table-column prop="object" label="识别对象" min-width="140" show-overflow-tooltip />
|
<el-table-column prop="conclusion" label="识别结论" min-width="160" show-overflow-tooltip />
|
<el-table-column label="置信度" width="110" align="center">
|
<template #default="{ row }">{{ row.confidence != null ? (Number(row.confidence) * 100).toFixed(1) + "%" : "-" }}</template>
|
</el-table-column>
|
<el-table-column prop="frameTime" label="截帧时间" width="170" />
|
</el-table>
|
<div v-else class="trace-sub-empty">暂无结构化识别条目</div>
|
</div>
|
|
<div v-if="tracePhotos.length" class="trace-block">
|
<div class="trace-title">现场采集照片</div>
|
<div class="trace-photos">
|
<el-image
|
v-for="(p, i) in tracePhotos"
|
:key="i"
|
:src="p"
|
:preview-src-list="tracePhotos"
|
:initial-index="i"
|
fit="cover"
|
class="trace-photo"
|
/>
|
</div>
|
</div>
|
|
<div v-if="traceTrack.length" class="trace-block">
|
<div class="trace-title">设备巡检轨迹</div>
|
<el-table :data="traceTrack" border size="small" max-height="200">
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
<el-table-column prop="t" label="时间" width="140" />
|
<el-table-column prop="lng" label="经度" width="140" />
|
<el-table-column prop="lat" label="纬度" width="140" />
|
<el-table-column prop="alt" label="高度(m)" width="110" />
|
</el-table>
|
</div>
|
</template>
|
<template #footer>
|
<el-button @click="traceVisible = false">关闭</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { Search } from "@element-plus/icons-vue";
|
import { ref, reactive, toRefs, onMounted, computed, getCurrentInstance } from "vue";
|
import { ElMessageBox } from "element-plus";
|
import { listInspection, addInspection, updateInspection, deleteInspection, generateInspectionReport } from "@/api/environmentAccess/inspection.js";
|
|
const { proxy } = getCurrentInstance();
|
const typeText = (t) => (t == 1 ? "定期巡检" : t == 2 ? "临时巡检" : t == 3 ? "故障巡检" : "");
|
const statusText = (s) => (s == 0 ? "待执行" : s == 1 ? "执行中" : s == 2 ? "已完成" : s == 3 ? "已取消" : "");
|
const statusType = (s) => (s == 0 ? "info" : s == 1 ? "primary" : s == 2 ? "success" : s == 3 ? "danger" : "");
|
|
const data = reactive({ searchForm: { inspectionName: "", inspectionType: undefined, status: undefined } });
|
const { searchForm } = toRefs(data);
|
|
const tableColumn = ref([
|
{ label: "巡检名称", prop: "inspectionName" },
|
{ label: "巡检类型", prop: "inspectionType", width: 100, dataType: "tag", formatData: (p) => typeText(p), formatType: () => "warning" },
|
{ label: "巡检区域", prop: "area" },
|
{ label: "巡检路径规划", prop: "routePlan", showOverflowTooltip: true },
|
{ label: "计划开始", prop: "planStartTime", width: 160 },
|
{ label: "巡检人员", prop: "inspector", width: 100 },
|
{ label: "状态", prop: "status", width: 90, dataType: "tag", formatData: (p) => statusText(p), formatType: (p) => statusType(p) },
|
{ label: "巡检结果", prop: "inspectionResult", showOverflowTooltip: true },
|
{
|
dataType: "action", label: "操作", align: "center", fixed: "right", width: 200,
|
operation: [
|
{ name: "回传详情", type: "text", clickFun: (row) => openTrace(row) },
|
{ name: "编辑", type: "text", clickFun: (row) => openForm("edit", row) },
|
{ name: "生成报告", type: "text", clickFun: (row) => openReport(row) },
|
],
|
},
|
]);
|
|
const tableData = ref([]);
|
const selectedRows = ref([]);
|
const tableLoading = ref(false);
|
const page = reactive({ current: 1, size: 100, total: 0 });
|
|
const dialogVisible = ref(false);
|
const operationType = ref("add");
|
const formRef = ref();
|
const form = ref({});
|
const rules = { inspectionName: [{ required: true, message: "请输入巡检名称", trigger: "blur" }] };
|
|
// 巡检报告
|
const reportVisible = ref(false);
|
const reportContent = ref("");
|
const reportTitle = ref("智能巡检报告");
|
const openReport = (row) => {
|
generateInspectionReport(row.id).then((res) => {
|
reportContent.value = res.data;
|
reportTitle.value = (row.inspectionName || "智能巡检") + " - 巡检报告";
|
reportVisible.value = true;
|
}).catch(() => { proxy.$modal.msgError("生成报告失败"); });
|
};
|
const downloadReport = () => {
|
const blob = new Blob([reportContent.value], { type: "application/msword" });
|
const a = document.createElement("a");
|
a.href = URL.createObjectURL(blob);
|
a.download = reportTitle.value + ".doc";
|
a.click();
|
URL.revokeObjectURL(a.href);
|
};
|
|
/* ---------- 巡检回传详情（AI 视频分析 + 无人机/机器人回传） ---------- */
|
const traceVisible = ref(false);
|
const traceTitle = ref("巡检回传详情");
|
const trace = ref({ device: {}, ai: {}, photos: [], track: [] });
|
const deviceTypeText = (t) => ({ UAV: "无人机", ROBOT: "巡检机器人", CAMERA: "AI 摄像头" }[t] || t || "-");
|
const safeJson = (txt) => {
|
if (!txt) return null;
|
try {
|
const v = JSON.parse(txt);
|
return v && typeof v === "object" ? v : null;
|
} catch (e) {
|
return null;
|
}
|
};
|
const traceHasData = computed(() => {
|
const d = trace.value.device || {};
|
const ai = trace.value.ai || {};
|
return !!(d.deviceCode || d.deviceType || ai.summary || (ai.objects && ai.objects.length));
|
});
|
const aiObjects = computed(() => (trace.value.ai && trace.value.ai.objects) || []);
|
const tracePhotos = computed(() => (trace.value.device && trace.value.device.photos) || []);
|
const traceTrack = computed(() => (trace.value.device && trace.value.device.track) || []);
|
const coordText = computed(() => {
|
const d = trace.value.device || {};
|
if (d.longitude == null || d.latitude == null) return "-";
|
return d.longitude + ", " + d.latitude;
|
});
|
const openTrace = (row) => {
|
const uav = safeJson(row.uavData);
|
const aiParsed = safeJson(row.aiAnalysis);
|
const ai = aiParsed || { summary: row.aiAnalysis || "", objects: [] };
|
trace.value = {
|
device: uav || {},
|
ai: ai,
|
photos: (uav && uav.photos) || [],
|
track: (uav && uav.track) || [],
|
};
|
traceTitle.value = (row.inspectionName || "智能巡检") + " - 回传详情";
|
traceVisible.value = true;
|
};
|
|
const handleQuery = () => { page.current = 1; getList(); };
|
const pagination = (obj) => { page.current = obj.page; page.size = obj.limit; getList(); };
|
const handleSelectionChange = (s) => { selectedRows.value = s; };
|
const getList = () => {
|
tableLoading.value = true;
|
listInspection({ ...searchForm.value, ...page }).then((res) => {
|
tableLoading.value = false;
|
tableData.value = res.data.records;
|
page.total = res.data.total;
|
}).catch(() => { tableLoading.value = false; });
|
};
|
const openForm = (type, row) => {
|
operationType.value = type;
|
form.value = type === "add" ? { status: 0 } : { ...row };
|
dialogVisible.value = true;
|
};
|
const closeDia = () => { proxy.resetForm("formRef"); dialogVisible.value = false; };
|
const submitForm = () => {
|
formRef.value.validate((valid) => {
|
if (!valid) return;
|
const p = operationType.value === "add" ? addInspection(form.value) : updateInspection(form.value);
|
p.then(() => { proxy.$modal.msgSuccess("提交成功"); closeDia(); getList(); });
|
});
|
};
|
const handleDelete = () => {
|
if (!selectedRows.value.length) { proxy.$modal.msgWarning("请选择数据"); return; }
|
const ids = selectedRows.value.map((i) => i.id);
|
ElMessageBox.confirm("是否确认删除？", "删除", { confirmButtonText: "确认", cancelButtonText: "取消", type: "warning" })
|
.then(() => { deleteInspection(ids).then(() => { proxy.$modal.msgSuccess("删除成功"); getList(); }); }).catch(() => {});
|
};
|
const handleOut = () => {
|
ElMessageBox.confirm("是否确认导出？", "导出", { confirmButtonText: "确认", cancelButtonText: "取消", type: "warning" })
|
.then(() => { proxy.download("/environmentAccess/inspection/export", { ...searchForm.value }, "智能巡检台账.xlsx"); }).catch(() => {});
|
};
|
|
onMounted(() => { getList(); });
|
</script>
|
|
<style scoped lang="scss">
|
.ml10 { margin-left: 10px; }
|
.table_list { margin-top: unset; }
|
.trace-block { margin-bottom: 18px; }
|
.trace-title {
|
font-size: 14px;
|
font-weight: 600;
|
color: #303133;
|
border-left: 3px solid #409eff;
|
padding-left: 8px;
|
margin-bottom: 10px;
|
}
|
.trace-summary {
|
font-size: 13px;
|
color: #606266;
|
background: #f5f7fa;
|
border-radius: 4px;
|
padding: 8px 12px;
|
margin-bottom: 10px;
|
line-height: 1.6;
|
}
|
.trace-sub-empty,
|
.trace-empty {
|
color: #909399;
|
font-size: 13px;
|
line-height: 1.8;
|
}
|
.trace-empty {
|
padding: 24px 8px;
|
text-align: center;
|
}
|
.trace-photos { display: flex; flex-wrap: wrap; gap: 10px; }
|
.trace-photo {
|
width: 132px;
|
height: 96px;
|
border-radius: 4px;
|
border: 1px solid #ebeef5;
|
cursor: pointer;
|
}
|
</style>
|
