<template>
|
<view>
|
<!-- 顶部标题栏 -->
|
<view class="title_style">
|
<view class="deviceNav">
|
<text class="cuIcon-sort" style="font-size: 44rpx;width: 10%;" @tap="showLeftDrawer"
|
data-target="DrawerModalL"></text>
|
<!-- <text style="font-size: 32rpx;font-family: none;">{{deviceInfo.name}}</text> -->
|
<view class="flex" style="flex-direction: column;width: 70%;">
|
<text style="font-size: 32rpx;font-family: none;">数据检测</text>
|
<!-- <text style="font-size: 18rpx;font-family: none;margin-top: 10rpx;">运行时间:{{runingDay}}天{{rungingHours}}小时</text> -->
|
</view>
|
<view class="flex align-center justify-around" style="width: 10%;">
|
<text class="cuIcon-refresh" @tap="refreshDeviceDate" style="font-size: 44rpx;"></text>
|
</view>
|
</view>
|
<view class="deviceName">
|
<text class="title">上海义维</text>
|
<text class="date">数据更新于 {{lastUpdateTime}}</text>
|
</view>
|
</view>
|
|
|
<!-- 实时数据总图表 -->
|
<scroll-view scroll-y="true" style="height: calc(100vh - 243rpx);width: 100vw;background-color: #ffffff;">
|
<view class="bg-white flex justify-center align-center"
|
style="position: relative;background-color: #ffffff;width: 100%;height: 60%;display: flex;flex-direction: column;">
|
<view style="width: 100%;height: 50%;">
|
<!-- 时域图表 -->
|
<uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvasTimeDomain"
|
canvas-id="lazy-load-chart" :ec="TimeDomainEc">
|
</uni-ec-canvas>
|
</view>
|
<!-- 频域图表 -->
|
<view style="width: 100%;height: 50%;">
|
<uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvasFrequencyDomain"
|
canvas-id="lazy-load-chart" :ec="FrequencyDomainEc">
|
</uni-ec-canvas>
|
</view>
|
</view>
|
<view style="width: 100%;height:40%;">
|
<view style="width: 100%;margin-bottom: 15rpx;">
|
<view class="cu-capsule radius" style="width: 100%;justify-content: center;">
|
<view style="width: 40%;" class="cu-tag" :class="speedFilterIndex==1?'bg-blue':'line-blue'"
|
@tap="speedFilterTap(1)"><text>加速度</text></view>
|
<view style="width: 40%;" class="cu-tag" :class="speedFilterIndex==2?'bg-blue':'line-blue'"
|
@tap="speedFilterTap(2)"><text>速度</text></view>
|
</view>
|
</view>
|
<view style="width: 100%;display: flex; justify-content: center;">
|
<view class="cu-capsule radius" style="width: 40%;">
|
<view style="width: 33.33%;" class="cu-tag" :class="timeFilter=='all'?'bg-blue':'line-blue'"
|
@tap="selectFilter('all')"><text>赫兹</text></view>
|
<view style="width: 33.33%;" class="cu-tag" :class="timeFilter=='hours'?'bg-blue':'line-blue'"
|
@tap="selectFilter('hours')"><text>阶次</text></view>
|
<view style="width: 33.33%;" class="cu-tag" :class="timeFilter=='day'?'bg-blue':'line-blue'"
|
@tap="selectFilter('day')"><text>转速</text></view>
|
</view>
|
<view class="cu-capsule radius" style="width: 40%;">
|
<view style="width: 50%;" class="cu-tag" :class="valueFilterIndex==1?'bg-blue':'line-blue'"
|
@tap="valueFilterTap(1)"><text>普通</text></view>
|
<view style="width: 50%;" class="cu-tag" :class="valueFilterIndex==2?'bg-blue':'line-blue'"
|
@tap="valueFilterTap(2)"><text>对数</text></view>
|
</view>
|
</view>
|
|
<radio-group class="block" @change="changeRadio">
|
<view class="cu-form-group margin-top chart-check "
|
style="min-height: 85rpx;justify-content: unset;">
|
<radio class="round radio blue" checked value="x"></radio>
|
<view class="title" style="margin-left: 20rpx;">x轴</view>
|
</view>
|
<view class="cu-form-group chart-check" style="min-height: 85rpx;justify-content: unset;">
|
<radio class="round radio green" value="y"></radio>
|
<view class="title" style="margin-left: 20rpx;">y轴</view>
|
</view>
|
<view class="cu-form-group chart-check" style="min-height: 85rpx;justify-content: unset;">
|
<radio class="round radio orange" value="z"></radio>
|
<view class="title" style="margin-left: 20rpx;">z轴</view>
|
</view>
|
</radio-group>
|
<view class="cu-form-group chart-check" style="min-height: 85rpx;justify-content: unset;">
|
<icon class="cuIcon-time" style="font-size: 50rpx;"></icon>
|
<view class="title" style="margin-left: 20rpx;">时域</view>
|
</view>
|
|
</view>
|
</scroll-view>
|
|
<!-- 左侧菜单抽屉 -->
|
<view class="cu-modal drawer-modal justify-start" style="z-index: 100;"
|
:class="leftDrawerStatus==true?'show':''" @tap="hideLeftDrawer">
|
<view class="cu-dialog basis-lg" style="max-width: 50%;background-color: #000;" @tap.stop="">
|
<view class="cu-list menu text-left">
|
<view class="cu-item arrow" @tap="deviceList(item.click)"
|
style="min-height: 100rpx;min-height: 55px;background: #000;color: #fff;"
|
v-for="(item,index) in leftDrawerList" :key="index">
|
<view style="width: 50rpx;height: 50rpx;">
|
<text :class="'iconfont ' + item.icon" style="font-size: 50rpx;"></text>
|
</view>
|
<view class="content">
|
<view style="padding-left: 20rpx;"><text>{{item.text}}</text></view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import uniEcCanvas from '../../component/uni-ec-canvas/uni-ec-canvas.vue'
|
import * as echarts from '@/component/uni-ec-canvas/echarts'
|
const Constant = require('../../utils/constant.js');
|
const utils = require("../../utils/tool.js");
|
let date = null
|
let faquertDate = null
|
let chartTimeDomain = null;
|
let chartTimeDomainOption = {};
|
|
let chartFrequencyDomain = null;
|
let chartFrequencyDomainOption = {};
|
export default {
|
data() {
|
return {
|
baseInfo: null, //传入基本信息
|
monitorData: [], //监测项的数据
|
leftDrawerStatus: false, //左侧菜单显示状态
|
lastUpdateTime: utils.formatTime(new Date()), //最后更新时间
|
speedFilterIndex: 1,
|
valueFilterIndex: 1,
|
timeFilter: "all",
|
currentRadioValue:"x",
|
//时域
|
TimeDomainEc: {
|
lazyLoad: true,
|
option: {},
|
},
|
//频域
|
FrequencyDomainEc: {
|
lazyLoad: true,
|
option: {},
|
},
|
leftDrawerList: [{
|
text: '设备列表',
|
icon: 'icon-shebeiliebiao',
|
click: 'deviceList'
|
},
|
{
|
text: '趋势记录',
|
icon: 'icon-qushitu',
|
click: 'trendRecord'
|
},
|
{
|
text: '高级功能',
|
icon: 'icon-gaojigongneng',
|
click:'advancedFeatures'
|
},
|
{
|
text: '诊断',
|
icon: 'icon-jiankangzhenduan'
|
},
|
{
|
text: '设备信息',
|
icon: 'icon-shebeixinxi',
|
click: 'equipmentSet'
|
},
|
{
|
text: '生产报告',
|
icon: 'icon-baogao'
|
},
|
{
|
text: 'FAQ',
|
icon: 'icon-FAQ'
|
},
|
{
|
text: '用户设置',
|
icon: 'icon-yonghu'
|
},
|
],
|
}
|
},
|
components: {
|
uniEcCanvas
|
},
|
onLoad(option) {
|
let that = this
|
let name = option.name
|
let type = 'x_zdsd'
|
let data = data = uni.getStorageSync(name)
|
this.baseInfo = option ?? ""
|
|
let seriesData = this.formatterData();
|
let faquertData = this.formatterDataFaquery()
|
|
setTimeout(function() {
|
that.$refs.canvasTimeDomain.init(that.initTimeDomainChart)
|
that.initTimeDomainChartData(seriesData)
|
}, 1000);
|
|
setTimeout(function() {
|
that.$refs.canvasFrequencyDomain.init(that.initFrequencyDomainChart)
|
that.initFrequencyDomainChartData(faquertData)
|
}, 1500);
|
},
|
onReady() {},
|
methods: {
|
speedFilterTap(index) {
|
this.speedFilterIndex = index
|
},
|
valueFilterTap(index) {
|
this.valueFilterIndex = index
|
},
|
selectFilter(type) {
|
this.timeFilter = type
|
},
|
changeRadio(e){
|
this.currentRadioValue = e.detail.value
|
|
this.TimeDomainEc.option.series = this.formatterData()
|
this.FrequencyDomainEc.option.series = this.formatterDataFaquery()
|
},
|
showLeftDrawer: function() {
|
this.leftDrawerStatus = true
|
},
|
hideLeftDrawer: function() {
|
this.leftDrawerStatus = false
|
},
|
formatterData: function() {
|
let that = this
|
let colorMap = new Map()
|
colorMap.set('x','#0081ff');
|
colorMap.set('y','#39b54a');
|
colorMap.set('z','#f37b1d');
|
let currentLineColor = colorMap.get(that.currentRadioValue)
|
|
let option = this.baseInfo
|
let name = option.name
|
|
let date = [Math.floor(Math.random() * 100) / 100]
|
let data = [[Math.floor(Math.random() * 100) / 100, parseFloat((Math.random() * (1 - 0.99)).toFixed(3))]];
|
for (let i = 1; i < 100; i++) {
|
date.push(Math.floor(Math.random() * 100) / 100);
|
data.push([Math.floor(Math.random() * 100) / 100, parseFloat((Math.random() * (1 - 0.99)).toFixed(3))]);
|
}
|
let seriesData = [{
|
name: 'Test Data',
|
type: 'line',
|
yAxisIndex: 0,
|
showSymbol: false,
|
smooth: true,
|
hoverAnimation: false,
|
data: data,
|
lineStyle: { // 设置线条的style等
|
normal: {
|
color: currentLineColor, // 折线线条颜色:红色
|
},
|
},
|
|
itemStyle: {
|
// 设置线条上点的颜色（和图例的颜色）
|
normal: {
|
color: currentLineColor,
|
},
|
}
|
}]
|
|
return seriesData;
|
},
|
|
formatterDataFaquery: function() {
|
let that = this
|
|
let colorMap = new Map()
|
colorMap.set('x','#0081ff');
|
colorMap.set('y','#39b54a');
|
colorMap.set('z','#f37b1d');
|
let currentLineColor = colorMap.get(that.currentRadioValue)
|
|
let option = this.baseInfo
|
let name = option.name
|
|
let base = +new Date(1968, 9, 3);
|
let oneDay = 24 * 3600 * 1000;
|
faquertDate = [];
|
let data = [[Math.floor(Math.random() * 2000),parseFloat((Math.random() * (1 - 0.9)).toFixed(3))]];
|
for (let i = 1; i < 100; i++) {
|
faquertDate.push(Math.floor(Math.random() * 2000));
|
data.push([Math.floor(Math.random() * 2000), parseFloat((Math.random() * (1 - 0.9)).toFixed(3))]);
|
}
|
let seriesData = [{
|
name: 'Test Data',
|
type: 'line',
|
yAxisIndex: 0,
|
showSymbol: false,
|
symbol: 'none',
|
smooth:true,
|
hoverAnimation: false,
|
data: data,
|
lineStyle: { // 设置线条的style等
|
normal: {
|
color: currentLineColor, // 折线线条颜色:红色
|
},
|
},
|
|
itemStyle: {
|
// 设置线条上点的颜色（和图例的颜色）
|
normal: {
|
color: currentLineColor,
|
},
|
}
|
}]
|
|
return seriesData;
|
},
|
//初始化图表
|
initTimeDomainChart(canvas, width, height, canvasDpr) {
|
chartTimeDomain = echarts.init(canvas, null, {
|
width: width,
|
height: height,
|
devicePixelRatio: canvasDpr
|
})
|
canvas.setChart(chartTimeDomain)
|
chartTimeDomain.setOption(this.TimeDomainEc.option)
|
return chartTimeDomain
|
},
|
//初始化图表数据
|
initTimeDomainChartData: function(data) {
|
let baseInfo = this.baseInfo;
|
chartTimeDomainOption = {
|
tooltip: {
|
trigger: 'axis',
|
},
|
grid: {
|
left: '15%',
|
top: '5%',
|
right: '5%',
|
bottom: '25%'
|
},
|
toolbox: {
|
feature: {
|
dataZoom: {
|
yAxisIndex: 'none'
|
},
|
restore: {},
|
saveAsImage: {}
|
}
|
},
|
xAxis: {
|
type: 'value',
|
name: "时域(s)",
|
nameLocation: 'center',
|
nameGap: 30,
|
nameTextStyle: {
|
fontSize: 12,
|
fontWeight: 'normal'
|
},
|
boundaryGap: false,
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'line'
|
|
}
|
},
|
interval :0.1,
|
axisLine: {
|
onZero: false
|
},
|
axisLabel: {
|
formatter: function(value, index) {
|
return parseFloat(value).toFixed(2);
|
},
|
interval:1
|
},
|
min: 0.00,
|
max: 1.00
|
},
|
yAxis: {
|
type: 'value',
|
name: "g",
|
nameLocation: 'center',
|
nameGap: 42,
|
nameRotate: 0,
|
nameTextStyle: {
|
fontSize: 12,
|
fontWeight: 'normal'
|
},
|
boundaryGap: ['1%', '20%'],
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'line'
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
show: true,
|
//color: '#fff'
|
},
|
onZero: false
|
},
|
axisLabel: {
|
formatter: function(value, index) {
|
return parseFloat(value).toFixed(3);
|
}
|
},
|
},
|
series: data
|
};
|
this.TimeDomainEc.option = chartTimeDomainOption
|
},
|
//初始化图表
|
initFrequencyDomainChart(canvas, width, height, canvasDpr) {
|
// console.log(canvas, width, height, canvasDpr)
|
chartFrequencyDomain = echarts.init(canvas, null, {
|
width: width,
|
height: height,
|
devicePixelRatio: canvasDpr
|
})
|
canvas.setChart(chartFrequencyDomain)
|
chartFrequencyDomain.setOption(this.FrequencyDomainEc.option)
|
return chartFrequencyDomain
|
},
|
//初始化图表数据
|
initFrequencyDomainChartData: function(data) {
|
chartFrequencyDomainOption = {
|
tooltip: {
|
trigger: 'axis',
|
},
|
grid: {
|
left: '15%',
|
top: '5%',
|
right: '5%',
|
bottom: '25%'
|
},
|
toolbox: {
|
feature: {
|
dataZoom: {
|
yAxisIndex: 'none'
|
},
|
restore: {},
|
saveAsImage: {}
|
}
|
},
|
xAxis: {
|
type: 'value',
|
name: "频域(Hz)",
|
nameLocation: 'center',
|
nameGap: 25,
|
nameTextStyle: {
|
fontSize: 12,
|
fontWeight: 'normal'
|
},
|
boundaryGap: false,
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'line'
|
}
|
},
|
interval :200,
|
axisLine: {
|
onZero: false
|
},
|
|
},
|
yAxis: {
|
type: 'value',
|
name: "mm/s",
|
nameLocation: 'center',
|
nameGap: 42,
|
// nameRotate: 0,
|
nameTextStyle: {
|
fontSize: 12,
|
fontWeight: 'normal'
|
},
|
boundaryGap: [0, '100%'],
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'line'
|
}
|
},
|
interval :0.02,
|
axisLine: {
|
lineStyle: {
|
show: true,
|
//color: '#fff'
|
},
|
onZero: false
|
},
|
axisLabel: {
|
formatter: function(value, index) {
|
return parseFloat(value).toFixed(2);
|
},
|
interval:1
|
},
|
},
|
series: data
|
};
|
this.FrequencyDomainEc.option = chartFrequencyDomainOption
|
},
|
//关闭低功耗蓝牙的连接
|
async closeBLEConnection() {
|
await uni.closeBLEConnection({
|
deviceId: this.deviceId,
|
success: (res) => {
|
console.log('蓝牙连接关闭', res)
|
},
|
fail: (err) => {
|
console.log('关闭蓝牙连接失败', err)
|
}
|
})
|
},
|
//左侧菜单列表
|
deviceList: function(e) {
|
if (e == 'deviceList') {
|
this.closeBLEConnection()
|
uni.redirectTo({
|
url: '../Connect/mainIndex'
|
})
|
} else if (e == 'equipmentSet') {
|
clearInterval(timer)
|
let productName = this.deviceInfo.name
|
uni.navigateTo({
|
url: '../Setting/index?name=' + productName
|
})
|
} else if(e == 'trendRecord'){
|
uni.reLaunch({
|
url:'../TrendRecord/index'
|
})
|
}else if(e == 'advancedFeatures'){
|
uni.reLaunch({
|
url:'../AdvancedFeatures/index'
|
})
|
}else {
|
return;
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
@import url("/style/animation.css");
|
@import url("/style/main.css");
|
@import url("/style/icon.css");
|
@import url("/style/iconfont.css");
|
|
.uni-ec-canvas {
|
width: 100%;
|
height: 100%;
|
display: block;
|
}
|
|
.title_style {
|
width: 100%;
|
height: 243rpx;
|
text-align: center;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
flex-direction: column;
|
color: #ffffff;
|
border-bottom: 3rpx solid #c0c0c0;
|
box-sizing: border-box;
|
}
|
|
.deviceNav {
|
display: flex;
|
height: 30%;
|
width: 100%;
|
background: #16b5cb;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0px 26rpx;
|
}
|
|
.deviceName {
|
width: 100%;
|
height: 70%;
|
display: flex;
|
justify-content: space-evenly;
|
align-items: center;
|
flex-direction: column;
|
background-color: #f5f5f5;
|
}
|
|
.deviceName .title {
|
margin: 25rpx auto;
|
font-size: 48rpx;
|
color: #000000;
|
}
|
|
.deviceName .date {
|
color: #c1c2c3;
|
font-size: 24rpx;
|
}
|
|
.chart-check checkbox::before {
|
content: unset;
|
}
|
</style>
|
