调整西安二号线右键样式
This commit is contained in:
zyy
parent
745f867cb8
commit
cc6c7f92ec
@ -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;
|
||||
|
||||
299
src/components/PopMenu/popTip.vue
Normal file
299
src/components/PopMenu/popTip.vue
Normal file
@ -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"> </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"> </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"> </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>
|
||||
@ -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;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<pop-menu ref="popMenu" :menu="menu" />
|
||||
<div class="xian-02__systerm">
|
||||
<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,
|
||||
disabledCallback: MenuDisabledState.Station.atsAutoControlALL,
|
||||
auth: { station: false, center: true }
|
||||
handler: this.atsAutoControlALL
|
||||
},
|
||||
{
|
||||
label: '授权',
|
||||
handler: this.atsAutoControlALL,
|
||||
disabledCallback: MenuDisabledState.Station.atsAutoControlALL,
|
||||
auth: { station: false, center: true }
|
||||
handler: this.atsAutoControlALL
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
handler: this.atsAutoControlALL,
|
||||
disabledCallback: MenuDisabledState.Station.atsAutoControlALL,
|
||||
auth: { station: false, center: true }
|
||||
handler: this.atsAutoControlALL
|
||||
},
|
||||
{
|
||||
label: '紧急本地控制',
|
||||
handler: this.atsAutoControlALL,
|
||||
disabledCallback: MenuDisabledState.Station.atsAutoControlALL,
|
||||
auth: { station: false, center: true }
|
||||
handler: this.atsAutoControlALL
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
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();
|
||||
|
||||
@ -437,11 +437,11 @@ export function menuConvert(menu) {
|
||||
elem.show = true;
|
||||
return;
|
||||
}
|
||||
if (elem.disabledCallback.constructor === Function) {
|
||||
if (!elem.defaultDisabled) {
|
||||
elem.disabled = elem.disabledCallback();
|
||||
}
|
||||
}
|
||||
// if (elem.disabledCallback.constructor === Function) {
|
||||
// if (!elem.defaultDisabled) {
|
||||
// elem.disabled = elem.disabledCallback();
|
||||
// }
|
||||
// }
|
||||
});
|
||||
}
|
||||
return menu;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user