增加125缩放下不显示滑动条
This commit is contained in:
parent
069ef341ce
commit
361c2c06c5
|
@ -2,47 +2,47 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-1"></div>
|
<div class="col-1"></div>
|
||||||
<div class="col-8 q-pt-md">
|
<div class="col-8 q-pt-md">
|
||||||
<div ref="div" style="width: 100%; background-color: aquamarine; height: 100%">
|
<div ref="div" style="width: 100%; background-color: #646464; height: 100%">
|
||||||
<div style="position: absolute">
|
<div style="position: absolute">
|
||||||
<vue3ResizeDrag :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="30" :h="20" :x="point_postion[0].x"
|
<vue3ResizeDrag :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="30" :h="30" :x="point_postion[0].x"
|
||||||
:y="point_postion[0].y" @mousedown="isactivearray[0] = true" :isResizable="false"
|
:y="point_postion[0].y" @mousedown="isactivearray[0] = true" :isResizable="false"
|
||||||
@moveHandler="moveHandler($event, 0)"><span>v1</span>
|
@moveHandler="moveHandler($event, 0)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V1</p><p class=" vcolro p0">↓</p>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="30" :h="20" :x="point_postion[1].x"
|
<vue3ResizeDrag :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="30" :h="30" :x="point_postion[1].x"
|
||||||
:y="point_postion[1].y" @mousedown="isactivearray[1] = true" :isResizable="false"
|
:y="point_postion[1].y" @mousedown="isactivearray[1] = true" :isResizable="false"
|
||||||
@moveHandler="moveHandler($event, 1)"><span>v2</span>
|
@moveHandler="moveHandler($event, 1)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V2</p><p class="p0 vcolro">↓</p>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="30" :h="20" :x="point_postion[2].x"
|
<vue3ResizeDrag :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="30" :h="30" :x="point_postion[2].x"
|
||||||
:y="point_postion[2].y" @mousedown="isactivearray[2] = true" :isResizable="false"
|
:y="point_postion[2].y" @mousedown="isactivearray[2] = true" :isResizable="false"
|
||||||
@moveHandler="moveHandler($event, 2)"><span>v3</span>
|
@moveHandler="moveHandler($event, 2)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V3</p><p class="p0 vcolro">↓</p>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="30" :h="20" :x="point_postion[3].x"
|
<vue3ResizeDrag :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="30" :h="30" :x="point_postion[3].x"
|
||||||
:y="point_postion[3].y" @mousedown="isactivearray[3] = true" :isResizable="false"
|
:y="point_postion[3].y" @mousedown="isactivearray[3] = true" :isResizable="false"
|
||||||
@moveHandler="moveHandler($event, 3)"><span>v4</span>
|
@moveHandler="moveHandler($event, 3)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V4</p><p class="p0 vcolro">↓</p>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="30" :h="20" :x="point_postion[4].x"
|
<vue3ResizeDrag :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="30" :h="30" :x="point_postion[4].x"
|
||||||
:y="point_postion[4].y" @mousedown="isactivearray[4] = true" :isResizable="false"
|
:y="point_postion[4].y" @mousedown="isactivearray[4] = true" :isResizable="false"
|
||||||
@moveHandler="moveHandler($event, 4)"><span>v5</span>
|
@moveHandler="moveHandler($event, 4)"><p class="p0 vcolro">↑</p><p class="vcolro p0">V5</p><p class="p0 vcolro">↓</p>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="30" :h="20" :x="point_postion[5].x"
|
<vue3ResizeDrag :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="40" :h="20" :x="point_postion[5].x"
|
||||||
:y="point_postion[5].y" @mousedown="isactivearray[5] = true" :isResizable="false"
|
:y="point_postion[5].y" @mousedown="isactivearray[5] = true" :isResizable="false"
|
||||||
@moveHandler="moveHandler($event, 5)"><span>h1</span>
|
@moveHandler="moveHandler($event, 5)"><span class="hcolro">←H1→</span>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="30" :h="20" :x="point_postion[6].x"
|
<vue3ResizeDrag :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="40" :h="20" :x="point_postion[6].x"
|
||||||
:y="point_postion[6].y" @mousedown="isactivearray[6] = true" :isResizable="false"
|
:y="point_postion[6].y" @mousedown="isactivearray[6] = true" :isResizable="false"
|
||||||
@moveHandler="moveHandler($event, 6)"><span>h2</span>
|
@moveHandler="moveHandler($event, 6)"><span class="hcolro">←H2→</span>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[7]" v-if="isshowarray[7]" :w="30" :h="20" :x="point_postion[7].x"
|
<vue3ResizeDrag :isActive="isactivearray[7]" v-if="isshowarray[7]" :w="40" :h="20" :x="point_postion[7].x"
|
||||||
:y="point_postion[7].y" @mousedown="isactivearray[7] = true" :isResizable="false"
|
:y="point_postion[7].y" @mousedown="isactivearray[7] = true" :isResizable="false"
|
||||||
@moveHandler="moveHandler($event, 7)"><span>h3</span>
|
@moveHandler="moveHandler($event, 7)"><span class="hcolro">←H3→</span>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="30" :h="20" :x="point_postion[8].x"
|
<vue3ResizeDrag :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="40" :h="20" :x="point_postion[8].x"
|
||||||
:y="point_postion[8].y" @mousedown="isactivearray[8] = true" :isResizable="false"
|
:y="point_postion[8].y" @mousedown="isactivearray[8] = true" :isResizable="false"
|
||||||
@moveHandler="moveHandler($event, 8)"><span>h4</span>
|
@moveHandler="moveHandler($event, 8)"><span class="hcolro">←H4→</span>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[9]" v-if="isshowarray[9]" :w="35" :h="20" :x="point_postion[9].x"
|
<vue3ResizeDrag :isActive="isactivearray[9]" v-if="isshowarray[9]" :w="40" :h="20" :x="point_postion[9].x"
|
||||||
:y="point_postion[9].y" @mousedown="isactivearray[9] = true" :isResizable="false"
|
:y="point_postion[9].y" @mousedown="isactivearray[9] = true" :isResizable="false"
|
||||||
@moveHandler="moveHandler($event, 9)"><span>h5</span>
|
@moveHandler="moveHandler($event, 9)"><span class="hcolro">←H5→</span>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -55,7 +55,7 @@
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<q-input @focus="isactivearray[0] = false" filled type="number" class="q-pt-md" :dense="true"
|
<q-input @focus="isactivearray[0] = false" filled type="number" class="q-pt-md" :dense="true"
|
||||||
v-model="value[0].y" label="y" lazy-rules />
|
v-model="value[0].y" label="y" lazy-rules />
|
||||||
<q-btn dense color="white" @click="reset(0)" text-color="black" :label="$t('reset') + ' v1'" />
|
<q-btn size="sm" color="white" @click="reset(0)" text-color="black" :label="$t('reset') + ' v1'" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -65,7 +65,7 @@
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<q-input @focus="isactivearray[1] = false" filled type="number" class="q-pt-md" :dense="true"
|
<q-input @focus="isactivearray[1] = false" filled type="number" class="q-pt-md" :dense="true"
|
||||||
v-model="value[1].y" label="y" lazy-rules />
|
v-model="value[1].y" label="y" lazy-rules />
|
||||||
<q-btn dense color="white" @click="reset(1)" text-color="black" :label="$t('reset') + ' v2'" />
|
<q-btn size="sm" color="white" @click="reset(1)" text-color="black" :label="$t('reset') + ' v2'" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -75,7 +75,7 @@
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<q-input @focus="isactivearray[2] = false" filled type="number" class="q-pt-md" :dense="true"
|
<q-input @focus="isactivearray[2] = false" filled type="number" class="q-pt-md" :dense="true"
|
||||||
v-model="value[2].y" label="y" lazy-rules />
|
v-model="value[2].y" label="y" lazy-rules />
|
||||||
<q-btn dense color="white" @click="reset(2)" text-color="black" :label="$t('reset') + ' v3'" />
|
<q-btn size="sm" color="white" @click="reset(2)" text-color="black" :label="$t('reset') + ' v3'" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -85,7 +85,7 @@
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<q-input @focus="isactivearray[3] = false" filled type="number" class="q-pt-md" :dense="true"
|
<q-input @focus="isactivearray[3] = false" filled type="number" class="q-pt-md" :dense="true"
|
||||||
v-model="value[3].y" label="y" lazy-rules />
|
v-model="value[3].y" label="y" lazy-rules />
|
||||||
<q-btn dense color="white" @click="reset(3)" text-color="black" :label="$t('reset') + ' v4'" />
|
<q-btn size="sm" color="white" @click="reset(3)" text-color="black" :label="$t('reset') + ' v4'" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -95,7 +95,7 @@
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<q-input @focus="isactivearray[4] = false" filled type="number" class="q-pt-md" :dense="true"
|
<q-input @focus="isactivearray[4] = false" filled type="number" class="q-pt-md" :dense="true"
|
||||||
v-model="value[4].y" label="y" lazy-rules />
|
v-model="value[4].y" label="y" lazy-rules />
|
||||||
<q-btn dense color="white" @click="reset(4)" text-color="black" :label="$t('reset') + ' v5'" />
|
<q-btn size="sm" color="white" @click="reset(4)" text-color="black" :label="$t('reset') + ' v5'" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -107,31 +107,31 @@
|
||||||
<div class="box_son">
|
<div class="box_son">
|
||||||
<q-input filled @focus="isactivearray[5] = false" type="number" class="q-pt-md" :dense="true"
|
<q-input filled @focus="isactivearray[5] = false" type="number" class="q-pt-md" :dense="true"
|
||||||
v-model="value[5].x" label="x" lazy-rules />
|
v-model="value[5].x" label="x" lazy-rules />
|
||||||
<q-btn dense color="white" @click="reset(5)" text-color="black" :label="$t('reset') + ' h1'" />
|
<q-btn size="sm" color="white" @click="reset(5)" text-color="black" :label="$t('reset') + ' h1'" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box_son">
|
<div class="box_son">
|
||||||
<q-input filled @focus="isactivearray[6] = false" type="number" class="q-pt-md" :dense="true"
|
<q-input filled @focus="isactivearray[6] = false" type="number" class="q-pt-md" :dense="true"
|
||||||
v-model="value[6].x" label="x" lazy-rules />
|
v-model="value[6].x" label="x" lazy-rules />
|
||||||
<q-btn dense color="white" @click="reset(6)" text-color="black" :label="$t('reset') + ' h2'" />
|
<q-btn size="sm" color="white" @click="reset(6)" text-color="black" :label="$t('reset') + ' h2'" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box_son">
|
<div class="box_son">
|
||||||
<q-input filled @focus="isactivearray[7] = false" type="number" class="q-pt-md" :dense="true"
|
<q-input filled @focus="isactivearray[7] = false" type="number" class="q-pt-md" :dense="true"
|
||||||
v-model="value[7].x" label="x" lazy-rules />
|
v-model="value[7].x" label="x" lazy-rules />
|
||||||
<q-btn dense color="white" @click="reset(7)" text-color="black" :label="$t('reset') + ' h3'" />
|
<q-btn size="sm" color="white" @click="reset(7)" text-color="black" :label="$t('reset') + ' h3'" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box_son">
|
<div class="box_son">
|
||||||
<q-input filled @focus="isactivearray[8] = false" type="number" class="q-pt-md" :dense="true"
|
<q-input filled @focus="isactivearray[8] = false" type="number" class="q-pt-md" :dense="true"
|
||||||
v-model="value[8].x" label="x" lazy-rules />
|
v-model="value[8].x" label="x" lazy-rules />
|
||||||
<q-btn dense color="white" @click="reset(8)" text-color="black" :label="$t('reset') + ' h4'" />
|
<q-btn size="sm" color="white" @click="reset(8)" text-color="black" :label="$t('reset') + ' h4'" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box_son">
|
<div class="box_son">
|
||||||
<q-input filled @focus="isactivearray[9] = false" type="number" class="q-pt-md" :dense="true"
|
<q-input filled @focus="isactivearray[9] = false" type="number" class="q-pt-md" :dense="true"
|
||||||
v-model="value[9].x" label="x" lazy-rules />
|
v-model="value[9].x" label="x" lazy-rules />
|
||||||
<q-btn dense color="white" @click="reset(9)" text-color="black" :label="$t('reset') + ' h5'" />
|
<q-btn size="sm" color="white" @click="reset(9)" text-color="black" :label="$t('reset') + ' h5'" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box_son q-pt-xl">
|
<div class="box_son q-pt-xl">
|
||||||
|
@ -156,6 +156,18 @@
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
}
|
}
|
||||||
|
.vcolro{
|
||||||
|
color: #d50000;
|
||||||
|
}
|
||||||
|
.hcolro{
|
||||||
|
color: #00c853;
|
||||||
|
font-size: 5px;
|
||||||
|
}
|
||||||
|
.p0{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 8px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {
|
import {
|
||||||
|
@ -440,10 +452,10 @@ export default defineComponent({
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initialization();
|
initialization();
|
||||||
Proportion.value.x = config.width / (div.value.offsetWidth - 25);
|
Proportion.value.x = config.width / (div.value.offsetWidth - 40);
|
||||||
Proportion.value.y = config.height / (div.value.offsetHeight - 25);
|
Proportion.value.y = config.height / (div.value.offsetHeight - 30);
|
||||||
let Width = (div.value.offsetWidth - 25) / 4;
|
let Width = (div.value.offsetWidth - 40) / 4;
|
||||||
let Height = (div.value.offsetHeight - 25) / 4;
|
let Height = (div.value.offsetHeight - 30) / 4;
|
||||||
for (
|
for (
|
||||||
let index = 0;
|
let index = 0;
|
||||||
index < config.hor_density.length + config.ver_density.length;
|
index < config.hor_density.length + config.ver_density.length;
|
||||||
|
@ -466,10 +478,10 @@ export default defineComponent({
|
||||||
return (() => {
|
return (() => {
|
||||||
if (div != null) {
|
if (div != null) {
|
||||||
initialization();
|
initialization();
|
||||||
Proportion.value.x = config.width / (div.value.offsetWidth - 25);
|
Proportion.value.x = config.width / (div.value.offsetWidth - 40);
|
||||||
Proportion.value.y = config.height / (div.value.offsetHeight - 25);
|
Proportion.value.y = config.height / (div.value.offsetHeight - 30);
|
||||||
let Width = (div.value.offsetWidth - 25) / 4;
|
let Width = (div.value.offsetWidth - 40) / 4;
|
||||||
let Height = (div.value.offsetHeight - 25) / 4;
|
let Height = (div.value.offsetHeight - 30) / 4;
|
||||||
for (
|
for (
|
||||||
let index = 0;
|
let index = 0;
|
||||||
index < config.hor_density.length + config.ver_density.length;
|
index < config.hor_density.length + config.ver_density.length;
|
||||||
|
@ -664,7 +676,11 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
save_set_cache();
|
save_set_cache();
|
||||||
};
|
};
|
||||||
|
const creat_svg=(index:Number,type:string):string=>{
|
||||||
|
//btoa(unescape(encodeURIComponent(str)))
|
||||||
|
//'data:image/svg+xml;base64,'+btoa(`<svg width="50" height="50"xmlns="http://www.w3.org/2000/svg"><text font-size="14" fill="#d50000"><tspan x="3" y="10">↑</tspan><tspan x="0" y="20">v${index}</tspan><tspan x="3" y="30">↓</tspan></text></svg>`)
|
||||||
|
return type=='h'?`data:image/svg+xml,%3Csvg width='50' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill='%2300c853' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E←h${index}→%3C/text%3E%3C/svg%3E`:'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iNTAiCiAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHRleHQgZm9udC1zaXplPSIxNCIgZmlsbD0iI2Q1MDAwMCI+CiAgICAgICAgPHRzcGFuIHg9IjMiIHk9IjEwIj7ihpE8L3RzcGFuPgogICAgICAgIDx0c3BhbiB4PSIwIiB5PSIyMCI+djE8L3RzcGFuPgogICAgICAgIDx0c3BhbiB4PSIzIiB5PSIzMCI+4oaTPC90c3Bhbj4KICAgIDwvdGV4dD4KPC9zdmc+'
|
||||||
|
}
|
||||||
initialization();
|
initialization();
|
||||||
return {
|
return {
|
||||||
model,
|
model,
|
||||||
|
@ -678,6 +694,7 @@ export default defineComponent({
|
||||||
isshowarray,
|
isshowarray,
|
||||||
isactivearray,
|
isactivearray,
|
||||||
save,
|
save,
|
||||||
|
creat_svg
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<q-input
|
<q-input
|
||||||
filled
|
filled
|
||||||
type="number"
|
type="number"
|
||||||
class="q-pt-md"
|
class="q-pt-xs"
|
||||||
style="text-align: center"
|
style="text-align: center"
|
||||||
:dense="true"
|
:dense="true"
|
||||||
@focus="isactivearray[0] = false"
|
@focus="isactivearray[0] = false"
|
||||||
|
@ -15,7 +15,7 @@
|
||||||
<q-input
|
<q-input
|
||||||
filled
|
filled
|
||||||
type="number"
|
type="number"
|
||||||
class="q-pt-md"
|
class="q-pt-xs"
|
||||||
:dense="true"
|
:dense="true"
|
||||||
@focus="isactivearray[0] = false"
|
@focus="isactivearray[0] = false"
|
||||||
v-model="four[0].y"
|
v-model="four[0].y"
|
||||||
|
@ -23,6 +23,7 @@
|
||||||
lazy-rules
|
lazy-rules
|
||||||
/>
|
/>
|
||||||
<q-btn
|
<q-btn
|
||||||
|
size="sm" dense
|
||||||
color="white"
|
color="white"
|
||||||
@click="reset(0)"
|
@click="reset(0)"
|
||||||
text-color="black"
|
text-color="black"
|
||||||
|
@ -34,7 +35,7 @@
|
||||||
<q-input
|
<q-input
|
||||||
filled
|
filled
|
||||||
type="number"
|
type="number"
|
||||||
class="q-pt-md"
|
class="q-pt-xs"
|
||||||
:dense="true"
|
:dense="true"
|
||||||
@focus="isactivearray[1] = false"
|
@focus="isactivearray[1] = false"
|
||||||
v-model="four[1].x"
|
v-model="four[1].x"
|
||||||
|
@ -44,7 +45,7 @@
|
||||||
<q-input
|
<q-input
|
||||||
filled
|
filled
|
||||||
type="number"
|
type="number"
|
||||||
class="q-pt-md"
|
class="q-pt-xs"
|
||||||
:dense="true"
|
:dense="true"
|
||||||
@focus="isactivearray[1] = false"
|
@focus="isactivearray[1] = false"
|
||||||
v-model="four[1].y"
|
v-model="four[1].y"
|
||||||
|
@ -52,6 +53,7 @@
|
||||||
lazy-rules
|
lazy-rules
|
||||||
/>
|
/>
|
||||||
<q-btn
|
<q-btn
|
||||||
|
size="sm" dense
|
||||||
color="white"
|
color="white"
|
||||||
@click="reset(1)"
|
@click="reset(1)"
|
||||||
text-color="black"
|
text-color="black"
|
||||||
|
@ -61,59 +63,59 @@
|
||||||
|
|
||||||
<div class="col-2"></div>
|
<div class="col-2"></div>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<div ref="div" style="background-color: #7fffd4; height: 40vh">
|
<div ref="div" style="background-color: #646464; height: 40vh">
|
||||||
<div style="position: absolute">
|
<div style="position: absolute">
|
||||||
<vue3ResizeDrag
|
<vue3ResizeDrag
|
||||||
v-if="isshowarray[0]"
|
v-if="isshowarray[0]"
|
||||||
:isActive="isactivearray[0]"
|
:isActive="isactivearray[0]"
|
||||||
@mousedown="activeMouseDown(0)"
|
@mousedown="activeMouseDown(0)"
|
||||||
@mouseUpHandler="mouseUpHandler(0)"
|
@mouseUpHandler="mouseUpHandler(0)"
|
||||||
:w="30"
|
:w="20"
|
||||||
:h="20"
|
:h="20"
|
||||||
:x="points[0].x"
|
:x="points[0].x"
|
||||||
:y="points[0].y"
|
:y="points[0].y"
|
||||||
:isResizable="false"
|
:isResizable="false"
|
||||||
@moveHandler="moveHandler_1"
|
@moveHandler="moveHandler_1"
|
||||||
><span>{{ $t("point") }}1</span>
|
><div class="point">1</div>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag
|
<vue3ResizeDrag
|
||||||
v-if="isshowarray[1]"
|
v-if="isshowarray[1]"
|
||||||
:isActive="isactivearray[1]"
|
:isActive="isactivearray[1]"
|
||||||
@mousedown="activeMouseDown(1)"
|
@mousedown="activeMouseDown(1)"
|
||||||
@mouseUpHandler="mouseUpHandler(1)"
|
@mouseUpHandler="mouseUpHandler(1)"
|
||||||
:w="30"
|
:w="20"
|
||||||
:h="20"
|
:h="20"
|
||||||
:x="points[1].x"
|
:x="points[1].x"
|
||||||
:y="points[1].y"
|
:y="points[1].y"
|
||||||
:isResizable="false"
|
:isResizable="false"
|
||||||
@moveHandler="moveHandler_2"
|
@moveHandler="moveHandler_2"
|
||||||
><span>{{ $t("point") }}2</span>
|
><div class="point">2</div>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag
|
<vue3ResizeDrag
|
||||||
v-if="isshowarray[2]"
|
v-if="isshowarray[2]"
|
||||||
:isActive="isactivearray[2]"
|
:isActive="isactivearray[2]"
|
||||||
@mousedown="activeMouseDown(2)"
|
@mousedown="activeMouseDown(2)"
|
||||||
@mouseUpHandler="mouseUpHandler(2)"
|
@mouseUpHandler="mouseUpHandler(2)"
|
||||||
:w="30"
|
:w="20"
|
||||||
:h="20"
|
:h="20"
|
||||||
:x="points[2].x"
|
:x="points[2].x"
|
||||||
:y="points[2].y"
|
:y="points[2].y"
|
||||||
:isResizable="false"
|
:isResizable="false"
|
||||||
@moveHandler="moveHandler_3"
|
@moveHandler="moveHandler_3"
|
||||||
><span>{{ $t("point") }}3</span>
|
><div class="point">3</div>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag
|
<vue3ResizeDrag
|
||||||
v-if="isshowarray[3]"
|
v-if="isshowarray[3]"
|
||||||
:isActive="isactivearray[3]"
|
:isActive="isactivearray[3]"
|
||||||
@mousedown="activeMouseDown(3)"
|
@mousedown="activeMouseDown(3)"
|
||||||
@mouseUpHandler="mouseUpHandler(3)"
|
@mouseUpHandler="mouseUpHandler(3)"
|
||||||
:w="30"
|
:w="20"
|
||||||
:h="20"
|
:h="20"
|
||||||
:x="points[3].x"
|
:x="points[3].x"
|
||||||
:y="points[3].y"
|
:y="points[3].y"
|
||||||
:isResizable="false"
|
:isResizable="false"
|
||||||
@moveHandler="moveHandler_4"
|
@moveHandler="moveHandler_4"
|
||||||
><span>{{ $t("point") }}4</span>
|
><div class="point">4</div>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -124,7 +126,7 @@
|
||||||
<q-input
|
<q-input
|
||||||
filled
|
filled
|
||||||
type="number"
|
type="number"
|
||||||
class="q-pt-md"
|
class="q-pt-xs"
|
||||||
:dense="true"
|
:dense="true"
|
||||||
@focus="isactivearray[2] = false"
|
@focus="isactivearray[2] = false"
|
||||||
v-model="four[2].x"
|
v-model="four[2].x"
|
||||||
|
@ -134,7 +136,7 @@
|
||||||
<q-input
|
<q-input
|
||||||
filled
|
filled
|
||||||
type="number"
|
type="number"
|
||||||
class="q-pt-md"
|
class="q-pt-xs"
|
||||||
:dense="true"
|
:dense="true"
|
||||||
@focus="isactivearray[2] = false"
|
@focus="isactivearray[2] = false"
|
||||||
v-model="four[2].y"
|
v-model="four[2].y"
|
||||||
|
@ -142,6 +144,7 @@
|
||||||
lazy-rules
|
lazy-rules
|
||||||
/>
|
/>
|
||||||
<q-btn
|
<q-btn
|
||||||
|
size="sm" dense
|
||||||
color="white"
|
color="white"
|
||||||
@click="reset(2)"
|
@click="reset(2)"
|
||||||
text-color="black"
|
text-color="black"
|
||||||
|
@ -150,6 +153,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<q-btn
|
<q-btn
|
||||||
|
size="sm" dense
|
||||||
color="white"
|
color="white"
|
||||||
@click="resetall"
|
@click="resetall"
|
||||||
text-color="black"
|
text-color="black"
|
||||||
|
@ -160,7 +164,7 @@
|
||||||
<q-input
|
<q-input
|
||||||
filled
|
filled
|
||||||
type="number"
|
type="number"
|
||||||
class="q-pt-md"
|
class=""
|
||||||
:dense="true"
|
:dense="true"
|
||||||
@focus="isactivearray[3] = false"
|
@focus="isactivearray[3] = false"
|
||||||
v-model="four[3].x"
|
v-model="four[3].x"
|
||||||
|
@ -178,6 +182,7 @@
|
||||||
lazy-rules
|
lazy-rules
|
||||||
/>
|
/>
|
||||||
<q-btn
|
<q-btn
|
||||||
|
size="sm" dense
|
||||||
color="white"
|
color="white"
|
||||||
@click="reset(3)"
|
@click="reset(3)"
|
||||||
text-color="black"
|
text-color="black"
|
||||||
|
@ -187,7 +192,11 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped>
|
||||||
|
.point{
|
||||||
|
width: 100%;height: 100%;border-radius: 50%;background: #0000ff;color: aliceblue;
|
||||||
|
}
|
||||||
|
</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 { dom } from "quasar";
|
import { dom } from "quasar";
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
<q-toggle class="float-right" v-model="array[0].isshow" label="" />
|
<q-toggle class="float-right" v-model="array[0].isshow" label="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-input filled type="number" :autofocus="group == 0" :bg-color="group == 0 ? 'cyan-1' : ''"
|
<q-input dense filled type="number" :autofocus="group == 0" :bg-color="group == 0 ? 'cyan-1' : ''"
|
||||||
@focus="group = 0" v-model="array[0].value" :label="$t('upper fusion zone parameters')" lazy-rules
|
@focus="group = 0" v-model="array[0].value" :label="$t('upper fusion zone parameters')" lazy-rules
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) =>
|
(val) =>
|
||||||
|
@ -33,7 +33,7 @@
|
||||||
<q-toggle class="float-right" v-model="array[1].isshow" label="" />
|
<q-toggle class="float-right" v-model="array[1].isshow" label="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-input filled type="number" :autofocus="group == 1" :bg-color="group == 1 ? 'cyan-1' : ''"
|
<q-input dense filled type="number" :autofocus="group == 1" :bg-color="group == 1 ? 'cyan-1' : ''"
|
||||||
@focus="group = 1" v-model="array[1].value" :label="$t('Left fusion Band Parameters')" lazy-rules
|
@focus="group = 1" v-model="array[1].value" :label="$t('Left fusion Band Parameters')" lazy-rules
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) =>
|
(val) =>
|
||||||
|
@ -51,7 +51,7 @@
|
||||||
<q-toggle class="float-right" v-model="array[2].isshow" label="" />
|
<q-toggle class="float-right" v-model="array[2].isshow" label="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-input filled type="number" :autofocus="group == 2" :bg-color="group == 2 ? 'cyan-1' : ''"
|
<q-input dense filled type="number" :autofocus="group == 2" :bg-color="group == 2 ? 'cyan-1' : ''"
|
||||||
@focus="group = 2" v-model="array[2].value" :label="$t('Right fusion Band Parameters')" lazy-rules
|
@focus="group = 2" v-model="array[2].value" :label="$t('Right fusion Band Parameters')" lazy-rules
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) =>
|
(val) =>
|
||||||
|
@ -75,7 +75,7 @@
|
||||||
<q-toggle class="float-right" v-model="array[3].isshow" label="" />
|
<q-toggle class="float-right" v-model="array[3].isshow" label="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-input filled type="number" :autofocus="group == 3" :bg-color="group == 3 ? 'cyan-1' : ''"
|
<q-input dense filled type="number" :autofocus="group == 3" :bg-color="group == 3 ? 'cyan-1' : ''"
|
||||||
@focus="group = 3" v-model="array[3].value" :label="$t('Lower fusion Zone Parameters')" lazy-rules
|
@focus="group = 3" v-model="array[3].value" :label="$t('Lower fusion Zone Parameters')" lazy-rules
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) =>
|
(val) =>
|
||||||
|
@ -92,29 +92,29 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-4 offset-4" v-if="group != 4">
|
<div class="col-4 offset-4" v-if="group != 4">
|
||||||
<p class="text-center">{{ $t("Set Fusion Band Parameters") }}</p>
|
<p class="text-center" style="margin: 0 0 8;">{{ $t("Set Fusion Band Parameters") }}</p>
|
||||||
<div style="display: flex; justify-content: space-evenly">
|
<div style="display: flex; justify-content: space-evenly">
|
||||||
<div>
|
<div>
|
||||||
<div><q-btn color="white" @click="add('alpha')" text-color="black" label="↑" /></div>
|
<div><q-btn size="sm" color="white" @click="add('alpha')" text-color="black" label="↑" /></div>
|
||||||
<q-slider v-model="array[group].alpha" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01" color="green"
|
<q-slider style="height: 10rem;" v-model="array[group].alpha" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01" color="green"
|
||||||
vertical reverse label-always />
|
vertical reverse label-always />
|
||||||
<div><q-btn color="white" @click="reduce('alpha')" text-color="black" label="↓" /></div>
|
<div><q-btn size="sm" color="white" @click="reduce('alpha')" text-color="black" label="↓" /></div>
|
||||||
<p class="text-center">alpha</p>
|
<p class="text-center">alpha</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div><q-btn color="white" @click="add('p')" text-color="black" label="↑" /></div>
|
<div><q-btn size="sm" color="white" @click="add('p')" text-color="black" label="↑" /></div>
|
||||||
<q-slider v-model="array[group].p" :min="0" @change="chang('p')" :max="16" :step="0.01" color="green"
|
<q-slider style="height: 10rem;" v-model="array[group].p" :min="0" @change="chang('p')" :max="16" :step="0.01" color="green"
|
||||||
vertical reverse label-always />
|
vertical reverse label-always />
|
||||||
<div><q-btn color="white" @click="reduce('p')" text-color="black" label="↓" /></div>
|
<div><q-btn size="sm" color="white" @click="reduce('p')" text-color="black" label="↓" /></div>
|
||||||
<p class="text-center">p</p>
|
<p class="text-center">p</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div><q-btn color="white" @click="add('gamma')" text-color="black" label="↑" /></div>
|
<div><q-btn size="sm" color="white" @click="add('gamma')" text-color="black" label="↑" /></div>
|
||||||
<q-slider v-model="array[group].gamma" :min="0" @change="chang('gamma')" :max="16" :step="0.01" color="green"
|
<q-slider style="height: 10rem;" v-model="array[group].gamma" :min="0" @change="chang('gamma')" :max="16" :step="0.01" color="green"
|
||||||
vertical reverse label-always />
|
vertical reverse label-always />
|
||||||
<div><q-btn color="white" @click="reduce('gamma')" text-color="black" label="↓" /></div>
|
<div><q-btn size="sm" color="white" @click="reduce('gamma')" text-color="black" label="↓" /></div>
|
||||||
<p class="text-center">gamma</p>
|
<p class="text-center">gamma</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -44,30 +44,6 @@
|
||||||
</div>
|
</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>{{ $t('center line color') }}</span></div>
|
|
||||||
<div class="col-8 border" @click="isshowhex = true; index = 2" :style="{ 'background-color': color[2] }"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div><q-checkbox v-model="RowsColumns[2]" @update:model-value="send_off(2)" /></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>{{ $t('center circle color') }}</span></div>
|
|
||||||
<div class="col-8 border" @click="isshowhex = true; index = 3" :style="{ 'background-color': color[3] }"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div><q-checkbox v-model="RowsColumns[3]" @update:model-value="send_off(3)" /></div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isshowhex" style="margin: 0 auto;text-align: center;"><q-color no-header-tabs no-footer
|
<div v-if="isshowhex" style="margin: 0 auto;text-align: center;"><q-color no-header-tabs no-footer
|
||||||
|
@ -163,8 +139,10 @@ export default defineComponent({
|
||||||
model[0] = Number(server_conf.blending_grids_row)
|
model[0] = Number(server_conf.blending_grids_row)
|
||||||
model[1] = Number(server_conf.blending_grids_column)
|
model[1] = Number(server_conf.blending_grids_column)
|
||||||
color[0] = server_conf.blending_grids_line_color
|
color[0] = server_conf.blending_grids_line_color
|
||||||
|
|
||||||
RowsColumns[0] = server_conf.blending_grids_show_row === "false" ? false : true
|
RowsColumns[0] = server_conf.blending_grids_show_row === "false" ? false : true
|
||||||
RowsColumns[1] = server_conf.blending_grids_show_column === "false" ? false : true
|
RowsColumns[1] = server_conf.blending_grids_show_column === "false" ? false : true
|
||||||
|
|
||||||
}
|
}
|
||||||
use_server_config()
|
use_server_config()
|
||||||
|
|
||||||
|
|
|
@ -57,43 +57,43 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<div ref="div" style="background-color: #7fffd4; height: 40vh">
|
<div ref="div" style="background-color: #646464; height: 40vh">
|
||||||
<div style="position: absolute">
|
<div style="position: absolute">
|
||||||
<vue3ResizeDrag :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="30" :h="20" :x="ninepostion[0].x"
|
<vue3ResizeDrag :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="20" :h="20" :x="ninepostion[0].x"
|
||||||
:y="ninepostion[0].y" @mousedown="activeMouseDown(0)" :isResizable="false" @moveHandler="moveHandler_1">
|
:y="ninepostion[0].y" @mousedown="activeMouseDown(0)" :isResizable="false" @moveHandler="moveHandler_1">
|
||||||
<span>{{ $t("point") }}1</span>
|
<div class="point">1</div>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="30" :h="20" :x="ninepostion[1].x"
|
<vue3ResizeDrag :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="20" :h="20" :x="ninepostion[1].x"
|
||||||
:y="ninepostion[1].y" @mousedown="activeMouseDown(1)" :isResizable="false" @moveHandler="moveHandler_2">
|
:y="ninepostion[1].y" @mousedown="activeMouseDown(1)" :isResizable="false" @moveHandler="moveHandler_2">
|
||||||
<span>{{ $t("point") }}2</span>
|
<div class="point">2</div>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="30" :h="20" :x="ninepostion[2].x"
|
<vue3ResizeDrag :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="20" :h="20" :x="ninepostion[2].x"
|
||||||
:y="ninepostion[2].y" @mousedown="activeMouseDown(2)" :isResizable="false" @moveHandler="moveHandler_3">
|
:y="ninepostion[2].y" @mousedown="activeMouseDown(2)" :isResizable="false" @moveHandler="moveHandler_3">
|
||||||
<span>{{ $t("point") }}3</span>
|
<div class="point">3</div>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="30" :h="20" :x="ninepostion[3].x"
|
<vue3ResizeDrag :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="20" :h="20" :x="ninepostion[3].x"
|
||||||
:y="ninepostion[3].y" @mousedown="activeMouseDown(3)" :isResizable="false" @moveHandler="moveHandler_4">
|
:y="ninepostion[3].y" @mousedown="activeMouseDown(3)" :isResizable="false" @moveHandler="moveHandler_4">
|
||||||
<span>{{ $t("point") }}4</span>
|
<div class="point">4</div>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="30" :h="20" :x="ninepostion[4].x"
|
<vue3ResizeDrag :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="20" :h="20" :x="ninepostion[4].x"
|
||||||
:y="ninepostion[4].y" @mousedown="activeMouseDown(4)" :isResizable="false" @moveHandler="moveHandler_5">
|
:y="ninepostion[4].y" @mousedown="activeMouseDown(4)" :isResizable="false" @moveHandler="moveHandler_5">
|
||||||
<span>{{ $t("point") }}5</span>
|
<div class="point">5</div>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="30" :h="20" :x="ninepostion[5].x"
|
<vue3ResizeDrag :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="20" :h="20" :x="ninepostion[5].x"
|
||||||
:y="ninepostion[5].y" @mousedown="activeMouseDown(5)" :isResizable="false" @moveHandler="moveHandler_6">
|
:y="ninepostion[5].y" @mousedown="activeMouseDown(5)" :isResizable="false" @moveHandler="moveHandler_6">
|
||||||
<span>{{ $t("point") }}6</span>
|
<div class="point">6</div>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="30" :h="20" :x="ninepostion[6].x"
|
<vue3ResizeDrag :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="20" :h="20" :x="ninepostion[6].x"
|
||||||
:y="ninepostion[6].y" @mousedown="activeMouseDown(6)" :isResizable="false" @moveHandler="moveHandler_7">
|
:y="ninepostion[6].y" @mousedown="activeMouseDown(6)" :isResizable="false" @moveHandler="moveHandler_7">
|
||||||
<span>{{ $t("point") }}7</span>
|
<div class="point">7</div>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[7]" v-if="isshowarray[7]" :w="30" :h="20" :x="ninepostion[7].x"
|
<vue3ResizeDrag :isActive="isactivearray[7]" v-if="isshowarray[7]" :w="20" :h="20" :x="ninepostion[7].x"
|
||||||
:y="ninepostion[7].y" @mousedown="activeMouseDown(7)" :isResizable="false" @moveHandler="moveHandler_8">
|
:y="ninepostion[7].y" @mousedown="activeMouseDown(7)" :isResizable="false" @moveHandler="moveHandler_8">
|
||||||
<span>{{ $t("point") }}8</span>
|
<div class="point">8</div>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
<vue3ResizeDrag :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="30" :h="20" :x="ninepostion[8].x"
|
<vue3ResizeDrag :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="20" :h="20" :x="ninepostion[8].x"
|
||||||
:y="ninepostion[8].y" @mousedown="activeMouseDown(8)" :isResizable="false" @moveHandler="moveHandler_9">
|
:y="ninepostion[8].y" @mousedown="activeMouseDown(8)" :isResizable="false" @moveHandler="moveHandler_9">
|
||||||
<span>{{ $t("point") }}9</span>
|
<div class="point">9</div>
|
||||||
</vue3ResizeDrag>
|
</vue3ResizeDrag>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -151,7 +151,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.point{
|
||||||
|
width: 100%;height: 100%;border-radius: 50%;background: #00ff00;color: aliceblue;
|
||||||
|
}
|
||||||
</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";
|
||||||
|
@ -477,35 +479,35 @@ export default defineComponent({
|
||||||
ninepostion.value[0].x = 0;
|
ninepostion.value[0].x = 0;
|
||||||
ninepostion.value[0].y = 0;
|
ninepostion.value[0].y = 0;
|
||||||
|
|
||||||
ninepostion.value[1].x = div.value.offsetWidth / 2 - 25;
|
ninepostion.value[1].x = div.value.offsetWidth / 2 - 20;
|
||||||
ninepostion.value[1].y = 0;
|
ninepostion.value[1].y = 0;
|
||||||
|
|
||||||
ninepostion.value[2].x = div.value.offsetWidth - 25;
|
ninepostion.value[2].x = div.value.offsetWidth - 20;
|
||||||
ninepostion.value[2].y = 0;
|
ninepostion.value[2].y = 0;
|
||||||
|
|
||||||
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;
|
||||||
|
|
||||||
ninepostion.value[4].x = div.value.offsetWidth / 2 - 25;
|
ninepostion.value[4].x = div.value.offsetWidth / 2 - 20;
|
||||||
ninepostion.value[4].y = div.value.offsetHeight / 2 - 8;
|
ninepostion.value[4].y = div.value.offsetHeight / 2 - 8;
|
||||||
|
|
||||||
ninepostion.value[5].x = div.value.offsetWidth - 25;
|
ninepostion.value[5].x = div.value.offsetWidth - 20;
|
||||||
ninepostion.value[5].y = div.value.offsetHeight / 2;
|
ninepostion.value[5].y = div.value.offsetHeight / 2;
|
||||||
|
|
||||||
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 - 20;
|
||||||
|
|
||||||
ninepostion.value[7].x = div.value.offsetWidth / 2 - 8;
|
ninepostion.value[7].x = div.value.offsetWidth / 2 - 8;
|
||||||
ninepostion.value[7].y = div.value.offsetHeight - 25;
|
ninepostion.value[7].y = div.value.offsetHeight - 20;
|
||||||
|
|
||||||
ninepostion.value[8].x = div.value.offsetWidth - 25;
|
ninepostion.value[8].x = div.value.offsetWidth - 20;
|
||||||
ninepostion.value[8].y = div.value.offsetHeight - 25;
|
ninepostion.value[8].y = div.value.offsetHeight - 20;
|
||||||
|
|
||||||
Proportion.value.x = config.width / (div.value.offsetWidth - 25);
|
Proportion.value.x = config.width / (div.value.offsetWidth - 20);
|
||||||
Proportion.value.y = config.height / (div.value.offsetHeight - 25);
|
Proportion.value.y = config.height / (div.value.offsetHeight - 20);
|
||||||
|
|
||||||
centor.value.x = (config.width * 2) / (div.value.offsetWidth + 25);
|
centor.value.x = (config.width * 2) / (div.value.offsetWidth + 20);
|
||||||
centor.value.y = (config.height * 2) / (div.value.offsetHeight + 25);
|
centor.value.y = (config.height * 2) / (div.value.offsetHeight + 20);
|
||||||
|
|
||||||
for (let index = 0; index < defaultninepostion.value.length; index++) {
|
for (let index = 0; index < defaultninepostion.value.length; index++) {
|
||||||
defaultninepostion.value[index].x = ninepostion.value[index].x;
|
defaultninepostion.value[index].x = ninepostion.value[index].x;
|
||||||
|
|
|
@ -4,9 +4,12 @@
|
||||||
if (evt.keyCode == 27) {
|
if (evt.keyCode == 27) {
|
||||||
show_dialog = false;
|
show_dialog = false;
|
||||||
}
|
}
|
||||||
|
if (evt.keyCode == 17) {
|
||||||
|
record_times++
|
||||||
|
}
|
||||||
}
|
}
|
||||||
">
|
">
|
||||||
<q-card class="" style="max-width: 90vw">
|
<q-card class="" style="max-width: 90vw;padding: 0;">
|
||||||
<q-form>
|
<q-form>
|
||||||
<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">
|
||||||
|
@ -15,20 +18,19 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn flat round icon="close" color="red" @click="clear()" v-close-popup>
|
<q-btn size="sm" dense flat round icon="close" color="red" @click="clear()" v-close-popup>
|
||||||
<q-tooltip>
|
<q-tooltip>
|
||||||
{{ $t("close") }}
|
{{ $t("close") }}
|
||||||
</q-tooltip>
|
</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<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: 80vw">
|
<q-card-section class="scroll" style="width: 60vw;padding: 0;">
|
||||||
<div class="row" style="border: 1px solid #b0bec5; text-align: center">
|
<div class="row" style="border: 1px solid #b0bec5; text-align: center">
|
||||||
<div class="col-3" style="border-right: 1px solid #b0bec5">
|
<div class="col-2" style="border-right: 1px solid #b0bec5">
|
||||||
<p class="text-center">{{ $t("Projector") }}</p>
|
<p class="text-center">{{ $t("Projector") }}</p>
|
||||||
<!-- row 在前col在后 -->
|
<!-- row 在前col在后 -->
|
||||||
<div v-for="(item, index_row) in config.row">
|
<div v-for="(item, index_row) in config.row">
|
||||||
|
@ -43,7 +45,7 @@
|
||||||
}}<q-checkbox v-model="EnableBlending" />
|
}}<q-checkbox v-model="EnableBlending" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-9">
|
<div class="col-10">
|
||||||
<div class="q-ta-md">
|
<div class="q-ta-md">
|
||||||
<q-btn-toggle :disable="!$store.state.enablefusion" no-caps v-model="options" toggle-color="primary"
|
<q-btn-toggle :disable="!$store.state.enablefusion" no-caps v-model="options" toggle-color="primary"
|
||||||
:options="[
|
:options="[
|
||||||
|
@ -73,15 +75,17 @@
|
||||||
<q-separator />
|
<q-separator />
|
||||||
|
|
||||||
<q-card-actions align="right">
|
<q-card-actions align="right">
|
||||||
<span>{{ $t("Whether to hide the desktop") }}</span><q-checkbox style="justify-content: flex-start"
|
<span v-show="isdebug">{{ $t("Whether to hide the desktop") }}</span><q-checkbox v-show="isdebug" style="justify-content: flex-start"
|
||||||
v-model="hide_desktop_value" @click="send_hide_desktop" />
|
v-model="hide_desktop_value" @click="send_hide_desktop" />
|
||||||
<span>{{ $t("disable blending params") }}</span>
|
<span>{{ $t("disable blending params") }}</span>
|
||||||
<q-checkbox style="justify-content: flex-start" v-model="disable_blending_params"
|
<q-checkbox style="justify-content: flex-start" v-model="disable_blending_params"
|
||||||
@click="send_disable_blending_params" />
|
@click="send_disable_blending_params" />
|
||||||
<span>{{ $t("show blending grids") }}</span>
|
<span>{{ $t("show blending grids") }}</span>
|
||||||
<q-checkbox style="justify-content: flex-start" v-model="show_blending_grids"
|
<q-checkbox style="justify-content: flex-start" v-model="show_blending_grids"
|
||||||
@click="send_show_blending_grids" />
|
@click="send_show_blending_grids" />
|
||||||
<div class="q-space" data-v-39efcd1f=""></div>
|
<div class="q-space" data-v-39efcd1f=""></div>
|
||||||
|
<div v-show="!isdebug" class="q-space" data-v-39efcd1f=""></div>
|
||||||
|
<div v-show="!isdebug" class="q-space" data-v-39efcd1f=""></div>
|
||||||
<q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall config')" />
|
<q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall config')" />
|
||||||
<div class="q-space" data-v-39efcd1f=""></div>
|
<div class="q-space" data-v-39efcd1f=""></div>
|
||||||
<q-btn flat :label="$t('Select saved configuration')" no-caps color="primary"
|
<q-btn flat :label="$t('Select saved configuration')" no-caps color="primary"
|
||||||
|
@ -99,13 +103,13 @@
|
||||||
<div class="text-h6">{{ $t('Whether to save the configuration') }}</div>
|
<div class="text-h6">{{ $t('Whether to save the configuration') }}</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-card-section class="q-pt-none">
|
<q-card-section class="q-pt-none">
|
||||||
<q-input filled v-model="save_name" :label="$t('New Please enter a name')" />
|
<q-select filled :model-value="save_cover_name" use-input hide-selected fill-input input-debounce="0"
|
||||||
<q-select v-show="save_name.length == 0" filled v-model="save_cover_name" :options="plan_list"
|
:options="plan_list_op" @filter="filterFn" @input-value="setModel">
|
||||||
:label="$t('Please select an override')" />
|
</q-select>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-card-actions align="right" class="bg-white text-teal">
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
<q-btn flat :label="$t('Cancel')" color="primary" v-close-popup />
|
<q-btn flat :label="$t('Cancel')" color="primary" v-close-popup />
|
||||||
<q-btn flat :label="$t('save')" color="primary" v-close-popup />
|
<q-btn flat :label="$t('save')" @click="saveconfig" color="primary" v-close-popup />
|
||||||
</q-card-actions>
|
</q-card-actions>
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
|
@ -241,6 +245,7 @@ export default defineComponent({
|
||||||
set?.SaveBlendingConfig("");
|
set?.SaveBlendingConfig("");
|
||||||
//show_dialog.value = false;
|
//show_dialog.value = false;
|
||||||
clear();
|
clear();
|
||||||
|
save_cover_name.value = save_name.value = ''
|
||||||
set?.GetBlendingConfig("").then((res) => {
|
set?.GetBlendingConfig("").then((res) => {
|
||||||
let tmp = JSON.parse(res ? res.config : "");
|
let tmp = JSON.parse(res ? res.config : "");
|
||||||
EnableBlending.value = tmp.enable;
|
EnableBlending.value = tmp.enable;
|
||||||
|
@ -262,6 +267,7 @@ export default defineComponent({
|
||||||
} catch (error) { }
|
} catch (error) { }
|
||||||
};
|
};
|
||||||
const clear = () => {
|
const clear = () => {
|
||||||
|
record_times.value = 0
|
||||||
show_blending_grids.value = false;
|
show_blending_grids.value = false;
|
||||||
send_show_blending_grids();
|
send_show_blending_grids();
|
||||||
$store.commit("setSelectedProjector", "0/0");
|
$store.commit("setSelectedProjector", "0/0");
|
||||||
|
@ -310,14 +316,59 @@ export default defineComponent({
|
||||||
});
|
});
|
||||||
}, 1000);
|
}, 1000);
|
||||||
});
|
});
|
||||||
const save_cover_name = ref(" ")
|
const save_cover_name = ref("")
|
||||||
const plan_list = [
|
const plan_list = [
|
||||||
'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
|
'1'
|
||||||
]
|
]
|
||||||
const apply_the_selected_configuration = () => {
|
const apply_the_selected_configuration = () => {
|
||||||
//这里根据选择的配置 应用
|
//这里根据选择的配置 应用
|
||||||
|
|
||||||
|
//console.log(select_configuration_name.value)
|
||||||
|
set?.ApplyBlendingScene(select_configuration_name.value);
|
||||||
|
|
||||||
|
let tmp = options.value
|
||||||
|
options.value = ""
|
||||||
|
getconfig()
|
||||||
|
setTimeout(() => {
|
||||||
|
options.value = tmp
|
||||||
|
}, 100);
|
||||||
}
|
}
|
||||||
|
const plan_list_op = ref(plan_list)
|
||||||
|
const filterFn = (val: any, update: any, abort: any) => {
|
||||||
|
update(() => {
|
||||||
|
const needle = val.toLocaleLowerCase()
|
||||||
|
plan_list_op.value = plan_list.filter(v => v.toLocaleLowerCase().indexOf(needle) > -1)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const record_times = ref(0)
|
||||||
|
const setModel = (val: string) => {
|
||||||
|
save_cover_name.value = val
|
||||||
|
}
|
||||||
|
|
||||||
|
const get_scenes = () => {
|
||||||
|
set?.EnumBlendingScene().then((res) => {
|
||||||
|
if (res == null || res.scenes.length == 0) return
|
||||||
|
plan_list.splice(0, plan_list.length);
|
||||||
|
for (let index = 0; index < res.scenes.length; index++) {
|
||||||
|
plan_list.push(res.scenes[index]);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
get_scenes()
|
||||||
|
const saveconfig = () => {
|
||||||
|
//save_cover_name
|
||||||
|
|
||||||
|
}
|
||||||
|
const isdebug = computed(() => {
|
||||||
|
let tmp = JSON.parse($store.state.fusion_configuration)
|
||||||
|
let str ='debug@show_mask'
|
||||||
|
return tmp.options[str]=='1'|| record_times.value>2
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
filterFn,
|
||||||
|
setModel,
|
||||||
send_hide_desktop,
|
send_hide_desktop,
|
||||||
hide_desktop_value,
|
hide_desktop_value,
|
||||||
send_disable_blending_params,
|
send_disable_blending_params,
|
||||||
|
@ -339,8 +390,11 @@ export default defineComponent({
|
||||||
plan_list,
|
plan_list,
|
||||||
select_configuration,
|
select_configuration,
|
||||||
select_configuration_name,
|
select_configuration_name,
|
||||||
apply_the_selected_configuration
|
apply_the_selected_configuration,
|
||||||
|
plan_list_op,
|
||||||
|
record_times,
|
||||||
|
saveconfig,
|
||||||
|
isdebug
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -707,5 +707,5 @@ export default {
|
||||||
"save":"保存",
|
"save":"保存",
|
||||||
"Whether to save the configuration":"是否保存配置",
|
"Whether to save the configuration":"是否保存配置",
|
||||||
"New Please enter a name":"新建 请输入名称",
|
"New Please enter a name":"新建 请输入名称",
|
||||||
"Please select an override":"请选择覆盖"
|
"Please select an override":"请选择覆盖",
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue