4.24

2025-04-24 16:53:41 +08:00 · 2025-04-24 16:53:41 +08:00 · f720ddba7a
commit f720ddba7a
parent 5b328629f8
4 changed files with 367 additions and 300 deletions
--- a/manifest.json
+++ b/manifest.json
@ -1,183 +1,185 @@
 {
-	"name": "芯程物联",
-	"appid": "__UNI__BEE3050",
-	"description": "开源物联网平台",
-	"versionName": "2.2.0",
-	"versionCode": 200,
-	"transformPx": false,
-	"app-plus": {
-		"kernel": {
-			"ios": "WKWebview"
-		},
-		"usingComponents": true,
-		"nvueCompiler": "uni-app",
-		"compilerVersion": 3,
-		"splashscreen": {
-			"alwaysShowBeforeRender": true,
-			"waiting": true,
-			"autoclose": true,
-			"delay": 0
-		},
-		"modules": {
-			"Barcode": {},
-			"OAuth": {},
-			"Camera": {}
-		},
-		"distribute": {
-			"android": {
-				"permissions": [
-					"<uses-feature android:name=\"android.hardware.camera\"/>",
-					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.INTERNET\"/>"
-				],
-				"minSdkVersion": 22,
-				"targetSdkVersion": 30,
-				"abiFilters": ["armeabi-v7a", "arm64-v8a"],
-				"permissionExternalStorage": {
-					"request": "none",
-					"prompt": "应用保存运行状态等信息，需要获取读写手机存储权限，请允许。"
-				},
-				"permissionPhoneState": {
-					"request": "none",
-					"prompt": "为保证您正常、安全地使用，需要获取设备识别码使用权限，请允许。"
-				}
-			},
-			"ios": {
-				"idfa": true,
-				"privacyDescription": {
-					"NSLocationAlwaysUsageDescription": "便于您使用该功能获取当前位置天气情况、WIFI列表等场景。",
-					"NSLocationAlwaysAndWhenInUseUsageDescription": "便于您使用该功能获取当前位置天气情况、WIFI列表等场景。",
-					"NSLocalNetworkUsageDescription": "允许访问蜂窝网络，用于扫码/关联式添加设备",
-					"NSLocationWhenInUseUsageDescription": "便于您使用该功能获取当前位置天气情况、WIFI列表等场景。"
-				},
-				"dSYMs": false
-			},
-			"sdkConfigs": {
-				"push": {},
-				"statics": {},
-				"maps": {},
-				"ad": {},
-				"oauth": {
-					"weixin": {
-						"appid": "wx6be3f0d7bf7154e1",
-						"appsecret": "b6c1d0da60bd5250857d211cdc64fdc9",
-						"UniversalLinks": ""
-					}
-				}
-			},
-			"splashscreen": {
-				"iosStyle": "common",
-				"androidStyle": "common",
-				"alwaysShowBeforeRender": false,
-				"waiting": true,
-				"autoclose": false,
-				"delay": 0,
-				"android": {
-					"hdpi": "./static/logo.9.png",
-					"xhdpi": "./static/logo.9.png",
-					"xxhdpi": "./static/logo.9.png"
-				}
-			},
-			"icons": {
-				"android": {
-					"hdpi": "unpackage/res/icons/72x72.png",
-					"xhdpi": "unpackage/res/icons/96x96.png",
-					"xxhdpi": "unpackage/res/icons/144x144.png",
-					"xxxhdpi": "unpackage/res/icons/192x192.png"
-				},
-				"ios": {
-					"appstore": "unpackage/res/icons/1024x1024.png",
-					"ipad": {
-						"app": "unpackage/res/icons/76x76.png",
-						"app@2x": "unpackage/res/icons/152x152.png",
-						"notification": "unpackage/res/icons/20x20.png",
-						"notification@2x": "unpackage/res/icons/40x40.png",
-						"proapp@2x": "unpackage/res/icons/167x167.png",
-						"settings": "unpackage/res/icons/29x29.png",
-						"settings@2x": "unpackage/res/icons/58x58.png",
-						"spotlight": "unpackage/res/icons/40x40.png",
-						"spotlight@2x": "unpackage/res/icons/80x80.png"
-					},
-					"iphone": {
-						"app@2x": "unpackage/res/icons/120x120.png",
-						"app@3x": "unpackage/res/icons/180x180.png",
-						"notification@2x": "unpackage/res/icons/40x40.png",
-						"notification@3x": "unpackage/res/icons/60x60.png",
-						"settings@2x": "unpackage/res/icons/58x58.png",
-						"settings@3x": "unpackage/res/icons/87x87.png",
-						"spotlight@2x": "unpackage/res/icons/80x80.png",
-						"spotlight@3x": "unpackage/res/icons/120x120.png"
-					}
-				}
-			}
-		},
-		"uniStatistics": {
-			"enable": false
-		},
-		"nativePlugins": {}
-	},
-	"quickapp": {},
-	"mp-weixin": {
-		"appid": "wx5bfbadf52adc17f3",
-		"setting": {
-			"urlCheck": false,
-			"minified": true
-		},
-		"usingComponents": true,
-		"uniStatistics": {
-			"enable": false
-		},
-		"optimization": {
-			"subPackages": true
-		},
-		"permission": {
-			"scope.userLocation": {
-				"desc": "便于您使用该功能获取当前位置天气情况、WIFI列表等场景。"
-			}
-		},
-		"requiredPrivateInfos": ["getLocation"],
-		"lazyCodeLoading": "requiredComponents"
-	},
-	"mp-alipay": {
-		"usingComponents": true
-	},
-	"mp-baidu": {
-		"usingComponents": true
-	},
-	"mp-toutiao": {
-		"usingComponents": true
-	},
-	"uniStatistics": {
-		"enable": false
-	},
-	"sassImplementationName": "node-sass",
-	"h5": {
-		"title": "芯程物联",
-		"router": {
-			"mode": "hash",
-			"base": "./"
-		},
-		"devServer": {
-			"port": 8090
-		},
-		"optimization": {
-			"treeShaking": {
-				"enable": false
-			}
-		},
-		"template": "uni_modules/jessibuca/hybrid/index.html",
-		"sdkConfigs": {
-			"maps": {
-				"qqmap": {
-					"key": "4PDBZ-4KQKU-AX6VO-GU7NB-INDZJ-YBFXC"
-				}
-			}
-		}
-	}
+    "name" : "芯程物联",
+    "appid" : "__UNI__BEE3050",
+    "description" : "开源物联网平台",
+    "versionName" : "2.2.0",
+    "versionCode" : 200,
+    "transformPx" : false,
+    "app-plus" : {
+        "kernel" : {
+            "ios" : "WKWebview"
+        },
+        "usingComponents" : true,
+        "nvueCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        "modules" : {
+            "Barcode" : {},
+            "OAuth" : {},
+            "Camera" : {}
+        },
+        "distribute" : {
+            "android" : {
+                "permissions" : [
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.INTERNET\"/>"
+                ],
+                "minSdkVersion" : 22,
+                "targetSdkVersion" : 30,
+                "abiFilters" : [ "armeabi-v7a", "arm64-v8a" ],
+                "permissionExternalStorage" : {
+                    "request" : "none",
+                    "prompt" : "应用保存运行状态等信息，需要获取读写手机存储权限，请允许。"
+                },
+                "permissionPhoneState" : {
+                    "request" : "none",
+                    "prompt" : "为保证您正常、安全地使用，需要获取设备识别码使用权限，请允许。"
+                }
+            },
+            "ios" : {
+                "idfa" : true,
+                "privacyDescription" : {
+                    "NSLocationAlwaysUsageDescription" : "便于您使用该功能获取当前位置天气情况、WIFI列表等场景。",
+                    "NSLocationAlwaysAndWhenInUseUsageDescription" : "便于您使用该功能获取当前位置天气情况、WIFI列表等场景。",
+                    "NSLocalNetworkUsageDescription" : "允许访问蜂窝网络，用于扫码/关联式添加设备",
+                    "NSLocationWhenInUseUsageDescription" : "便于您使用该功能获取当前位置天气情况、WIFI列表等场景。"
+                },
+                "dSYMs" : false
+            },
+            "sdkConfigs" : {
+                "push" : {},
+                "statics" : {},
+                "maps" : {},
+                "ad" : {},
+                "oauth" : {
+                    "weixin" : {
+                        "appid" : "wx6be3f0d7bf7154e1",
+                        "appsecret" : "b6c1d0da60bd5250857d211cdc64fdc9",
+                        "UniversalLinks" : ""
+                    }
+                }
+            },
+            "splashscreen" : {
+                "iosStyle" : "common",
+                "androidStyle" : "common",
+                "alwaysShowBeforeRender" : false,
+                "waiting" : true,
+                "autoclose" : false,
+                "delay" : 0,
+                "android" : {
+                    "hdpi" : "./static/logo.9.png",
+                    "xhdpi" : "./static/logo.9.png",
+                    "xxhdpi" : "./static/logo.9.png"
+                }
+            },
+            "icons" : {
+                "android" : {
+                    "hdpi" : "unpackage/res/icons/72x72.png",
+                    "xhdpi" : "unpackage/res/icons/96x96.png",
+                    "xxhdpi" : "unpackage/res/icons/144x144.png",
+                    "xxxhdpi" : "unpackage/res/icons/192x192.png"
+                },
+                "ios" : {
+                    "appstore" : "unpackage/res/icons/1024x1024.png",
+                    "ipad" : {
+                        "app" : "unpackage/res/icons/76x76.png",
+                        "app@2x" : "unpackage/res/icons/152x152.png",
+                        "notification" : "unpackage/res/icons/20x20.png",
+                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "proapp@2x" : "unpackage/res/icons/167x167.png",
+                        "settings" : "unpackage/res/icons/29x29.png",
+                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "spotlight" : "unpackage/res/icons/40x40.png",
+                        "spotlight@2x" : "unpackage/res/icons/80x80.png"
+                    },
+                    "iphone" : {
+                        "app@2x" : "unpackage/res/icons/120x120.png",
+                        "app@3x" : "unpackage/res/icons/180x180.png",
+                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "notification@3x" : "unpackage/res/icons/60x60.png",
+                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "settings@3x" : "unpackage/res/icons/87x87.png",
+                        "spotlight@2x" : "unpackage/res/icons/80x80.png",
+                        "spotlight@3x" : "unpackage/res/icons/120x120.png"
+                    }
+                }
+            }
+        },
+        "uniStatistics" : {
+            "enable" : false
+        },
+        "nativePlugins" : {}
+    },
+    "quickapp" : {},
+    "mp-weixin" : {
+        "appid" : "wx5bfbadf52adc17f3",
+        "setting" : {
+            "urlCheck" : false,
+            "minified" : true
+        },
+        "usingComponents" : true,
+        "uniStatistics" : {
+            "enable" : false
+        },
+        "optimization" : {
+            "subPackages" : true
+        },
+        "permission" : {
+            "scope.userLocation" : {
+                "desc" : "便于您使用该功能获取当前位置天气情况、WIFI列表等场景。"
+            }
+        },
+        "requiredPrivateInfos" : [ "getLocation" ],
+        "lazyCodeLoading" : "requiredComponents"
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+    "sassImplementationName" : "node-sass",
+    "h5" : {
+        "title" : "芯程物联",
+        "router" : {
+            "mode" : "hash",
+            "base" : "./"
+        },
+        "devServer" : {
+            "port" : 8090
+        },
+        "optimization" : {
+            "treeShaking" : {
+                "enable" : false
+            }
+        },
+        "template" : "uni_modules/jessibuca/hybrid/index.html",
+        "sdkConfigs" : {
+            "maps" : {
+                "qqmap" : {
+                    "key" : "4PDBZ-4KQKU-AX6VO-GU7NB-INDZJ-YBFXC"
+                }
+            }
+        }
+    },
+    "vueVersion" : "3",
+    "fallbackLocale" : "zh-Hans"
 }
