添加输出板设置界面

src/common/ClientConnection.ts

@@ -631,6 +631,36 @@ export default class ClientConnection {
     }
   }
 
+  public async getOutputBoardSetting() {
+    try {
+      return await this.doRpc<Protocol.GetOutputBoardSettingResponseEntity>(
+        new Protocol.GetOutputBoardSettingRequestEntity(0)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  public async setOutputBoardSetting(
+    request: Protocol.SetOutputBoardSettingRequestEntity
+  ) {
+    try {
+      return await this.doRpc<Protocol.SetOutputBoardSettingResponseEntity>(
+        request
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  public async restoreOutputBoard() {
+    try {
+      return await this.doRpc<Protocol.RestoreOutputBoardResponseEntity>(
+        new Protocol.RestoreOutputBoardRequestEntity(0)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   public restartDevice() {
     this.ws?.send(JSON.stringify(new Protocol.RestartDeviceRequestEntity()));
   }

src/components/SystemSettingDialog.vue

@@ -54,6 +54,12 @@
             :label="$t('other setting')"
             :disable="loading"
           />
+          <q-tab
+            name="output_board"
+            icon="save"
+            :label="$t('output board setting')"
+            :disable="loading"
+          />
         </q-tabs>
         <q-separator />
         <q-tab-panels v-model="tab" animated>
@@ -328,6 +334,134 @@
               </q-card-section>
             </q-card>
           </q-tab-panel>
+
+          <q-tab-panel name="output_board" class="_panel">
+            <q-card class="fit">
+              <q-card-section>
+                <q-scroll-area style="height: 55vh">
+                  <q-form ref="output_board_form">
+                    <q-list>
+                      <q-item>
+                        <q-item-section avatar class="width_5_4">{{
+                          $t("wall row") + ":"
+                        }}</q-item-section>
+                        <q-item-section>
+                          <q-input
+                            v-model="output_board_wall_row"
+                            :loading="loading"
+                            :disable="loading"
+                            type="number"
+                          />
+                        </q-item-section>
+                      </q-item>
+                      <q-item>
+                        <q-item-section avatar class="width_5_4">{{
+                          $t("wall col") + ":"
+                        }}</q-item-section>
+                        <q-item-section>
+                          <q-input
+                            v-model="output_board_wall_col"
+                            :loading="loading"
+                            :disable="loading"
+                            type="number"
+                          />
+                        </q-item-section>
+                      </q-item>
+                      <q-item>
+                        <q-item-section avatar class="width_5_4">{{
+                          $t("splicing") + ":"
+                        }}</q-item-section>
+                        <q-item-section>
+                          <q-select
+                            v-model="output_board_splicing"
+                            :loading="loading"
+                            :disable="loading"
+                            :options="[$t('on'), $t('off')]"
+                          />
+                        </q-item-section>
+                      </q-item>
+                      <q-item>
+                        <q-item-section avatar class="width_5_4">{{
+                          $t("vertical blanking") + ":"
+                        }}</q-item-section>
+                        <q-item-section>
+                          <q-input
+                            v-model="output_board_vertical_blanking"
+                            :loading="loading"
+                            :disable="loading"
+                            type="number"
+                          />
+                        </q-item-section>
+                      </q-item>
+                      <q-item>
+                        <q-item-section avatar class="width_5_4">{{
+                          $t("horizon blanking") + ":"
+                        }}</q-item-section>
+                        <q-item-section>
+                          <q-input
+                            v-model="output_board_horizon_blanking"
+                            :loading="loading"
+                            :disable="loading"
+                            type="number"
+                          />
+                        </q-item-section>
+                      </q-item>
+                      <q-item>
+                        <q-item-section avatar class="width_5_4">{{
+                          $t("rotate") + ":"
+                        }}</q-item-section>
+                        <q-item-section>
+                          <q-select
+                            v-model="output_board_rotate"
+                            :loading="loading"
+                            :disable="loading"
+                            :options="output_board_rotate_options"
+                            emit-value
+                            map-options
+                          />
+                        </q-item-section>
+                      </q-item>
+                      <q-item>
+                        <q-item-section avatar class="width_5_4">{{
+                          $t("volume") + ":"
+                        }}</q-item-section>
+                        <q-item-section>
+                          <q-input
+                            v-model="output_board_volume"
+                            :loading="loading"
+                            :disable="loading"
+                            type="number"
+                          />
+                        </q-item-section>
+                      </q-item>
+                      <q-item>
+                        <q-item-section avatar class="width_5_4">{{
+                          $t("mute") + ":"
+                        }}</q-item-section>
+                        <q-item-section>
+                          <q-select
+                            v-model="output_board_mute"
+                            :loading="loading"
+                            :disable="loading"
+                            :options="[$t('on'), $t('off')]"
+                          />
+                        </q-item-section>
+                      </q-item>
+                      <q-item>
+                        <q-item-section>
+                          <q-btn
+                            class="q-mx-xl"
+                            :label="$t('restore output board')"
+                            @click="restoreOutputBoard"
+                          ></q-btn>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-form>
+                </q-scroll-area>
+              </q-card-section>
+            </q-card>
+          </q-tab-panel>
         </q-tab-panels>
       </q-card-section>
       <q-separator />
@@ -382,6 +516,10 @@
   width: 20%;
 }
 
+.width_5_4 {
+  width: 20%;
+}
+
 ._panel {
   padding: 3px;
   height: 60vh;
@@ -468,8 +606,34 @@ export default defineComponent({
     let network_form: Ref<any> = ref(null);
     let other_form: Ref<any> = ref(null);
     let graphics_form: Ref<any> = ref(null);
+    let output_board_form: Ref<any> = ref(null);
 
-    const refresh_all = () => {
+    let output_board_wall_row = ref(2);
+    let output_board_wall_col = ref(2);
+    let output_board_splicing = ref($t.t("on"));
+    let output_board_vertical_blanking = ref(0);
+    let output_board_horizon_blanking = ref(0);
+    let output_board_rotate = ref(0);
+    const output_board_rotate_options = ref([
+      { label: "0°", value: 0 },
+      { label: "180°", value: 1 },
+    ]);
+    let output_board_volume = ref(100);
+    let output_board_mute = ref($t.t("on"));
+
+    const refresh_network = () => {
+      const config = GlobalData.getInstance()?.applicationConfig;
+      if (config) {
+        auto_ip.value =
+          config.auto_ip_address != "0" ? $t.t("enable") : $t.t("disable");
+        gateway.value = config.gateway;
+        netmask.value = config.subnet_mask;
+        mac_address.value = config.mac_address;
+        ip_address.value = $store.state.device_ip_address;
+      }
+    };
+
+    const refresh_graphics = () => {
       const config = GlobalData.getInstance()?.applicationConfig;
       if (config) {
         setTimeout(async () => {
@@ -515,17 +679,16 @@ export default defineComponent({
             }
           }
         }, 1);
-        auto_ip.value =
-          config.auto_ip_address != "0" ? $t.t("enable") : $t.t("disable");
-        gateway.value = config.gateway;
-        netmask.value = config.subnet_mask;
-        mac_address.value = config.mac_address;
-        ip_address.value = $store.state.device_ip_address;
 
         brightness.value = config.graphics_brightness;
         contrast.value = config.graphics_contrast;
         hue.value = config.graphics_hue;
+      }
+    };
 
+    const refresh_other = () => {
+      const config = GlobalData.getInstance()?.applicationConfig;
+      if (config) {
         use_ntp.value =
           config.use_ntp != "0" ? $t.t("enable") : $t.t("disable");
         ntp_server.value = config.ntp_server;
@@ -545,6 +708,31 @@ export default defineComponent({
       }
     };
 
+    const refresh_output_board = async () => {
+      const settings = await GlobalData.getInstance()
+        .getCurrentClient()
+        ?.getOutputBoardSetting();
+      if (settings) {
+        output_board_wall_row.value = settings.wall_row;
+        output_board_wall_col.value = settings.wall_col;
+        output_board_splicing.value = settings.splicing
+          ? $t.t("on")
+          : $t.t("off");
+        output_board_vertical_blanking.value = settings.vertical_blanking;
+        output_board_horizon_blanking.value = settings.horizon_blanking;
+        output_board_rotate.value = settings.rotate;
+        output_board_volume.value = settings.volume;
+        output_board_mute.value = settings.mute ? $t.t("on") : $t.t("off");
+      }
+    };
+
+    const refresh_all = () => {
+      refresh_network();
+      refresh_graphics();
+      refresh_other();
+      refresh_output_board();
+    };
+
     const applyNetwork = async () => {
       const ret = await network_form.value.validate();
       if (ret) {
@@ -618,6 +806,7 @@ export default defineComponent({
         });
       }
     };
+
     const applyOther = async () => {
       const ret = await other_form.value.validate();
       if (ret) {
@@ -654,6 +843,21 @@ export default defineComponent({
       }
     };
 
+    const applyOutputBoard = async () => {
+      const request = new Protocol.SetOutputBoardSettingRequestEntity();
+      request.wall_col = output_board_wall_col.value;
+      request.wall_row = output_board_wall_row.value;
+      request.splicing = output_board_splicing.value == $t.t("on");
+      request.vertical_blanking = output_board_vertical_blanking.value;
+      request.horizon_blanking = output_board_horizon_blanking.value;
+      request.rotate = output_board_rotate.value;
+      request.volume = output_board_volume.value;
+      request.mute = output_board_mute.value == $t.t("on");
+      GlobalData.getInstance()
+        .getCurrentClient()
+        ?.setOutputBoardSetting(request);
+    };
+
     const apply = async () => {
       loading.value = true;
       try {
@@ -667,6 +871,9 @@ export default defineComponent({
           case "other":
             await applyOther();
             break;
+          case "output_board":
+            await applyOutputBoard();
+            break;
         }
       } catch (e) {
         console.log(e);
@@ -674,6 +881,10 @@ export default defineComponent({
       loading.value = false;
     };
 
+    const restoreOutputBoard = () => {
+      GlobalData.getInstance().getCurrentClient()?.restoreOutputBoard();
+    };
+
     return {
       show_dialog,
       loading,
@@ -697,11 +908,22 @@ export default defineComponent({
       current_time,
       time_zone,
       time_zone_options,
+      output_board_mute,
+      output_board_volume,
+      output_board_rotate_options,
+      output_board_rotate,
+      output_board_horizon_blanking,
+      output_board_vertical_blanking,
+      output_board_splicing,
+      output_board_wall_col,
+      output_board_wall_row,
       network_form,
       other_form,
       graphics_form,
+      output_board_form,
       refresh_all,
       apply,
+      restoreOutputBoard,
       loga(a: any) {
         console.log(a);
       },

src/entities/WSProtocol.ts

@@ -208,6 +208,18 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "RpcGetSupportResolutions";
     }
 
+    public static get kRpcGetOutputBoardSetting() {
+      return Commands.PROTOCOL_PREFIX + "RpcGetOutputBoardSetting";
+    }
+
+    public static get kRpcSetOutputBoardSetting() {
+      return Commands.PROTOCOL_PREFIX + "RpcSetOutputBoardSetting";
+    }
+
+    public static get kRpcRestoreOutputBoard() {
+      return Commands.PROTOCOL_PREFIX + "RpcRestoreOutputBoard";
+    }
+
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
       Commands.kSearchDevice,
@@ -255,6 +267,9 @@ export namespace Protocol {
       Commands.kRpcSetSystemGraphics,
       Commands.kRpcSetSystemOther,
       Commands.kRpcGetSupportResolutions,
+      Commands.kRpcRestoreOutputBoard,
+      Commands.kRpcSetOutputBoardSetting,
+      Commands.kRpcGetOutputBoardSetting,
     ]);
 
     public static get AllCommands() {
@@ -1222,4 +1237,74 @@ export namespace Protocol {
       this.command = Protocol.Commands.kRpcGetSupportResolutions;
     }
   }
+
+  export class GetOutputBoardSettingRequestEntity extends Protocol.PacketEntity {
+    timestamp = new Date().getMilliseconds();
+
+    constructor(rcp_id?: number) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcGetOutputBoardSetting;
+    }
+  }
+
+  export class GetOutputBoardSettingResponseEntity extends Protocol.PacketEntity {
+    wall_row: number = 2;
+    wall_col: number = 2;
+    splicing: boolean = false;
+    vertical_blanking: number = 0;
+    horizon_blanking: number = 0;
+    rotate: number = 0;
+    volume: number = 0;
+    mute: boolean = false;
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcGetOutputBoardSetting;
+    }
+  }
+  export class SetOutputBoardSettingRequestEntity extends Protocol.PacketEntity {
+    wall_row: number = 2;
+    wall_col: number = 2;
+    splicing: boolean = false;
+    vertical_blanking: number = 0;
+    horizon_blanking: number = 0;
+    rotate: number = 0;
+    volume: number = 0;
+    mute: boolean = false;
+
+    constructor(rcp_id?: number) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcSetOutputBoardSetting;
+    }
+  }
+
+  export class SetOutputBoardSettingResponseEntity extends Protocol.PacketEntity {
+    timestamp = new Date().getMilliseconds();
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcSetOutputBoardSetting;
+    }
+  }
+
+  export class RestoreOutputBoardRequestEntity extends Protocol.PacketEntity {
+    timestamp = new Date().getMilliseconds();
+
+    constructor(rcp_id?: number) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcRestoreOutputBoard;
+    }
+  }
+
+  export class RestoreOutputBoardResponseEntity extends Protocol.PacketEntity {
+    timestamp = new Date().getMilliseconds();
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcRestoreOutputBoard;
+    }
+  }
 }

src/i18n/zh-CN/index.ts

@@ -243,4 +243,15 @@ export default {
   "set system other": "系统参数配置",
   "set system network": "系统网络参数配置",
   "set system graphics": "系统图像参数配置",
+  restore: "复位",
+  mute: "静音",
+  volume: "音量",
+  rotate: "旋转",
+  "horizon blanking": "水平消隐",
+  "vertical blanking": "垂直消隐",
+  splicing: "拼接",
+  "restore output board": "复位输出板",
+  on: "开",
+  off: "关",
+  "output board setting": "输出板设置",
 };

src/pages/TopToolBar.vue

@@ -52,14 +52,7 @@
         class="q-mr-sm"
         @click="$refs.grid_setting_dialog.showDialog()"
       />
-      <q-btn
+
-        stretch
-        flat
-        icon="image"
-        :label="$t('background image')"
-        class="q-mr-sm"
-        @click="$refs.background_image_dialog.showDialog()"
-      />
       <q-btn
         stretch
         flat
@@ -68,22 +61,6 @@
         class="q-mr-sm"
         @click="$refs.subtitle_dialog.showDialog()"
       />
-      <q-btn
-        stretch
-        flat
-        icon="backup"
-        :label="$t('data import')"
-        class="q-mr-sm"
-        @click="$refs.recovery_database_dialog.showDialog()"
-      />
-      <q-btn
-        stretch
-        flat
-        icon="cloud_download"
-        :label="$t('data export')"
-        class="q-mr-sm"
-        @click="backupDB"
-      />
 
       <q-btn
         stretch
@@ -95,6 +72,49 @@
         @click="stopPlan"
       />
 
+      <q-btn-dropdown
+        stretch
+        flat
+        icon="build"
+        :label="$t('other setting')"
+        class="q-mr-sm"
+      >
+        <q-list style="background-color: #3e9acd" class="shadow-2 text-white">
+          <q-item
+            clickable
+            v-close-popup
+            @click="$refs.background_image_dialog.showDialog()"
+          >
+            <q-item-section avatar>
+              <q-icon name="image" />
+            </q-item-section>
+            <q-item-section>
+              {{ $t("background image") }}
+            </q-item-section>
+          </q-item>
+          <q-item
+            clickable
+            v-close-popup
+            @click="$refs.recovery_database_dialog.showDialog()"
+          >
+            <q-item-section avatar>
+              <q-icon name="backup" />
+            </q-item-section>
+            <q-item-section>
+              {{ $t("data import") }}
+            </q-item-section>
+          </q-item>
+          <q-item clickable v-close-popup @click="backupDB">
+            <q-item-section avatar>
+              <q-icon name="cloud_download" />
+            </q-item-section>
+            <q-item-section>
+              {{ $t("data export") }}
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
+
       <q-space />
       <q-separator vertical inset />
       <q-btn-dropdown

src/pages/WallPage.vue

@@ -65,7 +65,12 @@
           <q-popup-proxy context-menu>
             <q-popup-proxy context-menu />
             <q-list>
-              <q-item clickable v-close-popup @click="closeAllWindows">
+              <q-item
+                :disable="plan_running"
+                clickable
+                v-close-popup
+                @click="closeAllWindows"
+              >
                 <q-item-section avatar>
                   <q-icon name="close" color="red" />
                 </q-item-section>
@@ -123,6 +128,8 @@ export default defineComponent({
     const $store = useStore();
     const $t = useI18n();
 
+    const plan_running = ref(false);
+
     const windows = computed({
       get: () => $store.state.windows,
       set: (val) => $store.commit("setWindows", val),
@@ -284,6 +291,16 @@ export default defineComponent({
                 }
               }
               break;
+            case Protocol.Commands.kCurrentRunningPlanStateChanged:
+              {
+                const temp = JSON.parse(
+                  notify.data
+                ) as Protocol.PlanRunningStateChangeNotifyEntity;
+                if (temp && temp.plan) {
+                  plan_running.value = temp.running;
+                }
+              }
+              break;
           }
         } catch {}
       }
@@ -312,6 +329,7 @@ export default defineComponent({
       item_height,
       wall_width_scaler,
       wall_height_scaler,
+      plan_running,
       onDrop(e: DragEvent) {
         e.preventDefault();
         let target = e.target as any;
@@ -383,6 +401,7 @@ export default defineComponent({
       },
 
       onDragEnter(e: DragEvent) {
+        e.stopPropagation();
         let target: HTMLElement | null = e.target as HTMLElement;
         if (target && target.draggable !== true) {
           while (
@@ -403,7 +422,9 @@ export default defineComponent({
       },
 
       onDragOver(e: DragEvent) {
+        if (!plan_running.value) {
           e.preventDefault();
+        }
       },
 
       onWallGridsClick(e: MouseEvent) {