优霸定制VideoWall宫格横屏竖屏成比例显示

about菜单从工具栏other移动到system
system增加user

package.json

@@ -1,6 +1,6 @@
 {
   "name": "media_player_client",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "A Quasar Framework app",
   "productName": "MediaPlayerClient",
   "author": "fangxiang <fangxiang@cloudview.work>",
@@ -22,7 +22,7 @@
     "reconnecting-websocket": "^4.4.0",
     "sortablejs": "^1.15.0",
     "to": "^0.2.9",
-    "ts-md5": "^1.2.11",
+    "ts-md5": "^1.3.1",
     "update": "^0.7.4",
     "v-viewer": "^3.0.9",
     "vue": "^3.0.0",

public/media_control_client_product.js

@@ -1,2 +1,3 @@
-// window.media_control_client_product = "LED_PLAYER";
-window.media_control_client_product = "SPECIAL_VIDEO";
+window.media_control_client_product = "LED_PLAYER";
+// window.media_control_client_product = "SPECIAL_VIDEO";
+// window.media_control_client_product = "RK_3568";

src/common/ClientConnection.ts

@@ -715,6 +715,26 @@ export default class ClientConnection {
     );
   }
 
+  public setUserName(user_name: string) {
+    this.ws?.send(
+      JSON.stringify(
+        new Protocol.SetApplicationConfigRequestEntity(
+          0,
+          "user_name",
+          user_name
+        )
+      )
+    );
+  }
+
+  public setPassword(password: string) {
+    this.ws?.send(
+      JSON.stringify(
+        new Protocol.SetApplicationConfigRequestEntity(0, "password", password)
+      )
+    );
+  }
+
   public setSpecialVideoLayoutRotation(rotation: string) {
     this.ws?.send(
       JSON.stringify(

src/components/SystemSettingDialog.vue

@@ -46,6 +46,8 @@
           indicator-color="primary"
           align="justify"
           narrow-indicator
+          outside-arrows
+          mobile-arrows
           class="bg-grey-2 text-teal"
           @update:model-value="onTabChanged"
         >
@@ -98,6 +100,21 @@
             :label="$t('output board setting')"
             :disable="loading"
           />
+          <q-tab
+            name="user"
+            no-caps
+            icon="account_circle"
+            :label="$t('user')"
+            :disable="loading"
+          />
+          <q-tab
+            name="about"
+            no-caps
+            :icon="'info' /*'img:new_icon/about.png'*/"
+            :label="$t('about')"
+            :disable="loading"
+            @click="++click_count"
+          />
         </q-tabs>
         <q-separator />
         <q-tab-panels v-model="tab" animated>
@@ -772,26 +789,6 @@
                           />
                         </q-item-section>
                       </q-item>
-
-                      <q-item class="q-mt-xl border">
-                        <q-space />
-                        <q-btn
-                          @click="onCleanBrowserCache"
-                          outline
-                          :label="$t('clean browser cache')"
-                          color="primary"
-                          class="q-mx-md"
-                          no-caps
-                        />
-                        <q-btn
-                          @click="onRestore"
-                          outline
-                          :label="$t('system') + $t(' ') + $t('restore')"
-                          color="primary"
-                          class="q-mx-md"
-                          no-caps
-                        />
-                      </q-item>
                     </q-list>
                   </q-form>
                 </q-card-section>
@@ -1022,6 +1019,229 @@
               </q-card-section>
             </q-card>
           </q-tab-panel>
+
+          <q-tab-panel name="user" class="_panel">
+            <q-card class="fit">
+              <q-card-section>
+                <q-form ref="user_form" @submit="applyUser">
+                  <q-list>
+                    <q-item class="q-pa-none">
+                      <q-item-section avatar class="width_5_1">{{
+                        $t("user name") + ":"
+                      }}</q-item-section>
+                      <q-item-section>
+                        <q-input
+                          v-model="user_name"
+                          :loading="loading"
+                          :disable="loading"
+                          maxlength="16"
+                          :rules="[
+                            (val) =>
+                              (val && val.length > 0) ||
+                              $t('Please type something'),
+                          ]"
+                          lazy-rules
+                        />
+                      </q-item-section>
+                    </q-item>
+                    <q-item class="q-pa-none">
+                      <q-item-section avatar class="width_5_1">{{
+                        $t("old password") + ":"
+                      }}</q-item-section>
+                      <q-item-section>
+                        <q-input
+                          v-model="old_password"
+                          :loading="loading"
+                          :disable="loading"
+                          :type="show_old_password ? 'text' : 'password'"
+                          maxlength="16"
+                          :rules="[
+                            (val) =>
+                              (val && val.length > 0) ||
+                              $t('Please type something'),
+                          ]"
+                          lazy-rules
+                        >
+                          <template v-if="old_password" v-slot:append>
+                            <q-icon
+                              :name="
+                                show_old_password
+                                  ? 'visibility'
+                                  : 'visibility_off'
+                              "
+                              class="cursor-pointer"
+                              @click="show_old_password = !show_old_password"
+                            />
+                            <q-icon
+                              name="cancel"
+                              @click.stop="old_password = ''"
+                              class="cursor-pointer"
+                            />
+                          </template>
+                        </q-input>
+                      </q-item-section>
+                    </q-item>
+                    <q-item class="q-pa-none">
+                      <q-item-section avatar class="width_5_1">{{
+                        $t("new password") + ":"
+                      }}</q-item-section>
+                      <q-item-section>
+                        <q-input
+                          v-model="new_password"
+                          :loading="loading"
+                          :disable="loading"
+                          :type="show_new_password ? 'text' : 'password'"
+                          maxlength="16"
+                          :rules="[
+                            (val) =>
+                              (val && val.length > 0) ||
+                              $t('Please type something'),
+                          ]"
+                          lazy-rules
+                        >
+                          <template v-if="new_password" v-slot:append>
+                            <q-icon
+                              :name="
+                                show_new_password
+                                  ? 'visibility'
+                                  : 'visibility_off'
+                              "
+                              class="cursor-pointer"
+                              @click="show_new_password = !show_new_password"
+                            />
+                            <q-icon
+                              name="cancel"
+                              @click.stop="new_password = ''"
+                              class="cursor-pointer"
+                            />
+                          </template>
+                        </q-input>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-form>
+              </q-card-section>
+            </q-card>
+          </q-tab-panel>
+
+          <q-tab-panel name="about" class="_panel">
+            <q-card class="fit">
+              <q-card-section>
+                <q-form ref="about_form">
+                  <q-list>
+                    <q-item v-if="false">
+                      <q-item-section avatar class="width_5_5_5">
+                        {{ $t("product name") }}:
+                      </q-item-section>
+                      <q-item-section>
+                        {{ $t("TV splicing box") }}
+                      </q-item-section>
+                    </q-item>
+                    <q-item v-if="false">
+                      <q-item-section avatar class="width_5_5_5">
+                        {{ $t("copyright") }}:
+                      </q-item-section>
+                      <q-item-section>
+                        {{ $t("guangdong chuangxian jishu") }} LTD.
+                      </q-item-section>
+                    </q-item>
+                    <q-item>
+                      <q-item-section avatar class="width_5_5_5"
+                        >{{ $t("client version") }}:
+                      </q-item-section>
+                      <q-item-section>
+                        {{ client_version.version }}
+                      </q-item-section>
+                    </q-item>
+                    <q-item>
+                      <q-item-section avatar class="width_5_5_5"
+                        >{{ $t("server version") }}:
+                      </q-item-section>
+                      <q-item-section>
+                        {{ server_version }}
+                      </q-item-section>
+                    </q-item>
+
+                    <div
+                      v-if="
+                        (click_count >= target_click_count &&
+                          (click_count % target_click_count == 0 ||
+                            click_count % target_click_count == 1)) ||
+                        $store.state.advanced_debug
+                      "
+                    >
+                      <q-item>
+                        <q-item-section avatar class="width_5_5_5"
+                          >{{ $t("server commit hash") }}:
+                        </q-item-section>
+                        <q-item-section>
+                          {{ server_commit_hash }}
+                        </q-item-section>
+                      </q-item>
+                      <q-item>
+                        <q-item-section avatar class="width_5_5_5"
+                          >{{ $t("server branch name") }}:
+                        </q-item-section>
+                        <q-item-section>
+                          {{ server_branch_name }}
+                        </q-item-section>
+                      </q-item>
+                      <q-item>
+                        <q-item-section avatar class="width_5_5_5"
+                          >{{ $t("server build date") }}:
+                        </q-item-section>
+                        <q-item-section>
+                          {{ server_build_date }}
+                        </q-item-section>
+                      </q-item>
+                      <q-item>
+                        <q-item-section avatar class="width_5_5_5"
+                          >{{ $t("kernel version") }}:
+                        </q-item-section>
+                        <q-item-section>
+                          {{ kernel_version }}
+                        </q-item-section>
+                      </q-item>
+                      <q-item>
+                        <q-item-section avatar class="width_5_5_5"
+                          >{{ $t("rootfs version") }}:
+                        </q-item-section>
+                        <q-item-section>
+                          {{ rootfs_version }}
+                        </q-item-section>
+                      </q-item>
+                    </div>
+                    <q-item class="q-mt-xl border">
+                      <q-space />
+
+                      <q-btn
+                        @click="onRestore"
+                        outline
+                        :label="$t('system') + $t(' ') + $t('restore')"
+                        color="primary"
+                        class="q-mx-md"
+                        no-caps
+                      />
+                      <q-space />
+                    </q-item>
+                    <q-item class="border">
+                      <q-space />
+                      <q-btn
+                        @click="onCleanBrowserCache"
+                        outline
+                        :label="$t('clean browser cache')"
+                        color="primary"
+                        class="q-mx-md"
+                        no-caps
+                      />
+
+                      <q-space />
+                    </q-item>
+                  </q-list>
+                </q-form>
+              </q-card-section>
+            </q-card>
+          </q-tab-panel>
         </q-tab-panels>
       </q-card-section>
       <q-separator />
