parent
243b6555be
commit
c6d206703d
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "media_player_client",
|
"name": "media_player_client",
|
||||||
"version": "1.4.1",
|
"version": "1.4.2",
|
||||||
"description": "A Quasar Framework app",
|
"description": "A Quasar Framework app",
|
||||||
"author": "fangxiang <fangxiang@cloudview.work>",
|
"author": "fangxiang <fangxiang@cloudview.work>",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
@ -9,4 +9,4 @@
|
||||||
"@capacitor/cli": "^2.0.0",
|
"@capacitor/cli": "^2.0.0",
|
||||||
"@capacitor/core": "^2.0.0"
|
"@capacitor/core": "^2.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 35vw">
|
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 35vw">
|
||||||
<q-form @submit="onSubmit">
|
<q-form>
|
||||||
<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">AdvancedDebug</div>
|
<div class="col-auto text-h6">AdvancedDebug</div>
|
||||||
|
@ -56,14 +56,6 @@
|
||||||
color="primary"
|
color="primary"
|
||||||
v-close-popup
|
v-close-popup
|
||||||
/>
|
/>
|
||||||
<q-btn
|
|
||||||
ref="accept"
|
|
||||||
flat
|
|
||||||
:label="$t('Accept')"
|
|
||||||
:loading="loading"
|
|
||||||
type="submit"
|
|
||||||
color="primary"
|
|
||||||
/>
|
|
||||||
</q-card-actions>
|
</q-card-actions>
|
||||||
</q-form>
|
</q-form>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
|
@ -56,9 +56,9 @@
|
||||||
|
|
||||||
<q-separator />
|
<q-separator />
|
||||||
|
|
||||||
<q-card-section class="scroll" style="width: 60vw">
|
<q-card-section class="scroll" style="width: 70vw">
|
||||||
<q-list>
|
<q-list>
|
||||||
<q-item>
|
<q-item v-if="false">
|
||||||
<q-item-section>
|
<q-item-section>
|
||||||
<q-input
|
<q-input
|
||||||
:label="$t('background color')"
|
:label="$t('background color')"
|
||||||
|
|
|
@ -43,6 +43,14 @@
|
||||||
>
|
>
|
||||||
<q-item-section> {{ $t("replace window") }} </q-item-section>
|
<q-item-section> {{ $t("replace window") }} </q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
v-close-popup
|
||||||
|
:disable="$props.disable"
|
||||||
|
@click="$emit('edit_rect', $props.window.window_id)"
|
||||||
|
>
|
||||||
|
<q-item-section> {{ $t("edit window rect") }} </q-item-section>
|
||||||
|
</q-item>
|
||||||
<q-item
|
<q-item
|
||||||
clickable
|
clickable
|
||||||
v-close-popup
|
v-close-popup
|
||||||
|
@ -274,6 +282,7 @@ export default defineComponent({
|
||||||
"start_polling",
|
"start_polling",
|
||||||
"polling_setting",
|
"polling_setting",
|
||||||
"dbtouch",
|
"dbtouch",
|
||||||
|
"edit_rect",
|
||||||
],
|
],
|
||||||
setup(props, { emit }) {
|
setup(props, { emit }) {
|
||||||
const $store = useStore();
|
const $store = useStore();
|
||||||
|
|
|
@ -0,0 +1,347 @@
|
||||||
|
<template>
|
||||||
|
<q-dialog
|
||||||
|
persistent
|
||||||
|
v-model="show_dialog"
|
||||||
|
@before-hide="resetData"
|
||||||
|
@keydown="
|
||||||
|
(evt) => {
|
||||||
|
if (!loading && evt.keyCode == 27) {
|
||||||
|
show_dialog = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 50vw">
|
||||||
|
<q-form @submit="onSubmit">
|
||||||
|
<q-card-section class="q-ma-none q-pa-sm">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-auto text-h6">
|
||||||
|
{{ $t("window rect") }}
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
<div>
|
||||||
|
<q-btn
|
||||||
|
:loading="loading"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
icon="close"
|
||||||
|
color="red"
|
||||||
|
v-close-popup
|
||||||
|
>
|
||||||
|
<q-tooltip>
|
||||||
|
{{ $t("close") }}
|
||||||
|
</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-section style="max-height: 40vh; width: 50vw" class="scroll">
|
||||||
|
<q-list>
|
||||||
|
<q-item class="text-center text-h6">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>
|
||||||
|
<span>{{ $t("desktop width") }}: </span>
|
||||||
|
<span>
|
||||||
|
{{ $store.state.device_screen_width }}
|
||||||
|
</span>
|
||||||
|
<span>{{ $t("px") }}</span>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>
|
||||||
|
<span>{{ $t("desktop height") }}: </span>
|
||||||
|
<span>
|
||||||
|
{{ $store.state.device_screen_height }}
|
||||||
|
</span>
|
||||||
|
<span>{{ $t("px") }}</span>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-separator />
|
||||||
|
<q-item>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<span class="q-mb-md">{{ $t("X") }}:</span>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input
|
||||||
|
autofocus
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
v-model="window_rect.x"
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
(val != null &&
|
||||||
|
val != undefined &&
|
||||||
|
val.toString().length > 0) ||
|
||||||
|
$t('Please type something'),
|
||||||
|
(val) =>
|
||||||
|
parseInt(val) >= 0 ||
|
||||||
|
$t('the number must be greater than 0'),
|
||||||
|
]"
|
||||||
|
lazy-rules
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<span class="input_append">{{ $t("px") }}</span>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-item-section>
|
||||||
|
|
||||||
|
<q-item-section>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<span class="q-mb-md">{{ $t("Y") }}:</span>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
v-model="window_rect.y"
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
(val != null &&
|
||||||
|
val != undefined &&
|
||||||
|
val.toString().length > 0) ||
|
||||||
|
$t('Please type something'),
|
||||||
|
(val) =>
|
||||||
|
parseInt(val) >= 0 ||
|
||||||
|
$t('the number must be greater than 0'),
|
||||||
|
]"
|
||||||
|
lazy-rules
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<span class="input_append">{{ $t("px") }}</span>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<span class="q-mb-md">{{ $t("width") }}:</span>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
v-model="window_rect.width"
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
(val != null &&
|
||||||
|
val != undefined &&
|
||||||
|
val.toString().length > 0) ||
|
||||||
|
$t('Please type something'),
|
||||||
|
(val) =>
|
||||||
|
parseInt(val) >= 1 ||
|
||||||
|
$t('the number must be greater than 1'),
|
||||||
|
]"
|
||||||
|
lazy-rules
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<span class="input_append">{{ $t("px") }}</span>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-item-section>
|
||||||
|
|
||||||
|
<q-item-section>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<span class="q-mb-md">{{ $t("height") }}:</span>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
v-model="window_rect.height"
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
(val != null &&
|
||||||
|
val != undefined &&
|
||||||
|
val.toString().length > 0) ||
|
||||||
|
$t('Please type something'),
|
||||||
|
(val) =>
|
||||||
|
parseInt(val) >= 1 ||
|
||||||
|
$t('the number must be greater than 1'),
|
||||||
|
]"
|
||||||
|
lazy-rules
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<span class="input_append">{{ $t("px") }}</span>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn
|
||||||
|
:loading="loading"
|
||||||
|
flat
|
||||||
|
:label="$t('Cancel')"
|
||||||
|
color="primary"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
ref="accept"
|
||||||
|
flat
|
||||||
|
:label="$t('Accept')"
|
||||||
|
:loading="loading"
|
||||||
|
type="submit"
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.input_append {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref, watch, computed, reactive } from "vue";
|
||||||
|
import { useStore } from "src/store";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import GlobalData from "src/common/GlobalData";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "ComponentWindowRectEditDialog",
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
let $store = useStore();
|
||||||
|
let $q = useQuasar();
|
||||||
|
let $t = useI18n();
|
||||||
|
|
||||||
|
let show_dialog = ref(false);
|
||||||
|
let loading = ref(false);
|
||||||
|
|
||||||
|
const window_rect = reactive({
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
clean: function () {
|
||||||
|
this.x = 0;
|
||||||
|
this.y = 0;
|
||||||
|
this.width = 0;
|
||||||
|
this.height = 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
formartNumber: function () {
|
||||||
|
this.x = parseInt(<any>this.x);
|
||||||
|
this.y = parseInt(<any>this.y);
|
||||||
|
this.width = parseInt(<any>this.width);
|
||||||
|
this.height = parseInt(<any>this.height);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
let _resolve: any = null;
|
||||||
|
let _reject: any = null;
|
||||||
|
|
||||||
|
const clean_promise = () => {
|
||||||
|
try {
|
||||||
|
if (_resolve && typeof _resolve == "function") {
|
||||||
|
_resolve(null);
|
||||||
|
} else if (_reject && typeof _reject == "function") {
|
||||||
|
_reject(null);
|
||||||
|
}
|
||||||
|
_resolve = null;
|
||||||
|
_reject = null;
|
||||||
|
} catch {}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
show_dialog,
|
||||||
|
loading,
|
||||||
|
window_rect,
|
||||||
|
|
||||||
|
showDialog() {
|
||||||
|
throw "please use showDialogAsync function";
|
||||||
|
},
|
||||||
|
showDialogAsync(x: number, y: number, width: number, height: number) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
clean_promise();
|
||||||
|
window_rect.clean();
|
||||||
|
window_rect.x = Math.round(x);
|
||||||
|
window_rect.y = Math.round(y);
|
||||||
|
window_rect.width = Math.round(width);
|
||||||
|
window_rect.height = Math.round(height);
|
||||||
|
|
||||||
|
_resolve = resolve;
|
||||||
|
_reject = reject;
|
||||||
|
|
||||||
|
show_dialog.value = true;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
resetData() {
|
||||||
|
show_dialog.value = false;
|
||||||
|
loading.value = false;
|
||||||
|
if (_reject) {
|
||||||
|
try {
|
||||||
|
_reject(null);
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
_resolve = null;
|
||||||
|
_reject = null;
|
||||||
|
},
|
||||||
|
onSubmit() {
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
|
window_rect.formartNumber();
|
||||||
|
|
||||||
|
const resolve_data = () => {
|
||||||
|
if (_resolve) {
|
||||||
|
try {
|
||||||
|
_resolve(window_rect);
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
_resolve = null;
|
||||||
|
_reject = null;
|
||||||
|
loading.value = false;
|
||||||
|
show_dialog.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (
|
||||||
|
window_rect.x + window_rect.width >
|
||||||
|
$store.state.device_screen_width ||
|
||||||
|
window_rect.y + window_rect.height > $store.state.device_screen_height
|
||||||
|
) {
|
||||||
|
$q.dialog({
|
||||||
|
title: $t.t("Warning"),
|
||||||
|
message:
|
||||||
|
$t.t(
|
||||||
|
"set the window rectangle beyond the desktop rectangle, the window rectangle will be clipped, are you sure to use this window rectangle"
|
||||||
|
) + "?",
|
||||||
|
cancel: true,
|
||||||
|
persistent: true,
|
||||||
|
})
|
||||||
|
.onOk(() => resolve_data())
|
||||||
|
.onCancel(() => (loading.value = false));
|
||||||
|
} else {
|
||||||
|
resolve_data();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
|
@ -480,4 +480,16 @@ export default {
|
||||||
"plan running! can't open window!": "预案正在运行!不能开窗!",
|
"plan running! can't open window!": "预案正在运行!不能开窗!",
|
||||||
"full screen window": "全屏",
|
"full screen window": "全屏",
|
||||||
"restore window size": "恢复",
|
"restore window size": "恢复",
|
||||||
|
"window rect": "窗口矩形",
|
||||||
|
"the number must be greater than 0": "数字必须大于0",
|
||||||
|
"the number must be greater than 1": "数字必须大于1",
|
||||||
|
X: "X坐标",
|
||||||
|
Y: "Y坐标",
|
||||||
|
"edit window rect": "修改窗口矩形",
|
||||||
|
"set the window rectangle beyond the desktop rectangle, the window rectangle will be clipped, are you sure to use this window rectangle":
|
||||||
|
"设置的窗口矩形超出桌面矩形,窗口矩形将会被裁剪,确定使用这个窗口矩形吗",
|
||||||
|
"desktop width": "桌面宽度",
|
||||||
|
"desktop height": "桌面高度",
|
||||||
|
px: "像素",
|
||||||
|
Warning: "警告",
|
||||||
};
|
};
|
||||||
|
|
|
@ -52,6 +52,7 @@
|
||||||
@mute_unmute="mute_unmute"
|
@mute_unmute="mute_unmute"
|
||||||
@start_polling="start_polling"
|
@start_polling="start_polling"
|
||||||
@stop_polling="stop_polling"
|
@stop_polling="stop_polling"
|
||||||
|
@edit_rect="editRect"
|
||||||
:ref="'window_' + item.window_id"
|
:ref="'window_' + item.window_id"
|
||||||
:id="'window_' + item.window_id"
|
:id="'window_' + item.window_id"
|
||||||
:uuid="item.uuid"
|
:uuid="item.uuid"
|
||||||
|
@ -74,7 +75,7 @@
|
||||||
:key="row"
|
:key="row"
|
||||||
class="row"
|
class="row"
|
||||||
:style="{
|
:style="{
|
||||||
height: cell_height + 'px',
|
height: wall_height.value / $store.state.wall_row + 'px',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
@ -83,9 +84,11 @@
|
||||||
:key="col"
|
:key="col"
|
||||||
class="col wall_item wall_item_flag"
|
class="col wall_item wall_item_flag"
|
||||||
:style="{
|
:style="{
|
||||||
width: cell_width + 'px',
|
width: wall_width / $store.state.wall_col + 'px',
|
||||||
height: cell_height + 'px',
|
height: wall_height / $store.state.wall_row + 'px',
|
||||||
}"
|
}"
|
||||||
|
:a_row="row"
|
||||||
|
:a_col="col"
|
||||||
>
|
>
|
||||||
<q-popup-proxy context-menu @show="onContextMenuShow($event)">
|
<q-popup-proxy context-menu @show="onContextMenuShow($event)">
|
||||||
<q-list>
|
<q-list>
|
||||||
|
@ -121,6 +124,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<file-manage-dialog ref="file_manage_dialog" />
|
<file-manage-dialog ref="file_manage_dialog" />
|
||||||
|
<window-rect-edit-dialog ref="window_rect_edit_dialog" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
@ -152,13 +156,14 @@ import {
|
||||||
nextTick,
|
nextTick,
|
||||||
onUpdated,
|
onUpdated,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar, dom as DomUtil } from "quasar";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useStore } from "src/store";
|
import { useStore } from "src/store";
|
||||||
const elementResizeDetectorMaker = require("element-resize-detector");
|
const elementResizeDetectorMaker = require("element-resize-detector");
|
||||||
|
|
||||||
import vue3ResizeDrag from "../third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
|
import vue3ResizeDrag from "../third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
|
||||||
import Window from "src/components/Window.vue";
|
import Window from "src/components/Window.vue";
|
||||||
|
import WindowRectEditDialog from "src/components/WindowRectEditDialog.vue";
|
||||||
import GlobalData from "src/common/GlobalData";
|
import GlobalData from "src/common/GlobalData";
|
||||||
import FileEntity from "src/entities/FileEntity";
|
import FileEntity from "src/entities/FileEntity";
|
||||||
import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
|
import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
|
||||||
|
@ -185,7 +190,12 @@ class Rect {
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "PadContentWallPage",
|
name: "PadContentWallPage",
|
||||||
components: { FileManageDialog, Window, vue3ResizeDrag },
|
components: {
|
||||||
|
FileManageDialog,
|
||||||
|
Window,
|
||||||
|
vue3ResizeDrag,
|
||||||
|
WindowRectEditDialog,
|
||||||
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const $store = useStore();
|
const $store = useStore();
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
|
@ -197,6 +207,7 @@ export default defineComponent({
|
||||||
const wall: Ref<any> = ref(null);
|
const wall: Ref<any> = ref(null);
|
||||||
const wall_content: Ref<any> = ref(null);
|
const wall_content: Ref<any> = ref(null);
|
||||||
const dom_windows: Ref<any> = ref(null);
|
const dom_windows: Ref<any> = ref(null);
|
||||||
|
const window_rect_edit_dialog: Ref<any> = ref(null);
|
||||||
|
|
||||||
const wall_content_client_width = ref(0);
|
const wall_content_client_width = ref(0);
|
||||||
const wall_content_client_height = ref(0);
|
const wall_content_client_height = ref(0);
|
||||||
|
@ -215,8 +226,6 @@ export default defineComponent({
|
||||||
get: () => $store.state.wall_col,
|
get: () => $store.state.wall_col,
|
||||||
set: (val) => $store.commit("setWallCol", val),
|
set: (val) => $store.commit("setWallCol", val),
|
||||||
});
|
});
|
||||||
const cell_width = ref(0);
|
|
||||||
const cell_height = ref(0);
|
|
||||||
|
|
||||||
const refresh_window_pos = () => {
|
const refresh_window_pos = () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
@ -497,11 +506,8 @@ export default defineComponent({
|
||||||
width = 1;
|
width = 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
wall_height.value = height;
|
wall_height.value = parseInt(height.toFixed(0));
|
||||||
wall_width.value = width;
|
wall_width.value = parseInt(width.toFixed(0));
|
||||||
|
|
||||||
cell_height.value = wall_height.value / $store.state.wall_row;
|
|
||||||
cell_width.value = wall_width.value / $store.state.wall_col;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
@ -515,8 +521,8 @@ export default defineComponent({
|
||||||
wall_content.value,
|
wall_content.value,
|
||||||
(element: HTMLElement) => {
|
(element: HTMLElement) => {
|
||||||
if (element) {
|
if (element) {
|
||||||
wall_content_client_height.value = element.clientHeight;
|
wall_content_client_height.value = DomUtil.height(element);
|
||||||
wall_content_client_width.value = element.clientWidth;
|
wall_content_client_width.value = DomUtil.width(element);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
@ -622,7 +628,7 @@ export default defineComponent({
|
||||||
const onDropSignalSourceOrPolliong = (evt: _IDropToWall) => {
|
const onDropSignalSourceOrPolliong = (evt: _IDropToWall) => {
|
||||||
if (!plan_running.value) {
|
if (!plan_running.value) {
|
||||||
if (evt && evt.data) {
|
if (evt && evt.data) {
|
||||||
let dom = document.elementFromPoint(
|
let dom_element = document.elementFromPoint(
|
||||||
evt.pos.x,
|
evt.pos.x,
|
||||||
evt.pos.y
|
evt.pos.y
|
||||||
) as HTMLElement;
|
) as HTMLElement;
|
||||||
|
@ -632,26 +638,40 @@ export default defineComponent({
|
||||||
);
|
);
|
||||||
|
|
||||||
// 有可能是窗口的子节点收到了拖拽信息,需要找到真正的窗口节点来判断
|
// 有可能是窗口的子节点收到了拖拽信息,需要找到真正的窗口节点来判断
|
||||||
if (dom) {
|
if (dom_element) {
|
||||||
const temp = find_parent_dom(dom, [
|
const temp = find_parent_dom(dom_element, [
|
||||||
"wall_item_flag",
|
"wall_item_flag",
|
||||||
"window_flag",
|
"window_flag",
|
||||||
]);
|
]);
|
||||||
if (temp) {
|
if (temp) {
|
||||||
dom = temp;
|
dom_element = temp;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (dom) {
|
if (dom_element) {
|
||||||
if (dom.classList.contains("wall_item_flag")) {
|
if (dom_element.classList.contains("wall_item_flag")) {
|
||||||
// 开窗
|
// 开窗
|
||||||
// 不知道为什么有1像素的差别
|
const cell_width = 1 / $store.state.wall_col;
|
||||||
const wall_width = wall_content_client_width.value;
|
const cell_height = 1 / $store.state.wall_row;
|
||||||
const wall_height = wall_content_client_height.value;
|
|
||||||
const x = dom.offsetLeft / wall_width;
|
let col = 0;
|
||||||
const y = dom.offsetTop / wall_height;
|
let row = 0;
|
||||||
const width = dom.offsetWidth / wall_width;
|
|
||||||
const height = dom.offsetHeight / wall_height;
|
try {
|
||||||
|
col = parseInt(dom_element.getAttribute("a_col") ?? "1") - 1;
|
||||||
|
row = parseInt(dom_element.getAttribute("a_row") ?? "1") - 1;
|
||||||
|
if (isNaN(row)) {
|
||||||
|
row = 0;
|
||||||
|
}
|
||||||
|
if (isNaN(col)) {
|
||||||
|
col = 0;
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
|
||||||
|
const x = col * cell_width;
|
||||||
|
const y = row * cell_height;
|
||||||
|
const width = cell_width;
|
||||||
|
const height = cell_height;
|
||||||
|
|
||||||
switch (evt.type) {
|
switch (evt.type) {
|
||||||
case "polling":
|
case "polling":
|
||||||
|
@ -686,9 +706,9 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
} else if (dom.classList.contains("window_flag")) {
|
} else if (dom_element.classList.contains("window_flag")) {
|
||||||
// 拖拽信号源替换窗口 后面还有一处替换窗口
|
// 拖拽信号源替换窗口 后面还有一处替换窗口
|
||||||
const rep_uuid = dom.getAttribute("uuid");
|
const rep_uuid = dom_element.getAttribute("uuid");
|
||||||
if (rep_uuid) {
|
if (rep_uuid) {
|
||||||
let window = $store.state.windows.find(
|
let window = $store.state.windows.find(
|
||||||
(item) => item.uuid == rep_uuid
|
(item) => item.uuid == rep_uuid
|
||||||
|
@ -837,13 +857,12 @@ export default defineComponent({
|
||||||
|
|
||||||
return {
|
return {
|
||||||
wall,
|
wall,
|
||||||
|
window_rect_edit_dialog,
|
||||||
file_manage_dialog,
|
file_manage_dialog,
|
||||||
wall_width,
|
wall_width,
|
||||||
wall_height,
|
wall_height,
|
||||||
wall_rows,
|
wall_rows,
|
||||||
wall_cols,
|
wall_cols,
|
||||||
cell_width,
|
|
||||||
cell_height,
|
|
||||||
plan_running,
|
plan_running,
|
||||||
area_open_window_flag,
|
area_open_window_flag,
|
||||||
area_open_window_rect,
|
area_open_window_rect,
|
||||||
|
@ -891,6 +910,34 @@ export default defineComponent({
|
||||||
GlobalData.getInstance().getCurrentClient()?.stopPolling(window_id);
|
GlobalData.getInstance().getCurrentClient()?.stopPolling(window_id);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
async editRect(window_id: number) {
|
||||||
|
if (window_rect_edit_dialog.value) {
|
||||||
|
try {
|
||||||
|
const window = $store.state.windows.find(
|
||||||
|
(element) => element && element.window_id == window_id
|
||||||
|
);
|
||||||
|
if (window) {
|
||||||
|
const result =
|
||||||
|
await window_rect_edit_dialog.value.showDialogAsync(
|
||||||
|
window.x * $store.state.device_screen_width,
|
||||||
|
window.y * $store.state.device_screen_height,
|
||||||
|
window.width * $store.state.device_screen_width,
|
||||||
|
window.height * $store.state.device_screen_height
|
||||||
|
);
|
||||||
|
if (result) {
|
||||||
|
let { x, y, width, height } = result;
|
||||||
|
x /= $store.state.device_screen_width;
|
||||||
|
y /= $store.state.device_screen_height;
|
||||||
|
width /= $store.state.device_screen_width;
|
||||||
|
height /= $store.state.device_screen_height;
|
||||||
|
GlobalData.getInstance()
|
||||||
|
.getCurrentClient()
|
||||||
|
?.setWindowGeometry(window_id, x, y, width, height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
},
|
||||||
topWindow(window_id: number) {
|
topWindow(window_id: number) {
|
||||||
GlobalData.getInstance().getCurrentClient()?.focusIn(window_id);
|
GlobalData.getInstance().getCurrentClient()?.focusIn(window_id);
|
||||||
},
|
},
|
||||||
|
|
|
@ -47,6 +47,7 @@
|
||||||
@start_polling="start_polling"
|
@start_polling="start_polling"
|
||||||
@stop_polling="stop_polling"
|
@stop_polling="stop_polling"
|
||||||
@polling_setting="polling_setting"
|
@polling_setting="polling_setting"
|
||||||
|
@edit_rect="editRect"
|
||||||
:ref="'window_' + item.window_id"
|
:ref="'window_' + item.window_id"
|
||||||
:id="'window_' + item.window_id"
|
:id="'window_' + item.window_id"
|
||||||
:uuid="item.uuid"
|
:uuid="item.uuid"
|
||||||
|
@ -79,6 +80,8 @@
|
||||||
width: item_witdh + 'px',
|
width: item_witdh + 'px',
|
||||||
height: item_height + 'px',
|
height: item_height + 'px',
|
||||||
}"
|
}"
|
||||||
|
:a_row="row"
|
||||||
|
:a_col="col"
|
||||||
>
|
>
|
||||||
<q-popup-proxy
|
<q-popup-proxy
|
||||||
context-menu
|
context-menu
|
||||||
|
@ -140,6 +143,7 @@
|
||||||
<edit-volume-dialog ref="edit_volume_dialog" />
|
<edit-volume-dialog ref="edit_volume_dialog" />
|
||||||
<polling-setting-dialog ref="polling_setting_dialog" />
|
<polling-setting-dialog ref="polling_setting_dialog" />
|
||||||
<file-manage-dialog ref="file_manage_dialog" />
|
<file-manage-dialog ref="file_manage_dialog" />
|
||||||
|
<window-rect-edit-dialog ref="window_rect_edit_dialog" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
@ -170,6 +174,7 @@ import { defineComponent, ref, Ref, computed, onMounted } from "vue";
|
||||||
const elementResizeDetectorMaker = require("element-resize-detector");
|
const elementResizeDetectorMaker = require("element-resize-detector");
|
||||||
import { Protocol } from "src/entities/WSProtocol";
|
import { Protocol } from "src/entities/WSProtocol";
|
||||||
import Window from "src/components/Window.vue";
|
import Window from "src/components/Window.vue";
|
||||||
|
import WindowRectEditDialog from "src/components/WindowRectEditDialog.vue";
|
||||||
|
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useStore } from "src/store";
|
import { useStore } from "src/store";
|
||||||
|
@ -211,6 +216,7 @@ export default defineComponent({
|
||||||
EditVolumeDialog,
|
EditVolumeDialog,
|
||||||
PollingSettingDialog,
|
PollingSettingDialog,
|
||||||
FileManageDialog,
|
FileManageDialog,
|
||||||
|
WindowRectEditDialog,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
|
@ -220,6 +226,7 @@ export default defineComponent({
|
||||||
const edit_volume_dialog: Ref<any> = ref(null);
|
const edit_volume_dialog: Ref<any> = ref(null);
|
||||||
const polling_setting_dialog: Ref<any> = ref(null);
|
const polling_setting_dialog: Ref<any> = ref(null);
|
||||||
const file_manage_dialog: Ref<any> = ref(null);
|
const file_manage_dialog: Ref<any> = ref(null);
|
||||||
|
const window_rect_edit_dialog: Ref<any> = ref(null);
|
||||||
|
|
||||||
const last_context_menu_pos_x = ref(0);
|
const last_context_menu_pos_x = ref(0);
|
||||||
const last_context_menu_pos_y = ref(0);
|
const last_context_menu_pos_y = ref(0);
|
||||||
|
@ -654,15 +661,7 @@ export default defineComponent({
|
||||||
rect.height = rect.height ?? 0;
|
rect.height = rect.height ?? 0;
|
||||||
rect.left = rect.left ?? 0;
|
rect.left = rect.left ?? 0;
|
||||||
rect.top = rect.top ?? 0;
|
rect.top = rect.top ?? 0;
|
||||||
// moveWindow(window_id, evt);
|
|
||||||
if (wall.value) {
|
if (wall.value) {
|
||||||
// GlobalData.getInstance()
|
|
||||||
// .getCurrentClient()
|
|
||||||
// ?.resizeWindow(
|
|
||||||
// window_id,
|
|
||||||
// evt.width / wall.value.clientWidth,
|
|
||||||
// evt.height / wall.value.clientHeight
|
|
||||||
// );
|
|
||||||
const x =
|
const x =
|
||||||
rect.left -
|
rect.left -
|
||||||
(wall.value.parentElement?.offsetLeft ?? 0) -
|
(wall.value.parentElement?.offsetLeft ?? 0) -
|
||||||
|
@ -686,6 +685,7 @@ export default defineComponent({
|
||||||
return {
|
return {
|
||||||
windows,
|
windows,
|
||||||
wall,
|
wall,
|
||||||
|
window_rect_edit_dialog,
|
||||||
wall_rows,
|
wall_rows,
|
||||||
wall_cols,
|
wall_cols,
|
||||||
item_witdh,
|
item_witdh,
|
||||||
|
@ -726,14 +726,31 @@ export default defineComponent({
|
||||||
);
|
);
|
||||||
|
|
||||||
{
|
{
|
||||||
const dom: HTMLElement | null = e.target as HTMLElement;
|
const dom_element: HTMLElement | null = e.target as HTMLElement;
|
||||||
if (wall.value && dom) {
|
if (wall.value && dom_element) {
|
||||||
if (dom.classList.contains("wall_item_flag")) {
|
if (dom_element.classList.contains("wall_item_flag")) {
|
||||||
// 开窗
|
// 开窗
|
||||||
const x = dom.offsetLeft / wall.value.clientWidth;
|
const cell_width = 1 / $store.state.wall_col;
|
||||||
const y = dom.offsetTop / wall.value.clientHeight;
|
const cell_height = 1 / $store.state.wall_row;
|
||||||
const width = dom.offsetWidth / wall.value.clientWidth;
|
|
||||||
const height = dom.offsetHeight / wall.value.clientHeight;
|
let col = 0;
|
||||||
|
let row = 0;
|
||||||
|
|
||||||
|
try {
|
||||||
|
col = parseInt(dom_element.getAttribute("a_col") ?? "1") - 1;
|
||||||
|
row = parseInt(dom_element.getAttribute("a_row") ?? "1") - 1;
|
||||||
|
if (isNaN(row)) {
|
||||||
|
row = 0;
|
||||||
|
}
|
||||||
|
if (isNaN(col)) {
|
||||||
|
col = 0;
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
|
||||||
|
const x = col * cell_width;
|
||||||
|
const y = row * cell_height;
|
||||||
|
const width = cell_width;
|
||||||
|
const height = cell_height;
|
||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case "polling":
|
case "polling":
|
||||||
|
@ -768,9 +785,9 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
} else if (dom.classList.contains("window_flag")) {
|
} else if (dom_element.classList.contains("window_flag")) {
|
||||||
// 拖拽信号源替换窗口 后面还有一处替换窗口
|
// 拖拽信号源替换窗口 后面还有一处替换窗口
|
||||||
const rep_uuid = dom.getAttribute("uuid");
|
const rep_uuid = dom_element.getAttribute("uuid");
|
||||||
if (rep_uuid) {
|
if (rep_uuid) {
|
||||||
let window = $store.state.windows.find(
|
let window = $store.state.windows.find(
|
||||||
(item) => item.uuid == rep_uuid
|
(item) => item.uuid == rep_uuid
|
||||||
|
@ -892,13 +909,6 @@ export default defineComponent({
|
||||||
moveWindow,
|
moveWindow,
|
||||||
resizeWindow,
|
resizeWindow,
|
||||||
closeAllWindows() {
|
closeAllWindows() {
|
||||||
// for (const window of $store.state.windows) {
|
|
||||||
// if (window) {
|
|
||||||
// GlobalData.getInstance()
|
|
||||||
// .getCurrentClient()
|
|
||||||
// ?.closeWindow(window.window_id);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
GlobalData.getInstance().getCurrentClient()?.closeWindow(-1);
|
GlobalData.getInstance().getCurrentClient()?.closeWindow(-1);
|
||||||
},
|
},
|
||||||
topWindow(window_id: number) {
|
topWindow(window_id: number) {
|
||||||
|
@ -963,6 +973,35 @@ export default defineComponent({
|
||||||
GlobalData.getInstance().getCurrentClient()?.stopPolling(window_id);
|
GlobalData.getInstance().getCurrentClient()?.stopPolling(window_id);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
async editRect(window_id: number) {
|
||||||
|
if (window_rect_edit_dialog.value) {
|
||||||
|
try {
|
||||||
|
const window = $store.state.windows.find(
|
||||||
|
(element) => element && element.window_id == window_id
|
||||||
|
);
|
||||||
|
if (window) {
|
||||||
|
const result =
|
||||||
|
await window_rect_edit_dialog.value.showDialogAsync(
|
||||||
|
window.x * $store.state.device_screen_width,
|
||||||
|
window.y * $store.state.device_screen_height,
|
||||||
|
window.width * $store.state.device_screen_width,
|
||||||
|
window.height * $store.state.device_screen_height
|
||||||
|
);
|
||||||
|
if (result) {
|
||||||
|
let { x, y, width, height } = result;
|
||||||
|
|
||||||
|
x /= $store.state.device_screen_width;
|
||||||
|
y /= $store.state.device_screen_height;
|
||||||
|
width /= $store.state.device_screen_width;
|
||||||
|
height /= $store.state.device_screen_height;
|
||||||
|
GlobalData.getInstance()
|
||||||
|
.getCurrentClient()
|
||||||
|
?.setWindowGeometry(window_id, x, y, width, height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
},
|
||||||
async polling_setting(window_id: number) {
|
async polling_setting(window_id: number) {
|
||||||
const window = windows.value.find(
|
const window = windows.value.find(
|
||||||
(element) => element && element.window_id == window_id
|
(element) => element && element.window_id == window_id
|
||||||
|
|
Loading…
Reference in New Issue