rt-sim-training-client/src/jmap/theme/fuzhou_01/menus/menuCancel.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>