bigdata_WX/pages/cb/wenshidp/components/element.vue

<template>
  <view class="element">
    <view class="element-header">
      <view class="element-title">{{ title }}</view>
      <view class="element-status" v-if="!sensorList">
        2024-01-25 16:05:05
        <u-icon name="reload" color="#14A478" style="margin-left: 20rpx" />
      </view>
    </view>
    <view class="element-body">
      <view class="element-row" v-for="(item, index) in displayList" :key="index">
        <image :src="item.url" class="element-col-icon" />
        <view class="element-col">
          <view class="element-col-title"
            >{{ item.content }}
            <text class="unit">{{ item.unit }}</text>
          </view>
          <view class="element-col-content">{{ item.title }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>

export default {
  name: 'Element',
  props: {
    // status 接口返回的 sensor_list，为空时展示内置示例
    sensorList: {
      type: Array,
      default: null,
    },
    title: {
      type: String,
      default: '1号环控',
    },
  },
  computed: {
    displayList() {
      if (!this.sensorList || !this.sensorList.length) {
        return this.list;
      }
      return this.sensorList.map((item) => {
        // 取形如 SensorDev00:Temp 的遥测 key 对应的值
        const key = Object.keys(item).find((k) =>
          /^SensorDev\d+:\w+$/.test(k)
        );
        const val = key ? item[key] : null;
        return {
          title: item.display_name || '',
          unit: item.unit || '',
          content: val == null ? '--' : val,
          url: this.iconByName(item.display_name),
        };
      });
    },
  },
  data() {
    return {
      list: [
        {
          url: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/sensor_temp.png',
          title: '空气温度',
          unit: '℃',
          content: '12',
        },
        {
          url: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/sensor_humidity.png',
          title: '空气湿度',
          unit: '%',
          content: '80',
        },
        {
          url: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/sensor_soil_temp.png',
          title: '土壤温度',
          unit: '℃',
          content: '80',
        },
        {
          url: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/sensor_soil_humidity.png',
          title: '土壤湿度',
          unit: '%',
          content: '80',
        },
        {
          url: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/sensor_co2.png',
          title: '二氧化碳',
          unit: 'ppm',
          content: '80',
        },
        {
          url: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/sensor_sun.png',
          title: '光照',
          unit: 'LUX',
          content: '80',
        },
        {
          url: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/sensor_ph.png',
          title: '土壤PH值',
          unit: '',
          content: '80',
        },
      ],
    };
  },
  methods: {
    // 按传感器名称匹配图标
    iconByName(name) {
      const n = String(name || '');
      if (n.includes('土壤') && n.includes('湿')) {
        return 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/sensor_soil_humidity.png';
      }
      if (n.includes('土壤')) {
        return 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/sensor_soil_temp.png';
      }
      if (n.includes('湿')) {
        return 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/sensor_humidity.png';
      }
      if (n.includes('二氧化碳')) {
        return 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/sensor_co2.png';
      }
      if (n.includes('光照') || n.includes('亮度')) {
        return 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/sensor_sun.png';
      }
      if (n.toLowerCase().includes('ph')) {
        return 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/sensor_ph.png';
      }
      return 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/sensor_temp.png';
    },
  },
};
</script>
<style lang="less" scoped>
.element {
  .element-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    color: #042118;
    font-family: 'Source Han Sans CN VF';
    font-size: 28rpx;
    font-weight: 700;
    .element-status {
      color: #687a74;
      text-align: center;
      font-family: 'Source Han Sans CN VF';
      font-size: 28rpx;
      font-weight: 400;
    }
  }
  .element-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20rpx;
    padding: 20rpx;
    .element-row {
      display: flex;
      margin-bottom: 20rpx;
      .element-col-icon {
        width: 80rpx;
        height: 80rpx;
        margin-right: 10rpx;
      }
      .element-col {
        margin-left: 10rpx;
        .element-col-title {
          font-size: 28rpx;
          color: #042118;
          font-weight: 700;
          .unit {
            font-size: 24rpx;
            color: #999;
          }
        }
        .element-col-content {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }
}
</style>