From 688c5d4f1e23f40f9253845eaf5ceb49f15c65ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 25 Apr 2025 11:11:19 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=98=BE=E7=A4=BA=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-module/data-rendering/index.vue    | 39 ++++++++++---------
 .../components/custom-config/index.vue        |  6 +--
 .../model-custom/components/index.vue         | 34 ++++++++++++----
 .../components/top-side-operation/index.vue   |  7 +++-
 4 files changed, 56 insertions(+), 30 deletions(-)

diff --git a/src/components/common/custom-module/data-rendering/index.vue b/src/components/common/custom-module/data-rendering/index.vue
index ee127ac2..5835d54f 100644
--- a/src/components/common/custom-module/data-rendering/index.vue
+++ b/src/components/common/custom-module/data-rendering/index.vue
@@ -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;
diff --git a/src/components/model-custom/components/custom-config/index.vue b/src/components/model-custom/components/custom-config/index.vue
index 3b77770a..927a024e 100644
--- a/src/components/model-custom/components/custom-config/index.vue
+++ b/src/components/model-custom/components/custom-config/index.vue
@@ -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);
                 // 更改自定义组的历史记录值
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index 3ac7eb4c..a7153ac6 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -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>
diff --git a/src/components/model-custom/components/top-side-operation/index.vue b/src/components/model-custom/components/top-side-operation/index.vue
index 4fd759a0..1bbaed9f 100644
--- a/src/components/model-custom/components/top-side-operation/index.vue
+++ b/src/components/model-custom/components/top-side-operation/index.vue
@@ -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>