jp-housekeep-hall/pages/remoteControl/operationLog.vue

<template>
	<view>
		<u-navbar title="操作日志" title-color="#101010">

		</u-navbar>
		<!-- 标签 -->
		<view class="tabs">
			<u-picker v-model="tabsFrom.show1" :default-selector="[tabsFrom.show1Index]"
			 mode="selector" :range="tabsFrom.selector1" range-key="label"
				@confirm="selector1confirm"></u-picker>
			<u-picker-select title="日期选择" v-model="tabsFrom.show2" :defaultTime="tabsFrom.show2Index" :endYear="endYear"
				mode="time" :params="params" @confirm="selector2confirm" @reset="selector2reset"></u-picker-select>


			<view class="tabsItem" @click="tabsFrom.show2=!tabsFrom.show2">{{tabsFrom.show2Text}} <u-icon
					name="arrow-up" v-if="tabsFrom.show2"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
			<view class="tabsItem" @click="tabsFrom.show1=!tabsFrom.show1">{{tabsFrom.show1Text}} <u-icon
					name="arrow-up" v-if="tabsFrom.show1"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
		</view>
		<!-- 日志 -->
		<view class="log">
			<view class="log-item" v-for="item in 2">
				<view class="item-infos">
					<view class="place">
						大厅灯控 <text>(一楼大厅)</text>
					</view>
					<view class="date">
						2024.02.14 16:00:00
					</view>
				</view>
				
				<view class="else">
					<view class="operation">
						打开
					</view>
					<view class="from">
						来自 本地操作
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				endYear:'',
					queryMonth:"",
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				tabsFrom: {
					show1: false,
					show1Index: 0,
					show2Index: '',
					show2: false,
					show1Text: "全部类型",
					show2Text: "全部时间",
					selector1: [{
							label: '全部类型',
							value: '',
						},
						{
							label: '大厅空调',
							value: '1',
						},
						{
							label: '大厅灯控',
							value: '2',
						},
						{
							label: '道闸',
							value: '3',
						},
						{
							label: '地下车库灯控',
							value: '4',
						},
					]
				},
			}
		},
		onLoad() {
			this.endYear=new Date().getFullYear()
			
			var date=new Date()
			this.formData.startDate=date.getFullYear()+"-"+(date.getMonth() + 1) +"-1"
			this.queryMonth=date.getFullYear()+"年"+(date.getMonth() + 1) +"月"
			
			
		},
		methods: {
			selector2confirm(e) {

				this.tabsFrom.show2Text = e.year + "年" + e.month + "月"

				this.tabsFrom.show2Index = e.year + "-" + e.month
				if (e.day) {
					this.tabsFrom.show2Text += e.day + "日"
					this.tabsFrom.show2Index += '-' + e.day
				}



				if (e.day) {
					this.formData.startDate = e.year + "-" + e.month + "-" + e.day

					this.queryMonth = e.year + "年" + e.month + "月" + e.day + "日"
					this.formData.endDate = this.formData.startDate



				} else {
					this.queryMonth = e.year + "年" + e.month + "月"
					this.formData.startDate = e.year + "-" + e.month + "-1"

					this.formData.endDate = nextMonth(e.year, e.month, 1, 1)


				}
				this.rechargeRecord()
			},
			selector2reset(e) {

				this.tabsFrom.show2Text = '全部时间'
				this.tabsFrom.show2Index = '';


				this.formData.startDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
				this.queryMonth = date.getFullYear() + "年" + (date.getMonth() + 1) + "月"
				this.rechargeRecord()
			},
			selector1confirm(e) {

				var index = e[0]
				this.tabsFrom.show1Index = index
				this.tabsFrom.show1Text = this.tabsFrom.selector1[index].label
				this.formData.type = this.tabsFrom.selector1[index].value
				this.rechargeRecord()
			},



		}
	}
</script>

<style lang="scss" scoped>
	// 标签
	.tabs {

		height: 96rpx;
		line-height: 96rpx;
		background-color: #fff;
		border-top: 1px solid rgba(241, 241, 241, 1);
		display: flex;
		justify-content: space-around;

	}
	// 日志
	.log{
		.log-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 24rpx 32rpx;
			border-bottom: 1px solid rgba(245,245,245,1);
			.item-infos{
				.place{
					color: rgba(51,51,51,1);
					font-weight: bold;
					text{
						color: #777777;
						font-weight: normal;
					}
				}
				.date{
					color: rgba(119,119,119,1);
					font-size: 24rpx;
				}
			}
			.else{
				text-align: right;
				.operation{
					color: rgba(51,51,51,1);
					font-weight: bold;
				}
				.from{
					color: rgba(119,119,119,1);
					font-size: 24rpx;
				}
			}
		}
	}
</style>