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

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 &&
-          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, {
-            data: evt.data,
-            type: "signal_source",
-            pos: {
-              x: touchX,
-              y: touchY,
       },
-          });
+      onPollingDrop(evt: any) {
-        }
+        emit_drop_events(evt, "polling");
+      },
+      onModeDrop(evt: any) {
+        emit_drop_events(evt, "mode");
+      },
+      onPlanDrop(evt: any) {
+        emit_drop_events(evt, "plan");
       },
       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,9 +600,8 @@ export default defineComponent({
         y: number;
       };
     }
-    EventBus.getInstance().on(
+
-      EventNamesDefine.DropToWall,
+    const onDropSignalSourceOrPolliong = (evt: _IDropToWall) => {
-      (evt: _IDropToWall) => {
       if (evt && evt.data) {
         // const x =
         //   evt.pos.x -
@@ -604,10 +623,7 @@ export default defineComponent({
 
         // 有可能是窗口的子节点收到了拖拽信息，需要找到真正的窗口节点来判断
         if (dom) {
-            const temp = find_parent_dom(dom, [
+          const temp = find_parent_dom(dom, ["wall_item_flag", "window_flag"]);
-              "wall_item_flag",
-              "window_flag",
-            ]);
           if (temp) {
             dom = temp;
           }
@@ -741,6 +757,58 @@ export default defineComponent({
           }
         }
       }
+    };
+
+    EventBus.getInstance().on(
+      EventNamesDefine.DropToWall,
+      (evt: _IDropToWall) => {
+        if (evt && evt.data) {
+          switch (evt.type) {
+            case "signal_source":
+            case "polling":
+              onDropSignalSourceOrPolliong(evt);
+              break;
+            case "mode":
+              try {
+                if ($store.state.current_running_plan.trim() == "") {
+                  GlobalData.getInstance()
+                    .getCurrentClient()
+                    ?.callMode(evt.data.uuid);
+                  $q.notify({
+                    color: "positive",
+                    icon: "done",
+                    message:
+                      $t.t("call mode directives send") + $t.t("success") + "!",
+                    position: "top",
+                    timeout: 1500,
+                  });
+                } else {
+                  $q.notify({
+                    type: "warning",
+                    message: $t.t("plan running! can't call mode!"),
+                    position: "top",
+                    timeout: 1500,
+                  });
+                }
+              } 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,
+
+      toogleFullScreen() {
+        if ($q.fullscreen.isActive) {
+          $q.fullscreen.exit();
+        } else {
           AppFullscreen.request();
-        console.log("fffffffff");
+        }
       },
     };
   },

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(() => {