Merge branch 'ZHNY_DCF' into ZHNY_LHR

src/components/jt-popup/jt-popup2.vue

@@ -211,7 +211,7 @@
 
 		//滚动条一直显示
 		.middle {
-			height: calc(100% - 35rem);
+			height: calc(100% - 25rem);
 			width: 100%;
 			overflow-y: scroll;
 			padding: 0 0 0 0;

src/components/jt-popup/jt-popup3.vue

@@ -211,7 +211,7 @@
 
 		//滚动条一直显示
 		.middle {
-			height: calc(100% - 35rem);
+			height: calc(100% - 30rem);
 			width: 100%;
 			overflow-y: scroll;
 			padding: 0 0 0 0;

src/views/test/components/WeatherWatch.vue

@@ -1,8 +1,173 @@
+<script setup>
+	
+</script>
+
 <template>
+	<div class="main">
+		<div class="wendu">
+			<div class="number"> 20℃</div>
+			<div class="title">空气温度</div>
+		</div>
+		<div class="shidu">
+			<div class="number">10%RH</div>
+			<div class="title">空气湿度</div>
+		</div>
+		<div class="fengli">
+			<div class="number">2级</div>
+			<div class="title">风力</div>
+		</div>
+		<div class="fengsu">
+			<div class="number">3m/s</div>
+			<div class="title">风速</div>
+		</div>
+		<div class="fengxiang">
+			<div class="number">东北风</div>
+			<div class="title">风向</div>
+		</div>
+		<div class="CO2">
+			<div class="number">15ppm</div>
+			<div class="title">二氧化碳</div>
+		</div>
+		<div class="daqiya">
+			<div class="number">10Kpa</div>
+			<div class="title">大气压</div>
+		</div>
+		<div class="guangzhao">
+			<div class="number">400Lux</div>
+			<div class="title">光照</div>
+		</div>
+		<div class="ziwaixian">
+			<div class="number">3级</div>
+			<div class="title">紫外线</div>
+		</div>
+		<div class="fushe">
+			<div class="number">5W/㎡</div>
+			<div class="title">太阳总辐射</div>
+		</div>
+	</div>
 </template>
 
 <script>
+	let jt3d = undefined;
+	export default {
+		data() {
+			return {
+				// viewersName: '', //视角标签名称
+				// ImgurlList: [], //截图地址列表
+			}
+		},
+		methods: {
+			
+		}
+	}
 </script>
 
-<style>
-</style>
+<style lang="scss" scoped>
+	@charset "UTF-8";
+	
+	@font-face {
+		font-family: "TTTGB-Medium";
+		src: url("@/assets/fonts/fonts/TTTGB-Medium.ttf") format("truetype"),
+			url("@/assets/fonts/fonts/TTTGB-Medium.eot") format("embedded-opentype"),
+			url("@/assets/fonts/fonts/TTTGB-Medium.svg") format("svg");
+		font-weight: normal;
+		font-style: normal;
+	}
+	.number{
+		color: rgba(29,191,205,1);
+		font-weight: 600;
+		margin-top: 5rem;
+		width: 80rem;
+		margin-left: 50rem;
+		text-align: center;
+		font-family: "TTTGB-Medium", sans-serif !important;
+		font-size: 16rem;
+	}
+	.title{
+		font-size: 13rem;
+		text-shadow: 0 0 2rem 2rem rgba(29,191,205,0.8);
+		margin-top: 3rem;
+		color: rgba(245,245,245,1);
+		margin-left: 38rem;
+	}
+	
+	.main{
+		width:100%;
+		height:100%;
+		display:flex;
+		margin-top: 10rem;
+		flex:2;
+		flex-wrap: wrap;
+		justify-content: space-around;
+		align-items: center;
+		.wendu{
+			background:url('@/assets/images/qixiang/wendu.png') no-repeat;
+			background-size:100% 100%;
+			width: 140rem;
+			height: 52rem;
+		}
+		.shidu{
+			background:url('@/assets/images/qixiang/shidu.png') no-repeat;
+			background-size:100% 100%;
+			width: 140rem;
+			margin-top: 5rem;
+			height: 52rem;
+		}
+		.fengli{
+			background:url('@/assets/images/qixiang/cloud.png') no-repeat;
+			background-size:100% 100%;
+			width: 140rem;
+			margin-top: 5rem;
+			height: 52rem;
+		}
+		.fengsu{
+			background:url('@/assets/images/qixiang/cloundspeed.png') no-repeat;
+			background-size:100% 100%;
+			width: 140rem;
+			height: 52rem;
+			margin-top: 5rem;
+		}
+		.fengxiang{
+			background:url('@/assets/images/qixiang/cloudstreet.png') no-repeat;
+			background-size:100% 100%;
+			width: 140rem;
+			margin-top: 5rem;
+			height: 52rem;
+		}
+		.CO2{
+			background:url('@/assets/images/qixiang/co2.png') no-repeat;
+			background-size:100% 100%;
+			width: 140rem;
+			margin-top: 5rem;
+			height: 52rem;
+		}
+		.daqiya{
+			background:url('@/assets/images/qixiang/kpa.png') no-repeat;
+			background-size:100% 100%;
+			width: 140rem;
+			margin-top: 5rem;
+			height: 52rem;
+		}
+		.guangzhao{
+			background:url('@/assets/images/qixiang/run.png') no-repeat;
+			background-size:100% 100%;
+			width: 140rem;
+			margin-top: 5rem;
+			height: 52rem;
+		}
+		.ziwaixian{
+			background:url('@/assets/images/qixiang/ziwaixian.png') no-repeat;
+			background-size:100% 100%;
+			width: 140rem;
+			margin-top: 5rem;
+			height: 52rem;
+		}
+		.fushe{
+			background:url('@/assets/images/qixiang/fushe.png') no-repeat;
+			background-size:100% 100%;
+			width: 140rem;
+			margin-top: 5rem;
+			height: 52rem;
+		}
+	}
+</style>

src/views/test/components/cqjcyj.vue

@@ -0,0 +1,70 @@
+<script setup>
+	import haichong1 from '@/assets/images/haichong1.png';
+	import haichong2 from '@/assets/images/haichong2.png';
+	import haichong3 from '@/assets/images/haichong3.png';
+</script>
+<template>
+	<!-- <img src="@/assets/images/haichong1.png"/> -->
+	<div class="turntop">
+		<el-carousel :interval="4000" type="card" height="200rem" arrow="never">
+			<el-carousel-item v-for="(item,index) in imgList" :key="index">
+				<el-image :src='item.imgUrl'></el-image>
+			</el-carousel-item>
+		</el-carousel>
+	</div>
+	<div class="main">
+		<div>设备名称:13号地1区太阳能测报灯</div>
+		<div>检测区域:13号地东区</div>
+		<div>识别数量:7</div>
+		<div>识别种类:5</div>
+		<div>采集时间:2023年4月24日17:07:45</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				imgList: [{
+						imgUrl: haichong1
+					},
+					{
+						imgUrl: haichong2
+					},
+					{
+						imgUrl: haichong3
+					},
+
+				],
+			};
+		},
+	};
+</script>
+<style scoped>
+	.turntop{
+		margin: 10rem;
+	}
+	.el-carousel__item {
+		height: 41%;
+	}
+
+	::v-deep .el-carousel__indicators--outside {
+		margin-top: -120rem;
+	}
+
+	.el-carousel__item:nth-child(2n) {
+		background-color: #99a9bf;
+	}
+
+	.el-carousel__item:nth-child(2n+1) {
+		background-color: #d3dce6;
+	}
+
+	.main {
+		margin: 0 10rem;
+		color: rgb(200, 250, 255);
+		font-weight: 700;
+		font-size: 17rem;
+		text-align: left;
+	}
+</style>

