成都三号线 顶部菜单 代码调整

src/jmapNew/theme/chengdu_03/menus/menuBar.vue

@@ -1,71 +1,9 @@
 <template>
-  <div id="menuBar">
+  <div id="menuBarChengdu3">
-    <div class="nav">
+    <menu-bar ref="menuBar" :menu-normal="menuNormal" style="width:100%" />
-      <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">
-                    <span class="status">&ensp;</span>
-                    <span class="separator">&ensp;</span>
-                  </li>
-                  <li v-else :id="getDomId(child)" :key="j" class="menu-li" @click.stop="selectedClassB(child, j)">
-                    <div class="menu-li-block">
-                      <span class="menu-li-text">
-                        <span class="status">&ensp;</span>
-                        <span class="label">{{ child.title }}</span>
-                      </span>
-                    </div>
-                    <ul class="menu-ul" :class="{'active' :j==classB}">
-                      <template v-for="(grandchild,k) in child.children">
-                        <li v-if="grandchild.type === 'separator'" :key="k" class="menu-separator">
-                          <span class="status">&ensp;</span>
-                          <span class="separator">&ensp;</span>
-                        </li>
-                        <li v-else-if="grandchild.show" :id="getDomId(grandchild)" :key="k" class="menu-li" @click.stop="hookClick(grandchild)">
-                          <div class="menu-li-block">
-                            <span class="menu-li-text">
-                              <span class="status">&ensp;</span>
-                              <span class="label">{{ grandchild.title }}</span>
-                            </span>
-                          </div>
-                        </li>
-                      </template>
-                    </ul>
-                  </li>
-                </template>
-                <template v-else>
-                  <li v-if="child.type === 'separator'" :key="j" class="menu-separator">
-                    <span class="status">&ensp;</span>
-                    <span class="separator">&ensp;</span>
-                  </li>
-                  <li v-else-if="child.show" :id="getDomId(child)" :key="j" class="menu-li" @click.stop="hookClick(child)">
-                    <div class="menu-li-block">
-                      <span class="menu-li-text">
-                        <span class="status">&ensp;</span>
-                        <span class="label">{{ child.title }}</span>
-                      </span>
-                    </div>
-                  </li>
-                </template>
-              </template>
-            </ul>
-          </li>
-        </template>
-      </template>
-    </div>
     <station-control-convert ref="stationControlConvert" />
     <password-box ref="passwordBox" @setLoginResult="getLoginResult" />
     <view-name ref="viewName" />
-    <notice-info ref="noticeInfo" pop-class="chengdou-03__systerm" />
     <train-add ref="trainAdd" />
     <train-transtalet ref="trainTranstalet" />
     <train-delete ref="trainDelete" />
@@ -76,10 +14,8 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import { TrainingMode } from '@/scripts/ConstDic';
+import MenuBar from '@/jmapNew/theme/components/menus/menuBar';
 import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
-import { State2SimulationMap } from '@/scripts/cmdPlugin/Config';
-import MenuContextHandler from '@/scripts/cmdPlugin/MenuContextHandler';
 import StationControlConvert from './menuDialog/stationControlConvert';
 import TrainAdd from './menuDialog/trainAdd';
 import TrainTranstalet from './menuDialog/trainTranstalet';
@@ -89,13 +25,11 @@ import ViewName from './menuDialog/viewName';
 import ManageUser from './menuDialog/manageUser';
 import HelpAbout from './menuDialog/helpAbout';
 import SetLimitSpeed from './menuDialog/setLimitSpeed';
