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

2021-08-13 16:50:03 +08:00 · 2021-08-13 16:50:03 +08:00 · 7d84ef3cbc
parent af4271c339
commit 7d84ef3cbc
18 changed files with 566 additions and 54 deletions
--- a/package.json
+++ b/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"
  },
--- a/quasar.conf.js
+++ b/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"],
--- a/src/boot/axios.ts
+++ b/src/boot/axios.ts
@ -1,7 +1,7 @@
-import { boot } from 'quasar/wrappers';
-import axios, { AxiosInstance } from 'axios';
+import { boot } from "quasar/wrappers";
+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
--- a/src/boot/v-viewer.ts
+++ b/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,
+    },
+  });
+});
--- a/src/common/ClientConnection.ts
+++ b/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;
--- a/src/components/BackgroundImageDialog.vue
+++ b/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>
--- a/src/components/GridSettingDialog.vue
+++ b/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>
--- a/src/components/GroupDialog.vue
+++ b/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">
--- a/src/components/SignalSourceDialog.vue
+++ b/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">
--- a/src/entities/ApplicationConfigEntity.ts
+++ b/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 = "";
 }
--- a/src/entities/HttpProtocol.ts
+++ b/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";
+}
--- a/src/entities/WSProtocol.ts
+++ b/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 = "";
+  }
 }
--- a/src/i18n/zh-CN/index.ts
+++ b/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": "查看当前底图",
 };
--- a/src/layouts/MainLayout.vue
+++ b/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>

--- a/src/pages/TopToolBar.vue
+++ b/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 {
-      test() {
-        $store.commit("setWallCol", 2);
-      },
-    };
+    interface _ResponseMessage {
+      packet: Protocol.PacketEntity;
+      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>
--- a/src/pages/WallPage.vue
+++ b/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(() => {
--- a/src/store/index.ts
+++ b/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) {
--- a/yarn.lock
+++ b/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"