动态溯源（待完成）

riku

2025-06-12 a3b2d94cbfb9bea819346a1b738237f72819a833

 src/components/scene/SceneTable.vue

@@ -3,7 +3,6 @@
    :data="sceneList"
    table-layout="fixed"
    size="small"
    height="30vh"
    :show-overflow-tooltip="true"
    border
    row-class-name="t-row"
@@ -13,7 +12,7 @@
    @row-click="handleRowClick"
    @filter-change="handleFilterChange"
  >
    <el-table-column type="index" label="#" width="25" />
    <!-- <el-table-column type="index" label="#" width="25" /> -->
    <el-table-column
      prop="type"
      label="类型"
@@ -23,13 +22,20 @@
      :filter-method="filterHandler"
    />
    <el-table-column prop="name" label="名称" />
    <!-- <el-table-column prop="location" label="地址" /> -->
    <el-table-column
    <el-table-column prop="location" label="地址" />
    <el-table-column label="临近站点" width="65">
      <template #default="{ row }">
        <div>{{ row.closestStation.name }}</div>
        <div>{{ parseInt(row.length) + '米' }}</div>
      </template>
    </el-table-column>
    <slot></slot>
    <!-- <el-table-column
      prop="districtName"
      label="区县"
      align="center"
      width="54"
    />
    /> -->
    <!-- <el-table-column label="管理" width="70" align="center">
      <template #default="{ row }">
        <el-button
@@ -44,13 +50,17 @@
  </el-table>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import { ref, computed, watch, onUnmounted } from 'vue';
import { sceneTypes, sceneIcon } from '@/constant/scene-types';
import MapUtil from '@/utils/map/util';
import marks from '@/utils/map/marks';

const props = defineProps({
  sceneList: Array
  sceneList: Array,
  showMarks: {
    type: Boolean,
    default: true
  }
});

let layer = undefined;
@@ -77,17 +87,39 @@
  }
});

onUnmounted(() => {
  removeLayer();
});

watch(showSceneList, (nV, oV) => {
  if (nV != oV) {
  if (nV && props.showMarks) {
    drawMarks(nV);
  } else {
    removeLayer();
  }
});

function drawMarks(sceneList) {
watch(
  () => props.showMarks,
  (nV, oV) => {
    if (showSceneList.value && nV) {
      drawMarks(showSceneList.value);
    } else {
      removeLayer();
    }
  },
  { immediate: true }
);

function removeLayer() {
  if (layer != undefined) {
    MapUtil.removeViews(layer);
    layer = undefined;
  }
}

function drawMarks(sceneList) {
  removeLayer();
  if (sceneList.length != 0) {
    const icons = [];
    sceneList.forEach((s) => {