aiot-app/pages/home/pages/sparePart/sparePart.vue

<template>
  <!-- 备品备件 -->
  <view class="">
    <Charts></Charts>
    <view class="box-bar">
      <view class="title">
        <image src="@/static/u24.svg" class="icon" mode=""></image>
        <view class="text"> 备品备件实时库存 </view>
      </view>
      <template v-if="order_list.length > 0">
        <view
          class="order-list"
          v-for="(item, index) in order_list"
          :key="index"
        >
          <view class="s1 item">
            <view class="b1">
              {{ item.assetName }}
            </view>
            <view class="b2">
              {{ item.inventorySum }}
            </view>
          </view>
          <view class="s2 item">
            <view class="b1">
              {{ item.assetType && item.assetType.descp }}
            </view>
            <view class="b2">
              {{ item.modelType }}
            </view>
          </view>
          <view class="s3 item">
            <view class="b1">
              {{ item.warehouseName }}
            </view>
            <view class="b2"> </view>
          </view>
        </view>
      </template>
      <view class="u-empty" v-else>
        <u-empty mode="data"> </u-empty>
      </view>
    </view>
  </view>
</template>

<script>
import Charts from './components/Charts.vue'
import { get } from '@/utils/api.js'
export default {
  components: {
    Charts
  },
  data () {
    return {
      order_list: []
    }
  },
  created () {
    // this.getData()
  },
  methods: {
    getData () {
      get(
        this.apiUrl + '/home/page/sparepart/sparePartInventoryCountList'
      ).then(res => {
        if (res.success) {
          this.order_list = res.data.records
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.u-empty {
  padding: 30rpx;
}
.box-bar {
  background-color: #fff;
  margin-top: 20rpx;

  .title {
    display: flex;
    padding: 20rpx;
    align-items: center;

    .text {
      font-size: 32rpx;
      color: #333333;
    }

    .icon {
      width: 37rpx;
      height: 37rpx;
      margin-right: 10rpx;
    }
  }
}

.order-list {
  background-color: #fff;

  & + .order-list {
    border-top: 1px solid #f2f2f2;
  }

  padding: 15rpx;

  .item {
    font-size: 28rpx;
    color: rgb(170, 170, 170);
    display: flex;
    justify-content: space-between;

    & + .item {
      margin-top: 15rpx;
    }

    &.s1 {
      .b1 {
        color: #333333;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
  }
}
</style>