Merge branch 'ZHNY_WW' into ZHNY_DCF

src/components/jt-popup/jt-popup2.vue

@@ -0,0 +1,512 @@
+<template>
+	<!-- 弹出框组件 -->
+	<div :class="['popup-main',animationClass]" v-drag v-show="isshow" :isEmit="isEmit" id="popup" :style="{height:height,width:width}">
+		<!-- <div class="borderstyle" :style="{height:height}">
+			<div class="angle-border-blue left-top-border"></div>
+			<div class="angle-border-blue right-top-border"></div>
+			<div class="angle-border left-bottom-border"></div>
+			<div class="angle-border right-bottom-border"></div>
+			
+		</div> -->
+		<div class="header">
+			<div style="width: 41rem;"></div>
+			<span>{{title}}</span>
+			<!-- <i class='iconfont icon-chahao' @click="closebasicLayer" /> -->
+		</div>
+		<div class="middle">
+			<slot></slot>
+		</div>
+		<div class="footers"></div>
+	</div>
+	<div :class="['popup-main2',animationClass]" v-drag v-show="isshow" :isEmit="isEmit" id="popup" :style="{height:height,width:width}">
+		<!-- <div class="borderstyle" :style="{height:height}">
+			<div class="angle-border-blue left-top-border"></div>
+			<div class="angle-border-blue right-top-border"></div>
+			<div class="angle-border left-bottom-border"></div>
+			<div class="angle-border right-bottom-border"></div>
+			
+		</div> -->
+		<div class="header2">
+			<div style="width: 41rem;"></div>
+			<span>设备运行检测</span>
+			<!-- <i class='iconfont icon-chahao' @click="closebasicLayer" /> -->
+		</div>
+		<div class="middle2">
+			<slot></slot>
+		</div>
+		<div class="footers2"></div>
+	</div>
+	<div :class="['popup-main3',animationClass]" v-drag v-show="isshow" :isEmit="isEmit" id="popup" :style="{height:height,width:width}">
+		<!-- <div class="borderstyle" :style="{height:height}">
+			<div class="angle-border-blue left-top-border"></div>
+			<div class="angle-border-blue right-top-border"></div>
+			<div class="angle-border left-bottom-border"></div>
+			<div class="angle-border right-bottom-border"></div>
+			
+		</div> -->
+		<div class="header3">
+			<div style="width: 41rem;"></div>
+			<span>区域能耗占比</span>
+			<!-- <i class='iconfont icon-chahao' @click="closebasicLayer" /> -->
+		</div>
+		<div class="middle3">
+			<slot></slot>
+		</div>
+		<div class="footers3"></div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				isshow: true,
+				title: '',
+			}
+		},
+		// watch: {
+		// 	isshow(newVal, oldVal) {
+		// 		if (newVal) {
+		// 			let popup = document.getElementById('popup')
+		// 			popup.style.left = '0rem'
+		// 			popup.style.right = '10rem'
+		// 		}
+		// 	}
+
+		// },
+		props: ['height', 'title', 'width', 'isEmit', 'animationClass'],
+		methods: {
+			closebasicLayer() {
+				this.isshow = true
+				if (this.isEmit) {
+					this.$emit('closeJTPopup');
+				}
+			}
+		},
+		mounted() {}
+	}
+</script>
+
+<style scoped lang="scss">
+	.popup-main {
+		position: absolute;
+		// right: 40rem;
+		top: 70rem;
+		// height: 490rem;
+		height: calc((100% - 95rem)/3);
+		width: 350rem;
+		// padding: 10rem;
+		background-color: rgba(0, 45, 66, 0.5);
+		z-index: 1000;
+		font-size: 16rem;
+		color: white;
+		user-select: none;
+		animation-name: slide-right;
+		animation-duration: .8s;
+
+		//头部背景图
+		.header {
+			height: 41rem;
+			width: calc(100% + 20rem);
+			background: url('@/assets/images/300x30小标题.png') no-repeat;
+			background-size: 100%;
+			margin: -10rem;
+			margin-bottom: 0rem;
+			line-height: 41rem;
+			display: flex;
+			text-align: center;
+
+
+			span {
+				// flex: 15;
+				font-weight: bold;
+			}
+
+			i {
+				z-index: 101;
+				flex: 1;
+				margin: 0rem 8rem;
+				font-size: 20rem;
+			}
+		}
+
+		//滚动条-鼠标悬浮显示
+		// .middle {
+		// 	height: calc(100% - 71rem);
+		// 	width: 100%;
+		// 	overflow-y: hidden;
+		// 	padding: 15rem 0 0 0;
+		// }
+
+		// .middle:hover{
+		// 	overflow-y:auto;
+		// }
+
+		//滚动条一直显示
+		.middle {
+			height: calc(100% - 71rem);
+			width: 100%;
+			overflow-y: auto;
+			padding: 15rem 0 0 0;
+		}
+
+		.footers {
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			height: 30rem;
+			width: 100%;
+			line-height: 30rem;
+			background: url('@/assets/images/footerss.webp') no-repeat center;
+			opacity: 0.7;
+		}
+
+
+		/* 四个边角样式 */
+		.borderstyle {
+			position: relative;
+			width: 100%;
+			// height: 490rem;
+			height: calc(100% - 30rem);
+			padding: 10rem;
+			border: 1rem solid #008aff70 !important;
+			background-color: rgba(5, 45, 115, 0.7) !important;
+			box-shadow: 0 4rem 15rem 1rem #02213bb3;
+
+
+
+			.angle-border {
+				position: absolute;
+				width: 12rem;
+				height: 12rem;
+			}
+
+			.angle-border-blue {
+				position: absolute;
+				width: 70rem;
+				height: 30rem;
+			}
+
+			.left-top-border {
+				top: -2rem;
+				left: -2rem;
+				border-left: 2rem solid #008affdd;
+				border-top: 2rem solid #008affdd;
+			}
+
+			.right-top-border {
+				top: -2rem;
+				right: -2rem;
+				border-right: 2rem solid #008affdd;
+				border-top: 2rem solid #008affdd;
+			}
+
+			.left-bottom-border {
+				bottom: -2rem;
+				left: -2rem;
+				border-bottom: 2rem solid #FFFFFF;
+				border-left: 2rem solid #FFFFFF;
+			}
+
+			.right-bottom-border {
+				bottom: -2rem;
+				right: -2rem;
+				border-right: 2rem solid #FFFFFF;
+				border-bottom: 2rem solid #FFFFFF;
+			}
+		}
+	}
+	
+	.popup-main2 {
+		position: absolute;
+		// right: 1rem;
+		top: calc(calc(100% - 95rem) / 3 + 70rem);
+		// height: 490rem;
+		height: calc((100% - 95rem) / 3);
+		width: 350rem;
+		// padding: 10rem;
+		background-color: rgba(0, 45, 66, 0.5);
+		z-index: 1000;
+		font-size: 16rem;
+		color: white;
+		user-select: none;
+		animation-name: slide-right;
+		animation-duration: .8s;
+	
+		//头部背景图
+		.header2 {
+			height: 41rem;
+			width: calc(100% + 20rem);
+			background: url('@/assets/images/300x30小标题.png') no-repeat;
+			background-size: 100%;
+			margin: -10rem;
+			margin-bottom: 0rem;
+			line-height: 41rem;
+			display: flex;
+			text-align: center;
+	
+	
+			span {
+				// flex: 15;
+				font-weight: bold;
+			}
+	
+			i {
+				z-index: 101;
+				flex: 1;
+				margin: 0rem 8rem;
+				font-size: 20rem;
+			}
+		}
+	
+		//滚动条-鼠标悬浮显示
+		// .middle {
+		// 	height: calc(100% - 71rem);
+		// 	width: 100%;
+		// 	overflow-y: hidden;
+		// 	padding: 15rem 0 0 0;
+		// }
+	
+		// .middle:hover{
+		// 	overflow-y:auto;
+		// }
+	
+		//滚动条一直显示
+		.middle2 {
+			height: calc(100% - 71rem);
+			width: 100%;
+			overflow-y: auto;
+			padding: 15rem 0 0 0;
+		}
+	
+		.footers2 {
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			height: 30rem;
+			width: 100%;
+			line-height: 30rem;
+			background: url('@/assets/images/footerss.webp') no-repeat center;
+			opacity: 0.7;
+		}
+	
+	
+		/* 四个边角样式 */
+		.borderstyle {
+			position: relative;
+			width: 100%;
+			// height: 490rem;
+			height: calc(100% - 30rem);
+			padding: 10rem;
+			border: 1rem solid #008aff70 !important;
+			background-color: rgba(5, 45, 115, 0.7) !important;
+			box-shadow: 0 4rem 15rem 1rem #02213bb3;
+	
+	
+	
+			.angle-border {
+				position: absolute;
+				width: 12rem;
+				height: 12rem;
+			}
+	
+			.angle-border-blue {
+				position: absolute;
+				width: 70rem;
+				height: 30rem;
+			}
+	
+			.left-top-border {
+				top: -2rem;
+				left: -2rem;
+				border-left: 2rem solid #008affdd;
+				border-top: 2rem solid #008affdd;
+			}
+	
+			.right-top-border {
+				top: -2rem;
+				right: -2rem;
+				border-right: 2rem solid #008affdd;
+				border-top: 2rem solid #008affdd;
+			}
+	
+			.left-bottom-border {
+				bottom: -2rem;
+				left: -2rem;
+				border-bottom: 2rem solid #FFFFFF;
+				border-left: 2rem solid #FFFFFF;
+			}
+	
+			.right-bottom-border {
+				bottom: -2rem;
+				right: -2rem;
+				border-right: 2rem solid #FFFFFF;
+				border-bottom: 2rem solid #FFFFFF;
+			}
+		}
+	}
+	
+	.popup-main3 {
+		position: absolute;
+		// right: 1rem;
+		top: calc(calc(100% - 95rem) / 3 + calc(100% - 95rem) / 3 + 70rem);
+		// height: 490rem;
+		height: calc((100% - 95rem) / 3);
+		width: 350rem;
+		// padding: 10rem;
+		background-color: rgba(0, 45, 66, 0.5);
+		z-index: 1000;
+		font-size: 16rem;
+		color: white;
+		user-select: none;
+		animation-name: slide-right;
+		animation-duration: .8s;
+	
+		//头部背景图
+		.header3 {
+			height: 41rem;
+			width: calc(100% + 20rem);
+			background: url('@/assets/images/300x30小标题.png') no-repeat;
+			background-size: 100%;
+			margin: -10rem;
+			margin-bottom: 0rem;
+			line-height: 41rem;
+			display: flex;
+			text-align: center;
+	
+	
+			span {
+				// flex: 15;
+				font-weight: bold;
+			}
+	
+			i {
+				z-index: 101;
+				flex: 1;
+				margin: 0rem 8rem;
+				font-size: 20rem;
+			}
+		}
+	
+		//滚动条-鼠标悬浮显示
+		// .middle {
+		// 	height: calc(100% - 71rem);
+		// 	width: 100%;
+		// 	overflow-y: hidden;
+		// 	padding: 15rem 0 0 0;
+		// }
+	
+		// .middle:hover{
+		// 	overflow-y:auto;
+		// }
+	
+		//滚动条一直显示
+		.middle3 {
+			height: calc(100% - 71rem);
+			width: 100%;
+			overflow-y: auto;
+			padding: 15rem 0 0 0;
+		}
+	
+		.footers3 {
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			height: 30rem;
+			width: 100%;
+			line-height: 30rem;
+			background: url('@/assets/images/footerss.webp') no-repeat center;
+			opacity: 0.7;
+		}
+	
+	
+		/* 四个边角样式 */
+		.borderstyle {
+			position: relative;
+			width: 100%;
+			// height: 490rem;
+			height: calc(100% - 30rem);
+			padding: 10rem;
+			border: 1rem solid #008aff70 !important;
+			background-color: rgba(5, 45, 115, 0.7) !important;
+			box-shadow: 0 4rem 15rem 1rem #02213bb3;
+	
+	
+	
+			.angle-border {
+				position: absolute;
+				width: 12rem;
+				height: 12rem;
+			}
+	
+			.angle-border-blue {
+				position: absolute;
+				width: 70rem;
+				height: 30rem;
+			}
+	
+			.left-top-border {
+				top: -2rem;
+				left: -2rem;
+				border-left: 2rem solid #008affdd;
+				border-top: 2rem solid #008affdd;
+			}
+	
+			.right-top-border {
+				top: -2rem;
+				right: -2rem;
+				border-right: 2rem solid #008affdd;
+				border-top: 2rem solid #008affdd;
+			}
+	
+			.left-bottom-border {
+				bottom: -2rem;
+				left: -2rem;
+				border-bottom: 2rem solid #FFFFFF;
+				border-left: 2rem solid #FFFFFF;
+			}
+	
+			.right-bottom-border {
+				bottom: -2rem;
+				right: -2rem;
+				border-right: 2rem solid #FFFFFF;
+				border-bottom: 2rem solid #FFFFFF;
+			}
+		}
+	}
+
+	// .fadein-right {
+	// 	animation-name: slide-right;
+	// 	animation-duration: .8s;
+	// }
+
+	@keyframes slide-right {
+		0% {
+			opacity: 0;
+			transform: translateX(100%)
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateX(0)
+		}
+	}
+
+	.fadein-left {
+		animation-name: slide-left;
+		animation-duration: .8s;
+		left: 40rem;
+	}
+
+	@keyframes slide-left {
+		from {
+			opacity: 0;
+			transform: translate3d(-100%, 0, 0);
+		}
+
+		to {
+			opacity: 1;
+			transform: none;
+		}
+	}
+</style>

