210 lines
4.2 KiB
Vue
210 lines
4.2 KiB
Vue
<template>
|
|
<view>
|
|
<!-- <uni-section class="section" title="设备及测点" type="line" titleFontSize="16">
|
|
<uni-data-select
|
|
label="选择设备"
|
|
v-model="p.device_name"
|
|
:localdata="devices"
|
|
:clear="false"
|
|
@change="loadChartData"
|
|
></uni-data-select>
|
|
<uni-data-select
|
|
label="选择测点"
|
|
v-model="p.check_point"
|
|
:localdata="checkPoints"
|
|
:clear="false"
|
|
@change="loadChartData"
|
|
></uni-data-select>
|
|
</uni-section> -->
|
|
<uni-section class="section" title="振动趋势图" type="line" titleFontSize="16">
|
|
<l-echart ref="chart"></l-echart>
|
|
</uni-section>
|
|
<uni-section class="section" title="温度趋势图" type="line" titleFontSize="16">
|
|
<l-echart ref="chartt" @finished="initChart"></l-echart>
|
|
</uni-section>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
|
|
import db from '@/service/db';
|
|
import {devices, checkPoints} from '@/service/common';
|
|
|
|
const chartData = {
|
|
ots: [],
|
|
vs: [],
|
|
ds: [],
|
|
as: [],
|
|
ts: []
|
|
}
|
|
const options = {
|
|
legend: {
|
|
// x: 'center',
|
|
// y: 'bottom',
|
|
data: ['位移', '速度', '加速度']
|
|
},
|
|
grid: {
|
|
left: 40,
|
|
right: 110
|
|
},
|
|
tooltip: {
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
//data: chartData.ots,
|
|
splitLine: {
|
|
show: true
|
|
}
|
|
},
|
|
yAxis: [
|
|
// {
|
|
// type: 'value',
|
|
// boundaryGap: [0, '100%'],
|
|
// splitLine: {
|
|
// show: false
|
|
// }
|
|
{
|
|
position: 'left',
|
|
type: 'value',
|
|
name: '速度(mm/s)',
|
|
axisLine: {
|
|
show: true
|
|
},
|
|
splitLine: {
|
|
show: true
|
|
}
|
|
},
|
|
{
|
|
position: 'right',
|
|
type: 'value',
|
|
name: '位移(µm)',
|
|
axisLine: {
|
|
show: true
|
|
},
|
|
axisLabel: {
|
|
show: true
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
position: 'right',
|
|
offset: 65,
|
|
type: 'value',
|
|
name: '加速度(m/s2)',
|
|
// nameRotate: 270,
|
|
// nameGap: 50,
|
|
// nameLocation: 'middle',
|
|
axisLine: {
|
|
show: true
|
|
},
|
|
axisLabel: {
|
|
show: true
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
series: [{
|
|
type: 'line',
|
|
smooth: true,
|
|
name: '速度',
|
|
yAxisIndex: 0,
|
|
}, {
|
|
type: 'line',
|
|
smooth: true,
|
|
name: '位移',
|
|
yAxisIndex: 1,
|
|
}, {
|
|
type: 'line',
|
|
smooth: true,
|
|
name: '加速度',
|
|
yAxisIndex: 2,
|
|
}]
|
|
};
|
|
const options_t = {
|
|
xAxis: {
|
|
type: 'time',
|
|
splitLine: {
|
|
show: true
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '温度(°C)',
|
|
boundaryGap: [0, '100%'],
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'line',
|
|
smooth: true,
|
|
name: '温度',
|
|
yAxisIndex: 0,
|
|
}]
|
|
};
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
devices,
|
|
checkPoints,
|
|
p: {
|
|
device_name: '',
|
|
check_point: ''
|
|
},
|
|
|
|
};
|
|
},
|
|
onLoad() {
|
|
// this.p.check_point = checkPoints[0].value;
|
|
// this.p.device_name = devices[0].value;
|
|
},
|
|
onUnload() {
|
|
|
|
},
|
|
methods: {
|
|
async loadChartData() {
|
|
chartData.ots = [];
|
|
chartData.vs = [];
|
|
chartData.ds = [];
|
|
chartData.as = [];
|
|
chartData.ts = [];
|
|
|
|
// const sql = `select * from records where device_name = '${this.p.device_name}' and check_point = '${this.p.check_point}' order by operate_time`;
|
|
const sql = `select * from records order by operate_time`;
|
|
const records = await db.select(sql);
|
|
records.forEach((r) => {
|
|
// chartData.ots.push(r.operate_time);
|
|
chartData.as.push([r.operate_time, r.acceleration]);
|
|
chartData.vs.push([r.operate_time, r.velocity]);
|
|
chartData.ds.push([r.operate_time, r.displacement]);
|
|
chartData.ts.push([r.operate_time, r.temperature]);
|
|
});
|
|
this.$refs.chart.setOption({series: [{data: chartData.vs}, {data: chartData.ds}, {data: chartData.as}]});
|
|
this.$refs.chartt.setOption({series: [{data: chartData.ts}]});
|
|
},
|
|
async initChart() {
|
|
await this.$refs.chart.init(echarts, chart => chart.setOption(options), { locale: "ZH" });
|
|
await this.$refs.chartt.init(echarts, chart => chart.setOption(options_t), { locale: "ZH" });
|
|
|
|
this.loadChartData();
|
|
|
|
uni.onWindowResize(res => {
|
|
this.$refs.chart?.resize();
|
|
this.$refs.chartt?.resize();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.section {
|
|
margin: 10px 0;
|
|
}
|
|
</style> |