动态溯源（待完成）

Riku

2025-06-11 5679cbbb630092a197d991cb41997a2d953261e9

 src/views/sourcetrace/UnderwayAdvice.vue

@@ -7,7 +7,7 @@
    width="400px"
  >
    <template #default>
      <template v-if="latestResult">
      <!-- <template v-if="latestResult">
        <el-row>
          <el-text size="small">{{ latestResult._timestr }}</el-text>
        </el-row>
@@ -25,7 +25,54 @@
            推荐路线总长{{ latestResult.direction.distance }}米
          </el-text>
        </el-row>
      </template>
      </template> -->
      <TransitionGroup name="list">
        <div v-for="(item, index) in analysisResultList" :key="index">
          <template v-if="index == 0">
            <el-row justify="space-between">
              <el-text size="small">{{ item._timestr }}</el-text>
              <el-tag type="danger" effect="dark">最新线索</el-tag>
            </el-row>
            <el-space>
              <el-icon color="#F56C6C" :size="40"
                ><WarnTriangleFilled
              /></el-icon>
              <el-text>
                {{ item.advice }}
              </el-text>
            </el-space>
            <el-row justify="space-between">
              <el-link type="primary" :underline="true" @click="showPolyline">
                {{ lineShow ? '收起路线' : '定位路线' }}
              </el-link>
              <el-text size="small">
                推荐路线总长{{ item.direction.distance }}米
              </el-text>
            </el-row>
            <el-divider>历史线索</el-divider>
          </template>
          <template v-else>
            <el-row>
              <el-text size="small">{{ item._timestr }}</el-text>
            </el-row>
            <el-space>
              <!-- <el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon> -->
              <el-text>
                {{ item.advice }}
              </el-text>
            </el-space>
            <!-- <el-row justify="space-between">
              <el-link type="primary" :underline="true" @click="showPolyline">
                {{ lineShow ? '收起路线' : '定位路线' }}
              </el-link>
              <el-text size="small">
                推荐路线总长{{ item.direction.distance }}米
              </el-text>
            </el-row> -->
            <el-divider></el-divider>
          </template>
        </div>
      </TransitionGroup>
    </template>
    <template #footer> </template>
  </CardDialog>
@@ -105,5 +152,25 @@

:deep(.el-link) {
  --el-link-text-color: #23dad1;
  /* color: #ffd82a; */
}
</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>