JT-CIM-ZHNY/src/views/test/components/SeedlingMonitor.vue

<script setup>
	import videofarm1 from '@/assets/video/videofarm1.mp4';
	import videofarm2 from '@/assets/video/videofarm2.mp4';
	import nongye from '@/assets/images/farm.jpg';
	import nongye2 from '@/assets/images/farm2.jpg';
</script>

<template>

	<div class="video">
		<video class="video11" :src="video" autoplay controls loop muted></video>
	</div>
	<div class="rightContent">
		<div class="top">
			<div class="font">苗情设备</div>
			<div class="selectItem">
				<el-select size="small" v-model="value" placeholder="请选择">
					<el-option  @click="handleChange(item)" v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
		</div>

		<div class="mid">
			<div class="midFont">监控区域:<span>{{area}}</span></div>
			<div class="midbottomFont">采集时间:<span>{{time}}</span> </div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				video: videofarm1,
				options: [{
					value: videofarm1,
					label: '设备一',
					area:'测试园区玉米',
					time:'2023-05-04'
				}, {
					value: videofarm2,
					label: '设备二',
					area:'测试园区麦子',
					time:'2023-04-25'
				}, {
					value: '选项3',
					label: '设备三',
					area:'测试园区水稻',
					time:'2023-04-20'
				}, {
					value: '选项4',
					label: '设备四',
					area:'测试园区玉米',
					time:'2023-04-10'
				}, ],
				value: videofarm1,
				area:'测试园区玉米',
				time:'2023-05-04'

			};
		},
		methods: {

			handleChange(val){
				this.video=val.value;
				this.area=val.area;
				this.time=val.time
			}
		}
	};
</script>
<style scoped>
	.video {
		margin-top: 25rem;
		width: 170rem;
		height: 165rem;
		display: inline-block;
		float: left;
	}

	.video11 {
		width: 100%;
		height: 100%;
		border-radius: 20rem;
		border-style: solid;
		border-width: 1rem ;
		border-color:rgb(200, 250, 255,0.3);
	}

	.rightContent {
		margin-top: 30rem;
		width: 165rem;
		height: 300rem;
		display: inline-block;
		float: right;

	}

	.font {
		margin-top: 10rem;
		font-size: 16rem;
		width: 70rem;
		height: 30rem;
		float: left;
		color: rgb(200, 250, 255);
		text-align: left;
	}


	::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: 10rem;
		width: 90rem;
		height: 5rem;
		display: inline-block;
		float: right;
	}

	.top {
		height: 60rem;
		width: 100%;
	}

	.midFont {
		font-size: 14rem;
		margin-top: 5rem;
		color: rgb(200, 250, 255);
		text-align: left;
		padding-left: 20rem;
		background: url('@/assets/images/jiankong.png') no-repeat;
		background-size: 10%, 10%;
	}

	.midbottomFont {
		margin-top: 30rem;
		font-size: 14rem;
		color: rgb(200, 250, 255);
		text-align: left;
		padding-left: 20rem;
		background: url('@/assets/images/shijian.png') no-repeat;
		background-size: 11%, 11%;
	}
</style>