no message

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/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,124 +1,126 @@
-  <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.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: '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;
+<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>
 
-	 }
-	 .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>
- 
+  	</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>