From a41cb802543eebc2bb8574aa98c901773621e60c Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期四, 21 十二月 2023 16:07:34 +0800
Subject: [PATCH] #

---
 Monitor-APP/pages/home/home.vue |  805 ++++++++++++++++++++++++++++++++++++---------------------
 1 files changed, 511 insertions(+), 294 deletions(-)

diff --git a/Monitor-APP/pages/home/home.vue b/Monitor-APP/pages/home/home.vue
index 79655c0..8d4873b 100644
--- a/Monitor-APP/pages/home/home.vue
+++ b/Monitor-APP/pages/home/home.vue
@@ -17,84 +17,103 @@
 								<view class="box-item">
 									<text class="item-title">鑷姩鍖栫珛浣撲粨搴�</text>
 									<text class="item-subTitle">Automatic Storageand Retrieval System</text>
-									<text class="item-text" style="text-align: left;">鍒╃敤绔嬩綋浠撳簱璁惧鍙疄鐜颁粨搴撻珮灞傚悎鐞嗗寲銆佸瓨鍙栬嚜鍔ㄥ寲銆佹搷浣滅畝渚垮寲锛涜嚜鍔ㄥ寲绔嬩綋浠撳簱鏄綋鍓嶆妧鏈按骞宠緝楂樼殑褰㈠紡銆傝嚜鍔ㄥ寲绔嬩綋浠撳簱鐨勪富浣撶敱璐ф灦銆佸贩閬撳紡鍫嗗灈璧烽噸鏈恒�佸叆锛堝嚭锛夊簱宸ヤ綔鍙板拰鑷姩杩愯繘锛堝嚭锛夊強鎿嶄綔鎺у埗绯荤粺缁勬垚銆傝揣鏋舵槸閽㈢粨鏋勬垨閽㈢瓔娣峰嚌鍦熺粨鏋勭殑寤虹瓚鐗╂垨缁撴瀯浣擄紝璐ф灦鍐呮槸鏍囧噯灏哄鐨勮揣浣嶇┖闂达紝宸烽亾鍫嗗灈璧烽噸鏈虹┛琛屼簬璐ф灦涔嬮棿鐨勫贩閬撲腑锛屽畬鎴愬瓨銆佸彇璐х殑宸ヤ綔銆傜鐞嗕笂閲囩敤璁$畻鏈哄強鏉″舰鐮佹妧鏈��</text>
+									<text class="item-text"
+										style="text-align: left;">鍒╃敤绔嬩綋浠撳簱璁惧鍙疄鐜颁粨搴撻珮灞傚悎鐞嗗寲銆佸瓨鍙栬嚜鍔ㄥ寲銆佹搷浣滅畝渚垮寲锛涜嚜鍔ㄥ寲绔嬩綋浠撳簱鏄綋鍓嶆妧鏈按骞宠緝楂樼殑褰㈠紡銆傝嚜鍔ㄥ寲绔嬩綋浠撳簱鐨勪富浣撶敱璐ф灦銆佸贩閬撳紡鍫嗗灈璧烽噸鏈恒�佸叆锛堝嚭锛夊簱宸ヤ綔鍙板拰鑷姩杩愯繘锛堝嚭锛夊強鎿嶄綔鎺у埗绯荤粺缁勬垚銆傝揣鏋舵槸閽㈢粨鏋勬垨閽㈢瓔娣峰嚌鍦熺粨鏋勭殑寤虹瓚鐗╂垨缁撴瀯浣擄紝璐ф灦鍐呮槸鏍囧噯灏哄鐨勮揣浣嶇┖闂达紝宸烽亾鍫嗗灈璧烽噸鏈虹┛琛屼簬璐ф灦涔嬮棿鐨勫贩閬撲腑锛屽畬鎴愬瓨銆佸彇璐х殑宸ヤ綔銆傜鐞嗕笂閲囩敤璁$畻鏈哄強鏉″舰鐮佹妧鏈��</text>
 								</view>
 								<view class="box-item">
 									<text class="item-title">浠撳簱鏁版嵁</text>
 									<text class="item-subTitle">warehouse data</text>
 									<view class="img-box">
-										
+
 										<view class="item-img">
 											<image src="../../static/a1.png" mode="aspectFit"></image>
 											<view class="flex-col" style="width: calc(100% - 5vw);">
-												<view class="flex-row" style="position: relative;" >
-													<view style="width: 2vw;padding-left: 5vw;;font-size: 2vw;">{{baseInfo.xDistance}}</view>
-													<view style="position: absolute;bottom: 0;left: 7vw;">m</view>
+												<view class="flex-row" style="position: relative;">
+													<view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">
+														{{baseInfo.xDistance}}
+													</view>
+													<view style="position: absolute;bottom: 0;left: 10vw;">KM</view>
 												</view>
-												<view style="height: 100%;text-align: left;text-indent: 2em;">绱璧拌璺濈(绫�)</view>
+												<view style="height: 100%;text-align: left;text-indent: 2em;">绱璧拌璺濈(鍗冪背)
+												</view>
 											</view>
 										</view>
-										
+
 										<view class="item-img">
 											<image src="../../static/b1.png" mode="aspectFit"></image>
 											<view class="flex-col" style="width: calc(100% - 5vw);">
-												<view class="flex-row" style="position: relative;" >
-													<view style="width: 2vw;padding-left: 5vw;;font-size: 2vw;">{{baseInfo.yDistance}}</view>
-													<view style="position: absolute;bottom: 0;left: 7vw;">m</view>
+												<view class="flex-row" style="position: relative;">
+													<view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">
+														{{baseInfo.yDistance}}
+													</view>
+													<view style="position: absolute;bottom: 0;left: 10vw;">KM</view>
 												</view>
-												<view style="height: 100%;text-align: left;text-indent: 2em;">绱鍗囬檷璺濈(绫�)</view>
+												<view style="height: 100%;text-align: left;text-indent: 2em;">绱鍗囬檷璺濈(鍗冪背)
+												</view>
 											</view>
 										</view>
-										
+
 										<view class="item-img">
 											<image src="../../static/c1.png" mode="aspectFit"></image>
 											<view class="flex-col" style="width: calc(100% - 5vw);">
