添加添加修改删除信号源的功能

src/common/ClientConnection.ts

@@ -1,4 +1,5 @@
 import NormalWindowRequestEntity from "src/entities/NormalWindowRequestEntity";
+import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
 import { Protocol } from "src/entities/WSProtocol";
 import EventBus, { EventNamesDefine } from "./EventBus";
 
@@ -322,10 +323,30 @@ export default class ClientConnection {
     }
   }
 
+  public async addSignalSource(item: SignalSourceEntity) {
+    try {
+      return await this.doRpc<Protocol.AddSignalSourcesResponseEntity>(
+        new Protocol.AddSignalSourcesRequestEntity(0, item)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public async editSignalSource(item: SignalSourceEntity) {
+    try {
+      return await this.doRpc<Protocol.EditSignalSourcesResponseEntity>(
+        new Protocol.EditSignalSourcesRequestEntity(0, item)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   public async deleteSignalSource(uuid: string) {
     try {
-      return await this.doRpc<Protocol.DeleteSignalSourcesGroupResponseEntity>(
+      return await this.doRpc<Protocol.DeleteSignalSourcesResponseEntity>(
-        new Protocol.DeleteSignalSourcesGroupRequestEntity(0, uuid)
+        new Protocol.DeleteSignalSourcesRequestEntity(0, uuid)
       );
     } catch (e) {
       console.error(e);

src/components/GroupDialog.vue

@@ -1,6 +1,7 @@
 <template>
   <q-dialog v-model="show_dialog" @before-hide="resetData">
-    <q-card class="overflow-hidden" style="overflow-y: scroll; width: 45vw">
+    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 45vw">
+      <q-form @submit="onSubmit">
         <q-card-section class="q-ma-none q-pa-sm">
           <div class="row">
             <div class="col-11 text-h6">
@@ -128,10 +129,11 @@
             flat
             :label="$t('Accept')"
             :loading="loading"
+            type="submit"
             color="primary"
-          @click="onSubmit"
           />
         </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
@@ -145,19 +147,11 @@
 </style>
 
 <script lang="ts">
-import {
+import { defineComponent, ref, watch, computed } from "vue";
-  defineComponent,
-  ref,
-  watch,
-  reactive,
-  onUnmounted,
-  computed,
-} from "vue";
 import { useStore } from "src/store";
 import GlobalData from "src/common/GlobalData";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
-import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
 
 export default defineComponent({
   name: "ComponentGroupDialog",

src/components/SignalSourceDialog.vue

@@ -1,18 +1,470 @@
 <template>
-  <div>asda</div>
+  <q-dialog v-model="show_dialog" @before-hide="resetData">
+    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 45vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-11 text-h6">
+              {{
+                type == 1
+                  ? $t("add signal source")
+                  : type == 2
+                  ? $t("edit signal source")
+                  : type == 3
+                  ? $t("delete signal source")
+                  : "add"
+              }}
+            </div>
+            <div class="col-1">
+              <q-btn
+                :loading="loading"
+                flat
+                round
+                icon="close"
+                color="red"
+                v-close-popup
+              >
+                <q-tooltip>
+                  {{ $t("close") }}
+                </q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-section style="max-height: 50vh; width: 45vw" class="scroll">
+          <q-list>
+            <q-item v-if="type != 2">
+              <q-item-label>{{ $t("parent group") }}:</q-item-label>
+            </q-item>
+            <q-item v-if="type != 2" class="q-pa-none q-ma-none">
+              <q-item-section style="padding-right: 10px">
+                <q-tree
+                  ref="tree"
+                  class="scroll"
+                  :class="loading ? 'disable_tree' : ''"
+                  v-model:selected="selected"
+                  :nodes="tree_nodes"
+                  default-expand-all
+                  node-key="uuid"
+                  labelKey="name"
+                  filter="group filter"
+                  :filter-method="treeNodesFilter"
+                >
+                  <template v-slot:default-header="prop">
+                    <q-item
+                      class="full-width"
+                      :class="
+                        prop.tree.selected == prop.key ? 'item-selected-bg' : ''
+                      "
+                    >
+                      <q-item-section avatar>
+                        <q-icon
+                          :name="'img:source_icon/group.png'"
+                          color="orange"
+                          size="28px"
+                          class="q-mr-sm"
+                        />
+                      </q-item-section>
+                      <q-item-section>
+                        <div class="text-weight-bold text-primary">
+                          {{ prop.node.name }}
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-tree>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-input
+                  :loading="loading"
+                  :disable="loading"
+                  filled
+                  autofocus
+                  v-model="item_data.name"
+                  :label="$t('signal source name')"
+                  :hint="$t('please input signal source name')"
+                  lazy-rules
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || $t('Please type something'),
+                  ]"
+                  @keydown="
+                    (evt) => {
+                      if (evt.keyCode == 13) {
+                      }
+                    }
+                  "
+                >
+                  <template v-if="item_data.name" v-slot:append>
+                    <q-icon
+                      item_data.name="cancel"
+                      @click.stop="item_data.name = null"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-input>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-select
+                  :loading="loading"
+                  :disable="loading"
+                  filled
+                  option-value="value"
+                  option-label="label"
+                  emit-value
+                  map-options
+                  v-model="item_data.window_type"
+                  :options="signal_source_options"
+                  :label="$t('signal source type')"
+                  :hint="$t('please select signal source type')"
+                  @update:model-value="onSelected"
+                  @keydown="
+                    (evt) => {
+                      if (evt.keyCode == 13) {
+                      }
+                    }
+                  "
+                >
+                </q-select>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-input
+                  :loading="loading"
+                  :disable="loading"
+                  filled
+                  v-model="item_data.media_url"
+                  :label="media_url_label"
+                  :hint="$t('please input') + media_url_label"
+                  lazy-rules
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || $t('Please type something'),
+                  ]"
+                  @keydown="
+                    (evt) => {
+                      if (evt.keyCode == 13) {
+                      }
+                    }
+                  "
+                >
+                  <template v-if="item_data.media_url" v-slot:append>
+                    <q-icon
+                      item_data.media_url="cancel"
+                      @click.stop="item_data.media_url = null"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-input>
+              </q-item-section>
+            </q-item>
+            <q-item
+              v-if="item_data && item_data.window_type == 'EwindowType::Rtsp'"
+            >
+              <q-item-section>
+                <q-input
+                  :loading="loading"
+                  :disable="loading"
+                  filled
+                  v-model="item_data.user_name"
+                  :label="$t('user name')"
+                  :hint="$t('please input user name')"
+                  lazy-rules
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || $t('Please type something'),
+                  ]"
+                  @keydown="
+                    (evt) => {
+                      if (evt.keyCode == 13) {
+                      }
+                    }
+                  "
+                >
+                  <template v-if="item_data.user_name" v-slot:append>
+                    <q-icon
+                      item_data.user_name="cancel"
+                      @click.stop="item_data.user_name = null"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-input>
+              </q-item-section>
+            </q-item>
+            <q-item
+              v-if="item_data && item_data.window_type == 'EwindowType::Rtsp'"
+            >
+              <q-item-section>
+                <q-input
+                  :loading="loading"
+                  :disable="loading"
+                  filled
+                  v-model="item_data.password"
+                  :label="$t('password')"
+                  :hint="$t('please input password')"
+                  lazy-rules
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || $t('Please type something'),
+                  ]"
+                  @keydown="
+                    (evt) => {
+                      if (evt.keyCode == 13) {
+                      }
+                    }
+                  "
+                >
+                  <template v-if="item_data.password" v-slot:append>
+                    <q-icon
+                      item_data.password="cancel"
+                      @click.stop="item_data.password = null"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-input>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            :loading="loading"
+            flat
+            :label="$t('Cancel')"
+            color="primary"
+            v-close-popup
+          />
+          <q-btn
+            ref="accept"
+            flat
+            :label="$t('Accept')"
+            :loading="loading"
+            color="primary"
+            type="submit"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
+<style scoped>
+.disable_tree {
+  background: #9e9e9e;
+  cursor: wait;
+  pointer-events: none;
+}
+</style>
+
 <script lang="ts">
-import { defineComponent, ref, watch, onUnmounted } from "vue";
+import {
+  defineComponent,
+  ref,
+  watch,
+  reactive,
+  onUnmounted,
+  computed,
+} from "vue";
+import { useStore } from "src/store";
+import GlobalData from "src/common/GlobalData";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+import {
+  SignalSourceEntity,
+  SignalSourceTreeItemEntity,
+} from "src/entities/SignalSourceEntity";
 
 export default defineComponent({
   name: "ComponentSignalSourceDialog",
 
-  components: {},
-  props: {},
-  emits: [],
   setup() {
-    return {};
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let type = ref(1);
+    let media_url_label = ref("URL");
+    let item_data: SignalSourceEntity = reactive(new SignalSourceEntity());
+    item_data.window_type = "EwindowType::Multimedia";
+    const selected: any = ref(null);
+    let loading = ref(false);
+
+    let suppored_window_types = new Set<string>([
+      "EwindowType::Multimedia",
+      "EwindowType::Web",
+      "EwindowType::Image",
+      "EwindowType::Rtsp",
+    ]);
+
+    let signal_source_options = [
+      {
+        label: $t.t("multimedia file"),
+        value: "EwindowType::Multimedia",
+      },
+      {
+        label: $t.t("web"),
+        value: "EwindowType::Web",
+      },
+      {
+        label: $t.t("image"),
+        value: "EwindowType::Image",
+      },
+      {
+        label: $t.t("rtsp"),
+        value: "EwindowType::Rtsp",
+      },
+    ];
+
+    const tree_nodes = computed({
+      get: () => $store.state.signal_source_tree,
+      set: (val) => {},
+    });
+
+    watch(
+      () => selected.value,
+      (newValue, oldValue) => {
+        if (newValue == null) {
+          selected.value = "";
+        }
+      }
+    );
+
+    watch(
+      () => item_data.window_type,
+      (newValue, oldValue) => {
+        if (!suppored_window_types.has(newValue)) {
+          item_data.window_type = "EwindowType::Multimedia";
+        }
+      }
+    );
+
+    const setItemData = (new_item_data?: SignalSourceEntity) => {
+      if (!new_item_data) {
+        new_item_data = new SignalSourceEntity();
+      }
+
+      item_data.uuid = new_item_data.uuid;
+      item_data.base_note = new_item_data.base_note;
+      item_data.name = new_item_data.name;
+      item_data.window_type = new_item_data.window_type;
+      item_data.media_url = new_item_data.media_url;
+      item_data.user_name = new_item_data.user_name;
+      item_data.password = new_item_data.password;
+      item_data.ext_data = new_item_data.ext_data;
+      item_data.group_uuid = new_item_data.group_uuid;
+      item_data.system_default = new_item_data.system_default;
+    };
+
+    const setMediaUrlLabel = (value: string) => {
+      switch (value) {
+        case "EwindowType::Web":
+          media_url_label.value = $t.t("http url") + ":";
+          break;
+        case "EwindowType::Rtsp":
+          media_url_label.value = $t.t("RTSP url") + ":";
+          break;
+        default:
+          media_url_label.value = $t.t("file path") + ":";
+          break;
+      }
+    };
+
+    const requestAddSignalSource = async () => {
+      item_data.group_uuid = selected.value;
+      let response = await GlobalData.getInstance()
+        .getCurrentClient()
+        ?.addSignalSource(item_data);
+      if (response) {
+        $q.notify({
+          color: response.success ? "positive" : "negative",
+          icon: response.success ? "done" : "warning",
+          message:
+            $t.t("add signal source") +
+            (response.success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1000,
+        });
+      }
+    };
+
+    const requestEditSignalSource = async () => {
+      item_data.group_uuid = selected.value;
+
+      let response = await GlobalData.getInstance()
+        .getCurrentClient()
+        ?.editSignalSource(item_data);
+      if (response) {
+        $q.notify({
+          color: response.success ? "positive" : "negative",
+          icon: response.success ? "done" : "warning",
+          message:
+            $t.t("edit signal source") +
+            (response.success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1000,
+        });
+      }
+    };
+
+    return {
+      show_dialog,
+      type,
+      signal_source_options,
+      media_url_label,
+      item_data,
+      selected,
+      loading,
+      tree_nodes,
+      showDialog(options: any) {
+        if (options) {
+          type.value = options.type ?? 1;
+          if (options.data && options.data.item_data) {
+            setItemData(JSON.parse(JSON.stringify(options.data.item_data)));
+          }
+          selected.value = item_data.group_uuid;
+        }
+        if (item_data) {
+          setMediaUrlLabel(item_data.window_type);
+        }
+        show_dialog.value = true;
+      },
+      resetData() {
+        loading.value = false;
+        selected.value = null;
+        setItemData();
+        type.value = 1;
+      },
+      treeNodesFilter(node: any, filter: any) {
+        return node.is_group && !node.item_data?.system_default;
+      },
+      onSelected(value: any) {
+        setMediaUrlLabel(value as string);
+      },
+      async onSubmit() {
+        loading.value = true;
+        try {
+          await (type.value == 2
+            ? requestEditSignalSource()
+            : requestAddSignalSource());
+          show_dialog.value = false;
+        } catch {}
+        loading.value = false;
+      },
+    };
   },
 });
 </script>

src/entities/SignalSourceEntity.ts

@@ -2,7 +2,7 @@ import BaseEntity from "./BaseEntity";
 
 export class SignalSourceEntity extends BaseEntity {
   name: string = "";
-  window_type: string = "";
+  window_type: string = "EwindowType::Normal";
   media_url: string = "";
   user_name: string = "";
   password: string = "";

src/entities/WSProtocol.ts

@@ -77,6 +77,18 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "RpcEditSignalSourceGroup";
     }
 
+    public static get kRpcAddSignalSource() {
+      return Commands.PROTOCOL_PREFIX + "RpcAddSignalSource";
+    }
+
+    public static get kRpcDeleteSignalSource() {
+      return Commands.PROTOCOL_PREFIX + "RpcDeleteSignalSource";
+    }
+
+    public static get kRpcEditSignalSource() {
+      return Commands.PROTOCOL_PREFIX + "RpcEditSignalSource";
+    }
+
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
       Commands.kSearchDevice,
@@ -96,6 +108,9 @@ export namespace Protocol {
       Commands.kRpcAddSignalSourceGroup,
       Commands.kRpcDeleteSignalSourceGroup,
       Commands.kRpcEditSignalSourceGroup,
+      Commands.kRpcAddSignalSource,
+      Commands.kRpcDeleteSignalSource,
+      Commands.kRpcEditSignalSource,
     ]);
 
     public static get AllCommands() {
@@ -365,7 +380,70 @@ export namespace Protocol {
 
     constructor() {
       super();
-      this.command = Protocol.Commands.kRpcDeleteSignalSourceGroup;
+      this.command = Protocol.Commands.kRpcDeleteSignalSource;
+    }
+  }
+
+  export class AddSignalSourcesRequestEntity extends Protocol.PacketEntity {
+    entity: SignalSourceEntity | null = null;
+    constructor(rcp_id?: number, entity?: SignalSourceEntity) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcAddSignalSource;
+      this.entity = entity ?? new SignalSourceEntity();
+    }
+  }
+
+  export class AddSignalSourcesResponseEntity extends Protocol.PacketEntity {
+    success = false;
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcAddSignalSourceGroup;
+    }
+  }
+
+  export class EditSignalSourcesRequestEntity extends Protocol.PacketEntity {
+    entity: SignalSourceEntity | null = null;
+    parent_uuid: string = "";
+    constructor(
+      rcp_id?: number,
+      entity?: SignalSourceEntity,
+      parent_uuid?: string
+    ) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcEditSignalSource;
+      this.entity = entity ?? new SignalSourceEntity();
+      this.parent_uuid = parent_uuid ?? "";
+    }
+  }
+
+  export class EditSignalSourcesResponseEntity extends Protocol.PacketEntity {
+    success = false;
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcEditSignalSource;
+    }
+  }
+
+  export class DeleteSignalSourcesRequestEntity extends Protocol.PacketEntity {
+    uuid: string = "";
+    constructor(rcp_id?: number, uuid?: string) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcDeleteSignalSource;
+      this.uuid = uuid ?? "";
+    }
+  }
+
+  export class DeleteSignalSourcesResponseEntity extends Protocol.PacketEntity {
+    success = false;
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcDeleteSignalSource;
     }
   }
 }

src/entities/WindowModelType.ts

@@ -0,0 +1,12 @@
+export enum EWindowType {
+  Normal = 0,
+  Multimedia,
+  Web,
+  Image,
+  Pdf,
+  Ppt,
+  Rtsp,
+  Subtitles,
+  Weather,
+  HdmiIn,
+}

src/i18n/zh-CN/index.ts

@@ -47,4 +47,20 @@ export default {
   "group name": "组名",
 
   "please input group name": "请输入组名",
+  "add signal source": "添加信号源",
+  "edit signal source": "修改信号源",
+  "signal source name": "信号源名称",
+  "please input signal source name": "请输入信号源名称",
+  "signal source type": "信号源类型",
+  "please select signal source type": "请选择信号源类型",
+  "multimedia file": "多媒体文件",
+  Web: "网页",
+  image: "图片",
+  rtsp: "RTSP视频流",
+  "media url": "媒体 RUL",
+  "please input media url": "请输入媒体 RUL",
+  "please input": "请输入",
+  "http url": "HTTP超链接",
+  "RTSP url": "RTSP链接",
+  "file path": "文件路径",
 };

src/pages/LeftToolBar.vue

@@ -38,6 +38,12 @@
                 clickable
                 v-close-popup
                 v-ripple
+                @click="
+                  $refs.signal_source_dialog.showDialog({
+                    type: 1,
+                    parent_node: prop.node.uuid,
+                  })
+                "
               >
                 <q-item-section avatar><q-icon name="add" /></q-item-section>
                 <q-item-section>{{
@@ -76,7 +82,10 @@
                 "
                 @click="
                   () =>
-                    $refs.group_dialog.showDialog({
+                    (prop.node.is_group
+                      ? $refs.group_dialog
+                      : $refs.signal_source_dialog
+                    ).showDialog({
                       type: 2,
                       data: prop.node,
                     })
@@ -109,6 +118,7 @@
     </q-tree>
   </div>
   <group-dialog ref="group_dialog" />
+  <signal-source-dialog ref="signal_source_dialog" />
 </template>
 
 <script lang="ts">
@@ -116,6 +126,7 @@ import { defineComponent, computed } from "vue";
 import { useStore } from "src/store";
 import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
 import GroupDialog from "src/components/GroupDialog.vue";
+import SignalSourceDialog from "src/components/SignalSourceDialog.vue";
 import { Common } from "src/common/Common";
 import GlobalData from "src/common/GlobalData";
 import { useQuasar } from "quasar";
@@ -124,7 +135,7 @@ import { useI18n } from "vue-i18n";
 export default defineComponent({
   name: "PageLeftToolBar",
 
-  components: { GroupDialog },
+  components: { GroupDialog, SignalSourceDialog },
 
   setup() {
     const $store = useStore();

src/pages/WallPage.vue

@@ -475,7 +475,6 @@ export default defineComponent({
       },
 
       onDragOver(e: DragEvent) {
-        console.log(e.dataTransfer?.items);
         e.preventDefault();
       },
 
@@ -542,7 +541,6 @@ export default defineComponent({
         GlobalData.getInstance().getCurrentClient()?.focusIn(window_id);
       },
       closeOtherWindows(window_id: number) {
-        console.log(window_id);
         for (const window of $store.state.windows) {
           if (window && window.window_id != window_id) {
             GlobalData.getInstance()

src/store/index.ts

@@ -235,6 +235,7 @@ export default store(function (/* { ssrContext } */) {
           state.signal_source_tree.push(root);
 
           buildGroup(root, signal_source_groups, signal_sources);
+          console.log(state.signal_source_tree);
         } else {
           console.error(playload);
         }