--- a/package.json
+++ b/package.json
@ -23,6 +23,6 @@
 	"author": "fastbee",
 	"license": "ISC",
 	"devDependencies": {
-		"code-inspector-plugin": "^0.18.0"
+		"code-inspector-plugin": "^0.18.3"
 	}
 }
--- a/pagesA/home/device/status/base.vue
+++ b/pagesA/home/device/status/base.vue
@ -572,7 +572,16 @@
 			</view>
 			<view class="wrapper">
 				<view class="item" v-for="(chart, index) in monitorChart" :key="index">
-					<view class="dashboard">
+					<!-- 机械压力表显示输入框 -->
+					<view class="monitor-item" v-if="deviceInfo.productName && deviceInfo.productName.includes('机械压力表')">
+						<view class="monitor-label">{{chart.opts.subtitle.name}}:</view>
+						<view class="monitor-value">
+							<u-input v-model="chart.displayValue" disabled :placeholder="chart.opts.subtitle.name"></u-input>
+						</view>
+						<view class="monitor-unit" v-if="chart.unit">{{chart.unit}}</view>
+					</view>
+					<!-- 其他产品显示仪表盘 -->
+					<view class="dashboard" v-else>
 						<qiun-data-charts type="gauge" :opts="chart.opts" :chartData="chart.data" :canvas2d="false" />
 					</view>
 				</view>
