4.24

manifest.json

@@ -179,5 +179,7 @@
                 }
             }
         }
-	}
+    },
+    "vueVersion" : "3",
+    "fallbackLocale" : "zh-Hans"
 }

package.json

@@ -23,6 +23,6 @@
 	"author": "fastbee",
 	"license": "ISC",
 	"devDependencies": {
-		"code-inspector-plugin": "^0.18.0"
+		"code-inspector-plugin": "^0.18.3"
 	}
 }

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) {
+													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
+														let value = (Number(message.message[j].value) + Math.abs(this.deviceInfo.chartList[k].datatype.min)) / 
-														.abs(this
+															(Math.abs(this.deviceInfo.chartList[k].datatype.min) + Math.abs(this.deviceInfo.chartList[k].datatype.max));
-															.deviceInfo.chartList[k].datatype
+														this.monitorChart[m].data.series[0].data = value;
-															.min)) / (Math.abs(
+														this.monitorChart[m].opts.title.name = message.message[j].value + ' ' + this.deviceInfo.chartList[k].datatype.unit;
-															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，需要最小数+监测值，然后除于区间值
+													this.monitorChart[m].data.series[0].data = Number(message.message[j].value) || 0;
-													let value = (Number(message.message[j].value) + Math
+													this.monitorChart[m].displayValue = message.message[j].value;
-														.abs(this
+													this.monitorChart[m].opts.title.name = message.message[j].value;
-															.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;
 												}
 											}
@@ -1239,8 +1236,41 @@
 				this.monitorChart = [];
 				if (this.deviceInfo.chartList && this.deviceInfo.chartList.length !== 0) {
 					for (let i = 0; i < this.deviceInfo.chartList.length; i++) {
+						// 获取显示值和单位
+						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 || '';
+						
+						// 判断是否为机械压力表
+						const isMechanicalPressureGauge = this.deviceInfo.productName && this.deviceInfo.productName.includes('机械压力表');
+						
 						let data = {};
-						let res = {
+						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'
@@ -1254,29 +1284,18 @@
 								series: [{
 									name: this.deviceInfo.chartList[i].name,
 									// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
-								data: (Number(this.deviceInfo.chartList[i].shadow) + Math.abs(
+									data: (Number(value) + Math.abs(this.deviceInfo.chartList[i].datatype.min)) /
-										this.deviceInfo
+										(Math.abs(this.deviceInfo.chartList[i].datatype.min) + Math.abs(this.deviceInfo.chartList[i].datatype.max))
-										.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));
 							
-						//这里的 opts 是图表类型 type="gauge" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['gauge'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
+							opts = {
-						let opts = {
 								update: true,
 								timing: 'easeOut',
 								duration: 1000,
 								rotate: false,
 								rotateLock: false,
-							color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272',
+								color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
-								'#FC8452',
-								'#9A60B4',
-								'#ea7ccc'
-							],
 								padding: undefined,
 								fontSize: 13,
 								fontColor: '#666666',
@@ -1287,7 +1306,7 @@
 								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}`,
+									name: `${value} ${unit}`,
 									fontSize: 24,
 									color: '#2fc25b',
 									offsetY: 95,
@@ -1327,10 +1346,15 @@
 									}
 								}
 							};
+						}
+						
 						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;

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',
+			})
+		);
+	},
+};