Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo

src/hooks/ceshiFun.hook.ts

@@ -0,0 +1,19 @@
+// 地图函数列表
+export function mapFun() {
+  const ceshiClick = () => {
+    console.log('ceshi');
+  };
+  return {
+    ceshiClick,
+  };
+}
+
+// 地图函数列表options
+export const funSelectOptions = [
+  {
+    // 事件名称（用于选择显示）
+    label: 'ceshi点击',
+    // 事件名(用于触发)
+    value: 'ceshiClick',
+  },
+];

src/hooks/eventHandler.hook.ts

@@ -1,6 +1,8 @@
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+import { mapFun } from '@/hooks/ceshiFun.hook';
 
 const chartEditStore = useChartEditStore();
+const ceshiFunction = mapFun();
 
 // 交互事件
 export const eventHandlerHook = (comonentList: any, elementList: any) => {
@@ -11,9 +13,8 @@ export const eventHandlerHook = (comonentList: any, elementList: any) => {
       if (elementList[j].movement == 'newaddress') {
         // 跳转新地址
         window.open(elementList[j].url);
-      }
-      // 显示
-      if (elementList[j].movement == 'reveal') {
+      } else if (elementList[j].movement == 'reveal') {
+        // 显示
         for (let k = 0; k < elementList[j].elementId.length; k++) {
           if (comonentList[i].id == elementList[j].elementId[k]) {
             obj = comonentList[i];
@@ -32,6 +33,13 @@ export const eventHandlerHook = (comonentList: any, elementList: any) => {
             chartEditStore.updateComponentList(index, obj);
           }
         }
+      } else if (elementList[j].movement == 'map') {
+        // 地图事件联动
+        for (let k = 0; k < elementList[j].elementId.length; k++) {
+          if (comonentList[i].id == elementList[j].elementId[k]) {
+            ceshiFunction[elementList[j].funName]();
+          }
+        }
       }
     }
   }

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/components/EventItem.vue

@@ -69,7 +69,6 @@
                   v-model:value="panel.funName"
                   placeholder="请选择"
                   :options="funSelectOptions"
-                  multiple
                 />
               </div>
               <div class="movement-type__element">
@@ -91,8 +90,13 @@
   import { DesktopOutline } from '@vicons/ionicons5';
   import { useTargetData } from '../../../../hooks/useTargetData.hook';
 
-  const { targetData, chartEditStore } = useTargetData();
-  const funSelectOptions = ref([]);
+  const { chartEditStore } = useTargetData();
+  const funSelectOptions = ref([
+    {
+      label: 'ceshi点击',
+      value: 'ceshiClick',
+    },
+  ]);
   const props = defineProps({
     eventData: {
       type: Object,
@@ -147,7 +151,7 @@
   const elementSelectOptions = ref(
     chartEditStore.getComponentList.map((item) => {
       return {
-        label: item.isGroup ? '分组-' + item.id : '组件-' + item.id,
+        label: item.isGroup ? '分组-' + item.chartConfig.title : '组件-' + item.chartConfig.title,
         value: item.id,
       };
     }),

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/index.vue

@@ -19,15 +19,14 @@
     <n-card class="n-card-shallow" size="small">
       <template v-for="(item, cardIndex) in interactConfigItem" :key="cardIndex">
         <n-divider style="margin: 10px 0" />
-        <n-tag
-          :bordered="false"
-          type="primary"
-          closable
-          @click="editEvent(item, cardIndex)"
-          @close="evDeleteEventsFn(cardIndex)"
-        >
-          动作 -- {{ cardIndex + 1 }}
-        </n-tag>
+        <div class="go-flex-between">
+          <n-tag :bordered="false" type="primary">
+            {{ getEventName(item.type) }}
+          </n-tag>
+          <n-button type="tertiary" size="small" @click="showEvent(item, cardIndex)">
+            显示
+          </n-button>
+        </div>
       </template>
     </n-card>
   </n-collapse-item>
@@ -124,28 +123,27 @@
 
   // 关闭事件
   const closeEvents = () => {
+    if (Object.keys(targetData.value.events.interactConfigEvents).length <= 0) {
+      interactConfigItem.value = [];
+    }
     showModal.value = false;
   };
 
   // 新增编辑动作
   const saveEvents = () => {
-    console.log(interactConfigItem.value);
     targetData.value.events.interactConfigEvents = interactConfigItem.value;
-    // if (changIndex.value) {
-    //   targetData.value.events.interactConfigEvents.push({ ...interactConfigItem.value });
-    // } else {
-    //   targetData.value.events.interactConfigEvents.splice(changIndex.value, 1, {
-    //     ...interactConfigItem.value,
-    //   });
-    // }
     closeEvents();
   };
 
   watch(
-    () => interactConfigItem.value,
+    () => targetData.value,
     (newData) => {
-      console.log(newData);
       if (newData) {
+        if (Object.keys(targetData.value.events.interactConfigEvents).length > 0) {
+          interactConfigItem.value = targetData.value.events.interactConfigEvents;
+        } else {
+          interactConfigItem.value = [];
+        }
       }
     },
   );
@@ -169,23 +167,13 @@
       '交互1-' +
       eventTypeOptions.find((item) => item.value === interactConfigItem.value[0].type)?.label;
   };
-  const editEvent = (item: any, index: number) => {
+  const showEvent = (item: any, index: number) => {
     showModal.value = true;
     changIndex.value = index;
-  };
-  // 删除模块
-  const evDeleteEventsFn = (index: number) => {
-    goDialog({
-      message: '是否删除此动作?',
-      onPositiveCallback: () => {
-        targetData.value.events.interactConfigEvents.splice(index, 1);
-      },
-    });
+    eventTab.value = '交互' + (index + 1) + '-' + getEventName(item.type);
   };
   const handleAdd = () => {
-    console.log(interactConfigItem.value);
     eventTab.value = '交互' + (interactConfigItem.value.length + 1) + '-' + getEventName('click');
-    console.log(eventTab.value);
     interactConfigItem.value.push({
       type: 'click',
       movementList: [
@@ -215,4 +203,9 @@
 
 <style lang="scss" scoped>
   @import '../index.scss';
+  .go-flex-between {
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+  }
 </style>

src/views/chart/ContentConfigurations/components/hooks/eventData.hook.ts

@@ -33,4 +33,8 @@ export const movementTypeOptions: EventOptionsItemType[] = [
     label: '数据更新',
     value: 'dataupdate',
   },
+  {
+    label: '地图联动',
+    value: 'map',
+  },
 ];