From 7d5fb87dc54b012d9de7dddc790d55469b2ff51c Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Thu, 25 Feb 2021 13:14:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=81=E6=B3=A2=E4=B8=80=E5=8F=B7=E7=BA=BF?=
 =?UTF-8?q?=20=E8=8F=9C=E5=8D=95=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../theme/components/menus/menuBar.vue        | 419 +++++++++++++++
 src/jmapNew/theme/ningbo_01/menus/menuBar.vue | 496 ++----------------
 2 files changed, 468 insertions(+), 447 deletions(-)
 create mode 100644 src/jmapNew/theme/components/menus/menuBar.vue

diff --git a/src/jmapNew/theme/components/menus/menuBar.vue b/src/jmapNew/theme/components/menus/menuBar.vue
new file mode 100644
index 000000000..318039172
--- /dev/null
+++ b/src/jmapNew/theme/components/menus/menuBar.vue
@@ -0,0 +1,419 @@
+<template>
+  <div id="menuBar">
+    <div class="nav">
+      <template v-for="(item,i) in menu">
+        <template v-if="noShowingChildren(item.children)">
+          <li :id="getDomId(item)" :key="i" class="nav-li" @click="hookClick(item)">
+            <span class="nav-li-text">{{ item.title }}</span>
+          </li>
+        </template>
+        <template v-else>
+          <li
+            v-if="handleShow(item)"
+            :id="getDomId(item)"
+            :key="i"
+            class="nav-li"
+            @click.stop="selectedClassA(item, i)"
+          >
+            <span class="nav-li-text">{{ item.title }}</span>
+            <ul class="nav-ul" :class="{'active' :i==classA}">
+              <template v-for="(child,j) in item.children">
+                <template v-if="child.children && child.children.length > 0">
+                  <li v-if="child.type === 'separator'" :key="j" class="menu-separator" />
+                  <li
+                    v-else
+                    :id="getDomId(child)"
+                    :key="j"
+                    class="menu-li-block"
+                    @click.stop="selectedClassB(child, j)"
+                  >
+                    <span class="status">&ensp;</span>
+                    <span class="label">{{ child.title }}</span>
+                    <div class="menu-ul-block-out">
+                      <div class="menu-ul-block">
+                        <ul class="menu-ul" :class="{'active' :j==classB}" style="position:fixed">
+                          <template v-for="(grandchild,k) in child.children">
+                            <li v-if="grandchild.type === 'separator'" :key="k" class="menu-separator" />
+                            <li
+                              v-else-if="grandchild.show"
+                              :id="getDomId(grandchild)"
+                              :key="k"
+                              class="menu-li-block"
+                              @click.stop="hookClick(grandchild)"
+                            >
+                              <span class="status">&ensp;</span>
+                              <span class="label">{{ grandchild.title }}</span>
+                            </li>
+                          </template>
+                        </ul>
+                      </div>
+                    </div>
+                  </li>
+                </template>
+                <template v-else>
+                  <li v-if="child.type === 'separator'" :key="j" class="menu-separator" />
+                  <li
+                    v-else-if="child.show"
+                    :id="getDomId(child)"
+                    :key="j"
+                    class="menu-li-block"
+                    @click.stop="hookClick(child)"
+                  >
+                    <span class="status">&ensp;</span>
+                    <span class="label">{{ child.computedTitle?child.computedTitle(child): child.title }}</span>
+                  </li>
+                </template>
+              </template>
+            </ul>
+          </li>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { TrainingMode } from '@/scripts/ConstDic';
+import { EventBus } from '@/scripts/event-bus';
+import { State2SimulationMap } from '@/scripts/cmdPlugin/Config';
+import MenuContextHandler from '@/scripts/cmdPlugin/MenuContextHandler';
+
+export default {
+    name: 'MenuBar',
+    props: {
+        menuNormal:{
+            type: Object,
+            default() {
+                return null;
+            }
+        }
+    },
+    data() {
+        return {
+            classA: -1,
+            classB: -1,
+            tempClassA: -1,
+            tempClassB: -1,
+            valid: true,
+            menu: []
+        };
+    },
+    computed: {
+        ...mapGetters('training', [
+            'mode',
+            'started',
+            'steps',
+            'order',
+            'mode'
+        ])
+    },
+    watch: {
+        tempClassA() {
+            this.classA = this.$store.state.menuOperation.break ? -1 : this.tempClassA;
+        },
+        tempClassB() {
+            this.classB = this.$store.state.menuOperation.break ? -1 : this.tempClassB;
+        },
+        '$store.state.menuOperation.break': function (val) {
+            if (val) {
+                this.classA = this.classB = -1;
+            } else {
+                this.classA = this.tempClassA;
+                this.classB = this.tempClassB;
+            }
+        },
+        '$store.state.training.operatemode': function (mode) {
+            this.initMenu();
+        },
+        '$store.state.training.started': function (val) {
+            this.closeMenu(true);
+        },
+        '$store.state.training.prdType': function () {
+            this.initMenu();
+        }
+    },
+    mounted() {
+        this.initMenu();
+    },
+    methods: {
+        handleShow(item) {
+            if (item.hide) {
+                return false;
+            }
+            return true;
+        },
+        initMenu(menu) {
+            const type = State2SimulationMap[this.$store.state.training.prdType];
+            this.menu = MenuContextHandler.menuBarConvert(this.menuNormal[type], this.$store.state.training.operatemode);
+            this.clickEvent();
+            this.closeMenu(true);
+        },
+        clickEvent() {
+            const self = this;
+            window.onclick = function (e) {
+                if (document.getElementById('menuBar')) {
+                    self.closeMenu(false);
+                }
+            };
+        },
+        getDomId(item) {
+            if (item && item.operate) {
+                return item.operate.domId;
+            }
+            return '';
+        },
+        noShowingChildren(children) {
+            if (!children || children.length <= 0) {
+                return true;
+            }
+            return false;
+        },
+        hasShowingChildren(children) {
+            if (children && children.length > 0) {
+                return true;
+            }
+            return false;
+        },
+        closeMenu(flag) {
+            if (flag || (this.mode !== TrainingMode.EDIT && this.mode !== TrainingMode.TEACH)) {
+                this.classA = this.tempClassA = -1;
+                this.classB = this.tempClassB = -1;
+            }
+        },
+        hookClick(item, event) {
+            this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
+            if (item && typeof item.click == 'function') {
+                item.click(item.operate);
+            }
+        },
+        selectedClassA(item, index) {
+            const order = this.order || 0;
+            if (this.mode !== TrainingMode.TEACH) { // 编辑模式下可显示
+                this.popupMenuA(item, index);
+            } else if (this.steps[order] && this.steps[order].type == 'bar') { // 操作步骤没有顶部操作顶部菜单都不可显示
+                this.popupMenuA(item, index);
+            }
+        },
+        // 弹出顶部菜单操作
+        popupMenuA(item, index) {
+            this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
+            this.clickEvent();
+            const operate = {
+                type: 'bar',
+                operation: item.operate.operation
+            };
+            this.tempClassA = index;
+            this.tempClassB = -1;
+            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
+                if (valid) {
+                    this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
+                }
+            });
+        },
+        selectedClassB(item, index) {
+            const order = this.order || 0;
+            if (this.mode !== TrainingMode.TEACH) { // 编辑模式下可显示
+                this.popupMenuB(item, index);
+            } else if (this.steps[order] && this.steps[order].type == 'bar') { // 操作步骤没有顶部操作顶部菜单都不可显示
+                this.popupMenuB(item, index);
+            }
+        },
+        popupMenuB(item, index) {
+            this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
+            const operate = {
+                type: 'bar',
+                operation: item.operate.operation
+            };
+            this.tempClassB = index;
+            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
+                if (valid) {
+                    this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
+                }
+            });
+        },
+        // // 刷新
+        // refresh() {
+        //     this.closeMenu(true);
+        //     EventBus.$emit('refresh');
+        // },
+        // getLoginResult(operate) {
+        //     /** 密码校验*/
+        //     if (operate.operation == OperationEvent.StationControl.forcedStationControl.passwordConfirm.operation) {
+        //         if (operate.success) {
+        //             /** 校验成功*/
+        //             this.$refs.stationControlConvert.doShow({ operation: OperationEvent.StationControl.forcedStationControl.mbar.operation });
+        //         }
+        //     }
+        // },
+
+        doClose() {
+            this.$nextTick(() => {
+                EventBus.$emit('closeMenu');
+            });
+        }
+    }
+};
+</script>
+
+<style scoped rel="stylesheet/scss" lang="scss">
+    @import "src/styles/mixin.scss";
+    $width: 30px;
+    $height: 30px;
+    $menuPadding: 10px;
+    $menuItemHeight: 30px;
+    $menuItemPadding: 5px;
+
+    #menuBar {
+        z-index: 36;
+        position: absolute;
+        width: inherit;
+        height: $height;
+        line-height: $height;
+    }
+
+    .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;
+    }
+
+    .nav-li {
+        position: relative;
+        display: inline-block;
+        padding-left: $menuPadding;
+        padding-right: $menuPadding;
+    }
+
+    .nav-li:active {
+        background: #C9D0E1;
+        border-radius: 4px;
+    }
+
+    .nav-li-text {
+        font-size: 13px;
+        color: #000;
+        text-align: center;
+        text-decoration: none;
+    }
+
+    .nav-ul {
+        display: none;
+        position: absolute;
+        list-style: none;
+        border: 1px solid gray !important;
+        line-height: $menuItemHeight;
+        background: #F0F0F0;
+        padding: 0px;
+        margin: 0px;
+        max-height: 550px;
+        overflow-y: auto;
+
+        &::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            border-radius: 10px;
+            background: #c3c3c3;
+        }
+
+        &::-webkit-scrollbar-track {
+            border-radius: 0;
+            background: #f0f0f0;
+
+        }
+    }
+
+    .menu-ul {
+        display: none;
+        list-style: none;
+        background: #F0F0F0;
+        line-height: $menuItemHeight;
+    }
+
+    .menu-ul-block-out{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+        overflow: hidden;
+    }
+
+    .menu-ul-block{
+        position: relative;
+        margin-left: 100%;
+        overflow-x: hidden;
+        display: inline-block;
+        overflow-y: auto;
+        width: 100%;
+        height: 30px;
+    }
+
+    .nav-ul.active {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+    }
+    .menu-ul.active{
+        display: flex;
+        flex-direction: column;
+        padding:0;
+        max-height: 200px;
+        overflow: auto;
+        position: fixed;
+        border-left: 1px #CACACA solid;
+    }
+    .menu-ul-text {
+        font-size: 14px;
+        color: #000;
+        letter-spacing: 0;
+        height: $menuItemHeight;
+        line-height: $menuItemHeight;
+    }
+
+    .menu-li-block {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        letter-spacing: 0;
+        height: $menuItemHeight;
+        position: relative;
+    }
+
+    .menu-li-block .status {
+        border-right: 1px inset #CACACA;
+        width: $width;
+        display: block;
+    }
+
+    .menu-li-block .label {
+        font-size: 14px;
+        display: block;
+        color: #000;
+        padding:0px 10px 0px 5px;
+        line-height: $menuItemHeight;
+        white-space: nowrap;
+    }
+
+    .menu-separator {
+        text-align: left;
+        height: 1px;
+        background: #CACACA;
+        margin-left:30px;
+        line-height: 2px;
+    }
+
+    .menu-li-block:hover {
+        background: #C9DEF7;
+        box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+    }
+</style>
diff --git a/src/jmapNew/theme/ningbo_01/menus/menuBar.vue b/src/jmapNew/theme/ningbo_01/menus/menuBar.vue
index 32b5ca467..e15ce4b0d 100644
--- a/src/jmapNew/theme/ningbo_01/menus/menuBar.vue
+++ b/src/jmapNew/theme/ningbo_01/menus/menuBar.vue
@@ -1,78 +1,10 @@
 <template>
