diff --git a/src/jmapNew/shape/Section/ETriangle.js b/src/jmapNew/shape/Section/ETriangle.js new file mode 100644 index 000000000..22ab0d30a --- /dev/null +++ b/src/jmapNew/shape/Section/ETriangle.js @@ -0,0 +1,46 @@ +import Group from 'zrender/src/container/Group'; +import Polygon from 'zrender/src/graphic/shape/Polygon'; + +/** 创建三角形*/ +export default class ETriangle extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.z = model.z; + this.create(model); + } + + create(model) { + if (model && model.point) { + const right = model.right == 1 ? 1 : -1; + this.angle = new Polygon({ + zlevel: model.zlevel, + z: model.z, + shape: { + points:[[model.point.x + 10 * right, model.point.y], [model.point.x + (1 - right) * 10 / 4, model.point.y - 6], [model.point.x + (1 - right) * 10 / 4, model.point.y + 6]] + }, + style: { + stroke:'#FFFF00', + lineWidth: 0.5, + fill: '#FFFF00' + } + }); + this.add(this.angle); + } + } + + // 隐藏 + hide() { + this.angle.hide(); + } + + // 显示 + show() { + this.angle.show(); + } + + // setModel(model) { + // this.shape + // } +} diff --git a/src/jmapNew/shape/Section/index.js b/src/jmapNew/shape/Section/index.js index 3c5e62866..c62768421 100644 --- a/src/jmapNew/shape/Section/index.js +++ b/src/jmapNew/shape/Section/index.js @@ -3,13 +3,14 @@ import ETextName from '../element/ETextName'; // 名称文字 (共有) import ERelease from './ERelease'; // 线段 (共有) import ELimitLines from './ELimitLines'; // 区段限速 (私有) import ELines from './ELines'; // 创建多线条 曲线 (私有) -import EblockLines from './EblockLines'; // 区段封锁特有 +import EblockLines from './EblockLines'; // 区段封锁特有 import ESeparator from './ESeparator'; // 分隔符 (私有) import EMouse from './EMouse'; import { EAxle } from './EAxle'; // 创建计轴 (私有) import { EBackArrow, EBackArrowTriangle } from './EBackArrow'; // 折返进路箭头 import ELimitName from './ELimitName'; // 成都三号线 限速名称 import JTriangle from '../../utils/JTriangle'; +import ETriangle from './ETriangle'; import router from '@/router'; import { drawSectionStyle } from '../../config/defaultStyle'; import store from '@/store'; @@ -45,6 +46,9 @@ export default class Section extends Group { this.creatRelease(); // 创建延时释放 this.createSeparator(); // 创建分隔符 this.createTurnBack(); // 创建成都三号线 折返箭头 + if (this.style.Section.trainPosition.display) { + this.createTriangle(); // 创建成都一号线 列车精确位置 + } if (model.type === '01' && model.type === '03') { this.createAxles(); // 创建计轴 } @@ -577,7 +581,7 @@ export default class Section extends Group { recover() { if (this.section) { this.section.stopAnimation(true); - this.sectionBlock && this.sectionBlock.hide(); // 因此特殊区段 + this.sectionBlock && this.sectionBlock.hide(); // 因此特殊区段 this.section.setStyle({ fill: this.style.backgroundColor, stroke: this.style.Section.line.spareColor, @@ -591,6 +595,11 @@ export default class Section extends Group { this.remove(this.speedLimitLeft); this.remove(this.speedLimitRight); } + if (this.style.Section.trainPosition.display) { + this.triangleL.hide(); + this.triangleR.hide(); + } + } } @@ -644,6 +653,121 @@ export default class Section extends Group { } } + // updateTriangle(model) { + // if(model.offsetp) + // // if (model.right && model.points.length > 1) { + // // this.triangle.setModel([model.points[0].x + (model.points[1].x - model.points[0].x) * model.offsetp, model.points[0].y]); + // // } + // this.triangle.show(); + // } + + createTriangle() { + const model = this.model; + this.triangleL = new ETriangle({ + style: this.style, + zlevel: this.zlevel, + z:10, + right: 0, + point:{x:model.points[model.points.length - 1].x, y:model.points[model.points.length - 1].y} + }); + this.triangleR = new ETriangle({ + style: this.style, + zlevel: this.zlevel, + z:10, + right: 1, + point:{x:model.points[0].x, y:model.points[0].y} + }); + this.add(this.triangleL); + this.add(this.triangleR); + } + + // 成都一号线列车的精确位置 + updateTriangle() { + const model = this.model; + // debugger; + // if (model.hideOld) { + // // debugger; + // if (model.right == 1) { + // this.triangleR.hide(); + // } else { + // this.triangleL.hide(); + // } + // } + if (model.right != undefined && model.offsetp != undefined && model.points.length > 1) { + const newX = model.points[0].x + (model.points[1].x - model.points[0].x) * model.offsetp; + const newY = model.points[0].y + (model.points[1].y - model.points[0].y) * model.offsetp; + if (!model.oldX && !model.oldY) { + model.oldX = this.triangleL.model.point.x; + model.oldY = this.triangleL.model.point.y; + } + if (model.right == 1) { + if (model.hideOld) { + // debugger; + this.triangleR.hide(); + } + this.triangleL.hide(); + this.triangleR.show(); + this.triangleR.position = [newX - model.oldX, newY - model.oldY]; + // const runner = this.triangleR.animate('position', false).when(100, [newX - model.oldX, newY - model.oldY]); + // runner.done(function() { + // runner.stop(); + // data.hide(); + // model.oldX = newX; + // model.oldY = newY; + // }).start(); + } else { + if (model.hideOld) { + this.triangleL.hide(); + } + this.triangleR.hide(); + this.triangleL.show(); + this.triangleL.position = [newX - model.oldX, newY - model.oldY]; + // const runner = this.triangleL.animate('position', false).when(100, [newX - model.oldX, newY - model.oldY]); + // runner.done(function() { + // // debugger; + // runner.stop(); + // data.hide(); + // model.oldX = newX; + // model.oldY = newY; + // }).start(); + // stopAnimation(true) + } + + // if (!model.hasTriangle) { + // this.triangle = new ETriangle({ + // style: this.style, + // zlevel: this.zlevel, + // z:1000, + // right: model.right, + // point:{x:model.points[0].x + (model.points[1].x - model.points[0].x) * model.offsetp, y:model.points[0].y} + // }); + // /** 添加视图*/ + // this.add(this.triangle); + // model.hasTriangle = true; + // } else { + // // debugger; + // console.log(2222222); + // const newX = model.points[0].x + (model.points[1].x - model.points[0].x) * model.offsetp; + // const newY = model.points[0].y; + // // debugger; + // if (this.triangle) { + // if (model.offsetp >= 1) { + // this.remove(this.triangle); + // model.hasTriangle = false; + // } else { + // // this.remove(this.triangle); + // // model.hasTriangle = false; + // const runner = this.triangle.animate('position', true).when(100, [newX - this.triangle.model.point.x, newY - this.triangle.model.point.y]); + // runner.start(); + // } + // // this.triangle.position = [newX - this.triangle.model.point.x, newY - this.triangle.model.point.y]; + // // this.triangle.dirty(); + // } + + // } + } + } + /** 封锁 06*/ block() { if (this.style.Section.block.special) { @@ -803,6 +927,8 @@ export default class Section extends Group { } /** 道岔保护区段锁闭 */ model.overlapLock && this.protectiveLock(); + /** 成都一号线列车精确位置 */ + model.offsetp && this.updateTriangle(); /** 空闲锁闭或者叫进路锁闭 */ model.routeLock && this.routeLock(); /** 轨道封锁 */ diff --git a/src/jmapNew/shape/Train/index.js b/src/jmapNew/shape/Train/index.js index 5c9324e66..f1e5f60de 100644 --- a/src/jmapNew/shape/Train/index.js +++ b/src/jmapNew/shape/Train/index.js @@ -128,7 +128,17 @@ export default class Train extends Group { let models = []; const model = deepAssign(oldmodel, {_type: 'Section'}); // 修改元素model models = [model]; - store.dispatch('map/updateMapDevices', models); + store.dispatch('map/updateMapDevices', models).then(()=>{ + if (train.oldsection && train.oldsection != train.physicalCode) { + const oldmodels = store.getters['map/getDeviceByCode'](train.oldsection); + const models = deepAssign(oldmodels, {_type: 'Section'}); // 修改元素model + models.hideOld = true; + models.offsetp = undefined; + const trainOldSection = [models]; + store.dispatch('map/updateMapDevices', trainOldSection); + } + train.oldsection = train.physicalCode; + }); } }