调整实训平台新旧地图显示逻辑

src/layout/components/Entry.vue

@@ -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',
+            lang: 'zh'
-            switchNewMap: false
         };
     },
     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' );
         }
     }
 };

src/router/index.js

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

src/utils/baseUrl.js

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

src/views/demonstration/detail/index.vue

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

src/views/display/index.vue

@@ -532,23 +532,23 @@ export default {
                 this.drivingShow = true;
                 this.$refs.Jl3dDrive.show(this.mapId, this.group);
             } else {
-              let routeData = this.$router.resolve({
+                const routeData = this.$router.resolve({
-            　　path:'/jlmap3d/sandbox',
+                    path:'/jlmap3d/sandbox',
-                query:{
+                    query:{
-                  mapid:this.mapId,
+                        mapid:this.mapId,
-                  group:this.group,
+                        group:this.group,
-                  token:getToken(),
+                        token:getToken()
-                }
+                    }
-              });
+                });
-              window.open(routeData.href, '_blank','noopener noreferrer');
+                window.open(routeData.href, '_blank', 'noopener noreferrer');
             }
         },
-        devicemodel(){
+        devicemodel() {
-          if(this.deviceShow == false){
+            if (this.deviceShow == false) {
-            this.deviceShow = true;
+                this.deviceShow = true;
-          }else{
+            } else {
-            this.deviceShow = false;
+                this.deviceShow = false;
-          }
+            }
 
         },
         showScheduling() {

src/views/display/indexNew.vue

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

src/views/newMap/mapsystemNew/common/index.vue

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

src/views/newMap/mapsystemNew/index.vue

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

src/views/newMap/mapsystemNew/plugin/delayBox.vue

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

src/views/newMap/mapsystemNew/plugin/delayInfo.vue

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

src/views/newMap/mapsystemNew/plugin/src/poptip.vue

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

src/views/newMap/mapsystemNew/plugin/src/tip.vue

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

src/views/newMap/mapsystemNew/plugin/trainingtip.vue

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

src/views/newMap/newMapdraft/mapoperate/section/logicBlock.vue

@@ -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 = [];
                 }

src/views/trainingPlatform/demonList.vue

@@ -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':