-  <div id="menuBar">
-    <div class="nav">
-      <template v-for="(item,i) in menu">
-        <template v-if="noShowingChildren(item.children)">
-          <li :id="getDomId(item)" :key="i" class="nav-li" @click="hookClick(item)">
-            <span class="nav-li-text">{{ item.title }}</span>
-          </li>
-        </template>
-        <template v-else>
-          <li
-            v-if="handleShow(item)"
-            :id="getDomId(item)"
-            :key="i"
-            class="nav-li"
-            @click.stop="selectedClassA(item, i)"
-          >
-            <span class="nav-li-text">{{ item.title }}</span>
-            <ul class="nav-ul" :class="{'active' :i==classA}">
-              <template v-for="(child,j) in item.children">
-                <template v-if="child.children && child.children.length > 0">
-                  <li v-if="child.type === 'separator'" :key="j" class="menu-separator" />
-                  <li
-                    v-else
-                    :id="getDomId(child)"
-                    :key="j"
-                    class="menu-li-block"
-                    @click.stop="selectedClassB(child, j)"
-                  >
-                    <span class="status">&ensp;</span>
-                    <span class="label">{{ child.title }}</span>
-                    <div class="menu-ul-block-out">
-                      <div class="menu-ul-block">
-                        <ul class="menu-ul" :class="{'active' :j==classB}" style="position:fixed">
-                          <template v-for="(grandchild,k) in child.children">
-                            <li v-if="grandchild.type === 'separator'" :key="k" class="menu-separator" />
-                            <li
-                              v-else-if="grandchild.show"
-                              :id="getDomId(grandchild)"
-                              :key="k"
-                              class="menu-li-block"
-                              @click.stop="hookClick(grandchild)"
-                            >
-                              <span class="status">&ensp;</span>
-                              <span class="label">{{ grandchild.title }}</span>
-                            </li>
-                          </template>
-                        </ul>
-                      </div>
-                    </div>
-                  </li>
-                </template>
-                <template v-else>
-                  <li v-if="child.type === 'separator'" :key="j" class="menu-separator" />
-                  <li
-                    v-else-if="child.show"
-                    :id="getDomId(child)"
-                    :key="j"
-                    class="menu-li-block"
-                    @click.stop="hookClick(child)"
-                  >
-                    <span class="status">&ensp;</span>
-                    <span class="label">{{ child.computedTitle?computedTitle(child): child.title }}</span>
-                  </li>
-                </template>
-              </template>
-            </ul>
-          </li>
-        </template>
-      </template>
-    </div>
+  <div>
+    <menu-bar ref="menuBar" :menu-normal="menuNormal" style="width:100%" />
     <station-control ref="stationControl" />
     <detain-train-contorl ref="detainTrainContorl" />
     <detain-train-contorl-up-down ref="detainTrainContorlUpDown" />
