rt-sim-training-client/src/jmapNew/shape/Station/index.js

/*
*	车站
*/
import Group from 'zrender/src/container/Group';
import ETextName from '../element/ETextName';
import EControl from '../element/EControl';
import EMouse from './EMouse';
import ESingleControl from './ESingleControl';
import EArrow from './EArrow';
import { arrow } from '../utils/ShapePoints';
import Rect from 'zrender/src/graphic/shape/Rect';
import BoundingRect from 'zrender/src/core/BoundingRect';
// import {isShowThePrdType} from '../../utils/handlePath';
import Text from 'zrender/src/graphic/Text';
import store from '@/store/index_APP_TARGET';
import Vue from 'vue';

export default class Station extends Group {
    constructor(model, style) {
        super();
        this._code = model.code;
        this._type = model._type;
        this.zlevel = model.zlevel;
        this.z = 40;
        this.model = model;
        this.style = style;
        this.isShowShape = true;
        this.create();
        this.createTurnBack(); // 创建按图折返
        this.createControlMode();
        this.setState(model);
        this.checkIsDrawMap();
    }

    create() {
        const model = this.model;
        const style = this.style;

        if (model.visible) {
            // 公里标名称是否显示
            this.stationText = new ETextName({
                zlevel: this.zlevel,
                z: this.z,
                x: model.position.x,
                y: model.position.y,
                fontWeight: model.fontWeight,
                fontSize: model.nameFont || 18,
                fontFamily: style.fontFamily,
                text: model.number ? model.number + model.name : model.name,
                textAlign: 'middle',
                textVerticalAlign: 'top',
                textFill: model.nameFontColor
            });
            this.add(this.stationText);
            if (style.Station.text.borderShow) {
                this.stationText.setStyle('textPadding', [2, 6]);
                this.stationText.setStyle('textBorderColor', model.nameFontColor);
                this.stationText.setStyle('textBorderWidth', 1);
            }
            const path = window.location.href;
            if (style.Station.kmPostShow || path.includes('/map/draw')) {
                // 公里标是否显示
                let direction = 1;
                if (this.style.Station.kilometerPosition == 'up') {
                    direction = -1;
                }
                const offset = { x: 0, y: 0 };
                if (model.kilometerPosition) {
                    offset.x = model.kilometerPosition.x;
                    offset.y = model.kilometerPosition.y;
                }
                this.mileageText = new ETextName({
                    zlevel: this.zlevel,
                    z: this.z,
                    position: [0, 0],
                    x: model.position.x + offset.x,
                    y: model.position.y + ((parseInt(model.nameFont) + 2) * direction) + offset.y,
                    fontWeight: model.fontWeight,
                    fontSize: model.kmPostFont || 18,
                    fontFamily: style.fontFamily,
                    text: model.kmPost,
                    textAlign: 'middle',
                    textVerticalAlign: 'top',
                    textFill: model.kmPostFontColor
                });
                this.add(this.mileageText);
                model.kmPostShow ? this.mileageText.show() : this.mileageText.hide();
            }
            if (model.subheadDisplay) { // 副标题
                this.subheadText = new ETextName({
                    zlevel: this.zlevel,
                    z: this.z,
                    x: model.subheadPosition.x,
                    y: model.subheadPosition.y,
                    fontWeight: model.fontWeight,
                    fontSize: model.subheadFont || 18,
                    fontFamily: style.fontFamily,
                    text: model.subhead,
                    textAlign: 'middle',
                    textVerticalAlign: 'top',
                    textFill: model.subheadFontColor
                });
                this.add(this.subheadText);
                if (style.Station.text.borderShow) {
                    this.subheadText.setStyle('textPadding', [2, 6]);
                    this.subheadText.setStyle('textBorderColor', model.nameFontColor);
                    this.subheadText.setStyle('textBorderWidth', 1);
                }
            }
        }
    }
    createTurnBack() { // 创建按图折返
        const model = this.model;
        const style = this.style;
        if (model.visible && model.createTurnBack) {
            this.turnBacks = [];
            if (style.Station.turnBack.topText) {
                this.turnBackTopText = new Text({
                    zlevel: this.zlevel,
                    z: this.z,
                    position: [0, 0],
                    style: {
                        x: model.turnBackPoint.x,
                        y: model.turnBackPoint.y - style.Station.lamp.radiusR - style.Station.turnBack.toptextDistance,
                        fontWeight: style.Station.text.fontWeight,
                        fontSize: style.Station.text.fontSize,
                        fontFamily: style.fontFamily,
                        text: model.name + '站后折返',
                        textFill: '#fff',
                        textAlign: 'middle',
                        textVerticalAlign: 'top'
                    }
                });
                this.add(this.turnBackTopText);
            }
            for (let index = 0; index < style.Station.turnBack.lamp; index++) {
                const turnBack = new EControl({
                    zlevel: this.zlevel,
                    z: this.z,
                    arc: {
                        shape: {
                            cx: model.turnBackPoint.x + style.Station.turnBack.lampSpace * index,
                            cy: model.turnBackPoint.y,
                            r: style.Station.lamp.radiusR
                        },
                        lineWidth: 0,
                        lineDash: style.Station.turnBack.lineDash,
                        fill: style.Station.lamp.controlColor
                    },
                    text: {
                        position: [0, 0],
                        x: model.turnBackPoint.x + style.Station.turnBack.lampSpace * index,
                        y: model.turnBackPoint.y + style.Station.lamp.radiusR + style.Station.StationControl.text.distance,
                        fontWeight: style.Station.text.fontWeight,
                        fontSize: style.Station.text.fontSize,
                        fontFamily: style.fontFamily,
                        text: style.Station.turnBack.textName || '按图折返',
                        textFill: '#fff',
                        textAlign: 'middle',
                        textVerticalAlign: 'top'
                    },
                    style: this.style
                });
                this.turnBacks.push(turnBack);
            }
            this.turnBacks.forEach(lamp => {
                lamp.setArcBorder(style.Station.turnBack.showLampBorder);
                this.add(lamp);
            });
        }
    }
    // 创建控制模式
    createControlMode() {
        const model = this.model;
        if (model.visible && model.createControlMode) {
            // 紧急站控
            this.createEmergencyControl();

            // 中控按钮
            this.createCenterControl();

            // 站控按钮
            this.createSubstationControl();

            // 联锁控
            this.createInterconnectedControl();
        }
        this.setState(model);
    }

