添加各单元组件 修改样式

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

@@ -1,62 +1,35 @@
+<script setup>
+	import {
+		Store
+	} from '@/store/index';
+
+	store = Store();
+</script>
 <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 :class="['popup-main',animationClass]" v-show="isshow" :isEmit="isEmit" id="popup"
+		:style="{height:height,width:width,top:top,right:right,minWidth:minWidth}" ref="popup">
+		<!-- <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 :class="longheader?'header long':'header'">
+				<div style="width: 35rem;"></div>
+				<span>{{title}}</span>
+				<!-- <i :class="store.userport == 'PC'?'iconfont icon-youjiantou':'iconfont icon-youjiantou'"
+					@click="closebasicLayer" style="font-size: 16rem;" /> -->
+			</div>
+			<div class="middle">
+				<slot></slot>
+			</div>
+			<!-- <div v-if="showfooter" class="footers"></div> -->
+		<!-- </div> -->
 	</div>
 </template>
 
 <script>
+	let store = undefined;
 	export default {
 		data() {
 			return {
@@ -64,72 +37,166 @@
 				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'],
+		// props: ['height', 'title', 'width', 'isEmit', 'animationClass'],
+		props: {
+			height: { //高度单位rem
+				type: String,
+				default: ''
+			},
+			title: { //标题
+				type: String,
+				default: ""
+			},
+			right: { //初始化位置，右侧距离
+				type: String,
+				default: ""
+			},
+			top: { //初始化位置，顶部距离
+				type: String,
+				default: ""
+			},
+			width: { //的宽度
+				type: String,
+				default: ""
+			},
+			isEmit: { //是否有回调函数，用于清除功能
+				type: Boolean,
+				default: false
+			},
+			animationClass: { //组件弹出方向，slide-right右，slide-left左，slide-bottom下
+				type: String,
+				default: 'slide-right'
+			},
+			showfooter: { //底部动态文字是否展示
+				type: Boolean,
+				default: true
+			},
+			minWidth: { //最小宽度
+				type: String,
+				default: ""
+			},
+			longheader: { //是否是长背景图
+				type: String,
+				default: 0
+			}
+		},
 		methods: {
 			closebasicLayer() {
-				this.isshow = true
+				console.log("animationClass", this.animationClass)
+
+				let style = document.styleSheets[0];
+				if (this.animationClass === "slide-right") {
+					style.insertRule(
+						"@keyframes move-right {0% {opacity: 1;transform: translateX(-100%)}100% {opacity: 1;transform: translateX(0%)}}",
+						10);
+					style.insertRule(
+						"@keyframes slide-right {0% {opacity: 1;transform: translateX(100%)}100% {opacity: 1;transform: translateX(0%)}}",
+						11);
+					let popup = this.$refs.popup
+					popup.style.right = '-400rem'
+					popup.style.animation = 'move-right 0.4s linear';
+					setTimeout(res => {
+						popup.style.animation = 'slide-right 0.4s linear'
+						this.isshow = false
+					}, 400)
+				} else if (this.animationClass === "fadein-left") {
+					style.insertRule(
+						"@keyframes move-rightL {0% {opacity: 1;transform: translateX(0%)}100% {opacity: 1;transform: translateX(-100%)}}",
+						8);
+					style.insertRule(
+						"@keyframes slide-right {0% {opacity: 1;transform: translateX(100%)}100% {opacity: 1;transform: translateX(0%)}}",
+						9);
+					style.insertRule(
+						"@keyframes slide-left {0% {opacity: 1;transform: translateX(-100%)}100% {opacity: 1;transform: translateX(0%)}}",
+						10);
+					let popup = this.$refs.popup
+					// popup.style.left = '-400rem'
+					popup.style.animation = 'move-rightL 0.4s linear';
+					setTimeout(res => {
+						popup.style.animation = 'slide-left 0.4s linear'
+						this.isshow = false
+					}, 400)
+				}
+
 				if (this.isEmit) {
 					this.$emit('closeJTPopup');
 				}
 			}
 		},
-		mounted() {}
+		mounted() {
+			console.log('store', this.showfooter)
+		}
 	}
 </script>
 
 <style scoped lang="scss">
+	@charset "UTF-8";
+
+	@font-face {
+		font-family: "TTTGB-Medium";
+		src: url("@/assets/fonts/fonts/TTTGB-Medium.ttf") format("truetype"),
+			url("@/assets/fonts/fonts/TTTGB-Medium.eot") format("embedded-opentype"),
+			url("@/assets/fonts/fonts/TTTGB-Medium.svg") format("svg");
+		font-weight: normal;
+		font-style: normal;
+	}
+
 	.popup-main {
 		position: absolute;
-		// right: 40rem;
+		left: 3rem;
 		top: 90rem;
 		// height: 490rem;
-		height: calc((100% - 115rem)/3);
+
+		height: calc((100% - 115rem) / 3);
 		width: 350rem;
 		// padding: 10rem;
-		// background-color: rgba(0, 45, 66, 0.5);
-		z-index: 1000;
+		// z-index: 1000;
 		font-size: 16rem;
 		color: white;
 		user-select: none;
 		animation-name: slide-left;
 		animation-duration: .8s;
+		background-color: rgba(5, 45, 115, 0.7) !important;
 
 		//头部背景图
 		.header {
-			height: 41rem;
-			width: calc(100% + 20rem);
+			height: 35rem;
+			// width: 350rem;
 			background: url('@/assets/images/tcheader.png') no-repeat;
-			background-size: 100%;
+			background-size: 100% 100%;
 			margin: -10rem;
 			margin-bottom: 0rem;
-			line-height: 41rem;
+			line-height: 35rem;
 			display: flex;
-			text-align: center;
+			text-align: left;
 
+			i:hover {
+				cursor: pointer;
+			}
 
 			span {
+				font-family: "TTTGB-Medium", sans-serif !important;
+				font-size: 16rem;
 				// flex: 15;
-				font-weight: bold;
+			}
+
+			i:hover {
+				cursor: pointer;
 			}
 
 			i {
 				z-index: 101;
 				flex: 1;
 				margin: 0rem 8rem;
-				font-size: 20rem;
+				font-size: 20rem !important;
+				text-align: center;
 			}
 		}
 
+		// .iconfont{
+		// 	font-size: 16rem;
+		// }
+
 		//滚动条-鼠标悬浮显示
 		// .middle {
 		// 	height: calc(100% - 71rem);
@@ -144,7 +211,7 @@
 
 		//滚动条一直显示
 		.middle {
-			height: calc(100% - 71rem);
+			height: calc(100% - 81rem);
 			width: 100%;
 			overflow-y: auto;
 			padding: 15rem 0 0 0;
@@ -167,7 +234,7 @@
 			position: relative;
 			width: 100%;
 			// height: 490rem;
-			height: calc(100% - 30rem);
+			height: calc(100vh - 200rem);
 			padding: 10rem;
 			border: 1rem solid #008aff70 !important;
 			background-color: rgba(5, 45, 115, 0.7) !important;
@@ -216,263 +283,10 @@
 			}
 		}
 	}
-	
-	.popup-main2 {
-		position: absolute;
-		// right: 1rem;
-		top: calc(calc(100% - 115rem) / 3 + 90rem);
-		// height: 490rem;
-		height: calc((100% - 115rem) / 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-left;
-		animation-duration: .8s;
-	
-		//头部背景图
-		.header2 {
-			height: 41rem;
-			width: calc(100% + 20rem);
-			background: url('@/assets/images/tcheader.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% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem);
-		// height: 490rem;
-		height: calc((100% - 115rem) / 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-left;
-		animation-duration: .8s;
-	
-		//头部背景图
-		.header3 {
-			height: 41rem;
-			width: calc(100% + 20rem);
-			background: url('@/assets/images/tcheader.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;
-			}
-		}
+
+	.long {
+		background: url('@/assets/images/longheader.png') no-repeat !important;
+		background-size: 100% 100% !important;
 	}
 
 	// .fadein-right {
@@ -492,6 +306,30 @@
 		}
 	}
 
+	@keyframes slide-bottom {
+		0% {
+			opacity: 0;
+			transform: translateY(-100%)
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateY(0)
+		}
+	}
+
+	@keyframes move-right {
+		0% {
+			opacity: 0;
+			transform: translateX(50%)
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateX(100%)
+		}
+	}
+
 	.fadein-left {
 		animation-name: slide-left;
 		animation-duration: .8s;

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

@@ -1,62 +1,35 @@
+<script setup>
+	import {
+		Store
+	} from '@/store/index';
+
+	store = Store();
+</script>
 <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 :class="['popup-main',animationClass]" v-show="isshow" :isEmit="isEmit" id="popup"
+		:style="{height:height,width:width,top:top,right:right,minWidth:minWidth}" ref="popup">
+		<!-- <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 :class="longheader?'header long':'header'">
+				<div style="width: 35rem;"></div>
+				<span>{{title}}</span>
+				<!-- <i :class="store.userport == 'PC'?'iconfont icon-youjiantou':'iconfont icon-youjiantou'"
+					@click="closebasicLayer" style="font-size: 16rem;" /> -->
+			</div>
+			<div class="middle">
+				<slot></slot>
+			</div>
+			<!-- <div v-if="showfooter" class="footers"></div> -->
+		<!-- </div> -->
 	</div>
 </template>
 
 <script>
+	let store = undefined;
 	export default {
 		data() {
 			return {
@@ -64,72 +37,166 @@
 				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'],
+		// props: ['height', 'title', 'width', 'isEmit', 'animationClass'],
+		props: {
+			height: { //高度单位rem
+				type: String,
+				default: ''
+			},
+			title: { //标题
+				type: String,
+				default: ""
+			},
+			right: { //初始化位置，右侧距离
+				type: String,
+				default: ""
+			},
+			top: { //初始化位置，顶部距离
+				type: String,
+				default: ""
+			},
+			width: { //的宽度
+				type: String,
+				default: ""
+			},
+			isEmit: { //是否有回调函数，用于清除功能
+				type: Boolean,
+				default: false
+			},
+			animationClass: { //组件弹出方向，slide-right右，slide-left左，slide-bottom下
+				type: String,
+				default: 'slide-right'
+			},
+			showfooter: { //底部动态文字是否展示
+				type: Boolean,
+				default: true
+			},
+			minWidth: { //最小宽度
+				type: String,
+				default: ""
+			},
+			longheader: { //是否是长背景图
+				type: String,
+				default: 0
+			}
+		},
 		methods: {
 			closebasicLayer() {
-				this.isshow = true
+				console.log("animationClass", this.animationClass)
+
+				let style = document.styleSheets[0];
+				if (this.animationClass === "slide-right") {
+					style.insertRule(
+						"@keyframes move-right {0% {opacity: 1;transform: translateX(-100%)}100% {opacity: 1;transform: translateX(0%)}}",
+						10);
+					style.insertRule(
+						"@keyframes slide-right {0% {opacity: 1;transform: translateX(100%)}100% {opacity: 1;transform: translateX(0%)}}",
+						11);
+					let popup = this.$refs.popup
+					popup.style.right = '-400rem'
+					popup.style.animation = 'move-right 0.4s linear';
+					setTimeout(res => {
+						popup.style.animation = 'slide-right 0.4s linear'
+						this.isshow = false
+					}, 400)
+				} else if (this.animationClass === "fadein-left") {
+					style.insertRule(
+						"@keyframes move-rightL {0% {opacity: 1;transform: translateX(0%)}100% {opacity: 1;transform: translateX(-100%)}}",
+						8);
+					style.insertRule(
+						"@keyframes slide-right {0% {opacity: 1;transform: translateX(100%)}100% {opacity: 1;transform: translateX(0%)}}",
+						9);
+					style.insertRule(
+						"@keyframes slide-left {0% {opacity: 1;transform: translateX(-100%)}100% {opacity: 1;transform: translateX(0%)}}",
+						10);
+					let popup = this.$refs.popup
+					// popup.style.left = '-400rem'
+					popup.style.animation = 'move-rightL 0.4s linear';
+					setTimeout(res => {
+						popup.style.animation = 'slide-left 0.4s linear'
+						this.isshow = false
+					}, 400)
+				}
+
 				if (this.isEmit) {
 					this.$emit('closeJTPopup');
 				}
 			}
 		},
-		mounted() {}
+		mounted() {
+			console.log('store', this.showfooter)
+		}
 	}
 </script>
 
 <style scoped lang="scss">
+	@charset "UTF-8";
+
+	@font-face {
+		font-family: "TTTGB-Medium";
+		src: url("@/assets/fonts/fonts/TTTGB-Medium.ttf") format("truetype"),
+			url("@/assets/fonts/fonts/TTTGB-Medium.eot") format("embedded-opentype"),
+			url("@/assets/fonts/fonts/TTTGB-Medium.svg") format("svg");
+		font-weight: normal;
+		font-style: normal;
+	}
+
 	.popup-main {
 		position: absolute;
-		right: 1rem;
+		right: 3rem;
 		top: 90rem;
 		// height: 490rem;
+
 		height: calc((100% - 115rem) / 3);
 		width: 350rem;
 		// padding: 10rem;
-		// background-color: rgba(0, 45, 66, 0.5);
-		z-index: 1000;
+		// z-index: 1000;
 		font-size: 16rem;
 		color: white;
 		user-select: none;
-		animation-name: slide-right;
+		animation-name: slide-left;
 		animation-duration: .8s;
+		background-color: rgba(5, 45, 115, 0.7) !important;
 
 		//头部背景图
 		.header {
-			height: 41rem;
-			width: calc(100% + 20rem);
+			height: 35rem;
+			// width: calc(100% + 20rem);
 			background: url('@/assets/images/tcheader.png') no-repeat;
-			background-size: 100%;
+			background-size: 100% 100%;
 			margin: -10rem;
 			margin-bottom: 0rem;
-			line-height: 41rem;
+			line-height: 35rem;
 			display: flex;
-			text-align: center;
+			text-align: left;
 
+			i:hover {
+				cursor: pointer;
+			}
 
 			span {
+				font-family: "TTTGB-Medium", sans-serif !important;
+				font-size: 16rem;
 				// flex: 15;
-				font-weight: bold;
+			}
+
+			i:hover {
+				cursor: pointer;
 			}
 
 			i {
 				z-index: 101;
 				flex: 1;
 				margin: 0rem 8rem;
-				font-size: 20rem;
+				font-size: 20rem !important;
+				text-align: center;
 			}
 		}
 
+		// .iconfont{
+		// 	font-size: 16rem;
+		// }
+
 		//滚动条-鼠标悬浮显示
 		// .middle {
 		// 	height: calc(100% - 71rem);
@@ -144,7 +211,7 @@
 
 		//滚动条一直显示
 		.middle {
-			height: calc(100% - 71rem);
+			height: calc(100% - 81rem);
 			width: 100%;
 			overflow-y: auto;
 			padding: 15rem 0 0 0;
@@ -167,7 +234,7 @@
 			position: relative;
 			width: 100%;
 			// height: 490rem;
-			height: calc(100% - 30rem);
+			height: calc(100vh - 200rem);
 			padding: 10rem;
 			border: 1rem solid #008aff70 !important;
 			background-color: rgba(5, 45, 115, 0.7) !important;
@@ -216,263 +283,10 @@
 			}
 		}
 	}
-	
-	.popup-main2 {
-		position: absolute;
-		right: 1rem;
-		top: calc(calc(100% - 115rem) / 3 + 90rem);
-		// height: 490rem;
-		height: calc((100% - 115rem) / 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/tcheader.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% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem);
-		// height: 490rem;
-		height: calc((100% - 115rem) / 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/tcheader.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;
-			}
-		}
+
+	.long {
+		background: url('@/assets/images/longheader.png') no-repeat !important;
+		background-size: 100% 100% !important;
 	}
 
 	// .fadein-right {
@@ -480,10 +294,10 @@
 	// 	animation-duration: .8s;
 	// }
 
-	@keyframes slide-right {
+	@keyframes slide-left {
 		0% {
 			opacity: 0;
-			transform: translateX(100%)
+			transform: translateX(-100%)
 		}
 
 		100% {
@@ -492,6 +306,30 @@
 		}
 	}
 
+	@keyframes slide-bottom {
+		0% {
+			opacity: 0;
+			transform: translateY(-100%)
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateY(0)
+		}
+	}
+
+	@keyframes move-right {
+		0% {
+			opacity: 0;
+			transform: translateX(50%)
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateX(100%)
+		}
+	}
+
 	.fadein-left {
 		animation-name: slide-left;
 		animation-duration: .8s;

src/views/Map3d/Map3DMain.vue

@@ -47,8 +47,9 @@
 	import dialogEdit from "./components/drawEdit.vue";
 	import queryResult from "./components/queryResult.vue";
 	import RightHeading from "./components/RightHeading.vue";
-	import zstc from "./components/zstc.vue";
-	import zstc2 from "./components/zstc2.vue";
+	import ggsbtj from "./components/ggsbtj.vue";
+	import ysltj from "./components/ysltj.vue";
+	import sbyxjc from "./components/sbyxjc.vue"
 	import {
 		provide
 	} from "vue";
@@ -89,12 +90,28 @@
 			<!-- 关键字查询组件 -->
 			<!-- <queryKeyword ref="queryword" /> -->
 			
-			<jt-popup2  title="灌溉设备统计" ref="zstc">
-				<zstc ref="_zstc"></zstc>
+			<jt-popup2  title="灌溉设备统计" ref="ggsbtj">
+				<ggsbtj ref="_ggsbtj"></ggsbtj>
 			</jt-popup2>
 			
-			<jt-popup3  title="用水量统计" ref="zstc2">
-				<zstc2 ref="_zstc2"></zstc2>
+			<jt-popup2  title="设备运行检测" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="sbyxjc">
+				<sbyxjc ref="_sbyxjc"></sbyxjc>
+			</jt-popup2>
+			
+			<jt-popup2  title="区域能耗占比" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="qtnhzb">
+				<qtnhzb ref="_qtnhzb"></qtnhzb>
+			</jt-popup2>
+			
+			<jt-popup3  title="用水量统计" ref="ysltj">
+				<ysltj ref="_ysltj"></ysltj>
+			</jt-popup3>
+			
+			<jt-popup3  title="能耗同比统计" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="nhtbtj">
+				<nhtbtj ref="_nhtbtj"></nhtbtj>
+			</jt-popup3>
+			
+			<jt-popup3  title="智能监控" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="znjk">
+				<znjk ref="_znjk"></znjk>
 			</jt-popup3>
 			
 			<!-- 视角标签 -->

src/views/Map3d/components/zstc.vue → src/views/Map3d/components/ggsbtj.vue

@@ -12,7 +12,7 @@
 </script>
 
 <template>
-	<div style="font-weight: bold;">总设备数量</div>
+	
 </template>
 
 <script>

src/views/Map3d/components/qynhzb.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/sbyxjc.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/viewerlabel.vue

@@ -222,6 +222,7 @@
 	.mainview {
 		width: 100%;
 		height: 100%;
+		height: calc(calc(100% - 115rem) / 3 + 90rem);
 
 		.header {
 			width: 100%;

src/views/Map3d/components/ysltj.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/znjk.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>