-    <notice-info ref="noticeInfo" pop-class="ningbo-01__systerm" />
+    <!-- <notice-info ref="noticeInfo" pop-class="ningbo-01__systerm" /> -->
     <train-add ref="trainAdd" />
     <train-transtalet ref="trainTranstalet" />
     <train-delete ref="trainDelete" />
@@ -83,9 +15,7 @@
   </div>
 </template>
 <script>
-import { mapGetters } from 'vuex';
-import { TrainingMode } from '@/scripts/ConstDic';
-import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
+import MenuBar from '@/jmapNew/theme/components/menus/menuBar';
 import StationControl from './menuDialog/stationControl';
 import DetainTrainContorl from './menuDialog/detainTrainContorl';
 import DetainTrainContorlUpDown from './menuDialog/detainTrainContorlUpDown';
@@ -95,16 +25,13 @@ import TrainDelete from './menuDialog/trainDelete';
 import ManageUser from './menuDialog/manageUser';
 import HelpAbout from './menuDialog/helpAbout';
 import AreaSelection from './menuDialog/areaSelection';
-import NoticeInfo from '@/jmapNew/theme/components/menus/childDialog/noticeInfo';
-import { EventBus } from '@/scripts/event-bus';
-import { State2SimulationMap } from '@/scripts/cmdPlugin/Config';
-import MenuContextHandler from '@/scripts/cmdPlugin/MenuContextHandler';
 import OperateConfirm from './dialog/childDialog/operateConfirm';
