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