From a3e955e801044d8abc2ec575cdf74a6815b8d963 Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期四, 11 九月 2025 15:30:36 +0800
Subject: [PATCH] 优化配方维护功能-增加简写首字母自动填充,优化车间大屏和设备大屏界面

---
 src/views/dry/bigScreen/BigEqp-tjt.vue |  460 ++++++++++++++++++++++++--------------------------------
 1 files changed, 199 insertions(+), 261 deletions(-)

diff --git a/src/views/dry/bigScreen/BigEqp-tjt.vue b/src/views/dry/bigScreen/BigEqp-tjt.vue
index 0dc81a2..4cbfeac 100644
--- a/src/views/dry/bigScreen/BigEqp-tjt.vue
+++ b/src/views/dry/bigScreen/BigEqp-tjt.vue
@@ -4,61 +4,61 @@
 			<div class="eqpRow">
 				<div class="eqpImage" :style="{ 'background-position': position + 'px' }">
 					<div class="leftEqp">
-						<div style="width: 350px">
+						<div style="width: 373px">
 							<div class="herbInfo">
-								<dv-border-box7 class="curEqp">
+								<dv-border-box13 class="curEqp">
 									<div style="display: flex">
 										<div style="padding-top: 20px; padding-left: 10px" @click="back">
 											<Icon style="color: powderblue" icon="ion:caret-back-sharp" :size="35" />
 										</div>
 										<div class="eqpName" style="text-align: right" @click="changeEqp">
-											<div class="mainInfo" style="font-size: 26px">{{ eqp?.name }}</div>
+											<div class="mainInfo" style="font-size: 31px">{{ eqp?.name }}</div>
 											<div class="subhead">{{ eqp?.type }}</div>
 											<dv-decoration-1 style="width: 240px; height: 90px; margin-left: 20px" />
 											<!-- 璁惧锛歿{ eqp.name }}</div>
 								<div class="eqpName">鍨嬪彿锛歿{ eqp.type }}</div> -->
 										</div>
 									</div>
-								</dv-border-box7>
-								<dv-border-box7 class="curHerb" :style="{ 'background-image': 'url(' + getHerbImageUrl(realData?.herbImage) + ')' }">
+								</dv-border-box13>
+								<dv-border-box13 class="curHerb" :style="{ 'background-image': 'url(' + getHerbImageUrl(realData?.herbImage) + ')' }">
 									<div class="eqpName" style="margin-left: 156px; height: 190px">
-										<div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div>
+										<div class="mainInfo" style="font-size: 31px">{{ realData?.herbName }}</div>
 										<div class="subhead">骞茬嚗閰嶆柟</div>
 									</div>
 									<div class="formula">
-										<div class="formulaItem">
-											<Icon style="color: powderblue" icon="la:box" :size="38" />
-											<div>
-												<div class="mainInfo2">{{ realData?.feed || 0 }} 绛�</div>
-												<div class="subhead2">鎶曟枡閲�</div>
-											</div>
-										</div>
+<!--										<div class="formulaItem">-->
+<!--											<Icon style="color: powderblue" icon="la:box" :size="38" />-->
+<!--											<div>-->
+<!--												<div class="mainInfo2">{{ realData?.feed || 0 }} 绛�</div>-->
+<!--												<div class="subhead2">鎶曟枡閲�</div>-->
+<!--											</div>-->
+<!--										</div>-->
 										<div class="formulaItem">
 											<Icon style="color: red" icon="bx:wind" :size="35" />
 											<div>
 												<div class="mainInfo2">{{ realData?.windTemp || 0 }} 掳C</div>
-												<div class="subhead2">鐑</div>
+												<div class="subhead2">鐑娓╁害</div>
 											</div>
 										</div>
 										<div class="formulaItem">
 											<Icon style="color: green" icon="tabler:target-arrow" :size="35" />
 											<div>
 												<div class="mainInfo2">{{ realData?.target || 0 }} %</div>