-
+import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
+import { mapGetters } from 'vuex';
 export default {
-    name: 'MenuBar',
+    name:'MenuBarNingBo',
     components: {
-        NoticeInfo,
+        MenuBar,
         StationControl,
         DetainTrainContorl,
         DetainTrainContorlUpDown,
@@ -116,22 +43,8 @@ export default {
         AreaSelection,
         OperateConfirm
     },
-    props: {
-        selected: {
-            type: Object,
-            default() {
-                return null;
-            }
-        }
-    },
     data() {
         return {
-            classA: -1,
-            classB: -1,
-            tempClassA: -1,
-            tempClassB: -1,
-            valid: true,
-            menu: [],
             menuNormal: {
                 Local: [
                     {
@@ -294,19 +207,19 @@ export default {
                                 title: '设置全站自动通过进路',
                                 operate: OperationEvent.Station.stationSetCIAuto.mbar,
                                 click: this.setAllCiAuto,
-                                computedTitle: true
+                                computedTitle: this.computedTitle
                             },
                             {
                                 title: '取消全站自动通过进路',
                                 operate: OperationEvent.Station.stationCancelCIAuto.mbar,
                                 click: this.cancelAllCiAuto,
-                                computedTitle: true
+                                computedTitle:  this.computedTitle
                             },
                             {
                                 title: '全站自动交自动控',
                                 operate: OperationEvent.Station.atsAutoControlALL.mbar,
                                 click: this.setAllAutoControl,
-                                computedTitle: true
+                                computedTitle:  this.computedTitle
                             }
                         ]
                     },
@@ -577,6 +490,7 @@ export default {
                     },
                     {
                         title: '帮助',
+                        operate: '',
                         children: [
                             {
                                 title: '关于ITS GPC 工作站',
@@ -589,60 +503,22 @@ export default {
             }
         };
     },
-    computed: {
-        ...mapGetters('training', [
-            'mode',
-            'started',
-            'steps',
-            'order',
-            'mode'
-        ]),
+    computed:{
         ...mapGetters('map', [
             'stationList'
         ])
     },
-    watch: {
-        tempClassA() {
-            this.classA = this.$store.state.menuOperation.break ? -1 : this.tempClassA;
-        },
-        tempClassB() {
-            this.classB = this.$store.state.menuOperation.break ? -1 : this.tempClassB;
-        },
-        '$store.state.menuOperation.break': function (val) {
-            if (val) {
-                this.classA = this.classB = -1;
-            } else {
-                this.classA = this.tempClassA;
-                this.classB = this.tempClassB;
-            }
-        },
-        '$store.state.training.operatemode': function (mode) {
-            this.initMenu();
-        },
-        '$store.state.training.started': function (val) {
-            this.closeMenu(true);
-        },
-        '$store.state.training.prdType': function () {
-            this.initMenu();
-        }
+    created() {
+        this.menuNormal['Center'][2].children = this.initStationList();
     },
-    mounted() {
-        this.initMenu();
-    },
-    methods: {
-        handleShow(item) {
-            if (item.hide) {
-                return false;
-            }
-            return true;
-        },
-        computedTitle(child) {
+    methods:{
+        computedTitle(order) {
             const station = this.$store.getters['map/getDeviceByCode'](this.$store.state.map.showCentralizedStationCode);
-            if (child.operate === OperationEvent.Station.stationSetCIAuto.mbar && station) {
+            if (order.operate === OperationEvent.Station.stationSetCIAuto.mbar && station) {
                 return `设置${station.name}全站自动通过进路`;
-            } else if (child.operate === OperationEvent.Station.stationCancelCIAuto.mbar && station) {
+            } else if (order.operate === OperationEvent.Station.stationCancelCIAuto.mbar && station) {
                 return `取消${station.name}全站自动通过进路`;
-            } else if (child.operate === OperationEvent.Station.atsAutoControlALL.mbar && station) {
+            } else if (order.operate === OperationEvent.Station.atsAutoControlALL.mbar && station) {
                 return `${station.name}全站进路交自动控`;
             } else {
                 return '';
@@ -665,98 +541,6 @@ export default {
             });
             return list;
         },
-        initMenu(menu) {
-            const type = State2SimulationMap[this.$store.state.training.prdType];
-            this.menu = MenuContextHandler.menuBarConvert(this.menuNormal[type], this.$store.state.training.operatemode);
-            if (this.menu[2] && this.$store.state.training.prdType == '02') {
-                this.menu[2].children = this.initStationList();
-            }
-            this.clickEvent();
-            this.closeMenu(true);
-        },
-        clickEvent() {
-            const self = this;
-            window.onclick = function (e) {
-                if (document.getElementById('menuBar')) {
-                    self.closeMenu(false);
-                }
-            };
-        },
-        getDomId(item) {
-            if (item && item.operate) {
-                return item.operate.domId;
-            }
-            return '';
-        },
-        noShowingChildren(children) {
-            if (!children || children.length <= 0) {
-                return true;
-            }
-            return false;
-        },
-        hasShowingChildren(children) {
-            if (children && children.length > 0) {
-                return true;
-            }
-            return false;
-        },
-        closeMenu(flag) {
-            if (flag || (this.mode !== TrainingMode.EDIT && this.mode !== TrainingMode.TEACH)) {
-                this.classA = this.tempClassA = -1;
-                this.classB = this.tempClassB = -1;
-            }
-        },
-        hookClick(item, event) {
-            this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
-            if (item && typeof item.click == 'function') {
-                item.click(item.operate);
-            }
-        },
-        selectedClassA(item, index) {
-            const order = this.order || 0;
-            if (this.mode !== TrainingMode.TEACH) { // 编辑模式下可显示
-                this.popupMenuA(item, index);
-            } else if (this.steps[order] && this.steps[order].type == 'bar') { // 操作步骤没有顶部操作顶部菜单都不可显示
-                this.popupMenuA(item, index);
-            }
-        },
-        // 弹出顶部菜单操作
-        popupMenuA(item, index) {
-            this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
-            this.clickEvent();
-            const operate = {
-                type: 'bar',
-                operation: item.operate.operation
-            };
-            this.tempClassA = index;
-            this.tempClassB = -1;
-            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
-                if (valid) {
-                    this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
-                }
-            });
-        },
-        selectedClassB(item, index) {
-            const order = this.order || 0;
-            if (this.mode !== TrainingMode.TEACH) { // 编辑模式下可显示
-                this.popupMenuB(item, index);
-            } else if (this.steps[order] && this.steps[order].type == 'bar') { // 操作步骤没有顶部操作顶部菜单都不可显示
-                this.popupMenuB(item, index);
-            }
-        },
-        popupMenuB(item, index) {
-            this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
-            const operate = {
-                type: 'bar',
-                operation: item.operate.operation
-            };
-            this.tempClassB = index;
-            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
-                if (valid) {
-                    this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
-                }
-            });
-        },
         // 设置地图定位
         mapLocation(code) {
             if (code) {
@@ -773,12 +557,27 @@ export default {
 
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
-                    this.closeMenu(true);
+                    this.$refs.menuBar.closeMenu(true);
                     this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                     this.$refs.stationControl.doShow(operate);
                 }
             });
         },
+        selectedArea(order) {
+            const operate = {
+                type: 'bar',
+                operation: order.operation
+            };
+
+            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
+                if (valid) {
+                    this.$refs.menuBar.closeMenu(true);
+                    this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
+                    this.$refs.areaSelection.doShow(operate);
+
+                }
+            });
+        },
         // 设置全线扣车
         setDetainTrainAll(order) {
             const operate = {
@@ -787,7 +586,7 @@ export default {
             };
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
-                    this.closeMenu(true);
+                    this.$refs.menuBar.closeMenu(true);
                     this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                     this.$refs.detainTrainContorl.doShow(operate);
                 }
@@ -802,7 +601,7 @@ export default {
 
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
-                    this.closeMenu(true);
+                    this.$refs.menuBar.closeMenu(true);
                     this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                     this.$refs.detainTrainContorl.doShow(operate);
                 }
@@ -817,7 +616,7 @@ export default {
 
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
-                    this.closeMenu(true);
+                    this.$refs.menuBar.closeMenu(true);
                     this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                     this.$refs.detainTrainContorlUpDown.doShow(operate);
                 }
@@ -832,7 +631,7 @@ export default {
 
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
-                    this.closeMenu(true);
+                    this.$refs.menuBar.closeMenu(true);
                     this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                     this.$refs.detainTrainContorlUpDown.doShow(operate);
                 }
@@ -846,7 +645,7 @@ export default {
             };
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
-                    this.closeMenu(true);
+                    this.$refs.menuBar.closeMenu(true);
                     this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                     this.$refs.trainAdd.doShow(operate);
                 }
@@ -860,7 +659,7 @@ export default {
             };
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
-                    this.closeMenu(true);
+                    this.$refs.menuBar.closeMenu(true);
                     this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                     this.$refs.trainTranstalet.doShow(operate);
                 }
@@ -874,7 +673,7 @@ export default {
             };
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
-                    this.closeMenu(true);
+                    this.$refs.menuBar.closeMenu(true);
                     this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                     this.$refs.trainDelete.doShow(operate);
                 }
@@ -888,7 +687,7 @@ export default {
             };
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
-                    this.closeMenu(true);
+                    this.$refs.menuBar.closeMenu(true);
                     this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                     this.$refs.manageUser.doShow(operate);
                 }
@@ -902,26 +701,12 @@ export default {
             };
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
-                    this.closeMenu(true);
+                    this.$refs.menuBar.closeMenu(true);
                     this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                     this.$refs.helpAbout.doShow(operate);
                 }
             });
         },
