This commit is contained in:
fan 2021-01-12 13:20:12 +08:00
commit de395f9bb4
6 changed files with 89 additions and 29 deletions

View File

@ -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'
}
};
}

View File

@ -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();
});
}
// 整体图片

View File

@ -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);

View File

@ -537,7 +537,7 @@ const map = {
},
responderList: (state) => {
if (state.map) {
return state.map.responderList || [];
return state.map.responderList;
} else {
return [];
}

View File

@ -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 },

View File

@ -21,7 +21,7 @@ export function buildModelBySection(section, model, list) {
x: vx,
y: vy
},
offset: {
textOffset: {
x: 0,
y: 0
},