@ -1017,20 +1026,19 @@
 											for (let m = 0; m < this.monitorChart.length; m++) {
 												if (this.deviceInfo.chartList[k].id == this
 													.monitorChart[m].id) {
-													// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
-													let value = (Number(message.message[j].value) + Math
-														.abs(this
-															.deviceInfo.chartList[k].datatype
-															.min)) / (Math.abs(
-															this.deviceInfo.chartList[k]
-															.datatype.min) + Math
-														.abs(this.deviceInfo.chartList[k]
-															.datatype.max));
-													this.monitorChart[m].data.series[0].data =
-														value;
-													this.monitorChart[m].opts.title.name = message.message[
-															j].value + ' ' +
-														this.deviceInfo.chartList[k].datatype.unit;
+													if (this.deviceInfo.productName && this.deviceInfo.productName.includes('机械压力表')) {
+														// 机械压力表更新
+														this.monitorChart[m].data.series[0].data = Number(message.message[j].value) || 0;
+														this.monitorChart[m].displayValue = message.message[j].value;
+														this.monitorChart[m].opts.title.name = message.message[j].value;
+													} else {
+														// 仪表盘更新
+														// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
+														let value = (Number(message.message[j].value) + Math.abs(this.deviceInfo.chartList[k].datatype.min)) / 
+															(Math.abs(this.deviceInfo.chartList[k].datatype.min) + Math.abs(this.deviceInfo.chartList[k].datatype.max));
+														this.monitorChart[m].data.series[0].data = value;
+														this.monitorChart[m].opts.title.name = message.message[j].value + ' ' + this.deviceInfo.chartList[k].datatype.unit;
+													}
 													break;
 												}
 											}
