信号源、模式、预案增加拖动事件(仅支持PC端的chrome内核,firefox等其它内核可能不支持

package.json

@@ -1,6 +1,6 @@
 {
   "name": "media_player_client",
-  "version": "1.4.18",
+  "version": "1.4.19",
   "description": "A Quasar Framework app",
   "productName": "MediaPlayerClient",
   "author": "fangxiang <fangxiang@cloudview.work>",

src/components/ModeTree.vue

@@ -10,6 +10,10 @@
             class="full-width"
             clickable
             :disable="!$store.state.power_state"
+            :draggable="prop.node.uuid != '' && $store.state.power_state"
+            @dragstart="(evt) => onDragStart(evt, prop.node)"
+            @dragover="(evt) => onDragOver(evt, prop.node)"
+            @drop="(evt) => onDrop(evt, prop.node)"
             @dblclick="
               (evt) => {
                 if (!$store.state.power_state) {
@@ -36,6 +40,7 @@
           >
             <q-item-section avatar>
               <q-icon
+                style="pointer-events: none"
                 :name="
                   prop.node.is_group
                     ? 'img:source_icon/group.png'
@@ -163,7 +168,7 @@ import ModeGroupDialog from "src/components/ModeGroupDialog.vue";
 import ModeDialog from "src/components/ModeDialog.vue";
 import { Common } from "src/common/Common";
 import GlobalData from "src/common/GlobalData";
-import { useQuasar } from "quasar";
+import { useQuasar, extend } from "quasar";
 import { useI18n } from "vue-i18n";
 import { ModeEntity, ModeTreeItemEntity } from "src/entities/ModeEntity";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
@@ -298,6 +303,80 @@ export default defineComponent({
           });
         }
       },
+      onDragStart(e: DragEvent, node: ModeTreeItemEntity) {
+        e.dataTransfer?.setData("uuid", node.uuid);
+        e.dataTransfer?.setData("type", "mode");
+        e.dataTransfer?.setData("group", node.is_group ? "true" : "false");
+        e.dataTransfer?.setData("node_object", JSON.stringify(node));
+        if (e.dataTransfer) {
+          e.dataTransfer.dropEffect = "move";
+        }
+      },
+      onDragOver(e: DragEvent, node: ModeTreeItemEntity) {
+        if (node && node.is_group) {
+          e.preventDefault();
+        }
+      },
+      onDrop(e: DragEvent, node: ModeTreeItemEntity) {
+        if (node && node.is_group && node.item_data) {
+          if (e.dataTransfer) {
+            const type = e.dataTransfer.getData("type");
+            if (type == "mode") {
+              const uuid = e.dataTransfer.getData("uuid");
+              const group = e.dataTransfer.getData("group");
+              if (
+                typeof uuid == "string" &&
+                type &&
+                type.length > 0 &&
+                group &&
+                group.length > 0
+              ) {
+                if (group == "true") {
+                  const mode_group = GlobalData.getInstance().mode_groups.find(
+                    (item) => item && (item as any).uuid == uuid
+                  );
+                  if (mode_group) {
+                    if (mode_group.parent_uuid == node.item_data.uuid) {
+                      return;
+                    }
+
+                    GlobalData.getInstance()
+                      .getCurrentClient()
+                      ?.editModeGroup(
+                        mode_group.uuid,
+                        mode_group.name,
+                        node.item_data.uuid
+                      );
+                  } else {
+                    console.log("can't find mode group, uuid:" + uuid);
+                  }
+                } else if (group == "false") {
+                  const mode = GlobalData.getInstance().modes.find(
+                    (item) => item && (item as any).uuid == uuid
+                  );
+                  if (mode) {
+                    if (mode.group_uuid == node.item_data.uuid) {
+                      return;
+                    }
+                    GlobalData.getInstance()
+                      .getCurrentClient()
+                      ?.editMode(
+                        mode.uuid,
+                        mode.name,
+                        mode.number,
+                        node.item_data.uuid
+                      );
+                  } else {
+                    console.log("can't find mode, uuid:" + uuid);
+                  }
+                }
+              }
+            } else {
+              console.log("type error");
+            }
+          }
+        }
+      },
     };
   },
 });

src/components/PlanTree.vue

@@ -10,12 +10,17 @@
             class="full-width"
             clickable
             :disable="!$store.state.power_state"
+            :draggable="prop.node.uuid != '' && $store.state.power_state"
+            @dragstart="(evt) => onDragStart(evt, prop.node)"
+            @dragover="(evt) => onDragOver(evt, prop.node)"
+            @drop="(evt) => onDrop(evt, prop.node)"
             @dblclick="
               (evt) => !prop.node.is_group && runPlan(prop.node.item_data)
             "
           >
             <q-item-section avatar>
               <q-icon
