添加播放,停止,静音,轮询,模式,预案图标。

This commit is contained in:
fangxiang 2022-04-15 09:25:20 +08:00
parent 201e7c8634
commit 2c003be8e7
9 changed files with 234 additions and 12 deletions

BIN
public/pad/mode_icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
public/pad/plan_icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
public/pad/polling_icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -72,19 +72,23 @@
<q-btn <q-btn
icon="img:pad/play_control/play_prev_icon.png" icon="img:pad/play_control/play_prev_icon.png"
flat flat
size="1.1rem" size="1.2rem"
class="col-auto" class="col-auto"
/> />
<q-btn <q-btn
icon="img:pad/play_control/pause_icon.png" :icon="
paused
? 'img:pad/play_control/pause_icon.png'
: 'img:pad/play_control/play_icon.png'
"
flat flat
size="2.3rem" size="2.4rem"
class="col-auto q-mx-xs" class="col-auto q-mx-xs"
/> />
<q-btn <q-btn
icon="img:pad/play_control/play_next_icon.png" icon="img:pad/play_control/play_next_icon.png"
flat flat
size="1.1rem" size="1.2rem"
class="col-auto" class="col-auto"
/> />
<q-space /> <q-space />
@ -94,19 +98,23 @@
<q-btn <q-btn
icon="img:pad/play_control/volume_down_icon.png" icon="img:pad/play_control/volume_down_icon.png"
flat flat
size="1.1rem" size="1.2rem"
class="col-auto" class="col-auto"
/> />
<q-btn <q-btn
icon="img:pad/play_control/unmute_icon.png" :icon="
muted
? 'img:pad/play_control/unmute_icon.png'
: 'img:pad/play_control/mute_icon.png'
"
flat flat
size="1.1rem" size="1.2rem"
class="col-auto q-mx-xs" class="col-auto q-mx-xs"
/> />
<q-btn <q-btn
icon="img:pad/play_control/volume_up_icon.png" icon="img:pad/play_control/volume_up_icon.png"
flat flat
size="1.1rem" size="1.2rem"
class="col-auto" class="col-auto"
/> />
<q-space /> <q-space />
@ -119,7 +127,7 @@
<style scoped> <style scoped>
.__panel_item { .__panel_item {
height: 26.5vh; height: 27vh;
} }
</style> </style>
@ -137,9 +145,14 @@ export default defineComponent({
const $q = useQuasar(); const $q = useQuasar();
const $t = useI18n(); const $t = useI18n();
const paused = ref(false);
const muted = ref(false);
const tab = ref("signal_source"); const tab = ref("signal_source");
return { return {
tab, tab,
paused,
muted,
loga(a: any) { loga(a: any) {
console.log(a); console.log(a);
}, },

View File

@ -1,22 +1,231 @@
<template> <template>
<div class="row">avbccsadsad</div> <div
ref="wall"
class="fit bg-white q-py-md q-mx-sm row items-center justify-evenly wall"
>
<div
ref="wall_content"
:style="{
width: wall_width + 'px',
height: wall_height + 'px',
}"
class="wall"
>
<div id="windows" style="position: absolute">
<vue3-resize-drag
:w="item.width * ($refs.wall?.clientWidth ?? 0)"
:h="item.height * ($refs.wall?.clientHeight ?? 0)"
:x="
($refs.wall?.parentElement?.offsetLeft ?? 0) +
($refs.wall?.offsetLeft ?? 0) +
item.x * ($refs.wall?.clientWidth ?? 0)
"
:y="
($refs.wall?.parentElement?.offsetTop ?? 0) +
($refs.wall?.offsetTop ?? 0) +
item.y * ($refs.wall?.clientHeight ?? 0)
"
:zIndex="
$store.state.windows_sort.findIndex(
(element) => element == item.uuid
)
"
:isActive="item.uuid == $store.state.selected_window"
:resizeIconSize="14"
:isGuide="true"
v-for="(item, index) in $store.state.windows"
:key="index"
@resizeEndHandler="resizeWindow(item.window_id, $event)"
@moveEndHandler="moveWindow(item.window_id, $event)"
style="position: fixed"
>
<window
@close_this_window="closeWindow"
@close_other_windows="closeOtherWindows"
@close_all_windows="closeAllWindows"
@replace_this_window="repliceWindow"
@top_window="topWindow"
@lower_window="lowerWindow"
@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"
:uuid="item.uuid"
:disable="plan_running"
:mouse_area_flag="area_open_window_flag"
:signal_source_table_uuid="item.signal_source_table_uuid"
:window="item"
:plan_running="plan_running"
class="window fit"
>
</window>
</vue3-resize-drag>
</div>
<div ref="wall_grids">
<div
v-for="row in wall_rows"
:key="row"
class="row"
:style="{
height: cell_height + 'px',
}"
>
<div
:ref="'item' + (row - 1) * wall_cols + col"
v-for="col in wall_cols"
:key="col"
class="col wall_item wall_item_flag"
:style="{
width: cell_witdh + 'px',
height: cell_height + 'px',
}"
>
<q-popup-proxy
context-menu
@show="
{
//last_context_menu_pos_x = $event.layerX;
//last_context_menu_pos_y = $event.layerY;
}
"
>
<q-list>
<q-item
:disable="plan_running"
clickable
v-close-popup
@click="openWindowByLocalFile($event)"
>
<q-item-section avatar>
<q-icon name="open_in_browser" />
</q-item-section>
<q-item-section> {{ $t("open window") }} </q-item-section>
</q-item>
<q-item
:disable="plan_running"
clickable
v-close-popup
@click="closeAllWindows"
>
<q-item-section avatar>
<q-icon name="close" color="red" />
</q-item-section>
<q-item-section>
{{ $t("close all windwos") }}
</q-item-section>
</q-item>
</q-list>
</q-popup-proxy>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<style scoped>
.wall {
border: 1px solid black;
}
.wall_item {
border: 1px solid gray;
}
.window {
position: absolute;
}
.wall_item_flag {
}
.mouse_area_mask {
background: #aacceec2;
border: 1px solid #0069bee7;
}
</style>
<script lang="ts"> <script lang="ts">
import { defineComponent, Ref, ref } from "vue"; import { defineComponent, Ref, ref, onMounted, 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";
const elementResizeDetectorMaker = require("element-resize-detector");
import vue3ResizeDrag from "../third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
import Window from "src/components/Window.vue";
export default defineComponent({ export default defineComponent({
name: "PadContentWallPage", name: "PadContentWallPage",
components: {}, components: { Window, vue3ResizeDrag },
setup() { setup() {
const $store = useStore(); const $store = useStore();
const $q = useQuasar(); const $q = useQuasar();
const $t = useI18n(); const $t = useI18n();
const wall: Ref<any> = ref(null);
const wall_width = ref(0);
const wall_height = ref(0);
const wall_rows = computed({
get: () => $store.state.wall_row,
set: (val) => $store.commit("setWallRow", val),
});
const wall_cols = computed({
get: () => $store.state.wall_col,
set: (val) => $store.commit("setWallCol", val),
});
const cell_width = ref(0);
const cell_height = ref(0);
onMounted(() => {
if (wall.value && wall.value.parentElement) {
const wall_parent = wall.value.parentElement as HTMLElement;
elementResizeDetectorMaker().listenTo(
wall_parent,
(element: HTMLElement) => {
if (element) {
console.log();
let height = wall_parent.offsetHeight * 0.9;
let width = height / 0.56;
if (width > element.offsetWidth) {
width = element.offsetWidth * 0.9;
height = width * 0.56;
}
console.log(height);
console.log(width);
wall_height.value = height;
wall_width.value = width;
cell_height.value = wall_height.value / $store.state.wall_row;
cell_width.value = wall_width.value / $store.state.wall_col;
}
}
);
} else {
console.error("dom error");
console.error((wall.value as HTMLElement).parentElement);
}
});
return { return {
wall,
wall_width,
wall_height,
wall_rows,
wall_cols,
cell_width,
cell_height,
loga(a: any) { loga(a: any) {
console.log(a); console.log(a);
}, },