sis_zhfx/src/views/WindSite/pages/Info/StandAloneImg.vue

<template>
	<svg class="stand-alone-img" viewBox="0 0 1570 1070" version="1.1" xmlns="http://www.w3.org/2000/svg"
		xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" :width="svgWidth" :height="svgHeight">
		<defs>
			<!-- 变桨 -->
			<path class="stand-alone-img-path" id="pitch" fill="#BA3237" opacity="0.6" stroke="#05BB4C" stroke-width="6"
				d="M27.62,60.304l160.03,48.361l3.518,29.016L3,84.044c0,0,2.227-9.026,8.605-15.174C17.522,63.166,27.62,60.304,27.62,60.304z" />
			<!-- 机舱 -->
			<path class="stand-alone-img-path" id="engine-room" fill="#BA3237" opacity="0.6" stroke="#05BB4C"
				stroke-width="6"
				d="M295.172,87.062c-3.13-13.486-14.851-16.73-14.851-16.73L-468.878-79.698l-16.143-12.344l-63.62-24.688l-11.395,5.697l-126.291-47.478c0,0-35.843,9.664-58.729,35.366c-35.833,40.244-64.713,103.269-64.713,103.269l-0.949,24.688L79.016,185.228c0,0,12.043,3.038,24.665,4.067c10.436,0.853,21.862-0.27,21.862-0.27l167.122-65.519C292.665,123.507,298.214,100.157,295.172,87.062z" />
			<!-- 齿轮箱 -->
			<path class="stand-alone-img-path" id="gear-box" fill="#BA3237" opacity="0.6" stroke="#05BB4C"
				stroke-width="6"
				d="M177.396,18.822L86.052,2.504L11.984,177.197l88.787,16.317l43.275-98.657l31.637,6.959l4.997-19.08l-27.789-6.13L177.396,18.822z" />
			<!-- 发电机 -->
			<path class="stand-alone-img-path" id="alternator" fill="#BA3237" opacity="0.6" stroke="#05BB4C"
				stroke-width="6"
				d="M14.016,175.068L118.433,198.6l30.883-99.516l18.095-54.753l12.79-13.878L39.996,2.021L22.838,55.454L14.016,175.068z" />
			<!-- 偏航 -->
			<path class="stand-alone-img-path" id="yaw" fill="#BA3237" opacity="0.6" stroke="#05BB4C" stroke-width="6"
				d="M210.152,130.465l-68.025-12.017c0,0-75.83,0.199-135.799-12.484c-67.41-14.257-97.892-41.659-97.892-41.659s-11.844,12.318,2.256,25.502c20.491,19.159,98.496,43.978,176.047,51.625c97.358,9.599,181.853,1.301,181.853,1.301l1.241-10.201L210.152,130.465z" />
			<!-- 液压 -->
			<path class="stand-alone-img-path" id="hydraulic-pressure" fill="#BA3237" opacity="0.6" stroke="#05BB4C"
				stroke-width="6"
				d="M82.965,111.483l7.241-72.311l-56.954-8.682L3,181.489l44.656,0.79c0.946,1.133,82.424,16.771,82.424,16.771l7.024-83.744L82.965,111.483z" />
			<!-- 圆圈圈 -->
			<g id="stand-alone-circle-bj">
				<circle :class="{
                        'stand-alone-circle1': StandAloneCircle1 && hover == 3,
                    }" cx="0" cy="0" r="10" fill="#edbf03" />
				<circle :class="{
                        'stand-alone-circle2': StandAloneCircle2 && hover == 3,
                    }" cx="0" cy="0" r="20" fill="none" stroke="#edbf03" stroke-width="2" />
				<circle :class="{
                        'stand-alone-circle3': StandAloneCircle3 && hover == 3,
                    }" cx="0" cy="0" r="30" fill="none" stroke="#edbf03" stroke-width="1" />
				<circle :class="{
                        'stand-alone-circle4': StandAloneCircle4 && hover == 3,
                    }" cx="0" cy="0" r="45" fill="none" stroke="#edbf03" stroke-width="1" />
			</g>
			<g id="stand-alone-circle-jc">
				<circle :class="{
                        'stand-alone-circle1': StandAloneCircle1 && hover == 6,
                    }" cx="0" cy="0" r="10" fill="#edbf03" />
				<circle :class="{
                        'stand-alone-circle2': StandAloneCircle2 && hover == 6,
                    }" cx="0" cy="0" r="20" fill="none" stroke="#edbf03" stroke-width="2" />
				<circle :class="{
                        'stand-alone-circle3': StandAloneCircle3 && hover == 6,
                    }" cx="0" cy="0" r="30" fill="none" stroke="#edbf03" stroke-width="1" />
				<circle :class="{
                        'stand-alone-circle4': StandAloneCircle4 && hover == 6,
                    }" cx="0" cy="0" r="45" fill="none" stroke="#edbf03" stroke-width="1" />
			</g>
			<g id="stand-alone-circle-clx">
				<circle :class="{
                        'stand-alone-circle1': StandAloneCircle1 && hover == 2,
                    }" cx="0" cy="0" r="10" fill="#edbf03" />
				<circle :class="{
                        'stand-alone-circle2': StandAloneCircle2 && hover == 2,
                    }" cx="0" cy="0" r="20" fill="none" stroke="#edbf03" stroke-width="2" />
				<circle :class="{
                        'stand-alone-circle3': StandAloneCircle3 && hover == 2,
                    }" cx="0" cy="0" r="30" fill="none" stroke="#edbf03" stroke-width="1" />
				<circle :class="{
                        'stand-alone-circle4': StandAloneCircle4 && hover == 2,
                    }" cx="0" cy="0" r="45" fill="none" stroke="#edbf03" stroke-width="1" />
			</g>
			<g id="stand-alone-circle-fdj">
				<circle :class="{
                        'stand-alone-circle1': StandAloneCircle1 && hover == 1,
                    }" cx="0" cy="0" r="10" fill="#edbf03" />
				<circle :class="{
                        'stand-alone-circle2': StandAloneCircle2 && hover == 1,
                    }" cx="0" cy="0" r="20" fill="none" stroke="#edbf03" stroke-width="2" />
				<circle :class="{
                        'stand-alone-circle3': StandAloneCircle3 && hover == 1,
                    }" cx="0" cy="0" r="30" fill="none" stroke="#edbf03" stroke-width="1" />
				<circle :class="{
                        'stand-alone-circle4': StandAloneCircle4 && hover == 1,
                    }" cx="0" cy="0" r="45" fill="none" stroke="#edbf03" stroke-width="1" />
			</g>
			<g id="stand-alone-circle-ph">
				<circle :class="{
                        'stand-alone-circle1': StandAloneCircle1 && hover == 4,
                    }" cx="0" cy="0" r="10" fill="#edbf03" />
				<circle :class="{
                        'stand-alone-circle2': StandAloneCircle2 && hover == 4,
                    }" cx="0" cy="0" r="20" fill="none" stroke="#edbf03" stroke-width="2" />
				<circle :class="{
                        'stand-alone-circle3': StandAloneCircle3 && hover == 4,
                    }" cx="0" cy="0" r="30" fill="none" stroke="#edbf03" stroke-width="1" />
				<circle :class="{
                        'stand-alone-circle4': StandAloneCircle4 && hover == 4,
                    }" cx="0" cy="0" r="45" fill="none" stroke="#edbf03" stroke-width="1" />
			</g>
			<g id="stand-alone-circle-yy">
				<circle :class="{
                        'stand-alone-circle1': StandAloneCircle1 && hover == 5,
                    }" cx="0" cy="0" r="10" fill="#edbf03" />
				<circle :class="{
                        'stand-alone-circle2': StandAloneCircle2 && hover == 5,
                    }" cx="0" cy="0" r="20" fill="none" stroke="#edbf03" stroke-width="2" />
				<circle :class="{
                        'stand-alone-circle3': StandAloneCircle3 && hover == 5,
                    }" cx="0" cy="0" r="30" fill="none" stroke="#edbf03" stroke-width="1" />
				<circle :class="{
                        'stand-alone-circle4': StandAloneCircle4 && hover == 5,
                    }" cx="0" cy="0" r="45" fill="none" stroke="#edbf03" stroke-width="1" />
			</g>
		</defs>
		<!-- 背景图片 -->
		<image x="0" y="90" height="787" width="1570" v-show='$store.state.themeName === "dark"' href="./standAloneImg-green.png" />
		<image x="0" y="90" height="787" width="1570" v-show='$store.state.themeName === "light"' href="./standAloneImg-white.png" />
		<!-- 变桨 -->
		<g class="stand-alone-img-g" :class="{ active: activeIndex == 3 }" @mouseover="mouseover(3)"
			@mouseout="mouseout" @click="click(3)">
			<use class="stand-alone-img-item" xlink:href="#pitch" x="214" y="110"
				transform="translate(110, 190) scale(0.7)" />
			<use class="stand-alone-img-item-circle" xlink:href="#stand-alone-circle-bj" x="320" y="330" />
			<line :class="{ 'stand-alone-line': line && hover == 3 }" x1="320" y1="330" x2="620" y2="30"
				stroke="#edbf03" stroke-width="2" />
			<circle :class="{ 'stand-alone-circle': circle && hover == 3 }" cx="620" cy="30" r="5" fill="#edbf03" />
			<text :class="{ 'stand-alone-text': text && hover == 3 }" x="630" y="30" fill="#36348e" font-size="24">
				变桨
			</text>
		</g>
		<!-- 机舱 -->
		<g class="stand-alone-img-g" :class="{ active: activeIndex == 6 }" @mouseover="mouseover(6)"
			@mouseout="mouseout" @click="click(6)">
			<use class="stand-alone-img-item" xlink:href="#engine-room" x="1270" y="395" />
			<use class="stand-alone-img-item-circle" xlink:href="#stand-alone-circle-jc" x="750" y="380" />
			<line :class="{ 'stand-alone-line': line && hover == 6 }" x1="750" y1="380" x2="1050" y2="80"
				stroke="#edbf03" stroke-width="2" />
			<circle :class="{ 'stand-alone-circle': circle && hover == 6 }" cx="1050" cy="80" r="5" fill="#edbf03" />
			<text :class="{ 'stand-alone-text': text && hover == 6 }" x="1060" y="80" fill="#36348e" font-size="24">
				机舱
			</text>
		</g>
		<!-- 齿轮箱 -->
		<g class="stand-alone-img-g" :class="{ active: activeIndex == 2 }" @mouseover="mouseover(2)"
			@mouseout="mouseout" @click="click(2)">
			<use class="stand-alone-img-item" xlink:href="#gear-box" x="730" y="335"
				transform="translate(220, 280) scale(0.7)" />
			<use class="stand-alone-img-item-circle" xlink:href="#stand-alone-circle-clx" x="800" y="550" />
			<line :class="{ 'stand-alone-line': line && hover == 2 }" x1="800" y1="550" x2="1100" y2="250"
				stroke="#edbf03" stroke-width="2" />
			<circle :class="{ 'stand-alone-circle': circle && hover == 2 }" cx="1100" cy="250" r="5" fill="#edbf03" />
			<text :class="{ 'stand-alone-text': text && hover == 2 }" x="1110" y="250" fill="#36348e" font-size="24">
				齿轮箱
			</text>
		</g>
		<!-- 发电机 -->
		<g class="stand-alone-img-g" :class="{ active: activeIndex == 1 }" @mouseover="mouseover(1)"
			@mouseout="mouseout" @click="click(1)">
			<use class="stand-alone-img-item" xlink:href="#alternator" x="900" y="385"
				transform="translate(300, 260) scale(0.7)" />
			<use class="stand-alone-img-item-circle" xlink:href="#stand-alone-circle-fdj" x="990" y="580" />
			<line :class="{ 'stand-alone-line': line && hover == 1 }" x1="990" y1="580" x2="1290" y2="880"
				stroke="#edbf03" stroke-width="2" />
			<circle :class="{ 'stand-alone-circle': circle && hover == 1 }" cx="1290" cy="880" r="5" fill="#edbf03" />
			<text :class="{ 'stand-alone-text': text && hover == 1 }" x="1300" y="920" fill="#36348e" font-size="24">
				发电机
			</text>
		</g>
		<!-- 偏航 -->
		<g class="stand-alone-img-g" :class="{ active: activeIndex == 4 }" @mouseover="mouseover(4)"
			@mouseout="mouseout" @click="click(4)">
			<use class="stand-alone-img-item" xlink:href="#yaw" x="675" y="645" />
			<use class="stand-alone-img-item-circle" xlink:href="#stand-alone-circle-ph" x="650" y="750" />
			<line :class="{ 'stand-alone-line': line && hover == 4 }" x1="650" y1="750" x2="950" y2="1050"
				stroke="#edbf03" stroke-width="2" />
			<circle :class="{ 'stand-alone-circle': circle && hover == 4 }" cx="950" cy="1050" r="5" fill="#edbf03" />
			<text :class="{ 'stand-alone-text': text && hover == 4 }" x="960" y="1050" fill="#36348e" font-size="24">
				偏航
			</text>
		</g>
		<!-- 液压 -->
		<g class="stand-alone-img-g" :class="{ active: activeIndex == 5 }" @mouseover="mouseover(5)"
			@mouseout="mouseout" @click="click(5)">
			<use class="stand-alone-img-item" xlink:href="#hydraulic-pressure" x="775" y="455"
				transform="translate(260, 310) scale(0.7)" />
			<use class="stand-alone-img-item-circle" xlink:href="#stand-alone-circle-yy" x="850" y="730" />
			<line :class="{ 'stand-alone-line': line && hover == 5 }" x1="850" y1="730" x2="1150" y2="1030"
				stroke="#edbf03" stroke-width="2" />
			<circle :class="{ 'stand-alone-circle': circle && hover == 5 }" cx="1150" cy="1030" r="5" fill="#edbf03" />
			<text :class="{ 'stand-alone-text': text && hover == 5 }" x="1160" y="1030" fill="#36348e" font-size="24">
				液压
			</text>
		</g>
	</svg>
