Parcourir la source

Merge branch 'ZHNY_LHR' into ZHNY_DCF

# Conflicts:
#	src/views/test/test.vue
DESKTOP-GBVU60Q\dell il y a 2 ans
Parent
commit
9352a543f5

+ 115 - 0
src/views/test/components/SeedlingMonitor.vue

@@ -0,0 +1,115 @@
+<template>
+
+	<div class="video">
+		<video class="video11" autoplay controls loop muted></video>
+	</div>
+	<div class="rightContent">
+		<div class="font">苗情设备</div>
+		<div class="selectItem">
+			<el-select size="small" v-model="value" placeholder="请选择">
+				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+				</el-option>
+			</el-select>
+		</div>
+
+	</div>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				options: [{
+					value: '选项1',
+					label: '设备一'
+				}, {
+					value: '选项2',
+					label: '设备二'
+				}, {
+					value: '选项3',
+					label: '设备三'
+				}, {
+					value: '选项4',
+					label: '设备一'
+				}, {
+					value: '选项5',
+					label: '设备五'
+				}],
+				value: ''
+
+			};
+		},
+		methods: {
+
+		}
+	};
+</script>
+<style scoped>
+	.video {
+		margin-top: 20rem;
+		width: 180rem;
+		height: 180rem;
+		display: inline-block;
+		float: left;
+	}
+
+	.video11 {
+		width: 100%;
+		height: 100%;
+	}
+
+	.rightContent {
+		margin-top: 20rem;
+		width: 165rem;
+		height: 300rem;
+		display: inline-block;
+
+		float: right;
+
+	}
+
+	.font {
+		margin-top: 10rem;
+		width: 70rem;
+		height: 30rem;
+		float: left;
+	}
+
+	.el-dropdown-link {
+		cursor: pointer;
+		color: #409EFF;
+	}
+
+	.el-icon-arrow-down {
+		font-size: 12px;
+	}
+
+	.el-select-dropdown__item {
+		color: #409eff !important;
+		padding: 0 32rem 0 20rem;
+		height: 34rem;
+		line-height: 34rem;
+		font-size: 14rem;
+	}
+
+	::v-deep .el-input__inner {
+		color: #fff;
+	}
+
+	::v-deep .el-input__wrapper {
+		background-color: rgba(255, 255, 255, 0) !important;;
+		color: #0e294d !important;; 
+	}
+
+	.selectItem {
+		margin-top: 5rem;
+		width: 90rem;
+		height: 5rem;
+		display: inline-block;
+		float: right;
+
+
+
+
+
+	}
+</style>

+ 258 - 0
src/views/test/components/SoilMoisture.vue

