增加模式,预案,轮询功能。增加全屏切换功能。

This commit is contained in:
fangxiang 2022-04-20 10:56:33 +08:00
parent 679602f662
commit 7237cc4e96
13 changed files with 411 additions and 202 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

Before

Width:  |  Height:  |  Size: 380 B

After

Width:  |  Height:  |  Size: 380 B

View File

Before

Width:  |  Height:  |  Size: 387 B

After

Width:  |  Height:  |  Size: 387 B

View File

Before

Width:  |  Height:  |  Size: 406 B

After

Width:  |  Height:  |  Size: 406 B

View File

Before

Width:  |  Height:  |  Size: 502 B

After

Width:  |  Height:  |  Size: 502 B

View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -470,4 +470,5 @@ export default {
"number must between": "数字必须在", "number must between": "数字必须在",
CN_BERWEEN_SUFFIX: "之间", CN_BERWEEN_SUFFIX: "之间",
"full screen": "全屏", "full screen": "全屏",
"exit full screen": "退出全屏",
}; };

View File

@ -78,15 +78,84 @@
</draggable> </draggable>
</q-scroll-area> </q-scroll-area>
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="singal_polling" class="full-width __panel_item"> <q-tab-panel
singal_pollingsingal_pollingsingal_pollingsingal_polling name="singal_polling"
class="full-width __panel_item q-pa-xs"
>
<q-scroll-area class="fit q-pr-md">
<draggable
class="row q-px-md"
v-model="pollings"
group="polling"
item-key="uuid"
:move="() => false"
@drop="onPollingDrop($event)"
>
<template #item="{ element }">
<div class="col-4 q-pr-sm q-pb-sm">
<q-btn
class="col-row fit overflow-hidden bg-accent text-white"
icon="img:pad/polling_icon.png"
>
<span class="col q-ml-md text-left">
{{ element.name }}
</span>
</q-btn>
</div>
</template>
</draggable>
</q-scroll-area>
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="mode" class="full-width __panel_item"> <q-tab-panel name="mode" class="full-width __panel_item q-pa-xs">
modemodemodemodemode <q-scroll-area class="fit q-pr-md">
<draggable
class="row q-px-md"
v-model="modes"
group="mode"
item-key="uuid"
:move="() => false"
@drop="onModeDrop($event)"
>
<template #item="{ element }">
<div class="col-4 q-pr-sm q-pb-sm">
<q-btn
class="col-row fit overflow-hidden bg-accent text-white"
icon="img:pad/mode_icon.png"
>
<span class="col q-ml-md text-left">
{{ element.name }}
</span>
</q-btn>
</div>
</template>
</draggable>
</q-scroll-area>
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="plan" class="full-width __panel_item"> <q-tab-panel name="plan" class="full-width __panel_item q-pa-xs">
planplanplanplanplanplanplan <q-scroll-area class="fit q-pr-md">
<draggable
class="row q-px-md"
v-model="plans"
group="plans"
item-key="uuid"
:move="() => false"
@drop="onPlanDrop($event)"
>
<template #item="{ element }">
<div class="col-4 q-pr-sm q-pb-sm">
<q-btn
class="col-row fit overflow-hidden bg-accent text-white"
icon="img:pad/plan_icon.png"
>
<span class="col q-ml-md text-left">
{{ element.name }}
</span>
</q-btn>
</div>
</template>
</draggable>
</q-scroll-area>
</q-tab-panel> </q-tab-panel>
</q-tab-panels> </q-tab-panels>
</div> </div>
@ -262,6 +331,26 @@ export default defineComponent({
} }
); );
const emit_drop_events = (evt: any, type: string) => {
if (
evt.data &&
evt.event &&
evt.event.changedTouches &&
evt.event.changedTouches.length
) {
const touchX = evt.event.changedTouches[0].pageX;
const touchY = evt.event.changedTouches[0].pageY;
EventBus.getInstance().emit(EventNamesDefine.DropToWall, {
type,
data: evt.data,
pos: {
x: touchX,
y: touchY,
},
});
}
};
return { return {
tab, tab,
signal_sources, signal_sources,
@ -277,26 +366,37 @@ export default defineComponent({
console.log(a); console.log(a);
}, },
getItemIcon(item_type: string) { getItemIcon(item_type: string) {
return Common.getSignalSourceIcon(item_type); let icon_map = new Map([
["EwindowType::Normal", "img:pad/source_icon/media.png"],
["EwindowType::Multimedia", "img:pad/source_icon/media.png"],
["EwindowType::Web", "img:pad/source_icon/web.png"],
["EwindowType::Image", "img:pad/source_icon/image.png"],
["EwindowType::Pdf", "img:pad/source_icon/pdf.png"],
["EwindowType::Ppt", "img:pad/source_icon/ppt.png"],
["EwindowType::Rtsp", "img:pad/source_icon/rtsp.png"],
["EwindowType::Subtitles", "img:pad/source_icon/subtitles.png"],
["EwindowType::Clock", "img:pad/source_icon/clock.png"],
["EwindowType::Weather", "img:pad/source_icon/weather.png"],
["EwindowType::HdmiIn", "img:pad/source_icon/hdmi_in.png"],
]);
if (icon_map.has(item_type)) {
return icon_map.get(item_type);
} else {
return "img:pad/source_icon/media.png";
}
}, },
onSignalSourceDrop(evt: any) { onSignalSourceDrop(evt: any) {
if ( emit_drop_events(evt, "signal_source");
evt.data && },
evt.event && onPollingDrop(evt: any) {
evt.event.changedTouches && emit_drop_events(evt, "polling");
evt.event.changedTouches.length },
) { onModeDrop(evt: any) {
const touchX = evt.event.changedTouches[0].pageX; emit_drop_events(evt, "mode");
const touchY = evt.event.changedTouches[0].pageY; },
EventBus.getInstance().emit(EventNamesDefine.DropToWall, { onPlanDrop(evt: any) {
data: evt.data, emit_drop_events(evt, "plan");
type: "signal_source",
pos: {
x: touchX,
y: touchY,
},
});
}
}, },
volumeUp(evt: MouseEvent) { volumeUp(evt: MouseEvent) {
evt.stopPropagation(); evt.stopPropagation();

View File

@ -23,7 +23,8 @@
:y=" :y="
$refs.wall?.parentElement?.offsetTop + $refs.wall?.parentElement?.offsetTop +
$refs.wall_content?.offsetTop + $refs.wall_content?.offsetTop +
item.y * wall_content_client_height item.y * wall_content_client_height +
$store.state.wall_row / ($store.state.landspace ? 2 : 1)
" "
:zIndex=" :zIndex="
1 + 1 +
@ -145,7 +146,7 @@
</style> </style>
<script lang="ts"> <script lang="ts">
import { defineComponent, Ref, ref, onMounted, computed } from "vue"; import { defineComponent, Ref, ref, onMounted, computed, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useStore } from "src/store"; import { useStore } from "src/store";
@ -212,6 +213,25 @@ export default defineComponent({
const cell_width = ref(0); const cell_width = ref(0);
const cell_height = ref(0); const cell_height = ref(0);
const refresh_window_pos = () => {
setTimeout(() => {
wall_content_client_width.value = wall_content_client_width.value + 1;
wall_content_client_width.value = wall_content_client_width.value - 1;
}, 400);
};
// /
watch(
() => $q.fullscreen.isActive,
() => refresh_window_pos()
);
//
watch(
() => $store.state.landspace,
() => $q.fullscreen.isActive && refresh_window_pos()
);
const plan_running = computed( const plan_running = computed(
() => $store.state.current_running_plan.trim() != "" () => $store.state.current_running_plan.trim() != ""
); );
@ -580,165 +600,213 @@ export default defineComponent({
y: number; y: number;
}; };
} }
const onDropSignalSourceOrPolliong = (evt: _IDropToWall) => {
if (evt && evt.data) {
// const x =
// evt.pos.x -
// (wall.value.parentElement?.offsetLeft ?? 0) -
// wall_content.value.offsetLeft;
// const y =
// evt.pos.y -
// (wall.value.parentElement?.offsetTop ?? 0) -
// wall_content.value.offsetTop;
let dom = document.elementFromPoint(
evt.pos.x,
evt.pos.y
) as HTMLElement;
const signal_sources = GlobalData.getInstance().signal_source.filter(
(item) => (item as any)?.uuid == evt.data.uuid
);
//
if (dom) {
const temp = find_parent_dom(dom, ["wall_item_flag", "window_flag"]);
if (temp) {
dom = temp;
}
}
if (dom) {
if (dom.classList.contains("wall_item_flag")) {
//
// 1
const x = dom.offsetLeft / wall_content.value.clientWidth;
const y = dom.offsetTop / wall_content.value.clientHeight;
const width = dom.offsetWidth / wall_content.value.clientWidth;
const height = dom.offsetHeight / wall_content.value.clientHeight;
switch (evt.type) {
case "polling":
GlobalData.getInstance()
.getCurrentClient()
?.openPolling(
new Protocol.OpenPollingRequestEntity(
evt.data.uuid,
x,
y,
width,
height
)
);
break;
case "signal_source" /**OpenPollingRequestEntity */:
if (signal_sources.length) {
const signal_source = signal_sources[0];
if (signal_source) {
GlobalData.getInstance()
.getCurrentClient()
?.openWindow(
new Protocol.OpenWindowRequestEntity(
signal_source.uuid,
x,
y,
width,
height
)
);
}
}
break;
}
} else if (dom.classList.contains("window_flag")) {
//
const rep_uuid = dom.getAttribute("uuid");
if (rep_uuid) {
let window = $store.state.windows.find(
(item) => item.uuid == rep_uuid
);
if (window) {
let client = GlobalData.getInstance().getCurrentClient();
if (client) {
let x = window.x;
let y = window.y;
let width = window.width;
let height = window.height;
client.closeWindow(window.window_id);
const open_window_request =
new Protocol.OpenPollingRequestEntity(
evt.data.uuid,
x,
y,
width,
height
);
open_window_request.muted = window.muted;
open_window_request.volume = window.volume;
open_window_request.paused = window.paused;
open_window_request.play_speed = window.play_speed;
setTimeout(() => {
if (!window) {
return;
}
switch (evt.type) {
case "polling":
{
const open_polling_request =
new Protocol.OpenPollingRequestEntity(
evt.data.uuid,
x,
y,
width,
height
);
open_polling_request.muted = window.muted;
open_polling_request.volume = window.volume;
open_polling_request.paused = window.paused;
open_polling_request.play_speed = window.play_speed;
GlobalData.getInstance()
.getCurrentClient()
?.openPolling(open_polling_request);
}
break;
case "signal_source":
{
if (signal_sources.length) {
const signal_source = signal_sources[0];
if (signal_source) {
const open_window_request =
new Protocol.OpenWindowRequestEntity(
signal_source.uuid,
x,
y,
width,
height
);
open_window_request.muted = window.muted;
open_window_request.volume = window.volume;
open_window_request.paused = window.paused;
open_window_request.play_speed =
window.play_speed;
client?.openWindow(open_window_request);
}
}
}
break;
}
}, 50);
}
}
}
}
}
}
};
EventBus.getInstance().on( EventBus.getInstance().on(
EventNamesDefine.DropToWall, EventNamesDefine.DropToWall,
(evt: _IDropToWall) => { (evt: _IDropToWall) => {
if (evt && evt.data) { if (evt && evt.data) {
// const x = switch (evt.type) {
// evt.pos.x - case "signal_source":
// (wall.value.parentElement?.offsetLeft ?? 0) - case "polling":
// wall_content.value.offsetLeft; onDropSignalSourceOrPolliong(evt);
// const y = break;
// evt.pos.y - case "mode":
// (wall.value.parentElement?.offsetTop ?? 0) - try {
// wall_content.value.offsetTop; if ($store.state.current_running_plan.trim() == "") {
let dom = document.elementFromPoint(
evt.pos.x,
evt.pos.y
) as HTMLElement;
const signal_sources = GlobalData.getInstance().signal_source.filter(
(item) => (item as any)?.uuid == evt.data.uuid
);
//
if (dom) {
const temp = find_parent_dom(dom, [
"wall_item_flag",
"window_flag",
]);
if (temp) {
dom = temp;
}
}
if (dom) {
if (dom.classList.contains("wall_item_flag")) {
//
// 1
const x = dom.offsetLeft / wall_content.value.clientWidth;
const y = dom.offsetTop / wall_content.value.clientHeight;
const width = dom.offsetWidth / wall_content.value.clientWidth;
const height = dom.offsetHeight / wall_content.value.clientHeight;
switch (evt.type) {
case "polling":
GlobalData.getInstance() GlobalData.getInstance()
.getCurrentClient() .getCurrentClient()
?.openPolling( ?.callMode(evt.data.uuid);
new Protocol.OpenPollingRequestEntity( $q.notify({
evt.data.uuid, color: "positive",
x, icon: "done",
y, message:
width, $t.t("call mode directives send") + $t.t("success") + "!",
height position: "top",
) timeout: 1500,
); });
break; } else {
case "signal_source" /**OpenPollingRequestEntity */: $q.notify({
if (signal_sources.length) { type: "warning",
const signal_source = signal_sources[0]; message: $t.t("plan running! can't call mode!"),
if (signal_source) { position: "top",
GlobalData.getInstance() timeout: 1500,
.getCurrentClient() });
?.openWindow(
new Protocol.OpenWindowRequestEntity(
signal_source.uuid,
x,
y,
width,
height
)
);
}
}
break;
}
} else if (dom.classList.contains("window_flag")) {
//
const rep_uuid = dom.getAttribute("uuid");
if (rep_uuid) {
let window = $store.state.windows.find(
(item) => item.uuid == rep_uuid
);
if (window) {
let client = GlobalData.getInstance().getCurrentClient();
if (client) {
let x = window.x;
let y = window.y;
let width = window.width;
let height = window.height;
client.closeWindow(window.window_id);
const open_window_request =
new Protocol.OpenPollingRequestEntity(
evt.data.uuid,
x,
y,
width,
height
);
open_window_request.muted = window.muted;
open_window_request.volume = window.volume;
open_window_request.paused = window.paused;
open_window_request.play_speed = window.play_speed;
setTimeout(() => {
if (!window) {
return;
}
switch (evt.type) {
case "polling":
{
const open_polling_request =
new Protocol.OpenPollingRequestEntity(
evt.data.uuid,
x,
y,
width,
height
);
open_polling_request.muted = window.muted;
open_polling_request.volume = window.volume;
open_polling_request.paused = window.paused;
open_polling_request.play_speed = window.play_speed;
GlobalData.getInstance()
.getCurrentClient()
?.openPolling(open_polling_request);
}
break;
case "signal_source":
{
if (signal_sources.length) {
const signal_source = signal_sources[0];
if (signal_source) {
const open_window_request =
new Protocol.OpenWindowRequestEntity(
signal_source.uuid,
x,
y,
width,
height
);
open_window_request.muted = window.muted;
open_window_request.volume = window.volume;
open_window_request.paused = window.paused;
open_window_request.play_speed =
window.play_speed;
client?.openWindow(open_window_request);
}
}
}
break;
}
}, 50);
}
} }
} } catch {}
} break;
case "plan":
try {
GlobalData.getInstance()
.getCurrentClient()
?.runPlan(evt.data.uuid);
$q.notify({
color: "positive",
icon: "done",
message:
$t.t("run plan directives send") + $t.t("success") + "!",
position: "top",
timeout: 1500,
});
} catch {}
break;
} }
} }
} }

View File

@ -1,104 +1,134 @@
<template> <template>
<q-toolbar class="shadow-2 text-accent bg-secondary"> <q-toolbar
<q-space /> class="shadow-2 text-accent bg-secondary q-pa-none"
<q-space /> style="flex-wrap: wrap"
>
<q-btn <q-btn
class="col-auto"
:class="$store.state.landspace ? 'q-mx-sm' : ''"
stretch stretch
stack stack
flat flat
icon="img:pad/toolbar/close_icon.png" icon="img:pad/toolbar/close_icon.png"
:label="$t('close')" :label="$t('close')"
/> />
<q-separator dark vertical inset />
<q-btn <q-btn
class="col-auto"
:class="$store.state.landspace ? 'q-mx-sm' : ''"
stretch stretch
stack stack
flat flat
icon="img:pad/toolbar/clean_windows_icon.png" icon="img:pad/toolbar/clean_windows_icon.png"
:label="$t('clean screen')" :label="$t('clean screen')"
/> />
<q-separator dark vertical inset />
<!-- 全屏暂时没有适配 -->
<q-btn <q-btn
v-if="false && !$q.fullscreen.isActive" class="col-auto"
:class="$store.state.landspace ? 'q-mx-sm' : ''"
stretch stretch
stack stack
flat flat
icon="img:pad/toolbar/full_screen_icon.png" :icon="
:label="$t('full screen')" 'img:pad/toolbar/' +
@click="fullScreen" ($q.fullscreen.isActive
? 'exit_full_screen_icon.png'
: 'full_screen_icon.png')
"
:label="
$q.fullscreen.isActive ? $t('exit full screen') : $t('full screen')
"
@click="toogleFullScreen"
/> />
<q-separator dark vertical inset />
<q-btn <q-btn
class="col-auto"
:class="$store.state.landspace ? 'q-mx-sm' : ''"
stretch stretch
stack stack
flat flat
icon="img:pad/toolbar/top_window_icon.png" icon="img:pad/toolbar/top_window_icon.png"
:label="$t('top window')" :label="$t('top window')"
/> />
<q-separator dark vertical inset />
<q-btn <q-btn
class="col-auto"
:class="$store.state.landspace ? 'q-mx-sm' : ''"
stretch stretch
stack stack
flat flat
icon="img:pad/toolbar/lower_window_icon.png" icon="img:pad/toolbar/lower_window_icon.png"
:label="$t('lower window')" :label="$t('lower window')"
/> />
<q-separator dark vertical inset />
<q-btn <q-btn
class="col-auto"
:class="$store.state.landspace ? 'q-mx-sm' : ''"
stretch stretch
stack stack
flat flat
icon="img:pad/toolbar/center_control_icon.png" icon="img:pad/toolbar/center_control_icon.png"
:label="$t('center control')" :label="$t('center control')"
/> />
<q-separator dark vertical inset />
<q-btn <q-btn
class="col-auto"
:class="$store.state.landspace ? 'q-mx-sm' : ''"
stretch stretch
stack stack
flat flat
icon="img:pad/toolbar/power_on_icon.png" icon="img:pad/toolbar/power_on_icon.png"
:label="$t('power on')" :label="$t('power on')"
/> />
<q-separator dark vertical inset />
<q-btn <q-btn
class="col-auto"
:class="$store.state.landspace ? 'q-mx-sm' : ''"
stretch stretch
stack stack
flat flat
icon="img:pad/toolbar/power_off_icon.png" icon="img:pad/toolbar/power_off_icon.png"
:label="$t('power off')" :label="$t('power off')"
/> />
<q-separator dark vertical inset />
<q-btn <q-btn
stretch
flat
stack
icon="img:pad/toolbar/stop_plan.png"
:label="$t('stop plan')"
class="col-auto"
:class="$store.state.landspace ? 'q-mx-sm' : ''"
v-if="plan_running"
@click="stopPlan"
/>
<q-btn
class="col-auto"
:class="$store.state.landspace ? 'q-mx-sm' : ''"
stretch stretch
stack stack
flat flat
icon="img:pad/toolbar/file_upload_icon.png" icon="img:pad/toolbar/file_upload_icon.png"
:label="$t('file manage')" :label="$t('file manage')"
/> />
<q-separator dark vertical inset />
<q-btn <q-btn
class="col-auto"
:class="$store.state.landspace ? 'q-mx-sm' : ''"
stretch stretch
stack stack
flat flat
icon="img:pad/toolbar/wallpaper_icon.png" icon="img:pad/toolbar/wallpaper_icon.png"
:label="$t('background image')" :label="$t('background image')"
/> />
<q-separator dark vertical inset />
<q-space /> <q-space />
<q-btn <q-btn
class="col-auto"
:class="$store.state.landspace ? 'q-mx-sm' : ''"
stretch stretch
stack stack
flat flat
icon="img:pad/toolbar/logout_icon.png" icon="img:pad/toolbar/logout_icon.png"
:label="$t('logout')" :label="$t('logout')"
/> />
<q-space />
</q-toolbar> </q-toolbar>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, Ref, ref } from "vue"; import { defineComponent, Ref, ref, computed } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useStore } from "src/store"; import { useStore } from "src/store";
@ -113,10 +143,19 @@ export default defineComponent({
const $q = useQuasar(); const $q = useQuasar();
const $t = useI18n(); const $t = useI18n();
const plan_running = computed(
() => $store.state.current_running_plan.trim() != ""
);
return { return {
fullScreen() { plan_running,
AppFullscreen.request();
console.log("fffffffff"); toogleFullScreen() {
if ($q.fullscreen.isActive) {
$q.fullscreen.exit();
} else {
AppFullscreen.request();
}
}, },
}; };
}, },

View File

@ -92,10 +92,11 @@ const initialize_sortablejs = () => {
}, },
dropGlobal: function dropGlobal(evt) { dropGlobal: function dropGlobal(evt) {
try { try {
if (evt.dragEl) { if (this && evt.dragEl) {
this._emitVueEvent("drop", { this._emitVueEvent("drop", {
data: evt.dragEl.__draggable_context.element, data: evt.dragEl.__draggable_context.element,
event: evt.originalEvent, event: evt.originalEvent,
options: this.options,
}); });
} }
setTimeout(() => { setTimeout(() => {