</template>

<script>
	export default {
		// 名称
		name: "StandAloneImg",
		// 使用组件
		components: {},
		// 数据
		data() {
			return {
				StandAloneCircle1: false,
				StandAloneCircle2: false,
				StandAloneCircle3: false,
				StandAloneCircle4: false,
				line: false,
				circle: false,
				text: false,
				hover: 0,
				svgWidth: 157,
				svgHeight: 107,
			};
		},
		props: {
			activeIndex: {
				type: Number,
				default: 0,
			},
		},
		emits: {
			// 选中事件
			selectSvg: null,
		},
		// 函数
		methods: {
			mouseover: function(hIndex) {
				this.StandAloneCircle1 = false;
				this.StandAloneCircle2 = false;
				this.StandAloneCircle3 = false;
				this.StandAloneCircle4 = false;
				this.line = false;
				this.circle = false;
				this.text = false;
				this.StandAloneCircle1 = true;
				this.StandAloneCircle2 = true;
				this.StandAloneCircle3 = true;
				this.StandAloneCircle4 = true;
				this.line = true;
				this.circle = true;
				this.text = true;
				// this.hover = hIndex;
				this.hover = this.activeIndex;
			},
			mouseout: function() {
				this.StandAloneCircle1 = false;
				this.StandAloneCircle2 = false;
				this.StandAloneCircle3 = false;
				this.StandAloneCircle4 = false;
				this.line = false;
				this.circle = false;
				this.text = false;
				this.hover = 0;
			},
			click: function(index) {
				this.$emit("selectSvg", index);
			},
		},
		// 生命周期钩子
		beforeCreate() {
			// 创建前
		},
		created() {
			// 创建后
		},
		beforeMount() {
			// 渲染前
		},
		mounted() {
			// 渲染后
			let isShow = setInterval(() => {
				if (this.$el.style.display != 'none') {
					if (this.$el.scrollWidth == this.svgWidth) {
						let height = (this.$el.scrollHeight).toFixed(0);
						let width = (height / this.svgHeight * this.svgWidth).toFixed(0);
						this.svgWidth = width;
						this.svgHeight = height;
						clearInterval(isShow);
					} else {
						let width = (this.$el.scrollWidth).toFixed(0);
						let height = (width / this.svgWidth * this.svgHeight).toFixed(0);
						this.svgWidth = width;
						this.svgHeight = height;
						clearInterval(isShow);
					}
				}
			}, 200);
		},
		beforeUpdate() {
			// 数据更新前
		},
		updated() {
			// 数据更新后
		},
		watch: {
		},
	};
