no message

src/views/test/components/cqjcyj.vue

@@ -0,0 +1,59 @@
+<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"/> -->
+  <el-carousel :interval="4000" type="card" height="200px" 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 class="main">
+  <div style="margin-right: 90rem;">设备名称:13号地1区太阳能测报灯</div>
+  <div style="margin-right: 185rem;">检测区域:13号地东区</div>
+  <div style="margin-right: 262rem;">识别数量:7</div>
+  <div style="margin-right: 262rem;">识别种类:5</div>
+  <div style="margin-right: 90rem;">采集时间:2023年4月24日17:07:45</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        imgList: [
+          {imgUrl: haichong1},
+		  {imgUrl: haichong2},
+		  {imgUrl: haichong3},
+
+        ],
+      };
+    },
+  };
+</script>
+<style scoped>
+	.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{
+		  color: rgb(200, 250, 255);
+		  font-weight: 700;
+		  font-size: 17rem;
+		  
+	  }
+</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/test.vue

@@ -1,4 +1,6 @@
 <script setup>
+	import cqjcyj from "./components/cqjcyj.vue"; 
+	import cqzrqs from "./components/cqzrqs.vue"; 
 </script>
 
 <template>
@@ -6,8 +8,8 @@
 		
 	</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)" >
@@ -18,11 +20,12 @@
 		
 	</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)">
+		
 	</jt-popup3>
 </template>