添加屏幕旋转代码,修复拖拽到窗口标题上不替换窗口的BUG

This commit is contained in:
fangxiang 2022-04-20 08:25:38 +08:00
parent 267d827fdb
commit 66d3e9cac1
7 changed files with 258 additions and 39 deletions

View File

@ -6,11 +6,10 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { SessionStorage, Cookies } from "quasar"; import { SessionStorage, Cookies, useQuasar } from "quasar";
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import EventBus, { EventNamesDefine } from "src/common/EventBus"; import EventBus, { EventNamesDefine } from "src/common/EventBus";
import GlobalData from "./common/GlobalData";
import { useStore } from "src/store"; import { useStore } from "src/store";
import VConsole from "vconsole"; import VConsole from "vconsole";
@ -27,7 +26,8 @@ export default defineComponent({
setup() { setup() {
const $t = useI18n(); const $t = useI18n();
const $q = useStore(); const $store = useStore();
const $q = useQuasar();
document.title = $t.t("title"); document.title = $t.t("title");
@ -70,6 +70,26 @@ export default defineComponent({
window.location.reload(); window.location.reload();
}; };
const landspace = () => {
let landspace = false;
if ($q.platform.is.desktop) {
landspace = window.innerWidth > innerHeight;
} else {
landspace = window.screen.width > window.screen.height;
}
if (Math.abs(window.orientation) == 90) {
landspace = !landspace;
}
return landspace;
};
(<any>window).landspace = landspace;
window.onorientationchange = () => {
$store.commit("updateLandspace", landspace());
};
$store.commit("updateLandspace", landspace());
return {}; return {};
}, },
}); });

View File