-												<div class="subhead2">鐩爣</div>
+												<div class="subhead2">鐩爣鍚按鐜�</div>
 											</div>
 										</div>
 									</div>
 									<!-- <div class="eqpName">{{ realData?.herbName }}</div>
 								<div class="eqpName">{{ realData?.feed }} 绛�</div> -->
-								</dv-border-box7>
+								</dv-border-box13>
 							</div>
-							<!-- <dv-border-box7 class="infoChart" style="margin-left: 0px;">
+							<!-- <dv-border-box13 class="infoChart" style="margin-left: 0px;">
 							<div class="chartTittle">椋庢満棰戠巼</div>
 							<div class="outDiv" style="padding-top: 10px">
 								<div id="fanFreq" style="width: 240px; height: 240px"></div>
 							</div>
-						</dv-border-box7> -->
-							<dv-border-box7 class="infoChart" style="margin-left: 0px">
+						</dv-border-box13> -->
+							<dv-border-box13 class="infoChart" style="margin-left: 0px">
 								<div class="chartTittle">鍚按鐜�</div>
 								<div class="outDiv" style="padding-top: 20px">
 									<div class="leftData">
@@ -81,10 +81,10 @@
 									</div>
 									<div id="moisture" style="width: 170px; height: 170px"></div>
 								</div>
-								<div class="subhead2" style="margin-top: -37px; padding-left: 205px; font-weight: bold">瀹炴椂鍚按鐜�</div>
-							</dv-border-box7>
+								<div class="subhead2" style="margin-top: -54px; padding-left: 205px; font-weight: bold">瀹炴椂鍚按鐜�</div>
+							</dv-border-box13>
 						</div>
-						<dv-border-box7 class="leftTop">
+						<dv-border-box13 class="leftTop">
 							<div class="leftTop0">
 								<div class="leftTop1">
 									<Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
@@ -104,7 +104,7 @@
 								<div class="outDiv eqpStatus">
 									<div
 										style="
-											font-size: 28px;
+											font-size: 33px;
 
 											color: white;
 											background-color: #1595ea;
@@ -157,7 +157,7 @@
 <!--									</div>-->
 								</div>
 							</div>
-              <div style="width: 848px; height: 485px; position: absolute;" @click="showFault">
+              <div style="width: 907px; height: 485px; position: absolute;" @click="showFault">
                 <div v-show="zuoqianjiting" class="error-div" style=" top:309px; left:418px">
                   <div class="blingbling error-marker" ></div>
                   <div class="error-msg" style="width: 70px;">
@@ -348,24 +348,24 @@
                 </div>
 
               </div>
-						</dv-border-box7>
-						<dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px">
+						</dv-border-box13>
+						<dv-border-box13 class="infoChart" style="margin-left: 0px; margin-right: 10px">
 							<div class="chartTittle">椋庣娓╁害</div>
 							<div class="outDiv">
 								<div id="bellowsTemp" style="width: 230px; height: 230px">
-									<Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
+
 								</div>
 							</div>
-						</dv-border-box7>
-						<dv-border-box7 class="leftMid">
+						</dv-border-box13>
+						<dv-border-box13 class="leftMid">
 							<div class="chartTittle">瀹炴椂杩涘害</div>
-							<div id="efficiencyLine" style="width: 848px; height: 180px; margin-top: -10px"></div>
-							<div style="height: 10px; display: flex; width: 848px; padding: 0 60px; justify-content: space-between">
+							<div id="efficiencyLine" style="width: 907px; height: 180px; margin-top: -10px"></div>
+							<div style="height: 10px; font-size: 16px; display: flex; width: 907px; padding: 0 60px; justify-content: space-between">
 								<div style="width: 100px; height: 20px">{{ realData?.dryTime | 0 }} min</div>
 								<div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
 							</div>
-							<div id="progressBar" style="width: 848px; height: 80px"></div>
-						</dv-border-box7>
+							<div id="progressBar" style="width: 907px; height: 80px"></div>
+						</dv-border-box13>
 
 						<!-- <div class="outDiv">
 						<div style="height: 100px; width: 400px">
