@kengic/vue 0.30.1-beta.82 → 0.30.1-beta.85

package/component/KgCircularShuttleMonitor/KgCircularShuttleMonitor.Canvas.tsx

@@ -0,0 +1,606 @@
+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

@@ -0,0 +1,71 @@
+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>
+        );
+    },
+});