增加AUS线路编辑功能,以及调整增加运行图组后的接口

This commit is contained in:
lVAL 2020-10-28 15:01:14 +08:00
parent 1efa433841
commit 5f48a7743e
19 changed files with 540 additions and 676 deletions

View File

@ -1,5 +1,36 @@
import request from '@/utils/request'; import request from '@/utils/request';
/**
* 查询线路列表
*/
export function listLines() {
return request({
url: `/api/rpTools/map`,
method: 'get'
})
}
/**
* 查询线路列表
*/
export function listStations(lineId) {
return request({
url: `/api/rpTools/${lineId}/station`,
method: 'get'
})
}
/**
* 更新线路车站
*/
export function updateStation(lineId, data) {
return request({
url: `/api/rpTools/station/${lineId}`,
method: 'put',
data
})
}
/** /**
* 查询运行图列表 * 查询运行图列表
*/ */
@ -22,11 +53,11 @@ export function createRp(data) {
} }
/** /**
* 删除运行图 * 删除运行图
*/ */
export function deleteRp(planId) { export function deleteRp(groupId) {
return request({ return request({
url: `/api/rpTools/${planId}`, url: `/api/rpTools/${groupId}`,
method: 'delete' method: 'delete'
}) })
} }

View File

@ -1,268 +0,0 @@
import { createSeriesModel, createMarkLineModels, createMartPoint } from './utils';
import { toTimeStamp } from '@/utils/date';
export default {
/** 边缘高度*/
EdgeHeight: 600,
/** 间隔高度*/
CoordMultiple: 1,
/** 偏移时间*/
TranslationTime: 0,
/** 将后台数据解析成图形*/
parseDataToGraph(chart, planData, stations, kmRangeCoordinateMap) {
const graphs = [];
if (planData &&
planData.areaList &&
planData.areaList.length) {
planData.areaList.forEach(area => {
const startTime = toTimeStamp(area.startTime);
const endTime = toTimeStamp(area.endTime);
const fartherKm = this.getCoordinateYByObj(stations, kmRangeCoordinateMap, {stationCode: area.fartherStationCode});
const closerKm = this.getCoordinateYByObj(stations, kmRangeCoordinateMap, {stationCode: area.closerStationCode});
const point1 = [ startTime, fartherKm];
const point2 = [ endTime, closerKm]
const position = chart.convertToPixel('grid', point1);
const position2 = chart.convertToPixel('grid', point2)
const width = Math.abs(position[0] - position2[0]);
const height = Math.abs(position[1] - position2[1]);
graphs.push({
type: 'rect',
subType: 'area',
areaNo: area.areaNo,
position,
point1,
point2,
model: area,
shape: {
x: 0,
y: 0,
width,
height
},
style: {
fill: 'rgb(255,0,0, 0.3)',
stroke: 'rgb(255, 0, 0, 0.8)'
},
z: 100
})
})
}
return graphs;
},
/** 将后台数据解析成折线*/
parseDataToSeries(chart, planData, stations, kmRangeCoordinateMap) {
const models = [];
if (planData &&
planData.serviceList &&
planData.serviceList.length) {
planData.serviceList.forEach((service,i) => {
if (service.tripList &&
service.tripList.length) {
service.tripList.forEach((trip,j) => {
const opt = {
name: `plan-${service.serviceNo}-${trip.tripNo}-${trip.direction}`,
type: 'line',
symbolSize: 1,
showAllSymbol: true,
markPoint: { data: [] },
data: []
};
var lastPoint = null;
var nextPoint = null;
var pointData = {
name: `${service.serviceNo}-${trip.tripNo}`,
color: '#000',
direction: trip.direction,
coord: [trip.stationTimeList[0].departureTime, this.getCoordinateYByObj(stations, kmRangeCoordinateMap, trip.stationTimeList[0], trip.direction, false)],
};
opt.markPoint.data.push(createMartPoint(pointData));
trip.stationTimeList.forEach(elem => {
const name = `${trip.direction}${trip.tripNo}`;
if (elem.arrivalTime) {
opt.data.push([elem.arrivalTime, this.getCoordinateYByObj(stations, kmRangeCoordinateMap, elem, elem.direction, false), {
stationCode: elem.stationCode,
serviceNo: service.serviceNo,
tripNo: trip.tripNo,
direction: trip.direction,
name
}]);
}
if (elem.departureTime) {
opt.data.push([elem.departureTime, this.getCoordinateYByObj(stations, kmRangeCoordinateMap, elem, elem.direction, false), {
stationCode: elem.stationCode,
serviceNo: service.serviceNo,
tripNo: trip.tripNo,
direction: trip.direction,
name
}]);
}
});
const model = createSeriesModel(opt,
{ color: '#000', width: 1 },
{ color: '#000', fill: '#000'}
);
models.push(model);
if (service.tripList[j + 1] &&
service.tripList[j + 1].stationTimeList) {
const opt = {
name: `reentry-${service.serviceNo}-${trip.tripNo}-${trip.direction}`,
type: 'line',
symbolSize: 1,
showAllSymbol: false,
markPoint: { data: [] },
data: []
};
lastPoint = trip.stationTimeList[trip.stationTimeList.length-1];
nextPoint = service.tripList[j + 1].stationTimeList[0];
const name = `${trip.direction}${trip.tripNo}`;
opt.data.push([lastPoint.arrivalTime, this.getCoordinateYByObj(stations, kmRangeCoordinateMap, lastPoint, trip.direction, false), {
stationCode: lastPoint.stationCode,
serviceNo: service.serviceNo,
tripNo: trip.tripNo,
direction: trip.direction,
name
}]);
opt.data.push([lastPoint.arrivalTime, this.getCoordinateYByObj(stations, kmRangeCoordinateMap, lastPoint, trip.direction, true), {
stationCode: lastPoint.stationCode,
serviceNo: service.serviceNo,
tripNo: trip.tripNo,
direction: trip.direction,
name
}]);
opt.data.push([nextPoint.departureTime, this.getCoordinateYByObj(stations, kmRangeCoordinateMap, lastPoint, trip.direction, true), {
stationCode: lastPoint.stationCode,
serviceNo: service.serviceNo,
tripNo: trip.tripNo,
direction: trip.direction,
name
}]);
opt.data.push([nextPoint.departureTime, this.getCoordinateYByObj(stations, kmRangeCoordinateMap, lastPoint, trip.direction, false), {
stationCode: lastPoint.stationCode,
serviceNo: service.serviceNo,
tripNo: trip.tripNo,
direction: trip.direction,
name
}]);
const model = createSeriesModel(opt,
{ color: '#000', width: 1 },
{ color: '#000', fill: '#000'}
);
models.push(model);
}
});
}
})
}
return models;
},
/** 更新数据并解析成折线*/
updateDataToModels(chart, planData, stations, kmRangeCoordinateMap, series) {
if (planData && planData.length) {
}
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;
});
}
return map;
},
/** 计算y轴最小值*/
computedYaxisMinValue(stations) {
return stations[0].kmRange * this.CoordMultiple;
},
/** 计算y轴最大值*/
computedYaxisMaxValue(stations) {
return stations[stations.length - 1].kmRange * this.CoordMultiple + this.EdgeHeight * 2;
},
/** 格式化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';
}
});
return yText;
},
/** 根据方向计算y折返偏移量*/
getYvalueByDirectionCode(defaultVlue, direction) {
if (direction === '1') {
defaultVlue -= this.EdgeHeight / 2;
} else if (direction === '2') {
defaultVlue += this.EdgeHeight / 2;
}
return defaultVlue;
},
/** 根据elem计算y值*/
getCoordinateYByObj(stations, kmRangeCoordinateMap, obj, direction, isSpecial) {
var defaultVlue = 0;
var station = stations.find(it => { return it.code == obj.stationCode; });
if (station) {
defaultVlue = kmRangeCoordinateMap[`${station.kmRange}`];
if (isSpecial) {
defaultVlue = this.getYvalueByDirectionCode(defaultVlue, direction);
}
}
return defaultVlue;
},
/** 通过y坐标获取站信息 */
getStationByCoordinateY(stations, y) {
for(var i = stations.length-1; i >= 0; i--) {
const station = stations[i];
const edge = this.EdgeHeight
const preKm = i == 0? edge*2: Math.abs(station.kmRange-stations[i-1].kmRange)/2;
const nxtKm = i == stations.length-1? edge: Math.abs(station.kmRange-stations[i+1].kmRange)/2;
const min = edge + station.kmRange - preKm;
const max = edge + station.kmRange + nxtKm;
if (y >= min && y <= max) {
return station;
}
}
return null;
}
};