+                style="pointer-events: none"
                 :name="
                   prop.node.is_group
                     ? 'img:source_icon/group.png'
@@ -98,7 +103,8 @@
                   v-close-popup
                   v-if="
                     prop.node.item_data &&
-                    power_on_plan == prop.node.item_data.uuid
+                    power_on_plan == prop.node.item_data.uuid &&
+                    !prop.node.is_group
                   "
                   @click="
                     (evt) => unsetPowerOnPlan(evt, prop.node.item_data.uuid)
@@ -163,11 +169,11 @@ import PlanGroupDialog from "src/components/PlanGroupDialog.vue";
 import PlanDialog from "src/components/PlanDialog.vue";
 import { Common } from "src/common/Common";
 import GlobalData from "src/common/GlobalData";
-import { useQuasar } from "quasar";
+import { useQuasar, extend } from "quasar";
 import { useI18n } from "vue-i18n";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 import { Protocol } from "src/entities/WSProtocol";
-import { PlanEntity } from "src/entities/PlanEntity";
+import { PlanEntity, PlanTreeItemEntity } from "src/entities/PlanEntity";
 import { NotifyMessage } from "src/common/ClientConnection";
 
 export default defineComponent({
@@ -219,7 +225,7 @@ export default defineComponent({
         console.log(a);
       },
       async deleteItem(
-        evt: PointerEvent | null,
+        evt: MouseEvent | null,
         is_group: boolean,
         uuid: string
       ) {
@@ -262,14 +268,84 @@ export default defineComponent({
           timeout: 1500,
         });
       },
-      unsetPowerOnPlan(evt: PointerEvent, uuid: string) {
+      unsetPowerOnPlan(evt: MouseEvent, uuid: string) {
         evt.stopPropagation();
         GlobalData.getInstance().getCurrentClient()?.setPowerOnPlan("");
       },
-      setPowerOnPlan(evt: PointerEvent, uuid: string) {
+      setPowerOnPlan(evt: MouseEvent, uuid: string) {
         evt.stopPropagation();
         GlobalData.getInstance().getCurrentClient()?.setPowerOnPlan(uuid);
       },
+      onDragStart(e: DragEvent, node: PlanTreeItemEntity) {
+        e.dataTransfer?.setData("uuid", node.uuid);
+        e.dataTransfer?.setData("type", "plan");
+        e.dataTransfer?.setData("group", node.is_group ? "true" : "false");
+        e.dataTransfer?.setData("node_object", JSON.stringify(node));
+        if (e.dataTransfer) {
+          e.dataTransfer.dropEffect = "move";
+        }
+      },
+      onDragOver(e: DragEvent, node: PlanTreeItemEntity) {
+        if (node && node.is_group) {
+          e.preventDefault();
+        }
+      },
+      onDrop(e: DragEvent, node: PlanTreeItemEntity) {
+        if (node && node.is_group && node.item_data) {
+          if (e.dataTransfer) {
+            const type = e.dataTransfer.getData("type");
+            if (type == "plan") {
+              const uuid = e.dataTransfer.getData("uuid");
+              const group = e.dataTransfer.getData("group");
+              if (
+                typeof uuid == "string" &&
+                type &&
+                type.length > 0 &&
+                group &&
+                group.length > 0
+              ) {
+                if (group == "true") {
+                  const plan_group = GlobalData.getInstance().plan_groups.find(
+                    (item) => item && (item as any).uuid == uuid
+                  );
+                  if (plan_group) {
+                    if (plan_group.parent_uuid == node.item_data.uuid) {
+                      return;
+                    }
+                    GlobalData.getInstance()
+                      .getCurrentClient()
+                      ?.editPlanGroup(
+                        plan_group.uuid,
+                        plan_group.name,
+                        node.item_data.uuid
+                      );
+                  } else {
+                    console.log("can't find plan group, uuid:" + uuid);
+                  }
+                } else if (group == "false") {
+                  const plan = GlobalData.getInstance().plans.find(
+                    (item) => item && (item as any).uuid == uuid
+                  );
+                  if (plan) {
+                    if (plan.group_uuid == node.item_data.uuid) {
+                      return;
+                    }
+                    const entity = extend(false, plan) as PlanEntity;
+                    entity.group_uuid = node.item_data.uuid;
+                    GlobalData.getInstance()
+                      .getCurrentClient()
+                      ?.editPlan(entity);
+                  } else {
+                    console.log("can't find plan, uuid:" + uuid);
+                  }
+                }
+              }
+            } else {
+              console.log("type error");
+            }
+          }
+        }
+      },
     };
   },
 });

src/components/PollingTree.vue

@@ -19,6 +19,7 @@
           >
             <q-item-section avatar>
               <q-icon
+                style="pointer-events: none"
                 :name="
                   prop.node.is_group
                     ? 'img:source_icon/group.png'

src/components/SignalSourceTree.vue

@@ -6,8 +6,10 @@
           class="full-width"
           clickable
           :disable="!$store.state.power_state"
-          :draggable="!prop.node.is_group && $store.state.power_state"
+          :draggable="prop.node.uuid != '' && $store.state.power_state"
           @dragstart="(evt) => onDragStart(evt, prop.node)"
+          @dragover="(evt) => onDragOver(evt, prop.node)"
+          @drop="(evt) => onDrop(evt, prop.node)"
           @click="
             $store.commit(
               'setSelectedSignalSource',
@@ -23,8 +25,10 @@
                 : 'none',
           }"
         >
+          <!-- {{ prop.node }} -->
           <q-item-section avatar>
             <q-icon
+              style="pointer-events: none"
               :name="
                 prop.node.is_group
                   ? 'img:source_icon/group.png'
@@ -168,14 +172,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, onMounted, ref, nextTick } from "vue";
+import { defineComponent, computed, onMounted, ref } from "vue";
 import { useStore } from "src/store";
