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-28 10:48:40 +08:00
parent 5f23bf8194
commit 330c8a205e
2 changed files with 354 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

387
src/components/ControlPanelDialog.vue
View File

@ -8,7 +8,20 @@
if (!loading && evt.keyCode == 27) { if (!loading && evt.keyCode == 27) {
show_dialog = false; show_dialog = false;
} }
if(evt.keyCode == 37){//左
sub_x();
} }
if(evt.keyCode==38){//上
add_y();
}
if(evt.keyCode==39){//右
add_x();
}
if(evt.keyCode==40){//下
sub_y();
}
}
" "
> >
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw"> <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
@ -434,7 +447,24 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, watch, computed, Ref, reactive } from "vue"; import { defineComponent, ref, watch, computed, Ref, reactive } from "vue";
import { useStore } from "src/store"; import { useStore } from "src/store";
import { useQuasar, extend, QBtn, QCard, QCardActions, QCardSection, QDialog, QInput, QItem, QItemLabel, QItemSection, QList, QPopupProxy, QSeparator, QSpace, QTooltip } from "quasar"; import {
useQuasar,
extend,
QBtn,
QCard,
QCardActions,
QCardSection,
QDialog,
QInput,
QItem,
QItemLabel,
QItemSection,
QList,
QPopupProxy,
QSeparator,
QSpace,
QTooltip,
} from "quasar";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData"; import GlobalData from "src/common/GlobalData";
import { HttpProtocol } from "src/entities/HttpProtocol"; import { HttpProtocol } from "src/entities/HttpProtocol";
@ -512,8 +542,10 @@ export default defineComponent({
angle: 0, angle: 0,
}); });
const aw = 128; const ah = 72; const aw = 128;
const bw = 160; const bh = 90; const ah = 72;
const bw = 160;
const bh = 90;
//调整与背景的百分比 //调整与背景的百分比
const percenter = ref(1); const percenter = ref(1);
const ar = 0.5; const ar = 0.5;
@ -538,48 +570,80 @@ export default defineComponent({
left: number; left: number;
top: number; top: number;
angle: number; angle: number;
}; }
let showMonitor = reactive({ let showMonitor = reactive({
x: 0, x: 0,
y: 0, y: 0,
width: 0, width: 0,
height: 0, height: 0,
active: false active: false,
}); });
const radians = () => { const radians = () => {
const item = test_monitor_wall.value[current_index.value] const item = test_monitor_wall.value[current_index.value];
return /*a*/ (item.angle * Math.PI) / 180; return /*a*/ (item.angle * Math.PI) / 180;
}; };
const calculateCoordinates=(px:number,py:number, cx:number,cy:number) =>{ const calculateCoordinates = (
const x =cx+(px-cx)*Math.cos(radians())-(py - cy) * Math.sin(radians()); px: number,
py: number,
cx: number,
cy: number
) => {
const x =
cx + (px - cx) * Math.cos(radians()) - (py - cy) * Math.sin(radians());
const y =cy+(px-cx)*Math.sin(radians())+(py - cy) * Math.cos(radians()); const y =
cy + (px - cx) * Math.sin(radians()) + (py - cy) * Math.cos(radians());
return { x, y }; return { x, y };
}; };
const four_point = () => { const four_point = () => {
const item = test_monitor_wall.value[current_index.value] const item = test_monitor_wall.value[current_index.value];
item.centerx = parseInt(item.centerx.toString()) item.centerx = parseInt(item.centerx.toString());
item.centery = parseInt(item.centery.toString()) item.centery = parseInt(item.centery.toString());
const x2: number = item.currentx + item.w; const x2: number = item.currentx + item.w;
const y2: number = item.currenty + item.h; const y2: number = item.currenty + item.h;
if (item.angle != 0) { if (item.angle != 0) {
const point_left_top=calculateCoordinates(item.currentx,item.currenty,item.centerx,item.centery); const point_left_top = calculateCoordinates(
const point_left_bootom=calculateCoordinates(item.currentx,y2,item.centerx,item.centery); item.currentx,
const point_right_top=calculateCoordinates(x2,item.currenty,item.centerx,item.centery); item.currenty,
const point_right_bottom=calculateCoordinates(x2,y2,item.centerx,item.centery); item.centerx,
const point_list=[point_left_top,point_left_bootom,point_right_top,point_right_bottom]; item.centery
);
const point_left_bootom = calculateCoordinates(
item.currentx,
y2,
item.centerx,
item.centery
);
const point_right_top = calculateCoordinates(
x2,
item.currenty,
item.centerx,
item.centery
);
const point_right_bottom = calculateCoordinates(
x2,
y2,
item.centerx,
item.centery
);
const point_list = [
point_left_top,
point_left_bootom,
point_right_top,
point_right_bottom,
];
return point_list; return point_list;
} }
}; };
let test_monitor_wall: Ref<test_monitor[]> = ref([]); let test_monitor_wall: Ref<test_monitor[]> = 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];
const rx: number = item.currentx + item.w; const rx: number = item.currentx + item.w;
if (wall_dom) { if (wall_dom) {
if (rx > wall_dom.offsetWidth) { if (rx > wall_dom.offsetWidth) {
item.currentx = wall_dom.offsetWidth - item.w item.currentx = wall_dom.offsetWidth - item.w;
return item.currentx; return item.currentx;
} else { } else {
return item.currentx; return item.currentx;
@ -587,8 +651,8 @@ export default defineComponent({
} }
}; };
const min_x = () => { const min_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];
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) {
@ -597,21 +661,20 @@ export default defineComponent({
if (minx > element.x) { if (minx > element.x) {
minx = element.x; minx = element.x;
} }
}) });
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.w / 2);
} }
} else { } else {
return Math.floor(item.w / 2) return Math.floor(item.w / 2);
} }
} }
}; };
const max_x = () => { const max_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];
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) {
@ -620,35 +683,36 @@ export default defineComponent({
if (maxx < element.x) { if (maxx < element.x) {
maxx = element.x; maxx = element.x;
} }
}) });
if (maxx > wall_dom.offsetWidth) { if (maxx > wall_dom.offsetWidth) {
return Math.floor(item.currentx+item.w/2-(maxx-wall_dom.offsetWidth)) return Math.floor(
item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)
);
} else { } else {
return Math.floor(wall_dom.offsetWidth - item.w / 2) return Math.floor(wall_dom.offsetWidth - item.w / 2);
} }
} else { } else {
return Math.floor(wall_dom.offsetWidth - item.w / 2) return Math.floor(wall_dom.offsetWidth - item.w / 2);
} }
} }
}; };
const set_y = () => { const set_y = () => {
//输入框正向溢出 //输入框正向溢出
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];
const ry: number = item.currenty + item.h; const ry: number = item.currenty + item.h;
if (wall_dom) { if (wall_dom) {
if (ry > wall_dom.offsetHeight) { if (ry > wall_dom.offsetHeight) {
item.currenty = wall_dom.offsetHeight - item.h item.currenty = wall_dom.offsetHeight - item.h;
return item.currenty; return item.currenty;
} else { } else {
return item.currenty; return item.currenty;
} }
} }
}; };
const min_y = () => { const min_y = () => {
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];
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) {
@ -657,21 +721,20 @@ export default defineComponent({
if (miny > element.y) { if (miny > element.y) {
miny = element.y; miny = element.y;
} }
}) });
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(item.h / 2);
} }
} else { } else {
return Math.floor(item.h / 2) return Math.floor(item.h / 2);
} }
} }
}; };
const max_y = () => { const max_y = () => {
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];
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) {
@ -680,67 +743,70 @@ export default defineComponent({
if (maxy < element.y) { if (maxy < element.y) {
maxy = element.y; maxy = element.y;
} }
}) });
if (maxy > wall_dom.offsetHeight) { if (maxy > wall_dom.offsetHeight) {
return Math.floor(item.currenty+item.h/2-(maxy-wall_dom.offsetHeight)) return Math.floor(
item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)
);
} else { } else {
return Math.floor(wall_dom.offsetHeight - item.h / 2) return Math.floor(wall_dom.offsetHeight - item.h / 2);
} }
} else { } else {
return Math.floor(wall_dom.offsetHeight - item.h / 2) return Math.floor(wall_dom.offsetHeight - item.h / 2);
} }
} }
}; };
const max_angle=()=>{ const max_angle = () => {};
};
let Unchecked = ref(false); let Unchecked = ref(false);
const moveingMonitor = (item: test_monitor, rect: show__Rect, index: number) => { const moveingMonitor = (
item: test_monitor,
rect: show__Rect,
index: number
) => {
item.active = true; item.active = true;
if (item.active) { if (item.active) {
test_monitor_wall.value.forEach(element => { test_monitor_wall.value.forEach((element) => {
element.active = false element.active = false;
}); });
} }
const wall_dom = wall.value const wall_dom = wall.value;
if (wall_dom) { if (wall_dom) {
item.h = item.InitialH * percenter.value; item.h = item.InitialH * percenter.value;
item.w = item.InitialW * percenter.value; item.w = item.InitialW * percenter.value;
} }
item.active = true; item.active = true;
item.currentx =rect.left item.currentx = rect.left;
item.currenty = rect.top item.currenty = rect.top;
item.centerx = Math.floor(item.currentx + item.w / 2) item.centerx = Math.floor(item.currentx + item.w / 2);
item.centery = Math.floor(item.currenty + item.h / 2) item.centery = Math.floor(item.currenty + item.h / 2);
if (Number.isNaN(rect.left || rect.left < 0)) { if (Number.isNaN(rect.left || rect.left < 0)) {
item.currentx = 0 item.currentx = 0;
} }
}; };
const moveMonitor = (item: test_monitor, rect: show__Rect) => { const moveMonitor = (item: test_monitor, rect: show__Rect) => {
//计算是否超出，然后放回 //计算是否超出，然后放回
const wall_dom = wall.value const wall_dom = wall.value;
if (item.angle != 0) { if (item.angle != 0) {
exceedrange(item); exceedrange(item);
} else { } else {
if (rect.left < 0) { if (rect.left < 0) {
item.currentx = 0 item.currentx = 0;
} else if (wall_dom && rect.left > wall_dom.offsetWidth - item.w) { } else if (wall_dom && rect.left > wall_dom.offsetWidth - item.w) {
item.currentx = Number(set_x()) ?? 0; item.currentx = Number(set_x()) ?? 0;
} else { } else {
item.currentx = rect.left item.currentx = rect.left;
} }
if (rect.top < 0) { if (rect.top < 0) {
item.currenty = 0 item.currenty = 0;
} else if (wall_dom && rect.top > wall_dom.offsetHeight - item.h) { } else if (wall_dom && rect.top > wall_dom.offsetHeight - item.h) {
item.currenty = set_y() ?? 0; item.currenty = set_y() ?? 0;
} else { } else {
item.currenty = rect.top item.currenty = rect.top;
} }
item.centerx = Math.floor(item.currentx + item.w / 2) item.centerx = Math.floor(item.currentx + item.w / 2);
item.centery = Math.floor(item.currenty + item.h / 2) item.centery = Math.floor(item.currenty + item.h / 2);
} }
}; };
const isexceed = (element: test_monitor) => { const isexceed = (element: test_monitor) => {
// element.currentx / wall_dom.offsetWidth // element.currentx / wall_dom.offsetWidth
@ -752,20 +818,18 @@ export default defineComponent({
element.currentx = 0; element.currentx = 0;
} else if (tepx > 1) { } else if (tepx > 1) {
element.currentx = wall_dom.offsetWidth; element.currentx = wall_dom.offsetWidth;
} }
if (tepy < 0) { if (tepy < 0) {
element.currenty = 0; element.currenty = 0;
} else if (tepy > 1) { } else if (tepy > 1) {
element.currenty = wall_dom.offsetHeight; element.currenty = wall_dom.offsetHeight;
} }
} }
return element; 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;
const point_list = four_point(); const point_list = four_point();
if (wall_dom && point_list) { if (wall_dom && point_list) {
@ -786,13 +850,13 @@ export default defineComponent({
if (maxy < element.y) { if (maxy < element.y) {
maxy = element.y; maxy = element.y;
} }
}) });
if (minx < 0) { if (minx < 0) {
item.currentx += Math.abs(minx); item.currentx += Math.abs(minx);
item.centerx = item.w / 2 + item.currentx; item.centerx = item.w / 2 + item.currentx;
} }
if (maxx > wall_dom.offsetWidth) { if (maxx > wall_dom.offsetWidth) {
item.currentx-=(maxx-wall_dom.offsetWidth); item.currentx -= maxx - wall_dom.offsetWidth;
item.centerx = item.currentx + item.w / 2; item.centerx = item.currentx + item.w / 2;
} }
if (miny < 0) { if (miny < 0) {
@ -800,14 +864,14 @@ export default defineComponent({
item.centery = item.h / 2 + item.currenty; item.centery = item.h / 2 + item.currenty;
} }
if (maxy > wall_dom.offsetHeight) { if (maxy > wall_dom.offsetHeight) {
item.currenty-=(maxy-wall_dom.offsetHeight); item.currenty -= maxy - wall_dom.offsetHeight;
item.centery = item.currenty + item.h / 2; item.centery = item.currenty + item.h / 2;
} }
} }
}; };
let test_delete_flag = false; let test_delete_flag = false;
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => { EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
const wall_dom = wall.value const wall_dom = wall.value;
if (wall_dom) { if (wall_dom) {
test_monitor_wall.value.forEach((element) => { test_monitor_wall.value.forEach((element) => {
let teph = element.InitialH; let teph = element.InitialH;
@ -822,7 +886,7 @@ export default defineComponent({
element.currenty = element.currenty * sizeh; element.currenty = element.currenty * sizeh;
element.centerx = Math.floor(element.currentx + element.w / 2); element.centerx = Math.floor(element.currentx + element.w / 2);
element.centery = Math.floor(element.currenty + element.h / 2); element.centery = Math.floor(element.currenty + element.h / 2);
}) });
} }
}); });
return { return {
@ -855,61 +919,62 @@ export default defineComponent({
let client = GlobalData.getInstance().getCurrentClient(); let client = GlobalData.getInstance().getCurrentClient();
if (client) { if (client) {
const response = await client.getMagicWallConfig() const response = await client.getMagicWallConfig();
const a = response?.config.windows; const a = response?.config.windows;
const wall_dom = wall.value const wall_dom = wall.value;
if (a && wall_dom) { if (a && wall_dom) {
a.forEach((element) => { a.forEach((element) => {
let item: test_monitor = new test_monitor(0, '0', 0, 0, 0) let item: test_monitor = new test_monitor(0, "0", 0, 0, 0);
extend(true, item, test_monitor_list.value[element.index]) extend(true, item, test_monitor_list.value[element.index]);
let sizeh = wall_dom.offsetHeight / element.background_h; let sizeh = wall_dom.offsetHeight / element.background_h;
let sizew = wall_dom.offsetWidth / element.background_w; let sizew = wall_dom.offsetWidth / element.background_w;
item.currentx = element.lt.x * wall_dom.offsetWidth; item.currentx = element.lt.x * wall_dom.offsetWidth;
percenter.value = parseFloat((element.percenter).toString()); percenter.value = parseFloat(element.percenter.toString());
item.InitialH = element.initial_h * sizeh; item.InitialH = element.initial_h * sizeh;
item.InitialW = element.initial_w * sizew; item.InitialW = element.initial_w * sizew;
item.h = (item.InitialH * percenter.value); item.h = item.InitialH * percenter.value;
item.w = (item.InitialW * percenter.value); item.w = item.InitialW * percenter.value;
item.centerx = Math.floor(item.currentx + item.w / 2); item.centerx = Math.floor(item.currentx + item.w / 2);
item.centery = Math.floor(item.currenty + item.h / 2); item.centery = Math.floor(item.currenty + item.h / 2);
item.angle = element.angle item.angle = element.angle;
item.isShow = true; item.isShow = true;
test_monitor_wall.value.push(item); test_monitor_wall.value.push(item);
test_monitor_list.value.forEach((ele) => { test_monitor_list.value.forEach((ele) => {
if (element.index == ele.id) { if (element.index == ele.id) {
ele.isHide = true; ele.isHide = true;
} }
}) });
}) });
if (a.length == 1) { if (a.length == 1) {
current_index.value = 0 current_index.value = 0;
} else { } else {
current_index.value = -1 current_index.value = -1;
} }
} }
} }
}, },
resetData() { resetData() {
test_monitor_wall.value = []; test_monitor_wall.value = [];
current_index.value = -1; current_index.value = -1;
percenter.value = 1 percenter.value = 1;
test_monitor_list.value.forEach(element => { test_monitor_list.value.forEach((element) => {
element.isHide = false; element.isHide = false;
}) });
loading.value = false; loading.value = false;
}, },
async onSubmit() { async onSubmit() {
loading.value = true; loading.value = true;
let client = GlobalData.getInstance().getCurrentClient(); let client = GlobalData.getInstance().getCurrentClient();
const wall_dom = wall.value const wall_dom = wall.value;
const settings = await GlobalData.getInstance().getCurrentClient()?.getOutputBoardSetting(); const settings = await GlobalData.getInstance()
.getCurrentClient()
?.getOutputBoardSetting();
if (client && wall_dom && settings) { if (client && wall_dom && settings) {
const response = await client.getMagicWallConfig(); const response = await client.getMagicWallConfig();
const cloud_monitor_list = new MagicWallConfig(); const cloud_monitor_list = new MagicWallConfig();
cloud_monitor_list.magic_wall_enable = true; //response?.config.magic_wall_enable ?? true; cloud_monitor_list.magic_wall_enable = true; //response?.config.magic_wall_enable ?? true;
cloud_monitor_list.col = parseInt((settings.wall_col).toString()) cloud_monitor_list.col = parseInt(settings.wall_col.toString());
cloud_monitor_list.row =parseInt((settings.wall_row).toString()) cloud_monitor_list.row = parseInt(settings.wall_row.toString());
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) {
@ -918,19 +983,23 @@ export default defineComponent({
// console.log(wall_dom.offsetHeight) // console.log(wall_dom.offsetHeight)
cloud_monitor_list.windows.push({ cloud_monitor_list.windows.push({
index: element.id, index: element.id,
lt: new PointF(element.currentx / wall_dom.offsetWidth, element.currenty / wall_dom.offsetHeight), lt: new PointF(
element.currentx / wall_dom.offsetWidth,
element.currenty / wall_dom.offsetHeight
),
h: element.h / wall_dom.offsetHeight, h: element.h / wall_dom.offsetHeight,
w: element.w / wall_dom.offsetWidth, w: element.w / wall_dom.offsetWidth,
angle: parseInt(element.angle.toString()), angle: parseInt(element.angle.toString()),
initial_h: element.InitialH, initial_w: element.InitialW, initial_h: element.InitialH,
initial_w: element.InitialW,
percenter: percenter.value, percenter: percenter.value,
background_h: wall_dom.offsetHeight, background_h: wall_dom.offsetHeight,
background_w: wall_dom.offsetWidth, background_w: wall_dom.offsetWidth,
}) });
} }
}); });
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",
@ -944,14 +1013,13 @@ export default defineComponent({
show_dialog.value = false; show_dialog.value = false;
} }
loading.value = false; loading.value = false;
}, },
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 (item.active) { if (item.active) {
test_monitor_wall.value.forEach(element => { test_monitor_wall.value.forEach((element) => {
element.active = false element.active = false;
}); });
} }
item.active = true; item.active = true;
@ -966,7 +1034,6 @@ export default defineComponent({
}, },
onDragOver(e: DragEvent) { onDragOver(e: DragEvent) {
e.preventDefault(); e.preventDefault();
}, },
onDrop(e: DragEvent) { onDrop(e: DragEvent) {
if (e.dataTransfer?.getData("item") != "") { if (e.dataTransfer?.getData("item") != "") {
@ -976,35 +1043,35 @@ export default defineComponent({
item.active = true; item.active = true;
item.angle = 0; item.angle = 0;
if (item.active) { if (item.active) {
test_monitor_wall.value.forEach(element => { test_monitor_wall.value.forEach((element) => {
element.active = false element.active = false;
}); });
} }
if (item.currentx < 0) { if (item.currentx < 0) {
item.currentx = 0 item.currentx = 0;
window_rect.x = 0 window_rect.x = 0;
} else { } else {
window_rect.x = item.currentx window_rect.x = item.currentx;
} }
if (item.currenty < 0) { if (item.currenty < 0) {
item.currenty = 0 item.currenty = 0;
window_rect.y = 0 window_rect.y = 0;
} else { } else {
window_rect.y = item.currenty window_rect.y = item.currenty;
} }
test_delete_flag = false; test_delete_flag = false;
const wall_dom = wall.value const wall_dom = wall.value;
item.isShow = true; item.isShow = true;
if (wall_dom) { if (wall_dom) {
item.InitialH = wall_dom?.offsetHeight * (item.resize); item.InitialH = wall_dom?.offsetHeight * item.resize;
item.InitialW = wall_dom?.offsetWidth * (item.resize); item.InitialW = wall_dom?.offsetWidth * item.resize;
item.h = item.InitialH * percenter.value; item.h = item.InitialH * percenter.value;
item.w = item.InitialW * percenter.value; item.w = item.InitialW * percenter.value;
if (item.currentx > wall_dom?.offsetWidth - item.w) { if (item.currentx > wall_dom?.offsetWidth - item.w) {
item.currentx = wall_dom?.offsetWidth - item.w item.currentx = wall_dom?.offsetWidth - item.w;
} }
if (item.currenty > wall_dom?.offsetHeight - item.h) { if (item.currenty > wall_dom?.offsetHeight - item.h) {
item.currenty = wall_dom?.offsetHeight - item.h item.currenty = wall_dom?.offsetHeight - item.h;
} }
item.centerx = Math.floor(item.currentx + item.w / 2); item.centerx = Math.floor(item.currentx + item.w / 2);
item.centery = Math.floor(item.currenty + item.h / 2); item.centery = Math.floor(item.currenty + item.h / 2);
@ -1013,7 +1080,7 @@ export default defineComponent({
test_monitor_wall.value.push(item); test_monitor_wall.value.push(item);
test_delete_flag = true; test_delete_flag = true;
} }
current_index.value = test_monitor_wall.value.length - 1 current_index.value = test_monitor_wall.value.length - 1;
} }
}, },
onDragEnter(e: DragEvent, index: string) { onDragEnter(e: DragEvent, index: string) {
@ -1033,7 +1100,7 @@ export default defineComponent({
onDragend(e: DragEvent, row: number, col: number) { onDragend(e: DragEvent, row: number, col: number) {
let num = (row - 1) * 4 + (col - 1); let num = (row - 1) * 4 + (col - 1);
if (test_delete_flag) { if (test_delete_flag) {
test_monitor_list.value[num].isHide = true test_monitor_list.value[num].isHide = true;
} }
}, },
onDragLeave(e: DragEvent) { onDragLeave(e: DragEvent) {
@ -1048,47 +1115,51 @@ export default defineComponent({
closeOtherWindows(item: test_monitor, index: number) { closeOtherWindows(item: test_monitor, index: number) {
current_index.value = index; current_index.value = index;
let tep = JSON.parse(JSON.stringify(item)); let tep = JSON.parse(JSON.stringify(item));
test_monitor_list.value.forEach(element => { test_monitor_list.value.forEach((element) => {
element.isHide = false; element.isHide = false;
}) });
test_monitor_wall.value.forEach(element => { test_monitor_wall.value.forEach((element) => {
element.isShow = false; element.isShow = false;
}) });
test_monitor_list.value[item.id].isHide = true; test_monitor_list.value[item.id].isHide = true;
test_monitor_wall.value[index].isShow = true; test_monitor_wall.value[index].isShow = true;
}, },
closeAllWindows() { closeAllWindows() {
current_index.value = -1; current_index.value = -1;
test_monitor_list.value.forEach(element => { test_monitor_list.value.forEach((element) => {
element.isHide = false; element.isHide = false;
}) });
test_monitor_wall.value.forEach(element => { test_monitor_wall.value.forEach((element) => {
element.isShow = false; element.isShow = false;
}) });
}, },
box_width(row: number, col: number) { box_width(row: number, col: number) {
let tep = JSON.parse(JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])) let tep = JSON.parse(
return tep.w + "px" JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
);
return tep.w + "px";
}, },
box_height(row: number, col: number) { box_height(row: number, col: number) {
let tep = JSON.parse(JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])) let tep = JSON.parse(
return tep.h + "px" JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
);
return tep.h + "px";
}, },
show_box_line_height(height: number) { show_box_line_height(height: number) {
return height * 0.5 + "px" return height * 0.5 + "px";
}, },
center_x() { center_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];
item.currentx = item.centerx - item.w / 2; item.currentx = item.centerx - item.w / 2;
}, },
center_y() { center_y() {
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];
item.currenty = item.centery - item.h / 2; item.currenty = item.centery - item.h / 2;
}, },
changePercenter() { changePercenter() {
const wall_dom = wall.value const wall_dom = wall.value;
let tep = false; let tep = false;
test_monitor_wall.value.forEach((element) => { test_monitor_wall.value.forEach((element) => {
element.w = element.InitialW * percenter.value; element.w = element.InitialW * percenter.value;
@ -1098,10 +1169,10 @@ export default defineComponent({
const wall_dom = wall.value; const wall_dom = wall.value;
if (wall_dom) { if (wall_dom) {
if (rx > wall_dom.offsetWidth) { if (rx > wall_dom.offsetWidth) {
element.currentx = wall_dom.offsetWidth - element.w element.currentx = wall_dom.offsetWidth - element.w;
} }
if (ry > wall_dom.offsetHeight) { if (ry > wall_dom.offsetHeight) {
element.currenty = wall_dom.offsetHeight - element.h element.currenty = wall_dom.offsetHeight - element.h;
} }
} }
element.centerx = Math.floor(element.currentx + element.w / 2); element.centerx = Math.floor(element.currentx + element.w / 2);
@ -1109,24 +1180,44 @@ export default defineComponent({
if (element.isShow) { if (element.isShow) {
tep = true; tep = true;
} }
});
})
}, },
canel_active() { canel_active() {
Unchecked.value = true; Unchecked.value = true;
if (Unchecked) { if (Unchecked) {
current_index.value = -1 current_index.value = -1;
test_monitor_wall.value.forEach((element) => { test_monitor_wall.value.forEach((element) => {
element.active = false; element.active = 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(){
console.log(111)
let item = test_monitor_wall.value[current_index.value]
item.currentx--;
item.centerx--;
},
sub_y(){
let item = test_monitor_wall.value[current_index.value]
item.currenty--;
item.centery--;
},
add_x(){
let item = test_monitor_wall.value[current_index.value]
item.currentx++;
item.centerx++;
},
add_y(){
let item = test_monitor_wall.value[current_index.value]
item.currenty++;
item.centery++;
} }
}; };
}, },
}) });
</script> </script>

4
src/pages/TopToolBar.vue
View File

@ -309,10 +309,6 @@
{{ $t("grid setting") }} {{ $t("grid setting") }}
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item <q-item
clickable clickable
:disable="!$store.state.power_state" :disable="!$store.state.power_state"