app-station-control-frontend_v1/pages/fault-alarm/components/FireAlarm.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="type" label-width="80px" label-align="right" class="select_box">
					<uni-data-select v-model="queryParams.type" :localdata="range"
						style="width: 104px;"></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="true" title="消防告警处理" @closeDrawer="closeDrawer">
					<view class="drawer_main">
						<view class="drawer_main_title">
							系统检测到【电池/架载机】发生了消防问题，确认需要抓取电池吗？
						</view>
						<view class="drawer_main_tip">
							<text>确认消防换仓：</text>机器人执行消防换仓动作。
						</view>
						<view class="drawer_main_tip">
							<text>忽略：</text>放弃消防换仓。
						</view>
						<view class="btn_box">
							<view class="btn_box_ok" @click="alarmDispose">
								确认消防换仓
							</view>
							<view class="btn_box_off" @click="closeDrawer">
								忽略
							</view>
						</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() {
			uni.showLoading({
				title:'数据加载中...'
			})
			this.curAlarmlist=setInterval(()=>{
				this.alarmList()
			},1000)
		},
		destroyed() {
			this.$storage.remove('gotoname'); //清除本地存储
			clearInterval(this.curAlarmlist)
		},
		data() {
			return {
				popupMessage: '成功消息',
				popupType: 'success',
				alarmFrom: {

				},
				range: [{
						value: 1,
						text: "充电机告警"
					},
					{
						value: 2,
						text: "BMS告警"
					},
					{
						value: 3,
						text: "机器人告警"
					}, {
						value: 4,
						text: "消防告警"
					},
				],
				datalist: [],
				dateArr: [],
				queryParams: {
					page: 1, //当前页
					pageSize: 10, //每页条数
					equipment: undefined, //告警设备
					beginTime: undefined,
					endTime: undefined,
					info: undefined,
					type: undefined, //告警类型
					orderByWays: 'desc' //排序方式
				},
				total: 0, //总条数，
				loading: false,
				headers: [{
						label: '告警设备',
						key: 'equipment',
						widtd: 150
					}, {
						label: '告警类型',
						key: 'type',
						widtd: 200,
					}, {
						label: '告警标识',
						key: 'code',
						widtd: 150,
					}, {
						label: '告警信息',
						key: 'info',
						widtd: 330
					}, {
						label: '操作',
						key: 'id',
						widtd: 120,
					},
					// {
					// 	label: '告警开始时间',
					// 	key: 'beginTime',
					// 	widtd: 196,
					// },
				],
				showLoadMore: false,
				loadMore: 'more',
				curAlarmlist:null,
			}
		},
		methods: {
			//顶部公共消息提示
			ExchangeMessage(type, message) {
				this.popupType = type
				this.popupMessage = message ? message : '后端接口404错误!'
				this.$refs.Exchangepopup.open()
			},
			//告警处理抽屉
			faultDrawer(row) {
				console.log(row, 'row')
				this.alarmFrom = row
				this.$refs.AlarmDrawer.open();
			},
			//告警处理修改
			alarmDispose() {
				console.log(this.alarmFrom)
				//这里数据都拿到了 接口也写好了   就看后端需要传什么参数了 参数写好放开下面的注释就行
				const params = {
					targetCode: this.alarmFrom.chargerCode,
					// type: this.alarmFrom.type,
					// remark: this.alarmFrom.remark
				}
				// this.$http.FireChangestorage(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() { //getwarnList
				
				if(this.queryParams.type){
					this.queryParams.type=this.queryParams.type*1
				}
				this.$http.getwarnList(this.queryParams).then(res => {
					// console.log(res.data.records)
					this.showLoadMore = false
					if (res.code === 0) {
						res.data.list.forEach(item => {
							if (item.type == 1) {
								item.type = '充电机告警'
							} else if (item.type == 2) {
								item.type = 'BMS告警'
							} else if (item.type == 3) {
								item.type = '机器人告警'
							} else if (item.type == 4) {
								item.type = '消防告警'
							}
							if(item.equipment.includes('电池') || item.equipment.includes('充电机') || item.equipment.includes('架载机')){
							  item.alarmValue=999
							}
						})
						if(res.data.list.length>this.datalist.length){
							this.datalist.push(...res.data.list)
						}
						this.total = res.data.total
						uni.hideLoading()
					}
				}).catch(err => {uni.hideLoading()});
			},

			//重置
			resetForm() {
				this.dateArr = []
				this.datalist = []
				this.queryParams = {
					page: 1,
					pageSize: 10,
					equipment: undefined,
					info: undefined,
					beginTime: undefined,
					endTime: undefined,
					type: undefined,
					orderByWays: "desc"
				}
				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'
				} else {
					this.queryParams.beginTime = undefined
					this.queryParams.endTime = undefined
				}
				this.queryParams.page = 1
				this.datalist = []
				this.showLoadMore = false
				this.alarmList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.drawer_main {

		// padding-top: 20px;
		.drawer_main_title {
			font-size: 16px;
		}

		.drawer_main_tip {
			font-size: 14px;
			margin-top: 10px;

			text {
				font-size: 16px;
			}
		}

		.btn_box {
			display: flex;
			font-size: 14px;
			margin-top: 20px;
			justify-content: flex-end;

			.btn_box_ok {
				width: 100px;
				height: 32px;
				background: #91FDB9;
				border-radius: 2px 2px 2px 2px;
				text-align: center;
				line-height: 32px;
				color: black;
				margin-right: 20px;

			}

			.btn_box_off {
				width: 60px;
				height: 32px;
				border-radius: 2px 2px 2px 2px;
				color: #fff;
				border: 1px solid #263042;
				text-align: center;
				line-height: 32px;
			}
		}
	}

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