no message

src/views/Table/Table.vue

@@ -10,7 +10,7 @@
 </script>
 
 <template>
-	<jt-popup2 title="农田基本信息" ref="BasicInfor">
+	<jt-popup2 title="项目基本信息" ref="BasicInfor">
 		<BasicInfor></BasicInfor>
 	</jt-popup2>
 

src/views/Table/components/BasicInfor.vue

@@ -1,59 +1,82 @@
 <template>
 
 	<div class="Background">
-		<p>
+		<div class="imgback"></div>
+		<div class="ref000" style="font-size: 10rem; ">
 			系统建设应坚持“先进、可靠、实用、落地”的原则，实行“整体规划、分步实施；统一标准、加强管理；先进实用、政策落地”的建设方针。
-		</p>
+		</div>
 	</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 class="Titles">
+		<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 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>
 	</div>
+
 </template>
 
 <script>
 </script>
-<style>
+<style scoped>
+	.imgback {
+		background: url('@/assets/images/basic.png') no-repeat;
+		background-size: 100% 100%;
+		width: 100rem;
+		height: 100rem;
+		display: inline-block;
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+
 	.Background {
 		margin-top: 10rem;
 		margin-left: 5rem;
 		font-size: 14rem;
 		height: 100rem;
 		width: 345rem;
-		background: url('@/assets/images/basic.png') no-repeat;
-		background-size: 33% 100%;
+		position: relative;
 	}
 
-	.Background p {
-		margin-top: 0rem;
+	.ref000 {
+		position: absolute;
+		height: 100rem;
+		width: 220rem;
+		right: 0;
+		top: 0;
 		text-indent: 30rem;
-		margin-left: 150rem;
+		/* margin-left: 100rem; */
 		display: inline-block;
 		text-align: left;
-		font-size: 14rem;
+		font-size: 14rem !important;
+		overflow-y:auto
+	}
+	.Titles{
+		margin-top:2%
+		
 	}
 
 	.leftTitle {
-		float: left;
+		
 		width: 200rem;
 		display: inline-block
 	}
@@ -62,32 +85,36 @@
 		margin-top: 15rem;
 		margin-left: 10rem;
 		height: 44rem;
-		width: 130rem;
+		width: 140rem;
 		background: url('@/assets/images/icon.png') no-repeat;
+		background-size: 35%, 100%;
 	}
 
 	.bottomIcon {
 		margin-left: 10rem;
 		margin-top: 15rem;
 		height: 44rem;
-		width: 130rem;
+		width: 140rem;
 		background: url('@/assets/images/bottom.png') no-repeat;
+		background-size: 35%, 100%;
 	}
 
 	.topRightIcon {
 		margin-right: 10rem;
 		margin-top: 15rem;
 		height: 44rem;
-		width: 130rem;
+		width: 140rem;
 		background: url('@/assets/images/rightTop.png') no-repeat;
+		background-size: 35%, 100%;
 	}
 
 	.bottomRightIcon {
 		margin-right: 10rem;
 		margin-top: 15rem;
 		height: 44rem;
-		width: 130rem;
+		width: 140rem;
 		background: url('@/assets/images/rightBottom.png') no-repeat;
+		background-size: 35%, 100%;
 	}
 
 	.rightTitle {
@@ -96,6 +123,7 @@
 	}
 
 	.fontInfo {
+		height: 60%;
 		font-size: 24rem;
 		color: rgb(200, 250, 255);
 		margin-left: 50rem;

src/views/Table/components/TianluEngin.vue

@@ -1,81 +1,399 @@
 <template>
-  	
+	<div class="Chart">
+		<div class="fonts">
+			100%
+		</div>
+		<div class="bottomFonts">
+			道路通达率
+		</div>
+		
+	</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 class="leftTop">11.2km</div>
+			<div class="leftMid">田路总长度</div>
+			<div class="leftTop">0.8km</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 class="rightTop">1.8km</div>
+			<div class="rightMid">主路长度</div>
+			<div class="rightTop">0.4km</div>
+			<div class="rightMid">生产路长度</div>
 		</div>
-	
+
 	</div>
 
-  </template>
+</template>
 
-  <script>
-  	export default {
-  		data() {
-  			return {
-  				option: {}
-  			}
-  		},
-  		created() {
+<script>
+	export default {
+		data() {
+			return {
+				option: {},
+				value: 50,
+				angle: 30
+			}
+		},
+		created() {
 
-  		},
-  		mounted() {
+		},
+		mounted() {
+			
+		},
+		methods: {
+			/* getCirlPoint(x0, y0, r, angle) {
+				let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
+				let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
+				return {
+					x: x1,
+					y: y1
+				}
+			},
+			typeCharts() {
+				this.option = this.getOption();
+				// var chartDom = document.getElementById('echarts');
+				// var myChart = echarts.init(chartDom);
+				// myChart.setOption(option, true);
+			},
+			getOption(data) {
+				let angle = 30;
+				let option = {
+					title: {
+						text: '{a|' + '企业' + '}',
+						x: 'center',
+						y: 'center',
+						textStyle: {
+							rich: {
+								a: {
+									fontSize: 20,
+									color: '#29EEF3'
+					   },
 
-  		},
-  		methods: {
+								c: {
+									fontSize: 16,
+									color: '#ffffff',
+									// padding: [5,0]
+								}
+							}
+						}
+					},
+					series: [{
+							name: "ring5",
+							type: 'custom',
+							coordinateSystem: "none",
+							renderItem: function(params, api) {
+								return {
+									type: 'arc',
+									shape: {
+										cx: api.getWidth() / 2,
+										cy: api.getHeight() / 2,
+										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
+										startAngle: (0 + angle) * Math.PI / 180,
+										endAngle: (90 + angle) * Math.PI / 180
+									},
+									style: {
+										stroke: "#0CD3DB",
+										fill: "transparent",
+										lineWidth: 1.5
+									},
+									silent: true
+								};
+							},
+							data: [0]
+						},
+						{
+							name: "ring5",
+							type: 'custom',
+							coordinateSystem: "none",
+							renderItem: function(params, api) {
+								return {
+									type: 'arc',
+									shape: {
+										cx: api.getWidth() / 2,
+										cy: api.getHeight() / 2,
+										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
+										startAngle: (180 + angle) * Math.PI / 180,
+										endAngle: (270 + angle) * Math.PI / 180
+									},
+									style: {
+										stroke: "#0CD3DB",
+										fill: "transparent",
+										lineWidth: 1.5
+									},
+									silent: true
+								};
+							},
+							data: [0]
+						},
+						{
+							name: "ring5",
+							type: 'custom',
+							coordinateSystem: "none",
+							renderItem: function(params, api) {
+								return {
+									type: 'arc',
+									shape: {
+										cx: api.getWidth() / 2,
+										cy: api.getHeight() / 2,
+										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
+										startAngle: (270 + -angle) * Math.PI / 180,
+										endAngle: (40 + -angle) * Math.PI / 180
+									},
+									style: {
+										stroke: "#0CD3DB",
+										fill: "transparent",
+										lineWidth: 1.5
+									},
+									silent: true
+								};
+							},
+							data: [0]
+						},
+						{
+							name: "ring5",
+							type: 'custom',
+							coordinateSystem: "none",
+							renderItem: function(params, api) {
+								return {
+									type: 'arc',
+									shape: {
+										cx: api.getWidth() / 2,
+										cy: api.getHeight() / 2,
+										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
+										startAngle: (90 + -angle) * Math.PI / 180,
+										endAngle: (220 + -angle) * Math.PI / 180
+									},
+									style: {
+										stroke: "#0CD3DB",
+										fill: "transparent",
+										lineWidth: 1.5
+									},
+									silent: true
+								};
+							},
+							data: [0]
+						},
+						{
+							name: "ring5",
+							type: 'custom',
+							coordinateSystem: "none",
+							renderItem: function(params, api) {
+								let x0 = api.getWidth() / 2;
+								let y0 = api.getHeight() / 2;
+								let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
+								let point = {
+									x:30,
+									y:40
+								}
+								return {
+									type: 'circle',
+									shape: {
+										cx: point.x,
+										cy: point.y,
+										r: 4
+									},
+									style: {
+										stroke: "#0CD3DB", //粉
+										fill: "#0CD3DB"
+									},
+									silent: true
+								};
+							},
+							data: [0]
+						},
+						{
+							name: "ring5", //绿点
+							type: 'custom',
+							coordinateSystem: "none",
+							renderItem: function(params, api) {
+								let x0 = api.getWidth() / 2;
+								let y0 = api.getHeight() / 2;
+								let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
+								let point = {
+									x:30,
+									y:40
+								}
+								return {
+									type: 'circle',
+									shape: {
+										cx: point.x,
+										cy: point.y,
+										r: 4
+									},
+									style: {
+										stroke: "#0CD3DB", //绿
+										fill: "#0CD3DB"
+									},
+									silent: true
+								};
+							},
+							data: [0]
+						},
+						{
+							name: '覆盖率',
+							type: 'pie',
+							radius: ['58%', '45%'],
+							silent: true,
+							clockwise: true,
+							startAngle: 90,
+							z: 0,
+							zlevel: 0,
+							label: {
+								normal: {
+									position: "center",
 
-  		},
+								}
+							},
+							data: [{
+									value: 79,
+									name: "",
+									itemStyle: {
+										normal: {
+											color: { // 完成的圆环的颜色
+												colorStops: [{
+													offset: 0,
+													color: '#4FADFD' // 0% 处的颜色
+												}, {
+													offset: 1,
+													color: '#28E8FA' // 100% 处的颜色
+												}]
+											},
+										}
+									}
+								},
+								{
+									value: 100 - this.value,
+									name: "",
+									label: {
+										normal: {
+											show: false
+										}
+									},
+									itemStyle: {
+										normal: {
+											color: "#173164"
+										}
+									}
+								}
+							]
+						},
+						{
+							name: "",
+							type: "gauge",
+							radius: "58%",
+							center: ['50%', '50%'],
+							startAngle: 0,
+							endAngle: 359.9,
+							splitNumber: 8,
+							hoverAnimation: true,
+							axisTick: {
+								show: false
+							},
+							splitLine: {
+								length: 60,
+								lineStyle: {
+									width: 5,
+									color: "#061740"
+								}
+							},
+							axisLabel: {
+								show: false
+							},
+							pointer: {
+								show: false
+							},
+							axisLine: {
+								lineStyle: {
+									opacity: 0
+								}
+							},
+							detail: {
+								show: false
+							},
+							data: [{
+								value: 0,
+								name: ""
+							}]
+						},
 
-  	}
-  </script>
+					]
+
+				};
+				return option;
+			} */
+
+		},
+
+	}
+</script>
 
-  <style>
+<style scoped>
+	.Chart {
 
-  	.imga {
-		margin-left:-200rem ;
-  		width: 150rem;
-  		height: 200px;
+		height: 130rem;
+		width: 130rem;
+		background:url("@/assets/images/tongda.png") no-repeat;
+		background-size: 100% 100%;
 		display: inline-block;
-		float:left
-  	}
+		margin-top: 40rem;
+		margin-right: 400rem;
+		position: absolute;
+	}
+	.fonts{
+		font-size: 24rem;
+		text-align: center;
+		color: rgb(200, 250, 255);
+		
+	}
+	.bottomFonts{
+		margin-top: 90rem;
+		font-size: 18rem;
+		color: rgb(200, 250, 255);
+	}
+
 	.text {
 		margin-top: 10rem;
 		height: 170rem;
 		width: 165rem;
-	    float:right;
+		margin-left: 150rem;
 		display: inline-block;
+		position: relative;
 	}
-	
+
 	.left {
+		width: 50%;
 		float: left;
-	
+		
+
 	}
-	
+
 	.leftTop {
-		margin-top: 10rem;
+		margin-top: 30rem;
 		color: rgb(200, 250, 255);
 		font-size: 24rem;
 		font-weight: bold;
 	}
-	
+
 	.leftMid {
 		color: rgb(200, 250, 255);
+		font-size: 16rem;
 	}
-	
+
 	.right {
+		width: 50%;
 		float: right;
 	}
-  </style>
+	.rightTop {
+		margin-top: 30rem;
+		color: rgb(200, 250, 255);
+		font-size: 24rem;
+		font-weight: bold;
+	}
+	
+	.rightMid {
+		color: rgb(200, 250, 255);
+		font-size: 16rem;
+	}
+	
+</style>

src/views/Table/components/WaterLevelChart.vue

@@ -1,6 +1,6 @@
 <template>
-  	<div style="display: inline-block;float:left">
-  		<jt-echarts style="width: 166rem;height: 166rem;margin-top:25rem" :chartData="option"></jt-echarts>
+  	<div style="display: inline-block;float:left ;height: 170rem;width: 160rem;">
+  		<jt-echarts style="width: 100%;height: 100%;margin-top:25rem" :chartData="option"></jt-echarts>
   	</div>
   	<div class="text">
   		<div class="left">
@@ -47,9 +47,9 @@
   						show: true
   					},
   					series: [{
-  						name: '睡了',
+  						name: '完成',
   						type: 'liquidFill',
-  						radius: '100%',
+  						radius: '80%',
   						data: [0.80],
   						label: {
   							normal: {
@@ -95,7 +95,7 @@
   	}
   </script>
 
-  <style>
+  <style scoped>
   	.text {
   		margin-top: 10rem;
   		height: 170rem;
@@ -105,6 +105,7 @@
   	}
 
   	.left {
+		width: 50%;
   		float: left;
 
   	}
@@ -118,9 +119,22 @@
 
   	.leftMid {
   		color: rgb(200, 250, 255);
+		font-size: 16rem;
   	}
 
   	.right {
+		width: 50%;
   		float: right;
   	}
+	.rightTop {
+		margin-top: 10rem;
+		color: rgb(200, 250, 255);
+		font-size: 24rem;
+		font-weight: bold;
+	}
+	
+	.rightMid {
+		color: rgb(200, 250, 255);
+		font-size: 16rem;
+	}
   </style>