511 lines
18 KiB
Vue
511 lines
18 KiB
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>
|