app-station-control-frontend_v1/pages/fault-alarm/components/Fault.vue

<template>
	<view class="recharge_box">
		<view class="search_box box">
			<uni-forms :modelValue="queryParams" class="search_box_from">
				<uni-forms-item label="告警设备:" label-width="80px" label-align="right" name="equipment">
					<uni-easyinput type="text" v-model="queryParams.equipment" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="告警信息:" label-width="80px" label-align="right" name="info">
					<uni-easyinput type="text" v-model="queryParams.info" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="告警时间:" name="dateArr" label-width="80px" label-align="right" class="last_box">
					<uni-datetime-picker v-model="dateArr" type="daterange" rangeSeparator="至" />
				</uni-forms-item>
				<uni-forms-item label="告警状态:" name="state" label-width="80px" label-align="right" class="select_box">
					<uni-data-select v-model="queryParams.state" :localdata="range"
						@change="changeId"></uni-data-select>
				</uni-forms-item>

			</uni-forms>
			<view class="box_btn">
				<view class="cx_btn" @click="handleQuery">
					查询
				</view>
				<view class="cz_btn" @click="resetForm">
					重置
				</view>
			</view>
		</view>
		<view class="main_table">
			<!-- <FaultTable :loading="loading" :datalist="datalist"></FaultTable> -->
			<lyy-table @faultDrawer="faultDrawer" :headerFixed="true" :showLoadMore="showLoadMore" :loadMore="loadMore" :battery="0"
				:columnFixed=1 :contents="datalist" :headers="headers" @onPullup="pullup">
			</lyy-table>
		</view>
		<!-- 顶部公共提示信息 -->
		<uni-popup ref="Exchangepopup" type="message">
			<uni-popup-message :type="popupType" :message="popupMessage" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- 顶部提示信息结束-->
		<!--右侧抽屉 -->
		<uni-drawer ref="AlarmDrawer" mode="right" :width="400" :mask-click="true">
			<scroll-view style="height: 100%;" scroll-y="true">
				<PublicDrawer :flag="false" title="告警处理" @closeDrawer="closeDrawer" @alarmDispose="alarmDispose">
					<view class="drawer_main">
						<view>
							<FaultDrawer :alarmFrom="alarmFrom" :range="range"></FaultDrawer>
						</view>
					</view>
				</PublicDrawer>
			</scroll-view>
		</uni-drawer>
		<!-- 右侧抽屉结束 -->
	</view>
</template>