src/components/jt-popup/jt-popup3.vue

@@ -0,0 +1,512 @@
+<template>
+	<!-- 弹出框组件 -->
+	<div :class="['popup-main',animationClass]" v-drag v-show="isshow" :isEmit="isEmit" id="popup" :style="{height:height,width:width}">
+		<!-- <div class="borderstyle" :style="{height:height}">
+			<div class="angle-border-blue left-top-border"></div>
+			<div class="angle-border-blue right-top-border"></div>
+			<div class="angle-border left-bottom-border"></div>
+			<div class="angle-border right-bottom-border"></div>
+			
+		</div> -->
+		<div class="header">
+			<div style="width: 41rem;"></div>
+			<span>{{title}}</span>
+			<!-- <i class='iconfont icon-chahao' @click="closebasicLayer" /> -->
+		</div>
+		<div class="middle">
+			<slot></slot>
+		</div>
+		<div class="footers"></div>
+	</div>
+	<div :class="['popup-main2',animationClass]" v-drag v-show="isshow" :isEmit="isEmit" id="popup" :style="{height:height,width:width}">
+		<!-- <div class="borderstyle" :style="{height:height}">
+			<div class="angle-border-blue left-top-border"></div>
+			<div class="angle-border-blue right-top-border"></div>
+			<div class="angle-border left-bottom-border"></div>
+			<div class="angle-border right-bottom-border"></div>
+			
+		</div> -->
+		<div class="header2">
+			<div style="width: 41rem;"></div>
+			<span>能耗同比统计</span>
+			<!-- <i class='iconfont icon-chahao' @click="closebasicLayer" /> -->
+		</div>
+		<div class="middle2">
+			<slot></slot>
+		</div>
+		<div class="footers2"></div>
+	</div>
+	<div :class="['popup-main3',animationClass]" v-drag v-show="isshow" :isEmit="isEmit" id="popup" :style="{height:height,width:width}">
+		<!-- <div class="borderstyle" :style="{height:height}">
+			<div class="angle-border-blue left-top-border"></div>
+			<div class="angle-border-blue right-top-border"></div>
+			<div class="angle-border left-bottom-border"></div>
+			<div class="angle-border right-bottom-border"></div>
+			
+		</div> -->
+		<div class="header3">
+			<div style="width: 41rem;"></div>
+			<span>智能监控</span>
+			<!-- <i class='iconfont icon-chahao' @click="closebasicLayer" /> -->
+		</div>
+		<div class="middle3">
+			<slot></slot>
+		</div>
+		<div class="footers3"></div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				isshow: true,
+				title: '',
+			}
+		},
+		// watch: {
+		// 	isshow(newVal, oldVal) {
+		// 		if (newVal) {
+		// 			let popup = document.getElementById('popup')
+		// 			popup.style.left = '0rem'
+		// 			popup.style.right = '10rem'
+		// 		}
+		// 	}
+
+		// },
+		props: ['height', 'title', 'width', 'isEmit', 'animationClass'],
+		methods: {
+			closebasicLayer() {
+				this.isshow = true
+				if (this.isEmit) {
+					this.$emit('closeJTPopup');
+				}
+			}
+		},
+		mounted() {}
+	}
+</script>
+
+<style scoped lang="scss">
+	.popup-main {
+		position: absolute;
+		right: 1rem;
+		top: 70rem;
+		// height: 490rem;
+		height: calc((100% - 95rem) / 3);
+		width: 350rem;
+		// padding: 10rem;
+		background-color: rgba(0, 45, 66, 0.5);
+		z-index: 1000;
+		font-size: 16rem;
+		color: white;
+		user-select: none;
+		animation-name: slide-right;
+		animation-duration: .8s;
+
+		//头部背景图
+		.header {
+			height: 41rem;
+			width: calc(100% + 20rem);
+			background: url('@/assets/images/300x30小标题.png') no-repeat;
+			background-size: 100%;
+			margin: -10rem;
+			margin-bottom: 0rem;
+			line-height: 41rem;
+			display: flex;
+			text-align: center;
+
+
+			span {
+				// flex: 15;
+				font-weight: bold;
+			}
+
+			i {
+				z-index: 101;
+				flex: 1;
+				margin: 0rem 8rem;
+				font-size: 20rem;
+			}
+		}
+
+		//滚动条-鼠标悬浮显示
+		// .middle {
+		// 	height: calc(100% - 71rem);
+		// 	width: 100%;
+		// 	overflow-y: hidden;
+		// 	padding: 15rem 0 0 0;
+		// }
+
+		// .middle:hover{
+		// 	overflow-y:auto;
+		// }
+
+		//滚动条一直显示
+		.middle {
+			height: calc(100% - 71rem);
+			width: 100%;
+			overflow-y: auto;
+			padding: 15rem 0 0 0;
+		}
+
+		.footers {
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			height: 30rem;
+			width: 100%;
+			line-height: 30rem;
+			background: url('@/assets/images/footerss.webp') no-repeat center;
+			opacity: 0.7;
+		}
+
+
+		/* 四个边角样式 */
+		.borderstyle {
+			position: relative;
+			width: 100%;
+			// height: 490rem;
+			height: calc(100% - 30rem);
+			padding: 10rem;
+			border: 1rem solid #008aff70 !important;
+			background-color: rgba(5, 45, 115, 0.7) !important;
+			box-shadow: 0 4rem 15rem 1rem #02213bb3;
+
+
+
+			.angle-border {
+				position: absolute;
+				width: 12rem;
+				height: 12rem;
+			}
+
+			.angle-border-blue {
+				position: absolute;
+				width: 70rem;
+				height: 30rem;
+			}
+
+			.left-top-border {
+				top: -2rem;
+				left: -2rem;
+				border-left: 2rem solid #008affdd;
+				border-top: 2rem solid #008affdd;
+			}
+
+			.right-top-border {
+				top: -2rem;
+				right: -2rem;
+				border-right: 2rem solid #008affdd;
+				border-top: 2rem solid #008affdd;
+			}
+
+			.left-bottom-border {
+				bottom: -2rem;
+				left: -2rem;
+				border-bottom: 2rem solid #FFFFFF;
+				border-left: 2rem solid #FFFFFF;
+			}
+
+			.right-bottom-border {
+				bottom: -2rem;
+				right: -2rem;
+				border-right: 2rem solid #FFFFFF;
+				border-bottom: 2rem solid #FFFFFF;
+			}
+		}
+	}
+	
+	.popup-main2 {
+		position: absolute;
+		right: 1rem;
+		top: calc(calc(100% - 95rem) / 3 + 70rem);
+		// height: 490rem;
+		height: calc((100% - 95rem) / 3);
+		width: 350rem;
+		// padding: 10rem;
+		background-color: rgba(0, 45, 66, 0.5);
+		z-index: 1000;
+		font-size: 16rem;
+		color: white;
+		user-select: none;
+		animation-name: slide-right;
+		animation-duration: .8s;
+	
+		//头部背景图
+		.header2 {
+			height: 41rem;
+			width: calc(100% + 20rem);
+			background: url('@/assets/images/300x30小标题.png') no-repeat;
+			background-size: 100%;
+			margin: -10rem;
+			margin-bottom: 0rem;
+			line-height: 41rem;
+			display: flex;
+			text-align: center;
+	
+	
+			span {
+				// flex: 15;
+				font-weight: bold;
+			}
+	
+			i {
+				z-index: 101;
+				flex: 1;
+				margin: 0rem 8rem;
+				font-size: 20rem;
+			}
+		}
+	
+		//滚动条-鼠标悬浮显示
+		// .middle {
+		// 	height: calc(100% - 71rem);
+		// 	width: 100%;
+		// 	overflow-y: hidden;
+		// 	padding: 15rem 0 0 0;
+		// }
+	
+		// .middle:hover{
+		// 	overflow-y:auto;
+		// }
+	
+		//滚动条一直显示
+		.middle2 {
+			height: calc(100% - 71rem);
+			width: 100%;
+			overflow-y: auto;
+			padding: 15rem 0 0 0;
+		}
+	
+		.footers2 {
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			height: 30rem;
+			width: 100%;
+			line-height: 30rem;
+			background: url('@/assets/images/footerss.webp') no-repeat center;
+			opacity: 0.7;
+		}
+	
+	
+		/* 四个边角样式 */
+		.borderstyle {
+			position: relative;
+			width: 100%;
+			// height: 490rem;
+			height: calc(100% - 30rem);
+			padding: 10rem;
+			border: 1rem solid #008aff70 !important;
+			background-color: rgba(5, 45, 115, 0.7) !important;
+			box-shadow: 0 4rem 15rem 1rem #02213bb3;
+	
+	
+	
+			.angle-border {
+				position: absolute;
+				width: 12rem;
+				height: 12rem;
+			}
+	
+			.angle-border-blue {
+				position: absolute;
+				width: 70rem;
+				height: 30rem;
+			}
+	
+			.left-top-border {
+				top: -2rem;
+				left: -2rem;
+				border-left: 2rem solid #008affdd;
+				border-top: 2rem solid #008affdd;
+			}
+	
+			.right-top-border {
+				top: -2rem;
+				right: -2rem;
+				border-right: 2rem solid #008affdd;
+				border-top: 2rem solid #008affdd;
+			}
+	
+			.left-bottom-border {
+				bottom: -2rem;
+				left: -2rem;
+				border-bottom: 2rem solid #FFFFFF;
+				border-left: 2rem solid #FFFFFF;
+			}
+	
+			.right-bottom-border {
+				bottom: -2rem;
+				right: -2rem;
+				border-right: 2rem solid #FFFFFF;
+				border-bottom: 2rem solid #FFFFFF;
+			}
+		}
+	}
+	
+	.popup-main3 {
+		position: absolute;
+		right: 1rem;
+		top: calc(calc(100% - 95rem) / 3 + calc(100% - 95rem) / 3 + 70rem);
+		// height: 490rem;
+		height: calc((100% - 95rem) / 3);
+		width: 350rem;
+		// padding: 10rem;
+		background-color: rgba(0, 45, 66, 0.5);
+		z-index: 1000;
+		font-size: 16rem;
+		color: white;
+		user-select: none;
+		animation-name: slide-right;
+		animation-duration: .8s;
+	
+		//头部背景图
+		.header3 {
+			height: 41rem;
+			width: calc(100% + 20rem);
+			background: url('@/assets/images/300x30小标题.png') no-repeat;
+			background-size: 100%;
+			margin: -10rem;
+			margin-bottom: 0rem;
+			line-height: 41rem;
+			display: flex;
+			text-align: center;
+	
+	
+			span {
+				// flex: 15;
+				font-weight: bold;
+			}
+	
+			i {
+				z-index: 101;
+				flex: 1;
+				margin: 0rem 8rem;
+				font-size: 20rem;
+			}
+		}
+	
+		//滚动条-鼠标悬浮显示
+		// .middle {
+		// 	height: calc(100% - 71rem);
+		// 	width: 100%;
+		// 	overflow-y: hidden;
+		// 	padding: 15rem 0 0 0;
+		// }
+	
+		// .middle:hover{
+		// 	overflow-y:auto;
+		// }
+	
+		//滚动条一直显示
+		.middle3 {
+			height: calc(100% - 71rem);
+			width: 100%;
+			overflow-y: auto;
+			padding: 15rem 0 0 0;
+		}
+	
+		.footers3 {
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			height: 30rem;
+			width: 100%;
+			line-height: 30rem;
+			background: url('@/assets/images/footerss.webp') no-repeat center;
+			opacity: 0.7;
+		}
+	
+	
+		/* 四个边角样式 */
+		.borderstyle {
+			position: relative;
+			width: 100%;
+			// height: 490rem;
+			height: calc(100% - 30rem);
+			padding: 10rem;
+			border: 1rem solid #008aff70 !important;
+			background-color: rgba(5, 45, 115, 0.7) !important;
+			box-shadow: 0 4rem 15rem 1rem #02213bb3;
+	
+	
+	
+			.angle-border {
+				position: absolute;
+				width: 12rem;
+				height: 12rem;
+			}
+	
+			.angle-border-blue {
+				position: absolute;
+				width: 70rem;
+				height: 30rem;
+			}
+	
+			.left-top-border {
+				top: -2rem;
+				left: -2rem;
+				border-left: 2rem solid #008affdd;
+				border-top: 2rem solid #008affdd;
+			}
+	
+			.right-top-border {
+				top: -2rem;
+				right: -2rem;
+				border-right: 2rem solid #008affdd;
+				border-top: 2rem solid #008affdd;
+			}
+	
+			.left-bottom-border {
+				bottom: -2rem;
+				left: -2rem;
+				border-bottom: 2rem solid #FFFFFF;
+				border-left: 2rem solid #FFFFFF;
+			}
+	
+			.right-bottom-border {
+				bottom: -2rem;
+				right: -2rem;
+				border-right: 2rem solid #FFFFFF;
+				border-bottom: 2rem solid #FFFFFF;
+			}
+		}
+	}
+
+	// .fadein-right {
+	// 	animation-name: slide-right;
+	// 	animation-duration: .8s;
+	// }
+
+	@keyframes slide-right {
+		0% {
+			opacity: 0;
+			transform: translateX(100%)
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateX(0)
+		}
+	}
+
+	.fadein-left {
+		animation-name: slide-left;
+		animation-duration: .8s;
+		left: 40rem;
+	}
+
+	@keyframes slide-left {
+		from {
+			opacity: 0;
+			transform: translate3d(-100%, 0, 0);
+		}
+
+		to {
+			opacity: 1;
+			transform: none;
+		}
+	}
+</style>

