|
@@ -50,6 +50,7 @@
|
|
|
const props = defineProps<{
|
|
const props = defineProps<{
|
|
|
isMobileView: boolean;
|
|
isMobileView: boolean;
|
|
|
// moduleCode: string;
|
|
// moduleCode: string;
|
|
|
|
|
+ scale: number;
|
|
|
}>();
|
|
}>();
|
|
|
|
|
|
|
|
const stageRef = ref<Konva.Stage>();
|
|
const stageRef = ref<Konva.Stage>();
|
|
@@ -81,6 +82,10 @@
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
const getGroupConfig = (shop: MapWorkShopInfoItem) => {
|
|
const getGroupConfig = (shop: MapWorkShopInfoItem) => {
|
|
|
|
|
+ const labelActivityRange =
|
|
|
|
|
+ shop.posType === 'top'
|
|
|
|
|
+ ? { configWidth: 165, configHeight: 80 }
|
|
|
|
|
+ : { configWidth: 215, configHeight: 40 };
|
|
|
return {
|
|
return {
|
|
|
x: shop.x,
|
|
x: shop.x,
|
|
|
y: shop.y,
|
|
y: shop.y,
|
|
@@ -89,9 +94,24 @@
|
|
|
id: shop.id + '',
|
|
id: shop.id + '',
|
|
|
draggable: true,
|
|
draggable: true,
|
|
|
name: 'group',
|
|
name: 'group',
|
|
|
|
|
+ dragBoundFunc: dynamicDragBoundFunc(
|
|
|
|
|
+ labelActivityRange.configWidth,
|
|
|
|
|
+ labelActivityRange.configHeight,
|
|
|
|
|
+ ),
|
|
|
};
|
|
};
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+ function dynamicDragBoundFunc(configWidth: number, configHeight: number) {
|
|
|
|
|
+ return (pos: { x: number; y: number }) => {
|
|
|
|
|
+ const RestrictedX = Math.max(0, Math.min(bgConfig.value.width - configWidth, pos.x));
|
|
|
|
|
+ const RestrictedY = Math.max(0, Math.min(bgConfig.value.height - configHeight, pos.y));
|
|
|
|
|
+ return {
|
|
|
|
|
+ x: RestrictedX,
|
|
|
|
|
+ y: RestrictedY,
|
|
|
|
|
+ };
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
const transformerConfig = ref({
|
|
const transformerConfig = ref({
|
|
|
keepRatio: true,
|
|
keepRatio: true,
|
|
|
rotateEnabled: false,
|
|
rotateEnabled: false,
|
|
@@ -214,21 +234,21 @@
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
.opt-container {
|
|
.opt-container {
|
|
|
- width: 160px;
|
|
|
|
|
- padding: 10px;
|
|
|
|
|
- border-radius: 5px;
|
|
|
|
|
|
|
+ width: calc(160px / v-bind(scale));
|
|
|
|
|
+ padding: calc(10px / v-bind(scale));
|
|
|
|
|
+ border-radius: calc(5px / v-bind(scale));
|
|
|
background-color: #ffffff;
|
|
background-color: #ffffff;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.opt-item {
|
|
.opt-item {
|
|
|
- height: 30px;
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
|
|
+ height: calc(30px / v-bind(scale));
|
|
|
|
|
+ font-size: calc(16px / v-bind(scale));
|
|
|
color: #404040;
|
|
color: #404040;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
|
|
|
|
+ justify-content: left;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- padding-left: 8px;
|
|
|
|
|
- border-radius: 3px;
|
|
|
|
|
|
|
+ padding-left: calc(8px / v-bind(scale));
|
|
|
|
|
+ border-radius: calc(3px / v-bind(scale));
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
&:hover {
|
|
&:hover {
|