添加底图查看，底图上传的功能

package.json

@@ -15,6 +15,7 @@
     "core-js": "^3.6.5",
     "element-resize-detector": "^1.2.3",
     "quasar": "^2.0.0",
+    "v-viewer": "^3.0.9",
     "vue-i18n": "^9.0.0-beta.0",
     "vuex": "^4.0.1"
   },

quasar.conf.js

@@ -19,7 +19,7 @@ module.exports = configure(function (ctx) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli/boot-files
-    boot: ["i18n", "axios"],
+    boot: ["i18n", "axios", "v-viewer"],
 
     // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
     css: ["app.scss"],

src/boot/axios.ts

@@ -1,7 +1,7 @@
-import { boot } from 'quasar/wrappers';
+import { boot } from "quasar/wrappers";
-import axios, { AxiosInstance } from 'axios';
+import axios, { AxiosInstance } from "axios";
 
-declare module '@vue/runtime-core' {
+declare module "@vue/runtime-core" {
   interface ComponentCustomProperties {
     $axios: AxiosInstance;
   }
@@ -13,7 +13,8 @@ declare module '@vue/runtime-core' {
 // good idea to move this instance creation inside of the
 // "export default () => {}" function below (which runs individually
 // for each client)
-const api = axios.create({ baseURL: 'https://api.example.com' });
+const api = axios.create({ baseURL: "https://api.example.com" });
+api.defaults.headers.common["X-Product-Name"] = "RK_3568";
 
 export default boot(({ app }) => {
   // for use inside Vue files (Options API) through this.$axios and this.$api

src/boot/v-viewer.ts

@@ -0,0 +1,12 @@
+import { boot } from "quasar/wrappers";
+
+import "viewerjs/dist/viewer.css";
+import VueViewer from "v-viewer";
+
+export default boot(({ app }) => {
+  app.use(VueViewer, {
+    defaultOptions: {
+      zIndex: 99999,
+    },
+  });
+});

src/common/ClientConnection.ts

@@ -366,6 +366,27 @@ export default class ClientConnection {
     }
   }
 
+  public setApplicationConfig(wall_row: number, wall_col: number) {
+    this.ws?.send(
+      JSON.stringify(
+        new Protocol.SetApplicationConfigRequestEntity(
+          0,
+          "wall_row",
+          wall_row.toString()
+        )
+      )
+    );
+    this.ws?.send(
+      JSON.stringify(
+        new Protocol.SetApplicationConfigRequestEntity(
+          0,
+          "wall_col",
+          wall_col.toString()
+        )
+      )
+    );
+  }
+
   private _destoryed = false;
   public destory() {
     this._destoryed = true;

src/components/BackgroundImageDialog.vue

@@ -0,0 +1,209 @@
+<template>
+  <q-dialog persistent v-model="show_dialog" @before-hide="resetData">
+    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 35vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-11 text-h6">
+              {{ $t("background image") }}
+            </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: 35vw" class="scroll">
+          <q-list>
+            <q-item>
+              <q-item-section>
+                <q-uploader
+                  class="full-width"
+                  ref="uploader"
+                  :url="upload_url"
+                  method="post"
+                  :headers="generatorFileUploadHeaders"
+                  :label="$t('select background image') + ':'"
+                  accept="image/*"
+                  :hide-upload-btn="true"
+                  @uploaded="onUploaded"
+                  @failed="onFailed"
+                />
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="left">
+          <q-btn
+            flat
+            :loading="loading"
+            color="primary"
+            @click="showBackgroundImage"
+            :label="$t('view current background image')"
+          />
+          <q-space />
+          <q-btn
+            :loading="loading"
+            flat
+            :label="$t('Cancel')"
+            color="primary"
+            v-close-popup
+          />
+          <q-btn
+            ref="accept"
+            flat
+            :label="$t('Accept')"
+            :loading="loading"
+            type="submit"
+            color="primary"
+          />
+        </q-card-actions>
+      </q-form>
+    </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 } from "quasar";
+import { useI18n } from "vue-i18n";
+import GlobalData from "src/common/GlobalData";
+import { HttpProtocol } from "src/entities/HttpProtocol";
+import { api as viewerApi } from "v-viewer";
+
+export default defineComponent({
+  name: "ComponentBackgroundImageDialog",
+
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let uploader: any = ref(null);
+    let loading = ref(false);
+    let upload_url = ref("");
+
+    let select_options = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+    return {
+      show_dialog,
+      loading,
+      upload_url,
+      uploader,
+      select_options,
+      loga(a: any) {
+        console.log(a);
+      },
+      generatorFileUploadHeaders(files: File[]) {
+        if (files.length > 0) {
+          return [
+            {
+              name: HttpProtocol.kHeaderXProductName,
+              value: HttpProtocol.kHeaderDefaultValueXProductName,
+            },
+            {
+              name: HttpProtocol.kHeaderXFileLength,
+              value: files[0].size,
+            },
+          ];
+        }
+        return [];
+      },
+      showDialog() {
+        show_dialog.value = true;
+        let client = GlobalData.getInstance().getCurrentClient();
+        if (client) {
+          let url = new URL(client.url);
+          url.port =
+            GlobalData.getInstance().applicationConfig?.httpserver_port ??
+            HttpProtocol.DefaultHttpPort.toString();
+          url.pathname = HttpProtocol.RequestUploadFile;
+          url.protocol = "http:";
+          url.searchParams.append(
+            "type",
+            HttpProtocol.UploadTypeBackgroundImage
+          );
+          upload_url.value = url.toString();
+        }
+      },
+      resetData() {
+        loading.value = false;
+        upload_url.value = "";
+      },
+      showBackgroundImage() {
+        viewerApi({
+          options: {
+            toolbar: true,
+            url: "data-source",
+            initialViewIndex: 0,
+          },
+          images: [
+            {
+              src: "http://127.0.0.1:61429/static/default_background.png",
+              "data-source":
+                "http://127.0.0.1:61429/static/default_background.png",
+            },
+          ],
+        });
+      },
+      async onSubmit() {
+        loading.value = true;
+        try {
+          $q.dialog({
+            title: "Confirm",
+            message: $t.t("use this image to background image") + "?",
+            cancel: true,
+            persistent: true,
+          })
+            .onOk(() => {
+              uploader.value.upload();
+            })
+            .onCancel(() => {
+              loading.value = false;
+            });
+        } catch {}
+      },
+      onUploaded() {
+        $q.notify({
+          type: "positive",
+          message: $t.t("upload background image") + $t.t("success") + "!",
+          position: "top",
+          timeout: 1000,
+        });
+        loading.value = false;
+        show_dialog.value = false;
+      },
+      onFailed(info: any) {
+        console.log(info);
+        $q.notify({
+          type: "warning",
+          message: $t.t("upload background image") + $t.t("fail") + "!",
+          position: "top",
+          timeout: 1000,
+        });
+        loading.value = false;
+      },
+    };
+  },
+});
+</script>

src/components/GridSettingDialog.vue

@@ -0,0 +1,133 @@
+<template>
+  <q-dialog persistent v-model="show_dialog" @before-hide="resetData">
+    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 35vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-11 text-h6">
+              {{ $t("grid setting") }}
+            </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: 35vw" class="scroll">
+          <q-list>
+            <q-item>
+              <q-item-section>
+                <q-select
+                  :label="$t('wall row')"
+                  :hint="$t('please input') + $t('wall row') + ':'"
+                  :options="select_options"
+                  v-model="rows"
+                >
+                </q-select>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-select
+                  :label="$t('wall col')"
+                  :hint="$t('please input') + $t('wall col') + ':'"
+                  :options="select_options"
+                  v-model="cols"
+                >
+                </q-select>
+              </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"
+            type="submit"
+            color="primary"
+          />
+        </q-card-actions>
+      </q-form>
+    </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 } from "quasar";
+import { useI18n } from "vue-i18n";
+import GlobalData from "src/common/GlobalData";
+
+export default defineComponent({
+  name: "ComponentGridSettingDialog",
+
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let loading = ref(false);
+    let rows = ref(1);
+    let cols = ref(1);
+
+    let select_options = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+    return {
+      show_dialog,
+      loading,
+      rows,
+      cols,
+      select_options,
+      showDialog() {
+        show_dialog.value = true;
+
+        rows.value = GlobalData.getInstance().applicationConfig?.wall_row ?? 1;
+        cols.value = GlobalData.getInstance().applicationConfig?.wall_col ?? 1;
+      },
+      resetData() {
+        loading.value = false;
+      },
+
+      async onSubmit() {
+        loading.value = true;
+        try {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.setApplicationConfig(rows.value, cols.value);
+          show_dialog.value = false;
+        } catch {}
+        loading.value = false;
+      },
+    };
+  },
+});
+</script>

src/components/GroupDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-dialog v-model="show_dialog" @before-hide="resetData">
+  <q-dialog persistent 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">

src/components/SignalSourceDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-dialog v-model="show_dialog" @before-hide="resetData">
+  <q-dialog persistent 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">

src/entities/ApplicationConfigEntity.ts

@@ -9,4 +9,7 @@ export default class ApplicationConfigEntity {
   tcp_port: string = "";
   udp_port: string = "";
   websocket_port: string = "";
+  httpserver_port: string = "";
+  root_fs_upload_path: string = "";
+  media_upload_dir: string = "";
 }

src/entities/HttpProtocol.ts

@@ -0,0 +1,13 @@
+export namespace HttpProtocol {
+  export const DefaultHttpPort = 61429;
+  export const RequestUploadFile = "/upload_file";
+
+  export const UploadTypeBackgroundImage = "U_T_BACKGROUND_IMAGE";
+  export const UploadTypeMedia = "U_T_MEDIA";
+  export const UploadTypeRootFS = "U_T_ROOT_FS";
+
+  export const kHeaderXFileLength = "X-File-Length";
+  export const kHeaderXFileMD5 = "X-File-MD5";
+  export const kHeaderXProductName = "X-Product-Name";
+  export const kHeaderDefaultValueXProductName = "RK_3568";
+}

src/entities/WSProtocol.ts

@@ -89,6 +89,10 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "RpcEditSignalSource";
     }
 
+    public static get kSetApplicationConfig() {
+      return Commands.PROTOCOL_PREFIX + "SetApplicationConfig";
+    }
+
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
       Commands.kSearchDevice,
@@ -111,6 +115,7 @@ export namespace Protocol {
       Commands.kRpcAddSignalSource,
       Commands.kRpcDeleteSignalSource,
       Commands.kRpcEditSignalSource,
+      Commands.kSetApplicationConfig,
     ]);
 
     public static get AllCommands() {
@@ -478,4 +483,21 @@ export namespace Protocol {
     signal_source_group: SignalSourceGroupEntity =
       new SignalSourceGroupEntity();
   }
+
+  export class SetApplicationConfigRequestEntity extends Protocol.PacketEntity {
+    key: string = "";
+    value: string = "";
+    constructor(rcp_id?: number, key?: string, value?: string) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kSetApplicationConfig;
+      this.value = value ?? "";
+      this.key = key ?? "";
+    }
+  }
+
+  export class ApplicationConfigChangeNotifyEntity extends Protocol.PacketEntity {
+    key: string = "";
+    value: string = "";
+  }
 }

