baozhida-deliver-medicine/src/components/mobileHumiture.vue

<template>
  <div>
    <!-- <div class="probe_card_mobile" v-if="probeList.length > 0">
      <el-radio-group v-model="tabPosition" @change="tabClick">
        <el-radio-button :label="item.T_id" v-for="(item,index) in probeList"
          :key="index">{{item.T_name}}</el-radio-button>
      </el-radio-group>
    </div> -->
    <div class="mobile_humiture" v-if="tableData.length > 0">
      <div class="card_humiture">
        <div class="headline_item w_wsd">温度(°C)</div>
        <div class="headline_item w_wsd">湿度(Rh)</div>
        <div class="headline_item w_time">时间</div>
      </div>
      <div class="card_humiture" v-for="(item,index) in tableData" :key="index">
        <div class="title_item w_wsd">{{item.T_t || ''}}</div>
        <div class="title_item w_wsd">{{item.T_rh || ''}}</div>
        <div class="title_item w_time">{{item.T_time || ''}}</div>
      </div>
      <div style="width: 100%;">
        <el-pagination layout="prev, pager, next" :total="Total" @current-change="currentChange"></el-pagination>
      </div>
    </div>
    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
  </div>
</template>

<script>
  import {
    waybillTaskData,
  } from '@/api/waybillLogistics'
  export default {
    name: 'mobileHumiture',
    props: {
      // taskId
      taskId: {
        type: Number,
        default: () => null,
      },
      // 探头列表
      probeList: {
        type: Array,
        default: () => [],
      },
      waybillNo: {
        type: String,
        default: () => '',
      }
    },
    data() {
      return {
        dataList: [],
        tabPosition: 1,
        tableData: [],
        Pagination: {
          page: 1,
          pageSize: 10,
        },
        Total: 0,
        tIds: [],
      }
    },
    watch: {
      probeList: {
        handler(newVal) {
          if (newVal.length > 0) {
            this.tabPosition = newVal[0].T_id
            this.tIds = []
            this.tIds.push(newVal[0].T_id)
          }
        },
        immediate: true,
        deep: true // 开启深度监听
      }
    },
    mounted() {},
    methods: {
      tabClick(value) {
        this.tIds = []
        this.tIds.push(value)
        this.getHumitureList()
      },
      // 获取温湿度记录列表
      getHumitureList() {
        let params = {
          t_ids: this.tIds,
          taskId: this.taskId,
          waybillNo: this.waybillNo,
          ...this.Pagination
        }
        waybillTaskData(params).then(res => {
          if (res.code == 200) {
            if (res.data.list) {
              this.tableData = res.data.list
              this.Total = res.data.count
            }
          }
        })
      },
      // 分页
      currentChange(value) {
        this.Pagination.page = value
        this.getHumitureList()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .probe_card_mobile {
    margin-left: 10px;
    margin-top: 10px;
    display: flex;
  }

  .probe_card_mobile ::v-deep .el-radio-button__inner {
    padding: 10px 15px !important;
  }

  .mobile_humiture {
    margin: 10px 0px;
  }

  .card_humiture {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 0px;
    margin-bottom: 5px;
    border-bottom: 1px solid #EBEEF5 !important;
  }

  .headline_item {
    font-size: 14px;
    font-weight: 600;
  }

  .title_item {
    font-size: 15px
  }

  .w_wsd {
    text-align: center;
    width: 27%;
  }

  .w_time {
    text-align: center;
    width: 46%;
  }
</style>