read_opc/reado-app/pages/reportForm/data-item - 副本.vue

<template>
	<view class="data">
		<view class="data-screen" @click="openScreen" style="padding-right:40rpx">
			<image class="screen-img" src="@/static/image/sx.png" alt="">
				<text>筛选</text>
		</view>
		<view class="echarts">
			<view v-if="monthQuery" class="query-screen">
				<view>
					数据组
				</view>
				<div style="margin: 20px 0;">
					<uni-data-select v-model="dataValue" :localdata="datasList" @change="dataValueChange"
						placeholder="请选择数据组"
						style="placeholder-style: font-size: 16px; color: #909399;"></uni-data-select>
				</div>
				<view>
					点位
				</view>
				<zqs-select :list="dataItem" :multiple="true" label-key="label" value-key="value"
					v-model="queryParams.idList" @search="searchItem" @confirm="confirmItem" clearable
					placeholder="请选择点位" title="选择点位">

				</zqs-select>
				<view class="month">
					<view :class="monthCurrent===item.current?'month-select':'month-item'" v-for="item in monthList"
						:key="item.current" @click="monthChange(item.current)">
						{{item.name}}
					</view>
				</view>
				<uni-datetime-picker v-model="range" type="datetimerange" start-placeholder="起始时间"
					end-placeholder="终止时间" @change="handelDate" return-type="timestamp" />
				<view class="month-btn">
					<u-button class="reset" style="width:200rpx" @click="reset">重置</u-button>
					<u-button type="primary" style="width:200rpx" @click="handelQuery">确认</u-button>
				</view>
			</view>
			<view class="modal" v-if="monthQuery"></view>
			<u-empty v-if="!service.length" class="empty" icon="../../static/data.png" text="暂无数据">
			</u-empty>
		</view>
	
			<!-- #ifdef H5 -->
			<web-view v-if="service.length" :src="src" style="border: none;width:100%;height:900px;"
				:fullscreen="false">
			</web-view>
			<!--  #endif -->
		

	</view>
</template>

