福州一号线 顶部菜单 弹窗样式调整

西安三号线 顶部菜单 代码调整

src/jmapNew/theme/fuzhou_01/menus/dialog/trainEditNumber.vue

@@ -121,13 +121,3 @@ export default {
     }
 };
 </script>
-<style scoped>
-    .fuzhou-01__systerm .el-dialog .base-label {
-        background: rgba(0, 0, 0, x);
-        position: relative;
-        left: -5px;
-        top: -18px;
-        padding: 0 5px;
-        background-color: #F0F0F0;
-    }
-</style>

src/jmapNew/theme/fuzhou_01/menus/dialog/trainMove.vue

@@ -186,8 +186,6 @@ export default {
 </script>
 <style scoped>
     .fuzhou-01__systerm .el-dialog .base-label {
-        background: rgba(0, 0, 0, x);
-        position: relative;
         left: -5px;
         top: -18px;
         padding: 0 5px;

src/jmapNew/theme/fuzhou_01/menus/dialog/trainSwitch.vue

@@ -191,8 +191,6 @@ export default {
 </script>
 <style scoped>
     .fuzhou-01__systerm .el-dialog .base-label {
-        background: rgba(0, 0, 0, x);
-        position: relative;
         left: -5px;
         top: -18px;
         padding: 0 5px;

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

@@ -314,10 +314,8 @@ export default {
     }
 
     .fuzhou-01__systerm .el-dialog .base-label {
-        background: rgba(0, 0, 0, x);
+        background: rgb(240 240 240);
         position: relative;
-        left: -15px;
-        top: -18px;
     }
 
     .fuzhou-01__systerm .el-dialog .el-form-item label {

src/jmapNew/theme/fuzhou_01/menus/menuDialog/childDialog/userAdd.vue

@@ -155,13 +155,3 @@ export default {
     }
 };
 </script>
-<style scoped>
-    .fuzhou-01__systerm .el-dialog .base-label {
-        background: rgba(0, 0, 0, x);
-        position: relative;
-        left: -5px;
-        top: -10px;
-        padding: 0 5px;
-        background-color: #F0F0F0;
-    }
-</style>

src/jmapNew/theme/fuzhou_01/menus/menuDialog/childDialog/userDelete.vue

@@ -126,13 +126,3 @@ export default {
     }
 };
 </script>
-<style scoped>
-    .fuzhou-01__systerm .el-dialog .base-label {
-        background: rgba(0, 0, 0, x);
-        position: relative;
-        left: -5px;
-        top: -10px;
-        padding: 0 5px;
-        background-color: #F0F0F0;
-    }
-</style>

src/jmapNew/theme/fuzhou_01/menus/menuDialog/childDialog/userEdit.vue

@@ -172,13 +172,3 @@ export default {
     }
 };
 </script>
-<style scoped>
-    .fuzhou-01__systerm .el-dialog .base-label {
-        background: rgba(0, 0, 0, x);
-        position: relative;
-        left: -5px;
-        top: -10px;
-        padding: 0 5px;
-        background-color: #F0F0F0;
-    }
-</style>

src/jmapNew/theme/fuzhou_01/menus/menuDialog/helpAbout.vue

@@ -125,8 +125,6 @@ export default {
 </script>
 <style scoped>
     .fuzhou-01__systerm .el-dialog .base-label {
-        background: rgba(0, 0, 0, x);
-        position: relative;
         left: -5px;
         top: -10px;
         padding: 0 5px;

src/jmapNew/theme/fuzhou_01/menus/menuDialog/manageUser.vue

@@ -294,10 +294,8 @@ export default {
 </script>
 <style scoped>
     .fuzhou-01__systerm .el-dialog .base-label {
-        background: rgba(0, 0, 0, x);
-        position: relative;
-        left: -5px;
-        top: -10px;
+        left: 0px;
+        top: -20px;
         padding: 0 5px;
         background-color: #F0F0F0;
     }

src/jmapNew/theme/fuzhou_01/menus/menuDialog/trainAdd.vue

@@ -158,10 +158,8 @@ export default {
 </script>
 <style scoped>
     .fuzhou-01__systerm .el-dialog .base-label {
-        background: rgba(0, 0, 0, x);
-        position: relative;
         left: -5px;
-        top: -18px;
+        top: -25px;
         padding: 0 5px;
         background-color: #F0F0F0;
     }

src/jmapNew/theme/fuzhou_01/menus/menuDialog/trainDelete.vue

@@ -138,13 +138,3 @@ export default {
     }
 };
 </script>
-<style scoped>
-    .fuzhou-01__systerm .el-dialog .base-label {
-        background: rgba(0, 0, 0, x);
-        position: relative;
-        left: -5px;
-        top: -18px;
-        padding: 0 5px;
-        background-color: #F0F0F0;
-    }
-</style>

src/jmapNew/theme/fuzhou_01/menus/menuDialog/trainTranstalet.vue

@@ -155,3 +155,11 @@ export default {
     }
 };
 </script>
+<style scoped>
+    .fuzhou-01__systerm .el-dialog .base-label {
+        left: -5px;
+        top: -25px;
+        padding: 0 5px;
+        background-color: #F0F0F0;
+    }
+</style>

src/jmapNew/theme/fuzhou_01/menus/menuDialog/viewTrainId.vue

@@ -205,4 +205,11 @@ export default {
 	.elrow{
 		margin-top:4px;
 	}
+
+  .fuzhou-01__systerm .el-dialog .base-label {
+        left: 0px;
+        top: -24px;
+        padding: 0 5px;
+        background-color: #F0F0F0;
+    }
 </style>

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

@@ -1,72 +1,6 @@
 <template>
-  <div id="menuBar">
-    <div class="nav">
-      <template v-for="(item,i) in menu">
-        <template v-if="noShowingChildren(item.children)">
-          <li :id="item.operate.domId" :key="i" class="nav-li" @click="hookClick(item)">
-            <span class="nav-li-text">{{ item.title }}</span>
-          </li>
-        </template>
-        <template v-else>
-          <li :id="item.operate.domId" :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&&hasShowingChildren(child.children)">
-                  <li
-                    :id="child.operate.domId"
-                    :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.show"
-                          :id="grandchild.operate.domId"
-                          :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.show"
-                    :id="child.operate.domId"
-                    :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>
+  <div id="menuBarXian01">
+    <menu-bar ref="menuBar" :menu-normal="menuNormal" style="width:100%" />
     <!--<div class="deviceStatus">-->
     <!--<div class="holdTrainStatus">H</div>-->
     <!--<div class="jumpStopStatus">S</div>-->
@@ -76,7 +10,6 @@
     <view-train-id ref="viewTrainId" />
     <view-name ref="viewName" />
     <view-device ref="viewDevice" />
-    <notice-info ref="noticeInfo" pop-class="xian-01__systerm" />
     <train-add ref="trainAdd" />
     <train-transtalet ref="trainTranstalet" />
     <train-delete ref="trainDelete" />
@@ -85,11 +18,8 @@
   </div>
 </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.js';
-import { State2SimulationMap } from '@/scripts/cmdPlugin/Config.js';
-import MenuContextHandler from '@/scripts/cmdPlugin/MenuContextHandler';
 import StationControlConvert from './menuDialog/stationControlConvert';
 import TrainAdd from './menuDialog/trainAdd';
 import TrainTranstalet from './menuDialog/trainTranstalet';
@@ -100,13 +30,12 @@ import ViewName from './menuDialog/viewName';
 import ViewDevice from './menuDialog/viewDevice';
 import ManageUser from './menuDialog/manageUser';
 import HelpAbout from './menuDialog/helpAbout';
-import NoticeInfo from '@/jmapNew/theme/components/menus/childDialog/noticeInfo';
 import { EventBus } from '@/scripts/event-bus';
 
 export default {
-    name: 'MenuBar',
+    name: 'MenuBarXian01',
     components: {
-        NoticeInfo,
+        MenuBar,
         StationControlConvert,
         PasswordBox,
         ViewTrainId,
@@ -128,12 +57,6 @@ export default {
     },
     data() {
         return {
-            classA: -1,
-            classB: -1,
-            tempClassA: -1,
-            tempClassB: -1,
-            valid: true,
-            menu: [],
             menuNormal: {
                 Local: [
                     {
@@ -399,133 +322,7 @@ export default {
             }
         };
     },
-    computed: {
-        ...mapGetters('training', [
-            'mode',
-            'started',
-            'steps',
-            'order',
-            'mode'
-        ]),
-        ...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();
-        }
-    },
-    mounted() {
-        this.initMenu();
-    },
     methods: {
-        initMenu(menu) {
-            this.menu = MenuContextHandler.menuBarConvert(this.menuNormal[State2SimulationMap[this.$store.state.training.prdType]], 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);
-                }
-            };
-        },
-        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.operation
-            };
-            if (this.$route.query.trainingId) {
-                operate.code = this.$store.state.training.offsetStationCode;
-            }
-            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.operation
-            };
-            if (this.$route.query.trainingId) {
-                operate.code = this.$store.state.training.offsetStationCode;
-            }
-            this.tempClassB = index;
-            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
-                if (valid) {
-                    this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
-                }
-            });
-        },
         // 转为站控
         turnToStationControl(order) {
             const operate = {
@@ -533,7 +330,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.stationControlConvert.doShow(operate);
                 }
@@ -546,7 +343,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.passwordBox.doShow(operate);
                 }
@@ -559,7 +356,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.stationControlConvert.doShow(operate);
                 }
@@ -572,7 +369,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.viewTrainId.doShow(operate);
                 }
@@ -585,7 +382,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.viewName.doShow(operate);
                 }
