<template>
|
<!-- 可视域分析 -->
|
<div class="box">
|
<!-- 滑块与输入框组合 -->
|
<el-form label-width="90px">
|
<el-form-item label="显示视锥线">
|
<el-switch
|
@change="onSwitchChange"
|
v-model="localShowConeLine"
|
inline-prompt
|
active-text="ON"
|
inactive-text="OFF"
|
/>
|
</el-form-item>
|
<el-form-item label="朝向角">
|
<el-slider v-model="option.heading" :min="0" :max="360" show-input />
|
</el-form-item>
|
<el-form-item label="垂直广角">
|
<el-slider
|
v-model="option.verticalAngle"
|
:min="0"
|
:max="180"
|
show-input
|
/>
|
</el-form-item>
|
<el-form-item label="水平广角">
|
<el-slider
|
v-model="option.horizontalViewAngle"
|
:min="0"
|
:max="180"
|
show-input
|
/>
|
</el-form-item>
|
<el-form-item label="视距">
|
<el-slider v-model="option.distance" :min="0" :max="1000" show-input />
|
</el-form-item>
|
</el-form>
|
|
<div style="display: flex; justify-content: flex-end; margin-top: 35px">
|
<el-button @click="handleDraw">鼠标绘制</el-button>
|
<el-button @click="handleClear">清除</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { reactive, ref, watch } from "vue";
|
|
// 定义数据
|
const option = reactive({
|
heading: 0,
|
verticalAngle: 60,
|
horizontalViewAngle: 90,
|
distance: 300,
|
});
|
|
const localShowConeLine = ref(false);
|
// 当开关状态改变时触发的方法
|
function onSwitchChange(value) {
|
// 更新本地状态
|
localShowConeLine.value = value;
|
// 发送事件更新父组件的状态
|
emit("update:showConeLine", value);
|
}
|
|
// 定义 emit
|
const emit = defineEmits([
|
"update-option",
|
"draw",
|
"clear",
|
"update:showConeLine",
|
]);
|
|
// 实时监听 option 变化并通知父组件
|
watch(
|
option,
|
(newOption) => {
|
emit("update-option", { ...newOption });
|
},
|
{ deep: true }
|
);
|
|
// 接收父组件传递过来的 props
|
const props = defineProps({
|
message: String,
|
option: Object,
|
});
|
// 监听父组件传递的 option，并同步到本地的 option
|
watch(
|
() => props.option, // 监听 props.option 的变化
|
(newOption) => {
|
if (newOption) {
|
Object.assign(option, newOption); // 将父组件的 option 同步到本地的 option
|
}
|
},
|
{ deep: true, immediate: true } // 深度监听，且立即执行一次
|
);
|
|
// 鼠标绘制事件
|
const handleDraw = () => {
|
emit("draw", { ...option });
|
};
|
|
// 清除事件
|
const handleClear = () => {
|
emit("clear");
|
};
|
</script>
|
<style lang="less" scoped>
|
.box {
|
padding: 20px;
|
width: 350px;
|
height: 350px;
|
background: url("@/assets/img/tools/plotting_new.png") no-repeat;
|
filter: opacity(83%);
|
background-size: 100% 100%;
|
border-radius: 10px;
|
color: #fff;
|
box-sizing: border-box;
|
}
|
|
/deep/ .el-slider__bar {
|
background-color: #009688;
|
border-color: #009688;
|
}
|
|
/deep/ .el-slider__button {
|
border-color: rgb(0, 150, 136);
|
}
|
|
/deep/ .el-slider__input {
|
width: 112px;
|
}
|
|
/deep/ .el-input__wrapper {
|
// background-color: #fff !important;
|
border-color: #fff !important;
|
}
|
|
/deep/ .el-input-number {
|
span {
|
// background-color: #fff !important;
|
background: rgba(8, 75, 66, 1) !important;
|
color: white !important;
|
}
|
}
|
|
/deep/ .el-slider__runway.show-input {
|
margin-right: 18px;
|
}
|
|
/deep/ .el-switch.is-checked .el-switch__core {
|
background-color: #009688;
|
border-color: #009688;
|
}
|
</style>
|