-												<view class="flex-row" style="position: relative;" >
-													<view style="width: 2vw;padding-left: 5vw;;font-size: 2vw;">{{baseInfo.xDuration}}</view>
-													<view style="position: absolute;bottom: 0;left: 7vw;">s</view>
+												<view class="flex-row" style="position: relative;">
+													<view style="-width: 2vw;padding-left: 2vw;;font-size: 2vw;">
+														{{baseInfo.xDuration}}
+													</view>
+													<view style="position: absolute;bottom: 0;left: 10vw;">H</view>
 												</view>
-												<view style="height: 100%;text-align: left;text-indent: 2em;">绱璧拌鏃堕暱(绉�)</view>
+												<view style="height: 100%;text-align: left;text-indent: 2em;">绱璧拌鏃堕暱(灏忔椂)
+												</view>
 											</view>
 										</view>
-										
+
 										<view class="item-img">
 											<image src="../../static/d1.png" mode="aspectFit"></image>
 											<view class="flex-col" style="width: calc(100% - 5vw);">
-												<view class="flex-row" style="position: relative;" >
-													<view style="width: 2vw;padding-left: 5vw;;font-size: 2vw;">{{baseInfo.yDuration}}</view>
-													<view style="position: absolute;bottom: 0;left: 7vw;">s</view>
+												<view class="flex-row" style="position: relative;">
+													<view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">
+														{{baseInfo.yDuration}}
+													</view>
+													<view style="position: absolute;bottom: 0;left: 10vw;">H</view>
 												</view>
-												<view style="height: 100%;text-align: left;text-indent: 2em;">绱鍗囬檷鏃堕暱(绉�)</view>
+												<view style="height: 100%;text-align: left;text-indent: 2em;">绱鍗囬檷鏃堕暱(灏忔椂)
+												</view>
 											</view>
 										</view>
-										
+
 									</view>
 								</view>
 								<view class="box-item">
 									<view class="flex-row" style="width: 100%;">
 										<!-- 宸︿晶 -->
-										<view class="flex-col" style="align-items: flex-start;justify-content: flex-start;">
+										<view class="flex-col"
+											style="align-items: flex-start;justify-content: flex-start;">
 											<text class="item-title">搴撲綅浣跨敤鐜�</text>
 											<text class="item-subTitle">EQUIPMENT USAGE THIS MONTH</text>
 										</view>
 										<!-- 鍙充晶 -->
 										<view style="margin-left: auto;">
 											<!-- 鐧惧垎姣� -->
-											<view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" >
+											<view class="flex-col"
+												style="align-items: flex-end;justify-content: flex-end;">
 												<!-- style="justify-content: flex-end;position: absolute;top: 0;right: 1vw;text-align: right;" -->
 												<text class="item-title">{{baseInfo.usedPr}}%</text>
 												<text class="item-subTitle">鍚屾瘮涓婃湀 + 5%</text>
 											</view>
 										</view>
 									</view>
-									
-									<view class="flex-col" style="width: 100%;align-items: flex-start;position: relative;font-size: 1vw">
+
+									<view class="flex-col"
+										style="width: 100%;align-items: flex-start;position: relative;font-size: 1vw">
 										<!-- 杩涘害鏉� -->
 										<view class="flex-row" style="width: 100%;position: relative;margin-top: 5%;">
 											<view class="progressBar" style="width: 80%;height: 2vw;">
 												<view class="progress" :style="'width:'+ baseInfo.usedPr + '%'"></view>
 											</view>
-											<view style="position: absolute;bottom: 0;right: 0;font-size: 2.5vw;color: #FF5722;;">{{baseInfo.used}}</view>
+											<view
+												style="position: absolute;bottom: 0;right: 0;font-size: 2.5vw;color: #FF5722;;">
+												{{baseInfo.used}}
+											</view>
 										</view>
 									</view>
 								</view>
@@ -110,14 +129,16 @@
 										<view class="box-item">
 											<view class="flex-row" style="width: 100%;">
 												<!-- 宸︿晶 -->
-												<view class="flex-col" style="align-items: flex-start;justify-content: flex-start;">
+												<view class="flex-col"
+													style="align-items: flex-start;justify-content: flex-start;">
 													<text class="item-title">鍏ュ嚭搴撶粺璁�</text>
 													<text class="item-subTitle">ORDER STATISTICS</text>
 												</view>
 												<!-- 鍙充晶 -->
 												<view style="margin-left: auto;">
 													<!-- 鐧惧垎姣� -->
-													<view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" >
+													<view class="flex-col"
+														style="align-items: flex-end;justify-content: flex-end;">
 														<!-- style="justify-content: flex-end;position: absolute;top: 0;right: 1vw;text-align: right;" -->
 														<text class="item-title">31</text>
 														<text class="item-subTitle">浠婃棩璁㈠崟鏁�</text>
@@ -125,31 +146,34 @@
 												</view>
 											</view>
 											<view class="charts-box">
-												<qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true"/>
+												<qiun-data-charts type="line" :chartData="chartsDataLine1"
+													:echartsH5="true" :echartsApp="true" />
 											</view>
 										</view>
 									</y-box>
 								</view>
-								
-								
+
+
 								<!-- null -->
 								<view style="height: 2%;"></view>
-								
-								
+
+
 								<view style="height: 43%;">
 									<y-box>
 										<view class="box-item">
 											<view class="flex-row" style="width: 100%;">
 												<!-- 宸︿晶 -->
-												<view class="flex-col" style="align-items: flex-start;justify-content: flex-start;">
+												<view class="flex-col"
+													style="align-items: flex-start;justify-content: flex-start;">
 													<text class="item-title">搴撳瓨绫诲瀷</text>
 													<text class="item-subTitle">INCOME DATE</text>
 												</view>
 												<!-- 鍙充晶 -->
 												<view style="margin-left: auto;">
 													<!-- 鐧惧垎姣� -->
-													<view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" >
-														<text class="item-title">浠婂ぉ</text> 
+													<view class="flex-col"
+														style="align-items: flex-end;justify-content: flex-end;">
+														<text class="item-title">浠婂ぉ</text>
 														<text class="item-subTitle">Today</text>
 													</view>
 												</view>
@@ -157,36 +181,47 @@
 											<view class="flex-row" style="width: 100%;">
 												<!-- 宸� -->
 												<view class="charts-box-ring">
