commit

朱桂飞

2023-03-22 4434c41562f18959967a957f09c795f0c24f3b70

 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: "成交量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)
            // }
				
            //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')

@@ -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>