-import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
+import {
+  SignalSourceEntity,
+  SignalSourceTreeItemEntity,
+} from "src/entities/SignalSourceEntity";
 import SignalSourceGroupDialog from "src/components/SignalSourceGroupDialog.vue";
 import SignalSourceDialog from "src/components/SignalSourceDialog.vue";
 import { Common } from "src/common/Common";
 import GlobalData from "src/common/GlobalData";
-import { useQuasar } from "quasar";
+import { useQuasar, extend } from "quasar";
 import { useI18n } from "vue-i18n";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 import { Protocol } from "src/entities/WSProtocol";
@@ -229,11 +236,85 @@ export default defineComponent({
       onDragStart(e: DragEvent, node: SignalSourceTreeItemEntity) {
         e.dataTransfer?.setData("uuid", node.uuid);
         e.dataTransfer?.setData("type", "signal_source");
+        e.dataTransfer?.setData("group", node.is_group ? "true" : "false");
         e.dataTransfer?.setData("node_object", JSON.stringify(node));
         if (e.dataTransfer) {
           e.dataTransfer.dropEffect = "move";
         }
       },
+      onDragOver(e: DragEvent, node: SignalSourceTreeItemEntity) {
+        if (node && node.is_group && !node.item_data?.system_default) {
+          e.preventDefault();
+        }
+      },
+      onDrop(e: DragEvent, node: SignalSourceTreeItemEntity) {
+        if (
+          node &&
+          node.is_group &&
+          node.item_data &&
+          !node.item_data.system_default
+        ) {
+          if (e.dataTransfer) {
+            const type = e.dataTransfer.getData("type");
+            if (type == "signal_source") {
+              const uuid = e.dataTransfer.getData("uuid");
+              const group = e.dataTransfer.getData("group");
+              if (
+                typeof uuid == "string" &&
+                type &&
+                type.length > 0 &&
+                group &&
+                group.length > 0
+              ) {
+                if (group == "true") {
+                  const signal_source_group =
+                    GlobalData.getInstance().signal_source_groups.find(
+                      (item) => item && (item as any).uuid == uuid
+                    );
+                  if (signal_source_group) {
+                    if (
+                      signal_source_group.parent_uuid == node.item_data.uuid
+                    ) {
+                      return;
+                    }
+                    GlobalData.getInstance()
+                      .getCurrentClient()
+                      ?.editSignalSourceGroup(
+                        signal_source_group.uuid,
+                        signal_source_group.name,
+                        node.item_data.uuid
+                      );
+                  } else {
+                    console.log("can't find signal source group, uuid:" + uuid);
+                  }
+                } else if (group == "false") {
+                  const signal_source =
+                    GlobalData.getInstance().signal_source.find(
+                      (item) => item && (item as any).uuid == uuid
+                    );
+                  if (signal_source) {
+                    if (signal_source.group_uuid == node.item_data.uuid) {
+                      return;
+                    }
+                    const entity = extend(
+                      false,
+                      signal_source
+                    ) as SignalSourceEntity;
+                    entity.group_uuid = node.item_data.uuid;
+                    GlobalData.getInstance()
+                      .getCurrentClient()
+                      ?.editSignalSource(entity);
+                  } else {
+                    console.log("can't find signal source, uuid:" + uuid);
+                  }
+                }
+              }
+            } else {
+              console.log("type error");
+            }
+          }
+        }
+      },
       getItemIcon(item_type: string) {
         return Common.getSignalSourceIcon(item_type);
       },

src/i18n/en-US/index.ts

@@ -295,4 +295,9 @@ export default {
   "open window": "Open Window",
   "close all windows": "Close All Windows",
   "select data(DBP) file": "Select Data(DBP) File",
+  "please check server state, or check server ip address!":
+    "Please Check Server State, Or Check Server Ip Address!",
+  "connect time out!": "Connect Time Out!",
+  "login fail!": "Login Fail!",
+  "unset power on start": "UnSet Power On Start",
 };

src/layouts/MainLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-layout view="hHh lpR fFf" @mousemove="onMouseMove">
+  <q-layout view="hHh lpR fFf">
     <div v-show="$store.state.initialized">
       <!-- header -->
       <q-header
@@ -22,16 +22,9 @@
         <div class="row">
           <!-- left -->
           <div
-            v-if="landspace && show_left_tool_bar"
+            v-if="landspace"
             class="col-auto overflow-auto"
             style="border: 1px solid #bdbdbd; max-width: 45vw"
-            v-touch-pan.left.prevent.mouse="
-              (evt) => {
-                if (evt.offset.x < -100 && evt.duration < 1000) {
-                  show_left_tool_bar = false;
-                }
-              }
-            "
             @click="(evt) => evt.stopPropagation()"
           >
             <left-tool-bar />
@@ -47,15 +40,8 @@
             v-if="landspace"
             class="col-auto overflow-auto"
             style="border: 1px solid #bdbdbd; max-width: 45vw"
-            v-touch-pan.right.prevent.mouse="
-              (evt) => {
-                if (evt.offset.x > 100 && evt.duration < 1000) {
-                  show_right_tool_bar = false;
-                }
-              }
-            "
           >
-            <right-tool-bar v-if="show_right_tool_bar" />
+            <right-tool-bar />
           </div>
         </div>
       </q-page-container>
@@ -109,36 +95,6 @@
       </q-page-container>
     </div>
   </q-layout>
-  <div class="float-buttons">
-    <div
-      v-if="!show_left_tool_bar && mouse_page_left_flag"
-      class="absolute"
-      style="top: 45%"
-    >
-      <q-btn
-        icon="keyboard_arrow_right"
-        flat
-        round
-        @click="show_left_tool_bar = true"
-      >
-        <q-tooltip>{{ $t("open left tool bar") }}</q-tooltip>
-      </q-btn>
-    </div>
-    <div
-      v-if="!show_right_tool_bar && mouse_page_right_flag"
-      class="absolute-right"
-      style="top: 45%"
-    >
-      <q-btn
-        icon="keyboard_arrow_left"
-        flat
-        round
-        @click="show_right_tool_bar = true"
-      >
-        <q-tooltip>{{ $t("open right tool bar") }}</q-tooltip>
-      </q-btn>
-    </div>
-  </div>
 </template>
 
 <script lang="ts">
@@ -170,11 +126,6 @@ export default defineComponent({
 
     const landspace = $store.state.landspace;
 
-    let show_left_tool_bar = ref(true);
-    let mouse_page_left_flag = ref(false);
-    let show_right_tool_bar = ref(true);
-    let mouse_page_right_flag = ref(false);
-
     const show_back = ref(true);
 
     EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
@@ -195,26 +146,9 @@ export default defineComponent({
     return {
       landspace,
       show_back,
-      show_left_tool_bar,
-      show_right_tool_bar,
-      mouse_page_left_flag,
-      mouse_page_right_flag,
       loga(a: any) {
         console.log(a);
       },
-      onMouseMove(evt: MouseEvent) {
-        const detect_area = window.innerWidth * 0.2;
-        if (evt.x < detect_area) {
-          mouse_page_right_flag.value = false;
-          mouse_page_left_flag.value = true;
-        } else if (evt.x + detect_area > window.innerWidth) {
-          mouse_page_left_flag.value = false;
-          mouse_page_right_flag.value = true;
-        } else {
-          mouse_page_left_flag.value = false;
-          mouse_page_right_flag.value = false;
-        }
-      },
     };
   },
 });

src/store/index.ts

@@ -257,7 +257,12 @@ class _TreeHelper {
       const groups = playload.response[group_name] ?? [];
       const items = playload.response[items_name] ?? [];
 
-      const root = createTreeItem("", "", $t.t(root_text ?? "root"), true);
+      const root = createTreeItem("", "", $t.t(root_text ?? "root"), true, {
+        uuid: "",
+        name: "",
+        parent_uuid: "",
+        group_uuid: "",
+      });
 
       tree.splice(0, tree.length);
       tree.push(root);
@@ -679,7 +684,8 @@ export default store(function (/* { ssrContext } */) {
             "",
             "",
             $t.t("signal source"),
-            true
+            true,
+            new SignalSourceEntity()
           );
 
           state.signal_source_tree.splice(0, state.signal_source_tree.length);