-													<qiun-data-charts type="ring" :opts="{legend:{position:'bottom'}}" :eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true" :echartsApp="true"/>
+													<qiun-data-charts type="ring" :opts="{legend:{position:'bottom'}}"
+														:eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true"
+														:echartsApp="true" />
 												</view>
 												<!-- 鍙� -->
 												<view>
 													<view class="flex-row sub-info">
 														<image src="../../static/g1.png" mode="aspectFit"></image>
 														<view style="width: 8vw;height: 4vw;line-height: 4vw;">鍦ㄥ簱</view>
-														<view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">10000</view>
+														<view
+															style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">
+															{{baseInfo.stockCount}}
+														</view>
 													</view>
 													<view class="flex-row sub-info" style="margin-top: 2vh;">
-														<image src="../../static/g1.png" mode="aspectFit"></image>
-														<view style="width: 8vw;height: 4vw;line-height: 4vw;">鍦ㄥ簱</view>
-														<view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">10000</view>
+														<image src="../../static/f1.png" mode="aspectFit"></image>
+														<view style="width: 8vw;height: 4vw;line-height: 4vw;">绌哄簱</view>
+														<view
+															style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">
+															{{baseInfo.emptyCount}}
+														</view>
 													</view>
 													<view class="flex-row sub-info" style="margin-top: 2vh;">
-														<image src="../../static/g1.png" mode="aspectFit"></image>
-														<view style="width: 8vw;height: 4vw;line-height: 4vw;">鍦ㄥ簱</view>
-														<view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">10000</view>
+														<image src="../../static/e1.png" mode="aspectFit"></image>
+														<view style="width: 8vw;height: 4vw;line-height: 4vw;">閿佸畾</view>
+														<view
+															style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">
+															{{baseInfo.noneCount}}
+														</view>
 													</view>
 												</view>
 											</view>
 										</view>
-										
+
 									</y-box>
 								</view>
 								<view style="height: 2%;"></view>
 								<view style="height: 18%;">
 									<y-box>
-										<view class="flex-col" style="width: 100%;height: 100%;font-size: 4vh;justify-content: center;letter-spacing: 1vh;">
-											<!-- 鍢夊杽杈归攱鏈烘鑲′唤鏈夐檺鍏徃 -->
+										<view class="flex-col"
+											style="width: 100%;height: 100%;font-size: 4vh;justify-content: center;letter-spacing: 1vh;">
 											鑷姩浠撳簱WCS鐩戞帶骞冲彴
 										</view>
 									</y-box>
@@ -195,7 +230,7 @@
 						</view>
 					</view>
 				</view>
-				
+
 			</view>
 		</uni-transition>
 		<!-- 鍏ㄦ澘/鎷f枡淇℃伅 -->
@@ -212,12 +247,43 @@
 				<view class="info-main">
 					<view class="info-box">
 						<y-box>
-							<view class="info-box-text">
-								<view class="flex-col info-box-text-item">鐩爣绔欙細{{infoText.staNo}}</view>
-								<view class="flex-col info-box-text-item">鍟嗗搧缂栧彿锛歿{infoText.matnr}}</view>
-								<view class="flex-col info-box-text-item">鍟嗗搧鍚嶇О锛歿{infoText.maknx}}</view>
-								<view class="flex-col info-box-text-item">鍟嗗搧瑙勬牸锛歿{infoText.specs}}</view>
-								<view class="flex-col info-box-text-item">鏁伴噺锛歿{infoText.count}}</view>
+							<!-- 鏂囨湰瀹瑰櫒 -->
+							<view class="text-content" v-for="item in swiperList">
+								<view>鐩爣绔欙細{{infoText.staNo}}</view>
+								<view>鍟嗗搧缂栫爜锛歿{item.matnr}}</view>
+								<view>鍟嗗搧鍚嶇О锛歿{item.maknx}}</view>
+								<view>瑙勬牸锛歿{item.specs}}</view>
+								<view>鍥惧彿锛歿{item.model}}</view>
+								<view>鏁伴噺锛歿{item.count}} / {{item.total ? item.total : '--'}}</view>
+
+
+
+								<!-- head -->
+								<!-- <view class="swiper-head">
+									<view style="width: 20%;">鐩爣绔欙細{{infoText.staNo}}</view>
+									<view style="width: 30%;">鍟嗗搧缂栧彿</view>
+									<view style="width: 20%;">鍟嗗搧鍚嶇О</view>
+									<view style="width: 20%;">瑙勬牸</view>
+									<view style="width: 10%;">鏁伴噺</view>
+								</view> -->
+								<!-- body -->
+								<!-- <view class="swiper-body"> -->
+								<!-- swiper 涓�浜涜鏄�
+									circular 鏄惁閲囩敤琛旀帴婊戝姩锛屽嵆鎾斁鍒版湯灏惧悗閲嶆柊鍥炲埌寮�澶�
+									vertical 婊戝姩鏂瑰悜鏄惁涓虹旱鍚� 
+									display-multiple-items 鍚屾椂鏄剧ず鐨勬粦鍧楁暟閲� -->
+								<!-- <swiper class="swiper-body-main" vertical="true" 
+									display-multiple-items="8"
+									circular="true" :autoplay="true" :interval="3000" :duration="1000">
+										<swiper-item class="swiper-item" v-for="(item,i) in swiperList" :key="i">
+											<view style="width: 20%;">No:{{i+1}}</view>
+											<view style="width: 30%;">{{item.matNo}}</view>
+											<view style="width: 20%;">{{item.maknx}}</view>
+											<view style="width: 20%;">{{item.specs}}</view>
+											<view style="width: 10%;">{{item.count}}</view>
+										</swiper-item>
+									</swiper>
+								</view> -->
 							</view>
 						</y-box>
 					</view>
@@ -235,7 +301,7 @@
 				<view class="button-left"></view>
 				<view class="button-right"></view>
 				<!-- 涓讳綋 -->
-				<view class="info-main" >
+				<view class="info-main">
 					<view class="info-box">
 						<y-box>
 							<view class="info-box-text">
@@ -246,14 +312,14 @@
 				</view>
 			</view>
 		</uni-transition>
