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

2022-04-20 08:25:38 +08:00 · 2022-04-20 08:25:38 +08:00 · 66d3e9cac1
parent 267d827fdb
commit 66d3e9cac1
7 changed files with 258 additions and 39 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -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 {};
  },
 });
--- a/src/RedirectPage.vue
+++ b/src/RedirectPage.vue
@ -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
--- a/src/pad/BottomBar.vue
+++ b/src/pad/BottomBar.vue
@ -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);
+        }
+      },
    };
  },
 });
--- a/src/pad/ContentWall.vue
+++ b/src/pad/ContentWall.vue
@ -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,
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -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];
--- a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/renderData.ts
+++ b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/renderData.ts
@ -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 [
--- a/src/third_lib/vuedraggable/vuedraggable.js
+++ b/src/third_lib/vuedraggable/vuedraggable.js
@ -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,