@@ -0,0 +1,258 @@
+<template>
+	<div style="display: inline-block;float:left ;height: 190rem;width: 350rem;">
+		<jt-echarts style="width: 100%;height: 100%;margin-top:20rem" :chartData="option"></jt-echarts>
+	</div>
+</template>
+
+<script>
+	// import echarts from 'echarts' 这种方式高版本不支持
+	import * as echarts from 'echarts'
+
+	export default {
+		data() {
+			return {
+				option: {}
+			}
+		},
+		created() {},
+		mounted() {
+			this.typeCharts()
+			let _this = this
+			var t1=setTimeout(function() {
+				_this.option.series = [{
+						data:  [200, 600, 219, 264, 500, 340, 250]
+					},
+					{
+						data: [320, 400, 201, 334, 190, 350, 220]
+					},
+					{
+						data: [120, 400, 350, 500, 220, 340, 310]
+					},
+					{
+						data: [220, 402, 231, 134, 190, 230, 120]
+					},
+					{
+						data: [220, 302, 181, 234, 210, 290, 150]
+					},
+				]
+					
+			}, 1000);
+		},
+		methods: {
+			typeCharts() {
+				this.option = this.getOption();
+				// var chartDom = document.getElementById('echarts');
+				// var myChart = echarts.init(chartDom);
+				// myChart.setOption(option, true);
+			},
+			getOption(data) {
+				let option = {
+					color: ['#39e07f', '#1581ff', '#2ed0e7', '#ff9a9a', '#ffad31'],
+					/* title: {
+					   text: 'Gradient Stacked Area Chart'
+					 }, */
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'cross',
+							label: {
+								backgroundColor: '#6a7985'
+							}
+						}
+					},
+					legend: {
+						data: ['土壤温度(℃)', '土壤湿度(%RH)', '土壤PH', '土壤水势(kpa)', '电导率(us/cm)'],
+						// 图例
+						textStyle: {
+							color: 'rgb(200,255,255)' //字体颜色
+						},
+						padding: 0,
+					},
+					toolbox: {
+
+					},
+					grid: {
+						left: '3%',
+						right: '4%',
+						bottom: '3%',
+						containLabel: true
+					},
+					xAxis: [{
+							type: 'category',
+							boundaryGap: false,
+							data: ['1:00', '5:00', '9:00', '13:00', '17:00', '21:00', '24:00']
+						},
+
+
+					],
+					yAxis: [{
+						type: 'value'
+					}],
+					series: [{
+							name: '土壤温度(℃)',
+							type: 'line',
+							
+							smooth: true,
+							lineStyle: {
+								width: 2
+							},
+							lable: {
+								show: true,
+								position: 'top'
+							},
+							showSymbol: false,
+							areaStyle: {
+								opacity: 0.4,
+								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: 'rgb(128, 255, 165)'
+									},
+									{
+										offset: 1,
+										color: 'rgb(1, 191, 236)'
+									}
+								])
+							},
+							emphasis: {
+								focus: 'series'
+							},
+							data: [200, 2000, 219, 264, 500, 340, 250]
+						},
+						{
+							name: '土壤湿度(%RH)',
+							type: 'line',
+							
+							smooth: true,
+							lineStyle: {
+								width: 2
+							},
+							lable: {
+								show: true,
+								position: 'top'
+							},
+							showSymbol: false,
+							areaStyle: {
+								opacity: 0.4,
+								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: 'rgb(0, 221, 255)'
+									},
+									{
+										offset: 1,
+										color: 'rgb(77, 119, 255)'
+									}
+								])
+							},
+							emphasis: {
+								focus: 'series'
+							},
+							data: [120, 400, 350, 500, 220, 340, 310]
+						},
+						{
+							name: '土壤水势(kpa)',
+							type: 'line',
+							
+							smooth: true,
+							lable: {
+								show: true,
+								position: 'top'
+							},
+							lineStyle: {
+								width: 2
+							},
+							showSymbol: false,
+							areaStyle: {
+								opacity: 0.4,
+								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: 'rgb(55, 162, 255)'
+									},
+									{
+										offset: 1,
+										color: 'rgb(116, 21, 219)'
+									}
+								])
+							},
+							emphasis: {
+								focus: 'series'
+							},
+							data: [320, 400, 201, 334, 190, 350, 220]
+						},
+						{
+							name: '土壤PH',
+							type: 'line',
+							
+							smooth: true,
+							lable: {
+								show: true,
+								position: 'top'
+							},
+							lineStyle: {
+								width: 2
+							},
+							showSymbol: false,
+							areaStyle: {
+								opacity: 0.4,
+								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: '#ff9a9a'
+									},
+									{
+										offset: 1,
+										color: '#ff9a9a'
+									}
+								])
+							},
+							emphasis: {
+								focus: 'series'
+							},
+							data: [220, 402, 231, 134, 190, 230, 120]
+						},
+						{
+							name: '电导率(us/cm)',
+							type: 'line',
+							
+							lable: {
+								show: true,
+								position: 'top'
+							},
+							smooth: true,
+							lineStyle: {
+								width: 2
+							},
+							showSymbol: false,
+							label: {
+								show: true,
+								position: 'top'
+							},
+							areaStyle: {
+								opacity: 0.4,
+								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: 'rgb(255, 191, 0)'
+									},
+									{
+										offset: 1,
+										color: 'rgb(255, 191, 0)'
+									}
+								])
+							},
+							emphasis: {
+								focus: 'series'
+							},
+							data: [220, 302, 181, 234, 210, 290, 150]
+						}
+					]
+
+				};
+				return option;
+			}
+
+		},
+		
+			
+	}
+</script>
+
+<style>
+</style>

+ 7 - 4
src/views/test/test.vue

@@ -1,4 +1,5 @@
 <script setup>
+<<<<<<< HEAD
 
 	import cqjcyj from "./components/cqjcyj.vue"; 
 	import cqzrqs from "./components/cqzrqs.vue"; 
@@ -6,6 +7,8 @@
 	import WeatherWatch from './components/WeatherWatch.vue';
 	import disaster from './components/disaster.vue';
 
+	import SoilMoisture from "../test/components/SoilMoisture.vue"
+	import SeedingMonitor from "../test/components/SeedlingMonitor.vue"
 </script>
 
 <template>
@@ -17,8 +20,8 @@
 		<cqjcyj></cqjcyj>
 	</jt-popup2>
 	
-	<jt-popup2 title="" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" >
-		
+	<jt-popup2 title="苗情监测数据" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" >
+		<SeedingMonitor></SeedingMonitor>
 	</jt-popup2>
 	
 	<jt-popup3  title="气象监测">
@@ -29,8 +32,8 @@
 		<cqzrqs></cqzrqs>
 	</jt-popup3>
 	
-	<jt-popup3  title="" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)">
-		
+	<jt-popup3  title="土地墒情监测数据" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)">
+		<SoilMoisture></SoilMoisture>
 	</jt-popup3>
 </template>