From 2ca94de8ede18ac07ccfd8dec7b6f6a707adde9b Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 01 Sep 2025 11:20:24 +0800
Subject: [PATCH] Merge branch 'refs/heads/feature/v5.0/5.0.5' into patch_management
---
src/views/resource/components/spotDetails.vue | 558 +++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 412 insertions(+), 146 deletions(-)
diff --git a/src/views/resource/components/spotDetails.vue b/src/views/resource/components/spotDetails.vue
index 0aa3f58..09f5b46 100644
--- a/src/views/resource/components/spotDetails.vue
+++ b/src/views/resource/components/spotDetails.vue
@@ -1,9 +1,9 @@
<template>
<el-dialog
+ class="spotDialog"
:title="props.title"
- append-to-body
v-model="uploadPatchDialog"
- width="80%"
+ width="75%"
align-center
>
<div class="container">
@@ -12,13 +12,21 @@
<div class="itemBoxLeft">
<div v-for="(item, index) in infoList" :key="index" class="itemCon">
<div class="itemBox">
- <div class="itemTitle">{{ 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"
+ <el-select
+ v-model="item.value"
placeholder="请选择图斑类型"
style="width: 100%"
>
@@ -31,9 +39,8 @@
</el-select>
</template>
<template v-else-if="item.name === '文件名称'">
- <el-input v-model="item.value" size="small" />
+ <el-input v-model="item.value" />
</template>
-
</template>
<template v-else>
<div class="itemValue">{{ item.value }}</div>
@@ -51,33 +58,39 @@
<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="is_exception" align="center" label="图斑状态">
<template #default="scope">
- <el-button type="text">删除</el-button>
- <el-button type="text" @click.stop="handleSelectionChange(scope.row)"
- >编辑</el-button
- >
+ <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" @click="handleSelectionChange(scope.row)">编辑</span>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
+ :current-page="params.current"
+ :page-size="params.size"
background
layout="prev, pager, next"
+ prev-text="上一页"
+ next-text="下一页"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -91,6 +104,11 @@
v-model:isBoxSelect="isBoxSelect"
v-model:isDrawPolygon="isDrawPolygon"
></FunButton>
+ <!-- 完成/取消 -->
+ <div class="btnGroups" v-if="props.title === '图斑编辑'">
+ <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>
@@ -99,21 +117,23 @@
</template>
<script setup>
+import { ElMessage, ElMessageBox } from 'element-plus';
import {
- getCenterPoint,
- getLnglatDist,
- getLnglatAltitude,
- getPolygonMaxHeight,
- cartesian3Convert,
- getWaylineShowHeight,
-} from '@/utils/cesium/mapUtil.js';
+ patchEditApi,
+ spotManagementTableApi,
+ searchManagementApi,
+ uploadManagementApi,
+ tableMapListApi,
+ deletePatches,
+} 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 } from 'vue';
+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']);
const polygonTableEle = ref(null);
let publicCesiumInstance = null;
let viewer = null;
@@ -121,6 +141,7 @@
const homeViewer = shallowRef(null);
let tbJwdList = [];
let total = ref(0);
+const refreshonload = inject('searchReset');
// 当前选中的图斑面数据
let nowSelectObj = ref({});
// 记录上一次点击高亮
@@ -131,61 +152,105 @@
const isDrawPolygon = ref(false);
// 选中了哪些图斑
const selectionIds = ref(null);
+const selectionList = ref([]);
// 当前在编辑状态的异常图斑
let curCustomPolygon = null;
-const spotTypeOptions = ref([
- { value: '1', label: '综合类' },
- { value: '2', label: '矿山类' },
- { value: '3', label: '农田类' },
-]);
+// 表格隔行变色
+const tableRowClassName = ({ rowIndex }) => {
+ return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row';
+};
+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: String(opt.value),
+ }));
+ }
+ },
+ { immediate: true }
+);
+watch(
+ () => props.detailList,
+ newVal => {
+ if (newVal) {
+ updateInfoList(newVal);
+ }
+ },
+ { immediate: 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 => {
+ 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: value,
+ };
+ });
+};
const params = ref({
current: 1,
size: 20,
});
+// 图斑管理表格
+const getTableList = () => {
+ const params = {
+ patchesInfoId: props.detailid,
+ };
+ tableMapListApi(params).then(res => {
+ tableData.value = res.data.data.map(item => ({
+ ...item,
+ dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
+ }));
+ // 先清空地图现有图斑
+ tbJwdList = [];
+ viewer?.entities.removeAll(); // 清除所有实体
+ // 加载图斑
+ entitiesAddSpot();
+ });
+};
+
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 initMap = () => {
if (!document.getElementById('spotMap')) {
@@ -193,9 +258,10 @@
}
publicCesiumInstance = new PublicCesium({
dom: 'spotMap',
- terrain: true,
flatMode: false,
+ terrain: true,
layerMode: 4,
+ contour: false,
});
homeViewer.value = publicCesiumInstance.getViewer();
viewer = publicCesiumInstance.getViewer();
@@ -215,9 +281,12 @@
...item,
grouped: grouped,
});
-
- viewInstance.value.removeById('polygon_dk' + item.id);
- homeViewer.value.entities?.add({
+ // 根据 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,
customType: 'pattern_spot_polygon',
customInfo: {
@@ -225,20 +294,28 @@
},
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));
+ homeViewer.value?.camera.flyToBoundingSphere(new Cesium.BoundingSphere.fromPoints(positions));
}
- viewInstance.value.removeLeftClickEvent('spotHighlighting');
- viewInstance.value.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
+ viewInstance.value?.removeLeftClickEvent('spotHighlighting');
+ viewInstance.value?.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
});
};
@@ -249,6 +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]);
+ }
+ });
// 表格也对应选中数据 TODO
const data = pick.id?.customInfo;
// 高亮图斑
@@ -262,70 +354,110 @@
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 = [];
};
// 编辑
const handleSelectionChange = row => {
- console.log('编辑', row);
let curRowIsSelect = 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);
- // clearSelect()
- // curCustomPolygon = row
- // ElMessage.warning('该图斑数据异常，请在地图区域重新绘制！！')
} else {
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 || '',
+ id: props.detailList.id,
+ };
+
+ patchEditApi(updateParams).then(res => {
+ console.log('111', res.data.data);
+
+ ElMessage.success(res.data.data);
+ refreshonload();
+ uploadPatchDialog.value = false;
+ });
+};
+// 取消
+const handleCancel = () => {};
provide('selectionIds', selectionIds);
provide('homeViewer', homeViewer);
provide('viewInstance', viewInstance);
provide('clearSelect', clearSelect);
-provide('getTableList', getTableList)
+provide('getTableList', getTableList);
// 销毁
const destroyMap = () => {
if (viewer) {
@@ -342,126 +474,260 @@
getTableList();
}, 0);
} else {
+ if (funButtonEle.value) {
+ isBoxSelect.value = false;
+ isDrawPolygon.value = false;
+ }
destroyMap();
}
});
-
+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;
+// }
+// }
+// }
.container {
display: flex;
flex-direction: column;
height: 100%;
+ padding: 10px 20px 23px 20px;
}
.infoBox {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
+ border: 1px solid;
+ border: 1px solid #e8e8e8;
+ border-radius: 4px;
+ background: #fff;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
.itemBoxLeft {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 0;
- padding: 10px;
+ padding: 0; // 移除内边距，让边框贴合
font-size: 14px;
+ }
- .itemCon:nth-last-child(-n + 2) {
- border-bottom: 2px solid #efefef;
+ .itemCon {
+ border-bottom: 1px solid #e8e8e8;
+
+ &:nth-child(2n) {
+ .itemBox {
+ border-right: none;
+ }
+ }
+
+ &:nth-last-child(-n + 2) {
+ border-bottom: none;
}
}
.itemBox {
display: flex;
align-items: center;
- background: #fff;
height: 33px;
- border-top: 2px solid #efefef;
+ padding: 0 10px;
+ border-right: 1px solid #e8e8e8;
+ border-bottom: none; // 由.itemCon控制底部边框
.itemTitle {
- flex: 0 0 150px;
- color: #0b1d38;
- text-align: center;
- background: #f3f6ff;
- height: 33px;
+ width: 202px;
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 14px;
+ color: #383838;
+ text-align: right;
+ background: #fafafa;
+ height: 100%;
line-height: 33px;
padding-right: 10px;
- border-top: 1px solid #efefef;
+ margin: 0 -10px 0 -10px; // 拉伸背景色
}
.itemContent {
flex: 1;
padding-left: 10px;
-
- .el-input {
- width: 100%;
-
- :deep(.el-input__inner) {
- height: 28px;
- line-height: 28px;
- background: transparent;
- border: none;
- padding: 0 10px;
- color: #747e91;
- }
- }
-
- .itemValue {
- font-size: 14px;
- color: #747e91;
- text-align: left;
- line-height: 33px;
- }
}
}
}
.map-container {
position: relative;
- height: 600px;
+ height: 620px;
width: 100%;
}
.table-overlay {
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: 6px 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) {
+ // 清除表格内部横线和竖线
+ &::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;
+ }
+ --el-table-bg-color: transparent !important;
+ --el-table-tr-bg-color: transparent !important;
-.pagination-container {
- margin-top: auto; /* 将分页推到容器底部 */
- padding: 10px 0;
- background: white;
- display: flex;
- justify-content: center;
- height: 20px;
+ --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;
+ padding: 10px 0;
+ background: white;
+ display: flex;
+ justify-content: center;
+ height: 20px;
+ margin: 24px 0 14px 0;
+ }
}
.el-table {
flex: 1; /* 让表格占据剩余空间 */
overflow: auto;
}
-
+.btnGroups {
+ position: absolute;
+ bottom: 49px;
+ left: 50%;
+ img {
+ width: 125px;
+ height: 45px;
+ cursor: pointer;
+ }
+}
+.btnGroups img:first-child {
+ margin-right: 21px;
+}
#spotMap {
height: 100%;
width: 100%;
--
Gitblit v1.9.3