修改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({
|
return request({
|
||||||
url: `/api/rpTools/${tripNo}/trip`,
|
url: `/api/rpTools/${tripNo}/turnBack`,
|
||||||
method: 'put',
|
method: 'put',
|
||||||
data
|
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({
|
graphs.push({
|
||||||
type: 'rect',
|
type: 'rect',
|
||||||
subType: 'Area',
|
subType: 'area',
|
||||||
areaNo: area.areaNo,
|
areaNo: area.areaNo,
|
||||||
position,
|
position,
|
||||||
point1,
|
point1,
|
||||||
|
|||||||
@ -32,7 +32,7 @@ export default {
|
|||||||
|
|
||||||
graphs.push({
|
graphs.push({
|
||||||
type: 'rect',
|
type: 'rect',
|
||||||
subType: 'Area',
|
subType: 'area',
|
||||||
areaNo: el.areaNo,
|
areaNo: el.areaNo,
|
||||||
position,
|
position,
|
||||||
point1,
|
point1,
|
||||||
|
|||||||
@ -47,7 +47,7 @@ export function createSeriesModel(opt, lineStyle={}, itemStyle={}) {
|
|||||||
export function createRectArea(opt, style={}) {
|
export function createRectArea(opt, style={}) {
|
||||||
return {
|
return {
|
||||||
type: 'rect',
|
type: 'rect',
|
||||||
subType: 'Area',
|
subType: 'area',
|
||||||
areaNo: opt.model.areaNo,
|
areaNo: opt.model.areaNo,
|
||||||
position: opt.position,
|
position: opt.position,
|
||||||
point1: opt.point1,
|
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,
|
dialogShow: false,
|
||||||
formModel: {
|
formModel: {
|
||||||
areaNo: '',
|
areaNo: '',
|
||||||
fartherStationCode: '',
|
|
||||||
closerStationCode: '',
|
|
||||||
startTime: '',
|
|
||||||
endTime: '',
|
|
||||||
text: ''
|
text: ''
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@ -55,10 +51,6 @@ export default {
|
|||||||
const model = this.target.model;
|
const model = this.target.model;
|
||||||
this.formModel = {
|
this.formModel = {
|
||||||
areaNo: model.areaNo,
|
areaNo: model.areaNo,
|
||||||
fartherStationCode: model.fartherStationCode,
|
|
||||||
closerStationCode: model.closerStationCode,
|
|
||||||
startTime: model.startTime,
|
|
||||||
endTime: model.endTime,
|
|
||||||
text: model.text
|
text: model.text
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -55,9 +55,9 @@ import { getStationList } from '@/api/runplan';
|
|||||||
import {
|
import {
|
||||||
getRpTools, clearRpPlan, addRpTrip, delRpTrip,
|
getRpTools, clearRpPlan, addRpTrip, delRpTrip,
|
||||||
justTripNoRunning, justTripNoStop,
|
justTripNoRunning, justTripNoStop,
|
||||||
translateTrip,
|
translateService,
|
||||||
getRpConfig, modifyRpConfig,
|
getRpConfig, modifyRpConfig,
|
||||||
createRpArea, modifyRpArea, delRpArea
|
createRpArea, modifyRpArea, modifyAreaNote, delRpArea
|
||||||
} from '@/api/rpTools';
|
} from '@/api/rpTools';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -161,8 +161,14 @@ export default {
|
|||||||
this.selected = null;
|
this.selected = null;
|
||||||
this.target = null;
|
this.target = null;
|
||||||
this.$refs.schedule.setLineReset();
|
this.$refs.schedule.setLineReset();
|
||||||
this.$refs.schedule.clearGraphic();
|
|
||||||
this.$refs.schedule.clearTrip();
|
this.$refs.schedule.clearTrip();
|
||||||
|
if (this.model.action != 'Translate') {
|
||||||
|
this.$refs.schedule.clearDraggable();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.model.action != 'Add') {
|
||||||
|
this.$refs.schedule.clearGraphic();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onDialog(menu) {
|
onDialog(menu) {
|
||||||
this.$store.dispatch('menuOperation/setPopMenu', { position: {x: 0, y: 0}, menu });
|
this.$store.dispatch('menuOperation/setPopMenu', { position: {x: 0, y: 0}, menu });
|
||||||
@ -186,7 +192,7 @@ export default {
|
|||||||
onTranslate(data) {
|
onTranslate(data) {
|
||||||
switch(this.model.choice) {
|
switch(this.model.choice) {
|
||||||
case 'Plan':
|
case 'Plan':
|
||||||
this.doTranslateTrip(data);
|
this.doTranslateService(data);
|
||||||
break;
|
break;
|
||||||
case 'Construction':
|
case 'Construction':
|
||||||
this.doTranslateArea(data);
|
this.doTranslateArea(data);
|
||||||
@ -260,7 +266,11 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
doSetAreaNote(data) {
|
doSetAreaNote(data) {
|
||||||
modifyRpArea(data.areaNo, data).then(resp => {
|
const model = {
|
||||||
|
text: data.text
|
||||||
|
}
|
||||||
|
|
||||||
|
modifyAreaNote(data.areaNo, model).then(resp => {
|
||||||
getRpTools().then(rest => {
|
getRpTools().then(rest => {
|
||||||
const planData = rest.data;
|
const planData = rest.data;
|
||||||
this.$store.commit('rpTools/setPlanData', planData);
|
this.$store.commit('rpTools/setPlanData', planData);
|
||||||
@ -366,13 +376,13 @@ export default {
|
|||||||
this.$refs.schedule.clearGraphic(['mark']);
|
this.$refs.schedule.clearGraphic(['mark']);
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
doTranslateTrip() {
|
doTranslateService() {
|
||||||
if (this.selected) {
|
if (this.selected) {
|
||||||
const model = {
|
const model = {
|
||||||
seconds : this.selected.sx
|
seconds : this.selected.sx
|
||||||
}
|
}
|
||||||
|
|
||||||
translateTrip(this.selected.tripNo, model).then(resp => {
|
translateService(this.selected.serviceNo, model).then(resp => {
|
||||||
getRpTools().then(rest => {
|
getRpTools().then(rest => {
|
||||||
const planData = rest.data;
|
const planData = rest.data;
|
||||||
this.$store.commit('rpTools/setPlanData', planData);
|
this.$store.commit('rpTools/setPlanData', planData);
|
||||||
|
|||||||
@ -129,17 +129,17 @@ export default {
|
|||||||
: '';
|
: '';
|
||||||
},
|
},
|
||||||
doSelChange() {
|
doSelChange() {
|
||||||
this.$emit('clear');
|
|
||||||
this.model.action = '';
|
this.model.action = '';
|
||||||
|
this.$emit('clear');
|
||||||
},
|
},
|
||||||
doBtnSelect(el, i) {
|
doBtnSelect(el, i) {
|
||||||
if (this.option.radioList &&
|
if (this.option.radioList &&
|
||||||
this.model.action != el.value) {
|
this.model.action != el.value) {
|
||||||
this.$emit('clear')
|
|
||||||
this.model.action = el.value;
|
this.model.action = el.value;
|
||||||
} else {
|
|
||||||
this.$emit('clear')
|
this.$emit('clear')
|
||||||
|
} else {
|
||||||
this.model.action = '';
|
this.model.action = '';
|
||||||
|
this.$emit('clear')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -57,8 +57,8 @@ export default {
|
|||||||
this.myChart.on('mouseover', this.onMouseOver);
|
this.myChart.on('mouseover', this.onMouseOver);
|
||||||
this.myChart.on('mouseout', this.onMouseOut);
|
this.myChart.on('mouseout', this.onMouseOut);
|
||||||
this.myChart.on('mouseup', this.onMouseUP);
|
this.myChart.on('mouseup', this.onMouseUP);
|
||||||
this.myChart.on('datazoom', this.onUpdatePosition);
|
this.myChart.on('datazoom', this.onUpdateZoom);
|
||||||
window.addEventListener('resize', this.onUpdatePosition);
|
window.addEventListener('resize', this.onUpdateZoom);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
listenersOff() {
|
listenersOff() {
|
||||||
@ -73,12 +73,12 @@ export default {
|
|||||||
this.myChart.off('mouseover', this.onMouseOver);
|
this.myChart.off('mouseover', this.onMouseOver);
|
||||||
this.myChart.off('mouseout', this.onMouseOut);
|
this.myChart.off('mouseout', this.onMouseOut);
|
||||||
this.myChart.off('mouseup', this.onMouseUP);
|
this.myChart.off('mouseup', this.onMouseUP);
|
||||||
this.myChart.off('datazoom', this.onUpdatePosition);
|
this.myChart.off('datazoom', this.onUpdateZoom);
|
||||||
window.removeEventListener('resize', this.onUpdatePosition);
|
window.removeEventListener('resize', this.onUpdateZoom);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onUpdatePosition(e) {
|
onUpdateZoom(e) {
|
||||||
const fixedList = ['Area'];
|
const fixedList = ['area'];
|
||||||
const option = this.myChart.getOption();
|
const option = this.myChart.getOption();
|
||||||
const elements = option.graphic[0].elements
|
const elements = option.graphic[0].elements
|
||||||
const graphic = echarts.util.map(elements, (el) => {
|
const graphic = echarts.util.map(elements, (el) => {
|
||||||
@ -104,38 +104,32 @@ export default {
|
|||||||
},
|
},
|
||||||
onZrMouseOver(e) {
|
onZrMouseOver(e) {
|
||||||
this.pixelExecCb(e, this.doSetTarget);
|
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) {
|
onZrMouseDown(e) {
|
||||||
if (e.target && ['Area'].includes(e.target.subType)) {
|
if (e.target && ['area'].includes(e.target.subType)) {
|
||||||
this.onZrMouseOver(e);
|
|
||||||
this.dragging = true;
|
this.dragging = true;
|
||||||
if (this.model.choice == 'Construction') {
|
if (this.model.choice == 'Construction') {
|
||||||
if (this.model.action == 'Note') {
|
if (this.model.action == 'Note') {
|
||||||
this.pixelExecCb(e, this.doPopDialog);
|
this.pixelExecCb(e, this.doPopDialog);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
}
|
||||||
|
|
||||||
|
if (!e.target) {
|
||||||
|
this.$emit('clear')
|
||||||
|
}
|
||||||
|
|
||||||
if (this.model.choice == 'Plan') {
|
if (this.model.choice == 'Plan') {
|
||||||
if (this.model.action == 'Add') {
|
if (this.model.action == 'Add') {
|
||||||
this.pixelExecCb(e, this.doCreateMark);
|
this.pixelExecCb(e, this.doCreateMark);
|
||||||
} else {
|
|
||||||
this.$emit('clear')
|
|
||||||
}
|
}
|
||||||
} else if (this.model.choice == 'Construction') {
|
} else if (this.model.choice == 'Construction') {
|
||||||
if (this.model.action == 'Add') {
|
if (this.model.action == 'Add') {
|
||||||
this.pixelExecCb(e, this.doCreateArea);
|
this.pixelExecCb(e, this.doCreateArea);
|
||||||
} else {
|
} else if (this.model.action == 'Translate') {
|
||||||
this.$emit('clear')
|
this.pixelExecCb(e, this.doSetAreaTranslate);
|
||||||
}
|
} else if (this.model.action == 'Edit') {
|
||||||
} else {
|
this.pixelExecCb(e, this.doSetAreaDrags);
|
||||||
this.$emit('clear')
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -148,13 +142,6 @@ export default {
|
|||||||
this.dragging = false;
|
this.dragging = false;
|
||||||
},
|
},
|
||||||
onZrMouseOut(e) {
|
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) {
|
onMouseOver(e) {
|
||||||
this.pixelExecCb(e, args => {
|
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) {
|
onMouseOut(e) {
|
||||||
this.pixelExecCb(e, args => {
|
this.pixelExecCb(e, args => {
|
||||||
if (this.model.choice == 'Plan') {
|
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) {
|
onShapeMouseOver(e) {
|
||||||
if (this.selected) {
|
if (this.selected) {
|
||||||
@ -234,7 +215,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
doCreateDrag({e, pointInGrid, pointInPixel}) {
|
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 option = this.myChart.getOption();
|
||||||
const filters = option.graphic[0].elements.filter(el => { return el.subType != 'drag'});
|
const filters = option.graphic[0].elements.filter(el => { return el.subType != 'drag'});
|
||||||
filters.push(utils.buildDragDataObj(pointInPixel, pointInGrid, this))
|
filters.push(utils.buildDragDataObj(pointInPixel, pointInGrid, this))
|
||||||
@ -295,7 +279,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
doSetTarget({e, pointInGrid}) {
|
doSetTarget({e, pointInGrid}) {
|
||||||
if (e.target && ['Area'].includes(e.target.subType)) {
|
if (e.target && ['area'].includes(e.target.subType)) {
|
||||||
const target = e.target;
|
const target = e.target;
|
||||||
const model = target.model
|
const model = target.model
|
||||||
Object.assign(model, {
|
Object.assign(model, {
|
||||||
@ -371,33 +355,20 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
doSetAreaTranslate({e}) {
|
doSetAreaTranslate({e}) {
|
||||||
if (e.target && ['Area'].includes(e.target.subType)) {
|
if (e.target && ['area'].includes(e.target.subType)) {
|
||||||
const option = this.myChart.getOption();
|
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, {
|
Object.assign(shape, {
|
||||||
draggable: true,
|
draggable: true,
|
||||||
ondrag: echarts.util.curry(this.onShapeDragging)
|
ondrag: echarts.util.curry(this.onShapeDragging)
|
||||||
})
|
})
|
||||||
|
|
||||||
this.myChart.setOption(option);
|
this.myChart.setOption(option, {notMerge: true});
|
||||||
}
|
|
||||||
},
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
doSetAreaDrags({e}) {
|
doSetAreaDrags({e}) {
|
||||||
console.log('set drag')
|
console.log('set drag')
|
||||||
},
|
},
|
||||||
doClrAreaDrags({e}) {
|
|
||||||
console.log('clr drag')
|
|
||||||
},
|
|
||||||
doPopDialog({e, pointInGrid, pointInPixel}) {
|
doPopDialog({e, pointInGrid, pointInPixel}) {
|
||||||
const point = {
|
const point = {
|
||||||
x: pointInPixel[0],
|
x: pointInPixel[0],
|
||||||
@ -421,7 +392,7 @@ export default {
|
|||||||
} else if (e.dataIndex == 0 || e.dataIndex > 0 && e.value[1] == prev[1]) {
|
} else if (e.dataIndex == 0 || e.dataIndex > 0 && e.value[1] == prev[1]) {
|
||||||
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: MenuEnum.planJustRunning });
|
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})
|
this.doSetTarget({e, pointInGrid})
|
||||||
|
|
||||||
if (this.model.action == 'Note') {
|
if (this.model.action == 'Note') {
|
||||||
@ -465,11 +436,9 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
doAreaDragging({e, pointInGrid}) {
|
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;
|
const model = this.target.model;
|
||||||
if (model.sx == undefined || model.sy == undefined) {
|
if (model.sx != undefined && model.sy != undefined) {
|
||||||
this.onZrMouseOver(e);
|
|
||||||
} else {
|
|
||||||
model.dx = pointInGrid[0] - model._x;
|
model.dx = pointInGrid[0] - model._x;
|
||||||
model.dy = pointInGrid[1] - model._y;
|
model.dy = pointInGrid[1] - model._y;
|
||||||
model.sx += model.dx;
|
model.sx += model.dx;
|
||||||
@ -480,7 +449,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
doTranslate({e}) {
|
doTranslate({e}) {
|
||||||
if (this.target && ['Area'].includes(this.target.subType)) {
|
if (this.target && ['area'].includes(this.target.subType)) {
|
||||||
const model = this.target.model;
|
const model = this.target.model;
|
||||||
const sx = model.sx||0;
|
const sx = model.sx||0;
|
||||||
const sy = model.sy||0;
|
const sy = model.sy||0;
|
||||||
|
|||||||
@ -371,6 +371,19 @@ export default {
|
|||||||
const option = this.myChart.getOption();
|
const option = this.myChart.getOption();
|
||||||
const elements = option.graphic[0].elements;
|
const elements = option.graphic[0].elements;
|
||||||
option.graphic[0].elements = elements.filter(el => { return !labels.includes(el.subType)});
|
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});
|
this.myChart.setOption(option, {notMerge: true});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -21,8 +21,8 @@ export function buildDragDataObj(position, point, that) {
|
|||||||
},
|
},
|
||||||
invisible: true,
|
invisible: true,
|
||||||
draggable: 'horizontal',
|
draggable: 'horizontal',
|
||||||
ondrag: echarts.util.curry(that.onShapeDragging),
|
|
||||||
onmouseover: echarts.util.curry(that.onShapeMouseOver),
|
onmouseover: echarts.util.curry(that.onShapeMouseOver),
|
||||||
|
ondrag: echarts.util.curry(that.onShapeDragging),
|
||||||
onmouseout: echarts.util.curry(that.onShapeMouseOut),
|
onmouseout: echarts.util.curry(that.onShapeMouseOut),
|
||||||
z: 100
|
z: 100
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user