<!-- -->
|
<template>
|
<div style="width: 100%; height: 100%; display: flex">
|
<left-tree @check="handleNodeClick"></left-tree>
|
<div class="boxright">
|
<title-box-vue title="振动分析">
|
<template v-slot:right>
|
<div
|
style="
|
display: flex;
|
justify-content: flex-start;
|
margin-left: 20px;
|
"
|
>
|
<fks-dropdown @command="handleCommand">
|
<fks-button trigger="click">
|
常规分析<i class="fks-icon-arrow-down fks-icon--right"></i>
|
</fks-button>
|
<fks-dropdown-menu slot="dropdown">
|
<fks-dropdown-item command="boxingtu"
|
>波形分析</fks-dropdown-item
|
>
|
<fks-dropdown-item command="pinputu"
|
>频谱分析</fks-dropdown-item
|
>
|
<fks-dropdown-item command="boxingpinputu"
|
>波形频谱</fks-dropdown-item
|
>
|
<fks-dropdown-item command="guzhangpinlv"
|
>故障频率分析</fks-dropdown-item
|
>
|
</fks-dropdown-menu>
|
</fks-dropdown>
|
</div>
|
</template>
|
</title-box-vue>
|
<div style="height: calc(100% - 40px)">
|
<div class="vibrationChartBox">
|
<template v-if="chartData.length > 0">
|
<div
|
v-for="(item, index) in chartData"
|
:key="index"
|
:style="`width:${chartWidth};height:${chartHeight};`"
|
>
|
<div v-if="isGuZhangFenXi" style="width: 100%; height: 200px">
|
<fks-table :data="item.tableData" style="width: 100%">
|
<fks-table-column prop="model" label="型号">
|
</fks-table-column>
|
<fks-table-column prop="child" label="子项">
|
</fks-table-column>
|
<fks-table-column prop="hz" label="频率(阶)">
|
</fks-table-column>
|
<fks-table-column prop="value" label="幅值">
|
</fks-table-column>
|
<fks-table-column prop="speed" label="转速比">
|
</fks-table-column>
|
</fks-table>
|
</div>
|
<div :style="`width:100%;height:${faultChartHeight};`">
|
<div class="chartInfoBox">
|
<div style="color: blue">{{ item.chartType }}</div>
|
{{ item.name }}
|
</div>
|
<div
|
:key="chartKey"
|
:id="`chartBox${index}`"
|
class="chartbox"
|
></div>
|
</div>
|
</div>
|
</template>
|
<template v-else>
|
<div :style="`width:100%;height:100%;`">
|
<div class="chartInfoBox"></div>
|
<div id="chartEmpty" class="chartbox"></div>
|
</div>
|
</template>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
|
|
<script>
|
import { getDay } from "@/utils/istation/common";
|
import * as echarts from "echarts";
|
import titleBoxVue from "@/views/main/components/titleBox.vue";
|
import leftTree from "@/views/main/components/vibrationLeftTree.vue";
|
import vibData from "./vibrationEPT_data";
|
|
function getAmp(srcdat, type) {
|
var amp = new Array(parseInt(srcdat.length / 2.56));
|
var rel = [];
|
var img = [];
|
for (var i = 0; i < srcdat.length; i++) {
|
rel[i] = parseFloat(srcdat[i]);
|
img[i] = 0.0;
|
}
|
var f = 1.0;
|
if (type === 1) {
|
f = 1.9842962399999999;
|
} else if (type === 2) {
|
f = 1.83969614;
|
}
|
|
window_cal(rel, type);
|
FFT(rel, img, 1);
|
for (var i = 0; i < parseInt(srcdat.length / 2.56); i++) {
|
amp[i] = parseFloat(
|
(2.0 * f * Math.sqrt(rel[i] * rel[i] + img[i] * img[i])).toFixed(3)
|
);
|
}
|
return amp;
|
}
|
function window_cal(xc, type) {
|
var n = xc.length;
|
var al, cs;
|
switch (type) {
|
case 1:
|
for (var i = 0; i < n; i++) {
|
al = (parseFloat(i) * 2.0 * Math.PI) / parseFloat(n);
|
cs = parseFloat(Math.cos(al));
|
xc[i] = (xc[i] * (1 + cs)) / 2;
|
}
|
break;
|
case 2:
|
for (var i = 0; i < n; i++) {
|
al = (parseFloat(i) * 2.0 * Math.PI) / parseFloat(n);
|
cs = parseFloat(Math.cos(a1));
|
xc[i] = xc[i] * (0.54 + 0.46 * cs);
|
}
|
break;
|
default:
|
break;
|
}
|
}
|
|
function FFT(Re, Im, Flag) {
|
var N = Re.length;
|
if (N > Im.length) {
|
N = Im.length;
|
}
|
var m = 0;
|
var j = 1;
|
var i = 1;
|
do {
|
if (i >= 16) {
|
break;
|
}
|
m = i;
|
j = 2 * j;
|
if (j === N) {
|
break;
|
}
|
i++;
|
} while (true);
|
var n1 = N - 1;
|
j = 0;
|
for (i = 0; i < n1; i++) {
|
if (i > j) {
|
var tr = Re[j];
|
var ti = Im[j];
|
Re[j] = Re[i];
|
Im[j] = Im[i];
|
Re[i] = tr;
|
Im[i] = ti;
|
}
|
var k;
|
for (k = parseInt(N / 2); k < j + 1; k = parseInt(k / 2)) {
|
j -= k;
|
}
|
j += k;
|
}
|
n1 = 1;
|
|
for (var l = 1; l <= m; l++) {
|
n1 = 2 * n1;
|
var n2 = parseInt(n1 / 2);
|
var e = parseFloat(Math.PI / n2);
|
var c = 1.0;
|
var s = 0.0;
|
var c1 = Math.cos(e);
|
var s1 = parseFloat(-Flag * Math.sin(e));
|
for (j = 0; j < n2; j++) {
|
for (i = j; i < N; i += n1) {
|
var k = i + n2;
|
if (k > N - 1) {
|
k = N - 1;
|
}
|
var tr = c * Re[k] - s * Im[k];
|
var ti = c * Im[k] + s * Re[k];
|
|
Re[k] = Re[i] - tr;
|
Im[k] = Im[i] - ti;
|
Re[i] = Re[i] + tr;
|
Im[i] = Im[i] + ti;
|
}
|
|
var t = c;
|
|
c = c * c1 - s * s1;
|
s = t * s1 + s * c1;
|
}
|
}
|
|
if (Flag === 1) {
|
for (i = 0; i < N; i++) {
|
if (i <= Re.length - 1 && i <= Im.length - 1) {
|
Re[i] /= N;
|
Im[i] /= N;
|
}
|
}
|
}
|
Re[0] = 0;
|
Im[0] = 0;
|
}
|
|
export default {
|
name: "vibration",
|
components: {
|
titleBoxVue,
|
leftTree,
|
},
|
data() {
|
return {
|
chartData: [],
|
checkObj: null,
|
/**是否是故障分析 */
|
isGuZhangFenXi: false,
|
};
|
},
|
created() {},
|
mounted() {
|
setTimeout(() => {
|
this.initChartEmpty();
|
}, 200);
|
|
window.addEventListener("resize", () => {
|
setTimeout(() => {
|
this.chartData.forEach((x) => {
|
x.chart && x.chart.resize();
|
});
|
}, 10);
|
});
|
},
|
computed: {
|
chartWidth() {
|
let width = "100%";
|
if (this.chartData.length >= 2) {
|
width = "50%";
|
}
|
return width;
|
},
|
chartHeight() {
|
let height = "100%";
|
if (this.isGuZhangFenXi) {
|
if (this.chartData.length > 2) {
|
height = "500px";
|
}
|
} else {
|
if (this.chartData.length > 2) {
|
height = "50%";
|
}
|
}
|
return height;
|
},
|
faultChartHeight() {
|
let height = "100%";
|
if (this.isGuZhangFenXi) {
|
if (this.chartData.length > 2) {
|
height = "300px";
|
}else{
|
height = "calc(100% - 200px)";
|
}
|
}
|
return height;
|
},
|
chartKey(){
|
let l = this.chartData.length
|
let key = this.isGuZhangFenXi?l+"_1":l+"_0"
|
return key
|
}
|
},
|
watch: {
|
|
},
|
methods: {
|
handleNodeClick(data, obj) {
|
console.log(data, obj, 74);
|
this.checkObj = obj;
|
},
|
handleCommand(command) {
|
// console.log(command, 98);
|
switch (command) {
|
case "boxingtu":
|
this.isGuZhangFenXi = false;
|
this.boxingtu();
|
break;
|
case "pinputu":
|
this.isGuZhangFenXi = false;
|
this.pinputu();
|
break;
|
case "boxingpinputu":
|
this.isGuZhangFenXi = false;
|
this.boxingpinputu();
|
break;
|
case "guzhangpinlv":
|
this.isGuZhangFenXi = true;
|
this.guzhangpinlv();
|
break;
|
}
|
},
|
boxingtu() {
|
console.log(this.checkObj, 86);
|
if (
|
!this.checkObj ||
|
(this.checkObj && this.checkObj.checkedKeys.length == 0)
|
) {
|
this.$message({
|
message: "请选择测点",
|
type: "warning",
|
});
|
return;
|
}
|
if (
|
this.checkObj &&
|
this.checkObj.checkedKeys &&
|
this.checkObj.checkedKeys.length > 4
|
) {
|
this.$message({
|
message: "最多选择四个测点",
|
type: "warning",
|
});
|
return;
|
}
|
|
if (
|
this.checkObj &&
|
this.checkObj.checkedNodes &&
|
this.checkObj.checkedNodes.length > 0
|
) {
|
let chartData = [];
|
let checkedNodes = this.checkObj.checkedNodes;
|
checkedNodes.forEach((x, index) => {
|
if (!x.children) {
|
let d = this.updateWaveChart(vibData.dataList[index]);
|
chartData.push({
|
chartType: "波形图",
|
name: x.label,
|
domId: "chartBox" + index,
|
chart: null,
|
x: d.x,
|
data: d.data,
|
unit: "时间：ms",
|
boundaryGap: ["20%", "20%"],
|
});
|
}
|
});
|
this.chartData = chartData;
|
setTimeout(() => {
|
this.initChart();
|
}, 100);
|
}
|
},
|
pinputu() {
|
if (!this.checkObj) {
|
this.$message({
|
message: "请选择测点",
|
type: "warning",
|
});
|
return;
|
}
|
if (
|
this.checkObj &&
|
this.checkObj.checkedKeys &&
|
this.checkObj.checkedKeys.length > 4
|
) {
|
this.$message({
|
message: "最多选择四个测点",
|
type: "warning",
|
});
|
return;
|
}
|
|
if (
|
this.checkObj &&
|
this.checkObj.checkedNodes &&
|
this.checkObj.checkedNodes.length > 0
|
) {
|
let chartData = [];
|
let checkedNodes = this.checkObj.checkedNodes;
|
checkedNodes.forEach((x, index) => {
|
if (!x.children) {
|
let d = this.updateSpecChart(vibData.dataList[index]);
|
chartData.push({
|
chartType: "频谱图",
|
name: x.label,
|
domId: "chartBox" + index,
|
chart: null,
|
x: d.x,
|
data: d.data,
|
unit: "频率：Hz",
|
boundaryGap: ["0%", "20%"],
|
});
|
}
|
});
|
this.chartData = chartData;
|
setTimeout(() => {
|
this.initChart();
|
}, 100);
|
}
|
},
|
boxingpinputu() {
|
if (!this.checkObj) {
|
this.$message({
|
message: "请选择测点",
|
type: "warning",
|
});
|
return;
|
}
|
if (
|
this.checkObj &&
|
this.checkObj.checkedKeys &&
|
this.checkObj.checkedKeys.length > 2
|
) {
|
this.$message({
|
message: "最多选择二个测点",
|
type: "warning",
|
});
|
return;
|
}
|
|
if (
|
this.checkObj &&
|
this.checkObj.checkedNodes &&
|
this.checkObj.checkedNodes.length > 0
|
) {
|
let chartData = [];
|
let checkedNodes = this.checkObj.checkedNodes;
|
checkedNodes.forEach((x, index) => {
|
if (!x.children) {
|
let d = this.updateWaveChart(vibData.dataList[index]);
|
chartData.push({
|
chartType: "波形图",
|
name: x.label,
|
domId: "chartBox" + index * 2,
|
chart: null,
|
x: d.x,
|
data: d.data,
|
unit: "时间：ms",
|
boundaryGap: ["20%", "20%"],
|
});
|
let d2 = this.updateSpecChart(vibData.dataList[index]);
|
chartData.push({
|
chartType: "频谱图",
|
name: x.label,
|
domId: "chartBox" + (index * 2 + 1),
|
chart: null,
|
x: d2.x,
|
data: d2.data,
|
unit: "频率：Hz",
|
boundaryGap: ["0%", "20%"],
|
});
|
}
|
});
|
this.chartData = chartData;
|
setTimeout(() => {
|
this.initChart();
|
}, 100);
|
}
|
},
|
guzhangpinlv() {
|
if (!this.checkObj) {
|
this.$message({
|
message: "请选择测点",
|
type: "warning",
|
});
|
return;
|
}
|
if (
|
this.checkObj &&
|
this.checkObj.checkedKeys &&
|
this.checkObj.checkedKeys.length > 4
|
) {
|
this.$message({
|
message: "最多选择四个测点",
|
type: "warning",
|
});
|
return;
|
}
|
|
if (
|
this.checkObj &&
|
this.checkObj.checkedNodes &&
|
this.checkObj.checkedNodes.length > 0
|
) {
|
let chartData = [];
|
let checkedNodes = this.checkObj.checkedNodes;
|
checkedNodes.forEach((x, index) => {
|
if (!x.children) {
|
let d = this.updateSpecChart(vibData.dataList[index]);
|
chartData.push({
|
chartType: "频谱图",
|
name: x.label,
|
domId: "chartBox" + index,
|
chart: null,
|
x: d.x,
|
data: d.data,
|
unit: "频率：Hz",
|
boundaryGap: ["0%", "20%"],
|
tableData: [],
|
});
|
}
|
});
|
this.chartData = chartData;
|
console.log(this.chartData, 149);
|
setTimeout(() => {
|
this.initChart();
|
}, 100);
|
}
|
},
|
initChart() {
|
// console.log(this.chartData, 407);
|
this.chartData.forEach((x) => {
|
var chartDom = document.getElementById(x.domId);
|
var myChart = echarts.init(chartDom);
|
var series_arr = [];
|
var yAxisArr = [];
|
|
var yAxisName = "加速度:g";
|
series_arr.push({
|
name: x.name,
|
type: "line",
|
smooth: true,
|
symbolSize: 0,
|
sampling: "max",
|
itemStyle: {
|
normal: {
|
lineStyle: {
|
width: 1,
|
},
|
color: "rgb(0, 0, 255)",
|
},
|
},
|
symbolSize: 1,
|
data: x.data[0],
|
});
|
|
yAxisArr = {
|
type: "value",
|
name: yAxisName,
|
nameGap: 35,
|
nameLocation: "center",
|
boundaryGap: x.boundaryGap,
|
scale: true,
|
axisLine: {
|
show: true,
|
},
|
};
|
|
let option = {
|
grid: {
|
top: 20,
|
left: 50,
|
right: 50,
|
containLabel: true,
|
},
|
xAxis: {
|
name: x.unit,
|
type: "category",
|
// position: "bottom",
|
nameLocation: "center",
|
axisLine: {
|
onZero: false,
|
},
|
nameGap: 23,
|
data: x.x,
|
},
|
yAxis: yAxisArr,
|
dataZoom: [
|
{
|
type: "inside",
|
start: 0,
|
end: 100,
|
},
|
{
|
id: "dataZoomY",
|
type: "slider",
|
xAxisIndex: [0],
|
filterMode: "empty",
|
},
|
],
|
|
tooltip: {
|
trigger: "axis",
|
hideDelay: 1000,
|
axisPointer: {
|
type: "cross",
|
},
|
position: function (pt) {
|
return [pt[0], "10%"];
|
},
|
},
|
series: series_arr,
|
// animationEasing: "elasticOut",
|
};
|
|
myChart.setOption(option);
|
x.chart = myChart;
|
});
|
},
|
initChartEmpty() {
|
var chartDom = document.getElementById("chartEmpty");
|
var myChart = echarts.init(chartDom);
|
|
var series_arr = [];
|
var yAxisArr = [];
|
var color_arr = new Array(
|
"rgb(0, 0, 255)",
|
"rgb(238, 0, 126)",
|
"rgb(0, 255, 0)",
|
"rgb(255, 0, 0)",
|
"rgb(255, 128, 255)",
|
"rgb(128, 128, 192)",
|
"rgb(0, 64, 128)",
|
"rgb(64, 128, 128)"
|
);
|
var yAxisName = "加速度:g";
|
let X_unit = "时间：ms";
|
series_arr.push({
|
name: "通道" + (0 + 1),
|
type: "line",
|
smooth: true,
|
symbolSize: 0,
|
sampling: "max",
|
itemStyle: {
|
normal: {
|
lineStyle: {
|
width: 1,
|
},
|
color: "rgb(0, 0, 255)",
|
},
|
},
|
symbolSize: 1,
|
data: [],
|
});
|
|
yAxisArr.push({
|
type: "value",
|
name: yAxisName,
|
nameGap: 35,
|
nameLocation: "center",
|
boundaryGap: [0, "100%"],
|
scale: true,
|
axisLine: {
|
show: true,
|
},
|
});
|
|
let option = {
|
grid: {
|
top: 20,
|
left: 50,
|
right: 20,
|
containLabel: true,
|
},
|
xAxis: {
|
name: X_unit,
|
type: "category",
|
position: "bottom",
|
boundaryGap: [0, "100%"],
|
nameLocation: "center",
|
nameGap: 23,
|
data: [],
|
},
|
yAxis: yAxisArr,
|
dataZoom: [
|
{
|
type: "inside",
|
start: 0,
|
end: 100,
|
},
|
{
|
id: "dataZoomY",
|
type: "slider",
|
xAxisIndex: [0],
|
filterMode: "empty",
|
},
|
],
|
|
tooltip: {
|
trigger: "axis",
|
hideDelay: 1000,
|
axisPointer: {
|
type: "cross",
|
},
|
position: function (pt) {
|
return [pt[0], "10%"];
|
},
|
},
|
series: series_arr,
|
animationEasing: "elasticOut",
|
};
|
myChart.setOption(option);
|
},
|
|
setCalFactor(ChanSetting) {
|
var factArr = [];
|
for (var i = 0; i < 8; i++) {
|
var sen_type = parseFloat(ChanSetting.senType[i]);
|
var integ_type = parseFloat(ChanSetting.integType[i]);
|
var cal_params = parseFloat(ChanSetting.calParams[i]);
|
var sensitivity = parseFloat(ChanSetting.sensitivity[i]);
|
var magnification = parseFloat(ChanSetting.magnification[i]);
|
var coeff =
|
1 == integ_type
|
? parseFloat(ChanSetting.coefficient1x[i])
|
: parseFloat(ChanSetting.coefficient2x[i]);
|
if ((3 !== sen_type && 6 !== sen_type) || 0 === integ_type) {
|
factArr[i] = cal_params / sensitivity;
|
} else {
|
factArr[i] = ((cal_params / coeff) * 100.0) / sensitivity;
|
}
|
}
|
return factArr;
|
},
|
/**数据转换 波形图 */
|
updateWaveChart(vibrationdata) {
|
const wave = vibrationdata.wave;
|
var wave_data_array = [];
|
var wave_data_arrayX = [];
|
let calFactor = this.setCalFactor(vibrationdata.ChanSetting);
|
vibrationdata.wave.forEach(function (value, index) {
|
var xdata = [];
|
value.forEach(function (data, i) {
|
xdata[i] = parseFloat(
|
parseFloat(1 === 1 ? data / calFactor[index] : data).toFixed(3)
|
);
|
});
|
wave_data_array.push(xdata);
|
});
|
var pointTime = 1000 / vibrationdata.CommKeySetting.fs; // fs 采用频率
|
wave_data_array[0].forEach(function (value, index) {
|
wave_data_arrayX[index] = (index * pointTime).toFixed(2);
|
});
|
return { x: wave_data_arrayX, data: wave_data_array };
|
},
|
/** 数据转换 频谱图 */
|
updateSpecChart(vibrationdata) {
|
var spec_data_array = [];
|
var spec_data_arrayX = [];
|
vibrationdata.wave.forEach(function (value, index) {
|
spec_data_array.push(getAmp(value, 0));
|
});
|
spec_data_array[0].forEach(function (value, index) {
|
spec_data_arrayX[index] = (
|
(index * vibrationdata.CommKeySetting.fs) /
|
vibrationdata.CommKeySetting.len
|
).toFixed(2);
|
});
|
return { x: spec_data_arrayX, data: spec_data_array };
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.vibrationChartBox {
|
display: flex;
|
justify-content: flex-start;
|
width: 100%;
|
height: 100%;
|
flex-wrap: wrap;
|
overflow: auto;
|
}
|
.boxright {
|
flex: 1;
|
height: 100%;
|
overflow: auto;
|
background: #fff;
|
margin-left: 20px;
|
}
|
.chartInfoBox {
|
height: 80px;
|
}
|
.chartbox {
|
width: 100%;
|
height: calc(100% - 80px);
|
}
|
</style>
|
