From e86013cd8d4b88ca916067b01eeb452401b38c7b Mon Sep 17 00:00:00 2001
From: 朱桂飞 <18597012158>
Date: 星期二, 11 四月 2023 14:46:00 +0800
Subject: [PATCH] 修改首页草药名称过长UI错乱问题
---
pages/tabBar/monitor.vue | 351 +++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 287 insertions(+), 64 deletions(-)
diff --git a/pages/tabBar/monitor.vue b/pages/tabBar/monitor.vue
index 491fdd0..3b80b2e 100644
--- a/pages/tabBar/monitor.vue
+++ b/pages/tabBar/monitor.vue
@@ -1,22 +1,36 @@
<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"
interval="3500" duration="600">
<swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index">
<view class="swiper-item uni-bg-red">
- <image class="swiper-img" :src="item.imageUrl" mode="aspectFill"></image>
+ <image class="swiper-img" :src="item.imageUrl" mode="aspectFit"></image>
</view>
</swiper-item>
</swiper>
@@ -31,9 +45,9 @@
<view class='bg-orange cu-tag radius light sm margin-right-xs' v-else>鍋滄</view>
<!-- <view class='bg-cyan cu-tag radius light sm'>姝ｅ父</view> -->
</view>
- <view class="text-black text-df flex">
- <text class="margin-right-xs">閰嶆柟鍚嶇О:</text>
- <text>{{ formulaName }} </text>
+ <view class="text-black text-df flex align-center">
+ <text class="margin-right-xs">鎵规:</text>
+ <text>{{ this.$lget(this.model,'code') }} </text>
</view>
<view class="text-gray margin-top-xs">
@@ -43,32 +57,40 @@
<view class="text-gray margin-top-xs">
<text class="margin-right-xs">鎶曟枡:</text>
- <text>{{$lget(model,'feed')}}妗�</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.wind') }} 鈩� </text>
+ <text class="text-cyan text-bold text-xl margin-right-xs">{{$lget(this.model, 'trendVo.bellowsTemp') }}鈩�
+ </text>
<view class="scoreBox">
- <text class="text-green text-xl text-bold">{{$lget(model,'target')}}%<text
- class="text-gray text-sm">/鐩爣</text> </text>
- <text class="text-gray text-xl text-bold">{{$lget(model,'initial')}}%<text
- class="text-gray text-sm">/鍒濆</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>
@@ -199,8 +221,8 @@
<view class="h-td">骞茬嚗鏃堕棿</view>
</view>
<view class="h-tr h-tr-2">
- <view class="h-td">{{$lget(model,'envTemp')}}鈩�</view>
- <view class="h-td">{{$lget(model,'envHum')}}%</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>
<view class="h-td">{{$lget(model,'et')}}min</view>
@@ -321,8 +343,21 @@
</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" :animation="false" :canvas2d="true" :ontouch="true"
+ :chartData="chartData" />
+ </view>
+
+
+
+ <view style="height: 20rpx; width: 1rpx;"></view>
</view>
@@ -330,79 +365,234 @@
<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: {},
queryParam: {
machineid: "GM001",
tenantid: 1000
},
bannerList: [{
- imageUrl: '/static/image/equ1.png'
+ imageUrl: 'https://dev.shlanbao.cn:9999/fileTransfer/preview?userFileId=1640616151832784896&isMin=false&shareBatchNum=&extractionCode='
},
{
- imageUrl: '/static/image/equ1.png'
+ imageUrl: 'https://dev.shlanbao.cn:9999/fileTransfer/preview?userFileId=1640617395255177216&isMin=false&shareBatchNum=&extractionCode='
}
]
+
+
}
},
- onLoad(option) {},
onShow() {
- var that = this;
console.info("鐩戞帶椤甸潰鏄剧ず")
- this.getRealData(this)
- if (!that.timer) {
- that.timer = setInterval(function() {
+ this.getRealData()
+ if (!this.$monitorTimer) {
+ this.$monitorTimer = setInterval(() => {
console.info("瀹氭椂鍣ㄥ伐浣�")
- console.info(that.timer)
- that.getRealData(that)
+ console.info(this.$monitorTimer)
+ this.getRealData()
}, 1000 * 12)
}
},
+
+ onLoad(e) {
+
+ },
onHide() {
- clearInterval(this.timer)
+ clearInterval(this.$monitorTimer)
+ this.$monitorTimer = null
console.info("鐩戞帶椤甸潰闅愯棌")
console.info("瀹氭椂鍣ㄥ仠姝�")
- console.info(this.timer)
+ console.info(this.$monitorTimer)
},
onUnload() {
- clearInterval(this.timer)
+
},
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)
+ // }
+
+ //绗竴涓暟鎹负绌� 璁剧疆涓虹涓�娆＄О閲嶆暟鎹紙娌℃湁绉伴噸鏁版嵁鍒欒缃负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
@@ -412,7 +602,7 @@
computed: {
//杩愯鐘舵��
runStatu() {
- let stop = this.$lget(this.model, 'result.stop');
+ let stop = this.$lget(this.model, 'stop');
return !stop
},
@@ -430,6 +620,7 @@
},
+ //閰嶆柟鍚嶇О
formulaName() {
let name = this.$lget(this.model, 'herbName')
let code = this.$lget(this.model, 'code')
@@ -443,15 +634,16 @@
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 ""
},
-
+
}
}
</script>
@@ -523,4 +715,35 @@
color: #888;
display: block;
}
-</style>
+
+ .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;
+ }
+
+ .nav {
+ background-color: white;
+ width: 100%;
+ height: 200px;
+
+ image {
+ width: 100%;
+ height: 100%;
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3