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

package/component/KgCircularShuttleMonitor/KgCircularShuttleMonitor.store.tsx

@@ -0,0 +1,744 @@
+import { Q } from '@thymine/xunee';
+import { cloneDeep, forEach, without } from 'lodash-es';
+import { defineStore } from 'pinia';
+import { toRaw } from 'vue';
+import { IKgStoreDefinition } from '../../model';
+import { useDraw } from './KgCircularShuttleMonitor.Canvas.service';
+import { MapDTO, MapStationVO, PATH_COLOR_LIST, StatusDTO, StatusRgvVO, TAB_KEY } from './KgCircularShuttleMonitor.model';
+
+export type IKgCircularShuttleMonitorProps = {
+    /**
+     * 接口地址.
+     */
+    api?: {
+        /**
+         * 地图数据.
+         *
+         * @default /apigateway/wasserver/api/v1/CircleRgvMap/GetMap
+         */
+        GetMap?: string;
+
+        /**
+         * 小车信息汇总.
+         *
+         * @default /apigateway/circle-rgv-system/getRgvStatus
+         */
+        GetRgvStatus?: string;
+
+        /**
+         * 任务信息汇总.
+         *
+         * @default /apigateway/circle-rgv-system/getRgvTasks
+         */
+        GetRgvTasks?: string;
+
+        /**
+         * 小车状态信息.
+         *
+         * @default /apigateway/wasserver/api/v1/CircleRgvState/GetSingleRgvState
+         */
+        GetSingleRgvState?: string;
+
+        /**
+         * 小车任务信息.
+         *
+         * @default /apigateway/wasserver/api/v1/CircleRgvState/GetSingleRgvTask
+         */
+        GetSingleRgvTask?: string;
+
+        /**
+         * 状态数据.
+         *
+         * @default /apigateway/wasserver/api/v1/CircleRgvState/GetState
+         */
+        GetState?: string;
+
+        /**
+         * 创建环形穿梭车任务.
+         *
+         * @default /apigateway/wasserver/api/v1/CircleRgvState/ManualCreateWorkTask
+         */
+        ManualCreateWorkTask?: string;
+
+        /**
+         * 日志.
+         *
+         * @default /kengic-boot/wcs/wmsApi/ReceiveMoveTask
+         */
+        ReceiveMoveTask?: string;
+
+        /**
+         * 小车上线下线.
+         *
+         * @default /apigateway/wasserver/api/v1/CircleRgvState/RgvOnlineOrOffline
+         */
+        RgvOnlineOrOffline?: string;
+
+        /**
+         * 任务操作.
+         *
+         * @default /apigateway/wasserver/api/v1/CircleRgvState/RgvTaskOperate
+         */
+        RgvTaskOperate?: string;
+    };
+
+    /**
+     * 页面底部默认高度.
+     *
+     * @default 639.
+     */
+    bottomDefaultHeight?: number;
+
+    /**
+     * 是否支持缩放以及拖拽.
+     *
+     * @default true
+     */
+    isScalable?: boolean;
+
+    /**
+     * 请求状态数据的时间间隔.
+     *
+     * @default 1000 毫秒.
+     */
+    requestStatusInterval?: number;
+
+    /**
+     * 小车刻度误差.
+     *
+     * @default 10.
+     */
+    rgvCoordinateDeviation?: number;
+
+    /**
+     * 小车不同状态时的颜色.
+     */
+    rgvStatusColor?: {
+        /**
+         * 驱赶.
+         *
+         * @default '#ffd262'
+         */
+        drive: string;
+        /**
+         * 取货.
+         *
+         * @default #2ecc27
+         */
+        get: string;
+        /**
+         * 空闲.
+         *
+         * @default '#000000'
+         */
+        idle: string;
+        /**
+         * 手动.
+         *
+         * @default '#765708'
+         */
+        manual: string;
+        /**
+         * 离线.
+         *
+         * @default '#7f7f7f'
+         */
+        offline: string;
+        /**
+         * 放货.
+         *
+         * @default '#1890ff'
+         */
+        put: string;
+        /**
+         * 报警.
+         *
+         * @default '#ff3a3a'
+         */
+        warn: string;
+    };
+
+    /**
+     * 绘制时的线宽.
+     *
+     * @default 100.
+     */
+    strokeLineWidth?: number;
+
+    /**
+     * 更新状态数据的时间间隔.
+     *
+     * @default 25 毫秒.
+     */
+    updateStatusInterval?: number;
+};
+
+export interface IKgCircularShuttleMonitorStoreState {
+    /**
+     * 库区下拉列表--是否正在请求数据.
+     */
+    $AreaSelect$isRequesting$: boolean;
+
+    /**
+     * 库区下拉列表--当前选中的值.
+     */
+    $AreaSelect$value: string | null;
+
+    /**
+     * 画布--设置--当前展开面板.
+     */
+    $Canvas$Setting$CollapseActiveKey: Array<string>;
+
+    /**
+     * 画布--设置--是否绘制巷道.
+     */
+    $Canvas$Setting$IsAisleVisible: boolean;
+
+    /**
+     * 画布--设置--是否显示.
+     */
+    $Canvas$Setting$IsLegendVisible: boolean;
+
+    /**
+     * 画布--设置--是否绘制小车路线--小车在路线上.
+     */
+    $Canvas$Setting$IsRgvOnPath: boolean;
+
+    /**
+     * 画布--设置--是否绘制小车路线--是否显示垂直连线.
+     */
+    $Canvas$Setting$IsRgvPathLineVisible: boolean;
+
+    /**
+     * 画布--设置--是否绘制小车路线.
+     */
+    $Canvas$Setting$IsRgvPathVisible: boolean;
+
+    /**
+     * 画布--设置--选中是否闪烁.
+     */
+    $Canvas$Setting$IsSelectBlinkOn: boolean;
+
+    /**
+     * 画布--设置--小车间距.
+     */
+    $Canvas$Setting$RgvMarginY: number;
+
+    /**
+     * <p>画布--设置--小车属性.</p>
+     * <ul>
+     *     <li>key:   小车编号</li>
+     *     <li>value: 小车属性</li>
+     * </ul>
+     */
+    $Canvas$Setting$RgvProperty: Record<
+        string,
+        {
+            /**
+             * 路径颜色.
+             */
+            pathColor: string;
+        }
+    >;
+
+    /**
+     * 画布--设置--闪烁间隔毫秒.
+     */
+    $Canvas$Setting$SelectBlinkInterval: number;
+
+    /**
+     * 画布--当前选中的小车列表.
+     */
+    $Canvas$currentRgvList: Array<StatusRgvVO>;
+
+    /**
+     * 画布--当前选中的站点列表.
+     */
+    $Canvas$currentStationList: Array<MapStationVO>;
+
+    /**
+     * 画布--最新地图数据.
+     */
+    $Canvas$mapData: MapDTO | null;
+
+    /**
+     * 画布--地图数据列表. 等待被绘制的地图数据列表, 每次绘制都从队首取一个数据进行绘制, 当队列为空时暂停绘制.
+     */
+    $Canvas$mapDataList: Array<MapDTO>;
+
+    /**
+     * 画布--是否正在请求地图数据.
+     */
+    $Canvas$mapIsRequesting: boolean;
+
+    /**
+     * 画布--最新状态数据.
+     */
+    $Canvas$statusData: StatusDTO | null;
+
+    /**
+     * 画布--状态数据列表. 等待被绘制的状态数据列表, 每次绘制都从队首取一个数据进行绘制, 当队列为空时暂停绘制.
+     */
+    $Canvas$statusDataList: Array<StatusDTO>;
+
+    /**
+     * 画布--是否正在请求状态数据.
+     */
+    $Canvas$statusIsRequesting: boolean;
+
+    /**
+     * 设置--是否显示.
+     */
+    $Setting$isVisible: boolean;
+
+    /**
+     * 标签页--当前标签页.
+     */
+    $Tab$activeKey: string | number;
+
+    /**
+     * 标签页--小车列表.
+     */
+    $Tab$rgvList: Array<StatusRgvVO>;
+
+    /**
+     * 画布对象.
+     */
+    graph: Q.Graph | null;
+
+    /**
+     * 参数.
+     */
+    props: IKgCircularShuttleMonitorProps | null;
+}
+
+export interface IKgCircularShuttleMonitorStoreGetters {
+    $AreaSelect$getIsRequesting: boolean;
+
+    $AreaSelect$getValue: string | null;
+
+    /**
+     * 获取小车路径颜色.
+     *
+     * @param rgvNo 小车编号.
+     * @param index 小车序号.
+     */
+    $Canvas$Setting$RgvProperty$pathColor: (rgvNo?: string | null | undefined, index?: number | null | undefined) => string;
+    $Canvas$Setting$getCollapseActiveKey: Array<string>;
+    $Canvas$Setting$getIsAisleVisible: boolean;
+    $Canvas$Setting$getIsLegendVisible: boolean;
+    $Canvas$Setting$getIsRgvOnPath: boolean;
+    $Canvas$Setting$getIsRgvPathLineVisible: boolean;
+    $Canvas$Setting$getIsRgvPathVisible: boolean;
+    $Canvas$Setting$getIsSelectBlinkOn: boolean;
+    $Canvas$Setting$getRgvMarginY: number;
+    $Canvas$Setting$getSelectBlinkInterval: number;
+    $Canvas$getCurrentRgvList: Array<StatusRgvVO>;
+    $Canvas$getCurrentStationList: Array<MapStationVO>;
+    $Canvas$getMapData: MapDTO | null;
+    $Canvas$getMapDataList: Array<MapDTO>;
+    $Canvas$getMapIsRequesting: boolean;
+
+    $Canvas$getStatusData: StatusDTO | null;
+
+    $Canvas$getStatusDataList: Array<StatusDTO>;
+    $Canvas$getStatusIsRequesting: boolean;
+
+    /**
+     * 离线区--离线小车列表.
+     */
+    $Offline$getRgvList: Array<StatusRgvVO>;
+
+    $Setting$getIsVisible: boolean;
+    $Tab$getActiveKey: string | number;
+    $Tab$getRgvList: Array<StatusRgvVO>;
+
+    getGraph: Q.Graph | null;
+    getProps: IKgCircularShuttleMonitorProps | null;
+}
+
+export interface IKgCircularShuttleMonitorStoreActions {
+    $AreaSelect$setIsRequesting(value: boolean | null | undefined): void;
+
+    $AreaSelect$setValue(value: string | null | undefined): void;
+
+    $Canvas$Setting$setCollapseActiveKey(value: Array<string> | null | undefined): void;
+    $Canvas$Setting$setIsAisleVisible(value: boolean | null | undefined): void;
+    $Canvas$Setting$setIsLegendVisible(value: boolean | null | undefined): void;
+    $Canvas$Setting$setIsRgvOnPath(value: boolean | null | undefined): void;
+    $Canvas$Setting$setIsRgvPathLineVisible(value: boolean | null | undefined): void;
+    $Canvas$Setting$setIsRgvPathVisible(value: boolean | null | undefined): void;
+    $Canvas$Setting$setIsSelectBlinkOn(value: boolean | null | undefined): void;
+    $Canvas$Setting$setRgvMarginY(value: number | null | undefined): void;
+
+    $Canvas$Setting$setSelectBlinkInterval(value: number | null | undefined): void;
+
+    /**
+     * 画布--往地图数据列尾插入一个数据.
+     *
+     * @param value 要插入的数据.
+     */
+    $Canvas$pushMapDataList(value: MapDTO | null | undefined): void;
+
+    /**
+     * 画布--往状态数据列尾插入一个数据.
+     *
+     * @param value 要插入的数据.
+     */
+    $Canvas$pushStatusDataList(value: StatusDTO | null | undefined): void;
+
+    $Canvas$setCurrentRgvList(value: Array<StatusRgvVO> | null | undefined): void;
+    $Canvas$setCurrentStationList(value: Array<MapStationVO> | null | undefined): void;
+    $Canvas$setMapData(value: MapDTO | null | undefined): void;
+    $Canvas$setMapDataList(value: Array<MapDTO> | null | undefined): void;
+
+    $Canvas$setMapIsRequesting(value: boolean | null | undefined): void;
+
+    $Canvas$setStatusData(value: StatusDTO | null | undefined): void;
+    $Canvas$setStatusDataList(value: Array<StatusDTO> | null | undefined): void;
+    $Canvas$setStatusIsRequesting(value: boolean | null | undefined): void;
+    $Setting$setIsVisible(value: boolean | null | undefined): void;
+
+    /**
+     * 标签页--从标签页列表中删除某个小车.
+     *
+     * @param value 要删除的小车.
+     */
+    $Tab$deleteRgv(value: StatusRgvVO | null | undefined): void;
+
+    /**
+     * <p>标签页--插入小车列表.</p>
+     * <p>如果某个小车已经存在标签页列表中, 则不插入.</p>
+     * <p>插入完成后, 将新插入的小车列表中的第一个小车的标签页激活.</p>
+     *
+     * @param value 小车列表.
+     */
+    $Tab$insertRgvList(value: Array<StatusRgvVO> | null | undefined): void;
+    $Tab$setActiveKey(value: string | number | null | undefined): void;
+    $Tab$setRgvList(value: Array<StatusRgvVO> | null | undefined): void;
+    set$graph(value: Q.Graph | null | undefined): void;
+    setProps(value: IKgCircularShuttleMonitorProps | null | undefined): void;
+}
+
+// @ts-ignore
+export const useKgCircularShuttleMonitorStore: IKgStoreDefinition<IKgCircularShuttleMonitorStoreGetters, IKgCircularShuttleMonitorStoreActions> = defineStore('KgCircularShuttleMonitor', {
+    actions: {
+        $AreaSelect$setIsRequesting(value: boolean | null | undefined): void {
+            this.$AreaSelect$isRequesting$ = value ?? false;
+        },
+
+        $AreaSelect$setValue(value: string | null | undefined) {
+            this.$AreaSelect$value = value ?? null;
+        },
+
+        $Canvas$Setting$setCollapseActiveKey(value: Array<string> | null | undefined) {
+            this.$Canvas$Setting$CollapseActiveKey = value ?? [];
+        },
+
+        $Canvas$Setting$setIsAisleVisible(value: boolean | null | undefined) {
+            this.$Canvas$Setting$IsAisleVisible = value ?? false;
+        },
+
+        $Canvas$Setting$setIsLegendVisible(value: boolean | null | undefined): void {
+            this.$Canvas$Setting$IsLegendVisible = value ?? false;
+        },
+
+        $Canvas$Setting$setIsRgvOnPath(value: boolean | null | undefined) {
+            this.$Canvas$Setting$IsRgvOnPath = value ?? false;
+        },
+
+        $Canvas$Setting$setIsRgvPathLineVisible(value: boolean | null | undefined) {
+            this.$Canvas$Setting$IsRgvPathLineVisible = value ?? false;
+        },
+
+        $Canvas$Setting$setIsRgvPathVisible(value: boolean | null | undefined) {
+            this.$Canvas$Setting$IsRgvPathVisible = value ?? false;
+        },
+
+        $Canvas$Setting$setIsSelectBlinkOn(value: boolean | null | undefined) {
+            this.$Canvas$Setting$IsSelectBlinkOn = value ?? false;
+        },
+
+        $Canvas$Setting$setRgvMarginY(value: number | null | undefined) {
+            this.$Canvas$Setting$RgvMarginY = value ?? 40;
+        },
+
+        $Canvas$Setting$setSelectBlinkInterval(value: number | null | undefined) {
+            this.$Canvas$Setting$SelectBlinkInterval = value ?? 250;
+        },
+
+        $Canvas$pushMapDataList(value: MapDTO | null | undefined): void {
+            if (value) {
+                this.$Canvas$mapDataList.push(value);
+            }
+        },
+
+        $Canvas$pushStatusDataList(value: StatusDTO | null | undefined) {
+            if (value) {
+                this.$Canvas$statusDataList.push(value);
+            }
+        },
+
+        $Canvas$setCurrentRgvList(value: Array<StatusRgvVO> | null | undefined): void {
+            this.$Canvas$currentRgvList = toRaw(value) ?? [];
+        },
+
+        $Canvas$setCurrentStationList(value: Array<MapStationVO> | null | undefined): void {
+            this.$Canvas$currentStationList = toRaw(value) ?? [];
+        },
+
+        $Canvas$setMapData(value: MapDTO | null | undefined): void {
+            this.$Canvas$mapData = value ?? null;
+        },
+
+        $Canvas$setMapDataList(value: Array<MapDTO> | null | undefined): void {
+            this.$Canvas$mapDataList = value ?? [];
+        },
+
+        $Canvas$setMapIsRequesting(value: boolean | null | undefined): void {
+            this.$Canvas$mapIsRequesting = value ?? false;
+        },
+
+        $Canvas$setStatusData(value: StatusDTO | null | undefined): void {
+            this.$Canvas$statusData = value ?? null;
+        },
+
+        $Canvas$setStatusDataList(value: Array<StatusDTO> | null | undefined): void {
+            this.$Canvas$statusDataList = value ?? [];
+        },
+
+        $Canvas$setStatusIsRequesting(value: boolean | null | undefined): void {
+            this.$Canvas$statusIsRequesting = value ?? false;
+        },
+
+        $Setting$setIsVisible(value: boolean | null | undefined): void {
+            this.$Setting$isVisible = value ?? false;
+        },
+
+        $Tab$deleteRgv(value: StatusRgvVO | null | undefined): void {
+            if (value) {
+                // 删除小车的标签页,
+                const rgv = this.$Tab$rgvList.find((i) => i.rgvNo === value.rgvNo);
+                if (rgv) {
+                    this.$Tab$rgvList = without(this.$Tab$rgvList, rgv);
+                }
+
+                // 如果删除的是当前打开的小车的标签页, 则重新打开第一个标签页(小车信息汇总), 并且清空画布中选中的小车和站点,
+                if (this.$Tab$activeKey === value.rgvNo) {
+                    this.$Tab$setActiveKey(TAB_KEY.RGV_SUMMARY);
+
+                    const useDrawHook = useDraw();
+                    this.$Canvas$setCurrentStationList([]);
+                    this.$Canvas$setCurrentRgvList([]);
+                    useDrawHook.onSelectChange();
+                }
+            }
+        },
+
+        $Tab$insertRgvList(value: Array<StatusRgvVO> | null | undefined): void {
+            if (value && value.length > 0) {
+                for (let rgv of value) {
+                    if (!this.$Tab$rgvList.find((i) => i.rgvNo === rgv.rgvNo)) {
+                        this.$Tab$rgvList = [...this.$Tab$rgvList, cloneDeep(rgv)];
+                    }
+                }
+
+                this.$Tab$setActiveKey(value[0].rgvNo);
+            } else {
+                if (this.$Tab$activeKey !== TAB_KEY.RGV_SUMMARY && this.$Tab$activeKey !== TAB_KEY.TASK_SUMMARY && this.$Tab$activeKey !== TAB_KEY.LOG) {
+                    this.$Tab$setActiveKey(TAB_KEY.RGV_SUMMARY);
+                }
+            }
+        },
+
+        $Tab$setActiveKey(value: string | number | null | undefined): void {
+            this.$Tab$activeKey = value ?? TAB_KEY.RGV_SUMMARY;
+        },
+
+        $Tab$setRgvList(value: Array<StatusRgvVO> | null | undefined): void {
+            this.$Tab$rgvList = toRaw(value) ?? [];
+        },
+
+        set$graph(value: Q.Graph | null | undefined): void {
+            this.graph = value ?? null;
+        },
+
+        setProps(value: IKgCircularShuttleMonitorProps | null | undefined): void {
+            this.props = value ?? null;
+        },
+    },
+    getters: {
+        $AreaSelect$getIsRequesting(): boolean {
+            return this.$AreaSelect$isRequesting$ ?? false;
+        },
+
+        $AreaSelect$getValue(): string | null {
+            return this.$AreaSelect$value ?? null;
+        },
+
+        $Canvas$Setting$RgvProperty$pathColor(): (rgvNo?: string | null | undefined, index?: number | null | undefined) => string {
+            return (rgvNo?: string | null | undefined, index?: number | null | undefined) => {
+                if (!rgvNo) {
+                    return '#000000';
+                }
+
+                if (!index) {
+                    index = 0;
+                }
+
+                if (index > PATH_COLOR_LIST.length - 1) {
+                    index = index % (PATH_COLOR_LIST.length - 1);
+                }
+
+                // 根据序号计算出的期望颜色,
+                const color = PATH_COLOR_LIST[index];
+
+                // 如果小车路径颜色有值, 但是不是期望颜色, 表示小车序号有变动, 需要重新计算所有小车的路径颜色,
+                if (this.$Canvas$Setting$RgvProperty[rgvNo]?.pathColor && this.$Canvas$Setting$RgvProperty[rgvNo].pathColor !== color) {
+                    forEach(this.$Canvas$Setting$RgvProperty, (rgvProperty) => {
+                        rgvProperty.pathColor = '';
+                    });
+                }
+
+                if (!this.$Canvas$Setting$RgvProperty[rgvNo]) {
+                    this.$Canvas$Setting$RgvProperty[rgvNo] = { pathColor: color };
+                } else if (!this.$Canvas$Setting$RgvProperty[rgvNo].pathColor) {
+                    this.$Canvas$Setting$RgvProperty[rgvNo].pathColor = color;
+                }
+
+                return this.$Canvas$Setting$RgvProperty[rgvNo].pathColor;
+            };
+        },
+
+        $Canvas$Setting$getCollapseActiveKey(): Array<string> {
+            return this.$Canvas$Setting$CollapseActiveKey;
+        },
+
+        $Canvas$Setting$getIsAisleVisible(): boolean {
+            return this.$Canvas$Setting$IsAisleVisible;
+        },
+
+        $Canvas$Setting$getIsLegendVisible(): boolean {
+            return this.$Canvas$Setting$IsLegendVisible ?? false;
+        },
+
+        $Canvas$Setting$getIsRgvOnPath(): boolean {
+            return this.$Canvas$Setting$IsRgvOnPath;
+        },
+
+        $Canvas$Setting$getIsRgvPathLineVisible(): boolean {
+            return this.$Canvas$Setting$IsRgvPathLineVisible;
+        },
+
+        $Canvas$Setting$getIsRgvPathVisible(): boolean {
+            return this.$Canvas$Setting$IsRgvPathVisible;
+        },
+
+        $Canvas$Setting$getIsSelectBlinkOn(): boolean {
+            return this.$Canvas$Setting$IsSelectBlinkOn;
+        },
+
+        $Canvas$Setting$getRgvMarginY(): number {
+            return this.$Canvas$Setting$RgvMarginY;
+        },
+
+        $Canvas$Setting$getSelectBlinkInterval(): number {
+            return this.$Canvas$Setting$SelectBlinkInterval;
+        },
+
+        $Canvas$getCurrentRgvList(): Array<StatusRgvVO> {
+            return this.$Canvas$currentRgvList;
+        },
+
+        $Canvas$getCurrentStationList(): Array<MapStationVO> {
+            return this.$Canvas$currentStationList;
+        },
+
+        $Canvas$getMapData(): MapDTO | null {
+            return this.$Canvas$mapData ?? null;
+        },
+
+        $Canvas$getMapDataList(): Array<MapDTO> | null {
+            return this.$Canvas$mapDataList ?? null;
+        },
+
+        $Canvas$getMapIsRequesting(): boolean {
+            return this.$Canvas$mapIsRequesting ?? false;
+        },
+
+        $Canvas$getStatusData(): StatusDTO | null {
+            return this.$Canvas$statusData;
+        },
+
+        $Canvas$getStatusDataList(): Array<StatusDTO> {
+            return this.$Canvas$statusDataList ?? null;
+        },
+
+        $Canvas$getStatusIsRequesting(): boolean {
+            return this.$Canvas$statusIsRequesting ?? false;
+        },
+
+        $Offline$getRgvList(): Array<StatusRgvVO> {
+            return this.$Canvas$statusData?.rgvState?.filter((i) => i.state === 0) ?? [];
+        },
+
+        $Setting$getIsVisible(): boolean {
+            return this.$Setting$isVisible ?? false;
+        },
+
+        $Tab$getActiveKey(): string | number {
+            return this.$Tab$activeKey ?? TAB_KEY.RGV_SUMMARY;
+        },
+
+        $Tab$getRgvList(): Array<StatusRgvVO> {
+            return this.$Tab$rgvList ?? [];
+        },
+
+        getGraph(): Q.Graph | null {
+            return this.graph ?? null;
+        },
+
+        getProps(): IKgCircularShuttleMonitorProps | null {
+            return this.props ?? null;
+        },
+    },
+    state: (): IKgCircularShuttleMonitorStoreState => ({
+        $AreaSelect$isRequesting$: false,
+        $AreaSelect$value: null,
+        $Canvas$Setting$CollapseActiveKey: ['01', '02', '03', '04', '05', '06', '07', '08', '09'],
+        $Canvas$Setting$IsAisleVisible: true,
+        $Canvas$Setting$IsLegendVisible: true,
+        $Canvas$Setting$IsRgvOnPath: false,
+        $Canvas$Setting$IsRgvPathLineVisible: true,
+        $Canvas$Setting$IsRgvPathVisible: false,
+        $Canvas$Setting$IsSelectBlinkOn: true,
+        $Canvas$Setting$RgvMarginY: 100,
+        $Canvas$Setting$RgvProperty: {},
+        $Canvas$Setting$SelectBlinkInterval: 250,
+        $Canvas$currentRgvList: [],
+        $Canvas$currentStationList: [],
+        $Canvas$mapData: null,
+        $Canvas$mapDataList: [],
+        $Canvas$mapIsRequesting: false,
+        $Canvas$statusData: null,
+        $Canvas$statusDataList: [],
+        $Canvas$statusIsRequesting: false,
+        $Setting$isVisible: false,
+        $Tab$activeKey: TAB_KEY.RGV_SUMMARY,
+        $Tab$rgvList: [],
+        graph: null,
+        props: {
+            api: {},
+            isScalable: true,
+            rgvStatusColor: {
+                drive: '#ffd262',
+                get: '#2ecc27',
+                idle: '#000000',
+                manual: '#765708',
+                offline: '#7f7f7f',
+                put: '#1890ff',
+                warn: '#ff3a3a',
+            },
+        },
+    }),
+});