添加多媒体控制组件,添加轮询设置界面
This commit is contained in:
parent
63b5e0b00a
commit
0da2e1993f
|
@ -2,6 +2,7 @@ import ReconnectingWebSocket from "reconnecting-websocket";
|
|||
import NormalWindowRequestEntity from "src/entities/NormalWindowRequestEntity";
|
||||
import { PlanEntity } from "src/entities/PlanEntity";
|
||||
import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
|
||||
import { StringKeyValueEntity } from "src/entities/StringKeyValueEntity";
|
||||
import SubtitleEntity from "src/entities/SubtitleEntity";
|
||||
import { Protocol } from "src/entities/WSProtocol";
|
||||
import EventBus, { EventNamesDefine } from "./EventBus";
|
||||
|
@ -605,6 +606,7 @@ export default class ClientConnection {
|
|||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
public async setOutputBoardSetting(
|
||||
request: Protocol.SetOutputBoardSettingRequestEntity
|
||||
) {
|
||||
|
@ -616,6 +618,7 @@ export default class ClientConnection {
|
|||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
public async restoreOutputBoard() {
|
||||
try {
|
||||
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() {
|
||||
return await this.doRpc<Protocol.GetBuildInfoResponseEntity>(
|
||||
new Protocol.GetBuildInfoRequestEntity(0)
|
||||
|
|
|
@ -8,8 +8,17 @@ export default class RemoteDataExangeProcesser {
|
|||
private flag = false;
|
||||
private options: OptionsType;
|
||||
|
||||
private plan_notify: any = null;
|
||||
|
||||
constructor(options: OptionsType) {
|
||||
this.options = options;
|
||||
|
||||
EventBus.getInstance().on(EventNamesDefine.WebSocketClose, () => {
|
||||
if (this.plan_notify) {
|
||||
this.plan_notify(void 0);
|
||||
this.plan_notify = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
enable() {
|
||||
|
@ -71,18 +80,30 @@ export default class RemoteDataExangeProcesser {
|
|||
notify.data
|
||||
) as Protocol.PlanRunningStateChangeNotifyEntity;
|
||||
if (temp && temp.plan) {
|
||||
$q.notify({
|
||||
color: "positive",
|
||||
icon: "done",
|
||||
message:
|
||||
$t.t("plan") +
|
||||
" '" +
|
||||
temp.plan.name +
|
||||
" '" +
|
||||
(temp.running ? $t.t("is running") : $t.t("is stopping")),
|
||||
position: "top",
|
||||
timeout: 2000,
|
||||
});
|
||||
if (temp.running) {
|
||||
if (this.plan_notify) {
|
||||
this.plan_notify(void 0);
|
||||
this.plan_notify = null;
|
||||
}
|
||||
this.plan_notify = $q.notify({
|
||||
position: "center",
|
||||
color: "positive",
|
||||
timeout: 0, // we want to be in control when it gets dismissed
|
||||
spinner: true,
|
||||
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;
|
||||
|
|
|
@ -171,7 +171,6 @@ export default defineComponent({
|
|||
}
|
||||
} catch {}*/
|
||||
|
||||
console.log(prefix);
|
||||
let temp_str = decodeURI(new URL(item).pathname).replace(
|
||||
/\\/g,
|
||||
"/"
|
||||
|
|
|
@ -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>
|
|
@ -60,16 +60,75 @@
|
|||
>
|
||||
<q-item-section> {{ $t("close all windwos") }} </q-item-section>
|
||||
</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-popup-proxy>
|
||||
<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
|
||||
v-if="is_audo_player_window"
|
||||
:name="$props.window.muted ? 'volume_off' : 'volume_up'"
|
||||
size="1.5em"
|
||||
: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
|
||||
|
@ -303,6 +362,9 @@ export default defineComponent({
|
|||
"window_fouse_in",
|
||||
"edit_volume",
|
||||
"mute_unmute",
|
||||
"stop_polling",
|
||||
"start_polling",
|
||||
"polling_setting",
|
||||
],
|
||||
setup(props, { emit }) {
|
||||
const $store = useStore();
|
||||
|
@ -316,10 +378,15 @@ export default defineComponent({
|
|||
);
|
||||
};
|
||||
|
||||
const is_audo_player_window = computed(
|
||||
() =>
|
||||
signal_source.value.window_type == "EwindowType::Multimedia" ||
|
||||
signal_source.value.window_type == "EwindowType::HdmiIn"
|
||||
const calc_is_audio_player_window = (window_type: string) => {
|
||||
return (
|
||||
window_type == "EwindowType::Multimedia" ||
|
||||
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();
|
||||
|
@ -395,6 +462,7 @@ export default defineComponent({
|
|||
flags,
|
||||
is_audo_player_window,
|
||||
|
||||
calc_is_audio_player_window,
|
||||
onClick(evt: PointerEvent) {
|
||||
if (selected.value != true) {
|
||||
EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import BaseEntity from "./BaseEntity";
|
||||
import { SignalSourceEntity } from "./SignalSourceEntity";
|
||||
import { StringKeyValueEntity } from "./StringKeyValueEntity";
|
||||
import { Protocol } from "./WSProtocol";
|
||||
|
||||
export class MultimediaWindowEntity extends BaseEntity {
|
||||
|
@ -13,6 +14,8 @@ export class MultimediaWindowEntity extends BaseEntity {
|
|||
muted: boolean = false;
|
||||
playing: boolean = false;
|
||||
play_speed: number = 1;
|
||||
polling: boolean = false;
|
||||
polling_signal_sources: StringKeyValueEntity[] = [];
|
||||
}
|
||||
|
||||
export class WindowOpenNotifyEntity extends MultimediaWindowEntity {
|
||||
|
@ -36,4 +39,9 @@ export class WindowOpenNotifyEntity extends MultimediaWindowEntity {
|
|||
command = Protocol.Commands.kUnKnowCommand;
|
||||
|
||||
window_id: number = 0;
|
||||
|
||||
/** 轮询时的属性,不轮询时无效 */
|
||||
polling_title: string = "";
|
||||
/** 轮询时的属性,不轮询时无效 */
|
||||
polling_window_type: string = "EWindowType::Normal";
|
||||
}
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { StringKeyValueEntity } from "./StringKeyValueEntity";
|
||||
import { SignalSourceEntity } from "./SignalSourceEntity";
|
||||
import ApplicationConfigEntity from "./ApplicationConfigEntity";
|
||||
import { ModeEntity } from "./ModeEntity";
|
||||
|
@ -256,6 +257,19 @@ export namespace Protocol {
|
|||
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([
|
||||
Commands.kUnKnowCommand,
|
||||
Commands.kSearchDevice,
|
||||
|
@ -315,6 +329,11 @@ export namespace Protocol {
|
|||
Commands.kWindowPlayNext,
|
||||
Commands.kPauseWindow,
|
||||
Commands.kPlayWindow,
|
||||
Commands.kPollingStateChanged,
|
||||
Commands.kRpcSetPollingData,
|
||||
Commands.kStopPolling,
|
||||
Commands.kStartPolling,
|
||||
Commands.kPollingStateChanged,
|
||||
]);
|
||||
|
||||
public static get AllCommands() {
|
||||
|
@ -512,7 +531,7 @@ export namespace Protocol {
|
|||
width: number = 0;
|
||||
height: number = 0;
|
||||
volume: number = 80;
|
||||
muted: boolean = false;
|
||||
muted: boolean = true;
|
||||
paused: boolean = false;
|
||||
play_speed: number = 1;
|
||||
|
||||
|
@ -1490,4 +1509,67 @@ export namespace Protocol {
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,4 +6,7 @@ export default class WindowOtherStateChangeNotifyEntity extends Protocol.PacketE
|
|||
focus = false;
|
||||
muted = false;
|
||||
volume = 80;
|
||||
polling = false;
|
||||
title = "";
|
||||
window_type = "EWindowType::Normal";
|
||||
}
|
||||
|
|
|
@ -135,7 +135,6 @@ export default {
|
|||
pwa: "PWA版",
|
||||
"add plan item": "添加预案",
|
||||
"run plan directives send": "执行预案发送",
|
||||
"is running": "正在运行",
|
||||
"is stopping": "已经停止",
|
||||
"add plan": "添加预案",
|
||||
"edit plan": "修改预案",
|
||||
|
@ -292,4 +291,21 @@ export default {
|
|||
"play list": "播放列表",
|
||||
"close and save": "保存修改并关闭",
|
||||
"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": "正在运行",
|
||||
};
|
||||
|
|
|
@ -47,12 +47,8 @@
|
|||
}
|
||||
}
|
||||
"
|
||||
@click="(evt) => evt.stopPropagation()"
|
||||
>
|
||||
<right-tool-bar
|
||||
v-if="show_right_tool_bar"
|
||||
@click="(evt) => evt.stopPropagation()"
|
||||
/>
|
||||
<right-tool-bar v-if="show_right_tool_bar" />
|
||||
</div>
|
||||
</div>
|
||||
</q-page-container>
|
||||
|
|
|
@ -13,7 +13,16 @@
|
|||
>
|
||||
<div class="row q-ma-sm">
|
||||
<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 class="col-1 q-mx-md">
|
||||
<q-btn
|
||||
|
@ -21,23 +30,47 @@
|
|||
flag
|
||||
size="lg"
|
||||
v-if="!selected_window?.playing"
|
||||
:disable="!can_pause_window || plan_running"
|
||||
icon="play_arrow"
|
||||
@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 class="col-1 q-mx-md">
|
||||
<q-btn
|
||||
round
|
||||
flag
|
||||
size="lg"
|
||||
:disable="!can_next_prev_window || plan_running"
|
||||
icon="arrow_forward"
|
||||
@click="playNext"
|
||||
></q-btn>
|
||||
>
|
||||
<q-tooltip> {{ $t("play next") }}</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<q-space />
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-1 q-mx-md">
|
||||
|
@ -46,20 +79,33 @@
|
|||
flag
|
||||
size="lg"
|
||||
v-if="selected_window?.muted"
|
||||
icon="volume_off"
|
||||
:disable="plan_running"
|
||||
icon="volume_mute"
|
||||
@click="unmuteWindow"
|
||||
></q-btn>
|
||||
><q-tooltip> {{ $t("unmute") }}</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-else
|
||||
:disable="plan_running"
|
||||
round
|
||||
flag
|
||||
size="lg"
|
||||
icon="volume_mute"
|
||||
icon="volume_off"
|
||||
@click="muteWindow"
|
||||
></q-btn>
|
||||
><q-tooltip> {{ $t("mute") }}</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<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>
|
||||
|
@ -96,6 +142,31 @@ export default defineComponent({
|
|||
let selected_window: Ref<WindowOpenNotifyEntity | null> = ref(null);
|
||||
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(
|
||||
() => $store.state.selected_window,
|
||||
(newValue, oldValue) => {
|
||||
|
@ -109,9 +180,16 @@ export default defineComponent({
|
|||
element && element.uuid == window.signal_source_table_uuid
|
||||
);
|
||||
if (signal_source) {
|
||||
const type = window.polling
|
||||
? window.polling_window_type
|
||||
: signal_source.window_type;
|
||||
is_multimedia_window.value =
|
||||
signal_source.window_type == "EwindowType::Multimedia" ||
|
||||
signal_source.window_type == "EwindowType::RTSP";
|
||||
type == "EwindowType::Multimedia" || 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 {
|
||||
selected_window.value = null;
|
||||
|
@ -123,6 +201,9 @@ export default defineComponent({
|
|||
return {
|
||||
selected_window,
|
||||
is_multimedia_window,
|
||||
can_pause_window,
|
||||
can_next_prev_window,
|
||||
plan_running,
|
||||
|
||||
volumeUp(evt: MouseEvent) {
|
||||
evt.stopPropagation();
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div @click="(evt) => evt.stopPropagation()">
|
||||
<q-tabs
|
||||
v-model="tab_value"
|
||||
dense
|
||||
|
|
|
@ -19,6 +19,9 @@
|
|||
@dblclick="(evt) => windowDBClick(item.window_id)"
|
||||
@edit_volume="edit_volume"
|
||||
@mute_unmute="mute_unmute"
|
||||
@start_polling="start_polling"
|
||||
@stop_polling="stop_polling"
|
||||
@polling_setting="polling_setting"
|
||||
:ref="'window_' + item.window_id"
|
||||
:id="'window_' + item.window_id"
|
||||
v-for="(item, index) in windows"
|
||||
|
@ -86,6 +89,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<edit-volume-dialog ref="edit_volume_dialog" />
|
||||
<polling-setting-dialog ref="polling_setting_dialog" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
@ -121,17 +125,19 @@ import { useQuasar } from "quasar";
|
|||
import { NotifyMessage } from "src/common/ClientConnection";
|
||||
|
||||
import EditVolumeDialog from "src/components/EditVolumeDialog.vue";
|
||||
import PollingSettingDialog from "src/components/PollingSettingDialog.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "PageWall",
|
||||
|
||||
components: { Window, EditVolumeDialog },
|
||||
components: { Window, EditVolumeDialog, PollingSettingDialog },
|
||||
setup() {
|
||||
const $q = useQuasar();
|
||||
const $store = useStore();
|
||||
const $t = useI18n();
|
||||
|
||||
const edit_volume_dialog: Ref<any> = ref(null);
|
||||
const polling_setting_dialog: Ref<any> = ref(null);
|
||||
|
||||
const plan_running = ref(false);
|
||||
|
||||
|
@ -315,6 +321,26 @@ export default defineComponent({
|
|||
property_name: "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,
|
||||
plan_running,
|
||||
edit_volume_dialog,
|
||||
polling_setting_dialog,
|
||||
onDrop(e: DragEvent) {
|
||||
e.preventDefault();
|
||||
let target = e.target as any;
|
||||
|
@ -379,6 +406,7 @@ export default defineComponent({
|
|||
let dom: HTMLElement | null = e.target as HTMLElement;
|
||||
if (wall.value && dom) {
|
||||
if (dom.classList.contains("wall_item_flag")) {
|
||||
// 开窗
|
||||
GlobalData.getInstance()
|
||||
.getCurrentClient()
|
||||
?.openWindow(
|
||||
|
@ -395,6 +423,7 @@ export default defineComponent({
|
|||
)
|
||||
);
|
||||
} else if (dom.classList.contains("window_flag")) {
|
||||
// 替换窗口
|
||||
let uuid = dom.getAttribute("uuid");
|
||||
if (uuid) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue