You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.9 KiB
Vue
113 lines
2.9 KiB
Vue
<template>
|
|
<el-dialog v-model="dialogVisible" @close="handleClose" title="设置参数" style="width: 276px;height: 570px;"
|
|
:close-on-click-modal="false">
|
|
<div class="content">
|
|
<el-form label-width="90px" v-model="calcParams">
|
|
<el-form-item label="值域范围：">
|
|
<el-input-number v-model="calcParams.min" placeholder="起值" :controls="false" :precision="0" />
|
|
<div style="width: 30px;justify-content: center;text-align: center;">~</div>
|
|
<el-input-number v-model="calcParams.max" placeholder="终值" :controls="false" :precision="0" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="img-layer">
|
|
<LayerTree :isPopup="true" class="popup-tree" :show-oper="false" @selected-changed="handleLayerSelected"
|
|
:token-key="currentTokenKey" />
|
|
</div>
|
|
</div>
|
|
<div class="oper-bottom">
|
|
<el-button type="warning" :icon="Close" @click="handleClose">取消</el-button>
|
|
|
|
<el-button type="primary" :icon="Check" @click="handleConfirm">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
|
import { Check, Close } from "@element-plus/icons-vue";
|
|
const { $toastMessage } = useNuxtApp();
|
|
import { STORAGE_KEYS } from "~/utils/storageKeys"
|
|
// 当前页图件token的 key
|
|
const currentTokenKey = STORAGE_KEYS.FAVORABLE_AREA_TOKEN;
|
|
|
|
const props = defineProps({
|
|
isVisible: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const selectedLayerData = ref(null);
|
|
|
|
// 计算参数
|
|
const calcParams = reactive({
|
|
min: 0,
|
|
max: 0
|
|
});
|
|
|
|
const emit = defineEmits(['setParams', 'update:changeShowDialog']);
|
|
|
|
// 控制弹出框显示
|
|
const dialogVisible = ref(props.isVisible);
|
|
|
|
const handleClose = () => {
|
|
dialogVisible.value = false;
|
|
emit('update:changeShowDialog', false);
|
|
};
|
|
|
|
|
|
// 图层选择改变事件
|
|
const handleLayerSelected = (data) => {
|
|
selectedLayerData.value = data;
|
|
};
|
|
|
|
// 确定选择事件
|
|
const handleConfirm = () => {
|
|
if (calcParams.min > calcParams.max) {
|
|
$toastMessage.warning("值域范围的终值必须大于起值!");
|
|
} else {
|
|
emit('setParams', { min: calcParams.min, max: calcParams.max, layer: selectedLayerData.value });
|
|
handleClose();
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
});
|
|
|
|
</script>
|
|
<style scoped>
|
|
.oper-bottom {
|
|
padding: 5px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
vertical-align: middle;
|
|
height: 40px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.content {
|
|
height: 450px;
|
|
}
|
|
|
|
.el-input-number {
|
|
width: 60px;
|
|
height: 25px;
|
|
}
|
|
|
|
.img-layer {
|
|
height: 400px;
|
|
background: #ccc;
|
|
border: 1px solid #333;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
.popup-tree {
|
|
height: 400px;
|
|
width: 100%;
|
|
}
|
|
</style> |