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

<template>
  <div class="bigLPFStrategy">
    <div class="bigLPFStrategyL">
      <div class="bigLPFStrategyLTitle">大客流站台直方图</div>
      <div :id="bigLPFStrategyId" class="bigLPFStrategyLChart" />
    </div>
    <div class="bigLPFStrategyR">
      <div class="LPFstrategyTop">
        <div class="LPFstrategyTitle">
          <span class="LPFstrategyTitleL">客流策略</span>
          <span v-if="LPFstrategyList.length>0" class="LPFstrategyTitleR">【 推算时长:{{ recoimemmandTime }}分钟 】</span>
        </div>
      </div>
      <div id="LPFstrategyListOut">
        <div v-if="LPFstrategyList.length<=0" class="noLPFstrategy">暂无策略</div>
        <!-- <el-tabs v-model="activeName" class="border-card">
            <el-tab-pane class="view-control" label="策略列表" name="first"> -->
        <!-- <div class=""></div> -->
        <!-- <el-tabs v-else v-model="activeName" type="card" class="LPFstrategyListIn">
          <el-tab-pane label="策略列表" name="first"> -->
        <!-- <div v-else class="eachLPFstrategy">
          <div class="eachLPFstrategyData1">大客流站台列表</div>
          <div v-for="(eachLPFstand,index) in LPFstandList" :key="index">
            <div class="eachLPFstrategyData">站台{{ index+1 }}：{{ eachLPFstand.name }}</div>
            <div class="eachLPFstrategyData">等待人数：{{ eachLPFstand.wait }}</div>
          </div>
        </div> -->
        <div v-for="(eachLPFstrategy,index) in LPFstrategyList" :key="index" class="eachLPFstrategy">
          <div class="eachLPFstrategyData1">策略{{ index+1 }}：{{ eachLPFstrategy.description }}</div>
          <div class="eachLPFstrategyData">指标数据：</div>
          <div class="eachLPFstrategyData">
            <span> 影响的列车数量: {{ eachLPFstrategy.effectTrainNum }}</span>
            <span class="eachLPFstrategySpan">时刻表总偏移量: {{ eachLPFstrategy.scheduleOffset }}秒 </span>
          </div>
          <!-- <div class="eachLPFstrategyData">影响的列车: {{ eachLPFstrategy.effectTrainSet.toString() }}</div> -->
          <div class="eachLPFstrategyData">
            <span> 可多载离的乘客数量（累计的）: {{ eachLPFstrategy.extraNum }}</span>
          </div>
        </div>
        <!-- </el-tab-pane> -->
        <!-- <el-tab-pane label="大客流站台列表" name="second"> -->

        <!-- </el-tab-pane> -->
        <!-- </el-tabs> -->
        <!-- </el-tab-pane>
            <el-tab-pane class="view-control" label="大客流站台列表" name="second">
              {{ 111 }}
            </el-tab-pane>
          </el-tabs> -->
      </div>
    </div>
    <div class="quitLPFstrategy"><el-button type="primary" class="quitLPFButton" @click="quitLPFstrategy">退出</el-button></div>
  </div>
