<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="iconfont icon-qushitu sum_chart" @tap="toHistorySumChart"
|
style="font-size: 44rpx;"></text> -->
|
<!-- 测试数据读写的弹框 不用的时候可以隐藏-->
|
<!-- <text class="iconfont icon-rizhi" @tap="testDilog" style="font-size: 44rpx;"></text> -->
|
<!-- 数据刷新按钮 -->
|
<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%;">
|
<uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvas" canvas-id="lazy-load-chart" :ec="ec">
|
</uni-ec-canvas>
|
</view>
|
<view style="width: 100%;height:40%;">
|
<view style="width: 100%;display: flex; justify-content: space-around;">
|
<view class="cu-capsule radius">
|
<view class="cu-tag" :class="valueFilterIndex==1?'bg-blue':'line-blue'"
|
@tap="valueFilterTap(1)"><text>均方根值</text></view>
|
<view class="cu-tag" :class="valueFilterIndex==2?'bg-blue':'line-blue'"
|
@tap="valueFilterTap(2)"><text>峭度值</text></view>
|
</view>
|
<view class="cu-capsule radius">
|
<view class="cu-tag" :class="timeFilter=='all'?'bg-blue':'line-blue'"
|
@tap="selectFilter('all')"><text>全部</text></view>
|
<view class="cu-tag" :class="timeFilter=='hours'?'bg-blue':'line-blue'"
|
@tap="selectFilter('hours')"><text>按小时</text></view>
|
<view class="cu-tag" :class="timeFilter=='day'?'bg-blue':'line-blue'"
|
@tap="selectFilter('day')"><text>按天</text></view>
|
</view>
|
</view>
|
|
<view>
|
<view class="cu-form-group margin-top chart-check "
|
style="min-height: 85rpx;justify-content: unset;">
|
<checkbox class="round radio blue" :checked="true" @click="changeCheckBox('X轴')"></checkbox>
|
<view class="title" style="margin-left: 20rpx;">x轴</view>
|
</view>
|
<view class="cu-form-group chart-check" style="min-height: 85rpx;justify-content: unset;">
|
<checkbox class="round radio green" :checked="true" @click="changeCheckBox('Y轴')"></checkbox>
|
<view class="title" style="margin-left: 20rpx;">y轴</view>
|
</view>
|
<view class="cu-form-group chart-check" style="min-height: 85rpx;justify-content: unset;">
|
<checkbox class="round radio orange" :checked="true" @click="changeCheckBox('Z轴')"></checkbox>
|
<view class="title" style="margin-left: 20rpx;">z轴</view>
|
</view>
|
<view class="cu-form-group chart-check" style="min-height: 85rpx;justify-content: unset;">
|
<checkbox class="round radio grey" :checked="true" @click="changeCheckBox('温度')"></checkbox>
|
<view class="title" style="margin-left: 20rpx;">温度</view>
|
</view>
|
<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>
|
</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");
|
const moment = require("../../utils/moment.js")
|
let chart = null;
|
let chartOption = {};
|
export default {
|
data() {
|
return {
|
baseInfo: null, //传入基本信息
|
monitorData: [], //监测项的数据
|
leftDrawerStatus: false, //左侧菜单显示状态
|
lastUpdateTime: utils.formatTime(new Date()), //最后更新时间
|
valueFilterIndex: 1,
|
timeFilter: "all",
|
legendSelected: {
|
"X轴": true,
|
"Y轴": true,
|
"Z轴": true,
|
"温度": true,
|
},
|
ec: {
|
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
|
|
console.log('123', option)
|
let seriesData = this.formatterData();
|
|
|
setTimeout(function() {
|
that.$refs.canvas.init(that.initChart)
|
that.initChartData(seriesData)
|
|
let data = that.formatterData()
|
that.ec.option.series = data
|
|
}, 1000);
|
},
|
onReady() {},
|
methods: {
|
valueFilterTap(index) {
|
this.valueFilterIndex = index
|
},
|
selectFilter(type) {
|
this.timeFilter = type
|
},
|
showLeftDrawer: function() {
|
this.leftDrawerStatus = true
|
},
|
hideLeftDrawer: function() {
|
this.leftDrawerStatus = false
|
},
|
changeCheckBox(names) {
|
this.ec.option.legend.data.forEach(item => {
|
if (names.includes(item)) {
|
this.legendSelected[item] = !this.legendSelected[item]
|
}
|
})
|
|
this.ec.option.legend.selected = this.legendSelected
|
},
|
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;
|
}
|
},
|
formatterData: function() {
|
let that = this
|
let option = this.baseInfo
|
let name = option.name
|
// let data = uni.getStorageSync(name)
|
|
let data = [{ //测试
|
"date": "2021-06-03 15:19:30",
|
"x_zdjsd": "2.64", //X轴振动加速度
|
"x_zdsd": "66.91", //X轴振动速度
|
"y_zdjsd": "1.12", //Y轴振动加速度
|
"y_zdsd": "5.87", //Y轴振动速度
|
"z_zdjsd": "0.18", //Z轴振动加速度
|
"z_zdsd": "0.08", //Z轴振动速度
|
"temperature": 28.9, //温度
|
"battery": 3.3, //电压
|
}]
|
let temperature = []
|
let x_axis= []
|
let y_axis= []
|
let z_axis= []
|
for (let i = 0; i < 15; i++) {
|
let axisnum = Math.floor(Math.random() * 200)
|
x_axis.push({
|
value: [this.getRandomDate(), axisnum]
|
})
|
y_axis.push({
|
value: [this.getRandomDate(), axisnum]
|
})
|
z_axis.push({
|
value: [this.getRandomDate(), axisnum]
|
})
|
let num = Math.floor(Math.random() * 100)
|
temperature.push({value:[this.getRandomDate(), num]})
|
}
|
let seriesData = [{
|
name: 'X轴',
|
type: 'line',
|
yAxisIndex: 0,
|
showSymbol: false,
|
smooth: true,
|
hoverAnimation: false,
|
data: x_axis,
|
lineStyle: { // 设置线条的style等
|
normal: {
|
color: '#0081ff', // 折线线条颜色:红色
|
},
|
},
|
|
itemStyle: {
|
// 设置线条上点的颜色（和图例的颜色）
|
normal: {
|
color: '#0081ff',
|
},
|
}
|
},
|
{
|
name: 'Y轴',
|
type: 'line',
|
yAxisIndex: 0,
|
showSymbol: false,
|
smooth: true,
|
hoverAnimation: false,
|
data: y_axis,
|
lineStyle: { // 设置线条的style等
|
normal: {
|
color: '#39b54a', // 折线线条颜色:红色
|
},
|
},
|
itemStyle: {
|
// 设置线条上点的颜色（和图例的颜色）
|
normal: {
|
color: '#39b54a',
|
},
|
}
|
},
|
|
{
|
name: 'Z轴',
|
type: 'line',
|
yAxisIndex: 0,
|
showSymbol: false,
|
smooth: true,
|
hoverAnimation: false,
|
data: z_axis,
|
lineStyle: { // 设置线条的style等
|
normal: {
|
color: '#f37b1d', // 折线线条颜色:红色
|
},
|
},
|
itemStyle: {
|
// 设置线条上点的颜色（和图例的颜色）
|
normal: {
|
color: '#f37b1d',
|
},
|
}
|
},
|
{
|
name: '温度',
|
type: 'line',
|
yAxisIndex: 1,
|
smooth: true,
|
showSymbol: false,
|
hoverAnimation: false,
|
data: temperature,
|
lineStyle: { // 设置线条的style等
|
normal: {
|
color: '#8799a3', //
|
},
|
},
|
itemStyle: {
|
// 设置线条上点的颜色（和图例的颜色）
|
normal: {
|
color: '#8799a3',
|
},
|
}
|
},
|
]
|
|
return seriesData;
|
},
|
//初始化图表
|
initChart(canvas, width, height, canvasDpr) {
|
// console.log(canvas, width, height, canvasDpr)
|
chart = echarts.init(canvas, null, {
|
width: width,
|
height: height,
|
devicePixelRatio: canvasDpr
|
})
|
canvas.setChart(chart)
|
chart.setOption(this.ec.option)
|
return chart
|
},
|
//初始化图表数据
|
initChartData: function(data) {
|
let baseInfo = this.baseInfo;
|
|
let option = {
|
title: {
|
text: baseInfo.monitorName,
|
left: "center"
|
|
},
|
tooltip: {
|
trigger: 'axis',
|
formatter: function(params) {
|
// console.log(params);
|
var params_record = params[0].data;
|
var date = new Date(params[0].axisValue);
|
let str = '';
|
str += date.getHours() + ':' + date.getMinutes() + ':' +
|
date.getSeconds() + '\n';
|
for (var i = 0; i < params.length; i++) {
|
let item = params[i];
|
if (i == params.length - 1) {
|
str += item.seriesName + ':' + item.data.value[1]
|
} else {
|
str += item.seriesName + ':' + item.data.value[1] +
|
'\n'
|
}
|
}
|
return str;
|
},
|
axisPointer: {
|
// animation: false
|
}
|
},
|
legend: {
|
data: ['X轴', 'Y轴', 'Z轴', '温度'],
|
show: false,
|
selected: this.legendSelected
|
},
|
grid: {
|
containLabel: true,
|
x: '15',
|
y: '80',
|
x2: '15',
|
y2: '40'
|
},
|
xAxis: {
|
type: 'time',
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'dashed'
|
|
}
|
},
|
splitNumber: 3,
|
axisLabel: {
|
//color: '#fff',
|
formatter: function(v, index) {
|
var date = new Date(v);
|
return utils.formatTime(date);
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
// color: '#fff'
|
},
|
},
|
min:function(value){
|
return utils.formatTime(new Date(value.min))
|
},
|
max:function(value){
|
return utils.formatTime(new Date(value.max))
|
},
|
},
|
yAxis: [{
|
name: 'mm/s²',
|
nameLocation: 'end',
|
type: 'value',
|
// boundaryGap: [0, '100%'],
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'dashed'
|
}
|
},
|
axisLabel: {
|
//color: '#fff',
|
},
|
axisLine: {
|
lineStyle: {
|
show: true,
|
//color: '#fff'
|
},
|
|
},
|
min: 0,
|
max: 130,
|
// interval: 26,
|
scale: true
|
},
|
{
|
name: '℃',
|
nameLocation: 'end',
|
type: 'value',
|
position: "right",
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'dashed'
|
}
|
},
|
axisLabel: {
|
//color: '#fff',
|
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
//color: '#fff'
|
},
|
},
|
min: 0,
|
max: 100,
|
// interval: 20,
|
scale: true
|
},
|
],
|
series: data
|
};
|
this.ec.option = option
|
|
|
},
|
|
|
getRandomDate() {
|
return moment(new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * Math.floor((Math.random()*10000))).getTime()).format('YYYY-MM-DD HH:mm:ss');
|
},
|
//关闭低功耗蓝牙的连接
|
closeBLEConnection: function() {
|
uni.closeBLEConnection({
|
deviceId: this.deviceId,
|
success: (res) => {
|
console.log('蓝牙连接关闭', res)
|
},
|
fail: (err) => {
|
console.log('关闭蓝牙连接失败', err)
|
}
|
})
|
},
|
}
|
}
|
</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>
|