src/i18n/zh-CN/index.ts

@@ -5,6 +5,7 @@ export default {
   title: "MediaPlayerWebAPP",
   failed: "失败",
   fail: "失败",
+  Confirm: "确认",
   success: "成功",
   Cancel: "取消",
   Accept: "确认",
@@ -63,4 +64,11 @@ export default {
   "http url": "HTTP超链接",
   "RTSP url": "RTSP链接",
   "file path": "文件路径",
+
+  "wall row": "行",
+  "wall col": "列",
+  "select background image": "选择底图",
+  "use this image to background image": "确定使用这张图片作为背景图片吗",
+  "upload background image": "上传图片",
+  "view current background image": "查看当前底图",
 };

src/layouts/MainLayout.vue

@@ -1,5 +1,6 @@
 <template>
   <q-layout view="hHh lpR fFf">
+    <div v-show="$store.state.initialized">
       <!-- header -->
       <q-header elevated class="header text-black">
         <top-tool-bar />
@@ -38,9 +39,34 @@
       >
         <div class="text-center">SX</div>
       </q-footer>
-    <q-footer v-else elevated class="bg-white text-black" style="height: 35vh">
+      <q-footer
+        v-else
+        elevated
+        class="bg-white text-black"
+        style="height: 35vh"
+      >
         <left-tool-bar />
       </q-footer>
+    </div>
+    <div v-show="!$store.state.initialized">
+      <q-page-container class="col">
+        <q-page class="row items-center justify-evenly">
+          <q-list>
+            <q-item>
+              <q-item-section>
+                <q-spinner color="primary" size="8em" :thickness="2" />
+              </q-item-section>
+            </q-item>
+            <q-item />
+            <q-item>
+              <q-item-section>
+                <div class="text-h5">loading...</div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-page>
+      </q-page-container>
+    </div>
   </q-layout>
 </template>
 

src/pages/TopToolBar.vue

@@ -7,7 +7,6 @@
         icon="img:icons/favicon-32x32.png"
         label="电视机拼接盒"
         class="q-mr-sm"
-        @click="test"
       />
       <q-separator vertical inset />
       <q-btn
@@ -16,6 +15,7 @@
         icon="grid_on"
         :label="$t('grid setting')"
         class="q-mr-sm"
+        @click="$refs.grid_setting_dialog.showDialog()"
       />
       <q-btn
         stretch
@@ -23,6 +23,7 @@
         icon="image"
         :label="$t('background image')"
         class="q-mr-sm"
+        @click="$refs.background_image_dialog.showDialog()"
       />
       <q-btn
         stretch
@@ -58,25 +59,67 @@
       </q-btn-dropdown>
     </q-toolbar>
   </div>
+  <grid-setting-dialog ref="grid_setting_dialog" />
+  <background-image-dialog ref="background_image_dialog" />
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import { useStore } from "src/store";
 
+import GridSettingDialog from "src/components/GridSettingDialog.vue";
+import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
+
+import EventBus, { EventNamesDefine } from "src/common/EventBus";
+import { Protocol } from "src/entities/WSProtocol";
+import GlobalData from "src/common/GlobalData";
+
 export default defineComponent({
   name: "PageTopToolBar",
 
-  components: {},
+  components: { GridSettingDialog, BackgroundImageDialog },
 
   setup() {
     let $store = useStore();
 
-    return {
+    interface _ResponseMessage {
-      test() {
+      packet: Protocol.PacketEntity;
-        $store.commit("setWallCol", 2);
+      data: string;
-      },
+    }
-    };
+    EventBus.getInstance().on(
+      EventNamesDefine.NotifyMessage,
+      (notify: _ResponseMessage) => {
+        if (notify) {
+          switch (notify.packet.command) {
+            case Protocol.Commands.kSetApplicationConfig:
+              {
+                let temp = JSON.parse(
+                  notify.data
+                ) as Protocol.ApplicationConfigChangeNotifyEntity;
+                if (temp) {
+                  let global_data = GlobalData.getInstance();
+                  if (global_data && global_data.applicationConfig) {
+                    (<any>GlobalData.getInstance().applicationConfig)[
+                      temp.key
+                    ] = temp.value;
+                    $store.commit(
+                      "setWallCol",
+                      global_data.applicationConfig.wall_col
+                    );
+                    $store.commit(
+                      "setWallRow",
+                      global_data.applicationConfig.wall_row
+                    );
+                  }
+                }
+              }
+              break;
+          }
+        }
+      }
+    );
+
+    return {};
   },
 });
 </script>

src/pages/WallPage.vue

@@ -108,6 +108,7 @@ import {
   WindowStates,
 } from "src/entities/MultimediaWindowEntity";
 import WindowOtherStateChangeNotifyEntity from "src/entities/WindowOtherStateChangeNotifyEntity";
+import { useQuasar } from "quasar";
 
 interface _OptionsType {
   $t: any;
@@ -187,6 +188,7 @@ export default defineComponent({
 
   components: { Window },
   setup() {
+    const $q = useQuasar();
     const $store = useStore();
     const $t = useI18n();
 
@@ -349,6 +351,8 @@ export default defineComponent({
     _initialize({
       $t,
       $store,
+    }).then(() => {
+      $store.commit("setInitialized");
     });
 
     onMounted(() => {

src/store/index.ts

@@ -27,7 +27,7 @@ export interface StateInterface {
   // Define your own store structure, using submodules if needed
   // example: ExampleStateInterface;
   // Declared as unknown to avoid linting issue. Best to strongly type as per the line above.
-  example: unknown;
+  initialized: boolean;
   signal_source_tree: SignalSourceTreeItemEntity[];
   wall_row: number;
   wall_col: number;
@@ -90,7 +90,7 @@ export default store(function (/* { ssrContext } */) {
     },
     state: {
       // state
-      example: "",
+      initialized: false,
       signal_source_tree: [],
       wall_col: 1,
       wall_row: 1,
@@ -100,6 +100,9 @@ export default store(function (/* { ssrContext } */) {
     },
 
     mutations: {
+      setInitialized(state: StateInterface, playload?: any[]) {
+        state.initialized = true;
+      },
       setWindowPropertys(state: StateInterface, playload?: any[]) {
         if (playload && Array.isArray(playload)) {
           for (let item of playload) {

yarn.lock

@@ -6090,6 +6090,14 @@ uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+v-viewer@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/v-viewer/-/v-viewer-3.0.9.tgz#1c55b1a4dcd4dc1adabdd0e03944984e84d58cc6"
+  integrity sha512-rAYXkYNxp1Z4nqzionhnPgxbkGiHrsmRd4gMGEqZpM77zVadPA1FcD9H4uvg9YQh9GLXY7XoQC44IedqFDfzXQ==
+  dependencies:
+    lodash "^4.17.21"
+    viewerjs "^1.9.0"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -6100,6 +6108,11 @@ vendors@^1.0.3:
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
   integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
 
+viewerjs@^1.9.0:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/viewerjs/-/viewerjs-1.10.1.tgz#07499ed043d0a29e3002b90f55c5b228bd1a742c"
+  integrity sha512-Oyzd3JP9dDSd+bBulfnQ+UTfHoobFwkmcT/uKSnQXjmPz7rZU0HJIiKudxPaMsiv17dr4Sm1cHnASJcDlFw1PA==
+
 vue-i18n@^9.0.0-beta.0:
   version "9.1.7"
   resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.1.7.tgz#6f28dd2135197066508e2e65ab204a019750d773"