</template>
<script>
import echarts from 'echarts';
import { mapGetters } from 'vuex';
import { clearSimulation } from '@/api/simulation';
import { creatSubscribe, clearSubscribe, LPFTopic} from '@/utils/stomp';
import { getToken } from '@/utils/auth';
import { loadMapDataById } from '@/utils/loaddata';
export default {
    name:'BigLPFStrategy',
    data() {
        return {
            group:'',
            myChart: null,
            activeName:'first',
            LPFstrategyList:[],
            recoimemmandTime:0,
            bigLPFStrategyId:'bigLPFStrategyId',
            upStandList:[],
            downStandList:[],
            stationNameList:[],
            LPFstandList:[]
        };
    },
    computed: {
        ...mapGetters('map', [
            'stationList',
            'stationStandList',
            'mapConfig'
        ])
    },
    watch: {
        '$store.state.socket.LPFstrategy':function(val) {
            if (val && val.recommendList && val.recommendList.length > 0) {
                this.LPFstrategyList = [];
                this.recoimemmandTime = val.duration;
                val.recommendList.forEach(strategy=>{
                    const eachStrategy = {};
                    switch (strategy.type) {
                    case 'JUMP': {
                        // {"type":"JUMP","description":"为列车[132056],设置罗汉山-上行站台跳停",
                        // "effectTrainSet":["004"],"effectTrainNum":1,"scheduleOffset":-50,
                        // "extraNum":0,"groupNumber":"004","serviceNumber":"13","tripNumber":"2056","standCode":"PF61848"}]}
                        // const stand = this.$store.getters['map/getDeviceByCode'](strategy.standCode);
                        // const station = this.$store.getters['map/getDeviceByCode'](stand.stationCode);
                        // eachStrategy.description = '为列车[' + strategy.groupNumber +
                        // '-' + strategy.serviceNumber + '|' + strategy.tripNumber +
                        // ']，设置站台' + station.name + '-' + (stand.right ? '右行' : '左行') +
                        // stand.name + ' (' + stand.code + ') 跳停';
                        // 为列车[005-02|2057],设置站台秀山-右行-PF42(PF44165)跳停",
                        eachStrategy.description = strategy.description;
                        break;
                    }
                    // "type":"PARK_TIME",
                    // "description":"福州火车站-上行站台设置停站时间[85]",
                    // "effectTrainSet":["012","004","005","009"],"effectTrainNum":4,
                    // "scheduleOffset":160,"extraNum":2540,"time":85,"standCode":"PF83991"
                    case 'PARK_TIME': {
                        // const stand = this.$store.getters['map/getDeviceByCode'](strategy.standCode);
                        // const station = this.$store.getters['map/getDeviceByCode'](stand.stationCode);
                        eachStrategy.description = strategy.description;
                        // eachStrategy.description = '为站台[' + station.name + '-' + (stand.right ? '右行' : '左行') +
                        // stand.name + '(' + stand.code + ')] 设置停站时间，' + strategy.time + '秒';
                        break;
                    }
                    case 'J_P': {
                        // const stand = this.$store.getters['map/getDeviceByCode'](strategy.standCode);
                        // const station = this.$store.getters['map/getDeviceByCode'](stand.stationCode);
                        // eachStrategy.description = '为列车[' + strategy.groupNumber +
                        // '-' + strategy.serviceNumber + '|' + strategy.tripNumber +
                        // ']，设置站台' + station.name + '-' + (stand.right ? '右行' : '左行') +
                        // stand.name + ' (' + stand.code + ') 跳停，并且为站台[' + station.name + '-' + (stand.right ? '右行' : '左行') +
                        // stand.name + '(' + stand.code + ')] 设置停站时间，' + strategy.time + '秒';
                        eachStrategy.description = strategy.description;
                    }
                    }
                    eachStrategy.effectTrainNum = strategy.effectTrainNum;
                    eachStrategy.scheduleOffset = strategy.scheduleOffset;
                    eachStrategy.extraNum = strategy.extraNum;
                    eachStrategy.effectTrainSet = strategy.effectTrainSet;
                    this.LPFstrategyList.push(eachStrategy);
                });
                this.LPFstandList = [];
                val.lpfList.forEach(standInfo=>{
                    const stand = this.$store.getters['map/getDeviceByCode'](standInfo.standCode);
                    const station = this.$store.getters['map/getDeviceByCode'](stand.stationCode);
                    this.LPFstandList.push({name:station.name + '-' + (stand.right ? '右行' : '左行') +
                        stand.name + '(' + stand.code + ')', wait:standInfo.wait});
                });
            }
        },
        '$store.state.socket.simulationOver':function(val) {
            this.quitLPFstrategy();
        },
        '$store.state.app.windowSizeCount': function() { // 窗口缩放
            this.setWindowSize();
        },
        '$store.state.map.mapDataLoadedCount': function (val) {
            const upRight = this.mapConfig.upRight;
            const stationList = this.stationList.sort((a, b) => {
                return parseInt(a.kmRange) - parseInt(b.kmRange);
            });
            stationList.forEach((station)=>{
                if (!station.depot) {
                    this.stationNameList.push(station.name);
                }
            });
            this.stationStandList.forEach((stand)=>{
                const station = this.$store.getters['map/getDeviceByCode'](stand.stationCode);
                if ((stand.right && upRight) || (!stand.right && !upRight)) {
                    this.upStandList[station.name] = 0;
                } else {
                    this.downStandList[station.name] = 0;
                }
            });
            this.loadInitData();
            this.subscribe();
        },
        '$store.state.socket.standPfiNum':function(val) {
            if (val) {
                // console.log(val, 'standPfiNum');
                val.forEach(stationNum=>{
                    const upRight = this.mapConfig.upRight;
                    const stand = this.$store.getters['map/getDeviceByCode'](stationNum.standCode);
                    const station = this.$store.getters['map/getDeviceByCode'](stand.stationCode);
                    if ((stand.right && upRight) || (!stand.right && !upRight)) {
                        this.upStandList[station.name] = stationNum.num;
                    } else {
                        this.downStandList[station.name] = stationNum.num;
                    }
                });
                this.updateData();
            }
        }
    },
    beforeDestroy() {
        if (this.group) {
            clearSimulation(this.group);
            this.clearSubscribe();
            this.$store.dispatch('socket/resetTrainPassagerNum');
            this.$store.dispatch('socket/setIsFirst', false);
        }
    },
    mounted() {
        this.group = this.$route.query.group;
        loadMapDataById(this.$route.query.mapId, 'parse');
    },
    methods:{
        async subscribe() {
            this.clearSubscribe();
            const header = { group: this.group || '', 'X-Token': getToken() };
            creatSubscribe(`${LPFTopic}\/${this.$route.query.group}`, header);
        },
        clearSubscribe() {
            clearSubscribe(`${LPFTopic}\/${this.group}`);
        },
        quitLPFstrategy() {
            window.close();
        },
        updateData() {
            const result = this.covertData();
            const upStandNumList = result.upStandNumList;
            const downStandNumList = result.downStandNumList;
            const series = [{
                name: '上行',
                type: 'bar',
                data:upStandNumList
            },
            {
                name: '下行',
                type: 'bar',
                data:downStandNumList
            }];
            this.myChart && this.myChart.setOption({series: series});
        },
        covertData() {
            const upStandNumList = [];
            const downStandNumList = [];
            this.stationNameList.forEach(station=>{
                upStandNumList.push(this.upStandList[station]);
                downStandNumList.push(this.downStandList[station]);
            });
            return {upStandNumList:upStandNumList, downStandNumList:downStandNumList};
        },

        async loadInitData() {
            const result = this.covertData();
            const upStandNumList = result.upStandNumList;
            const downStandNumList = result.downStandNumList;
            this.myChart && this.myChart.showLoading();
            const option = {
                tooltip: {
                    trigger: 'axis'
                },
                color:['#0029ca', '#33459c'],
                grid: [
                    {
                        right: '80px',
                        left: '80px',
                        height: '85%',
                        top:'40px'
                    }
                ],
                xAxis: [
                    {
                        type: 'category',
                        data: this.stationNameList,
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                width: 2,
                                color: '#d14a61'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                width: 2,
                                color: '#d14a61'
                            }
                        }
                    }
                ],
                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'
                }],
                series: [
                    {
                        name: '上行',
                        type: 'bar',
                        data:upStandNumList
                    },
                    {
                        name: '下行',
                        type: 'bar',
                        data:downStandNumList
                    }
                ]
            };
            await this.loadInitChart(option);
            this.myChart && this.myChart.hideLoading();
        },
        loadInitChart(option) {
            return new Promise((resolve, reject) => {
                try {
                    this.myChart = echarts.init(document.getElementById(this.bigLPFStrategyId));
                    if (this.myChart) {
                        this.myChart.setOption(option);
                        this.reSize({ width: this.$store.state.app.width * 0.74, height: this.$store.state.app.height - 40 });
                    }
                    resolve(true);
                } catch (error) {
                    reject(error);
                }
            });
        },
        setWindowSize() {
            this.reSize({ width: this.$store.state.app.width * 0.74, height: this.$store.state.app.height - 40 });
        },
        reSize(opt) {
            if (this.myChart) {
                this.myChart.resize({
                    width: opt.width,
                    height: opt.height,
                    silent: false
                });
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.LPFstrategyList{
    position: absolute;
    width: 360px;
    left: 10px;
    height: 500px;
    top: 80px;
    background: #f1f1f1;
    border-radius: 6px;
    z-index: 2;
}
.eachLPFstrategy{
    width: 96%;
    box-shadow: 0px 5px 5px #ccc;
    border-top: 1px #dedede solid;
    margin-top: 10px;
    padding:10px;
    background: #fff;
    font-size: 14px;
    margin-left: 2%;
    border-radius: 5px;
}
.LPFstrategyTop{
    background:#fff;
    height: 40px;
    border-bottom: 1px #d4d4d4 solid;
    width: 100%;
    position: absolute;
    top: 0;
    left:0;
}
.bigLPFStrategyLTitle{
    padding: 15px 20px 0px 20px;
    font-size: 15px;
    background: #fff;
    height: 40px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.LPFstrategyTitle{
    float: left;
    width:100%;
    padding-top: 10px;
    padding-left: 15px;
    font-size: 15px;
    padding-right: 20px;
}
.LPFstrategyClose{
    float: right;
    margin-right: 5px;
    padding: 5px;
    margin-top: 5px;
}
#LPFstrategyListOut{
    height: 100%;
    overflow: auto;
    background: #f1f1f1;
    padding-bottom:20px;
    border-bottom: 1px #d4d4d4 solid;
    &::-webkit-scrollbar {
        width: 5px;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #c3c3c3;
    }

    &::-webkit-scrollbar-track {
        border-radius: 0;
        background: #f0f0f0;

    }
}
.eachLPFstrategyData1{
    line-height:145%;
    font-weight:600;
}
.eachLPFstrategyData{
    margin-top:5px;
}
.eachLPFstrategySpan{
    margin-left:50px;
}
.bigLPFStrategyL{
    width: 74%;
    float: left;
    height: 100%;
    padding: 40px 0px 0px 0px;
    position: relative;
}
.bigLPFStrategyR{
    width: 26%;
    float: right;
    border-left: 1px #eee solid;
    height: 100%;
    padding: 40px 0px;
    position: relative;
    box-shadow: -5px 0px 5px #dedede;
}
.bigLPFStrategy{
    width:100%;
    height:100%;
    position: relative;
}
.noLPFstrategy{
    padding:50px 0px;
    text-align: center;
}
.quitLPFstrategy{
    position: absolute;
    right: 10px;
    bottom: 5px;
}
.quitLPFButton{
    height: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
}
#bigLPFStrategyId{
    width:100%;
    height:100%;
}
.LPFstrategyTitleL{}
.LPFstrategyTitleR{
    // float:right
}
.LPFstrategyListIn{height:100%;overflow:hidden;padding-top: 41px;position:relative;}
</style>
<style lang="scss">
#LPFstrategyListOut .LPFstrategyListIn .el-tabs__header.is-top{
    margin-bottom: 10px;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    border-bottom: 1px #ccc solid;
}
#LPFstrategyListOut .LPFstrategyListIn .el-tabs__content{
    height: 100%;
    padding-bottom: 10px;
    overflow: auto;
    &::-webkit-scrollbar {
        width: 5px;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #c3c3c3;
    }

    &::-webkit-scrollbar-track {
        border-radius: 0;
        background: #f0f0f0;

    }
}
#LPFstrategyListOut .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
    border-bottom-color:#dedede;
}
</style>