no message

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>

src/views/test/components/SoilMoisture.vue

@@ -1,13 +1,12 @@
 <template>
-	<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 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'
-	 vue.prototype.$echarts = echarts
+	// import echarts from 'echarts' 这种方式高版本不支持
+	import * as echarts from 'echarts'
 
 	export default {
 		data() {
@@ -18,6 +17,26 @@
 		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() {
@@ -28,194 +47,212 @@
 			},
 			getOption(data) {
 				let option = {
-					color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
-					  title: {
-					    text: 'Gradient Stacked Area Chart'
-					  },
-					  tooltip: {
-					    trigger: 'axis',
-					    axisPointer: {
-					      type: 'cross',
-					      label: {
-					        backgroundColor: '#6a7985'
-					      }
-					    }
-					  },
-					  legend: {
-					    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
-					  },
-					  toolbox: {
-					    feature: {
-					      saveAsImage: {}
-					    }
-					  },
-					  grid: {
-					    left: '3%',
-					    right: '4%',
-					    bottom: '3%',
-					    containLabel: true
-					  },
-					  xAxis: [
-					    {
-					      type: 'category',
-					      boundaryGap: false,
-					      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-					    }
-					  ],
-					  yAxis: [
-					    {
-					      type: 'value'
-					    }
-					  ],
-					  series: [
-					    {
-					      name: 'Line 1',
-					      type: 'line',
-					      stack: 'Total',
-					      smooth: true,
-					      lineStyle: {
-					        width: 0
-					      },
-					      showSymbol: false,
-					      areaStyle: {
-					        opacity: 0.8,
-					        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: [140, 232, 101, 264, 90, 340, 250]
-					    },
-					    {
-					      name: 'Line 2',
-					      type: 'line',
-					      stack: 'Total',
-					      smooth: true,
-					      lineStyle: {
-					        width: 0
-					      },
-					      showSymbol: false,
-					      areaStyle: {
-					        opacity: 0.8,
-					        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, 282, 111, 234, 220, 340, 310]
-					    },
-					    {
-					      name: 'Line 3',
-					      type: 'line',
-					      stack: 'Total',
-					      smooth: true,
-					      lineStyle: {
-					        width: 0
-					      },
-					      showSymbol: false,
-					      areaStyle: {
-					        opacity: 0.8,
-					        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, 132, 201, 334, 190, 130, 220]
-					    },
-					    {
-					      name: 'Line 4',
-					      type: 'line',
-					      stack: 'Total',
-					      smooth: true,
-					      lineStyle: {
-					        width: 0
-					      },
-					      showSymbol: false,
-					      areaStyle: {
-					        opacity: 0.8,
-					        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-					          {
-					            offset: 0,
-					            color: 'rgb(255, 0, 135)'
-					          },
-					          {
-					            offset: 1,
-					            color: 'rgb(135, 0, 157)'
-					          }
-					        ])
-					      },
-					      emphasis: {
-					        focus: 'series'
-					      },
-					      data: [220, 402, 231, 134, 190, 230, 120]
-					    },
-					    {
-					      name: 'Line 5',
-					      type: 'line',
-					      stack: 'Total',
-					      smooth: true,
-					      lineStyle: {
-					        width: 0
-					      },
-					      showSymbol: false,
-					      label: {
-					        show: true,
-					        position: 'top'
-					      },
-					      areaStyle: {
-					        opacity: 0.8,
-					        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-					          {
-					            offset: 0,
-					            color: 'rgb(255, 191, 0)'
-					          },
-					          {
-					            offset: 1,
-					            color: 'rgb(224, 62, 76)'
-					          }
-					        ])
-					      },
-					      emphasis: {
-					        focus: 'series'
-					      },
-					      data: [220, 302, 181, 234, 210, 290, 150]
-					    }
-					  ]
-	
+					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>
+</style>

src/views/test/test.vue

@@ -1,5 +1,16 @@
 <script setup>
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
 	import SoilMoisture from "../test/components/SoilMoisture.vue"
+	import SeedingMonitor from "../test/components/SeedlingMonitor.vue"
 </script>
 
 <template>
@@ -11,8 +22,8 @@
 		
 	</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="气象监测">