-		
+
 		<!-- 鑷畾涔夊脊鍑哄眰 -->
 		<view class="eject-mask" v-show="ejectShow">
 			<view class="eject">
 				<!-- 寮瑰嚭title -->
 				<view class="eject-title">淇敼 / 閰嶇疆</view>
 				<!-- input -->
-				<view class="eject-input">
+				<scroll-view scroll-y class="eject-input">
 					<view class="item">
 						<view class="desc">ip锛�</view>
 						<view class="input">
@@ -284,7 +350,7 @@
 							<input type="text" v-model="baseUrl">
 						</view>
 					</view>
-				</view>
+				</scroll-view>
 				<!-- button -->
 				<view class="eject-button">
 					<view class="button-item" @click="ejectClose">鍙� 娑�</view>
@@ -292,9 +358,12 @@
 				</view>
 			</view>
 		</view>
+		<view style="color: #FFF;position: fixed;bottom: 10px;left: 10px;" v-show="timeOut">
+			杩炴帴瓒呮椂: {{times}} s
+		</view>
 	</view>
 </template>
-
+<!-- {"msg":"鎿嶄綔鎴愬姛","code":200,"data":[{"title":"鍏ㄦ澘鍑哄簱","workNo":7460,"staNo":110,"sourceStaNo":null,"locNo":null,"sourceLocNo":"0807102","matDtos":[{"matNo":"50460834","maknx":"200x60妗岄潰","count":26.0}],"emptyMk":false,"ioType":101}]} -->
 <script>
 	import demodata from '@/mockdata/demodata.json';
 	import ycqdata from '@/pages/index/data.json';
@@ -303,7 +372,7 @@
 			return {
 				series: [],
 				homeViewShow: true,
-				infoViewShow: false	,
+				infoViewShow: false,
 				errorInfoViewShow: false,
 				homeMode: [],
 				infoMode: [],
@@ -314,7 +383,10 @@
 					xDuration: 3,
 					yDuration: 4,
 					usedPr: 50,
-					used: 3537
+					used: 3537,
+					stockCount: '',
+					emptyCount: '',
+					noneCount: '',
 				},
 				chartsData: {
 					"Line": {
@@ -329,7 +401,7 @@
 				},
 				duration: 1000,
 				calendar: '',
-				ringOpts:{},
+				ringOpts: {},
 				chartsDataLine1: {},
 				chartsDataPie2: {},
 				fontSize: '',
@@ -346,17 +418,27 @@
 				infoType: 0,
 				text: '',
 				infoText: {
-					title: '鍏ㄦ澘鍑哄簱',
-					staNo: "200",
-					matnr: "300",
-					maknx: "400",
-					specs: "500",
-					count: "600",
-					error: "鍒╃敤绔嬩綋浠撳簱璁惧鍙疄鐜颁粨搴撻珮灞傚悎鐞嗗寲銆佸瓨鍙栬嚜鍔ㄥ寲銆佹搷浣滅畝渚垮寲锛涖��"
+					title: '',
+					staNo: "",
+					matnr: "",
+					maknx: "",
+					specs: "",
+					count: "",
+					error: "",
+					barcode: "",
+					orderNo: '',
+					batch: '',
+					doneOfTray: '',
+					totalOfTray: '',
+					doneOfUnit: '',
+					totalOfUnit: '',
+					ctnNo: '1'
 				},
-				
-				
-				
+				swiperList: [],
+				timeOut: false,
+				times: 0,
+				currDate: '',
+				textred: 'textred'
 			}
 		},
 		onShow() {
@@ -377,64 +459,70 @@
 			that.baseLedId = BaseLedId
 			that.basePort = BasePort
 			that.baseCrnId = BaseCrnId
-			this.getUrl()
-			console.log(that.commonUrl);
+
+
+
+			this.getDate2()
+			setTimeout(() => {
+				this.getServerData()
+				this.initlineChart()
+				this.initPieChart()
+				this.getOther()
+				setTimeout(() => {
+					this.getServerData()
+					this.initlineChart()
+					this.initPieChart()
+					this.getOther()
+					setTimeout(() => {
+						this.getServerData()
+						this.initlineChart()
+						this.initPieChart()
+						this.getOther()
+					}, 500)
+				}, 500)
+			}, 500)
 		},
 		onLoad() {
-			this.getServerData()
-			this.getDate()
-			setInterval(()=>{
-				this.getDate()
+			setInterval(() => {
+				this.getDate2()
+				this.getUrl()
 				this.getInfo()
 				this.getError()
-				// 娴嬭瘯鐢�
 				// this.getInfo2()
 				// this.getError2()
 				this.controller()
-			},1000)
-			setInterval(()=>{
-				// this.controller()
-			},2000)
+			}, 1000)
+
+			setInterval(() => {
+				this.getServerData()
+				this.initlineChart()
+				this.initPieChart()
+				this.getOther()
+			}, 1800000)
 		},
 		methods: {
+			timeOuts() {
+				console.log(this.times);
+			},
 			getUrl() {
-				this.commonUrl = this.baseHttp + this.baseIP + ':' +this.basePort + "/" +this.baseUrl
+				this.commonUrl = this.baseHttp + this.baseIP + ':' + this.basePort + "/" + this.baseUrl
 			},
 			getServerData() {
-				this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line))
-				this.chartsDataPie2=JSON.parse(JSON.stringify(demodata.PieA))
+				this.chartsDataLine1 = JSON.parse(JSON.stringify(this.chartsData.Line))
+				this.chartsDataPie2 = JSON.parse(JSON.stringify(this.chartsData.Pie))
 			},
 			// 鑾峰彇閿欒淇℃伅
 			getInfo2() {
 				let that = this
 				var result = ycqdata.dataInfo2
-				var	res = result.data
-				if (res.data && res.data !== "") {
-					if (that.infoType == 2 || that.infoType == 3) {
-						return;
-					}
-					// infoType1:鍙湁鎷f枡绛変俊鎭�
-					that.infoType = 1
-					if (res.data[0].ioType === 101) {
-						that.infoText.title = '鍏ㄦ澘鍑哄簱'
-					} else if(res.data[0].ioType === 103) {
-						that.infoText.title = '妫�鏂欏嚭搴�'
-					}
-					that.infoText.staNo = res.data[0].staNo
-					that.infoText.specs = res.data[0].matDtos[0].specs
-					that.infoText.maknx = res.data[0].matDtos[0].maknx
-					that.infoText.count = res.data[0].matDtos[0].count
-				} else {
-					if (that.infoType == 2 || that.infoType == 3) {
-						return;
-					}
-					that.infoType = 0
-				}
+				var res = result.data
+				console.log(res);
+				that.infoModel(res)
 			},
