动态溯源（待完成）

Riku

2025-06-11 5679cbbb630092a197d991cb41997a2d953261e9

 src/views/sourcetrace/SourceTrace.vue

@@ -15,9 +15,14 @@
              ref="scrollContentRef"
              style="display: flex; width: fit-content"
            >
              <template v-for="(item, index) in streams" :key="index">
                <PollutedClueItem :item="item"></PollutedClueItem>
              </template>
            <TransitionGroup name="list">
              <div v-for="(item, index) in streams" :key="index">
                <PollutedClueItem
                  :item="item"
                  @showMarksAndPolygon="showMarksAndPolygon"
                ></PollutedClueItem>
              </div>
            </TransitionGroup>
            </div>
          </el-scrollbar>
        </template>
@@ -187,26 +192,6 @@
  });
}

function formatPercentage(value) {
  return Math.round(value * 100) + '%';
}

function formatDistanceType(value) {
  switch (value) {
    case 'TYPE1':
      return '50米';
    case 'TYPE2':
      return '50米 - 500米';
    case 'TYPE3':
      return '50米 - 1公里';
    case 'TYPE4':
      return '50米 - 2公里';

    default:
      break;
  }
}

/******************************************************************************************************************** */

/**
@@ -339,3 +324,22 @@
  margin-bottom: 4px;
}
</style>
<style>
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
</style>