364 lines
11 KiB
Vue
364 lines
11 KiB
Vue
<template>
|
|
<q-dialog
|
|
persistent
|
|
v-model="show_dialog"
|
|
@before-hide="resetData"
|
|
@keydown="
|
|
(evt) => {
|
|
if (!loading && evt.keyCode == 27) {
|
|
show_dialog = false;
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<q-card class="overflow-hidden" style="max-width: 80vw">
|
|
<q-form @submit="onSubmit">
|
|
<q-card-section class="q-ma-none q-pa-sm">
|
|
<div class="row">
|
|
<div class="col-auto text-h6">
|
|
{{ $t("edge blending") }}
|
|
</div>
|
|
<q-space />
|
|
<div>
|
|
<q-btn
|
|
:loading="loading"
|
|
flat
|
|
round
|
|
icon="close"
|
|
:disable="loading"
|
|
color="red"
|
|
v-close-popup
|
|
>
|
|
<q-tooltip>
|
|
{{ $t("close") }}
|
|
</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-section class="scroll" style="width: 80vw; height: 70vh">
|
|
<q-card class="fit">
|
|
<q-tabs
|
|
v-model="tab"
|
|
dense
|
|
class="text-grey"
|
|
active-color="primary"
|
|
indicator-color="primary"
|
|
align="justify"
|
|
narrow-indicator
|
|
>
|
|
<q-tab name="setting" :label="$t('blending setting')" />
|
|
<q-tab
|
|
v-if="!loading"
|
|
name="point_setting"
|
|
:label="$t('point correct')"
|
|
/>
|
|
</q-tabs>
|
|
|
|
<q-separator />
|
|
|
|
<q-tab-panels v-model="tab" animated class="q-pa-none q-ma-none">
|
|
<q-tab-panel name="setting"
|
|
><q-list>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-checkbox
|
|
v-model="edge_blending_info.enable_blending"
|
|
:loading="loading"
|
|
:disable="loading"
|
|
:label="$t('enable blending')"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-checkbox
|
|
v-model="edge_blending_info.enable_correct"
|
|
:loading="loading"
|
|
:disable="loading"
|
|
:label="$t('enable correct')"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section avatar class="header_label">
|
|
{{ $t("width") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
type="number"
|
|
min="0"
|
|
max="65535"
|
|
v-model="edge_blending_info.width"
|
|
:loading="loading"
|
|
:disable="loading"
|
|
lazy-rules
|
|
:rules="[
|
|
(val) =>
|
|
(val && val.toString().length > 0) ||
|
|
$t('Please type something'),
|
|
]"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section avatar class="header_label_2">
|
|
{{ $t("height") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
min="0"
|
|
max="65535"
|
|
v-model="edge_blending_info.height"
|
|
:loading="loading"
|
|
:disable="loading"
|
|
lazy-rules
|
|
:rules="[
|
|
(val) =>
|
|
(val && val.toString().length > 0) ||
|
|
$t('Please type something'),
|
|
]"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section avatar class="header_label">
|
|
{{ $t("row") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
min="0"
|
|
max="65535"
|
|
v-model="edge_blending_info.row"
|
|
:loading="loading"
|
|
:disable="loading"
|
|
lazy-rules
|
|
:rules="[
|
|
(val) =>
|
|
(val && val.toString().length > 0) ||
|
|
$t('Please type something'),
|
|
]"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section avatar class="header_label_2">
|
|
{{ $t("col") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
min="0"
|
|
max="65535"
|
|
v-model="edge_blending_info.col"
|
|
:loading="loading"
|
|
:disable="loading"
|
|
lazy-rules
|
|
:rules="[
|
|
(val) =>
|
|
(val && val.toString().length > 0) ||
|
|
$t('Please type something'),
|
|
]"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section avatar class="header_label">
|
|
{{ $t("correct type") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-select
|
|
:loading="loading"
|
|
:disable="loading"
|
|
v-model="edge_blending_info.point_count"
|
|
:options="edge_correct_type_options"
|
|
emit-value
|
|
map-options
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="point_setting" class="q-pa-none q-ma-none fit">
|
|
<edge-blending-control
|
|
ref="correct_wall"
|
|
class="full-width overflow-hidden q-pa-xs"
|
|
style="height: 62vh"
|
|
:edge_blending_info="edge_blending_info"
|
|
:all_points="points"
|
|
>
|
|
</edge-blending-control>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-card>
|
|
</q-card-section>
|
|
<q-separator v-if="tab == 'setting'" />
|
|
<q-card-actions align="right" v-if="tab == 'setting'">
|
|
<q-btn
|
|
ref="accept"
|
|
flat
|
|
:label="$t('Accept')"
|
|
:loading="loading"
|
|
type="submit"
|
|
color="primary"
|
|
/>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.header_label {
|
|
width: 10%;
|
|
}
|
|
.header_label_2 {
|
|
width: 10%;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
defineComponent,
|
|
ref,
|
|
Ref,
|
|
watch,
|
|
computed,
|
|
onMounted,
|
|
onBeforeUnmount,
|
|
nextTick,
|
|
} from "vue";
|
|
import { useStore } from "src/store";
|
|
import { useQuasar, copyToClipboard } from "quasar";
|
|
import { useI18n } from "vue-i18n";
|
|
import GlobalData from "src/common/GlobalData";
|
|
import EdgeBlendingControl from "src/components/EdgeBlendingControl.vue";
|
|
|
|
import {
|
|
EdgeBlendingInfo,
|
|
EdgeBlendingPoint,
|
|
} from "src/entities/EdgeBlendingEntities";
|
|
|
|
export default defineComponent({
|
|
name: "ComponentEdgeBlendingDialog",
|
|
components: { EdgeBlendingControl },
|
|
setup() {
|
|
let $store = useStore();
|
|
let $q = useQuasar();
|
|
let $t = useI18n();
|
|
|
|
let show_dialog = ref(false);
|
|
let loading = ref(false);
|
|
let tab = ref("setting");
|
|
const correct_wall: Ref<any> = ref(null);
|
|
const points: Ref<EdgeBlendingPoint[]> = ref([]);
|
|
|
|
const edge_blending_info = ref(new EdgeBlendingInfo());
|
|
const edge_bending_points = ref([new EdgeBlendingPoint()]);
|
|
const edge_correct_type_options = ref([
|
|
{
|
|
label: $t.t("4 point plane correct"),
|
|
value: 4,
|
|
},
|
|
{
|
|
label: $t.t("9 point surface correct"),
|
|
value: 9,
|
|
},
|
|
]);
|
|
|
|
return {
|
|
show_dialog,
|
|
loading,
|
|
tab,
|
|
edge_blending_info,
|
|
edge_bending_points,
|
|
edge_correct_type_options,
|
|
correct_wall,
|
|
points,
|
|
copyToClipboard,
|
|
loga(a: any) {
|
|
console.log(a);
|
|
},
|
|
async showDialog() {
|
|
show_dialog.value = true;
|
|
loading.value = true;
|
|
try {
|
|
const response = await GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.getEdgeBlendingInfo();
|
|
if (response) {
|
|
edge_blending_info.value.enable_blending = response.enable_blending;
|
|
edge_blending_info.value.enable_correct = response.enable_correct;
|
|
edge_blending_info.value.width = response.width;
|
|
edge_blending_info.value.height = response.height;
|
|
edge_blending_info.value.col = response.col;
|
|
edge_blending_info.value.row = response.row;
|
|
edge_blending_info.value.point_count = response.point_count;
|
|
points.value = response.points;
|
|
} else {
|
|
throw $t.t("get edge blending data failed") + "!";
|
|
}
|
|
} catch {
|
|
$q.dialog({
|
|
title: $t.t("Error"),
|
|
message: $t.t("get edge blending data failed") + "!",
|
|
ok: {
|
|
label: $t.t("ok"),
|
|
noCaps: true,
|
|
flat: true,
|
|
},
|
|
cancel: {
|
|
label: $t.t("cancel"),
|
|
noCaps: true,
|
|
flat: true,
|
|
},
|
|
}).onDismiss(() => {
|
|
show_dialog.value = false;
|
|
});
|
|
}
|
|
|
|
loading.value = false;
|
|
},
|
|
resetData() {
|
|
loading.value = false;
|
|
},
|
|
|
|
async onSubmit() {
|
|
loading.value = true;
|
|
let success = false;
|
|
|
|
try {
|
|
const response = await GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.setEdgeBlendingInfo(
|
|
edge_blending_info.value.enable_blending,
|
|
edge_blending_info.value.enable_correct,
|
|
parseInt(edge_blending_info.value.width.toString()),
|
|
parseInt(edge_blending_info.value.height.toString()),
|
|
parseInt(edge_blending_info.value.col.toString()),
|
|
parseInt(edge_blending_info.value.row.toString()),
|
|
parseInt(edge_blending_info.value.point_count.toString())
|
|
);
|
|
if (response) {
|
|
success = response.success;
|
|
} else {
|
|
throw $t.t("set edge blending data failed") + "!";
|
|
}
|
|
} catch {
|
|
success = false;
|
|
}
|
|
$q.notify({
|
|
color: success ? "positive" : "negative",
|
|
icon: success ? "done" : "warning",
|
|
message:
|
|
$t.t("set edge blending data") +
|
|
(success ? $t.t("success") : $t.t("fail")) +
|
|
"!",
|
|
position: "top",
|
|
timeout: 1500,
|
|
});
|
|
loading.value = false;
|
|
},
|
|
};
|
|
},
|
|
});
|
|
</script>
|