rt-sim-training-client/src/jmapNew/shape/StationStand/ETrainDepart.js

import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';

class ETrainDepart extends Group {
    constructor(model) {
        super();
        this.model = model;
        this.isNew = false;
        this.timeStart = 30;
        this.time = null;
    }

    create(text) {
        if (!this.isNew) {
            const model = this.model;
            const style = this.model.style;

            this.isNew = true;
            let cy = model.inside ? model.y + 30 : model.y - 30;
            let cx = model.inside ? model.x - model.width / 4 - model.width / 8 : model.x + model.width / 4 + model.width / 8;
            if (model.right) {
                if (model.inside) {
                    cy = model.y - 30;
                    cx = model.x + model.width / 4 + model.width / 8;
                } else {
                    cy = model.y + 30;
                    cx = model.x - model.width / 4 - model.width / 8;
                }
            } else {
                if (model.inside) {
                    cy = model.y + 30;
                    cx = model.x - model.width / 4 - model.width / 8;
                } else {
                    cy = model.y - 30;
                    cx = model.x + model.width / 4 + model.width / 8;
                }
            }
            this.trainDepart = new Text({
                zlevel: model.zlevel,
                z: model.z,
                position: [0, 0],
                style: {
                    x: cx,
                    y: cy,
                    text: text,
                    textAlign: 'middle',
                    fontSize: `${style.StationStand.detainCar.fontSize} px  ${style.fontFamily}`,
                    textFill: 'green',
                    textVerticalAlign: 'middle',
                    textBorderColor: 'green',
                    textPadding: 2,
                    textBorderWidth: 1
                }
            });
            this.add(this.trainDepart);
        }
    }

    setColor(color) {
        this.create();
        this.trainDepart.setStyle('textFill', color);
    }

    hide() {
        this.create();
        this.trainDepart.hide();
        this.time && clearInterval(this.time);
    }

    show() {
        this.timeStart = 30;
        this.create(`0${this.timeStart}`);
        this.trainDepart.show();
        setTimeout(() => {
            this.animition();
        }, 1000);
    }
    animition() {
        this.time && clearInterval(this.time);
        this.time = setInterval(() => {
            this.timeStart--;
            if (this.timeStart >= 0) {
                if (this.timeStart < 10) {
                    this.trainDepart.setStyle('text', `00${this.timeStart}`);
                } else {
                    this.trainDepart.setStyle('text', `0${this.timeStart}`);
                }
            } else {
                clearInterval(this.time);
            }
        }, 1000);
    }
}

export default ETrainDepart;