hb_sis_zhfx/src/components/arcgis/QS_FDC.vue

<template>
	<div style="width: 100%; height: 100%">
		<arcgis class="arcgis-layer" @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap">
			<template v-for="(fan, index) of fans" :key="index" v-slot:[fan.attributes.code]>
				<svg v-if="fan.attributes.code != '升压站'" @click="clickFan(fan.attributes.code)"
					class="can-click esri-component" version="1.1" xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 240" enable-background="new 0 0 200 240"
					xml:space="preserve" width="66" height="66">
					<!-- 底座 -->
					<g>
						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][2]"
							d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
                            c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z" />
					</g>
					<!-- 后面的脑袋 -->
					<g>
						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][0]" d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
                                c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z" />
					</g>
					<!-- 柱 -->
					<g>
						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][0]"
							d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z" />
					</g>
					<!-- 风扇 -->
					<g>
						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][1]"
							d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z" />
						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][1]" d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
                            M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z" />
						<animateTransform v-if="fan.attributes.rotate" attributeName="transform" attributeType="XML"
							type="rotate" from="0 100 82" to="359 100 82" :dur="fan.attributes.dur + 's'"
							repeatCount="indefinite" />
					</g>
					<!-- 前面的尖 -->
					<g>
						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][2]" d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
                            c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z" />
					</g>
					<!-- 文字 -->
					<g>
						<text x="100" y="240" fill="#ffffff" font-size="40" text-anchor="middle"
							alignment-baseline="baseline">
							{{ fan.attributes.code }}
						</text>
					</g>
				</svg>
				<div v-if="fan.attributes.code == '升压站'">
					<div class="syz-img">
						<img :src="syzImg" />
					</div>
					<div class="white font-sm mr-t-8" style="text-align: center">
						{{ fan.attributes.code }}
					</div>
				</div>
			</template>
		</arcgis>
	</div>
</template>

<script>
	import arcgis from "./arcgis.vue";
	import dataService from "@/helper/data.js";

	export default {
		// 名称
		name: "Map",
		// 使用组件
		components: {
			arcgis,
		},
		props: {
			wpId: {
				type: String,
				default: "",
			},
		},
		// 数据
		data() {
			return {
				wpnumMap: {}, //风机监视数量
				wpInfoMap: {}, //风机详情
				fjmap: [], // 风机名
				sourceId: "",
				arcgisData: {
					mode: "2D", // 模式 2D 3D
					title: "宁夏地图", // 标题
					center: [107.217636108398, 37.5134917819943], // 初始中心点 106.230909, 38.487193
					height: 654, // 3D地图初始相机高度
					tilt: 65, // 俯视角
					scale: 55000,
					rotation: -45,
					ox: -600,
					oy: -50,
				},
				showPopup: false,
				mapToolIndex: 0,
				fans: [],
				colors: {
					0: ["#05bb4c", "#4ad476", "#9fedb2"],
					1: ["#4b55ae", "#959dc7", "#d3d6e0"],
					2: ["#BA3237", "#d4807d", "#eddad8"],
					3: ["#606769", "#757575", "#AFAFAF"],
					4: ["#e17e23", "#fabf78", "#ffebcc"],
					5: ["#c531c7", "#e080dc", "#fadef7"],
					6: ["#c531c7", "#e080dc", "#fadef7"],
				},
				syzImg: require("@assets/png/booster-station.png"),
			};
		},
		created() {
			let that = this;
			that.sourceId = this.wpId;
			that.$nextTick(() => {
				that.requestData();
			});
		},
		// 函数
		methods: {
			select(res) {
				this.$router.replace({
					path: `/monitor/windsite/map/${res.code}`,
				});
			},
			// 风机状态监视
			requestData() {
				let that = this;
				that.API.requestData({
					method: "POST",
					subUrl: "monitor/findGeneralAppearance",
					data: {
						wpId: that.wpId,
					},
					success(res) {
						if (res.code == 200) {
							that.wpnumMap = res.data.fczbmap.jczbmap;
							that.wpInfoMap = res.data.wxssmap;
							that.fjmap = res.data.fjmap[0];
							that.when();
						}
					},
				});
			},
			when: function() {
				let jsonObj = dataService.get("arcgis-qs");
				this.fans = jsonObj;
				jsonObj.forEach((item) => {
					let obj = this.fjmap.find((t) => {
						let wtid = t.wtId.replace("01_", "");
						if (wtid == item.attributes.code) return t;
					});
					if (obj) {
						item.attributes.state = String(obj.fjzt);
					} else {
						item.attributes.state = "4";
					}
					switch (item.attributes.state) {
						case "0": //待机
							item.attributes.rotate = false; // 转
							item.attributes.dur = 8; // 转一圈时间
							break;
						case "1": //运行
							item.attributes.rotate = true; // 转
							item.attributes.dur = 2; // 转一圈时间
							break;
						case "2": //故障
							item.attributes.rotate = false; // 不转
							item.attributes.dur = 8;
							break;
						case "3": //中断
							item.attributes.rotate = false; // 不转
							item.attributes.dur = 8;
							break;
						case "4": //维护
							item.attributes.rotate = false; // 不转
							item.attributes.dur = 8;
							break;
						case "5": //限电
							item.attributes.rotate = true; // 转
							item.attributes.dur = 6;
							break;
						case "6": //停机
							item.attributes.rotate = false; // 不转
							item.attributes.dur = 8;
							break;
						default:
							item.attributes.rotate = false;
							item.attributes.dur = 8;
							break;
					}
					this.$refs.arcgis.addHtmlPoint(
						[item.geometry.x, item.geometry.y],
						item.attributes.code,
						33,
						50,
						false
					);
				});
				let lineJsonObj = dataService.get("arcgis-qs-line");
				this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
			},
			clickMap: function(info) {
				console.log(info);
			},
			clickFan: function(code) {
				let wtId = code.replace("G", "G01_");
				this.$router.push(`/monitor/windsite/info/${this.wpId}/${wtId}`);
			},
			popupBack: function() {
				this.showPopup = false;
			},
			clickMapTool: function(index) {
				//   this.mapToolIndex = index;
				this.showPopup = !this.showPopup;
			},
		},
		watch: {
			wpId(res) {
				this.sourceId = res;
				if (res) {
					this.requestData();
				}
			},
		},
	};
