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

src/hooks/eventHandler.hook.ts

@@ -88,6 +88,15 @@ export const eventCommonHandler = (
             EventBus.emit(elementList[j].elementId[k] + type, params);
           }
         }
+      } else if (elementList[j].movement == 'style') {
+        // 修改组件样式
+        // for (let k = 0; k < elementList[j].elementId.length; k++) {}
+        if (componentList[i].id == elementList[j].elementId) {
+          obj = componentList[i];
+          index = i;
+          obj.option = elementList[j].option;
+          chartEditStore.updateComponentList(index, obj);
+        }
       }
     }
   }

src/packages/components/Icons/Default/Icon/config.vue

@@ -2,10 +2,19 @@
   <collapse-item name="属性" :expanded="true">
     <setting-item-box name="样式">
       <setting-item name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.color"
+        ></n-color-picker>
       </setting-item>
       <setting-item name="尺寸">
-        <n-input-number v-model:value="optionData.size" size="small" :min="0" placeholder="尺寸"></n-input-number>
+        <n-input-number
+          v-model:value="optionData.size"
+          size="small"
+          :min="0"
+          placeholder="尺寸"
+        ></n-input-number>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="快捷旋转">
@@ -17,34 +26,33 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
-import { option } from './config'
-import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+  import { PropType } from 'vue';
+  import { option } from './config';
+  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
 
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true
-  }
-})
-
-// 旋转方式
-const rotateMode = [
-  {
-    value: 0,
-    label: '0°'
-  },
-  {
-    value: 90,
-    label: '90°'
-  },
-  {
-    value: 180,
-    label: '180°'
-  },
-  {
-    value: 270,
-    label: '270°'
-  }
-]
+  const props = defineProps({
+    optionData: {
+      type: Object as PropType<typeof option>,
+      required: true,
+    },
+  });
+  // 旋转方式
+  const rotateMode = [
+    {
+      value: 0,
+      label: '0°',
+    },
+    {
+      value: 90,
+      label: '90°',
+    },
+    {
+      value: 180,
+      label: '180°',
+    },
+    {
+      value: 270,
+      label: '270°',
+    },
+  ];
 </script>

src/packages/components/Icons/Default/Icon/index.vue

@@ -2,7 +2,7 @@
   <div class="go-icon-box">
     <GoIconify
       :icon="dataset || ''"
-      :color="color"
+      :color="chartConfig.option.color"
       :width="size"
       :rotate="rotate"
       @click="clickBtn"
@@ -29,8 +29,8 @@
       required: true,
     },
   });
