yudao-dev/src/views/energy/analysis/qoqAnalysis/components/searchArea.vue

<template>
	<el-form
		:inline="true"
		class="demo-form-inline">
		<span class="blue-block"></span>
		<el-form-item
			label="对象选择"
			required>
			<el-select
				v-model="queryParams.objId"
				placeholder="请选择"
				style="width: 250px"
				filterable
				size="small">
				<el-option
					v-for="item in objList"
					:key="item.id"
					:label="item.name"
					:value="item.id"
					:clearable="false"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item
			label="时间维度"
			required>
			<el-select
				v-model="queryParams.type"
				placeholder="请选择"
				style="width: 80px"
				size="small">
				<el-option
					v-for="item in timeType"
					:key="item.id"
					:label="item.name"
					:value="item.id"
					:clearable="false"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item
			label="时间"
			required>
			<div v-show="queryParams.type === 1">
				<el-date-picker
					v-model="monthValue"
					type="month"
					:picker-options="pickerOptions"
					@change="selectTime"
					:clearable="false"
					size="small"
					placeholder="选择月"></el-date-picker>
			</div>
			<div v-show="queryParams.type === 2">
				<el-date-picker
					v-model="weekValue"
					type="week"
					format="yyyy 第 WW 周"
					:picker-options="pickerOptionsWeek"
					@change="selectTime"
					:clearable="false"
					size="small"
					placeholder="选择周"></el-date-picker>
			</div>
			<div v-show="queryParams.type === 3">
				<el-date-picker
					v-model="dateValue"
					type="date"
					:picker-options="pickerOptions"
					@change="selectTime"
					:clearable="false"
					size="small"
					placeholder="选择日"></el-date-picker>
			</div>
		</el-form-item>
		<el-form-item>
			<el-button
				type="primary"
				size="small"
				@click="search">
				查询
			</el-button>
		</el-form-item>
		<el-form-item>
			<span
				class="separateStyle"
				v-hasPermi="['analysis:qoq-analysis:export']"></span>
		</el-form-item>
		<el-form-item>
			<el-button
				v-hasPermi="['analysis:qoq-analysis:export']"
				type="primary"
				size="small"
				@click="exportData"
				plain>
				导出
			</el-button>
		</el-form-item>
	</el-form>
</template>
<script>
import { getTree } from '@/api/analysis/energyAnalysis';
import moment from 'moment';
export default {
	name: 'searchArea',
	data() {
		return {
			// 查询参数
			queryParams: {
				type: 1,
				searchTime: null,
				objId: null,
				objType: 1,
			},
			timeType: [
				{ id: 1, name: '月' },
				{ id: 2, name: '周' },
				{ id: 3, name: '日' },
			],
			monthValue: '',
			weekValue: '',
			dateValue: '',
			objList: [],
			pickerOptions: {
				disabledDate(date) {
					return date.getTime() > Date.now();
				},
			},
			pickerOptionsWeek: {
				disabledDate(time) {
					let day = Date.now();
					let limitTime = moment(day).day(-1);
					return time.getTime() > new Date(limitTime).getTime();
				},
			},
		};
	},
	mounted() {
		this.getObjTree();
	},
	methods: {
		getObjTree() {
			getTree().then((res) => {
				this.objList = res.data || [];
				if (this.objList.length > 0) {
					this.queryParams.objId = this.objList[0].id;
				}
			});
		},
		selectTime() {
			switch (this.queryParams.type) {
				case 1:
					this.queryParams.searchTime = this.monthValue;
					break;
				case 2:
					this.queryParams.searchTime = this.weekValue;
					break;
				default:
					this.queryParams.searchTime = this.dateValue;
			}
		},
		// 查询
		search() {
			if (!this.queryParams.objId) {
				this.$modal.msgError('请选择对象');
				return false;
			}
			if (!this.queryParams.type) {
				this.$modal.msgError('请选择时间维度');
				return false;
			}
			if (!this.queryParams.searchTime) {
				this.$modal.msgError('请选择时间');
				return false;
			}
			switch (this.queryParams.type) {
				case 1:
					this.queryParams.searchTime = this.transformTime(this.monthValue);
					break;
				case 2:
					let value =
						moment(this.weekValue).day(6).format('YYYY-MM-DD') + ' 23:59:59';
					this.queryParams.searchTime = new Date(value).getTime();
					break;
				default:
					let value2 =
						moment(this.dateValue).format('YYYY-MM-DD') + ' 23:59:59';
					this.queryParams.searchTime = new Date(value2).getTime();
			}
			this.$emit('submit', this.queryParams);
		},
		exportData() {
			let name;
			if (this.queryParams.objId) {
				name = this.getObjName(this.objList, this.queryParams.objId);
			} else {
				this.$modal.msgWarning('对象不能为空');
				return false;
			}
			this.$emit('exportD', { name: name });
		},
		// 递归取对象name
		getObjName(list, id) {
			for (let i = 0; i < list.length; i++) {
				let a = list[i];
				if (a.id === id) {
					return a.name;
				}
			}
		},
		transformTime(timeStamp) {
			// 本月最后一天
			let year = moment(timeStamp).format('YYYY');
			let month = moment(timeStamp).format('MM');
			let newData =
				moment(new Date(year, month, 0)).format('YYYY-MM-DD') + ' 23:59:59';
			let value = new Date(newData).getTime();
			return value;
		},
	},
};
</script>
<style lang='scss'>
.demo-form-inline {
	.el-date-editor .el-range__icon {
		font-size: 16px;
		color: #0b58ff;
	}
	.el-input__prefix .el-icon-date {
		font-size: 16px;
		color: #0b58ff;
	}
}
</style>
<style lang="scss" scoped>
.separateStyle {
	display: inline-block;
	width: 1px;
	height: 24px;
	background: #e8e8e8;
	vertical-align: middle;
}
.demo-form-inline {
	.blue-block {
		display: inline-block;
		width: 4px;
		height: 16px;
		background-color: #0b58ff;
		border-radius: 1px;
		margin-right: 8px;
		margin-top: 10px;
	}
	.el-form-item {
		margin-right: 10px;
		margin-bottom: 4px;
	}
}
</style>