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">
			<dataQuery v-if="service.length" :service="service" :serviceTime="serviceTime" />
			<view v-if="monthQuery" class="query-screen">
				<view>
					报表时间选择
				</view>
				<div style="margin: 20px 0;">
					<uni-data-select v-model="dataValue" :localdata="datasList"
						@change="dataValueChange"></uni-data-select>
				</div>
				<uni-data-select v-model="queryParams.id" :localdata="dataItem"></uni-data-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="daterange" 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>
</template>

<script>
	import dataQuery from '../../components/ecahrts/dataQuery.vue'
	import {
		getLastWeek,
		getLastMonth,
		getLast3Month,
		getLast6Month
	} from '@/utils/date.js'
	export default {
		components: {
			dataQuery
		},
		data() {
			return {
				// 查询参数
				queryParams: {
					id: null,
					startTime: null,
					endTime: null,
					valueType: 0,
				},
				// 日期选择
				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: []
			}
		},
		mounted() {
			this.getUserData()
			this.range = getLastWeek()
		},
		methods: {
			// 打开筛选
			openScreen() {
				this.monthQuery = !this.monthQuery
			},
			// 切换时间
			monthChange(current) {
				this.monthCurrent = current
				switch (current) {
					case 1:
						this.range = getLastMonth()
						break;
					case 2:
						this.range = getLast3Month()
						break;
					case 3:
						this.range = getLast6Month()
						break;
					default:
						this.range = getLastWeek()
						break;
				}
			},
			//获取当前登录人所有数据组
			getUserData() {
				uni.$http.get('/itemGroup/getAllItemGroup').then(res => {
					const data = res.data
					if (data.code === 200) {
						this.datasList = data.data.map(item => {
							return {
								text: item.groupName,
								value: item.id
							}
						})
					}
				})
			},
			//通过id获取数据组
			getDataListById(id) {
				uni.$http.get('/itemGroup/getItemGroupById/' + id).then(res => {
					const data = res.data
					if (data.code === 200) {
						this.dataItem = data.data.itemList.map(item => {
							return {
								text: item.itemName,
								value: item.id
							}
						})
					}
				})
			},
			//确认按钮查询
			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()
				// 临时当前时间，需要改成选择时间----结束
				this.queryParams.startTime = this.resolvingDate2(this.range[0]) + ' ' + timestr
				this.queryParams.endTime = this.resolvingDate2(this.range[1]) + ' ' + timestr
				uni.$http.get('/itemGroup/itemDataQuery', this.queryParams).then(res => {
					const data = res.data
					if (data.code === 200) {
						const {
							valueList,
							valueTimeList
						} = data.data
						const service = [{
							name: "数据项列表",
							data: valueList
						}]
						this.service = service
						this.serviceTime = valueTimeList
					}
				})
				this.monthQuery = false
			},
			//选择日期
			handelDate(date) {
				this.queryParams.startTime = this.resolvingDate(date[0])
				this.queryParams.endTime = this.resolvingDate(date[1])
			},
			resolvingDate2(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;
				return times
			},
			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 = {
					id: null,
					startTime: null,
					endTime: null,
					valueType: 0
				}
				this.dataValue = null
				this.monthCurrent = 0
				this.monthQuery = false
			},
			//选择数据组
			dataValueChange(val) {
				this.getDataListById(val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.data {
		margin-top: 40rpx;

		.data-screen {
			text-align: right;

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

	.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>