rt-sim-training-client/src/views/planMonitor/editTool/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 './menus/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 = [];
			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>