368 lines
10 KiB
Vue
368 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view class="device-monitor">
|
|||
|
|
<view class="search-wrap">
|
|||
|
|
<u--text :text="$tt('monitior.monitoringInterval')"
|
|||
|
|
:customStyle="{color: '#045FFA', fontSize: '12px', marginBottom: '10px'}"></u--text>
|
|||
|
|
<u-row :gutter="10">
|
|||
|
|
<u-col span="3">
|
|||
|
|
<u--input :placeholder=" $tt('monitior.inputNumber')" placeholderStyle="font-size: 12px"
|
|||
|
|
v-model="monitorInterval" border="surround" color="#666"
|
|||
|
|
customStyle="padding:4px; background: #ffffff;"></u--input>
|
|||
|
|
</u-col>
|
|||
|
|
<u-col span="3">
|
|||
|
|
<u--input :placeholder="$tt('monitior.inputTimes')" placeholderStyle="font-size: 12px"
|
|||
|
|
v-model="monitorNumber" border="surround" cocclor="#666"
|
|||
|
|
customStyle="padding:4px; background: #ffffff;"></u--input>
|
|||
|
|
</u-col>
|
|||
|
|
<u-col span="3">
|
|||
|
|
<u-button type="primary" :text="$tt('monitior.monitior')" @tap="updateMonitorParameters()"
|
|||
|
|
size="small"
|
|||
|
|
:disabled="deviceInfo.monitorList && deviceInfo.monitorList.length == 0"></u-button>
|
|||
|
|
</u-col>
|
|||
|
|
<u-col span="3">
|
|||
|
|
<u-button type="info" :text="$tt('monitior.stop')" @tap="stopMonitor()" size="small"
|
|||
|
|
:disabled="deviceInfo.monitorList && deviceInfo.monitorList.length == 0"></u-button>
|
|||
|
|
</u-col>
|
|||
|
|
</u-row>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="charts-box" v-for="(chart, index) in monitorChart" :key="index">
|
|||
|
|
<qiun-data-charts type="area" :canvas2d="true" :reshow="reshow" :opts="chart.opts" :chartData="chart.data"
|
|||
|
|
:animation="false" tooltipFormat="tooltipStatistic" />
|
|||
|
|
<view style="position:relative;bottom:100px;">
|
|||
|
|
<u-loading-icon :text="$tt('monitior.receivingData')" textSize="14" :show="chart.show"></u-loading-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-empty mode="data" :show="deviceInfo.monitorList && deviceInfo.monitorList.length === 0"
|
|||
|
|
marginTop="30"></u-empty>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { listMonitor } from '@/apis/modules/deviceLog';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'DeviceMonitor',
|
|||
|
|
props: {
|
|||
|
|
show: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
required: true
|
|||
|
|
},
|
|||
|
|
device: {
|
|||
|
|
type: Object,
|
|||
|
|
default: null,
|
|||
|
|
required: true
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
// 兼容小程序
|
|||
|
|
show: function(newVal, oldVal) {
|
|||
|
|
this.reshow = newVal;
|
|||
|
|
},
|
|||
|
|
device: function(newVal, oldVal) {
|
|||
|
|
this.deviceInfo = newVal;
|
|||
|
|
this.initChart(); // 初始化图表
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
reshow: false,
|
|||
|
|
// 图表数据集合
|
|||
|
|
monitorChart: [{
|
|||
|
|
opts: {},
|
|||
|
|
data: {
|
|||
|
|
categories: [],
|
|||
|
|
series: []
|
|||
|
|
},
|
|||
|
|
show: false,
|
|||
|
|
id: ''
|
|||
|
|
}],
|
|||
|
|
// 设备信息
|
|||
|
|
deviceInfo: {
|
|||
|
|
monitorList: [],
|
|||
|
|
},
|
|||
|
|
// 实时监测间隔
|
|||
|
|
monitorInterval: 1000,
|
|||
|
|
// 实时监测次数
|
|||
|
|
monitorNumber: 30,
|
|||
|
|
// 停止实时监测
|
|||
|
|
isStopMonitor: true,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
// 获取显示状态(兼容H5和APP)
|
|||
|
|
if (this.show != null) {
|
|||
|
|
this.reshow = this.show;
|
|||
|
|
}
|
|||
|
|
if (this.device.monitorList && this.device.monitorList.length !== 0) {
|
|||
|
|
this.deviceInfo = this.device;
|
|||
|
|
this.initChart(); // 初始化图表
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 监听回调
|
|||
|
|
this.$nextTick(function() {
|
|||
|
|
this.mqttCallback();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/* Mqtt回调处理 */
|
|||
|
|
mqttCallback() {
|
|||
|
|
this.$mqttTool.client.on('message', (topic, message, buffer) => {
|
|||
|
|
let topics = topic.split('/');
|
|||
|
|
let productId = topics[1];
|
|||
|
|
let deviceNum = topics[2];
|
|||
|
|
message = JSON.parse(message.toString());
|
|||
|
|
if (topics[3] == 'monitor' && !this.isStopMonitor) {
|
|||
|
|
console.log('接收到【实时监测】主题：', topic);
|
|||
|
|
console.log('接收到【实时监测】内容：', message);
|
|||
|
|
// 实时监测
|
|||
|
|
for (let k = 0; k < message.length; k++) {
|
|||
|
|
let value = message[k].value;
|
|||
|
|
let id = message[k].id;
|
|||
|
|
let remark = message[k].remark;
|
|||
|
|
// 数据加载到图表
|
|||
|
|
for (let i = 0; i < this.monitorChart.length; i++) {
|
|||
|
|
this.monitorChart[i].show = false;
|
|||
|
|
if (id == this.monitorChart[i].id) {
|
|||
|
|
if (this.monitorChart[i].data.series[0].data.length > 50) {
|
|||
|
|
this.monitorChart[i].data.series[0].data.shift();
|
|||
|
|
}
|
|||
|
|
this.monitorChart[i].data.categories.push(this.getTime());
|
|||
|
|
this.monitorChart[i].data.series[0].data.push(value);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/** 更新实时监测参数*/
|
|||
|
|
updateMonitorParameters() {
|
|||
|
|
this.isStopMonitor = false;
|
|||
|
|
if (this.monitorInterval < 500 || this.monitorInterval > 10000) {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: this.$tt('monitior.MonitoringRange'),
|
|||
|
|
duration: 3000
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (this.monitorNumber == 0 || this.monitorNumber > 300) {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: this.$tt('monitior.monitoringQuantity'),
|
|||
|
|
duration: 3000
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 清空图表数据
|
|||
|
|
for (let i = 0; i < this.monitorChart.length; i++) {
|
|||
|
|
this.monitorChart[i].data.series[0].data = [];
|
|||
|
|
this.monitorChart[i].data.categories = [];
|
|||
|
|
this.monitorChart[i].show = true;
|
|||
|
|
}
|
|||
|
|
this.publishMonitor({
|
|||
|
|
name: this.$tt('monitior.real-timeMonitor'),
|
|||
|
|
value: this.monitorNumber
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/*停止实时监测*/
|
|||
|
|
stopMonitor() {
|
|||
|
|
this.isStopMonitor = true;
|
|||
|
|
// 发布指令
|
|||
|
|
this.publishMonitor({
|
|||
|
|
name: this.$tt('monitior.stopMonitor'),
|
|||
|
|
value: 0
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/* 发布消息 */
|
|||
|
|
publishMonitor(model) {
|
|||
|
|
// 实时监测
|
|||
|
|
const {
|
|||
|
|
productId,
|
|||
|
|
serialNumber
|
|||
|
|
} = this.deviceInfo;
|
|||
|
|
let topic = '/' + productId + '/' + serialNumber + '/monitor/get';
|
|||
|
|
let message = '{"count":' + model.value + ',"interval":' + this.monitorInterval + '}';
|
|||
|
|
if (topic != '') {
|
|||
|
|
this.$mqttTool.publish(topic, message, model.name); // 发布
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 获取当前时间
|
|||
|
|
getTime() {
|
|||
|
|
let date = new Date();
|
|||
|
|
let y = date.getFullYear();
|
|||
|
|
let m = date.getMonth() + 1;
|
|||
|
|
let d = date.getDate();
|
|||
|
|
let H = date.getHours();
|
|||
|
|
let mm = date.getMinutes();
|
|||
|
|
let s = date.getSeconds();
|
|||
|
|
m = m < 10 ? '0' + m : m;
|
|||
|
|
d = d < 10 ? '0' + d : d;
|
|||
|
|
H = H < 10 ? '0' + H : H;
|
|||
|
|
return y + '-' + m + '-' + d + ' ' + H + ':' + mm + ':' + s;
|
|||
|
|
},
|
|||
|
|
// 初始化图表
|
|||
|
|
initChart() {
|
|||
|
|
let color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4',
|
|||
|
|
'#ea7ccc'
|
|||
|
|
];
|
|||
|
|
this.monitorChart = [];
|
|||
|
|
if (this.deviceInfo.monitorList && this.deviceInfo.monitorList.length !== 0) {
|
|||
|
|
for (let i = 0; i < this.deviceInfo.monitorList.length; i++) {
|
|||
|
|
let data = {};
|
|||
|
|
let res = {
|
|||
|
|
categories: [],
|
|||
|
|
series: [{
|
|||
|
|
name: this.deviceInfo.monitorList[i].name + '（单位 ' + (this.deviceInfo
|
|||
|
|
.monitorList[i].datatype.unit !=
|
|||
|
|
undefined ? this.deviceInfo.monitorList[i].datatype.unit : '无') + '）',
|
|||
|
|
data: []
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
data = JSON.parse(JSON.stringify(res));
|
|||
|
|
let opts = {
|
|||
|
|
// 自定义名称和单位，用于图表提示框显示
|
|||
|
|
name: this.deviceInfo.monitorList[i].name,
|
|||
|
|
unit: this.deviceInfo.monitorList[i].datatype.unit,
|
|||
|
|
update: true,
|
|||
|
|
timing: 'easeOut',
|
|||
|
|
duration: 1000,
|
|||
|
|
color: [color[i % color.length]],
|
|||
|
|
padding: [0, 15, 15, 15],
|
|||
|
|
fontSize: 12,
|
|||
|
|
fontColor: '#666666',
|
|||
|
|
dataLabel: false, //是否显示值
|
|||
|
|
dataPointShape: true,
|
|||
|
|
dataPointShapeType: 'solid',
|
|||
|
|
touchMoveLimit: 60,
|
|||
|
|
enableScroll: true,
|
|||
|
|
enableMarkLine: false,
|
|||
|
|
legend: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top', // 可以选择合适的位置
|
|||
|
|
float: 'left',
|
|||
|
|
padding: 10,
|
|||
|
|
margin: 5,
|
|||
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|||
|
|
borderColor: 'rgba(0,0,0,0)',
|
|||
|
|
borderWidth: 0,
|
|||
|
|
fontSize: 14,
|
|||
|
|
fontColor: '#000',
|
|||
|
|
lineHeight: 16,
|
|||
|
|
hiddenColor: '#CECECE',
|
|||
|
|
itemGap: 10
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
disableGrid: true,
|
|||
|
|
disabled: true, // 隐藏分类名称
|
|||
|
|
axisLine: true,
|
|||
|
|
axisLineColor: '#CCCCCC',
|
|||
|
|
calibration: false,
|
|||
|
|
fontColor: '#666666',
|
|||
|
|
fontSize: 13,
|
|||
|
|
rotateLabel: false,
|
|||
|
|
rotateAngle: 45,
|
|||
|
|
itemCount: 30,
|
|||
|
|
boundaryGap: 'justify',
|
|||
|
|
splitNumber: 5,
|
|||
|
|
gridColor: '#CCCCCC',
|
|||
|
|
gridType: 'solid',
|
|||
|
|
dashLength: 1,
|
|||
|
|
gridEval: 1,
|
|||
|
|
scrollShow: false,
|
|||
|
|
scrollAlign: 'right',
|
|||
|
|
scrollColor: '#A6A6A6',
|
|||
|
|
scrollBackgroundColor: '#ccc',
|
|||
|
|
format: ''
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
gridType: 'dash',
|
|||
|
|
dashLength: 2,
|
|||
|
|
disabled: false,
|
|||
|
|
tofix: 3, //刻度保留小数位数
|
|||
|
|
disableGrid: false,
|
|||
|
|
splitNumber: 5,
|
|||
|
|
gridColor: '#CCCCCC',
|
|||
|
|
padding: 10,
|
|||
|
|
showTitle: false,
|
|||
|
|
data: []
|
|||
|
|
},
|
|||
|
|
extra: {
|
|||
|
|
area: {
|
|||
|
|
type: 'curve',
|
|||
|
|
opacity: 0.5,
|
|||
|
|
addLine: true,
|
|||
|
|
width: 1,
|
|||
|
|
gradient: false
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
showBox: true,
|
|||
|
|
showArrow: true,
|
|||
|
|
showCategory: true,
|
|||
|
|
borderWidth: 0,
|
|||
|
|
borderRadius: 0,
|
|||
|
|
borderColor: '#000000',
|
|||
|
|
borderOpacity: 0.7,
|
|||
|
|
bgColor: '#000000',
|
|||
|
|
bgOpacity: 0.7,
|
|||
|
|
gridType: 'solid',
|
|||
|
|
dashLength: 4,
|
|||
|
|
gridColor: '#CCCCCC',
|
|||
|
|
fontColor: '#FFFFFF',
|
|||
|
|
splitLine: true,
|
|||
|
|
horizentalLine: false,
|
|||
|
|
xAxisLabel: false,
|
|||
|
|
yAxisLabel: false,
|
|||
|
|
labelBgColor: '#FFFFFF',
|
|||
|
|
labelBgOpacity: 0.7,
|
|||
|
|
labelFontColor: '#666666'
|
|||
|
|
},
|
|||
|
|
markLine: {
|
|||
|
|
type: 'solid',
|
|||
|
|
dashLength: 2,
|
|||
|
|
data: []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
opts && this.monitorChart.push({
|
|||
|
|
opts: opts,
|
|||
|
|
data: data,
|
|||
|
|
show: false,
|
|||
|
|
id: this.deviceInfo.monitorList[i].id
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.device-monitor {
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.search-wrap {
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|||
|
|
.charts-box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 500rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
|
|||
|
|
&:not(:last-child) {
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|