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" mode="selector"
			 :default-selector="[tabsFrom.show1Index]"
			 :range="tabsFrom.selector1" range-key="label"
				@confirm="selector1confirm"></u-picker>
			<u-picker-select title="日期选择" :noselect="false"
			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,i) in list">
				<view class="item-infos">
					<view class="place">
						{{item.meterName}} <text v-if="item.installationAddress">({{item.installationAddress}})</text>
					</view>
					<view class="date">
						 {{item.switchStatusN}}
					</view>
				</view>
				 
				<view class="else">
					<view class="operation">
						{{item.createTime}}
					</view>
					<view class="from">
						来自 {{item.typeN}}
					</view>
				</view>
				<view class="else" style="margin-top: 4rpx;">
					<view class="from">
						备注:{{item.remark}}
					</view>
				</view>
			</view>
			<u-divider :isnone="list.length==0" v-if="recordsTotal==list.length"  nonetext="无记录"
				border-color="#CFD2D5">已经到底了</u-divider>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/meterTimer.js'
	import {
		nextDay,
		nextMonth,
	} from '@/apis/utils'
	
	export default {
		data() {
			return {
				meterList:[],
				endYear:'',
					pageIndex: 1,
					queryMonth:"",
					recordsTotal:0,
					list:[],
					meterId:"",
					formData:{
						startDate:""
					},
				params: {
					year: true,
					month: true,
					day: false,
					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(op) {
			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) +"月"
		
			if(op.id){
				
				this.meterId=op.id;
				
			}
			this.getHaveMeterList()
			this.rechargeRecord()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			myLoadmore() {
				this.pageIndex += 1;
				this.rechargeRecord();
			},
			getHaveMeterList(){
				
				
				var data = {
				
					queryForm:"tenant",
					
				};
				API.haveMeterList(data).then((response) => {
					
					//var MeterList=response.data.switchRecordList.data
					this.meterList = response.data.remoteReadingMeterList;
					//this.recordsTotal = response.data.switchRecordList.recordsTotal;
					this.tabsFrom.selector1=[]
					this.tabsFrom.selector1=[{
						label: "全部开关",
						value: '',
					}]
					var i =0;
					this.meterList.forEach(item=>{
						this.tabsFrom.selector1.push({
							label: item.name,
							value: item.id,
						})
						
						i++
						if(item.id==this.meterId){
							this.selector1confirmTest([i])
						}
					})
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			rechargeRecord(bl){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.list = [];
					this.pageIndex = 1;
				}
				var data = {
					pageIndex: this.pageIndex,
					pageSize: 20,
					meterId:this.meterId,
					queryForm:"tenant",
					yearMonth:this.formData.startDate
					// companyId: this.companyId,
					// status: this.status
				};
				API.meterTimerRecord(data).then((response) => {
					uni.hideLoading();
					var list=response.data.switchRecordList.data
					this.list = [
						...this.list,
						...list
					];
					this.recordsTotal = response.data.switchRecordList.recordsTotal;
					
				
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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 

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


				}
				this.rechargeRecord(true)
			},
			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(true)
			},
			selector1confirm(e) {

				var index = e[0]
				this.tabsFrom.show1Index = index
				this.tabsFrom.show1Text = this.tabsFrom.selector1[index].label
				this.meterId = this.tabsFrom.selector1[index].value
				this.rechargeRecord(true)
			},
			selector1confirmTest(e) {
			
				var index = e[0]
				this.tabsFrom.show1Index = index
				this.tabsFrom.show1Text = this.tabsFrom.selector1[index].label
				//this.meterId = this.tabsFrom.selector1[index].value
				//this.rechargeRecord(true)
			},


		}
	}
</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{
			
			background-color: #fff;
			padding: 24rpx 32rpx;
			border-bottom: 1px solid rgba(245,245,245,1);
			.item-infos{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.place{
					color: rgba(51,51,51,1);
					font-weight: bold;
					text{
						color: #777777;
						font-weight: normal;
					}
					    overflow: hidden;
					    white-space: nowrap;
					    text-overflow: ellipsis;
				}
				.date{
					color: rgba(51,51,51,1);
					white-space: pre;
					font-weight: bold;
					font-size: 24rpx;
					
					
				}
			}
			.else{
				display: flex;
				align-items: center;
				justify-content: space-between;
				text-align: right;
				.operation{
					color: rgba(119,119,119,1);
				}
				.from{
					color: rgba(119,119,119,1);
					font-size: 24rpx;
					
				}
			}
		}
	}
</style>