@@ -598,7 +395,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.viewDevice.doShow(operate);
                 }
@@ -611,7 +408,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);
                 }
@@ -624,7 +421,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);
                 }
@@ -637,7 +434,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);
                 }
@@ -650,7 +447,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);
                 }
@@ -663,7 +460,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.helpAbout.doShow(operate);
                 }
@@ -671,7 +468,7 @@ export default {
         },
         // 刷新
         refresh() {
-            this.closeMenu(true);
+            this.$refs.menuBar.closeMenu(true);
             EventBus.$emit('refresh');
         },
         getLoginResult(operate) {
@@ -684,143 +481,18 @@ export default {
             }
         },
         undeveloped() {
-            this.doClose();
-
+            this.$refs.menuBar.doClose();
             this.$alert(this.$t('menu.menuBar.implemented'), this.$t('global.tips'), {
                 confirmButtonText: this.$t('global.confirm'),
                 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;
-    $menuItemWidth: 190px;
-    $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;
-        width: $menuItemWidth;
-        padding: 0px;
-        margin: 0px;
-    }
-
-    .menu-ul {
-        display: none;
-        list-style: none;
-        background: #F0F0F0;
-        line-height: $menuItemHeight;
-        width: $menuItemWidth;
-        bottom: $menuItemHeight;
-    }
-
-    .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: block;
-		float: left;
-        border-right: 1px inset #CACACA;
-        width: $width;
-    }
-
-    .menu-li-text .label {
-        display: block;
-		float: left;
-    }
-
-    .menu-li-block:hover {
-        background: #C9DEF7;
-        box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-    }
-
     .deviceStatus{
         display: inline-block;
         font-size: 0;
@@ -837,4 +509,11 @@ export default {
         background: #ccc;
         font-size:14px;
     }
+
+    #menuBarXian01{
+        line-height:30px;
+    }
+    #menuBarXian01 #menuBar .menu-li-block .label{
+        padding: 0px 30px 0px 5px !important;
+    }
 </style>