riku
2025-09-11 307b17ef15c73a071912a262834f2a5f68e1fa87
src/components/monitor/FactorLegend.vue
@@ -1,39 +1,73 @@
<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 @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>
          <el-row v-if="item.max">
            <span class="w-40 text-right">{{ item.min }}</span>
            <span class="w-20 text-center">~</span>
            <span class="w-40 text-right">{{ item.max }}</span>
            <span class="w-60 m-l-8">{{ item.unit }}</span>
          </el-row>
          <el-row v-else>
            <span class="w-40 text-right"></span>
            <span class="w-20 text-center">></span>
            <span class="w-40 text-right">{{ item.min }}</span>
            <span class="w-60 m-l-8">{{ item.unit }}</span>
          </el-row>
        </div>
        <div>
          切换绘图模式:
          <el-switch
            v-model="legendType"
            width="60"
            inline-prompt
            style=""
            active-text="动态"
            inactive-text="标准"
            @change="handleChange"
          />
        </div>
      </template>
    </BaseCard>
  </transition>
  <BaseCard v-show="btnShow">
    <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>
        </el-row>
        <span>{{ factor.factorName }}</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>
        <el-row v-if="item.max">
          <span class="w-40 text-right">{{ item.min }}</span>
          <span class="w-20 text-center">~</span>
          <span class="w-40 text-right">{{ item.max }}</span>
          <span class="w-50 m-l-8">{{ item.unit }}</span>
        </el-row>
        <el-row v-else>
          <span class="w-40 text-right"></span>
          <span class="w-20 text-center">></span>
          <span class="w-40 text-right">{{ item.min }}</span>
          <span class="w-50 m-l-8">{{ item.unit }}</span>
        </el-row>
      </div>
      <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>
import { Legend } from '@/model/Legend';
import { factorUnit } from '../../constant/factor-unit';
import { factorUnit } from '@/constant/factor-unit';
import { Factor } from '@/model/Factor';
export default {
@@ -43,21 +77,40 @@
      default: () => new Factor()
    }
  },
  emits: ['change'],
  data() {
    return {};
    return {
      // 绘图模式,false: 标准模式;true:动态模式
      legendType: false,
      legends: [],
      show: true,
      btnShow: false
    };
  },
  watch: {
    factor(nValue, oValue) {
      if (nValue != oValue && nValue) {
        this.legends = this.refreshLegend(
          nValue.factorName,
          nValue.legendType,
          nValue.min,
          nValue.max
        );
      }
    }
  },
  computed: {
    legends() {
      const res = this.factor
        ? this.refreshLegend(
            this.factor.factorName,
            this.factor.legendType,
            this.factor.min,
            this.factor.max
          )
        : [];
      return res;
    }
    // legends() {
    //   const res = this.factor
    //     ? this.refreshLegend(
    //         this.factor.factorName,
    //         this.factor.legendType,
    //         this.factor.min,
    //         this.factor.max
    //       )
    //     : [];
    //   return res;
    // }
  },
  methods: {
    /**
@@ -99,15 +152,33 @@
          ', ' +
          color[3] +
          ')';
        const { scale = 1, unit = '' } = factorUnit[name];
        legendList.push({
          color: bgColor,
          min: r[0],
          max: nextR ? nextR[0] : undefined,
          unit: factorUnit[name]
          min: r[0] * scale,
          max: nextR ? nextR[0] * scale : undefined,
          unit: unit
        });
      }
      return legendList;
    },
    handleChange(value) {
      this.$emit('change', value, () => {
        this.legends = this.refreshLegend(
          this.factor.factorName,
          this.factor.legendType,
          this.factor.min,
          this.factor.max
        );
      });
    },
    onBeforeEnter() {
      this.btnShow = false;
    },
    onAfterLeave() {
      this.btnShow = true;
    }
  }
};
@@ -120,4 +191,15 @@
.text-center {
  text-align: center;
}
.el-switch {
  --el-switch-on-color: #1f9956;
  --el-switch-off-color: #8b8b8b;
}
.btn-show {
  cursor: pointer;
}
.btn-show:hover {
  color: #23dad1;
}
</style>