From 4041ef323765aeaad7fa100557e9a84b4be97521 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Fri, 29 Aug 2025 16:31:25 +0800
Subject: [PATCH] feat:参数修改
---
src/views/resource/components/spotDetails.vue | 188 ++++++++++++++++++++++++++-----------
src/api/patchManagement/index.js | 8 +
src/views/resource/patchManagement.vue | 83 ++++++++++++----
3 files changed, 202 insertions(+), 77 deletions(-)
diff --git a/src/api/patchManagement/index.js b/src/api/patchManagement/index.js
index 6c96578..41be308 100644
--- a/src/api/patchManagement/index.js
+++ b/src/api/patchManagement/index.js
@@ -87,3 +87,11 @@
method: 'delete'
})
}
+// 编辑图斑信息
+export const patchEditApi = (data) => {
+ return request({
+ url: `/drone-device-core/patches/api/v1/Patches/updatePatchesInfo`,
+ method: 'put',
+ data
+ })
+}
\ No newline at end of file
diff --git a/src/views/resource/components/spotDetails.vue b/src/views/resource/components/spotDetails.vue
index 3da1633..cd160e0 100644
--- a/src/views/resource/components/spotDetails.vue
+++ b/src/views/resource/components/spotDetails.vue
@@ -1,6 +1,6 @@
<template>
<el-dialog
- class="spotDialog"
+ class="spotDialog"
:title="props.title"
v-model="uploadPatchDialog"
width="75%"
@@ -12,7 +12,16 @@
<div class="itemBoxLeft">
<div v-for="(item, index) in infoList" :key="index" class="itemCon">
<div class="itemBox">
- <div class="itemTitle"><span v-if="props.title === '图斑编辑' && (item.name === '文件名称' || item.name === '图斑类型')" style="color: red;">*</span>{{ item.name }}：</div>
+ <div class="itemTitle">
+ <span
+ v-if="
+ props.title === '图斑编辑' &&
+ (item.name === '文件名称' || item.name === '图斑类型')
+ "
+ style="color: red"
+ >*</span
+ >{{ item.name }}：
+ </div>
<div class="itemContent">
<template v-if="props.title === '图斑编辑' && item.editable">
<template v-if="item.name === '图斑类型'">
@@ -63,7 +72,11 @@
</template>
</el-table-column>
<el-table-column prop="dkbh" align="center" label="图斑名称" />
- <el-table-column prop="investigate" align="center" label="图斑状态" />
+ <el-table-column prop="is_exception" align="center" label="图斑状态">
+ <template #default="scope">
+ <span>{{ scope.row.is_exception === 2 ? '异常' : '正常' }}</span>
+ </template>
+ </el-table-column>
<el-table-column label="操作" align="center" v-if="props.title === '图斑编辑'">
<template #default="scope">
<span class="operationspan">删除</span>
@@ -75,8 +88,8 @@
</el-table>
<div class="pagination-container">
<el-pagination
- :current-page="params.current"
- :page-size="params.size"
+ :current-page="params.current"
+ :page-size="params.size"
background
layout="prev, pager, next"
prev-text="上一页"
@@ -96,8 +109,8 @@
></FunButton>
<!-- 完成/取消 -->
<div class="btnGroups" v-if="props.title === '图斑编辑'">
- <img @click="handleSave" src="@/assets/images/home/territory/savebtn.png" alt="" />
- <img src="@/assets/images/home/territory/cancelbtn.png" alt="" />
+ <img @click="handleSave" src="@/assets/images/home/territory/savebtn.png" alt="" />
+ <img @click="handleCancel" src="@/assets/images/home/territory/cancelbtn.png" alt="" />
</div>
<!-- 地图 -->
<div id="spotMap" class="ztzf-cesium" v-show="uploadPatchDialog"></div>
@@ -107,15 +120,22 @@
</template>
<script setup>
-import {spotManagementTableApi,searchManagementApi,uploadManagementApi,tableMapListApi} from '@/api/patchManagement/index'
-import {getCenterPoint, } from '@/utils/cesium/mapUtil.js';
+import { ElMessage } from 'element-plus';
+import {
+ patchEditApi,
+ spotManagementTableApi,
+ searchManagementApi,
+ uploadManagementApi,
+ tableMapListApi,
+} from '@/api/patchManagement/index';
+import { getCenterPoint } from '@/utils/cesium/mapUtil.js';
import { getPatchesSpotList } from '@/api/patchManagement/index';
import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
import { ref, watch, onBeforeUnmount, onMounted } from 'vue';
import FunButton from '@/views/resource/components/FunButton.vue';
const uploadPatchDialog = defineModel('show');
-const props = defineProps(['title','detailid']);
+const props = defineProps(['title', 'detailid', 'detailList', 'spotTypeOption']);
const polygonTableEle = ref(null);
let publicCesiumInstance = null;
let viewer = null;
@@ -123,6 +143,7 @@
const homeViewer = shallowRef(null);
let tbJwdList = [];
let total = ref(0);
+const refreshonload = inject('searchReset');
// 当前选中的图斑面数据
let nowSelectObj = ref({});
// 记录上一次点击高亮
@@ -140,40 +161,66 @@
const tableRowClassName = ({ rowIndex }) => {
return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row';
};
-const spotTypeOptions = ref([
- { value: '1', label: '综合类' },
- { value: '2', label: '矿山类' },
- { value: '3', label: '农田类' },
-]);
+const spotTypeOptions = ref([]);
const infoList = ref([
- { name: '文件名称', value: '55', field: 'job_info_num', editable: true },
- { name: '图斑类型', value: 'ee', field: 'name', editable: true },
- { name: '图斑数量', value: '', field: 'industry_type_str', editable: false },
- { name: '异常图斑数量', value: '', field: 'event_number', editable: false },
- { name: '行政区划', value: '', field: 'device_names', editable: false },
- { name: '数据来源', value: '', field: 'dept_name', editable: false },
- { name: '创建时间', value: '', field: 'cycle_time_value', editable: false },
- { name: '创建人', value: '', field: 'ai_type_str', editable: false },
+ { name: '文件名称', value: '', field: 'file_name', editable: true },
+ { name: '图斑类型', value: '', field: 'patches_type_desc', editable: true },
+ { name: '图斑数量', value: '', field: 'patches_num', editable: false },
+ { name: '异常图斑数量', value: '', field: 'exception_num', 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;
+ }
+ },
+ { immediate: true }
+);
+watch(
+ () => props.detailList,
+ newVal => {
+ if (newVal) {
+ updateInfoList(newVal);
+ }
+ },
+ { immediate: true }
+);
+
+// 更新infoList的方法
+const updateInfoList = detailData => {
+ infoList.value = infoList.value.map(item => {
+ // 根据field字段匹配props.detailList中的值
+ const fieldValue = detailData[item.field];
+ return {
+ ...item,
+ value: fieldValue !== undefined ? fieldValue : item.value,
+ };
+ });
+};
const params = ref({
current: 1,
size: 20,
});
// 图斑管理表格
-const getTableList =()=>{
-const params={
- patchesInfoId:props.detailid
-}
+const getTableList = () => {
+ const params = {
+ patchesInfoId: props.detailid,
+ };
tableMapListApi(params).then(res => {
- console.log('地图表格数据',res.data.data);
- tableData.value = res.data.data
- // 先清空地图现有图斑
- tbJwdList = [];
- viewer?.entities.removeAll(); // 清除所有实体
- // 加载图斑
- entitiesAddSpot();
- })
-}
+ console.log('地图表格数据', res.data.data);
+ tableData.value = res.data.data;
+ // 先清空地图现有图斑
+ tbJwdList = [];
+ viewer?.entities.removeAll(); // 清除所有实体
+ // 加载图斑
+ entitiesAddSpot();
+ });
+};
const handleSizeChange = () => {};
const handleCurrentChange = () => {};
@@ -253,6 +300,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])
+ }
+ })
// 表格也对应选中数据 TODO
const data = pick.id?.customInfo;
// 高亮图斑
@@ -330,6 +392,26 @@
isDrawPolygon.value = false;
}
};
+// 完成
+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?.value || '',
+ type: patchTypeItem?.value || '',
+ id: props.detailList.id,
+ };
+ console.log('保存', updateParams);
+
+ patchEditApi(updateParams).then(res => {
+ ElMessage.success(res.data.data);
+ refreshonload();
+ uploadPatchDialog.value = false;
+ });
+};
+// 取消
+const handleCancel = () => {};
provide('selectionIds', selectionIds);
provide('homeViewer', homeViewer);
provide('viewInstance', viewInstance);
@@ -349,7 +431,6 @@
setTimeout(() => {
initMap();
getTableList();
-
}, 0);
} else {
if (funButtonEle.value) {
@@ -359,18 +440,16 @@
destroyMap();
}
});
-onMounted(()=>{
-
-})
+onMounted(() => {});
onBeforeUnmount(() => {
destroyMap();
});
</script>
<style lang="scss">
.spotDialog {
-.el-dialog.is-align-center .el-dialog__header .el-dialog__title {
- padding-left: 16px !important;
-}
+ .el-dialog.is-align-center .el-dialog__header .el-dialog__title {
+ padding-left: 16px !important;
+ }
}
</style>
<style scoped lang="scss">
@@ -485,19 +564,19 @@
// 表格样式
:deep(.el-table) {
// 清除表格内部横线和竖线
- &::before,
- &::after,
- .el-table__inner-wrapper::before,
- .el-table__inner-wrapper::after {
- background-color: transparent !important;
- display: none !important; // 彻底隐藏伪元素边框
- }
+ &::before,
+ &::after,
+ .el-table__inner-wrapper::before,
+ .el-table__inner-wrapper::after {
+ background-color: transparent !important;
+ display: none !important; // 彻底隐藏伪元素边框
+ }
.el-table__header-wrapper th {
- border: none !important;
- }
+ border: none !important;
+ }
--el-table-bg-color: transparent !important;
--el-table-tr-bg-color: transparent !important;
-
+
--el-table-row-hover-bg-color: rgba(30, 58, 138, 0.5) !important;
--el-table-current-row-bg-color: rgba(30, 58, 138, 0.7) !important;
color: #fff !important;
@@ -525,7 +604,6 @@
overflow: hidden;
text-overflow: ellipsis;
}
-
}
}
@@ -588,7 +666,7 @@
display: flex;
justify-content: center;
height: 20px;
- margin: 24px 0 14px 0;
+ margin: 24px 0 14px 0;
}
}
diff --git a/src/views/resource/patchManagement.vue b/src/views/resource/patchManagement.vue
index 9783ca5..f323d11 100644
--- a/src/views/resource/patchManagement.vue
+++ b/src/views/resource/patchManagement.vue
@@ -63,7 +63,6 @@
</el-select>
</el-form-item>
<el-form-item class="center-align">
- <!-- <el-button type="primary"> 图斑上传 </el-button> -->
<el-upload
action="#"
:show-file-list="false"
@@ -83,8 +82,10 @@
v-model:show="uploadPatchDialog"
:title="spotDetailsTitle"
:detailid="detailid"
+ :detailList="detailList"
+ :spotTypeOption="spotTypeOption"
></SpotDetails>
- <!-- <patchDetails ref="patchDetails" /> -->
+
</basic-container>
</template>
@@ -107,6 +108,7 @@
import patchDetails from '@/views/resource/components/patchDetails.vue';
import SpotDetails from '@/views/resource/components/spotDetails.vue';
const spotDetailsTitle = ref('');
+const detailList = ref('')
const store = useStore();
const router = useRouter();
const ruleFormRef = ref(null);
@@ -141,7 +143,7 @@
currentPage: 1,
total: 0,
lotTypeId: '',
- updateUser: '',
+ createUser: '',
areaCode:'',
fileName:''
});
@@ -209,7 +211,7 @@
},
{
label: '行政区划',
- prop: 'ossCode111',
+ prop: 'areaName',
span: 24,
searchLabelWidth: 100,
search: true,
@@ -225,7 +227,7 @@
},
{
label: '数据来源',
- prop: 'ossCode',
+ prop: 'dataFrom',
span: 24,
rules: [{ required: true, message: '请输入数据来源', trigger: 'blur' }],
},
@@ -270,11 +272,12 @@
const ids = computed(() => selectionList.value.map(ele => ele.id).join(','));
// 获取行政区划
-
+const regionalData = ref(null)
const requestDockInfo = () => {
- getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => {
- const areaCodes = [361104, 361124, 3611040, 361104000000];
- const rawData = res.data.data ? [res.data.data] : [];
+ getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => {
+ const rawData = res.data.data ? [res.data.data] : [];
+ regionalData.value = rawData
+ // console.log('quyu',regionalData.value);
// 过滤函数
const filterTree = nodes => {
return nodes.filter(node => {
@@ -304,16 +307,25 @@
uniqueMap.set(key, value);
}
});
+ 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);
+ }
+ });
spotTypeOption.value = Array.from(uniqueMap).map(([key, value]) => ({
label: value,
value: key,
}));
- creatorOption.value = res.data.data.user_names.map(item => ({
- label: item,
- value: item,
+ creatorOption.value = Array.from(creatorOptionuniqueMap).map(([key, value]) => ({
+ label: value,
+ value: key,
}));
regionalScope.value = res.data.data.area_codes;
requestDockInfo();
+
+
});
};
// ===== watch =====
@@ -372,6 +384,9 @@
};
const searchReset = () => {
+page.value.areaCode=''
+page.value.createUser=''
+page.value.fileName=''
page.value.lotTypeId =''
page.value.currentPage=1
page.value.pageSize=20
@@ -382,7 +397,9 @@
page.value.currentPage = 1;
page.value.lotTypeId = params.patches_type_desc;
page.value.createUser = params.user_name;
-
+ page.value.fileName=params.file_name
+ page.value.areaCode=params.areaName
+ page.value.createUser= params.user_name
onLoad(page.value);
done();
};
@@ -424,24 +441,46 @@
current: pageInfo.currentPage,
size: pageInfo.pageSize,
lotTypeId: pageInfo.lotTypeId,
-
+ fileName:pageInfo.fileName,
+ areaCode:pageInfo.areaCode,
+ createUser:pageInfo.createUser
};
loading.value = true;
spotManagementTableApi(searchparams).then(res => {
const d = res.data.data;
page.value.total = d.total;
- data.value = d.records;
+ data.value = d.records.map(i=>({
+ ...i,
+ dataFrom:i.date_from === 0? '本地上传':'国土调查云',
+ areaName: findAreaName(regionalData.value, 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 uploadPatch = (row, type = 'detail') => {
detailid.value = row.id;
uploadPatchDialog.value = true;
spotDetailsTitle.value = type === 'detail' ? '图斑详情' : '图斑编辑';
-
+ detailList.value = row
};
// 跳转至图斑类型管理页面
@@ -451,7 +490,6 @@
// 下载图斑
const downloadPatch = () => {
-
if (!selectionList.value.length) {
return ElMessage.warning('请选择需要导出的数据');
}
@@ -466,14 +504,11 @@
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
-
loading.value = false;
});
};
// 图斑上传
const uploadFlightFile = (file, t) => {
- console.log('ruleForm', ruleForm, file);
-
const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);
if (!['kmz', 'kml', 'zip'].includes(fileSuffix)) {
return ElMessage.error('请上传zip/kmz/kml格式的文件');
@@ -491,12 +526,16 @@
uploadManagementApi(data).then(res => {
if (res.data.code !== 0) return ElMessage.error('上传失败');
ElMessage.success('上传成功');
-
+box.value = false
+searchReset()
init();
});
};
+provide('searchReset', searchReset);
onMounted(() => {
+ requestDockInfo()
getsearchManagementApi();
+
});
</script>
--
Gitblit v1.9.3