2025.7.4 动态溯源

riku

2025-07-04 d6e6f8b5b31e132e4597eb531168d3e88f3bda72

 src/components/monitor/FactorRadio.vue

@@ -1,11 +1,32 @@
<template>
  <BaseCard>
  <transition
    name="el-zoom-in-left"
    @before-enter="onBeforeEnter"
    @after-leave="onAfterLeave"
  >
    <BaseCard v-show="show" direction="left">
    <template #content>
        <!-- <el-collapse-transition> -->
      <el-radio-group v-model="radio" size="default" @change="handleChange">
        <el-radio v-for="(item, i) in options" :key="i" :value="item.value">{{
          item.label
        }}</el-radio>
      </el-radio-group>
        <!-- </el-collapse-transition> -->
        <span @click="show = !show" class="btn-show">
          <el-icon v-if="show"><ArrowLeftBold /></el-icon>
          <el-icon v-else><ArrowRightBold /></el-icon>
        </span>
      </template>
    </BaseCard>
  </transition>
  <BaseCard v-show="btnShow">
    <template #content>
      <el-row @click="show = !show" class="btn-show">
        <font-awesome-icon icon="fa-check-circle" />
        <el-icon v-if="show"><ArrowLeftBold /></el-icon>
        <el-icon v-else><ArrowRightBold /></el-icon>
      </el-row>
    </template>
  </BaseCard>
</template>
@@ -30,7 +51,9 @@
  emits: ['change', 'update:modelValue'],
  data() {
    return {
      radio: defaultOptions(TYPE0).value
      radio: defaultOptions(TYPE0).value,
      show: true,
      btnShow: false
    };
  },
  computed: {
@@ -42,12 +65,12 @@
    deviceType(nV, oV) {
      if (nV != oV) {
        this.radio = this.options[0].value;
        this.$emit('update:modelValue', this.radio)
        this.$emit('update:modelValue', this.radio);
      }
    },
    modelValue(nV, oV){
      if (nV != oV) {
        this.radio = nV
        this.radio = nV;
      }
    }
  },
@@ -55,17 +78,31 @@
    handleChange(value) {
      const item = this.options.find((v) => v.value == value);
      this.$emit('change', item.value, item);
      this.$emit('update:modelValue', item.value)
      this.$emit('update:modelValue', item.value);
      // todo 地图3d图像切换展示监测因子
    },
    onBeforeEnter() {
      this.btnShow = false;
    },
    onAfterLeave() {
      this.btnShow = true;
    }
  }
};
</script>
<style scoped>
.el-radio {
:deep(.el-radio) {
  --el-radio-text-color: white;
  --el-color-primary: #23dad1;
  margin-right: 10px;
  height: initial;
}

.btn-show {
  cursor: pointer;
  padding: 4px 0;
}
.btn-show:hover {
  color: #23dad1;
}
</style>