<template>
|
<!-- 坡度分析 -->
|
<el-form :model="form" label-width="80px" class="terrain-settings">
|
<!-- 地表渲染 -->
|
<el-form-item label="地表渲染">
|
<el-radio-group v-model="form.terrainRender">
|
<el-radio :label="0">无</el-radio>
|
<el-radio :label="1">坡度</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
<!-- 等高线开关 -->
|
<el-form-item label="等高线">
|
<el-switch
|
v-model="form.contourLines"
|
inline-prompt
|
active-text="开"
|
inactive-text="关"
|
></el-switch>
|
<el-color-picker v-model="form.color" style="margin-left: 10px" />
|
</el-form-item>
|
|
<!-- 间距滑块（根据等高线开关控制显示） -->
|
<el-form-item label="间距" v-if="form.contourLines">
|
<el-slider v-model="form.spacing" :min="20" :max="500"></el-slider>
|
</el-form-item>
|
|
<!-- 线宽滑块（根据等高线开关控制显示） -->
|
<el-form-item label="线宽" v-if="form.contourLines">
|
<el-slider v-model="form.lineWidth" :min="1" :max="10"></el-slider>
|
</el-form-item>
|
</el-form>
|
</template>
|
|
<script setup>
|
import { reactive, watch } from "vue";
|
|
// 定义 props 和 emit
|
const props = defineProps({
|
modelValue: {
|
type: Object,
|
default: () => ({}),
|
},
|
});
|
const emit = defineEmits(["update-slope"]);
|
|
// 初始化 form 数据
|
const form = reactive({
|
terrainRender: 0,
|
contourLines: false,
|
color: "red",
|
spacing: 50,
|
lineWidth: 5,
|
});
|
|
// 监听 form 的变化，并将最新值传递给父组件
|
watch(
|
() => ({ ...form }), // 深拷贝以确保响应式触发
|
(newVal) => {
|
emit("update-slope", newVal);
|
},
|
{ deep: true } // 深度监听
|
);
|
</script>
|
|
<style lang="less" scoped>
|
.terrain-settings {
|
padding: 20px;
|
width: 290px;
|
background: url("@/assets/img/tools/plotting_new.png") no-repeat;
|
filter: opacity(83%);
|
background-size: 100% 100%;
|
box-sizing: border-box;
|
}
|
|
.setting-item {
|
margin-bottom: 20px;
|
display: flex;
|
}
|
|
|
|
/deep/ .el-switch.is-checked .el-switch__core {
|
background-color: #009688;
|
border-color: #009688;
|
}
|
/deep/ .el-radio__input.is-checked .el-radio__inner {
|
background-color: #009688;
|
border-color: #009688;
|
}
|
/deep/ .el-radio__input.is-checked + .el-radio__label {
|
color: #fff;
|
}
|
/deep/ .el-input__inner {
|
color: #fff !important;
|
}
|
</style>
|
