diff --git a/package.json b/package.json index 4ee6320..a725a2a 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,10 @@ "update": "^0.7.4", "v-viewer": "^3.0.9", "vue": "^3.0.0", + "vue-drag-resize": "^1.5.4", "vue-i18n": "^9.1.9", "vue-router": "^4.0.0", + "vue3-draggable-resizable": "^1.6.5", "vuex": "^4.0.1", "zrender": "^5.3.1" }, diff --git a/src/components/FusionSettings/DensityCorrection.vue b/src/components/FusionSettings/DensityCorrection.vue index 9b0cf29..61e2d13 100644 --- a/src/components/FusionSettings/DensityCorrection.vue +++ b/src/components/FusionSettings/DensityCorrection.vue @@ -4,98 +4,47 @@
-

V1

-
-

V2

-
-

V3

-
-

V4

-
-

V5

-
- H1 - - H2 - - H3 - - H4 - - H5 - + + v{{ + index+ 1 + }} + + + v{{ + index+ 1 + }} + + + h{{ + index+ 1 + }} + + + h{{ + index+ 1 + }} +
-
+
- - -
-
-
-
-
-
-
- - -
-
-
-
-
-
-
- - -
-
-
-
-
-
-
- - -
-
-
-
-
-
-
- - + +
@@ -104,70 +53,66 @@
-
- - +
+ +
- -
- - -
- -
- - -
- -
- - -
- -
- - -
-
- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
@@ -187,15 +132,22 @@ import { useStore } from "src/store"; import { useI18n } from "vue-i18n"; import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue"; import GlobalData from "src/common/GlobalData"; +import Vue3DraggableResizable from 'vue3-draggable-resizable' +import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css' +import { type } from "os"; +import { number } from "@intlify/core-base"; export default defineComponent({ name: "ComponentDensityCorrection", components: { vue3ResizeDrag, + Vue3DraggableResizable }, setup() { let $store = useStore(); let $t = useI18n(); const now_index = ref(0); + const max_x_y = reactive([0, 0]); + const now_adjust = ref("v") const value = reactive([ { x: 0, y: 0, number: 0 }, { x: 0, y: 0, number: 0 }, @@ -208,32 +160,13 @@ export default defineComponent({ { x: 0, y: 0, number: 0 }, { x: 0, y: 0, number: 0 }, ]); + //为动态添加做准备 + const value_h = reactive([]); + const value_v = reactive([]); + const default_location_v = reactive([]); + const default_location_h = reactive([]); let model = ref(null); const div = ref(); - const isshowarray = ref([ - true, - true, - true, - true, - true, - true, - true, - true, - true, - true, - ]); - const isactivearray = ref([ - true, - true, - true, - true, - true, - true, - true, - true, - true, - true, - ]); const default_location: any = reactive([ { x: 0, y: 0 }, { x: 0, y: 0 }, @@ -246,8 +179,6 @@ export default defineComponent({ { x: 0, y: 0 }, { x: 0, y: 0 }, ]); - const max_x_y=reactive([0,0]) - let options = ref(["10", "20", "30", "40", "50"]); let config = JSON.parse($store.state.fusion_configuration).projectors[0]; let Proportion = ref({ x: 0, y: 0 }); const configselsect = computed(() => { @@ -263,34 +194,38 @@ export default defineComponent({ }); const set_cache: any = ref([]); const ste_status = ref(0); - //为了加载 缓存的配置时 同步点的位置 - const syncpoint = () => { + + const chang = (index: number, $event: any) => { let x = 0 let y = 0 - for (let index = 0; index < 5; index++) { - x = default_location[index].x; - y = Math.ceil((config.height - value[index].y) / Proportion.value.y); - setdianposin(index, x, y); + if (index < 5) { + x = default_location[9].y; + y = Math.ceil((config.height - $event) / Proportion.value.y); + send_configuration(index, $event) + } else { + x = Math.ceil($event / Proportion.value.x); + y = default_location[0].x; + send_configuration(index, $event) } + point_postion[index].x = Number(x) + point_postion[index].y = Number(y) + now_index.value = index + } - for (let index = 5; index < 10; index++) { - x = Math.ceil(value[index].x / Proportion.value.x); - y = default_location[5].y; - setdianposin(index, x, y); + const asyncpoint = (index: number, $event: any) => { + let x = 0 + let y = 0 + if (index < 5) { + x = default_location[9].y; + y = Math.ceil((config.height - $event) / Proportion.value.y); + } else { + x = Math.ceil($event / Proportion.value.x); + y = default_location[0].x; } + point_postion[index].x = Number(x) + point_postion[index].y = Number(y) + } - for (let index = 0; index < value.length; index++) { - isactivearray.value[index] = false; - } - }; - - const use_set_cache = () => { - if (set_cache.value[selectedprojector.value] != null) { - let tmp = JSON.parse(set_cache.value[selectedprojector.value]); - deepcopy(value, tmp); - syncpoint(); - } - }; const deepcopy = (o1: any, o2: any) => { for (let k in o2) { if (typeof o2[k] === "object") { @@ -307,9 +242,9 @@ export default defineComponent({ onBeforeUnmount(() => { sessionStorage.DensityCorrection = JSON.stringify(set_cache.value); }); - watch(()=>now_index,(newval,oldval)=>{ - now_index.value>5?set?.SetBlendingOption("blending_grids_select_point",`density_h:${now_index.value-4}`):set?.SetBlendingOption("blending_grids_select_point",`density_v:${now_index.value+1}`) - },{ deep: true }) + watch(() => now_index, (newval, oldval) => { + now_index.value > 5 ? set?.SetBlendingOption("blending_grids_select_point", `density_h:${now_index.value - 4}`) : set?.SetBlendingOption("blending_grids_select_point", `density_v:${now_index.value + 1}`) + }, { deep: true }) watch( () => configselsect, (newVal, oldVal) => { @@ -331,19 +266,19 @@ export default defineComponent({ setTimeout(() => { ste_status.value = 0; }, 100); - syncpoint(); }, { deep: true } ); + const initialization = () => { ste_status.value = 1; for (let index = 0; index < config.hor_density.length; index++) { value[index].x = config.ver_density[index].x; value[index].y = config.ver_density[index].y; - value[index].number = config.ver_density[index].number; + value[index].number = config.ver_density[index].control_point; value[index + 5].x = config.hor_density[index].x; value[index + 5].y = config.hor_density[index].y; - value[index + 5].number = config.hor_density[index].number; + value[index + 5].number = config.hor_density[index].control_point; } if ( sessionStorage.DensityCorrection && @@ -353,12 +288,20 @@ export default defineComponent({ use_set_cache(); } else { } - syncpoint(); setTimeout(() => { ste_status.value = 0; }, 100); }; + const use_set_cache = () => { + if (set_cache.value[selectedprojector.value] != null) { + let tmp = JSON.parse(set_cache.value[selectedprojector.value]); + deepcopy(value, tmp); + } + for (let index = 0; index < 10; index++) { + asyncpoint(index, index < 5 ? value[index].y : value[index].x) + } + }; const resetall = () => { for ( let index = 0; @@ -392,10 +335,7 @@ export default defineComponent({ point_postion[index].y = default_location[index].y; point_postion[index].x = default_location[index].x; - isshowarray.value[index] = false; - setTimeout(() => { - isshowarray.value[index] = true; - }, 100); + save_set_cache() }; const point_postion: any = reactive([ { x: 0, y: 0 }, @@ -419,46 +359,6 @@ export default defineComponent({ }, 1000); }; - const moveHandler = ($event: any, index: number) => { - let x = 0; - let y = 0; - switch (index) { - case 0: - case 1: - case 2: - case 3: - case 4: - x = - config.width / 2 + - Math.ceil( - ($event.left - default_location[index].x) * Proportion.value.x - ); - y = - config.height - - (config.height / 4) * index - - Math.ceil( - ($event.top - default_location[index].y) * Proportion.value.y - ); - break; - case 5: - case 6: - case 7: - case 8: - case 9: - x = Math.ceil($event.left * Proportion.value.x); - y = - config.height / 2 - - Math.ceil( - ($event.top - default_location[index].y) * Proportion.value.y - ); - - break; - default: - } - value[index].x = x > config.width ? config.width : x && x < 0 ? 0 : x; - value[index].y = y > config.height ? config.height : y && y < 0 ? 0 : y; - save_set_cache(); - }; const use_server_config = () => { for (let index = 0; index < config.hor_density.length; index++) { @@ -469,29 +369,29 @@ export default defineComponent({ value[index + 5].y = config.hor_density[index].y; value[index + 5].number = config.hor_density[index].number; } + for (let index = 0; index < 10; index++) { + asyncpoint(index, index < 5 ? value[index].y : value[index].x) + + } }; onMounted(() => { initialization(); - max_x_y[0]=div.value.offsetWidth-25 - max_x_y[1]=div.value.offsetHeight-15 - Proportion.value.x = config.width / (div.value.offsetWidth - 40); - Proportion.value.y = config.height / (div.value.offsetHeight - 30); - let Width = (div.value.offsetWidth - 40) / 4; - let Height = (div.value.offsetHeight - 30) / 4; - for ( - let index = 0; - index < config.hor_density.length + config.ver_density.length; - index++ - ) { + Proportion.value.x = config.width / (div.value.offsetWidth - 20); + Proportion.value.y = config.height / (div.value.offsetHeight - 20); + let Width = (div.value.offsetWidth - 20) / 4; + let Height = (div.value.offsetHeight - 20) / 4; + + max_x_y[0] = div.value.offsetWidth - 20 + max_x_y[1] = div.value.offsetHeight - 20 + for (let index = 0; index < 10; index++) { if (index < 5) { point_postion[index].y = default_location[index].y = Height * index; - point_postion[index].x = default_location[index].x = Width * 2; + point_postion[index].x = default_location[index].x = 0; } else { - point_postion[index].y = default_location[index].y = Height * 2; - point_postion[index].x = default_location[index].x = - Width * (index - 5); + point_postion[index].y = default_location[index].y = 0; + point_postion[index].x = default_location[index].x = Width * (index - 5); } } use_server_config(); @@ -503,7 +403,9 @@ export default defineComponent({ use_set_cache(); } else { } - syncpoint(); + + + }); //窗口变动重新渲染 @@ -512,229 +414,106 @@ export default defineComponent({ return (() => { if (div != null) { initialization(); - Proportion.value.x = config.width / (div.value.offsetWidth - 40); + Proportion.value.x = config.width / (div.value.offsetWidth - 20); Proportion.value.y = config.height / (div.value.offsetHeight - 30); - let Width = (div.value.offsetWidth - 40) / 4; - let Height = (div.value.offsetHeight - 30) / 4; - for ( - let index = 0; - index < config.hor_density.length + config.ver_density.length; - index++ - ) { + let Width = (div.value.offsetWidth - 20) / 4; + let Height = (div.value.offsetHeight - 20) / 4; + + max_x_y[0] = div.value.offsetWidth - 20 + max_x_y[1] = div.value.offsetHeight - 20 + for (let index = 0; index < 10; index++) { if (index < 5) { - point_postion[index].y = default_location[index].y = - Height * index; - point_postion[index].x = default_location[index].x = Width * 2; + point_postion[index].y = default_location[index].y = Height * index; + point_postion[index].x = default_location[index].x = 0; } else { - point_postion[index].y = default_location[index].y = Height * 2; - point_postion[index].x = default_location[index].x = - Width * (index - 5); + point_postion[index].y = default_location[index].y = 0; + point_postion[index].x = default_location[index].x = Width * (index - 5); } } } })(); }; }); - - const setdianposin = (index: number, x: number, y: number) => { - point_postion[index].x = x; - point_postion[index].y = y; - isshowarray.value[index] = false; - isactivearray.value[index] = false; - setTimeout(() => { - isshowarray.value[index] = true; - }, 100); - if(ste_status.value == 0)now_index.value=index - }; - watch( - () => value[0], - (newVal, oldVal) => { - send_configuration(1, newVal.y, newVal.number); - if (!isactivearray.value[0]) { - let x = default_location[0].x; - let y = Math.ceil((config.height - newVal.y) / Proportion.value.y); - setdianposin(0, x, y); - } - now_index.value=0 - save_set_cache(); - }, - { deep: true } - ); - - watch( - () => value[1], - (newVal, oldVal) => { - send_configuration(2, newVal.y, newVal.number); - if (!isactivearray.value[1]) { - let x = default_location[1].x; - let y = Math.ceil((config.height - newVal.y) / Proportion.value.y); - setdianposin(1, x, y); - } - save_set_cache(); - }, - { deep: true } - ); - - watch( - () => value[2], - (newVal, oldVal) => { - send_configuration(3, newVal.y, newVal.number); - if (!isactivearray.value[2]) { - let x = Math.ceil(newVal.x / Proportion.value.x); - let y = Math.ceil((config.height - newVal.y) / Proportion.value.y); - setdianposin(2, x, y); - } - save_set_cache(); - }, - { deep: true } - ); - - watch( - () => value[3], - (newVal, oldVal) => { - send_configuration(4, newVal.y, newVal.number); - if (!isactivearray.value[3]) { - let x = default_location[3].x; - let y = Math.ceil((config.height - newVal.y) / Proportion.value.y); - setdianposin(3, x, y); - } - save_set_cache(); - }, - { deep: true } - ); - - watch( - () => value[4], - (newVal, oldVal) => { - send_configuration(5, newVal.y, newVal.number); - if (!isactivearray.value[4]) { - let x = default_location[4].x; - let y = Math.ceil((config.height - newVal.y) / Proportion.value.y); - setdianposin(4, x, y); - } - save_set_cache(); - }, - { deep: true } - ); - - - watch( - () => value[5], - (newVal, oldVal) => { - send_configuration(6, newVal.x, newVal.number); - if (!isactivearray.value[5]) { - let x = Math.ceil(newVal.x / Proportion.value.x); - let y = default_location[5].y; - setdianposin(5, x, y); - } - save_set_cache(); - }, - { deep: true } - ); - - watch( - () => value[6], - (newVal, oldVal) => { - send_configuration(7, newVal.x, newVal.number); - if (!isactivearray.value[6]) { - let x = Math.ceil(newVal.x / Proportion.value.x); - let y = default_location[6].y; - setdianposin(6, x, y); - } - save_set_cache(); - }, - { deep: true } - ); - - watch( - () => value[7], - (newVal, oldVal) => { - send_configuration(8, newVal.x, newVal.number); - if (!isactivearray.value[7]) { - let x = Math.ceil(newVal.x / Proportion.value.x); - let y = default_location[7].y; - setdianposin(7, x, y); - } - save_set_cache(); - }, - { deep: true } - ); - - watch( - () => value[8], - (newVal, oldVal) => { - send_configuration(9, newVal.x, newVal.number); - if (!isactivearray.value[8]) { - let x = Math.ceil(newVal.x / Proportion.value.x); - let y = default_location[8].y; - setdianposin(8, x, y); - } - save_set_cache(); - }, - { deep: true } - ); - - watch( - () => value[9], - (newVal, oldVal) => { - send_configuration(10, newVal.x, newVal.number); - if (!isactivearray.value[9]) { - let x = Math.ceil(newVal.x / Proportion.value.x); - let y = default_location[9].y; - setdianposin(9, x, y); - } - save_set_cache(); - }, - { deep: true } - ); - const send_configuration = ( index: number, value: number, - number: number ) => { if (ste_status.value == 0) { if (index <= 5) { set?.SetBlendingVerDensity( $store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], - index, + index + 1, Number(value) ); } else { set?.SetBlendingHorDensity( $store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], - index - 5, + index - 4, Number(value) ); } } save_set_cache(); }; - const activeMouseDown = (index: number) => { - isactivearray.value[index] = true; - // if(index>=5){ - // set?.SetBlendingOption("blending_grids_select_point",`density_h:${index-4}`) - // }else{ - // set?.SetBlendingOption("blending_grids_select_point",`density_v:${index+1}`) - // } - now_index.value=index - }; initialization(); + const dragStartHandle = ($event: any, index: number, type: string) => { + let obj_x = $event.x + let obj_y = $event.y + if (type == 'h') { + let x = + config.width / 4 * (index - 5) + + Math.ceil( + (obj_x - default_location[index].x) * Proportion.value.x + ); + let y = + config.height - + (config.height / 4) * index - + Math.ceil( + (obj_y - default_location[index].y) * Proportion.value.y + ); + value[index].x = x > config.width ? config.width : x && x < 0 ? 0 : x; + send_configuration(index, x) + } + if (type == 'v') { + let x = Math.ceil(obj_x * Proportion.value.x); + let y = + config.height - + (config.height / 4) * index - + Math.ceil( + (obj_y - default_location[index].y) * Proportion.value.y + ); + value[index].y = y > config.height ? config.height : y && y < 0 ? 0 : y; + send_configuration(index, y) + } + } + const options_v: any = reactive([]); + const options_h: any = reactive([]); + const options_model_v = ref(0) + const options_model_h = ref(5) + for (let index = 0; index < 5; index++) { + options_v.push({ "label": `v${index + 1}`, value: index }) + options_h.push({ "label": `h${index + 1}`, value: index + 5 }) + } return { + options_model_v, + options_model_h, + options_v, + options_h, + config, + now_adjust, + set_cache, + chang, + max_x_y, + dragStartHandle, now_index, - activeMouseDown, model, - options, value, reset, resetall, point_postion, - moveHandler, div, - isshowarray, - isactivearray, save, }; }, diff --git a/src/components/FusionSettings/GridSettings.vue b/src/components/FusionSettings/GridSettings.vue index 1830bc4..9c7313b 100644 --- a/src/components/FusionSettings/GridSettings.vue +++ b/src/components/FusionSettings/GridSettings.vue @@ -166,10 +166,10 @@ export default defineComponent({ } const use_server_config = () => { let server_conf = JSON.parse($store.state.fusion_configuration).options - model[0] = server_conf.blending_grids_row!=null ? Number(server_conf.blending_grids_row) : 20; - model[1] = server_conf.blending_grids_column!=null ? Number(server_conf.blending_grids_column) : 40; - color[0] = server_conf.blending_grids_line_color - color[1] = server_conf.blending_grids_background_color + model[0] = server_conf.blending_grids_row ?? 20; + model[1] = server_conf.blending_grids_column ?? 40; + color[0] = server_conf.blending_grids_line_color ?? "#ffffff" + color[1] = server_conf.blending_grids_background_color ?? "#00ff5e" RowsColumns[0] = server_conf.blending_grids_show_row === "false" ? false : true RowsColumns[1] = server_conf.blending_grids_show_column === "false" ? false : true diff --git a/src/components/FusionSettingsDialog.vue b/src/components/FusionSettingsDialog.vue index a98329b..a5461ed 100644 --- a/src/components/FusionSettingsDialog.vue +++ b/src/components/FusionSettingsDialog.vue @@ -234,6 +234,25 @@ export default defineComponent({ set?.SetBlendingOption(disable_blending_params_id.value, disable_blending_params.value ? "1" : "0"); }; 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': + tmp = '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"); }; const resetall = () => { @@ -310,6 +329,9 @@ export default defineComponent({ set?.SetBlendingOption("blending_grids_select_ui", tmp) }, { deep: true }) + + + const save = () => { medium.value = true //读取场景 @@ -431,8 +453,10 @@ export default defineComponent({ set?.DeleteBlendingScene(name_to_be_deleted.value); plan_list.splice(plan_list.findIndex(item => item === name_to_be_deleted.value), 1) } + 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 } return { currently_selected_projector, diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts index 7fdfb92..f118879 100644 --- a/src/i18n/en-US/index.ts +++ b/src/i18n/en-US/index.ts @@ -447,5 +447,7 @@ export default { "show_mask":"hide desktop", "save_bmp":"save bmp", "disable_blending_params":"disable blending params", - "Please enter a value within the range":"Please enter a value within the range" + "Please enter a value within the range":"Please enter a value within the range", + "vertical correction":"vertical correction", + "horizontal correction":"horizontal correction" }; diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts index 88d1ad7..585cefc 100644 --- a/src/i18n/zh-CN/index.ts +++ b/src/i18n/zh-CN/index.ts @@ -716,5 +716,7 @@ export default { "show_mask":"隐藏桌面", "save_bmp":"保存BMP", "disable_blending_params":"禁用融合参数", - "Please enter a value within the range":"请输入范围内的值" + "Please enter a value within the range":"请输入范围内的值", + "vertical correction":"垂直校正", + "horizontal correction":"水平校正" };