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 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;

        // 公里标名称是否显示
        this.stationText = new ETextName({
            zlevel: this.zlevel,
            z: this.z,
            x: model.position.x,
            y: model.position.y,
            fontWeight: style.Station.text.fontWeight,
            fontSize: isNaN(Number(model.nameFont)) ? 20 : Number(model.nameFont),
            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.attr({
                style: {
                    textPadding: style.Station.text.textPadding || [2, 6],
                    textBorderColor: style.Station.text.borderColor || model.nameFontColor,
                    textBorderWidth: style.Station.text.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.attr({
                    style: {
                        textPadding: [2, 6],
                        textBorderColor: model.nameFontColor,
                        textBorderWidth: 1
                    }
                });
            }
        }
        if (!model.visible) { // 隐藏车站
            this.subheadText && this.subheadText.setStyle('textFill', 'rgba(0,0,0,0)');
            this.mileageText && this.mileageText.setStyle('textFill', 'rgba(0,0,0,0)');
            this.stationText && this.stationText.setStyle('textFill', 'rgba(0,0,0,0)');
        }
    }
    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 (!this.style.Station.StationControl.disPlayNone) {
            if (model.visible && model.createControlMode) { // 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); // 文字颜色
        if (this.style.Station.StationControl.disPlayNone) {
            this.stationText && this.stationText.setStyle('textFill', '#1fdc1f');
            if (this.model.subheadDisplay) { // 副标题
                this.subheadText && this.subheadText.setStyle('textFill', '#1fdc1f');
            }
        }
    }

    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);
        if (this.style.Station.StationControl.disPlayNone) {
            this.stationText && this.stationText.setStyle('textFill', '#fff');
            if (this.model.subheadDisplay) { // 副标题
                this.subheadText && this.subheadText.setStyle('textFill', '#fff');
            }
        }
    }

    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);
        if (this.style.Station.StationControl.disPlayNone) {
            this.stationText && this.stationText.setStyle('textFill', '#fff');
            if (this.model.subheadDisplay) { // 副标题
                this.subheadText && this.subheadText.setStyle('textFill', '#fff');
            }
        }
    }

    handleNone() { // 空
        if (this.style.Station.StationControl.disPlayNone) { // 没有控制时显示 黄色
            this.stationText && this.stationText.setStyle('textFill', '#FFFF00');
            if (this.model.subheadDisplay) { // 副标题
                this.subheadText && this.subheadText.setStyle('textFill', '#FFFF00');
            }
        }
    }

    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() {
        const rect = this.stationText.getBoundingRect().clone();
        if (this.model.subheadDisplay) {
            const subheadText = this.subheadText.getBoundingRect().clone();
            rect.union(subheadText);
            return rect;
        } else {
            return rect;
        }
    }

    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;
        }
    }
}