@ -1045,20 +1053,9 @@
 											for (let m = 0; m < this.monitorChart.length; m++) {
 												if (this.deviceInfo.chartList[k].id == this
 													.monitorChart[m].id) {
-													// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
-													let value = (Number(message.message[j].value) + Math
-														.abs(this
-															.deviceInfo.chartList[k].datatype
-															.min)) / (Math.abs(
-															this.deviceInfo.chartList[k]
-															.datatype.min) + Math
-														.abs(this.deviceInfo.chartList[k]
-															.datatype.max));
-													this.monitorChart[m].data.series[0].data =
-														value;
-													this.monitorChart[m].opts.title.name = message.message[
-															j].value + ' ' +
-														this.deviceInfo.chartList[k].datatype.unit;
+													this.monitorChart[m].data.series[0].data = Number(message.message[j].value) || 0;
+													this.monitorChart[m].displayValue = message.message[j].value;
+													this.monitorChart[m].opts.title.name = message.message[j].value;
 													break;
 												}
 											}
@ -1239,98 +1236,125 @@
 				this.monitorChart = [];
 				if (this.deviceInfo.chartList && this.deviceInfo.chartList.length !== 0) {
 					for (let i = 0; i < this.deviceInfo.chartList.length; i++) {
-						let data = {};
-						let res = {
-							categories: [{
-								value: 0.2,
-								color: '#409EFF'
-							}, {
-								value: 0.8,
-								color: '#12d09f'
-							}, {
-								value: 1,
-								color: '#F56C6C'
-							}],
-							series: [{
-								name: this.deviceInfo.chartList[i].name,
-								// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
-								data: (Number(this.deviceInfo.chartList[i].shadow) + Math.abs(
-										this.deviceInfo
-										.chartList[i].datatype.min)) /
-									(Math.abs(this.deviceInfo.chartList[i].datatype.min) + Math
-										.abs(this
-											.deviceInfo
-											.chartList[i].datatype.max))
-							}]
-						};
-						data = JSON.parse(JSON.stringify(res));
+						// 获取显示值和单位
+						const value = !this.deviceInfo.chartList[i].shadow || this.deviceInfo.chartList[i].shadow == ' ' ? 0 : this.deviceInfo.chartList[i].shadow;
+						const unit = this.deviceInfo.chartList[i].datatype.unit || '';
 						
-						//这里的 opts 是图表类型 type="gauge" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['gauge'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
-						let opts = {
-							update: true,
-							timing: 'easeOut',
-							duration: 1000,
-							rotate: false,
-							rotateLock: false,
-							color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272',
-								'#FC8452',
-								'#9A60B4',
-								'#ea7ccc'
-							],
-							padding: undefined,
-							fontSize: 13,
-							fontColor: '#666666',
-							dataLabel: true,
-							dataPointShape: true,
-							dataPointShapeType: 'solid',
-							touchMoveLimit: 60,
-							enableScroll: false,
-							enableMarkLine: false,
-							title: {
-								name: `${!this.deviceInfo.chartList[i].shadow || this.deviceInfo.chartList[i].shadow == ' ' ? 0 : this.deviceInfo.chartList[i].shadow} ${this.deviceInfo.chartList[i].datatype.unit}`,
-								fontSize: 24,
-								color: '#2fc25b',
-								offsetY: 95,
-								offsetX: 0
-							},
-							subtitle: {
-								name: this.deviceInfo.chartList[i].name,
-								fontSize: 14,
-								color: '#333',
-								offsetY: 10,
-								offsetX: 0
-							},
-							extra: {
-								gauge: {
-									type: 'default',
-									width: 10,
-									labelColor: '#666666',
-									startAngle: 0.75,
-									endAngle: 0.25,
-									startNumber: this.deviceInfo.chartList[i].datatype.min,
-									endNumber: this.deviceInfo.chartList[i].datatype.max,
-									format: 'dashboardKeepTwoDecimals',
-									labelFormat: '',
-									splitLine: {
-										fixRadius: 0,
-										splitNumber: 10,
-										width: 30,
-										color: '#FFFFFF',
-										childNumber: 5,
-										childWidth: 10
-									},
-									pointer: {
-										width: 12,
-										color: 'auto'
-									},
-									labelOffset: 16
+						// 判断是否为机械压力表
+						const isMechanicalPressureGauge = this.deviceInfo.productName && this.deviceInfo.productName.includes('机械压力表');
+						
+						let data = {};
+						let opts = {};
+						
+						if (isMechanicalPressureGauge) {
+							// 机械压力表使用简单数据结构
+							data = {
+								categories: [],
+								series: [{
+									name: this.deviceInfo.chartList[i].name,
+									data: Number(value) || 0
+								}]
+							};
+							
+							opts = {
+								subtitle: {
+									name: this.deviceInfo.chartList[i].name,
+									fontSize: 14,
+									color: '#333',
+								},
+								title: {
+									name: `${value}`,
+									fontSize: 24,
+									color: '#2fc25b',
 								}
-							}
-						};
+							};
+						} else {
+							// 其他产品使用仪表盘配置
+							data = {
+								categories: [{
+									value: 0.2,
+									color: '#409EFF'
+								}, {
+									value: 0.8,
+									color: '#12d09f'
+								}, {
+									value: 1,
+									color: '#F56C6C'
+								}],
+								series: [{
+									name: this.deviceInfo.chartList[i].name,
+									// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
+									data: (Number(value) + Math.abs(this.deviceInfo.chartList[i].datatype.min)) /
+										(Math.abs(this.deviceInfo.chartList[i].datatype.min) + Math.abs(this.deviceInfo.chartList[i].datatype.max))
+								}]
+							};
+							
+							opts = {
+								update: true,
+								timing: 'easeOut',
+								duration: 1000,
+								rotate: false,
+								rotateLock: false,
+								color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
+								padding: undefined,
+								fontSize: 13,
+								fontColor: '#666666',
+								dataLabel: true,
+								dataPointShape: true,
+								dataPointShapeType: 'solid',
+								touchMoveLimit: 60,
+								enableScroll: false,
+								enableMarkLine: false,
+								title: {
+									name: `${value} ${unit}`,
+									fontSize: 24,
+									color: '#2fc25b',
+									offsetY: 95,
+									offsetX: 0
+								},
+								subtitle: {
+									name: this.deviceInfo.chartList[i].name,
+									fontSize: 14,
+									color: '#333',
+									offsetY: 10,
+									offsetX: 0
+								},
+								extra: {
+									gauge: {
+										type: 'default',
+										width: 10,
+										labelColor: '#666666',
+										startAngle: 0.75,
+										endAngle: 0.25,
+										startNumber: this.deviceInfo.chartList[i].datatype.min,
+										endNumber: this.deviceInfo.chartList[i].datatype.max,
+										format: 'dashboardKeepTwoDecimals',
+										labelFormat: '',
+										splitLine: {
+											fixRadius: 0,
+											splitNumber: 10,
+											width: 30,
+											color: '#FFFFFF',
+											childNumber: 5,
+											childWidth: 10
+										},
+										pointer: {
+											width: 12,
+											color: 'auto'
+										},
+										labelOffset: 16
+									}
+								}
+							};
+						}
+						
 						this.monitorChart.push({
 							opts: opts,
 							data: data,
-							id: this.deviceInfo.chartList[i].id
+							id: this.deviceInfo.chartList[i].id,
+							unit: unit,
+							displayValue: value,
+							isMechanicalPressureGauge: isMechanicalPressureGauge
 						});
 					}
 				};
