调整西安二号线右键样式

This commit is contained in:
zyy 2020-04-26 18:38:27 +08:00
parent 745f867cb8
commit cc6c7f92ec
5 changed files with 398 additions and 26 deletions

View File

@ -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;

View 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">&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>

View File

@ -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;

View File

@ -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();

View File

@ -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;