修改代码
This commit is contained in:
parent
af6e9fe3c9
commit
39af264196
95
README-zh.md
95
README-zh.md
@ -1,96 +1,3 @@
|
||||
# vue-admin-template
|
||||
|
||||
> 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint,这些搭建后台必要的东西。
|
||||
|
||||
[线上地址](http://panjiachen.github.io/vue-admin-template)
|
||||
|
||||
[国内访问](https://panjiachen.gitee.io/vue-admin-template)
|
||||
|
||||
目前版本为 `v4.0+` 基于 `vue-cli` 进行构建,若你想使用旧版本,可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0),它不依赖 `vue-cli`。
|
||||
|
||||
## Extra
|
||||
|
||||
如果你想要根据用户角色来动态生成侧边栏和 router,你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
|
||||
|
||||
## 相关项目
|
||||
|
||||
[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
|
||||
|
||||
[electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||
|
||||
[vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
|
||||
|
||||
写了一个系列的教程配套文章,如何从零构建后一个完整的后台项目:
|
||||
|
||||
- [手摸手,带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
|
||||
- [手摸手,带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
|
||||
- [手摸手,带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
|
||||
- [手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
|
||||
- [手摸手,带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
|
||||
|
||||
## Build Setup
|
||||
|
||||
```bash
|
||||
# 克隆项目
|
||||
git clone https://github.com/PanJiaChen/vue-admin-template.git
|
||||
|
||||
# 进入项目目录
|
||||
cd vue-admin-template
|
||||
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# 建议不要直接使用 cnpm 安装以来,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
|
||||
npm install --registry=https://registry.npm.taobao.org
|
||||
|
||||
# 启动服务
|
||||
npm run dev
|
||||
```
|
||||
|
||||
浏览器访问 [http://localhost:9528](http://localhost:9528)
|
||||
|
||||
## 发布
|
||||
|
||||
```bash
|
||||
# 构建测试环境
|
||||
npm run build:stage
|
||||
|
||||
# 构建生产环境
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
## 其它
|
||||
|
||||
```bash
|
||||
# 预览发布环境效果
|
||||
npm run preview
|
||||
|
||||
# 预览发布环境效果 + 静态资源分析
|
||||
npm run preview -- --report
|
||||
|
||||
# 代码格式检查
|
||||
npm run lint
|
||||
|
||||
# 代码格式检查并自动修复
|
||||
npm run lint -- --fix
|
||||
```
|
||||
|
||||
更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
|
||||
|
||||
## Demo
|
||||
|
||||
![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
|
||||
|
||||
## Browsers support
|
||||
|
||||
Modern browsers and Internet Explorer 10+.
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| --------- | --------- | --------- | --------- |
|
||||
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
|
||||
# jl-nclient
|
||||
|
||||
Copyright (c) 2017-present PanJiaChen
|
||||
|
85
README.md
85
README.md
@ -1,89 +1,6 @@
|
||||
# vue-admin-template
|
||||
# jl-nclient
|
||||
|
||||
English | [简体中文](./README-zh.md)
|
||||
|
||||
> A minimal vue admin template with Element UI & axios & iconfont & permission control & lint
|
||||
|
||||
**Live demo:** http://panjiachen.github.io/vue-admin-template
|
||||
|
||||
|
||||
**The current version is `v4.0+` build on `vue-cli`. If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0), it does not rely on `vue-cli`**
|
||||
|
||||
## Build Setup
|
||||
|
||||
|
||||
```bash
|
||||
# clone the project
|
||||
git clone https://github.com/PanJiaChen/vue-element-admin.git
|
||||
|
||||
# enter the project directory
|
||||
cd vue-element-admin
|
||||
|
||||
# install dependency
|
||||
npm install
|
||||
|
||||
# develop
|
||||
npm run dev
|
||||
```
|
||||
|
||||
This will automatically open http://localhost:9527
|
||||
|
||||
## Build
|
||||
|
||||
```bash
|
||||
# build for test environment
|
||||
npm run build:stage
|
||||
|
||||
# build for production environment
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
## Advanced
|
||||
|
||||
```bash
|
||||
# preview the release environment effect
|
||||
npm run preview
|
||||
|
||||
# preview the release environment effect + static resource analysis
|
||||
npm run preview -- --report
|
||||
|
||||
# code format check
|
||||
npm run lint
|
||||
|
||||
# code format check and auto fix
|
||||
npm run lint -- --fix
|
||||
```
|
||||
|
||||
Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
|
||||
|
||||
## Demo
|
||||
|
||||
![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
|
||||
|
||||
## Extra
|
||||
|
||||
If you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
|
||||
|
||||
For `typescript` version, you can use [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
|
||||
|
||||
## Related Project
|
||||
|
||||
[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
|
||||
|
||||
[electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||
|
||||
[vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
|
||||
|
||||
## Browsers support
|
||||
|
||||
Modern browsers and Internet Explorer 10+.
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| --------- | --------- | --------- | --------- |
|
||||
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
|
||||
|
||||
Copyright (c) 2017-present PanJiaChen
|
||||
|
@ -15,7 +15,7 @@ class ESigButton extends Group {
|
||||
const model = this.model;
|
||||
const style = this.model.style;
|
||||
const padding = 1;
|
||||
const r = style.Signal.signalR * 0.8;
|
||||
const r = style.Signal.Lamp.signalR * 0.8;
|
||||
|
||||
this.style = style;
|
||||
this._subType = 'SignalButton';
|
||||
@ -26,15 +26,15 @@ class ESigButton extends Group {
|
||||
_subType: this._subType,
|
||||
_val: '1',
|
||||
shape: {
|
||||
x: model.x - style.Signal.signalR,
|
||||
x: model.x - style.Signal.Lamp.signalR,
|
||||
y: model.y - r + r * model.posit,
|
||||
width: style.Signal.signalR * 2,
|
||||
height: style.Signal.signalR * 2
|
||||
width: style.Signal.Lamp.signalR * 2,
|
||||
height: style.Signal.Lamp.signalR * 2
|
||||
},
|
||||
style: {
|
||||
lineWidth: 0.2,
|
||||
stroke: style.Signal.signalButtonDashColor,
|
||||
fill: style.Signal.signalButtonColor
|
||||
stroke: style.Signal.Button.signalButtonDashColor,
|
||||
fill: style.Signal.Button.signalButtonColor
|
||||
}
|
||||
});
|
||||
|
||||
@ -46,12 +46,12 @@ class ESigButton extends Group {
|
||||
shape: {
|
||||
cx: model.x,
|
||||
cy: model.y - 5 / 2 * r * model.posit,
|
||||
r: style.Signal.signalR
|
||||
r: style.Signal.Lamp.signalR
|
||||
},
|
||||
style: {
|
||||
lineWidth: 0.2,
|
||||
stroke: style.Signal.signalButtonDashColor,
|
||||
fill: style.Signal.signalButtonColor
|
||||
stroke: style.Signal.Button.signalButtonDashColor,
|
||||
fill: style.Signal.Button.signalButtonColor
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -1,49 +0,0 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Text from 'zrender/src/graphic/Text';
|
||||
|
||||
class ESigDelay extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this._create();
|
||||
}
|
||||
|
||||
_create() {
|
||||
const model = this.model;
|
||||
this.name = new Text({
|
||||
_subType: model._subType,
|
||||
zlevel: model.zlevel,
|
||||
z: model.z,
|
||||
silent: model.silent || false,
|
||||
style: {
|
||||
x: model.x,
|
||||
y: model.y,
|
||||
text: model.text,
|
||||
textFont: model.textFont,
|
||||
textFill: model.textFill,
|
||||
textAlign: model.textAlign,
|
||||
textPosition: model.textPosition || 'inside',
|
||||
textVerticalAlign: model.textVerticalAlign || null
|
||||
}
|
||||
});
|
||||
this.add(this.name);
|
||||
}
|
||||
|
||||
setStyle(model) {
|
||||
this.name.setStyle(model);
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
this.name.setStyle('textFill', color);
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.name.hide();
|
||||
}
|
||||
|
||||
show() {
|
||||
this.name.show();
|
||||
}
|
||||
}
|
||||
|
||||
export default ESigDelay;
|
@ -1,89 +0,0 @@
|
||||
import Line from 'zrender/src/graphic/shape/Line';
|
||||
import Arc from 'zrender/src/graphic/shape/Arc';
|
||||
import Group from 'zrender/src/container/Group';
|
||||
|
||||
class ESigLmap extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this._create();
|
||||
}
|
||||
|
||||
_create() {
|
||||
const model = this.model;
|
||||
const style = this.model.style;
|
||||
|
||||
this.lamp = new Arc({
|
||||
name: model.index,
|
||||
zlevel: model.zlevel,
|
||||
z: model.z,
|
||||
shape: {
|
||||
cx: model.x,
|
||||
cy: model.y,
|
||||
r: style.Signal.signalR
|
||||
},
|
||||
style: {
|
||||
lineWidth: 0.4,
|
||||
fill: style.backgroundColor,
|
||||
stroke: style.Signal.signalLampStandardColor
|
||||
}
|
||||
});
|
||||
|
||||
this.lstop = new Line({
|
||||
zlevel: model.zlevel,
|
||||
z: model.z,
|
||||
origin: {
|
||||
x: model.originX,
|
||||
y: model.originY
|
||||
},
|
||||
shape: {
|
||||
x1: model.x + (style.Signal.signalR + 1) * Math.cos(Math.PI / 4),
|
||||
y1: model.y + (style.Signal.signalR + 1) * Math.sin(Math.PI / 4),
|
||||
x2: model.x - (style.Signal.signalR + 1) * Math.cos(Math.PI / 4),
|
||||
y2: model.y - (style.Signal.signalR + 1) * Math.sin(Math.PI / 4)
|
||||
},
|
||||
style: {
|
||||
lineWidth: 1.5,
|
||||
stroke: style.backgroundColor
|
||||
}
|
||||
});
|
||||
|
||||
this.rstop = new Line({
|
||||
zlevel: model.zlevel,
|
||||
z: model.z,
|
||||
origin: {
|
||||
x: model.originX,
|
||||
y: model.originY
|
||||
},
|
||||
shape: {
|
||||
x1: model.x + (style.Signal.signalR + 1) * Math.cos(Math.PI / 4),
|
||||
y1: model.y + (style.Signal.signalR + 1) * (Math.sin(Math.PI / 4) - Math.sqrt(2)),
|
||||
x2: model.x - (style.Signal.signalR + 1) * Math.cos(Math.PI / 4),
|
||||
y2: model.y - (style.Signal.signalR + 1) * (Math.sin(Math.PI / 4) - Math.sqrt(2))
|
||||
},
|
||||
style: {
|
||||
lineWidth: 1.5,
|
||||
stroke: style.backgroundColor
|
||||
}
|
||||
});
|
||||
this.add(this.lamp);
|
||||
this.add(this.lstop);
|
||||
this.add(this.rstop);
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
this.lamp.setStyle('fill', color);
|
||||
}
|
||||
|
||||
setStop(has) {
|
||||
if (has) {
|
||||
this.lstop.show();
|
||||
this.rstop.show();
|
||||
} else {
|
||||
this.lstop.hide();
|
||||
this.rstop.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ESigLmap;
|
@ -1,51 +0,0 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Text from 'zrender/src/graphic/Text';
|
||||
|
||||
class ESigName extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this._create();
|
||||
}
|
||||
|
||||
_create() {
|
||||
const model = this.model;
|
||||
this.name = new Text({
|
||||
_subType: model._subType,
|
||||
zlevel: model.zlevel,
|
||||
z: model.z,
|
||||
silent: model.silent,
|
||||
style: {
|
||||
x: model.x,
|
||||
y: model.y,
|
||||
text: model.text,
|
||||
textFont: model.textFont,
|
||||
textFill: model.textFill,
|
||||
textAlign: model.textAlign,
|
||||
textPosition: model.textPosition || 'inside',
|
||||
textVerticalAlign: model.textVerticalAlign || null
|
||||
}
|
||||
});
|
||||
this.add(this.name);
|
||||
}
|
||||
|
||||
setStyle(model) {
|
||||
this.name.setStyle(model);
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
this.name.setStyle('textFill', color);
|
||||
}
|
||||
|
||||
// 隐藏
|
||||
hide() {
|
||||
this.name.hide();
|
||||
}
|
||||
|
||||
// 显示
|
||||
show() {
|
||||
this.name.show();
|
||||
}
|
||||
}
|
||||
|
||||
export default ESigName;
|
@ -1,66 +0,0 @@
|
||||
import Polygon from 'zrender/src/graphic/shape/Polygon';
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import { arrows } from '../utils/ShapePoints';
|
||||
|
||||
class ESigPass extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this._create();
|
||||
}
|
||||
|
||||
_create() {
|
||||
const model = this.model;
|
||||
const style = this.model.style;
|
||||
const rotation = model.drict != 1? 0 : Math.PI;
|
||||
const point = arrows(model.x, model.y, style.Signal.signalSigPassWidth, style.Signal.signalR * 0.8);
|
||||
this.arrows = new Polygon({
|
||||
zlevel: model.zlevel,
|
||||
z: model.z,
|
||||
rotation: rotation,
|
||||
shape: {
|
||||
points: point
|
||||
},
|
||||
style: {
|
||||
stroke: model.stroke,
|
||||
lineWidth: model.lineWidth,
|
||||
fill: model.fill
|
||||
}
|
||||
});
|
||||
this.add(this.arrows);
|
||||
}
|
||||
|
||||
// 停止动画
|
||||
animationRecover() {
|
||||
this.arrows.stopAnimation(false);
|
||||
}
|
||||
|
||||
// 箭头颜色
|
||||
setColor(color) {
|
||||
this.arrows.setStyle('fill', color);
|
||||
}
|
||||
|
||||
// 箭头闪烁
|
||||
arrowsAnimation() {
|
||||
const style = this.model.style;
|
||||
const fill = this.arrows.style.Signal.fill;
|
||||
this.arrows.animate(true)
|
||||
.when(1000, { fill: style.backgroundColor, stroke: style.style.backgroundColor })
|
||||
.when(2000, { fill: fill, stroke: style.style.Signal.sidelineColor })
|
||||
.when(3000, { fill: style.style.backgroundColor, stroke: style.style.backgroundColor })
|
||||
.when(4000, { fill: fill, stroke: style.style.Signal.sidelineColor })
|
||||
.start();
|
||||
}
|
||||
|
||||
// 隐藏
|
||||
hide() {
|
||||
this.arrows.hide();
|
||||
}
|
||||
|
||||
// 显示
|
||||
show() {
|
||||
this.arrows.show();
|
||||
}
|
||||
}
|
||||
|
||||
export default ESigPass;
|
@ -1,68 +0,0 @@
|
||||
import Polyline from 'zrender/src/graphic/shape/Polyline';
|
||||
import Group from 'zrender/src/container/Group';
|
||||
|
||||
class ESigPost extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this._create();
|
||||
}
|
||||
|
||||
_create() {
|
||||
const model = this.model;
|
||||
const style = this.model.style;
|
||||
|
||||
this.ver = new Polyline({
|
||||
zlevel: model.zlevel,
|
||||
z: model.z,
|
||||
shape: {
|
||||
points: [
|
||||
[model.x, model.y + style.Signal.signalR * 1.2],
|
||||
[model.x, model.y - style.Signal.signalR * 1.2]
|
||||
]
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.Signal.signalLampStandardWidth,
|
||||
stroke: style.Signal.signalLampStandardColor
|
||||
}
|
||||
});
|
||||
|
||||
this.hor = new Polyline({
|
||||
zlevel: model.zlevel,
|
||||
z: model.z,
|
||||
shape: {
|
||||
points: [
|
||||
[model.x, model.y],
|
||||
[model.x + model.drict * style.Signal.signalR * 1.2, model.y]
|
||||
]
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.Signal.signalLampStandardWidth,
|
||||
stroke: style.Signal.signalLampStandardColor
|
||||
}
|
||||
});
|
||||
|
||||
this.add(this.ver);
|
||||
this.add(this.hor);
|
||||
|
||||
model.type === '01' ? this.hor.hide() : this.hor.show();
|
||||
}
|
||||
|
||||
getLampPosition(type) {
|
||||
const model = this.model;
|
||||
const style = this.model.style;
|
||||
if (type === '01') {
|
||||
return {
|
||||
x: model.x + model.drict * style.Signal.signalR * 3 / 2,
|
||||
y: model.y
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
x: this.hor.shape.points[1][0] + model.drict * style.Signal.signalR,
|
||||
y: this.hor.shape.points[1][1]
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ESigPost;
|
@ -1,41 +0,0 @@
|
||||
import Polygon from 'zrender/src/graphic/shape/Polygon';
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import { triangular } from '../utils/ShapePoints';
|
||||
|
||||
class ESigDrict extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this._create();
|
||||
}
|
||||
|
||||
_create() {
|
||||
const model = this.model;
|
||||
const style = this.model.style;
|
||||
this.sigDrict = new Polygon({
|
||||
zlevel: model.zlevel,
|
||||
z: model.z,
|
||||
shape: {
|
||||
points: triangular(model.x, model.y, model.drict, style.Signal.signalR)
|
||||
},
|
||||
style: {
|
||||
stroke: style.backgroundColor,
|
||||
lineWidth: 0.5,
|
||||
fill: style.Signal.signalLampYellowColor
|
||||
}
|
||||
});
|
||||
this.add(this.sigDrict);
|
||||
}
|
||||
|
||||
// 隐藏
|
||||
hide() {
|
||||
this.sigDrict.hide();
|
||||
}
|
||||
|
||||
// 显示
|
||||
show() {
|
||||
this.sigDrict.show();
|
||||
}
|
||||
}
|
||||
|
||||
export default ESigDrict;
|
27
src/jmap/shape/Signal/SigAuto.js
Normal file
27
src/jmap/shape/Signal/SigAuto.js
Normal file
@ -0,0 +1,27 @@
|
||||
import Path from 'zrender/src/graphic/Path';
|
||||
|
||||
export default Path.extend({
|
||||
type: 'SigAuto',
|
||||
|
||||
shape: {
|
||||
x: 0, // 三角中心x
|
||||
y: 0, // 三角中心y
|
||||
r: 0, // 三角形半径
|
||||
forward: false // 三角箭头朝向: 左/右
|
||||
},
|
||||
|
||||
style: {
|
||||
stroke: '#c0c0c0',
|
||||
lineWidth: 0.5,
|
||||
fill: null
|
||||
},
|
||||
|
||||
buildPath: function (ctx, shape) {
|
||||
const r = shape.forward ? shape.r : -shape.r;
|
||||
ctx.moveTo(shape.x, shape.y);
|
||||
ctx.lineTo(shape.x + r, shape.y - shape.r);
|
||||
ctx.lineTo(shape.x + r, shape.y + shape.r);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
});
|
@ -2,13 +2,12 @@
|
||||
* 信号机
|
||||
*/
|
||||
|
||||
import ESigPost from './ESigPost';
|
||||
import ESigLmap from './ESigLmap';
|
||||
import ESigPass from './ESigPass';
|
||||
import ESigRoute from './ESigRoute';
|
||||
import SigPost from './SigPost';
|
||||
import SigLamp from './SigLamp';
|
||||
import SigAuto from './SigAuto';
|
||||
import SigRoute from './SigRoute';
|
||||
import ESigButton from './ESigButton';
|
||||
import ESigDelay from './ESigDelay';
|
||||
import ESigName from './ESigName';
|
||||
import Text from 'zrender/src/graphic/Text';
|
||||
import Group from 'zrender/src/container/Group';
|
||||
|
||||
class Signal extends Group {
|
||||
@ -35,30 +34,46 @@ class Signal extends Group {
|
||||
const posit = this.model.positionType == '01' ? -1 : 1; // 位置 上:下
|
||||
|
||||
// 信号机高柱矮柱
|
||||
this.sigPost = new ESigPost({
|
||||
this.sigPost = new SigPost({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
style: style,
|
||||
drict: drict,
|
||||
type: model.lampPostType,
|
||||
z: this.z + 1,
|
||||
shape: {
|
||||
x: model.position.x,
|
||||
y: model.position.y + posit * (style.Signal.signalDistance + style.Section.sectionWidth + style.Signal.signalR)
|
||||
y: model.position.y + posit * (style.Signal.signalDistance + style.Section.sectionWidth + style.Signal.Lamp.signalR),
|
||||
h: style.Signal.Lamp.signalR * 2,
|
||||
w: style.Signal.Lamp.signalR,
|
||||
isDwarf: model.lampPositionType == '02',
|
||||
forward: model.directionType == '01'
|
||||
},
|
||||
style: {
|
||||
stroke: style.Signal.Post.signalLampStandardColor,
|
||||
lineWidth: style.Signal.Post.signalLampStandardWidth
|
||||
}
|
||||
});
|
||||
|
||||
const endPoint = {
|
||||
x: model.position.x + drict * (style.Signal.Lamp.signalR * 2),
|
||||
y: model.position.y + posit * (style.Signal.signalDistance + style.Section.sectionWidth + style.Signal.Lamp.signalR)
|
||||
};
|
||||
|
||||
// 信号灯
|
||||
const endPoint = this.sigPost.getLampPosition(model.lampPostType);
|
||||
this.lamps = [];
|
||||
for (let i = 0; i < this.count; i++) {
|
||||
const lamp = new ESigLmap({
|
||||
const lamp = new SigLamp({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
style: style,
|
||||
index: i + 1,
|
||||
drict: drict,
|
||||
x: endPoint.x + i * drict * style.Signal.signalR * 2,
|
||||
shape: {
|
||||
x: endPoint.x + i * drict * (style.Signal.Lamp.signalR * 2 + style.Signal.Lamp.signalBorderWidth),
|
||||
y: endPoint.y,
|
||||
originX: model.position.x,
|
||||
originY: model.position.y
|
||||
r: style.Signal.Lamp.signalR,
|
||||
signalStopWidth: style.Signal.Lamp.signalStopWidth,
|
||||
isStop: false
|
||||
},
|
||||
style: {
|
||||
stroke: style.Signal.Lamp.signalBorderColor,
|
||||
lineWidth: style.Signal.Lamp.signalBorderWidth,
|
||||
fill: style.Signal.Lamp.signalLampGrayColor
|
||||
}
|
||||
});
|
||||
|
||||
this.lamps.push(lamp);
|
||||
@ -66,67 +81,76 @@ class Signal extends Group {
|
||||
|
||||
// 信号机名称
|
||||
const sigNameX = model.position.x + model.namePosition.x;
|
||||
const sigNameY = model.position.y + posit * (style.Signal.signalDistance + style.Section.sectionWidth + style.Signal.signalR * 2 + model.namePosition.y);
|
||||
this.sigName = new ESigName({
|
||||
const sigNameY = model.position.y + posit * (style.Signal.signalDistance + style.Section.sectionWidth + style.Signal.Lamp.signalR * 2 + model.namePosition.y);
|
||||
this.sigName = new Text({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
silent: false,
|
||||
style: style,
|
||||
style: {
|
||||
x: sigNameX,
|
||||
y: sigNameY,
|
||||
text: model.name,
|
||||
textFont: `bold ${style.Signal.signalTextFontSize} px ${style.textFontFormat}`,
|
||||
textFill: style.Signal.signalTextGreen,
|
||||
textFont: `bold ${style.Signal.Text.signalTextFontSize} px ${style.textFontFormat}`,
|
||||
textFill: style.Signal.Text.signalTextGreen,
|
||||
textAlign: 'middle',
|
||||
textPosition: model.textPosition || 'inside',
|
||||
textVerticalAlign: posit == 1 ? 'top' : 'bottom'
|
||||
}
|
||||
});
|
||||
|
||||
// 自动进路
|
||||
const sigRouteH = style.Signal.signalSigRouteDirection ? this.count * style.Signal.signalR * 2 : -style.Signal.signalR * 2;
|
||||
const sigRouteX = endPoint.x + (style.Signal.signalSigRouteOffset.x + sigRouteH) * drict;
|
||||
const sigRouteY = endPoint.y + (style.Signal.signalSigRouteOffset.y);
|
||||
this.sigRoute = new ESigRoute({
|
||||
const sigRouteH = style.Signal.Route.signalRouteDirection ? this.count * style.Signal.Lamp.signalR * 2 : -style.Signal.Lamp.signalR * 2;
|
||||
const sigRouteX = endPoint.x + (style.Signal.Route.signalRouteOffset.x + sigRouteH) * drict;
|
||||
const sigRouteY = endPoint.y + (style.Signal.Route.signalRouteOffset.y);
|
||||
this.sigRoute = new SigRoute({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
style: style,
|
||||
shape: {
|
||||
x: sigRouteX,
|
||||
y: sigRouteY,
|
||||
drict: drict
|
||||
forward: model.directionType == '01'
|
||||
},
|
||||
style: {
|
||||
fill: style.Signal.Route.signalRouteColor
|
||||
}
|
||||
});
|
||||
|
||||
// 自动通过
|
||||
const sigPassH = style.Signal.signalSigPassDirection ? this.count * style.Signal.signalR * 2 : -style.Signal.signalR * 2;
|
||||
const sigPassX = endPoint.x + (style.Signal.signalSigPassOffset.x + sigPassH) * drict;
|
||||
const sigPassY = endPoint.y + (style.Signal.signalSigPassOffset.y);
|
||||
this.sigPass = new ESigPass({
|
||||
const sigAutoH = style.Signal.Auto.signalAutoDirection ? this.count * style.Signal.Lamp.signalR * 2 : -style.Signal.Lamp.signalR * 2;
|
||||
const sigAutoX = endPoint.x + (style.Signal.Auto.signalAutoOffset.x + sigAutoH) * drict;
|
||||
const sigAutoY = endPoint.y + (style.Signal.Auto.signalAutoOffset.y);
|
||||
this.sigAuto = new SigAuto({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
style: style,
|
||||
count: this.count,
|
||||
drict: drict,
|
||||
x: sigPassX,
|
||||
y: sigPassY,
|
||||
width: style.Signal.signalSigPassWidth,
|
||||
fill: style.Signal.signalLampGreenColor,
|
||||
lineWidth: 0.6,
|
||||
stroke: style.sidelineColor
|
||||
shape: {
|
||||
x: sigAutoX,
|
||||
y: sigAutoY,
|
||||
r: style.Signal.Lamp.signalR,
|
||||
forward: model.directionType == '01'
|
||||
},
|
||||
style: {
|
||||
fill: style.Signal.Auto.signalAutoColor
|
||||
}
|
||||
});
|
||||
|
||||
// 延迟解锁
|
||||
const sigDelayH = style.Signal.signalSigDelayDirection ? this.count * style.Signal.signalR * 2 : -style.Signal.signalR * 2;
|
||||
const sigDelayX = endPoint.x + (style.Signal.signalSigDelayOffset.x + sigDelayH) * drict;
|
||||
const sigDelayY = endPoint.y - (style.Signal.signalSigDelayOffset.y) * posit;
|
||||
this.sigDelay = new ESigDelay({
|
||||
const sigDelayH = style.Signal.Delay.signalDelayDirection ? this.count * style.Signal.Lamp.signalR * 2 : -style.Signal.Lamp.signalR * 2;
|
||||
const sigDelayX = endPoint.x + (style.Signal.Delay.signalDelayOffset.x + sigDelayH) * drict;
|
||||
const sigDelayY = endPoint.y - (style.Signal.Delay.signalDelayOffset.y) * posit;
|
||||
this.sigDelay = new Text({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
style: style,
|
||||
silent: false,
|
||||
style: {
|
||||
x: sigDelayX,
|
||||
y: sigDelayY,
|
||||
text: this.state.delayCount || '0',
|
||||
textFont: `bold ${style.Signal.signalDelayTextFontSize} px ${style.textFontFormat}`,
|
||||
textFill: style.Signal.signalTextRed,
|
||||
textFont: `bold ${style.Signal.Delay.signalDelayTextFontSize} px ${style.textFontFormat}`,
|
||||
textFill: style.Signal.Delay.signalDelayTextColor,
|
||||
textAlign: drict > 0 ? 'right' : 'left',
|
||||
textPosition: model.textPosition || 'inside',
|
||||
textVerticalAlign: 'middle'
|
||||
}
|
||||
});
|
||||
|
||||
// 信号灯按钮
|
||||
@ -137,16 +161,16 @@ class Signal extends Group {
|
||||
posit: posit,
|
||||
show: model.buttonShow,
|
||||
x: model.buttonPosition.x,
|
||||
y: model.buttonPosition.y - posit * (style.Signal.signalButtonDistance + style.Signal.signalR * 2)
|
||||
y: model.buttonPosition.y - posit * (style.Signal.Button.signalButtonDistance + style.Signal.Lamp.signalR * 2)
|
||||
});
|
||||
|
||||
this.add(this.sigPost);
|
||||
this.lamps.forEach(lamp => { this.add(lamp); });
|
||||
this.add(this.sigName);
|
||||
this.add(this.sigPass);
|
||||
this.add(this.sigRoute);
|
||||
this.add(this.sigAuto);
|
||||
this.add(this.sigDelay);
|
||||
// this.add(this.sigButton);
|
||||
this.add(this.sigButton);
|
||||
}
|
||||
|
||||
// 整体旋转信号灯
|
||||
@ -169,13 +193,13 @@ class Signal extends Group {
|
||||
if (this.count === 1) {
|
||||
if (this.model.useType === '05') {
|
||||
/** 单灯 调车信号机*/
|
||||
this.lamps[0] && this.lamps[0].setColor(this.style.Signal.signalLampBlueColor);
|
||||
this.lamps[0] && this.lamps[0].setStyle('fill', this.style.Signal.Lamp.signalLampBlueColor);
|
||||
} else {
|
||||
/** 单灯 出站信号机 */
|
||||
/** 单灯 阻挡信号机*/
|
||||
/** 单灯 阻挡兼调车信号 */
|
||||
/** 单灯 列兼调信号机 */
|
||||
this.lamps[0] && this.lamps[0].setColor(this.style.Signal.signalLampRedColor);
|
||||
this.lamps[0] && this.lamps[0].setStyle('fill', this.style.Signal.Lamp.signalLampRedColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -185,7 +209,7 @@ class Signal extends Group {
|
||||
if (this.count === 1) {
|
||||
/** 单灯 出站信号机*/
|
||||
/** 单灯 阻隔信号机*/
|
||||
this.lamps[0] && this.lamps[0].setColor(this.style.Signal.signalLampGreenColor);
|
||||
this.lamps[0] && this.lamps[0].setStyle('fill', this.style.Signal.Lamp.signalLampGreenColor);
|
||||
}
|
||||
}
|
||||
|
||||
@ -193,7 +217,7 @@ class Signal extends Group {
|
||||
trainRoute() {
|
||||
if (this.count === 1) {
|
||||
/** 单灯 列兼调信号*/
|
||||
this.lamps[0] && this.lamps[0].setColor(this.style.Signal.signalLampYellowColor);
|
||||
this.lamps[0] && this.lamps[0].setStyle('fill', this.style.Signal.Lamp.signalLampYellowColor);
|
||||
}
|
||||
}
|
||||
|
||||
@ -202,7 +226,7 @@ class Signal extends Group {
|
||||
if (this.count === 1) {
|
||||
/** 单灯 列兼调信号*/
|
||||
/** 单灯 阻挡兼调车信号*/
|
||||
this.lamps[0] && this.lamps[0].setColor(this.style.Signal.signalLampWhiteColor);
|
||||
this.lamps[0] && this.lamps[0].setStyle('fill', this.style.Signal.Lamp.signalLampWhiteColor);
|
||||
}
|
||||
}
|
||||
|
||||
@ -213,8 +237,8 @@ class Signal extends Group {
|
||||
|
||||
// 封锁
|
||||
block() {
|
||||
this.lamps[0] && this.lamps[0].setColor(this.style.Signal.signalLampRedColor);
|
||||
this.sigName.setColor(this.style.Signal.sectionBlockTextColor);
|
||||
this.lamps[0] && this.lamps[0].setStyle('fill', this.style.Signal.Lamp.signalLampRedColor);
|
||||
this.sigName.setStyle('textFill', this.style.Signal.Text.signalTextRed);
|
||||
}
|
||||
|
||||
// 功能封锁
|
||||
@ -232,53 +256,59 @@ class Signal extends Group {
|
||||
|
||||
// 物理点灯
|
||||
logicalLight() {
|
||||
this.lamps.forEach(lamp => { lamp.setStop(false); });
|
||||
this.lamps.forEach(lamp => { lamp.setShape('isStop', false); });
|
||||
}
|
||||
|
||||
// 逻辑点灯
|
||||
physicsLight() {
|
||||
this.lamps.forEach(lamp => { lamp.setStop(true); });
|
||||
this.lamps.forEach(lamp => { lamp.setShape('isStop', true); });
|
||||
}
|
||||
|
||||
// 设置自动进路模式状态类型
|
||||
setAutoRouteOpen() {
|
||||
if (this.model.linkageAutoRouteShow) {
|
||||
this.sigPass.show();
|
||||
this.sigAuto.show();
|
||||
} else {
|
||||
this.sigPass.hide();
|
||||
this.sigAuto.hide();
|
||||
}
|
||||
|
||||
this.recover();
|
||||
this.sigPass.setColor(this.style.Signal.signalLampGreenColor);
|
||||
this.sigAuto.setStyle('fill', this.style.Signal.signalAutoRoute);
|
||||
}
|
||||
|
||||
// 信号机进路自动触发模式状态类型
|
||||
setAutoAccessOpen() {
|
||||
if (this.model.atsAutoTriggerShow) {
|
||||
this.sigPass.show();
|
||||
this.sigAuto.show();
|
||||
} else {
|
||||
this.sigPass.hide();
|
||||
this.sigAuto.hide();
|
||||
}
|
||||
|
||||
this.recover();
|
||||
this.sigPass.setColor(this.style.Signal.signalLampYellowColor);
|
||||
this.sigAuto.setStyle('fill', this.style.Signal.signalAutoTrigger);
|
||||
}
|
||||
|
||||
// 设置自动信号模式状态类型
|
||||
setAutoSignalOpen() {
|
||||
setAutonalOpen() {
|
||||
this.sigRoute.show();
|
||||
}
|
||||
|
||||
// 隐藏自动信号和自动进路
|
||||
setAutoClose() {
|
||||
this.sigPass.hide();
|
||||
this.sigPass.setColor(this.style.backgroundColor);
|
||||
this.sigRoute.hide();
|
||||
this.sigAuto.hide();
|
||||
}
|
||||
|
||||
// 自动信号和自动进路开始动画
|
||||
setAutoFlicker() {
|
||||
this.sigPass.arrowsAnimation();
|
||||
const style = this.model.style;
|
||||
const fill = this.sigAuto.style.Signal.fill;
|
||||
this.sigAuto.animate(true)
|
||||
.when(1000, { fill: style.backgroundColor, stroke: style.style.backgroundColor })
|
||||
.when(2000, { fill: fill, stroke: style.style.Signal.sidelineColor })
|
||||
.when(3000, { fill: style.style.backgroundColor, stroke: style.style.backgroundColor })
|
||||
.when(4000, { fill: fill, stroke: style.style.Signal.sidelineColor })
|
||||
.start();
|
||||
}
|
||||
|
||||
// 设置延时解锁
|
||||
@ -289,8 +319,8 @@ class Signal extends Group {
|
||||
// 恢复状态
|
||||
recover() {
|
||||
this.sigDelay.hide();
|
||||
this.sigPass.animationRecover();
|
||||
this.sigName.setColor(this.style.Signal.signalTextGreen);
|
||||
this.sigAuto.stopAnimation(false);
|
||||
this.sigName.setStyle('textFill', this.style.Signal.Text.signalTextGreen);
|
||||
}
|
||||
|
||||
setState(state) {
|
||||
@ -321,7 +351,7 @@ class Signal extends Group {
|
||||
/** 设置自动类型*/
|
||||
switch (state.autoType) {
|
||||
case '01': this.setAutoClose(); break; // 隐藏 隐藏自动信号和自动进路
|
||||
case '02': this.setAutoSignalOpen(); break; // 显示 设置自动信号模式状态类型
|
||||
case '02': this.setAutonalOpen(); break; // 显示 设置自动信号模式状态类型
|
||||
case '03': this.setAutoRouteOpen(); break; // 显示 设置自动进路模式状态类型
|
||||
case '04': this.setAutoAccessOpen(); break; // 显示 信号机进路自动触发模式状态类型
|
||||
}
|
||||
|
@ -76,44 +76,29 @@ class Fuzhou extends defaultSkin {
|
||||
sectionAxleFailure: '#E6A23C' // #FFFF00 计轴失效
|
||||
};
|
||||
this[deviceType.Signal] = {
|
||||
/** 信号机宽度 */
|
||||
signalR: 5,
|
||||
/** 自动信号宽度*/
|
||||
signalSigPassWidth: 6,
|
||||
/** 延迟解锁字体大小*/
|
||||
signalDelayTextFontSize: 9,
|
||||
/** 信号机名称字体大小*/
|
||||
signalTextFontSize: 12,
|
||||
/** 灯柱宽度*/
|
||||
signalLampStandardWidth: 1.2,
|
||||
/** 设备距离区段的距离*/
|
||||
signalDistance: 3,
|
||||
/** 信号灯按钮距离区段的距离*/
|
||||
signalButtonDistance: 5,
|
||||
/** 自动进路方向*/
|
||||
signalSigRouteDirection: false,
|
||||
/** 自动进路偏移量*/
|
||||
signalSigRouteOffset: { x: -4, y: -2 },
|
||||
/** 自动通过方向*/
|
||||
signalSigPassDirection: false,
|
||||
/** 自动通过偏移量*/
|
||||
signalSigPassOffset: { x: -12, y: 0},
|
||||
/** 延时解锁方向*/
|
||||
signalSigDelayDirection: true,
|
||||
/** 延时解锁偏移量*/
|
||||
signalSigDelayOffset: { x: 15, y: -10},
|
||||
/** 信号灯按钮边线*/
|
||||
signalButtonDashColor: '#FFFFFF',
|
||||
/** 信号灯按钮颜色*/
|
||||
signalButtonColor: 'darkgreen',
|
||||
/** 信号灯按钮闪烁颜色*/
|
||||
signalButtonLightenColor: '#E4EF50',
|
||||
signalDistance: 10,
|
||||
Post: {
|
||||
signalLampStandardColor: '#3149C3',
|
||||
signalLampStandardWidth: 2
|
||||
},
|
||||
Text: {
|
||||
/** 信号机名称字体大小*/
|
||||
signalTextFontSize: 8,
|
||||
/** 信号灯字体颜色*/
|
||||
signalTextRed: '#EF0C08',
|
||||
/** 信号机字体绿色*/
|
||||
signalTextGreen: '#4DD43F',
|
||||
/** 信号灯灯柱颜色*/
|
||||
signalLampStandardColor: '#3149C3',
|
||||
signalTextGreen: '#4DD43F'
|
||||
},
|
||||
Lamp: {
|
||||
/** 禁止线宽度*/
|
||||
signalStopWidth: 2,
|
||||
/** 信号灯边框线宽度*/
|
||||
signalBorderWidth: 0.5,
|
||||
/** 信号灯边框线颜色*/
|
||||
signalBorderColor: '#3149C3',
|
||||
/** 信号灯半径*/
|
||||
signalR: 6,
|
||||
/** 信号灯锁闭*/
|
||||
signalBlockColor: '#EF0C08',
|
||||
/** 信号灯灰色*/
|
||||
@ -128,6 +113,45 @@ class Fuzhou extends defaultSkin {
|
||||
signalLampWhiteColor: '#FFFFFF',
|
||||
/** 信号灯蓝色*/
|
||||
signalLampBlueColor: '#0070C0'
|
||||
},
|
||||
Route: {
|
||||
/** 自动进路方向*/
|
||||
signalRouteDirection: false,
|
||||
/** 自动进路偏移量*/
|
||||
signalRouteOffset: { x: -4, y: 0 },
|
||||
/** 自动进路*/
|
||||
signalRouteColor: '#00FF00'
|
||||
},
|
||||
Auto: {
|
||||
/** 自动通过方向*/
|
||||
signalAutoDirection: false,
|
||||
/** 自动通过偏移量*/
|
||||
signalAutoOffset: { x: -4, y: 0},
|
||||
/** 自动进路*/
|
||||
signalAutoRoute: '#00FF00',
|
||||
/** 自动触发*/
|
||||
signalAutoTrigger: '#FFFF00'
|
||||
},
|
||||
Delay: {
|
||||
/** 延迟解锁字体大小*/
|
||||
signalDelayTextFontSize: 9,
|
||||
/** 延时解锁方向*/
|
||||
signalDelayDirection: true,
|
||||
/** 延时解锁偏移量*/
|
||||
signalDelayOffset: { x: 15, y: -10},
|
||||
/** 延迟解锁颜色*/
|
||||
signalDelayTextColor: '#FF0000'
|
||||
},
|
||||
Button: {
|
||||
/** 信号灯按钮距离区段的距离*/
|
||||
signalButtonDistance: 5,
|
||||
/** 信号灯按钮边线*/
|
||||
signalButtonDashColor: '#FFFFFF',
|
||||
/** 信号灯按钮颜色*/
|
||||
signalButtonColor: 'darkgreen',
|
||||
/** 信号灯按钮闪烁颜色*/
|
||||
signalButtonLightenColor: '#E4EF50'
|
||||
}
|
||||
};
|
||||
this[deviceType.StationStand] = {
|
||||
/** 站台和屏蔽门之间的距离*/
|
||||
|
Loading…
Reference in New Issue
Block a user