From 3f615df738f2e1150fab099c00cfec4e4c43196b Mon Sep 17 00:00:00 2001
From: tuqin <tuqin@tuqin.cn>
Date: 星期一, 26 十月 2026 09:24:45 +0800
Subject: [PATCH] feat(环保门禁): 智能巡检回传详情(AI分析/无人机轨迹结构化展示)、异常报警15秒轮询+弹窗提醒、车辆手机采集加拍照上传与移动端适配
---
src/views/environmentAccess/intelligentInspectionManagement/index.vue | 860 ++++++++++++++++++++------------------------------------
1 files changed, 309 insertions(+), 551 deletions(-)
diff --git a/src/views/environmentAccess/intelligentInspectionManagement/index.vue b/src/views/environmentAccess/intelligentInspectionManagement/index.vue
index 47fe867..214f7b0 100644
--- a/src/views/environmentAccess/intelligentInspectionManagement/index.vue
+++ b/src/views/environmentAccess/intelligentInspectionManagement/index.vue
@@ -1,581 +1,339 @@
<template>
<div class="app-container">
- <el-form :model="filters" :inline="true">
- <el-form-item label="宸℃鍚嶇О">
- <el-input
- v-model="filters.name"
- style="width: 240px"
- placeholder="璇疯緭鍏ュ贰妫�鍚嶇О"
- clearable
- :prefix-icon="Search"
- @change="getTableData"
- />
- </el-form-item>
- <el-form-item label="宸℃鐘舵��">
- <el-select
- v-model="filters.status"
- style="width: 240px"
- placeholder="璇烽�夋嫨宸℃鐘舵��"
- clearable
- @change="getTableData"
- >
- <el-option label="寰呮墽琛�" value="0"></el-option>
- <el-option label="鎵ц涓�" value="1"></el-option>
- <el-option label="宸插畬鎴�" value="2"></el-option>
- <el-option label="宸插彇娑�" value="3"></el-option>
+ <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>
- </el-form-item>
- <el-form-item label="宸℃绫诲瀷">
- <el-select
- v-model="filters.type"
- style="width: 240px"
- placeholder="璇烽�夋嫨宸℃绫诲瀷"
- clearable
- @change="getTableData"
- >
- <el-option label="瀹氭湡宸℃" value="0"></el-option>
- <el-option label="涓存椂宸℃" value="1"></el-option>
- <el-option label="鏁呴殰宸℃" value="2"></el-option>
+ <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-form-item>
- <el-form-item>
- <el-button type="primary" @click="getTableData">鎼滅储</el-button>
- <el-button @click="resetFilters">閲嶇疆</el-button>
- </el-form-item>
- </el-form>
- <div class="table_list">
- <div class="actions">
- <div></div>
- <div>
- <el-button type="primary" @click="add" icon="Plus"> 鏂板 </el-button>
- <el-button
- type="danger"
- icon="Delete"
- :disabled="multipleList.length <= 0"
- @click="batchDelete"
- >鎵归噺鍒犻櫎</el-button
- >
- </div>
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px">鎼滅储</el-button>
</div>
- <PIMTable
- rowKey="id"
- isSelection
- :column="columns"
- :tableData="dataList"
- :page="{
- current: pagination.currentPage,
- size: pagination.pageSize,
- total: pagination.total,
- }"
- @selection-change="handleSelectionChange"
- @pagination="changePage"
- >
- </PIMTable>
+ <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>
- <!-- 鏂板缂栬緫寮圭獥 -->
- <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
- <el-form :model="formData" label-width="100px">
- <el-form-item label="宸℃鍚嶇О" required>
- <el-input
- v-model="formData.name"
- placeholder="璇疯緭鍏ュ贰妫�鍚嶇О"
- ></el-input>
- </el-form-item>
- <el-form-item label="宸℃绫诲瀷" required>
- <el-select v-model="formData.type" placeholder="璇烽�夋嫨宸℃绫诲瀷">
- <el-option label="瀹氭湡宸℃" value="0"></el-option>
- <el-option label="涓存椂宸℃" value="1"></el-option>
- <el-option label="鏁呴殰宸℃" value="2"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="宸℃鍖哄煙" required>
- <el-input
- v-model="formData.area"
- placeholder="璇疯緭鍏ュ贰妫�鍖哄煙"
- ></el-input>
- </el-form-item>
- <el-form-item label="宸℃浜哄憳" required>
- <el-input
- v-model="formData.inspector"
- placeholder="璇疯緭鍏ュ贰妫�浜哄憳"
- ></el-input>
- </el-form-item>
- <el-form-item label="璁″垝寮�濮嬫椂闂�" required>
- <el-date-picker
- v-model="formData.planStartTime"
- type="datetime"
- placeholder="璇烽�夋嫨璁″垝寮�濮嬫椂闂�"
- style="width: 100%"
- ></el-date-picker>
- </el-form-item>
- <el-form-item label="璁″垝缁撴潫鏃堕棿" required>
- <el-date-picker
- v-model="formData.planEndTime"
- type="datetime"
- placeholder="璇烽�夋嫨璁″垝缁撴潫鏃堕棿"
- style="width: 100%"
- ></el-date-picker>
- </el-form-item>
- <el-form-item label="宸℃鍐呭">
- <el-input
- v-model="formData.content"
- type="textarea"
- rows="3"
- placeholder="璇疯緭鍏ュ贰妫�鍐呭"
- ></el-input>
- </el-form-item>
+ <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>
- <span class="dialog-footer">
- <el-button @click="dialogVisible = false">鍙栨秷</el-button>
- <el-button type="primary" @click="saveData">纭畾</el-button>
- </span>
+ <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>
+
+ <!-- 宸℃鍥炰紶璇︽儏锛欰I 瑙嗛鍒嗘瀽 + 鏃犱汉鏈�/鏈哄櫒浜哄洖浼犳暟鎹� -->
+ <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 { ref, reactive, computed, onMounted } from "vue";
-import { Search, Plus, Delete } from "@element-plus/icons-vue";
-import { ElMessage, ElMessageBox } from "element-plus";
-import dayjs from "dayjs";
+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 mockData = [
- {
- id: 1,
- name: "涓滈棬鍖哄煙鏃ュ父宸℃",
- type: "0",
- status: "2",
- planStartTime: "2025-12-30 08:00:00",
- planEndTime: "2025-12-30 09:00:00",
- actualStartTime: "2025-12-30 08:05:00",
- actualEndTime: "2025-12-30 08:55:00",
- inspector: "寮犱笁",
- area: "涓滈棬鍖哄煙",
- content: "妫�鏌ラ棬绂佽澶囪繍琛岀姸鎬併�佺幆澧冪洃娴嬭澶囨暟鎹�",
- },
- {
- id: 2,
- name: "瑗块棬鍖哄煙涓存椂宸℃",
- type: "1",
- status: "2",
- planStartTime: "2025-12-30 10:00:00",
- planEndTime: "2025-12-30 11:00:00",
- actualStartTime: "2025-12-30 10:00:00",
- actualEndTime: "2025-12-30 10:45:00",
- inspector: "鏉庡洓",
- area: "瑗块棬鍖哄煙",
- content: "妫�鏌ュ紓甯告姤璀﹁澶�",
- },
- {
- id: 3,
- name: "鍗楅棬闂ㄧ鏁呴殰宸℃",
- type: "2",
- status: "1",
- planStartTime: "2025-12-30 13:00:00",
- planEndTime: "2025-12-30 14:00:00",
- actualStartTime: "2025-12-30 13:10:00",
- actualEndTime: "",
- inspector: "鐜嬩簲",
- area: "鍗楅棬鍖哄煙",
- content: "淇闂ㄧ鏁呴殰",
- },
- {
- id: 4,
- name: "涓帶瀹ゅ畾鏈熷贰妫�",
- type: "0",
- status: "0",
- planStartTime: "2025-12-31 09:00:00",
- planEndTime: "2025-12-31 10:00:00",
- actualStartTime: "",
- actualEndTime: "",
- inspector: "璧靛叚",
- area: "涓帶鍖哄煙",
- content: "妫�鏌ョ洃鎺ц澶囥�佹湇鍔″櫒杩愯鐘舵��",
- },
- {
- id: 5,
- name: "鍖楅棬鍖哄煙鏃ュ父宸℃",
- type: "0",
- status: "2",
- planStartTime: "2025-12-30 15:00:00",
- planEndTime: "2025-12-30 16:00:00",
- actualStartTime: "2025-12-30 15:00:00",
- actualEndTime: "2025-12-30 15:50:00",
- inspector: "寮犱笁",
- area: "鍖楅棬鍖哄煙",
- content: "妫�鏌ヨ溅杈嗚瘑鍒澶囥�侀亾闂歌繍琛岀姸鎬�",
- },
-];
+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 filters = reactive({
- name: "",
- status: "",
- type: "",
-});
+const data = reactive({ searchForm: { inspectionName: "", inspectionType: undefined, status: undefined } });
+const { searchForm } = toRefs(data);
-const dataList = ref([]);
-const pagination = reactive({
- currentPage: 1,
- pageSize: 10,
- total: 0,
-});
-
-const multipleList = ref([]);
-const dialogVisible = ref(false);
-const dialogTitle = ref("鏂板宸℃");
-const formData = reactive({
- id: "",
- name: "",
- type: "0",
- status: "0",
- planStartTime: "",
- planEndTime: "",
- actualStartTime: "",
- actualEndTime: "",
- inspector: "",
- area: "",
- content: "",
-});
-
-// 鐘舵�佹槧灏�
-const statusMap = {
- '0': '<el-tag type="warning">寰呮墽琛�</el-tag>',
- '1': '<el-tag type="primary">鎵ц涓�</el-tag>',
- '2': '<el-tag type="success">宸插畬鎴�</el-tag>',
- '3': '<el-tag type="danger">宸插彇娑�</el-tag>',
-};
-
-// 绫诲瀷鏄犲皠
-const typeMap = {
- 0: "瀹氭湡宸℃",
- 1: "涓存椂宸℃",
- 2: "鏁呴殰宸℃",
-};
-
-// 琛ㄦ牸鍒楅厤缃�
-const columns = [
+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 },
{
- label: "宸℃鍚嶇О",
- align: "center",
- prop: "name",
- },
- {
- label: "宸℃绫诲瀷",
- align: "center",
- prop: "type",
- formatter: (row) => {
- return typeMap[row.type];
- },
- },
- {
- label: "宸℃鐘舵��",
- align: "center",
- prop: "status",
- formatter: (row) => {
- return statusMap[row.status];
- },
- },
- {
- label: "璁″垝寮�濮嬫椂闂�",
- align: "center",
- prop: "planStartTime",
- },
- {
- label: "璁″垝缁撴潫鏃堕棿",
- align: "center",
- prop: "planEndTime",
- },
- {
- label: "瀹為檯寮�濮嬫椂闂�",
- align: "center",
- prop: "actualStartTime",
- formatter: (row) => {
- return row.actualStartTime || "-";
- },
- },
- {
- label: "瀹為檯缁撴潫鏃堕棿",
- align: "center",
- prop: "actualEndTime",
- formatter: (row) => {
- return row.actualEndTime || "-";
- },
- },
- {
- label: "宸℃浜哄憳",
- align: "center",
- prop: "inspector",
- },
- {
- label: "宸℃鍖哄煙",
- align: "center",
- prop: "area",
- },
- {
- dataType: "action",
- label: "鎿嶄綔",
- align: "center",
- fixed: "right",
- width: 180,
+ dataType: "action", label: "鎿嶄綔", align: "center", fixed: "right", width: 200,
operation: [
- {
- name: "缂栬緫",
- type: "text",
- clickFun: (row) => {
- edit(row);
- },
- },
- {
- name: "寮�濮嬫墽琛�",
- type: "text",
- clickFun: (row) => {
- startInspection(row);
- },
- visible: (row) => {
- return row.status === "0";
- },
- },
- {
- name: "瀹屾垚宸℃",
- type: "text",
- clickFun: (row) => {
- completeInspection(row);
- },
- visible: (row) => {
- return row.status === "1";
- },
- },
- {
- name: "鍙栨秷宸℃",
- type: "text",
- clickFun: (row) => {
- cancelInspection(row);
- },
- visible: (row) => {
- return ["0", "1"].includes(row.status);
- },
- },
- {
- name: "鍒犻櫎",
- type: "text",
- clickFun: (row) => {
- deleteRow(row.id);
- },
- },
+ { name: "鍥炰紶璇︽儏", type: "text", clickFun: (row) => openTrace(row) },
+ { name: "缂栬緫", type: "text", clickFun: (row) => openForm("edit", row) },
+ { name: "鐢熸垚鎶ュ憡", type: "text", clickFun: (row) => openReport(row) },
],
},
-];
+]);
-// 杩囨护鍚庣殑鏁版嵁
-const filteredData = computed(() => {
- return mockData.filter((item) => {
- const nameMatch = !filters.name || item.name.includes(filters.name);
- const statusMatch = !filters.status || item.status === filters.status;
- const typeMatch = !filters.type || item.type === filters.type;
- return nameMatch && statusMatch && typeMatch;
+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);
+};
+
+/* ---------- 宸℃鍥炰紶璇︽儏锛圓I 瑙嗛鍒嗘瀽 + 鏃犱汉鏈�/鏈哄櫒浜哄洖浼狅級 ---------- */
+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 getTableData = () => {
- pagination.total = filteredData.value.length;
- const start = (pagination.currentPage - 1) * pagination.pageSize;
- const end = start + pagination.pageSize;
- dataList.value = filteredData.value.slice(start, end);
+};
+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(() => {});
};
-// 閲嶇疆杩囨护鍣�
-const resetFilters = () => {
- filters.name = "";
- filters.status = "";
- filters.type = "";
- pagination.currentPage = 1;
- getTableData();
-};
-
-// 鍒嗛〉鍙樺寲
-const changePage = ({ page, limit }) => {
- pagination.currentPage = page;
- pagination.pageSize = limit;
- getTableData();
-};
-
-// 澶氶�夊鐞�
-const handleSelectionChange = (selectionList) => {
- multipleList.value = selectionList;
-};
-
-// 鏂板
-const add = () => {
- dialogTitle.value = "鏂板宸℃";
- formData.id = "";
- formData.name = "";
- formData.type = "0";
- formData.status = "0";
- formData.planStartTime = "";
- formData.planEndTime = "";
- formData.actualStartTime = "";
- formData.actualEndTime = "";
- formData.inspector = "";
- formData.area = "";
- formData.content = "";
- dialogVisible.value = true;
-};
-
-// 缂栬緫
-const edit = (row) => {
- dialogTitle.value = "缂栬緫宸℃";
- formData.id = row.id;
- formData.name = row.name;
- formData.type = row.type;
- formData.status = row.status;
- formData.planStartTime = row.planStartTime;
- formData.planEndTime = row.planEndTime;
- formData.actualStartTime = row.actualStartTime;
- formData.actualEndTime = row.actualEndTime;
- formData.inspector = row.inspector;
- formData.area = row.area;
- formData.content = row.content;
- dialogVisible.value = true;
-};
-
-// 淇濆瓨鏁版嵁
-const saveData = () => {
- if (
- !formData.name ||
- !formData.planStartTime ||
- !formData.planEndTime ||
- !formData.inspector ||
- !formData.area
- ) {
- ElMessage.warning("璇峰～鍐欏繀濉瓧娈�");
- return;
- }
-
- if (formData.id) {
- // 缂栬緫
- const index = mockData.findIndex((item) => item.id === formData.id);
- if (index !== -1) {
- mockData[index] = {
- ...mockData[index],
- ...formData,
- };
- ElMessage.success("缂栬緫鎴愬姛");
- }
- } else {
- // 鏂板
- const newId = Math.max(...mockData.map((item) => item.id), 0) + 1;
- mockData.unshift({
- ...formData,
- id: newId,
- });
- ElMessage.success("鏂板鎴愬姛");
- }
- dialogVisible.value = false;
- getTableData();
-};
-
-// 寮�濮嬪贰妫�
-const startInspection = (row) => {
- const index = mockData.findIndex((item) => item.id === row.id);
- if (index !== -1) {
- mockData[index].status = "1";
- mockData[index].actualStartTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
- ElMessage.success("宸℃宸插紑濮�");
- getTableData();
- }
-};
-
-// 瀹屾垚宸℃
-const completeInspection = (row) => {
- const index = mockData.findIndex((item) => item.id === row.id);
- if (index !== -1) {
- mockData[index].status = "2";
- mockData[index].actualEndTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
- ElMessage.success("宸℃宸插畬鎴�");
- getTableData();
- }
-};
-
-// 鍙栨秷宸℃
-const cancelInspection = (row) => {
- ElMessageBox.confirm("纭畾瑕佸彇娑堣宸℃鍚�?", "鎻愮ず", {
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- const index = mockData.findIndex((item) => item.id === row.id);
- if (index !== -1) {
- mockData[index].status = "3";
- ElMessage.success("宸℃宸插彇娑�");
- getTableData();
- }
- })
- .catch(() => {});
-};
-
-// 鍒犻櫎
-const deleteRow = (id) => {
- ElMessageBox.confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ュ贰妫�璁板綍, 鏄惁缁х画?", "鎻愮ず", {
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- const index = mockData.findIndex((item) => item.id === id);
- if (index !== -1) {
- mockData.splice(index, 1);
- ElMessage.success("鍒犻櫎鎴愬姛");
- getTableData();
- }
- })
- .catch(() => {});
-};
-
-// 鎵归噺鍒犻櫎
-const batchDelete = () => {
- if (multipleList.value.length === 0) {
- ElMessage.warning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁");
- return;
- }
-
- ElMessageBox.confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎鎵�閫夊贰妫�璁板綍, 鏄惁缁х画?", "鎻愮ず", {
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- const ids = multipleList.value.map((item) => item.id);
- mockData.forEach((item, index) => {
- if (ids.includes(item.id)) {
- mockData.splice(index, 1);
- }
- });
- ElMessage.success("鍒犻櫎鎴愬姛");
- getTableData();
- multipleList.value = [];
- })
- .catch(() => {});
-};
-
-// 鍒濆鍖栨暟鎹�
-onMounted(() => {
- getTableData();
-});
+onMounted(() => { getList(); });
</script>
-<style lang="scss" scoped>
-.table_list {
- margin-top: unset;
-}
-.actions {
- display: flex;
- justify-content: space-between;
+<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>
--
Gitblit v1.9.3