添加屏幕旋转代码,修复拖拽到窗口标题上不替换窗口的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>
</template>
<script lang="ts">
import { SessionStorage, Cookies } from "quasar";
import { SessionStorage, Cookies, useQuasar } from "quasar";
import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import GlobalData from "./common/GlobalData";
import { useStore } from "src/store";
import VConsole from "vconsole";
@ -27,7 +26,8 @@ export default defineComponent({
setup() {
const $t = useI18n();
const $q = useStore();
const $store = useStore();
const $q = useQuasar();
document.title = $t.t("title");
@ -70,6 +70,26 @@ export default defineComponent({
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 {};
},
});

View File

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

View File

@ -1,13 +1,18 @@
<template>
<div class="row full-width" style="height: 35vh">
<div class="col-9">
<div
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="row bg-primary">
<q-tabs
v-model="tab"
dense
inline-label
class="text-white bg-accent col-8"
class="text-white bg-accent"
:class="'col-' + ($store.state.landspace ? '8' : '12')"
style="border: none"
active-color="secondary"
indicator-color="secondary"
@ -87,59 +92,76 @@
</div>
</div>
<div class="full-height col-3">
<div
class="full-height"
:class="'col-' + ($store.state.landspace ? '3' : '4')"
>
<div>
<div class="row q-my-lg"></div>
<div class="row q-my-md"></div>
<div class="row q-my-sm q-mt-lg">
<div class="row q-my-lg" style="width: 1px; height: 1px"></div>
<div class="row q-my-md" style="width: 1px; height: 1px"></div>
<div class="row">
<q-space />
<q-btn
:disable="!can_next_prev_window || plan_running"
icon="img:pad/play_control/play_prev_icon.png"
flat
size="1.2rem"
class="col-auto"
@click="playPrev($event)"
/>
<q-btn
:disable="!can_pause_window || plan_running"
:icon="
paused
? 'img:pad/play_control/pause_icon.png'
: 'img:pad/play_control/play_icon.png'
selected_window?.paused
? 'img:pad/play_control/play_icon.png'
: 'img:pad/play_control/pause_icon.png'
"
flat
size="2.4rem"
class="col-auto q-mx-xs"
class="col-auto"
@click="selected_window?.paused ? play($event) : pause($event)"
/>
<q-btn
:disable="!can_next_prev_window || plan_running"
icon="img:pad/play_control/play_next_icon.png"
flat
size="1.2rem"
class="col-auto"
@click="playNext($event)"
/>
<q-space />
</div>
<div class="row q-my-sm">
<q-space />
<q-btn
:disable="plan_running"
icon="img:pad/play_control/volume_down_icon.png"
flat
size="1.2rem"
class="col-auto"
@click="volumeDown($event)"
/>
<q-btn
:disable="plan_running"
:icon="
muted
selected_window?.muted
? 'img:pad/play_control/unmute_icon.png'
: 'img:pad/play_control/mute_icon.png'
"
flat
size="1.2rem"
class="col-auto q-mx-xs"
class="col-auto"
@click="
selected_window?.muted ? unmuteWindow($event) : muteWindow($event)
"
/>
<q-btn
:disable="plan_running"
icon="img:pad/play_control/volume_up_icon.png"
flat
size="1.2rem"
class="col-auto"
@click="volumeUp($event)"
/>
<q-space />
</div>
@ -164,6 +186,8 @@ import draggable from "src/third_lib/vuedraggable/vuedraggable";
import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
import { Common } from "src/common/Common";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import GlobalData from "src/common/GlobalData";
import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
export default defineComponent({
name: "PadBottomBarPage",
@ -173,9 +197,6 @@ export default defineComponent({
const $q = useQuasar();
const $t = useI18n();
const paused = ref(false);
const muted = ref(false);
const signal_sources = computed({
get: () => $store.state.signal_sources,
set: (val) => null,
@ -197,14 +218,61 @@ export default defineComponent({
});
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 {
tab,
paused,
muted,
signal_sources,
modes,
pollings,
plans,
selected_window,
is_multimedia_window,
can_pause_window,
can_next_prev_window,
plan_running,
loga(a: any) {
console.log(a);
},
@ -212,7 +280,6 @@ export default defineComponent({
return Common.getSignalSourceIcon(item_type);
},
onSignalSourceDrop(evt: any) {
console.log(evt);
if (
evt.data &&
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">
<vue3-resize-drag
:w="item.width * ($refs.wall_content?.clientWidth ?? 0)"
:h="item.height * ($refs.wall_content?.clientHeight ?? 0)"
:w="item.width * wall_content_client_width"
:h="item.height * wall_content_client_height"
:x="
$refs.wall?.parentElement?.offsetLeft +
$refs.wall_content?.offsetLeft +
item.x * ($refs.wall_content?.clientWidth ?? 0)
item.x * wall_content_client_width
"
:y="
$refs.wall?.parentElement?.offsetTop +
$refs.wall_content?.offsetTop +
item.y * ($refs.wall_content?.clientHeight ?? 0)
item.y * wall_content_client_height
"
:zIndex="
1 +
$store.state.windows_sort.findIndex(
(element) => element == item.uuid
)
@ -191,6 +192,9 @@ export default defineComponent({
const wall_content: 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 wall_width = ref(0);
@ -447,7 +451,6 @@ export default defineComponent({
wall_parent,
(element: HTMLElement) => {
if (element) {
console.log();
let height = wall_parent.offsetHeight * 0.9;
let width = height / 0.56;
@ -468,6 +471,21 @@ export default defineComponent({
console.error("dom error");
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 {
@ -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 {
data: any;
type: string;
@ -556,7 +593,7 @@ export default defineComponent({
// (wall.value.parentElement?.offsetTop ?? 0) -
// wall_content.value.offsetTop;
const dom = document.elementFromPoint(
let dom = document.elementFromPoint(
evt.pos.x,
evt.pos.y
) as HTMLElement;
@ -565,16 +602,23 @@ export default defineComponent({
(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.classList.contains("wall_item_flag")) {
//
// 1
const x =
(dom.offsetLeft - wall_content.value.offsetLeft - 1) /
wall_content.value.clientWidth;
const y =
(dom.offsetTop - wall_content.value.offsetTop - 1) /
wall_content.value.clientHeight;
const x = dom.offsetLeft / wall_content.value.clientWidth;
const y = dom.offsetTop / wall_content.value.clientHeight;
const width = dom.offsetWidth / wall_content.value.clientWidth;
const height = dom.offsetHeight / wall_content.value.clientHeight;
@ -717,6 +761,8 @@ export default defineComponent({
windows,
wall_content,
dom_windows,
wall_content_client_width,
wall_content_client_height,
// functions
moveWindow,

View File

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

View File

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

View File

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