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-11 10:25:35 +08:00
parent f008433166
commit e422439a2e
10 changed files with 734 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/common/ClientConnection.ts
View File

@ -1,4 +1,5 @@
import NormalWindowRequestEntity from "src/entities/NormalWindowRequestEntity";
import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
import { Protocol } from "src/entities/WSProtocol";
import EventBus, { EventNamesDefine } from "./EventBus";
@ -322,10 +323,30 @@ export default class ClientConnection {
}
}
public async addSignalSource(item: SignalSourceEntity) {
try {
return await this.doRpc<Protocol.AddSignalSourcesResponseEntity>(
new Protocol.AddSignalSourcesRequestEntity(0, item)
);
} catch (e) {
console.error(e);
}
}
public async editSignalSource(item: SignalSourceEntity) {
try {
return await this.doRpc<Protocol.EditSignalSourcesResponseEntity>(
new Protocol.EditSignalSourcesRequestEntity(0, item)
);
} catch (e) {
console.error(e);
}
}
public async deleteSignalSource(uuid: string) {
try {
return await this.doRpc<Protocol.DeleteSignalSourcesGroupResponseEntity>(
new Protocol.DeleteSignalSourcesGroupRequestEntity(0, uuid)
return await this.doRpc<Protocol.DeleteSignalSourcesResponseEntity>(
new Protocol.DeleteSignalSourcesRequestEntity(0, uuid)
);
} catch (e) {
console.error(e);

16
src/components/GroupDialog.vue
View File

@ -1,6 +1,7 @@
<template>
<q-dialog v-model="show_dialog" @before-hide="resetData">
<q-card class="overflow-hidden" style="overflow-y: scroll; width: 45vw">
<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">
<div class="row">
<div class="col-11 text-h6">
@ -128,10 +129,11 @@
flat
:label="$t('Accept')"
:loading="loading"
type="submit"
color="primary"
@click="onSubmit"
/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
@ -145,19 +147,11 @@
</style>
<script lang="ts">
import {
defineComponent,
ref,
watch,
reactive,
onUnmounted,
computed,
} from "vue";
import { defineComponent, ref, watch, computed } from "vue";
import { useStore } from "src/store";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
export default defineComponent({
name: "ComponentGroupDialog",

464
src/components/SignalSourceDialog.vue
View File

@ -1,18 +1,470 @@
<template>
<div>asda</div>
<q-dialog 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">
<div class="row">
<div class="col-11 text-h6">
{{
type == 1
? $t("add signal source")
: type == 2
? $t("edit signal source")
: type == 3
? $t("delete signal source")
: "add"
}}
</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: 45vw" class="scroll">
<q-list>
<q-item v-if="type != 2">
<q-item-label>{{ $t("parent group") }}:</q-item-label>
</q-item>
<q-item v-if="type != 2" class="q-pa-none q-ma-none">
<q-item-section style="padding-right: 10px">
<q-tree
ref="tree"
class="scroll"
:class="loading ? 'disable_tree' : ''"
v-model:selected="selected"
:nodes="tree_nodes"
default-expand-all
node-key="uuid"
labelKey="name"
filter="group filter"
:filter-method="treeNodesFilter"
>
<template v-slot:default-header="prop">
<q-item
class="full-width"
:class="
prop.tree.selected == prop.key ? 'item-selected-bg' : ''
"
>
<q-item-section avatar>
<q-icon
:name="'img:source_icon/group.png'"
color="orange"
size="28px"
class="q-mr-sm"
/>
</q-item-section>
<q-item-section>
<div class="text-weight-bold text-primary">
{{ prop.node.name }}
</div>
</q-item-section>
</q-item>
</template>
</q-tree>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input
:loading="loading"
:disable="loading"
filled
autofocus
v-model="item_data.name"
:label="$t('signal source name')"
:hint="$t('please input signal source name')"
lazy-rules
:rules="[
(val) =>
(val && val.length > 0) || $t('Please type something'),
]"
@keydown="
(evt) => {
if (evt.keyCode == 13) {
}
}
"
>
<template v-if="item_data.name" v-slot:append>
<q-icon
item_data.name="cancel"
@click.stop="item_data.name = null"
class="cursor-pointer"
/>
</template>
</q-input>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-select
:loading="loading"
:disable="loading"
filled
option-value="value"
option-label="label"
emit-value
map-options
v-model="item_data.window_type"
:options="signal_source_options"
:label="$t('signal source type')"
:hint="$t('please select signal source type')"
@update:model-value="onSelected"
@keydown="
(evt) => {
if (evt.keyCode == 13) {
}
}
"
>
</q-select>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input
:loading="loading"
:disable="loading"
filled
v-model="item_data.media_url"
:label="media_url_label"
:hint="$t('please input') + media_url_label"
lazy-rules
:rules="[
(val) =>
(val && val.length > 0) || $t('Please type something'),
]"
@keydown="
(evt) => {
if (evt.keyCode == 13) {
}
}
"
>
<template v-if="item_data.media_url" v-slot:append>
<q-icon
item_data.media_url="cancel"
@click.stop="item_data.media_url = null"
class="cursor-pointer"
/>
</template>
</q-input>
</q-item-section>
</q-item>
<q-item
v-if="item_data && item_data.window_type == 'EwindowType::Rtsp'"
>
<q-item-section>
<q-input
:loading="loading"
:disable="loading"
filled
v-model="item_data.user_name"
:label="$t('user name')"
:hint="$t('please input user name')"
lazy-rules
:rules="[
(val) =>
(val && val.length > 0) || $t('Please type something'),
]"
@keydown="
(evt) => {
if (evt.keyCode == 13) {
}
}
"
>
<template v-if="item_data.user_name" v-slot:append>
<q-icon
item_data.user_name="cancel"
@click.stop="item_data.user_name = null"
class="cursor-pointer"
/>
</template>
</q-input>
</q-item-section>
</q-item>
<q-item
v-if="item_data && item_data.window_type == 'EwindowType::Rtsp'"
>
<q-item-section>
<q-input
:loading="loading"
:disable="loading"
filled
v-model="item_data.password"
:label="$t('password')"
:hint="$t('please input password')"
lazy-rules
:rules="[
(val) =>
(val && val.length > 0) || $t('Please type something'),
]"
@keydown="
(evt) => {
if (evt.keyCode == 13) {
}
}
"
>
<template v-if="item_data.password" v-slot:append>
<q-icon
item_data.password="cancel"
@click.stop="item_data.password = null"
class="cursor-pointer"
/>
</template>
</q-input>
</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"
color="primary"
type="submit"
/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped>
.disable_tree {
background: #9e9e9e;
cursor: wait;
pointer-events: none;
}
</style>
<script lang="ts">
import { defineComponent, ref, watch, onUnmounted } from "vue";
import {
defineComponent,
ref,
watch,
reactive,
onUnmounted,
computed,
} from "vue";
import { useStore } from "src/store";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import {
SignalSourceEntity,
SignalSourceTreeItemEntity,
} from "src/entities/SignalSourceEntity";
export default defineComponent({
name: "ComponentSignalSourceDialog",
components: {},
props: {},
emits: [],
setup() {
return {};
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
let show_dialog = ref(false);
let type = ref(1);
let media_url_label = ref("URL");
let item_data: SignalSourceEntity = reactive(new SignalSourceEntity());
item_data.window_type = "EwindowType::Multimedia";
const selected: any = ref(null);
let loading = ref(false);
let suppored_window_types = new Set<string>([
"EwindowType::Multimedia",
"EwindowType::Web",
"EwindowType::Image",
"EwindowType::Rtsp",
]);
let signal_source_options = [
{
label: $t.t("multimedia file"),
value: "EwindowType::Multimedia",
},
{
label: $t.t("web"),
value: "EwindowType::Web",
},
{
label: $t.t("image"),
value: "EwindowType::Image",
},
{
label: $t.t("rtsp"),
value: "EwindowType::Rtsp",
},
];
const tree_nodes = computed({
get: () => $store.state.signal_source_tree,
set: (val) => {},
});
watch(
() => selected.value,
(newValue, oldValue) => {
if (newValue == null) {
selected.value = "";
}
}
);
watch(
() => item_data.window_type,
(newValue, oldValue) => {
if (!suppored_window_types.has(newValue)) {
item_data.window_type = "EwindowType::Multimedia";
}
}
);
const setItemData = (new_item_data?: SignalSourceEntity) => {
if (!new_item_data) {
new_item_data = new SignalSourceEntity();
}
item_data.uuid = new_item_data.uuid;
item_data.base_note = new_item_data.base_note;
item_data.name = new_item_data.name;
item_data.window_type = new_item_data.window_type;
item_data.media_url = new_item_data.media_url;
item_data.user_name = new_item_data.user_name;
item_data.password = new_item_data.password;
item_data.ext_data = new_item_data.ext_data;
item_data.group_uuid = new_item_data.group_uuid;
item_data.system_default = new_item_data.system_default;
};
const setMediaUrlLabel = (value: string) => {
switch (value) {
case "EwindowType::Web":
media_url_label.value = $t.t("http url") + ":";
break;
case "EwindowType::Rtsp":
media_url_label.value = $t.t("RTSP url") + ":";
break;
default:
media_url_label.value = $t.t("file path") + ":";
break;
}
};
const requestAddSignalSource = async () => {
item_data.group_uuid = selected.value;
let response = await GlobalData.getInstance()
.getCurrentClient()
?.addSignalSource(item_data);
if (response) {
$q.notify({
color: response.success ? "positive" : "negative",
icon: response.success ? "done" : "warning",
message:
$t.t("add signal source") +
(response.success ? $t.t("success") : $t.t("fail")) +
"!",
position: "top",
timeout: 1000,
});
}
};
const requestEditSignalSource = async () => {
item_data.group_uuid = selected.value;
let response = await GlobalData.getInstance()
.getCurrentClient()
?.editSignalSource(item_data);
if (response) {
$q.notify({
color: response.success ? "positive" : "negative",
icon: response.success ? "done" : "warning",
message:
$t.t("edit signal source") +
(response.success ? $t.t("success") : $t.t("fail")) +
"!",
position: "top",
timeout: 1000,
});
}
};
return {
show_dialog,
type,
signal_source_options,
media_url_label,
item_data,
selected,
loading,
tree_nodes,
showDialog(options: any) {
if (options) {
type.value = options.type ?? 1;
if (options.data && options.data.item_data) {
setItemData(JSON.parse(JSON.stringify(options.data.item_data)));
}
selected.value = item_data.group_uuid;
}
if (item_data) {
setMediaUrlLabel(item_data.window_type);
}
show_dialog.value = true;
},
resetData() {
loading.value = false;
selected.value = null;
setItemData();
type.value = 1;
},
treeNodesFilter(node: any, filter: any) {
return node.is_group && !node.item_data?.system_default;
},
onSelected(value: any) {
setMediaUrlLabel(value as string);
},
async onSubmit() {
loading.value = true;
try {
await (type.value == 2
? requestEditSignalSource()
: requestAddSignalSource());
show_dialog.value = false;
} catch {}
loading.value = false;
},
};
},
});
</script>

2
src/entities/SignalSourceEntity.ts
View File

@ -2,7 +2,7 @@ import BaseEntity from "./BaseEntity";
export class SignalSourceEntity extends BaseEntity {
name: string = "";
window_type: string = "";
window_type: string = "EwindowType::Normal";
media_url: string = "";
user_name: string = "";
password: string = "";

80
src/entities/WSProtocol.ts
View File

@ -77,6 +77,18 @@ export namespace Protocol {
return Commands.PROTOCOL_PREFIX + "RpcEditSignalSourceGroup";
}
public static get kRpcAddSignalSource() {
return Commands.PROTOCOL_PREFIX + "RpcAddSignalSource";
}
public static get kRpcDeleteSignalSource() {
return Commands.PROTOCOL_PREFIX + "RpcDeleteSignalSource";
}
public static get kRpcEditSignalSource() {
return Commands.PROTOCOL_PREFIX + "RpcEditSignalSource";
}
static _all_commands = new Set([
Commands.kUnKnowCommand,
Commands.kSearchDevice,
@ -96,6 +108,9 @@ export namespace Protocol {
Commands.kRpcAddSignalSourceGroup,
Commands.kRpcDeleteSignalSourceGroup,
Commands.kRpcEditSignalSourceGroup,
Commands.kRpcAddSignalSource,
Commands.kRpcDeleteSignalSource,
Commands.kRpcEditSignalSource,
]);
public static get AllCommands() {
@ -365,7 +380,70 @@ export namespace Protocol {
constructor() {
super();
this.command = Protocol.Commands.kRpcDeleteSignalSourceGroup;
this.command = Protocol.Commands.kRpcDeleteSignalSource;
}
}
export class AddSignalSourcesRequestEntity extends Protocol.PacketEntity {
entity: SignalSourceEntity | null = null;
constructor(rcp_id?: number, entity?: SignalSourceEntity) {
super();
this.rpc_id = rcp_id ?? 0;
this.command = Protocol.Commands.kRpcAddSignalSource;
this.entity = entity ?? new SignalSourceEntity();
}
}
export class AddSignalSourcesResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
super();
this.command = Protocol.Commands.kRpcAddSignalSourceGroup;
}
}
export class EditSignalSourcesRequestEntity extends Protocol.PacketEntity {
entity: SignalSourceEntity | null = null;
parent_uuid: string = "";
constructor(
rcp_id?: number,
entity?: SignalSourceEntity,
parent_uuid?: string
) {
super();
this.rpc_id = rcp_id ?? 0;
this.command = Protocol.Commands.kRpcEditSignalSource;
this.entity = entity ?? new SignalSourceEntity();
this.parent_uuid = parent_uuid ?? "";
}
}
export class EditSignalSourcesResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
super();
this.command = Protocol.Commands.kRpcEditSignalSource;
}
}
export class DeleteSignalSourcesRequestEntity extends Protocol.PacketEntity {
uuid: string = "";
constructor(rcp_id?: number, uuid?: string) {
super();
this.rpc_id = rcp_id ?? 0;
this.command = Protocol.Commands.kRpcDeleteSignalSource;
this.uuid = uuid ?? "";
}
}
export class DeleteSignalSourcesResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
super();
this.command = Protocol.Commands.kRpcDeleteSignalSource;
}
}
}

