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:
fan 2021-05-24 11:29:59 +08:00
parent 22cfed1774
commit 4796e7f648
19 changed files with 479 additions and 530 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/jmapNew/config/skinCode/xian_01.js
View File

@ -638,6 +638,7 @@ class SkinCode extends defaultStyle {
horizontalDistance: 7// 箭头三角水平高度
};
this[deviceType.Train] = {
moreTrainDetail: true,
trainBody: {
fontFamily: 'consolas',
trainBodyLineWidth: 0, // 车身line宽
@ -792,7 +793,7 @@ class SkinCode extends defaultStyle {
};
this[deviceType.FloodGate] = {};
this[deviceType.DirectionRod] = {};
this[deviceType.IndicatorLight] = {};
this[deviceType.IndicatorLight] = {};
}
}

1
src/jmapNew/map.js
View File

@ -212,7 +212,6 @@ class Jlmap {
this.screenFlag = false;
this.$painter.updateTransform({ scaleRate: opts.scaleRate, offsetX: opts.offsetX, offsetY: opts.offsetY });
}
setUpdateScreen(opts) {
this.setRecover({ scaleRate: 1, offsetX: 0, offsetY: 0 });
this.screenFlag = true;

12
src/jmapNew/shape/graph/Psd/index.js
View File

@ -18,7 +18,7 @@ export default class Line2 extends Group {
this.isShowShape = true;
this.create();
this.setState(model);
this.setShowMode();
this.setShowMode(true);
this.checkIsDrawMap();
}
@ -76,12 +76,18 @@ export default class Line2 extends Group {
this.on('mouseover', () => { this.highlight.mouseover(); });
}
}
setShowMode() {
setShowMode(flag) {
const showMode = this.model.showMode;
if (showMode == '05') {
if (!flag) {
this.eachChild(item => {
item.show();
});
this.setState(this.model);
}
if (showMode == '05') {
this.eachChild(item => {
item.hide();
});
}
}
setShowStation(flag) {

14
src/jmapNew/shape/graph/Section/index.js
View File

@ -66,7 +66,7 @@ export default class Section extends Group {
this.create();
this.createMouseEvent();
this.setState(model);
this.setShowMode();
this.setShowMode(true);
}
create() {
@ -434,7 +434,7 @@ export default class Section extends Group {
model.preGreen && this.line.setStyle({stroke: '#00FF00'});
model.preBlue && this.line.setStyle({stroke: '#4A76B7'});
} else {
this.handleSwitchSection(model, flag);
model.showMode !== '05' && this.handleSwitchSection(model, flag);
// 顺序代表优先级
/** 宁波三号线 运行线显示状态 (前端自定义状态）*/
// model.isRunLineShow && this.showRunLine();
@ -469,7 +469,7 @@ export default class Section extends Group {
model.signalDerailer && exec(DerailerMap[model.signalDerailer], this.derailer, this.style);
/** 道岔区段更新岔心颜色 */
if (model.type === '03' && model.switch) {
if (model.type === '03' && model.switch && model.showMode !== '05') {
const sectionSwitch = this.mapDevice[model.switch.code];
if (sectionSwitch && sectionSwitch.sectionACode === model.code) {
sectionSwitch.instance && sectionSwitch.instance.setState(sectionSwitch);
@ -573,7 +573,13 @@ export default class Section extends Group {
mouseover() {
this.line && this.line.setStyle({ stroke: 'rgba(255,255,255,0.8)' });
}
setShowMode() {
setShowMode(flag = false) {
if (!flag) {
this.eachChild(item => {
item.show();
});
this.setState(this.model);
}
if (this.model.showMode === '05') {
this.line.setStyle({stroke: this.style.Section.line.troColor, lineWidth: this.style.Section.line.troWidth});
this.separator && this.separator.hide();

10
src/jmapNew/shape/graph/Signal/index.js
View File

@ -212,8 +212,8 @@ class Signal extends Group {
this.createMouseEvent();
this.checkIsDrawMap();
this.transformRotation(this);
this.setShowMode();
this.setState(model);
this.setShowMode(true);
// this.checkIsDrawMap();
}
@ -1143,8 +1143,14 @@ class Signal extends Group {
});
}
}
setShowMode() {
setShowMode(flag = false) {
const showMode = this.model.showMode;
if (!flag) {
this.eachChild(item => {
item.show();
});
this.setState(this.model);
}
if (showMode == '03') {
this.lowButton && this.lowButton.show();
this.model.prdType = '01';

2
src/jmapNew/shape/graph/Station/index.js
View File

@ -776,6 +776,8 @@ export default class Station extends Group {
setShowMode() {
if (this.model.showMode === '05') {
this.createTroButton(); // 创建轨道预览按钮
} else {
this.troButton && this.troButton.hide();
}
}
setShowStation(flag) {

10
src/jmapNew/shape/graph/Switch/index.js
View File

@ -31,7 +31,7 @@ export default class Switch extends Group {
this.createMouseEvent();
this.setState(model);
this.checkIsDrawMap();
this.setShowMode();
this.setShowMode(true);
}
createMouseEvent() {
@ -798,7 +798,13 @@ export default class Switch extends Group {
this.on('mouseover', () => { this.highlight.mouseover(); });
}
}
setShowMode() {
setShowMode(flag = false) {
if (!flag) {
this.eachChild(item => {
item.show();
});
this.setState(this.model);
}
if ( this.model.showMode === '05') {
this.eachChild(item => {
item.hide();

2
src/jmapNew/shape/graph/Train/EMouse.js
View File

@ -52,7 +52,7 @@ class EMouse extends Group {
if (LangStorage.getLang() == 'en') {
text = ` The planned train: ${trainType} \n Table No.: ${this.device.model.serviceNumber} \n Train Trip No.: ${this.device.model.tripNumber}\n Destination: ${this.device.model.destinationCode ? this.device.model.destinationCode : ''}\n Train No.: ${this.device.model.groupNumber}\n Early or late: ${destinationText}\n Direction: ${direction ? 'up' : 'down'}\n Crew No.: \n Start Station: \n Terminal Station: \n Occupied Track: ${this.device.model.sectionModel ? (this.device.model.sectionModel.parentName ? this.device.model.sectionModel.parentName : this.device.model.sectionModel.name) : ''}\n Current Station: \n Train-ground communication: normal \n Operation Speed level: 4 \n Detained: ${this.device.model.hold ? 'Detained' : 'Normal'}\n \n 跳停状态: ${this.device.model.jump ? 'Skip to continue moving' : 'Normal'}Stationary: ${!this.device.model.stop ? 'No' : 'Yes'}\n Blocked: No \n Speed: ${this.device.model.speed || 0} km/h \n Authorized Distance: ${this.device.model.maLen || 0} m`;
} else {
if (Vue.prototype.$jlmap.lineCode == '11' || Vue.prototype.$jlmap.lineCode == '10') {
if (this.device.style.Train.moreTrainDetail) {
text = `列车类型: ${trainType}\n来\0\0\0\0源:人工标记\n车\0组\0号: ${this.device.model.groupNumber}\n表\0\0\0\0号: ${this.device.model.serviceNumber}\n车\0次\0号: ${this.device.model.tripNumber}\n目的地号: ${this.device.model.destinationCode ? this.device.model.destinationCode : ''}\n早\0晚\0点: ${destinationText}\n运行方向: ${direction ? '上行' : '下行'}\nATP报告方向: ${direction ? '上行' : '下行'}\n起点站名: \n终点站名: \n占用轨道: ${this.device.model.sectionModel ? (this.device.model.sectionModel.parentName ? this.device.model.sectionModel.parentName : this.device.model.sectionModel.name) : ''}\n所在车站: \n车次通信: 通信车\n运行时间: \n停站时间: \n扣车状态: ${ this.device.model.hold ? '扣车' : '正常'}\n车载扣车: 不执行\n跳停状态: ${this.device.model.jump ? '跳停' : '正常'}\n停稳状态: ${!this.device.model.stop ? '未停稳' : '停稳'}\n阻塞状态: 无\n列车状态: ${this.device.model.runLevel || 'CTC'}车\n最高信号系统控制: CTC\n驾驶模式: ${this.device.model.driveMode}模式\n最高ATP模式: AM\nATP1状态: 激活\nATP2状态: 备用\n速度: ${this.device.model.speed || 0} km/h\n车门状态: ${this.device.model.speed ? '关闭' : direction ? '左开右关' : '左关右开'}\n制动状态: 无紧急制动\n停车保证: 可保证停车\n站台无法进入: 否\n前方站台停车点: 中间\n折法策略: \n折返状态: \n屏蔽门开门许可: 是\n运营里程: 无效\n总重量: 196T\n车长: 11860cm\n列车编组: 1`;
} else {
text = `列车类型: ${trainType} \n表\0\0\0\0号: ${this.device.model.serviceNumber}\n车\0次\0号: ${this.device.model.tripNumber}\n目的地号: ${this.device.model.destinationCode ? this.device.model.destinationCode : ''}\n车\0组\0号: ${this.device.model.groupNumber}\n早\0晚\0点: ${destinationText}\n运行方向: ${direction ? '上行' : '下行'}\n乘务组号: \n起点站名: \n终点站名: \n占用轨道: ${this.device.model.sectionModel ? (this.device.model.sectionModel.parentName ? this.device.model.sectionModel.parentName : this.device.model.sectionModel.name) : ''}\n所在车站: \n车地通信: 正常\n运行等级: 4\n扣车状态: ${this.device.model.hold ? '扣车' : '正常'}\n跳停状态: ${this.device.model.jump ? '跳停' : '正常'} \n停稳状态: ${!this.device.model.stop ? '未停稳' : '停稳'}\n阻塞状态: 无\n列车速度: ${this.device.model.speed || 0} km/h\n列车移动授权距离: ${this.device.model.maLen || 0} m`;

8
src/jmapNew/shape/graph/Train/TrainBody.js
View File

@ -45,10 +45,10 @@ export default class TrainBody extends Group {
: model.tripNumber || style.Train.trainTarget.defaultTripNumber); // 车次号
const groupNumber = style.Train.trainTargetNumber.groupNumberPrefix + (style.Train.trainTargetNumber.lineNumber || '') + (model.groupNumber || style.Train.trainTargetNumber.defaultGroupNumber); // 车组号
const serviceNumber = style.Train.trainServer.serviceNumberPrefix + (model.serviceNumber || model.model.specialServiceNumber || style.Train.trainServer.defaultServiceNumber);// 服务号(表号)
let targetCode = style.Train.trainNumber.targetCodePrefix + (model.destinationCode || style.Train.trainNumber.defaultTargetCode); // 目的地码
if (Vue.prototype.$jlmap.lineCode == '09') { // 暂时先写死 后面有了删掉就好
targetCode = '01';
}
const targetCode = style.Train.trainNumber.targetCodePrefix + (model.destinationCode || style.Train.trainNumber.defaultTargetCode); // 目的地码
// if (Vue.prototype.$jlmap.lineCode == '09') { // 暂时先写死 后面有了删掉就好
// targetCode = '01';
// }
// 服务号
this.textTrainServer = new ETextName({
zlevel: model.zlevel,

290
src/jmapNew/theme/nanjing_02/menus/dialog/mapVisual.vue
View File

@ -1,290 +0,0 @@
<template>
<div
ref="jlmapCanvas"
class="jlmap-canvas"
>
<div :id="canvasId" class="display_canvas" />
</div>
</template>
<script>
import Jlmap from '@/jmapNew/map';
import { deepAssign } from '@/utils/index';
import deviceType from '@/jmapNew/constant/deviceType';
import { mapGetters } from 'vuex';
import { parser } from '@/jmapNew/parser/parser-graph';
export default {
name: 'JLocalmapVisual',
props: {
type: {
type: String,
required: true
},
deviceCode: {
type: String,
default: () => {
return '';
}
}
},
data() {
return {
loading: true,
offset: {
x: 0,
y: 0
},
map: null,
mapDevice: {},
routeData: [],
mapData: null,
autoReentryData: []
};
},
computed: {
canvasId() {
return ['map', Math.random().toFixed(5) * 100000].join('_');
},
...mapGetters('map', [
'bigScreenConfig'
]),
width() {
return this.$store.state.app.width - 30;
},
height() {
return this.$store.state.app.height - 60;
}
},
watch: {
'$store.state.config.canvasSizeCount': function (val) {
this.resetSize();
},
'$store.state.map.mapViewLoadedCount':function() {
this.$store.dispatch('map/setTrainWindowShow', false);
this.map.off('zoom');
this.handleUpdateScreen();
}
},
created() {
},
mounted() {
this.init();
},
beforeDestroy() {
if (this.map) {
this.map.dispose();
this.map = null;
}
},
methods: {
init() {
document.getElementById(this.canvasId).oncontextmenu = function (e) {
return false;
};
if (!this.map) {
this.map = new Jlmap({
dom: document.getElementById(this.canvasId),
config: {
renderer: 'canvas',
width: this.width,
height: this.height
},
options: {
scaleRate: 1,
offsetX: 0,
offsetY: 0,
zoomOnMouseWheel: false
},
showConfig: {
prdType: '02',
previewOrMapDraw: true,
showMode: '02'
},
methods: {}
});
}
this.map.on('selected', this.onSelected, this);
window.document.oncontextmenu = function () {
return false;
};
},
loadData(mapData, con) {
try {
this.mapData = mapData;
// if (this.mapData.skinVO) {
// const config = this.map.getShowConfig();
// Object.assign(config, con);
// this.mapDevice = parser(this.mapData, this.mapData.skinVO.code, config);
// }
this.mapDevice = this.$store.state.map.mapDevice;
this.setMap(this.mapData, this.mapDevice);
const nameList = Object.keys(this.$store.state.map.map || {});
let list = [];
nameList.forEach(item => {
if (item !== 'skinVO') {
const data = this.$store.state.map.map[item];
if (data && data.constructor === Array) {
list = [...list, ...data];
}
}
});
console.log(con, con.showMode, '=====');
this.map.updateShowMode(list, con.showMode); // 二次过滤
} catch (error) {
console.log('[ERROR] ', error);
}
},
onSelected(em) {
if (em.deviceType === 'Station' && em.subType === 'troButton') {
this.$emit('goTroDetail', em.deviceCode);
}
},
// 设置地图
setMap(data, mapDevice) {
if (data.skinVO) {
this.routeData = this.$store.state.map.routeData;
this.autoReentryData = this.$store.state.map.autoReentryData;
this.map.setMap(data, mapDevice, {
routeData: this.routeData,
autoReentryData: this.autoReentryData
});
if (this.type === 'troDetail') {
this.setCenter(this.deviceCode);
} else {
this.handleUpdateScreen();
}
} else {
this.mapDevice = {};
this.map.clear();
}
},
setCenter(deviceCode) {
this.map.setCenter(deviceCode);
},
handleUpdateScreen() {
this.maskOpen = false;
if (this.bigScreenConfig.bigScreenSplitConfig && this.bigScreenConfig.bigScreenSplitConfig.length) {
const offsetList = this.bigScreenConfig.offsetList;
const width = this.bigScreenConfig.width;
const height = this.bigScreenConfig.height;
if (this.widthLeft) {
const size = {
width: (this.$store.state.app.width - (this.widthLeft || 450) - 2) * width,
height: this.height * height,
list: this.bigScreenConfig.bigScreenSplitConfig.map(ele => ele.position),
offsetList: offsetList
};
this.map.setUpdateScreen(size);
} else {
const size = {
width: (this.$store.state.app.width - 2) * width,
height: this.$store.state.app.height * height,
list: this.bigScreenConfig.bigScreenSplitConfig.map(ele => ele.position),
offsetList: offsetList
};
this.map.setUpdateScreen(size);
}
} else {
this.maskOpen = true;
// this.$messageBox('该线路没有大屏切割位置信息, 请前往地图绘制编辑');
}
},
// 重置jlmap宽高
resetSize() {
this.$nextTick(() => {
this.map && this.map.resize({ width: this.width, height: this.height });
});
},
// 设置显示图层
setLevelVisible(levels) {
this.map && this.map.setLevelVisible(levels);
},
setMapFree() {
const list = [];
Object.values(this.mapDevice).forEach((elem) => {
const code = elem.code;
const type = elem._type;
// 列车不需要设置默认状态
type != deviceType.Train &&
list.push({ code, _type: type, _free: true });
});
this.map.update(list, false);
},
// 设置中心偏移
setCenterWithOffset(code, dx, y) {
this.map.setCenterWithOffset(code, dx, y - this.height / 2);
},
// 更新地图数据
updateMapDevice(elems) {
const list = [];
elems.forEach((elem) => {
if (elem.code) {
list.push(deepAssign(this.mapDevice[elem.code], elem));
}
});
this.map.update(list, false);
},
getDeviceByCode(code) {
return this.mapDevice[code];
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.mask {
opacity: 0;
background: #000;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
}
.jlmap-canvas {
position: relative;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
background: #000;
float: left;
}
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 32px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-weight: 700;
}
.zoom-view {
position: absolute;
bottom: 0;
background: #fff;
padding-top: 5px;
height: 42px;
border-bottom: 1px #f3f3f3 solid;
border-right: 1px #f3f3f3 solid;
}
/deep/ {
.el-form.el-form--inline {
height: 28px !important;
line-height: 28px !important;
}
.el-loading-mask {
background-color: rgba(0, 0, 0, 0.3);
}
}
</style>

79
src/jmapNew/theme/nanjing_02/menus/dialog/rps.vue
View File

@ -1,79 +0,0 @@
<template>
<el-dialog
class="haerbin-01__systerm"
:modal="false"
:title="title"
:visible.sync="show"
:fullscreen="true"
:before-close="doClose"
append-to-body
:z-index="2000"
>
<map-visual ref="map" type="rps" />
</el-dialog>
</template>
<script>
import MapVisual from './mapVisual';
export default {
name: 'RPS',
components: {
MapVisual
},
data() {
return {
dialogShow: false,
mapData: null
};
},
computed: {
show() {
return this.dialogShow && !this.$store.state.menuOperation.break;
},
title() {
return '背投系统';
}
},
watch: {
'$store.state.socket.equipmentStatus': function (val) {
if (val.length) {
this.statusMessage(val);
}
}
},
methods: {
doShow() {
this.dialogShow = true;
this.$nextTick(function () {
this.mapData = JSON.parse(JSON.stringify(this.$store.state.map.map));
this.$refs.map.loadData(this.mapData, {});
});
},
doClose() {
this.loading = false;
this.dialogShow = false;
this.$store.dispatch('training/emitTipFresh');
this.$store.dispatch('map/setTrainWindowShow', false);
},
async statusMessage(list) {
// await this.$store.dispatch('training/updateMapState', list);
// this.$refs.
await this.$store.dispatch('socket/setEquipmentStatus');
}
}
};
</script>
<style scoped>
/deep/ .el-dialog {
background: rgba(100, 100, 100, 1) !important;
position: relative;
border: 2px solid rgb(144, 144, 144, 0.8);
border-radius: 6px;
font-size: 14px;
}
/deep/ .el-dialog .el-dialog__body{
background: rgba(100, 100, 100, 1) !important;
border: 0 !important;
}
</style>

77
src/jmapNew/theme/nanjing_02/menus/dialog/tro.vue
View File

@ -1,77 +0,0 @@
<template>
<el-dialog
class="haerbin-01__systerm"
:modal="false"
:title="title"
:visible.sync="show"
:fullscreen="true"
:before-close="doClose"
append-to-body
:z-index="2000"
>
<map-visual ref="map" type="tro" @goTroDetail="goTroDetail" />
</el-dialog>
</template>
<script>
import MapVisual from './mapVisual';
export default {
name: 'TRO',
components: {
MapVisual
},
data() {
return {
dialogShow: false,
mapData: null
};
},
computed: {
show() {
return this.dialogShow && !this.$store.state.menuOperation.break;
},
title() {
return '轨道总览';
}
},
methods: {
doShow() {
this.dialogShow = true;
this.$nextTick(function () {
const map = this.$store.state.map.map;
this.mapData = JSON.parse(JSON.stringify(map));
this.$refs.map.loadData(this.mapData, { showMode: '05' });
});
},
goTroDetail(deviceCode) {
this.doClose();
this.$emit('goTroDetail', deviceCode);
},
doClose() {
this.loading = false;
this.dialogShow = false;
}
}
};
</script>
<style scoped>
/deep/ .el-dialog {
background: rgba(100, 100, 100, 1);
position: relative;
border: 2px solid rgb(144, 144, 144, 0.8);
border-radius: 6px;
font-size: 14px;
}
/deep/ .el-dialog .el-dialog__body{
background: rgba(100, 100, 100, 1);
border: 0;
}
/deep/ .el-dialog .el-dialog__header {
padding: 5px;
height: 30px;
}
/deep/ .el-dialog .el-dialog__title {
color: #fff;
}
</style>

15
src/jmapNew/theme/nanjing_02/menus/menuBar.vue
View File

@ -170,10 +170,6 @@
<alarm-table-hmi ref="alarmTableHmi" />
<train-control ref="trainControl" :offset="10" />
<log-detail ref="logDetail" />
<rps-dialog ref="rpsDialog" />
<tra-dialog ref="traDialog" />
<tro-dialog ref="troDialog" @goTroDetail="goTroDetail" />
<tro-detail-dialog ref="troDetailDialog" :station-list="stationList" @goTroDialog="troClick" />
<audio id="buzzer" controls loop="loop" style="width: 0;height: 0">
<source :src="buzzerAudio" type="audio/mpeg">
</audio>
@ -189,11 +185,6 @@ import BuzzerAudio from '@/assets/buzzer.mp3';
import AlarmTableHmi from './menuDialog/alarmTableHmi';
import AlarmTableLow from './menuDialog/alarmTableLow';
import TrainControl from './dialog/trainControl';
import RpsDialog from './dialog/rps';
import TraDialog from './dialog/tra';
import TroDialog from './dialog/tro';
import TroDetailDialog from './dialog/troDetail';
import LogDetail from './menuDialog/logDetail';
export default {
@ -202,11 +193,7 @@ export default {
AlarmTableLow,
AlarmTableHmi,
TrainControl,
LogDetail,
RpsDialog,
TroDialog,
TraDialog,
TroDetailDialog
LogDetail
},
props: {
selected: {

31
src/views/newMap/displayBaSiDi/baSiDi.vue
View File

@ -5,6 +5,7 @@
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
z-index="1999"
:modal="false"
width="100%"
>
@ -103,14 +104,6 @@
</el-row>
</div>
<alarm-table-hmi ref="alarmTableHmi" />
<rps-dialog ref="rpsDialog" />
<tro-dialog ref="troDialog" @goTroDetail="goTroDetail" />
<tro-detail-dialog
ref="troDetailDialog"
:station-list="stationList"
:train-list="trainList"
@goTroDialog="troClick"
/>
<audio id="buzzer" controls loop="loop" style="width: 0;height: 0">
<source :src="buzzerAudio" type="audio/mpeg">
</audio>
@ -132,17 +125,11 @@ import { mapGetters } from 'vuex';
import { timeFormat } from '@/utils/date';
import BuzzerAudio from '@/assets/buzzer.mp3';
import AlarmTableHmi from '@/jmapNew/theme/nanjing_02/menus/menuDialog/alarmTableHmi';
import RpsDialog from '@/jmapNew/theme/nanjing_02/menus/dialog/rps';
import TroDialog from '@/jmapNew/theme/nanjing_02/menus/dialog/tro';
import TroDetailDialog from '@/jmapNew/theme/nanjing_02/menus/dialog/troDetail';
import { prefixIntrger } from '@/utils/date';
export default {
name: 'BaSiDi',
components: {
AlarmTableHmi,
RpsDialog,
TroDialog,
TroDetailDialog
AlarmTableHmi
},
props: {
@ -215,6 +202,13 @@ export default {
// const date = new Date(+new Date(`${new Date().toLocaleDateString()} ${timeFormat(time)}`));
// this.initDate(date);
},
// '$store.state.menuOperation.selectedCount':function(em) {
// const device = this.$store.state.menuOperation.selected;
// if (device && device._type === 'Station' && this.$store.state.menuOperation.subType === 'troButton') {
// this.$refs.troDialog.doClose();
// setTimeout(() => { this.goTroDetail(device.code); }, 5000);
// }
// },
'$store.state.socket.simulationAlarmInfo': function(val) {
(val || []).forEach(item => {
if (!item.confirmed) {
@ -288,13 +282,10 @@ export default {
}
},
rpsClick() {
this.$refs.rpsDialog.doShow();
this.$emit('rpsClick');
},
troClick() {
this.$refs.troDialog.doShow();
},
goTroDetail(deviceCode) {
this.$refs.troDetailDialog.doShow(deviceCode);
this.$emit('troClick');
},
selectBeginTime() {
this.$emit('selectBeginTime');

35
src/views/newMap/displayBaSiDi/index.vue
View File

@ -4,10 +4,14 @@
ref="baSiDi"
:is-disable="isDisable"
:data-error="dataError"
@rpsClick="rpsClick"
@troClick="troClick"
@end="end"
@back="back"
@selectBeginTime="selectBeginTime"
/>
<rps-dialog ref="rpsDialog" :train-list="trainList" />
<tro-dialog ref="troDialog" :train-list="trainList" :station-list="stationList" />
<set-time ref="setTime" @ConfirmSelectBeginTime="start" />
</div>
</template>
@ -25,6 +29,8 @@ import { EventBus } from '@/scripts/event-bus';
import { getSimulationMemberList, getAllSimulationUser } from '@/api/simulation';
import { getMemberListCommon, getUserListCommon } from '@/api/rtSimulation';
import BaSiDi from './baSiDi';
import RpsDialog from './rps';
import TroDialog from './tro';
import parseStatus from '@/utils/parseStatus';
export default {
@ -32,7 +38,9 @@ export default {
components: {
// MapSystemDraft
BaSiDi,
SetTime
SetTime,
RpsDialog,
TroDialog
},
data() {
return {
@ -49,6 +57,10 @@ export default {
...mapGetters([
'canvasWidth'
]),
...mapGetters('map', [
'stationList',
'trainList'
]),
mode() {
return this.$route.params.mode;
},
@ -113,6 +125,11 @@ export default {
'$store.state.socket.memberChangeCount': function () { // 仿真成员变更
this.initMemberUserInfo();
},
'$store.state.socket.simulationStart':function(val) {
if (val) {
this.$store.dispatch('training/simulationStart');
}
},
$route() {
if (!this.isLesson && !this.isExam) {
this.initLoadData();
@ -122,7 +139,6 @@ export default {
beforeDestroy() {
this.clearSubscribe();
this.clearSubscribeNew();
// this.clearAllTimer();
clearSimulation(this.group);
this.$store.dispatch('training/reset');
},
@ -160,9 +176,12 @@ export default {
this.$router.go(-1);
},
async statusMessage(list) {
// await this.$store.dispatch('training/updateMapState', list);
this.$store.commit('map/updateMapDevice', list);
// console.log(this.$store.state.map.mapDevice, '000');
if (this.$jlmap) {
await this.$store.dispatch('training/updateMapState', list);
} else {
// await this.$store.dispatch('map/updateMapDevices', list);
this.$store.commit('map/updateMapDevice', list);
}
await this.$store.dispatch('socket/setEquipmentStatus');
},
async statusMessageNew(deviceStatus) {
@ -386,6 +405,12 @@ export default {
}).catch(() => {
this.$messageBox(this.$t('display.demon.endSimulationFail'));
});
},
rpsClick() {
this.$refs.rpsDialog.doShow();
},
troClick() {
this.$refs.troDialog.doShow();
}
}
};

128
src/views/newMap/displayBaSiDi/rps.vue Normal file
View File

@ -0,0 +1,128 @@
<template>
<el-dialog
:modal="false"
:title="title"
:visible.sync="show"
:fullscreen="true"
:before-close="doClose"
:z-index="2003"
>
<div style="text-align: center;">
<map-system-draft ref="mapCanvas" @back="back" />
</div>
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import MapSystemDraft from '@/views/newMap/mapsystemNew/common/index';
export default {
name: 'RPS',
components: {
MapSystemDraft
},
props: {
trainList: {
type: Array,
required: true
}
},
data() {
return {
dialogShow: false,
mapData: null
};
},
computed: {
show() {
return this.dialogShow && !this.$store.state.menuOperation.break;
},
title() {
return '背投系统';
},
width() {
return this.$store.state.app.width - 20;
},
height() {
return this.$store.state.app.height - 50;
},
...mapGetters('map', [
'bigScreenConfig'
])
},
watch: {
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
if (this.dialogShow) {
this.handleUpdateScreen();
this.$refs.mapCanvas && this.$refs.mapCanvas.mapViewLoaded(false);
}
}
},
methods: {
doShow() {
this.dialogShow = true;
// this.$store.dispatch('config/resize', { width:this.width, height: this.height });
this.$nextTick(function() {
// this.$store.state.map.map = Object.assign({}, this.$store.state.map.map);
this.$refs.mapCanvas.setMap(this.$store.state.map.map);
});
},
handleUpdateScreen() {
this.maskOpen = false;
if (this.bigScreenConfig.bigScreenSplitConfig && this.bigScreenConfig.bigScreenSplitConfig.length) {
const offsetList = this.bigScreenConfig.offsetList;
const width = this.bigScreenConfig.width;
const height = this.bigScreenConfig.height;
const size = {
width: (this.$store.state.app.width - 2) * width,
height: this.$store.state.app.height * height,
list: this.bigScreenConfig.bigScreenSplitConfig.map(ele => ele.position),
offsetList: offsetList
};
this.$jlmap.setUpdateScreen(size);
} else {
this.maskOpen = true;
// this.$messageBox('该线路没有大屏切割位置信息, 请前往地图绘制编辑');
}
},
back() {},
doClose() {
this.loading = false;
this.dialogShow = false;
}
}
};
</script>
<style scoped>
/deep/ .el-dialog {
background: rgba(100, 100, 100, 1);
position: relative;
border: 2px solid rgb(144, 144, 144, 0.8);
border-radius: 6px;
font-size: 14px;
}
/deep/ .el-dialog .el-dialog__body{
background: rgba(100, 100, 100, 1);
border: 0;
padding: 0;
}
/deep/ .el-dialog .el-dialog__header {
padding: 5px;
height: 30px;
}
/deep/ .el-dialog .el-dialog__title {
color: #fff;
}
/deep/ .el-dialog .el-dialog__headerbtn {
background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
border: 1px solid #fff;
border-radius: 4px;
top: 4px;
right: 5px;
line-height: 16px;
}
/deep/ .el-dialog__headerbtn .el-dialog__close{
color: #fff;
}
</style>

210
src/views/newMap/displayBaSiDi/tro.vue Normal file
View File

@ -0,0 +1,210 @@
<template>
<el-dialog
:modal="false"
:title="title"
:visible.sync="show"
:fullscreen="true"
:before-close="doClose"
:z-index="2003"
>
<div>
<map-system-draft ref="mapCanvas111" @back="back" />
<div v-if="type === 'troDetail'" style="width: 150px;height: 35px;display: flex;position: absolute; bottom: 60px;left: calc(50% - 75px);z-index: 9999;justify-content: space-between;justify-items: center;">
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonLeft + ')' }" @click="changeStation(-1)" />
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonDbup + ')' }" @click="showTroMode" />
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonRight + ')' }" @click="changeStation(1)" />
</div>
</div>
</el-dialog>
</template>
<script>
import MapSystemDraft from '@/views/newMap/mapsystemNew/common/index';
import { mapGetters } from 'vuex';
import ButtonDbupIcon from '@/assets/baSiDi/dbup.png';
import ButtonRightIcon from '@/assets/baSiDi/right.png';
import ButtonLeftIcon from '@/assets/baSiDi/left.png';
export default {
name: 'TRO',
components: {
MapSystemDraft
},
props: {
stationList: {
type: Array,
required: true
},
trainList: {
type: Array,
required: true
}
},
data() {
return {
dialogShow: false,
mapData: null,
type: 'tro',
deviceCode: '',
buttonDbup: ButtonDbupIcon,
buttonRight: ButtonRightIcon,
buttonLeft: ButtonLeftIcon
};
},
computed: {
show() {
return this.dialogShow && !this.$store.state.menuOperation.break;
},
title() {
return this.type === 'tro' ? '轨道总览' : '轨道详览';
},
width() {
return this.$store.state.app.width - 50;
},
height() {
return this.$store.state.app.height - 50;
},
...mapGetters('map', [
'bigScreenConfig'
])
},
watch: {
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
if (this.dialogShow && this.type === 'tro') {
this.showTroMode();
this.$refs.mapCanvas111 && this.$refs.mapCanvas111.mapViewLoaded(false);
} else if (this.dialogShow && this.type === 'troDetail') {
this.showTroDetail();
this.$refs.mapCanvas111 && this.$refs.mapCanvas111.mapViewLoaded(false);
}
},
'$store.state.menuOperation.selectedCount':function(em) {
const device = this.$store.state.menuOperation.selected;
if (device && device._type === 'Station' && this.$store.state.menuOperation.subType === 'troButton') {
this.deviceCode = device.code;
this.type = 'troDetail';
this.showTroDetail();
}
}
},
methods: {
doShow() {
this.dialogShow = true;
// this.$store.dispatch('config/resize', { width:this.width, height: this.height });
this.$nextTick(function() {
// this.$store.state.map.map = Object.assign({}, this.$store.state.map.map);
this.$refs.mapCanvas111.setMap(this.$store.state.map.map);
});
},
showTroMode() {
this.type = 'tro';
const nameList = Object.keys(this.$store.state.map.map || {});
let list = [];
nameList.forEach(item => {
if (item !== 'skinVO') {
const data = this.$store.state.map.map[item];
if (data && data.constructor === Array) {
list = [...list, ...data];
}
}
});
this.handleUpdateScreen();
this.$jlmap.updateShowMode(list, '05'); // 二次过滤
},
showTroDetail() {
const nameList = Object.keys(this.$store.state.map.map || {});
let list = [];
nameList.forEach(item => {
if (item !== 'skinVO') {
const data = this.$store.state.map.map[item];
if (data && data.constructor === Array) {
list = [...list, ...data];
}
}
});
this.$refs.mapCanvas111.setCenter(this.deviceCode);
this.$jlmap.setRecover({ scaleRate: 1, offsetX: 0, offsetY: 0 });
this.$jlmap.updateShowMode(list, '02'); // 二次过滤
const trainList = [];
this.trainList.forEach(item => {
trainList.push({ code: item.groupNumber, deviceType:'TRAIN' });
});
this.$store.dispatch('training/updateMapState', trainList);
},
handleUpdateScreen() {
this.maskOpen = false;
if (this.bigScreenConfig.bigScreenSplitConfig && this.bigScreenConfig.bigScreenSplitConfig.length) {
const offsetList = this.bigScreenConfig.offsetList;
const width = this.bigScreenConfig.width;
const height = this.bigScreenConfig.height;
const size = {
width: (this.$store.state.app.width - 2) * width,
height: this.$store.state.app.height * height,
list: this.bigScreenConfig.bigScreenSplitConfig.map(ele => ele.position),
offsetList: offsetList
};
this.$jlmap.setUpdateScreen(size);
} else {
this.maskOpen = true;
// this.$messageBox('该线路没有大屏切割位置信息, 请前往地图绘制编辑');
}
},
changeStation(value) {
const device = this.$store.getters['map/getDeviceByCode'](this.deviceCode);
const stationSn = device.sn + value;
const station = this.stationList.find((item) => {
return item.sn === stationSn;
});
if (station) {
this.deviceCode = station.code;
this.$refs.mapCanvas111.setCenter(this.deviceCode);
}
},
back() {},
doClose() {
this.loading = false;
this.dialogShow = false;
}
}
};
</script>
<style scoped>
/deep/ .el-dialog {
background: rgba(100, 100, 100, 1);
position: relative;
border: 2px solid rgb(144, 144, 144, 0.8);
border-radius: 6px;
font-size: 14px;
}
/deep/ .el-dialog .el-dialog__body{
background: rgba(100, 100, 100, 1);
border: 0;
padding: 0;
}
/deep/ .el-dialog .el-dialog__header {
padding: 5px;
height: 30px;
}
/deep/ .el-dialog .el-dialog__title {
color: #fff;
}
/deep/ .el-dialog .el-dialog__headerbtn {
background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
border: 1px solid #fff;
border-radius: 4px;
top: 4px;
right: 5px;
line-height: 16px;
}
/deep/ .el-dialog__headerbtn .el-dialog__close{
color: #fff;
}
.arrow-button{
width: 45px;
height: 30px;
cursor: pointer;
background-size: 45px 30px;
background-repeat: no-repeat;
}
</style>

79
src/jmapNew/theme/nanjing_02/menus/dialog/troDetail.vue → src/views/newMap/displayBaSiDi/troDetail.vue
View File

@ -9,11 +9,13 @@
:before-close="doClose"
:z-index="2000"
>
<map-system-draft ref="mapCanvas" @back="back" />
<div style="width: 150px;height: 35px;display: flex;position: absolute; bottom: 60px;left: calc(50% - 75px);z-index: 9999;justify-content: space-between;justify-items: center;">
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonLeft + ')' }" @click="changeStation(-1)" />
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonDbup + ')' }" @click="goTroDialog" />
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonRight + ')' }" @click="changeStation(1)" />
<div style="text-align: center;">
<map-system-draft ref="mapCanvas" @back="back" />
<div style="width: 150px;height: 35px;display: flex;position: absolute; bottom: 60px;left: calc(50% - 75px);z-index: 9999;justify-content: space-between;justify-items: center;">
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonLeft + ')' }" @click="changeStation(-1)" />
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonDbup + ')' }" @click="goTroDialog" />
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonRight + ')' }" @click="changeStation(1)" />
</div>
</div>
</el-dialog>
</template>
@ -23,6 +25,7 @@ import MapSystemDraft from '@/views/newMap/mapsystemNew/common/index';
import ButtonDbupIcon from '@/assets/baSiDi/dbup.png';
import ButtonRightIcon from '@/assets/baSiDi/right.png';
import ButtonLeftIcon from '@/assets/baSiDi/left.png';
import Vue from 'vue';
export default {
name: 'TRO',
@ -57,40 +60,44 @@ export default {
return '轨道详览';
},
width() {
return this.$store.state.app.width - 30;
return this.$store.state.app.width - 10;
},
height() {
return this.$store.state.app.height - 60;
return this.$store.state.app.height - 40;
}
},
watch: {
'$store.state.socket.equipmentStatus': function (val) {
if (val.length) {
this.statusMessage(val);
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
if (this.dialogShow) {
const trainList = [];
this.trainList.forEach(item => {
trainList.push({ code: item.groupNumber, deviceType:'TRAIN' });
});
const nameList = Object.keys(this.$store.state.map.map || {});
let list = [];
nameList.forEach(item => {
if (item !== 'skinVO') {
const data = this.$store.state.map.map[item];
if (data && data.constructor === Array) {
list = [...list, ...data];
}
}
});
Vue.prototype.$jlmap.updateShowMode(list, '02');
this.$store.dispatch('training/updateMapState', trainList);
}
}
},
methods: {
doShow(deviceCode) {
this.dialogShow = true;
this.$store.dispatch('config/resize', { width:this.width, height: this.height });
// this.$store.dispatch('config/resize', { width:this.width, height: this.height });
this.deviceCode = deviceCode;
this.$nextTick(function() {
this.$store.state.map.map = Object.assign({}, this.$store.state.map.map);
this.$refs.mapCanvas.setCenter(this.deviceCode);
const list = [];
this.trainList.forEach(item => {
list.push({ code: item.groupNumber, deviceType:'TRAIN' });
});
setTimeout(() => {
this.$store.dispatch('training/updateMapState', list);
}, 3000);
// this.$store.state.map.map = Object.assign({}, this.$store.state.map.map);
// this.$refs.mapCanvas.setCenter(this.deviceCode);
});
},
async statusMessage(list) {
await this.$store.dispatch('training/updateMapState', list);
await this.$store.dispatch('socket/setEquipmentStatus');
},
back() {},
doClose() {
this.loading = false;
@ -116,15 +123,33 @@ export default {
</script>
<style scoped>
/deep/ .el-dialog {
background: rgba(100, 100, 100, 1) !important;
background: rgba(100, 100, 100, 1);
position: relative;
border: 2px solid rgb(144, 144, 144, 0.8);
border-radius: 6px;
font-size: 14px;
}
/deep/ .el-dialog .el-dialog__body{
background: rgba(100, 100, 100, 1) !important;
border: 0 !important;
background: rgba(100, 100, 100, 1);
border: 0;
}
/deep/ .el-dialog .el-dialog__header {
padding: 5px;
height: 30px;
}
/deep/ .el-dialog .el-dialog__title {
color: #fff;
}
/deep/ .el-dialog .el-dialog__headerbtn {
background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
border: 1px solid #fff;
border-radius: 4px;
top: 4px;
right: 5px;
line-height: 16px;
}
/deep/ .el-dialog__headerbtn .el-dialog__close{
color: #fff;
}
.arrow-button{
width: 45px;

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

@ -215,6 +215,9 @@ export default {
},
setCenter(code) {
this.$refs.jlmapVisual && this.$refs.jlmapVisual.setCenter(code);
},
setMap(data) {
this.$refs.jlmapVisual && this.$refs.jlmapVisual.setMap(data);
}
}
};