@@ -387,17 +387,17 @@
 					</div>
 					<div class="rightInfo">
 						<div class="rightTop">
-							<dv-border-box7 class="tempMoisChart">
+							<dv-border-box13 class="tempMoisChart">
 								<div :id="'moisChart'" style="width: 690px; height: 420px"></div>
-							</dv-border-box7>
+							</dv-border-box13>
 						</div>
 						<div class="rightTwo">
-							<dv-border-box7 class="infoChart">
+							<dv-border-box13 class="infoChart">
 								<div class="chartTittle">
 									骞茬嚗鏁堢巼(kg/h)
 									<div class="rightLabel">
-										<div class="label good">&gt;{{ realData?.efficAvg?.toFixed(2) }} 浼� </div>
-										<div class="label bad">&lt;{{ ((realData?.efficAvg|0) * 0.9)?.toFixed(2) }} 宸�</div>
+										<div class="label good"> 浼� </div>
+										<div class="label bad"> 宸�</div>
 									</div>
 								</div>
 								<div class="outDiv" style="padding-top: 20px">
@@ -423,7 +423,7 @@
 											<div class="barBack">
 												<div class="barDiv" :style="{ height: realData?.xlsHeight }"></div>
 											</div>
-											<div style="line-height: 20px">
+											<div class="barBottom" >
 												棰濆畾
 												<br />
 												鏁堢巼
@@ -439,7 +439,7 @@
 												>
 												</div>
 											</div>
-											<div style="line-height: 20px">
+											<div class="barBottom">
 												瀹炴椂
 												<br />
 												鏁堢巼
@@ -447,14 +447,15 @@
 										</div>
 									</div>
 								</div>
-							</dv-border-box7>
+							</dv-border-box13>
 
-							<dv-border-box7 class="infoChart">
+							<dv-border-box13 class="infoChart">
 								<div class="chartTittle"
 									>钂告苯娑堣��(m鲁/kg)
 									<div class="rightLabel">
-										<div class="label bad">&gt;{{ realData?.steamAvg?.toFixed(2) }} 宸�</div>
-										<div class="label good">&lt;{{ ((realData?.steamAvg|0) * 0.9).toFixed(2) }} 浼�</div>
+
+										<div class="label good"> 浼�</div>
+                    <div class="label bad"> 宸�</div>
 									</div>
 								</div>
 								<div class="outDiv" style="padding-top: 20px">
@@ -474,7 +475,7 @@
 											<div class="barBack">
 												<div class="barDiv" :style="{ height: realData?.zqsHeight }"></div>
 											</div>
-											<div style="line-height: 20px">
+											<div class="barBottom">
 												棰濆畾
 												<br />
 												娑堣��
@@ -490,7 +491,7 @@
 												>
 												</div>
 											</div>
-											<div style="line-height: 20px">
+											<div class="barBottom">
 												瀹炴椂
 												<br />
 												娑堣��
@@ -498,19 +499,20 @@
 										</div>
 									</div>
 								</div>
-							</dv-border-box7>
-							<dv-border-box7 class="infoChart">
+							</dv-border-box13>
+							<dv-border-box13 class="infoChart">
 								<div class="chartTittle">鏁堢巼瀵规瘮</div>
 								<div class="outDiv" style="padding-top: 10px">
 									<div id="compare" style="width: 300px; height: 250px"></div>
 								</div>
-							</dv-border-box7>
-							<dv-border-box7 class="infoChart">
+							</dv-border-box13>
+							<dv-border-box13 class="infoChart">
 								<div class="chartTittle">
 									<div> 鐢佃兘娑堣��(kWh/kg)</div>
 									<div class="rightLabel">