    createEmergencyControl() { // 紧急站控
        const model = this.model;
        if (this.style.Station.StationControl.emergencyControl.show) {
            this.emergencyControl = new ESingleControl({
                _subType: 'emergency',
                style: this.style,
                zlevel: this.zlevel,
                z: this.z,
                point: {
                    x: model.controlModePoint.x - this.style.Station.StationControl.lamp.distance * 3 / 2 + this.style.Station.StationControl.emergencyControl.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.emergencyControl.offset.y
                },
                context: this.style.Station.StationControl.emergencyControl.text,
                pop: false
            });
            this.add(this.emergencyControl);
            if (this.style.Station.StationControl.emergencyControl.arrowShow) {
                const x = model.controlModePoint.x - this.style.Station.StationControl.lamp.distance * 2 + this.style.Station.StationControl.emergencyControl.offset.x;
                const y = model.controlModePoint.y + this.style.Station.StationControl.emergencyControl.offset.y;
                const point = arrow(x, y + this.style.Station.StationControl.lamp.radiusR / 2, this.style.Station.StationControl.lamp.distance / 6, this.style.Station.StationControl.lamp.radiusR * 0.8);
                this.emergencyArrowsControl = new EArrow({
                    zlevel: this.zlevel,
                    z: this.z,
                    style: this.style,
                    count: this.count,
                    drict: 1,
                    point: point,
                    x: model.controlModePoint.x + this.style.Station.StationControl.lamp.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.lamp.radiusR / 2 + this.style.Station.StationControl.lamp.offset.y,
                    fill: this.style.Station.StationControl.emergencyControl.grayColor,
                    lineWidth: 1,
                    stroke: this.style.sidelineColor
                });
                this.add(this.emergencyArrowsControl);
            }
        }
    }

