完善web端融合 demo
This commit is contained in:
parent
9782be5cd4
commit
f51c16ea18
|
@ -1,56 +1,71 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-2 q-pa-xl"></div>
|
<div class="col-2 q-pa-lg"></div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl">
|
<div class="col-2 q-pa-lg">
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[0]" label="" lazy-rules />
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[0]" label="" lazy-rules />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl">
|
<div class="col-2 q-pa-lg">
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[1]" label="" lazy-rules />
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[1]" label="" lazy-rules />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl">
|
<div class="col-2 q-pa-lg">
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[2]" label="" lazy-rules />
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[2]" label="" lazy-rules />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl"> </div>
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
<div class="col-2 q-pa-xl">
|
<div class="col-2 q-pa-lg">
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[3]" label="" lazy-rules />
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[3]" label="" lazy-rules />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2 q-pa-xl">
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
|
<div class="col-2 q-pa-lg"> </div>
|
||||||
|
<div class="col-2 q-pa-lg">
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[3]" label="" lazy-rules />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="col-2 q-pa-lg">
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[4]" label="" lazy-rules />
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[4]" label="" lazy-rules />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2 q-pa-xl">
|
<div class="col-2 q-pa-lg">
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[5]" label="" lazy-rules />
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[5]" label="" lazy-rules />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2 q-pa-xl">
|
<div class="col-2 q-pa-lg">
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[6]" label="" lazy-rules />
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[6]" label="" lazy-rules />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2 q-pa-xl">
|
<div class="col-2 q-pa-lg">
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[7]" label="" lazy-rules />
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[7]" label="" lazy-rules />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2 q-pa-xl">
|
<div class="col-2 q-pa-lg">
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[8]" label="" lazy-rules />
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[8]" label="" lazy-rules />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2 q-pa-xl">
|
<div class="col-2 q-pa-lg">
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[9]" label="" lazy-rules />
|
<!-- <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[9]" label="" lazy-rules /> -->
|
||||||
</div>
|
</div>
|
||||||
<!-- ?? -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -8,7 +8,18 @@
|
||||||
<q-btn color="white" @click="reset(0)" text-color="black" :label="$t('reset')" />
|
<q-btn color="white" @click="reset(0)" text-color="black" :label="$t('reset')" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<div ref="div" style="background-color: #7fffd4;height: 60vh;">
|
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[1] = false"
|
||||||
|
v-model="four[1].x" label="x" lazy-rules />
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[1] = false"
|
||||||
|
v-model="four[1].y" label="y" lazy-rules />
|
||||||
|
<q-btn color="white" @click="reset(1)" text-color="black" :label="$t('reset')" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-2"></div>
|
||||||
|
<div class="col-8"> <div ref="div" style="background-color: #7fffd4;height: 40vh;">
|
||||||
<div style="position:absolute;">
|
<div style="position:absolute;">
|
||||||
<vue3ResizeDrag v-if="isshowarray[0]" :isActive="isactivearray[0]" @mousedown="activeMouseDown(0)"
|
<vue3ResizeDrag v-if="isshowarray[0]" :isActive="isactivearray[0]" @mousedown="activeMouseDown(0)"
|
||||||
@mouseUpHandler="mouseUpHandler(0)" :w="30" :h="20" :x="x1" :y="y1" :isResizable="false"
|
@mouseUpHandler="mouseUpHandler(0)" :w="30" :h="20" :x="x1" :y="y1" :isResizable="false"
|
||||||
|
@ -24,15 +35,9 @@
|
||||||
@mouseUpHandler="mouseUpHandler(3)" :w="30" :h="20" :x="point4.x" :y="point4.y"
|
@mouseUpHandler="mouseUpHandler(3)" :w="30" :h="20" :x="point4.x" :y="point4.y"
|
||||||
:isResizable="false" @moveHandler="moveHandler_4"><span>{{$t('point')}}4</span> </vue3ResizeDrag>
|
:isResizable="false" @moveHandler="moveHandler_4"><span>{{$t('point')}}4</span> </vue3ResizeDrag>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div></div>
|
||||||
</div>
|
<div class="col-2"></div>
|
||||||
<div class="col-2">
|
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[1] = false"
|
|
||||||
v-model="four[1].x" label="x" lazy-rules />
|
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[1] = false"
|
|
||||||
v-model="four[1].y" label="y" lazy-rules />
|
|
||||||
<q-btn color="white" @click="reset(1)" text-color="black" :label="$t('reset')" />
|
|
||||||
</div>
|
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[2] = false"
|
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[2] = false"
|
||||||
v-model="four[2].x" label="x" lazy-rules />
|
v-model="four[2].x" label="x" lazy-rules />
|
||||||
|
@ -41,8 +46,7 @@
|
||||||
<q-btn color="white" @click="reset(2)" text-color="black" :label="$t('reset')" />
|
<q-btn color="white" @click="reset(2)" text-color="black" :label="$t('reset')" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<!-- <div style="background-color: #7fffd4;height: 100%;">
|
<q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" /><q-btn color="white" @click="save" text-color="black" :label="$t('save config')" />
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[3] = false"
|
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[3] = false"
|
||||||
|
@ -51,12 +55,6 @@
|
||||||
v-model="four[3].y" label="y" lazy-rules />
|
v-model="four[3].y" label="y" lazy-rules />
|
||||||
<q-btn color="white" @click="reset(3)" text-color="black" :label="$t('reset')" />
|
<q-btn color="white" @click="reset(3)" text-color="black" :label="$t('reset')" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <div class="col-6 q-pa-xl">
|
|
||||||
<q-btn color="white" text-color="black" label="重置" />
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -65,7 +63,6 @@
|
||||||
</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";
|
||||||
import { getElementLeft, getElementTop } from "src/third_lib/calculateposition/index";
|
|
||||||
import { dom } from 'quasar'
|
import { dom } from 'quasar'
|
||||||
|
|
||||||
import { defineComponent, ref, watch, computed, defineProps, withDefaults, onMounted, reactive } from "vue";
|
import { defineComponent, ref, watch, computed, defineProps, withDefaults, onMounted, reactive } from "vue";
|
||||||
|
@ -88,6 +85,8 @@ export default defineComponent({
|
||||||
let set = GlobalData.getInstance().getCurrentClient();
|
let set = GlobalData.getInstance().getCurrentClient();
|
||||||
const for_1 = computed(() => { })
|
const for_1 = computed(() => { })
|
||||||
let four = ref([{ x: 0, y: 1080 }, { x: 1920, y: 1080 }, { x: 0, y: 0 }, { x: 1920, y: 0 }]);
|
let four = ref([{ x: 0, y: 1080 }, { x: 1920, y: 1080 }, { x: 0, y: 0 }, { x: 1920, y: 0 }]);
|
||||||
|
let defaultfour = ref([{ x: 0, y: 1080 }, { x: 1920, y: 1080 }, { x: 0, y: 0 }, { x: 1920, y: 0 }]);
|
||||||
|
let defaultfourpostion: any = ref([{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]);
|
||||||
let fourpostion: any = ref([{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]);
|
let fourpostion: any = ref([{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]);
|
||||||
let div: any = ref(null);
|
let div: any = ref(null);
|
||||||
let div2: any = ref(null);
|
let div2: any = ref(null);
|
||||||
|
@ -103,7 +102,9 @@ export default defineComponent({
|
||||||
const y1 = ref(0);
|
const y1 = ref(0);
|
||||||
const { offset } = dom
|
const { offset } = dom
|
||||||
|
|
||||||
|
const save=()=>{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
const activeMouseDown = (index: number) => {
|
const activeMouseDown = (index: number) => {
|
||||||
isactivearray.value[index] = true
|
isactivearray.value[index] = true
|
||||||
|
@ -147,9 +148,15 @@ export default defineComponent({
|
||||||
|
|
||||||
Proportion.value.x = 1920 / (div.value.offsetWidth - 25)
|
Proportion.value.x = 1920 / (div.value.offsetWidth - 25)
|
||||||
Proportion.value.y = 1080 / (div.value.offsetHeight - 25)
|
Proportion.value.y = 1080 / (div.value.offsetHeight - 25)
|
||||||
|
for (let index = 0; index < fourpostion.value.length; index++) {
|
||||||
|
defaultfourpostion.value[index].x = fourpostion.value[index].x ;
|
||||||
|
defaultfourpostion.value[index].y = fourpostion.value[index].y;
|
||||||
|
defaultfour.value[index].x=four.value[index].x
|
||||||
|
defaultfour.value[index].y=four.value[index].y
|
||||||
|
}
|
||||||
}
|
}
|
||||||
watch(() => four.value[0], (newVal, oldVal) => {
|
watch(() => four.value[0], (newVal, oldVal) => {
|
||||||
set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 1, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 1, Number(newVal.x), Number(newVal.y));
|
||||||
///
|
///
|
||||||
if (!isactivearray.value[0]) {
|
if (!isactivearray.value[0]) {
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
@ -165,7 +172,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
watch(() => four.value[1], (newVal, oldVal) => {
|
watch(() => four.value[1], (newVal, oldVal) => {
|
||||||
set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 2, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 2, Number(newVal.x), Number(newVal.y));
|
||||||
///
|
///
|
||||||
if (!isactivearray.value[1]) {
|
if (!isactivearray.value[1]) {
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
@ -181,7 +188,7 @@ export default defineComponent({
|
||||||
///
|
///
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
watch(() => four.value[2], (newVal, oldVal) => {
|
watch(() => four.value[2], (newVal, oldVal) => {
|
||||||
set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 3, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 3, Number(newVal.x), Number(newVal.y));
|
||||||
///
|
///
|
||||||
if (!isactivearray.value[2]) {
|
if (!isactivearray.value[2]) {
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
@ -190,7 +197,6 @@ export default defineComponent({
|
||||||
point3.value.x = x
|
point3.value.x = x
|
||||||
point3.value.y = y
|
point3.value.y = y
|
||||||
isshowarray.value[2] = false
|
isshowarray.value[2] = false
|
||||||
//isactivearray.value[2]=false
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
isshowarray.value[2] = true
|
isshowarray.value[2] = true
|
||||||
}, 100);
|
}, 100);
|
||||||
|
@ -198,7 +204,7 @@ export default defineComponent({
|
||||||
///
|
///
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
watch(() => four.value[3], (newVal, oldVal) => {
|
watch(() => four.value[3], (newVal, oldVal) => {
|
||||||
set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 4, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 4, Number(newVal.x), Number(newVal.y));
|
||||||
///
|
///
|
||||||
if (!isactivearray.value[3]) {
|
if (!isactivearray.value[3]) {
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
@ -207,7 +213,6 @@ export default defineComponent({
|
||||||
point4.value.x = x
|
point4.value.x = x
|
||||||
point4.value.y = y
|
point4.value.y = y
|
||||||
isshowarray.value[3] = false
|
isshowarray.value[3] = false
|
||||||
//isactivearray.value[2]=false
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
isshowarray.value[3] = true
|
isshowarray.value[3] = true
|
||||||
}, 100);
|
}, 100);
|
||||||
|
@ -219,30 +224,30 @@ export default defineComponent({
|
||||||
const reset = (index: number) => {
|
const reset = (index: number) => {
|
||||||
if (index == 0) {
|
if (index == 0) {
|
||||||
console.log(x1.value + "," + y1.value)
|
console.log(x1.value + "," + y1.value)
|
||||||
four.value[index].x = 0
|
four.value[0].x = 0
|
||||||
four.value[index].y = 1080
|
four.value[0].y = 1080
|
||||||
point1.x = 0
|
point1.x = 0
|
||||||
point1.y = 0
|
point1.y = 0
|
||||||
x1.value = 0
|
x1.value = 0
|
||||||
y1.value = 0
|
y1.value = 0
|
||||||
}
|
}
|
||||||
if (index == 1) {
|
if (index == 1) {
|
||||||
four.value[index].x = 1920
|
four.value[1].x = 1920
|
||||||
four.value[index].y = 1080
|
four.value[1].y = 1080
|
||||||
fourpostion.value[index].x = div.value.offsetWidth - 25
|
fourpostion.value[1].x = div.value.offsetWidth - 25
|
||||||
fourpostion.value[index].y = 0
|
fourpostion.value[1].y = 0
|
||||||
}
|
}
|
||||||
if (index == 2) {
|
if (index == 2) {
|
||||||
four.value[index].x = 0
|
four.value[2].x = 0
|
||||||
four.value[index].y = 0
|
four.value[2].y = 0
|
||||||
fourpostion.value[index].x = 0
|
fourpostion.value[2].x = 0
|
||||||
fourpostion.value[index].y = div.value.offsetHeight - 25
|
fourpostion.value[2].y = div.value.offsetHeight - 25
|
||||||
}
|
}
|
||||||
if (index == 3) {
|
if (index == 3) {
|
||||||
four.value[index].x = 1920
|
four.value[3].x = 1920
|
||||||
four.value[index].y = 0
|
four.value[3].y = 0
|
||||||
fourpostion.value[index].x = div.value.offsetWidth - 25
|
fourpostion.value[3].x = div.value.offsetWidth - 25
|
||||||
fourpostion.value[index].y = div.value.offsetHeight - 25
|
fourpostion.value[3].y = div.value.offsetHeight - 25
|
||||||
}
|
}
|
||||||
isshowarray.value[index] = false
|
isshowarray.value[index] = false
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
@ -250,6 +255,21 @@ export default defineComponent({
|
||||||
}, 100);
|
}, 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const resetall=()=>{
|
||||||
|
|
||||||
|
for (let index = 0; index < fourpostion.value.length; index++) {
|
||||||
|
fourpostion.value[index].x=defaultfourpostion.value[index].x
|
||||||
|
fourpostion.value[index].y=defaultfourpostion.value[index].y
|
||||||
|
console.log("ok");
|
||||||
|
four.value[index].x=defaultfour.value[index].x
|
||||||
|
four.value[index].y=defaultfour.value[index].y
|
||||||
|
|
||||||
|
isshowarray.value[index] = false
|
||||||
|
setTimeout(() => {
|
||||||
|
isshowarray.value[index] = true
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const moveHandler_1 = (data: any) => {
|
const moveHandler_1 = (data: any) => {
|
||||||
let x = Math.ceil((data.left - fourpostion.value[0].x) * Proportion.value.x + 0);
|
let x = Math.ceil((data.left - fourpostion.value[0].x) * Proportion.value.x + 0);
|
||||||
|
@ -288,11 +308,13 @@ export default defineComponent({
|
||||||
options,
|
options,
|
||||||
fourpostion,
|
fourpostion,
|
||||||
reset,
|
reset,
|
||||||
|
resetall,
|
||||||
moveHandler_1,
|
moveHandler_1,
|
||||||
moveHandler_2,
|
moveHandler_2,
|
||||||
moveHandler_3,
|
moveHandler_3,
|
||||||
moveHandler_4,
|
moveHandler_4,
|
||||||
four,
|
four,
|
||||||
|
save,
|
||||||
point1,
|
point1,
|
||||||
point2,
|
point2,
|
||||||
point3,
|
point3,
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-8 boder">
|
<div class="col-12">
|
||||||
<p class="text-center">{{$t('Set the fusion band width')}}</p>
|
<p class="text-center">{{$t('Set the fusion band width')}}</p>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
|
@ -10,7 +10,7 @@
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-toggle
|
<q-toggle
|
||||||
class="float-right"
|
class="float-right"
|
||||||
v-model="array2[0].isshow"
|
v-model="array2[selectedprojector][0].isshow"
|
||||||
label=""
|
label=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -19,14 +19,14 @@
|
||||||
filled
|
filled
|
||||||
type="number"
|
type="number"
|
||||||
@focus="group = 0"
|
@focus="group = 0"
|
||||||
v-model="array2[0].value"
|
v-model="array2[selectedprojector][0].value"
|
||||||
:label="$t('upper fusion zone parameters')"
|
:label="$t('upper fusion zone parameters')"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) =>
|
(val) =>
|
||||||
(val !== null && val !== '') || $t('Please enter a number'),
|
(val !== null && val !== '') || $t('Please enter a number'),
|
||||||
(val) =>
|
(val) =>
|
||||||
(val > -1 && val < 100) || $t('Please enter 0-100'),
|
(val > -1 && val < 1080) || $t('Please enter 0-100'),
|
||||||
]"
|
]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -41,7 +41,7 @@
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-toggle
|
<q-toggle
|
||||||
class="float-right"
|
class="float-right"
|
||||||
v-model="array2[1].isshow"
|
v-model="array2[selectedprojector][1].isshow"
|
||||||
label=""
|
label=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -50,14 +50,14 @@
|
||||||
filled
|
filled
|
||||||
type="number"
|
type="number"
|
||||||
@focus="group = 1"
|
@focus="group = 1"
|
||||||
v-model="array2[1].value"
|
v-model="array2[selectedprojector][1].value"
|
||||||
:label="$t('Left fusion Band Parameters')"
|
:label="$t('Left fusion Band Parameters')"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) =>
|
(val) =>
|
||||||
(val !== null && val !== '') || $t('Please enter a number'),
|
(val !== null && val !== '') || $t('Please enter a number'),
|
||||||
(val) =>
|
(val) =>
|
||||||
(val > -1 && val < 100) || $t('Please enter 0-100'),
|
(val > -1 && val < 1920) || $t('Please enter 0-100'),
|
||||||
]"
|
]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -68,7 +68,7 @@
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-toggle
|
<q-toggle
|
||||||
class="float-right"
|
class="float-right"
|
||||||
v-model="array2[2].isshow"
|
v-model="array2[selectedprojector][2].isshow"
|
||||||
label=""
|
label=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -77,14 +77,14 @@
|
||||||
filled
|
filled
|
||||||
type="number"
|
type="number"
|
||||||
@focus="group = 2"
|
@focus="group = 2"
|
||||||
v-model="array2[2].value"
|
v-model="array2[selectedprojector][2].value"
|
||||||
:label="$t('Right fusion Band Parameters')"
|
:label="$t('Right fusion Band Parameters')"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) =>
|
(val) =>
|
||||||
(val !== null && val !== '') || $t('Please enter a number'),
|
(val !== null && val !== '') || $t('Please enter a number'),
|
||||||
(val) =>
|
(val) =>
|
||||||
(val > -1 && val < 100) || $t('Please enter 0-100'),
|
(val > -1 && val < 1920) || $t('Please enter 0-100'),
|
||||||
]"
|
]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -99,7 +99,7 @@
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-toggle
|
<q-toggle
|
||||||
class="float-right"
|
class="float-right"
|
||||||
v-model="array2[3].isshow"
|
v-model="array2[selectedprojector][3].isshow"
|
||||||
label=""
|
label=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -108,14 +108,14 @@
|
||||||
filled
|
filled
|
||||||
type="number"
|
type="number"
|
||||||
@focus="group = 3"
|
@focus="group = 3"
|
||||||
v-model="array2[3].value"
|
v-model="array2[selectedprojector][3].value"
|
||||||
:label="$t('Lower fusion Zone Parameters')"
|
:label="$t('Lower fusion Zone Parameters')"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) =>
|
(val) =>
|
||||||
(val !== null && val !== '') || $t('Please enter a number'),
|
(val !== null && val !== '') || $t('Please enter a number'),
|
||||||
(val) =>
|
(val) =>
|
||||||
(val > -1 && val < 100) || $t('Please enter 0-100'),
|
(val > -1 && val < 1080) || $t('Please enter 0-100'),
|
||||||
]"
|
]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -123,10 +123,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12">是否启用混合<q-checkbox v-model="EnableBlending" @chang="changEnableBlending" /></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!(group == 4) && array2[group].isshow" class="col-4">
|
<div v-if="!(group == 4) && array2[selectedprojector][group].isshow" class="col-4 offset-4">
|
||||||
<p class="text-center">{{$t('Set Fusion Band Parameters')}}</p>
|
<p class="text-center">{{$t('Set Fusion Band Parameters')}}</p>
|
||||||
<div style="display: flex; justify-content: space-evenly">
|
<div style="display: flex; justify-content: space-evenly">
|
||||||
<div>
|
<div>
|
||||||
|
@ -174,9 +174,6 @@
|
||||||
<p class="text-center">gamma</p>
|
<p class="text-center">gamma</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="q-pa-lg text-center">
|
|
||||||
<q-option-group v-model="group" :options="options" color="primary" />
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -200,6 +197,7 @@ import {
|
||||||
import { useStore } from "src/store";
|
import { useStore } from "src/store";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import GlobalData from "src/common/GlobalData";
|
import GlobalData from "src/common/GlobalData";
|
||||||
|
import { number } from "@intlify/core-base";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "ComponentFusionLocale",
|
name: "ComponentFusionLocale",
|
||||||
|
@ -210,7 +208,7 @@ export default defineComponent({
|
||||||
const age = ref(0);
|
const age = ref(0);
|
||||||
const standard = ref(0);
|
const standard = ref(0);
|
||||||
const group = ref(4);
|
const group = ref(4);
|
||||||
const EnableBlending=ref(true);
|
const EnableBlending=ref(false);
|
||||||
let array: any = ref([
|
let array: any = ref([
|
||||||
{ alpha: 0, p: 0, gamma: 0 },
|
{ alpha: 0, p: 0, gamma: 0 },
|
||||||
{ alpha: 0, p: 0, gamma: 0 },
|
{ alpha: 0, p: 0, gamma: 0 },
|
||||||
|
@ -218,12 +216,20 @@ export default defineComponent({
|
||||||
{ alpha: 0, p: 0, gamma: 0 },
|
{ alpha: 0, p: 0, gamma: 0 },
|
||||||
{ alpha: 0, p: 0, gamma: 0 },
|
{ alpha: 0, p: 0, gamma: 0 },
|
||||||
]);
|
]);
|
||||||
let array2 = reactive([
|
let array2: any = reactive([[
|
||||||
{ isshow: false, value: 0 },
|
{ isshow: false, value: 0 },
|
||||||
{ isshow: false, value: 0 },
|
{ isshow: false, value: 0 },
|
||||||
{ isshow: false, value: 0 },
|
{ isshow: false, value: 0 },
|
||||||
{ isshow: false, value: 0 },
|
{ isshow: false, value: 0 },
|
||||||
]);
|
],[
|
||||||
|
{ isshow: false, value: 0 },
|
||||||
|
{ isshow: false, value: 0 },
|
||||||
|
{ isshow: false, value: 0 },
|
||||||
|
{ isshow: false, value: 0 },
|
||||||
|
]]);
|
||||||
|
const selectedprojector=computed(()=>{
|
||||||
|
return $store.state.selected_projector=="0/0"?0:1
|
||||||
|
})
|
||||||
const options = ref([
|
const options = ref([
|
||||||
{
|
{
|
||||||
label: "上融合带参数",
|
label: "上融合带参数",
|
||||||
|
@ -252,12 +258,9 @@ export default defineComponent({
|
||||||
$store.commit("setSelectedProjector", newValue);
|
$store.commit("setSelectedProjector", newValue);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const setIndexProjector = () => {
|
|
||||||
console.log($store.state.selected_projector);
|
|
||||||
};
|
|
||||||
const chang = (type: string) => {
|
const chang = (type: string) => {
|
||||||
if (type == "alpha") {
|
if (type == "alpha") {
|
||||||
set?.setBlendingAlphaParam(
|
if($store.state.EnableBlending)set?.setBlendingAlphaParam(
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[0],
|
$store.getters.GetTheCurrentlySelectedCamera[0],
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[1],
|
$store.getters.GetTheCurrentlySelectedCamera[1],
|
||||||
group.value,
|
group.value,
|
||||||
|
@ -265,14 +268,14 @@ export default defineComponent({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (type == "p") {
|
if (type == "p") {
|
||||||
set?.setBlendingPowerParam(
|
if($store.state.EnableBlending)set?.setBlendingPowerParam(
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[0],
|
$store.getters.GetTheCurrentlySelectedCamera[0],
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[1],
|
$store.getters.GetTheCurrentlySelectedCamera[1],
|
||||||
group.value,
|
group.value,
|
||||||
array.value[group.value].p
|
array.value[group.value].p
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (type == "gamma") {
|
if($store.state.EnableBlending)if (type == "gamma") {
|
||||||
set?.setBlendingGammaParam(
|
set?.setBlendingGammaParam(
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[0],
|
$store.getters.GetTheCurrentlySelectedCamera[0],
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[1],
|
$store.getters.GetTheCurrentlySelectedCamera[1],
|
||||||
|
@ -282,55 +285,101 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
//console.log("giao")
|
//console.log("giao")
|
||||||
};
|
};
|
||||||
|
//0:左融合带,1:上融合带,2:右融合带,3:下融合带
|
||||||
watch(
|
watch(
|
||||||
() => array2[0].value,
|
() => array2[0][0],
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
//set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],1,array2[0][0].isshow,Number(array2[0][0].value));
|
||||||
///
|
if(!array2[0][0].isshow){
|
||||||
///
|
array2[0][0].value=0
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{ deep: true }
|
{ deep: true }
|
||||||
);
|
);
|
||||||
watch(
|
watch(
|
||||||
() => array2[1].value,
|
() => array2[0][1],
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
//set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],0,array2[0][1].isshow,Number(array2[0][1].value));
|
||||||
///
|
if(!array2[0][1].isshow){
|
||||||
///
|
array2[0][1].value=0
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{ deep: true }
|
{ deep: true }
|
||||||
);
|
);
|
||||||
watch(
|
watch(
|
||||||
() => array2[2].value,
|
() => array2[0][2],
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
//set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],2,array2[0][2].isshow,Number(array2[0][2].value));
|
||||||
///
|
if(!array2[0][2].isshow){
|
||||||
///
|
array2[0][2].value=0
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{ deep: true }
|
{ deep: true }
|
||||||
);
|
);
|
||||||
watch(
|
watch(
|
||||||
() => array2[3].value,
|
() => array2[0][3],
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
//set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],3,array2[0][3].isshow,Number(array2[0][3].value));
|
||||||
///
|
if(!array2[0][3].isshow){
|
||||||
///
|
array2[0][3].value=0
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{ deep: true }
|
{ deep: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
|
///
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => array2[1][0],
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
if($store.state.EnableBlending) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],1,array2[1][0].isshow,Number(array2[1][0].value));
|
||||||
|
if(!array2[1][0].isshow){
|
||||||
|
array2[1][0].value=0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => array2[1][1],
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
if($store.state.EnableBlending) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],0,array2[1][1].isshow,Number(array2[1][2].value));
|
||||||
|
if(!array2[1][1].isshow){
|
||||||
|
array2[1][1].value=0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => array2[1][2],
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
if($store.state.EnableBlending) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],2,array2[1][2].isshow,Number(array2[1][2].value));
|
||||||
|
if(!array2[1][2].isshow){
|
||||||
|
array2[1][2].value=0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => array2[1][3],
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
if($store.state.EnableBlending) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],3,array2[1][3].isshow,Number(array2[1][3].value));
|
||||||
|
if(!array2[1][3].isshow){
|
||||||
|
array2[1][3].value=0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
///
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => EnableBlending,
|
() => EnableBlending,
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
//set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
|
$store.commit('setEnableBlending',newVal.value);
|
||||||
///
|
set?.EnableBlending(newVal.value);
|
||||||
///
|
},{ deep: true }
|
||||||
$store.commit('setEnableBlending',newVal);
|
|
||||||
console.log(EnableBlending)
|
|
||||||
},
|
|
||||||
);
|
);
|
||||||
const changEnableBlending=()=>{
|
const changEnableBlending=()=>{
|
||||||
$store.commit('setEnableBlending',EnableBlending);
|
$store.commit('setEnableBlending',EnableBlending.value);
|
||||||
console.log(EnableBlending)
|
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
model,
|
model,
|
||||||
|
@ -341,11 +390,11 @@ export default defineComponent({
|
||||||
group,
|
group,
|
||||||
text,
|
text,
|
||||||
array,
|
array,
|
||||||
$t,
|
|
||||||
chang,
|
chang,
|
||||||
EnableBlending,
|
EnableBlending,
|
||||||
array2,
|
array2,
|
||||||
changEnableBlending
|
changEnableBlending,
|
||||||
|
selectedprojector
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -80,7 +80,6 @@ export default defineComponent({
|
||||||
isshowhex,
|
isshowhex,
|
||||||
index,
|
index,
|
||||||
color,
|
color,
|
||||||
$t,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -33,10 +33,6 @@ export default defineComponent({
|
||||||
$store.commit('setSelectedProjector',newValue);
|
$store.commit('setSelectedProjector',newValue);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const setIndexProjector=()=>{
|
|
||||||
console.log($store.state.selected_projector);
|
|
||||||
}
|
|
||||||
return {
|
return {
|
||||||
model,
|
model,
|
||||||
...props
|
...props
|
||||||
|
|
|
@ -37,7 +37,7 @@
|
||||||
:dense="true" v-model="nine[2].x" label="x" lazy-rules />
|
:dense="true" v-model="nine[2].x" label="x" lazy-rules />
|
||||||
<q-input filled type="number" class="q-pt-md" @focus="isactivearray[2] = false" :dense="true"
|
<q-input filled type="number" class="q-pt-md" @focus="isactivearray[2] = false" :dense="true"
|
||||||
v-model="nine[2].y" label="y" lazy-rules />
|
v-model="nine[2].y" label="y" lazy-rules />
|
||||||
<q-btn color="white" @click="reset(2)" text-color="black" label="$t('reset')" />
|
<q-btn color="white" @click="reset(2)" text-color="black" :label="$t('reset')" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -55,13 +55,6 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<!-- <div class="row">
|
|
||||||
<div class="col-2"> <q-input filled type="number" class="q-pt-md" :dense="true" v-model="nine[4].x"
|
|
||||||
label="x" lazy-rules />
|
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="nine[4].y" label="y"
|
|
||||||
lazy-rules />
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<div ref="div" style="background-color: #7fffd4;height: 40vh;">
|
<div ref="div" style="background-color: #7fffd4;height: 40vh;">
|
||||||
<div style="position:absolute;">
|
<div style="position:absolute;">
|
||||||
<vue3ResizeDrag :isActive="true" v-if="isshowarray[0]" :w="30" :h="20" :x="ninepostion[0].x"
|
<vue3ResizeDrag :isActive="true" v-if="isshowarray[0]" :w="30" :h="20" :x="ninepostion[0].x"
|
||||||
|
@ -108,7 +101,9 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col-4">
|
<div class="col-4">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-6"></div>
|
<div class="col-6"> <q-btn color="white" @click="resetall" text-color="black"
|
||||||
|
:label="$t('resetall')" /><q-btn color="white" @click="save" text-color="black"
|
||||||
|
:label="$t('save config')" /></div>
|
||||||
<div class="col-3"> <q-input filled type="number" @focus="isactivearray[6] = false" class="q-pt-md"
|
<div class="col-3"> <q-input filled type="number" @focus="isactivearray[6] = false" class="q-pt-md"
|
||||||
:dense="true" v-model="nine[6].x" label="x" lazy-rules />
|
:dense="true" v-model="nine[6].x" label="x" lazy-rules />
|
||||||
<q-input filled type="number" class="q-pt-md" @focus="isactivearray[6] = false" :dense="true"
|
<q-input filled type="number" class="q-pt-md" @focus="isactivearray[6] = false" :dense="true"
|
||||||
|
@ -142,10 +137,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="col-4">
|
|
||||||
<q-btn color="white" text-color="black" label="重置" />
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -175,6 +166,7 @@ export default defineComponent({
|
||||||
let centor = ref({ x: 0, y: 0 });
|
let centor = ref({ x: 0, y: 0 });
|
||||||
const div = ref();
|
const div = ref();
|
||||||
let nine = ref([{ x: 0, y: 1080 }, { x: 960, y: 1920 }, { x: 1920, y: 1080 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1920, y: 540 }, { x: 0, y: 0 }, { x: 960, y: 0 }, { x: 1920, y: 0 }]);
|
let nine = ref([{ x: 0, y: 1080 }, { x: 960, y: 1920 }, { x: 1920, y: 1080 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1920, y: 540 }, { x: 0, y: 0 }, { x: 960, y: 0 }, { x: 1920, y: 0 }]);
|
||||||
|
let defaultnine = ref([{ x: 0, y: 1080 }, { x: 960, y: 1920 }, { x: 1920, y: 1080 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1920, y: 540 }, { x: 0, y: 0 }, { x: 960, y: 0 }, { x: 1920, y: 0 }]);
|
||||||
///
|
///
|
||||||
const activeMouseDown = (index: number) => {
|
const activeMouseDown = (index: number) => {
|
||||||
isactivearray.value[index] = true
|
isactivearray.value[index] = true
|
||||||
|
@ -182,6 +174,7 @@ export default defineComponent({
|
||||||
const isshowarray = ref([true, true, true, true, true, true, true, true, true,])
|
const isshowarray = ref([true, true, true, true, true, true, true, true, true,])
|
||||||
const isactivearray = ref([true, true, true, true, true, true, true, true, true,])
|
const isactivearray = ref([true, true, true, true, true, true, true, true, true,])
|
||||||
let ninepostion: any = ref([{ x: 0, y: 1920 }, { x: 960, y: 1920 }, { x: 1080, y: 1920 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1080, y: 540 }, { x: 0, y: 0 }, { x: 540, y: 0 }, { x: 1080, y: 0 }]);
|
let ninepostion: any = ref([{ x: 0, y: 1920 }, { x: 960, y: 1920 }, { x: 1080, y: 1920 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1080, y: 540 }, { x: 0, y: 0 }, { x: 540, y: 0 }, { x: 1080, y: 0 }]);
|
||||||
|
let defaultninepostion: any = ref([{ x: 0, y: 1920 }, { x: 960, y: 1920 }, { x: 1080, y: 1920 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1080, y: 540 }, { x: 0, y: 0 }, { x: 540, y: 0 }, { x: 1080, y: 0 }]);
|
||||||
const moveHandler_1 = (data: any) => {
|
const moveHandler_1 = (data: any) => {
|
||||||
let x = Math.ceil((data.left - ninepostion.value[0].x) * Proportion.value.x);
|
let x = Math.ceil((data.left - ninepostion.value[0].x) * Proportion.value.x);
|
||||||
let y = 1080 - Math.ceil((data.top - ninepostion.value[0].y) * Proportion.value.y);
|
let y = 1080 - Math.ceil((data.top - ninepostion.value[0].y) * Proportion.value.y);
|
||||||
|
@ -246,8 +239,6 @@ export default defineComponent({
|
||||||
nine.value[8].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
|
nine.value[8].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
console.log(div.value.offsetHeight)
|
|
||||||
console.log(div.value.offsetWidth)
|
|
||||||
startpostion();
|
startpostion();
|
||||||
|
|
||||||
})
|
})
|
||||||
|
@ -284,62 +275,71 @@ export default defineComponent({
|
||||||
|
|
||||||
centor.value.x = 2160 / (div.value.offsetWidth + 25)
|
centor.value.x = 2160 / (div.value.offsetWidth + 25)
|
||||||
centor.value.y = 3840 / (div.value.offsetHeight + 25)
|
centor.value.y = 3840 / (div.value.offsetHeight + 25)
|
||||||
|
|
||||||
|
for (let index = 0; index < defaultninepostion.value.length; index++) {
|
||||||
|
defaultninepostion.value[index].x = ninepostion.value[index].x;
|
||||||
|
defaultninepostion.value[index].y = ninepostion.value[index].y;
|
||||||
|
defaultnine.value[index].x = nine.value[index].x
|
||||||
|
defaultnine.value[index].y = nine.value[index].y
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
///
|
///
|
||||||
const reset = (index: number) => {
|
const reset = (index: number) => {
|
||||||
if (index == 0) {
|
if (index == 0 || index == -1) {
|
||||||
nine.value[index].x = 0
|
nine.value[0].x = 0
|
||||||
nine.value[index].y = 1080
|
nine.value[0].y = 1080
|
||||||
ninepostion.value[0].x = 0
|
ninepostion.value[0].x = 0
|
||||||
ninepostion.value[0].y = 0
|
ninepostion.value[0].y = 0
|
||||||
}
|
}
|
||||||
if (index == 1) {
|
if (index == 1 || index == -1) {
|
||||||
nine.value[index].x = 960
|
nine.value[1].x = 960
|
||||||
nine.value[index].y = 1080
|
nine.value[1].y = 1080
|
||||||
ninepostion.value[1].x = div.value.offsetWidth / 2 - 25
|
ninepostion.value[1].x = div.value.offsetWidth / 2 - 25
|
||||||
ninepostion.value[1].y = 0
|
ninepostion.value[1].y = 0
|
||||||
}
|
}
|
||||||
if (index == 2) {
|
if (index == 2 || index == -1) {
|
||||||
nine.value[index].x = 1920
|
nine.value[2].x = 1920
|
||||||
nine.value[index].y = 1080
|
nine.value[2].y = 1080
|
||||||
ninepostion.value[2].x = div.value.offsetWidth - 25
|
ninepostion.value[2].x = div.value.offsetWidth - 25
|
||||||
ninepostion.value[2].y = 0
|
ninepostion.value[2].y = 0
|
||||||
}
|
}
|
||||||
if (index == 3) {
|
if (index == 3 || index == -1) {
|
||||||
nine.value[index].x = 0
|
nine.value[3].x = 0
|
||||||
nine.value[index].y = 540
|
nine.value[3].y = 540
|
||||||
ninepostion.value[3].x = 0
|
ninepostion.value[3].x = 0
|
||||||
ninepostion.value[3].y = div.value.offsetHeight / 2 - 8
|
ninepostion.value[3].y = div.value.offsetHeight / 2 - 8
|
||||||
}
|
}
|
||||||
if (index == 4) {
|
if (index == 4 || index == -1) {
|
||||||
nine.value[index].x = 960
|
nine.value[4].x = 960
|
||||||
nine.value[index].y = 540
|
nine.value[4].y = 540
|
||||||
ninepostion.value[4].x = div.value.offsetWidth / 2 - 25
|
ninepostion.value[4].x = div.value.offsetWidth / 2 - 25
|
||||||
ninepostion.value[4].y = div.value.offsetHeight / 2 - 8
|
ninepostion.value[4].y = div.value.offsetHeight / 2 - 8
|
||||||
}
|
}
|
||||||
if (index == 5) {
|
if (index == 5 || index == -1) {
|
||||||
nine.value[index].x = 1920
|
nine.value[5].x = 1920
|
||||||
nine.value[index].y = 540
|
nine.value[5].y = 540
|
||||||
|
|
||||||
ninepostion.value[5].x = div.value.offsetWidth - 25
|
ninepostion.value[5].x = div.value.offsetWidth - 25
|
||||||
ninepostion.value[5].y = div.value.offsetHeight / 2
|
ninepostion.value[5].y = div.value.offsetHeight / 2
|
||||||
}
|
}
|
||||||
if (index == 6) {
|
if (index == 6 || index == -1) {
|
||||||
nine.value[index].x = 0
|
nine.value[6].x = 0
|
||||||
nine.value[index].y = 0
|
nine.value[6].y = 0
|
||||||
|
|
||||||
ninepostion.value[6].x = 0
|
ninepostion.value[6].x = 0
|
||||||
ninepostion.value[6].y = div.value.offsetHeight - 25
|
ninepostion.value[6].y = div.value.offsetHeight - 25
|
||||||
}
|
}
|
||||||
if (index == 7) {
|
if (index == 7 || index == -1) {
|
||||||
nine.value[index].x = 960
|
nine.value[7].x = 960
|
||||||
nine.value[index].y = 0
|
nine.value[7].y = 0
|
||||||
ninepostion.value[7].x = div.value.offsetWidth / 2
|
ninepostion.value[7].x = div.value.offsetWidth / 2
|
||||||
ninepostion.value[7].y = div.value.offsetHeight - 25
|
ninepostion.value[7].y = div.value.offsetHeight - 25
|
||||||
}
|
}
|
||||||
if (index == 8) {
|
if (index == 8 || index == -1) {
|
||||||
nine.value[index].x = 1920
|
nine.value[8].x = 1920
|
||||||
nine.value[index].y = 0
|
nine.value[8].y = 0
|
||||||
|
|
||||||
ninepostion.value[8].x = div.value.offsetWidth - 25
|
ninepostion.value[8].x = div.value.offsetWidth - 25
|
||||||
ninepostion.value[8].y = div.value.offsetHeight - 25
|
ninepostion.value[8].y = div.value.offsetHeight - 25
|
||||||
|
@ -349,9 +349,24 @@ export default defineComponent({
|
||||||
isshowarray.value[index] = true
|
isshowarray.value[index] = true
|
||||||
}, 100);
|
}, 100);
|
||||||
}
|
}
|
||||||
|
const resetall = () => {
|
||||||
|
for (let index = 0; index < nine.value.length; index++) {
|
||||||
|
|
||||||
|
ninepostion.value[index].x = defaultninepostion.value[index].x;
|
||||||
|
ninepostion.value[index].y = defaultninepostion.value[index].y;
|
||||||
|
nine.value[index].x = defaultnine.value[index].x
|
||||||
|
nine.value[index].y = defaultnine.value[index].y
|
||||||
|
|
||||||
|
|
||||||
|
isshowarray.value[index] = false
|
||||||
|
setTimeout(() => {
|
||||||
|
isshowarray.value[index] = true
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
///
|
///
|
||||||
watch(() => nine.value[0], (newVal, oldVal) => {
|
watch(() => nine.value[0], (newVal, oldVal) => {
|
||||||
set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
|
||||||
///
|
///
|
||||||
if (!isactivearray.value[0]) {
|
if (!isactivearray.value[0]) {
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
@ -361,7 +376,7 @@ export default defineComponent({
|
||||||
///
|
///
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
watch(() => nine.value[1], (newVal, oldVal) => {
|
watch(() => nine.value[1], (newVal, oldVal) => {
|
||||||
set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 2, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 2, Number(newVal.x), Number(newVal.y));
|
||||||
///
|
///
|
||||||
if (!isactivearray.value[1]) {
|
if (!isactivearray.value[1]) {
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
@ -371,7 +386,7 @@ export default defineComponent({
|
||||||
///
|
///
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
watch(() => nine.value[2], (newVal, oldVal) => {
|
watch(() => nine.value[2], (newVal, oldVal) => {
|
||||||
set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 3, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 3, Number(newVal.x), Number(newVal.y));
|
||||||
if (!isactivearray.value[2]) {
|
if (!isactivearray.value[2]) {
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
@ -379,7 +394,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
watch(() => nine.value[3], (newVal, oldVal) => {
|
watch(() => nine.value[3], (newVal, oldVal) => {
|
||||||
set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 4, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 4, Number(newVal.x), Number(newVal.y));
|
||||||
if (!isactivearray.value[3]) {
|
if (!isactivearray.value[3]) {
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
@ -387,7 +402,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
watch(() => nine.value[4], (newVal, oldVal) => {
|
watch(() => nine.value[4], (newVal, oldVal) => {
|
||||||
set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 5, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 5, Number(newVal.x), Number(newVal.y));
|
||||||
if (!isactivearray.value[4]) {
|
if (!isactivearray.value[4]) {
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
@ -395,7 +410,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
watch(() => nine.value[5], (newVal, oldVal) => {
|
watch(() => nine.value[5], (newVal, oldVal) => {
|
||||||
set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 6, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 6, Number(newVal.x), Number(newVal.y));
|
||||||
if (!isactivearray.value[5]) {
|
if (!isactivearray.value[5]) {
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
@ -403,7 +418,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
watch(() => nine.value[6], (newVal, oldVal) => {
|
watch(() => nine.value[6], (newVal, oldVal) => {
|
||||||
set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 7, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 7, Number(newVal.x), Number(newVal.y));
|
||||||
if (!isactivearray.value[6]) {
|
if (!isactivearray.value[6]) {
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
@ -411,7 +426,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
watch(() => nine.value[7], (newVal, oldVal) => {
|
watch(() => nine.value[7], (newVal, oldVal) => {
|
||||||
set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 8, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 8, Number(newVal.x), Number(newVal.y));
|
||||||
if (!isactivearray.value[7]) {
|
if (!isactivearray.value[7]) {
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
@ -419,7 +434,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
watch(() => nine.value[8], (newVal, oldVal) => {
|
watch(() => nine.value[8], (newVal, oldVal) => {
|
||||||
set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 9, Number(newVal.x), Number(newVal.y));
|
if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 9, Number(newVal.x), Number(newVal.y));
|
||||||
if (!isactivearray.value[8]) {
|
if (!isactivearray.value[8]) {
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
@ -438,11 +453,17 @@ export default defineComponent({
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
isshowarray.value[index] = true
|
isshowarray.value[index] = true
|
||||||
}, 100);
|
}, 100);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
const save = () => {
|
||||||
|
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
model,
|
model,
|
||||||
options,
|
options,
|
||||||
|
save,
|
||||||
nine,
|
nine,
|
||||||
moveHandler_1,
|
moveHandler_1,
|
||||||
moveHandler_2,
|
moveHandler_2,
|
||||||
|
@ -454,6 +475,7 @@ export default defineComponent({
|
||||||
moveHandler_8,
|
moveHandler_8,
|
||||||
moveHandler_9,
|
moveHandler_9,
|
||||||
div,
|
div,
|
||||||
|
resetall,
|
||||||
ninepostion,
|
ninepostion,
|
||||||
reset,
|
reset,
|
||||||
isshowarray,
|
isshowarray,
|
||||||
|
|
|
@ -1,19 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<q-dialog persistent v-model="show_dialog" @keydown="
|
<q-dialog
|
||||||
(evt) => {
|
persistent
|
||||||
|
v-model="show_dialog"
|
||||||
|
@keydown="
|
||||||
|
(evt:any) => {
|
||||||
if (evt.keyCode == 27) {
|
if (evt.keyCode == 27) {
|
||||||
show_dialog = false;
|
show_dialog = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
">
|
"
|
||||||
|
>
|
||||||
<q-card class="overflow-hidden" style="max-width: 90vw;height: 90vh;">
|
<q-card class="overflow-hidden" style="max-width: 90vw; height: 90vh">
|
||||||
<q-form>
|
<q-form>
|
||||||
<!-- @submit="onSubmit" -->
|
<!-- @submit="onSubmit" -->
|
||||||
<q-card-section class="q-ma-none q-pa-sm">
|
<q-card-section class="q-ma-none q-pa-sm">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto text-h6">
|
<div class="col-auto text-h6">
|
||||||
{{ $t('fusion settings') }}
|
{{ $t("fusion settings") }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-space />
|
<q-space />
|
||||||
|
@ -22,34 +25,56 @@
|
||||||
{{ $t("close") }}
|
{{ $t("close") }}
|
||||||
</q-tooltip>
|
</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<div>
|
<div></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<!-- height: 80vh -->
|
<!-- height: 80vh -->
|
||||||
<q-card-section class="scroll" style="width: 90vw;">
|
<q-card-section class="scroll" style="width: 90vw">
|
||||||
<div class="row">
|
<div class="row" style="border: 1px solid;text-align: center;">
|
||||||
<div class="col-3">
|
<div class="col-3" style="border-right: 1px solid;">
|
||||||
<p class="text-center">{{$t('Projector')}}</p>
|
<p class="text-center">{{ $t("Projector") }}</p>
|
||||||
<projector-item class="w-100" :llabel="$t('Projector')+'1'" :lvalue="'0/0'"></projector-item>
|
<projector-item
|
||||||
<projector-item class="w-100" :llabel="$t('Projector')+'2'" :lvalue="'0/1'"></projector-item>
|
class="w-100"
|
||||||
|
:llabel="$t('Projector') + '1'"
|
||||||
|
:lvalue="'0/0'"
|
||||||
|
></projector-item>
|
||||||
|
<projector-item
|
||||||
|
class="w-100"
|
||||||
|
:llabel="$t('Projector') + '2'"
|
||||||
|
:lvalue="'0/1'"
|
||||||
|
></projector-item>
|
||||||
|
<div class="col-12" style="text-align: center">
|
||||||
|
是否启用混合<q-checkbox v-model="EnableBlending" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-9">
|
<div class="col-9">
|
||||||
<div class="q-ta-md">
|
<div class="q-ta-md">
|
||||||
<q-btn-toggle :disable="$store.state.EnableBlending" no-caps v-model="options" toggle-color="primary" :options="[
|
<q-btn-toggle
|
||||||
|
:disable="!$store.state.EnableBlending"
|
||||||
|
no-caps
|
||||||
|
v-model="options"
|
||||||
|
toggle-color="primary"
|
||||||
|
:options="[
|
||||||
{ label: $t('FusionLocale'), value: 'FusionLocale' },
|
{ label: $t('FusionLocale'), value: 'FusionLocale' },
|
||||||
{ label: $t('FourPointCalibration'), value: 'FourPointCalibration' },
|
{
|
||||||
{ label: $t('SurfaceCorrection'), value: 'SurfaceCorrection' },
|
label: $t('FourPointCalibration'),
|
||||||
{ label: $t('DensityCorrection'), value: 'DensityCorrection' },
|
value: 'FourPointCalibration',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: $t('SurfaceCorrection'),
|
||||||
|
value: 'SurfaceCorrection',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: $t('DensityCorrection'),
|
||||||
|
value: 'DensityCorrection',
|
||||||
|
},
|
||||||
{ label: $t('GridSettings'), value: 'GridSettings' },
|
{ label: $t('GridSettings'), value: 'GridSettings' },
|
||||||
]" />
|
]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style="min-height:72vh ;">
|
<div style="min-height: 72vh">
|
||||||
<component :is="options" />
|
<component :is="options" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -59,7 +84,13 @@
|
||||||
<q-separator />
|
<q-separator />
|
||||||
|
|
||||||
<q-card-actions align="right">
|
<q-card-actions align="right">
|
||||||
<q-btn flat :label="$t('Cancel')" no-caps color="primary" v-close-popup />
|
<q-btn
|
||||||
|
flat
|
||||||
|
:label="$t('Cancel')"
|
||||||
|
no-caps
|
||||||
|
color="primary"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
</q-card-actions>
|
</q-card-actions>
|
||||||
</q-form>
|
</q-form>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
@ -70,6 +101,7 @@
|
||||||
.header_label {
|
.header_label {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w100 {
|
.w100 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -109,9 +141,10 @@ export default defineComponent({
|
||||||
FourPointCalibration,
|
FourPointCalibration,
|
||||||
GridSettings,
|
GridSettings,
|
||||||
SurfaceCorrection,
|
SurfaceCorrection,
|
||||||
DensityCorrection
|
DensityCorrection,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
|
let set = GlobalData.getInstance().getCurrentClient();
|
||||||
let $store = useStore();
|
let $store = useStore();
|
||||||
let $q = useQuasar();
|
let $q = useQuasar();
|
||||||
let $t = useI18n();
|
let $t = useI18n();
|
||||||
|
@ -121,27 +154,33 @@ export default defineComponent({
|
||||||
const showDialog = async () => {
|
const showDialog = async () => {
|
||||||
show_dialog.value = true;
|
show_dialog.value = true;
|
||||||
};
|
};
|
||||||
|
const EnableBlending = ref(false);
|
||||||
let optionsstr = ref();
|
let optionsstr = ref();
|
||||||
optionsstr.value="FusionLocale"
|
optionsstr.value = "FusionLocale";
|
||||||
const options = computed({
|
const options = computed({
|
||||||
get() {
|
get() {
|
||||||
return optionsstr.value;
|
return optionsstr.value;
|
||||||
},
|
},
|
||||||
set(newValue) {
|
set(newValue) {
|
||||||
optionsstr.value = newValue;
|
optionsstr.value = newValue;
|
||||||
console.log(newValue)
|
},
|
||||||
}
|
});
|
||||||
})
|
watch(
|
||||||
|
() => EnableBlending,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
$store.commit("setEnableBlending", newVal.value);
|
||||||
|
set?.EnableBlending(newVal.value);
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
let data = ref({});
|
let data = ref({});
|
||||||
return {
|
return {
|
||||||
show_dialog,
|
show_dialog,
|
||||||
options,
|
options,
|
||||||
copyToClipboard,
|
copyToClipboard,
|
||||||
showDialog,
|
showDialog,
|
||||||
|
EnableBlending,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -419,7 +419,9 @@ export default {
|
||||||
"Right fusion Band Parameters":"Right Fusion Band Parameters",
|
"Right fusion Band Parameters":"Right Fusion Band Parameters",
|
||||||
"Set the fusion band width":"Set the fusion band width",
|
"Set the fusion band width":"Set the fusion band width",
|
||||||
"Please enter a number":"Please enter a number",
|
"Please enter a number":"Please enter a number",
|
||||||
"Please enter 0-100":"Please enter 0-100",
|
"Please enter 0-100":"Please enter 0-your differentiation rate",
|
||||||
"Set Fusion Band Parameters":"Set Fusion Band Parameters",
|
"Set Fusion Band Parameters":"Set Fusion Band Parameters",
|
||||||
"Projector":"Projector"
|
"Projector":"Projector",
|
||||||
|
"resetall":"reset all",
|
||||||
|
"save config":"save config"
|
||||||
};
|
};
|
||||||
|
|
|
@ -687,7 +687,9 @@ export default {
|
||||||
"Right fusion Band Parameters":"右融合带参数",
|
"Right fusion Band Parameters":"右融合带参数",
|
||||||
"Set the fusion band width":"设置融合带宽度",
|
"Set the fusion band width":"设置融合带宽度",
|
||||||
"Please enter a number":"请输入数字",
|
"Please enter a number":"请输入数字",
|
||||||
"Please enter 0-100":"请输入 0-100",
|
"Please enter 0-100":"请输入 0-你的分辨率",
|
||||||
"Set Fusion Band Parameters":"设置融合带参数",
|
"Set Fusion Band Parameters":"设置融合带参数",
|
||||||
"Projector":"投影机"
|
"Projector":"投影机",
|
||||||
|
"resetall":"重置所有",
|
||||||
|
"save config":"保存配置"
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,24 +0,0 @@
|
||||||
function getElementLeft(element) {
|
|
||||||
var actualLeft = element.offsetLeft;
|
|
||||||
var current = element.offsetParent;
|
|
||||||
|
|
||||||
while (current !== null) {
|
|
||||||
actualLeft += current.offsetLeft;
|
|
||||||
current = current.offsetParent;
|
|
||||||
}
|
|
||||||
|
|
||||||
return actualLeft;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getElementTop(element) {
|
|
||||||
var actualTop = element.offsetTop;
|
|
||||||
var current = element.offsetParent;
|
|
||||||
|
|
||||||
while (current !== null) {
|
|
||||||
actualTop += current.offsetTop;
|
|
||||||
current = current.offsetParent;
|
|
||||||
}
|
|
||||||
|
|
||||||
return actualTop;
|
|
||||||
}
|
|
||||||
export {getElementLeft,getElementTop}
|
|
Loading…
Reference in New Issue