From 5b04b2c5497a0adea171e47f06b0956ac829bf1e Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Wed, 27 Aug 2025 15:53:59 +0800
Subject: [PATCH] feat:样式调整
---
src/views/resource/components/spotDetails.vue | 227 ++++++++++++++++++++++++++++++++++++++++++++------------
src/views/resource/components/DrawPolygon.vue | 1
2 files changed, 176 insertions(+), 52 deletions(-)
diff --git a/src/views/resource/components/DrawPolygon.vue b/src/views/resource/components/DrawPolygon.vue
index d2ff08e..9463dd7 100644
--- a/src/views/resource/components/DrawPolygon.vue
+++ b/src/views/resource/components/DrawPolygon.vue
@@ -27,7 +27,6 @@
() => selectionIds.value,
(newValue, oldValue) => {
if (newValue && oldValue && newValue !== oldValue) {
- console.log('selectionIds',newValue);
cancel();
}
}
diff --git a/src/views/resource/components/spotDetails.vue b/src/views/resource/components/spotDetails.vue
index 3cca73e..e52d0e7 100644
--- a/src/views/resource/components/spotDetails.vue
+++ b/src/views/resource/components/spotDetails.vue
@@ -3,7 +3,7 @@
:title="props.title"
append-to-body
v-model="uploadPatchDialog"
- width="80%"
+ width="75%"
align-center
>
<div class="container">
@@ -16,9 +16,9 @@
<div class="itemContent">
<template v-if="props.title === '图斑编辑' && item.editable">
<template v-if="item.name === '图斑类型'">
- <el-select
- v-model="item.value"
- size="small"
+ <el-select
+ v-model="item.value"
+ size="small"
placeholder="请选择图斑类型"
style="width: 100%"
>
@@ -33,7 +33,6 @@
<template v-else-if="item.name === '文件名称'">
<el-input v-model="item.value" size="small" />
</template>
-
</template>
<template v-else>
<div class="itemValue">{{ item.value }}</div>
@@ -51,26 +50,30 @@
<div class="table-content">
<div class="tabname">图斑列表</div>
<el-table
+ class="ztzf-table"
ref="polygonTableEle"
highlight-current-row
+ :row-class-name="tableRowClassName"
:data="tableData"
- border
- style="width: 100%"
@row-click="handleLocationPolygon"
>
- <el-table-column type="index" label="序号" width="80">
+ <el-table-column type="index" align="center" width="30" label="序号">
<template #default="{ $index }">
{{ ($index + 1).toString().padStart(2, '0') }}
</template>
</el-table-column>
- <el-table-column prop="dkbh" label="图斑名称" />
- <el-table-column prop="investigate" label="图斑状态" />
- <el-table-column label="操作" width="100" align="center" v-if="props.title === '图斑编辑'">
+ <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 === '图斑编辑'">
<template #default="scope">
- <el-button type="text">删除</el-button>
+ <span class="operationspan">删除</span>
+ <span class="operationspan" @click.stop="handleSelectionChange(scope.row)"
+ >编辑</span
+ >
+ <!-- <el-button type="text">删除</el-button>
<el-button type="text" @click.stop="handleSelectionChange(scope.row)"
>编辑</el-button
- >
+ > -->
</template>
</el-table-column>
</el-table>
@@ -78,6 +81,8 @@
<el-pagination
background
layout="prev, pager, next"
+ prev-text="上一页"
+ next-text="下一页"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -91,6 +96,11 @@
v-model:isBoxSelect="isBoxSelect"
v-model:isDrawPolygon="isDrawPolygon"
></FunButton>
+ <!-- 完成/取消 -->
+ <div class="btnGroups" v-if="props.title === '图斑编辑'">
+ <el-button type="primary">完成</el-button>
+ <el-button>取消</el-button>
+ </div>
<!-- 地图 -->
<div id="spotMap" class="ztzf-cesium" v-show="uploadPatchDialog"></div>
</div>
@@ -131,9 +141,13 @@
const isDrawPolygon = ref(false);
// 选中了哪些图斑
const selectionIds = ref(null);
-const selectionList = ref([])
+const selectionList = ref([]);
// 当前在编辑状态的异常图斑
let curCustomPolygon = null;
+// 表格隔行变色
+const tableRowClassName = ({ rowIndex }) => {
+ return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row';
+};
const spotTypeOptions = ref([
{ value: '1', label: '综合类' },
{ value: '2', label: '矿山类' },
@@ -194,10 +208,10 @@
}
publicCesiumInstance = new PublicCesium({
dom: 'spotMap',
- flatMode: false,
- terrain: true,
- layerMode: 4,
- contour: false,
+ flatMode: false,
+ terrain: true,
+ layerMode: 4,
+ contour: false,
});
homeViewer.value = publicCesiumInstance.getViewer();
viewer = publicCesiumInstance.getViewer();
@@ -217,7 +231,10 @@
...item,
grouped: grouped,
});
-
+ // 根据 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({
id: 'polygon_dk' + item.id,
@@ -227,14 +244,22 @@
},
polygon: {
hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(grouped)),
- material: Cesium.Color.YELLOW.withAlpha(0.5),
+ material: color,
outline: true,
- outlineColor: Cesium.Color.YELLOW,
+ outlineColor: outlineColor,
outlineWidth: 2,
+ clampToGround: true,
+ outlineDepthFailColor: outlineColor,
+ },
+ polyline: {
+ positions: Cesium.Cartesian3.fromDegreesArray(grouped),
+ width: 2,
+ material: color,
clampToGround: true,
},
zIndex: 99,
});
+
if (tbJwdList.length > 0) {
const positions = tbJwdList.flatMap(item => Cesium.Cartesian3.fromDegreesArray(item.grouped));
homeViewer.value.camera.flyToBoundingSphere(new Cesium.BoundingSphere.fromPoints(positions));
@@ -263,63 +288,67 @@
clearSelect();
return;
}
- // 保存当前选中图斑
- // 取出当中经纬度
+
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) {
- lastentity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.5);
- lastentity.polygon.outlineColor = Cesium.Color.YELLOW;
+ // 根据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.3);
+ 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),
- 2500.0
+ 2000
),
+ zIndex: 100,
});
lastHighlightRow = data;
};
// 清空选中的数据
const clearSelect = () => {
lastHighlightRow = null;
- // selectionIds.value = null;
- selectionList.value = []
+ selectionList.value = [];
};
// 编辑
const handleSelectionChange = row => {
- console.log('编辑', row.id);
+ // console.log('编辑', row.id);
let curRowIsSelect = row;
selectionIds.value = row.id;
- selectionList.value = row
+ selectionList.value = row;
curRowIsSelect && handleLocationPolygon(row);
if (row.is_exception == 2 && curRowIsSelect) {
isDrawPolygon.value = true;
funButtonEle.value.upDateDrawState(true);
handleLocationPolygon(row);
- // clearSelect()
- // curCustomPolygon = row
- // ElMessage.warning('该图斑数据异常，请在地图区域重新绘制！！')
} else {
isDrawPolygon.value = false;
}
@@ -328,7 +357,7 @@
provide('homeViewer', homeViewer);
provide('viewInstance', viewInstance);
provide('clearSelect', clearSelect);
-provide('getTableList', getTableList)
+provide('getTableList', getTableList);
// 销毁
const destroyMap = () => {
if (viewer) {
@@ -345,9 +374,9 @@
getTableList();
}, 0);
} else {
- if (funButtonEle.value) {
+ if (funButtonEle.value) {
isBoxSelect.value = false;
- isDrawPolygon.value = false;
+ isDrawPolygon.value = false;
}
destroyMap();
}
@@ -437,38 +466,134 @@
position: absolute;
top: 0;
left: 0;
- width: 23%;
- height: 95%;
+ height: 99%;
z-index: 999;
- // background: rgba(31, 62, 122, 0.85);
- padding: 10px;
+ width: 277px;
+ overflow: hidden;
+ background: rgba(0, 0, 0, 0.4);
+ backdrop-filter: blur(5px);
+ border-radius: 8px 8px 8px 8px;
+ padding: 7px 10px 0 10px;
display: flex;
flex-direction: column;
}
.table-content {
+ width: 100%;
display: flex;
flex-direction: column;
- height: 95%;
+ height: 99%;
.tabname {
- color: #102441;
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: bold;
+ font-size: 14px;
+ color: #ffffff;
}
-}
+// 表格样式
+ :deep(.el-table) {
+ --el-table-bg-color: transparent !important;
+ --el-table-tr-bg-color: transparent !important;
+ // --el-table-header-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;
+ }
+ // 隔行变色
+ .even-row {
+ background-color: rgba(255,255,255,0.17) !important;
+ }
+ .oddNumberRow {
+ background-color: rgba(255,255,255,0.08) !important;
+ }
+ // 表头样式
+ .el-table__header {
+ th {
+ background: rgba(51, 51, 51, 0.32) !important;
+ font-family: Source Han Sans CN;
+ font-weight: 500;
+ font-size: 14px;
+ color: #ffffff;
+ .cell {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+
+ // 表格主体
+ .el-table__body {
+ tr:hover > td {
+ background-color: var(--el-table-row-hover-bg-color) !important;
+ }
+
+ td {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+ }
+ }
+
+ // 选中行
+ .current-row td {
+ background-color: var(--el-table-current-row-bg-color) !important;
+ }
+ }
+.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;
+
+ }
+
+
+}
+:deep(.el-pager li) {
+ margin: 0 0.4rem;
+ 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;
+
+ font-family: Source Han Sans CN, Source Han Sans CN;
+font-weight: 400;
+font-size: 14px;
+color: #EDEDED !important;
+}
+:deep(.el-pager li.is-active) {
+ border: 1px solid rgba(255, 255, 255, 0.99) !important;
+}
+:deep(.el-pagination button) {
+ background: rgba(34, 34, 34, 0.9) !important;
+color: #EDEDED !important;
+ border-radius: 8px 8px 8px 8px !important;
+}
.pagination-container {
- margin-top: auto; /* 将分页推到容器底部 */
+ margin-top: auto;
padding: 10px 0;
background: white;
display: flex;
justify-content: center;
height: 20px;
}
+}
.el-table {
flex: 1; /* 让表格占据剩余空间 */
overflow: auto;
}
-
+.btnGroups {
+ position: absolute;
+ bottom: 8%;
+ left: 50%;
+}
#spotMap {
height: 100%;
width: 100%;
--
Gitblit v1.9.3