lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

魔墙：修复单个选中移动超出

This commit is contained in:
miao 2022-12-29 15:24:35 +08:00
parent 4f83a9b0e5
commit 887407ddb9
1 changed files with 145 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

266
src/components/ControlPanelDialog.vue
View File

@ -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="
@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,71 +1222,96 @@ 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){
test_monitor_wall.value[element].currentx--;
test_monitor_wall.value[element].centerx--;
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{
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--;
});
} else {
// console.log("美金")
let min = min_x() ?? 0;
if (item.centerx > min) {
item.currentx--;
item.centerx--;
}
}
},
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){
test_monitor_wall.value[element].currentx++;
test_monitor_wall.value[element].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) {
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{
item.currentx++;
item.centerx++;
}
});
} else {
let min = min_y() ?? 0;
if (item.centery > min) {
item.currenty--;
item.centery--;
}
}
},
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){
test_monitor_wall.value[element].currenty++;
test_monitor_wall.value[element].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) {
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{
item.currenty++;
item.centery++;
});
} 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) {
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++;
}
}
},
};