rt-sim-training-client/src/views/newMap/displayNew/demon/runPlanView.vue

<template>
  <el-dialog
    v-dialogLoading="dialogLoading"
    :title="title"
    :visible.sync="dialogShow"
    width="100%"
    :before-close="doClose"
    :close-on-click-modal="false"
    :modal="false"
    fullscreen
  >
    <div id="PlanSchedule" :style="{top: top+'px', height: height+'px'}">
      <div class="left">
        <div :id="runPlanId" />
      </div>
      <div class="right">
        <data-table
          ref="serviceTable"
          :height="height/2"
          :config="serviceNumberConfig"
          :style="{top: top-height/2+'px'}"
          @touch="scheduleTouch"
        />
        <data-table
          ref="tripTable"
          :height="height/2"
          :config="tripNumberConfig"
          :style="{top: top-height/2+'px'}"
          @touch="trainNumTouch"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { timeFormat } from '@/utils/date';
import DataTable from '@/views/planSchedule/menusPlan/components/dataTable';
import echarts from 'echarts';
import {toTimeStamp, formatDuring} from '@/utils/date';
import { deepAssign } from '@/utils/index';
import { getPublishMapInfo } from '@/api/jmap/map';

export default {
    name: 'PlanSchedule',
    components: {
        DataTable
    },
    props: {
        group: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            top: 0,
            height: 0,
            heights: [100, 100],
            runPlanId: 'run-plan-view',
            myChart: null,
            PlanConvert: {},
            initialPlanData: [],
            serviceNumberConfig: {
                data: [],
                highlightCurrentRow: true,
                handleChange: this.serviceNumberChange,
                showClose: false,
                columns: [
                    {
                        prop: 'serviceNumber',
                        label: '表号'
                    },
                    {
                        width: 40
                    }
                ]
            },
            tripNumberConfig: {
                data: [],
                highlightCurrentRow: true,
                handleChange: this.tripNumberChange,
                showClose: false,
                columns: [
                    {
                        prop: 'tripNumber',
                        label: '车次号'
                    },
                    {
                        width: 40
                    }
                ]
            },
            realData: {},
            kmRangeCoordMap: {},
            option: {
                title: {
                    text: '',
                    left: 'center'
                },
                grid: {
                    top: '30px',
                    left: '120px',
                    right: '40px',
                    bottom: '65px',
                    containLabel: true,
                    backgroundColor: 'floralwhite'
                },
                toolbox: {
                    // right: '30px',
                    // feature: {
                    //     dataZoom: {
                    //         yAxisIndex: 'none'
                    //     },
                    //     restore: {},
                    //     saveAsImage: {}
                    // }
                },
                tooltip: {
                    axisPointer: {
                        trigger: 'item',
                        type: 'cross'
                    },
                    formatter: this.axisTooltip,
                    borderWidth: 1
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: [],
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                width: 2,
                                color: '#d14a61'
                            }
                        },
                        axisLabel: {
                            formatter: this.xAxisLableFormat,
                            textStyle: {
                                color: '#333'
                            }
                        },
                        axisPointer: {
                            snap: true,
                            label: {
                                formatter: this.xAxisPointFormat,
                                backgroundColor: 'rgb(255,0,0,0.5)',
                                color: 'white'
                            }
                        }
                    }
                ],
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            width: 2,
                            color: '#d14a61'
                        }
                    },
                    axisLabel: {
                        interval: 'auto',
                        formatter: this.yAxisLableFormat
                    },
                    axisPointer: {
                        xAxisIndex: 'all',
                        label: {
                            formatter: this.yAxisPointFormat,
                            backgroundColor: 'rgb(0,100,0,0.5)',
                            color: 'white'
                        }
                    },
                    min: 0,
                    max: 0
                },
                series: [],
                dataZoom: [
                    {
                        type: 'inside'
                    },
                    {
                        fiterMode: 'filter',
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        },
                        bottom: '20px'
                    }
                ]
            },
            absoluteTime: 2 * 3600,
            indexKmRangeMap: {},
            dialogLoading: false,
            dialogShow: false,
            series: [],
            trainLabelPosition:0
        };
    },
    computed: {
        ...mapGetters('runPlan', [
            'stations'
        ]),
        maxWidth() {
            return this.$store.state.app.width;
        },
        maxHeight() {
            return this.$store.state.app.height;
        },
        title() {
            return this.$t('display.runPlan.previewRunDiagram');
        }
    },
    watch: {
        maxWidth() {
            this.setPosition();
        },
        maxHeight() {
            this.setPosition();
        },
        '$store.state.runPlan.planLoadedCount': async function () {
            try {
                await this.loadChartPage();
                if (this.dialogShow) {
                    await this.loadInitData(this.series);
                }
            } catch (e) {
                console.error(e);
            } finally {
                this.loading = false;
            }
        },
        '$store.state.runPlan.planUpdateCount': function () {
            this.updateRunPlanData(this.$store.state.runPlan.updateData);
        },
        '$store.state.runPlan.planSizeCount': function () {
            this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
        },
        '$store.state.runPlan.selected.serviceNumber': function (val) {
            if (this.dialogShow) {
                const index = this.serviceNumberConfig.data.findIndex(elem => {
                    return elem.serviceNumber == val;
                });
                this.$refs.serviceTable.setCurrentRow(this.serviceNumberConfig.data[index]);
            }
        },
        '$store.state.runPlan.selected.tripNumber': function (val) {
            if (this.dialogShow) {
                const index = this.tripNumberConfig.data.findIndex(elem => {
                    return elem.tripNumber == val;
                });
                this.$refs.tripTable.setCurrentRow(this.tripNumberConfig.data[index]);
            }
        }
    },
    mounted() {
        // this.PlanConvert = this.$theme.loadPlanConvert(this.lineCode);
        getPublishMapInfo(this.$route.query.mapId).then(res=>{
            this.PlanConvert = this.$theme.loadPlanConvert(res.data.lineCode);
            this.initialPlanData = this.$store.state.runPlan.planData;
            // this.loadChartPage();
        });
    },
    beforeDestroy() {
        this.destroy();
    },
    methods: {
        async  doShow() {
            try {
                this.dialogLoading = true;
                this.dialogShow = true;
                this.setPosition();
                this.loadInitData(this.series);
            } catch (e) {
                console.error(e);
            } finally {
                this.dialogLoading = false;
            }
        },
        async doClose() {
            this.dialogShow = false;
        },
        serviceNumberChange(row) {
            if (row) {
                this.$store.dispatch('runPlan/setSelected', { serviceNumber: row.serviceNumber, tripNumber: null });
                this.renderTripNumber({ serviceNumber: row.serviceNumber, tripNumber: null });
                const serviceObj = this.$store.state.runPlan.editData[row.serviceNumber];
                if (serviceObj) {
                    this.analyticalTripNumber(serviceObj.trainMap);
                }
            }
        },
        tripNumberChange(row) {
            if (row) {
                this.$store.dispatch('runPlan/setSelected', { serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber });
                this.renderTripNumber({ serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber });
            }
        },
        async analyticalServiceNumber(data) {
            this.serviceNumberConfig.data = Object.keys(data || {})
                .sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
                .map(serviceNumber => { return { serviceNumber }; });
        },
        async analyticalTripNumber(data) {
            this.tripNumberConfig.data = Object.keys(data || {})
                .sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
                .map(tripNumber => { return { tripNumber }; });
        },
        async setPosition() {
            this.$nextTick(() => {
                const top = 54;
                const width = this.maxWidth * 0.85;
                let height = this.maxHeight;

                height = height - top;
                this.$store.dispatch('runPlan/resize', { width, height });

                if (this.top != top) {
                    this.top = top;
                }

                if (this.height != height) {
                    this.height = height - top;
                }
            });
        },
        updateRunPlanData(data) {
            const stations = this.$store.state.runPlan.stations;
            const planData = this.$store.state.runPlan.planData;
            const initialPlanData = this.$store.state.runPlan.initialPlanData;
            if (data[0] && initialPlanData[data[0].serviceNumber]) {
                Object.keys(initialPlanData[data[0].serviceNumber].trainMap).forEach(item => {
                    if (initialPlanData[data[0].serviceNumber].trainMap[item + ''].tripNumber == data[0].tripNumber) {
                        data[0].directionCode = initialPlanData[data[0].serviceNumber].trainMap[item + ''].directionCode;
                    }
                });
            }
            if (data[0]) {
                data[0].secondTime = data[0].second;
            }
            this.series = this.PlanConvert.updateDataToModels(data, stations, this.kmRangeCoordMap,
                planData, this.series, { color: '#FF00DE', width: 2 }
            );
            this.myChart && this.myChart.setOption({ series: this.series });
        },
        async loadChartPage() {
            try {
                this.series = [];
                const stations = this.$store.state.runPlan.stations;
                const planData = this.$store.state.runPlan.planData;

                this.viewDisabled = true;
                this.kmRangeCoordMap = this.PlanConvert.convertStationsToMap(stations);
                this.pushModels(this.series, [this.PlanConvert.initializeYaxis(stations)]);
                this.pushModels(this.series, this.PlanConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { color: '#000', width: 1 }));
                // await this.loadInitData(series);
                await this.analyticalServiceNumber(this.$store.state.runPlan.editData);
                this.viewDisabled = false;

            } catch (error) {
                this.viewDisabled = false;
                this.$messageBox(`加载运行图数据失败`);
            }
        },

        async loadInitData(series) {
            this.myChart && this.myChart.showLoading();
            await this.xAxisInit();
            await this.yAxisInit();
            await this.loadInitChart(series);
            this.myChart && this.myChart.hideLoading();
        },

        pushModels(series, models) {
            if (models && models.length) {
                models.forEach(elem => {
                    if (elem) {
                        series.push(elem);
                    }
                });
            }

            return series;
        },
        popModels(series, models) {
            if (models && models.length) {
                models.forEach(elem => {
                    const index = series.indexOf(elem);
                    if (index >= 0) {
                        series.split(index, 1);
                    }
                });
            }
            return series;
        },
        loadInitChart(series) {
            return new Promise((resolve, reject) => {
                try {
                    this.destroy();
                    let startValue = 3600 + this.PlanConvert.TranslationTime;
                    const offsetTime = 3600;
                    const initTime = toTimeStamp(formatDuring(this.$store.state.training.initTime));
                    startValue = initTime - this.PlanConvert.TranslationTime;
                    this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
                    this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
                    this.option.series = series;
                    this.myChart = echarts.init(document.getElementById(this.runPlanId));
                    if (this.myChart) {
                        this.myChart.setOption(this.option);
                        this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
                        this.myChart.on('click', this.mouseClick);
                    }
                    resolve(true);
                } catch (error) {
                    reject(error);
                }
            });

        },
        xAxisPointFormat(params) {
            return timeFormat(params.value);
        },
        yAxisPointFormat(params) {
            return this.PlanConvert.computedFormatYAxis(this.stations, params);
        },
        xAxisLableFormat(value, index) {
            if (value % 60 === 0) {
                return timeFormat(value);
            }
        },
        yAxisLableFormat(value, index) {
            return '';
        },
        xAxisInit() {
            const list = [];
            for (var time = 0 + this.PlanConvert.TranslationTime; time < 3600 * 24 + this.PlanConvert.TranslationTime; time++) {
                list.push(time);
            }

            const startValue = 3600 * 6;
            const offsetTime = 3600 * 1;

            this.option.xAxis[0].data = list;
            if (!this.option.dataZoom[0].startValue) {
                this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
            }

            if (!this.option.dataZoom[0].endValue) {
                this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
            }
        },
        yAxisInit() {
            if (Object.keys(this.PlanConvert).length) {
                this.option.yAxis.min = this.PlanConvert.computedYaxisMinValue(this.stations);
                this.option.yAxis.max = this.PlanConvert.computedYaxisMaxValue(this.stations);
            }
        },
        axisTooltip(param) {
            const station = this.stations[Math.floor((param.data[1] - this.PlanConvert.EdgeHeight) / this.PlanConvert.CoordMultiple)] || { name: '', kmRange: '' };
            return [
                `Point Data <hr size=1 style=" margin: 3px 0">`,
                `车站名称: ${station.name}<br>`,
                `车站公里标: ${station.kmRange} km <br>`,
                `到站时间: ${timeFormat(param.data[0] + this.PlanConvert.TranslationTime)} (${param.data[0]})<br>`
            ].join('');
        },
        renderTripNumber(params) {
            const tripNumber = params.tripNumber; // 车次号
            const serviceNumber = params.serviceNumber; // 服务号
            let data, markPoint;
            const op = this.myChart.getOption();
            if (this.trainLabelPosition > 0) {
                this.series.splice(this.trainLabelPosition - 1, 1);
                this.myChart && this.myChart.setOption({ series: this.series });
            }
            op.series.forEach((item, index) => {
                if (item.name == serviceNumber && item.data) {
                    if (tripNumber) {
                        const temp = item.data.filter(elem => elem[3] == tripNumber);
                        if (temp.length) {
                            data = temp;
                            item.markPoint.data.forEach(each=>{
                                if (each.name == temp[0][4]) {
                                    markPoint = deepAssign({}, {data:[each]});
                                    markPoint.symbol = 'roundRect';
                                    markPoint.symbolSize = 1;
                                    markPoint.data[0].label.color = '#f00';
                                }
                            });
                        }
                    } else {
                        markPoint = deepAssign({}, item.markPoint);
                        markPoint.data.forEach(each=>{
                            each.label.color = '#f00';
                        });
                        data = item.data;
                    }
                }
            });
            this.series.push({
                name: 'trainLabel',
                lineStyle: {
                    color: '#f00',
                    width: 2,
                    type: 'solid'
                },
                z: 10,
                type: 'line',
                markPoint:markPoint,
                data: data
            });
            this.trainLabelPosition = this.series.length;
            setTimeout(() => {
                this.myChart && this.myChart.setOption({ series: this.series });
            }, 50);
        },
        mouseClick(params) {
            const model = {
                serviceNumber: params.seriesName
            };
            this.$store.dispatch('runPlan/setSelected', model);
        },
        reSize(opt) {
            if (this.myChart) {
                this.myChart.resize({
                    width: opt.width,
                    height: opt.height,
                    silent: false
                });
            }
        },
        destroy() {
            if (this.myChart && this.myChart.isDisposed) {
                this.myChart.dispose();
                this.myChart = null;
            }
        },
        scheduleTouch() {

        },
        trainNumTouch() {

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

    #PlanSchedule {
        z-index: 5;
        position: absolute;
        width: 100%;

        .left {
            height: 100%;
            width: 85%;
            float: left;
        }

        .right {
            height: 100%;
            width: 15%;
            float: right;
        }
    }

    /deep/ {
        .el-dialog__body {
            padding: 0px !important;
            background-color: floralwhite !important;
        }
    }
</style>