添加多媒体控制组件,添加轮询设置界面

This commit is contained in:
fangxiang 2022-01-19 19:28:03 +08:00
parent 63b5e0b00a
commit 0da2e1993f
13 changed files with 738 additions and 43 deletions

View File

@ -2,6 +2,7 @@ import ReconnectingWebSocket from "reconnecting-websocket";
import NormalWindowRequestEntity from "src/entities/NormalWindowRequestEntity"; import NormalWindowRequestEntity from "src/entities/NormalWindowRequestEntity";
import { PlanEntity } from "src/entities/PlanEntity"; import { PlanEntity } from "src/entities/PlanEntity";
import { SignalSourceEntity } from "src/entities/SignalSourceEntity"; import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
import { StringKeyValueEntity } from "src/entities/StringKeyValueEntity";
import SubtitleEntity from "src/entities/SubtitleEntity"; import SubtitleEntity from "src/entities/SubtitleEntity";
import { Protocol } from "src/entities/WSProtocol"; import { Protocol } from "src/entities/WSProtocol";
import EventBus, { EventNamesDefine } from "./EventBus"; import EventBus, { EventNamesDefine } from "./EventBus";
@ -605,6 +606,7 @@ export default class ClientConnection {
console.error(e); console.error(e);
} }
} }
public async setOutputBoardSetting( public async setOutputBoardSetting(
request: Protocol.SetOutputBoardSettingRequestEntity request: Protocol.SetOutputBoardSettingRequestEntity
) { ) {
@ -616,6 +618,7 @@ export default class ClientConnection {
console.error(e); console.error(e);
} }
} }
public async restoreOutputBoard() { public async restoreOutputBoard() {
try { try {
return await this.doRpc<Protocol.RestoreOutputBoardResponseEntity>( return await this.doRpc<Protocol.RestoreOutputBoardResponseEntity>(
@ -669,6 +672,27 @@ export default class ClientConnection {
); );
} }
public async startPolling(window_id: number) {
this.ws?.send(
JSON.stringify(new Protocol.StartPollingRequestEntity(window_id))
);
}
public async stopPolling(window_id: number) {
this.ws?.send(
JSON.stringify(new Protocol.StopPollingRequestEntity(window_id))
);
}
public async setPollingData(
window_id: number,
datas?: StringKeyValueEntity[]
) {
return await this.doRpc<Protocol.SetPollingDataResponseEntity>(
new Protocol.SetPollingDataRequestEntity(window_id, datas)
);
}
public async getBuildInfo() { public async getBuildInfo() {
return await this.doRpc<Protocol.GetBuildInfoResponseEntity>( return await this.doRpc<Protocol.GetBuildInfoResponseEntity>(
new Protocol.GetBuildInfoRequestEntity(0) new Protocol.GetBuildInfoRequestEntity(0)

View File

@ -8,8 +8,17 @@ export default class RemoteDataExangeProcesser {
private flag = false; private flag = false;
private options: OptionsType; private options: OptionsType;
private plan_notify: any = null;
constructor(options: OptionsType) { constructor(options: OptionsType) {
this.options = options; this.options = options;
EventBus.getInstance().on(EventNamesDefine.WebSocketClose, () => {
if (this.plan_notify) {
this.plan_notify(void 0);
this.plan_notify = null;
}
});
} }
enable() { enable() {
@ -71,18 +80,30 @@ export default class RemoteDataExangeProcesser {
notify.data notify.data
) as Protocol.PlanRunningStateChangeNotifyEntity; ) as Protocol.PlanRunningStateChangeNotifyEntity;
if (temp && temp.plan) { if (temp && temp.plan) {
$q.notify({ if (temp.running) {
color: "positive", if (this.plan_notify) {
icon: "done", this.plan_notify(void 0);
message: this.plan_notify = null;
$t.t("plan") + }
" '" + this.plan_notify = $q.notify({
temp.plan.name + position: "center",
" '" + color: "positive",
(temp.running ? $t.t("is running") : $t.t("is stopping")), timeout: 0, // we want to be in control when it gets dismissed
position: "top", spinner: true,
timeout: 2000, message:
}); $t.t("plan") +
": " +
temp.plan.name +
" " +
$t.t("running now") +
"!",
});
} else {
if (this.plan_notify) {
this.plan_notify(void 0);
this.plan_notify = null;
}
}
} }
} }
break; break;

View File

@ -171,7 +171,6 @@ export default defineComponent({
} }
} catch {}*/ } catch {}*/
console.log(prefix);
let temp_str = decodeURI(new URL(item).pathname).replace( let temp_str = decodeURI(new URL(item).pathname).replace(
/\\/g, /\\/g,
"/" "/"

View File

@ -0,0 +1,304 @@
<template>
<q-dialog persistent v-model="show_dialog" @before-hide="resetData">
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 50vw">
<q-form @submit="onSubmit">
<q-card-section class="q-ma-none q-pa-sm">
<div class="row">
<div class="col-auto text-h6">
{{ $t("polling setting") }}
</div>
<q-space />
<div>
<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: 70vh; width: 50vw" class="scroll">
<q-list>
<q-item>
<q-item-section>
<q-table
style="height: 50vh"
:rows="datas"
:columns="columns"
virtual-scroll
:title="$t('polling data') + ':'"
hide-bottom
color="primary"
row-key="name"
:loading="loading"
:rows-per-page-options="[0]"
:virtual-scroll-sticky-size-start="48"
@row-contextmenu="onContextMenu"
>
<template v-slot:loading>
<q-inner-loading showing color="primary" />
</template>
<template v-slot:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'value'">
<div v-if="props.pageIndex % 2">
{{ props.value }}{{ $t("s") }}
<q-popup-edit v-model="props.row.value">
<q-input
type="number"
v-model="props.row.value"
:min="min_delay"
dense
autofocus
>
<template v-slot:append>
<span>{{ $t("s") }}</span>
</template>
</q-input>
</q-popup-edit>
</div>
<div v-else>
<q-popup-edit v-model="props.row.value">
<q-select
:options="signals"
option-label="name"
option-value="uuid"
emit-value
map-options
v-model="props.row.value"
>
</q-select>
</q-popup-edit>
{{
signals.find(
(element) =>
element && element.uuid == props.row.value
)?.name ?? ""
}}
</div>
</div>
<div v-else>
{{ $t(props.value) }}
</div>
</q-td>
</template>
</q-table>
</q-item-section>
</q-item>
</q-list>
</q-card-section>
<q-separator />
<q-card-actions align="left">
<q-btn
:loading="loading"
flat
:label="$t('add row')"
color="primary"
@click="addRow"
/>
<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>
<div>
<q-menu :target="target_dom" v-model="show_context_menu">
<q-list>
<q-item clickable v-close-popup @click="(evt) => deleteRow()">
<q-item-section avatar
><q-icon name="delete" color="red"
/></q-item-section>
<q-item-section>{{ $t("delete row") }}</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="(evt) => addRow()">
<q-item-section avatar><q-icon name="add" /></q-item-section>
<q-item-section>{{ $t("add row") }}</q-item-section>
</q-item>
</q-list>
</q-menu>
</div>
</template>
<style scoped>
.disable_tree {
background: #9e9e9e;
cursor: wait;
pointer-events: none;
}
.width_5_1 {
width: 18%;
}
</style>
<script lang="ts">
import { defineComponent, ref, 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 { StringKeyValueEntity } from "src/entities/StringKeyValueEntity";
import { PlanEntity } from "src/entities/PlanEntity";
import { resolve } from "dns";
const __MIN_DELAY = 10;
export default defineComponent({
name: "ComponentPollingSettingDialog",
setup() {
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
const min_delay = ref(__MIN_DELAY);
let show_dialog = ref(false);
let loading = ref(false);
let datas: Ref<StringKeyValueEntity[]> = ref([]);
let signals = ref(GlobalData.getInstance().signal_source);
const columns = [
{
align: "left",
name: "key",
required: true,
label: $t.t("operator"),
field: "key",
sortable: false,
},
{
align: "left",
name: "value",
label: $t.t("operator value"),
field: "value",
sortable: false,
},
];
let show_context_menu = ref(false);
let target_dom: any = ref(document.body.children[0]);
let current_index = 0;
let _resolve: any = null;
return {
show_dialog,
min_delay,
loading,
datas,
columns,
show_context_menu,
target_dom,
signals,
loga(a: any) {
console.log(a);
},
showDialog(options: StringKeyValueEntity[] | null) {
show_dialog.value = true;
if (options) {
datas.value = [];
for (const item of options) {
datas.value.push(item);
}
}
},
showDialogAsync(options: StringKeyValueEntity[] | null) {
return new Promise((resolve) => {
if (_resolve) {
_resolve();
_resolve = null;
}
_resolve = resolve;
show_dialog.value = true;
if (options) {
datas.value = [];
for (const item of options) {
datas.value.push(item);
}
signals.value = GlobalData.getInstance().signal_source;
}
});
},
resetData() {
loading.value = false;
if (_resolve) {
_resolve();
_resolve = null;
}
},
addRow() {
datas.value.push({
key: "operator_signal_source",
value: GlobalData.getInstance().signal_source[0].uuid,
});
datas.value.push({
key: "param_delay",
value: __MIN_DELAY.toString(),
});
signals.value = GlobalData.getInstance().signal_source;
},
onContextMenu(
evt: PointerEvent,
row: StringKeyValueEntity,
index: number
) {
evt.preventDefault();
evt.stopPropagation();
target_dom.value = evt.srcElement;
if (row) {
current_index = index;
show_context_menu.value = true;
}
},
deleteRow() {
if (datas.value.length > current_index) {
const start = Math.floor(current_index / 2);
if (!isNaN(start)) {
datas.value.splice(start, 2);
}
}
},
async onSubmit() {
loading.value = true;
try {
if (_resolve) {
_resolve(datas.value);
_resolve = null;
}
show_dialog.value = false;
} catch {}
loading.value = false;
},
};
},
});
</script>

View File

@ -60,16 +60,75 @@
> >
<q-item-section> {{ $t("close all windwos") }} </q-item-section> <q-item-section> {{ $t("close all windwos") }} </q-item-section>
</q-item> </q-item>
<q-item
clickable
v-close-popup
:disable="$props.disable"
@click="$emit('start_polling', $props.window.window_id)"
v-if="!$props.window.polling"
>
<q-item-section> {{ $t("start polling") }} </q-item-section>
</q-item>
<q-item
clickable
v-close-popup
:disable="$props.disable"
@click="$emit('stop_polling', $props.window.window_id)"
v-else
>
<q-item-section>
{{ $t("stop polling") }}
</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
:disable="$props.disable || $props.window.polling"
@click="$emit('polling_setting', $props.window.window_id)"
>
<q-item-section> {{ $t("polling setting") }} </q-item-section>
</q-item>
</q-list> </q-list>
</q-popup-proxy> </q-popup-proxy>
<div class="row title_bar full-width"> <div class="row title_bar full-width">
<q-icon :name="getItemIcon(signal_source.window_type)" class="q-mr-xs" />
<span>{{ signal_source.name }}</span>
<q-space />
<q-icon <q-icon
v-if="is_audo_player_window" size="1.5em"
:name="$props.window.muted ? 'volume_off' : 'volume_up'" :name="
getItemIcon(
$props.window.polling
? $props.window.polling_window_type
: signal_source.window_type
)
"
class="q-mr-xs"
/> />
<span v-if="$props.window.polling">{{
$props.window.polling_title
}}</span>
<span v-else>{{ signal_source.name }}</span>
<q-space />
<div>
<q-spinner-box
v-if="$props.window.polling"
color="primary"
size="1.5em"
/>
<q-tooltip>{{ $t("polling now") }}</q-tooltip>
</div>
<div>
<q-icon
v-if="
$props.window.polling
? calc_is_audio_player_window($props.window.polling_window_type)
: is_audo_player_window
"
size="1.5em"
:name="$props.window.muted ? 'volume_off' : 'volume_up'"
/>
<q-tooltip>{{
$t($props.window.muted ? "muted now" : "unmuted now")
}}</q-tooltip>
</div>
</div> </div>
<div <div
@ -303,6 +362,9 @@ export default defineComponent({
"window_fouse_in", "window_fouse_in",
"edit_volume", "edit_volume",
"mute_unmute", "mute_unmute",
"stop_polling",
"start_polling",
"polling_setting",
], ],
setup(props, { emit }) { setup(props, { emit }) {
const $store = useStore(); const $store = useStore();
@ -316,10 +378,15 @@ export default defineComponent({
); );
}; };
const is_audo_player_window = computed( const calc_is_audio_player_window = (window_type: string) => {
() => return (
signal_source.value.window_type == "EwindowType::Multimedia" || window_type == "EwindowType::Multimedia" ||
signal_source.value.window_type == "EwindowType::HdmiIn" window_type == "EwindowType::Rtsp" ||
window_type == "EwindowType::HdmiIn"
);
};
const is_audo_player_window = computed(() =>
calc_is_audio_player_window(signal_source.value.window_type)
); );
reload_signal_source(); reload_signal_source();
@ -395,6 +462,7 @@ export default defineComponent({
flags, flags,
is_audo_player_window, is_audo_player_window,
calc_is_audio_player_window,
onClick(evt: PointerEvent) { onClick(evt: PointerEvent) {
if (selected.value != true) { if (selected.value != true) {
EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows); EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);

View File

@ -1,5 +1,6 @@
import BaseEntity from "./BaseEntity"; import BaseEntity from "./BaseEntity";
import { SignalSourceEntity } from "./SignalSourceEntity"; import { SignalSourceEntity } from "./SignalSourceEntity";
import { StringKeyValueEntity } from "./StringKeyValueEntity";
import { Protocol } from "./WSProtocol"; import { Protocol } from "./WSProtocol";
export class MultimediaWindowEntity extends BaseEntity { export class MultimediaWindowEntity extends BaseEntity {
@ -13,6 +14,8 @@ export class MultimediaWindowEntity extends BaseEntity {
muted: boolean = false; muted: boolean = false;
playing: boolean = false; playing: boolean = false;
play_speed: number = 1; play_speed: number = 1;
polling: boolean = false;
polling_signal_sources: StringKeyValueEntity[] = [];
} }
export class WindowOpenNotifyEntity extends MultimediaWindowEntity { export class WindowOpenNotifyEntity extends MultimediaWindowEntity {
@ -36,4 +39,9 @@ export class WindowOpenNotifyEntity extends MultimediaWindowEntity {
command = Protocol.Commands.kUnKnowCommand; command = Protocol.Commands.kUnKnowCommand;
window_id: number = 0; window_id: number = 0;
/** 轮询时的属性,不轮询时无效 */
polling_title: string = "";
/** 轮询时的属性,不轮询时无效 */
polling_window_type: string = "EWindowType::Normal";
} }

View File

@ -1,3 +1,4 @@
import { StringKeyValueEntity } from "./StringKeyValueEntity";
import { SignalSourceEntity } from "./SignalSourceEntity"; import { SignalSourceEntity } from "./SignalSourceEntity";
import ApplicationConfigEntity from "./ApplicationConfigEntity"; import ApplicationConfigEntity from "./ApplicationConfigEntity";
import { ModeEntity } from "./ModeEntity"; import { ModeEntity } from "./ModeEntity";
@ -256,6 +257,19 @@ export namespace Protocol {
return Commands.PROTOCOL_PREFIX + "PlayPrev"; return Commands.PROTOCOL_PREFIX + "PlayPrev";
} }
public static get kStartPolling() {
return Commands.PROTOCOL_PREFIX + "StartPolling";
}
public static get kStopPolling() {
return Commands.PROTOCOL_PREFIX + "StopPolling";
}
public static get kRpcSetPollingData() {
return Commands.PROTOCOL_PREFIX + "RpcSetPollingData";
}
public static get kPollingStateChanged() {
return Commands.PROTOCOL_PREFIX + "PollingStateChanged";
}
static _all_commands = new Set([ static _all_commands = new Set([
Commands.kUnKnowCommand, Commands.kUnKnowCommand,
Commands.kSearchDevice, Commands.kSearchDevice,
@ -315,6 +329,11 @@ export namespace Protocol {
Commands.kWindowPlayNext, Commands.kWindowPlayNext,
Commands.kPauseWindow, Commands.kPauseWindow,
Commands.kPlayWindow, Commands.kPlayWindow,
Commands.kPollingStateChanged,
Commands.kRpcSetPollingData,
Commands.kStopPolling,
Commands.kStartPolling,
Commands.kPollingStateChanged,
]); ]);
public static get AllCommands() { public static get AllCommands() {
@ -512,7 +531,7 @@ export namespace Protocol {
width: number = 0; width: number = 0;
height: number = 0; height: number = 0;
volume: number = 80; volume: number = 80;
muted: boolean = false; muted: boolean = true;
paused: boolean = false; paused: boolean = false;
play_speed: number = 1; play_speed: number = 1;
@ -1490,4 +1509,67 @@ export namespace Protocol {
this.command = Commands.kFanTemperature; this.command = Commands.kFanTemperature;
} }
} }
export class SetPollingDataRequestEntity extends Protocol.PacketEntity {
datas: StringKeyValueEntity[] = [];
window_id: number = 0;
constructor(
window_id: number,
datas?: StringKeyValueEntity[],
rcp_id?: number
) {
super();
this.rpc_id = rcp_id ?? 0;
this.command = Protocol.Commands.kRpcSetPollingData;
if (Array.isArray(datas)) {
if (datas.length % 2) {
datas.splice(datas.length - 1, 1);
}
this.datas = datas;
}
this.window_id = window_id;
}
}
export class SetPollingDataResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
super();
this.command = Protocol.Commands.kRpcSetPollingData;
}
}
export class StartPollingRequestEntity extends PacketEntity {
window_id: number;
constructor(window_id: number) {
super();
this.rpc_id = 0;
this.command = Commands.kStartPolling;
this.window_id = window_id;
}
}
export class StopPollingRequestEntity extends PacketEntity {
window_id: number;
constructor(window_id: number) {
super();
this.rpc_id = 0;
this.command = Commands.kStopPolling;
this.window_id = window_id;
}
}
export class PollingStateChangeNotifyEntity extends PacketEntity {
window_id: number = 0;
polling: boolean = false;
window_type: string = "EwindowType::Normal";
title: string = "";
constructor() {
super();
this.command = Commands.kPollingStateChanged;
}
}
} }

View File

@ -6,4 +6,7 @@ export default class WindowOtherStateChangeNotifyEntity extends Protocol.PacketE
focus = false; focus = false;
muted = false; muted = false;
volume = 80; volume = 80;
polling = false;
title = "";
window_type = "EWindowType::Normal";
} }

View File

@ -135,7 +135,6 @@ export default {
pwa: "PWA版", pwa: "PWA版",
"add plan item": "添加预案", "add plan item": "添加预案",
"run plan directives send": "执行预案发送", "run plan directives send": "执行预案发送",
"is running": "正在运行",
"is stopping": "已经停止", "is stopping": "已经停止",
"add plan": "添加预案", "add plan": "添加预案",
"edit plan": "修改预案", "edit plan": "修改预案",
@ -292,4 +291,21 @@ export default {
"play list": "播放列表", "play list": "播放列表",
"close and save": "保存修改并关闭", "close and save": "保存修改并关闭",
"close and reset": "放弃修改并关闭", "close and reset": "放弃修改并关闭",
operator_signal_source: "信号源",
"play prev": "上一曲",
"play next": "上一曲",
play: "播放",
pause: "暂停",
"volume up": "音量加",
"volume down": "音量减",
"start polling": "开启轮询",
"stop polling": "停止轮询",
"polling setting": "轮询设置",
"polling data": "轮询数据",
"set polling data": "设置轮询数据",
"please stop polling first": "请先停止轮询",
"muted now": "现在静音",
"unmuted now": "现在没有静音",
"polling now": "正在轮询窗口",
"running now": "正在运行",
}; };

View File

@ -47,12 +47,8 @@
} }
} }
" "
@click="(evt) => evt.stopPropagation()"
> >
<right-tool-bar <right-tool-bar v-if="show_right_tool_bar" />
v-if="show_right_tool_bar"
@click="(evt) => evt.stopPropagation()"
/>
</div> </div>
</div> </div>
</q-page-container> </q-page-container>

View File

@ -13,7 +13,16 @@
> >
<div class="row q-ma-sm"> <div class="row q-ma-sm">
<div class="col-1 q-mx-md"> <div class="col-1 q-mx-md">
<q-btn round flag size="lg" icon="arrow_back" @click="playPrev"></q-btn> <q-btn
round
flag
size="lg"
icon="arrow_back"
:disable="!can_next_prev_window || plan_running"
@click="playPrev"
>
<q-tooltip> {{ $t("play prev") }}</q-tooltip>
</q-btn>
</div> </div>
<div class="col-1 q-mx-md"> <div class="col-1 q-mx-md">
<q-btn <q-btn
@ -21,23 +30,47 @@
flag flag
size="lg" size="lg"
v-if="!selected_window?.playing" v-if="!selected_window?.playing"
:disable="!can_pause_window || plan_running"
icon="play_arrow" icon="play_arrow"
@click="play" @click="play"
></q-btn> >
<q-btn v-else round flag size="lg" icon="pause" @click="pause"></q-btn> <q-tooltip> {{ $t("play") }}</q-tooltip></q-btn
>
<q-btn
:disable="!can_pause_window || plan_running"
v-else
round
flag
size="lg"
icon="pause"
@click="pause"
>
<q-tooltip> {{ $t("pause") }}</q-tooltip></q-btn
>
</div> </div>
<div class="col-1 q-mx-md"> <div class="col-1 q-mx-md">
<q-btn <q-btn
round round
flag flag
size="lg" size="lg"
:disable="!can_next_prev_window || plan_running"
icon="arrow_forward" icon="arrow_forward"
@click="playNext" @click="playNext"
></q-btn> >
<q-tooltip> {{ $t("play next") }}</q-tooltip></q-btn
>
</div> </div>
<q-space /> <q-space />
<div class="col-1 q-mx-md"> <div class="col-1 q-mx-md">
<q-btn round flag size="lg" icon="volume_down" @click="volumeDown"> <q-btn
:disable="plan_running"
round
flag
size="lg"
icon="volume_down"
@click="volumeDown"
>
<q-tooltip> {{ $t("volume down") }}</q-tooltip>
</q-btn> </q-btn>
</div> </div>
<div class="col-1 q-mx-md"> <div class="col-1 q-mx-md">
@ -46,20 +79,33 @@
flag flag
size="lg" size="lg"
v-if="selected_window?.muted" v-if="selected_window?.muted"
icon="volume_off" :disable="plan_running"
icon="volume_mute"
@click="unmuteWindow" @click="unmuteWindow"
></q-btn> ><q-tooltip> {{ $t("unmute") }}</q-tooltip></q-btn
>
<q-btn <q-btn
v-else v-else
:disable="plan_running"
round round
flag flag
size="lg" size="lg"
icon="volume_mute" icon="volume_off"
@click="muteWindow" @click="muteWindow"
></q-btn> ><q-tooltip> {{ $t("mute") }}</q-tooltip></q-btn
>
</div> </div>
<div class="col-1 q-mx-md"> <div class="col-1 q-mx-md">
<q-btn round flag size="lg" icon="volume_up" @click="volumeUp"></q-btn> <q-btn
:disable="plan_running"
round
flag
size="lg"
icon="volume_up"
@click="volumeUp"
>
<q-tooltip> {{ $t("volume up") }}</q-tooltip>
</q-btn>
</div> </div>
</div> </div>
</div> </div>
@ -96,6 +142,31 @@ export default defineComponent({
let selected_window: Ref<WindowOpenNotifyEntity | null> = ref(null); let selected_window: Ref<WindowOpenNotifyEntity | null> = ref(null);
let is_multimedia_window = ref(false); let is_multimedia_window = ref(false);
let can_pause_window = ref(false);
let can_next_prev_window = ref(false);
let plan_running = ref(false);
EventBus.getInstance().on(
EventNamesDefine.NotifyMessage,
(notify: NotifyMessage) => {
if (notify) {
switch (notify.packet.command) {
case Protocol.Commands.kCurrentRunningPlanStateChanged:
{
const temp = JSON.parse(
notify.data
) as Protocol.PlanRunningStateChangeNotifyEntity;
if (temp && temp.plan) {
plan_running.value = temp.running;
}
}
break;
}
}
}
);
watch( watch(
() => $store.state.selected_window, () => $store.state.selected_window,
(newValue, oldValue) => { (newValue, oldValue) => {
@ -109,9 +180,16 @@ export default defineComponent({
element && element.uuid == window.signal_source_table_uuid element && element.uuid == window.signal_source_table_uuid
); );
if (signal_source) { if (signal_source) {
const type = window.polling
? window.polling_window_type
: signal_source.window_type;
is_multimedia_window.value = is_multimedia_window.value =
signal_source.window_type == "EwindowType::Multimedia" || type == "EwindowType::Multimedia" || type == "EwindowType::Rtsp";
signal_source.window_type == "EwindowType::RTSP";
can_pause_window.value = type == "EwindowType::Multimedia";
console.log(type);
can_next_prev_window.value = type == "EwindowType::Multimedia";
console.log(can_next_prev_window.value);
} }
} else { } else {
selected_window.value = null; selected_window.value = null;
@ -123,6 +201,9 @@ export default defineComponent({
return { return {
selected_window, selected_window,
is_multimedia_window, is_multimedia_window,
can_pause_window,
can_next_prev_window,
plan_running,
volumeUp(evt: MouseEvent) { volumeUp(evt: MouseEvent) {
evt.stopPropagation(); evt.stopPropagation();

View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div @click="(evt) => evt.stopPropagation()">
<q-tabs <q-tabs
v-model="tab_value" v-model="tab_value"
dense dense

View File

@ -19,6 +19,9 @@
@dblclick="(evt) => windowDBClick(item.window_id)" @dblclick="(evt) => windowDBClick(item.window_id)"
@edit_volume="edit_volume" @edit_volume="edit_volume"
@mute_unmute="mute_unmute" @mute_unmute="mute_unmute"
@start_polling="start_polling"
@stop_polling="stop_polling"
@polling_setting="polling_setting"
:ref="'window_' + item.window_id" :ref="'window_' + item.window_id"
:id="'window_' + item.window_id" :id="'window_' + item.window_id"
v-for="(item, index) in windows" v-for="(item, index) in windows"
@ -86,6 +89,7 @@
</div> </div>
</div> </div>
<edit-volume-dialog ref="edit_volume_dialog" /> <edit-volume-dialog ref="edit_volume_dialog" />
<polling-setting-dialog ref="polling_setting_dialog" />
</template> </template>
<style scoped> <style scoped>
@ -121,17 +125,19 @@ import { useQuasar } from "quasar";
import { NotifyMessage } from "src/common/ClientConnection"; import { NotifyMessage } from "src/common/ClientConnection";
import EditVolumeDialog from "src/components/EditVolumeDialog.vue"; import EditVolumeDialog from "src/components/EditVolumeDialog.vue";
import PollingSettingDialog from "src/components/PollingSettingDialog.vue";
export default defineComponent({ export default defineComponent({
name: "PageWall", name: "PageWall",
components: { Window, EditVolumeDialog }, components: { Window, EditVolumeDialog, PollingSettingDialog },
setup() { setup() {
const $q = useQuasar(); const $q = useQuasar();
const $store = useStore(); const $store = useStore();
const $t = useI18n(); const $t = useI18n();
const edit_volume_dialog: Ref<any> = ref(null); const edit_volume_dialog: Ref<any> = ref(null);
const polling_setting_dialog: Ref<any> = ref(null);
const plan_running = ref(false); const plan_running = ref(false);
@ -315,6 +321,26 @@ export default defineComponent({
property_name: "volume", property_name: "volume",
value: temp.volume, value: temp.volume,
}, },
{
window,
property_name: "volume",
value: temp.volume,
},
{
window,
property_name: "polling",
value: temp.polling,
},
{
window,
property_name: "polling_title",
value: temp.title,
},
{
window,
property_name: "polling_window_type",
value: temp.window_type,
},
]); ]);
} }
} }
@ -360,6 +386,7 @@ export default defineComponent({
wall_height_scaler, wall_height_scaler,
plan_running, plan_running,
edit_volume_dialog, edit_volume_dialog,
polling_setting_dialog,
onDrop(e: DragEvent) { onDrop(e: DragEvent) {
e.preventDefault(); e.preventDefault();
let target = e.target as any; let target = e.target as any;
@ -379,6 +406,7 @@ export default defineComponent({
let dom: HTMLElement | null = e.target as HTMLElement; let dom: HTMLElement | null = e.target as HTMLElement;
if (wall.value && dom) { if (wall.value && dom) {
if (dom.classList.contains("wall_item_flag")) { if (dom.classList.contains("wall_item_flag")) {
//
GlobalData.getInstance() GlobalData.getInstance()
.getCurrentClient() .getCurrentClient()
?.openWindow( ?.openWindow(
@ -395,6 +423,7 @@ export default defineComponent({
) )
); );
} else if (dom.classList.contains("window_flag")) { } else if (dom.classList.contains("window_flag")) {
//
let uuid = dom.getAttribute("uuid"); let uuid = dom.getAttribute("uuid");
if (uuid) { if (uuid) {
let window = $store.state.windows.find( let window = $store.state.windows.find(
@ -570,6 +599,70 @@ export default defineComponent({
} }
} }
}, },
start_polling(window_id: number) {
const window = windows.value.find(
(element) => element && element.window_id == window_id
);
if (window) {
GlobalData.getInstance().getCurrentClient()?.startPolling(window_id);
}
},
stop_polling(window_id: number) {
const window = windows.value.find(
(element) => element && element.window_id == window_id
);
if (window) {
GlobalData.getInstance().getCurrentClient()?.stopPolling(window_id);
}
},
async polling_setting(window_id: number) {
const window = windows.value.find(
(element) => element && element.window_id == window_id
);
if (window) {
if (window.polling) {
$q.notify({
color: "positive",
icon: "done",
message: $t.t("please stop polling first") + "!",
position: "top",
timeout: 1500,
});
return;
}
const datas = await polling_setting_dialog.value.showDialogAsync(
window.polling_signal_sources
);
if (datas) {
try {
const resposne = await GlobalData.getInstance()
.getCurrentClient()
?.setPollingData(window_id, datas);
if (resposne) {
if (resposne.success) {
$q.notify({
color: "positive",
icon: "done",
message: $t.t("set polling data") + $t.t("success") + "!",
position: "top",
timeout: 1500,
});
} else {
$q.notify({
color: "negative",
icon: "warning",
message: $t.t("set polling data") + $t.t("failed") + "!",
position: "top",
timeout: 1500,
});
}
}
} catch (e) {
console.log(e);
}
}
}
},
}; };
}, },
}); });