分组可以修改里面的单组件内容
parent
c1190f0a01
commit
60c838ae69
|
|
@ -299,7 +299,6 @@ export const useChartEditStore = defineStore({
|
|||
return -1;
|
||||
}
|
||||
const targetIndex = this.componentList.findIndex((e) => e.id === targetId);
|
||||
|
||||
// 当前
|
||||
if (targetIndex !== -1) {
|
||||
return targetIndex;
|
||||
|
|
|
|||
|
|
@ -1,298 +1,25 @@
|
|||
import { computed, Ref } from 'vue'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { computed, Ref } from 'vue';
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
||||
// 获取当前对象数据
|
||||
export const useTargetData = () => {
|
||||
const chartEditStore = useChartEditStore()
|
||||
const chartEditStore = useChartEditStore();
|
||||
const targetData: Ref<CreateComponentType | CreateComponentGroupType> = computed(() => {
|
||||
const list = chartEditStore.getComponentList
|
||||
const targetIndex = chartEditStore.fetchTargetIndex()
|
||||
return list[targetIndex]
|
||||
})
|
||||
// console.log("targetData",targetData.value.option.mapOptions);
|
||||
|
||||
// targetData.value.option.mapOptions = {
|
||||
// "scene": {
|
||||
// "center": {"lat":30.074253,"lng":126.353311,"alt":21803924.9,"heading":360,"pitch":-90},
|
||||
// "scene3DOnly": false,
|
||||
// "shadows": false,
|
||||
// "removeDblClick": true,
|
||||
// "sceneMode": 3,
|
||||
// "showSun": true,
|
||||
// "showMoon": true,
|
||||
// "showSkyBox": true,
|
||||
// "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 }
|
||||
}
|
||||
const list = chartEditStore.getComponentList;
|
||||
const targetIndex = chartEditStore.fetchTargetIndex();
|
||||
const selectId = chartEditStore.getTargetChart.selectId;
|
||||
let data;
|
||||
if (selectId[0] === list[targetIndex].id) {
|
||||
data = list[targetIndex];
|
||||
} else {
|
||||
list[targetIndex].groupList.forEach((element) => {
|
||||
if (element.id === selectId[0]) {
|
||||
data = element;
|
||||
}
|
||||
});
|
||||
}
|
||||
return data;
|
||||
});
|
||||
return { targetData, chartEditStore };
|
||||
};
|
||||
|
|
|
|||
|
|
@ -108,11 +108,23 @@
|
|||
// 排除多个
|
||||
if (selectId.length !== 1) return undefined;
|
||||
const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()];
|
||||
let selectTarget;
|
||||
if (target?.isGroup) {
|
||||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||||
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) => {
|
||||
|
|
|
|||
|
|
@ -44,234 +44,233 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, PropType } from 'vue'
|
||||
import { MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum'
|
||||
import { MenuEnum } from '@/enums/editPageEnum'
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
|
||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
|
||||
import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { LayersListItem } from '../LayersListItem'
|
||||
import { LayersStatus } from '../LayersStatus/index'
|
||||
import { icon } from '@/plugins'
|
||||
import { ref, computed, PropType } from 'vue';
|
||||
import { MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum';
|
||||
import { MenuEnum } from '@/enums/editPageEnum';
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook';
|
||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d';
|
||||
import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
|
||||
import { LayersListItem } from '../LayersListItem';
|
||||
import { LayersStatus } from '../LayersStatus/index';
|
||||
import { icon } from '@/plugins';
|
||||
|
||||
const props = defineProps({
|
||||
componentGroupData: {
|
||||
type: Object as PropType<CreateComponentGroupType>,
|
||||
required: true
|
||||
},
|
||||
layerMode: {
|
||||
type: String as PropType<LayerModeEnum>,
|
||||
default: LayerModeEnum.THUMBNAIL
|
||||
}
|
||||
})
|
||||
const props = defineProps({
|
||||
componentGroupData: {
|
||||
type: Object as PropType<CreateComponentGroupType>,
|
||||
required: true,
|
||||
},
|
||||
layerMode: {
|
||||
type: String as PropType<LayerModeEnum>,
|
||||
default: LayerModeEnum.THUMBNAIL,
|
||||
},
|
||||
});
|
||||
|
||||
// 右键
|
||||
const pickOptionsList = [MenuEnum.UN_GROUP]
|
||||
// 右键
|
||||
const pickOptionsList = [MenuEnum.UN_GROUP];
|
||||
|
||||
// 全局颜色
|
||||
const designStore = useDesignStore()
|
||||
const { FolderIcon, FolderOpenIcon } = icon.ionicons5
|
||||
// 全局颜色
|
||||
const designStore = useDesignStore();
|
||||
const { FolderIcon, FolderOpenIcon } = icon.ionicons5;
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
const { handleContextMenu, onClickOutSide } = useContextMenu()
|
||||
const chartEditStore = useChartEditStore();
|
||||
const { handleContextMenu, onClickOutSide } = useContextMenu();
|
||||
|
||||
const expend = ref(false)
|
||||
const expend = ref(false);
|
||||
|
||||
// 颜色
|
||||
const themeColor = computed(() => {
|
||||
return designStore.getAppTheme
|
||||
})
|
||||
// 颜色
|
||||
const themeColor = computed(() => {
|
||||
return designStore.getAppTheme;
|
||||
});
|
||||
|
||||
// 是否选中文本
|
||||
const selectText = computed(() => {
|
||||
return props.layerMode === LayerModeEnum.TEXT
|
||||
})
|
||||
// 是否选中文本
|
||||
const selectText = computed(() => {
|
||||
return props.layerMode === LayerModeEnum.TEXT;
|
||||
});
|
||||
|
||||
// 计算当前选中目标
|
||||
const select = computed(() => {
|
||||
const id = props.componentGroupData.id
|
||||
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
|
||||
})
|
||||
// 计算当前选中目标
|
||||
const select = computed(() => {
|
||||
const id = props.componentGroupData.id;
|
||||
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id);
|
||||
});
|
||||
|
||||
// 悬浮
|
||||
const hover = computed(() => {
|
||||
return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId
|
||||
})
|
||||
// 悬浮
|
||||
const hover = computed(() => {
|
||||
return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId;
|
||||
});
|
||||
|
||||
// 组件状态 隐藏/锁定
|
||||
const status = computed(() => {
|
||||
return props.componentGroupData.status
|
||||
})
|
||||
// 组件状态 隐藏/锁定
|
||||
const status = computed(() => {
|
||||
return props.componentGroupData.status;
|
||||
});
|
||||
|
||||
// 右键
|
||||
const optionsHandle = (
|
||||
targetList: MenuOptionsItemType[],
|
||||
allList: MenuOptionsItemType[],
|
||||
targetInstance: CreateComponentType
|
||||
) => {
|
||||
const filter = (menulist: MenuEnum[]) => {
|
||||
return allList.filter(i => menulist.includes(i.key as MenuEnum))
|
||||
}
|
||||
// 右键
|
||||
const optionsHandle = (
|
||||
targetList: MenuOptionsItemType[],
|
||||
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 filter([MenuEnum.GROUP])
|
||||
} else {
|
||||
const statusMenuEnums: MenuEnum[] = []
|
||||
if (targetInstance.status.lock) {
|
||||
statusMenuEnums.push(MenuEnum.LOCK)
|
||||
// 多选处理
|
||||
if (chartEditStore.getTargetChart.selectId.length > 1) {
|
||||
return filter([MenuEnum.GROUP]);
|
||||
} 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 [
|
||||
...filter([MenuEnum.UN_GROUP]),
|
||||
divider(),
|
||||
...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
|
||||
]
|
||||
}
|
||||
}
|
||||
chartEditStore.setTargetSelectChart(id);
|
||||
};
|
||||
|
||||
// 点击
|
||||
const clickHandle = (e: MouseEvent) => {
|
||||
// 按下左键 + CTRL
|
||||
if (window.$KeyboardActive?.ctrl) return
|
||||
// 判断左右键
|
||||
expend.value = !expend.value
|
||||
mousedownHandle(e, props.componentGroupData)
|
||||
}
|
||||
// 公共点击事件
|
||||
const mousedownHandle = (
|
||||
e: MouseEvent,
|
||||
componentInstance: CreateComponentType | CreateComponentGroupType,
|
||||
id?: string,
|
||||
) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onClickOutSide();
|
||||
chartEditStore.setTargetSelectChart(componentInstance.id);
|
||||
};
|
||||
|
||||
// 组点击事件
|
||||
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
|
||||
}
|
||||
chartEditStore.setTargetSelectChart(id)
|
||||
}
|
||||
// 公共进入事件
|
||||
const mouseenterHandle = (componentInstance: CreateComponentType | CreateComponentGroupType) => {
|
||||
chartEditStore.setTargetHoverChart(componentInstance.id);
|
||||
};
|
||||
|
||||
// 公共点击事件
|
||||
const mousedownHandle = (
|
||||
e: MouseEvent,
|
||||
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)
|
||||
}
|
||||
// 公共移出事件
|
||||
const mouseleaveHandle = (componentInstance: CreateComponentType | CreateComponentGroupType) => {
|
||||
chartEditStore.setTargetHoverChart(undefined);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$centerHeight: 52px;
|
||||
$centerMiniHeight: 28px;
|
||||
$textSize: 10px;
|
||||
$centerHeight: 52px;
|
||||
$centerMiniHeight: 28px;
|
||||
$textSize: 10px;
|
||||
|
||||
@include go(content-layers-group-list-item) {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 10px 5%;
|
||||
margin-bottom: 5px;
|
||||
@extend .go-transition-quick;
|
||||
@include deep() {
|
||||
.go-content-layers-list-item {
|
||||
margin-right: 0 !important;
|
||||
width: 95% !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include go(content-layers-group-list-item) {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 10px 5%;
|
||||
margin-bottom: 5px;
|
||||
@extend .go-transition-quick;
|
||||
@include deep() {
|
||||
.icon-item {
|
||||
opacity: 1;
|
||||
.go-content-layers-list-item {
|
||||
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 {
|
||||
@include fetch-bg-color('background-color4');
|
||||
}
|
||||
/* 选中 */
|
||||
&.select {
|
||||
border: 1px solid v-bind('themeColor');
|
||||
/* 需要设置最高级，覆盖 hover 的颜色 */
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
.list-img {
|
||||
border: 1px solid v-bind('themeColor') !important;
|
||||
@include deep() {
|
||||
.icon-item {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// mini样式
|
||||
&.list-mini {
|
||||
height: $centerMiniHeight;
|
||||
.item-content {
|
||||
height: calc(#{$centerMiniHeight} - 10px) !important;
|
||||
.root-item-content {
|
||||
height: $centerHeight;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
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,
|
||||
.item-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.item-content {
|
||||
z-index: 1;
|
||||
padding: 6px 5px;
|
||||
justify-content: start !important;
|
||||
width: calc(100% - 10px);
|
||||
height: calc(#{$centerHeight} - 10px);
|
||||
}
|
||||
.select-modal {
|
||||
width: 100%;
|
||||
height: calc(#{$centerHeight} + 2px);
|
||||
opacity: 0.3;
|
||||
background-color: v-bind('themeColor');
|
||||
}
|
||||
.list-text {
|
||||
padding-left: 6px;
|
||||
font-size: $textSize;
|
||||
}
|
||||
.select-modal,
|
||||
.item-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.item-content {
|
||||
z-index: 1;
|
||||
padding: 6px 5px;
|
||||
justify-content: start !important;
|
||||
width: calc(100% - 10px);
|
||||
height: calc(#{$centerHeight} - 10px);
|
||||
}
|
||||
.select-modal {
|
||||
width: 100%;
|
||||
height: calc(#{$centerHeight} + 2px);
|
||||
opacity: 0.3;
|
||||
background-color: v-bind('themeColor');
|
||||
}
|
||||
.list-text {
|
||||
padding-left: 6px;
|
||||
font-size: $textSize;
|
||||
}
|
||||
|
||||
.list-status-icon {
|
||||
margin-left: 3px;
|
||||
.list-status-icon {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue