joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

修改 应答器 创建的几个优化问题，以及南京线路中心左键弹窗，右键不弹

Browse Source
This commit is contained in:
lVAL 2021-01-18 15:48:05 +08:00
parent 20880fe1fe
commit 7d61451fa9
11 changed files with 92 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env.development
View File

@ -19,3 +19,4 @@ VUE_APP_UPLOAD_API = 'https://upload.joylink.club'
# Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js # Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true
VUE_APP_SOURCE_MAP = true

1
.env.production
View File

@ -5,3 +5,4 @@ NODE_ENV = 'production'
VUE_APP_BASE_API = 'https://api.joylink.club/jlcloud' VUE_APP_BASE_API = 'https://api.joylink.club/jlcloud'
VUE_APP_VOICE_API = 'https://oss.joylink.club/oss/joylink' VUE_APP_VOICE_API = 'https://oss.joylink.club/oss/joylink'
VUE_APP_UPLOAD_API = 'https://upload.joylink.club' VUE_APP_UPLOAD_API = 'https://upload.joylink.club'
VUE_APP_SOURCE_MAP = false

1
.env.staging
View File

@ -5,3 +5,4 @@ NODE_ENV = 'test'
VUE_APP_BASE_API = 'https://test.joylink.club/jlcloud' VUE_APP_BASE_API = 'https://test.joylink.club/jlcloud'
VUE_APP_VOICE_API = 'https://oss.joylink.club/oss/joylink' VUE_APP_VOICE_API = 'https://oss.joylink.club/oss/joylink'
VUE_APP_UPLOAD_API = 'https://upload.joylink.club' VUE_APP_UPLOAD_API = 'https://upload.joylink.club'
VUE_APP_SOURCE_MAP = false

46
src/jmapNew/shape/Responder/index.js
View File

@ -40,16 +40,20 @@ export default class Responder extends Group {
create() { create() {
const model = this.model; const model = this.model;
const responderStyle = this.style.Responder || defaultStyle; const responderStyle = this.style.Responder || defaultStyle;
const distanceX = responderStyle.distance * Math.cos(model.rotate-90); const radian = -Math.PI / 180 * Number(model.rotate-90);
const distanceY = responderStyle.distance * Math.sin(model.rotate-90); const distanceX = -responderStyle.distance * Math.cos(radian);
const distanceY = -responderStyle.distance * Math.sin(radian);
const blockWidth = responderStyle.block.width || 5; const blockWidth = responderStyle.block.width || 5;
const blockHeight = responderStyle.block.height || 12; const blockHeight = responderStyle.block.height || 12;
const blockStyle = responderStyle.block.mapStyle[model.type] || { fill: '#fff'}; const blockStyle = responderStyle.block.mapStyle[model.type] || { fill: '#fff'};
const blockX = model.position.x - blockWidth / 2 - distanceX; const blockX = model.position.x - blockWidth / 2 - distanceX;
const blockY = model.position.y - blockHeight / 2 - distanceY; const blockY = model.position.y - blockHeight / 2 - distanceY;
const textX = blockX + model.textOffset.x; const textRadian = -Math.PI / 180 * Number(180-model.textRotate);
const textY = blockY + model.textOffset.y; const textDistanceX = model.textOffset.y * Math.sin(textRadian) + model.textOffset.x * Math.cos(textRadian);
const textDistanceY = model.textOffset.y * Math.cos(textRadian) - model.textOffset.x * Math.sin(textRadian);
const textX = blockX + textDistanceX + blockWidth;
const textY = blockY + textDistanceY;
const textName = `${model.type}-${model.name}`; const textName = `${model.type}-${model.name}`;
const textFill = responderStyle.text.textFill; const textFill = responderStyle.text.textFill;
const origin = [model.position.x, model.position.y]; const origin = [model.position.x, model.position.y];
@ -100,29 +104,29 @@ export default class Responder extends Group {
} }
}); });
this.text = new Text({ this.text = this.name = new Text({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z + 1, z: this.z + 1,
style: { style: {
x: textX, x: textX,
y: textY, y: textY,
text: textName, text: textName,
fontFamily: this.style.fontFamily, fontFamily: this.style.fontFamily,
fontSize: this.style.fontSize, fontSize: this.style.fontSize,
textFill: textFill, textFill: textFill,
textAlign: 'right' textAlign: 'left'
} }
}); });
if (model.rotate) { if (model.rotate) {
const rotation = -Math.PI / 180 * Number(model.rotate); const rotation = -Math.PI / 180 * Number(model.rotate+180);
[this.block, this.delta1, this.delta2].forEach(el => { [this.block, this.delta1, this.delta2].forEach(el => {
this.transformRotation(el, origin, rotation); this.transformRotation(el, origin, rotation);
}); });
} }
if (model.textRotate) { if (model.textRotate) {
const rotation = -Math.PI / 180 * Number(model.textRotate); const rotation = -Math.PI / 180 * Number(model.textRotate+180);
this.transformRotation(this.text, origin, rotation); this.transformRotation(this.text, origin, rotation);
} }

