From 4434c41562f18959967a957f09c795f0c24f3b70 Mon Sep 17 00:00:00 2001
From: 朱桂飞 <18597012158>
Date: 星期三, 22 三月 2023 10:11:16 +0800
Subject: [PATCH] commit
---
pages/tabBar/monitor.vue | 240 +++++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 212 insertions(+), 28 deletions(-)
diff --git a/pages/tabBar/monitor.vue b/pages/tabBar/monitor.vue
index 491fdd0..2326c22 100644
--- a/pages/tabBar/monitor.vue
+++ b/pages/tabBar/monitor.vue
@@ -43,7 +43,7 @@
<view class="text-gray margin-top-xs">
<text class="margin-right-xs">鎶曟枡:</text>
- <text>{{$lget(model,'feed')}}妗�</text>
+ <text>{{$lget(model,'feed')}}绛�</text>
</view>
<!-- <view class="margin-tb-sm" style="position: relative;">
@@ -61,7 +61,8 @@
<text class="text-cyan text-bold text-xxl 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.wind') }} 鈩� </text>
+ <text class="text-cyan text-bold text-xxl margin-right-xs">{{$lget(this.model, 'trendVo.bellowsTemp') }} 鈩�
+ </text>
<view class="scoreBox">
@@ -321,8 +322,20 @@
</view>
-->
- <view style="height: 20rpx; width: 1rpx;"></view>
+ <view class="cu-bar bg-white margin-top-xs">
+ <view class="action sub-title">
+ <text class="text-xl text-bold text-blue text-shadow">瀹炴椂鐩戞帶</text>
+ <text class="text-ABC text-blue"></text>
+ </view>
+ </view>
+ <view class="chartsMain">
+ <qiun-data-charts type="area" :opts="opts" :canvas2d="true" :ontouch="true" :chartData="chartData" />
+ </view>
+
+
+
+ <view style="height: 20rpx; width: 1rpx;"></view>
</view>
@@ -330,9 +343,40 @@
<script>
import get from 'lodash.get'
+ // 鍥捐〃
+ import uCharts from "@/components/u-charts/u-charts.js";
+ var _self;
+ var canvaArea = null;
export default {
data() {
return {
+ chartData: {},
+ opts: {
+ color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+ "#ea7ccc"
+ ],
+ padding: [15, 10, 0, 15],
+ dataLabel: false,
+ dataPointShape: false,
+ enableScroll: false,
+ legend: {},
+ xAxis: {
+ disableGrid: true,
+ labelCount: 6
+ },
+ yAxis: {
+ gridType: "dash",
+ dashLength: 2,
+ },
+ extra: {
+ line: {
+ type: "curve",
+ width: 2,
+ activeType: "hollow",
+ linearType: "custom"
+ }
+ }
+ },
notice: "2023-03-1812:00:001鍙锋満鍙颁綆娓╂姤璀�",
timer: null,
model: {},
@@ -347,22 +391,25 @@
imageUrl: '/static/image/equ1.png'
}
]
+
+
}
},
- onLoad(option) {},
onShow() {
- var that = this;
console.info("鐩戞帶椤甸潰鏄剧ず")
- this.getRealData(this)
- if (!that.timer) {
- that.timer = setInterval(function() {
+ this.getRealData()
+ if (!this.timer) {
+ this.timer = setInterval(() => {
console.info("瀹氭椂鍣ㄥ伐浣�")
- console.info(that.timer)
- that.getRealData(that)
+ console.info(this.timer)
+ this.getRealData()
}, 1000 * 12)
}
+
+ },
+ onLoad(e) {
},
onHide() {
@@ -377,32 +424,148 @@
mounted() {
},
- methods: {
+ onReady() {
+ //this.getServerData()
- getRealData(that) {
- console.info(that)
- that.$api.getRealTimeData(this.queryParam).then((res) => {
+ },
+ methods: {
+ getServerData() {
+ //妯℃嫙浠庢湇鍔″櫒鑾峰彇鏁版嵁鏃剁殑寤舵椂
+ setTimeout(() => {
+ let res = {
+ categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
+ series: [{
+ name: "鎴愪氦閲廇",
+ data: [35, 8, null, 37, 4, 20]
+ },
+ {
+ name: "鎴愪氦閲廈",
+ connectNulls: true,
+ data: [70, 40, null, 100, 44, 68]
+ },
+ {
+ name: "鎴愪氦閲廋",
+ data: [100, 80, null, 150, 112, 132]
+ }
+ ]
+ };
+ this.chartData = JSON.parse(JSON.stringify(res));
+ }, 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 maxW = null; //鏈�鍚庝竴涓噸閲忔暟鎹�
+ let maxM = null; //鏈�鍚庝竴涓俯搴︽暟鎹�
+ //鍙栧嚭閲嶉噺鍜屾箍搴︽暟鎹�
+ if (detailList && detailList.length > 0) {
+ for (var i = 0; i < detailList.length; 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
+ }
+ }
+ }
+ let tList = [] //娓╁害
+ let wList = [] //閲嶉噺
+ 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
+ }
+
+ //鏈�鍚庝竴涓暟鎹负绌� 璁剧疆涓烘渶鍚庝竴娆＄О閲嶆暟鎹�
+ if (!wList[wList.length - 1]) {
+ wList[wList.length - 1] = maxW
+ }
+
+ if (!mList[mList.length - 1]) {
+ mList[mList.length - 1] = maxM
+ }
+ // let weightList = detailList.map(item => {
+ // return {type: item.weight, data: []}
+ // })
+
+ let series = [{
+ name: '閲嶉噺',
+ data: wList,
+ connectNulls: true,
+ color: '#facc14'
+ }, {
+ name: '婀垮害',
+ data: mList,
+ connectNulls: true,
+ color: '#2fc25b'
+ }, {
+ name: '娓╁害',
+ data: tList,
+ color: '#1890ff'
+ }]
+
+ 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) {
this.model = res.result
+ //鍒涘缓鍥捐〃鏁版嵁
+ this.createData()
}
}).catch((err) => {
console.log('request fail', err);
})
},
- getData(id) {
- let opts = {
- url: 'api/circle.Areas/info',
- method: 'get'
- };
- let params = {
- "circle_areas_id": id,
- }
- uni.showLoading({
- title: '鍔犺浇涓�'
- })
-
- },
goBack() {
uni.navigateBack({
delta: 1
@@ -430,6 +593,7 @@
},
+ //閰嶆柟鍚嶇О
formulaName() {
let name = this.$lget(this.model, 'herbName')
let code = this.$lget(this.model, 'code')
@@ -451,7 +615,7 @@
}
return ""
},
-
+
}
}
</script>
@@ -523,4 +687,24 @@
color: #888;
display: block;
}
+
+ .chartsMain {
+ width: 750rpx;
+ height: 450rpx;
+ padding-top: 15rpx;
+ background: #fff;
+ margin-bottom: 24rpx;
+ border-top: 2rpx solid #f2f2f2;
+
+ .charts {
+ width: 750rpx;
+ height: 450rpx;
+ box-sizing: border-box;
+ }
+ }
+
+ .charts-box {
+ width: 100%;
+ height: 300px;
+ }
</style>
--
Gitblit v1.9.3