esswisdom_ipad_V1/pages/details/index.vue

<template>
	<view class="content">
		<view class="top">
			<image class="top_logo" src="../../static/logo1.png" mode=""></image>
			<image class="tite" src="../../static/tite.png" mode=""></image>
		<!-- 	<view class="tite">
				{{ $t('MainTitle') }}
			</view> -->
			<view class="time">
				<view class="time_top">
					{{formattedTime}}
				</view>
				<view class="time_bottom">
					<view>

					</view>
				<view class="time_bottom1">
				{{$t('status')}}
					<view class="time_state" v-if="status=='ok'">
						{{$t('online')}}
					</view>
					<view class="time_state1" v-else>
						{{$t('offline')}}
					</view>
				</view>

				</view>

			</view>
		</view>
		<view class="parameter">
			<view class="parameter_xian">
				<view class="parameter_xian1">
				{{$t('formNO')}}
				</view>
				<view class="parameter_xian2">
					{{$t('formUnit')}}
				</view>
				<view class="parameter_xian3">
					{{$t('formDescription')}}
				</view>
				<view class="parameter_xian4">
					{{$t('formFailure')}}
				</view>
				<!-- <view class="parameter_xian5">
					发生时间
				</view> -->
				<view class="parameter_xian6" v-if="event!='事件'">
					{{$t('formRecover')}}
				</view>
			</view>
			<view class="parameter_box">
				<view v-for="(item,index) in faultsList" :class="item.RESETTIME==''&&event!='事件'?'parameter_divred':'parameter_div'"
					:key="index">
					<view class="parameter_xian1">
						{{item.ID}}
					</view>
				<!-- 	<view class="parameter_xian2">
						{{item.TYPE}}
					</view> -->
					<!-- <zb-tooltip @click.top="close" :content="item.DEVICE" placement="top" :ref="'tooltip'+index"> -->
						<view class="parameter_xian2" v-if="item.DEVICE=='亿能BMS-1'">
						BMS
						</view>
					 <view class="parameter_xian2" v-if="item.DEVICE=='英博电气pcs-1'">
					 PCS
					 </view>
					 <view class="parameter_xian2" v-if="item.DEVICE=='virtual'">
						MCS
						</view>
						<view class="parameter_xian2" v-if="item.DEVICE=='充电桩ccu-1-1'">
						CCU
						</view>
						<view class="parameter_xian2" v-if="item.DEVICE=='innerIO-1'">
						IO
						</view>
					<!-- </zb-tooltip> -->
					<zb-tooltip @click.top="closedevice" :content="item.CONTENT" placement="top" :ref="'device'+index">
						<view class="parameter_xian3">
							{{item.CONTENT}}
						</view>
					</zb-tooltip>
					
					<view class="parameter_xian4">
						{{item.FAULTTIME.substring(0, 19)}}
					</view>
					<view class="parameter_xian6" v-if="event!='事件'">
						{{item.RESETTIME.substring(0, 19)}}
					</view>
				</view>

			</view>

			<view class="parameter_bottom">
				<view style="display: flex;align-items: center;">
					<view class="parameter_bottom1" @click="onclick">
						<image src="../../static/home.png" mode=""></image><text class="parameter_bottom2">{{$t('ReturnModeSelection')}}</text>
						
					</view>
					<view class="parameter_bottom11" @click="onReturn">
						<image src="../../static/Return.png" mode=""></image><text class="parameter_bottom2">{{$t('Return')}}</text>
					</view>
				</view>
			
			<!-- 	<view class="parameter_bottom3">
					<view :class="faulttaps=='实时'?'parameter_bottom31':'parameter_bottom32'" @click="taps('实时')">
						实时
					</view>
					
					<view v-if="event=='故障'" :class="faulttaps=='故障'?'parameter_bottom31':'parameter_bottom32'" @click="taps('故障')">
						故障
					</view>
					<view v-if="event=='告警'" :class="faulttaps=='告警'?'parameter_bottom31':'parameter_bottom32'" @click="taps('告警')">
						告警
					</view>
					<view v-if="event=='事件'" :class="faulttaps=='事件'?'parameter_bottom31':'parameter_bottom32'" @click="taps('事件')">
						事件
					</view>
				</view> -->
				
				<view class="parameter_bottom4">
					<view class="eliminate">
						{{$t('FaultClearing')}}
					</view>
					<uni-pagination :total="total" :current="current" title="标题文字" :show-icon="true" @change="change" />
				</view>
			</view>

		</view>
	</view>
