From 9b422cd3b9d770bcb1d70acee1f74744b217f5ac Mon Sep 17 00:00:00 2001
From: fan <18706759286@163.com>
Date: Wed, 19 May 2021 15:14:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=97=E4=BA=AC=E4=BA=8C=E5=8F=B7=E7=BA=BF?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=EF=BC=88=E6=9C=AA=E5=AE=8C=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nanjing_02/menus/dialog/mapVisual.vue     |   2 +-
 .../nanjing_02/menus/dialog/troDetail.vue     |  33 +-
 src/jmapNew/theme/nanjing_02/menus/index.vue  |  42 +-
 .../theme/nanjing_02/menus/menuBar.vue        |   3 +-
 src/router/index.js                           |   6 +
 src/views/demonstration/detail/index.vue      |   6 +-
 src/views/newMap/displayBaSiDi/baSiDi.vue     | 365 ++++++++++++++++++
 src/views/newMap/displayBaSiDi/index.vue      | 315 +++++++++++++++
 8 files changed, 731 insertions(+), 41 deletions(-)
 create mode 100644 src/views/newMap/displayBaSiDi/baSiDi.vue
 create mode 100644 src/views/newMap/displayBaSiDi/index.vue

diff --git a/src/jmapNew/theme/nanjing_02/menus/dialog/mapVisual.vue b/src/jmapNew/theme/nanjing_02/menus/dialog/mapVisual.vue
index d8aec6eca..fe64b16a2 100644
--- a/src/jmapNew/theme/nanjing_02/menus/dialog/mapVisual.vue
+++ b/src/jmapNew/theme/nanjing_02/menus/dialog/mapVisual.vue
@@ -182,7 +182,7 @@ export default {
         // 重置jlmap宽高
         resetSize() {
             this.$nextTick(() => {
-                this.map && this.map.resize({ width: 1920, height: 960 });
+                this.map && this.map.resize({ width: this.width, height: this.height });
             });
         },
         // 设置显示图层
diff --git a/src/jmapNew/theme/nanjing_02/menus/dialog/troDetail.vue b/src/jmapNew/theme/nanjing_02/menus/dialog/troDetail.vue
index a64f39426..bb7c8b603 100644
--- a/src/jmapNew/theme/nanjing_02/menus/dialog/troDetail.vue
+++ b/src/jmapNew/theme/nanjing_02/menus/dialog/troDetail.vue
@@ -8,7 +8,7 @@
     :before-close="doClose"
     :z-index="2000"
   >
-    <map-visual ref="map" type="troDetail" :device-code="deviceCode" />
+    <map-system-draft ref="mapCanvas" @back="back" />
     <div style="width: 150px;height: 35px;display: flex;position: absolute; bottom: 60px;left: calc(50% - 75px);z-index: 9999;justify-content: space-between;justify-items: center;">
       <div class="arrow-button" @click="changeStation(-1)"><i class="el-icon-back" /></div>
       <div class="arrow-button" @click="goTroDialog"><i class="el-icon-top" /><i class="el-icon-top" /></div>
@@ -18,12 +18,13 @@
 </template>
 
 <script>
-import MapVisual from './mapVisual';
+// import MapVisual from './mapVisual';
+import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
 
 export default {
     name: 'TRO',
     components: {
-        MapVisual
+        MapSystemDraft
     },
     props: {
         stationList: {
@@ -44,27 +45,25 @@ export default {
         },
         title() {
             return '轨道详览';
+        },
+        width() {
+            return this.$store.state.app.width - 30;
+        },
+        height() {
+            return this.$store.state.app.height - 60;
         }
     },
     methods: {
         doShow(deviceCode) {
             this.dialogShow = true;
+            this.$store.dispatch('config/resize', { width:this.width, height: this.height });
             this.deviceCode = deviceCode;
-            this.$nextTick(function () {
-                const map = this.$store.state.map.map;
-                const data = {
-                    sectionList: map.sectionList,
-                    scaling: map.scaling,
-                    skinVO: map.skinVO,
-                    stationList: map.stationList,
-                    origin: map.origin,
-                    bigScreenConfig: map.bigScreenConfig,
-                    switchList: map.switchList
-                };
-                this.mapData = JSON.parse(JSON.stringify(data));
-                this.$refs.map.loadData(this.mapData, {showMode: '02'});
+            this.$nextTick(function() {
+                this.$store.state.map.map = Object.assign({}, this.$store.state.map.map);
+                this.$refs.mapCanvas.setCenter(this.deviceCode);
             });
         },
+        back() {},
         doClose() {
             this.loading = false;
             this.dialogShow = false;
@@ -81,7 +80,7 @@ export default {
             });
             if (station) {
                 this.deviceCode = station.code;
-                this.$refs.map.setCenter(this.deviceCode);
+                this.$refs.mapCanvas.setCenter(this.deviceCode);
             }
         }
     }
diff --git a/src/jmapNew/theme/nanjing_02/menus/index.vue b/src/jmapNew/theme/nanjing_02/menus/index.vue
index 23139bdca..77a382f34 100644
--- a/src/jmapNew/theme/nanjing_02/menus/index.vue
+++ b/src/jmapNew/theme/nanjing_02/menus/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="menus" :style="{width: width + 'px'}">
-    <menu-bar v-if="$store.state.training.prdType === '01' || $store.state.training.prdType === '02'" ref="menuBar" :selected="selected" :loginActive="loginActive" :isIgnoreLogin="isIgnoreLogin"  @login="login" />
+    <menu-bar v-if="$store.state.training.prdType === '01'" ref="menuBar" :selected="selected" :login-active="loginActive" :is-ignore-login="isIgnoreLogin" @login="login" />
     <menu-train ref="menuTrain" :selected="selected" />
     <menu-station-stand ref="menuStationStand" :selected="selected" />
     <menu-signal ref="menuSignal" :selected="selected" />
     <menu-switch ref="menuSwitch" :selected="selected" />
     <menu-section ref="menuSection" :selected="selected" />
     <menu-station ref="menuStation" :selected="selected" />
-    <menu-button v-if="isShowButton" ref="menuButton" :selected="selected" :loginActive="loginActive" :isIgnoreLogin="isIgnoreLogin" :inputStr="inputStr" />
+    <menu-button v-if="isShowButton" ref="menuButton" :selected="selected" :login-active="loginActive" :is-ignore-login="isIgnoreLogin" :input-str="inputStr" />
     <passive-alarm ref="passiveAlarm" />
     <passive-contorl ref="passiveControl" pop-class="haerbin-01__systerm" />
     <passive-Timeout ref="passiveTimeout" />
@@ -50,25 +50,25 @@ export default {
                 return null;
             }
         }
-	},
-	data() {
-		return {
-			loginActive: false,
-			inputStr: ''
-		}
-	},
+    },
+    data() {
+        return {
+            loginActive: false,
+            inputStr: ''
+        };
+    },
     computed: {
         ...mapGetters('config', [
             'width'
         ]),
         isShowButton() {
             return this.$store.state.training.prdType === '01' || this.$store.state.training.prdType === '02';
-		},
-		isIgnoreLogin() {
-			return /jointTrainingNew/.test(this.$route.path) ||
+        },
+        isIgnoreLogin() {
+            return /jointTrainingNew/.test(this.$route.path) ||
 			/scriptDisplayNew/.test(this.$route.path) ||
-			/displayNew\/[teach|exam|manage]/.test(this.$route.path)
-		}
+			/displayNew\/[teach|exam|manage]/.test(this.$route.path);
+        }
     },
     watch: {
         isShowBar(val) {
@@ -79,13 +79,13 @@ export default {
         this.$nextTick(() => {
             this.$store.dispatch('config/updateMenuBar');
         });
-	},
-	methods: {
-		login(inputStr) {
-			this.loginActive = !!inputStr
-			this.inputStr = inputStr;
-		}
-	}
+    },
+    methods: {
+        login(inputStr) {
+            this.loginActive = !!inputStr;
+            this.inputStr = inputStr;
+        }
+    }
 };
 </script>
 
