|
|
@@ -0,0 +1,236 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog v-model="showSearch" title="巡查结果" width="80%" @close="$emit('close')">
|
|
|
+ <div class="app-container">
|
|
|
+ <transition name="fade">
|
|
|
+ <div v-show="showSearch">
|
|
|
+ <el-form ref="queryFormRef" :model="queryParams">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="所属区划：" prop="area" label-width="auto">
|
|
|
+ <el-tree-select
|
|
|
+ v-model="divisionSelectedId"
|
|
|
+ :data="formattedDivisionData"
|
|
|
+ :props="{ label: 'label', value: 'code', children: 'children' }"
|
|
|
+ :render-after-expand="false"
|
|
|
+ style="width: 468px"
|
|
|
+ @change="onDivisionChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="巡查结果：" prop="inspection_result" label-width="auto">
|
|
|
+ <el-select v-model="queryParams.inspection_result" placeholder="全部" clearable>
|
|
|
+ <el-option v-for="item in cycleOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item prop="nick_name" label-width="auto">
|
|
|
+ <el-input v-model="queryParams.nick_name" placeholder="请输入巡查人"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-button type="primary" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button @click="resetQuery">重置</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" icon="Plus" @click="handleExport">导出</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- 表格组件 -->
|
|
|
+ <el-table ref="multipleTable" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column label="巡查点" align="center" prop="inspection_point_name" />
|
|
|
+ <el-table-column label="所属区划" align="center" prop="area" />
|
|
|
+ <el-table-column label="执行日期" align="center" prop="create_time" />
|
|
|
+ <el-table-column label="巡查人" align="center" prop="nick_name" />
|
|
|
+ <el-table-column label="巡查结果" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ getInspectionResultText(row.inspection_result) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="现场照片" align="center" prop="fileList">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div v-if="row.fileList && row.fileList.length > 0">
|
|
|
+ <img v-for="file in row.fileList" :key="file.uid" :src="file.previewUrl" alt="" style="max-width: 100px" />
|
|
|
+ </div>
|
|
|
+ <div v-else>无图片</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="备注" align="center" prop="remark" />
|
|
|
+ </el-table>
|
|
|
+ <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.pageSize" :total="total" @pagination="tableData" />
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+import { onMounted, reactive, ref } from 'vue';
|
|
|
+import { inspectorDivision, resultList, fileDownload } from '@/api/inspectionWork/inspector';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
+const loading = ref(true);
|
|
|
+const showSearch = ref(true);
|
|
|
+const multiple = ref(true);
|
|
|
+const ids = ref<Array<number | string>>([]);
|
|
|
+const single = ref(true);
|
|
|
+const total = ref(0);
|
|
|
+const tableData = ref([]);
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+const divisionSelectedId = ref(null);
|
|
|
+const formattedDivisionData = ref([]);
|
|
|
+const rawDivisionData = ref([]);
|
|
|
+const props = defineProps<{
|
|
|
+ eventId: string | number;
|
|
|
+}>();
|
|
|
+const initFormData = reactive({
|
|
|
+ id: '',
|
|
|
+ children_task_id: '',
|
|
|
+ inspection_point_name: '',
|
|
|
+ area: '',
|
|
|
+ create_time: '',
|
|
|
+ nick_name: '',
|
|
|
+ inspection_result: '',
|
|
|
+ remark: '',
|
|
|
+ fileList: []
|
|
|
+});
|
|
|
+const data = reactive({
|
|
|
+ form: { ...initFormData },
|
|
|
+ queryParams: {
|
|
|
+ page: '',
|
|
|
+ pageSize: '',
|
|
|
+ inspection_result: '',
|
|
|
+ area_code: '',
|
|
|
+ nick_name: ''
|
|
|
+ }
|
|
|
+});
|
|
|
+const { queryParams, form } = toRefs(data);
|
|
|
+const cycleOptions = ref([
|
|
|
+ { label: '全部', value: '' }, // 通常“全部”对应空值或者特定的标识符，表示不按此条件过滤
|
|
|
+ { label: '正常', value: '1' },
|
|
|
+ { label: '异常', value: '2' }
|
|
|
+]);
|
|
|
+const getInspectionResultText = (resultCode) => {
|
|
|
+ switch (resultCode) {
|
|
|
+ case '1':
|
|
|
+ return '正常';
|
|
|
+ case '2':
|
|
|
+ return '异常';
|
|
|
+ default:
|
|
|
+ return '全部';
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const fetchResulData = () => {
|
|
|
+ loading.value = true; // 开始加载
|
|
|
+ return resultList(props.eventId, queryParams.value)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ tableData.value = res.data || []; // 确保tableData是一个数组
|
|
|
+ total.value = res.total || 0; // 确保total是一个数字
|
|
|
+ console.log('Fetched subtasks data:', tableData.value);
|
|
|
+ } else {
|
|
|
+ console.error(res.msg);
|
|
|
+ }
|
|
|
+ loading.value = false; // 结束加载
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error('Error fetching sub tasks:', error);
|
|
|
+ loading.value = false; // 结束加载
|
|
|
+ });
|
|
|
+};
|
|
|
+const loadFilePreviews = (rowData) => {
|
|
|
+ if (rowData.fileList && rowData.fileList.length > 0) {
|
|
|
+ for (const file of rowData.fileList) {
|
|
|
+ try {
|
|
|
+ fileDownload(file.url)
|
|
|
+ .then((response) => {
|
|
|
+ if (response && response.data) {
|
|
|
+ file.previewUrl = URL.createObjectURL(new Blob([response.data]));
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error(`Failed to load image at ${file.url}:`, error);
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error(`Failed to start download for ${file.url}:`, error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+const fetchAndLoadPreviews = () => {
|
|
|
+ fetchResulData().then(() => {
|
|
|
+ tableData.value.forEach(loadFilePreviews);
|
|
|
+ });
|
|
|
+};
|
|
|
+const handleQuery = () => {
|
|
|
+ queryParams.value.page = 1;
|
|
|
+ fetchResulData();
|
|
|
+};
|
|
|
+// 重置查询条件
|
|
|
+const resetQuery = () => {
|
|
|
+ queryParams.value = { page: 1, pageSize: 10, nick_name: '', area_code: '', inspection_result: '' };
|
|
|
+ handleQuery();
|
|
|
+};
|
|
|
+const handleSelectionChange = (selection) => {
|
|
|
+ ids.value = selection.map((item) => item.id);
|
|
|
+ selectedRow.value = selection.length === 1 ? selection[0] : null;
|
|
|
+ single.value = selection.length != 1;
|
|
|
+ multiple.value = !selection.length;
|
|
|
+};
|
|
|
+const fetchDivisionData = async () => {
|
|
|
+ const response = await inspectorDivision();
|
|
|
+ if (response.code === 200) {
|
|
|
+ rawDivisionData.value = response.data;
|
|
|
+ formattedDivisionData.value = formatDivisionData(rawDivisionData.value);
|
|
|
+ console.log('Formatted Division Data:', formattedDivisionData.value);
|
|
|
+ } else {
|
|
|
+ ElMessage.error(response.msg);
|
|
|
+ }
|
|
|
+};
|
|
|
+const onDivisionChange = (value) => {
|
|
|
+ // 确认选中的项存在
|
|
|
+ const selectedDivision = findNode(formattedDivisionData.value, value);
|
|
|
+ if (!selectedDivision) {
|
|
|
+ ElMessage.warning('未找到匹配的责任区划。');
|
|
|
+ // 将选中的值重置为 null 或空字符串，防止后续逻辑错误
|
|
|
+ divisionSelectedId.value = null;
|
|
|
+ } else {
|
|
|
+ console.log('Selected Division:', selectedDivision); // 调试输出
|
|
|
+ }
|
|
|
+};
|
|
|
+// 递归查找节点
|
|
|
+const findNode = (nodes, code) => {
|
|
|
+ for (let i = 0; i < nodes.length; i++) {
|
|
|
+ const node = nodes[i];
|
|
|
+ if (node.code === code) {
|
|
|
+ return node;
|
|
|
+ }
|
|
|
+ if (node.children && node.children.length > 0) {
|
|
|
+ const found = findNode(node.children, code);
|
|
|
+ if (found) {
|
|
|
+ return found;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+};
|
|
|
+// 格式化责任区划数据
|
|
|
+const formatDivisionData = (data) => {
|
|
|
+ return data.map((item) => ({
|
|
|
+ id: item.id,
|
|
|
+ label: item.label,
|
|
|
+ code: item.code,
|
|
|
+ children: item.children ? formatDivisionData(item.children) : []
|
|
|
+ }));
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ fetchResulData();
|
|
|
+ fetchDivisionData();
|
|
|
+});
|
|
|
+</script>
|
