主界面完成
This commit is contained in:
parent
c692cab4c9
commit
2f0f1fdfa2
|
|
@ -0,0 +1,82 @@
|
||||||
|
<template>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-2 q-pa-xl"></div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl">
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[0]" label="" lazy-rules />
|
||||||
|
</div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl">
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[1]" label="" lazy-rules />
|
||||||
|
</div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl">
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[2]" label="" lazy-rules />
|
||||||
|
</div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl"> </div>
|
||||||
|
<div class="col-2 q-pa-xl">
|
||||||
|
<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-xl">
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[4]" label="" lazy-rules />
|
||||||
|
</div>
|
||||||
|
<div class="col-2 q-pa-xl">
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[5]" label="" lazy-rules />
|
||||||
|
</div>
|
||||||
|
<div class="col-2 q-pa-xl">
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[6]" label="" lazy-rules />
|
||||||
|
</div>
|
||||||
|
<div class="col-2 q-pa-xl">
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[7]" label="" lazy-rules />
|
||||||
|
</div>
|
||||||
|
<div class="col-2 q-pa-xl">
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[8]" label="" lazy-rules />
|
||||||
|
</div>
|
||||||
|
<div class="col-2 q-pa-xl">
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[9]" label="" lazy-rules />
|
||||||
|
</div>
|
||||||
|
<!-- ?? -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref, watch, computed, defineProps, withDefaults, reactive} from "vue";
|
||||||
|
import { useStore } from "src/store";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "ComponentDensityCorrection",
|
||||||
|
setup() {
|
||||||
|
let $store = useStore();
|
||||||
|
let $t = useI18n();
|
||||||
|
const value=reactive([0,0,0,0,0,0,0,0,0,0,0]);
|
||||||
|
let model = ref(null);
|
||||||
|
let options = ref(['10', '20', '30', '40', '50']);
|
||||||
|
return {
|
||||||
|
model,
|
||||||
|
options,
|
||||||
|
value
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,309 @@
|
||||||
|
<template>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-2">
|
||||||
|
<q-input filled type="number" class="q-pt-md" style="text-align: center;" :dense="true" @focus="isactivearray[0] = false"
|
||||||
|
v-model="four[0].x" label="x" lazy-rules />
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[0] = false"
|
||||||
|
v-model="four[0].y" label="y" lazy-rules />
|
||||||
|
<q-btn color="white" @click="reset(0)" text-color="black" :label="$t('reset')" />
|
||||||
|
</div>
|
||||||
|
<div class="col-8">
|
||||||
|
<div ref="div" style="background-color: #7fffd4;height: 60vh;">
|
||||||
|
<div style="position:absolute;">
|
||||||
|
<vue3ResizeDrag v-if="isshowarray[0]" :isActive="isactivearray[0]" @mousedown="activeMouseDown(0)"
|
||||||
|
@mouseUpHandler="mouseUpHandler(0)" :w="30" :h="20" :x="x1" :y="y1" :isResizable="false"
|
||||||
|
@moveHandler="moveHandler_1"><span>{{$t('point')}}1</span>
|
||||||
|
</vue3ResizeDrag>
|
||||||
|
<vue3ResizeDrag v-if="isshowarray[1]" :isActive="isactivearray[1]" @mousedown="activeMouseDown(1)"
|
||||||
|
@mouseUpHandler="mouseUpHandler(1)" :w="30" :h="20" :x="point2.x" :y="point2.y"
|
||||||
|
:isResizable="false" @moveHandler="moveHandler_2"><span>{{$t('point')}}2</span> </vue3ResizeDrag>
|
||||||
|
<vue3ResizeDrag v-if="isshowarray[2]" :isActive="isactivearray[2]" @mousedown="activeMouseDown(2)"
|
||||||
|
@mouseUpHandler="mouseUpHandler(2)" :w="30" :h="20" :x="point3.x" :y="point3.y"
|
||||||
|
:isResizable="false" @moveHandler="moveHandler_3"><span>{{$t('point')}}3</span> </vue3ResizeDrag>
|
||||||
|
<vue3ResizeDrag v-if="isshowarray[3]" :isActive="isactivearray[3]" @mousedown="activeMouseDown(3)"
|
||||||
|
@mouseUpHandler="mouseUpHandler(3)" :w="30" :h="20" :x="point4.x" :y="point4.y"
|
||||||
|
:isResizable="false" @moveHandler="moveHandler_4"><span>{{$t('point')}}4</span> </vue3ResizeDrag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[2] = false"
|
||||||
|
v-model="four[2].x" label="x" lazy-rules />
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[2] = false"
|
||||||
|
v-model="four[2].y" label="y" lazy-rules />
|
||||||
|
<q-btn color="white" @click="reset(2)" text-color="black" :label="$t('reset')" />
|
||||||
|
</div>
|
||||||
|
<div class="col-8">
|
||||||
|
<!-- <div style="background-color: #7fffd4;height: 100%;">
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[3] = false"
|
||||||
|
v-model="four[3].x" label="x" lazy-rules />
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[3] = false"
|
||||||
|
v-model="four[3].y" label="y" lazy-rules />
|
||||||
|
<q-btn color="white" @click="reset(3)" text-color="black" :label="$t('reset')" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <div class="col-6 q-pa-xl">
|
||||||
|
<q-btn color="white" text-color="black" label="重置" />
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script lang="ts">
|
||||||
|
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 { defineComponent, ref, watch, computed, defineProps, withDefaults, onMounted, reactive } from "vue";
|
||||||
|
import { useStore } from "src/store";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import ClientConnection from "src/common/ClientConnection"
|
||||||
|
import GlobalData from "src/common/GlobalData";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "ComponentFourPointCalibration",
|
||||||
|
components: {
|
||||||
|
vue3ResizeDrag
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
let $store = useStore();
|
||||||
|
let $t = useI18n();
|
||||||
|
const setIndexProjector = () => {
|
||||||
|
console.log($store.state.selected_projector);
|
||||||
|
};
|
||||||
|
let set = GlobalData.getInstance().getCurrentClient();
|
||||||
|
const for_1 = computed(() => { })
|
||||||
|
let four = ref([{ x: 0, y: 1080 }, { x: 1920, y: 1080 }, { x: 0, y: 0 }, { x: 1920, 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 div2: any = ref(null);
|
||||||
|
let options = ref(['10', '20', '30', '40', '50']);
|
||||||
|
let Proportion = ref({ x: 0, y: 0 });
|
||||||
|
let point1 = reactive({ x: 0, y: 0 });
|
||||||
|
let point2 = ref({ x: 0, y: 0 });
|
||||||
|
let point3 = ref({ x: 0, y: 0 });
|
||||||
|
let point4 = ref({ x: 0, y: 0 });
|
||||||
|
const isshowarray = ref([true, true, true, true])
|
||||||
|
const isactivearray = ref([true, true, true, true])
|
||||||
|
const x1 = ref(0);
|
||||||
|
const y1 = ref(0);
|
||||||
|
const { offset } = dom
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const activeMouseDown = (index: number) => {
|
||||||
|
isactivearray.value[index] = true
|
||||||
|
}
|
||||||
|
const mouseUpHandler = (index: number) => {
|
||||||
|
isactivearray.value[index] = false
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
setpoa();
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
const setpoa = () => {
|
||||||
|
point1.x = 0
|
||||||
|
point1.y = 0
|
||||||
|
|
||||||
|
x1.value = 0
|
||||||
|
y1.value = 0
|
||||||
|
|
||||||
|
point2.value.x = div.value.offsetWidth - 25
|
||||||
|
point2.value.y = 0
|
||||||
|
|
||||||
|
point3.value.x = 0
|
||||||
|
point3.value.y = div.value.offsetHeight - 25
|
||||||
|
|
||||||
|
point4.value.x = div.value.offsetWidth - 25
|
||||||
|
point4.value.y = div.value.offsetHeight - 25
|
||||||
|
|
||||||
|
|
||||||
|
fourpostion.value[0].x = 0
|
||||||
|
fourpostion.value[0].y = 0
|
||||||
|
|
||||||
|
fourpostion.value[1].x = div.value.offsetWidth - 25
|
||||||
|
fourpostion.value[1].y = 0
|
||||||
|
|
||||||
|
fourpostion.value[2].x = 0
|
||||||
|
fourpostion.value[2].y = div.value.offsetHeight - 25
|
||||||
|
|
||||||
|
fourpostion.value[3].x = div.value.offsetWidth - 25
|
||||||
|
fourpostion.value[3].y = div.value.offsetHeight - 25
|
||||||
|
|
||||||
|
Proportion.value.x = 1920 / (div.value.offsetWidth - 25)
|
||||||
|
Proportion.value.y = 1080 / (div.value.offsetHeight - 25)
|
||||||
|
}
|
||||||
|
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 (!isactivearray.value[0]) {
|
||||||
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
x1.value = x
|
||||||
|
y1.value = y
|
||||||
|
isshowarray.value[0] = false
|
||||||
|
isactivearray.value[0] = false
|
||||||
|
setTimeout(() => {
|
||||||
|
isshowarray.value[0] = true
|
||||||
|
}, 100);
|
||||||
|
///
|
||||||
|
}
|
||||||
|
}, { deep: true })
|
||||||
|
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 (!isactivearray.value[1]) {
|
||||||
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
point2.value.x = x
|
||||||
|
point2.value.y = y
|
||||||
|
isshowarray.value[1] = false
|
||||||
|
isactivearray.value[1] = false
|
||||||
|
setTimeout(() => {
|
||||||
|
isshowarray.value[1] = true
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
///
|
||||||
|
}, { deep: true })
|
||||||
|
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 (!isactivearray.value[2]) {
|
||||||
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
let y = Math.ceil((1080 / Proportion.value.y) - (newVal.y / Proportion.value.y));
|
||||||
|
|
||||||
|
point3.value.x = x
|
||||||
|
point3.value.y = y
|
||||||
|
isshowarray.value[2] = false
|
||||||
|
//isactivearray.value[2]=false
|
||||||
|
setTimeout(() => {
|
||||||
|
isshowarray.value[2] = true
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
///
|
||||||
|
}, { deep: true })
|
||||||
|
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 (!isactivearray.value[3]) {
|
||||||
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
let y = Math.ceil((1080 / Proportion.value.y) - (newVal.y / Proportion.value.y));
|
||||||
|
|
||||||
|
point4.value.x = x
|
||||||
|
point4.value.y = y
|
||||||
|
isshowarray.value[3] = false
|
||||||
|
//isactivearray.value[2]=false
|
||||||
|
setTimeout(() => {
|
||||||
|
isshowarray.value[3] = true
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
///
|
||||||
|
}, { deep: true })
|
||||||
|
|
||||||
|
///
|
||||||
|
const reset = (index: number) => {
|
||||||
|
if (index == 0) {
|
||||||
|
console.log(x1.value + "," + y1.value)
|
||||||
|
four.value[index].x = 0
|
||||||
|
four.value[index].y = 1080
|
||||||
|
point1.x = 0
|
||||||
|
point1.y = 0
|
||||||
|
x1.value = 0
|
||||||
|
y1.value = 0
|
||||||
|
}
|
||||||
|
if (index == 1) {
|
||||||
|
four.value[index].x = 1920
|
||||||
|
four.value[index].y = 1080
|
||||||
|
fourpostion.value[index].x = div.value.offsetWidth - 25
|
||||||
|
fourpostion.value[index].y = 0
|
||||||
|
}
|
||||||
|
if (index == 2) {
|
||||||
|
four.value[index].x = 0
|
||||||
|
four.value[index].y = 0
|
||||||
|
fourpostion.value[index].x = 0
|
||||||
|
fourpostion.value[index].y = div.value.offsetHeight - 25
|
||||||
|
}
|
||||||
|
if (index == 3) {
|
||||||
|
four.value[index].x = 1920
|
||||||
|
four.value[index].y = 0
|
||||||
|
fourpostion.value[index].x = div.value.offsetWidth - 25
|
||||||
|
fourpostion.value[index].y = div.value.offsetHeight - 25
|
||||||
|
}
|
||||||
|
isshowarray.value[index] = false
|
||||||
|
setTimeout(() => {
|
||||||
|
isshowarray.value[index] = true
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const moveHandler_1 = (data: any) => {
|
||||||
|
let x = Math.ceil((data.left - fourpostion.value[0].x) * Proportion.value.x + 0);
|
||||||
|
let y = Math.ceil((1080 - data.top * Proportion.value.y - fourpostion.value[0].y));
|
||||||
|
|
||||||
|
four.value[0].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
|
||||||
|
four.value[0].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
|
||||||
|
isactivearray.value[0] = true
|
||||||
|
}
|
||||||
|
const moveHandler_2 = (data: any) => {
|
||||||
|
//y0 x1920
|
||||||
|
let x = Math.ceil((data.left - fourpostion.value[1].x) * Proportion.value.x + 1920);
|
||||||
|
let y = Math.ceil((1080 - data.top * Proportion.value.y - fourpostion.value[1].y));
|
||||||
|
four.value[1].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
|
||||||
|
four.value[1].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
|
||||||
|
//console.log("x :"+x+" y:"+y)
|
||||||
|
}
|
||||||
|
const moveHandler_3 = (data: any) => {
|
||||||
|
let x = Math.ceil((data.left - fourpostion.value[2].x) * Proportion.value.x);
|
||||||
|
let y = Math.abs(Math.ceil((data.top - fourpostion.value[2].y) * Proportion.value.y));
|
||||||
|
four.value[2].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
|
||||||
|
four.value[2].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
|
||||||
|
console.log("x :" + x + " y:" + y)
|
||||||
|
//console.log("x :" + data.left + " y:" + (1370-data.top));
|
||||||
|
}
|
||||||
|
const moveHandler_4 = (data: any) => {
|
||||||
|
let x = Math.ceil((data.left - fourpostion.value[3].x) * Proportion.value.x + 1920);
|
||||||
|
let y = Math.abs(Math.ceil((data.top - fourpostion.value[3].y) * Proportion.value.y));
|
||||||
|
four.value[3].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
|
||||||
|
four.value[3].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
|
||||||
|
//console.log("x :"+x+" y:"+y)
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
div,
|
||||||
|
div2,
|
||||||
|
options,
|
||||||
|
fourpostion,
|
||||||
|
reset,
|
||||||
|
moveHandler_1,
|
||||||
|
moveHandler_2,
|
||||||
|
moveHandler_3,
|
||||||
|
moveHandler_4,
|
||||||
|
four,
|
||||||
|
point1,
|
||||||
|
point2,
|
||||||
|
point3,
|
||||||
|
point4,
|
||||||
|
x1,
|
||||||
|
y1,
|
||||||
|
isshowarray,
|
||||||
|
isactivearray,
|
||||||
|
activeMouseDown,
|
||||||
|
mouseUpHandler
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,334 @@
|
||||||
|
<template>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-8 boder">
|
||||||
|
<p class="text-center">{{$t('Set the fusion band width')}}</p>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4 offset-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<q-toggle
|
||||||
|
class="float-right"
|
||||||
|
v-model="array2[0].isshow"
|
||||||
|
label=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
filled
|
||||||
|
type="number"
|
||||||
|
@focus="group = 0"
|
||||||
|
v-model="array2[0].value"
|
||||||
|
:label="$t('upper fusion zone parameters')"
|
||||||
|
lazy-rules
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
(val !== null && val !== '') || $t('Please enter a number'),
|
||||||
|
(val) =>
|
||||||
|
(val > -1 && val < 100) || $t('Please enter 0-100'),
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<q-toggle
|
||||||
|
class="float-right"
|
||||||
|
v-model="array2[1].isshow"
|
||||||
|
label=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
filled
|
||||||
|
type="number"
|
||||||
|
@focus="group = 1"
|
||||||
|
v-model="array2[1].value"
|
||||||
|
:label="$t('Left fusion Band Parameters')"
|
||||||
|
lazy-rules
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
(val !== null && val !== '') || $t('Please enter a number'),
|
||||||
|
(val) =>
|
||||||
|
(val > -1 && val < 100) || $t('Please enter 0-100'),
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<q-toggle
|
||||||
|
class="float-right"
|
||||||
|
v-model="array2[2].isshow"
|
||||||
|
label=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
filled
|
||||||
|
type="number"
|
||||||
|
@focus="group = 2"
|
||||||
|
v-model="array2[2].value"
|
||||||
|
:label="$t('Right fusion Band Parameters')"
|
||||||
|
lazy-rules
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
(val !== null && val !== '') || $t('Please enter a number'),
|
||||||
|
(val) =>
|
||||||
|
(val > -1 && val < 100) || $t('Please enter 0-100'),
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4 offset-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<q-toggle
|
||||||
|
class="float-right"
|
||||||
|
v-model="array2[3].isshow"
|
||||||
|
label=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
filled
|
||||||
|
type="number"
|
||||||
|
@focus="group = 3"
|
||||||
|
v-model="array2[3].value"
|
||||||
|
:label="$t('Lower fusion Zone Parameters')"
|
||||||
|
lazy-rules
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
(val !== null && val !== '') || $t('Please enter a number'),
|
||||||
|
(val) =>
|
||||||
|
(val > -1 && val < 100) || $t('Please enter 0-100'),
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="!(group == 4) && array2[group].isshow" class="col-4">
|
||||||
|
<p class="text-center">{{$t('Set Fusion Band Parameters')}}</p>
|
||||||
|
<div style="display: flex; justify-content: space-evenly">
|
||||||
|
<div>
|
||||||
|
<q-slider
|
||||||
|
v-model="array[group].alpha"
|
||||||
|
:min="0.0"
|
||||||
|
@change="chang('alpha')"
|
||||||
|
:max="1"
|
||||||
|
:step="0.01"
|
||||||
|
color="green"
|
||||||
|
vertical
|
||||||
|
reverse
|
||||||
|
label-always
|
||||||
|
/>
|
||||||
|
<p class="text-center">alpha</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<q-slider
|
||||||
|
v-model="array[group].p"
|
||||||
|
:min="0"
|
||||||
|
@change="chang('p')"
|
||||||
|
:max="2.5"
|
||||||
|
:step="0.01"
|
||||||
|
color="green"
|
||||||
|
vertical
|
||||||
|
reverse
|
||||||
|
label-always
|
||||||
|
/>
|
||||||
|
<p class="text-center">p</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<q-slider
|
||||||
|
v-model="array[group].gamma"
|
||||||
|
:min="0"
|
||||||
|
@change="chang('gamma')"
|
||||||
|
:max="2.5"
|
||||||
|
:step="0.01"
|
||||||
|
color="green"
|
||||||
|
vertical
|
||||||
|
reverse
|
||||||
|
label-always
|
||||||
|
/>
|
||||||
|
<p class="text-center">gamma</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="q-pa-lg text-center">
|
||||||
|
<q-option-group v-model="group" :options="options" color="primary" />
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.boder {
|
||||||
|
border: 2px solid #0000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {
|
||||||
|
defineComponent,
|
||||||
|
ref,
|
||||||
|
watch,
|
||||||
|
computed,
|
||||||
|
defineProps,
|
||||||
|
withDefaults,
|
||||||
|
reactive,
|
||||||
|
} from "vue";
|
||||||
|
import { useStore } from "src/store";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import GlobalData from "src/common/GlobalData";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "ComponentFusionLocale",
|
||||||
|
setup() {
|
||||||
|
let set = GlobalData.getInstance().getCurrentClient();
|
||||||
|
let $store = useStore();
|
||||||
|
let $t = useI18n();
|
||||||
|
const age = ref(0);
|
||||||
|
const standard = ref(0);
|
||||||
|
const group = ref(4);
|
||||||
|
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 },
|
||||||
|
{ alpha: 0, p: 0, gamma: 0 },
|
||||||
|
]);
|
||||||
|
let array2 = reactive([
|
||||||
|
{ isshow: false, value: 0 },
|
||||||
|
{ isshow: false, value: 0 },
|
||||||
|
{ isshow: false, value: 0 },
|
||||||
|
{ isshow: false, value: 0 },
|
||||||
|
]);
|
||||||
|
const options = ref([
|
||||||
|
{
|
||||||
|
label: "上融合带参数",
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "左融合带参数",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "右融合带参数",
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "下融合带参数",
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const accept = ref(false);
|
||||||
|
const text = ref("");
|
||||||
|
const model = computed({
|
||||||
|
get() {
|
||||||
|
return $store.state.selected_projector;
|
||||||
|
},
|
||||||
|
set(newValue) {
|
||||||
|
$store.commit("setSelectedProjector", newValue);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const setIndexProjector = () => {
|
||||||
|
console.log($store.state.selected_projector);
|
||||||
|
};
|
||||||
|
const chang = (type: string) => {
|
||||||
|
if (type == "alpha") {
|
||||||
|
set?.setBlendingAlphaParam(
|
||||||
|
$store.getters.GetTheCurrentlySelectedCamera[0],
|
||||||
|
$store.getters.GetTheCurrentlySelectedCamera[1],
|
||||||
|
group.value,
|
||||||
|
array.value[group.value].alpha
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (type == "p") {
|
||||||
|
set?.setBlendingPowerParam(
|
||||||
|
$store.getters.GetTheCurrentlySelectedCamera[0],
|
||||||
|
$store.getters.GetTheCurrentlySelectedCamera[1],
|
||||||
|
group.value,
|
||||||
|
array.value[group.value].p
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (type == "gamma") {
|
||||||
|
set?.setBlendingGammaParam(
|
||||||
|
$store.getters.GetTheCurrentlySelectedCamera[0],
|
||||||
|
$store.getters.GetTheCurrentlySelectedCamera[1],
|
||||||
|
group.value,
|
||||||
|
array.value[group.value].gamma
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//console.log("giao")
|
||||||
|
};
|
||||||
|
watch(
|
||||||
|
() => array2[0].value,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
//set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
|
||||||
|
///
|
||||||
|
///
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => array2[1].value,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
//set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
|
||||||
|
///
|
||||||
|
///
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => array2[2].value,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
//set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
|
||||||
|
///
|
||||||
|
///
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => array2[3].value,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
//set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
|
||||||
|
///
|
||||||
|
///
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
model,
|
||||||
|
age,
|
||||||
|
accept,
|
||||||
|
standard,
|
||||||
|
options,
|
||||||
|
group,
|
||||||
|
text,
|
||||||
|
array,
|
||||||
|
$t,
|
||||||
|
chang,
|
||||||
|
array2,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
<template>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4"></div>
|
||||||
|
<div class="col-4 q-pt-sm"><q-select outlined v-model="model[0]" :options="options" :dense="true"
|
||||||
|
:options-dense="true" label="单元行数" /> </div><q-checkbox v-model="RowsColumns[0]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4"></div>
|
||||||
|
<div class="col-4 q-pt-sm"><q-select outlined v-model="model[1]" :options="options" :dense="true"
|
||||||
|
:options-dense="true" label="单元列数" /> </div><q-checkbox v-model="RowsColumns[1]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row" style="min-height: 40px;">
|
||||||
|
<div class="col-4"></div>
|
||||||
|
<div class="col-4 q-pt-sm"><div class="row"><div class="col-4"><span>网格颜色</span></div><div class="col-8" @click="isshowhex=true;index=0" :style="{'background-color':color[0]}"></div></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row" style="min-height: 40px;">
|
||||||
|
<div class="col-4"></div>
|
||||||
|
<div class="col-4 q-pt-sm"><div class="row"><div class="col-4"><span>背景颜色</span></div><div class="col-8" @click="isshowhex=true;index=1" :style="{'background-color':color[1]}"></div></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row" style="min-height: 40px;">
|
||||||
|
<div class="col-4"></div>
|
||||||
|
<div class="col-4 q-pt-sm"><div class="row"><div class="col-4"><span>中心线颜色</span></div><div class="col-8" @click="isshowhex=true;index=2" :style="{'background-color':color[2]}"></div></div></div><q-checkbox v-model="RowsColumns[2]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row" style="min-height: 40px;">
|
||||||
|
<div class="col-4"></div>
|
||||||
|
<div class="col-4 q-pt-sm"><div class="row"><div class="col-4"><span>中心圆颜色</span></div><div class="col-8" @click="isshowhex=true;index=3" :style="{'background-color':color[3]}"></div></div></div><q-checkbox v-model="RowsColumns[3]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="isshowhex" style="margin: 0 auto;text-align: center;"><q-color no-header-tabs no-footer v-model="color[index]" class="my-picker" /> <q-btn style="margin-top: 0.5rem;" color="white" @click="isshowhex=false" class=" q-pt-sm" text-color="black" label="提交" /></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
|
||||||
|
import { defineComponent, ref,reactive } from "vue";
|
||||||
|
import { useStore } from "src/store";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "ComponentGridSettings",
|
||||||
|
components:{
|
||||||
|
vue3ResizeDrag
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
let $store = useStore();
|
||||||
|
let $t = useI18n();
|
||||||
|
const RowsColumns=reactive([false,false,false,false]);
|
||||||
|
const hex=ref("")
|
||||||
|
const isshowhex=ref(false);
|
||||||
|
const index=ref(0);
|
||||||
|
const color=reactive(["#000","#000","#000","#000"]);
|
||||||
|
let model = reactive([10,10]);
|
||||||
|
let options = ref(['10', '20', '30', '40', '50']);
|
||||||
|
return {
|
||||||
|
model,
|
||||||
|
options,
|
||||||
|
hex,
|
||||||
|
RowsColumns,
|
||||||
|
isshowhex,
|
||||||
|
index,
|
||||||
|
color,
|
||||||
|
$t,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<template>
|
||||||
|
<div class="q-pa-xs text-center">
|
||||||
|
<q-btn-toggle @click="" v-model="model" toggle-color="primary" :options="[
|
||||||
|
{ label: llabel, value: lvalue },
|
||||||
|
]" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref, watch, computed, defineProps, withDefaults, } from "vue";
|
||||||
|
import { useStore } from "src/store";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "ComponentProjectorItem",
|
||||||
|
props: {
|
||||||
|
llabel: {
|
||||||
|
type: String,
|
||||||
|
default: 'Projector'
|
||||||
|
},
|
||||||
|
lvalue: {
|
||||||
|
type: String,
|
||||||
|
default: 'Projector'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
|
||||||
|
let $store = useStore();
|
||||||
|
const model = computed({
|
||||||
|
get() {
|
||||||
|
return $store.state.selected_projector;
|
||||||
|
},
|
||||||
|
set(newValue) {
|
||||||
|
$store.commit('setSelectedProjector',newValue);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const setIndexProjector=()=>{
|
||||||
|
console.log($store.state.selected_projector);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
model,
|
||||||
|
...props
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,465 @@
|
||||||
|
<template>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6"></div>
|
||||||
|
<div class="col-3"><q-input filled type="number" class="q-pt-md" @focus="isactivearray[0] = false"
|
||||||
|
:dense="true" v-model="nine[0].x" label="x" lazy-rules />
|
||||||
|
<q-input filled type="number" class="q-pt-md" @focus="isactivearray[0] = false" :dense="true"
|
||||||
|
v-model="nine[0].y" label="y" lazy-rules />
|
||||||
|
<q-btn color="white" @click="reset(0)" text-color="black" :label="$t('reset')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-5"></div>
|
||||||
|
<div class="col-3"> <q-input filled type="number" class="q-pt-md" @focus="isactivearray[1] = false"
|
||||||
|
:dense="true" v-model="nine[1].x" label="x" lazy-rules />
|
||||||
|
<q-input filled type="number" class="q-pt-md" @focus="isactivearray[1] = false" :dense="true"
|
||||||
|
v-model="nine[1].y" label="y" lazy-rules />
|
||||||
|
<q-btn color="white" @click="reset(1)" text-color="black" :label="$t('reset')" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-3" style="margin-left: 5px;"> <q-input filled type="number" class="q-pt-md"
|
||||||
|
:dense="true" v-model="nine[4].x" label="x" @focus="isactivearray[4] = false" lazy-rules />
|
||||||
|
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="nine[4].y" label="y"
|
||||||
|
@focus="isactivearray[4] = false" lazy-rules />
|
||||||
|
<q-btn color="white" @click="reset(4)" text-color="black" :label="$t('reset')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4"></div>
|
||||||
|
<div class="col-3"> <q-input filled type="number" @focus="isactivearray[2] = false" class="q-pt-md"
|
||||||
|
: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"
|
||||||
|
v-model="nine[2].y" label="y" lazy-rules />
|
||||||
|
<q-btn color="white" @click="reset(2)" text-color="black" label="$t('reset')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<div class="row" style="margin-top: 10vh;">
|
||||||
|
<div class="col-6"></div>
|
||||||
|
<div class="col-6"> <q-input filled type="number" @focus="isactivearray[3] = false" class="q-pt-md"
|
||||||
|
:dense="true" v-model="nine[3].x" label="x" lazy-rules />
|
||||||
|
<q-input filled type="number" class="q-pt-md" @focus="isactivearray[3] = false" :dense="true"
|
||||||
|
v-model="nine[3].y" label="y" lazy-rules />
|
||||||
|
<q-btn color="white" @click="reset(3)" text-color="black" :label="$t('reset')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<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 style="position:absolute;">
|
||||||
|
<vue3ResizeDrag :isActive="true" v-if="isshowarray[0]" :w="30" :h="20" :x="ninepostion[0].x"
|
||||||
|
:y="ninepostion[0].y" @mousedown="activeMouseDown(0)" :isResizable="false"
|
||||||
|
@moveHandler="moveHandler_1"><span>{{$t('point')}}1</span> </vue3ResizeDrag>
|
||||||
|
<vue3ResizeDrag :isActive="true" v-if="isshowarray[1]" :w="30" :h="20" :x="ninepostion[1].x"
|
||||||
|
:y="ninepostion[1].y" @mousedown="activeMouseDown(1)" :isResizable="false"
|
||||||
|
@moveHandler="moveHandler_2"><span>{{$t('point')}}2</span> </vue3ResizeDrag>
|
||||||
|
<vue3ResizeDrag :isActive="true" v-if="isshowarray[2]" :w="30" :h="20" :x="ninepostion[2].x"
|
||||||
|
:y="ninepostion[2].y" @mousedown="activeMouseDown(2)" :isResizable="false"
|
||||||
|
@moveHandler="moveHandler_3"><span>{{$t('point')}}3</span> </vue3ResizeDrag>
|
||||||
|
<vue3ResizeDrag :isActive="true" v-if="isshowarray[3]" :w="30" :h="20" :x="ninepostion[3].x"
|
||||||
|
:y="ninepostion[3].y" @mousedown="activeMouseDown(3)" :isResizable="false"
|
||||||
|
@moveHandler="moveHandler_4"><span>{{$t('point')}}4</span> </vue3ResizeDrag>
|
||||||
|
<vue3ResizeDrag :isActive="true" v-if="isshowarray[4]" :w="30" :h="20" :x="ninepostion[4].x"
|
||||||
|
:y="ninepostion[4].y" @mousedown="activeMouseDown(4)" :isResizable="false"
|
||||||
|
@moveHandler="moveHandler_5"><span>{{$t('point')}}5</span> </vue3ResizeDrag>
|
||||||
|
<vue3ResizeDrag :isActive="true" v-if="isshowarray[5]" :w="30" :h="20" :x="ninepostion[5].x"
|
||||||
|
:y="ninepostion[5].y" @mousedown="activeMouseDown(5)" :isResizable="false"
|
||||||
|
@moveHandler="moveHandler_6"><span>{{$t('point')}}6</span> </vue3ResizeDrag>
|
||||||
|
<vue3ResizeDrag :isActive="true" v-if="isshowarray[6]" :w="30" :h="20" :x="ninepostion[6].x"
|
||||||
|
:y="ninepostion[6].y" @mousedown="activeMouseDown(6)" :isResizable="false"
|
||||||
|
@moveHandler="moveHandler_7"><span>{{$t('point')}}7</span> </vue3ResizeDrag>
|
||||||
|
<vue3ResizeDrag :isActive="true" v-if="isshowarray[7]" :w="30" :h="20" :x="ninepostion[7].x"
|
||||||
|
:y="ninepostion[7].y" @mousedown="activeMouseDown(7)" :isResizable="false"
|
||||||
|
@moveHandler="moveHandler_8"><span>{{$t('point')}}8</span> </vue3ResizeDrag>
|
||||||
|
<vue3ResizeDrag :isActive="true" v-if="isshowarray[8]" :w="30" :h="20" :x="ninepostion[8].x"
|
||||||
|
:y="ninepostion[8].y" @mousedown="activeMouseDown(8)" :isResizable="false"
|
||||||
|
@moveHandler="moveHandler_9"><span>{{$t('point')}}9</span> </vue3ResizeDrag>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<div class="row" style="margin-top: 10vh;">
|
||||||
|
<div class="col-6"> <q-input filled type="number" @focus="isactivearray[5] = false" class="q-pt-md"
|
||||||
|
:dense="true" v-model="nine[5].x" label="x" lazy-rules />
|
||||||
|
<q-input filled type="number" class="q-pt-md" @focus="isactivearray[5] = false" :dense="true"
|
||||||
|
v-model="nine[5].y" label="y" lazy-rules />
|
||||||
|
<q-btn color="white" @click="reset(5)" text-color="black" :label="$t('reset')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6"></div>
|
||||||
|
<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 />
|
||||||
|
<q-input filled type="number" class="q-pt-md" @focus="isactivearray[6] = false" :dense="true"
|
||||||
|
v-model="nine[6].y" label="y" lazy-rules />
|
||||||
|
<q-btn color="white" @click="reset(6)" text-color="black" :label="$t('reset')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6"></div>
|
||||||
|
<div class="col-3"> <q-input filled type="number" @focus="isactivearray[7] = false" class="q-pt-md"
|
||||||
|
:dense="true" v-model="nine[7].x" label="x" lazy-rules />
|
||||||
|
<q-input filled type="number" class="q-pt-md" @focus="isactivearray[7] = false" :dense="true"
|
||||||
|
v-model="nine[7].y" label="y" lazy-rules />
|
||||||
|
<q-btn color="white" @click="reset(7)" text-color="black" :label="$t('reset')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4"></div>
|
||||||
|
<div class="col-3"> <q-input filled type="number" @focus="isactivearray[8] = false" class="q-pt-md"
|
||||||
|
:dense="true" v-model="nine[8].x" label="x" lazy-rules />
|
||||||
|
<q-input filled type="number" class="q-pt-md" @focus="isactivearray[8] = false" :dense="true"
|
||||||
|
v-model="nine[8].y" label="y" lazy-rules />
|
||||||
|
<q-btn color="white" @click="reset(8)" text-color="black" :label="$t('reset')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- <div class="col-4">
|
||||||
|
<q-btn color="white" text-color="black" label="重置" />
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script lang="ts">
|
||||||
|
import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
|
||||||
|
import GlobalData from "src/common/GlobalData";
|
||||||
|
import { defineComponent, ref, watch, computed, defineProps, withDefaults, onMounted } from "vue";
|
||||||
|
import { useStore } from "src/store";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "ComponentSurfaceCorrection",
|
||||||
|
components: {
|
||||||
|
vue3ResizeDrag
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
let $store = useStore();
|
||||||
|
let $t = useI18n();
|
||||||
|
const setIndexProjector = () => {
|
||||||
|
console.log($store.state.selected_projector);
|
||||||
|
};
|
||||||
|
let Proportion = ref({ x: 0, y: 0 });
|
||||||
|
let centor = ref({ x: 0, y: 0 });
|
||||||
|
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 }]);
|
||||||
|
///
|
||||||
|
const activeMouseDown = (index: number) => {
|
||||||
|
isactivearray.value[index] = 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,])
|
||||||
|
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 }]);
|
||||||
|
const moveHandler_1 = (data: any) => {
|
||||||
|
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);
|
||||||
|
|
||||||
|
nine.value[0].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
|
||||||
|
nine.value[0].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
|
||||||
|
}
|
||||||
|
const moveHandler_2 = (data: any) => {
|
||||||
|
let x = 960 + Math.ceil((data.left - ninepostion.value[1].x) * centor.value.x);
|
||||||
|
let y = 1080 - Math.ceil((data.top - ninepostion.value[1].y) * Proportion.value.y);
|
||||||
|
|
||||||
|
nine.value[1].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
|
||||||
|
nine.value[1].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
|
||||||
|
}
|
||||||
|
const moveHandler_3 = (data: any) => {
|
||||||
|
let x = 1920 + Math.ceil((data.left - ninepostion.value[2].x) * Proportion.value.x);
|
||||||
|
let y = 1080 - Math.ceil((data.top - ninepostion.value[2].y) * Proportion.value.y);
|
||||||
|
|
||||||
|
nine.value[2].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
|
||||||
|
nine.value[2].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
|
||||||
|
}
|
||||||
|
const moveHandler_4 = (data: any) => {
|
||||||
|
let x = Math.ceil((data.left - ninepostion.value[3].x) * Proportion.value.x);
|
||||||
|
let y = 530 - Math.ceil((data.top - ninepostion.value[3].y) * Proportion.value.y);
|
||||||
|
|
||||||
|
nine.value[3].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
|
||||||
|
nine.value[3].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
|
||||||
|
}
|
||||||
|
const moveHandler_5 = (data: any) => {
|
||||||
|
let x = 960 + Math.ceil((data.left - ninepostion.value[4].x) * centor.value.x);
|
||||||
|
let y = 530 - Math.ceil((data.top - ninepostion.value[4].y) * Proportion.value.y);
|
||||||
|
|
||||||
|
nine.value[4].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
|
||||||
|
nine.value[4].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
|
||||||
|
}
|
||||||
|
const moveHandler_6 = (data: any) => {
|
||||||
|
let x = 1920 + Math.ceil((data.left - ninepostion.value[5].x) * Proportion.value.x);
|
||||||
|
let y = 530 - Math.ceil((data.top - ninepostion.value[5].y) * Proportion.value.y);
|
||||||
|
|
||||||
|
nine.value[5].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
|
||||||
|
nine.value[5].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
|
||||||
|
}
|
||||||
|
const moveHandler_7 = (data: any) => {
|
||||||
|
let x = Math.ceil((data.left - ninepostion.value[6].x) * Proportion.value.x);
|
||||||
|
let y = Math.abs(Math.ceil((data.top - ninepostion.value[6].y) * Proportion.value.y));
|
||||||
|
|
||||||
|
nine.value[6].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
|
||||||
|
nine.value[6].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
|
||||||
|
}
|
||||||
|
const moveHandler_8 = (data: any) => {
|
||||||
|
let x = 960 + Math.ceil((data.left - ninepostion.value[7].x) * Proportion.value.x);
|
||||||
|
let y = Math.abs(Math.ceil((data.top - ninepostion.value[7].y) * Proportion.value.y));;
|
||||||
|
|
||||||
|
nine.value[7].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
|
||||||
|
nine.value[7].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
|
||||||
|
}
|
||||||
|
const moveHandler_9 = (data: any) => {
|
||||||
|
let x = 1920 + Math.ceil((data.left - ninepostion.value[8].x) * Proportion.value.x);
|
||||||
|
let y = Math.abs(Math.ceil((data.top - ninepostion.value[8].y) * Proportion.value.y));
|
||||||
|
|
||||||
|
nine.value[8].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
|
||||||
|
nine.value[8].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
console.log(div.value.offsetHeight)
|
||||||
|
console.log(div.value.offsetWidth)
|
||||||
|
startpostion();
|
||||||
|
|
||||||
|
})
|
||||||
|
const startpostion = () => {
|
||||||
|
ninepostion.value[0].x = 0
|
||||||
|
ninepostion.value[0].y = 0
|
||||||
|
|
||||||
|
ninepostion.value[1].x = div.value.offsetWidth / 2 - 25
|
||||||
|
ninepostion.value[1].y = 0
|
||||||
|
|
||||||
|
ninepostion.value[2].x = div.value.offsetWidth - 25
|
||||||
|
ninepostion.value[2].y = 0
|
||||||
|
|
||||||
|
ninepostion.value[3].x = 0
|
||||||
|
ninepostion.value[3].y = div.value.offsetHeight / 2 - 8
|
||||||
|
|
||||||
|
ninepostion.value[4].x = div.value.offsetWidth / 2 - 25
|
||||||
|
ninepostion.value[4].y = div.value.offsetHeight / 2 - 8
|
||||||
|
|
||||||
|
ninepostion.value[5].x = div.value.offsetWidth - 25
|
||||||
|
ninepostion.value[5].y = div.value.offsetHeight / 2
|
||||||
|
|
||||||
|
ninepostion.value[6].x = 0
|
||||||
|
ninepostion.value[6].y = div.value.offsetHeight - 25
|
||||||
|
|
||||||
|
ninepostion.value[7].x = div.value.offsetWidth / 2 - 8
|
||||||
|
ninepostion.value[7].y = div.value.offsetHeight - 25
|
||||||
|
|
||||||
|
ninepostion.value[8].x = div.value.offsetWidth - 25
|
||||||
|
ninepostion.value[8].y = div.value.offsetHeight - 25
|
||||||
|
|
||||||
|
Proportion.value.x = 1920 / (div.value.offsetWidth - 25)
|
||||||
|
Proportion.value.y = 1080 / (div.value.offsetHeight - 25)
|
||||||
|
|
||||||
|
centor.value.x = 2160 / (div.value.offsetWidth + 25)
|
||||||
|
centor.value.y = 3840 / (div.value.offsetHeight + 25)
|
||||||
|
}
|
||||||
|
///
|
||||||
|
const reset = (index: number) => {
|
||||||
|
if (index == 0) {
|
||||||
|
nine.value[index].x = 0
|
||||||
|
nine.value[index].y = 1080
|
||||||
|
ninepostion.value[0].x = 0
|
||||||
|
ninepostion.value[0].y = 0
|
||||||
|
}
|
||||||
|
if (index == 1) {
|
||||||
|
nine.value[index].x = 960
|
||||||
|
nine.value[index].y = 1080
|
||||||
|
ninepostion.value[1].x = div.value.offsetWidth / 2 - 25
|
||||||
|
ninepostion.value[1].y = 0
|
||||||
|
}
|
||||||
|
if (index == 2) {
|
||||||
|
nine.value[index].x = 1920
|
||||||
|
nine.value[index].y = 1080
|
||||||
|
ninepostion.value[2].x = div.value.offsetWidth - 25
|
||||||
|
ninepostion.value[2].y = 0
|
||||||
|
}
|
||||||
|
if (index == 3) {
|
||||||
|
nine.value[index].x = 0
|
||||||
|
nine.value[index].y = 540
|
||||||
|
ninepostion.value[3].x = 0
|
||||||
|
ninepostion.value[3].y = div.value.offsetHeight / 2 - 8
|
||||||
|
}
|
||||||
|
if (index == 4) {
|
||||||
|
nine.value[index].x = 960
|
||||||
|
nine.value[index].y = 540
|
||||||
|
ninepostion.value[4].x = div.value.offsetWidth / 2 - 25
|
||||||
|
ninepostion.value[4].y = div.value.offsetHeight / 2 - 8
|
||||||
|
}
|
||||||
|
if (index == 5) {
|
||||||
|
nine.value[index].x = 1920
|
||||||
|
nine.value[index].y = 540
|
||||||
|
|
||||||
|
ninepostion.value[5].x = div.value.offsetWidth - 25
|
||||||
|
ninepostion.value[5].y = div.value.offsetHeight / 2
|
||||||
|
}
|
||||||
|
if (index == 6) {
|
||||||
|
nine.value[index].x = 0
|
||||||
|
nine.value[index].y = 0
|
||||||
|
|
||||||
|
ninepostion.value[6].x = 0
|
||||||
|
ninepostion.value[6].y = div.value.offsetHeight - 25
|
||||||
|
}
|
||||||
|
if (index == 7) {
|
||||||
|
nine.value[index].x = 960
|
||||||
|
nine.value[index].y = 0
|
||||||
|
ninepostion.value[7].x = div.value.offsetWidth / 2
|
||||||
|
ninepostion.value[7].y = div.value.offsetHeight - 25
|
||||||
|
}
|
||||||
|
if (index == 8) {
|
||||||
|
nine.value[index].x = 1920
|
||||||
|
nine.value[index].y = 0
|
||||||
|
|
||||||
|
ninepostion.value[8].x = div.value.offsetWidth - 25
|
||||||
|
ninepostion.value[8].y = div.value.offsetHeight - 25
|
||||||
|
}
|
||||||
|
isshowarray.value[index] = false
|
||||||
|
setTimeout(() => {
|
||||||
|
isshowarray.value[index] = true
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
///
|
||||||
|
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 (!isactivearray.value[0]) {
|
||||||
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
setdianposin(0, x, y)
|
||||||
|
}
|
||||||
|
///
|
||||||
|
}, { deep: true })
|
||||||
|
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 (!isactivearray.value[1]) {
|
||||||
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
setdianposin(1, x, y)
|
||||||
|
}
|
||||||
|
///
|
||||||
|
}, { deep: true })
|
||||||
|
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 (!isactivearray.value[2]) {
|
||||||
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
setdianposin(2, x, y)
|
||||||
|
}
|
||||||
|
}, { deep: true })
|
||||||
|
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 (!isactivearray.value[3]) {
|
||||||
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
setdianposin(3, x, y)
|
||||||
|
}
|
||||||
|
}, { deep: true })
|
||||||
|
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 (!isactivearray.value[4]) {
|
||||||
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
setdianposin(4, x, y)
|
||||||
|
}
|
||||||
|
}, { deep: true })
|
||||||
|
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 (!isactivearray.value[5]) {
|
||||||
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
setdianposin(5, x, y)
|
||||||
|
}
|
||||||
|
}, { deep: true })
|
||||||
|
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 (!isactivearray.value[6]) {
|
||||||
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
setdianposin(6, x, y)
|
||||||
|
}
|
||||||
|
}, { deep: true })
|
||||||
|
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 (!isactivearray.value[7]) {
|
||||||
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
setdianposin(7, x, y)
|
||||||
|
}
|
||||||
|
}, { deep: true })
|
||||||
|
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 (!isactivearray.value[8]) {
|
||||||
|
let x = Math.ceil(newVal.x / Proportion.value.x);
|
||||||
|
let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
|
||||||
|
setdianposin(8, x, y)
|
||||||
|
}
|
||||||
|
}, { deep: true })
|
||||||
|
///
|
||||||
|
let model = ref(null);
|
||||||
|
let options = ref(['10', '20', '30', '40', '50']);
|
||||||
|
let set = GlobalData.getInstance().getCurrentClient();
|
||||||
|
const setdianposin = (index: number, x: number, y: number) => {
|
||||||
|
ninepostion.value[index].x = x
|
||||||
|
ninepostion.value[index].y = y
|
||||||
|
isshowarray.value[index] = false
|
||||||
|
isactivearray.value[index] = false
|
||||||
|
setTimeout(() => {
|
||||||
|
isshowarray.value[index] = true
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
model,
|
||||||
|
options,
|
||||||
|
|
||||||
|
nine,
|
||||||
|
moveHandler_1,
|
||||||
|
moveHandler_2,
|
||||||
|
moveHandler_3,
|
||||||
|
moveHandler_4,
|
||||||
|
moveHandler_5,
|
||||||
|
moveHandler_6,
|
||||||
|
moveHandler_7,
|
||||||
|
moveHandler_8,
|
||||||
|
moveHandler_9,
|
||||||
|
div,
|
||||||
|
ninepostion,
|
||||||
|
reset,
|
||||||
|
isshowarray,
|
||||||
|
isactivearray,
|
||||||
|
activeMouseDown
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,146 @@
|
||||||
|
<template>
|
||||||
|
<q-dialog persistent v-model="show_dialog" @keydown="
|
||||||
|
(evt) => {
|
||||||
|
if (evt.keyCode == 27) {
|
||||||
|
show_dialog = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
">
|
||||||
|
|
||||||
|
<q-card class="overflow-hidden" style="max-width: 90vw;height: 90vh;">
|
||||||
|
<q-form>
|
||||||
|
<!-- @submit="onSubmit" -->
|
||||||
|
<q-card-section class="q-ma-none q-pa-sm">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-auto text-h6">
|
||||||
|
{{ $t('fusion settings') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-space />
|
||||||
|
<q-btn flat round icon="close" color="red" v-close-popup>
|
||||||
|
<q-tooltip>
|
||||||
|
{{ $t("close") }}
|
||||||
|
</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
<!-- height: 80vh -->
|
||||||
|
<q-card-section class="scroll" style="width: 90vw;">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-3">
|
||||||
|
<p class="text-center">{{$t('Projector')}}</p>
|
||||||
|
<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>
|
||||||
|
<div class="col-9">
|
||||||
|
<div class="q-ta-md">
|
||||||
|
<q-btn-toggle no-caps v-model="options" toggle-color="primary" :options="[
|
||||||
|
{ label: $t('FusionLocale'), value: 'FusionLocale' },
|
||||||
|
{ label: $t('FourPointCalibration'), value: 'FourPointCalibration' },
|
||||||
|
{ label: $t('SurfaceCorrection'), value: 'SurfaceCorrection' },
|
||||||
|
{ label: $t('DensityCorrection'), value: 'DensityCorrection' },
|
||||||
|
{ label: $t('GridSettings'), value: 'GridSettings' },
|
||||||
|
]" />
|
||||||
|
</div>
|
||||||
|
<div style="min-height:72vh ;">
|
||||||
|
<component :is="options" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn flat :label="$t('Cancel')" no-caps color="primary" v-close-popup />
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.header_label {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
.w100{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {
|
||||||
|
defineComponent,
|
||||||
|
ref,
|
||||||
|
Ref,
|
||||||
|
watch,
|
||||||
|
computed,
|
||||||
|
onMounted,
|
||||||
|
onBeforeUnmount,
|
||||||
|
nextTick,
|
||||||
|
} from "vue";
|
||||||
|
import { useStore } from "src/store";
|
||||||
|
import { useQuasar, copyToClipboard } from "quasar";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import GlobalData from "src/common/GlobalData";
|
||||||
|
import { Protocol } from "src/entities/WSProtocol";
|
||||||
|
import { EDeviceAttribute } from "src/entities/EDeviceAttribute";
|
||||||
|
|
||||||
|
import ProjectorItem from "src/components/FusionSettings/ProjectorItem.vue";
|
||||||
|
|
||||||
|
import FusionLocale from "src/components/FusionSettings/FusionLocale.vue";
|
||||||
|
import FourPointCalibration from "src/components/FusionSettings/FourPointCalibration.vue";
|
||||||
|
import GridSettings from "src/components/FusionSettings/GridSettings.vue";
|
||||||
|
import SurfaceCorrection from "src/components/FusionSettings/SurfaceCorrection.vue";
|
||||||
|
import DensityCorrection from "src/components/FusionSettings/DensityCorrection.vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "ComponentFusionSettingsDialog",
|
||||||
|
components: {
|
||||||
|
ProjectorItem,
|
||||||
|
FusionLocale,
|
||||||
|
FourPointCalibration,
|
||||||
|
GridSettings,
|
||||||
|
SurfaceCorrection,
|
||||||
|
DensityCorrection
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
let $store = useStore();
|
||||||
|
let $q = useQuasar();
|
||||||
|
let $t = useI18n();
|
||||||
|
let show_dialog = ref(false);
|
||||||
|
const target_language = ref("zh-CN");
|
||||||
|
const text = ref("Projector");
|
||||||
|
const showDialog = async () => {
|
||||||
|
show_dialog.value = true;
|
||||||
|
};
|
||||||
|
let optionsstr = ref();
|
||||||
|
optionsstr.value="FusionLocale"
|
||||||
|
const options = computed({
|
||||||
|
get() {
|
||||||
|
return optionsstr.value;
|
||||||
|
},
|
||||||
|
set(newValue) {
|
||||||
|
optionsstr.value = newValue;
|
||||||
|
console.log(newValue)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
let data = ref({});
|
||||||
|
return {
|
||||||
|
show_dialog,
|
||||||
|
options,
|
||||||
|
copyToClipboard,
|
||||||
|
showDialog,
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -1390,10 +1390,11 @@ const _time_zones = [
|
||||||
"UTC+11(Solomon Islands)",
|
"UTC+11(Solomon Islands)",
|
||||||
"UTC+12(New Zealand)",
|
"UTC+12(New Zealand)",
|
||||||
];
|
];
|
||||||
|
import vue3ResizeDrag from "src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "ComponentSystemSettingDialog",
|
name: "ComponentSystemSettingDialog",
|
||||||
components: { TimingTaskDialog, SystenSettingAdvancedNetworkDialog },
|
components: { TimingTaskDialog, SystenSettingAdvancedNetworkDialog ,vue3ResizeDrag},
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
let $store = useStore();
|
let $store = useStore();
|
||||||
|
|
@ -2064,7 +2065,6 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
show_dialog,
|
show_dialog,
|
||||||
e_week_Days: ref(EWeekDays),
|
e_week_Days: ref(EWeekDays),
|
||||||
|
|
|
||||||
|
|
@ -401,4 +401,21 @@ export default {
|
||||||
"Please input vaild host. example: 192.168.1.1 or 192.168.1.1:8080":
|
"Please input vaild host. example: 192.168.1.1 or 192.168.1.1:8080":
|
||||||
"Please Input Vaild Host. Example: 192.168.1.1 or 192.168.1.1:8080",
|
"Please Input Vaild Host. Example: 192.168.1.1 or 192.168.1.1:8080",
|
||||||
"equipment data": "Equipment Data",
|
"equipment data": "Equipment Data",
|
||||||
|
"fusion settings":"fusion settings",
|
||||||
|
"FusionLocale":"Fusion Locale",
|
||||||
|
"FourPointCalibration":"Four Pint Calibration",
|
||||||
|
"SurfaceCorrection":"Surface Correction",
|
||||||
|
"DensityCorrection":"Density Correction",
|
||||||
|
"GridSettings":"Grid Settings",
|
||||||
|
"point":"dot",
|
||||||
|
"reset":"reset",
|
||||||
|
"upper fusion zone parameters":"upper fusion zone parameters",
|
||||||
|
"Left fusion Band Parameters":"Left Fusion Band Parameters",
|
||||||
|
"Lower fusion Zone Parameters":"Lower Fusion Zone Parameters",
|
||||||
|
"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":"Please enter 0-100",
|
||||||
|
"Set Fusion Band Parameters":"Set Fusion Band Parameters",
|
||||||
|
"Projector":"Projector"
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -671,4 +671,21 @@ export default {
|
||||||
"Please input vaild host. example: 192.168.1.1 or 192.168.1.1:8080":
|
"Please input vaild host. example: 192.168.1.1 or 192.168.1.1:8080":
|
||||||
"请输入合法地址. 例: 192.168.1.1 或 192.168.1.1:8080",
|
"请输入合法地址. 例: 192.168.1.1 或 192.168.1.1:8080",
|
||||||
"equipment data": "联动设备",
|
"equipment data": "联动设备",
|
||||||
|
"fusion settings":"融合设置",
|
||||||
|
"FusionLocale":"融合区域设置",
|
||||||
|
"FourPointCalibration":"四点校正",
|
||||||
|
"SurfaceCorrection":"曲面校正",
|
||||||
|
"DensityCorrection":"疏密校正",
|
||||||
|
"GridSettings":"网格设置",
|
||||||
|
"point":"点",
|
||||||
|
"reset":"重置",
|
||||||
|
"upper fusion zone parameters":"上融合带参数",
|
||||||
|
"Left fusion Band Parameters":"左融合带参数",
|
||||||
|
"Lower fusion Zone Parameters":"下融合带参数",
|
||||||
|
"Right fusion Band Parameters":"右融合带参数",
|
||||||
|
"Set the fusion band width":"设置融合带宽度",
|
||||||
|
"Please enter a number":"请输入数字",
|
||||||
|
"Please enter 0-100":"请输入 0-100",
|
||||||
|
"Set Fusion Band Parameters":"设置融合带参数",
|
||||||
|
"Projector":"投影机"
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -408,6 +408,21 @@
|
||||||
{{ $t("register device") }}
|
{{ $t("register device") }}
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
|
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
v-close-popup
|
||||||
|
@click="$refs.fusion_settings_dialog.showDialog()"
|
||||||
|
>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<!-- <q-icon name="devices" /> -->
|
||||||
|
<q-icon name="open_with" />
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
{{ $t("fusion settings") }}
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
|
||||||
<q-item
|
<q-item
|
||||||
clickable
|
clickable
|
||||||
v-close-popup
|
v-close-popup
|
||||||
|
|
@ -473,6 +488,7 @@
|
||||||
<list-joint-action-equipment-dialog
|
<list-joint-action-equipment-dialog
|
||||||
ref="list_joint_action_equipment_dialog"
|
ref="list_joint_action_equipment_dialog"
|
||||||
/>
|
/>
|
||||||
|
<fusion-settings-dialog ref="fusion_settings_dialog" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style >
|
<style >
|
||||||
|
|
@ -495,6 +511,7 @@
|
||||||
import { defineComponent, ref, Ref, computed, watch, onMounted } from "vue";
|
import { defineComponent, ref, Ref, computed, watch, onMounted } from "vue";
|
||||||
import { useStore } from "src/store";
|
import { useStore } from "src/store";
|
||||||
|
|
||||||
|
import FusionSettingsDialog from "src/components/FusionSettingsDialog.vue";
|
||||||
import GridSettingDialog from "src/components/GridSettingDialog.vue";
|
import GridSettingDialog from "src/components/GridSettingDialog.vue";
|
||||||
import SpecialVideoGridSettingDialog from "src/components/SpecialVideoGridSettingDialog.vue";
|
import SpecialVideoGridSettingDialog from "src/components/SpecialVideoGridSettingDialog.vue";
|
||||||
import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
|
import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
|
||||||
|
|
@ -541,6 +558,7 @@ export default defineComponent({
|
||||||
AdvancedDebugDialog,
|
AdvancedDebugDialog,
|
||||||
WindowRectEditDialog,
|
WindowRectEditDialog,
|
||||||
ListJointActionEquipmentDialog,
|
ListJointActionEquipmentDialog,
|
||||||
|
FusionSettingsDialog,
|
||||||
},
|
},
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
|
|
|
||||||
|
|
@ -81,6 +81,8 @@ export interface StateInterface {
|
||||||
|
|
||||||
isLedPlayer: () => boolean;
|
isLedPlayer: () => boolean;
|
||||||
isSpecialVideo: () => boolean;
|
isSpecialVideo: () => boolean;
|
||||||
|
//
|
||||||
|
selected_projector: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// provide typings for `this.$store`
|
// provide typings for `this.$store`
|
||||||
|
|
@ -341,7 +343,7 @@ export default store(function (/* { ssrContext } */) {
|
||||||
product_name: EProductNames.LED_PLAYER,
|
product_name: EProductNames.LED_PLAYER,
|
||||||
|
|
||||||
custom_defines: new CustomDefines(),
|
custom_defines: new CustomDefines(),
|
||||||
|
selected_projector: "0/0",
|
||||||
isLedPlayer: () => {
|
isLedPlayer: () => {
|
||||||
return (
|
return (
|
||||||
Store.state.product_name == EProductNames.LED_PLAYER ||
|
Store.state.product_name == EProductNames.LED_PLAYER ||
|
||||||
|
|
@ -600,6 +602,9 @@ export default store(function (/* { ssrContext } */) {
|
||||||
state.signal_source_tree = playload;
|
state.signal_source_tree = playload;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
setSelectedProjector(state: StateInterface, playload?: any){
|
||||||
|
state.selected_projector = playload;
|
||||||
|
},
|
||||||
clearSignalSourceTree(state: StateInterface, playload?: any) {
|
clearSignalSourceTree(state: StateInterface, playload?: any) {
|
||||||
state.signal_source_tree = [];
|
state.signal_source_tree = [];
|
||||||
},
|
},
|
||||||
|
|
@ -990,7 +995,12 @@ export default store(function (/* { ssrContext } */) {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
getters:{
|
||||||
|
GetTheCurrentlySelectedCamera(state){
|
||||||
|
let arr = state.selected_projector.split('/');
|
||||||
|
return [Number(arr[0]),Number(arr[1])];
|
||||||
|
}
|
||||||
|
},
|
||||||
// enable strict mode (adds overhead!)
|
// enable strict mode (adds overhead!)
|
||||||
// for dev mode and --debug builds only
|
// for dev mode and --debug builds only
|
||||||
strict: !!process.env.DEBUGGING,
|
strict: !!process.env.DEBUGGING,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
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