sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

自定义添加页面显示处理

v1.3.0
于肖磊 2025-04-25 11:11:19 +08:00
parent c32de35305
commit 688c5d4f1e
4 changed files with 56 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/common/custom-module/data-rendering/index.vue
View File

@ -1,23 +1,25 @@
<template>
<div ref="allSignList" class="w h re custom-other">
<div v-for="(item, index) in list" :key="item.id" ref="signList" :data-id="item.id" :data-location-x="item.location.x" :data-location-y="item.location.y" :class="`main-content flex-row ${ animation_class(item.com_data) }`" :style="`left: ${ percentage_count(item.location.x, item.com_data.data_follow, 'left') }; top: ${ percentage_count(item.location.y, item.com_data.data_follow, 'top') }; width: ${ percentage_count(item.com_data.com_width, item.com_data.data_follow, 'width', item.com_data.is_width_auto, item.com_data.max_width) }; height: ${ percentage_count(item.com_data.com_height, item.com_data.data_follow, 'height', item.com_data.is_height_auto, item.com_data.max_height) };z-index: ${ (list.length - 1) - index};`">
<template v-if="item.key == 'text'">
<model-text :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :title-params="showData?.data_name || 'name'" :is-display-panel="true"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :img-params="showData?.data_logo || ''" :is-display-panel="true"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :is-display-panel="true"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :is-display-panel="true"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :is-display-panel="true"></model-panel>
</template>
<template v-else-if="item.key == 'custom-group'">
<model-custom-group :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :group-source-list="groupSourceList" :show-data="showData" :data-height="item.com_data.custom_height" :data-width="item.com_data.com_width" :is-custom="isCustom" :is-display-panel="true"></model-custom-group>
<div v-for="(item, index) in list" :key="item.id" ref="signList" :data-id="item.id" :data-location-x="item.location.x" :data-location-y="item.location.y" :class="`main-content flex-row ${ animation_class(item.com_data) }`" :style="`left: ${ percentage_count(item.location.x, item.com_data.data_follow, 'left') }; top: ${ percentage_count(item.location.y, item.com_data.data_follow, 'top') }; width: ${ percentage_count(item.com_data.com_width, item.com_data.data_follow, 'width', item.com_data.is_width_auto, item.com_data.max_width) }; height: ${ percentage_count(item.com_data.com_height, item.com_data.data_follow, 'height', item.com_data.is_height_auto, item.com_data.max_height) };z-index: ${ item.is_enable == '1' ? ((list.length - 1) - index) : -999};`">
<template v-if="item.is_enable == '1'">
<template v-if="item.key == 'text'">
<model-text :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :title-params="showData?.data_name || 'name'" :is-display-panel="true"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :img-params="showData?.data_logo || ''" :is-display-panel="true"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :is-display-panel="true"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :is-display-panel="true"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :is-display-panel="true"></model-panel>
</template>
<template v-else-if="item.key == 'custom-group'">
<model-custom-group :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :group-source-list="groupSourceList" :show-data="showData" :data-height="item.com_data.custom_height" :data-width="item.com_data.com_width" :is-custom="isCustom" :is-display-panel="true"></model-custom-group>
</template>
</template>
</div>
</div>
@ -29,6 +31,7 @@ import { location_compute } from '@/utils';
interface CustomItem {
id: string | number;
key: string;
is_enable: string;
location: {
x: number;
y: number;

6
src/components/model-custom/components/custom-config/index.vue
View File

@ -193,7 +193,7 @@ const custom_edit = (id: string, list: diy, width: number, height: number, data_
};
// 初始化的时候默认生成一条新数据，避免用户无法回到最初的记录
onBeforeMount(() => {
const new_data = [{ title: '初始化', name: formatDate('HH点mm分ss秒'), height: center_height.value, value: props.customList }];
const new_data = [{ title: '初始化', time: formatDate('HH点mm分ss秒'), height: center_height.value, value: props.customList }];
if (props.configType == 'custom') {
// 传递给store进行存储
data_source_store.set_custom_records(new_data);
@ -233,7 +233,7 @@ const operation_end = (title:string, is_compare: boolean = true) => {
// 获取历史数据
const new_data = old_data_handle(data_source_store?.custom_records || [], data_source_store?.custom_records_index || -1);
// 新增一条新数据
new_data.unshift({ title: title, name: formatDate('HH点mm分ss秒'), height: center_height.value, value: new_compare_data });
new_data.unshift({ title: title, time: formatDate('HH点mm分ss秒'), height: center_height.value, value: new_compare_data });
// 传递给store进行存储
data_source_store.set_custom_records(new_data);
// 操作之后更新数据
@ -242,7 +242,7 @@ const operation_end = (title:string, is_compare: boolean = true) => {
// 获取历史数据
const new_data = old_data_handle(data_source_store?.custom_group_records || [], data_source_store?.custom_group_records_index || -1);
// 新增一条新数据
new_data.unshift({ title: title, name: formatDate('HH点mm分ss秒'), height: center_height.value, value: new_compare_data });
new_data.unshift({ title: title, time: formatDate('HH点mm分ss秒'), height: center_height.value, value: new_compare_data });
// 更改自定义组的内容
data_source_store.set_custom_group_records(new_data);
// 更改自定义组的历史记录值

34
src/components/model-custom/components/index.vue
View File

@ -33,7 +33,7 @@
<template v-if="!isEmpty(diy_data)">
<li v-for="(item, index) in diy_data" :key="index" :class="['flex-row gap-y-8 re align-c drawer-drag', { 'drawer-custom-drag-bg': item.show_tabs == '1' }]" @click="on_choose(index, item.show_tabs)" @dblclick="double_click(index)">
<el-icon class="iconfont icon-drag size-16 cr-d" />
<div class="text-line-1 flex align-c" style="width: 70%;">
<div class="text-line-1 flex align-c" style="width: 60%;">
<template v-if="edit_index == index">
<el-input v-model="item.new_name" placeholder="请输入组件别名" size="small" clearable type="textarea" class="flex-1 do-not-trigger" :rows="1" resize="none" />
</template>
@ -42,6 +42,7 @@
</template>
</div>
<div class="abs draggable-icon" :style="item.show_tabs == '1' ? 'opacity: 1;' : 'opacity: 0.5;'">
<el-icon :class="`iconfont eye-before size-16 ${item.is_enable == '1' ? 'icon-eye' : 'icon-eye-close'}`" @click.stop="on_show_or_hidden(index)" />
<el-icon class="iconfont icon-edit size-16 cr-primary do-not-trigger two-click" @click="on_edit(index)" />
<el-icon class="iconfont icon-close-round-o size-16" @click.stop="del(index)" />
</div>
@ -59,7 +60,7 @@
<!-- 视图渲染 -->
<div class="main">
<div class="model-content">
<right-side-operation v-if="typeof select_index === 'number' && !isNaN(select_index) && diy_data.length > 0" v-model:index="select_index" v-model:data-length="diy_data.length" @del="del" @copy="copy" @previous_layer="previous_layer" @underlying_layer="underlying_layer" @top_up="top_up" @bottom_up="bottom_up"></right-side-operation>
<right-side-operation v-if="typeof select_index === 'number' && !isNaN(select_index) && diy_data.length > 0 && diy_data[select_index].is_enable == '1'" v-model:index="select_index" v-model:data-length="diy_data.length" @del="del" @copy="copy" @previous_layer="previous_layer" @underlying_layer="underlying_layer" @top_up="top_up" @bottom_up="bottom_up"></right-side-operation>
<!-- 拖拽区 -->
<div class="model-drag">
<top-side-operation class="model-top-wall" :config-type="props.configType" @back="back" @forward="forward" @handle-history="handle_history"></top-side-operation>
@ -68,8 +69,8 @@
<div class="w h" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
<DraggableContainer v-if="draggable_container" style="z-index:0" :reference-line-visible="true" :disabled="false" reference-line-color="#f00f00" @selectstart.prevent @contextmenu.prevent @dragstart.prevent>
<!-- @mouseover="on_choose(index)" -->
<Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id + item.com_data.is_data_update" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="[`${ animation_class(item.com_data) } `, {'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }]" :style="[`${ item.com_data.is_width_auto == '1' ? 'width: auto;' : '' }${ item.com_data.is_height_auto == '1' ? 'height: auto;' : '' }`, { 'z-index': (diy_data.length - 1) - index }]" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
<div :class="['main-content flex-row', { 'plug-in-border': item.show_tabs == '1' }]">
<Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id + item.com_data.is_data_update" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="[`${ animation_class(item.com_data) } `, {'plug-in-show-component-line': is_show_component_line && item.is_enable == '1', 'plug-in-show-tabs': item.show_tabs == '1' && item.is_enable == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }]" :style="[`${ item.com_data.is_width_auto == '1' ? 'width: auto;' : '' }${ item.com_data.is_height_auto == '1' ? 'height: auto;' : '' }`, { 'z-index': item.is_enable == '1' ? (diy_data.length - 1) - index : -999 }]" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
<div v-if="item.is_enable == '1'" :class="['main-content flex-row', { 'plug-in-border': item.show_tabs == '1' }]">
<template v-if="item.key == 'text'">
<model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :config-loop="configLoop" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId" :title-params="showData?.data_name || 'name'" @container_change="(...value: [number, number]) => container_change(...value, index, item.id)"></model-text>
</template>
@ -242,6 +243,13 @@ onUnmounted(() => {
});
const edit_index = ref(-1);
const on_show_or_hidden = (index: number) => {
// 获取当前点击的元素
const item = diy_data.value[index];
item.is_enable = item.is_enable == '1' ? '0' : '1';
operation_end(item.new_name + (item.is_enable == '1' ? '显示' : '隐藏'));
}
const on_edit = (index: number) => {
if (edit_index.value === index) {
edit_close_processing(index);
@ -251,6 +259,7 @@ const on_edit = (index: number) => {
edit_processing(index);
}
};
// 判断点击的是否是可以点击的区域，其他区域隐藏掉编辑属性
const outerClick = (e: any) => {
if ((!isEmpty(e.target.className) && !e.target.className.includes('do-not-trigger')) && (!isEmpty(e.target.parentNode.className) && !e.target.parentNode.className.includes('do-not-trigger'))) {
@ -753,7 +762,7 @@ const start_drag_area_box = (index: number, event: MouseEvent) => {
diy_data.value.forEach(item => {
const rect2 = { x: item.location.x, y: item.location.y, width: item.com_data.com_width, height: item.com_data.com_height };
// 如果交集或者包裹，返回为1，否则为0
item.is_hot = isRectangleIntersecting(rect1, rect2);
item.is_hot = item.is_enable == '1' ? isRectangleIntersecting(rect1, rect2) : '0';
});
// 当子元素拖拽方法触发后父元素方法不触发
@ -1123,7 +1132,7 @@ const handleKeyUp = (e: KeyboardEvent) => {
const rect2 = { x: item.location.x, y: item.location.y, width: item.com_data.com_width, height: item.com_data.com_height };
const { id = '', type = 'left' } = item.com_data?.data_follow || { id: '', type: 'left' };
// 如果交集或者包裹，返回为1，否则为0
if (isRectangleIntersecting(rect1, rect2) == '1') {
if (isRectangleIntersecting(rect1, rect2) == '1' && item.is_enable == '1') {
// x 轴不小于0 并且不大于容器宽度
if (isWithinBounds(item.location.x + x, item.com_data.com_width, 390) && (id === '' || (id != '' && type == 'top'))) {
item.location.x += x;
@ -1143,8 +1152,8 @@ const handleKeyUp = (e: KeyboardEvent) => {
} else {
// 如果没有热区数据，则直接更新自定义数据中选中组件的位置
diy_data.value.forEach(item => {
// 只更新选中的数据
if (item.show_tabs == '1') {
// 只更新选中的数据和显示的组件
if (item.show_tabs == '1' && item.is_enable == '1') {
const { id = '', type = 'left' } = item.com_data?.data_follow || { id: '', type: 'left' };
// x 轴不小于0 并且不大于容器宽度
if (isWithinBounds(item.location.x + x, item.com_data.com_width, 390) && (id === '' || (id != '' && type == 'top'))) {
@ -1219,4 +1228,13 @@ defineExpose({
}
}
}
.eye-before.icon-eye-close {
color: #ff2222;
}
.eye-before::before {
z-index: 10; // 确保悬浮在内容上层
height: 4rem;
display: flex;
align-items: center;
}
</style>

7
src/components/model-custom/components/top-side-operation/index.vue
View File

@ -16,7 +16,12 @@
<el-dialog v-model="dialogVisible" class="history-dialog" :style="{ top: '80px', left: dialog_left + 'px' }" title="历史记录" width="220" draggable show-close :modal="false" :close-on-click-modal="false" :close-on-press-escape="false">
<div ref="historyDialog" class="history-dialog-content flex-col gap-14">
<div v-for="(item, index1) in history_list" :key="index1" :class="[`history-dialog-item ${props.configType}`, {'active': records_index == index1 }]" @click="handleHistory(index1, records_index !== index1)">
<div class="history-dialog-item-title flex-row gap-5"><span class="item-title text-line-1">{{ item.title }}</span>{{ item.name }}</div>
<div class="history-dialog-item-title flex-row gap-5">
<el-tooltip effect="dark" :disabled="item.title.length < 5" :show-after="200" :hide-after="200" :content="item.title" placement="top">
<span class="item-title text-line-1">{{ item.title }}</span>
</el-tooltip>
{{ item.time }}
</div>
<el-icon v-if="records_index == index1" class="iconfont icon-checked size-14" />
</div>
</div>