    createCenterControl() { // 中控按钮
        const model = this.model;
        if (this.style.Station.StationControl.centerControl.show) {
            this.centerControl = new ESingleControl({
                _subType: 'center',
                style: this.style,
                zlevel: this.zlevel,
                z: this.z,
                point: {
                    x: model.controlModePoint.x - this.style.Station.StationControl.lamp.distance / 2 + this.style.Station.StationControl.centerControl.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.centerControl.offset.y
                },
                context: this.style.Station.StationControl.centerControl.text,
                pop: false
            });
            this.add(this.centerControl);
            if (this.style.Station.StationControl.centerControl.arrowShow) {
                const x = model.controlModePoint.x - this.style.Station.StationControl.lamp.distance * 3 / 2 + this.style.Station.StationControl.emergencyControl.offset.x;
                const y = model.controlModePoint.y + this.style.Station.StationControl.emergencyControl.offset.y;
                const point = arrow(x, y + this.style.Station.StationControl.lamp.radiusR / 2, this.style.Station.StationControl.lamp.distance / 6, this.style.Station.StationControl.lamp.radiusR * 0.8);
                this.centerArrowsControl = new EArrow({
                    zlevel: this.zlevel,
                    z: this.z,
                    style: this.style,
                    count: this.count,
                    drict: 1,
                    point: point,
                    x: model.controlModePoint.x + this.style.Station.StationControl.lamp.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.lamp.radiusR / 2 + this.style.Station.StationControl.lamp.offset.y,
                    fill: this.style.Station.StationControl.centerControl.grayColor,
                    lineWidth: 1,
                    stroke: this.style.sidelineColor
                });
                this.add(this.centerArrowsControl);
            }
        }
        // 中控按钮
        if (this.style.Station.StationControl.centerControl.buttonShow) { // 宁波一 显示
            this.centerControlButton = new ESingleControl({
                _subType: 'button',
                style: this.style,
                zlevel: this.zlevel,
                z: this.z,
                point: {
                    x: model.controlModePoint.x - this.style.Station.StationControl.lamp.distance * 3 / -2 + this.style.Station.StationControl.lamp.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.lamp.offset.y
                },
                context: this.style.Station.StationControl.centerControl.buttonText,
                pop: false
            });
            this.add(this.centerControlButton);
            const arcRect = this.centerControlButton.getArcBoundingRect();
            this.arcBorder = new Rect({
                zlevel: this.zlevel,
                z: this.z,
                silent: true,
                shape: arcRect,
                style: {
                    lineDash: null,
                    stroke: this.style.Station.StationControl.lamp.stroke,
                    fill: this.style.Station.StationControl.lamp.fill
                }
            });
            this.add(this.arcBorder);
        }
    }

    createSubstationControl() { // 站控按钮
        const model = this.model;
        if (this.style.Station.StationControl.substationControl.show) {
            this.substationControl = new ESingleControl({
                _subType: 'substation',
                style: this.style,
                zlevel: this.zlevel,
                z: this.z,
                point: {
                    x: model.controlModePoint.x + this.style.Station.StationControl.lamp.distance / 2 + this.style.Station.StationControl.substationControl.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.substationControl.offset.y
                },
                context: this.style.Station.StationControl.substationControl.text,
                pop: false
            });
            this.add(this.substationControl);
            if (this.style.Station.StationControl.substationControl.arrowShow) {
                const x = this.model.controlModePoint.x + this.style.Station.StationControl.substationControl.offset.x;
                const y = this.model.controlModePoint.y + this.style.Station.StationControl.substationControl.offset.y;
                const point = arrow(x, y + this.style.Station.StationControl.lamp.radiusR / 2, this.style.Station.StationControl.lamp.distance / 6, this.style.Station.StationControl.lamp.radiusR * 0.8);
                this.substationArrowsControl = new EArrow({
                    zlevel: this.zlevel,
                    z: this.z,
                    style: this.style,
                    count: this.count,
                    drict: 1,
                    point: point,
                    x: model.controlModePoint.x + this.style.Station.StationControl.lamp.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.lamp.radiusR / 2 + this.style.Station.StationControl.lamp.offset.y,
                    fill: this.style.Station.StationControl.substationControl.grayColor,
                    lineWidth: 1,
                    stroke: this.style.sidelineColor
                });
                this.add(this.substationArrowsControl);
            }
        }
    }

