Merge branch 'ZHNY_LHR' into ZHNY_DCF

src/components/jt-echarts/jt-echarts.vue

@@ -4,7 +4,7 @@
 
 <script>
 import * as echarts from "echarts";
-import 'echarts-liquidfill'
+import 'echarts-liquidfill';
 export default {
 	props: {
 		isAxisChart: {

src/views/Table/Table.vue

@@ -1,31 +1,32 @@
 <script setup>
 	import BasicInfor from "../Table/components/BasicInfor.vue"
 	import WaterLeveChart from "../Table/components/WaterLevelChart.vue"
+	import TianluEngin from "../Table/components/TianluEngin.vue"
 </script>
 
 <template>
-	<jt-popup2  title="农田基本信息" ref="BasicInfor">
-	<BasicInfor ></BasicInfor>
+	<jt-popup2 title="农田基本信息" ref="BasicInfor">
+		<BasicInfor></BasicInfor>
 	</jt-popup2>
-	
-	<jt-popup2  title="田路工程" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="RoadProject">
-		
+
+	<jt-popup2 title="田路工程" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="RoadProject">
+		<TianluEngin></TianluEngin>
 	</jt-popup2>
-	
-	<jt-popup2  title="水利工程" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="WaterProject">
+
+	<jt-popup2 title="水利工程" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="WaterProject">
 		<WaterLeveChart></WaterLeveChart>
 	</jt-popup2>
-	
-	<jt-popup3  title="用水量统计" ref="ysltj">
-		
+
+	<jt-popup3 title="用水量统计" ref="ysltj">
+
 	</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="nhtbtj">
+
 	</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="znjk">
+
 	</jt-popup3>
 </template>
 
@@ -36,7 +37,7 @@
 		/* 数据 */
 		data() {
 			return {
-				
+
 			}
 		},
 
@@ -53,5 +54,5 @@
 </script>
 
 <style scoped>
-	
+
 </style>

src/views/Table/components/BasicInfor.vue

@@ -1,20 +1,109 @@
 <template>
-	<div class="Background"></div>
-	<div class="Text">
-		
+
+	<div class="Background">
+		<p>
+			系统建设应坚持“先进、可靠、实用、落地”的原则，实行“整体规划、分步实施；统一标准、加强管理；先进实用、政策落地”的建设方针。
+		</p>
+	</div>
+
+	<div class="leftTitle">
+		<div class='topIcon'>
+			<div class="fontInfo">20.4</div>
+			<div class="font">本年规划(亩)</div>
+		</div>
+		<div class='bottomIcon'>
+			<div class="fontInfo">100</div>
+			<div class="font">地块数量(块)</div>
+		</div>
+
+	</div>
+	<div class="rightTitle">
+		<div class='topRightIcon'>
+			<div class="fontInfo">121.94</div>
+			<div class="font">已完成(亩)</div>
+		</div>
+		<div class='bottomRightIcon'>
+			<div class="fontInfo">112.92</div>
+			<div class="font">累计面积(亩)</div>
+		</div>
+
 	</div>
 </template>
 
 <script>
 </script>
 <style>
- .Background{
-	 
-	 margin-top: 10rem;
-	 margin-left:5rem ;
-	 height: 120rem;
-	 width: 120rem;
-	 background: url('@/assets/images/base.png') ;
-	 border: 1px solid #53b8ff;
- }
-</style>
+	.Background {
+		margin-top: 10rem;
+		margin-left: 5rem;
+		font-size: 14rem;
+		height: 100rem;
+		width: 345rem;
+		background: url('@/assets/images/basic.png') no-repeat;
+
+	}
+
+	.Background p {
+		margin-top: 0rem;
+		text-indent: 30rem;
+		margin-left: 150rem;
+		display: inline-block;
+		text-align: left;
+	}
+
+	.leftTitle {
+		float: left;
+		width: 200rem;
+		display: inline-block
+	}
+
+	.topIcon {
+		margin-top: 15rem;
+		margin-left: 10rem;
+		height: 44rem;
+		width: 130rem;
+		background: url('@/assets/images/icon.png') no-repeat;
+	}
+
+	.bottomIcon {
+		margin-left: 10rem;
+		margin-top: 15rem;
+		height: 44rem;
+		width: 130rem;
+		background: url('@/assets/images/bottom.png') no-repeat;
+	}
+
+	.topRightIcon {
+		margin-right: 10rem;
+		margin-top: 15rem;
+		height: 44rem;
+		width: 130rem;
+		background: url('@/assets/images/rightTop.png') no-repeat;
+	}
+
+	.bottomRightIcon {
+		margin-right: 10rem;
+		margin-top: 15rem;
+		height: 44rem;
+		width: 130rem;
+		background: url('@/assets/images/rightBottom.png') no-repeat;
+	}
+
+	.rightTitle {
+		float: right;
+		display: inline-block
+	}
+
+	.fontInfo {
+		font-size: 24rem;
+		color: rgb(200, 250, 255);
+		margin-left: 50rem;
+
+	}
+
+	.font {
+		font-size: 14rem;
+		color: rgb(200, 250, 255);
+		margin-left: 50rem;
+	}
+</style>

src/views/Table/components/TianluEngin.vue

@@ -0,0 +1,28 @@
+  <template>
+	  <div class="Chart"></div>
+ 	
+ </template>
+ 
+ <script>
+ 	export default {
+ 		data() {
+ 			return {
+ 				option: {}
+ 			}
+ 		},
+ 		created() {},
+ 		mounted() {
+ 			
+ 		},
+ 		methods: {
+ 
+ 		},
+ 
+ 	}
+ </script>
+ 
+ <style>
+	
+	
+ </style>
+ 

src/views/Table/components/WaterLevelChart.vue

@@ -1,91 +1,126 @@
-  <template>
- 	<div style="display: inline-block;float:left">
- 		<jt-echarts style="width: 166rem;height: 166rem;margin:10rem" :chartData="option"></jt-echarts>
- 	</div>
-	<div class="text">
-		123123
-	</div>
- </template>
- 
- <script>
- 	export default {
- 		data() {
- 			return {
- 				option: {}
- 			}
- 		},
- 		created() {},
- 		mounted() {
- 			this.typeCharts0()
- 		},
- 		methods: {
- 
- 			typeCharts0() {
- 				this.option = this.getOption();
- 				// var chartDom = document.getElementById('echarts');
- 				// var myChart = echarts.init(chartDom);
- 				// myChart.setOption(option, true);
- 			},
- 			getOption(data) {
- 				let option = {
- 					tooltip: {
- 						show: true
- 					},
- 					series: [{
- 						name: '睡了',
- 						type: 'liquidFill',
- 						radius: '160rem',
- 						data: [0.6],
- 						label: {
- 							normal: {
- 								color: '#27e5f1',
- 								insideColor: '#fff',
- 								textStyle: {
- 									fontSize: 40,
- 									fontWeight: 'bold',
- 								}
- 							}
- 						},
- 						color: [{
- 							type: 'linear',
- 							x: 0,
- 							y: 1,
- 							x2: 0,
- 							y2: 0,
- 							colorStops: [{
- 								offset: 1,
- 								color: ['#6a7feb'], // 0% 处的颜色
- 							}, {
- 								offset: 0,
- 								color: ['#27e5f1'], // 100% 处的颜色
- 							}],
- 							global: false // 缺省为 false
- 						}],
- 						outline: {
- 							show: true,
- 							borderDistance: 5,
- 							itemStyle: {
- 								borderColor: '#27e5f1',
- 								borderWidth: 3
- 							}
- 						}
- 					}]
- 					
- 				};
- 				return option;
- 			}
- 
- 		},
- 
- 	}
- </script>
- 
- <style>
-	 .text{
-		 height:160rem;
-		 width:160rem;
-		 background-color: red;
-		 display: inline-block;
-	 }
- </style>
- 
+<template>
+  	<div style="display: inline-block;float:left">
+  		<jt-echarts style="width: 166rem;height: 166rem;margin-top:25rem" :chartData="option"></jt-echarts>
+  	</div>
+  	<div class="text">
+  		<div class="left">
+  			<div class="leftTop">15.7亩</div>
+  			<div class="leftMid">灌溉面积</div>
+  			<div class="leftTop">180个</div>
+  			<div class="leftMid">灌溉井数</div>
+  			<div class="leftTop">15.4km</div>
+  			<div class="leftMid">灌溉管网</div>
+  		</div>
+  		<div class="right">
+  			<div class="leftTop">280个</div>
+  			<div class="leftMid">覆盖地块</div>
+  			<div class="leftTop">83条</div>
+  			<div class="leftMid">灌溉水渠</div>
+  			<div class="leftTop">8.9km</div>
+  			<div class="leftMid">排水管网</div>
+  		</div>
+
+  	</div>
+  </template>
+
+  <script>
+  	export default {
+  		data() {
+  			return {
+  				option: {}
+  			}
+  		},
+  		created() {},
+  		mounted() {
+  			this.typeCharts()
+  		},
+  		methods: {
+  			typeCharts() {
+  				this.option = this.getOption();
+  				// var chartDom = document.getElementById('echarts');
+  				// var myChart = echarts.init(chartDom);
+  				// myChart.setOption(option, true);
+  			},
+  			getOption(data) {
+  				let option = {
+  					tooltip: {
+  						show: true
+  					},
+  					series: [{
+  						name: '睡了',
+  						type: 'liquidFill',
+  						radius: '150rem',
+  						data: [0.80],
+  						label: {
+  							normal: {
+  								color: '#27e5f1',
+  								insideColor: '#fff',
+  								textStyle: {
+  									fontSize: 40,
+  									fontWeight: 'bold',
+  								}
+  							}
+  						},
+  						color: [{
+  							type: 'linear',
+  							x: 0,
+  							y: 1,
+  							x2: 0,
+  							y2: 0,
+  							colorStops: [{
+  								offset: 1,
+  								color: ['#6a7feb'], // 0% 处的颜色
+  							}, {
+  								offset: 0,
+  								color: ['#27e5f1'], // 100% 处的颜色
+  							}],
+  							global: false // 缺省为 false
+  						}],
+  						outline: {
+  							show: true,
+  							borderDistance: 5,
+  							itemStyle: {
+  								borderColor: '#27e5f1',
+  								borderWidth: 3
+  							}
+  						}
+  					}]
+
+  				};
+  				return option;
+  			}
+
+  		},
+
+  	}
+  </script>
+
+  <style>
+  	.text {
+  		margin-top: 10rem;
+  		height: 170rem;
+  		width: 165rem;
+
+  		display: inline-block;
+  	}
+
+  	.left {
+  		float: left;
+
+  	}
+
+  	.leftTop {
+  		margin-top: 10rem;
+  		color: rgb(200, 250, 255);
+  		font-size: 24rem;
+  		font-weight: bold;
+  	}
+
+  	.leftMid {
+  		color: rgb(200, 250, 255);
+  	}
+
+  	.right {
+  		float: right;
+  	}
+  </style>