@@ -1101,6 +1321,18 @@
   width: 20%;
 }
 
+.width_5_5 {
+  width: 30%;
+}
+
+.width_5_5_5 {
+  width: 35%;
+}
+
+.width_5_6 {
+  width: 40%;
+}
+
 ._panel {
   padding: 3px;
   height: 60vh;
@@ -1129,6 +1361,10 @@ import { AdvancedIpAddressEntity } from "src/entities/AdvancedIpAddressEntity";
 
 import { EDeviceAttribute } from "src/entities/EDeviceAttribute";
 
+import version from "../../package.json";
+
+import { Md5 } from "ts-md5";
+
 const _time_zones = [
   "UTC-12(Central Pacific)",
   "UTC-11(Central Pacific)",
@@ -1265,6 +1501,7 @@ export default defineComponent({
     let other_form: Ref<any> = ref(null);
     let graphics_form: Ref<any> = ref(null);
     let output_board_form: Ref<any> = ref(null);
+    const user_form: Ref<any> = ref(null);
 
     let output_board_wall_row = ref(2);
     let output_board_wall_col = ref(2);
@@ -1281,6 +1518,16 @@ export default defineComponent({
 
     const timing_tasks: Ref<TimingTaskEntity[]> = ref([]);
 
+    let click_count = ref(0);
+    const target_click_count = ref(30);
+    let client_version = ref(version);
+    let server_version = ref("unknow");
+    let server_commit_hash = ref("unknow");
+    let server_build_date = ref("unknow");
+    let server_branch_name = ref("unknow");
+    let kernel_version = ref("unknow");
+    let rootfs_version = ref("unknow");
+
     const refresh_network = () => {
       const config = GlobalData.getInstance()?.applicationConfig;
       if (config) {
@@ -1691,8 +1938,87 @@ export default defineComponent({
         case "output_board":
           output_board_form.value.submit();
           break;
+        case "user":
+          user_form.value.submit();
+          break;
       }
     };
+
+    const applyUser = async () => {
+      loading.value = true;
+      console.log("zzz");
+      const request = new Protocol.SetOutputBoardSettingRequestEntity();
+      request.wall_col = parseInt(output_board_wall_col.value.toString());
+      request.wall_row = parseInt(output_board_wall_row.value.toString());
+      request.splicing = output_board_splicing.value == $t.t("on");
+      request.vertical_blanking = parseInt(
+        output_board_vertical_blanking.value.toString()
+      );
+      request.horizon_blanking = parseInt(
+        output_board_horizon_blanking.value.toString()
+      );
+      request.rotate = parseInt(output_board_rotate.value.toString());
+      request.volume = parseInt(output_board_volume.value.toString());
+      request.mute = output_board_mute.value == $t.t("on");
+      request.output_board_resolution = output_board_resolution.value;
+
+      let success = false;
+      try {
+        const appconfig = GlobalData.getInstance().applicationConfig;
+        if (
+          user_name.value.trim().length > 0 &&
+          old_password.value.trim().length > 0 &&
+          new_password.value.trim().length > 0 &&
+          appconfig
+        ) {
+          const old_pwd = Md5.hashStr(old_password.value.trim()).toLowerCase();
+          const new_pwd = Md5.hashStr(new_password.value.trim()).toLowerCase();
+          if (
+            appconfig.password &&
+            appconfig.password.toLowerCase() == old_pwd
+          ) {
+            if (user_name.value.trim() != appconfig.user_name) {
+              GlobalData.getInstance()
+                .getCurrentClient()
+                ?.setUserName(user_name.value.trim());
+            }
+
+            if (new_pwd != old_pwd) {
+              GlobalData.getInstance().getCurrentClient()?.setPassword(new_pwd);
+            }
+            success = true;
+          } else {
+            $q.notify({
+              color: "negative",
+              icon: "warning",
+              message:
+                $t.t("edit user or password") +
+                $t.t(" ") +
+                $t.t("fail") +
+                ", " +
+                $t.t("old password error") +
+                "!",
+              position: "top",
+              timeout: 2500,
+            });
+            loading.value = false;
+            return;
+          }
+        }
+      } catch {}
+      $q.notify({
+        color: success ? "positive" : "negative",
+        icon: success ? "done" : "warning",
+        message:
+          $t.t("edit user or password") +
+          (success ? $t.t("success") : $t.t("fail")) +
+          "!",
+        position: "top",
+        timeout: 2500,
+      });
+      loading.value = false;
+    };
+
     const restoreOutputBoard = () => {
       GlobalData.getInstance().getCurrentClient()?.restoreOutputBoard();
     };
@@ -1710,6 +2036,31 @@ export default defineComponent({
       }
     };
 
+    const user_name = ref(
+      GlobalData.getInstance().applicationConfig?.user_name ?? "admin"
+    );
+    const old_password = ref("");
+    const show_old_password = ref(false);
+    const new_password = ref("");
+    const show_new_password = ref(false);
+
+    watch(
+      () => tab.value,
+      (newV, oldV) => {
+        if (newV == "user") {
+          user_name.value =
+            GlobalData.getInstance().applicationConfig?.user_name ?? "admin";
+          old_password.value = "";
+          new_password.value = "";
+          show_old_password.value = false;
+          show_new_password.value = false;
+        }
+        if (newV != "about") {
+          click_count.value = 0;
+        }
+      }
+    );
+
     return {
       show_dialog,
       e_week_Days: ref(EWeekDays),
@@ -1761,7 +2112,22 @@ export default defineComponent({
       other_form,
       graphics_form,
       output_board_form,
+      user_form,
       mirroring_output,
+      click_count,
+      target_click_count,
+      client_version,
+      server_version,
+      server_commit_hash,
+      server_build_date,
+      server_branch_name,
+      kernel_version,
+      rootfs_version,
+      user_name,
+      old_password,
+      new_password,
+      show_new_password,
+      show_old_password,
       refresh_all,
       apply,
       restoreOutputBoard,
@@ -1769,6 +2135,7 @@ export default defineComponent({
       applyGraphics,
       applyOther,
       applyOutputBoard,
+      applyUser,
       loga(a: any) {
         console.log(a);
       },
@@ -1785,8 +2152,26 @@ export default defineComponent({
           });
 
         refresh_all();
+
+        try {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.getBuildInfo()
+            ?.then((build_info) => {
+              if (build_info) {
+                server_version.value = build_info.version;
+                server_commit_hash.value = build_info.commit_hash;
+                server_build_date.value = build_info.build_date;
+                server_branch_name.value = build_info.branch_name;
+                kernel_version.value = build_info.kernel_version;
+                rootfs_version.value = build_info.rootfs_version;
+              }
+            });
+          // console.log(build_info);
+        } catch {}
       },
       resetData() {
+        click_count.value = 0;
         loading.value = false;
         tab.value = "network";
       },

src/components/custom/ISVVideoWallDialog.vue

@@ -98,33 +98,32 @@
 
         <q-separator />
 
-        <q-card-section style="width: 55vw">
-          <div
-            style="max-height: 50vh"
-            :style="{ height: screen_mode == 0 ? '28vh' : '48vh' }"
-            class="row items-center justify-center"
-          >
+        <q-card-section style="width: 60vw">
+          <div style="max-height: 50vh">
             <div
               ref="preview_grid"
-              style="height: 100%"
-              :style="{ width: screen_mode == 0 ? '90%' : '40%' }"
-              class="preview_grid"
+              style="height: 100%; width: 98%"
+              class="preview_grid1 items-center justify-center"
             >
               <div
                 v-for="row in preview_rows"
                 :key="'row' + (row - 1)"
-                class="row"
+                class="row items-center justify-center"
               >
                 <div
                   v-for="col in preview_cols"
-                  :style="{ height: previce_grid_height + 'px' }"
-                  class="preview_grid_item col row items-center justify-center"
+                  :style="{
+                    height: previce_grid_height + 'px',
+                    width: previce_grid_width + 'px',
+                  }"
+                  class="preview_grid_item row items-center justify-center"
                   :key="(row - 1) * preview_cols + col"
                 >
                   <div class="fit row items-center justify-center">
-                    <div class="preview_wall_item">
+                    <div class="preview_wall_item" style="font-size: 0.8rem">
                       <span>
-                        &nbsp;&nbsp;HI: {{ (row - 1) * preview_cols + col }}
+                        &nbsp;&nbsp;HDMI Port:
+                        {{ (row - 1) * preview_cols + col }}
                       </span>
                       <br />
                       <span
@@ -132,7 +131,7 @@
                           outputs.length > (row - 1) * preview_cols + col - 1
                         "
                       >
-                        &nbsp;&nbsp;SI:
+                        &nbsp;&nbsp;Splice Index:
                         {{
                           (outputs[(row - 1) * preview_cols + col - 1]
                             .output_index ?? (row - 1) * preview_cols + col) + 1
@@ -219,12 +218,21 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, ref, Ref, watch, computed, onMounted } from "vue";
+import {
+  defineComponent,
+  ref,
+  Ref,
+  watch,
+  computed,
+  onMounted,
+  nextTick,
+} from "vue";
 import { useStore } from "src/store";
 import { useQuasar, date as DateHelper } from "quasar";
 import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
 import OutputBoardItemConfigEntity from "src/entities/OutputBoardItemConfigEntity";
+import EventBus, { EventNamesDefine } from "src/common/EventBus";
 const elementResizeDetectorMaker = require("element-resize-detector");
 
 export default defineComponent({
@@ -270,6 +278,7 @@ export default defineComponent({
     const preview_cols = ref(3);
     const preview_rotation = ref(0);
     const previce_grid_height = ref(100);
+    const previce_grid_width = ref(80);
     const outputs: Ref<OutputBoardItemConfigEntity[]> = ref(
       <OutputBoardItemConfigEntity[]>[]
     );
@@ -311,6 +320,41 @@ export default defineComponent({
       return result;
     };
 
+    const refreshPreiewGridWH = () => {
+      if (preview_grid.value) {
+        const max_height = window.innerHeight * 0.49; // items-center justify-center
+        const max_width = preview_grid.value.clientWidth * 0.95;
+        let cell_width = 0;
+        let cell_height = 0;
+        if (screen_mode.value == 0) {
+          cell_width = max_width / preview_cols.value;
+          cell_height = (cell_width * 9) / 16;
+          if (cell_height * preview_rows.value > max_height) {
+            cell_height = max_height / preview_rows.value;
+            cell_width = (cell_height * 16) / 9;
+          }
+        } else {
+          cell_height = max_height / preview_rows.value;
+          if (preview_cols.value == 1 && preview_rows.value == 4) {
+            cell_width = (cell_height * 18) / 16;
+          } else {
+            cell_width = (cell_height * 13) / 16;
+          }
+          if (cell_width * preview_cols.value > max_width) {
+            cell_width = max_width / preview_cols.value;
+            if (preview_cols.value == 1 && preview_rows.value == 4) {
+              cell_height = (cell_width * 16) / 18;
+            } else {
+              cell_height = (cell_width * 16) / 13;
+            }
+          }
+        }
+
+        previce_grid_width.value = cell_width;
+        previce_grid_height.value = cell_height;
+      }
+    };
+
     watch(
       () => splice_mode.value,
       (newV: string) => {
@@ -318,10 +362,8 @@ export default defineComponent({
         preview_cols.value = result.cols;
         preview_rows.value = result.rows;
         preview_rotation.value = result.rotation;
-        if (preview_grid.value) {
-          previce_grid_height.value =
-            preview_grid.value.clientHeight / preview_rows.value;
-        }
+
+        refreshPreiewGridWH();
       }
     );
 
@@ -332,25 +374,15 @@ export default defineComponent({
           const result = parseSpliceMode(splice_mode.value);
           splice_mode.value = result.rows + "x" + result.cols;
         }
+        refreshPreiewGridWH();
       }
     );
 
-    watch(
-      () => preview_grid.value,
-      (newV: any) => {
-        if (newV) {
-          elementResizeDetectorMaker().listenTo(
-            newV,
-            (element: HTMLElement) => {
-              if (element) {
-                previce_grid_height.value =
-                  element.clientHeight / preview_rows.value;
-              }
-            }
-          );
-        }
-      }
+    EventBus.getInstance().on(
+      EventNamesDefine.WindowResize,
+      refreshPreiewGridWH
     );
+
     return {
       show_dialog,
       loading,
@@ -364,6 +396,7 @@ export default defineComponent({
       preview_rotation,
       previce_grid_height,
       outputs,
+      previce_grid_width,
 
       async showDialog() {
         {
@@ -429,6 +462,9 @@ export default defineComponent({
           }
         }
 
+        nextTick(() => {
+          refreshPreiewGridWH();
+        });
         show_dialog.value = true;
       },
       resetData() {

src/entities/ApplicationConfigEntity.ts

@@ -1,5 +1,7 @@
 import { AdvancedIpAddressEntity } from "./AdvancedIpAddressEntity";
 export default class ApplicationConfigEntity {
+  user_name: string = "admin";
+  password: string = "";
   auto_ip_address: string = "";
   ip_address: string = "";
   gateway: string = "";

src/i18n/en-US/index.ts

@@ -391,4 +391,11 @@ export default {
   "video wall": "Video Wall",
   "set splice index": "Set Splice Index",
   "please select new index": "Please Select New Index",
+  splice: "Splice",
+  user: "User",
+  "old password": "Old Password",
+  "new password": "New Password",
+  "server commit hash": "Server Commit Hash",
+  "edit user or password": "Edit User Or Password",
+  "old password error": "Old Password Error",
 };

src/i18n/zh-CN/index.ts

@@ -662,4 +662,10 @@ export default {
   "video wall": "拼接墙",
   "set splice index": "设置拼接序号",
   "please select new index": "请选择新序号",
+  splice: "拼接",
+  user: "用户",
+  "old password": "旧密码",
+  "new password": "新密码",
+  "edit user or password": "修改用户名和密码",
+  "old password error": "旧密码不匹配",
 };

src/pages/TopToolBar.vue

@@ -412,6 +412,7 @@
             clickable
             v-close-popup
             @click="$refs.about_dialog.showDialog()"
+            v-if="false"
           >
             <q-item-section avatar>
               <!-- <q-icon name="info_outline" /> -->

src/pages/custom/ISVTopToolBar.vue

@@ -43,7 +43,6 @@
         :label="$t('file manage')"
         class="q-mr-sm"
         @click="$refs.file_manage_dialog.showDialogAsync()"
-        v-if="false"
       />
 
       <q-btn
@@ -85,7 +84,6 @@
             : $refs.grid_setting_dialog
           )?.showDialog()
         "
-        v-if="false"
       />
 
       <q-btn
@@ -101,6 +99,18 @@
         @click="$refs.subtitle_dialog.showDialog()"
       />
 
+      <q-btn
+        stretch
+        no-caps
+        flat
+        stack
+        :disable="plan_running || !$store.state.power_state"
+        :icon="/*vertical_align_bottom*/ 'img:new_icon/edit_window_rect.png'"
+        :label="$t('toolbar edit window rect')"
+        class="q-mr-sm"
+        @click="editRect"
+      />
+
       <q-btn
         stretch
         no-caps
@@ -125,18 +135,6 @@
         @click="lowerWindow"
       />
 
-      <q-btn
-        stretch
-        no-caps
-        flat
-        stack
-        :disable="plan_running || !$store.state.power_state"
-        :icon="/*vertical_align_bottom*/ 'img:new_icon/edit_window_rect.png'"
-        :label="$t('toolbar edit window rect')"
-        class="q-mr-sm"
-        @click="editRect"
-      />
-
       <q-btn
         stretch
         no-caps
@@ -174,30 +172,6 @@
         @click="stopPlan"
       />
 
-      <q-btn
-        stretch
-        no-caps
-        flat
-        stack
-        :disable="power_flag"
-        icon="img:new_icon/power_off.png"
-        :label="$t('power off')"
-        class="q-mr-sm"
-        @click="powerOff"
-      />
-
-      <q-btn
-        stretch
-        no-caps
-        flat
-        stack
-        :disable="power_flag"
-        icon="img:new_icon/power_on.png"
-        :label="$t('power on')"
-        class="q-mr-sm"
-        @click="powerOn"
-      />
-
       <q-btn
         v-if="$store.state.custom_defines.function_center_control"
         :disable="!$store.state.power_state"
@@ -235,10 +209,10 @@
           >
             <q-item-section avatar>
               <!-- <q-icon name="image" /> -->
-              <q-icon name="img:new_icon/grid_setting.png" />
+              <q-icon name="img:new_icon/power_off.png" />
             </q-item-section>
             <q-item-section>
-              {{ $t("grid setting") }}
+              {{ $t("power off") }}
             </q-item-section>
           </q-item>
           <q-item
@@ -249,10 +223,10 @@
           >
             <q-item-section avatar>
               <!-- <q-icon name="image" /> -->
-              <q-icon name="img:new_icon/file_manager.png" />
+              <q-icon name="img:new_icon/power_on.png" />
             </q-item-section>
             <q-item-section>
-              {{ $t("file manage") }}
+              {{ $t("power on") }}
             </q-item-section>
           </q-item>
           <q-item
@@ -307,6 +281,7 @@
             clickable
             v-close-popup
             @click="$refs.about_dialog.showDialog()"
+            v-if="false"
           >
             <q-item-section avatar>
               <!-- <q-icon name="info_outline" /> -->

yarn.lock

@@ -10600,10 +10600,10 @@ ts-loader@9.2.6:
     micromatch "^4.0.0"
     semver "^7.3.4"
 
-ts-md5@^1.2.11:
-  version "1.2.11"
-  resolved "https://registry.npmmirror.com/ts-md5/-/ts-md5-1.2.11.tgz#0bbdf884eecf7da3952fe8671a109d7e55d322c6"
-  integrity sha512-vAwy9rEuRE6a8xa1MavIVkLFyyU0ydk4CLMFA5vOVccmQKLOuGb/BHm3oEN7XHf2FoqS+z0pSvhaad/ombd1Vg==
+ts-md5@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.npmmirror.com/ts-md5/-/ts-md5-1.3.1.tgz#f5b860c0d5241dd9bb4e909dd73991166403f511"
+  integrity sha512-DiwiXfwvcTeZ5wCE0z+2A9EseZsztaiZtGrtSaY5JOD7ekPnR/GoIVD5gXZAlK9Na9Kvpo9Waz5rW64WKAWApg==
 
 tslib@2.3.0:
   version "2.3.0"