This commit is contained in:
fan 2021-02-05 18:11:06 +08:00
commit 3366718864

View File

@ -6,20 +6,47 @@
</div>
<div class="bigLPFStrategyR">
<div class="LPFstrategyTop">
<div class="LPFstrategyTitle">客流策略</div>
<!-- <div class="LPFstrategyClose" @click="closeLPFstrategy"><span class="el-icon-close" /></div> -->
<div class="LPFstrategyTitle">
<span class="LPFstrategyTitleL">客流策略</span>
<span v-if="LPFstrategyList.length>0" class="LPFstrategyTitleR"> 推算时长:{{ recoimemmandTime }}分钟 </span>
</div>
</div>
<div class="LPFstrategyListOut">
<div id="LPFstrategyListOut">
<div v-if="LPFstrategyList.length<=0" class="noLPFstrategy">暂无策略</div>
<div v-for="(eachLPFstrategy,index) in LPFstrategyList" v-else :key="index" class="eachLPFstrategy">
<!-- <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.target1 }}</span>
<span class="eachLPFstrategySpan">乘客等待指标: {{ eachLPFstrategy.target2 }}</span>
<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 class="eachLPFstrategyData">综合指标: {{ eachLPFstrategy.coTarget }}</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>
@ -38,11 +65,14 @@ export default {
return {
group:'',
myChart: null,
activeName:'first',
LPFstrategyList:[],
recoimemmandTime:0,
bigLPFStrategyId:'bigLPFStrategyId',
upStandList:[],
downStandList:[],
stationNameList:[]
stationNameList:[],
LPFstandList:[]
};
},
computed: {
@ -51,48 +81,65 @@ export default {
'stationStandList',
'mapConfig'
])
// maxWidth() {
// return this.$store.state.app.width > 1920 ? 1920 * 0.66 : this.$store.state.app.width * 0.66;
// },
// maxHeight() {
// return this.$store.state.app.height > 1080 ? 1080 - 40 : this.$store.state.app.height - 40;
// }
},
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': {
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 + ') 跳停';
eachStrategy.target1 = strategy.target1;
eachStrategy.target2 = strategy.target2;
eachStrategy.coTarget = strategy.coTarget;
// {"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;
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.target1 = strategy.target1;
eachStrategy.target2 = strategy.target2;
eachStrategy.coTarget = strategy.coTarget;
eachStrategy.description = '为站台[' + station.name + '-' + (stand.right ? '右行' : '左行') +
stand.name + '(' + stand.code + ') 设置停站时间,' + strategy.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) {
@ -276,7 +323,7 @@ export default {
this.myChart = echarts.init(document.getElementById(this.bigLPFStrategyId));
if (this.myChart) {
this.myChart.setOption(option);
this.reSize({ width: this.$store.state.app.width * 0.66, height: this.$store.state.app.height - 40 });
this.reSize({ width: this.$store.state.app.width * 0.74, height: this.$store.state.app.height - 40 });
}
resolve(true);
} catch (error) {
@ -285,7 +332,7 @@ export default {
});
},
setWindowSize() {
this.reSize({ width: this.$store.state.app.width * 0.66, height: this.$store.state.app.height - 40 });
this.reSize({ width: this.$store.state.app.width * 0.74, height: this.$store.state.app.height - 40 });
},
reSize(opt) {
if (this.myChart) {
@ -319,8 +366,9 @@ export default {
background: #fff;
font-size: 14px;
margin-left: 2%;
border-radius: 5px;
}
.LPFstrategyTop,.bigLPFStrategyLTitle{
.LPFstrategyTop{
background:#fff;
height: 40px;
border-bottom: 1px #d4d4d4 solid;
@ -330,14 +378,22 @@ export default {
left:0;
}
.bigLPFStrategyLTitle{
padding: 10px;
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: 10px;
padding-left: 15px;
font-size: 15px;
padding-right: 20px;
}
.LPFstrategyClose{
float: right;
@ -345,11 +401,11 @@ export default {
padding: 5px;
margin-top: 5px;
}
.LPFstrategyListOut{
#LPFstrategyListOut{
height: 100%;
overflow: auto;
background: #f1f1f1;
padding-bottom: 10px;
padding-bottom:20px;
border-bottom: 1px #d4d4d4 solid;
&::-webkit-scrollbar {
width: 5px;
@ -376,18 +432,20 @@ export default {
margin-left:50px;
}
.bigLPFStrategyL{
width: 66%;
width: 74%;
float: left;
height: 100%;
padding: 40px 0px 0px 0px;
position: relative;
}
.bigLPFStrategyR{
width: 34%;
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%;
@ -408,9 +466,45 @@ export default {
padding-top: 5px;
padding-bottom: 5px;
}
.bigLPFStrategyLChart{}
#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>