esswisdom_ipad_V3M_green/pages/home/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="parameter">
			<view class="parameter_left">
				<view class="parameter_left1">
					<!-- <jerry-gauge></jerry-gauge> -->
					<view style="display: flex;justify-content: center;position: relative;">
					  <cmd-progress type="dashboard" :percent="uidatasdata.SOC??0" stroke-color="#63D463FF" :stroke-width="6" :width="180" stroke-shape="square" :showInfo="false"></cmd-progress>
					  <view style="position: absolute;text-align: center;top: 20%;">
					    <view style="font-size:72rpx;font-weight: bold;">{{uidatasdata.SOC??0}} <text style="font-size:32rpx;">%</text> </view>
						    <view style="font-size:32rpx;margin-top: 6px;">SOC</view>
					  </view>
					  <view style="position: absolute;top: 70%;">
						  	<view style="width: 190px;display: flex;justify-content: space-between;">
						  		<view style="font-size:32rpx;margin-left: 10px;">0</view>
						  	 <view style="font-size:32rpx;">100%</view>
						  	</view>
						 
					  </view>
					  </view>
				<!-- <view class="parameter_canvas">
					<view class="parameter_canvas1">
						0
					</view>
					<view class="parameter_canvas2">
						100%
					</view>
					</view> -->
				</view>
				<image class="parameter_leftdian1" src="../../static/dian1.png" alt="aspectFit" />
				<view class="parameter_lef2">
					<image src="../../static/dian2.png" mode=""></image>
				</view>
				<image class="parameter_leftche" src="../../static/che.png" mode="aspectFit"></image>
				<!-- <image class="parameter_leftche1" src="../../static/fang.png" mode=""></image> -->
				<!-- <image class="parameter_leftche" src="../../static/che.png" mode=""></image> -->
				<!-- <image class="parameter_leftche2" src="../../static/che1.png" mode=""></image> -->
				<view class="parameter_leftview">{{$t('CommunicationRechargeInput')}}</view>
				<!-- <view class="parameter_leftview">交流供电</view> -->
				<!-- <view class="parameter_leftview">直流补电</view> -->
				<!-- <view class="parameter_leftview">直流供电</view> -->
			</view>
			<view class="parameter_right">
				<view class="parameter_righttop">
					<view class="parameter_1">
					<!-- 	<view class="parameter_2">
							<view class="parameter_3">
								<view class="parameter_4">
									<image src="../../static/y8.png" mode=""
										v-if="uidatasdata.AC_In_380V_63A1_Status==0.00"></image>
									<image src="../../static/y6.png" mode="" v-else></image>
									{{$t('state163A')}} 
								</view>
								<view class="parameter_51" v-if="uidatasdata.AC_In_380V_63A1_Status==0.00">
									{{$t('connect')}}
								</view>
								<view class="parameter_5" v-else>
									{{$t('breakoff')}}
								</view>

							</view>

							<view class="parameter_3">
								<view class="parameter_4">
									<image src="../../static/y8.png" mode=""
										v-if="uidatasdata.AC_In_380V_63A2_Status==0.00"></image>
									<image src="../../static/y6.png" mode="" v-else></image>
									{{$t('state63A2')}}
								</view>
								<view class="parameter_51" v-if="uidatasdata.AC_In_380V_63A2_Status==0.00">
									{{$t('connect')}}
								</view>
								<view class="parameter_5" v-else>
									{{$t('breakoff')}}
								</view>

							</view>

						</view> -->
						<view class="parameter_SOC">
							<image src="../../static/SOC.png" mode=""></image>
							<view class="parameter_SOCright">
								<view class="parameter_SOCright1">
									SOC
								</view>
								<view>
									<text class="parameter_SOCright2">{{uidatasdata.SOC??'—'}}</text> <text>%</text>
								</view>
							</view>
						</view>
						<view class="parameter_Battery">
							<image src="../../static/Battery.png" mode=""></image>
							<view class="parameter_SOCright">
								<view class="parameter_SOCright1">
									{{$t('BatteryStatus')}}
								</view>
								<view class="parameter_Batterystate">
									<view v-if="uidatasdata.bms_BatSysState==5">
										{{$t('fault')}}
									</view>
									<!-- <view v-else-if="uidatasdata.bms_BatSysState==0">
									{{$t('ChuShiHua')}}
									</view> -->
									<view v-else-if="uidatasdata.bms_BatSysState==1">
										{{$t('NotupyetVoltage')}}
									</view>
									<!-- <view v-else-if="uidatasdata.bms_BatSysState==2">
										{{$t('HighVoltageMedium')}}
									</view> -->
									<view v-else-if="uidatasdata.bms_BatSysState==3">
								    	{{$t('voltagehasbeen')}}
									</view>
									<!-- <view v-else-if="uidatasdata.bms_BatSysState==4">
									 	{{$t('Underhighpressure')}}
									</view> -->
									<view v-else>
										—
									</view>
									<!-- {{uidatasdata.bms_BatSysWorkMode_==0.00?'无效':'有效'}} -->
								</view>
							</view>
						</view>
						<view class="parameter_state">
							<image src="../../static/setup.png" mode=""></image>
							<view class="parameter_SOCright">
								<view class="parameter_SOCright1">
									{{$t('SystemStatus')}}
								</view>
								<view class="parameter_Batterystate">
									<!-- {{uidatasdata.bms_ChgLinkSt==0.00?'无效':'有效'}} -->
									<view v-if="uidatasdata.bms_BatSysWorkMode_==0">
									{{$t('uncharged')}}
									</view>
									<view v-else-if="uidatasdata.bms_BatSysWorkMode_==1">
									{{$t('Chargingprogress')}}
									</view>
									<view v-else-if="uidatasdata.bms_BatSysWorkMode_==2">
										{{$t('Chargingmalfunction')}}
									</view>
									<view v-else-if="uidatasdata.bms_BatSysWorkMode_==3">
										{{$t('full')}}
									</view>
									<!-- <view v-else-if="uidatasdata.bms_BatSysWorkMode_==4">
										{{$t('Chargingstopped')}}
									</view> -->
								<!-- <view v-else-if="uidatasdata.bms_BatSysWorkMode_>3&&uidatasdata.bms_BatSysWorkMode_<8">
									{{$t('retain')}}
								</view> -->
									<view v-else>
										—
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="parameter_tap">
					<view :class="segmented==1?'parameter_tap1':'parameter_tap2'" @click="ontap(1)">
						{{$t('exchangeinformation')}}
					</view>
					<view :class="segmented==2?'parameter_tap1':'parameter_tap2'" @click="ontap(2)">
						{{$t('Batteryinformation')}}
					</view>
					<view :class="segmented==3?'parameter_tap1':'parameter_tap2'" @click="ontap(3)">
						{{$t('statisticalinformation')}}
					</view>
					<view :class="segmented==4?'parameter_tap1':'parameter_tap2'" @click="ontap(4)">
						{{$t('coolinginformation')}}
					</view>

				</view>
				<view class="parameter_zheng" key="index">
					<view class="parameter_box" v-if="segmented==1">
						<view class="parameter_zheng1">
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('PhaseVoltageAV')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.PCSPortAPhaseVoltage??'—'}} <text class="parameter_zheng14">V</text>
								</view>
							</view>
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('PhaseVoltageBV')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.PCSPortBPhaseVoltage??'—'}} <text class="parameter_zheng14">V</text>
								</view>
							</view>
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('PhaseVoltageCV')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.PCSPortCPhaseVoltage??'—'}} <text class="parameter_zheng14">V</text>
								</view>
							</view>
						    
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('Supplementarypower')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.PCSTotalOutputPower??'—'}} <text class="parameter_zheng14">kW</text>
								</view>
							</view>
						</view>
						<view class="parameter_zheng2">
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									<!-- A{{$t('PhaseCurrent')}} -->
									{{$t('PhaseVoltageAA')}} 
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata["PCSOutputA-phaseCurrent"]??'—'}} <text class="parameter_zheng14">A</text>
								</view>
							</view>
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('PhaseVoltageBA')}} 
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata["PCSOutputB-phaseCurrent"]??'—'}} <text class="parameter_zheng14">A</text>
								</view>
							</view>
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('PhaseVoltageCA')}} 
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata["PCSOutputC-phaseCurrent"]??'—'}} <text class="parameter_zheng14">A</text>
								</view>
							</view>
							<view class="parameter_zheng11" style="height: 30px;">
								<view class="parameter_zheng12">
									<!-- {{$t('powerSupply')}} -->
								</view>
								<!-- <view class="parameter_zheng13">
									{{uidatasdata.PCSACChargeEnergy??'—'}} <text class="parameter_zheng14">kWh</text>
								</view> -->
							</view>
						</view>
					</view>
					<view class="parameter_box" v-if="segmented==2">
						<view class="parameter_zheng1">
						<!-- 	<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('Batterypower')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.BatSysSt2_BatPower??'—'}} <text class="parameter_zheng14">kW</text>
								</view>
							</view> -->
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('TotalPressure')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.BatSysSt2_BatSumVInt??'—'}} <text class="parameter_zheng14">V</text>
								</view>
							</view>
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('AllowChargingPower')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.DchChgCurPowLimit_MaxChargePowerLimit??'—'}} <text
										class="parameter_zheng14">kW</text>
								</view>
							</view>
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('MaximumVoltage')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.BatCellVPeak_ValMaxCellVoltage??'—'}} <text
										class="parameter_zheng14">V</text>
								</view>
							</view>
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('MaximumTemperature')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.CellTemperatureLimitsStatus_MaxTemp??'—'}} <text
										class="parameter_zheng14">℃</text>
								</view>
							</view>
						</view>
						<view class="parameter_zheng2">
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('BatteryCurrent')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.BatSysSt2_BatCur??'—'}} <text class="parameter_zheng14">A</text>
								</view>
							</view>
							<!-- <view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('TotalExternalPressure')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.BatSysSt2_BatSumVOut??'—'}} <text class="parameter_zheng14">V</text>
								</view>
							</view> -->
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('AllowChargingCurrent')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.ChargingInformation_Chg_Max_Cur??'—'}} <text
										class="parameter_zheng14">A</text>
								</view>
							</view>
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('MinimumIndividualVoltage')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.BatCellVPeak_ValMinCellVoltage??'—'}} <text
										class="parameter_zheng14">V</text>
								</view>
							</view>
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('MinimumMonomerTemperature')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.CellTemperatureLimitsStatus_MinTemp??'—'}} <text
										class="parameter_zheng14">℃</text>
								</view>
							</view>
						</view>
					</view>
					<view class="parameter_box" v-if="segmented==3">
						<view class="parameter_zheng10">
						<!-- 	<view class="parameter_zhengbox">
								<view class="parameter_zheng12">
									{{$t('AccumulatedChargingCapacityCommunication')}}
								</view>
								<view class="parameter_zhengbox13">
									{{uidatasdata.PCSACChargeEnergy??'—'}} <text class="parameter_zheng14">kWh</text> <text></text>
								</view>
							</view>
							<view class="parameter_zhengbox parameter_zheng101">
								<view class="parameter_zheng12">
									{{$t('AccumulatedDCChargingCapacity')}}
								</view>
								<view class="parameter_zhengbox13">
									{{uidatasdata.PCSDCDisChargeEnergy??'—'}} <text class="parameter_zheng14">kWh</text> <text></text>
								</view>
							</view> -->
                            <!--   <view class="parameter_zhengbox">
								<view class="parameter_zheng12">
									{{$t('RunningTimes')}}
								</view>
								<view class="parameter_zhengbox13">
									{{uidatasdata.CommunicationRecharge}}<text class="parameter_zheng14">{{$t('RunningTimesmin')}}</text> <text></text>
								</view>
							</view> -->
							<view class="parameter_zhengbox parameter_zheng101">
								<view class="parameter_zheng12">
									{{$t('InputCapacity')}}
								</view>
								<view class="parameter_zhengbox13">
									{{uidatasdata.CommunicationElectricity??'—'}} <text class="parameter_zheng14">kWh</text> <text></text>
								</view>
							</view> 
							<view class="parameter_zhengbox parameter_zheng101">
								<view class="parameter_zheng12">
									{{$t('AccumulateInput')}}
								</view>
								<view class="parameter_zhengbox13">
									<!-- {{uidatasdata.PCSACChargeEnergy??'—'}} <text class="parameter_zheng14">kWh</text> <text></text> -->
									{{uidatasdata.PCSACChargeEnergy??'—'}} <text class="parameter_zheng14">kWh</text> <text></text>
								</view>
							</view> 
						</view>
					</view>
					<view class="parameter_box" v-if="segmented==4">
						<view class="parameter_zheng1">
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('WorkingMode')}}
								</view>
								<view class="parameter_Batterystate">
									<!-- {{uidatasdata.TMS_Status_TMS_WORK_MODE}} <text class="parameter_zheng14">kW</text> -->
									<!-- {{uidatasdata.TMS_Status_TMS_WORK_MODE==1.00?'有效':'无效'}} -->
									<view v-if="uidatasdata.TMS_Status_TMS_WORK_MODE==0">
										{{$t('OffMode')}}
									</view>
									<view v-else-if="uidatasdata.TMS_Status_TMS_WORK_MODE==1">
										{{$t('CoolingMode')}}
									</view>
									<view v-else-if="uidatasdata.TMS_Status_TMS_WORK_MODE==2">
										{{$t('HeatingMode')}}
									</view>
									<view v-else-if="uidatasdata.TMS_Status_TMS_WORK_MODE==3">
										{{$t('CirculatingMode')}}
									</view>
									<view v-else>
									  —
									</view>
								</view>
							</view>
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('OutletTemperature')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.TMS_Status_TMS_WATEROUT_TEMP??'—'}} <text
										class="parameter_zheng14">℃</text>
								</view>
							</view>
							<view class="parameter_zheng11">
								<view class="parameter_zheng12" style="height: 30px;">
									<!-- {{$t('PowerDemand')}} -->
								</view>
								<!-- <view class="parameter_zheng13">
									{{uidatasdata.TMS_Status_TMS_POWER_REQ??'—'}} <text class="parameter_zheng14">kW</text>
								</view> -->
							</view>

						</view>
						<view class="parameter_zheng2">
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
									{{$t('HighVoltageRelayStatus')}}
								</view>
								<view class="parameter_Batterystate">

									<!-- {{uidatasdata.TMS_Status_TMS_HV_CONTACT_ST==0.00?'无效':'有效'}} -->
									<view v-if="uidatasdata.TMS_Status_TMS_HV_CONTACT_ST==0">
										{{$t('DisconnectedState')}}
									</view>
									<view v-else-if="uidatasdata.TMS_Status_TMS_HV_CONTACT_ST==1">
										{{$t('ClosedState')}}
									</view>
									<view v-else>
										—
									</view>
								</view>
							</view>
							<view class="parameter_zheng11">
								<view class="parameter_zheng12">
								{{$t('waterTemperature')}}
								</view>
								<view class="parameter_zheng13">
									{{uidatasdata.TMS_Status_TMS_WATERIN_TEMP??'—'}} <text class="parameter_zheng14">℃</text>
								</view>
							</view>
							<view class="parameter_zheng11">
								<view class="parameter_zheng12" style="height: 30px;">
									<!-- {{$t('FaultLevel')}} -->
								</view>
							<!-- 	<view class="parameter_Batterystate">
								 
									<view v-if="uidatasdata.TMS_Status_TMS_ERR_LEVEL==0">
										{{$t('NoMalfunction')}}
									</view>
									<view v-else-if="uidatasdata.TMS_Status_TMS_ERR_LEVEL==1">
										1{{$t('LevelLault')}}
									</view>
									<view v-else-if="uidatasdata.TMS_Status_TMS_ERR_LEVEL==2">
										2{{$t('LevelLault')}}
									</view>
									<view v-else-if="uidatasdata.TMS_Status_TMS_ERR_LEVEL==3">
										3{{$t('LevelLault')}}
									</view>
									<view v-else>
										—
									</view>
								</view> -->
							</view>

						</view>
					</view>
					<view class="parameter_zheng3">
						<view class="parameter_zheng31111" v-if="uidatasdata.SysControl_RunCmd==0" @click="dialogToggle">
							<view class="parameter_zheng31">
								<view class="parameter_zheng32">
									{{$t('open')}}
								</view>
							</view>
						</view>
						<view class="parameter_zheng31111" v-else>
							<view class="parameter_zheng31">
								<view class="parameter_zheng32ccc">
									{{$t('open')}}
								</view>
							</view>
						</view>
					<view class="parameter_zheng31111" @click="onstopit" v-if="uidatasdata.SysControl_RunCmd==1">
						<view class="parameter_zheng31">
							<view class="parameter_zheng33">
								{{$t('stopIt')}}
							</view>
						</view>
					</view>
						<view class="parameter_zheng31111" v-else>
							<view class="parameter_zheng31">
								<view class="parameter_zheng32ccc">
									{{$t('stopIt')}}
								</view>
							</view>
						</view>
						

						<!-- <view class="parameter_zheng31111" @click="onpower"> -->
						<view class="parameter_zheng31111">
							<view class="parameter_zheng31" @click="onpower" v-if="uidatasdata.SysControl_RunCmd==1">
								<view class="parameter_zheng34" v-if="$t('power')=='功率'"> 
									<view>
										{{$t('power')}}
									</view>
									<view>
										{{$t('given')}}
									</view>
								
								</view>
								<view class="parameter_zheng34" v-else>
									<view>
										{{$t('power')}} {{$t('given')}}
									</view>
									

								</view>
							</view>
							<view class="parameter_zheng31" v-else>
								<view class="parameter_zheng34ccc" v-if="$t('power')=='功率'">
									<view>
										{{$t('power')}}
									</view>
									<view>
										{{$t('given')}}
									</view>
								
								</view>
								<view class="parameter_zheng34ccc" v-else>
									<view>
										{{$t('power')}} {{$t('given')}}
									</view>
									
							
								</view>
							</view>
						</view>
                         
					</view>
				</view>
				<view class="parameter_home">
					<view class="parameter_home1" @click="onreturn">
						<image src="../../static/home.png" mode=""></image><text
							class="parameter_hometext">{{$t('ReturnModeSelection')}}</text>
					</view>
					<view class="parameter_home2" v-if="faultsdata.length>0&&!SysFaultState">
						<image src="../../static/home1.png" mode=""></image>

						<swiper class="swiper" circular :autoplay="true" :interval="2000" :duration="500"
							:vertical="true">
							<swiper-item v-for="(item, index) in faultsdata" :key="index">
								<view class="parameter_home3">{{ item["CONTENT"] }}</view>
							</swiper-item>

						</swiper>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="alertDialog">
		  <uni-popup-dialog 
		    :mode="modeinput" 
		    :placeholder="$t('powergiven') + '(0~80kW)'" 
		    v-model="value" 
		    :focus="false"
		    :type="successtype" 
		    :cancelText="$t('CancelReturn')" 
		    :confirmText="confirmText" 
		    :beforeClose="true" 
		    :title="title"
		    :content="content" 
		    @confirm="dialogConfirm" 
		    @close="dialogClose">
		  </uni-popup-dialog>
		</uni-popup>
		
		<uni-popup ref="alertDialog1">
		<view class="unipopup">
		<view class="unipopup1">
			<view>
			
			</view>
			<image @click="unipopupclose" class="unipopup1image" src="../../static/Icons2X.png" mode=""></image>
		</view>
		
			<view class="unipopup2">
				<image class="unipopup2image1" src="../../static/ACin.png" mode=""></image>
				<view class="unipopup21">
					<view class="unipopup21image">
					<image class="unipopup2image41" v-if="ACcurrentoutputchoice==20" src="../../static/20kw1l.png" mode=""></image>
					<image class="unipopup2image41" v-else src="../../static/20kw1.png" mode="" @click="clickACcurrentoutput(20)"></image>
					<image class="unipopup2image4" v-if="ACcurrentoutputchoice==40" src="../../static/40kw1l.png" mode=""></image>
					<image class="unipopup2image4" v-else src="../../static/40kw1.png" mode="" @click="clickACcurrentoutput(40)"></image>
					</view>
					<!-- <view class="unipopup22image">
					<image class="unipopup2image41" v-if="ACcurrentoutputchoice==60" src="../../static/60kwl.png" mode=""></image>
					<image class="unipopup2image41" v-else src="../../static/60kw.png" mode="" @click="clickACcurrentoutput(60)"></image>
					<image class="unipopup2image4" v-if="ACcurrentoutputchoice==80" src="../../static/80kwl.png" mode=""></image>
					<image class="unipopup2image4" v-else src="../../static/80kw.png" mode="" @click="clickACcurrentoutput(80)"></image>
					</view> -->
				</view>
			</view>
		
			
			<view class="unipopup3">
				<view class="unipopup311" @click="unipopupclose">
				<image class="unipopup31" v-if="$t('qx')=='../../static/qx.png'" :src="$t('qx')" mode=""></image>
				<image class="unipopup312" v-else :src="$t('qx')" mode=""></image>
				</view>
				<view class="unipopup311" @click="onunipopup">
				<image class="unipopup32" v-if="$t('qd')=='../../static/qd.png'" :src="$t('qd')" mode=""></image>
				<image class="unipopup312" v-else  :src="$t('qd')" mode=""></image>
				</view>
			</view>
		</view>
		</uni-popup>
		<uni-popup ref="message" type="message">
			<uni-popup-message type="error" :message="messageText" :duration="3000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	// import JerryGauge from "../../uni_modules/jerry-gauge/index.vue";
	import {
		getuidatas,
		login,
		control,
		getfaultsList
	} from "../../api/api.js";
	import {
		getTime
	} from "../../utils/index.js";
	import {
		mapState
	} from 'vuex';
	export default {
		components:{
			cmdProgress
		},
		data() {
			return {
				logo:'../../static/logo/logo31.png',
				successtype: 'success',
				confirmText: '确认启动',
				title: '你确定要开启该设备吗?',
				content: '启动设备前,请确认参照用户手册确定设备与各部件处于正确状态!',
				value: '',
				modeinput: '',
				segmented: 1,
				uidatas: '',
				formatTimeid: '',
				faultsdata: [],
				SysFaultState:true,
				currentDate:'',
				ACcurrentoutputchoice:0,
			}
		},
		onLoad() {
		 
		 
this.confirmText = this.$t('ConfirmStart');
this.title = this.$t('popUpTitle');
this.content = this.$t('popUpContent');
		},
		computed: {
			// 使用 mapState 映射多个状态到组件的计算属性
			...mapState(['formattedTime', 'status']),
			...mapState({
				uidatasdata: state => state.uidatasdata
			})
			
		},
		mounted() {
			// setTimeout(() => {
			// 	let SOC = (this.$store.state.uidatasdata.SOC * 1).toFixed(0)
			// 	new Gauge({
			// 		canvasId: "canvas2",
			// 		value: SOC,
			// 		lineWidth: 20,
			// 		progressColor: ["#B0D0FF", "#5B8FF9"],
			// 		valueColor: "blue",
			// 	});
			// }, 100);
			// this.onfaultsdata();
			// ACcurrentoutputTA1       
			// ACcurrentoutputTA2
			// this.$refs.alertDialog1.open(); 
			// this.onfaultsdata();
		},
		beforeUnmount() {
			if (this.scrollInterval) {
				clearInterval(this.scrollInterval); // 清除定时器
			}
		},
		watch: {
			uidatasdata: {
				handler(newVal, oldVal) {
					console.log('uidatasdata 发生变化:', newVal);
					// 在这里可以添加处理逻辑
					if(newVal.SysState_SysFaultState==1&&this.SysFaultState){
					this.SysFaultState = false
					 setTimeout(() => {
						 this.onfaultsdata();
					      }, 1000); // 2000 毫秒 = 2 秒
					}else if(newVal.SysState_SysFaultState==0){
						this.SysFaultState = true
					} 
                   
				 
				},
				deep: true // 监听深层次的变化
			}
		},
		methods: {


			handleDataChange(newData) {
				console.log('数据变化处理:', newData);

			},
			onfaultsdata() {
				let data = {
					page: 1,
					rows: 10,
					device: '',
					starttime: '',
					endtime: '',
					rt: 1,
					type: '故障'
				}
				getfaultsList(data).then(res => {
					console.log(res);
					if (res.status == 'ok') {
						this.faultsdata=[]
						for (var i = 0; i < res.data.list.length; i++) {
							if(this.$store.state.formattedTime.substring(0, 10) == res.data.list[i].FAULTTIME.substring(0, 10)){
								this.faultsdata.push(res.data.list[i])
							}
					
						}
					} else {

					}
				});

			},

			// 返回首页
			onreturn() {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			},
			// 启动设备弹窗
			dialogToggle() {
				this.modeinput = 'base'
				this.successtype = 'success'
				this.confirmText = this.$t('ConfirmStart');
				this.title = this.$t('popUpTitle');
				this.content = this.$t('popUpContent');
				this.$refs.alertDialog.open()
			},
			// 关闭设备弹窗
			onstopit() {
				this.modeinput = 'base'
				this.successtype = 'error'
				this.confirmText =  this.$t('ConfirmStop');
				this.title =  this.$t('popUpTitleStop');
				this.content =this.$t('popUpContentStop');
				this.$refs.alertDialog.open()
			},
			// AC补电功率取消按钮
			unipopupclose(){
				this.ACcurrentoutputchoice =0
				this.$refs.alertDialog1.close()
			},
			// 功率给定确定按钮
			onunipopup(){
				let data = {
					id: "741b775f-2783-4e89-9f39-f7c1eef0d3fa",
					issaveinitvalue: false,
					value: this.ACcurrentoutputchoice+''
				}
				console.log(data);
				control(data).then(res => {
					console.log(res);
					if (res.status == 'ok') {
					
					     this.ACcurrentoutputchoice =0
						 this.$refs.alertDialog1.close()
						uni.showToast({
							title: this.$t('OperationSuccessful'),
							icon: 'none',
							duration: 2000, // 显示时长，单位为毫秒
						});
					} else {
						this.ACcurrentoutputchoice =0
						this.$refs.alertDialog1.close()
						uni.showToast({
							title: this.$t('operationFailed'),
							icon: 'none', // 使用 'none' 图标来表示失败
							duration: 2000, // 显示时长，单位为毫秒
						});
					}
				});
			},
		 
			
			onpower() {
				// this.modeinput = 'input'
				// this.title = this.$t('ACinputpowergiven');
				// this.confirmText = this.$t('confirm');
				// this.ACcurrentoutputchoice =this.$store.state.uidatasdata.
				this.$refs.alertDialog1.open()
			},
			 
			// 确定
			// dialogConfirm() {
			// 	let data = {
			// 			id: "64808c7a-c2ce-4d14-99c1-e426f5d0548a",
			// 			issaveinitvalue: false,
			// 			value: this.content == this.$t('popUpContent') ? '1' : '0'
			// 		}
			 
			// 	control(data).then(data => {
			// 		console.log(data);
			// 		if (data.status == 'ok') {
					 
			// 			this.$refs.alertDialog.close()
			// 			uni.showToast({
			// 				title: this.$t('OperationSuccessful'),
			// 				icon: 'none',
			// 				duration: 2000, // 显示时长，单位为毫秒
			// 			});
			// 			if (this.content == this.$t('popUpContent')) {
			// 				this.ACcurrentoutputchoice = 0,
			// 				onunipopup()
			// 			}
						
			// 		} else {
			// 			this.$refs.alertDialog.close()
			// 			uni.showToast({
			// 				title: this.$t('operationFailed'),
			// 				icon: 'none', // 使用 'none' 图标来表示失败
			// 				duration: 2000, // 显示时长，单位为毫秒
			// 			});
			// 		}
			// 	});

			// },
			// 确定
			dialogConfirm() {
				console.log(this.content);
				console.log(this.$t('popUpContent'));
				if(this.content == this.$t('popUpContent')&&this.title != this.$t('ACinputpowergiven')){
				 
				let data = {
					id: "64808c7a-c2ce-4d14-99c1-e426f5d0548a",
					issaveinitvalue: false,
					value: '1'
				}
				
				control(data).then(data => {
					console.log(data);
					if (data.status == 'ok') {
					 
						this.$refs.alertDialog.close()
						uni.showToast({
							title: this.$t('OperationSuccessful'),
							icon: 'none',
							duration: 2000, // 显示时长，单位为毫秒
						});
					
					 this.ACcurrentoutputchoice = '0',
					 				onunipopup()
						
					} else {
						this.$refs.alertDialog.close()
						uni.showToast({
							title: this.$t('operationFailed'),
							icon: 'none', // 使用 'none' 图标来表示失败
							duration: 2000, // 显示时长，单位为毫秒
						});
					}
				});
				}else{
				 // 下发功率0
				 let data = {
				 	id: "741b775f-2783-4e89-9f39-f7c1eef0d3fa",
				 	issaveinitvalue: false,
				 	value: '0'
				 }
				 console.log(data);
				 control(data).then(res => {
				 	console.log(res);
				 	if (res.status == 'ok') {
				 let info = {
				 	id: "64808c7a-c2ce-4d14-99c1-e426f5d0548a",
				 	issaveinitvalue: false,
				 	value: '0'
				 }
				 control(info).then(ress => {
				 	console.log(ress);
				 	if (ress.status == 'ok') {
				 	 
				 		this.$refs.alertDialog.close()
				 		uni.showToast({
				 			title: this.$t('OperationSuccessful'),
				 			icon: 'none',
				 			duration: 2000, // 显示时长，单位为毫秒
				 		});
				 	
				 		// setTimeout(() => {
				 		//  	this.$refs.alertDialog1.open()
				 		// }, 1000);
				 		
				 	} else {
				 		this.$refs.alertDialog.close()
				 		uni.showToast({
				 			title: this.$t('operationFailed'),
				 			icon: 'none', // 使用 'none' 图标来表示失败
				 			duration: 2000, // 显示时长，单位为毫秒
				 		});
				 	}
				 });
				 				
				 	} else {
				 		 this.$refs.alertDialog.close()
				 		uni.showToast({
				 			title: this.$t('operationFailed'),
				 			icon: 'none', // 使用 'none' 图标来表示失败
				 			duration: 2000, // 显示时长，单位为毫秒
				 		});
				 	}
				 });
				 
				 
				 
				 
				 
				 
				
				}
			 
			 
			
			
			},
			dialogClose() {
				// console.log(this.value);
				this.$refs.alertDialog.close()
				if (this.title == this.$t('ACinputpowergiven')) {
					plus.navigator.hideSystemNavigation() //隐藏虚拟按键
				}
			},
			ontap(e) {
				console.log(e);
				this.segmented = e;
			},
			// AC补点弹窗
			clickACcurrentoutput(value){
				this.ACcurrentoutputchoice = value
			}
		},
		
	}