src/views/test/components/cqzrqs.vue

@@ -0,0 +1,245 @@
+<template>
+	<div>
+		<jt-echarts style="width: 320rem;height: 260rem;margin:10rem 10rem 10rem 20rem;"
+			:chartData="option"></jt-echarts>
+	</div>
+</template>
+
+<script>
+	// import * as echarts from "echarts";
+
+	export default {
+		data() {
+			return {
+				// category: "", //横坐标
+				// yData: [1000, 1500, 1300, 1700, 1600, 1200],
+				// y2Data: [1200, 1800, 1400, 1350, 1100, 1500],
+				option: {}
+			}
+		},
+		created() {},
+		mounted() {
+			this.typeCharts0()
+			// let _this = this
+			// var t1=setTimeout(function() {
+			// 	_this.option.series = [{
+			// 			data: _this.category
+			// 		},
+			// 		{
+			// 			data: _this.dottedBase
+			// 		}
+			// 	]
+
+			// }, 1000);
+		},
+		methods: {
+			typeCharts0() {
+				var getName =['小花','小明','小红','吓不不','刃甲','加加','鸿基','新能源','家喻户晓','老师'];
+				var getValue =[219,241,174,44,435,617,114,82,77,50];
+				var max = Math.max.apply(null, getValue);
+				var getMax=[];
+				for(var i=0;i<getName.length;i++){
+				    getMax.push(max)
+				}
+				console.log(getMax) ;
+				// typeCharts0() {
+				// 	this.option = this.getOption();
+				// 	// var chartDom = document.getElementById('echarts');
+				// 	// var myChart = echarts.init(chartDom);
+				// 	// myChart.setOption(option, true);
+				// },
+				this.option = {
+					// backgroundColor: "#003366",
+					grid: {
+						left: '4%',
+						right: '2%',
+						bottom: '2%',
+						top: '2%',
+						containLabel: true
+					},
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'none'
+						},
+						formatter: function(params) {
+							return params[0].name + ' : ' + params[0].value
+						}
+					},
+					xAxis: {
+						show: false,
+						type: 'value'
+					},
+					yAxis: [{
+						type: 'category',
+						inverse: true,
+						offset: 100,
+
+						axisLabel: {
+							show: true,
+							align: 'left',
+							textStyle: {
+								color: '#66cc00',
+
+							},
+							formatter: function(value, index) {
+								var num = ''
+								var str = ''
+								var no = 'NO.';
+								num = (index + 1);
+								if (index === 0) {
+									str = '{no1|' + no + '} {num1|' + num + '} {title1|' + value + '}'
+								} else if (index === 1) {
+									str = '{no2|' + no + '} {num2|' + num + '} {title2|' + value + '}'
+								} else if (index === 2) {
+									str = '{no3|' + no + '} {num3|' + num + '} {title3|' + value + '}'
+								} else {
+									str = '{no|' + no + '} {num|' + num + '} {title|' + value + '}'
+								}
+								return str;
+
+							},
+							rich: {
+								no: {
+									color: '#ffcccc',
+									fontSize: 14,
+
+								},
+								no1: {
+									color: '#ff4d4d',
+									fontSize: 14,
+
+								},
+								no2: {
+									color: '#4dd2ff',
+									fontSize: 14,
+
+								},
+								no3: {
+									color: '#ffff00',
+									fontSize: 14,
+
+								},
+								num: {
+									color: '#fff',
+									backgroundColor: '#ffcccc',
+									width: 20,
+									height: 20,
+									fontSize: 14,
+									align: 'center',
+									borderRadius: 100
+								},
+								num1: {
+									color: '#fff',
+									backgroundColor: '#ff4d4d',
+									width: 20,
+									height: 20,
+									fontSize: 14,
+									align: 'center',
+									borderRadius: 100
+								},
+								num2: {
+									color: '#fff',
+									backgroundColor: '#4dd2ff',
+									width: 20,
+									height: 20,
+									fontSize: 14,
+									align: 'center',
+									borderRadius: 100
+								},
+								num3: {
+									color: '#fff',
+									backgroundColor: '#ffff00',
+									width: 20,
+									height: 20,
+									fontSize: 14,
+									align: 'center',
+									borderRadius: 100
+								},
+								title: {
+
+									color: '#ffcccc',
+								},
+								title1: {
+
+									color: '#ff4d4d',
+								},
+								title2: {
+
+									color: '#4dd2ff',
+								},
+								title3: {
+
+									color: '#ffff00',
+								},
+							}
+						},
+						splitLine: {
+							show: false
+						},
+						axisTick: {
+							show: false
+						},
+						axisLine: {
+							show: false
+						},
+						data: getName
+					}, {
+						type: 'category',
+						inverse: true,
+						offset: -50,
+						axisTick: 'none',
+						axisLine: 'none',
+						show: true,
+						axisLabel: {
+							textStyle: {
+								color: '#ffffff',
+								fontSize: '12'
+							},
+
+						},
+						data: getValue
+					}],
+					series: [{
+							name: '值',
+							type: 'bar',
+							zlevel: 1,
+							itemStyle: {
+								normal: {
+									barBorderRadius: 30,
+									// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+									// 	offset: 0,
+									// 	color: 'rgb(128,204,255,1)'
+									// }, {
+									// 	offset: 1,
+									// 	color: 'rgb(46,200,207,1)'
+									// }]),
+								},
+							},
+							barWidth: 20,
+							data: getValue
+						},
+						{
+							name: '背景',
+							type: 'bar',
+							barWidth: 20,
+							barGap: '-100%',
+							data: getMax,
+							itemStyle: {
+								normal: {
+									color: 'rgba(24,31,68,1)',
+									barBorderRadius: 30,
+								}
+							},
+						},
+					]
+				};
+
+			},
+		}
+
+	}
+</script>
+
+<style>
+</style>

