@kengic/vue 0.30.1-beta.96 → 0.31.0

package/component/KgCircularShuttleMonitor/KgCircularShuttleMonitor.Canvas.tsx

@@ -1,606 +0,0 @@
-import { Icon } from '@iconify/vue';
-import { Q } from '@thymine/xunee';
-import { Button, notification } from 'ant-design-vue';
-import { cloneDeep, isNil } from 'lodash-es';
-import { defineComponent, onMounted, onUnmounted, watch } from 'vue';
-import './KgCircularShuttleMonitor.css';
-import { useKg } from '../../config';
-import { httpClient } from '../../service';
-import { KgUtil } from '../../util';
-import { IKgCanvasElementProperties, KgCanvas, useKgCanvas } from '../KgCanvas';
-import { NODE_KEY, useDraw } from './KgCircularShuttleMonitor.Canvas.service';
-import { KgCircularShuttleMonitorLegend } from './KgCircularShuttleMonitor.Legend';
-import { MapDTO, MapStationVO, StatusDTO, StatusRgvVO, TAB_KEY } from './KgCircularShuttleMonitor.model';
-import { KgCircularShuttleMonitorSetting } from './KgCircularShuttleMonitor.Setting';
-import { useKgCircularShuttleMonitorStore } from './KgCircularShuttleMonitor.store';
-
-/**
- * 环形穿梭车可视化:画布.
- */
-export const KgCircularShuttleMonitorCanvas = defineComponent({
-    name: 'KgCircularShuttleMonitorCanvas',
-    setup(props, { emit }) {
-        const kg = useKg();
-        const kgCanvasID = KgUtil.uuid({ prefix: 'kg-canvas-' });
-        const kgCanvas = useKgCanvas(kgCanvasID);
-        const store = useKgCircularShuttleMonitorStore();
-
-        kgCanvas.onInit(async ({ graph }) => {
-            _graph = graph;
-            store.set$graph(graph);
-
-            _graph.minScale = 0.001;
-            _graph.scale = 0.001;
-
-            if (store.getProps?.isScalable === false) {
-                // 交互模式设为空, 用于禁用拖动和缩放等操作,
-                _graph.interactionMode = Q.Consts.INTERACTION_MODE_VIEW;
-                _graph.enableWheelZoom = false;
-            }
-
-            useDrawHook.draw({ isZoomToOverview: true, type: 'MAP' });
-            return false;
-        });
-
-        kgCanvas.onReload(async ({ graph }) => {
-            await requestMapData();
-            graph.moveToCenter(0.001, false);
-            useDrawHook.draw({ isZoomToOverview: true, type: 'MAP' });
-            return false;
-        });
-
-        kgCanvas.onResize(async ({ graph, width, height }) => {
-            graph.zoomToOverview(false);
-            return false;
-        });
-
-        kgCanvas.onClick(async ({ graph, element }) => {
-            const key = (element?.properties as IKgCanvasElementProperties)?.key;
-
-            // 点击选中小车,
-            if (key?.startsWith(NODE_KEY.RGV) || key?.startsWith(NODE_KEY.RGV__PATH) || key?.startsWith(NODE_KEY.RGV__PATH__LINE) || key?.startsWith(NODE_KEY.RGV__PATH__RGV)) {
-                const rgv = element?.properties?.data as StatusRgvVO;
-                // 该小车的「目的站点」列表,
-                const stationList =
-                    graph.graphModel.datas.filter((i) => i.properties.key?.startsWith(NODE_KEY.STATION) && (i.properties.data as MapStationVO).stationNo === rgv.destinationStation).map((i) => i.properties.data as MapStationVO) ?? [];
-
-                store.$Canvas$setCurrentStationList(stationList.length > 0 ? [stationList[0]] : []);
-                store.$Canvas$setCurrentRgvList(rgv ? [rgv] : []);
-                useDrawHook.onSelectChange();
-            }
-            // 点击选中站点,
-            else if (key?.startsWith(NODE_KEY.STATION)) {
-                const station = element?.properties?.data as MapStationVO;
-                // 「目的站点」为该站点的小车列表,
-                const rgvList =
-                    graph.graphModel.datas.filter((i) => i.properties.key?.startsWith(NODE_KEY.RGV) && (i.properties.data as StatusRgvVO).destinationStation === station.stationNo).map((i) => i.properties.data as StatusRgvVO) ?? [];
-
-                // 站点是有关联小车,
-                if (rgvList.length > 0) {
-                    store.$Canvas$setCurrentStationList(station ? [station] : []);
-                    store.$Canvas$setCurrentRgvList([rgvList[0]]);
-                }
-                // 站点没有关联小车,
-                else {
-                    store.$Canvas$setCurrentStationList([]);
-                    store.$Canvas$setCurrentRgvList([]);
-                }
-
-                useDrawHook.onSelectChange();
-            }
-            // 点击其他地方,
-            else {
-                store.$Canvas$setCurrentStationList([]);
-                store.$Canvas$setCurrentRgvList([]);
-                useDrawHook.onSelectChange();
-            }
-
-            store.$Tab$insertRgvList(store.$Canvas$getCurrentRgvList);
-
-            return false;
-        });
-
-        kgCanvas.onRightClick(async ({ graph, element, contextMenus }) => {
-            switch (true) {
-                default: {
-                    contextMenus.value = [];
-                    break;
-                }
-            }
-
-            return false;
-        });
-
-        kgCanvas.onMouseEnter(async ({ graph, element }) => {
-            return false;
-        });
-
-        kgCanvas.onMouseLeave(async ({ graph, element }) => {
-            return false;
-        });
-
-        kgCanvas.onContextMenuOpen(async () => {
-            return false;
-        });
-
-        kgCanvas.onContextMenuClose(async () => {
-            return false;
-        });
-
-        //region DATA
-        //----------------------------------------------------------------------------------------------------
-        /**
-         * 防止浏览器对定时器节流.
-         */
-        let audioContext: AudioContext | null = null;
-        let oscillatorNode: OscillatorNode | null = null;
-
-        /**
-         * 图形组件对象.
-         */
-        let _graph: Q.Graph | null = null;
-
-        /**
-         * 循环请求小车状态的定时器.
-         */
-        let requestCanvasStatusTimer: number = -1;
-
-        /**
-         * 上一次请求小车状态的请求完成的时间戳.
-         */
-        let requestCanvasPreviousTimestamp: number = 0;
-
-        /**
-         * 绘制小车状态的定时器.
-         */
-        let drawCanvasStatusTimer: number = -1;
-
-        /**
-         * 起点刻度.
-         */
-        let SRC_COORDINATE: number | null = null;
-
-        /**
-         * 终点刻度.
-         */
-        let DST_COORDINATE: number | null = null;
-
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region WATCH
-        //----------------------------------------------------------------------------------------------------
-        // 「库区」变更时, 需重新请求图形地图数据,
-        watch(
-            () => store.$AreaSelect$getValue,
-            async ($AreaSelect$value) => {
-                if ($AreaSelect$value) {
-                    await requestMapData();
-                    useDrawHook.draw({ isZoomToOverview: true, type: 'MAP' });
-                }
-            },
-        );
-
-        // 「是否显示小车路线」变更时, 需重新请求图形地图数据,
-        watch(
-            () => store.$Canvas$Setting$getIsRgvPathVisible,
-            async () => {
-                await requestMapData();
-                useDrawHook.draw({ isZoomToOverview: true, type: 'MAP' });
-            },
-        );
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        const useDrawHook = useDraw();
-
-        //region FUNCTION
-        //----------------------------------------------------------------------------------------------------
-        /**
-         * 获取图形组件对象.
-         */
-        function graph(): Q.Graph | null {
-            return _graph;
-        }
-
-        /**
-         * 请求地图数据.
-         */
-        async function requestMapData() {
-            try {
-                store.$Canvas$setMapIsRequesting(true);
-
-                // 需要同时请求小车数据, 以便计算轨道宽度,
-                const [mapResult, statusResult]: [{ data: MapDTO; code: number; message: string } | null | undefined, { data: StatusDTO; code: number; message: string } | null | undefined] = await Promise.all([
-                    httpClient().request(
-                        {
-                            method: 'GET',
-                            params: { executorId: store.$AreaSelect$getValue },
-                            url: store.getProps?.api?.GetMap ?? '/was/CircleRgvMap/GetMap',
-                        },
-                        {
-                            isTransformResponse: false,
-                            mock: (window as any).$KgCircularShuttleMonitor$requestCanvasMapData ? (() => (window as any).$KgCircularShuttleMonitor$requestCanvasMapData())() : undefined,
-                        },
-                    ),
-                    httpClient().request(
-                        {
-                            method: 'GET',
-                            params: { executorId: store.$AreaSelect$getValue },
-                            url: store.getProps?.api?.GetState ?? '/was/CircleRgvState/GetState',
-                        },
-                        {
-                            isTransformResponse: false,
-                            mock: (window as any).$KgCircularShuttleMonitor$requestCanvasStatusData ? (() => (window as any).$KgCircularShuttleMonitor$requestCanvasStatusData())() : undefined,
-                        },
-                    ),
-                ]);
-
-                // 请求成功,
-                if (mapResult && mapResult.code === 0 && statusResult && statusResult.code === 0) {
-                    if (!requestMapData_ValidateData(mapResult.data)) {
-                        return;
-                    }
-
-                    // 显示小车路线,
-                    if (store.$Canvas$Setting$getIsRgvPathVisible) {
-                        const rgvNumber = statusResult.data?.rgvState?.filter((i) => i.state !== 0)?.length ?? 0;
-                        if (rgvNumber > 0) {
-                            mapResult.data.map.lineWidth = (statusResult.data?.rgvState?.[0]?.width ?? 0) * (rgvNumber + 1) + store.$Canvas$Setting$getRgvMarginY * (rgvNumber + 1 + 1);
-                        }
-                    } else {
-                        mapResult.data.map.lineWidth = (statusResult.data?.rgvState?.[0]?.width ?? 0) * 1 + store.$Canvas$Setting$getRgvMarginY * (1 + 1);
-                    }
-
-                    // 计算内轨道的矩形的宽,
-                    mapResult.data.map.width = Math.floor(((mapResult.data?.map?.destinationCoordinate ?? 0) - (mapResult.data?.map?.sourceCoordinate ?? 0) - (mapResult.data?.map?.length ?? 0) * 2) / Math.PI);
-
-                    SRC_COORDINATE = mapResult.data?.map?.sourceCoordinate!;
-                    DST_COORDINATE = mapResult.data?.map?.destinationCoordinate!;
-
-                    store.$Canvas$setMapData(cloneDeep(mapResult.data));
-                    store.$Canvas$setMapDataList([mapResult.data]);
-                    store.$Canvas$setStatusDataList([]);
-                    store.$Tab$setRgvList([]);
-                    store.$Tab$setActiveKey(TAB_KEY.RGV_SUMMARY);
-                }
-                // 请求失败,
-                else {
-                    notification.error({ message: mapResult?.message ?? statusResult?.message ?? kg.t('KgCircleVisCanvas.getMapErrorMessage') });
-                }
-            } finally {
-                store.$Canvas$setMapIsRequesting(false);
-            }
-        }
-
-        /**
-         * 请求地图数据:验证地图数据,
-         *
-         * @param data 地图数据.
-         */
-        function requestMapData_ValidateData(data: MapDTO): boolean {
-            if (!data.map) {
-                notification.error({ message: '地图数据 | 轨道数据为空' });
-                return false;
-            }
-
-            if (!data.map?.lineWidth || Number.isNaN(data.map?.lineWidth)) {
-                notification.error({ message: '地图数据 | 轨道宽度不是有效数字' });
-                return false;
-            }
-
-            return true;
-        }
-
-        /**
-         * 请求状态数据.
-         */
-        async function requestStatusData() {
-            // 尚未选择库区,
-            if (!store.$AreaSelect$getValue) {
-                return;
-            }
-
-            // 上次请求尚未结束,
-            if (store.$Canvas$getStatusIsRequesting) {
-                return;
-            }
-
-            try {
-                store.$Canvas$setStatusIsRequesting(true);
-
-                const statusResult: { data: StatusDTO; code: number; message: string } | null | undefined = await httpClient().request(
-                    {
-                        method: 'GET',
-                        params: { executorId: store.$AreaSelect$getValue },
-                        url: store.getProps?.api?.GetState ?? '/was/CircleRgvState/GetState',
-                    },
-                    {
-                        isTransformResponse: false,
-                        mock: (window as any).$KgCircularShuttleMonitor$requestCanvasStatusData ? (() => (window as any).$KgCircularShuttleMonitor$requestCanvasStatusData())() : undefined,
-                    },
-                );
-
-                // 请求成功,
-                if (statusResult && statusResult.code === 0) {
-                    if (!requestStatusData_ValidateData(statusResult.data)) {
-                        return;
-                    }
-
-                    for (let rgv of statusResult.data?.rgvState ?? []) {
-                        // 当前选中小车, 目的站点发生变更,
-                        if (rgv.rgvNo === store.$Canvas$getCurrentRgvList[0]?.rgvNo) {
-                            if (rgv.destinationStation !== store.$Canvas$getCurrentStationList[0]?.stationNo) {
-                                const stationList = store.$Canvas$getMapData?.conveyor?.filter((i) => i.stationNo === rgv.destinationStation) ?? [];
-
-                                store.$Canvas$setCurrentStationList(stationList.length > 0 ? [stationList[0]] : []);
-                                useDrawHook.onSelectChange();
-                            }
-                        }
-                    }
-
-                    for (let rgv of store.$Tab$getRgvList) {
-                        // 小车已不存在, 则移除对应的标签页,
-                        if (!statusResult.data?.rgvState?.find((i) => i.rgvNo === rgv.rgvNo)) {
-                            store.$Tab$deleteRgv(rgv);
-                        }
-                    }
-
-                    // 第一次请求小车状态数据,
-                    if (requestCanvasPreviousTimestamp <= 0) {
-                        store.$Canvas$pushStatusDataList(statusResult.data);
-                    }
-                    // 第多次请求小车状态数据,
-                    else {
-                        // 两次请求间隔时间,
-                        const interval = Date.now() - requestCanvasPreviousTimestamp;
-                        // 状态数据需要分成几次绘制,
-                        const n = Math.floor(interval / (store.getProps?.updateStatusInterval ?? 25));
-
-                        if (n <= 0) {
-                            store.$Canvas$pushStatusDataList(statusResult.data);
-                        } else {
-                            for (let rgv of statusResult.data.rgvState ?? []) {
-                                // 上次请求的状态数据中, 该小车的刻度; 如果上次请求的状态数据中没有该小车, 表示小车是这次新增的, 因此使用此次的刻度,
-                                rgv.PREVIOUS_COORDINATE = store.$Canvas$getStatusData?.rgvState.find((i) => i.rgvNo === rgv.rgvNo)?.position ?? rgv.position;
-                            }
-
-                            for (let i = 0; i < n; i++) {
-                                const _data = cloneDeep(statusResult.data);
-
-                                for (let _rgv of _data.rgvState) {
-                                    const rgv = statusResult.data.rgvState.find((j) => j.rgvNo === _rgv.rgvNo)!;
-
-                                    // 小车刻度变小,
-                                    if (rgv.position < rgv.PREVIOUS_COORDINATE!) {
-                                        // 小车刻度出现误差, 则使用上次的小车刻度,
-                                        if (rgv.PREVIOUS_COORDINATE! - rgv.position < (store.getProps?.rgvCoordinateDeviation ?? 10)) {
-                                            _rgv.position = rgv.PREVIOUS_COORDINATE!;
-                                        }
-                                        // 小车跨过了终点, 重新从起点出发了,
-                                        else {
-                                            let position = Math.floor(rgv.PREVIOUS_COORDINATE! + ((rgv.position - SRC_COORDINATE! + DST_COORDINATE! - rgv.PREVIOUS_COORDINATE!) / n) * (i + 1));
-                                            if (position > DST_COORDINATE!) {
-                                                position = position - DST_COORDINATE! + SRC_COORDINATE!;
-                                            }
-
-                                            _rgv.position = position;
-                                        }
-                                    }
-                                    // 小车刻度变大,
-                                    else {
-                                        let position = Math.floor(rgv.PREVIOUS_COORDINATE! + ((rgv.position - rgv.PREVIOUS_COORDINATE!) / n) * (i + 1));
-                                        if (position > DST_COORDINATE!) {
-                                            position = position - DST_COORDINATE! + SRC_COORDINATE!;
-                                        }
-
-                                        _rgv.position = position;
-                                    }
-                                }
-
-                                store.$Canvas$pushStatusDataList(_data);
-                            }
-                        }
-                    }
-
-                    requestCanvasPreviousTimestamp = Date.now();
-                    store.$Canvas$setStatusData(cloneDeep(statusResult.data));
-                }
-                // 请求失败,
-                else {
-                    notification.error({ message: statusResult?.message ?? kg.t('KgCircleVisCanvas.getStateErrorMessage') });
-                }
-            } finally {
-                store.$Canvas$setStatusIsRequesting(false);
-            }
-        }
-
-        /**
-         * 请求状态数据:验证状态数据,
-         *
-         * @param data 状态数据.
-         */
-        function requestStatusData_ValidateData(data: StatusDTO): boolean {
-            for (let rgv of data.rgvState ?? []) {
-                if (isNil(rgv.position)) {
-                    rgv.position = SRC_COORDINATE!;
-                }
-
-                // 小车刻度超出范围,
-                if (rgv.position < SRC_COORDINATE! || rgv.position > DST_COORDINATE!) {
-                    rgv.position = SRC_COORDINATE!;
-                }
-            }
-
-            return true;
-        }
-
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region LIFECYCLE
-        //----------------------------------------------------------------------------------------------------
-        onMounted(() => {
-            //region 防止浏览器对定时器节流,
-            //----------------------------------------------------------------------------------------------------
-            audioContext = new AudioContext();
-            oscillatorNode = audioContext.createOscillator();
-            oscillatorNode.frequency.value = 0.01;
-            oscillatorNode.connect(audioContext.destination);
-            oscillatorNode.start();
-
-            document.addEventListener('click', () => audioContext?.resume());
-            //----------------------------------------------------------------------------------------------------
-            //endregion
-
-            requestCanvasStatusTimer = window.setInterval(async () => {
-                await requestStatusData();
-            }, store.getProps?.requestStatusInterval ?? 1000);
-
-            drawCanvasStatusTimer = window.setInterval(async () => {
-                useDrawHook.draw({ isZoomToOverview: false, type: 'STATUS' });
-            }, store.getProps?.updateStatusInterval ?? 25);
-        });
-
-        onUnmounted(() => {
-            if (requestCanvasStatusTimer !== -1) {
-                clearInterval(requestCanvasStatusTimer);
-            }
-            if (drawCanvasStatusTimer !== -1) {
-                clearInterval(drawCanvasStatusTimer);
-            }
-
-            oscillatorNode?.stop();
-            audioContext?.close();
-        });
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        return () => (
-            <KgCanvas
-                kgIsGridBackground={false}
-                kgCanvasToolbarFullscreen={{ kgIsShowText: true }}
-                id={kgCanvasID}
-            >
-                {{
-                    right: () => {
-                        if (!store.$Setting$getIsVisible) {
-                            return null;
-                        }
-
-                        return <KgCircularShuttleMonitorSetting />;
-                    },
-
-                    toolbarRight: () => {
-                        return (
-                            <>
-                                {store.$Canvas$Setting$getIsLegendVisible && <KgCircularShuttleMonitorLegend />}
-
-                                {/* 设置面板 */}
-                                <Button
-                                    loading={false}
-                                    type={'default'}
-                                    class={{
-                                        'btn-setting': true,
-                                        'btn-setting--active': store.$Setting$getIsVisible,
-                                        'kg-button-item': true,
-                                    }}
-                                    style={{ marginRight: '3px' }}
-                                    onClick={() => {
-                                        store.$Setting$setIsVisible(!store.$Setting$getIsVisible);
-                                    }}
-                                >
-                                    <Icon icon="ant-design:setting-outlined" />
-                                    {kg.t('KgCircleVisCanvas.setting')}
-                                </Button>
-                            </>
-                        );
-                    },
-
-                    tooltip: ({ event, element, graph }: { event: MouseEvent; element: Q.Element; graph: Q.Graph }) => {
-                        const key = (element?.properties as IKgCanvasElementProperties)?.key;
-
-                        if (key?.startsWith(NODE_KEY.RGV)) {
-                            return (
-                                <div class="kg-circular-shuttle-monitor--tooltip-rgv">
-                                    <div class="item">
-                                        <div class="label">{kg.t('KgCircleVisCanvas.rgvNo')}:</div>
-                                        <div class="value">{((element?.properties as IKgCanvasElementProperties)?.data as StatusRgvVO)?.rgvNo ?? ''}</div>
-                                    </div>
-                                    <div class="item">
-                                        <div class="label">{kg.t('KgCircleVisCanvas.state')}:</div>
-                                        <div class="value">
-                                            {(() => {
-                                                switch (((element?.properties as IKgCanvasElementProperties)?.data as StatusRgvVO)?.state ?? -1) {
-                                                    case 0:
-                                                        return kg.t('KgCircleVisLegend.offline');
-                                                    case 1:
-                                                        return kg.t('KgCircleVisLegend.warn');
-                                                    case 2:
-                                                        return kg.t('KgCircleVisLegend.manual');
-                                                    case 3:
-                                                        return kg.t('KgCircleVisLegend.idle');
-                                                    case 4:
-                                                        return kg.t('KgCircleVisLegend.get');
-                                                    case 5:
-                                                        return kg.t('KgCircleVisLegend.put');
-                                                    case 6:
-                                                        return kg.t('KgCircleVisLegend.drive');
-
-                                                    default:
-                                                        return '';
-                                                }
-                                            })()}
-                                        </div>
-                                    </div>
-                                    <div class="item">
-                                        <div class="label">{kg.t('KgCircleVisCanvas.sourceStation')}:</div>
-                                        <div class="value">{((element?.properties as IKgCanvasElementProperties)?.data as StatusRgvVO)?.sourceStation ?? ''}</div>
-                                    </div>
-                                    <div class="item">
-                                        <div class="label">{kg.t('KgCircleVisCanvas.destinationStation')}:</div>
-                                        <div class="value">{((element?.properties as IKgCanvasElementProperties)?.data as StatusRgvVO)?.destinationStation ?? ''}</div>
-                                    </div>
-                                    {!!(((element?.properties as IKgCanvasElementProperties)?.data as StatusRgvVO)?.loadState === 1) && (
-                                        <div class="item">
-                                            <div class="label">{kg.t('KgCircleVisCanvas.containerId')}:</div>
-                                            <div class="value">{((element?.properties as IKgCanvasElementProperties)?.data as StatusRgvVO)?.containerId ?? ''}</div>
-                                        </div>
-                                    )}
-                                </div>
-                            );
-                        }
-
-                        if (key?.startsWith(NODE_KEY.STATION)) {
-                            return (
-                                <div class="kg-circular-shuttle-monitor--tooltip-station">
-                                    <div class="item">
-                                        <div class="label">{kg.t('KgCircleVisCanvas.stationNo')}:</div>
-                                        <div class="value">{((element?.properties as IKgCanvasElementProperties)?.data as MapStationVO)?.stationNo ?? ''}</div>
-                                    </div>
-                                    <div class="item">
-                                        <div class="label">{kg.t('KgCircleVisCanvas.conveyorNo')}:</div>
-                                        <div class="value">{((element?.properties as IKgCanvasElementProperties)?.data as MapStationVO)?.conveyorNo ?? ''}</div>
-                                    </div>
-                                    <div class="item">
-                                        <div class="label">{kg.t('KgCircleVisCanvas.conveyorName')}:</div>
-                                        <div class="value">{((element?.properties as IKgCanvasElementProperties)?.data as MapStationVO)?.name ?? ''}</div>
-                                    </div>
-
-                                    {!!((element?.properties as IKgCanvasElementProperties)?.data as MapStationVO)?.occupiedFlag && (
-                                        <div class="item">
-                                            <div class="label">{kg.t('KgCircleVisCanvas.containerId')}:</div>
-                                            <div class="value">{((element?.properties as IKgCanvasElementProperties)?.data as MapStationVO)?.containerId ?? ''}</div>
-                                        </div>
-                                    )}
-                                </div>
-                            );
-                        }
-
-                        return null;
-                    },
-                }}
-            </KgCanvas>
-        );
-    },
-});

