src/enums/editPageEnum.ts

@@ -40,10 +40,6 @@ export enum MenuEnum {
   UP = 'up',
   // 下移
   DOWN = 'down',
-  // 移出分组
-  MOVEOUTGROUP = 'moveOutGroup',
-  // 移入上一分组
-  MOVEUPGROUP = 'moveUpGroup',
   // 清空剪贴板
   CLEAR = 'clear',
   // 成组

src/hooks/eventHandler.hook.ts

@@ -5,18 +5,14 @@ import { previewUrl } from '@/utils';
 import { EventBus } from '@/utils/eventBus';
 import axiosInstance from '@/api/axios';
 import { translateStr } from '@/api/http';
-import { RequestParamsObjType } from '@/enums/httpEnum';
+import {
+  RequestParamsObjType,
+} from '@/enums/httpEnum';
 
 const chartEditStore = useChartEditStore();
 const ceshiFunction = mapFun();
 // 含有海康视频的组件要特殊处理
-const HKVideoList = [
+const HKVideoList = ['ZhiGan_ModalTimeLine', 'ZhiGan_ModalVideo', 'ZhiGan_SheXiangTouModal','ZhiGan_WuRenJiShiShiHuaMian', 'HuoQingDetailTimeLine'];
-  'ZhiGan_ModalTimeLine',
-  'ZhiGan_ModalVideo',
-  'ZhiGan_SheXiangTouModal',
-  'ZhiGan_WuRenJiShiShiHuaMian',
-  'HuoQingDetailTimeLine',
-];
 //递归获取某个id在数组里的位置或者父id
 export const queryFun = (array, value, peg?: any) => {
   var res = [];
@@ -156,18 +152,24 @@ export const eventCommonHandler = (
           }
         }
       } else if (elementList[j].movement == 'communication') {
+    
         // 组件通信
         for (let k = 0; k < elementList[j].elementId.length; k++) {
           if (componentList[i].id == elementList[j].elementId[k]) {
+            
             EventBus.emit(elementList[j].elementId[k] + type, params);
             
             // 分组内所有组件默认添加通信
             componentList[i]?.groupList?.forEach((groupItem,idx)=>{
-              EventBus.emit(groupItem.id + 'dataupdate', params);
+              EventBus.emit(groupItem.id +"dataupdate", params);
-            });
+            })
           }
+
         }
