aiot-app/pages/equipment_ledger/lot_data/lot_data.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="物联数据"
      @clickLeft="back"
    >
    </uni-nav-bar>
    <uni-section title="物联数据" type="line">
      <view class="mainBox-toinfo">
        <view class="info-left" v-if="realData.status_m">
          运行状态
          <view class="toinfo-status">{{ realData.status_m.value }}</view>
          <view
            class="toinfo-set text-primary"
            @click="toSet"
            v-if="Object.keys(realData).length == 1"
            >设置</view
          >
        </view>
        <template v-if="realData.running_time">
          <view class="info-time">{{ realData.running_time.time }}</view>
          <view class="info-time"
            >{{ realData.running_time.value
            }}{{ parentClassId == '57' ? '' : '分钟' }}</view
          >
        </template>
      </view>

      <!-- 挤压机 65 -->
      <InternetExtruder
        :info="info"
        :realData.sync="realData"
        :key="Object.entries(realData).length + 1"
        v-if="parentClassId == '65'"
      />
      <!-- 干燥箱 57 -->
      <InternetDryingBox
        :info="info"
        :realData.sync="realData"
        :key="Object.entries(realData).length"
        v-else-if="parentClassId == '57'"
      />
      <view class="info-view">
        <view
          class="items"
          v-for="[key, obj] in Object.entries(realData)"
          :key="key"
        >
          <!-- 过滤掉运行状态 -->
          <template v-if="!['status', 'status_m'].includes(key)">
            <text class="label">{{ obj.name }}</text
            >{{ obj.value }}{{ obj.unit }}
          </template>
        </view>
      </view>
    </uni-section>

    <!-- 设置弹窗 -->
    <Popu ref="popuRef" @change="changeStatus" />
  </view>
</template>

<script>
import InternetDryingBox from './components/InternetDryingBox'
import InternetExtruder from './components/InternetExtruder'
import Popu from '@/pages/equipment_ledger/components/Popu.vue'
import { get, postJ } from '@/utils/api.js'
export default {
  components: {
    Popu,
    InternetExtruder,
    InternetDryingBox
  },
  data () {
    return {
      status: '运行',
      chartData: {
        categories: [],
        series: []
      },
      info: {},
      dict: {
        // 运行状态
        status: {
          //0-停止,1-启动,2-定值停止,3-定值启动
          0: '停止',
          1: '启动',
          2: '定值停止',
          3: '定值启动'
        }
      },
      // 实时数据
      realData: {}
    }
  },
  onLoad (option) {
    this.info = JSON.parse(decodeURIComponent(option.info))
    this.getRealData()
  },
  computed: {
    parentClassId () {
      const data = JSON.parse(this.info.information.classificationUrlId) || []
      return data[1]
    }
  },
  methods: {
    toSet () {
      this.$refs.popuRef.open()
    },
    changeStatus (item) {
      let par = {
        id: this.info.id,
        status: item.value
      }
      postJ(
        this.apiUrl + `/asset/updateStatus?id=${par.id}&status=${par.status}`,
        par
      ).then(res => {
        if (res?.success) {
          uni.showToast({
            title: '设置成功！',
            icon: 'success'
          })
          this.getRealData()
        }
      })
    },

    // 请求实时数据
    async getRealData () {
      await get(this.apiUrl + `/asset/getRealEqu/${this.info.id}`).then(res => {
        let order = [
          'temp',
          'o_temp',
          'temp1',
          'temp2',
          'temp3',
          'temp4',
          'running_time',
          'remain_time'
        ]
        let data = res.data.sort((a, b) => {
          return order.indexOf(a.identifier) - order.indexOf(b.identifier)
        })
        for (const item of data) {
          this.$set(this.realData, item.identifier, item)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.mainBox {
  .mainBox-toinfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    background: #ccc;
    padding: 16rpx 10rpx;
    .info-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #000;
      font-weight: bold;
      font-size: 28rpx;
      line-height: 40rpx;
      .toinfo-status {
        width: 80rpx;
        height: 40rpx;
        line-height: 40rpx;
        background: #47975a;
        border-radius: 18rpx;
        color: #fff;
        text-align: center;
        font-weight: normal;
        font-size: 20rpx;
        margin: 0 10rpx;
      }
    }
    .info-time {
      font-size: 30rpx;
    }
  }

  .info-view {
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 30rpx;

    .items {
      width: 50%;
      font-size: $uni-font-size-sm;
      color: #3e3e3e;
      margin-bottom: 20rpx;
      display: flex;
      .label {
        display: inline-block;
        width: 180rpx;
        text-align: right;
        padding-right: 15rpx;
        font-weight: bold;
        color: #6e6e6e;
      }
    }
  }
}
</style>