    createInterconnectedControl() { // 联锁控
        const model = this.model;
        if (this.style.Station.StationControl.interconnectedControl.show) { // 成都三会显示
            this.interconnectedControl = new ESingleControl({
                _subType: 'interconnected',
                style: this.style,
                zlevel: this.zlevel,
                z: this.z,
                point: {
                    x: model.controlModePoint.x + this.style.Station.StationControl.lamp.distance * 3 / 2 + this.style.Station.StationControl.interconnectedControl.offset.x,
                    y: model.controlModePoint.y + this.style.Station.StationControl.interconnectedControl.offset.y
                },
                context: this.style.Station.StationControl.interconnectedControl.text || '联锁控',
                pop: false
            });
            this.add(this.interconnectedControl);
        }
    }

    handleCenter() { // 中控
        this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.greenColor);
        this.centerControl && this.centerControl.setTextColor(this.style.Station.StationControl.lamp.greenColor); // 文字颜色
    }

    handleLocal() { // 站控
        this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.yellowColor);
        this.substationControl && this.substationControl.setTextColor(this.style.Station.StationControl.lamp.yellowColor); // 文字颜色
        this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.substationArrowsControl && this.substationArrowsControl.setColor(this.style.Station.StationControl.lamp.greenColor);
    }

    handleEmergency() { // 紧急站控
        this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.redColor);
        this.emergencyControl && this.emergencyControl.setTextColor(this.style.Station.StationControl.lamp.redColor); // 紧急 颜色
        this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.emergencyArrowsControl && this.emergencyArrowsControl.setColor(this.style.Station.StationControl.lamp.greenColor);
    }

    recover() {
        this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.emergencyControl && this.emergencyControl.setTextColor(this.style.Station.StationControl.text.fontColor);
        this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.substationControl && this.substationControl.setTextColor(this.style.Station.StationControl.text.fontColor);
        this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.centerControl && this.centerControl.setTextColor(this.style.Station.StationControl.text.fontColor);

        this.substationArrowsControl && this.substationArrowsControl.setColor(this.style.Station.StationControl.lamp.grayColor);
        this.emergencyArrowsControl && this.emergencyArrowsControl.setColor(this.style.Station.StationControl.lamp.grayColor);
    }

    // 设置状态
    setState(model) {
        if (!this.isShowShape) return;
        this.recover();
        model.controlMode && this['handle' + model.controlMode]();
        if (model.tbStrategyId) {
            store.state.map.map.tbStrategyList.forEach(item => {
                if (item.stationCode == model.code) {
                    const modelData = Vue.prototype.$jlmap.mapDevice[item.code];
                    modelData && modelData.instance && modelData.instance.setState(modelData, model.tbStrategyId);
                }
            });
        }

    }

    getShapeTipPoint(opts) {
        let rect;
        if (opts.subDeviceType === 'button') {
            rect = this.centerControlButton.getArcBoundingRect();
        } else {
            rect = this.stationText.getBoundingRect();
        }
        return {
            x: rect.x + rect.width,
            y: rect.y
        };
    }

    getBoundingRect() {
        if (this.model.visible) {
            const rect = this.stationText.getBoundingRect().clone();
            if (this.model.subheadDisplay) {
                const subheadText = this.subheadText.getBoundingRect().clone();
                rect.union(subheadText);
                return rect;
            } else {
                return rect;
            }
        } else {
            return new BoundingRect(0, 0, 0, 0);
        }
    }

    drawSelected(selected) {
        this.EMouse && this.EMouse.drawSelected(selected);
    }

    checkIsDrawMap() {
        const path = window.location.href;
        if (path.includes('/map/draw')) {
            this.EMouse = new EMouse(this);
            this.add(this.EMouse);
            this.on('mouseout', () => { this.EMouse.mouseout(); });
            this.on('mouseover', () => { this.EMouse.mouseover(); });
        }
    }
    setShowMode() {
    }
    setShowStation(flag) {
        if (flag) {
            this.eachChild(item => {
                item.show();
            });
            if (this.mileageText) {
                this.model.kmPostShow ? this.mileageText.show() : this.mileageText.hide();
            }
            this.isShowShape = true;
            this.setState(this.model);
        } else {
            this.eachChild(item => {
                item.hide();
            });
            this.isShowShape = false;
        }
    }
}