+
+        
       } else if (elementList[j].movement == 'graphic') {
+
         for (let k = 0; k < elementList[j].elementId.length; k++) {
           if (componentList[i].id == elementList[j].elementId[k]) {
             EventBus.emit(elementList[j].elementId[k] + type, params);
@@ -192,27 +194,23 @@ export const eventCommonHandler = (
           requestContentType,
           requestDataType,
           requestHttpType,
-          requestParams,
+          requestParams
         } = elementList[j].callBackRequest;
 
         // 处理头部
-        let headers: RequestParamsObjType = Object.fromEntries(
+        let headers: RequestParamsObjType = Object.fromEntries(requestParams.Header.map(item => [item.key.toLowerCase(), item.value]));
-          requestParams.Header.map((item) => [item.key.toLowerCase(), item.value]),
-        );
         if(!headers['x-token']){
           headers['x-token'] = localStorage.getItem('X-Token');
         }
         // 清除掉空项
         for (const key in headers) {
-          if (key === '') {
+          if (key === "") {
             delete headers[key];
           }
         }
 
         // params 参数
-        let params: RequestParamsObjType = Object.fromEntries(
+        let params: RequestParamsObjType = Object.fromEntries(requestParams.Params.map(item => [item.key, item.value]));
-          requestParams.Params.map((item) => [item.key, item.value]),
-        );
 
         try {
           const url = new Function(

src/store/modules/chartEditStore/chartEditStore.ts

@@ -528,57 +528,6 @@ export const useChartEditStore = defineStore({
     setDown(isHistory = true) {
       this.wrap(true, isHistory);
     },
-    //递归获取某个id在数组里的位置或者父id
-    queryFun(array, value, peg?: any) {
-      const res = [];
-      function _find(array, value, peg) {
-        array.forEach((item, index) => {
-          if (item.id === value) {
-            if (peg || peg === 0) {
-              res.push(peg);
-            }
-            res.push(index);
-            return;
-          } else if (item.groupList instanceof Array) {
-            _find(item.groupList, value, index);
-          }
-        });
-      }
-      _find(array, value, peg);
-      return res;
-    },
-    // 图层移出分组
-    moveOutGroup() {
-      // 暂不支持多选
-      if (this.getTargetChart.selectId.length > 1) return;
-
-      loadingStart();
-      const data = this.queryFun(this.getComponentList, this.getTargetChart.selectId[0]);
-      if (data.length > 1) {
-        const item = this.getComponentList[data[0]].groupList[data[1]];
-        this.componentList[data[0]].groupList.splice(data[1], 1);
-        this.componentList.push(item);
-        loadingFinish();
-        return;
-      } else {
-        window['$message'].warning('单组件和分组不能移出');
-        loadingFinish();
-        return;
-      }
-    },
-    // 图层移入上一分组
-    moveUpGroup() {
-      const index: number = this.fetchTargetIndex();
-      const item = this.getComponentList[index];
-      const lastItem = this.getComponentList[this.componentList.length - 1];
-      if (lastItem.isGroup) {
-        this.componentList[this.componentList.length - 1].groupList.push(item);
-        this.componentList.splice(index, 1);
-      } else {
-        window['$message'].warning('当前组件上一个不是分组');
-        return;
-      }
-    },
     // * 复制
     async setCopy(isCut = false) {
       try {
@@ -842,7 +791,6 @@ export const useChartEditStore = defineStore({
     },
     // * 创建分组
     setGroup(id?: string | string[], isHistory = true) {
-      console.log('setGroup');
       try {
         let selectIds = this.idPreFormat(id) || this.getTargetChart.selectId;
         selectIds = this.getSelectIdSortList(selectIds);
@@ -932,38 +880,6 @@ export const useChartEditStore = defineStore({
         loadingFinish();
       }
     },
-    // 创建空分组
-    setCreateGroup(isHistory = true) {
-      try {
-        loadingStart();
-        const groupClass = new PublicGroupConfigClass();
-        const historyList: CreateComponentType[] = [];
-
-        // 记录整体坐标
-        const groupAttr = {
-          l: 0,
-          t: 0,
-          r: 0,
-          b: 0,
-        };
-        // 修改原数据之前，先记录
-        if (isHistory) chartHistoryStore.createGroupHistory(historyList);
-
-        // 设置 group 属性
-        groupClass.attr.x = groupAttr.l;
-        groupClass.attr.y = groupAttr.t;
-        groupClass.attr.w = groupAttr.r - groupAttr.l;
-        groupClass.attr.h = groupAttr.b - groupAttr.t;
-        groupClass.chartConfig.title = '新建分组';
-        this.addComponentList(groupClass);
-        this.setTargetSelectChart(groupClass.id);
-        loadingFinish();
-      } catch (error) {
-        console.log(error);
-        window['$message'].error('创建分组失败，请联系管理员');
-        loadingFinish();
-      }
-    },
     // * 解除分组
     setUnGroup(ids?: string[], callBack?: (e: CreateComponentType[]) => void, isHistory = true) {
       try {
@@ -989,8 +905,7 @@ export const useChartEditStore = defineStore({
           });
           this.setTargetSelectChart(targetGroup.id);
           // 删除分组
-          this.componentList[targetIndex].groupList = [];
+          this.removeComponentList(targetGroup.id, false);
-          // this.removeComponentList(targetGroup.id, false);
 
           if (callBack) {
             callBack(targetGroup.groupList);

src/store/modules/chartLayoutStore/chartLayoutStore.d.ts

@@ -1,12 +1,11 @@
 export enum ChartModeEnum {
   SINGLE = 'single',
-  DOUBLE = 'double',
+  DOUBLE = 'double'
 }
 
 export enum LayerModeEnum {
   THUMBNAIL = 'thumbnail',
-  TEXT = 'text',
+  TEXT = 'text'
-  CREATEGROUP = 'creategroup',
 }
 
 export enum ChartLayoutStoreEnum {
@@ -16,22 +15,22 @@ export enum ChartLayoutStoreEnum {
   Chart_TYPE = 'chartType',
   LAYER_TYPE = 'layerType',
   PERCENTAGE = 'percentage',
-  RE_POSITION_CANVAS = 'rePositionCanvas',
+  RE_POSITION_CANVAS = 'rePositionCanvas'
 }
 
 export interface ChartLayoutType {
   // 图层控制
-  [ChartLayoutStoreEnum.LAYERS]: boolean;
+  [ChartLayoutStoreEnum.LAYERS]: boolean
   // 图表组件
-  [ChartLayoutStoreEnum.CHARTS]: boolean;
+  [ChartLayoutStoreEnum.CHARTS]: boolean
   // 详情设置
-  [ChartLayoutStoreEnum.DETAILS]: boolean;
+  [ChartLayoutStoreEnum.DETAILS]: boolean
   // 组件展示方式
-  [ChartLayoutStoreEnum.Chart_TYPE]: ChartModeEnum;
+  [ChartLayoutStoreEnum.Chart_TYPE]: ChartModeEnum
   // 层级展示方式
-  [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum;
+  [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum
   // 当前正在加载的数量
-  [ChartLayoutStoreEnum.PERCENTAGE]: number;
+  [ChartLayoutStoreEnum.PERCENTAGE]: number
   // 是否重置当前画布位置
-  [ChartLayoutStoreEnum.RE_POSITION_CANVAS]: boolean;
+  [ChartLayoutStoreEnum.RE_POSITION_CANVAS]: boolean
 }

src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue

@@ -43,8 +43,8 @@
             @mousedown="mousedownHandle($event, element, componentGroupData.id)"
             @mouseenter="mouseenterHandle(element)"
             @mouseleave="mouseleaveHandle(element)"
-            @contextmenu="handleContextMenu($event, element, optionsHandle)"
+            @contextmenu="handleContextMenu($event, componentGroupData, optionsHandle)"
-          />
+          ></LayersListItem>
         </template>
       </draggable>
     </n-collapse-transition>
@@ -148,7 +148,7 @@
         statusMenuEnums.push(MenuEnum.SHOW);
       }
       return [
-        ...filter([MenuEnum.UN_GROUP, MenuEnum.MOVEOUTGROUP]),
+        ...filter([MenuEnum.UN_GROUP]),
         divider(),
         ...targetList.filter((i) => !statusMenuEnums.includes(i.key as MenuEnum)),
       ];
@@ -206,7 +206,6 @@
 
   // 移动结束处理
   const onMoveCallback = (val: any) => {
-    console.log(val);
     const { newIndex, element } = val.added;
     const groupIndex = chartEditStore.getComponentList.findIndex(
       (item) => item.id == props.componentGroupData.id,

src/views/chart/ContentLayers/index.vue

@@ -28,14 +28,6 @@
             {{ item.label }}
           </n-tooltip>
         </n-button>
-        <n-button ghost size="small" :type="'tertiary'" @click="chartEditStore.setCreateGroup()">
-          <n-tooltip :show-arrow="false" trigger="hover">
-            <template #trigger>
-              <n-icon size="14" :component="DocumentAddIcon" />
-            </template>
-            创建空分组
-          </n-tooltip>
-        </n-button>
       </n-button-group>
     </template>
 
@@ -59,7 +51,7 @@
             v-if="element.isGroup"
             :componentGroupData="element"
             :layer-mode="layerMode"
-          />
+          ></layers-group-list-item>
           <!-- 单组件 -->
           <layers-list-item
             v-else
@@ -69,7 +61,7 @@
             @mouseenter="mouseenterHandle(element)"
             @mouseleave="mouseleaveHandle(element)"
             @contextmenu="handleContextMenu($event, element, optionsHandle)"
-          />
+          ></layers-list-item>
         </div>
       </template>
     </draggable>
@@ -89,7 +81,7 @@
   import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
   import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
   import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d';
-  import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook';
+  import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook';
   import { MenuEnum, MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum';
 
   import { LayersListItem } from './components/LayersListItem/index';
@@ -98,7 +90,7 @@
   import { icon } from '@/plugins';
 
   const { LayersIcon, GridIcon, ListIcon } = icon.ionicons5;
-  const { LaptopIcon, DocumentAddIcon } = icon.carbon;
+  const { LaptopIcon } = icon.carbon;
   const chartLayoutStore = useChartLayoutStore();
   const chartEditStore = useChartEditStore();
   const { handleContextMenu, onClickOutSide } = useContextMenu();
@@ -132,9 +124,6 @@
     allList: MenuOptionsItemType[],
     targetInstance: CreateComponentType,
   ) => {
-    const filter = (menulist: MenuEnum[]) => {
-      return allList.filter((i) => menulist.includes(i.key as MenuEnum));
-    };
     // 多选处理
     if (chartEditStore.getTargetChart.selectId.length > 1) {
       return targetList.filter((i) => i.key === MenuEnum.GROUP);
@@ -151,12 +140,7 @@
     } else {
       statusMenuEnums.push(MenuEnum.SHOW);
     }
-    // return targetList.filter((item) => !statusMenuEnums.includes(item.key as MenuEnum));
+    return targetList.filter((item) => !statusMenuEnums.includes(item.key as MenuEnum));
-    return [
-      ...filter([MenuEnum.MOVEUPGROUP]),
-      divider(),
-      ...targetList.filter((i) => !statusMenuEnums.includes(i.key as MenuEnum)),
-    ];
   };
 
   // 缩小

src/views/chart/hooks/useContextMenu.hook.ts

@@ -19,7 +19,6 @@ const {
   EyeOutlineIcon,
   EyeOffOutlineIcon,
   GridIcon,
-  LogOutOutlineIcon,
 } = icon.ionicons5;
 const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Carbon3DCursorIcon } =
   icon.carbon;
@@ -117,7 +116,6 @@ export const defaultOptions: MenuOptionsItemType[] = [
     icon: renderIcon(ChevronDownIcon),
     fnHandle: chartEditStore.setDown,
   },
-
   {
     type: 'divider',
     key: 'd2',
@@ -157,18 +155,6 @@ export const defaultMultiSelectOptions: MenuOptionsItemType[] = [
     icon: renderIcon(Carbon3DCursorIcon),
     fnHandle: chartEditStore.setUnGroup,
   },
-  {
-    label: '移出分组',
-    key: MenuEnum.MOVEOUTGROUP,
-    icon: renderIcon(LogOutOutlineIcon),
-    fnHandle: chartEditStore.moveOutGroup,
-  },
-  {
-    label: '移入新建分组',
-    key: MenuEnum.MOVEUPGROUP,
-    icon: renderIcon(Carbon3DSoftwareIcon),
-    fnHandle: chartEditStore.moveUpGroup,
-  },
 ];
 
 // * 无数据传递拥有的选项
@@ -287,6 +273,7 @@ export const useContextMenu = () => {
     const targetItem: MenuOptionsItemType[] = menuOptions.value.filter(
       (e: MenuOptionsItemType) => e.key === key,
     );
+
     menuOptions.value.forEach((e: MenuOptionsItemType) => {
       if (e.key === key) {
         if (e.fnHandle) {

src/views/chart/index.vue

@@ -34,7 +34,7 @@
       :show="chartEditStore.getRightMenuShow"
       :on-clickoutside="onClickOutSide"
       @select="handleMenuSelect"
-    />
+    ></n-dropdown>
     <!-- 加载蒙层 -->
     <content-load></content-load>
     <n-modal