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

224
src/components/ControlPanelDialog.vue
View File

@ -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,72 +1222,97 @@ 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) {
// 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].currentx--;
test_monitor_wall.value[element].centerx--; test_monitor_wall.value[element].centerx--;
} }
}) }
}else{ });
} else {
// console.log("美金")
let min = min_x() ?? 0;
if (item.centerx > min) {
item.currentx--; item.currentx--;
item.centerx--; item.centerx--;
} }
}
}, },
sub_y(){ 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) {
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].currenty--;
test_monitor_wall.value[element].centery--; test_monitor_wall.value[element].centery--;
} }
}) }
}else{ });
} else {
let min = min_y() ?? 0;
if (item.centery > min) {
item.currenty--; item.currenty--;
item.centery--; item.centery--;
} }
}
}, },
add_x(){ 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) {
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].currentx++;
test_monitor_wall.value[element].centerx++; test_monitor_wall.value[element].centerx++;
} }
}) }
}else{ });
} else {
let max = max_x() ?? 0;
if (item.centerx < max) {
item.currentx++; item.currentx++;
item.centerx++; item.centerx++;
} }
}
}, },
add_y(){ add_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) {
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].currenty++;
test_monitor_wall.value[element].centery++; test_monitor_wall.value[element].centery++;
} }
}) }
}else{ });
} else {
let max = max_y() ?? 0;
if (item.centery < max) {
item.currenty++; item.currenty++;
item.centery++; item.centery++;
} }
}
}, },
}; };
}, },