2025.7.4 动态溯源

riku

2025-07-04 d6e6f8b5b31e132e4597eb531168d3e88f3bda72

 src/components/monitor/FactorLegend.vue

@@ -1,19 +1,31 @@
<template>
  <BaseCard>
  <transition
    name="el-zoom-in-left"
    @before-enter="onBeforeEnter"
    @after-leave="onAfterLeave"
  >
    <BaseCard v-show="show">
    <template #content>
      <el-row justify="space-between" align="middle">
        <el-row align="middle">
          <img src="@/assets/mipmap/data_chart.png" class="ff-img m-r-4" />
          <span>走航图例</span>
            <span v-if="factor.factorName">（{{ factor.factorName }}）</span>
        </el-row>
        <span>{{ factor.factorName }}</span>
          <span @click="show = !show" class="btn-show">
            <el-icon v-if="show"><ArrowLeftBold /></el-icon>
            <el-icon v-else><ArrowRightBold /></el-icon>
          </span>
      </el-row>
      <div
        v-for="(item, index) in legends"
        :key="index"
        class="flexbox align-items margin-top"
      >
        <div class="rectangle" :style="'background-color: ' + item.color"></div>
          <div
            class="rectangle"
            :style="'background-color: ' + item.color"
          ></div>
        <el-row v-if="item.max">
          <span class="w-40 text-right">{{ item.min }}</span>
          <span class="w-20 text-center">~</span>
@@ -41,6 +53,16 @@
      </div>
    </template>
  </BaseCard>
  </transition>
  <BaseCard v-show="btnShow">
    <template #content>
      <span @click="show = !show" class="btn-show">
        <img src="@/assets/mipmap/data_chart.png" class="ff-img m-r-4" />
        <el-icon v-if="show"><ArrowLeftBold /></el-icon>
        <el-icon v-else><ArrowRightBold /></el-icon>
      </span>
    </template>
  </BaseCard>
</template>

<script>
@@ -60,7 +82,9 @@
    return {
      // 绘图模式，false: 标准模式；true：动态模式
      legendType: false,
      legends: []
      legends: [],
      show: true,
      btnShow: false
    };
  },
  watch: {
@@ -149,6 +173,12 @@
          this.factor.max
        );
      });
    },
    onBeforeEnter() {
      this.btnShow = false;
    },
    onAfterLeave() {
      this.btnShow = true;
    }
  }
};
@@ -166,4 +196,10 @@
  --el-switch-on-color: #1f9956;
  --el-switch-off-color: #8b8b8b;
}
.btn-show {
  cursor: pointer;
}
.btn-show:hover {
  color: #23dad1;
}
</style>