分支自 mobile/lbdry-uniapp
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,235 @@ <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: {}, update:true, 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 tenantid: 1003 }, bannerList: [{ imageUrl: '/static/image/equ1.png' imageUrl: '../../static/image/zcy_gzj1.png' }, { imageUrl: '/static/image/equ1.png' imageUrl: '../../static/image/zcy_gzj1.png' } ] } }, 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: "成交量A", data: [35, 8, null, 37, 4, 20] }, { name: "成交量B", connectNulls: true, data: [70, 40, null, 100, 44, 68] }, { name: "成交量C", 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 //根据温度数据长度，生成x轴、重量和含水率数组等 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 +603,7 @@ computed: { //运行状态 runStatu() { let stop = this.$lget(this.model, 'result.stop'); let stop = this.$lget(this.model, 'stop'); return !stop }, @@ -430,6 +621,7 @@ }, //配方名称 formulaName() { let name = this.$lget(this.model, 'herbName') let code = this.$lget(this.model, 'code') @@ -443,15 +635,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 +716,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>
