esswisdom_ipad_V3M_green/pages/index/index.vue

<template>
	<view class="content">
		<view class="top">
				<image class="top_logo" :src="logo" mode="aspectFit"></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="tap">
						<view class="tap_1">
							AC
						</view>
						<view class="tap_2">
							DC
						</view>
						<view class="tap_3">
							SYS
						</view>
					</view>
					<view class="power" v-if="status=='ok'">
						<!-- <view class="power_1">
								<image v-if="selectorid!=3&&selectorindex==1" src="../../static/choice1.png" mode=""></image>
								<image v-else src="../../static/electricity.png" mode="" @click="onclick(3)"></image>
						</view>
							<view class="power_1">
								<image v-if="selectorid!=2&&selectorindex==1" src="../../static/choice2.png" mode=""></image>
								<image v-else src="../../static/power1.png" mode="" @click="onclick(2)"></image>
							</view>
							<view class="power_1">
								<image v-if="selectorid!=4&&selectorindex==1" src="../../static/choice3.png" mode=""></image>
								<image v-else src="../../static/direct1.png" mode="" @click="onclick(4)"></image>
							</view>
							<view class="power_1">
								<image v-if="selectorid!=1&&selectorindex==1" src="../../static/choice4.png" mode=""></image>
								<image v-else src="../../static/DCpower1.png" mode="" @click="onclick(1)"></image>
							</view> -->
							<view v-if="selectorid!=3&&selectorindex==1">
								<view class="power_1">
									<view class="power_bj">
									<image src="../../static/img/choice1.png" mode=""></image>
									</view>
									<view class="power_title">{{$t('CommunicationRecharge')}}</view>
								</view>
							</view>
							<view v-else @click="onclick(3)">
								<view class="power_1">
									<view class="power_bright">
									<image src="../../static/img/choice1.png" mode=""></image>
									</view>
									<view class="power_title_bright">{{$t('CommunicationRecharge')}}</view>
								</view>
							</view>
							<view v-if="selectorid!=2&&selectorindex==1">
								<view class="power_1">
									<view class="power_bj">
									<image src="../../static/img/choice2.png" mode=""></image>
									</view>
									<view class="power_title">{{$t('CommunicationSupply')}}</view>
								</view>
							</view>
							<view v-else @click="onclick(2)">
								<view class="power_1">
									<view class="power_bright">
									<image src="../../static/img/choice2.png" mode=""></image>
									</view>
									<view class="power_title_bright">{{$t('CommunicationSupply')}}</view>
								</view>
							</view>
							<view v-if="selectorid!=4&&selectorindex==1">
								<view class="power_1">
									<view class="power_bj">
									<image src="../../static/img/direct.png" mode=""></image>
									</view>
									<view class="power_title">{{$t('DirectRecharge')}}</view>
								</view>
							</view>
							<view v-else @click="onclick(4)">
								<view class="power_1">
									<view class="power_bright">
									<image src="../../static/img/direct.png" mode=""></image>
									</view>
									<view class="power_title_bright">{{$t('DirectRecharge')}}</view>
								</view>
							</view>
							<view v-if="selectorid!=1&&selectorindex==1">
								<view class="power_1">
									<view class="power_bj">
									<image src="../../static/img/choice4.png" mode=""></image>
									</view>
									<view class="power_title">{{$t('DirectSupply')}}</view>
								</view>
							</view>
							<view v-else @click="onclick(1)">
								<view class="power_1">
									<view class="power_bright">
									<image src="../../static/img/choice4.png" mode=""></image>
									</view>
									<view class="power_title_bright">{{$t('DirectSupply')}}</view>
								</view>
							</view>
							<view class="power_5" @click="system">
								<view class="power_bj">
								<image src="../../static/img/system.png" mode=""></image>
								</view>
								<view class="power_title">{{$t('SystemInformation')}}</view>
							</view>
					</view>
			<view class="power" v-else>
					 <view>
					 	<view class="power_1">
					 		  <!-- <view class="power_bj" @click="onget(3)"> -->
					 		<view class="power_bj">
					 		<image src="../../static/img/choice1.png" mode=""></image>
					 		</view>
					 		<view class="power_title">{{$t('CommunicationRecharge')}}</view>
					 	</view>
					 </view>
				
					<view>
						<view class="power_1">
							<!-- <view class="power_bj" @click="onget(2)"> -->
							 <view class="power_bj">
							<image src="../../static/img/choice2.png" mode=""></image>
							</view>
							<view class="power_title">{{$t('CommunicationSupply')}}</view>
						</view>
					</view>
					<view>
						<view class="power_1">
							<!-- <view class="power_bj" @click="onget(4)"> -->
							 <view class="power_bj">
							<image src="../../static/img/direct.png" mode=""></image>
							</view>
							<view class="power_title">{{$t('DirectRecharge')}}</view>
						</view>
					</view>
				
					<view>
						<!--  <view class="power_1" @click="onget(1)"> -->
						 <view class="power_1">
							<view class="power_bj">
							<image src="../../static/img/choice4.png" mode=""></image>
							</view>
							<view class="power_title">{{$t('DirectSupply')}}</view>
						</view>
					</view>
				
					<view class="power_5" @click="system">
						<view class="power_bj">
						<image src="../../static/img/system.png" mode=""></image>
						</view>
						<view class="power_title">{{$t('SystemInformation')}}</view>
					</view>
			</view>
			<view class="power_6" v-if="selectorindex==1">
				<image src="../../static/!.png" mode=""></image>{{$t('Tipswarning')}}
			</view>

	 <uni-popup ref="message" type="message">
	 				<uni-popup-message type="error" :message="messageText" :duration="2500"></uni-popup-message>
	 			</uni-popup>
				
 <view class="switch-container">
	      <uni-data-select
	        v-model="appLanguage"
	        :localdata="range"
			:clear="false"
	        @change="changeLanguage"
	      ></uni-data-select>
  </view>

				<view class="appVersioncss">
					{{$t('version')}}{{appVersion}} 
				</view>
	</view>
