aiot-app/pages/maintain_service/order/OrderTask.vue

<template>
  <view class="marginTop">
    <view
      class="list-wrap"
      v-for="(item, index) in list"
      :key="index"
      v-show="list.length !== 0"
      @click="goDetail(item)"
    >
      <view class="item">
        <view class="s1">
          <text class="title">{{ item.workOrderCode }}</text>
        </view>
        <view class="s2">
          {{ item.createTime }}
        </view>
      </view>
      <view class="item">
        <view class="s1"> 设备名称：{{ item.equiName }} </view>
      </view>
      <view class="item">
        <view class="s1"> 设备编码:{{ item.equiCode }} </view>
      </view>
      <view class="item">
        <view class="s1"> 故障描述:{{ item.content }} </view>
      </view>
      <view class="item">
        <view class="s1">
          <view class="state">
            {{ dict.status[item.status.code] }}
          </view>
        </view>
      </view>
      <!-- 			<view class="item">
				<view class="md">
					{{item.workOrderCode}}
				</view>
				<view class="">
					{{item.createTime}}
				</view>
			</view>
			<view class="item">
				<view class="s1">
					设备名称: {{item.equiName}}
				</view>
				<view class="s2">
					设备编码： {{item.equiCode}}
				</view>
			</view>
			<view class="item">
				故障描述 : {{item.content}}
			</view>
			<view class="item">
				计划完成时间: {{item.planFinishTime}}
			</view>
			<view class="item">
				<view class="icon" :class="isClass">
					{{dict.status[item.status.code]}}
				</view>
			</view> -->
    </view>
    <view v-show="list.length === 0" class="no_data">
      <u-empty mode="data"></u-empty>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    type: {
      type: [String, Number]
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      dict: {
        status: {
          0: '待接收',
          1: '执行中',
          2: '待审核',
          3: '完成',
          4: '已撤回',
          5: '待验收',
          6: '已驳回',
          7: '未修复',
          8: '已派单'
        },
        //紧急程度
        urgent: {
          1: '普通',
          2: '紧急',
          3: '重要'
        }
      }
    }
  },
  methods: {
    goDetail (item) {
      uni.navigateTo({
        url: `/pages/maintain_service/detail/detail?id=${item.id}&workOrderCode=${item.workOrderCode}`
      })
    },
    isClass () {
      switch (String(this.type)) {
        case '0':
          return 'd1'
          break
        case '1':
          return 'd2'
          break
        case '3':
          return 'd3'
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.marginTop {
  border-top: 20rpx solid $page-bg;
}

.center {
  text-align: center;
  margin-bottom: 10rpx;
  color: #999;
}

.no_data {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  font-size: 28rpx;
}

.list-wrap {
  padding: 10rpx;
  .item {
    display: flex;
    justify-content: space-between;
    padding: 10rpx;
    color: rgb(170, 170, 170);
    font-size: 28rpx;
    word-break: break-all;
    .title {
      color: #333333;
      font-size: 28rpx;
    }
    .state {
      font-size: 12px;
      color: #7f7f7f;
      background: #f1f1f1;
      display: inline;
      padding: 2px 5px;
      border-radius: 10px;
    }
  }

  & + .list-wrap {
    border-top: 1px solid rgba(242, 242, 242, 1);
  }
}
</style>