</template>
<!--table -->
<script>
	import {
		getTime
	} from "../../utils/index.js"
	import {
		getfaultsList
	} from "../../api/api.js"
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				current: 1,
				total: 0,
				pageSize: 10,
				faulttaps: '故障',
				faultsList: [],
			}
		},
		onLoad() {
this.faulttaps = this.$store.state.event

			this.onfaultsList();
		},
		computed: {
			// 使用 mapState 映射多个状态到组件的计算属性
			...mapState(['formattedTime', 'status',"event"]),

		},
		beforeUnmount() {},
		methods: {
			onfaultsList() {
			// let data1 =[
			// {
			// 	ID:1,
			// 	DEVICE:'亿能BMS-1',
			// 	CONTENT:'CONTENT',
			// 	FAULTTIME:'2024-10-30',
			// 	RESETTIME:'2024-10-30',
				
			// },{
			// 	ID:1,
			// 	DEVICE:'亿能BMS-1',
			// 	CONTENT:'CONTENT',
			// 	FAULTTIME:'2024-10-30',
			// 	RESETTIME:'',
				
			// }	
			// ]
			// this.faultsList = data1
			// this.total =10
			// return
				let data = {
					page: this.current,
					rows: this.pageSize,
					device: '',
					starttime: '',
					endtime: '',
					rt:0,
					type:this.faulttaps
				}
				getfaultsList(data).then(res => {
					console.log(res);
					if (res.status == 'ok') {
					 
						this.faultsList = res.data.list
						this.total = res.data.pagination.total
						
					} else {

					}
				});


			},
			onclick() {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			},
			onReturn() {
				uni.redirectTo({
					url: '/pages/faultlist/index'
				});
			},
			change(e) {
				console.log(e);
				this.current = e.current
				this.onfaultsList()
			},
			// taps(e) {
			// 	this.faulttaps = e
			// 	this.current = 1
			// 	console.log(e);
			// 	this.onfaultsList()
			// },
			// 文字提示
			closedevice() {
				for (let i = 1; i < this.total; i++) {
					this.$refs[('device' + i)].close()
				}
			},
			// close() {
			// 	for (let i = 1; i < this.total; i++) {
			// 		this.$refs[('tooltip' + i)].close()
			// 	}
			// }
		} 
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		opacity: 1;
		background: linear-gradient(180deg, rgba(215, 230, 245, 0) 0%, rgba(196, 229, 255, 1) 100%);
		box-sizing: border-box;
	}

	.top {
		width: 100%;
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-color: #fff;
		padding: 0px 46px;
		box-sizing: border-box;
	}

	.top_logo{
		width:327px;
		height: 56px;
	}
	.tite{
		 width:166px;
		 height: 50px;
		 font-size: 34px;
		 font-weight: 800;
		 background-image: url("../../static/tite1.png.png");
		 background-size: 100% 100%;
	}
	.time{
		width:277px;
	text-align: right;
	}

	.time_top {
		font-size: 17px;
	}

	.time_bottom {
		display: flex;
		font-size: 17px;
		justify-content: space-between;
	}

	.time_bottom1 {
		display: flex;
	}

	.time_state {
		font-size: 17px;
		font-weight: 600;
		color: rgba(22, 68, 144, 1);
	}

	.parameter {
		width: 100%;
		/* padding-bottom: 20px; */
		display: flex;
		padding: 0px 20px 20px 20px;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.parameter_xian {
		width: 100%;
		height: 55px;
		background: linear-gradient(180deg, rgba(30, 131, 189, 1) 0%, rgba(69, 168, 230, 0.92) 100%);
		box-shadow: inset 0px 0px 9.79px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		color: #fff;
		// justify-content: space-around;1237
		justify-content: space-between;
		font-size: 28px;
		font-weight: 600;
		padding: 0px 20px;
		box-sizing: border-box;

		.parameter_xian1 {
			width: 160px;
		}

		.parameter_xian2 {
			width: 160px;
		}

		.parameter_xian3 {
			width: 430px;
		}

		.parameter_xian4 {
			width: 220px;
			margin-right: 10px;
			white-space: nowrap;
			/* 禁止换行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;
			/* 显示省略号 */
		}

		.parameter_xian5 {
			width: 240px;
			margin-right: 10px;
		}

		.parameter_xian6 {
			width: 240px;
		}
	}

	.parameter_box {
		width: 100%;
		overflow: auto;
	}

	.parameter_div {
		width: 100%;
		height: 46px;
		background: rgba(255, 255, 255, 1);
		box-shadow: inset 0px 0px 9.79px rgba(0, 0, 0, 0.1);
		margin-top: 10px;
		display: flex;
		align-items: center;
	// justify-content: space-around;
	justify-content: space-between;
		font-weight: 500;
		padding: 0px 20px;
		box-sizing: border-box;

	
	.parameter_xian1 {
		width: 160px;
	}
	
	.parameter_xian2 {
		width: 160px;
	}
	
	.parameter_xian3 {
		width: 430px;
	}
	
	.parameter_xian4 {
		width: 220px;
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 显示省略号 */
		margin-right: 10px;
	}
	
	.parameter_xian5 {
		width: 240px;
		margin-right: 10px;
	}
	
	.parameter_xian6 {
		width: 240px;
	}
	}

	.parameter_divred {
		width: 100%;
		height: 46px;
		background: rgba(245, 99, 83, 1);
		box-shadow: inset 0px 0px 9.79px rgba(0, 0, 0, 0.1);
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		color: #fff;
		font-weight: 500;
	// justify-content: space-around;
	justify-content: space-between;
		padding: 0px 20px;
		box-sizing: border-box;

	
	.parameter_xian1 {
		width: 160px;
	}
	
	.parameter_xian2 {
		width: 160px;
	}
	
	.parameter_xian3 {
		width: 430px;
	}
	
	.parameter_xian4 {
		width: 220px;
		margin-right: 10px;
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}
	
	.parameter_xian5 {
		width: 240px;
		margin-right: 10px;
	}
	
	.parameter_xian6 {
		width: 240px;
	}
	}

	.parameter_bottom {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		padding: 0px 16px;
		position: fixed;
		left: 10px;
		bottom: 10px;
		width: 100%;
		box-sizing: border-box;
	}

	.parameter_bottom1 {
		display: flex;
		align-items: center;

		image {
			width: 32px;
			height: 32px;
			display: flex;
		}
	
	}
	.parameter_bottom11 {
			display: flex;
			align-items: center;
			margin-left: 100px;
			image {
				width: 32px;
				height: 32px;
				display: flex;
			}
	}
	.parameter_bottom2 {
		font-size: 19.58px;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		margin-left: 10px;
	}

	.parameter_bottom3 {
		display: flex;
	}

	.parameter_bottom31 {
		width: 48px;
		height: 48px;
		background: linear-gradient(180deg, rgba(74, 167, 224, 1) 0%, rgba(36, 134, 192, 1) 100%);
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 19px;
		font-weight: 700;
		margin-right: 20px;
		color: rgba(255, 255, 255, 1);
	}

	.parameter_bottom32 {
		width: 48px;
		height: 48px;
		background: linear-gradient(180deg, rgba(224, 218, 218, 1) 0%, rgba(130, 121, 121, 1) 100%);
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 19px;
		font-weight: 700;
		color: #222222;
		margin-right: 20px;
	}

	.parameter_bottom4 {
		display: flex;
		align-items: center;
	}

	.eliminate {
		width: 107.69px;
		height: 44.05px;
		opacity: 1;
		border-radius: 2.45px;
		background: linear-gradient(180deg, rgba(119, 163, 230, 1) 0%, rgba(25, 85, 176, 1) 10.42%, rgba(6, 53, 94, 1) 88.89%, rgba(119, 163, 230, 1) 100%);
		margin-right: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 23.5px;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		box-sizing: border-box;
	}

	.time_state1 {
		font-size: 17px;
		font-weight: 600;
		color: rgba(217, 22, 22, 1);
	}
</style>