</template>

<script>
	import {getuidatas,control} from "../../api/api.js"
	import {getTime} from "../../utils/index.js"
	import { mapState } from 'vuex';
	export default {
		data() {
		
			return {
				logo:'../../static/logo/logo31.png',
				title: '',
				uidatas:'',
				formatTimeid:'',
				messageText:'',
				 appVersion: '', // 用于存储应用版本号
				 appLanguage:'zh-Hans',
				        range: [
				          { value: 'zh-Hans', text: "中文" },
				          { value: 'en', text: "English" },
				        ],
			}
		},
		created() {
	  // 从本地存储读取用户选择的语言
	  
		  },
		mounted(){
		this.appLanguage = uni.getStorageSync('userLanguage') || 'zh-Hans';
		},
		
		computed: {
		
		  // 使用 mapState 映射多个状态到组件的计算属性
		    ...mapState(['formattedTime','status','selectorid','selectorindex']),
		    ...mapState({
		      uidatasdata: state => state.uidatasdata
		    })
		},
		onLoad() {
		   // this.onfaultsList();
		      // 获取系统信息
		       uni.getSystemInfo({
		         success: (res) => {
					 console.log(res);
		           this.appVersion = res.appWgtVersion // 获取版本号并赋值
		         },
		         fail: (err) => {
		           console.error('获取系统信息失败:', err);
		         }
		       });
		},
		beforeUnmount() {
			clearInterval(this.uidatas);
			// clearInterval(this.formatTimeid);
		},
		methods: {
	 changeLanguage(locale){
		 console.log(locale);
	 	this.$i18n.locale = locale
		  uni.setStorageSync('userLanguage', locale);
	 },
         onclick(e){
			this.pattern(e)
		 },
		 pattern(unm){
			 let data = {
			 		id: "4d86b3fc-f5be-448c-bdc8-2cd8db4d4e29",
			 		issaveinitvalue:true,
			 		value:unm+''  // 直流供电=1，直流补电=4，交流供电=2，交流补电=3
			 	}
			 	control(data).then(data => {
			 		console.log(data);
			 		if (data.status == 'ok') {
			 		if (unm==3) {
			 			uni.redirectTo({
			 			  url: '/pages/home/index'
			 			});
			 		} else if(unm==2){
			 			uni.redirectTo({
			 			  url: '/pages/electricity/index'
			 			});
			 		}else if(unm==4){
			 			uni.redirectTo({
			 			  url: '/pages/supply/supply'
			 			});
			 		}else if(unm==1){
			 			uni.redirectTo({
			 			  url: '/pages/supplyss/supplyss'
			 			});
			 		}
			 		} else {
						 // uni.hideLoading()
						 // uni.showToast({
						 //   title:'选择模式失败请重新选择',
						 //   icon: 'warning',
						 //   duration: 2500, // 显示时长，单位为毫秒
						 // });
						 this.messageText = '选择模式失败请重新选择'
						 this.$refs.message.open()
						 return
			 		}
			 	});
		 },
		 onget(unm){
			 if (unm==3) {
			 	uni.redirectTo({
			 	  url: '/pages/home/index'
			 	});
			 } else if(unm==2){
			 	uni.redirectTo({
			 	  url: '/pages/electricity/index'
			 	});
			 }else if(unm==4){
			 	uni.redirectTo({
			 	  url: '/pages/supply/supply'
			 	});
			 }else if(unm==1){
			 	uni.redirectTo({
			 	  url: '/pages/supplyss/supplyss'
			 	});
			 }
		 },
		 system(){
			uni.redirectTo({
			  url: '/pages/faultlist/index'
			}); 
		 }
		}
	}
