W:
@@ -357,11 +358,9 @@
- px
+ mm
- px
+ mm
@@ -397,11 +399,9 @@
- px
+ mm
- px
+ mm
@@ -473,10 +476,12 @@
@dragend="(evt) => onDragend(evt, item, j)"
>
{{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
- W:{{ filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].w )}} H:{{
- filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].h)
+ W:{{
+ filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmw)
+ }}
+ H:{{
+ filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmh)
}}
-
onDragend(evt, item, j)"
>
{{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
- W:{{ filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].w )}} H:{{
- filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].h)
+ W:{{
+ filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmw)
+ }}
+ H:{{
+ filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmh)
}}
@@ -600,10 +608,10 @@ import vue3ResizeDrag from "../third_lib/vue3-resize-drag/components/vue3-resize
import itemDrag from "src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/drag";
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 { filter } from "minimatch";
+import { number } from "@intlify/core-base";
// import VeeValidate from 'vee-validate';
+
class test_monitor {
uuid = "";
active = false;
@@ -611,10 +619,12 @@ class test_monitor {
start_y = 0;
InitialW = 0;
InitialH = 0;
- startw=0.0;
- starth=0.0;
+ startw = 0.0;
+ starth = 0.0;
w = 0.0;
h = 0.0;
+ cmw = 0.0;
+ cmh = 0.0;
currentx = 0.0;
currenty = 0.0;
centerx = 0;
@@ -622,6 +632,8 @@ class test_monitor {
angle = 0;
id = 0;
resize = 0.0;
+ resizew=0.0;
+ resizeh=0.0
isHide = false;
isShow = false;
reset() {
@@ -631,6 +643,8 @@ class test_monitor {
this.start_y = 0;
this.w = 0.0;
this.h = 0.0;
+ this.cmh = 0.0;
+ this.cmw = 0.0;
this.currentx = 0.0;
this.currenty = 0.0;
this.centerx = 0;
@@ -640,10 +654,12 @@ class test_monitor {
this.isHide = false; //列表隐藏
this.isShow = false; //墙显示
this.resize = 0.0;
+ this.resizew=0.0;
+ this.resizeh=0.0;
this.InitialW = 0;
this.InitialW = 0;
- this.startw=0.0;
- this.starth=0.0;
+ this.startw = 0.0;
+ this.starth = 0.0;
}
constructor(id: number, uuid: string, w: number, h: number, resize: number) {
this.reset();
@@ -652,8 +668,10 @@ class test_monitor {
this.w = w;
this.h = h;
this.resize = resize;
- this.startw=128;
- this.starth=72;
+ this.startw = 128;
+ this.starth = 72;
+ this.cmw = 0.0;
+ this.cmh = 0.0;
}
}
@@ -664,10 +682,9 @@ export default defineComponent({
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
-
+ let lcm = ref(0);
let show_dialog = ref(false);
let loading = ref(false);
- let show_windows_flag = ref(true); // 用于刷新 window 坐标
let wall: Ref = ref(null);
let current_index = ref(-1);
let monitor_list_current_index = ref(-1);
@@ -681,12 +698,46 @@ export default defineComponent({
angle: 0,
});
let multiple = ref(false);
- const aw = 607;
- const ah = 342;
- const bw = 539;
- const bh = 304;
- const cw = 511;
- const ch = 288;
+ const aw = 303.5;
+ const ah = 171;
+ const bw = 269.5;
+ const bh = 152;
+ const cw = 255.5;
+ const ch = 144;
+ const model = ref(null);
+ const options = ref([
+ {
+ id: "55",
+ w: 1214,
+ h: 684,
+ desc: "Google",
+ },
+ {
+ id: "49",
+ w: 1078,
+ h: 608,
+ desc: "Facebook",
+ },
+ {
+ id: "46",
+ w: 1022,
+ h: 577,
+ desc: "Twitter",
+ },
+ {
+ id: "70",
+ w: 1920,
+ h: 1080,
+ desc: "Apple",
+ },
+ // {
+ // id: '55',
+ // w:1214,
+ // h:684,
+ // desc: 'Oracle',
+ // inactive: true
+ // }
+ ]);
//调整与背景的百分比
const percenter = ref(1);
let last_percenter = ref(1);
@@ -724,9 +775,9 @@ export default defineComponent({
height: 0,
active: false,
});
- const filter_px=(val:number)=>{
- return Math.round(val)
- }
+ const filter_px = (val: number) => {
+ return Math.round(val);
+ };
const realtime_upload = async () => {
let client = GlobalData.getInstance().getCurrentClient();
const settings = await GlobalData.getInstance()
@@ -790,6 +841,32 @@ export default defineComponent({
}
}
};
+ const getpx = () => {
+ const wall_dom = wall.value;
+ if(wall_dom){
+ lcm.value = (wall_dom.offsetWidth*0.5/1214);
+ // console.log(lcm.value)
+ test_monitor_list.value.forEach((ele) => {
+ ele.cmw = ele.w /lcm.value;
+ ele.cmh = ele.h /lcm.value;
+ });
+ }
+
+ };
+ const getsize=(item:test_monitor)=>{
+ const wall_dom = wall.value;
+ if(wall_dom){
+ // item.w=item.w/3840*wall_dom.offsetWidth;
+ // item.h=item.h/2160*wall_dom.offsetHeight;
+ }
+ }
+ const setsize=(item:test_monitor)=>{
+ const wall_dom = wall.value;
+ if(wall_dom){
+ // item.w=item.w/wall_dom.offsetWidth*3840;
+ // item.h=item.h/wall_dom.offsetHeight*2160;
+ }
+ }
const radians = () => {
const item = test_monitor_wall.value[current_index.value];
return /*a*/ (item.angle * Math.PI) / 180;
@@ -848,8 +925,8 @@ export default defineComponent({
return point_list;
}
};
- let offsetHeight=ref(0.0);
- let offsetWidth=ref(0.0)
+ let offsetHeight = ref(0.0);
+ let offsetWidth = ref(0.0);
let test_monitor_wall: Ref = ref([]);
let last_wall: Ref = ref([]);
let output_length = ref(0);
@@ -1087,14 +1164,14 @@ export default defineComponent({
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
const wall_dom = wall.value;
if (wall_dom) {
- let size_h=offsetHeight.value/wall_dom.offsetHeight;
- let size_w=offsetWidth.value/wall_dom.offsetWidth;
- console.log(offsetHeight.value)
+ getpx()
+ let size_h = offsetHeight.value / wall_dom.offsetHeight;
+ let size_w = offsetWidth.value / wall_dom.offsetWidth;
test_monitor_wall.value.forEach((element) => {
let teph = element.InitialH;
let tepw = element.InitialW;
- element.InitialH = wall_dom.offsetHeight * element.resize;
- element.InitialW = wall_dom.offsetWidth * element.resize;
+ element.InitialH = wall_dom.offsetHeight * element.resizeh;
+ element.InitialW = wall_dom.offsetWidth * element.resizew;
element.h = element.InitialH * percenter.value;
element.w = element.InitialW * percenter.value;
let sizeh = element.InitialH / teph;
@@ -1107,6 +1184,12 @@ export default defineComponent({
}
});
return {
+ getpx,
+ getsize,
+ setsize,
+ lcm,
+ model,
+ options,
offsetHeight,
offsetWidth,
filter_px,
@@ -1149,9 +1232,10 @@ export default defineComponent({
?.getOutputBoardSetting();
const response = await client.getMagicWallConfig();
const wall_dom = wall.value;
- if(wall_dom){
- offsetHeight.value=wall_dom.offsetHeight
- offsetWidth.value=wall_dom.offsetWidth
+ if (wall_dom) {
+ offsetHeight.value = wall_dom.offsetHeight;
+ offsetWidth.value = wall_dom.offsetWidth;
+ getpx();
}
if (response && settings) {
const a = response?.config.windows;
@@ -1184,7 +1268,6 @@ export default defineComponent({
});
loading.value = false;
} else 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]);
@@ -1340,16 +1423,11 @@ export default defineComponent({
const wall_dom = wall.value;
item.isShow = true;
if (wall_dom) {
- while(wall_dom.offsetWidth wall_dom?.offsetWidth - item.w) {
@@ -1360,14 +1438,27 @@ export default defineComponent({
}
item.centerx = Math.floor(item.currentx + item.w / 2);
item.centery = Math.floor(item.currenty + item.h / 2);
+ if (
+ item.h > wall_dom.offsetHeight ||
+ item.w > wall_dom.offsetWidth
+ ) {
+ $q.notify({
+ color: "negative",
+ icon: "warning",
+ message: "该显示器超出,请调整缩放",
+ position: "top",
+ timeout: 2500,
+ });
+ } else {
+ if (test_monitor_wall.value.indexOf(item) == -1) {
+ test_monitor_wall.value.push(item);
+ test_delete_flag = true;
+ }
+ current_index.value = test_monitor_wall.value.length - 1;
+ realtime_upload();
+ }
}
- if (test_monitor_wall.value.indexOf(item) == -1) {
- test_monitor_wall.value.push(item);
- test_delete_flag = true;
- }
- current_index.value = test_monitor_wall.value.length - 1;
}
- realtime_upload();
},
onDragEnter(e: DragEvent, index: string) {
e.stopPropagation();
@@ -1395,7 +1486,12 @@ export default defineComponent({
},
closeWindow(item: test_monitor, index: number) {
current_index.value = -1;
- test_monitor_list.value[item.id]=JSON.parse(JSON.stringify(test_monitor_wall.value[index]))
+ setsize(item)
+ item.cmw = item.w /lcm.value;
+ item.cmh = item.h / lcm.value;
+ test_monitor_list.value[item.id] = JSON.parse(
+ JSON.stringify(test_monitor_wall.value[index])
+ );
test_monitor_list.value[item.id].isHide = false;
test_monitor_wall.value[index].isShow = false;
multiple_select.value = [];
@@ -1404,8 +1500,11 @@ export default defineComponent({
closeOtherWindows(item: test_monitor, index: number) {
current_index.value = index;
test_monitor_wall.value.forEach((ele) => {
- test_monitor_list.value[ele.id]=JSON.parse(JSON.stringify(ele));
- });
+ setsize(ele)
+ ele.cmh = ele.h /lcm.value;
+ ele.cmw = ele.w /lcm.value;
+ test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
+ });
test_monitor_list.value.forEach((element) => {
element.isHide = false;
});
@@ -1418,9 +1517,12 @@ export default defineComponent({
},
closeAllWindows() {
current_index.value = -1;
- test_monitor_wall.value.forEach((ele) => {
- test_monitor_list.value[ele.id]=JSON.parse(JSON.stringify(ele));
- });
+ test_monitor_wall.value.forEach((ele) => {
+ setsize(ele)
+ ele.cmh = ele.h /lcm.value;
+ ele.cmw = ele.w /lcm.value;
+ test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
+ });
test_monitor_list.value.forEach((element) => {
element.isHide = false;
});
@@ -1446,7 +1548,7 @@ export default defineComponent({
let tep = JSON.parse(
JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
);
- return tep.starth*0.4 + "px";
+ return tep.starth * 0.4 + "px";
},
show_box_line_height(height: number) {
return height * 0.3 + "px";
@@ -1631,14 +1733,15 @@ export default defineComponent({
});
realtime_upload();
},
- changewidth(){
-
+ changewidth() {
+ let item = test_monitor_list.value[monitor_list_current_index.value];
+ item.w = Number(item.cmw) * lcm.value;
+ // console.log(item.w)
},
- changeHeight(){
-
+ changeHeight() {
+ let item = test_monitor_list.value[monitor_list_current_index.value];
+ item.h = item.cmh * lcm.value;
},
-
-
};
},
});