-										<div class="label bad">&gt;{{ realData?.wattAvg?.toFixed(3) }} 宸�</div>
-										<div class="label good">&lt;{{ ((realData?.wattAvg|0) * 0.9).toFixed(3) }} 浼�</div>
+
+										<div class="label good"> 浼�</div>
+                    <div class="label bad"> 宸�</div>
 									</div>
 								</div>
 								<div class="outDiv" style="padding-top: 20px">
@@ -530,7 +532,7 @@
 											<div class="barBack">
 												<div class="barDiv" :style="{ height: realData?.dnsHeight }"></div>
 											</div>
-											<div style="line-height: 20px">
+											<div class="barBottom">
 												棰濆畾
 												<br />
 												娑堣��
@@ -545,7 +547,7 @@
 													:style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"
 												></div>
 											</div>
-											<div style="line-height: 20px">
+											<div class="barBottom">
 												瀹炴椂
 												<br />
 												娑堣��
@@ -553,7 +555,7 @@
 										</div>
 									</div>
 								</div>
-							</dv-border-box7>
+							</dv-border-box13>
 						</div>
 					</div>
 				</div>
@@ -774,11 +776,12 @@
 				text: '鍚按鐜�/娓╁害瓒嬪娍',
 				textStyle: {
 					color: '#fff',
-					fontSize: 15,
+					fontSize: 18,
 				},
 			},
 			tooltip: {
 				trigger: 'axis',
+
 			},
 			grid: {
 				left: 50,
@@ -790,6 +793,7 @@
 				right: 60,
 				textStyle: {
 					color: '#fff',
+          fontSize: 16,
 				},
 			},
 			// toolbox: {
@@ -808,6 +812,7 @@
 				type: 'value',
 				axisLabel: {
 					color: '#fff',
+          fontSize: 16,
 				},
 				//boundaryGap: false,
 				// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
