修改代码
This commit is contained in:
parent
fe93ecebe2
commit
df1fcc8f82
@ -16,7 +16,8 @@ export default {
|
||||
/** 按车次遍历数据*/
|
||||
if (tripList && tripList.length) {
|
||||
tripList.forEach(trip => {
|
||||
const opt = { name: `run-${trip.tripNo}`, type: 'line', showAllSymbol:true, symbolKeepAspect: false, symbolSize: 6, markPoint: { data: [] }, data: []};
|
||||
// const opt = { name: `run-${trip.tripNo}`, type: 'line', showAllSymbol:true, symbolKeepAspect: false, symbolSize: 6, markPoint: { data: [] }, data: []};
|
||||
const opt = { name: `run-${trip.tripNo}`, type: 'line', legendHoverLink: false, symbolSize: 8, markPoint: { data: [] }, data: []};
|
||||
|
||||
// const length = trip.stationTimeList.length;
|
||||
// if (trip.tripNo &&
|
||||
|
@ -14,7 +14,7 @@ import localStore from 'storejs';
|
||||
// return roles.some(role => permissionRoles.indexOf(role) >= 0);
|
||||
// }
|
||||
|
||||
const whiteList = ['/login', '/design/login', '/gzzbxy/relay']; // 不重定向白名单
|
||||
const whiteList = ['/login', '/design/login', '/gzzbxy/relay', '/AUStool']; // 不重定向白名单
|
||||
|
||||
// const designPageRegex = [/^\/design/, /^\/scriptDisplay/, /^\/publish/, /^\/orderauthor/, /^\/system/, /^\/iscs/, /^\/display\/record/, /^\/display\/manage/, /^\/apply/, /^\/plan/, /^\/display\/plan/, /^\/displayNew\/record/, /^\/displayNew\/manage/, /^\/displayNew\/plan/, /^\/practiceDisplayNew/, /^\/bigSplitScreen/];
|
||||
|
||||
|
@ -218,6 +218,11 @@ export const constantRoutes = [
|
||||
component: Jlmap3dAssetManager,
|
||||
hidden: true
|
||||
},
|
||||
{ // 运行图编辑
|
||||
path: '/AUStool',
|
||||
component: PlanMonitorEditAUSTool,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/jlmap3d/sandbox',
|
||||
component: Jlmap3dSandbox,
|
||||
@ -371,11 +376,6 @@ export const publicAsyncRoute = [
|
||||
component: PlanMonitorEditUserTool,
|
||||
hidden: true
|
||||
},
|
||||
{ // 运行图编辑
|
||||
path: '/plan/AUStool',
|
||||
component: PlanMonitorEditAUSTool,
|
||||
hidden: true
|
||||
},
|
||||
{ // 运行图编辑
|
||||
path: '/plan/tool',
|
||||
component: PlanMonitorEditTool,
|
||||
|
@ -1,6 +1,7 @@
|
||||
import echarts from 'echarts';
|
||||
import { DeviceMenu } from '@/scripts/ConstDic';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import { option } from 'runjs';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -39,13 +40,13 @@ export default {
|
||||
let pointInGrid = myChart.convertFromPixel({seriesIndex:0},pointInPixel);
|
||||
let xIndex = pointInGrid[0];
|
||||
let yIndex = pointInGrid[1];
|
||||
let op = myChart.getOption();
|
||||
let minY = op.yAxis[0].min;
|
||||
let xVal = op.xAxis[0].data[xIndex];
|
||||
let option = myChart.getOption();
|
||||
let minY = option.yAxis[0].min;
|
||||
let xVal = option.xAxis[0].data[xIndex];
|
||||
let edgeOffset = this.planConvert.EdgeHeight/6;
|
||||
let yObj = this.getStationByCoord(this.stations, yIndex-minY-edgeOffset);
|
||||
if (yObj && cb) {
|
||||
cb(yObj, xVal, pointInPixel);
|
||||
cb(option, yObj, xVal, pointInPixel);
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -56,7 +57,8 @@ export default {
|
||||
zr.on('click', this.onClick, this)
|
||||
this.myChart.on('contextmenu', this.onContextMenu);
|
||||
this.myChart.on('mousedown', this.onMouseDown);
|
||||
this.myChart.on('datazoom', this.onUpdateZoom);
|
||||
this.myChart.on('mouseup', this.onMouseUP);
|
||||
this.myChart.on('datazoom', this.onUpdatePosition);
|
||||
window.addEventListener('resize', this.onUpdatePosition);
|
||||
}
|
||||
},
|
||||
@ -65,41 +67,15 @@ export default {
|
||||
const zr = this.myChart.getZr();
|
||||
|
||||
zr.off('click', this.onClick);
|
||||
this.myChart.off('contextmenu', this.onContextMenu)
|
||||
this.myChart.off('contextmenu', this.onContextMenu);
|
||||
this.myChart.off('mousedown', this.onMouseDown);
|
||||
this.myChart.off('datazoom', this.onUpdateZoom);
|
||||
this.myChart.off('mouseup', this.onMouseUP);
|
||||
this.myChart.off('datazoom', this.onUpdatePosition);
|
||||
window.removeEventListener('resize', this.onUpdatePosition);
|
||||
}
|
||||
},
|
||||
loadInitGraphic() {
|
||||
const option = this.myChart.getOption();
|
||||
const graphic = option.series.map((el,i) => {
|
||||
return {
|
||||
id: el.name,
|
||||
elements: echarts.util.map(el.data||[], (el, dataIndex) => {
|
||||
return {
|
||||
type: 'circle',
|
||||
position: this.myChart.convertToPixel('grid', el),
|
||||
shape: {
|
||||
cx: 0,
|
||||
cy: 0,
|
||||
r: 10
|
||||
},
|
||||
invisible: true,
|
||||
draggable: true,
|
||||
ondrag: echarts.util.curry(this.onPointDragging, dataIndex),
|
||||
onmousemove: echarts.util.curry(this.onShowTooltip, dataIndex),
|
||||
onmouseout: echarts.util.curry(this.onHideTooltip, dataIndex),
|
||||
z: 100
|
||||
};
|
||||
})
|
||||
}
|
||||
})
|
||||
graphic.push({ id: 'operate', elements: [] })
|
||||
this.myChart.setOption({ graphic });
|
||||
},
|
||||
onPointDragging(dataIndex, dx, dy) {
|
||||
//
|
||||
console.log(dataIndex, dx, dy, this.selected)
|
||||
},
|
||||
onShowTooltip(dataIndex) {
|
||||
this.myChart.dispatchAction({
|
||||
@ -113,38 +89,18 @@ export default {
|
||||
},
|
||||
onUpdatePosition(e) {
|
||||
const option = this.myChart.getOption();
|
||||
const shapes = option.graphic;
|
||||
// const graphic = shapes.map(el => {
|
||||
// return echarts.util.map(el.elements||[], function (item, dataIndex) {
|
||||
// console.log(item, this.myChart.convertToPixel('grid', item.point))
|
||||
// return {
|
||||
// position: this.myChart.convertToPixel('grid', item.point)
|
||||
// };
|
||||
// })
|
||||
// })
|
||||
// this.myChart.setOption({graphic});
|
||||
},
|
||||
onUpdateZoom(e) {;
|
||||
const option = this.myChart.getOption();
|
||||
const shapes = option.graphic;
|
||||
const elements = option.graphic[0].elements
|
||||
const graphic = echarts.util.map(elements, (item) => {
|
||||
return {
|
||||
position: this.myChart.convertToPixel('grid', item.data)
|
||||
};
|
||||
})
|
||||
|
||||
// const graphic = shapes.map(el => {
|
||||
// console.log(el)
|
||||
// const points = (el.elements||[]).map(el => { return el.point; });
|
||||
// return echarts.util.map(points, function (point, dataIndex) {
|
||||
// console.log(point, this.myChart.convertToPixel('grid', point))
|
||||
// return {
|
||||
// position: this.myChart.convertToPixel('grid', point)
|
||||
// };
|
||||
// })
|
||||
// })
|
||||
// this.myChart.setOption({graphic});
|
||||
this.myChart.setOption({graphic});
|
||||
},
|
||||
onClick(e) {
|
||||
switch(this.action) {
|
||||
case 'Plan':
|
||||
this.pixelExecCb(e, this.handleMarkPoint);
|
||||
break;
|
||||
if (this.action == 'Plan') {
|
||||
this.pixelExecCb(e, this.handleCreateMark);
|
||||
}
|
||||
},
|
||||
onContextMenu(e) {
|
||||
@ -169,7 +125,9 @@ export default {
|
||||
seriesId: e.seriesName.replace('run-', ''),
|
||||
depTime: e.dataIndex < length - 1? nxt[0] - value[0]: 0,
|
||||
runTime: e.dataIndex < length - 1? nxt[0] - value[0]: 0,
|
||||
stationCode: value[2]
|
||||
stationCode: value[2],
|
||||
_x: value[0],
|
||||
_y: value[1],
|
||||
}
|
||||
|
||||
if (e.dataIndex == length - 1 ||
|
||||
@ -197,27 +155,69 @@ export default {
|
||||
seriesId: e.seriesName.replace('run-', ''),
|
||||
depTime: e.dataIndex < length - 1? nxt[0] - value[0]: 0,
|
||||
runTime: e.dataIndex < length - 1? nxt[0] - value[0]: 0,
|
||||
stationCode: value[2]
|
||||
stationCode: value[2],
|
||||
_x: value[0],
|
||||
}
|
||||
|
||||
this.dragging = true;
|
||||
if (this.action == 'Translate') {
|
||||
this.handleCreateDrag(option, value);
|
||||
}
|
||||
}
|
||||
},
|
||||
clearMarks() {
|
||||
const option = this.myChart.getOption();
|
||||
const graphic = option.graphic;
|
||||
const index = graphic.findIndex(el => { return el.id == 'operate'});
|
||||
if (index >= 0) {
|
||||
graphic[index].elements = [];
|
||||
onMouseUP(e) {
|
||||
if (this.selected) {
|
||||
}
|
||||
},
|
||||
clearGraphic(labels) {
|
||||
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});
|
||||
},
|
||||
createMarkPoint(point, text) {
|
||||
createDragGraphicObj(point, dataIndex) {
|
||||
return {
|
||||
type: 'circle',
|
||||
subType: 'drag',
|
||||
position: this.myChart.convertToPixel('grid', point),
|
||||
data: [...point],
|
||||
shape: {
|
||||
cx: 0,
|
||||
cy: 0,
|
||||
r: 10
|
||||
},
|
||||
style: {
|
||||
fill: 'rgba(92,12,20,220.3)'
|
||||
},
|
||||
draggable: true,
|
||||
ondrag: echarts.util.curry(this.onPointDragging, dataIndex),
|
||||
onmousemove: echarts.util.curry(this.onShowTooltip, dataIndex),
|
||||
onmouseout: echarts.util.curry(this.onHideTooltip, dataIndex),
|
||||
z: 100
|
||||
}
|
||||
},
|
||||
createMarkPointObj(point) {
|
||||
return {
|
||||
type: 'group',
|
||||
subType: 'mark',
|
||||
z: 100,
|
||||
position: point,
|
||||
point,
|
||||
children: [
|
||||
{
|
||||
type: 'circle',
|
||||
z: 100,
|
||||
shape: {
|
||||
cx: 0,
|
||||
cy: 0,
|
||||
r: 5
|
||||
},
|
||||
style: {
|
||||
fill: 'rgba(0,0,0,0.3)'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'circle',
|
||||
z: 100,
|
||||
shape: {
|
||||
cx: 0,
|
||||
cy: 0,
|
||||
@ -227,52 +227,32 @@ export default {
|
||||
fill: 'rgba(0,0,0,0.3)'
|
||||
}
|
||||
}
|
||||
|
||||
// return {
|
||||
// type: 'group',
|
||||
// z: 100,
|
||||
// position: point,
|
||||
// point,
|
||||
// children: [
|
||||
// {
|
||||
// type: 'circle',
|
||||
// z: 100,
|
||||
// shape: {
|
||||
// cx: 0,
|
||||
// cy: 0,
|
||||
// r: 5
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'rgba(0,0,0,0.3)'
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'circle',
|
||||
// z: 100,
|
||||
// shape: {
|
||||
// cx: 0,
|
||||
// cy: 0,
|
||||
// r: 10
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'rgba(0,0,0,0.3)'
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
]
|
||||
}
|
||||
},
|
||||
handleMarkPoint(yObj, xVal, pointInPixel) {
|
||||
let myChart = this.myChart;
|
||||
handleCreateDrag(option, value) {
|
||||
const filters = option.graphic[0].elements.filter(el => { return el.subType != 'drag'});
|
||||
|
||||
filters.push(this.createDragGraphicObj(value))
|
||||
option.graphic[0].elements = filters;
|
||||
this.myChart.setOption(option, {notMerge: true});
|
||||
},
|
||||
handleCreateMark(option, yObj, xVal, pointInPixel) {
|
||||
const myChart = this.myChart;
|
||||
if (myChart) {
|
||||
let op = myChart.getOption();
|
||||
let graphic = op.graphic[0];
|
||||
if (graphic) {
|
||||
graphic.elements.push(this.createMarkPoint(pointInPixel, 'hello world'))
|
||||
myChart.setOption(op);
|
||||
if (graphic.elements.length == 1) {
|
||||
const graphic = option.graphic;
|
||||
const elements = graphic[0].elements;
|
||||
|
||||
elements.push(this.createMarkPointObj(pointInPixel))
|
||||
|
||||
myChart.setOption(option, {notMerge: true});
|
||||
|
||||
const filters = elements.filter(el => { return el.subType == 'mark'});
|
||||
|
||||
if (filters.length == 1) {
|
||||
this.createModel.startStationCode = yObj.code;
|
||||
this.createModel.startTime = timeFormat(xVal);
|
||||
} else if (graphic.elements.length >= 2) {
|
||||
} else if (filters.length >= 2) {
|
||||
this.createModel.endStationCode = yObj.code;
|
||||
this.handleCreate(this.createModel);
|
||||
}
|
||||
@ -280,4 +260,3 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -30,7 +30,6 @@ import { mapGetters } from 'vuex';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import { getStationList } from '@/api/runplan';
|
||||
import { getRpTools, addRpTrip, delRpTrip, justTripNoRunning, justTripNoStop} from '@/api/rpTools';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
import { getPublishMapInfo } from '@/api/jmap/map';
|
||||
|
||||
export default {
|
||||
@ -79,7 +78,12 @@ export default {
|
||||
{
|
||||
name: 'Plan',
|
||||
type: 'Plan'
|
||||
} ]
|
||||
},
|
||||
{
|
||||
name: 'Translate',
|
||||
type: 'Translate'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -180,7 +184,7 @@ export default {
|
||||
max: 0
|
||||
},
|
||||
graphic: [{
|
||||
id: 'operate',
|
||||
id: 'shape',
|
||||
elements: []
|
||||
}],
|
||||
series: [],
|
||||
@ -260,7 +264,6 @@ export default {
|
||||
this.$store.dispatch('rpTools/clear').then(() => {
|
||||
this.loadInitChart().then(() => {
|
||||
if (this.mapId) {
|
||||
loadMapDataById(this.mapId);
|
||||
getStationList(this.mapId).then(resp => {
|
||||
const stations = resp.data.filter(el => {
|
||||
return ['车辆段', '停车场'].findIndex(it => {
|
||||
@ -309,12 +312,13 @@ export default {
|
||||
const option = this.myChart.getOption();
|
||||
|
||||
option.series = [];
|
||||
option.graphic = [{ id: 'operate', elements: [] }];
|
||||
option.graphic[0].elements = [];
|
||||
console.log(option);
|
||||
this.kmRangeCoordMap = this.planConvert.convertStationsToMap(stations);
|
||||
this.pushModels(option.series, [this.planConvert.initializeYaxis(this.stations)]);
|
||||
this.pushModels(option.series, this.planConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { width: 0.5, color: '#000' }));
|
||||
|
||||
this.myChart.setOption(option, {notMerge: true});
|
||||
this.loadInitGraphic();
|
||||
} catch (error) {
|
||||
this.$messageBox(this.$t('error.loadingOperationGraphFailed') + this.$t('global.colon') + error.message);
|
||||
}
|
||||
@ -418,12 +422,13 @@ export default {
|
||||
handleBtnSelect(el, i) {
|
||||
this.active = i;
|
||||
this.action = el.type;
|
||||
this.clearGraphic(['drag', 'mark']);
|
||||
},
|
||||
handleCancle() {
|
||||
this.active = -1;
|
||||
this.action = '';
|
||||
this.selected = null;
|
||||
this.clearMarks();
|
||||
this.clearGraphic(['drag', 'mark']);
|
||||
},
|
||||
handleCreate(data) {
|
||||
if (this.myChart) {
|
||||
@ -437,7 +442,7 @@ export default {
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$message(error.message);
|
||||
this.clearMarks();
|
||||
this.clearGraphic(['mark']);
|
||||
})
|
||||
}
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user