package/component/KgCircularShuttleMonitor/KgCircularShuttleMonitor.Legend.tsx

@@ -1,71 +0,0 @@
-import { defineComponent } from 'vue';
-import './KgCircularShuttleMonitor.css';
-import { useKg } from '../../config';
-import { useKgCircularShuttleMonitorStore } from './KgCircularShuttleMonitor.store';
-
-type AreaDTO = { id: string | null | undefined; value: string | null | undefined; text: string | null | undefined };
-
-/**
- * 环形穿梭车可视化:图例.
- */
-export const KgCircularShuttleMonitorLegend = defineComponent({
-    name: 'KgCircularShuttleMonitorLegend',
-    setup(props, { emit }) {
-        const kg = useKg();
-        const store = useKgCircularShuttleMonitorStore();
-
-        return () => (
-            <div class="kg-circular-shuttle-monitor--legend">
-                <div class="item">
-                    <div
-                        class="color"
-                        style={{ background: store.getProps?.rgvStatusColor?.idle ?? '#000000' }}
-                    ></div>
-                    <div class="text">{kg.t('KgCircleVisLegend.idle')}</div>
-                </div>
-                <div class="item">
-                    <div
-                        class="color"
-                        style={{ background: store.getProps?.rgvStatusColor?.get ?? '#2ecc27' }}
-                    ></div>
-                    <div class="text">{kg.t('KgCircleVisLegend.get')}</div>
-                </div>
-                <div class="item">
-                    <div
-                        class="color"
-                        style={{ background: store.getProps?.rgvStatusColor?.put ?? '#1890ff' }}
-                    ></div>
-                    <div class="text">{kg.t('KgCircleVisLegend.put')}</div>
-                </div>
-                <div class="item">
-                    <div
-                        class="color"
-                        style={{ background: store.getProps?.rgvStatusColor?.drive ?? '#ffd262' }}
-                    ></div>
-                    <div class="text">{kg.t('KgCircleVisLegend.drive')}</div>
-                </div>
-                <div class="item">
-                    <div
-                        class="color"
-                        style={{ background: store.getProps?.rgvStatusColor?.manual ?? '#765708' }}
-                    ></div>
-                    <div class="text">{kg.t('KgCircleVisLegend.manual')}</div>
-                </div>
-                <div class="item">
-                    <div
-                        class="color"
-                        style={{ background: store.getProps?.rgvStatusColor?.warn ?? '#ff3a3a' }}
-                    ></div>
-                    <div class="text">{kg.t('KgCircleVisLegend.warn')}</div>
-                </div>
-                <div class="item">
-                    <div
-                        class="color"
-                        style={{ background: store.getProps?.rgvStatusColor?.offline ?? '#7f7f7f' }}
-                    ></div>
-                    <div class="text">{kg.t('KgCircleVisLegend.offline')}</div>
-                </div>
-            </div>
-        );
-    },
-});