魔墙:修复单个选中移动超出
This commit is contained in:
parent
4f83a9b0e5
commit
887407ddb9
|
@ -3,40 +3,56 @@
|
||||||
persistent
|
persistent
|
||||||
v-model="show_dialog"
|
v-model="show_dialog"
|
||||||
@before-hide="resetData"
|
@before-hide="resetData"
|
||||||
|
|
||||||
@keydown="
|
@keydown="
|
||||||
(evt) => {
|
(evt) => {
|
||||||
if (!loading && evt.keyCode == 27) {
|
if (!loading && evt.keyCode == 27) {
|
||||||
show_dialog = false;
|
show_dialog = false;
|
||||||
}
|
}
|
||||||
if(evt.keyCode == 37&&(current_index!=-1||multiple_select.length>1)){//左
|
if (
|
||||||
|
evt.keyCode == 37 &&
|
||||||
|
(current_index != -1 || multiple_select.length > 1)
|
||||||
|
) {
|
||||||
|
//左
|
||||||
sub_x();
|
sub_x();
|
||||||
}
|
}
|
||||||
if(evt.keyCode==38&&(current_index!=-1||multiple_select.length>1)){//上
|
if (
|
||||||
|
evt.keyCode == 38 &&
|
||||||
|
(current_index != -1 || multiple_select.length > 1)
|
||||||
|
) {
|
||||||
|
//上
|
||||||
sub_y();
|
sub_y();
|
||||||
}
|
}
|
||||||
if(evt.keyCode==39&&(current_index!=-1||multiple_select.length>1)){//右
|
if (
|
||||||
|
evt.keyCode == 39 &&
|
||||||
|
(current_index != -1 || multiple_select.length > 1)
|
||||||
|
) {
|
||||||
|
//右
|
||||||
add_x();
|
add_x();
|
||||||
}
|
}
|
||||||
if(evt.keyCode==40&&(current_index!=-1||multiple_select.length>1)){//下
|
if (
|
||||||
|
evt.keyCode == 40 &&
|
||||||
|
(current_index != -1 || multiple_select.length > 1)
|
||||||
|
) {
|
||||||
|
//下
|
||||||
add_y();
|
add_y();
|
||||||
}
|
}
|
||||||
if(evt.keyCode==17){//ctrl
|
if (evt.keyCode == 17) {
|
||||||
multiple=true;
|
//ctrl
|
||||||
|
multiple = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
@keyup="
|
@keyup="
|
||||||
(evt) => {
|
(evt) => {
|
||||||
if(evt.keyCode==17){//ctrl
|
if (evt.keyCode == 17) {
|
||||||
multiple=false;
|
//ctrl
|
||||||
|
multiple = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
|
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
|
||||||
<q-form @submit="onSubmit">
|
<q-form @submit="onSubmit" >
|
||||||
<q-card-section class="q-ma-none q-pa-sm">
|
<q-card-section class="q-ma-none q-pa-sm">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto text-h6">
|
<div class="col-auto text-h6">
|
||||||
|
@ -315,9 +331,8 @@
|
||||||
</q-list>
|
</q-list>
|
||||||
</q-popup-proxy>
|
</q-popup-proxy>
|
||||||
{{ item.uuid }}
|
{{ item.uuid }}
|
||||||
<q-separator ></q-separator>
|
<q-separator></q-separator>
|
||||||
x:{{ item.centerx }}
|
x:{{ item.centerx }} y:{{ item.centery }}
|
||||||
y:{{ item.centery }}
|
|
||||||
</div>
|
</div>
|
||||||
</vue3-resize-drag>
|
</vue3-resize-drag>
|
||||||
</div>
|
</div>
|
||||||
|
@ -488,6 +503,7 @@ import MagicWallConfig from "src/entities/MagicWallConfig";
|
||||||
import { PointF } from "src/entities/RectF";
|
import { PointF } from "src/entities/RectF";
|
||||||
import { number } from "@intlify/core-base";
|
import { number } from "@intlify/core-base";
|
||||||
import EventBus, { EventNamesDefine } from "src/common/EventBus";
|
import EventBus, { EventNamesDefine } from "src/common/EventBus";
|
||||||
|
// import VeeValidate from 'vee-validate';
|
||||||
class test_monitor {
|
class test_monitor {
|
||||||
uuid = "";
|
uuid = "";
|
||||||
active = false;
|
active = false;
|
||||||
|
@ -555,7 +571,7 @@ export default defineComponent({
|
||||||
height: 0,
|
height: 0,
|
||||||
angle: 0,
|
angle: 0,
|
||||||
});
|
});
|
||||||
let multiple=ref(false);
|
let multiple = ref(false);
|
||||||
const aw = 128;
|
const aw = 128;
|
||||||
const ah = 72;
|
const ah = 72;
|
||||||
const bw = 160;
|
const bw = 160;
|
||||||
|
@ -651,7 +667,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
let test_monitor_wall: Ref<test_monitor[]> = ref([]);
|
let test_monitor_wall: Ref<test_monitor[]> = ref([]);
|
||||||
let multiple_select:Ref<number[]>=ref([]);
|
let multiple_select: Ref<number[]> = ref([]);
|
||||||
const set_x = () => {
|
const set_x = () => {
|
||||||
const wall_dom = wall.value;
|
const wall_dom = wall.value;
|
||||||
const item = test_monitor_wall.value[current_index.value];
|
const item = test_monitor_wall.value[current_index.value];
|
||||||
|
@ -665,13 +681,15 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const min_x = () => {
|
const min_x = (
|
||||||
|
item: test_monitor = test_monitor_wall.value[current_index.value]
|
||||||
|
) => {
|
||||||
|
console.log(item)
|
||||||
const wall_dom = wall.value;
|
const wall_dom = wall.value;
|
||||||
const item = test_monitor_wall.value[current_index.value];
|
|
||||||
const point_list = four_point();
|
const point_list = four_point();
|
||||||
if (wall_dom) {
|
if (wall_dom) {
|
||||||
if (item.angle != 0 && point_list) {
|
if (item.angle != 0 && point_list) {
|
||||||
let minx = 0;
|
let minx = 10000;
|
||||||
point_list.forEach((element) => {
|
point_list.forEach((element) => {
|
||||||
if (minx > element.x) {
|
if (minx > element.x) {
|
||||||
minx = element.x;
|
minx = element.x;
|
||||||
|
@ -680,16 +698,17 @@ export default defineComponent({
|
||||||
if (minx < 0) {
|
if (minx < 0) {
|
||||||
return Math.floor(item.w / 2 + item.currentx + Math.abs(minx));
|
return Math.floor(item.w / 2 + item.currentx + Math.abs(minx));
|
||||||
} else {
|
} else {
|
||||||
return Math.floor(item.w / 2);
|
return Math.floor(item.centerx-minx);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
return Math.floor(item.w / 2);
|
return Math.floor(item.w / 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const max_x = () => {
|
const max_x = (
|
||||||
|
item: test_monitor = test_monitor_wall.value[current_index.value]
|
||||||
|
) => {
|
||||||
const wall_dom = wall.value;
|
const wall_dom = wall.value;
|
||||||
const item = test_monitor_wall.value[current_index.value];
|
|
||||||
const point_list = four_point();
|
const point_list = four_point();
|
||||||
if (wall_dom) {
|
if (wall_dom) {
|
||||||
if (item.angle != 0 && point_list) {
|
if (item.angle != 0 && point_list) {
|
||||||
|
@ -703,8 +722,8 @@ export default defineComponent({
|
||||||
return Math.floor(
|
return Math.floor(
|
||||||
item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)
|
item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)
|
||||||
);
|
);
|
||||||
} else {
|
}else {
|
||||||
return Math.floor(wall_dom.offsetWidth - item.w / 2);
|
return Math.floor(maxx);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
return Math.floor(wall_dom.offsetWidth - item.w / 2);
|
return Math.floor(wall_dom.offsetWidth - item.w / 2);
|
||||||
|
@ -725,9 +744,10 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const min_y = () => {
|
const min_y = (
|
||||||
|
item: test_monitor = test_monitor_wall.value[current_index.value]
|
||||||
|
) => {
|
||||||
const wall_dom = wall.value;
|
const wall_dom = wall.value;
|
||||||
const item = test_monitor_wall.value[current_index.value];
|
|
||||||
const point_list = four_point();
|
const point_list = four_point();
|
||||||
if (wall_dom) {
|
if (wall_dom) {
|
||||||
if (item.angle != 0 && point_list) {
|
if (item.angle != 0 && point_list) {
|
||||||
|
@ -740,16 +760,17 @@ export default defineComponent({
|
||||||
if (miny < 0) {
|
if (miny < 0) {
|
||||||
return Math.floor(item.h / 2 + item.currenty + Math.abs(miny));
|
return Math.floor(item.h / 2 + item.currenty + Math.abs(miny));
|
||||||
} else {
|
} else {
|
||||||
return Math.floor(item.h / 2);
|
return Math.floor(miny);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
return Math.floor(item.h / 2);
|
return Math.floor(item.h / 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const max_y = () => {
|
const max_y = (
|
||||||
|
item: test_monitor = test_monitor_wall.value[current_index.value]
|
||||||
|
) => {
|
||||||
const wall_dom = wall.value;
|
const wall_dom = wall.value;
|
||||||
const item = test_monitor_wall.value[current_index.value];
|
|
||||||
const point_list = four_point();
|
const point_list = four_point();
|
||||||
if (wall_dom) {
|
if (wall_dom) {
|
||||||
if (item.angle != 0 && point_list) {
|
if (item.angle != 0 && point_list) {
|
||||||
|
@ -764,7 +785,7 @@ export default defineComponent({
|
||||||
item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)
|
item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return Math.floor(wall_dom.offsetHeight - item.h / 2);
|
return Math.floor(maxy);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
return Math.floor(wall_dom.offsetHeight - item.h / 2);
|
return Math.floor(wall_dom.offsetHeight - item.h / 2);
|
||||||
|
@ -823,26 +844,6 @@ export default defineComponent({
|
||||||
item.centery = Math.floor(item.currenty + item.h / 2);
|
item.centery = Math.floor(item.currenty + item.h / 2);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const isexceed = (element: test_monitor) => {
|
|
||||||
// element.currentx / wall_dom.offsetWidth
|
|
||||||
const wall_dom = wall.value;
|
|
||||||
if (wall_dom) {
|
|
||||||
let tepx = element.currentx / wall_dom.offsetWidth;
|
|
||||||
let tepy = element.currenty / wall_dom.offsetWidth;
|
|
||||||
if (tepx < 0) {
|
|
||||||
element.currentx = 0;
|
|
||||||
} else if (tepx > 1) {
|
|
||||||
element.currentx = wall_dom.offsetWidth;
|
|
||||||
}
|
|
||||||
if (tepy < 0) {
|
|
||||||
element.currenty = 0;
|
|
||||||
} else if (tepy > 1) {
|
|
||||||
element.currenty = wall_dom.offsetHeight;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return element;
|
|
||||||
};
|
|
||||||
|
|
||||||
const exceedrange = (item: test_monitor) => {
|
const exceedrange = (item: test_monitor) => {
|
||||||
const wall_dom = wall.value;
|
const wall_dom = wall.value;
|
||||||
let a = 0;
|
let a = 0;
|
||||||
|
@ -927,7 +928,6 @@ export default defineComponent({
|
||||||
max_y,
|
max_y,
|
||||||
moveMonitor,
|
moveMonitor,
|
||||||
moveingMonitor,
|
moveingMonitor,
|
||||||
isexceed,
|
|
||||||
loga(a: any) {
|
loga(a: any) {
|
||||||
console.log(a);
|
console.log(a);
|
||||||
},
|
},
|
||||||
|
@ -975,8 +975,8 @@ export default defineComponent({
|
||||||
test_monitor_wall.value = [];
|
test_monitor_wall.value = [];
|
||||||
current_index.value = -1;
|
current_index.value = -1;
|
||||||
percenter.value = 1;
|
percenter.value = 1;
|
||||||
multiple_select.value=[]
|
multiple_select.value = [];
|
||||||
multiple.value=false;
|
multiple.value = false;
|
||||||
test_monitor_list.value.forEach((element) => {
|
test_monitor_list.value.forEach((element) => {
|
||||||
element.isHide = false;
|
element.isHide = false;
|
||||||
});
|
});
|
||||||
|
@ -998,9 +998,6 @@ export default defineComponent({
|
||||||
let tep_width = 0;
|
let tep_width = 0;
|
||||||
test_monitor_wall.value.forEach((element, index) => {
|
test_monitor_wall.value.forEach((element, index) => {
|
||||||
if (element.isShow) {
|
if (element.isShow) {
|
||||||
//处理缩放后超出
|
|
||||||
// element=isexceed(element);
|
|
||||||
// console.log(wall_dom.offsetHeight)
|
|
||||||
cloud_monitor_list.windows.push({
|
cloud_monitor_list.windows.push({
|
||||||
index: element.id,
|
index: element.id,
|
||||||
lt: new PointF(
|
lt: new PointF(
|
||||||
|
@ -1019,7 +1016,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
|
const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
|
||||||
console.log(setMagic);
|
console.log(setMagic)
|
||||||
$q.notify({
|
$q.notify({
|
||||||
color: setMagic?.success ? "positive" : "negative",
|
color: setMagic?.success ? "positive" : "negative",
|
||||||
icon: setMagic?.success ? "done" : "warning",
|
icon: setMagic?.success ? "done" : "warning",
|
||||||
|
@ -1037,22 +1034,22 @@ export default defineComponent({
|
||||||
activeMouseDown(item: test_monitor, index: number) {
|
activeMouseDown(item: test_monitor, index: number) {
|
||||||
item.active = true;
|
item.active = true;
|
||||||
Unchecked.value = false;
|
Unchecked.value = false;
|
||||||
if(multiple.value){
|
if (multiple.value) {
|
||||||
if( multiple_select.value.indexOf(item.id)!=-1){
|
if (multiple_select.value.indexOf(index) != -1) {
|
||||||
test_monitor_wall.value[item.id].active=false;
|
test_monitor_wall.value[index].active = false;
|
||||||
multiple_select.value[multiple_select.value.indexOf(item.id)]=-1;
|
multiple_select.value[multiple_select.value.indexOf(index)] = -1;
|
||||||
}else{
|
} else {
|
||||||
multiple_select.value.push(item.id);
|
multiple_select.value.push(index);
|
||||||
test_monitor_wall.value[item.id].active=true;
|
test_monitor_wall.value[index].active = true;
|
||||||
current_index.value = index;
|
current_index.value = index;
|
||||||
}
|
}
|
||||||
}else{
|
} else {
|
||||||
multiple_select.value=[]
|
multiple_select.value = [];
|
||||||
if (item.active) {
|
if (item.active) {
|
||||||
test_monitor_wall.value.forEach((element) => {
|
test_monitor_wall.value.forEach((element) => {
|
||||||
element.active = false;
|
element.active = false;
|
||||||
});
|
});
|
||||||
multiple_select.value.push(item.id);
|
multiple_select.value.push(index);
|
||||||
}
|
}
|
||||||
item.active = true;
|
item.active = true;
|
||||||
}
|
}
|
||||||
|
@ -1144,6 +1141,7 @@ export default defineComponent({
|
||||||
current_index.value = -1;
|
current_index.value = -1;
|
||||||
test_monitor_list.value[item.id].isHide = false;
|
test_monitor_list.value[item.id].isHide = false;
|
||||||
test_monitor_wall.value[index].isShow = false;
|
test_monitor_wall.value[index].isShow = false;
|
||||||
|
multiple_select.value=[]
|
||||||
},
|
},
|
||||||
closeOtherWindows(item: test_monitor, index: number) {
|
closeOtherWindows(item: test_monitor, index: number) {
|
||||||
current_index.value = index;
|
current_index.value = index;
|
||||||
|
@ -1165,6 +1163,7 @@ export default defineComponent({
|
||||||
test_monitor_wall.value.forEach((element) => {
|
test_monitor_wall.value.forEach((element) => {
|
||||||
element.isShow = false;
|
element.isShow = false;
|
||||||
});
|
});
|
||||||
|
multiple_select.value=[]
|
||||||
},
|
},
|
||||||
box_width(row: number, col: number) {
|
box_width(row: number, col: number) {
|
||||||
let tep = JSON.parse(
|
let tep = JSON.parse(
|
||||||
|
@ -1223,71 +1222,96 @@ export default defineComponent({
|
||||||
element.active = false;
|
element.active = false;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
multiple_select.value=[]
|
multiple_select.value = [];
|
||||||
multiple.value=false;
|
multiple.value = false;
|
||||||
},
|
},
|
||||||
changeAngle() {
|
changeAngle() {
|
||||||
const wall_dom = wall.value;
|
const wall_dom = wall.value;
|
||||||
let item = test_monitor_wall.value[current_index.value];
|
let item = test_monitor_wall.value[current_index.value];
|
||||||
exceedrange(item);
|
exceedrange(item);
|
||||||
},
|
},
|
||||||
sub_x(){
|
sub_x() {
|
||||||
let item = test_monitor_wall.value[current_index.value]
|
let item = test_monitor_wall.value[current_index.value];
|
||||||
if(multiple_select.value.length>1){
|
if (multiple_select.value.length > 1) {
|
||||||
multiple_select.value.forEach((element)=>{
|
multiple_select.value.forEach((element) => {
|
||||||
if(element!=-1){
|
if (element != -1) {
|
||||||
test_monitor_wall.value[element].currentx--;
|
// console.log("这是第几个"+element)
|
||||||
test_monitor_wall.value[element].centerx--;
|
let min = min_x(test_monitor_wall.value[element]) ?? 0;
|
||||||
|
// console.log("这是最小值"+min)
|
||||||
|
// console.log("这是中心点"+test_monitor_wall.value[element].centerx)
|
||||||
|
if (test_monitor_wall.value[element].centerx > min) {
|
||||||
|
test_monitor_wall.value[element].currentx--;
|
||||||
|
test_monitor_wall.value[element].centerx--;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}else{
|
} else {
|
||||||
item.currentx--;
|
// console.log("美金")
|
||||||
item.centerx--;
|
let min = min_x() ?? 0;
|
||||||
}
|
if (item.centerx > min) {
|
||||||
|
item.currentx--;
|
||||||
},
|
item.centerx--;
|
||||||
sub_y(){
|
}
|
||||||
let item = test_monitor_wall.value[current_index.value]
|
|
||||||
if(multiple_select.value.length>1){
|
|
||||||
multiple_select.value.forEach((element)=>{
|
|
||||||
if(element!=-1){
|
|
||||||
test_monitor_wall.value[element].currenty--;
|
|
||||||
test_monitor_wall.value[element].centery--;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}else{
|
|
||||||
item.currenty--;
|
|
||||||
item.centery--;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
add_x(){
|
sub_y() {
|
||||||
let item = test_monitor_wall.value[current_index.value]
|
let item = test_monitor_wall.value[current_index.value];
|
||||||
if(multiple_select.value.length>1){
|
if (multiple_select.value.length > 1) {
|
||||||
multiple_select.value.forEach((element)=>{
|
multiple_select.value.forEach((element) => {
|
||||||
if(element!=-1){
|
if (element != -1) {
|
||||||
test_monitor_wall.value[element].currentx++;
|
let min = min_y(test_monitor_wall.value[element]) ?? 0;
|
||||||
test_monitor_wall.value[element].centerx++;
|
if (test_monitor_wall.value[element].centery > min) {
|
||||||
|
test_monitor_wall.value[element].currenty--;
|
||||||
|
test_monitor_wall.value[element].centery--;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}else{
|
} else {
|
||||||
item.currentx++;
|
let min = min_y() ?? 0;
|
||||||
item.centerx++;
|
if (item.centery > min) {
|
||||||
}
|
item.currenty--;
|
||||||
|
item.centery--;
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
add_y(){
|
add_x() {
|
||||||
let item = test_monitor_wall.value[current_index.value]
|
let item = test_monitor_wall.value[current_index.value];
|
||||||
if(multiple_select.value.length>1){
|
if (multiple_select.value.length > 1) {
|
||||||
multiple_select.value.forEach((element)=>{
|
multiple_select.value.forEach((element) => {
|
||||||
if(element!=-1){
|
if (element != -1) {
|
||||||
test_monitor_wall.value[element].currenty++;
|
let max = max_x(test_monitor_wall.value[element]) ?? 0;
|
||||||
test_monitor_wall.value[element].centery++;
|
if (test_monitor_wall.value[element].centerx < max) {
|
||||||
|
test_monitor_wall.value[element].currentx++;
|
||||||
|
test_monitor_wall.value[element].centerx++;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}else{
|
} else {
|
||||||
|
let max = max_x() ?? 0;
|
||||||
item.currenty++;
|
if (item.centerx < max) {
|
||||||
item.centery++;
|
item.currentx++;
|
||||||
|
item.centerx++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
add_y() {
|
||||||
|
let item = test_monitor_wall.value[current_index.value];
|
||||||
|
if (multiple_select.value.length > 1) {
|
||||||
|
multiple_select.value.forEach((element) => {
|
||||||
|
if (element != -1) {
|
||||||
|
let max = max_y(test_monitor_wall.value[element]) ?? 0;
|
||||||
|
if (test_monitor_wall.value[element].centery < max) {
|
||||||
|
test_monitor_wall.value[element].currenty++;
|
||||||
|
test_monitor_wall.value[element].centery++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
let max = max_y() ?? 0;
|
||||||
|
if (item.centery < max) {
|
||||||
|
item.currenty++;
|
||||||
|
item.centery++;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue