bigdata_WX/pages/cbd/components/pestDiscern.vue

<template>
  <view class="pest-discern" v-if="pests.length">
    <view class="pest-discern__header">
      <view class="pest-discern__title">
        虫害识别
      </view>
    </view>
    <view class="pest-discern__content">
      <view class="pest-discern__item" v-for="(item,index) in pests" :key="index">
        <view class="pest-discern__item-title">
          {{ item.name }}
        </view>
        <view class="pest-discern__item-content">
          <u-line-progress :active-color="item.color" :percent="item.percent" :show-percent="false" height="8"></u-line-progress>
        </view>
        <view class="pest-discern__item-count">
          {{ item.count }}
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0
    },
    pest_order: {
      type: Object,
      default: () => ({})
    }
  },
  watch:{
    pest_order:{
      handler(val){
        this.pests = [];
        let index = 0;
        for(let key in val){
          index++;
          this.pests.push({
            color: this.colors[index],
            name: key,
            count: val[key] || 0,
            percent: (val[key] / this.total) * 100
          })
        }
      },
      deep: true
    }
  },
  data() {
    return {
      colors:[
        '#FF5951',
        '#66EDED',
        '#E67B3E',
        '#6DE28B',
        '#FFC97A',
        '#E7EB4B',
        '#1561F3',
        '#FA73F5',
        '#159AFF',
        '#FA73F5'
      ],
      pests: []
    }
  }
}
</script>
<style lang="scss" scoped>
.pest-discern {
  width: 100%;
  padding: 32rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 16rpx;
}
.pest-discern__header {
  padding: 0rpx 0rpx 20rpx 0rpx;
  font-size: 32rpx;
  color: #042118;
  font-family: 'Source Han Sans CN VF';
  font-weight: 700;
}
.pest-discern__title {
  font-size: 28rpx;
  color: #042118;
  font-family: 'Source Han Sans CN VF';
  font-weight: 500;
}
.pest-discern__item {
  display: flex;
  width: 100%;
  margin-bottom: 20rpx;
  align-items: center;
  .pest-discern__item-title{
    width: 120rpx;
    font-size: 28rpx;
    color: #042118;
    font-family: 'Source Han Sans CN VF';
    font-weight: 400;
    // 超出隐藏
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pest-discern__item-content{
    flex: 1;
    margin: 0 20rpx;
  }
  .pest-discern__item-count{
    width: 80rpx;
    font-size: 28rpx;
    color: #042118;
    text-align: right;
  }
}
</style>