-        // 刷新
-        refresh() {
-            this.closeMenu(true);
-            EventBus.$emit('refresh');
-        },
-        getLoginResult(operate) {
-            /** 密码校验*/
-            if (operate.operation == OperationEvent.StationControl.forcedStationControl.passwordConfirm.operation) {
-                if (operate.success) {
-                    /** 校验成功*/
-                    this.$refs.stationControlConvert.doShow({ operation: OperationEvent.StationControl.forcedStationControl.mbar.operation });
-                }
-            }
-        },
         setAllCiAuto(order) {
             const operate = {
                 type: 'bar',
@@ -929,7 +714,7 @@ export default {
             };
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
-                    this.closeMenu(true);
+                    this.$refs.menuBar.closeMenu(true);
                     this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                     const station = this.$store.getters['map/getDeviceByCode'](this.$store.state.map.showCentralizedStationCode);
                     const nextOperate = {
@@ -948,7 +733,7 @@ export default {
 
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
-                    this.closeMenu(true);
+                    this.$refs.menuBar.closeMenu(true);
                     this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                     const station = this.$store.getters['map/getDeviceByCode'](this.$store.state.map.showCentralizedStationCode);
                     const nextOperate = {
@@ -967,7 +752,7 @@ export default {
 
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
-                    this.closeMenu(true);
+                    this.$refs.menuBar.closeMenu(true);
                     this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                     const station = this.$store.getters['map/getDeviceByCode'](this.$store.state.map.showCentralizedStationCode);
                     const nextOperate = {
@@ -978,197 +763,14 @@ export default {
                 }
             });
         },
-        selectedArea(order) {
-            const operate = {
-                type: 'bar',
-                operation: order.operation
-            };
-
-            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
-                if (valid) {
-                    this.closeMenu(true);
-                    this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
-                    this.$refs.areaSelection.doShow(operate);
-
-                }
-            });
-        },
         undeveloped() {
-            this.doClose();
+            this.$refs.menuBar.doClose();
             this.$alert('实现中......', '提示', {
                 confirmButtonText: '确定',
                 callback: action => {
                 }
             });
-        },
-        doClose() {
-            this.$nextTick(() => {
-                EventBus.$emit('closeMenu');
-            });
         }
     }
 };
 </script>