</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%);
		opacity: 1;
		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);
		backdrop-filter: blur(4px);
		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;
		box-sizing: border-box;
		// background-color: #fff;
		background: rgba(225, 238, 222, 1);
		padding-right:46px;
		padding:0px 46px;
	}

	.top_logo{
		// width:327px;
		width:260px;
		// width:100px;
		// width:56px;
		// width:88px;
		// height: 56px;
		// height: 88px;
	}
	.tite{
	width:240px;
	height: 50px;
	font-size: 80rpx;
	font-weight: 600;
	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);
	}

	.parameter {
		width: 100%;
		padding-bottom: 20px;
		display: flex;
		padding: 20px 20px;
		box-sizing: border-box;
	}

	.parameter_left {
		width: 262.85px;
		height: 630px;
		opacity: 1;
		border-radius: 24.47px;
		// background: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.1);

		border: 2.94px solid rgba(242, 248, 252, 1);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0px;
	}

	.parameter_left1 {
		width: 100%;
		height: 170px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10px;
	}

	.canvas {
		width: 180px;
		margin: 8px auto auto auto;
	}

	.parameter_canvas {
		width: 100%;
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
	}

	.parameter_canvas1 {
		margin-left: -20px;
		margin-top: -40px;
	}

	.parameter_canvas2 {
		margin-right: -20px;
		margin-top: -40px;
	}

	.parameter_leftdian1 {
		width: 100px;
		height: 100px;
		opacity: 1;
	}

	.parameter_lef2 {
		width: 100%;
		height: 210px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url("../../static/heng.png");
		background-size: auto 100%;
		background-repeat: no-repeat;
		background-position: center center;
		margin: 10px 0px;

		image {
			width: 100px;
			height: 100px;
			margin-top: -10px;
		}
	}

	.parameter_leftche {
		width: 115.52px;
		height: 78.32px;
		opacity: 1;

	}

	.parameter_leftche1 {
		width: 77px;
		height: 81px;
		opacity: 1;
	}

	.parameter_leftche2 {
		width: 77px;
		height: 62px;
	}

	.parameter_leftview {
		font-size: 19.58px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 28.35px;
		color: rgba(0, 0, 0, 1);
		margin-top: 8px;
	}

	.parameter_right {
		flex: 1;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.parameter_righttop {
		width: 100%;
	}

	.parameter_1 {
		display: flex;
	}

	.parameter_2 {
		width: 339.21px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 16px;
	}

	.parameter_3 {
		width: 339.21px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 20px;
		box-sizing: border-box;
		border-radius: 9.79px;
		background: linear-gradient(180deg, rgba(93, 189, 245, 0.15) 0%, rgba(31, 141, 209, 0.15) 100%);

		image {
			width: 7.83px;
			height: 7.83px;
			margin-right: 6px;
		}
	}

	.parameter_31 {
		width: 339.21px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 3px 20px;
		box-sizing: border-box;
		border-radius: 9.79px;
		background: linear-gradient(180deg, rgba(93, 189, 245, 0.15) 0%, rgba(31, 141, 209, 0.15) 100%);

		image {
			width: 7.83px;
			height: 7.83px;
			margin-right: 6px;
		}
	}

	.parameter_4 {
		/** 文本1 */
		font-size: 23.5px;
		font-weight: 700;
		color: rgba(38, 38, 38, 1);
		display: flex;
		align-items: center;
	}

	.parameter_5 {
		font-size: 24.47px;
		font-weight: 700;
		color: rgba(217, 22, 22, 1);
	}

	.parameter_51 {
		font-size: 24.47px;
		font-weight: 700;
		color: rgba(7, 123, 67, 1);
	}

	.parameter_SOC {
		display: flex;
		align-items: center;
		// justify-content: space-around;
		justify-content: space-between;
		// width: 195.11px;
		flex: 1;
		 
		padding: 0px 40px;
		box-sizing: border-box;
		height: 130px;
		/* opacity: 0.15; */
		border-radius: 9.79px;
		margin-right: 16px;
		// background: linear-gradient(180deg, rgba(240, 209, 137, 0.15) 0%, rgba(186, 141, 56, 0.15) 100%);
	 background-color:rgb(68, 206, 68, 0.3);
		image {
			width: 37.2px;
			height: 37.2px;
		}
	}

	.parameter_state {
		display: flex;
		align-items: center;
		// justify-content: space-around;
		justify-content: space-between;
		flex: 1;
		padding: 0px 40px;
		box-sizing: border-box;
		// width: 195.11px;
		height: 130px;
		/* opacity: 0.15; */
		border-radius: 9.79px;
		// background: linear-gradient(180deg, rgba(93, 149, 245, 0.15) 0%, rgba(41, 71, 204, 0.15) 100%);
	 background-color:rgb(68, 206, 68, 0.3);
		image {
			width: 37.2px;
			height: 37.2px;
		}
	}

	.parameter_Battery {
		display: flex;
		align-items: center;
		// justify-content: space-around;
		justify-content: space-between;
		// width: 195.11px;
		// height: 130px;
		flex: 1;
		padding: 0px 40px;
		box-sizing: border-box;
		/* opacity: 0.15; */
		margin-right: 16px;
		border-radius: 9.79px;
		// background: linear-gradient(180deg, rgba(133, 242, 133, 0.15)0%, rgba(82, 209, 75, 0.15)100%);
	 background-color:rgb(68, 206, 68, 0.3);
		image {
			width: 20px;
			height: 37.2px;
		}
	}

	.parameter_SOCright {
		display: flex;
		flex-direction: column;
	}

	.parameter_SOCright1 {
		font-size: 23.5px;
		font-weight: 700;
		letter-spacing: 0px;
		line-height: 32.24px;
		color: rgba(38, 38, 38, 1);
		text-align: right;
	}

	.parameter_SOCright2 {
		font-size: 29.37px;
		font-weight: 700;
		color: rgba(186, 141, 56, 1);
	}

	.parameter_Batterystate {
		font-size: 23.5px;
		font-weight: 500;
		color: rgba(38, 38, 38, 1);
		text-align: right;
	}

	.parameter_tap {
		width: 100%;
		display: flex;
		margin-top: 18px;
	}

	.parameter_tap1 {
		flex: 1;
		height: 55.8px;
		opacity: 1;
		// background: linear-gradient(180deg, rgba(30, 131, 189, 1) 0%, rgba(69, 168, 230, 0.92) 100%);
		background: linear-gradient(180deg, rgb(50, 203, 50) 0%, rgb(50, 203, 50) 100%);
		box-shadow:inset 0px 0px 20px  rgb(0, 0, 0);
		box-shadow: inset 0px 0px 9.79px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 23.5px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.parameter_tap2 {
		flex: 1;
		height: 55.8px;
		opacity: 1;
		background: rgba(242, 242, 242, 1);
		box-shadow: inset 0px 0px 9.79px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 23.5px;
		font-weight: 500;
	}

	.parameter_zheng {
		width: 100%;
		height: 313px;
		background-image: url("../../static/z16.png");
		background-size: 100% 100%;
		margin-top: 10px;
		padding: 20px 0px;
		display: flex;
	}

	.parameter_zheng1 {
		width: 387px;
		height: 100%;
		border-right: 0.49px solid rgba(0, 0, 0, 1);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.parameter_zheng11 {
		display: flex;
		padding: 0px 20px;
		justify-content: space-between;
	}
.parameter_zhengbox{
	display: flex;
	padding: 0px 20px;
	justify-content: space-between;
}
	.parameter_zheng12 {
		font-size: 23.5px;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	.parameter_zheng13 {
		font-size: 29.37px;
		font-weight: 700;
		color: rgba(0, 138, 0, 1);
		
	}
.parameter_zhengbox13 {
	width: 50%;
		font-size: 29.37px;
		font-weight: 700;
		color: rgba(0, 138, 0, 1);
		display: flex;
		justify-content: space-between;
	}
	.parameter_zheng14 {
		font-size: 23.5px;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	.parameter_zheng2 {
		width: 387px;
		height: 100%;
		border-right: 0.49px solid rgba(0, 0, 0, 1);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.parameter_zheng3 {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.parameter_zheng31111 {
		width: 120px;
		height: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.parameter_zheng31 {
		width: 90px;
		height: 90px;
		background-image: url("../../static/y4.png");
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 3px;
		box-sizing: border-box;
	}

	.parameter_zheng32 {
		width: 74px;
		height: 74px;
		background-image: url("../../static/y1.png");
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 19.58px;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
	}

	.parameter_zheng32ccc {
		width: 68px;
		height: 68px;
		/* background-image: url("../../static/y1.png"); */
		background-color: #cccccc;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 19px;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
		border-radius: 100%;
	}

	.parameter_zheng33 {
		width: 74px;
		height: 74px;
		background-image: url("../../static/y6.png");
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 19px;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
	}

	.parameter_zheng34 {
		width: 74px;
		height: 74px;
		background-image: url("../../static/y8.png");
		background-size: 100% 100%;
		font-size: 18px;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.parameter_zheng34ccc {
		width: 68px;
				height: 68px;
				/* background-image: url("../../static/y1.png"); */
				background-color: #cccccc;
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 18px;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);
				border-radius: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
	}

	.parameter_home {
		width: 100%;
		display: flex;
		margin-top: 0px;
		justify-content: space-between;
	}

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

		image {
			width: 32.8px;
			height: 32.31px;
			margin-right: 10px;
		}
	}

	.parameter_hometext {
		font-size: 19.58px;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	.parameter_home2 {
		width: 636.33px;
		height: 39.16px;
		opacity: 0.8;
		border-radius: 0.98px;
		background: rgba(242, 242, 242, 1);

		border: 0.49px solid rgba(161, 161, 161, 1);

		box-shadow: inset 0px 0px 9.79px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		padding: 0px 10px;
		box-sizing: border-box;

		image {
			width: 26.92px;
			height: 29.86px;
		}
	}

	.swiper {
		width: 100%;
		height: 40px;
	}

	.parameter_home3 {
		height: 40px;
		/* 每条消息的高度 */
		line-height: 40px;
		/* 垂直居中 */
		font-size: 17.62px;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		margin-left: 10px;
	}

	/* 	.parameter_home3 {
		font-size: 17.62px;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		margin-left: 10px;
	} */

	.uni-dialog-title-text {
		font-size: 70.89px !important;
		font-weight: 500;
		color: rgba(5, 5, 5, 1);
	}

	.parameter_box {
		height: 100%;
		display: flex;
	}

	.parameter_zheng10 {
		width: 687px;
		height: 100%;
		border-right: 0.49px solid rgba(0, 0, 0, 1);
		display: flex;
		flex-direction: column;
		/* justify-content: space-around; */
	}

	.parameter_zheng101 {
		margin-top: 40px;
	}
	.unipopup{
	   width: 680px;
	   // height: 400px;
	   background-color: #fff;
	   border-radius:10px;
	   display: flex;
	   flex-direction: column;
		justify-content: space-between;
		padding-bottom: 40px;
		box-sizing: border-box;
	}
	.unipopup1{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0px 10px;
		box-sizing:border-box;
	}
	.unipopup1image{
		width: 56px;
		height: 56px;
	}
	 .unipopup2{
		 display: flex;
		 align-items: center;
		 justify-content: space-around;
		 padding: 40px 40px;
	 }
	
	 .unipopup2image1{
		 width: 100px;
		 height: 100px;
		 margin-right: 40px;
	 }
	 .unipopup2image2{
	 		 width: 97px;
	 		 height: 115px;
	 }
	 .unipopup21{
	 		display: flex; 
			flex-direction: column;
	 }
	 .unipopup21image{
		 display: flex;
		 align-items: center;
	 }
	 .unipopup22image{
		display: flex;
		align-items: center; 
		margin-top: 30px;
	 }
	 .unipopup2image3{
	 		width: 97px;
	 		height: 115px;
	 }
	 .unipopup2image41{
	 		width: 155px;
	 		height: 86px;
			margin-right: 30px;
	 }
	 .unipopup2image4{
	width: 155px;
	height: 86px;
	 }
	 .unipopup3{
		 width: 100%;
		 display: flex;
		 margin-top: 20px;
	 }
	 .unipopup311{
		 width: 50%;
		 display: flex;
		 align-items: center;
		 justify-content: center;
	 }
	 .unipopup31{
		 width: 114px;
		 height: 30px;
	 }
	 .unipopup32{
	 		 width: 114px;
			 height: 30px;
	 }
	 .unipopup312{
		 width: 114px;
		 height: 41px;
	 }
</style>