lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化ui界面

This commit is contained in:
shefengchun 2023-02-06 10:49:55 +08:00
parent 93c3a89a6d
commit 7141313c8c
6 changed files with 100 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/FusionSettings/DensityCorrection.vue
View File

@ -4,43 +4,43 @@
<div class="col-8 q-pt-md"> <div class="col-8 q-pt-md">
<div ref="div" style="width: 100%; background-color: #646464; height: 100%"> <div ref="div" style="width: 100%; background-color: #646464; height: 100%">
<div style="position: absolute"> <div style="position: absolute">
<vue3ResizeDrag :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="30" :h="30" :x="point_postion[0].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==0?'action':'']" :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="30" :h="30" :x="point_postion[0].x"
:y="point_postion[0].y" @mousedown="activeMouseDown(0)" :isResizable="false" :y="point_postion[0].y" @mousedown="activeMouseDown(0)" :isResizable="false"
@moveHandler="moveHandler($event, 0)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V1</p><p class=" vcolro p0">↓</p> @moveHandler="moveHandler($event, 0)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V1</p><p class=" vcolro p0">↓</p>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="30" :h="30" :x="point_postion[1].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==1?'action':'']" :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="30" :h="30" :x="point_postion[1].x"
:y="point_postion[1].y" @mousedown="activeMouseDown(1)" :isResizable="false" :y="point_postion[1].y" @mousedown="activeMouseDown(1)" :isResizable="false"
@moveHandler="moveHandler($event, 1)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V2</p><p class="p0 vcolro">↓</p> @moveHandler="moveHandler($event, 1)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V2</p><p class="p0 vcolro">↓</p>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="30" :h="30" :x="point_postion[2].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==2?'action':'']" :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="30" :h="30" :x="point_postion[2].x"
:y="point_postion[2].y" @mousedown="activeMouseDown(2)" :isResizable="false" :y="point_postion[2].y" @mousedown="activeMouseDown(2)" :isResizable="false"
@moveHandler="moveHandler($event, 2)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V3</p><p class="p0 vcolro">↓</p> @moveHandler="moveHandler($event, 2)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V3</p><p class="p0 vcolro">↓</p>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="30" :h="30" :x="point_postion[3].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==3?'action':'']" :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="30" :h="30" :x="point_postion[3].x"
:y="point_postion[3].y" @mousedown="activeMouseDown(3)" :isResizable="false" :y="point_postion[3].y" @mousedown="activeMouseDown(3)" :isResizable="false"
@moveHandler="moveHandler($event, 3)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V4</p><p class="p0 vcolro">↓</p> @moveHandler="moveHandler($event, 3)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V4</p><p class="p0 vcolro">↓</p>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="30" :h="30" :x="point_postion[4].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==4?'action':'']" :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="30" :h="30" :x="point_postion[4].x"
:y="point_postion[4].y" @mousedown="activeMouseDown(4)" :isResizable="false" :y="point_postion[4].y" @mousedown="activeMouseDown(4)" :isResizable="false"
@moveHandler="moveHandler($event, 4)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V5</p><p class="p0 vcolro">↓</p> @moveHandler="moveHandler($event, 4)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V5</p><p class="p0 vcolro">↓</p>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="40" :h="20" :x="point_postion[5].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==5?'action':'']" :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="40" :h="20" :x="point_postion[5].x"
:y="point_postion[5].y" @mousedown="activeMouseDown(5)" :isResizable="false" :y="point_postion[5].y" @mousedown="activeMouseDown(5)" :isResizable="false"
@moveHandler="moveHandler($event, 5)"><span class="hcolro">←H1→</span> @moveHandler="moveHandler($event, 5)"><span class="hcolro">←H1→</span>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="40" :h="20" :x="point_postion[6].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==6?'action':'']" :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="40" :h="20" :x="point_postion[6].x"
:y="point_postion[6].y" @mousedown="activeMouseDown(6)" :isResizable="false" :y="point_postion[6].y" @mousedown="activeMouseDown(6)" :isResizable="false"
@moveHandler="moveHandler($event, 6)"><span class="hcolro">←H2→</span> @moveHandler="moveHandler($event, 6)"><span class="hcolro">←H2→</span>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[7]" v-if="isshowarray[7]" :w="40" :h="20" :x="point_postion[7].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==7?'action':'']" :isActive="isactivearray[7]" v-if="isshowarray[7]" :w="40" :h="20" :x="point_postion[7].x"
:y="point_postion[7].y" @mousedown="activeMouseDown(7)" :isResizable="false" :y="point_postion[7].y" @mousedown="activeMouseDown(7)" :isResizable="false"
@moveHandler="moveHandler($event, 7)"><span class="hcolro">←H3→</span> @moveHandler="moveHandler($event, 7)"><span class="hcolro">←H3→</span>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="40" :h="20" :x="point_postion[8].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==8?'action':'']" :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="40" :h="20" :x="point_postion[8].x"
:y="point_postion[8].y" @mousedown="activeMouseDown(8)" :isResizable="false" :y="point_postion[8].y" @mousedown="activeMouseDown(8)" :isResizable="false"
@moveHandler="moveHandler($event, 8)"><span class="hcolro">←H4→</span> @moveHandler="moveHandler($event, 8)"><span class="hcolro">←H4→</span>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[9]" v-if="isshowarray[9]" :w="40" :h="20" :x="point_postion[9].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==9?'action':'']" :isActive="isactivearray[9]" v-if="isshowarray[9]" :w="40" :h="20" :x="point_postion[9].x"
:y="point_postion[9].y" @mousedown="activeMouseDown(9)" :isResizable="false" :y="point_postion[9].y" @mousedown="activeMouseDown(9)" :isResizable="false"
@moveHandler="moveHandler($event, 9)"><span class="hcolro">←H5→</span> @moveHandler="moveHandler($event, 9)"><span class="hcolro">←H5→</span>
</vue3ResizeDrag> </vue3ResizeDrag>
@ -168,6 +168,9 @@
padding: 0; padding: 0;
line-height: 8px; line-height: 8px;
} }
.action{
background-color: aqua;
}
</style> </style>
<script lang="ts"> <script lang="ts">
import { import {
@ -193,6 +196,7 @@ export default defineComponent({
setup() { setup() {
let $store = useStore(); let $store = useStore();
let $t = useI18n(); let $t = useI18n();
const now_index = ref(0);
const value = reactive([ const value = reactive([
{ x: 0, y: 0, number: 0 }, { x: 0, y: 0, number: 0 },
{ x: 0, y: 0, number: 0 }, { x: 0, y: 0, number: 0 },
@ -303,6 +307,9 @@ export default defineComponent({
onBeforeUnmount(() => { onBeforeUnmount(() => {
sessionStorage.DensityCorrection = JSON.stringify(set_cache.value); 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( watch(
() => configselsect, () => configselsect,
(newVal, oldVal) => { (newVal, oldVal) => {
@ -527,6 +534,7 @@ export default defineComponent({
setTimeout(() => { setTimeout(() => {
isshowarray.value[index] = true; isshowarray.value[index] = true;
}, 100); }, 100);
now_index.value=index
}; };
watch( watch(
() => value[0], () => value[0],
@ -537,6 +545,7 @@ export default defineComponent({
let y = Math.ceil((config.height - newVal.y) / Proportion.value.y); let y = Math.ceil((config.height - newVal.y) / Proportion.value.y);
setdianposin(0, x, y); setdianposin(0, x, y);
} }
now_index.value=0
save_set_cache(); save_set_cache();
}, },
{ deep: true } { deep: true }
@ -695,14 +704,16 @@ export default defineComponent({
}; };
const activeMouseDown = (index: number) => { const activeMouseDown = (index: number) => {
isactivearray.value[index] = true; isactivearray.value[index] = true;
if(index>=5){ // if(index>=5){
set?.SetBlendingOption("blending_grids_select_point",`density_h:${index-4}`) // set?.SetBlendingOption("blending_grids_select_point",`density_h:${index-4}`)
}else{ // }else{
set?.SetBlendingOption("blending_grids_select_point",`density_v:${index+1}`) // set?.SetBlendingOption("blending_grids_select_point",`density_v:${index+1}`)
} // }
now_index.value=index
}; };
initialization(); initialization();
return { return {
now_index,
activeMouseDown, activeMouseDown,
model, model,
options, options,

23
src/components/FusionSettings/FourPointCalibration.vue
View File

@ -65,7 +65,7 @@
<div class="col-8"> <div class="col-8">
<div ref="div" style="background-color: #646464; height: 40vh"> <div ref="div" style="background-color: #646464; height: 40vh">
<div style="position: absolute"> <div style="position: absolute">
<vue3ResizeDrag <vue3ResizeDrag style="border: 0;" :class="[now_index==0?'action':'']"
v-if="isshowarray[0]" v-if="isshowarray[0]"
:isActive="isactivearray[0]" :isActive="isactivearray[0]"
@mousedown="activeMouseDown(0)" @mousedown="activeMouseDown(0)"
@ -78,7 +78,7 @@
@moveHandler="moveHandler_1" @moveHandler="moveHandler_1"
><div class="point">1</div> ><div class="point">1</div>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag <vue3ResizeDrag style="border: 0;" :class="[now_index==1?'action':'']"
v-if="isshowarray[1]" v-if="isshowarray[1]"
:isActive="isactivearray[1]" :isActive="isactivearray[1]"
@mousedown="activeMouseDown(1)" @mousedown="activeMouseDown(1)"
@ -91,7 +91,7 @@
@moveHandler="moveHandler_2" @moveHandler="moveHandler_2"
><div class="point">2</div> ><div class="point">2</div>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag <vue3ResizeDrag style="border: 0;" :class="[now_index==2?'action':'']"
v-if="isshowarray[2]" v-if="isshowarray[2]"
:isActive="isactivearray[2]" :isActive="isactivearray[2]"
@mousedown="activeMouseDown(2)" @mousedown="activeMouseDown(2)"
@ -104,7 +104,7 @@
@moveHandler="moveHandler_3" @moveHandler="moveHandler_3"
><div class="point">3</div> ><div class="point">3</div>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag <vue3ResizeDrag style="border: 0;" :class="[now_index==3?'action':'']"
v-if="isshowarray[3]" v-if="isshowarray[3]"
:isActive="isactivearray[3]" :isActive="isactivearray[3]"
@mousedown="activeMouseDown(3)" @mousedown="activeMouseDown(3)"
@ -196,6 +196,9 @@
.point{ .point{
width: 100%;height: 100%;border-radius: 50%;background: #0000ff;color: aliceblue; width: 100%;height: 100%;border-radius: 50%;background: #0000ff;color: aliceblue;
} }
.action{
background-color: aqua;
}
</style> </style>
<script lang="ts"> <script lang="ts">
import vue3ResizeDrag from "src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue"; import vue3ResizeDrag from "src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
@ -271,6 +274,7 @@ export default defineComponent({
{ x: 0, y: 0 }, { x: 0, y: 0 },
{ x: 0, y: 0 }, { x: 0, y: 0 },
]); //点的位置 ]); //点的位置
const now_index=ref(0)
const isshowarray = ref([true, true, true, true]); const isshowarray = ref([true, true, true, true]);
const isactivearray = ref([true, true, true, true]); const isactivearray = ref([true, true, true, true]);
const ste_status = ref(0); const ste_status = ref(0);
@ -307,7 +311,7 @@ export default defineComponent({
}); });
const activeMouseDown = (index: number) => { const activeMouseDown = (index: number) => {
isactivearray.value[index] = true; isactivearray.value[index] = true;
set?.SetBlendingOption("blending_grids_select_point",`4:${index+1}`) now_index.value=index
}; };
const mouseUpHandler = (index: number) => { const mouseUpHandler = (index: number) => {
isactivearray.value[index] = false; isactivearray.value[index] = false;
@ -404,6 +408,7 @@ export default defineComponent({
isshowarray.value[0] = true; isshowarray.value[0] = true;
}, 100); }, 100);
} }
now_index.value=0
save_set_cache(); save_set_cache();
}, },
{ deep: true } { deep: true }
@ -431,6 +436,7 @@ export default defineComponent({
isshowarray.value[1] = true; isshowarray.value[1] = true;
}, 100); }, 100);
} }
now_index.value=1
save_set_cache(); save_set_cache();
}, },
{ deep: true } { deep: true }
@ -460,6 +466,7 @@ export default defineComponent({
isshowarray.value[2] = true; isshowarray.value[2] = true;
}, 100); }, 100);
} }
now_index.value=2
save_set_cache(); save_set_cache();
}, },
{ deep: true } { deep: true }
@ -489,6 +496,7 @@ export default defineComponent({
isshowarray.value[3] = true; isshowarray.value[3] = true;
}, 100); }, 100);
} }
now_index.value=3
save_set_cache(); save_set_cache();
}, },
{ deep: true } { deep: true }
@ -519,7 +527,9 @@ export default defineComponent({
}, },
{ deep: true } { deep: true }
); );
watch(()=>now_index,(newval,oldval)=>{
set?.SetBlendingOption("blending_grids_select_point",`4:${now_index.value+1}`)
},{ deep: true })
//为了加载 缓存的配置时 同步点的位置 //为了加载 缓存的配置时 同步点的位置
const syncpoint = () => { const syncpoint = () => {
for (let index = 0; index < fourpostion.value.length; index++) { for (let index = 0; index < fourpostion.value.length; index++) {
@ -647,6 +657,7 @@ export default defineComponent({
}; };
}); });
return { return {
now_index,
div, div,
fourpostion, fourpostion,
reset, reset,

45
src/components/FusionSettings/FusionLocale.vue
View File

@ -91,30 +91,53 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-4 offset-4" v-if="group != 4"> <div class="col-12" v-if="group != 4">
<p class="text-center" style="margin: 0 0 8;">{{ $t("Set Fusion Band Parameters") }}</p> <p class="text-center" style="margin: 0 0 8;">{{ $t("Set Fusion Band Parameters") }}</p>
<div style="display: flex; justify-content: space-evenly"> <div style="display: flex; justify-content: space-evenly">
<div> <div>
<div class="btn_bottom"><q-btn size="sm" color="white" @click="add('alpha')" text-color="black" label="↑" /></div> <!-- <div class="btn_bottom"><q-btn size="sm" color="white" @click="add('alpha')" text-color="black" label="↑" /></div> -->
<q-slider track-size="'10vh'" v-model="array[group].alpha" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01" color="green" <q-slider v-model="array[group].alpha" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01" color="green"
vertical reverse label-always /> vertical reverse label-always />
<div class="btn_top"><q-btn size="sm" color="white" @click="reduce('alpha')" text-color="black" label="↓" /></div> <!-- <div class="btn_top"><q-btn size="sm" color="white" @click="reduce('alpha')" text-color="black" label="↓" /></div> -->
<div> <q-input dense filled type="number" step="0.1" v-model="array[group].alpha" label="alpha"
lazy-rules :rules="[
(val) =>
(val !== null && val !== '') ||
$t('Please enter a number'),
(val) =>
(val >= 0 && val <= 1) || $t('Please enter a value within the range'),
]" /></div>
<p class="text-center">alpha</p> <p class="text-center">alpha</p>
</div> </div>
<div> <div>
<div class="btn_bottom"><q-btn size="sm" color="white" @click="add('p')" text-color="black" label="↑" /></div> <!-- <div class="btn_bottom"><q-btn size="sm" color="white" @click="add('p')" text-color="black" label="↑" /></div> -->
<q-slider track-size="'10vh'" v-model="array[group].p" :min="0" @change="chang('p')" :max="16" :step="0.01" color="green" <q-slider v-model="array[group].p" :min="0" @change="chang('p')" :max="16" :step="0.01" color="green"
vertical reverse label-always /> vertical reverse label-always />
<div class="btn_top"><q-btn size="sm" color="white" @click="reduce('p')" text-color="black" label="↓" /></div> <!-- <div class="btn_top"><q-btn size="sm" color="white" @click="reduce('p')" text-color="black" label="↓" /></div> -->
<div> <q-input dense filled type="number" step="0.1" v-model="array[group].p" label="p"
lazy-rules :rules="[
(val) =>
(val !== null && val !== '') ||
$t('Please enter a number'),
(val) =>
(val >= 0 && val <= 16) || $t('Please enter a value within the range'),
]" /></div>
<p class="text-center">p</p> <p class="text-center">p</p>
</div> </div>
<div> <div>
<div class="btn_bottom"><q-btn size="sm" color="white" @click="add('gamma')" text-color="black" label="↑" /></div> <!-- <div class="btn_bottom"><q-btn size="sm" color="white" @click="add('gamma')" text-color="black" label="↑" /></div> -->
<q-slider track-size="'10vh'" v-model="array[group].gamma" :min="0" @change="chang('gamma')" :max="16" :step="0.01" color="green" <q-slider v-model="array[group].gamma" :min="0" @change="chang('gamma')" :max="16" :step="0.01" color="green" vertical reverse label-always />
vertical reverse label-always /> <!-- <div class="btn_top"><q-btn size="sm" color="white" @click="reduce('gamma')" text-color="black" label="↓" /></div> -->
<div class="btn_top"><q-btn size="sm" color="white" @click="reduce('gamma')" text-color="black" label="↓" /></div> <div> <q-input dense filled type="number" step="0.1" v-model="array[group].gamma" label="gamma"
lazy-rules :rules="[
(val) =>
(val !== null && val !== '') ||
$t('Please enter a number'),
(val) =>
(val >= 0 && val <= 16) || $t('Please enter 0-100'),
]" /></div>
<p class="text-center">gamma</p> <p class="text-center">gamma</p>
</div> </div>
</div> </div>

