修改代码

This commit is contained in:
lVAL 2020-10-15 18:53:45 +08:00
parent fe93ecebe2
commit df1fcc8f82
5 changed files with 126 additions and 141 deletions

View File

@ -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 &&

View File

@ -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/];

View File

@ -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,

View File

@ -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,57 +227,36 @@ 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);
}
}
}
}
}
}

View File

@ -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']);
})
}
},