| | |
|---|
| | | :terrain="true" |
|---|
| | | :layer-mode="4" |
|---|
| | | :boundary="false" |
|---|
| | | :list="list" |
|---|
| | | @point-change="handlePointChange" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | <div class="right-container"> |
|---|
| | |
|---|
| | | <div class="detail-title">轨迹点</div> |
|---|
| | | <div class="command-table-container"> |
|---|
| | | <div class="command-table-content"> |
|---|
| | | <el-table class="command-table" :data="list" :row-class-name="getRowClassName"> |
|---|
| | | <el-table ref="pointTableRef" class="command-table" :data="list" :row-class-name="getRowClassName"> |
|---|
| | | <el-table-column type="index" width="60" label="序号" /> |
|---|
| | | <el-table-column label="经纬度"> |
|---|
| | | <template #default="{ row }">{{ row.longitude }},{{ row.latitude }}</template> |
|---|
| | |
|---|
| | | function handleClosed() { |
|---|
| | | formData.value = initForm() |
|---|
| | | list.value = [] |
|---|
| | | selectedPointIndex.value = 0 |
|---|
| | | viewer = null |
|---|
| | | geometricSource = null |
|---|
| | | droneLineEntity = null |
|---|
| | | startDroneEntity = null |
|---|
| | | } |
|---|
| | | |
|---|
| | | function getRowClassName({ row }) { |
|---|
| | | console.log(row.isAlarm, 11111111111) |
|---|
| | | // 当前选中的轨迹点索引（与地图时间轴联动） |
|---|
| | | const selectedPointIndex = ref(0) |
|---|
| | | const pointTableRef = ref(null) |
|---|
| | | |
|---|
| | | return row?.isAlarm === 1 ? 'alarm-row' : '' |
|---|
| | | // 地图上点击轨迹点后，同步高亮表格对应行，并滚动到该行 |
|---|
| | | function handlePointChange({ index } = {}) { |
|---|
| | | if (typeof index !== 'number') return |
|---|
| | | selectedPointIndex.value = index |
|---|
| | | scrollToSelectedRow() |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 表格行较多时自动滚动到选中行 |
|---|
| | | async function scrollToSelectedRow() { |
|---|
| | | await nextTick() |
|---|
| | | const rowEl = pointTableRef.value?.$el?.querySelector('.selected-row') |
|---|
| | | rowEl?.scrollIntoView({ block: 'nearest', behavior: 'smooth' }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function getRowClassName({ row, rowIndex }) { |
|---|
| | | const classNames = [] |
|---|
| | | if (row?.isAlarm === 1) classNames.push('alarm-row') |
|---|
| | | if (rowIndex === selectedPointIndex.value) classNames.push('selected-row') |
|---|
| | | return classNames.join(' ') |
|---|
| | | } |
|---|
| | | |
|---|
| | | let viewer, geometricSource, droneLineEntity, startDroneEntity |
|---|
| | |
|---|
| | | background-color: transparent !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 与地图时间轴联动的选中行高亮 |
|---|
| | | :deep(.selected-row) { |
|---|
| | | background: #14335f !important; |
|---|
| | | |
|---|
| | | td { |
|---|
| | | background-color: transparent !important; |
|---|
| | | color: #4faaff !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
