gitY
/
LinYeFangHuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: gitY:d93a4816fbf318170ff2d9fcede381a82d8f428d
Branches Tags
gitY:main
gitY:zhufu
...
compare: gitY:4ea4e53fa475c24fd131dc67abdbda980492cc87
Branches Tags
gitY:main
gitY:zhufu

2 Commits
d93a4816fb ... 4ea4e53fa4

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
8 changed files with 173 additions and 51 deletions
Show Stats Expand all files Collapse all files

4
src/enums/editPageEnum.ts
View File

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

62
src/hooks/eventHandler.hook.ts
View File

@ -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);
@ -114,7 +118,7 @@ export const eventCommonHandler = (
// 隐藏
for (let k = 0; k < elementList[j].elementId.length; k++) {
//获取位置
const arr = queryFun(componentList, elementList[j].elementId[k]);
const arr = queryFun(componentList, elementList[j].elementId[k]);
if (arr.length > 1) {
obj = componentList[arr[0]].groupList[arr[1]];
obj.status.hide = true;
@ -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);
@ -187,30 +185,34 @@ export const eventCommonHandler = (
obj.option = elementList[j].option;
// chartEditStore.updateComponentList(arr[0], obj);
}
} else if (elementList[j].movement == 'callBackRequest') {
const {
} else if (elementList[j].movement == 'callBackRequest') {
const {
requestUrl,
requestApi,
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(

87
src/store/modules/chartEditStore/chartEditStore.ts
View File

@ -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);

21
src/store/modules/chartLayoutStore/chartLayoutStore.d.ts vendored
View File

@ -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;
}

7
src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
View File

@ -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,

26
src/views/chart/ContentLayers/index.vue
View File

@ -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)),
];
};
// 缩小

15
src/views/chart/hooks/useContextMenu.hook.ts
View File

@ -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) {

2
src/views/chart/index.vue
View File

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