From 6017f46b762663b9393cdae8422e0de1ed3db218 Mon Sep 17 00:00:00 2001
From: guifei zhu <guifeizhu@guifeideiMac.local>
Date: 星期三, 27 十一月 2024 13:30:06 +0800
Subject: [PATCH] 添加mqtt数据接口
---
pages/tabBar/monitor.vue | 206 +++++++++++++++++++++++++++++----------------------
1 files changed, 117 insertions(+), 89 deletions(-)
diff --git a/pages/tabBar/monitor.vue b/pages/tabBar/monitor.vue
index b7156de..fbc86f7 100644
--- a/pages/tabBar/monitor.vue
+++ b/pages/tabBar/monitor.vue
@@ -1,15 +1,29 @@
<template>
<view class="container">
- <!-- <view class="text-xxl" style="position: fixed; left: 40rpx;top: 100rpx;color: black;z-index: 99;">
- <text @click="goBack" class="cuIcon-back" ></text>
- </view> -->
<cu-custom bgColor="bg-gradual-blue" :isBack="false">
<block slot="content">鏈哄彴鐩戞帶</block>
</cu-custom>
<!-- <u-notice-bar :text="notice" mode="closable" ></u-notice-bar> -->
- <!-- -->
- <view class="uni-padding-wrap">
+
+ <!-- <view class="nav uni-padding-wrap margin-bottom-xs">
+ <u--image v-if="runStatu" :showLoading="true" :fade="true" duration="450"
+ src="https://dev.shlanbao.cn:9999/fileTransfer/preview?userFileId=1645312976277106688&isMin=false&shareBatchNum=&extractionCode="
+ width="100%" height="200px" mode="aspectFit">
+ <template v-slot:loading>
+ <u-loading-icon></u-loading-icon>
+ </template>
+ </u--image>
+
+ <u--image v-else :showLoading="true" :fade="true" duration="450"
+ src="https://dev.shlanbao.cn:9999/fileTransfer/preview?userFileId=1645312976381964288&isMin=false&shareBatchNum=&extractionCode="
+ width="100%" height="200px" mode="aspectFit">
+ <template v-slot:loading>
+ <u-loading-icon></u-loading-icon>
+ </template>
+ </u--image>
+ </view> -->
+ <view class="uni-padding-wrap">
<view class="page-section swiper">
<view class="page-section-spacing">
<swiper class="swiper" style="height: 450rpx;" circular="true" indicator-dots="true" autoplay="true"
@@ -43,45 +57,40 @@
<view class="text-gray margin-top-xs">
<text class="margin-right-xs">鎶曟枡:</text>
- <text class="text-cyan">{{$lget(model,'feed')}} <text class="text-gray margin-left-xs">绛�</text></text>
-
- </view>
- <view class="text-gray margin-top-xs">
- <text class="margin-right-xs">閲嶉噺:</text>
- <text class="text-cyan margin-right-xs">{{$lget(model,'trendVo.weight')}}<text class="text-gray margin-left-xs">/</text></text>
- <text> <text class="text-line-through">{{$lget(model,'originWeight')}}</text> <text class="text-gray margin-left-xs">kg</text></text>
-
- </view>
-
- <view class="text-gray margin-top-xs">
- <text class="margin-right-xs">鐢ㄦ椂:</text>
- <text class="text-cyan">{{$lget(model,'trendVo.totalTime')}}<text class="text-gray margin-left-xs">min</text></text>
-
+ <text class="text-cyan">{{$lget(model,'feed')}} <text class="text-gray margin-left-xs">绛�</text></text>
+
+ </view>
+ <view class="text-gray margin-top-xs">
+ <text class="margin-right-xs">閲嶉噺:</text>
+ <text class="text-cyan margin-right-xs">{{$lget(model,'trendVo.weight')}}<text
+ class="text-gray margin-left-xs">/</text></text>
+ <text> <text class="text-line-through">{{$lget(model,'originWeight')}}</text> <text
+ class="text-gray margin-left-xs">kg</text></text>
+
</view>
- <!-- <view class="margin-tb-sm" style="position: relative;">
- <text class="text-gray text-df margin-right-xs">閲嶉噺:</text>
- <text class="text-cyan text-bold text-xxl margin-right-xs">100kg</text>
- <text class="text-gray text-df margin-right-xs">鏃堕棿:</text>
- <text class="text-cyan text-bold text-xxl margin-right-xs">0min </text>
-
- </view>
- -->
+ <view class="text-gray margin-top-xs">
+ <text class="margin-right-xs">鐢ㄦ椂:</text>
+ <text class="text-cyan">{{$lget(model,'trendVo.totalTime')}}<text
+ class="text-gray margin-left-xs">min</text></text>
+ </view>
<view class="margin-tb-sm" style="position: relative;">
<text class="text-gray text-df margin-right-xs">鍚按鐜�:</text>
- <text class="text-cyan text-bold text-xxl margin-right-xs">{{ $lget(this.model, 'trendVo.moisture') }}%
+ <text class="text-cyan text-bold text-xl margin-right-xs">{{ $lget(this.model, 'trendVo.moisture') }}%
</text>
<text class="text-gray text-df margin-right-xs">鐑:</text>
- <text class="text-cyan text-bold text-xxl margin-right-xs">{{$lget(this.model, 'trendVo.bellowsTemp') }} 鈩�
+ <text class="text-cyan text-bold text-xl margin-right-xs">{{$lget(this.model, 'trendVo.bellowsTemp') }}鈩�
</text>
<view class="scoreBox">
- <text class="text-gray text-sm">鐩爣: <text class="text-green text-xl text-bold">{{$lget(model,'target')}}% </text> </text>
- <text class="text-gray text-sm">鍒濆: <text class="text-gray text-xl text-bold">{{$lget(model,'initial')}}% </text></text>
-
+ <text class="text-gray text-sm">鐩爣: <text
+ class="text-green text-xl text-bold">{{$lget(model,'target')}}% </text> </text>
+ <text class="text-gray text-sm">鍒濆: <text
+ class="text-gray text-xl text-bold">{{$lget(model,'initial')}}% </text></text>
+
<!-- <view class="text-yellow text-xs flex justify-around">
<uni-text class="text-yellow cuIcon-favorfill"></uni-text>
<uni-text class="text-yellow cuIcon-favorfill"></uni-text>
@@ -212,7 +221,7 @@
<view class="h-td">骞茬嚗鏃堕棿</view>
</view>
<view class="h-tr h-tr-2">
- <view class="h-td">{{$lget(model,'envTemp') == "" ? "--" : $lget(model,'envTemp')}}鈩�</view>
+ <view class="h-td">{{$lget(model,'envTemp') == "" ? "--" : $lget(model,'envTemp')}}鈩�</view>
<view class="h-td">{{$lget(model,'envHum') == "" ? "--" :$lget(model,'envHum') }}%</view>
<view class="h-td">{{$lget(model,'windTemp')}}鈩�</view>
<view class="h-td">{{$lget(model,'delay')}}ms</view>
@@ -342,7 +351,8 @@
</view>
</view>
<view class="chartsMain">
- <qiun-data-charts type="area" :opts="opts" :animation="false" :canvas2d="true" :ontouch="true" :chartData="chartData" />
+ <qiun-data-charts type="area" :opts="opts" :animation="false" :canvas2d="true" :ontouch="true"
+ :chartData="chartData" />
</view>
@@ -371,7 +381,8 @@
dataLabel: false,
dataPointShape: false,
enableScroll: false,
- legend: {},
+ legend: {},
+ update:true,
xAxis: {
disableGrid: true,
labelCount: 6
@@ -393,13 +404,13 @@
model: {},
queryParam: {
machineid: "GM001",
- tenantid: 1000
+ tenantid: 1003
},
bannerList: [{
- imageUrl: 'https://dev.shlanbao.cn:9999/fileTransfer/preview?userFileId=1640616151832784896&isMin=false&shareBatchNum=&extractionCode='
+ imageUrl: '../../static/image/zcy_gzj1.png'
},
{
- imageUrl: 'https://dev.shlanbao.cn:9999/fileTransfer/preview?userFileId=1640617395255177216&isMin=false&shareBatchNum=&extractionCode='
+ imageUrl: '../../static/image/zcy_gzj1.png'
}
]
@@ -420,6 +431,7 @@
},
+
onLoad(e) {
},
@@ -431,16 +443,16 @@
console.info(this.$monitorTimer)
},
onUnload() {
-
+
},
mounted() {
},
onReady() {
- //this.getServerData()
+ //this.getServerData()
},
- methods: {
+ methods: {
getServerData() {
//妯℃嫙浠庢湇鍔″櫒鑾峰彇鏁版嵁鏃剁殑寤舵椂
setTimeout(() => {
@@ -465,66 +477,68 @@
}, 500);
},
-
+ /**
+ * 缁勫缓鏁版嵁
+ */
createData() {
//娓╁害鏁版嵁 10s涓�娆�
let bellowsTemp = this.$lget(this.model, 'bellowsTemp');
- //绉伴噸鏁版嵁 锛堥噸閲忋�佹箍搴︼級
+ //绉伴噸鏁版嵁 锛堥噸閲忋�佸惈姘寸巼锛�
let detailList = this.$lget(this.model, 'detailList');
if (!bellowsTemp) return;
let wmap = {} //鍙栧嚭鎵�鏈夐噸閲忔暟鎹�
let mmap = {} //鍙栧嚭鎵�鏈夋俯搴︽暟鎹�
let minW = null; //绗竴涓噸閲忔暟鎹�
- let minM = null; //绗竴涓俯搴︽暟鎹�
+ let minM = null; //绗竴涓俯搴︽暟鎹�
let maxW = null; //鏈�鍚庝竴涓噸閲忔暟鎹�
let maxM = null; //鏈�鍚庝竴涓俯搴︽暟鎹�
- //鍙栧嚭閲嶉噺鍜屾箍搴︽暟鎹�
+ //鍙栧嚭閲嶉噺鍜屽惈姘寸巼鏁版嵁
if (detailList && detailList.length > 0) {
for (var i = 0; i < detailList.length; i++) {
- let item = detailList[i]
+ let item = detailList[i]
//姣忎釜鏃堕棿鑺傜偣閲嶉噺鏁版嵁
wmap[item.totalTime] = item.weight
mmap[item.totalTime] = item.moisture
if (i == 0) {
minW = item.weight
minM = item.moisture
- }
- if (i == (detailList.length - 1)) {
- maxW = item.weight
- maxM = item.moisture
+ }
+ if (i == (detailList.length - 1)) {
+ maxW = item.weight
+ maxM = item.moisture
}
}
}
let tList = [] //娓╁害
let wList = [] //閲嶉噺
- let mList = [] //婀垮害
+ let mList = [] //鍚按鐜�
let xList = [] //xAxis
- //鏍规嵁娓╁害鏁版嵁闀垮害锛岀敓鎴恱杞淬�侀噸閲忓拰婀垮害鏁扮粍绛�
+ //鏍规嵁娓╁害鏁版嵁闀垮害锛岀敓鎴恱杞淬�侀噸閲忓拰鍚按鐜囨暟缁勭瓑
for (let key in bellowsTemp) {
//console.log(key + '---' + bellowsTemp[key])
- tList.push(bellowsTemp[key])
- wList.push(wmap[key] || null)
- mList.push(mmap[key] || null)
- xList.push(key)
- }
- //濉厖铏氭嫙鏁版嵁 TODO 鍒犻櫎
- // for(let i = 1 ; i <= 10 ; i++){
- // tList.push(i*2)
- // wList.push(i*100)
- // mList.push(i*10)
- // xList.push(i)
- // }
-
- //d绗竴涓暟鎹负绌� 璁剧疆涓虹涓�娆＄О閲嶆暟鎹紙娌℃湁绉伴噸鏁版嵁鍒欒缃负0锛�
- if (!wList[0]) {
- wList[0] = minW||0
- }
-
-
- if (!mList[0]) {
- mList[0] = minM||0
- }
-
+ tList.push(bellowsTemp[key])
+ wList.push(wmap[key] || null)
+ mList.push(mmap[key] || null)
+ xList.push(key)
+ }
+ //濉厖娴嬭瘯鏁版嵁 TODO 鍒犻櫎
+ // for(let i = 1 ; i <= 10 ; i++){
+ // tList.push(i*2)
+ // wList.push(i*100)
+ // mList.push(i*10)
+ // xList.push(i)
+ // }
+
+ //绗竴涓暟鎹负绌� 璁剧疆涓虹涓�娆＄О閲嶆暟鎹紙娌℃湁绉伴噸鏁版嵁鍒欒缃负0锛�
+ if (!wList[0]) {
+ wList[0] = minW || 0
+ }
+
+
+ if (!mList[0]) {
+ mList[0] = minM || 0
+ }
+
//鏈�鍚庝竴涓暟鎹负绌� 璁剧疆涓烘渶鍚庝竴娆＄О閲嶆暟鎹�
if (!wList[wList.length - 1]) {
wList[wList.length - 1] = maxW
@@ -543,7 +557,7 @@
connectNulls: true,
color: '#facc14'
}, {
- name: '婀垮害',
+ name: '鍚按',
data: mList,
connectNulls: true,
color: '#2fc25b'
@@ -553,19 +567,21 @@
color: '#1890ff'
}]
- console.error(wmap)
- console.error(mmap)
- console.error("============")
- console.error(wList)
- console.error(mList)
- console.error(tList)
+ // console.error(wmap)
+ // console.error(mmap)
+ // console.error("============")
+ // console.error(wList)
+ // console.error(mList)
+ // console.error(tList)
let res = {
categories: xList,
series: series
}
this.chartData = JSON.parse(JSON.stringify(res));
},
-
+ /**
+ * 鑾峰彇瀹炴椂鏁版嵁
+ */
getRealData() {
this.$api.getRealTimeData(this.queryParam).then((res) => {
if (res.success) {
@@ -587,7 +603,7 @@
computed: {
//杩愯鐘舵��
runStatu() {
- let stop = this.$lget(this.model, 'result.stop');
+ let stop = this.$lget(this.model, 'stop');
return !stop
},
@@ -619,10 +635,11 @@
return formula
},
//骞茬嚗寮�濮嬫椂闂�
- startTime() {
- if (this.model && this.model.detailList) {
- if (this.model.detailList.length > 0) {
- return this.model.detailList[0].tim
+ startTime() {
+ let detailList = this.$lget(this.model, 'detailList')
+ if (detailList) {
+ if (detailList.length > 0) {
+ return detailList[0].tim
}
}
return ""
@@ -719,4 +736,15 @@
width: 100%;
height: 300px;
}
-</style>
+
+ .nav {
+ background-color: white;
+ width: 100%;
+ height: 200px;
+
+ image {
+ width: 100%;
+ height: 100%;
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3