src/main.js

@@ -26,6 +26,8 @@ import {createPinia} from 'pinia'
 
 //全局弹出框组件
 import jtpopup from './components/jt-popup/jt-popup.vue'
+import jtpopup2 from './components/jt-popup/jt-popup2.vue'
+import jtpopup3 from './components/jt-popup/jt-popup3.vue'
 import jtpopupif from './components/jt-popup/jt-popup-if.vue'
 import jtdrawer from './components/jt-drawer/drawer.vue'
 import jtcharts from './components/jt-charts/charts.vue'
@@ -59,6 +61,8 @@ app.config.globalProperties.jt3dSDK = jt3dSDK
 
 app.directive('drag', drag)
 app.component("jt-popup",jtpopup)
+app.component("jt-popup2",jtpopup2)
+app.component("jt-popup3",jtpopup3)
 app.component("jt-popup-if",jtpopupif)
 app.component("jt-drawer",jtdrawer)
 app.component("jt-charts",jtcharts)

src/views/Map3d/Map3DMain.vue

@@ -46,6 +46,8 @@
 	import printmap from './components/printmap.vue';
 	import dialogEdit from "./components/drawEdit.vue";
 	import queryResult from "./components/queryResult.vue";
+	import zstc from "./components/zstc.vue";
+	import zstc2 from "./components/zstc2.vue";
 	import {
 		provide
 	} from "vue";
