bigDataApp/pages/cb/shuifeizsFirst/components/irrigatedArea.vue

<template>
  <view class="irrigated-area">
    <view class="irrigated-area-list">
      <view
        class="irrigated-area-item"
        v-for="(item, index) in irrigatedAreaList"
        :key="index"
      >
        <view class="irrigated-area-item-title">
          <view class="irrigated-area-item-title-text">{{
            item.sfDisplayname || item.sfName
          }}</view>
          <view class="irrigated-area-item-title-time"></view>
        </view>
        <view class="irrigated-area-item-content">
          <view
            class="irrigated-area-item-content-item"
            v-for="(i, n) in item.childrenList"
            :key="n"
          >
            <view class="irrigated-area-item-content-item-title">{{
              i.sfDisplayname || i.sfName || '暂无数据'
            }}</view>
            <view class="irrigated-area-item-content-item-icon" v-if="i.sfType != '10'">
              <image
                :src="i.value != '0' ? bucketOpen1 : bucketClose1"
                class="bucket-icon"
              />
            </view>
            <view class="irrigated-area-item-content-item-icon" v-else>
              <image
                :src="i.value == '0' ? bucketStop1 : i.value == '1'? bucketOpen1 : bucketClose1"
                class="bucket-icon"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import bucketOpen1 from '../assets/bucketOpen1.png';
import bucketClose1 from '../assets/bucketClose1.png';
import bucketStop1 from '../assets/bucketStop1.png';

export default {
  props: {
    irrigatedAreaList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      bucketOpen1,
      bucketClose1,
      bucketStop1
    };
  },
  methods: {
    formartDate(date) {
      return date.slice(0, 10);
    },
  },
  components: {},
  mounted() {},
};
</script>
<style scoped lang="scss">
.irrigated-area {
  .irrigated-area-list {
    .irrigated-area-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      background: #F5F6FA;
      margin-bottom: 8rpx;
      .irrigated-area-item-title {
        width: 120rpx;
        .irrigated-area-item-title-text {
          color: #042118;
          text-align: left;
          font-family: 'Source Han Sans CN VF';
          font-size: 24rpx;
          font-weight: 500;
          // 超出隐藏
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .irrigated-area-item-title-time {
          color: #14a478;
          font-family: 'Source Han Sans CN VF';
          font-size: 24rpx;
          font-weight: 500;
          text-align: left;
          margin-top: 8rpx;
          height: 30rpx;
        }
      }
      .irrigated-area-item-content {
        display: flex;
        width: calc(100% - 120rpx);
        justify-content: flex-start;
        flex-wrap:wrap;
        gap:10rpx;
        .irrigated-area-item-content-item {
          width: 20%;
          .irrigated-area-item-content-item-title {
            width: 100%;
            color: #333333;
            font-family: 'Source Han Sans CN VF';
            font-size: 24rpx;
            font-weight: 400;
            margin-bottom: 20rpx;
            // 超出隐藏
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
          }
          .irrigated-area-item-content-item-icon {
            display: flex;
            justify-content: center;
            .bucket-icon {
              width: 24rpx;
              height: 24rpx;
              margin-right: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>