From 6eb7d3329d16bf5db475128bce70c2f9f82d3344 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 14:10:40 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=98=BE=E7=A4=BA=E9=9A=90=E8=97=8F=E5=A4=84?=
 =?UTF-8?q?=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/maps/bd-map.vue           |  2 +-
 .../custom-module/data-rendering/index.vue    |  6 ++--
 .../common/custom-module/model-icon/index.vue |  4 +++
 .../custom-module/model-image/index.vue       |  4 +++
 .../common/custom-module/model-text/index.vue |  2 +-
 .../model-custom/components/index.vue         | 28 +++++++++++++------
 src/utils/index.ts                            | 11 +++++---
 7 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/components/base/maps/bd-map.vue b/src/components/base/maps/bd-map.vue
index 81b1e563..a8596e9b 100644
--- a/src/components/base/maps/bd-map.vue
+++ b/src/components/base/maps/bd-map.vue
@@ -87,7 +87,7 @@ export default defineComponent({
                     map.value.panTo(e.point);
                     lat.value = e.point.lat;
                     lng.value = e.point.lng;
-                    context.emit('point', lng, lat);
+                    context.emit('point', lng.value, lat.value);
                 });
 
                 // 设置标注提示信息
diff --git a/src/components/common/custom-module/data-rendering/index.vue b/src/components/common/custom-module/data-rendering/index.vue
index 5835d54f..8fd714d5 100644
--- a/src/components/common/custom-module/data-rendering/index.vue
+++ b/src/components/common/custom-module/data-rendering/index.vue
@@ -1,6 +1,6 @@
 <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: ${ item.is_enable == '1' ? ((list.length - 1) - index) : -999};`">
+        <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, item.is_enable) }; 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, item.is_enable) };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>
@@ -187,7 +187,7 @@ watch(() => props.customList, async (val) => {
  * @param {number} [max_size] - 可选参数，用于计算最大宽度或高度
  * @returns {string} - 返回一个表示百分比或特定值的字符串，用于CSS样式
  */
- const percentage_count = (val: number, data_follow: { id: string, type: string }, type: string, is_auto?: string, max_size?: number) => {
+ const percentage_count = (val: number, data_follow: { id: string, type: string }, type: string, is_auto?: string, max_size?: number, is_enable?: string) => {
     // 检查类型是否为'left'或'top'，如果是，则根据跟随数据计算样式
     if (['left', 'top'].includes(type)) {
         const { id = '', type: follow_type = 'left' } = data_follow || { id: '', type: 'left' };
@@ -213,7 +213,7 @@ watch(() => props.customList, async (val) => {
             }
         } else {
             // 如果is_auto未设置或条件不满足，则根据比例缩放val并返回
-            return `${val * props.scale}px`;
+            return is_enable == '1' ? `${val * props.scale}px` : '0px';
         }
     }
 }
diff --git a/src/components/common/custom-module/model-icon/index.vue b/src/components/common/custom-module/model-icon/index.vue
index e806e13e..9bce3799 100644
--- a/src/components/common/custom-module/model-icon/index.vue
+++ b/src/components/common/custom-module/model-icon/index.vue
@@ -100,6 +100,10 @@ const data_handling = (data_source_id: string) => {
     if (!isEmpty(props.sourceList.data) && props.isCustom) {
         icon = get_nested_property(props.sourceList.data, data_source_id);
     }
+    if (Array.isArray(icon)) {
+        // 如果是数组，使用 join 方法转换为字符串
+        icon = icon.join(', ');
+    }
     return icon;
 }
 // 外层样式
diff --git a/src/components/common/custom-module/model-image/index.vue b/src/components/common/custom-module/model-image/index.vue
index b7208cf9..5f59de22 100644
--- a/src/components/common/custom-module/model-image/index.vue
+++ b/src/components/common/custom-module/model-image/index.vue
@@ -104,6 +104,10 @@ const data_handling = (data_source_id: string) => {
             image_url = get_nested_property(props.sourceList.data, data_source_id);
         }
     }
+    if (Array.isArray(image_url)) {
+        // 如果是数组，使用 join 方法转换为字符串
+        image_url = image_url.join(', ');
+    }
     return image_url;
 }
 // 图片的样式
diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index 4b20bf0e..70f1dc88 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -234,7 +234,7 @@ watch(() => props.value, (value) => {
             // }
         });
     }
-}, { deep: true });
+}, { immediate:true, deep: true });
 
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index a7153ac6..2de41795 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -31,9 +31,9 @@
                     <VueDraggable v-model="diy_data" :animation="500" target=".sort-target" :scroll="true" @sort="on_sort">
                         <TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col h">
                             <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)">
+                                <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)">
                                     <el-icon class="iconfont icon-drag size-16 cr-d" />
-                                    <div class="text-line-1 flex align-c" style="width: 60%;">
+                                    <div class="text-line-1 flex align-c" style="width: 60%;" @dblclick="double_click(index)">
                                         <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>
@@ -43,7 +43,7 @@
                                     </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-edit size-16 cr-primary do-not-trigger two-click"  @click.stop="on_edit(index)" />
                                         <el-icon class="iconfont icon-close-round-o size-16" @click.stop="del(index)" />
                                     </div>
                                 </li>
@@ -72,7 +72,7 @@
                                 <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>
+                                            <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'" :is-enable="item.is_enable" @container_change="(...value: [number,  number]) => container_change(...value, index, item.id)"></model-text>
                                         </template>
                                         <template v-else-if="item.key == 'img'">
                                             <model-image :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" :img-params="showData?.data_logo || ''"></model-image>
@@ -243,11 +243,23 @@ 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' ? '显示' : '隐藏'));
+    if (typeof index === 'number' && !isNaN(index)) {
+        // 获取当前点击的元素
+        const item = diy_data.value[index];
+        item.is_enable = item.is_enable == '1' ? '0' : '1';
+        // 隐藏之后重新计算跟随组件的位置
+        const { com_width, com_height } = item.com_data;
+        const width = item.is_enable == '0' ? 0 : com_width;
+        const height = item.is_enable == '0' ? 0 : com_height;
+        const filter_index = diy_data.value.findIndex(find_item => item.id == find_item.com_data?.data_follow?.id);
+        if (filter_index != -1) {
+            diy_data_handle(diy_data.value, item.id, item.location, width, height);
+        }
+        // 最后记录数据，避免中间数据出现缺失
+        operation_end(item.new_name + (item.is_enable == '1' ? '显示' : '隐藏'));
+    }
 }
 
 const on_edit = (index: number) => {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index fda6c07e..662bd664 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -967,6 +967,7 @@ export const diy_data_handle = (data: any, old_id: string, new_val: any, com_wid
  */
 interface Item {
     id: string;
+    is_enable: string;
     location: { x: number; y: number };
     com_data: { com_width: number; com_height: number };
 }
@@ -990,11 +991,13 @@ export const get_container_location = (list: Item[], id: string, type: 'left' |
     // 遍历项列表，寻找匹配给定ID的项
     for (const item of list) {
         if (item.id === id) {
-            // 解构获取项的位置和组件数据，如果没有提供则使用默认值
-            const { location = { x: 0, y: 0 }, com_data = { com_width: 0, com_height: 0 } } = item;
+            // 解构获取项的位置和组件数据，如果没有提供则使用默认
+            const { location = { x: 0, y: 0 }, com_data = { com_width: 0, com_height: 0 }, is_enable = '0' } = item;
+            const width = is_enable == '1' ? com_data.com_width : 0;
+            const height = is_enable == '1' ? com_data.com_height : 0;
             // 计算新的x和y坐标，根据组件的宽度/高度和间距
-            const new_x = location.x + com_data.com_width + spacing;
-            const new_y = location.y + com_data.com_height + spacing;
+            const new_x = location.x + width + spacing;
+            const new_y = location.y + height + spacing;
 
             // 根据type参数更新x或y坐标
             if (type === 'left') {