zangch
/
JDAirPort.Ems.UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ems): 添加振动参数选择功能并优化数据显示

Browse Source 
- 在recordVibrationInstant页面添加振动参数下拉选择器
- 根据选中的振动参数动态显示对应的表格列
- 在currentVibrationCurve页面添加振动参数选择功能
- 曲线图表根据选中参数只显示单个图表，移除多图表显示
- 后端查询时传递振动参数进行数据过滤
- 前端对返回数据进行二次过滤，排除无效值
- 导出功能根据选中参数导出对应数据列
- 优化图表样式和坐标轴配置，提升显示效果
boardTest
zangch@mesnac.com 2 months ago
parent ce9540d020
commit d6d6aa1bc1
2 changed files with 102 additions and 392 deletions
Show Stats Download Patch File Download Diff File

44
src/views/ems/record/recordVibrationInstant/index.vue
Unescape Escape View File

@ -135,6 +135,14 @@
end-placeholder="结束时间"
></el-date-picker>
</el-form-item>
<el-form-item label="振动参数">
<el-select v-model="selectedVibrationParam" placeholder="请选择振动参数" style="width: 150px" @change="handleQuery">
<el-option label="振动速度" value="vibrationSpeed"></el-option>
<el-option label="振动位移" value="vibrationDisplacement"></el-option>
<el-option label="振动加速度" value="vibrationAcceleration"></el-option>
<el-option label="振动温度" value="vibrationTemp"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@ -193,14 +201,14 @@
<el-table-column label="计量设备" align="center" prop="monitorName" min-width="150">
</el-table-column>
<!-- 振动设备专用列 -->
<el-table-column label="振动速度(mm/s)" align="center" prop="vibrationSpeed" width="120">
<!-- 振动设备专用列：根据选中参数动态显示单列 -->
<el-table-column v-if="selectedVibrationParam === 'vibrationSpeed'" label="振动速度(mm/s)" align="center" prop="vibrationSpeed" width="150">
</el-table-column>
<el-table-column label="振动位移(μm)" align="center" prop="vibrationDisplacement" width="120">
<el-table-column v-if="selectedVibrationParam === 'vibrationDisplacement'" label="振动位移(μm)" align="center" prop="vibrationDisplacement" width="150">
</el-table-column>
<el-table-column label="振动加速度(g)" align="center" prop="vibrationAcceleration" width="120">
<el-table-column v-if="selectedVibrationParam === 'vibrationAcceleration'" label="振动加速度(g)" align="center" prop="vibrationAcceleration" width="150">
</el-table-column>
<el-table-column label="振动温度(℃)" align="center" prop="vibrationTemp" width="120">
<el-table-column v-if="selectedVibrationParam === 'vibrationTemp'" label="振动温度(℃)" align="center" prop="vibrationTemp" width="150">
</el-table-column>
<!-- 记录时间列，给足够的宽度 -->
@ -304,6 +312,8 @@ export default {
name: "RecordIotenvInstant",
data() {
return {
// 选中的振动参数（默认振动速度）
selectedVibrationParam: 'vibrationSpeed',
workUnitName:null,
//下拉树List
@ -484,9 +494,16 @@ export default {
return;
}
// 传递选中的振动参数到后端，让SQL根据该参数过滤
this.queryParams.vibrationParam = this.selectedVibrationParam;
listRecordIotenvInstant(this.queryParams).then(response => {
this.recordIotenvInstantList = response.rows;
this.total = response.total;
// 后端已根据vibrationParam过滤，前端再做一次保险过滤
const filteredRows = response.rows.filter(row => {
const value = parseFloat(row[this.selectedVibrationParam]);
return !isNaN(value) && value > 0 && value < 80;
});
this.recordIotenvInstantList = filteredRows;
this.total = response.total; // 使用后端返回的总数
this.loading = false;
});
},
@ -601,10 +618,21 @@ export default {
this.queryParams.params['endRecordTime'] = this.daterangeRecordTime[1];
// 振动页面固定传递monitorTypes=10，确保后端只导出振动相关列
this.queryParams.params['monitorTypes'] = '10';
// 传递选中的振动参数，后端只导出该参数列
this.queryParams.params['vibrationParam'] = this.selectedVibrationParam;
// 参数中文名映射
const paramNameMap = {
vibrationSpeed: '振动速度',
vibrationDisplacement: '振动位移',
vibrationAcceleration: '振动加速度',
vibrationTemp: '振动温度'
};
const paramName = paramNameMap[this.selectedVibrationParam] || '振动数据';
this.download('ems/record/recordIotenvInstant/export', {
...this.queryParams
}, `振动数据_${this.daterangeRecordTime[0].substring(0,10)}_${this.daterangeRecordTime[1].substring(0,10)}.xlsx`)
}, `${paramName}_${this.daterangeRecordTime[0].substring(0,10)}_${this.daterangeRecordTime[1].substring(0,10)}.xlsx`)
},
getTreeselect() {

450
src/views/ems/report/currentVibrationCurve/index.vue
Unescape Escape View File

@ -59,16 +59,22 @@
></el-input-number>
<span style="margin-left: 5px; color: #909399;">分钟/点</span>
</el-form-item>
<el-form-item label="振动参数">
<el-select v-model="selectedVibrationParam" placeholder="请选择振动参数" style="width: 150px" @change="handleQuery">
<el-option label="振动速度" value="vibrationSpeed"></el-option>
<el-option label="振动位移" value="vibrationDisplacement"></el-option>
<el-option label="振动加速度" value="vibrationAcceleration"></el-option>
<el-option label="振动温度" value="vibrationTemp"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<Chart ref="Chart1" class="chart1"/>
<Chart ref="Chart2" class="chart2"/>
<Chart ref="Chart3" class="chart3"/>
<Chart ref="Chart4" class="chart4"/>
<!-- 根据选中参数只显示单个图表 -->
<Chart ref="VibrationChart" class="vibration-chart"/>
</el-col>
</el-row>
@ -96,6 +102,8 @@ export default {
},
data() {
return {
// 选中的振动参数（默认振动速度）
selectedVibrationParam: 'vibrationSpeed',
//下拉树List
baseMonitorInfoOptions: [],
//左侧树结构List
@ -288,24 +296,45 @@ export default {
this.handleQuery()
},
/** 振动曲线 */
/** 振动曲线：根据选中参数只显示单个图表，过滤无效值保持曲线光滑 */
async getChart() {
if (this.queryParams.monitorId == null) {
return
}
let query = JSON.parse(JSON.stringify(this.queryParams))
// const {data} = await vibrationInstantList(query)
// 传递选中的振动参数到后端，让SQL根据该参数过滤
query.vibrationParam = this.selectedVibrationParam
const {data} = await getRecordIotenvInstantList(query)
let option1 = {
// 参数配置映射
const paramConfig = {
vibrationSpeed: { name: '速度(mm/s)', title: '速度曲线', field: 'vibrationSpeed' },
vibrationDisplacement: { name: '位移(μm)', title: '位移曲线', field: 'vibrationDisplacement' },
vibrationAcceleration: { name: '加速度(g)', title: '加速度曲线', field: 'vibrationAcceleration' },
vibrationTemp: { name: '温度(℃)', title: '温度曲线', field: 'vibrationTemp' }
}
const config = paramConfig[this.selectedVibrationParam]
// 过滤无效值：小于等于0或大于等于80的数值不显示
const validPoints = data.filter(e => {
const value = parseFloat(e[config.field])
return !isNaN(value) && value > 0 && value < 80
})
// 提取有效数据的时间和数值（保持一一对应）
const timeData = validPoints.map(e => e.recodeTime)
const validData = validPoints.map(e => parseFloat(e[config.field]))
let option = {
title: {
text: this.selectMonitorName + ' 速度曲线',
text: this.selectMonitorName + ' ' + config.title,
x: 'center'
},
grid: {
top: '15%',
bottom: '10%',
bottom: '15%',
left: '10%',
right: '3%'
right: '5%'
},
tooltip: {
trigger: 'axis',
@ -323,32 +352,36 @@ export default {
right: 0
},
xAxis: {
data: data.map(e => e.recodeTime),
data: timeData,
axisLine: {
show: true, //隐藏X轴轴线
show: true,
lineStyle: {
color: '#000000'
}
},
axisTick: {
show: true //隐藏X轴刻度
show: true
},
axisLabel: {
show: true,
textStyle: {
color: '#000000' //X轴文字颜色
color: '#000000'
}
}
},
yAxis: [
{
type: 'value',
name: '速度(mm/s)',
name: config.name,
min: 0,
nameTextStyle: {
color: '#000000'
},
splitLine: {
show: false
show: true,
lineStyle: {
type: 'dashed'
}
},
axisTick: {
show: true
@ -363,387 +396,36 @@ export default {
show: true,
textStyle: {
color: '#000000'
},
formatter: function(value) {
return value.toFixed(2); // 保留2位小数
}
}
}
],
series: [
{
name: '速度(mm/s)',
connectNulls: true, // 关键配置
name: config.name,
connectNulls: true, // 跳过null值但保持曲线连续光滑
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// //折线拐点标志的样式
// color: "#058cff",
// },
// lineStyle: {
// color: "#058cff",
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e => e.vibrationSpeed)
},
smooth: true, // 平滑曲线显示
showAllSymbol: true,
symbol: 'circle',
symbolSize: 8,
data: validData
}
]
}
let option2 = {
title: {
text: this.selectMonitorName + ' 温度曲线',
x: 'center'
},
grid: {
top: '15%',
bottom: '10%',
left: '10%',
right: '3%'
},
dataZoom: [{
type: 'slider'
}],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true
}
}
},
legend: {
right: 0
},
xAxis: {
data: data.map(e => e.recodeTime),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000000'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: '#000000' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: '温度(℃)',
nameTextStyle: {
color: '#000000'
},
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000000'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#000000'
}
}
}
],
series: [
{
name: '温度(℃)',
connectNulls: true, // 关键配置
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// //折线拐点标志的样式
// color: "#058cff",
// },
// lineStyle: {
// color: "#058cff",
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e => e.vibrationTemp)
},
]
}
let option3 = {
title: {
text: this.selectMonitorName + ' 位移曲线',
x: 'center'
},
grid: {
top: '15%',
bottom: '10%',
left: '10%',
right: '3%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true
}
}
},
dataZoom: [{
type: 'slider'
}],
legend: {
right: 0
},
xAxis: {
data: data.map(e => e.recodeTime),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000000'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: '#000000' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: '位移(um)',
nameTextStyle: {
color: '#000000'
},
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000000'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#000000'
}
}
}
],
series: [
{
name: '位移(um)',
connectNulls: true, // 关键配置
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// //折线拐点标志的样式
// color: "#058cff",
// },
// lineStyle: {
// color: "#058cff",
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e => e.vibrationDisplacement)
},
]
}
let option4 = {
title: {
text: this.selectMonitorName + ' 加速度曲线',
x: 'center'
},
grid: {
top: '15%',
bottom: '10%',
left: '10%',
right: '3%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true
}
}
},
dataZoom: [{
type: 'slider'
}],
legend: {
right: 0
},
xAxis: {
data: data.map(e => e.recodeTime),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000000'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: '#000000' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: '加速度(g)',
nameTextStyle: {
color: '#000000'
},
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000000'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#000000'
}
}
}
],
series: [
{
name: '加速度(g)',
connectNulls: true, // 关键配置
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// color: "#058cff",
// },
// lineStyle: {
// color: "#058cff",
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e => e.vibrationAcceleration)
},
]
}
this.$refs.Chart1.setData(option1)
this.$refs.Chart2.setData(option2)
this.$refs.Chart3.setData(option3)
this.$refs.Chart4.setData(option4)
echarts.connect(this.$refs.Chart1.chart, this.$refs.Chart2.chart, this.$refs.Chart3.chart, this.$refs.Chart4.chart)
this.$refs.Chart1.chart.on('datazoom', (e) => {
option2.dataZoom[0].start = e.start
option2.dataZoom[0].end = e.end
this.$refs.Chart2.setData(option2)
option3.dataZoom[0].start = e.start
option3.dataZoom[0].end = e.end
this.$refs.Chart3.setData(option3)
option4.dataZoom[0].start = e.start
option4.dataZoom[0].end = e.end
this.$refs.Chart4.setData(option4)
})
this.$refs.Chart2.chart.on('datazoom', (e) => {
option1.dataZoom[0].start = e.start
option1.dataZoom[0].end = e.end
this.$refs.Chart1.setData(option1)
option3.dataZoom[0].start = e.start
option3.dataZoom[0].end = e.end
this.$refs.Chart3.setData(option3)
option4.dataZoom[0].start = e.start
option4.dataZoom[0].end = e.end
this.$refs.Chart4.setData(option4)
})
this.$refs.Chart3.chart.on('datazoom', (e) => {
option2.dataZoom[0].start = e.start
option2.dataZoom[0].end = e.end
this.$refs.Chart2.setData(option2)
option1.dataZoom[0].start = e.start
option1.dataZoom[0].end = e.end
this.$refs.Chart1.setData(option1)
option4.dataZoom[0].start = e.start
option4.dataZoom[0].end = e.end
this.$refs.Chart4.setData(option4)
})
this.$refs.Chart4.chart.on('datazoom', (e) => {
option2.dataZoom[0].start = e.start
option2.dataZoom[0].end = e.end
this.$refs.Chart2.setData(option2)
option3.dataZoom[0].start = e.start
option3.dataZoom[0].end = e.end
this.$refs.Chart3.setData(option3)
option1.dataZoom[0].start = e.start
option1.dataZoom[0].end = e.end
this.$refs.Chart4.setData(option1)
})
this.$refs.VibrationChart.setData(option)
}
}
}
</script>
<style scoped>
.chart1 {
width: 50%;
height: 40vh;
display: inline-block;
}
.chart2 {
width: 50%;
height: 40vh;
display: inline-block;
}
.chart3 {
width: 50%;
height: 40vh;
display: inline-block;
}
.chart4 {
width: 50%;
display: inline-block;
height: 40vh;
/* 单个振动曲线图表样式 */
.vibration-chart {
width: 100%;
height: 70vh;
display: block;
}
</style>

Write Preview
Loading…
Cancel
Save