bigDataApp/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-group" v-for="(group, gIndex) in groups" :key="gIndex">
        <!-- 组名：接口 sensor_list 节点 display_name（对应 PC 屏的 1组/2组 徽标） -->
        <view class="element-group-name" v-if="group.name">{{ group.name }}</view>
        <view class="element-grid">
          <view class="element-row" v-for="(item, index) in group.sensors" :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>
    </view>
  </view>
</template>
<script>

export default {
  name: 'Element',
  props: {
    // status 接口返回的 sensor_list（节点嵌套：display_name + children），为空时展示内置示例
    sensorList: {
      type: Array,
      default: null,
    },
    title: {
      type: String,
      default: '1号环控',
    },
  },
  computed: {
    // sensor_list 节点 → 分组：组名取节点 display_name，子传感器值取 SensorDevXX:FieldName 遥测 key
    groups() {
      if (!this.sensorList || !this.sensorList.length) {
        return this.demoGroups;
      }
      return this.sensorList
        .map((node) => ({
          name: node.display_name || '',
          sensors: (node.children || []).map((item) => {
            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),
            };
          }),
        }))
        .filter((group) => group.sensors.length);
    },
  },
  data() {
    return {
      demoGroups: [
        {
          name: '1组',
          sensors: [
            {
              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 {
    padding: 20rpx;
    .element-group {
      & + .element-group {
        margin-top: 32rpx;
      }
    }
    // 组名徽标：浅绿底绿字（对应 PC 深色屏的 1组/2组 方块）
    .element-group-name {
      display: inline-block;
      padding: 6rpx 24rpx;
      margin-bottom: 20rpx;
      background: #e6f7ee;
      border-radius: 8rpx;
      color: #0bbc58;
      font-family: 'Source Han Sans CN VF';
      font-size: 24rpx;
      font-weight: 600;
    }
    .element-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 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>