no message

src/views/Table/Table.vue

@@ -1,5 +1,7 @@
 <script setup>
-	
+	import spdgc from "./components/spdgc.vue"; 
+	import zksb from "./components/zksb.vue"; 
+	import dsnl from "./components/dsnl.vue"; 
 </script>
 
 <template>
@@ -15,16 +17,16 @@
 		
 	</jt-popup2>
 	
-	<jt-popup3  title="用水量统计" ref="ysltj">
-		
+	<jt-popup3  title="输配电工程" ref="spdgc">
+		<spdgc ref="_spdgc"></spdgc>
 	</jt-popup3>
 	
-	<jt-popup3  title="能耗同比统计" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="nhtbtj">
-		
+	<jt-popup3  title="智控设备" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="zksb">
+		<zksb ref="_zksb"></zksb>
 	</jt-popup3>
 	
-	<jt-popup3  title="智能监控" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="znjk">
-		
+	<jt-popup3  title="地升能力" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="dsnl">
+		<dsnl ref="_dsnl"></dsnl>
 	</jt-popup3>
 </template>
 

src/views/Table/components/spdgc.vue

@@ -0,0 +1,70 @@
+<script setup>
+	
+</script>
+
+<template>
+	<div class="main">
+		<div class="shape">
+			<span style="font-size: 20rem;font-weight: 600;">变电设施&nbsp;&nbsp;</span>
+			<span style="font-size: 28rem;font-weight: 700;">26</span>
+			<span style="font-weight: 600;">套</span>
+		<div class="shape2">
+			<span style="font-size: 20rem;font-weight: 600;">配电设施&nbsp;&nbsp;</span>
+			<span style="font-size: 28rem;font-weight: 700">37</span>
+			<span style="font-weight: 600;">套</span>
+		</div>
+		<div class="shape3">
+			<span style="font-size: 20rem;margin-left: 6rem;font-weight: 600;">高压线路&nbsp;&nbsp;</span>
+			<span style="font-size: 28rem;font-weight: 700">73</span>
+			<span style="font-weight: 600;">km</span>
+		</div>
+		<div class="shape4">
+			<span style="font-size: 20rem;margin-left: 18rem;font-weight: 600;">低压线路&nbsp;&nbsp;</span>
+			<span style="font-size: 28rem;font-weight: 700">120</span>
+			<span style="font-weight: 600;">km</span>
+		</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	let jt3d = undefined;
+	export default {
+		data() {
+			return {
+				// viewersName: '', //视角标签名称
+				// ImgurlList: [], //截图地址列表
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main{
+		width:52%;
+		height:97%;
+		display:flex;
+		flex:2;
+		flex-wrap: wrap;
+		justify-content: space-around;
+		align-items: center;
+		flex-direction: row;
+		color: rgba(29,191,205,1);
+		margin-left: 10rem;
+		.shape{
+			margin-top: 6rem;
+			.shape2{
+				margin-top: 10rem;
+			}
+			.shape3{
+				margin-top: 10rem;
+			}
+			.shape4{
+				margin-top: 10rem;
+			}
+		}
+	}
+</style>

src/views/Table/components/zksb.vue

@@ -0,0 +1,93 @@
+<script setup>
+	
+</script>
+
+<template>
+	<div class="main">
+		<div class="shape">
+			<div class="number">23</div>
+			<div class="title">水肥一体</div>
+		</div>
+		<div class="shape">
+			<div class="number">2742</div>
+			<div class="title">灌溉设备</div>
+		</div>
+		<div class="shape">
+			<div class="number">0</div>
+			<div class="title">环境监测</div>
+		</div>
+		<div class="shape">
+			<div class="number">40</div>
+			<div class="title">井电双控</div>
+		</div>
+		<div class="shape">
+			<div class="number">9</div>
+			<div class="title">虫情监测</div>
+		</div>
+		<div class="shape">
+			<div class="number">10</div>
+			<div class="title">气象监测</div>
+		</div>
+		<div class="shape">
+			<div class="number">2</div>
+			<div class="title">土壤墒情</div>
+		</div>
+		<div class="shape">
+			<div class="number">15</div>
+			<div class="title">视频监控</div>
+		</div>
+		<div class="shape">
+			<div class="number">5</div>
+			<div class="title">水位监测</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	let jt3d = undefined;
+	export default {
+		data() {
+			return {
+				// viewersName: '', //视角标签名称
+				// ImgurlList: [], //截图地址列表
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.number{
+		color: rgba(29,191,205,1);
+		font-weight: 700;
+		margin-top: 15rem;
+		font-size: 25rem;
+	}
+	.title{
+		color: rgba(29,191,205,1);
+		font-size: 13rem;
+		font-weight: 600;
+		// text-shadow: 0 0 2rem 2rem rgba(29,191,205,1);
+		margin-top: 11rem;
+		margin-left: 3rem;
+	}
+	
+	.main{
+		width:100%;
+		height:97%;
+		display:flex;
+		flex:2;
+		flex-wrap: wrap;
+		justify-content: space-around;
+		align-items: center;
+		.shape{
+			background:url('@/assets/images/sbbjt.png') no-repeat;
+			background-size:100% 100%;
+			width: 100rem;
+			height: 56rem;
+			
+		}
+	}
+</style>