1. 新增绘图模式的切换 2. 新增行政区划的切换展示

riku

2025-03-12 42f42dc88214f283b43c422f37e10ab45c5c5578

 src/components/monitor/FactorLegend.vue

@@ -18,14 +18,26 @@
          <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>
          <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-50 m-l-8">{{ item.unit }}</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>
@@ -33,7 +45,7 @@

<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 +55,38 @@
      default: () => new Factor()
    }
  },
  emits: ['change'],
  data() {
    return {};
    return {
      // 绘图模式，false: 标准模式；true：动态模式
      legendType: false,
      legends: []
    };
  },
  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: {
    /**
@@ -103,11 +132,22 @@
          color: bgColor,
          min: r[0],
          max: nextR ? nextR[0] : undefined,
          unit: factorUnit[name]
          unit: factorUnit[name] ? factorUnit[name].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
        );
      });
    }
  }
};
@@ -120,4 +160,9 @@
.text-center {
  text-align: center;
}

.el-switch {
  --el-switch-on-color: #1f9956;
  --el-switch-off-color: #8b8b8b;
}
</style>