调整西安二号线右键样式

src/components/PopMenu/index.vue

@@ -232,7 +232,7 @@ export default {
         position: fixed;
         padding: 5px 0px;
         border: 1px solid gray;
-        z-index: 9999;
+        z-index: 2;
 
         .dsp-block {
             display: block;

src/components/PopMenu/popTip.vue

@@ -0,0 +1,299 @@
+<template>
+  <div v-show="show" class="pop-menu pop_menu_tip" :style="{ height: height, left: tPosition.x+'px', top: tPosition.y+'px' }">
+    <div v-for="(item, index) in menu" :key="index" class="" :style="{ width: width }">
+      <div v-if="item.children">
+        <el-popover
+          placement="right-start"
+          trigger="hover"
+          :style="{width: calculateSubWidth(item)}"
+          class="custom-popover"
+          :popper-class="popClass"
+          :offset="0"
+          :close-delay="50"
+          :visible-arrow="false"
+        >
+          <ul
+            style="list-style: none; margin: 0px; padding: 0px; padding-right:0px; border-radius:0px;"
+          >
+            <li v-for="(child, idx) in item.children" :key="idx" class="hover-popover">
+              <template v-if="child.type === 'separator'">
+                <div class="separator">&ensp;</div>
+              </template>
+              <template v-else>
+                <el-button
+                  v-if="isShow(child)"
+                  type="text"
+                  class="dsp-block"
+                  :style="{color:checkIfDisabled(child)? '': 'black'}"
+                  :disabled="checkIfDisabled(child)"
+                  @click="child.handler(child)"
+                >{{ child.label }}</el-button>
+              </template>
+            </li>
+          </ul>
+          <template v-if="item.type === 'separator'">
+            <div class="separator">&ensp;</div>
+          </template>
+          <template v-else>
+            <el-button
+              v-if="isShow(item)"
+              slot="reference"
+              class="dsp-block"
+              type="text"
+              :disabled="checkIfDisabled(item)"
+            >
+              {{ item.label }}
+              <i class="el-icon-arrow-right" style="float: right;" />
+            </el-button>
+          </template>
+        </el-popover>
+      </div>
+      <div v-else>
+        <template v-if="item.type === 'separator'">
+          <div class="separator">&ensp;</div>
+        </template>
+        <template v-else>
+          <template v-if="isShow(item)">
+            <el-button
+              v-if="item.type ==='file'"
+              type="text"
+              class="uploadDemo"
+              :disabled="checkIfDisabled(item)"
+            >
+              <input
+                :ref="item.label"
+                type="file"
+                class="file_box"
+                accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+                @change="openLoadFile(item)"
+              >
+              {{ item.label }}
+            </el-button>
+            <el-button
+              v-else
+              id="testId"
+              class="dsp-block"
+              type="text"
+              :disabled="checkIfDisabled(item)"
+              @click="item.handler"
+            >
+              {{ item.label }}
+            </el-button>
+          </template>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { checkRectCollision } from '@/utils/index';
+export default {
+    name: 'PopMenu',
+    props: {
+        menu: {
+            type: Array,
+            required: true
+        },
+        popClass: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            show: false,
+            defaultFontSize: 14,
+            tPosition: {
+                x: -1000,
+                y: -1000
+            },
+            height: 'auto'
+        };
+    },
+    computed: {
+        width() {
+            let fontNum = 0;
+            let newLabel = '';
+            this.menu.forEach(elem => {
+                newLabel = elem.label && elem.label.replace(/[^\u0000-\u00ff]/g, 'aa');
+                if (elem.label && newLabel.length > fontNum) {
+                    fontNum = newLabel.length;
+                    // fontNum = elem.label.length;
+                }
+            });
+            var width = fontNum / 2 * this.defaultFontSize + 60 + 'px';
+            // if(this.$t('global.lanuage')==='en'){
+            //     width = fontNum/2 * this.defaultFontSize + 40 + 'px';
+            // }
+            return width;
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        resetShowPosition(point) {
+            if (point) {
+                this.show = true;
+                const self = this;
+                this.$nextTick(() => {
+                    const gutter = 3;
+                    // 位置
+                    const height = self.$el.clientHeight;
+                    const width = self.$el.clientWidth;
+                    let px = 0;
+                    let py = 0;
+                    if (point.x + width > document.documentElement.clientWidth) {
+                        px = document.documentElement.clientWidth - width - gutter;
+                    } else {
+                        px = point.x;
+                    }
+                    if (point.y + height > document.documentElement.clientHeight) {
+                        py = document.documentElement.clientHeight - height - gutter;
+                    } else {
+                        py = point.y;
+                    }
+                    // 处理和提示框重叠问题
+                    const popTipDialog = document.getElementById('pop_tip_dialog');
+                    if (popTipDialog) {
+                        const tipRect = {
+                            point: { x: popTipDialog.offsetLeft, y: popTipDialog.offsetTop },
+                            width: popTipDialog.offsetWidth,
+                            height: popTipDialog.offsetHeight
+                        };
+                        const menuRect = {
+                            point: { x: px, y: py },
+                            width: self.$el.offsetWidth,
+                            height: self.$el.offsetHeight
+                        };
+                        const collision = checkRectCollision(tipRect, menuRect);
+                        // 若重叠，调整位置
+                        if (collision) {
+                            px = tipRect.point.x + tipRect.width + gutter;
+                            if (px + width > document.documentElement.clientWidth) {
+                                px = tipRect.point.x - menuRect.width - gutter;
+                            }
+                        }
+                    }
+                    self.tPosition.x = px;
+                    self.tPosition.y = py;
+                });
+            }
+        },
+        close() {
+            this.show = false;
+            // 关闭时立即影藏popover组件
+            const popoverList = document.getElementsByClassName('el-popover');
+            for (let i = 0; i < popoverList.length; i++) {
+                popoverList[i].style.display = 'none';
+            }
+        },
+        checkIfDisabled(menuObj) {
+            return menuObj.disabled === true;
+        },
+        isShow(menuObj) {
+            if (typeof (menuObj.show) === 'undefined') {
+                return true;
+            } else {
+                return menuObj.show;
+            }
+        },
+        calculateSubWidth(item) {
+            const children = item.children;
+            let width = 0;
+            let fontNum = 0;
+            children.forEach(elem => {
+                if (elem.label.length > fontNum) {
+                    fontNum = elem.label.length;
+                }
+            });
+            width = fontNum * this.defaultFontSize + 20 + 'px';
+            return width;
+        },
+        openLoadFile(item) {
+            const obj = this.$refs[item.label][0];
+            if (obj.files) {
+                const file = obj.files[0];
+                item.handler(file);
+                obj.value = '';
+            }
+        }
+    }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    $bg: #508F86;
+    $hoverBg: #508F86;
+
+    .pop-menu {
+        background-color: $bg;
+        position: fixed;
+        padding: 5px 0px;
+        border: 1px solid gray;
+        z-index: 2;
+
+        .dsp-block {
+            display: block;
+            text-align: left;
+            width: 100%;
+            border-radius: unset;
+            border: 2px solid transparent;
+            color: #000;
+        }
+
+        .dsp-block:hover {
+            background-color: $hoverBg;
+			border-top: 2px solid #fff;
+			border-left: 2px solid #fff;
+			border-right: 2px solid #284743;
+			border-bottom: 2px solid #284743;
+        }
+    }
+
+	.hover-popover{
+		border: 2px solid transparent;
+		&:hover{
+			background-color: $hoverBg;
+			border-top: 2px solid #fff;
+			border-left: 2px solid #fff;
+			border-right: 2px solid #284743;
+			border-bottom: 2px solid #284743;
+		}
+	}
+
+    .uploadDemo {
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        cursor: pointer;
+        border: 1px solid transparent;
+        color: #000;
+
+        input {
+            opacity: 0;
+            cursor: pointer;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .uploadDemo:hover {
+        background-color: $hoverBg;
+    }
+
+    .el-button--text {
+        padding: 6px 15px;
+        text-align: left;
+    }
+
+    .separator {
+        background: gray;
+        width: 90%;
+        height: 1px;
+        margin: 0px 5%;
+    }
+</style>

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

@@ -116,6 +116,14 @@ export default {
 		overflow: hidden !important;
 	}
 
+	.xian-02__pop_tip_station{
+		padding: 0 !important;
+		margin: 0 !important;
+		background: #508F86;
+		border: 1px solid #6B736A;
+		border-radius: 0;
+	}
+
 	.xian-02__system .el-dialog {
 		background: #AEB2C3;
 		box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;

src/jmapNew/theme/xian_02/menus/menuStation.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
+  <div class="xian-02__systerm">
-    <pop-menu ref="popMenu" :menu="menu" />
+    <pop-menu ref="popMenu" :menu="menu" trigger="click" pop-class="xian-02__pop_tip_station" />
     <station-cmd-control ref="stationCmdControl" />
     <station-human-control-all ref="stationHumanControlAll" />
     <station-set-route-control-all ref="stationSetRouteControlAll" />
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import PopMenu from '@/components/PopMenu';
+import PopMenu from '@/components/PopMenu/popTip';
 import StationCmdControl from './dialog/stationCmdControl';
 import StationHumanControlAll from './dialog/stationHumanControlAll';
 import StationSetRouteControlAll from './dialog/stationSetRouteControlAll';
@@ -44,33 +44,99 @@ export default {
                 Center: [
                     {
                         label: '本地控制许可',
-                        handler: this.humanControlALL,
-                        disabledCallback: MenuDisabledState.Station.humanControlALL,
-                        auth: { station: false, center: true },
                         children: [
                             {
                                 label: '请求',
-                                handler: this.atsAutoControlALL,
+                                handler: this.atsAutoControlALL
-                                disabledCallback: MenuDisabledState.Station.atsAutoControlALL,
-                                auth: { station: false, center: true }
                             },
                             {
                                 label: '授权',
-                                handler: this.atsAutoControlALL,
+                                handler: this.atsAutoControlALL
-                                disabledCallback: MenuDisabledState.Station.atsAutoControlALL,
-                                auth: { station: false, center: true }
                             },
                             {
                                 label: '取消',
-                                handler: this.atsAutoControlALL,
+                                handler: this.atsAutoControlALL
-                                disabledCallback: MenuDisabledState.Station.atsAutoControlALL,
-                                auth: { station: false, center: true }
                             },
                             {
                                 label: '紧急本地控制',
-                                handler: this.atsAutoControlALL,
+                                handler: this.atsAutoControlALL
-                                disabledCallback: MenuDisabledState.Station.atsAutoControlALL,
+                            }
-                                auth: { station: false, center: true }
+                        ]
+                    },
+                    {
+                        label: '进路模式',
+                        children: [
+                            {
+                                label: '自动',
+                                handler: this.atsAutoControlALL
+                            },
+                            {
+                                label: '人工',
+                                handler: this.atsAutoControlALL
+                            }
+                        ]
+                    },
+                    {
+                        label: '通信',
+                        children: [
+                            {
+                                label: '本地',
+                                handler: this.atsAutoControlALL
+                            },
+                            {
+                                label: '重新连接',
+                                handler: this.atsAutoControlALL
+                            }
+                        ]
+                    },
+                    {
+                        label: '折返模式',
+                        children: [
+                            {
+                                label: '优先折返',
+                                handler: this.atsAutoControlALL
+                            },
+                            {
+                                label: '直线折返',
+                                handler: this.atsAutoControlALL
+                            },
+                            {
+                                label: '侧线折返',
+                                handler: this.atsAutoControlALL
+                            }
+                        ]
+                    },
+                    {
+                        label: '设备标签',
+                        children: [
+                            {
+                                label: '创建设备标签',
+                                handler: this.atsAutoControlALL
+                            },
+                            {
+                                label: '查看设备标签',
+                                handler: this.atsAutoControlALL
+                            },
+                            {
+                                label: '更改设备标签',
+                                handler: this.atsAutoControlALL
+                            },
+                            {
+                                label: '删除设备标签',
+                                handler: this.atsAutoControlALL
+                            }
+                        ]
+                    },
+                    {
+                        label: '取消验证',
+                        children: [
+                            {
+                                label: '取消验证',
+                                handler: this.atsAutoControlALL
+                            },
+                            {
+                                label: '恢复验证',
+                                handler: this.atsAutoControlALL
                             }
                         ]
                     }
@@ -117,7 +183,6 @@ export default {
         },
         initMenu() {
             this.menu = [];
-            debugger;
             if (this.selected.concentrateStationCode == this.selected.code) {
                 // 编辑模式菜单列表
                 // this.menu = menuFiltration(this.menuNormal);
@@ -133,9 +198,9 @@ export default {
                     this.menu = [...this.menuForce];
                 }
             }
+            this.menu = [...this.menuNormal.Center];
 
             this.menu = menuConvert(this.menu);
-            console.log(this.menu, 'menu');
         },
         doShow(point) {
             this.clickEvent();

src/jmapNew/theme/xian_02/menus/utils/menuItemStatus.js

@@ -437,11 +437,11 @@ export function menuConvert(menu) {
                 elem.show = true;
                 return;
             }
-            if (elem.disabledCallback.constructor === Function) {
+            // if (elem.disabledCallback.constructor === Function) {
-                if (!elem.defaultDisabled) {
+            //     if (!elem.defaultDisabled) {
-                    elem.disabled = elem.disabledCallback();
+            //         elem.disabled = elem.disabledCallback();
-                }
+            //     }
-            }
+            // }
         });
     }
     return menu;