调整：新版TJ 运行图界面样式
This commit is contained in:
ival
parent
6baf23149f
commit
f171db029c
@ -23,8 +23,8 @@ export default {
|
||||
.schedule {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 40px;
|
||||
padding-top: 70px;
|
||||
padding-bottom: 30px;
|
||||
background: #efefef;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,574 +0,0 @@
|
||||
<template>
|
||||
<div id="Schedule">
|
||||
<div class="left">
|
||||
<div :id="runPlanId" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'Schedule',
|
||||
props: {
|
||||
maxWidth: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
maxHeight: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top: 0,
|
||||
height: 0,
|
||||
runPlanId: 'plan-tool',
|
||||
myChart: null,
|
||||
showTrain: false,
|
||||
serviceNumberConfig: {
|
||||
data: [],
|
||||
title: this.$t('planMonitor.serviceNumber'),
|
||||
showHeader: false,
|
||||
highlightCurrentRow: true,
|
||||
handleChange: this.serviceNumberChange,
|
||||
handleModify:this.serviceNumberModify,
|
||||
handleTips:'单击数字选择表号，双击数字修改表号,<br/>有车次信息变动 车次号会重新自动排列',
|
||||
showClose: false,
|
||||
columns: [
|
||||
{
|
||||
prop: 'serviceNumber',
|
||||
label: this.$t('planMonitor.serviceNumber')
|
||||
}
|
||||
]
|
||||
},
|
||||
tripNumberConfig: {
|
||||
data: [],
|
||||
title: this.$t('planMonitor.tripNumber'),
|
||||
showHeader: false,
|
||||
highlightCurrentRow: true,
|
||||
handleChange: this.tripNumberChange,
|
||||
handleModify:this.tripNumberModify,
|
||||
handleTips:'单击数字选择车次号，双击数字修改车次号,<br/>有车次信息变动 车次号会重新自动排列',
|
||||
showClose: false,
|
||||
columns: [
|
||||
{
|
||||
prop: 'tripNumber',
|
||||
label: this.$t('planMonitor.tripNumber')
|
||||
}
|
||||
]
|
||||
},
|
||||
realData: {},
|
||||
kmRangeCoordMap: {},
|
||||
option: {
|
||||
title: {
|
||||
text: '',
|
||||
left: 'center',
|
||||
top: '10px'
|
||||
},
|
||||
grid: {
|
||||
top: '50px',
|
||||
left: '120px',
|
||||
right: '80px',
|
||||
bottom: '60px',
|
||||
containLabel: true,
|
||||
backgroundColor: 'floralwhite'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
snap: true,
|
||||
axis: 'x'
|
||||
},
|
||||
formatter: this.axisTooltip,
|
||||
borderWidth: 1,
|
||||
position: function (pt) {
|
||||
const data = pt[0] + 10;
|
||||
return [data, '20%'];
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: this.xAxisLableFormat,
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
axisPointer: {
|
||||
snap: true,
|
||||
label: {
|
||||
formatter: this.xAxisPointFormat,
|
||||
backgroundColor: 'rgb(255,0,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 'auto',
|
||||
formatter: this.yAxisLableFormat
|
||||
},
|
||||
axisPointer: {
|
||||
xAxisIndex: 'all',
|
||||
label: {
|
||||
formatter: this.yAxisPointFormat,
|
||||
backgroundColor: 'rgb(0,100,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
min: 0,
|
||||
max: 0
|
||||
},
|
||||
series: [],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside'
|
||||
},
|
||||
{
|
||||
fiterMode: 'filter',
|
||||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||||
handleSize: '80%',
|
||||
handleStyle: {
|
||||
color: '#fff',
|
||||
shadowBlur: 3,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
bottom: '20px'
|
||||
}
|
||||
]
|
||||
},
|
||||
absoluteTime: 2 * 3600,
|
||||
indexKmRangeMap: {},
|
||||
stationsObj: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('runPlan', [
|
||||
'draftStations'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
maxWidth() {
|
||||
this.setPosition();
|
||||
},
|
||||
maxHeight() {
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.runPlan.planSizeCount': function () {
|
||||
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
|
||||
},
|
||||
'$store.state.runPlan.refreshCount': function() {
|
||||
this.loadChartPage();
|
||||
},
|
||||
$route() {
|
||||
this.$nextTick(() => {
|
||||
this.loadChartPage();
|
||||
});
|
||||
},
|
||||
loadRunPlanId() {
|
||||
this.loadChartPage();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setPosition();
|
||||
this.loadChartPage();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroy();
|
||||
},
|
||||
methods: {
|
||||
displayTrain() {
|
||||
this.showTrain = !this.showTrain;
|
||||
},
|
||||
serviceNumberChange(row) {
|
||||
let serviceNumber = null;
|
||||
let serviceObj = {};
|
||||
if (row) {
|
||||
serviceNumber = row.serviceNumber;
|
||||
serviceObj = this.$store.state.runPlan.draftEditData[row.serviceNumber] || {};
|
||||
|
||||
const op = this.myChart.getOption();
|
||||
op.series.forEach((item, index) => {
|
||||
item.lineStyle.color = '#000';
|
||||
switch (item.name) {
|
||||
case serviceNumber: {
|
||||
item.lineStyle.color = 'red';
|
||||
break;
|
||||
}
|
||||
case 'trainLabel': {
|
||||
op.series.pop();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
this.myChart.setOption(op, true);
|
||||
}
|
||||
this.$store.dispatch('runPlan/setDraftSelected', { serviceNumber: serviceNumber, tripNumber: null });
|
||||
this.analyticalTripNumber(serviceObj.trainMap || {});
|
||||
},
|
||||
tripNumberChange(row) {
|
||||
const serviceNumber = this.$store.state.runPlan.draftSelected.serviceNumber;
|
||||
let tripNumber = null;
|
||||
if (row) {
|
||||
const data = [];
|
||||
tripNumber = row.tripNumber;
|
||||
const op = this.myChart.getOption();
|
||||
op.series.forEach((item, index) => {
|
||||
switch (item.name) {
|
||||
case serviceNumber: {
|
||||
// const param = '\\[\\d*,\\d*,"Station_\\d*_[.\\d]*","' + tripNumber + '"\\]';
|
||||
// const temp = JSON.stringify(item.data).match(new RegExp(param, 'g'));
|
||||
// data = JSON.parse('[' + temp.toString() + ']');
|
||||
item.data.forEach(nor => {
|
||||
if (nor[3] == tripNumber) {
|
||||
data.push(nor);
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'trainLabel': {
|
||||
op.series.pop();
|
||||
this.myChart && this.myChart.setOption(op, true);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
op.series.push({
|
||||
name: 'trainLabel',
|
||||
lineStyle: {
|
||||
color: 'green'
|
||||
},
|
||||
type: 'line',
|
||||
data: data
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.myChart && this.myChart.setOption(op, true);
|
||||
}, 50);
|
||||
|
||||
}
|
||||
this.$store.dispatch('runPlan/setDraftSelected', { serviceNumber: serviceNumber, tripNumber: tripNumber });
|
||||
},
|
||||
async analyticalServiceNumber(data) {
|
||||
this.serviceNumberConfig.data = Object.keys(data || {})
|
||||
.sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
|
||||
.map(serviceNumber => { return { serviceNumber }; });
|
||||
},
|
||||
async analyticalTripNumber(data) {
|
||||
this.tripNumberConfig.data = Object.keys(data || {})
|
||||
.sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
|
||||
.map(tripNumber => { return { tripNumber }; });
|
||||
},
|
||||
async setPosition() {
|
||||
this.$nextTick(() => {
|
||||
let top = 3;
|
||||
const width = this.maxWidth;
|
||||
let height = this.maxHeight;
|
||||
|
||||
const titleBar = document.getElementById('PlanTitleBar');
|
||||
const menuBar = document.getElementById('PlanMenuBar');
|
||||
const menuTool = document.getElementById('PlanMenuTool');
|
||||
const statusBar = document.getElementById('PlanStatusBar');
|
||||
|
||||
if (titleBar) {
|
||||
top += (titleBar.offsetHeight || 0);
|
||||
}
|
||||
|
||||
if (menuBar) {
|
||||
top += (menuBar.offsetHeight || 0);
|
||||
}
|
||||
|
||||
if (menuTool) {
|
||||
top += (menuTool.offsetHeight || 0);
|
||||
}
|
||||
|
||||
if (statusBar) {
|
||||
height -= (statusBar.offsetHeight || 0);
|
||||
}
|
||||
|
||||
height = height - top;
|
||||
this.$store.dispatch('runPlan/resize', { width, height:height - 20 });
|
||||
|
||||
if (this.top != top) {
|
||||
this.top = top;
|
||||
}
|
||||
|
||||
if (this.height != height) {
|
||||
this.height = height - 20 * 2;
|
||||
}
|
||||
});
|
||||
},
|
||||
serviceNumberModify(row) {
|
||||
if (row) {
|
||||
this.$refs.modifyService.doShow({serviceNumber:row.serviceNumber});
|
||||
}
|
||||
},
|
||||
tripNumberModify(row) {
|
||||
if (row) {
|
||||
this.$refs.modifyService.doShow({serviceNumber:this.$store.state.runPlan.draftSelected.serviceNumber, tripNumber:row.tripNumber});
|
||||
}
|
||||
},
|
||||
async loadChartPage() {
|
||||
try {
|
||||
this.$store.dispatch('runPlan/draftClear').then(() => {
|
||||
// this.loadInitChart().then(() => {
|
||||
if (this.$route.query.mapId) {
|
||||
getStationList(this.$route.query.mapId).then(resp => {
|
||||
this.$store.dispatch('runPlan/setDraftStations', resp.data).then(() => {
|
||||
this.loadInitData();
|
||||
if (this.loadRunPlanId) {
|
||||
this.myChart && this.myChart.showLoading();
|
||||
queryRunPlan(this.loadRunPlanId).then(rest => {
|
||||
this.$store.dispatch('runPlan/setDraftPlanData', rest.data).then(() => {
|
||||
this.analyticalServiceNumber(this.$store.state.runPlan.draftEditData);
|
||||
this.loadChartData();
|
||||
this.myChart && this.myChart.hideLoading();
|
||||
});
|
||||
}).catch(() => {
|
||||
this.myChart && this.myChart.hideLoading();
|
||||
this.$messageBox(this.$t('error.obtainOperationGraphFailed'));
|
||||
});
|
||||
} else {
|
||||
// this.clearCanvas();
|
||||
this.$store.dispatch('runPlan/setDraftPlanData', {serviceNumberDataList: []}).then(()=> {
|
||||
this.analyticalServiceNumber(this.$store.state.runPlan.draftEditData);
|
||||
this.loadChartData();
|
||||
this.myChart && this.myChart.hideLoading();
|
||||
});
|
||||
}
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('tip.requestingStationDataFailed'));
|
||||
this.$store.dispatch('runPlan/setDraftStations', []);
|
||||
});
|
||||
}
|
||||
// });
|
||||
});
|
||||
} catch (error) {
|
||||
this.$messageBox(this.$t('error.loadingOperationGraphFailed'));
|
||||
}
|
||||
},
|
||||
async loadChartData() {
|
||||
try {
|
||||
const stations = this.$store.state.runPlan.draftStations;
|
||||
const planData = this.$store.state.runPlan.draftPlanData;
|
||||
this.stationsObj = {};
|
||||
stations.forEach(item => {
|
||||
this.stationsObj[Math.floor(item.kmRange)] = item;
|
||||
});
|
||||
|
||||
this.viewDisabled = true;
|
||||
|
||||
this.option.series = [];
|
||||
this.kmRangeCoordMap = this.planConvert.convertStationsToMap(stations);
|
||||
this.pushModels(this.option.series, [this.planConvert.initializeYaxis(this.draftStations)]);
|
||||
this.pushModels(this.option.series, this.planConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { width: 0.5, color: '#000' }));
|
||||
await this.loadInitChart();
|
||||
|
||||
this.viewDisabled = false;
|
||||
} catch (error) {
|
||||
this.viewDisabled = false;
|
||||
this.$messageBox(this.$t('error.loadingOperationGraphFailed') + this.$t('global.colon') + error.message);
|
||||
}
|
||||
},
|
||||
async loadInitData() {
|
||||
await this.xAxisInit();
|
||||
await this.yAxisInit();
|
||||
// await this.loadInitChart();
|
||||
},
|
||||
pushModels(series, models) {
|
||||
if (models && models.length) {
|
||||
models.forEach(elem => {
|
||||
if (elem) {
|
||||
series.push(elem);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return series;
|
||||
},
|
||||
popModels(series, models) {
|
||||
if (models && models.length) {
|
||||
models.forEach(elem => {
|
||||
const index = series.indexOf(elem);
|
||||
if (index >= 0) {
|
||||
series.split(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return series;
|
||||
},
|
||||
loadInitChart() {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
if (this.myChart && this.myChart.isDisposed) {
|
||||
this.myChart.clear();
|
||||
}
|
||||
this.option.title.text = this.loadRunPlanName;
|
||||
this.myChart = echarts.init(document.getElementById(this.runPlanId));
|
||||
this.myChart.setOption(this.option);
|
||||
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
|
||||
resolve(true);
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
clearCanvas() {
|
||||
this.option.series = [];
|
||||
this.option.title.text = '';
|
||||
if (this.myChart) {
|
||||
this.myChart.clear();
|
||||
}
|
||||
this.myChart && this.myChart.setOption(this.option);
|
||||
},
|
||||
xAxisPointFormat(params) {
|
||||
return timeFormat(params.value);
|
||||
},
|
||||
yAxisPointFormat(params) {
|
||||
return this.planConvert.computedFormatYAxis(this.draftStations, params);
|
||||
},
|
||||
xAxisLableFormat(value, index) {
|
||||
if (value % 60 === 0) {
|
||||
return timeFormat(value);
|
||||
}
|
||||
},
|
||||
yAxisLableFormat(value, index) {
|
||||
return '';
|
||||
},
|
||||
xAxisInit() {
|
||||
const list = [];
|
||||
for (var time = 0 + this.planConvert.TranslationTime; time < 3600 * 24 + this.planConvert.TranslationTime; time++) {
|
||||
list.push(time);
|
||||
}
|
||||
|
||||
const startValue = 3600 * 6;
|
||||
const offsetTime = 3600 * 1;
|
||||
|
||||
this.option.xAxis[0].data = list;
|
||||
if (!this.option.dataZoom[0].startValue) {
|
||||
this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
|
||||
}
|
||||
|
||||
if (!this.option.dataZoom[0].endValue) {
|
||||
this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
|
||||
}
|
||||
},
|
||||
yAxisInit() {
|
||||
if (Object.keys(this.planConvert).length) {
|
||||
this.pushModels(this.option.series, [this.planConvert.initializeYaxis(this.draftStations)]);
|
||||
this.option.yAxis.min = this.planConvert.computedYaxisMinValue(this.draftStations);
|
||||
this.option.yAxis.max = this.planConvert.computedYaxisMaxValue(this.draftStations);
|
||||
}
|
||||
},
|
||||
axisTooltip(param) {
|
||||
let data = '';
|
||||
const arr = [];
|
||||
param.forEach(item => {
|
||||
const station = this.$store.getters['map/getDeviceByCode'](item.data[2]);
|
||||
if (!arr.includes(`${item.data[0]}${item.data[1]}`)) {
|
||||
arr.push(`${item.data[0]}${item.data[1]}`);
|
||||
if (this.$route.query.lineCode == '06' || this.$route.query.lineCode == '08') {
|
||||
const list = [
|
||||
`${this.$t('planMonitor.stationName')}${station.name}<br>`,
|
||||
`${this.$t('planMonitor.stationKilometerMark')}${station.kmRange} m <br>`,
|
||||
`${this.$t('planMonitor.arriveTime')}${timeFormat(item.data[0] + this.planConvert.TranslationTime)}<br>`,
|
||||
`${this.$t('planMonitor.serverTrainNum')}: ${item.seriesName}${item.data[3]}`,
|
||||
`<hr size=1 style="margin: 3px 0">`
|
||||
];
|
||||
data += list.join('');
|
||||
} else {
|
||||
const list = [
|
||||
`${this.$t('planMonitor.stationName')}${station.name}<br>`,
|
||||
`${this.$t('planMonitor.stationKilometerMark')}${station.kmRange} m <br>`,
|
||||
`${this.$t('planMonitor.arriveTime')}${timeFormat(item.data[0] + this.planConvert.TranslationTime)}<br>`,
|
||||
`${this.$t('planMonitor.serverTrainNum')}: ${item.seriesName}${item.data[3]}(${item.data[3][0] == '2' ? '上行' : '下行'})`,
|
||||
`<hr size=1 style="margin: 3px 0">`
|
||||
];
|
||||
data += list.join('');
|
||||
}
|
||||
}
|
||||
});
|
||||
return data;
|
||||
},
|
||||
reSize(opt) {
|
||||
if (this.myChart) {
|
||||
this.myChart.resize({
|
||||
width: opt.width,
|
||||
height: opt.height,
|
||||
silent: false
|
||||
});
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (this.myChart && this.myChart.isDisposed) {
|
||||
this.myChart.dispose();
|
||||
this.myChart = null;
|
||||
}
|
||||
},
|
||||
scheduleTouch() {
|
||||
},
|
||||
trainNumTouch() {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
#PlanSchedule {
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 45px);
|
||||
position: relative;
|
||||
margin-top: 45px;
|
||||
|
||||
.left {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.position {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 50px;
|
||||
width: 220px;
|
||||
height: calc(100% - 45px);
|
||||
}
|
||||
.data_table_box{
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user