View File

@ -1,188 +0,0 @@
import { createMartPoint, createSeriesModel, createMarkLineModels, hexColor, prefixTime, convertSheetToList } from '@/utils/runPlan';
import { toTimeStamp } from '@/utils/date';
export default {
/** 边缘高度*/
EdgeHeight: 3,
/** 间隔高度*/
CoordMultiple: 3,
/** 偏移时间*/
TranslationTime: 0,
/** 将后台数据解析成图形*/
parseDataToGraph(chart, planData, stations, kmRangeCoordMap) {
const graphs = [];
if (planData &&
planData.areaList &&
planData.areaList.length) {
planData.areaList.forEach(el => {
const startTime = toTimeStamp(el.startTime);
const endTime = toTimeStamp(el.endTime);
const fartherKm = this.getCoordYByObj(stations, kmRangeCoordMap, {stationCode: el.fartherStationCode});
const closerKm = this.getCoordYByObj(stations, kmRangeCoordMap, {stationCode: el.closerStationCode});
const point1 = [ startTime, fartherKm];
const point2 = [ endTime, closerKm]
const position = chart.convertToPixel('grid', point1);
const position2 = chart.convertToPixel('grid', point2)
const width = Math.abs(position[0] - position2[0]);
const height = Math.abs(position[1] - position2[1]);
graphs.push({
type: 'rect',
subType: 'area',
areaNo: el.areaNo,
position,
point1,
point2,
model: el,
shape: {
x: 0,
y: 0,
width,
height
},
style: {
fill: 'rgb(255,0,0, 0.3)',
stroke: 'rgb(255, 0, 0, 0.8)'
},
z: 100
})
})
}
return graphs;
},
/** 将后台数据解析成折线*/
parseDataToSeries(chart, planData, stations, kmRangeCoordMap) {
var models = [];
/** 按车次遍历数据*/
if (planData && planData.length) {
planData.forEach(trip => {
const opt = {
name: `plan-${trip.tripNo}`,
type: 'line',
symbolSize: 1,
showAllSymbol: true,
lineStyle: {
color: '#000',
width: 1,
},
itemStyle: {
color: '#000',
fill: '#000'
},
markPoint: { data: [] },
data: []
};
/** 计算停站点坐标集合*/
trip.stationTimeList.forEach((elem,idx) => {
if (elem.arrivalTime) {
opt.data.push([elem.arrivalTime, this.getCoordYByObj(stations, kmRangeCoordMap, elem), elem.stationCode, trip.tripNo]);
}
if (elem.departureTime) {
opt.data.push([elem.departureTime, this.getCoordYByObj(stations, kmRangeCoordMap, elem), elem.stationCode, trip.tripNo]);
}
});
models.push(opt);
});
}
return models;
},
/** 更新数据并解析成折线*/
updateDataToModels(chart, planData, stations, kmRangeCoordMap, runPlanData, series) {
if (planData && planData.length) {
}
return series;
},
/** 将后台数据转换为试图序列模型*/
convertStationsToMap(stations) {
var map = {};
if (stations && stations.length) {
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() {
return 0;
},
/** 计算y轴最大值*/
computedYaxisMaxValue(stations) {
return this.EdgeHeight * 2 + (stations.length - 1) * this.CoordMultiple;
},
/** 格式化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';
}
return yText;
},
/** 根据方向计算y折返偏移量*/
getYvalueByDirectionCode(defaultVlue, directionCode) {
if (directionCode === '1') {
defaultVlue -= this.EdgeHeight / 2;
} else if (directionCode === '2') {
defaultVlue += this.EdgeHeight / 2;
}
return defaultVlue;
},
/** 根据elem计算y值*/
getCoordYByObj(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;
},
/** 通过y坐标获取站信息*/
getStationByCoordinateY(stations, y) {
for(var i = stations.length-1; i >= 0; i--) {
const station = stations[i];
const edge = this.EdgeHeight;
const rate = this.CoordMultiple;
const preKm = i == 0? edge*2: rate/2;
const nxtKm = i == stations.length-1? edge: rate/2;
const min = edge + i*rate - preKm;
const max = edge + i*rate + nxtKm;
if (y >= min && y <= max) {
return station;
}
}
return null;
}
};

View File

@ -78,15 +78,15 @@ export default {
name: `${service.serviceNo}-${trip.tripNo}`, name: `${service.serviceNo}-${trip.tripNo}`,
color: '#000', color: '#000',
direction: trip.direction, direction: trip.direction,
coord: [trip.stationTimeList[0].departureTime, this.getCoordinateYByStationCode(stations, trip.stationTimeList[0].stationCode)], coord: [trip.stationTimeList[0].departureTime, this.getCoordinateYByStationId(stations, trip.stationTimeList[0].stationId)],
}; };
opt.markPoint.data.push(createMartPoint(pointData)); opt.markPoint.data.push(createMartPoint(pointData));
trip.stationTimeList.forEach(elem => { trip.stationTimeList.forEach(elem => {
if (elem.arrivalTime) { if (elem.arrivalTime) {
opt.data.push([elem.arrivalTime, this.getCoordinateYByStationCode(stations, elem.stationCode), { opt.data.push([elem.arrivalTime, this.getCoordinateYByStationId(stations, elem.stationId), {
stationCode: elem.stationCode, stationId: elem.stationId,
serviceNo: service.serviceNo, serviceNo: service.serviceNo,
tripNo: trip.tripNo, tripNo: trip.tripNo,
direction: trip.direction, direction: trip.direction,
@ -95,8 +95,8 @@ export default {
} }
if (elem.departureTime) { if (elem.departureTime) {
opt.data.push([elem.departureTime, this.getCoordinateYByStationCode(stations, elem.stationCode), { opt.data.push([elem.departureTime, this.getCoordinateYByStationId(stations, elem.stationId), {
stationCode: elem.stationCode, stationId: elem.stationId,
serviceNo: service.serviceNo, serviceNo: service.serviceNo,
tripNo: trip.tripNo, tripNo: trip.tripNo,
direction: trip.direction, direction: trip.direction,
@ -112,8 +112,8 @@ export default {
nextPoint = service.tripList[j + 1].stationTimeList[0]; nextPoint = service.tripList[j + 1].stationTimeList[0];
opt.data.push({ opt.data.push({
value: [lastPoint.arrivalTime, this.getCoordinateYByStationCode(stations, lastPoint.stationCode, true, trip.direction), { value: [lastPoint.arrivalTime, this.getCoordinateYByStationId(stations, lastPoint.stationId, true, trip.direction), {
stationCode: lastPoint.stationCode, stationId: lastPoint.stationId,
serviceNo: service.serviceNo, serviceNo: service.serviceNo,
tripNo: trip.tripNo, tripNo: trip.tripNo,
direction: trip.direction, direction: trip.direction,
@ -123,8 +123,8 @@ export default {
symbolSize: 1, symbolSize: 1,
}); });
opt.data.push({ opt.data.push({
value: [nextPoint.departureTime, this.getCoordinateYByStationCode(stations, lastPoint.stationCode, true, trip.direction), { value: [nextPoint.departureTime, this.getCoordinateYByStationId(stations, lastPoint.stationId, true, trip.direction), {
stationCode: lastPoint.stationCode, stationId: lastPoint.stationId,
serviceNo: service.serviceNo, serviceNo: service.serviceNo,
tripNo: trip.tripNo, tripNo: trip.tripNo,
direction: trip.direction, direction: trip.direction,
@ -209,9 +209,9 @@ export default {
}, },
/** 通过站信息获取y坐标*/ /** 通过站信息获取y坐标*/
getCoordinateYByStationCode(stations, stationCode, isSpecial=false, direction='01') { getCoordinateYByStationId(stations, stationId, isSpecial=false, direction='01') {
var value = 0; var value = 0;
var station = stations.find(it => { return it.code == stationCode; }); var station = stations.find(it => { return it.id == stationId; });
if (station) { if (station) {
value = this.getCoordinateYByKmRange(station.kmRange) + this.getOffsetY(isSpecial, direction); value = this.getCoordinateYByKmRange(station.kmRange) + this.getOffsetY(isSpecial, direction);
} }

View File

@ -209,16 +209,6 @@ export function formatTime(time) {
} }
} }
/** 通过code将名称格式化*/
export function formatName(code) {
let name = '';
const device = store.getters['map/getDeviceByCode'](code);
if (device) {
name = device.name;
}
return name;
}
/** 将时间格式化前补零*/ /** 将时间格式化前补零*/
export function prefixTime(time) { export function prefixTime(time) {
let str = `${time}` || ''; let str = `${time}` || '';

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="drawer" :class="{visible}" tabindex="-1"> <div class="drawer" :class="{visible}" tabindex="-1">
<div class="drawer__wrapper" tabindex="-1" @click="doClose"> <div class="drawer__wrapper" @click.self="doClose">
<div class="layer" :class="[direction]" :style="{width: width+'px'}" tabindex="-1"> <div class="layer" :class="[direction]" :style="{width: width+'px'}">
<div class="title"> <div class="title">
<span> <span>
<slot name="title" /> <slot name="title" />
@ -50,7 +50,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.visible { .visible {
visibility: visible !important; visibility: visible !important;
.ltr { .layer {
transform: translateX(0) !important; transform: translateX(0) !important;
} }
} }
@ -64,6 +64,15 @@ export default {
transform: translateX(-100%); transform: translateX(-100%);
} }
.rtl {
transition: all .3s cubic-bezier(.7, .3, .1, 1);
position: absolute;
height: 100%;
top: 0;
right: 0;
transform: translateX(100%);
}
.drawer { .drawer {
position: fixed; position: fixed;
z-index: 2001; z-index: 2001;
@ -76,7 +85,7 @@ export default {
visibility: hidden; visibility: hidden;
&__wrapper { &__wrapper {
position: relative; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
@ -90,7 +99,6 @@ export default {
border: 1px solid #eee; border: 1px solid #eee;
box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12); box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
overflow: hidden; overflow: hidden;
position: relative;
.title { .title {
display: flex; display: flex;

View File

@ -6,18 +6,11 @@
<i class="el-icon-document" /> <i class="el-icon-document" />
</template> </template>
<el-menu-item-group> <el-menu-item-group>
<span slot="title">Line List</span> <span slot="title">线路列表</span>
<el-tree :data="lineList" :props="defaultProps" @node-click="onSelectLine"> <el-tree :data="lineList" :props="defaultProps" @node-click="onSelectLine">
<template slot-scope="{data}"> <template slot-scope="{data}">
<span class="flex" > <span class="flex" style="padding-right: 20px">
<span><i class="el-icon-document"/>&ensp;{{data.name}}</span> <span><i class="el-icon-document"/>&ensp;{{data.name}}</span>
<el-button
type="text"
style="color:red"
size="mini"
@click="doDeletePlan(data)">
Delete
</el-button>
</span> </span>
</template> </template>
</el-tree> </el-tree>
@ -25,22 +18,35 @@
</el-submenu> </el-submenu>
</el-menu> </el-menu>
<div class="container"> <div class="container">
<div class="title"> <el-card class="card" shadow="never">
<span>title</span> <div slot="header" class="clearfix">
</div> <span>{{ title||'请选择线路' }}</span>
<div class="form">
11111111111
</div> </div>
<stations :list="stationList" @select="onSelectStation">
<template slot-scope="{data}">
<div class="line">公里标{{data.kmRange}}m</div>
<div class="line">中转站{{data.transferable? '是': '否'}}</div>
<div class="line">上行容量{{data.upReception}}</div>
<div class="line">下行容量{{data.downReception}}</div>
</template>
</stations>
</el-card>
</div> </div>
<modify ref="modfiy" @update="onUpdateStation" />
</div> </div>
</template> </template>
<script> <script>
import Drawer from '../components/drawer.vue'; import Drawer from '../components/drawer.vue';
import Stations from './stations';
import Modify from './modify';
import { listLines, listStations, updateStation } from '@/api/rpTools';
export default { export default {
components: { components: {
Drawer Drawer,
Stations,
Modify
}, },
data() { data() {
return { return {
@ -48,54 +54,57 @@ export default {
children: 'children', children: 'children',
label: 'name' label: 'name'
}, },
lineList: [ lineList: [],
{name: '1', id: 1}, stationList: []
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
{name: '1', id: 1},
{name: '2', id: 2},
]
} }
}, },
computed: {
lineId() {
return this.$route.query.lineId;
},
title() {
return this.$route.query.title;
}
},
watch: {
$route: function() {
this.refreshStationList();
}
},
mounted() {
this.loadInitData();
this.refreshStationList();
},
methods: { methods: {
loadInitData() {
listLines().then(resp => {
this.lineList = resp.data;
}).catch(error => {
this.$message.info(error.message);
})
},
refreshStationList() {
if (this.lineId) {
listStations(this.lineId).then(resp => {
this.stationList = resp.data;
}).catch(error => {
this.$message.info(error.message);
})
}
},
onSelectLine(el) { onSelectLine(el) {
this.$router.replace({ path: 'AUSline', query: { lineId: el.id, title: el.name }});
},
onSelectStation(el) {
this.$refs.modfiy.doShow(el);
},
onUpdateStation(el) {
updateStation(this.lineId, el).then(resp => {
this.refreshStationList();
this.$message.success('修改成功。')
}).catch(error => {
this.$message.info(error.message);
})
} }
} }
} }
@ -114,22 +123,48 @@ export default {
.container { .container {
flex: 1; flex: 1;
.title { .card {
width: 100%; width: 60%;
height: 32px; margin: auto;
font-size: 26px; height: calc(100% - 10px);
padding: 7px; /deep/ {
background: rgba(240,240,240,0.3); .el-card__body {
display: flex; height: 100%;
justify-content: center; overflow-y: auto;
align-items: center;
&::-webkit-scrollbar {
width: 5px;
height: 5px;
}
&::-webkit-scrollbar-track {
background: rgb(239, 239, 239);
border-radius: 2px;
}
&::-webkit-scrollbar-thumb {
background: #bfbfbf;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb:hover {
background: #666;
}
&::-webkit-scrollbar-corner {
background: #fff;
}
}
} }
.form { .line {
padding: 30px; line-height: 28px;
width: 50%; height: 28px;
margin: auto;
} }
} }
} }
}
.flex {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
</style> </style>

View File

@ -0,0 +1,114 @@
<template>
<drawer :visible.sync="drawer" direction="rtl" :width="600" @before-close="e => drawer=false">
<template slot="title">修改表单</template>
<div class="container" v-if="model">
<el-form class="form" :model="model" :rules="rules" ref="form" label-width="100px" >
<el-form-item label="车站名称" prop="name">
<el-input v-model="model.name"></el-input>
</el-form-item>
<el-form-item label="公里标" prop="kmRange">
<el-input-number v-model="model.kmRange" controls-position="right" :min="0" /><span>m</span>
</el-form-item>
<el-form-item label="中转站" prop="transferable">
<el-checkbox v-model="model.transferable" />
</el-form-item>
<el-form-item label="上行容量" prop="upReception">
<el-input-number v-model="model.upReception" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="上行容量" prop="downReception">
<el-input-number v-model="model.downReception" controls-position="right" :min="1" />
</el-form-item>
</el-form>
<div class="footer">
<el-button type="primary" @click="doSubmit('form')">更新</el-button>
<el-button @click="drawer=false">取消</el-button>
</div>
</div>
</drawer>
</template>
<script>
import Drawer from '../components/drawer.vue';
export default {
components: {
Drawer
},
data() {
return {
drawer: false,
model: {
name: '',
kmRange: 0,
transferable: false,
upReception: 1,
downReception: 1
}
}
},
computed: {
rules() {
return {
name: [
{ required: true, message: '请输入车站名称', trigger: 'blur' }
],
kmRange: [
{ required: true, type: 'number', min: 0, message: '车站公里标不能小于0', trigger: 'blur' }
],
transferable: [
{ required: true, message: '请选择是否中转站', trigger: 'blur' },
],
upReception: [
{ required: true, type: 'number', min: 1, message: '请输入上行容量', trigger: 'blur' }
],
downReception: [
{ required: true, type: 'number', min: 1, message: '请输入下行容量', trigger: 'blur' }
]
}
}
},
methods: {
doShow(model) {
this.model = {
name: model.name,
kmRange: model.kmRange,
transferable: model.transferable,
upReception: model.upReception,
downReception: model.downReception
};
this.drawer = true;
},
doClose() {
this.drawer = false;
this.model = null;
},
doSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$emit('update', {...this.model});
this.drawer = false;
}
});
}
}
}
</script>
<style lang="scss" scoped>
.container {
height: calc(100% - 20px);
.form {
padding: 30px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
text-align: right;
padding: 5px 20px;
background: #f1f1f1;
}
}
</style>

View File

@ -0,0 +1,50 @@
<template>
<div class="container">
<template v-if="list.length" >
<el-card class="el" v-for="(el,i) in list" :key="i" shadow="hover">
<div slot="header" class="clearfix">
<span>{{el.name}}</span>
</div>
<div style="padding: 30px 80px">
<slot :data="el" />
</div>
<div class="clearfix" style="text-align:right">
<el-button type="text" @click.stop="onSelect(el)">编辑</el-button>
</div>
</el-card>
</template>
<template v-else>
<span>暂无数据</span>
</template>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
required: true
}
},
data() {
return {
}
},
methods: {
onSelect(el) {
this.$emit('select', el)
}
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 0 50px;
.el {
padding: 30px 50px;
margin: 10px 0;
}
}
</style>

View File

@ -4,6 +4,11 @@
<el-form-item label="Name" prop="name"> <el-form-item label="Name" prop="name">
<el-input v-model="formModel.name" placeholder="Please Input Run Plan Name." /> <el-input v-model="formModel.name" placeholder="Please Input Run Plan Name." />
</el-form-item> </el-form-item>
<el-form-item label="Lines" prop="maps">
<el-select v-model="formModel.maps" multiple filterable placeholder="Please Select Lines.">
<el-option v-for="item in lineList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button> <el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
@ -13,20 +18,32 @@
</template> </template>
<script> <script>
import { MenuEnum } from '../utils.js'; import { MenuEnum } from '../../utils.js';
export default { export default {
props: {
lineList: {
type: Array,
required: true
}
},
data() { data() {
return { return {
dialogShow: false, dialogShow: false,
formModel: { formModel: {
name: '', name: '',
maps: []
}, },
rules: { rules: {
name: [ name: [
{ {
required: true, message: 'Please Input Run Plan Name.', trigger: 'blur' required: true, message: 'Please Input Run Plan Name.', trigger: 'blur'
} }
],
maps: [
{
required: true, type: 'array', message: 'Please Select Lines.', trigger: 'change'
}
] ]
} }
}; };
@ -38,6 +55,7 @@ export default {
methods: { methods: {
doShow() { doShow() {
this.formModel.name = ''; this.formModel.name = '';
this.formModel.lineList = [];
this.dialogShow = true; this.dialogShow = true;
}, },
doClose() { doClose() {

View File

@ -11,7 +11,7 @@
</template> </template>
<script> <script>
import * as utils from '../utils' import * as utils from '../../utils'
import echarts from 'echarts'; import echarts from 'echarts';
import { timeFormat } from '@/utils/date'; import { timeFormat } from '@/utils/date';

View File

@ -14,7 +14,7 @@
</template> </template>
<script> <script>
import { MenuEnum } from '../utils.js'; import { MenuEnum } from '../../utils.js';
export default { export default {
props: { props: {

View File

@ -14,7 +14,7 @@
</template> </template>
<script> <script>
import { MenuEnum } from '../utils.js'; import { MenuEnum } from '../../utils.js';
export default { export default {
props: { props: {

View File

@ -14,7 +14,7 @@
</template> </template>
<script> <script>
import { MenuEnum } from '../utils.js'; import { MenuEnum } from '../../utils.js';
export default { export default {
props: { props: {

View File

@ -34,7 +34,7 @@
</template> </template>
<script> <script>
import { MenuEnum } from '../utils.js'; import { MenuEnum } from '../../utils.js';
export default { export default {
props: { props: {

View File

@ -19,7 +19,7 @@
<template slot="header"> <template slot="header">
<div class="header"> <div class="header">
<div class="menus-left"> <div class="menus-left">
<el-button type="primary" @click="drawer=true">Open</el-button> <el-button type="primary" @click="doOpenPlan">Open</el-button>
<el-button type="primary" @click="doNewPlan">New</el-button> <el-button type="primary" @click="doNewPlan">New</el-button>
<el-button type="primary" :disabled="disabled" @click="onDialog(MenuEnum.planSetParams)">Set Param</el-button> <el-button type="primary" :disabled="disabled" @click="onDialog(MenuEnum.planSetParams)">Set Param</el-button>
<el-button type="primary" @click="doExport" :disabled="disabled"> Export </el-button> <el-button type="primary" @click="doExport" :disabled="disabled"> Export </el-button>
@ -39,31 +39,18 @@
</template> </template>
</schedule> </schedule>
<drawer :visible.sync="drawer" @before-close="e => drawer=false"> <list ref="list" :planList="planList" @select="doSelectPlan" @delete="doDeletePlan" />
<template slot="title">Run Plan List</template>
<el-tree style="padding-right: 20px" :data="planList" :props="defaultProps" @node-click="onSelectPlan">
<template slot-scope="{data}">
<span class="flex" >
<span><i class="el-icon-document"/>&ensp;{{data.name}}</span>
<el-button
type="text"
style="color:red"
size="mini"
@click="doDeletePlan(data)">
Delete
</el-button>
</span>
</template>
</el-tree>
</drawer>
<plan-just-running :config="config" :selected="selected" :stations="stations" @justRunning="doJustRunning" /> <plan-just-running :config="config" :selected="selected" :stations="stations" @justRunning="doJustRunning" />
<plan-just-stop :config="config" :selected="selected" @justStop="doJustStop"/> <plan-just-stop :config="config" :selected="selected" @justStop="doJustStop"/>
<plan-just-turnback :config="config" :selected="selected" @justTurnBack="doJustTurnback"/> <plan-just-turnback :config="config" :selected="selected" @justTurnBack="doJustTurnback"/>
<plan-set-params :config="config" @setParams="doSetPlanParams" /> <plan-set-params :config="config" @setParams="doSetPlanParams" />
<plan-create ref="create" @createPlan="doCreatePlan" />
<plan-create ref="create" :lineList="lineList" @createPlan="doCreatePlan" />
<plan-export ref="export" :planUtil="planUtil" :title="title" :width="3600*2+2050" :height="height-160" /> <plan-export ref="export" :planUtil="planUtil" :title="title" :width="3600*2+2050" :height="height-160" />
<div class="fixed" v-show="show"> <div class="fixed" v-show="show">
<textarea :auto-focus="true" v-if="textareaModel.show" v-focus v-model="textareaModel.text" class="fixed-textarea" <textarea :auto-focus="true" v-if="textareaModel.show" v-focus v-model="textareaModel.text" class="fixed-textarea"
:style="{ left: rect.x+'px', top: rect.y+'px', width: rect.width+'px', height: rect.height+'px', }"/> :style="{ left: rect.x+'px', top: rect.y+'px', width: rect.width+'px', height: rect.height+'px', }"/>
@ -73,20 +60,20 @@
</template> </template>
<script> <script>
import PlanJustRunning from '../dialog/planJustRunning.vue'; import PlanJustRunning from './dialog/planJustRunning.vue';
import PlanJustStop from '../dialog/planJustStop.vue'; import PlanJustStop from './dialog/planJustStop.vue';
import PlanJustTurnback from '../dialog/planJustTurnback.vue'; import PlanJustTurnback from './dialog/planJustTurnback.vue';
import PlanSetParams from '../dialog/planSetParams.vue'; import PlanSetParams from './dialog/planSetParams.vue';
import PlanCreate from '../dialog/planCreate.vue'; import PlanCreate from './dialog/planCreate.vue';
import PlanExport from '../dialog/planExport.vue'; import PlanExport from './dialog/planExport.vue';
import Schedule from './schedule.vue'; import Schedule from './schedule.vue';
import Menus from './menus.vue'; import Menus from './menus.vue';
import Drawer from '../components/drawer.vue'; import List from './list.vue';
import * as utils from '../utils.js'; import * as utils from '../utils.js';
import { timeFormat } from '@/utils/date'; import { timeFormat } from '@/utils/date';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { getStationList } from '@/api/runplan';
import { import {
listLines, listStations,
listRps, createRp, deleteRp, listRps, createRp, deleteRp,
getRpTools, clearRpPlan, addRpTrip, delRpTrip, getRpTools, clearRpPlan, addRpTrip, delRpTrip,
justTripNoRunning, justTripNoStop, justTripTurnBack, justTripNoRunning, justTripNoStop, justTripTurnBack,
@ -105,16 +92,12 @@ export default {
PlanCreate, PlanCreate,
PlanExport, PlanExport,
Menus, Menus,
Drawer, List
}, },
data() { data() {
return { return {
defaultProps: {
children: 'children',
label: 'name'
},
drawer: false,
planList: [], planList: [],
lineList: [],
stations: [], stations: [],
planData: {}, planData: {},
selected: null, selected: null,
@ -157,15 +140,15 @@ export default {
}, },
height() { height() {
return this.$store.state.app.height - 72; return this.$store.state.app.height - 72;
},
planId() {
return this.$route.query.planId;
}, },
title() { title() {
return this.$route.query.title||''; return this.$route.query.title||'';
}, },
mapId() { planId() {
return 9; return this.$route.query.planId;
},
lineId() {
return this.$route.query.lineId;
}, },
lineCode() { lineCode() {
return '00'; return '00';
@ -190,25 +173,35 @@ export default {
}, },
mounted() { mounted() {
this.setPosition(); this.setPosition();
this.loadPlanList();
this.loadPlanData(); this.loadPlanData();
}, },
methods: { methods: {
buildPlanList(list) {
return list.map(el => {
if (el.planList &&
el.planList.length) {
el.planList = el.planList.map(it => {
return {
id: it.id,
isPlan: true,
name: it.mapName,
lineId: it.mapId,
}
})
}
return el;
})
},
setPosition() { setPosition() {
this.$nextTick(() => { this.$nextTick(() => {
this.$store.dispatch('rpTools/resize', { width: this.width, height: this.height }); this.$store.dispatch('rpTools/resize', { width: this.width, height: this.height });
}); });
}, },
loadPlanList() {
listRps().then(resp => {
this.planList = resp.data;
})
},
loadPlanData() { loadPlanData() {
getStationList(this.mapId).then(resp => { if (this.lineId) {
const stations = this.stations = resp.data.filter(el => { listStations(this.lineId).then(resp => {
return ['车辆段', '停车场'].findIndex(it => { return el.name.includes(it) }) < 0; const stations = this.stations = resp.data
});
this.$store.commit('rpTools/setStations', stations); this.$store.commit('rpTools/setStations', stations);
this.$refs.schedule.loadChartPage(stations); this.$refs.schedule.loadChartPage(stations);
@ -235,13 +228,14 @@ export default {
this.$message.info(error.message); this.$message.info(error.message);
}) })
} else { } else {
const planData = {} this.$refs.schedule.clear();
this.$store.commit('rpTools/setPlanData', planData);
this.$refs.schedule.loadChartData(planData);
} }
}).catch(error => { }).catch(error => {
this.$messageBox(error.message); this.$messageBox(error.message);
}) })
} else {
this.$refs.schedule.clear();
}
}, },
onDialog(menu) { onDialog(menu) {
this.$store.dispatch('menuOperation/setPopMenu', { position: {x: 0, y: 0}, menu }); this.$store.dispatch('menuOperation/setPopMenu', { position: {x: 0, y: 0}, menu });
@ -331,25 +325,32 @@ export default {
break; break;
} }
}, },
onSelectPlan(el) {
this.$router.replace({ path: 'AUStool', query: { planId: el.id, title: el.name }});
this.drawer = false;
},
doExport() { doExport() {
this.$refs.export.doShow(this.stations, this.planData); this.$refs.export.doShow(this.stations, this.planData);
}, },
doOpenPlan() {
listRps().then(resp => {
this.planList = this.buildPlanList(resp.data);
this.$refs.list.doShow();
})
},
doNewPlan() { doNewPlan() {
this.$refs.create.doShow(); listLines().then(resp => {
this.lineList = resp.data;
this.$refs.create.doShow(resp.data);
this.$nextTick(e => { this.$nextTick(e => {
if (this.$refs.tree) { if (this.$refs.tree) {
this.$refs.tree.setCurrentKey(this.planId); this.$refs.tree.setCurrentKey(this.planId);
} }
}) })
});
},
doSelectPlan(el) {
this.$router.replace({ path: 'AUStool', query: { planId: el.id, lineId: el.lineId, title: el.name }});
}, },
doCreatePlan(model) { doCreatePlan(model) {
createRp(model).then(resp => { createRp(model).then(resp => {
this.loadPlanList(); this.$message.success('Run plan group created successfully.')
this.onSelectPlan({id: resp.data, name: model.name});
}).catch(error => { }).catch(error => {
this.$message.info(error.message); this.$message.info(error.message);
}) })
@ -361,13 +362,17 @@ export default {
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
deleteRp(el.id).then(resp => { deleteRp(el.id).then(resp => {
this.loadPlanList(); listRps().then(resp => {
this.planId == el.id this.planList = this.buildPlanList(resp.data);
el.planList.findIndex(el => { return el.id == this.planId; }) >= 0
? this.$router.replace({ path: 'AUStool'}) ? this.$router.replace({ path: 'AUStool'})
: this.loadPlanData(); : this.loadPlanData();
}).catch(error => { }).catch(error => {
this.$message.info(error.message); this.$message.info(error.message);
}) })
}).catch(error => {
this.$message.info(error.message);
})
}).catch(() => { }).catch(() => {
this.$message({ type: 'info', message: 'Deletion cancelled.' }); this.$message({ type: 'info', message: 'Deletion cancelled.' });
}); });
@ -396,7 +401,7 @@ export default {
if (this.selected) { if (this.selected) {
const model = { const model = {
seconds: time, seconds: time,
stationCode: this.selected.stationCode stationId: this.selected.stationId
} }
justTripNoRunning(this.planId, this.selected.tripNo, model).then(resp => { justTripNoRunning(this.planId, this.selected.tripNo, model).then(resp => {
@ -411,7 +416,7 @@ export default {
if (this.selected) { if (this.selected) {
const model = { const model = {
seconds: time, seconds: time,
stationCode: this.selected.stationCode stationId: this.selected.stationId
} }
justTripNoStop(this.planId, this.selected.tripNo, model).then(resp => { justTripNoStop(this.planId, this.selected.tripNo, model).then(resp => {
@ -426,7 +431,7 @@ export default {
if (this.selected) { if (this.selected) {
const model = { const model = {
seconds: time, seconds: time,
stationCode: this.selected.stationCode stationId: this.selected.stationId
} }
justTripTurnBack(this.planId, this.selected.tripNo, model).then(resp => { justTripTurnBack(this.planId, this.selected.tripNo, model).then(resp => {
@ -439,8 +444,8 @@ export default {
}, },
doCreateTrip(data) { doCreateTrip(data) {
const model = { const model = {
endStationCode: data.endStationCode, endStationId: data.endStationId,
startStationCode: data.startStationCode, startStationId: data.startStationId,
startTime: timeFormat(data.startTime), startTime: timeFormat(data.startTime),
endTime: timeFormat(data.endTime) endTime: timeFormat(data.endTime)
} }
@ -616,11 +621,4 @@ export default {
} }
} }
} }
.flex {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
</style> </style>

View File

@ -0,0 +1,71 @@
<template>
<drawer :visible.sync="drawer" @before-close="e => drawer=false">
<template slot="title">Run Plan List</template>
<el-tree style="padding-right: 20px" :data="planList" :props="defaultProps" @node-click="onSelect" default-expand-all>
<template slot-scope="{data}">
<span class="flex" >
<span><i :class="data.isPlan? 'el-icon-document': 'el-icon-folder'"/>&ensp;{{data.name}}</span>
<el-button
v-if="!data.isPlan"
type="text"
style="color:red"
size="mini"
@click.stop="onDelete(data)">
Delete
</el-button>
</span>
</template>
</el-tree>
</drawer>
</template>
<script>
import Drawer from '../components/drawer.vue';
export default {
components: {
Drawer
},
props: {
planList: {
type: Array,
required: true,
}
},
data() {
return {
defaultProps: {
children: 'planList',
label: 'name'
},
drawer: false
}
},
methods: {
onSelect(el) {
if (el.isPlan) {
this.$emit('select', el);
this.drawer = false;
}
},
onDelete(el) {
this.$emit('delete', el);
},
doShow() {
this.drawer = true;
},
doClose() {
this.drawer = false;
},
}
}
</script>
<style lang="scss" scoped>
.flex {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
</style>

View File

@ -7,10 +7,10 @@ export default {
callRegister: [], callRegister: [],
markList: [], markList: [],
buildModel: { buildModel: {
startStationCode: '', startStationId: '',
startKmRange: 0, startKmRange: 0,
startTime: 0, startTime: 0,
endStationCode: '', endStationId: '',
endKmRange: 0, endKmRange: 0,
endTime: 0 endTime: 0
}, },
@ -275,10 +275,10 @@ export default {
if (markList.length == 1) { if (markList.length == 1) {
this.buildModel.startTime = pointInGrid[0]; this.buildModel.startTime = pointInGrid[0];
this.buildModel.startStationCode = yObj.code; this.buildModel.startStationId = yObj.id;
} else if (markList.length >= 2) { } else if (markList.length >= 2) {
this.buildModel.endTime = pointInGrid[0]; this.buildModel.endTime = pointInGrid[0];
this.buildModel.endStationCode = yObj.code; this.buildModel.endStationId = yObj.id;
option.graphic[0].elements = elemList; option.graphic[0].elements = elemList;
this.$emit('create', this.buildModel); this.$emit('create', this.buildModel);
} }
@ -375,7 +375,7 @@ export default {
this.offset.x = pointInGrid[0]; this.offset.x = pointInGrid[0];
this.offset.y = pointInGrid[1]; this.offset.y = pointInGrid[1];
this.selected = { this.selected = {
stationIndex: this.stations.findIndex(el => { return el.code == obj.stationCode; }), stationIndex: this.stations.findIndex(el => { return el.id == obj.stationId; }),
dataIndex: e.dataIndex, dataIndex: e.dataIndex,
seriesIndex: e.seriesIndex, seriesIndex: e.seriesIndex,
seriesName: isService? e.seriesName: 'service-trip', seriesName: isService? e.seriesName: 'service-trip',

View File

@ -204,7 +204,7 @@ export default {
param.data.length) { param.data.length) {
const xVal = param.data[0]; const xVal = param.data[0];
const yObj = param.data[2]; const yObj = param.data[2];
const station = this.stations.find(el => { return el.code == yObj.stationCode })||{ name: '', kmRange: ''}; const station = this.stations.find(el => { return el.id == yObj.stationId })||{ name: '', kmRange: ''};
const list = [ const list = [
`Service No: ${yObj.serviceNo}<br>`, `Service No: ${yObj.serviceNo}<br>`,
`Trip No: ${yObj.tripNo}<br>`, `Trip No: ${yObj.tripNo}<br>`,
@ -331,6 +331,11 @@ export default {
reSize({width, height}) { reSize({width, height}) {
if (this.myChart) { if (this.myChart) {
this.myChart.resize({ width, height, silent: false }); this.myChart.resize({ width, height, silent: false });
}
},
clear() {
if (this.myChart) {
this.myChart.clear();
} }
}, },
destroy() { destroy() {