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>
		<view style="width: 100%;height: 400px;">
			<l-echart ref="chartRef" @finished="initChart"></l-echart>
		</view>
	</view>
</template>

<script>
	import zqsSelectVue from '../../components/zqs-select/zqs-select.vue'
	import {
		getLastWeek,
		getLastMonth,
		getLast3Month,
		getLast6Month
	} from '@/utils/date.js'
	// nvue 不需要引入
	// #ifdef VUE2
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
	// #endif
	// #ifdef VUE3
	// #ifdef MP
	// 由于vue3 使用vite 不支持umd格式的包，小程序依然可以使用，但需要使用require
	const echarts = require('../../static/echarts.min');
	// #endif
	// #ifndef MP
	// 由于 vue3 使用vite 不支持umd格式的包，故引入npm的包
	import * as echarts from 'echarts/dist/echarts.esm';
	// #endif
	// #endif
	export default {
		components: {
			zqsSelectVue
		},
		data() {
			return {
				// 查询参数
				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: '',
				option: {}
			}
		},
		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()
		},
		beforeDestroy() {

		},
		methods: {
			// 打开筛选
			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
					}
				})
			},
			getChartOption() {
				let option = {
					xAxis: {
						type: 'category',
						data: [],
						axisLabel: {
							formatter: function(value) {
								return value.substring(11, 19) + "\n" + value.substring(0, 10).split('-').join('')
							}
						}
					},
					yAxis: {
						type: 'value'
					},
					legend: {
						type: 'scroll',
						top: 0
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							lineStyle: {
								type: 'dashed'
							},
							label: {
								show: false
							}
						},
						textStyle: {
							color: '#ffffff'
						},
						confine: true,
						extraCssText: 'white-space: normal; word-break: break-all;',
						backgroundColor: 'rgba(108,106,120,0.9)',
						position: 'inside',
						// formatter: function(params) {
						// 	let result = ''
						// 	for (let i in params) {
						// 		let value = '--'
						// 		if (params[i].data !== null) {
						// 			value = params[i].data
						// 		}
						// 		result += '<br>' + params[i].seriesName + '：' +
						// 			value
						// 	}
						// 	return result
						// }
					},
					dataZoom: [{
							type: 'inside',
							start: 90,
							end: 100
						},
						{
							type: 'slider',
							show: true,
							start: 90,
							end: 100,
							bottom: 10
						}
					],
					series: []
				};
				return option
			},
			async initChart() {
				console.log('initChart')
				const chart = await this.$refs.chartRef.init(echarts)
				chart.setOption(this.option)
			},
			//确认按钮查询
			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) {
						if (data.data) {
							let	valueList=[],valueTimeList=[];
							valueTimeList = data.data[0].dataTimeList;
							let service=[]
							for(let dataList of data.data){
								let seriesData = {
									type:'line',
									name:dataList.describe!=null ? dataList.describe:dataList.itemReadName,
									data:dataList.dataValueList
								}
								service.push(seriesData)
							}
							this.service = service
							let optionData = this.getChartOption()
							
							optionData.xAxis.data = valueTimeList
							optionData.series = this.service
							this.option = optionData
							this.initChart()
						} else {
							this.service = []
						}
					} 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: [],
					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>