修复动态添加的bug

This commit is contained in:
shefengchun 2023-02-16 14:53:36 +08:00
parent 5f3f9fd074
commit 06dfea0815
6 changed files with 124 additions and 52 deletions

View File

@ -4,22 +4,20 @@
<div class="col-10 q-pt-md"> <div class="col-10 q-pt-md">
<div ref="div" style="width: 100%; background-color: #646464; height: 40vh"> <div ref="div" style="width: 100%; background-color: #646464; height: 40vh">
<div style="position: absolute"> <div style="position: absolute">
<Vue3DraggableResizable v-show="now_v_h == 'vertical'" <Vue3DraggableResizable v-show="now_v_h == 'vertical'" :class="[options_model_v == index ? 'action' : 'point']"
:class="[options_model_v == index ? 'action' : 'point']" v-for="(item, index) in value_v_point.length" v-for="(item, index) in value_v_point.length" :initW="point.w" :initH="point.h" :resizable="false" :x="0"
:initW="point.w" :initH="point.h" :resizable="false" :x="0" v-model:y="value_v_point[index].y" v-model:y="value_v_point[index].y" @activated="options_model_v = index; now_v_h = 'vertical'"
@activated="options_model_v = index; now_v_h = 'vertical'"
@click="options_model_v = index; now_v_h = 'vertical'" @dragging="dragStartHandle($event, index, 'v')"> @click="options_model_v = index; now_v_h = 'vertical'" @dragging="dragStartHandle($event, index, 'v')">
<span>v{{ <span>v{{
index+ 1 index + 1
}}</span> }}</span>
</Vue3DraggableResizable> </Vue3DraggableResizable>
<Vue3DraggableResizable v-show="now_v_h == 'vertical'" <Vue3DraggableResizable v-show="now_v_h == 'vertical'" :class="[options_model_v == index ? 'action' : 'point']"
:class="[options_model_v == index ? 'action' : 'point']" v-for="(item, index) in value_v_point.length" v-for="(item, index) in value_v_point.length" :initW="point.w" :initH="point.h" :resizable="false"
:initW="point.w" :initH="point.h" :resizable="false" :x="max.x - 20" :x="max.x - 20" @click="options_model_v = index; now_v_h = 'vertical'" v-model:y="value_v_point[index].y"
@click="options_model_v = index; now_v_h = 'vertical'" v-model:y="value_v_point[index].y"
@activated="options_model_v = index; now_v_h = 'vertical'" @dragging="dragStartHandle($event, index, 'v')"> @activated="options_model_v = index; now_v_h = 'vertical'" @dragging="dragStartHandle($event, index, 'v')">
<span>v{{ <span>v{{
index+ 1 index + 1
}}</span> }}</span>
</Vue3DraggableResizable> </Vue3DraggableResizable>
<Vue3DraggableResizable v-show="now_v_h == 'level'" :class="[options_model_h == index ? 'action' : 'point']" <Vue3DraggableResizable v-show="now_v_h == 'level'" :class="[options_model_h == index ? 'action' : 'point']"
@ -27,7 +25,7 @@
v-model:x="value_h_point[index].x" :y="0" @activated="options_model_h = index; now_v_h = 'level'" v-model:x="value_h_point[index].x" :y="0" @activated="options_model_h = index; now_v_h = 'level'"
@click="options_model_h = index; now_v_h = 'level'" @dragging="dragStartHandle($event, index, 'h')"> @click="options_model_h = index; now_v_h = 'level'" @dragging="dragStartHandle($event, index, 'h')">
<span>h{{ <span>h{{
index+ 1 index + 1
}}</span> }}</span>
</Vue3DraggableResizable> </Vue3DraggableResizable>
<Vue3DraggableResizable v-show="now_v_h == 'level'" :class="[options_model_h == index ? 'action' : 'point']" <Vue3DraggableResizable v-show="now_v_h == 'level'" :class="[options_model_h == index ? 'action' : 'point']"
@ -35,7 +33,7 @@
v-model:x="value_h_point[index].x" @activated="options_model_h = index; now_v_h = 'level'" :y="max.y - 20" v-model:x="value_h_point[index].x" @activated="options_model_h = index; now_v_h = 'level'" :y="max.y - 20"
@click="options_model_h = index; now_v_h = 'level'" @dragging="dragStartHandle($event, index, 'h')"> @click="options_model_h = index; now_v_h = 'level'" @dragging="dragStartHandle($event, index, 'h')">
<span>h{{ <span>h{{
index+ 1 index + 1
}}</span> }}</span>
</Vue3DraggableResizable> </Vue3DraggableResizable>
</div> </div>
@ -52,45 +50,60 @@
</div> </div>
<div class="row" v-show="now_v_h == 'vertical'"> <div class="row" v-show="now_v_h == 'vertical'">
<div class="col-1"></div> <div class="col-1"></div>
<div class="col-2"> <q-select class="q-pt-md" :label="$t('vertical')" <div class="col-3 q-px-md"> <q-select class="q-pt-md " :label="$t('vertical')"
@update:model-value="(val) => { options_v = val }" :dense="true" filled v-model="options_model_v" @update:model-value="(val) => { options_v = val }" :dense="true" filled v-model="options_model_v"
:options="options_v" emit-value map-options /></div> :options="options_v" emit-value map-options /></div>
<div class="col-2"> <q-input v-if="value_v[options_model_v]" filled type="number" class="q-pt-md" :dense="true" <div class="col-3 q-px-md"> <q-input v-if="value_v[options_model_v]" filled type="number" class="q-pt-md"
v-model="value_v[options_model_v].y" @update:model-value="chang(options_model_v, $event, 'v')" lazy-rules /> :dense="true" v-model="value_v[options_model_v].y" @update:model-value="chang(options_model_v, $event, 'v')"
lazy-rules />
</div> </div>
<div class="q-pt-md col-2"> <div class="q-pt-md col-3">
<q-btn color="white" @click="reset(options_model_v, true, 'v')" text-color="black" :label="$t('reset')" /> <q-btn color="white" @click="reset(options_model_v, true, 'v')" text-color="black" :label="$t('reset')" />
</div> </div>
<div class="col-2"> <q-select class="q-pt-md" :label="$t('vertical point')"
</div>
<div class="row" v-show="now_v_h == 'vertical'">
<div class="col-1"></div>
<div class="col-3 q-px-md"> <q-select class="q-pt-md" :label="$t('vertical point')"
@update:model-value="(val) => { chang_point_amount(val, 'v') }" :dense="true" filled @update:model-value="(val) => { chang_point_amount(val, 'v') }" :dense="true" filled
v-model="value_v_point_amount" :options="options_value_v_point_amount" emit-value map-options /></div> v-model="value_v_point_amount" :options="options_value_v_point_amount" emit-value map-options /></div>
<div class="col-1 q-pt-md "><q-btn color="white" <div class="col-3 q-pt-md q-px-md"><q-btn color="white" @click="add_dialog = true" text-color="black"
@click="add_dialog=true" text-color="black"
:label="$t('add control points')" /></div> :label="$t('add control points')" /></div>
<div class="col-1 q-pt-md "><q-btn color="white" @click="() => { del_dialog = true }" :disable="value_v_point_amount<=5" text-color="black" <div class="col-3 q-pt-md q-px-md"><q-btn color="white" @click="() => { del_dialog = true }"
:label="$t('reduce control points')" /></div> :disable="value_v_point_amount <= 5" text-color="black" :label="$t('reduce control points')" /></div>
</div> </div>
<div class="row" v-show="now_v_h == 'level'"> <div class="row" v-show="now_v_h == 'level'">
<div class="col-1"></div> <div class="col-1"></div>
<div class="col-2"> <q-select class="q-pt-md" :label="$t('level')" <div class="col-3 q-px-md"> <q-select class="q-pt-md" :label="$t('level')"
@update:model-value="(val) => { options_h = val }" :dense="true" filled v-model="options_model_h" @update:model-value="(val) => { options_h = val }" :dense="true" filled v-model="options_model_h"
:options="options_h" emit-value map-options /></div> :options="options_h" emit-value map-options /></div>
<div class="col-2"> <q-input v-if="value_h[options_model_h]" filled type="number" class="q-pt-md" :dense="true" <div class="col-3 q-px-md"> <q-input v-if="value_h[options_model_h]" filled type="number" class="q-pt-md"
v-model="value_h[options_model_h].x" @update:model-value="chang(options_model_h, $event, 'h')" lazy-rules /> :dense="true" v-model="value_h[options_model_h].x" @update:model-value="chang(options_model_h, $event, 'h')"
lazy-rules />
</div> </div>
<div class="q-pt-md col-2"> <div class="q-pt-md col-3">
<q-btn color="white" @click="reset(options_model_h, true, 'h')" text-color="black" :label="$t('reset')" /> <q-btn color="white" @click="reset(options_model_h, true, 'h')" text-color="black" :label="$t('reset')" />
</div> </div>
<div class="col-2"> <q-select class="q-pt-md" :label="$t('level point')"
</div>
<div class="row" v-show="now_v_h == 'level'">
<div class="col-1"></div>
<div class="col-3 q-px-md"> <q-select class="q-pt-md" :label="$t('level point')"
@update:model-value="(val) => { chang_point_amount(val, 'h') }" :dense="true" filled @update:model-value="(val) => { chang_point_amount(val, 'h') }" :dense="true" filled
v-model="value_h_point_amount" :options="options_value_h_point_amount" emit-value map-options /></div> v-model="value_h_point_amount" :options="options_value_h_point_amount" emit-value map-options /></div>
<div class="col-1 q-pt-md "><q-btn color="white" <div class="col-3 q-pt-md "><q-btn color="white" @click="add_dialog = true" text-color="black"
@click="add_dialog=true" text-color="black"
:label="$t('add control points')" /></div> :label="$t('add control points')" /></div>
<div class="col-1 q-pt-md "><q-btn color="white" @click="() => { del_dialog = true }" :disable="value_h_point_amount<=5" text-color="black" <div class="col-3 q-pt-md "><q-btn color="white" @click="() => { del_dialog = true }"
:label="$t('reduce control points')" /></div> :disable="value_h_point_amount <= 5" text-color="black" :label="$t('reduce control points')" /></div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="q-pt-md q-px-md col-5"> <q-btn color="white" @click="resetall" text-color="black"
:label="$t('Reset the current program control point')" /></div>
<div class="q-pt-md q-px-md col-5"> <q-btn color="white" @click="resetall_all" text-color="black"
:label="$t('Reset all program control points')" /></div>
</div> </div>
<div class="q-pt-md"> <q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" /></div>
</div> </div>
<div style="position: absolute;bottom: 0;"> <div style="position: absolute;bottom: 0;">
<q-checkbox v-model="auxiliary_line" @update:model-value="(value, evt) => { send_auxiliary_line(value) }" <q-checkbox v-model="auxiliary_line" @update:model-value="(value, evt) => { send_auxiliary_line(value) }"
@ -126,8 +139,7 @@
<q-btn flat :label="$t('ok')" @click="add" color="primary" v-close-popup /> <q-btn flat :label="$t('ok')" @click="add" color="primary" v-close-popup />
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>
</template> </template>
<style scoped> <style scoped>
@ -192,8 +204,8 @@ export default defineComponent({
const now_v_h = ref("") const now_v_h = ref("")
const value_h_point_amount = ref(5) const value_h_point_amount = ref(5)
const value_v_point_amount = ref(5) const value_v_point_amount = ref(5)
const add_dialog=ref(false) const add_dialog = ref(false)
const now_amount=ref(0) const now_amount = ref(0)
const options_value_h_point_amount = ref(<string[]>[]) const options_value_h_point_amount = ref(<string[]>[])
const options_value_v_point_amount = ref(<string[]>[]) const options_value_v_point_amount = ref(<string[]>[])
@ -331,8 +343,12 @@ export default defineComponent({
watch(() => now_v_h, (newval, oldval) => { watch(() => now_v_h, (newval, oldval) => {
if (newval.value == 'level') { if (newval.value == 'level') {
set?.SetBlendingOption("blending_grids_select_ui", "hor_density") set?.SetBlendingOption("blending_grids_select_ui", "hor_density")
set?.SetBlendingOption("blending_grids_control_point_count", `${value_h_point_amount.value}`)
set?.SetBlendingOption("blending_grids_select_point", `${options_model_h.value + 1}`)
} else { } else {
set?.SetBlendingOption("blending_grids_select_ui", "ver_density") set?.SetBlendingOption("blending_grids_select_ui", "ver_density")
set?.SetBlendingOption("blending_grids_control_point_count", `${value_v_point_amount.value}`)
set?.SetBlendingOption("blending_grids_select_point", `${options_model_v.value + 1}`)
} }
}, { deep: true }) }, { deep: true })
watch(() => value_v_point_amount, (newval, oldval) => { watch(() => value_v_point_amount, (newval, oldval) => {
@ -391,7 +407,7 @@ export default defineComponent({
save_set_cache() save_set_cache()
} }
const chang = (index: number, $event: any, type: string, send: boolean) => { const chang = (index: number, $event: any, type: string, send?: boolean) => {
$event = Number($event) $event = Number($event)
if (type == 'v') { if (type == 'v') {
let tmp = coordinate_transformation_value_to_xy(0, $event) let tmp = coordinate_transformation_value_to_xy(0, $event)
@ -541,7 +557,7 @@ export default defineComponent({
save_set_cache() save_set_cache()
} }
const send_value = (index: number, type: string, value: number, send: boolean = true) => { const send_value = (index: number, type: string, value: number, send: boolean = true) => {
if (!send) return; if (!send) return;
let row = $store.getters.GetTheCurrentlySelectedCamera[0] let row = $store.getters.GetTheCurrentlySelectedCamera[0]
let col = $store.getters.GetTheCurrentlySelectedCamera[1] let col = $store.getters.GetTheCurrentlySelectedCamera[1]
if (type == 'v') { if (type == 'v') {
@ -557,16 +573,52 @@ export default defineComponent({
for (let index = 0; index < value_v_point_amount.value; index++) { for (let index = 0; index < value_v_point_amount.value; index++) {
reset(index, false, 'v') reset(index, false, 'v')
} }
send_value(-1, 'v', 0);
break; break;
case 'level': case 'level':
for (let index = 0; index < value_h_point_amount.value; index++) { for (let index = 0; index < value_h_point_amount.value; index++) {
reset(index, false, 'h') reset(index, false, 'h')
} }
send_value(-1, 'h', 0);
break;
default:
break;
}
send_value(-1, 'v', 0);
}
/**
* 重置全部为默认值
*/
const resetall_all = () => {
switch (now_v_h.value) {
case 'vertical':
for (let key in config.multi_ver_density) {
for (let index = 0; index < config.multi_ver_density[key].length; index++) {
config.multi_ver_density[key][index].x = config.multi_ver_density[key][index].def_x
config.multi_ver_density[key][index].y = config.multi_ver_density[key][index].def_y
}
start_point(Number(key), 'v')
}
value_v_point_amount.value = 5
start_point(Number(5), 'v')
send_value(-2, 'v', 0);
break;
case 'level':
for (let key in config.multi_hor_density) {
for (let index = 0; index < config.multi_hor_density[key].length; index++) {
config.multi_hor_density[key][index].x = config.multi_hor_density[key][index].def_x
config.multi_hor_density[key][index].y = config.multi_hor_density[key][index].def_y
}
start_point(Number(key), 'h')
}
value_h_point_amount.value = 5
start_point(Number(5), 'h')
send_value(-2, 'h', 0);
break; break;
default: default:
break; break;
} }
send_value(-2, 'v', 0);
} }
const del_dialog = ref(false) const del_dialog = ref(false)
const add_control_points = (amount: number, type: string) => { const add_control_points = (amount: number, type: string) => {
@ -726,8 +778,8 @@ export default defineComponent({
for (let key in tmpconfig.multi_ver_density) { for (let key in tmpconfig.multi_ver_density) {
options_value_v_point_amount.value.push(key) options_value_v_point_amount.value.push(key)
} }
value_v_point_amount.value = Number(options_value_v_point_amount.value[options_value_v_point_amount.value.length-1]) value_v_point_amount.value = Number(options_value_v_point_amount.value[options_value_v_point_amount.value.length - 1])
amount=Number(options_value_v_point_amount.value[options_value_v_point_amount.value.length-1]) amount = Number(options_value_v_point_amount.value[options_value_v_point_amount.value.length - 1])
// console.log(tmpconfig.multi_ver_density) // console.log(tmpconfig.multi_ver_density)
// console.log(value_v_point_amount.value) // console.log(value_v_point_amount.value)
// console.log(amount,'a') // console.log(amount,'a')
@ -749,7 +801,7 @@ export default defineComponent({
} }
value_v_point.value.push(tmp_point) value_v_point.value.push(tmp_point)
} }
options_model_v.value=0 options_model_v.value = 0
}); });
break; break;
case 'h': case 'h':
@ -773,8 +825,8 @@ export default defineComponent({
for (let key in tmpconfig.multi_hor_density) { for (let key in tmpconfig.multi_hor_density) {
options_value_h_point_amount.value.push(key) options_value_h_point_amount.value.push(key)
} }
value_h_point_amount.value = Number(options_value_h_point_amount.value[options_value_h_point_amount.value.length-1]) value_h_point_amount.value = Number(options_value_h_point_amount.value[options_value_h_point_amount.value.length - 1])
amount=Number(options_value_h_point_amount.value[options_value_h_point_amount.value.length-1]) amount = Number(options_value_h_point_amount.value[options_value_h_point_amount.value.length - 1])
//value_h_point_amount.value = amount //value_h_point_amount.value = amount
$store.commit("setfusion_configuration", res?.config); $store.commit("setfusion_configuration", res?.config);
value_h.value = [] value_h.value = []
@ -795,7 +847,7 @@ export default defineComponent({
} }
value_h_point.value.push(tmp_point) value_h_point.value.push(tmp_point)
} }
options_model_h.value=0 options_model_h.value = 0
}); });
break; break;
default: default:
@ -872,7 +924,8 @@ export default defineComponent({
del_dialog, del_dialog,
add_dialog, add_dialog,
now_amount, now_amount,
set_cache set_cache,
resetall_all
} }
} }
}) })

View File

@ -231,10 +231,8 @@ export default defineComponent({
const chang = (index: number, $event: any, type: string) => { const chang = (index: number, $event: any, type: string) => {
index = Number(index) index = Number(index)
let tmp = coordinate_transformation_value_to_xy(value.value[index].x, value.value[index].y) let tmp = coordinate_transformation_value_to_xy(value.value[index].x, value.value[index].y)
console.log(tmp)
value_point.value[index].y = Math.round(tmp.y) value_point.value[index].y = Math.round(tmp.y)
value_point.value[index].x = Math.round(tmp.x) value_point.value[index].x = Math.round(tmp.x)
console.log(value_point.value[index])
send_value(index, Math.round(value.value[index].x), Math.round(value.value[index].y)) send_value(index, Math.round(value.value[index].x), Math.round(value.value[index].y))
save_set_cache() save_set_cache()
@ -333,8 +331,14 @@ export default defineComponent({
} }
const resetall = () => { const resetall = () => {
for (let index = 0; index < value_point.value.length; index++) { for (let index = 0; index < value_point.value.length; index++) {
reset(index, true, 'v') value.value[index].x = value.value[index].def_x
value.value[index].y = value.value[index].def_y
let tmp = coordinate_transformation_value_to_xy(value.value[index].x, value.value[index].y)
value_point.value[index].y = Math.round(tmp.y)
value_point.value[index].x = Math.round(tmp.x)
//reset(index, true, 'v')
} }
send_value(-2,0,0)
} }
const recalculate_coordinates = () => { const recalculate_coordinates = () => {
try { try {

View File

@ -381,9 +381,16 @@ export default defineComponent({
} }
const resetall = () => { const resetall = () => {
for (let index = 0; index < value_point.value.length; index++) { for (let index = 0; index < value_point.value.length; index++) {
reset(index, true, 'v') value.value[index].x = value.value[index].def_x
value.value[index].y = value.value[index].def_y
let tmp = coordinate_transformation_value_to_xy(value.value[index].x, value.value[index].y)
value_point.value[index].y = Math.trunc(tmp.y)
value_point.value[index].x = Math.trunc(tmp.x)
// reset(index, true, 'v')
} }
send_value(-2,0,0)
} }
const recalculate_coordinates = () => { const recalculate_coordinates = () => {
try { try {

View File

@ -233,6 +233,7 @@ export default defineComponent({
const send_disable_blending_params = () => { const send_disable_blending_params = () => {
set?.SetBlendingOption(disable_blending_params_id.value, disable_blending_params.value ? "1" : "0"); set?.SetBlendingOption(disable_blending_params_id.value, disable_blending_params.value ? "1" : "0");
}; };
const child :any = ref(null); const child :any = ref(null);
const send_show_blending_grids = () => { const send_show_blending_grids = () => {
let tmp = "" let tmp = ""
@ -272,11 +273,14 @@ export default defineComponent({
set?.SetBlendingOption("blending_grids_select_point", `9:${child.value!.options_model+1}`) set?.SetBlendingOption("blending_grids_select_point", `9:${child.value!.options_model+1}`)
break; break;
case 'DensityCorrection': case 'DensityCorrection':
console.log(child.value!.now_v_h) //console.log(child.value!.now_v_h)
if(child.value!.now_v_h=='vertical'){ if(child.value!.now_v_h=='vertical'){
set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_v+1}`) set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_v+1}`)
//value_h_point_amount
set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_v_point_amount}`)
}else{ }else{
set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_h+1}`) set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_h+1}`)
set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_h_point_amount}`)
} }
break; break;
default: default:

View File

@ -461,5 +461,7 @@ export default {
"reduce control points":"delete control points", "reduce control points":"delete control points",
"OK to delete you will lose the data you adjusted now":"OK to delete you will lose the data you adjusted now", "OK to delete you will lose the data you adjusted now":"OK to delete you will lose the data you adjusted now",
"Please enter the points you need to add":"Please enter the points you need to add", "Please enter the points you need to add":"Please enter the points you need to add",
"Whether to add control points":"Whether to add control points" "Whether to add control points":"Whether to add control points",
"Reset all program control points":"Reset all program control points",
"Reset the current program control point":"Reset the current program control point"
}; };

View File

@ -730,5 +730,7 @@ export default {
"reduce control points":"删除", "reduce control points":"删除",
"OK to delete you will lose the data you adjusted now":"确定删除你将失去现在调整的数据", "OK to delete you will lose the data you adjusted now":"确定删除你将失去现在调整的数据",
"Please enter the points you need to add":"请输入你所需要添加的点数", "Please enter the points you need to add":"请输入你所需要添加的点数",
"Whether to add control points":"是否添加控制点" "Whether to add control points":"是否添加控制点",
"Reset all program control points":"重置全部方案控制点",
"Reset the current program control point":"重置当前方案控制点"
}; };