</script>

<style lang="less" scoped>
	@titleHeight: 40px;

	.map-1 {
		width: 100%;
		height: calc(100vh - 90px);
		display: flex;
		flex-direction: column;

		.btn-group-tabs {
			display: flex;
			flex-direction: row;
		}

		.can-click {
			cursor: pointer;
		}

		.syz-img {
			width: 65px;
			height: 47px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.panel-title {
			width: 100%;
			background-color: fade(@darkgray, 40%);
			margin-top: 16px;
			padding: 6px;
			display: flex;
			align-items: center;

			.panel-title-name {
				color: @green;
				display: flex;
				align-items: center;
				line-height: 0;
				font-size: 0;

				i,
				span {
					margin: 0 0 0 16px;
					line-height: 0;
					font-size: 13px;
				}
			}

			.sub-title-item {
				display: flex;
				align-items: center;
				margin-left: 16px;

				.sub-title {
					font-size: 13px;
					margin-left: 6px;
				}

				.sub-count {
					font-size: 13px;
					font-weight: 500;
				}

				img {
					height: 31px;
				}
			}
		}

		.panel-body {
			flex-grow: 1;
			background-color: fade(@darkgray, 20%);
			padding: 8px;
			overflow: auto;
			position: relative;

			.arcgis-layer {
				z-index: 1;
			}

			.map-popup-panel {
				width: 760px;
				position: absolute;
				left: 71px;
				top: 22px;
				z-index: 2;

				.map-popup-panel-header {
					width: 100%;
					background: fade(#152221, 90%);
					display: flex;

					.map-popup-panel-title {
						padding: 17px 24px;
						font-size: @fontsize-s;
						position: relative;

						&::before,
						&::after {
							position: absolute;
							width: calc(50% - 6px);
							bottom: 0;
							border-bottom: 2px solid @green;
						}

						&::before {
							content: "";
							left: 0;
						}

						&::after {
							content: "";
							right: 0;
						}

						span {
							position: absolute;
							width: 11.3px;
							height: 11.3px;
							border-left: 2px solid @green;
							border-top: 2px solid @green;
							left: calc(50% - 5.65px);
							bottom: -3px;
							transform: rotate(45deg);
						}
					}

					.map-popup-panel-date {
						flex-grow: 1;
						padding: 17px 24px;
						font-size: @fontsize-s;
						text-align: right;
						border-bottom: 2px solid @green;
					}

					.map-popup-panel-back {
						margin-left: auto;
						width: 54px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						cursor: pointer;

						&::after {
							content: "";
							position: absolute;
							left: 0;
							height: 50%;
							border-left: 1px solid @gray;
							top: 25%;
						}
					}
				}

				.map-popup-panel-body {
					background: fade(#152221, 75%);
					border: 1px solid fade(@darkgray, 40);
					border-top: 0px;

					.table-form {

						.text,
						.unit {
							font-weight: 400;
						}

						.unit {
							min-width: auto;
						}

						.value,
						.unit {
							text-align: left;
						}
					}
				}
			}

			.map-tool {
				position: absolute;
				right: 22px;
				top: 22px;
				z-index: 2;
				background: #152221af;
				padding: 18px 14px;

				.m-btn {
					width: 124px;
					height: 44px;
					background: #152221bf;
					border: 1px solid #152221bf;
					color: #ffffff;
					transition: all 0.3s;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;

					&:hover,
					&.active {
						background: #05bb4c33;
						border: 1px solid #05bb4c;
						color: #05bb4c;
					}

					+.m-btn {
						margin-top: 16px;
					}
				}
			}
		}
	}
</style>