src/views/test/components/disaster.vue

@@ -1,8 +1,264 @@
 <template>
+	<jt-echarts style="width: 330rem;height: 220rem;margin:20rem 0 10rem 10rem;" :chartData="option"></jt-echarts>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {
+				option: {},
+				app: {}
+			}
+		},
+		methods: {
+
+		},
+		mounted() {
+			
+			this.option = {
+				grid: {
+					left: 23,
+					top: 30,
+					right: 22,
+					bottom: 10,
+					containLabel: true //false是依据坐标轴来对齐的,true是依据坐标轴上面的文字边界来对齐
+				},
+				legend: {
+					top: -3,
+					right: 20,
+					itemGap: 5, //图例每项之间的间隔
+					height: 10,
+					itemWidth: 25, //图例标记的图形宽度
+					itemHeight: 10,
+					padding: [5, 0, 0, 0],
+					textStyle: {
+						padding: [1, 0, 0, -5]
+					},
+					data: [{
+							name: "温度℃",
+							textStyle: {
+								color: "#18c196"
+							}
+						},
+						{
+							name: "气压Kpa",
+							textStyle: {
+								color: "#ff976a"
+							}
+						},
+						{
+							name: "辐射W/㎡",
+							textStyle: {
+								color: "#f15441"
+							}
+						},
+						{
+							name: "湿度%RH",
+							textStyle: {
+								color: "#0089ff"
+							}
+						}
+					]
+				},
+				xAxis: {
+					type: "category",
+					boundaryGap: false, //防止统计图左侧和纵轴有间隙
+					axisTick: {
+						show: false
+					}, //隐藏纵坐标刻度小线条
+					nameTextStyle: {
+						//y轴上方单位的颜色
+						color: "#fff",
+					},
+					axisLabel: {
+						//x轴文字的配置
+						show: true,
+						textStyle: {
+							color: "rgba(255,225,255,1)",
+						},
+					},
+					splitLine: {
+						show: false,
+					},
+					axisLine: {
+						lineStyle: {
+							color: "lightgray",
+							width: 1
+						}
+					},
+					data: ["5/1", "5/2", "5/3", "5/4", "5/5"] //横坐标的标签文字
+				},
+				yAxis: {
+					type: "value",
+					name: "指标",
+					min: 0,
+					minInterval: 1,
+					nameGap:0,
+					nameLocation: "end",
+					axisTick: {
+						show: true
+					}, //隐藏纵坐标刻度小线条
+					nameTextStyle: {
+						//y轴上方单位的颜色
+						color: "#fff",
+					},
+
+					axisLabel: {
+						//x轴文字的配置
+						show: true,
+						textStyle: {
+							color: "rgba(255,225,255,1)",
+						},
+					},
+					splitLine: {
+						show: false,
+					},
+					axisLine: {
+						show:true,
+						lineStyle: {
+							color: "lightgray",
+							width: 1
+						}
+					}
+				},
+				series: [{
+						name: "温度℃",
+						smooth: false, //平滑
+						type: "line",
+						symbolSize: 5, //折线拐点大小
+						data: [22, 23, 25, 28, 25], //纵坐标值
+						itemStyle: {
+							normal: {
+								color: "#18c196", //图例颜色
+								borderWidth: 4,
+								borderColor: "#18c196",
+								lineStyle: {
+									color: "#18c196",
+									width: 2
+								}
+							}
+						},
+						areaStyle: {
+							normal: {
+								// 渐变填充色（线条下半部分）
+								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: "#18c196"
+									},
+									{
+										offset: 1,
+										color: "#18c19600"
+									}
+								])
+							}
+						}
+					},
+					{
+						name: "气压Kpa",
+						smooth: false, //平滑
+						type: "line",
+						symbolSize: 5, //折线拐点大小
+						data: [13, 16, 13, 21, 11], //纵坐标值
+						itemStyle: {
+							normal: {
+								color: "#ff976a", //图例颜色
+								borderWidth: 2,
+								borderColor: "#ff976a",
+								lineStyle: {
+									color: "#ff976a",
+									width: 1
+								}
+							}
+						},
+						areaStyle: {
+							normal: {
+								// 渐变填充色（线条下半部分）
+								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: "#ff976a"
+									},
+									{
+										offset: 1,
+										color: "#ff976a00"
+									}
+								])
+							}
+						}
+					},
+					{
+						name: "辐射W/㎡",
+						smooth: false, //平滑
+						type: "line",
+						symbolSize: 5, //折线拐点大小
+						data: [15, 13, 21, 20, 14], //纵坐标值
+						itemStyle: {
+							normal: {
+								color: "#f15441", //图例颜色
+								borderWidth: 2,
+								borderColor: "#f15441",
+								lineStyle: {
+									color: "#f15441",
+									width: 1
+								}
+							}
+						},
+						areaStyle: {
+							normal: {
+								// 渐变填充色（线条下半部分）
+								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: "#f15441"
+									},
+									{
+										offset: 1,
+										color: "#f1544100"
+									}
+								])
+							}
+						}
+					},
+					{
+						name: "湿度%RH",
+						smooth: false, //平滑
+						type: "line",
+						symbolSize: 5, //折线拐点大小
+						data: [9, 10, 11, 5, 8], //纵坐标值
+						itemStyle: {
+							normal: {
+								color: "#0089ff", //图例颜色
+								borderWidth: 2,
+								borderColor: "#0089ff",
+								lineStyle: {
+									color: "#0089ff",
+									width: 1
+								}
+							}
+						},
+						areaStyle: {
+							normal: {
+								// 渐变填充色（线条下半部分）
+								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: "#0089ff"
+									},
+									{
+										offset: 1,
+										color: "#0089ff00"
+									}
+								])
+							}
+						}
+					}
+				]
+			}
+			
+			
+			setTimeout(res=>{
+				this.option.grid.left = 22
+			},100)
+		}
+	}
 </script>
 
 <style>
