分组可以修改里面的单组件内容
parent
c1190f0a01
commit
60c838ae69
|
|
@ -299,7 +299,6 @@ export const useChartEditStore = defineStore({
|
||||||
return -1;
|
return -1;
|
||||||
}
|
}
|
||||||
const targetIndex = this.componentList.findIndex((e) => e.id === targetId);
|
const targetIndex = this.componentList.findIndex((e) => e.id === targetId);
|
||||||
|
|
||||||
// 当前
|
// 当前
|
||||||
if (targetIndex !== -1) {
|
if (targetIndex !== -1) {
|
||||||
return targetIndex;
|
return targetIndex;
|
||||||
|
|
|
||||||
|
|
@ -1,298 +1,25 @@
|
||||||
import { computed, Ref } from 'vue'
|
import { computed, Ref } from 'vue';
|
||||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||||
|
|
||||||
// 获取当前对象数据
|
// 获取当前对象数据
|
||||||
export const useTargetData = () => {
|
export const useTargetData = () => {
|
||||||
const chartEditStore = useChartEditStore()
|
const chartEditStore = useChartEditStore();
|
||||||
const targetData: Ref<CreateComponentType | CreateComponentGroupType> = computed(() => {
|
const targetData: Ref<CreateComponentType | CreateComponentGroupType> = computed(() => {
|
||||||
const list = chartEditStore.getComponentList
|
const list = chartEditStore.getComponentList;
|
||||||
const targetIndex = chartEditStore.fetchTargetIndex()
|
const targetIndex = chartEditStore.fetchTargetIndex();
|
||||||
return list[targetIndex]
|
const selectId = chartEditStore.getTargetChart.selectId;
|
||||||
})
|
let data;
|
||||||
// console.log("targetData",targetData.value.option.mapOptions);
|
if (selectId[0] === list[targetIndex].id) {
|
||||||
|
data = list[targetIndex];
|
||||||
// targetData.value.option.mapOptions = {
|
} else {
|
||||||
// "scene": {
|
list[targetIndex].groupList.forEach((element) => {
|
||||||
// "center": {"lat":30.074253,"lng":126.353311,"alt":21803924.9,"heading":360,"pitch":-90},
|
if (element.id === selectId[0]) {
|
||||||
// "scene3DOnly": false,
|
data = element;
|
||||||
// "shadows": false,
|
}
|
||||||
// "removeDblClick": true,
|
});
|
||||||
// "sceneMode": 3,
|
}
|
||||||
// "showSun": true,
|
return data;
|
||||||
// "showMoon": true,
|
});
|
||||||
// "showSkyBox": true,
|
return { targetData, chartEditStore };
|
||||||
// "showSkyAtmosphere": true,
|
};
|
||||||
// "fog": true,
|
|
||||||
// "fxaa": true,
|
|
||||||
// "requestRenderMode": true,
|
|
||||||
// "contextOptions": {
|
|
||||||
// "requestWebgl1": false,
|
|
||||||
// "webgl": {
|
|
||||||
// "preserveDrawingBuffer": true
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// "globe": {
|
|
||||||
// "depthTestAgainstTerrain": false,
|
|
||||||
// "baseColor": "#546a53",
|
|
||||||
// "showGroundAtmosphere": true,
|
|
||||||
// "enableLighting": false
|
|
||||||
// },
|
|
||||||
// "cameraController": {
|
|
||||||
// "zoomFactor": 3.0,
|
|
||||||
// "minimumZoomDistance": 1,
|
|
||||||
// "maximumZoomDistance": 50000000,
|
|
||||||
// "enableRotate": true,
|
|
||||||
// "enableTranslate": true,
|
|
||||||
// "enableTilt": true,
|
|
||||||
// "enableZoom": true,
|
|
||||||
// "enableCollisionDetection": true,
|
|
||||||
// "minimumCollisionTerrainHeight": 15000
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// "control": {
|
|
||||||
// "homeButton": true,
|
|
||||||
// "baseLayerPicker": false,
|
|
||||||
// "sceneModePicker": true,
|
|
||||||
// "vrButton": false,
|
|
||||||
// "fullscreenButton": true,
|
|
||||||
// "navigationHelpButton": true,
|
|
||||||
// "animation": false,
|
|
||||||
// "timeline": false,
|
|
||||||
// "infoBox": false,
|
|
||||||
// "geocoder": false,
|
|
||||||
// "selectionIndicator": false,
|
|
||||||
// "showRenderLoopErrors": true,
|
|
||||||
// "contextmenu": {
|
|
||||||
// "hasDefault": true
|
|
||||||
// },
|
|
||||||
// "mouseDownView": true,
|
|
||||||
// "zoom": {
|
|
||||||
// "insertIndex": 1
|
|
||||||
// },
|
|
||||||
// "compass": {
|
|
||||||
// "bottom": "toolbar",
|
|
||||||
// "left": "5px"
|
|
||||||
// },
|
|
||||||
// "distanceLegend": {
|
|
||||||
// "left": "10px",
|
|
||||||
// "bottom": "2px"
|
|
||||||
// },
|
|
||||||
// "locationBar": {
|
|
||||||
// "crs": "CGCS2000_GK_Zone_3",
|
|
||||||
// "crsDecimal": 0,
|
|
||||||
// "template": "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx} 纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>"
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// "method": {
|
|
||||||
// "templateValues": {
|
|
||||||
// "dataServer": "//data.mars3d.cn",
|
|
||||||
// "gltfServerUrl": "//data.mars3d.cn/gltf"
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// "terrain": {
|
|
||||||
// "url": "//data.mars3d.cn/terrain",
|
|
||||||
// "show": true,
|
|
||||||
// "clip": true
|
|
||||||
// },
|
|
||||||
// "basemaps": [
|
|
||||||
// {
|
|
||||||
// "id": 10,
|
|
||||||
// "name": "地图底图",
|
|
||||||
// "type": "group"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "天地图影像",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/tdt_img.png",
|
|
||||||
// "type": "group",
|
|
||||||
// "layers": [
|
|
||||||
// {
|
|
||||||
// "name": "底图",
|
|
||||||
// "type": "tdt",
|
|
||||||
// "layer": "img_d"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "name": "注记",
|
|
||||||
// "type": "tdt",
|
|
||||||
// "layer": "img_z"
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// "show": false
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "天地图电子",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/tdt_vec.png",
|
|
||||||
// "type": "group",
|
|
||||||
// "layers": [
|
|
||||||
// {
|
|
||||||
// "name": "底图",
|
|
||||||
// "type": "tdt",
|
|
||||||
// "layer": "vec_d"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "name": "注记",
|
|
||||||
// "type": "tdt",
|
|
||||||
// "layer": "vec_z"
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "id": 2021,
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "高德影像",
|
|
||||||
// "type": "group",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/gaode_img.png",
|
|
||||||
// "layers": [
|
|
||||||
// {
|
|
||||||
// "name": "底图",
|
|
||||||
// "type": "gaode",
|
|
||||||
// "layer": "img_d"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "name": "注记",
|
|
||||||
// "type": "gaode",
|
|
||||||
// "layer": "img_z"
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// "show": true
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "高德电子",
|
|
||||||
// "type": "gaode",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/gaode_vec.png",
|
|
||||||
// "layer": "vec"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "百度影像",
|
|
||||||
// "type": "group",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/bd-img.png",
|
|
||||||
// "layers": [
|
|
||||||
// {
|
|
||||||
// "name": "底图",
|
|
||||||
// "type": "baidu",
|
|
||||||
// "layer": "img_d"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "name": "注记",
|
|
||||||
// "type": "baidu",
|
|
||||||
// "layer": "img_z"
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "百度电子",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/bd-vec.png",
|
|
||||||
// "type": "baidu",
|
|
||||||
// "layer": "vec"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "腾讯影像",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/tencent_img.png",
|
|
||||||
// "type": "group",
|
|
||||||
// "layers": [
|
|
||||||
// {
|
|
||||||
// "name": "底图",
|
|
||||||
// "type": "tencent",
|
|
||||||
// "layer": "img_d"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "name": "注记",
|
|
||||||
// "type": "tencent",
|
|
||||||
// "layer": "img_z"
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "腾讯电子",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/tencent_vec.png",
|
|
||||||
// "type": "tencent",
|
|
||||||
// "layer": "vec"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "ArcGIS影像",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/esriWorldImagery.png",
|
|
||||||
// "type": "xyz",
|
|
||||||
// "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
|
|
||||||
// "enablePickFeatures": false
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "微软影像",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/bingAerial.png",
|
|
||||||
// "type": "bing",
|
|
||||||
// "layer": "Aerial"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "id": 2017,
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "蓝色底图",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/bd-c-midnight.png",
|
|
||||||
// "type": "gaode",
|
|
||||||
// "layer": "vec",
|
|
||||||
// "chinaCRS": "GCJ02",
|
|
||||||
// "invertColor": true,
|
|
||||||
// "filterColor": "#4e70a6",
|
|
||||||
// "brightness": 0.6,
|
|
||||||
// "contrast": 1.8,
|
|
||||||
// "gamma": 0.3,
|
|
||||||
// "hue": 1,
|
|
||||||
// "saturation": 0
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "黑色底图",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/bd-c-dark.png",
|
|
||||||
// "type": "gaode",
|
|
||||||
// "layer": "vec",
|
|
||||||
// "chinaCRS": "GCJ02",
|
|
||||||
// "invertColor": true,
|
|
||||||
// "filterColor": "#909090",
|
|
||||||
// "brightness": 0.6,
|
|
||||||
// "contrast": 1.8,
|
|
||||||
// "gamma": 0.3,
|
|
||||||
// "hue": 1,
|
|
||||||
// "saturation": 0
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "离线影像地图 (供参考)",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/google_img.png",
|
|
||||||
// "type": "xyz",
|
|
||||||
// "url": "{dataServer}/tile/img/{z}/{x}/{y}.jpg",
|
|
||||||
// "chinaCRS": "GCJ02",
|
|
||||||
// "maximumLevel": 13
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "单张图片 (本地离线)",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/offline.png",
|
|
||||||
// "type": "image",
|
|
||||||
// "url": "//data.mars3d.cn/img/map/world/world.jpg"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "id": 2023,
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "无底图",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/null.png",
|
|
||||||
// "type": "grid",
|
|
||||||
// "color": "#ffffff",
|
|
||||||
// "alpha": 0.03,
|
|
||||||
// "cells": 2
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// "layers":[]
|
|
||||||
// };
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
console.log("targetData",targetData)
|
|
||||||
return { targetData, chartEditStore }
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -108,11 +108,23 @@
|
||||||
// 排除多个
|
// 排除多个
|
||||||
if (selectId.length !== 1) return undefined;
|
if (selectId.length !== 1) return undefined;
|
||||||
const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()];
|
const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()];
|
||||||
|
let selectTarget;
|
||||||
if (target?.isGroup) {
|
if (target?.isGroup) {
|
||||||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||||||
tabsSelect.value = TabsEnum.CHART_SETTING;
|
tabsSelect.value = TabsEnum.CHART_SETTING;
|
||||||
|
if (selectId[0] != target.id) {
|
||||||
|
target.groupList.forEach((element) => {
|
||||||
|
if (element.id == selectId[0]) {
|
||||||
|
selectTarget = element;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
selectTarget = target;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
selectTarget = target;
|
||||||
}
|
}
|
||||||
return target;
|
return selectTarget;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(getDetails, (newData) => {
|
watch(getDetails, (newData) => {
|
||||||
|
|
|
||||||
|
|
@ -44,234 +44,233 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, PropType } from 'vue'
|
import { ref, computed, PropType } from 'vue';
|
||||||
import { MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum'
|
import { MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum';
|
||||||
import { MenuEnum } from '@/enums/editPageEnum'
|
import { MenuEnum } from '@/enums/editPageEnum';
|
||||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
import { useDesignStore } from '@/store/modules/designStore/designStore';
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||||
import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
|
import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook';
|
||||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
|
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d';
|
||||||
import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
|
||||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
|
||||||
import { LayersListItem } from '../LayersListItem'
|
import { LayersListItem } from '../LayersListItem';
|
||||||
import { LayersStatus } from '../LayersStatus/index'
|
import { LayersStatus } from '../LayersStatus/index';
|
||||||
import { icon } from '@/plugins'
|
import { icon } from '@/plugins';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
componentGroupData: {
|
componentGroupData: {
|
||||||
type: Object as PropType<CreateComponentGroupType>,
|
type: Object as PropType<CreateComponentGroupType>,
|
||||||
required: true
|
required: true,
|
||||||
},
|
},
|
||||||
layerMode: {
|
layerMode: {
|
||||||
type: String as PropType<LayerModeEnum>,
|
type: String as PropType<LayerModeEnum>,
|
||||||
default: LayerModeEnum.THUMBNAIL
|
default: LayerModeEnum.THUMBNAIL,
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
// 右键
|
// 右键
|
||||||
const pickOptionsList = [MenuEnum.UN_GROUP]
|
const pickOptionsList = [MenuEnum.UN_GROUP];
|
||||||
|
|
||||||
// 全局颜色
|
// 全局颜色
|
||||||
const designStore = useDesignStore()
|
const designStore = useDesignStore();
|
||||||
const { FolderIcon, FolderOpenIcon } = icon.ionicons5
|
const { FolderIcon, FolderOpenIcon } = icon.ionicons5;
|
||||||
|
|
||||||
const chartEditStore = useChartEditStore()
|
const chartEditStore = useChartEditStore();
|
||||||
const { handleContextMenu, onClickOutSide } = useContextMenu()
|
const { handleContextMenu, onClickOutSide } = useContextMenu();
|
||||||
|
|
||||||
const expend = ref(false)
|
const expend = ref(false);
|
||||||
|
|
||||||
// 颜色
|
// 颜色
|
||||||
const themeColor = computed(() => {
|
const themeColor = computed(() => {
|
||||||
return designStore.getAppTheme
|
return designStore.getAppTheme;
|
||||||
})
|
});
|
||||||
|
|
||||||
// 是否选中文本
|
// 是否选中文本
|
||||||
const selectText = computed(() => {
|
const selectText = computed(() => {
|
||||||
return props.layerMode === LayerModeEnum.TEXT
|
return props.layerMode === LayerModeEnum.TEXT;
|
||||||
})
|
});
|
||||||
|
|
||||||
// 计算当前选中目标
|
// 计算当前选中目标
|
||||||
const select = computed(() => {
|
const select = computed(() => {
|
||||||
const id = props.componentGroupData.id
|
const id = props.componentGroupData.id;
|
||||||
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
|
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id);
|
||||||
})
|
});
|
||||||
|
|
||||||
// 悬浮
|
// 悬浮
|
||||||
const hover = computed(() => {
|
const hover = computed(() => {
|
||||||
return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId
|
return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId;
|
||||||
})
|
});
|
||||||
|
|
||||||
// 组件状态 隐藏/锁定
|
// 组件状态 隐藏/锁定
|
||||||
const status = computed(() => {
|
const status = computed(() => {
|
||||||
return props.componentGroupData.status
|
return props.componentGroupData.status;
|
||||||
})
|
});
|
||||||
|
|
||||||
// 右键
|
// 右键
|
||||||
const optionsHandle = (
|
const optionsHandle = (
|
||||||
targetList: MenuOptionsItemType[],
|
targetList: MenuOptionsItemType[],
|
||||||
allList: MenuOptionsItemType[],
|
allList: MenuOptionsItemType[],
|
||||||
targetInstance: CreateComponentType
|
targetInstance: CreateComponentType,
|
||||||
) => {
|
) => {
|
||||||
const filter = (menulist: MenuEnum[]) => {
|
const filter = (menulist: MenuEnum[]) => {
|
||||||
return allList.filter(i => menulist.includes(i.key as MenuEnum))
|
return allList.filter((i) => menulist.includes(i.key as MenuEnum));
|
||||||
}
|
};
|
||||||
|
|
||||||
// 多选处理
|
// 多选处理
|
||||||
if (chartEditStore.getTargetChart.selectId.length > 1) {
|
if (chartEditStore.getTargetChart.selectId.length > 1) {
|
||||||
return filter([MenuEnum.GROUP])
|
return filter([MenuEnum.GROUP]);
|
||||||
} else {
|
|
||||||
const statusMenuEnums: MenuEnum[] = []
|
|
||||||
if (targetInstance.status.lock) {
|
|
||||||
statusMenuEnums.push(MenuEnum.LOCK)
|
|
||||||
} else {
|
} else {
|
||||||
statusMenuEnums.push(MenuEnum.UNLOCK)
|
const statusMenuEnums: MenuEnum[] = [];
|
||||||
|
if (targetInstance.status.lock) {
|
||||||
|
statusMenuEnums.push(MenuEnum.LOCK);
|
||||||
|
} else {
|
||||||
|
statusMenuEnums.push(MenuEnum.UNLOCK);
|
||||||
|
}
|
||||||
|
if (targetInstance.status.hide) {
|
||||||
|
statusMenuEnums.push(MenuEnum.HIDE);
|
||||||
|
} else {
|
||||||
|
statusMenuEnums.push(MenuEnum.SHOW);
|
||||||
|
}
|
||||||
|
return [
|
||||||
|
...filter([MenuEnum.UN_GROUP]),
|
||||||
|
divider(),
|
||||||
|
...targetList.filter((i) => !statusMenuEnums.includes(i.key as MenuEnum)),
|
||||||
|
];
|
||||||
}
|
}
|
||||||
if (targetInstance.status.hide) {
|
};
|
||||||
statusMenuEnums.push(MenuEnum.HIDE)
|
|
||||||
} else {
|
// 点击
|
||||||
statusMenuEnums.push(MenuEnum.SHOW)
|
const clickHandle = (e: MouseEvent) => {
|
||||||
|
// 按下左键 + CTRL
|
||||||
|
if (window.$KeyboardActive?.ctrl) return;
|
||||||
|
// 判断左右键
|
||||||
|
expend.value = !expend.value;
|
||||||
|
mousedownHandle(e, props.componentGroupData);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 组点击事件
|
||||||
|
const groupMousedownHandle = (e: MouseEvent) => {
|
||||||
|
onClickOutSide();
|
||||||
|
// 若此时按下了 CTRL, 表示多选
|
||||||
|
const id = props.componentGroupData.id;
|
||||||
|
if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) {
|
||||||
|
// 若已选中，则去除
|
||||||
|
if (chartEditStore.targetChart.selectId.includes(id)) {
|
||||||
|
const exList = chartEditStore.targetChart.selectId.filter((e) => e !== id);
|
||||||
|
chartEditStore.setTargetSelectChart(exList);
|
||||||
|
} else {
|
||||||
|
chartEditStore.setTargetSelectChart(id, true);
|
||||||
|
}
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
return [
|
chartEditStore.setTargetSelectChart(id);
|
||||||
...filter([MenuEnum.UN_GROUP]),
|
};
|
||||||
divider(),
|
|
||||||
...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 点击
|
// 公共点击事件
|
||||||
const clickHandle = (e: MouseEvent) => {
|
const mousedownHandle = (
|
||||||
// 按下左键 + CTRL
|
e: MouseEvent,
|
||||||
if (window.$KeyboardActive?.ctrl) return
|
componentInstance: CreateComponentType | CreateComponentGroupType,
|
||||||
// 判断左右键
|
id?: string,
|
||||||
expend.value = !expend.value
|
) => {
|
||||||
mousedownHandle(e, props.componentGroupData)
|
e.preventDefault();
|
||||||
}
|
e.stopPropagation();
|
||||||
|
onClickOutSide();
|
||||||
|
chartEditStore.setTargetSelectChart(componentInstance.id);
|
||||||
|
};
|
||||||
|
|
||||||
// 组点击事件
|
// 公共进入事件
|
||||||
const groupMousedownHandle = (e: MouseEvent) => {
|
const mouseenterHandle = (componentInstance: CreateComponentType | CreateComponentGroupType) => {
|
||||||
onClickOutSide()
|
chartEditStore.setTargetHoverChart(componentInstance.id);
|
||||||
// 若此时按下了 CTRL, 表示多选
|
};
|
||||||
const id = props.componentGroupData.id
|
|
||||||
if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) {
|
|
||||||
// 若已选中，则去除
|
|
||||||
if (chartEditStore.targetChart.selectId.includes(id)) {
|
|
||||||
const exList = chartEditStore.targetChart.selectId.filter(e => e !== id)
|
|
||||||
chartEditStore.setTargetSelectChart(exList)
|
|
||||||
} else {
|
|
||||||
chartEditStore.setTargetSelectChart(id, true)
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
chartEditStore.setTargetSelectChart(id)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 公共点击事件
|
// 公共移出事件
|
||||||
const mousedownHandle = (
|
const mouseleaveHandle = (componentInstance: CreateComponentType | CreateComponentGroupType) => {
|
||||||
e: MouseEvent,
|
chartEditStore.setTargetHoverChart(undefined);
|
||||||
componentInstance: CreateComponentType | CreateComponentGroupType,
|
};
|
||||||
id?: string
|
|
||||||
) => {
|
|
||||||
e.preventDefault()
|
|
||||||
e.stopPropagation()
|
|
||||||
|
|
||||||
onClickOutSide()
|
|
||||||
chartEditStore.setTargetSelectChart(id || componentInstance.id)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 公共进入事件
|
|
||||||
const mouseenterHandle = (componentInstance: CreateComponentType | CreateComponentGroupType) => {
|
|
||||||
chartEditStore.setTargetHoverChart(componentInstance.id)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 公共移出事件
|
|
||||||
const mouseleaveHandle = (componentInstance: CreateComponentType | CreateComponentGroupType) => {
|
|
||||||
chartEditStore.setTargetHoverChart(undefined)
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
$centerHeight: 52px;
|
$centerHeight: 52px;
|
||||||
$centerMiniHeight: 28px;
|
$centerMiniHeight: 28px;
|
||||||
$textSize: 10px;
|
$textSize: 10px;
|
||||||
|
|
||||||
@include go(content-layers-group-list-item) {
|
@include go(content-layers-group-list-item) {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 10px 5%;
|
margin: 10px 5%;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
@extend .go-transition-quick;
|
@extend .go-transition-quick;
|
||||||
@include deep() {
|
|
||||||
.go-content-layers-list-item {
|
|
||||||
margin-right: 0 !important;
|
|
||||||
width: 95% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@include deep() {
|
@include deep() {
|
||||||
.icon-item {
|
.go-content-layers-list-item {
|
||||||
opacity: 1;
|
margin-right: 0 !important;
|
||||||
|
width: 95% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.root-item-content {
|
|
||||||
height: $centerHeight;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0);
|
|
||||||
&.hover,
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@include fetch-bg-color('background-color4');
|
@include deep() {
|
||||||
}
|
.icon-item {
|
||||||
/* 选中 */
|
opacity: 1;
|
||||||
&.select {
|
}
|
||||||
border: 1px solid v-bind('themeColor');
|
|
||||||
/* 需要设置最高级，覆盖 hover 的颜色 */
|
|
||||||
background-color: rgba(0, 0, 0, 0);
|
|
||||||
.list-img {
|
|
||||||
border: 1px solid v-bind('themeColor') !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// mini样式
|
.root-item-content {
|
||||||
&.list-mini {
|
height: $centerHeight;
|
||||||
height: $centerMiniHeight;
|
cursor: pointer;
|
||||||
.item-content {
|
border-radius: 5px;
|
||||||
height: calc(#{$centerMiniHeight} - 10px) !important;
|
border: 1px solid rgba(0, 0, 0, 0);
|
||||||
|
&.hover,
|
||||||
|
&:hover {
|
||||||
|
@include fetch-bg-color('background-color4');
|
||||||
}
|
}
|
||||||
.select-modal {
|
/* 选中 */
|
||||||
height: calc(#{$centerMiniHeight} + 2px) !important;
|
&.select {
|
||||||
|
border: 1px solid v-bind('themeColor');
|
||||||
|
/* 需要设置最高级，覆盖 hover 的颜色 */
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
.list-img {
|
||||||
|
border: 1px solid v-bind('themeColor') !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// mini样式
|
||||||
|
&.list-mini {
|
||||||
|
height: $centerMiniHeight;
|
||||||
|
.item-content {
|
||||||
|
height: calc(#{$centerMiniHeight} - 10px) !important;
|
||||||
|
}
|
||||||
|
.select-modal {
|
||||||
|
height: calc(#{$centerMiniHeight} + 2px) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.select-modal,
|
||||||
.select-modal,
|
.item-content {
|
||||||
.item-content {
|
position: absolute;
|
||||||
position: absolute;
|
top: 0;
|
||||||
top: 0;
|
left: 0;
|
||||||
left: 0;
|
}
|
||||||
}
|
.item-content {
|
||||||
.item-content {
|
z-index: 1;
|
||||||
z-index: 1;
|
padding: 6px 5px;
|
||||||
padding: 6px 5px;
|
justify-content: start !important;
|
||||||
justify-content: start !important;
|
width: calc(100% - 10px);
|
||||||
width: calc(100% - 10px);
|
height: calc(#{$centerHeight} - 10px);
|
||||||
height: calc(#{$centerHeight} - 10px);
|
}
|
||||||
}
|
.select-modal {
|
||||||
.select-modal {
|
width: 100%;
|
||||||
width: 100%;
|
height: calc(#{$centerHeight} + 2px);
|
||||||
height: calc(#{$centerHeight} + 2px);
|
opacity: 0.3;
|
||||||
opacity: 0.3;
|
background-color: v-bind('themeColor');
|
||||||
background-color: v-bind('themeColor');
|
}
|
||||||
}
|
.list-text {
|
||||||
.list-text {
|
padding-left: 6px;
|
||||||
padding-left: 6px;
|
font-size: $textSize;
|
||||||
font-size: $textSize;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.list-status-icon {
|
.list-status-icon {
|
||||||
margin-left: 3px;
|
margin-left: 3px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue