Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test
This commit is contained in:
commit
de395f9bb4
@ -831,9 +831,18 @@ class SkinCode extends defaultStyle {
|
||||
|
||||
this[deviceType.Responder] = {
|
||||
block: {
|
||||
mapStyle: {
|
||||
FB: { fill: '#fff' },
|
||||
VB: { fill: '#666' },
|
||||
IB: { fill: '#666' }
|
||||
}
|
||||
},
|
||||
text: {
|
||||
}
|
||||
delta: {
|
||||
fill: '#fff'
|
||||
},
|
||||
text: {
|
||||
textFill: '#fff'
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
@ -4,7 +4,7 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Rect from 'zrender/src/graphic/shape/Rect';
|
||||
import Text from 'zrender/src/graphic/Text';
|
||||
|
||||
import Polygon from 'zrender/src/graphic/shape/Polygon';
|
||||
|
||||
export default class Responder extends Group {
|
||||
constructor(model, style) {
|
||||
@ -16,21 +16,27 @@ export default class Responder extends Group {
|
||||
this.style = style;
|
||||
this.isShowShape = true;
|
||||
this.z = model.zIndex || 1;
|
||||
this.create();
|
||||
if (model.previewOrMapDraw) {
|
||||
this.create();
|
||||
this.setState(model);
|
||||
}
|
||||
}
|
||||
|
||||
create() {
|
||||
const model = this.model;
|
||||
const responderStyle = this.style.Responder;
|
||||
const blockX = model.position.x;
|
||||
const blockY = model.position.y;
|
||||
const blockWidth = this.style.Responder.block.width || 5;
|
||||
const blockHeight = this.style.Responder.block.height || 12;
|
||||
const blockStroke = this.style.Responder.block.stroke || '#000';
|
||||
const blockFill = this.style.Responder.block.fill || '#fff';
|
||||
const textX = model.position.x + model.offset.x;
|
||||
const textY = model.position.y + model.offset.y;
|
||||
const blockWidth = responderStyle.block.width || 5;
|
||||
const blockHeight = responderStyle.block.height || 12;
|
||||
const blockStroke = responderStyle.block.stroke || '#000';
|
||||
const blockStyle = responderStyle.block.mapStyle[model.type] || { fill: '#000'};
|
||||
const textX = model.position.x + model.textOffset.x;
|
||||
const textY = model.position.y + model.textOffset.y;
|
||||
const textName = `${model.type}-${model.name}`;
|
||||
const textColor = this.style.Responder.text.stroke || '#fff';
|
||||
const textFill = responderStyle.text.textFill || '#fff';
|
||||
const deltaFill = responderStyle.delta.fill || '#fff';
|
||||
const padding = 1.2;
|
||||
|
||||
this.block = new Rect({
|
||||
zlevel: this.model.zlevel,
|
||||
@ -43,17 +49,10 @@ export default class Responder extends Group {
|
||||
},
|
||||
style: {
|
||||
stroke: blockStroke,
|
||||
fill: blockFill
|
||||
...blockStyle
|
||||
}
|
||||
});
|
||||
|
||||
if (model.rotate) {
|
||||
const origin = [blockX, blockY];
|
||||
const rotation = -Math.PI / 180 * Number(model.rotate);
|
||||
this.transformRotation(this.block, origin, rotation);
|
||||
}
|
||||
this.add(this.block);
|
||||
|
||||
this.text = new Text({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 1,
|
||||
@ -63,22 +62,68 @@ export default class Responder extends Group {
|
||||
text: textName,
|
||||
fontFamily: this.style.fontFamily,
|
||||
fontSize: this.style.fontSize,
|
||||
textFill: textColor,
|
||||
textFill: textFill,
|
||||
textAlign: 'right'
|
||||
}
|
||||
});
|
||||
|
||||
this.delta1 = new Polygon({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 1,
|
||||
shape: {
|
||||
points: [
|
||||
[blockX + blockWidth / 2, blockY + blockWidth],
|
||||
[blockX + padding, blockY + padding],
|
||||
[blockX + blockWidth - padding, blockY + padding]
|
||||
]
|
||||
},
|
||||
style: {
|
||||
fill: deltaFill
|
||||
}
|
||||
});
|
||||
|
||||
this.delta2 = new Polygon({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 1,
|
||||
shape: {
|
||||
points: [
|
||||
[blockX + blockWidth / 2, blockY + blockHeight - blockWidth],
|
||||
[blockX + padding, blockY + blockHeight - padding],
|
||||
[blockX + blockWidth - padding, blockY + blockHeight - padding]
|
||||
]
|
||||
},
|
||||
style: {
|
||||
fill: deltaFill
|
||||
}
|
||||
});
|
||||
|
||||
if (model.rotate) {
|
||||
const origin = [blockX, blockY];
|
||||
const rotation = -Math.PI / 180 * Number(model.rotate);
|
||||
[this.block, this.delta1, this.delta2].forEach(el => {
|
||||
this.transformRotation(el, origin, rotation);
|
||||
});
|
||||
}
|
||||
|
||||
if (model.textRotate) {
|
||||
const origin = [textX, textY];
|
||||
const rotation = -Math.PI / 180 * Number(model.textRotate);
|
||||
this.transformRotation(this.text, origin, rotation);
|
||||
}
|
||||
|
||||
this.add(this.text);
|
||||
[this.block, this.delta1, this.delta2, this.text].forEach(el => {
|
||||
this.add(el);
|
||||
});
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
if (!this.isShowShape) return;
|
||||
const responderStyle = this.style.Responder;
|
||||
const style = responderStyle.block.mapStyle[model.type] || { fill: '#000'};
|
||||
this.block.setStyle(style);
|
||||
[this.delta1, this.delta2].forEach(el => {
|
||||
model.type == 'IB' ? el.show() : el.hide();
|
||||
});
|
||||
}
|
||||
|
||||
// 整体图片
|
||||
|
@ -263,6 +263,7 @@ export function parser(data, skinCode, showConfig) {
|
||||
mapDevice[elem.code] = createDevice(deviceType.DirectionRod, elem, propConvert, showConfig);
|
||||
}, this);
|
||||
|
||||
if (!data.responderList) { data.responderList = []; };
|
||||
zrUtil.each(data.responderList || [], elem => {
|
||||
mapDevice[elem.code] = createDevice(deviceType.Responder, elem, propConvert, showConfig);
|
||||
}, this);
|
||||
|
@ -537,7 +537,7 @@ const map = {
|
||||
},
|
||||
responderList: (state) => {
|
||||
if (state.map) {
|
||||
return state.map.responderList || [];
|
||||
return state.map.responderList;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
|
@ -48,7 +48,7 @@ export default {
|
||||
name: '',
|
||||
rotate: 0,
|
||||
textRotate: 0,
|
||||
offset: {
|
||||
textOffset: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
@ -56,6 +56,7 @@ export default {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
offset: 0,
|
||||
sectionCode: '',
|
||||
stationCode: ''
|
||||
},
|
||||
@ -72,6 +73,9 @@ export default {
|
||||
rotate: [
|
||||
{ required: true, message: '请输入应答器旋转角度', trigger: 'blur' }
|
||||
],
|
||||
offset: [
|
||||
{ type: 'number', required: true, message: '请输入应答器文字旋转角度', trigger: 'blur', min: 0 }
|
||||
],
|
||||
textRotate: [
|
||||
{ required: true, message: '请输入应答器文字旋转角度', trigger: 'blur' }
|
||||
],
|
||||
@ -87,10 +91,10 @@ export default {
|
||||
'position.y': [
|
||||
{ required: true, message: '请输入应答器坐标y', trigger: 'blur' }
|
||||
],
|
||||
'offset.x': [
|
||||
'textOffset.x': [
|
||||
{ required: true, message: '请输入应答器偏移x', trigger: 'blur' }
|
||||
],
|
||||
'offset.y': [
|
||||
'textOffset.y': [
|
||||
{ required: true, message: '请输入应答器偏移y', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
@ -115,14 +119,15 @@ export default {
|
||||
{ prop: 'code', label: '应答器编码', type: 'select', optionLabel: 'code', optionValue: 'code', options: this.responderList, deviceChange: this.deviceChange },
|
||||
{ prop: 'name', label: '应答器名称', type: 'input' },
|
||||
{ prop: 'type', label: `应答器类型`, type: 'select', optionLabel: 'name', optionValue: 'value', options: this.responderTypeList },
|
||||
{ prop: 'offset', label: '区段偏移值', type: 'number' },
|
||||
{ prop: 'position', label: '坐标', type: 'coordinate', width: '120px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
|
||||
] },
|
||||
{ prop: 'rotate', label: '应答器旋转', type: 'number' },
|
||||
{ prop: 'offset', label: '文字偏移', type: 'coordinate', width: '120px', children: [
|
||||
{ prop: 'offset.x', firstLevel: 'offset', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
|
||||
{ prop: 'offset.y', firstLevel: 'offset', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
|
||||
{ prop: 'textOffset', label: '文字偏移', type: 'coordinate', width: '120px', children: [
|
||||
{ prop: 'textOffset.x', firstLevel: 'textOffset', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
|
||||
{ prop: 'textOffset.y', firstLevel: 'textOffset', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
|
||||
] },
|
||||
{ prop:'textRotate', label: '文字旋转', type: 'number' },
|
||||
{ prop: 'sectionCode', label: '关联区段', type: 'select', optionLabel: 'code', optionValue: 'code', options: this.sectionList },
|
||||
|
@ -21,7 +21,7 @@ export function buildModelBySection(section, model, list) {
|
||||
x: vx,
|
||||
y: vy
|
||||
},
|
||||
offset: {
|
||||
textOffset: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user