增加绘图新建功能
This commit is contained in:
lVAL
parent
3210c0feb6
commit
541a1cabe4
@ -10,6 +10,16 @@ export function getRpTools() {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除运行图
|
||||
*/
|
||||
export function clearRpPlan() {
|
||||
return request({
|
||||
url: `/api/rpTools/clear`,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加车次
|
||||
*/
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import { createMartPointReverse, createSeriesModel, createMarkLineModels, hexColor, convertSheetToList, prefixTime } from '@/utils/runPlan';
|
||||
import { createMartPoint, createSeriesModel, createMarkLineModels, hexColor, prefixTime, convertSheetToList } from '@/utils/runPlan';
|
||||
|
||||
export default {
|
||||
/** 边缘高度*/
|
||||
EdgeHeight: 600,
|
||||
EdgeHeight: 3,
|
||||
|
||||
/** 间隔高度*/
|
||||
CoordMultiple: 1,
|
||||
CoordMultiple: 3,
|
||||
|
||||
/** 偏移时间*/
|
||||
TranslationTime: 0,
|
||||
TranslationTime: 0,
|
||||
|
||||
/** 将后台数据解析成图表*/
|
||||
convertDataToModels(tripList, stations, kmRangeCoordMap, lineStyle) {
|
||||
@ -16,11 +16,11 @@ export default {
|
||||
/** 按车次遍历数据*/
|
||||
if (tripList && tripList.length) {
|
||||
tripList.forEach(trip => {
|
||||
const opt = {
|
||||
name: `run-${trip.tripNo}`,
|
||||
type: 'line',
|
||||
legendHoverLink: false,
|
||||
symbolSize: 6,
|
||||
const opt = {
|
||||
name: `run-${trip.tripNo}`,
|
||||
type: 'line',
|
||||
legendHoverLink: false,
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
color: '#000',
|
||||
width: 1,
|
||||
@ -29,19 +29,6 @@ export default {
|
||||
data: []
|
||||
};
|
||||
|
||||
// const length = trip.stationTimeList.length;
|
||||
// if (trip.tripNo &&
|
||||
// trip.stationTimeList.length) {
|
||||
// opt.markPoint.data.push(createMartPointReverse({
|
||||
// name: `${trip.tripNo}`,
|
||||
// color: '#000' || lineStyle.color,
|
||||
// coord: [
|
||||
// trip.stationTimeList[0].arrivalTime,
|
||||
// this.getCoordYByElem(stations, kmRangeCoordMap, trip.stationTimeList[0])
|
||||
// ]
|
||||
// }));
|
||||
// }
|
||||
|
||||
/** 计算停站点坐标集合*/
|
||||
trip.stationTimeList.forEach((elem,idx) => {
|
||||
if (elem.arrivalTime) {
|
||||
@ -58,7 +45,7 @@ export default {
|
||||
}
|
||||
|
||||
return models;
|
||||
},
|
||||
},
|
||||
|
||||
/** 更新数据并解析成图表*/
|
||||
updateDataToModels(tripList, stations, kmRangeCoordMap, runPlanData, series, lineStyle) {
|
||||
@ -67,71 +54,64 @@ export default {
|
||||
return series;
|
||||
},
|
||||
|
||||
/** 初始化Y轴*/
|
||||
initializeYaxis(stations) {
|
||||
return createMarkLineModels(stations, (elem) => {
|
||||
return this.EdgeHeight + elem.kmRange * this.CoordMultiple;
|
||||
});
|
||||
},
|
||||
|
||||
/** 将后台数据转换为试图序列模型*/
|
||||
convertStationsToMap(stations) {
|
||||
var map = {};
|
||||
if (stations && stations.length) {
|
||||
stations.forEach((elem) => {
|
||||
map[`${elem.kmRange}`] = this.EdgeHeight + elem.kmRange * this.CoordMultiple;
|
||||
stations.forEach((elem, index) => {
|
||||
map[`${elem.kmRange}`] = this.EdgeHeight + index * this.CoordMultiple;
|
||||
});
|
||||
}
|
||||
|
||||
return map;
|
||||
},
|
||||
/** 初始化Y轴*/
|
||||
initializeYaxis(stations) {
|
||||
return createMarkLineModels(stations, (elem, index) => {
|
||||
return this.EdgeHeight + index * this.CoordMultiple;
|
||||
});
|
||||
},
|
||||
|
||||
/** 计算y轴最小值*/
|
||||
computedYaxisMinValue(stations) {
|
||||
return stations[0].kmRange * this.CoordMultiple;
|
||||
computedYaxisMinValue() {
|
||||
return 0;
|
||||
},
|
||||
|
||||
/** 计算y轴最大值*/
|
||||
computedYaxisMaxValue(stations) {
|
||||
return stations[stations.length - 1].kmRange * this.CoordMultiple + this.EdgeHeight * 2;
|
||||
return this.EdgeHeight * 2 + (stations.length - 1) * this.CoordMultiple;
|
||||
},
|
||||
|
||||
/** 格式化y轴数据*/
|
||||
computedFormatYAxis(stations, params) {
|
||||
var yText = '0m';
|
||||
|
||||
stations.forEach(elem => {
|
||||
if (elem.kmRange < parseInt(params.value) / this.CoordMultiple - this.EdgeHeight) {
|
||||
yText = Math.floor(elem.kmRange) + 'm';
|
||||
}
|
||||
});
|
||||
|
||||
var index = Math.floor((parseInt(params.value) - this.EdgeHeight) / this.CoordMultiple);
|
||||
if (index >= 0 && index < stations.length) {
|
||||
yText = Math.floor(stations[index].kmRange) + 'm';
|
||||
}
|
||||
return yText;
|
||||
},
|
||||
|
||||
/** 根据是否和上一个车次是否相交，计算下一个车次的折返的高度*/
|
||||
computedReentryNumber(code) {
|
||||
// return parseInt(code || 1) % 2 ? 1 : 2;
|
||||
return 1;
|
||||
},
|
||||
|
||||
/** 根据方向计算y折返偏移量*/
|
||||
getYvalueByDirectionCode(defaultVlue, directionCode, num) {
|
||||
getYvalueByDirectionCode(defaultVlue, directionCode) {
|
||||
if (directionCode === '1') {
|
||||
defaultVlue += this.EdgeHeight / 2 * num;
|
||||
defaultVlue -= this.EdgeHeight / 2;
|
||||
} else if (directionCode === '2') {
|
||||
defaultVlue -= this.EdgeHeight / 2 * num;
|
||||
defaultVlue += this.EdgeHeight / 2;
|
||||
}
|
||||
|
||||
return defaultVlue;
|
||||
},
|
||||
|
||||
/** 根据elem计算y值*/
|
||||
getCoordYByElem(stations, kmRangeCoordMap, elem) {
|
||||
getCoordYByElem(stations, kmRangeCoordMap, elem, directionCode, isSpecial) {
|
||||
var defaultVlue = 0;
|
||||
var station = stations.find(it => { return it.code == elem.stationCode; });
|
||||
if (station) {
|
||||
defaultVlue = kmRangeCoordMap[`${station.kmRange}`];
|
||||
if (isSpecial) {
|
||||
defaultVlue = this.getYvalueByDirectionCode(defaultVlue, directionCode);
|
||||
}
|
||||
}
|
||||
|
||||
return defaultVlue;
|
||||
@ -1,14 +1,14 @@
|
||||
import { createMartPoint, createSeriesModel, createMarkLineModels, hexColor, prefixTime, convertSheetToList } from '@/utils/runPlan';
|
||||
import { createMartPointReverse, createSeriesModel, createMarkLineModels, hexColor, convertSheetToList, prefixTime } from '@/utils/runPlan';
|
||||
|
||||
export default {
|
||||
/** 边缘高度*/
|
||||
EdgeHeight: 3,
|
||||
EdgeHeight: 600,
|
||||
|
||||
/** 间隔高度*/
|
||||
CoordMultiple: 3,
|
||||
CoordMultiple: 1,
|
||||
|
||||
/** 偏移时间*/
|
||||
TranslationTime: 0,
|
||||
TranslationTime: 0,
|
||||
|
||||
/** 将后台数据解析成图表*/
|
||||
convertDataToModels(tripList, stations, kmRangeCoordMap, lineStyle) {
|
||||
@ -29,6 +29,19 @@ export default {
|
||||
data: []
|
||||
};
|
||||
|
||||
// const length = trip.stationTimeList.length;
|
||||
// if (trip.tripNo &&
|
||||
// trip.stationTimeList.length) {
|
||||
// opt.markPoint.data.push(createMartPointReverse({
|
||||
// name: `${trip.tripNo}`,
|
||||
// color: '#000' || lineStyle.color,
|
||||
// coord: [
|
||||
// trip.stationTimeList[0].arrivalTime,
|
||||
// this.getCoordYByElem(stations, kmRangeCoordMap, trip.stationTimeList[0])
|
||||
// ]
|
||||
// }));
|
||||
// }
|
||||
|
||||
/** 计算停站点坐标集合*/
|
||||
trip.stationTimeList.forEach((elem,idx) => {
|
||||
if (elem.arrivalTime) {
|
||||
@ -45,7 +58,7 @@ export default {
|
||||
}
|
||||
|
||||
return models;
|
||||
},
|
||||
},
|
||||
|
||||
/** 更新数据并解析成图表*/
|
||||
updateDataToModels(tripList, stations, kmRangeCoordMap, runPlanData, series, lineStyle) {
|
||||
@ -54,64 +67,71 @@ export default {
|
||||
return series;
|
||||
},
|
||||
|
||||
/** 初始化Y轴*/
|
||||
initializeYaxis(stations) {
|
||||
return createMarkLineModels(stations, (elem) => {
|
||||
return this.EdgeHeight + elem.kmRange * this.CoordMultiple;
|
||||
});
|
||||
},
|
||||
|
||||
/** 将后台数据转换为试图序列模型*/
|
||||
convertStationsToMap(stations) {
|
||||
var map = {};
|
||||
if (stations && stations.length) {
|
||||
stations.forEach((elem, index) => {
|
||||
map[`${elem.kmRange}`] = this.EdgeHeight + index * this.CoordMultiple;
|
||||
stations.forEach((elem) => {
|
||||
map[`${elem.kmRange}`] = this.EdgeHeight + elem.kmRange * this.CoordMultiple;
|
||||
});
|
||||
}
|
||||
|
||||
return map;
|
||||
},
|
||||
/** 初始化Y轴*/
|
||||
initializeYaxis(stations) {
|
||||
return createMarkLineModels(stations, (elem, index) => {
|
||||
return this.EdgeHeight + index * this.CoordMultiple;
|
||||
});
|
||||
},
|
||||
|
||||
/** 计算y轴最小值*/
|
||||
computedYaxisMinValue() {
|
||||
return 0;
|
||||
computedYaxisMinValue(stations) {
|
||||
return stations[0].kmRange * this.CoordMultiple;
|
||||
},
|
||||
|
||||
/** 计算y轴最大值*/
|
||||
computedYaxisMaxValue(stations) {
|
||||
return this.EdgeHeight * 2 + (stations.length - 1) * this.CoordMultiple;
|
||||
return stations[stations.length - 1].kmRange * this.CoordMultiple + this.EdgeHeight * 2;
|
||||
},
|
||||
|
||||
/** 格式化y轴数据*/
|
||||
computedFormatYAxis(stations, params) {
|
||||
var yText = '0m';
|
||||
var index = Math.floor((parseInt(params.value) - this.EdgeHeight) / this.CoordMultiple);
|
||||
if (index >= 0 && index < stations.length) {
|
||||
yText = Math.floor(stations[index].kmRange) + 'm';
|
||||
}
|
||||
|
||||
stations.forEach(elem => {
|
||||
if (elem.kmRange < parseInt(params.value) / this.CoordMultiple - this.EdgeHeight) {
|
||||
yText = Math.floor(elem.kmRange) + 'm';
|
||||
}
|
||||
});
|
||||
|
||||
return yText;
|
||||
},
|
||||
|
||||
/** 根据是否和上一个车次是否相交，计算下一个车次的折返的高度*/
|
||||
computedReentryNumber(code) {
|
||||
// return parseInt(code || 1) % 2 ? 1 : 2;
|
||||
return 1;
|
||||
},
|
||||
|
||||
/** 根据方向计算y折返偏移量*/
|
||||
getYvalueByDirectionCode(defaultVlue, directionCode) {
|
||||
getYvalueByDirectionCode(defaultVlue, directionCode, num) {
|
||||
if (directionCode === '1') {
|
||||
defaultVlue -= this.EdgeHeight / 2;
|
||||
defaultVlue += this.EdgeHeight / 2 * num;
|
||||
} else if (directionCode === '2') {
|
||||
defaultVlue += this.EdgeHeight / 2;
|
||||
defaultVlue -= this.EdgeHeight / 2 * num;
|
||||
}
|
||||
|
||||
return defaultVlue;
|
||||
},
|
||||
|
||||
/** 根据elem计算y值*/
|
||||
getCoordYByElem(stations, kmRangeCoordMap, elem, directionCode, isSpecial) {
|
||||
getCoordYByElem(stations, kmRangeCoordMap, elem) {
|
||||
var defaultVlue = 0;
|
||||
var station = stations.find(it => { return it.code == elem.stationCode; });
|
||||
if (station) {
|
||||
defaultVlue = kmRangeCoordMap[`${station.kmRange}`];
|
||||
if (isSpecial) {
|
||||
defaultVlue = this.getYvalueByDirectionCode(defaultVlue, directionCode);
|
||||
}
|
||||
}
|
||||
|
||||
return defaultVlue;
|
||||
|
||||
@ -23,7 +23,7 @@ export default {
|
||||
this.listenersOff();
|
||||
},
|
||||
methods: {
|
||||
getStationByCoord1(stations, y) {
|
||||
getStationByCoord(stations, y) {
|
||||
for(var i = stations.length-1; i >= 0; i--) {
|
||||
const station = stations[i];
|
||||
const edge = this.planConvert.EdgeHeight
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
}
|
||||
return null;
|
||||
},
|
||||
getStationByCoord(stations, y) {
|
||||
getStationByCoord2(stations, y) {
|
||||
for(var i = stations.length-1; i >= 0; i--) {
|
||||
const station = stations[i];
|
||||
const edge = this.planConvert.EdgeHeight;
|
||||
@ -96,10 +96,11 @@ export default {
|
||||
}
|
||||
},
|
||||
onUpdatePosition(e) {
|
||||
this.clearGraphic();
|
||||
const option = this.myChart.getOption();
|
||||
const elements = option.graphic[0].elements
|
||||
const graphic = echarts.util.map(elements, (item) => {
|
||||
return { position: this.myChart.convertToPixel('grid', item.data) };
|
||||
return { position: this.myChart.convertToPixel('grid', item.point)};
|
||||
})
|
||||
this.myChart.setOption({graphic});
|
||||
},
|
||||
@ -184,7 +185,7 @@ export default {
|
||||
type: 'circle',
|
||||
subType: 'drag',
|
||||
position: this.myChart.convertToPixel('grid', point),
|
||||
data: [...point],
|
||||
point: [...point],
|
||||
shape: {
|
||||
cx: 0,
|
||||
cy: 0,
|
||||
@ -200,37 +201,19 @@ export default {
|
||||
},
|
||||
createMarkPointObj(point) {
|
||||
return {
|
||||
type: 'group',
|
||||
subType: 'mark',
|
||||
type: 'circle',
|
||||
subType: 'mark',
|
||||
z: 100,
|
||||
position: point,
|
||||
point,
|
||||
children: [
|
||||
{
|
||||
type: 'circle',
|
||||
z: 100,
|
||||
shape: {
|
||||
cx: 0,
|
||||
cy: 0,
|
||||
r: 5
|
||||
},
|
||||
style: {
|
||||
fill: 'rgba(0,0,0,0.3)'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'circle',
|
||||
z: 100,
|
||||
shape: {
|
||||
cx: 0,
|
||||
cy: 0,
|
||||
r: 10
|
||||
},
|
||||
style: {
|
||||
fill: 'rgba(0,0,0,0.3)'
|
||||
}
|
||||
}
|
||||
]
|
||||
point: [...this.myChart.convertFromPixel('grid', point)],
|
||||
shape: {
|
||||
cx: 0,
|
||||
cy: 0,
|
||||
r: 10
|
||||
},
|
||||
style: {
|
||||
fill: 'rgba(0,0,0,0.3)'
|
||||
}
|
||||
}
|
||||
},
|
||||
handlePopDialog({e, pointInPixel}) {
|
||||
@ -334,7 +317,7 @@ export default {
|
||||
this.createModel.startTime = timeFormat(xVal);
|
||||
} else if (filters.length >= 2) {
|
||||
this.createModel.endStationCode = yObj.code;
|
||||
this.handleCreate(this.createModel);
|
||||
this.handleCreateTrip(this.createModel);
|
||||
}
|
||||
},
|
||||
handleDragging({e, xVal}) {
|
||||
@ -350,8 +333,10 @@ export default {
|
||||
});
|
||||
}
|
||||
|
||||
if (e.target && e.target.position) {
|
||||
e.target.data.x += this.selected.dx;
|
||||
if (e.target &&
|
||||
e.target.point &&
|
||||
e.target.position) {
|
||||
e.target.point[0] += this.selected.dx;
|
||||
}
|
||||
|
||||
this.myChart.setOption(option, {notMerge: true});
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
<template>
|
||||
<div id="PlanSchedule">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<div class="menus">
|
||||
<div slot="header" class="header">
|
||||
<div class="menus-left">
|
||||
<el-button type="primary" @click="handleNewPlan">New</el-button>
|
||||
</div>
|
||||
<div class="menus-right">
|
||||
<span style="font-size:22px;padding:0 17px;">Plan</span>
|
||||
<el-button-group v-model="active">
|
||||
<el-button v-for="(el,i) in buttonList"
|
||||
@ -29,7 +32,7 @@ import Monitor from './monitor.js';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import { getStationList } from '@/api/runplan';
|
||||
import { getRpTools, addRpTrip, delRpTrip, justTripNoRunning, justTripNoStop, translateTripNo} from '@/api/rpTools';
|
||||
import { getRpTools, clearRpPlan, addRpTrip, delRpTrip, justTripNoRunning, justTripNoStop, translateTripNo} from '@/api/rpTools';
|
||||
import { getPublishMapInfo } from '@/api/jmap/map';
|
||||
|
||||
export default {
|
||||
@ -377,7 +380,7 @@ export default {
|
||||
}
|
||||
|
||||
const startValue = 3600 * 6;
|
||||
const offsetTime = 3600 / 6;
|
||||
const offsetTime = 3600 / 2;
|
||||
|
||||
this.option.xAxis[0].data = list;
|
||||
if (!this.option.dataZoom[0].startValue) {
|
||||
@ -437,7 +440,20 @@ export default {
|
||||
this.action = '';
|
||||
this.selected = null;
|
||||
},
|
||||
handleCreate(data) {
|
||||
handleNewPlan() {
|
||||
clearRpPlan().then(resp => {
|
||||
getRpTools().then(rest => {
|
||||
this.$store.dispatch('rpTools/setPlanData', rest.data).then(() => {
|
||||
this.loadChartData();
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.obtainOperationGraphFailed'));
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$message(error.message);
|
||||
})
|
||||
},
|
||||
handleCreateTrip(data) {
|
||||
if (this.myChart) {
|
||||
addRpTrip(data).then(resp => {
|
||||
getRpTools().then(rest => {
|
||||
@ -540,11 +556,21 @@ export default {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.menus {
|
||||
.header {
|
||||
margin: 0 80px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.menus-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menus-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user