diff --git a/src/jmapNew/theme/nanjing_02/menus/menuBar.vue b/src/jmapNew/theme/nanjing_02/menus/menuBar.vue
index ec526437a..d2c83508b 100644
--- a/src/jmapNew/theme/nanjing_02/menus/menuBar.vue
+++ b/src/jmapNew/theme/nanjing_02/menus/menuBar.vue
@@ -261,7 +261,8 @@ export default {
             'order'
         ]),
         ...mapGetters('map', [
-            'stationList'
+            'stationList',
+            'trainList'
         ]),
         userId() {
             return this.$store.state.user ? this.$store.state.user.id : '';
diff --git a/src/router/index.js b/src/router/index.js
index c5f947fc7..442c0d725 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -34,6 +34,7 @@ const Jlmap3dOtherVR = () => import('@/views/jlmap3d/maintainer/jl3dothervr');
 
 const DisplayNew = () => import('@/views/newMap/displayNew/index');
 const DisplayCity = () => import('@/views/newMap/displayCity/index');
+const DisplayBaSiDi = () => import('@/views/newMap/displayBaSiDi/index');
 const DesignDisplayNew = () => import('@/views/newMap/displayNew/scriptDisplay/scriptPreview/index');
 const PracticeDisplay = () => import('@/views/newMap/displayNew/practiceDisplay');
 const BigLPFStrategy = () => import('@/views/newMap/displayNew/bigLPFStrategy');
@@ -393,6 +394,11 @@ export const publicAsyncRoute = [
         component: DisplayCity,
         hidden: true
     },
+    {
+        path: '/displayBaSiDi/:mode',
+        component: DisplayBaSiDi,
+        hidden: true
+    },
     {
         path: '/design/displayNew/:mode',
         component: DesignDisplayNew,
diff --git a/src/views/demonstration/detail/index.vue b/src/views/demonstration/detail/index.vue
index e5fe7bf3d..959d86981 100644
--- a/src/views/demonstration/detail/index.vue
+++ b/src/views/demonstration/detail/index.vue
@@ -249,7 +249,11 @@ export default {
                     if (this.loadingProjectList.includes(this.project)) {
                         this.$store.dispatch('app/transitionAnimations');
                     }
-                    this.$router.push({ path: `${UrlConfig.displayNew}/demon`, query: query });
+                    if (this.currentPrdType === '02' && this.courseModel.lineCode === '14') {
+                        this.$router.push({ path: `/displayBaSiDi/demon`, query: query });
+                    } else {
+                        this.$router.push({ path: `${UrlConfig.displayNew}/demon`, query: query });
+                    }
                     launchFullscreen();
                 }).catch(error=>{
                     if (error.code == 10003) {
diff --git a/src/views/newMap/displayBaSiDi/baSiDi.vue b/src/views/newMap/displayBaSiDi/baSiDi.vue
new file mode 100644
index 000000000..d2b87962c
--- /dev/null
+++ b/src/views/newMap/displayBaSiDi/baSiDi.vue
@@ -0,0 +1,365 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+    width="100%"
+  >
+    <div style="height: 130px;">
+      <div class="haerbin-01__systerm nav">
+        <el-row style="padding: 3px;">
+          <el-col :span="20">
+            <div style="width: calc(100% - 10px);border: 2px solid #DDD9CA;border-radius: 1px;height: 132px;">
+              <el-row style="padding: 4px;">
+                <div class="tip-content-box">
+                  <div v-if="tipContent[0]">{{ `${tipContent[0].level}` }}</div>
+                  <div v-if="tipContent[0]">{{ `${tipContent[0].time}` }}</div>
+                  <div v-if="tipContent[0]">{{ `${tipContent[0].confirm ? '确认': '未确认'}` }}</div>
+                </div>
+                <div class="tip-content-box">
+                  <div v-if="tipContent[1]">{{ `${tipContent[1].level}` }}</div>
+                  <div v-if="tipContent[1]">{{ `${tipContent[1].time}` }}</div>
+                  <div v-if="tipContent[1]">{{ `${tipContent[1].confirm ? '确认': '未确认'}` }}</div>
+                </div>
+                <div class="tip-content-box">
+                  <div v-if="tipContent[2]">{{ `${tipContent[2].level}` }}</div>
+                  <div v-if="tipContent[2]">{{ `${tipContent[2].time}` }}</div>
+                  <div v-if="tipContent[2]">{{ `${tipContent[2].confirm ? '确认': '未确认'}` }}</div>
+                </div>
+              </el-row>
+              <div style="padding: 5px;height:20px;line-height: 20px;border-top: 2px solid #DDD9CA;display: flex;justify-content: space-between;">
+                <div>
+                  <div class="div-simulate-button" style="width: 40px;" @click="rpsClick">背投</div>
+                  <div class="div-simulate-button" style="width: 40px;">车场</div>
+                  <div class="div-simulate-button" style="width: 40px;" @click="troClick">轨道</div>
+                  <div class="div-simulate-button" style="width: 40px;">系统</div>
+                  <div class="div-simulate-button" style="width: 40px;">列车</div>
+                </div>
+                <div>
+                  <div class="div-simulate-button" style="width: 40px;">联锁</div>
+                  <div class="div-simulate-button" style="width: 40px;">列监</div>
+                  <div class="div-simulate-button" style="width: 40px;">运图</div>
+                  <div class="div-simulate-button" style="width: 55px;">时刻表</div>
+                  <div class="div-simulate-button" style="width: 40px;">编表</div>
+                  <div class="div-simulate-button" style="width: 40px;">调度</div>
+                  <div class="div-simulate-button" style="width: 40px;">站控</div>
+                  <div class="div-simulate-button" style="width: 40px;">计划</div>
+                </div>
+                <div>
+                  <div class="div-simulate-button" style="width: 40px;">SDM</div>
+                </div>
+                <div>
+                  <div class="div-simulate-button" style="width: 55px;">管理员</div>
+                  <div class="div-simulate-button" style="width: 40px;">职权</div>
+                </div>
+                <div>
+                  <div class="div-simulate-button" style="width: 40px;">拷屏</div>
+                  <div class="div-simulate-button" style="width: 40px;">录放</div>
+                  <div class="div-simulate-button" style="width: 40px;">布局</div>
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="2">
+            <div style="width: calc(100% - 10px);border: 2px solid #DDD9CA;border-radius: 1px;">
+              <el-row style="margin-top: 20px;margin-bottom: 18px;">
+                <el-col :span="16">
+                  <el-row class="button-row">
+                    <div style="width: 25px;" class="div-simulate-button" :style="{background:isNoRecoverLevelA || isNoConfirmLevelA?'#F00':'#DDD' }" :class="{'headerBox' :isNoConfirmLevelA}" @click="showHimAlarm('A')">A</div>
+                    <div style="width: 25px;" class="div-simulate-button" :style="{background:isNoRecoverLevelB || isNoConfirmLevelB?'#F00':'#DDD' }" :class="{'headerBox' :isNoConfirmLevelB}" @click="showHimAlarm('B')">B</div>
+                    <div style="width: 25px;" class="div-simulate-button" :style="{background:isNoRecoverLevelC?'#F00':'#DDD' }" @click="showHimAlarm('C')">C</div>
+                  </el-row>
+                  <el-row class="button-row" style="margin-top: 20px;">
+                    <div style="width: 40px;" class="div-simulate-button" @click="showHimAlarm">报警</div>
+                    <div style="width: 40px;" class="div-simulate-button" @click="undeveloped">运图</div>
+                  </el-row>
+                </el-col>
+                <el-col :span="8">
+                  <div style="width: 40px;height: 60px;line-height: 60px;" class="div-simulate-button" @click="controlAudio(false)">静音</div>
+                </el-col>
+              </el-row>
+              <el-row class="button-row" style="margin: 10px 0;">
+                <div style="width: 40px;" class="div-simulate-button" @click="undeveloped">档案</div>
+                <div style="width: 40px;" class="div-simulate-button" @click="undeveloped">归档</div>
+                <div style="width: 40px;" class="div-simulate-button" @click="undeveloped">统计</div>
+              </el-row>
+            </div>
+          </el-col>
+          <el-col :span="2" style="border: 2px solid #DDD9CA;border-radius: 1px;">
+            <el-row style="height: 88px;">
+              <div style="font-size: 15px;color: #000;display: flex;justify-content: space-around;align-items: center;margin-top: 40px;">
+                <span>{{ dateString }}</span>
+                <span>{{ time }}</span>
+              </div>
+            </el-row>
+            <el-row class="button-row" style="margin: 10px 0;">
+              <div style="width: 40px;" class="div-simulate-button" @click="undeveloped">锁屏</div>
+              <div style="width: 40px;" class="div-simulate-button" @click="undeveloped">退出</div>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+      <alarm-table-hmi ref="alarmTableHmi" />
+      <log-detail ref="logDetail" />
+      <rps-dialog ref="rpsDialog" />
+      <tro-dialog ref="troDialog" @goTroDetail="goTroDetail" />
+      <tro-detail-dialog ref="troDetailDialog" :station-list="stationList" @goTroDialog="troClick" />
+      <audio id="buzzer" controls loop="loop" style="width: 0;height: 0">
+        <source :src="buzzerAudio" type="audio/mpeg">
+      </audio>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import BuzzerAudio from '@/assets/buzzer.mp3';
+import AlarmTableHmi from '@/jmapNew/theme/nanjing_02/menus/menuDialog/alarmTableHmi';
+import RpsDialog from '@/jmapNew/theme/nanjing_02/menus/dialog/rps';
+import TroDialog from '@/jmapNew/theme/nanjing_02/menus/dialog/tro';
+import TroDetailDialog from '@/jmapNew/theme/nanjing_02/menus/dialog/troDetail';
+import LogDetail from '@/jmapNew/theme/nanjing_02/menus/menuDialog/logDetail';
+import { prefixIntrger } from '@/utils/date';
+export default {
+    name: 'BaSiDi',
+    components: {
+        AlarmTableHmi,
+        RpsDialog,
+        TroDialog,
+        TroDetailDialog,
+        LogDetail
+    },
+    data() {
+        return {
+            dialogVisible: true,
+            tipContent: [],
+            buzzerAudio: BuzzerAudio,
+            sound: false,
+            noConfirmMapA: {},
+            noConfirmMapB: {},
+            confirmNoRecoverMapA: {},
+            confirmNoRecoverMapB: {},
+            confirmNoRecoverMapC: {},
+            noConfirmMapAString: '{}',
+            noConfirmMapBString: '{}',
+            confirmNoRecoverMapAString: '{}',
+            confirmNoRecoverMapBString: '{}',
+            confirmNoRecoverMapCString: '{}',
+            time: '00:00:00',
+            dateString: '00.00.0000'
+        };
+    },
+    computed: {
+        ...mapGetters('training', [
+            'mode',
+            'started',
+            'steps',
+            'order'
+        ]),
+        ...mapGetters('map', [
+            'stationList',
+            'trainList'
+        ]),
+        userId() {
+            return this.$store.state.user ? this.$store.state.user.id : '';
+        },
+        isNoConfirmLevelA() {
+            return this.noConfirmMapAString !== '{}';
+        },
+        isNoConfirmLevelB() {
+            return this.noConfirmMapBString !== '{}';
+        },
+        isNoRecoverLevelA() {
+            return this.confirmNoRecoverMapAString !== '{}';
+        },
+        isNoRecoverLevelB() {
+            return this.confirmNoRecoverMapBString !== '{}';
+        },
+        isNoRecoverLevelC() {
+            return this.confirmNoRecoverMapCString !== '{}';
+        }
+    },
+    watch: {
+        '$store.state.training.initTime': function (initTime) {
+            const date = new Date(initTime);
+            this.initDate(date);
+        },
+        '$store.state.socket.simulationAlarmInfo': function(val) {
+            (val || []).forEach(item => {
+                if (!item.confirmed) {
+                    this.tipContent.push(item);
+                    this.handleAlarm(item);
+                    if (this.tipContent.length > 3) {
+                        this.tipContent.shift();
+                    }
+                    if (item.level === 'A') {
+                        this.noConfirmMapA[item.code] = item;
+                        this.noConfirmMapAString = JSON.stringify(this.noConfirmMapA);
+                    } else if (item.level === 'B') {
+                        this.noConfirmMapB[item.code] = item;
+                        this.noConfirmMapBString = JSON.stringify(this.noConfirmMapB);
+                    }
+                } else if (!item.recovered) {
+                    if (item.level === 'A') {
+                        delete this.noConfirmMapA[item.code];
+                        this.confirmNoRecoverMapA[item.code] = item;
+                        this.noConfirmMapAString = JSON.stringify(this.noConfirmMapA);
+                        this.confirmNoRecoverMapAString = JSON.stringify(this.confirmNoRecoverMapA);
+                    } else if (item.level === 'B') {
+                        delete this.noConfirmMapB[item.code];
+                        this.confirmNoRecoverMapB[item.code] = item;
+                        this.noConfirmMapBString = JSON.stringify(this.noConfirmMapB);
+                        this.confirmNoRecoverMapBString = JSON.stringify(this.confirmNoRecoverMapB);
+                    } else if (item.level === 'C') {
+                        this.confirmNoRecoverMapC[item.code] = item;
+                        this.confirmNoRecoverMapCString = JSON.stringify(this.confirmNoRecoverMapC);
+                    }
+                } else {
+                    if (item.level === 'A') {
+                        delete this.noConfirmMapA[item.code];
+                        delete this.confirmNoRecoverMapA[item.code];
+                        this.noConfirmMapAString = JSON.stringify(this.noConfirmMapA);
+                        this.confirmNoRecoverMapAString = JSON.stringify(this.confirmNoRecoverMapA);
+                    } else if (item.level === 'B') {
+                        delete this.noConfirmMapB[item.code];
+                        delete this.confirmNoRecoverMapB[item.code];
+                        this.noConfirmMapBString = JSON.stringify(this.noConfirmMapB);
+                        this.confirmNoRecoverMapBString = JSON.stringify(this.confirmNoRecoverMapB);
+                    } else if (item.level === 'C') {
+                        delete this.confirmNoRecoverMapC[item.code];
+                        this.confirmNoRecoverMapCString = JSON.stringify(this.confirmNoRecoverMapC);
+                    }
+                }
+            });
+        }
+    },
+    methods: {
+        undeveloped() {
+            this.doClose();
+            this.$alert(this.$t('menu.menuBar.implemented'), this.$t('global.tips'), {
+                confirmButtonText: this.$t('global.confirm'),
+                callback: action => {
+                }
+            });
+        },
+        showHimAlarm(level) {
+            this.$refs.alarmTableHmi.doShow(level);
+        },
+        controlAudio(val) {
+            const audio = document.getElementById('buzzer');
+            this.sound = val;
+            if (audio !== null) {
+                if (val) {
+                    audio.play();
+                } else if (val === false) {
+                    audio.pause();
+                }
+            }
+        },
+        rpsClick() {
+            this.$refs.rpsDialog.doShow();
+        },
+        troClick() {
+            this.$refs.troDialog.doShow();
+        },
+        goTroDetail(deviceCode) {
+            this.$refs.troDetailDialog.doShow(deviceCode);
+        },
+        initDate(date) {
+            this.time = `${prefixIntrger(date.getHours(), 2)}:${prefixIntrger(date.getMinutes(), 2)}:${prefixIntrger(date.getSeconds(), 2)}`;
+            const years = date.getFullYear() + '';
+            let months = date.getMonth() + 1 + '';
+            let dates = date.getDate() + '';
+            if (months.length < 2) { months = '0' + months; }
+            if (dates.length < 2) { dates = '0' + dates; }
+            this.dateString = dates + '.' + months + '.' + years;
+        }
+    }
+};
+</script>
+
+<style scoped rel="stylesheet/scss" lang="scss">
+	@import "src/styles/mixin.scss";
+	$width: 30px;
+	$height: 90px;
+	$menuPadding: 10px;
+	$menuItemHeight: 30px;
+	$menuItemWidth: 190px;
+	$menuItemPadding: 5px;
+
+	.nav {
+		display: block;
+		cursor: pointer;
+		color: #0000;
+		background: -webkit-linear-gradient(#FDFDFE, #DEE3F3);
+		background: -o-linear-gradient(#FDFDFE, #DEE3F3);
+		background: -moz-linear-gradient(#FDFDFE, #DEE3F3);
+		background: linear-gradient(#FDFDFE, #DEE3F3);
+		border: 1px solid #B6BCCC !important;
+		border-bottom: 2px solid #B6BCCC !important;
+		list-style: none;
+	}
+
+	.div-simulate-button{
+		height: 20px;
+		line-height: 20px;
+		display: inline-block;
+		font-size: 14px;
+		color: #303030;
+		border: 1px solid #44556D;
+		background: #DDD;
+		text-align: center;
+		border-radius: 1px;
+		width: 80px;
+	}
+	.tip-content-box{
+		height: 30px;
+		width: 100%;
+		line-height: 30px;
+		background: #001528;
+		color: #C20F29;
+		font-size: 14px;
+		display: flex;
+		justify-content: space-around;
+	}
+	.button-row{
+		height: 20px;
+		line-height: 20px;
+		display: flex;
+		justify-content:space-between;
+	}
+	@keyframes fade {
+		from {
+			opacity: 1.0;
+		}
+		50% {
+			opacity: 0.4;
+		}
+		to {
+			opacity: 1.0;
+		}
+	}
+
+	@-webkit-keyframes fade {
+		from {
+			opacity: 1.0;
+		}
+		50% {
+			opacity: 0.4;
+		}
+		to {
+			opacity: 1.0;
+		}
+	}
+
+	.headerBox {
+		background: #f00;
+		animation: fade 600ms infinite;
+		-webkit-animation: fade 600ms infinite;
+	}
+	/deep/.el-dialog__body{
+		padding: 0;
+	}
+</style>
diff --git a/src/views/newMap/displayBaSiDi/index.vue b/src/views/newMap/displayBaSiDi/index.vue
new file mode 100644
index 000000000..91dd9eee4
--- /dev/null
+++ b/src/views/newMap/displayBaSiDi/index.vue
@@ -0,0 +1,315 @@
+<template>
+  <div class="main" :style="{width: canvasWidth+'px',height:'100%',position:'absolute',overflow:'hidden'}" style="background: #000;">
+    <!--<template>-->
+    <!--<transition name="el-zoom-in-bottom">-->
+    <!--<map-system-draft ref="mapCanvas" @back="back" />-->
+    <!--</transition>-->
+    <!--</template>-->
+    <!--<menu-train-list v-if="isDemon||isContest||isScript" />-->
+    <!--<menu-system-time ref="menuSystemTime" :offset="offset" :group="group" />-->
+    <ba-si-di ref="baSiDi" />
+    <set-time ref="setTime" @ConfirmSelectBeginTime="start" />
+    <div class="display-draft haerbin_btn_box">
+      <el-button-group class="button-group-box">
+        <template v-if="!dataError">
+          <template v-if="!projectDevice">
+            <el-button type="success" :disabled="isDisable" size="small" @click="selectBeginTime">{{ $t('display.demon.drivingByPlan') }}</el-button>
+            <el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button>
+          </template>
+        </template>
+        <el-button type="primary" size="small" @click="back">{{ projectDevice?'退出':$t('display.demon.back') }}</el-button>
+      </el-button-group>
+    </div>
+  </div>
+</template>
+<script>
+import { getSessionStorage } from '@/utils/auth';
+import { mapGetters } from 'vuex';
+import { OperateMode } from '@/scripts/ConstDic';
+import { timeFormat } from '@/utils/date';
+// import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
+// import MenuTrainList from '@/views/newMap/displayNew/menuTrainList';
+// import MenuSystemTime from '@/views/newMap/displayNew/menuSystemTime';
+import SetTime from '@/views/newMap/displayNew/demon/setTime';
+import { clearSimulation, getSimulationInfoNew, ranAsPlan, exitRunPlan } from '@/api/simulation';
+import { loadMapDataById } from '@/utils/loaddata';
+import { EventBus } from '@/scripts/event-bus';
+import BaSiDi from './baSiDi';
+
+export default {
+    name: 'DisplayDraft',
+    components: {
+        // MapSystemDraft
+        BaSiDi,
+        SetTime
+    },
+    data() {
+        return {
+            offset: 15,
+            offsetBottom: 15,
+            tipBottom: 0,
+            textStatusHeight: 0,
+            planRunning:false,
+            dataError: false,
+            group:''
+        };
+    },
+    computed:{
+        ...mapGetters([
+            'canvasWidth'
+        ]),
+        mode() {
+            return this.$route.params.mode;
+        },
+        project() {
+            return getSessionStorage('project');
+        },
+        isDemon() {
+            return this.mode === 'demon' && this.project != 'drts';
+        },
+        isContest() {
+            return this.mode === 'demon' && this.project == 'drts';
+        },
+        mapId() {
+            return this.$route.query.mapId;
+        },
+        width() {
+            return this.$store.state.app.width;
+        },
+        height() {
+            return this.$store.state.app.height;
+        },
+        projectDevice() {
+            return this.$route.query.projectDevice;
+        },
+        isDisable() {
+            return this.$store.state.training.started;
+        }
+    },
+    watch:{
+        '$store.state.socket.permissionOver': function () {
+            this.$alert('用户权限已被收回', '提示', {
+                confirmButtonText: '确定',
+                callback: action => {
+                    this.back();
+                }
+            });
+        },
+        '$store.state.config.menuBarLoadedCount': function (val) { // menuBar加载完成
+            this.setPosition();
+        },
+        '$store.state.app.windowSizeCount': function() { // 窗口缩放
+            this.setWindowSize();
+        },
+        '$store.state.training.prdType': function (val) { // 根据权限类型计算高度
+            this.setPosition();
+        },
+        '$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
+            if (this.planRunning) {
+                this.$store.dispatch('training/simulationStart');
+            }
+        },
+        $route() {
+            if (!this.isLesson && !this.isExam) {
+                this.initLoadData();
+            }
+        }
+    },
+    beforeDestroy() {
+        clearSimulation(this.group);
+        this.$store.dispatch('training/reset');
+    },
+    async mounted() {
+        this.setWindowSize();
+        this.initLoadData();
+        this.$store.dispatch('app/animationsClose');
+    },
+    methods:{
+        // 结束加载状态
+        endViewLoading(isSuccess) {
+            if (!isSuccess) {
+                this.$store.dispatch('map/mapClear');
+            }
+            this.$nextTick(() => {
+                EventBus.$emit('viewLoading', false);
+            });
+        },
+        // 仿真错误时，被动退出时调用
+        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.isScript) {
+            //     await this.$refs.menuScript.back();
+            // } else if (this.isContest) {
+            //     await this.$refs.menuDispatherContest.back();
+            // }
+        },
+        // 设置各个按钮的定位
+        setPosition() {
+            this.$nextTick(() => {
+                this.offset = 10;
+                this.offsetBottom = 15;
+                const menuBar = document.getElementById('menuBar');
+                const menuTool = document.getElementById('menuTool');
+                const menuBottom = document.getElementById('menuButton');
+                const menuButtonsBox = document.getElementById('menuButtons_box');
+                const textStatus = document.getElementById('textStatus');
+                if (menuBar) {
+                    this.offset = (menuBar.offsetHeight || 0) + 15;
+                }
+                if (menuTool) {
+                    this.offset = (menuTool.offsetHeight || 0) + 15;
+                }
+                const buttonWidth = this.width - 1200; // B box widht
+                if (menuBottom && buttonWidth < 780) {
+                    this.offsetBottom = (menuBottom.offsetHeight || 0) + 15;
+                }
+                if (menuButtonsBox) {
+                    this.tipBottom = (menuButtonsBox.offsetHeight || 0) + 15;
+                }
+                if (textStatus) {
+                    this.textStatusHeight = textStatus.offsetHeight || 0;
+                    textStatus.style.top = this.offset - 15 + 'px';
+                }
+            });
+        },
+        // 缩放设置
+        setWindowSize() {
+            const width = this.width;
+            const height = this.height;
+            this.$store.dispatch('config/resize', { width, height });
+            // this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
+        },
+        //  初始化
+        initLoadData() {
+            this.group = this.$route.query.group;
+            this.$store.dispatch('training/reset');
+            this.loadSimulationInfo();
+            this.loadMapData();
+        },
+        // 新版地图根据仿真group获取仿真基础信息
+        async loadSimulationInfo() {
+            const resp = await getSimulationInfoNew(this.group);
+            if (resp && resp.code == 200 && resp.data) {
+                if (!resp.data.dataError) {
+                    this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause); // 是否暂停判断
+                    this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${timeFormat(resp.data.systemTime)}`));
+                    this.$store.dispatch('training/countTime');
+                    this.$store.dispatch('runPlan/setRunPlanInfo', resp.data.runPlan);
+                    this.planRunning = resp.data.planRunning;
+                    if (resp.data.planRunning) {
+                        this.$store.commit('training/start');
+                    }
+                } else {
+                    this.$messageBox('此地图数据正在维护中,无法运行！');
+                }
+                this.dataError = resp.data.dataError;
+            }
+        },
+        // 通过showMode切换显示效果
+        switchModeInner(swch) {
+            let showMode = '03';
+            if (swch == '01') {
+                showMode = '03';
+            } else if (swch == '02') {
+                showMode = '02';
+            }
+
+            const nameList = Object.keys(this.$store.state.map.map || {});
+            let list = [];
+            nameList.forEach(item => {
+                if (item !== 'skinVO') {
+                    const data = this.$store.state.map.map[item];
+                    if (data && data.constructor === Array) {
+                        list = [...list, ...data];
+                    }
+                }
+            });
+
+            if (swch == '01') {
+                this.$jlmap.updateShowStation(list, this.$store.state.training.centerStationCode); // 显示全部元素
+            } else {
+                this.$jlmap.updateShowStation(list, ''); // 显示全部元素
+            }
+
+            this.$jlmap.updateShowMode(list, showMode); // 二次过滤
+        },
+        // 加载地图数据
+        loadMapData() {
+            if (parseInt(this.mapId)) {
+                this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
+                loadMapDataById(this.mapId, 'simulation');
+            } else {
+                this.endViewLoading();
+            }
+        },
+        start(model) { // 开始仿真
+            const data = {
+                time: model.initTime
+            };
+            if (this.$route.query.prdType === '04') {
+                data.loadNumber = model.loadNum;
+            }
+            ranAsPlan(data, this.group).then(res => {
+                this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${model.initTime}`));
+            }).catch(error => {
+                let message = '';
+                switch (error.code) {
+                case '5001':
+                    message = this.$t('error.mapDataError');
+                    break;
+                case '5002':
+                    message = this.$t('error.runningChartDataError');
+                    break;
+                case '5003':
+                    message = this.$t('error.runningChartIsNotLoaded');
+                    break;
+                case '5004':
+                    message = this.$t('error.runningDataError');
+                    break;
+                case '5000':
+                    message = this.$t('error.systemError');
+                    break;
+                case '4000':
+                    message = this.$t('error.simulationDoesNotExist');
+                    break;
+                case '4001':
+                    message = this.$t('error.simulationOperationIsNotDefined');
+                    break;
+                case '4002':
+                    message = this.$t('error.simulationOperationProcessingMethodNotFound');
+                    break;
+                case '4003':
+                    message = this.$t('error.simulationOperationFailed');
+                    break;
+                case '4004':
+                    message = this.$t('error.operationConflict');
+                    break;
+                default:
+                    message = '按计划行车异常,请退出重试!';
+                    // this.$messageBox('按计划行车异常,请退出重试!');
+                    break;
+                }
+                this.$messageBox(message + '，' + this.$t('error.startSimulationFailed'));
+            });
+        },
+        end() {
+            exitRunPlan(this.group).then(() => {
+                this.$store.dispatch('training/over').then(() => {
+                    this.$store.dispatch('training/setMapDefaultState').then(() => {
+                        this.$store.dispatch('map/clearJlmapTrainView');
+                        this.$store.dispatch('map/resetActiveTrainList', false);
+                        this.$store.dispatch('map/setTrainWindowShow', false);
+                    });
+                });
+            }).catch(() => {
+                this.$messageBox(this.$t('display.demon.endSimulationFail'));
+            });
+        }
+    }
+};
+</script>