.
This commit is contained in:
parent
d6407785e5
commit
0726460524
10
api/iot/data_station.js
Normal file
10
api/iot/data_station.js
Normal file
@ -0,0 +1,10 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询设备-设备单据摘要列表
|
||||
export function list(query) {
|
||||
return request({
|
||||
url: '/iotlog/data_station/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
10
api/iot/data_valve.js
Normal file
10
api/iot/data_valve.js
Normal file
@ -0,0 +1,10 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询设备-设备单据摘要列表
|
||||
export function list(query) {
|
||||
return request({
|
||||
url: '/iotlog/data_valve/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
347
components/custom-index-chart/custom-index-chart.vue
Normal file
347
components/custom-index-chart/custom-index-chart.vue
Normal file
@ -0,0 +1,347 @@
|
||||
<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) {
|
||||
this.open = true;
|
||||
if (row?.deviceTypeId == 1) {
|
||||
this.type = "station";
|
||||
this.title = `设备曲线【${row.deviceCode}】`;
|
||||
} else {
|
||||
this.type = "valve";
|
||||
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 || []
|
||||
};
|
||||
})
|
||||
} else if (this.type == "valve") {
|
||||
let queryParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 9999,
|
||||
landId: this.item.landId,
|
||||
wogId: this.item.landGroupId,
|
||||
woId: this.item.id,
|
||||
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 || []
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
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>
|
@ -15,6 +15,7 @@
|
||||
"dependencies": {
|
||||
"axios": "0.28.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"echarts": "^5.6.0",
|
||||
"jsencrypt": "^3.3.2",
|
||||
"leaflet": "^1.9.4",
|
||||
"mqtt": "^3.0.0"
|
||||
|
@ -129,7 +129,7 @@
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col span="4" style="align-items: center;">
|
||||
<view class="fixed">
|
||||
<view class="fixed" @click="openDialog('chart',item)">
|
||||
<custom-signal :online="dc.dataObj[item.deviceCode]?.online"
|
||||
:isp="dc.dataObj[item.deviceCode]?.isp"
|
||||
:value="dc.dataObj[item.deviceCode]?.rssi" />
|
||||
@ -253,7 +253,8 @@
|
||||
</u-row>
|
||||
</view>
|
||||
<view class="control" v-if="dc.dataObj[child.dataKey]">
|
||||
<view class="icon iconfont icon-tubiao"></view>
|
||||
<view class="icon iconfont icon-tubiao"
|
||||
@click="openDialog('chart',child)" />
|
||||
<u-row v-if="child.device.deviceTypeKey == 'valve'">
|
||||
<u-col span="3" style="margin-top: -10px;">
|
||||
<u-button :disabled="child.device.disable?.open1"
|
||||
@ -543,6 +544,8 @@
|
||||
<custom-angle-slider ref="refAngleSlider" mode="bottom" @close="" @confirm="swiperConfirm" />
|
||||
<!-- ADC -->
|
||||
<custom-index-adc ref="adcRef" />
|
||||
<!-- ADC -->
|
||||
<custom-index-chart ref="adcChartRef" />
|
||||
<!-- 墒情 -->
|
||||
<custom-index-mp ref="mpRef" />
|
||||
|
||||
@ -683,18 +686,18 @@
|
||||
// 打开弹窗
|
||||
async openDialog(key, row = null) {
|
||||
switch (key) {
|
||||
// case "chart": //曲线
|
||||
// this.$refs.adcChartRef.show(row);
|
||||
// break;
|
||||
// case "wo":
|
||||
// this.$refs.woRemarkRef.show(row);
|
||||
// break;
|
||||
// case "wh": //浇灌履历
|
||||
// this.$refs.wateringHistoryRef.show(this.land, row);
|
||||
// break;
|
||||
// case "log": //日志
|
||||
// this.$refs.deviceLogRef.show(this.land, row);
|
||||
// break;
|
||||
case "chart": //曲线
|
||||
this.$refs.adcChartRef.show(row);
|
||||
break;
|
||||
// case "wo":
|
||||
// this.$refs.woRemarkRef.show(row);
|
||||
// break;
|
||||
// case "wh": //浇灌履历
|
||||
// this.$refs.wateringHistoryRef.show(this.land, row);
|
||||
// break;
|
||||
// case "log": //日志
|
||||
// this.$refs.deviceLogRef.show(this.land, row);
|
||||
// break;
|
||||
case "mp": //墒情
|
||||
this.$refs.mpRef.show(this.ijs.land);
|
||||
break;
|
||||
|
@ -47,7 +47,7 @@ export default {
|
||||
if (res.confirm) {
|
||||
resolve(res.confirm)
|
||||
}
|
||||
if(res.cancel){
|
||||
if (res.cancel) {
|
||||
reject(res.cancel);
|
||||
}
|
||||
}
|
||||
@ -68,10 +68,14 @@ export default {
|
||||
},
|
||||
// 打开遮罩层
|
||||
loading(text) {
|
||||
uni.showLoading({
|
||||
title: text,
|
||||
icon: 'none'
|
||||
})
|
||||
let obj = {};
|
||||
if (text) {
|
||||
obj = {
|
||||
title: text,
|
||||
icon: 'none'
|
||||
}
|
||||
}
|
||||
uni.showLoading(obj)
|
||||
},
|
||||
// 关闭遮罩层
|
||||
closeLoading() {
|
||||
|
Loading…
Reference in New Issue
Block a user