temp
This commit is contained in:
parent
c2c1d8eb5f
commit
f90d025e5a
2739
package-lock.json
generated
2739
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -79,7 +79,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
& > .ant-card-body {
|
& > .ant-card-body {
|
||||||
|
max-height: calc(100% - 48px);
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -293,6 +295,10 @@
|
|||||||
outline-color: rgba($color: get-color(error), $alpha: 20%) !important;
|
outline-color: rgba($color: get-color(error), $alpha: 20%) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background-color: get-color(neutral3);
|
||||||
|
}
|
||||||
|
|
||||||
&:not(:disabled):focus {
|
&:not(:disabled):focus {
|
||||||
border-color: get-color(primary);
|
border-color: get-color(primary);
|
||||||
outline: 2px solid rgba($color: get-color(primary), $alpha: 20%);
|
outline: 2px solid rgba($color: get-color(primary), $alpha: 20%);
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { KeydownType, type Options } from '@meta2d/core';
|
import { KeydownType, type Options } from '@meta2d/core';
|
||||||
|
import { invert } from 'lodash-es';
|
||||||
|
|
||||||
//#region 点位
|
//#region 点位
|
||||||
export enum MapPointType {
|
export enum MapPointType {
|
||||||
@ -26,6 +27,7 @@ export enum MapRouteType {
|
|||||||
直线 = 'line',
|
直线 = 'line',
|
||||||
三阶贝塞尔曲线 = 'bezier3',
|
三阶贝塞尔曲线 = 'bezier3',
|
||||||
}
|
}
|
||||||
|
export const MAP_ROUTE_TYPE = invert(MapRouteType);
|
||||||
export const MAP_ROUTE_TYPES = Object.freeze(<[string, MapRouteType][]>Object.entries(MapRouteType));
|
export const MAP_ROUTE_TYPES = Object.freeze(<[string, MapRouteType][]>Object.entries(MapRouteType));
|
||||||
|
|
||||||
export enum MapRoutePassType {
|
export enum MapRoutePassType {
|
||||||
|
155
src/components/card/area-edit-card.vue
Normal file
155
src/components/card/area-edit-card.vue
Normal file
@ -0,0 +1,155 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { type MapAreaInfo, MapAreaType, type MapPen, MapPointType } from '@api/map';
|
||||||
|
import type { PointBindModalRef } from '@common/modal/point-bind-modal.vue';
|
||||||
|
import type { RouteBindModalRef } from '@common/modal/route-bind-modal.vue';
|
||||||
|
import type { EditorService } from '@core/editor.service';
|
||||||
|
import sTheme from '@core/theme.service';
|
||||||
|
import { ref, shallowRef } from 'vue';
|
||||||
|
import { computed, inject, type InjectionKey, type ShallowRef } from 'vue';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
token: InjectionKey<ShallowRef<EditorService>>;
|
||||||
|
id?: string;
|
||||||
|
};
|
||||||
|
const props = defineProps<Props>();
|
||||||
|
const editor = inject(props.token)!;
|
||||||
|
|
||||||
|
const pen = computed<MapPen | null>(() => {
|
||||||
|
const v = editor.value.current.value;
|
||||||
|
if (v?.id !== props.id) return null;
|
||||||
|
return v!;
|
||||||
|
});
|
||||||
|
const area = computed<MapAreaInfo | null>(() => {
|
||||||
|
const v = pen.value?.area;
|
||||||
|
if (!v?.type) return null;
|
||||||
|
return v;
|
||||||
|
});
|
||||||
|
|
||||||
|
const refBindPoint = shallowRef<PointBindModalRef>();
|
||||||
|
const pointKeyword = ref<string>('');
|
||||||
|
const points = computed<MapPen[]>(
|
||||||
|
() =>
|
||||||
|
<MapPen[]>(
|
||||||
|
area.value?.points?.map((v) => editor.value.getPenById(v)).filter((v) => v?.label?.includes(pointKeyword.value))
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
const refBindRoute = shallowRef<RouteBindModalRef>();
|
||||||
|
const routeKeyword = ref<string>('');
|
||||||
|
const routes = computed<MapPen[]>(
|
||||||
|
() =>
|
||||||
|
<MapPen[]>(
|
||||||
|
area.value?.routes?.map((v) => editor.value.getPenById(v)).filter((v) => v?.label?.includes(routeKeyword.value))
|
||||||
|
),
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<PointBindModal ref="refBindPoint" :token="token" />
|
||||||
|
<RouteBindModal ref="refBindRoute" :token="token" />
|
||||||
|
|
||||||
|
<a-card class="full" :title="$t('属性')" :bordered="false">
|
||||||
|
<a-flex v-if="id && pen && area" :gap="24" vertical>
|
||||||
|
<a-row :gutter="[8, 8]">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-input :value="$t(MapAreaType[area.type])" disabled />
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-input
|
||||||
|
:maxlength="10"
|
||||||
|
:value="pen.label"
|
||||||
|
@change="editor.updatePen(id, { label: $event.target.value }, false)"
|
||||||
|
>
|
||||||
|
<template #suffix><EditOutlined /></template>
|
||||||
|
</a-input>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-row :gutter="[8, 8]">
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-typography-text>{{ $t('描述') }}:</a-typography-text>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-textarea
|
||||||
|
class="prop"
|
||||||
|
:placeholder="$t('请输入描述内容')"
|
||||||
|
:maxlength="100"
|
||||||
|
:autoSize="{ minRows: 3, maxRows: 3 }"
|
||||||
|
:value="pen?.desc"
|
||||||
|
@change="editor.updatePen(id, { desc: $event.target.value }, false)"
|
||||||
|
/>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-collapse expand-icon-position="end" :bordered="false">
|
||||||
|
<template #expandIcon="v">
|
||||||
|
<i class="icon dropdown" :class="{ active: v?.isActive }" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<a-collapse-panel v-if="MapAreaType.库区 === area.type" :header="$t('绑定动作点')">
|
||||||
|
<template #extra>
|
||||||
|
<a-button class="icon-btn" size="small" @click.stop="refBindPoint?.open(pen, [MapPointType.动作点])">
|
||||||
|
<i class="mask plus" />
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
<a-input class="search mv-8" :placeholder="$t('请输入搜索关键字')" v-model:value="pointKeyword">
|
||||||
|
<template #suffix>
|
||||||
|
<i class="icon search size-16" />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-list rowKey="id" :data-source="points">
|
||||||
|
<template #renderItem="{ item }">
|
||||||
|
<a-list-item class="ph-16" style="height: 36px">
|
||||||
|
<a-typography-text>{{ item.label }}</a-typography-text>
|
||||||
|
</a-list-item>
|
||||||
|
</template>
|
||||||
|
</a-list>
|
||||||
|
</a-collapse-panel>
|
||||||
|
|
||||||
|
<a-collapse-panel
|
||||||
|
v-if="[MapAreaType.互斥区, MapAreaType.非互斥区].includes(area.type)"
|
||||||
|
:header="$t('绑定站点')"
|
||||||
|
>
|
||||||
|
<template #extra>
|
||||||
|
<a-button class="icon-btn" size="small" @click.stop="refBindPoint?.open(pen)">
|
||||||
|
<i class="mask plus" />
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
<a-input class="search mv-8" :placeholder="$t('请输入搜索关键字')" v-model:value="pointKeyword">
|
||||||
|
<template #suffix>
|
||||||
|
<i class="icon search size-16" />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-list rowKey="id" :data-source="points">
|
||||||
|
<template #renderItem="{ item }">
|
||||||
|
<a-list-item class="ph-16" style="height: 36px">
|
||||||
|
<a-typography-text>{{ item.label }}</a-typography-text>
|
||||||
|
</a-list-item>
|
||||||
|
</template>
|
||||||
|
</a-list>
|
||||||
|
</a-collapse-panel>
|
||||||
|
|
||||||
|
<a-collapse-panel v-if="MapAreaType.互斥区 === area.type" :header="$t('绑定路段')">
|
||||||
|
<template #extra>
|
||||||
|
<a-button class="icon-btn" size="small" @click.stop="refBindRoute?.open(pen)">
|
||||||
|
<i class="mask plus" />
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
<a-input class="search mv-8" :placeholder="$t('请输入搜索关键字')" v-model:value="routeKeyword">
|
||||||
|
<template #suffix>
|
||||||
|
<i class="icon search size-16" />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-list rowKey="id" :data-source="routes">
|
||||||
|
<template #renderItem="{ item }">
|
||||||
|
<a-list-item class="ph-16" style="height: 36px">
|
||||||
|
<a-typography-text>{{ item.label }}</a-typography-text>
|
||||||
|
</a-list-item>
|
||||||
|
</template>
|
||||||
|
</a-list>
|
||||||
|
</a-collapse-panel>
|
||||||
|
</a-collapse>
|
||||||
|
</a-flex>
|
||||||
|
<a-empty v-else :image="sTheme.empty" />
|
||||||
|
</a-card>
|
||||||
|
</template>
|
@ -1,6 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { MAP_POINT_TYPES, MapAreaType, type MapPen, type MapPointInfo, MapPointType, type MapRect } from '@api/map';
|
import { MAP_POINT_TYPES, MapAreaType, type MapPen, type MapPointInfo, MapPointType, type MapRect } from '@api/map';
|
||||||
import type { RobotInfo } from '@api/robot';
|
import type { RobotInfo } from '@api/robot';
|
||||||
|
import type { PointBindModalRef } from '@common/modal/point-bind-modal.vue';
|
||||||
import type { RobotBindModalRef } from '@common/modal/robot-bind-modal.vue';
|
import type { RobotBindModalRef } from '@common/modal/robot-bind-modal.vue';
|
||||||
import type { EditorService } from '@core/editor.service';
|
import type { EditorService } from '@core/editor.service';
|
||||||
import sTheme from '@core/theme.service';
|
import sTheme from '@core/theme.service';
|
||||||
@ -36,18 +37,32 @@ const robotKeyword = ref<string>('');
|
|||||||
const robots = computed<RobotInfo[]>(
|
const robots = computed<RobotInfo[]>(
|
||||||
() =>
|
() =>
|
||||||
<RobotInfo[]>(
|
<RobotInfo[]>(
|
||||||
point.value?.robots?.map((v) => editor.value.getRobotById(v)).filter((v) => v?.label.includes(robotKeyword.value))
|
point.value?.robots
|
||||||
|
?.map((v) => editor.value.getRobotById(v))
|
||||||
|
.filter((v) => v?.label?.includes(robotKeyword.value))
|
||||||
) ?? [],
|
) ?? [],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const refBindPoint = shallowRef<PointBindModalRef>();
|
||||||
|
const pointKeyword = ref<string>('');
|
||||||
|
const actions = computed<MapPen[]>(
|
||||||
|
() =>
|
||||||
|
<MapPen[]>(
|
||||||
|
point.value?.actions
|
||||||
|
?.map((v) => editor.value.getPenById(v))
|
||||||
|
.filter((v) => v?.point?.type === MapPointType.动作点 && v?.label?.includes(pointKeyword.value))
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
const coArea1 = computed<MapPen[]>(() => editor.value.getBoundAreas(props.id, 'point', MapAreaType.库区));
|
const coArea1 = computed<MapPen[]>(() => editor.value.getBoundAreas(props.id, 'point', MapAreaType.库区));
|
||||||
const coArea2 = computed<MapPen[]>(() => editor.value.getBoundAreas(props.id, 'point', MapAreaType.互斥区));
|
const coArea2 = computed<MapPen[]>(() => editor.value.getBoundAreas(props.id, 'point', MapAreaType.互斥区));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<RobotBindModal ref="refBindRobot" :token="token" />
|
<RobotBindModal ref="refBindRobot" :token="token" />
|
||||||
|
<PointBindModal ref="refBindPoint" :token="token" />
|
||||||
|
|
||||||
<a-card :title="$t('属性')" :bordered="false">
|
<a-card class="full" :title="$t('属性')" :bordered="false">
|
||||||
<a-flex v-if="id && pen && point" :gap="24" vertical>
|
<a-flex v-if="id && pen && point" :gap="24" vertical>
|
||||||
<a-row :gutter="[8, 8]">
|
<a-row :gutter="[8, 8]">
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
@ -144,14 +159,19 @@ const coArea2 = computed<MapPen[]>(() => editor.value.getBoundAreas(props.id, 'p
|
|||||||
|
|
||||||
<a-collapse-panel v-if="MapPointType.等待点 === point.type" :header="$t('绑定动作点')">
|
<a-collapse-panel v-if="MapPointType.等待点 === point.type" :header="$t('绑定动作点')">
|
||||||
<template #extra>
|
<template #extra>
|
||||||
<a-button class="icon-btn" size="small" @click.stop>
|
<a-button class="icon-btn" size="small" @click.stop="refBindPoint?.open(pen, [MapPointType.动作点])">
|
||||||
<i class="mask plus" />
|
<i class="mask plus" />
|
||||||
</a-button>
|
</a-button>
|
||||||
</template>
|
</template>
|
||||||
<a-list rowKey="id" :data-source="point.actions">
|
<a-input class="search mv-8" :placeholder="$t('请输入搜索关键字')" v-model:value="pointKeyword">
|
||||||
|
<template #suffix>
|
||||||
|
<i class="icon search size-16" />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-list rowKey="id" :data-source="actions">
|
||||||
<template #renderItem="{ item }">
|
<template #renderItem="{ item }">
|
||||||
<a-list-item class="ph-16" style="height: 36px">
|
<a-list-item class="ph-16" style="height: 36px">
|
||||||
<a-typography-text>{{ editor.getPenById(item)?.label }}</a-typography-text>
|
<a-typography-text>{{ item.label }}</a-typography-text>
|
||||||
</a-list-item>
|
</a-list-item>
|
||||||
</template>
|
</template>
|
||||||
</a-list>
|
</a-list>
|
||||||
|
96
src/components/modal/point-bind-modal.vue
Normal file
96
src/components/modal/point-bind-modal.vue
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { type MapPen, MapPointType } from '@api/map';
|
||||||
|
import type { EditorService } from '@core/editor.service';
|
||||||
|
import { computed, inject, type InjectionKey, ref, type ShallowRef, toRaw } from 'vue';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
token: InjectionKey<ShallowRef<EditorService>>;
|
||||||
|
};
|
||||||
|
const props = defineProps<Props>();
|
||||||
|
const editor = inject(props.token)!;
|
||||||
|
|
||||||
|
export type PointBindModalRef = Ref;
|
||||||
|
type Ref = {
|
||||||
|
open: (pen: MapPen, filter?: MapPointType[]) => void;
|
||||||
|
};
|
||||||
|
const open: Ref['open'] = (pen, filter = []) => {
|
||||||
|
if (!pen?.id) return;
|
||||||
|
keyword.value = '';
|
||||||
|
types.value = [MapPointType.禁行点, ...filter];
|
||||||
|
id.value = pen.id;
|
||||||
|
sn.value = pen.name;
|
||||||
|
switch (sn.value) {
|
||||||
|
case 'point':
|
||||||
|
selected.value = pen.point?.actions ?? [];
|
||||||
|
break;
|
||||||
|
case 'area':
|
||||||
|
selected.value = pen.area?.points ?? [];
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
selected.value = [];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
show.value = true;
|
||||||
|
};
|
||||||
|
defineExpose<Ref>({ open });
|
||||||
|
|
||||||
|
const show = ref<boolean>(false);
|
||||||
|
const keyword = ref<string>('');
|
||||||
|
|
||||||
|
const types = ref<MapPointType[]>([MapPointType.禁行点]);
|
||||||
|
const points = computed<MapPen[]>(() =>
|
||||||
|
editor.value.points.value
|
||||||
|
.filter(({ point }) => point?.type && !types.value.includes(point.type))
|
||||||
|
.filter(({ label }) => label?.includes(keyword.value)),
|
||||||
|
);
|
||||||
|
|
||||||
|
const id = ref<string>('');
|
||||||
|
const sn = ref<string>();
|
||||||
|
const selected = ref<string[]>([]);
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
switch (sn.value) {
|
||||||
|
case 'point':
|
||||||
|
editor.value.updatePoint(id.value, { actions: toRaw(selected.value) });
|
||||||
|
break;
|
||||||
|
case 'area':
|
||||||
|
editor.value.updateArea(id.value, { points: toRaw(selected.value) });
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
selected.value = [];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
show.value = false;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a-modal :width="300" :title="$t('绑定站点')" v-model:open="show" :mask-closable="false" centered @ok="submit">
|
||||||
|
<a-input class="search" :placeholder="$t('请输入搜索关键字')" v-model:value="keyword">
|
||||||
|
<template #suffix>
|
||||||
|
<i class="icon search size-16" />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
|
||||||
|
<a-table
|
||||||
|
class="mt-10"
|
||||||
|
rowKey="id"
|
||||||
|
:dataSource="points"
|
||||||
|
:pagination="false"
|
||||||
|
:rowSelection="{
|
||||||
|
columnWidth: 32,
|
||||||
|
selectedRowKeys: selected,
|
||||||
|
onChange: (keys) => (selected = <string[]>keys),
|
||||||
|
}"
|
||||||
|
:scroll="{ y: 80 }"
|
||||||
|
bordered
|
||||||
|
>
|
||||||
|
<a-table-column dataIndex="label" :title="$t('站点')" />
|
||||||
|
<a-table-column :dataIndex="['point', 'type']" :title="$t('站点类型')">
|
||||||
|
<template #default="{ text }">
|
||||||
|
{{ $t(MapPointType[text]) }}
|
||||||
|
</template>
|
||||||
|
</a-table-column>
|
||||||
|
</a-table>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
75
src/components/modal/route-bind-modal.vue
Normal file
75
src/components/modal/route-bind-modal.vue
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { MAP_ROUTE_TYPE, type MapPen, MapRoutePassType } from '@api/map';
|
||||||
|
import type { EditorService } from '@core/editor.service';
|
||||||
|
import { computed, inject, type InjectionKey, ref, type ShallowRef, toRaw } from 'vue';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
token: InjectionKey<ShallowRef<EditorService>>;
|
||||||
|
};
|
||||||
|
const props = defineProps<Props>();
|
||||||
|
const editor = inject(props.token)!;
|
||||||
|
|
||||||
|
export type RouteBindModalRef = Ref;
|
||||||
|
type Ref = {
|
||||||
|
open: (pen: MapPen) => void;
|
||||||
|
};
|
||||||
|
const open: Ref['open'] = (pen) => {
|
||||||
|
if (!pen?.id) return;
|
||||||
|
keyword.value = '';
|
||||||
|
id.value = pen.id;
|
||||||
|
selected.value = pen.area?.routes ?? [];
|
||||||
|
show.value = true;
|
||||||
|
};
|
||||||
|
defineExpose<Ref>({ open });
|
||||||
|
|
||||||
|
const show = ref<boolean>(false);
|
||||||
|
const keyword = ref<string>('');
|
||||||
|
|
||||||
|
const routes = computed<MapPen[]>(() =>
|
||||||
|
editor.value.routes.value.filter(({ label }) => label?.includes(keyword.value)),
|
||||||
|
);
|
||||||
|
|
||||||
|
const id = ref<string>('');
|
||||||
|
const selected = ref<string[]>([]);
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
editor.value.updateArea(id.value, { routes: toRaw(selected.value) });
|
||||||
|
show.value = false;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a-modal :width="572" :title="$t('绑定路段')" v-model:open="show" :mask-closable="false" centered @ok="submit">
|
||||||
|
<a-input class="search" :placeholder="$t('请输入搜索关键字')" v-model:value="keyword">
|
||||||
|
<template #suffix>
|
||||||
|
<i class="icon search size-16" />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
|
||||||
|
<a-table
|
||||||
|
class="mt-10"
|
||||||
|
rowKey="id"
|
||||||
|
:dataSource="routes"
|
||||||
|
:pagination="false"
|
||||||
|
:rowSelection="{
|
||||||
|
columnWidth: 32,
|
||||||
|
selectedRowKeys: selected,
|
||||||
|
onChange: (keys) => (selected = <string[]>keys),
|
||||||
|
}"
|
||||||
|
:scroll="{ y: 80 }"
|
||||||
|
bordered
|
||||||
|
>
|
||||||
|
<a-table-column dataIndex="label" :title="$t('路段')" />
|
||||||
|
<a-table-column :dataIndex="['route', 'type']" :title="$t('路段类型')">
|
||||||
|
<template #default="{ text }">
|
||||||
|
{{ $t(MAP_ROUTE_TYPE[text]) }}
|
||||||
|
</template>
|
||||||
|
</a-table-column>
|
||||||
|
<a-table-column :dataIndex="['route', 'pass']" :title="$t('可通行类型')">
|
||||||
|
<template #default="{ text }">
|
||||||
|
{{ $t(MapRoutePassType[text]) }}
|
||||||
|
</template>
|
||||||
|
</a-table-column>
|
||||||
|
</a-table>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
@ -145,7 +145,7 @@ const selectRobot = (id: string) => {
|
|||||||
<div v-if="editable"></div>
|
<div v-if="editable"></div>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="isArea">
|
<template v-if="isArea">
|
||||||
<div v-if="editable"></div>
|
<AreaEditCard v-if="editable" :token="EDITOR_KEY" :id="current.id" />
|
||||||
<AreaDetailCard v-else :token="EDITOR_KEY" :current="current.id" />
|
<AreaDetailCard v-else :token="EDITOR_KEY" :current="current.id" />
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
@ -159,10 +159,10 @@ const selectRobot = (id: string) => {
|
|||||||
|
|
||||||
.toolbar-container {
|
.toolbar-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 50%;
|
|
||||||
bottom: 40px;
|
bottom: 40px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-container {
|
.card-container {
|
||||||
@ -171,7 +171,8 @@ const selectRobot = (id: string) => {
|
|||||||
right: 64px;
|
right: 64px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
width: 320px;
|
width: 320px;
|
||||||
max-height: calc(100% - 96px);
|
height: calc(100% - 96px);
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-typography.title {
|
.ant-typography.title {
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { EDITOR_CONFIG, MapAreaType, type MapPen, type MapPointInfo, MapPointType } from '@api/map';
|
import { EDITOR_CONFIG, type MapAreaInfo, MapAreaType, type MapPen, type MapPointInfo, MapPointType } from '@api/map';
|
||||||
import type { RobotGroup, RobotInfo } from '@api/robot';
|
import type { RobotGroup, RobotInfo } from '@api/robot';
|
||||||
import type { SceneData } from '@api/scene';
|
import type { SceneData } from '@api/scene';
|
||||||
import sTheme from '@core/theme.service';
|
import sTheme from '@core/theme.service';
|
||||||
@ -198,8 +198,8 @@ export class EditorService extends Meta2d {
|
|||||||
public updatePoint(id: string, info: Partial<MapPointInfo>): void {
|
public updatePoint(id: string, info: Partial<MapPointInfo>): void {
|
||||||
const { point } = this.getPenById(id) ?? {};
|
const { point } = this.getPenById(id) ?? {};
|
||||||
if (!point?.type) return;
|
if (!point?.type) return;
|
||||||
const p = { ...point, ...info };
|
const o = { ...point, ...info };
|
||||||
this.setValue({ id, point: p }, { render: true, history: true, doEvent: true });
|
this.setValue({ id, point: o }, { render: true, history: true, doEvent: true });
|
||||||
}
|
}
|
||||||
public changePointType(id: string, type: MapPointType): void {
|
public changePointType(id: string, type: MapPointType): void {
|
||||||
this.setValue(
|
this.setValue(
|
||||||
@ -223,6 +223,15 @@ export class EditorService extends Meta2d {
|
|||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
//#region 线路
|
//#region 线路
|
||||||
|
public readonly routes = useObservable<MapPen[], MapPen[]>(
|
||||||
|
this.#change$$.pipe(
|
||||||
|
filter((v) => v),
|
||||||
|
debounceTime(100),
|
||||||
|
map(() => this.find('route').map((v) => (v.label = this.getRouteLabel(v.id)))),
|
||||||
|
),
|
||||||
|
{ initialValue: new Array<MapPen>() },
|
||||||
|
);
|
||||||
|
|
||||||
public getRouteLabel(id?: string): string {
|
public getRouteLabel(id?: string): string {
|
||||||
if (!id) return '';
|
if (!id) return '';
|
||||||
const pen = this.getPenById(id);
|
const pen = this.getPenById(id);
|
||||||
@ -296,6 +305,13 @@ export class EditorService extends Meta2d {
|
|||||||
this.bottom(area);
|
this.bottom(area);
|
||||||
// this.pushHistory({ type: EditType.Add, pens: [cloneDeep(pen)] });
|
// this.pushHistory({ type: EditType.Add, pens: [cloneDeep(pen)] });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public updateArea(id: string, info: Partial<MapAreaInfo>): void {
|
||||||
|
const { area } = this.getPenById(id) ?? {};
|
||||||
|
if (!area?.type) return;
|
||||||
|
const o = { ...area, ...info };
|
||||||
|
this.setValue({ id, area: o }, { render: true, history: true, doEvent: true });
|
||||||
|
}
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
constructor(container: HTMLDivElement) {
|
constructor(container: HTMLDivElement) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user