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

src/enums/editPageEnum.ts

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

src/hooks/eventHandler.hook.ts

@@ -5,14 +5,18 @@ import { previewUrl } from '@/utils';
 import { EventBus } from '@/utils/eventBus';
 import axiosInstance from '@/api/axios';
 import { translateStr } from '@/api/http';
-import {
+import { RequestParamsObjType } from '@/enums/httpEnum';
-  RequestParamsObjType,
-} from '@/enums/httpEnum';
 
 const chartEditStore = useChartEditStore();
 const ceshiFunction = mapFun();
 // 含有海康视频的组件要特殊处理
-const HKVideoList = ['ZhiGan_ModalTimeLine', 'ZhiGan_ModalVideo', 'ZhiGan_SheXiangTouModal','ZhiGan_WuRenJiShiShiHuaMian', 'HuoQingDetailTimeLine'];
+const HKVideoList = [
+  'ZhiGan_ModalTimeLine',
+  'ZhiGan_ModalVideo',
+  'ZhiGan_SheXiangTouModal',
+  'ZhiGan_WuRenJiShiShiHuaMian',
+  'HuoQingDetailTimeLine',
+];
 //递归获取某个id在数组里的位置或者父id
 export const queryFun = (array, value, peg?: any) => {
   var res = [];
@@ -94,11 +98,11 @@ export const eventCommonHandler = (
             // console.log(obj);
 
             // 海康视频组件单独处理
-            if(obj.isGroup && obj.groupList.some((li) => HKVideoList.includes(li.key))) {
+            if (obj.isGroup && obj.groupList.some((li) => HKVideoList.includes(li.key))) {
               obj.groupList.forEach((g) => {
-                  if(HKVideoList.includes(g.key)){
+                if (HKVideoList.includes(g.key)) {
-                    g.status.hide = false;
+                  g.status.hide = false;
-                  }
+                }
               });
             }
             // chartEditStore.updateComponentList(arr[0], obj);
@@ -124,11 +128,11 @@ export const eventCommonHandler = (
             obj.status.hide = true;
 
             // 海康视频组件单独处理
-            if(obj.isGroup && obj.groupList.some((li) => HKVideoList.includes(li.key))) {
+            if (obj.isGroup && obj.groupList.some((li) => HKVideoList.includes(li.key))) {
               obj.groupList.forEach((g) => {
-                  if(HKVideoList.includes(g.key)){
+                if (HKVideoList.includes(g.key)) {
-                    g.status.hide = true;
+                  g.status.hide = true;
-                  }
+                }
               });
             }
             // chartEditStore.updateComponentList(arr[0], obj);
@@ -152,24 +156,18 @@ 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)=>{
+            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);
@@ -194,23 +192,27 @@ export const eventCommonHandler = (
           requestContentType,
           requestDataType,
           requestHttpType,
-          requestParams
+          requestParams,
         } = elementList[j].callBackRequest;
 
         // 处理头部
-        let headers: RequestParamsObjType = Object.fromEntries(requestParams.Header.map(item => [item.key.toLowerCase(), item.value]));
+        let headers: RequestParamsObjType = Object.fromEntries(
-        if(!headers['x-token']){
+          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(requestParams.Params.map(item => [item.key, item.value]));
+        let params: RequestParamsObjType = Object.fromEntries(
+          requestParams.Params.map((item) => [item.key, item.value]),
+        );
 
         try {
           const url = new Function(

src/store/modules/chartEditStore/chartEditStore.ts

@@ -528,6 +528,57 @@ 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 {
@@ -791,6 +842,7 @@ 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);
@@ -880,6 +932,38 @@ 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 {
@@ -905,7 +989,8 @@ export const useChartEditStore = defineStore({
           });
           this.setTargetSelectChart(targetGroup.id);
           // 删除分组
-          this.removeComponentList(targetGroup.id, false);
+          this.componentList[targetIndex].groupList = [];
+          // this.removeComponentList(targetGroup.id, false);
 
           if (callBack) {
             callBack(targetGroup.groupList);

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

@@ -1,11 +1,12 @@
 export enum ChartModeEnum {
   SINGLE = 'single',
-  DOUBLE = 'double'
+  DOUBLE = 'double',
 }
 
 export enum LayerModeEnum {
   THUMBNAIL = 'thumbnail',
-  TEXT = 'text'
+  TEXT = 'text',
+  CREATEGROUP = 'creategroup',
 }
 
 export enum ChartLayoutStoreEnum {
@@ -15,22 +16,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, componentGroupData, optionsHandle)"
+            @contextmenu="handleContextMenu($event, element, optionsHandle)"
-          ></LayersListItem>
+          />
         </template>
       </draggable>
     </n-collapse-transition>
@@ -148,7 +148,7 @@
         statusMenuEnums.push(MenuEnum.SHOW);
       }
       return [
-        ...filter([MenuEnum.UN_GROUP]),
+        ...filter([MenuEnum.UN_GROUP, MenuEnum.MOVEOUTGROUP]),
         divider(),
         ...targetList.filter((i) => !statusMenuEnums.includes(i.key as MenuEnum)),
       ];
@@ -206,6 +206,7 @@
 
   // 移动结束处理
   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,6 +28,14 @@
             {{ 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>
 
@@ -51,7 +59,7 @@
             v-if="element.isGroup"
             :componentGroupData="element"
             :layer-mode="layerMode"
-          ></layers-group-list-item>
+          />
           <!-- 单组件 -->
           <layers-list-item
             v-else
@@ -61,7 +69,7 @@
             @mouseenter="mouseenterHandle(element)"
             @mouseleave="mouseleaveHandle(element)"
             @contextmenu="handleContextMenu($event, element, optionsHandle)"
-          ></layers-list-item>
+          />
         </div>
       </template>
     </draggable>
@@ -81,7 +89,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 } from '@/views/chart/hooks/useContextMenu.hook';
+  import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook';
   import { MenuEnum, MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum';
 
   import { LayersListItem } from './components/LayersListItem/index';
@@ -90,7 +98,7 @@
   import { icon } from '@/plugins';
 
   const { LayersIcon, GridIcon, ListIcon } = icon.ionicons5;
-  const { LaptopIcon } = icon.carbon;
+  const { LaptopIcon, DocumentAddIcon } = icon.carbon;
   const chartLayoutStore = useChartLayoutStore();
   const chartEditStore = useChartEditStore();
   const { handleContextMenu, onClickOutSide } = useContextMenu();
@@ -124,6 +132,9 @@
     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);
@@ -140,7 +151,12 @@
     } 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,6 +19,7 @@ const {
   EyeOutlineIcon,
   EyeOffOutlineIcon,
   GridIcon,
+  LogOutOutlineIcon,
 } = icon.ionicons5;
 const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Carbon3DCursorIcon } =
   icon.carbon;
@@ -116,6 +117,7 @@ export const defaultOptions: MenuOptionsItemType[] = [
     icon: renderIcon(ChevronDownIcon),
     fnHandle: chartEditStore.setDown,
   },
+
   {
     type: 'divider',
     key: 'd2',
@@ -155,6 +157,18 @@ 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,
+  },
 ];
 
 // * 无数据传递拥有的选项
@@ -273,7 +287,6 @@ 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