hb_sis_zhfx/src/views/WindSite/WindSite.vue

<template>
	<div class="wind-site">
		<div class="page-common-body">
			<div class="page-common-body-router">
				<router-view />
			</div>
			<div class="page-common-body-menu">
				<div class="page-common-body-menu-box">
					<div class="page-common-body-menu-border left top"></div>
					<div class="page-common-body-menu-border left bottom"></div>
					<div class="page-common-body-menu-border right top"></div>
					<div class="page-common-body-menu-border right bottom"></div>
					<router-link v-for="(menuData, index) of menuDatas" :key="index" :to="menuData.path">
						<div class="page-common-body-menu-item" @click="clickMenu(index)"
							:class="{ active: activeIndex == index }">
							<span class="svg-icon" :class="activeIndex == index ? 'svg-icon-yellow' : 'svg-icon-green'">
								<SvgIcon :svgid="menuData.icon"></SvgIcon>
							</span>
						</div>
					</router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import SvgIcon from "@com/coms/icon/svg-icon.vue";
	import $ from "jquery";
	export default {
		// 名称
		name: "WindSite",
		// 使用组件
		components: {
			SvgIcon,
		},
		// 数据
		data() {
			return {
				windsitePath: '',
				activeIndex: 0,
				menuDatas: [{
						icon: "svg-s场站监视",
						path: "/monitor/windsite/home",
					},
					{
						icon: "svg-s总貌",
						path: "/monitor/windsite/generalappearance",
					},
					{
						icon: "svg-s升压站",
						path: "/monitor/windsite/boosterstation",
					},
					{
						icon: "svg-matrix",
						path: "/monitor/windsite/matrix",
					},
					{
						icon: "svg-s测风塔",
						path: "/monitor/windsite/tower",
					},
					{
						icon: "svg-s地图",
						path: "/monitor/windsite/map",
					},
					{
						icon: "svg-s指标列表",
						path: "/monitor/windsite/draughtfanlist",
					},
					{
						icon: "svg-wind-site",
						path: this.windsitePath,
					},
				],
			};
		},
		// 函数
		methods: {
			jumpUrl() {
				var p = this.$route.path.split('/');
				var pData = p[p.length - 1].split('_');
				var fdjData = pData[0].substr(0,1);
				var wpId = p[p.length - 1];
				if (wpId.indexOf("FDC") !== -1) {
					this.windsitePath = `/monitor/windsite/info/${wpId}/${fdjData[0] + 'G01_01'}`
				} else {
					this.windsitePath = `../../windsite/inverter-info/${wpId}/${pData[0] + '01_01'}`
				}
			},
			clickMenu: function(index) {
				if (index == 7) { //风场
					this.jumpUrl();
					this.menu(index);
					$('.page-common-body-menu-box a').eq(7).hide();
				}else{
					$('.page-common-body-menu-box a').eq(7).show();
				}
				this.activeIndex = index;
			},
			menu(index) {
				if(index){
					this.menuDatas[index].path = this.windsitePath;
				}else{
					this.menuDatas.forEach((ele) => {
						if (ele.icon == 'svg-wind-site') {
							ele.path = this.windsitePath
						} else {
							ele.path = ele.path + "/" + this.$route.params.wpId;
						}
					});
				}
			}
		},
		created() {
			this.jumpUrl();
			this.menu();
		},
	};
</script>

<style lang="less" scoped>
	.wind-site {
		.page-common-body {
			display: flex;
			flex-direction: row;
			margin-top: 0.741vh;

			.page-common-body-router {
				overflow: auto;
				overflow-x: hidden;
				height: calc(100vh - 7.037vh);
				flex: 1 1 auto;
			}

			.page-common-body-menu {
				width: 7.407vh;
				padding: 0 1.481vh 1.481vh 1.481vh;

				.page-common-body-menu-box {
					border: 0.093vh solid @darkgray;
					background-color: fade(@darkgray, 30%);
					padding: 2.222vh 0.185vh;
					position: relative;

					.page-common-body-menu-border {
						position: absolute;
						width: 0.37vh;
						height: 0.37vh;
						background-color: @write;
						border-radius: 50%;

						&.left {
							left: -0.185vh;
						}

						&.right {
							right: -0.185vh;
						}

						&.top {
							top: -0.185vh;
						}

						&.bottom {
							bottom: -0.185vh;
						}
					}

					.page-common-body-menu-item {
						border: 0.093vh solid fade(@green, 40%);
						width: 3.889vh;
						height: 3.889vh;
						border-radius: 0.278vh;
						margin-top: 0.741vh;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;

						a {
							line-height: 0;
						}

						// &:first-child {
						//   margin-top: 0;
						// }

						&.active {
							border-color: fade(@yellow, 40%);
							position: relative;

							&::after {
								content: "";
								width: calc(100% - 0.37vh);
								height: calc(100% - 0.37vh);
								position: absolute;
								border: 0.093vh solid @yellow;
								box-shadow: 0 0 0.37vh @yellow;
								top: 0.093vh;
								left: 0.093vh;
							}
						}
					}
				}
			}
		}
	}
</style>