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

617
src/components/ControlPanelDialog.vue
View File

@ -8,7 +8,20 @@
if (!loading && evt.keyCode == 27) {
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">
@ -434,7 +447,24 @@
<script lang="ts">
import { defineComponent, ref, watch, computed, Ref, reactive } from "vue";
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 GlobalData from "src/common/GlobalData";
import { HttpProtocol } from "src/entities/HttpProtocol";
@ -475,8 +505,8 @@ class test_monitor {
this.centery = 0;
this.angle = 0;
this.id = 0;
this.isHide = false;//列表隐藏
this.isShow = false;//墙显示
this.isHide = false; //列表隐藏
this.isShow = false; //墙显示
this.resize = 0;
this.InitialW = 0;
this.InitialW = 0;
@ -512,8 +542,10 @@ export default defineComponent({
angle: 0,
});
const aw = 128; const ah = 72;
const bw = 160; const bh = 90;
const aw = 128;
const ah = 72;
const bw = 160;
const bh = 90;
//调整与背景的百分比
const percenter = ref(1);
const ar = 0.5;
@ -538,291 +570,323 @@ export default defineComponent({
left: number;
top: number;
angle: number;
};
}
let showMonitor = reactive({
x: 0,
y: 0,
width: 0,
height: 0,
active: false
active: false,
});
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;
};
const calculateCoordinates=(px:number,py:number, cx:number,cy:number) =>{
const x =cx+(px-cx)*Math.cos(radians())-(py - cy) * Math.sin(radians());
const calculateCoordinates = (
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 };
};
const four_point=()=>{
const item = test_monitor_wall.value[current_index.value]
item.centerx = parseInt(item.centerx.toString())
item.centery = parseInt(item.centery.toString())
const four_point = () => {
const item = test_monitor_wall.value[current_index.value];
item.centerx = parseInt(item.centerx.toString());
item.centery = parseInt(item.centery.toString());
const x2: number = item.currentx + item.w;
const y2: number = item.currenty + item.h;
if(item.angle!=0){
const point_left_top=calculateCoordinates(item.currentx,item.currenty,item.centerx,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;
}
if (item.angle != 0) {
const point_left_top = calculateCoordinates(
item.currentx,
item.currenty,
item.centerx,
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;
}
};
let test_monitor_wall: Ref<test_monitor[]> = ref([]);
const set_x = () => {
const wall_dom = wall.value
const item = test_monitor_wall.value[current_index.value]
const wall_dom = wall.value;
const item = test_monitor_wall.value[current_index.value];
const rx: number = item.currentx + item.w;
if (wall_dom) {
if (rx > wall_dom.offsetWidth) {
item.currentx = wall_dom.offsetWidth - item.w
item.currentx = wall_dom.offsetWidth - item.w;
return item.currentx;
} else {
return item.currentx;
}
}
}
};
const min_x = () => {
const wall_dom = wall.value
const item = test_monitor_wall.value[current_index.value]
const point_list=four_point();
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;
point_list.forEach((element)=>{
if(minx>element.x){
minx=element.x;
if (item.angle != 0 && point_list) {
let minx = 0;
point_list.forEach((element) => {
if (minx > element.x) {
minx = element.x;
}
})
if(minx<0){
return Math.floor(item.w/2+item.currentx+Math.abs(minx))
}else {
return Math.floor(item.w / 2)
});
if (minx < 0) {
return Math.floor(item.w / 2 + item.currentx + Math.abs(minx));
} else {
return Math.floor(item.w / 2);
}
}else{
return Math.floor(item.w / 2)
} else {
return Math.floor(item.w / 2);
}
}
};
const max_x = () => {
const wall_dom = wall.value
const item = test_monitor_wall.value[current_index.value]
const point_list=four_point();
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 maxx=0;
point_list.forEach((element)=>{
if(maxx<element.x){
maxx=element.x;
if (item.angle != 0 && point_list) {
let maxx = 0;
point_list.forEach((element) => {
if (maxx < element.x) {
maxx = element.x;
}
})
if(maxx>wall_dom.offsetWidth){
return Math.floor(item.currentx+item.w/2-(maxx-wall_dom.offsetWidth))
}else{
return Math.floor(wall_dom.offsetWidth - item.w / 2)
});
if (maxx > wall_dom.offsetWidth) {
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(wall_dom.offsetWidth - item.w / 2)
} else {
return Math.floor(wall_dom.offsetWidth - item.w / 2);
}
}
};
const set_y = () => {
//输入框正向溢出
const wall_dom = wall.value
const item = test_monitor_wall.value[current_index.value]
const wall_dom = wall.value;
const item = test_monitor_wall.value[current_index.value];
const ry: number = item.currenty + item.h;
if (wall_dom) {
if (ry > wall_dom.offsetHeight) {
item.currenty = wall_dom.offsetHeight - item.h
return item.currenty;
} else {
return item.currenty;
if (ry > wall_dom.offsetHeight) {
item.currenty = wall_dom.offsetHeight - item.h;
return item.currenty;
} else {
return item.currenty;
}
}
};
const min_y = () => {
const wall_dom = wall.value
const item = test_monitor_wall.value[current_index.value]
const point_list=four_point();
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 miny=0;
point_list.forEach((element)=>{
if(miny>element.y){
miny=element.y;
if (item.angle != 0 && point_list) {
let miny = 0;
point_list.forEach((element) => {
if (miny > element.y) {
miny = element.y;
}
})
if(miny<0){
return Math.floor(item.h/2+item.currenty+Math.abs(miny))
}else{
return Math.floor(item.h / 2)
});
if (miny < 0) {
return Math.floor(item.h / 2 + item.currenty + Math.abs(miny));
} else {
return Math.floor(item.h / 2);
}
}else{
return Math.floor(item.h / 2)
} else {
return Math.floor(item.h / 2);
}
}
};
const max_y = () => {
const wall_dom = wall.value
const item = test_monitor_wall.value[current_index.value]
const point_list=four_point();
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 maxy=0;
point_list.forEach((element)=>{
if(maxy<element.y){
maxy=element.y;
if (item.angle != 0 && point_list) {
let maxy = 0;
point_list.forEach((element) => {
if (maxy < element.y) {
maxy = element.y;
}
})
if(maxy>wall_dom.offsetHeight){
return Math.floor(item.currenty+item.h/2-(maxy-wall_dom.offsetHeight))
}else{
return Math.floor(wall_dom.offsetHeight - item.h / 2)
});
if (maxy > wall_dom.offsetHeight) {
return Math.floor(
item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)
);
} else {
return Math.floor(wall_dom.offsetHeight - item.h / 2);
}
}else{
return Math.floor(wall_dom.offsetHeight - item.h / 2)
} else {
return Math.floor(wall_dom.offsetHeight - item.h / 2);
}
}
};
const max_angle=()=>{
};
const max_angle = () => {};
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;
if (item.active) {
test_monitor_wall.value.forEach(element => {
element.active = false
test_monitor_wall.value.forEach((element) => {
element.active = false;
});
}
const wall_dom = wall.value
const wall_dom = wall.value;
if (wall_dom) {
item.h = item.InitialH * percenter.value;
item.w = item.InitialW * percenter.value;
}
item.active = true;
item.currentx =rect.left
item.currenty = rect.top
item.centerx = Math.floor(item.currentx + item.w / 2)
item.centery = Math.floor(item.currenty + item.h / 2)
item.currentx = rect.left;
item.currenty = rect.top;
item.centerx = Math.floor(item.currentx + item.w / 2);
item.centery = Math.floor(item.currenty + item.h / 2);
if (Number.isNaN(rect.left || rect.left < 0)) {
item.currentx = 0
item.currentx = 0;
}
};
const moveMonitor = (item: test_monitor, rect: show__Rect) => {
//计算是否超出，然后放回
const wall_dom = wall.value
if(item.angle!=0){
const wall_dom = wall.value;
if (item.angle != 0) {
exceedrange(item);
}else{
} else {
if (rect.left < 0) {
item.currentx = 0
item.currentx = 0;
} else if (wall_dom && rect.left > wall_dom.offsetWidth - item.w) {
item.currentx = Number(set_x()) ?? 0;
item.currentx = Number(set_x()) ?? 0;
} else {
item.currentx = rect.left
item.currentx = rect.left;
}
if (rect.top < 0) {
item.currenty = 0
item.currenty = 0;
} else if (wall_dom && rect.top > wall_dom.offsetHeight - item.h) {
item.currenty = set_y() ?? 0;
} else {
item.currenty = rect.top
item.currenty = rect.top;
}
item.centerx = Math.floor(item.currentx + item.w / 2)
item.centery = Math.floor(item.currenty + item.h / 2)
item.centerx = Math.floor(item.currentx + item.w / 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
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 (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;
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;
const point_list=four_point();
if(wall_dom&&point_list){
let maxx=0;
let maxy=0;
let minx=0;
let miny=0;
point_list.forEach((element)=>{
if(minx>element.x){
minx=element.x;
}
if(maxx<element.x){
maxx=element.x;
}
if(miny>element.y){
miny=element.y;
}
if(maxy<element.y){
maxy=element.y;
}
})
if(minx<0){
item.currentx+=Math.abs(minx);
item.centerx=item.w/2+item.currentx;
const exceedrange = (item: test_monitor) => {
const wall_dom = wall.value;
let a = 0;
const point_list = four_point();
if (wall_dom && point_list) {
let maxx = 0;
let maxy = 0;
let minx = 0;
let miny = 0;
point_list.forEach((element) => {
if (minx > element.x) {
minx = element.x;
}
if(maxx>wall_dom.offsetWidth){
item.currentx-=(maxx-wall_dom.offsetWidth);
item.centerx=item.currentx+item.w/2;
if (maxx < element.x) {
maxx = element.x;
}
if(miny<0){
item.currenty+=Math.abs(miny);
item.centery=item.h/2+item.currenty;
if (miny > element.y) {
miny = element.y;
}
if(maxy>wall_dom.offsetHeight){
item.currenty-=(maxy-wall_dom.offsetHeight);
item.centery=item.currenty+item.h/2;
if (maxy < element.y) {
maxy = element.y;
}
});
if (minx < 0) {
item.currentx += Math.abs(minx);
item.centerx = item.w / 2 + item.currentx;
}
if (maxx > wall_dom.offsetWidth) {
item.currentx -= maxx - wall_dom.offsetWidth;
item.centerx = item.currentx + item.w / 2;
}
if (miny < 0) {
item.currenty += Math.abs(miny);
item.centery = item.h / 2 + item.currenty;
}
if (maxy > wall_dom.offsetHeight) {
item.currenty -= maxy - wall_dom.offsetHeight;
item.centery = item.currenty + item.h / 2;
}
}
};
let test_delete_flag = false;
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
const wall_dom = wall.value
const wall_dom = wall.value;
if (wall_dom) {
test_monitor_wall.value.forEach((element) => {
let teph=element.InitialH;
let tepw=element.InitialW;
let teph = element.InitialH;
let tepw = element.InitialW;
element.InitialH = wall_dom.offsetHeight * element.resize;
element.InitialW = wall_dom.offsetWidth * element.resize;
element.h = element.InitialH * percenter.value;
element.w = element.InitialW * percenter.value;
let sizeh=element.InitialH/teph;
let sizew=element.InitialW/tepw;
element.currentx=element.currentx*sizew;
element.currenty=element.currenty*sizeh;
let sizeh = element.InitialH / teph;
let sizew = element.InitialW / tepw;
element.currentx = element.currentx * sizew;
element.currenty = element.currenty * sizeh;
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 {
@ -855,61 +919,62 @@ export default defineComponent({
let client = GlobalData.getInstance().getCurrentClient();
if (client) {
const response = await client.getMagicWallConfig()
const response = await client.getMagicWallConfig();
const a = response?.config.windows;
const wall_dom = wall.value
const wall_dom = wall.value;
if (a && wall_dom) {
a.forEach((element) => {
let item: test_monitor = new test_monitor(0, '0', 0, 0, 0)
extend(true, item, test_monitor_list.value[element.index])
let sizeh=wall_dom.offsetHeight/element.background_h;
let sizew=wall_dom.offsetWidth/element.background_w;
let item: test_monitor = new test_monitor(0, "0", 0, 0, 0);
extend(true, item, test_monitor_list.value[element.index]);
let sizeh = wall_dom.offsetHeight / element.background_h;
let sizew = wall_dom.offsetWidth / element.background_w;
item.currentx = element.lt.x * wall_dom.offsetWidth;
percenter.value = parseFloat((element.percenter).toString());
item.InitialH = element.initial_h*sizeh;
item.InitialW = element.initial_w*sizew;
item.h = (item.InitialH * percenter.value);
item.w = (item.InitialW * percenter.value);
percenter.value = parseFloat(element.percenter.toString());
item.InitialH = element.initial_h * sizeh;
item.InitialW = element.initial_w * sizew;
item.h = item.InitialH * percenter.value;
item.w = item.InitialW * percenter.value;
item.centerx = Math.floor(item.currentx + item.w / 2);
item.centery = Math.floor(item.currenty + item.h / 2);
item.angle = element.angle
item.angle = element.angle;
item.isShow = true;
test_monitor_wall.value.push(item);
test_monitor_list.value.forEach((ele) => {
if (element.index == ele.id) {
ele.isHide = true;
}
})
})
});
});
if (a.length == 1) {
current_index.value = 0
current_index.value = 0;
} else {
current_index.value = -1
current_index.value = -1;
}
}
}
},
resetData() {
test_monitor_wall.value = [];
current_index.value = -1;
percenter.value = 1
test_monitor_list.value.forEach(element => {
percenter.value = 1;
test_monitor_list.value.forEach((element) => {
element.isHide = false;
})
});
loading.value = false;
},
async onSubmit() {
loading.value = true;
let client = GlobalData.getInstance().getCurrentClient();
const wall_dom = wall.value
const settings = await GlobalData.getInstance().getCurrentClient()?.getOutputBoardSetting();
const wall_dom = wall.value;
const settings = await GlobalData.getInstance()
.getCurrentClient()
?.getOutputBoardSetting();
if (client && wall_dom && settings) {
const response = await client.getMagicWallConfig();
const cloud_monitor_list = new MagicWallConfig();
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.row =parseInt((settings.wall_row).toString())
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.row = parseInt(settings.wall_row.toString());
let tep_width = 0;
test_monitor_wall.value.forEach((element, index) => {
if (element.isShow) {
@ -918,19 +983,23 @@ export default defineComponent({
// console.log(wall_dom.offsetHeight)
cloud_monitor_list.windows.push({
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,
w: element.w / wall_dom.offsetWidth,
angle: parseInt(element.angle.toString()),
initial_h: element.InitialH, initial_w: element.InitialW,
initial_h: element.InitialH,
initial_w: element.InitialW,
percenter: percenter.value,
background_h:wall_dom.offsetHeight,
background_w:wall_dom.offsetWidth,
})
background_h: wall_dom.offsetHeight,
background_w: wall_dom.offsetWidth,
});
}
});
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",
@ -944,14 +1013,13 @@ export default defineComponent({
show_dialog.value = false;
}
loading.value = false;
},
activeMouseDown(item: test_monitor, index: number) {
item.active = true;
Unchecked.value = false;
if (item.active) {
test_monitor_wall.value.forEach(element => {
element.active = false
test_monitor_wall.value.forEach((element) => {
element.active = false;
});
}
item.active = true;
@ -966,7 +1034,6 @@ export default defineComponent({
},
onDragOver(e: DragEvent) {
e.preventDefault();
},
onDrop(e: DragEvent) {
if (e.dataTransfer?.getData("item") != "") {
@ -976,35 +1043,35 @@ export default defineComponent({
item.active = true;
item.angle = 0;
if (item.active) {
test_monitor_wall.value.forEach(element => {
element.active = false
test_monitor_wall.value.forEach((element) => {
element.active = false;
});
}
if (item.currentx < 0) {
item.currentx = 0
window_rect.x = 0
item.currentx = 0;
window_rect.x = 0;
} else {
window_rect.x = item.currentx
window_rect.x = item.currentx;
}
if (item.currenty < 0) {
item.currenty = 0
window_rect.y = 0
item.currenty = 0;
window_rect.y = 0;
} else {
window_rect.y = item.currenty
window_rect.y = item.currenty;
}
test_delete_flag = false;
const wall_dom = wall.value
const wall_dom = wall.value;
item.isShow = true;
if (wall_dom) {
item.InitialH = wall_dom?.offsetHeight * (item.resize);
item.InitialW = wall_dom?.offsetWidth * (item.resize);
item.InitialH = wall_dom?.offsetHeight * item.resize;
item.InitialW = wall_dom?.offsetWidth * item.resize;
item.h = item.InitialH * percenter.value;
item.w = item.InitialW * percenter.value;
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) {
item.currenty = wall_dom?.offsetHeight - item.h
item.currenty = wall_dom?.offsetHeight - item.h;
}
item.centerx = Math.floor(item.currentx + item.w / 2);
item.centery = Math.floor(item.currenty + item.h / 2);
@ -1013,7 +1080,7 @@ export default defineComponent({
test_monitor_wall.value.push(item);
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) {
@ -1033,7 +1100,7 @@ export default defineComponent({
onDragend(e: DragEvent, row: number, col: number) {
let num = (row - 1) * 4 + (col - 1);
if (test_delete_flag) {
test_monitor_list.value[num].isHide = true
test_monitor_list.value[num].isHide = true;
}
},
onDragLeave(e: DragEvent) {
@ -1048,85 +1115,109 @@ export default defineComponent({
closeOtherWindows(item: test_monitor, index: number) {
current_index.value = index;
let tep = JSON.parse(JSON.stringify(item));
test_monitor_list.value.forEach(element => {
test_monitor_list.value.forEach((element) => {
element.isHide = false;
})
test_monitor_wall.value.forEach(element => {
});
test_monitor_wall.value.forEach((element) => {
element.isShow = false;
})
});
test_monitor_list.value[item.id].isHide = true;
test_monitor_wall.value[index].isShow = true;
},
closeAllWindows() {
current_index.value = -1;
test_monitor_list.value.forEach(element => {
test_monitor_list.value.forEach((element) => {
element.isHide = false;
})
test_monitor_wall.value.forEach(element => {
});
test_monitor_wall.value.forEach((element) => {
element.isShow = false;
})
});
},
box_width(row: number, col: number) {
let tep = JSON.parse(JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)]))
return tep.w + "px"
let tep = JSON.parse(
JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
);
return tep.w + "px";
},
box_height(row: number, col: number) {
let tep = JSON.parse(JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)]))
return tep.h + "px"
let tep = JSON.parse(
JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
);
return tep.h + "px";
},
show_box_line_height(height: number) {
return height * 0.5 + "px"
return height * 0.5 + "px";
},
center_x() {
const wall_dom = wall.value
const item = test_monitor_wall.value[current_index.value]
item.currentx =item.centerx - item.w / 2;
const wall_dom = wall.value;
const item = test_monitor_wall.value[current_index.value];
item.currentx = item.centerx - item.w / 2;
},
center_y() {
const wall_dom = wall.value
const item = test_monitor_wall.value[current_index.value]
const wall_dom = wall.value;
const item = test_monitor_wall.value[current_index.value];
item.currenty = item.centery - item.h / 2;
},
changePercenter() {
const wall_dom = wall.value
const wall_dom = wall.value;
let tep = false;
test_monitor_wall.value.forEach((element) => {
element.w = element.InitialW * percenter.value;
element.h = element.InitialH * percenter.value;
const rx: number = element.currentx + element.w;
const ry:number=element.currenty + element.h;
const ry: number = element.currenty + element.h;
const wall_dom = wall.value;
if(wall_dom){
if (wall_dom) {
if (rx > wall_dom.offsetWidth) {
element.currentx = wall_dom.offsetWidth - element.w
element.currentx = wall_dom.offsetWidth - element.w;
}
if(ry>wall_dom.offsetHeight){
element.currenty = wall_dom.offsetHeight - element.h
if (ry > wall_dom.offsetHeight) {
element.currenty = wall_dom.offsetHeight - element.h;
}
}
element.centerx = Math.floor(element.currentx +element.w / 2);
element.centery = Math.floor(element.currenty + element.h / 2);
}
element.centerx = Math.floor(element.currentx + element.w / 2);
element.centery = Math.floor(element.currenty + element.h / 2);
if (element.isShow) {
tep = true;
}
})
});
},
canel_active() {
Unchecked.value = true;
if (Unchecked) {
current_index.value = -1
current_index.value = -1;
test_monitor_wall.value.forEach((element) => {
element.active = false;
})
});
}
},
changeAngle(){
const wall_dom = wall.value
let item = test_monitor_wall.value[current_index.value]
changeAngle() {
const wall_dom = wall.value;
let item = test_monitor_wall.value[current_index.value];
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>

4
src/pages/TopToolBar.vue
View File

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