增加模式，预案，轮询功能。增加全屏切换功能。

src/i18n/zh-CN/index.ts

@@ -470,4 +470,5 @@ export default {
   "number must between": "数字必须在",
   CN_BERWEEN_SUFFIX: "之间",
   "full screen": "全屏",
+  "exit full screen": "退出全屏",
 };

src/pad/BottomBar.vue

@@ -78,15 +78,84 @@
               </draggable>
             </q-scroll-area>
           </q-tab-panel>
-          <q-tab-panel name="singal_polling" class="full-width __panel_item">
+          <q-tab-panel
-            singal_pollingsingal_pollingsingal_pollingsingal_polling
+            name="singal_polling"
+            class="full-width __panel_item q-pa-xs"
+          >
+            <q-scroll-area class="fit q-pr-md">
+              <draggable
+                class="row q-px-md"
+                v-model="pollings"
+                group="polling"
+                item-key="uuid"
+                :move="() => false"
+                @drop="onPollingDrop($event)"
+              >
+                <template #item="{ element }">
+                  <div class="col-4 q-pr-sm q-pb-sm">
+                    <q-btn
+                      class="col-row fit overflow-hidden bg-accent text-white"
+                      icon="img:pad/polling_icon.png"
+                    >
+                      <span class="col q-ml-md text-left">
+                        {{ element.name }}
+                      </span>
+                    </q-btn>
+                  </div>
+                </template>
+              </draggable>
+            </q-scroll-area>
           </q-tab-panel>
 
-          <q-tab-panel name="mode" class="full-width __panel_item">
+          <q-tab-panel name="mode" class="full-width __panel_item q-pa-xs">
-            modemodemodemodemode
+            <q-scroll-area class="fit q-pr-md">
+              <draggable
+                class="row q-px-md"
+                v-model="modes"
+                group="mode"
+                item-key="uuid"
+                :move="() => false"
+                @drop="onModeDrop($event)"
+              >
+                <template #item="{ element }">
+                  <div class="col-4 q-pr-sm q-pb-sm">
+                    <q-btn
+                      class="col-row fit overflow-hidden bg-accent text-white"
+                      icon="img:pad/mode_icon.png"
+                    >
+                      <span class="col q-ml-md text-left">
+                        {{ element.name }}
+                      </span>
+                    </q-btn>
+                  </div>
+                </template>
+              </draggable>
+            </q-scroll-area>
           </q-tab-panel>
-          <q-tab-panel name="plan" class="full-width __panel_item">
+          <q-tab-panel name="plan" class="full-width __panel_item q-pa-xs">
-            planplanplanplanplanplanplan
+            <q-scroll-area class="fit q-pr-md">
+              <draggable
+                class="row q-px-md"
+                v-model="plans"
+                group="plans"
+                item-key="uuid"
+                :move="() => false"
+                @drop="onPlanDrop($event)"
+              >
+                <template #item="{ element }">
+                  <div class="col-4 q-pr-sm q-pb-sm">
+                    <q-btn
+                      class="col-row fit overflow-hidden bg-accent text-white"
+                      icon="img:pad/plan_icon.png"
+                    >
+                      <span class="col q-ml-md text-left">
+                        {{ element.name }}
+                      </span>
+                    </q-btn>
+                  </div>
+                </template>
+              </draggable>
+            </q-scroll-area>
           </q-tab-panel>
         </q-tab-panels>
       </div>
@@ -262,6 +331,26 @@ export default defineComponent({
       }
     );
 