29
src/components/FusionSettings/SurfaceCorrection.vue
View File

@ -59,39 +59,39 @@
<div class="col-8"> <div class="col-8">
<div ref="div" style="background-color: #646464; height: 40vh"> <div ref="div" style="background-color: #646464; height: 40vh">
<div style="position: absolute"> <div style="position: absolute">
<vue3ResizeDrag :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="20" :h="20" :x="ninepostion[0].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==0?'action':'']" :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="20" :h="20" :x="ninepostion[0].x"
:y="ninepostion[0].y" @mousedown="activeMouseDown(0)" :isResizable="false" @moveHandler="moveHandler_1"> :y="ninepostion[0].y" @mousedown="activeMouseDown(0)" :isResizable="false" @moveHandler="moveHandler_1">
<div class="point">1</div> <div class="point">1</div>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="20" :h="20" :x="ninepostion[1].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==1?'action':'']" :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="20" :h="20" :x="ninepostion[1].x"
:y="ninepostion[1].y" @mousedown="activeMouseDown(1)" :isResizable="false" @moveHandler="moveHandler_2"> :y="ninepostion[1].y" @mousedown="activeMouseDown(1)" :isResizable="false" @moveHandler="moveHandler_2">
<div class="point">2</div> <div class="point">2</div>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="20" :h="20" :x="ninepostion[2].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==2?'action':'']" :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="20" :h="20" :x="ninepostion[2].x"
:y="ninepostion[2].y" @mousedown="activeMouseDown(2)" :isResizable="false" @moveHandler="moveHandler_3"> :y="ninepostion[2].y" @mousedown="activeMouseDown(2)" :isResizable="false" @moveHandler="moveHandler_3">
<div class="point">3</div> <div class="point">3</div>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="20" :h="20" :x="ninepostion[3].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==3?'action':'']" :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="20" :h="20" :x="ninepostion[3].x"
:y="ninepostion[3].y" @mousedown="activeMouseDown(3)" :isResizable="false" @moveHandler="moveHandler_4"> :y="ninepostion[3].y" @mousedown="activeMouseDown(3)" :isResizable="false" @moveHandler="moveHandler_4">
<div class="point">4</div> <div class="point">4</div>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="20" :h="20" :x="ninepostion[4].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==4?'action':'']" :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="20" :h="20" :x="ninepostion[4].x"
:y="ninepostion[4].y" @mousedown="activeMouseDown(4)" :isResizable="false" @moveHandler="moveHandler_5"> :y="ninepostion[4].y" @mousedown="activeMouseDown(4)" :isResizable="false" @moveHandler="moveHandler_5">
<div class="point">5</div> <div class="point">5</div>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="20" :h="20" :x="ninepostion[5].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==5?'action':'']" :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="20" :h="20" :x="ninepostion[5].x"
:y="ninepostion[5].y" @mousedown="activeMouseDown(5)" :isResizable="false" @moveHandler="moveHandler_6"> :y="ninepostion[5].y" @mousedown="activeMouseDown(5)" :isResizable="false" @moveHandler="moveHandler_6">
<div class="point">6</div> <div class="point">6</div>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="20" :h="20" :x="ninepostion[6].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==6?'action':'']" :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="20" :h="20" :x="ninepostion[6].x"
:y="ninepostion[6].y" @mousedown="activeMouseDown(6)" :isResizable="false" @moveHandler="moveHandler_7"> :y="ninepostion[6].y" @mousedown="activeMouseDown(6)" :isResizable="false" @moveHandler="moveHandler_7">
<div class="point">7</div> <div class="point">7</div>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[7]" v-if="isshowarray[7]" :w="20" :h="20" :x="ninepostion[7].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==7?'action':'']" :isActive="isactivearray[7]" v-if="isshowarray[7]" :w="20" :h="20" :x="ninepostion[7].x"
:y="ninepostion[7].y" @mousedown="activeMouseDown(7)" :isResizable="false" @moveHandler="moveHandler_8"> :y="ninepostion[7].y" @mousedown="activeMouseDown(7)" :isResizable="false" @moveHandler="moveHandler_8">
<div class="point">8</div> <div class="point">8</div>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="20" :h="20" :x="ninepostion[8].x" <vue3ResizeDrag style="border: 0;" :class="[now_index==8?'action':'']" :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="20" :h="20" :x="ninepostion[8].x"
:y="ninepostion[8].y" @mousedown="activeMouseDown(8)" :isResizable="false" @moveHandler="moveHandler_9"> :y="ninepostion[8].y" @mousedown="activeMouseDown(8)" :isResizable="false" @moveHandler="moveHandler_9">
<div class="point">9</div> <div class="point">9</div>
</vue3ResizeDrag> </vue3ResizeDrag>
@ -154,6 +154,9 @@
.point{ .point{
width: 100%;height: 100%;border-radius: 50%;background: #00ff00;color: aliceblue; width: 100%;height: 100%;border-radius: 50%;background: #00ff00;color: aliceblue;
} }
.action{
background-color: aqua;
}
</style> </style>
<script lang="ts"> <script lang="ts">
import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue"; import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
@ -187,6 +190,7 @@ export default defineComponent({
let Proportion = ref({ x: 0, y: 0 }); let Proportion = ref({ x: 0, y: 0 });
let centor = ref({ x: 0, y: 0 }); let centor = ref({ x: 0, y: 0 });
const div = ref(); const div = ref();
const now_index = ref(0);
let nine = reactive([ let nine = reactive([
{ x: 0, y: 1080 }, { x: 0, y: 1080 },
{ x: 960, y: 1920 }, { x: 960, y: 1920 },
@ -211,7 +215,7 @@ export default defineComponent({
]); ]);
const activeMouseDown = (index: number) => { const activeMouseDown = (index: number) => {
isactivearray.value[index] = true; isactivearray.value[index] = true;
set?.SetBlendingOption("blending_grids_select_point",`9:${index+1}`) now_index.value=index
}; };
//用于计算当前投影仪的索引 //用于计算当前投影仪的索引
let serverconfig = JSON.parse($store.state.fusion_configuration); let serverconfig = JSON.parse($store.state.fusion_configuration);
@ -766,6 +770,7 @@ export default defineComponent({
setTimeout(() => { setTimeout(() => {
isshowarray.value[index] = true; isshowarray.value[index] = true;
}, 100); }, 100);
now_index.value=index
}; };
const save = () => { const save = () => {
set?.SaveBlendingConfig(""); set?.SaveBlendingConfig("");
@ -775,7 +780,11 @@ export default defineComponent({
}); });
}, 1000); }, 1000);
}; };
watch(()=>now_index,(newval,oldval)=>{
set?.SetBlendingOption("blending_grids_select_point",`9:${now_index.value+1}`)
},{ deep: true })
return { return {
now_index,
model, model,
save, save,
nine, nine,

3
src/i18n/en-US/index.ts
View File

@ -446,5 +446,6 @@ export default {
"disable_clip":"disable clip", "disable_clip":"disable clip",
"show_mask":"hide desktop", "show_mask":"hide desktop",
"save_bmp":"save bmp", "save_bmp":"save bmp",
"disable_blending_params":"disable blending params" "disable_blending_params":"disable blending params",
"Please enter a value within the range":"Please enter a value within the range"
}; };

3
src/i18n/zh-CN/index.ts
View File

@ -715,5 +715,6 @@ export default {
"disable_clip":"禁用裁剪", "disable_clip":"禁用裁剪",
"show_mask":"隐藏桌面", "show_mask":"隐藏桌面",
"save_bmp":"保存BMP", "save_bmp":"保存BMP",
"disable_blending_params":"禁用融合参数" "disable_blending_params":"禁用融合参数",
"Please enter a value within the range":"请输入范围内的值"
}; };