<script>
	import zqsSelectVue from '../../components/zqs-select/zqs-select.vue'
	import {
		getLastWeek,
		getLastMonth,
		getLast3Month,
		getLast6Month
	} from '@/utils/date.js'
	var wv;
	export default {
		components: {
			zqsSelectVue
		},
		data() {
			return {
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				},
				// 查询参数
				queryParams: {
					idList: [],
					startTime: null,
					endTime: null,
				},
				// 日期选择
				range: [],
				// 时间选择
				monthList: [{
						name: '近一周',
						current: 0
					},
					{
						name: '近1个月',
						current: 1
					},
					{
						name: '近3个月',
						current: 2
					},
					{
						name: '近6个月',
						current: 3
					}
				],
				monthCurrent: 0,
				monthQuery: false,
				// 图表数据
				service: [],
				serviceTime: [],
				// 数据组数据
				datasList: [],
				dataValue: null,
				// 数据项数据
				dataItem: [],
				dataItem_Save: [],
				selItem: [],
				itemReadName: null,
				src: '',
				windowInfo: null
			}
		},
		watch: {
			monthCurrent: {
				handler(val) {
					switch (val) {
						case 1:
							this.range = getLastMonth()
							break;
						case 2:
							this.range = getLast3Month()
							break;
						case 3:
							this.range = getLast6Month()
							break;
						default:
							this.range = getLastWeek()
							break;
					}
					this.handelDate(this.range)
				},
				immediate: true
			}
		},
		mounted() {
			this.getUserData()
			this.range = getLastWeek()
			// this.src =
			// 	`/static/webview/dataItem-wv.html?idList=[19366]&startTime=2024-10-24 15:00:00&endTime=2024-10-24 23:59:59`
			uni.getSystemInfo({
				success: (res) => {
					this.windowInfo = res;
					//this.createWvAndLoadUrl(this.src);
				}
			});
		},
		beforeDestroy() {
			//关闭webview对象
			if (wv) {
				wv.close()
			}
		},
		methods: {
			createWvAndLoadUrl(url) {
				// #ifdef APP-PLUS
				wv = plus.webview.create(url, "webview", {
					top: this.windowInfo.statusBarHeight + 150,
					scalable: true,
					height: this.windowInfo.windowHeight - this.windowInfo.statusBarHeight - 96
				})
				// console.log('--------------------------------------------')
				// console.log(this.$parent.toJSON())
				// console.log('--------------------------------------------')
				var currentWebview = this.$parent.$scope.$getAppWebview();
				currentWebview.append(wv);
				setTimeout(function() {
					console.log(wv.getStyle())
				}, 1000);
				// #endif 
			},
			// 打开筛选
			openScreen() {
				this.monthQuery = !this.monthQuery
			},
			// 切换时间
			monthChange(current) {
				this.monthCurrent = current
			},
			//点位搜索
			searchItem(val) {
				//模糊搜索
				const regex = new RegExp(val, "i");
				this.dataItem = this.dataItem_Save.filter(item => regex.test(item.label));
			},
			//确认点位
			confirmItem(val) {
				//console.log(val)
				//console.log(this.selItem)
			},
			//获取当前登录人所有数据组
			getUserData() {
				uni.$http.get('/itemGroup/getAllItemGroup', {
					page: 1,
					limit: 9999
				}).then(res => {
					const data = res.data
					if (data.code === 200) {
						console.log(data)
						this.datasList = data.data.itemGroupList.map(item => {
							return {
								text: item.groupName,
								value: item.id
							}
						})
					} else {

					}
				})
			},
			//通过id获取数据组
			getDataListById(id) {
				uni.$http.get('/itemGroup/getItemGroupById', {
					id: id,
				}).then(res => {
					const data = res.data
					if (data.code === 200) {
						this.dataItem = data.data.itemList.map(item => {
							return {
								label: item.modbusConfig ? item.itemName : item.itemReadName,
								value: item.id
							}
						});
						this.dataItem_Save = this.dataItem
					}
				})
			},
			//确认按钮查询
			handelQuery() {
				// 临时当前时间，需要改成选择时间----开始
				var date = new Date()
				var timestr = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()
				timestr += ':'
				timestr += date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
				timestr += ':'
				timestr += date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()
				// 临时当前时间，需要改成选择时间----结束
				//console.log(this.queryParams.idList)
				if (this.queryParams.idList.length == 0) {
					uni.showToast({
						title: '请选择点位',
						duration: 2000,
						icon: "error"
					});
					return;
				} else if (this.queryParams.idList.length > 6) {
					uni.showToast({
						title: '只能选择6个点位',
						duration: 2000,
						icon: "error"
					});
					return;
				}
				uni.$http.get('/itemGroup/getItemListValue', this.queryParams).then(res => {
					const data = res.data
					if (data.code === 200) {
						const {
							idList,
							startTime,
							endTime
						} = this.queryParams
						//console.log(JSON.stringify(idList))
						let id_List = idList.map(temp=>temp).join(',');
						this.src =
							`/static/webview/dataItem-wv.html?idList=${id_List}&startTime=${startTime}&endTime=${endTime}`
						this.createWvAndLoadUrl(this.src);
						if (data.data) {
							const {
								valueList,
								valueTimeList
							} = data.data
							const service = [{
								// name: this.itemName,
								name: this.itemReadName,
								data: valueList
							}]
							this.service = service
							this.serviceTime = valueTimeList
						} else {
							this.service = []
							this.serviceTime = []
						}
					} else {
						uni.showToast({
							title: data.msg,
							duration: 2000,
							icon: "error"
						});
					}
				})
				this.monthQuery = false
			},
			//选择日期
			handelDate(date) {
				this.queryParams.startTime = this.resolvingDate(date[0])
				this.queryParams.endTime = this.resolvingDate(date[1])
			},
			resolvingDate(date) {
				if (!date) {
					return;
				}
				//date是传入的时间
				let d = new Date(date);

				let month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1);
				let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
				let hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours();
				let min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes();
				let sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds();

				let times;
				times = d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;
				return times
			},
			//重置按钮
			reset() {
				this.queryParams = {
					idList: null,
					startTime: null,
					endTime: null,
				}
				this.dataValue = null
				this.monthCurrent = 0
				this.monthQuery = false
			},
			//选择数据组
			dataValueChange(val) {
				this.getDataListById(val)
			},
			itemChange(val) {
				const item = this.dataItem.find(item => {
					return item.value === val
				})
				this.itemReadName = item.text
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	iframe {
		border: none;
	}
	.webviewstyle {
		height: 100%;
		width: 100%;
		top: 400px;
		border: none;
	}

	.webview_style>uni-web-view>iframe {
		border: none;
	}

	.data {
		margin-top: 40rpx;
		height: 50vh;

		.data-screen {
			text-align: right;

			.screen-img {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.uni-select__input-placeholder {
		font-size: 14px;
		color: red;
	}

	.echarts {
		position: relative;

		.query-screen {
			width: 96vw;
			padding: 0 20rpx;
			background: #ffffff;
			position: absolute;
			top: 0;
			z-index: 999;

			.month {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				margin: 40rpx 0;

				.month-item {
					padding: 10rpx 20rpx;
					background: #ECECEC;
					color: #000000;
					border-radius: 12rpx;
				}

				.month-select {
					padding: 10rpx 20rpx;
					border-radius: 12rpx;
					background: #289BFF;
					color: #ffffff;
				}
			}

			.month-btn {
				display: flex;
				justify-content: space-around;
				margin-top: 40rpx;
				margin-bottom: 40rpx;

				.reset {
					background: #EAF4FF;
					color: #469DED;
					border: 1px solid #A3B8CB;
				}
			}
		}
	}

	.modal {
		width: 100%;
		height: 76vh;
		background: rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 0;
	}
</style>