joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

增加AUSTool绘制区域功能

Browse Source
This commit is contained in:
lVAL 2020-10-20 15:38:26 +08:00
parent bdeb030276
commit d3ea1cd22e
13 changed files with 529 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/rpTools.js
View File

@ -87,7 +87,7 @@ export function modifyRpArea(areaNo, data) {
/**
* 删除区域
*/
export function deleteRpArea(areaNo) {
export function delRpArea(areaNo) {
return request({
url: `/api/rpTools/${areaNo}/area`,
method: 'delete'

55
src/jmapNew/theme/aus_00/planConvert--.js
View File

@ -1,4 +1,5 @@
import { createMartPoint, createSeriesModel, createMarkLineModels, hexColor, prefixTime, convertSheetToList } from '@/utils/runPlan';
import { toTimeStamp } from '@/utils/date';
export default {
/** 边缘高度*/
@ -11,8 +12,52 @@ export default {
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;
},
/** 将后台数据解析成折线*/
parseDataToModels(planData, stations, kmRangeCoordMap) {
parseDataToSeries(chart, planData, stations, kmRangeCoordMap) {
var models = [];
/** 按车次遍历数据*/
if (planData && planData.length) {
@ -37,11 +82,11 @@ export default {
/** 计算停站点坐标集合*/
trip.stationTimeList.forEach((elem,idx) => {
if (elem.arrivalTime) {
opt.data.push([elem.arrivalTime, this.getCoordYByElem(stations, kmRangeCoordMap, elem), elem.stationCode, trip.tripNo]);
opt.data.push([elem.arrivalTime, this.getCoordYByObj(stations, kmRangeCoordMap, elem), elem.stationCode, trip.tripNo]);
}
if (elem.departureTime) {
opt.data.push([elem.departureTime, this.getCoordYByElem(stations, kmRangeCoordMap, elem), elem.stationCode, trip.tripNo]);
opt.data.push([elem.departureTime, this.getCoordYByObj(stations, kmRangeCoordMap, elem), elem.stationCode, trip.tripNo]);
}
});
@ -53,7 +98,7 @@ export default {
},
/** 更新数据并解析成折线*/
updateDataToModels(planData, stations, kmRangeCoordMap, runPlanData, series) {
updateDataToModels(chart, planData, stations, kmRangeCoordMap, runPlanData, series) {
if (planData && planData.length) {
}
return series;
@ -109,7 +154,7 @@ export default {
},
/** 根据elem计算y值*/
getCoordYByElem(stations, kmRangeCoordMap, elem, directionCode, isSpecial) {
getCoordYByObj(stations, kmRangeCoordMap, elem, directionCode, isSpecial) {
var defaultVlue = 0;
var station = stations.find(it => { return it.code == elem.stationCode; });
if (station) {

62
src/jmapNew/theme/aus_00/planConvert.js
View File

@ -1,4 +1,5 @@
import { createMartPointReverse, createSeriesModel, createMarkLineModels, hexColor, convertSheetToList, prefixTime } from '@/utils/runPlan';
import { toTimeStamp } from '@/utils/date';
export default {
/** 边缘高度*/
@ -11,12 +12,44 @@ export default {
TranslationTime: 0,
/** 将后台数据解析成图形*/
parseDataToGraph(planData, stations) {
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
})
})
}
@ -24,7 +57,7 @@ export default {
},
/** 将后台数据解析成折线*/
parseDataToModels(planData, stations, kmRangeCoordMap) {
parseDataToSeries(chart, planData, stations, kmRangeCoordMap) {
const models = [];
if (planData &&
planData.serviceList &&
@ -52,7 +85,7 @@ export default {
trip.stationTimeList.forEach((elem,idx) => {
if (elem.arrivalTime) {
opt.data.push([elem.arrivalTime, this.getCoordYByElem(stations, kmRangeCoordMap, elem), {
opt.data.push([elem.arrivalTime, this.getCoordYByObj(stations, kmRangeCoordMap, elem), {
stationCode: elem.stationCode,
serviceNo: el.serviceNo,
tripNo: trip.tripNo,
@ -61,7 +94,7 @@ export default {
}
if (elem.departureTime) {
opt.data.push([elem.departureTime, this.getCoordYByElem(stations, kmRangeCoordMap, elem), {
opt.data.push([elem.departureTime, this.getCoordYByObj(stations, kmRangeCoordMap, elem), {
stationCode: elem.stationCode,
serviceNo: el.serviceNo,
tripNo: trip.tripNo,
@ -81,7 +114,7 @@ export default {
},
/** 更新数据并解析成折线*/
updateDataToModels(planData, stations, kmRangeCoordMap, runPlanData, series, lineStyle) {
updateDataToModels(chart, planData, stations, kmRangeCoordMap, series) {
if (planData && planData.length) {
}
return series;
@ -129,25 +162,8 @@ export default {
return yText;
},
/** 根据是否和上一个车次是否相交，计算下一个车次的折返的高度*/
computedReentryNumber(code) {
// return parseInt(code || 1) % 2 ? 1 : 2;
return 1;
},
/** 根据方向计算y折返偏移量*/
getYvalueByDirectionCode(defaultVlue, directionCode, num) {
if (directionCode === '1') {
defaultVlue += this.EdgeHeight / 2 * num;
} else if (directionCode === '2') {
defaultVlue -= this.EdgeHeight / 2 * num;
}
return defaultVlue;
},
/** 根据elem计算y值*/
getCoordYByElem(stations, kmRangeCoordMap, elem) {
getCoordYByObj(stations, kmRangeCoordMap, elem) {
var defaultVlue = 0;
var station = stations.find(it => { return it.code == elem.stationCode; });
if (station) {

6
src/scripts/ConstDic.js
View File

@ -128,11 +128,7 @@ export const DeviceMenu = {
SetDriver: '106',
Script: '107',
IscsSystem: '108',
IscsInterface: '109',
planJustRunning: '1000',
planJustDeparture: '1001',
planSetParams: '1002'
IscsInterface: '109'
};
/**

12
src/views/planMonitor/editToolAUS/dialog/planJustRunning.vue
View File

@ -14,7 +14,7 @@
</template>
<script>
import { DeviceMenu } from '@/scripts/ConstDic';
import { MenuEnum } from '../utils.js';
export default {
props: {
@ -29,6 +29,10 @@ export default {
default() {
return []
}
},
config: {
type: Object,
required: true
}
},
data() {
@ -38,8 +42,8 @@ export default {
this.stations[this.selected.dataIndex].kmRange -
this.stations[this.selected.dataIndex+1].kmRange
)
const min = Math.floor(offset / 19.4);
const max = Math.floor(offset / 8.3);
const min = Math.floor(offset / (this.config.maxSpeed * 1000/3600));
const max = Math.floor(offset / 1);
if (value < min) {
callback(new Error('Below minimum run time.'));
@ -69,7 +73,7 @@ export default {
},
watch: {
'$store.state.menuOperation.menuCount': function (val) {
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.planJustRunning)) {
if (this.$store.getters['menuOperation/checkDialogIsOpen'](MenuEnum.planJustRunning)) {
this.doShow(this.$store.state.menuOperation.menuPosition);
} else {
this.doClose();

12
src/views/planMonitor/editToolAUS/dialog/planJustStop.vue
View File

@ -14,7 +14,7 @@
</template>
<script>
import { DeviceMenu } from '@/scripts/ConstDic';
import { MenuEnum } from '../utils.js';
export default {
props: {
@ -29,12 +29,16 @@ export default {
default() {
return []
}
},
config: {
type: Object,
required: true
}
},
data() {
var validator = (rule, value, callback) => {
if (value > 0 && value <= 15) {
callback(new Error('Stop time cannot be within 0-15 seconds.'));
if (value > 0 && value <= this.config.minStopTime) {
callback(new Error(`Stop time cannot be within 0-${this.config.minStopTime} seconds.`));
} else {
callback()
}
@ -59,7 +63,7 @@ export default {
},
watch: {
'$store.state.menuOperation.menuCount': function (val) {
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.planJustDeparture)) {
if (this.$store.getters['menuOperation/checkDialogIsOpen'](MenuEnum.planJustDeparture)) {
this.doShow(this.$store.state.menuOperation.menuPosition);
} else {
this.doClose();

158
src/views/planMonitor/editToolAUS/dialog/planModifyArea.vue Normal file
View File

@ -0,0 +1,158 @@
<template>
<el-dialog v-dialogDrag append-to-body title="Modification of train diagram parameters" :visible.sync="dialogShow" width="30%" :close-on-click-modal="false" :before-close="doClose">
<el-form ref="form" label-width="160px" :model="formModel" :rules="rules">
<el-form-item label="Start station" prop="startStationCode">
<el-select v-model="formModel.startStationCode" placeholder="请选择">
<el-option
v-for="(el,i) in stations"
:key="i"
:label="el.name"
:value="el.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="End station" prop="endStationCode">
<el-select v-model="formModel.endStationCode" placeholder="请选择">
<el-option
v-for="(el,i) in stations"
:key="i"
:label="el.name"
:value="el.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Start time" prop="startTime">
<el-time-picker value-format="HH:mm:ss" v-model="formModel.startTime" />
</el-form-item>
<el-form-item label="End time" prop="endTime">
<el-time-picker value-format="HH:mm:ss" v-model="formModel.endTime" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
<el-button type="primary" @click="doConfirm">{{ $t('map.confirm') }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { MenuEnum } from '../utils.js';
import { getRpConfig } from '@/api/rpTools';
import { toTimeStamp } from '@/utils/date';
export default {
props: {
stations: {
type: Array,
required: true
},
target: {
type: Object,
default() {
return null
}
}
},
data() {
var startTimeValidator = (rule, value, callback) => {
const startTime = toTimeStamp(value);
const endTime = toTimeStamp(this.formModel.endTime);
if (startTime >= endTime) {
callback(new Error('The start time is greater than the end time.'));
} else if (Math.abs(startTime - endTime) < 10*60) {
callback(new Error('The time interval shall not be less than 10 min.'));
} else {
callback()
}
}
var endTimeValidator = (rule, value, callback) => {
const startTime = toTimeStamp(this.formModel.startTime);
const endTime = toTimeStamp(value);
if (endTime <= startTime) {
callback(new Error('The end time is less than the start time.'));
} else if (Math.abs(startTime - endTime) < 10*60) {
callback(new Error('The time interval shall not be less than 10 min.'));
} else {
callback()
}
}
return {
dialogShow: false,
formModel: {
areaNo: '',
startStationCode: '',
endStationCode: '',
startTime: 0,
endTime: 0
},
rules: {
startStationCode: [
{
required: true, message: 'Please select the farther station.', trigger: 'blur'
},
],
endStationCode: [
{
required: true, message: 'Please select the closer station.', trigger: 'blur'
},
],
startTime: [
{
required: true, message: 'Please select the start time.', trigger: 'blur'
},
{
validator: startTimeValidator, trigger: 'blur'
}
],
endTime: [
{
required: true, message: 'Please select the end time.', trigger: 'blur'
},
{
validator: endTimeValidator, trigger: 'blur'
}
]
}
};
},
watch: {
'$store.state.menuOperation.menuCount': function (val) {
if (this.$store.getters['menuOperation/checkDialogIsOpen'](MenuEnum.planModifyArea)) {
this.doShow(this.$store.state.menuOperation.menuPosition);
} else {
this.doClose();
}
}
},
methods: {
doShow() {
if (this.target &&
this.target.model) {
const model = this.target.model;
this.formModel = {
areaNo: model.areaNo,
startStationCode: model.fartherStationCode,
endStationCode: model.closerStationCode,
startTime: model.startTime,
endTime: model.endTime
}
}
this.dialogShow = true;
},
doClose() {
this.dialogShow = false;
},
doConfirm() {
this.$refs.form.validate((valid) => {
if(valid) {
this.$emit('modifyArea', this.formModel);
this.doClose();
}
});
}
}
};
</script>

28
src/views/planMonitor/editToolAUS/dialog/planSetParams.vue
View File

@ -34,10 +34,15 @@
</template>
<script>
import { DeviceMenu } from '@/scripts/ConstDic';
import { getRpConfig } from '@/api/rpTools';
import { MenuEnum } from '../utils.js';
export default {
props: {
config: {
type: Object,
required: true
}
},
data() {
return {
dialogShow: false,
@ -87,7 +92,7 @@ export default {
selected: function(val) {
},
'$store.state.menuOperation.menuCount': function (val) {
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.planSetParams)) {
if (this.$store.getters['menuOperation/checkDialogIsOpen'](MenuEnum.planSetParams)) {
this.doShow(this.$store.state.menuOperation.menuPosition);
} else {
this.doClose();
@ -96,20 +101,15 @@ export default {
},
methods: {
doShow() {
getRpConfig().then(resp => {
const data = resp.data;
this.formModel = {
averageSpeed: data.averageSpeed,
maxSpeed: data.maxSpeed,
stopTime: data.stopTime,
minStopTime: data.minStopTime,
minIntervalTime: data.minIntervalTime,
turnBackTime: data.turnBackTime
averageSpeed: this.config.averageSpeed,
maxSpeed: this.config.maxSpeed,
stopTime: this.config.stopTime,
minStopTime: this.config.minStopTime,
minIntervalTime: this.config.minIntervalTime,
turnBackTime: this.config.turnBackTime
}
this.dialogShow = true;
}).catch(error => {
this.$message.info(error.message)
})
},
doClose() {
this.dialogShow = false;

150
src/views/planMonitor/editToolAUS/index.vue
View File

@ -7,18 +7,17 @@
:height="height"
:width="width"
:model="model"
@tag="handleTarget"
@select="handleSelected"
@clear="handleClear"
@create="handleCreate"
@translate="handleTranslate"
@edit="handleEdit"
@tag="onTarget"
@select="onSelected"
@clear="onClear"
@create="onCreate"
@translate="onTranslate"
>
<template slot="header">
<div class="header">
<div class="menus-left">
<el-button type="primary" @click="doNewPlan">New</el-button>
<el-button type="primary" @click="handleDialog(DeviceMenu.planSetParams)">Set Param</el-button>
<el-button type="primary" @click="onDialog(DeviceMenu.planSetParams)">Set Param</el-button>
</div>
<div class="menus-right">
<span style="font-size:22px;padding:0 17px;">Plan</span>
@ -26,16 +25,17 @@
:model="model"
:selected="selected"
:target="target"
@remove="handleRemove"
@clear="handleClear"
@remove="onRemove"
@clear="onClear"
/>
</div>
</div>
</template>
</schedule>
<plan-just-running :selected="selected" :stations="stations" @justRunning="doJustRunning" />
<plan-just-stop :selected="selected" :stations="stations" @justStop="doJustStop"/>
<plan-set-params @setParams="doSetPlanParams" ref="planSetParams" />
<plan-just-running :config="config" :selected="selected" :stations="stations" @justRunning="doJustRunning" />
<plan-just-stop :config="config" :selected="selected" :stations="stations" @justStop="doJustStop"/>
<plan-set-params :config="config" @setParams="doSetPlanParams" />
<plan-modify-area :target="target" :stations="stations" @modifyArea="doModifyArea" />
</div>
</template>
@ -44,16 +44,18 @@ import Schedule from './schedule.vue';
import PlanJustRunning from './dialog/planJustRunning.vue';
import PlanJustStop from './dialog/planJustStop.vue';
import PlanSetParams from './dialog/planSetParams.vue';
import PlanModifyArea from './dialog/planModifyArea.vue';
import Menus from './menus.vue';
import { DeviceMenu } from '@/scripts/ConstDic';
import { timeFormat } from '@/utils/date';
import { mapGetters } from 'vuex';
import { getStationList } from '@/api/runplan';
import {
getRpTools, clearRpPlan, addRpTrip, delRpTrip,
justTripNoRunning, justTripNoStop,
translateTripNo,
modifyRpConfig,
createRpArea
getRpConfig, modifyRpConfig,
createRpArea, modifyRpArea, delRpArea
} from '@/api/rpTools';
export default {
@ -62,6 +64,7 @@ export default {
PlanJustRunning,
PlanJustStop,
PlanSetParams,
PlanModifyArea,
Menus
},
data() {
@ -75,6 +78,8 @@ export default {
model: {
choice: 'Plan',
action: '',
},
config: {
}
};
},
@ -121,7 +126,7 @@ export default {
},
loadInitData() {
getStationList(this.mapId).then(resp => {
const stations = resp.data.filter(el => {
const stations = this.stations = resp.data.filter(el => {
return ['车辆段', '停车场'].findIndex(it => { return el.name.includes(it) }) < 0;
});
this.$store.commit('rpTools/setStations', stations);
@ -131,27 +136,40 @@ export default {
const planData = rest.data;
this.$store.commit('rpTools/setPlanData', planData);
this.$refs.schedule.loadChartData(planData);
getRpConfig().then(resm => {
const data = resm.data;
this.config = {
averageSpeed: data.averageSpeed,
maxSpeed: data.maxSpeed,
stopTime: data.stopTime,
minStopTime: data.minStopTime,
minIntervalTime: data.minIntervalTime,
turnBackTime: data.turnBackTime
}
}).catch(error => {
this.$message.info(error.message)
})
});
}).catch(error => {
this.$messageBox(error.message);
})
},
handleClear() {
onClear() {
this.model.action = '';
this.selected = null;
this.$refs.schedule.setLineReset();
this.$refs.schedule.clearGraphic();
},
handleDialog(menu) {
onDialog(menu) {
this.$store.dispatch('menuOperation/setPopMenu', { position: {x: 0, y: 0}, menu });
},
handleTarget(target) {
onTarget(target) {
this.target = target;
},
handleSelected(selected) {
onSelected(selected) {
this.selected = selected;
},
handleCreate(data) {
onCreate(data) {
switch(this.model.choice) {
case 'Plan':
this.doCreateTrip(data);
@ -161,19 +179,14 @@ export default {
break;
}
},
handleEdit() {
},
handleTranslate(data) {
onTranslate(data) {
switch(this.model.choice) {
case 'Plan':
this.doTranslateTrip(data);
break;
case 'Construction':
this.doTranslateArea(data);
break;
}
},
handleRemove(){
onRemove(){
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -207,11 +220,38 @@ export default {
},
doSetPlanParams(data) {
modifyRpConfig(data).then(resp => {
this.config = data;
this.$message.success('Parameters of plan were modified successfully.');
}).catch(error => {
this.$message.info(error.message);
})
},
doModifyArea(data) {
const startTime = data.startTime;
const endTime = data.endTime;
const startCodeIndex = this.stations.findIndex(el => { return el.code == data.startStationCode; })
const endCodeIndex = this.stations.findIndex(el => { return el.code == data.endStationCode; })
const model = {
fartherStationCode: startCodeIndex < endCodeIndex? data.endStationCode: data.startStationCode,
closerStationCode: startCodeIndex < endCodeIndex? data.startStationCode: data.endStationCode,
startTime: data.startTime,
endTime: data.endTime
}
modifyRpArea(data.areaNo, model).then(resp => {
getRpTools().then(rest => {
const planData = rest.data;
this.$store.commit('rpTools/setPlanData', planData);
this.$refs.schedule.loadChartData(planData);
this.$message.success('Construction area modified successfully.');
}).catch(() => {
this.$messageBox('Failed to load the plan.');
});
}).catch(error => {
this.$message.info(error.message);
})
},
doJustRunning(time) {
if (this.selected) {
const model = {
@ -253,7 +293,20 @@ export default {
}
},
doCreateTrip(data) {
addRpTrip(data).then(resp => {
if (Math.abs(data.endTime - data.startTime) < 2*60) {
this.$refs.schedule.clearGraphic(['mark']);
this.$message.info('The time interval shall not be less than 2 min.')
return;
}
const model = {
endStationCode: data.endStationCode,
startStationCode: data.startStationCode,
startTime: timeFormat(data.startTime),
endTime: timeFormat(data.endTime)
}
addRpTrip(model).then(resp => {
getRpTools().then(rest => {
const planData = rest.data;
this.$store.commit('rpTools/setPlanData', planData);
@ -267,11 +320,22 @@ export default {
})
},
doCreateArea(data) {
const startTime = data.startTime;
const endTime = data.endTime;
const startCodeIndex = this.stations.findIndex(el => { return el.code == data.startStationCode; })
const endCodeIndex = this.stations.findIndex(el => { return el.code == data.endStationCode; })
if (Math.abs(endTime - startTime) < 10*60) {
this.$refs.schedule.clearGraphic(['mark']);
this.$message.info('The time interval shall not be less than 10 min.')
return;
}
const model = {
closerStationCode: data.startStationCode,
fartherStationCode: data.endStationCode,
startTime: data.startTime,
endTime: data.endTime,
fartherStationCode: startCodeIndex < endCodeIndex? data.endStationCode: data.startStationCode,
closerStationCode: startCodeIndex < endCodeIndex? data.startStationCode: data.endStationCode,
startTime: endTime < startTime? timeFormat(data.endTime): timeFormat(data.startTime),
endTime: endTime < startTime? timeFormat(data.startTime): timeFormat(data.endTime)
}
createRpArea(model).then(resp => {
@ -287,7 +351,7 @@ export default {
this.$refs.schedule.clearGraphic(['mark']);
})
},
doTranslateTrip(data) {
doTranslateTrip() {
if (this.selected) {
const model = {
seconds : this.selected.time
@ -305,10 +369,6 @@ export default {
this.$message.info(error.message);
});
}
},
doTranslateArea(data) {
if (this.selected) {
}
},
doRemoveTrip() {
if (this.selected) {
@ -317,7 +377,7 @@ export default {
const planData = rest.data;
this.$store.commit('rpTools/setPlanData', planData);
this.$refs.schedule.loadChartData(planData);
this.handleClear();
this.onClear();
}).catch(() => {
this.$messageBox('Failed to load the plan.');
});
@ -327,7 +387,19 @@ export default {
}
},
doRemoveArea() {
if (this.selected) {
if (this.target) {
delRpArea(this.target.areaNo).then(resp => {
getRpTools().then(rest => {
const planData = rest.data;
this.$store.commit('rpTools/setPlanData', planData);
this.$refs.schedule.loadChartData(planData);
this.onClear();
}).catch(() => {
this.$messageBox('Failed to load the plan.');
});
}).catch(error => {
this.$message.info(error.message);
})
}
}
}

6
src/views/planMonitor/editToolAUS/menus.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="menus">
<el-select v-model="model.choice" placeholder="请选择功能类型" style="margin-right:20px">
<el-select v-model="model.choice" placeholder="请选择功能类型" style="margin-right:20px" @change="$emit('clear')">
<el-option v-for="(el,i) in options" :key="i" :label="el.label" :value="el.value" />
</el-select>
<div v-if="option">
@ -93,10 +93,6 @@ export default {
label: 'Add',
value: 'Add',
},
{
label: 'Translate',
value: 'Translate'
},
{
label: 'Edit',
value: 'Edit'

194
src/views/planMonitor/editToolAUS/monitor.js
View File

@ -1,7 +1,6 @@
import echarts from 'echarts';
import * as utils from './utils'
import { DeviceMenu } from '@/scripts/ConstDic';
import { timeFormat } from '@/utils/date';
import { MenuEnum } from './utils';
export default {
data() {
@ -11,8 +10,8 @@ export default {
buildModel: {
endStationCode: '',
startStationCode: '',
startTime: '',
endTime: ''
startTime: 0,
endTime: 0
},
selected: null,
target: null,
@ -73,26 +72,47 @@ export default {
}
},
onUpdatePosition(e) {
const fixedList = ['Area'];
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.point)};
const graphic = echarts.util.map(elements, (el) => {
if (fixedList.includes(el.subType)) {
const position = this.myChart.convertToPixel('grid', el.point1);
const position2 = this.myChart.convertToPixel('grid', el.point2);
const width = Math.abs(position[0] - position2[0]);
const height = Math.abs(position[1] - position2[1])
return {
position,
shape: { width, height }
}
} else {
return {
position: this.myChart.convertToPixel('grid', el.point)
};
}
})
this.myChart.setOption({graphic});
},
onZrMouseDown(e) {
if (e.target && ['Area'].includes(e.target.subType)) {
this.target = e.target;
this.$emit('tag', this.target);
if (this.model.choice == 'Construction') {
if (this.model.action == 'Edit') {
this.pixelExecCb(e, this.handlePopDialog);
}
}
}
if (this.model.choice == 'Plan') {
if (this.model.action == 'Add') {
this.pixelExecCb(e, this.handleCreateMark);
this.pixelExecCb(e, this.onCreateMark);
}
} else if (this.model.choice == 'Construction') {
if (this.model.action == 'Add') {
this.pixelExecCb(e, this.handleCreateArea);
this.pixelExecCb(e, this.onCreateArea);
}
}
},
@ -100,12 +120,12 @@ export default {
if (['Plan', 'Construction'].includes(this.model.choice)) {
if(this.model.action == 'Translate' && this.dragging) {
this.dragging = false;
this.pixelExecCb(e, this.handleTranslate)
this.pixelExecCb(e, this.onTranslate)
}
}
},
onMouseDown(e) {
if (['Plan', 'Construction'].includes(this.model.choice)) {
if (this.model.choice == 'Plan') {
if (this.model.action == 'Edit') {
this.pixelExecCb(e, this.handlePopDialog);
}
@ -116,7 +136,7 @@ export default {
if (this.model.choice == 'Plan') {
this.handleSelectLine({e});
if (this.model.action == 'Translate') {
this.handleCreateDrag({e, pointInPixel})
this.onCreateDrag({e, pointInPixel})
}
}
});
@ -132,7 +152,7 @@ export default {
if (this.model.choice == 'Plan') {
this.handleSelectLine({e});
if(this.model.action == 'Translate') {
this.handleCreateDrag({e, pointInPixel})
this.onCreateDrag({e, pointInPixel})
}
}
});
@ -175,20 +195,86 @@ export default {
});
}
},
onCreateDrag({e, pointInPixel}) {
if (this.selected) {
const option = this.myChart.getOption();
const filters = option.graphic[0].elements.filter(el => { return el.subType != 'drag'});
filters.push(utils.buildDragDataObj(pointInPixel, this.myChart.convertFromPixel('grid', pointInPixel), this))
option.graphic[0].elements = filters;
this.myChart.setOption(option, {notMerge: true});
this.myChart.dispatchAction({
type: 'showTip',
seriesIndex: this.selected.seriesIndex,
dataIndex: this.selected.dataIndex
});
}
},
onCreateMark({e, pointInPixel, yObj, xVal}) {
if (!e.target) {
const option = this.myChart.getOption();
const graphic = option.graphic;
const elements = graphic[0].elements;
elements.push(utils.buildMarkPointObj(pointInPixel, this.myChart.convertFromPixel('grid', pointInPixel), this))
this.myChart.setOption(option, {notMerge: true});
const markList = this.markList = elements.filter(el => { return el.subType == 'mark'});
const elemList = elements.filter(el => { return el.subType != 'mark'});
if (markList.length == 1) {
this.buildModel.startStationCode = yObj.code;
this.buildModel.startTime = xVal;
} else if (markList.length >= 2) {
this.buildModel.endStationCode = yObj.code;
this.buildModel.endTime = xVal;
option.graphic[0].elements = elemList;
this.$emit('create', this.buildModel);
}
}
},
onCreateArea({e, pointInPixel, yObj, xVal}) {
if (!e.target) {
const option = this.myChart.getOption();
const graphic = option.graphic;
const elements = graphic[0].elements;
elements.push(utils.buildMarkPointObj(pointInPixel, this.myChart.convertFromPixel('grid', pointInPixel), this))
this.myChart.setOption(option, {notMerge: true});
const markList = this.markList = elements.filter(el => { return el.subType == 'mark'});
const elemList = elements.filter(el => { return el.subType != 'mark'});
if (markList.length == 1) {
this.buildModel.startStationCode = yObj.code;
this.buildModel.startTime = xVal;
} else if (markList.length >= 2) {
this.buildModel.endStationCode = yObj.code;
this.buildModel.endTime = xVal;
option.graphic[0].elements = elemList;
this.$emit('create', this.buildModel);
}
}
},
handlePopDialog({e, pointInPixel}) {
if (e.componentType == "series" &&
e.componentSubType == "line" &&
e.seriesName.includes('plan-')) {
const value = e.value;
const point = {
x: pointInPixel[0],
y: pointInPixel[1]
}
if (e.componentType == "series" &&
e.componentSubType == "line" &&
e.seriesName.includes('plan-')) {
const option = this.myChart.getOption();
const dataList = option.series[e.seriesIndex].data;
const length = dataList.length;
const nxt = dataList[e.dataIndex+1];
const pre = dataList[e.dataIndex-1];
const value = e.value;
this.selected = {
dataIndex: e.dataIndex,
@ -205,10 +291,12 @@ export default {
this.$emit('select', this.selected);
if (e.dataIndex < length - 1 && value[2] == nxt[2]) {
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: DeviceMenu.planJustDeparture });
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: MenuEnum.planJustDeparture });
} else if (e.dataIndex == 0 || e.dataIndex > 0 && value[1] == pre[1]) {
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: DeviceMenu.planJustRunning });
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: MenuEnum.planJustRunning });
}
} else if (e.target && e.target.subType == 'Area') {
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: MenuEnum.planModifyArea });
}
},
handleSelectLine({e}) {
@ -244,72 +332,6 @@ export default {
this.setLineLight();
}
},
handleCreateDrag({e, pointInPixel}) {
if (this.selected) {
const option = this.myChart.getOption();
const filters = option.graphic[0].elements.filter(el => { return el.subType != 'drag'});
// const point = [e.value[0], e.value[1]]
// filters.push(utils.buildDragDataObj(this.myChart.convertToPixel('grid', point), point, this))
filters.push(utils.buildDragDataObj(pointInPixel, this.myChart.convertFromPixel('grid', pointInPixel), this))
option.graphic[0].elements = filters;
this.myChart.setOption(option, {notMerge: true});
this.myChart.dispatchAction({
type: 'showTip',
seriesIndex: this.selected.seriesIndex,
dataIndex: this.selected.dataIndex
});
}
},
handleCreateMark({e, pointInPixel, yObj, xVal}) {
if (!e.target) {
const option = this.myChart.getOption();
const graphic = option.graphic;
const elements = graphic[0].elements;
elements.push(utils.buildMarkPointObj(pointInPixel, this.myChart.convertFromPixel('grid', pointInPixel), this))
this.myChart.setOption(option, {notMerge: true});
const markList = this.markList = elements.filter(el => { return el.subType == 'mark'});
const elemList = elements.filter(el => { return el.subType != 'mark'});
if (markList.length == 1) {
this.buildModel.startStationCode = yObj.code;
this.buildModel.startTime = timeFormat(xVal);
} else if (markList.length >= 2) {
this.buildModel.endStationCode = yObj.code;
this.buildModel.endTime = timeFormat(xVal);
option.graphic[0].elements = elemList;
this.$emit('create', this.buildModel);
}
}
},
handleCreateArea({e, pointInPixel, yObj, xVal}) {
if (!e.target) {
const option = this.myChart.getOption();
const graphic = option.graphic;
const elements = graphic[0].elements;
elements.push(utils.buildMarkPointObj(pointInPixel, this.myChart.convertFromPixel('grid', pointInPixel), this))
this.myChart.setOption(option, {notMerge: true});
const markList = this.markList = elements.filter(el => { return el.subType == 'mark'});
const elemList = elements.filter(el => { return el.subType != 'mark'});
if (markList.length == 1) {
this.buildModel.startStationCode = yObj.code;
this.buildModel.startTime = timeFormat(xVal);
} else if (markList.length >= 2) {
this.buildModel.endStationCode = yObj.code;
this.buildModel.endTime = timeFormat(xVal);
option.graphic[0].elements = elemList;
this.$emit('create', this.buildModel);
}
}
},
handleSeriesDragging({e, xVal}) {
if (this.selected) {
this.selected.dx = xVal - this.selected._x;
@ -335,8 +357,8 @@ export default {
},
handleAreaDragging({e, xVal}) {
},
handleTranslate({e}) {
this.$emit('translate', this.buildModel);
onTranslate({e}) {
this.$emit('translate');
}
}
}

23
src/views/planMonitor/editToolAUS/schedule.vue
View File

@ -190,20 +190,20 @@ export default {
},
axisTooltip(param) {
let data = '';
const arr = [];
const station = this.stations.find(el => { return el.code == param.value[2] })||{ name: '', kmRange: ''};
if (!arr.includes(`${param.data[0]}${param.data[1]}`)) {
arr.push(`${param.data[0]}${param.data[1]}`);
console.log(param)
const xVal = param.data[0];
const yObj = param.data[1];
const model = param.value[2];
const station = this.stations.find(el => { return el.code == yObj.stationCode })||{ name: '', kmRange: ''};
const list = [
`Service No: ${model.serviceNo}<br>`,
`Trip No: ${model.tripNo}<br>`,
`direction: ${model.direction == 2? 'Up': 'Down'}<br>`,
`Station name: ${station.name}<br>`,
`Kilometer post: ${station.kmRange} m <br>`,
`Arrival Time: ${timeFormat(param.data[0] + this.planUtil.TranslationTime)}<br>`,
`Train number: ${param.seriesName}`,
`Arrival Time: ${timeFormat(xVal + this.planUtil.TranslationTime)}<br>`,
`<hr size=1 style="margin: 3px 0">`
];
data += list.join('');
}
return data;
},
loadInitChart() {
@ -252,7 +252,8 @@ export default {
this.planData = planData;
this.pushModels(option.series, [this.planUtil.initializeYaxis(this.stations)]);
this.pushModels(option.series, this.planUtil.parseDataToModels(planData, this.stations, this.kmRangeCoordMap));
this.pushModels(option.series, this.planUtil.parseDataToSeries(this.myChart, planData, this.stations, this.kmRangeCoordMap));
this.pushModels(option.graphic[0].elements, this.planUtil.parseDataToGraph(this.myChart, planData, this.stations, this.kmRangeCoordMap));
this.myChart.setOption(option, {notMerge: true});
} catch (error) {
@ -329,7 +330,7 @@ export default {
showAllSymbol: true,
lineStyle: {
width: 2,
color: 'red'
color: '#0000FF'
}
}
});
@ -344,7 +345,7 @@ export default {
showAllSymbol: true,
lineStyle: {
width: 1,
color: '#000'
color: '#000000'
}
}
});

35
src/views/planMonitor/editToolAUS/utils.js
View File

@ -1,37 +1,12 @@
import echarts from 'echarts';
export function buildDragAreaObj(position, point, that) {
const markList = that.markList||[];
const length = markList.length;
const first = markList[0];
const last = markList[length-1];
const width = first.position[0] - last.position[0]||20;
const height = first.position[1] - last.position[1]||20;
return {
type: 'rect',
subType: 'Area',
position: [...position],
point: [...point],
shape: {
x: 0,
y: 0,
width,
height
},
style: {
fill: 'rgb(255,0,0, 0.3)',
stroke: 'rgb(255, 0, 0, 0.8)'
},
draggable: 'horizontal',
ondrag: echarts.util.curry(that.onShapeDragging),
onmouseover: echarts.util.curry(that.onShapeMouseOver),
onmouseout: echarts.util.curry(that.onShapeMouseOut),
z: 100
}
export const MenuEnum = {
planJustRunning: '1000',
planJustDeparture: '1001',
planSetParams: '1002',
planModifyArea: '1003'
}
export function buildDragDataObj(position, point, that) {
return {
type: 'circle',