大客流策略客户端 代码调整

src/views/newMap/display/setTime.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { prefixIntrger } from '@/utils/date';
+import { timestampFormat } from '@/utils/date';
 import { getLoadTrainNumber } from '@/api/simulation';
 
 // 计划行车时间选择
@@ -74,6 +74,7 @@ export default {
     },
     methods: {
         doShow() {
+            console.log(this.$store.state.training.initTime);
             this.formModel.initTime = new Date(this.$store.state.training.initTime || null);
             this.handleChange(this.formModel.initTime);
             this.show = true;
@@ -85,23 +86,19 @@ export default {
         handleChange(initTime) {
             this.formModel.loadNum = 0;
             if (this.hasNumber) {
-                getLoadTrainNumber({ time: this.formatTime(initTime) }, this.group).then(resp => {
+                getLoadTrainNumber({ time: timestampFormat('HH:mm:ss', initTime) }, this.group).then(resp => {
                     this.maxNumber = parseInt(resp.data);
                 });
             }
         },
-        formatTime(initTime) {
-            const hh = prefixIntrger(initTime.getHours(), 2);
-            const mm = prefixIntrger(initTime.getMinutes(), 2);
-            const ss = prefixIntrger(initTime.getSeconds(), 2);
-            return `${hh}:${mm}:${ss}`;
-        },
         handleSure() {
             this.$refs.form.validate((valid) => {
+                // debugger;
                 if (valid) {
                     this.status = true;
                     const model = {
-                        initTime: this.formatTime(this.formModel.initTime)
+                        initTime: timestampFormat('HH:mm:ss', this.formModel.initTime),
+                        timestamp:this.formModel.initTime
                     };
 
                     if (this.hasNumber) {

src/views/newMap/display/terminals/index.vue

@@ -12,6 +12,9 @@
     <big-train-runplan-manage v-else-if="picture === 'trafficManageTerminal'" ref="bigTrainRunplanManage" />
     <dispatch-cmd v-else-if="picture === 'dispatchingCommand'" ref="dispatchCmd" />
     <dispatcher-loger v-else-if="picture === 'schedulingPlan'" ref="dispatcherLoger" />
+    <!-- 大客流策略 -->
+    <large-passenger-strategy v-else-if="picture === 'largePassengerStrategy'" ref="largePassengerStrategy" />
+
     <terminal-menu v-if="menuShow" ref="terminalMenu" @pictureChange="pictureChange" @popupTerminalShow="popupTerminalShow" @loadingChange="loadingChange" />
   </div>
 </template>
@@ -34,6 +37,7 @@ import IbpPlate from '@/views/ibp/ibpsystem/index';
 import TrafficTerminalWork from './trafficTerminalWork';
 import BigTrainRunplanManage from '@/views/bigTrainRunplanManage/index';
 import IscsSystem from '@/views/iscs/iscsSystemNew/index';
+import LargePassengerStrategy from './largePassengerStrategy';
 export default {
     name: 'Index',
     components: {
@@ -49,7 +53,8 @@ export default {
         TrafficTerminalWork,
         DigitalStand,
         BigTrainRunplanManage,
-        IscsSystem
+        IscsSystem,
+        LargePassengerStrategy
     },
     data() {
         return {

src/views/newMap/display/terminals/largePassengerStrategy.vue

@@ -0,0 +1,511 @@
+<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;
+            debugger;
+            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>

src/views/newMap/display/terminals/terminalMenu.vue

@@ -95,6 +95,12 @@ export default {
                         code: 'digitalStand',
                         roleList: ['STATION_SUPERVISOR'],
                         click: this.changePictureShow
+                    },
+                    {
+                        name: '大客流策略',
+                        code: 'largePassengerStrategy',
+                        roleList: ['DISPATCHER'],
+                        click: this.changePictureShow
                     }
                 ]
             }