增加125缩放下不显示滑动条

This commit is contained in:
shefengchun 2023-02-01 15:01:00 +08:00
parent 069ef341ce
commit 361c2c06c5
7 changed files with 210 additions and 150 deletions

View File

@ -2,47 +2,47 @@
<div class="row">
<div class="col-1"></div>
<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">
<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"
@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 :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"
@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 :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"
@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 :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"
@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 :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"
@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 :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"
@moveHandler="moveHandler($event, 5)"><span>h1</span>
@moveHandler="moveHandler($event, 5)"><span class="hcolro">H1</span>
</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"
@moveHandler="moveHandler($event, 6)"><span>h2</span>
@moveHandler="moveHandler($event, 6)"><span class="hcolro">H2</span>
</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"
@moveHandler="moveHandler($event, 7)"><span>h3</span>
@moveHandler="moveHandler($event, 7)"><span class="hcolro">H3</span>
</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"
@moveHandler="moveHandler($event, 8)"><span>h4</span>
@moveHandler="moveHandler($event, 8)"><span class="hcolro">H4</span>
</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"
@moveHandler="moveHandler($event, 9)"><span>h5</span>
@moveHandler="moveHandler($event, 9)"><span class="hcolro">H5</span>
</vue3ResizeDrag>
</div>
</div>
@ -55,7 +55,7 @@
<div class="col-8">
<q-input @focus="isactivearray[0] = false" filled type="number" class="q-pt-md" :dense="true"
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>
@ -65,7 +65,7 @@
<div class="col-8">
<q-input @focus="isactivearray[1] = false" filled type="number" class="q-pt-md" :dense="true"
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>
@ -75,7 +75,7 @@
<div class="col-8">
<q-input @focus="isactivearray[2] = false" filled type="number" class="q-pt-md" :dense="true"
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>
@ -85,7 +85,7 @@
<div class="col-8">
<q-input @focus="isactivearray[3] = false" filled type="number" class="q-pt-md" :dense="true"
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>
@ -95,7 +95,7 @@
<div class="col-8">
<q-input @focus="isactivearray[4] = false" filled type="number" class="q-pt-md" :dense="true"
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>
@ -107,31 +107,31 @@
<div class="box_son">
<q-input filled @focus="isactivearray[5] = false" type="number" class="q-pt-md" :dense="true"
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 class="box_son">
<q-input filled @focus="isactivearray[6] = false" type="number" class="q-pt-md" :dense="true"
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 class="box_son">
<q-input filled @focus="isactivearray[7] = false" type="number" class="q-pt-md" :dense="true"
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 class="box_son">
<q-input filled @focus="isactivearray[8] = false" type="number" class="q-pt-md" :dense="true"
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 class="box_son">
<q-input filled @focus="isactivearray[9] = false" type="number" class="q-pt-md" :dense="true"
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 class="box_son q-pt-xl">
@ -156,6 +156,18 @@
width: 10rem;
padding-right: 1rem;
}
.vcolro{
color: #d50000;
}
.hcolro{
color: #00c853;
font-size: 5px;
}
.p0{
margin: 0;
padding: 0;
line-height: 8px;
}
</style>
<script lang="ts">
import {
@ -440,10 +452,10 @@ export default defineComponent({
onMounted(() => {
initialization();
Proportion.value.x = config.width / (div.value.offsetWidth - 25);
Proportion.value.y = config.height / (div.value.offsetHeight - 25);
let Width = (div.value.offsetWidth - 25) / 4;
let Height = (div.value.offsetHeight - 25) / 4;
Proportion.value.x = config.width / (div.value.offsetWidth - 40);
Proportion.value.y = config.height / (div.value.offsetHeight - 30);
let Width = (div.value.offsetWidth - 40) / 4;
let Height = (div.value.offsetHeight - 30) / 4;
for (
let index = 0;
index < config.hor_density.length + config.ver_density.length;
@ -466,10 +478,10 @@ export default defineComponent({
return (() => {
if (div != null) {
initialization();
Proportion.value.x = config.width / (div.value.offsetWidth - 25);
Proportion.value.y = config.height / (div.value.offsetHeight - 25);
let Width = (div.value.offsetWidth - 25) / 4;
let Height = (div.value.offsetHeight - 25) / 4;
Proportion.value.x = config.width / (div.value.offsetWidth - 40);
Proportion.value.y = config.height / (div.value.offsetHeight - 30);
let Width = (div.value.offsetWidth - 40) / 4;
let Height = (div.value.offsetHeight - 30) / 4;
for (
let index = 0;
index < config.hor_density.length + config.ver_density.length;
@ -664,7 +676,11 @@ export default defineComponent({
}
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();
return {
model,
@ -678,6 +694,7 @@ export default defineComponent({
isshowarray,
isactivearray,
save,
creat_svg
};
},
});

View File

@ -4,7 +4,7 @@
<q-input
filled
type="number"
class="q-pt-md"
class="q-pt-xs"
style="text-align: center"
:dense="true"
@focus="isactivearray[0] = false"
@ -15,7 +15,7 @@
<q-input
filled
type="number"
class="q-pt-md"
class="q-pt-xs"
:dense="true"
@focus="isactivearray[0] = false"
v-model="four[0].y"
@ -23,6 +23,7 @@
lazy-rules
/>
<q-btn
size="sm" dense
color="white"
@click="reset(0)"
text-color="black"
@ -34,7 +35,7 @@
<q-input
filled
type="number"
class="q-pt-md"
class="q-pt-xs"
:dense="true"
@focus="isactivearray[1] = false"
v-model="four[1].x"
@ -44,7 +45,7 @@
<q-input
filled
type="number"
class="q-pt-md"
class="q-pt-xs"
:dense="true"
@focus="isactivearray[1] = false"
v-model="four[1].y"
@ -52,6 +53,7 @@
lazy-rules
/>
<q-btn
size="sm" dense
color="white"
@click="reset(1)"
text-color="black"
@ -61,59 +63,59 @@
<div class="col-2"></div>
<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">
<vue3ResizeDrag
v-if="isshowarray[0]"
:isActive="isactivearray[0]"
@mousedown="activeMouseDown(0)"
@mouseUpHandler="mouseUpHandler(0)"
:w="30"
:w="20"
:h="20"
:x="points[0].x"
:y="points[0].y"
:isResizable="false"
@moveHandler="moveHandler_1"
><span>{{ $t("point") }}1</span>
><div class="point">1</div>
</vue3ResizeDrag>
<vue3ResizeDrag
v-if="isshowarray[1]"
:isActive="isactivearray[1]"
@mousedown="activeMouseDown(1)"
@mouseUpHandler="mouseUpHandler(1)"
:w="30"
:w="20"
:h="20"
:x="points[1].x"
:y="points[1].y"
:isResizable="false"
@moveHandler="moveHandler_2"
><span>{{ $t("point") }}2</span>
><div class="point">2</div>
</vue3ResizeDrag>
<vue3ResizeDrag
v-if="isshowarray[2]"
:isActive="isactivearray[2]"
@mousedown="activeMouseDown(2)"
@mouseUpHandler="mouseUpHandler(2)"
:w="30"
:w="20"
:h="20"
:x="points[2].x"
:y="points[2].y"
:isResizable="false"
@moveHandler="moveHandler_3"
><span>{{ $t("point") }}3</span>
><div class="point">3</div>
</vue3ResizeDrag>
<vue3ResizeDrag
v-if="isshowarray[3]"
:isActive="isactivearray[3]"
@mousedown="activeMouseDown(3)"
@mouseUpHandler="mouseUpHandler(3)"
:w="30"
:w="20"
:h="20"
:x="points[3].x"
:y="points[3].y"
:isResizable="false"
@moveHandler="moveHandler_4"
><span>{{ $t("point") }}4</span>
><div class="point">4</div>
</vue3ResizeDrag>
</div>
</div>
@ -124,7 +126,7 @@
<q-input
filled
type="number"
class="q-pt-md"
class="q-pt-xs"
:dense="true"
@focus="isactivearray[2] = false"
v-model="four[2].x"
@ -134,7 +136,7 @@
<q-input
filled
type="number"
class="q-pt-md"
class="q-pt-xs"
:dense="true"
@focus="isactivearray[2] = false"
v-model="four[2].y"
@ -142,6 +144,7 @@
lazy-rules
/>
<q-btn
size="sm" dense
color="white"
@click="reset(2)"
text-color="black"
@ -150,6 +153,7 @@
</div>
<div class="col-8">
<q-btn
size="sm" dense
color="white"
@click="resetall"
text-color="black"
@ -160,7 +164,7 @@
<q-input
filled
type="number"
class="q-pt-md"
class=""
:dense="true"
@focus="isactivearray[3] = false"
v-model="four[3].x"
@ -178,6 +182,7 @@
lazy-rules
/>
<q-btn
size="sm" dense
color="white"
@click="reset(3)"
text-color="black"
@ -187,7 +192,11 @@
</div>
</template>
<style scoped></style>
<style scoped>
.point{
width: 100%;height: 100%;border-radius: 50%;background: #0000ff;color: aliceblue;
}
</style>
<script lang="ts">
import vue3ResizeDrag from "src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
import { dom } from "quasar";

View File

@ -11,7 +11,7 @@
<q-toggle class="float-right" v-model="array[0].isshow" label="" />
</div>
<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
:rules="[
(val) =>
@ -33,7 +33,7 @@
<q-toggle class="float-right" v-model="array[1].isshow" label="" />
</div>
<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
:rules="[
(val) =>
@ -51,7 +51,7 @@
<q-toggle class="float-right" v-model="array[2].isshow" label="" />
</div>
<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
:rules="[
(val) =>
@ -75,7 +75,7 @@
<q-toggle class="float-right" v-model="array[3].isshow" label="" />
</div>
<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
:rules="[
(val) =>
@ -92,29 +92,29 @@
</div>
</div>
<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>
<div><q-btn 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"
<div><q-btn size="sm" color="white" @click="add('alpha')" text-color="black" label="↑" /></div>
<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 />
<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>
</div>
<div>
<div><q-btn 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"
<div><q-btn size="sm" color="white" @click="add('p')" text-color="black" label="↑" /></div>
<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 />
<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>
</div>
<div>
<div><q-btn 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"
<div><q-btn size="sm" color="white" @click="add('gamma')" text-color="black" label="↑" /></div>
<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 />
<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>
</div>
</div>

View File

@ -44,30 +44,6 @@
</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 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[1] = Number(server_conf.blending_grids_column)
color[0] = server_conf.blending_grids_line_color
RowsColumns[0] = server_conf.blending_grids_show_row === "false" ? false : true
RowsColumns[1] = server_conf.blending_grids_show_column === "false" ? false : true
}
use_server_config()

View File

@ -57,43 +57,43 @@
</div>
</div>
<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">
<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">
<span>{{ $t("point") }}1</span>
<div class="point">1</div>
</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">
<span>{{ $t("point") }}2</span>
<div class="point">2</div>
</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">
<span>{{ $t("point") }}3</span>
<div class="point">3</div>
</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">
<span>{{ $t("point") }}4</span>
<div class="point">4</div>
</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">
<span>{{ $t("point") }}5</span>
<div class="point">5</div>
</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">
<span>{{ $t("point") }}6</span>
<div class="point">6</div>
</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">
<span>{{ $t("point") }}7</span>
<div class="point">7</div>
</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">
<span>{{ $t("point") }}8</span>
<div class="point">8</div>
</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">
<span>{{ $t("point") }}9</span>
<div class="point">9</div>
</vue3ResizeDrag>
</div>
</div>
@ -151,7 +151,9 @@
</template>
<style scoped>
.point{
width: 100%;height: 100%;border-radius: 50%;background: #00ff00;color: aliceblue;
}
</style>
<script lang="ts">
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].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[2].x = div.value.offsetWidth - 25;
ninepostion.value[2].x = div.value.offsetWidth - 20;
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].x = div.value.offsetWidth / 2 - 20;
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[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].y = div.value.offsetHeight - 25;
ninepostion.value[7].y = div.value.offsetHeight - 20;
ninepostion.value[8].x = div.value.offsetWidth - 25;
ninepostion.value[8].y = div.value.offsetHeight - 25;
ninepostion.value[8].x = div.value.offsetWidth - 20;
ninepostion.value[8].y = div.value.offsetHeight - 20;
Proportion.value.x = config.width / (div.value.offsetWidth - 25);
Proportion.value.y = config.height / (div.value.offsetHeight - 25);
Proportion.value.x = config.width / (div.value.offsetWidth - 20);
Proportion.value.y = config.height / (div.value.offsetHeight - 20);
centor.value.x = (config.width * 2) / (div.value.offsetWidth + 25);
centor.value.y = (config.height * 2) / (div.value.offsetHeight + 25);
centor.value.x = (config.width * 2) / (div.value.offsetWidth + 20);
centor.value.y = (config.height * 2) / (div.value.offsetHeight + 20);
for (let index = 0; index < defaultninepostion.value.length; index++) {
defaultninepostion.value[index].x = ninepostion.value[index].x;

View File

@ -4,9 +4,12 @@
if (evt.keyCode == 27) {
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-card-section class="q-ma-none q-pa-sm">
<div class="row">
@ -15,20 +18,19 @@
</div>
<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>
{{ $t("close") }}
</q-tooltip>
</q-btn>
<div></div>
</div>
</q-card-section>
<q-separator />
<!-- 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="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>
<!-- row 在前col在后 -->
<div v-for="(item, index_row) in config.row">
@ -43,7 +45,7 @@
}}<q-checkbox v-model="EnableBlending" />
</div>
</div>
<div class="col-9">
<div class="col-10">
<div class="q-ta-md">
<q-btn-toggle :disable="!$store.state.enablefusion" no-caps v-model="options" toggle-color="primary"
:options="[
@ -73,15 +75,17 @@
<q-separator />
<q-card-actions align="right">
<span>{{ $t("Whether to hide the desktop") }}</span><q-checkbox style="justify-content: flex-start"
v-model="hide_desktop_value" @click="send_hide_desktop" />
<span>{{ $t("disable blending params") }}</span>
<q-checkbox style="justify-content: flex-start" v-model="disable_blending_params"
@click="send_disable_blending_params" />
<span>{{ $t("show blending grids") }}</span>
<q-checkbox style="justify-content: flex-start" v-model="show_blending_grids"
@click="send_show_blending_grids" />
<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" />
<span>{{ $t("disable blending params") }}</span>
<q-checkbox style="justify-content: flex-start" v-model="disable_blending_params"
@click="send_disable_blending_params" />
<span>{{ $t("show blending grids") }}</span>
<q-checkbox style="justify-content: flex-start" v-model="show_blending_grids"
@click="send_show_blending_grids" />
<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')" />
<div class="q-space" data-v-39efcd1f=""></div>
<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>
</q-card-section>
<q-card-section class="q-pt-none">
<q-input filled v-model="save_name" :label="$t('New Please enter a name')" />
<q-select v-show="save_name.length == 0" filled v-model="save_cover_name" :options="plan_list"
:label="$t('Please select an override')" />
<q-select filled :model-value="save_cover_name" use-input hide-selected fill-input input-debounce="0"
:options="plan_list_op" @filter="filterFn" @input-value="setModel">
</q-select>
</q-card-section>
<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('save')" color="primary" v-close-popup />
<q-btn flat :label="$t('save')" @click="saveconfig" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
@ -241,6 +245,7 @@ export default defineComponent({
set?.SaveBlendingConfig("");
//show_dialog.value = false;
clear();
save_cover_name.value = save_name.value = ''
set?.GetBlendingConfig("").then((res) => {
let tmp = JSON.parse(res ? res.config : "");
EnableBlending.value = tmp.enable;
@ -262,6 +267,7 @@ export default defineComponent({
} catch (error) { }
};
const clear = () => {
record_times.value = 0
show_blending_grids.value = false;
send_show_blending_grids();
$store.commit("setSelectedProjector", "0/0");
@ -310,14 +316,59 @@ export default defineComponent({
});
}, 1000);
});
const save_cover_name = ref(" ")
const save_cover_name = ref("")
const plan_list = [
'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
'1'
]
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 {
filterFn,
setModel,
send_hide_desktop,
hide_desktop_value,
send_disable_blending_params,
@ -339,8 +390,11 @@ export default defineComponent({
plan_list,
select_configuration,
select_configuration_name,
apply_the_selected_configuration
apply_the_selected_configuration,
plan_list_op,
record_times,
saveconfig,
isdebug
};
},
});

View File

@ -707,5 +707,5 @@ export default {
"save":"保存",
"Whether to save the configuration":"是否保存配置",
"New Please enter a name":"新建 请输入名称",
"Please select an override":"请选择覆盖"
"Please select an override":"请选择覆盖",
};