+    const emit_drop_events = (evt: any, type: string) => {
+      if (
+        evt.data &&
+        evt.event &&
+        evt.event.changedTouches &&
+        evt.event.changedTouches.length
+      ) {
+        const touchX = evt.event.changedTouches[0].pageX;
+        const touchY = evt.event.changedTouches[0].pageY;
+        EventBus.getInstance().emit(EventNamesDefine.DropToWall, {
+          type,
+          data: evt.data,
+          pos: {
+            x: touchX,
+            y: touchY,
+          },
+        });
+      }
+    };
+
     return {
       tab,
       signal_sources,
@@ -277,26 +366,37 @@ export default defineComponent({
         console.log(a);
       },
       getItemIcon(item_type: string) {
-        return Common.getSignalSourceIcon(item_type);
+        let icon_map = new Map([
+          ["EwindowType::Normal", "img:pad/source_icon/media.png"],
+          ["EwindowType::Multimedia", "img:pad/source_icon/media.png"],
+          ["EwindowType::Web", "img:pad/source_icon/web.png"],
+          ["EwindowType::Image", "img:pad/source_icon/image.png"],
+          ["EwindowType::Pdf", "img:pad/source_icon/pdf.png"],
+          ["EwindowType::Ppt", "img:pad/source_icon/ppt.png"],
+          ["EwindowType::Rtsp", "img:pad/source_icon/rtsp.png"],
+          ["EwindowType::Subtitles", "img:pad/source_icon/subtitles.png"],
+          ["EwindowType::Clock", "img:pad/source_icon/clock.png"],
+          ["EwindowType::Weather", "img:pad/source_icon/weather.png"],
+          ["EwindowType::HdmiIn", "img:pad/source_icon/hdmi_in.png"],
+        ]);
+
+        if (icon_map.has(item_type)) {
+          return icon_map.get(item_type);
+        } else {
+          return "img:pad/source_icon/media.png";
+        }
       },
       onSignalSourceDrop(evt: any) {
-        if (
+        emit_drop_events(evt, "signal_source");
-          evt.data &&
+      },
-          evt.event &&
+      onPollingDrop(evt: any) {
-          evt.event.changedTouches &&
+        emit_drop_events(evt, "polling");
-          evt.event.changedTouches.length
+      },
-        ) {
+      onModeDrop(evt: any) {
-          const touchX = evt.event.changedTouches[0].pageX;
+        emit_drop_events(evt, "mode");
-          const touchY = evt.event.changedTouches[0].pageY;
+      },
-          EventBus.getInstance().emit(EventNamesDefine.DropToWall, {
+      onPlanDrop(evt: any) {
-            data: evt.data,
+        emit_drop_events(evt, "plan");
-            type: "signal_source",
-            pos: {
-              x: touchX,
-              y: touchY,
-            },
-          });
-        }
       },
       volumeUp(evt: MouseEvent) {
         evt.stopPropagation();

src/pad/ContentWall.vue

@@ -23,7 +23,8 @@
           :y="
             $refs.wall?.parentElement?.offsetTop +
             $refs.wall_content?.offsetTop +
-            item.y * wall_content_client_height
+            item.y * wall_content_client_height +
+            $store.state.wall_row / ($store.state.landspace ? 2 : 1)
           "
           :zIndex="
             1 +
@@ -145,7 +146,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, Ref, ref, onMounted, computed } from "vue";
+import { defineComponent, Ref, ref, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { useStore } from "src/store";
@@ -212,6 +213,25 @@ export default defineComponent({
     const cell_width = ref(0);
     const cell_height = ref(0);
 
+    const refresh_window_pos = () => {
+      setTimeout(() => {
+        wall_content_client_width.value = wall_content_client_width.value + 1;
+        wall_content_client_width.value = wall_content_client_width.value - 1;
+      }, 400);
+    };
+
+    // 全屏/非全屏转换时刷新窗口坐标
+    watch(
+      () => $q.fullscreen.isActive,
+      () => refresh_window_pos()
+    );
+
+    // 全屏旋转时刷新窗口坐标
+    watch(
+      () => $store.state.landspace,
+      () => $q.fullscreen.isActive && refresh_window_pos()
+    );
+
     const plan_running = computed(
       () => $store.state.current_running_plan.trim() != ""
     );
@@ -580,165 +600,213 @@ export default defineComponent({
         y: number;
       };
     }
+
+    const onDropSignalSourceOrPolliong = (evt: _IDropToWall) => {
+      if (evt && evt.data) {
+        // const x =
+        //   evt.pos.x -
+        //   (wall.value.parentElement?.offsetLeft ?? 0) -
+        //   wall_content.value.offsetLeft;
+        // const y =
+        //   evt.pos.y -
+        //   (wall.value.parentElement?.offsetTop ?? 0) -
+        //   wall_content.value.offsetTop;
+
+        let dom = document.elementFromPoint(
+          evt.pos.x,
+          evt.pos.y
+        ) as HTMLElement;
+
+        const signal_sources = GlobalData.getInstance().signal_source.filter(
+          (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.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;
+
+            switch (evt.type) {
+              case "polling":
+                GlobalData.getInstance()
+                  .getCurrentClient()
+                  ?.openPolling(
+                    new Protocol.OpenPollingRequestEntity(
+                      evt.data.uuid,
+                      x,
+                      y,
+                      width,
+                      height
+                    )
+                  );
+                break;
+              case "signal_source" /**OpenPollingRequestEntity */:
+                if (signal_sources.length) {
+                  const signal_source = signal_sources[0];
+                  if (signal_source) {
+                    GlobalData.getInstance()
+                      .getCurrentClient()
+                      ?.openWindow(
+                        new Protocol.OpenWindowRequestEntity(
+                          signal_source.uuid,
+                          x,
+                          y,
+                          width,
+                          height
+                        )
+                      );
+                  }
+                }
+                break;
+            }
+          } else if (dom.classList.contains("window_flag")) {
+            // 拖拽信号源替换窗口 后面还有一处替换窗口
+            const rep_uuid = dom.getAttribute("uuid");
+            if (rep_uuid) {
+              let window = $store.state.windows.find(
+                (item) => item.uuid == rep_uuid
+              );
+              if (window) {
+                let client = GlobalData.getInstance().getCurrentClient();
+                if (client) {
+                  let x = window.x;
+                  let y = window.y;
+                  let width = window.width;
+                  let height = window.height;
+
+                  client.closeWindow(window.window_id);
+                  const open_window_request =
+                    new Protocol.OpenPollingRequestEntity(
+                      evt.data.uuid,
+                      x,
+                      y,
+                      width,
+                      height
+                    );
+                  open_window_request.muted = window.muted;
+                  open_window_request.volume = window.volume;
+                  open_window_request.paused = window.paused;
+                  open_window_request.play_speed = window.play_speed;
+
+                  setTimeout(() => {
+                    if (!window) {
+                      return;
+                    }
+                    switch (evt.type) {
+                      case "polling":
+                        {
+                          const open_polling_request =
+                            new Protocol.OpenPollingRequestEntity(
+                              evt.data.uuid,
+                              x,
+                              y,
+                              width,
+                              height
+                            );
+                          open_polling_request.muted = window.muted;
+                          open_polling_request.volume = window.volume;
+                          open_polling_request.paused = window.paused;
+                          open_polling_request.play_speed = window.play_speed;
+                          GlobalData.getInstance()
+                            .getCurrentClient()
+                            ?.openPolling(open_polling_request);
+                        }
+
+                        break;
+                      case "signal_source":
+                        {
+                          if (signal_sources.length) {
+                            const signal_source = signal_sources[0];
+                            if (signal_source) {
+                              const open_window_request =
+                                new Protocol.OpenWindowRequestEntity(
+                                  signal_source.uuid,
+                                  x,
+                                  y,
+                                  width,
+                                  height
+                                );
+                              open_window_request.muted = window.muted;
+                              open_window_request.volume = window.volume;
+                              open_window_request.paused = window.paused;
+                              open_window_request.play_speed =
+                                window.play_speed;
+                              client?.openWindow(open_window_request);
+                            }
+                          }
+                        }
+
+                        break;
+                    }
+                  }, 50);
+                }
+              }
+            }
+          }
+        }
+      }
+    };
+
     EventBus.getInstance().on(
       EventNamesDefine.DropToWall,
       (evt: _IDropToWall) => {
         if (evt && evt.data) {
-          // const x =
+          switch (evt.type) {
-          //   evt.pos.x -
+            case "signal_source":
-          //   (wall.value.parentElement?.offsetLeft ?? 0) -
+            case "polling":
-          //   wall_content.value.offsetLeft;
+              onDropSignalSourceOrPolliong(evt);
-          // const y =
+              break;
-          //   evt.pos.y -
+            case "mode":
-          //   (wall.value.parentElement?.offsetTop ?? 0) -
+              try {
-          //   wall_content.value.offsetTop;
+                if ($store.state.current_running_plan.trim() == "") {
-
-          let dom = document.elementFromPoint(
-            evt.pos.x,
-            evt.pos.y
-          ) as HTMLElement;
-
-          const signal_sources = GlobalData.getInstance().signal_source.filter(
-            (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.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;
-
-              switch (evt.type) {
-                case "polling":
                   GlobalData.getInstance()
                     .getCurrentClient()
-                    ?.openPolling(
+                    ?.callMode(evt.data.uuid);
-                      new Protocol.OpenPollingRequestEntity(
+                  $q.notify({
-                        evt.data.uuid,
+                    color: "positive",
-                        x,
+                    icon: "done",
-                        y,
+                    message:
-                        width,
+                      $t.t("call mode directives send") + $t.t("success") + "!",
-                        height
+                    position: "top",
-                      )
+                    timeout: 1500,
-                    );
+                  });
-                  break;
+                } else {
-                case "signal_source" /**OpenPollingRequestEntity */:
+                  $q.notify({
-                  if (signal_sources.length) {
+                    type: "warning",
-                    const signal_source = signal_sources[0];
+                    message: $t.t("plan running! can't call mode!"),
-                    if (signal_source) {
+                    position: "top",
-                      GlobalData.getInstance()
+                    timeout: 1500,
-                        .getCurrentClient()
+                  });
-                        ?.openWindow(
-                          new Protocol.OpenWindowRequestEntity(
-                            signal_source.uuid,
-                            x,
-                            y,
-                            width,
-                            height
-                          )
-                        );
-                    }
-                  }
-                  break;
-              }
-            } else if (dom.classList.contains("window_flag")) {
-              // 拖拽信号源替换窗口 后面还有一处替换窗口
-              const rep_uuid = dom.getAttribute("uuid");
-              if (rep_uuid) {
-                let window = $store.state.windows.find(
-                  (item) => item.uuid == rep_uuid
-                );
-                if (window) {
-                  let client = GlobalData.getInstance().getCurrentClient();
-                  if (client) {
-                    let x = window.x;
-                    let y = window.y;
-                    let width = window.width;
-                    let height = window.height;
-
-                    client.closeWindow(window.window_id);
-                    const open_window_request =
-                      new Protocol.OpenPollingRequestEntity(
-                        evt.data.uuid,
-                        x,
-                        y,
-                        width,
-                        height
-                      );
-                    open_window_request.muted = window.muted;
-                    open_window_request.volume = window.volume;
-                    open_window_request.paused = window.paused;
-                    open_window_request.play_speed = window.play_speed;
-
-                    setTimeout(() => {
-                      if (!window) {
-                        return;
-                      }
-                      switch (evt.type) {
-                        case "polling":
-                          {
-                            const open_polling_request =
-                              new Protocol.OpenPollingRequestEntity(
-                                evt.data.uuid,
-                                x,
-                                y,
-                                width,
-                                height
-                              );
-                            open_polling_request.muted = window.muted;
-                            open_polling_request.volume = window.volume;
-                            open_polling_request.paused = window.paused;
-                            open_polling_request.play_speed = window.play_speed;
-                            GlobalData.getInstance()
-                              .getCurrentClient()
-                              ?.openPolling(open_polling_request);
-                          }
-
-                          break;
-                        case "signal_source":
-                          {
-                            if (signal_sources.length) {
-                              const signal_source = signal_sources[0];
-                              if (signal_source) {
-                                const open_window_request =
-                                  new Protocol.OpenWindowRequestEntity(
-                                    signal_source.uuid,
-                                    x,
-                                    y,
-                                    width,
-                                    height
-                                  );
-                                open_window_request.muted = window.muted;
-                                open_window_request.volume = window.volume;
-                                open_window_request.paused = window.paused;
-                                open_window_request.play_speed =
-                                  window.play_speed;
-                                client?.openWindow(open_window_request);
-                              }
-                            }
-                          }
-
-                          break;
-                      }
-                    }, 50);
-                  }
                 }
-              }
+              } catch {}
-            }
+              break;
+            case "plan":
+              try {
+                GlobalData.getInstance()
+                  .getCurrentClient()
+                  ?.runPlan(evt.data.uuid);
+                $q.notify({
+                  color: "positive",
+                  icon: "done",
+                  message:
+                    $t.t("run plan directives send") + $t.t("success") + "!",
+                  position: "top",
+                  timeout: 1500,
+                });
+              } catch {}
+              break;
           }
         }
       }

src/pad/TopToolbar.vue

@@ -1,104 +1,134 @@
 <template>
-  <q-toolbar class="shadow-2 text-accent bg-secondary">
+  <q-toolbar
-    <q-space />
+    class="shadow-2 text-accent bg-secondary q-pa-none"
-    <q-space />
+    style="flex-wrap: wrap"
+  >
     <q-btn
+      class="col-auto"
+      :class="$store.state.landspace ? 'q-mx-sm' : ''"
       stretch
       stack
       flat
       icon="img:pad/toolbar/close_icon.png"
       :label="$t('close')"
     />
-    <q-separator dark vertical inset />
+
     <q-btn
+      class="col-auto"
+      :class="$store.state.landspace ? 'q-mx-sm' : ''"
       stretch
       stack
       flat
       icon="img:pad/toolbar/clean_windows_icon.png"
       :label="$t('clean screen')"
     />
-    <q-separator dark vertical inset />
-    <!-- 全屏暂时没有适配 -->
     <q-btn
-      v-if="false && !$q.fullscreen.isActive"
+      class="col-auto"
+      :class="$store.state.landspace ? 'q-mx-sm' : ''"
       stretch
       stack
       flat
-      icon="img:pad/toolbar/full_screen_icon.png"
+      :icon="
-      :label="$t('full screen')"
+        'img:pad/toolbar/' +
-      @click="fullScreen"
+        ($q.fullscreen.isActive
+          ? 'exit_full_screen_icon.png'
+          : 'full_screen_icon.png')
+      "
+      :label="
+        $q.fullscreen.isActive ? $t('exit full screen') : $t('full screen')
+      "
+      @click="toogleFullScreen"
     />
-    <q-separator dark vertical inset />
     <q-btn
+      class="col-auto"
+      :class="$store.state.landspace ? 'q-mx-sm' : ''"
       stretch
       stack
       flat
       icon="img:pad/toolbar/top_window_icon.png"
       :label="$t('top window')"
     />
-    <q-separator dark vertical inset />
     <q-btn
+      class="col-auto"
+      :class="$store.state.landspace ? 'q-mx-sm' : ''"
       stretch
       stack
       flat
       icon="img:pad/toolbar/lower_window_icon.png"
       :label="$t('lower window')"
     />
-    <q-separator dark vertical inset />
     <q-btn
+      class="col-auto"
+      :class="$store.state.landspace ? 'q-mx-sm' : ''"
       stretch
       stack
       flat
       icon="img:pad/toolbar/center_control_icon.png"
       :label="$t('center control')"
     />
-    <q-separator dark vertical inset />
     <q-btn
+      class="col-auto"
+      :class="$store.state.landspace ? 'q-mx-sm' : ''"
       stretch
       stack
       flat
       icon="img:pad/toolbar/power_on_icon.png"
       :label="$t('power on')"
     />
-    <q-separator dark vertical inset />
     <q-btn
+      class="col-auto"
+      :class="$store.state.landspace ? 'q-mx-sm' : ''"
       stretch
       stack
       flat
       icon="img:pad/toolbar/power_off_icon.png"
       :label="$t('power off')"
     />
-    <q-separator dark vertical inset />
     <q-btn
+      stretch
+      flat
+      stack
+      icon="img:pad/toolbar/stop_plan.png"
+      :label="$t('stop plan')"
+      class="col-auto"
+      :class="$store.state.landspace ? 'q-mx-sm' : ''"
+      v-if="plan_running"
+      @click="stopPlan"
+    />
+
+    <q-btn
+      class="col-auto"
+      :class="$store.state.landspace ? 'q-mx-sm' : ''"
       stretch
       stack
       flat
       icon="img:pad/toolbar/file_upload_icon.png"
       :label="$t('file manage')"
     />
-    <q-separator dark vertical inset />
     <q-btn
+      class="col-auto"
+      :class="$store.state.landspace ? 'q-mx-sm' : ''"
       stretch
       stack
       flat
       icon="img:pad/toolbar/wallpaper_icon.png"
       :label="$t('background image')"
     />
-    <q-separator dark vertical inset />
     <q-space />
     <q-btn
+      class="col-auto"
+      :class="$store.state.landspace ? 'q-mx-sm' : ''"
       stretch
       stack
       flat
       icon="img:pad/toolbar/logout_icon.png"
       :label="$t('logout')"
     />
-    <q-space />
   </q-toolbar>
 </template>
 
 <script lang="ts">
-import { defineComponent, Ref, ref } from "vue";
+import { defineComponent, Ref, ref, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { useStore } from "src/store";
@@ -113,10 +143,19 @@ export default defineComponent({
     const $q = useQuasar();
     const $t = useI18n();
 
+    const plan_running = computed(
+      () => $store.state.current_running_plan.trim() != ""
+    );
+
     return {
-      fullScreen() {
+      plan_running,
-        AppFullscreen.request();
+
-        console.log("fffffffff");
+      toogleFullScreen() {
+        if ($q.fullscreen.isActive) {
+          $q.fullscreen.exit();
+        } else {
+          AppFullscreen.request();
+        }
       },
     };
   },

src/third_lib/vuedraggable/vuedraggable.js

@@ -92,10 +92,11 @@ const initialize_sortablejs = () => {
       },
       dropGlobal: function dropGlobal(evt) {
         try {
-          if (evt.dragEl) {
+          if (this && evt.dragEl) {
             this._emitVueEvent("drop", {
               data: evt.dragEl.__draggable_context.element,
               event: evt.originalEvent,
+              options: this.options,
             });
           }
           setTimeout(() => {