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

Merge branch 'test_dispaly' of https://git.code.tencent.com/lian-cbtc/jl-client into test_dispaly

Browse Source
This commit is contained in:
joylink_cuiweidong 2022-12-12 15:42:26 +08:00
commit 132de532a9
12 changed files with 266 additions and 780 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/newMap/display/index.vue
View File

@ -7,10 +7,9 @@
<simulation-menu ref="simulationMenu" :mode="mode" />
<training-tip ref="trainingTip" />
<training-position-tip ref="trainingPositionTip" />
<training-menu v-if="hasTraining" ref="trainingMenu" :offset-bottom="offsetBottom" />
<training-menu v-if="hasTraining || (trainingDesign && trainingDetail)" ref="trainingMenu" :offset-bottom="offsetBottom" />
<training-design v-if="trainingDesign" ref="trainingDesign" />
<chat-box v-if="hasVoice" ref="chatBox" :group="group" />
<design-training-menu v-if="trainingDesign && trainingDetail" ref="trainingMenu" :offset-bottom="offsetBottom" />
<training-left-slider ref="trainingLeftSlider" @overallTranslation="overallTranslation" />
</div>
</template>
@ -29,7 +28,6 @@ import TrainingPositionTip from './trainingList/trainingPositionTip.vue';
import TrainingMenu from './trainingList/trainingMenu';
import TrainingDesign from './trainingDesign/designPane.vue';
import ChatBox from './chatBox';
import DesignTrainingMenu from './trainingList/designTrainingMenu';
import TrainingLeftSlider from './trainingList/trainingLeftSlider';
export default {
name: 'DisplayDraft',
@ -42,7 +40,6 @@ export default {
TrainingMenu,
TrainingDesign,
ChatBox,
DesignTrainingMenu,
TrainingLeftSlider
},
data() {

5
src/views/newMap/display/stationDiagram/jlmap/index.vue
View File

@ -25,7 +25,6 @@
</el-form-item>
</el-form>
</div>
<training-tips ref="trainingTips" />
</div>
</template>
@ -37,12 +36,10 @@ import { TrainingMode } from '@/scripts/ConstDic';
import { mapGetters } from 'vuex';
import { EventBus } from '@/scripts/event-bus';
import Theme from '@/jmapNew/theme/factory';
import TrainingTips from '@/views/newMap/mapsystemNew/plugin/trainingtip';
export default {
name: 'JlmapVisual',
components: {
ProgressBar,
TrainingTips
ProgressBar
},
props: {
noMenu: {

3
src/views/newMap/display/terminals/dispatchWork.vue
View File

@ -46,9 +46,6 @@ export default {
},
'$store.state.map.initJlmapLoadedCount': function (val) {
this.handleDispatchWorkData();
},
mapDevice() {
return this.$store.state.map.mapDevice;
}
},
beforeDestroy() {

4
src/views/newMap/display/terminals/displayBaSiDi/baSiDi.vue
View File

@ -25,9 +25,9 @@
</el-row>
<div style="padding: 5px;height:20px;line-height: 20px;border-top: 2px solid #DDD9CA;display: flex;justify-content: space-between;">
<div>
<div class="div-simulate-button" style="width: 40px;" @click="handleDialogShow('rpsDialog')">背投</div>
<div class="div-simulate-button" style="width: 40px;" @click="handleDialogShow('bigScreen')">背投</div>
<div class="div-simulate-button" style="width: 40px;" @click="handleDialogShow('carPack')">车场</div>
<div class="div-simulate-button" style="width: 40px;" @click="handleDialogShow('troDialog')">轨道</div>
<div class="div-simulate-button" style="width: 40px;" @click="handleDialogShow('troWork')">轨道</div>
<div class="div-simulate-button" style="width: 40px;">系统</div>
<div class="div-simulate-button" style="width: 40px;" @click="handleDialogShow('traDialog')">列车</div>
</div>

27
src/views/newMap/display/terminals/displayBaSiDi/index.vue
View File

@ -1,10 +1,7 @@
<template>
<div class="main" :style="{width: '100%',height:'100%',position:'absolute',overflow:'hidden'}" style="background: #000;">
<ba-si-di ref="baSiDi" @handleDialogShow="handleDialogShow" />
<rps-dialog ref="rpsDialog" />
<tro-dialog ref="troDialog" />
<car-pack ref="carPack" />
<tro-detail ref="troDetail" @goTroDialog="troClick" />
<tra-dialog ref="traDialog" @openTrainTrunkDetail="openTrainTrunkDetail" />
<ttl-dialog ref="ttlDialog" />
<tmt-dialog ref="tmtDialog" />
@ -17,10 +14,7 @@ import { mapGetters } from 'vuex';
import { clearSubscribe, displayTopic } from '@/utils/stomp';
import { EventBus } from '@/scripts/event-bus';
import BaSiDi from './baSiDi';
import RpsDialog from './rps';
import TroDialog from './tro';
import CarPack from './carPack';
import TroDetail from './troDetail';
import TraDialog from './tra';
import TtlDialog from './ttl';
import TmtDialog from './tmt';
@ -31,10 +25,7 @@ export default {
name: 'DisplayDraft',
components: {
BaSiDi,
RpsDialog,
CarPack,
TroDialog,
TroDetail,
TraDialog,
TtlDialog,
TmtDialog,
@ -76,22 +67,10 @@ export default {
return this.$store.state.training.started;
}
},
watch:{
'$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();
this.$refs.troDetail.doShow(device.code);
}
}
},
beforeDestroy() {
this.clearSubscribe();
this.$store.dispatch('training/reset');
},
async mounted() {
this.$refs.troDialog.doClose();
},
methods:{
// 结束加载状态
endViewLoading(isSuccess) {
@ -115,7 +94,11 @@ export default {
this.$refs.trainTrunkDetail.doShow(index);
},
handleDialogShow(type) {
this.$refs[type].doShow();
if (type === 'troWork' || type === 'bigScreen') {
this.$emit('pictureChange', type);
} else {
this.$refs[type].doShow();
}
}
}
};

118
src/views/newMap/display/terminals/displayBaSiDi/rps.vue
View File

@ -1,118 +0,0 @@
<template>
<el-dialog
:modal="false"
:title="title"
:visible.sync="show"
:fullscreen="true"
:before-close="doClose"
:z-index="2003"
>
<station-diagram v-if="dialogShow" ref="stationDiagram" />
</el-dialog>
</template>
<script>
import StationDiagram from '../../stationDiagram/index';
export default {
name: 'RPS',
components: {
StationDiagram
},
data() {
return {
dialogShow: false,
selfJmap: null
};
},
computed: {
show() {
return this.dialogShow && !this.$store.state.menuOperation.break;
},
title() {
return '背投系统';
},
mapData() {
return this.$store.state.map.map;
},
mapDevice() {
return this.$store.state.map.mapDevice;
},
group() {
return this.$route.query.group;
},
width() {
return this.$store.state.app.width - 5;
},
height() {
return this.$store.state.app.height - 50;
}
},
watch: {
'$store.state.map.initJlmapLoadedCount': function (val) {
if (this.dialogShow) {
this.handleBigScreenData();
}
}
},
methods: {
doShow() {
this.dialogShow = true;
this.$store.dispatch('config/resize', { width:this.width, height: this.height });
},
handleBigScreenData() {
const logicData = {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData};
const repaint = this.$store.state.map.initJlmapLoadedCount === 1;
this.$jlmap.setMap(this.mapData, this.mapDevice, logicData, repaint);
if (this.mapData && this.mapData.pictureList) {
const picture = this.$store.state.map.map.pictureList.find(picture => picture.type === 'bigScreen');
if (picture) {
this.$store.dispatch('map/setPictureDeviceMap', picture.deviceMap);
const deviceList = [];
const mapDevice = this.$store.state.map.mapDevice;
for (const deviceCode in mapDevice) {
deviceList.push(deviceCode);
}
this.$jlmap.updatePicture(deviceList);
this.$jlmap.updateTransform(picture.scaling, picture.origin);
}
}
},
doClose() {
this.dialogShow = false;
}
}
};
</script>
<style scoped>
/deep/ .el-dialog {
background: rgba(100, 100, 100, 1);
position: relative;
border: 2px solid rgba(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>

24
src/views/newMap/display/terminals/index.vue
View File

@ -26,7 +26,9 @@
<diagram-preview v-else-if="picture === 'diagramPreview'" ref="diagramPreview" />
<diagram-edit v-else-if="picture === 'diagramEdit'" ref="diagramEdit" />
<pis-terminal v-else-if="picture === 'pis'" ref="pisTerminal" />
<display-ba-si-di v-else-if="picture === 'basidi'" ref="displayBaSiDi" />
<display-ba-si-di v-else-if="picture === 'baSiDi'" ref="displayBaSiDi" @pictureChange="pictureChange" />
<tro-work v-else-if="picture === 'troWork'" ref="troWork" />
<tro-detail-work v-else-if="picture === 'troDetailWork'" ref="troDetailWork" :show-station-code="showStationCode" @pictureChange="pictureChange" />
<interlock-work v-if="picture=='interlockWork'" ref="interlockWork" :centralized-station-map="centralizedStationMap" />
@ -73,10 +75,13 @@ import DiagramLoad from './diagramLoad';
import DiagramPreview from './diagramPreview';
import DiagramEdit from './diagramEdit/index';
import DisplayBaSiDi from './displayBaSiDi/index';
import TroWork from './troWork';
import TroDetailWork from './troDetailWork';
export default {
name: 'Index',
components: {
TroWork,
DispatcherWork,
LocalWork,
InterlockWork,
@ -104,7 +109,8 @@ export default {
DiagramLoad,
DiagramPreview,
DiagramEdit,
DisplayBaSiDi
DisplayBaSiDi,
TroDetailWork
},
data() {
return {
@ -113,7 +119,8 @@ export default {
centralizedStationMap: {},
loading: false,
isFirst: true,
group: ''
group: '',
showStationCode: ''
};
},
computed: {
@ -160,6 +167,13 @@ export default {
console.log('[ERROR] ', error);
this.mapViewLoaded(false);
}
},
'$store.state.menuOperation.selectedCount':function() {
const device = this.$store.state.menuOperation.selected;
if (device && device._type === 'Station' && this.$store.state.menuOperation.subType === 'troButton') {
this.showStationCode = device.code;
this.pictureChange('troDetailWork');
}
}
},
mounted() {
@ -227,10 +241,6 @@ export default {
},
pictureChange(val) {
this.picture = val;
if (this.picture === 'dispatchWork' && this.lineCode === '14') {
this.picture = 'basidi';
this.$store.dispatch('app/animationsClose');
}
this.$store.dispatch('map/setPicture', this.picture);
if (val === 'ibp') {
this.$nextTick(() => { this.$refs.ibpPlate.show(this.roleDeviceCode, ''); });

315
src/views/newMap/display/terminals/terminalMenu.vue
View File

@ -28,152 +28,180 @@ export default {
code: 'localWork',
roleList: ['STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER',
'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', 'TRAIN_MASTER', 'DEPOT_DISPATCHER', 'SIGNAL_BUILDING'],
isShow: () => true,
click: this.changePictureShow
},
{
name: '行调工作站',
code: 'dispatchWork',
roleList: ['DISPATCHER'],
isShow: () => this.$route.query.lineCode !== '14',
click: this.changePictureShow
},
{
name: '行调台',
code: 'dispatcherManage',
roleList: ['DISPATCHER'],
isShow: () => this.$route.query.simType === 'RAILWAY',
click: this.changePictureShow
},
{
name: '车务终端',
code: 'trafficTerminal',
roleList: ['STATION_SUPERVISOR'],
isShow: () => this.$route.query.simType === 'RAILWAY',
click: this.changePictureShow
},
{
name: '车务管理终端',
code: 'trafficManageTerminal',
roleList: ['STATION_SUPERVISOR'],
isShow: () => this.$route.query.simType === 'RAILWAY',
click: this.changePictureShow
},
{
name: '调度计划',
code: 'schedulingPlan',
roleList: ['DISPATCHER'],
isShow: () => this.$route.query.simType === 'RAILWAY',
click: this.changePictureShow
},
{
name: '调度命令',
code: 'dispatchingCommand',
roleList: ['DISPATCHER'],
isShow: () => this.$route.query.simType === 'RAILWAY',
click: this.changePictureShow
},
{
name: '路票',
code: 'trainTicket',
roleList: ['DISPATCHER', 'STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER',
'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', 'TRAIN_MASTER', 'DEPOT_DISPATCHER', 'SIGNAL_BUILDING', 'DRIVER'],
isShow: () => this.$route.query.simType === 'RAILWAY',
click: this.changePictureShow
},
{
name: '簿册',
code: 'registerBook',
roleList: ['DISPATCHER', 'STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER',
'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', 'TRAIN_MASTER', 'DEPOT_DISPATCHER', 'SIGNAL_BUILDING', 'DRIVER'],
isShow: () => this.$route.query.simType === 'RAILWAY',
click: this.changePictureShow
},
{
name: '运行图加载',
code: 'diagramLoad',
roleList: ['DISPATCHER'],
isShow: () => this.$route.query.simType === 'METRO',
click: this.changePictureShow
},
{
name: '运行图预览',
code: 'diagramPreview',
roleList: ['DISPATCHER', 'STATION_SUPERVISOR', 'DRIVER'],
isShow: () => this.$route.query.simType === 'METRO',
click: this.changePictureShow
},
{
name: '运行图编制',
code: 'diagramEdit',
roleList: [],
isShow: () => this.$route.query.simType === 'METRO',
click: this.changePictureShow
},
{
name: '派班工作站',
code: 'scheduleWork',
roleList: ['DEPOT_DISPATCHER'],
isShow: () => this.$route.query.simType === 'METRO',
click: this.changePictureShow
},
{
name: 'cctv视图',
code: 'cctvView',
roleList: ['DISPATCHER', 'STATION_SUPERVISOR'],
isShow: () => this.$route.query.simType === 'METRO',
click: this.changePictureShow
},
{
name: 'ISCS',
code: 'iscsView',
roleList: ['DISPATCHER', 'STATION_SUPERVISOR'],
isShow: () => this.$route.query.simType === 'METRO',
click: this.changePictureShow
},
{
name: '大屏',
code: 'bigScreen',
roleList: ['DISPATCHER'],
isShow: () => this.$route.query.simType === 'METRO',
click: this.changePictureShow
},
{
name: '司机视角',
code: 'drivingPlan',
roleList: ['DRIVER'],
isShow: () => this.$route.query.simType === 'METRO',
click: this.changePictureShow
},
{
name: 'IBP盘',
code: 'ibp',
roleList: ['STATION_SUPERVISOR'],
isShow: () => this.$route.query.simType === 'METRO',
click: this.changePictureShow
},
{
name: '数字沙盘',
code: 'digitalStand',
roleList: ['STATION_SUPERVISOR', 'DISPATCHER'],
isShow: () => this.$route.query.simType === 'METRO',
click: this.changePictureShow
},
{
name: '大客流策略',
code: 'largePassengerStrategy',
roleList: ['DISPATCHER'],
isShow: () => this.itemMap && this.itemMap.LPF,
click: this.changePictureShow
},
{
name: '大客流视图',
code: 'largePassengerView',
roleList: ['DISPATCHER'],
isShow: () => this.itemMap && this.itemMap.LPF,
click: this.changePictureShow
},
{
name: 'PSL',
code: 'psl',
roleList: ['STATION_SUPERVISOR'],
isShow: () => this.$route.query.simType === 'METRO',
click: this.changePictureShow
},
{
name: 'BaSiDi',
code: 'baSiDi',
roleList: ['DISPATCHER'],
isShow: () => this.$route.query.lineCode === '14' && this.$route.query.simType === 'METRO',
click: this.changePictureShow
},
{
name: '轨道总览',
code: 'troWork',
roleList: ['DISPATCHER'],
isShow: () => this.$route.query.lineCode === '14' && this.$route.query.simType === 'METRO',
click: this.changePictureShow
},
{
name: '轨道详览',
code: 'troDetailWork',
roleList: ['DISPATCHER'],
isShow: () => this.$route.query.lineCode === '14' && this.$route.query.simType === 'METRO',
click: this.changePictureShow
}
],
terminalMap:{
'RAILWAY': [
{
name: '行调台',
code: 'dispatcherManage',
roleList: ['DISPATCHER'],
click: this.changePictureShow
},
{
name: '车务终端',
code: 'trafficTerminal',
roleList: ['STATION_SUPERVISOR'],
click: this.changePictureShow
},
{
name: '车务管理终端',
code: 'trafficManageTerminal',
roleList: ['STATION_SUPERVISOR'],
click: this.changePictureShow
},
{
name: '调度计划',
code: 'schedulingPlan',
roleList: ['DISPATCHER'],
click: this.changePictureShow
},
{
name: '调度命令',
code: 'dispatchingCommand',
roleList: ['DISPATCHER'],
click: this.changePictureShow
},
{
name: '路票',
code: 'trainTicket',
roleList: ['DISPATCHER', 'STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER',
'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', 'TRAIN_MASTER', 'DEPOT_DISPATCHER', 'SIGNAL_BUILDING', 'DRIVER'],
click: this.changePictureShow
},
{
name: '簿册',
code: 'registerBook',
roleList: ['DISPATCHER', 'STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER',
'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', 'TRAIN_MASTER', 'DEPOT_DISPATCHER', 'SIGNAL_BUILDING', 'DRIVER'],
click: this.changePictureShow
}
],
'METRO': [
{
name: '运行图加载',
code: 'diagramLoad',
roleList: ['DISPATCHER'],
click: this.changePictureShow
},
{
name: '运行图预览',
code: 'diagramPreview',
roleList: ['DISPATCHER', 'STATION_SUPERVISOR', 'DRIVER'],
click: this.changePictureShow
},
{
name: '运行图编制',
code: 'diagramEdit',
roleList: [],
click: this.changePictureShow
},
{
name: '派班工作站',
code: 'scheduleWork',
roleList: ['DEPOT_DISPATCHER'],
click: this.changePictureShow
},
{
name: 'cctv视图',
code: 'cctvView',
roleList: ['DISPATCHER', 'STATION_SUPERVISOR'],
click: this.changePictureShow
},
{
name: 'ISCS',
code: 'iscsView',
roleList: ['DISPATCHER', 'STATION_SUPERVISOR'],
click: this.changePictureShow
},
{
name: '大屏',
code: 'bigScreen',
roleList: ['DISPATCHER'],
click: this.changePictureShow
},
// {
// name: '故障设备',
// code: 'jlmap3dFault',
// roleList: ['STATION_SUPERVISOR'],
// click: this.noEvent
// },
{
name: '司机视角',
code: 'drivingPlan',
roleList: ['DRIVER'],
click: this.changePictureShow
},
{
name: 'IBP盘',
code: 'ibp',
roleList: ['STATION_SUPERVISOR'],
click: this.changePictureShow
},
{
name: '数字沙盘',
code: 'digitalStand',
roleList: ['STATION_SUPERVISOR', 'DISPATCHER'],
click: this.changePictureShow
},
{
name: '大客流策略',
code: 'largePassengerStrategy',
roleList: ['DISPATCHER'],
functionItem: 'LPF',
click: this.changePictureShow
},
{
name: '大客流视图',
code: 'largePassengerView',
roleList: ['DISPATCHER'],
functionItem: 'LPF',
click: this.changePictureShow
},
{
name: 'PSL',
code: 'psl',
roleList: ['STATION_SUPERVISOR'],
click: this.changePictureShow
}
],
'EMERGENCY': []
},
itemMap: {}
};
},
@ -221,8 +249,8 @@ export default {
methods:{
initTerminalList() {
this.terminalList = [];
[...this.commonTerminal, ...(this.terminalMap[this.simType] || [])].forEach(item => {
if (item.roleList.includes(this.roles) && (!item.functionItem || this.itemMap[item.functionItem])) {
this.commonTerminal.forEach(item => {
if (item.roleList.includes(this.roles) && item.isShow()) {
this.terminalList.push(item);
}
});
@ -236,7 +264,14 @@ export default {
if (localWorkRoleList.includes(this.roles)) {
this.changePictureShow('localWork');
} else if (this.roles === 'DISPATCHER') {
this.changePictureShow('dispatchWork');
if (this.$route.query.lineCode === '14') {
this.changePictureShow('baSiDi');
this.$store.dispatch('app/animationsClose');
} else if (this.$route.query.simType === 'RAILWAY') {
this.changePictureShow('dispatcherManage');
} else {
this.changePictureShow('dispatchWork');
}
} else if (this.roles === 'MAINTAINER') {
// 通号
} else if (this.roles === 'DRIVER') {

153
src/views/newMap/display/terminals/displayBaSiDi/troDetail.vue → src/views/newMap/display/terminals/troDetailWork.vue
View File

@ -1,40 +1,37 @@
<template>
<el-dialog
:modal="false"
:title="title"
:visible.sync="show"
:fullscreen="true"
:before-close="doClose"
:z-index="2000"
>
<div style="text-align: center;">
<component :is="menus" :selected="selected" />
<station-diagram v-if="dialogShow" ref="stationDiagram" @setSelected="setSelected" />
<div class="button-box" style="">
<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 style="text-align: center;">
<component :is="menus" :selected="selected" />
<station-diagram ref="stationDiagram" @setSelected="setSelected" />
<div class="button-box">
<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>
</el-dialog>
</div>
</template>
<script>
import StationDiagram from '../../stationDiagram/index';
import StationDiagram from '../stationDiagram/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';
import {mapGetters} from 'vuex';
import { clearSubscribe, getTopic} from '@/utils/stomp';
export default {
name: 'TRO',
name: 'TroDetailWork',
components: {
StationDiagram
},
props: {
showStationCode: {
type: String,
default: () => {
return '';
}
}
},
data() {
return {
dialogShow: false,
deviceCode: '',
menus: null,
selected: null,
buttonDbup: ButtonDbupIcon,
@ -49,45 +46,30 @@ export default {
'trainWindowList',
'stationList'
]),
show() {
return this.dialogShow && !this.$store.state.menuOperation.break;
},
title() {
return '轨道详览';
},
mapData() {
return this.$store.state.map.map;
},
mapDevice() {
return this.$store.state.map.mapDevice;
},
width() {
return this.$store.state.app.width - 10;
},
height() {
return this.$store.state.app.height - 40;
}
},
watch: {
'$store.state.map.mapDataLoadedCount': function () {
const lineCode = this.$jlmap.lineCode;
if (lineCode && this.dialogShow) {
if (lineCode) {
this.menus = this.$theme.loadDispatchWorkMenuComponent(lineCode);
}
},
'$store.state.map.initJlmapLoadedCount': function (val) {
if (this.dialogShow) {
this.handleDispatchWorkData();
this.$jlmap && this.$jlmap.setCenterOffset(this.deviceCode, { x: 200, y:0 });
}
this.handleDispatchWorkData();
this.$jlmap && this.$jlmap.setCenterOffset(this.deviceCode || this.showStationCode, { x: 200, y:0 });
}
},
beforeDestroy() {
clearSubscribe(getTopic('ATS_STATUS', this.group));
clearSubscribe(getTopic('STATE', this.group));
},
methods: {
doShow(deviceCode) {
this.dialogShow = true;
this.$store.dispatch('config/resize', { width:this.width, height: this.height });
this.deviceCode = deviceCode;
},
setSelected(val) {
this.selected = val;
},
@ -95,6 +77,7 @@ export default {
const logicData = {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData};
const repaint = this.$store.state.map.initJlmapLoadedCount === 1;
this.$jlmap.setMap(this.mapData, this.mapDevice, logicData, repaint);
this.$jlmap.off('pan');
if (this.mapData && this.mapData.pictureList) {
const picture = this.mapData.pictureList.find(picture => picture.type === 'dispatchWork');
if (picture) {
@ -116,15 +99,11 @@ export default {
this.$jlmap.updateShowStation(list);
}
},
doClose() {
this.dialogShow = false;
},
goTroDialog() {
this.doClose();
this.$nextTick(() => { this.$emit('goTroDialog'); });
this.$emit('pictureChange', 'troWork');
},
changeStation(value) {
this.deviceCode = this.deviceCode || this.stationList[0].code;
this.deviceCode = this.deviceCode || this.showStationCode || this.stationList[0].code;
const device = this.$store.getters['map/getDeviceByCode'](this.deviceCode);
const stationSn = device.sn + value;
const station = this.stationList.find((item) => {
@ -140,58 +119,24 @@ export default {
}
};
</script>
<style scoped>
/deep/ .el-dialog {
background: rgba(100, 100, 100, 1);
position: relative;
border: 2px solid rgba(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;
}
.button-box{
width: 150px;
height: 35px;
display: flex;
position: absolute;
bottom: 60px;
left: calc(50% - 75px);
z-index: 9999;
justify-content: space-between;
justify-items: center;
}
.fault-button{
position: absolute;
top: 32px;
right: 32px;
}
.arrow-button{
width: 45px;
height: 30px;
cursor: pointer;
background-size: 45px 30px;
background-repeat: no-repeat;
}
.button-box{
width: 150px;
height: 35px;
display: flex;
position: absolute;
bottom: 60px;
left: calc(50% - 75px);
z-index: 9999;
justify-content: space-between;
justify-items: center;
}
</style>

90
src/views/newMap/display/terminals/displayBaSiDi/tro.vue → src/views/newMap/display/terminals/troWork.vue
View File

@ -1,28 +1,20 @@
<template>
<el-dialog
:modal="false"
:title="title"
:visible.sync="show"
:fullscreen="true"
:before-close="doClose"
:z-index="2003"
>
<station-diagram v-if="dialogShow" ref="stationDiagram" />
</el-dialog>
<div>
<station-diagram ref="stationDiagram" />
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import StationDiagram from '../../stationDiagram/index';
import StationDiagram from '../stationDiagram/index';
import {mapGetters} from 'vuex';
import { clearSubscribe, getTopic} from '@/utils/stomp';
export default {
name: 'TRO',
name: 'TroWork',
components: {
StationDiagram
},
data() {
return {
dialogShow: false,
deviceCode: ''
};
},
@ -32,37 +24,24 @@ export default {
'signalList',
'trainWindowList'
]),
show() {
return this.dialogShow && !this.$store.state.menuOperation.break;
},
title() {
return '轨道总览';
},
width() {
return this.$store.state.app.width - 5;
},
mapData() {
return this.$store.state.map.map;
},
mapDevice() {
return this.$store.state.map.mapDevice;
},
height() {
return this.$store.state.app.height - 50;
}
},
watch: {
'$store.state.map.initJlmapLoadedCount': function (val) {
if (this.dialogShow) {
this.handleDispatchWorkData();
}
this.handleDispatchWorkData();
}
},
beforeDestroy() {
this.updateJlmapMode('02');
clearSubscribe(getTopic('ATS_STATUS', this.group));
clearSubscribe(getTopic('STATE', this.group));
},
methods: {
doShow() {
this.dialogShow = true;
this.$store.dispatch('config/resize', { width:this.width, height: this.height });
},
handleDispatchWorkData() {
const logicData = {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData};
const repaint = this.$store.state.map.initJlmapLoadedCount === 1;
@ -97,50 +76,11 @@ export default {
list.push(mapDevice[key]);
}
this.$jlmap && this.$jlmap.updateShowMode(list, mode);
},
doClose() {
this.updateJlmapMode('02');
this.dialogShow = false;
}
}
};
</script>
<style scoped>
/deep/ .el-dialog {
background: rgba(100, 100, 100, 1);
position: relative;
border: 2px solid rgba(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>

300
src/views/newMap/display/trainingList/designTrainingMenu.vue
View File

@ -1,300 +0,0 @@
<template>
<!-- v-drag 拖拽 调整宽高 -->
<div v-quickMenuDrag class="reminder-drag" :style="{bottom: offsetBottom + 'px'}">
<div ref="drapBox" class="reminder-box">
<div class="tip-title">
<div>
<i v-show="isShrink" class="icon el-icon-minus" @click="shrink" />
<i v-show="!isShrink" class="icon el-icon-plus" @click="shrink" />
<i v-show="!isShrink && !trainingSwitch && trainingDetail" class="icon el-icon-video-play" @click="handlerStart" />
<i v-show="!isShrink && trainingSwitch" class="icon el-icon-switch-button" @click="handlerEnd" />
</div>
<p style="color: #fff;">
<span>{{ trainingDetail.name }}</span>
</p>
</div>
<div v-if="isShrink" class="reminder-box-content">
<div class="zhezhao" />
<div ref="dragBody" class="tip-body-box">
<div class="tip-body">
<el-scrollbar wrap-class="scrollbar-wrapper">
<p class="list-item">
<span class="list-label">{{ $t('display.training.trainingName') }}</span>
<span class="list-elem">{{ trainingDetail.name }}</span>
</p>
<p class="list-item">
<span class="list-label">实训模式：</span>
<span class="list-elem">
<el-radio-group v-model="demoMode" :disabled="trainingSwitch" class="mode" size="small" @change="changeMode">
<el-radio :label="TrainingMode.TEACH" border>{{ $t('display.lesson.teachingMode') }}</el-radio>
<el-radio :label="TrainingMode.PRACTICE" border>{{ $t('display.lesson.practiceMode') }}</el-radio>
<el-radio :label="TrainingMode.TEST" border>{{ $t('display.lesson.testMode') }}</el-radio>
</el-radio-group>
</span>
</p>
<p class="list-item">
<span class="list-label" style="vertical-align: top;"> {{ $t('display.training.trainingInstructions') }}</span>
<span class="list-elem elem-span">{{ trainingDetail.description }}</span>
</p>
<p class="list-item">
<span class="list-label">操作按钮：</span>
<span class="list-elem">
<el-button v-if="!trainingSwitch && trainingDetail" size="small" type="success" @click="handlerStart">开始</el-button>
<el-button v-if="trainingSwitch" size="small" type="danger" @click="handlerEnd">结束</el-button>
</span>
</p>
</el-scrollbar>
</div>
<div class="drag-right" />
<div class="drag-left" />
<div class="drag-bottom" />
<div class="drag-top" />
</div>
</div>
</div>
<scene-play-role ref="scenePlayRole" @startTraining="startTraining" />
<test-result ref="testResult" />
</div>
</template>
<script>
import { ScriptMode } from '@/scripts/ConstDic';
import { startTraining, endTraining } from '@/api/jmap/training';
import ScenePlayRole from './scenePlayRole';
import TestResult from './testResult';
export default {
name: 'TipTrainingDetail',
components: {
ScenePlayRole,
TestResult
},
props: {
offsetBottom: {
type: Number,
required: true
}
},
data() {
return {
isShrink: true,
showSumbit: false,
demoMode: ScriptMode.TEACH,
TrainingMode: ScriptMode
};
},
computed: {
trainingSwitch() {
return this.$store.state.trainingNew.trainingSwitch;
},
trainingDetail() {
return this.$store.state.trainingNew.trainingDetail;
},
group() {
return this.$route.query.group;
},
teachMode() {
return this.$store.state.trainingNew.teachMode;
}
},
mounted() {
this.loadInitData();
},
methods: {
loadInitData() {
this.showSumbit = false;
},
shrink() {
if (this.isShrink) {
this.isShrink = false;
} else {
this.isShrink = true;
this.$nextTick(()=>{
const dragDom = document.querySelector('.reminder-drag').style.bottom;
if (document.body.clientHeight - 300 - parseInt(dragDom.replace('px', '')) < 0) {
document.querySelector('.reminder-drag').style.bottom = `${document.body.clientHeight - 300}px`;
}
});
}
},
changeMode(val) {
this.demoMode = val;
this.$store.dispatch('trainingNew/changeTeachMode', this.demoMode);
},
handlerStart() {
if (this.trainingDetail.type === 'SCENE') {
// 场景模式需进行仿真角色扮演选择
this.$refs.scenePlayRole.doShow();
} else {
// 单操模式 数据应保证仅有一个仿真扮演角色 默认
this.startTraining();
}
},
startTraining() {
this.$store.dispatch('trainingNew/changeTeachMode', this.demoMode);
startTraining(this.group, {mode: this.demoMode}).then(() => {
this.$store.dispatch('trainingNew/trainingStart');
}).catch(() => {
this.$message.error('开始实训失败！');
});
},
handlerEnd() {
const scoreList = this.$store.state.trainingNew.scoreList;
if (this.demoMode === ScriptMode.TEST) {
const scoringRules = this.$store.state.trainingNew.scoringRules;
const scoringRule = scoringRules.find(rule => rule.memberId == this.$store.state.training.myMemberId);
this.$refs.testResult.doShow(scoreList, this.$store.state.trainingNew.stepList, scoringRule ? scoringRule.details : []);
}
endTraining(this.group, scoreList).then((resp) => {
this.$store.dispatch('trainingNew/trainingEnd');
}).catch(() => {
this.$message.error('结束实训失败！');
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.tip-body-box {
height: 260px;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.reminder-drag{
position: absolute;
bottom: 0px;
left: 15px;
z-index: 10;
}
.elem-span{
display:inline-block;width:77%;line-height:26px;margin-top:-4px;
}
.zhezhao{
width: 100%;
height: 100%;
filter: blur(8px);
background: rgba(255,255,255,0.9);
position:absolute;
}
.reminder-box-content{
width: 500px;
height: 260px;
left: 0;
top: 0;
z-index: 2;
background: rgba(255,255,255,0.8);
position: relative;
}
.reminder-box {
border-radius: 5px;
overflow: hidden;
z-index: 10;
font-size: 18px;
.tip-title {
width: 500px;
overflow: hidden;
height: 40px;
display: flex;
align-items: center;
flex-direction: row-reverse;
background-color: rgba(64, 158, 255,1);
border-radius: 5px 5px 0 0;
justify-content: space-between;
padding: 0 10px;
}
.drag-right,
.drag-left {
width: 10px;
cursor: e-resize;
background-color: yellow;
height: 100%;
position: absolute;
right: 0;
top: 0;
opacity: 0;
}
.drag-left {
left: 0;
}
.drag-bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 10px;
cursor: s-resize;
background-color: yellow;
opacity: 0;
}
.drag-top {
position: absolute;
top: -45px;
left: 0;
width: 100%;
height: 10px;
cursor: s-resize;
background-color: yellow;
opacity: 0;
}
.tip-body {
height: 260px;
padding: 10px;
.list-label {
width: 105px;
}
}
.tip-foot {
width: 100%;
position: absolute;
right: 0px;
bottom: 0px;
background-color: #fff;
padding: 10px 0 10px 10px;
.foot-detail {
height: 100%;
float: right;
margin-top: 9px;
padding-right: 15px;
}
.foot-submit {
float: right;
margin-top: 9px;
padding-right: 15px;
}
}
.icon {
float: right;
margin-right: 10px;
cursor: pointer;
background-color: #f3f3f3;
border-radius: 50%;
}
/deep/ {
.el-tree-node__content {
margin-bottom: 4px;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: #d6e5f7;
}
}
}
</style>

2
src/views/newMap/display/trainingList/trainingMenu.vue
View File

@ -4,7 +4,7 @@
<div ref="drapBox" class="reminder-box">
<div class="tip-title">
<div style="display: flex;justify-content: center;align-items: center;">
<i class="icon el-icon-document" @click="trainingListShow" />
<i v-if="!trainingDesign" class="icon el-icon-document" @click="trainingListShow" />
<i v-show="!isShrink && !trainingSwitch && trainingDetail" class="icon el-icon-video-play" @click="handlerStart" />
<i v-show="!isShrink && trainingSwitch" class="icon el-icon-switch-button" @click="handlerEnd" />
<i v-show="isShrink" class="icon el-icon-minus" @click="shrink" />