12
src/entities/WindowModelType.ts Normal file
View File

@ -0,0 +1,12 @@
export enum EWindowType {
Normal = 0,
Multimedia,
Web,
Image,
Pdf,
Ppt,
Rtsp,
Subtitles,
Weather,
HdmiIn,
}

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

@ -47,4 +47,20 @@ export default {
"group name": "组名",
"please input group name": "请输入组名",
"add signal source": "添加信号源",
"edit signal source": "修改信号源",
"signal source name": "信号源名称",
"please input signal source name": "请输入信号源名称",
"signal source type": "信号源类型",
"please select signal source type": "请选择信号源类型",
"multimedia file": "多媒体文件",
Web: "网页",
image: "图片",
rtsp: "RTSP视频流",
"media url": "媒体 RUL",
"please input media url": "请输入媒体 RUL",
"please input": "请输入",
"http url": "HTTP超链接",
"RTSP url": "RTSP链接",
"file path": "文件路径",
};

15
src/pages/LeftToolBar.vue
View File

@ -38,6 +38,12 @@
clickable
v-close-popup
v-ripple
@click="
$refs.signal_source_dialog.showDialog({
type: 1,
parent_node: prop.node.uuid,
})
"
>
<q-item-section avatar><q-icon name="add" /></q-item-section>
<q-item-section>{{
@ -76,7 +82,10 @@
"
@click="
() =>
$refs.group_dialog.showDialog({
(prop.node.is_group
? $refs.group_dialog
: $refs.signal_source_dialog
).showDialog({
type: 2,
data: prop.node,
})
@ -109,6 +118,7 @@
</q-tree>
</div>
<group-dialog ref="group_dialog" />
<signal-source-dialog ref="signal_source_dialog" />
</template>
<script lang="ts">
@ -116,6 +126,7 @@ import { defineComponent, computed } from "vue";
import { useStore } from "src/store";
import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
import GroupDialog from "src/components/GroupDialog.vue";
import SignalSourceDialog from "src/components/SignalSourceDialog.vue";
import { Common } from "src/common/Common";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
@ -124,7 +135,7 @@ import { useI18n } from "vue-i18n";
export default defineComponent({
name: "PageLeftToolBar",
components: { GroupDialog },
components: { GroupDialog, SignalSourceDialog },
setup() {
const $store = useStore();

2
src/pages/WallPage.vue
View File

@ -475,7 +475,6 @@ export default defineComponent({
},
onDragOver(e: DragEvent) {
console.log(e.dataTransfer?.items);
e.preventDefault();
},
@ -542,7 +541,6 @@ export default defineComponent({
GlobalData.getInstance().getCurrentClient()?.focusIn(window_id);
},
closeOtherWindows(window_id: number) {
console.log(window_id);
for (const window of $store.state.windows) {
if (window && window.window_id != window_id) {
GlobalData.getInstance()

1
src/store/index.ts
View File

@ -235,6 +235,7 @@ export default store(function (/* { ssrContext } */) {
state.signal_source_tree.push(root);
buildGroup(root, signal_source_groups, signal_sources);
console.log(state.signal_source_tree);
} else {
console.error(playload);
}