-
-<style scoped rel="stylesheet/scss" lang="scss">
-    @import "src/styles/mixin.scss";
-    $width: 30px;
-    $height: 30px;
-    $menuPadding: 10px;
-    $menuItemHeight: 30px;
-    $menuItemPadding: 5px;
-
-    #menuBar {
-        z-index: 36;
-        position: absolute;
-        width: inherit;
-        height: $height;
-        line-height: $height;
-    }
-
-    .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;
-    }
-
-    .nav-li {
-        position: relative;
-        display: inline-block;
-        padding-left: $menuPadding;
-        padding-right: $menuPadding;
-    }
-
-    .nav-li:active {
-        background: #C9D0E1;
-        border-radius: 4px;
-    }
-
-    .nav-li-text {
-        font-size: 13px;
-        color: #000;
-        text-align: center;
-        text-decoration: none;
-    }
-
-    .nav-ul {
-        display: none;
-        position: absolute;
-        list-style: none;
-        border: 1px solid gray !important;
-        line-height: $menuItemHeight;
-        background: #F0F0F0;
-        padding: 0px;
-        margin: 0px;
-        max-height: 550px;
-        overflow-y: auto;
-
-        &::-webkit-scrollbar {
-            width: 4px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            border-radius: 10px;
-            background: #c3c3c3;
-        }
-
-        &::-webkit-scrollbar-track {
-            border-radius: 0;
-            background: #f0f0f0;
-
-        }
-    }
-
-    .menu-ul {
-        display: none;
-        list-style: none;
-        background: #F0F0F0;
-        line-height: $menuItemHeight;
-    }
-
-    .menu-ul-block-out{
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        display: inline-block;
-        overflow: hidden;
-    }
-
-    .menu-ul-block{
-        position: relative;
-        margin-left: 100%;
-        overflow-x: hidden;
-        display: inline-block;
-        overflow-y: auto;
-        width: 100%;
-        height: 30px;
-    }
-
-    .nav-ul.active {
-        position: absolute;
-        display: flex;
-        flex-direction: column;
-    }
-    .menu-ul.active{
-        display: flex;
-        flex-direction: column;
-        padding:0;
-        max-height: 200px;
-        overflow: auto;
-        position: fixed;
-        border-left: 1px #CACACA solid;
-    }
-    .menu-ul-text {
-        font-size: 14px;
-        color: #000;
-        letter-spacing: 0;
-        height: $menuItemHeight;
-        line-height: $menuItemHeight;
-    }
-
-    .menu-li-block {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        letter-spacing: 0;
-        height: $menuItemHeight;
-        position: relative;
-    }
-
-    .menu-li-block .status {
-        border-right: 1px inset #CACACA;
-        width: $width;
-        display: block;
-    }
-
-    .menu-li-block .label {
-        font-size: 14px;
-        display: block;
-        color: #000;
-        padding:0px 10px 0px 5px;
-        line-height: $menuItemHeight;
-        white-space: nowrap;
-    }
-
-    .menu-separator {
-        text-align: left;
-        height: 1px;
-        background: #CACACA;
-        margin-left:30px;
-        line-height: 2px;
-    }
-
-    .menu-li-block:hover {
-        background: #C9DEF7;
-        box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-    }
-</style>