esswisdom_ipad_V1/pages/SYSifo/index.vue

<template>
	<view class="content">
		<view class="top">
			<image class="top_logo" src="../../static/logo.png" mode=""></image>
			<image class="tite" :src="$t('MainTitle')" 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">
		
    <!-- <image class="parameter_list" :src="$t('sysifoURL')" mode=""></image> -->
    <!-- <image class="parameter_list" src="../../static/z16.png" mode=""></image> -->
	<view class="parameter_list">
		<view class="parameter_list1">
			<view class="parameter_list1a">
				<view class="parameter_list1a1">
					{{$t('configuration')}}
				</view>
				<view class="parameter_list1a1">
					{{$t('Batterycapacity')}}
				</view>
				<view class="parameter_list1a1">
					{{$t('Batterytype')}}
				</view>
				<view class="parameter_list1a1">
					{{$t('Communicationpower')}}
				</view>
				<view class="parameter_list1a1">
					{{$t('DCpower')}}
				</view>
			</view>
			<view class="parameter_list1b">
				<view class="parameter_list1a2">
					{{$t('configurationz')}}
				</view>
				<view class="parameter_list1a2">
					{{$t('Batterycapacityz')}}
				</view>
				<view class="parameter_list1a2">
					{{$t('Batterytypez')}}
				</view>
				<view class="parameter_list1a2">
					{{$t('Communicationpowerz')}}
				</view>
				 <view class="parameter_list1a2">
					{{$t('DCpowerz')}}
				 </view>
			</view>
		</view>
		<view class="parameter_list11">
			
		</view>
			<view class="parameter_list1">
				<view class="parameter_list1ab">
					<view class="parameter_list1a1">
						{{$t('Systemversion')}}
					</view>
					<view class="parameter_list1a1">
						{{$t('MCSVer')}}
					</view>
					<view class="parameter_list1a1">
						{{$t('CCUVer')}}
					</view>
					<view class="parameter_list1a1">
						{{$t('SN')}}
					</view>
					 
				</view>
				<view class="parameter_list1b">
					<view class="parameter_list1a2">
						{{$t('Systemversionz')}}
					</view>
					<view class="parameter_list1a2">
						{{$t('MCSVerz')}}
					</view>
					<view class="parameter_list1a2">
						{{$t('CCUVerz')}}
					</view>
					<view class="parameter_list1a2">
						{{uidatasdata.DeviceID??'20100124123164'}}
					</view>
					 
				</view>
			</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>
	</view>
</template>
<!--    -->
<script>
	import {
		getTime
	} from "../../utils/index.js"
	import {
		getfaultsList
	} from "../../api/api.js"
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		computed: {
			// 使用 mapState 映射多个状态到组件的计算属性
			...mapState(['formattedTime', 'status']),
			...mapState({
				uidatasdata: state => state.uidatasdata
			}),
    backgroundStyle() {
      return {
        backgroundImage: `url(${this.$t('offline')})`,
        backgroundSize: '100% 100%'
      };
    }
		},
		beforeUnmount() {},
		methods: {
		onclick() {
			uni.redirectTo({
				url: '/pages/index/index'
			});
		},
		onReturn() {
			uni.redirectTo({
				url: '/pages/faultlist/index'
			});
		},
		}
	}
</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: 325px;
	height: 50px;
	}
	.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);
	}

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

	.parameter {
	 width: 100%;
	 // height: 100%;
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
	margin-top: 35px;
	}

	.parameter_box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.parameter_list {
	width: 1235.95px;
	height: 495.85px;
	background-image: url('../../static/z16.png');
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	}
	.parameter_list1{
		width: 50%;
		height: 100%;
		display: flex;
		margin-top: 60px;
		font-size: 24px;
	}
	.parameter_list1a{
		width: 300px;
		margin-left: 40px;
	}
	.parameter_list1ab{
	width: 280px;
	margin-left: 40px;	
	}
	.parameter_list1a1{
		height: 90px;
	}
	.parameter_list1a2{
		
		height: 90px;
	}
	.parameter_list1b{
		font-size: 29px;
		font-weight: 600;
	}
	.parameter_list11{
	 width: 1px;
	 height: 85%;
	 border-left: 1px solid #222;
	}
	.parameter_list2{
		width: 50%;
		height: 100%;
		
	}
.parameter_bottom {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		padding: 0px 16px;
		position: fixed;
		left: 10px;
		bottom: 20px;
		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;
	}
</style>