lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
fangxiang 2021-08-13 16:50:03 +08:00
parent af4271c339
commit 7d84ef3cbc
18 changed files with 566 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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"
},

2
quasar.conf.js
View File

@ -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"],

9
src/boot/axios.ts
View File

@ -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

12
src/boot/v-viewer.ts Normal file
View File

@ -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,
},
});
});

21
src/common/ClientConnection.ts
View File

@ -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;

209
src/components/BackgroundImageDialog.vue Normal file
View File

@ -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>

133
src/components/GridSettingDialog.vue Normal file
View File

@ -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>

2
src/components/GroupDialog.vue
View File

@ -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">

2
src/components/SignalSourceDialog.vue
View File

@ -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">

3
src/entities/ApplicationConfigEntity.ts
View File

@ -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 = "";
}

13
src/entities/HttpProtocol.ts Normal file
View File

@ -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";
}

22
src/entities/WSProtocol.ts
View File

@ -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 = "";
}
}

8
src/i18n/zh-CN/index.ts
View File

@ -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": "查看当前底图",
};

28
src/layouts/MainLayout.vue
View File

@ -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>

57
src/pages/TopToolBar.vue
View File

@ -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>

4
src/pages/WallPage.vue
View File

@ -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(() => {

7
src/store/index.ts
View File

@ -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) {

13
yarn.lock
View File

@ -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"