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

信号源、模式、预案增加拖动事件(仅支持PC端的chrome内核,firefox等其它内核可能不支持

This commit is contained in:
fangxiang 2022-07-19 16:59:26 +08:00
parent 20a830e35e
commit fe76f29989
9 changed files with 265 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "media_player_client",
"version": "1.4.18",
"version": "1.4.19",
"description": "A Quasar Framework app",
"productName": "MediaPlayerClient",
"author": "fangxiang <fangxiang@cloudview.work>",

BIN
public/source_icon/clock.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 832 B

After

Width:  |  Height:  |  Size: 1.1 KiB

81
src/components/ModeTree.vue
View File

@ -10,6 +10,10 @@
class="full-width"
clickable
:disable="!$store.state.power_state"
:draggable="prop.node.uuid != '' && $store.state.power_state"
@dragstart="(evt) => onDragStart(evt, prop.node)"
@dragover="(evt) => onDragOver(evt, prop.node)"
@drop="(evt) => onDrop(evt, prop.node)"
@dblclick="
(evt) => {
if (!$store.state.power_state) {
@ -36,6 +40,7 @@
>
<q-item-section avatar>
<q-icon
style="pointer-events: none"
:name="
prop.node.is_group
? 'img:source_icon/group.png'
@ -163,7 +168,7 @@ import ModeGroupDialog from "src/components/ModeGroupDialog.vue";
import ModeDialog from "src/components/ModeDialog.vue";
import { Common } from "src/common/Common";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
import { useQuasar, extend } from "quasar";
import { useI18n } from "vue-i18n";
import { ModeEntity, ModeTreeItemEntity } from "src/entities/ModeEntity";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
@ -298,6 +303,80 @@ export default defineComponent({
});
}
},
onDragStart(e: DragEvent, node: ModeTreeItemEntity) {
e.dataTransfer?.setData("uuid", node.uuid);
e.dataTransfer?.setData("type", "mode");
e.dataTransfer?.setData("group", node.is_group ? "true" : "false");
e.dataTransfer?.setData("node_object", JSON.stringify(node));
if (e.dataTransfer) {
e.dataTransfer.dropEffect = "move";
}
},
onDragOver(e: DragEvent, node: ModeTreeItemEntity) {
if (node && node.is_group) {
e.preventDefault();
}
},
onDrop(e: DragEvent, node: ModeTreeItemEntity) {
if (node && node.is_group && node.item_data) {
if (e.dataTransfer) {
const type = e.dataTransfer.getData("type");
if (type == "mode") {
const uuid = e.dataTransfer.getData("uuid");
const group = e.dataTransfer.getData("group");
if (
typeof uuid == "string" &&
type &&
type.length > 0 &&
group &&
group.length > 0
) {
if (group == "true") {
const mode_group = GlobalData.getInstance().mode_groups.find(
(item) => item && (item as any).uuid == uuid
);
if (mode_group) {
if (mode_group.parent_uuid == node.item_data.uuid) {
return;
}
GlobalData.getInstance()
.getCurrentClient()
?.editModeGroup(
mode_group.uuid,
mode_group.name,
node.item_data.uuid
);
} else {
console.log("can't find mode group, uuid:" + uuid);
}
} else if (group == "false") {
const mode = GlobalData.getInstance().modes.find(
(item) => item && (item as any).uuid == uuid
);
if (mode) {
if (mode.group_uuid == node.item_data.uuid) {
return;
}
GlobalData.getInstance()
.getCurrentClient()
?.editMode(
mode.uuid,
mode.name,
mode.number,
node.item_data.uuid
);
} else {
console.log("can't find mode, uuid:" + uuid);
}
}
}
} else {
console.log("type error");
}
}
}
},
};
},
});

88
src/components/PlanTree.vue
View File

