<template>
|
<el-dialog
|
class="spotDialog"
|
:title="props.title"
|
v-model="uploadPatchDialog"
|
width="78%"
|
align-center
|
>
|
<div class="container">
|
<!-- 信息展示区 -->
|
<div class="infoBox">
|
<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="itemContent">
|
<template v-if="props.title === '图斑编辑' && item.editable">
|
<template v-if="item.name === '图斑类型'">
|
<el-select
|
v-model="item.value"
|
placeholder="请选择图斑类型"
|
style="width: 102%"
|
>
|
<el-option
|
v-for="opt in spotTypeOptions"
|
:key="opt.value"
|
:label="opt.label"
|
:value="opt.value"
|
/>
|
</el-select>
|
</template>
|
<template v-else-if="item.name === '文件名称'">
|
<el-input style="width: 102%" v-model="item.value" />
|
</template>
|
</template>
|
<template v-else>
|
<div class="itemValue" :class="{ 'error-text': item.name === '异常图斑数量' }">
|
{{ item.value }}
|
</div>
|
</template>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 地图和表格容器 -->
|
<div class="map-container">
|
<!-- 图斑列表 -->
|
<div class="table-overlay">
|
<div class="table-content">
|
<div class="tabname">图斑列表</div>
|
<el-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="pxToRemNum(30)" label="序号">
|
<template #default="{ $index }">
|
{{
|
($index + 1 + (params.page - 1) * params.pageSize).toString().padStart(2, '0')
|
}}
|
</template>
|
</el-table-column>
|
<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>{{ 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.page"
|
:page-size="params.pageSize"
|
background
|
layout="prev, pager, next, ..."
|
:pager-count="3"
|
prev-text="上一页"
|
next-text="下一页"
|
:total="total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</div>
|
<!--绘制按钮-->
|
|
<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 @click="handleCancel" src="@/assets/images/home/territory/cancelbtn.png" alt="" />
|
</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 { 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';
|
const uploadPatchDialog = defineModel('show');
|
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);
|
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;
|
// 功能按钮区域相关：编辑图斑等
|
const funButtonEle = ref(null);
|
const isBoxSelect = ref(false);
|
const isDrawPolygon = ref(false);
|
// 选中了哪些图斑
|
const selectionIds = ref(null);
|
const selectionList = ref([]);
|
// 当前在编辑状态的异常图斑
|
let curCustomPolygon = null;
|
let lastEntity = null;
|
// 表格隔行变色
|
const tableRowClassName = ({ rowIndex }) => {
|
return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row';
|
};
|
const spotTypeOptions = ref([]);
|
const infoList = ref([
|
{ 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({
|
page: 1,
|
pageSize: 10,
|
});
|
// 图斑管理表格
|
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();
|
};
|
|
// 地图
|
const initMap = () => {
|
if (!document.getElementById('spotMap')) {
|
return;
|
}
|
publicCesiumInstance = new PublicCesium({
|
dom: 'spotMap',
|
flatMode: false,
|
terrain: true,
|
layerMode: 4,
|
contour: false,
|
});
|
homeViewer.value = publicCesiumInstance.getViewer();
|
viewer = publicCesiumInstance.getViewer();
|
viewInstance.value = publicCesiumInstance;
|
viewer.scene.globe.depthTestAgainstTerrain = true;
|
viewInstance.value.switchContour(true);
|
};
|
// 初始化所有图斑
|
const entitiesAddSpot = () => {
|
viewer?.entities.removeAll();
|
AlltableData.value.forEach(item => {
|
// 取出当中经纬度
|
const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
|
if (!numbersWithCommas) return;
|
// 绘制图斑
|
const grouped = numbersWithCommas.map(item => Number(item));
|
// 为框选存储对比值
|
tbJwdList.push({
|
...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;
|
|
homeViewer.value?.entities?.add({
|
id: 'polygon_dk' + item.id,
|
customType: 'pattern_spot_polygon',
|
customInfo: {
|
...item,
|
},
|
polygon: {
|
hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(grouped)),
|
material: color,
|
outline: true,
|
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));
|
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');
|
});
|
};
|
|
// 高亮当前选中图斑，并定位
|
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：可以获取当前图斑数据
|
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;
|
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];
|
|
nextTick(() => {
|
const table = polygonTableEle?.value;
|
if (!table || !targetRow) return;
|
// 表格滚动到中间位置
|
targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
// 同步表格选中状态
|
table.setCurrentRow(tableData.value[clickTableID]);
|
});
|
|
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 => {
|
let curRowIsSelect = row;
|
curRowIsSelect && handleLocationPolygon(row);
|
selectionIds.value = row.id;
|
selectionList.value = row;
|
|
if (isEditing.value) {
|
//当前已编辑 → 取消编辑（关闭绘制、重置状态）
|
isEditing.value = false;
|
handleUpDateDrawState(false); // 通知DrawPolygon取消绘制
|
} else {
|
// 当前未编辑 → 开启编辑（仅异常图斑可编辑）
|
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);
|
provide('viewInstance', viewInstance);
|
provide('clearSelect', clearSelect);
|
provide('getTableList', getTableList);
|
// 销毁
|
const destroyMap = () => {
|
if (viewer) {
|
viewer.destroy();
|
viewer = null;
|
}
|
publicCesiumInstance = null;
|
};
|
|
watch(uploadPatchDialog, newVal => {
|
if (newVal) {
|
setTimeout(() => {
|
initMap();
|
getTableList();
|
getAlltableMapListApi();
|
getspotManagementTableApi();
|
}, 0);
|
} else {
|
isEditing.value = false;
|
handleUpDateDrawState(false);
|
destroyMap();
|
}
|
refreshonload();
|
});
|
onMounted(() => {});
|
onBeforeUnmount(() => {
|
destroyMap();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
: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;
|
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: 0;
|
font-size: 14px;
|
}
|
|
.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;
|
height: 33px;
|
padding: 0 10px;
|
border-right: 1px solid #e8e8e8;
|
border-bottom: none;
|
|
.itemTitle {
|
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;
|
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;
|
}
|
}
|
}
|
}
|
|
.map-container {
|
position: relative;
|
height: 620px;
|
width: 100%;
|
}
|
.table-overlay {
|
position: absolute;
|
top: 0;
|
left: 0;
|
height: 99%;
|
z-index: 99;
|
width: 277px;
|
overflow: hidden;
|
background: rgba(0, 0, 0, 0.6);
|
// 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: 99%;
|
.tabname {
|
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;
|
|
--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 {
|
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: rgba(0, 0, 0, 0.6) !important;
|
}
|
|
td {
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
|
}
|
}
|
|
// 选中行
|
.current-row td {
|
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: 5px;
|
}
|
|
// 分页
|
:deep(.pagination-container) {
|
background: transparent !important;
|
}
|
:deep(.el-pagination) {
|
.btn-prev,
|
.btn-next {
|
padding: 5px 6px;
|
}
|
}
|
:deep(.el-pager li) {
|
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;
|
|
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: 8px 5px !important;
|
background: white;
|
display: flex;
|
justify-content: center;
|
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;
|
overflow: auto;
|
}
|
.btnGroups {
|
position: absolute;
|
bottom: 49px;
|
left: 50%;
|
transform: translate(-50%);
|
img {
|
width: 125px;
|
height: 45px;
|
cursor: pointer;
|
}
|
}
|
.btnGroups img:first-child {
|
margin-right: 21px;
|
}
|
#spotMap {
|
height: 100%;
|
width: 100%;
|
}
|
</style>
|
