riku
2025-07-16 c23ac06446a9a1edc41cc13723e5d0b8eabdfd63
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,58 @@
            推荐路线总长{{ latestResult.direction.distance }}米
          </el-text>
        </el-row>
      </template>
      </template> -->
      <el-button icon="Plus" @click="addAdvice"></el-button>
      <el-button icon="Minus" @click="removeAdvice"></el-button>
      <el-scrollbar height="200">
        <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>
      </el-scrollbar>
    </template>
    <template #footer> </template>
  </CardDialog>
@@ -97,6 +148,14 @@
function timeFormatter(time) {
  return moment(time).format('YYYY-MM-DD HH:mm:ss');
}
function addAdvice() {
  analysisResultList.unshift(analysisResultList[0]);
}
function removeAdvice() {
  analysisResultList.splice(0, 1);
}
</script>
<style scoped>
:deep(.el-text) {
@@ -105,5 +164,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> -->