Merge branch 'ZHNY_LHR' into ZHNY_DCF

src/views/Main/components/ZhHeader.vue

@@ -1,14 +1,15 @@
 <template>
 	<!-- 标题logo-->
 	<div class="header">
-		<router-link to="/home/Map3d">
-			<div :class="[yztTitle?'YztTitle':'YztXzTitle']" @click="slideTitle('YztTitle')"></div>
-		</router-link>
+
+		<div :class="[yztTitle?'YztTitle':'YztXzTitle']" @click="slideTitle('YztTitle')"></div>
+
 		<router-link to="/home/table">
 			<div :class="[sqTitle?'SqTitle':'SqXzTitle']" @click="slideTitle('SqTitle')"></div>
 		</router-link>
-		
-		<div :class="[ggTitle?'GgTitle':'GgXzTitle']" @click="slideTitle('GgTitle')"></div>
+		<router-link to="/home/Map3d">
+			<div :class="[ggTitle?'GgTitle':'GgXzTitle']" @click="slideTitle('GgTitle')"></div>
+		</router-link>
 		<div :class="[ywTitle?'YwTitle':'YwXzTitle']" @click="slideTitle('YwTitle')"></div>
 	</div>
 	<div class="dataTime">
@@ -18,19 +19,22 @@
 		<weather></weather>
 	</div>
 </template>
-   
+
 <script>
 	import DataTime from "../../Map3d/components/DataTime.vue";
 	import weather from "../../Map3d/components/weather.vue"
-	
+
 	export default {
 		name: "ZhHeader",
-		components:{DataTime,weather},
+		components: {
+			DataTime,
+			weather
+		},
 		data() {
 			return {
-				yztTitle: false,
+				yztTitle: true,
 				sqTitle: true,
-				ggTitle: true,
+				ggTitle: false,
 				ywTitle: true
 			}
 		},
@@ -160,16 +164,18 @@
 		background-size: 100% 100%;
 		position: absolute;
 	}