@ -10,12 +10,17 @@
class="full-width"
clickable
:disable="!$store.state.power_state"
:draggable="prop.node.uuid != '' && $store.state.power_state"
@dragstart="(evt) => onDragStart(evt, prop.node)"
@dragover="(evt) => onDragOver(evt, prop.node)"
@drop="(evt) => onDrop(evt, prop.node)"
@dblclick="
(evt) => !prop.node.is_group && runPlan(prop.node.item_data)
"
>
<q-item-section avatar>
<q-icon
style="pointer-events: none"
:name="
prop.node.is_group
? 'img:source_icon/group.png'
@ -98,7 +103,8 @@
v-close-popup
v-if="
prop.node.item_data &&
power_on_plan == prop.node.item_data.uuid
power_on_plan == prop.node.item_data.uuid &&
!prop.node.is_group
"
@click="
(evt) => unsetPowerOnPlan(evt, prop.node.item_data.uuid)
@ -163,11 +169,11 @@ import PlanGroupDialog from "src/components/PlanGroupDialog.vue";
import PlanDialog from "src/components/PlanDialog.vue";
import { Common } from "src/common/Common";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
import { useQuasar, extend } from "quasar";
import { useI18n } from "vue-i18n";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { Protocol } from "src/entities/WSProtocol";
import { PlanEntity } from "src/entities/PlanEntity";
import { PlanEntity, PlanTreeItemEntity } from "src/entities/PlanEntity";
import { NotifyMessage } from "src/common/ClientConnection";
export default defineComponent({
@ -219,7 +225,7 @@ export default defineComponent({
console.log(a);
},
async deleteItem(
evt: PointerEvent | null,
evt: MouseEvent | null,
is_group: boolean,
uuid: string
) {
@ -262,14 +268,84 @@ export default defineComponent({
timeout: 1500,
});
},
unsetPowerOnPlan(evt: PointerEvent, uuid: string) {
unsetPowerOnPlan(evt: MouseEvent, uuid: string) {
evt.stopPropagation();
GlobalData.getInstance().getCurrentClient()?.setPowerOnPlan("");
},
setPowerOnPlan(evt: PointerEvent, uuid: string) {
setPowerOnPlan(evt: MouseEvent, uuid: string) {
evt.stopPropagation();
GlobalData.getInstance().getCurrentClient()?.setPowerOnPlan(uuid);
},
onDragStart(e: DragEvent, node: PlanTreeItemEntity) {
e.dataTransfer?.setData("uuid", node.uuid);
e.dataTransfer?.setData("type", "plan");
e.dataTransfer?.setData("group", node.is_group ? "true" : "false");
e.dataTransfer?.setData("node_object", JSON.stringify(node));
if (e.dataTransfer) {
e.dataTransfer.dropEffect = "move";
}
},
onDragOver(e: DragEvent, node: PlanTreeItemEntity) {
if (node && node.is_group) {
e.preventDefault();
}
},
onDrop(e: DragEvent, node: PlanTreeItemEntity) {
if (node && node.is_group && node.item_data) {
if (e.dataTransfer) {
const type = e.dataTransfer.getData("type");
if (type == "plan") {
const uuid = e.dataTransfer.getData("uuid");
const group = e.dataTransfer.getData("group");
if (
typeof uuid == "string" &&
type &&
type.length > 0 &&
group &&
group.length > 0
) {
if (group == "true") {
const plan_group = GlobalData.getInstance().plan_groups.find(
(item) => item && (item as any).uuid == uuid
);
if (plan_group) {
if (plan_group.parent_uuid == node.item_data.uuid) {
return;
}
GlobalData.getInstance()
.getCurrentClient()
?.editPlanGroup(
plan_group.uuid,
plan_group.name,
node.item_data.uuid
);
} else {
console.log("can't find plan group, uuid:" + uuid);
}
} else if (group == "false") {
const plan = GlobalData.getInstance().plans.find(
(item) => item && (item as any).uuid == uuid
);
if (plan) {
if (plan.group_uuid == node.item_data.uuid) {
return;
}
const entity = extend(false, plan) as PlanEntity;
entity.group_uuid = node.item_data.uuid;
GlobalData.getInstance()
.getCurrentClient()
?.editPlan(entity);
} else {
console.log("can't find plan, uuid:" + uuid);
}
}
}
} else {
console.log("type error");
}
}
}
},
};
},
});

1
src/components/PollingTree.vue
View File

@ -19,6 +19,7 @@
>
<q-item-section avatar>
<q-icon
style="pointer-events: none"
:name="
prop.node.is_group
? 'img:source_icon/group.png'

89
src/components/SignalSourceTree.vue
View File

@ -6,8 +6,10 @@
class="full-width"
clickable
:disable="!$store.state.power_state"
:draggable="!prop.node.is_group && $store.state.power_state"
:draggable="prop.node.uuid != '' && $store.state.power_state"
@dragstart="(evt) => onDragStart(evt, prop.node)"
@dragover="(evt) => onDragOver(evt, prop.node)"
@drop="(evt) => onDrop(evt, prop.node)"
@click="
$store.commit(
'setSelectedSignalSource',
@ -23,8 +25,10 @@
: 'none',
}"
>
<!-- {{ prop.node }} -->
<q-item-section avatar>
<q-icon
style="pointer-events: none"
:name="
prop.node.is_group
? 'img:source_icon/group.png'
@ -168,14 +172,17 @@
</template>
<script lang="ts">
import { defineComponent, computed, onMounted, ref, nextTick } from "vue";
import { defineComponent, computed, onMounted, ref } from "vue";
import { useStore } from "src/store";
import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
import {
SignalSourceEntity,
SignalSourceTreeItemEntity,
} from "src/entities/SignalSourceEntity";
import SignalSourceGroupDialog from "src/components/SignalSourceGroupDialog.vue";
import SignalSourceDialog from "src/components/SignalSourceDialog.vue";
import { Common } from "src/common/Common";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
import { useQuasar, extend } from "quasar";
import { useI18n } from "vue-i18n";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { Protocol } from "src/entities/WSProtocol";
@ -229,11 +236,85 @@ export default defineComponent({
onDragStart(e: DragEvent, node: SignalSourceTreeItemEntity) {
e.dataTransfer?.setData("uuid", node.uuid);
e.dataTransfer?.setData("type", "signal_source");
e.dataTransfer?.setData("group", node.is_group ? "true" : "false");
e.dataTransfer?.setData("node_object", JSON.stringify(node));
if (e.dataTransfer) {
e.dataTransfer.dropEffect = "move";
}
},
onDragOver(e: DragEvent, node: SignalSourceTreeItemEntity) {
if (node && node.is_group && !node.item_data?.system_default) {
e.preventDefault();
}
},
onDrop(e: DragEvent, node: SignalSourceTreeItemEntity) {
if (
node &&
node.is_group &&
node.item_data &&
!node.item_data.system_default
) {
if (e.dataTransfer) {
const type = e.dataTransfer.getData("type");
if (type == "signal_source") {
const uuid = e.dataTransfer.getData("uuid");
const group = e.dataTransfer.getData("group");
if (
typeof uuid == "string" &&
type &&
type.length > 0 &&
group &&
group.length > 0
) {
if (group == "true") {
const signal_source_group =
GlobalData.getInstance().signal_source_groups.find(
(item) => item && (item as any).uuid == uuid
);
if (signal_source_group) {
if (
signal_source_group.parent_uuid == node.item_data.uuid
) {
return;
}
GlobalData.getInstance()
.getCurrentClient()
?.editSignalSourceGroup(
signal_source_group.uuid,
signal_source_group.name,
node.item_data.uuid
);
} else {
console.log("can't find signal source group, uuid:" + uuid);
}
} else if (group == "false") {
const signal_source =
GlobalData.getInstance().signal_source.find(
(item) => item && (item as any).uuid == uuid
);
if (signal_source) {
if (signal_source.group_uuid == node.item_data.uuid) {
return;
}
const entity = extend(
false,
signal_source
) as SignalSourceEntity;
entity.group_uuid = node.item_data.uuid;
GlobalData.getInstance()
.getCurrentClient()
?.editSignalSource(entity);
} else {
console.log("can't find signal source, uuid:" + uuid);
}
}
}
} else {
console.log("type error");
}
}
}
},
getItemIcon(item_type: string) {
return Common.getSignalSourceIcon(item_type);
},

5
src/i18n/en-US/index.ts
View File

@ -295,4 +295,9 @@ export default {
"open window": "Open Window",
"close all windows": "Close All Windows",
"select data(DBP) file": "Select Data(DBP) File",
"please check server state, or check server ip address!":
"Please Check Server State, Or Check Server Ip Address!",
"connect time out!": "Connect Time Out!",
"login fail!": "Login Fail!",
"unset power on start": "UnSet Power On Start",
};

72
src/layouts/MainLayout.vue
View File

@ -1,5 +1,5 @@
<template>
<q-layout view="hHh lpR fFf" @mousemove="onMouseMove">
<q-layout view="hHh lpR fFf">
<div v-show="$store.state.initialized">
<!-- header -->
<q-header
@ -22,16 +22,9 @@
<div class="row">
<!-- left -->
<div
v-if="landspace && show_left_tool_bar"
v-if="landspace"
class="col-auto overflow-auto"
style="border: 1px solid #bdbdbd; max-width: 45vw"
v-touch-pan.left.prevent.mouse="
(evt) => {
if (evt.offset.x < -100 && evt.duration < 1000) {
show_left_tool_bar = false;
}
}
"
@click="(evt) => evt.stopPropagation()"
>
<left-tool-bar />
@ -47,15 +40,8 @@
v-if="landspace"
class="col-auto overflow-auto"
style="border: 1px solid #bdbdbd; max-width: 45vw"
v-touch-pan.right.prevent.mouse="
(evt) => {
if (evt.offset.x > 100 && evt.duration < 1000) {
show_right_tool_bar = false;
}
}
"
>
<right-tool-bar v-if="show_right_tool_bar" />
<right-tool-bar />
</div>
</div>
</q-page-container>
@ -109,36 +95,6 @@
</q-page-container>
</div>
</q-layout>
<div class="float-buttons">
<div
v-if="!show_left_tool_bar && mouse_page_left_flag"
class="absolute"
style="top: 45%"
>
<q-btn
icon="keyboard_arrow_right"
flat
round
@click="show_left_tool_bar = true"
>
<q-tooltip>{{ $t("open left tool bar") }}</q-tooltip>
</q-btn>
</div>
<div
v-if="!show_right_tool_bar && mouse_page_right_flag"
class="absolute-right"
style="top: 45%"
>
<q-btn
icon="keyboard_arrow_left"
flat
round
@click="show_right_tool_bar = true"
>
<q-tooltip>{{ $t("open right tool bar") }}</q-tooltip>
</q-btn>
</div>
</div>
</template>
<script lang="ts">
@ -170,11 +126,6 @@ export default defineComponent({
const landspace = $store.state.landspace;
let show_left_tool_bar = ref(true);
let mouse_page_left_flag = ref(false);
let show_right_tool_bar = ref(true);
let mouse_page_right_flag = ref(false);
const show_back = ref(true);
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
@ -195,26 +146,9 @@ export default defineComponent({
return {
landspace,
show_back,
show_left_tool_bar,
show_right_tool_bar,
mouse_page_left_flag,
mouse_page_right_flag,
loga(a: any) {
console.log(a);
},
onMouseMove(evt: MouseEvent) {
const detect_area = window.innerWidth * 0.2;
if (evt.x < detect_area) {
mouse_page_right_flag.value = false;
mouse_page_left_flag.value = true;
} else if (evt.x + detect_area > window.innerWidth) {
mouse_page_left_flag.value = false;
mouse_page_right_flag.value = true;
} else {
mouse_page_left_flag.value = false;
mouse_page_right_flag.value = false;
}
},
};
},
});

10
src/store/index.ts
View File

@ -257,7 +257,12 @@ class _TreeHelper {
const groups = playload.response[group_name] ?? [];
const items = playload.response[items_name] ?? [];
const root = createTreeItem("", "", $t.t(root_text ?? "root"), true);
const root = createTreeItem("", "", $t.t(root_text ?? "root"), true, {
uuid: "",
name: "",
parent_uuid: "",
group_uuid: "",
});
tree.splice(0, tree.length);
tree.push(root);
@ -679,7 +684,8 @@ export default store(function (/* { ssrContext } */) {
"",
"",
$t.t("signal source"),
true
true,
new SignalSourceEntity()
);
state.signal_source_tree.splice(0, state.signal_source_tree.length);