961 lines
34 KiB
Vue
961 lines
34 KiB
Vue
<template>
|
|
<q-dialog persistent v-model="show_dialog" @keydown="
|
|
(evt: any) => {
|
|
if (evt.keyCode == 27) {
|
|
show_dialog = false;
|
|
}
|
|
if (evt.keyCode == 17) {
|
|
record_times++
|
|
}
|
|
}
|
|
">
|
|
<q-card class="" id="element" style="max-width: 90vw;padding: 0;">
|
|
<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 v-show="ispad" size="sm" dense flat @click="element_full_screen" round :icon="is_pad_screen?'zoom_in_map':'zoom_out_map'" >
|
|
|
|
</q-btn>
|
|
<q-btn size="sm" dense flat round icon="close" color="red" @click="clear()" v-close-popup>
|
|
<q-tooltip>
|
|
{{ $t("close") }}
|
|
</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
<!-- height: 80vh -->
|
|
<q-card-section class="scroll" :style="{ 'width': is_pad_style, padding: 0 }">
|
|
<div class="row" style="border: 1px solid #b0bec5; text-align: center">
|
|
<div class="col-2" 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"
|
|
@click="currently_selected_projector(index_row + '-' + index_col)"></projector-item>
|
|
</div> -->
|
|
|
|
<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"
|
|
@click="currently_selected_projector(index_row + '-' + index_col)"></projector-item>
|
|
</div>
|
|
<hr>
|
|
<div>
|
|
|
|
<div class="col-3 q-px-md "> <q-select class="q-pt-md overflow-hidden" :label="$t('change resolution')"
|
|
@update:model-value="(val) => { dialog(val, set_resolution, 'resolution') }" :dense="true" filled
|
|
v-model="now_resolution" :options="options_resolution" emit-value map-options /></div>
|
|
<!-- <div class="col-3 q-px-md"> <q-select class="q-pt-md " use-input hide-selected fill-input
|
|
@filter="filterFn_projector" :label="$t('Change projector layout')"
|
|
@update:model-value="(val) => { dialog(val, send_projectorlayout, 'projector') }" :dense="true" filled
|
|
v-model="now_select_projectorlayout" :options="show_projectorlayout" emit-value map-options /></div> -->
|
|
<div class="col-3 q-px-md"> <q-select class="q-pt-md " use-input hide-selected fill-input
|
|
@filter="filterFn_projector2" :label="$t('Change projector layout')"
|
|
@update:model-value="(val) => { dialog_projectorlayout(val, send_projectorlayout2) }" :dense="true" filled
|
|
v-model="now_select_projectorlayout_tmp" :options="show_projectorlayout2" emit-value /></div>
|
|
</div>
|
|
<div class="col-12" style="text-align: center">
|
|
{{
|
|
$t("Enable projection mode")
|
|
}}<q-checkbox v-model="EnableBlending" />
|
|
</div>
|
|
</div>
|
|
<div class="col-10">
|
|
<div class="q-ta-md">
|
|
<q-btn-toggle :disable="!$store.state.enablefusion" no-caps v-model="options" toggle-color="primary"
|
|
:options="btn_options" />
|
|
<q-btn-toggle v-show="isdebug" no-caps v-model="options" toggle-color="primary" :options="[
|
|
{ label: $t('debugging'), value: 'Debugging' }
|
|
]" />
|
|
</div>
|
|
<div style="min-height: 72vh">
|
|
<component ref="child" :is="options" :row="config.row" :col="config.col" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-actions align="right">
|
|
<!-- <span>{{ $t("disable blending params") }}</span>
|
|
<q-checkbox style="justify-content: flex-start" v-model="disable_blending_params"
|
|
@click="send_disable_blending_params" />
|
|
<span>{{ $t("show blending grids") }}</span>
|
|
<q-checkbox style="justify-content: flex-start" v-model="show_blending_grids"
|
|
@click="send_show_blending_grids" /> -->
|
|
<div class="q-space" data-v-39efcd1f=""></div>
|
|
<div class="q-space" data-v-39efcd1f=""></div>
|
|
<q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall config')" />
|
|
<div class="q-space" data-v-39efcd1f=""></div>
|
|
<q-btn flat :label="$t('Select saved configuration')" no-caps color="primary"
|
|
@click="select_configuration = true; select_configuration_name = ''; get_scenes()" />
|
|
<q-btn flat :label="$t('Cancel')" no-caps color="primary" v-close-popup
|
|
@click="$store.commit('setSelectedProjector', '0/0'); clear()" />
|
|
<q-btn flat :label="$t('save config')" no-caps color="primary" @click="save" />
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
|
|
<q-dialog v-model="medium">
|
|
<q-card style="width: 40vw; max-width: 80vw;">
|
|
<q-card-section>
|
|
<div class="text-h6">{{ $t('Whether to save the configuration') }}</div>
|
|
</q-card-section>
|
|
<q-card-section class="q-pt-none">
|
|
<q-select filled :model-value="save_cover_name" use-input hide-selected fill-input input-debounce="0"
|
|
:options="plan_list_op" @filter="filterFn" @input-value="setModel">
|
|
<template v-slot:option="{ itemProps, opt, selected, toggleOption }">
|
|
<q-item v-bind="itemProps">
|
|
<q-item-section>
|
|
<q-item-label v-html="opt" />
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-icon name="clear" @click="del_scenes(opt)"></q-icon>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
</q-card-section>
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<q-btn flat :label="$t('Cancel')" color="primary" @click="medium = false"/>
|
|
<q-btn flat :label="$t('save')" @click="saveconfig" color="primary" />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
|
|
<q-dialog v-model="select_configuration">
|
|
<q-card style="width: 40vw; max-width: 80vw;">
|
|
<q-card-section>
|
|
<div class="text-h6">{{ $t('read saved configuration') }}</div>
|
|
</q-card-section>
|
|
<q-card-section class="q-pt-none">
|
|
<q-select filled v-model="select_configuration_name" :options="plan_list" :label="$t('please choose')">
|
|
<template v-slot:option="{ itemProps, opt, selected, toggleOption }">
|
|
<q-item v-bind="itemProps">
|
|
<q-item-section>
|
|
<q-item-label v-html="opt" />
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-icon name="clear" @click="del_scenes(opt)"></q-icon>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
</q-card-section>
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<q-btn flat :label="$t('Cancel')" color="primary" @click="select_configuration=false" />
|
|
<q-btn flat :label="$t('load')" @click="apply_the_selected_configuration" color="primary" />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog v-model="del_dialog">
|
|
<q-card style="width: 40vw; max-width: 80vw;">
|
|
<q-card-section>
|
|
<div class="text-h6">{{ $t('confirm delete') }}</div>
|
|
</q-card-section>
|
|
<q-card-section class="q-pt-none">
|
|
{{ $t('Whether to delete') + name_to_be_deleted }}
|
|
</q-card-section>
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<q-btn flat :label="$t('Cancel')" color="primary" @click="del_dialog=false" />
|
|
<q-btn flat :label="$t('ok')" @click="()=>{dialog_del_scenes();del_dialog=false}" color="primary" />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
|
|
<q-dialog v-model="confirm">
|
|
<q-card style="width: 40vw; max-width: 80vw;">
|
|
<q-card-section>
|
|
<div class="text-h6">{{ $t('Do you confirm the modification') }}</div>
|
|
</q-card-section>
|
|
<q-card-section class="q-pt-none">
|
|
{{ dialog_data.type == 'resolution' ? $t('Whether to modify the resolution to') +
|
|
options_resolution[dialog_data.parameter].label : $t('Whether to change the projector layout to') +
|
|
projectorlayout[dialog_data.parameter].label }}
|
|
</q-card-section>
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<q-btn flat :label="$t('Cancel')" @click="()=>{re_match_data();confirm=false}" color="primary" />
|
|
<q-btn flat :label="$t('ok')" @click="()=>{trigger_dialog();confirm=false}" color="primary" />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
|
|
<q-dialog v-model="confirm_projectorlayout">
|
|
<q-card style="width: 40vw; max-width: 80vw;">
|
|
<q-card-section>
|
|
<div class="text-h6">{{ $t('Do you confirm the modification') }}</div>
|
|
</q-card-section>
|
|
<q-card-section class="q-pt-none">
|
|
{{ $t('Whether to change the projector layout to') + dialog_data_projectorlayout.parameter }}
|
|
</q-card-section>
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<q-btn flat :label="$t('Cancel')" @click="()=>{re_match_data();confirm_projectorlayout=false}" color="primary" />
|
|
<q-btn flat :label="$t('ok')" @click="()=>{trigger_dialog_projectorlayout();confirm_projectorlayout=false}" color="primary" />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.header_label {
|
|
width: 20%;
|
|
}
|
|
|
|
.w100 {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
defineComponent,
|
|
ref,
|
|
Ref,
|
|
watch,
|
|
computed,
|
|
onMounted,
|
|
onBeforeMount,
|
|
provide,
|
|
} 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";
|
|
import Debugging from "src/components/FusionSettings/Debugging.vue";
|
|
import { number } from "yargs";
|
|
|
|
export default defineComponent({
|
|
name: "ComponentFusionSettingsDialog",
|
|
components: {
|
|
ProjectorItem,
|
|
FusionLocale,
|
|
FourPointCalibration,
|
|
GridSettings,
|
|
SurfaceCorrection,
|
|
DensityCorrection,
|
|
Debugging
|
|
},
|
|
setup() {
|
|
let set = GlobalData.getInstance().getCurrentClient();
|
|
let $store = useStore();
|
|
let $q = useQuasar();
|
|
let $t = useI18n();
|
|
let show_dialog = ref(false);
|
|
const save_name = ref("")
|
|
const showDialog = async () => {
|
|
show_dialog.value = true;
|
|
};
|
|
/**
|
|
* 当前平板是否全屏
|
|
*/
|
|
const is_pad_screen = ref(false);
|
|
const is_pad_style = computed(() => {
|
|
let url = window.location.href
|
|
if (url.indexOf("pad") != -1 && $t.locale.value == "en-US") {
|
|
return ""
|
|
}
|
|
if (url.indexOf("pad") != -1 && is_pad_screen.value) {
|
|
return "100vw"
|
|
}
|
|
return "60vw"
|
|
})
|
|
const select_configuration = ref(false)
|
|
const del_dialog = ref(false)
|
|
const config_projectors = ref(null)
|
|
const select_configuration_name = ref("")
|
|
const send_disable_blending_params = () => {
|
|
set?.SetBlendingOption(disable_blending_params_id.value, disable_blending_params.value ? "1" : "0");
|
|
};
|
|
const now_resolution = ref(1)
|
|
// let allconfig = JSON.parse($store.state.fusion_configuration);
|
|
/**
|
|
* 模拟数据完成dom渲染再次获取真实后台数据
|
|
*/
|
|
let allconfig = JSON.parse("{\"resolution\": [{\"width\": 1920,\"height\": 1080}]}");
|
|
const options_resolution = computed(() => {
|
|
let tmp = [];
|
|
if (allconfig.resolution) {
|
|
for (let index = 0; index < allconfig.resolution.length; index++) {
|
|
tmp.push({
|
|
label: `${allconfig.resolution[index].width}*${allconfig.resolution[index].height}`,
|
|
value: index,
|
|
})
|
|
}
|
|
}
|
|
return tmp
|
|
})
|
|
const child: any = ref(null);
|
|
/**
|
|
* 开启网格时发送全部参数
|
|
*
|
|
*/
|
|
const send_show_blending_grids = () => {
|
|
let tmp = ""
|
|
switch (optionsstr.value) {
|
|
case 'FusionLocale':
|
|
tmp = '0'
|
|
break;
|
|
case 'FourPointCalibration':
|
|
tmp = '4'
|
|
break;
|
|
case 'SurfaceCorrection':
|
|
tmp = '9'
|
|
break;
|
|
case 'DensityCorrection':
|
|
if (child.value!.now_v_h == 'vertical') {
|
|
tmp = 'ver_density'
|
|
} else {
|
|
tmp = 'hor_density'
|
|
}
|
|
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
set?.SetBlendingOption("blending_grids_select_ui", tmp)
|
|
set?.SetBlendingOption('blending_grids_select_projector', now_selsect_projector.value);
|
|
set?.SetBlendingOption(show_blending_grids_id.value, show_blending_grids.value ? "1" : "0");
|
|
|
|
switch (optionsstr.value) {
|
|
case 'FusionLocale':
|
|
|
|
break;
|
|
case 'FourPointCalibration':
|
|
set?.SetBlendingOption("blending_grids_select_point", `4:${child.value!.options_model + 1}`)
|
|
break;
|
|
case 'SurfaceCorrection':
|
|
set?.SetBlendingOption("blending_grids_select_point", `9:${child.value!.options_model + 1}`)
|
|
set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_point_amount}`)
|
|
break;
|
|
case 'DensityCorrection':
|
|
if (child.value!.now_v_h == 'vertical') {
|
|
set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_v + 1}`)
|
|
set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_v_point_amount}`)
|
|
} else {
|
|
set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_h + 1}`)
|
|
set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_h_point_amount}`)
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
};
|
|
/**
|
|
* 重置全部参数
|
|
*/
|
|
const tmp_options = ref("")
|
|
const resetall = () => {
|
|
set?.ResetBlendingConfig().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);
|
|
});
|
|
if (options.value.length != 0) {
|
|
tmp_options.value = options.value
|
|
}
|
|
options.value = ""
|
|
$store.commit("setSelectedProjector", "0/0");
|
|
setTimeout(() => {
|
|
clear_sessionStorage()
|
|
options.value = tmp_options.value
|
|
}, 300);
|
|
}
|
|
/**
|
|
* 清除sessionStorage缓存
|
|
*/
|
|
const clear_sessionStorage = () => {
|
|
sessionStorage.removeItem("FusionLocale");
|
|
sessionStorage.removeItem("SurfaceCorrection");
|
|
sessionStorage.removeItem("DensityCorrection");
|
|
sessionStorage.removeItem("FourPointCalibration");
|
|
sessionStorage.removeItem("GridSettings");
|
|
sessionStorage.removeItem("Debugging");
|
|
sessionStorage.removeItem("FusionLocale_async");
|
|
}
|
|
|
|
const config = ref({ col: 0, row: 0 });
|
|
const EnableBlending = ref(false);
|
|
let optionsstr = ref();
|
|
optionsstr.value = "";
|
|
const disable_blending_params_id = ref("blending@disable_blending_params");
|
|
const disable_blending_params = ref(false);
|
|
const show_blending_grids_id = ref("blending_grids_show");
|
|
const show_blending_grids = ref(true);
|
|
const medium = ref(false);
|
|
const options = computed({
|
|
get() {
|
|
return optionsstr.value;
|
|
},
|
|
set(newValue) {
|
|
optionsstr.value = newValue;
|
|
},
|
|
});
|
|
/**
|
|
* 监听是否开启融合
|
|
*/
|
|
watch(
|
|
() => EnableBlending,
|
|
(newVal) => {
|
|
$store.commit("setEnablefusion", newVal.value);
|
|
set?.EnableBlending(newVal.value);
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
/**
|
|
* 设置分辨率
|
|
* @param index 索引号
|
|
*/
|
|
const set_resolution = (index: number) => {
|
|
$q.loading.show({
|
|
message: 'Loading please wait'
|
|
})
|
|
let w = allconfig.resolution[index].width
|
|
let h = allconfig.resolution[index].height
|
|
set?.SetProjectorResolution(w, h).then((res) => {
|
|
$store.commit("setfusion_configuration", res?.config);
|
|
})
|
|
let tmp = options.value
|
|
options.value = ""
|
|
$store.commit("setSelectedProjector", "0/0");
|
|
setTimeout(() => {
|
|
clear_sessionStorage()
|
|
options.value = tmp
|
|
$q.loading.hide()
|
|
}, 800);
|
|
getconfig()
|
|
}
|
|
/**
|
|
* 监听ui切换
|
|
*/
|
|
watch(() => optionsstr,
|
|
(newVal) => {
|
|
let tmp = ""
|
|
switch (newVal.value) {
|
|
case 'FusionLocale':
|
|
tmp = "blending"
|
|
set?.SetBlendingOption("blending_grids_select_ui", tmp)
|
|
break;
|
|
case 'FourPointCalibration':
|
|
tmp = '4'
|
|
set?.SetBlendingOption("blending_grids_select_ui", tmp)
|
|
set?.SetBlendingOption("blending_grids_control_point_count", `4`)
|
|
set?.SetBlendingOption("blending_grids_select_point", `4:1`)
|
|
break;
|
|
case 'SurfaceCorrection':
|
|
tmp = '9'
|
|
/**
|
|
* 延迟发送不然获取不到值
|
|
*/
|
|
set?.SetBlendingOption("blending_grids_select_ui", tmp)
|
|
setTimeout(() => {
|
|
set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_point_amount}`)
|
|
set?.SetBlendingOption("blending_grids_select_point", `${child.value!.value_point_amount}:1`)
|
|
}, 100);
|
|
|
|
break;
|
|
case 'DensityCorrection':
|
|
tmp = 'hor_density'
|
|
set?.SetBlendingOption("blending_grids_select_ui", tmp)
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
// if (tmp.length) set?.SetBlendingOption("blending_grids_select_ui", tmp)
|
|
},
|
|
{ deep: true })
|
|
|
|
|
|
|
|
const save = () => {
|
|
medium.value = true
|
|
save_cover_name.value = ''
|
|
//读取场景
|
|
get_scenes()
|
|
};
|
|
/**
|
|
* 读取服务器配置
|
|
*/
|
|
const getconfig = () => {
|
|
try {
|
|
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 = () => {
|
|
record_times.value = 0
|
|
// show_blending_grids.value = false;
|
|
is_pad_screen.value = false
|
|
send_show_blending_grids();
|
|
$store.commit("setSelectedProjector", "0/0");
|
|
set?.SetBlendingOption("blending_grids_show", "0");
|
|
setTimeout(() => {
|
|
clear_sessionStorage()
|
|
}, 500);
|
|
//getconfig()
|
|
if (config.value.col == 1 && config.value.row == 1) {
|
|
optionsstr.value = "FourPointCalibration"
|
|
} else {
|
|
optionsstr.value = "FourPointCalibration";
|
|
}
|
|
now_selsect_projector.value = "0-0"
|
|
};
|
|
|
|
/**
|
|
* 读取服务器场景
|
|
*/
|
|
const get_scenes = () => {
|
|
set?.EnumBlendingScene().then((res) => {
|
|
if (res == null || res.scenes.length == 0) return
|
|
plan_list.splice(0, plan_list.length);
|
|
for (let index = 0; index < res.scenes.length; index++) {
|
|
plan_list[index] = (res.scenes[index]);
|
|
}
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
set?.GetBlendingConfig("").then((res) => {
|
|
let tmp = JSON.parse(res ? res.config : "");
|
|
config_projectors.value = tmp
|
|
let local_options = [
|
|
[disable_blending_params_id, disable_blending_params],
|
|
[show_blending_grids_id, show_blending_grids]
|
|
];
|
|
let k: any;
|
|
for (k in local_options) {
|
|
let local_opt = local_options[k];
|
|
let opt = tmp.options[(<any>local_opt[0].value)];
|
|
if (opt) {
|
|
local_opt[1].value = ("0" == opt || "false" == opt.toLowerCase() ? false : true);
|
|
}
|
|
}
|
|
show_blending_grids.value = true
|
|
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);
|
|
optionsstr.value = "FourPointCalibration";
|
|
allconfig = JSON.parse($store.state.fusion_configuration);
|
|
if (allconfig.resolution) {
|
|
for (let index = 0; index < allconfig.resolution.length; index++) {
|
|
if (allconfig.resolution[index].width == allconfig.projector_width && allconfig.resolution[index].height == allconfig.projector_height) {
|
|
now_resolution.value = index
|
|
|
|
}
|
|
}
|
|
} else {
|
|
allconfig = { resolution: [{ width: tmp.projector_width, height: tmp.projector_height }] };
|
|
now_resolution.value = 0
|
|
}
|
|
|
|
projectorlayout.value = []
|
|
let cont = 0
|
|
for (let index = 1; index <= tmp.max_projector_count; index++) {
|
|
for (let indexx = 1; indexx <= tmp.max_projector_count; indexx++) {
|
|
if (index * indexx > tmp.max_projector_count) {
|
|
continue
|
|
} else {
|
|
projectorlayout.value.push({ label: `${index}x${indexx}`, value: cont })
|
|
cont++
|
|
projectorlayout_tmp.value.push(`${index}x${indexx}`)
|
|
}
|
|
}
|
|
}
|
|
|
|
for (let index = 0; index < projectorlayout.value.length; index++) {
|
|
let arr = projectorlayout.value[index].label.split('x');
|
|
if (tmp.col == Number(arr[1]) && tmp.row == Number(arr[0])) {
|
|
now_select_projectorlayout.value = index
|
|
}
|
|
if(`${tmp.row}x${tmp.col}`==projectorlayout_tmp.value[index]){
|
|
now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
|
|
}
|
|
}
|
|
});
|
|
get_scenes()
|
|
set?.SetBlendingOption("blending_grids_select_ui", "blending")
|
|
// show_blending_grids.value=true
|
|
// send_show_blending_grids()
|
|
}, 1000);
|
|
// console.log("已经挂载 ")
|
|
});
|
|
|
|
const save_cover_name = ref("")
|
|
const plan_list = [
|
|
''
|
|
]
|
|
const apply_the_selected_configuration = () => {
|
|
$q.loading.show({
|
|
message: 'Loading please wait'
|
|
})
|
|
set?.ApplyBlendingScene(select_configuration_name.value).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);
|
|
allconfig = tmp
|
|
for (let index = 0; index < options_resolution.value.length; index++) {
|
|
let arr = options_resolution.value[index].label.split('*');
|
|
if (tmp.projector_width == Number(arr[1]) && tmp.projector_height == Number(arr[0])) {
|
|
now_resolution.value = index
|
|
}
|
|
}
|
|
for (let index = 0; index < projectorlayout.value.length; index++) {
|
|
let arr = projectorlayout.value[index].label.split('x');
|
|
if (tmp.row == Number(arr[1]) && tmp.col == Number(arr[0])) {
|
|
now_select_projectorlayout.value = index
|
|
}
|
|
if(`${tmp.row}x${tmp.col}`==projectorlayout_tmp.value[index]){
|
|
now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
|
|
}
|
|
}
|
|
select_configuration.value=false
|
|
});
|
|
|
|
let tmp = options.value
|
|
options.value = ""
|
|
$store.commit("setSelectedProjector", "0/0");
|
|
setTimeout(() => {
|
|
clear_sessionStorage()
|
|
options.value = tmp
|
|
$q.loading.hide()
|
|
}, 800);
|
|
getconfig()
|
|
}
|
|
const plan_list_op = ref(plan_list)
|
|
const filterFn = (val: any, update: any) => {
|
|
update(() => {
|
|
const needle = val.toLocaleLowerCase()
|
|
plan_list_op.value = plan_list.filter(v => v.toLocaleLowerCase().indexOf(needle) > -1)
|
|
})
|
|
}
|
|
const record_times = ref(0)
|
|
const setModel = (val: string) => {
|
|
save_cover_name.value = val
|
|
}
|
|
|
|
const saveconfig = () => {
|
|
set?.SaveBlendingConfig(save_cover_name.value);
|
|
medium.value = false
|
|
}
|
|
|
|
const isdebug = computed(() => {
|
|
try {
|
|
return record_times.value > 2
|
|
} catch (error) {
|
|
|
|
}
|
|
|
|
})
|
|
const name_to_be_deleted = ref("");
|
|
const del_scenes = (name: string) => {
|
|
del_dialog.value = true;
|
|
name_to_be_deleted.value = name;
|
|
}
|
|
const dialog_del_scenes = () => {
|
|
set?.DeleteBlendingScene(name_to_be_deleted.value);
|
|
plan_list.splice(plan_list.findIndex(item => item === name_to_be_deleted.value), 1)
|
|
name_to_be_deleted.value = ''
|
|
select_configuration_name.value = ''
|
|
save_cover_name.value = ''
|
|
}
|
|
const now_selsect_projector = ref("0-0")
|
|
const currently_selected_projector = (value: string) => {
|
|
set?.SetBlendingOption('blending_grids_select_projector', value);
|
|
now_selsect_projector.value = value
|
|
|
|
}
|
|
/**
|
|
* 依赖注入
|
|
*/
|
|
provide("now_selsect_projector", now_selsect_projector);
|
|
let projectorlayout = ref([{ label: '1x1', value: 0 }, { label: '1x2', value: 1 }])
|
|
let projectorlayout_tmp = ref(<string[]>[])
|
|
const now_select_projectorlayout = ref(0)
|
|
const now_select_projectorlayout_tmp = ref("")
|
|
const send_projectorlayout = (val: number) => {
|
|
let arr = projectorlayout.value[val].label.split('x');
|
|
set?.SetProjectorLayout(Number(arr[0]), Number(arr[1])).then(res => {
|
|
let tmpp = JSON.parse(res!.config)
|
|
config.value.row = tmpp.row;
|
|
config.value.col = tmpp.col;
|
|
$q.loading.show({
|
|
message: 'Loading please wait'
|
|
})
|
|
$store.commit("setfusion_configuration", res?.config);
|
|
for (let index = 0; index < projectorlayout.value.length; index++) {
|
|
let arr = projectorlayout.value[index].label.split('x');
|
|
if (tmpp.col == Number(arr[1]) && tmpp.row == Number(arr[0])) {
|
|
now_select_projectorlayout.value = index
|
|
}
|
|
if(`${tmpp.row}x${tmpp.col}`==projectorlayout_tmp.value[index]){
|
|
now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
|
|
}
|
|
}
|
|
let tmp = options.value
|
|
options.value = ""
|
|
$store.commit("setSelectedProjector", "0/0");
|
|
setTimeout(() => {
|
|
clear_sessionStorage()
|
|
options.value = tmp
|
|
$q.loading.hide()
|
|
}, 800);
|
|
getconfig()
|
|
})
|
|
}
|
|
|
|
const send_projectorlayout2 = (val: string) => {
|
|
let arr = val.split('x');
|
|
set?.SetProjectorLayout(Number(arr[0]), Number(arr[1])).then(res => {
|
|
let tmpp = JSON.parse(res!.config)
|
|
config.value.row = tmpp.row;
|
|
config.value.col = tmpp.col;
|
|
$q.loading.show({
|
|
message: 'Loading please wait'
|
|
})
|
|
$store.commit("setfusion_configuration", res?.config);
|
|
for (let index = 0; index < projectorlayout.value.length; index++) {
|
|
let arr = projectorlayout.value[index].label.split('x');
|
|
if (tmpp.col == Number(arr[1]) && tmpp.row == Number(arr[0])) {
|
|
now_select_projectorlayout.value = index
|
|
}
|
|
if(`${tmpp.row}x${tmpp.col}`==projectorlayout_tmp.value[index]){
|
|
now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
|
|
}
|
|
}
|
|
let tmp = options.value
|
|
options.value = ""
|
|
$store.commit("setSelectedProjector", "0/0");
|
|
setTimeout(() => {
|
|
clear_sessionStorage()
|
|
options.value = tmp
|
|
$q.loading.hide()
|
|
}, 800);
|
|
getconfig()
|
|
})
|
|
}
|
|
|
|
const btn_options = computed(() => {
|
|
let tmp = []
|
|
tmp.push({ label: $t.t('FourPointCalibration'), value: 'FourPointCalibration' })
|
|
tmp.push({ label: $t.t('SurfaceCorrection'), value: 'SurfaceCorrection', })
|
|
if (now_select_projectorlayout.value != 0) {
|
|
tmp.push({ label: $t.t('FusionLocale'), value: 'FusionLocale' })
|
|
} else {
|
|
optionsstr.value = "FourPointCalibration";
|
|
}
|
|
tmp.push({ label: $t.t('DensityCorrection'), value: 'DensityCorrection', })
|
|
tmp.push({ label: $t.t('GridSettings'), value: 'GridSettings' })
|
|
return tmp
|
|
})
|
|
/**
|
|
* 计算可以显示的投影机数量
|
|
*/
|
|
const projectors_that_can_display = computed(() => {
|
|
let allconfig = JSON.parse($store.state.fusion_configuration);
|
|
let col = allconfig.projectors.length
|
|
return { col }
|
|
})
|
|
/**
|
|
* 弹窗
|
|
* 浅拷贝
|
|
*/
|
|
const confirm = ref(false)
|
|
let dialog_data: any = { parameter: "", fun: "", type: "" }
|
|
const dialog = (parameter: any, fun: any, type: string) => {
|
|
confirm.value = true
|
|
dialog_data.parameter = parameter
|
|
dialog_data.fun = fun
|
|
dialog_data.type = type
|
|
}
|
|
const trigger_dialog = () => {
|
|
dialog_data.fun(dialog_data.parameter)
|
|
}
|
|
|
|
|
|
|
|
|
|
const confirm_projectorlayout=ref(false);
|
|
let dialog_data_projectorlayout: any = { parameter: "", fun: ""}
|
|
const dialog_projectorlayout = (parameter: any, fun: any) => {
|
|
confirm_projectorlayout.value = true
|
|
dialog_data_projectorlayout.parameter = parameter
|
|
dialog_data_projectorlayout.fun = fun
|
|
}
|
|
const trigger_dialog_projectorlayout = () => {
|
|
dialog_data_projectorlayout.fun(dialog_data_projectorlayout.parameter)
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const re_match_data = () => {
|
|
let tmp = JSON.parse($store.state.fusion_configuration);
|
|
for (let index = 0; index < options_resolution.value.length; index++) {
|
|
let arr = options_resolution.value[index].label.split('*');
|
|
if (tmp.projector_width == Number(arr[0]) && tmp.projector_height == Number(arr[1])) {
|
|
now_resolution.value = index
|
|
}
|
|
}
|
|
for (let index = 0; index < projectorlayout.value.length; index++) {
|
|
let arr = projectorlayout.value[index].label.split('x');
|
|
|
|
if (tmp.row == Number(arr[0]) && tmp.col == Number(arr[1])) {
|
|
now_select_projectorlayout.value = index
|
|
}
|
|
if(`${tmp.row}x${tmp.col}`==projectorlayout_tmp.value[index]){
|
|
now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
|
|
}
|
|
}
|
|
}
|
|
const element: any = ref()
|
|
const element_full_screen = () => {
|
|
let elem = document.getElementById("element")
|
|
if (!document.fullscreenElement) {
|
|
elem!.requestFullscreen().catch((err) => {
|
|
|
|
});
|
|
is_pad_screen.value = true
|
|
} else {
|
|
document.exitFullscreen();
|
|
is_pad_screen.value = false
|
|
}
|
|
|
|
}
|
|
const ispad = computed(() => {
|
|
let url = window.location.href;
|
|
return url.indexOf("pad") != -1
|
|
})
|
|
interface projectorlayoutarray {
|
|
label: string; value: number;
|
|
}
|
|
const show_projectorlayout = ref(<projectorlayoutarray[]>[])
|
|
const filterFn_projector = (val: any, update: any) => {
|
|
update(() => {
|
|
const needle = val.toLowerCase()
|
|
show_projectorlayout.value = projectorlayout.value.filter(v => v.label.toLowerCase().indexOf(needle) > -1)
|
|
})
|
|
}
|
|
|
|
const show_projectorlayout2 = ref(<string[]>[])
|
|
const filterFn_projector2 = (val: any, update: any) => {
|
|
update(() => {
|
|
const needle = val.toLowerCase()
|
|
show_projectorlayout2.value = projectorlayout_tmp.value.filter(v => v.toLowerCase().indexOf(needle) > -1)
|
|
})
|
|
}
|
|
|
|
|
|
return {
|
|
now_select_projectorlayout_tmp,
|
|
show_projectorlayout2,
|
|
filterFn_projector2,
|
|
is_pad_screen,
|
|
dialog_data,
|
|
allconfig,
|
|
now_selsect_projector,
|
|
re_match_data,
|
|
trigger_dialog,
|
|
confirm,
|
|
dialog,
|
|
currently_selected_projector,
|
|
name_to_be_deleted,
|
|
dialog_del_scenes,
|
|
get_scenes,
|
|
del_scenes,
|
|
filterFn,
|
|
setModel,
|
|
send_disable_blending_params,
|
|
disable_blending_params,
|
|
send_show_blending_grids,
|
|
show_blending_grids,
|
|
clear,
|
|
show_dialog,
|
|
options,
|
|
copyToClipboard,
|
|
showDialog,
|
|
EnableBlending,
|
|
config,
|
|
save,
|
|
resetall,
|
|
medium,
|
|
save_name,
|
|
save_cover_name,
|
|
plan_list,
|
|
select_configuration,
|
|
select_configuration_name,
|
|
apply_the_selected_configuration,
|
|
plan_list_op,
|
|
record_times,
|
|
saveconfig,
|
|
isdebug,
|
|
del_dialog,
|
|
child,
|
|
options_resolution,
|
|
now_resolution,
|
|
set_resolution,
|
|
send_projectorlayout,
|
|
send_projectorlayout2,
|
|
now_select_projectorlayout,
|
|
projectorlayout,
|
|
btn_options,
|
|
projectors_that_can_display,
|
|
is_pad_style,
|
|
element,
|
|
element_full_screen,
|
|
ispad,
|
|
filterFn_projector,
|
|
show_projectorlayout,
|
|
confirm_projectorlayout,
|
|
dialog_data_projectorlayout,
|
|
dialog_projectorlayout,
|
|
trigger_dialog_projectorlayout
|
|
};
|
|
},
|
|
});
|
|
</script>
|