添加音量调节功能

src/common/ClientConnection.ts

@@ -426,7 +426,6 @@ export default class ClientConnection {
 
   public async addMode(group_uuid?: string, name?: string, index?: number) {
     try {
-      console.log(index);
       return await this.doRpc<Protocol.AddModeResponseEntity>(
         new Protocol.AddModeRequestEntity(0, name, group_uuid, index)
       );
@@ -626,6 +625,15 @@ export default class ClientConnection {
       console.error(e);
     }
   }
+  public async setWindowVolume(window_id: number, volume: number) {
+    try {
+      return await this.doRpc<Protocol.NoneResponse>(
+        new Protocol.SetWindowVolumeRequestEntity(window_id, volume, 0)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
 
   public restartDevice(delay_ms?: number) {
     this.ws?.send(

src/components/EditVolumeDialog.vue

@@ -0,0 +1,72 @@
+<template>
+  <q-dialog v-model="show_dialog">
+    <q-card
+      class="overflow-hidden"
+      style="overflow-y: scroll; max-width: 60vw; max-height: 40vh"
+    >
+      <q-card-section style="width: 30vw; height: 10vh">
+        <q-item>
+          <q-item-section avatar>{{ $t("volume") }} :</q-item-section>
+          <q-item-section>
+            <q-slider
+              v-model="volume"
+              :min="0"
+              :max="100"
+              label
+              label-always
+              @change="volume_changed"
+            />
+          </q-item-section>
+        </q-item>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
+
+<script lang="ts">
+import { defineComponent, ref, watch, computed } from "vue";
+import { useStore } from "src/store";
+import { useQuasar, date, copyToClipboard } from "quasar";
+import { useI18n } from "vue-i18n";
+import GlobalData from "src/common/GlobalData";
+
+export default defineComponent({
+  name: "EditVolumeDialog",
+
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let loading = ref(false);
+    let volume = ref(0);
+
+    let window_id = 0;
+    return {
+      loading,
+      show_dialog,
+      volume,
+
+      showDialog(_window_id: number, _volume: number) {
+        if (_volume < 0) {
+          _volume = 0;
+        }
+        if (_volume > 100) {
+          _volume = 100;
+        }
+        window_id = _window_id;
+        volume.value = _volume;
+        show_dialog.value = true;
+      },
+      volume_changed(val: number) {
+        GlobalData.getInstance()
+          .getCurrentClient()
+          ?.setWindowVolume(window_id, volume.value);
+      },
+    };
+  },
+});
+</script>

src/components/ModeDialog.vue

@@ -257,7 +257,6 @@ export default defineComponent({
       tree_nodes,
       showDialog(options: any) {
         if (options) {
-          console.log(options);
           type.value = options.type ?? 1;
           if (type.value == 2) {
             name.value = options.data?.name ?? null;

src/components/PlanDialog.vue

@@ -520,7 +520,6 @@ export default defineComponent({
           timing_cycle.value = $t.t("disable");
           week_days.value = EWeekDays.EWeekAll;
           if (type.value == 2) {
-            console.log(options);
             name.value = options.data?.name ?? $t.t("new plan 1");
             selected.value = options.data?.item_data?.group_uuid ?? null;
             uuid.value = options.data?.item_data?.uuid ?? null;

src/components/Window.vue

@@ -13,11 +13,28 @@
     @mouseup="onMouseLeave"
   >
     <q-popup-proxy context-menu>
-      <q-popup-proxy context-menu />
       <q-list>
         <q-item
           clickable
           v-close-popup
+          :disable="$props.disable"
+          @click="$emit('edit_volume', $props.window.window_id)"
+          v-if="!$props.window.muted"
+        >
+          <q-item-section> {{ $t("edit volume") }} </q-item-section>
+        </q-item>
+        <q-item
+          clickable
+          v-close-popup
+          :disable="$props.disable"
+          @click="$emit('mute_unmute', $props.window.window_id)"
+        >
+          <q-item-section> {{ $t("mute") }} </q-item-section>
+        </q-item>
+        <q-item
+          clickable
+          v-close-popup
+          :disable="$props.disable"
           @click="$emit('close_this_window', $props.window.window_id)"
         >
           <q-item-section> {{ $t("close this window") }} </q-item-section>
@@ -25,6 +42,7 @@
         <q-item
           clickable
           v-close-popup
+          :disable="$props.disable"
           @click="$emit('close_other_windows', $props.window.window_id)"
         >
           <q-item-section>
@@ -34,6 +52,7 @@
         <q-item
           clickable
           v-close-popup
+          :disable="$props.disable"
           @click="$emit('close_all_windows', $props.window.window_id)"
         >
           <q-item-section> {{ $t("close all windwos") }} </q-item-section>
@@ -46,7 +65,7 @@
     </div>
 
     <div
-      v-if="selected && can_resize"
+      v-if="!$props.disable && selected && can_resize"
       class="resize_div absolute_up"
       ref="resize_up"
       @mousedown="onMouseDown"
@@ -55,7 +74,7 @@
       @mouseup="onMouseLeave"
     ></div>
     <div
-      v-if="selected && can_resize"
+      v-if="!$props.disable && selected && can_resize"
       class="resize_div absolute_down"
       ref="resize_down"
       @mousedown="onMouseDown"
@@ -64,7 +83,7 @@
       @mouseup="onMouseLeave"
     ></div>
     <div
-      v-if="selected && can_resize"
+      v-if="!$props.disable && selected && can_resize"
       class="resize_div absolute_left"
       ref="resize_left"
       @mousedown="onMouseDown"
@@ -73,7 +92,7 @@
       @mouseup="onMouseLeave"
     ></div>
     <div
-      v-if="selected && can_resize"
+      v-if="!$props.disable && selected && can_resize"
       class="resize_div absolute_right"
       ref="resize_right"
       @mousedown="onMouseDown"
@@ -82,7 +101,7 @@
       @mouseup="onMouseLeave"
     ></div>
     <div
-      v-if="selected && can_resize"
+      v-if="!$props.disable && selected && can_resize"
       class="resize_div absolute_left_up"
       ref="resize_left_up"
       @mousedown="onMouseDown"
@@ -93,7 +112,7 @@
       @mouseup="onMouseLeave"
     ></div>
     <div
-      v-if="selected && can_resize"
+      v-if="!$props.disable && selected && can_resize"
       class="resize_div absolute_right_up"
       ref="resize_right_up"
       @mousedown="onMouseDown"
@@ -104,7 +123,7 @@
       @mouseup="onMouseLeave"
     ></div>
     <div
-      v-if="selected && can_resize"
+      v-if="!$props.disable && selected && can_resize"
       class="resize_div absolute_left_down"
       ref="resize_left_down"
       @mousedown="onMouseDown"
@@ -115,7 +134,7 @@
       @mouseup="onMouseLeave"
     ></div>
     <div
-      v-if="selected && can_resize"
+      v-if="!$props.disable && selected && can_resize"
       class="resize_div absolute_right_down"
       ref="resize_right_down"
       @mousedown="onMouseDown"
@@ -262,6 +281,9 @@ export default defineComponent({
       type: Object,
       required: true,
     },
+    disable: {
+      type: Boolean,
+    },
   },
   emits: [
     "reset_geometry_offset",
@@ -270,6 +292,8 @@ export default defineComponent({
     "close_other_windows",
     "close_all_windows",
     "window_fouse_in",
+    "edit_volume",
+    "mute_unmute",
   ],
   setup(props, { emit }) {
     const $store = useStore();
@@ -354,6 +378,9 @@ export default defineComponent({
         }
       },
       onMouseDown(evt: MouseEvent) {
+        if (props.disable) {
+          return;
+        }
         if (selected.value) {
           if (evt.button == 0) {
             mouse_down_flag = true;

src/entities/MultimediaWindowEntity.ts

@@ -22,6 +22,10 @@ export class MultimediaWindowEntity extends BaseEntity {
   signal_source_table_uuid: string = "";
 
   window_state = new WindowStates();
+  volume: number = 80;
+  muted: boolean = false;
+  paused: boolean = false;
+  play_speed: number = 1;
 }
 
 export class WindowOpenNotifyEntity extends MultimediaWindowEntity {

src/entities/WSProtocol.ts

@@ -220,6 +220,10 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "RpcRestoreOutputBoard";
     }
 
+    public static get kSetWindowVolume() {
+      return Commands.PROTOCOL_PREFIX + "SetWindowVolume";
+    }
+
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
       Commands.kSearchDevice,
@@ -270,6 +274,7 @@ export namespace Protocol {
       Commands.kRpcRestoreOutputBoard,
       Commands.kRpcSetOutputBoardSetting,
       Commands.kRpcGetOutputBoardSetting,
+      Commands.kSetWindowVolume,
     ]);
 
     public static get AllCommands() {
@@ -300,6 +305,9 @@ export namespace Protocol {
     timeout = 15 * 1000;
   }
 
+  export class NoneResponse extends PacketEntity {
+    timestamp = new Date().getMilliseconds();
+  }
   export class LoginRequest extends PacketEntity {
     user_name = "";
     password = "";
@@ -463,6 +471,11 @@ export namespace Protocol {
     y: number = 0;
     width: number = 0;
     height: number = 0;
+    volume: number = 80;
+    muted: boolean = false;
+    paused: boolean = false;
+    play_speed: number = 1;
+
     constructor(
       signal_source: string,
       x: number,
@@ -495,6 +508,10 @@ export namespace Protocol {
     y: number = 0;
     width: number = 0;
     height: number = 0;
+    volume: number = 80;
+    muted: boolean = false;
+    paused: boolean = false;
+    play_speed: number = 1;
     constructor() {
       super();
       this.command = Commands.kOpenWindow;
@@ -1321,4 +1338,17 @@ export namespace Protocol {
       this.command = Protocol.Commands.kRpcRestoreOutputBoard;
     }
   }
+
+  export class SetWindowVolumeRequestEntity extends Protocol.PacketEntity {
+    window_id: number;
+    volume: number;
+
+    constructor(window_id: number, volume: number, rcp_id?: number) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kSetWindowVolume;
+      this.window_id = window_id;
+      this.volume = volume;
+    }
+  }
 }

src/i18n/zh-CN/index.ts

@@ -270,4 +270,7 @@ export default {
   "restart command send": "重启指令发送",
   "the sound card takes effect only after it is restarted. Restart the system":
     "声卡修改后重启才会生效，是否重启",
+  "please input mode index": "请输入模式索引(0自动生成)",
+  "mode index": "模式索引",
+  "edit volume": "修改音量",
 };

src/pages/WallPage.vue

@@ -17,11 +17,14 @@
         @close_all_windows="closeAllWindows"
         @window_fouse_in="windowFocusIn"
         @dblclick="(evt) => windowDBClick(item.window_id)"
+        @edit_volume="edit_volume"
+        @mute_unmute="mute_unmute"
         :ref="'window_' + item.window_id"
         :id="'window_' + item.window_id"
         v-for="(item, index) in windows"
         :uuid="item.uuid"
         :key="index"
+        :disable="plan_running"
         class="window"
         :signal_source_table_uuid="item.signal_source_table_uuid"
         :window="item"
@@ -82,6 +85,7 @@
       </div>
     </div>
   </div>
+  <edit-volume-dialog ref="edit_volume_dialog" />
 </template>
 
 <style scoped>
@@ -119,15 +123,19 @@ import WindowOtherStateChangeNotifyEntity from "src/entities/WindowOtherStateCha
 import { useQuasar } from "quasar";
 import { NotifyMessage } from "src/common/ClientConnection";
 
+import EditVolumeDialog from "src/components/EditVolumeDialog.vue";
+
 export default defineComponent({
   name: "PageWall",
 
-  components: { Window },
+  components: { Window, EditVolumeDialog },
   setup() {
     const $q = useQuasar();
     const $store = useStore();
     const $t = useI18n();
 
+    const edit_volume_dialog: Ref<any> = ref(null);
+
     const plan_running = ref(false);
 
     const windows = computed({
@@ -330,6 +338,7 @@ export default defineComponent({
       wall_width_scaler,
       wall_height_scaler,
       plan_running,
+      edit_volume_dialog,
       onDrop(e: DragEvent) {
         e.preventDefault();
         let target = e.target as any;
@@ -509,11 +518,31 @@ export default defineComponent({
         }
       },
       windowDBClick(window_id: number) {
+        if (plan_running.value) {
+          return;
+        }
         GlobalData.getInstance().getCurrentClient()?.windowFitGrid(window_id);
       },
       closeWindow(window_id: number) {
         GlobalData.getInstance().getCurrentClient()?.closeWindow(window_id);
       },
+      edit_volume(window_id: number) {
+        const window = windows.value.find(
+          (element) => element && element.window_id == window_id
+        );
+        if (window) {
+          edit_volume_dialog.value?.showDialog(window_id, window.volume);
+        }
+      },
+      mute_unmute(window_id: number) {
+        console.log(windows.value);
+
+        const window = windows.value.find(
+          (element) => element && element.window_id == window_id
+        );
+        if (window) {
+        }
+      },
     };
   },
 });