From 1a0612020eb20c690895e24e421adf599eb0f752 Mon Sep 17 00:00:00 2001 From: lVAL Date: Thu, 7 Jan 2021 15:15:54 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=EF=BC=8C=E4=BF=A1=E5=8F=B7?= =?UTF-8?q?=E6=9C=BA=E7=81=AF=E4=B8=9D=E6=95=85=E9=9A=9C=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmapNew/config/skinCode/chengdu_03.js | 3 +- src/jmapNew/config/skinCode/ningbo_03.js | 4 +- src/jmapNew/config/skinCode/xian_01.js | 2 +- src/jmapNew/config/skinCode/xian_02.js | 1 + src/jmapNew/shape/SaidLamp/ELampFilament.js | 3 + src/jmapNew/shape/SaidLamp/index.js | 8 +- src/jmapNew/shape/Signal/ESigLamp.js | 65 ++++++++-- src/jmapNew/shape/Signal/index.js | 42 +++++- src/jmapNew/shape/utils/ShapeDepFind.js | 13 ++ src/jmapNew/shape/utils/ShapePoints.js | 136 ++++++++++---------- vue.config.js | 2 + 11 files changed, 188 insertions(+), 91 deletions(-) create mode 100644 src/jmapNew/shape/utils/ShapeDepFind.js diff --git a/src/jmapNew/config/skinCode/chengdu_03.js b/src/jmapNew/config/skinCode/chengdu_03.js index 5cc88ccfd..1d5b6e043 100644 --- a/src/jmapNew/config/skinCode/chengdu_03.js +++ b/src/jmapNew/config/skinCode/chengdu_03.js @@ -175,7 +175,8 @@ class SkinCode extends defaultStyle { greenColor: '#00FF00', // 信号灯绿色 yellowColor: '#FFFF00', // 信号灯黄色 whiteColor: '#FFFFFF', // 信号灯白色 - blueColor: '#0070C0' // 信号灯蓝色 + blueColor: '#0070C0', // 信号灯蓝色 + faultType: 'light' // 信号机故障类型 （light闪） }, route: { direction: true, // 自动通过方向 diff --git a/src/jmapNew/config/skinCode/ningbo_03.js b/src/jmapNew/config/skinCode/ningbo_03.js index 65c2feb75..ea6015657 100644 --- a/src/jmapNew/config/skinCode/ningbo_03.js +++ b/src/jmapNew/config/skinCode/ningbo_03.js @@ -186,7 +186,7 @@ class SkinCode extends defaultStyle { stopWidth: 2, // 禁止线宽度 borderWidth: 2, // 信号灯边框线宽度 borderColor: '#000000', // 信号灯边框线颜色 - physicColor:'#ffffff', // 物理点灯信号灯边框线颜色 + physicColor:'#ffffff', // 物理点灯信号灯边框线颜色 radiusR: 5, // 信号灯半径 blockColor: '#EF0C08', // 信号灯锁闭 grayColor: '#C0C0C0', // 信号灯灰色 @@ -195,7 +195,7 @@ class SkinCode extends defaultStyle { yellowColor: 'yellow', // 信号灯黄色 whiteColor: '#FFFFFF', // 信号灯白色 blueColor: '#0070C0', // 信号灯蓝色 - logicDisplayNone: true // 信号机上×型标识不展示 + faultType: 'cross' // 信号机故障类型 （cross叉形狀） }, route: { direction: false, // 自动通过方向 diff --git a/src/jmapNew/config/skinCode/xian_01.js b/src/jmapNew/config/skinCode/xian_01.js index f9cfbb504..3bb623608 100644 --- a/src/jmapNew/config/skinCode/xian_01.js +++ b/src/jmapNew/config/skinCode/xian_01.js @@ -162,7 +162,7 @@ class SkinCode extends defaultStyle { yellowColor: '#FFFF00', // 信号灯黄色 whiteColor: '#FFFFFF', // 信号灯白色 blueColor: '#0070C0', // 信号灯蓝色 - faultType: 'flash' // 信号机故障类型 （flash为西安三号线特殊类型） + faultType: 'flash' // 信号机故障类型（flash太阳） }, route: { direction: false, // 自动进路方向 diff --git a/src/jmapNew/config/skinCode/xian_02.js b/src/jmapNew/config/skinCode/xian_02.js index f059bc1f7..4a797e1a3 100644 --- a/src/jmapNew/config/skinCode/xian_02.js +++ b/src/jmapNew/config/skinCode/xian_02.js @@ -175,6 +175,7 @@ class SkinCode extends defaultStyle { yellowColor: 'yellow', // 信号灯黄色 whiteColor: '#FFFFFF', // 信号灯白色 blueColor: '#0070C0', // 信号灯蓝色 + faultType: 'watch', // 信号机故障类型 （watch表形狀） logicDisplayNone: true // 信号机上×型标识不展示 }, route: { diff --git a/src/jmapNew/shape/SaidLamp/ELampFilament.js b/src/jmapNew/shape/SaidLamp/ELampFilament.js index 5feab8c97..4b08d7859 100644 --- a/src/jmapNew/shape/SaidLamp/ELampFilament.js +++ b/src/jmapNew/shape/SaidLamp/ELampFilament.js @@ -14,4 +14,7 @@ export default class ELampFilament extends Group { this.path = createPathSvg(this.model); this.add(this.path); } + setControlColor(color) { + this.path.setStyle({fill: color}); + } } diff --git a/src/jmapNew/shape/SaidLamp/index.js b/src/jmapNew/shape/SaidLamp/index.js index a395e12e3..5536254bf 100644 --- a/src/jmapNew/shape/SaidLamp/index.js +++ b/src/jmapNew/shape/SaidLamp/index.js @@ -224,11 +224,11 @@ export default class SaidLamp extends Group { this.isShowShape = false; } } - setControlColor(color, flag) { - this.control && this.control.getControl().stopAnimation(false); - this.control && this.control.setControlColor(color); + setControlColor(color, flag = false) { + this.control && this.control.getControl && this.control.getControl().stopAnimation(false); + this.control && this.control.setControlColor && this.control.setControlColor(color); if (flag) { - this.control && this.control.getControl().animateStyle(true) + this.control && this.control.getControl && this.control.getControl().animateStyle(true) .when(0, { fill: this.style.backgroundColor }) .when(1000, { fill: color }) .when(2000, { fill: this.style.backgroundColor }) diff --git a/src/jmapNew/shape/Signal/ESigLamp.js b/src/jmapNew/shape/Signal/ESigLamp.js index 7cc6492a3..18d65e975 100644 --- a/src/jmapNew/shape/Signal/ESigLamp.js +++ b/src/jmapNew/shape/Signal/ESigLamp.js @@ -58,11 +58,7 @@ class ESigLamp extends Group { _subType: 'SignalLamp', _val: '3', zlevel: model.zlevel, - z: model.z, - origin: { - x: model.originX, - y: model.originY - }, + z: model.z + 1, shape: { x1: model.x + (style.Signal.lamp.radiusR + 0.5) * Math.cos(Math.PI / 4), y1: model.y + (style.Signal.lamp.radiusR + 0.5) * Math.sin(Math.PI / 4), @@ -78,11 +74,7 @@ class ESigLamp extends Group { _subType: 'SignalLamp', _val: '3', zlevel: model.zlevel, - z: model.z, - origin: { - x: model.originX, - y: model.originY - }, + z: model.z + 1, shape: { x1: model.x + (style.Signal.lamp.radiusR + 0.5) * Math.cos(Math.PI / 4), y1: model.y + (style.Signal.lamp.radiusR + 0.5) * (Math.sin(Math.PI / 4) - Math.sqrt(2)), @@ -94,8 +86,51 @@ class ESigLamp extends Group { stroke: style.Signal.xColor || style.backgroundColor } }); + + const edge = 2; + this.lcross = new Line({ + _subType: 'SignalLamp', + _val: '3', + zlevel: model.zlevel, + z: model.z + 1, + shape: { + x1: model.x + (style.Signal.lamp.radiusR + edge + 0.5) * Math.cos(Math.PI / 4), + y1: model.y + (style.Signal.lamp.radiusR + edge + 0.5) * Math.sin(Math.PI / 4), + x2: model.x - (style.Signal.lamp.radiusR + edge + 0.5) * Math.cos(Math.PI / 4), + y2: model.y - (style.Signal.lamp.radiusR + edge + 0.5) * Math.sin(Math.PI / 4) + }, + style: { + lineWidth: style.Signal.lamp.stopWidth, + stroke: '#000000', + lineCap: 'round' + } + }); + this.rcross = new Line({ + _subType: 'SignalLamp', + _val: '3', + zlevel: model.zlevel, + z: model.z + 1, + shape: { + x1: model.x + (style.Signal.lamp.radiusR + edge + 0.5) * Math.cos(Math.PI / 4), + y1: model.y + (style.Signal.lamp.radiusR + edge + 0.5) * (Math.sin(Math.PI / 4) - Math.sqrt(2)), + x2: model.x - (style.Signal.lamp.radiusR + edge + 0.5) * Math.cos(Math.PI / 4), + y2: model.y - (style.Signal.lamp.radiusR + edge + 0.5) * (Math.sin(Math.PI / 4) - Math.sqrt(2)) + }, + style: { + lineWidth: style.Signal.lamp.stopWidth, + stroke: '#000000', + lineCap: 'round' + } + }); } this.add(this.lamp); + + if (style.Signal.lamp.faultType == 'cross') { + this.add(this.lcross); + this.add(this.rcross); + this.setFault2Corss(false); + } + if (!style.Signal.lamp.logicDisplayNone) { this.add(this.lstop); this.add(this.rstop); @@ -126,6 +161,16 @@ class ESigLamp extends Group { this.lamp.setStyle(data); } + setFault2Corss(has) { + if (has) { + this.lcross && this.lcross.show(); + this.rcross && this.rcross.show(); + } else { + this.lcross && this.lcross.hide(); + this.rcross && this.rcross.hide(); + } + } + setStop(has) { if (has) { this.lstop && this.lstop.show(); diff --git a/src/jmapNew/shape/Signal/index.js b/src/jmapNew/shape/Signal/index.js index 551748885..6f81055c9 100644 --- a/src/jmapNew/shape/Signal/index.js +++ b/src/jmapNew/shape/Signal/index.js @@ -17,6 +17,8 @@ import Rect from 'zrender/src/graphic/shape/Rect'; import Polygon from 'zrender/src/graphic/shape/Polygon'; import Text from 'zrender/src/graphic/Text'; import Isogon from 'zrender/src/graphic/shape/Isogon'; +import deviceType from '../../constant/deviceType'; +import { findDeviceByModelDepType } from '../utils/ShapeDepFind'; // import BoundingRect from 'zrender/src/core/BoundingRect'; // import background from './../../../ibp/shape/background'; @@ -491,8 +493,24 @@ class Signal extends Group { // } fault() { - if (this.style.Signal.lamp.faultType && this.style.Signal.lamp.faultType == 'flash') { + if (this.style.Signal.lamp.faultType == 'flash') { this.lamps[0].faultShow(); + } else if (this.style.Signal.lamp.faultType == 'cross') { + this.lamps[0].setFault2Corss(true); + } else if (this.style.Signal.lamp.faultType == 'watch') { + const model = findDeviceByModelDepType(this.model, deviceType.LampFilament, 'stationCode'); + if (model && model.instance) { + model.instance.setControlColor('red'); + // if (model.redOpen) { + // model.instance.setControlColor('red'); + // } else if (model.greenOpen || model.yellowOpen) { + // model.instance.setControlColor('green'); + // } else { + // model.instance.setControlColor('#9F9C9C'); + // } + } + } else if (this.style.Signal.lamp.faultType == 'light') { + this.lamps[0].setAnimationStart('red'); } } @@ -606,9 +624,6 @@ class Signal extends Group { // 恢复状态 recover() { this.lamps.forEach(item=> { item.show(); }); - if (this.style.Signal.lamp.faultType && this.style.Signal.lamp.faultType == 'flash') { - this.lamps[0].faultHide(); - } this.sigName.setStyle({ textBorderWidth: 0 }); this.sigName.setColor(this.style.Signal.text.defaultColor); this.remainTImeName.hide(); @@ -620,12 +635,27 @@ class Signal extends Group { this.sigRoute.hide(); this.sigBack && this.sigBack.hide(); this.sigPost.setColor(this.style.Signal.post.standardColor); // 设置底座默认颜色 + if (this.style.Signal.lamp.guidName === 'singleRY') { this.lamps[0].setStyle({ lineWidth: this.style.Signal.lamp.borderWidth }); } if (this.style.Signal.lamp.guidName === 'double' || this.style.Signal.lamp.guidName === 'doubleAndBase') { this.lamps[1].hide(); } + + if (this.style.Signal.lamp.faultType == 'flash') { + this.lamps[0].faultHide(); + } else if (this.style.Signal.lamp.faultType == 'cross') { + this.lamps[0].setFault2Corss(false); + } else if (this.style.Signal.lamp.faultType == 'watch') { + const model = findDeviceByModelDepType(this.model, deviceType.LampFilament, 'stationCode'); + if (model && model.instance) { + model.instance.setControlColor('#9F9C9C'); + } + } else if (this.style.Signal.lamp.faultType == 'light') { + this.lamps[0].setAnimationEnd(); + } + this.insideTriangle && this.insideTriangle.setStyle({fill: this.style.Signal.insideTriangle.startSignalColor, stroke: this.style.Signal.insideTriangle.strokeColor}); this.insideTriangle && this.insideTriangle.hide(); this.sigPost && this.sigPost.removeTerminalOptional(); @@ -641,6 +671,7 @@ class Signal extends Group { if (!this.isShowShape) return; const path = window.location.href; this.recover(); + /** 信号机进路按钮显示 */ if (isShowThePrdType(model.prdType, '03') && this.style.Signal.lowButton.display) { /** 终端信号机按钮 */ @@ -659,7 +690,6 @@ class Signal extends Group { model.redOpen && !model.yellowOpen && !model.greenOpen && this.close(model.logicLight); // 信号关闭 model.greenOpen && !model.redOpen && !model.yellowOpen && this.openPositive(model.logicLight); // 信号正向开放 model.yellowOpen && !model.redOpen && !model.greenOpen && this.openLateral(model.logicLight); // 信号侧向开放 - model.fault && this.fault();// 信号机故障 model.remainTime && this.showRemainTime(model.remainTime); if (!path.includes('/map/draw')) { // 联锁自动进路通过 @@ -710,6 +740,8 @@ class Signal extends Group { }); } } + // 信号机故障 + model.fault && this.fault(); // 设置灰显 model.noStatus && this.setAshShow(); } diff --git a/src/jmapNew/shape/utils/ShapeDepFind.js b/src/jmapNew/shape/utils/ShapeDepFind.js new file mode 100644 index 000000000..251782965 --- /dev/null +++ b/src/jmapNew/shape/utils/ShapeDepFind.js @@ -0,0 +1,13 @@ +import Vue from 'vue'; + +// 查询有相同归属集中站的指定类型的图形 +export function findDeviceByModelDepType(model, type, compare) { + return Object.values(Vue.prototype.$jlmap.mapDevice).find(el => { + if (el._type == type) { + return (compare instanceof Function) + ? compare(el, model) + : el[compare] == model[compare]; + } + return false; + }); +} diff --git a/src/jmapNew/shape/utils/ShapePoints.js b/src/jmapNew/shape/utils/ShapePoints.js index ffba459d6..bc11a9b72 100644 --- a/src/jmapNew/shape/utils/ShapePoints.js +++ b/src/jmapNew/shape/utils/ShapePoints.js @@ -2,101 +2,101 @@ import Path from 'zrender/src/graphic/Path'; /** 指向箭头坐标*/ export function arrow(modelX, modelY, length, radius) { - return [ - [modelX - length, modelY], - [modelX - length + radius / 1.5, modelY - radius / 1.2], - [modelX - length + radius / 1.5, modelY - radius / 3], - [modelX + length, modelY - radius / 3], - [modelX + length, modelY + radius / 3], - [modelX - length + radius / 1.5, modelY + radius / 3], - [modelX - length + radius / 1.5, modelY + radius / 1.2] - ]; + return [ + [modelX - length, modelY], + [modelX - length + radius / 1.5, modelY - radius / 1.2], + [modelX - length + radius / 1.5, modelY - radius / 3], + [modelX + length, modelY - radius / 3], + [modelX + length, modelY + radius / 3], + [modelX - length + radius / 1.5, modelY + radius / 3], + [modelX - length + radius / 1.5, modelY + radius / 1.2] + ]; } /** 指向三角形坐标*/ export function triangular(modelX, modelY, drict, radius) { - return [ - [modelX, modelY], - [modelX - drict * (radius + 2), modelY - radius], - [modelX - drict * (radius + 2), modelY + radius] - ]; + return [ + [modelX, modelY], + [modelX - drict * (radius + 2), modelY - radius], + [modelX - drict * (radius + 2), modelY + radius] + ]; } /** 屏蔽门手电筒*/ export function flashlight(modelX, modelY, drict, width, height, offsetx, offsety, beyond) { - return [ - [modelX + drict * (offsetx), modelY + drict * offsety - (height + beyond) / 2], - [modelX + drict * (offsetx + beyond), modelY + drict * offsety - height / 2], - [modelX + drict * (offsetx + beyond + width), modelY + drict * offsety - height / 2], - [modelX + drict * (offsetx + beyond + width), modelY + drict * offsety + height / 2], - [modelX + drict * (offsetx + beyond), modelY + drict * offsety + height / 2], - [modelX + drict * (offsetx), modelY + drict * offsety + (height + beyond) / 2] - ]; + return [ + [modelX + drict * (offsetx), modelY + drict * offsety - (height + beyond) / 2], + [modelX + drict * (offsetx + beyond), modelY + drict * offsety - height / 2], + [modelX + drict * (offsetx + beyond + width), modelY + drict * offsety - height / 2], + [modelX + drict * (offsetx + beyond + width), modelY + drict * offsety + height / 2], + [modelX + drict * (offsetx + beyond), modelY + drict * offsety + height / 2], + [modelX + drict * (offsetx), modelY + drict * offsety + (height + beyond) / 2] + ]; } /** 区段限速体带方向*/ export function limitArrows(modelX, modelY, drict, radius) { - return [ - [modelX + drict * radius, modelY - radius], - [modelX + drict * radius, modelY + radius], - [modelX - drict * radius, modelY + radius], - [modelX - drict * radius * 1.8, modelY], - [modelX - drict * radius, modelY - radius] - ]; + return [ + [modelX + drict * radius, modelY - radius], + [modelX + drict * radius, modelY + radius], + [modelX - drict * radius, modelY + radius], + [modelX - drict * radius * 1.8, modelY], + [modelX - drict * radius, modelY - radius] + ]; } /** 区段折返标记*/ export function turnbackArrows(modelX, modelY, drict, width, height) { - return [ - [modelX - drict * (width - 1), modelY + height], - [modelX + drict * width / 2, modelY + height], - [modelX + drict * width / 2, modelY - height], - [modelX - drict * (width - 3), modelY - height] - ]; + return [ + [modelX - drict * (width - 1), modelY + height], + [modelX + drict * width / 2, modelY + height], + [modelX + drict * width / 2, modelY - height], + [modelX - drict * (width - 3), modelY - height] + ]; } export const Ugraph = Path.extend({ - type: 'ugraph', + type: 'ugraph', - shape: { - points: null, - counterclockwise: true - }, + shape: { + points: null, + counterclockwise: true + }, - style: { - stroke: '#000', - fill: null - }, + style: { + stroke: '#000', + fill: null + }, - buildPath: function (ctx, shape) { - var points = shape.points; - var r = Math.abs(points[1][1] - points[2][1]) / 2; - var x = Math.abs(points[1][0] + points[2][0]) / 2; - var y = Math.abs(points[1][1] + points[2][1]) / 2; - ctx.moveTo(points[0][0], points[0][1]); - ctx.lineTo(points[1][0], points[1][1]); + buildPath: function (ctx, shape) { + var points = shape.points; + var r = Math.abs(points[1][1] - points[2][1]) / 2; + var x = Math.abs(points[1][0] + points[2][0]) / 2; + var y = Math.abs(points[1][1] + points[2][1]) / 2; + ctx.moveTo(points[0][0], points[0][1]); + ctx.lineTo(points[1][0], points[1][1]); - shape.counterclockwise && ctx.arc(x, y, r, Math.PI / 2, Math.PI * 3 / 2, false); - shape.counterclockwise || ctx.arc(x, y, r, Math.PI / 2, -Math.PI / 2, true); + shape.counterclockwise && ctx.arc(x, y, r, Math.PI / 2, Math.PI * 3 / 2, false); + shape.counterclockwise || ctx.arc(x, y, r, Math.PI / 2, -Math.PI / 2, true); - ctx.moveTo(points[2][0], points[2][1]); - ctx.lineTo(points[3][0], points[3][1]); + ctx.moveTo(points[2][0], points[2][1]); + ctx.lineTo(points[3][0], points[3][1]); - ctx.closePath(); + ctx.closePath(); - points = shape.points; - r = Math.abs(points[1][1] - points[2][1]) / 2; - x = Math.abs(points[1][0] + points[2][0]) / 2; - y = Math.abs(points[1][1] + points[2][1]) / 2; - ctx.moveTo(points[0][0], points[0][1]); - ctx.lineTo(points[1][0], points[1][1]); + points = shape.points; + r = Math.abs(points[1][1] - points[2][1]) / 2; + x = Math.abs(points[1][0] + points[2][0]) / 2; + y = Math.abs(points[1][1] + points[2][1]) / 2; + ctx.moveTo(points[0][0], points[0][1]); + ctx.lineTo(points[1][0], points[1][1]); - shape.counterclockwise && ctx.arc(x, y, r, Math.PI / 2, Math.PI * 3 / 2, false); - shape.counterclockwise || ctx.arc(x, y, r, Math.PI / 2, -Math.PI / 2, true); + shape.counterclockwise && ctx.arc(x, y, r, Math.PI / 2, Math.PI * 3 / 2, false); + shape.counterclockwise || ctx.arc(x, y, r, Math.PI / 2, -Math.PI / 2, true); - ctx.moveTo(points[2][0], points[2][1]); - ctx.lineTo(points[3][0], points[3][1]); + ctx.moveTo(points[2][0], points[2][1]); + ctx.lineTo(points[3][0], points[3][1]); - ctx.closePath(); - } + ctx.closePath(); + } }); diff --git a/vue.config.js b/vue.config.js index dea847de9..cf61eacda 100644 --- a/vue.config.js +++ b/vue.config.js @@ -35,6 +35,8 @@ module.exports = { productionSourceMap: false, // 项目打包后是否压缩 devServer: { port: port, + host: '0.0.0.0', + disableHostCheck: true, hotOnly: true, overlay: { warnings: false,