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

This commit is contained in:
joylink_cuiweidong 2022-10-21 15:52:20 +08:00
parent 583830d573
commit baf089d889
4 changed files with 529 additions and 10 deletions

View File

@ -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) {

View File

@ -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 {

View File

@ -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>

View File

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