-	.dataTime{
-		left:92%;
+
+	.dataTime {
+		left: 92%;
 		z-index: 9999;
 		width: 150rem;
 		height: 120rem;
 		position: absolute;
 	}
-	.weather{
-		left:2%;
-		top:2.5%;
+
+	.weather {
+		left: 2%;
+		top: 2.5%;
 		z-index: 9999;
 		width: 150rem;
 		height: 120rem;

src/views/Map3d/components/weather.vue

@@ -1,9 +1,9 @@
 <template>
 	<div class="box">
-		<p class="boxCity">{{weatcherData.city}}市</p>
-		<p class="boxWeather">{{weatcherData.wea}}<br>
+		<p class="boxCity">{{weatcherData.city}}</p>
+		<p class="boxWeather">{{weatcherData.weather}}<br>
 		<label class="boxTemperature">
-			{{weatcherData.tem}}°
+			{{weatcherData.humidity}}°
 		</label>
 		</p>
 
@@ -29,17 +29,17 @@
 		},
 		methods: {
 			getWeather() { // 第三方天气api接口
-				axios.get('https://yiketianqi.com/free/day', {
+				axios.get('https://restapi.amap.com/v3/weather/weatherInfo', {
 					params: {
-						unescape: "1",
-						appid: '66192398',
-						appsecret: 'cqIyJ5ZP',
+						key: "3e7e20b74481bb09b90dade55acc35c3",
+						city: '370100',
+						output: 'JSON',
 						// version: 'v91'
 					}
 				}).then(res => {
-					console.log('555', res.data);
-					if (res.data) {
-						this.weatcherData = res.data;
+					
+					if (res.data.lives) {
+						this.weatcherData = res.data.lives[0];
 					}
 				}).catch(err => {
 					console.log(err)

src/views/Map3d/components/ysltj.vue

@@ -3,10 +3,10 @@
 </script>
 
 <template>
-		<div class="middleviewer">
-			<!-- <waterChart></waterChart> -->
-			<jt-charts :option="mulColumnZZTData" ></jt-charts>
-		</div>
+	<div class="middleviewer">
+		<!-- <waterChart></waterChart> -->
+		<jt-echarts :chartData="option" style="width: 310rem;height: 275rem;margin:10rem 0 0 0;"></jt-echarts>
+	</div>
 </template>
 
 <script>
@@ -19,41 +19,45 @@
 				xData: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //横坐标
 				yData: [23, 24, 18, 25, 27, 28, 25, 26, 25, 18, 19, 23], //人数数据
 				taskDate: [16, 18, 19, 17, 18, 20, 19, 15, 16, 18, 17, 16],
-				mulColumnZZTData:{}
+				option: {}
 
 			}
 		},
 		methods: {
 			initEcharts() {
 				// 多列柱状图
-				this.mulColumnZZTData = {
+				this.option = {
 					xAxis: {
 						data: this.xData,
 					},
 
-					tooltip: { //提示框组件
-						trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
-						axisPointer: {
-							// 坐标轴指示器，坐标轴触发有效
-							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+					// tooltip: { //提示框组件
+					// 	trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
+					// 	axisPointer: {
+					// 		// 坐标轴指示器，坐标轴触发有效
+					// 		type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+					// 	},
+					// 	backgroundColor: "rgba(255,255,255,0.2)",
+					// 	borderColor: "rgba(255,255,255,0.2)",
+					// 	textStyle: { // 提示框浮层的文本样式。
+					// 		color: 'rgba(255,255,255,0.8)',
+
+					// 	},
+					// },
+					toolbox: {
+						show: true,
+						/* feature: {
+							restore: {
+								show: true
 						},
-						backgroundColor: "rgba(255,255,255,0.2)",
-						borderColor: "rgba(255,255,255,0.2)",
-						textStyle: { // 提示框浮层的文本样式。
-							color: 'rgba(255,255,255,0.8)',
-
-						},
-
-
+	
+						} */
 					},
-
 					// 图例
 					legend: {
-						data: ["去年灌溉", "今年灌溉"],
-						top: "0%",
 						textStyle: {
 							color: '#ffffff' //字体颜色
-						},		
+						},
 
 					},
 					yAxis: {
@@ -74,21 +78,17 @@
 					series: [{
 							type: "bar", //形状为柱状图
 							data: this.yData,
+							name: "今年灌溉m³", // legend属性
 							itemStyle: {
 								// 修改柱子圆角
 								barBorderRadius: [30, 30, 30, 30],
 								shadowColor: "rgba(84,112,198,1)",
 								shadowBlur: 4,
 							},
-							name: "今年灌溉", // legend属性
-							label: {
-								// 柱状图上方文本标签，默认展示数值信息
-								show: false,
-								position: "top"
-							}
 						},
 						{
 							type: "bar", //形状为柱状图
+							name: "去年灌溉m³", // legend属性
 							data: this.taskDate,
 							itemStyle: {
 								// 修改柱子圆角
@@ -96,33 +96,39 @@
 								shadowColor: "rgba(145,204,117,1)",
 								shadowBlur: 4,
 							},
-							name: "去年灌溉", // legend属性
-							label: {
-								// 柱状图上方文本标签，默认展示数值信息
-								show: false,
-								position: "top"
-							}
+						
 						}
 					]
 				};
-			}
+			},
+			
 
 		},
 
-		/* 	getName() {
-				this.viewersName = document.getElementById("inputValue").value;
-			}, */
 
 
 		mounted() {
 			this.initEcharts()
+			let _this = this
+			var t1=setTimeout(function() {
+				_this.option.series = [{
+						data: _this.yData
+					},
+					{
+						data: _this.taskDate
+					}
+				]
+
+			}, 1000);
+			
 			
+
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-/* 	.mainview {
+	/* 	.mainview {
 		width: 100%;
 		height: 100%;
 	} */
@@ -133,7 +139,7 @@
 		margin-left: 40rem;
 	}
 
-/* 	::-webkit-scrollbar {
+	/* 	::-webkit-scrollbar {
 		width: 0rem;
 		height: 0rem;
 	} */