cbsl-app/pages/simpleResviror/jbxx/jbzz/index.vue

<template>
  <view class="jbzz-box">
    <!-- 行政区划 -->
    <view class="region-section">
      <text class="region-label">行政区划：</text>
      <text class="region-value">湖北省咸宁市赤壁市官塘镇</text>
    </view>

    <view class="project-des">
      <view v-for="(item, index) in infoList" :key="index" class="info-item">
        <view class="info-content">
          <view class="circle-dot"></view>
          <view class="label-name">
            <text class="label-text">{{ item.label }}</text>
            <text class="value-text">{{ item.value }}{{ item.unit }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const gmObj = {
        "1": "大 (1)型",
        "2": "大 (2)型",
        "3": "中型",
        "4": "小 (1)型",
        "5": "小 (2)型",
        "9": "其他",
    }
export default {
  data() {
    return {
      // 字段配置：标签、字段名、单位
      fieldConfig: [
        { label: '坝顶高程', field: 'bdgc', unit: 'm' },
        { label: '工程规模', field: 'engScal', unit: '' },
        { label: '校核洪水位', field: 'jyhsw', unit: 'm' },
        { label: '总库容', field: 'zkr', unit: '万m³' },
        { label: '设计洪水位', field: 'sjhsw', unit: 'm' },
        { label: '防洪库容', field: 'fhkr', unit: '万m³' },
        { label: '防洪高水位', field: 'fhgsw', unit: 'm' },
        { label: '兴利库容', field: 'xlkr', unit: '万m³' },
        { label: '正常蓄水位', field: 'zcxsw', unit: 'm' },
        { label: '调洪库容', field: 'thkr', unit: '万m³' },
        { label: '汛限水位', field: 'xxsw', unit: 'm' },
        { label: '集雨面积', field: 'jymj', unit: 'km²' },
        { label: '控制运行水位', field: 'kzyxsw', unit: 'm' },
        { label: '死水位', field: 'ssw', unit: 'm' },
        { label: '死库容', field: 'skr', unit: '万m³' }
      ],
      // 后端返回的数据
      apiData: {
        bdgc: '80',
        engScal: "2",
        jyhsw: '78.44',
        zkr: '1531',
        sjhsw: '77.45',
        fhkr: '359',
        fhgsw: '76',
        xlkr: null,
        zcxsw: '76',
        thkr: null,
        xxsw: '75.3',
        jymj: '2.1',
        kzyxsw: '',
        ssw: '',
        skr: ''
      }
    }
  },
  computed: {
    // 处理后的列表数据
    infoList() {
      return this.fieldConfig.map(config => {
      
        const value = config.field != 'engScal' ? this.apiData[config.field] : gmObj[this.apiData[config.field]];
        return {
          label: config.label,
          value: value || '--',
          unit: value ? config.unit : ''
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.jbzz-box {
  padding: 20rpx;
  background-color: #fff;
}

.region-section {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.region-label {
  font-size: 28rpx;
  color: #999;
}

.region-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.project-des {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #f2f2f2;
  background-color: #ffffff;
  padding: 0 10px;
  max-height: calc(100vh - 210px);
  overflow: auto;
}

.info-item {
  width: 50%;
}

.info-content {
  display: flex;
  align-items: center;
  margin: 15px 0;
}

.circle-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #409eff;
  margin-left: 10px;
  flex-shrink: 0;
}

.label-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.label-text {
  opacity: 0.5;
  text-align: center;
  font-size: 26rpx;
  margin-bottom: 8rpx;
}

.value-text {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}
</style>