-  const { w, h } = toRefs(props.chartConfig.attr);
-  const { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
+  let { w, h } = toRefs(props.chartConfig.attr);
+  let { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
   const clickBtn = (val) => {
     eventHandlerHook(
       chartEditStore.getComponentList,

src/packages/components/Zhiku/Zhiku/HuoQingButton/index.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="HuoQingButton" @click="clickBtn">
     <n-button text>
-      <Button :w="w" :h="h" :dataset="option.dataset" :dataStyle="option.dataStyle" />
+      <Button
+        :w="w"
+        :h="h"
+        :dataset="chartConfig.option.dataset"
+        :dataStyle="chartConfig.option.dataStyle"
+      />
     </n-button>
   </div>
 </template>

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

@@ -0,0 +1,29 @@
+<template>
+  <component :is="config" :optionData="data" />
+</template>
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+
+  const emits = defineEmits(['changeoption']);
+  const props = defineProps({
+    optionData: {
+      type: String,
+    },
+    config: {
+      type: String,
+    },
+    index: {
+      type: Number,
+    },
+  });
+  const data = ref(JSON.parse(props.optionData));
+  watch(
+    () => data.value,
+    (newData) => {
+      console.log(newData);
+      emits('changeoption', props.index, newData);
+    },
+    { deep: true },
+  );
+</script>
+<style lang="scss" scoped></style>

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

@@ -54,15 +54,26 @@
             <n-divider vertical style="height: 450px" />
 
             <div class="movement-type">
-              <div class="movement-type__element" v-if="panel.movement != 'newaddress'">
-                关联组件（可多选）
-                <n-select
-                  v-model:value="panel.elementId"
-                  placeholder="请选择"
-                  :options="elementSelectOptions"
-                  multiple
-                />
-              </div>
+              <template v-if="panel.movement != 'newaddress'">
+                <div class="movement-type__element" v-if="panel.movement == 'style'">
+                  关联组件
+                  <n-select
+                    v-model:value="panel.elementId"
+                    placeholder="请选择"
+                    :options="elementSelectOptions"
+                    @update:value="handleUpdateValue(panel.elementId, panel.movement, panelIndex)"
+                  />
+                </div>
+                <div class="movement-type__element" v-else>
+                  关联组件（可多选）
+                  <n-select
+                    v-model:value="panel.elementId"
+                    placeholder="请选择"
+                    :options="elementSelectOptions"
+                    multiple
+                  />
+                </div>
+              </template>
               <div class="movement-type__element" v-if="panel.movement == 'map'">
                 组件交互方法
                 <n-select
@@ -117,6 +128,17 @@
                   :options="messageOptions"
                 />
               </div>
+              <!-- 自定义配置项 -->
+              <div class="movement-component" v-if="panel.movement == 'style'">
+                <EventComponent
+                  v-if="chartConfig[panelIndex]"
+                  :config="chartConfig[panelIndex].config"
+                  :optionData="JSON.stringify(targetDataOption[panelIndex])"
+                  :index="panelIndex"
+                  @changeoption="changeOption"
+                />
+                <!-- <component :is="conKey[panelIndex]" :optionData="targetDataOption[panelIndex]" /> -->
+              </div>
             </div>
           </div>
         </n-tab-pane>
@@ -126,19 +148,41 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, defineEmits, onMounted } from 'vue';
+  import { ref, defineEmits, onMounted, watch, defineAsyncComponent } from 'vue';
   import { eventTypeOptions, movementTypeOptions } from '../../../../hooks/eventData.hook';
-  import { goDialog } from '@/utils';
+  import { goDialog, acquiesceAsyncComponent, previewPath, loadAsyncComponent } from '@/utils';
   import { DesktopOutline } from '@vicons/ionicons5';
   import { useTargetData } from '../../../../hooks/useTargetData.hook';
   import { getMenuList } from '@/api/sys/menu';
-  import { previewPath } from '@/utils';
   import { projectListApi } from '@/api/path/project.api';
   import { funSelectOptions } from '@/hooks/ceshiFun.hook';
   import { getLoad } from '@/api/sys/sysDataItemDetail';
 
-  const { chartEditStore } = useTargetData();
-
+  const EventComponent = loadAsyncComponent(() => import('./EventComponent.vue'));
+  const { targetData, chartEditStore } = useTargetData();
+  const targetDataOption = ref([]);
+  const chartConfig = ref([]);
+  // 选择组件样式
+  const handleUpdateValue = (value, movement, index) => {
+    chartEditStore.getComponentList.map((item) => {
+      if (item.id == value) {
+        targetDataOption.value[index] = item.option;
+        chartConfig.value[index] = item.chartConfig;
+        chartConfig.value[index].config = acquiesceAsyncComponent(
+          () =>
+            import(
+              '../../../../../../../../packages/components/' +
+                item.chartConfig.package +
+                '/' +
+                item.chartConfig.category +
+                '/' +
+                item.chartConfig.key +
+                '/config.vue'
+            ),
+        );
+      }
+    });
+  };
 
   const routeOptions = ref([]);
   const skipTypeOptions = ref([
@@ -172,6 +216,13 @@
     },
     eventType: String,
   });
+  props.eventData.movementList.forEach((element, index) => {
+    targetDataOption.value[index] = element.option;
+    chartConfig.value[index] = element.chartConfig;
+  });
+  props.eventData.movementList.forEach((element, index) => {
+    targetDataOption.value[index] = element.option;
+  });
   const emits = defineEmits(['changeTab']);
   const eventValue = ref(props.eventData.type);
   const handleEventTypeChange = (value: string) => {
@@ -185,6 +236,8 @@
     movementTypeOptions.find((item) => item.value === props.eventData.movementList[0].movement)
       ?.label;
   const handleAdd = () => {
+    movementTab.value =
+      '动作' + (props.eventData.movementList.length + 1) + '-' + getEventName('reveal');
     props.eventData.movementList.push({
       movement: 'reveal',
       elementId: '',
@@ -197,6 +250,8 @@
         message: '是否删除此动作?',
         onPositiveCallback: () => {
           props.eventData.movementList.splice(index - 1, 1);
+          targetDataOption.value.splice(index - 1, 1);
+          chartConfig.value.splice(index - 1, 1);
           if (index > 1) {
             const movement = props.eventData.movementList[index - 2].movement;
             movementTab.value = '动作' + (index - 1) + '-' + getEventName(movement);
@@ -282,6 +337,28 @@
     getPublishedPageList();
     getMsgTypeList();
   });
+  const changeOption = (index, data) => {
+    props.eventData.movementList[index].option = data;
+    props.eventData.movementList[index].chartConfig = chartConfig.value[index];
+  };
+  watch(
+    () => targetDataOption.value,
+    (newData) => {
+      newData.forEach((item, index) => {
+        props.eventData.movementList[index].option = item;
+      });
+    },
+    { deep: true },
+  );
+  watch(
+    () => chartConfig.value,
+    (newData) => {
+      newData.forEach((item, index) => {
+        props.eventData.movementList[index].chartConfig = item;
+      });
+    },
+    { deep: true },
+  );
 </script>
 <style lang="scss" scoped>
   .event-item {
@@ -321,4 +398,8 @@
   .movement-type__element {
     margin-top: 10px;
   }
+  .movement-component {
+    height: 400px;
+    overflow: auto;
+  }
 </style>

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

@@ -94,9 +94,8 @@
   import { useTargetData } from '../../../hooks/useTargetData.hook';
   import { icon } from '@/plugins';
   import noData from '@/assets/images/canvas/noData.png';
-  import { goDialog } from '@/utils';
+  import { goDialog, loadAsyncComponent } from '@/utils';
   import { HandLeftOutline } from '@vicons/ionicons5';
-  import { loadAsyncComponent } from '@/utils';
   import { eventTypeOptions } from '../../../hooks/eventData.hook';
 
   const EventItem = loadAsyncComponent(() => import('./components/EventItem.vue'));
@@ -130,7 +129,7 @@
   };
 
   // 新增编辑动作
-  const saveEvents = () => {
+  const saveEvents = async () => {
     targetData.value.events.interactConfigEvents = interactConfigItem.value;
     closeEvents();
   };
@@ -195,7 +194,6 @@
           '-' +
           getEventName(interactConfigItem.value[interactConfigItem.value.length - 1].type);
         interactConfigItem.value.splice(index - 1, 1);
-        console.log(eventTab.value);
       },
     });
   };

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

@@ -53,4 +53,8 @@ export const movementTypeOptions: EventOptionsItemType[] = [
     label: '组件通信',
     value: 'communication',
   },
+  {
+    label: '修改组件样式',
+    value: 'style',
+  },
 ];