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

分组内容优化
2025-05-08 16:50:31 +08:00 · 2025-05-08 16:50:26 +08:00
8 changed files with 173 additions and 51 deletions
--- a/src/enums/editPageEnum.ts
+++ b/src/enums/editPageEnum.ts
@ -40,6 +40,10 @@ export enum MenuEnum {
  UP = 'up',
  // 下移
  DOWN = 'down',
+  // 移出分组
+  MOVEOUTGROUP = 'moveOutGroup',
+  // 移入上一分组
+  MOVEUPGROUP = 'moveUpGroup',
  // 清空剪贴板
  CLEAR = 'clear',
  // 成组
--- a/src/hooks/eventHandler.hook.ts
+++ b/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 {
-  RequestParamsObjType,
-} from '@/enums/httpEnum';
+import { 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)){
-                    g.status.hide = false;
-                  }
+                if (HKVideoList.includes(g.key)) {
+                  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)){
-                    g.status.hide = true;
-                  }
+                if (HKVideoList.includes(g.key)) {
+                  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)=>{
-              EventBus.emit(groupItem.id +"dataupdate", params);
-            })
+            componentList[i]?.groupList?.forEach((groupItem, idx) => {
+              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]));
-        if(!headers['x-token']){
+        let headers: RequestParamsObjType = Object.fromEntries(
+          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(
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/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);
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
+++ b/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;
 }
--- a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
+++ b/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)"
-          ></LayersListItem>
+            @contextmenu="handleContextMenu($event, element, optionsHandle)"
+          />
        </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,
--- a/src/views/chart/ContentLayers/index.vue
+++ b/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)),
+    ];
  };

  // 缩小
--- a/src/views/chart/hooks/useContextMenu.hook.ts
+++ b/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) {
--- a/src/views/chart/index.vue
+++ b/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
Author	SHA1	Message	Date
刘妍	4ea4e53fa4	Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo	2025-05-08 16:50:31 +08:00
刘妍	6926230168	分组内容优化	2025-05-08 16:50:26 +08:00