<script>
	import FaultDrawer from "./FaultDrawer.vue"
	export default {
		components: {
			FaultDrawer
		},
		props: ['isSlecte', 'title'],
		name: 'Fault',
		mounted() {
			this.alarmList()
		},
		data() {
			return {
				popupMessage: '成功消息',
				popupType: 'success',
				alarmFrom: {
					id: 0,
					remark: null,
					state: undefined,
					equipment: undefined,
					info: undefined,
					beginTime: undefined,
				},
				range: [{
						value: 0,
						text: "待处理"
					},
					{
						value: 1,
						text: "处理中"
					},
					{
						value: 2,
						text: "已处理"
					},
				],
				datalist: [],
				dateArr: [],
				queryParams: {
					page: 1, //当前页
					pageSize: 10, //每页条数
					equipment: undefined, //充电机ID
					info: undefined, //告警信息
					beginTime: undefined,
					endTime: undefined,
					state: undefined, //告警状态
					orderByField: 'id', //排序字段
					orderByWays: 'desc' //排序方式
				},
				total: 0, //总条数，
				loading: false,
				headers: [{
					label: '告警设备',
					key: 'equipment',
					widtd: 100
				}, {
					label: '告警标识',
					key: 'code',
					widtd:88
				}, {
					label: '告警信息',
					key: 'info',
					widtd: 228
				}, {
					label: '告警开始时间',
					key: 'beginTime',
					widtd: 186,
				}, {
					label: '告警结束时间',
					key: 'endTime',
					widtd: 186,

				}, {
					label: '告警状态',
					key: 'state',
					widtd: 112,
				}, {
					label: '操作',
					key: 'id',
					widtd: 98,
				}],
				showLoadMore: false,
				loadMore: 'more',
			}
		},
		methods: {
			//顶部公共消息提示
			ExchangeMessage(type, message) {
				this.popupType = type
				this.popupMessage = message ? message : '后端接口404错误!'
				this.$refs.Exchangepopup.open()
			},
			//告警处理抽屉
			faultDrawer(row) {
				this.alarmFrom = row
				this.$refs.AlarmDrawer.open();
			},
			//告警处理修改
			alarmDispose() {
				console.log(this.alarmFrom)
				const params = {
					id: this.alarmFrom.id,
					state: this.alarmFrom.state,
					remark: this.alarmFrom.remark
				}
				this.$http.alarmDispose(params)
					.then(res => {
						this.$refs.AlarmDrawer.close();
						this.ExchangeMessage(res.code === 0 ? 'success' : 'error', res.msg)
					}).catch(err => {
						console.error(err)
					})
			},
			//关闭抽屉
			closeDrawer() {
				this.$refs.AlarmDrawer.close();
			},
			//触底加载数据
			pullup() {
				this.showLoadMore = true
				if (this.total == this.datalist.length) {
					this.loadMore = 'no-more'
					return
				} else {
					this.queryParams.page++
					this.alarmList()
					this.loadMore = 'loading'
				}
			},
			//告警记录列表，
			alarmList() {
				this.$http.alarmList(this.queryParams).then(res => {
					// console.log(res.data.records)
					this.showLoadMore = false
					if (res.code === 0) {
						this.datalist.push(...res.data.records)
						this.total = res.data.total
					}
				});
			},
			//充电机下拉选择事件
			changeId(e) {
				// console.log(e, 'e')
			},
			//重置
			resetForm() {
				this.dateArr = []
				this.queryParams = {
					page: 1,
					pageSize: 10,
					equipment: undefined,
					info: undefined,
					beginTime: undefined,
					endTime: undefined,
					state: undefined
				}
				this.alarmList()
			},
			//查询
			handleQuery() {
				if (this.dateArr.length > 0) {
					this.queryParams.beginTime = this.dateArr[0]+' ' +'00:00:00'
					this.queryParams.endTime = this.dateArr[1]+' ' +'23:59:59'
				}
				this.queryParams.page = 1
				this.datalist = []
				this.showLoadMore = false
				this.alarmList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.drawer_main {
		// border: 1px solid red;
		// padding-top: 20px;
	}
	::v-deep .uni-popup-message__box{
		height: 20px;
		line-height: 11px;
	}
	.main_table {
		width: 1040px;
		height: 580px;
		background: #111827;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
		border-radius: 2px;
		border: 1px solid #192337;
		margin-top: 16px;
		box-sizing: border-box;
		padding: 16px 20px;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.box {
		width: 1040px;
		height: 66px;
		background: #111827;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
		border-radius: 2px 2px 2px 2px;
		border: 1px solid #192337;
		// margin-top: 20px;
	}

	::v-deep .search_box_from {
		padding-top: 15px;

		span {
			display: flex;
		}
	}

	.search_box {
		display: flex;
		justify-content: space-between;

		.box_btn {
			display: flex;
			margin-top: 16px;
			padding-right: 16px;

			.cx_btn {
				width: 60px;
				height: 34px;
				text-align: center;
				line-height: 34px;
				background: #91FDB9;
				border-radius: 2px 2px 2px 2px;
				color: black;
				font-size: 14px;
				margin-right: 10px;
			}

			.cz_btn {
				width: 60px;
				height: 34px;
				text-align: center;
				line-height: 34px;
				border-radius: 2px 2px 2px 2px;
				border: 1px solid #263042;
				color: #fff;
				font-size: 14px;
			}
		}
	}

	::v-deep .uni-forms-item__content {
		background: rgba(255, 255, 255, 0);
		border-radius: 2px 2px 2px 2px;
		border: 1px solid #263042;

		.uni-easyinput__content {
			background: none !important;
			border: none !important;
			color: #fff;
		}

		.uni-select__selector-item {
			font-size: 14px;
			font-weight: 400;
			color: #A8ADC8;
		}
	}

	::v-deep .uni-forms-item__label {
		font-size: 14px;
		color: white;
	}

	::v-deep .uni-select__selector {
		background: #111827;
		border: 1px solid #263042;
		color: #606266;
		z-index: 9999999;
	}

	::v-deep .uni-date-x {
		background: none;
	}

	::v-deep .uni-date-x--border {
		border: none;
	}

	::v-deep .uni-select {
		border: none;
	}

	::v-deep .uni-forms-item {
		width: 200px;
	}

	::v-deep .uni-popper__arrow::after {
		display: none;
	}

	::v-deep .uni-popper__arrow {
		display: none;
	}

	::v-deep .uni-select__input-text {
		color: #fff;
	}

	::v-deep .uni-date-x {
		color: #fff;
	}

	.last_box {
		width: 320px;

	}

	.select_box {
		width: 160px;
	}
</style>