349 lines
7.1 KiB
Vue
349 lines
7.1 KiB
Vue
<template>
|
||
<u-popup :show="open" mode="center" @close="close" closeable>
|
||
<view class="jz-info" style="width: 95vw;">
|
||
<view style="font-size: 16px;font-weight: 600;margin-bottom: 10px;">{{title}}</view>
|
||
<view style="width: 100%;">
|
||
<u-tabs :list="tabs" @click="tabsClick"></u-tabs>
|
||
</view>
|
||
<view style="height: 50vh;">
|
||
<canvas id="chartRef" style="zoom: 1 ;height: 100%;width: 100%;" canvas-id="mychart"
|
||
:canvas-type="canvasType" :data="dataList" :change:data="echarts.dataHandler" />
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</template>
|
||
|
||
<script>
|
||
import plugin from "@/plugins"
|
||
import {
|
||
timestampFormat
|
||
} from '@/utils/common.js'
|
||
import * as station from "@/api/iot/data_station.js";
|
||
import * as valve from "@/api/iot/data_valve.js";
|
||
|
||
export default {
|
||
name: "ADC",
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
title: "设备曲线",
|
||
open: false,
|
||
wo: null,
|
||
tabs: [{
|
||
name: '当天',
|
||
day: 0,
|
||
},
|
||
{
|
||
name: '近两天',
|
||
day: -1,
|
||
},
|
||
{
|
||
name: '近三天',
|
||
day: -2,
|
||
},
|
||
],
|
||
item: null,
|
||
type: null,
|
||
dataList: null,
|
||
canvasType: '2d',
|
||
}
|
||
},
|
||
created() {},
|
||
mounted() {},
|
||
methods: {
|
||
/**
|
||
* 显示方法
|
||
* @param type 1基站 2阀门
|
||
* @param row
|
||
* @param data
|
||
*/
|
||
async show(row) {
|
||
console.error("row：", row);
|
||
this.open = true;
|
||
this.type = row._type;
|
||
this.title = `设备曲线【${row._showName}】`;
|
||
this.item = row;
|
||
this.getList(0);
|
||
},
|
||
tabsClick(e) {
|
||
this.getList(e.day);
|
||
},
|
||
getList(day) {
|
||
uni.showLoading({
|
||
mask: true,
|
||
icon: 'none'
|
||
})
|
||
if (this.type == "station") {
|
||
let queryParams = {
|
||
pageNum: 1,
|
||
pageSize: 9999,
|
||
deviceId: this.item.deviceId,
|
||
deviceCode: this.item.deviceCode,
|
||
reportType: "device_thing",
|
||
params: {
|
||
beginTime: this.getNowFormatDate(day),
|
||
endTime: this.getNowFormatDate(1),
|
||
}
|
||
}
|
||
station.list(queryParams).then(res => {
|
||
uni.hideLoading()
|
||
this.dataList = {
|
||
type: this.type,
|
||
data: res.rows || []
|
||
};
|
||
}).catch(error => {
|
||
uni.hideLoading()
|
||
plugin.modal.showToast(error)
|
||
})
|
||
} else if (this.type == "valve") {
|
||
let queryParams = {
|
||
pageNum: 1,
|
||
pageSize: 9999,
|
||
landId: this.item.landId,
|
||
wogId: this.item.wogId,
|
||
woId: this.item.woId,
|
||
reportType: "device_thing",
|
||
params: {
|
||
beginTime: this.getNowFormatDate(day),
|
||
endTime: this.getNowFormatDate(1),
|
||
}
|
||
}
|
||
valve.list(queryParams).then(res => {
|
||
uni.hideLoading()
|
||
this.dataList = {
|
||
type: this.type,
|
||
data: res.rows || []
|
||
};
|
||
}).catch(error => {
|
||
uni.hideLoading()
|
||
plugin.modal.showToast(error)
|
||
})
|
||
}
|
||
|
||
},
|
||
close() {
|
||
this.dataList = null;
|
||
this.open = false;
|
||
this.$emit('close');
|
||
},
|
||
getNowFormatDate(_day = 0) {
|
||
let date = new Date();
|
||
date.setDate(date.getDate() + _day);
|
||
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
if (month < 10) {
|
||
month = "0" + month;
|
||
}
|
||
let d = date.getDate();
|
||
if (d < 10) {
|
||
d = "0" + d;
|
||
}
|
||
return year + "-" + month + "-" + d + " 00:00:00";
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<script module="echarts" lang="renderjs">
|
||
import * as echartsJS from 'echarts';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
_echarts: null,
|
||
}
|
||
},
|
||
created() {},
|
||
mounted() {},
|
||
methods: {
|
||
dataHandler(e) {
|
||
if (!e) {
|
||
this.dispose();
|
||
return;
|
||
}
|
||
this.setEchart(e);
|
||
},
|
||
setEchart(e) {
|
||
if (this._echarts) {
|
||
this._echarts.clear();
|
||
}
|
||
// 初始化 ECharts 实例
|
||
let _echarts = echartsJS.init(document.getElementById("chartRef"));
|
||
let xAxis = [];
|
||
let adcObj = {
|
||
battery: [],
|
||
temperature: [],
|
||
humidity: [],
|
||
motoAdc: [],
|
||
pressure1: [],
|
||
pressure2: [],
|
||
pressure3: [],
|
||
pressure4: [],
|
||
};
|
||
e.data.forEach(item => {
|
||
xAxis.push(item.reportTime);
|
||
adcObj.battery.push(item.battery || 0);
|
||
adcObj.temperature.push(item.temperature || 0);
|
||
if (e.type == "valve") {
|
||
adcObj.humidity.push(item.humidity || 0);
|
||
adcObj.motoAdc.push(item.motoAdc ? (item.motoAdc / 1000).toFixed(3) : 0);
|
||
if (item.pressure1 != null) {
|
||
adcObj.pressure1.push(item.pressure1);
|
||
}
|
||
if (item.pressure2 != null) {
|
||
adcObj.pressure2.push(item.pressure2);
|
||
}
|
||
if (item.pressure3 != null) {
|
||
adcObj.pressure3.push(item.pressure3);
|
||
}
|
||
if (item.pressure4 != null) {
|
||
adcObj.pressure4.push(item.pressure4);
|
||
}
|
||
}
|
||
});
|
||
let series = [];
|
||
let legendName = [];
|
||
for (const key in adcObj) {
|
||
if (adcObj[key].length) {
|
||
let name = "";
|
||
switch (key) {
|
||
case "battery":
|
||
name = "电量(%)";
|
||
break;
|
||
case "temperature":
|
||
name = "温度(℃)";
|
||
break;
|
||
case "humidity":
|
||
name = "湿度(%)";
|
||
break;
|
||
case "motoAdc":
|
||
name = "最大电流(A)";
|
||
break;
|
||
case "pressure1":
|
||
name = "压力1";
|
||
break;
|
||
case "pressure2":
|
||
name = "压力2";
|
||
break;
|
||
case "pressure3":
|
||
name = "压力3";
|
||
break;
|
||
case "pressure4":
|
||
name = "压力4";
|
||
break;
|
||
}
|
||
legendName.push(name);
|
||
series.push({
|
||
name: name,
|
||
type: "line",
|
||
stack: key,
|
||
data: adcObj[key],
|
||
smooth: true
|
||
});
|
||
}
|
||
}
|
||
let option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow"
|
||
},
|
||
backgroundColor: "rgba(21, 45, 85, 0.6)",
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
legend: {
|
||
data: legendName,
|
||
textStyle: {
|
||
color: "#333"
|
||
}
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: xAxis,
|
||
axisTick: {
|
||
show: true
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "red"
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: "#333"
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
color: "#333",
|
||
fontSize: 14
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#666",
|
||
type: "dashed"
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "red"
|
||
}
|
||
}
|
||
},
|
||
series
|
||
};
|
||
|
||
_echarts.setOption(option);
|
||
this._echarts = _echarts;
|
||
},
|
||
dispose() {
|
||
if (this._echarts) {
|
||
this._echarts.dispose();
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.jz-info {
|
||
padding: 15px;
|
||
|
||
view {
|
||
display: flex;
|
||
|
||
uni-text {
|
||
line-height: 48rpx;
|
||
}
|
||
|
||
uni-text:nth-child(odd) {
|
||
width: 100px;
|
||
margin-right: 10px;
|
||
color: #666;
|
||
background: #f3f3f3;
|
||
}
|
||
|
||
uni-text:nth-child(even) {
|
||
width: calc(100% - 100px);
|
||
color: #000;
|
||
word-wrap: break-word;
|
||
/* 支持旧版浏览器 */
|
||
overflow-wrap: break-word;
|
||
/* 推荐 */
|
||
white-space: normal;
|
||
/* 可选：如果需要连字符 */
|
||
hyphens: auto;
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |