pika_shangjia/warning/userAlarm/userAlarm.vue

<template>
	<view style="overflow: hidden;">
		<!-- @click="openPop(item)" -->
		<view class="order-item" v-for="item,index in groupList" >
			<view class="ddflex order-item-header">
				<view class="order-time">{{item.createDate}}</view>
				<block>
					<view v-if="item.status!=1" class="order-state">待处理</view>
					<view v-else class="order-state" style="color: #0FCB27;border: 2rpx solid #0FCB27;">已处理</view>
				</block>
			</view>
			<view class="order-item-body">
				<view class="order-item-content ddflex">
					<view class="order-item-content-label">机柜编号</view>
					<view class="order-item-content-data fflex tover">{{item.devId?item.devId:'-'}}</view>
				</view>
				<view class="order-item-content ddflex">
					<view class="order-item-content-label">机柜名</view>
					<view class="order-item-content-data fflex tover">{{item.storeName?item.storeName:'未知'}}</view>
				</view>
				<view class="order-item-content dflex">
					<view class="order-item-content-label">机柜地址</view>
					<view class="order-item-content-data fflex">{{item.storeAddress?item.storeAddress:'未知'}}</view>
				</view>
				<view class="order-item-content ddflex">
					<view class="order-item-content-label">电池ID</view>
					<view class="order-item-content-data fflex tover">{{item.batteryId?item.batteryId:'-'}}</view>
				</view>
				<view class="order-item-content ddflex">
					<view class="order-item-content-label">报障问题</view>
					<view class="order-item-content-data fflex tover">{{getTypeString(item.type)}}</view>
				</view>
			</view>
			<view class="order-item-body2">
				<view class="order-item-content-label">问题补充描述</view>
				<view class="order-item-content ddflex" style="font-size: 24rpx;font-weight: 400;">
					{{item.content?item.content:'暂无'}}
				</view>
				<view class="images-box ddflex">
					<image class="images" v-for="it,idx in item.imageList" :src="it" mode="aspectFill" @click="previewImg(item.imageList,idx)"></image>
					<view class="video" v-if="false">
						<image style="width: 100%;height: 100%;"></image>
						<image class="play-icon" src="../../static/images/play.png"></image>
					</view>
				</view>
			</view>
			<view v-if="item.status!=1" class="order-btns ddflex">
				<view style="justify-content: flex-end;" class="ddflex">
					<view class="order-btn" @click.stop="deal(item,index)">去处理</view>
				</view>
			</view>
		</view>
		
		<view v-if="groupList.length==0">
			<view class="nodata">
				<image :src="picUrlss+'empty.png'"></image>
				<text>暂无报障~</text>
			</view>
		</view>
		
		<bottom-pop v-if="showPop" :showPop='showPop' :btnColor="'#11BB8B'" :showBtn='false' title="解除提醒"
			@closePop="closePop()" @popSubmit="popSubmit()">
			<view>
				<view>
					<image class="nodata-icon" src="../../static/pages/images/alarmUpload.png"></image>
					<view class="nodata-note">上传检修记录，恢复正常</view>
				</view>
				<view class="pop-btns ddflex">
					<view class="btn" @click="closePop">取消</view>
					<view class="btn2" @click="jumpUrl('warning/userAlarmUpload/userAlarmUpload')">上传检修记录</view>
				</view>
			</view>
		</bottom-pop>
		
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	import bottomPop from "../../components/bottom-pop/index";
	export default {
		components: {
			bottomPop
		},
		props: {},
		data() {
			return {
				picUrlss: req.public.picUrls,
				showPop: false,
				tempData: null,
				
				groupList: [],
				page: 1,
				limit: 10,
				searchValue:'',
				isQuerying:false,//正在查询数据
			}
		},
		onLoad(options) {
			this.getMachineList()
		},
		onShow() {
		},
		onReachBottom() {
			this.getMachineList(true)
		},
		methods: {
			jumpUrl(url) {
				if (!req.isLogin()) return false;
				app.globalData.navigateTo(url);
			},
			getTypeString(type){
				let arr = ['充电柜故障','电池故障','电池断电故障','电池损坏故障','其它故障']
				return arr[Number(type)-1]?arr[Number(type)-1]:'其它故障'
			},
			// 弹窗弹出
			openPop(item) {
				this.tempData = JSON.parse(JSON.stringify(item))
				this.showPop = true
			},
			// 弹窗关闭
			closePop() {
				this.showPop = false
				this.tempData = null
			},
			// 弹窗确认
			popSubmit() {
				this.closePop()
			},
			// 获取机柜列表
			getMachineList(isPage){
				if(this.isQuerying) return
				else this.isQuerying = true
				if (!isPage) {
					this.page = 1
				}
				let queryParams = {
					page: this.page,
					limit: this.limit,
				}
				req.getRequest(
					'/admin/v2/alarm/userAlarmPage',
					queryParams,
					data => {
						if (data != null && data.list.length > 0) {
							data.list.map(item=>{
								if(item.imageList.length>0){
									item.imageList = item.imageList.filter(item => item)
								}
							})
							if (!isPage) {
								this.groupList = data.list
							} else {
								this.groupList = this.groupList.concat(data.list)
							}
							this.page++
						} else {
							if (!isPage)
								this.groupList = data.list
							else {}
						}
						uni.hideLoading()
						this.isQuerying = false
					}
				)
			},
			// 处理
			deal(item,index){
				uni.showModal({
					title:'提示',
					content:'请确认故障是否已解除',
					success(res) {
						if(res.confirm){
							req.getRequest('/admin/v2/alarm/'+item.id,{},data=>{
								req.msg('故障已解除')
								item.status = 1
							})
						}
					}
				})
			},
			previewImg(list,index) {
				uni.previewImage({
					current: index,
					// 当前显示图片的http链接
					urls: list
				});
			},
		},
		mounted() {
		},
		onPageScroll: function(e) {
		}
	}
</script>

<style>
	@import "./userAlarm.css";
</style>