4.24
This commit is contained in:
parent
5b328629f8
commit
f720ddba7a
@ -179,5 +179,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"vueVersion" : "3",
|
||||
"fallbackLocale" : "zh-Hans"
|
||||
}
|
||||
@ -23,6 +23,6 @@
|
||||
"author": "fastbee",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"code-inspector-plugin": "^0.18.0"
|
||||
"code-inspector-plugin": "^0.18.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
.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;
|
||||
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,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(
|
||||
this.deviceInfo
|
||||
.chartList[i].datatype.min)) /
|
||||
(Math.abs(this.deviceInfo.chartList[i].datatype.min) + Math
|
||||
.abs(this
|
||||
.deviceInfo
|
||||
.chartList[i].datatype.max))
|
||||
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))
|
||||
}]
|
||||
};
|
||||
data = JSON.parse(JSON.stringify(res));
|
||||
|
||||
//这里的 opts 是图表类型 type="gauge" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['gauge'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
||||
let opts = {
|
||||
opts = {
|
||||
update: true,
|
||||
timing: 'easeOut',
|
||||
duration: 1000,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272',
|
||||
'#FC8452',
|
||||
'#9A60B4',
|
||||
'#ea7ccc'
|
||||
],
|
||||
color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#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;
|
||||
|
||||
@ -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',
|
||||
})
|
||||
);
|
||||
},
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user