1.添加远程监控页面

朱桂飞

2023-09-07 d053e049522e973391be1dbf51b4aea688b45c20

 pages/tabBar/monitor.vue

@@ -5,8 +5,25 @@
         <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"

@@ -40,20 +57,23 @@


         <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="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;">

@@ -61,14 +81,16 @@
            <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-xl 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>

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

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





@@ -358,7 +381,8 @@
               dataLabel: false,

               dataPointShape: false,

               enableScroll: false,

               legend: {},

               legend: {},
               update:true,

               xAxis: {

                  disableGrid: true,

                  labelCount: 6

@@ -383,10 +407,10 @@
               tenantid: 1000

            },

            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'

               }

            ]



@@ -407,6 +431,7 @@




      },

	
      onLoad(e) {



      },

@@ -418,16 +443,16 @@
         console.info(this.$monitorTimer)

      },

      onUnload() {

		 


      },

      mounted() {



      },

      onReady() {

         //this.getServerData()
         //this.getServerData()



      },

      methods: {

      methods: {
         getServerData() {

            //模拟从服务器获取数据时的延时

            setTimeout(() => {

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

            //根据温度数据长度，生成x轴、重量和湿度数组等

            //根据温度数据长度，生成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
            }
				
               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

@@ -530,7 +557,7 @@
               connectNulls: true,

               color: '#facc14'

            }, {

               name: '湿度',

               name: '含水',

               data: mList,

               connectNulls: true,

               color: '#2fc25b'

@@ -540,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) {

@@ -574,7 +603,7 @@
      computed: {

         //运行状态

         runStatu() {

            let stop = this.$lget(this.model, 'result.stop');

            let stop = this.$lget(this.model, 'stop');

            return !stop



         },

@@ -606,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 ""

@@ -706,4 +736,15 @@
      width: 100%;

      height: 300px;

   }

</style>


   .nav {

      background-color: white;

      width: 100%;

      height: 200px;



      image {

         width: 100%;

         height: 100%;

      }

   }

</style>