rt-sim-training-client/src/views/planSchedule/statusBar.vue

<template>
  <data-table
    id="PlanStatusBar"
    ref="dataTable"
    :height="height-11"
    :config="stationListConfig"
    :close="false"
    :style="{top: maxmini? maxTop-110+'px':maxTop-21+'px'}"
    @touch="touch"
  />
</template>

<script>
import DataTable from './menusPlan/components/dataTable';
import { formatTime, formatName } from '@/utils/runPlan';

export default {
    name: 'PlanStatusBar',
    components: {
        DataTable
    },
    props: {
        maxTop: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            maxmini: true,
            height: 100,
            stationListConfig: {
                data: [],
                showClose: true,
                highlightCurrentRow: true,
                columns: [
                    {
                        prop: 'stationName',
                        label: '站台',
                        width: 400
                    },
                    {
                        prop: 'startTime',
                        label: '到点'
                    },
                    {
                        prop: 'stopTime',
                        label: '停站时间'
                    },
                    {
                        prop: 'endTime',
                        label: '发点'
                    },
                    {
                        prop: 'level',
                        label: '运行等级'

                    }
                ]
            }
        };
    },
    watch: {
        '$store.state.runPlan.selected': function (select) {
            this.stationListConfig.data = [];
            if (select) {
                const serviceObj = this.$store.state.runPlan.editData[select.serviceNumber];
                if (serviceObj) {
                    const trainMap = serviceObj.trainMap;
                    if (trainMap) {
                        const trainObj = trainMap[select.tripNumber];
                        if (trainObj) {
                            const stationTimeList = trainObj.stationTimeList;
                            if (stationTimeList && stationTimeList.length) {
                                stationTimeList.forEach((elem, index) => {
                                    const stationObj = {
                                        stationName: formatName(elem.stationCode),
                                        startTime: formatTime(index == 0 ? null : stationTimeList[index - 1].secondTime),
                                        stopTime: formatTime(index == 0 ? null : elem.secondTime - stationTimeList[index - 1].secondTime),
                                        endTime: formatTime(elem.secondTime),
                                        level: ''
                                    };
                                    this.stationListConfig.data.push(stationObj);
                                });
                            }
                        }
                    }
                }
            }
        }
    },
    methods: {
        touch(maxmini) {
            this.maxmini = maxmini;
            this.$emit('setPosition');
        }
    }
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
    @import "src/styles/mixin.scss";

    #PlanStatusBar {
        z-index: 5;
        position: absolute;
        width: 100%;
    }
</style>