wangjuncheng
4 天以前 cf7752d995e09d48eca9a1ca5634a9e71ae46553
src/components/tools/Legend_mnfz.vue
@@ -11,27 +11,24 @@
</template>
<script setup>
import { onMounted, ref } from "vue";
import { onMounted, watch, ref } from "vue";
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
// 定义水位高度数据
const waterHeightLevels = ref([
  { height: 0.5, color: "#09a2dc" },
  { height: 1.0, color: "#58c196" },
  { height: 1.5, color: "#bedf74" },
  { height: 2.0, color: "#d7f06e" },
  { height: 2.5, color: "#ffe930" },
  { height: 3.0, color: "#fdd10a" },
  { height: 4.0, color: "#feb652" },
  { height: 5.0, color: "#fd7f06" },
  { height: 10.0, color: "#fe2b07" },
]);
onMounted(()=>{
})
const simStore = useSimStore();
const { waterLegendData } = storeToRefs(simStore);
const waterHeightLevels = ref([]);
watch(waterLegendData, (newVal) => {
  waterHeightLevels.value = newVal.map(item => ({ ...item }));
}, { immediate: true });
onMounted(() => {
});
</script>
<style lang="less" scoped>
.legend-container {
  padding: 1rem;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  max-width: 100%;
@@ -40,6 +37,7 @@
}
.legend-title {
  margin-bottom: 8px;
  width: 100%;
  text-align: center;
  letter-spacing: 2px;
@@ -61,9 +59,10 @@
}
.legend-color-box {
  width: 60px;
  height: 10px;
  width: 4rem;
  height: 1rem;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  display: inline-block;
}