<template>
|
<el-dialog
|
class="spotDialog command-dialog-mange"
|
: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>
|
<div class="tabBoxLoading"
|
v-loading="tableLoading"
|
element-loading-text="加载中..."
|
element-loading-background="rgba(0, 0, 0, 0.1)"
|
>
|
<el-table
|
v-if="tableData.length > 0"
|
|
ref="polygonTableEle"
|
highlight-current-row
|
:row-class-name="tableRowClassName"
|
:data="tableData"
|
@row-click="handleLocationPolygon"
|
|
>
|
<el-table-column type="index" align="center" :width="pxToRemNum(30)" label="序号">
|
<template #default="{ $index }">
|
{{ ($index + 1).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> -->
|
<el-button icon="el-icon-delete" link @click="handleDelete(scope.row)"></el-button>
|
<!-- <span
|
class="operationspan"
|
v-if="scope.row.is_exception == 2"
|
@click.stop="handleSelectionChange(scope.row)"
|
>
|
{{ isEditing && selectionIds === scope.row.id ? '取消编辑' : '编辑' }}
|
</span> -->
|
<template v-if="scope.row.is_exception == 2">
|
<el-button
|
v-if="!isEditing || selectionIds !== scope.row.id"
|
icon="el-icon-edit"
|
link
|
@click.stop="handleSelectionChange(scope.row)"
|
/>
|
<el-button
|
v-else
|
icon="el-icon-circle-close"
|
link
|
@click.stop="handleSelectionChange(scope.row)"
|
|
/>
|
</template>
|
</template>
|
</el-table-column>
|
</el-table>
|
</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="command-cesium" v-show="uploadPatchDialog"></div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { flyVisual } from '@ztzf/utils'
|
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 isMapReady = ref(false);
|
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(true);
|
const tableLoading = ref(true);
|
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 isInit = ref(true);
|
// 图斑管理表格
|
const getTableList = () => {
|
tableLoading.value = true;
|
const requestParams = {
|
patchesInfoId: props.detailid,
|
};
|
AlltableMapListApi(requestParams).then(res => {
|
tableData.value = res.data.data?.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 (!tableData.value) {
|
viewInstance.value?.flyToContour();
|
} else {
|
entitiesAddSpot();
|
}
|
}).finally(() => {
|
tableLoading.value = false;
|
});
|
};
|
|
|
|
// 地图
|
const initMap = () => {
|
if (!document.getElementById('spotMap') || isMapReady.value) 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);
|
|
// 确保 readyPromise 存在
|
if (viewer.readyPromise) {
|
viewer.readyPromise.then(() => {
|
isMapReady.value = true;
|
getTableList();
|
}).catch((error) => {
|
console.error('地图加载失败：', error);
|
ElMessage.error('地图加载失败，请刷新重试');
|
});
|
} else {
|
|
// 如果没有 readyPromise
|
setTimeout(() => {
|
isMapReady.value = true;
|
getTableList();
|
}, 1000);
|
}
|
};
|
|
|
// 仅弹框初始化时执行的定位逻辑
|
const initMapLocation = () => {
|
if (tbJwdList.length === 0 || !homeViewer.value) return;
|
|
// 计算所有图斑的包围球（用于初始化定位）
|
const allPositions = tbJwdList.flatMap(item =>
|
Cesium.Cartesian3.fromDegreesArray(item.grouped)
|
);
|
const boundingSphere = Cesium.BoundingSphere.fromPoints(allPositions);
|
|
// 初始化定位（仅执行一次）
|
homeViewer.value.camera.flyToBoundingSphere(boundingSphere, {
|
duration: 0,
|
offset: new Cesium.HeadingPitchRange(
|
Cesium.Math.toRadians(0),
|
Cesium.Math.toRadians(-90)
|
),
|
});
|
};
|
// 初始化所有图斑
|
const entitiesAddSpot = () => {
|
if (!isMapReady.value || !viewer) return;
|
viewer?.entities.removeAll();
|
tbJwdList = []; // 重置经纬度列表
|
|
tableData.value.forEach(item => {
|
const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
|
if (!numbersWithCommas) return;
|
|
const grouped = numbersWithCommas.map(Number);
|
tbJwdList.push({ ...item, grouped }); // 存储经纬度用于后续操作
|
|
// 绘制图斑（保留原有逻辑，仅移除定位相关代码）
|
const fillColor = 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: fillColor,
|
outline: true,
|
outlineColor: outlineColor,
|
outlineWidth: 2,
|
clampToGround: true,
|
outlineDepthFailColor: outlineColor,
|
},
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArray(grouped),
|
width: 2,
|
material: outlineColor,
|
clampToGround: true,
|
},
|
zIndex: 99,
|
});
|
});
|
|
// 仅在初始化阶段执行定位（关键：通过isInit控制）
|
if (isInit.value) {
|
initMapLocation();
|
isInit.value = false; // 初始化完成，后续不再执行定位
|
}
|
|
// 保留图斑点击高亮事件（原有逻辑不变）
|
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 positionsData = [];
|
for (let i = 0; i < numbersWithCommas.length; i += 2) {
|
const lon = Number(numbersWithCommas[i]);
|
const lat = Number(numbersWithCommas[i + 1]);
|
positionsData.push([lon, lat, 10]);
|
}
|
flyVisual({
|
positionsData: positionsData,
|
viewer: homeViewer.value,
|
multiple: 15,
|
|
});
|
}
|
}
|
// 清空选中的数据
|
const clearSelect = () => {
|
lastHighlightRow = null;
|
selectionList.value = [];
|
viewer?.entities.removeAll();
|
};
|
// 编辑
|
|
const handleSelectionChange = row => {
|
// 如果是同一个图斑且正在编辑，则取消编辑
|
if (selectionIds.value === row.id && isEditing.value) {
|
isEditing.value = false;
|
handleUpDateDrawState(false);
|
selectionIds.value = null;
|
selectionList.value = [];
|
return;
|
}
|
|
// 定位到选中的图斑
|
handleLocationPolygon(row);
|
|
// 仅异常图斑可编辑
|
if (row.is_exception !== 2) {
|
ElMessage.warning('仅异常图斑支持编辑绘制');
|
return;
|
}
|
|
// 设置编辑状态
|
selectionIds.value = row.id;
|
selectionList.value = row;
|
isEditing.value = true;
|
handleUpDateDrawState(true);
|
};
|
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('删除成功');
|
tableData.value = tableData.value.filter(item => item.id !== row.id);
|
//从地图上移除对应的图斑实体
|
const entityId = `polygon_dk${row.id}`;
|
viewer?.entities.removeById(entityId);
|
const exceptionCountItem = infoList.value.find(item => item.name === '异常图斑数量');
|
if (exceptionCountItem && row.is_exception === 2) {
|
exceptionCountItem.value = Math.max(0, parseInt(exceptionCountItem.value) - 1);
|
}
|
const totalCountItem = infoList.value.find(item => item.name === '图斑数量');
|
if (totalCountItem) {
|
totalCountItem.value = Math.max(0, parseInt(totalCountItem.value) - 1);
|
}
|
|
// 清除选中状态
|
if (selectionIds.value === row.id) {
|
selectionIds.value = null;
|
selectionList.value = [];
|
isEditing.value = false;
|
handleUpDateDrawState(false);
|
}
|
|
});
|
});
|
};
|
|
// 保存
|
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) {
|
isInit.value = true;
|
isMapReady.value = false;
|
setTimeout(() => {
|
initMap();
|
getspotManagementTableApi();
|
}, 0);
|
} else {
|
tableLoading.value = false;
|
tableData.value = [];
|
isEditing.value = false;
|
handleUpDateDrawState(false);
|
destroyMap();
|
isInit.value = false;
|
clearSelect();
|
isMapReady.value = false;
|
}
|
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;
|
}
|
:global(.spotDialog .el-dialog__body) {
|
padding: 2rem 2rem 0 !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.8);
|
|
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(64, 158, 255,0.3) !important;
|
}
|
|
td {
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
|
}
|
}
|
|
// 选中行
|
.current-row td {
|
|
background-color: rgba(64, 158, 255,0.3) !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;
|
}
|
.tabBoxLoading {
|
height: 100%;
|
|
}
|
|
.el-table {
|
height: 98%;
|
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%;
|
}
|
.el-button {
|
padding: 0;
|
color: #fff;
|
width: 17px;
|
}
|
</style>
|
