宁波一号线 菜单样式调整

src/jmapNew/theme/ningbo_01/menus/dialog/routeSelection.vue

@@ -135,6 +135,7 @@ export default {
         doClose() {
             this.loading = false;
             this.dialogShow = false;
+            this.row = null;
             this.restoreBeforeDevices();
             this.$refs.table.setCurrentRow();
             this.$store.dispatch('training/emitTipFresh');
@@ -220,9 +221,9 @@ export default {
                 commitOperate(menuOperate.Signal.arrangementRoute, {routeCode:this.row.code}, 1).then(({valid, operate})=>{
                     this.loading = false;
                     if (valid) {
-                        this.doClose();
                         const signal = this.$store.getters['map/getDeviceByCode'](this.row.startSignalCode);
                         operate.message = `<div>命令：进路设置</div><div>始端信号机：${signal.name}</div><div>进路：${this.row.name} </div>`;
+                        this.doClose();
                         this.$refs.confirmTip.doShow(operate);
                     }
                 }).catch(() => {
@@ -236,7 +237,6 @@ export default {
             const operate = {
                 operation: OperationEvent.Command.cancel.menu.operation
             };
-
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
                     this.doClose();

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

@@ -19,65 +19,48 @@
             <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-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"
+                    class="menu-li-block"
                     @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 class="menu-ul-block-out">
-                    </div>
+                      <div class="menu-ul-block">
-                    <ul class="menu-ul" :class="{'active' :j==classB}">
+                        <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-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"
+                              class="menu-li-block"
                               @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>
+                      </div>
+                    </div>
                   </li>
                 </template>
                 <template v-else>
-                  <li v-if="child.type === 'separator'" :key="j" class="menu-separator">
+                  <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"
+                    class="menu-li-block"
                     @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>
@@ -685,7 +668,7 @@ export default {
         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]) {
+            if (this.menu[2] && this.$store.state.training.prdType == '02') {
                 this.menu[2].children = this.initStationList();
             }
             this.clickEvent();
@@ -977,7 +960,6 @@ export default {
     $height: 30px;
     $menuPadding: 10px;
     $menuItemHeight: 30px;
-    $menuItemWidth: 180px;
     $menuItemPadding: 5px;
 
     #menuBar {
@@ -1026,11 +1008,11 @@ export default {
         list-style: none;
         border: 1px solid gray !important;
         line-height: $menuItemHeight;
-        width: $menuItemWidth;
+        background: #F0F0F0;
         padding: 0px;
         margin: 0px;
         max-height: 550px;
-        overflow-y: scroll;
+        overflow-y: auto;
 
         &::-webkit-scrollbar {
             width: 4px;
@@ -1053,15 +1035,40 @@ export default {
         list-style: none;
         background: #F0F0F0;
         line-height: $menuItemHeight;
-        width: $menuItemWidth;
-        bottom: $menuItemHeight;
     }
 
-    .active {
+    .menu-ul-block-out{
         position: absolute;
-        display: block !important;
+        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;
@@ -1070,56 +1077,36 @@ export default {
         line-height: $menuItemHeight;
     }
 
-    .menu-li {
-        text-align: left;
-        background: #F0F0F0;
-        height: $menuItemHeight;
-        line-height: $menuItemHeight;
-    }
-
     .menu-li-block {
         display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
         letter-spacing: 0;
         height: $menuItemHeight;
-        line-height: $menuItemHeight;
+        position: relative;
     }
 
-    .menu-li-text {
+    .menu-li-block .status {
-        font-size: 14px;
-        color: #000;
-    }
-
-    .menu-li-text .status {
-        display: inline-block;
         border-right: 1px inset #CACACA;
         width: $width;
+        display: block;
     }
 
-    .menu-li-text .label {
+    .menu-li-block .label {
-        display: inline-block;
+        font-size: 14px;
+        display: block;
+        color: #000;
+        padding:0px 10px 0px 5px;
+        line-height: $menuItemHeight;
+        white-space: nowrap;
     }
 
     .menu-separator {
         text-align: left;
-        background: #F0F0F0;
+        height: 1px;
-        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;
+        margin-left:30px;
-        height: 2px;
+        line-height: 2px;
-        width: $menuItemWidth - $width - 30px;
     }
 
     .menu-li-block:hover {