From 02409bfbe15f22fc3b5dccadabfd860a660a49d9 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 11 Oct 2025 10:37:14 +0800
Subject: [PATCH] feat: 名称修改
---
src/views/resource/components/spotDetails.vue | 668 ++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 462 insertions(+), 206 deletions(-)
diff --git a/src/views/resource/components/spotDetails.vue b/src/views/resource/components/spotDetails.vue
index fa0867f..091ca0c 100644
--- a/src/views/resource/components/spotDetails.vue
+++ b/src/views/resource/components/spotDetails.vue
@@ -1,9 +1,9 @@
<template>
<el-dialog
- class="spotDialog"
+ class="spotDialog"
:title="props.title"
v-model="uploadPatchDialog"
- width="75%"
+ width="78%"
align-center
>
<div class="container">
@@ -12,15 +12,23 @@
<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 === '图斑类型'">
<el-select
v-model="item.value"
- size="small"
placeholder="请选择图斑类型"
- style="width: 100%"
+ style="width: 102%"
>
<el-option
v-for="opt in spotTypeOptions"
@@ -31,11 +39,13 @@
</el-select>
</template>
<template v-else-if="item.name === '文件名称'">
- <el-input v-model="item.value" size="small" />
+ <el-input style="width: 102%" v-model="item.value" />
</template>
</template>
<template v-else>
- <div class="itemValue">{{ item.value }}</div>
+ <div class="itemValue" :class="{ 'error-text': item.name === '异常图斑数量' }">
+ {{ item.value }}
+ </div>
</template>
</div>
</div>
@@ -50,35 +60,46 @@
<div class="table-content">
<div class="tabname">图斑列表</div>
<el-table
- class="ztzf-table"
ref="polygonTableEle"
highlight-current-row
:row-class-name="tableRowClassName"
:data="tableData"
@row-click="handleLocationPolygon"
+ @current-change="handleTableRowChange"
>
- <el-table-column type="index" align="center" width="30" label="序号">
+ <el-table-column type="index" align="center" :width="pxToRemNum(30)" label="序号">
<template #default="{ $index }">
- {{ ($index + 1).toString().padStart(2, '0') }}
+ {{
+ ($index + 1 + (params.page - 1) * params.pageSize).toString().padStart(2, '0')
+ }}
</template>
</el-table-column>
- <el-table-column prop="dkbh" align="center" label="图斑名称" />
- <el-table-column prop="investigate" align="center" label="图斑状态" />
- <el-table-column label="操作" align="center" v-if="props.title === '图斑编辑'">
+ <el-table-column prop="dkbh" align="center" label="图斑名称" show-overflow-tooltip />
+ <el-table-column prop="is_exception" :width="pxToRemNum(50)" align="center" label="图斑状态">
<template #default="scope">
- <span class="operationspan">删除</span>
- <span class="operationspan" @click.stop="handleSelectionChange(scope.row)"
- >编辑</span
+ <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" @click="handleDelete(scope.row)">删除</span>
+ <span
+ class="operationspan"
+ v-if="scope.row.is_exception == 2"
+ @click.stop="handleSelectionChange(scope.row)"
>
+ {{ isEditing && selectionIds === scope.row.id ? '取消编辑' : '编辑' }}
+ </span>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
- :current-page="params.current"
- :page-size="params.size"
+ :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"
@@ -89,42 +110,60 @@
</div>
</div>
<!--绘制按钮-->
- <FunButton
- ref="funButtonEle"
- v-model:isBoxSelect="isBoxSelect"
- v-model:isDrawPolygon="isDrawPolygon"
- ></FunButton>
+
+ <DrawPolygon
+ ref="drawPolygonRef"
+ v-if="isEditing"
+ @upDateDrawState="handleUpDateDrawState"
+ />
<!-- 完成/取消 -->
<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>
+ <div id="spotMap" v-loading="loading" element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0, 0.7)" class="ztzf-cesium" v-show="uploadPatchDialog"></div>
</div>
</div>
</el-dialog>
</template>
<script setup>
-import {spotManagementTableApi,searchManagementApi,uploadManagementApi,tableMapListApi} from '@/api/patchManagement/index'
-import {getCenterPoint, } from '@/utils/cesium/mapUtil.js';
-import { getPatchesSpotList } from '@/api/patchManagement/index';
+import { pxToRem, pxToRemNum } from '@/utils/rem'
+import DrawPolygon from '@/views/resource/components/DrawPolygon.vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { findAreaName } from '@/utils/areaUtils';
+import {
+ patchEditApi,
+ tableMapListApi,
+ deletePatches,
+ AlltableMapListApi,
+ spotManagementTableApi,
+} from '@/api/patchManagement/index';
+import { getCenterPoint } from '@/utils/cesium/mapUtil.js';
+
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']);
+const props = defineProps(['title', 'detailid', 'detailList', 'spotTypeOption', 'regionalData']);
const polygonTableEle = ref(null);
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
const homeViewer = shallowRef(null);
let tbJwdList = [];
+const loading = ref(false);
+const tableData = ref([]);
+const AlltableData = ref([]);
let total = ref(0);
-// 当前选中的图斑面数据
-let nowSelectObj = ref({});
+const refreshonload = inject('searchReset');
+const initialFileName = ref('');
+const initialSpotTypeId = ref('');
+const initialSpotTypeLabel = ref('');
+const spotManagementData = ref(null);
+const isEditing = ref(false);
+const drawPolygonRef = ref(null);
// 记录上一次点击高亮
let lastHighlightRow = null;
// 功能按钮区域相关：编辑图斑等
@@ -136,67 +175,134 @@
const selectionList = ref([]);
// 当前在编辑状态的异常图斑
let curCustomPolygon = null;
+let lastEntity = null;
// 表格隔行变色
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: 'lot_type_id', 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.map(opt => ({
+ label: opt.label,
+ value: opt.value,
+ }));
+ }
+ },
+ { immediate: true }
+);
+watch(
+ () => spotManagementData.value,
+ newVal => {
+ if (newVal) updateInfoList(newVal);
+ },
+ { immediate: true }
+);
+
+// 图斑编辑详情
+const getspotManagementTableApi = () => {
+ spotManagementTableApi({ id: props.detailid }).then(res => {
+ spotManagementData.value = {
+ ...res.data.data.records[0],
+ dataFrom: res.data.data.records[0].date_from === 0 ? '本地上传' : '国土调查云',
+ areaName: findAreaName(res.data.data.records[0].area_code, props.regionalData, true),
+ };
+ });
+};
+
+// 将 lot_type_id 转换为对应的 label
+const getPatchTypeLabel = lotTypeId => {
+ const option = spotTypeOptions.value.find(opt => opt.value === String(lotTypeId));
+ return option ? option.label : '';
+};
+const updateInfoList = detailData => {
+ if (!detailData) return;
+ if (initialFileName.value === '' || initialSpotTypeId.value === '') {
+ initialFileName.value = detailData.file_name || '';
+ initialSpotTypeId.value = detailData.lot_type_id || '';
+ initialSpotTypeLabel.value =
+ detailData.patches_type_desc || getPatchTypeLabel(detailData.lot_type_id);
+ }
+ infoList.value = infoList.value.map(item => {
+ const value = detailData[item.field] ?? item.value;
+ if (item.name === '图斑类型') {
+ return {
+ ...item,
+ value: detailData.patches_type_desc || getPatchTypeLabel(detailData.lot_type_id),
+ originalValue: detailData.lot_type_id,
+ };
+ }
+ return { ...item, value };
+ });
+};
const params = ref({
- current: 1,
- size: 20,
+ page: 1,
+ pageSize: 10,
});
// 图斑管理表格
-const getspotManagementTableApi =()=>{
- spotManagementTableApi(params).then(res => {
- console.log('管理表格数据',res);
- })
-}
-const handleSizeChange = () => {};
-const handleCurrentChange = () => {};
-const tableData = ref([]);
-const polygonSearch = ref({
- investigate: '',
- isPush: '',
- isException: '',
- inRange: '1',
- dkbh: '',
- dkmj: '',
- page: 1,
- page_size: 1000,
- total: 0,
- workspaceId: 'ede19ef4-2e92-42f3-83cc-89afb54e95a7',
- area_code: '360000000000',
- device_sn: '',
-});
-// 获取列表数据
-const getTableList = async () => {
- tableData.value = [];
- const res = await getPatchesSpotList(polygonSearch.value);
- if (res.data.code !== 0) return;
- tableData.value = res.data.data.list.map(item => ({
- ...item,
- dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
- }));
- total.value = res.data.data.pagination.total;
- // 先清空地图现有图斑
- tbJwdList = [];
- viewer.entities.removeAll(); // 清除所有实体
- // 加载图斑
- entitiesAddSpot();
+const getTableList = () => {
+ const requestParams = {
+ patchesInfoId: props.detailid,
+ page: params.value.page,
+ pageSize: params.value.pageSize,
+ };
+ tableMapListApi(requestParams).then(res => {
+ tableData.value = res.data.data.records?.map(item => ({
+ ...item,
+ dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
+ }));
+ total.value = res.data.data.total || res.data.data.length;
+ tbJwdList = [];
+ viewer?.entities.removeAll();
+ if (!AlltableData.value) {
+ viewInstance.value?.flyToContour();
+ } else {
+ entitiesAddSpot();
+ }
+ });
+};
+// 所有图斑数据
+const getAlltableMapListApi = () => {
+ loading.value = true;
+ const requestParams = {
+ patchesInfoId: props.detailid,
+ };
+ AlltableMapListApi(requestParams).then(res => {
+ AlltableData.value = res.data.data?.map(item => ({
+ ...item,
+ dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
+ }));
+
+ tbJwdList = [];
+ viewer?.entities.removeAll();
+ if (AlltableData.value.length < 1) {
+ viewInstance.value?.flyToContour();
+ } else {
+ entitiesAddSpot();
+ }
+ loading.value = false;
+ });
+};
+const handleSizeChange = val => {
+ params.value.pageSize = val;
+ params.value.page = 1;
+ getTableList();
+};
+const handleCurrentChange = val => {
+ params.value.page = val;
+ getTableList();
};
// 地图
@@ -215,10 +321,12 @@
viewer = publicCesiumInstance.getViewer();
viewInstance.value = publicCesiumInstance;
viewer.scene.globe.depthTestAgainstTerrain = true;
+ viewInstance.value.switchContour(true);
};
// 初始化所有图斑
const entitiesAddSpot = () => {
- tableData.value.forEach(item => {
+ viewer?.entities.removeAll();
+ AlltableData.value.forEach(item => {
// 取出当中经纬度
const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
if (!numbersWithCommas) return;
@@ -229,12 +337,13 @@
...item,
grouped: grouped,
});
+ viewInstance.value.removeById('polygon_dk' + item.id);
// 根据 is_exception 设置颜色
const color =
item.is_exception == 2 ? Cesium.Color.RED.withAlpha(0.5) : Cesium.Color.YELLOW.withAlpha(0.5);
const outlineColor = item.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
- viewInstance.value.removeById('polygon_dk' + item.id);
- homeViewer.value.entities?.add({
+
+ homeViewer.value?.entities?.add({
id: 'polygon_dk' + item.id,
customType: 'pattern_spot_polygon',
customInfo: {
@@ -260,96 +369,223 @@
if (tbJwdList.length > 0) {
const positions = tbJwdList.flatMap(item => Cesium.Cartesian3.fromDegreesArray(item.grouped));
- homeViewer.value.camera.flyToBoundingSphere(new Cesium.BoundingSphere.fromPoints(positions));
+ const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
+ homeViewer.value?.camera.flyToBoundingSphere(boundingSphere, {
+ duration: 0,
+ offset: new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0), Cesium.Math.toRadians(-90)),
+ });
}
- viewInstance.value.removeLeftClickEvent('spotHighlighting');
- viewInstance.value.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
+ viewInstance.value?.removeLeftClickEvent('spotHighlighting');
+ viewInstance.value?.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
});
};
// 高亮当前选中图斑，并定位
-const handleLocationPolygon = (data, Deselect) => {
- heightlightSpot(data);
+const getEntityByDataId = dataId => {
+ if (!homeViewer.value) return null;
+ const entityId = `polygon_dk${dataId}`;
+ return homeViewer.value.entities.getById(entityId);
};
+const handleLocationPolygon = data => {
+ if (!data) return;
+
+ // 取消任何现有的绘制状态（与编辑取消逻辑一致）
+ if (isEditing.value) {
+ isEditing.value = false;
+ handleUpDateDrawState(false);
+ selectionIds.value = null;
+ selectionList.value = [];
+ }
+
+ const targetEntity = getEntityByDataId(data.id);
+ if (targetEntity) {
+ updateMapSpotInfo(targetEntity);
+ // 同步表格选中状态
+ const clickTableID = tableData.value.findIndex(i => i.id === data.id);
+ const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr');
+ const targetRow = rows[clickTableID];
+
+ nextTick(() => {
+ const table = polygonTableEle?.value;
+ if (table && targetRow) {
+ table.setCurrentRow(tableData.value[clickTableID]);
+ targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ }
+ });
+ }
+};
+
// 鼠标触发点击图斑高亮 pick：可以获取当前图斑数据
-const spotHighlighting = (click, pick, viewer) => {
+function spotHighlighting(click, pick, viewer) {
+ let entities = viewer?.scene
+ .drillPick(click.position)
+ .filter(item => item.id)
+ .map(i => i.id)
+ .filter(i => i._customType === 'pattern_spot_polygon');
if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
- // 表格也对应选中数据 TODO
- const data = pick.id?.customInfo;
- // 高亮图斑
- heightlightSpot(data);
-};
-// 选中列表或者点击地图内的图斑 高亮图斑
-const heightlightSpot = data => {
- nowSelectObj.value = data;
- if (!data) {
- clearSelect();
- return;
- }
+ const nowEntity = entities?.[0];
+ const nowData = nowEntity.customInfo;
+ const clickTableID = tableData.value.findIndex(i => i.id === nowData.id);
+ const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr');
+ const targetRow = rows[clickTableID];
- const numbersWithCommas = data.dkfw.match(/\d+(\.\d+)?/g);
- const groupedArr = numbersWithCommas.reduce((acc, val, index, src) => {
- if (index % 2 === 0) acc.push(src.slice(index, index + 2));
- return acc;
- }, []);
-
- const polygonCenter = getCenterPoint(groupedArr);
- if (viewInstance.value.getEntityById('polygon_center')) {
- viewInstance.value.removeById('polygon_center');
- }
-
- // 恢复上一个高亮图斑的原始颜色
- if (lastHighlightRow) {
- let lastentity = homeViewer.value.entities?.getById('polygon_dk' + lastHighlightRow.id);
- if (lastentity && lastentity.polygon) {
- // 根据is_exception恢复原始颜色
- const originalColor =
- lastHighlightRow.is_exception == 2
- ? Cesium.Color.RED.withAlpha(0.5)
- : Cesium.Color.YELLOW.withAlpha(0.5);
- const originalOutline =
- lastHighlightRow.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
-
- lastentity.polygon.material = originalColor;
- lastentity.polygon.outlineColor = originalOutline;
- lastentity.polygon.outlineWidth = 2; // 恢复默认边框宽度
- }
- }
-
- let Nowentity = homeViewer.value.entities?.getById('polygon_dk' + data.id);
- if (Nowentity && Nowentity.polygon) {
- Nowentity.polygon.material = Cesium.Color.RED.withAlpha(0);
- Nowentity.polygon.outlineColor = Cesium.Color.RED;
- }
- homeViewer.value.scene.camera.setView({
- destination: Cesium.Cartesian3.fromDegrees(
- Number(polygonCenter.lng),
- Number(polygonCenter.lat),
- 2000
- ),
- zIndex: 100,
+ nextTick(() => {
+ const table = polygonTableEle?.value;
+ if (!table || !targetRow) return;
+ // 表格滚动到中间位置
+ targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ // 同步表格选中状态
+ table.setCurrentRow(tableData.value[clickTableID]);
});
- lastHighlightRow = data;
-};
+
+ updateMapSpotInfo(nowEntity);
+}
+
+// 更新上一个和这一个信息
+function updateMapSpotInfo(nowEntity) {
+ const nowData = nowEntity.customInfo;
+ if (!nowEntity) return;
+ if (nowEntity.customInfo.id === lastEntity?.customInfo.id) return;
+ // 设置新的
+ nowEntity.polygon.material = Cesium.Color.RED.withAlpha(0);
+ nowEntity.polyline.material = Cesium.Color.RED;
+ // 重置上一个
+ if (lastEntity) {
+ const lastData = lastEntity.customInfo;
+ const originalFillColor =
+ lastData.is_exception === 2
+ ? Cesium.Color.RED.withAlpha(0.5)
+ : Cesium.Color.YELLOW.withAlpha(0.5);
+ const originalOutlineColor =
+ lastData.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
+
+ lastEntity.polygon.material = originalFillColor;
+ lastEntity.polygon.outlineColor = originalOutlineColor;
+ lastEntity.polyline.material = originalOutlineColor;
+ }
+ lastEntity = nowEntity;
+ const numbersWithCommas = nowData.dkfw.match(/\d+(\.\d+)?/g);
+ if (numbersWithCommas) {
+ // 解析经纬度数组
+ const groupedArr = numbersWithCommas.reduce((acc, val, index, src) => {
+ if (index % 2 === 0) acc.push(src.slice(index, index + 2));
+ return acc;
+ }, []);
+ const polygonCenter = getCenterPoint(groupedArr);
+ // 相机定位
+ homeViewer.value.scene.camera.setView({
+ destination: Cesium.Cartesian3.fromDegrees(
+ Number(polygonCenter.lng),
+ Number(polygonCenter.lat),
+ 1500
+ ),
+ zIndex: 100,
+ });
+ }
+ // flyMapSpot(nowEntity?.customInfo)
+}
// 清空选中的数据
const clearSelect = () => {
lastHighlightRow = null;
selectionList.value = [];
+ viewer?.entities.removeAll();
};
// 编辑
const handleSelectionChange = row => {
- // console.log('编辑', row.id);
let curRowIsSelect = row;
+ curRowIsSelect && handleLocationPolygon(row);
selectionIds.value = row.id;
selectionList.value = row;
- curRowIsSelect && handleLocationPolygon(row);
- if (row.is_exception == 2 && curRowIsSelect) {
- isDrawPolygon.value = true;
- funButtonEle.value.upDateDrawState(true);
- handleLocationPolygon(row);
+
+ if (isEditing.value) {
+ //当前已编辑 → 取消编辑（关闭绘制、重置状态）
+ isEditing.value = false;
+ handleUpDateDrawState(false); // 通知DrawPolygon取消绘制
} else {
- isDrawPolygon.value = false;
+ // 当前未编辑 → 开启编辑（仅异常图斑可编辑）
+ if (row.is_exception === 2 && curRowIsSelect) {
+ isEditing.value = true;
+ handleUpDateDrawState(true); // 通知DrawPolygon开启绘制
+ } else {
+ ElMessage.warning('仅异常图斑支持编辑绘制');
+ isEditing.value = false;
+ }
}
+};
+const handleUpDateDrawState = show => {
+ isEditing.value = show; // 同步编辑状态
+ if (!show) {
+ // 绘制关闭时，清空选中的编辑行
+ selectionIds.value = null;
+ selectionList.value = [];
+ }
+};
+// 删除
+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();
+ getspotManagementTableApi();
+ getAlltableMapListApi();
+ });
+ });
+};
+
+// 保存
+const handleSave = () => {
+ 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;
+ 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 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;
+ }
+ if (isEditing.value) {
+ isEditing.value = false;
+ handleUpDateDrawState(false);
+ }
+ clearSelect();
+ isDrawPolygon.value = false; // 关闭地图绘制状态
+ uploadPatchDialog.value = false;
};
provide('selectionIds', selectionIds);
provide('homeViewer', homeViewer);
@@ -370,37 +606,33 @@
setTimeout(() => {
initMap();
getTableList();
+ getAlltableMapListApi();
+ getspotManagementTableApi();
}, 0);
} else {
- if (funButtonEle.value) {
- isBoxSelect.value = false;
- isDrawPolygon.value = false;
- }
+ isEditing.value = false;
+ handleUpDateDrawState(false);
destroyMap();
}
+ refreshonload();
});
-onMounted(()=>{
- getspotManagementTableApi()
-})
+onMounted(() => {});
onBeforeUnmount(() => {
destroyMap();
});
</script>
-<style lang="scss">
-.spotDialog {
-.el-dialog.is-align-center .el-dialog__header .el-dialog__title {
- padding-left: 16px !important;
-}
-}
-</style>
+
<style scoped lang="scss">
-// :deep(.el-dialog.is-align-center) {
-// :deep(.el-dialog__header) {
-// .el-dialog__title {
-// padding-left: 14px !important;
-// }
-// }
-// }
+:global(.spotDialog .el-dialog__header span) {
+ padding-left: 16px !important;
+ display: inline-block;
+}
+:global(.spotDialog .el-dialog__header) .el-dialog__title {
+ font-family: 'Source Han Sans CN' !important;
+ font-weight: bold !important;
+ font-size: 16px !important;
+ color: #363636 !important;
+}
.container {
display: flex;
flex-direction: column;
@@ -423,7 +655,7 @@
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 0;
- padding: 0; // 移除内边距，让边框贴合
+ padding: 0;
font-size: 14px;
}
@@ -447,7 +679,7 @@
height: 33px;
padding: 0 10px;
border-right: 1px solid #e8e8e8;
- border-bottom: none; // 由.itemCon控制底部边框
+ border-bottom: none;
.itemTitle {
width: 202px;
@@ -460,12 +692,20 @@
height: 100%;
line-height: 33px;
padding-right: 10px;
- margin: 0 -10px 0 -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;
+ }
}
}
}
@@ -480,11 +720,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;
@@ -502,27 +742,29 @@
font-size: 14px;
color: #ffffff;
}
+
// 表格样式
: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;
.cell {
padding: 0px !important;
+ font-size: 12px !important;
}
// 隔行变色
.even-row {
@@ -545,14 +787,13 @@
overflow: hidden;
text-overflow: ellipsis;
}
-
}
}
// 表格主体
.el-table__body {
tr:hover > td {
- background-color: var(--el-table-row-hover-bg-color) !important;
+ background-color: rgba(0, 0, 0, 0.6) !important;
}
td {
@@ -562,16 +803,25 @@
// 选中行
.current-row td {
- background-color: var(--el-table-current-row-bg-color) !important;
+ background-color: rgba(0, 0, 0, 0.6) !important;
}
}
-
+ :deep(.el-table__body) {
+ tr {
+ height: 46px;
+ }
+ td {
+ padding: 8px 0;
+ }
+ }
.operationspan {
cursor: pointer;
+ color: #409eff;
}
.operationspan:first-child {
- margin-right: 10px;
+ margin-right: 5px;
}
+
// 分页
:deep(.pagination-container) {
background: transparent !important;
@@ -579,11 +829,11 @@
: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;
@@ -603,23 +853,29 @@
}
.pagination-container {
margin-top: auto;
- padding: 10px 0;
+ padding: 8px 5px !important;
background: white;
display: flex;
justify-content: center;
- height: 20px;
- margin: 24px 0 14px 0;
+ 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 {
position: absolute;
bottom: 49px;
left: 50%;
+ transform: translate(-50%);
img {
width: 125px;
height: 45px;
--
Gitblit v1.9.3