diff --git a/package.json b/package.json index 8028276..06fcae7 100644 --- 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" }, diff --git a/quasar.conf.js b/quasar.conf.js index 05a0120..e6e79b0 100644 --- 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"], diff --git a/src/boot/axios.ts b/src/boot/axios.ts index 408a99d..b350ffe 100644 --- 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 diff --git a/src/boot/v-viewer.ts b/src/boot/v-viewer.ts new file mode 100644 index 0000000..3aa6626 --- /dev/null +++ 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, + }, + }); +}); diff --git a/src/common/ClientConnection.ts b/src/common/ClientConnection.ts index 4a1913d..7a22123 100644 --- 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; diff --git a/src/components/BackgroundImageDialog.vue b/src/components/BackgroundImageDialog.vue new file mode 100644 index 0000000..6c31235 --- /dev/null +++ b/src/components/BackgroundImageDialog.vue @@ -0,0 +1,209 @@ + + + + + + + + {{ $t("background image") }} + + + + + {{ $t("close") }} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/GridSettingDialog.vue b/src/components/GridSettingDialog.vue new file mode 100644 index 0000000..d626d32 --- /dev/null +++ b/src/components/GridSettingDialog.vue @@ -0,0 +1,133 @@ + + + + + + + + {{ $t("grid setting") }} + + + + + {{ $t("close") }} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/GroupDialog.vue b/src/components/GroupDialog.vue index f23d450..6315b87 100644 --- a/src/components/GroupDialog.vue +++ b/src/components/GroupDialog.vue @@ -1,5 +1,5 @@ - + diff --git a/src/components/SignalSourceDialog.vue b/src/components/SignalSourceDialog.vue index 9a327f8..a08ab90 100644 --- a/src/components/SignalSourceDialog.vue +++ b/src/components/SignalSourceDialog.vue @@ -1,5 +1,5 @@ - + diff --git a/src/entities/ApplicationConfigEntity.ts b/src/entities/ApplicationConfigEntity.ts index ada97fa..a7094bc 100644 --- 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 = ""; } diff --git a/src/entities/HttpProtocol.ts b/src/entities/HttpProtocol.ts new file mode 100644 index 0000000..a108a83 --- /dev/null +++ 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"; +} diff --git a/src/entities/WSProtocol.ts b/src/entities/WSProtocol.ts index b1cedcf..00ba3ec 100644 --- 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 = ""; + } } diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts index acda918..7fe3494 100644 --- 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": "查看当前底图", }; diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index 97c60f7..ae25db4 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -1,46 +1,72 @@ - - - - + + + + + - - - - - - + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - SX - - - - + + + SX + + + + + + + + + + + + + + + + + + loading... + + + + + + diff --git a/src/pages/TopToolBar.vue b/src/pages/TopToolBar.vue index 7be734b..2b8752a 100644 --- 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" /> + + diff --git a/src/pages/WallPage.vue b/src/pages/WallPage.vue index c13abfa..b55b548 100644 --- 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(() => { diff --git a/src/store/index.ts b/src/store/index.ts index 7a9c781..23f75f5 100644 --- 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) { diff --git a/yarn.lock b/yarn.lock index 1be6e43..d8f4198 100644 --- 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"