lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复信号源，模式，预案超出部分无法显示的BUG

This commit is contained in:
fangxiang 2021-12-23 11:36:25 +08:00
parent 7e456340dc
commit 6c810501d4
6 changed files with 317 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

230
src/components/ModeTree.vue
View File

@ -1,115 +1,120 @@
<template> <template>
<div> <div>
<q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name"> <q-scroll-area
<template v-slot:default-header="prop"> :style="{ height: content_height + 'px' }"
<q-item style="width: 20vw"
class="full-width" >
clickable <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
@dblclick=" <template v-slot:default-header="prop">
(evt) => !prop.node.is_group && callMode(prop.node.item_data) <q-item
" class="full-width"
> clickable
<q-item-section avatar> @dblclick="
<q-icon (evt) => !prop.node.is_group && callMode(prop.node.item_data)
:name=" "
prop.node.is_group >
? 'img:source_icon/group.png' <q-item-section avatar>
: 'img:source_icon/hdmi.png' <q-icon
" :name="
color="orange" prop.node.is_group
size="28px" ? 'img:source_icon/group.png'
class="q-mr-sm" : 'img:source_icon/hdmi.png'
/>
</q-item-section>
<q-item-section>
<div class="text-weight-bold text-primary">
<span v-if="prop.node.item_data"
>({{ prop.node.item_data?.number }})
</span>
&nbsp;&nbsp;{{ prop.node.name }}
</div>
</q-item-section>
<q-popup-proxy context-menu>
<q-popup-proxy context-menu />
<q-list>
<q-item
v-if="
prop.node.name == $t('root') ||
(prop.node.is_group && prop.node.item_data)
" "
clickable color="orange"
v-close-popup size="28px"
v-ripple class="q-mr-sm"
@click=" />
$refs.mode_dialog.showDialog({ </q-item-section>
type: 1, <q-item-section>
data: { uuid: prop.node.uuid }, <div class="text-weight-bold text-primary">
}) <span v-if="prop.node.item_data"
" >({{ prop.node.item_data?.number }})
> </span>
<q-item-section avatar><q-icon name="add" /></q-item-section> &nbsp;&nbsp;{{ prop.node.name }}
<q-item-section>{{ $t("add mode item") }}</q-item-section> </div>
</q-item> </q-item-section>
<q-item <q-popup-proxy context-menu>
clickable <q-popup-proxy context-menu />
v-close-popup <q-list>
v-if=" <q-item
prop.node.name == $t('root') || v-if="
(prop.node.is_group && prop.node.item_data) prop.node.name == $t('root') ||
" (prop.node.is_group && prop.node.item_data)
v-ripple "
@click=" clickable
() => v-close-popup
$refs.group_dialog.showDialog({ v-ripple
@click="
$refs.mode_dialog.showDialog({
type: 1, type: 1,
data: prop.node, data: { uuid: prop.node.uuid },
}) })
" "
> >
<q-item-section avatar <q-item-section avatar><q-icon name="add" /></q-item-section>
><q-icon name="create_new_folder" <q-item-section>{{ $t("add mode item") }}</q-item-section>
/></q-item-section> </q-item>
<q-item-section>{{ $t("add group") }}</q-item-section> <q-item
</q-item> clickable
<q-item v-close-popup
clickable v-if="
v-ripple prop.node.name == $t('root') ||
v-close-popup (prop.node.is_group && prop.node.item_data)
v-if="prop.node.item_data" "
@click=" v-ripple
() => @click="
(prop.node.is_group () =>
? $refs.group_dialog $refs.group_dialog.showDialog({
: $refs.mode_dialog type: 1,
).showDialog({ data: prop.node,
type: 2, })
data: prop.node, "
}) >
" <q-item-section avatar
> ><q-icon name="create_new_folder"
<q-item-section avatar><q-icon name="edit" /></q-item-section> /></q-item-section>
<q-item-section>{{ $t("edit") }}</q-item-section> <q-item-section>{{ $t("add group") }}</q-item-section>
</q-item> </q-item>
<q-item
clickable
v-ripple
v-close-popup
v-if="prop.node.item_data"
@click="
() =>
(prop.node.is_group
? $refs.group_dialog
: $refs.mode_dialog
).showDialog({
type: 2,
data: prop.node,
})
"
>
<q-item-section avatar><q-icon name="edit" /></q-item-section>
<q-item-section>{{ $t("edit") }}</q-item-section>
</q-item>
<q-item <q-item
clickable clickable
v-ripple v-ripple
v-close-popup v-close-popup
v-if="prop.node.item_data" v-if="prop.node.item_data"
@click=" @click="
(evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid) (evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid)
" "
> >
<q-item-section avatar <q-item-section avatar
><q-icon color="red" name="delete" ><q-icon color="red" name="delete"
/></q-item-section> /></q-item-section>
<q-item-section>{{ $t("delete") }} &nbsp;</q-item-section> <q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</q-popup-proxy> </q-popup-proxy>
</q-item> </q-item>
</template> </template>
</q-tree> </q-tree>
</q-scroll-area>
</div> </div>
<mode-group-dialog ref="group_dialog" /> <mode-group-dialog ref="group_dialog" />
<mode-dialog ref="mode_dialog" /> <mode-dialog ref="mode_dialog" />
@ -125,6 +130,7 @@ import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { ModeEntity } from "src/entities/ModeEntity"; import { ModeEntity } from "src/entities/ModeEntity";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
export default defineComponent({ export default defineComponent({
name: "PageModeTree", name: "PageModeTree",
@ -141,6 +147,17 @@ export default defineComponent({
set: (val) => {}, set: (val) => {},
}); });
const content_height = ref(0);
const refresh_content_height = () => {
content_height.value = window.innerHeight - 135;
};
refresh_content_height();
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
refresh_content_height();
});
const tree: any | null = ref(null); const tree: any | null = ref(null);
onMounted(async () => { onMounted(async () => {
@ -153,6 +170,7 @@ export default defineComponent({
return { return {
tree, tree,
tree_nodes, tree_nodes,
content_height,
loga(a: any) { loga(a: any) {
console.log(a); console.log(a);
}, },

293
src/components/PlanTree.vue
View File

@ -1,144 +1,155 @@
<template> <template>
<div> <div>
<q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name"> <q-scroll-area
<template v-slot:default-header="prop"> :style="{ height: content_height + 'px' }"
<q-item style="width: 20vw"
class="full-width" >
clickable <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
@dblclick=" <template v-slot:default-header="prop">
(evt) => !prop.node.is_group && runPlan(prop.node.item_data) <q-item
" class="full-width"
> clickable
<q-item-section avatar> @dblclick="
<q-icon (evt) => !prop.node.is_group && runPlan(prop.node.item_data)
:name=" "
prop.node.is_group >
? 'img:source_icon/group.png' <q-item-section avatar>
: 'img:source_icon/hdmi.png' <q-icon
" :name="
color="orange" prop.node.is_group
size="28px" ? 'img:source_icon/group.png'
class="q-mr-sm" : 'img:source_icon/hdmi.png'
/>
</q-item-section>
<q-item-section>
<div class="text-weight-bold text-primary">
{{ prop.node.name }}
</div>
</q-item-section>
<q-popup-proxy context-menu>
<q-popup-proxy context-menu />
<q-list>
<q-item
v-if="
prop.node.name == $t('root') ||
(prop.node.is_group && prop.node.item_data)
" "
clickable color="orange"
v-close-popup size="28px"
v-ripple class="q-mr-sm"
@click=" />
$refs.plan_dialog.showDialog({ </q-item-section>
type: 1, <q-item-section>
data: { uuid: prop.node.uuid }, <div class="text-weight-bold text-primary">
}) {{ prop.node.name }}
" </div>
> </q-item-section>
<q-item-section avatar><q-icon name="add" /></q-item-section> <q-popup-proxy context-menu>
<q-item-section>{{ $t("add plan item") }}</q-item-section> <q-popup-proxy context-menu />
</q-item> <q-list>
<q-item <q-item
clickable v-if="
v-close-popup prop.node.name == $t('root') ||
v-if=" (prop.node.is_group && prop.node.item_data)
prop.node.name == $t('root') || "
(prop.node.is_group && prop.node.item_data) clickable
" v-close-popup
v-ripple v-ripple
@click=" @click="
() => $refs.plan_dialog.showDialog({
$refs.group_dialog.showDialog({
type: 1, type: 1,
data: prop.node, data: { uuid: prop.node.uuid },
}) })
" "
> >
<q-item-section avatar <q-item-section avatar><q-icon name="add" /></q-item-section>
><q-icon name="create_new_folder" <q-item-section>{{ $t("add plan item") }}</q-item-section>
/></q-item-section> </q-item>
<q-item-section>{{ $t("add group") }}</q-item-section> <q-item
</q-item> clickable
<q-item v-close-popup
clickable v-if="
v-ripple prop.node.name == $t('root') ||
v-close-popup (prop.node.is_group && prop.node.item_data)
v-if=" "
prop.node.item_data && v-ripple
power_on_plan != prop.node.item_data.uuid @click="
" () =>
@click="(evt) => setPowerOnPlan(evt, prop.node.item_data.uuid)" $refs.group_dialog.showDialog({
> type: 1,
<q-item-section avatar><q-icon name="timer" /></q-item-section> data: prop.node,
<q-item-section>{{ $t("set power on start") }}</q-item-section> })
</q-item> "
<q-item >
clickable <q-item-section avatar
v-ripple ><q-icon name="create_new_folder"
v-close-popup /></q-item-section>
v-if=" <q-item-section>{{ $t("add group") }}</q-item-section>
prop.node.item_data && </q-item>
power_on_plan == prop.node.item_data.uuid <q-item
" clickable
@click=" v-ripple
(evt) => unsetPowerOnPlan(evt, prop.node.item_data.uuid) v-close-popup
" v-if="
> prop.node.item_data &&
<q-item-section avatar power_on_plan != prop.node.item_data.uuid
><q-icon name="timer_off" "
/></q-item-section> @click="
<q-item-section>{{ (evt) => setPowerOnPlan(evt, prop.node.item_data.uuid)
$t("unset power on start") "
}}</q-item-section> >
</q-item> <q-item-section avatar
<q-item ><q-icon name="timer"
clickable /></q-item-section>
v-ripple <q-item-section>{{
v-close-popup $t("set power on start")
v-if="prop.node.item_data" }}</q-item-section>
@click=" </q-item>
() => <q-item
(prop.node.is_group clickable
? $refs.group_dialog v-ripple
: $refs.plan_dialog v-close-popup
).showDialog({ v-if="
type: 2, prop.node.item_data &&
data: prop.node, power_on_plan == prop.node.item_data.uuid
}) "
" @click="
> (evt) => unsetPowerOnPlan(evt, prop.node.item_data.uuid)
<q-item-section avatar><q-icon name="edit" /></q-item-section> "
<q-item-section>{{ $t("edit") }}</q-item-section> >
</q-item> <q-item-section avatar
><q-icon name="timer_off"
/></q-item-section>
<q-item-section>{{
$t("unset power on start")
}}</q-item-section>
</q-item>
<q-item
clickable
v-ripple
v-close-popup
v-if="prop.node.item_data"
@click="
() =>
(prop.node.is_group
? $refs.group_dialog
: $refs.plan_dialog
).showDialog({
type: 2,
data: prop.node,
})
"
>
<q-item-section avatar><q-icon name="edit" /></q-item-section>
<q-item-section>{{ $t("edit") }}</q-item-section>
</q-item>
<q-item <q-item
clickable clickable
v-ripple v-ripple
v-close-popup v-close-popup
v-if="prop.node.item_data" v-if="prop.node.item_data"
@click=" @click="
(evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid) (evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid)
" "
> >
<q-item-section avatar <q-item-section avatar
><q-icon color="red" name="delete" ><q-icon color="red" name="delete"
/></q-item-section> /></q-item-section>
<q-item-section>{{ $t("delete") }} &nbsp;</q-item-section> <q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</q-popup-proxy> </q-popup-proxy>
</q-item> </q-item>
</template> </template>
</q-tree> </q-tree>
</q-scroll-area>
</div> </div>
<plan-group-dialog ref="group_dialog" /> <plan-group-dialog ref="group_dialog" />
<plan-dialog ref="plan_dialog" /> <plan-dialog ref="plan_dialog" />
@ -178,6 +189,17 @@ export default defineComponent({
set: (val) => {}, set: (val) => {},
}); });
const content_height = ref(0);
const refresh_content_height = () => {
content_height.value = window.innerHeight - 135;
};
refresh_content_height();
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
refresh_content_height();
});
const tree: any | null = ref(null); const tree: any | null = ref(null);
onMounted(async () => { onMounted(async () => {
@ -190,6 +212,7 @@ export default defineComponent({
return { return {
tree, tree,
tree_nodes, tree_nodes,
content_height,
power_on_plan, power_on_plan,
loga(a: any) { loga(a: any) {
console.log(a); console.log(a);

16
src/components/SignalSourceDialog.vue
View File

@ -146,8 +146,9 @@
:hint=" :hint="
$t('please input') + $t('please input') +
media_url_label.substr(0, media_url_label.length - 2) + media_url_label.substr(0, media_url_label.length - 2) +
',' + (media_url_label.startsWith($t('file path'))
$t('dbclick select file') ? ',' + $t('dbclick select file')
: '')
" "
lazy-rules lazy-rules
:rules="[ :rules="[
@ -186,10 +187,6 @@
:label="$t('user name')" :label="$t('user name')"
:hint="$t('please input user name')" :hint="$t('please input user name')"
lazy-rules lazy-rules
:rules="[
(val) =>
(val && val.length > 0) || $t('Please type something'),
]"
@keydown=" @keydown="
(evt) => { (evt) => {
if (evt.keyCode == 13) { if (evt.keyCode == 13) {
@ -219,10 +216,6 @@
:label="$t('password')" :label="$t('password')"
:hint="$t('please input password')" :hint="$t('please input password')"
lazy-rules lazy-rules
:rules="[
(val) =>
(val && val.length > 0) || $t('Please type something'),
]"
@keydown=" @keydown="
(evt) => { (evt) => {
if (evt.keyCode == 13) { if (evt.keyCode == 13) {
@ -470,6 +463,9 @@ export default defineComponent({
loading.value = false; loading.value = false;
}, },
async doSelectFile() { async doSelectFile() {
if (!media_url_label.value.startsWith($t.t("file path"))) {
return;
}
const obj = await file_manage_dialog.value.showDialogAsync("select"); const obj = await file_manage_dialog.value.showDialogAsync("select");
if (obj) { if (obj) {
interface __I { interface __I {

14
src/components/SignalSourceTree.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<q-scroll-area style="height: 60vw; width: 20vw"> <q-scroll-area :style="{ height: content_height + 'px' }" style="width: 20vw">
<q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name"> <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
<template v-slot:default-header="prop"> <template v-slot:default-header="prop">
<q-item <q-item
@ -145,6 +145,17 @@ export default defineComponent({
const $q = useQuasar(); const $q = useQuasar();
const $t = useI18n(); const $t = useI18n();
const content_height = ref(0);
const refresh_content_height = () => {
content_height.value = window.innerHeight - 135;
};
refresh_content_height();
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
refresh_content_height();
});
const tree_nodes = computed({ const tree_nodes = computed({
get: () => $store.state.signal_source_tree, get: () => $store.state.signal_source_tree,
set: (val) => $store.commit("setSignalSourceTree", val), set: (val) => $store.commit("setSignalSourceTree", val),
@ -162,6 +173,7 @@ export default defineComponent({
return { return {
tree, tree,
tree_nodes, tree_nodes,
content_height,
loga(a: any) { loga(a: any) {
console.log(a); console.log(a);
}, },

26
src/components/SystemSettingDialog.vue
View File

@ -1003,12 +1003,12 @@ export default defineComponent({
const applyGraphics = async () => { const applyGraphics = async () => {
loading.value = true; loading.value = true;
const request = new Protocol.SetSystemGraphicsRequestEntity(); const request = new Protocol.SetSystemGraphicsRequestEntity();
request.brightness = brightness.value; request.brightness = parseInt(brightness.value.toString());
request.contrast = contrast.value; request.contrast = parseInt(contrast.value.toString());
request.hue = hue.value; request.hue = parseInt(hue.value.toString());
request.output_board_resolution = output_board_resolution.value; request.output_board_resolution = output_board_resolution.value;
request.device_resolution = device_resolution.value; request.device_resolution = device_resolution.value;
request.rotate = device_rotate.value; request.rotate = parseInt(device_rotate.value.toString());
let success = false; let success = false;
try { try {
@ -1074,7 +1074,7 @@ export default defineComponent({
request.system_muted = system_muted.value == $t.t("on"); request.system_muted = system_muted.value == $t.t("on");
request.output_audio_card = output_audio_card.value; request.output_audio_card = output_audio_card.value;
request.use_ntp = use_ntp.value == $t.t("enable"); request.use_ntp = use_ntp.value == $t.t("enable");
request.ntp_sync_delay = ntp_sync_delay.value; request.ntp_sync_delay = parseInt(ntp_sync_delay.value.toString());
request.ntp_server = ntp_server.value; request.ntp_server = ntp_server.value;
request.time_zone = time_zone_options.value.findIndex( request.time_zone = time_zone_options.value.findIndex(
(element) => element && element == time_zone.value (element) => element && element == time_zone.value
@ -1138,13 +1138,17 @@ export default defineComponent({
const applyOutputBoard = async () => { const applyOutputBoard = async () => {
loading.value = true; loading.value = true;
const request = new Protocol.SetOutputBoardSettingRequestEntity(); const request = new Protocol.SetOutputBoardSettingRequestEntity();
request.wall_col = output_board_wall_col.value; request.wall_col = parseInt(output_board_wall_col.value.toString());
request.wall_row = output_board_wall_row.value; request.wall_row = parseInt(output_board_wall_row.value.toString());
request.splicing = output_board_splicing.value == $t.t("on"); request.splicing = output_board_splicing.value == $t.t("on");
request.vertical_blanking = output_board_vertical_blanking.value; request.vertical_blanking = parseInt(
request.horizon_blanking = output_board_horizon_blanking.value; output_board_vertical_blanking.value.toString()
request.rotate = output_board_rotate.value; );
request.volume = output_board_volume.value; request.horizon_blanking = parseInt(
output_board_horizon_blanking.value.toString()
);
request.rotate = parseInt(output_board_rotate.value.toString());
request.volume = parseInt(output_board_volume.value.toString());
request.mute = output_board_mute.value == $t.t("on"); request.mute = output_board_mute.value == $t.t("on");
let success = false; let success = false;

2
src/pages/LeftToolBar.vue
View File

@ -8,7 +8,7 @@
indicator-color="primary" indicator-color="primary"
align="justify" align="justify"
narrow-indicator narrow-indicator
style="color:red" style="color: red"
> >
<q-tab name="signal_source" :label="$t('signal source')" /> <q-tab name="signal_source" :label="$t('signal source')" />
<q-tab name="" icon="" disable /> <q-tab name="" icon="" disable />