</script>

<style lang="less" scoped>
	.stand-alone-img {
		.stand-alone-img-path {
			-webkit-filter: drop-shadow(0 0 5px @green);
		}

		.stand-alone-img-g {
			.stand-alone-img-item {
				opacity: 0;
				cursor: pointer;
				transition: all 0.3s;
			}

			.stand-alone-img-item-circle,
			line,
			circle,
			text {
				opacity: 0;
			}

			text {
				display: none;
			}

			&:hover,
			&.active {

				.stand-alone-img-item,
				.stand-alone-img-item-circle,
				line,
				circle,
				text {
					opacity: 1;
				}

				text {
					display: block;
				}
			}
		}

		.stand-alone-circle1 {
			animation: StandAloneCircle1 0.1s linear;
		}

		.stand-alone-circle2 {
			animation: StandAloneCircle2 0.2s linear;
		}

		.stand-alone-circle3 {
			animation: StandAloneCircle3 0.3s linear;
		}

		.stand-alone-circle4 {
			animation: StandAloneCircle4 0.45s linear;
		}

		.stand-alone-line {
			stroke-dasharray: 430, 450;
			animation: line 0.45s linear;
		}

		.stand-alone-circle {
			animation: circle 0.5s linear;
		}

		.stand-alone-text {
			animation: text 0.5s linear;
		}
	}

	@keyframes line {
		from {
			stroke-dashoffset: 430;
		}

		to {
			stroke-dashoffset: 0;
		}
	}

	@keyframes circle {
		0% {
			r: 0;
		}

		90% {
			r: 0;
		}

		100% {
			r: 5;
		}
	}

	@keyframes text {
		0% {
			opacity: 0;
		}

		90% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes StandAloneCircle1 {
		from {
			r: 0;
		}

		to {
			r: 10;
		}
	}

	@keyframes StandAloneCircle2 {
		from {
			r: 0;
		}

		to {
			r: 20;
		}
	}

	@keyframes StandAloneCircle3 {
		from {
			r: 0;
		}

		to {
			r: 30;
		}
	}

	@keyframes StandAloneCircle4 {
		from {
			r: 0;
		}

		to {
			r: 45;
		}
	}
</style>