@ -1376,16 +1400,42 @@

 	.wrapper .item {
 		width: 100%;
-		height: 250px;
 		text-align: center;
+		padding: 10px 0;
 		border-top: 1px solid #efefef;
 	}

 	.wrapper .item .dashboard {
 		width: 60%;
+		height: 250px;
 		margin: auto;
 	}

+	.wrapper .item .monitor-item {
+		display: flex;
+		align-items: center;
+		padding: 0 20px;
+	}
+
+	.wrapper .item .monitor-label {
+		width: 120px;
+		text-align: left;
+		font-size: 14px;
+		color: #606266;
+	}
+
+	.wrapper .item .monitor-value {
+		flex: 1;
+	}
+
+	.wrapper .item .monitor-unit {
+		margin-left: 10px;
+		font-size: 14px;
+		color: #909399;
+		width: 40px;
+		text-align: left;
+	}
+
 	.card {
 		box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1);
 		border-radius: 6px;
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,15 @@
+// vue.config.js
+const {
+	codeInspectorPlugin
+} = require('code-inspector-plugin');
+
+module.exports = {
+	// ...other code
+	chainWebpack: (config) => {
+		config.plugin('code-inspector-plugin').use(
+			codeInspectorPlugin({
+				bundler: 'webpack',
+			})
+		);
+	},
+};