-import NoticeInfo from '@/jmapNew/theme/components/menus/childDialog/noticeInfo';
-import { EventBus } from '@/scripts/event-bus';
 
 export default {
-    name: 'MenuBar',
+    name: 'MenuBarChengdu03',
     components: {
-        NoticeInfo,
+        MenuBar,
         StationControlConvert,
         PasswordBox,
         ViewName,
@@ -106,22 +40,8 @@ export default {
         HelpAbout,
         SetLimitSpeed
     },
-    props: {
-        selected: {
-            type: Object,
-            default() {
-                return null;
-            }
-        }
-    },
     data() {
         return {
-            classA: -1,
-            classB: -1,
-            tempClassA: -1,
-            tempClassB: -1,
-            valid: true,
-            menu: [],
             menuNormal: {
                 Local: [
                     {
@@ -281,12 +201,12 @@ export default {
                             }
                         ]
                     },
-                    {
+                    // {
-                        title: '车站定位',
+                    //     title: '车站定位',
-                        operate: '',
+                    //     operate: '',
-                        children: [
+                    //     children: [
-                        ]
+                    //     ]
-                    },
+                    // },
                     {
                         title: '显示',
                         // operate: OperationEvent.Command.mBar.view,
@@ -384,6 +304,7 @@ export default {
                     },
                     {
                         title: '帮助',
+                        operate: '',
                         children: [
                             {
                                 title: '关于ITS GPC 工作站',
@@ -651,6 +572,7 @@ export default {
                     },
                     {
                         title: '帮助',
+                        operate: '',
                         children: [
                             {
                                 title: '关于ITS GPC 工作站',
@@ -664,52 +586,14 @@ export default {
         };
     },
     computed: {
-        ...mapGetters('training', [
-            'mode',
-            'started',
-            'steps',
-            'order',
-            'mode'
-        ]),
         ...mapGetters('map', [
             'stationList'
         ])
     },
-    watch: {
+    created() {
-        tempClassA() {
+        this.menuNormal['Center'][3].children = this.initStationList();
-            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;
-        },
         initStationList() {
             const list = [];
             this.stationList.forEach(station => {
@@ -727,100 +611,11 @@ export default {
             });
             return list;
         },
-        initMenu(menu) {
-            this.menu = MenuContextHandler.menuBarConvert(this.menuNormal[State2SimulationMap[this.$store.state.training.prdType]], this.$store.state.training.operatemode);
-            if (this.menu.length) {
-                this.menu[3].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 = {
-                operation: item.operate
-            };
-            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 = {
-                operation: item.operate
-            };
-            this.tempClassB = index;
-            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
-                if (valid) {
-                    this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
-                }
-            });
-        },
         // 设置地图定位
         mapLocation(code) {
             if (code) {
                 this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: code });
-                this.closeMenu(true);
+                this.$refs.menuBar.closeMenu(true);
             }
         },
         // 关于
@@ -830,17 +625,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) {
@@ -856,7 +646,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.setLimitSpeed.doShow(operate, true);
                 }
@@ -868,187 +658,28 @@ 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.setLimitSpeed.doShow(operate, false);
                 }
             });
         },
         undeveloped() {
-            this.doClose();
+            this.$refs.menuBar.doClose();
             this.$alert('实现中......', '提示', {
                 confirmButtonText: '确定',
                 callback: action => {
                 }
             });
-        },
-        doClose() {
-            this.$nextTick(() => {
-                EventBus.$emit('closeMenu');
-            });
         }
     }
 };
 </script>
-
+<style rel="stylesheet/scss" lang="scss">
-<style scoped rel="stylesheet/scss" lang="scss">
+    #menuBarChengdu3{
-    @import "src/styles/mixin.scss";
+        line-height:30px;
-    $width: 30px;
-    $height: 30px;
-    $menuPadding: 10px;
-    $menuItemHeight: 30px;
-    $menuItemWidth: 180px;
-    $menuItemPadding: 5px;
-
-    #menuBar {
-        z-index: 36;
-        position: absolute;
-        width: inherit;
-        height: $height;
-        line-height: $height;
     }
-
+    #menuBarChengdu3 #menuBar .menu-li-block .label{
-    .nav {
+        padding: 0px 30px 0px 5px !important;
-        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;
-        width: $menuItemWidth;
-        padding: 0px;
-        margin: 0px;
-        max-height: 550px;
-        /*overflow-y: scroll;*/
-
-        &::-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;
-        width: $menuItemWidth;
-        bottom: $menuItemHeight;
-		position: relative;
-		left: 180px;
-		padding-left: 0;
-    }
-
-    .active {
-        /*position: absolute;*/
-        display: block !important;
-    }
-
-    .menu-ul-text {
-        font-size: 14px;
-        color: #000;
-        letter-spacing: 0;
-        height: $menuItemHeight;
-        line-height: $menuItemHeight;
-    }
-
-    .menu-li {
-        text-align: left;
-        background: #F0F0F0;
-        height: $menuItemHeight;
-        line-height: $menuItemHeight;
-    }
-
-    .menu-li-block {
-        display: flex;
-        letter-spacing: 0;
-        height: $menuItemHeight;
-        line-height: $menuItemHeight;
-    }
-
-    .menu-li-text {
-        font-size: 14px;
-        color: #000;
-    }
-
-    .menu-li-text .status {
-        display: inline-block;
-        border-right: 1px inset #CACACA;
-        width: $width;
-    }
-
-    .menu-li-text .label {
-        display: inline-block;
-    }
-
-    .menu-separator {
-        text-align: left;
-        background: #F0F0F0;
-        height: 2px;
-        line-height: 2px;
-    }
-
-    .menu-separator .status {
-        display: inline-block;
-        border-right: 1px inset #CACACA;
-        width: $width;
-        height: 100%;
-        background: #EFECDE;
-    }
-
-    .menu-separator .separator {
-        display: inline-block;
-        background: #CACACA;
-        margin-left: 5px;
-        height: 2px;
-        width: $menuItemWidth - $width - 30px;
-    }
-
-    .menu-li-block:hover {
-        background: #C9DEF7;
-        box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
     }
 </style>

src/jmapNew/theme/fuzhou_01/menus/menuBar.vue

@@ -486,11 +486,11 @@ export default {
 };
 </script>
 
-<style scoped rel="stylesheet/scss">
+<style rel="stylesheet/scss" lang="scss">
     #menuBarFuzhou{
         line-height:30px;
     }
-    #menuBarFuzhou #menuBar .menu-li-block{
+    #menuBarChengdu3 #menuBar .menu-li-block .label{
-        padding: 0px 30px 0px 5px;
+        padding: 0px 30px 0px 5px !important;
     }
 </style>