28
src/scripts/ConstDic.js
View File

@ -1,12 +1,11 @@
// /** /**
// * 真实设备类型 * 鼠标事件
// */ */
// export const RealDeviceType = { export const MouseEvent = {
// Section: '区段', Left: 1,
// Switch: '道岔', Right: 2,
// Signal: '信号机', Wheel: 3
// ScreenDoor: '屏蔽门' }
// };
/** /**
* 权限类型 * 权限类型
*/ */
@ -60,14 +59,6 @@ export const OperateMode = {
DIRECTIVE: '03' DIRECTIVE: '03'
}; };
// /**
// * 分发、转赠
// */
// export const OperatorModel = {
// DISTRIBUTE: '01',
// TRANSFER: '02'
// };
/** /**
* 菜单编号 * 菜单编号
*/ */
@ -128,6 +119,7 @@ export const IbpOperation = {
XXYS: {operate: '09', event: 'XXYS', name: '下行钥匙'}, XXYS: {operate: '09', event: 'XXYS', name: '下行钥匙'},
SXYS: {operate: '11', event: 'SXYS', name: '上行钥匙'} SXYS: {operate: '11', event: 'SXYS', name: '上行钥匙'}
}; };
/** /**
* ibp状态显示条件 * ibp状态显示条件
*/ */
@ -136,12 +128,14 @@ export const IbpShowCondition = {
Show_Open_Screen_Door: {statusKey: 'screenDoorOpenStatus', statusValue:['02'], defaultStatus: 'close'}, Show_Open_Screen_Door: {statusKey: 'screenDoorOpenStatus', statusValue:['02'], defaultStatus: 'close'},
Show_Close_Screen_Door: {statusKey: 'screenDoorOpenStatus', statusValue: ['01'], defaultStatus: 'open'} Show_Close_Screen_Door: {statusKey: 'screenDoorOpenStatus', statusValue: ['01'], defaultStatus: 'open'}
}; };
/** 列车类型 */ /** 列车类型 */
export const TrainType = { export const TrainType = {
PLAN: '计划车', PLAN: '计划车',
HEAD: '头码车', HEAD: '头码车',
MANUAL: '人工车' MANUAL: '人工车'
}; };
/** 仿真成员类型 */ /** 仿真成员类型 */
export const SimulationType = { export const SimulationType = {
DISPATCHER: '行调', DISPATCHER: '行调',

32
src/views/newMap/mapsystemNew/common/index.vue
View File

@ -8,7 +8,7 @@
<script> <script>
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { getDeviceMenuByDeviceType } from '@/scripts/ConstDic'; import { getDeviceMenuByDeviceType, MouseEvent } from '@/scripts/ConstDic';
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler'; import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
import deviceType from '@/jmapNew/constant/deviceType.js'; import deviceType from '@/jmapNew/constant/deviceType.js';
import JlmapVisual from '@/views/newMap/jlmapNew/index'; import JlmapVisual from '@/views/newMap/jlmapNew/index';
@ -80,22 +80,17 @@ export default {
if (section) { if (section) {
device = this.$store.getters['map/getDeviceByCode'](section.relSwitchCode); device = this.$store.getters['map/getDeviceByCode'](section.relSwitchCode);
} }
} }
if (device._type == 'Section' && device.type == '03') { // 过滤道岔相关区段变成道岔model
// 过滤道岔相关区段变成道岔model
if (device._type == 'Section' && device.type == '03') {
device = this.$store.getters['map/getDeviceByCode'](device.switch.code); device = this.$store.getters['map/getDeviceByCode'](device.switch.code);
} }
// if (device._type == 'Section' && device.type == '04') {
// device = null;
// }
return device; return device;
}, },
clickEvent(em) { clickEvent(em) {
var device = { _type: em.deviceType, _code: em.deviceCode }; var device = { _type: em.deviceType, _code: em.deviceCode, _event: MouseEvent.Left };
// var CanClickDeviceList = [
// deviceType.Switch,
// deviceType.Signal,
// deviceType.StationStand
// ];
const lineCode = this.$store.getters['map/lineCode']; const lineCode = this.$store.getters['map/lineCode'];
if (em.deviceType === 'StationStand' && lineCode === '01') { if (em.deviceType === 'StationStand' && lineCode === '01') {
@ -105,16 +100,9 @@ export default {
if (em.deviceCode) { if (em.deviceCode) {
device = this.getDeviceByEm(em); device = this.getDeviceByEm(em);
// if (CanClickDeviceList.includes(em.deviceType)) {
// try {
// // letfMouseSelectDevice(em.deviceCode, this.group);
// } catch (error) {
// console.log('send left mouse click error.');
// }
// }
} }
this.selected = { ...device }; this.selected = { ...device, _event: MouseEvent.Left };
this.$store.dispatch('menuOperation/setSelected', {device: device, subType: em.subType}); this.$store.dispatch('menuOperation/setSelected', {device: device, subType: em.subType});
this.$store.dispatch('menuOperation/setLeftClickCount'); this.$store.dispatch('menuOperation/setLeftClickCount');
if (this.$route.query.lineCode == '07' || this.$route.query.lineCode == '14') { if (this.$route.query.lineCode == '07' || this.$route.query.lineCode == '14') {
@ -139,7 +127,7 @@ export default {
const lineCode = this.$store.getters['map/lineCode']; const lineCode = this.$store.getters['map/lineCode'];
if (em.subType === 'TrainWindow') { if (em.subType === 'TrainWindow') {
if (lineCode != '06') { if (lineCode != '06') {
device = { _type: deviceType.TrainWindow, code: em.deviceCode }; device = { _type: deviceType.TrainWindow, code: em.deviceCode, _event: MouseEvent.Right };
this.$store.dispatch('map/setTrainWindowShow', true); this.$store.dispatch('map/setTrainWindowShow', true);
} }
} else if (em.subType == 'button' && em.deviceType == 'Station') { // 宁波一号线右键显示控制模式 } else if (em.subType == 'button' && em.deviceType == 'Station') { // 宁波一号线右键显示控制模式
@ -162,7 +150,7 @@ export default {
} }
if (device) { if (device) {
device = this.getSelectedByLineCode(device); device = this.getSelectedByLineCode(device);
this.selected = device; this.selected = { ...device, _event: MouseEvent.Right};
if (!this.buttonOperation) { if (!this.buttonOperation) {
this.$store.dispatch('menuOperation/setSelected', {device: device, subType: em.subType}); this.$store.dispatch('menuOperation/setSelected', {device: device, subType: em.subType});
if (!this.checkShouldPop(device)) { if (!this.checkShouldPop(device)) {

32
src/views/newMap/newMapdraft/mapoperate/responder/responderBatch.vue
View File

@ -125,14 +125,36 @@ export default {
sectionCode: '', sectionCode: '',
signalCode: '', signalCode: '',
type: '', type: '',
name: '' name: ''
}); });
}, },
doBatchCreate() { doBatchCreate() {
const models = this.addModel.modelList.map(el => { const groupMap = {}
const section = this.$store.getters['map/getDeviceByCode'](el.sectionCode); const models = [];
return utils.buildModelBySection(section, el, this.responderList);
}); // 分组
this.addModel.modelList.forEach(el => {
if (!groupMap[el.sectionCode]) {
groupMap[el.sectionCode] = []
}
groupMap[el.sectionCode].push(el);
})
// 偏移量计算
Object.keys(groupMap).forEach(code => {
const section = this.$store.getters['map/getDeviceByCode'](code);
const list = groupMap[code];
const length = list.length;
const ox = (section.points[length - 1].x - section.points[0].x) / (length+1);
const oy = (section.points[length - 1].y - section.points[0].y) / (length+1);
list.forEach((el,i) => {
const x = section.points[0].x + ox*(i+1);
const y = section.points[0].y + oy*(i+1);
models.push(utils.buildModelBySection(section, {x, y}, el, this.responderList));
});
})
// 批量创建
this.$emit('updateMapModel', models); this.$emit('updateMapModel', models);
}, },
doBatchReset() { doBatchReset() {

13
src/views/newMap/newMapdraft/mapoperate/responder/responderCreate.vue
View File

@ -83,9 +83,9 @@ export default {
name:'', name:'',
item: [ item: [
{ prop: 'name', label: '应答器名称', type: 'input' }, { prop: 'name', label: '应答器名称', type: 'input' },
{ prop: 'type', label: `应答器类型`, type: 'select', optionLabel: 'name', optionValue: 'value', options: this.responderTypeList }, { prop: 'type', label: `应答器类型`, type: 'select', optionLabel: 'name&&value', optionValue: 'value', options: this.responderTypeList },
{ prop: 'sectionCode', label: '关联区段', type: 'selectHover', optionLabel: 'code', optionValue: 'code', options: this.sectionList, buttonType: 'RelSectionCode', hover: this.hover, buttonShowType: this.isSectionButtonType }, { prop: 'sectionCode', label: '关联区段', type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList, buttonType: 'RelSectionCode', hover: this.hover, buttonShowType: this.isSectionButtonType },
{ prop: 'signalCode', label: '关联信号机', type: 'selectHover', optionLabel: 'code', optionValue: 'code', options: this.signalList, buttonType: 'RelSignalCode', hover: this.hover, buttonShowType: this.isSignalButtonType }, { prop: 'signalCode', label: '关联信号机', type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', options: this.signalList, buttonType: 'RelSignalCode', hover: this.hover, buttonShowType: this.isSignalButtonType },
] ]
} }
} }
@ -101,8 +101,11 @@ export default {
this.addModel[prop] = selected.code; this.addModel[prop] = selected.code;
}, },
create() { create() {
const section = this.$store.getters['map/getDeviceByCode'](this.addModel.sectionCode); const section = this.$store.getters['map/getDeviceByCode'](this.addModel.sectionCode);
const model = utils.buildModelBySection(section, this.addModel, this.responderList); const length = section.points.length;
const x = (section.points[length - 1].x + section.points[0].x) / 2;
const y = (section.points[length - 1].y + section.points[0].y) / 2;
const model = utils.buildModelBySection(section, {x, y}, this.addModel, this.responderList);
this.$refs.createForm.resetForm(); this.$refs.createForm.resetForm();
this.$emit('updateMapModel', model); this.$emit('updateMapModel', model);
} }

8
src/views/newMap/newMapdraft/mapoperate/responder/responderModel.vue
View File

@ -130,9 +130,9 @@ export default {
draw: { draw: {
name: this.$t('map.drawData'), name: this.$t('map.drawData'),
item: [ item: [
{ prop: 'code', label: '应答器编码', type: 'select', optionLabel: 'code', optionValue: 'code', options: this.responderList, deviceChange: this.deviceChange }, { prop: 'code', label: '应答器编码', type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.responderList, deviceChange: this.deviceChange },
{ prop: 'name', label: '应答器名称', type: 'input' }, { prop: 'name', label: '应答器名称', type: 'input' },
{ prop: 'type', label: `应答器类型`, type: 'select', optionLabel: 'name', optionValue: 'value', options: this.responderTypeList }, { prop: 'type', label: `应答器类型`, type: 'select', optionLabel: 'name&&value', optionValue: 'value', options: this.responderTypeList },
{ prop: 'offset', label: '区段偏移值', type: 'number' }, { prop: 'offset', label: '区段偏移值', type: 'number' },
{ prop: 'position', label: '坐标', type: 'coordinate', width: '120px', children: [ { 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.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
@ -144,8 +144,8 @@ export default {
{ prop: 'textOffset.y', firstLevel: 'textOffset', secondLevel: 'y', label: 'y:', 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:'textRotate', label: '文字旋转', type: 'number' },
{ prop: 'sectionCode', label: '关联区段', type: 'selectHover', optionLabel: 'code', optionValue: 'code', options: this.sectionList, buttonType: 'RelModelSectionCode', hover: this.hover, buttonShowType: this.isSectionButtonType }, { prop: 'sectionCode', label: '关联区段', type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList, buttonType: 'RelModelSectionCode', hover: this.hover, buttonShowType: this.isSectionButtonType },
{ prop: 'signalCode', label: '关联信号机', type: 'selectHover', optionLabel: 'code', optionValue: 'code', options: this.signalList, buttonType: 'RelModelSignalCode', hover: this.hover, buttonShowType: this.isSignalButtonType }, { prop: 'signalCode', label: '关联信号机', type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', options: this.signalList, buttonType: 'RelModelSignalCode', hover: this.hover, buttonShowType: this.isSignalButtonType },
{ prop: 'stationCode', label: '关联集中站' + ':', type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.centralizedStationList } { prop: 'stationCode', label: '关联集中站' + ':', type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.centralizedStationList }
] ]
}, },

8
src/views/newMap/newMapdraft/mapoperate/responder/utils.js
View File

@ -1,13 +1,11 @@
import { getUID } from '@/jmapNew/utils/Uid'; import { getUID } from '@/jmapNew/utils/Uid';
export function buildModelBySection(section, model, list) { export function buildModelBySection(section, position, model, list) {
if (section) { if (section) {
const length = section.points.length; const length = section.points.length;
const dx = (section.points[length - 1].x - section.points[0].x); const dx = (section.points[length - 1].x - section.points[0].x);
const dy = (section.points[length - 1].y - section.points[0].y); const dy = (section.points[length - 1].y - section.points[0].y);
const rotate = Math.atan2(dy, dx) * 180 / Math.PI; const rotate = Math.atan2(dy, dx) * 180 / Math.PI;
const vx = (section.points[length - 1].x + section.points[0].x) / 2;
const vy = (section.points[length - 1].y + section.points[0].y) / 2;
return { return {
_type: 'Responder', _type: 'Responder',
@ -15,8 +13,8 @@ export function buildModelBySection(section, model, list) {
rotate: rotate + 90, rotate: rotate + 90,
textRotate: rotate + 90, textRotate: rotate + 90,
position: { position: {
x: vx, x: position.x,
y: vy y: position.y
}, },
textOffset: { textOffset: {
x: 0, x: 0,

2
vue.config.js
View File

@ -32,7 +32,7 @@ module.exports = {
outputDir: outputDir, outputDir: outputDir,
assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录 assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: false, lintOnSave: false,
productionSourceMap: false, // 项目打包后是否压缩 productionSourceMap: process.env.VUE_APP_SOURCE_MAP,
devServer: { devServer: {
port: port, port: port,
host: '0.0.0.0', host: '0.0.0.0',