@@ -831,6 +836,7 @@
 				boundaryGap: ['10%', '10%'],
 				axisLabel: {
 					color: '#fff',
+          fontSize: 16,
 				},
 				splitLine: {
 					lineStyle: {
@@ -975,41 +981,41 @@
 					max: 80,
 					splitNumber: 8,
 					itemStyle: {
-						color: '#FFAB91',
+						color: '#973535',
 					},
 					progress: {
 						show: true,
-						width: 10,
+						width: 14,
 					},
 					pointer: {
 						show: false,
 					},
 					axisLine: {
 						lineStyle: {
-							width: 10,
+							width: 14,
 						},
 					},
 					axisTick: {
-						distance: -15,
+						distance: -20,
 						splitNumber: 5,
-						length: 3,
+						length: 4,
 						lineStyle: {
 							width: 1,
-							color: '#999',
+							color: '#973535',
 						},
 					},
 					splitLine: {
-						distance: -18,
-						length: 6,
+						distance: -24,
+						length: 7,
 						lineStyle: {
 							width: 2,
-							color: '#999',
+							color: '#973535',
 						},
 					},
 					axisLabel: {
-						distance: -13,
+						distance: -24,
 						color: '#fff',
-						fontSize: 12,
+						fontSize: 20,
 					},
 					anchor: {
 						show: false,
@@ -1023,7 +1029,7 @@
 						lineHeight: 40,
 						borderRadius: 8,
 						offsetCenter: [0, '0%'],
-						fontSize: 20,
+						fontSize: 24,
 						fontWeight: 'bolder',
 						formatter: '{value}掳C',
 						color: 'inherit',
@@ -1042,7 +1048,7 @@
 					min: 0,
 					max: 80,
 					itemStyle: {
-						color: '#FD7347',
+						color: '#973535',
 					},
 					progress: {
 						show: true,
@@ -1177,28 +1183,7 @@
 		// }
 
 		const progressBarOption = {
-			// tooltip: {
-			// 	trigger: 'axis',
-			// 	axisPointer: {
-			// 		// Use axis to trigger tooltip
-			// 		type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
-			// 	},
-			// },
-			// color: [
-			// 	'#0653F6',
-			// 	// '#1B61E7',
-			// 	'#3673D5',
-			// 	// '#4A80C8',
-			// 	'#608FB8',
-			// 	// '#719BAD',
-			// 	'#82A6A1',
-			// 	// '#8DAD9A',
-			// 	'#9CB790',
-			// 	// '#A7BE88',
-			// 	'#B3C681',
-			// 	'#CAD671',
-			// 	'#DBE165',
-			// ],
+
 			animation: false, // 鍏抽棴鍔ㄧ敾
 			color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8', '#60FFFE', '#64FAFF', '#70FFFF', '#7BFFFF', '#88FFFD', '#97FFFF', '#A5FFFD', '#B1FFFF', '#BFFFFF', '#CAFFFF'],
 			grid: {
@@ -1231,112 +1216,7 @@
 				type: 'category',
 				data: ['鏃堕棿'],
 			},
-			series: [
-				// {
-				// 	name: '绗竴闃舵',
-				// 	type: 'bar',
-				// 	stack: 'total',
-				// 	label: {
-				// 		show: true,
-				// 	},
-				// 	barWidth: 26,
-				// 	emphasis: {
-				// 		focus: 'series',
-				// 	},
-				// 	data: [30],
-				// },
-				// {
-				// 	name: '绗簩闃舵',
-				// 	type: 'bar',
-				// 	stack: 'total',
-				// 	label: {
-				// 		show: true,
-				// 	},
-				// 	emphasis: {
-				// 		focus: 'series',
-				// 	},
-				// 	data: [30],
-				// },
-				// {
-				// 	name: 'Affiliate Ad',
-				// 	type: 'bar',
-				// 	stack: 'total',
-				// 	label: {
-				// 		show: true,
-				// 	},
-				// 	emphasis: {
-				// 		focus: 'series',
-				// 	},
-				// 	data: [20],
-				// },
-				// {
-				// 	name: 'Video Ad',
-				// 	type: 'bar',
-				// 	stack: 'total',
-				// 	label: {
-				// 		show: true,
-				// 	},
-				// 	emphasis: {
-				// 		focus: 'series',
-				// 	},
-				// 	data: [15],
-				// },
-				// {
-				// 	name: 'Search Engine',
-				// 	type: 'bar',
-				// 	stack: 'total',
-				// 	label: {
-				// 		show: true,
-				// 	},
-				// 	emphasis: {
-				// 		focus: 'series',
-				// 	},
-				// 	data: [10],
-				// },
-				// {
-				// 	name: 'df Engine',
-				// 	type: 'bar',
-				// 	stack: 'total',
-				// 	label: {
-				// 		show: true,
-				// 	},
-				// 	emphasis: {
-				// 		focus: 'series',
-				// 	},
-				// 	data: [5],
-				// },
-				// {
-				// 	name: 'df Engine',
-				// 	type: 'bar',
-				// 	stack: 'total',
-				// 	label: {
-				// 		show: true,
-				// 	},
-				// 	emphasis: {
-				// 		focus: 'series',
-				// 	},
-				// 	data: [5],
-				// },
-				// {
-				// 	name: 'df Engine',
-				// 	type: 'bar',
-				// 	stack: 'total',
-				// 	label: {
-				// 		show: true,
-				// 	},
-				// 	emphasis: {
-				// 		focus: 'series',
-				// 	},
-				// 	data: [
-				// 		{
-				// 			value: 35,
-				// 			itemStyle: {
-				// 				color: '#c0c0c0',
-				// 			},
-				// 		},
-				// 	],
-				// },
-			],
+			series: [],
 		}
 
 		const efficiencyLineOption = {
@@ -1355,6 +1235,7 @@
 				right: 60,
 				textStyle: {
 					color: '#fff',
+          fontSize: 16,
 				},
 			},
 			xAxis: {
@@ -1389,7 +1270,7 @@
 					name: '骞茬嚗鏁堢巼',
 					type: 'line',
 					lineStyle: {
-						width: 1,
+						width: 2,
 					},
 					// [[15,10], [15,11], [10,6], [7.5,12], [5,12], [2.5,5], [2.5,9], [1,7]]
 					data: [],
@@ -1398,9 +1279,14 @@
 							{ type: 'max', name: 'Max' },
 							{ type: 'min', name: 'Min' },
 						],
+            // label: {
+            //   color: '#fff',
+            //   fontSize: 16,
+            // },
 					},
 					markLine: {
 						symbol: 'none',
+            width: 2,
 						data: [
 							{
 								name: '棰濆畾',
@@ -1410,6 +1296,7 @@
 						label: {
 							formatter: '{b}\n{c}',
 							color: '#fff',
+              fontSize: 16,
 						},
 					},
 					// markLine: {
@@ -1443,18 +1330,22 @@
 				},
 				type: 'category',
 				data: ['1#', '2#', '3#', '4#', '5#', '6#'],
+        axisLabel: {
+          color: '#fff',
+          fontSize: 16,
+        },
 			},
 			series: [
 				{
 					name: '2011',
 					type: 'bar',
-					barWidth: 10,
+					barWidth: 16,
 					data: [0, 0, 0, 0, 0, 0],
 					label: {
 						show: true,
 						position: 'right',
 						valueAnimation: true,
-
+            fontSize: 16,
 						color: '#fff',
 					},
 				},
@@ -1474,7 +1365,7 @@
 	// 鍔ㄦ�佽鍙栧浘鐗�
 	function getHerbImageUrl(name: string) {
 		//return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href
-    return "";
+    return "/src/assets/images/dry/yaocai/yc3.jpg";
 	}
 
 	// 鍔ㄦ�佽鍙栧浘鐗�
@@ -1553,8 +1444,8 @@
 		setTimeout(shangliao, 7000)
 	}
   function showFault () {
-    console.log('showFault')
-    router.push({ path: '/bigFault', query: {  num: num } })
+    console.log('showFault')  // 绂佺敤璺宠浆鍒版晠闅滈〉闈�
+    // router.push({ path: '/bigFault', query: {  num: num } })
 
   }
 	function shangliao() {
@@ -1650,6 +1541,7 @@
 									stack: 'total',
 									label: {
 										show: true,
+                    fontSize: 16
 									},
 									emphasis: {
 										focus: 'series',
@@ -1671,6 +1563,7 @@
 									stack: 'total',
 									label: {
 										show: true,
+                    fontSize: 16
 									},
 									emphasis: {
 										focus: 'series',
@@ -1695,6 +1588,7 @@
 								stack: 'total',
 								label: {
 									show: true,
+                  fontSize: 16
 								},
 								emphasis: {
 									focus: 'series',
@@ -1791,6 +1685,7 @@
 										label: {
 											formatter: '{b}\n{c}%',
 											color: '#fff',
+                      fontSize: 16,
 										},
 									},
 								},
@@ -2190,15 +2085,53 @@
 		router.back()
 	}
 
+
+  function handleKeyDown(event) {
+    event.preventDefault()
+    if (event.key === 'ArrowUp') {
+      num--
+      if (num < 0) {
+        num = eqps.value.length
+      }
+      if (eqps.value.length > 0) {
+        var i = num % eqps.value.length
+        //eqp.value = eqps.value[i]
+        //  console.log("777",i);
+        eqpNum.value = i
+        //console.log("888",eqp.value);
+        queryRealTime()
+        //setTimeout(initCharts, 500)
+      }
+    } else if (event.key === 'ArrowDown') {
+      num++
+      if (eqps.value.length > 0) {
+        var i = num % eqps.value.length
+        //eqp.value = eqps.value[i]
+        //  console.log("777",i);
+        eqpNum.value = i
+        //console.log("888",eqp.value);
+        queryRealTime()
+        //setTimeout(initCharts, 500)
+      }
+    } else if (event.key === 'Tab') {
+      back();
+    }
+  }
 	listAllEqp()
 	//queryEqp()
 	// DOM鎸傝浇瀹屾垚鍚庢覆鏌撳浘琛�
 	onMounted(() => {
+    // 娣诲姞閿洏浜嬩欢鐩戝惉鍣�
+    window.addEventListener('keydown', handleKeyDown)
+    // 鑾峰彇鐒︾偣
+
 		Timer.value = setInterval(queryRealTime, 3000)
 		Timer2.value = setInterval(moveImage, 50)
 	})
 
 	onUnmounted(() => {
+    // 绉婚櫎閿洏浜嬩欢鐩戝惉鍣�
+    window.removeEventListener('keydown', handleKeyDown)
 		clearInterval(Timer.value)
 		clearInterval(Timer2.value)
 		Timer.value = null
@@ -2214,7 +2147,7 @@
 	}
 	.eqpImage {
 		height: 1080px;
-		width: 1920px;
+		width: 2048px;
 		background-image: url(/src/assets/images/dry/bg.png);
 		background-repeat: no-repeat;
 		color: white;
@@ -2229,7 +2162,7 @@
 
 	.leftEqp {
 		height: 1080px;
-		width: 1200px;
+		width: 1280px;
 		display: flex;
 		flex-wrap: wrap;
 		align-content: flex-start;
@@ -2243,21 +2176,21 @@
 	}
 
 	.leftTop {
-		height: 704px;
-		width: 850px;
+		height: 750px;
+		width: 907px;
 		display: flex;
 		justify-content: center;
 		align-content: flex-start;
-		background-image: url(/src/assets/images/dry/ganzaoji-x.png);
+		background-image: url(/src/assets/images/dry/gzj.png);
 		background-repeat: no-repeat;
-		background-size: 79%;
+		background-size: 72%;
 		border-radius: 10px;
 		flex-wrap: wrap;
-		background-position: 85px 260px;
+		background-position: 131px 359px;
 	}
 	.leftMid {
-		width: 850px;
-		height: 281px;
+		width: 907px;
+		height: 300px;
 		/* border: 1px solid; */
 		margin-top: 10px;
 		border-radius: 10px;
@@ -2266,28 +2199,28 @@
 	.mainInfo {
 		line-height: 33px;
 		padding-left: 10px;
-		font-size: 30px;
+		font-size: 35px;
 		color: white;
 	}
 	.subhead {
-		color: #a19f9c;
-		font-size: 16px;
+		color: white;
+		font-size: 20px;
 		padding-left: 10px;
 	}
 
 	.mainInfo2 {
 		line-height: 20px;
-		padding-left: 0px;
-		font-size: 16px;
+		padding-left: 5px;
+		font-size: 24px;
 	}
 	.subhead2 {
-		color: #a19f9c;
-		font-size: 10px;
+		color: white;
+		font-size: 16px;
 		padding-left: 0px;
 	}
 	.zhengqi {
 		height: 180px;
-		width: 200px;
+		width: 213px;
 		background-image: url(/src/assets/images/dry/liuliangji.png);
 		background-repeat: no-repeat;
 		background-size: 160px;
@@ -2298,45 +2231,45 @@
 	.liuliangji {
 	}
 	.leftData {
-		height: 234px;
-		width: 120px;
+		height: 250px;
+		width: 128px;
 	}
 	.rightChart {
-		height: 253px;
-		width: 170px;
+		height: 270px;
+		width: 181px;
 		margin-top: -30px;
 	}
 	.leftTop0 {
-		height: 243px;
-		width: 848px;
+		height: 260px;
+		width: 904px;
 		display: flex;
 		justify-content: center;
 		align-content: flex-start;
 		flex-wrap: wrap;
 	}
 	.leftTop1 {
-		width: 250px;
-		height: 187px;
+		width: 266px;
+		height: 200px;
 		text-align: center;
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		font-size: 30px;
-		color: #727272;
+		font-size: 36px;
+		color: white;
 	}
 	.leftTop2 {
-		width: 250px;
-		height: 187px;
+		width: 266px;
+		height: 200px;
 		text-align: center;
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		font-size: 30px;
-		color: #727272;
+		font-size: 36px;
+		color: white;
 	}
 	.leftTop3 {
-		width: 340px;
-		height: 187px;
+		width: 363px;
+		height: 200px;
 		/* background-image: url(/src/assets/images/dry/fanliao.gif); */
 		background-repeat: no-repeat;
 		background-position: 0px 20px;
@@ -2345,7 +2278,7 @@
 	}
 
 	.eqpStatus {
-		width: 848px;
+		width: 904px;
 		
 	}
 	.rightInfo {
@@ -2353,12 +2286,12 @@
 		flex-wrap: wrap;
 		align-content: flex-start;
 		height: 1060px;
-		width: 700px;
+		width: 747px;
 	}
 
 	.rightTop {
 		display: flex;
-		height: 412px;
+		height: 440px;
 		padding-left: 10px;
 	}
 	.rightTwo {
@@ -2367,17 +2300,18 @@
 	}
 
 	.infoChart {
-		width: 340px;
-		height: 281px;
+		width: 362px;
+		height: 300px;
 		/* background: white; */
 		margin-left: 10px;
 		margin-top: 10px;
 		border-radius: 10px;
 	}
 	.chartTittle {
-		width: 340px;
+    margin-top:10px;
+		width: 362px;
 		height: 30px;
-		font-size: 16px;
+		font-size: 20px;
 		display: flex;
 		justify-content: space-between;
 		padding: 15px 15px;
@@ -2396,6 +2330,7 @@
 	}
 
 	.barTop {
+    font-size: 17px;
 		width: 55px;
 		height: 30px;
 	}
@@ -2426,7 +2361,7 @@
 		width: 50px;
 		border-radius: 4px;
 		height: 20px;
-		font-size: 10px;
+		font-size: 14px;
 		line-height: 21px;
 	}
 	.good {
@@ -2434,35 +2369,34 @@
 	}
 
 	.mainInfo3 {
-		font-size: 24px;
+		font-size: 28px;
 	}
 	.herbInfo {
-		width: 340px;
-		height: 412px;
-		color: #727272;
+		width: 362px;
+		height: 440px;
+		color: #ffffff;
 	}
 
 	.curEqp {
-		width: 340px;
-		height: 159px;
+		width: 362px;
+		height: 170px;
 
 		/* background: white;
 		border-radius: 10px; */
 	}
 	.curHerb {
 		margin-top: 10px;
-		width: 340px;
-		height: 243px;
+		width: 362px;
+		height: 260px;
 		/* background: white;
 		border-radius: 10px; */
-
 		background-repeat: no-repeat;
-		background-size: 200px;
-		background-position: 0px 10px;
+		background-size: 120px;
+		background-position: 14px 10px;
 	}
 	.tempMoisChart {
-		width: 690px;
-		height: 412px;
+		width: 736px;
+		height: 440px;
 		/* background: white; */
 
 		padding: 20px;
@@ -2542,7 +2476,7 @@
 	.fault {
 		padding: 10px;
 		height: 60px;
-		font-size: 26px;
+		font-size: 30px;
 		width: 100%;
 		text-align: right;
 		color: red;
@@ -2565,18 +2499,18 @@
 	.formulaItem {
 		display: flex;
 		justify-content: center;
-		width: 85px;
+		width: 115px;
 		height: 40px;
 	}
 
 	.eqpInfoText {
-		font-size: 18px;
+		font-size: 22px;
 		font-weight: bold;
 	}
 
 	:deep() .ant-slider-mark-text {
 		padding-left: 15px;
-		font-size: 10px;
+		font-size: 14px;
 	}
 	:deep() .ant-slider-mark-text::before {
 		content: '';
@@ -2696,4 +2630,8 @@
     height: 24px;
     background: gray; border-radius: 5px; font-weight: bold; color: orange;
   }
+
+  .barBottom{
+    line-height: 20px; font-size: 16px
+  }
 </style>

--
Gitblit v1.9.3