修改AUSTool
This commit is contained in:
lVAL
parent
c1050d16ab
commit
457dd7381a
@ -84,6 +84,16 @@ export function modifyRpArea(areaNo, data) {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改区域文字
|
||||
*/
|
||||
export function modifyAreaNote(areaNo, data) {
|
||||
return request({
|
||||
url: `/api/rpTools/${areaNo}/text`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 删除区域
|
||||
*/
|
||||
@ -105,7 +115,6 @@ export function justTripNoRunning(tripNo, data) {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 修改停站时间
|
||||
*/
|
||||
@ -118,14 +127,33 @@ export function justTripNoStop(tripNo, data) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 平移车次
|
||||
* 修改折返时间
|
||||
*/
|
||||
export function translateTrip(tripNo, data) {
|
||||
export function justTripTurnBack(tripNo, data) {
|
||||
return request({
|
||||
url: `/api/rpTools/${tripNo}/trip`,
|
||||
url: `/api/rpTools/${tripNo}/turnBack`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 平移服务
|
||||
*/
|
||||
export function translateService(serviceNo, data) {
|
||||
return request({
|
||||
url: `/api/rpTools/${serviceNo}/service`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除服务
|
||||
*/
|
||||
export function deleteService(serviceNo) {
|
||||
return request({
|
||||
url: `/api/rpTools/${serviceNo}/service`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ export default {
|
||||
|
||||
graphs.push({
|
||||
type: 'rect',
|
||||
subType: 'Area',
|
||||
subType: 'area',
|
||||
areaNo: area.areaNo,
|
||||
position,
|
||||
point1,
|
||||
|
||||
@ -32,7 +32,7 @@ export default {
|
||||
|
||||
graphs.push({
|
||||
type: 'rect',
|
||||
subType: 'Area',
|
||||
subType: 'area',
|
||||
areaNo: el.areaNo,
|
||||
position,
|
||||
point1,
|
||||
|
||||
@ -47,7 +47,7 @@ export function createSeriesModel(opt, lineStyle={}, itemStyle={}) {
|
||||
export function createRectArea(opt, style={}) {
|
||||
return {
|
||||
type: 'rect',
|
||||
subType: 'Area',
|
||||
subType: 'area',
|
||||
areaNo: opt.model.areaNo,
|
||||
position: opt.position,
|
||||
point1: opt.point1,
|
||||
|
||||
@ -1,103 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag append-to-body title="Modify run time" :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="Running time" prop="time">
|
||||
<el-input-number v-model="formModel.time" controls-position="right" :min="0" />
|
||||
<span style="padding-left: 10px">s</span>
|
||||
</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';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null
|
||||
}
|
||||
},
|
||||
stations: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
var validator = (rule, value, callback) => {
|
||||
const stations = this.stations;
|
||||
const offset = Math.abs(
|
||||
this.stations[this.selected.dataIndex].kmRange -
|
||||
this.stations[this.selected.dataIndex+1].kmRange
|
||||
)
|
||||
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.'));
|
||||
} else if (value > max) {
|
||||
callback(new Error('Run time above maximum.'));
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
dialogShow: false,
|
||||
formModel: {
|
||||
time: 0,
|
||||
},
|
||||
rules: {
|
||||
time: [
|
||||
{
|
||||
type: 'number', min: 0, message: 'Please select the arrival time.', trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: validator, trigger: 'blur'
|
||||
}
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.menuOperation.menuCount': function (val) {
|
||||
if (this.$store.getters['menuOperation/checkDialogIsOpen'](MenuEnum.planJustRunning)) {
|
||||
this.doShow(this.$store.state.menuOperation.menuPosition);
|
||||
} else {
|
||||
this.doClose();
|
||||
}
|
||||
},
|
||||
selected: function(val) {
|
||||
if (val) this.formModel.time = val.runTime;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.dialogShow = true;
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
},
|
||||
doConfirm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if(valid) {
|
||||
this.$emit('justRunning', this.formModel.time);
|
||||
this.doClose();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag append-to-body title="Modify stop time" :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="Stop time" prop="time">
|
||||
<el-input-number v-model="formModel.time" controls-position="right" :min="0" :max="12*3600" />
|
||||
<span style="padding-left: 10px">s</span>
|
||||
</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';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null
|
||||
}
|
||||
},
|
||||
stations: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
var validator = (rule, value, callback) => {
|
||||
if (value > 0 && value <= this.config.minStopTime) {
|
||||
callback(new Error(`Stop time cannot be within 0-${this.config.minStopTime} seconds.`));
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
dialogShow: false,
|
||||
formModel: {
|
||||
time: 0
|
||||
},
|
||||
rules: {
|
||||
time: [
|
||||
{
|
||||
type: 'number', min: 0, max: 12*3600, message: 'Please select the stop time.', trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: validator, trigger: 'blur'
|
||||
}
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.menuOperation.menuCount': function (val) {
|
||||
if (this.$store.getters['menuOperation/checkDialogIsOpen'](MenuEnum.planJustStop)) {
|
||||
this.doShow(this.$store.state.menuOperation.menuPosition);
|
||||
} else {
|
||||
this.doClose();
|
||||
}
|
||||
},
|
||||
selected: function(val) {
|
||||
if (val) this.formModel.time = val.depTime;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.dialogShow = true;
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
},
|
||||
doConfirm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if(valid) {
|
||||
this.$emit('justStop', this.formModel.time);
|
||||
this.doClose();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,158 +0,0 @@
|
||||
<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>
|
||||
@ -1,127 +0,0 @@
|
||||
<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="Average speed" prop="averageSpeed">
|
||||
<el-input-number v-model="formModel.averageSpeed" controls-position="right" :min="20" :max="60" />
|
||||
<span style="padding-left: 10px">km/h</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Maximum speed" prop="maxSpeed">
|
||||
<el-input-number v-model="formModel.maxSpeed" controls-position="right" :min="50" :max="80" />
|
||||
<span style="padding-left: 10px">km/h</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Default stop time" prop="stopTime">
|
||||
<el-input-number v-model="formModel.stopTime" controls-position="right" :min="10" :max="120" />
|
||||
<span style="padding-left: 10px">s</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Minimum stop time" prop="minStopTime">
|
||||
<el-input-number v-model="formModel.minStopTime" controls-position="right" :min="10" :max="30" />
|
||||
<span style="padding-left: 10px">s</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Minimum interval time" prop="minIntervalTime">
|
||||
<el-input-number v-model="formModel.minIntervalTime" controls-position="right" :min="30" :max="360" />
|
||||
<span style="padding-left: 10px">s</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Turn back time" prop="turnBackTime">
|
||||
<el-input-number v-model="formModel.turnBackTime" controls-position="right" :min="60" :max="180" />
|
||||
<span style="padding-left: 10px">s</span>
|
||||
</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';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
formModel: {
|
||||
averageSpeed: 40,
|
||||
maxSpeed: 70,
|
||||
stopTime: 30,
|
||||
minStopTime: 10,
|
||||
minIntervalTime: 180,
|
||||
turnBackTime: 90
|
||||
},
|
||||
rules: {
|
||||
averageSpeed: [
|
||||
{
|
||||
type: 'number', min: 20, max: 60, message: 'Please select the stop time.', trigger: 'blur'
|
||||
}
|
||||
],
|
||||
maxSpeed: [
|
||||
{
|
||||
type: 'number', min: 50, max: 80, message: 'Please select the stop time.', trigger: 'blur'
|
||||
}
|
||||
],
|
||||
stopTime: [
|
||||
{
|
||||
type: 'number', min: 10, max: 120, message: 'Please select the stop time.', trigger: 'blur'
|
||||
}
|
||||
],
|
||||
minStopTime: [
|
||||
{
|
||||
type: 'number', min: 10, max: 30, message: 'Please select the stop time.', trigger: 'blur'
|
||||
}
|
||||
],
|
||||
minIntervalTime: [
|
||||
{
|
||||
type: 'number', min: 30, max: 360, message: 'Please select the stop time.', trigger: 'blur'
|
||||
}
|
||||
],
|
||||
turnBackTime: [
|
||||
{
|
||||
type: 'number', min: 60, max: 180, message: 'Please select the stop time.', trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
selected: function(val) {
|
||||
},
|
||||
'$store.state.menuOperation.menuCount': function (val) {
|
||||
if (this.$store.getters['menuOperation/checkDialogIsOpen'](MenuEnum.planSetParams)) {
|
||||
this.doShow(this.$store.state.menuOperation.menuPosition);
|
||||
} else {
|
||||
this.doClose();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.formModel = {
|
||||
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;
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
},
|
||||
doConfirm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if(valid) {
|
||||
this.$emit('setParams', this.formModel.time);
|
||||
this.doClose();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,429 +0,0 @@
|
||||
<template>
|
||||
<div class="monitor">
|
||||
<schedule
|
||||
ref="schedule"
|
||||
:planUtil="planUtil"
|
||||
:title="title"
|
||||
:height="height"
|
||||
:width="width"
|
||||
:model="model"
|
||||
@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="onDialog(MenuEnum.planSetParams)">Set Param</el-button>
|
||||
</div>
|
||||
<div class="menus-right">
|
||||
<span style="font-size:22px;padding:0 17px;">Plan</span>
|
||||
<menus
|
||||
:model="model"
|
||||
:selected="selected"
|
||||
:target="target"
|
||||
@remove="onRemove"
|
||||
@clear="onClear"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</schedule>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
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 { MenuEnum } from './utils.js';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getStationList } from '@/api/runplan';
|
||||
import {
|
||||
getRpTools, clearRpPlan, addRpTrip, delRpTrip,
|
||||
justTripNoRunning, justTripNoStop,
|
||||
translateTrip,
|
||||
getRpConfig, modifyRpConfig,
|
||||
createRpArea, modifyRpArea, delRpArea
|
||||
} from '@/api/rpTools';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Schedule,
|
||||
PlanJustRunning,
|
||||
PlanJustStop,
|
||||
PlanSetParams,
|
||||
PlanModifyArea,
|
||||
Menus
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: 'XXX',
|
||||
canvasId: 'canvas-plan',
|
||||
stations: [],
|
||||
planData: [],
|
||||
selected: null,
|
||||
target: null,
|
||||
model: {
|
||||
choice: 'Plan',
|
||||
action: '',
|
||||
},
|
||||
config: {
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
return this.$store.state.app.width - 2;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height - 72;
|
||||
},
|
||||
planId() {
|
||||
return this.$route.query.planId;
|
||||
},
|
||||
mapId() {
|
||||
return 9;
|
||||
},
|
||||
lineCode() {
|
||||
return '00';
|
||||
},
|
||||
MenuEnum() {
|
||||
return MenuEnum;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
width() {
|
||||
this.setPosition();
|
||||
},
|
||||
height() {
|
||||
this.setPosition();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.planUtil = this.$theme.loadPlanConvert(this.lineCode);
|
||||
},
|
||||
mounted() {
|
||||
this.setPosition();
|
||||
this.loadInitData();
|
||||
},
|
||||
methods: {
|
||||
setPosition() {
|
||||
this.$nextTick(() => {
|
||||
this.$store.dispatch('rpTools/resize', { width: this.width, height: this.height });
|
||||
});
|
||||
},
|
||||
loadInitData() {
|
||||
getStationList(this.mapId).then(resp => {
|
||||
const stations = this.stations = resp.data.filter(el => {
|
||||
return ['车辆段', '停车场'].findIndex(it => { return el.name.includes(it) }) < 0;
|
||||
});
|
||||
this.$store.commit('rpTools/setStations', stations);
|
||||
this.$refs.schedule.loadChartPage(stations);
|
||||
|
||||
getRpTools().then(rest => {
|
||||
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);
|
||||
})
|
||||
},
|
||||
onClear() {
|
||||
this.model.action = '';
|
||||
this.selected = null;
|
||||
this.target = null;
|
||||
this.$refs.schedule.setLineReset();
|
||||
this.$refs.schedule.clearGraphic();
|
||||
},
|
||||
onDialog(menu) {
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: {x: 0, y: 0}, menu });
|
||||
},
|
||||
onTarget(target) {
|
||||
this.target = target;
|
||||
},
|
||||
onSelected(selected) {
|
||||
this.selected = selected;
|
||||
},
|
||||
onCreate(data) {
|
||||
switch(this.model.choice) {
|
||||
case 'Plan':
|
||||
this.doCreateTrip(data);
|
||||
break;
|
||||
case 'Construction':
|
||||
this.doCreateArea(data);
|
||||
break;
|
||||
}
|
||||
},
|
||||
onTranslate(data) {
|
||||
switch(this.model.choice) {
|
||||
case 'Plan':
|
||||
this.doTranslateTrip(data);
|
||||
break;
|
||||
}
|
||||
},
|
||||
onRemove(){
|
||||
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
switch(this.model.choice) {
|
||||
case 'Plan':
|
||||
this.doRemoveTrip();
|
||||
break;
|
||||
case 'Construction':
|
||||
this.doRemoveArea();
|
||||
break;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message({ type: 'info', message: 'Deletion cancelled.' });
|
||||
});
|
||||
},
|
||||
doNewPlan() {
|
||||
clearRpPlan().then(resp => {
|
||||
getRpTools().then(rest => {
|
||||
const planData = rest.data;
|
||||
this.$store.commit('rpTools/setPlanData', planData);
|
||||
this.$refs.schedule.loadChartData(planData);
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.obtainOperationGraphFailed'));
|
||||
this.$store.dispatch('rpTools/setStations', []);
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$message.info(error.message);
|
||||
})
|
||||
},
|
||||
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 = {
|
||||
seconds: time,
|
||||
stationCode: this.selected.stationCode
|
||||
}
|
||||
|
||||
justTripNoRunning(this.selected.tripNo, model).then(resp => {
|
||||
getRpTools().then(rest => {
|
||||
const planData = rest.data;
|
||||
this.$store.commit('rpTools/setPlanData', planData);
|
||||
this.$refs.schedule.loadChartData(planData);
|
||||
}).catch(() => {
|
||||
this.$messageBox('Failed to load the plan.');
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$message.info(error.message);
|
||||
})
|
||||
}
|
||||
},
|
||||
doJustStop(time){
|
||||
if (this.selected) {
|
||||
const model = {
|
||||
seconds: time,
|
||||
stationCode: this.selected.stationCode
|
||||
}
|
||||
|
||||
justTripNoStop(this.selected.tripNo, model).then(resp => {
|
||||
getRpTools().then(rest => {
|
||||
const planData = rest.data;
|
||||
this.$store.commit('rpTools/setPlanData', planData);
|
||||
this.$refs.schedule.loadChartData(planData);
|
||||
}).catch(() => {
|
||||
this.$messageBox('Failed to load the plan.');
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$message.info(error.message);
|
||||
})
|
||||
}
|
||||
},
|
||||
doCreateTrip(data) {
|
||||
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);
|
||||
this.$refs.schedule.loadChartData(planData);
|
||||
}).catch(() => {
|
||||
this.$messageBox('Failed to load the plan.');
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$message.info(error.message);
|
||||
this.$refs.schedule.clearGraphic(['mark']);
|
||||
})
|
||||
},
|
||||
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 = {
|
||||
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 => {
|
||||
getRpTools().then(rest => {
|
||||
const planData = rest.data;
|
||||
this.$store.commit('rpTools/setPlanData', planData);
|
||||
this.$refs.schedule.loadChartData(planData);
|
||||
}).catch(() => {
|
||||
this.$messageBox('Failed to load the plan.');
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$message.info(error.message);
|
||||
this.$refs.schedule.clearGraphic(['mark']);
|
||||
})
|
||||
},
|
||||
doTranslateTrip() {
|
||||
if (this.selected) {
|
||||
const model = {
|
||||
seconds : this.selected.time
|
||||
}
|
||||
|
||||
translateTripNo(this.selected.tripNo, model).then(resp => {
|
||||
getRpTools().then(rest => {
|
||||
const planData = rest.data;
|
||||
this.$store.commit('rpTools/setPlanData', planData);
|
||||
this.$refs.schedule.loadChartData(planData);
|
||||
}).catch(() => {
|
||||
this.$messageBox('Failed to load the plan.');
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$message.info(error.message);
|
||||
});
|
||||
}
|
||||
},
|
||||
doRemoveTrip() {
|
||||
if (this.selected) {
|
||||
delRpTrip(this.selected.tripNo).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);
|
||||
})
|
||||
}
|
||||
},
|
||||
doRemoveArea() {
|
||||
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);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.monitor {
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.header {
|
||||
margin: 0 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.menus-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menus-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,140 +0,0 @@
|
||||
<template>
|
||||
<div class="menus">
|
||||
<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">
|
||||
<el-button-group v-if="option.radioList" v-model="model.action">
|
||||
<el-button v-for="(el,i) in option.radioList"
|
||||
:key="i"
|
||||
:type="el.value == model.action? 'primary':''"
|
||||
@click="doBtnSelect(el, i)">
|
||||
<span>{{ execProp('label', el, i) }}</span>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<el-button-group v-if="option.buttonList" style="margin-left: 20px">
|
||||
<el-button v-for="(el,i) in option.buttonList"
|
||||
:key="i"
|
||||
:type="execProp('type', el, i)"
|
||||
:icon="execProp('icon', el, i)"
|
||||
@click="execProp('handle', el, i)">
|
||||
<span>{{ execProp('name', el, i) }}</span>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
model: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
selected: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null
|
||||
}
|
||||
},
|
||||
target: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
options() {
|
||||
return [
|
||||
{
|
||||
label: "Planning",
|
||||
value: "Plan"
|
||||
},
|
||||
{
|
||||
label: "Construction area",
|
||||
value: "Construction"
|
||||
},
|
||||
]
|
||||
},
|
||||
optionsMap() {
|
||||
return {
|
||||
Plan: {
|
||||
radioList: [
|
||||
{
|
||||
label: 'Add',
|
||||
value: 'Add',
|
||||
},
|
||||
{
|
||||
label: 'Translate',
|
||||
value: 'Translate'
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
value: 'Edit'
|
||||
}
|
||||
],
|
||||
buttonList: [
|
||||
{
|
||||
icon: 'el-icon-delete',
|
||||
type: (el, i) => { return this.selected? 'danger':'info' },
|
||||
handle: e => { this.$emit('remove') }
|
||||
}
|
||||
]
|
||||
},
|
||||
Construction: {
|
||||
radioList: [
|
||||
{
|
||||
label: 'Add',
|
||||
value: 'Add',
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
value: 'Edit'
|
||||
}
|
||||
],
|
||||
buttonList: [
|
||||
{
|
||||
icon: 'el-icon-delete',
|
||||
type: (el, i) => { return this.target?'danger':'info' },
|
||||
handle: e => { this.$emit('remove') }
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
option() {
|
||||
return this.optionsMap[this.model.choice]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
execProp(prop, el, i) {
|
||||
return el[prop]
|
||||
? el[prop] instanceof Function
|
||||
? el[prop](el, i)
|
||||
: el[prop]
|
||||
: '';
|
||||
},
|
||||
doBtnSelect(el, i) {
|
||||
if (this.option.radioList &&
|
||||
this.model.action != el.value) {
|
||||
this.$emit('clear')
|
||||
this.model.action = el.value;
|
||||
} else {
|
||||
this.$emit('clear')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.menus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,369 +0,0 @@
|
||||
import echarts from 'echarts';
|
||||
import * as utils from './utils'
|
||||
import { MenuEnum } from './utils';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
callRegister: [],
|
||||
markList: [],
|
||||
buildModel: {
|
||||
endStationCode: '',
|
||||
startStationCode: '',
|
||||
startTime: 0,
|
||||
endTime: 0
|
||||
},
|
||||
selected: null,
|
||||
target: null,
|
||||
dragging: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
myChart: function() {
|
||||
this.listenersBind();
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.listenersOff();
|
||||
},
|
||||
methods: {
|
||||
pixelExecCb(e, cb) {
|
||||
const event = e.componentType ? e.event: e;
|
||||
const pointInPixel = [event.offsetX, event.offsetY]
|
||||
if (this.myChart.containPixel('grid', pointInPixel) && this.planUtil) {
|
||||
const pointInGrid = this.myChart.convertFromPixel({seriesIndex:0},pointInPixel);
|
||||
const xIndex = pointInGrid[0];
|
||||
const yIndex = pointInGrid[1];
|
||||
const option = this.myChart.getOption();
|
||||
const minY = option.yAxis[0].min;
|
||||
const xVal = option.xAxis[0].data[xIndex];
|
||||
const yObj = this.planUtil.getStationByCoordinate(this.stations, yIndex-minY);
|
||||
if (yObj && cb) {
|
||||
cb({yObj, xVal, pointInPixel, e});
|
||||
}
|
||||
}
|
||||
},
|
||||
listenersBind() {
|
||||
if (this.myChart) {
|
||||
const zr = this.myChart.getZr();
|
||||
|
||||
zr.on('mousedown', this.onZrMouseDown, this);
|
||||
zr.on('mouseup', this.onZrMouseUp, this);
|
||||
this.myChart.on('mousedown', this.onMouseDown);
|
||||
this.myChart.on('mouseover', this.onMouseOver);
|
||||
this.myChart.on('mouseout', this.onMouseOut);
|
||||
this.myChart.on('mouseup', this.onMouseUP);
|
||||
this.myChart.on('datazoom', this.onUpdatePosition);
|
||||
window.addEventListener('resize', this.onUpdatePosition);
|
||||
}
|
||||
},
|
||||
listenersOff() {
|
||||
if (this.myChart) {
|
||||
const zr = this.myChart.getZr();
|
||||
|
||||
zr.off('mousedown', this.onZrMouseDown);
|
||||
zr.off('mouseup', this.onZrMouseUp, this);
|
||||
this.myChart.off('mousedown', this.onMouseDown);
|
||||
this.myChart.off('mouseover', this.onMouseOver);
|
||||
this.myChart.off('mouseout', this.onMouseOut);
|
||||
this.myChart.off('mouseup', this.onMouseUP);
|
||||
this.myChart.off('datazoom', this.onUpdatePosition);
|
||||
window.removeEventListener('resize', this.onUpdatePosition);
|
||||
}
|
||||
},
|
||||
onUpdatePosition(e) {
|
||||
const fixedList = ['Area'];
|
||||
const option = this.myChart.getOption();
|
||||
const elements = option.graphic[0].elements
|
||||
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.onCreateMark);
|
||||
}
|
||||
} else if (this.model.choice == 'Construction') {
|
||||
if (this.model.action == 'Add') {
|
||||
this.pixelExecCb(e, this.onCreateArea);
|
||||
}
|
||||
}
|
||||
|
||||
if (!e.target) {
|
||||
this.setLineReset();
|
||||
this.$emit('tag', null);
|
||||
this.$emit('select', null);
|
||||
}
|
||||
},
|
||||
onZrMouseUp(e) {
|
||||
if (['Plan', 'Construction'].includes(this.model.choice)) {
|
||||
if(this.model.action == 'Translate' && this.dragging) {
|
||||
this.dragging = false;
|
||||
this.pixelExecCb(e, this.onTranslate)
|
||||
}
|
||||
}
|
||||
},
|
||||
onMouseDown(e) {
|
||||
if (this.model.choice == 'Plan') {
|
||||
if (this.model.action == 'Edit') {
|
||||
this.pixelExecCb(e, this.handlePopDialog);
|
||||
}
|
||||
}
|
||||
},
|
||||
onMouseOver(e) {
|
||||
this.pixelExecCb(e, ({e, pointInPixel}) => {
|
||||
if (this.model.choice == 'Plan') {
|
||||
this.handleSelectLine({e});
|
||||
if (this.model.action == 'Translate') {
|
||||
this.onCreateDrag({e, pointInPixel})
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (this.model.choice == 'Plan') {
|
||||
if (this.model.action == 'Translate') {
|
||||
setTimeout(_ => { this.onShapeMouseOver(e); }, 200);
|
||||
}
|
||||
}
|
||||
},
|
||||
onMouseOut(e) {
|
||||
this.pixelExecCb(e, ({e, pointInPixel}) => {
|
||||
if (this.model.choice == 'Plan') {
|
||||
this.handleSelectLine({e});
|
||||
if(this.model.action == 'Translate') {
|
||||
this.onCreateDrag({e, pointInPixel})
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (this.model.choice == 'Plan') {
|
||||
if (this.model.action == 'Translate') {
|
||||
this.onShapeMouseOver(e);
|
||||
}
|
||||
}
|
||||
},
|
||||
onMouseUP(e) {
|
||||
},
|
||||
onShapeDragging(e) {
|
||||
if (this.selected) {
|
||||
this.dragging = true;
|
||||
if (this.model.choice == 'Plan') {
|
||||
if (this.model.action == 'Translate') {
|
||||
this.pixelExecCb(e, this.handleSeriesDragging);
|
||||
}
|
||||
} else if (this.model.choice == 'Construction') {
|
||||
if (this.model.action == 'Translate') {
|
||||
this.pixelExecCb(e, this.handleAreaDragging);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onShapeMouseOver() {
|
||||
if (this.selected) {
|
||||
this.myChart.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: this.selected.seriesIndex,
|
||||
dataIndex: this.selected.dataIndex
|
||||
});
|
||||
}
|
||||
},
|
||||
onShapeMouseOut() {
|
||||
if (this.selected) {
|
||||
this.myChart.dispatchAction({
|
||||
type: 'hideTip',
|
||||
});
|
||||
}
|
||||
},
|
||||
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}) {
|
||||
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}) {
|
||||
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,
|
||||
seriesIndex: e.seriesIndex,
|
||||
seriesName: e.seriesName,
|
||||
seriesId: e.seriesId,
|
||||
depTime: e.dataIndex < length - 1? nxt[0] - value[0]: 0,
|
||||
runTime: e.dataIndex < length - 1? nxt[0] - value[0]: 0,
|
||||
...e.value[2],
|
||||
_x: value[0],
|
||||
dx: 0,
|
||||
time: 0,
|
||||
}
|
||||
this.$emit('select', this.selected);
|
||||
|
||||
if (e.dataIndex < length - 1 && value[1] == nxt[1]) {
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: MenuEnum.planJustStop });
|
||||
} else if (e.dataIndex == 0 || e.dataIndex > 0 && value[1] == pre[1]) {
|
||||
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}) {
|
||||
if (e.componentType == "series" &&
|
||||
e.componentSubType == "line" &&
|
||||
e.seriesName.includes('plan-')) {
|
||||
const value = e.value;
|
||||
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];
|
||||
|
||||
if (this.selected &&
|
||||
this.selected.seriesName != e.seriesName) {
|
||||
this.setLineReset();
|
||||
}
|
||||
|
||||
this.selected = {
|
||||
dataIndex: e.dataIndex,
|
||||
seriesIndex: e.seriesIndex,
|
||||
seriesName: e.seriesName,
|
||||
seriesId: e.seriesId,
|
||||
depTime: e.dataIndex < length - 1? nxt[0] - value[0]: 0,
|
||||
runTime: e.dataIndex < length - 1? nxt[0] - value[0]: 0,
|
||||
...e.value[2],
|
||||
_x: value[0],
|
||||
dx: 0,
|
||||
time: 0
|
||||
}
|
||||
this.$emit('select', this.selected);
|
||||
|
||||
this.setLineLight();
|
||||
}
|
||||
},
|
||||
handleSeriesDragging({e, xVal}) {
|
||||
if (this.selected) {
|
||||
this.selected.dx = xVal - this.selected._x;
|
||||
this.selected.time += this.selected.dx;
|
||||
this.selected._x = xVal;
|
||||
|
||||
const option = this.myChart.getOption();
|
||||
const model = option.series[this.selected.seriesIndex]
|
||||
model.data.forEach(el => {
|
||||
el[0] += this.selected.dx;
|
||||
});
|
||||
model.markPoint.data.forEach(el => {
|
||||
el.coord[0] += 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});
|
||||
}
|
||||
},
|
||||
handleAreaDragging({e, xVal}) {
|
||||
},
|
||||
onTranslate({e}) {
|
||||
this.$emit('translate');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,382 +0,0 @@
|
||||
<template>
|
||||
<div id="PlanSchedule">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" >
|
||||
<slot name="header" />
|
||||
</div>
|
||||
<div :id="canvasId" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts';
|
||||
import Monitor from './monitor.js';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
|
||||
export default {
|
||||
mixins: [Monitor],
|
||||
props: {
|
||||
planUtil: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
model: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
canvasId: {
|
||||
type: String,
|
||||
default: 'plan-tool'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
stations: [],
|
||||
planData: [],
|
||||
kmRangeCoordinateMap:{}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
option() {
|
||||
return {
|
||||
title: {
|
||||
text: '',
|
||||
left: 'center',
|
||||
top: '10px'
|
||||
},
|
||||
grid: {
|
||||
top: '60px',
|
||||
left: '160px',
|
||||
right: '100px',
|
||||
bottom: '80px',
|
||||
containLabel: true,
|
||||
backgroundColor: 'floralwhite'
|
||||
},
|
||||
toolbox: {
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
snap: true,
|
||||
axis: 'x'
|
||||
},
|
||||
formatter: this.axisTooltip,
|
||||
borderWidth: 1,
|
||||
position: function (pt) {
|
||||
const data = pt[0] + 10;
|
||||
return [data, '20%'];
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: this.xAxisLableFormat,
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
axisPointer: {
|
||||
snap: true,
|
||||
label: {
|
||||
formatter: this.xAxisPointFormat,
|
||||
backgroundColor: 'rgb(255,0,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 'auto',
|
||||
formatter: this.yAxisLableFormat
|
||||
},
|
||||
axisPointer: {
|
||||
xAxisIndex: 'all',
|
||||
label: {
|
||||
formatter: this.yAxisPointFormat,
|
||||
backgroundColor: 'rgb(0,100,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
min: 0,
|
||||
max: 0
|
||||
},
|
||||
graphic: [{
|
||||
id: 'shape',
|
||||
elements: []
|
||||
}],
|
||||
series: [],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
zoomOnMouseWheel : true,
|
||||
moveOnMouseMove : 'ctrl',
|
||||
},
|
||||
{
|
||||
fiterMode: 'filter',
|
||||
handleSize: '80%',
|
||||
handleStyle: {
|
||||
color: '#fff',
|
||||
shadowBlur: 3,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
bottom: '20px'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
width() {
|
||||
this.reSize({width: this.width, height: this.height})
|
||||
},
|
||||
height() {
|
||||
this.reSize({width: this.width, height: this.height})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadInitChart();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroy();
|
||||
},
|
||||
methods: {
|
||||
xAxisPointFormat(params) {
|
||||
return timeFormat(params.value);
|
||||
},
|
||||
yAxisPointFormat(params) {
|
||||
return this.planUtil.computedFormatYAxis(this.stations, params);
|
||||
},
|
||||
xAxisLableFormat(value, index) {
|
||||
if (value % 60 === 0) {
|
||||
return timeFormat(value);
|
||||
}
|
||||
},
|
||||
yAxisLableFormat(value, index) {
|
||||
return '';
|
||||
},
|
||||
axisTooltip(param) {
|
||||
let data = '';
|
||||
|
||||
if (param.data &&
|
||||
param.data.length) {
|
||||
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(xVal + this.planUtil.TranslationTime)}<br>`,
|
||||
`<hr size=1 style="margin: 3px 0">`
|
||||
];
|
||||
data += list.join('');
|
||||
}
|
||||
return data;
|
||||
},
|
||||
loadInitChart() {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
if (this.myChart && this.myChart.isDisposed) {
|
||||
this.myChart.clear();
|
||||
}
|
||||
if (this.$route.query.planName || this.$route.query.prdType === '05') {
|
||||
this.option.title.text = this.this.title;
|
||||
}
|
||||
|
||||
this.myChart = echarts.init(document.getElementById(this.canvasId));
|
||||
this.myChart.setOption(this.option, {notMerge: true});
|
||||
this.reSize({ width: this.width, height: this.height });
|
||||
resolve(true);
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
loadChartPage(stations) {
|
||||
try {
|
||||
if (this.myChart) {
|
||||
this.myChart.showLoading();
|
||||
|
||||
this.stations = stations;
|
||||
this.kmRangeCoordinateMap = this.planUtil.convertStationsToMap(this.stations);
|
||||
this.xAxisInit(stations);
|
||||
this.yAxisInit(stations);
|
||||
|
||||
this.myChart.setOption(this.option, {notMerge: true});
|
||||
this.myChart.hideLoading();
|
||||
}
|
||||
} catch (error) {
|
||||
this.$messageBox(error.message);
|
||||
}
|
||||
},
|
||||
loadChartData(planData) {
|
||||
try {
|
||||
const option = this.myChart.getOption();
|
||||
|
||||
option.series = [];
|
||||
option.graphic[0].elements = [];
|
||||
|
||||
this.planData = planData;
|
||||
|
||||
this.pushModels(option.series, [this.planUtil.initializeYaxis(this.stations)]);
|
||||
this.pushModels(option.series, this.planUtil.parseDataToSeries(this.myChart, planData, this.stations, this.kmRangeCoordinateMap));
|
||||
this.pushModels(option.graphic[0].elements, this.planUtil.parseDataToGraph(this.myChart, planData, this.stations, this.kmRangeCoordinateMap));
|
||||
|
||||
this.myChart.setOption(option, {notMerge: true});
|
||||
} catch (error) {
|
||||
this.$messageBox(error.message);
|
||||
}
|
||||
},
|
||||
xAxisInit(stations) {
|
||||
const option = this.option;
|
||||
const startValue = 3600 * 6;
|
||||
const offsetTime = 3600 / 2;
|
||||
const list = [];
|
||||
|
||||
for (var time = 0 + this.planUtil.TranslationTime; time < 3600 * 24 + this.planUtil.TranslationTime; time++) {
|
||||
list.push(time);
|
||||
}
|
||||
|
||||
option.xAxis[0].data = list;
|
||||
if (!option.dataZoom[0].startValue) {
|
||||
option.dataZoom[0].startValue = option.dataZoom[1].startValue = startValue - offsetTime;
|
||||
}
|
||||
|
||||
if (!option.dataZoom[0].endValue) {
|
||||
option.dataZoom[0].endValue = option.dataZoom[1].endValue = startValue + offsetTime;
|
||||
}
|
||||
},
|
||||
yAxisInit(stations) {
|
||||
const option = this.option;
|
||||
if (Object.keys(this.planUtil).length) {
|
||||
this.pushModels(option.series, [this.planUtil.initializeYaxis(stations)]);
|
||||
option.yAxis.min = this.planUtil.computedYaxisMinValue(stations);
|
||||
option.yAxis.max = this.planUtil.computedYaxisMaxValue(stations);
|
||||
}
|
||||
},
|
||||
reSize({width, height}) {
|
||||
if (this.myChart) {
|
||||
this.myChart.resize({ width, height, silent: false });
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (this.myChart && this.myChart.isDisposed) {
|
||||
this.myChart.dispose();
|
||||
this.myChart = null;
|
||||
}
|
||||
},
|
||||
pushModels(series, models) {
|
||||
if (models && models.length) {
|
||||
models.forEach(elem => {
|
||||
if (elem) {
|
||||
series.push(elem);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return series;
|
||||
},
|
||||
popModels(series, models) {
|
||||
if (models && models.length) {
|
||||
models.forEach(elem => {
|
||||
const index = series.indexOf(elem);
|
||||
if (index >= 0) {
|
||||
series.split(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return series;
|
||||
},
|
||||
setLineLight() {
|
||||
if (this.selected) {
|
||||
this.myChart.setOption({
|
||||
series: {
|
||||
name: this.selected.seriesName,
|
||||
symbolSize: 6,
|
||||
showAllSymbol: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#0000FF'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
setLineReset() {
|
||||
if (this.selected) {
|
||||
this.myChart.setOption({
|
||||
series: {
|
||||
name: this.selected.seriesName,
|
||||
symbolSize: 1,
|
||||
showAllSymbol: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#000000'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
clearGraphic(labels=['drag', 'mark']) {
|
||||
const option = this.myChart.getOption();
|
||||
const elements = option.graphic[0].elements;
|
||||
option.graphic[0].elements = elements.filter(el => { return !labels.includes(el.subType)});
|
||||
this.myChart.setOption(option, {notMerge: true});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
#PlanSchedule {
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@ -1,46 +0,0 @@
|
||||
import echarts from 'echarts';
|
||||
|
||||
export const MenuEnum = {
|
||||
planJustRunning: '1000',
|
||||
planJustStop: '1001',
|
||||
planSetParams: '1002',
|
||||
planModifyArea: '1003'
|
||||
}
|
||||
|
||||
export function buildDragDataObj(position, point, that) {
|
||||
return {
|
||||
type: 'circle',
|
||||
subType: 'drag',
|
||||
position: [...position],
|
||||
point: [...point],
|
||||
shape: {
|
||||
cx: 0,
|
||||
cy: 0,
|
||||
r: 10
|
||||
},
|
||||
invisible: true,
|
||||
draggable: 'horizontal',
|
||||
ondrag: echarts.util.curry(that.onShapeDragging),
|
||||
onmouseover: echarts.util.curry(that.onShapeMouseOver),
|
||||
onmouseout: echarts.util.curry(that.onShapeMouseOut),
|
||||
z: 100
|
||||
}
|
||||
}
|
||||
|
||||
export function buildMarkPointObj(position, point, that) {
|
||||
return {
|
||||
type: 'circle',
|
||||
subType: 'mark',
|
||||
z: 100,
|
||||
position: [...position],
|
||||
point: [...point],
|
||||
shape: {
|
||||
cx: 0,
|
||||
cy: 0,
|
||||
r: 10
|
||||
},
|
||||
style: {
|
||||
fill: 'rgba(0,0,0,0.3)'
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -31,10 +31,6 @@ export default {
|
||||
dialogShow: false,
|
||||
formModel: {
|
||||
areaNo: '',
|
||||
fartherStationCode: '',
|
||||
closerStationCode: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
text: ''
|
||||
},
|
||||
}
|
||||
@ -55,10 +51,6 @@ export default {
|
||||
const model = this.target.model;
|
||||
this.formModel = {
|
||||
areaNo: model.areaNo,
|
||||
fartherStationCode: model.fartherStationCode,
|
||||
closerStationCode: model.closerStationCode,
|
||||
startTime: model.startTime,
|
||||
endTime: model.endTime,
|
||||
text: model.text
|
||||
};
|
||||
}
|
||||
|
||||
@ -55,9 +55,9 @@ import { getStationList } from '@/api/runplan';
|
||||
import {
|
||||
getRpTools, clearRpPlan, addRpTrip, delRpTrip,
|
||||
justTripNoRunning, justTripNoStop,
|
||||
translateTrip,
|
||||
translateService,
|
||||
getRpConfig, modifyRpConfig,
|
||||
createRpArea, modifyRpArea, delRpArea
|
||||
createRpArea, modifyRpArea, modifyAreaNote, delRpArea
|
||||
} from '@/api/rpTools';
|
||||
|
||||
export default {
|
||||
@ -161,8 +161,14 @@ export default {
|
||||
this.selected = null;
|
||||
this.target = null;
|
||||
this.$refs.schedule.setLineReset();
|
||||
this.$refs.schedule.clearGraphic();
|
||||
this.$refs.schedule.clearTrip();
|
||||
if (this.model.action != 'Translate') {
|
||||
this.$refs.schedule.clearDraggable();
|
||||
}
|
||||
|
||||
if (this.model.action != 'Add') {
|
||||
this.$refs.schedule.clearGraphic();
|
||||
}
|
||||
},
|
||||
onDialog(menu) {
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: {x: 0, y: 0}, menu });
|
||||
@ -186,7 +192,7 @@ export default {
|
||||
onTranslate(data) {
|
||||
switch(this.model.choice) {
|
||||
case 'Plan':
|
||||
this.doTranslateTrip(data);
|
||||
this.doTranslateService(data);
|
||||
break;
|
||||
case 'Construction':
|
||||
this.doTranslateArea(data);
|
||||
@ -260,7 +266,11 @@ export default {
|
||||
})
|
||||
},
|
||||
doSetAreaNote(data) {
|
||||
modifyRpArea(data.areaNo, data).then(resp => {
|
||||
const model = {
|
||||
text: data.text
|
||||
}
|
||||
|
||||
modifyAreaNote(data.areaNo, model).then(resp => {
|
||||
getRpTools().then(rest => {
|
||||
const planData = rest.data;
|
||||
this.$store.commit('rpTools/setPlanData', planData);
|
||||
@ -366,13 +376,13 @@ export default {
|
||||
this.$refs.schedule.clearGraphic(['mark']);
|
||||
})
|
||||
},
|
||||
doTranslateTrip() {
|
||||
doTranslateService() {
|
||||
if (this.selected) {
|
||||
const model = {
|
||||
seconds : this.selected.sx
|
||||
}
|
||||
|
||||
translateTrip(this.selected.tripNo, model).then(resp => {
|
||||
translateService(this.selected.serviceNo, model).then(resp => {
|
||||
getRpTools().then(rest => {
|
||||
const planData = rest.data;
|
||||
this.$store.commit('rpTools/setPlanData', planData);
|
||||
|
||||
@ -129,17 +129,17 @@ export default {
|
||||
: '';
|
||||
},
|
||||
doSelChange() {
|
||||
this.$emit('clear');
|
||||
this.model.action = '';
|
||||
this.$emit('clear');
|
||||
},
|
||||
doBtnSelect(el, i) {
|
||||
if (this.option.radioList &&
|
||||
this.model.action != el.value) {
|
||||
this.$emit('clear')
|
||||
this.model.action = el.value;
|
||||
} else {
|
||||
this.$emit('clear')
|
||||
} else {
|
||||
this.model.action = '';
|
||||
this.$emit('clear')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -57,8 +57,8 @@ export default {
|
||||
this.myChart.on('mouseover', this.onMouseOver);
|
||||
this.myChart.on('mouseout', this.onMouseOut);
|
||||
this.myChart.on('mouseup', this.onMouseUP);
|
||||
this.myChart.on('datazoom', this.onUpdatePosition);
|
||||
window.addEventListener('resize', this.onUpdatePosition);
|
||||
this.myChart.on('datazoom', this.onUpdateZoom);
|
||||
window.addEventListener('resize', this.onUpdateZoom);
|
||||
}
|
||||
},
|
||||
listenersOff() {
|
||||
@ -73,12 +73,12 @@ export default {
|
||||
this.myChart.off('mouseover', this.onMouseOver);
|
||||
this.myChart.off('mouseout', this.onMouseOut);
|
||||
this.myChart.off('mouseup', this.onMouseUP);
|
||||
this.myChart.off('datazoom', this.onUpdatePosition);
|
||||
window.removeEventListener('resize', this.onUpdatePosition);
|
||||
this.myChart.off('datazoom', this.onUpdateZoom);
|
||||
window.removeEventListener('resize', this.onUpdateZoom);
|
||||
}
|
||||
},
|
||||
onUpdatePosition(e) {
|
||||
const fixedList = ['Area'];
|
||||
onUpdateZoom(e) {
|
||||
const fixedList = ['area'];
|
||||
const option = this.myChart.getOption();
|
||||
const elements = option.graphic[0].elements
|
||||
const graphic = echarts.util.map(elements, (el) => {
|
||||
@ -104,38 +104,32 @@ export default {
|
||||
},
|
||||
onZrMouseOver(e) {
|
||||
this.pixelExecCb(e, this.doSetTarget);
|
||||
if (this.model.choice == 'Construction') {
|
||||
if (this.model.action == 'Translate') {
|
||||
this.pixelExecCb(e, this.doSetAreaTranslate);
|
||||
} else if (this.model.action == 'Edit') {
|
||||
this.pixelExecCb(e, this.doClrAreaDrags);
|
||||
}
|
||||
}
|
||||
},
|
||||
onZrMouseDown(e) {
|
||||
if (e.target && ['Area'].includes(e.target.subType)) {
|
||||
this.onZrMouseOver(e);
|
||||
if (e.target && ['area'].includes(e.target.subType)) {
|
||||
this.dragging = true;
|
||||
if (this.model.choice == 'Construction') {
|
||||
if (this.model.action == 'Note') {
|
||||
this.pixelExecCb(e, this.doPopDialog);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (this.model.choice == 'Plan') {
|
||||
if (this.model.action == 'Add') {
|
||||
this.pixelExecCb(e, this.doCreateMark);
|
||||
} else {
|
||||
this.$emit('clear')
|
||||
}
|
||||
} else if (this.model.choice == 'Construction') {
|
||||
if (this.model.action == 'Add') {
|
||||
this.pixelExecCb(e, this.doCreateArea);
|
||||
} else {
|
||||
this.$emit('clear')
|
||||
}
|
||||
} else {
|
||||
this.$emit('clear')
|
||||
}
|
||||
|
||||
if (!e.target) {
|
||||
this.$emit('clear')
|
||||
}
|
||||
|
||||
if (this.model.choice == 'Plan') {
|
||||
if (this.model.action == 'Add') {
|
||||
this.pixelExecCb(e, this.doCreateMark);
|
||||
}
|
||||
} else if (this.model.choice == 'Construction') {
|
||||
if (this.model.action == 'Add') {
|
||||
this.pixelExecCb(e, this.doCreateArea);
|
||||
} else if (this.model.action == 'Translate') {
|
||||
this.pixelExecCb(e, this.doSetAreaTranslate);
|
||||
} else if (this.model.action == 'Edit') {
|
||||
this.pixelExecCb(e, this.doSetAreaDrags);
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -148,13 +142,6 @@ export default {
|
||||
this.dragging = false;
|
||||
},
|
||||
onZrMouseOut(e) {
|
||||
if (this.model.choice == 'Construction') {
|
||||
if (this.model.action == 'Translate') {
|
||||
this.pixelExecCb(e, this.doClrAreaTranslate);
|
||||
} else if (this.model.action == 'Edit') {
|
||||
this.pixelExecCb(e, this.doClrAreaDrags);
|
||||
}
|
||||
}
|
||||
},
|
||||
onMouseOver(e) {
|
||||
this.pixelExecCb(e, args => {
|
||||
@ -180,6 +167,14 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
onMouseUP(e) {
|
||||
if (['Construction'].includes(this.model.choice)) {
|
||||
if(this.model.action == 'Translate' && this.dragging) {
|
||||
this.pixelExecCb(e, this.doTranslate)
|
||||
this.dragging = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
onMouseOut(e) {
|
||||
this.pixelExecCb(e, args => {
|
||||
if (this.model.choice == 'Plan') {
|
||||
@ -189,20 +184,6 @@ export default {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (this.model.choice == 'Plan') {
|
||||
if (this.model.action == 'Translate') {
|
||||
this.onShapeMouseOver(e);
|
||||
}
|
||||
}
|
||||
},
|
||||
onMouseUP(e) {
|
||||
if (['Construction'].includes(this.model.choice)) {
|
||||
if(this.model.action == 'Translate' && this.dragging) {
|
||||
this.pixelExecCb(e, this.doTranslate)
|
||||
this.dragging = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
onShapeMouseOver(e) {
|
||||
if (this.selected) {
|
||||
@ -234,7 +215,10 @@ export default {
|
||||
}
|
||||
},
|
||||
doCreateDrag({e, pointInGrid, pointInPixel}) {
|
||||
if (this.selected) {
|
||||
if (this.selected &&
|
||||
e.componentType == "series" &&
|
||||
e.componentSubType == "line" &&
|
||||
e.seriesName.includes('service')) {
|
||||
const option = this.myChart.getOption();
|
||||
const filters = option.graphic[0].elements.filter(el => { return el.subType != 'drag'});
|
||||
filters.push(utils.buildDragDataObj(pointInPixel, pointInGrid, this))
|
||||
@ -295,7 +279,7 @@ export default {
|
||||
}
|
||||
},
|
||||
doSetTarget({e, pointInGrid}) {
|
||||
if (e.target && ['Area'].includes(e.target.subType)) {
|
||||
if (e.target && ['area'].includes(e.target.subType)) {
|
||||
const target = e.target;
|
||||
const model = target.model
|
||||
Object.assign(model, {
|
||||
@ -371,33 +355,20 @@ export default {
|
||||
}
|
||||
},
|
||||
doSetAreaTranslate({e}) {
|
||||
if (e.target && ['Area'].includes(e.target.subType)) {
|
||||
if (e.target && ['area'].includes(e.target.subType)) {
|
||||
const option = this.myChart.getOption();
|
||||
const shape = option.graphic[0].elements.find(el => { return ['Area'].includes(el.subType) && el.areaNo == this.target.areaNo; });
|
||||
const shape = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.areaNo == this.target.areaNo; });
|
||||
Object.assign(shape, {
|
||||
draggable: true,
|
||||
ondrag: echarts.util.curry(this.onShapeDragging)
|
||||
})
|
||||
|
||||
this.myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
doClrAreaTranslate({e}) {
|
||||
if (e.target && ['Area'].includes(e.target.subType)) {
|
||||
const option = this.myChart.getOption();
|
||||
const shape = option.graphic[0].elements.find(el => { return ['Area'].includes(el.subType) && el.areaNo == this.target.areaNo; });
|
||||
Object.assign(shape, {
|
||||
draggable: false
|
||||
})
|
||||
this.myChart.setOption(option);
|
||||
this.myChart.setOption(option, {notMerge: true});
|
||||
}
|
||||
},
|
||||
doSetAreaDrags({e}) {
|
||||
console.log('set drag')
|
||||
},
|
||||
doClrAreaDrags({e}) {
|
||||
console.log('clr drag')
|
||||
},
|
||||
doPopDialog({e, pointInGrid, pointInPixel}) {
|
||||
const point = {
|
||||
x: pointInPixel[0],
|
||||
@ -421,7 +392,7 @@ export default {
|
||||
} else if (e.dataIndex == 0 || e.dataIndex > 0 && e.value[1] == prev[1]) {
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: MenuEnum.planJustRunning });
|
||||
}
|
||||
} else if (e.target && e.target.subType == 'Area') {
|
||||
} else if (e.target && e.target.subType == 'area') {
|
||||
this.doSetTarget({e, pointInGrid})
|
||||
|
||||
if (this.model.action == 'Note') {
|
||||
@ -465,11 +436,9 @@ export default {
|
||||
}
|
||||
},
|
||||
doAreaDragging({e, pointInGrid}) {
|
||||
if (this.target && ['Area'].includes(this.target.subType) && this.dragging) {
|
||||
if (this.target && ['area'].includes(this.target.subType) && this.dragging) {
|
||||
const model = this.target.model;
|
||||
if (model.sx == undefined || model.sy == undefined) {
|
||||
this.onZrMouseOver(e);
|
||||
} else {
|
||||
if (model.sx != undefined && model.sy != undefined) {
|
||||
model.dx = pointInGrid[0] - model._x;
|
||||
model.dy = pointInGrid[1] - model._y;
|
||||
model.sx += model.dx;
|
||||
@ -480,7 +449,7 @@ export default {
|
||||
}
|
||||
},
|
||||
doTranslate({e}) {
|
||||
if (this.target && ['Area'].includes(this.target.subType)) {
|
||||
if (this.target && ['area'].includes(this.target.subType)) {
|
||||
const model = this.target.model;
|
||||
const sx = model.sx||0;
|
||||
const sy = model.sy||0;
|
||||
|
||||
@ -371,6 +371,19 @@ export default {
|
||||
const option = this.myChart.getOption();
|
||||
const elements = option.graphic[0].elements;
|
||||
option.graphic[0].elements = elements.filter(el => { return !labels.includes(el.subType)});
|
||||
this.myChart.setOption(option, {notMerge: true});
|
||||
},
|
||||
clearDraggable(labels=['drag', 'area']) {
|
||||
const option = this.myChart.getOption();
|
||||
const elements = option.graphic[0].elements;
|
||||
const elemList = elements.filter(el => { return labels.includes(el.subType)});
|
||||
|
||||
elemList.forEach(el => {
|
||||
el.draggable = false;
|
||||
el.ondrag = null;
|
||||
el.onmousemove = null;
|
||||
})
|
||||
|
||||
this.myChart.setOption(option, {notMerge: true});
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,8 +21,8 @@ export function buildDragDataObj(position, point, that) {
|
||||
},
|
||||
invisible: true,
|
||||
draggable: 'horizontal',
|
||||
ondrag: echarts.util.curry(that.onShapeDragging),
|
||||
onmouseover: echarts.util.curry(that.onShapeMouseOver),
|
||||
ondrag: echarts.util.curry(that.onShapeDragging),
|
||||
onmouseout: echarts.util.curry(that.onShapeMouseOut),
|
||||
z: 100
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user