调整实训平台新旧地图显示逻辑
This commit is contained in:
zyy
parent
1c04b8d215
commit
6e3424e355
@ -22,13 +22,6 @@
|
||||
</el-menu-item>
|
||||
<deomon-list ref="deomonList" />
|
||||
<qcode ref="qcode" />
|
||||
<el-switch
|
||||
v-if="showMapSwitch"
|
||||
v-model="switchNewMap"
|
||||
active-text="新版地图"
|
||||
inactive-text="老版地图"
|
||||
@change="changeSwitch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -88,8 +81,7 @@ export default {
|
||||
],
|
||||
stomp: null,
|
||||
header: null,
|
||||
lang: 'zh',
|
||||
switchNewMap: false
|
||||
lang: 'zh'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -101,9 +93,6 @@ export default {
|
||||
},
|
||||
isShown() {
|
||||
return getSessionStorage('project') == 'login' || getSessionStorage('project') == 'design';
|
||||
},
|
||||
showMapSwitch() {
|
||||
return process.env.NODE_ENV === 'development' && !getSessionStorage('project').startsWith('design');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -113,7 +102,6 @@ export default {
|
||||
if (nowLang === 'zh') {
|
||||
this.lang = 'en';
|
||||
}
|
||||
this.switchNewMap = this.$store.state.config.switchMap === 'new';
|
||||
},
|
||||
methods: {
|
||||
quickEntry() {
|
||||
@ -163,9 +151,6 @@ export default {
|
||||
break;
|
||||
}
|
||||
return path;
|
||||
},
|
||||
changeSwitch(value) {
|
||||
this.$store.dispatch('config/changeSwitchMap', value ? 'new' : 'old' );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -14,6 +14,7 @@ const Jlmap3dSandbox = () => import('@/views/jlmap3d/simulation/jl3dsimulation')
|
||||
const Jlmap3dModel = () => import('@/views/jlmap3d/device/jl3ddevice');
|
||||
const Jlmap3dTrain = () => import('@/views/jlmap3d/devicetrain/jl3ddevicetrain');
|
||||
const Display = () => import('@/views/display/index');
|
||||
const DisplayNew = () => import('@/views/display/indexNew');
|
||||
const DesignDisplay = () => import('@/views/display/designIndex');
|
||||
|
||||
const TrainRoom = () => import('@/views/trainRoom/index');
|
||||
@ -149,6 +150,7 @@ export const userTrainingPlatform = '016'; // 实训平台
|
||||
|
||||
export const UrlConfig = {
|
||||
display: '/display',
|
||||
displayNew: '/displayNew',
|
||||
scriptDisplay: '/scriptDisplay',
|
||||
examRuleDraft: '/examRule/draft',
|
||||
examRuleManage: '/examRule/manage',
|
||||
@ -453,6 +455,13 @@ export const asyncRouter = [
|
||||
},
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/displayNew/:mode',
|
||||
component: DisplayNew,
|
||||
meta: {
|
||||
},
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/design/display/:mode',
|
||||
component: DesignDisplay,
|
||||
|
||||
@ -3,11 +3,11 @@ export function getBaseUrl() {
|
||||
let BASE_API;
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// BASE_API = 'https://joylink.club/jlcloud';
|
||||
// BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
|
||||
// BASE_API = 'http://192.168.3.6:9000'; // 旭强
|
||||
// BASE_API = 'http://192.168.3.41:9000'; // 张赛
|
||||
BASE_API = 'http://192.168.3.82:9000'; // 杜康
|
||||
// BASE_API = 'http://192.168.3.82:9000'; // 杜康
|
||||
} else {
|
||||
BASE_API = process.env.VUE_APP_BASE_API;
|
||||
}
|
||||
|
||||
@ -61,7 +61,8 @@ export default {
|
||||
},
|
||||
jointShow: false,
|
||||
jointGroup: '',
|
||||
lineCode:''
|
||||
lineCode:'',
|
||||
drawWay: false // 是否新版地图
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -104,6 +105,7 @@ export default {
|
||||
const resp = await getSubSystemDetail(this.$route.params.subSystem);
|
||||
this.tryUser = 0;
|
||||
this.loading = false;
|
||||
this.drawWay = res.data.drawWay;
|
||||
if (resp.data.mapPrd) {
|
||||
this.courseModel = {
|
||||
id: resp.data.mapPrd.id,
|
||||
@ -235,7 +237,11 @@ export default {
|
||||
const data = { mapId: this.courseModel.mapId, mapPrdId: this.currentPrdId };
|
||||
simulationNotify(data).then(resp => {
|
||||
const query = { lineCode: this.courseModel.lineCode, group: resp.data, prdType: this.courseModel.prdType, mapId: this.courseModel.mapId, code: this.currentPrdId, goodsId: this.goodsId, try: this.tryUser };
|
||||
this.$router.push({ path: `${UrlConfig.display}/demon`, query: query });
|
||||
if (this.drawWay) { // 新版地图
|
||||
this.$router.push({ path: `${UrlConfig.displayNew}/demon`, query: query });
|
||||
} else {
|
||||
this.$router.push({ path: `${UrlConfig.display}/demon`, query: query });
|
||||
}
|
||||
launchFullscreen();
|
||||
}).catch(error => {
|
||||
this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
|
||||
|
||||
@ -532,23 +532,23 @@ export default {
|
||||
this.drivingShow = true;
|
||||
this.$refs.Jl3dDrive.show(this.mapId, this.group);
|
||||
} else {
|
||||
let routeData = this.$router.resolve({
|
||||
path:'/jlmap3d/sandbox',
|
||||
query:{
|
||||
mapid:this.mapId,
|
||||
group:this.group,
|
||||
token:getToken(),
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank','noopener noreferrer');
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/jlmap3d/sandbox',
|
||||
query:{
|
||||
mapid:this.mapId,
|
||||
group:this.group,
|
||||
token:getToken()
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank', 'noopener noreferrer');
|
||||
}
|
||||
},
|
||||
devicemodel(){
|
||||
if(this.deviceShow == false){
|
||||
this.deviceShow = true;
|
||||
}else{
|
||||
this.deviceShow = false;
|
||||
}
|
||||
devicemodel() {
|
||||
if (this.deviceShow == false) {
|
||||
this.deviceShow = true;
|
||||
} else {
|
||||
this.deviceShow = false;
|
||||
}
|
||||
|
||||
},
|
||||
showScheduling() {
|
||||
|
||||
593
src/views/display/indexNew.vue
Normal file
593
src/views/display/indexNew.vue
Normal file
@ -0,0 +1,593 @@
|
||||
<template>
|
||||
<div class="main" :style="{width: canvasWidth+'px'}" @mousemove="mousemove">
|
||||
<div v-show="panelShow" :panelShow="panelShow">
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<map-system-draft ref="mapCanvas" @back="back" />
|
||||
</transition>
|
||||
|
||||
<menu-exam v-if="isExam" ref="menuExam" :offset="offset" :group="group" />
|
||||
|
||||
<menu-lesson v-if="isLesson" ref="lessonMenu" :offset="offset" :group="group" :training-obj="trainingObj" />
|
||||
|
||||
<menu-demon
|
||||
v-if="isDemon"
|
||||
ref="menuDemon"
|
||||
:offset="offset"
|
||||
:group="group"
|
||||
:quest-id="questId"
|
||||
@tryTime="tryTime"
|
||||
@hidepanel="hidepanel"
|
||||
@devicemodel="devicemodel"
|
||||
@quitQuest="quitQuest"
|
||||
@showScheduling="showScheduling"
|
||||
/>
|
||||
|
||||
<menu-screen v-if="isScreen" ref="menuScreen" :offset="offset" :group="group" @tryTime="tryTime" />
|
||||
|
||||
<menu-plan v-if="isPlan" ref="menuPlan" :offset="offset" :group="group" />
|
||||
|
||||
<menu-replay v-if="isReplay" ref="menuReplay" :offset="offset" :group="group" />
|
||||
|
||||
<menu-script v-if="isScript" ref="menuScript" :offset="offset" :group="group" />
|
||||
|
||||
<menu-schema
|
||||
v-if="isDemon || isPlan || isScript "
|
||||
ref="menuSchema"
|
||||
:offset="offset"
|
||||
:group="group"
|
||||
@switchMode="switchMode"
|
||||
@selectQuest="selectQuest"
|
||||
/>
|
||||
|
||||
<menu-system-time ref="menuSystemTime" :offset="offset" :right="right" :group="group" />
|
||||
</div>
|
||||
|
||||
<!-- <Jl3d-Simulation v-show="simulationShow" ref="Jl3dSimulation" :panel-show="simulationShow" @showpanel="showpanel" /> -->
|
||||
|
||||
<Jl3d-Device v-if="deviceShow" ref="Jl3dDevice" :panel-show="deviceShow" @showdevice="showdevice" />
|
||||
<Jl3d-Drive v-show="drivingShow" ref="Jl3dDrive" :panel-show="drivingShow" @showdriving="showdriving" />
|
||||
|
||||
<scheduling v-if="isShowScheduling" ref="scheduling" :group="group" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
|
||||
import MenuExam from '@/views/display/menuExam';
|
||||
import MenuLesson from '@/views/display/menuLesson';
|
||||
import MenuReplay from '@/views/display/menuReplay';
|
||||
import MenuDemon from '@/views/display/menuDemon';
|
||||
import MenuScreen from '@/views/display/menuScreen';
|
||||
import MenuSchema from '@/views/display/menuSchema';
|
||||
import MenuSystemTime from '@/views/display/menuSystemTime';
|
||||
import MenuPlan from '@/views/display/menuPlan';
|
||||
import MenuScript from '@/views/display/menuScript';
|
||||
import Scheduling from './demon/scheduling';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getTrainingDetail, getTrainingStepsDetail } from '@/api/jmap/training';
|
||||
import { setGoodsTryUse } from '@/api/management/goods';
|
||||
import { getProductDetail } from '@/api/management/mapprd';
|
||||
import { runDiagramQuit, loadScript, getSimulationInfo } from '@/api/simulation';
|
||||
import { OperateMode, TrainingMode } from '@/scripts/ConstDic';
|
||||
import { checkLoginLine } from '@/api/login';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import Vue from 'vue';
|
||||
|
||||
// 三维
|
||||
// import Jl3dSimulation from '@/views/jlmap3d/simulation/jl3dsimulation';
|
||||
import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
|
||||
import Jl3dDevice from '@/views/jlmap3d/device/jl3ddevice';
|
||||
import { getToken } from '@/utils/auth';
|
||||
export default {
|
||||
name: 'DisplayDraft',
|
||||
components: {
|
||||
MenuExam,
|
||||
MenuLesson,
|
||||
MenuReplay,
|
||||
MapSystemDraft,
|
||||
MenuPlan,
|
||||
MenuDemon,
|
||||
MenuScreen,
|
||||
MenuScript,
|
||||
MenuSchema,
|
||||
MenuSystemTime,
|
||||
// Jl3dSimulation,
|
||||
Jl3dDrive,
|
||||
Jl3dDevice,
|
||||
Scheduling
|
||||
},
|
||||
props: {
|
||||
size: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mode: '',
|
||||
trainingObj: {},
|
||||
timeDemonNum: 0,
|
||||
checkLine: null,
|
||||
offset: 15,
|
||||
mouseNum: 1,
|
||||
ierval: null,
|
||||
mouseNumTime: 0,
|
||||
mapBox: null,
|
||||
mapBoxP: null,
|
||||
panelShow: true,
|
||||
simulationShow: false,
|
||||
drivingShow: false,
|
||||
deviceShow: false,
|
||||
questId: 0, // 加载任务的Id
|
||||
group: '',
|
||||
prdTypeMap: {
|
||||
'01': '01', // 现地 => 现地
|
||||
'02': '02', // 行调 => 行调
|
||||
'04': '02', // 司机 => 行调
|
||||
'05': '' // 派班 => null
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'canvasWidth'
|
||||
]),
|
||||
...mapGetters('map', [
|
||||
'map'
|
||||
]),
|
||||
...mapGetters('training', [
|
||||
'offsetStationCode'
|
||||
]),
|
||||
...mapGetters('config', [
|
||||
'canvasId'
|
||||
]),
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height;
|
||||
},
|
||||
right() {
|
||||
return this.$store.state.config.width / 2 - 55;
|
||||
},
|
||||
trainingId() {
|
||||
return this.$route.query.trainingId;
|
||||
},
|
||||
mapId() {
|
||||
return this.$route.query.mapId;
|
||||
},
|
||||
prdType() {
|
||||
return this.$route.query.prdType;
|
||||
},
|
||||
skinCode() {
|
||||
return this.$route.query.skinCode;
|
||||
},
|
||||
isLesson() {
|
||||
return this.mode === 'teach' || this.mode === 'record' || this.mode === 'manage';
|
||||
},
|
||||
isExam() {
|
||||
return this.mode === 'exam';
|
||||
},
|
||||
isDemon() {
|
||||
return this.mode === 'demon';
|
||||
},
|
||||
isScreen() { // 暂时不用
|
||||
return this.mode === 'dp';
|
||||
},
|
||||
isReplay() { // 回放 暂时不用
|
||||
return this.mode === 'replay';
|
||||
},
|
||||
isScript() {
|
||||
return this.mode === 'script';
|
||||
},
|
||||
isPlan() {
|
||||
return this.mode === 'plan';
|
||||
},
|
||||
isDrive() {
|
||||
return this.prdType == '04';
|
||||
},
|
||||
isShowScheduling() {
|
||||
return this.$route.query.prdType == '05';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.config.menuBarLoadedCount': function (val) {
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount': function (val) {
|
||||
this.mapBoxP = document.getElementById(this.canvasId).children[0];
|
||||
this.mapBox = document.getElementsByTagName('canvas');
|
||||
|
||||
if (this.trainingId) {
|
||||
getTrainingStepsDetail(this.trainingId, { group: this.group }).then(resp => {
|
||||
this.trainingObj = resp.data;
|
||||
this.$store.dispatch('training/setTrainingData', this.trainingObj);
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
'$store.state.socket.permissionOver': function () {
|
||||
this.$alert('用户权限已被收回', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
this.back();
|
||||
}
|
||||
});
|
||||
},
|
||||
'size.width': function(val) {
|
||||
this.setWindowSize();
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() {
|
||||
this.setWindowSize();
|
||||
},
|
||||
$route() {
|
||||
this.$nextTick(() => {
|
||||
this.initLoadData();
|
||||
});
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.mode = this.$route.params.mode;
|
||||
this.group = this.$route.query.group || '';
|
||||
},
|
||||
async mounted() {
|
||||
EventBus.$on('clearCheckLogin', () => {
|
||||
this.clearCheckLogin();
|
||||
});
|
||||
|
||||
await this.setWindowSize();
|
||||
await this.initLoadData();
|
||||
},
|
||||
async beforeDestroy() {
|
||||
await this.clearAllTimer();
|
||||
if (!this.isReplay) {
|
||||
await this.quit();
|
||||
}
|
||||
await this.$store.dispatch('training/reset');
|
||||
await this.$store.dispatch('map/mapClear');
|
||||
EventBus.$off('clearCheckLogin');
|
||||
},
|
||||
methods: {
|
||||
// 清除检查在线定时器
|
||||
clearAllTimer() {
|
||||
if (this.ierval) {
|
||||
clearTimeout(this.ierval);
|
||||
this.ierval = null;
|
||||
}
|
||||
|
||||
if (this.checkLine) {
|
||||
clearTimeout(this.checkLine);
|
||||
this.checkLine = null;
|
||||
}
|
||||
},
|
||||
// 设置检查在线定时器
|
||||
checkLoginLineTimer() {
|
||||
if (this.checkLine) {
|
||||
clearTimeout(this.checkLine);
|
||||
}
|
||||
|
||||
this.checkLine = setInterval(() => {
|
||||
checkLoginLine();
|
||||
}, 5000 * 60);
|
||||
},
|
||||
// 设置手标显示状态
|
||||
checkMouseStatusTimer() {
|
||||
if (this.ierval) {
|
||||
clearTimeout(this.ierval);
|
||||
}
|
||||
|
||||
this.ierval = setInterval(() => {
|
||||
if (this.mouseNum) {
|
||||
this.mouseNum = 0;
|
||||
this.mouseNumTime = 0;
|
||||
} else {
|
||||
this.mouseNumTime += 1;
|
||||
}
|
||||
if (this.mapBox) {
|
||||
if (this.mouseNumTime >= 15) {
|
||||
for (let i = 0; i < this.mapBox.length; i++) {
|
||||
this.mapBox[i].style.cursor = 'none';
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < this.mapBox.length; i++) {
|
||||
this.mapBox[i].style.cursor = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
mousemove(e) {
|
||||
this.mouseNum = 1;
|
||||
},
|
||||
setPosition() {
|
||||
this.$nextTick(() => {
|
||||
let offset = 15;
|
||||
const menuBar = document.getElementById('menuBar');
|
||||
const menuTool = document.getElementById('menuTool');
|
||||
if (menuBar) {
|
||||
offset += (menuBar.offsetHeight || 0);
|
||||
}
|
||||
if (menuTool) {
|
||||
offset += (menuTool.offsetHeight || 0);
|
||||
}
|
||||
|
||||
if (this.offset != offset) {
|
||||
this.offset = offset;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 结束加载状态
|
||||
endViewLoading(isSuccess) {
|
||||
if (!isSuccess) {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
EventBus.$emit('viewLoading', false);
|
||||
});
|
||||
},
|
||||
// 加载仿真信息
|
||||
async loadSimulationInfo() {
|
||||
const resp = await getSimulationInfo(this.group);
|
||||
if (resp && resp.code == 200) {
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause);
|
||||
this.questId = Number(resp.data.questId) || 0;
|
||||
}
|
||||
},
|
||||
// 加载地图数据
|
||||
async initLoadData() {
|
||||
this.$store.dispatch('training/reset');
|
||||
|
||||
try {
|
||||
if (!this.isReplay) {
|
||||
await this.loadSimulationInfo();
|
||||
}
|
||||
|
||||
if (this.isReplay) {
|
||||
await this.initLoadReplayData();
|
||||
} else if (this.isDemon) {
|
||||
await this.initLoadDemonData();
|
||||
} else if (this.isScreen) {
|
||||
await this.initLoadScreenData();
|
||||
} else if (this.isPlan) {
|
||||
await this.initLoadTestRunData();
|
||||
} else if (this.isScript) {
|
||||
await this.initLoadTaskData();
|
||||
} else {
|
||||
await this.initLoadLessonOrExamData();
|
||||
}
|
||||
|
||||
this.checkLoginLineTimer();
|
||||
this.checkMouseStatusTimer();
|
||||
} catch (error) {
|
||||
this.$messageBox(`初始化失败: ${error.message}`);
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
// 课程和考试系统
|
||||
async initLoadLessonOrExamData() {
|
||||
this.$store.dispatch('training/end', null);
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
|
||||
|
||||
if (parseInt(this.trainingId)) {
|
||||
// 设置地图数据
|
||||
// 设置实训数据
|
||||
const resp = await getTrainingDetail(this.trainingId);
|
||||
if (resp && resp.code == 200) {
|
||||
const detail = resp.data;
|
||||
const rest = await getProductDetail(detail.prdId);
|
||||
if (rest && rest.code == 200) {
|
||||
const data = rest.data;
|
||||
await this.$store.dispatch('training/setPrdType', data.prdType);
|
||||
await this.loadMapDataById(this.mapId);
|
||||
}
|
||||
} else {
|
||||
this.$messageBox(`获取实训步骤数据失败`);
|
||||
this.endViewLoading();
|
||||
}
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
// 回放系统
|
||||
async initLoadReplayData() {
|
||||
this.$store.dispatch('training/end', TrainingMode.NORMAL);
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
|
||||
this.$store.dispatch('training/setPrdType', '');
|
||||
|
||||
if (parseInt(this.mapId)) {
|
||||
await this.loadMapDataById(this.mapId);
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
// 仿真系统
|
||||
async initLoadDemonData() {
|
||||
this.$store.dispatch('training/end', TrainingMode.NORMAL);
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
|
||||
this.$store.dispatch('training/setPrdType', this.prdTypeMap[this.prdType]);
|
||||
|
||||
if (parseInt(this.mapId)) {
|
||||
await this.loadMapDataById(this.mapId);
|
||||
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
// 大屏系统请求
|
||||
async initLoadScreenData() {
|
||||
this.$store.dispatch('training/end', TrainingMode.NORMAL);
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
|
||||
this.$store.dispatch('training/setPrdType', '01');
|
||||
if (parseInt(this.mapId)) {
|
||||
await this.loadMapDataById(this.mapId);
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
// 任务录制系统
|
||||
async initLoadTaskData() {
|
||||
this.$store.dispatch('training/end', TrainingMode.NORMAL);
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
|
||||
this.switchMode('01');
|
||||
|
||||
if (parseInt(this.mapId)) {
|
||||
await this.loadMapDataById(this.mapId);
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
// 测试跑车
|
||||
async initLoadTestRunData() {
|
||||
this.$store.dispatch('training/end', TrainingMode.NORMAL);
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
|
||||
this.$store.dispatch('training/setPrdType', '01');
|
||||
|
||||
if (parseInt(this.mapId)) {
|
||||
await this.loadMapDataById(this.mapId);
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
// 选择脚本
|
||||
async selectQuest(row, id, mapLocation, roleName) {
|
||||
try {
|
||||
|
||||
const res = await loadScript(row.id, id, this.group);
|
||||
if (res && res.code == 200) {
|
||||
this.questId = parseInt(row.id);
|
||||
if (mapLocation) {
|
||||
const newMapLocation = {'offsetX': mapLocation.x, 'offsetY': mapLocation.y, 'scaleRate': mapLocation.scale};
|
||||
Vue.prototype.$jlmap.setOptions(newMapLocation);
|
||||
}
|
||||
}
|
||||
if (this.$refs.menuDemon) {
|
||||
await this.$refs.menuDemon.initLoadPage();
|
||||
}
|
||||
|
||||
if (this.$refs.menuScript) {
|
||||
await this.$refs.menuScript.initLoadPage();
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.$messageBox(error.message);
|
||||
}
|
||||
},
|
||||
// 退出脚本
|
||||
async quitQuest() {
|
||||
this.questId = 0;
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', false);
|
||||
},
|
||||
// 通过id加载地图数据
|
||||
async loadMapDataById(mapId) {
|
||||
try {
|
||||
await loadMapDataById(mapId);
|
||||
await this.$store.dispatch('training/setMapDefaultState');
|
||||
} catch (error) {
|
||||
this.$messageBox(`获取地图数据失败: ${error.message}`);
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
|
||||
// 销毁仿真
|
||||
async quit() {
|
||||
await runDiagramQuit(this.group);
|
||||
await this.$store.dispatch('training/over');
|
||||
},
|
||||
// 仿真错误时，被动退出时调用
|
||||
async back() {
|
||||
if (this.isExam) {
|
||||
await this.$refs.menuExam.back();
|
||||
} else if (this.isLesson) {
|
||||
await this.$refs.lessonMenu.back();
|
||||
} else if (this.isDemon) {
|
||||
await this.$refs.menuDemon.back();
|
||||
} else if (this.isScreen) {
|
||||
await this.$refs.menuScreen.back();
|
||||
} else if (this.isPlan) {
|
||||
await this.$refs.menuPlan.back();
|
||||
} else if (this.isScript) {
|
||||
await this.$refs.menuScript.back();
|
||||
}
|
||||
},
|
||||
// 设置使用时间
|
||||
async tryTime(param) {
|
||||
const data = {
|
||||
goodsId: param.goodsId,
|
||||
time: param.time
|
||||
};
|
||||
if (data.goodsId) {
|
||||
await setGoodsTryUse(data);
|
||||
}
|
||||
},
|
||||
switchMode(prdType) {
|
||||
this.$store.dispatch('training/setPrdType', prdType);
|
||||
},
|
||||
hidepanel() {
|
||||
if (this.isDrive) {
|
||||
this.panelShow = false;
|
||||
this.drivingShow = true;
|
||||
this.$refs.Jl3dDrive.show(this.mapId, this.group);
|
||||
} else {
|
||||
const routeData = this.$router.resolve({
|
||||
path:'/jlmap3d/sandbox',
|
||||
query:{
|
||||
mapid:this.mapId,
|
||||
group:this.group,
|
||||
token:getToken()
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank', 'noopener noreferrer');
|
||||
}
|
||||
},
|
||||
devicemodel() {
|
||||
if (this.deviceShow == false) {
|
||||
this.deviceShow = true;
|
||||
} else {
|
||||
this.deviceShow = false;
|
||||
}
|
||||
|
||||
},
|
||||
showScheduling() {
|
||||
this.$refs.scheduling.doShow();
|
||||
},
|
||||
showpanel() {
|
||||
this.panelShow = true;
|
||||
this.simulationShow = false;
|
||||
},
|
||||
showdriving() {
|
||||
this.panelShow = true;
|
||||
this.drivingShow = false;
|
||||
},
|
||||
setWindowSize() {
|
||||
this.$nextTick(() => {
|
||||
const width = this.size ? this.size.width : this.width;
|
||||
const height = this.size ? this.size.height : this.height;
|
||||
|
||||
this.$store.dispatch('config/resize', { width, height });
|
||||
|
||||
this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.main {
|
||||
z-index: 10;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
164
src/views/newMap/mapsystemNew/common/index.vue
Normal file
164
src/views/newMap/mapsystemNew/common/index.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div id="_Tips_Start_Position" class="mapContext">
|
||||
<training-tips ref="trainingTips" />
|
||||
<component :is="menus" :selected="selected" />
|
||||
<jlmap-visual ref="jlmapVisual" @onSelect="clickEvent" @onMenu="contextmenu" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getDeviceMenuByDeviceType, OperationEvent } from '@/scripts/ConstDic';
|
||||
import { letfMouseSelectDevice } from '@/api/simulation';
|
||||
import deviceType from '@/jmap/constant/deviceType';
|
||||
import JlmapVisual from '@/views/newMap/jlmapNew/index';
|
||||
import TrainingTips from '@/views/mapsystem/plugin/trainingtip';
|
||||
|
||||
export default {
|
||||
name: 'LessonCanvas',
|
||||
components: {
|
||||
JlmapVisual,
|
||||
TrainingTips
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selected: null,
|
||||
menus: null,
|
||||
point: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('menuOperation', [
|
||||
'buttonOperation'
|
||||
]),
|
||||
Signal() {
|
||||
return OperationEvent.Signal;
|
||||
},
|
||||
isScreen() {
|
||||
return this.$route.params.mode === 'dp';
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapDataLoadedCount': function () {
|
||||
const lineCode = this.$jlmap.lineCode;
|
||||
if (lineCode) {
|
||||
this.menus = this.$theme.loadMenuComponent(lineCode);
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.autoSaveTask) {
|
||||
clearInterval(this.autoSaveTask);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取设备数据
|
||||
getDeviceByEm(em) {
|
||||
var device = this.$store.getters['map/getDeviceByCode'](em.deviceCode) || null;
|
||||
if (device) {
|
||||
device._viewVal = em.val;
|
||||
}
|
||||
return device;
|
||||
},
|
||||
// 根据皮肤类型转换激活的菜单类型
|
||||
getSelectedByLineCode(device) {
|
||||
const switchSectionIsWitchLineCodeList = ['03'];
|
||||
const lineCode = this.$store.getters['map/lineCode'];
|
||||
if (switchSectionIsWitchLineCodeList.includes(lineCode) && device._type == deviceType.Section) {
|
||||
const section = this.$store.getters['map/getDeviceByCode'](device._code);
|
||||
if (section) {
|
||||
device = this.$store.getters['map/getDeviceByCode'](section.relSwitchCode);
|
||||
}
|
||||
}
|
||||
|
||||
return device;
|
||||
},
|
||||
clickEvent(em) {
|
||||
var device = { _type: em.deviceType, _code: em.deviceCode };
|
||||
var CanClickDeviceList = [
|
||||
deviceType.Switch,
|
||||
deviceType.Signal,
|
||||
deviceType.StationStand
|
||||
];
|
||||
|
||||
if (em.deviceCode) {
|
||||
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.$store.dispatch('menuOperation/setSelected', device);
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
|
||||
},
|
||||
contextmenu(em) {
|
||||
var menu = null;
|
||||
var device = null;
|
||||
|
||||
this.point = { x: em.clientX, y: em.clientY };
|
||||
|
||||
if (em.subType === 'TrainWindow') {
|
||||
device = { _type: deviceType.Train, code: em.deviceCode };
|
||||
this.$store.dispatch('map/setTrainWindowShow', true);
|
||||
} else if (em.deviceCode && !this.isScreen) {
|
||||
device = this.getDeviceByEm(em);
|
||||
}
|
||||
|
||||
if (device) {
|
||||
this.selected = device = this.getSelectedByLineCode(device);
|
||||
if (!this.buttonOperation) {
|
||||
this.$store.dispatch('menuOperation/setSelected', device);
|
||||
if (!this.checkShouldPop(device)) {
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: null });
|
||||
} else {
|
||||
menu = getDeviceMenuByDeviceType(device._type);
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
|
||||
}
|
||||
}
|
||||
} else {
|
||||
menu = getDeviceMenuByDeviceType('Cancel');
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
|
||||
}
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
},
|
||||
checkShouldPop(device) {
|
||||
const lineCode = this.$store.getters['map/lineCode'];
|
||||
if (device._type === 'Signal') {
|
||||
return device._viewVal === '3';
|
||||
} else if (device._type === 'StationControl' && lineCode == '01') { // 中控模式显示范围
|
||||
return device._viewVal === '1';
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
mapViewLoaded(loading) {
|
||||
this.$refs.jlmapVisual && this.$refs.jlmapVisual.mapViewLoaded(loading);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.mapContext {
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "PingFang SC", Arial, consolas;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
</style>
|
||||
134
src/views/newMap/mapsystemNew/index.vue
Normal file
134
src/views/newMap/mapsystemNew/index.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="mainContext">
|
||||
<map-common ref="mapCommon" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MapCommon from './common/index';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
|
||||
import { sendCommand } from '@/api/jmap/training';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
|
||||
export default {
|
||||
name: 'MapSystemDraft',
|
||||
components: {
|
||||
MapCommon
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
topic: '/user/queue/training',
|
||||
stomp: null,
|
||||
currentMap: null,
|
||||
mode: '',
|
||||
isDesignPlatform: false,
|
||||
group: ''
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapViewLoadedCount': function (val) {
|
||||
this.subscribe();
|
||||
},
|
||||
'$store.state.socket.equipmentStatus': function (val) {
|
||||
if (val.length) {
|
||||
this.statusMessage(val);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.trainStationList': function (val) {
|
||||
if (val.length) {
|
||||
this.runFactMessage(val);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationError': function (val) {
|
||||
if (val) {
|
||||
this.simulationError(val);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationReset': function (val) {
|
||||
if (val) {
|
||||
this.simulationReset(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.onbeforeunload = this.clearSubscribe;
|
||||
this.mode = this.$route.params.mode || '';
|
||||
this.group = this.$route.query.group || '';
|
||||
this.currentMap = this.$refs.mapCommon;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$store.dispatch('config/resetCanvasOffset');
|
||||
}, 100);
|
||||
});
|
||||
this.isDesignPlatform = getSessionStorage('project').startsWith('design');
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearSubscribe();
|
||||
},
|
||||
methods: {
|
||||
async mapViewLoaded(loading) {
|
||||
this.currentMap.mapViewLoaded(loading);
|
||||
},
|
||||
async statusMessage(list) {
|
||||
await this.$store.dispatch('training/updateMapState', list);
|
||||
await this.$store.dispatch('socket/setEquipmentStatus');
|
||||
},
|
||||
async runFactMessage(list) {
|
||||
await this.$store.dispatch('runPlan/updateRunPlanData', list);
|
||||
await this.$store.dispatch('socket/setTrainStationList');
|
||||
},
|
||||
async simulationError() {
|
||||
await this.$store.dispatch('map/clearJlmapTrainView');
|
||||
await this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
await this.$store.dispatch('socket/setSimulationError');
|
||||
await this.$store.dispatch('training/setMapDefaultState');
|
||||
this.clearSubscribe();
|
||||
this.$confirm(this.$t('tip.getMapStateDataException'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
showCancelButton: false,
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$emit('back');
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
async simulationReset() {
|
||||
await this.$store.dispatch('map/clearJlmapTrainView');
|
||||
await this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
await this.$store.dispatch('training/over');
|
||||
await this.$store.dispatch('socket/setSimulationReset');
|
||||
await this.$store.dispatch('socket/setSimulationStart');
|
||||
await this.$store.dispatch('training/setMapDefaultState');
|
||||
},
|
||||
async subscribe() {
|
||||
this.clearSubscribe();
|
||||
const header = { group: this.group || '', 'X-Token': getToken() };
|
||||
creatSubscribe(`${displayTopic}\/${this.group}`, header);
|
||||
|
||||
await this.$store.dispatch('training/setHasSubscribed');
|
||||
},
|
||||
clearSubscribe() {
|
||||
clearSubscribe(`${displayTopic}\/${this.group}`);
|
||||
},
|
||||
sendDeviceChangeEvent(data, header) {
|
||||
// 发送设备操作事件到服务器
|
||||
sendCommand('', data).then(response => {
|
||||
}).catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.mainContext {
|
||||
font-family: "Helvetica Neue ", Helvetica, "PingFang SC ", "Hiragino Sans GB ", "Microsoft YaHei ", "PingFang SC ", Arial, consolas;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
35
src/views/newMap/mapsystemNew/plugin/delayBox.vue
Normal file
35
src/views/newMap/mapsystemNew/plugin/delayBox.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div v-if="delayShow">
|
||||
<div v-for="item in stationList">
|
||||
<delay-info v-if="item.delayInfo" :delay-info-list="item.delayInfo" position="item.points" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DelayInfo from './delayInfo';
|
||||
|
||||
export default {
|
||||
name: 'DelayBox',
|
||||
components: {
|
||||
DelayInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
delayShow: false,
|
||||
stationList: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.stationList': function(val) {
|
||||
this.stationList = val;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
72
src/views/newMap/mapsystemNew/plugin/delayInfo.vue
Normal file
72
src/views/newMap/mapsystemNew/plugin/delayInfo.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div v-show="showDelayBox" class="info_box" :style="{left: tPosition.x+'px', top: tPosition.y+'px' }">
|
||||
<el-scrollbal>
|
||||
<div v-for="item in delayInfoList"><span>人解</span><span>信号机名</span><span>时间</span></div>
|
||||
</el-scrollbal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DelayInfo',
|
||||
props: {
|
||||
delayInfoList: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: function () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
position: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: function () {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tPosition: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
showDelayBox: true
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'position.x': function (val) {
|
||||
this.handlePosition();
|
||||
},
|
||||
'position.y': function (val) {
|
||||
this.handlePosition();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePosition() {
|
||||
const offset = this.$store.state.config.canvasOffset;
|
||||
this.tPosition = {
|
||||
x: this.position.x + offset.x,
|
||||
y: this.position.y + offset.y
|
||||
};
|
||||
if (this.tPosition.x < 0 || this.tPosition < 0) {
|
||||
this.showDelayBox = false;
|
||||
} else {
|
||||
this.showDelayBox = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.info_box{
|
||||
border-top:1px solid #fff;
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
background-color: #000;
|
||||
}
|
||||
</style>
|
||||
172
src/views/newMap/mapsystemNew/plugin/src/poptip.vue
Normal file
172
src/views/newMap/mapsystemNew/plugin/src/poptip.vue
Normal file
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div id="pop_tip_dialog" class="pop-dialog" :style="{ height: 'auto', left: tPosition.x+'px', top: tPosition.y+'px' }">
|
||||
<div ref="tipRef" class="pop-content" style="text-align: center;" :style="{ width: width + 'px' }">
|
||||
<p style="color: black;">{{ tip }}</p>
|
||||
<div v-show="tPosition.align === 'top'" x-arrow class="popper__arraw_top" :style="{left: arrawLeft+'px'}" />
|
||||
<div v-show="tPosition.align === 'bottom'" x-arrow class=" popper__arraw_bottom" :style="{left: arrawLeft+'px'}" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PopTip',
|
||||
props: {
|
||||
position: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: function () {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
}
|
||||
},
|
||||
tip: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultFontSize: 14,
|
||||
maxWidth: 300,
|
||||
tPosition: {
|
||||
x: -300,
|
||||
y: -300,
|
||||
align: 'bottom'
|
||||
},
|
||||
offset: 7
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
let width = this.tip.length * this.defaultFontSize + 40;
|
||||
if (width > this.maxWidth) {
|
||||
width = this.maxWidth;
|
||||
}
|
||||
return width;
|
||||
},
|
||||
arrawLeft() {
|
||||
return this.width / 5;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'position.x': function (val) {
|
||||
this.resetShowPosition();
|
||||
},
|
||||
'position.y': function (val) {
|
||||
this.resetShowPosition();
|
||||
},
|
||||
'tip': function (val) {
|
||||
this.resetShowPosition();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resetShowPosition();
|
||||
},
|
||||
methods: {
|
||||
resetShowPosition() {
|
||||
const self = this;
|
||||
this.$nextTick(() => {
|
||||
// 位置
|
||||
const height = self.$el.clientHeight;
|
||||
|
||||
self.tPosition.align = self.position.align || 'bottom';
|
||||
self.tPosition.x = self.position.x - (this.arrawLeft + this.offset);
|
||||
|
||||
if (self.tPosition.align == 'top') {
|
||||
const distance = 47;
|
||||
self.tPosition.y = self.position.y + (distance);
|
||||
} else if (self.tPosition.align == 'bottom') {
|
||||
const distance = 5;
|
||||
self.tPosition.y = self.position.y - (height + distance);
|
||||
}
|
||||
|
||||
if (self.tPosition.x < 0) self.tPosition.x = 0;
|
||||
if (self.tPosition.y < 0) self.tPosition.y = 0;
|
||||
});
|
||||
},
|
||||
reset() {
|
||||
this.tPosition = {
|
||||
x: -300,
|
||||
y: -300
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
$bg: #FFDD00;
|
||||
$hoverBg: #f5f7fa;
|
||||
|
||||
.pop-dialog {
|
||||
background-color: $bg;
|
||||
border-radius: 6px;
|
||||
position: fixed;
|
||||
padding: 7px 0px;
|
||||
z-index: 9998;
|
||||
|
||||
.pop-content {
|
||||
.popper__arraw_bottom {
|
||||
position: absolute;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
background: $bg;
|
||||
-moz-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.popper__arraw_top {
|
||||
position: absolute;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
top: -7px;
|
||||
background: $bg;
|
||||
-moz-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.popper__arraw_left {
|
||||
position: absolute;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
left: -7px;
|
||||
background: $bg;
|
||||
-moz-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.popper__arraw_right {
|
||||
position: absolute;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
right: -7px;
|
||||
background: $bg;
|
||||
-moz-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dsp-block {
|
||||
display: block;
|
||||
text-align: left;
|
||||
padding: 6px 15px;
|
||||
width: 100%;
|
||||
border-radius: unset;
|
||||
}
|
||||
|
||||
.dsp-block:hover {
|
||||
background-color: $hoverBg;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
24
src/views/newMap/mapsystemNew/plugin/src/tip.vue
Normal file
24
src/views/newMap/mapsystemNew/plugin/src/tip.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<p style="text-align: center;">{{ tip }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Tip',
|
||||
props: {
|
||||
tip: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultFontSize: 14
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
181
src/views/newMap/mapsystemNew/plugin/trainingtip.vue
Normal file
181
src/views/newMap/mapsystemNew/plugin/trainingtip.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div v-if="tipShow">
|
||||
<pop-tip v-show="popShow" :position="position" :tip="tip" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import PopTip from '@/views/mapsystem/plugin/src/poptip';
|
||||
import { getDeviceTypeByDic, getDomIdByOperation } from '@/scripts/ConstDic';
|
||||
import { getDomOffset } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'TrainingTips',
|
||||
components: { PopTip },
|
||||
data() {
|
||||
return {
|
||||
tipShow: false,
|
||||
popShow: false,
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
tip: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'canvasWidth',
|
||||
'canvasHeight'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.tipEvent': function (val) {
|
||||
this.tipInit();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tipInit() {
|
||||
this.$nextTick(() => {
|
||||
this.$store.dispatch('training/isTeachMode').then(() => {
|
||||
this.tipShow = true;
|
||||
const offset = this.$store.state.config.canvasOffset;
|
||||
if (this.$store.state.training.started) {
|
||||
const order = this.$store.state.training.order;
|
||||
const steps = this.$store.state.training.steps;
|
||||
if (order > -1 && order < steps.length) {
|
||||
const step = steps[order];
|
||||
const distance = 5;
|
||||
this.tip = step.tip;
|
||||
/** 如果mbm或者bar的处理*/
|
||||
if (step.type === 'mbm' || step.type === 'bar') {
|
||||
const position = this.getOtherTipPoint(step);
|
||||
if (position) {
|
||||
this.position = position;
|
||||
this.position.y -= distance;
|
||||
this.popTipShow();
|
||||
}
|
||||
} else if (step.code) {
|
||||
/** 默认是shape类型，如果找不到坐标，则可以认为是存在code的dailog*/
|
||||
const position = this.getShapeTipPoint(step);
|
||||
if (position) {
|
||||
this.position = {
|
||||
x: position.x + offset.x,
|
||||
y: position.y + offset.y - distance
|
||||
};
|
||||
this.popTipShow();
|
||||
} else {
|
||||
const position = this.getOtherTipPoint(step);
|
||||
if (position) {
|
||||
this.position = position;
|
||||
this.position.y -= distance;
|
||||
this.popTipShow();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
/** 不存在code字段的dialog处理*/
|
||||
const position = this.getOtherTipPoint(step);
|
||||
if (position) {
|
||||
this.position = position;
|
||||
this.position.y -= distance;
|
||||
this.popTipShow();
|
||||
} else {
|
||||
this.popTipHide();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.tipShow = false;
|
||||
}
|
||||
} else {
|
||||
this.tipShow = false;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.tipShow = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
popTipShow() {
|
||||
this.popShow = true;
|
||||
},
|
||||
popTipHide() {
|
||||
this.popShow = false;
|
||||
},
|
||||
// 获取地图设备提示位置
|
||||
getShapeTipPoint(step) {
|
||||
var position = null;
|
||||
const type = getDeviceTypeByDic(step.type);
|
||||
if (type) {
|
||||
position = this.$jlmap.getShapeTipPoint({
|
||||
code: step.code,
|
||||
val: step.val
|
||||
});
|
||||
|
||||
if (position) {
|
||||
if (position.x < 0) {
|
||||
position.x = 0;
|
||||
}
|
||||
if (position.x > this.canvasWidth) {
|
||||
position.x = this.canvasWidth;
|
||||
}
|
||||
if (position.y < 0) {
|
||||
position.y = 0;
|
||||
}
|
||||
if (position.y > this.canvasHeight) {
|
||||
position.y = this.canvasHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
return position;
|
||||
},
|
||||
// 获取地图菜单按钮和对话框按钮提示显示位置
|
||||
getOtherTipPoint(step) {
|
||||
const domId = getDomIdByOperation(step.operation);
|
||||
const btnDom = document.getElementById(domId);
|
||||
if (btnDom) {
|
||||
const offset = getDomOffset(btnDom, true);
|
||||
if (offset.x == 0 && offset.y == 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let align = 'bottom';
|
||||
if (this.tipAlignIsTop(step, domId)) {
|
||||
align = 'top';
|
||||
}
|
||||
|
||||
return {
|
||||
align: align,
|
||||
x: offset.x + btnDom.clientWidth / 2,
|
||||
y: offset.y
|
||||
};
|
||||
}
|
||||
return null;
|
||||
},
|
||||
tipAlignIsTop(step, domId) {
|
||||
// 如果是tip框则箭头朝上
|
||||
if (step.type.toUpperCase() === 'bar'.toUpperCase()) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (/{TOP}/.test(domId)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (/{BOTTOM}/.test(domId)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 如果domId中不含以下关键字，则箭头朝上
|
||||
const keyList = ['choose', 'select'];
|
||||
for (var key in keyList) {
|
||||
if (domId.toUpperCase().indexOf(keyList[key].toUpperCase()) !== -1) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 其他情况默认朝下
|
||||
return true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -88,7 +88,7 @@ export default {
|
||||
logicSectionNumList.push(Number(ele.num));
|
||||
counts += parseInt(ele.num);
|
||||
});
|
||||
if (counts === 0 || allNotZeros) {
|
||||
if (counts == 0 || allNotZeros) {
|
||||
let logicSectionCodeList = [];
|
||||
models.forEach(item=> {
|
||||
logicSectionCodeList.push(item.code);
|
||||
@ -98,7 +98,7 @@ export default {
|
||||
models.push(deepAssign(section, {_dispose: true}));
|
||||
}
|
||||
});
|
||||
if (counts === 0) {
|
||||
if (counts == 0) {
|
||||
logicSectionNumList = [];
|
||||
logicSectionCodeList = [];
|
||||
}
|
||||
|
||||
@ -120,7 +120,7 @@ export default {
|
||||
this.mapId = obj.id;
|
||||
this.$router.push({ path: `${UrlConfig.trainingPlatform.permission}/${this.mapId}`});
|
||||
} else if ( obj.type === 'MapSystem') {
|
||||
getSubSystemInfo(obj.id).then(resp => {
|
||||
getSubSystemInfo(obj.id).then(resp => { // 查询子系统信息
|
||||
let router = '';
|
||||
switch (resp.data.type) {
|
||||
case 'Exam':
|
||||
|
||||
Loading…
Reference in New Issue
Block a user