-</style>
+</style>

src/views/test/test.vue

@@ -1,25 +1,22 @@
 <script setup>
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
+
+	import cqjcyj from "./components/cqjcyj.vue"; 
+	import cqzrqs from "./components/cqzrqs.vue"; 
+
+	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>
-	<jt-popup2 title="灾情预警" >
+	<jt-popup2 title="环境变化" >
 		<disaster></disaster>
 	</jt-popup2>
 	
-	<jt-popup2 title="" top="calc(calc(100% - 115rem) / 3 + 90rem)" >
-		
+	<jt-popup2 title="虫情检测预警" top="calc(calc(100% - 115rem) / 3 + 90rem)" >
+		<cqjcyj></cqjcyj>
 	</jt-popup2>
 	
 	<jt-popup2 title="苗情监测数据" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" >
@@ -27,11 +24,11 @@
 	</jt-popup2>
 	
 	<jt-popup3  title="气象监测">
-		<weatherwatch></weatherwatch>
+		<WeatherWatch></WeatherWatch>
 	</jt-popup3>
 	
-	<jt-popup3  title="" top="calc(calc(100% - 115rem) / 3 + 90rem)">
-
+	<jt-popup3  title="虫情逐日趋势" top="calc(calc(100% - 115rem) / 3 + 90rem)">
+		<cqzrqs></cqzrqs>
 	</jt-popup3>
 	
 	<jt-popup3  title="土地墒情监测数据" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)">