145 lines
3.2 KiB
Vue
145 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<pop-menu ref="popMenu" :menu="menu" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PopMenu from '@/components/PopMenu';
|
|
import { Notification } from 'element-ui';
|
|
import { mapGetters } from 'vuex';
|
|
import { DeviceMenu } from '@/scripts/ConstDic';
|
|
import { exitFullscreen } from '@/utils/screen';
|
|
|
|
export default {
|
|
name: 'CancelMenu',
|
|
components: {
|
|
PopMenu
|
|
},
|
|
data() {
|
|
return {
|
|
menu: [],
|
|
menuNormal: [],
|
|
menuScreen: [
|
|
{
|
|
label: this.$t('menu.menuCancle.zoomIn'),
|
|
handler: this.magnifyMap,
|
|
disabled: false
|
|
},
|
|
{
|
|
label: this.$t('menu.menuCancle.zoomOut'),
|
|
handler: this.shrinkMap,
|
|
disabled: false
|
|
},
|
|
{
|
|
label: this.$t('menu.menuCancle.back'),
|
|
handler: this.back,
|
|
disabled: false
|
|
}
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters('map', [
|
|
'stationList'
|
|
]),
|
|
isScreen() { // 大屏隐藏所有菜单
|
|
return this.$route.params.mode === 'dp' ||
|
|
this.$store.state.training.roles == 'BigScreen';
|
|
}
|
|
},
|
|
watch: {
|
|
'$store.state.menuOperation.buttonOperation': function (val, old) {
|
|
if (!this.isScreen && this.menu && this.menu.length > 1) {
|
|
// this.menu[0].disabled = (this.menu[0] && val) ? true : true;
|
|
// this.menu[1].disabled = !((this.menu[1] && val));
|
|
}
|
|
},
|
|
'$store.state.menuOperation.menuCount': function (val) {
|
|
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.Cancel)) {
|
|
this.doShow(this.$store.state.menuOperation.menuPosition);
|
|
} else {
|
|
this.doClose();
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
clickEvent() {
|
|
const self = this;
|
|
window.onclick = function (e) {
|
|
self.doClose();
|
|
};
|
|
},
|
|
initMenu() {
|
|
this.menuNormal = [];
|
|
this.stationList.forEach(station => {
|
|
if (station.code === station.concentrateStationCode) {
|
|
const node = {
|
|
label: station.name,
|
|
children: []
|
|
};
|
|
|
|
this.stationList.forEach(elem => {
|
|
if (elem.visible) {
|
|
let next = elem;
|
|
while (next.code != next.concentrateStationCode || !next.concentrateStationCode) {
|
|
next = this.$store.getters['map/getDeviceByCode'](next.concentrateStationCode);
|
|
}
|
|
|
|
if (station.code == next.code) {
|
|
node.children.push({
|
|
code: elem.code,
|
|
label: elem.name,
|
|
handler: this.mapLocation
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
this.menuNormal.push(node);
|
|
}
|
|
});
|
|
|
|
if (this.isScreen) {
|
|
this.menu = [...this.menuScreen];
|
|
} else {
|
|
this.menu = [...this.menuNormal];
|
|
}
|
|
},
|
|
doShow(point) {
|
|
this.clickEvent();
|
|
this.initMenu();
|
|
if (this.$refs && this.$refs.popMenu && this.menu && this.menu.length) {
|
|
this.$refs.popMenu.resetShowPosition(point);
|
|
}
|
|
},
|
|
doClose() {
|
|
if (this.$refs && this.$refs.popMenu) {
|
|
this.$refs.popMenu.close();
|
|
}
|
|
},
|
|
// 设置地图定位
|
|
mapLocation(item) {
|
|
if (item) {
|
|
this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: item.code });
|
|
this.doClose();
|
|
}
|
|
},
|
|
// 放大地图
|
|
magnifyMap() {
|
|
this.$store.dispatch('menuOperation/handleMagnifyCount');
|
|
},
|
|
// 缩小地图
|
|
shrinkMap() {
|
|
this.$store.dispatch('menuOperation/handleShrinkCount');
|
|
},
|
|
// 返回
|
|
async back() {
|
|
history.go(-1);
|
|
Notification.closeAll();
|
|
exitFullscreen();
|
|
}
|
|
}
|
|
};
|
|
</script>
|