diff --git a/src/ibp/ibpPan.js b/src/ibp/ibpPan.js index e129e83f3..c5804b570 100644 --- a/src/ibp/ibpPan.js +++ b/src/ibp/ibpPan.js @@ -24,6 +24,8 @@ class IbpPan { // 展示的画布大小 this.canvasSize = {}; + this.optsPan = {}; + this.initIbpPage(opts); } initIbpPage(opts) { @@ -98,6 +100,7 @@ class IbpPan { if (this.$options.disabled == true) { this.$mouseController.disable(); } else { + opts = Object.assign(opts, this.optsPan); this.$mouseController.enable(opts); } @@ -199,6 +202,13 @@ class IbpPan { this.$mouseController.setAllowDragging(true); } + setMoveOnMouseMove(data) { + this.$mouseController.setMoveOnMouseMove(data); + this.optsPan = { + moveOnMouseMove: data || false + }; + } + pullBack(payload) { if (payload.type === 'zoom') { const zrWidth = this.$ibpZr.getWidth(); @@ -283,6 +293,9 @@ class IbpPan { case this.events.DataZoom: this.$mouseController.on(this.events.DataZoom, cb, context); break; + case this.events.__Pan: + this.$mouseController.on(this.events.__Pan, this.optionsHandler); + break; } } } @@ -300,6 +313,9 @@ class IbpPan { case this.events.DataZoom: this.$mouseController.off(this.events.DataZoom, cb); break; + case this.events.__Pan: + this.$mouseController.off(this.events.__Pan, cb); + break; } } } diff --git a/src/ibp/mouseController.js b/src/ibp/mouseController.js index 26af6ceff..9a908d8b7 100644 --- a/src/ibp/mouseController.js +++ b/src/ibp/mouseController.js @@ -46,7 +46,7 @@ class MouseController extends Eventful { this.enable = function (opts) { opts = opts || {}; - this._moveOnMouseMove = opts.moveOnMouseMove || true; + this._moveOnMouseMove = opts.moveOnMouseMove || false; this._preventDefaultMouseMove = opts.preventDefaultMouseMove || true; this.disable(); @@ -83,6 +83,10 @@ class MouseController extends Eventful { this.isAllowDragging = data; } + setMoveOnMouseMove(data) { + this._moveOnMouseMove = data; + } + mousedown(e) { e.event.preventDefault(); e.event.stopPropagation(); @@ -232,6 +236,13 @@ class MouseController extends Eventful { } /** 处理左键拖动事件--- 图形移动 */ handleMouseMoveLeft(e, dx, dy, oldX, oldY) { + console.log(this._moveOnMouseMove); + if (this._dragging && this.eventTarget && this._moveOnMouseMove) { + if (( this.eventTarget._type == deviceType.Background)) { + this._preventDefaultMouseMove && eventTool.stop(e.event); + this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y }); + } + } if (!this._moveOnMouseMove || !this._dragging || !this.isAllowDragging) { return; } @@ -241,10 +252,7 @@ class MouseController extends Eventful { item.grouper.drift(dx, dy, e); }); } else if (this._dragging && this.eventTarget) { // 选中元素图形移动 - if (( this.eventTarget._type === deviceType.Background) || !this.isAllowDragging) { - this._preventDefaultMouseMove && eventTool.stop(e.event); - this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y }); - } else if (this.isAllowDragging) { + if (this.isAllowDragging && this.eventTarget.grouper) { this.eventTarget.grouper.drift(dx, dy, e); } } diff --git a/src/router/index_Common.js b/src/router/index_Common.js index c3a44a74e..d5404816d 100644 --- a/src/router/index_Common.js +++ b/src/router/index_Common.js @@ -281,7 +281,7 @@ export const publicAsyncRoute = [ }, { path: '/ibpShow', - computed: IbpShow, + component: IbpShow, hidden: true }, { diff --git a/src/views/ibp/ibpDraw/index.vue b/src/views/ibp/ibpDraw/index.vue index f567c60a6..d1f49460f 100644 --- a/src/views/ibp/ibpDraw/index.vue +++ b/src/views/ibp/ibpDraw/index.vue @@ -49,6 +49,7 @@ export default { mounted() { this.$refs.ibpPlate.show(); this.$refs.ibpPlate.drawIbpInit(); + this.$refs.ibpPlate.setMoveInit(true); }, beforeDestroy() { @@ -57,11 +58,13 @@ export default { ibpChange(stationCode) { this.$refs.ibpPlate.show(stationCode); this.$refs.ibpPlate.drawIbpInit(); + this.$refs.ibpPlate.setMoveInit(true); }, setIbpShow(data) { const newData = parser(data, {width: this.canvasWidth, height: this.canvasHeight}); this.$refs.ibpPlate.setIbp(newData, data); this.$refs.ibpPlate.drawIbpInit(); + this.$refs.ibpPlate.setMoveInit(true); }, setEmptyShow() { this.$nextTick(() => { // 执行一次 微任务 等待this.$ibp加载完成 diff --git a/src/views/ibp/ibpsystem/index.vue b/src/views/ibp/ibpsystem/index.vue index 6f23ee4f4..e4e620538 100644 --- a/src/views/ibp/ibpsystem/index.vue +++ b/src/views/ibp/ibpsystem/index.vue @@ -86,10 +86,14 @@ export default { } } }, - mounted() { - console.log(3333333); + async mounted() { this.setWindowSize(); this.initIbp(); + if (this.$route.query.loadAll && this.$route.query.stationCode) { + await this.show(this.$route.query.stationCode); + await this.setMoveInit(true); + this.showBackButton = false; + } }, beforeDestroy() { this.ibpDestroy(); @@ -220,6 +224,10 @@ export default { this.$ibp && this.$ibp.drawIbpInit(); this.showBackButton = false; }, + // 地图可拖拽 + setMoveInit(data) { + this.$ibp && this.$ibp.setMoveOnMouseMove(data); + }, // 初始化电子表时间 initClockTime(initTime) { this.$ibp.initClockTime(initTime); diff --git a/src/views/newMap/displayNew/demon/selectIbp.vue b/src/views/newMap/displayNew/demon/selectIbp.vue new file mode 100644 index 000000000..a6a0fc9d0 --- /dev/null +++ b/src/views/newMap/displayNew/demon/selectIbp.vue @@ -0,0 +1,130 @@ + + + diff --git a/src/views/newMap/jointTrainingNew/menuSchema.vue b/src/views/newMap/jointTrainingNew/menuSchema.vue index aef288483..195d53939 100644 --- a/src/views/newMap/jointTrainingNew/menuSchema.vue +++ b/src/views/newMap/jointTrainingNew/menuSchema.vue @@ -5,7 +5,7 @@ - + IBP盘 大屏 {{ $t('joinTraining.runGraphPreview') }} @@ -31,10 +32,12 @@ import { getByGroupStationList } from '@/api/jmap/map'; import { getEveryDayRunPlanNew } from '@/api/simulation'; import { getSessionStorage } from '@/utils/auth'; import JoinRunPlanView from '@/views/newMap/displayNew/demon/runPlanView'; +import SelectIbp from '@/views/newMap/displayNew/demon/selectIbp'; export default { name: 'MenuDemonSchema', components:{ - JoinRunPlanView + JoinRunPlanView, + SelectIbp }, props: { group: { @@ -203,12 +206,15 @@ export default { }, // 点击ibp预览 goIbp() { + // this.$refs.selectIbp.doShow(); const routeData = this.$router.resolve({ path:`/ibpShow`, query:{ lineCode: this.$route.query.lineCode, - mapId:this.$route.query.mapId, - group:this.$route.query.group + mapId: this.$route.query.mapId, + group: this.$route.query.group, + stationCode: 'Station25166', + loadAll: true } }); window.open(routeData.href, '_blank', 'noopener noreferrer');