From 1a8a9ff4fd90e28bf33bca809c5ea0372db3dd48 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Thu, 04 Sep 2025 17:13:34 +0800
Subject: [PATCH] feat:设置间距
---
src/views/resource/components/spotDetails.vue | 167 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 113 insertions(+), 54 deletions(-)
diff --git a/src/views/resource/components/spotDetails.vue b/src/views/resource/components/spotDetails.vue
index bc2d166..aec18a0 100644
--- a/src/views/resource/components/spotDetails.vue
+++ b/src/views/resource/components/spotDetails.vue
@@ -28,7 +28,7 @@
<el-select
v-model="item.value"
placeholder="请选择图斑类型"
- style="width: 100%"
+ style="width: 102%"
>
<el-option
v-for="opt in spotTypeOptions"
@@ -39,11 +39,11 @@
</el-select>
</template>
<template v-else-if="item.name === '文件名称'">
- <el-input v-model="item.value" />
+ <el-input style="width: 102%" v-model="item.value" />
</template>
</template>
- <template v-else>
- <div class="itemValue">{{ item.value }}</div>
+ <template v-else >
+ <div class="itemValue" :class="{ 'error-text': item.name === '异常图斑数量' }">{{ item.value }}</div>
</template>
</div>
</div>
@@ -59,9 +59,9 @@
<div class="tabname">图斑列表</div>
<el-table
ref="polygonTableEle"
- highlight-current-row
+ highlight-current-row
:row-class-name="tableRowClassName"
- :data="tableData"
+ :data="tableData"
@row-click="handleLocationPolygon"
>
<el-table-column type="index" align="center" width="30" label="序号">
@@ -89,7 +89,8 @@
:current-page="params.page"
:page-size="params.pageSize"
background
- layout="prev, pager, next"
+ layout="prev, pager, next, ..."
+ :pager-count="3"
prev-text="上一页"
next-text="下一页"
:total="total"
@@ -143,6 +144,9 @@
let tbJwdList = [];
let total = ref(0);
const refreshonload = inject('searchReset');
+const initialFileName = ref('');
+const initialSpotTypeId = ref('');
+const initialSpotTypeLabel = ref('');
// 当前选中的图斑面数据
let nowSelectObj = ref({});
// 记录上一次点击高亮
@@ -156,6 +160,7 @@
const selectionList = ref([]);
// 当前在编辑状态的异常图斑
let curCustomPolygon = null;
+
// 表格隔行变色
const tableRowClassName = ({ rowIndex }) => {
return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row';
@@ -198,38 +203,32 @@
return option ? option.label : '';
};
const updateInfoList = detailData => {
+
+ if (detailData && (initialFileName.value === '' || initialSpotTypeId.value === '')) {
+ initialFileName.value = detailData.file_name || '';
+ initialSpotTypeId.value = detailData.lot_type_id || '';
+ initialSpotTypeLabel.value = detailData.patches_type_desc
+ ? detailData.patches_type_desc
+ : getPatchTypeLabel(detailData.lot_type_id);
+ }
+
infoList.value = infoList.value.map(item => {
let value = detailData[item.field] !== undefined ? detailData[item.field] : item.value;
- // 处理图斑类型字段
+
if (item.name === '图斑类型') {
- // 如果有 patches_type_desc，显示它（但存储的是 lot_type_id）
if (detailData.patches_type_desc !== undefined) {
- return {
- ...item,
- value: detailData.patches_type_desc,
- // 保留原始 lot_type_id 用于提交
- originalValue: detailData.lot_type_id,
- };
- }
- // 否则根据 lot_type_id 查找对应的 label
- else if (detailData.lot_type_id !== undefined) {
- return {
- ...item,
- value: getPatchTypeLabel(detailData.lot_type_id),
- originalValue: detailData.lot_type_id,
- };
+ return { ...item, value: detailData.patches_type_desc, originalValue: detailData.lot_type_id };
+ } else if (detailData.lot_type_id !== undefined) {
+ return { ...item, value: getPatchTypeLabel(detailData.lot_type_id), originalValue: detailData.lot_type_id };
}
}
- return {
- ...item,
- value: value,
- };
+ return { ...item, value: value };
});
};
const params = ref({
page: 1,
- pageSize: 20,
+ pageSize: 10,
});
// 图斑管理表格
const getTableList = () => {
@@ -279,6 +278,7 @@
};
// 初始化所有图斑
const entitiesAddSpot = () => {
+ viewer?.entities.removeAll(); //清除旧实体
tableData.value.forEach(item => {
// 取出当中经纬度
const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
@@ -324,6 +324,11 @@
const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
homeViewer.value?.camera.flyToBoundingSphere(boundingSphere, {
duration: 0,
+ offset: new Cesium.HeadingPitchRange(
+ Cesium.Math.toRadians(-45),
+ Cesium.Math.toRadians(-90),
+
+ ),
});
}
viewInstance.value?.removeLeftClickEvent('spotHighlighting');
@@ -444,24 +449,54 @@
});
};
-// 完成
+// 保存
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,
- };
- patchEditApi(updateParams).then(res => {
- ElMessage.success(res.data.data);
- refreshonload();
- uploadPatchDialog.value = false;
- });
+ const fileNameItem = infoList.value.find(item => item.name === '文件名称');
+ const patchTypeItem = infoList.value.find(item => item.name === '图斑类型');
+ let lotTypeId;
+ // 检查value是否为数字类型（包括字符串形式的数字）
+ const isValueNumber =
+ !isNaN(Number(patchTypeItem.value)) &&
+ patchTypeItem.value !== '' &&
+ patchTypeItem.value !== null &&
+ patchTypeItem.value !== undefined;
+ console.log('isValueNumber',isValueNumber);
+ if (isValueNumber) {
+ // 转换为数字类型
+ lotTypeId = Number(patchTypeItem.value);
+ } else {
+ // 使用原始值
+ lotTypeId = patchTypeItem.originalValue;
+ }
+ // 构建请求参数
+ const updateParams = {
+ file_name: fileNameItem.value,
+ lot_type_id: lotTypeId,
+ type: lotTypeId,
+ id: props.detailList.id,
+ };
+ patchEditApi(updateParams).then(res => {
+ ElMessage.success(res.data.data);
+ refreshonload();
+ uploadPatchDialog.value = false;
+ });
};
// 取消
-const handleCancel = () => {};
+const handleCancel = () => {
+ const fileNameItem = infoList.value.find(item => item.name === '文件名称');
+ const spotTypeItem = infoList.value.find(item => item.name === '图斑类型');
+
+ if (fileNameItem) {
+ fileNameItem.value = initialFileName.value;
+ }
+ if (spotTypeItem) {
+ spotTypeItem.value = initialSpotTypeLabel.value;
+ spotTypeItem.originalValue = initialSpotTypeId.value;
+ }
+ clearSelect();
+ isDrawPolygon.value = false; // 关闭地图绘制状态
+ uploadPatchDialog.value = false;
+};
provide('selectionIds', selectionIds);
provide('homeViewer', homeViewer);
provide('viewInstance', viewInstance);
@@ -489,6 +524,7 @@
}
destroyMap();
}
+ refreshonload();
});
onMounted(() => {});
onBeforeUnmount(() => {
@@ -568,11 +604,19 @@
line-height: 33px;
padding-right: 10px;
margin: 0 -10px 0 -10px;
+ border-right: 1px solid #e8e8e8;
}
.itemContent {
flex: 1;
padding-left: 10px;
+ .itemValue {
+ padding-left: 6px;
+ color: #7B7B7B;
+ }
+ .error-text{
+ color: #FF0A0A;
+ }
}
}
}
@@ -587,11 +631,11 @@
top: 0;
left: 0;
height: 99%;
- z-index: 999;
+ z-index: 99;
width: 277px;
overflow: hidden;
- background: rgba(0, 0, 0, 0.4);
- backdrop-filter: blur(5px);
+ background: rgba(0, 0, 0, 0.6);
+ // backdrop-filter: blur(5px);
border-radius: 8px 8px 8px 8px;
padding: 6px 10px 0 10px;
display: flex;
@@ -609,6 +653,7 @@
font-size: 14px;
color: #ffffff;
}
+
// 表格样式
:deep(.el-table) {
// 清除表格内部横线和竖线
@@ -671,25 +716,34 @@
background-color: var(--el-table-current-row-bg-color) !important;
}
}
-
+:deep(.el-table__body) {
+ tr {
+ height: 46px;
+ }
+ td {
+ padding: 8px 0;
+ }
+}
.operationspan {
cursor: pointer;
}
.operationspan:first-child {
margin-right: 10px;
}
+
// 分页
:deep(.pagination-container) {
background: transparent !important;
}
:deep(.el-pagination) {
+
.btn-prev,
.btn-next {
- padding: 5px 13px;
+ padding: 5px 6px;
}
}
:deep(.el-pager li) {
- margin: 0 0.4rem;
+ margin: 0 0.1rem;
background: rgba(34, 34, 34, 0.9) !important;
box-shadow: 0px 4px 72px 0px rgba(0, 0, 0, 0.25) !important;
border-radius: 8px 8px 8px 8px !important;
@@ -708,18 +762,23 @@
border-radius: 8px 8px 8px 8px !important;
}
.pagination-container {
- margin-top: auto;
- padding: 10px 0;
+ margin-top: auto;
+ padding: 8px 5px !important;
background: white;
display: flex;
justify-content: center;
- height: 20px;
+ height: auto; // 取消固定高度20px，避免内容被截断
margin: 24px 0 14px 0;
+ width: 100%;
+ box-sizing: border-box
}
}
-
+:deep(.el-tooltip__popper) {
+ z-index: 9999 !important;
+ max-width: 300px;
+}
.el-table {
- flex: 1; /* 让表格占据剩余空间 */
+ flex: 1;
overflow: auto;
}
.btnGroups {
--
Gitblit v1.9.3