media_player_client/src/components/FusionSettingsDialog.vue
2023-01-14 13:24:27 +08:00

290 lines
8.3 KiB
Vue

<template>
<q-dialog
persistent
v-model="show_dialog"
@keydown="
(evt: any) => {
if (evt.keyCode == 27) {
show_dialog = false;
}
}
"
>
<q-card class="" style="max-width: 90vw">
<q-form>
<q-card-section class="q-ma-none q-pa-sm">
<div class="row">
<div class="col-auto text-h6">
{{ $t("fusion settings") }}
</div>
<q-space />
<q-btn
flat
round
icon="close"
color="red"
@click="clear()"
v-close-popup
>
<q-tooltip>
{{ $t("close") }}
</q-tooltip>
</q-btn>
<div></div>
</div>
</q-card-section>
<q-separator />
<!-- height: 80vh -->
<q-card-section class="scroll" style="width: 80vw">
<div
class="row"
style="border: 1px solid #b0bec5; text-align: center"
>
<div class="col-3" style="border-right: 1px solid #b0bec5">
<p class="text-center">{{ $t("Projector") }}</p>
<!-- row 在前col在后 -->
<div v-for="(item, index_row) in config.row">
<projector-item
v-for="(item, index_col) in config.col"
class="w-100"
:llabel="
$t('Projector') + (index_row * config.col + index_col + 1)
"
:lvalue="index_row + '/' + index_col"
></projector-item>
</div>
<div class="col-12" style="text-align: center">
{{ $t("Whether to enable integration")
}}<q-checkbox v-model="EnableBlending" />
</div>
</div>
<div class="col-9">
<div class="q-ta-md">
<q-btn-toggle
:disable="!$store.state.enablefusion"
no-caps
v-model="options"
toggle-color="primary"
:options="[
{ label: $t('FusionLocale'), value: 'FusionLocale' },
{
label: $t('FourPointCalibration'),
value: 'FourPointCalibration',
},
{
label: $t('SurfaceCorrection'),
value: 'SurfaceCorrection',
},
{
label: $t('DensityCorrection'),
value: 'DensityCorrection',
},
// { label: $t('GridSettings'), value: 'GridSettings' },
]"
/>
</div>
<div style="min-height: 72vh">
<component :is="options" />
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<span>{{ $t("Whether to hide the desktop") }}</span
><q-checkbox
style="justify-content: flex-start"
v-model="hide_desktop_value"
@click="send_hide_desktop"
/>
<div class="q-space" data-v-39efcd1f=""></div>
<q-btn
flat
:label="$t('Cancel')"
no-caps
color="primary"
v-close-popup
@click="$store.commit('setSelectedProjector', '0/0')"
/>
<q-btn
flat
:label="$t('save config')"
no-caps
color="primary"
@click="save"
v-close-popup
/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped>
.header_label {
width: 20%;
}
.w100 {
width: 100%;
}
</style>
<script lang="ts">
import {
defineComponent,
ref,
Ref,
watch,
computed,
onMounted,
onBeforeMount,
} from "vue";
import { useStore } from "src/store";
import { useQuasar, copyToClipboard } from "quasar";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";
import { Protocol } from "src/entities/WSProtocol";
import { EDeviceAttribute } from "src/entities/EDeviceAttribute";
import ProjectorItem from "src/components/FusionSettings/ProjectorItem.vue";
import FusionLocale from "src/components/FusionSettings/FusionLocale.vue";
import FourPointCalibration from "src/components/FusionSettings/FourPointCalibration.vue";
import GridSettings from "src/components/FusionSettings/GridSettings.vue";
import SurfaceCorrection from "src/components/FusionSettings/SurfaceCorrection.vue";
import DensityCorrection from "src/components/FusionSettings/DensityCorrection.vue";
export default defineComponent({
name: "ComponentFusionSettingsDialog",
components: {
ProjectorItem,
FusionLocale,
FourPointCalibration,
GridSettings,
SurfaceCorrection,
DensityCorrection,
},
setup() {
let set = GlobalData.getInstance().getCurrentClient();
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
let show_dialog = ref(false);
const showDialog = async () => {
show_dialog.value = true;
};
const send_hide_desktop = () => {
set?.SetBlendingOption(0, hide_desktop_value.value ? 1 : 0);
};
const config = ref({ col: 0, row: 0 });
const EnableBlending = ref(false);
let optionsstr = ref();
optionsstr.value = "FusionLocale";
const hide_desktop_value = ref(true);
const hide_desktop_id = ref(0);
const options = computed({
get() {
return optionsstr.value;
},
set(newValue) {
optionsstr.value = newValue;
},
});
watch(
() => EnableBlending,
(newVal, oldVal) => {
$store.commit("setEnablefusion", newVal.value);
set?.EnableBlending(newVal.value);
},
{ deep: true }
);
const erroe = () => {
$q.notify({
color: "negative",
icon: "warning",
message: "数据获取失败!",
position: "top",
timeout: 1500,
});
};
const save = () => {
set?.SaveBlendingConfig("");
show_dialog.value = false;
clear();
set?.GetBlendingConfig("").then((res) => {
let tmp = JSON.parse(res ? res.config : "");
EnableBlending.value = tmp.enable;
$store.commit("setEnablefusion", tmp.enable);
config.value.col = tmp.col;
config.value.row = tmp.row;
$store.commit("setfusion_configuration", res?.config);
});
$store.commit("setSelectedProjector", "0/0");
};
const getconfig = () => {
try {
set?.GetBlendingConfig("").then((res) => {});
set?.GetBlendingConfig("").then((res) => {
let tmp = JSON.parse(res ? res.config : "");
$store.commit("setEnablefusion", tmp.enable);
$store.commit("setfusion_configuration", res?.config);
});
} catch (error) {}
};
const clear = () => {
$store.commit("setSelectedProjector", "0/0");
setTimeout(() => {
sessionStorage.removeItem("FusionLocale");
sessionStorage.removeItem("SurfaceCorrection");
sessionStorage.removeItem("DensityCorrection");
sessionStorage.removeItem("FourPointCalibration");
}, 500);
getconfig();
};
onBeforeMount(() => {
setTimeout(() => {
try {
set?.GetBlendingConfig("").then((res) => {
let tmp = JSON.parse(res ? res.config : "");
EnableBlending.value = tmp.enable;
$store.commit("setEnablefusion", tmp.enable);
config.value.col = tmp.col;
config.value.row = tmp.row;
$store.commit("setfusion_configuration", res?.config);
});
} catch (error) {
erroe();
}
}, 1000);
});
onMounted(() => {
set?.GetBlendingConfig("").then((res) => {
let tmp = JSON.parse(res ? res.config : "");
hide_desktop_id.value = tmp.options[0];
hide_desktop_value.value = tmp.options[1] == 0 ? false : true;
});
});
return {
send_hide_desktop,
hide_desktop_value,
clear,
show_dialog,
options,
copyToClipboard,
showDialog,
EnableBlending,
config,
save,
};
},
});
</script>