diff --git a/src/assets/ibp_images/alarm.png b/src/assets/ibp_images/alarm.png new file mode 100644 index 000000000..996d2e957 Binary files /dev/null and b/src/assets/ibp_images/alarm.png differ diff --git a/src/assets/ibp_images/blue_button.png b/src/assets/ibp_images/blue_button.png new file mode 100644 index 000000000..8496a0880 Binary files /dev/null and b/src/assets/ibp_images/blue_button.png differ diff --git a/src/assets/ibp_images/blue_button_on.png b/src/assets/ibp_images/blue_button_on.png new file mode 100644 index 000000000..2e20c9c75 Binary files /dev/null and b/src/assets/ibp_images/blue_button_on.png differ diff --git a/src/assets/ibp_images/gray_button.png b/src/assets/ibp_images/gray_button.png new file mode 100644 index 000000000..d7fba2e1d Binary files /dev/null and b/src/assets/ibp_images/gray_button.png differ diff --git a/src/assets/ibp_images/gray_button_on.png b/src/assets/ibp_images/gray_button_on.png new file mode 100644 index 000000000..d86ba60cf Binary files /dev/null and b/src/assets/ibp_images/gray_button_on.png differ diff --git a/src/assets/ibp_images/green_button.png b/src/assets/ibp_images/green_button.png new file mode 100644 index 000000000..f64698b74 Binary files /dev/null and b/src/assets/ibp_images/green_button.png differ diff --git a/src/assets/ibp_images/green_button_on.png b/src/assets/ibp_images/green_button_on.png new file mode 100644 index 000000000..643febaf4 Binary files /dev/null and b/src/assets/ibp_images/green_button_on.png differ diff --git a/src/assets/ibp_images/red_button.png b/src/assets/ibp_images/red_button.png index 4dbb2bc6a..aee49d0dd 100644 Binary files a/src/assets/ibp_images/red_button.png and b/src/assets/ibp_images/red_button.png differ diff --git a/src/assets/ibp_images/red_button_on.png b/src/assets/ibp_images/red_button_on.png index bcd9f6dd2..57eae1f12 100644 Binary files a/src/assets/ibp_images/red_button_on.png and b/src/assets/ibp_images/red_button_on.png differ diff --git a/src/assets/ibp_images/rotate_black.png b/src/assets/ibp_images/rotate_black.png new file mode 100644 index 000000000..cc24ab15f Binary files /dev/null and b/src/assets/ibp_images/rotate_black.png differ diff --git a/src/assets/ibp_images/rotate_red.png b/src/assets/ibp_images/rotate_red.png new file mode 100644 index 000000000..0e7994d2d Binary files /dev/null and b/src/assets/ibp_images/rotate_red.png differ diff --git a/src/assets/ibp_images/yellow_button.png b/src/assets/ibp_images/yellow_button.png new file mode 100644 index 000000000..d6d86c3cc Binary files /dev/null and b/src/assets/ibp_images/yellow_button.png differ diff --git a/src/assets/ibp_images/yellow_button_on.png b/src/assets/ibp_images/yellow_button_on.png new file mode 100644 index 000000000..2d2880b55 Binary files /dev/null and b/src/assets/ibp_images/yellow_button_on.png differ diff --git a/src/i18n/langs/en/map.js b/src/i18n/langs/en/map.js index 3d239d6f4..477cfca52 100644 --- a/src/i18n/langs/en/map.js +++ b/src/i18n/langs/en/map.js @@ -54,6 +54,7 @@ export default { trainWindow: 'train window', line: 'line', text: 'text', + button: 'button', mapName: 'Name of the map:', skinName: 'Skin style:', @@ -189,6 +190,8 @@ export default { linkLp: 'Link Start point coordinates:', linkRp: 'Link End point coordinates:', + linePoint: 'point:', + rulesChange: 'The rules change', splitMerge: 'Split/merge', linkSet: 'The Link set', diff --git a/src/i18n/langs/zh/map.js b/src/i18n/langs/zh/map.js index d831c3238..a37d4868e 100644 --- a/src/i18n/langs/zh/map.js +++ b/src/i18n/langs/zh/map.js @@ -48,6 +48,7 @@ export default { zcZoneControl: 'zc区域控制', temporaryLimit: '全线临时限速', lcControl: 'Lc控制', + buttonControl: '按钮', image: '图片', station: '车站', controlMode: '控制模式', @@ -58,6 +59,7 @@ export default { trainWindow: '车次窗', line: '线条', text: '文字', + button: '按钮', mapName: '地图名称:', skinName: '皮肤:', @@ -76,6 +78,7 @@ export default { lineCoding: '线条编码:', lineType: '线条类型:', lineWidth: '线条宽度:', + linePoint: '坐标:', segmentCoordinates: '区段显示坐标:', publishMapCreation: '从发布地图创建', @@ -133,6 +136,8 @@ export default { failedCreateSignal: '创建自动信号失败', automaticSignalUpdateSucceeded: '更新自动信号成功！', automaticSignalUpdateFailed: '更新自动信号失败', + interconnected: '联锁控名称', + buttonType: '所属类型', stationName: '车站名称:', @@ -254,7 +259,7 @@ export default { isCurve: '是否曲线:', physicalSegmentName: '物理区段名称:', - directionType: '形式方向:', + directionType: '行驶方向:', leftOrRight: '左右位置:', positionType: '上下位置:', @@ -312,7 +317,7 @@ export default { zzkContent: '站中控内容:', stationControlZok: '中控', - stationstandName: '选择车站名称:', + stationstandName: '所属车站:', stationstandDirection: '站台方向:', stationstandHasDoor: '是否显示屏蔽门:', stationstandNameColon: '站台名称:', @@ -341,6 +346,7 @@ export default { delayUnlockPosition: '延迟解锁坐标:', trainWindowPoints: '车次窗坐标:', textPoints: '坐标:', + buttonText: '内容', textCode: '文字编码:', textContent: '文本内容:', diff --git a/src/i18n/langs/zh/router.js b/src/i18n/langs/zh/router.js index 747e66c0e..b6cac578e 100644 --- a/src/i18n/langs/zh/router.js +++ b/src/i18n/langs/zh/router.js @@ -54,5 +54,7 @@ export default { userTrainingManage: '用户实训管理', userExamManage: '用户考试管理', userSimulationManage: '用户仿真管理', - existingSimulation: '存在仿真管理' + existingSimulation: '存在仿真管理', + + ibpDraw: 'Ibp盘绘制' }; diff --git a/src/i18n/langs/zh/rules.js b/src/i18n/langs/zh/rules.js index 488df975a..a72792f3f 100644 --- a/src/i18n/langs/zh/rules.js +++ b/src/i18n/langs/zh/rules.js @@ -252,6 +252,9 @@ export default { enterScale: '请输入缩放比例', enterXOffset: '请输入X偏移', - enterYOffset: '请输入Y偏移' + enterYOffset: '请输入Y偏移', + + pleaseSelectButtonType: '请选择按钮类型', + pleaseSelectButtonContent: '请输入内容' }; diff --git a/src/ibp/constant/deviceRender.js b/src/ibp/constant/deviceRender.js index f304fe19c..ef76c84d6 100644 --- a/src/ibp/constant/deviceRender.js +++ b/src/ibp/constant/deviceRender.js @@ -2,8 +2,8 @@ import deviceType from './deviceType'; const deviceRender = {}; -/** Text渲染配置*/ -deviceRender[deviceType.Text] = { +/** IbpText渲染配置*/ +deviceRender[deviceType.IbpText] = { zlevel: 1 }; diff --git a/src/ibp/constant/deviceType.js b/src/ibp/constant/deviceType.js index 18fb9e2be..90d429fc8 100644 --- a/src/ibp/constant/deviceType.js +++ b/src/ibp/constant/deviceType.js @@ -1,5 +1,5 @@ const deviceType = { - Text: 'Text', + IbpText: 'IbpText', SquareButton: 'SquareButton', WarnButton: 'WarnButton', Arrow: 'Arrow', diff --git a/src/ibp/ibpPan.js b/src/ibp/ibpPan.js index a09561fee..f1c6f5a17 100644 --- a/src/ibp/ibpPan.js +++ b/src/ibp/ibpPan.js @@ -6,7 +6,7 @@ import MouseController from './mouseController'; import Painter from './painter'; import deviceState from '../jmap/constant/deviceState'; import deviceType from './constant/deviceType'; -import {calculateDCenter, createBoundingRect, deviceFactory} from './utils/parser'; +import {calculateDCenter, createBoundingRect, modelFactory} from './utils/parser'; const renderer = 'canvas'; const devicePixelRatio = 1; @@ -34,6 +34,8 @@ class IbpPan { const height = opts.config.height; this.$ibpZr = zrender.init(opts.dom, Object.assign({ renderer, devicePixelRatio, width, height }, opts.config)); this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {}), (dataZoom) => { this.$mouseController.trigger(this.events.DataZoom, dataZoom); }); // 缩放 + this.$mouseController = new MouseController(this); + this.$mouseController.enable(); this.$painter = new Painter(this); this.$painter.updateZrSize({width: this.$ibpZr.getWidth(), height: this.$ibpZr.getHeight()}); @@ -41,9 +43,6 @@ class IbpPan { this.optionsHandler = this.setOptions.bind(this); - this.$mouseController = new MouseController(this); - this.$mouseController.enable(); - this.$mouseController.on(this.events.__Pan, this.optionsHandler); this.$mouseController.on(this.events.__Zoom, this.optionsHandler); @@ -123,12 +122,12 @@ class IbpPan { } render(list) { + console.log('-*-*-*-*-', list); (list || []).forEach(elem => { const code = elem.code; const type = elem._type; - const oDevice = this.ibpDevice[code] || deviceFactory(type, elem); - const nDevice = Object.assign(oDevice || {}, elem); - this.dataSync(nDevice); + const oDevice = this.ibpDevice[code] || {instance: null, event: null, model: modelFactory(type, elem)}; + const nDevice = Object.assign(oDevice.model || {}, elem); this.$painter.delete(oDevice); if (!elem._dispose) { this.ibpDevice[code] = nDevice; @@ -140,7 +139,7 @@ class IbpPan { } // 中间处理 - hookHandle(oDevice, elem) { + hookHandle(model, elem) { const code = elem.code; const type = elem._type; // 如果是延时计时，需要保存计数值到全局 @@ -153,8 +152,8 @@ class IbpPan { localStore(code, val); } for (var prop in elem) { - if (elem[prop] != oDevice[prop]) { - Object.assign(oDevice, elem); + if (elem[prop] != model[prop]) { + Object.assign(model, elem); return true; } } @@ -169,7 +168,7 @@ class IbpPan { if (elem.dispose) { this.$painter.delete(oDevice); } else { - if (this.hookHandle(oDevice, elem)) { + if (this.hookHandle(oDevice.model, elem)) { this.$painter.update(oDevice); } } @@ -178,6 +177,12 @@ class IbpPan { if (this.methods.stateUpdate instanceof Function) { this.methods.stateUpdate(list); } } + drawIbpInit() { + (Object.keys(this.ibpDevice) || []).forEach(elem => { + this.$painter.drawIbp(this.ibpDevice[elem]); + }); + } + pullBack(payload) { if (payload.type === 'zoom') { const zrWidth = this.$ibpZr.getWidth(); @@ -196,33 +201,6 @@ class IbpPan { return payload || {}; } - dataSync(model) { - var prop = null; - var type = model._type; - var code = model.code; - - switch (type) { - case deviceType.Link: prop = 'linkList'; break; - } - - const list = this.data[prop] || []; - const idex = list.findIndex(elem => { return elem.code == code; }); - if (list) { - if (model._dispose) { - idex >= 0 && list.splice(idex, 1); - } else { - const elem = list[idex]; - if (elem) { - Object.keys(elem).forEach(key => { - elem[key] = model[key]; - }); - } else { - list.push(Object.assign({}, model)); - } - } - } - } - getZr() { return this.$ibpZr; } @@ -250,7 +228,6 @@ class IbpPan { refresh() { this.$painter.refresh(); } - clear() { this.skinCode = ''; this.style = {}; diff --git a/src/ibp/painter.js b/src/ibp/painter.js index 532276e83..126c11508 100644 --- a/src/ibp/painter.js +++ b/src/ibp/painter.js @@ -59,11 +59,12 @@ class Painter { * @param {*} device */ add(device) { + device = Object.assign(device, { event: this.$ibp.$mouseController }); const instance = shapefactory(device, this.$ibp); if (instance) { device.instance = instance; this.$transformHandle.transformView(instance); - this.ibpInstanceLevel[device._type].add(instance); + this.ibpInstanceLevel[device.model._type].add(instance); } } @@ -74,7 +75,7 @@ class Painter { delete(device) { const instance = device.instance; if (instance) { - this.ibpInstanceLevel[device._type].remove(instance); + this.ibpInstanceLevel[device.model._type].remove(instance); } } @@ -84,7 +85,7 @@ class Painter { */ update(device) { if (device) { - if (device._dispose) { + if (device.model._dispose) { this.delete(device); } else { const instance = device.instance; @@ -95,6 +96,18 @@ class Painter { } } + /** + * 绘制ipb时，更改draggable 和注册事件 + */ + drawIbp(device) { + if (device) { + const instance = device.instance; + if (instance) { + instance.setDraggable(); + } + } + } + /** * 更新transform变化 * @param {*} opt diff --git a/src/ibp/shape/alarm.js b/src/ibp/shape/alarm.js new file mode 100644 index 000000000..cc09557d8 --- /dev/null +++ b/src/ibp/shape/alarm.js @@ -0,0 +1,52 @@ +import Group from 'zrender/src/container/Group'; +import Image from 'zrender/src/graphic/Image'; +import alarmpic from '@/assets/ibp_images/alarm.png'; + +export default class alarm extends Group { + + constructor(device) { + super(); + this.model = device.model; + this.zlevel = device.model.zlevel; + this.create(); + } + + create() { + const model = this.model; + this.imageBg = new Image({ + zlevel: this.zlevel, + draggable: model.draggable || false, + style: { + image: alarmpic, + x: model.point.x, + y: model.point.y, + width: 70, + height: 74 + } + }); + this.add(this.imageBg); + } + + setDraggable() { + this.arrow.attr('draggable', true); + this.createMouseEvent(); + } + createMouseEvent() { + this.on('mousedown', this.mousedown, this); + this.on('mousemove', this.mousemove, this); + this.on('mouseup', this.mouseup, this); + } + + mousedown(e) { + this.event.disable(); + } + + mousemove(e) { + } + + mouseup(e) { + this.event.enable(); + this.model.point.x = this.model.point.x + e.offsetX; + this.model.point.y = this.model.point.y + e.offsetY; + } +} diff --git a/src/ibp/shape/arrow.js b/src/ibp/shape/arrow.js index 00d133fba..166bc364b 100644 --- a/src/ibp/shape/arrow.js +++ b/src/ibp/shape/arrow.js @@ -1,22 +1,24 @@ import Polygon from 'zrender/src/graphic/shape/Polygon'; import Group from 'zrender/src/container/Group'; -import {arrow} from '../../jmap/shape/utils/ShapePoints'; +import {arrow} from '@/jmap/shape/utils/ShapePoints'; +// import { updateIbpData } from '@/ibp/utils/parser'; class Arrow extends Group { - constructor(model) { + constructor(device) { super(); - this.model = model; + this.event = device.event; + this.model = device.model; this.create(); } create() { const model = this.model; - const point = arrow(this.model.point.x, this.model.point.y, this.model.length, 10); this.arrow = new Polygon({ zlevel: model.zlevel, z: model.z, + draggable: model.draggable || false, shape: { - points: point + points: arrow(this.model.point.x, this.model.point.y, this.model.length, 10) }, style: { stroke: model.stroke, @@ -25,13 +27,55 @@ class Arrow extends Group { } }); this.add(this.arrow); + this.getOrientate(); + } + + getOrientate() { + switch (this.model.orientation) { + case 'left': { + this.transformRotation(0); + break; + } + case 'right': { + this.transformRotation(180); + break; + } + } + } + + // 整体旋转箭头 + transformRotation(rotate) { + this.arrow.origin = [this.model.point.x, this.model.point.y]; + this.arrow.rotation = Math.PI / 180 * Number(rotate); + this.arrow.dirty(); } // 箭头颜色 setColor(color) { this.arrow.setStyle('fill', color); } - + setDraggable() { + this.arrow.attr('draggable', true); + this.createMouseEvent(); + } + createMouseEvent() { + this.on('mousedown', this.mousedown, this); + this.on('mousemove', this.mousemove, this); + this.on('mouseup', this.mouseup, this); + } + mousedown() { + this.event.disable(); + console.log('鼠标按下'); + } + mousemove() { + console.log('鼠标移动'); + } + mouseup(e) { + this.event.enable(); + this.model.point.x = this.model.point.x + e.offsetX; + this.model.point.y = this.model.point.y + e.offsetY; + console.log('鼠标抬起', this.model); + } } export default Arrow; diff --git a/src/ibp/shape/background.js b/src/ibp/shape/background.js index dc75fb541..3e2708ad3 100644 --- a/src/ibp/shape/background.js +++ b/src/ibp/shape/background.js @@ -4,10 +4,10 @@ import Rect from 'zrender/src/graphic/shape/Rect'; import ibpBg from '@/assets/ibp_images/ibp_bg.png'; export default class background extends Group { - constructor(model) { + constructor(device) { super(); - this.model = model; - this.zlevel = model.zlevel; + this.model = device.model; + this.zlevel = device.model.zlevel; this.z = 1; this.create(); } @@ -47,4 +47,6 @@ export default class background extends Group { this.tailorRect.setShape('x', x-opt.offsetX); this.tailorRect.setShape('y', y-opt.offsetY); } + setDraggable() { + } } diff --git a/src/ibp/shape/button.js b/src/ibp/shape/button.js index 79bd902d0..050fc0a28 100644 --- a/src/ibp/shape/button.js +++ b/src/ibp/shape/button.js @@ -1,163 +1,120 @@ import Group from 'zrender/src/container/Group'; import Image from 'zrender/src/graphic/Image'; -// import Eventful from 'zrender/src/mixin/Eventful'; - -import * as eventTool from 'zrender/src/core/event'; - -import buttonPic from '@/assets/ibp_images/red_button.png'; -import buttonPicOn from '@/assets/ibp_images/red_button_on.png'; +import redButtonPic from '@/assets/ibp_images/red_button.png'; +import redButtonPicOn from '@/assets/ibp_images/red_button_on.png'; +import greenButtonPicOn from '@/assets/ibp_images/green_button_on.png'; +import greenButtonPic from '@/assets/ibp_images/green_button.png'; +import blueButtonPic from '@/assets/ibp_images/blue_button.png'; +import blueButtonPicOn from '@/assets/ibp_images/blue_button_on.png'; +import yellowButtonPic from '@/assets/ibp_images/yellow_button.png'; +import yellowButtonPicOn from '@/assets/ibp_images/yellow_button_on.png'; +import grayButtonPic from '@/assets/ibp_images/gray_button.png'; +import grayButtonPicOn from '@/assets/ibp_images/gray_button_on.png'; export default class button extends Group { - constructor(model) { + static colors = new Map([ + ['red_on', [redButtonPicOn]], + ['red_off', [redButtonPic]], + ['green_on', [greenButtonPicOn]], + ['green_off', [greenButtonPic]], + ['blue_on', [blueButtonPicOn]], + ['blue_off', [blueButtonPic]], + ['yellow_on', [yellowButtonPicOn]], + ['yellow_off', [yellowButtonPic]], + ['gray_on', [grayButtonPicOn]], + ['gray_off', [grayButtonPic]] + ]); + constructor(device) { super(); - this.model = model; - this.zlevel = model.zlevel; - this.z = model.z; + this.model = device.model; + this.zlevel = device.model.zlevel; this.create(); - this.createMouseEvent(); } create() { const model = this.model; this.imageBg = new Image({ zlevel: this.zlevel, - z: this.z, + draggable: model.draggable || false, style: { - image: model.status === '01' ? buttonPic : buttonPicOn, - x: this.model.point.x, - y: this.model.point.y, - width: this.model.width, - height: this.model.height + image: this.getImagePic(), + x: model.point.x, + y: model.point.y, + width: 70, + height: 80 } }); this.add(this.imageBg); } + getImagePic() { + const color = button.colors.get(`${this.model.color}_${this.model.status}`); + return color[0]; + } + + setDraggable() { + this.arrow.attr('draggable', true); + this.createMouseEvent(); + } + createMouseEvent() { + this.on('mousedown', this.mousedown, this); + this.on('mousemove', this.mousemove, this); + this.on('mouseup', this.mouseup, this); + } + // 设置按钮状态 setState(model) { switch (model.status) { - case '01': this.close(); break; // 关闭 - case '02': this.open(); break; // 开放 + case 'on': { + // 关闭 + this.close(); + this.model.status='on'; + break; + } + case 'off': { + // 开放 + this.open(); + this.model.status='off'; + break; + } } } - // 绑定按钮事件 - createMouseEvent() { - this.model.isDraging=true; - if (this.model.isDraging) { - // 按钮拖拽事件监听 - this.imageBg.on('mousedown', (e) => { - if (eventTool.notLeftMouse(e)) { - return; - } - eventTool.stop(e.event); - var x = e.offsetX; - var y = e.offsetY; - this._x = x; - this._y = y; - this._dragginger = true; - }); - this.imageBg.on('mousemove', (e) => { - // !this._moveOnMouseMove || - if (eventTool.notLeftMouse(e) || !this._dragginger) { - return; - } - // eventTool.stop(e.event); - const oldX = this._x; - const oldY = this._y; - const dx = e.offsetX - oldX; - const dy = e.offsetY - oldY; - this._x = e.offsetX; - this._y = e.offsetY; - debugger; - // this.imageBg.preventDefaultMouseMove && - eventTool.stop(e.event); - // debugger; - this.imageBg.setStyle({x: oldX+dx, y: oldY+dy }); - }); - - this.imageBg.on('mouseup', (e) => { - if (!eventTool.notLeftMouse(e)) { - this._dragginger = false; - } - }); - - } else { - // 按钮的点击监听 - this.imageBg.on('click', (e) => { - switch (this.model.status) { - case '01': { - this.open(); - this.model.status='02'; - break; - } - case '02': { - this.close(); - this.model.status='01'; - break; - } - } - }); + onclick() { + if (!this.model.draggable) { + switch (this.model.status) { + case 'off': { + this.open(); + this.model.status='on'; + break; + } + case 'on': { + this.close(); + this.model.status='off'; + break; + } + } } } -// if (this.model.isDraging) { -// // this.mouseEvent = new EMouse(this); -// // this.add(this.mouseEvent); -// this.imageBg.on('mousedown', (e) => { -// // debugger; -// if (eventTool.notLeftMouse(e)) { -// return; -// } -// var x = e.offsetX; -// var y = e.offsetY; -// this._x = x; -// this._y = y; -// this._dragging = true; -// }); -// this.imageBg.on('mousemove', (e) => { -// if (eventTool.notLeftMouse(e) || !this._moveOnMouseMove ||!this._dragging) { -// return; -// } -// const oldX = this._x; -// const oldY = this._y; -// const dx = e.offsetX - oldX; -// const dy = e.offsetY - oldY; -// this._x = e.offsetX; -// this._y = e.offsetY; -// debugger; -// this.imageBg.preventDefaultMouseMove && eventTool.stop(e.event); -// debugger; -// this.imageBg.setStyle({x: dx, y: dy}); -// // this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y }); - -// }); -// this.on('mouseup', (e) => { }); -// } -// else { -// this.on('mousedown', (e) => { this.mouseEvent.mouseout(e); }); -// // this.on('mousemove', (e) => { this.mouseEvent.mouseover(e); }); -// this.on('mouseup', (e) => { this.mouseEvent.mouseover(e); }); -// } - + mousedown(e) { + this.event.disable(); + } + mousemove(e) { + } + mouseup(e) { + this.event.enable(); + this.model.point.x = this.model.point.x + e.offsetX; + this.model.point.y = this.model.point.y + e.offsetY; + } // 关闭 close() { - this.imageBg.setStyle({image: buttonPic}); + const color = button.colors.get(`${this.model.color}_off`); + this.imageBg.setStyle({image: color[0]}); } // 开放 open() { - this.imageBg.setStyle({image: buttonPicOn}); - } - - getShapeTipPoint() { - if (this.imageBg) { - var distance = 2; - var rect = this.imageBg.getBoundingRect(); - return { - x: rect.x + rect.width / 2, - y: rect.y - distance - }; - } - return null; + const color = button.colors.get(`${this.model.color}_on`); + this.imageBg.setStyle({image: color[0]}); } } diff --git a/src/ibp/shape/circularLamp.js b/src/ibp/shape/circularLamp.js index 38f6bc778..de3f8e6c0 100644 --- a/src/ibp/shape/circularLamp.js +++ b/src/ibp/shape/circularLamp.js @@ -1,13 +1,13 @@ import Group from 'zrender/src/container/Group'; import Circle from 'zrender/src/graphic/shape/Circle'; -import MouseController from '../mouseController'; export default class CircularLamp extends Group { - constructor(model) { + constructor(device) { super(); - this.model = model; - this.zlevel = model.zlevel; - this.z = model.z; + this.model = device.model; + this.event = device.event; + this.zlevel = device.model.zlevel; + this.z = device.model.z; this.create(); } @@ -15,6 +15,7 @@ export default class CircularLamp extends Group { this.lamp = new Circle({ zlevel: this.zlevel, z: this.z, + draggable: this.model.draggable||false, shape: { cx: this.model.point.x, cy: this.model.point.y, @@ -30,4 +31,24 @@ export default class CircularLamp extends Group { setCircularLampColor(color) { this.lamp.setStyle('fill', color); } + setDraggable() { + this.lamp.attr('draggable', true); + this.createMouseEvent(); + } + createMouseEvent() { + this.on('mousedown', this.mousedown, this); + this.on('mousemove', this.mousemove, this); + this.on('mouseup', this.mouseup, this); + } + mousedown() { + this.event.disable(); + console.log('鼠标按下'); + } + mousemove() { + console.log('鼠标移动'); + } + mouseup() { + this.event.enable(); + console.log('鼠标抬起'); + } } diff --git a/src/ibp/shape/element/textName.js b/src/ibp/shape/element/textName.js deleted file mode 100644 index fa743f051..000000000 --- a/src/ibp/shape/element/textName.js +++ /dev/null @@ -1,25 +0,0 @@ -// import Group from 'zrender/src/container/Group'; -import Text from 'zrender/src/graphic/Text'; - -/** 名称元素*/ -export default function ETextName(model) { - const TextName = new Text({ - zlevel: model.zlevel, - z: model.z, - silent: model.silent || false, - style: { - x: model.x, - y: model.y, - fontWeight: model.fontWeight, - fontSize: model.fontSize, - fontFamily: model.fontFamily, - text: model.text, - textStrokeWidth: model.textStrokeWidth, - textFill: model.textFill, - textAlign: model.textAlign, - textPosition: model.textPosition || 'inside', - textVerticalAlign: model.textVerticalAlign || null - } - }); - return TextName; -} diff --git a/src/ibp/shape/factory.js b/src/ibp/shape/factory.js index 3c9a1732a..ad469c01f 100644 --- a/src/ibp/shape/factory.js +++ b/src/ibp/shape/factory.js @@ -1,15 +1,17 @@ import Arrow from './arrow'; import deviceType from '../constant/deviceType'; import Background from './background'; -import CircularLamp from './circularLamp' +import CircularLamp from './circularLamp'; +import IbpText from './ibpText'; const ibpShape = {}; ibpShape[deviceType.Arrow] = Arrow; ibpShape[deviceType.Background] = Background; ibpShape[deviceType.CircularLamp] = CircularLamp; +ibpShape[deviceType.IbpText] = IbpText; function shapefactory(device, ibp) { - const type = device._type; + const type = device.model._type; const shape = ibpShape[type]; if (shape instanceof Function) { // eslint-disable-next-line diff --git a/src/ibp/shape/ibpText.js b/src/ibp/shape/ibpText.js new file mode 100644 index 000000000..3322bce34 --- /dev/null +++ b/src/ibp/shape/ibpText.js @@ -0,0 +1,60 @@ +import Group from 'zrender/src/container/Group'; +import Text from 'zrender/src/graphic/Text'; +import { updateIbpData } from '@/ibp/utils/parser'; + +export default class button extends Group { + constructor(device) { + super(); + this.model = device.model; + this.event = device.event; + this.zlevel = device.model.zlevel; + this.z = device.model.z; + this.create(); + } + create() { + const model = this.model; + this.textName = new Text({ + zlevel: model.zlevel, + z: model.z, + silent: model.silent || false, + draggable: model.draggable || false, + style: { + x: model.x, + y: model.y, + fontWeight: model.fontWeight, + fontSize: model.fontSize, + fontFamily: model.fontFamily, + text: model.context, + textStrokeWidth: model.textStrokeWidth, + textFill: model.textFill, + textAlign: model.textAlign, + textPosition: model.textPosition || 'inside', + textVerticalAlign: model.textVerticalAlign || null + } + }); + this.add(this.textName); + } + setDraggable() { + this.textName.attr('draggable', true); + this.createMouseEvent(); + } + createMouseEvent() { + this.on('mousedown', this.mousedown, this); + this.on('mousemove', this.mousemove, this); + this.on('mouseup', this.mouseup, this); + } + mousedown() { + this.event.disable(); + console.log('鼠标按下'); + } + mousemove() { + console.log('鼠标移动'); + } + mouseup(e) { + this.event.enable(); + this.model.x = this.model.x + e.offsetX; + this.model.y = this.model.y + e.offsetY; + console.log('鼠标抬起', this.model); + updateIbpData(this.model, 'update'); + } +} diff --git a/src/ibp/shape/rotateTip.js b/src/ibp/shape/rotateTip.js new file mode 100644 index 000000000..5c1540487 --- /dev/null +++ b/src/ibp/shape/rotateTip.js @@ -0,0 +1,68 @@ +import Group from 'zrender/src/container/Group'; +import Image from 'zrender/src/graphic/Image'; +import rotateBlack from '@/assets/ibp_images/rotate_black.png'; +import rotateRed from '@/assets/ibp_images/rotate_red.png'; + +export default class rotateTip extends Group { + + constructor(device) { + super(); + this.model = device.model; + this.zlevel = device.model.zlevel; + this.create(); + } + + create() { + const model = this.model; + this.imageBg = new Image({ + zlevel: this.zlevel, + draggable: model.draggable || false, + style: { + image: this.getRotateColor(), + x: model.point.x, + y: model.point.y, + width: 70, + height: 74 + } + }); + this.add(this.imageBg); + } + + getRotateColor() { + if (this.model.color) { + switch (this.model.color) { + case 'black': { + return rotateBlack; + } + case 'red': { + return rotateRed; + } + } + } else { + return rotateBlack; + } + } + + setDraggable() { + this.arrow.attr('draggable', true); + this.createMouseEvent(); + } + createMouseEvent() { + this.on('mousedown', this.mousedown, this); + this.on('mousemove', this.mousemove, this); + this.on('mouseup', this.mouseup, this); + } + + mousedown(e) { + this.event.disable(); + } + + mousemove(e) { + } + + mouseup(e) { + this.event.enable(); + this.model.point.x = this.model.point.x + e.offsetX; + this.model.point.y = this.model.point.y + e.offsetY; + } +} diff --git a/src/ibp/utils/parser.js b/src/ibp/utils/parser.js index 049c8b137..7f3aa3ee4 100644 --- a/src/ibp/utils/parser.js +++ b/src/ibp/utils/parser.js @@ -28,13 +28,13 @@ export function calculateDCenter(viewRect, zrbound) { return { dx: dx, dy: dy }; } -export function deviceFactory(type, elem) { - return Object.assign({ _type: type }, deviceRender[type], elem); +export function modelFactory(type, elem) { + return Object.assign(elem, { _type: type }, deviceRender[type]); } -export function createDevice(type, model, propConvert) { - const device = deviceFactory(type, model); - return propConvert ? propConvert.initPrivateProps(device) : device; +export function createModel(type, model, propConvert) { + const tempModel = modelFactory(type, model); + return { instance: null, event: null, model: propConvert ? propConvert.initPrivateProps(tempModel) : tempModel }; } export function parser(data, config) { @@ -44,33 +44,33 @@ export function parser(data, config) { if (data) { Object.assign(data.background, config); - ibpDevice[data.background.code] = createDevice(deviceType.Background, data.background, propConvert); + ibpDevice[data.background.code] = createModel(deviceType.Background, data.background, propConvert); zrUtil.each(data.textList || [], elem => { - ibpDevice[elem.code] = createDevice(deviceType.Text, elem, propConvert); + ibpDevice[elem.code] = createModel(deviceType.IbpText, elem, propConvert); }, this); zrUtil.each(data.squareButtonList || [], elem => { - ibpDevice[elem.code] = createDevice(deviceType.SquareButton, elem, propConvert); + ibpDevice[elem.code] = createModel(deviceType.SquareButton, elem, propConvert); }, this); zrUtil.each(data.circularLampList || [], elem => { - ibpDevice[elem.code] = createDevice(deviceType.CircularLamp, elem, propConvert); + ibpDevice[elem.code] = createModel(deviceType.CircularLamp, elem, propConvert); }, this); zrUtil.each(data.warnButtonList || [], elem => { - ibpDevice[elem.code] = createDevice(deviceType.WarnButton, elem, propConvert); + ibpDevice[elem.code] = createModel(deviceType.WarnButton, elem, propConvert); }, this); zrUtil.each(data.arrowList || [], elem => { - ibpDevice[elem.code] = createDevice(deviceType.Arrow, elem, propConvert); + ibpDevice[elem.code] = createModel(deviceType.Arrow, elem, propConvert); }, this); zrUtil.each(data.rotatingButtonList || [], elem => { - ibpDevice[elem.code] = createDevice(deviceType.RotatingButton, elem, propConvert); + ibpDevice[elem.code] = createModel(deviceType.RotatingButton, elem, propConvert); }, this); zrUtil.each(data.tipList || [], elem => { - ibpDevice[elem.code] = createDevice(deviceType.Tip, elem, propConvert); + ibpDevice[elem.code] = createModel(deviceType.Tip, elem, propConvert); }, this); } diff --git a/src/jlmap3d/jl3ddrive/jl3ddrive.js b/src/jlmap3d/jl3ddrive/jl3ddrive.js index 40bf34293..6ab9a135a 100644 --- a/src/jlmap3d/jl3ddrive/jl3ddrive.js +++ b/src/jlmap3d/jl3ddrive/jl3ddrive.js @@ -57,7 +57,7 @@ export function JLmapDriving(dom, data, skinCode) { document.getElementById('jlsimulation').appendChild(renderer.domElement); document.getElementById('jlcctv').appendChild(renderercctv.domElement); // 定义相机 - let camera = SetCamera(dom); + //let camera = SetCamera(dom); // 定义场景(渲染容器) const scene = SetScene(); @@ -95,24 +95,22 @@ export function JLmapDriving(dom, data, skinCode) { // 地图模型数据 let mapdata = new Jl3ddata(); - const camera2 = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 ); - camera2.name = 'camera2'; + let camera = new THREE.PerspectiveCamera(70, dom.clientWidth/dom.clientHeight, 1, 1100); + camera.position.set( 0, 0, 0 ); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - const controls3 = new MouseControls(camera2, 1.6); + const controls3 = new MouseControls(camera, 1.6); controls3.enabled = true; scene.add(controls3.getObject()); - let cameracctv = new THREE.PerspectiveCamera(70, dom.clientWidth/dom.clientHeight, 1, 20); - cameracctv.position.set( 5, 1,27 ); + let cameracctv = new THREE.PerspectiveCamera(70, dom.clientWidth/dom.clientHeight, 1, 150); + cameracctv.position.set( 5, -3,27 ); cameracctv.rotation.y = Math.PI/5*3; - camera2.add(cameracctv); + camera.add(cameracctv); // 订阅仿真socket this.Subscribe = new Jl3dDriving(scope); - // 连接到通信 - // console.log(this.Subscribe.config); - - // this.webwork.postMessage(this.Subscribe.teststomp); this.Subscribe.socketon(scope.Subscribe.topic); @@ -137,8 +135,9 @@ export function JLmapDriving(dom, data, skinCode) { // 判断渲染是否开启 if (scope.animateswitch == true) { // 根据相机渲染场景 - renderer.render(scene, camera2); renderercctv.render(scene,cameracctv); + renderer.render(scene, camera); + // updatcontrols(); // renderercctv controls3.update(); diff --git a/src/jlmap3d/jl3ddrive/moveupdate/DrivingConnect.js b/src/jlmap3d/jl3ddrive/moveupdate/DrivingConnect.js index 1f8aa8124..592dd0722 100644 --- a/src/jlmap3d/jl3ddrive/moveupdate/DrivingConnect.js +++ b/src/jlmap3d/jl3ddrive/moveupdate/DrivingConnect.js @@ -213,47 +213,48 @@ export function Jl3dDriving(jlmap3d) { } trainlisttest.list[code].runMode = data.body[i].runMode; // 车门开关验证 - if (data.body[i].directionType == '02') { - if (trainlisttest.list[code].doorStatus != data.body[i].doorStatus && data.body[i].doorStatus == '01') { - // console.log("close"); - trainlisttest.list[code].doorStatus = '01'; - for (let an=actions[code].top.length-1; an>=0; an--) { - actions[code].top[an].reset(); - actions[code].top[an].time = actions[code].top[an]._clip.duration; - actions[code].top[an].timeScale = -1; - actions[code].top[an].play(); - } - } else if (trainlisttest.list[code].doorStatus != data.body[i].doorStatus && data.body[i].doorStatus == '02') { - // console.log("open"); - trainlisttest.list[code].doorStatus = '02'; - for (let an=actions[code].top.length-1; an>=0; an--) { - actions[code].top[an].reset(); - actions[code].top[an].time = 0; - actions[code].top[an].timeScale = 1; - actions[code].top[an].play(); - } + if (trainlisttest.list[code].doorStatus != data.body[i].doorStatus && data.body[i].doorStatus == '01') { + // console.log("close"); + trainlisttest.list[code].doorStatus = '01'; + for (let an=actions[code].top.length-1; an>=0; an--) { + actions[code].top[an].reset(); + actions[code].top[an].time = actions[code].top[an]._clip.duration; + actions[code].top[an].timeScale = -1; + actions[code].top[an].play(); } - } else { - if (trainlisttest.list[code].doorStatus != data.body[i].doorStatus && data.body[i].doorStatus == '01') { - // console.log("close"); - trainlisttest.list[code].doorStatus = '01'; - for (let an=actions[code].down.length-1; an>=0; an--) { - actions[code].down[an].reset(); - actions[code].down[an].time = actions[code].top[an]._clip.duration; - actions[code].down[an].timeScale = -1; - actions[code].down[an].play(); - } - } else if (trainlisttest.list[code].doorStatus != data.body[i].doorStatus && data.body[i].doorStatus == '02') { - // console.log("open"); - trainlisttest.list[code].doorStatus = '02'; - for (let an=actions[code].down.length-1; an>=0; an--) { - actions[code].down[an].reset(); - actions[code].down[an].time = 0; - actions[code].down[an].timeScale = 1; - actions[code].down[an].play(); - } + } else if (trainlisttest.list[code].doorStatus != data.body[i].doorStatus && data.body[i].doorStatus == '02') { + // console.log("open"); + trainlisttest.list[code].doorStatus = '02'; + for (let an=actions[code].top.length-1; an>=0; an--) { + actions[code].top[an].reset(); + actions[code].top[an].time = 0; + actions[code].top[an].timeScale = 1; + actions[code].top[an].play(); } } + // if (data.body[i].directionType == '02') { + // + // } else { + // if (trainlisttest.list[code].doorStatus != data.body[i].doorStatus && data.body[i].doorStatus == '01') { + // // console.log("close"); + // trainlisttest.list[code].doorStatus = '01'; + // for (let an=actions[code].down.length-1; an>=0; an--) { + // actions[code].down[an].reset(); + // actions[code].down[an].time = actions[code].top[an]._clip.duration; + // actions[code].down[an].timeScale = -1; + // actions[code].down[an].play(); + // } + // } else if (trainlisttest.list[code].doorStatus != data.body[i].doorStatus && data.body[i].doorStatus == '02') { + // // console.log("open"); + // trainlisttest.list[code].doorStatus = '02'; + // for (let an=actions[code].down.length-1; an>=0; an--) { + // actions[code].down[an].reset(); + // actions[code].down[an].time = 0; + // actions[code].down[an].timeScale = 1; + // actions[code].down[an].play(); + // } + // } + // } // 遍历获取所在轨道 if (trainlisttest.list[code].dispose != data.body[i].dispose && data.body[i].dispose == false) { @@ -282,12 +283,14 @@ export function Jl3dDriving(jlmap3d) { } const rotaposz = sectionlist.sections.datalist[data.body[i].sectionCode].rail[0].z; + trainlisttest.list[code].rotation.y = 0; trainlisttest.list[code].position.x = rotaposx; trainlisttest.list[code].position.y = 0; for (let tl=0; tl<6; tl++) { trainlisttest.list[code].children[tl].position.z = rotaposz; } + if (sectionlist.sections.datalist[data.body[i].sectionCode].rail[0].x>sectionlist.sections.datalist[data.body[i].sectionCode].rail[1].x) { vexlist.push(new THREE.Vector3(rotaposx, 0, rotaposz)); for (let m=sectionlist.sections.datalist[data.body[i].sectionCode].rail.length-1; m>=0; m--) { @@ -323,15 +326,14 @@ export function Jl3dDriving(jlmap3d) { rotaposx = sectionlist.sections.datalist[data.body[i].sectionCode].rail[0].x+offset*data.body[i].sectionOffsetPercent; } const rotaposz = sectionlist.sections.datalist[data.body[i].sectionCode].rail[1].z; + trainlisttest.list[code].rotation.y = Math.PI; trainlisttest.list[code].position.x = rotaposx; trainlisttest.list[code].position.y = 0; - for (let tl=0; tl<6; tl++) { - trainlisttest.list[code].children[tl].position.z = rotaposz; - } - if (data.body[i].groupNumber == '001') { - } + for (let tl=0; tl<6; tl++) { + trainlisttest.list[code].children[tl].position.z = -rotaposz; + } if (sectionlist.sections.datalist[data.body[i].sectionCode].rail[0].x=0; m--) { @@ -347,7 +349,6 @@ export function Jl3dDriving(jlmap3d) { } } } - trainlisttest.list[code].status = '03'; } @@ -355,8 +356,17 @@ export function Jl3dDriving(jlmap3d) { trainlisttest.list[code].isStandTrack = sectionlist.sections.datalist[data.body[i].sectionCode].isStandTrack; trainlisttest.list[code].progress = 0; trainlisttest.list[code].len = sectionlist.sections.datalist[data.body[i].sectionCode].distance; - trainlisttest.list[code].speed = data.body[i].speed; - trainlisttest.list[code].speeds = parseFloat(data.body[i].speed*10/36/20/trainlisttest.list[code].len); + + + if(data.body[i].speed == 0){ + trainlisttest.list[code].speeds = data.body[i].speed; + trainlisttest.list[code].speeds = 0; + // trainlisttest.list[code].startmark = 1; + }else{ + trainlisttest.list[code].speeds = data.body[i].speed; + trainlisttest.list[code].speeds = parseFloat(data.body[i].speed*10/36/20/trainlisttest.list[code].len); + } + } } else if (trainlisttest.list[code].dispose != data.body[i].dispose && data.body[i].dispose == true) { diff --git a/src/jlmap3d/jl3ddrive/moveupdate/UpdateTrain.js b/src/jlmap3d/jl3ddrive/moveupdate/UpdateTrain.js index 5e6d272a6..e39f803f3 100644 --- a/src/jlmap3d/jl3ddrive/moveupdate/UpdateTrain.js +++ b/src/jlmap3d/jl3ddrive/moveupdate/UpdateTrain.js @@ -4,11 +4,12 @@ export function UpdateTrain(camera,traindata,control){ for(let j=traindata.group.children.length-1;j>=0;j--){ //判断是否有移动事件 - if(traindata.group.children[j].dispose == false){ + //if(traindata.group.children[j].dispose == false){ if(traindata.group.children[j].progress != null){ let trainmodel = traindata.group.children[j]; + if(trainmodel.speeds > 0 && trainmodel.speeds){ let speed = null; if(traindata.group.children[j].progress<1){ @@ -265,8 +266,10 @@ export function UpdateTrain(camera,traindata,control){ } } + + } - } + //} } diff --git a/src/jlmap3d/main/loaders/FBXLoader.js b/src/jlmap3d/main/loaders/FBXLoader.js index c9483218b..6019b050e 100644 --- a/src/jlmap3d/main/loaders/FBXLoader.js +++ b/src/jlmap3d/main/loaders/FBXLoader.js @@ -551,7 +551,15 @@ THREE.FBXLoader = ( function () { if ( materialNode.EmissiveFactor ) { - parameters.emissiveIntensity = parseFloat( materialNode.EmissiveFactor.value ); + if(materialNode.Opacity.value<1 && materialNode.Opacity.value>0.9){ + parameters.side = THREE.DoubleSide; + parameters.transparent = true; + parameters.alphaTest = 0.7; + parameters.opacity = 1; + + }else{ + parameters.opacity = parseFloat( materialNode.Opacity.value ); + } } diff --git a/src/jmap/config/skinCode/bejing_01.js b/src/jmap/config/skinCode/bejing_01.js index d60250e8e..2777d73a8 100644 --- a/src/jmap/config/skinCode/bejing_01.js +++ b/src/jmap/config/skinCode/bejing_01.js @@ -272,7 +272,7 @@ class SkinCode extends defaultStyle { emergencyControlShow: true, // 紧急站控显示 centerControlShow: true, // 中控显示 substationControlShow: true, // 站控按钮显示 - turnedAroundControlShow: false // 按图折返显示 + interconnectedControlShow: false // 联锁控显示 }, arrow: { show: false // 控制模式箭头显隐 diff --git a/src/jmap/config/skinCode/chengdu_03.js b/src/jmap/config/skinCode/chengdu_03.js index d127f42bd..3c1474c90 100644 --- a/src/jmap/config/skinCode/chengdu_03.js +++ b/src/jmap/config/skinCode/chengdu_03.js @@ -276,7 +276,7 @@ class SkinCode extends defaultStyle { emergencyControlShow: true, // 紧急站控显示 centerControlShow: true, // 中控显示 substationControlShow: true, // 站控按钮显示 - turnedAroundControlShow: true // 按图折返显示 + interconnectedControlShow: true // 联锁控显示 }, arrow: { show: false // 控制模式箭头显隐 @@ -374,6 +374,18 @@ class SkinCode extends defaultStyle { } }; + this[deviceType.ButtonControl] = { + text: { + fontSize: 11, // 字体大小 + fontWeight: 'normal', // 字体粗细 + distance: 5 // 灯跟文字距离 + }, + lamp: { + radiusR: 6, // 控制灯大小 + controlColor: '#FFFF00' // 控制灯颜色 + } + }; + this[deviceType.Line] = { lineColor: '#FFFFFF' // 线条颜色 }; diff --git a/src/jmap/config/skinCode/chengdu_04.js b/src/jmap/config/skinCode/chengdu_04.js index 418fefd30..4705e4417 100644 --- a/src/jmap/config/skinCode/chengdu_04.js +++ b/src/jmap/config/skinCode/chengdu_04.js @@ -273,7 +273,7 @@ class SkinCode extends defaultStyle { emergencyControlShow: true, // 紧急站控显示 centerControlShow: true, // 中控显示 substationControlShow: true, // 站控按钮显示 - turnedAroundControlShow: false // 按图折返显示 + interconnectedControlShow: false // 联锁控显示 }, arrow: { show: false // 控制模式箭头显隐 diff --git a/src/jmap/config/skinCode/fuzhou_01.js b/src/jmap/config/skinCode/fuzhou_01.js index 2cebd978b..acae1a23b 100644 --- a/src/jmap/config/skinCode/fuzhou_01.js +++ b/src/jmap/config/skinCode/fuzhou_01.js @@ -255,7 +255,7 @@ class SkinCode extends defaultStyle { emergencyControlShow: false, // 紧急站控显示 centerControlShow: true, // 中控显示 substationControlShow: true, // 站控按钮显示 - turnedAroundControlShow: false // 按图折返显示 + interconnectedControlShow: false // 联锁控显示 }, arrow: { show: true // 控制模式箭头显隐 diff --git a/src/jmap/constant/deviceType.js b/src/jmap/constant/deviceType.js index b9ec52ffc..3093556e3 100644 --- a/src/jmap/constant/deviceType.js +++ b/src/jmap/constant/deviceType.js @@ -11,6 +11,7 @@ const deviceType = { StationStand: 'StationStand', StationControl: 'StationControl', StationCounter: 'StationCounter', + ButtonControl: 'ButtonControl', StationDelayUnlock: 'StationDelayUnlock', Train: 'Train', TrainWindow: 'TrainWindow', diff --git a/src/jmap/map.js b/src/jmap/map.js index 7ae9e4a77..966b7771a 100644 --- a/src/jmap/map.js +++ b/src/jmap/map.js @@ -292,6 +292,7 @@ class Jlmap { case deviceType.ZcControl: prop = 'zcControlList'; break; case deviceType.StationDelayUnlock: prop = 'stationDelayUnlockList'; break; case deviceType.LcControl: prop = 'lcControlList'; break; + case deviceType.ButtonControl: prop = 'buttonList'; break; case deviceType.LimitControl: prop = 'tempSpeedLimitList'; break; case deviceType.ImageControl: prop = 'imageControl'; break; case deviceType.Train: prop = 'trainList'; break; diff --git a/src/jmap/shape/ButtonControl/index.js b/src/jmap/shape/ButtonControl/index.js new file mode 100644 index 000000000..29e2887d4 --- /dev/null +++ b/src/jmap/shape/ButtonControl/index.js @@ -0,0 +1,67 @@ +/* +* lC区域控制模式 +*/ +import Group from 'zrender/src/container/Group'; +import EControl from '../element/EControl'; + +export default class ButtonControl extends Group { + constructor(model, style) { + super(); + this.z = 20; + this._code = model.code; + this._type = model._type; + this.zlevel = 10; + this.model = model; + this.style = style; + this.create(); + this.setState(model); + } + + create() { + const model = this.model; + this.control = new EControl({ + zlevel: this.zlevel, + z: this.z, + arc: { + shape: { + cx: model.position.x, + cy: model.position.y, + r: this.style.ButtonControl.lamp.radiusR + }, + lineWidth: 0, + fill: this.style.ButtonControl.lamp.controlColor + }, + text: { + position: [0, 0], + x: model.position.x, + y: model.position.y + this.style.ButtonControl.lamp.radiusR + this.style.ButtonControl.text.distance, + fontWeight: this.style.ButtonControl.text.fontWeight, + fontSize: this.style.ButtonControl.text.fontSize, + fontFamily: this.style.fontFamily, + text: model.text || '按图折返', + textFill: '#fff', + textAlign: 'middle', + textVerticalAlign: 'top' + }, + style: this.style + }); + + this.add(this.control); + } + + // 设置状态 + setState(model) { + } + + getShapeTipPoint() { + if (this.control) { + var distance = 2; + var rect = this.control.getBoundingRect(); + return { + x: rect.x + rect.width / 2, + y: rect.y - distance + }; + } + return null; + } +} diff --git a/src/jmap/shape/StationControl/index.js b/src/jmap/shape/StationControl/index.js index aced10c05..953981194 100644 --- a/src/jmap/shape/StationControl/index.js +++ b/src/jmap/shape/StationControl/index.js @@ -73,10 +73,10 @@ export default class StationControl extends Group { }); this.add(this.substationControl); } - // 按图折返 - if (this.style.StationControl.lamp.turnedAroundControlShow) { - this.turnedAroundControl = new ESingleControl({ - _subType: 'turnedAround', + // 联锁控 + if (this.style.StationControl.lamp.interconnectedControlShow) { + this.interconnectedControl = new ESingleControl({ + _subType: 'interconnected', style: this.style, zlevel: this.zlevel, z: this.z, @@ -84,10 +84,10 @@ export default class StationControl extends Group { x: model.position.x + this.style.StationControl.lamp.distance * 3 / 2 + this.style.StationControl.lamp.offset.x, y: model.position.y + this.style.StationControl.lamp.offset.y }, - context: '按图折返', + context: model.lskContent || '联锁控', pop: false }); - this.add(this.turnedAroundControl); + this.add(this.interconnectedControl); } // 箭头 if (this.style.StationControl.arrow.show) { diff --git a/src/jmap/shape/factory.js b/src/jmap/shape/factory.js index d592ca368..80b9d1336 100644 --- a/src/jmap/shape/factory.js +++ b/src/jmap/shape/factory.js @@ -9,6 +9,7 @@ import LcControl from './LcControl/index.js'; import LimitControl from './LimitControl/index.js'; import Switch from './Switch/index.js'; import ZcControl from './ZcControl/index.js'; +import ButtonControl from './ButtonControl/index.js'; import StationCounter from './StationCounter/index.js'; import StationDelayUnlock from './StationDelayUnlock/index.js'; import StationStand from './StationStand/index.js'; @@ -29,6 +30,7 @@ mapShape[deviceType.LcControl] = LcControl; mapShape[deviceType.LimitControl] = LimitControl; mapShape[deviceType.Switch] = Switch; mapShape[deviceType.ZcControl] = ZcControl; +mapShape[deviceType.ButtonControl] = ButtonControl; mapShape[deviceType.StationCounter] = StationCounter; mapShape[deviceType.StationDelayUnlock] = StationDelayUnlock; mapShape[deviceType.StationStand] = StationStand; diff --git a/src/jmap/utils/parser.js b/src/jmap/utils/parser.js index 95ea5d265..4ecbb8788 100644 --- a/src/jmap/utils/parser.js +++ b/src/jmap/utils/parser.js @@ -86,6 +86,10 @@ export function parser(data, skinCode) { mapDevice[elem.code] = createDevice(deviceType.ZcControl, elem, propConvert); }, this); + zrUtil.each(data.buttonList || [], elem => { + mapDevice[elem.code] = createDevice(deviceType.ButtonControl, elem, propConvert); + }, this); + zrUtil.each(data.lcList || [], elem => { mapDevice[elem.code] = createDevice(deviceType.LcControl, elem, propConvert); }, this); diff --git a/src/router/index.js b/src/router/index.js index 418079668..da4dea946 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -84,6 +84,8 @@ import RunPlanEveryDay from '@/views/publish/runPlanEveryDay/index'; import ProductStatus from '@/views/publish/productStatus/index'; import PublishLesson from '@/views/publish/publishLesson/index'; // import SimulationScript from '@/views/publish/simulationScript/index'; +import IbpDraft from '@/views/ibp/ibpDraft/index'; +import IbpEdit from '@/views/ibp/ibpDraft/ibpEdit/index'; import Commodity from '@/views/orderauthor/commodity/index'; import CommodityDraft from '@/views/orderauthor/commodity/draft'; @@ -216,6 +218,11 @@ export const UrlConfig = { prefix: '/script', detail: '/script/detail', display: '/script/display' + }, + ibp: { + prefix: 'ibp', + draft: '/ibp/draft', + edit: 'ibp/edit' } }; @@ -375,6 +382,13 @@ export const asyncRouter = [ } ] }, + // { + // path: 'ibp/edit', + // component: IbpEdit, + // meta: { + // i18n: 'router.ibpDraw' + // } + // }, { path: 'runPlan', redirect: '/map/runPlan/view/draft', diff --git a/src/store/index.js b/src/store/index.js index e0c721334..f3e7d27f3 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -13,6 +13,7 @@ import exam from './modules/exam'; import runPlan from './modules/runplan'; import socket from './modules/socket'; import scriptRecord from './modules/scriptRecord'; +import ibp from './modules/ibp'; import getters from './getters'; @@ -32,7 +33,8 @@ const store = new Vuex.Store({ exam, runPlan, socket, - scriptRecord + scriptRecord, + ibp }, getters }); diff --git a/src/store/modules/ibp.js b/src/store/modules/ibp.js new file mode 100644 index 000000000..adf497fa2 --- /dev/null +++ b/src/store/modules/ibp.js @@ -0,0 +1,59 @@ +import Vue from 'vue'; +import { parser } from '@/ibp/utils/parser'; + +/** + * ibp状态数据 + */ +const ibp = { + namespaced: true, + + state: { + ibp: null, // 数据 + ibpDevice: {}, // 解析后的地图数据 + ibpList: {}, // 数据列表 + ibpIdList: {} // 数据列表(以id为标识) + }, + + getters: { + ibpList: (state) => { + return state.ibpList; + }, + ibp: (state) => { + return state.ibp; + }, + version: (state) => { + if (state.ibp) { + return state.ibp.version; + } else { + return null; + } + } + }, + + mutations: { + ibpRender: (state, devices) => { + Vue.prototype.$ibp && Vue.prototype.$ibp.render(devices); + }, + setIbpData: (state, ibp) => { + state.ibp = ibp; + } + }, + + actions: { + setIbpData: ({ commit }, map) => { + commit('setIbpData', map); + }, + updateIbpDevices: ({ commit }, models) => { + return new Promise((resolve) => { + if (!(models instanceof Array)) { + models = [models]; + } + commit('ibpRender', models); + resolve(models); + }); + } + + } +}; + +export default ibp; diff --git a/src/store/modules/map.js b/src/store/modules/map.js index b6ec423ef..bcb7e8071 100644 --- a/src/store/modules/map.js +++ b/src/store/modules/map.js @@ -248,6 +248,13 @@ const map = { return []; } }, + buttonList: (state) => { + if (state.map) { + return state.map.buttonList; + } else { + return []; + } + }, signalList: (state) => { if (state.map) { return state.map.signalList; diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAlarm.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAlarm.vue new file mode 100644 index 000000000..7e3969fe2 --- /dev/null +++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAlarm.vue @@ -0,0 +1,65 @@ + + + + diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAppendageBox.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAppendageBox.vue new file mode 100644 index 000000000..5958b3a06 --- /dev/null +++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAppendageBox.vue @@ -0,0 +1,65 @@ + + + + diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpArrow.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpArrow.vue new file mode 100644 index 000000000..c2944394d --- /dev/null +++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpArrow.vue @@ -0,0 +1,78 @@ + + + + diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpBg.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpBg.vue new file mode 100644 index 000000000..b8df1cb20 --- /dev/null +++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpBg.vue @@ -0,0 +1,71 @@ + + + + diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpButton.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpButton.vue new file mode 100644 index 000000000..c8c38b73a --- /dev/null +++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpButton.vue @@ -0,0 +1,82 @@ + + + + diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpCLamp.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpCLamp.vue new file mode 100644 index 000000000..81032a2c0 --- /dev/null +++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpCLamp.vue @@ -0,0 +1,78 @@ + + + + diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpRotatingButton.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpRotatingButton.vue new file mode 100644 index 000000000..d0d5643e4 --- /dev/null +++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpRotatingButton.vue @@ -0,0 +1,65 @@ + + + + diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpText.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpText.vue new file mode 100644 index 000000000..c40b605a3 --- /dev/null +++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpText.vue @@ -0,0 +1,92 @@ + + + + diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpTip.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpTip.vue new file mode 100644 index 000000000..4a08b39d0 --- /dev/null +++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpTip.vue @@ -0,0 +1,93 @@ + + + + diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/index.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/index.vue new file mode 100644 index 000000000..9a2e70cd1 --- /dev/null +++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/index.vue @@ -0,0 +1,104 @@ + + diff --git a/src/views/ibp/ibpDraft/ibpEdit/index.vue b/src/views/ibp/ibpDraft/ibpEdit/index.vue new file mode 100644 index 000000000..eb7f642bb --- /dev/null +++ b/src/views/ibp/ibpDraft/ibpEdit/index.vue @@ -0,0 +1,103 @@ + + + diff --git a/src/views/ibp/ibpDraft/index.vue b/src/views/ibp/ibpDraft/index.vue new file mode 100644 index 000000000..80bc88b78 --- /dev/null +++ b/src/views/ibp/ibpDraft/index.vue @@ -0,0 +1,72 @@ + + + diff --git a/src/views/ibp/index.vue b/src/views/ibp/index.vue index 49d9af105..8815012a0 100644 --- a/src/views/ibp/index.vue +++ b/src/views/ibp/index.vue @@ -1,7 +1,7 @@ @@ -20,6 +20,8 @@ export default { }, data() { return { + width: this.$store.state.config.width, + height: this.$store.state.config.height, dataZoom: { offsetX: '0', offsetY: '0', @@ -31,7 +33,8 @@ export default { x: 0, y: 0 } - } + }, + showBackButton: true }; }, computed: { @@ -58,12 +61,19 @@ export default { } }, methods: { + resizeHandler() { + this._clientWidth = this._clientWidth || document.documentElement.clientWidth; + this._clientHeight = this._clientHeight || document.documentElement.clientHeight; + const width = this._clientWidth - 521; + const height = this._clientHeight - 60; + this.$store.dispatch('config/resize', { width: width, height: height }); + }, show: function () { document.getElementById(this.ibpId).oncontextmenu = function (e) { return false; }; + const data = parser(ibpData,{width: this.canvasWidth, height: this.canvasHeight}); - console.log('=================', data); this.$ibp = new IbpPan({ dom: document.getElementById(this.ibpId), config: { @@ -82,8 +92,9 @@ export default { stateLoaded: this.handleStateLoaded } }); + Vue.prototype.$ibp = this.$ibp; this.setMap(data); - console.log('+++++++++',this.$ibp); + this.$store.dispatch('ibp/setIbpData', ibpData); window.document.oncontextmenu = function () { return false; }; @@ -102,23 +113,7 @@ export default { back() { this.$emit('hideIbp'); }, - // 视图缩放事假 - onDataZoom(dataZoom) { - this.dataZoom.offsetX = dataZoom.offsetX.toFixed(1) + ''; - this.dataZoom.offsetY = dataZoom.offsetY.toFixed(1) + ''; - this.dataZoom.scaleRate = dataZoom.scaleRate + ''; - const skinCode = this.$store.getters['map/skinCode']; - if (skinCode) { - const param = { - scaleRate: this.dataZoom.scaleRate, - offsetY: this.dataZoom.offsetY, - skinCode: skinCode - }; - - localStore.set(`scaleRate_${skinCode}`, JSON.stringify(param)); // 保存缩放倍数 - } - }, // 点击选择事件 onSelected(em) { this.$emit('onSelect', em); @@ -127,13 +122,10 @@ export default { onContextMenu(em) { this.$emit('onMenu', em); }, - // 缩小 - setShrink() { - this.$ibp.setOptions({type: 'zoom', scale: -1}); - }, - // 放大 - setMagnify() { - this.$ibp.setOptions({type: 'zoom', scale: 1}); + // 绘图时调用，元素可拖拽 + drawIbpInit() { + this.$ibp.drawIbpInit(); + this.showBackButton = false; } } }; @@ -149,6 +141,5 @@ export default { /*background-image: url('../../assets/ibp_images/ibp_bg.png');*/ /*background-repeat:repeat;*/ /*background-size: 4096px 2048px;*/ - background-color: #0e151f; } diff --git a/src/views/map/mapdraft/mapedit/dataRelation/index.vue b/src/views/map/mapdraft/mapedit/dataRelation/index.vue index e3c56f266..3468150f5 100644 --- a/src/views/map/mapdraft/mapedit/dataRelation/index.vue +++ b/src/views/map/mapdraft/mapedit/dataRelation/index.vue @@ -38,6 +38,15 @@ @setCenter="setCenter" /> + + + - - - diff --git a/src/views/map/mapdraft/mapedit/dataRelation/pathoperate/route.vue b/src/views/map/mapdraft/mapedit/dataRelation/pathoperate/route.vue index 80b0373e2..32521c05a 100644 --- a/src/views/map/mapdraft/mapedit/dataRelation/pathoperate/route.vue +++ b/src/views/map/mapdraft/mapedit/dataRelation/pathoperate/route.vue @@ -58,7 +58,7 @@ style="width: 95%; margin: 0 auto" > - +