@ -4,6 +4,7 @@
import { defineComponent, ref } from "vue"; import { defineComponent, ref } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { useStore } from "src/store";
export default defineComponent({ export default defineComponent({
name: "RedirectPage", name: "RedirectPage",
@ -13,11 +14,19 @@ export default defineComponent({
setup() { setup() {
let $q = useQuasar(); let $q = useQuasar();
let $router = useRouter(); let $router = useRouter();
const $store = useStore();
let landspace = $store.state.landspace;
try {
landspace = (<any>window).landspace();
} catch {}
if ( if (
($q.platform.is.mobile && $q.platform.has.touch) || ($q.platform.is.mobile && $q.platform.has.touch) ||
$q.platform.is.ipad $q.platform.is.ipad
) { ) {
if (window.innerWidth > window.innerHeight) { if (landspace) {
$router.push("/pad"); $router.push("/pad");
} else { } else {
// TODO route to mobile // TODO route to mobile

View File

@ -1,13 +1,18 @@
<template> <template>
<div class="row full-width" style="height: 35vh"> <div
<div class="col-9"> class="row full-width"
style="height: 35vh"
@touchstart="$event.stopPropagation()"
>
<div :class="'col-' + ($store.state.landspace ? '9' : '8')">
<div class="q-ma-md bg-primary"> <div class="q-ma-md bg-primary">
<div class="row bg-primary"> <div class="row bg-primary">
<q-tabs <q-tabs
v-model="tab" v-model="tab"
dense dense
inline-label inline-label
class="text-white bg-accent col-8" class="text-white bg-accent"
:class="'col-' + ($store.state.landspace ? '8' : '12')"
style="border: none" style="border: none"
active-color="secondary" active-color="secondary"
indicator-color="secondary" indicator-color="secondary"
@ -87,59 +92,76 @@
</div> </div>
</div> </div>
<div class="full-height col-3"> <div
class="full-height"
:class="'col-' + ($store.state.landspace ? '3' : '4')"
>
<div> <div>
<div class="row q-my-lg"></div> <div class="row q-my-lg" style="width: 1px; height: 1px"></div>
<div class="row q-my-md"></div> <div class="row q-my-md" style="width: 1px; height: 1px"></div>
<div class="row q-my-sm q-mt-lg"> <div class="row">
<q-space /> <q-space />
<q-btn <q-btn
:disable="!can_next_prev_window || plan_running"
icon="img:pad/play_control/play_prev_icon.png" icon="img:pad/play_control/play_prev_icon.png"
flat flat
size="1.2rem" size="1.2rem"
class="col-auto" class="col-auto"
@click="playPrev($event)"
/> />
<q-btn <q-btn
:disable="!can_pause_window || plan_running"
:icon=" :icon="
paused selected_window?.paused
? 'img:pad/play_control/pause_icon.png' ? 'img:pad/play_control/play_icon.png'
: 'img:pad/play_control/play_icon.png' : 'img:pad/play_control/pause_icon.png'
" "
flat flat
size="2.4rem" size="2.4rem"
class="col-auto q-mx-xs" class="col-auto"
@click="selected_window?.paused ? play($event) : pause($event)"
/> />
<q-btn <q-btn
:disable="!can_next_prev_window || plan_running"
icon="img:pad/play_control/play_next_icon.png" icon="img:pad/play_control/play_next_icon.png"
flat flat
size="1.2rem" size="1.2rem"
class="col-auto" class="col-auto"
@click="playNext($event)"
/> />
<q-space /> <q-space />
</div> </div>
<div class="row q-my-sm"> <div class="row q-my-sm">
<q-space /> <q-space />
<q-btn <q-btn
:disable="plan_running"
icon="img:pad/play_control/volume_down_icon.png" icon="img:pad/play_control/volume_down_icon.png"
flat flat
size="1.2rem" size="1.2rem"
class="col-auto" class="col-auto"
@click="volumeDown($event)"
/> />
<q-btn <q-btn
:disable="plan_running"
:icon=" :icon="
muted selected_window?.muted
? 'img:pad/play_control/unmute_icon.png' ? 'img:pad/play_control/unmute_icon.png'
: 'img:pad/play_control/mute_icon.png' : 'img:pad/play_control/mute_icon.png'
" "
flat flat
size="1.2rem" size="1.2rem"
class="col-auto q-mx-xs" class="col-auto"
@click="
selected_window?.muted ? unmuteWindow($event) : muteWindow($event)
"
/> />
<q-btn <q-btn
:disable="plan_running"
icon="img:pad/play_control/volume_up_icon.png" icon="img:pad/play_control/volume_up_icon.png"
flat flat
size="1.2rem" size="1.2rem"
class="col-auto" class="col-auto"
@click="volumeUp($event)"
/> />
<q-space /> <q-space />
</div> </div>
@ -164,6 +186,8 @@ import draggable from "src/third_lib/vuedraggable/vuedraggable";
import { SignalSourceEntity } from "src/entities/SignalSourceEntity"; import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
import { Common } from "src/common/Common"; import { Common } from "src/common/Common";
import EventBus, { EventNamesDefine } from "src/common/EventBus"; import EventBus, { EventNamesDefine } from "src/common/EventBus";
import GlobalData from "src/common/GlobalData";
import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
export default defineComponent({ export default defineComponent({
name: "PadBottomBarPage", name: "PadBottomBarPage",
@ -173,9 +197,6 @@ export default defineComponent({
const $q = useQuasar(); const $q = useQuasar();
const $t = useI18n(); const $t = useI18n();
const paused = ref(false);
const muted = ref(false);
const signal_sources = computed({ const signal_sources = computed({
get: () => $store.state.signal_sources, get: () => $store.state.signal_sources,
set: (val) => null, set: (val) => null,
@ -197,14 +218,61 @@ export default defineComponent({
}); });
const tab = ref("signal_source"); const tab = ref("signal_source");
let selected_window: Ref<WindowOpenNotifyEntity | null> = ref(null);
let is_multimedia_window = ref(false);
let can_pause_window = ref(false);
let can_next_prev_window = ref(false);
const plan_running = computed(
() => $store.state.current_running_plan.trim() != ""
);
watch(
() => $store.state.selected_window,
(newValue, oldValue) => {
const window = $store.state.windows.find(
(element) => element && element.uuid == newValue
);
if (window) {
selected_window.value = window;
const signal_source = GlobalData.getInstance().signal_source.find(
(element) =>
element && element.uuid == window.signal_source_table_uuid
);
if (signal_source) {
const type = window.polling
? window.polling_window_type
: signal_source.window_type;
is_multimedia_window.value =
type == "EwindowType::Multimedia" ||
type == "EwindowType::Rtsp" ||
type == "EwindowType::HdmiIn";
can_pause_window.value =
type == "EwindowType::Multimedia" ||
type == "EwindowType::HdmiIn";
can_next_prev_window.value = type == "EwindowType::Multimedia";
}
} else {
selected_window.value = null;
is_multimedia_window.value = false;
}
}
);
return { return {
tab, tab,
paused,
muted,
signal_sources, signal_sources,
modes, modes,
pollings, pollings,
plans, plans,
selected_window,
is_multimedia_window,
can_pause_window,
can_next_prev_window,
plan_running,
loga(a: any) { loga(a: any) {
console.log(a); console.log(a);
}, },
@ -212,7 +280,6 @@ export default defineComponent({
return Common.getSignalSourceIcon(item_type); return Common.getSignalSourceIcon(item_type);
}, },
onSignalSourceDrop(evt: any) { onSignalSourceDrop(evt: any) {
console.log(evt);
if ( if (
evt.data && evt.data &&
evt.event && evt.event &&
@ -231,6 +298,78 @@ export default defineComponent({
}); });
} }
}, },
volumeUp(evt: MouseEvent) {
evt.stopPropagation();
if (selected_window.value) {
let volume = selected_window.value.volume + 5;
if (volume > 100) {
volume = 100;
}
GlobalData.getInstance()
.getCurrentClient()
?.setWindowVolume(selected_window.value.window_id, volume);
}
},
muteWindow(evt: MouseEvent) {
evt.stopPropagation();
if (selected_window.value) {
GlobalData.getInstance()
.getCurrentClient()
?.muteWindow(selected_window.value.window_id);
}
},
unmuteWindow(evt: MouseEvent) {
evt.stopPropagation();
if (selected_window.value) {
GlobalData.getInstance()
.getCurrentClient()
?.unmuteWindow(selected_window.value.window_id);
}
},
volumeDown(evt: MouseEvent) {
evt.stopPropagation();
if (selected_window.value) {
let volume = selected_window.value.volume - 5;
if (volume < 0) {
volume = 0;
}
GlobalData.getInstance()
.getCurrentClient()
?.setWindowVolume(selected_window.value.window_id, volume);
}
},
playNext(evt: MouseEvent) {
evt.stopPropagation();
if (selected_window.value) {
GlobalData.getInstance()
.getCurrentClient()
?.windowPlayNext(selected_window.value.window_id);
}
},
play(evt: MouseEvent) {
evt.stopPropagation();
if (selected_window.value) {
GlobalData.getInstance()
.getCurrentClient()
?.playWindow(selected_window.value.window_id);
}
},
pause(evt: MouseEvent) {
evt.stopPropagation();
if (selected_window.value) {
GlobalData.getInstance()
.getCurrentClient()
?.pauseWindow(selected_window.value.window_id);
}
},
playPrev(evt: MouseEvent) {
evt.stopPropagation();
if (selected_window.value) {
GlobalData.getInstance()
.getCurrentClient()
?.windowPlayPrev(selected_window.value.window_id);
}
},
}; };
}, },
}); });

View File

@ -13,19 +13,20 @@
> >
<div id="windows" ref="dom_windows" style="position: absolute"> <div id="windows" ref="dom_windows" style="position: absolute">
<vue3-resize-drag <vue3-resize-drag
:w="item.width * ($refs.wall_content?.clientWidth ?? 0)" :w="item.width * wall_content_client_width"
:h="item.height * ($refs.wall_content?.clientHeight ?? 0)" :h="item.height * wall_content_client_height"
:x=" :x="
$refs.wall?.parentElement?.offsetLeft + $refs.wall?.parentElement?.offsetLeft +
$refs.wall_content?.offsetLeft + $refs.wall_content?.offsetLeft +
item.x * ($refs.wall_content?.clientWidth ?? 0) item.x * wall_content_client_width
" "
:y=" :y="
$refs.wall?.parentElement?.offsetTop + $refs.wall?.parentElement?.offsetTop +
$refs.wall_content?.offsetTop + $refs.wall_content?.offsetTop +
item.y * ($refs.wall_content?.clientHeight ?? 0) item.y * wall_content_client_height
" "
:zIndex=" :zIndex="
1 +
$store.state.windows_sort.findIndex( $store.state.windows_sort.findIndex(
(element) => element == item.uuid (element) => element == item.uuid
) )
@ -191,6 +192,9 @@ export default defineComponent({
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 wall_content_client_width = ref(0);
const wall_content_client_height = ref(0);
const file_manage_dialog: Ref<any> = ref(null); const file_manage_dialog: Ref<any> = ref(null);
const wall_width = ref(0); const wall_width = ref(0);
@ -447,7 +451,6 @@ export default defineComponent({
wall_parent, wall_parent,
(element: HTMLElement) => { (element: HTMLElement) => {
if (element) { if (element) {
console.log();
let height = wall_parent.offsetHeight * 0.9; let height = wall_parent.offsetHeight * 0.9;
let width = height / 0.56; let width = height / 0.56;
@ -468,6 +471,21 @@ export default defineComponent({
console.error("dom error"); console.error("dom error");
console.error((wall.value as HTMLElement).parentElement); console.error((wall.value as HTMLElement).parentElement);
} }
if (wall.value && wall.value.parentElement) {
elementResizeDetectorMaker().listenTo(
wall_content.value,
(element: HTMLElement) => {
if (element) {
wall_content_client_height.value = element.clientHeight;
wall_content_client_width.value = element.clientWidth;
}
}
);
} else {
console.error("dom error");
console.error((wall.value as HTMLElement).parentElement);
}
}); });
interface __Rect { interface __Rect {
@ -535,6 +553,25 @@ export default defineComponent({
} }
}; };
const find_parent_dom = (dom: HTMLElement, classess: string[]) => {
let parent: HTMLElement | null = dom;
while (parent) {
if (parent) {
for (const clazz of classess) {
if (clazz) {
if (parent.classList.contains(clazz)) {
return parent;
}
}
}
parent = parent.parentElement;
} else {
break;
}
}
return parent;
};
interface _IDropToWall { interface _IDropToWall {
data: any; data: any;
type: string; type: string;
@ -556,7 +593,7 @@ export default defineComponent({
// (wall.value.parentElement?.offsetTop ?? 0) - // (wall.value.parentElement?.offsetTop ?? 0) -
// wall_content.value.offsetTop; // wall_content.value.offsetTop;
const dom = document.elementFromPoint( let dom = document.elementFromPoint(
evt.pos.x, evt.pos.x,
evt.pos.y evt.pos.y
) as HTMLElement; ) as HTMLElement;
@ -565,16 +602,23 @@ export default defineComponent({
(item) => (item as any)?.uuid == evt.data.uuid (item) => (item as any)?.uuid == evt.data.uuid
); );
//
if (dom) {
const temp = find_parent_dom(dom, [
"wall_item_flag",
"window_flag",
]);
if (temp) {
dom = temp;
}
}
if (dom) { if (dom) {
if (dom.classList.contains("wall_item_flag")) { if (dom.classList.contains("wall_item_flag")) {
// //
// 1 // 1
const x = const x = dom.offsetLeft / wall_content.value.clientWidth;
(dom.offsetLeft - wall_content.value.offsetLeft - 1) / const y = dom.offsetTop / wall_content.value.clientHeight;
wall_content.value.clientWidth;
const y =
(dom.offsetTop - wall_content.value.offsetTop - 1) /
wall_content.value.clientHeight;
const width = dom.offsetWidth / wall_content.value.clientWidth; const width = dom.offsetWidth / wall_content.value.clientWidth;
const height = dom.offsetHeight / wall_content.value.clientHeight; const height = dom.offsetHeight / wall_content.value.clientHeight;
@ -717,6 +761,8 @@ export default defineComponent({
windows, windows,
wall_content, wall_content,
dom_windows, dom_windows,
wall_content_client_width,
wall_content_client_height,
// functions // functions
moveWindow, moveWindow,

View File

@ -59,6 +59,7 @@ export interface StateInterface {
plans: PlanEntity[]; plans: PlanEntity[];
pollings: PollingEntity[]; pollings: PollingEntity[];
signal_sources: SignalSourceEntity[]; signal_sources: SignalSourceEntity[];
landspace: boolean;
} }
// provide typings for `this.$store` // provide typings for `this.$store`
@ -304,12 +305,18 @@ export default store(function (/* { ssrContext } */) {
plans: [], plans: [],
pollings: [], pollings: [],
signal_sources: [], signal_sources: [],
landspace: false,
}, },
mutations: { mutations: {
setInitialized(state: StateInterface, playload?: any[]) { setInitialized(state: StateInterface, playload?: any) {
state.initialized = true; state.initialized = true;
}, },
updateLandspace(state: StateInterface, playload?: any) {
if (typeof playload == "boolean") {
state.landspace = playload;
}
},
setArrayValue(state: StateInterface, playload?: any) { setArrayValue(state: StateInterface, playload?: any) {
if (Array.isArray(playload.value)) { if (Array.isArray(playload.value)) {
const arr: Array<any> = (<any>state)[playload.name]; const arr: Array<any> = (<any>state)[playload.name];

View File

@ -34,7 +34,7 @@ function render(props: any) {
// pad 放大拖拽的点 // pad 放大拖拽的点
let targetResizeIconSize = props.resizeIconSize; let targetResizeIconSize = props.resizeIconSize;
if ((<any>window).isPad) { if ((<any>window).isPad) {
targetResizeIconSize *= 1.5; targetResizeIconSize *= 1.8;
} }
const dragElResizeIcon = computed(() => { const dragElResizeIcon = computed(() => {
return [ return [

View File

@ -144,8 +144,6 @@ const draggableComponent = defineComponent({
AfxTest.prototype = { AfxTest.prototype = {
dropGlobal: function dropGlobal(evt) { dropGlobal: function dropGlobal(evt) {
console.log("oooooooooooooooooooo");
console.log(evt);
try { try {
self.$emit("drop", { self.$emit("drop", {
data: evt.dragEl.__draggable_context.element, data: evt.dragEl.__draggable_context.element,