@@ -85,7 +87,12 @@
 
 			<!-- 关键字查询组件 -->
 			<!-- <queryKeyword ref="queryword" /> -->
-
+			<jt-popup2  title="灌溉设备统计" ref="zstc">
+				<zstc ref="_zstc"></zstc>
+			</jt-popup2>
+			<jt-popup3  title="用水量统计" ref="zstc2">
+				<zstc2 ref="_zstc2"></zstc2>
+			</jt-popup3>
 			<!-- 视角标签 -->
 			<jt-popup  title="视角标签" ref="refviewerlabel">
 				<viewerlabel ref="_refviewerlabel"></viewerlabel>

src/views/Map3d/components/zstc.vue

@@ -0,0 +1,302 @@
+<script setup>
+	import {
+		inject
+	} from "vue";
+	import html2canvas from 'html2canvas';
+	import {
+		blobToBase64,
+		base64ToBlob
+	} from '@/assets/js/blobtobase64';
+	const getMapInstance = inject("getMapInstance");
+	jt3d = getMapInstance();
+</script>
+
+<template>
+	<div class="mainview">
+		<div class="header">
+			
+		</div>
+		<div class="middleviewer">
+			<div class="viewer" v-for="(res,index) in ImgurlList" :key="index">
+				<div class="viewertop">
+					<img :src="res.url" @click="flyto(res.info)">
+				</div>
+				<div class="viewerbottom">
+					{{res.name}}
+					<img src="@/assets/images/delete.png" class="deleteImg" @click="deleteviewer(res,index)" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	let jt3d = undefined;
+	export default {
+		data() {
+			return {
+				// viewersName: '', //视角标签名称
+				// ImgurlList: [], //截图地址列表
+			}
+		},
+		methods: {
+			//获取输入框值
+			getName() {
+				this.viewersName = document.getElementById("inputValue").value;
+			},
+
+			//跳转方法
+			flyto(options) {
+				jt3d.LocateUtil.flyToPoint(options)
+			},
+
+			//删除方法，传keyvalue以及需要修改属性
+			deleteviewer(item, index) {
+				//删除对应数组内的对象
+				this.ImgurlList.splice(index, 1)
+				if (item.id) {
+					this.$http.get('/delete', {
+						tableName: 'sys_map_angle',
+						keyValue: item.id,
+					}).then(res => {
+						console.log(res.data)
+					})
+				}
+			},
+
+			//添加视角标签，当前页存数组，向数据库传入相机参数
+			addviewer() {
+				//获取当前界面截图方法
+				html2canvas(
+					this.$parent.$parent.$refs.refMap3d.$refs.cesiumContainer, {
+						// backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
+						useCORS: true, //支持图片跨域
+						scale: 1 / 8, //设置放大的倍数
+					}
+				).then(canvas => {
+					//截图用img元素承装，显示在页面的上
+					let url = canvas.toDataURL('image/png')
+					//经纬度、高度
+					// 获取 相机姿态信息
+					let heading = window["viewer"].scene.camera.heading
+					let pitch = window["viewer"].scene.camera.pitch
+					let roll = window["viewer"].scene.camera.roll
+					let position = window["viewer"].scene.camera.positionCartographic
+					let longitude = Cesium.Math.toDegrees(position.longitude) //y
+					let latitude = Cesium.Math.toDegrees(position.latitude) //x
+					let height = position.height
+					let info = {
+						latitude: latitude,
+						longitude: longitude,
+						height: height,
+						pitch: Cesium.Math.toDegrees(pitch),
+						roll: Cesium.Math.toDegrees(roll),
+						heading: Cesium.Math.toDegrees(heading)
+					}
+					//dom for循环渲染列表
+					this.ImgurlList.unshift({
+						url: url,
+						name: this.viewersName,
+						info: info
+					})
+
+					//base64转换为二进制文件
+					// let blob = base64ToBlob(url)
+					// //文件转为文件流
+					// let formData = new FormData();
+					// formData.append('file',blob)
+
+					let data = {
+						name: this.viewersName,
+						x: latitude,
+						y: longitude,
+						z: height,
+						pitch: Cesium.Math.toDegrees(pitch),
+						roll: Cesium.Math.toDegrees(roll),
+						heading: Cesium.Math.toDegrees(heading),
+						screenshot: url,
+						userId: this.id,
+						// id:0
+					}
+
+					//添加数据接口
+					this.$http.post('/postSubmit', {
+						tableName: 'sys_map_angle',
+						keyValue: '',
+						formData: data,
+					}).then(res => {
+						console.log(res)
+						if (res.success == true) {
+
+						}
+					})
+				}).catch(err => {
+					console.log(err)
+				})
+			},
+			searchviewer() {
+				this.info = JSON.parse(localStorage.getItem('person'))
+				this.id = this.info.id
+				//获取所有图片数据
+				this.$http.get('/getTableList', {
+					tableName: 'sys_map_angle', //
+					sqlWhere: "name like '%" + this.viewersName + "%'",
+					orderByField: ''
+				}).then(res => {
+					console.log('获取图片', res.data)
+					this.ImgurlList = [];
+					res.data.forEach(item => {
+						let info = {
+							latitude: item.x,
+							longitude: item.y,
+							height: item.z,
+							pitch: item.pitch,
+							roll: item.roll,
+							heading: item.heading
+						}
+						// let url = blobToBase64(item.screenshot)
+						//dom for循环渲染列表
+						this.ImgurlList.push({
+							url: item.screenshot,
+							name: item.name,
+							info: info,
+							id: item.id
+						})
+					})
+
+					// console.log('img列表',this.ImgurlList)
+				})
+			}
+		},
+
+		mounted() {
+			this.info = JSON.parse(localStorage.getItem('person'))
+			this.id = this.info.id
+			//获取所有图片数据
+			this.$http.get('/getTableList', {
+				tableName: 'sys_map_angle', //
+				sqlWhere: '', //+ this.loginForm.id
+				orderByField: ''
+			}).then(res => {
+				console.log('获取图片', res.data)
+				res.data.forEach(item => {
+					let info = {
+						latitude: item.x,
+						longitude: item.y,
+						height: item.z,
+						pitch: item.pitch,
+						roll: item.roll,
+						heading: item.heading
+					}
+					// let url = blobToBase64(item.screenshot)
+					//dom for循环渲染列表
+					this.ImgurlList.push({
+						url: item.screenshot,
+						name: item.name,
+						info: info,
+						id: item.id
+					})
+				})
+
+				// console.log('img列表',this.ImgurlList)
+			})
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.mainview {
+		width: 100%;
+		height: 100%;
+
+		.header {
+			width: 100%;
+			display: flex;
+
+			input,
+			input:focus {
+				outline: none;
+				width: 185rem !important;
+				border: 1rem solid rgba(255, 255, 255, 0.8);
+				margin-right: 10rem;
+				height: 26rem !important;
+				color: rgba(255, 255, 255, 1);
+				background-color: rgba(255, 255, 255, 0) !important;
+				border-radius: 3rem;
+			}
+		}
+
+		.middleviewer {
+			width: 265rem;
+			height: 100%;
+			margin-left: 7rem;
+
+			.viewer {
+				width: 265rem !important;
+				height: 196rem !important;
+				margin-top: 15rem;
+				border: 1rem solid #ffffff !important;
+				border-radius: 1rem !important;
+
+				.viewertop {
+					width: 265rem !important;
+					height: 166rem !important;
+
+					img {
+						width: 100% !important;
+						height: 100% !important;
+					}
+				}
+
+				.viewerbottom {
+					line-height: 30rem !important;
+					text-align: center !important;
+					width: 265rem !important;
+					height: 30rem !important;
+					position: relative;
+					background-color: rgba(15, 145, 185, 0.7);
+
+					.deleteImg {
+						width: 24rem;
+						height: 24rem;
+						right: 5rem;
+						top: 3rem;
+						position: absolute;
+					}
+				}
+			}
+		}
+	}
+
+	::v-deep .el-input {
+		flex-grow: 0 !important;
+		width: 200rem !important;
+		// display: inline !important;
+		// margin-left: 5rem;
+		margin-right: 10rem;
+		height: 30rem !important;
+	}
+
+	//输入框文字颜色
+	::v-deep .el-input__inner {
+		color: rgba(255, 255, 255, 1)
+	}
+
+	//输入框背景色
+	::v-deep .el-input__wrapper {
+		background-color: rgba(255, 255, 255, 0) !important;
+	}
+
+	::v-deep .el-button {
+		border-radius: 3rem !important;
+
+	}
+
+	::v-deep .el-button--primary {
+		background-color: rgba(64, 158, 255, 0.6) !important;
+	}
+
+	::-webkit-scrollbar {
+		width: 0rem;
+	}
+</style>

src/views/Map3d/components/zstc2.vue

@@ -0,0 +1,302 @@
+<script setup>
+	import {
+		inject
+	} from "vue";
+	import html2canvas from 'html2canvas';
+	import {
+		blobToBase64,
+		base64ToBlob
+	} from '@/assets/js/blobtobase64';
+	const getMapInstance = inject("getMapInstance");
+	jt3d = getMapInstance();
+</script>
+
+<template>
+	<div class="mainview">
+		<div class="header">
+			
+		</div>
+		<div class="middleviewer">
+			<div class="viewer" v-for="(res,index) in ImgurlList" :key="index">
+				<div class="viewertop">
+					<img :src="res.url" @click="flyto(res.info)">
+				</div>
+				<div class="viewerbottom">
+					{{res.name}}
+					<img src="@/assets/images/delete.png" class="deleteImg" @click="deleteviewer(res,index)" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	let jt3d = undefined;
+	export default {
+		data() {
+			return {
+				// viewersName: '', //视角标签名称
+				// ImgurlList: [], //截图地址列表
+			}
+		},
+		methods: {
+			//获取输入框值
+			getName() {
+				this.viewersName = document.getElementById("inputValue").value;
+			},
+
+			//跳转方法
+			flyto(options) {
+				jt3d.LocateUtil.flyToPoint(options)
+			},
+
+			//删除方法，传keyvalue以及需要修改属性
+			deleteviewer(item, index) {
+				//删除对应数组内的对象
+				this.ImgurlList.splice(index, 1)
+				if (item.id) {
+					this.$http.get('/delete', {
+						tableName: 'sys_map_angle',
+						keyValue: item.id,
+					}).then(res => {
+						console.log(res.data)
+					})
+				}
+			},
+
+			//添加视角标签，当前页存数组，向数据库传入相机参数
+			addviewer() {
+				//获取当前界面截图方法
+				html2canvas(
+					this.$parent.$parent.$refs.refMap3d.$refs.cesiumContainer, {
+						// backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
+						useCORS: true, //支持图片跨域
+						scale: 1 / 8, //设置放大的倍数
+					}
+				).then(canvas => {
+					//截图用img元素承装，显示在页面的上
+					let url = canvas.toDataURL('image/png')
+					//经纬度、高度
+					// 获取 相机姿态信息
+					let heading = window["viewer"].scene.camera.heading
+					let pitch = window["viewer"].scene.camera.pitch
+					let roll = window["viewer"].scene.camera.roll
+					let position = window["viewer"].scene.camera.positionCartographic
+					let longitude = Cesium.Math.toDegrees(position.longitude) //y
+					let latitude = Cesium.Math.toDegrees(position.latitude) //x
+					let height = position.height
+					let info = {
+						latitude: latitude,
+						longitude: longitude,
+						height: height,
+						pitch: Cesium.Math.toDegrees(pitch),
+						roll: Cesium.Math.toDegrees(roll),
+						heading: Cesium.Math.toDegrees(heading)
+					}
+					//dom for循环渲染列表
+					this.ImgurlList.unshift({
+						url: url,
+						name: this.viewersName,
+						info: info
+					})
+
+					//base64转换为二进制文件
+					// let blob = base64ToBlob(url)
+					// //文件转为文件流
+					// let formData = new FormData();
+					// formData.append('file',blob)
+
+					let data = {
+						name: this.viewersName,
+						x: latitude,
+						y: longitude,
+						z: height,
+						pitch: Cesium.Math.toDegrees(pitch),
+						roll: Cesium.Math.toDegrees(roll),
+						heading: Cesium.Math.toDegrees(heading),
+						screenshot: url,
+						userId: this.id,
+						// id:0
+					}
+
+					//添加数据接口
+					this.$http.post('/postSubmit', {
+						tableName: 'sys_map_angle',
+						keyValue: '',
+						formData: data,
+					}).then(res => {
+						console.log(res)
+						if (res.success == true) {
+
+						}
+					})
+				}).catch(err => {
+					console.log(err)
+				})
+			},
+			searchviewer() {
+				this.info = JSON.parse(localStorage.getItem('person'))
+				this.id = this.info.id
+				//获取所有图片数据
+				this.$http.get('/getTableList', {
+					tableName: 'sys_map_angle', //
+					sqlWhere: "name like '%" + this.viewersName + "%'",
+					orderByField: ''
+				}).then(res => {
+					console.log('获取图片', res.data)
+					this.ImgurlList = [];
+					res.data.forEach(item => {
+						let info = {
+							latitude: item.x,
+							longitude: item.y,
+							height: item.z,
+							pitch: item.pitch,
+							roll: item.roll,
+							heading: item.heading
+						}
+						// let url = blobToBase64(item.screenshot)
+						//dom for循环渲染列表
+						this.ImgurlList.push({
+							url: item.screenshot,
+							name: item.name,
+							info: info,
+							id: item.id
+						})
+					})
+
+					// console.log('img列表',this.ImgurlList)
+				})
+			}
+		},
+
+		mounted() {
+			this.info = JSON.parse(localStorage.getItem('person'))
+			this.id = this.info.id
+			//获取所有图片数据
+			this.$http.get('/getTableList', {
+				tableName: 'sys_map_angle', //
+				sqlWhere: '', //+ this.loginForm.id
+				orderByField: ''
+			}).then(res => {
+				console.log('获取图片', res.data)
+				res.data.forEach(item => {
+					let info = {
+						latitude: item.x,
+						longitude: item.y,
+						height: item.z,
+						pitch: item.pitch,
+						roll: item.roll,
+						heading: item.heading
+					}
+					// let url = blobToBase64(item.screenshot)
+					//dom for循环渲染列表
+					this.ImgurlList.push({
+						url: item.screenshot,
+						name: item.name,
+						info: info,
+						id: item.id
+					})
+				})
+
+				// console.log('img列表',this.ImgurlList)
+			})
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.mainview {
+		width: 100%;
+		height: 100%;
+
+		.header {
+			width: 100%;
+			display: flex;
+
+			input,
+			input:focus {
+				outline: none;
+				width: 185rem !important;
+				border: 1rem solid rgba(255, 255, 255, 0.8);
+				margin-right: 10rem;
+				height: 26rem !important;
+				color: rgba(255, 255, 255, 1);
+				background-color: rgba(255, 255, 255, 0) !important;
+				border-radius: 3rem;
+			}
+		}
+
+		.middleviewer {
+			width: 265rem;
+			height: 100%;
+			margin-left: 7rem;
+
+			.viewer {
+				width: 265rem !important;
+				height: 196rem !important;
+				margin-top: 15rem;
+				border: 1rem solid #ffffff !important;
+				border-radius: 1rem !important;
+
+				.viewertop {
+					width: 265rem !important;
+					height: 166rem !important;
+
+					img {
+						width: 100% !important;
+						height: 100% !important;
+					}
+				}
+
+				.viewerbottom {
+					line-height: 30rem !important;
+					text-align: center !important;
+					width: 265rem !important;
+					height: 30rem !important;
+					position: relative;
+					background-color: rgba(15, 145, 185, 0.7);
+
+					.deleteImg {
+						width: 24rem;
+						height: 24rem;
+						right: 5rem;
+						top: 3rem;
+						position: absolute;
+					}
+				}
+			}
+		}
+	}
+
+	::v-deep .el-input {
+		flex-grow: 0 !important;
+		width: 200rem !important;
+		// display: inline !important;
+		// margin-left: 5rem;
+		margin-right: 10rem;
+		height: 30rem !important;
+	}
+
+	//输入框文字颜色
+	::v-deep .el-input__inner {
+		color: rgba(255, 255, 255, 1)
+	}
+
+	//输入框背景色
+	::v-deep .el-input__wrapper {
+		background-color: rgba(255, 255, 255, 0) !important;
+	}
+
+	::v-deep .el-button {
+		border-radius: 3rem !important;
+
+	}
+
+	::v-deep .el-button--primary {
+		background-color: rgba(64, 158, 255, 0.6) !important;
+	}
+
+	::-webkit-scrollbar {
+		width: 0rem;
+	}
+</style>