From f8681079a2acb7c0e7cacc6b67c5c99398181397 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 01 Sep 2025 11:17:37 +0800
Subject: [PATCH] feat:添加删除接口，调整绘制
---
src/views/resource/components/spotDetails.vue | 113 ++++++++------
src/api/patchManagement/index.js | 8 +
src/views/resource/patchManagement.vue | 62 ++++---
src/views/resource/patchTypeManagement.vue | 274 +++++++++++++++++----------------
4 files changed, 252 insertions(+), 205 deletions(-)
diff --git a/src/api/patchManagement/index.js b/src/api/patchManagement/index.js
index 41be308..50a7ae1 100644
--- a/src/api/patchManagement/index.js
+++ b/src/api/patchManagement/index.js
@@ -94,4 +94,12 @@
method: 'put',
data
})
+}
+// 删除数据
+export const deletePatches = params => {
+ return request({
+ url: `/drone-device-core/patches/api/v1/Patches/deleteBatch`,
+ method: 'delete',
+ params,
+ })
}
\ No newline at end of file
diff --git a/src/views/resource/components/spotDetails.vue b/src/views/resource/components/spotDetails.vue
index c8acb5b..09f5b46 100644
--- a/src/views/resource/components/spotDetails.vue
+++ b/src/views/resource/components/spotDetails.vue
@@ -26,10 +26,9 @@
<template v-if="props.title === '图斑编辑' && item.editable">
<template v-if="item.name === '图斑类型'">
<el-select
- v-model="item.value"
+ v-model="item.value"
placeholder="请选择图斑类型"
style="width: 100%"
-
>
<el-option
v-for="opt in spotTypeOptions"
@@ -79,10 +78,8 @@
</el-table-column>
<el-table-column label="操作" align="center" v-if="props.title === '图斑编辑'">
<template #default="scope">
- <span class="operationspan">删除</span>
- <span class="operationspan" @click.stop="handleSelectionChange(scope.row)"
- >编辑</span
- >
+ <span class="operationspan" @click="handleDelete(scope.row)">删除</span>
+ <span class="operationspan" @click="handleSelectionChange(scope.row)">编辑</span>
</template>
</el-table-column>
</el-table>
@@ -120,13 +117,14 @@
</template>
<script setup>
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
import {
patchEditApi,
spotManagementTableApi,
searchManagementApi,
uploadManagementApi,
tableMapListApi,
+ deletePatches,
} from '@/api/patchManagement/index';
import { getCenterPoint } from '@/utils/cesium/mapUtil.js';
import { getPatchesSpotList } from '@/api/patchManagement/index';
@@ -164,39 +162,41 @@
const spotTypeOptions = ref([]);
const infoList = ref([
{ name: '文件名称', value: '', field: 'file_name', editable: true },
- { name: '图斑类型', value: '', field: 'lot_type_id', editable: true },
+ { name: '图斑类型', value: '', field: 'lot_type_id', editable: true },
{ name: '图斑数量', value: '', field: 'patches_num', editable: false },
{ name: '异常图斑数量', value: '', field: 'exception_num', editable: false },
- { name: '行政区划', value: '', field: 'area_code', editable: false },
+ { name: '行政区划', value: '', field: 'areaName', editable: false },
{ name: '数据来源', value: '', field: 'dataFrom', editable: false },
{ name: '创建时间', value: '', field: 'create_time', editable: false },
{ name: '创建人', value: '', field: 'user_name', editable: false },
-])
-watch(() => props.spotTypeOption, (newOptions) => {
- if (newOptions) {
- spotTypeOptions.value = newOptions.map(opt => ({
- label: opt.label,
- value: String(opt.value)
- }));
- }
-}, { immediate: true });
+]);
+watch(
+ () => props.spotTypeOption,
+ newOptions => {
+ if (newOptions) {
+ spotTypeOptions.value = newOptions.map(opt => ({
+ label: opt.label,
+ value: String(opt.value),
+ }));
+ }
+ },
+ { immediate: true }
+);
watch(
() => props.detailList,
newVal => {
if (newVal) {
- console.log('详情',newVal);
-
updateInfoList(newVal);
}
},
{ immediate: true }
);
// 将 lot_type_id 转换为对应的 label
-const getPatchTypeLabel = (lotTypeId) => {
+const getPatchTypeLabel = lotTypeId => {
const option = spotTypeOptions.value.find(opt => opt.value === String(lotTypeId));
return option ? option.label : '';
};
-const updateInfoList = (detailData) => {
+const updateInfoList = detailData => {
infoList.value = infoList.value.map(item => {
let value = detailData[item.field] !== undefined ? detailData[item.field] : item.value;
// 处理图斑类型字段
@@ -207,7 +207,7 @@
...item,
value: detailData.patches_type_desc,
// 保留原始 lot_type_id 用于提交
- originalValue: detailData.lot_type_id
+ originalValue: detailData.lot_type_id,
};
}
// 否则根据 lot_type_id 查找对应的 label
@@ -215,14 +215,14 @@
return {
...item,
value: getPatchTypeLabel(detailData.lot_type_id),
- originalValue: detailData.lot_type_id
+ originalValue: detailData.lot_type_id,
};
}
}
-
+
return {
...item,
- value: value
+ value: value,
};
});
};
@@ -236,8 +236,10 @@
patchesInfoId: props.detailid,
};
tableMapListApi(params).then(res => {
- console.log('地图表格数据', res.data.data);
- tableData.value = res.data.data;
+ tableData.value = res.data.data.map(item => ({
+ ...item,
+ dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
+ }));
// 先清空地图现有图斑
tbJwdList = [];
viewer?.entities.removeAll(); // 清除所有实体
@@ -324,21 +326,21 @@
// 鼠标触发点击图斑高亮 pick：可以获取当前图斑数据
const spotHighlighting = (click, pick, viewer) => {
if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
- let clickTableID = tableData.value.findIndex(i => i.id == pick.id?.customInfo.id)
- // 计算表格滚动至中间位置
- const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr')
- let targetRow = rows[clickTableID]
- nextTick(() => {
- const table = polygonTableEle?.value
- if (!table) return
- if (targetRow) {
- targetRow.scrollIntoView({
- behavior: 'smooth',
- block: 'center',
- })
- polygonTableEle?.value.setCurrentRow(tableData.value[clickTableID])
- }
- })
+ let clickTableID = tableData.value.findIndex(i => i.id == pick.id?.customInfo.id);
+ // 计算表格滚动至中间位置
+ const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr');
+ let targetRow = rows[clickTableID];
+ nextTick(() => {
+ const table = polygonTableEle?.value;
+ if (!table) return;
+ if (targetRow) {
+ targetRow.scrollIntoView({
+ behavior: 'smooth',
+ block: 'center',
+ });
+ polygonTableEle?.value.setCurrentRow(tableData.value[clickTableID]);
+ }
+ });
// 表格也对应选中数据 TODO
const data = pick.id?.customInfo;
// 高亮图斑
@@ -403,7 +405,6 @@
};
// 编辑
const handleSelectionChange = row => {
- // console.log('编辑', row.id);
let curRowIsSelect = row;
selectionIds.value = row.id;
selectionList.value = row;
@@ -416,21 +417,35 @@
isDrawPolygon.value = false;
}
};
+// 删除
+const handleDelete = row => {
+ ElMessageBox.confirm('确认删除当前行图斑?', '提示', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning',
+ }).then(() => {
+ deletePatches({ ids: row.id }).then(res => {
+ if (res.data.code !== 0) return ElMessage.warning('删除失败');
+ ElMessage.success('删除成功');
+ getTableList();
+ });
+ });
+};
+
// 完成
const handleSave = () => {
const fileNameItem = infoList.value.find(item => item.name === '文件名称');
const patchTypeItem = infoList.value.find(item => item.name === '图斑类型');
-
const updateParams = {
file_name: fileNameItem?.value || '',
- lot_type_id: patchTypeItem?.originalValue || patchTypeItem?.value || '',
- type: patchTypeItem?.originalValue || patchTypeItem?.value || '',
+ lot_type_id: patchTypeItem?.originalValue || patchTypeItem?.value || '',
+ type: patchTypeItem?.originalValue || patchTypeItem?.value || '',
id: props.detailList.id,
};
patchEditApi(updateParams).then(res => {
- console.log('111',res.data.data);
-
+ console.log('111', res.data.data);
+
ElMessage.success(res.data.data);
refreshonload();
uploadPatchDialog.value = false;
diff --git a/src/views/resource/patchManagement.vue b/src/views/resource/patchManagement.vue
index a62e683..371c723 100644
--- a/src/views/resource/patchManagement.vue
+++ b/src/views/resource/patchManagement.vue
@@ -88,7 +88,6 @@
</basic-container>
</template>
-
<script setup>
import {
spotManagementTableApi,
@@ -151,6 +150,8 @@
const selectionList = ref([]);
const option = ref({
+ align: 'center',
+ headerAlign: 'center',
addBtn: false,
tip: false,
searchShow: true,
@@ -211,8 +212,9 @@
},
{
label: '行政区划',
- prop: 'area_code',
+ prop: 'areaName',
span: 24,
+ width:180,
searchLabelWidth: 100,
search: true,
searchSpan: 4,
@@ -262,7 +264,6 @@
// ===== computed =====
const userInfo = computed(() => store.getters.userInfo);
const permission = computed(() => store.getters.permission);
-
const permissionList = computed(() => ({
addBtn: !!permission.value.oss_add,
viewBtn: !!permission.value.oss_view,
@@ -272,13 +273,11 @@
const ids = computed(() => selectionList.value.map(ele => ele.id).join(','));
// 获取行政区划
-const regionalData = ref(null)
+const regionalData = ref([])
const requestDockInfo = () => {
getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => {
const rawData = res.data.data ? [res.data.data] : [];
- regionalData.value = rawData
- // console.log('quyu',regionalData.value);
- // 过滤函数
+ regionalData.value = rawData;
const filterTree = nodes => {
return nodes.filter(node => {
const nodeCodeStr = node.id.toString();
@@ -295,6 +294,7 @@
});
};
deptTreeData.value = filterTree(rawData);
+ onLoad(page.value);
});
};
// 获取搜索数据
@@ -398,7 +398,7 @@
page.value.lotTypeId = params.patches_type_desc;
page.value.createUser = params.user_name;
page.value.fileName=params.file_name
- page.value.areaCode=params.area_code
+ page.value.areaCode=params.areaName
page.value.createUser= params.user_name
onLoad(page.value);
done();
@@ -453,28 +453,41 @@
.map(i=>({
...i,
dataFrom:i.date_from === 0? '本地上传':'国土调查云',
- // areaName: findAreaName(regionalData.value, i.area_code)
+ areaName: findAreaName(i.area_code)
}));
console.log('表格数据',data.value );
loading.value = false;
selectionClear();
});
};
-// const findAreaName = (nodes, areaCode) => {
-// if (!nodes || nodes.length === 0) return '';
-// for (const node of nodes) {
-// if (node.id === areaCode) {
-// return node.name;
-// }
-
-// if (node.childrens && node.childrens.length > 0) {
-// const found = findAreaName(node.childrens, areaCode);
-// if (found) return found;
-// }
-// }
-
-// return '';
-// };
+const findAreaName = (areaCode) => {
+ const nodes = regionalData.value;
+ if (!nodes || nodes.length === 0) return areaCode;
+
+ const normalizeCode = (code) => {
+ if (!code) return '';
+ const strCode = String(code).replace(/0+$/, '');
+ return strCode.length >= 6 ? strCode : '';
+ };
+ const targetCode = normalizeCode(areaCode);
+ const findInTree = (treeNodes, needFullPath = false, parentPath = []) => {
+ for (const node of treeNodes) {
+ const currentPath = [...parentPath, node.name];
+
+ if (normalizeCode(node.id) === targetCode) {
+ return needFullPath ? currentPath.join('/') : node.name;
+ }
+
+ if (node.childrens?.length > 0) {
+ const found = findInTree(node.childrens, needFullPath, currentPath);
+ if (found) return found;
+ }
+ }
+ return null;
+ };
+
+ return findInTree(nodes, true) || areaCode;
+};
// 图斑详情/编辑
const uploadPatch = (row, type = 'detail') => {
detailid.value = row.id;
@@ -533,7 +546,6 @@
};
provide('searchReset', searchReset);
onMounted(() => {
- requestDockInfo()
getsearchManagementApi();
});
diff --git a/src/views/resource/patchTypeManagement.vue b/src/views/resource/patchTypeManagement.vue
index 252ce0f..8d6f2eb 100644
--- a/src/views/resource/patchTypeManagement.vue
+++ b/src/views/resource/patchTypeManagement.vue
@@ -1,15 +1,28 @@
<template>
<basic-container>
- <avue-crud :option="option" :table-loading="loading" :data="data" v-model:page="page" :permission="permissionList"
- v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel" :before-open="beforeOpen"
- @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
- @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
+ <avue-crud
+ :option="option"
+ :table-loading="loading"
+ :data="data"
+ v-model:page="page"
+ :permission="permissionList"
+ v-model="form"
+ ref="crud"
+ @row-update="rowUpdate"
+ @row-save="rowSave"
+ @row-del="rowDel"
+ :before-open="beforeOpen"
+ @search-change="searchChange"
+ @search-reset="searchReset"
+ @selection-change="selectionChange"
+ @current-change="currentChange"
+ @size-change="sizeChange"
+ @refresh-change="refreshChange"
+ @on-load="onLoad"
+ >
<template #search-menu="{ row, size }">
- <el-button icon="el-icon-back" @click="goPatchManagement">
- 返回
- </el-button>
+ <el-button icon="el-icon-back" @click="goPatchManagement"> 返回 </el-button>
</template>
-
<template #status="{ row }">
<el-tag>{{ row.statusName }}</el-tag>
</template>
@@ -21,28 +34,34 @@
</template>
<script setup>
-import {searchManagementApi,listOfSpotTypesApi,spotTypesCreateApi,editSpotTypeApi,deleteSpotTypeApi} from '@/api/patchManagement/index'
-import { ref, computed, watch } from 'vue'
-import { enable, disable } from '@/api/resource/oss'
-import { useStore } from 'vuex'
-import func from '@/utils/func'
-import { useRouter } from 'vue-router'
+import {
+ searchManagementApi,
+ listOfSpotTypesApi,
+ spotTypesCreateApi,
+ editSpotTypeApi,
+ deleteSpotTypeApi,
+} from '@/api/patchManagement/index';
+import { ref, computed, watch } from 'vue';
+import { enable, disable } from '@/api/resource/oss';
+import { useStore } from 'vuex';
+import func from '@/utils/func';
+import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
-const store = useStore()
-const router = useRouter()
+const store = useStore();
+const router = useRouter();
// ---------------- data ----------------
-const form = ref({})
-const query = ref({})
+const form = ref({});
+const query = ref({});
const creatorOption = ref([]);
-const loading = ref(true)
+const loading = ref(true);
const page = ref({
pageSize: 20,
currentPage: 1,
total: 0,
- lotValue:"",
- userName:''
-})
-const selectionList = ref([])
+ lotValue: '',
+ userName: '',
+});
+const selectionList = ref([]);
const option = ref({
addBtn: true,
addBtnText: '新增类型',
@@ -50,7 +69,7 @@
searchShow: true,
searchMenuSpan: 16,
searchMenuPosition: 'right',
- border: true,
+ border: true,
index: true,
selection: true,
grid: false,
@@ -70,112 +89,108 @@
prop: 'patches_type',
search: true,
searchSpan: 4,
- rules: [
- { required: true, message: '请输入类型名称', trigger: 'blur' },
- ],
+ rules: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
},
{
label: '创建时间',
prop: 'create_time',
- addDisplay: false,
+ addDisplay: false,
editDisplay: false,
- rules: [
- { required: true, message: '请输入创建时间', trigger: 'blur' },
- ],
+ rules: [{ required: true, message: '请输入创建时间', trigger: 'blur' }],
},
{
label: '创建人',
prop: 'user_name',
search: true,
- addDisplay: false,
- editDisplay: false,
+ addDisplay: false,
+ editDisplay: false,
searchSpan: 4,
- type: 'select',
+ type: 'select',
dicData: creatorOption,
props: {
label: 'label',
value: 'value',
},
- rules: [
- { required: true, message: '请输入创建人', trigger: 'blur' },
- ],
+ rules: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
},
],
-})
+});
-const data = ref([])
+const data = ref([]);
// 获取搜索数据
const getsearchManagementApi = () => {
searchManagementApi().then(res => {
- creatorOption.value = res.data.data.user_names.map(item => ({
- label: item,
- value: item,
- }));
-
+ const creatorOptionuniqueMap = new Map();
+ res.data.data.user_names.forEach(item => {
+ const [key, value] = Object.entries(item)[0];
+ if (!creatorOptionuniqueMap.has(key)) {
+ creatorOptionuniqueMap.set(key, value);
+ }
+ });
+ creatorOption.value = Array.from(creatorOptionuniqueMap).map(([key, value]) => ({
+ label: value,
+ value: value,
+ }));
});
};
-
// ---------------- watch ----------------
watch(
() => form.value.category,
() => {
- const category = func.toInt(form.value.category)
+ const category = func.toInt(form.value.category);
option.value.column.filter(item => {
if (item.prop === 'appId') {
- item.display = category === 4
+ item.display = category === 4;
}
- })
+ });
}
-)
-
-
+);
// ---------------- computed ----------------
-const permission = computed(() => store.getters.permission)
+const permission = computed(() => store.getters.permission);
const permissionList = computed(() => ({
addBtn: validData(permission.value.oss_add),
viewBtn: validData(permission.value.oss_view),
delBtn: validData(permission.value.oss_delete),
editBtn: validData(permission.value.oss_edit),
-}))
+}));
const ids = computed(() => {
- return selectionList.value.map(ele => ele.id).join(',')
-})
+ return selectionList.value.map(ele => ele.id).join(',');
+});
// ---------------- methods ----------------
const rowSave = (row, done, loadingFn) => {
-const createParams ={
- patches_type:row.patches_type
-,
-}
+ const createParams = {
+ patches_type: row.patches_type,
+ };
spotTypesCreateApi(createParams).then(
() => {
- onLoad(page.value)
- ElMessage.success('操作成功!')
- done()
+ onLoad(page.value);
+ ElMessage.success('操作成功!');
+ done();
},
error => {
- console.log(error)
- loadingFn()
+ console.log(error);
+ loadingFn();
}
- )
-}
+ );
+};
const rowUpdate = (row, index, done, loadingFn) => {
editSpotTypeApi(row).then(
- (res) => {
- onLoad(page.value)
- ElMessage.success('操作成功!')
- done()
+ res => {
+ onLoad(page.value);
+ ElMessage.success('操作成功!');
+ done();
},
error => {
- console.log(error)
- loadingFn()
+ console.log(error);
+ loadingFn();
}
- )
-}
+ );
+};
const rowDel = row => {
ElMessageBox.confirm('确定将选择数据删除?', '提示', {
@@ -185,37 +200,35 @@
})
.then(() => deleteSpotTypeApi([row.id]))
.then(() => {
- onLoad(page.value)
- ElMessage.success('操作成功!')
- })
-}
+ onLoad(page.value);
+ ElMessage.success('操作成功!');
+ });
+};
const searchReset = () => {
-page.value.userName=''
-page.value.lotValue =''
-page.value.currentPage=1
-page.value.pageSize=20
- onLoad(page.value)
-}
+ page.value.userName = '';
+ page.value.lotValue = '';
+ page.value.currentPage = 1;
+ page.value.pageSize = 20;
+ onLoad(page.value);
+};
const searchChange = (params, done) => {
- page.value.currentPage = 1
- page.value.lotValue = params.patches_type
- page.value.userName = params.user_name
- onLoad(page.value)
- done()
-}
+ page.value.currentPage = 1;
+ page.value.lotValue = params.patches_type;
+ page.value.userName = params.user_name;
+ onLoad(page.value);
+ done();
+};
const selectionChange = list => {
-
-
// selectionList.value = list
-}
+};
const selectionClear = () => {
- selectionList.value = []
+ selectionList.value = [];
// crudRef.value.toggleSelection()
-}
+};
const handleEnable = row => {
ElMessageBox.confirm('是否确定启用这条配置?', '提示', {
@@ -225,11 +238,11 @@
})
.then(() => enable(row.id))
.then(() => {
- onLoad(page.value)
- ElMessage.success('操作成功!')
+ onLoad(page.value);
+ ElMessage.success('操作成功!');
// crudRef.value.toggleSelection()
- })
-}
+ });
+};
const handleDisable = row => {
ElMessageBox.confirm('是否确定禁用这条配置?', '提示', {
@@ -239,12 +252,11 @@
})
.then(() => disable(row.id))
.then(() => {
- onLoad(page.value)
- ElMessage.success('操作成功!')
+ onLoad(page.value);
+ ElMessage.success('操作成功!');
// crudRef.value.toggleSelection()
- })
-}
-
+ });
+};
const beforeOpen = (done, type) => {
// if (['edit', 'view'].includes(type)) {
@@ -252,45 +264,45 @@
// // form.value = res.data.data
// // })
// }
- done()
-}
+ done();
+};
const currentChange = currentPage => {
- page.value.currentPage = currentPage
-}
+ page.value.currentPage = currentPage;
+};
const sizeChange = pageSize => {
- page.value.pageSize = pageSize
-}
+ page.value.pageSize = pageSize;
+};
const refreshChange = () => {
- onLoad(page.value, query.value)
-}
+ onLoad(page.value, query.value);
+};
const onLoad = (pageParam, params = {}) => {
-const searchparams ={
- current:pageParam.currentPage,
- size:pageParam.pageSize,
- lotValue:pageParam.lotValue,
- userName:pageParam.userName
-}
- loading.value = true
+ const searchparams = {
+ current: pageParam.currentPage,
+ size: pageParam.pageSize,
+ lotValue: pageParam.lotValue,
+ userName: pageParam.userName,
+ };
+ loading.value = true;
listOfSpotTypesApi(searchparams).then(res => {
- const resData = res.data.data
- page.value.total = resData.total
- data.value = resData.records
- loading.value = false
- selectionClear()
- })
-}
+ const resData = res.data.data;
+ page.value.total = resData.total;
+ data.value = resData.records;
+ loading.value = false;
+ selectionClear();
+ });
+};
// ---------------- extra ----------------
const goPatchManagement = () => {
- router.push({ path: '/resource/patchManagement' })
-}
+ router.push({ path: '/resource/patchManagement' });
+};
// ---------------- utils ----------------
-function validData (value) {
- return value !== undefined && value !== null && value !== false
+function validData(value) {
+ return value !== undefined && value !== null && value !== false;
}
onMounted(() => {
@@ -298,4 +310,4 @@
});
</script>
-<style scoped lang="scss"></style>
\ No newline at end of file
+<style scoped lang="scss"></style>
--
Gitblit v1.9.3