</script>
<!--  -->
<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100vh;
		opacity: 1;
		// background: linear-gradient(180deg, rgba(225, 238, 222, 0) 0%,rgba(196, 219, 193, 1)  20%, rgba(196, 219, 193, 1)  100%);
		// background-color: #C4DBC1; 
		background: radial-gradient(40.46% 50% at 50.01912045889101% 50%, rgba(225, 238, 222, 1) 0%, rgba(196, 219, 193, 1) 100%);
		box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
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: rgba(196, 219, 193, 0.1);
// background-color: #E1EEDE;
background: rgba(225, 238, 222, 1);
		padding-right:46px;
		padding:0px 46px;
box-sizing: border-box;
	}
	.body_box{
		padding-top: 1rpx;
		// margin-top: 0rpx;
		height: 100%;
		// background-color: rgba(208, 227, 205, 1);

	}
	.top_logo{
		// width:325px;
		width:260px;
		// width:100px;
		// width:88px;
		
		// // height: 88px;
		// height: 56px;
	}
	.tite{
	width:240px;
	height: 50px;
	font-size: 80rpx;
	font-weight: 600;
	// margin-left:90px;
	margin-left:90px;
	}
	.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);
	}
	 .tap{
		width: 100%;
		height: 46.01px;
		 display: flex;
		 justify-content: space-between;
		 margin-top: 118px;
		 margin-bottom: 50px;
		 padding: 0px 40px;
		 box-sizing: border-box;
	 }
	 .tap_1{
	   width: 485.57px;
      height: 46.5px;
	  border-radius: 50px;
	  // background: linear-gradient(180deg, rgba(43, 158, 218, 1) 0%, rgba(39, 114, 186, 1) 100%);
	  background-color:#32CB32;
	  display: flex;
	  align-items: center;
      justify-content: center;
  font-size: 35.24px;
  font-weight: 700;
  color: #fff;
	 }
	 .tap_2{
		width: 485px;
		    height: 46.5px;
			  border-radius: 50px;
			  // background: linear-gradient(180deg, rgba(43, 158, 218, 1) 0%, rgba(39, 114, 186, 1) 100%);
			  background-color:#32CB32;
			  display: flex;
			  align-items: center;
		    justify-content: center;
		font-size: 35.24px;
		font-weight: 700;
		color: #fff; 
	 }
	 .tap_3{
		 width: 155.17px;
		 height: 46.01px;
		 opacity: 1;
		 border-radius: 24.47px;
		 // background: linear-gradient(180deg, rgba(43, 158, 218, 1) 0%, rgba(39, 114, 186, 1) 100%);
		 background-color:#32CB32;
         display: flex;
		 align-items: center;
		    justify-content: center;
			font-size: 30px;
			font-weight: 700;
			color: #fff; 
	 }
	 .power{
		 width: 100%;
		display: flex; 
		justify-content: space-between;
		padding: 0px 40px;
		box-sizing: border-box;
	 }
	 .power_1{
		width: 237.55px;
		height: 299px;
		display: flex;
		flex-direction: column;
		 align-items: center;
		 justify-content: space-between;
		 // justify-content: space-around;
		box-sizing: border-box;
		.power_bright{
		width: 100%;
		height: 250px;
		// background-image: url("../../static/img/bj.png");
		background-color: rgba(225, 238, 222, 1);
		border: 6px solid rgba(149, 196, 142, 1);
		border-radius: 50rpx;
		background-size: 100% 100%;
		display: flex;
		 align-items: center;
		 justify-content: center;
		 opacity: 1;
		}
		.power_bj{
				 width: 100%;
				 height: 250px;
				 // background-image: url("../../static/img/bj.png");
				 background-color: rgba(225, 238, 222, 1);
				 border: 6px solid rgba(149, 196, 142, 1);
				 border-radius: 50rpx;
				 background-size: 100% 100%;
				 display: flex;
				  align-items: center;
				  justify-content: center;
				  opacity: 0.3;
		}
		.power_title{
			font-size: 20px;
font-weight: 600;
letter-spacing: 0px;
color: rgba(0, 0, 0, 1);
				  opacity: 0.4;
		box-sizing: border-box;
		}
		.power_title_bright{
					font-size: 20px;
		font-weight: 600;
		letter-spacing: 0px;
		color: rgba(0, 0, 0, 1);
						  opacity: 1;
				box-sizing: border-box;
				}
 image {
 width: 200px;
 height: 150px;
 }
	 }
	 
	 .power_11{
		width: 237.55px;
				height: 298.98px;
				opacity: 1;
				box-sizing: border-box;
				font-size: 23px;
				font-family: 400;
	              display: flex;
				  flex-direction: column;
          align-items: center;
     .power_image{
		 width: 100%;
		 height: 248px;
		 margin-bottom: 20px;
		 background-image: url("../../static/electricity1.png");
		 background-size: 100% 100%;
		 display: flex;
          align-items: center;
		  justify-content: center;
		  padding: 0px 16px;
		  box-sizing: border-box;
		image{
			width: 100%;
			height: 160.06px;
		} 
	 }
	 }
	 .power_5{
		 width: 158px;
		 height: 297.61px;
		 opacity: 1;
		 // margin-left: 20px;
		 display: flex;
		 flex-direction: column;
		  align-items: center;
		  justify-content: space-between;
		 .power_bj{
		 		 width: 100%;
		 		 height: 250px;
		 		 // background-image: url("../../static/img/setup_bj.png");
				 background-color: rgba(225, 238, 222, 1);
				 border: 6px solid rgba(149, 196, 142, 1);
				 border-radius: 50rpx;
		 		 background-size: 100% 100%;
		 		 display: flex;
		 		  align-items: center;
		 		  justify-content: center;
		 }
		 .power_title{
		 			font-size: 20px;
		 font-weight: 600;
		 letter-spacing: 0px;
		 color: rgba(0, 0, 0, 1);
		 		box-sizing: border-box;
		 		}
 image{
 	 width: 92px;
 	 height: 92px;
 }
	 }
	 .power_6{
		 width: 100%;
		 height: 50px;
		 font-size: 17.62px;
		 margin-top: 80px;
		 display: flex;
		 align-items: center;
		 padding: 0px 20px;
		 box-sizing: border-box;
		 position: fixed;
		 left: 0px;
		 bottom: 64px;
		 image{
		 margin-right: 10px;
			 width: 27.41px;
			 height: 27.41px;
		 };
	 }
	 .appVersioncss{
		 position: fixed;
        bottom: 10px;
		right: 20px;
		color: #ccc;
	 }			
	.switch-container {
		width: 120px;
	  display: flex;
	  align-items: center;
	  position: fixed;
	  top: 110px;
	  right: 40px;
	}
	
	.switch-label {
	  margin-right: 10px;
	  font-size: 16px;
	  color: #333;
	}
	
</style>