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

package/component/KgCircularShuttleMonitor/KgCircularShuttleMonitor.Canvas.service.tsx

@@ -0,0 +1,3053 @@
+import { ____ERROR____, ____INFO_____ } from '@kengic/core.core';
+import { Q } from '@thymine/xunee';
+import { uniq } from 'lodash-es';
+import { ref, toRaw } from 'vue';
+import { useKgCircularShuttleMonitor } from './KgCircularShuttleMonitor.hooks';
+import { MapDTO, MapStationVO, StatusDTO, StatusRgvVO, StatusStationDTO } from './KgCircularShuttleMonitor.model';
+
+/** 节点类型. */
+export const NODE_KEY = {
+    /** 巷道. */
+    AISLE: 'AISLE-',
+    /** 巷道:巷道编号. */
+    AISLE__UI__TEXT: 'AISLE__UI__TEXT-',
+    /** 轨道. */
+    PATH: 'PATH-',
+    /** 小车. */
+    RGV: 'RGV-',
+    /** 小车:路线. */
+    RGV__PATH: 'RGV__PATH-',
+    /** 小车:路线:小车和路线的连线. */
+    RGV__PATH__LINE: 'RGV__PATH__LINE-',
+    /** 小车:路线:路线上的小车. */
+    RGV__PATH__RGV: 'RGV__PATH__RGV-',
+    /** 小车:托盘. */
+    RGV__UI__CONTAINER: 'RGV__UI__CONTAINER-',
+    /** 小车:选中. */
+    RGV__UI__SELECT: 'RGV__UI__SELECT-',
+    /** 小车:小车编号. */
+    RGV__UI__TEXT: 'RGV__UI__TEXT-',
+    /** 小车:小车编号背景. */
+    RGV__UI__TEXT_BACKGROUND: 'RGV__UI__TEXT_BACKGROUND-',
+    /** 站点. */
+    STATION: 'STATION-',
+    /** 站点:方向. */
+    STATION_UI_ARROW: 'STATION_UI_ARROW-',
+    /** 站点:有货. */
+    STATION_UI_CENTER_RECT: 'STATION_UI_CENTER_RECT-',
+    /** 站点:选中. */
+    STATION_UI_SELECT: 'STATION_UI_SELECT-',
+    /** 站点:线体编号. */
+    STATION_UI_TEXT: 'STATION_UI_TEXT-',
+};
+
+//region 方法: 绘制
+//----------------------------------------------------------------------------------------------------
+export type IUseDraw = {
+    /**
+     * 绘制图形.
+     */
+    draw(param?: IUseDrawDrawParam): void;
+
+    /**
+     * 选中小车或者选中站点发生变更.
+     */
+    onSelectChange(): void;
+};
+
+type IUseDrawDrawParam = {
+    /**
+     * 是否纵览比例.
+     *
+     * @default false
+     */
+    isZoomToOverview?: boolean;
+
+    /**
+     * <p>绘制类型.</p>
+     * <ul>
+     *     <li>MAP: 绘制轨道和站点</li>
+     *     <li>STATUS: 绘制小车</li>
+     * </ul>
+     */
+    type: 'MAP' | 'STATUS';
+};
+
+export function useDraw(): IUseDraw {
+    const kgCircularShuttleMonitor = useKgCircularShuttleMonitor();
+
+    //region DATA
+    //----------------------------------------------------------------------------------------------------
+    /** 线宽. */
+    const LINE_WIDTH = Math.min(Math.max(kgCircularShuttleMonitor.store.getProps?.strokeLineWidth ?? 100, 1), 1000);
+
+    /** 轨道:周长. */
+    const PATH_LENGTH$ = ref(0);
+    /** 轨道:内矩形宽度. */
+    const PATH_WIDTH$ = ref(0);
+    /** 轨道:内矩形高度. */
+    const PATH_HEIGHT$ = ref(0);
+    /** 轨道:线的宽度. */
+    const PATH_LINE_WIDTH$ = ref(0);
+    /** 轨道:内轨道的圆半径. */
+    const PATH_INNER_RADIUS$ = ref(0);
+    /** 轨道:外轨道的圆半径. */
+    const PATH_OUTER_RADIUS$ = ref(0);
+    /** 轨道:轨道方向.0:顺时针,1:逆时针. */
+    const PATH_DIRECTION$ = ref(0);
+
+    /** 内轨道起点的刻度. */
+    const SRC_COORDINATE$ = ref(0);
+    /** 内轨道终点的刻度. */
+    const DST_COORDINATE$ = ref(0);
+
+    /** 内轨道的矩形的上左位置的刻度. */
+    const TOP_LEFT_COORDINATE$ = ref(0);
+    /** 内轨道的矩形的上中位置的刻度. */
+    const TOP_CENTER_COORDINATE$ = ref(0);
+    /** 内轨道的矩形的上右位置的刻度. */
+    const TOP_RIGHT_COORDINATE$ = ref(0);
+    /** 内轨道的矩形的下左位置的刻度. */
+    const BOTTOM_LEFT_COORDINATE$ = ref(0);
+    /** 内轨道的矩形的下中位置的刻度. */
+    const BOTTOM_CENTER_COORDINATE$ = ref(0);
+    /** 内轨道的矩形的下右位置的刻度. */
+    const BOTTOM_RIGHT_COORDINATE$ = ref(0);
+
+    /** 起点所在位置. */
+    const SRC_POSITION$ = ref<'TOP_LEFT' | 'TOP_RIGHT' | 'BOTTOM_LEFT' | 'BOTTOM_RIGHT' | 'LEFT' | 'RIGHT' | ''>('');
+
+    /** 当前站台:宽度. */
+    const CURRENT_STATION_WIDTH$ = ref(0);
+    /** 当前站台:高度. */
+    const CURRENT_STATION_HEIGHT$ = ref(0);
+    /** 当前站点在轨道的上边还是下边. */
+    const CURRENT_STATION_POSITION$ = ref<'TOP' | 'BOTTOM' | ''>('');
+
+    /** 当前小车:宽度. */
+    const CURRENT_RGV_WIDTH$ = ref(0);
+    /** 当前小车:高度. */
+    const CURRENT_RGV_HEIGHT$ = ref(0);
+    /** 当前小车在轨道的上边还是下边还是左边还是右边. */
+    const CURRENT_RGV_POSITION$ = ref<'TOP' | 'BOTTOM' | 'LEFT' | 'RIGHT' | ''>('');
+
+    /**
+     * <p>是否正在绘制. 如果上次绘制尚未完成, 此时又发起了新的绘制请求, 则并不会执行新的绘制.</p>
+     */
+    let isDrawing = false;
+
+    /**
+     * 为了让选中效果更醒目, 对选中效果进行闪烁, 该变量表示闪烁状态.
+     */
+    let isSelectBlinkOn: boolean = true;
+
+    /**
+     * 小车路线虚线偏移.
+     */
+    let selectBlinkDashOffset: number = 0;
+
+    /**
+     * 选中效果闪烁计时器.
+     */
+    let selectBlinkTimer: number = -1;
+    //----------------------------------------------------------------------------------------------------
+    //endregion
+
+    //region WATCH
+    //----------------------------------------------------------------------------------------------------
+    //----------------------------------------------------------------------------------------------------
+    //endregion
+
+    //region FUNCTION
+    //----------------------------------------------------------------------------------------------------
+    /**
+     * 绘制轨道.
+     */
+    function drawPath(canvasMapData: MapDTO | null) {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return;
+        }
+
+        if (!canvasMapData) {
+            return;
+        }
+
+        SRC_COORDINATE$.value = canvasMapData.map?.sourceCoordinate ?? 0;
+        DST_COORDINATE$.value = canvasMapData.map?.destinationCoordinate ?? 0;
+
+        PATH_LENGTH$.value = Math.abs((DST_COORDINATE$.value ?? 0) - (SRC_COORDINATE$.value ?? 0));
+        PATH_WIDTH$.value = canvasMapData.map?.length ?? 0;
+        PATH_HEIGHT$.value = canvasMapData.map?.width ?? 0;
+        PATH_LINE_WIDTH$.value = canvasMapData.map?.lineWidth ?? 0;
+
+        PATH_INNER_RADIUS$.value = PATH_HEIGHT$.value / 2 - LINE_WIDTH / 2;
+        PATH_OUTER_RADIUS$.value = PATH_INNER_RADIUS$.value + PATH_LINE_WIDTH$.value + LINE_WIDTH;
+
+        PATH_DIRECTION$.value = canvasMapData.map?.direction ?? 0;
+
+        BOTTOM_CENTER_COORDINATE$.value = canvasMapData.map?.offset ?? 0;
+        TOP_CENTER_COORDINATE$.value = BOTTOM_CENTER_COORDINATE$.value - PATH_LENGTH$.value / 2;
+        if (TOP_CENTER_COORDINATE$.value < SRC_COORDINATE$.value) {
+            TOP_CENTER_COORDINATE$.value = BOTTOM_CENTER_COORDINATE$.value + PATH_LENGTH$.value / 2;
+        }
+
+        // 顺时针,
+        if (canvasMapData.map?.direction === 0) {
+            BOTTOM_LEFT_COORDINATE$.value = BOTTOM_CENTER_COORDINATE$.value + PATH_WIDTH$.value / 2;
+
+            // 起下左和下中之间,
+            if (BOTTOM_LEFT_COORDINATE$.value > DST_COORDINATE$.value) {
+                BOTTOM_LEFT_COORDINATE$.value = PATH_WIDTH$.value / 2 - (DST_COORDINATE$.value - BOTTOM_CENTER_COORDINATE$.value) + SRC_COORDINATE$.value;
+                SRC_POSITION$.value = 'BOTTOM_LEFT';
+            }
+
+            BOTTOM_RIGHT_COORDINATE$.value = BOTTOM_CENTER_COORDINATE$.value - PATH_WIDTH$.value / 2;
+
+            // 起下右和下中之间,
+            if (BOTTOM_RIGHT_COORDINATE$.value < SRC_COORDINATE$.value) {
+                BOTTOM_RIGHT_COORDINATE$.value = DST_COORDINATE$.value - PATH_WIDTH$.value / 2 + (BOTTOM_CENTER_COORDINATE$.value - SRC_COORDINATE$.value);
+                SRC_POSITION$.value = 'BOTTOM_RIGHT';
+            }
+
+            TOP_RIGHT_COORDINATE$.value = TOP_CENTER_COORDINATE$.value + PATH_WIDTH$.value / 2;
+
+            // 起上右和上中之间,
+            if (TOP_RIGHT_COORDINATE$.value > DST_COORDINATE$.value) {
+                TOP_RIGHT_COORDINATE$.value = PATH_WIDTH$.value / 2 - (DST_COORDINATE$.value - TOP_CENTER_COORDINATE$.value) + SRC_COORDINATE$.value;
+                SRC_POSITION$.value = 'TOP_RIGHT';
+            }
+
+            TOP_LEFT_COORDINATE$.value = TOP_CENTER_COORDINATE$.value - PATH_WIDTH$.value / 2;
+
+            // 起上左和上中之间,
+            if (TOP_LEFT_COORDINATE$.value < SRC_COORDINATE$.value) {
+                TOP_LEFT_COORDINATE$.value = DST_COORDINATE$.value - PATH_WIDTH$.value / 2 + (TOP_CENTER_COORDINATE$.value - SRC_COORDINATE$.value);
+                SRC_POSITION$.value = 'TOP_LEFT';
+            }
+
+            if (SRC_POSITION$.value !== 'BOTTOM_LEFT' && SRC_POSITION$.value !== 'BOTTOM_RIGHT' && SRC_POSITION$.value !== 'TOP_LEFT' && SRC_POSITION$.value !== 'TOP_RIGHT') {
+                if (BOTTOM_CENTER_COORDINATE$.value > PATH_LENGTH$.value / 2) {
+                    SRC_POSITION$.value = 'LEFT';
+                } else {
+                    SRC_POSITION$.value = 'RIGHT';
+                }
+            }
+        }
+        // 逆时针,
+        else {
+            BOTTOM_RIGHT_COORDINATE$.value = BOTTOM_CENTER_COORDINATE$.value + PATH_WIDTH$.value / 2;
+
+            // 起下右和下中之间,
+            if (BOTTOM_RIGHT_COORDINATE$.value > DST_COORDINATE$.value) {
+                BOTTOM_RIGHT_COORDINATE$.value = PATH_WIDTH$.value / 2 - (DST_COORDINATE$.value - BOTTOM_CENTER_COORDINATE$.value) + SRC_COORDINATE$.value;
+                SRC_POSITION$.value = 'BOTTOM_RIGHT';
+            }
+
+            BOTTOM_LEFT_COORDINATE$.value = BOTTOM_CENTER_COORDINATE$.value - PATH_WIDTH$.value / 2;
+
+            // 起下左和下中之间,
+            if (BOTTOM_LEFT_COORDINATE$.value < SRC_COORDINATE$.value) {
+                BOTTOM_LEFT_COORDINATE$.value = DST_COORDINATE$.value - PATH_WIDTH$.value / 2 + (BOTTOM_CENTER_COORDINATE$.value - SRC_COORDINATE$.value);
+                SRC_POSITION$.value = 'BOTTOM_LEFT';
+            }
+
+            TOP_LEFT_COORDINATE$.value = TOP_CENTER_COORDINATE$.value + PATH_WIDTH$.value / 2;
+
+            // 起上左和上中之间,
+            if (TOP_LEFT_COORDINATE$.value > DST_COORDINATE$.value) {
+                TOP_LEFT_COORDINATE$.value = PATH_WIDTH$.value / 2 - (DST_COORDINATE$.value - TOP_CENTER_COORDINATE$.value) + SRC_COORDINATE$.value;
+                SRC_POSITION$.value = 'TOP_LEFT';
+            }
+
+            TOP_RIGHT_COORDINATE$.value = TOP_CENTER_COORDINATE$.value - PATH_WIDTH$.value / 2;
+
+            // 起上右和上中之间,
+            if (TOP_RIGHT_COORDINATE$.value < SRC_COORDINATE$.value) {
+                TOP_RIGHT_COORDINATE$.value = DST_COORDINATE$.value - PATH_WIDTH$.value / 2 + (TOP_CENTER_COORDINATE$.value - SRC_COORDINATE$.value);
+                SRC_POSITION$.value = 'TOP_RIGHT';
+            }
+
+            if (SRC_POSITION$.value !== 'BOTTOM_LEFT' && SRC_POSITION$.value !== 'BOTTOM_RIGHT' && SRC_POSITION$.value !== 'TOP_LEFT' && SRC_POSITION$.value !== 'TOP_RIGHT') {
+                if (BOTTOM_CENTER_COORDINATE$.value > PATH_LENGTH$.value / 2) {
+                    SRC_POSITION$.value = 'RIGHT';
+                } else {
+                    SRC_POSITION$.value = 'LEFT';
+                }
+            }
+        }
+
+        if (PATH_WIDTH$.value <= 0 || PATH_HEIGHT$.value <= 0 || PATH_LINE_WIDTH$.value <= 0) {
+            return;
+        }
+
+        console.log('--------------------------------------------------');
+        console.log('轨道方向:', canvasMapData.map?.direction === 0 ? '顺时针' : '逆时针');
+        console.log(
+            '起点位置:',
+            (() => {
+                switch (SRC_POSITION$.value) {
+                    case 'LEFT':
+                        return '左';
+                    case 'RIGHT':
+                        return '右';
+                    case 'TOP_LEFT':
+                        return '上左';
+                    case 'TOP_RIGHT':
+                        return '上右';
+                    case 'BOTTOM_LEFT':
+                        return '下左';
+                    case 'BOTTOM_RIGHT':
+                        return '下右';
+
+                    default:
+                        return '';
+                }
+            })(),
+        );
+        console.log('起点:', SRC_COORDINATE$.value);
+        console.log('终点:', DST_COORDINATE$.value);
+        console.log('中点:', canvasMapData.map?.offset);
+        console.log('上左:', TOP_LEFT_COORDINATE$.value);
+        console.log('上中:', TOP_CENTER_COORDINATE$.value);
+        console.log('上右:', TOP_RIGHT_COORDINATE$.value);
+        console.log('下右:', BOTTOM_RIGHT_COORDINATE$.value);
+        console.log('下中:', BOTTOM_CENTER_COORDINATE$.value);
+        console.log('下左:', BOTTOM_LEFT_COORDINATE$.value);
+        console.log('--------------------------------------------------');
+
+        const pathNode = kgCircularShuttleMonitor.store.getGraph!.createNode(null, 0, 0);
+        pathNode.size = new Q.Size(PATH_WIDTH$.value + (PATH_OUTER_RADIUS$.value + LINE_WIDTH / 2) * 2, PATH_HEIGHT$.value + (PATH_LINE_WIDTH$.value + LINE_WIDTH) * 2);
+        pathNode.image = drawPath_GetImage();
+        pathNode.zIndex = 1;
+        pathNode.movable = false;
+        pathNode.selectable = false;
+        pathNode.putStyles({
+            [Q.Styles.PADDING]: LINE_WIDTH * 2,
+            [Q.Styles.SHAPE_STROKE]: LINE_WIDTH,
+            [Q.Styles.SHAPE_STROKE_STYLE]: '#000000',
+        });
+        pathNode.properties = {
+            key: `${NODE_KEY.PATH}`,
+        };
+    }
+
+    /**
+     * 绘制轨道:获取节点图形.
+     */
+    function drawPath_GetImage(): any {
+        const x = 0;
+        const y = 0;
+
+        const path = new Q.Path();
+
+        // 内轨道画笔中心点的矩形宽度
+        const INNER_STROKE_WIDTH = PATH_WIDTH$.value;
+        // 内轨道画笔中心点的矩形高度
+        const INNER_STROKE_HEIGHT = PATH_INNER_RADIUS$.value * 2;
+
+        // 绘制内轨道,
+        path.moveTo(x - INNER_STROKE_WIDTH / 2, y - INNER_STROKE_HEIGHT / 2);
+        path.lineTo(x + INNER_STROKE_WIDTH / 2, y - INNER_STROKE_HEIGHT / 2);
+        path.arcTo(x + INNER_STROKE_WIDTH / 2 + INNER_STROKE_HEIGHT / 2, y - INNER_STROKE_HEIGHT / 2, x + INNER_STROKE_WIDTH / 2 + INNER_STROKE_HEIGHT / 2, y, INNER_STROKE_HEIGHT / 2);
+        path.arcTo(x + INNER_STROKE_WIDTH / 2 + INNER_STROKE_HEIGHT / 2, y + INNER_STROKE_HEIGHT / 2, x + INNER_STROKE_WIDTH / 2, y + INNER_STROKE_HEIGHT / 2, INNER_STROKE_HEIGHT / 2);
+        path.lineTo(x - INNER_STROKE_WIDTH / 2, y + INNER_STROKE_HEIGHT / 2);
+        path.arcTo(x - INNER_STROKE_WIDTH / 2 - INNER_STROKE_HEIGHT / 2, y + INNER_STROKE_HEIGHT / 2, x - INNER_STROKE_WIDTH / 2 - INNER_STROKE_HEIGHT / 2, y, INNER_STROKE_HEIGHT / 2);
+        path.arcTo(x - INNER_STROKE_WIDTH / 2 - INNER_STROKE_HEIGHT / 2, y - INNER_STROKE_HEIGHT / 2, x - INNER_STROKE_WIDTH / 2, y - INNER_STROKE_HEIGHT / 2, INNER_STROKE_HEIGHT / 2);
+
+        // 外轨道画笔中心点的矩形宽度
+        const OUTER_STROKE_WIDTH = PATH_WIDTH$.value;
+        // 外轨道画笔中心点的矩形高度
+        const OUTER_STROKE_HEIGHT = PATH_OUTER_RADIUS$.value * 2;
+
+        // 绘制外轨道,
+        path.moveTo(x - OUTER_STROKE_WIDTH / 2, y - OUTER_STROKE_HEIGHT / 2);
+        path.lineTo(x + OUTER_STROKE_WIDTH / 2, y - OUTER_STROKE_HEIGHT / 2);
+        path.arcTo(x + OUTER_STROKE_WIDTH / 2 + OUTER_STROKE_HEIGHT / 2, y - OUTER_STROKE_HEIGHT / 2, x + OUTER_STROKE_WIDTH / 2 + OUTER_STROKE_HEIGHT / 2, y, OUTER_STROKE_HEIGHT / 2);
+        path.arcTo(x + OUTER_STROKE_WIDTH / 2 + OUTER_STROKE_HEIGHT / 2, y + OUTER_STROKE_HEIGHT / 2, x + OUTER_STROKE_WIDTH / 2, y + OUTER_STROKE_HEIGHT / 2, OUTER_STROKE_HEIGHT / 2);
+        path.lineTo(x - OUTER_STROKE_WIDTH / 2, y + OUTER_STROKE_HEIGHT / 2);
+        path.arcTo(x - OUTER_STROKE_WIDTH / 2 - OUTER_STROKE_HEIGHT / 2, y + OUTER_STROKE_HEIGHT / 2, x - OUTER_STROKE_WIDTH / 2 - OUTER_STROKE_HEIGHT / 2, y, OUTER_STROKE_HEIGHT / 2);
+        path.arcTo(x - OUTER_STROKE_WIDTH / 2 - OUTER_STROKE_HEIGHT / 2, y - OUTER_STROKE_HEIGHT / 2, x - OUTER_STROKE_WIDTH / 2, y - OUTER_STROKE_HEIGHT / 2, OUTER_STROKE_HEIGHT / 2);
+
+        return path;
+    }
+
+    /**
+     * 更新站点列表.
+     */
+    function updateStationList(canvasStatusData: StatusDTO | null) {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return;
+        }
+
+        if (!canvasStatusData) {
+            return;
+        }
+
+        // 地图尚未绘制完成, 不能绘制小车,
+        if (PATH_LENGTH$.value <= 0 || PATH_WIDTH$.value <= 0 || PATH_HEIGHT$.value <= 0 || PATH_LINE_WIDTH$.value <= 0) {
+            return;
+        }
+
+        canvasStatusData.conveyorState.forEach((data, index) => {
+            updateStation(index, data, canvasStatusData);
+        });
+    }
+
+    /**
+     * 更新站点.
+     *
+     * @param index 索引
+     * @param station 站点.
+     * @param canvasStatusData 状态数据.
+     */
+    function updateStation(index: number, station: StatusStationDTO, canvasStatusData: StatusDTO | null) {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return;
+        }
+
+        const stationNode = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.find((i) => i.properties.key?.startsWith(NODE_KEY.STATION) && i.properties.data?.conveyorNo === station.conveyorNo) as Q.Node;
+        if (stationNode) {
+            (stationNode.properties.data as MapStationVO).containerId = station.containerId;
+            (stationNode.properties.data as MapStationVO).occupiedFlag = station.occupiedFlag;
+
+            // 站台有货,
+            if (station.occupiedFlag === 1) {
+                stationNode.putStyles({
+                    [Q.Styles.SHAPE_STROKE_STYLE]: '#1890ff',
+                });
+                getNodeUiByKey<Q.ImageUI>(stationNode, NODE_KEY.STATION_UI_CENTER_RECT).ui.fillColor = '#1890ff';
+                getNodeUiByKey<Q.ImageUI>(stationNode, NODE_KEY.STATION_UI_ARROW).ui.strokeStyle = '#ffffff';
+                getNodeUiByKey<Q.LabelUI>(stationNode, NODE_KEY.STATION_UI_TEXT).ui.color = '#ffffff';
+            }
+            // 站台无货,
+            else {
+                stationNode.putStyles({
+                    [Q.Styles.SHAPE_STROKE_STYLE]: '#000000',
+                });
+                getNodeUiByKey<Q.ImageUI>(stationNode, NODE_KEY.STATION_UI_CENTER_RECT).ui.fillColor = '#ffffff';
+                getNodeUiByKey<Q.ImageUI>(stationNode, NODE_KEY.STATION_UI_ARROW).ui.strokeStyle = '#000000';
+                getNodeUiByKey<Q.LabelUI>(stationNode, NODE_KEY.STATION_UI_TEXT).ui.color = '#000000';
+            }
+        } else {
+            // N/A
+        }
+    }
+
+    /**
+     * 绘制站点列表.
+     */
+    function drawStationList(canvasMapData: MapDTO | null) {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return;
+        }
+
+        if (!canvasMapData) {
+            return;
+        }
+
+        canvasMapData.conveyor.forEach((data, index) => {
+            drawStation(index, data, canvasMapData);
+        });
+    }
+
+    /**
+     * 绘制巷道列表.
+     */
+    function drawAisleList() {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return;
+        }
+
+        // 移除巷道节点,
+        const deleteAisleNodeList = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.filter((i) => i.properties?.key?.startsWith(NODE_KEY.AISLE)) ?? [];
+        for (let deleteAisleNode of deleteAisleNodeList) {
+            kgCircularShuttleMonitor.store.getGraph!.removeElement(deleteAisleNode);
+        }
+
+        // 隐藏巷道,
+        if (!kgCircularShuttleMonitor.store.$Canvas$Setting$getIsAisleVisible) {
+            return;
+        }
+
+        // 站点节点列表,
+        const stationNodeList = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.filter((i) => i.properties?.key?.startsWith(NODE_KEY.STATION)) ?? [];
+
+        // 巷道数据,
+        const aisleMap: Record<
+            /**
+             * 巷道编号.
+             */
+            string,
+            Array<{
+                /**
+                 * 站点横坐标.
+                 */
+                x: number;
+
+                /**
+                 * 站点纵坐标.
+                 */
+                y: number;
+            }>
+        > = {};
+
+        for (let stationNode of stationNodeList) {
+            const aisle = String((stationNode.properties.data as MapStationVO)?.aisle);
+            if (aisle) {
+                if (!aisleMap[aisle]) {
+                    aisleMap[aisle] = [];
+                }
+
+                aisleMap[aisle].push({ x: stationNode.x, y: stationNode.y });
+            }
+        }
+
+        Object.keys(aisleMap).forEach((aisle) => {
+            const xyList = aisleMap[aisle];
+
+            const yList = uniq(xyList.map((i) => i.y));
+            if (yList.length > 1) {
+                ____ERROR____(`KgCircularShuttleMonitor | 绘制巷道 | 同个巷道的多个站点的纵坐标不同 | ${aisle}`);
+            } else {
+                const y = yList[0];
+
+                const xList = uniq(xyList.map((i) => i.x));
+
+                const fromX = Math.min(...xList);
+                const toX = Math.max(...xList);
+
+                drawAisle(aisle, fromX, toX, y);
+            }
+        });
+    }
+
+    /**
+     * 绘制巷道.
+     *
+     * @param aisle 巷道编号.
+     * @param fromX 起点横坐标.
+     * @param toX 终点横坐标.
+     * @param y 纵坐标.
+     */
+    function drawAisle(aisle: string, fromX: number, toX: number, y: number) {
+        const aisleNode = kgCircularShuttleMonitor.store.getGraph!.createShapeNode(undefined, undefined, 0, 0);
+        aisleNode.movable = false;
+        aisleNode.zIndex = 2;
+        aisleNode.selectable = false;
+        aisleNode.putStyles({
+            [Q.Styles.SHAPE_STROKE]: LINE_WIDTH,
+            [Q.Styles.SHAPE_STROKE_STYLE]: '#00000080',
+        });
+        aisleNode.properties = {
+            key: `${NODE_KEY.AISLE}${aisle}`,
+        };
+
+        // 巷道矩形高度,
+        const HEIGHT = LINE_WIDTH * 10;
+
+        // 巷道在上,
+        if (y < 0) {
+            const _y = y - CURRENT_STATION_HEIGHT$.value / 2 - LINE_WIDTH * 2.5;
+
+            aisleNode.moveTo(fromX - CURRENT_STATION_WIDTH$.value / 2 + LINE_WIDTH / 2, _y - HEIGHT);
+            aisleNode.lineTo(fromX - CURRENT_STATION_WIDTH$.value / 2 + LINE_WIDTH / 2, _y);
+            aisleNode.lineTo(toX + CURRENT_STATION_WIDTH$.value / 2 - LINE_WIDTH / 2, _y);
+            aisleNode.lineTo(toX + CURRENT_STATION_WIDTH$.value / 2 - LINE_WIDTH / 2, _y - HEIGHT);
+        }
+        // 巷道在下,
+        else {
+            const _y = y + CURRENT_STATION_HEIGHT$.value / 2 + LINE_WIDTH * 2.5;
+
+            aisleNode.moveTo(fromX - CURRENT_STATION_WIDTH$.value / 2 + LINE_WIDTH / 2, _y + HEIGHT);
+            aisleNode.lineTo(fromX - CURRENT_STATION_WIDTH$.value / 2 + LINE_WIDTH / 2, _y);
+            aisleNode.lineTo(toX + CURRENT_STATION_WIDTH$.value / 2 - LINE_WIDTH / 2, _y);
+            aisleNode.lineTo(toX + CURRENT_STATION_WIDTH$.value / 2 - LINE_WIDTH / 2, _y + HEIGHT);
+        }
+
+        drawAisle_DrawTextUI(aisle, y, aisleNode);
+    }
+
+    /**
+     * 绘制巷道:绘制巷道编号.
+     *
+     * @param aisle 巷道编号.
+     * @param aisleNode 巷道节点.
+     * @param y 纵坐标.
+     */
+    function drawAisle_DrawTextUI(aisle: string, y: number, aisleNode: Q.Node): void {
+        const labelUI = new Q.LabelUI(aisle);
+
+        labelUI.code = NODE_KEY.AISLE__UI__TEXT;
+        labelUI.fontSize = LINE_WIDTH * 7;
+        labelUI.position = Q.Position.CENTER_TOP;
+        labelUI.anchorPosition = Q.Position.CENTER_TOP;
+        labelUI.alignPosition = Q.Position.CENTER_BOTTOM;
+        labelUI.borderRadius = 0;
+        labelUI.showPointer = false;
+        labelUI.color = '#00000080';
+        labelUI.syncSelection = false;
+
+        // 巷道在上,
+        if (y < 0) {
+            labelUI.position = Q.Position.CENTER_BOTTOM;
+            labelUI.anchorPosition = Q.Position.CENTER_BOTTOM;
+            labelUI.alignPosition = Q.Position.CENTER_BOTTOM;
+
+            labelUI.offsetY = -LINE_WIDTH;
+        }
+        // 巷道在下,
+        else {
+            labelUI.position = Q.Position.CENTER_TOP;
+            labelUI.anchorPosition = Q.Position.CENTER_TOP;
+
+            labelUI.offsetY = LINE_WIDTH * 2;
+        }
+
+        aisleNode.addUI(labelUI);
+    }
+
+    /**
+     * 绘制站点.
+     */
+    function drawStation(index: number, station: MapStationVO, canvasMapData: MapDTO | null) {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return;
+        }
+
+        CURRENT_STATION_WIDTH$.value = station.width ?? 0;
+        CURRENT_STATION_HEIGHT$.value = station.length ?? 0;
+
+        if (CURRENT_STATION_WIDTH$.value <= 0 || CURRENT_STATION_HEIGHT$.value <= 0) {
+            return;
+        }
+
+        // 站点距离轨道的间隔距离,
+        const STATION_MARGIN: number = LINE_WIDTH * 2;
+
+        /**
+         * 当前站点在轨道的上边还是下边.
+         */
+        CURRENT_STATION_POSITION$.value = (() => {
+            // 顺时针,
+            if (canvasMapData?.map?.direction === 0) {
+                // 起点在下,
+                if (SRC_POSITION$.value === 'BOTTOM_LEFT' || SRC_POSITION$.value === 'BOTTOM_RIGHT' || BOTTOM_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || BOTTOM_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                    if (station.coordinate <= BOTTOM_LEFT_COORDINATE$.value! || station.coordinate >= BOTTOM_RIGHT_COORDINATE$.value!) {
+                        return 'BOTTOM';
+                    } else if (station.coordinate >= TOP_LEFT_COORDINATE$.value && station.coordinate <= TOP_RIGHT_COORDINATE$.value) {
+                        return 'TOP';
+                    } else {
+                        return '';
+                    }
+                }
+                // 起点在上,
+                else if (SRC_POSITION$.value === 'TOP_LEFT' || SRC_POSITION$.value === 'TOP_RIGHT' || TOP_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || TOP_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                    if (station.coordinate <= TOP_RIGHT_COORDINATE$.value! || station.coordinate >= TOP_LEFT_COORDINATE$.value!) {
+                        return 'TOP';
+                    } else if (station.coordinate >= BOTTOM_RIGHT_COORDINATE$.value && station.coordinate <= BOTTOM_LEFT_COORDINATE$.value) {
+                        return 'BOTTOM';
+                    } else {
+                        return '';
+                    }
+                }
+                // 起左/起右,
+                else {
+                    if (station.coordinate >= BOTTOM_RIGHT_COORDINATE$.value! && station.coordinate <= BOTTOM_LEFT_COORDINATE$.value!) {
+                        return 'BOTTOM';
+                    } else if (station.coordinate >= TOP_LEFT_COORDINATE$.value! && station.coordinate <= TOP_RIGHT_COORDINATE$.value!) {
+                        return 'TOP';
+                    } else {
+                        return '';
+                    }
+                }
+            }
+            // 逆时针,
+            else {
+                // 起点在下,
+                if (SRC_POSITION$.value === 'BOTTOM_LEFT' || SRC_POSITION$.value === 'BOTTOM_RIGHT' || BOTTOM_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || BOTTOM_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                    if (station.coordinate <= BOTTOM_RIGHT_COORDINATE$.value! || station.coordinate >= BOTTOM_LEFT_COORDINATE$.value!) {
+                        return 'BOTTOM';
+                    } else if (station.coordinate >= TOP_RIGHT_COORDINATE$.value && station.coordinate <= TOP_LEFT_COORDINATE$.value) {
+                        return 'TOP';
+                    } else {
+                        return '';
+                    }
+                }
+                // 起点在上,
+                else if (SRC_POSITION$.value === 'TOP_LEFT' || SRC_POSITION$.value === 'TOP_RIGHT' || TOP_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || TOP_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                    if (station.coordinate <= TOP_LEFT_COORDINATE$.value! || station.coordinate >= TOP_RIGHT_COORDINATE$.value!) {
+                        return 'TOP';
+                    } else if (station.coordinate >= BOTTOM_LEFT_COORDINATE$.value && station.coordinate <= BOTTOM_RIGHT_COORDINATE$.value) {
+                        return 'BOTTOM';
+                    } else {
+                        return '';
+                    }
+                }
+                // 起左/起右,
+                else {
+                    if (station.coordinate >= BOTTOM_LEFT_COORDINATE$.value! && station.coordinate <= BOTTOM_RIGHT_COORDINATE$.value!) {
+                        return 'BOTTOM';
+                    } else if (station.coordinate >= TOP_RIGHT_COORDINATE$.value! && station.coordinate <= TOP_LEFT_COORDINATE$.value!) {
+                        return 'TOP';
+                    } else {
+                        return '';
+                    }
+                }
+            }
+        })();
+
+        /**
+         * 横坐标.
+         */
+        let x: number = (() => {
+            // 顺时针,
+            if (canvasMapData?.map?.direction === 0) {
+                // 起点在下,
+                if (SRC_POSITION$.value === 'BOTTOM_LEFT' || SRC_POSITION$.value === 'BOTTOM_RIGHT' || BOTTOM_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || BOTTOM_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                    if (CURRENT_STATION_POSITION$.value === 'BOTTOM') {
+                        if (SRC_POSITION$.value === 'BOTTOM_LEFT') {
+                            if (station.coordinate >= SRC_COORDINATE$.value && station.coordinate <= BOTTOM_LEFT_COORDINATE$.value) {
+                                return -(station.coordinate - SRC_COORDINATE$.value + (DST_COORDINATE$.value - BOTTOM_CENTER_COORDINATE$.value));
+                            } else if (station.coordinate >= BOTTOM_CENTER_COORDINATE$.value && station.coordinate <= DST_COORDINATE$.value) {
+                                return -(station.coordinate - BOTTOM_CENTER_COORDINATE$.value);
+                            } else {
+                                return BOTTOM_CENTER_COORDINATE$.value - station.coordinate;
+                            }
+                        }
+
+                        if (SRC_POSITION$.value === 'BOTTOM_RIGHT') {
+                            if (station.coordinate >= BOTTOM_CENTER_COORDINATE$.value && station.coordinate <= BOTTOM_LEFT_COORDINATE$.value) {
+                                return -(station.coordinate - BOTTOM_CENTER_COORDINATE$.value);
+                            } else if (station.coordinate >= SRC_COORDINATE$.value && station.coordinate <= BOTTOM_CENTER_COORDINATE$.value) {
+                                return BOTTOM_CENTER_COORDINATE$.value - station.coordinate;
+                            } else {
+                                return BOTTOM_CENTER_COORDINATE$.value - SRC_COORDINATE$.value + DST_COORDINATE$.value - station.coordinate;
+                            }
+                        }
+
+                        if (BOTTOM_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || BOTTOM_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                            if (station.coordinate >= SRC_COORDINATE$.value) {
+                                return -(station.coordinate - SRC_COORDINATE$.value);
+                            } else {
+                                return DST_COORDINATE$.value - station.coordinate;
+                            }
+                        }
+
+                        return 0;
+                    } else if (CURRENT_STATION_POSITION$.value === 'TOP') {
+                        if (station.coordinate <= TOP_CENTER_COORDINATE$.value) {
+                            return -(TOP_CENTER_COORDINATE$.value - station.coordinate);
+                        } else {
+                            return station.coordinate - TOP_CENTER_COORDINATE$.value;
+                        }
+                    } else {
+                        return 0;
+                    }
+                }
+                // 起点在上,
+                else if (SRC_POSITION$.value === 'TOP_LEFT' || SRC_POSITION$.value === 'TOP_RIGHT' || TOP_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || TOP_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                    if (CURRENT_STATION_POSITION$.value === 'BOTTOM') {
+                        if (station.coordinate >= BOTTOM_CENTER_COORDINATE$.value) {
+                            return -(station.coordinate - BOTTOM_CENTER_COORDINATE$.value);
+                        } else {
+                            return BOTTOM_CENTER_COORDINATE$.value - station.coordinate;
+                        }
+                    } else if (CURRENT_STATION_POSITION$.value === 'TOP') {
+                        if (SRC_POSITION$.value === 'TOP_LEFT') {
+                            if (station.coordinate >= TOP_LEFT_COORDINATE$.value && station.coordinate <= DST_COORDINATE$.value) {
+                                return -(DST_COORDINATE$.value - station.coordinate + TOP_CENTER_COORDINATE$.value - SRC_COORDINATE$.value);
+                            } else if (station.coordinate >= SRC_COORDINATE$.value && station.coordinate <= TOP_CENTER_COORDINATE$.value) {
+                                return -(TOP_CENTER_COORDINATE$.value - station.coordinate);
+                            } else {
+                                return station.coordinate - TOP_CENTER_COORDINATE$.value;
+                            }
+                        }
+
+                        if (SRC_POSITION$.value === 'TOP_RIGHT') {
+                            if (station.coordinate >= TOP_LEFT_COORDINATE$.value && station.coordinate <= TOP_CENTER_COORDINATE$.value) {
+                                return -(TOP_CENTER_COORDINATE$.value - station.coordinate);
+                            } else if (station.coordinate >= TOP_CENTER_COORDINATE$.value && station.coordinate <= DST_COORDINATE$.value) {
+                                return station.coordinate - TOP_CENTER_COORDINATE$.value;
+                            } else {
+                                return DST_COORDINATE$.value - TOP_CENTER_COORDINATE$.value + station.coordinate - SRC_COORDINATE$.value;
+                            }
+                        }
+
+                        if (TOP_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || TOP_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                            if (station.coordinate >= SRC_COORDINATE$.value) {
+                                return station.coordinate - SRC_COORDINATE$.value;
+                            } else {
+                                return -(DST_COORDINATE$.value - station.coordinate);
+                            }
+                        }
+
+                        return 0;
+                    } else {
+                        return 0;
+                    }
+                }
+                // 起左/起右,
+                else {
+                    if (CURRENT_STATION_POSITION$.value === 'BOTTOM') {
+                        if (station.coordinate >= BOTTOM_CENTER_COORDINATE$.value) {
+                            return -(station.coordinate - BOTTOM_CENTER_COORDINATE$.value);
+                        } else {
+                            return BOTTOM_CENTER_COORDINATE$.value - station.coordinate;
+                        }
+                    } else if (CURRENT_STATION_POSITION$.value === 'TOP') {
+                        if (station.coordinate <= TOP_CENTER_COORDINATE$.value) {
+                            return -(TOP_CENTER_COORDINATE$.value - station.coordinate);
+                        } else {
+                            return station.coordinate - TOP_CENTER_COORDINATE$.value;
+                        }
+                    } else {
+                        return 0;
+                    }
+                }
+            }
+            // 逆时针,
+            else {
+                // 起点在下,
+                if (SRC_POSITION$.value === 'BOTTOM_LEFT' || SRC_POSITION$.value === 'BOTTOM_RIGHT' || BOTTOM_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || BOTTOM_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                    if (CURRENT_STATION_POSITION$.value === 'BOTTOM') {
+                        if (SRC_POSITION$.value === 'BOTTOM_LEFT') {
+                            if (station.coordinate >= BOTTOM_LEFT_COORDINATE$.value && station.coordinate <= DST_COORDINATE$.value) {
+                                return -(DST_COORDINATE$.value - station.coordinate + BOTTOM_CENTER_COORDINATE$.value - SRC_COORDINATE$.value);
+                            } else if (station.coordinate >= SRC_COORDINATE$.value && station.coordinate <= BOTTOM_CENTER_COORDINATE$.value) {
+                                return -(BOTTOM_CENTER_COORDINATE$.value - station.coordinate);
+                            } else {
+                                return station.coordinate - BOTTOM_CENTER_COORDINATE$.value;
+                            }
+                        }
+
+                        if (SRC_POSITION$.value === 'BOTTOM_RIGHT') {
+                            if (station.coordinate >= BOTTOM_LEFT_COORDINATE$.value && station.coordinate <= BOTTOM_CENTER_COORDINATE$.value) {
+                                return -(BOTTOM_CENTER_COORDINATE$.value - station.coordinate);
+                            } else if (station.coordinate >= BOTTOM_CENTER_COORDINATE$.value && station.coordinate <= DST_COORDINATE$.value) {
+                                return station.coordinate - BOTTOM_CENTER_COORDINATE$.value;
+                            } else {
+                                return DST_COORDINATE$.value - BOTTOM_CENTER_COORDINATE$.value + station.coordinate - SRC_COORDINATE$.value;
+                            }
+                        }
+
+                        if (BOTTOM_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || BOTTOM_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                            if (station.coordinate <= DST_COORDINATE$.value) {
+                                return -(SRC_COORDINATE$.value - station.coordinate);
+                            } else {
+                                return station.coordinate - SRC_COORDINATE$.value;
+                            }
+                        }
+
+                        return 0;
+                    } else if (CURRENT_STATION_POSITION$.value === 'TOP') {
+                        if (station.coordinate >= TOP_CENTER_COORDINATE$.value) {
+                            return -(station.coordinate - TOP_CENTER_COORDINATE$.value);
+                        } else {
+                            return TOP_CENTER_COORDINATE$.value - station.coordinate;
+                        }
+                    } else {
+                        return 0;
+                    }
+                }
+                // 起点在上,
+                else if (SRC_POSITION$.value === 'TOP_LEFT' || SRC_POSITION$.value === 'TOP_RIGHT' || TOP_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || TOP_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                    if (CURRENT_STATION_POSITION$.value === 'BOTTOM') {
+                        if (station.coordinate <= BOTTOM_CENTER_COORDINATE$.value) {
+                            return -(BOTTOM_CENTER_COORDINATE$.value - station.coordinate);
+                        } else {
+                            return station.coordinate - BOTTOM_CENTER_COORDINATE$.value;
+                        }
+                    } else if (CURRENT_STATION_POSITION$.value === 'TOP') {
+                        if (SRC_POSITION$.value === 'TOP_LEFT') {
+                            if (station.coordinate >= SRC_COORDINATE$.value && station.coordinate <= TOP_LEFT_COORDINATE$.value) {
+                                return -(station.coordinate - SRC_COORDINATE$.value + DST_COORDINATE$.value - TOP_CENTER_COORDINATE$.value);
+                            } else if (station.coordinate >= TOP_CENTER_COORDINATE$.value && station.coordinate <= DST_COORDINATE$.value) {
+                                return -(station.coordinate - TOP_CENTER_COORDINATE$.value);
+                            } else {
+                                return TOP_CENTER_COORDINATE$.value - station.coordinate;
+                            }
+                        }
+
+                        if (SRC_POSITION$.value === 'TOP_RIGHT') {
+                            if (station.coordinate >= TOP_CENTER_COORDINATE$.value && station.coordinate <= TOP_LEFT_COORDINATE$.value) {
+                                return -(station.coordinate - TOP_CENTER_COORDINATE$.value);
+                            } else if (station.coordinate >= SRC_COORDINATE$.value && station.coordinate <= TOP_CENTER_COORDINATE$.value) {
+                                return TOP_CENTER_COORDINATE$.value - station.coordinate;
+                            } else {
+                                return TOP_CENTER_COORDINATE$.value - SRC_COORDINATE$.value + DST_COORDINATE$.value - station.coordinate;
+                            }
+                        }
+
+                        if (TOP_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || TOP_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                            if (station.coordinate >= SRC_COORDINATE$.value) {
+                                return -(station.coordinate - SRC_COORDINATE$.value);
+                            } else {
+                                return DST_COORDINATE$.value - station.coordinate;
+                            }
+                        }
+
+                        return 0;
+                    } else {
+                        return 0;
+                    }
+                }
+                // 起左/起右,
+                else {
+                    if (CURRENT_STATION_POSITION$.value === 'BOTTOM') {
+                        if (station.coordinate >= BOTTOM_CENTER_COORDINATE$.value) {
+                            return station.coordinate - BOTTOM_CENTER_COORDINATE$.value;
+                        } else {
+                            return -(BOTTOM_CENTER_COORDINATE$.value - station.coordinate);
+                        }
+                    } else if (CURRENT_STATION_POSITION$.value === 'TOP') {
+                        if (station.coordinate <= TOP_CENTER_COORDINATE$.value) {
+                            return TOP_CENTER_COORDINATE$.value - station.coordinate;
+                        } else {
+                            return -(station.coordinate - TOP_CENTER_COORDINATE$.value);
+                        }
+                    } else {
+                        return 0;
+                    }
+                }
+            }
+        })();
+
+        /**
+         * 纵坐标.
+         */
+        let y: number = (() => {
+            if (CURRENT_STATION_POSITION$.value === 'BOTTOM') {
+                return PATH_OUTER_RADIUS$.value + LINE_WIDTH / 2 + CURRENT_STATION_HEIGHT$.value / 2 + STATION_MARGIN;
+            } else if (CURRENT_STATION_POSITION$.value === 'TOP') {
+                return -(PATH_OUTER_RADIUS$.value + LINE_WIDTH / 2 + CURRENT_STATION_HEIGHT$.value / 2 + STATION_MARGIN);
+            } else {
+                return 0;
+            }
+        })();
+
+        // 站点刻度有误, 站点不在上下轨道,
+        if (x === 0 || y === 0) {
+            ____INFO_____('站点在左右的轨道', { data: toRaw(station) });
+            return;
+        }
+
+        const stationNode = kgCircularShuttleMonitor.store.getGraph!.createNode(null, x, y);
+        stationNode.size = new Q.Size(CURRENT_STATION_WIDTH$.value, CURRENT_STATION_HEIGHT$.value);
+        stationNode.image = drawStation_GetImage(x, y, station);
+        stationNode.zIndex = 1;
+        stationNode.movable = false;
+        stationNode.selectable = false;
+        stationNode.putStyles({
+            [Q.Styles.SHAPE_FILL_COLOR]: '#ffffff',
+            [Q.Styles.SHAPE_STROKE]: LINE_WIDTH,
+            [Q.Styles.SHAPE_STROKE_STYLE]: '#000000',
+        });
+        stationNode.properties = {
+            data: station,
+            isEnableTooltip: true,
+            key: `${NODE_KEY.STATION}${station.conveyorNo}`,
+        };
+
+        const centerRectUI = drawStation_DrawCenterRectUI(x, y, station);
+        if (centerRectUI) {
+            stationNode.addUI(centerRectUI);
+        }
+
+        const arrowUI = drawStation_DrawArrowUI(x, y, station, canvasMapData);
+        if (arrowUI) {
+            stationNode.addUI(arrowUI);
+        }
+
+        const textUI = drawStation_DrawTextUI(x, y, station);
+        if (textUI) {
+            stationNode.addUI(textUI);
+        }
+
+        const selectUI = drawStation_DrawSelectUI(station);
+        if (selectUI) {
+            stationNode.addUI(selectUI);
+        }
+    }
+
+    /**
+     * 绘制站点:绘制中间矩形.
+     *
+     * @param x 站点节点的横坐标.
+     * @param y 站点节点的纵坐标.
+     * @param station 站点.
+     */
+    function drawStation_DrawCenterRectUI(x: number, y: number, station: MapStationVO): Q.ImageUI | null {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return null;
+        }
+
+        const WIDTH = CURRENT_STATION_WIDTH$.value - LINE_WIDTH * 2 - 40;
+        const HEIGHT = CURRENT_STATION_HEIGHT$.value - LINE_WIDTH * 2 - 40;
+
+        const path = new Q.Path();
+
+        path.moveTo(0, 0);
+        path.lineTo(WIDTH, 0);
+        path.lineTo(WIDTH, HEIGHT);
+        path.lineTo(0, HEIGHT);
+        path.closePath();
+
+        const imageUI = new Q.ImageUI(path);
+        imageUI.code = NODE_KEY.STATION_UI_CENTER_RECT;
+        imageUI.anchorPosition = Q.Position.CENTER_MIDDLE;
+        imageUI.position = Q.Position.CENTER_MIDDLE;
+        imageUI.fillColor = '#ffffff';
+        imageUI.syncSelection = false;
+
+        return imageUI;
+    }
+
+    /**
+     * 绘制站点:绘制选中时的遮盖效果.
+     *
+     * @param station 站点.
+     */
+    function drawStation_DrawSelectUI(station: MapStationVO): Q.ImageUI | null {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return null;
+        }
+
+        const WIDTH = station.width ?? 0;
+        const HEIGHT = station.length ?? 0;
+
+        const path = new Q.Path();
+
+        path.moveTo(0, 0);
+        path.lineTo(WIDTH, 0);
+        path.lineTo(WIDTH, HEIGHT);
+        path.lineTo(0, HEIGHT);
+        path.closePath();
+
+        const imageUI = new Q.ImageUI(path);
+        imageUI.code = NODE_KEY.STATION_UI_SELECT;
+        imageUI.anchorPosition = Q.Position.CENTER_MIDDLE;
+        imageUI.position = Q.Position.CENTER_MIDDLE;
+        imageUI.syncSelection = false;
+        imageUI.fillColor = isSelectBlinkOn ? '#ffff0075' : '#ffffff00';
+        imageUI.borderColor = isSelectBlinkOn ? '#ffff00' : '#ffffff00';
+        imageUI.border = LINE_WIDTH;
+        imageUI.visible = !!kgCircularShuttleMonitor.store.$Canvas$getCurrentStationList.find((i) => i.conveyorNo === station.conveyorNo);
+
+        return imageUI;
+    }
+
+    /**
+     * 绘制站点:绘制箭头.
+     *
+     * @param x 站点节点的横坐标.
+     * @param y 站点节点的纵坐标.
+     * @param station 站点.
+     * @param canvasMapData 地图数据.
+     */
+    function drawStation_DrawArrowUI(x: number, y: number, station: MapStationVO, canvasMapData: MapDTO | null): Q.ImageUI | null {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return null;
+        }
+
+        // @ts-ignore
+        const imageUI = new Q.ImageUI();
+        imageUI.code = NODE_KEY.STATION_UI_ARROW;
+        imageUI.anchorPosition = Q.Position.CENTER_MIDDLE;
+        imageUI.position = Q.Position.CENTER_MIDDLE;
+        imageUI.lineWidth = LINE_WIDTH / 2;
+        imageUI.strokeStyle = '#000000';
+        imageUI.syncSelection = false;
+
+        // 箭头向上,
+        if ((station.direction === 0 && CURRENT_STATION_POSITION$.value === 'BOTTOM') || (station.direction === 1 && CURRENT_STATION_POSITION$.value === 'TOP')) {
+            const path = new Q.Path();
+
+            // 箭头,
+            path.moveTo(0, 0);
+            path.lineTo((CURRENT_STATION_WIDTH$.value / 10) * 2, (CURRENT_STATION_WIDTH$.value / 10) * 2);
+            path.lineTo(-(CURRENT_STATION_WIDTH$.value / 10) * 2, (CURRENT_STATION_WIDTH$.value / 10) * 2);
+            path.closePath();
+
+            // 尾巴,
+            path.moveTo(0, (CURRENT_STATION_WIDTH$.value / 10) * 2);
+            path.lineTo(0, (CURRENT_STATION_WIDTH$.value / 10) * 2 + LINE_WIDTH * 2);
+            path.lineTo(0, (CURRENT_STATION_WIDTH$.value / 10) * 2);
+            path.closePath();
+
+            imageUI.data = path;
+            imageUI.offsetY = -CURRENT_STATION_HEIGHT$.value / 2 + (CURRENT_STATION_WIDTH$.value / 10) * 2 + LINE_WIDTH * 2;
+        }
+        // 箭头向下,
+        else {
+            const path = new Q.Path();
+
+            // 箭头,
+            path.moveTo(0, 0);
+            path.lineTo(-(CURRENT_STATION_WIDTH$.value / 10) * 2, -(CURRENT_STATION_WIDTH$.value / 10) * 2);
+            path.lineTo((CURRENT_STATION_WIDTH$.value / 10) * 2, -(CURRENT_STATION_WIDTH$.value / 10) * 2);
+            path.closePath();
+
+            // 尾巴,
+            path.moveTo(0, -(CURRENT_STATION_WIDTH$.value / 10) * 2);
+            path.lineTo(0, -(CURRENT_STATION_WIDTH$.value / 10) * 2 - LINE_WIDTH * 2);
+            path.lineTo(0, -(CURRENT_STATION_WIDTH$.value / 10) * 2);
+            path.closePath();
+
+            imageUI.data = path;
+            imageUI.offsetY = -(-CURRENT_STATION_HEIGHT$.value / 2 + (CURRENT_STATION_WIDTH$.value / 10) * 2 + LINE_WIDTH * 2);
+        }
+
+        return imageUI;
+    }
+
+    /**
+     * 绘制站点:绘制站点编号.
+     *
+     * @param x 站点节点的横坐标.
+     * @param y 站点节点的纵坐标.
+     * @param station 站点.
+     */
+    function drawStation_DrawTextUI(x: number, y: number, station: MapStationVO): Q.LabelUI | null {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return null;
+        }
+
+        const labelUI = new Q.LabelUI(station.conveyorNo);
+        labelUI.code = NODE_KEY.STATION_UI_TEXT;
+        labelUI.fontSize = CURRENT_STATION_WIDTH$.value / 4.5;
+        labelUI.fontStyle = 'bold';
+        labelUI.alignPosition = Q.Position.CENTER_MIDDLE;
+        labelUI.borderRadius = 1;
+        labelUI.showPointer = false;
+        labelUI.color = '#000000';
+        labelUI.offsetX = 0;
+
+        labelUI.syncSelection = false;
+
+        // 箭头向上,
+        if ((station.direction === 0 && CURRENT_STATION_POSITION$.value === 'BOTTOM') || (station.direction === 1 && CURRENT_STATION_POSITION$.value === 'TOP')) {
+            labelUI.position = Q.Position.CENTER_BOTTOM;
+            labelUI.anchorPosition = Q.Position.CENTER_BOTTOM;
+            labelUI.offsetY = -(CURRENT_STATION_WIDTH$.value / 10) + LINE_WIDTH / 2;
+        }
+        // 箭头向下,
+        else {
+            labelUI.position = Q.Position.CENTER_TOP;
+            labelUI.anchorPosition = Q.Position.CENTER_TOP;
+            labelUI.offsetY = CURRENT_STATION_WIDTH$.value / 10 + LINE_WIDTH / 2;
+        }
+
+        return labelUI;
+    }
+
+    /**
+     * 绘制站点:获取节点图形.
+     *
+     * @param x 横坐标.
+     * @param y 纵坐标.
+     * @param station 站点.
+     */
+    function drawStation_GetImage(x: number, y: number, station: MapStationVO): any {
+        const path = new Q.Path();
+
+        // 外矩形,
+        path.moveTo(0 + LINE_WIDTH / 2, 0 + LINE_WIDTH / 2);
+        path.lineTo(CURRENT_STATION_WIDTH$.value - LINE_WIDTH / 2, 0 + LINE_WIDTH / 2);
+        path.lineTo(CURRENT_STATION_WIDTH$.value - LINE_WIDTH / 2, CURRENT_STATION_HEIGHT$.value - LINE_WIDTH / 2);
+        path.lineTo(0 + LINE_WIDTH / 2, CURRENT_STATION_HEIGHT$.value - LINE_WIDTH / 2);
+        path.lineTo(0 + LINE_WIDTH / 2, 0 + LINE_WIDTH / 2);
+        path.closePath();
+
+        return path;
+    }
+
+    /**
+     * 绘制小车列表.
+     */
+    function drawRgvList(canvasStatusData: StatusDTO | null) {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return;
+        }
+
+        if (!canvasStatusData) {
+            return;
+        }
+
+        // 地图尚未绘制完成, 不能绘制小车,
+        if (PATH_LENGTH$.value <= 0 || PATH_WIDTH$.value <= 0 || PATH_HEIGHT$.value <= 0 || PATH_LINE_WIDTH$.value <= 0) {
+            return;
+        }
+
+        // 移除不存在的小车节点,
+        const deleteRgvNodeList = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.filter((i) => i.properties?.key?.startsWith(NODE_KEY.RGV) && !canvasStatusData.rgvState?.find((j) => j.rgvNo === i.properties?.data?.rgvNo)) ?? [];
+        for (let node of deleteRgvNodeList) {
+            kgCircularShuttleMonitor.store.getGraph!.removeElement(node);
+        }
+
+        // 移除不存在的小车路线节点,
+        const deleteRgvPathNodeList =
+            kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.filter(
+                (i) =>
+                    (i.properties?.key?.startsWith(NODE_KEY.RGV__PATH) || i.properties?.key?.startsWith(NODE_KEY.RGV__PATH__LINE) || i.properties?.key?.startsWith(NODE_KEY.RGV__PATH__RGV)) &&
+                    !canvasStatusData.rgvState?.find((j) => j.rgvNo === i.properties?.data?.rgvNo),
+            ) ?? [];
+        for (let node of deleteRgvPathNodeList) {
+            kgCircularShuttleMonitor.store.getGraph!.removeElement(node);
+        }
+
+        // 移除离线小车节点,
+        for (let rgv of canvasStatusData.rgvState ?? []) {
+            if (rgv.state === 0) {
+                let node = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.find((i) => i.properties.key?.startsWith(NODE_KEY.RGV) && i.properties.data?.rgvNo === rgv.rgvNo) as Q.Node;
+                if (node) {
+                    kgCircularShuttleMonitor.store.getGraph!.removeElement(node);
+                }
+            }
+        }
+
+        (canvasStatusData.rgvState ?? [])
+            .filter((i) => i.state !== 0)
+            .forEach((rgv, index) => {
+                drawRgv(canvasStatusData, index, rgv);
+            });
+    }
+
+    /**
+     * 绘制小车.
+     *
+     * @param canvasStatusData 状态数据.
+     * @param index 序号.
+     * @param rgv 小车.
+     */
+    function drawRgv(canvasStatusData: StatusDTO, index: number, rgv: StatusRgvVO) {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return;
+        }
+
+        CURRENT_RGV_WIDTH$.value = rgv.length ?? 0;
+        CURRENT_RGV_HEIGHT$.value = rgv.width ?? 0;
+
+        if (CURRENT_RGV_WIDTH$.value <= 0 || CURRENT_RGV_HEIGHT$.value <= 0) {
+            return;
+        }
+
+        // 当前小车在轨道上的半径,
+        const rgvRadius = (() => {
+            // 显示小车路线,
+            if (kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvPathVisible) {
+                if (kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvOnPath) {
+                    return PATH_INNER_RADIUS$.value + LINE_WIDTH / 2 + kgCircularShuttleMonitor.store.$Canvas$Setting$getRgvMarginY * (index + 1 + 1) + (rgv.width / 2) * ((index + 1) * 2 + 1);
+                } else {
+                    return PATH_INNER_RADIUS$.value + LINE_WIDTH / 2 + kgCircularShuttleMonitor.store.$Canvas$Setting$getRgvMarginY * (0 + 1) + (rgv.width / 2) * (0 * 2 + 1);
+                }
+            }
+            // 隐藏小车路线,
+            else {
+                return PATH_INNER_RADIUS$.value + LINE_WIDTH / 2 + kgCircularShuttleMonitor.store.$Canvas$Setting$getRgvMarginY * (0 + 1) + (rgv.width / 2) * (0 * 2 + 1);
+            }
+        })();
+
+        // 当前小车路线在轨道上的半径,
+        const rgvPathRadius = (() => {
+            // 显示小车路线,
+            if (kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvPathVisible) {
+                return PATH_INNER_RADIUS$.value + LINE_WIDTH / 2 + kgCircularShuttleMonitor.store.$Canvas$Setting$getRgvMarginY * (index + 1 + 1) + (rgv.width / 2) * ((index + 1) * 2 + 1);
+            }
+            // 隐藏小车路线,
+            else {
+                return PATH_INNER_RADIUS$.value + LINE_WIDTH / 2 + kgCircularShuttleMonitor.store.$Canvas$Setting$getRgvMarginY * (0 + 1) + (rgv.width / 2) * (0 * 2 + 1);
+            }
+        })();
+
+        drawRgv_GetCurrentPosition(rgv);
+
+        const x = drawRgv_GetX(rgv.position, rgvRadius);
+        const y = drawRgv_GetY(rgv.position, rgvRadius);
+        const rotate = drawRgv_GetRotate(rgv.position);
+
+        let rgvNode = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.find((i) => i.properties.key?.startsWith(NODE_KEY.RGV) && i.properties.data?.rgvNo === rgv.rgvNo) as Q.Node;
+
+        // 小车节点已经存在, 直接更新状态,
+        if (rgvNode) {
+            rgvNode.x = x;
+            rgvNode.y = y;
+            rgvNode.rotate = rotate;
+            rgvNode.putStyles({
+                [Q.Styles.SHAPE_STROKE_STYLE]: drawRgv_GetColorByState(rgv.state),
+            });
+            rgvNode.properties.data = rgv;
+
+            getNodeUiByKey<Q.LabelUI>(rgvNode, NODE_KEY.RGV__UI__TEXT).ui.color = drawRgv_GetTextColorByState(rgv.state);
+            getNodeUiByKey<Q.ImageUI>(rgvNode, NODE_KEY.RGV__UI__CONTAINER).ui.fillColor = rgv.loadState === 1 ? drawRgv_GetColorByState(rgv.state) : '#ffffff';
+            getNodeUiByKey<Q.ImageUI>(rgvNode, NODE_KEY.RGV__UI__TEXT_BACKGROUND).ui.fillColor = drawRgv_GetColorByState(rgv.state);
+        }
+        // 小车节点尚不存在, 重新绘制,
+        else {
+            rgvNode = kgCircularShuttleMonitor.store.getGraph!.createNode(null, x, y);
+            rgvNode.size = new Q.Size(CURRENT_RGV_WIDTH$.value, CURRENT_RGV_HEIGHT$.value);
+            rgvNode.image = drawRgv_GetImage(x, y, rgv);
+            rgvNode.zIndex = 3;
+            rgvNode.movable = false;
+            rgvNode.selectable = false;
+            rgvNode.rotate = rotate;
+            rgvNode.putStyles({
+                [Q.Styles.SHAPE_FILL_COLOR]: '#ffffff',
+                [Q.Styles.SHAPE_STROKE]: LINE_WIDTH,
+                [Q.Styles.SHAPE_STROKE_STYLE]: drawRgv_GetColorByState(rgv.state),
+            });
+            rgvNode.properties = {
+                data: rgv,
+                isEnableTooltip: true,
+                key: `${NODE_KEY.RGV}${rgv.rgvNo}`,
+            };
+
+            drawRgv_DrawTextBackgroundUI(rgv, rgvNode);
+            drawRgv_DrawTextUI(rgv, rgvNode);
+            drawRgv_DrawContainerUI(rgv, rgvNode);
+            drawRgv_DrawSelectUI(rgv, rgvNode);
+        }
+
+        drawRgv_DrawPath(canvasStatusData, index, rgv, rgvNode, rgvPathRadius);
+        drawRgv_DrawPath_DrawLine(canvasStatusData, index, rgv, rgvNode, rgvPathRadius);
+        drawRgv_DrawPath_DrawRgv(canvasStatusData, index, rgv, rgvNode, rgvPathRadius);
+    }
+
+    /**
+     * <p>绘制小车:计算小车位置.</p>
+     * <p>当前小车在轨道的上边还是下边还是左边还是右边.</p>
+     */
+    function drawRgv_GetCurrentPosition(rgv: StatusRgvVO): void {
+        CURRENT_RGV_POSITION$.value = (() => {
+            // 顺时针,
+            if (PATH_DIRECTION$.value === 0) {
+                // 起点在下,
+                if (SRC_POSITION$.value === 'BOTTOM_LEFT' || SRC_POSITION$.value === 'BOTTOM_RIGHT' || BOTTOM_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || BOTTOM_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                    if (rgv.position <= BOTTOM_LEFT_COORDINATE$.value! || rgv.position >= BOTTOM_RIGHT_COORDINATE$.value!) {
+                        return 'BOTTOM';
+                    } else if (rgv.position >= TOP_LEFT_COORDINATE$.value && rgv.position <= TOP_RIGHT_COORDINATE$.value) {
+                        return 'TOP';
+                    } else if (rgv.position >= BOTTOM_LEFT_COORDINATE$.value && rgv.position <= TOP_LEFT_COORDINATE$.value) {
+                        return 'LEFT';
+                    } else {
+                        return 'RIGHT';
+                    }
+                }
+                // 起点在上,
+                else if (SRC_POSITION$.value === 'TOP_LEFT' || SRC_POSITION$.value === 'TOP_RIGHT' || TOP_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || TOP_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                    if (rgv.position <= TOP_RIGHT_COORDINATE$.value! || rgv.position >= TOP_LEFT_COORDINATE$.value!) {
+                        return 'TOP';
+                    } else if (rgv.position >= BOTTOM_RIGHT_COORDINATE$.value && rgv.position <= BOTTOM_LEFT_COORDINATE$.value) {
+                        return 'BOTTOM';
+                    } else if (rgv.position >= BOTTOM_LEFT_COORDINATE$.value && rgv.position <= TOP_LEFT_COORDINATE$.value) {
+                        return 'LEFT';
+                    } else {
+                        return 'RIGHT';
+                    }
+                }
+                // 起点在左,
+                else if (SRC_POSITION$.value === 'LEFT') {
+                    if (rgv.position >= TOP_LEFT_COORDINATE$.value! && rgv.position <= TOP_RIGHT_COORDINATE$.value!) {
+                        return 'TOP';
+                    } else if (rgv.position >= BOTTOM_RIGHT_COORDINATE$.value && rgv.position <= BOTTOM_LEFT_COORDINATE$.value) {
+                        return 'BOTTOM';
+                    } else if (rgv.position >= TOP_RIGHT_COORDINATE$.value && rgv.position <= BOTTOM_RIGHT_COORDINATE$.value) {
+                        return 'RIGHT';
+                    } else {
+                        return 'LEFT';
+                    }
+                }
+                // 起点在右,
+                else {
+                    if (rgv.position >= TOP_LEFT_COORDINATE$.value! && rgv.position <= TOP_RIGHT_COORDINATE$.value!) {
+                        return 'TOP';
+                    } else if (rgv.position >= BOTTOM_RIGHT_COORDINATE$.value && rgv.position <= BOTTOM_LEFT_COORDINATE$.value) {
+                        return 'BOTTOM';
+                    } else if (rgv.position >= BOTTOM_LEFT_COORDINATE$.value && rgv.position <= TOP_LEFT_COORDINATE$.value) {
+                        return 'LEFT';
+                    } else {
+                        return 'RIGHT';
+                    }
+                }
+            }
+            // 逆时针,
+            else {
+                // 起点在下,
+                if (SRC_POSITION$.value === 'BOTTOM_LEFT' || SRC_POSITION$.value === 'BOTTOM_RIGHT' || BOTTOM_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || BOTTOM_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                    if (rgv.position >= BOTTOM_RIGHT_COORDINATE$.value! && rgv.position <= TOP_RIGHT_COORDINATE$.value!) {
+                        return 'RIGHT';
+                    } else if (rgv.position >= TOP_RIGHT_COORDINATE$.value && rgv.position <= TOP_LEFT_COORDINATE$.value) {
+                        return 'TOP';
+                    } else if (rgv.position >= TOP_LEFT_COORDINATE$.value && rgv.position <= BOTTOM_LEFT_COORDINATE$.value) {
+                        return 'LEFT';
+                    } else {
+                        return 'BOTTOM';
+                    }
+                }
+                // 起点在上,
+                else if (SRC_POSITION$.value === 'TOP_LEFT' || SRC_POSITION$.value === 'TOP_RIGHT' || TOP_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || TOP_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                    if (rgv.position >= TOP_LEFT_COORDINATE$.value! && rgv.position <= BOTTOM_LEFT_COORDINATE$.value!) {
+                        return 'LEFT';
+                    } else if (rgv.position >= BOTTOM_LEFT_COORDINATE$.value && rgv.position <= BOTTOM_RIGHT_COORDINATE$.value) {
+                        return 'BOTTOM';
+                    } else if (rgv.position >= BOTTOM_RIGHT_COORDINATE$.value && rgv.position <= TOP_RIGHT_COORDINATE$.value) {
+                        return 'RIGHT';
+                    } else {
+                        return 'TOP';
+                    }
+                }
+                // 起点在左,
+                else if (SRC_POSITION$.value === 'LEFT') {
+                    if (rgv.position >= TOP_RIGHT_COORDINATE$.value! && rgv.position <= TOP_LEFT_COORDINATE$.value!) {
+                        return 'TOP';
+                    } else if (rgv.position >= BOTTOM_LEFT_COORDINATE$.value && rgv.position <= BOTTOM_RIGHT_COORDINATE$.value) {
+                        return 'BOTTOM';
+                    } else if (rgv.position >= BOTTOM_RIGHT_COORDINATE$.value && rgv.position <= TOP_RIGHT_COORDINATE$.value) {
+                        return 'RIGHT';
+                    } else {
+                        return 'LEFT';
+                    }
+                }
+                // 起点在右,
+                else {
+                    if (rgv.position >= TOP_RIGHT_COORDINATE$.value! && rgv.position <= TOP_LEFT_COORDINATE$.value!) {
+                        return 'TOP';
+                    } else if (rgv.position >= BOTTOM_LEFT_COORDINATE$.value && rgv.position <= BOTTOM_RIGHT_COORDINATE$.value) {
+                        return 'BOTTOM';
+                    } else if (rgv.position >= TOP_LEFT_COORDINATE$.value && rgv.position <= BOTTOM_LEFT_COORDINATE$.value) {
+                        return 'LEFT';
+                    } else {
+                        return 'RIGHT';
+                    }
+                }
+            }
+        })();
+    }
+
+    /**
+     * 绘制小车:计算横坐标.
+     *
+     * @param coordinate 刻度.
+     * @param radius 轨道半径.
+     */
+    function drawRgv_GetX(coordinate: number, radius: number): number {
+        // 顺时针,
+        if (PATH_DIRECTION$.value === 0) {
+            // 起点在下,
+            if (SRC_POSITION$.value === 'BOTTOM_LEFT' || SRC_POSITION$.value === 'BOTTOM_RIGHT' || BOTTOM_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || BOTTOM_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                // 小车在下,
+                if (CURRENT_RGV_POSITION$.value === 'BOTTOM') {
+                    if (SRC_POSITION$.value === 'BOTTOM_LEFT') {
+                        if (coordinate >= SRC_COORDINATE$.value && coordinate <= BOTTOM_LEFT_COORDINATE$.value) {
+                            return -(coordinate - SRC_COORDINATE$.value + (DST_COORDINATE$.value - BOTTOM_CENTER_COORDINATE$.value));
+                        } else if (coordinate >= BOTTOM_CENTER_COORDINATE$.value && coordinate <= DST_COORDINATE$.value) {
+                            return -(coordinate - BOTTOM_CENTER_COORDINATE$.value);
+                        } else {
+                            return BOTTOM_CENTER_COORDINATE$.value - coordinate;
+                        }
+                    }
+
+                    if (SRC_POSITION$.value === 'BOTTOM_RIGHT') {
+                        if (coordinate >= BOTTOM_CENTER_COORDINATE$.value && coordinate <= BOTTOM_LEFT_COORDINATE$.value) {
+                            return -(coordinate - BOTTOM_CENTER_COORDINATE$.value);
+                        } else if (coordinate >= SRC_COORDINATE$.value && coordinate <= BOTTOM_CENTER_COORDINATE$.value) {
+                            return BOTTOM_CENTER_COORDINATE$.value - coordinate;
+                        } else {
+                            return BOTTOM_CENTER_COORDINATE$.value - SRC_COORDINATE$.value + DST_COORDINATE$.value - coordinate;
+                        }
+                    }
+
+                    if (BOTTOM_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || BOTTOM_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                        if (coordinate >= SRC_COORDINATE$.value) {
+                            return -(coordinate - SRC_COORDINATE$.value);
+                        } else {
+                            return DST_COORDINATE$.value - coordinate;
+                        }
+                    }
+
+                    return 0;
+                }
+                // 小车在上,
+                else if (CURRENT_RGV_POSITION$.value === 'TOP') {
+                    if (coordinate <= TOP_CENTER_COORDINATE$.value) {
+                        return -(TOP_CENTER_COORDINATE$.value - coordinate);
+                    } else {
+                        return coordinate - TOP_CENTER_COORDINATE$.value;
+                    }
+                }
+                // 小车在左,
+                else if (CURRENT_RGV_POSITION$.value === 'LEFT') {
+                    const radian = drawRgv_GetRadianByArcLength(coordinate - BOTTOM_LEFT_COORDINATE$.value);
+                    return -radius * Math.sin(radian) - PATH_WIDTH$.value / 2;
+                }
+                // 小车在右,
+                else {
+                    const radian = Math.PI + drawRgv_GetRadianByArcLength(coordinate - TOP_RIGHT_COORDINATE$.value);
+                    return -radius * Math.sin(radian) + PATH_WIDTH$.value / 2;
+                }
+            }
+            // 起点在上,
+            else if (SRC_POSITION$.value === 'TOP_LEFT' || SRC_POSITION$.value === 'TOP_RIGHT' || TOP_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || TOP_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                // 小车在下,
+                if (CURRENT_RGV_POSITION$.value === 'BOTTOM') {
+                    if (coordinate >= BOTTOM_CENTER_COORDINATE$.value) {
+                        return -(coordinate - BOTTOM_CENTER_COORDINATE$.value);
+                    } else {
+                        return BOTTOM_CENTER_COORDINATE$.value - coordinate;
+                    }
+                }
+                // 小车在上,
+                else if (CURRENT_RGV_POSITION$.value === 'TOP') {
+                    if (SRC_POSITION$.value === 'TOP_LEFT') {
+                        if (coordinate >= TOP_LEFT_COORDINATE$.value && coordinate <= DST_COORDINATE$.value) {
+                            return -(DST_COORDINATE$.value - coordinate + TOP_CENTER_COORDINATE$.value - SRC_COORDINATE$.value);
+                        } else if (coordinate >= SRC_COORDINATE$.value && coordinate <= TOP_CENTER_COORDINATE$.value) {
+                            return -(TOP_CENTER_COORDINATE$.value - coordinate);
+                        } else {
+                            return coordinate - TOP_CENTER_COORDINATE$.value;
+                        }
+                    }
+
+                    if (SRC_POSITION$.value === 'TOP_RIGHT') {
+                        if (coordinate >= TOP_LEFT_COORDINATE$.value && coordinate <= TOP_CENTER_COORDINATE$.value) {
+                            return -(TOP_CENTER_COORDINATE$.value - coordinate);
+                        } else if (coordinate >= TOP_CENTER_COORDINATE$.value && coordinate <= DST_COORDINATE$.value) {
+                            return coordinate - TOP_CENTER_COORDINATE$.value;
+                        } else {
+                            return DST_COORDINATE$.value - TOP_CENTER_COORDINATE$.value + coordinate - SRC_COORDINATE$.value;
+                        }
+                    }
+
+                    if (TOP_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || TOP_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                        if (coordinate >= SRC_COORDINATE$.value) {
+                            return coordinate - SRC_COORDINATE$.value;
+                        } else {
+                            return -(DST_COORDINATE$.value - coordinate);
+                        }
+                    }
+
+                    return 0;
+                }
+                // 小车在左,
+                else if (CURRENT_RGV_POSITION$.value === 'LEFT') {
+                    const radian = drawRgv_GetRadianByArcLength(coordinate - BOTTOM_LEFT_COORDINATE$.value);
+                    return -radius * Math.sin(radian) - PATH_WIDTH$.value / 2;
+                }
+                // 小车在右,
+                else {
+                    const radian = Math.PI + drawRgv_GetRadianByArcLength(coordinate - TOP_RIGHT_COORDINATE$.value);
+                    return -radius * Math.sin(radian) + PATH_WIDTH$.value / 2;
+                }
+            }
+            // 起点在左,
+            else if (SRC_POSITION$.value === 'LEFT') {
+                // 小车在下,
+                if (CURRENT_RGV_POSITION$.value === 'BOTTOM') {
+                    if (coordinate >= BOTTOM_CENTER_COORDINATE$.value) {
+                        return -(coordinate - BOTTOM_CENTER_COORDINATE$.value);
+                    } else {
+                        return BOTTOM_CENTER_COORDINATE$.value - coordinate;
+                    }
+                }
+                // 小车在上,
+                else if (CURRENT_RGV_POSITION$.value === 'TOP') {
+                    if (coordinate <= TOP_CENTER_COORDINATE$.value) {
+                        return -(TOP_CENTER_COORDINATE$.value - coordinate);
+                    } else {
+                        return coordinate - TOP_CENTER_COORDINATE$.value;
+                    }
+                }
+                // 小车在左,
+                else if (CURRENT_RGV_POSITION$.value === 'LEFT') {
+                    const radian = drawRgv_GetRadianByArcLength((coordinate < BOTTOM_LEFT_COORDINATE$.value ? coordinate + DST_COORDINATE$.value - SRC_COORDINATE$.value : coordinate) - BOTTOM_LEFT_COORDINATE$.value);
+                    return -radius * Math.sin(radian) - PATH_WIDTH$.value / 2;
+                }
+                // 小车在右,
+                else {
+                    const radian = Math.PI + drawRgv_GetRadianByArcLength(coordinate - TOP_RIGHT_COORDINATE$.value);
+                    return -radius * Math.sin(radian) + PATH_WIDTH$.value / 2;
+                }
+            }
+            // 起点在右,
+            else {
+                // 小车在下,
+                if (CURRENT_RGV_POSITION$.value === 'BOTTOM') {
+                    if (coordinate >= BOTTOM_CENTER_COORDINATE$.value) {
+                        return -(coordinate - BOTTOM_CENTER_COORDINATE$.value);
+                    } else {
+                        return BOTTOM_CENTER_COORDINATE$.value - coordinate;
+                    }
+                }
+                // 小车在上,
+                else if (CURRENT_RGV_POSITION$.value === 'TOP') {
+                    if (coordinate <= TOP_CENTER_COORDINATE$.value) {
+                        return -(TOP_CENTER_COORDINATE$.value - coordinate);
+                    } else {
+                        return coordinate - TOP_CENTER_COORDINATE$.value;
+                    }
+                }
+                // 小车在左,
+                else if (CURRENT_RGV_POSITION$.value === 'LEFT') {
+                    const radian = drawRgv_GetRadianByArcLength(coordinate - BOTTOM_LEFT_COORDINATE$.value);
+                    return -radius * Math.sin(radian) - PATH_WIDTH$.value / 2;
+                }
+                // 小车在右,
+                else {
+                    const radian = Math.PI + drawRgv_GetRadianByArcLength((coordinate < TOP_RIGHT_COORDINATE$.value ? coordinate + DST_COORDINATE$.value - SRC_COORDINATE$.value : coordinate) - TOP_RIGHT_COORDINATE$.value);
+                    return -radius * Math.sin(radian) + PATH_WIDTH$.value / 2;
+                }
+            }
+        }
+        // 逆时针,
+        else {
+            // 起点在下,
+            if (SRC_POSITION$.value === 'BOTTOM_LEFT' || SRC_POSITION$.value === 'BOTTOM_RIGHT' || BOTTOM_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || BOTTOM_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                // 小车在下,
+                if (CURRENT_RGV_POSITION$.value === 'BOTTOM') {
+                    if (SRC_POSITION$.value === 'BOTTOM_LEFT') {
+                        if (coordinate >= BOTTOM_LEFT_COORDINATE$.value && coordinate <= DST_COORDINATE$.value) {
+                            return -(DST_COORDINATE$.value - coordinate + BOTTOM_CENTER_COORDINATE$.value - SRC_COORDINATE$.value);
+                        } else if (coordinate >= SRC_COORDINATE$.value && coordinate <= BOTTOM_CENTER_COORDINATE$.value) {
+                            return -(BOTTOM_CENTER_COORDINATE$.value - coordinate);
+                        } else {
+                            return coordinate - BOTTOM_CENTER_COORDINATE$.value;
+                        }
+                    }
+
+                    if (SRC_POSITION$.value === 'BOTTOM_RIGHT') {
+                        if (coordinate >= BOTTOM_LEFT_COORDINATE$.value && coordinate <= BOTTOM_CENTER_COORDINATE$.value) {
+                            return -(BOTTOM_CENTER_COORDINATE$.value - coordinate);
+                        } else if (coordinate >= BOTTOM_CENTER_COORDINATE$.value && coordinate <= DST_COORDINATE$.value) {
+                            return coordinate - BOTTOM_CENTER_COORDINATE$.value;
+                        } else {
+                            return DST_COORDINATE$.value - BOTTOM_CENTER_COORDINATE$.value + coordinate - SRC_COORDINATE$.value;
+                        }
+                    }
+
+                    if (BOTTOM_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || BOTTOM_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                        if (coordinate <= DST_COORDINATE$.value) {
+                            return -(SRC_COORDINATE$.value - coordinate);
+                        } else {
+                            return coordinate - SRC_COORDINATE$.value;
+                        }
+                    }
+
+                    return 0;
+                }
+                // 小车在上,
+                else if (CURRENT_RGV_POSITION$.value === 'TOP') {
+                    if (coordinate >= TOP_CENTER_COORDINATE$.value) {
+                        return -(coordinate - TOP_CENTER_COORDINATE$.value);
+                    } else {
+                        return TOP_CENTER_COORDINATE$.value - coordinate;
+                    }
+                }
+                // 小车在左,
+                else if (CURRENT_RGV_POSITION$.value === 'LEFT') {
+                    const radian = drawRgv_GetRadianByArcLength(BOTTOM_LEFT_COORDINATE$.value - coordinate);
+                    return -radius * Math.sin(radian) - PATH_WIDTH$.value / 2;
+                }
+                // 小车在右,
+                else {
+                    const radian = Math.PI + drawRgv_GetRadianByArcLength(TOP_RIGHT_COORDINATE$.value - coordinate);
+                    return -radius * Math.sin(radian) + PATH_WIDTH$.value / 2;
+                }
+            }
+            // 起点在上,
+            else if (SRC_POSITION$.value === 'TOP_LEFT' || SRC_POSITION$.value === 'TOP_RIGHT' || TOP_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || TOP_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                // 小车在下,
+                if (CURRENT_RGV_POSITION$.value === 'BOTTOM') {
+                    if (coordinate <= BOTTOM_CENTER_COORDINATE$.value) {
+                        return -(BOTTOM_CENTER_COORDINATE$.value - coordinate);
+                    } else {
+                        return coordinate - BOTTOM_CENTER_COORDINATE$.value;
+                    }
+                }
+                // 小车在上,
+                else if (CURRENT_RGV_POSITION$.value === 'TOP') {
+                    if (SRC_POSITION$.value === 'TOP_LEFT') {
+                        if (coordinate >= SRC_COORDINATE$.value && coordinate <= TOP_LEFT_COORDINATE$.value) {
+                            return -(coordinate - SRC_COORDINATE$.value + DST_COORDINATE$.value - TOP_CENTER_COORDINATE$.value);
+                        } else if (coordinate >= TOP_CENTER_COORDINATE$.value && coordinate <= DST_COORDINATE$.value) {
+                            return -(coordinate - TOP_CENTER_COORDINATE$.value);
+                        } else {
+                            return TOP_CENTER_COORDINATE$.value - coordinate;
+                        }
+                    }
+
+                    if (SRC_POSITION$.value === 'TOP_RIGHT') {
+                        if (coordinate >= TOP_CENTER_COORDINATE$.value && coordinate <= TOP_LEFT_COORDINATE$.value) {
+                            return -(coordinate - TOP_CENTER_COORDINATE$.value);
+                        } else if (coordinate >= SRC_COORDINATE$.value && coordinate <= TOP_CENTER_COORDINATE$.value) {
+                            return TOP_CENTER_COORDINATE$.value - coordinate;
+                        } else {
+                            return TOP_CENTER_COORDINATE$.value - SRC_COORDINATE$.value + DST_COORDINATE$.value - coordinate;
+                        }
+                    }
+
+                    if (TOP_CENTER_COORDINATE$.value === SRC_COORDINATE$.value || TOP_CENTER_COORDINATE$.value === DST_COORDINATE$.value) {
+                        if (coordinate >= SRC_COORDINATE$.value) {
+                            return -(coordinate - SRC_COORDINATE$.value);
+                        } else {
+                            return DST_COORDINATE$.value - coordinate;
+                        }
+                    }
+
+                    return 0;
+                }
+                // 小车在左,
+                else if (CURRENT_RGV_POSITION$.value === 'LEFT') {
+                    const radian = drawRgv_GetRadianByArcLength(BOTTOM_LEFT_COORDINATE$.value - coordinate);
+                    return -radius * Math.sin(radian) - PATH_WIDTH$.value / 2;
+                }
+                // 小车在右,
+                else {
+                    const radian = Math.PI + drawRgv_GetRadianByArcLength(TOP_RIGHT_COORDINATE$.value - coordinate);
+                    return -radius * Math.sin(radian) + PATH_WIDTH$.value / 2;
+                }
+            }
+            // 起点在左,
+            else if (SRC_POSITION$.value === 'LEFT') {
+                // 小车在下,
+                if (CURRENT_RGV_POSITION$.value === 'BOTTOM') {
+                    if (coordinate >= BOTTOM_CENTER_COORDINATE$.value) {
+                        return coordinate - BOTTOM_CENTER_COORDINATE$.value;
+                    } else {
+                        return -(BOTTOM_CENTER_COORDINATE$.value - coordinate);
+                    }
+                }
+                // 小车在上,
+                else if (CURRENT_RGV_POSITION$.value === 'TOP') {
+                    if (coordinate <= TOP_CENTER_COORDINATE$.value) {
+                        return TOP_CENTER_COORDINATE$.value - coordinate;
+                    } else {
+                        return -(coordinate - TOP_CENTER_COORDINATE$.value);
+                    }
+                }
+                // 小车在左,
+                else if (CURRENT_RGV_POSITION$.value === 'LEFT') {
+                    const radian = drawRgv_GetRadianByArcLength(
+                        BOTTOM_LEFT_COORDINATE$.value -
+                            SRC_COORDINATE$.value +
+                            DST_COORDINATE$.value -
+                            TOP_LEFT_COORDINATE$.value -
+                            ((coordinate < TOP_LEFT_COORDINATE$.value ? coordinate + DST_COORDINATE$.value - SRC_COORDINATE$.value : coordinate) - TOP_LEFT_COORDINATE$.value),
+                    );
+                    return -radius * Math.sin(radian) - PATH_WIDTH$.value / 2;
+                }
+                // 小车在右,
+                else {
+                    const radian = Math.PI + drawRgv_GetRadianByArcLength(TOP_RIGHT_COORDINATE$.value - coordinate);
+                    return -radius * Math.sin(radian) + PATH_WIDTH$.value / 2;
+                }
+            }
+            // 起点在右,
+            else {
+                // 小车在下,
+                if (CURRENT_RGV_POSITION$.value === 'BOTTOM') {
+                    if (coordinate >= BOTTOM_CENTER_COORDINATE$.value) {
+                        return coordinate - BOTTOM_CENTER_COORDINATE$.value;
+                    } else {
+                        return -(BOTTOM_CENTER_COORDINATE$.value - coordinate);
+                    }
+                }
+                // 小车在上,
+                else if (CURRENT_RGV_POSITION$.value === 'TOP') {
+                    if (coordinate <= TOP_CENTER_COORDINATE$.value) {
+                        return TOP_CENTER_COORDINATE$.value - coordinate;
+                    } else {
+                        return -(coordinate - TOP_CENTER_COORDINATE$.value);
+                    }
+                }
+                // 小车在左,
+                else if (CURRENT_RGV_POSITION$.value === 'LEFT') {
+                    const radian = drawRgv_GetRadianByArcLength(BOTTOM_LEFT_COORDINATE$.value - coordinate);
+                    return -radius * Math.sin(radian) - PATH_WIDTH$.value / 2;
+                }
+                // 小车在右,
+                else {
+                    const radian =
+                        Math.PI +
+                        drawRgv_GetRadianByArcLength(
+                            TOP_RIGHT_COORDINATE$.value -
+                                SRC_COORDINATE$.value +
+                                DST_COORDINATE$.value -
+                                BOTTOM_RIGHT_COORDINATE$.value -
+                                ((coordinate < BOTTOM_RIGHT_COORDINATE$.value ? coordinate + DST_COORDINATE$.value - SRC_COORDINATE$.value : coordinate) - BOTTOM_RIGHT_COORDINATE$.value),
+                        );
+                    return -radius * Math.sin(radian) + PATH_WIDTH$.value / 2;
+                }
+            }
+        }
+    }
+
+    /**
+     * 绘制小车:计算纵坐标.
+     *
+     * @param coordinate 刻度.
+     * @param radius 轨道半径.
+     */
+    function drawRgv_GetY(coordinate: number, radius: number): number {
+        // 顺时针,
+        if (PATH_DIRECTION$.value === 0) {
+            // 小车在下,
+            if (CURRENT_RGV_POSITION$.value === 'BOTTOM') {
+                return radius;
+            }
+            // 小车在上,
+            else if (CURRENT_RGV_POSITION$.value === 'TOP') {
+                return -radius;
+            }
+            // 小车在左,
+            else if (CURRENT_RGV_POSITION$.value === 'LEFT') {
+                // 起点在左,
+                if (SRC_POSITION$.value === 'LEFT') {
+                    const radian = drawRgv_GetRadianByArcLength((coordinate < BOTTOM_LEFT_COORDINATE$.value ? coordinate + DST_COORDINATE$.value - SRC_COORDINATE$.value : coordinate) - BOTTOM_LEFT_COORDINATE$.value);
+                    return radius * Math.cos(radian);
+                } else {
+                    const radian = drawRgv_GetRadianByArcLength(coordinate - BOTTOM_LEFT_COORDINATE$.value);
+                    return radius * Math.cos(radian);
+                }
+            }
+            // 小车在右,
+            else {
+                // 起点在右,
+                if (SRC_POSITION$.value === 'RIGHT') {
+                    const radian = Math.PI + drawRgv_GetRadianByArcLength((coordinate < TOP_RIGHT_COORDINATE$.value ? coordinate + DST_COORDINATE$.value - SRC_COORDINATE$.value : coordinate) - TOP_RIGHT_COORDINATE$.value);
+                    return radius * Math.cos(radian);
+                }
+                // 起上下左,
+                else {
+                    const radian = Math.PI + drawRgv_GetRadianByArcLength(coordinate - TOP_RIGHT_COORDINATE$.value);
+                    return radius * Math.cos(radian);
+                }
+            }
+        }
+        // 逆时针,
+        else {
+            // 小车在上,
+            if (CURRENT_RGV_POSITION$.value === 'BOTTOM') {
+                return radius;
+            }
+            // 小车在下,
+            else if (CURRENT_RGV_POSITION$.value === 'TOP') {
+                return -radius;
+            }
+            // 小车在左,
+            else if (CURRENT_RGV_POSITION$.value === 'LEFT') {
+                // 起点在左,
+                if (SRC_POSITION$.value === 'LEFT') {
+                    const radian = drawRgv_GetRadianByArcLength(
+                        BOTTOM_LEFT_COORDINATE$.value -
+                            SRC_COORDINATE$.value +
+                            DST_COORDINATE$.value -
+                            TOP_LEFT_COORDINATE$.value -
+                            ((coordinate < TOP_LEFT_COORDINATE$.value ? coordinate + DST_COORDINATE$.value - SRC_COORDINATE$.value : coordinate) - TOP_LEFT_COORDINATE$.value),
+                    );
+                    return radius * Math.cos(radian);
+                }
+                // 起点在右,
+                else {
+                    const radian = drawRgv_GetRadianByArcLength(BOTTOM_LEFT_COORDINATE$.value - coordinate);
+                    return radius * Math.cos(radian);
+                }
+            }
+            // 小车在右,
+            else {
+                // 起点在右,
+                if (SRC_POSITION$.value === 'RIGHT') {
+                    const radian =
+                        Math.PI +
+                        drawRgv_GetRadianByArcLength(
+                            TOP_RIGHT_COORDINATE$.value -
+                                SRC_COORDINATE$.value +
+                                DST_COORDINATE$.value -
+                                BOTTOM_RIGHT_COORDINATE$.value -
+                                ((coordinate < BOTTOM_RIGHT_COORDINATE$.value ? coordinate + DST_COORDINATE$.value - SRC_COORDINATE$.value : coordinate) - BOTTOM_RIGHT_COORDINATE$.value),
+                        );
+                    return radius * Math.cos(radian);
+                }
+                // 起点在左,
+                else {
+                    const radian = Math.PI + drawRgv_GetRadianByArcLength(TOP_RIGHT_COORDINATE$.value - coordinate);
+                    return radius * Math.cos(radian);
+                }
+            }
+        }
+    }
+
+    /**
+     * 绘制小车:计算旋转弧度.
+     *
+     * @param coordinate 刻度.
+     */
+    function drawRgv_GetRotate(coordinate: number): number {
+        // 顺时针,
+        if (PATH_DIRECTION$.value === 0) {
+            // 小车在下,
+            if (CURRENT_RGV_POSITION$.value === 'BOTTOM') {
+                return 0;
+            }
+            // 小车在上,
+            else if (CURRENT_RGV_POSITION$.value === 'TOP') {
+                return Math.PI;
+            }
+            // 小车在左,
+            else if (CURRENT_RGV_POSITION$.value === 'LEFT') {
+                // 起点在左,
+                if (SRC_POSITION$.value === 'LEFT') {
+                    return drawRgv_GetRadianByArcLength((coordinate < TOP_LEFT_COORDINATE$.value ? coordinate + DST_COORDINATE$.value - SRC_COORDINATE$.value : coordinate) - BOTTOM_LEFT_COORDINATE$.value);
+                } else {
+                    return drawRgv_GetRadianByArcLength(coordinate - BOTTOM_LEFT_COORDINATE$.value);
+                }
+            }
+            // 小车在右,
+            else {
+                // 起点在右,
+                if (SRC_POSITION$.value === 'RIGHT') {
+                    return Math.PI + drawRgv_GetRadianByArcLength((coordinate < BOTTOM_RIGHT_COORDINATE$.value ? coordinate + DST_COORDINATE$.value - SRC_COORDINATE$.value : coordinate) - TOP_RIGHT_COORDINATE$.value);
+                }
+                // 起上下左,
+                else {
+                    return Math.PI + drawRgv_GetRadianByArcLength(coordinate - TOP_RIGHT_COORDINATE$.value);
+                }
+            }
+        }
+        // 逆时针,
+        else {
+            // 小车在下,
+            if (CURRENT_RGV_POSITION$.value === 'BOTTOM') {
+                return 0;
+            }
+            // 小车在上,
+            else if (CURRENT_RGV_POSITION$.value === 'TOP') {
+                return Math.PI;
+            }
+            // 小车在左,
+            else if (CURRENT_RGV_POSITION$.value === 'LEFT') {
+                // 起点在左,
+                if (SRC_POSITION$.value === 'LEFT') {
+                    const radian = drawRgv_GetRadianByArcLength(
+                        BOTTOM_LEFT_COORDINATE$.value -
+                            SRC_COORDINATE$.value +
+                            DST_COORDINATE$.value -
+                            TOP_LEFT_COORDINATE$.value -
+                            ((coordinate < TOP_LEFT_COORDINATE$.value ? coordinate + DST_COORDINATE$.value - SRC_COORDINATE$.value : coordinate) - TOP_LEFT_COORDINATE$.value),
+                    );
+                    return radian;
+                }
+                // 起点在右,
+                else {
+                    const radian = drawRgv_GetRadianByArcLength(BOTTOM_LEFT_COORDINATE$.value - coordinate);
+                    return radian;
+                }
+            }
+            // 小车在右,
+            else {
+                // 起点在右,
+                if (SRC_POSITION$.value === 'RIGHT') {
+                    const radian =
+                        Math.PI +
+                        drawRgv_GetRadianByArcLength(
+                            TOP_RIGHT_COORDINATE$.value -
+                                SRC_COORDINATE$.value +
+                                DST_COORDINATE$.value -
+                                BOTTOM_RIGHT_COORDINATE$.value -
+                                ((coordinate < BOTTOM_RIGHT_COORDINATE$.value ? coordinate + DST_COORDINATE$.value - SRC_COORDINATE$.value : coordinate) - BOTTOM_RIGHT_COORDINATE$.value),
+                        );
+                    return radian;
+                }
+                // 起上下左,
+                else {
+                    const radian = Math.PI + drawRgv_GetRadianByArcLength(TOP_RIGHT_COORDINATE$.value - coordinate);
+                    return radian;
+                }
+            }
+        }
+    }
+
+    /**
+     * 绘制小车:绘制路线.
+     *
+     * @param canvasStatusData 状态数据.
+     * @param index 序号.
+     * @param rgv 小车.
+     * @param rgvNode 小车节点.
+     * @param rgvPathRadius 小车路线半径.
+     */
+    function drawRgv_DrawPath(canvasStatusData: StatusDTO, index: number, rgv: StatusRgvVO, rgvNode: Q.Node, rgvPathRadius: number) {
+        let rgvPathNode = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.find((i) => i.properties.key?.startsWith(NODE_KEY.RGV__PATH) && i.properties.data?.rgvNo === rgv.rgvNo) as Q.ShapeNode;
+
+        // 节点已经存在, 删除之后重新创建,
+        if (rgvPathNode) {
+            kgCircularShuttleMonitor.store.getGraph!.removeElement(rgvPathNode);
+        }
+
+        // 隐藏小车路线,
+        if (!kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvPathVisible) {
+            return;
+        }
+
+        // 没有起始站点, 没有目的站点,
+        if (!rgv.sourceStation || !rgv.destinationStation) {
+            return;
+        }
+
+        // 起始站点节点,
+        const srcStationNode = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.find((i) => i.properties.key?.startsWith(NODE_KEY.STATION) && (i.properties.data as MapStationVO)?.stationNo === rgv.sourceStation) as Q.Node;
+        if (!srcStationNode) {
+            return;
+        }
+
+        // 目的站点节点,
+        const dstStationNode = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.find((i) => i.properties.key?.startsWith(NODE_KEY.STATION) && (i.properties.data as MapStationVO)?.stationNo === rgv.destinationStation) as Q.Node;
+        if (!dstStationNode) {
+            return;
+        }
+
+        rgvPathNode = kgCircularShuttleMonitor.store.getGraph!.createShapeNode(undefined, undefined, 0, 0);
+        rgvPathNode.movable = false;
+        rgvPathNode.zIndex = 2;
+        rgvPathNode.selectable = false;
+        rgvPathNode.putStyles({
+            [Q.Styles.ARROW_FROM]: Q.Consts.SHAPE_CIRCLE,
+            [Q.Styles.ARROW_FROM_FILL_COLOR]: kgCircularShuttleMonitor.store.$Canvas$Setting$RgvProperty$pathColor(rgv.rgvNo, index),
+            [Q.Styles.ARROW_FROM_SIZE]: LINE_WIDTH * 5,
+            [Q.Styles.ARROW_TO]: Q.Consts.SHAPE_TRIANGLE,
+            [Q.Styles.ARROW_TO_FILL_COLOR]: kgCircularShuttleMonitor.store.$Canvas$Setting$RgvProperty$pathColor(rgv.rgvNo, index),
+            [Q.Styles.ARROW_TO_LINE_JOIN]: Q.Consts.LINE_JOIN_TYPE_MITER,
+            [Q.Styles.ARROW_TO_SIZE]: LINE_WIDTH * 5,
+            [Q.Styles.SHAPE_LINE_DASH]: [LINE_WIDTH * 8, LINE_WIDTH * 4, LINE_WIDTH * 4, LINE_WIDTH * 4],
+            [Q.Styles.SHAPE_STROKE]: LINE_WIDTH,
+            [Q.Styles.SHAPE_STROKE_STYLE]: kgCircularShuttleMonitor.store.$Canvas$Setting$RgvProperty$pathColor(rgv.rgvNo, index),
+        });
+        rgvPathNode.properties = {
+            data: rgv,
+            key: `${NODE_KEY.RGV__PATH}${rgv.rgvNo}`,
+        };
+
+        // 当前是选中小车,
+        if (rgv.rgvNo === kgCircularShuttleMonitor.store.$Canvas$getCurrentRgvList[0]?.rgvNo) {
+            rgvPathNode.putStyles({
+                [Q.Styles.SHAPE_LINE_DASH_OFFSET]: selectBlinkDashOffset * LINE_WIDTH * 2,
+            });
+        }
+        // 当前非选中小车,
+        else {
+            rgvPathNode.putStyles({
+                [Q.Styles.SHAPE_LINE_DASH_OFFSET]: undefined,
+            });
+        }
+
+        // 起始站点位置,
+        const SRC_STATION_POSITION: 'TOP' | 'BOTTOM' = srcStationNode.y < 0 ? 'TOP' : 'BOTTOM';
+        // 目的站点位置,
+        const DST_STATION_POSITION: 'TOP' | 'BOTTOM' = dstStationNode.y < 0 ? 'TOP' : 'BOTTOM';
+
+        // 顺时针,
+        if (PATH_DIRECTION$.value === 0) {
+            // 起始站点在上,
+            if (SRC_STATION_POSITION === 'TOP') {
+                // 目的站点在上,
+                if (DST_STATION_POSITION === 'TOP') {
+                    // 起始站点在后,
+                    if (srcStationNode.x < dstStationNode.x) {
+                        rgvPathNode.moveTo(srcStationNode.x, -rgvPathRadius);
+                        rgvPathNode.lineTo(dstStationNode.x, -rgvPathRadius);
+                    }
+                    // 起始站点在前,
+                    else {
+                        rgvPathNode.moveTo(srcStationNode.x, -rgvPathRadius);
+                        rgvPathNode.lineTo(PATH_WIDTH$.value / 2, -rgvPathRadius);
+                        rgvPathNode.arcTo(PATH_WIDTH$.value / 2 + rgvPathRadius, -rgvPathRadius, PATH_WIDTH$.value / 2 + rgvPathRadius, 0, rgvPathRadius);
+                        rgvPathNode.arcTo(PATH_WIDTH$.value / 2 + rgvPathRadius, +rgvPathRadius, PATH_WIDTH$.value / 2, +rgvPathRadius, rgvPathRadius);
+                        rgvPathNode.lineTo(-(PATH_WIDTH$.value / 2), +rgvPathRadius);
+                        rgvPathNode.arcTo(-(PATH_WIDTH$.value / 2 + rgvPathRadius), rgvPathRadius, -(PATH_WIDTH$.value / 2 + rgvPathRadius), 0, rgvPathRadius);
+                        rgvPathNode.arcTo(-(PATH_WIDTH$.value / 2 + rgvPathRadius), -rgvPathRadius, -(PATH_WIDTH$.value / 2), -rgvPathRadius, rgvPathRadius);
+                        rgvPathNode.lineTo(dstStationNode.x, -rgvPathRadius);
+                    }
+                }
+                // 目的站点在下,
+                else {
+                    rgvPathNode.moveTo(srcStationNode.x, -rgvPathRadius);
+                    rgvPathNode.lineTo(PATH_WIDTH$.value / 2, -rgvPathRadius);
+                    rgvPathNode.arcTo(PATH_WIDTH$.value / 2 + rgvPathRadius, -rgvPathRadius, PATH_WIDTH$.value / 2 + rgvPathRadius, 0, rgvPathRadius);
+                    rgvPathNode.arcTo(PATH_WIDTH$.value / 2 + rgvPathRadius, +rgvPathRadius, PATH_WIDTH$.value / 2, +rgvPathRadius, rgvPathRadius);
+                    rgvPathNode.lineTo(dstStationNode.x, +rgvPathRadius);
+                }
+            }
+            // 起始站点在下,
+            else {
+                // 目的站点在上,
+                if (DST_STATION_POSITION === 'TOP') {
+                    rgvPathNode.moveTo(srcStationNode.x, +rgvPathRadius);
+                    rgvPathNode.lineTo(-(PATH_WIDTH$.value / 2), +rgvPathRadius);
+                    rgvPathNode.arcTo(-(PATH_WIDTH$.value / 2 + rgvPathRadius), +rgvPathRadius, -(PATH_WIDTH$.value / 2 + rgvPathRadius), 0, rgvPathRadius);
+                    rgvPathNode.arcTo(-(PATH_WIDTH$.value / 2 + rgvPathRadius), -rgvPathRadius, -(PATH_WIDTH$.value / 2), -rgvPathRadius, rgvPathRadius);
+                    rgvPathNode.lineTo(dstStationNode.x, -rgvPathRadius);
+                }
+                // 目的站点在下,
+                else {
+                    // 起始站点在后,
+                    if (srcStationNode.x > dstStationNode.x) {
+                        rgvPathNode.moveTo(srcStationNode.x, rgvPathRadius);
+                        rgvPathNode.lineTo(dstStationNode.x, rgvPathRadius);
+                    }
+                    // 起始站点在前,
+                    else {
+                        rgvPathNode.moveTo(srcStationNode.x, rgvPathRadius);
+                        rgvPathNode.lineTo(-(PATH_WIDTH$.value / 2), rgvPathRadius);
+                        rgvPathNode.arcTo(-(PATH_WIDTH$.value / 2 + rgvPathRadius), rgvPathRadius, -(PATH_WIDTH$.value / 2 + rgvPathRadius), 0, rgvPathRadius);
+                        rgvPathNode.arcTo(-(PATH_WIDTH$.value / 2 + rgvPathRadius), -rgvPathRadius, -(PATH_WIDTH$.value / 2), -rgvPathRadius, rgvPathRadius);
+                        rgvPathNode.lineTo(PATH_WIDTH$.value / 2, -rgvPathRadius);
+                        rgvPathNode.arcTo(PATH_WIDTH$.value / 2 + rgvPathRadius, -rgvPathRadius, PATH_WIDTH$.value / 2 + rgvPathRadius, 0, rgvPathRadius);
+                        rgvPathNode.arcTo(PATH_WIDTH$.value / 2 + rgvPathRadius, rgvPathRadius, PATH_WIDTH$.value / 2, rgvPathRadius, rgvPathRadius);
+                        rgvPathNode.lineTo(dstStationNode.x, rgvPathRadius);
+                    }
+                }
+            }
+        }
+        // 逆时针,
+        else {
+            // 起始站点在上,
+            if (SRC_STATION_POSITION === 'TOP') {
+                // 目的站点在上,
+                if (DST_STATION_POSITION === 'TOP') {
+                    // 起始站点在后,
+                    if (srcStationNode.x > dstStationNode.x) {
+                        rgvPathNode.moveTo(srcStationNode.x, -rgvPathRadius);
+                        rgvPathNode.lineTo(dstStationNode.x, -rgvPathRadius);
+                    }
+                    // 起始站点在前,
+                    else {
+                        rgvPathNode.moveTo(srcStationNode.x, -rgvPathRadius);
+                        rgvPathNode.lineTo(-PATH_WIDTH$.value / 2, -rgvPathRadius);
+                        rgvPathNode.arcTo(-(PATH_WIDTH$.value / 2 + rgvPathRadius), -rgvPathRadius, -(PATH_WIDTH$.value / 2 + rgvPathRadius), 0, rgvPathRadius);
+                        rgvPathNode.arcTo(-(PATH_WIDTH$.value / 2 + rgvPathRadius), +rgvPathRadius, -(PATH_WIDTH$.value / 2), rgvPathRadius, rgvPathRadius);
+                        rgvPathNode.lineTo(PATH_WIDTH$.value / 2, rgvPathRadius);
+                        rgvPathNode.arcTo(PATH_WIDTH$.value / 2 + rgvPathRadius, rgvPathRadius, PATH_WIDTH$.value / 2 + rgvPathRadius, 0, rgvPathRadius);
+                        rgvPathNode.arcTo(PATH_WIDTH$.value / 2 + rgvPathRadius, -rgvPathRadius, PATH_WIDTH$.value / 2, -rgvPathRadius, rgvPathRadius);
+                        rgvPathNode.lineTo(dstStationNode.x, -rgvPathRadius);
+                    }
+                }
+                // 目的站点在下,
+                else {
+                    rgvPathNode.moveTo(srcStationNode.x, -rgvPathRadius);
+                    rgvPathNode.lineTo(-(PATH_WIDTH$.value / 2), -rgvPathRadius);
+                    rgvPathNode.arcTo(-(PATH_WIDTH$.value / 2 + rgvPathRadius), -rgvPathRadius, -(PATH_WIDTH$.value / 2 + rgvPathRadius), 0, rgvPathRadius);
+                    rgvPathNode.arcTo(-(PATH_WIDTH$.value / 2 + rgvPathRadius), +rgvPathRadius, -(PATH_WIDTH$.value / 2), +rgvPathRadius, rgvPathRadius);
+                    rgvPathNode.lineTo(dstStationNode.x, +rgvPathRadius);
+                }
+            }
+            // 起始站点在下,
+            else {
+                // 目的站点在上,
+                if (DST_STATION_POSITION === 'TOP') {
+                    rgvPathNode.moveTo(srcStationNode.x, +rgvPathRadius);
+                    rgvPathNode.lineTo(PATH_WIDTH$.value / 2, +rgvPathRadius);
+                    rgvPathNode.arcTo(PATH_WIDTH$.value / 2 + rgvPathRadius, +rgvPathRadius, PATH_WIDTH$.value / 2 + rgvPathRadius, 0, rgvPathRadius);
+                    rgvPathNode.arcTo(PATH_WIDTH$.value / 2 + rgvPathRadius, -rgvPathRadius, PATH_WIDTH$.value / 2, -rgvPathRadius, rgvPathRadius);
+                    rgvPathNode.lineTo(dstStationNode.x, -rgvPathRadius);
+                }
+                // 目的站点在下,
+                else {
+                    // 起始站点在后,
+                    if (srcStationNode.x < dstStationNode.x) {
+                        rgvPathNode.moveTo(srcStationNode.x, rgvPathRadius);
+                        rgvPathNode.lineTo(dstStationNode.x, rgvPathRadius);
+                    }
+                    // 起始站点在前,
+                    else {
+                        rgvPathNode.moveTo(srcStationNode.x, rgvPathRadius);
+                        rgvPathNode.lineTo(PATH_WIDTH$.value / 2, rgvPathRadius);
+                        rgvPathNode.arcTo(PATH_WIDTH$.value / 2 + rgvPathRadius, rgvPathRadius, PATH_WIDTH$.value / 2 + rgvPathRadius, 0, rgvPathRadius);
+                        rgvPathNode.arcTo(PATH_WIDTH$.value / 2 + rgvPathRadius, -rgvPathRadius, PATH_WIDTH$.value / 2, -rgvPathRadius, rgvPathRadius);
+                        rgvPathNode.lineTo(-(PATH_WIDTH$.value / 2), -rgvPathRadius);
+                        rgvPathNode.arcTo(-(PATH_WIDTH$.value / 2 + rgvPathRadius), -rgvPathRadius, -(PATH_WIDTH$.value / 2 + rgvPathRadius), 0, rgvPathRadius);
+                        rgvPathNode.arcTo(-(PATH_WIDTH$.value / 2 + rgvPathRadius), rgvPathRadius, -(PATH_WIDTH$.value / 2), rgvPathRadius, rgvPathRadius);
+                        rgvPathNode.lineTo(dstStationNode.x, rgvPathRadius);
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * 绘制小车:绘制路线:绘制小车和路线的连线.
+     *
+     * @param canvasStatusData 状态数据.
+     * @param index 序号.
+     * @param rgv 小车.
+     * @param rgvNode 小车节点.
+     * @param rgvPathRadius 小车路线半径.
+     */
+    function drawRgv_DrawPath_DrawLine(canvasStatusData: StatusDTO, index: number, rgv: StatusRgvVO, rgvNode: Q.Node, rgvPathRadius: number) {
+        let rgvPathLineNode = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.find((i) => i.properties.key?.startsWith(NODE_KEY.RGV__PATH__LINE) && i.properties.data?.rgvNo === rgv.rgvNo) as Q.ShapeNode;
+
+        // 节点已经存在, 删除之后重新创建,
+        if (rgvPathLineNode) {
+            kgCircularShuttleMonitor.store.getGraph!.removeElement(rgvPathLineNode);
+        }
+
+        // 隐藏小车路线,
+        if (!kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvPathVisible) {
+            return;
+        }
+
+        // 隐藏垂直连线,
+        if (!kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvPathLineVisible) {
+            return;
+        }
+
+        // 小车在路线上,
+        if (kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvOnPath) {
+            return;
+        }
+
+        // 没有起始站点, 没有目的站点,
+        if (!rgv.sourceStation || !rgv.destinationStation) {
+            return;
+        }
+
+        // 起始站点节点,
+        const srcStationNode = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.find((i) => i.properties.key?.startsWith(NODE_KEY.STATION) && (i.properties.data as MapStationVO)?.stationNo === rgv.sourceStation) as Q.Node;
+        if (!srcStationNode) {
+            return;
+        }
+
+        // 目的站点节点,
+        const dstStationNode = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.find((i) => i.properties.key?.startsWith(NODE_KEY.STATION) && (i.properties.data as MapStationVO)?.stationNo === rgv.destinationStation) as Q.Node;
+        if (!dstStationNode) {
+            return;
+        }
+
+        const rgvX = drawRgv_GetX(rgv.position, rgvPathRadius);
+        const rgvY = drawRgv_GetY(rgv.position, rgvPathRadius);
+
+        rgvPathLineNode = kgCircularShuttleMonitor.store.getGraph!.createShapeNode(undefined, undefined, 0, 0);
+        rgvPathLineNode.movable = false;
+        rgvPathLineNode.zIndex = 2;
+        rgvPathLineNode.selectable = false;
+        rgvPathLineNode.putStyles({
+            [Q.Styles.SHAPE_LINE_DASH]: [LINE_WIDTH * 8, LINE_WIDTH * 4, LINE_WIDTH * 4, LINE_WIDTH * 4],
+            [Q.Styles.SHAPE_STROKE]: LINE_WIDTH,
+            [Q.Styles.SHAPE_STROKE_STYLE]: kgCircularShuttleMonitor.store.$Canvas$Setting$RgvProperty$pathColor(rgv.rgvNo, index),
+        });
+        rgvPathLineNode.properties = {
+            data: rgv,
+            key: `${NODE_KEY.RGV__PATH__LINE}${rgv.rgvNo}`,
+        };
+
+        // 当前是选中小车,
+        if (rgv.rgvNo === kgCircularShuttleMonitor.store.$Canvas$getCurrentRgvList[0]?.rgvNo) {
+            rgvPathLineNode.putStyles({
+                [Q.Styles.SHAPE_LINE_DASH_OFFSET]: selectBlinkDashOffset * LINE_WIDTH * 2,
+            });
+        }
+        // 当前非选中小车,
+        else {
+            rgvPathLineNode.putStyles({
+                [Q.Styles.SHAPE_LINE_DASH_OFFSET]: undefined,
+            });
+        }
+
+        rgvPathLineNode.moveTo(rgvNode.x, rgvNode.y);
+        rgvPathLineNode.lineTo(rgvX, rgvY);
+    }
+
+    /**
+     * 绘制小车:绘制路线:绘制小车和路线的连线:绘制连线上的小车.
+     *
+     * @param canvasStatusData 状态数据.
+     * @param index 序号.
+     * @param rgv 小车.
+     * @param rgvNode 小车节点.
+     * @param rgvPathRadius 小车路线半径.
+     */
+    function drawRgv_DrawPath_DrawRgv(canvasStatusData: StatusDTO, index: number, rgv: StatusRgvVO, rgvNode: Q.Node, rgvPathRadius: number) {
+        let rgvPathRgvNode = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.find((i) => i.properties.key?.startsWith(NODE_KEY.RGV__PATH__RGV) && i.properties.data?.rgvNo === rgv.rgvNo) as Q.Node;
+
+        // 节点已经存在, 删除之后重新创建,
+        if (rgvPathRgvNode) {
+            kgCircularShuttleMonitor.store.getGraph!.removeElement(rgvPathRgvNode);
+        }
+
+        // 隐藏小车路线,
+        if (!kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvPathVisible) {
+            return;
+        }
+
+        // 没有起始站点, 没有目的站点,
+        if (!rgv.sourceStation || !rgv.destinationStation) {
+            return;
+        }
+
+        // 起始站点节点,
+        const srcStationNode = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.find((i) => i.properties.key?.startsWith(NODE_KEY.STATION) && (i.properties.data as MapStationVO)?.stationNo === rgv.sourceStation) as Q.Node;
+        if (!srcStationNode) {
+            return;
+        }
+
+        // 目的站点节点,
+        const dstStationNode = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.find((i) => i.properties.key?.startsWith(NODE_KEY.STATION) && (i.properties.data as MapStationVO)?.stationNo === rgv.destinationStation) as Q.Node;
+        if (!dstStationNode) {
+            return;
+        }
+
+        const x = drawRgv_GetX(rgv.position, rgvPathRadius);
+        const y = drawRgv_GetY(rgv.position, rgvPathRadius);
+        const rotate = drawRgv_GetRotate(rgv.position);
+
+        rgvPathRgvNode = kgCircularShuttleMonitor.store.getGraph!.createNode(null, x, y);
+        rgvPathRgvNode.size = new Q.Size(CURRENT_RGV_WIDTH$.value, CURRENT_RGV_HEIGHT$.value);
+        rgvPathRgvNode.image = drawRgv_DrawPath_DrawRgv_GetImage(x, y, rgv);
+        rgvPathRgvNode.zIndex = 2;
+        rgvPathRgvNode.movable = false;
+        rgvPathRgvNode.selectable = false;
+        rgvPathRgvNode.rotate = rotate;
+        rgvPathRgvNode.putStyles({
+            [Q.Styles.SHAPE_FILL_COLOR]: '#ffffff',
+            [Q.Styles.SHAPE_STROKE]: 0,
+        });
+        rgvPathRgvNode.properties = {
+            data: rgv,
+            key: `${NODE_KEY.RGV__PATH__RGV}${rgv.rgvNo}`,
+        };
+
+        // 当前是选中小车,
+        if (rgv.rgvNo === kgCircularShuttleMonitor.store.$Canvas$getCurrentRgvList[0]?.rgvNo) {
+            rgvPathRgvNode.putStyles({
+                [Q.Styles.SHAPE_LINE_DASH_OFFSET]: selectBlinkDashOffset * LINE_WIDTH * 2,
+            });
+        }
+        // 当前非选中小车,
+        else {
+            rgvPathRgvNode.putStyles({
+                [Q.Styles.SHAPE_LINE_DASH_OFFSET]: undefined,
+            });
+        }
+
+        drawRgv_DrawPath_DrawRgv_DrawTextUI(rgv, index, rgvPathRgvNode);
+        drawRgv_DrawPath_DrawRgv_DrawDstTextUI(rgv, index, rgvPathRgvNode);
+    }
+
+    /**
+     * 绘制小车:绘制路线:绘制小车和路线的连线:绘制连线上的小车:绘制小车编号.
+     *
+     * @param rgv 小车.
+     * @param index 小车序号.
+     * @param rgvPathRgvNode 小车节点.
+     */
+    function drawRgv_DrawPath_DrawRgv_DrawTextUI(rgv: StatusRgvVO, index: number, rgvPathRgvNode: Q.Node): void {
+        const labelUI = new Q.LabelUI(rgv.rgvNo);
+
+        labelUI.code = '';
+        labelUI.fontSize = CURRENT_RGV_HEIGHT$.value * 0.65;
+        labelUI.position = Q.Position.RIGHT_MIDDLE;
+        labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+        labelUI.alignPosition = Q.Position.CENTER_BOTTOM;
+        labelUI.borderRadius = 0;
+        labelUI.border = LINE_WIDTH;
+        labelUI.borderColor = kgCircularShuttleMonitor.store.$Canvas$Setting$RgvProperty$pathColor(rgv.rgvNo, index);
+        labelUI.color = kgCircularShuttleMonitor.store.$Canvas$Setting$RgvProperty$pathColor(rgv.rgvNo, index);
+        labelUI.backgroundColor = '#ffffff';
+        labelUI.showPointer = false;
+        labelUI.syncSelection = false;
+        labelUI.size = new Q.Size(CURRENT_RGV_WIDTH$.value * 1.5, CURRENT_RGV_HEIGHT$.value - LINE_WIDTH * 2);
+
+        // 顺时针,
+        if (PATH_DIRECTION$.value === 0) {
+            // 在上,
+            if (rgvPathRgvNode.y < 0) {
+                // 小车是在轨道上,
+                if (kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvOnPath) {
+                    labelUI.position = Q.Position.RIGHT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.offsetX = -(CURRENT_RGV_WIDTH$.value + LINE_WIDTH);
+                    labelUI.offsetY = 0;
+
+                    labelUI.rotate = (Math.PI / 180) * 180;
+                }
+                // 小车不在轨道上,
+                else {
+                    labelUI.position = Q.Position.RIGHT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.rotate = (Math.PI / 180) * 180;
+                }
+            }
+            // 在下,
+            else {
+                // 小车是在轨道上,
+                if (kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvOnPath) {
+                    labelUI.position = Q.Position.RIGHT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.offsetX = LINE_WIDTH;
+                    labelUI.offsetY = 0;
+                }
+                // 小车不在轨道上,
+                else {
+                    labelUI.position = Q.Position.LEFT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.offsetX = 0;
+                    labelUI.offsetY = 0;
+                }
+            }
+        }
+        // 逆时针,
+        else {
+            // 在上,
+            if (rgvPathRgvNode.y < 0) {
+                // 小车是在轨道上,
+                if (kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvOnPath) {
+                    labelUI.position = Q.Position.RIGHT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.offsetX = -(CURRENT_RGV_WIDTH$.value + LINE_WIDTH);
+                    labelUI.offsetY = 0;
+
+                    labelUI.rotate = (Math.PI / 180) * 180;
+                }
+                // 小车不在轨道上,
+                else {
+                    labelUI.position = Q.Position.RIGHT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.rotate = (Math.PI / 180) * 180;
+                }
+            }
+            // 在下,
+            else {
+                // 小车是在轨道上,
+                if (kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvOnPath) {
+                    labelUI.position = Q.Position.RIGHT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.offsetX = LINE_WIDTH;
+                    labelUI.offsetY = 0;
+                }
+                // 小车不在轨道上,
+                else {
+                    labelUI.position = Q.Position.LEFT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.offsetX = 0;
+                    labelUI.offsetY = 0;
+                }
+            }
+        }
+
+        rgvPathRgvNode.addUI(labelUI);
+    }
+
+    /**
+     * 绘制小车:绘制路线:绘制小车和路线的连线:绘制连线上的小车:绘制目的站点编号.
+     *
+     * @param rgv 小车.
+     * @param index 小车序号.
+     * @param rgvPathRgvNode 小车节点.
+     */
+    function drawRgv_DrawPath_DrawRgv_DrawDstTextUI(rgv: StatusRgvVO, index: number, rgvPathRgvNode: Q.Node): void {
+        const labelUI = new Q.LabelUI('' + rgv.destinationStation);
+
+        labelUI.code = '';
+        labelUI.fontSize = CURRENT_RGV_HEIGHT$.value * 0.65;
+        labelUI.position = Q.Position.RIGHT_MIDDLE;
+        labelUI.anchorPosition = Q.Position.RIGHT_MIDDLE;
+        labelUI.alignPosition = Q.Position.CENTER_BOTTOM;
+        labelUI.borderRadius = 0;
+        labelUI.border = LINE_WIDTH;
+        labelUI.borderColor = kgCircularShuttleMonitor.store.$Canvas$Setting$RgvProperty$pathColor(rgv.rgvNo, index);
+        labelUI.color = kgCircularShuttleMonitor.store.$Canvas$Setting$RgvProperty$pathColor(rgv.rgvNo, index);
+        labelUI.backgroundColor = '#ffffff';
+        labelUI.showPointer = false;
+        labelUI.syncSelection = false;
+        labelUI.size = new Q.Size(CURRENT_RGV_WIDTH$.value, CURRENT_RGV_HEIGHT$.value - LINE_WIDTH * 2);
+
+        // 顺时针,
+        if (PATH_DIRECTION$.value === 0) {
+            // 在上,
+            if (rgvPathRgvNode.y < 0) {
+                // 小车是在轨道上,
+                if (kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvOnPath) {
+                    labelUI.position = Q.Position.RIGHT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.offsetX = -(CURRENT_RGV_WIDTH$.value + CURRENT_RGV_WIDTH$.value * 1.5 + LINE_WIDTH * 4);
+
+                    labelUI.rotate = (Math.PI / 180) * 180;
+                }
+                // 小车不在轨道上,
+                else {
+                    labelUI.position = Q.Position.RIGHT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.offsetX = -(CURRENT_RGV_WIDTH$.value * 1.5 + LINE_WIDTH * 3);
+
+                    labelUI.rotate = (Math.PI / 180) * 180;
+                }
+            }
+            // 在下,
+            else {
+                // 小车是在轨道上,
+                if (kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvOnPath) {
+                    labelUI.position = Q.Position.RIGHT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.offsetX = CURRENT_RGV_WIDTH$.value * 1.5 + LINE_WIDTH * 4;
+                    labelUI.offsetY = 0;
+                }
+                // 小车不在轨道上,
+                else {
+                    labelUI.position = Q.Position.LEFT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.offsetX = CURRENT_RGV_WIDTH$.value * 1.5 + LINE_WIDTH * 3;
+                    labelUI.offsetY = 0;
+                }
+            }
+        }
+        // 逆时针,
+        else {
+            // 在上,
+            if (rgvPathRgvNode.y < 0) {
+                // 小车是在轨道上,
+                if (kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvOnPath) {
+                    labelUI.position = Q.Position.RIGHT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.offsetX = -(CURRENT_RGV_WIDTH$.value + CURRENT_RGV_WIDTH$.value * 1.5 + LINE_WIDTH * 4);
+
+                    labelUI.rotate = (Math.PI / 180) * 180;
+                }
+                // 小车不在轨道上,
+                else {
+                    labelUI.position = Q.Position.RIGHT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.offsetX = -(CURRENT_RGV_WIDTH$.value * 1.5 + LINE_WIDTH * 3);
+
+                    labelUI.rotate = (Math.PI / 180) * 180;
+                }
+            }
+            // 在下,
+            else {
+                // 小车是在轨道上,
+                if (kgCircularShuttleMonitor.store.$Canvas$Setting$getIsRgvOnPath) {
+                    labelUI.position = Q.Position.RIGHT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.offsetX = CURRENT_RGV_WIDTH$.value * 1.5 + LINE_WIDTH * 4;
+                    labelUI.offsetY = 0;
+                }
+                // 小车不在轨道上,
+                else {
+                    labelUI.position = Q.Position.LEFT_MIDDLE;
+                    labelUI.anchorPosition = Q.Position.LEFT_MIDDLE;
+
+                    labelUI.offsetX = CURRENT_RGV_WIDTH$.value * 1.5 + LINE_WIDTH * 3;
+                    labelUI.offsetY = 0;
+                }
+            }
+        }
+
+        rgvPathRgvNode.addUI(labelUI);
+    }
+
+    /**
+     * 绘制小车:根据状态获取颜色.
+     *
+     * @param state 小车状态.
+     */
+    function drawRgv_GetColorByState(state: number): string {
+        switch (state) {
+            case 0:
+                return kgCircularShuttleMonitor.store.getProps?.rgvStatusColor?.offline ?? '#7f7f7f';
+            case 1:
+                return kgCircularShuttleMonitor.store.getProps?.rgvStatusColor?.warn ?? '#ff3a3a';
+            case 2:
+                return kgCircularShuttleMonitor.store.getProps?.rgvStatusColor?.manual ?? '#765708';
+            case 3:
+                return kgCircularShuttleMonitor.store.getProps?.rgvStatusColor?.idle ?? '#000000';
+            case 4:
+                return kgCircularShuttleMonitor.store.getProps?.rgvStatusColor?.get ?? '#2ecc27';
+            case 5:
+                return kgCircularShuttleMonitor.store.getProps?.rgvStatusColor?.put ?? '#1890ff';
+            case 6:
+                return kgCircularShuttleMonitor.store.getProps?.rgvStatusColor?.drive ?? '#ffd262';
+
+            default:
+                return '#000000';
+        }
+    }
+
+    /**
+     * 绘制小车:根据状态获取文本颜色.
+     *
+     * @param state 小车状态.
+     */
+    function drawRgv_GetTextColorByState(state: number): string {
+        switch (state) {
+            case 0:
+                return '#000000';
+            case 1:
+                return '#ffffff';
+            case 2:
+                return '#ffffff';
+            case 3:
+                return '#ffffff';
+            case 4:
+                return '#ffffff';
+            case 5:
+                return '#ffffff';
+            case 6:
+                return '#ffffff';
+
+            default:
+                return '#000000';
+        }
+    }
+
+    /**
+     * 绘制小车:根据弧长获取弧度.
+     *
+     * @param arcLength 弧长.
+     */
+    function drawRgv_GetRadianByArcLength(arcLength: number): number {
+        if (arcLength <= 0) {
+            return 0;
+        }
+
+        return arcLength / (PATH_INNER_RADIUS$.value + LINE_WIDTH / 2);
+    }
+
+    /**
+     * 绘制小车:获取节点图形.
+     *
+     * @param x 横坐标.
+     * @param y 纵坐标.
+     * @param rgv 小车.
+     */
+    function drawRgv_GetImage(x: number, y: number, rgv: StatusRgvVO): any {
+        // 顺时针,
+        if (PATH_DIRECTION$.value === 0) {
+            const path = new Q.Path();
+
+            path.moveTo(-CURRENT_RGV_WIDTH$.value / 2, -CURRENT_RGV_HEIGHT$.value / 2);
+            path.lineTo(CURRENT_RGV_WIDTH$.value / 2, -CURRENT_RGV_HEIGHT$.value / 2);
+            path.lineTo(CURRENT_RGV_WIDTH$.value / 2, CURRENT_RGV_HEIGHT$.value / 2);
+            path.lineTo(-CURRENT_RGV_WIDTH$.value / 2, CURRENT_RGV_HEIGHT$.value / 2);
+            path.closePath();
+
+            path.moveTo(CURRENT_RGV_WIDTH$.value / 4, -CURRENT_RGV_HEIGHT$.value / 2);
+            path.lineTo(CURRENT_RGV_WIDTH$.value / 4, CURRENT_RGV_HEIGHT$.value / 2);
+
+            return path;
+        }
+        // 逆时针,
+        else {
+            const path = new Q.Path();
+
+            path.moveTo(-CURRENT_RGV_WIDTH$.value / 2, -CURRENT_RGV_HEIGHT$.value / 2);
+            path.lineTo(CURRENT_RGV_WIDTH$.value / 2, -CURRENT_RGV_HEIGHT$.value / 2);
+            path.lineTo(CURRENT_RGV_WIDTH$.value / 2, CURRENT_RGV_HEIGHT$.value / 2);
+            path.lineTo(-CURRENT_RGV_WIDTH$.value / 2, CURRENT_RGV_HEIGHT$.value / 2);
+            path.closePath();
+
+            path.moveTo(-CURRENT_RGV_WIDTH$.value / 4, -CURRENT_RGV_HEIGHT$.value / 2);
+            path.lineTo(-CURRENT_RGV_WIDTH$.value / 4, CURRENT_RGV_HEIGHT$.value / 2);
+
+            return path;
+        }
+    }
+
+    /**
+     * 绘制小车:绘制路线:绘制小车和路线的连线:绘制连线上的小车:获取节点图形.
+     *
+     * @param x 横坐标.
+     * @param y 纵坐标.
+     * @param rgv 小车.
+     */
+    function drawRgv_DrawPath_DrawRgv_GetImage(x: number, y: number, rgv: StatusRgvVO): any {
+        const width = CURRENT_RGV_WIDTH$.value;
+        const height = CURRENT_RGV_HEIGHT$.value;
+
+        // 顺时针,
+        if (PATH_DIRECTION$.value === 0) {
+            const path = new Q.Path();
+
+            path.moveTo(-width / 2, -height / 2);
+            path.lineTo(width / 2, -height / 2);
+            path.lineTo(width / 2, height / 2);
+            path.lineTo(-width / 2, height / 2);
+            path.closePath();
+
+            return path;
+        }
+        // 逆时针,
+        else {
+            const path = new Q.Path();
+
+            path.moveTo(-width / 2, -height / 2);
+            path.lineTo(width / 2, -height / 2);
+            path.lineTo(width / 2, height / 2);
+            path.lineTo(-width / 2, height / 2);
+            path.closePath();
+
+            return path;
+        }
+    }
+
+    /**
+     * 绘制小车:绘制小车编号背景.
+     *
+     * @param rgv 小车.
+     * @param rgvNode 小车节点.
+     */
+    function drawRgv_DrawTextBackgroundUI(rgv: StatusRgvVO, rgvNode: Q.Node): void {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return;
+        }
+
+        const WIDTH = (CURRENT_RGV_WIDTH$.value / 4) * 1 - LINE_WIDTH + 40;
+        const HEIGHT = CURRENT_RGV_HEIGHT$.value - LINE_WIDTH * 2 + 40;
+
+        const path = new Q.Path();
+
+        path.moveTo(0, 0);
+        path.lineTo(WIDTH, 0);
+        path.lineTo(WIDTH, HEIGHT);
+        path.lineTo(0, HEIGHT);
+        path.closePath();
+
+        const imageUI = new Q.ImageUI(path);
+        imageUI.code = NODE_KEY.RGV__UI__TEXT_BACKGROUND;
+        imageUI.anchorPosition = Q.Position.CENTER_MIDDLE;
+        imageUI.position = Q.Position.CENTER_MIDDLE;
+        imageUI.fillColor = drawRgv_GetColorByState(rgv.state);
+        imageUI.syncSelection = false;
+
+        // 顺时针,
+        if (PATH_DIRECTION$.value === 0) {
+            imageUI.offsetX = (CURRENT_RGV_WIDTH$.value / 8) * 3 - (LINE_WIDTH / 4) * 1;
+        }
+        // 逆时针,
+        else {
+            imageUI.offsetX = -((CURRENT_RGV_WIDTH$.value / 8) * 3 - (LINE_WIDTH / 4) * 1);
+        }
+
+        rgvNode.addUI(imageUI);
+    }
+
+    /**
+     * 绘制小车:绘制小车编号.
+     *
+     * @param rgv 小车.
+     * @param rgvNode 小车节点.
+     */
+    function drawRgv_DrawTextUI(rgv: StatusRgvVO, rgvNode: Q.Node): void {
+        // 不显示小车编号的前缀「SC」,
+        const labelUI = new Q.LabelUI(rgv.rgvNo?.replace('SC', ''));
+
+        labelUI.code = NODE_KEY.RGV__UI__TEXT;
+        labelUI.fontSize = CURRENT_RGV_WIDTH$.value / 4;
+        labelUI.position = Q.Position.CENTER_MIDDLE;
+        labelUI.anchorPosition = Q.Position.CENTER_MIDDLE;
+        labelUI.alignPosition = Q.Position.CENTER_BOTTOM;
+        labelUI.borderRadius = 0;
+        labelUI.showPointer = false;
+        labelUI.color = drawRgv_GetTextColorByState(rgv.state);
+        labelUI.size = new Q.Size(CURRENT_RGV_HEIGHT$.value - LINE_WIDTH, CURRENT_RGV_WIDTH$.value / 4);
+        labelUI.syncSelection = false;
+
+        // 顺时针,
+        if (PATH_DIRECTION$.value === 0) {
+            labelUI.rotate = (Math.PI / 180) * 270;
+            labelUI.offsetX = (CURRENT_RGV_WIDTH$.value / 8) * 3 - (LINE_WIDTH / 4) * 1 + 40;
+        }
+        // 逆时针,
+        else {
+            labelUI.rotate = (Math.PI / 180) * 90;
+            labelUI.offsetX = -((CURRENT_RGV_WIDTH$.value / 8) * 3 - (LINE_WIDTH / 4) * 1 + 40);
+        }
+
+        rgvNode.addUI(labelUI);
+    }
+
+    /**
+     * 绘制小车:绘制托盘.
+     *
+     * @param rgv 小车.
+     * @param rgvNode 小车节点.
+     */
+    function drawRgv_DrawContainerUI(rgv: StatusRgvVO, rgvNode: Q.Node): void {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return;
+        }
+
+        const WIDTH = (CURRENT_RGV_WIDTH$.value / 4) * 3 - LINE_WIDTH * 1.5 - 80;
+        const HEIGHT = CURRENT_RGV_HEIGHT$.value - LINE_WIDTH * 2 - 40;
+
+        const path = new Q.Path();
+
+        path.moveTo(0, 0);
+        path.lineTo(WIDTH, 0);
+        path.lineTo(WIDTH, HEIGHT);
+        path.lineTo(0, HEIGHT);
+        path.closePath();
+
+        const imageUI = new Q.ImageUI(path);
+        imageUI.code = NODE_KEY.RGV__UI__CONTAINER;
+        imageUI.anchorPosition = Q.Position.CENTER_MIDDLE;
+        imageUI.position = Q.Position.CENTER_MIDDLE;
+        imageUI.fillColor = rgv.loadState === 1 ? drawRgv_GetColorByState(rgv.state) : '#ffffff';
+        imageUI.syncSelection = false;
+
+        // 顺时针,
+        if (PATH_DIRECTION$.value === 0) {
+            imageUI.offsetX = -LINE_WIDTH * 2.5;
+        }
+        // 逆时针,
+        else {
+            imageUI.offsetX = LINE_WIDTH * 2.5;
+        }
+
+        rgvNode.addUI(imageUI);
+    }
+
+    /**
+     * 绘制小车:绘制选中时的遮盖效果.
+     *
+     * @param rgv 小车.
+     * @param rgvNode 小车节点.
+     */
+    function drawRgv_DrawSelectUI(rgv: StatusRgvVO, rgvNode: Q.Node): void {
+        if (!kgCircularShuttleMonitor.store.getGraph) {
+            return;
+        }
+
+        const WIDTH = rgv.length ?? 0;
+        const HEIGHT = rgv.width ?? 0;
+
+        const path = new Q.Path();
+
+        path.moveTo(0, 0);
+        path.lineTo(WIDTH, 0);
+        path.lineTo(WIDTH, HEIGHT);
+        path.lineTo(0, HEIGHT);
+        path.closePath();
+
+        const imageUI = new Q.ImageUI(path);
+        imageUI.code = NODE_KEY.RGV__UI__SELECT;
+        imageUI.anchorPosition = Q.Position.CENTER_MIDDLE;
+        imageUI.position = Q.Position.CENTER_MIDDLE;
+        imageUI.syncSelection = false;
+        imageUI.fillColor = isSelectBlinkOn ? '#ffff0075' : '#ffffff00';
+        imageUI.borderColor = isSelectBlinkOn ? '#ffff00' : '#ffffff00';
+        imageUI.border = LINE_WIDTH;
+        imageUI.visible = !!kgCircularShuttleMonitor.store.$Canvas$getCurrentRgvList.find((i) => i.rgvNo === rgv.rgvNo);
+
+        rgvNode.addUI(imageUI);
+    }
+
+    /**
+     * 删除所有选中效果.
+     */
+    function clearSelectUI() {
+        const stationNodeList = (kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.filter((i) => i.properties.key?.startsWith(NODE_KEY.STATION) && !!getNodeUiByKey<Q.ImageUI>(i, NODE_KEY.STATION_UI_SELECT)) ?? []) as Array<Q.Node>;
+        for (const stationNode of stationNodeList) {
+            stationNode.removeUI(getNodeUiByKey<Q.ImageUI>(stationNode, NODE_KEY.STATION_UI_SELECT).ui);
+        }
+
+        const rgvNodeList = (kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.filter((i) => i.properties.key?.startsWith(NODE_KEY.RGV) && !!getNodeUiByKey<Q.ImageUI>(i, NODE_KEY.RGV__UI__SELECT)) ?? []) as Array<Q.Node>;
+        for (const rgvNode of rgvNodeList) {
+            rgvNode.removeUI(getNodeUiByKey<Q.ImageUI>(rgvNode, NODE_KEY.RGV__UI__SELECT).ui);
+        }
+    }
+
+    /**
+     * 获取节点下的界面元素.
+     *
+     * @param node 节点.
+     * @param key 界面元素编号.
+     */
+    function getNodeUiByKey<T extends Q.BaseUI>(node: Q.Node, key: string): { ui: T } {
+        return (node?.bindingUIs?.toDatas?.()?.find((i) => i.ui.code === key) ?? { ui: {} as Q.BaseUI }) as { ui: T };
+    }
+
+    /**
+     * 闪烁选中.
+     */
+    function blinkSelect() {
+        try {
+            if (!kgCircularShuttleMonitor.store.$Canvas$Setting$getIsSelectBlinkOn) {
+                isSelectBlinkOn = true;
+            } else {
+                isSelectBlinkOn = !isSelectBlinkOn;
+            }
+
+            if (selectBlinkDashOffset <= Number.MIN_SAFE_INTEGER) {
+                selectBlinkDashOffset = 0;
+            }
+
+            selectBlinkDashOffset -= 1;
+
+            const stationNodeList = (kgCircularShuttleMonitor.store.getGraph?.graphModel?.datas?.filter((i) => i.properties.key?.startsWith(NODE_KEY.STATION) && !!getNodeUiByKey<Q.ImageUI>(i, NODE_KEY.STATION_UI_SELECT)) ??
+                []) as Array<Q.Node>;
+            for (const stationNode of stationNodeList) {
+                const selectUI = getNodeUiByKey<Q.ImageUI>(stationNode, NODE_KEY.STATION_UI_SELECT);
+                selectUI.ui.fillColor = isSelectBlinkOn ? '#ffff0075' : '#ffffff00';
+                selectUI.ui.borderColor = isSelectBlinkOn ? '#ffff00' : '#ffffff00';
+                kgCircularShuttleMonitor.graph!.invalidateElement(stationNode);
+            }
+
+            const rgvNodeList = (kgCircularShuttleMonitor.store.getGraph?.graphModel?.datas?.filter((i) => i.properties.key?.startsWith(NODE_KEY.RGV) && !!getNodeUiByKey<Q.ImageUI>(i, NODE_KEY.RGV__UI__SELECT)) ?? []) as Array<Q.Node>;
+            for (const rgvNode of rgvNodeList) {
+                const selectUI = getNodeUiByKey<Q.ImageUI>(rgvNode, NODE_KEY.RGV__UI__SELECT);
+                selectUI.ui.fillColor = isSelectBlinkOn ? '#ffff0075' : '#ffffff00';
+                selectUI.ui.borderColor = isSelectBlinkOn ? '#ffff00' : '#ffffff00';
+                kgCircularShuttleMonitor.graph!.invalidateElement(rgvNode);
+            }
+        } catch (e: any) {
+            ____ERROR____(`KgCircularShuttleMonitor | 闪烁选中 | ${e.message}`);
+        }
+
+        selectBlinkTimer = window.setTimeout(() => {
+            blinkSelect();
+        }, kgCircularShuttleMonitor.store.$Canvas$Setting$getSelectBlinkInterval);
+    }
+    //----------------------------------------------------------------------------------------------------
+    //endregion
+
+    if (selectBlinkTimer && selectBlinkTimer !== -1) {
+        clearTimeout(selectBlinkTimer);
+    }
+
+    selectBlinkTimer = window.setTimeout(() => {
+        blinkSelect();
+    }, kgCircularShuttleMonitor.store.$Canvas$Setting$getSelectBlinkInterval);
+
+    return {
+        draw: (param?: IUseDrawDrawParam) => {
+            try {
+                if (!kgCircularShuttleMonitor.store.getGraph) {
+                    return;
+                }
+
+                // 上次绘制尚未完成, 取消本次绘制,
+                if (isDrawing) {
+                    return;
+                }
+
+                isDrawing = true;
+
+                const _graph = kgCircularShuttleMonitor.store.getGraph!;
+
+                // 绘制轨道, 绘制站点,
+                if (param?.type === 'MAP') {
+                    // 绘制轨道时, 需要清空画布, 重新绘制所有内容,
+                    _graph.clear();
+
+                    const canvasMapData = kgCircularShuttleMonitor.$Canvas$popMapData();
+
+                    PATH_LENGTH$.value = 0;
+                    PATH_WIDTH$.value = 0;
+                    PATH_HEIGHT$.value = 0;
+                    PATH_LINE_WIDTH$.value = 0;
+
+                    PATH_INNER_RADIUS$.value = 0;
+                    PATH_OUTER_RADIUS$.value = 0;
+
+                    kgCircularShuttleMonitor.store.$Canvas$setCurrentStationList([]);
+                    kgCircularShuttleMonitor.store.$Canvas$setCurrentRgvList([]);
+
+                    drawPath(canvasMapData);
+                    drawStationList(canvasMapData);
+                }
+                // 绘制小车, 更新站点,
+                else {
+                    const canvasStatusData = kgCircularShuttleMonitor.$Canvas$popStatusData();
+                    updateStationList(canvasStatusData);
+                    drawAisleList();
+                    drawRgvList(canvasStatusData);
+                }
+
+                // 默认纵览比例,
+                if (param?.isZoomToOverview ?? false) {
+                    setTimeout(() => {
+                        _graph.zoomToOverview(false);
+                    }, 200);
+                }
+
+                // 禁用缩放以及拖拽,
+                if (kgCircularShuttleMonitor.store.getProps?.isScalable === false) {
+                    _graph.zoomToOverview(false);
+
+                    _graph.callLater(
+                        () => {
+                            let x = _graph.bounds.x;
+                            let y = _graph.bounds.y;
+                            let width = _graph.bounds.width;
+                            let height = _graph.bounds.height;
+
+                            // 尚未绘制图形, 比如图形数据为空,
+                            if (width <= 0 || height <= 0) {
+                                return;
+                            }
+
+                            // 宽度大于高度
+                            if (_graph.viewportBounds.width > _graph.viewportBounds.height) {
+                                width = (height * _graph.viewportBounds.width) / _graph.viewportBounds.height;
+                                x = -width / 2;
+                            }
+                            // 宽度小于高度
+                            else {
+                                height = (width * _graph.viewportBounds.height) / _graph.viewportBounds.width;
+                                y = -height / 2;
+                            }
+
+                            // 限制视窗范围
+                            _graph.limitedBounds = new Q.Rect(x, y, width, height);
+                        },
+                        undefined,
+                        100,
+                    );
+                }
+
+                isDrawing = false;
+            } catch (e) {
+                isDrawing = false;
+                throw e;
+            } finally {
+            }
+        },
+
+        onSelectChange: () => {
+            clearSelectUI();
+
+            for (let rgv of kgCircularShuttleMonitor.store.$Canvas$getCurrentRgvList) {
+                const rgvNode = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.find((i) => i.properties.key?.startsWith(NODE_KEY.RGV) && (i.properties.data as StatusRgvVO)?.rgvNo === rgv.rgvNo) as Q.Node;
+
+                if (rgvNode) {
+                    drawRgv_DrawSelectUI(rgv, rgvNode);
+                }
+            }
+
+            for (let station of kgCircularShuttleMonitor.store.$Canvas$getCurrentStationList) {
+                const stationNode = kgCircularShuttleMonitor.store.getGraph!.graphModel.datas.find((i) => i.properties.key?.startsWith(NODE_KEY.STATION) && (i.properties.data as MapStationVO)?.conveyorNo === station.conveyorNo) as Q.Node;
+
+                if (stationNode) {
+                    const selectUI = drawStation_DrawSelectUI(station);
+                    if (selectUI) {
+                        stationNode.addUI(selectUI);
+                    }
+                }
+            }
+        },
+    };
+}
+
+//----------------------------------------------------------------------------------------------------
+//endregion