<template>
|
<!-- 地形剖面分析 -->
|
<div class="topography">
|
<el-form :model="form" label-width="80px">
|
<el-form-item label="采样间距">
|
<el-input
|
v-model="form.sampleInterval"
|
placeholder="请输入采样间距"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="button-group">
|
<el-button @click="handleDraw">绘制</el-button>
|
<el-button @click="handleClear">清除</el-button>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import { reactive, defineEmits } from "vue";
|
|
// 定义 emit 方法
|
const emit = defineEmits(["draw", "clear"]);
|
// 剖面提取
|
const form = reactive({
|
sampleInterval: "60", // 默认值为60
|
});
|
const handleDraw = () => {
|
console.log("剖面绘制");
|
emit("draw", form);
|
};
|
const handleClear = () => {
|
console.log("剖面清除");
|
emit("clear");
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.topography {
|
background: url("@/assets/img/tools/plotting_new.png") no-repeat;
|
filter: opacity(83%);
|
background-size: 100% 100%;
|
padding: 20px 10px;
|
width: 300px;
|
height: 100px;
|
background-color: aqua;
|
}
|
|
/deep/ .el-input__wrapper {
|
// background-color: #8b2f2f !important;
|
border: none !important;
|
}
|
</style>
|
