南京二调整
This commit is contained in:
fan
parent
f96368b2ec
commit
c222cf19a8
538
src/views/newMap/display/terminals/displayBaSiDi/atr.vue
Normal file
538
src/views/newMap/display/terminals/displayBaSiDi/atr.vue
Normal file
@ -0,0 +1,538 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
class="haerbin-01__systerm"
|
||||
:title="title"
|
||||
:modal="false"
|
||||
width="600px"
|
||||
:visible.sync="show"
|
||||
:before-close="doClose"
|
||||
>
|
||||
<div style="padding: 0 10px;">
|
||||
<el-row>
|
||||
<span style="color:#000;font-size: 16px;font-weight: bold;">选择列车</span>
|
||||
<hr style="display: inline-block;width: 480px;">
|
||||
</el-row>
|
||||
<el-row style="padding: 5px;">
|
||||
<el-col :span="11" style="height: 28px;line-height: 28px;">
|
||||
<el-radio v-model="train" :disabled="train === 'one'" label="all">所有列车</el-radio>
|
||||
</el-col>
|
||||
<el-col :span="4" style="height: 28px;line-height: 28px;text-align: right;">
|
||||
<div>当前状态：</div>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-input v-model="input" size="mini" :disabled="true" placeholder="请输入内容" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding: 5px;">
|
||||
<el-col :span="4" style="height: 28px;line-height: 28px;">
|
||||
<el-radio v-model="train" :disabled="train === 'all'" label="one">单列车号</el-radio>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-select v-model="trainCode" :disabled="train !== 'one'" style="width: 160px" size="mini" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in trainList"
|
||||
:key="item.code"
|
||||
:label="item.code"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="4" style="height: 28px;line-height: 28px;text-align: right;">
|
||||
<div>当前状态：</div>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-input v-model="input" size="mini" :disabled="true" placeholder="请输入内容" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding: 5px 0;">
|
||||
<span style="color:#000;font-size: 16px;font-weight: bold;">选择调度模式</span>
|
||||
<hr style="display: inline-block;width: 170px;">
|
||||
<span style="color:#000;font-size: 16px;font-weight: bold;">调整行车间隔</span>
|
||||
<hr style="display: inline-block;width: 170px;">
|
||||
</el-row>
|
||||
<el-row style="padding: 5px;">
|
||||
<el-col :span="12" style="height: 28px;line-height: 28px;">
|
||||
<el-radio v-model="atrMode" :disabled="!train" label="TIME_TABLE_REGULATION">时刻表调度</el-radio>
|
||||
</el-col>
|
||||
<el-col :span="6" style="height: 28px;line-height: 28px;">
|
||||
<el-radio v-model="intervalMode" :disabled="atrMode !== 'HEADWAY_REGULATION_FRONT'" label="trainNumber">列车个数</el-radio>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-input-number v-model="trainNumber" size="mini" :min="0" :max="999" :disabled="intervalMode !== 'trainNumber'" controls-position="right" label="列车个数" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding: 5px;">
|
||||
<el-col :offset="12" :span="6" style="height: 28px;line-height: 28px;">
|
||||
<el-radio v-model="intervalMode" :disabled="atrMode !== 'HEADWAY_REGULATION_FRONT'" label="trainInterval">间隔时间（秒）</el-radio>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-input-number v-model="trainInterval" size="mini" :disabled="intervalMode !== 'trainInterval'" :min="0" :max="999" controls-position="right" label="间隔时间" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding: 5px;">
|
||||
<el-col :span="12" style="height: 28px;line-height: 28px;">
|
||||
<el-radio v-model="atrMode" :disabled="!train || train === 'one'" label="HEADWAY_REGULATION_FRONT">列车间隔调度-前调</el-radio>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button :disabled="!intervalMode" style="height: 28px;width: 260px;" @click="computeInterval">计算</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding: 5px;">
|
||||
<el-col :span="12">
|
||||
<el-radio v-model="atrMode" :disabled="!train || train === 'one'" label="HEADWAY_REGULATION_FRONT_AND_BACK">列车间隔调度-前调+后调</el-radio>
|
||||
</el-col>
|
||||
<el-col :span="2" style="height: 28px;line-height: 28px;">
|
||||
<span>最小</span>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="computeName" :disabled="true" size="mini" />
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="1">
|
||||
<el-input v-model="min" :disabled="true" size="mini" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding: 5px;">
|
||||
<el-col :span="2" :offset="12" style="height: 28px;line-height: 28px;">
|
||||
<span>最佳</span>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="computeName" size="mini" :disabled="true" />
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="1">
|
||||
<el-input v-model="avg" size="mini" :disabled="true" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding: 5px;">
|
||||
<el-col :span="12" style="height: 28px;line-height: 28px;">
|
||||
<el-radio v-model="atrMode" :disabled="!train" label="REGULATION_OFF">关闭自动调度</el-radio>
|
||||
</el-col>
|
||||
<el-col :span="2" style="height: 28px;line-height: 28px;">
|
||||
<span>最大</span>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="computeName" size="mini" :disabled="true" />
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="1">
|
||||
<el-input v-model="max" size="mini" :disabled="true" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding: 5px 0">
|
||||
<span style="color:#000;font-size: 16px;font-weight: bold;">选择时间项（人工调度）</span>
|
||||
<hr style="display: inline-block;width: 370px;">
|
||||
</el-row>
|
||||
<el-row style="padding: 5px;">
|
||||
<el-col :span="4">
|
||||
<el-radio v-model="timeTerm" :disabled="atrMode !== 'REGULATION_OFF'" label="stop" @change="termChange">停站时间</el-radio>
|
||||
<el-radio v-model="timeTerm" :disabled="atrMode !== 'REGULATION_OFF'" label="driving" @change="termChange">行驶时间</el-radio>
|
||||
<el-radio v-model="timeTerm" :disabled="atrMode !== 'REGULATION_OFF'" label="run" @change="termChange">不停/停站</el-radio>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-table v-show="timeTerm === 'stop'" ref="table1" :data="tableData1" style="width: 100%" height="80">
|
||||
<el-table-column prop="direction" label="方向" />
|
||||
<el-table-column prop="name" label="站名" />
|
||||
<!--<el-table-column prop="time" label="时间" />-->
|
||||
<el-table-column label="时间" prop="time1">
|
||||
<template slot-scope="scope">
|
||||
<el-input-number v-model="scope.row.time" size="mini" :min="-1" :controls="false" style="width: 100%" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="timeRange" label="推荐时间" />
|
||||
</el-table>
|
||||
<el-table v-show="timeTerm === 'driving'" ref="table2" :data="tableData2" style="width: 100%" height="80">
|
||||
<el-table-column prop="follow" label="从" />
|
||||
<el-table-column prop="to" label="至" />
|
||||
<!--<el-table-column prop="time" label="时间" />-->
|
||||
<el-table-column label="时间" prop="time2">
|
||||
<template slot-scope="scope">
|
||||
<el-input-number v-model="scope.row.time" size="mini" :min="-1" :controls="false" style="width: 100%" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="timeRange" label="推荐时间" />
|
||||
</el-table>
|
||||
<el-table v-show="timeTerm === 'run'" ref="table3" :data="tableData3" style="width: 100%" height="80">
|
||||
<el-table-column prop="direction" label="方向" />
|
||||
<el-table-column prop="name" label="站名" />
|
||||
<el-table-column label="不停" prop="stop">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="scope.row.stop" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table v-show="!timeTerm" ref="table4">
|
||||
<el-table-column prop="follow" label="从" />
|
||||
<el-table-column prop="to" label="至" />
|
||||
<el-table-column prop="time" label="时间" />
|
||||
<el-table-column prop="timeRange" label="推荐时间" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>
|
||||
<el-button style="width: 100px;height: 28px;margin-right: 103px;" @click="showTrainInfo">显示列车信息</el-button>
|
||||
<el-button style="width: 100px;height: 28px;" @click="commit">执行</el-button>
|
||||
<el-button style="width: 100px;height: 28px;" @click="reset">重设</el-button>
|
||||
<el-button style="width: 100px;height: 28px;" @click="doClose">关闭</el-button>
|
||||
</div>
|
||||
<el-dialog
|
||||
width="500px"
|
||||
title="列车信息"
|
||||
:visible.sync="innerVisible"
|
||||
append-to-body
|
||||
>
|
||||
<el-table :data="showTrainList" style="width: 100%" height="500px">
|
||||
<el-table-column label="列车号">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.destinationCode + scope.row.serviceNumber + scope.row.tripNumber.substring(2) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="所在区段">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getSectionName(scope.row.code) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import CMD from '@/scripts/cmdPlugin/CommandEnum';
|
||||
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
|
||||
export default {
|
||||
name:'ATRDialog',
|
||||
data() {
|
||||
return {
|
||||
train: '',
|
||||
trainCode: '',
|
||||
atrMode: '',
|
||||
intervalMode: '',
|
||||
trainInterval: 90,
|
||||
min: '',
|
||||
max: '',
|
||||
avg: '',
|
||||
trainNumber: 4,
|
||||
tableData: [],
|
||||
tableData1: [],
|
||||
tableData2: [],
|
||||
tableData3: [],
|
||||
tableData4: [],
|
||||
showTrainList: [],
|
||||
input: '',
|
||||
timeTerm: '',
|
||||
sortStationList: [],
|
||||
noStopList: [],
|
||||
dialogShow:false,
|
||||
innerVisible: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
show() {
|
||||
return this.dialogShow && !this.$store.state.menuOperation.break;
|
||||
},
|
||||
title() {
|
||||
return '时刻表';
|
||||
},
|
||||
...mapGetters('map', [
|
||||
'trainList',
|
||||
'stationList',
|
||||
'stationStandList'
|
||||
]),
|
||||
computeName() {
|
||||
if (this.intervalMode === 'trainNumber') {
|
||||
return '间隔时间';
|
||||
} else if (this.intervalMode === 'trainInterval') {
|
||||
return '列车数量';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
train(val) {
|
||||
if (val === 'all') {
|
||||
this.tableData1.forEach(item => {
|
||||
const stand = this.$store.getters['map/getDeviceByCode'](item.code);
|
||||
item.time = stand.parkingTime;
|
||||
});
|
||||
this.trainCode = '';
|
||||
} else if (val === 'one' && this.trainCode) {
|
||||
this.tableData1.forEach(item => {
|
||||
const stand = this.$store.getters['map/getDeviceByCode'](item.code);
|
||||
item.time = stand.parkingTimeMap[this.trainCode];
|
||||
});
|
||||
this.atrMode = 'REGULATION_OFF';
|
||||
}
|
||||
},
|
||||
trainCode(val) {
|
||||
if (this.train === 'one') {
|
||||
this.tableData1.forEach(item => {
|
||||
const stand = this.$store.getters['map/getDeviceByCode'](item.code);
|
||||
item.time = ((stand.parkingTimeMap || {})[val]) || stand.parkingTime;
|
||||
});
|
||||
}
|
||||
},
|
||||
atrMode(val) {
|
||||
this.intervalMode = '';
|
||||
if (val !== 'REGULATION_OFF') {
|
||||
this.timeTerm = '';
|
||||
}
|
||||
},
|
||||
intervalMode(val) {
|
||||
this.min = '';
|
||||
this.max = '';
|
||||
this.avg = '';
|
||||
},
|
||||
'$store.state.map.activeTrainListUpdate': function (val) {
|
||||
if (val) {
|
||||
const activeTrainList = this.$store.state.map.activeTrainList;
|
||||
this.showTrainList = [];
|
||||
activeTrainList.forEach((trainCode)=>{
|
||||
const train = this.$store.getters['map/getDeviceByCode'](trainCode);
|
||||
if (train && train.sectionCode) {
|
||||
this.showTrainList.push(train);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showTrainList = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.sortStationList = [...this.stationList];
|
||||
this.sortStationList.sort((station1, station2) => {
|
||||
return station1.sn - station2.sn;
|
||||
});
|
||||
const standMap = {};
|
||||
this.stationStandList.forEach(stand => {
|
||||
if (standMap[stand.stationCode]) {
|
||||
standMap[stand.stationCode].push(stand);
|
||||
} else {
|
||||
standMap[stand.stationCode] = [stand];
|
||||
}
|
||||
});
|
||||
for (let i = 0; i < this.sortStationList.length; i++) {
|
||||
const standList = standMap[this.sortStationList[i].code];
|
||||
if (!standList) {
|
||||
continue;
|
||||
}
|
||||
let rightStand = '';
|
||||
let leftStand = '';
|
||||
standList.forEach(stand => {
|
||||
if (stand.right) {
|
||||
rightStand = this.$store.getters['map/getDeviceByCode'](stand.code);
|
||||
} else {
|
||||
leftStand = this.$store.getters['map/getDeviceByCode'](stand.code);
|
||||
}
|
||||
});
|
||||
this.tableData1.push({ direction: '>', name: this.sortStationList[i].name, time: rightStand.parkingTime, timeRange: '020-060', code: rightStand.code });
|
||||
this.tableData1.push({ direction: '<', name: this.sortStationList[i].name, time: leftStand.parkingTime, timeRange: '020-060', code: leftStand.code });
|
||||
this.tableData3.push({ direction: '>', name: this.sortStationList[i].name, stop: false, code: rightStand.code });
|
||||
this.tableData3.push({ direction: '<', name: this.sortStationList[i].name, stop: false, code: leftStand.code });
|
||||
if (i === this.sortStationList.length - 1) {
|
||||
this.tableData2.push({ follow: '>' + this.sortStationList[i].name, to: '<' + this.sortStationList[i].name, time: 0, timeRange: '060-300', code: rightStand.code });
|
||||
this.tableData2.push({ follow: '<' + this.sortStationList[i].name, to: '<' + this.sortStationList[i - 1].name, time: 0, timeRange: '060-300', code: leftStand.code });
|
||||
} else if ( i === 0 ) {
|
||||
this.tableData2.push({ follow: '<' + this.sortStationList[i].name, to: '>' + this.sortStationList[i].name, time: 0, timeRange: '060-300', code: rightStand.code });
|
||||
this.tableData2.push({ follow: '>' + this.sortStationList[i].name, to: '>' + this.sortStationList[i + 1].name, time: 0, timeRange: '060-300', code: leftStand.code });
|
||||
} else {
|
||||
this.tableData2.push({ follow: '<' + this.sortStationList[i].name, to: '<' + this.sortStationList[i - 1].name, time: 0, timeRange: '060-300', code: rightStand.code });
|
||||
this.tableData2.push({ follow: '>' + this.sortStationList[i].name, to: '>' + this.sortStationList[i + 1].name, time: 0, timeRange: '060-300', code: leftStand.code });
|
||||
}
|
||||
}
|
||||
},
|
||||
getSectionName(code) {
|
||||
const train = this.$store.getters['map/getDeviceByCode'](code);
|
||||
const section = this.$store.getters['map/getDeviceByCode'](train.sectionCode);
|
||||
return section ? section.name : '';
|
||||
},
|
||||
computeInterval() {
|
||||
const step = {
|
||||
cmdType: CMD.Train.CMD_TRAIN_CALCULATE_INTERVAL,
|
||||
operate: 'Train_Calculate_Interval',
|
||||
param: { calculateParam: {}},
|
||||
over:true
|
||||
};
|
||||
if (this.intervalMode === 'trainNumber') {
|
||||
step.param.calculateParam.trainNumber = this.trainNumber;
|
||||
} else if (this.intervalMode === 'trainInterval') {
|
||||
step.param.calculateParam.interval = this.trainInterval;
|
||||
}
|
||||
this.$store.dispatch('trainingNew/next', step).then(({valid, response}) => {
|
||||
if (valid) {
|
||||
this.trainInterval = response.data.intervalTime;
|
||||
this.trainNumber = response.data.trainNumber;
|
||||
this.min = response.data.min;
|
||||
this.max = response.data.max;
|
||||
this.avg = response.data.avg;
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
if (error && error.code == '10017') {
|
||||
this.$message.error(error.message);
|
||||
} else {
|
||||
this.$message.error('命令执行失败');
|
||||
}
|
||||
});
|
||||
},
|
||||
showTrainInfo() {
|
||||
this.innerVisible = true;
|
||||
},
|
||||
doShow() {
|
||||
this.initData();
|
||||
this.dialogShow = true;
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
this.reset();
|
||||
},
|
||||
reset() {
|
||||
this.train = '';
|
||||
this.atrMode = '';
|
||||
this.timeTerm = '';
|
||||
this.trainCode = '';
|
||||
},
|
||||
commit() {
|
||||
if (!this.train || (this.train === 'one' && !this.trainCode)) {
|
||||
this.$message.error('请选择列车！');
|
||||
return;
|
||||
} else if (!this.atrMode) {
|
||||
this.$message.error('请选择调度模式！');
|
||||
return;
|
||||
} else if (this.atrMode === 'REGULATION_OFF' && !this.timeTerm) {
|
||||
this.$message.error('请选择时间项！');
|
||||
return;
|
||||
}
|
||||
const param = {
|
||||
groupNumber: this.train === 'one' ? this.trainCode : '',
|
||||
parkingAlwaysValid: true,
|
||||
regulationParam: null,
|
||||
regulation: this.atrMode
|
||||
};
|
||||
if (this.atrMode === 'REGULATION_OFF') {
|
||||
if (this.timeTerm === 'stop') {
|
||||
const standParkingTime = {};
|
||||
this.tableData1.forEach(item => {
|
||||
standParkingTime[item.code] = item.time;
|
||||
});
|
||||
param.regulationParam = {
|
||||
parkTimeMap: standParkingTime,
|
||||
runTimeMap: null,
|
||||
skipMap: null
|
||||
};
|
||||
} else if (this.timeTerm === 'driving') {
|
||||
const runTimeMap = {};
|
||||
this.tableData2.forEach(item => {
|
||||
runTimeMap[item.code] = item.time;
|
||||
});
|
||||
param.regulationParam = {
|
||||
parkTimeMap: null,
|
||||
runTimeMap: runTimeMap,
|
||||
skipMap: null
|
||||
};
|
||||
} else if (this.timeTerm === 'run') {
|
||||
const skipMap = {};
|
||||
this.tableData3.forEach(item => {
|
||||
skipMap[item.code] = item.stop;
|
||||
});
|
||||
param.regulationParam = {
|
||||
parkTimeMap: null,
|
||||
runTimeMap: null,
|
||||
skipMap: skipMap
|
||||
};
|
||||
}
|
||||
} else if (this.atrMode === 'HEADWAY_REGULATION_FRONT') {
|
||||
param.regulationParam = {
|
||||
intervalTime: this.trainInterval
|
||||
};
|
||||
}
|
||||
|
||||
const step = {
|
||||
cmdType: CMD.Train.CMD_TRAIN_REGULATION,
|
||||
operate: OperationEvent.StationStand.setStopTime.confirm,
|
||||
param: param,
|
||||
over:true
|
||||
};
|
||||
|
||||
this.$store.dispatch('trainingNew/next', step).then(({ valid }) => {
|
||||
if (valid) {
|
||||
this.dialogShow = false;
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
if (error && error.code == '10017') {
|
||||
this.$message.error(error.message);
|
||||
} else {
|
||||
this.$message.error('命令执行失败');
|
||||
}
|
||||
});
|
||||
},
|
||||
termChange(val) {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.actualTimetable{padding:0px 15px;}
|
||||
.actualTimetableT{width:100%;position: relative;}
|
||||
.defaultTimetableT{width:100%;position: relative;overflow:hidden;}
|
||||
.actualTimetableTtext,.defaultTimetableTtext{position:absolute;height: 20px;padding-right:5px;font-size:15px;color: #676767;background:#e2e2e2;font-weight: bold;}
|
||||
.actualTimetableTLine,.defaultTimetableTLine{display:inline-block;margin-left:10px;width:100%;border-bottom: 1px #A0A0A0 solid;vertical-align: top;height: 9px;}
|
||||
.actualTimetableForm{}
|
||||
.actualTimeFormEach{margin-top: 10px;}
|
||||
.actualTimeFormEach span{font-size:15px;color: #151515;}
|
||||
.actualTimeFormValue{
|
||||
font-size:15px;
|
||||
color: #151515;
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
border: 1px #A2A2A2 solid;
|
||||
width: 810px;
|
||||
}
|
||||
.defaultTimetable{
|
||||
padding:15px 15px 0px 15px;
|
||||
}
|
||||
// .defaultTimetab{
|
||||
// padding: 10px 15px 10px 15px;
|
||||
// }
|
||||
.defaultTimetableM{margin-top:10px;}
|
||||
.defaultTimetableB{display:inline-block;width:100%;margin-top: 10px;}
|
||||
#defaultClearSele{margin-right:10px;width:90px;}
|
||||
#defaultClearAll{width:90px;}
|
||||
#defaultShowTime{float:right;width:90px;}
|
||||
.defaultTimetableBtn{
|
||||
background:transparent;
|
||||
border:1px#9C9C9C solid ;
|
||||
height:auto ;
|
||||
outline:none;
|
||||
text-align:center;
|
||||
display: inline-block;
|
||||
padding:4px 0px;
|
||||
color:#090909;
|
||||
cursor: pointer;
|
||||
}
|
||||
.defaultTimetableBtn.disabled{border:1px #A9A9A9 solid ;color: #A7A7A7; cursor: no-drop;}
|
||||
.ttlButtonGroup{
|
||||
border-top: 1px #6d6d6d solid;
|
||||
margin-top: 10px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
#changeActual{margin-right:10px;width:120px}
|
||||
#changeDefault{width:120px;margin-right:175px;}
|
||||
#settingTimetable{width:130px;margin-right:10px;}
|
||||
#resetTimetable{width:130px;margin-right:10px;}
|
||||
#closeTimetable{width:130px;}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.ttl.haerbin-01__systerm .el-dialog .el-dialog__body{
|
||||
background: #E2E2E2;
|
||||
padding:20px 0px 10px 0px;
|
||||
}
|
||||
.defaultTimetab.el-table .cell{
|
||||
padding-top:5px;padding-bottom:5px;
|
||||
}
|
||||
</style>
|
||||
261
src/views/newMap/display/terminals/displayBaSiDi/carPack.vue
Normal file
261
src/views/newMap/display/terminals/displayBaSiDi/carPack.vue
Normal file
@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag class="nanjing-02__systerm route-setting" :title="title" :visible.sync="show" width="900px" label-position="top" :before-close="doClose" :z-index="2000" :modal="false" :close-on-click-modal="false">
|
||||
<div style="padding: 5px;">
|
||||
<div class="content_box">
|
||||
<div class="el-button" :class="activeIndex == 0 ? 'active' : ''" style="width: 49%;" @click="handleSelect(0)">Mileage and inspection</div>
|
||||
<div class="el-button" :class="activeIndex == 1 ? 'active' : ''" style="width: 49%;" @click="handleSelect(1)">Cargroup management</div>
|
||||
</div>
|
||||
<div v-if="activeIndex == 0" class="table">
|
||||
<span>Range of car group number: 401(1/6) - 450(1/6)</span>
|
||||
<el-table
|
||||
ref="tempTable"
|
||||
class="table_content_box"
|
||||
:data="tempData1"
|
||||
border
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header_box"
|
||||
size="mini"
|
||||
highlight-current-row
|
||||
:height="340"
|
||||
>
|
||||
<el-table-column prop="firstGroup" label="First car group" style="margin-left:30px" :width="100" />
|
||||
<el-table-column prop="lastGroup" label="Last car group" :width="100" />
|
||||
<el-table-column prop="totalmileage" label="Total mileage" :width="95" />
|
||||
<el-table-column prop="recentDate" label="Recent inspection date" :width="150" />
|
||||
<el-table-column prop="mileageSince" label="Mileage since recent inspection" :width="200" />
|
||||
<el-table-column prop="correction" label="Correction mileage" />
|
||||
<el-table-column label="Carry out inspection" :width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="scope.row.carryOut" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-if="activeIndex == 1" class="table">
|
||||
<span>Range of car group number: 401(1/6) - 450(1/6)</span>
|
||||
<el-table
|
||||
ref="tempTable"
|
||||
class="table_content_box"
|
||||
:data="tempData"
|
||||
border
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header_box"
|
||||
size="mini"
|
||||
highlight-current-row
|
||||
:height="340"
|
||||
>
|
||||
<el-table-column prop="serviceNo" label="Train service No." style="margin-left:30px" :width="90" />
|
||||
<el-table-column prop="trainId" label="Train-ID" :width="80" />
|
||||
<el-table-column prop="firstGroup" label="First car group" :width="70" />
|
||||
<el-table-column prop="lastGroup" label="Last car group" :width="70" />
|
||||
<el-table-column prop="startStation" label="Start station" :width="110">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.startStation" clearable placeholder="请选择" size="mini">
|
||||
<el-option
|
||||
v-for="item in stationList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startTime" label="Start time">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.startTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="terminalStation" label="Terminal station" :width="110">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.terminalStation" clearable placeholder="请选择" size="mini">
|
||||
<el-option
|
||||
v-for="item in stationList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="terminalTime" label="Terminal time">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.terminalTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="In service" :width="65">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="scope.row.inService" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div style="overflow: hidden;">
|
||||
<el-button style="float: left;" @click="cancel">Refresh</el-button>
|
||||
<el-button style="float: left;" @click="cancel">Load</el-button>
|
||||
<el-button style="float: left;" @click="cancel">Delete</el-button>
|
||||
<el-button style="float: left;" @click="cancel">Insert</el-button>
|
||||
|
||||
<el-button style="float: right;" @click="cancel">Close</el-button>
|
||||
<el-button class="disabled" :loading="loading" style="float: right;" @click="commit">Execute</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
|
||||
// import { EventBus } from '@/scripts/event-bus';
|
||||
// import CMD from '@/scripts/cmdPlugin/CommandEnum';
|
||||
|
||||
export default {
|
||||
name: 'RouteCreate',
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
loading: false,
|
||||
selected: null,
|
||||
activeIndex: 0,
|
||||
tempData1: [
|
||||
{
|
||||
firstGroup: '4011',
|
||||
lastGroup: '4016',
|
||||
totalmileage: '0',
|
||||
recentDate: '01.01.1970',
|
||||
mileageSince: '0',
|
||||
correction: '0',
|
||||
carryOut: false
|
||||
},
|
||||
{
|
||||
firstGroup: '4021',
|
||||
lastGroup: '4026',
|
||||
totalmileage: '0',
|
||||
recentDate: '01.01.1970',
|
||||
mileageSince: '0',
|
||||
correction: '0',
|
||||
carryOut: false
|
||||
}
|
||||
],
|
||||
tempData: [
|
||||
{
|
||||
serviceNo: 47,
|
||||
trainId: '07474807',
|
||||
firstGroup: '',
|
||||
lastGroup: '',
|
||||
startStation: '',
|
||||
startTime: '24.07.2008 22:08:51',
|
||||
terminalStation: '',
|
||||
terminalTime: '24.07.2008 22:08:51',
|
||||
inService: false
|
||||
},
|
||||
{
|
||||
serviceNo: 67,
|
||||
trainId: '07474808',
|
||||
firstGroup: '',
|
||||
lastGroup: '',
|
||||
startStation: '',
|
||||
startTime: '24.07.2008 22:08:51',
|
||||
terminalStation: '',
|
||||
terminalTime: '24.07.2008 22:08:51',
|
||||
inService: false
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'map',
|
||||
'stationList'
|
||||
]),
|
||||
show() {
|
||||
return this.dialogShow && !this.$store.state.menuOperation.break;
|
||||
},
|
||||
title() {
|
||||
return '[bjdvt1/a1bj]-0-Process/Realtime - Depot Service';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadInitData(map) {
|
||||
console.log(map, 11111);
|
||||
},
|
||||
doShow(operate, selected) {
|
||||
this.dialogShow = true;
|
||||
this.selected = selected;
|
||||
|
||||
this.loadInitData(this.map);
|
||||
|
||||
this.$nextTick(function () {
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
});
|
||||
},
|
||||
doClose() {
|
||||
|
||||
this.loading = false;
|
||||
this.dialogShow = false;
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
},
|
||||
handleSelect(tab) {
|
||||
this.activeIndex = tab;
|
||||
},
|
||||
commit() {
|
||||
// const operate = {
|
||||
// send: true,
|
||||
|
||||
// operation: OperationEvent.Section.newtrain.menu.operation,
|
||||
// cmdType: CMD.Section.CMD_NEW_TRAIN,
|
||||
// val: '' + this.direction + '::' + this.trainCode
|
||||
// };
|
||||
// this.loading = true;
|
||||
// this.$store.dispatch('trainingNew/next', operate).then(({ valid }) => {
|
||||
// this.loading = false;
|
||||
// if (valid) {
|
||||
// this.doClose();
|
||||
// }
|
||||
// }).catch(() => {
|
||||
// this.loading = false;
|
||||
// this.doClose();
|
||||
// EventBus.$emit('sendMsg', {message: '命令执行失败！'});
|
||||
// });
|
||||
},
|
||||
cancel() {
|
||||
const operate = {
|
||||
operation: OperationEvent.Command.cancel.menu.operation
|
||||
};
|
||||
|
||||
this.$store.dispatch('trainingNew/next', operate).then(({ valid }) => {
|
||||
if (valid) {
|
||||
this.doClose();
|
||||
}
|
||||
}).catch(() => {
|
||||
this.doClose();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.route-setting {
|
||||
.content_box {
|
||||
margin-bottom: 10px;
|
||||
.el-button{
|
||||
&.active{
|
||||
background: #969696;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table_content_box{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/deep/ {
|
||||
.table{
|
||||
.table_header_box{
|
||||
.cell{
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
483
src/views/newMap/display/terminals/displayBaSiDi/index.vue
Normal file
483
src/views/newMap/display/terminals/displayBaSiDi/index.vue
Normal file
@ -0,0 +1,483 @@
|
||||
<template>
|
||||
<div class="main" :style="{width: '100%',height:'100%',position:'absolute',overflow:'hidden'}" style="background: #000;">
|
||||
<ba-si-di ref="baSiDi" @handleDialogShow="handleDialogShow" />
|
||||
<rps-dialog ref="rpsDialog" :is-run-plan="isRunPlan" :train-list="trainList" />
|
||||
<tro-dialog ref="troDialog" :is-run-plan="isRunPlan" :train-list="trainList" :station-list="stationList" />
|
||||
<car-pack ref="carPack" />
|
||||
<tro-detail ref="troDetail" :is-run-plan="isRunPlan" :train-list="trainList" :station-list="stationList" @goTroDialog="troClick" />
|
||||
<tra-dialog ref="traDialog" @openTrainTrunkDetail="openTrainTrunkDetail" />
|
||||
<ttl-dialog ref="ttlDialog" />
|
||||
<tmt-dialog ref="tmtDialog" />
|
||||
<atr-dialog ref="atrDialog" />
|
||||
<train-trunk-detail ref="trainTrunkDetail" @openTra="openTra" />
|
||||
<set-time ref="setTime" @ConfirmSelectBeginTime="start" />
|
||||
<div class="display-draft">
|
||||
<el-button-group class="button-group-box">
|
||||
<template v-if="!dataError">
|
||||
<el-button type="success" :disabled="isRunPlan" size="small" @click="selectBeginTime">{{ $t('display.demon.drivingByPlan') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button>
|
||||
</template>
|
||||
<el-button type="primary" size="small" @click="back">{{ $t('display.demon.back') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { OperateMode } from '@/scripts/ConstDic';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { creatSubscribe, clearSubscribe, displayTopic, getTopic } from '@/utils/stomp';
|
||||
import SetTime from '@/views/newMap/displayNew/demon/setTime';
|
||||
import { clearSimulation, getSimulationInfoNew, ranAsPlan, exitRunPlan } from '@/api/simulation';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { getSimulationMemberList, getAllSimulationUser } from '@/api/simulation';
|
||||
import { getMemberListCommon, getUserListCommon } from '@/api/rtSimulation';
|
||||
import BaSiDi from './baSiDi';
|
||||
import RpsDialog from './rps';
|
||||
import TroDialog from './tro';
|
||||
import CarPack from './carPack';
|
||||
import TroDetail from './troDetail';
|
||||
import TraDialog from './tra';
|
||||
import TtlDialog from './ttl';
|
||||
import TmtDialog from './tmt';
|
||||
import AtrDialog from './atr';
|
||||
import TrainTrunkDetail from './trainTrunkDetail';
|
||||
import parseStatus from '@/utils/parseStatus';
|
||||
|
||||
export default {
|
||||
name: 'DisplayDraft',
|
||||
components: {
|
||||
BaSiDi,
|
||||
SetTime,
|
||||
RpsDialog,
|
||||
CarPack,
|
||||
TroDialog,
|
||||
TroDetail,
|
||||
TraDialog,
|
||||
TtlDialog,
|
||||
TmtDialog,
|
||||
AtrDialog,
|
||||
TrainTrunkDetail
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
offset: 15,
|
||||
offsetBottom: 15,
|
||||
tipBottom: 0,
|
||||
textStatusHeight: 0,
|
||||
planRunning:false,
|
||||
dataError: false,
|
||||
group:''
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
...mapGetters([
|
||||
'canvasWidth'
|
||||
]),
|
||||
...mapGetters('map', [
|
||||
'stationList',
|
||||
'trainList'
|
||||
]),
|
||||
mode() {
|
||||
return this.$route.params.mode;
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
},
|
||||
isDemon() {
|
||||
return this.mode === 'demon' && !this.project.includes('drts');
|
||||
},
|
||||
isContest() {
|
||||
return this.mode === 'demon' && this.project.includes('drts');
|
||||
},
|
||||
mapId() {
|
||||
return this.$route.query.mapId;
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height;
|
||||
},
|
||||
projectDevice() {
|
||||
return this.$route.query.projectDevice;
|
||||
},
|
||||
isRunPlan() {
|
||||
return this.$store.state.training.started;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'$store.state.socket.permissionOver': function () {
|
||||
this.$alert('用户权限已被收回', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
this.back();
|
||||
}
|
||||
});
|
||||
},
|
||||
'$store.state.socket.equipmentStatus': function (val) {
|
||||
if (val.length) {
|
||||
this.statusMessage(val);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.deviceStateMessages': function (val) {
|
||||
if (val) {
|
||||
this.statusMessageNew(val);
|
||||
}
|
||||
},
|
||||
'$store.state.config.menuBarLoadedCount': function (val) { // menuBar加载完成
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() { // 窗口缩放
|
||||
this.setWindowSize();
|
||||
},
|
||||
'$store.state.training.prdType': function (val) { // 根据权限类型计算高度
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
|
||||
if (this.planRunning) {
|
||||
this.$store.dispatch('training/simulationStart');
|
||||
}
|
||||
},
|
||||
'$store.state.socket.memberChangeCount': function () { // 仿真成员变更
|
||||
this.initMemberUserInfo();
|
||||
},
|
||||
'$store.state.socket.simulationStart':function(val) {
|
||||
if (val) {
|
||||
this.$store.dispatch('training/simulationStart');
|
||||
}
|
||||
},
|
||||
$route() {
|
||||
if (!this.isLesson && !this.isExam) {
|
||||
this.initLoadData();
|
||||
}
|
||||
},
|
||||
'$store.state.menuOperation.selectedCount':function(em) {
|
||||
const device = this.$store.state.menuOperation.selected;
|
||||
if (device && device._type === 'Station' && this.$store.state.menuOperation.subType === 'troButton') {
|
||||
this.$refs.troDialog.doClose();
|
||||
this.$refs.troDetail.doShow(device.code);
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearSubscribe();
|
||||
this.clearSubscribeNew();
|
||||
clearSimulation(this.group);
|
||||
this.$store.dispatch('training/reset');
|
||||
},
|
||||
async mounted() {
|
||||
const _that = this;
|
||||
window.onbeforeunload = () => { _that.clearSubscribe(); _that.clearSubscribeNew(); };
|
||||
this.setWindowSize();
|
||||
this.initLoadData();
|
||||
this.initMemberUserInfo(true);
|
||||
this.$store.dispatch('app/animationsClose');
|
||||
this.$refs.troDialog.doClose();
|
||||
},
|
||||
methods:{
|
||||
// 结束加载状态
|
||||
endViewLoading(isSuccess) {
|
||||
if (!isSuccess) {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
EventBus.$emit('viewLoading', false);
|
||||
});
|
||||
},
|
||||
// 仿真错误时，被动退出时调用
|
||||
async back() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
async statusMessage(list) {
|
||||
if (this.$jlmap) {
|
||||
await this.$store.dispatch('training/updateMapState', list);
|
||||
} else {
|
||||
this.$store.commit('map/updateMapDevice', list);
|
||||
}
|
||||
await this.$store.dispatch('socket/setEquipmentStatus');
|
||||
},
|
||||
async statusMessageNew(deviceStatus) {
|
||||
const list = parseStatus(deviceStatus);
|
||||
await this.$store.dispatch('training/updateMapState', list);
|
||||
await this.$store.dispatch('socket/setDeviceStateMessages');
|
||||
},
|
||||
async subscribe() {
|
||||
this.clearSubscribe();
|
||||
const header = { group: this.$route.query.group || '', 'X-Token': getToken() };
|
||||
creatSubscribe(`${displayTopic}\/${this.$route.query.group}`, header);
|
||||
await this.$store.dispatch('training/setHasSubscribed');
|
||||
},
|
||||
async subscribeNew() {
|
||||
this.clearSubscribeNew();
|
||||
const header = { 'X-Token': getToken() };
|
||||
creatSubscribe(getTopic('ATS', this.$route.query.group), header);
|
||||
creatSubscribe(getTopic('SYSTIME', this.$route.query.group), header);
|
||||
creatSubscribe(getTopic('STATE', this.$route.query.group), header);
|
||||
await this.$store.dispatch('training/setHasSubscribed');
|
||||
},
|
||||
clearSubscribeNew() {
|
||||
clearSubscribe(getTopic('ATS', this.$route.query.group));
|
||||
clearSubscribe(getTopic('SYSTIME', this.$route.query.group));
|
||||
clearSubscribe(getTopic('STATE', this.$route.query.group));
|
||||
},
|
||||
clearSubscribe() {
|
||||
clearSubscribe(`${displayTopic}\/${this.groupModel}`);
|
||||
},
|
||||
openTra() {
|
||||
this.$refs.traDialog.doShow();
|
||||
},
|
||||
initMemberUserInfo(isFirst = false) {
|
||||
if (this.$route.query.newApi + '' === 'true') {
|
||||
getMemberListCommon(this.$route.query.group).then(resp => {
|
||||
this.$store.dispatch('training/setMemberList', { memberList: resp.data, userId: this.$store.state.user.id });
|
||||
getUserListCommon(this.$route.query.group).then(res => {
|
||||
this.$store.dispatch('training/setSimulationUserList', res.data);
|
||||
if (isFirst) { this.subscribeNew(); }
|
||||
}).catch(() => {
|
||||
this.$messageBox('获取所有仿真用户失败！');
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox('获取仿真成员列表失败！');
|
||||
});
|
||||
} else {
|
||||
// 获取仿真成员列表
|
||||
getSimulationMemberList(this.$route.query.group).then(resp => {
|
||||
this.$store.dispatch('training/setMemberList', { memberList: resp.data, userId: this.$store.state.user.id });
|
||||
getAllSimulationUser(this.$route.query.group).then(res => {
|
||||
this.$store.dispatch('training/setSimulationUserList', res.data);
|
||||
if (isFirst) {
|
||||
this.subscribe();
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$messageBox('获取所有仿真用户失败！');
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox('获取仿真成员列表失败！');
|
||||
});
|
||||
}
|
||||
},
|
||||
// 设置各个按钮的定位
|
||||
setPosition() {
|
||||
this.$nextTick(() => {
|
||||
this.offset = 10;
|
||||
this.offsetBottom = 15;
|
||||
const menuBar = document.getElementById('menuBar');
|
||||
const menuTool = document.getElementById('menuTool');
|
||||
const menuBottom = document.getElementById('menuButton');
|
||||
const menuButtonsBox = document.getElementById('menuButtons_box');
|
||||
const textStatus = document.getElementById('textStatus');
|
||||
if (menuBar) {
|
||||
this.offset = (menuBar.offsetHeight || 0) + 15;
|
||||
}
|
||||
if (menuTool) {
|
||||
this.offset = (menuTool.offsetHeight || 0) + 15;
|
||||
}
|
||||
const buttonWidth = this.width - 1200; // B box widht
|
||||
if (menuBottom && buttonWidth < 780) {
|
||||
this.offsetBottom = (menuBottom.offsetHeight || 0) + 15;
|
||||
}
|
||||
if (menuButtonsBox) {
|
||||
this.tipBottom = (menuButtonsBox.offsetHeight || 0) + 15;
|
||||
}
|
||||
if (textStatus) {
|
||||
this.textStatusHeight = textStatus.offsetHeight || 0;
|
||||
textStatus.style.top = this.offset - 15 + 'px';
|
||||
}
|
||||
});
|
||||
},
|
||||
// 缩放设置
|
||||
setWindowSize() {
|
||||
const width = this.width;
|
||||
const height = this.height;
|
||||
this.$store.dispatch('config/resize', { width, height });
|
||||
// this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
|
||||
},
|
||||
// 初始化
|
||||
initLoadData() {
|
||||
this.group = this.$route.query.group;
|
||||
this.$store.dispatch('training/reset');
|
||||
this.loadSimulationInfo();
|
||||
this.loadMapData();
|
||||
},
|
||||
// 新版地图根据仿真group获取仿真基础信息
|
||||
async loadSimulationInfo() {
|
||||
const resp = await getSimulationInfoNew(this.group);
|
||||
if (resp && resp.code == 200 && resp.data) {
|
||||
if (!resp.data.dataError) {
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause); // 是否暂停判断
|
||||
this.$store.dispatch('training/setInitTime', resp.data.systemTime);
|
||||
this.$store.dispatch('training/countTime');
|
||||
this.$store.dispatch('runPlan/setRunPlanInfo', resp.data.runPlan);
|
||||
this.planRunning = resp.data.planRunning;
|
||||
if (resp.data.planRunning) {
|
||||
this.$store.commit('training/start');
|
||||
}
|
||||
} else {
|
||||
this.$messageBox('此地图数据正在维护中,无法运行！');
|
||||
}
|
||||
this.dataError = resp.data.dataError;
|
||||
}
|
||||
},
|
||||
selectBeginTime() {
|
||||
this.$refs.setTime.doShow();
|
||||
},
|
||||
// 加载地图数据
|
||||
loadMapData() {
|
||||
if (parseInt(this.mapId)) {
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
|
||||
loadMapDataById(this.mapId, 'simulation');
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
start(model) { // 开始仿真
|
||||
const data = {
|
||||
time: model.initTime
|
||||
};
|
||||
if (this.$route.query.prdType === '04') {
|
||||
data.loadNumber = model.loadNum;
|
||||
}
|
||||
ranAsPlan(data, this.group).then(res => {
|
||||
// this.$store.dispatch('training/setInitTime', model.initTime);
|
||||
this.$store.dispatch('training/setInitTime', model.timestamp);
|
||||
}).catch(error => {
|
||||
let message = '';
|
||||
switch (error.code) {
|
||||
case '5001':
|
||||
message = this.$t('error.mapDataError');
|
||||
break;
|
||||
case '5002':
|
||||
message = this.$t('error.runningChartDataError');
|
||||
break;
|
||||
case '5003':
|
||||
message = this.$t('error.runningChartIsNotLoaded');
|
||||
break;
|
||||
case '5004':
|
||||
message = this.$t('error.runningDataError');
|
||||
break;
|
||||
case '5000':
|
||||
message = this.$t('error.systemError');
|
||||
break;
|
||||
case '4000':
|
||||
message = this.$t('error.simulationDoesNotExist');
|
||||
break;
|
||||
case '4001':
|
||||
message = this.$t('error.simulationOperationIsNotDefined');
|
||||
break;
|
||||
case '4002':
|
||||
message = this.$t('error.simulationOperationProcessingMethodNotFound');
|
||||
break;
|
||||
case '4003':
|
||||
message = this.$t('error.simulationOperationFailed');
|
||||
break;
|
||||
case '4004':
|
||||
message = this.$t('error.operationConflict');
|
||||
break;
|
||||
default:
|
||||
message = '按计划行车异常,请退出重试!';
|
||||
// this.$messageBox('按计划行车异常,请退出重试!');
|
||||
break;
|
||||
}
|
||||
this.$messageBox(message + '，' + this.$t('error.startSimulationFailed'));
|
||||
});
|
||||
},
|
||||
end() {
|
||||
exitRunPlan(this.group).then(() => {
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.$store.dispatch('training/setMapDefaultState').then(() => {
|
||||
this.$store.dispatch('map/clearJlmapTrainView');
|
||||
this.$store.dispatch('map/resetActiveTrainList', false);
|
||||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.demon.endSimulationFail'));
|
||||
});
|
||||
},
|
||||
troClick() {
|
||||
this.$refs.troDialog.doShow();
|
||||
},
|
||||
openTrainTrunkDetail(index) {
|
||||
this.$refs.trainTrunkDetail.doShow(index);
|
||||
},
|
||||
handleDialogShow(type) {
|
||||
this.$refs[type].doShow();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
.display-draft {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
bottom: 15px;
|
||||
.button-group-box{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.nanjing-02__systerm .el-dialog {
|
||||
background: #d8d8d8;
|
||||
border: 2px solid rgba(144, 144, 144, 0.8);
|
||||
border-radius: 6px;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
}
|
||||
.nanjing-02__systerm .el-dialog .el-dialog__header {
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
background-image: linear-gradient(#A5A5BA, #FDFEFD);
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.nanjing-02__systerm .el-dialog .el-dialog__title {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
color: #000;
|
||||
border-radius: 4px;
|
||||
padding: 0px 2px;
|
||||
height: 20px;
|
||||
line-height: 24px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.nanjing-02__systerm .el-dialog .el-dialog__headerbtn {
|
||||
background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
top: 6px;
|
||||
right: 5px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.nanjing-02__systerm .el-dialog .el-dialog__headerbtn .el-dialog__close{
|
||||
color: #fff;
|
||||
}
|
||||
.nanjing-02__systerm .el-dialog .el-dialog__body {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin: 0px 1px 1px;
|
||||
border: 2px solid rgb(212 212 212);
|
||||
box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
|
||||
background: #E6E6E6;
|
||||
opacity: 1;
|
||||
}
|
||||
.nanjing-02__systerm .el-dialog .el-button {
|
||||
height: 26px;
|
||||
line-height: 24px;
|
||||
font-size: 13px;
|
||||
padding: 0px;
|
||||
width: 80px;
|
||||
border: 1px solid #8B958A;
|
||||
border-radius: 0px !important;
|
||||
color: #000;
|
||||
background: #E6E6E6;
|
||||
}
|
||||
.nanjing-02__systerm .el-dialog .el-button.disabled {
|
||||
border: 1px solid #B1B1B1;
|
||||
color: #ABABAB;
|
||||
}
|
||||
</style>
|
||||
157
src/views/newMap/display/terminals/displayBaSiDi/rps.vue
Normal file
157
src/views/newMap/display/terminals/displayBaSiDi/rps.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:modal="false"
|
||||
:title="title"
|
||||
:visible.sync="show"
|
||||
:fullscreen="true"
|
||||
:before-close="doClose"
|
||||
:z-index="2003"
|
||||
>
|
||||
<map-system-draft ref="mapCanvas" :no-menu="true" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import MapSystemDraft from '@/views/newMap/mapsystemNew/common/index';
|
||||
import Vue from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'RPS',
|
||||
components: {
|
||||
MapSystemDraft
|
||||
},
|
||||
props: {
|
||||
trainList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
isRunPlan: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
mapData: null,
|
||||
selfJmap: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
show() {
|
||||
return this.dialogShow && !this.$store.state.menuOperation.break;
|
||||
},
|
||||
title() {
|
||||
return '背投系统';
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width - 5;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height - 50;
|
||||
},
|
||||
...mapGetters('map', [
|
||||
'bigScreenConfig'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
|
||||
if (this.dialogShow) {
|
||||
this.handleUpdateScreen();
|
||||
this.$refs.mapCanvas && this.$refs.mapCanvas.mapViewLoaded(false);
|
||||
}
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() { // 窗口缩放
|
||||
this.$store.dispatch('config/resize', { width:this.width, height: this.height });
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.selfJmap && this.selfJmap._disposeFlag) {
|
||||
this.destroy();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.dialogShow = true;
|
||||
if (this.selfJmap) { Vue.prototype.$jlmap = this.selfJmap; }
|
||||
this.$store.dispatch('config/resize', { width:this.width, height: this.height });
|
||||
this.$nextTick(function() {
|
||||
this.$refs.mapCanvas.setMap(this.$store.state.map.map);
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowMode(list, '02');
|
||||
this.$store.dispatch('training/updateMapState', list);
|
||||
!this.isRunPlan && this.$jlmap.clearTrainView();
|
||||
});
|
||||
},
|
||||
destroy() {
|
||||
this.selfJmap.dispose();
|
||||
},
|
||||
handleUpdateScreen() {
|
||||
this.maskOpen = false;
|
||||
if (this.bigScreenConfig.bigScreenSplitConfig && this.bigScreenConfig.bigScreenSplitConfig.length) {
|
||||
const offsetList = this.bigScreenConfig.offsetList;
|
||||
const width = this.bigScreenConfig.width;
|
||||
const height = this.bigScreenConfig.height;
|
||||
const size = {
|
||||
width: (this.$store.state.app.width - 2) * width,
|
||||
height: this.$store.state.app.height * height,
|
||||
list: this.bigScreenConfig.bigScreenSplitConfig.map(ele => ele.position),
|
||||
offsetList: offsetList
|
||||
};
|
||||
this.$jlmap.setUpdateScreen(size);
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowMode(list, '02');
|
||||
} else {
|
||||
this.maskOpen = true;
|
||||
// this.$messageBox('该线路没有大屏切割位置信息, 请前往地图绘制编辑');
|
||||
}
|
||||
},
|
||||
doClose() {
|
||||
this.loading = false;
|
||||
this.dialogShow = false;
|
||||
this.selfJmap = Vue.prototype.$jlmap;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/deep/ .el-dialog {
|
||||
background: rgba(100, 100, 100, 1);
|
||||
position: relative;
|
||||
border: 2px solid rgba(144, 144, 144, 0.8);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
/deep/ .el-dialog .el-dialog__body{
|
||||
background: rgba(100, 100, 100, 1);
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/deep/ .el-dialog .el-dialog__header {
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
}
|
||||
/deep/ .el-dialog .el-dialog__title {
|
||||
color: #fff;
|
||||
}
|
||||
/deep/ .el-dialog .el-dialog__headerbtn {
|
||||
background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
top: 4px;
|
||||
right: 5px;
|
||||
line-height: 16px;
|
||||
}
|
||||
/deep/ .el-dialog__headerbtn .el-dialog__close{
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
662
src/views/newMap/display/terminals/displayBaSiDi/tmt.vue
Normal file
662
src/views/newMap/display/terminals/displayBaSiDi/tmt.vue
Normal file
@ -0,0 +1,662 @@
|
||||
<template>
|
||||
<div v-if="dialogShow" id="faultChoose">
|
||||
<div class="falutChooseTitle">{{ title }}</div>
|
||||
<div class="closeFalutChoose" @click="doClose">
|
||||
<span class="el-icon-close closeFalutChooseIn" />
|
||||
</div>
|
||||
<div class="card" style="padding: 20px;">
|
||||
<div style="padding: 5px;">
|
||||
<el-row>
|
||||
<el-col :span="12"><span>所选位置：</span></el-col>
|
||||
<el-col :span="12"><span>列车号：</span></el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 10px;">
|
||||
<el-col :span="12">
|
||||
<el-input v-model="sectionName" size="mini" style="width: 400px;" :disabled="true" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-input v-model="trainCode" :maxlength="8" size="mini" style="width: 310px;" />
|
||||
<el-button size="mini" icon="el-icon-search" @click="trainFind" />
|
||||
<el-button size="mini" icon="el-icon-refresh-left" @click="resetTrainCode" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="display: flex;justify-content: space-around;margin-top: 20px;">
|
||||
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'show'" @click="changeOperationType('show')">显示列车信息</el-button>
|
||||
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'update'" @click="changeOperationType('update')">修改列车资料</el-button>
|
||||
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'create'" @click="changeOperationType('create')">创建列车号</el-button>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-around;margin-top: 10px;">
|
||||
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'delete'" @click="changeOperationType('delete')">删除列车号</el-button>
|
||||
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'move'" @click="changeOperationType('move')">步进列车号</el-button>
|
||||
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'resort'" @click="changeOperationType('resort')">重排列车号</el-button>
|
||||
</div>
|
||||
<div v-if="operationType === 'show'">
|
||||
<el-table :data="tableData" border style="width: 100%;margin-top: 20px;" height="200">
|
||||
<el-table-column prop="date" label="方向">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.right ? '>':'<' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="列车号">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getTrainCode(scope.row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="位置">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getSectionPosition(scope.row.sectionCode) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="ARS" />
|
||||
<el-table-column prop="address" label="晚点" />
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-else-if="operationType === 'create'" style="display: flex;justify-content: space-between;">
|
||||
<div>
|
||||
<el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200">
|
||||
<el-table-column prop="date" label="方向" width="60">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.right ? '>':'<' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="列车号" width="157">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getTrainCode(scope.row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="位置" width="60">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getSectionPosition(scope.row.sectionCode) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div>
|
||||
<div style="margin-top: 20px;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
|
||||
<span>位置：</span>
|
||||
<el-select v-model="nowSectionCode" :disabled="true" :popper-append-to-body="false" size="mini" style="width: 150px">
|
||||
<el-option
|
||||
v-for="item in sectionList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
|
||||
<span>新列车号：</span>
|
||||
<el-input v-model="newTrainCode" :maxlength="8" size="mini" style="width: 150px;" />
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
|
||||
<span>方向：</span>
|
||||
<el-select v-model="direction" :disabled="true" :popper-append-to-body="false" size="mini" style="width: 80px" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in directionList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
|
||||
<span>设置该列车为自动排列：</span>
|
||||
<el-radio v-model="autoArrange" :disabled="true" label="true">开启</el-radio>
|
||||
<el-radio v-model="autoArrange" :disabled="true" label="false">关闭</el-radio>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
|
||||
<span>车组号：</span>
|
||||
<el-input v-model="groupNumber1" :maxlength="4" size="mini" style="width: 60px;" />
|
||||
<div style="border: 1px solid #DCDFE6;padding: 4px 5px;border-radius: 3px;"><></div>
|
||||
<el-input v-model="groupNumber2" :maxlength="4" :disabled="true" size="mini" style="width: 60px;" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="margin-top: 20px;height: 20px;">插入位置（之前）：</div>
|
||||
<el-table :data="tableData" border style="width: 280px;" height="180">
|
||||
<el-table-column prop="date" label="方向" width="60">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.right ? '>':'<' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="列车号" width="157">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getTrainCode(scope.row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="位置" width="60">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getSectionPosition(scope.row.sectionCode) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="operationType === 'update'" style="display: flex;justify-content: flex-start;">
|
||||
<div>
|
||||
<el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200" @current-change="handleCurrentChange">
|
||||
<el-table-column prop="date" label="方向" width="60" />
|
||||
<el-table-column label="列车号" width="157">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getTrainCode(scope.row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="位置" width="60">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getSectionPosition(scope.row.sectionCode) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div>
|
||||
<div style="margin-top: 20px;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
|
||||
<span>位置：</span>
|
||||
<el-select v-model="nowSectionCode" :disabled="true" :popper-append-to-body="false" size="mini" style="width: 150px">
|
||||
<el-option
|
||||
v-for="item in sectionList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
|
||||
<span>新列车号：</span>
|
||||
<el-input v-model="newTrainCode" size="mini" :maxlength="8" style="width: 150px;" />
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
|
||||
<span>方向：</span>
|
||||
<el-select v-model="direction" :disabled="true" :popper-append-to-body="false" size="mini" style="width: 80px">
|
||||
<el-option
|
||||
v-for="item in directionList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
|
||||
<span>设置该列车为自动排列：</span>
|
||||
<el-radio v-model="autoArrange" :disabled="true" label="true">开启</el-radio>
|
||||
<el-radio v-model="autoArrange" :disabled="true" label="false">关闭</el-radio>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
|
||||
<span>车组号：</span>
|
||||
<el-input v-model="groupNumber1" :disabled="true" :maxlength="4" size="mini" style="width: 60px;" />
|
||||
<div style="border: 1px solid #DCDFE6;padding: 4px 5px;border-radius: 3px;"><></div>
|
||||
<el-input v-model="groupNumber2" :disabled="true" :maxlength="4" size="mini" style="width: 60px;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="operationType === 'delete'" style="display: flex;">
|
||||
<div>
|
||||
<el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200">
|
||||
<el-table-column prop="date" label="方向" width="60" />
|
||||
<el-table-column prop="name" label="列车号" width="157">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getTrainCode(scope.row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="位置" width="60">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getSectionPosition(scope.row.sectionCode) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div style="width: 250px;display: flex;justify-content: space-between;margin-top: 20px;margin-left: 10px;align-items: center;height: 25px;">
|
||||
<div>所选列车号：</div>
|
||||
<el-input v-model="nowTrainCode" :disabled="true" style="width: 150px;" size="mini" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="operationType === 'move'" style="display: flex;justify-content: flex-start;">
|
||||
<div>
|
||||
<el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200" @current-change="handleCurrentChange">
|
||||
<el-table-column prop="date" label="方向" width="60" />
|
||||
<el-table-column prop="name" label="列车号" width="157">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getTrainCode(scope.row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="位置" width="60" />
|
||||
</el-table>
|
||||
</div>
|
||||
<div>
|
||||
<div style="margin-top: 20px;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
|
||||
<span>所选列车号：</span>
|
||||
<el-input v-model="nowTrainCode" :disabled="true" size="mini" style="width: 150px;" />
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;">
|
||||
<span>当前位置：</span>
|
||||
<el-select v-model="nowSectionCode" :disabled="true" size="mini" :popper-append-to-body="false" style="width: 150px">
|
||||
<el-option
|
||||
v-for="item in sectionList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;">
|
||||
<span>新位置：</span>
|
||||
<el-select v-model="newSectionCode" :popper-append-to-body="false" size="mini" style="width: 150px">
|
||||
<el-option
|
||||
v-for="item in sectionList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: flex-end;margin-top: 10px;border-top: 1px solid #c0c0c0;padding-top: 10px;">
|
||||
<el-button v-if="operationType === 'update'" size="mini" :disabled="updateDisable" @click="trainCommit">修改</el-button>
|
||||
<el-button v-if="operationType === 'create'" size="mini" :disabled="createDisable" @click="trainCommit">创建</el-button>
|
||||
<el-button v-if="operationType === 'delete'" size="mini" :disabled="deleteDisable" @click="trainCommit">删除</el-button>
|
||||
<el-button v-if="operationType === 'move'" size="mini" :disabled="moveDisable" @click="trainCommit">步进</el-button>
|
||||
<el-button size="mini" @click="doClose">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<notice-info ref="noticeInfo" pop-class="haerbin-01__systerm" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
|
||||
import CMD from '@/scripts/cmdPlugin/CommandEnum';
|
||||
import { MouseEvent } from '@/scripts/ConstDic';
|
||||
import NoticeInfo from '@/jmapNew/theme/components/menus/childDialog/noticeInfo';
|
||||
|
||||
export default {
|
||||
name: 'RouteCreate',
|
||||
components: {
|
||||
NoticeInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
loading: false,
|
||||
selected: null,
|
||||
tableData: [],
|
||||
sectionName: '',
|
||||
trainCode: '',
|
||||
operationType: 'create',
|
||||
autoArrange: false,
|
||||
nowSectionCode: '',
|
||||
direction: '',
|
||||
newTrainCode: '',
|
||||
groupNumber1: '',
|
||||
groupNumber2: '',
|
||||
nowTrainCode: '',
|
||||
newSectionCode: '',
|
||||
directionList: [{ label: '>', value: 'right' }, { label: '<', value: 'left' }],
|
||||
trainModel: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'stationList',
|
||||
'sectionList'
|
||||
]),
|
||||
show() {
|
||||
return this.dialogShow && !this.$store.state.menuOperation.break;
|
||||
},
|
||||
title() {
|
||||
return '列监';
|
||||
},
|
||||
createDisable() {
|
||||
return !(this.groupNumber1 && this.groupNumber1.length === 4 && this.nowSectionCode && this.newTrainCode && this.newTrainCode.length === 8);
|
||||
},
|
||||
updateDisable() {
|
||||
return !(this.newTrainCode && this.newTrainCode.length === 8);
|
||||
},
|
||||
moveDisable() {
|
||||
return !this.newSectionCode;
|
||||
},
|
||||
deleteDisable() {
|
||||
return !this.nowTrainCode;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.menuOperation.selectedCount':function(em) {
|
||||
const device = this.$store.state.menuOperation.selected;
|
||||
if (device && device.code && device._type === 'Section') {
|
||||
// this.deviceSelect(device);
|
||||
this.nowSectionCode = device.code;
|
||||
} else if (device && device.code && device._type === 'Train' && device._event === MouseEvent.Left) {
|
||||
this.doShow(device);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow(selected) {
|
||||
this.dialogShow = true;
|
||||
if (selected) {
|
||||
this.selected = selected;
|
||||
this.tableData = [selected];
|
||||
this.nowTrainCode = selected.destinationCode + (selected.serviceNumber.substr(1)) + (selected.tripNumber.substr(selected.tripNumber.length - 2));
|
||||
this.nowSectionCode = selected.sectionCode;
|
||||
this.groupNumber1 = selected.code;
|
||||
this.direction = selected.right ? 'right' : 'left';
|
||||
this.operationType = 'show';
|
||||
}
|
||||
|
||||
this.$nextTick(function () {
|
||||
this.dragEvent();
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
});
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
const train = this.$store.getters['map/getDeviceByCode'](val.code);
|
||||
this.selected = train;
|
||||
this.nowTrainCode = train.destinationCode + (train.serviceNumber.substr(1)) + (train.tripNumber.substr(train.tripNumber.length - 2));
|
||||
this.nowSectionCode = train.sectionCode;
|
||||
this.groupNumber1 = train.code;
|
||||
this.direction = train.right ? 'right' : 'left';
|
||||
},
|
||||
doClose() {
|
||||
this.loading = false;
|
||||
this.dialogShow = false;
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
},
|
||||
trainFind() {
|
||||
// this.$store.state.map.activeTrainList
|
||||
this.tableData = [];
|
||||
if (this.trainCode) {
|
||||
this.$store.state.map.activeTrainList.forEach(item => {
|
||||
const train = this.$store.getters['map/getDeviceByCode'](item);
|
||||
const temp = train.destinationCode + (train.serviceNumber.substr(1)) + (train.tripNumber.substr(train.tripNumber.length - 2));
|
||||
if (temp.includes(this.trainCode)) {
|
||||
this.tableData.push(train);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$store.state.map.activeTrainList.forEach(item => {
|
||||
const train = this.$store.getters['map/getDeviceByCode'](item);
|
||||
this.tableData.push(train);
|
||||
});
|
||||
}
|
||||
this.operationType = 'show';
|
||||
},
|
||||
resetTrainCode() {
|
||||
this.trainCode = '';
|
||||
this.tableData = [];
|
||||
},
|
||||
changeOperationType(type) {
|
||||
if (type === 'create') {
|
||||
this.changeShowMode();
|
||||
}
|
||||
if (type === 'create' || type === 'update' || type === 'move' || type === 'delete') {
|
||||
this.$store.state.map.activeTrainList.forEach(item => {
|
||||
const train = this.$store.getters['map/getDeviceByCode'](item);
|
||||
this.tableData.push(train);
|
||||
});
|
||||
} else if (type === 'show') {
|
||||
this.trainFind();
|
||||
}
|
||||
this.operationType = type;
|
||||
},
|
||||
trainCommit() {
|
||||
const params = {};
|
||||
const step = {
|
||||
over: true
|
||||
};
|
||||
if (this.operationType === 'update') {
|
||||
params.groupNumber = this.groupNumber1;
|
||||
params.serviceNumber = '0' + this.newTrainCode.slice(4, 6);
|
||||
params.tripNumber = '0' + this.newTrainCode.slice(6, 8);
|
||||
step.cmdType = CMD.TrainWindow.CMD_TRAIN_SET_PLAN;
|
||||
step.operation = OperationEvent.Train.setPlanTrainId.menu.operation;
|
||||
step.param = params;
|
||||
} else if (this.operationType === 'create') {
|
||||
params.sectionCode = this.nowSectionCode;
|
||||
params.groupNumber = this.groupNumber1;
|
||||
params.dn = this.newTrainCode.slice(0, 4);
|
||||
params.sn = '0' + this.newTrainCode.slice(4, 6);
|
||||
params.tn = '0' + this.newTrainCode.slice(6, 8);
|
||||
step.cmdType = CMD.TrainWindow.CMD_TRAIN_ADD_TRAIN_TRACE;
|
||||
step.operation = OperationEvent.Train.addTrainId.menu.operation;
|
||||
step.param = params;
|
||||
} else if (this.operationType === 'delete') {
|
||||
params.groupNumber = this.groupNumber1;
|
||||
step.cmdType = CMD.TrainWindow.CMD_TRAIN_REMOVE_TRAIN_TRACE;
|
||||
step.operation = OperationEvent.Train.delTrainId.menu.operation;
|
||||
step.param = params;
|
||||
} else if (this.operationType === 'move') {
|
||||
params.groupNumber = this.groupNumber1;
|
||||
params.sectionCode = this.newSectionCode;
|
||||
step.cmdType = CMD.TrainWindow.CMD_TRAIN_MOVE_TRAIN_TRACE;
|
||||
step.operation = OperationEvent.Train.moveTrainId.menu.operation;
|
||||
step.param = params;
|
||||
}
|
||||
this.$store.dispatch('trainingNew/next', step).then(({ valid }) => {
|
||||
if (valid) {
|
||||
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
||||
this.changeShowMode();
|
||||
}
|
||||
}).catch((error) => {
|
||||
this.changeShowMode();
|
||||
console.error(error);
|
||||
this.$refs.noticeInfo.doShow(error.message);
|
||||
});
|
||||
},
|
||||
changeShowMode() {
|
||||
this.operationType = 'show';
|
||||
this.nowSectionCode = '';
|
||||
this.newSectionCode = '';
|
||||
this.newTrainCode = '';
|
||||
this.direction = '';
|
||||
this.groupNumber1 = '';
|
||||
this.tableData = [];
|
||||
},
|
||||
cancel() {
|
||||
const operate = {
|
||||
operation: OperationEvent.Command.cancel.menu.operation
|
||||
};
|
||||
this.$store.dispatch('trainingNew/next', operate).then(({ valid }) => {
|
||||
if (valid) {
|
||||
this.doClose();
|
||||
}
|
||||
}).catch(() => {
|
||||
this.doClose();
|
||||
});
|
||||
},
|
||||
getTrainCode(train) {
|
||||
if (train) {
|
||||
return train.destinationCode + (train.serviceNumber.substr(1)) + (train.tripNumber.substr(train.tripNumber.length - 2));
|
||||
}
|
||||
},
|
||||
getSectionPosition(sectionCode) {
|
||||
const section = this.$store.getters['map/getDeviceByCode'](sectionCode);
|
||||
if (section.type === '02') {
|
||||
const parentSection = this.$store.getters['map/getDeviceByCode'](section.parentCode);
|
||||
return parentSection.name + '-' + section.name;
|
||||
} else {
|
||||
return section.name;
|
||||
}
|
||||
},
|
||||
dragEvent() {
|
||||
const offset = this.offset;
|
||||
const dialogHeaderEl = document.querySelector('.falutChooseTitle');
|
||||
const dragDom = document.querySelector('#faultChoose');
|
||||
dialogHeaderEl.style.cursor = 'move';
|
||||
|
||||
/** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
|
||||
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
|
||||
|
||||
dialogHeaderEl.onmousedown = (e) => {
|
||||
/** 鼠标按下，计算当前元素距离可视区的距离*/
|
||||
const disX = e.clientX - dialogHeaderEl.offsetLeft;
|
||||
const disY = e.clientY - dialogHeaderEl.offsetTop;
|
||||
|
||||
/** 获取到的值带px 正则匹配替换*/
|
||||
let styL, styT;
|
||||
|
||||
/** 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/
|
||||
if (sty.left.includes('%')) {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
|
||||
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
|
||||
} else {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
styL = +sty.left.replace(/\px/g, '');
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
styT = +sty.top.replace(/\px/g, '');
|
||||
}
|
||||
|
||||
document.onmousemove = function (e) {
|
||||
/** 通过事件委托，计算移动的距离*/
|
||||
const l = e.clientX - disX;
|
||||
const t = e.clientY - disY;
|
||||
|
||||
/** 移动当前元素*/
|
||||
// dragDom.style.left = `${l + styL}px`;
|
||||
// dragDom.style.top = `${t + styT}px`;
|
||||
|
||||
/** 移动当前元素*/
|
||||
if (l + styL < 0) {
|
||||
dragDom.style.left = `0px`;
|
||||
} else if (l + styL > document.body.clientWidth - dragDom.clientWidth - 10) {
|
||||
dragDom.style.left = `${document.body.clientWidth - dragDom.clientWidth - 10}px`;
|
||||
} else {
|
||||
dragDom.style.left = `${l + styL}px`;
|
||||
}
|
||||
if (t + styT <= offset) {
|
||||
dragDom.style.top = offset + `px`;
|
||||
} else if (t + styT > document.body.clientHeight - dragDom.clientHeight - 10) {
|
||||
dragDom.style.top = `${document.body.clientHeight - dragDom.clientHeight - 10}px`;
|
||||
} else {
|
||||
dragDom.style.top = `${t + styT}px`;
|
||||
}
|
||||
|
||||
/** 将此时的位置传出去*/
|
||||
// binding.value({ x: e.pageX, y: e.pageY });
|
||||
};
|
||||
|
||||
document.onmouseup = function () {
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#faultChoose .card .queryList .el-card .el-card__body .el-table--border .el-table__body-wrapper{
|
||||
height: 135px !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
#faultChoose .el-button--mini {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.triggerFaultListLeft{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 730px;
|
||||
}
|
||||
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
||||
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
||||
#faultChoose .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
// height: 110px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
#faultChoose .el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
border-radius: 10px;
|
||||
background-color: #FFFFFF;;
|
||||
}
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
#faultChoose .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
/*滑块效果*/
|
||||
#faultChoose .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
border-radius: 5px;
|
||||
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
/*IE滚动条颜色*/
|
||||
html {
|
||||
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
|
||||
scrollbar-highlight-color:#000;
|
||||
scrollbar-3dlight-color:#000;
|
||||
scrollbar-darkshadow-color:#000;
|
||||
scrollbar-Shadow-color:#adadad;/*滑块边色*/
|
||||
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
|
||||
scrollbar-track-color:#eeeeee;/*背景颜色*/
|
||||
}
|
||||
</style>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.triggerFaultInfo{
|
||||
margin-bottom:10px;
|
||||
padding: 10px 0px 10px 15px;
|
||||
}
|
||||
.triggerFaultList{
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.triggerFaultTitle{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.falutChooseTitle{
|
||||
cursor: all-scroll;
|
||||
background-color: #c0c0c0;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: #000;
|
||||
padding-left: 10px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
#faultChoose{
|
||||
width: 1000px;
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 20%;
|
||||
padding:0px 0px 15px 0px;
|
||||
// transform: translate3d(-50%,-50%,0);
|
||||
border-radius: 6px;
|
||||
z-index:2009;
|
||||
background-color: #E2E2E2;
|
||||
}
|
||||
.faultChooseFoot{
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.closeFalutChoose{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
line-height: 30px;
|
||||
}
|
||||
.closeFalutChooseIn{
|
||||
font-size: 20px;
|
||||
margin-left: 5px;
|
||||
background-color: #f00;
|
||||
color: #FFF;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
/deep/ .el-table th{
|
||||
background-color: #E2E2E2;
|
||||
padding: 0;
|
||||
}
|
||||
/deep/.el-table td{
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
161
src/views/newMap/display/terminals/displayBaSiDi/tra.vue
Normal file
161
src/views/newMap/display/terminals/displayBaSiDi/tra.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="haerbin-01__systerm"
|
||||
:modal="false"
|
||||
:title="title"
|
||||
:visible.sync="show"
|
||||
:fullscreen="true"
|
||||
:before-close="doClose"
|
||||
:z-index="2000"
|
||||
>
|
||||
<div class="trainOverView">
|
||||
<div v-if="trainViewList.length>0" class="trainViewList">
|
||||
<div v-for="(eachTrainView,index) in trainViewList" :key="index" class="eachTrainView">
|
||||
<div class="eachTrainViewIn">
|
||||
<div class="eachTrainViewInRhom" />
|
||||
<div class="eachTrainTrunkS">{{ 'W'+eachTrainView+'0' }}</div>
|
||||
<div class="eachTrainTrunkD" @click="toTrainTrunkDetail(index)">
|
||||
<img :src="trainTrunkDown" class="trainTrunkDown">
|
||||
</div>
|
||||
<div class="eachTrainTrunkE">{{ 'W'+eachTrainView+'6' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import trainTrunkDown from '@/assets/baSiDi/up.png';
|
||||
export default {
|
||||
name:'Tra',
|
||||
components:{
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
trainViewList:[],
|
||||
trainTrunkDown:trainTrunkDown
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
show() {
|
||||
return this.dialogShow && !this.$store.state.menuOperation.break;
|
||||
},
|
||||
title() {
|
||||
return '列车总览';
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'$store.state.map.activeTrainListChange': function (val) {
|
||||
if (val) {
|
||||
this.activeTrainList = this.$store.state.map.activeTrainList;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
doShow() {
|
||||
this.dialogShow = true;
|
||||
this.$nextTick(function () {
|
||||
this.trainViewList = this.$store.state.map.activeTrainList;
|
||||
});
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
},
|
||||
toTrainTrunkDetail(index) {
|
||||
this.$emit('openTrainTrunkDetail', index);
|
||||
this.doClose();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/deep/ .el-dialog {
|
||||
background: rgba(100, 100, 100, 1) !important;
|
||||
position: relative;
|
||||
border: 2px solid rgba(144, 144, 144, 0.8);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/deep/ .el-dialog .el-dialog__body{
|
||||
background: rgba(100, 100, 100, 1) !important;
|
||||
border: 0 !important;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
.trainOverView{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
display: inline-block;
|
||||
}
|
||||
.trainViewList{
|
||||
width: 1226px;
|
||||
border-left: 1px #f0f0f0 solid;
|
||||
border-top: 1px #f0f0f0 solid;
|
||||
margin-top: 30px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.eachTrainView{
|
||||
width: 245px;
|
||||
display: inline-block;
|
||||
padding: 10px 10px;
|
||||
border-bottom: 1px #f0f0f0 solid;
|
||||
border-right: 1px #f0f0f0 solid;
|
||||
}
|
||||
.eachTrainViewIn{
|
||||
height: 60px;
|
||||
border-bottom: 1px #484848 solid;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.eachTrainViewInRhom{
|
||||
width: 224px;
|
||||
height: 60px;
|
||||
border-left: 1px #828282 solid;
|
||||
transform: skew(-30deg, 0deg);
|
||||
-webkit-transform-origin: bottom center;
|
||||
transform-origin: bottom center;
|
||||
border-bottom: 1px #828282 solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
.eachTrainViewInRhom:before{
|
||||
content: '';
|
||||
transform: skew(50deg, 0deg);
|
||||
transform-origin: bottom center;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
border-top: 1px #828282 solid;
|
||||
border-right: 1px #828282 solid;
|
||||
}
|
||||
.eachTrainTrunkS{
|
||||
position: absolute;
|
||||
font-size: 18px;
|
||||
color: #5E5E5E;
|
||||
left: 30px;
|
||||
top: 20px;
|
||||
}
|
||||
.eachTrainTrunkD{
|
||||
position: absolute;
|
||||
left: 99px;
|
||||
top: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.trainTrunkDown{
|
||||
width: 25px;
|
||||
transform-origin: center center;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.eachTrainTrunkE{
|
||||
position: absolute;
|
||||
font-size: 18px;
|
||||
color: #5E5E5E;
|
||||
right: 30px;
|
||||
top: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="haerbin-01__systerm"
|
||||
:width="'1000px'"
|
||||
:modal="false"
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="show"
|
||||
:before-close="doClose"
|
||||
>
|
||||
<!-- :fullscreen="true" -->
|
||||
<div class="trainTrunkView">
|
||||
<div class="trainTrunkViewT">
|
||||
<img :src="trainTrunkUp" class="trainTrunkUp" @click="backTra">
|
||||
<div class="trainTrunkTtext">
|
||||
<div class="trainTrunkTtextIn">OBCU</div>
|
||||
<div class="trainTrunkTtextIn">Overview</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewM">
|
||||
<div class="trainTrunkViewMT">
|
||||
<div class="eachTrunkViewInRhom" />
|
||||
<div class="trainTrunkViewMTL">
|
||||
<div class="trainTrunkViewMTL1">
|
||||
<div class="trainTrunkViewMTLEach">ATP</div>
|
||||
<div class="trainTrunkViewMTLEach">ATO</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewMTL2">
|
||||
<div class="trainTrunkViewMTL2L" />
|
||||
<div class="trainTrunkViewMTL2R">
|
||||
<div class="trainTrunkViewLine">
|
||||
<div class="trainTrunkViewDot" style="top: -3px;left: -3px;" />
|
||||
<div class="trainTrunkViewDot" style="top: -3px;left: 103px;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewMTL3">
|
||||
<div class="trainTrunkViewMTLEach">ITF</div>
|
||||
<div class="trainTrunkViewMTLEach">HMI</div>
|
||||
<div class="trainTrunkViewMTLEach">TMS</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewMTR">
|
||||
<div class="trainTrunkViewMTR1">
|
||||
<div class="trainTrunkViewMTLEach">ATO</div>
|
||||
<div class="trainTrunkViewMTLEach">ATP</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewMTR2">
|
||||
<div class="trainTrunkViewMTR2L">
|
||||
<div class="trainTrunkViewLine">
|
||||
<div class="trainTrunkViewDot" style="top: -3px;left: -3px;" />
|
||||
<div class="trainTrunkViewDot" style="top: -3px;left: 103px;" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewMTR2R" />
|
||||
</div>
|
||||
<div class="trainTrunkViewMTR3">
|
||||
<div class="trainTrunkViewMTLEach">TMS</div>
|
||||
<div class="trainTrunkViewMTLEach">HMI</div>
|
||||
<div class="trainTrunkViewMTLEach">ITF</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewMB">
|
||||
<div class="trainTrunkViewMBL">{{ 'W'+trainCode+'0' }}</div>
|
||||
<div class="trainTrunkViewMBR">{{ 'W'+trainCode+'6' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewB">
|
||||
<div v-if="prev" class="trainTrunkViewBL">
|
||||
<img :src="trainTrunkUp" class="trainTrunkLeft" @click="doPrev">
|
||||
<div class="trainTrunkViewBLIn">
|
||||
<div class="trainTrunkViewBLInRhom" />
|
||||
<div class="trainTrunkViewBLInL">{{ 'W'+prev+'0' }}</div>
|
||||
<div class="trainTrunkViewBLInR">{{ 'W'+prev+'6' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="next" class="trainTrunkViewBB">
|
||||
<div class="trainTrunkViewBRIn">
|
||||
<div class="trainTrunkViewBLInRhom" />
|
||||
<div class="trainTrunkViewBLInL">{{ 'W'+next+'0' }}</div>
|
||||
<div class="trainTrunkViewBLInR">{{ 'W'+next+'6' }}</div>
|
||||
</div>
|
||||
<img :src="trainTrunkUp" class="trainTrunkRight" @click="doNext">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import trainTrunkUp from '@/assets/baSiDi/up.png';
|
||||
export default {
|
||||
name:'TrainTrunkDetail',
|
||||
props:{
|
||||
// trainViewList:{
|
||||
// type:Array,
|
||||
// required:true
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
trainCode:'',
|
||||
prev:'',
|
||||
next:'',
|
||||
index:0,
|
||||
trainTrunkUp:trainTrunkUp
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
show() {
|
||||
return this.dialogShow && !this.$store.state.menuOperation.break;
|
||||
},
|
||||
title() {
|
||||
return '列车详览';
|
||||
},
|
||||
trainViewList() {
|
||||
return this.$store.state.map.activeTrainList;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
doShow(index) {
|
||||
this.index = index;
|
||||
this.dialogShow = true;
|
||||
this.init();
|
||||
},
|
||||
init() {
|
||||
this.trainCode = this.trainViewList[this.index];
|
||||
this.prev = '';
|
||||
if (this.index > 0) {
|
||||
this.prev = this.trainViewList[this.index - 1];
|
||||
}
|
||||
this.next = '';
|
||||
if ((this.index + 1) < this.trainViewList.length) {
|
||||
this.next = this.trainViewList[this.index + 1];
|
||||
}
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
},
|
||||
backTra() {
|
||||
this.$emit('openTra');
|
||||
this.doClose();
|
||||
},
|
||||
doPrev() {
|
||||
this.index--;
|
||||
this.init();
|
||||
},
|
||||
doNext() {
|
||||
this.index++;
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.trainTrunkView{
|
||||
width: 100%;
|
||||
background: #000;
|
||||
display: inline-block;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
.trainTrunkUp{
|
||||
width: 60px;
|
||||
margin-left: 433px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.trainTrunkTtext{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-left: 0px;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
}
|
||||
.trainTrunkTtextIn{margin-bottom:5px;letter-spacing: 2px;}
|
||||
.trainTrunkViewMT{
|
||||
width: 800px;
|
||||
height: 210px;
|
||||
margin-left: 58px;
|
||||
margin-top: 25px;
|
||||
position: relative;
|
||||
}
|
||||
.eachTrunkViewInRhom{
|
||||
width: 800px;
|
||||
height: 210px;
|
||||
border-left: 1px #828282 solid;
|
||||
transform: skew(-30deg, 0deg);
|
||||
-webkit-transform-origin: bottom center;
|
||||
transform-origin: bottom center;
|
||||
border-bottom: 1px #828282 solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
.eachTrunkViewInRhom:before{
|
||||
content: '';
|
||||
transform: skew(50deg, 0deg);
|
||||
transform-origin: bottom center;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
border-top: 1px #828282 solid;
|
||||
border-right: 1px #828282 solid;
|
||||
}
|
||||
.trainTrunkViewMTL{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
border-right: 1px #fff dashed;
|
||||
font-size:0;
|
||||
}
|
||||
.trainTrunkViewMTR{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
font-size: 0;
|
||||
}
|
||||
.trainTrunkViewMTL1{margin-left: 177px;margin-top: 28px;font-size: 0;}
|
||||
.trainTrunkViewMTR1{margin-left: 34px;margin-top: 28px;font-size: 0;}
|
||||
.trainTrunkViewMTL2{height: 59px;margin-left:100px;display: inline-block;}
|
||||
.trainTrunkViewMTL2L{
|
||||
width: 117px;
|
||||
border-left: 1px #fff solid;
|
||||
height: 34px;
|
||||
margin-top: 25px;
|
||||
border-top: 1px #fff solid;
|
||||
display: inline-block;
|
||||
}
|
||||
.trainTrunkViewMTR2R{width: 106px;border-top: 1px #fff solid;display: inline-block;margin-top: 25px;border-right: 1px #fff solid;height: 34px;}
|
||||
.trainTrunkViewMTR2{height: 59px;margin-left:75px;display: inline-block;}
|
||||
.trainTrunkViewMTR2L{
|
||||
width: 108px;
|
||||
height: 59px;
|
||||
border-left: 1px #fff solid;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border-right: 1px #fff solid;
|
||||
}
|
||||
.trainTrunkViewMTL2R{
|
||||
width: 108px;
|
||||
height: 59px;
|
||||
border-left: 1px #fff solid;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border-right: 1px #fff solid;
|
||||
}
|
||||
.trainTrunkViewMTL3{margin-left: 65px;font-size: 0;}
|
||||
.trainTrunkViewMTR3{margin-left: 34px;font-size: 0;}
|
||||
.trainTrunkViewMTLEach{
|
||||
padding: 10px 0px;
|
||||
width:80px;
|
||||
text-align:center;
|
||||
font-size: 24px;
|
||||
color: #5F5F5F;
|
||||
border: 1px #5F5F5F solid;
|
||||
display: inline-block;
|
||||
letter-spacing: 4px;
|
||||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.trainTrunkViewDot{
|
||||
position:absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
}
|
||||
.trainTrunkViewLine{
|
||||
width: 107px;
|
||||
height: 33px;
|
||||
border-top: 1px #fff solid;
|
||||
margin-top: 25px;
|
||||
position: relative;
|
||||
}
|
||||
.trainTrunkViewMB{padding: 20px 123px;}
|
||||
.trainTrunkViewMBL{font-size: 40px;color: #fff;display:inline-block;margin-left: 75px;letter-spacing: 5px;}
|
||||
.trainTrunkViewMBR{font-size: 40px;color: #fff;display:inline-block;float:right;margin-right:75px;letter-spacing: 5px;}
|
||||
.trainTrunkViewBL{display: inline-block;}
|
||||
.trainTrunkLeft{
|
||||
width: 60px;
|
||||
transform-origin: center center;
|
||||
transform: rotate(-90deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.trainTrunkViewB{margin-top: 20px;}
|
||||
.trainTrunkViewBB{display: inline-block;float: right;}
|
||||
.trainTrunkRight{
|
||||
width: 60px;
|
||||
transform-origin: center center;
|
||||
transform: rotate(90deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.trainTrunkViewBLIn,.trainTrunkViewBRIn{
|
||||
width: 220px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
}
|
||||
.trainTrunkViewBLIn{margin-left: 20px;}
|
||||
.trainTrunkViewBRIn{margin-right: 20px;}
|
||||
.trainTrunkViewBLInRhom{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-left: 1px #828282 solid;
|
||||
transform: skew(-30deg, 0deg);
|
||||
-webkit-transform-origin: bottom center;
|
||||
transform-origin: bottom center;
|
||||
border-bottom: 1px #828282 solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
.trainTrunkViewBLInRhom:before{
|
||||
content: '';
|
||||
transform: skew(50deg, 0deg);
|
||||
transform-origin: bottom center;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
border-top: 1px #828282 solid;
|
||||
border-right: 1px #828282 solid;
|
||||
}
|
||||
.trainTrunkViewBLInL{
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-right: 1px #fff dashed;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
padding-top: 16px;
|
||||
letter-spacing: 2px;
|
||||
padding-left:27px;
|
||||
}
|
||||
.trainTrunkViewBLInR{
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
padding-top: 16px;
|
||||
letter-spacing: 2px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
181
src/views/newMap/display/terminals/displayBaSiDi/tro.vue
Normal file
181
src/views/newMap/display/terminals/displayBaSiDi/tro.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:modal="false"
|
||||
:title="title"
|
||||
:visible.sync="show"
|
||||
:fullscreen="true"
|
||||
:before-close="doClose"
|
||||
:z-index="2003"
|
||||
>
|
||||
<div>
|
||||
<map-system-draft ref="mapCanvas" :no-menu="true" @back="back" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MapSystemDraft from '@/views/newMap/mapsystemNew/common/index';
|
||||
import { mapGetters } from 'vuex';
|
||||
import ButtonDbupIcon from '@/assets/baSiDi/dbup.png';
|
||||
import ButtonRightIcon from '@/assets/baSiDi/right.png';
|
||||
import ButtonLeftIcon from '@/assets/baSiDi/left.png';
|
||||
import Vue from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'TRO',
|
||||
components: {
|
||||
MapSystemDraft
|
||||
},
|
||||
props: {
|
||||
stationList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
trainList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
isRunPlan: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
mapData: null,
|
||||
deviceCode: '',
|
||||
selfJmap: null,
|
||||
buttonDbup: ButtonDbupIcon,
|
||||
buttonRight: ButtonRightIcon,
|
||||
buttonLeft: ButtonLeftIcon
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
show() {
|
||||
return this.dialogShow && !this.$store.state.menuOperation.break;
|
||||
},
|
||||
title() {
|
||||
return '轨道总览';
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width - 5;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height - 50;
|
||||
},
|
||||
...mapGetters('map', [
|
||||
'bigScreenConfig'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
|
||||
if (this.dialogShow) {
|
||||
this.showTroMode();
|
||||
this.$refs.mapCanvas && this.$refs.mapCanvas.mapViewLoaded(false);
|
||||
}
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() { // 窗口缩放
|
||||
this.$store.dispatch('config/resize', { width:this.width, height: this.height });
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.selfJmap && this.selfJmap._disposeFlag) {
|
||||
this.destroy();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.dialogShow = true;
|
||||
if (this.selfJmap) { Vue.prototype.$jlmap = this.selfJmap; }
|
||||
this.$store.dispatch('config/resize', { width:this.width, height: this.height });
|
||||
this.$nextTick(function() {
|
||||
this.$refs.mapCanvas.setMap(this.$store.state.map.map);
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowMode(list, '05');
|
||||
this.$store.dispatch('training/updateMapState', list);
|
||||
!this.isRunPlan && this.$jlmap.clearTrainView();
|
||||
});
|
||||
},
|
||||
destroy() {
|
||||
this.selfJmap.dispose();
|
||||
},
|
||||
showTroMode() {
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.handleUpdateScreen();
|
||||
this.$jlmap.updateShowMode(list, '05'); // 二次过滤
|
||||
},
|
||||
handleUpdateScreen() {
|
||||
this.maskOpen = false;
|
||||
if (this.bigScreenConfig.bigScreenSplitConfig && this.bigScreenConfig.bigScreenSplitConfig.length) {
|
||||
const offsetList = this.bigScreenConfig.offsetList;
|
||||
const width = this.bigScreenConfig.width;
|
||||
const height = this.bigScreenConfig.height;
|
||||
const size = {
|
||||
width: (this.$store.state.app.width - 2) * width,
|
||||
height: this.$store.state.app.height * height,
|
||||
list: this.bigScreenConfig.bigScreenSplitConfig.map(ele => ele.position),
|
||||
offsetList: offsetList
|
||||
};
|
||||
this.$jlmap.setUpdateScreen(size);
|
||||
} else {
|
||||
this.maskOpen = true;
|
||||
}
|
||||
},
|
||||
back() {},
|
||||
doClose() {
|
||||
this.loading = false;
|
||||
this.dialogShow = false;
|
||||
this.$jlmap && this.$jlmap.clearTrainView();
|
||||
this.selfJmap = Vue.prototype.$jlmap;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/deep/ .el-dialog {
|
||||
background: rgba(100, 100, 100, 1);
|
||||
position: relative;
|
||||
border: 2px solid rgba(144, 144, 144, 0.8);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
/deep/ .el-dialog .el-dialog__body{
|
||||
background: rgba(100, 100, 100, 1);
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/deep/ .el-dialog .el-dialog__header {
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
}
|
||||
/deep/ .el-dialog .el-dialog__title {
|
||||
color: #fff;
|
||||
}
|
||||
/deep/ .el-dialog .el-dialog__headerbtn {
|
||||
background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
top: 4px;
|
||||
right: 5px;
|
||||
line-height: 16px;
|
||||
}
|
||||
/deep/ .el-dialog__headerbtn .el-dialog__close{
|
||||
color: #fff;
|
||||
}
|
||||
.arrow-button{
|
||||
width: 45px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
background-size: 45px 30px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
208
src/views/newMap/display/terminals/displayBaSiDi/troDetail.vue
Normal file
208
src/views/newMap/display/terminals/displayBaSiDi/troDetail.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:modal="false"
|
||||
:title="title"
|
||||
:visible.sync="show"
|
||||
:fullscreen="true"
|
||||
:before-close="doClose"
|
||||
:z-index="2000"
|
||||
>
|
||||
<div style="text-align: center;">
|
||||
<map-system-draft ref="mapCanvas" />
|
||||
<el-button size="small" class="fault-button" :type="faultMode ? '':'primary' " @click="changeOperateMode()">{{ faultMode?'切换到普通模式':'切换到故障模式' }}</el-button>
|
||||
<div class="button-box" style="">
|
||||
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonLeft + ')' }" @click="changeStation(-1)" />
|
||||
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonDbup + ')' }" @click="goTroDialog" />
|
||||
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonRight + ')' }" @click="changeStation(1)" />
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MapSystemDraft from '@/views/newMap/mapsystemNew/common/index';
|
||||
import ButtonDbupIcon from '@/assets/baSiDi/dbup.png';
|
||||
import ButtonRightIcon from '@/assets/baSiDi/right.png';
|
||||
import ButtonLeftIcon from '@/assets/baSiDi/left.png';
|
||||
import { OperateMode } from '@/scripts/ConstDic';
|
||||
import Vue from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'TRO',
|
||||
components: {
|
||||
MapSystemDraft
|
||||
},
|
||||
props: {
|
||||
stationList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
trainList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
isRunPlan: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
mapData: null,
|
||||
deviceCode: '',
|
||||
buttonDbup: ButtonDbupIcon,
|
||||
buttonRight: ButtonRightIcon,
|
||||
buttonLeft: ButtonLeftIcon,
|
||||
selfJmap: null,
|
||||
faultMode: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
show() {
|
||||
return this.dialogShow && !this.$store.state.menuOperation.break;
|
||||
},
|
||||
title() {
|
||||
return '轨道详览';
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width - 10;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height - 40;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
|
||||
if (this.dialogShow) {
|
||||
const list = [];
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
Vue.prototype.$jlmap.updateShowMode(list, '02');
|
||||
this.$refs.mapCanvas && this.$refs.mapCanvas.setCenter(this.deviceCode);
|
||||
this.$refs.mapCanvas && this.$refs.mapCanvas.mapViewLoaded(false);
|
||||
}
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() { // 窗口缩放
|
||||
this.$store.dispatch('config/resize', { width:this.width, height: this.height });
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.selfJmap && !this.selfJmap._disposeFlag) {
|
||||
this.destroy();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow(deviceCode) {
|
||||
this.dialogShow = true;
|
||||
if (this.selfJmap) { Vue.prototype.$jlmap = this.selfJmap; }
|
||||
this.$store.dispatch('config/resize', { width:this.width, height: this.height });
|
||||
this.deviceCode = deviceCode;
|
||||
this.$nextTick(function() {
|
||||
this.$refs.mapCanvas.setMap(this.$store.state.map.map);
|
||||
this.$jlmap.off('pan');
|
||||
this.faultMode = this.$store.state.training.operatemode === OperateMode.FAULT;
|
||||
const mapDevice = this.$store.state.map.mapDevice;
|
||||
const list = [];
|
||||
for (const key in mapDevice) {
|
||||
list.push(mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowMode(list, '02');
|
||||
this.$store.dispatch('training/updateMapState', list);
|
||||
!this.isRunPlan && this.$jlmap.clearTrainView();
|
||||
});
|
||||
},
|
||||
changeOperateMode() {
|
||||
this.faultMode = !this.faultMode;
|
||||
let mode = OperateMode.NORMAL;
|
||||
if (this.faultMode) {
|
||||
mode = OperateMode.FAULT;
|
||||
}
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: mode });
|
||||
},
|
||||
doClose() {
|
||||
this.loading = false;
|
||||
this.dialogShow = false;
|
||||
this.selfJmap = Vue.prototype.$jlmap;
|
||||
},
|
||||
destroy() {
|
||||
this.selfJmap.dispose();
|
||||
},
|
||||
goTroDialog() {
|
||||
this.doClose();
|
||||
this.$emit('goTroDialog');
|
||||
},
|
||||
changeStation(value) {
|
||||
this.deviceCode = this.deviceCode || this.stationList[0].code;
|
||||
const device = this.$store.getters['map/getDeviceByCode'](this.deviceCode);
|
||||
const stationSn = device.sn + value;
|
||||
const station = this.stationList.find((item) => {
|
||||
return item.sn === stationSn;
|
||||
});
|
||||
if (station && station.depot) {
|
||||
this.changeStation(value * 2);
|
||||
} else if (station) {
|
||||
this.deviceCode = station.code;
|
||||
this.$jlmap && this.$jlmap.setCenterOffset(this.deviceCode, { x: 200, y:0 });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/deep/ .el-dialog {
|
||||
background: rgba(100, 100, 100, 1);
|
||||
position: relative;
|
||||
border: 2px solid rgba(144, 144, 144, 0.8);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
/deep/ .el-dialog .el-dialog__body{
|
||||
background: rgba(100, 100, 100, 1);
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/deep/ .el-dialog .el-dialog__header {
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
}
|
||||
/deep/ .el-dialog .el-dialog__title {
|
||||
color: #fff;
|
||||
}
|
||||
/deep/ .el-dialog .el-dialog__headerbtn {
|
||||
background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
top: 4px;
|
||||
right: 5px;
|
||||
line-height: 16px;
|
||||
}
|
||||
/deep/ .el-dialog__headerbtn .el-dialog__close{
|
||||
color: #fff;
|
||||
}
|
||||
.arrow-button{
|
||||
width: 45px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
background-size: 45px 30px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.button-box{
|
||||
width: 150px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
left: calc(50% - 75px);
|
||||
z-index: 9999;
|
||||
justify-content: space-between;
|
||||
justify-items: center;
|
||||
}
|
||||
.fault-button{
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 32px;
|
||||
}
|
||||
</style>
|
||||
150
src/views/newMap/display/terminals/displayBaSiDi/ttl.vue
Normal file
150
src/views/newMap/display/terminals/displayBaSiDi/ttl.vue
Normal file
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="haerbin-01__systerm ttl"
|
||||
:title="title"
|
||||
:modal="false"
|
||||
:width="'900px'"
|
||||
:visible.sync="show"
|
||||
:before-close="doClose"
|
||||
>
|
||||
<div class="actualTimetable">
|
||||
<div class="actualTimetableT">
|
||||
<div class="actualTimetableTtext">实效时刻表</div>
|
||||
<div class="actualTimetableTLine" />
|
||||
</div>
|
||||
<div class="actualTimetableForm">
|
||||
<div class="actualTimeFormEach">
|
||||
<span>日期: </span>
|
||||
<span class="actualTimeFormValue">28.08.2008</span>
|
||||
</div>
|
||||
<div class="actualTimeFormEach">
|
||||
<span>名称: </span>
|
||||
<span class="actualTimeFormValue">SX0807</span>
|
||||
</div>
|
||||
<div class="actualTimeFormEach">
|
||||
<span>描述: </span>
|
||||
<span class="actualTimeFormValue">changed minimum of dwell time</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="defaultTimetable">
|
||||
<div class="defaultTimetableT">
|
||||
<div class="defaultTimetableTtext">预设时刻表</div>
|
||||
<div class="defaultTimetableTLine" />
|
||||
</div>
|
||||
<div class="defaultTimetableM">
|
||||
<el-table :data="tableData" style="width: 100%;" height="300" border class="defaultTimetab">
|
||||
<el-table-column prop="date" label="日期" width="110" />
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="description" label="描述" />
|
||||
<el-table-column prop="status" label=" 状态" width="70" />
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="defaultTimetableB">
|
||||
<div id="defaultClearSele" class="defaultTimetableBtn disabled">清除所选</div>
|
||||
<div id="defaultClearAll" class="defaultTimetableBtn disabled">清除全部</div>
|
||||
<div id="defaultShowTime" class="defaultTimetableBtn">显示时刻表</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ttlButtonGroup">
|
||||
<div id="changeActual" class="defaultTimetableBtn">更换实效时刻表</div>
|
||||
<div id="changeDefault" class="defaultTimetableBtn">更换预设时刻表</div>
|
||||
<div id="settingTimetable" class="defaultTimetableBtn disabled">设定</div>
|
||||
<div id="resetTimetable" class="defaultTimetableBtn disabled">重设</div>
|
||||
<div id="closeTimetable" class="defaultTimetableBtn" @click="doClose">关闭</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'TTLDialog',
|
||||
data() {
|
||||
return {
|
||||
dialogShow:false,
|
||||
tableData:[
|
||||
{date:'28.08.2008', name:'SX0807', description:'changed minimum of dwell time', status:'有效'},
|
||||
{date:'29.08.2008', name:'SX0807', description:'changed minimum of dwell time', status:'无效'},
|
||||
{date:'30.08.2008', name:'SX0807', description:'changed minimum of dwell time', status:'无效'},
|
||||
{date:'31.08.2008', name:'SX0807', description:'changed minimum of dwell time', status:'无效'},
|
||||
{date:'01.09.2008', name:'SX0807', description:'changed minimum of dwell time', status:'无效'}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
show() {
|
||||
return this.dialogShow && !this.$store.state.menuOperation.break;
|
||||
},
|
||||
title() {
|
||||
return '时刻表';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.dialogShow = true;
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.actualTimetable{padding:0px 15px;}
|
||||
.actualTimetableT{width:100%;position: relative;}
|
||||
.defaultTimetableT{width:100%;position: relative;overflow:hidden;}
|
||||
.actualTimetableTtext,.defaultTimetableTtext{position:absolute;height: 20px;padding-right:5px;font-size:15px;color: #676767;background:#e2e2e2;font-weight: bold;}
|
||||
.actualTimetableTLine,.defaultTimetableTLine{display:inline-block;margin-left:10px;width:100%;border-bottom: 1px #A0A0A0 solid;vertical-align: top;height: 9px;}
|
||||
.actualTimetableForm{}
|
||||
.actualTimeFormEach{margin-top: 10px;}
|
||||
.actualTimeFormEach span{font-size:15px;color: #151515;}
|
||||
.actualTimeFormValue{
|
||||
font-size:15px;
|
||||
color: #151515;
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
border: 1px #A2A2A2 solid;
|
||||
width: 810px;
|
||||
}
|
||||
.defaultTimetable{
|
||||
padding:15px 15px 0px 15px;
|
||||
}
|
||||
// .defaultTimetab{
|
||||
// padding: 10px 15px 10px 15px;
|
||||
// }
|
||||
.defaultTimetableM{margin-top:10px;}
|
||||
.defaultTimetableB{display:inline-block;width:100%;margin-top: 10px;}
|
||||
#defaultClearSele{margin-right:10px;width:90px;}
|
||||
#defaultClearAll{width:90px;}
|
||||
#defaultShowTime{float:right;width:90px;}
|
||||
.defaultTimetableBtn{
|
||||
background:transparent;
|
||||
border:1px#9C9C9C solid ;
|
||||
height:auto ;
|
||||
outline:none;
|
||||
text-align:center;
|
||||
display: inline-block;
|
||||
padding:4px 0px;
|
||||
color:#090909;
|
||||
cursor: pointer;
|
||||
}
|
||||
.defaultTimetableBtn.disabled{border:1px #A9A9A9 solid ;color: #A7A7A7; cursor: no-drop;}
|
||||
.ttlButtonGroup{
|
||||
border-top: 1px #6d6d6d solid;
|
||||
margin-top: 10px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
#changeActual{margin-right:10px;width:120px}
|
||||
#changeDefault{width:120px;margin-right:175px;}
|
||||
#settingTimetable{width:130px;margin-right:10px;}
|
||||
#resetTimetable{width:130px;margin-right:10px;}
|
||||
#closeTimetable{width:130px;}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.ttl.haerbin-01__systerm .el-dialog .el-dialog__body{
|
||||
background: #E2E2E2;
|
||||
padding:20px 0px 10px 0px;
|
||||
}
|
||||
.defaultTimetab.el-table .cell{
|
||||
padding-top:5px;padding-bottom:5px;
|
||||
}
|
||||
</style>
|
||||
@ -26,6 +26,7 @@
|
||||
<diagram-preview v-else-if="picture === 'diagramPreview'" ref="diagramPreview" />
|
||||
<diagram-edit v-else-if="picture === 'diagramEdit'" ref="diagramEdit" />
|
||||
<pis-terminal v-else-if="picture === 'pis'" ref="pisTerminal" />
|
||||
<display-ba-si-di v-else-if="picture === 'basidi'" ref="displayBaSiDi" />
|
||||
<terminal-menu
|
||||
v-if="menuShow"
|
||||
ref="terminalMenu"
|
||||
@ -67,6 +68,7 @@ import TrainTicket from './trainTicket/index';
|
||||
import DiagramLoad from './diagramLoad';
|
||||
import DiagramPreview from './diagramPreview';
|
||||
import DiagramEdit from './diagramEdit/index';
|
||||
import DisplayBaSiDi from './displayBaSiDi/index';
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
@ -96,7 +98,8 @@ export default {
|
||||
TrainTicket,
|
||||
DiagramLoad,
|
||||
DiagramPreview,
|
||||
DiagramEdit
|
||||
DiagramEdit,
|
||||
DisplayBaSiDi
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -208,7 +211,6 @@ export default {
|
||||
}
|
||||
},
|
||||
clearSubscribe() {
|
||||
console.log('***************');
|
||||
clearSubscribe(getTopic('COMMON', this.group));
|
||||
clearSubscribe(getTopic('ATS_STATUS', this.group));
|
||||
clearSubscribe(getTopic('STATE', this.group));
|
||||
|
||||
@ -1,16 +1,8 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:visible.sync="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
z-index="1999"
|
||||
:modal="false"
|
||||
width="100%"
|
||||
>
|
||||
<div style="height: 130px;">
|
||||
<div class="haerbin-01__systerm nav">
|
||||
<div v-dialogDrag>
|
||||
<div style="height: 130px;width: 100%;" class="el-dialog">
|
||||
<div class="el-dialog__header" />
|
||||
<div class="haerbin-01__systerm nav el-dialog__body">
|
||||
<el-row style="padding: 3px;">
|
||||
<el-col :span="20">
|
||||
<div style="width: calc(100% - 10px);border: 2px solid #DDD9CA;border-radius: 1px;height: 132px;">
|
||||
@ -108,17 +100,8 @@
|
||||
<audio id="buzzer" controls loop="loop" style="width: 0;height: 0">
|
||||
<source :src="buzzerAudio" type="audio/mpeg">
|
||||
</audio>
|
||||
<div class="display-draft">
|
||||
<el-button-group class="button-group-box">
|
||||
<template v-if="!dataError">
|
||||
<el-button type="success" :disabled="isRunPlan" size="small" @click="selectBeginTime">{{ $t('display.demon.drivingByPlan') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button>
|
||||
</template>
|
||||
<el-button type="primary" size="small" @click="back">{{ $t('display.demon.back') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -133,16 +116,6 @@ export default {
|
||||
AlarmTableHmi,
|
||||
LogDetail
|
||||
},
|
||||
props: {
|
||||
dataError: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
isRunPlan: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
@ -195,7 +168,6 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.initTime': function (initTime) {
|
||||
// const date = new Date(initTime);
|
||||
this.initDate(initTime);
|
||||
},
|
||||
'$store.state.socket.simulationTimeSync': function (time) { // 仿真时间更新
|
||||
@ -205,7 +177,7 @@ export default {
|
||||
(val || []).forEach(item => {
|
||||
if (!item.confirmed) {
|
||||
this.tipContent.push(item);
|
||||
this.handleAlarm(item);
|
||||
// this.handleAlarm(item);
|
||||
if (this.tipContent.length > 3) {
|
||||
this.tipContent.shift();
|
||||
}
|
||||
@ -378,12 +350,4 @@ export default {
|
||||
/deep/.el-dialog__body{
|
||||
padding: 0;
|
||||
}
|
||||
.display-draft {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
bottom: 15px;
|
||||
.button-group-box{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -34,7 +34,7 @@ import { loadMapDataById } from '@/utils/loaddata';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { getSimulationMemberList, getAllSimulationUser } from '@/api/simulation';
|
||||
import { getMemberListCommon, getUserListCommon } from '@/api/rtSimulation';
|
||||
import BaSiDi from './baSiDiNew';
|
||||
import BaSiDi from './baSiDi';
|
||||
import RpsDialog from './rps';
|
||||
import TroDialog from './tro';
|
||||
import CarPack from './carPack';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user