-			getError2 () {
+			getError2() {
 				let that = this
 				let result = ycqdata.dataError2
-				var	res = result.data
+				var res = result.data
 				if (res.data && res.data !== "") {
 					var errorInfo = res.data
 					if (that.infoType == 1) {
@@ -457,52 +545,39 @@
 				let that = this
 				uni.request({
 					url: that.commonUrl + "/monitor/led",
-					method:"GET",
-					data: {ledId:that.baseLedId},
+					method: "GET",
+					data: {
+						ledId: that.baseLedId
+					},
 					success(result) {
-						var	res = result.data
-						if (res.data && res.data !== "") {
-							if (that.infoType == 2 || that.infoType == 3) {
-								return;
-							}
-							// infoType1:鍙湁鎷f枡绛変俊鎭�
-							that.infoType = 1
-							if (res.data[0].ioType === 101) {
-								that.infoText.title = '鍏ㄦ澘鍑哄簱'
-							} else if(res.data[0].ioType === 103) {
-								that.infoText.title = '妫�鏂欏嚭搴�'
-							}
-							that.infoText.staNo = res.data[0].staNo
-							that.infoText.specs = res.data[0].matDtos[0].specs
-							that.infoText.maknx = res.data[0].matDtos[0].maknx
-							that.infoText.count = res.data[0].matDtos[0].count
-						} else {
-							if (that.infoType == 2 || that.infoType == 3) {
-								return;
-							}
-							that.infoType = 0
-						}
+						var res = result.data
+						that.infoModel(res)
 					}
 				})
-				
+
 			},
 			getError() {
 				let that = this
 				uni.request({
 					url: that.commonUrl + "/monitor/led/error",
-					method:"GET",
+					data: {
+						ledId: that.baseLedId
+					},
+					method: "GET",
 					success(result) {
-						var	res = result.data
+						var res = result.data
 						if (res.data && res.data !== "") {
 							var errorInfo = res.data
 							if (that.infoType == 1) {
 								that.infoType = 3
-								that.infoText.title = "寮傚父"
+								that.infoText.title = "鍏朵粬淇℃伅"
+								// that.infoText.title = "寮傚父"
 								that.infoText.error = errorInfo
 								return
 							}
 							that.infoType = 2
-							that.infoText.title = "寮傚父"
+							that.infoText.title = "鍏朵粬淇℃伅"
+							// that.infoText.title = "寮傚父"
 							that.infoText.error = errorInfo
 						} else {
 							if (that.infoType == 1) {
@@ -512,85 +587,122 @@
 						}
 					}
 				})
-				
+
+			},
+			infoModel(res) {
+				let that = this
+				if (res.data && res.data !== "") {
+					if (that.infoType == 2 || that.infoType == 3) {
+						return;
+					}
+					// infoType1:鍙湁鎷f枡绛変俊鎭�
+					that.infoType = 1
+					if (res.data[0].ioType === 101) {
+						that.infoText.title = '鍏ㄦ澘鍑哄簱'
+					} else if (res.data[0].ioType === 103) {
+						that.infoText.title = '妫�鏂欏嚭搴�'
+					} else if (res.data[0].ioType === 107) {
+						that.infoText.title = '鐩樼偣鍑哄簱'
+					}
+					that.infoText.staNo = res.data[0].staNo
+					that.swiperList = res.data[0].matDtos
+					// that.infoText.matnr = res.data[0].matDtos[0].matnr
+					// that.infoText.specs = res.data[0].matDtos[0].specs
+					// that.infoText.maknx = res.data[0].matDtos[0].maknx
+					// that.infoText.count = res.data[0].matDtos[0].count
+				} else {
+					if (that.infoType == 2 || that.infoType == 3) {
+						return;
+					}
+					that.infoType = 0
+				}
 			},
 			// 鎺у埗鍣�
 			controller() {
-				switch(this.infoType) {
+				switch (this.infoType) {
 					// 鏈変俊鎭� 浣� 娌℃湁閿欒淇℃伅
-					case 1: 
+					case 0:
+						if (this.errorInfoViewShow) {
+							this.errorInfoViewShow = false
+							this.errorInfoMode = ['fade', 'slide-bottom']
+							setTimeout(() => {
+								this.homeViewShow = true
+								this.homeMode = ['fade', 'slide-bottom']
+							}, 1000)
+						} else if (this.infoViewShow) {
+							this.infoViewShow = false
+							this.infoMode = ['fade', 'slide-bottom']
+							setTimeout(() => {
+								this.homeViewShow = true
+								this.homeMode = ['fade', 'slide-bottom']
+							}, 1000)
+						} else if (this.errorInfoViewShow && this.infoViewShow) {
+							this.errorInfoViewShow = false
+							this.infoViewShow = false
+							this.infoMode = ['fade', 'slide-bottom']
+							setTimeout(() => {
+								this.homeViewShow = true
+								this.homeMode = ['fade', 'slide-bottom']
+							}, 1000)
+						}
+						return;
+					case 1:
 						if (this.homeViewShow) {
 							this.homeViewShow = false
 							this.homeMode = ['fade', 'slide-bottom']
-							setTimeout(()=>{
+							setTimeout(() => {
 								this.infoViewShow = true
 								this.infoMode = ['fade', 'slide-bottom']
-							},1000)
+							}, 1000)
 						} else if (this.errorInfoViewShow) {
 							this.errorInfoViewShow = false
 							this.errorInfoMode = ['fade', 'slide-bottom']
-							setTimeout(()=>{
+							setTimeout(() => {
 								this.infoViewShow = true
 								this.infoMode = ['fade', 'slide-bottom']
-							},1000)
+							}, 1000)
 						}
-						
+
 						return;
 						// 鏈変俊鎭� 涓� 鏈夐敊璇俊鎭�
 					case 2:
 						if (this.homeViewShow) {
 							this.homeViewShow = false
 							this.homeMode = ['fade', 'slide-bottom']
-							setTimeout(()=>{
+							setTimeout(() => {
 								this.errorInfoViewShow = true
 								this.errorInfoMode = ['fade', 'slide-bottom']
-							},1000)
+							}, 1000)
 						} else if (this.infoViewShow) {
 							this.infoViewShow = false
 							this.infoMode = ['fade', 'slide-bottom']
-							setTimeout(()=>{
+							setTimeout(() => {
 								this.errorInfoViewShow = true
 								this.errorInfoMode = ['fade', 'slide-bottom']
-							},1000)
+							}, 1000)
 						}
 						return;
-					// 鏈変俊鎭� 涓� 鏈夐敊璇俊鎭�
+						// 鏈変俊鎭� 涓� 鏈夐敊璇俊鎭�
 					case 3:
 						if (this.homeViewShow) {
 							this.homeViewShow = false
 							this.homeMode = ['fade', 'slide-bottom']
-							setTimeout(()=>{
+							setTimeout(() => {
 								this.errorInfoViewShow = true
 								this.errorInfoMode = ['fade', 'slide-bottom']
-							},1000)
+							}, 1000)
 						} else if (this.infoViewShow) {
 							this.infoViewShow = false
 							this.infoMode = ['fade', 'slide-bottom']
-							setTimeout(()=>{
+							setTimeout(() => {
 								this.errorInfoViewShow = true
 								this.errorInfoMode = ['fade', 'slide-bottom']
-							},1000)
+							}, 1000)
 						}
 						return;
-					default :
-						if (this.errorInfoViewShow) {
-							this.errorInfoViewShow = false
-							this.errorInfoMode = ['fade', 'slide-bottom']
-							setTimeout(()=>{
-								this.homeViewShow = true
-								this.homeMode = ['fade', 'slide-bottom']
-							},1000)
-						} else if (this.infoViewShow) {
-							this.infoViewShow = false
-							this.infoMode = ['fade', 'slide-bottom']
-							setTimeout(()=>{
-								this.homeViewShow = true
-								this.homeMode = ['fade', 'slide-bottom']
-							},1000)
-						}
-						return;
+
 				}
-				
+
 			},
 			// 涓诲睆骞�
 			handle(type) {
@@ -608,7 +720,7 @@
 				this.modeClass = type
 			},
 			// 閰嶇疆
-			ejected () {
+			ejected() {
 				this.ejectShow = true
 			},
 			// 鍙栨秷閰嶇疆
@@ -619,130 +731,180 @@
 			ejectConfirm() {
 				uni.setStorageSync('BaseIp', this.baseIP);
 				uni.setStorageSync('BaseLedId', this.baseLedId);
-				uni.setStorageSync('BasePort',this.basePort);
-				uni.setStorageSync('BaseCrnId',this.baseCrnId);
-				uni.setStorageSync('UPROJ',this.baseUrl);
+				uni.setStorageSync('BasePort', this.basePort);
+				uni.setStorageSync('BaseCrnId', this.baseCrnId);
+				uni.setStorageSync('UPROJ', this.baseUrl);
 				this.getUrl()
 				this.ejectShow = false
 			},
+			// 鏃ュ巻 鏈嶅姟鍣�
+			getDate2() {
+				let that = this
+				if (that.commonUrl == 'undefined') {
+					return
+				}
+				uni.request({
+					url: that.commonUrl + "/monitor/date",
+					method: "GET",
+					success(result) {
+						var res = result.data.data
+						that.calendar = res.year + "骞�" + res.month + "鏈�" + res.day + "鏃� " + res.hour + ":" + res
+							.minute + ":" + res.second + " " + res.week
+						that.currDate = res.year + "/" + res.month + "/" + res.day
+					},
+					fail(res) {
+						console.log(res);
+					}
+
+				})
+			},
+
 			// 鏃ュ巻
 			getDate() {
 				var dt = new Date();
-				var year,month,day,hours,minutes,seconds,weeks
+				var year, month, day, hours, minutes, seconds, weeks
 				year = dt.getFullYear();
-				month = (dt.getMonth()+1) < 10 ? '0'+ (dt.getMonth()+1) : (dt.getMonth()+1);
-				day = dt.getDate() < 10 ? '0'+dt.getDate() : dt.getDate();
+				month = (dt.getMonth() + 1) < 10 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1);
+				day = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate();
 				hours = dt.getHours() < 10 ? '0' + dt.getHours() : dt.getHours();
 				minutes = dt.getMinutes() < 10 ? '0' + dt.getMinutes() : dt.getMinutes();
-				seconds = dt.getSeconds() < 10 ? '0' + dt.getSeconds() : dt.getSeconds(); 
-				weeks = dt.getDay(); 
+				seconds = dt.getSeconds() < 10 ? '0' + dt.getSeconds() : dt.getSeconds();
+				weeks = dt.getDay();
 				switch (weeks) {
-					case 0: weeks = "鏄熸湡鏃�"; break;
-					case 1: weeks = "鏄熸湡涓�"; break;
-					case 2: weeks = "鏄熸湡浜�"; break;
-					case 3: weeks = "鏄熸湡涓�"; break;
-					case 4: weeks = "鏄熸湡鍥�"; break;
-					case 5: weeks = "鏄熸湡浜�"; break;
-					default : weeks = "鏄熸湡鍏�";
+					case 0:
+						weeks = "鏄熸湡鏃�";
+						break;
+					case 1:
+						weeks = "鏄熸湡涓�";
+						break;
+					case 2:
+						weeks = "鏄熸湡浜�";
+						break;
+					case 3:
+						weeks = "鏄熸湡涓�";
+						break;
+					case 4:
+						weeks = "鏄熸湡鍥�";
+						break;
+					case 5:
+						weeks = "鏄熸湡浜�";
+						break;
+					default:
+						weeks = "鏄熸湡鍏�";
 				}
 				this.calendar = year + "骞�" + month + "鏈�" + day + "鏃� " + hours + ":" + minutes + ":" + seconds + " " + weeks
 			},
 			getDateFormat(value) {
-							var date = new Date();// 鑾峰彇褰撳墠鏃堕棿
-							date.setDate(date.getDate() + value);// 璁剧疆澶╂暟 -1 澶�
-							var m = date.getMonth() + 1
-							var d = date.getDate()
-							var newDate = m + '-' + d
-							return newDate
-						},
+				var date = new Date(this.currDate); // 鑾峰彇褰撳墠鏃堕棿
+				date.setDate(date.getDate() + value); // 璁剧疆澶╂暟 -1 澶�
+				var m = date.getMonth() + 1
+				var d = date.getDate()
+				var newDate = m + '-' + d
+				return newDate
+			},
 			/*************** 鎶樼嚎鍥� *****************************************************************************************************/
-						initlineChart() {
-							let that = this
-							uni.request({
-								url: that.commonUrl + "/monitor/line/charts",
-								method:'GET',
-								success(result) {
-									var res = result.data
-									if (res.code === 200) {
-										that.chartsData.Line.categories = [
-											that.getDateFormat(-11),that.getDateFormat(-10),that.getDateFormat(-9),that.getDateFormat(-8),
-											that.getDateFormat(-7),that.getDateFormat(-6),that.getDateFormat(-5),that.getDateFormat(-4),
-											that.getDateFormat(-3),that.getDateFormat(-2),that.getDateFormat(-1),that.getDateFormat(0),]
-										that.chartsData.Line.series = res.data.rows
-									}
-								}
-							})
-						},
+			initlineChart() {
+				let that = this
+				if (that.commonUrl == 'undefined') {
+					return
+				}
+				uni.request({
+					url: that.commonUrl + "/monitor/line/charts",
+					method: 'GET',
+					success(result) {
+						var res = result.data
+						if (res.code === 200) {
+							that.chartsData.Line.categories = [
+								that.getDateFormat(-11), that.getDateFormat(-10), that.getDateFormat(-9), that
+								.getDateFormat(-8),
+								that.getDateFormat(-7), that.getDateFormat(-6), that.getDateFormat(-5), that
+								.getDateFormat(-4),
+								that.getDateFormat(-3), that.getDateFormat(-2), that.getDateFormat(-1), that
+								.getDateFormat(0),
+							]
+							that.chartsData.Line.series = res.data.rows
+						}
+					}
+				})
+			},
 			/*************** 楗煎浘 *****************************************************************************************************/
-						initPieChart() {
-							let that = this
-							uni.request({
-								url: that.commonUrl + "/monitor/loc/rep",
-								method:'GET',
-								success(result) {
-									var res = result.data
-									if (res.code === 200) {
-										that.chartsData.Pie.series[0].data = res.data.pie
-										that.stockCount = res.data.stockCunt
-										that.emptyCount = res.data.emptyCount
-										that.noneCount = res.data.noneCount
-										that.used = res.data.used
-										that.usedPr = res.data.usedPr
-									}
-								}
-							})
-						},
-						getOther() {
-							let that = this
-							uni.request({
-								// http://10.10.0.222:9090/jkwcs/monitor/led?ledId=186
-								url: that.commonUrl + "/monitor/other",
-								data: {
-									crnId: that.baseCrnId, 
-									ledId: that.baseLedId,
-								},
-								success(result) {
-									console.log(result);
-									var res = result.data
-									if (res.code === 200) {
-										that.xDistance = res.data.xDistance
-										that.yDistance = res.data.yDistance
-										that.xDuration = res.data.xDuration
-										that.yDuration = res.data.yDuration
-									} else if (res.code === 403) {
-										
-									} else {
-										
-									}
-								}
-							})
-						},
+			initPieChart() {
+				let that = this
+				if (that.commonUrl == 'undefined') {
+					return
+				}
+				uni.request({
+					url: that.commonUrl + "/monitor/loc/rep",
+					method: 'GET',
+					success(result) {
+						var res = result.data
+						if (res.code === 200) {
+							that.chartsData.Pie.series[0].data = res.data.pie
+							that.baseInfo.stockCount = res.data.stockCunt
+							that.baseInfo.emptyCount = res.data.emptyCount
+							that.baseInfo.noneCount = res.data.noneCount
+							that.baseInfo.used = res.data.used
+							that.baseInfo.usedPr = res.data.usedPr
+						}
+					}
+				})
+			},
+			getOther() {
+				let that = this
+				if (that.commonUrl == 'undefined') {
+					return
+				}
+				uni.request({
+					url: that.commonUrl + "/monitor/other",
+					data: {
+						crnId: that.baseCrnId,
+						ledId: that.baseLedId,
+					},
+					success(result) {
+						var res = result.data
+						if (res.code === 200) {
+							that.baseInfo.xDistance = res.data.xDistance
+							that.baseInfo.yDistance = res.data.yDistance
+							that.baseInfo.xDuration = res.data.xDuration
+							that.baseInfo.yDuration = res.data.yDuration
+						} else if (res.code === 403) {
+
+						} else {
+
+						}
+					}
+				})
+			},
 		}
-		
+
 	}
 </script>
 
 <style>
 	/* @import url("../../static/css/common.css"); */
+	@import url("home.css");
+
 	/* 鍒� */
 	.flex-col {
 		display: flex;
 		flex-direction: column;
 	}
+
 	/* 琛� */
 	.flex-row {
 		display: flex;
 		flex-direction: row;
 	}
-	
-	.container{
+
+	.container {
 		width: 100vw;
 		min-height: 100vh;
 		background-color: #00163E;
 		color: #fff;
 		text-align: center;
-		
+
 	}
+
 	/* 涓昏鍥� */
 	.home-view {
 		width: 100vw;
@@ -750,32 +912,37 @@
 		background-image: url(../../static/background.png);
 		background-size: 100vw 100vh;
 	}
+
 	.home-right {
 		width: 50vw;
 		height: 89vh;
 		/* background-color: cadetblue; */
 	}
+
 	.home-right-box {
 		width: 98%;
 		height: 98%;
 	}
+
 	.head {
 		width: 100vw;
 		height: 11vh;
-		font-size:4vw;
+		font-size: 4vw;
 		font-weight: 700;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		transform: scale(0.7);
 	}
+
 	.time-tools {
 		position: absolute;
 		right: 2%;
 		top: 2%;
-		font-size:1vw;
+		font-size: 1vw;
 		transform: scale(0.8);
 	}
+
 	.button-left {
 		position: absolute;
 		background-image: url(../../static/right.png);
@@ -786,6 +953,7 @@
 		height: 8.5%;
 		transform: scaleX(-1);
 	}
+
 	.button-right {
 		position: absolute;
 		background-image: url(../../static/right.png);
@@ -795,6 +963,7 @@
 		width: 13.5%;
 		height: 8.5%;
 	}
+
 	.img-box {
 		width: 100%;
 		/* background-color: #666666; */
@@ -804,6 +973,7 @@
 		flex-wrap: wrap;
 		font-size: 1vw;
 	}
+
 	.item-img {
 		width: 50%;
 		margin-top: 5%;
@@ -813,13 +983,14 @@
 		justify-content: flex-start;
 		align-items: flex-start;
 	}
-	.distance {
-		
-	}
+
+	.distance {}
+
 	.item-img image {
 		height: 5vw;
 		width: 5vw;
 	}
+
 	.progressBar {
 		margin-top: 9%;
 		/* width: 100%; */
@@ -827,41 +998,51 @@
 		background-color: #233751;
 		border-radius: 5vw;
 	}
+
 	.progress {
 		/* width: 90%; */
 		height: 100%;
 		background-color: #FF5722;
 		border-radius: 5vw;
 	}
+
 	.charts-box {
-	  width: 80%;
-	  height: 24vh;
-	  margin-left: 10%;
-	} 
+		width: 80%;
+		height: 24vh;
+		margin-left: 10%;
+	}
+
 	.charts-box-ring {
 		width: 50%;
 		height: 24vh;
 		/* background-color: #00ffff; */
 	}
+
 	.sub-info {
 		font-size: 1.5vw;
 	}
+
 	.sub-info image {
 		width: 3.5vw;
 		height: 3.5vw;
 	}
-	
-	
-	
-	
+
+	.red {
+		color: red
+	}
+
+
+
+
 	/* 鍏辩敤 */
 	.main {
 		width: 100vw;
 		height: 88vh;
 		margin-top: 1vh;
 		display: flex;
-		
+
 	}
+
 	.mian-item {
 		width: 50%;
 		height: 100%;
@@ -870,10 +1051,12 @@
 		align-items: center;
 		justify-content: center;
 	}
+
 	.mian-item-box {
 		width: 98%;
 		height: 98%;
 	}
+
 	.box-item {
 		width: 100%;
 		margin-top: 4%;
@@ -882,21 +1065,24 @@
 		align-items: flex-start;
 		justify-content: flex-start;
 	}
+
 	.item-title {
-		font-size:1.5vw;
+		font-size: 1.5vw;
 		font-weight: 700;
 	}
+
 	.item-subTitle {
-		font-size:0.5vw;
+		font-size: 0.5vw;
 		text-indent: 0em;
 	}
+
 	.item-text {
 		font-size: 1vw;
 		text-indent: 2em;
 		letter-spacing: 1px;
 		line-height: 3vh;
 	}
-	
+
 	/* 鍏ㄦ澘/鎷f枡淇℃伅 */
 	.info-view {
 		width: 100vw;
@@ -904,6 +1090,7 @@
 		background-image: url(../../static/background.png);
 		background-size: 100vw 100vh;
 	}
+
 	.info-main {
 		width: 100vw;
 		height: 88vh;
@@ -911,10 +1098,12 @@
 		justify-content: center;
 		align-items: center;
 	}
+
 	.info-box {
 		width: 98%;
 		height: 98%;
 	}
+
 	/* 寮傚父淇℃伅 */
 	.error-info-view {
 		width: 100vw;
@@ -922,7 +1111,7 @@
 		background-image: url(../../static/background.png);
 		background-size: 100vw 100vh;
 	}
-	
+
 	/* 寮瑰嚭:閰嶇疆鍖哄煙 */
 	.eject-mask {
 		width: 100%;
@@ -934,41 +1123,53 @@
 		z-index: 999;
 		display: flex;
 		align-items: center;
-		justify-content: center;	
+		justify-content: center;
 	}
-	.eject{
+
+	.eject {
 		position: relative;
 		width: 40vw;
 		height: 40vh;
 		background-color: #fff;
 		border-radius: 2rem;
 	}
+
 	.eject-title {
 		width: 100%;
 		height: 5vh;
 		line-height: 6vh;
 		font-size: 3vh;
 		font-weight: 700;
-		color: 	#606266;
+		color: #606266;
 		text-align: center;
 	}
+
 	.eject-input {
-		
+		margin-top: 2vh;
+		height: 25vh;
+
+		/* background-color: #00163E; */
+		::-webkit-scrollbar {
+			display: none
+		}
 	}
+
 	.item {
 		display: flex;
 		align-items: center;
-		margin: 2vh 0 0 0;
+		margin: 1vh 0 0 0;
 		font-size: 1.5vw;
 		color: #363636;
 	}
+
 	.desc {
 		display: inline-block;
 		width: 40%;
 		text-align: right;
 		color: #606266;
-		
+
 	}
+
 	.input {
 		display: flex;
 		align-items: center;
@@ -980,13 +1181,15 @@
 		margin-right: 20%;
 		text-align: start;
 	}
+
 	.eject-input input {
 		width: 100%;
 		height: 3vh;
 		font-size: 1vw;
-		
-		
+
+
 	}
+
 	.eject-button {
 		display: flex;
 		align-items: center;
@@ -997,6 +1200,7 @@
 		width: 100%;
 		border-top: 1px solid #ccc;
 	}
+
 	.button-item {
 		width: 50%;
 		height: 100%;
@@ -1005,17 +1209,30 @@
 		text-align: center;
 		color: #909399;
 	}
+
 	.button-item:last-child {
 		color: #67C23A;
-		
+
 		border-left: 1px solid #ccc;
 	}
+
 	.info-box-text {
-		width: 100%;height: 100%;
-		display: flex;flex-direction: column;align-items: center;justify-content: center;
-	}
-	.info-box-text-item {
-		height: 20%;font-size: 8vh;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 		justify-content: center;
 	}
+
+	.info-box-text-item {
+		height: 20%;
+		font-size: 8vh;
+		justify-content: center;
+		white-space: pre-line;
+	}
+
+	.textred {
+		color: red;
+	}
 </style>
\ No newline at end of file

--
Gitblit v1.9.1